/* ==========================================================================
   base.css — reset, tipografía base y utilidades.
   Depende de tokens.css. Sin maquetación de secciones aquí.
   ========================================================================== */

/* Reset moderno mínimo -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  color: var(--lfi-navy);
  background: var(--lfi-white);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Red de seguridad anti-scroll horizontal: el fallo responsive más típico. Se
   evita en origen (anchos fluidos, imágenes max-width:100%), pero overflow-x
   clip corta cualquier desborde puntual sin romper position:sticky/fixed. */
html { overflow-x: clip; }

/* DECISIÓN MÓVIL: al abrir el menú hamburguesa se bloquea el scroll del body
   (el panel ocupa toda la pantalla; scrollear detrás desorienta). */
body.lfi-nav-open { overflow: hidden; }

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

/* El atributo [hidden] debe ocultar siempre, aunque la tarjeta tenga display
   propio (reveal.js oculta tarjetas de casos/actualidad con `hidden`). */
[hidden] { display: none !important; }

/* <picture> se usa solo como envoltorio de <source>+<img> (heros/slider en WebP
   con fallback). Con display:contents no forma caja propia: el <img> cuenta como
   hijo directo de su contenedor, de modo que su height:100% se resuelve contra
   la banda del hero (no contra el <picture>, que rompería el alto). */
picture { display: contents; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--lfi-weight-extrabold); line-height: 1.1; }

/* Accesibilidad: foco visible ------------------------------------------ */
:focus-visible { outline: 2px solid var(--lfi-red); outline-offset: 2px; }

/* Utilidad: solo para lectores de pantalla ----------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Interacción aprobada: enlaces/botones invierten rojo <-> azul --------- */
/* (implementación real por componente; aquí solo se documenta el patrón) */