/*
 * ==========================================================================
 * HOJA DE ESTILOS: SECCIÓN PROPÓSITO KOANDINA
 * ==========================================================================
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * FECHA: Febrero 2026
 * DESCRIPCIÓN: Hoja de estilos centralizada para componentización de la sección
 * "Propósito Koandina". Optimizada para renderizado GPU y mitigación de CLS.
 * * ÍNDICE DE CONTENIDOS:
 * 1. Tipografía Global & Utilidades (Body Large, Display Medium)
 * 2. Componentes Flotantes (Nubes Móvil)
 * 3. Banner Swiper (Layout Grid & Controles)
 * 4. Video Trigger Overlay (Botón Play Nectar)
 * 5. Tarjetas Interactivas "Figma" (Layout Compacto)
 * 6. Componente: Lottie Player (Aceleración WPO)
 * 7. Componente: Hero Slider Swiper (Smart Autoplay)
 * 8. Utilidad: Animación "Cascade Text Reveal"
 * 9. Utilidad: Animación "Scroll Scrub Fade"
 * 10. Utilidad: Animación Atmosférica "Cloud Floating Reveal"
 * 11. Utilidad: Scroll Sticky Botella (Motor Custom 3D)
 * 12. Componente: Magic Truck (Renderizado GPU & Lerp)
 * 13. Componente: Tabs de Video (Layout Ancho & Singleton)
 * 14. Componente: Carrusel de Video Móvil (UX Táctil & Preload)
 * ==========================================================================
 */


/* ==========================================================================
   1. TIPOGRAFÍA GLOBAL & UTILIDADES
   ========================================================================== */

/* 
 * CLASE: Body Large (Párrafo Destacado)
 * USO: Aplicar 'ka-body-large' en Extra class name del widget de texto.
 * NOTA: Usa !important para sobreescribir estilos inline de WPBakery.
 */
.ka-body-large, 
.ka-body-large p, 
.ka-body-large .wpb_wrapper {
    color: #000 !important;
    font-size: var(--Body-Large-fontSize, 20px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--Body-Large-lineHeight, 32px) !important;
    letter-spacing: var(--Body-Large-letterSpacing, 0) !important;
    
    /* Reseteo de márgenes para alineación perfecta */
    margin-bottom: 0 !important; 
}

/* 
 * CLASE: Display Medium (Títulos Grandes - Una Línea)
 * USO: Poner 'ka-display-medium-col' en la COLUMNA contenedora.
 */
