/* ═══════════════════════════════════════════════════════════════════════════
   Base — reset, tipografía compartida, utilidades y botones.

   Lo que está aquí lo usan las dos páginas y la 404. Nada de esto sabe de
   secciones concretas.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El interruptor no debe repintar la página a trozos: la transición va en las
   propiedades de color y en nada más. */
body, .barra, .tarjeta, .creditos, .planilla, .seccion--marca, .capacidad,
.problema, .req, .diag__panel {
  transition: background-color var(--dur-2) var(--suave),
              border-color var(--dur-2) var(--suave),
              color var(--dur-2) var(--suave);
}

/* h4 entra en el reset: los requisitos lo usan, y sin esto conserva el
   margen por defecto del navegador y su código queda descolgado del título. */
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--lima);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--marca); color: var(--sobre-marca);
  padding: 12px 18px; border-radius: 0 0 var(--radio-sm) 0;
  z-index: 100; text-decoration: none; font-weight: 600;
}
.saltar:focus { left: 0; top: 0; }

/* 16 px de margen lateral en teléfono, 20 desde tableta. Ningún bloque
   dentro de un envoltorio necesita su propio margen lateral. */
.envoltorio { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.envoltorio--angosto { width: min(100% - 32px, 720px); }
@media (min-width: 600px) {
  .envoltorio { width: min(100% - 40px, var(--ancho)); }
  .envoltorio--angosto { width: min(100% - 40px, 720px); }
}

/* Etiqueta pequeña de código: el nombre de un archivo, una orden. */
code {
  font-family: var(--dato); font-size: .86em;
  background: var(--fondo-sutil);
  border-radius: 4px; padding: 1px 5px;
}

/* ── Tipografía de portada ──────────────────────────────────────────────
   La usan el hero de la página de descarga y la portada del documento. */
.eyebrow {
  font-family: var(--dato);
  font-size: 12px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--lima);
  margin-bottom: 20px;
}
.titular {
  text-wrap: wrap;
  font-size: clamp(2.2rem, 5.1vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -.024em;
}
.titular__acento { color: var(--lima); }
.entradilla {
  margin-top: 22px;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.65;
  color: rgb(255 255 255 / .82);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ── Botones ──────────────────────────────────────────────────────────────
   El tamaño base se define una sola vez y los modificadores solo cambian
   color; así ningún selector posterior pisa el padding de otro.

   Micro-interacción: sube 2 px al pasar, baja a 97 % al pulsar. La bajada
   usa la curva corta porque un botón tiene que responder al dedo antes de
   que el dedo se vaya. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--texto);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--sale),
              background-color var(--dur-1) var(--suave),
              box-shadow var(--dur-1) var(--suave),
              border-color var(--dur-1) var(--suave);
  -webkit-tap-highlight-color: transparent;
}
.boton svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(.97); transition-duration: 80ms; }

.boton--lima { background: var(--lima); color: #12271e; box-shadow: 0 6px 20px rgb(202 210 37 / .34); }
.boton--lima:hover { background: #d8e04a; box-shadow: 0 10px 26px rgb(202 210 37 / .42); }

.boton--marca { background: var(--marca); color: var(--sobre-marca); }
.boton--marca:hover { background: var(--marca-hover); box-shadow: 0 10px 24px rgb(20 77 55 / .22); }

.boton--fantasma { background: transparent; border-color: currentColor; }
.boton--fantasma:hover { background: rgb(255 255 255 / .1); }

.boton--sm { padding: 9px 18px; font-size: 14px; }
.boton--bloque { display: flex; width: 100%; }