/* ========================================================================== layout.css — contenedores, HEADER y FOOTER. Depende de base.css + tokens.css. CERO valores hardcodeados: todo sale de custom properties de tokens.css. Mobile-first: los estilos base son móviles; se amplían en @media 768 y 1024. El Figma solo define desktop (1440); las decisiones móviles son propias y van documentadas en comentarios para poder defenderlas en la revisión. ========================================================================== */ /* ========================================================================== Nota: --lfi-header-h-mobile (alto del header en móvil/tablet) se define en tokens.css. En ≥1024 se reasigna a --lfi-header-h (ver breakpoint 1024 más abajo), de modo que la barra y el padding-top del body se ajustan solos. ========================================================================== */ /* ========================================================================== Contenedor genérico de contenido ========================================================================== */ /* Contenido = --lfi-content (1224 = 1440 − 2×108). El max-width incluye el gutter (padding), por eso se suma: así el CONTENIDO interior mide 1224 exactos en desktop (antes el max-width era 1224 y, con el padding, el contenido caía a 1008 → cajas/rejillas estrechas). El gutter es responsivo (24/48/108). */ .lfi-container { width: 100%; max-width: calc(var(--lfi-content) + 2 * var(--lfi-gutter)); margin-inline: auto; padding-inline: var(--lfi-gutter); } /* El header es fijo: se reserva su alto con padding-top en el WRAPPER de contenido (.lfi-main), NO en el . MOTIVO (bug de raíz): WordPress inyecta un