/* =========================================================
   Proyecto Raíces — FOUNDATION · Base
   ---------------------------------------------------------
   Reset, estilos por defecto de elementos HTML, contenedor
   (.wrap), accesibilidad global (skip link, foco visible) y
   transiciones entre páginas. Sólo consume tokens.
   ========================================================= */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
/* Transición entre páginas — nativa del navegador (View Transitions,
   cross-document), sin JS: un fundido breve y automático que no toca
   links, back/forward, filtros ni query strings, y que directamente no
   existe en navegadores que no la soportan (degrada a la navegación de
   siempre, sin corte extra ni salto). */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}
/* El menú mobile (.navlinks) vive fuera de pantalla vía position:fixed +
   translateX(100%): eso agranda el scrollWidth del documento aunque nada
   sea alcanzable al hacer scroll. overflow-x:hidden en html (arriba)
   contiene ese ancho fantasma sin tocar el menú ni su animación.
   Iba duplicado también en body, pero overflow-x sin overflow-y en el
   mismo elemento hace que el navegador calcule overflow-y:auto ahí —
   eso convertía a body en un contenedor de scroll propio y rompía
   position:sticky del header (dejaba de quedar fijo al hacer scroll). */
body{font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary); line-height:1.5;}
h1,
h2,
h3{font-family:var(--font-heading); font-weight:700; letter-spacing:var(--tracking-tight);}
img{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter);}
/* Skip link (accesibilidad) */
.skip-link{position:absolute; left:-999px; top:0; background:var(--bg-dark); color:var(--color-blanco); padding:10px 16px; z-index:999; border-radius:0 0 6px 0;}
.skip-link:focus{left:0;}
/* Foco visible (sistema único, sólo teclado): anillo amarillo sobre
   la superficie por defecto (verde/tinta). Los paneles claros (papel)
   redefinen --focus-ring con --focus-ring-on-paper en su propia hoja.
   :where() mantiene la especificidad en 0 para no competir con los
   estilos de cada componente. Los campos de formulario conservan su
   propio estado de foco (borde naranja, ver components.css). */
:where(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--focus-ring); outline-offset:3px;}
/* ---------- Utilidades ---------- */
.mt-0{margin-top:0;}
@media (max-width: 640px){
  .wrap{padding:0 var(--gutter-mobile);}
}