@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
	--color_1: #fff;
	--color_2: #2596BA;
	--color_3: #8090A3;
	--negro:   #1f1f1f;
}
*{
	font-family: 'Poppins', sans-serif;
	font-weight: normal;
	box-sizing: border-box;
}
h2, h3{
	font-family: "Montserrat", serif;
	font-weight: bold;
}
body{
	overflow-x: hidden;
}
/* ========== HEADER ========== */
header{
	width: 100%;
	height: 100px;
	margin: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	background-color: var(--color_1);
	box-shadow: 0px 1px 4px var(--negro);
	position: fixed;
	top: 0;
	z-index: 10;
}
header>#logo, header>#card{
	height: 70%;
	width: auto;
	display: flex;
	align-items: center;
}
header>#logo>img{
	height: 100%;
}
header>#card{
	grid-gap: 3px;
	font-size: 1.5em;
	text-decoration: none;
	color: var(--negro);
}
header>#card>img{
	height: 80%;
}
/* ---------- MENU ---------- */
header>nav{
	display: block;
}
header>nav>ul{
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-gap: 5px;
	margin: 0;
}
header>nav>ul li{
	list-style: none;
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
}
.button, .button svg, .button rect{
	width: 160px;
	height: 40px;
}
.button{
	display: inline-block;
	max-width: 20rem;
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
	position: relative;
}
.shape{
	fill: transparent;
	stroke: var(--color_3);
	stroke-dasharray: 80 500; /* primer valor es para el largo de la linea*/
	stroke-dashoffset: -240; /* indica la posicion de la linea en el rectangulo*/
	stroke-width: 6px;
	transition:
			stroke-width 0.9s,
			stroke-dashoffset 0.9s,
			stroke-dasharray 0.9s;
}
.text {
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.05rem;
    color: var(--color_2);
    top: -2rem;
    position: relative;
    pointer-events: none;
}
.shape:hover {
    stroke-width: 3px;
    stroke-dashoffset: 0;
    stroke-dasharray: 760;
}
/* ========== BANNER ========== */
#Banner{
	width: 100%;
	aspect-ratio: 16/6;
	height: auto;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
}
#Banner img, #Banner video{
	width: 100%;
}
.swiper_banner{
	margin: 0;
	width: 100%;
	aspect-ratio: 16/6;
	height: auto;
}
/* ========== CUERPO ========== */
#Cuerpo{
	width: 100%;
}
/* ========== SERVICIOS ========== */
#Cuerpo>.servicio{
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
#Cuerpo>.reverso{
	flex-direction: row-reverse;
}
#Cuerpo>.servicio>.galeria{
	margin: 0;
	width: 50%;
	aspect-ratio: 3/2;
	height: auto;
	border-radius: 50px;
}
#Cuerpo>.servicio>.galeria>.swiper_gal{
	aspect-ratio: 3/2;
	border-radius: 50px;
}
#Cuerpo>.servicio>.galeria>.swiper_gal img{
	width: 100%;
	aspect-ratio: 3/2;
	object-fit: cover;
}
#Cuerpo>.servicio>.info{
	width: 50%;
	height: auto;
	padding: 20px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	grid-row-gap: 20px;
}
#Cuerpo>.servicio>.info>img{
	width: 13%;
	aspect-ratio: 1;
	height: auto;
}
#Cuerpo>.servicio>.info>h2{
	width: auto;
	height: auto;
	/* font-family: "Cormorant Garamond", serif; */
	/* font-weight: 300; */
  font-style: normal;
	font-size: 3em;
	color: var(--color_2);
}
#Cuerpo>.servicio>.info>h3{
	width: 100%;
	text-align: center;
}
#Cuerpo>.servicio>.info>p{
	width: 100%;
	text-align: center;
}
.redes{
	padding: 0;
	width: 80%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	grid-column-gap: 2em;
}
.redes>li{
	margin: 0;
	padding: 0;
	list-style: none;
}
.redes>li a{
	color: var(--color_3);
	text-decoration: none;
	transition: ease 1s;
}
.redes>li a i{
	font-size: 2.6em;
}
.redes>li a:visited{
	color: var(--color_3);
}
.redes>li a:hover{
	color: var(--color_2);
}
/* --------- BOTON DE CITA---------- */
.button2{
	color: var(--color_2);
	cursor: pointer;
	font-size: 1rem;
	line-height: 2.5rem;
	max-width: 200px;
	width: 100%;
	letter-spacing: 0.2rem;
	font-weight: bold;
	position: relative;
	text-decoration: none;
	text-align: center;
	display: flex;
	justify-content: center;
	transition: all 1s ease-in;
}
.button2:hover {
    color: var(--color_3);
}
.button2 svg {
    height: 40px;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
}
.button2 i{
	line-height: 2.4rem;
	margin-right: 5px;
}

