.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 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);}@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 *//* Color base del sitio (el color camuflado) */
body {
    background-color: #EEEEDE !important;
    /* Transición ultra suave */
    transition: background-color 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* IMPORTANTE: Fuerza a los contenedores a ser transparentes 
   para que el color del body se pueda ver a través de ellos. 
*/
.panel {
    background-color: transparent !important;
}

/* Tus clases de color dinámicas */
.color-eeeede {
    background-color: #EEEEDE !important;
}

.color-black {
    /* Si prefieres un negro menos absoluto (Pantone Black), usa #101010 */
    background-color: #000000 !important; 
}

.color-ffffff {
    background-color: #FFFFFF !important;
}

.color-form {
    background-color: #000000 !important;
}

/* =========================================
   1. TARJETAS DE CRISTAL - BASE (Con más luz)
   ========================================= */
.tarjeta-glass {
    position: relative !important;
    overflow: hidden !important; 
    
    /* Fondo ahumado ligeramente más claro para separarse del fondo negro */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Bordes de luz para simular volumen */
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    
    border-radius: 16px !important;
    padding: 40px 30px !important;
    
    /* Reflejo interno y sombra base */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    
    /* Levitación ultra suave */
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* =========================================
   2. EL DESTELLO SOLAR CIRCULAR (Lens Flare)
   ========================================= */
.tarjeta-glass::before {
    content: "" !important;
    position: absolute !important;
    
    /* Inicia escondido ABAJO a la izquierda */
    top: 110% !important;
    left: -30% !important;
    
    width: 160px !important;
    height: 160px !important;
    
    /* El círculo de luz difuminado */
    background: radial-gradient(
        circle, 
        rgba(255, 255, 255, 0.22) 0%, 
        rgba(255, 255, 255, 0.08) 30%, 
        rgba(255, 255, 255, 0) 70%
    ) !important;
    
    pointer-events: none !important; 
    z-index: 1 !important;
    
    opacity: 0 !important;
    
    /* Transición síncrona con el movimiento */
    transition: 
        opacity 0.4s ease, 
        top 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
        left 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* =========================================
   3. LA INTERACCIÓN (HOVER ELEGANTE)
   ========================================= */
.tarjeta-glass:hover {
    /* Flota hacia arriba */
    transform: translateY(-8px) !important;
    
    /* El cristal se ilumina */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
    
    /* La sombra crece dando altura */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 25px 50px rgba(0, 0, 0, 0.7) !important;
}

/* Enciende el destello circular y lo mueve hacia ARRIBA a la derecha */
.tarjeta-glass:hover::before {
    opacity: 1 !important;
    top: -30% !important;
    left: 90% !important;
}

/* =========================================
   PORTAFOLIO - EFECTO CINEMÁTICO
   ========================================= */
/* 1. Mantiene el desborde controlado en la tarjeta */
.tarjeta-portafolio {
    overflow: hidden !important;
}

/* 2. Regla global para la imagen interior (incluye prefijo webkit para mayor compatibilidad) */
.tarjeta-portafolio img {
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-filter: blur(0px) !important;
    filter: blur(0px) !important;
    transform: scale(1) !important;
    will-change: transform, filter !important;
}

/* 3. El efecto de lente cinemático al hacer hover en el contenedor */
.tarjeta-portafolio:hover img {
    -webkit-filter: blur(10px) !important;
    filter: blur(10px) !important;
    transform: scale(1.05) !important;
}

/* =========================================
   ÍNDICE EDITORIAL - EFECTO HOVER (IMAGEN)
   ========================================= */

/* 1. LA LÍNEA: Solo cambia de color a negro absoluto en hover */
.fila-servicio {
    border-top: 1px solid #E5E5E5 !important;
    transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.fila-servicio:hover {
    border-color: #000000 !important; 
}

/* 2. EL CÍRCULO (La Imagen): Estado base */
.fila-servicio .circulo-servicio {
    /* Fondo transparente para evitar el recuadro negro */
    background-color: transparent !important; 
    
    /* Preparamos todas las transiciones (escala, brillo, posición) */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease, opacity 0.5s ease !important;
    
    /* El círculo inicia en su tamaño normal, con su brillo normal (blanco) */
    transform: scale(1) !important; 
    filter: brightness(1) !important; 
    
    /* Aseguramos que la imagen no se recorte al crecer */
    will-change: transform, filter !important;
}

/* 3. LA EXPANSIÓN (Solo crecimiento premium sin caja negra) */
.fila-servicio:hover .circulo-servicio {
    /* El círculo crece orgánicamente al pasar por la FILA */
    transform: scale(1.3) !important; 
}

/* =========================================
   UTILIDADES - LOGO BLANCO
   ========================================= */
.logo-blanco-puro img {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

/* Mantiene el logo blanco mientras aplica el desenfoque del portafolio */
.tarjeta-portafolio:hover .logo-blanco-puro img {
    -webkit-filter: brightness(0) invert(1) blur(10px) !important;
    filter: brightness(0) invert(1) blur(10px) !important;
    transform: scale(1.05) !important;
}

/* =========================================
   CARRUSEL DE LOGOS (BLANCO + MOVIMIENTO CONTINUO + FADE EN ORILLAS)
   ========================================= */

/* 1. Vuelve las imágenes blanco puro y bloquea su arrastre */
.carrusel-marcas-premium img,
.carrusel-marcas-premium .elementor-widget-container img {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    transform: translateZ(0);
    -webkit-user-drag: none !important; 
    user-select: none !important;
}

/* 2. Fuerza el movimiento de la pista de Swiper a lineal */
.carrusel-marcas-premium .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

/* 3. Bloquea absolutamente toda interacción (clics y swipe) */
.carrusel-marcas-premium .swiper-container,
.carrusel-marcas-premium .swiper, 
.carrusel-marcas-premium .swiper-wrapper {
    pointer-events: none !important; 
}

/* 4. EL SECRETO CINEMÁTICO: Máscara de difuminado en las orillas */
.carrusel-marcas-premium {
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
}

#ast-scroll-top {
  display: none !important;
}/* End custom CSS */