.values{
    width: 100%;
    height: 50rem;
    display: flex;
}
.value{
    width: 50%;
    height: auto;
    padding: 9rem;
}

/* SERVICES */
.services{
    width: 100%;
    height: auto;
     padding-top: 10rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-image: url(/assets/img/bgcurve.svg);
     padding-bottom: 8rem;
}
.servicesTitle{
    width: 100%;
    text-align: center;
    font-family: var(--Main);
    color: var(--Rosa);
    font-size: 4.5rem;
}
.serviceContainer{
    width: 90%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(5,1fr);
    padding: 4rem;
    gap: 2.5rem;
}

.serviceElement{
    width:24rem;
    height: 7rem;
    background-color: var(--Rosa);
    border-radius: 25px;
    display: flex;
    overflow: hidden;
    gap: 10px;
}
.serviceImg{
    width: 30%;
    height: 100%;
    border-radius: 20px;
    background-color:var(--Turquesa);
    padding: 1.2rem;
}
.serviceContent{
    width: 70%;
    height: 100%;
    font-family: var(--Sec);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
}
/*STAFF*/
.staff{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 12rem;
}
.staffTitle{
    width: 100%;
    text-align: center;
    font-family: var(--Main);
    color: var(--Rosa);
    font-size: 4rem;
}

/*INSTALATION*/

.instalation{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-image: url(/assets/img/bgcurve.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding-bottom: 10rem;
}
.instalationTitle{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: var(--Main);
    color: var(--Rosa);
    font-size: 4rem;
    padding-top: 8rem;
}
.instalationContent{
    width: 100%;
    height: 90%;
    display: flex;
}
.instalationIMG{
    width: 50%;
    height: auto;
    padding: 6rem;
}
.instalationHolder{
    width: 50%;
    height: auto;
    display: flex;
    align-items:flex-start;
    justify-content: center;
    flex-direction: column;
    gap:4rem;
}

.instalationIcon{
    width: 80%;
    height: 9rem;
    display: flex;
    gap: 1rem;
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-family: var(--Sec);
    color: grey;
    padding: 1rem;
}
.instalationIcon p{
    width: 100rem;
    height: auto;
}

.instalationBtnBottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 15%;
}
.instalationBtnBottom a img{
    width: 25rem;
}


@media (max-width: 1024px) {

    /* =================== VALUES (Misión/Visión) =================== */
    .values {
        height: auto; /* Altura automática */
        flex-direction: column; /* Apilar Misión y Visión */
        align-items: center;
        padding: 3rem 1rem;
    }

    .value {
        width: 100%; /* Ocupar todo el ancho */
        max-width: 400px; /* Limitar el ancho */
        height: auto;
        padding: 1rem; /* Reducir padding */
        margin-bottom: 2rem;
    }

    /* =================== SERVICES (Servicios) =================== */
    .services {
        padding-top: 5rem; /* Ajustar padding superior */
        padding-bottom: 5rem; /* Ajustar padding inferior */
        background-image: none; /* Mejor rendimiento en móvil */
    }

    .servicesTitle {
        font-size: 2.5rem; /* Ajuste del título */
        margin-bottom: 2rem;
    }

    .serviceContainer {
        width: 90%;
        /* Dos columnas fijas como en la imagen de referencia */
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto;
        padding: 0;
        gap: 1rem; /* Reducir el espacio entre elementos */
    }

    .serviceElement {
        width: 100%; 
        height: auto;
        min-height: 4.5rem; /* Asegurar que los títulos largos quepan */
        gap: 0;
        /* El background-color ya está definido como var(--Rosa) */
        border-radius: 10px; /* Reducir borde */
    }
    
    .serviceImg {
        width: 30%;
        min-width: 50px;
        height: 100%;
        border-radius: 10px 0 0 10px; /* Sólo esquinas izquierdas */
        /* El background-color ya está definido como var(--Turquesa) */
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .serviceContent {
        width: 70%;
        padding: 0 0.5rem;
        font-size: 0.9rem; /* Fuente más pequeña para que quepan títulos largos */
        color: white; /* Color blanco para el texto dentro de la caja rosa */
        display: flex; 
        align-items: center;
        justify-content: flex-start; /* Alineación a la izquierda */
    }
    .serviceContent p {
        width: auto;
        line-height: 1.2;
        margin: 0;
    }


    /* =================== STAFF =================== */
    .staff {
        flex-direction: column; 
        gap: 2rem; /* Reducir el espacio entre elementos */
        padding: 5rem 1rem; /* Reducir padding general */
    }
    
    .staffTitle {
        font-size: 2.5rem; /* Ajustar el tamaño del título */
    }
    /* Las imágenes de staff deben tener un contenedor que permita que se ajusten al ancho */
    .staff img {
        width: 100%;
        max-width: 450px; 
        height: auto;
        margin: 0 auto;
        display: block;
    }


    /* =================== INSTALATION (Instalaciones) =================== */
    .instalation {
        background-image: none; /* Mejor rendimiento en móvil */
        padding-bottom: 3rem; /* Reducir padding inferior */
    }

    .instalationTitle {
        font-size: 1.8rem; 
        padding-top: 3rem; /* Ajustar padding superior */
    }

    .instalationContent {
        flex-direction: column; /* Apilar imagen y lista */
    }

    .instalationIMG {
        width: 100%; /* Ocupar todo el ancho */
        padding: 2rem 1rem;
        order: 1; /* Imagen arriba */
        text-align: center;
    }
    .instalationIMG img {
        width: 90%;
        max-width: 500px;
        height: auto;
    }

    .instalationHolder {
        width: 100%; 
        padding: 0 2rem;
        gap: 1rem; /* Reducir el espacio entre los puntos */
        order: 2; /* Lista de puntos abajo */
    }

    .instalationIcon {
        width: 100%;
        height: auto;
        font-size: 1.1rem;
        align-items: flex-start; /* Alinear el texto con el check */
        gap: 1rem;
        padding: 0;
        /* El color de fuente ya está definido como grey */
    }
    
    .instalationIcon img {
        width: 35px; 
        min-width: 40px;
        margin-top: 0;
    }

    .instalationIcon p {
        width: auto; /* Permitir que ocupe el ancho restante */
        padding-right: 1rem;
    }

    .instalationBtnBottom {
        width: 100%;
        justify-content: center; /* Centrar el botón */
        padding-right: 0; /* Eliminar el padding de escritorio */
        margin-top: 3rem;
    }
    .instalationBtnBottom a img {
        width: 18rem; /* Reducir el tamaño del botón */
        height: auto;
    }
}