.button2 rect {
    fill: none;
    stroke: var(--color_3);
    stroke-width: 2;
    stroke-dasharray: 450, 0;
    transition: all 0.5s linear;
}

.button2:hover rect {
    stroke-width: 5;
    stroke-dasharray: 60, 280;
    stroke-dashoffset: 68;
    stroke: var(--color_2);
    transition: all 2s cubic-bezier(
        0.22, 1, 0.25, 1
    );
}

/* Animaciones de las imagenes */
@keyframes show-imgi{
  from{
    opacity: 0;
		scale: 25%;
    /* transform: translateX(100%); */
  }
  to{
    opacity: 1;
		scale: 100%;
    /* transform: translateX(0); */
  }
}
@keyframes show-imgd{
  from{
    opacity: 0;
		scale: 25%;
    /* transform: translateX(-100%); */
  }
  to{
    opacity: 1;
		scale: 100%;
    /* transform: translateX(0); */
  }
}
#Cuerpo>.normal>.galeria{
	view-timeline-name: --imagei;
  view-timeline-axis: block;

  animation-timeline: --imagei;
  animation-name: show-imgi;

  animation-range: entry 5% cover 40%;
  animation-fill-mode: both;
}
#Cuerpo>.reverso>.galeria{
	view-timeline-name: --imaged;
  view-timeline-axis: block;

  animation-timeline: --imaged;
  animation-name: show-imgd;

  animation-range: entry 5% cover 40%;
  animation-fill-mode: both;
}


.lightbox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: -15px;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999999;
  visibility: hidden;
}
.texto-serv {
  position: relative;
  width: 40%;
  color: #fff;
  background-color: var(--color_2);
  border: 2px solid #fff;
  padding: 10px 20px;
}
.texto-serv h3{
	/* font-family: "Cormorant Garamond", serif; */
  text-align: center;
	letter-spacing: 0.1em;
  color: #fff;
  font-size: 2em;
  margin: 0;
}
.texto-serv ul{
	padding: 20px;
}
.texto-serv li{
  font-size: 1.2em;
	line-height: 1.4em;
  margin: 0;
  padding: 0;
  text-indent: 0;
}
#cerrar1, #cerrar2{
  position: absolute;
  font-size: 18px;
  background: #fff;
  color: #000;
  padding: 4px 6px;
  border-radius: 20px;
  top: -15px;
  right: -15px;
  cursor: pointer;
}
.visible {
  visibility: visible !important;
}


