/* =========================================
   AJE MENÚ PRO V2 - ESTILOS MÓVIL FIRST
   ========================================= */

body.aje-noscroll {
    overflow: hidden; /* Esto congela la página de atrás */
}

/* Header Pegajoso debajo de la radio */
.aje-header {
    background-color: #ffffff;
    height: 70px;
    width: 100%;
    position: fixed;
    top: 50px; /* Debajo de la radio */
    left: 0;
    z-index: 9990;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: top 0.3s ease;
    display: flex;
    align-items: center;
}

.aje-header-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.aje-logo img { max-height: 40px; width: auto; }
.aje-site-title { font-size: 1.2rem; margin: 0; color: #333; }

/* MENÚ ESCRITORIO */
.aje-nav-desktop { margin-left: auto; margin-right: 30px; }
.aje-menu-ul { display: flex; gap: 25px; list-style: none; margin: 0; padding: 0; }
.aje-menu-ul li a { 
    text-decoration: none; color: #444; font-weight: 700; font-size: 0.85rem; 
    text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s; 
    font-family: 'Helvetica Neue', sans-serif; 
}
.aje-menu-ul li a:hover { color: rgb(171, 71, 188); }

/* BOTÓN DONAR (Escritorio) */
.aje-btn-donar {
    background-color: rgb(171, 71, 188); color: #fff !important; padding: 8px 22px;
    border-radius: 50px; font-weight: 800; text-transform: uppercase; text-decoration: none;
    font-size: 0.8rem; transition: 0.2s;
}

/* HAMBURGUESA */
.aje-hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 30px; height: 24px; position: relative; padding: 0;
    z-index: 10000; /* Siempre encima */
}

.line {
    display: block; width: 100%; height: 3px; background-color: #333;
    border-radius: 4px; position: absolute; left: 0; transition: all 0.3s ease;
}
.line-1 { top: 0; }
.line-2 { top: 10px; }
.line-3 { top: 20px; }

/* Animación a "X" */
.aje-menu-open .line-1 { transform: rotate(45deg); top: 10px; }
.aje-menu-open .line-2 { opacity: 0; }
.aje-menu-open .line-3 { transform: rotate(-45deg); top: 10px; }

/* =========================================
   MENÚ MÓVIL OPTIMIZADO (EL DRAWER)
   ========================================= */
.aje-mobile-overlay {
    position: fixed;
    top: 70px; /* Altura del header */
    left: 0;
    width: 100%;
    height: calc(100vh - 120px); /* Restamos header + radio */
    background: #ffffff;
    transform: translateX(100%); /* Oculto a la derecha */
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 9980;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Permite scroll interno si el menú es muy largo */
}

/* Estado Abierto */
.aje-menu-open + .aje-mobile-overlay,
.aje-mobile-overlay.is-active {
    transform: translateX(0); /* Entra a escena */
}

.aje-mobile-content {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aje-mobile-ul { list-style: none; padding: 0; margin: 0; text-align: left; }

/* ZONAS TÁCTILES AMPLIAS (UX MÓVIL) */
.aje-mobile-ul li {
    border-bottom: 1px solid #f0f0f0;
    opacity: 0; transform: translateX(20px); transition: 0.4s;
}
.aje-mobile-overlay.is-active .aje-mobile-ul li {
    opacity: 1; transform: translateX(0);
}

.aje-mobile-ul li a {
    display: block; /* Ocupa todo el ancho */
    padding: 18px 0; /* Área de toque GRANDE */
    font-size: 1.1rem;
    font-weight: 800;
    color: #222;
    text-decoration: none;
    text-transform: uppercase;
}
.aje-mobile-ul li a:active { color: rgb(171, 71, 188); background-color: #fafafa; }

/* Botón donar móvil grande */
.aje-mobile-footer { margin-top: 30px; text-align: center; }
.aje-btn-donar-mobile {
    display: block; width: 100%; padding: 15px; background: rgb(171, 71, 188);
    color: #fff; font-weight: 800; text-transform: uppercase; border-radius: 10px;
    text-decoration: none;
}

/* BREAKPOINT */
@media (max-width: 900px) {
    .aje-nav-desktop, .aje-btn-donar { display: none; } /* Ocultamos versión PC */
    .aje-hamburger { display: block; }
}

/* Ajuste fino para cuando la barra de admin de WP está activa (solo para admins) */
body.admin-bar .aje-header { top: 82px; }