/* ==========================================================================
   1. ESTILOS GLOBALES Y CORE
   ========================================================================== */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #010409; 
    color: white; 
    overflow-x: visible; /* LIBERADO PARA SIEMPRE: Esto activa el Sticky en el móvil */
    -webkit-font-smoothing: antialiased; 
}

/* ==========================================================================
   2. COMPONENTES GLOBALES (Botones, Tarjetas, Animaciones Base)
   ========================================================================== */

/* Efecto de línea de escaneo */
.scan-line { 
    height: 2px; 
    background: linear-gradient(90deg, transparent, #22d3ee, transparent); 
    box-shadow: 0 0 25px #22d3ee; 
    animation: scan 2.2s infinite linear; 
    position: absolute; 
    left: 0;
    width: 100%; 
    z-index: 20; 
}

@keyframes scan { 
    0% { top: 0%; } 
    100% { top: 100%; } 
}

/* Botón Premium con efecto */
.btn-premium { 
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); 
    border-radius: 12px; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    box-shadow: 0 10px 20px -5px rgba(6, 182, 212, 0.3); 
}

.btn-premium:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 15px 30px -5px rgba(6, 182, 212, 0.5); 
}

/* Tarjetas de cristal */
.glass-card { 
    background: rgba(13, 17, 23, 0.7); 
    backdrop-filter: blur(16px); 
    border: 1px solid rgba(48, 54, 61, 0.8); 
}

/* Animación genérica de entrada */
.animate-fade-in { 
    animation: fadeIn 0.6s ease-out forwards; 
    opacity: 0; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Scrollbars personalizadas para menús y paneles */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }

/* ==========================================================================
   3. ARQUITECTURA MAESTRA DEL GLOSARIO B2B
   ========================================================================== */

/* 3.1. ESTRUCTURA PC (Flexbox Puro para alinear perfecto) */
.glossary-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 4rem; /* Equivalente a px-16 py-8 */
    align-items: flex-start;
    gap: 4rem; /* El hueco elegante entre el menú y las tarjetas */
}

.glossary-sidebar {
    width: 300px; /* Ancho fijo y perfecto en PC */
    flex-shrink: 0;
    position: sticky;
    top: 130px;
    height: calc(100vh - 150px);
    overflow-y: auto;
    padding-right: 2rem;
    border-right: 1px solid rgba(30, 41, 59, 0.8);
    /* PROTECCIÓN ANTI-DESBORDAMIENTO (Corta palabras largas) */
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.glossary-content {
    flex: 1;
    min-width: 0;
    max-width: 900px; /* Esto recorta las cajas un 35% como pediste */
    padding-bottom: 5rem;
}

/* 3.2. COMPORTAMIENTO TÁCTICO (Interacciones del Glosario) */
.scroll-mt-header { 
    scroll-margin-top: 140px; 
}

/* Destaca la tarjeta al hacer clic en el menú (Efecto Target) */
.term-card { 
    scroll-margin-top: 140px; 
    transition: all 0.4s ease-out; 
}
.term-card:target {
    border-color: #22d3ee !important;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.2) !important;
    transform: scale(1.02) !important;
    background-color: rgba(34, 211, 238, 0.05) !important;
}

/* ==========================================================================
   4. RESPONSIVE Y MÓVIL (Escala 1:1 Blindada)
   ========================================================================== */

/* Ajustes extra genéricos para móvil */
@media (max-width: 640px) {
    .glass-card {
        backdrop-filter: blur(8px); /* Menos blur para mejorar rendimiento */
    }
}

/* REGLAS MÓVIL (OCULTAR MENÚ Y 100% DE ANCHO) */
@media (max-width: 1024px) {
    /* Contenedor principal alineado y espaciado */
    .glossary-wrapper, .mobile-scale-wrapper { 
        padding: 1.5rem 1rem !important; 
        flex-direction: column !important; 
    }
    
    /* 💥 ELIMINACIÓN TÁCTICA: Ocultamos la barra lateral por completo en móviles */
    .glossary-sidebar, #desktop-sidebar {
        display: none !important;
    }
    
    /* El contenido central (Diccionario) toma el 100% del espacio de la pantalla */
    .glossary-content, #content-area { 
        width: 100% !important; 
        max-width: 100% !important; 
        margin-left: 0 !important;
        flex: none !important;
    }
} 

/* ==========================================================================
   🚨 PARCHE MILITAR: DESBLOQUEO DEL STICKY Y RADAR EN PC/MÓVIL 🚨
   ========================================================================== */

/* 1. SECRETO STICKY: Usar 'clip' en lugar de 'hidden' o 'visible' */
html, body, main, .mobile-scale-wrapper, .glossary-wrapper {
    overflow-x: clip !important; /* CLIP oculta desbordamientos sin romper el sticky */
    overflow-y: visible !important;
    align-items: flex-start !important;
}

/* BLINDAJE PARA QUE SOLO FUNCIONE EN PC (min-width: 1025px) */
@media (min-width: 1025px) {
    /* 2. BLINDAR LA BARRA LATERAL Y OCULTAR SCROLL VISUAL */
    #desktop-sidebar, .glossary-sidebar {
        display: block !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 120px !important;
        align-self: flex-start !important;
        height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: none !important; 
        -ms-overflow-style: none !important; 
    }

    /* Oculta la barra en Chrome, Safari y Opera */
    #desktop-sidebar::-webkit-scrollbar, .glossary-sidebar::-webkit-scrollbar {
        display: none !important; 
    }
}

}/* 3. COLORES DEL RADAR AL HACER SCROLL */
.active-link { 
    font-weight: 900 !important; 
    text-shadow: 0 0 15px currentColor !important; 
    transform: translateX(10px) !important;
    opacity: 1 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}&nbsp