.ka-display-medium-col .wpb_wrapper h1,
.ka-display-medium-col .wpb_wrapper h2,
.ka-display-medium-col .wpb_wrapper h3,
.ka-display-medium-col .wpb_wrapper p,
.ka-display-medium-col .wpb_wrapper div {
    color: var(--Text-text-primary, #121619) !important;
    
    /* Tipografía Figma */
    font-size: var(--Display-Medium-fontSize, 64px) !important;
    font-weight: 700 !important;
    line-height: var(--Display-Medium-lineHeight, 1.1) !important;
    letter-spacing: var(--Display-Medium-letterSpacing, 0) !important;
    
    /* ESTRATEGIA: Forzar una sola línea en Desktop */
    white-space: nowrap !important; 
    
    /* Layout */
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

/* Ajuste Tablet (Evita desborde) */
@media screen and (max-width: 1024px) {
    .ka-display-medium-col .wpb_wrapper h1,
    .ka-display-medium-col .wpb_wrapper h2,
    .ka-display-medium-col .wpb_wrapper h3,
    .ka-display-medium-col .wpb_wrapper p {
        font-size: 48px !important; 
    }
}

/* Ajuste Móvil (Permitir saltos de línea) */
@media screen and (max-width: 768px) {
    .ka-display-medium-col .wpb_wrapper h1,
    .ka-display-medium-col .wpb_wrapper h2,
    .ka-display-medium-col .wpb_wrapper h3,
    .ka-display-medium-col .wpb_wrapper p {
        white-space: normal !important; /* Permitir wrap */
        font-size: 36px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }
}


/* ==========================================================================
   2. COMPONENTES FLOTANTES (NUBES MÓVIL)
   ========================================================================== */

/* Estrategia: En móvil, las nubes decorativas deben salir del flujo para no ocupar espacio vertical */
@media (max-width: 767px) {
    
    /* Colapsar el contenedor WPBakery a 0px de altura */
    .nube-flotante-movil, 
    .nube-flotante-movil .wpb_single_image, 
    .nube-flotante-movil .vc_single_image-wrapper,
    .nube-flotante-movil figure {
        position: absolute !important;
        height: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important; /* Permitir que la imagen se vea fuera de la caja */
        z-index: 10 !important;
    }

    /* Posicionar la imagen visualmente */
    .nube-flotante-movil img {
        position: absolute !important;
        top: -50px !important;   /* Ajuste vertical negativo para "flotar" hacia arriba */
        left: 0 !important;
        
        width: 150px !important; /* Tamaño controlado */
        height: auto !important;
        max-width: none !important;
    }
}

/* NUBE REBELDE (Desktop/General): Fuerza tamaño fijo */
.nube-rebelde img {
    max-width: none !important; 
    width: 150px !important; /* Tamaño fijo forzado */
    height: auto !important;
}


/* ==========================================================================
   3. BANNER SWIPER (GRID SYSTEM)
   ========================================================================== */

/* Limpieza de párrafos vacíos de WordPress */
.ka-banner-container p:empty { display: none !important; }

/* Contenedor Principal */
body .ka-banner-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
    box-sizing: border-box;
}

/* Wrapper del Swiper */
body .ka-banner-swiper {
    width: 100%;
    padding-bottom: 80px !important; /* Espacio para controles inferiores en desktop */
}

/* --- GRID LAYOUT (Desktop) --- */
body .ka-banner-grid {
    display: grid;
    /* 3 Columnas: Texto Izq (1.2fr) - Imagen Centro (1fr) - Texto Der (1.2fr) */
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

body .ka-banner-col-left, 
body .ka-banner-col-right { text-align: left; }

/* Título */
body .ka-banner-title {
    color: #121619 !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Caja de Imagen Central */
body .ka-banner-col-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 440px;
    padding: 40px;
    margin: 0 auto;
    border-radius: 20px;
    background: #F2F4F8 !important; /* Fondo gris claro */
    position: relative;
    box-sizing: border-box;
}

body .ka-banner-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 !important;
}

/* Texto Descriptivo */
body .ka-banner-text {
    color: #4D5358 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* --- CONTROLES DE NAVEGACIÓN (Desktop) --- */
body .ka-swiper-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    z-index: 20;
    width: 100%;
    pointer-events: none; /* Click pass-through */
}

/* Flechas Circulares */
body .ka-swiper-button-prev,
body .ka-swiper-button-next {
    width: 48px !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto; /* Reactivar clicks */
    margin: 0 !important;
    flex-shrink: 0;
}

/* Orden Flex para Desktop: Prev(1) - Pagination(2) - Next(3) */
body .ka-swiper-button-prev { order: 1 !important; }
body .ka-swiper-button-next { order: 3 !important; }

/* Paginación (Cápsula Central) */
body .ka-swiper-pagination {
    order: 2 !important;
    display: flex !important;
    position: static !important;
    width: auto !important;
    transform: none !important;
    padding: 8px 12px !important;
    align-items: center; justify-content: center;
    gap: 8px !important;
    border-radius: 999px !important;
    background: #F2F4F8 !important;
    pointer-events: auto;
    margin: 0 !important;
}

/* Bullets y Barra de Progreso */
body .swiper-pagination-bullet {
    width: 8px !important; height: 8px !important;
    background: #CCCCCC !important; opacity: 1 !important;
    border-radius: 50% !important; margin: 0 !important;
    transition: width 0.3s ease;
    position: relative; overflow: hidden; display: block !important;
}

body .swiper-pagination-bullet-active {
    width: 40px !important;
    background: #CCCCCC !important;
    border-radius: 4px !important;
}

/* Animación de carga interna */
@keyframes kaFillProgress { 0% { width: 0%; } 100% { width: 100%; } }

body .ka-progress-bar {
    position: absolute; top: 0; left: 0; height: 100%;
    background-color: #FFFFFF !important; width: 0%;
    border-radius: 4px; display: block;
}

body .swiper-pagination-bullet-active .ka-progress-bar {
    animation: kaFillProgress 6000ms linear forwards;
}

/* --- BANNER RESPONSIVE (< 1024px) --- */
@media (max-width: 1024px) {
    
    body .ka-banner-container { padding: 40px 24px !important; }
    body .ka-banner-swiper { padding-bottom: 0 !important; }

    /* Change Grid to Column Flex */
    body .ka-banner-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important; 
        text-align: left !important;
        align-items: flex-start !important;
    }

    /* Título Móvil */
    body .ka-banner-title {
        font-size: 24px !important;
        line-height: 32px !important;
        text-align: left !important;
        width: 100% !important;
        min-height: 100px !important; /* Reserva espacio fijo para alineación */
        display: flex !important;
        align-items: center !important;
    }

    body .ka-banner-col-left { width: 100% !important; }

    /* Imagen Móvil */
    body .ka-banner-col-center {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 0.8 !important;
        padding: 24px !important;
        margin: 0 !important;
    }
    body .ka-banner-img { max-height: 160px !important; }

    /* Texto Móvil */
    body .ka-banner-text {
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: left !important;
    }

    /* Controles Móvil (Separados) */
    body .ka-swiper-controls {
        position: relative !important;
        bottom: auto !important; left: auto !important; transform: none !important;
        margin-top: 16px !important;
        width: 100% !important;
        justify-content: space-between !important; /* Separar paginación de flechas */
        padding: 0 !important;
    }

    /* Reordenamiento Móvil */
    body .ka-swiper-pagination {
        order: 1 !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        background: transparent !important;
    }
    body .ka-swiper-button-prev {
        order: 2 !important;
        margin-left: auto !important; margin-right: 12px !important;
    }
    body .ka-swiper-button-next { order: 3 !important; }
}


/* ==========================================================================
   4. VIDEO TRIGGER OVERLAY (BOTÓN PLAY)
   ========================================================================== */

/* Contenedor del Enlace (Imagen + Overlay) */
.ka-video-trigger a, 
.ka-video-trigger .wpb_single_image a,
.ka-video-trigger .vc_single_image-wrapper a {
    display: block !important;
    position: relative !important;
    cursor: pointer;
    overflow: hidden; 
    border-radius: 24px !important; 
    
    /* Fix Glitch Móvil */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
}

/* Pseudo-elemento: Botón Play Blanco */
.ka-video-trigger a::after,
.ka-video-trigger .wpb_single_image a::after,
.ka-video-trigger .vc_single_image-wrapper a::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    
    width: 88px; height: 88px;
    background-color: #ffffff;
    border-radius: 50%;
    
    /* Icono SVG Play */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.13281 18.5705V5.42901C6.13281 4.99579 6.27569 4.64928 6.56146 4.38947C6.84722 4.12966 7.18075 3.99976 7.56206 3.99976C7.68681 3.99976 7.81317 4.01627 7.94116 4.0493C8.06945 4.08203 8.19596 4.13128 8.3207 4.19704L18.6581 10.8019C18.8784 10.9561 19.0435 11.132 19.1535 11.3296C19.2635 11.5269 19.3185 11.7503 19.3185 11.9998C19.3185 12.2492 19.2635 12.4726 19.1535 12.6699C19.0435 12.8675 18.8784 13.0434 18.6581 13.1977L8.3207 19.8025C8.19596 19.8682 8.06945 19.9175 7.94116 19.9502C7.81317 19.9832 7.68681 19.9998 7.56206 19.9998C7.18075 19.9998 6.84722 19.8699 6.56146 19.61C6.27569 19.3502 6.13281 19.0037 6.13281 18.5705ZM7.90223 17.9273L17.2598 11.9998L7.90223 6.07219V17.9273Z' fill='%23121619'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
    z-index: 100;
    pointer-events: none; 
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    
    opacity: 1 !important; visibility: visible !important; display: block !important;
}

/* Ocultar elementos nativos de Salient */
.ka-video-trigger .play_button,
.ka-video-trigger .nectar_video_lightbox_overlay, 
.ka-video-trigger .circle { display: none !important; }

