/*==================================================
=     HERO - MANTENIMIENTO DE COMUNIDADES         =
==================================================*/

.hero-mantenimiento{

    width:100%;

    padding:80px 20px 80px;

    background:#ffffff;

    text-align:center;

}


/*==================================================
=               SUBTÍTULO                         =
==================================================*/

.hero-mantenimiento .subtitulo{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primario);

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}


/*==================================================
=                 TÍTULO                          =
==================================================*/

.hero-mantenimiento h1{

    font-size:3.5rem;

    font-weight:800;

    color:#222222;

    margin-bottom:25px;

    line-height:1.2;

}

.hero-mantenimiento h1::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:20px auto 0;

    background:var(--color-primario);

    border-radius:50px;

}


/*==================================================
=              DESCRIPCIÓN                        =
==================================================*/

.hero-mantenimiento p{

    max-width:760px;

    margin:35px auto;

    color:#666666;

    font-size:1.05rem;

    line-height:1.9;

}


/*==================================================
=          SERVICIOS DESTACADOS                   =
==================================================*/

.hero-mantenimiento .hero-servicios{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    flex-wrap:wrap;

    margin-top:45px;

}

.hero-mantenimiento .hero-servicios span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#333333;

    font-size:1rem;

    font-weight:600;

}

.hero-mantenimiento .hero-servicios i{

    color:var(--color-primario);

    font-size:1.2rem;

}


/*==================================================
=                RESPONSIVE                       =
==================================================*/

@media(max-width:768px){

    .hero-mantenimiento{

        padding:70px 20px 60px;

    }

    .hero-mantenimiento h1{

        font-size:2.4rem;

    }

    .hero-mantenimiento p{

        font-size:1rem;

    }

    .hero-servicios{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        max-width:240px;

        margin:40px auto 0;

    }

}

/*==================================================
=     PRESENTACIÓN - MANTENIMIENTO                 =
==================================================*/

.presentacion-mantenimiento{

    padding:70px 0;

    background:#f8f8f8;

}


/*==================================================
=              CONTENEDOR                          =
==================================================*/

.presentacion-mantenimiento .contenedor{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/*==================================================
=              SUBTÍTULO                           =
==================================================*/

.presentacion-mantenimiento .subtitulo{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primario);

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}


/*==================================================
=                 TÍTULO                           =
==================================================*/

.presentacion-mantenimiento h2{

    font-size:3rem;

    font-weight:800;

    color:#222222;

    line-height:1.25;

    margin-bottom:30px;

}

.presentacion-mantenimiento h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:20px;

    background:var(--color-primario);

    border-radius:50px;

}


/*==================================================
=                PÁRRAFOS                          =
==================================================*/

.presentacion-mantenimiento p{

    margin-bottom:25px;

    color:#666666;

    font-size:1.05rem;

    line-height:1.9;

}


/*==================================================
=                  IMAGEN                          =
==================================================*/

.presentacion-imagen img{

    width:100%;

    height:500px;

    object-fit:cover;

    display:block;

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

/*==================================================
=      EFECTO IMAGEN PRESENTACIÓN                 =
==================================================*/

.presentacion-imagen{

    overflow:hidden;

    border-radius:20px;

}

.presentacion-imagen img{

    transition:transform .6s ease,
               box-shadow .6s ease;

}

.presentacion-imagen:hover img{

    transform:scale(1.03);

}


/*==================================================
=                RESPONSIVE                        =
==================================================*/

@media(max-width:992px){

    .presentacion-mantenimiento .contenedor{

        grid-template-columns:1fr;

        gap:50px;

    }

    .presentacion-texto{

        text-align:center;

    }

    .presentacion-mantenimiento h2::after{

        margin:20px auto 0;

    }

}


@media(max-width:768px){

    .presentacion-mantenimiento{

        padding:70px 0;

    }

    .presentacion-mantenimiento h2{

        font-size:2.3rem;

    }

    .presentacion-imagen img{

        height:350px;

    }

}


/*==================================================
=      NUESTRO COMPROMISO                         =
==================================================*/

.compromiso-mantenimiento{

    padding:90px 0;

    background:#ffffff;

}


/*==================================================
=      CONTENEDOR                                =
==================================================*/

.compromiso-mantenimiento .contenedor{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/*==================================================
=      IMAGEN                                    =
==================================================*/

.compromiso-imagen{

    height:700px;

    overflow:hidden;

    border-radius:20px;

}

.compromiso-imagen img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center top;

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

    transition:transform .6s ease,
               box-shadow .6s ease;

}


/*==================================================
=      EFECTO HOVER                              =
==================================================*/

.compromiso-imagen:hover img{

    transform:scale(1.03);

    box-shadow:0 25px 45px rgba(0,0,0,.20);

}


/*==================================================
=      TEXTO                                     =
==================================================*/

.compromiso-texto span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primario);

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.compromiso-texto h2{

    font-size:2.8rem;

    font-weight:800;

    color:#222222;

    line-height:1.3;

    margin-bottom:25px;

}