#reservar{
	width: 100%;
	aspect-ratio: 16/4;
	background-image: url("../images/fondo.jpg");
	background-size: cover;
	background-position: center;
	display: grid;
	place-content: center;
	gap: 2em;
	box-shadow: 0px 1px 4px var(--negro) inset;
}
#reservar>h2{
	font-size: 2.5em;
	color: var(--color_1);
	text-transform: uppercase;
	text-align: center;
}
#reservar>a{
	font-size: 1.8em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	color: var(--color_2);
}
#reservar i{
	margin-right: 15px;
}
#Cuerpo>.membresia{
	width: 90%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(100px, 1fr) minmax(300px, 1fr);
	grid-template-rows: 200px 200px;
	grid-template-areas:
	"titulo imagen"
	"texto imagen";
	justify-items: center;
	place-content: center;
}
#Cuerpo>.membresia>h2{
	text-align: center;
	/* font-family: 'Roboto', sans-serif; */
	color: var(--color_2);
	font-size: 4rem;
	align-self: center;
	grid-area: titulo;
}
#Cuerpo>.membresia>p{
	grid-area: texto;
}
#Cuerpo>.membresia>img{
	height: 90%;
	align-self: center;
	mask-image: linear-gradient(black 75%, transparent 90%);
	grid-area: imagen;
}
.espacio{
	height: 50px;
}
#Cuerpo>.paquetes{
	width: 90%;
	margin: 0 auto;
	display: grid;
	grid-column-gap: 30px;
	grid-row-gap: 15px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 80px 3fr;
}
#Cuerpo>.paquetes>h3{
	grid-column: 1/-1;
	text-align: center;
	font-size: 2.5rem;
	/* font-family: "Cormorant Garamond", serif; */
	color: var(--color_1);
	text-transform: uppercase;
	letter-spacing: 0.3rem;
	line-height: 80px;
	border-radius: 14px;
	background-color: var(--color_3);
}
#Cuerpo>.paquetes>ul{
	width: 100%;
	padding: 0;
	list-style: none;
	background-color: #DDD;
	border-radius: 14px;
}
#Cuerpo>.paquetes>ul:nth-child(3){
	background-color: #CCC;
}
#Cuerpo>.paquetes>ul>li{
	margin: 0;
	padding: 3px 10px;
}
#Cuerpo>.paquetes>ul>li:nth-child(1){
	padding: 10px 0;
	text-align: center;
	font-size: 1.5rem;
	color: var(--color_1);
	border-radius: 14px 14px 0 0;
	background-color: var(--color_2);
}
#Cuerpo>.paquetes>ul>li:nth-child(2){
	padding-bottom: 10px;
	font-weight: bold;
	text-align: center;
}
.no_aplica{
	color: red;
}

#mapa>iframe{
	width: 100%;
	aspect-ratio: 16/9;
}

.servicios>h3, .sociales>h3{
	text-align: center;
	font-size: 3em;
	margin-bottom: 25px;
}
.servicios>ul{
	width: 90%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-row-gap: 60px;
}
.servicios>ul>li{
	height: auto;
	margin: 0 auto;
}
.servicios>ul>li img{
	width: 100%;
	max-width: 240px;
	height: auto;
}
.servicios>ul>li p{
	width: 100%;
	text-align: center;
	padding: 10px 0;
	color: var(--color_2);
}

