/* =========================================
   0. CONFIGURACIÓN GLOBAL (Pegar al inicio)
   ========================================= */

body {
    font-family: 'Poppins', sans-serif; /* Fuente limpia para párrafos */
    background-color: var(--bx-dark-depth);   /* Fondo base negro */
    color: var(--bx-text-muted);        /* Texto gris claro por defecto */
    overflow-x: hidden;                 /* Evita scroll horizontal por animaciones */
    -webkit-font-smoothing: antialiased; /* Suavizado de fuente premium */
}

/*WEA PARA QUE FUNCIONE EL SCROLL ANIMATION DEL CARRO*/
body, html {
    overflow-x: hidden;
    width: 100%;
}

/* WRAPPER DEL CARRO EN EL HERO */
.hero-car-wrapper {
    position: relative;
    display: inline-block;
    padding: 20px;
    z-index: 1;
}

/* LA FORMA ROJA/NEÓN DETRÁS DEL CARRO */
.car-backdrop-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(-20deg); /* Inclinación "racing" */
    width: 120%;
    height: 80%;
    background: linear-gradient(135deg, rgba(255, 31, 46, 0.2) 0%, rgba(255, 31, 46, 0.05) 100%);
    border: 1px solid rgba(255, 31, 46, 0.3);
    border-radius: 10px;
    z-index: -1;
    box-shadow: 0 0 30px rgba(255, 31, 46, 0.15); /* Resplandor */
    transition: all 0.5s ease;
}

/* Animación sutil de la forma de fondo */
.hero-car-wrapper:hover .car-backdrop-shape {
    transform: translate(-50%, -50%) skewX(-10deg) scale(1.05);
    background: linear-gradient(135deg, rgba(255, 31, 46, 0.4) 0%, rgba(255, 31, 46, 0.1) 100%);
    box-shadow: 0 0 50px rgba(255, 31, 46, 0.4);
}

/* La imagen estática (solo visible al cargar o si no hay JS) */
.hero-static-car {
    max-width: 100%;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5));
    transition: opacity 0.5s;
}

/* Clase para ocultar el carro estático cuando el carro animado toma su lugar */
.hero-static-car.hidden {
    opacity: 0;
}



/* Títulos: Usamos Montserrat para ese look industrial/automotriz */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--bx-white); /* Blancos por defecto para contrastar */
    font-weight: 700;
    letter-spacing: -0.5px; /* Las letras un poco más juntas se ven más modernas */
    margin-bottom: 1rem;
}

/* Asegurar que los párrafos se lean bien sobre fondo oscuro */
p {
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* =========================================
   1. HERO SECTION (Estilo Cyber-Automotive)
   ========================================= */
.hero-banner {
    position: relative;
    /* Degradado profundo: Del rojo muy oscuro al negro marca */
    background: radial-gradient(circle at 75% 30%, #2a0a0d 0%, var(--bx-dark) 70%);
    min-height: 20%; /* Altura considerable */
    padding: 160px 0 180px; /* Espacio para header flotante y corte inferior */
    margin-top: -100px; /* Sube detrás del navbar */
    overflow: hidden;
    color: var(--bx-white);
    
    /* El corte diagonal agresivo que tenías antes */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    z-index: 1;
}

/* Mancha de luz roja de fondo */
.hero-bg-shape {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: var(--bx-brand); /* Rojo Neón */
    opacity: 0.1; 
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
    animation: pulseGlow 5s infinite alternate;
}

@keyframes pulseGlow {
    from { opacity: 0.08; transform: scale(1); }
    to { opacity: 0.15; transform: scale(1.1); }
}

/* Tipografía Hero */
.modern-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.1;
    position: relative;
    z-index: 2;
}

.modern-title .accent {
    color: var(--bx-brand);
    font-style: italic;
    text-shadow: 0 0 20px rgba(255, 31, 46, 0.4); /* Glow rojo */
}

/* Badge del #1 (Estilo militar/técnico) */
.badge.bg-warning {
    background-color: var(--bx-yellow) !important;
    color: var(--bx-dark) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    box-shadow: 0 0 15px rgba(255, 214, 0, 0.3);
}

/* Imagen del auto flotante */
.hero-img-container {
    position: relative;
    z-index: 2;
    /* Filtro sutil para integrar el auto en el ambiente oscuro */
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
    animation: floatCar 6s ease-in-out infinite;
}

@keyframes floatCar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Botones Hero */
.btn-warning {
    background-color: var(--bx-yellow) !important;
    border: none;
    color: var(--bx-dark) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-warning:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 214, 0, 0.4);
}

