/* ================================================
   RESPONSIVE - Multiservicios Tech-Rojas
   Correcciones hero carousel en móvil
   ================================================ */

@media (max-width: 768px) {

    /* La imagen ocupa todo el ancho en móvil */
    .hero-bg-half-1,
    .hero-bg-half-2 {
        width: 100%;
        clip-path: none;               /* elimina el recorte diagonal */
        background-position: center right;
        background-size: cover;
        opacity: 0.35;                 /* oscurece para que el texto sea legible */
    }

    /* Texto legible sobre la imagen de fondo */
    .carousel-caption {
        padding-top: 100px;
        padding-bottom: 40px;
        position: relative;
        z-index: 10;
        text-align: center;
    }

    .carousel-caption .display-2 {
        font-size: 2rem !important;
    }

    .carousel-caption h4 {
        font-size: 0.85rem !important;
    }

    .carousel-caption p.fs-5 {
        font-size: 0.95rem !important;
    }

    .carousel-caption .d-flex {
        justify-content: center !important;
    }
}

/* ── Pantallas muy pequeñas (< 400px) ── */
@media (max-width: 400px) {

    .carousel-caption .display-2 {
        font-size: 1.6rem !important;
    }
}