.compromiso-texto h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:20px;

    background:var(--color-primario);

    border-radius:50px;

}

.compromiso-texto p{

    margin-bottom:22px;

    color:#666666;

    font-size:1.05rem;

    line-height:1.9;

}


/*==================================================
=      RESPONSIVE                                =
==================================================*/

@media(max-width:992px){

    .compromiso-mantenimiento .contenedor{

        grid-template-columns:1fr;

        gap:50px;

    }

    .compromiso-texto{

        text-align:center;

    }

    .compromiso-texto h2::after{

        margin:20px auto 0;

    }

}

@media(max-width:768px){

    .compromiso-mantenimiento{

        padding:70px 0;

    }

    .compromiso-imagen img{

        height:350px;

    }

    .compromiso-texto h2{

        font-size:2.2rem;

    }

}

/*==================================================
=      DESTACADOS DEL SERVICIO                    =
==================================================*/

.compromiso-destacados{

    margin-top:45px;

    padding:35px;

    background:#fafafa;

    border-left:5px solid var(--color-primario);

    border-radius:16px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}


/*==================================================
=      TÍTULO                                    =
==================================================*/

.compromiso-destacados h3{

    margin-bottom:25px;

    color:#222222;

    font-size:1.5rem;

    font-weight:700;

}


/*==================================================
=      LISTA                                     =
==================================================*/

.compromiso-destacados ul{

    list-style:none;

    padding:0;

    margin:0;

}


/*==================================================
=      ELEMENTOS                                 =
==================================================*/

.compromiso-destacados li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;

    color:#555555;

    font-size:1.02rem;

    line-height:1.7;

}

.compromiso-destacados li:last-child{

    margin-bottom:0;

}


/*==================================================
=      ICONOS                                    =
==================================================*/

.compromiso-destacados i{

    margin-top:3px;

    color:var(--color-primario);

    font-size:1.2rem;

}


/*==================================================
=      EFECTO HOVER                              =
==================================================*/

.compromiso-destacados{

    transition:all .35s ease;

}

.compromiso-destacados:hover{

    transform:translateY(-4px);

    box-shadow:0 22px 45px rgba(0,0,0,.12);

}


/*==================================================
=      RESPONSIVE                                =
==================================================*/

@media(max-width:768px){

    .compromiso-destacados{

        padding:25px;

    }

    .compromiso-destacados h3{

        font-size:1.3rem;

    }

}


.compromiso-destacados{

    max-width:700px;

    margin:50px auto 70px;

}

/* ==================================================
   AJUSTES DE INTEGRACIÓN - MANTENIMIENTO
================================================== */

.presentacion-imagen,
.compromiso-imagen {
    min-width: 0;
}

.presentacion-imagen img,
.compromiso-imagen img {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .presentacion-imagen img,
    .compromiso-imagen img,
    .btn-cta {
        transition: none !important;
    }

    .presentacion-imagen:hover img,
    .compromiso-imagen:hover img,
    .btn-cta:hover {
        transform: none !important;
    }
}