.btn-outline-light:hover {
    background-color: var(--bx-white);
    color: var(--bx-brand); /* Texto rojo al hover */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}


/* =========================================
   2. BENEFIT CARDS (Flotando sobre el corte)
   ========================================= */
/* Ajuste del contenedor principal de beneficios */


.category-img-wrapper {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
}

/* Estilo para los SVGs */
.category-icon {
    width: 100px;
    height: 100px;
    stroke: #333333; /* Color negro base */
    transition: stroke 0.3s ease;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    /* Fondo oscuro sólido pero suave (Surface) */
    background: #202328; 
    border-radius: 8px;
    /* Borde muy sutil */
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4); /* Sombra fuerte para dar altura */
    transition: all 0.3s ease;
    height: 100%;
}

.benefit-item:hover {
    transform: translateY(-8px);
    border-color: var(--bx-brand); /* Borde rojo al hover */
    background: #252930;
}

.benefit-icon {
    width: 60px; height: 60px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--bx-yellow); /* Icono amarillo por defecto */
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.benefit-item:hover .benefit-icon {
    background: var(--bx-brand); /* Fondo rojo al hover */
    color: var(--bx-white);
    box-shadow: 0 0 15px rgba(255, 31, 46, 0.5);
}

/* Móvil primero */
.custom-mt-mobile {
    margin-top: -100px !important;
}

/* Escritorio: Lo regresas a su posición original o a la que tenías antes (-80px) */
@media (max-width: 720px) {
    .custom-mt-mobile {
        margin-top: -200px !important;
    }
}

/* =========================================
   3. CATEGORÍAS (Grid Moderno)
   ========================================= */
.section-subtitle {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--bx-brand); /* Rojo */
    border-left: 4px solid var(--bx-yellow); /* Acento amarillo */
    padding-left: 15px;
    margin-bottom: 10px;
}

.category-card {
    display: block;
    text-decoration: none;
    background: #202328; /* Surface Dark */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* Línea superior decorativa */
.category-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(255,255,255,0.1);
    transition: 0.3s;
    z-index: 5;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    border-color: rgba(255, 31, 46, 0.3);
}

.category-card:hover::before {
    background: var(--bx-brand); /* Línea roja al hover */
    box-shadow: 0 0 10px var(--bx-brand);
}

.category-img-wrapper {
    height: 160px;
    background: radial-gradient(circle, #2a2e35 0%, #1a1d21 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Iconos de categoría */
.category-img-wrapper img {
    width: 70px;
    filter: brightness(0) invert(1) opacity(0.7); /* Blancos y sutiles */
    transition: 0.4s;
}

.category-card:hover .category-img-wrapper img {
    transform: scale(1.2);
    filter: brightness(0) invert(1) opacity(1); /* Blancos brillantes */
}


/* =========================================
   4. PARALLAX SECTION (Separador)
   ========================================= */
.parallax-section {
    position: relative;
    /* Imagen oscura de fondo */
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0.95)),
                url('https://i.ibb.co/Wpn52Rhj/index-parallax.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    margin: 80px 0;
    /* Cortes diagonales arriba y abajo */
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}


/* =========================================
   5. PRODUCTOS (Catálogo)
   ========================================= */
#catalogo {
    padding-bottom: 50px;
}

/* =========================================
   4. TARJETAS DE PRODUCTO (REDISEÑO PRO)
   ========================================= */

