/*
Theme Name: Elessi Theme Child
Theme URI: https://elessi.nasatheme.com/demo/
Description: This is a child theme for Elessi Theme
Author: NasaTheme team
Author URI: https://nasatheme.com
Template: elessi-theme
Version: 1.0
*/


/*************** ADD YOUR CUSTOM CSS IN THIS AREA ***************/
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}

:root{
    --negro: #050D2E;
    --azul: #0584EB;
    --azulC: #00AAFF;
    --aqua: #00f1ff;
    --blanco: #ffffff;
    
    --card-bg: #1A1D26;        /* Fondo base oscuro de la tarjeta */
    --accent-blue: #0584EB;    /* Azul eléctrico Justafix */
    --accent-glow: #024b87;    /* Azul oscuro para profundidad */
}
input[type=submit] {
    font-size: 15px !important;
    padding: 10px 20px !important;
}

.elementor-widget-image-box,
.card { /***** este elemento hace parte de las Card´s *****/
  background: var(--negro);
  border-radius: 20px;
  position: relative;
  background-color: var(--negro)!important;
}

.card:hover::after,
.card:hover::before {
  content: " ";
  position: absolute;
  z-index: -1;
  width: 101.5%;
  inset: -0.2rem;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--aqua),
    var(--negro),
    var(--azulC),
    var(--negro),
    var(--azul),
    var(--negro),
    var(--aqua)
  );
  border-radius: inherit;
  border:none!important;
  animation: rotate 7s linear infinite;
}

.card:hover::after {
  filter: blur(1rem);
}

@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}


.nasa-header-flex .fjct{justify-content: right!important;}
p.elementor-image-box-description { padding: 0 10px!important;}

/* ==========================================
   DEGRADADO RADIAL ANIMACIÓN
   ========================================== */

.contenedor-hero-tecnologico {
    /* Tu gradiente concentrado y profesional */
    background: radial-gradient(circle at 50% 50%, #1a2a6c 0%, #021e75 25%, #050D2E 100%);
    
    /* Clave: Aumentar el tamaño para tener margen de movimiento */
    background-size: 150% 150%; 
    background-repeat: no-repeat;
}

@media (min-width: 1025px) {
    .contenedor-hero-tecnologico {
        /* Movimiento rápido (6s) para que sea perceptible */
        animation: movimientoTotal 10s ease-in-out infinite;
    }

    @keyframes movimientoTotal {
        /* Trayectoria orgánica que visita todos los bordes */
        0% { background-position: 50% 50%; }     /* Centro */
        25% { background-position: 0% 0%; }     /* Esquina Superior Izquierda */
        50% { background-position: 100% 100%; } /* Esquina Inferior Derecha */
        75% { background-position: 0% 100%; }   /* Esquina Inferior Izquierda */
        100% { background-position: 50% 50%; }   /* Centro */
    }
}

/****** FIN ******/   

.elementor-image-box-content {margin-top: -50px!important;}

.icons-wrapper {
    display: none!important;
    visibility: hidden!important;
}

.elementor-icon, .st0, .st1, .st2, .st3, .st4 {
    fill: #0584EB !important;
    stroke: none !important;
}

/* Solo movimiento de flotación suave */
.elementor-element.Icono3D {
    animation: flotar 5s ease-in-out infinite !important;
    will-change: transform;
}

@keyframes flotar {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-15px); 
    }
}

/* 1. Contenedor: Movimiento fluido y forzar aceleración de GPU */
.BtnCTA {
    animation: brillo 6s ease-in-out infinite !important;
    position: relative;
    will-change: transform;
    overflow: hidden; /* Importante para que el brillo no se salga del borde */
}

/* 2. El "Brillo" ahora es una línea definida o un destello sólido, no un gradiente borroso */
.elementor-element.BtnCTA::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    
    /* Usamos un gradiente lineal inclinado (tipo "rayo de luz") en lugar de radial */
    /* Esto se ve mucho más nítido y técnico */
    background: linear-gradient(45deg, 
                transparent 40%, 
                rgba(255, 255, 255, 0.4) 50%, 
                transparent 60%);
    
    mix-blend-mode: overlay; /* Mucho más nítido que screen o color-dodge */
    pointer-events: none;
    animation: brilloDefinido 6s ease-in-out infinite;
}

