/* ==========================================================================
   1. UTILIDADES GLOBALES
   ========================================================================== */

/* Ocultar barra de desplazamiento visualmente pero permitir scroll */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   2. FONDOS Y TEXTURAS
   ========================================================================== */

/* Fondo de puntos estilo "Labs" (Usado en secciones blancas) */
.bg-labs-white {
    background-color: #f8fafc;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
    position: relative;
}

.bg-labs-white::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, #ffffff 100%);
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   3. EFECTOS DE TEXTO
   ========================================================================== */

/* Gradiente animado para títulos principales */
.text-gradient {
    background: linear-gradient(to right, #1E5372 0%, #22c55e 50%, #1E5372 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: shine 4s linear infinite;
}

/* ==========================================================================
   4. BOTONES PERSONALIZADOS
   ========================================================================== */

/* Botón General Animado */
.btn-gradient-anim {
    background-size: 200% auto;
    background-image: linear-gradient(to right, #1E5372 0%, #22c55e 51%, #1E5372 100%);
    transition: 0.5s;
    color: white;
    box-shadow: 0 0 20px #eee;
}

.btn-gradient-anim:hover {
    background-position: right center;
    color: #fff;
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(30, 83, 114, 0.2);
}

/* Botón Naranja */
.btn-gradient-orange {
    background-image: linear-gradient(to right, #f97316 0%, #fbbf24 51%, #f97316 100%);
    background-size: 200% auto;
    transition: 0.5s;
    color: white;
    box-shadow: 0 0 20px #eee;
}

.btn-gradient-orange:hover {
    background-position: right center;
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
}

/* Botón Verde */
.btn-gradient-green {
    background-image: linear-gradient(to right, #22c55e 0%, #1E5372 51%, #22c55e 100%);
    background-size: 200% auto;
    transition: 0.5s;
    color: white;
    box-shadow: 0 0 20px #eee;
}

.btn-gradient-green:hover {
    background-position: right center;
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
}

/* Botón Azul */
.btn-gradient-blue {
    background-image: linear-gradient(to right, #0ea5e9 0%, #1e5372 51%, #0ea5e9 100%);
    background-size: 200% auto;
    transition: 0.5s;
    color: white;
    box-shadow: 0 0 20px #eee;
}

.btn-gradient-blue:hover {
    background-position: right center;
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
}

/* ==========================================================================
   5. ANIMACIONES DEL HERO (CONSTELACIÓN Y NEÓN)
   ========================================================================== */

/* --- A. CONSTELACIÓN (RED DE NODOS) --- */

/* 1. Contenedor Padre: Mueve todo el conjunto */
.constellation-float {
    /* OPTIMIZACIÓN: Avisa al navegador para usar GPU */
    will-change: transform;
    animation: float-group 8s ease-in-out infinite;
}

/* 2. Nodos Hexagonales (Las formas blancas) */
.hex-node {
    position: absolute;
    width: 60px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;

    /* Recorte en forma de hexágono */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    /* Sombra base optimizada */
    filter: drop-shadow(0 5px 10px rgba(30, 83, 114, 0.15));

    /* Nivel de capa ajustado */
    z-index: 20;

    /* Alineación y Activación de GPU */
    transform: translate(-50%, -50%) translateZ(0);
    transition: transform 0.3s ease, color 0.3s ease;

    /* Color base */
    color: #1e5372;

    /* OPTIMIZACIÓN DE RENDIMIENTO */
    will-change: transform, filter, color;

    /* Animación de latido sincronizado */
    animation: node-pulse-sync 4s ease-in-out infinite;
}

/* 3. Iconos dentro de los nodos */
.hex-node i {
    font-size: 1.8rem;
    color: inherit; /* Hereda el color para animarlo */
    z-index: 22;
    transform: translateZ(0); /* Evita repintado */
}

/* 4. Borde Fino del hexágono */
.hex-node::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
    margin: -1px;
}

/* Efecto Hover en los nodos */
.hex-node:hover {
    transform: translate(-50%, -50%) scale(1.15) translateZ(0);
    filter: drop-shadow(0 8px 15px rgba(30, 83, 114, 0.25));
    color: #22c55e;
    z-index: 30;
    cursor: default;
}

/* --- B. ANIMACIÓN NEÓN (LÍNEAS) --- */
.neon-line {
    stroke: #22c55e;
    stroke-width: 3;
    stroke-linecap: round;

    /* Propiedades para el efecto de dibujo */
    stroke-dasharray: 600;
    stroke-dashoffset: 600;

    opacity: 0;
    /* Sombra reducida para rendimiento móvil */
    filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.8));

    will-change: stroke-dashoffset, opacity;
    animation: neon-flow 4s linear infinite;
}

/* ==========================================================================
   6. KEYFRAMES (DEFINICIÓN DE ANIMACIONES)
   ========================================================================== */

/* Brillo del texto */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Flotación del grupo completo */
@keyframes float-group {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Flujo de la línea neón */
@keyframes neon-flow {
    0% {
        stroke-dashoffset: 600;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

/* Pulso y cambio de color de los nodos */
@keyframes node-pulse-sync {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) translateZ(0);
        color: #1e5372;
        filter: drop-shadow(0 5px 10px rgba(30, 83, 114, 0.15));
    }
    10% {
        transform: translate(-50%, -50%) scale(1.15) translateZ(0);
        /* Sombra Verde Neón al activarse */
        filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.6));
        color: #22c55e;
    }
    20% {
        transform: translate(-50%, -50%) scale(1) translateZ(0);
        color: #1e5372;
        filter: drop-shadow(0 5px 10px rgba(30, 83, 114, 0.15));
    }
}