/* ==========================================================================
   Peptáre · base.css
   Reset, tipografía base, foco, idioma y movimiento reducido.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  /* Con la tab bar abajo, cualquier salto a un ancla dejaría el destino
     debajo de ella. Esto también arregla el scrollIntoView que ya usa
     principal.js al elegir una necesidad en el cuestionario.
     Ojo: esto NO evita que el pie quede tapado — de eso se encarga el
     padding-block-end del body, que es otra cosa. Hacen falta los dos. */
  scroll-padding-block-end: calc(var(--tab-alto) + var(--safe-abajo) + var(--e-4));
  /* El destello gris del toque en Android delata que esto es una web. */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Reserva el alto de la tab bar para que el pie no quede debajo. En lg
     --tab-alto vale 0 y el relleno desaparece solo. */
  padding-block-end: calc(var(--tab-alto) + var(--safe-abajo));
}

img, svg, video { display: block; max-width: 100%; }

/* Los botones traen borde del navegador. Si un componente decide no llevar
   borde propio, el del sistema reaparece y descuadra el estilo: aquí se quita
   de raíz y cada componente pone el que quiera. */
button { border: 0; background: none; font: inherit; color: inherit; }

/* Una sola familia en toda la página. La jerarquía la hacen el tamaño, el
   peso y el tracking; no un cambio de familia. */
h1, h2, h3, h4 {
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Grande pero no pesado. La referencia usa titulares enormes en peso medio
   con tracking muy cerrado; el bold los volvería genéricos. */
/* Titulares grandes en peso medio. El bold a estos tamaños pesa demasiado y
   devuelve el registro a plantilla de SaaS. La jerarquía la hacen el tamaño y
   el tracking, no el grosor. */
h1 { font-size: var(--t-display); font-weight: 500; letter-spacing: -0.045em; line-height: 1.03; }
h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.03em; }
h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; }

p { text-wrap: pretty; }
/* Solo prosa. Los <li> de este sitio son estructura (rejillas, tablas,
   menús), no texto corrido: aplicarles la medida los encogía a 62ch. */
p, dd, dt, blockquote { max-width: var(--medida); }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* Cifras tabulares: obligatorio para códigos de lote, dosis y precios. */
.dato, time, .cifra, .precio { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---- Foco visible ------------------------------------------------------ */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ---- Cambio de idioma --------------------------------------------------
   El script en línea del <head> marca <html class="cargando"> antes de que el
   navegador pinte. El módulo de idioma aplica las traducciones y quita la
   clase. Sin JavaScript la clase nunca se pone y el contenido en español se
   ve igual: el sitio funciona sin JS, solo pierde el selector. */
html.cargando body { opacity: 0; }
body { transition: opacity 160ms ease-out; }

/* ---- Salto al contenido ------------------------------------------------ */
.salto {
  position: absolute;
  left: var(--e-4);
  top: -100%;
  z-index: 200;
  background: var(--accion);
  color: #fff;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-pill);
  font-size: var(--t-menor);
  font-weight: 600;
  text-decoration: none;
}
.salto:focus { top: var(--e-4); }

/* ---- Tipografía de apoyo ---------------------------------------------- */

/* Marcador de sección. En gris, no en el acento: el color está reservado a
   una sola cosa y repetirlo en cada sección lo gastaba. */
.marcador {
  display: block;
  font-size: var(--t-marcador);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--texto-suave);
  margin-bottom: var(--e-3);
}

.titulo-seccion { margin-bottom: var(--e-4); }

.entrada {
  font-size: var(--t-cuerpo-g);
  line-height: 1.6;
  color: var(--texto-tenue);
  max-inline-size: 54ch;
}

.nota { font-size: var(--t-menor); line-height: 1.6; color: var(--texto-tenue); }

/* ---- Utilidades ------------------------------------------------------- */
.oculto-visual {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.contenedor {
  inline-size: min(100% - var(--gutter), var(--contenedor));
  margin-inline: auto;
}

/* ---- Movimiento reducido ----------------------------------------------
   Aquí vivía un `* { transform: none !important }` que causó dos bugs reales:
   anulaba las transformaciones con las que el cajón y el asistente se
   esconden, así que aparecían abiertos y además recibían foco fuera de
   pantalla. Se parcheó dos veces con guardas de `visibility`.

   Además era redundante: `animation-duration: 0.01ms` con `both` ya deja
   cada animación en su estado final, que es el estado asentado. Y mataba
   cualquier `:active { transform }`, o sea que impedía el feedback táctil
   justo a quien pide menos movimiento.

   Ahora solo se anulan las cuatro transformaciones que de verdad sobran. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    /* Sin esto las animaciones de entrada conservan su retardo: el titular
       y los botones del hero se quedaban invisibles hasta 420ms y aparecían
       de golpe. La duración no bastaba. */
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__linea > span,
  .hero__linea > span { transform: none !important; }
}