/* Estilos adicionales para un acabado premium */
        .gradient-text {
            background: linear-gradient(90deg, #142ac4, #3a50d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        .btn-primary {
            @apply bg-owl-orange text-white font-bold py-3 px-8 rounded-lg shadow-lg shadow-owl-orange/30 transform hover:-translate-y-1 transition-all duration-300 ease-in-out;
        }
        .btn-secondary {
            @apply bg-transparent border-2 border-owl-blue text-owl-blue font-semibold py-3 px-8 rounded-lg hover:bg-owl-blue hover:text-white transition-all duration-300;
        }
        .btn-whatsapp {
            @apply bg-green-500 text-white font-bold py-3 px-8 rounded-lg shadow-lg shadow-green-500/30 transform hover:-translate-y-1 transition-all duration-300 ease-in-out;
        }
        .section-title {
            @apply text-5xl md:text-6xl font-extrabold text-owl-dark;
        }
        .section-subtitle {
            @apply text-xl text-owl-blue max-w-3xl mx-auto font-medium;
        }

        /*
    ================================================================
    NUEVA ANIMACIÓN DE "PULSO INVERTIDO" PARA BOTONES
    ================================================================
*/

html, body {
    width: 100%;
    overflow-x: hidden;
}

/* Define la animación para el botón naranja */
@keyframes pulse-invert-orange {
    50% {
        background-color: #ffffff; /* Fondo se vuelve blanco */
        color: #E6542D;           /* Texto se vuelve naranja */
        transform: scale(1.05);
    }
}

/* Define la animación para el botón de WhatsApp (verde) */
@keyframes pulse-invert-green {
    50% {
        background-color: #ffffff; /* Fondo se vuelve blanco */
        color: #22c55e;           /* Texto se vuelve verde (usando el verde de Tailwind) */
        transform: scale(1.05);
    }
}

/* Clases para aplicar la animación */
.btn-pulse-invert-orange {
    animation: pulse-invert-orange 2.5s infinite;
}
.btn-pulse-invert-green {
    animation: pulse-invert-green 2.5s infinite;
}



    /* Contenedor principal del carrusel */
    .logo-slider {
        overflow: hidden; /* Oculta el contenido que se sale del contenedor */
        position: relative;
        width: 100%;
        padding: 2rem 0; /* Espacio vertical para que los logos respiren */
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    }

    /* Pista que contiene todos los logos (originales y duplicados) */
    .logo-track {
        display: flex;
        width: calc(250px * 40); /* Ancho de cada logo x número total de logos */
        animation: scroll 40s linear infinite; /* La animación que crea el movimiento */
    }

    /* Estilo de cada logo individual */
    .slide {
        width: 250px; /* Ancho fijo para cada logo */
        padding: 0 40px; /* Espacio entre logos */
        flex-shrink: 0;
    }

    .slide img {
        width: 100%;
        height: auto;
        filter: grayscale(100%); /* Los hace en escala de grises */
        opacity: 0.7;
        transition: all 0.3s ease;
    }

    .slide img:hover {
        filter: grayscale(0%); /* Les devuelve el color al pasar el mouse */
        opacity: 1;
        transform: scale(1.1); /* Efecto de zoom sutil */
    }

    /* Animación de scroll horizontal */
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-250px * 20)); /* Desplaza la mitad del track (la parte de los logos originales) */
        }
    }

    /* Estilos del encabezado de la sección (copiados para mantener la consistencia) */
    .section-heading {
        @apply text-center mb-0; /* Reducimos el margen inferior para compensar el padding del slider */
    }
   /* .section-title {
        @apply text-4xl md:text-5xl font-extrabold text-owl-dark tracking-tight relative inline-block pb-4;
    }
  
    .section-subtitle {
        @apply text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mt-6;
    }*/
/* --- Estilos para el Carrusel de Testimonios (Swiper) --- */
.swiper-button-next,
.swiper-button-prev {
    color: #142ac4 !important; /* Color azul de la marca */
    transform: scale(0.8);
}

.swiper-pagination-bullet-active {
    background-color: #142ac4 !important; /* Color azul de la marca */
}

/*
================================================================
NUEVAS ANIMACIONES PARA LA SECCIÓN HERO
================================================================
*/

/* 1. Animación de "latido" para la palabra clave */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.word-heartbeat {
    display: inline-block; /* Necesario para que la transformación funcione correctamente */
    animation: heartbeat 2.5s ease-in-out infinite;
    animation-delay: 1s; /* Retraso para que empiece después de la carga */
}


/* 2. Animación de rotación 3D para la imagen */
@keyframes rotate-in {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-45deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
}

.image-rotate-in {
    animation: rotate-in 1.2s ease-out forwards;
    animation-delay: 0.5s; /* Retraso para que empiece un poco después */
}