/*==================================================
=        HERO - MAQUINARIA Y EXCAVACIONES         =
==================================================*/

.hero-maquinaria{

    width:100%;

    padding:45px 20px 20px;

    background:#ffffff;

    text-align:center;

}


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

.hero-maquinaria .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-maquinaria h1{

    font-size:3.5rem;

    font-weight:800;

    color:#222222;

    line-height:1.2;

    margin-bottom:25px;

}

.hero-maquinaria h1::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:20px auto 0;

    background:var(--color-primario);

    border-radius:50px;

}


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

.hero-maquinaria p{

    max-width:760px;

    margin:35px auto;

    color:#666666;

    font-size:1.05rem;

    line-height:1.9;

}


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

.hero-servicios{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    flex-wrap:wrap;

    margin-top:45px;

}

.hero-servicios span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#333333;

    font-size:1rem;

    font-weight:600;

}

.hero-servicios i{

    color:var(--color-primario);

    font-size:1.2rem;

}


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

@media(max-width:768px){

    .hero-maquinaria{

        padding:70px 20px 60px;

    }

    .hero-maquinaria h1{

        font-size:2.4rem;

    }

    .hero-maquinaria p{

        font-size:1rem;

    }

    .hero-servicios{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        max-width:260px;

        margin:40px auto 0;

    }

}


/*==================================================
=   PRESENTACIÓN - MAQUINARIA Y EXCAVACIONES      =
==================================================*/

.presentacion-maquinaria{

    /* Espacio superior e inferior de la sección */
    padding:70px 0 20px;

    background:#f8f8f8;

}

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

.presentacion-maquinaria .contenedor{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}


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

.presentacion-maquinaria .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-maquinaria h2{

    font-size:3rem;

    font-weight:800;

    color:#222222;

    line-height:1.25;

    margin-bottom:30px;

}

.presentacion-maquinaria h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:20px;

    background:var(--color-primario);

    border-radius:50px;

}


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

.presentacion-maquinaria p{

    margin-bottom:25px;

    color:#666666;

    font-size:1.05rem;

    line-height:1.9;

}


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

.presentacion-imagen{

    overflow:hidden;

    border-radius:20px;

}

.presentacion-imagen img{

    width:100%;

    height:500px;

    display:block;

    object-fit:cover;

    border-radius:20px;

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

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

}

.presentacion-imagen:hover img{

    transform:scale(1.03);

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

}


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

@media(max-width:992px){

    .presentacion-maquinaria .contenedor{

        grid-template-columns:1fr;

        gap:50px;

    }

    .presentacion-texto{

        text-align:center;

    }

    .presentacion-maquinaria h2::after{

        margin:20px auto 0;

    }

}

@media(max-width:768px){

    .presentacion-maquinaria{

        padding:60px 0;

    }

    .presentacion-maquinaria h2{

        font-size:2.3rem;

    }

    .presentacion-imagen img{

        height:350px;

    }

}

/*==================================================
=      SOLUCIONES PARA CADA PROYECTO              =
==================================================*/

.compromiso-maquinaria{

    /* Poco espacio arriba para acercar las secciones */
    padding:20px 0 70px;

    background:#ffffff;

}


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

.compromiso-maquinaria .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 20%;

    border-radius:20px;

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

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

}
.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-maquinaria .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-maquinaria{

        padding:70px 0;

    }

    .compromiso-imagen{

        height:350px;

    }

    .compromiso-texto h2{

        font-size:2.2rem;

    }

}




/*==================================================
=       ALQUILER DE BANDEJAS PARA ESCOMBROS        =
==================================================*/

.bandejas-maquinaria{

    width:100%;

    padding:70px 0;

    background:#f8f8f8;

}


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

.bandejas-maquinaria > .contenedor{

    width:90%;

    max-width:1500px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


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

.bandejas-texto{

    width:100%;

}


.bandejas-texto .subtitulo{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primario);

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}


.bandejas-texto h2{

    margin-bottom:25px;

    color:#222222;

    font-size:2.8rem;

    font-weight:800;

    line-height:1.3;

}


.bandejas-texto h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:20px;

    background:var(--color-primario);

    border-radius:50px;

}


.bandejas-texto p{

    margin-bottom:22px;

    color:#666666;

    font-size:1.05rem;

    line-height:1.9;

}


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

.bandejas-servicios{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:30px;

}


.bandejas-servicios span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#333333;

    font-size:1rem;

    font-weight:600;

}


.bandejas-servicios i{

    color:var(--color-primario);

    font-size:1.1rem;

}


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

.bandejas-imagen{

    width:100%;

    height:550px;

    overflow:hidden;

    border-radius:20px;

}


.bandejas-imagen img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    border-radius:20px;

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

    transition:transform .6s ease;

}


.bandejas-imagen:hover img{

    transform:scale(1.03);

}


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

@media(max-width:992px){

    .bandejas-maquinaria > .contenedor{

        grid-template-columns:1fr;

        gap:50px;

    }


    .bandejas-texto{

        text-align:center;

    }


    .bandejas-texto h2::after{

        margin:20px auto 0;

    }


    .bandejas-servicios{

        align-items:center;

    }

}


