@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'OwenPro-SemiBold';
    src: url("../../fonts/Owen Pro/OwenPro-SemiBold.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Medium';
    src: url("../../fonts/Owen Pro/OwenPro-Medium.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Regular';
    src: url("../../fonts/Owen Pro/OwenPro-Regular.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

:root {
    --aqua: #00A0AF;
	--verde: #8DBB00;
	--negro: #000000;
	--gris: #1F242D;
	--owenPro-600: 'OwenPro-SemiBold';
	--owenPro-500: 'OwenPro-Medium';
	--owenPro-400: 'OwenPro-Regular';
}
.container__galery{
	height:auto;
/*	width: 100vw;*/
}
.container__text-galery {
    text-align: center;
    padding: 2% 11% 2% 11%;
}
.container__text-galery h1{
	font-family: var(--owenPro-600);
	color: var(--aqua);
	font-size: 1.75rem;
	margin-bottom: 0px;
}
.container__text-galery p{
	font-family: var(--owenPro-500);
	color: var(--gris);
	margin-top: .5rem;
	text-wrap: pretty;
}
.container__imagenes-galeria {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	min-height:  463px;
  	position: relative;
}

#img_1 {
	grid-area: 1 / 1 / 3 / 6; 
}
#img_2 {
	grid-area: 1 / 6 / 3 / 13; 
}
#img_3 { 
	grid-area: 3 / 8 / 5 / 13; 
}
#img_4 { 
	grid-area: 3 / 1 / 5 / 8; 
}
.container__imagenes-galeria img {
  width: 100%;
  height: 100%; 
  object-fit: cover; 
  display: block;
  transition: opacity 0.3s ease;
}

.container__imagenes-galeria:hover {
  opacity: 0.8; 
}

.container__imagenes-galeria:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(219, 230, 237, 0.15); 
  pointer-events: none; 
}

.galeria-movil, .container__imagenes-galeriaMovil{
	display: none;
}


@media screen and  (max-width: 690px) {
.galeria-desktop{
	display: none;
	}
.galeria-movil{
	display: inherit;
}
.galeria-movil .swiper-slide img {
   display: block;
   width: 100%;
   height: 670px;
   object-fit: cover;
   overflow-y: hidden;
}
.swiper {
    width: 100vw;
    height: auto;
 }
.container__imagenes-galeriaMovil {
	display: block;
}
}