/* ===================================================================
   1. SLIDER PRINCIPAL - VISTA MÓVIL Y TABLET (Pantallas <= 768px)
   La foto va directo como fondo CSS de cada slide (no depende de que
   el script calcule su posición/tamaño). El script sigue controlando
   CUÁNDO se ve cada slide (el auto-avance), pero YA NO controla cómo
   se ve la foto en sí.
   =================================================================== */
@media only screen and (max-width: 768px) {

    .featured-media.window-height {
        min-height: 380px;
        max-height: 100vh;
    }

    .featured-media .tms-slides > li:nth-child(1) {
        background-image: url('../images/slider/slider01.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .featured-media .tms-slides > li:nth-child(2) {
        background-image: url('../images/slider/slider02.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .featured-media .tms-slides > li:nth-child(3) {
        background-image: url('../images/slider/slider03.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* La <img> original ya no hace falta, la foto ahora es el fondo CSS de arriba */
    .featured-media .tms-slides > li img {
        display: none !important;
    }

    .featured-media .tms-content {
        width: 90%;
    }
}

/* ===================================================================
   2. SECCIÓN PRODUCTOS - VISTA ESCRITORIO (Pantallas >= 769px)
   La caja de texto crece para mostrar todo el contenido sin recortes
   =================================================================== */
@media only screen and (min-width: 769px) {

    #productos.window-height {
        height: auto !important;
        min-height: 100vh;
    }

    #productos .media-column {
        position: absolute !important;
        top: 0;
        bottom: auto;
        height: 100vh !important;
    }
}
/* ===================================================================
   AJUSTE DEFINITIVO PARA SLIDER DE LOGOS EN MÓVILES
   =================================================================== */
@media only screen and (max-width: 768px) {

    /* 1. Reducir padding de la sección gris contenedor */
    .section-block.pt-60.pb-60 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* 2. Forzar altura máxima del slider de logos */
    .logo-slider,
    .logo-slider .tms-slides,
    .logo-slider .tms-slides > li.tms-slide {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
    }

    /* 3. Contenedor interno del logo */
    .logo-slider .logo-wrapper,
    .logo-slider .tms-content-scalable {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* 4. Ajuste proporcional de la imagen del logo */
    .logo-slider img {
        max-height: 80px !important;
        width: auto !important;
        max-width: 90% !important;
        object-fit: contain !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
}