/* style.css */
html {
    scroll-behavior: smooth;
}

/* --- GENERAL --- */
.fade-out {
    opacity: 0;
    transform: translateY(10px);
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* --- HERO SWIPER --- */
.heroSwiper {
    width: 100%;
    height: 100%;
    padding-bottom: 1rem;
}

.swiper-pagination-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.swiper-pagination-custom .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: transparent;
    border: 2px solid #8e9dae;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 !important;
}

.swiper-pagination-custom .swiper-pagination-bullet-active {
    background-color: #5a6b7c;
    border-color: #5a6b7c;
}


/* --- CARRUSEL DE CAPACIDADES (NUEVO: OVERFLOW VISIBLE) --- */

/* Permitimos que lo que sobra del contenedor (las tarjetas peeking) se vea */
.featuresSwiper {
    overflow: visible !important;
}

/* Estado base para TODAS las tarjetas (Peeking / Inactivas) */
.featuresSwiper .swiper-slide {
    height: auto;
    transition: all 0.5s ease-in-out;
    opacity: 0.25;
    /* Transparentes a los lados */
    transform: scale(0.85);
    /* Más pequeñas a los lados */
    box-shadow: none;
    z-index: 1;
}

/* Lógica Desktop: Las 2 tarjetas que están DENTRO del contenedor visible */
@media (min-width: 1024px) {

    .featuresSwiper .swiper-slide-active,
    .featuresSwiper .swiper-slide-next {
        opacity: 1;
        /* Totalmente visibles */
        transform: scale(1);
        /* Tamaño real ancho */
        z-index: 10;
        box-shadow: 0 25px 50px -12px rgba(0, 78, 122, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
}

/* Lógica Tablet y Móvil */
@media (min-width: 768px) and (max-width: 1023px) {

    .featuresSwiper .swiper-slide-active,
    .featuresSwiper .swiper-slide-next {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 767px) {
    .featuresSwiper .swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bolitas centradas (Paginación) */
.feat-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: transparent;
    border: 2px solid #8e9dae;
    border-radius: 50%;
    opacity: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 !important;
}

.feat-pagination .swiper-pagination-bullet-active {
    background-color: #007cc0;
    border-color: #007cc0;
}


/* Ajustes para el nuevo footer claro */
footer h4 {
    /* Color azul de la landing para títulos */
    color: #007cc0 !important;
}

footer strong {
    /* Color azul de la landing para etiquetas */
    color: #007cc0 !important;
}

/* Ajustes para el texto general si es necesario, 
   pero Tailwind ya debería manejarlo con las clases añadidas */
footer p,
footer span,
footer a {
    /* Aseguramos que no se pierda el color text-brand-textMain */
    /* El color gris oscuro de Maplin */
}

/* style.css */

/* --- TIRA ANIMADA DE CLIENTES (TICKER) --- */
.ticker-wrapper {
    display: flex;
    width: max-content;
    /* Reduje el tiempo un poco para compensar que ahora es más ancho */
    animation: ticker 10s linear infinite;
}

.ticker-wrapper:hover {
    animation-play-state: paused;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Como hay 4 pistas, al movernos un -25% se completa el ciclo exacto de 1 pista */
        transform: translateX(-25%);
    }
}

/* style.css */

/* ================================================== */
/* ANIMACIONES DIRECCIONALES SECCIÓN PRODUCTOS */
/* ================================================== */

/* Animación del Texto (Entra de Izquierda a Derecha) */
.text-enter-left {
    animation: slideInLeft 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.text-exit-right {
    animation: slideOutRight 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* Animaciones de la Imagen (Carrusel Vertical) */
.img-enter-up {
    animation: slideInUp 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.img-enter-down {
    animation: slideInDown 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.img-exit-up {
    animation: slideOutUp 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.img-exit-down {
    animation: slideOutDown 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Entrar subiendo (cuando clickeas un item abajo) */
@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Entrar bajando (cuando clickeas un item arriba) */
@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Salir subiendo */
@keyframes slideOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-60px);
    }
}

/* Salir bajando */
@keyframes slideOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(60px);
    }
}

/* --- CURSOR PERSONALIZADO (PARTÍCULA AZUL) --- */
/* Solo se aplica en dispositivos que usan ratón (computadoras) */
@media (pointer: fine) {

    /* Ocultamos el cursor del sistema en todo */
    * {
        cursor: none !important;
    }

    /* Estilo de nuestra partícula */
    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        background-color: #007cc0;
        /* Azul de FleetWay */
        border-radius: 50%;
        pointer-events: none;
        /* Para que puedas hacer clic a través de ella */
        z-index: 999999;
        transform: translate(-50%, -50%);
        transition: width 0.2s, height 0.2s, background-color 0.2s, opacity 0.2s;
        will-change: transform;
        box-shadow: 0 0 10px rgba(0, 124, 192, 0.5);
        /* Ligero resplandor */
    }

    /* Efecto cuando pasas el cursor por un botón o enlace */
    .custom-cursor.hovering {
        width: 40px;
        height: 40px;
        background-color: transparent;
        border: 2px solid #007cc0;
        opacity: 0.8;
    }
}

/* En móviles, la partícula desaparece */
@media (pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
}

/* ================================================== */
/* ANIMACIONES FLUIDAS DE SCROLL (FADE UP) */
/* ================================================== */

/* Estado inicial del elemento (Oculto y desplazado hacia abajo) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* Estado activo (Visible y en su posición original) */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Clases de retraso para efecto "cascada" en tarjetas/columnas */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* ================================================== */
/* ANIMACIONES FLUIDAS ( BLOBS DE FONDO ) */
/* ================================================== */

/* Animación de destellos de luz (Blobs) */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite alternate; /* 'alternate' hace que el movimiento sea fluido */
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* ================================================== */
/* INDICADOR DEL MENÚ DE PRODUCTOS (EFECTO REBOTE) */
/* ================================================== */

.indicator-bounce {
    /* La magia del rebote ocurre en la curva cubic-bezier.
       Los dos últimos números (0.265, 1.55) hacen que el elemento 
       se "pase" del 100% de su destino y luego regrese.
    */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}