.sociales>ul{
	padding: 0;
	margin: 0 auto;
	width: 60%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.sociales>ul>li{
	margin: 0;
	padding: 0;
	list-style: none;
}
.sociales>ul>li a{
	color: var(--color_3);
	text-decoration: none;
	transition: ease 1s;
}
.sociales>ul>li a i{
	font-size: 4em;
}
.sociales>ul>li a:visited{
	color: var(--color_3);
}
.sociales>ul>li a:hover{
	color: var(--color_2);
}

.blq_somos{
	width: 90%;
	margin: 0 auto;
}
.blq_somos>h2{
	text-align: center;
}
.blq_somos>p{
	line-height: 1.5em;
	padding: 10px 100px;
	text-align: justify;
}
.blq_somos>iframe{
	width: 50%;
	margin: 0 25%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 12px;
}
.blq_somos>img{
	width: 60%;
	margin: 0 20%;
}

.valores>ul{
	width: 100%;
	margin: 40px auto 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-row-gap: 60px;
}
.valores>ul>li{
	text-align: center;
	display: flex;
	flex-flow: column;
	align-items: center;
	grid-row-gap: 10px;
}
.valores>ul>li img{
	width: 60px;
	height: auto;
}
.blq_torre{
	width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr .5fr;
  grid-template-rows: 30px 1fr 30px;
}
.texto_torre{
	padding: 25px 50px;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.texto_torre>h2{
	font-size: 1.8em;
	color: var(--color_2);
	margin-bottom: 20px;
	text-align: center;
}
.texto_torre>p{
	text-align: justify;
	line-height: 1.5em;
}
.blq_torre>img{
	width:100%;
	aspect-ratio: 5/3;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
.fondo_torre{
	display: block;
  background: url("../images/fondo_torre.jpg");
	background-size: cover;
	filter: blur(1px);
  grid-column: 3 / 5;
  grid-row: 1 / 4;
}

footer{
	width: 100%;
	margin: auto;
	background: var(--color_3);
	padding: 50px 0;
	text-align: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
}
footer>p{
	width: 70%;
	margin: 0;
	font-size: 1.2em;
	line-height: 1.2em;
	color: var(--color_1);
	display: flex;
	justify-content: center;
}
footer>a{
	width: 70%;
	color: var(--color_1);
	text-decoration: none;
}

/* Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------ */
@media screen and (min-width: 1920px) {

}

/* Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------ */
@media screen and (max-width: 1200px) {

}

/* Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

}

/* Extra small devices (phones, 600px and down)
------------------------------------------------------------------------ */
@media only screen and (max-width: 480px) and (orientation : portrait), (-webkit-device-pixel-ratio : 2), (-webkit-device-pixel-ratio : 3){

}

/*---------------------------------------------------------------------------*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	header>#logo, header>#card{
		height: 50%;
	}
	header>#logo>img{
		height: 100%;
	}
	header>#card>img{
		height: 70%;
	}
	header>#card{
		font-size: 1.2em;
	}
	header>nav>ul{
		grid-gap: 2px;
	}
	.button, .button svg, .button rect{
		width: 115px;
		height: 30px;
	}
	.button svg{
		display: grid;
		align-content: center;
	}
	.text{
		font-size: 1rem;
		line-height: 2rem;
	}
	.lines2{
		line-height: 1rem;
	}
	.shape{
		stroke-dasharray: 40 500; /* primer valor es para el largo de la linea*/
		stroke-dashoffset: -290; /* indica la posicion de la linea en el rectangulo*/
		stroke-width: 4px;
	}

	#Cuerpo>.servicio{
		margin: 50px 0;
		justify-content: center;
	}
	.reverso{
		flex-direction: column-reverse;
	}
	#Cuerpo>.servicio>.galeria{
		width: 90%;
		margin-top: 15px;
		border-radius: 15px;
	}
	#Cuerpo>.servicio>.galeria>.swiper_gal{
		border-radius: 15px;
	}
	#Cuerpo>.servicio>.info{
		width: 100%;
	}
	#Cuerpo>.servicio>.info>img{
		width: 35%;
	}
	#Cuerpo>.servicio>.info>h2{
		width: 100%;
		text-align: center;
		font-size: 2.5em;
	}
	#Cuerpo>.servicio>.info>ul{
		width: 100%;
		padding-left: 0;
	}

	.texto-serv {
	  width: 80%;
		padding: 10px;
	}
	.texto-serv h3 {
	  text-align: center;
	  color: #fff;
	  font-size: 2em;
	  margin: 0;
	}

	#reservar{
		aspect-ratio: 16/7;
	}
	#reservar>h2{
		font-size: 1.5em;
	}
	#reservar>a{
		font-size: 1.5em;
		font-weight: normal;
	}

	#Cuerpo>.membresia{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
		"titulo"
		"imagen"
		"texto";
	}
	#Cuerpo>.membresia>h2{
		font-size: 3rem;
	}
	#Cuerpo>.membresia>p{
		text-align: center;
	}
	#Cuerpo>.membresia>img{
		width: 60%;
		height: auto;
	}
	#Cuerpo>.paquetes{
		grid-template-columns: 1fr;
	}

	#mapa>iframe{
		aspect-ratio: 3/2;
	}

	.servicios>ul{
		grid-template-columns: 1fr;
	}
	.sociales>ul{
		width: 80%;
	}
	.sociales>ul>li a i{
		font-size: 3em;
	}

	.blq_somos>p{
		line-height: 1.5em;
		padding: 10px;
		text-align: justify;
	}
	.blq_somos>iframe{
		width: 100%;
		margin: 0;
	}
	.blq_somos>img{
		width: 100%;
		margin: 0;
	}
	.valores>ul{
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 50px;
	}
	.valores>ul>li i{
		font-size: 1.5em;
	}

	.blq_torre{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
	.texto_torre{
		padding: 15px;
	  grid-column: 1 / 2;
	  grid-row: 1 / 2;
	}
	.blq_torre>img{
		grid-column: 1 / 2;
	  grid-row: 2 / 3;
	}
	.fondo_torre{
		display: none;
	}
	footer>p{
		width: 90%;
		font-size: 1em;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	/* header{
		height: 60px;
	}
	#Banner{
		padding-top: 60px;
	}
	#Cuerpo>article>h2{
		font-size: 2.5em;
	} */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}