/* ==========================================================
   BANNER PRINCIPAL RESPONSIVE
   PC / TABLET / CELULAR
   ========================================================== */

.responsive-main-banner {
    width: 100%;
    overflow: hidden;
}

.responsive-main-banner .owl-carousel,
.responsive-main-banner .owl-stage-outer,
.responsive-main-banner .owl-stage,
.responsive-main-banner .owl-item {
    width: 100%;
}


/* ----------------------------------------------------------
   CONTENEDOR DEL SLIDE
   ---------------------------------------------------------- */

.responsive-main-banner .banner-item {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* ----------------------------------------------------------
   IMAGEN
   ---------------------------------------------------------- */

.responsive-main-banner .banner-picture {
    display: block;
    width: 100%;
    line-height: 0;
}

.responsive-main-banner .banner-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}


/* ----------------------------------------------------------
   CAPA SOBRE LA IMAGEN
   ---------------------------------------------------------- */

.responsive-main-banner .banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.82) 0%,
        rgba(255,255,255,0.45) 38%,
        rgba(255,255,255,0.05) 70%
    );
    z-index: 2;
    pointer-events: none;
}


/* ----------------------------------------------------------
   CONTENIDO
   ---------------------------------------------------------- */

.responsive-main-banner .banner-content {
    position: absolute !important;

    left: 8% !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 42% !important;
    max-width: 650px;

    z-index: 5;

    text-align: left;

    padding: 20px;
}


/* TITULO */

.responsive-main-banner .banner-content h3 {
    margin: 0 0 18px 0;

    font-size: clamp(2rem, 3.2vw, 3.2rem) !important;

    line-height: 1.15;

    font-weight: 700;

    color: #115ab8 !important;
}


/* DESCRIPCION */

.responsive-main-banner .banner-content p {
    margin: 0;

    font-size: clamp(1rem, 1.5vw, 1.5rem) !important;

    line-height: 1.5;

    font-weight: 400;

    color: #0d2151 !important;
}


/* ==========================================================
   TABLET
   768px - 991px
   ========================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .responsive-main-banner .banner-item {
        min-height: 620px;
    }

    .responsive-main-banner .banner-picture,
    .responsive-main-banner .banner-image {
        width: 100%;
        height: 620px;
    }

    .responsive-main-banner .banner-image {
        object-fit: cover;
        object-position: center;
    }

    .responsive-main-banner .banner-overlay {
        background: linear-gradient(
            90deg,
            rgba(255,255,255,0.90) 0%,
            rgba(255,255,255,0.60) 45%,
            rgba(255,255,255,0.10) 80%
        );
    }

    .responsive-main-banner .banner-content {
        left: 7% !important;
        width: 48% !important;
        max-width: 480px;

        padding: 15px;
    }

    .responsive-main-banner .banner-content h3 {
        font-size: 2.1rem !important;
        line-height: 1.15;
    }

    .responsive-main-banner .banner-content p {
        font-size: 1.15rem !important;
        line-height: 1.45;
    }
}



/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 767px) {

    .responsive-main-banner .banner-item {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    /* Picture ocupa todo el ancho */
    .responsive-main-banner .banner-picture {
        display: block;
        width: 100%;
        height: auto;
        line-height: 0;
    }

    /* Imagen móvil SIN RECORTE */
    .responsive-main-banner .banner-image {
        display: block;

        width: 100% !important;
        height: auto !important;

        max-width: 100%;


        /*object-fit: contain !important;
        object-position: center center;*/

        margin: 0;
    }


    /* ------------------------------------------------------
       Overlay
       ------------------------------------------------------ */

    .responsive-main-banner .banner-overlay {
        position: absolute;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        background: linear-gradient(
            180deg,
            rgba(255,255,255,0.00) 25%,
            rgba(255,255,255,0.20) 45%,
            rgba(255,255,255,0.80) 72%,
            rgba(255,255,255,0.96) 100%
        );

        z-index: 2;
    }


    /* ------------------------------------------------------
       Texto
       ------------------------------------------------------ */

    .responsive-main-banner .banner-content {

        position: absolute !important;

        left: 4% !important;
        right: 4% !important;

        bottom: 7% !important;
        top: auto !important;

        width: auto !important;
        max-width: none;

        transform: none !important;

        padding: 14px 16px;

        text-align: center;

        background: rgba(255,255,255,0.86);

        border-radius: 14px;

        box-shadow: 0 4px 15px rgba(0,0,0,0.10);

        z-index: 5;
    }


    .responsive-main-banner .banner-content h3 {

        margin: 0 0 8px 0;

        font-size: 1.45rem !important;

        line-height: 1.15;

        font-weight: 700;

    }


    .responsive-main-banner .banner-content p {

        margin: 0;

        font-size: 0.95rem !important;

        line-height: 1.4;

    }


    /* Ocultar flechas */
    .responsive-main-banner .owl-nav {
        display: none !important;
    }


    /* Dots */
    .responsive-main-banner .owl-dots {

        position: absolute;

        left: 0;
        right: 0;

        bottom: 8px;

        z-index: 10;

        text-align: center;

    }

}


/* ==========================================================
   CELULARES PEQUEÑOS
   ========================================================== */

@media (max-width: 480px) {

    .responsive-main-banner .banner-content {

        left: 4% !important;
        right: 4% !important;

        bottom: 6% !important;

        padding: 11px 13px;

        border-radius: 12px;
    }

    .responsive-main-banner .banner-content h3 {

        font-size: 1.30rem !important;

        line-height: 1.15;

        margin-bottom: 6px;
    }

    .responsive-main-banner .banner-content p {

        font-size: 0.88rem !important;

        line-height: 1.35;
    }

}