/* ============================================================
   SMARTLEASE — SECCIÓN: NUESTRA FLOTA
   ============================================================
   Contiene el carrusel horizontal de tarjetas de unidades.
   Los títulos de sección (.section-title-banner) están
   definidos en navigation.css — no se repiten aquí.
   Los botones (.btn-card-red) están en components.css.
   Orden de carga: 5°
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   BLOQUE: CONTENEDOR GENERAL DE LA SECCIÓN FLOTA
   ══════════════════════════════════════════════════════════ */

.section-flota {
    background-color: #f9f9f9;
    width: 100%;
    padding-bottom: 20px;
    margin: 0;
    overflow: hidden; /* Evita que las flechas generen scroll horizontal */
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: CARRUSEL (contenedor con espacio para las flechas)
   ══════════════════════════════════════════════════════════ */

.carousel-wrapper {
    position: relative;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 60px; /* Este espacio lateral es la zona de las flechas */
}

/* Fila horizontal de tarjetas con scroll */
.fleet-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 30px 5px;
    scrollbar-width: none;          /* Oculta scrollbar en Firefox */
    scroll-snap-type: x mandatory;  /* El scroll se "encaja" en cada tarjeta */
}

/* Oculta scrollbar en Chrome y Safari */
.fleet-grid::-webkit-scrollbar { display: none; }


/* ══════════════════════════════════════════════════════════
   BLOQUE: TARJETA INDIVIDUAL DE UNIDAD
   ══════════════════════════════════════════════════════════ */

.unit-card {
    /* En desktop: 3 tarjetas visibles al mismo tiempo */
    flex: 0 0 calc(33.333% - 17px);
    scroll-snap-align: start;
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    border: 1px solid #eee;
    /* FIX: min-height fijo causaba que las tarjetas ocuparan toda la pantalla.
       Usamos min-height más conservador y dejamos que el contenido defina la altura. */
    min-height: 420px;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.4s ease;
}

/* Hover: solo en dispositivos con mouse (no táctiles) */
@media (hover: hover) {
    .unit-card:hover {
        transform: translateY(-12px);
        box-shadow: var(--shadow-strong);
    }
}

/* ── Imagen de la unidad ── */
.unit-card img {
    width: 100%;
    height: 180px;
    object-fit: contain; /* Muestra el vehículo completo sin recortar */
    margin-bottom: 15px;
}

/* ── Título de tonelaje (ej: "7 Toneladas") ── */
.unit-card h3 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 1.4rem;
    text-align: center;
}

/* ── Descripción breve de la unidad ── */
.unit-card p {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
    text-align: center;
}

/* ── Lista de especificaciones técnicas ── */
.unit-specs {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    flex: 1; /* Ocupa el espacio disponible para empujar el botón abajo */
}

.unit-specs li {
    font-size: 0.8rem;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
    color: var(--dark);
    text-align: center;
}

/* El botón "Cotizar Unidad" se pega al fondo de la card */
.unit-card .btn-card-red { margin-top: auto; }


/* ══════════════════════════════════════════════════════════
   BLOQUE: FLECHAS DE NAVEGACIÓN DEL CARRUSEL
   ══════════════════════════════════════════════════════════ */

.nav-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 15px rgba(221, 10, 20, 0.4);
    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.nav-btn:hover {
    background: var(--dark);
    transform: translateY(-50%) scale(1.1);
}

.nav-btn svg {
    width: 25px;
    fill: var(--white);
}

/* Posición de la flecha izquierda */
.prev { left: 5px; }

/* Posición de la flecha derecha */
.next { right: 5px; }


/* ══════════════════════════════════════════════════════════
   BLOQUE: RESPONSIVE DE LA SECCIÓN FLOTA
   ══════════════════════════════════════════════════════════ */

/* Tablets (769px – 1024px): 2 tarjetas visibles */
@media (min-width: 769px) and (max-width: 1024px) {
    .unit-card        { flex: 0 0 calc(50% - 13px); }
    .carousel-wrapper { padding: 0 50px; }
}

/* Desktop grande: reducir padding de la sección para que el título sea visible */
@media (min-width: 1025px) {
    .section-flota    { padding-bottom: 10px; }
    .fleet-grid       { padding: 20px 5px; }
    .unit-card img    { height: 150px; }
}

/* Móvil: 1 tarjeta visible, sin flechas (se usa el dedo) */
@media (max-width: 768px) {
    .unit-card        { flex: 0 0 85%; min-height: 380px; }
    .nav-btn          { display: none; }
    .carousel-wrapper { padding: 0 20px; }
}