@media(max-width:768px){

    .bandejas-maquinaria{

        padding:60px 0;

    }


    .bandejas-texto h2{

        font-size:2.2rem;

    }


    .bandejas-imagen{

        height:350px;

    }

}


/* ==========================================================
   ==========================================================
   SOLUCIONES PARA CADA PROYECTO
   ==========================================================
   ========================================================== */

.soluciones-maquinaria {

    /* Fondo suave para separar esta sección de la anterior */
    background: #f7f4f1;

    /* Espacio interior superior e inferior */
    padding: 80px 20px;

}


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

.soluciones-maquinaria .contenedor {

    /* Limita el ancho máximo de la sección */
    max-width: 1400px;

    /* Centra el contenido horizontalmente */
    margin: 0 auto;

}


/* ==========================================================
   ENCABEZADO DE LA SECCIÓN
   ========================================================== */

.soluciones-encabezado {

    /* Centra todos los textos */
    text-align: center;

    /* Limita el ancho del encabezado */
    max-width: 850px;

    /* Centra el bloque y deja espacio debajo */
    margin: 0 auto 55px;

}


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

.soluciones-encabezado .subtitulo {

    /* Permite aplicar correctamente los márgenes */
    display: inline-block;

    /* Color rojo corporativo */
    color: #c62828;

    /* Tamaño del texto */
    font-size: 16px;

    /* Texto en negrita */
    font-weight: 700;

    /* Espacio entre las letras */
    letter-spacing: 2px;

    /* Separa el subtítulo del título */
    margin-bottom: 15px;

}


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

.soluciones-encabezado h2 {

    /* Tamaño del título */
    font-size: 42px;

    /* Grosor del título */
    font-weight: 700;

    /* Color oscuro */
    color: #2b1d17;

    /* Espacio inferior */
    margin: 0 0 20px;

    /* Altura de línea */
    line-height: 1.2;

}


/* ==========================================================
   PÁRRAFO DEL ENCABEZADO
   ========================================================== */

.soluciones-encabezado p {

    /* Tamaño del texto */
    font-size: 18px;

    /* Color gris oscuro */
    color: #5f5f5f;

    /* Altura de línea para facilitar la lectura */
    line-height: 1.8;

    /* Elimina márgenes innecesarios */
    margin: 0;

}


/* ==========================================================
   GRID DE LOS TRES BLOQUES
   ========================================================== */

.soluciones-grid {

    /* Activa CSS Grid */
    display: grid;

    /* Crea tres columnas iguales */
    grid-template-columns: repeat(3, 1fr);

    /* Espacio entre los bloques */
    gap: 30px;

}


/* ==========================================================
   BLOQUE INDIVIDUAL
   ========================================================== */

.solucion-item {

    /* Fondo blanco */
    background: #ffffff;

    /* Espacio interior */
    padding: 40px 30px;

    /* Bordes redondeados */
    border-radius: 14px;

    /* Centra el contenido */
    text-align: center;

    /* Sombra suave */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    /* Línea roja superior */
    border-top: 4px solid #c62828;

    /* Transición suave para el hover */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* ==========================================================
   EFECTO HOVER DEL BLOQUE
   ========================================================== */

.solucion-item:hover {

    /* Eleva ligeramente el bloque */
    transform: translateY(-7px);

    /* Aumenta la sombra */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);

}


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

.solucion-item i {

    /* Tamaño del icono */
    font-size: 42px;

    /* Color rojo corporativo */
    color: #c62828;

    /* Espacio debajo del icono */
    margin-bottom: 22px;

}


/* ==========================================================
   TÍTULOS DE LOS BLOQUES
   ========================================================== */

.solucion-item h3 {

    /* Tamaño del título */
    font-size: 24px;

    /* Grosor del texto */
    font-weight: 700;

    /* Color oscuro */
    color: #2b1d17;

    /* Espacio inferior */
    margin: 0 0 15px;

}


/* ==========================================================
   TEXTOS DE LOS BLOQUES
   ========================================================== */

.solucion-item p {

    /* Tamaño del texto */
    font-size: 16px;

    /* Color gris */
    color: #666666;

    /* Altura de línea */
    line-height: 1.7;

    /* Elimina márgenes */
    margin: 0;

}


/* ==========================================================
   RESPONSIVE - TABLETS
   ========================================================== */

@media (max-width: 900px) {

    .soluciones-grid {

        /* Cambia de tres columnas a una sola */
        grid-template-columns: 1fr;

        /* Limita el ancho de los bloques */
        max-width: 650px;

        /* Centra el grid */
        margin: 0 auto;

    }

}


/* ==========================================================
   RESPONSIVE - MÓVILES
   ========================================================== */

@media (max-width: 600px) {

    .soluciones-maquinaria {

        /* Reduce el espacio de la sección */
        padding: 60px 20px;

    }


    .soluciones-encabezado {

        /* Reduce el espacio inferior */
        margin-bottom: 40px;

    }


    .soluciones-encabezado h2 {

        /* Reduce el tamaño del título */
        font-size: 32px;

    }


    .soluciones-encabezado p {

        /* Reduce el tamaño del párrafo */
        font-size: 16px;

    }


    .solucion-item {

        /* Reduce el espacio interior de las tarjetas */
        padding: 35px 25px;

    }


    .solucion-item h3 {

        /* Reduce el tamaño del título */
        font-size: 22px;

    }

}