/* Escalar al Hover (Solo Desktop) */
@media (hover: hover) {
    .ka-video-trigger a:hover::after { transform: translate(-50%, -50%) scale(1.1); }
    .ka-video-trigger a:hover img { transform: scale(1.02); filter: brightness(0.95); }
}

/* Ajustes Responsive Botón Play */
@media (max-width: 1024px) {
    .ka-video-trigger a::after, .ka-video-trigger .wpb_single_image a::after {
        width: 72px !important; height: 72px !important; background-size: 22px 22px !important;
    }
}
@media (max-width: 767px) {
    .ka-video-trigger a::after, .ka-video-trigger .wpb_single_image a::after {
        width: 60px !important; height: 60px !important; background-size: 18px 18px !important;
        z-index: 999 !important; /* Asegurar visibilidad tope */
    }
}


/* ==========================================================================
   5. TARJETAS INTERACTIVAS "FIGMA" (COMPACTAS)
   ========================================================================== */

/* Limpieza Global: Evitar scroll horizontal fantasma */
html, body { overflow-x: hidden !important; width: 100%; }

/* Contenedor de Tarjeta */
.tarjeta-figma {
    max-width: 320px !important;
    width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important; /* Permitir que las nubes sobresalgan */
}

/* Permitir desborde interno */
.tarjeta-figma .vc_column-inner, 
.tarjeta-figma .wpb_wrapper { overflow: visible !important; }

/* Foto Principal */
.foto-principal, 
.foto-principal img {
    height: 246px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 24px !important;
}

/* Botón Play Mini (Esquina inferior derecha de la tarjeta) */
.tarjeta-video-mini a::after,
.tarjeta-video-mini .vc_single_image-wrapper a::after {
    content: "";
    position: absolute;
    bottom: 16px !important; right: 16px !important;
    width: 48px !important; height: 48px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.13281 18.5705V5.42901C6.13281 4.99579 6.27569 4.64928 6.56146 4.38947C6.84722 4.12966 7.18075 3.99976 7.56206 3.99976C7.68681 3.99976 7.81317 4.01627 7.94116 4.0493C8.06945 4.08203 8.19596 4.13128 8.3207 4.19704L18.6581 10.8019C18.8784 10.9561 19.0435 11.132 19.1535 11.3296C19.2635 11.5269 19.3185 11.7503 19.3185 11.9998C19.3185 12.2492 19.2635 12.4726 19.1535 12.6699C19.0435 12.8675 18.8784 13.0434 18.6581 13.1977L8.3207 19.8025C8.19596 19.8682 8.06945 19.9175 7.94116 19.9502C7.81317 19.9832 7.68681 19.9998 7.56206 19.9998C7.18075 19.9998 6.84722 19.8699 6.56146 19.61C6.27569 19.3502 6.13281 19.0037 6.13281 18.5705ZM7.90223 17.9273L17.2598 11.9998L7.90223 6.07219V17.9273Z' fill='%23121619'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    z-index: 10 !important;
    transition: transform 0.3s ease !important;
}

@media (hover: hover) {
    .tarjeta-video-mini a:hover::after { transform: scale(1.1) !important; }
}

/* --- REDUCCIÓN DE ESPACIOS (COMPACIDAD) --- */
/*
   Elimina márgenes automáticos de WPBakery para que:
   Imagen -> Título -> Texto estén visualmente pegados.
*/

/* 1. Imagen sin margen inferior */
.tarjeta-figma .foto-principal,
.tarjeta-figma .vc_single_image-wrapper,
.tarjeta-figma .wpb_single_image {
    margin-bottom: 0 !important; padding-bottom: 0 !important;
}
.tarjeta-figma img { margin-bottom: 0 !important; display: block !important; }

/* 2. Títulos (Pegados a imagen y texto) */
.tarjeta-figma h1, .tarjeta-figma h2, .tarjeta-figma h3, 
.tarjeta-figma h4, .tarjeta-figma h5, .tarjeta-figma .vc_custom_heading {
    margin-top: 10px !important;  /* Espacio con imagen */
    margin-bottom: 5px !important;/* Espacio con texto */
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* 3. Textos (Pegados a título) */
.tarjeta-figma .wpb_text_column, 
.tarjeta-figma p {
    margin-top: 0 !important;
    padding-top: 5px !important; /* Pequeño ajuste visual */
    margin-bottom: 0 !important;
}

/* 4. Limpieza Elementos Vacíos */
.tarjeta-figma .vc_empty_space, .tarjeta-figma .vc_separator { display: none !important; }
.tarjeta-figma .vc_column-inner { padding-top: 0 !important; }

/*
 * ==========================================================================
 * CONTEXTO: Estilos de layout y WPO visual para componente Lottie
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - Uso estricto de `aspect-ratio` para reservar el espacio en el DOM antes de
 * que el JS monte el canvas, eliminando el CLS (Cumulative Layout Shift).
 * - En resoluciones móviles, se evita recalcular anchos/altos que detonen 
 * Reflows costosos en el Main Thread. En su lugar, se utiliza `transform: scale()`
 * para forzar la aceleración por hardware (GPU) al ajustar el encuadre.
 * ==========================================================================
 */

/* ==========================================================================
   VARIABLES Y UTILIDADES
   ========================================================================== */
   
/* Clase utilitaria para SEO y Accesibilidad (Screen Reader Only).
   Oculta texto a la vista sin removerlo del DOM, permitiendo el rastreo de Googlebot
   y lectura en dispositivos de asistencia. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   ESTRUCTURA BASE (DESKTOP FIRST)
   ========================================================================== */
.ka-lottie-wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background-color: transparent;
    
    /* Control de contención estándar para resoluciones panorámicas */
    overflow: hidden; 
}

.ka-lottie-container {
    width: 100%;
    max-width: 1425px; 
    margin: 0 auto;
    position: relative;
    
    /* Preserva el espacio arquitectónico antes de la carga del asset */
    aspect-ratio: 1425 / 650;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Aceleración por hardware anticipada para mantener bordes nítidos en re-escalados */
    will-change: transform;
    transition: transform 0.3s ease;
}

.ka-lottie-container__player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; 
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE
   ========================================================================== */

