.elementor-kit-8{--e-global-color-primary:#FF00CC;--e-global-color-secondary:#00F2EA;--e-global-color-text:#FFFFFF;--e-global-color-accent:#1A0025;--e-global-typography-primary-font-family:"Oswald";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-secondary-font-family:"Space Grotesk";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Space Grotesk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Space Grotesk";--e-global-typography-accent-font-weight:500;background-color:#05000A;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==================================================
   SISTEMA DE DISEÑO VILAVELLA POWER (V2.0 - FIXED)
   ================================================== */

:root {
    /* CONEXIÓN CON VARIABLES DE ELEMENTOR */
    --neon-A: var(--e-global-color-primary);   /* Rosa */
    --neon-B: var(--e-global-color-secondary); /* Cyan */
    --bg-deep: var(--e-global-color-accent);   /* Morado Oscuro */
    --text-main: var(--e-global-color-text);   /* Blanco */
}

/* =========================================
   FONDO NEBULOSA INFINITA (FIX TOTAL)
   ========================================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #000000 !important; /* Fondo de seguridad */
}

/* La Capa de Pintura que vive detrás de todo */
body::before {
    content: "";
    position: fixed; /* Se queda clavado en la pantalla */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10; /* Detrás del contenido */
    
    /* EL DEGRADADO VERTICAL */
    background-image: 
        radial-gradient(circle at 50% 0%, var(--bg-deep) 0%, transparent 60%), /* Luz arriba */
        radial-gradient(circle at 100% 40%, rgba(0, 242, 234, 0.15) 0%, transparent 50%), /* Luz Cyan Derecha */
        radial-gradient(circle at 0% 70%, rgba(255, 0, 204, 0.15) 0%, transparent 50%), /* Luz Rosa Izquierda */
        linear-gradient(180deg, #05000a 0%, #1a0525 40%, #000000 100%); /* Base */
        
    background-size: cover;
    background-repeat: no-repeat;
}

/* =========================================
   FIX FONDOS NEGROS (Modo Rayos-X)
   ========================================= */

/* 1. Forzar transparencia en contenedores estructurales */
.elementor-section,
.elementor-column,
.elementor-container,
.e-con-inner,
.e-con {
    background-color: transparent !important;
    background-image: none !important;
}

/* 2. IMPORTANTE: Proteger nuestros elementos de cristal */
/* Esto asegura que el header y las tarjetas SÍ tengan su fondo */
.glass-header,
.glass-card {
    background-color: rgba(20, 20, 30, 0.4) !important; /* Recuperamos el color */
}

/* 3. Asegurar que el fondo infinito funcione */
body::before {
    z-index: -9999 !important; /* Asegurar que esté DETRÁS de todo */
}

/* Asegurar que Elementor no ponga fondos blancos encima */
.elementor-page {
    background-color: transparent !important;
}

/* 2. TARJETAS DE CRISTAL (CLASE: glass-card) */
.glass-card {
    background: rgba(20, 20, 30, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.glass-card:hover {
    background: rgba(40, 0, 70, 0.6);
    border-color: var(--neon-B);
    box-shadow: 0 0 40px var(--neon-A);
    transform: translateY(-5px);
}

.glass-card img {
    transition: transform 0.5s ease;
    width: 100%;
}
.glass-card:hover img {
    transform: scale(1.05);
}

/* 3. TÍTULO GLITCH (LUZ ELÉCTRICA - SIN MOVIMIENTO) 
   Ahora vibra la luz, no la posición del texto */
.glitch-title .elementor-heading-title {
    position: relative;
    color: var(--text-main);
    /* Resplandor base constante */
    text-shadow: 0 0 10px var(--neon-A), 0 0 20px var(--neon-A); 
    /* Animación continua de luz */
    animation: electric-flicker 4s infinite;
}

@keyframes electric-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px var(--neon-A), 0 0 20px var(--neon-A);
    }
    20%, 24%, 55% {
        /* Apagón breve */
        opacity: 0.5;
        text-shadow: none;
    }
    22% {
        /* Chispazo fuerte en CYAN */
        opacity: 1;
        text-shadow: 0 0 10px var(--neon-B), 
                     0 0 30px var(--neon-B),
                     2px 0 var(--neon-B), 
                     -2px 0 var(--neon-A);
    }
}

/* 4. TEXTO GRADIENTE (CLASE: text-gradient) */
.text-gradient .elementor-heading-title, 
span.text-gradient {
    background: linear-gradient(90deg, var(--neon-B), var(--text-main), var(--neon-A));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 5s linear infinite;
    display: inline-block;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* 5. BOTONES MODERNOS (CORREGIDOS) */

/* Estilo Borde (CLASE: btn-neon) */
.btn-neon .elementor-button {
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid var(--neon-B) !important; /* Borde Cyan */
    color: var(--neon-B) !important;
    border-radius: 50px !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(0, 242, 234, 0.1) !important;
    transition: all 0.3s ease !important;
}

.btn-neon .elementor-button:hover {
    background-color: var(--neon-B) !important; /* Relleno al hover */
    color: #000000 !important;
    box-shadow: 0 0 30px var(--neon-B) !important;
}

/* Estilo Relleno (CLASE: btn-fill) */
.btn-fill .elementor-button {
    background-color: var(--neon-A) !important;
    background-image: linear-gradient(90deg, var(--neon-A), #aa00ff) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 20px rgba(255, 0, 204, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-fill .elementor-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px var(--neon-A) !important;
}

/* 6. MARQUEE DE FONDO (CLASE: marquee-bg) */
.marquee-bg {
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.marquee-bg .elementor-heading-title {
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    font-size: 150px !important;
    line-height: 1 !important;
    color: white !important;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.glass-header {
    /* 1. Posición y Centrado Matemático */
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Esto lo centra perfectamente siempre */
    
    /* 2. Dimensiones */
    width: 95% !important;
    max-width: 1200px !important; /* Tope de ancho para pantallas muy grandes */
    margin: 0 !important; /* Elimina márgenes extraños */
    
    /* 3. Estilo Visual (Cápsula) */
    background: rgba(10, 5, 20, 0.7) !important; /* Fondo semitransparente */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 60px !important; /* Bordes MUY redondos */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    
    /* 4. Ajustes Internos */
    padding: 8px 30px !important;
    z-index: 9999 !important;
}

/* Eliminar fondos extraños dentro del header */
.glass-header .e-con-inner {
    background: transparent !important;
    border: none !important;
}/* End custom CSS */