/* ==========================
   CONTENEDOR GENERAL
========================== */
.pagina-servicios #__next{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:20px;
    box-sizing:border-box;
}

/* SOLO IMAGENES DE TARJETAS */
.pagina-servicios .az_pp img{
    width:100%;
    height:auto;
    display:block;
    border-radius:12px;
}

/* ESPACIADOS */
.pagina-servicios .az_Es{
    margin-bottom:30px;
}

/* GRID SERVICIOS */
.pagina-servicios .az_pp{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    padding:0;
    list-style:none;
}

/* ==========================
   HERO BANNER
========================== */
.hero-banner{
    position:relative;
    width:100%;
    margin:30px auto;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.hero-banner img{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    transition:.4s ease;
}

/* EFECTO HOVER */
.hero-banner:hover img{
    transform:scale(1.05);
}

/* OVERLAY */
.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(0,0,0,.75),
        rgba(0,0,0,.25)
    );

    display:flex;
    align-items:center;
    padding:50px;
}

/* TEXTO */
.hero-overlay h2{
    color:#fff;
    font-size:52px;
    font-weight:900;
    max-width:650px;
    line-height:1.1;
    margin:0;
    text-align:left;
}

/* ==========================
   TABLET
========================== */
@media(max-width:992px){

    .hero-banner img{
        height:400px;
    }

    .hero-overlay{
        padding:35px;
    }

    .hero-overlay h2{
        font-size:36px;
        max-width:500px;
    }

    .pagina-servicios .az_pp{
        grid-template-columns:1fr;
    }

}

/* ==========================
   MOVIL
========================== */
@media(max-width:768px){

    .pagina-servicios #__next{
        padding:10px;
    }

    .hero-banner{
        border-radius:14px;
    }

    .hero-banner img{
        height:250px;
    }

    .hero-overlay{
        padding:20px;
        justify-content:center;
        align-items:center;
        text-align:center;
        background:linear-gradient(
            to top,
            rgba(0,0,0,.75),
            rgba(0,0,0,.30)
        );
    }

    .hero-overlay h2{
        font-size:24px;
        max-width:100%;
        text-align:center;
        line-height:1.3;
    }

}

/* ==========================
   MINI MOVIL
========================== */
@media(max-width:480px){

    .hero-banner img{
        height:200px;
    }

    .hero-overlay h2{
        font-size:20px;
    }

}