/* Laptops y Pantallas medianas */
@media (max-width: 1440px) {
    .ka-lottie-container { width: 95%; }
}

/* Tablets (Ajuste de ratio preventivo) */
@media (max-width: 1024px) {
    .ka-lottie-container { 
        width: 92%; 
        aspect-ratio: 16 / 9; 
    }
}

/* Resolución Móvil (Breakout & Escala Dinámica) */
@media (max-width: 767px) {
    .ka-lottie-wrapper {
        /* Permite desborde vertical (flotación) hacia las secciones superior/inferior */
        overflow-y: visible; 
        
        /* Corta el desborde horizontal para prevenir scroll en el eje X (Layout break) */
        overflow-x: clip; 
        
        /* Asegura que la animación flote visualmente sobre el resto del contenido */
        z-index: 10;
    }

    .ka-lottie-container {
        width: 100%;
        min-height: 250px;
        
        /* Cierra la diferencia de altura en el árbol DOM para acercar otras secciones */
        aspect-ratio: 1 / 0.85; 

        /* Zoom de encuadre acelerado para recuperar peso visual en el Canvas móvil */
        transform: scale(1.85);
        transform-origin: center center;
    }
}

/* Ajuste de escala para pantallas ultra-compactas (ej. iPhone SE, Fold) */
@media (max-width: 380px) {
    .ka-lottie-container { 
        transform: scale(1.65); 
    }
}

/*
 * ==========================================================================
 * CONTEXTO: Estilos y Layout del Hero Slider (Swiper Banner)
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - Arquitectura CSS Grid en Desktop para un alineamiento proporcional exacto (1fr 1.5fr 1fr).
 * - Transición fluida a Flexbox en breakpoints móviles para apilamiento natural, evitando sobrecarga de media queries.
 * - Uso de variables CSS nativas (`var()`) inyectadas por el theme para mantener consistencia de marca corporativa.
 * - Feedback táctil UI renderizado estrictamente mediante `transform: scale` y `background-color` para evitar repintados (Reflows).
 * ==========================================================================
 */

.ka-banner-container {
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;
    padding: 40px 20px; 
}

.ka-banner-swiper {
    padding-bottom: 80px; 
    position: relative;
}

.ka-banner-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr; 
    align-items: center; 
    gap: 40px;
    width: 100%;
}

.ka-banner-col-left { text-align: left; }
.ka-banner-col-center { display: flex; justify-content: center; align-items: center; }
.ka-banner-col-right { text-align: left; }

