/* ============================================================ Capa 3: Componentes ============================================================ */ /* ------------------------------------------------------------ HEADER Y NAV Vive acá y no en home.css porque template-parts/header/site- header.php se renderiza en TODAS las páginas vía get_header(): home.css solo se encola en portada y en single de 'ruta' (ver inc/enqueue.php), así que cualquier regla de header que quedara allá dejaría sin estilos al header del blog, páginas genéricas, historias, etc. ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: transparent; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } /* El header arranca transparente sobre el hero oscuro y se vuelve sólido recién al scrollear. La clase la pone ui.js con un sentinel, no con un listener de scroll. Fuera de portada/ruta no hay hero debajo, pero la transición sigue siendo inocua: el header nace transparente y pasa a sólido igual al primer scroll. */ .site-header.is-scrolled { background: rgba(11, 18, 20, 0.92); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 4.5rem; } .site-header__logo img { height: 2.5rem; width: auto; } /* Oculto por defecto a cualquier ancho: la media query de abajo lo revela solo por debajo de 60rem y solo si mobile-nav.js corrió. */ .menu-toggle { display: none; } /* Bloquea el scroll del body mientras el panel mobile está abierto. */ body.has-mobile-nav-open { overflow: hidden; } @media (max-width: 59.99rem) { /* Sin JS: el