
/*ESTILOS GENERALES*/
.sombrear-en-hover{
    transition: 0.5s;
    &:hover{filter:grayscale(1);}
}
.div-fila{display:flex;justify-content:center;}
.espacio-fila{width:2%;}

/*ESTILOS CARRUSEL*/
@media (min-width: 979px){  /*ESCRITORIO*/
    .divTextoCarrusel{position:absolute; bottom:0; left:0; right:0; padding:15px; border-top:none; background:rgba(0, 0, 0, 0.2);}
    .imagenCarrusel{object-fit:cover; height:100%;}
    .tituloCarrusel{color:white !important; font-weight:bold;}
    .textoCarrusel{color:white !important; position:unset !important;}
    .filtroCarrusel{display:none;}
    .div-interior-carrusel{height:18.75vw; max-height:200px; overflow:hidden;}
    .div-interno{overflow:hidden; height:18.75vw; max-height:200px;}
}
@media (min-width: 639px) and (max-width: 978px){   /*TABLET*/
    .divTextoCarrusel{position:absolute; bottom:0; left:0; right:0; padding:15px; border-top:none; background:rgba(0, 0, 0, 0.2);}
    .imagenCarrusel{object-fit:cover; height:100%;}
    .tituloCarrusel{color:white !important; font-weight:bold;}
    .textoCarrusel{color:white !important; position:unset !important;}
    .filtroCarrusel{display:none;}
    .div-interior-carrusel{height:20vw; overflow:hidden;}
    .div-interno{overflow:hidden; height:20vw;}
}
@media (max-width: 638px){  /*MOVIL*/
    .linkCarrusel{display:flex; min-height:25vw;}
    .imagenCarrusel{height:100%; object-fit:cover; object-position:right;}
    .divTextoCarrusel{position:absolute; width:100%; bottom:0;}
    .tituloCarrusel{margin-left:5%; margin-right:5%; color:white; font-weight:bold;}
    .textoCarrusel{margin-left:5%; margin-right:5%; color:white; font-size:16px;}
    .filtroCarrusel{position:absolute; width:100%; height:25vw; top:0px; left:0px; filter:opacity(0.8);}
    .div-interno{overflow:hidden; height:25vw;}
}

/*ESTILOS PARRILLA*/
@media (min-width: 979px){  /*ESCRITORIO*/
    .div-celda{aspect-ratio:1/1; position:relative; overflow:hidden; margin:0; width:33%;}
    .link-celda{display:flex; height:100%; width:100%; overflow:hidden;}
    .imagen-celda{position:absolute; object-fit:cover;}
    .titulo-celda{position:absolute; padding-left:20px; bottom:10px; text-align: left; color:white; font-size: min(2vw, 22px); font-weight:bold; text-shadow: 1px 1px 2px black !important;}
    .espacio-horizontal{width:0.2vw;}
    .espacio-vertical{height:0.2vw;}
}
@media (min-width: 639px) and (max-width: 978px){   /*TABLET*/
    .div-celda{aspect-ratio:1/1; position:relative; overflow:hidden; margin:0; width:33%;}
    .link-celda{display:flex; height:100%; width:100%; overflow:hidden;}
    .imagen-celda{position:absolute; object-fit:cover;}
    .titulo-celda{position:absolute; padding-left:20px !important; bottom:10px; text-align: left; color:white; font-size: 2vw; font-weight:bold; text-shadow: 1px 1px 2px black !important;}
    .espacio-horizontal{width:0.3vw;}
    .espacio-vertical{height:0.3vw;}
}
@media (max-width: 638px){  /*MOVIL*/
    .div-celda{position:relative; width:100vw; height:20vw; overflow:hidden;}
    .link-celda{display:flex; height:100%; width:100%; overflow:hidden;}
    .imagen-celda{position:absolute; width:100%; height:100%; object-fit:cover;}
    .titulo-celda{position:absolute; padding-left:20px !important; margin:0; bottom:1.5vw; text-align: left; color:white; font-size: 5vw; font-weight:bold; text-shadow: 1px 1px 2px black !important;}
    .espacio-vertical{height:0.5vw;}
}

/*ESTILOS COMUNITAT UPC*/
@media (min-width: 639px){   /*ESCRITORIO Y TABLET*/
    .div-fila-comunitat{display:flex; justify-content:center;}
    .div-comunitat{width:32%; display:flex; flex-direction:column;}
    .imagen-comunitat{width:100%;}
    .texto-comunitat{text-align:justify;}

}
@media (max-width: 638px){   /*MOVIL*/
    .div-fila-comunitat{display:flex; flex-direction:column; justify-content:center;}
    .div-comunitat{width:100%; display:flex; flex-direction:column;}
    .imagen-comunitat{width:100%;}
    .texto-comunitat{text-align:justify;}

}

/*ESTILOS SERVEIS*/
.div-fila-serveis{display:flex; justify-content:center; flex-direction:row;}
.espacio-horizontal-serveis{width:1vw}
.div-serveis{width:35%; display:flex; flex-direction:column; align-items:center;}
.imagen-serveis{width:85%;}