/* ==========================================================================
   menu_addon.css — Xorcom MX
   Agregar al final de estilos.css (o incluir como <link> separado antes del </head>)

   Contiene ÚNICAMENTE los estilos nuevos:
     · Indicador de página activa
     · Dropdown "IA & WhatsApp" (desktop + móvil)
     · Animación hamburguesa → X
     · Bloqueo de scroll body cuando menú móvil está abierto
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────────────────
   0. VARIABLES LOCALES (extienden las de estilos.css sin sobreescribir)
──────────────────────────────────────────────────────────────────────────── */
:root {
    --menu-dropdown-bg:      #0d1b35;        /* fondo del panel desplegable     */
    --menu-dropdown-border:  rgba(255,233,0,.25); /* borde superior amarillo sutil */
    --menu-dropdown-shadow:  0 12px 32px rgba(0,0,0,.45);
    --menu-active-color:     #FFE900;        /* mismo que --amarillo             */
    --menu-hover-color:      rgba(255,233,0,.85);
    --menu-transition:       220ms cubic-bezier(.4,0,.2,1);
    --menu-dropdown-radius:  10px;
    --menu-item-pad:         .55rem 1.1rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   1. INDICADOR DE PÁGINA ACTIVA
   Subrayado animado debajo del enlace activo
──────────────────────────────────────────────────────────────────────────── */
.nav-menu > li > a,
.nav-menu > li > .dropdown-toggle {
    position: relative;
}

/* Línea de subrayado para todos los links (oculta por defecto) */
.nav-menu > li > a::after,
.nav-menu > li > .dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--menu-active-color);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--menu-transition);
}

/* Hover: mostrar línea */
.nav-menu > li > a:hover::after,
.nav-menu > li > .dropdown-toggle:hover::after,
.nav-menu > li.has-dropdown:hover > .dropdown-toggle::after {
    width: 80%;
}

/* Página activa: línea siempre visible */
.nav-menu > li.active > a::after,
.nav-menu > li.active > .dropdown-toggle::after {
    width: 80%;
}

/* Color del texto en página activa */
.nav-menu > li.active > a,
.nav-menu > li.active > .dropdown-toggle {
    color: var(--menu-active-color) !important;
}

