/* ==========================================================================
   Efecto: Webflow Reveal (Clase: .titulo-webflow)
   ========================================================================== */

/* La máscara para cada palabra */
.titulo-webflow .mask-word {
    display: inline-flex; 
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.15em; 
    margin-bottom: -0.15em; 
}

/* El texto inicial (oculto abajo) */
.titulo-webflow .text-word {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: opacity 0.1s ease; /* Previene parpadeos antes de la animación */
}

/* La clase que activa la animación cuando el elemento es visible en pantalla */
.titulo-webflow.is-visible .text-word {
    animation: ldRevealUpWord 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Keyframes */
@keyframes ldRevealUpWord {
    0% {
        transform: translateY(110%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   Efecto: Carrusel Infinito (Clase: .carrusel-infinito)
   ========================================================================== */

/* Fuerza una transición lineal constante sin frenazos */
.carrusel-infinito .swiper-wrapper {
    transition-timing-function: linear !important;
    -webkit-transition-timing-function: linear !important;
}

/* --- Efecto Premium para Logos de Agencias --- */

/* 1. Logos en gris y ligeramente transparentes por defecto */
.carrusel-infinito .swiper-slide img {
    filter: grayscale(100%) opacity(70%);
    transition: all 0.4s ease;
    cursor: pointer;
}

/* 2. Recuperan su color y opacidad al pasar el ratón */
.carrusel-infinito .swiper-slide:hover img {
    filter: grayscale(0%) opacity(100%);
}

/* ==========================================================================
   Efecto: Fade In con Zoom Interno (Clase: .imagen-reveal)
   ========================================================================== */

/* 1. Ocultamos lo que sobresalga para que el zoom inicial no agrande el widget */
.imagen-reveal {
    overflow: hidden !important; 
    position: relative;
}

/* 2. Estado inicial de la imagen */
.imagen-reveal img {
    opacity: 0;
    will-change: transform, opacity;
    display: block;
    width: 100%;
}

/* 3. Animación cuando el JS detecta el elemento (.is-visible) */
.imagen-reveal.is-visible img {
    /* Mantenemos la curva bezier para que sea fluido como en Webflow */
    animation: ldFadeZoomOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 4. Los Keyframes con el Fade In y el Zoom Out */
@keyframes ldFadeZoomOut {
    0% {
        opacity: 0;
        transform: scale(1.15); /* La imagen empieza un 15% más grande */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Vuelve a su tamaño normal */
    }
}