.siteContainer {
    max-width: 900px; /* Ajusta el ancho máximo según lo que necesites */
}
#separadorMenu{
    height: 70px;
    background-color: var(--mi-dark);
}
#heroHome{
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 100px;
    min-height: 100vh;
}
.contTextHero{
    position: relative;
    z-index: 2;
    padding: 0px;
    color: white;
}
.contTextHero2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 2;
    padding: 0px;
    color: white;
}
.contLogoHorizontal img{
    width: 300px;
    margin-bottom: 30px;
}
.contLogoVertical{
    display: flex;
    align-items: center;
    justify-content: center;
}
.contLogoVertical img{
    width: 200px;
    margin-bottom: 30px;
}
.textoHero{
    font-size: 80px;
    font-weight: 600;
    text-transform: uppercase;
}
.textoHeroRB{
    font-size: 60px;
    font-weight: 600;
    text-transform: uppercase;
}
.contTextHero p{
    font-size: 35px;
}
video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.capa{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
}
.contenedorAmarillo{
    background-color: var(--mi-warning);
    width: 100%;
    padding: 10px 100px;
    text-align: center;
}
.contenedorAmarillo p{
    margin: 0;
    color: var(--mi-dark);
    font-size: 20px;
    font-weight: 400;
}
.contenedorMarcas{
    display: flex;
    flex-direction: column;
    padding: 50px 100px;
    background-color: var(--mi-dark);
    text-align: center;
}
.botonMasBlanco{
    display: flex;
    align-items: center;
    justify-content: end;
    color: white;
    background-color: transparent;
    border: none;
    transition: all .5s ease;
    margin: 30px 0;
}
.botonMasBlanco:hover{
    color: var(--mi-warning);
}
.botonMasBlanco i{
    font-size: 20px;
    color: var(--mi-danger);
    margin-left: 7px;
    transition: all .5s ease;
}
.botonMasBlanco i:hover{
    color: var(--mi-warning);
}
.botonMasNegro{
    display: flex;
    align-items: center;
    justify-content: end;
    color: black;
    background-color: transparent;
    border: none;
    transition: all .5s ease;  
    margin: 30px 0;
}
.botonMasNegro:hover{
    color: var(--mi-warning);
}
.botonMasNegro i{
    font-size: 20px;
    color: var(--mi-danger);
    margin-left: 7px;
    transition: all .5s ease;
}
.botonMasNegro i:hover{
    color: var(--mi-warning);
}
.contenedorConocenos{
    display: flex;
    flex-direction: column;
    padding: 50px 100px;
    background-color: var(--mi-light);
}
.nuestroClaim{
    display: grid;
    grid-template-columns: 4fr 8fr;
}
.titulo{
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
}
.conocenos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}
.conocenos1{
    border: 2px solid var(--mi-warning);
    padding: 20px;
}
.conocenos1 img{
    width: 80px;
    text-align: center;
    margin-bottom: 15px;
}
.contenedorOportunidades{
    background-color: var(--mi-dark);
    color: white;
    padding: 100px;
}
.oportunidadesTextos{
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 30px;
    /* align-items: center; */
}
.oportunidadesTextos h3{
    color: var(--mi-warning);
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
}
.oportunidadesImg{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    align-items: center;
    margin: 30px 0;
}
.oportunidadesImg img{
    width: 100%;
}
.contenedorInfo{
    background-image: url("/images/identidad-sitio/backgroundInfo.jpg");
    background-position: center;
    background-size: cover;
    padding: 50px 0px 50px 50px;
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 30px;
}
.contenedorInfo img{
    width: 100%;
}
.contenedorInfo p{
    margin: 0;
    padding: 30px 30px 30px 0;
}
.desarrollosPlataformas{
    background-color: var(--mi-light);
    padding: 100px;
}
.desarrollosCabecera{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* .desarrollosLogos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
} */
.desarrollosLogos img{
    max-height: 55px;
    margin-right: 40px;
}
.desarrollosLogos p{
    font-size: 25px;
    text-align: center;
}
.caracteristicas{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 50px;
}
.caracteristicas1 ul{
    list-style: none;
    color: var(--mi-dark);
    padding: 0;
}
.caracteristicas1 ul li{
    display: flex;
    align-items: center;
    text-align: start;
}
.caracteristicas1 ul i{
    color: var(--mi-danger);
    font-size: 25px;
}
.sostentabilidad{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}



/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Marcas */
.heroMarcas{
    background-image: url("/images/identidad-sitio/heroMarcas.jpg");
    background-position: center;
    background-size: cover;
    height: 400px;
}
.marcasContenido{
    display: grid;
    grid-template-columns: 3fr 9fr;
    padding: 100px;
    background-color: var(--mi-light);
}
.marcasLogos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 100px 50px;
    background-color: var(--mi-dark); 
}
.marcasLogos img{
    width: 100%;
}



