/* Base global del tema FIIB. Depende de tokens.css y fonts.css. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); } body { margin: 0; font-family: var(--font-base); font-size: var(--fiib-body-size-medium); line-height: 1.3; color: var(--color-texto); /* Fondo = color del hero (#001B26): detrás del header translúcido no asoma blanco en el scroll inicial. Las secciones llevan su propio fondo, así que sólo se ve en esa franja superior. */ background: var(--color-negro-azul); /* Suavizado como en el render de Figma (macOS pinta subpixel por defecto y engorda el texto). */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* El contenido va sobre blanco (legibilidad/contraste). El fondo oscuro del sólo se ve tras el header translúcido (que es hermano y va antes de main), no bajo el contenido. */ .sitio-main { background: var(--color-blanco); } img, picture, video, svg { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4, p { margin: 0; } /* `ol` incluido a propósito: las migas usan
    (orden semántico de la jerarquía) y sin este reset heredaban del navegador `padding-inline-start: 40px` y `margin: 16px 0`, que las desalineaban 40px de la retícula y las hacían solaparse con el bloque de abajo. */ ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } /* Contenedor estándar (bloques.md §Layout responsive): 1216px centrado, padding fluido. */ .contenedor { width: 100%; max-width: calc(var(--contenedor-max) + 2 * 112px); margin-inline: auto; padding-inline: var(--contenedor-pad); } /* ── Banda de diseño de 1440px ──────────────────────────────────────────────── El diseño de Figma está hecho a 1440px. En los heros, la imagen de fondo va a ancho completo (sangrado), pero su CONTENIDO no debe rebasar esa banda: por encima de 1440px se centra en lugar de quedarse pegado a la izquierda. `--banda` es el margen lateral sobrante a cada lado; vale 0 por debajo de 1440px, así que los valores de Figma quedan intactos en el diseño de referencia y en móvil. Se suma a cada offset lateral: left: calc(var(--banda) + 112px) El `%` se resuelve contra el bloque contenedor —la
    del hero, que va a ancho completo—, de modo que equivale a (ancho de viewport − 1440px) / 2. Se usa `%` y no `vw` a propósito: `100vw` incluye la barra de scroll y descuadraría el centrado en los sistemas que la muestran. */ .hero, .hero-interior, .hero-dist, .hero-single { --banda: max(0px, (100% - var(--banda-max)) / 2); } /* Skip link accesible (WCAG 2.4.1). */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--color-negro-azul); color: var(--color-blanco); padding: 12px 20px; } .skip-link:focus { left: 0; } /* Foco visible AA. */ :focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; } /* Regla global de animaciones: solo se aplican sin `anim-off` y sin reduce-motion. Los bloques definen sus animaciones dentro de `.js:not(.anim-off) ...`. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }