/* ===================================================================
   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;
    }
}