/* Rango tablet (768-1199.98px): el tema salta de reglas mobile (<=768px)
   a desktop (>=1200px) y deja sin cubrir los anchos de iPad. */

/* Banner de blog: entre md y lg las columnas se apilan y la etiqueta,
   absoluta contra el .carousel-item, cae sobre el texto. La columna pasa
   a ser su contexto, encogida al ancho de la imagen (topada en 700px). */
@media (min-width: 768px) and (max-width: 991.98px) {

    .banner-blog-slider .carousel-item .row > .col-lg-6 {
        position: relative;
        flex: 0 0 auto;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }
}

/* En 768 exacto corren a la vez el max-width:768px de style.css y el md de
   Bootstrap, ambos inclusivos, y su `left:15%` mobile corre la botonera. */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .contenedor-header #menu-mobil {
        left: auto;
    }
}