.modern-card {
    background: #1a1d21; /* Gris un poco más claro que el fondo */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Efecto Hover: Sube y brilla */
.modern-card:hover {
    transform: translateY(-5px);
    border-color: var(--bx-brand); /* Borde rojo al hover */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Contenedor de imagen (Fondo blanco para repuestos) */
.card-img-wrapper {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    height: 160px; /* Altura estándar */
    position: relative;
    overflow: hidden;
}

.card-img-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

/* Zoom suave en la imagen al pasar mouse */
.modern-card:hover .card-img-wrapper img {
    transform: scale(1.1);
}

/* Tipografía del Producto */
.product-title {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.2;
}

.text-brand {
    color: var(--bx-yellow); /* Precio en amarillo resalta más */
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.15);
}

/* Botón Ver Detalle */
.btn-full {
    width: 100%;
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 8px 0;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    transition: 0.3s;
}

.btn-full:hover {
    background: var(--bx-brand);
    border-color: var(--bx-brand);
    color: white;
}

/* =========================================
   RESPONSIVO (AJUSTES PARA MÓVIL 2 COLUMNAS)
   ========================================= */
@media (max-width: 576px) {
    /* Reducir altura de imagen en móvil */
    .card-img-wrapper {
        height: 130px; 
        padding: 5px;
    }

    /* Texto más pequeño para que quepa en col-6 */
    .product-title {
        font-size: 0.85rem; 
    }

    .product-price {
        font-size: 1rem !important; /* Precio sigue siendo importante */
        margin-bottom: 0.5rem !important;
    }
    
    /* Ajuste de badges */
    .badge {
        font-size: 0.55rem !important;
        padding: 3px 5px !important;
    }
    
    /* Botón más compacto */
    .btn-full {
        padding: 5px 0;
        font-size: 0.75rem;
    }

}



/* =========================================
   6. MARCAS (Slider Infinito: Espaciado Uniforme)
   ========================================= */

.brands-slider {
    /* Padding vertical generoso para que el HOVER (zoom) no se corte */
    margin-top: 0 !important;
    height: 190px; 
    min-height: 190px;
    padding: 60px 0; 
    overflow: hidden; 
    background: transparent;
    contain: strict;
}

.brands-track {
    display: flex;
    align-items: center;
    width: max-content; 
    
    /* CAMBIO CLAVE: Usamos gap para la separación */
    /* Esto garantiza que haya X distancia exacta entre el final de una imagen y el inicio de otra */
    gap: 80px; 
    
    animation: scrollBrands 80s linear infinite;
}

/* Pausar al pasar el mouse */
.brands-track:hover {
    animation-play-state: paused;
}

.brand-item {
    /* CAMBIO CLAVE: Ancho automático */
    /* La caja medirá exactamente lo que mida la imagen, ni más ni menos */
    width: auto; 
    padding: 0; /* Quitamos padding lateral, usamos el gap de arriba */
    
    display: flex;
    align-items: center; 
    justify-content: center;
    flex-shrink: 0; 
    position: relative;
}

.brand-item img {
    /* Altura controlada */
    height: 100px; 
    width: auto;
    object-fit: contain;
    
    /* ESTILO GRIS CLARO: */
    /* 1. brightness(0) invert(1) -> Vuelve el logo Blanco Puro */
    /* 2. opacity(0.5) -> Lo hace semitransparente para que parezca Gris */
    filter: brightness(0) invert(1) opacity(0.5);
    
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateZ(0);
    will-change: transform; 
}

/* Hover: Zoom y Color */
.brand-item:hover img {
    opacity: 1;
    transform: scale(1.2); /* Crece 20% */
    filter: brightness(0) saturate(100%) invert(17%) sepia(93%) saturate(6773%) hue-rotate(357deg) brightness(95%) contrast(117%);
}

/* ANIMACIÓN */
@keyframes scrollBrands {
    0% { transform: translateX(0); }
    /* Como usamos gap, el cálculo exacto del 50% sigue funcionando 
       siempre que hayas duplicado las imágenes correctamente en HTML */
    100% { transform: translateX(-50%); } 
}

/* --- AJUSTE MÓVIL --- */
@media (max-width: 768px) {
    .brands-track {
        gap: 40px; /* Menos espacio entre logos en móvil */
        animation-duration: 80s; /* Un poco más rápido en móvil */
    }
    .brand-item img {
        height: 70px; /* Logos más pequeños */
    }
}



/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 992px) {
    .hero-banner {
        /* Reducir agresividad del corte en móviles */
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
        text-align: center;
        padding-top: 140px;
    }
    
    .hero-img-container {
        margin-top: 40px;
    }
    
    .modern-title { font-size: 2.5rem; }
}

