:root {
  --tinta: #16202b;
  --tinta-suave: #55636f;
  --papel: #f7f8f9;
  --linea: #d3d9de;
  --acento: #1f5f8b;
  --alerta: #a33a2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

header, main, footer { max-width: 62rem; margin: 0 auto; }

header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 2.5rem 0 1.75rem;
  border-bottom: 2px solid var(--tinta);
}

header img { flex: none; }

h1 {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bajada {
  margin: 0.4rem 0 0;
  max-width: 34em;
  color: var(--tinta-suave);
}

.nav {
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linea);
}

.nav-marca {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.75rem;
}

.nav-links a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--acento);
}

@media (max-width: 30rem) {
  .nav { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
}

section { padding: 2.25rem 0 0; }

h2 {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 700;
}

section > p {
  margin: 0 0 1.1rem;
  max-width: 42em;
  color: var(--tinta-suave);
}

ul { margin: 0; padding: 0; list-style: none; }

.endpoints li {
  display: grid;
  grid-template-columns: 3.5rem 17rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linea);
}

.endpoints li span:last-child { color: var(--tinta-suave); }

.endpoints code { color: var(--acento); }

.metodo {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.metodo.get { color: var(--acento); }
.metodo.post { color: var(--alerta); }

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

form { max-width: 22rem; margin: 1.75rem 0; }

label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 0.35rem;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--tinta);
}

input[type="text"]:focus, input[type="password"]:focus {
  outline: none;
  border-color: var(--acento);
}

button {
  padding: 0.65rem 1.4rem;
  border: none;
  border-radius: 0.35rem;
  background: var(--acento);
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover { background: #184b6d; }

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

@media (max-width: 40rem) {
  header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .endpoints li { grid-template-columns: 1fr; gap: 0.15rem; }
  .endpoints li span:last-child { padding-bottom: 0.25rem; }
}