/* * critical.css — Estilos mínimos para el above-the-fold * Se sirve inline en para evitar FOUC y layout shift durante el LCP. * NO incluir aquí nada que no sea visible en las primeras pantallas. * * USO: incluir en head.php con: * * o via php readfile(). */ /* Box model */ *, *::before, *::after { box-sizing: border-box; } /* Variables de marca mínimas */ :root { --ca-brown: #6c4027; --ca-cream: #fef2d8; --ca-ink: #1a0f09; --ca-accent: #ec6426; --ca-yellow: #f8a91f; --ca-surface: #fef9f2; --ca-border: rgba(108,64,39,.15); } /* Preloader placeholder para evitar flash blanco */ #preloader { position: fixed; inset: 0; z-index: 99999; background: var(--ca-cream); display: flex; align-items: center; justify-content: center; } /* Body base */ body { margin: 0; background-color: var(--ca-surface); color: var(--ca-ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Hero containers no colapsan antes de que cargue el CSS principal */ .ca-hero, .ca-post-hero { min-height: 60vh; background-color: var(--ca-brown); } /* Nav placeholder height */ header, .header-area, .ca-resizable-nav { min-height: 64px; } /* Imágenes no desbordan */ img { max-width: 100%; height: auto; }