/* ==========================================================================
   ESTILOS COMPACTOS Y MODERNOS (MÓVIL & TABLET)
   Aplica a pantallas menores a 992px (Celulares + Tablets Verticales/Horizontales)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- 1. AJUSTES GENERALES DE ESPACIADO --- */
    /* Reduce los espacios en blanco excesivos entre secciones */
    section.py-5, 
    section.py-4 { 
        padding-top: 1.5rem !important;    
        padding-bottom: 1.5rem !important; 
    }
    
    .mb-5 { margin-bottom: 1.5rem !important; }
    .mt-5 { margin-top: 1.5rem !important; }

    /* Contenedores internos */
    .container.py-4 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Títulos de sección más pegados al contenido */
    .d-flex.justify-content-between.align-items-center.mb-4,
    .d-flex.justify-content-between.align-items-end.mb-4 {
        margin-bottom: 1rem !important;
        align-items: center !important; /* Alineación centrada verticalmente */
    }


    /* --- 2. SECCIÓN BENEFICIOS (Flotante y Horizontal) --- */
    .custom-mt-mobile {
        margin-top: -200px !important; /* Mantenemos el efecto flotante sobre el Hero */
        padding: 0 15px;
        position: relative;
        z-index: 10;
    }

    .benefit-item {
        display: flex !important;
        flex-direction: row !important; /* Icono a la izquierda, texto a la derecha */
        align-items: center !important;
        text-align: left !important;
        justify-content: flex-start !important;
        
        padding: 15px 20px !important;
        margin-bottom: 10px !important;
        height: auto !important; /* Altura flexible según contenido */
        
        /* ESTILO "DARK GLASS" */
        background: linear-gradient(180deg, rgba(45, 48, 55, 0.95) 0%, rgba(20, 22, 25, 0.98) 100%) !important;
        backdrop-filter: blur(12px);
        
        /* Bordes iluminados */
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important; 
        border-radius: 16px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important;
    }

    .benefit-icon {
        margin-bottom: 0 !important;
        margin-right: 15px !important;
        width: 48px !important; 
        height: 48px !important;
        min-width: 48px !important; /* Evita deformación */
        font-size: 1.2rem !important;
        
        /* Icono "Outline Neon" */
        background: rgba(0,0,0,0.3) !important;
        border: 1px solid var(--bx-yellow, #ffc107) !important;
        color: var(--bx-yellow, #ffc107) !important;
        border-radius: 12px !important;
        box-shadow: inset 0 0 10px rgba(255, 193, 7, 0.2) !important;
    }

    .benefit-item h6 {
        font-size: 1rem !important; /* Un poco más grande para legibilidad en tablet */
        font-weight: 700 !important;
        margin-bottom: 2px !important;
        color: #fff !important;
    }
    
    .benefit-item small {
        font-size: 0.8rem !important;
        color: #aaa !important;
    }


    /* --- 3. CATEGORÍAS (Cards "Tech" Modernas) --- */
    .category-card {
        background: #1a1c20 !important;
        border: 1px solid rgba(255,255,255,0.05) !important;
        border-bottom: 2px solid rgba(255, 193, 7, 0.3) !important; /* Línea de color base */
        border-radius: 18px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
        overflow: hidden;
        position: relative;
        min-height: 160px !important; /* Altura uniforme para Grid */
    }
    
    /* Brillo superior */
    .category-card::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    }

    .category-img-wrapper {
        height: 110px !important;
        background: radial-gradient(circle at center, rgba(255,255,255,0.07) 0%, transparent 70%) !important;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .category-icon {
        width: 55px !important;
        height: 55px !important;
        filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.4)); /* Glow */
    }
    
    .category-card h6 {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #e0e0e0;
        padding-top: 5px;
    }


    /* --- 4. PARALLAX (Banner Motor Compacto) --- */
    .parallax-section {
        padding: 60px 0 !important; 
        margin: 30px 0 !important;
        
        /* En táctiles, scroll natural evita saltos */
        background-attachment: scroll !important;
        background-position: center center !important;
        min-height: auto !important;
    }

    .parallax-section h2.display-4 {
        font-size: 2.2rem !important; 
        line-height: 1.2 !important;
    }
    
    .parallax-section p.lead {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
}



