/* reset.css — browser / native-element resets */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* `[hidden]` reforzado · el HTML5 spec define el attribute `hidden` como
   `display: none`, pero CSS específicos (ej. `.mis-grid { display: grid }`)
   ganan en cascada y dejan el elemento visible aunque tenga `hidden="true"`.
   Esta regla universal asegura que SIEMPRE oculta — patrón estándar
   recomendado por whatwg.org y normalize.css. */
[hidden] {
  display: none !important;
}

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

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

html {
  scroll-behavior: smooth;
  /* Los tamaños de tipografía son los que decide el sistema, también en el
     móvil. iOS Safari (y Chrome en Android) AGRANDAN el texto por su cuenta
     cuando un bloque es más ancho que la pantalla —herencia de cuando las
     webs se hacían solo para escritorio y en el móvil salían minúsculas—, y
     el factor depende del ancho del bloque que lo contiene, así que dos
     elementos con el MISMO tamaño declarado pueden verse distintos. No se
     reproduce en el emulador de escritorio: allí los dos miden igual.
     Caso que lo destapó: el título de la cabecera flotante de tabla salía a
     ~28 y el de la tabla real a 22 en el iPhone de Irene (QA #152), medido
     sobre su vídeo: 893px de ancho de texto contra 702. Se apagaba solo en
     las tablas; aquí se apaga en todo el sitio. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Negro hasta el último píxel · iOS Safari muestra el background del
     <html> en las zonas de overscroll (rubber-band al hacer scroll
     up/down más allá del contenido) y bajo la status bar cuando la
     barra de URL se oculta. Sin este background, se ve blanco/transparente
     en esas zonas y queda feo. */
  background: var(--bg-neutral-bold);
  /* Compañero del `overflow-x: hidden` del body. El drawer móvil (.nav-links)
     es `position: fixed` con la .nav (backdrop-filter) como bloque contenedor;
     cerrado vive fuera de pantalla a la derecha y el clip del body NO alcanza a
     un elemento fixed → dejaba scroll horizontal en móvil. El clip en html sí
     lo recorta.
     ⚠️ DEBE ser `clip`, NO `hidden`: `overflow-x: hidden` fuerza `overflow-y`
     a `auto`, convirtiendo <html> en contenedor de scroll y ROMPIENDO todo
     `position: sticky` de la página (p.ej. el cielo del parallax de las
     expeditions → franja negra). `clip` recorta igual pero NO crea contenedor
     de scroll (overflow-y sigue `visible`), así que el sticky sigue intacto. */
  overflow-x: clip;
}

html.no-transitions *,
html.no-transitions *::before,
html.no-transitions *::after {
  transition: none !important;
  animation: none !important;
}

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

a {
  color: var(--content-link-default);
  text-decoration: none;
  transition: color var(--dur-instant) var(--ease-out);
}

/* Solo con ratón (norma del sistema, QA 561): en un teléfono el :hover se
   queda pegado al tocar y, como `a:hover` gana a `.btn-primary` (que no
   redefine el color fuera de su propio hover), el texto de un botón-enlace
   amarillo se volvía amarillo sobre amarillo (QA 749). */
@media (hover: hover) {
  a:hover {
    color: var(--content-link-hover);
  }
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--content-text-default);
  background: var(--bg-neutral-bold);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /* `clip` (no `hidden`): recorta el overflow horizontal SIN crear contenedor
     de scroll. `hidden` en body, combinado con `overflow-x: clip` en <html>,
     rompía `position: sticky` (cielo del parallax → franja negra). Ambos en
     `clip` = drawer móvil recortado Y sticky intacto. */
  overflow-x: clip;
}

p {
  line-height: var(--lh-body);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}