/* ==========================================================================
   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%);
}