/* =========================================
   ESTILOS GENERALES Y GLASS OPTIMIZADO
   ========================================= */
body { 
    background-color: #070B19; 
    color: #ffffff; 
}
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    width: 100%;
}

/* =========================================
   SELECCIÓN DE TEXTO PERSONALIZADA
   ========================================= */
::selection {
    background-color: rgba(0, 218, 192, 0.767); /* Fondo cian translúcido */
    color: #ffffff; /* Texto blanco puro */
}

/* =========================================
   SCROLLBAR FUTURISTA
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #05070E;
}
::-webkit-scrollbar-thumb {
    background: #1a365d;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3633F9; /* Azul Aliclik al pasar el mouse */
}

/* =======================================================
   ESCALADO UNIFICADO PARA MONITORES GRANDES (24" / 25")
   ======================================================= */
@media (min-width: 1536px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 19px;
    }
}

:root {
    --whatsapp-green: #25d366;
    --whatsapp-hover: #1ebd5c;
}


/* Reducimos el blur de 16px a 8px para duplicar los FPS al hacer scroll */
.glass { 
    background: rgba(14, 20, 40, 0.65); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08); 
}

/* =========================================
   ANIMACIONES ULTRA FLUIDAS DE SCROLL (REVEAL GPU)
   ========================================= */
.reveal, .reveal-left, .reveal-right, .reveal-scale, 
.reveal-fly-up, .reveal-zoom-out, .reveal-blur, .reveal-flash { 
    opacity: 0; 
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
    will-change: transform, opacity; 
}

/* Direcciones puras por hardware (translate3d) */
.reveal { transform: translate3d(0, 40px, 0); }
.reveal-left { transform: translate3d(-50px, 0, 0); } 
.reveal-right { transform: translate3d(50px, 0, 0); }
.reveal-scale { transform: scale(0.9); }
.reveal-fly-up { transform: translate3d(0, 80px, 0) scale(0.95); } 
.reveal-zoom-out { transform: scale(1.05); } 
/* Transformamos el Blur y Flash a fades limpios para evitar Caídas de FPS */
.reveal-blur { transform: translate3d(0, 15px, 0); } 
.reveal-flash { transform: scale(1.02); transition-duration: 0.4s; } 

/* Estados Activos */
.reveal.active, .reveal-left.active, .reveal-right.active, .reveal-scale.active, 
.reveal-fly-up.active, .reveal-zoom-out.active, .reveal-blur.active, .reveal-flash.active { 
    opacity: 1; 
    transform: translate3d(0, 0, 0) scale(1); 
}

/* Tiempos de cascada optimizados */
.delay-100 { transition-delay: 0.05s; }
.delay-200 { transition-delay: 0.10s; }
.delay-300 { transition-delay: 0.15s; }
.delay-400 { transition-delay: 0.20s; }
.delay-500 { transition-delay: 0.25s; }

/* =========================================
   HOVER DINÁMICO (CERO LAG)
   ========================================= */
.hover-dynamic {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
    will-change: transform;
}
.hover-dynamic:hover {
    transform: translate3d(0, -6px, 0) scale(1.02);
    z-index: 10;
}

/* =========================================
   BOTÓN ALIACADEMY Y PANTALLA DE CARGA
   ========================================= */
.btn-aliacademy { background-color: #3633F9; position: relative; overflow: hidden; transition: all 0.3s ease; }
.btn-aliacademy::after { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(25, 235, 212, 0.4) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%); transition: none; z-index: 1; }
.btn-aliacademy:hover { background-color: #2420f8; box-shadow: 0 0 30px rgba(54, 51, 249, 0.6); }
.btn-aliacademy:hover::after { animation: sheenSweep 1.5s infinite; }
@keyframes sheenSweep { 0% { top: -100%; left: -100%; } 100% { top: 100%; left: 100%; } }

#tech-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
footer { position: relative; z-index: 30; background-color: #03050B !important; }

body.loading-locked { overflow: hidden !important; height: 100vh; }
.preloader-hidden { opacity: 0; pointer-events: none; visibility: hidden; }

/* =========================================
   ANIMACIÓN DEL PRELOADER (BARRA DE CARGA)
   ========================================= */
@keyframes loadingBar {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* =========================================
   ESTILOS DEL FOOTER (Redes y Tiendas)
   ========================================= */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af; /* gray-400 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2);
}

.store-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.store-badge:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #00f2fe; /* Brillo cyan tech */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.15);
}

/* ==================================================
   MAPA GEOJSON INTERACTIVO - D3.js
================================================== */
#d3-map-container {
    width: 100%;
    height: 100%;
}

.map-region {
    fill: rgba(14, 20, 40, 0.6); /* Fondo azul oscuro de los departamentos */
    stroke: rgba(25, 235, 212, 0.4); /* Borde cian sutil */
    stroke-width: 1.2px;
    transition: all 0.3s ease;
    cursor: default;
}

/* Efecto al pasar el cursor por los departamentos */
.map-region:hover {
    fill: rgba(25, 235, 212, 0.15);
    stroke: rgba(25, 235, 212, 1);
    stroke-width: 2px;
}

.map-point {
    transition: r 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    cursor: pointer;
}

.map-point:hover {
    filter: brightness(1.5);
}

.point-tooltip {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: rgba(14, 20, 40, 0.95);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    z-index: 100;
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
    transform: translate(-50%, -10px);
}

/* ==================================================
   WHATSAPP FLOAT BUTTON (BOTÓN FLOTANTE)
================================================== */

.whatsapp-float {
    position: fixed; 
    bottom: 24px; 
    right: 24px; 
    width: 60px; 
    height: 60px;
    background-color: var(--whatsapp-green); 
    color: white; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.3); 
    z-index: 9999 !important; /* Fuerza a estar por encima de todo */
    transition: all 0.3s ease; 
    opacity: 1 !important; /* Siempre visible desde el segundo cero */
    transform: translateY(0) !important; 
    pointer-events: auto !important; 
}

.whatsapp-float:hover { 
    background-color: var(--whatsapp-hover); 
    transform: scale(1.1) translateY(0) !important; 
    box-shadow: 0 0 30px rgba(37, 211, 102, 0.6); 
}

.whatsapp-icon { 
    width: 32px; 
    height: 32px; 
    transition: transform 0.3s ease; 
}

.whatsapp-float:hover .whatsapp-icon { 
    transform: rotate(12deg); 
}