/* ==========================================================
   1. REGLAS GENERALES PARA CONTENEDORES
   ========================================================== */
.tm-img-container {
    overflow: hidden; 
    width: 100%;
    padding: 0 !important;
}

/* ==========================================================
   2. SLIDER 2 (EL AUTOMÁTICO - FONDO DE PÁGINA)
   ========================================================== */

/* ⬇️ ESTO ES LO QUE ARREGLA LA COLUMNA VERTICAL */
#tmImgSlider2 {
    display: flex !important;         /* Fuerza fila horizontal */
    flex-direction: row !important;   /* Asegura que no sea columna */
    flex-wrap: nowrap !important;     /* Evita que se amontonen abajo */
    gap: 20px !important;
    padding-top: 0 !important; 
    padding-bottom: 10px !important; 
    width: max-content !important;    /* Deja que la tira sea larga */
    animation: scroll-automatico 35s linear infinite !important;
}

#tmImgSlider2:hover {
animation-play-state: paused !important;
}

/* Reglas para los rectángulos individuales */
#tmImgSlider2 .tm-slider-img-link {
    flex: 0 0 450px !important; 
    height: 380px !important; 
    position: relative !important;
    display: block !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3) !important;
}

#tmImgSlider2 .tm-slider-img {
    width: 100% !important;
    height: 100% !important; 
    object-fit: cover !important;
    display: block !important;
}

/* ==========================================================
   3. SLIDER INTERNO - NO SE TOCA
   ========================================================== */
#tmSliderArquetas {
    display: flex;
    gap: 15px;
    overflow-x: auto; 
    padding: 10px 0;
    width: 100%;
    border: none !important;     /* Elimina posibles líneas de borde */
    
}
/* Ocultar barra de scroll específicamente en navegadores modernos */
#tmSliderArquetas::-webkit-scrollbar {
    display: none !important; /* Para Chrome, Safari y Edge */
}
#tmSliderArquetas .tm-slider-img-link {
    flex: 0 0 220px;
}

#tmSliderArquetas .tm-slider-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

/* ==========================================================
   4. POSICIÓN Y RESPONSIVE
   ========================================================== */

@media (min-width: 992px) {
    .tm-slider-row-ajuste {
        margin-top: -200px !important; 
        position: relative;
        z-index: 10;
    }
}

@media (max-width: 991px) {
    .tm-slider-row-ajuste {
        margin-top: 20px !important;
    }
    #tmImgSlider2 .tm-slider-img-link {
        flex: 0 0 280px !important; 
        height: 200px !important;
    }
}

/* Animaciones */
@keyframes scroll-automatico {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-470px * 8)); } 
}