.elementor-kit-6{--e-global-color-primary:#12F6FF;--e-global-color-secondary:#008BFF;--e-global-color-text:#FBFBFB;--e-global-color-accent:#23262A;--e-global-color-f2eb8f9:#15171A;--e-global-color-0f99483:#23262A;--e-global-color-8ae9ba8:#FBFBFB;--e-global-color-b4ac168:#777777;--e-global-color-8e87a6e:#5C6672;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:1em;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.1px;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Manrope", Sans-serif;font-size:1.1em;font-weight:400;line-height:1.6em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{font-family:"Manrope", Sans-serif;}.elementor-kit-6 h1{font-family:"DM Sans", Sans-serif;font-size:4.2rem;font-weight:400;line-height:1.1em;letter-spacing:-0.1px;}.elementor-kit-6 h2{font-family:"DM Sans", Sans-serif;font-size:2.4rem;font-weight:500;line-height:1em;letter-spacing:-0.1px;}.elementor-kit-6 h3{font-family:"DM Sans", Sans-serif;font-size:1.3rem;font-weight:500;line-height:1.3em;letter-spacing:-0.1em;}.elementor-kit-6 h4{font-family:"DM Sans", Sans-serif;}.elementor-kit-6 h5{font-family:"DM Sans", Sans-serif;}.elementor-kit-6 h6{font-family:"DM Sans", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end: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 */.elementor-element-c2eb6d4,
.elementor-element-481f3af {
  position: relative;
  vertical-align: top;
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
  z-index: 10;
}

/* Children start hidden for animation */
.elementor-element-c2eb6d4 > *,
.elementor-element-481f3af > * {
  opacity: 0;
  transform: translateY(10px);
}

/* ✅ Make containers visible inside Elementor editor */
body.elementor-editor-active .elementor-element-c2eb6d4,
body.elementor-editor-active .elementor-element-481f3af {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* Show children fully for editing too */
body.elementor-editor-active .elementor-element-c2eb6d4 > *,
body.elementor-editor-active .elementor-element-481f3af > * {
  opacity: 1 !important;
  transform: none !important;
}

.smooth-carousel .swiper-wrapper {
  transition-timing-function: linear !important;
}

.smooth-carousel .swiper {
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}

.smooth-carousel .swiper-slide {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
}

/* Asegura que el contenedor principal de la caja de íconos SÓLO para 'scrollable-text-box' fluya de izquierda a derecha */
.scrollable-text-box.elementor-icon-box-wrapper {
    direction: ltr !important;      /* Fuerza la dirección general LTR */
    display: flex !important;       /* Asegura que funcione como contenedor flex */
    flex-direction: row !important; /* Organiza los ítems horizontalmente, de izquierda a derecha */
    justify-content: flex-start !important; /* Alinea el contenido al inicio (izquierda) */
    align-items: flex-start !important; /* Alinea los ítems al inicio (arriba) */
}

/* Prevent clipping inside each slide */
.swiper-slide {
  overflow: visible !important;
  position: relative;
  z-index: 0;
}

.elementor-tabs-wrapper {
        display: flex; /* Essential for tab buttons to lay out horizontally */
        margin-bottom: 10px; /* Adjust spacing below tab buttons */
        /* If Elementor provides a border-bottom, you can remove this */
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 5px;
    }

    /* Styles for individual tab titles */
    .e-n-tab-title {
        cursor: pointer; /* Indicates interactivity */
        position: relative; /* Essential for positioning the ::after arrow */
        overflow: hidden; /* Ensures the arrow pseudo-element doesn't visibly protrude too much */
        /*
         * Properties like padding, background-color, font-family, color, border-radius
         * are assumed to be handled by your Elementor tab design.
         * GSAP will animate scale, background, and color on hover/active states.
         */
    }

    /* Arrow shape for the active tab title's border */
    .e-n-tab-title.e-active::after {
        content: '';
        position: absolute;
        bottom: -10px; /* Positions the arrow below the tab */
        left: 50%;
        transform: translateX(-50%) rotate(45deg); /* Rotates a square into a diamond/arrow shape */
        width: 20px; /* Size of the arrow base */
        height: 20px; /* Size of the arrow height */
        background-color: #007bff; /* This should match your active tab's background color */
        border-radius: 4px; /* Optional: adds slight rounding to the diamond */
        z-index: 1; /* Ensures the arrow is visually on top */
    }

    /* Base layout for inner containers: make containers responsive */
    .tabs-js .contenedor {
        flex: 1 1 25%; /* CRITICAL: Initial flex basis for GSAP to animate width */
        overflow: hidden; /* CRITICAL: Important for background-size animation and content clipping */
        /*
         * Properties like height, display: flex, align-items, justify-content,
         * text-align, box-sizing, border, border-radius, margin, background-color, font-family,
         * color, font-weight, font-size are assumed to be handled by your Elementor design.
         *
         * If your containers don't center content or have a fixed height, consider adding:
         * display: flex;
         * align-items: center;
         * justify-content: center;
         * height: 200px; /* Example fixed height for consistent visual behavior during flex changes */
         */
    }

    /* Initial state for inner containers before reveal animation (CRITICAL for GSAP fromTo) */
    .tabs-js .contenedor.hidden-for-reveal {
        opacity: 0;
    }

    /* Elementor's tab content control: display and initial opacity for GSAP */
    .e-n-tab-content {
        display: none; /* Elementor or JS controls this for showing/hiding tabs */
        opacity: 0; /* CRITICAL: Initial state for GSAP fade-in */
    }

    .e-n-tab-content.e-active {
        display: block; /* CRITICAL: Elementor or JS makes this block when active for GSAP to animate */
    }

    /* Your original inactive style. GSAP primarily handles the 'flex' animation for this. */
    .tabs-js .contenedor.inactive {
        opacity: 0.5; /* This can remain as a visual cue when other containers are active */
    }
    
    /* Custom CSS for GSAP Blur Reveal Animation */
.gsap-blur-reveal {
    /* Initial state when off-screen or not actively animating */
    opacity: 0;
    filter: blur(10px); /* Start with blur */
    transform: translateY(50px); /* Start slightly below its final position */
    will-change: opacity, filter, transform; /* Performance optimization hint for browsers */
    /* Ensure no default Elementor transitions interfere with GSAP */
    transition: none !important;
}/* End custom CSS */