/* 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;
  /* 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);
}

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;
  }
}