/* Variables basadas en Nueva Alianza Logist */
:root {
    --primary-dark: #0a1f33;
    --primary-light: #009bd9;
    --accent-red: #ce1126;
}

/* Utilidad para espaciado vertical mayor */
.py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mb-6 {
    margin-bottom: 5rem;
}

/* Efecto de elevación en tarjetas */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

/* Animación de entrada suave */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

/* --- 1. Animación Marquee (Carrusel Infinito) --- */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-content {
    display: inline-block;
    animation: scrollLeft 20s linear infinite;
    /* 20s es la velocidad */
}

@keyframes scrollLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

    /* Se mueve medio bloque (porque duplicamos el contenido) */
}

/* Pausar si pasas el mouse por encima */
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}


/* --- 2. Scroll Reveal (Aparición al bajar) --- */
/* Estado inicial: invisible y un poco más abajo */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* Estado final: visible y en su lugar */
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- 3. Efecto Botón "Latido" y Escala --- */
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* --- ESTILOS MÓDULO DE FLOTA (NUEVO) --- */

/* Tarjetas con efecto de elevación suave */
.fleet-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
}

.fleet-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--primary-light);
}

/* Etiquetas de categorías activas (Tabs) */
.filter-btn.active {
    background-color: var(--primary-dark);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Animación del Modal (Fondo) */
.modal-backdrop-custom {
    background-color: rgba(10, 31, 51, 0.85);
    /* Azul oscuro corporativo */
    backdrop-filter: blur(4px);
    z-index: 1050;
    /* Por encima del navbar */
}

/* Animación del Modal (Contenido) */
.modal-content-custom {
    animation: modalSlideUp 0.3s ease-out forwards;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ajuste para contenedor de scroll horizontal en móviles */
.scroll-h-container {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

[x-cloak] { display: none !important; }

.modal-backdrop-custom {
  display: flex;
}