/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {


}


/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {


}

 
/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {


}

 
/* small mobile :320px. */
@media (max-width: 767px) {

/* Rompe alturas fijas del theme para el slider */
    .slider-height {
        height: auto !important;
        min-height: 60vh !important;
        padding: 56px 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Muchos themes ponen el fondo en cada slide */
    .single-slider {
        background-size: cover !important;
        background-position: center top !important;
        /* muestra mejor la parte superior en móvil */
    }

    /* Por si el fondo está en .slider-area */
    .slider-area {
        background-size: cover !important;
        background-position: center top !important;
    }

    /* Texto más legible en móvil */
    .hero__caption h1 {
        font-size: 28px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .hero__caption p {
        font-size: 14px;
        margin-bottom: 18px;
        padding-right: 0;
    }

    .video-icon a {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    /* Dots abajo para no tapar el texto */
    .dot-style .slick-dots {
        position: absolute;
        bottom: 12px;
        top: auto;
        left: 12px;
    }
}
/* Imagen de fondo controlada por CSS moderno */
.single-slider { position: relative; overflow: hidden; }
.single-slider .slider-bg{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;          /* rellena sin deformar */
  object-position: center;    /* centra por defecto */
}
/* En móvil encuadramos hacia arriba para que se vea la “parte importante” */
@media (max-width: 767px){
  .single-slider .slider-bg{ object-position: center top; }
  .slider-height{ min-height: 60vh; height:auto; padding:60px 0; }
}