/* ============================================
   CARRUSEL.CSS - Carrusel de la página de inicio
   Cargar DESPUÉS de mobile.css.

   1. Imágenes optimizadas (carpeta img/carrusel/): cada diapositiva
      tiene tres tamaños (1920px, 1280px y 768px) y el navegador
      descarga sólo el que corresponde a la pantalla.
      Para agregar una diapositiva: copiar un bloque <li> en index.html,
      darle una clase nueva (ej. slide-mi-foto) y agregar sus 3 líneas
      abajo, una en cada sección.
   2. Altura proporcional en escritorio: el banner ya no mide
      895px fijos; se ajusta al ancho de la pantalla (misma
      proporción que las fotos) y nunca rebasa la ventana visible,
      así el texto de cada diapositiva siempre se ve sin hacer scroll.
   ============================================ */

/* --- Imagen por defecto (pantallas grandes) --- */
.flexslider .slides > li {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.flexslider .slides > li.slide-equipo-desazolve { background-image: url(../img/carrusel/equipo-desazolve-1920.jpg); }
.flexslider .slides > li.slide-expo-tsurumi { background-image: url(../img/carrusel/expo-tsurumi-1920.jpg); }
.flexslider .slides > li.slide-tsurumi-universe { background-image: url(../img/carrusel/tsurumi-universe-1920.jpg); }
.flexslider .slides > li.slide-sistemas-bombeo { background-image: url(../img/carrusel/sistemas-bombeo-1920.jpg); }
.flexslider .slides > li.slide-tratamiento-agua { background-image: url(../img/carrusel/tratamiento-agua-1920.jpg); }
.flexslider .slides > li.slide-soporte-tecnico { background-image: url(../img/carrusel/soporte-tecnico-1920.jpg); }
.flexslider .slides > li.slide-asesoria-bombas { background-image: url(../img/carrusel/asesoria-bombas-1920.jpg); }
.flexslider .slides > li.slide-tecnologias-agua { background-image: url(../img/carrusel/tecnologias-agua-1920.jpg); }
.flexslider .slides > li.slide-diseno-industrial { background-image: url(../img/carrusel/diseno-industrial-1920.jpg); }

/* --- Laptops / tablets (pantalla normal) --- */
@media screen and (max-width: 1366px) and (max-resolution: 1.5dppx),
       screen and (max-width: 1366px) and (-webkit-max-device-pixel-ratio: 1.5),
       screen and (max-width: 768px) {
    .flexslider .slides > li.slide-equipo-desazolve { background-image: url(../img/carrusel/equipo-desazolve-1280.jpg); }
    .flexslider .slides > li.slide-expo-tsurumi { background-image: url(../img/carrusel/expo-tsurumi-1280.jpg); }
    .flexslider .slides > li.slide-tsurumi-universe { background-image: url(../img/carrusel/tsurumi-universe-1280.jpg); }
    .flexslider .slides > li.slide-sistemas-bombeo { background-image: url(../img/carrusel/sistemas-bombeo-1280.jpg); }
    .flexslider .slides > li.slide-tratamiento-agua { background-image: url(../img/carrusel/tratamiento-agua-1280.jpg); }
    .flexslider .slides > li.slide-soporte-tecnico { background-image: url(../img/carrusel/soporte-tecnico-1280.jpg); }
    .flexslider .slides > li.slide-asesoria-bombas { background-image: url(../img/carrusel/asesoria-bombas-1280.jpg); }
    .flexslider .slides > li.slide-tecnologias-agua { background-image: url(../img/carrusel/tecnologias-agua-1280.jpg); }
    .flexslider .slides > li.slide-diseno-industrial { background-image: url(../img/carrusel/diseno-industrial-1280.jpg); }
}

/* --- Celulares --- */
@media screen and (max-width: 768px) and (max-resolution: 1.5dppx),
       screen and (max-width: 768px) and (-webkit-max-device-pixel-ratio: 1.5),
       screen and (max-width: 480px) {
    .flexslider .slides > li.slide-equipo-desazolve { background-image: url(../img/carrusel/equipo-desazolve-768.jpg); }
    .flexslider .slides > li.slide-expo-tsurumi { background-image: url(../img/carrusel/expo-tsurumi-768.jpg); }
    .flexslider .slides > li.slide-tsurumi-universe { background-image: url(../img/carrusel/tsurumi-universe-768.jpg); }
    .flexslider .slides > li.slide-sistemas-bombeo { background-image: url(../img/carrusel/sistemas-bombeo-768.jpg); }
    .flexslider .slides > li.slide-tratamiento-agua { background-image: url(../img/carrusel/tratamiento-agua-768.jpg); }
    .flexslider .slides > li.slide-soporte-tecnico { background-image: url(../img/carrusel/soporte-tecnico-768.jpg); }
    .flexslider .slides > li.slide-asesoria-bombas { background-image: url(../img/carrusel/asesoria-bombas-768.jpg); }
    .flexslider .slides > li.slide-tecnologias-agua { background-image: url(../img/carrusel/tecnologias-agua-768.jpg); }
    .flexslider .slides > li.slide-diseno-industrial { background-image: url(../img/carrusel/diseno-industrial-768.jpg); }
}

/* --- Altura proporcional en escritorio (> 1024px) ---
   46.6vw = proporción de las fotos (1920 x 895).
   El tope evita que el banner sea más alto que la ventana
   (100vh menos el encabezado de 11vw) o que 895px. */
@media screen and (min-width: 1025px) {
    .slider-banner,
    .slider-banner .flexslider,
    .slider-banner .flex-viewport,
    .slider-banner .slides,
    .slider-banner .slides > li {
        height: 46.6vw;
        max-height: min(895px, calc(100vh - 11vw));
        min-height: 420px;
    }
}

/* --- Diapositiva: equipo de desazolve --- */
.slide-equipo-desazolve .flex-caption {
    width: 55vw;
}

@media screen and (max-width: 1024px) {
    .slide-equipo-desazolve .flex-caption {
        width: 70vw !important;
    }
}

@media screen and (max-width: 768px) {
    .slide-equipo-desazolve .flex-caption {
        width: 88vw !important;
    }
}