@keyframes brillo {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes brilloDefinido {
    0%, 100% { opacity: 0; transform: translateX(-50%) rotate(45deg); }
    50% { opacity: 1; transform: translateX(50%) rotate(45deg); }
}

#masthead {padding: 0!important;}

/* Evita que los títulos del mega menú parezcan enlaces cliqueables */
li.titulo-bloque a[href="#"] {
    pointer-events: none !important;
    cursor: default !important;
}

.header-nav>li.menu-item .nav-dropdown{box-shadow: 0 20px 40px #0584eb70 !important; border-radius: 10px;}
.nasa-megamenu>.nav-dropdown>ul{width: 100%!important; border:none!important;}
.nav-wrapper .nasa-megamenu>.nav-dropdown{width: 610px!important;left: 350px!important; margin-top: -10px!important; }
.nasa-megamenu>.nav-dropdown>ul>.menu-item{padding: 0 30px 0 20px!important;}


ul#site-navigation li a:hover {color: var(--azulC);}
ul#site-navigation li a {color: var(--azul);}
.current-menu-parent,
li.current_page_item a {color: var(--azulC) !important;}
.nav-wrapper .root-item>a:after{border-top:0px!important}
li.CTA a:hover {background: var(--azulC)!important;color: var(--blanco)!important;}
li.CTA a {
    background: var(--azul)!important;
    border-radius: 10px;
    padding: 10px 10px 10px 25px !important;
    top:5px;
    color: var(--blanco)!important;
    width: max-content;
    margin-left: 30px;
}

.CTA.menu-item a .nasa-menu-item-icon {
    order: 2; /* Mueve el icono al final */
}

/* Opcional: Si el SVG también es un icono que aparece antes, puedes moverlo */
.CTA.menu-item a svg {
    order: 3;
}

.e-con svg {
  display: block;
  width: 40px; /* Prueba con un tamaño fijo primero */
  height: 40px;
  stroke: white; /* Asegúrate de que el color de línea sea visible */
  fill: white;
}

/* 1. Transición suave para la tarjeta */
.e-con {
    transition: all 0.3s ease;
}

/* 2. Cuando la tarjeta recibe el hover, activamos el cambio en el SVG interno */
.e-con:hover .icon-svg .st4 {
    fill: #0584EB; 
    filter: drop-shadow(0px 0px 10px #0584EB);
}

/* 3. Opcional: Si quieres que el icono se mueva ligeramente */
.e-con:hover .icon-svg {
    transform: scale(1.05);
}


/* ==========================================
   CONFIGURACIÓN DE VARIABLES (ESTILO VIDEO)
   ========================================== */
:root {
    --card-bg: #1C1F2B;        /* El fondo oscuro exacto del video */
    --neon-blue: #00f0ff;      /* Azul neón brillante */
    --neon-purple: #ff007f;    /* Morado/Rosa neón para el contraste */
}

/* ==========================================
   CONTENEDOR PRINCIPAL DE LA TARJETA
   ========================================== */
.justafix-glow-card {
    position: relative !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease !important;
}

.justafix-glow-card:hover {
    transform: translateY(-5px) !important;
}

/* 1. EL TRUCO DEL VIDEO: El cuadro con gradiente cónico que gira */
.justafix-glow-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    /* Gradiente cónico con los colores neón del tutorial */
    background: conic-gradient(
        from 0deg,
        transparent,
        var(--neon-blue),
        transparent,
        var(--neon-purple),
        transparent
    ) !important;
    /* Animación continua de rotación */
    animation: rotateVideoGlow 4s linear infinite !important;
    z-index: 1 !important;
}

/* ==========================================
   MÁSCARA INTERNA (CUBRE EL CENTRO Y DEJA SOLO EL BORDE)
   ========================================== */
.justafix-glow-card > .e-con-inner {
    position: relative !important;
    /* El 'margin: 4px' define el grosor del borde de neón del video */
    margin: 4px !important; 
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    
    background-color: var(--card-bg) !important;
    border-radius: 16px !important; /* Un poco menor para que acompañe la curva externa */
    padding: 40px 30px !important; 
    box-sizing: border-box !important;
    flex-grow: 1 !important;
    
    /* Esta capa se posiciona firmemente arriba del neón giratorio */
    z-index: 2 !important; 
}

/* ==========================================
   PROTECCIÓN DEL TEXTO Y ELEMENTOS INTERNOS
   ========================================== */
/* Forzamos a que todo lo que esté dentro de Elementor flote arriba del neón */
.justafix-glow-card > .e-con-inner * {
    position: relative !important;
    z-index: 3 !important;
}

/* ==========================================
   ANIMACIÓN DE ROTACIÓN EXACTA
   ========================================== */
@keyframes rotateVideoGlow {
    0% {
        transform: rotate(0deg) !important;
    }
    100% {
        transform: rotate(360deg) !important;
    }
}

/* ==========================================
   BOTON WHATSAPP
   ========================================== */
.btn-quote-product {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    background-color: #25D366;
    padding: 12px; /* Padding cuadrado inicial */
    border-radius: 50px;
    color: white !important;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    transition: all 0.4s ease; /* Transición suave */
    overflow: hidden; /* Necesario para que el texto aparezca suavemente */
}

/* Ocultar texto inicialmente en escritorio */
.texto-boton {
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    margin-left: 0;
}

/* Al pasar el mouse: revelar texto */
.btn-quote-product:hover .texto-boton {
    max-width: 200px;
    opacity: 1;
    margin-left: 8px; /* Espacio entre icono y texto */
}

.btn-quote-product:hover {
    padding: 12px 20px; /* Se alarga el botón */
}

/* En móviles: siempre visible */
@media (max-width: 600px) {
    .btn-quote-product {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px; /* Padding completo siempre */
    }
    .texto-boton {
        max-width: 200px;
        opacity: 1;
        margin-left: 8px;
    }
}

/* =========================================================================
   PARCHE DE USABILIDAD Y ERGONOMÍA MÓVIL
   ========================================================================= */
@media (max-width: 991px) {
    p.elementor-image-box-description {padding: 0 10px!important;}
    /* ----------------------------------------------------------------- */
    /* A. REORDENAR ELEMENTOS DEL HEADER (BOTÓN A LA DERECHA)            */
    /* ----------------------------------------------------------------- */
    
    .mobile-search,
    .mobile-menu.header-responsive .nasa-mobile-icons-wrap{visibility: hidden!important; display: none!important;}
    
    .mobile-menu .logo-wrapper {width: 70%;}
    .mobile-menu .mini-icon-mobile {width: 30%;}
    .nasa-flex{margin: 0 auto;}
    
    .mobile-menu.header-responsive {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .mobile-menu.header-responsive .logo-wrapper {
        order: 1 !important;
    }
    .mobile-menu.header-responsive .mini-icon-mobile.nasa-flex {
        order: 2 !important;
    }
    .mobile-menu.header-responsive .nasa-mobile-icons-wrap {
        order: 3 !important;
    }

    /* ----------------------------------------------------------------- */
    /* B. EXCLUSIVO: CAMBIAR EL PANEL SIDEBAR A LA DERECHA               */
    /* ----------------------------------------------------------------- */
    #nasa-menu-sidebar-content {
        left: auto !important;
        right: 0 !important;
        width: 80% !important;
        max-width: 320px !important;
        transform: translateX(100%) !important;
        -webkit-transform: translateX(100%) !important;
        transition: transform 0.35s ease-in-out !important;
    }

    #nasa-menu-sidebar-content.nasa-active {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }

    /* ----------------------------------------------------------------- */
    /* C. ERGONOMÍA INTERNA DEL PANEL (MÁXIMO CONFORT DIÉSTRO)           */
    /* ----------------------------------------------------------------- */
    #nasa-menu-sidebar-content .nasa-close-menu-mobile {
        right: 30px !important;
        top: 10px !important;
    }
    
    .nasa-close-menu-mobile {
        width: 35px;
        height: 35px;
    }

    #nasa-menu-sidebar-content .nasa-mobile-nav-wrap {
        text-align: right !important;
    }

    #nasa-menu-sidebar-content ul#mobile-navigation li a {
        justify-content: flex-start;
        text-align: left !important;
        padding-right: 1px !important;
        padding-left: 30px !important;
    }

    #nasa-menu-sidebar-content ul#mobile-navigation li a svg {
        margin-left: 8px !important;
        margin-right: 0 !important;
    }

    /* ----------------------------------------------------------------- */
    /* D. OPTIMIZACIÓN DE TOQUE COMPLETO PARA SUBMENÚS (UX MEJORADA)     */
    /* ----------------------------------------------------------------- */
    #nasa-menu-sidebar-content ul#mobile-navigation li.menu-item-has-children {
        position: relative !important;
    }

    #nasa-menu-sidebar-content ul#mobile-navigation li.menu-item-has-children a.accordion {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 35px !important;
        min-height: 40px !important;
        z-index: 10 !important;
        background: transparent !important;
        display: block !important;
    }

    #nasa-menu-sidebar-content ul#mobile-navigation li.menu-item-has-children a.nasa-title-menu {
        position: relative !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }

    #nasa-menu-sidebar-content ul#mobile-navigation li.menu-item-has-children .nav-dropdown-mobile a {
        pointer-events: auto !important;
    }

    #header-content, .nasa-header-sticky-wrap {
        display: block !important;
    }
}