/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Oportunidades */
.heroOportunidades{
    background-image: url("/images/identidad-sitio/heroOportunidades.jpg");
    background-position: center;
    background-size: cover;
    height: 400px;
}
.oportunidadesContenido{
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    padding: 50px 100px 0px 100px;
    background-color: var(--mi-light); 
}
.oportunidadesImg{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.oportImg{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.oportImg img {
    width: 180px;
}

/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Nuestros Productos */
.heroNuestrosProductos{
    background-image: url("/images/identidad-sitio/heroNuestrosProductos.jpg");
    background-position: center;
    background-size: cover;
    height: 400px;
}
.NuestrosProductosContenido{
    background-color: var(--mi-light);
    padding: 100px;
}
.nuestrosProductosCajas{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}
.cajaProducto{
    border: 2px solid var(--mi-warning);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cajaProducto img{
    max-width: 200px;
    margin-bottom: 20px;
}
.cajaProducto h4{
    margin-bottom: 20px;
    margin-top: 20px;
}



/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Pataformas Beneficios */
.heroPataformasBeneficios{
    background-image: url("/images/identidad-sitio/heroPlataformasBeneficios.jpg");
    background-position: center;
    background-size: cover;
    height: 400px;
}

/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Sostenibilidad */
.herosostenibilidad{
    background-image: url("/images/identidad-sitio/heroSostenibilidad.jpg");
    background-position: center;
    background-size: cover;
    height: 400px;
}
.sostenibilidadContenido{
    background-color: var(--mi-light);
    padding: 100px;
}
.sostenibilidadContenido h4{
    font-size: 20px;
    font-weight: 600;
    color: var(--mi-dark);
    margin-top: 30px;
}




/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Energias renovables */
.heroEnergias{
    background-image: url("/images/identidad-sitio/heroEnergias.jpg");
    background-position: center;
    background-size: cover;
    height: 400px;
}
.energiasImg{
    border: 2px solid var(--mi-warning);
    padding: 20px;
}
.energiasImg img{
    width: 100%;
}




/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Login */
.loginContenido{
    display: grid;
    grid-template-columns: 4fr 7fr;
    padding: 100px 50px;
    background-color: var(--mi-light);
    align-items: center;
}
.formTxt{
    padding: 30px;
}
.formLogin{
    background-color: var(--mi-dark);
    padding: 30px;
    color: white;
}
.formLogin a{
    color: white;
    transition: all .5s ease;
}
.formLogin a:hover{
    color: var(--mi-warning);
}




/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* RB */

.heroRB{
    background-image: url("/images/identidad-sitio/heroRB.png");
    background-position: center;
    background-size: cover;
    padding: 100px 100px;
}
.contenedorRB{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 100px;
    background-color: white;
}
.contenedor2RB{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 100px;
    background-color: var(--mi-light);
}
.entrarARB{
    background-color: var(--mi-warning);
    padding: 20px;
    text-align: center;
}
.entrarARB a{
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}
.entrarARB a:hover{
    color: var(--mi-danger);
}
.contenedor3RB{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 100px;
    background-color: var(--mi-dark);
}
.contenedor4RB{
    padding: 100px;
    background-color: white;
}
.contenedor5RB{
    padding: 100px;
    background-color: var(--mi-light);
}
.marcasRB{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 30px;
}
/* .contenedorPreguntasRB{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
} */




/* ################################################################### */
/* ################################################################### */
/* ################################################################### */
/* Responsive */
@media (max-width:992px) {
    #heroHome{
        padding: 0 30px;
    }
    .textoHero{
        font-size: 40px;
    }
    .contTextHero p{
        font-size: 20px;
    }
    .nuestroClaim{
        grid-template-columns: 1fr;
    }
    .conocenos{
        grid-template-columns: 1fr;
    }
    .contenedorConocenos{
        padding: 50px;
    }
    .oportunidadesTextos{
        grid-template-columns: 1fr;
    }
    .desarrollosCabecera{
        display: block;
    }
    .desarrollosLogos img{
        margin-top: 50px;
    }
    .caracteristicas{
        padding: 100px 0;
        /* display: grid;
        grid-template-columns: 1fr; */
    }
    .sostentabilidad{
        grid-template-columns: 1fr;
    }
    .marcasContenido{
        grid-template-columns: 1fr;
        padding: 50px;
    }
    .marcasLogos{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .oportunidadesContenido{
        grid-template-columns: 1fr;
        padding: 50px;
    }
    .nuestrosProductosCajas{
        grid-template-columns: 1fr;
    }
    .NuestrosProductosContenido{
        padding: 50px;
    }
    .sostenibilidadContenido{
        padding: 50px;
    }
    .heroRB{
        padding: 50px;
    }
    .contenedorRB{
        padding: 50px;
    }
    .contenedor2RB{
        padding: 50px;
    }
    .contenedor3RB{
        padding: 50px;
    }
    .marcasRB{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .contenedor4RB{
        padding: 50px;
    }
}

@media(max-width:678px) {
    .contenedorAmarillo{
        padding: 10px 50px;
    }
    .contenedorMarcas{
        padding: 50px;
    }

    .contenedorOportunidades{
        padding: 50px;
    }
    .desarrollosPlataformas{
        padding: 50px;
    }
    .desarrollosLogos{
        grid-template-columns: 1fr;
        text-align: center;
    }
    .desarrollosLogos img{
        margin-top: 30px;
    }
    .desarrollosCabecera{
        text-align: center;
    }
    .botonMasBlanco, .botonMasNegro{
        justify-content: center;
    }
    .caracteristicas{
        display: grid;
        grid-template-columns: 1fr;

    }
    .oportunidadesImg{
        grid-template-columns: 1fr;
    }
    .contenedorInfo{
        grid-template-columns: 1fr;
    }
    .marcasLogos{
        grid-template-columns: 1fr;
    }
    .oportImg{
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .contenedorRB{
        grid-template-columns: 1fr;
    }
    .contenedor2RB{
        grid-template-columns: 1fr;
    }
    .contenedor3RB{
        grid-template-columns: 1fr;
    }
    .marcasRB{
        grid-template-columns: 1fr;
    }
}