/* Planes: acento amarillo permanente */
.nav-menu a.nav-planes {
    color: var(--menu-active-color) !important;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. DROPDOWN TOGGLE BUTTON
   Resetear estilos de <button> para que luzca como un enlace de nav
──────────────────────────────────────────────────────────────────────────── */
.dropdown-toggle {
    background:    none;
    border:        none;
    padding:       0;
    margin:        0;
    cursor:        pointer;
    font:          inherit;          /* hereda Sora/Inter del nav               */
    color:         white;        /* ← agregar esta línea */
    letter-spacing: inherit;
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    white-space:   nowrap;
}

/* Chevron: rotación al abrir */
.dropdown-toggle .chevron {
    display:    inline-block;
    transition: transform var(--menu-transition);
    flex-shrink: 0;
    margin-top: 1px;
}

.has-dropdown.open > .dropdown-toggle .chevron {
    transform: rotate(180deg);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. PANEL DESPLEGABLE — DESKTOP  (> 900px)
──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {

    .has-dropdown {
        position: relative;
    }

    /* Panel oculto por defecto */
    .dropdown-menu {
        position:   absolute;
        top:        100%;               /* SIN gap: el panel empieza justo aquí  */
        left:       50%;
        transform:  translateX(-50%) translateY(-6px);
        min-width:  210px;
        background: var(--menu-dropdown-bg);
        border-top: 2px solid var(--menu-dropdown-border);
        border-radius: var(--menu-dropdown-radius);
        box-shadow: var(--menu-dropdown-shadow);
        list-style: none;
        margin:     0;
        padding:    8px 0 .5rem;        /* 8px arriba = espacio visual sin brecha*/
        opacity:    0;
        pointer-events: none;
        transition: opacity var(--menu-transition),
                    transform var(--menu-transition);
        z-index:    999;
    }

    /* Pequeño triángulo/flecha arriba del panel (dentro del padding-top) */
    .dropdown-menu::before {
        content:     '';
        position:    absolute;
        top:         0;                 /* dentro del panel, no en la brecha     */
        left:        50%;
        transform:   translateX(-50%);
        border-left:  7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid var(--menu-dropdown-border);
    }

    /* Estado abierto por JS (click / teclado) */
    .has-dropdown.open > .dropdown-menu,
    /* Estado hover — CSS PURO: no depende de JS, cubre la brecha de forma nativa */
    .has-dropdown:hover > .dropdown-menu {
        opacity:        1;
        pointer-events: auto;
        transform:      translateX(-50%) translateY(0);
    }

    /* Chevron también gira con CSS :hover (sin necesitar la clase .open) */
    .has-dropdown:hover > .dropdown-toggle .chevron {
        transform: rotate(180deg);
    }

    /* Ítem dentro del dropdown */
    .dropdown-menu li a {
        display:     flex;
        align-items: center;
        gap:         .5rem;
        padding:     var(--menu-item-pad);
        color:       rgba(255,255,255,.85);
        text-decoration: none;
        font-size:   .9rem;
        font-weight: 500;
        transition:  background var(--menu-transition),
                     color var(--menu-transition),
                     padding-left var(--menu-transition);
        white-space: nowrap;
    }

    .dropdown-menu li a:hover {
        background:   rgba(255,233,0,.08);
        color:        var(--menu-hover-color);
        padding-left: 1.4rem;
    }

    /* Subítem activo */
    .dropdown-menu li.active > a {
        color:      var(--menu-active-color) !important;
        font-weight: 700;
    }

    /* Ícono emoji dentro del subítem */
    .submenu-icon {
        font-size: .9rem;
        flex-shrink: 0;
    }

} /* /desktop */


/* ─────────────────────────────────────────────────────────────────────────────
   4. PANEL DESPLEGABLE — MÓVIL  (≤ 900px)
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    /* El dropdown se expande inline, NO como panel flotante */
    .dropdown-menu {
        list-style:  none;
        margin:      0;
        padding:     0;
        max-height:  0;
        overflow:    hidden;
        transition:  max-height 300ms ease,
                     opacity 300ms ease;
        opacity:     0;
        background:  rgba(255,255,255,.04);
        border-left: 3px solid var(--menu-active-color);
        border-radius: 0 0 8px 8px;
    }

    .has-dropdown.open > .dropdown-menu {
        max-height:  300px;           /* suficiente para N ítems               */
        opacity:     1;
    }

    .dropdown-menu li a {
        display:     flex;
        align-items: center;
        gap:         .5rem;
        padding:     .7rem 1.2rem .7rem 1.4rem;
        color:       rgba(255,255,255,.8);
        font-size:   .9rem;
        text-decoration: none;
        transition:  color var(--menu-transition);
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li.active > a {
        color: var(--menu-active-color) !important;
    }

    /* El toggle en móvil ocupa todo el ancho del ítem */
    .has-dropdown {
        width: 100%;
    }

    .dropdown-toggle {
        width:          100%;
        justify-content: space-between;
        padding:        .6rem 0;      /* hereda padding del .nav-menu li a     */
    }

} /* /móvil */


/* ─────────────────────────────────────────────────────────────────────────────
   5. ANIMACIÓN HAMBURGUESA → X
   Requiere que menu.js añada la clase .is-active al botón #nav-mobile
──────────────────────────────────────────────────────────────────────────── */

/* Las 3 líneas del botón hamburguesa */
.nav-mobile span {
    display:    block;
    width:      24px;
    height:     2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 240ms cubic-bezier(.4,0,.2,1),
                opacity   200ms ease,
                width     200ms ease;
    transform-origin: center;
}

/* Estado X: línea superior */
.nav-mobile.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
/* Estado X: línea central (desaparece) */
.nav-mobile.is-active span:nth-child(2) {
    opacity:   0;
    transform: scaleX(0);
}
/* Estado X: línea inferior */
.nav-mobile.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Nota: asegúrate de que los spans estén separados ~6-8px en estilos.css.
   Ejemplo orientativo (ajusta si ya tienes esto definido):
   .nav-mobile { display:flex; flex-direction:column; gap:6px; ... }
*/


/* ─────────────────────────────────────────────────────────────────────────────
   6. BODY — bloquear scroll cuando menú móvil está abierto
──────────────────────────────────────────────────────────────────────────── */
body.menu-open {
    overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. FOCUS VISIBLE — accesibilidad teclado
──────────────────────────────────────────────────────────────────────────── */
.dropdown-toggle:focus-visible,
.nav-menu a:focus-visible {
    outline:        2px solid var(--menu-active-color);
    outline-offset: 3px;
    border-radius:  3px;
}




/* ─────────────────────────────────────────────────────────────────────────────
   FIX #1 y #2 — Overflow visible en contenedores del header
   SIN esto: el menú móvil queda clippeado y el dropdown absoluto
   desaparece detrás del contenedor padre
──────────────────────────────────────────────────────────────────────────── */
.main-header,
.main-header .container,
.main-header .header-container,
.main-header nav,
.main-header .nav-menu {
    overflow: visible !important;
}

/* El nav-menu en móvil necesita poder crecer hacia abajo */
@media (max-width: 900px) {
    .main-header {
        position: relative;   /* contexto de apilamiento correcto */
        z-index: 1000;
    }

    /* Fallback explícito por si estilos.css no tiene la regla .open-menu */
    .nav-menu {
        display:    none;
        flex-direction: column;
    }
    .nav-menu.open-menu {
        display:    flex !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   FIX #3 — Animación de pulso para el botón "Demo GRATIS" en el nav
   Se redefine aquí con máxima especificidad para que no sea sobreescrita
   por las transiciones de .nav-menu a que viven más arriba en este mismo CSS
──────────────────────────────────────────────────────────────────────────── */
@keyframes pulsoNav {
    0%   { box-shadow: 0 0 0 0   rgba(255, 233, 0, 0.70); }
    60%  { box-shadow: 0 0 0 10px rgba(255, 233, 0, 0.00); }
    100% { box-shadow: 0 0 0 0   rgba(255, 233, 0, 0.00); }
}

.nav-menu .btn-demo-nav.pulse-animation {
    animation: pulsoNav 1.8s ease-out infinite !important;
    /* Asegurar que las transiciones heredadas no cancelen la animación */
    transition: background var(--menu-transition),
                color      var(--menu-transition) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIX #1 y #2 — Overflow visible en contenedores del header
   SIN esto: el menú móvil queda clippeado y el dropdown absoluto
   desaparece detrás del contenedor padre
──────────────────────────────────────────────────────────────────────────── */
.main-header,
.main-header .container,
.main-header .header-container,
.main-header nav,
.main-header .nav-menu {
    overflow: visible !important;
}

/* El nav-menu en móvil necesita poder crecer hacia abajo */
@media (max-width: 900px) {
    .main-header {
        position: relative;   /* contexto de apilamiento correcto */
        z-index: 1000;
    }

    /* Fallback explícito por si estilos.css no tiene la regla .open-menu */
    .nav-menu {
        display:    none;
        flex-direction: column;
    }
    .nav-menu.open-menu {
        display:    flex !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   FIX #3 — Animación de pulso para el botón "Demo GRATIS" en el nav
   Se redefine aquí con máxima especificidad para que no sea sobreescrita
   por las transiciones de .nav-menu a que viven más arriba en este mismo CSS
──────────────────────────────────────────────────────────────────────────── */
@keyframes pulsoNav {
    0%   { box-shadow: 0 0 0 0   rgba(255, 233, 0, 0.70); }
    60%  { box-shadow: 0 0 0 10px rgba(255, 233, 0, 0.00); }
    100% { box-shadow: 0 0 0 0   rgba(255, 233, 0, 0.00); }
}

.nav-menu .btn-demo-nav.pulse-animation {
    animation: pulsoNav 1.8s ease-out infinite !important;
    /* Asegurar que las transiciones heredadas no cancelen la animación */
    transition: background var(--menu-transition),
                color      var(--menu-transition) !important;
}