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

html{
  -webkit-text-size-adjust:100%;
  /* SIN REBOTE AL LLEGAR A LOS EXTREMOS. El cliente lo probó en su teléfono: al primer scroll, y
     en los arrastres largos, «la pantalla se estira hacia arriba en lugar de hacer el scroll» y
     asoma un cuadro blanco por abajo. Eso es el overscroll del navegador: al topar con el
     principio o el final del documento, en vez de parar, estira el contenido y deja ver lo que
     hay detrás, que es el fondo de la página.
     En una página normal eso se nota poco. Aquí no: la sección de arriba es el recorrido, con una
     capa pegada que ocupa la pantalla entera, así que el estirón mueve una imagen que el visitante
     está leyendo como una secuencia y parece que la página falla.
     `none` y no `contain`: contain impide que el scroll se encadene al contenedor de al lado pero
     CONSERVA el rebote, que es justo lo que molestaba.
     LO QUE ESTO CUESTA, para que quede dicho: en Android desaparece el «tirar para recargar». En
     una landing sin contenido que se refresque, no se pierde nada; en una página de noticias sí
     sería una pérdida. Sólo el eje vertical: el horizontal no se toca, que ahí el rebote es la
     señal de que no hay nada más a los lados. */
  overscroll-behavior-y:none;
}

body{
  background:var(--stock);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.5;
}

/* El atributo hidden debe ganar siempre: sin esto, cualquier regla display (p. ej. .quote__form{display:grid})
   lo pisa y el elemento sigue visible. */
[hidden]{
  display:none !important;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

:focus-visible{
  outline:3px solid var(--alert);
  outline-offset:3px;
}

/* Tarea 10 — revelados por scroll. Estado en reposo visible: sin JS, la página se ve completa */
.rv{ opacity:1; transform:none }
.js-reveal .rv{
  opacity:0; transform:translateY(10px);
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.js-reveal .rv.on{ opacity:1; transform:none }

/* docs/motion.md — más suave, no cero */
@media (prefers-reduced-motion: reduce){
  .rv{ transform:none !important; transition-duration:200ms !important }
  .rule-draw{ transform:none !important }
}