.ka-banner-title {
    color: var(--Text-text-primary, #121619);
    font-size: var(--Heading-Small-fontSize, 24px);
    font-weight: 700;
    line-height: var(--Heading-Small-lineHeight, 32px);
    margin: 0;
}

.ka-banner-img {
    width: 100%; max-width: 500px; height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.ka-banner-text {
    color: var(--Text-text-secondary, #4D5358);
    font-size: var(--Body-Small-fontSize, 14px);
    font-weight: 400;
    line-height: var(--Body-Small-lineHeight, 20px);
    margin: 0;
}

.ka-swiper-controls {
    position: absolute; bottom: 0; left: 0; width: 100%;
    display: flex; align-items: center; 
    padding: 0 20px; height: 60px; z-index: 10;
}

.ka-banner-container .ka-swiper-pagination {
    position: static !important; width: auto !important;
    display: inline-flex !important; align-items: center; gap: 8px;
    background: #F0F2F5 !important; 
    padding: 8px 16px !important;
    border-radius: 20px;
    margin-right: auto; 
}

.ka-swiper-pagination .swiper-pagination-bullet {
    width: 8px !important; height: 8px !important; 
    background: #C4C9D0; opacity: 1; border-radius: 50%;
    margin: 0 !important; position: relative; overflow: hidden; display: block;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ka-swiper-pagination .swiper-pagination-bullet-active {
    width: 40px !important; height: 8px !important;    
    border-radius: 4px; background: #E0E4E8;       
}

.ka-swiper-pagination .swiper-pagination-bullet .ka-progress-bar {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%; height: 100%;
    background-color: #121619; 
    border-radius: 4px; display: block;
}

.ka-banner-container.ka-autoplay-running .ka-swiper-pagination .swiper-pagination-bullet-active .ka-progress-bar {
    animation: ka-progress-fill 6s linear forwards;
}

@keyframes ka-progress-fill {
    0% { width: 0%; }
    100% { width: 100%; }
}

.ka-swiper-button-prev, .ka-swiper-button-next {
    position: static !important; width: 44px; height: 44px;
    margin-left: 12px !important; margin-right: 0 !important; 
    border: 1px solid #121619; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent; 
    transition: all 0.15s ease; z-index: 20;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0.3);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.ka-swiper-button-prev:hover, .ka-swiper-button-next:hover { 
    background-color: #F8F9FA; 
}

.ka-swiper-button-prev.ka-pressed,
.ka-swiper-button-next.ka-pressed,
.ka-swiper-button-prev:active, 
.ka-swiper-button-next:active { 
    background-color: #121619 !important; 
    border-color: #121619 !important; 
    transform: scale(0.92); 
}

.ka-swiper-button-prev.ka-pressed svg path,
.ka-swiper-button-next.ka-pressed svg path,
.ka-swiper-button-prev:active svg path, 
.ka-swiper-button-next:active svg path { 
    stroke: #FFFFFF !important; 
}

.ka-swiper-button-prev::after, 
.ka-swiper-button-next::after { 
    content: '' !important; 
    display: none; 
}

@media (max-width: 900px) {
    .ka-banner-grid {
        display: flex; flex-direction: column;
        align-items: flex-start; text-align: left; gap: 20px;
    }
    
    .ka-banner-col-left { order: 1; width: 100%; margin-bottom: 10px; }
    .ka-banner-title br { display: none; } 
    
    .ka-banner-col-center { order: 2; width: 100%; margin-bottom: 20px; justify-content: center; }
    .ka-banner-img { max-width: 100%; margin: 0 auto; }
    
    .ka-banner-col-right { order: 3; width: 100%; margin-bottom: 20px; }
    .ka-swiper-controls { padding: 0 10px; }
    
    .ka-banner-container .ka-swiper-pagination { 
        padding: 6px 12px !important;
        display: inline-flex !important; width: auto !important;
    }
    .ka-swiper-pagination .swiper-pagination-bullet { width: 6px !important; height: 6px !important; }
    .ka-swiper-pagination .swiper-pagination-bullet-active { width: 30px !important; height: 6px !important; }
    
    .ka-swiper-button-prev { margin-right: 70px !important; margin-right: 2px !important; }
    .ka-swiper-button-next { margin-left: 0 !important; margin-right: 0 !important; }
}

/*
 * ==========================================================================
 * CONTEXTO: Utilidad Global - Animación "Cascade Text Reveal"
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - Aceleración por Hardware: Uso exclusivo de `transform` y `opacity` para evitar
 * el recálculo de geometría del DOM (Reflow/Layout) durante la animación.
 * - Prevención de Recortes: `overflow: visible !important` asegura que los nodos 
 * desplazados por `translateY(40px)` no sean clipeados por contenedores WPBakery.
 * - Optimización de Renderizado: `will-change` informa al navegador con anticipación
 * para crear una capa de composición (Composite Layer) dedicada, garantizando 60fps.
 * ==========================================================================
 */

.ka-staggered-text-col {
    position: relative;
    overflow: visible !important;
}

/* Selector profundo para nodos de contenido dentro de la columna objetivo */
.ka-staggered-text-col h1, 
.ka-staggered-text-col h2, 
.ka-staggered-text-col h3, 
.ka-staggered-text-col h4, 
.ka-staggered-text-col h5, 
.ka-staggered-text-col h6, 
.ka-staggered-text-col p, 
.ka-staggered-text-col li, 
.ka-staggered-text-col img,
.ka-staggered-text-col .nectar-btn,
.ka-staggered-text-col blockquote,
.ka-staggered-text-col .wpb_single_image {
    opacity: 0;
    transform: translateY(40px); 
    
    /* Curva de aceleración Out-Expo para una llegada natural al estado de reposo */
    transition: 
        opacity 1.0s cubic-bezier(0.2, 1, 0.3, 1), 
        transform 1.0s cubic-bezier(0.2, 1, 0.3, 1);
    
    will-change: opacity, transform;
}

/* Estado Mutado (Aplicado vía JS) */
.ka-staggered-text-col .ka-anim-active {
    opacity: 1;
    transform: translateY(0);
}

/* Degradación elegante en Viewports reducidos */
@media (max-width: 768px) {
    .ka-staggered-text-col h1, 
    .ka-staggered-text-col p {
        /* Reducción de delta de transformación para evitar desorientación visual en pantallas pequeñas */
        transform: translateY(20px); 
    }
}

/*
 * ==========================================================================
 * CONTEXTO: Utilidad Global - Animación "Scroll Scrub Fade"
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - Aceleración GPU: Uso estricto de `opacity` y `will-change: opacity` para
 * asegurar que el navegador maneje el fade en una capa de composición (Composite Layer),
 * evitando Reflows y Repaints masivos durante la mutación de estado vinculada al scroll.
 * - Suavizado: La transición de 0.4s actúa como un "easing" mecánico para suavizar
 * los saltos entre los valores opacidad calculados por el JS frame a frame.
 * ==========================================================================
 */

.ka-scroll-fade-item {
    transition: opacity 0.4s ease-out;
    will-change: opacity;
    opacity: 0; 
}

/* Fix de especificidad: Sobrescribe las inyecciones nativas de animación de WPBakery */
.ka-scroll-fade-item.wpb_animate_when_almost_visible {
    opacity: 0 !important; 
}

/*
 * ==========================================================================
 * CONTEXTO: Utilidad Global - Animación Atmosférica "Cloud Floating Reveal"
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - UX Ininterrumpida: El uso de `pointer-events: none` saca a la capa de nubes
 * del árbol de accesibilidad e interacciones del DOM. Garantiza que no intercepten
 * clics dirigidos a botones o enlaces en capas inferiores (z-index).
 * - Aceleración de Hardware: `will-change` combinado con `transform` evita el 
 * repintado (Repaint) en el Main Thread. La transición `cubic-bezier` de 1.8s 
 * otorga un peso visual "flotante" y orgánico sin afectar los Web Vitals.
 * ==========================================================================
 */

/* CLASE MAESTRA: IZQUIERDA -> DERECHA */
.ka-cloud-reveal-left {
    position: relative;
    opacity: 0 !important; 
    transform: translateX(-80px) scale(0.95) !important;
    
    transition: 
        opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
        transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    will-change: opacity, transform;
    display: block; 
    
    /* Bloqueo de interacciones fantasma (Z-Index UX Fix) */
    pointer-events: none; 
    z-index: 1; 
}

.ka-cloud-reveal-left.ka-cloud-visible {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

/* CLASE MAESTRA: DERECHA -> IZQUIERDA */
.ka-cloud-reveal-right {
    position: relative;
    opacity: 0 !important;
    transform: translateX(80px) scale(0.95) !important; 
    
    transition: 
        opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
        transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    will-change: opacity, transform;
    display: block;
    
    /* Bloqueo de interacciones fantasma (Z-Index UX Fix) */
    pointer-events: none;
    z-index: 1;
}

.ka-cloud-reveal-right.ka-cloud-visible {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

/* Sanitización de assets de imagen dentro de los contenedores */
.ka-cloud-reveal-left img,
.ka-cloud-reveal-right img {
    max-width: 100%;
    height: auto;
}

/*
 * ==========================================================================
 * CONTEXTO: Utilidad Global - "Scroll Sticky Botella" (Motor Custom)
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - Aceleración GPU Extrema: La combinación de `will-change: transform`, 
 * `backface-visibility: hidden` y `transform-style: preserve-3d` fuerza al navegador
 * a crear un contexto de apilamiento 3D (Composite Layer) independiente.
 * - Prevención de Layout Thrashing: Al mover el elemento con `translate3d` vía JS,
 * se evita recalcular la geometría del DOM, logrando 60fps constantes incluso en móviles.
 * - `transition: none`: Obligatorio para evitar conflictos entre el motor JS 
 * y el motor de renderizado CSS.
 * ==========================================================================
 */

.ka-sticky-bottle img, 
.ka-sticky-bottle {
    will-change: transform;          
    backface-visibility: hidden;     
    transform-style: preserve-3d;    
    position: relative; 
    z-index: 50; 
    width: 100%;
    max-width: 100%;
    transition: none; 
}

/*
 * ==========================================================================
 * CONTEXTO: Estilos y Renderizado GPU para "Magic Truck"
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - Comunicación JS-CSS: Uso de CSS Custom Properties (`--scroll-progress`) como 
 * puente de datos bidireccional de alto rendimiento. Las funciones `calc()` 
 * procesan la matemática de interpolación nativamente en el motor de estilos.
 * - Mobile-First Estricto: El breakpoint inferior a 768px inyecta `--scroll-progress: 1 !important`
 * para forzar el repintado al estado final, anulando cualquier cálculo y salvando batería.
 * ==========================================================================
 */

.ka-magic-truck-container {
    display: flex;
    align-items: center; 
    justify-content: center;
    width: 100%; 
    max-width: 100%;
    margin: 0 auto;
    padding: 100px 0; 
    overflow: visible; 
    box-sizing: border-box;
    gap: 20px; 
    
    /* Contexto 3D: Fuerza al motor de renderizado a suavizar el anti-aliasing durante las transformaciones */
    perspective: 1000px; 
    
    /* Semilla de interpolación reactiva modificada desde JS (Rango: 0 a 1) */
    --scroll-progress: 0; 
}
.ka-magic-truck-img {
    display: block;
    position: relative;
    z-index: 10; 
    width: 220px !important; 
    height: auto !important; 
    flex-shrink: 0; 
    object-fit: contain;
    
    /* WPO: Asignación de caja rígida para evitar re-flujos y penalizaciones CLS (Cumulative Layout Shift) */
    aspect-ratio: 176 / 119;
}
.ka-magic-text {
    position: relative;
    z-index: 5; 
    color: #000;
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
    
    /* Tokenización estructural adaptada al Design System Global con Fallback */
    font-size: var(--Body-Large-fontSize, 28px); 
    /* Control de contención: Evita que el texto rompa su nodo por estrechamiento del flex-container */
    white-space: nowrap; 
}
/* ==========================================================================
   INTERPOLACIÓN DE HARDWARE (DESKTOP)
   ========================================================================== */
@media (min-width: 769px) {
    .ka-magic-truck-img {
        transform: scale(calc(0.6 + (0.4 * var(--scroll-progress))));
        opacity: var(--scroll-progress); 
        
        /* GPU Offloading: Promueve el renderizado a una capa de composición (Composite Layer) previniendo Paint CPU */
        will-change: transform, opacity;
    }
    .ka-text-left {
        transform: translateX(calc(100px * (1 - var(--scroll-progress))));
        will-change: transform;
    }
    .ka-text-right {
        transform: translateX(calc(-100px * (1 - var(--scroll-progress))));
        will-change: transform;
    }
}
/* ==========================================================================
   ENTORNO MÓVIL (COMPENSACIÓN ÓPTICA Y PERFORMANCE FALLBACK)
   ========================================================================== */
@media (max-width: 768px) {
    .ka-magic-truck-container {
        padding: 40px 0;
        min-height: 100px;
        flex-wrap: nowrap; 
        
        /* Eliminación del nodo de espaciado Flexbox para máxima compactación */
        gap: 0px !important; 
        
        /* Cierre forzoso de estados intermedios en móvil */
        --scroll-progress: 1 !important; 
    }
    
    .ka-magic-truck-img {
        width: 130px !important; 
        min-width: 130px !important;
        opacity: 1 !important; 
        transform: none !important;
        /* Compensación de "Bounding Box": Contrarresta los píxeles transparentes del asset original (PNG/WebP)
           forzando la atracción de las cajas de texto adyacentes para reducir la percepción de "aire". */
        margin: 0 5px !important; 
    }
    
    .ka-magic-text {
        font-size: 15px; 
        transform: none !important;
    }
}

/*
 * ==========================================================================
 * CONTEXTO: Estilos y Aceleración de Hardware para Tabs de Video
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - WPO Extremo: Refactorización de la animación de la barra de progreso roja.
 * Se eliminó la animación de `height` (que detona Layout/Reflow continuo) y se 
 * reemplazó por `transform: scaleY()`. El navegador ahora procesa el crecimiento 
 * enteramente en la GPU usando la capa de composición.
 * - UX/UI: Uso estricto de variables del design system con `!important` táctico 
 * para aislar el componente de las sobreescrituras salvajes de WPBakery.
 * ==========================================================================
 */

.ka-tabs-section {
    width: 100%;
    max-width: 1425px; 
    margin: 0 auto;
    padding: 60px 40px; 
    box-sizing: border-box;
}

.ka-tabs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 80px; 
    align-items: center; 
}

.ka-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 0; 
    position: relative;
    text-align: left;
}

.ka-tab-item {
    position: relative;
    padding: 10px 0 10px 24px; 
    cursor: pointer;
    border-bottom: 1px solid #E6E8EB; 
    transition: all 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ka-tab-item:last-child { border-bottom: none; }

.ka-tab-progress-bg {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: #E6E8EB; 
    border-radius: 2px;
}

/* FIX WPO: Animación trasladada a GPU */
.ka-tab-progress-fill {
    position: absolute; left: 0; top: 0;
    width: 4px; height: 100%; 
    background: #ED0000; 
    border-radius: 2px;
    
    /* Escala vertical. Origen arriba. Aceleración hardware */
    transform-origin: top;
    transform: scaleY(0);
    will-change: transform;
    /* La transición lineal suaviza la inyección del progress JS */
    transition: transform 0.1s linear; 
}

.ka-tab-subtitle {
    color: var(--Text-text-secondary, #4D5358);
    font-size: var(--Caption-Large-fontSize, 12px) !important;
    font-weight: 400;
    line-height: var(--Caption-Large-lineHeight, 16px);
    text-transform: uppercase;
    margin: 0; 
    opacity: 0.7; transition: opacity 0.3s;
}

.ka-tab-title {
    color: var(--Text-text-primary, #121619);
    font-size: var(--Title-Large-fontSize, 20px) !important;
    font-weight: 600;
    line-height: var(--Title-Large-lineHeight, 26px); 
    margin: 0;
    transition: color 0.3s;
}

.ka-tab-desc {
    align-self: stretch;
    color: var(--Text-text-secondary, #4D5358);
    font-size: var(--Body-Small-fontSize, 14px) !important;
    font-weight: 400;
    line-height: var(--Body-Small-lineHeight, 20px);
    margin-top: 4px; 
    
    max-height: 0; 
    overflow: hidden; 
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ka-tab-item.active .ka-tab-title { color: #121619; }
.ka-tab-item:not(.active) .ka-tab-title { color: #878C93; } 
.ka-tab-item.active .ka-tab-desc {
    max-height: 200px; 
    opacity: 1;
    margin-top: 6px;
}
.ka-tab-item.active .ka-tab-subtitle { opacity: 1; color: #ED0000; font-weight: 600; } 

.ka-video-wrapper {
    position: relative;
    width: 617px; 
    max-width: 100%;
    aspect-ratio: 617/640; 
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    
    position: sticky;
    top: 40px;
    margin-left: auto; 
}

.ka-preview-video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0; transition: opacity 0.4s ease;
}
.ka-preview-video.loaded { opacity: 1; }

.ka-video-section-trigger {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20;
}

.ka-video-trigger-container {
    width: 100%; height: 100%;
    display: block;
}

.ka-video-trigger-container a {
    display: block !important;
    position: relative !important;
    width: 100%; height: 100%; 
    cursor: pointer;
    overflow: hidden; 
    border-radius: 24px !important; 
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
}

.ka-video-trigger-container a::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    width: 88px; height: 88px;
    background-color: #ffffff;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.13281 18.5705V5.42901C6.13281 4.99579 6.27569 4.64928 6.56146 4.38947C6.84722 4.12966 7.18075 3.99976 7.56206 3.99976C7.68681 3.99976 7.81317 4.01627 7.94116 4.0493C8.06945 4.08203 8.19596 4.13128 8.3207 4.19704L18.6581 10.8019C18.8784 10.9561 19.0435 11.132 19.1535 11.3296C19.2635 11.5269 19.3185 11.7503 19.3185 11.9998C19.3185 12.2492 19.2635 12.4726 19.1535 12.6699C19.0435 12.8675 18.8784 13.0434 18.6581 13.1977L8.3207 19.8025C8.19596 19.8682 8.06945 19.9175 7.94116 19.9502C7.81317 19.9832 7.68681 19.9998 7.56206 19.9998C7.18075 19.9998 6.84722 19.8699 6.56146 19.61C6.27569 19.3502 6.13281 19.0037 6.13281 18.5705ZM7.90223 17.9273L17.2598 11.9998L7.90223 6.07219V17.9273Z' fill='%23121619'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
    z-index: 100;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
    .ka-video-trigger-container a:hover::after { transform: translate(-50%, -50%) scale(1.1); }
}

@media (max-width: 1024px) {
    .ka-video-trigger-container a::after { width: 72px !important; height: 72px !important; background-size: 22px 22px !important; }
    .ka-tabs-grid { grid-template-columns: 1fr; gap: 32px; }
    .ka-video-wrapper { width: 100%; aspect-ratio: 16/9; height: auto; order: -1; margin-left: 0; }
    .ka-tabs-section { max-width: 100%; padding: 40px 20px; }
}

@media (max-width: 767px) {
    .ka-video-trigger-container a::after { width: 60px !important; height: 60px !important; background-size: 18px 18px !important; z-index: 999 !important; }
    .ka-tabs-section { padding: 40px 16px; }
}

/*
 * ==========================================================================
 * CONTEXTO: Estilos y UX Táctil - Carrusel de Video Móvil
 * AUTOR: Benjamín Brante (Arquitecto Frontend)
 * ESTRATEGIA TÉCNICA:
 * - Aceleración de Video Móvil: Aplicación de `transform: translateZ(0)` a las
 * máscaras de video para forzar el renderizado por hardware y evitar parpadeos 
 * de borde (border-radius glitch) en navegadores Webkit/iOS.
 * - UX/UI Táctil: Feedback inmediato anulando la latencia táctil natural de 
 * los navegadores móviles mediante estados `:active` e inversión de color de SVG.
 * - Limpieza de DOM: Eliminación directa (`display: none !important`) de los
 * fragmentos de UI intrusivos generados por el core de Salient.
 * ==========================================================================
 */

.ka-video-mobile-section {
    width: 100%;
    margin: 0 auto;
    padding: 24px 0 60px 0; 
    background: #ffffff;
    overflow: hidden;
    position: relative;
}

.ka-video-mobile-section .ka-video-mobile-swiper {
    padding-bottom: 60px; 
    position: relative;
    width: 100%;
}

.ka-video-mobile-section .ka-card-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.ka-video-mobile-section .ka-video-trigger {
    width: 100%;
    position: relative;
    margin-bottom: 12px;
}

.ka-video-mobile-section .ka-video-trigger a.ka-video-link,
.ka-video-mobile-section .ka-video-trigger a.ka-video-preview {
    display: block !important;
    position: relative !important;
    cursor: pointer;
    overflow: hidden;
    border-radius: 24px !important;
    
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    
    aspect-ratio: 343/430;
    width: 100%;
    height: auto;
    background-color: #000;
    text-decoration: none;
}

.ka-video-mobile-section .ka-video-trigger a.ka-video-preview video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    border: none;
    outline: none;
    background: #000;
    opacity: 0; 
    transition: opacity 0.3s ease;
}

.ka-video-mobile-section .ka-video-trigger a.ka-video-preview video.ka-loaded {
    opacity: 1; 
}

.ka-video-mobile-section .ka-video-trigger a.ka-video-link::after,
.ka-video-mobile-section .ka-video-trigger a.ka-video-preview::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    width: 88px; 
    height: 88px;
    background-color: #ffffff;
    border-radius: 50%;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.13281 18.5705V5.42901C6.13281 4.99579 6.27569 4.64928 6.56146 4.38947C6.84722 4.12966 7.18075 3.99976 7.56206 3.99976C7.68681 3.99976 7.81317 4.01627 7.94116 4.0493C8.06945 4.08203 8.19596 4.13128 8.3207 4.19704L18.6581 10.8019C18.8784 10.9561 19.0435 11.132 19.1535 11.3296C19.2635 11.5269 19.3185 11.7503 19.3185 11.9998C19.3185 12.2492 19.2635 12.4726 19.1535 12.6699C19.0435 12.8675 18.8784 13.0434 18.6581 13.1977L8.3207 19.8025C8.19596 19.8682 8.06945 19.9175 7.94116 19.9502C7.81317 19.9832 7.68681 19.9998 7.56206 19.9998C7.18075 19.9998 6.84722 19.8699 6.56146 19.61C6.27569 19.3502 6.13281 19.0037 6.13281 18.5705ZM7.90223 17.9273L17.2598 11.9998L7.90223 6.07219V17.9273Z' fill='%23121619'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
    z-index: 100;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 1 !important; 
    visibility: visible !important; 
    display: block !important;
}

@media (max-width: 1024px) {
    .ka-video-mobile-section .ka-video-trigger a.ka-video-link::after,
    .ka-video-mobile-section .ka-video-trigger a.ka-video-preview::after { 
        width: 72px !important; 
        height: 72px !important; 
        background-size: 22px 22px !important; 
    }
}

@media (max-width: 767px) {
    .ka-video-mobile-section .ka-video-trigger a.ka-video-link::after,
    .ka-video-mobile-section .ka-video-trigger a.ka-video-preview::after { 
        width: 60px !important; 
        height: 60px !important; 
        background-size: 18px 18px !important; 
        z-index: 999 !important; 
    }
    .ka-video-mobile-section .ka-video-trigger a.ka-video-preview:active video { 
        transform: scale(0.98); 
        opacity: 0.9;
    }
}

.ka-video-mobile-section .ka-video-trigger .play_button,
.ka-video-mobile-section .ka-video-trigger .nectar_video_lightbox_overlay, 
.ka-video-mobile-section .ka-video-trigger .circle { 
    display: none !important; 
}

.ka-video-mobile-section .ka-text-content {
    display: flex; flex-direction: column; gap: 0px; text-align: left;
}

.ka-video-mobile-section .ka-label {
    color: #4D5358;
    font-family: 'TCCC-UnityText', sans-serif;
    font-size: 12px; font-weight: 400; line-height: 16px;
    letter-spacing: 0.5px; text-transform: uppercase; margin: 0 0 2px 0; 
}

.ka-video-mobile-section .ka-name {
    color: #121619;
    font-family: 'TCCC-UnityText', sans-serif;
    font-size: 18px; font-weight: 600; line-height: 24px;
    margin: 0 0 4px 0; letter-spacing: -0.2px;
}

.ka-video-mobile-section .ka-description {
    color: #4D5358;
    font-family: 'TCCC-UnityText', sans-serif;
    font-size: 14px; font-weight: 400; line-height: 20px; margin: 0;
}

.ka-video-mobile-section .ka-mobile-controls {
    position: absolute; bottom: 0; left: 0; 
    width: 100%; height: 50px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; box-sizing: border-box; z-index: 20;
}

.ka-video-mobile-section .ka-mobile-pagination {
    position: static !important; width: auto !important;
    display: inline-flex !important; align-items: center; gap: 6px;
    background: #F0F2F5 !important; padding: 8px 14px !important;
    border-radius: 20px; margin-right: auto;
}

.ka-video-mobile-section .ka-mobile-pagination .swiper-pagination-bullet {
    width: 6px !important; height: 6px !important;
    background: rgba(48, 48, 48, 0.30) !important; opacity: 1 !important;
    border-radius: 999px !important; margin: 0 !important;
    position: relative; overflow: hidden; display: block; transition: all 0.3s ease;
}

.ka-video-mobile-section .ka-mobile-pagination .swiper-pagination-bullet-active {
    width: 28px !important; height: 6px !important; 
    border-radius: 3px; background: #30303033 !important;
}

.ka-video-mobile-section .ka-progress-fill {
    position: absolute; left: 0; top: 0; 
    height: 100%; width: 0%;
    background: #ffffff !important; border-radius: 3px;
}

.ka-video-mobile-section .ka-progress-fill.ka-animating {
    animation: fillProgress 6s linear forwards;
}

.ka-video-mobile-section .ka-mobile-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) .ka-progress-fill {
    width: 0% !important; animation: none !important;
}

@keyframes fillProgress { 
    from { width: 0%; } 
    to { width: 100%; } 
}

.ka-video-mobile-section .ka-nav-btn {
    position: static !important; 
    width: 44px; height: 44px;
    border: 1.5px solid #121619; 
    border-radius: 50%;
    background: transparent; 
    display: flex !important;
    align-items: center; justify-content: center; 
    cursor: pointer;
    transition: all 0.15s ease; 
    margin: 0 !important; padding: 0;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0.3);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.ka-video-mobile-section .ka-nav-prev { margin-right: 8px !important; margin-left: 12px !important; }
.ka-video-mobile-section .ka-nav-next { margin-left: 0 !important; }

.ka-video-mobile-section .ka-nav-btn svg {
    width: 20px; height: 20px; 
    stroke: #121619; 
    stroke-width: 2; 
    fill: none; 
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 0.15s ease;
    pointer-events: none;
}

.ka-video-mobile-section .ka-nav-btn.ka-pressed,
.ka-video-mobile-section .ka-nav-btn:active { 
    background: #121619 !important; 
    border-color: #121619 !important;
    transform: scale(0.92); 
}

.ka-video-mobile-section .ka-nav-btn.ka-pressed svg,
.ka-video-mobile-section .ka-nav-btn:active svg { 
    stroke: #ffffff !important; 
}

@media (hover: hover) {
    .ka-video-mobile-section .ka-nav-btn:hover {
        background: rgba(18, 22, 25, 0.05);
    }
    .ka-video-mobile-section .ka-nav-btn.ka-pressed,
    .ka-video-mobile-section .ka-nav-btn:active {
        background: #121619 !important;
        border-color: #121619 !important;
    }
}

.ka-video-mobile-section .ka-nav-btn::after { display: none !important; }