/* ================================================================
   CINTILLO La Manigua — navegación de sitio (componente compartido)
   ----------------------------------------------------------------
   Autocontenido: paleta y fuentes propias con fallbacks → aspecto
   uniforme en toda La Manigua sin depender de las variables de cada
   página. Failsafe: sin JS del cintillo el menú móvil queda abierto;
   si este CSS no carga, los enlaces siguen funcionando (degradación
   grácil). El selector de idioma se estiliza aquí (.lm-lang-btn) pero
   lo ACCIONA el mecanismo bilingüe nativo de cada página (la 2ª clase
   de cada botón — p.ej. hc-lang-btn — es el gancho de ese runtime).
   ================================================================ */
.lm-cintillo {
    --lm-bg: rgba(14, 11, 9, 0.72);
    --lm-bg-solid: rgba(12, 10, 8, 0.97);
    --lm-menu-bg: rgba(12, 10, 8, 0.97);
    --lm-text: #F0E9DC;
    --lm-text-soft: rgba(240, 233, 220, 0.82);
    --lm-accent: #E7C89C;
    --lm-hairline: rgba(240, 233, 220, 0.12);
    --lm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lm-font-display: 'Bodoni Moda', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --lm-font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--lm-bg);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    border-bottom: 1px solid var(--lm-hairline);
}
/* Navegador sin backdrop-filter → velo sólido de respaldo (legibilidad) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lm-cintillo { background: var(--lm-bg-solid); }
}
.lm-cintillo-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 82rem;
    margin: 0 auto;
    padding: 0.72rem clamp(1.1rem, 5vw, 2.5rem);
}
.lm-brand {
    flex: none;
    font-family: var(--lm-font-display);
    font-weight: 600;
    font-size: 1.04rem;
    letter-spacing: 0.01em;
    color: var(--lm-text);
    text-decoration: none;
    transition: color 0.4s var(--lm-ease);
}
.lm-brand:hover,
.lm-brand:focus-visible { color: var(--lm-accent); }
.lm-sections {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 2.1vw, 1.6rem);
    margin-left: auto;
}
.lm-cintillo .lm-sections a {
    position: relative;
    font-family: var(--lm-font-mono);
    font-size: 0.67rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lm-text-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.35s var(--lm-ease), opacity 0.35s var(--lm-ease);
}
.lm-cintillo .lm-sections a:hover,
.lm-cintillo .lm-sections a:focus-visible { color: var(--lm-accent); }
.lm-cintillo .lm-sections a[aria-current="page"] { color: var(--lm-accent); }
.lm-cintillo .lm-sections a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.42rem;
    height: 1px;
    background: var(--lm-accent);
}
.lm-section-soft { opacity: 0.6; }        /* Constelación / Contacto: nivel hub, jerarquía rebajada */
.lm-section-soft:hover { opacity: 1; }
.lm-lang {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: clamp(0.85rem, 2.1vw, 1.4rem);
    margin-left: clamp(0.85rem, 2.1vw, 1.4rem);
    border-left: 1px solid var(--lm-hairline);
}
/* Escopados bajo .lm-cintillo para ganar a los estilos de idioma nativos de
   cada página (los botones llevan además su clase-gancho, p.ej. hc-lang-btn). */
.lm-cintillo .lm-lang-btn {
    background: none;
    border: 0;
    padding: 0.1rem 0.15rem;
    cursor: pointer;
    font-family: var(--lm-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-text-soft);
    opacity: 0.55;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: opacity 0.4s var(--lm-ease), color 0.4s var(--lm-ease), text-decoration-color 0.4s var(--lm-ease);
}
.lm-cintillo .lm-lang-btn:hover { opacity: 1; text-decoration-color: var(--lm-hairline); }
.lm-cintillo .lm-lang-btn.is-active { opacity: 1; color: var(--lm-text); text-decoration-color: var(--lm-accent); cursor: default; }
.lm-lang-sep { color: var(--lm-text-soft); opacity: 0.4; font-size: 0.7rem; }

.lm-cintillo-toggle {
    display: none;
    flex: none;
    width: 40px; height: 40px;
    margin-left: 0.4rem;
    padding: 0;
    background: none;
    border: 1px solid var(--lm-hairline);
    border-radius: 4px;
    cursor: pointer;
    color: var(--lm-text);
    align-items: center;
    justify-content: center;
    transition: border-color 0.35s var(--lm-ease);
}
.lm-cintillo-toggle:hover { border-color: var(--lm-accent); }
.lm-burger, .lm-burger::before, .lm-burger::after {
    content: '';
    display: block;
    width: 18px; height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--lm-ease), opacity 0.3s var(--lm-ease);
}
.lm-burger { position: relative; }
.lm-burger::before { position: absolute; top: -6px; }
.lm-burger::after { position: absolute; top: 6px; }
.lm-cintillo.is-open .lm-burger { background: transparent; }
.lm-cintillo.is-open .lm-burger::before { top: 0; transform: rotate(45deg); }
.lm-cintillo.is-open .lm-burger::after { top: 0; transform: rotate(-45deg); }

.lm-cintillo :focus-visible {
    outline: 2px solid var(--lm-accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.lm-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
    .lm-sections {
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.15rem;
        margin: 0;
        padding: 1.3rem clamp(1.1rem, 5vw, 2.5rem) 1.7rem;
        background: var(--lm-menu-bg);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--lm-hairline);
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .lm-cintillo .lm-sections a { font-size: 0.8rem; letter-spacing: 0.16em; }
    .lm-cintillo .lm-sections a[aria-current="page"]::after { bottom: -0.35rem; right: auto; width: 1.6rem; }
    .lm-cintillo.is-open .lm-sections { transform: none; opacity: 1; pointer-events: auto; }
    .lm-lang { margin-left: auto; }
    .lm-cintillo-toggle { display: inline-flex; }
}
/* Sin JS del cintillo: el menú móvil queda abierto (enlaces alcanzables) */
@media (max-width: 900px) {
    html:not(.lm-js) .lm-sections { position: static; transform: none; opacity: 1; pointer-events: auto; }
    html:not(.lm-js) .lm-cintillo-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lm-cintillo *, .lm-cintillo *::before, .lm-cintillo *::after { transition-duration: 0.01ms !important; }
}