/*DISEÑO NUEVO PARA EL CARRO*/

/* ==========================================================================
   MEJORAS DEL HERO SECTION (SOLO ESCRITORIO - ESTILO PRO EQUILIBRADO)
   Estas reglas NO afectan al móvil.
   ========================================================================== */

@media (min-width: 992px) {

   /* 1. AJUSTE DE ALTURA DEL HEADER */
    .hero-banner {
        /* Aumentamos el padding vertical para darle más altura */
        padding-top: 240px !important;  /* Antes 180px */
        padding-bottom: 200px !important; /* Antes 160px */
        
        /* ESTO ES NUEVO: Forzamos a que ocupe al menos el 85% de la pantalla */
        min-height: 85vh; 
        
        /* Aseguramos que el contenido esté centrado verticalmente */
        display: flex;
        align-items: center;
        
        overflow: visible !important; 
    }

    /* ... (El resto de tus estilos de texto .hero-title-pro, botones, etc. se quedan igual que antes) ... */
    
    /* MANTÉN AQUÍ TUS ESTILOS DE TEXTO QUE YA TE GUSTARON: */
    .hero-title-pro {
        font-size: 4.2rem !important; 
        line-height: 1.1 !important;
        letter-spacing: -1.5px !important;
        margin-right: -80px !important; 
        position: relative;
        z-index: 10;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    }

    /* El acento rojo neón */
    .hero-title-pro .accent {
        color: var(--bx-brand) !important;
        position: relative;
        display: inline-block;
        filter: drop-shadow(0 0 12px rgba(255, 31, 46, 0.5));
    }
    
    .hero-title-pro .accent::after {
        content: '';
        position: absolute;
        bottom: 8px; /* Ajustado a la nueva altura */
        left: 0;
        width: 100%;
        height: 4px; /* Línea más fina */
        background: var(--bx-brand);
        opacity: 0.3;
        z-index: -1;
    }

    /* 3. DESCRIPCIÓN: MÁS LIMPIA */
    .hero-description {
        font-size: 1.1rem !important; /* Tamaño de lectura cómodo */
        max-width: 550px; /* Un poco más estrecho para que no se estire tanto */
        margin-bottom: 2.5rem !important;
        line-height: 1.7;
        opacity: 0.9 !important;
    }

    /* 4. BOTONES: MÁS ELEGANTES (MENOS "GORDOS") */
    .btn-hero-action {
        /* Menos padding vertical hace que se vean más premium */
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 35px !important;
        padding-right: 35px !important;
        
        font-size: 1rem !important; /* Letra normal, no gigante */
        font-weight: 700 !important;
        letter-spacing: 0.5px; /* Un poco de aire entre letras */
        transition: all 0.3s ease !important;
    }
    
    .btn-hero-action:hover {
        transform: translateY(-3px) !important; /* Movimiento sutil */
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }
}

/* AJUSTE PARA PANTALLAS MUY GRANDES (iMac, 4K)

/* =======================================================
   SECCIÓN CATEGORÍAS - EFECTO TÚNEL (SOLO ESCRITORIO)
   ======================================================= */

/* 1. TÍTULO CON SOMBRA */
.title-shadow {
    text-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Sombra fuerte para leerse sobre el carro si pasa */
    position: relative;
    z-index: 5;
}

