/**
 * Header Option 02 — Glass flotante sobre foto (DESKTOP)
 * Migrado desde assets/css/header-option02.css (reglas base, sin el
 * bloque @media que ahora es mobile/header-option02-mobile.css).
 */
.header-option02 {
    position: relative;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header-option02 .header-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.header-option02 .header-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-option02 .glass-nav-wrap {
    position: relative;
    z-index: 2;
    padding: 24px var(--gutter) 0;
}

.header-option02 .glass-nav {
    max-width: var(--container-xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 14px 14px 22px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.header-option02 .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}

/* Logo de empresa configurable (reemplaza al SVG de marca cuando el
   administrador eligió uno desde la Biblioteca multimedia): conserva sus
   proporciones (object-fit: contain), ocupa aproximadamente el mismo alto
   que el SVG y un tope de max-width evita que un logo muy apaisado empuje
   demasiado a la píldora glass. */
.header-option02 img.brand-mark {
    height: 26px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.header-option02 .brand-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
}

/* Red de contención: el nav puede achicarse y recorta su contenido para
   nunca desbordar la píldora glass — el acceso real a los enlaces cuando
   no entran lo resuelve el menú desplegable de abajo. */
.header-option02 .nav-menu {
    min-width: 0;
    overflow: hidden;
}

.header-option02 .nav-menu ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    width: max-content;
}

.header-option02 .nav-menu a {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}

.header-option02 .nav-menu a:hover { color: #fff; }

.header-option02 .btn.btn-light.btn-sm { flex-shrink: 0; }

/* ============================================================
   Menú colapsado — activado por JS (header-option02-desktop.js)
   cuando el nav no entra en el ancho disponible.
   ============================================================ */

.header-option02 .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}

.header-option02 .nav-toggle span {
    width: 20px;
    height: 2px;
    background: #fff;
}

.header-option02.is-nav-collapsed .nav-toggle {
    display: flex;
}

/* Panel de navegación contenido, NO un overlay a pantalla completa: se
   despliega como un dropdown elegante debajo de la píldora, alineado a la
   derecha, con ancho y alto acotados — el fondo de la página sigue visible
   alrededor. `.header-option02` es una franja hero con `overflow:hidden`
   (recorta la foto de fondo) que clipearía cualquier panel absoluto que la
   excediera en alto, y además comparte `z-index:2` con `.header-headline`
   (el titular grande), que quedaba pisándolo. `position:fixed` escapa de
   ambos problemas (el panel se ancla al viewport, no a `.header-option02`). */
/* position:fixed escapa del overflow:hidden de `.header-option02`, pero un
   descendiente fixed sigue apilándose DENTRO del stacking context de su
   ancestro (.glass-nav-wrap, z-index:2) al compararlo contra hermanos como
   .header-headline (mismo z-index:2, más adelante en el DOM): sin este
   empujón, ese hermano seguía pisando visualmente el panel entero. */
.header-option02.is-nav-collapsed.is-nav-open .glass-nav-wrap {
    z-index: 1199;
}

/* `.glass-nav` tiene backdrop-filter (el efecto vidrio de la píldora), y
   backdrop-filter en un ancestro crea un "containing block" para sus
   descendientes position:fixed — sin esto, el panel/scrim de abajo
   terminaban posicionados relativos a la píldora (~1320×150px) en vez de
   al viewport completo. Se desactiva sólo mientras el panel está abierto
   (la píldora ya no se ve detrás de él de todos modos). */
.header-option02.is-nav-collapsed.is-nav-open .glass-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Scrim sutil detrás del panel: da foco al menú sin ocultar la página
   (fondo semitransparente, nunca opaco). `visibility` (en vez de
   `display:none`) para poder animar opacidad al abrir/cerrar — con
   `display:none` el navegador no tiene un frame previo desde el que
   transicionar. El `transition-delay` de `visibility` retrasa la
   desaparición hasta que termina el fade al cerrar, e ignora el delay al
   abrir (mismo patrón que `.h5-overlay` de header-option05). */
.header-option02 .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1198;
    background: rgba(12, 10, 9, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast, 200ms) var(--ease-out, ease),
                visibility 0s linear var(--duration-fast, 200ms);
}

.header-option02.is-nav-collapsed.is-nav-open .nav-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-fast, 200ms) var(--ease-out, ease),
                visibility 0s linear 0s;
}

.header-option02.is-nav-collapsed .nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 92px;
    right: var(--gutter);
    left: auto;
    width: min(320px, calc(100vw - (var(--gutter) * 2)));
    max-height: min(70vh, 520px);
    z-index: 1200;
    margin: 0;
    padding: 48px 10px 14px;
    border-radius: 20px;
    overflow-y: auto;
    background: rgba(20, 18, 15, 0.97);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--duration-fast, 200ms) var(--ease-out, ease),
                transform var(--duration-fast, 200ms) var(--ease-out, ease),
                visibility 0s linear var(--duration-fast, 200ms);
}

.header-option02.is-nav-collapsed.is-nav-open .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--duration-fast, 200ms) var(--ease-out, ease),
                transform var(--duration-fast, 200ms) var(--ease-out, ease),
                visibility 0s linear 0s;
}

.header-option02.is-nav-collapsed .nav-menu ul {
    flex-direction: column;
    width: auto;
    margin: 0;
    gap: 0;
}

.header-option02.is-nav-collapsed .nav-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.header-option02.is-nav-collapsed .nav-menu a {
    display: block;
    padding: 14px 4px;
    font-size: var(--text-sm);
}

/* Botón de cierre — esquina superior derecha del panel, área de click
   generosa (36×36) y buen contraste sobre el fondo oscuro glass. */
.header-option02 .nav-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.header-option02 .nav-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.header-option02 .header-headline {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: flex-end;
    max-width: var(--container-xl);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter) 56px;
}

.header-option02 .header-headline p {
    max-width: 640px;
    margin: 0;
}