/* Solo aplicamos los cambios "raros" en pantallas grandes */
@media (min-width: 992px) {

    /* Hacemos las tarjetas más compactas y transparentes */
    .tunnel-card {
        background: rgba(20, 23, 28, 0.6) !important; /* Semi-transparente */
        backdrop-filter: blur(10px); /* Efecto vidrio */
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        transform: scale(0.9); /* Reducimos tamaño al 90% */
        transition: all 0.4s ease;
    }

    /* Al pasar el mouse, se vuelven sólidas y resaltan */
    .tunnel-card:hover {
        background: rgba(32, 35, 40, 1) !important;
        transform: scale(1) translateY(-5px);
        border-color: var(--bx-brand) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    /* Reducimos la altura de la imagen en las tarjetas túnel */
    .tunnel-card .category-img-wrapper {
        height: 120px !important; /* Más bajitas */
        background: transparent !important; /* Sin fondo en la imagen */
    }

    /* Iconos más pequeños */
    .tunnel-card .category-icon {
        width: 60px !important;
        height: 60px !important;
    }

    /* Texto más pequeño */
    .small-text {
        font-size: 0.85rem !important;
        color: #ddd !important; /* Texto claro por defecto */
    }

    /* EL HUECO CENTRAL 
       Al usar col-lg-2 (16%) x 4 tarjetas = 64% del ancho ocupado.
       Queda un 36% libre en el centro automáticamente gracias a 
       justify-content-between en el HTML.
       
       Esto crea una "pista" perfecta para el Toyota Hilux.
    */
}

/* AJUSTES ESPECÍFICOS PARA EL TÚNEL EN PC */
@media (min-width: 992px) {
    
    /* Aseguramos que el contenedor central sea alto para dejar pasar el carro */
    .col-lg-6 {
        min-height: 450px; 
    }

    /* Ajuste visual de las cards túnel */
    .tunnel-card {
        background: rgba(20, 23, 28, 0.6) !important;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        height: 160px !important;
        transition: all 0.3s ease;
    }

    .tunnel-card:hover {
        background: rgba(30, 33, 38, 0.95) !important;
        transform: scale(1.05);
        border-color: var(--bx-brand) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    
    /* Ajuste de controles */
    .control-btn {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .control-btn:hover {
        background: var(--bx-brand);
        border-color: var(--bx-brand);
    }
}

/* =========================================
   PARALLAX PREMIUM SECTION
   ========================================= */

.parallax-section {
    position: relative;
    /* Fondo oscuro técnico con una imagen sutil mezclada */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* El truco clásico de parallax */
    padding: 100px 0;
    margin: 50px 0;
    /* Corte diagonal moderno */
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

/* 1. TARJETA DE CRISTAL (Glassmorphism) */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px); /* Difumina lo que hay detrás */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--bx-yellow); /* Acento de marca */
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.text-stroke {
    -webkit-text-stroke: 1px #fff;
    color: transparent;
    font-style: italic;
}

.text-gray-300 {
    color: #cfcfcf;
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
    transition: 0.3s;
}
.shadow-glow:hover {
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.7);
    transform: translateY(-3px);
}

/* 2. ELEMENTOS FLOTANTES DE FONDO */
.floating-element {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.gear-shape {
    top: 10%;
    right: 5%;
    opacity: 0.1;
    transform: rotate(15deg);
}

.shock-shape {
    bottom: 15%;
    left: 45%; /* Al medio */
    opacity: 0.1;
}

.oil-shape {
    top: 40%;
    left: -5%;
}

.circle-glow {
    width: 300px;
    height: 300px;
    background: var(--bx-brand);
    filter: blur(150px);
    opacity: 0.15;
    border-radius: 50%;
}

/* 3. IMAGEN DERECHA (Hero Stack) */
.hero-image-stack {
    position: relative;
    display: inline-block;
}

.bg-circle-shape {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 50%;
    animation: spinSlow 30s linear infinite;
    z-index: -1;
}

.main-parallax-img {
    max-height: 400px;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6));
    /* Animación de flotación suave */
    animation: floatImage 4s ease-in-out infinite;
}

@keyframes spinSlow {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes floatImage {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Ajustes Móvil */
@media (max-width: 991px) {
    .parallax-section {
        clip-path: none; /* Quitamos el corte en móvil para ahorrar espacio */
        padding: 60px 0;
        text-align: center;
    }
    .glass-card {
        border-left: 1px solid rgba(255, 255, 255, 0.1); /* Borde normal en móvil */
        background: rgba(0,0,0,0.6); /* Fondo más oscuro para leer mejor */
    }
    .main-parallax-img {
        max-height: 250px;
        margin-top: 30px;
    }
    .gear-shape, .shock-shape { display: none; } /* Ocultar decoración en móvil */
}

html {
    /* Asegura que el HTML tenga altura real para hacer scroll */
    height: auto !important;
    min-height: 100% !important;
    overflow-y: scroll !important; /* Fuerza la barra de scroll siempre */
}