@font-face {
  font-family: 'quickly';
  src: url('../fonts/quickly.ttf') format('truetype');
}

@font-face {
  font-family: 'dosis';
  src: url('../fonts/dosis.ttf') format('truetype');
}
html{
	scroll-behavior: smooth;
}
body{
	margin:0;
	padding: 0;
}

#nav_content.scrolled{
	background-color: white;
	color:black;
}

.movil_whatsapp{
	display: none;
}

.escritorio_whatsapp{
	display: inherit;
}

.whatsapp_btn{
	position: fixed;
    bottom: 30px;
    right: 20px;
    width: auto;
    height: auto;
    z-index: 9999999;
	background-color: #f9fafc;
	padding:15px;
	border-radius: 50%;
	border-style: solid;
	border-color: #00b341;
	border-width: 2px;
	-webkit-box-shadow: 9px 10px 29px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 9px 10px 29px -15px rgba(0,0,0,0.75);
	box-shadow: 9px 10px 29px -15px rgba(0,0,0,0.75);
}

.phone_btn{
	position: fixed;
    bottom: 110px;
    right: 20px;
    width: auto;
    height: auto;
    z-index: 9999999;
	background-color: #f9fafc;
	padding:15px;
	border-radius: 50%;
	border-style: solid;
	border-color: #00b341;
	border-width: 2px;
	-webkit-box-shadow: 9px 10px 29px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 9px 10px 29px -15px rgba(0,0,0,0.75);
	box-shadow: 9px 10px 29px -15px rgba(0,0,0,0.75);
}

.submenu{
	padding-top: 20;
}

.flex_content{
	display:flex;
	width: 75%;
	padding:12.5%;
	padding-top: 5%;
	padding-bottom: 5%;
	background:linear-gradient(top to bottom, #d8d9db, #f9fafc);
	overflow: hidden;
}
.flex_item{
	width:50%;
	
}

#likes_gif{
	position:absolute;
	z-index:9999999;
	height: 200px;
	bottom:60;
	left:125px;
}

.phone_content{
	width:250px;
	height: 500px;
	overflow: hidden;
	position:relative;
	margin:auto auto;
	transform: translateX(-200px);
	opacity: 0;
	transition: all 0.7s ease-in-out;
}

.animation_de{
	transform: translateX(200px);
	transition: all 0.5s ease-in-out;
	opacity: 0;
}

.aparicion{
	transform: translateX(0px);
	opacity: 100%;
}



#phone_mockup{
	width: 250px;
	height: 500px;
	position:absolute;
	top:0;
	left:0;
	z-index: 999999;
	
}

#video_phone{
	height: 500px;
	width: 250px;
	z-index: 99999;
	object-fit: cover;
	position:absolute;
	top:0;
	left:0;
	border-radius: 40px;
}

.phone_content img{
	height: 100%;

}

.negativo{
	color:black;
}

.normal{
	color:white;
}

.contenedor_snap{
	scroll-snap-type:y mandatory;
}

.snap_anclaje{
	scroll-snap-align:center;
}

p{
	font-family: 'quickly';
}

header{
	overflow: hidden;
}

nav{
	width: calc(100%);
	display: flex;
    position: fixed;
    justify-content: right;
	text-align: right;
	z-index:9999;
	transition: background-color 0.5s ease;
}

.submenu ul{
	display:none;
	position:absolute;
	font-family: 'dosis';
	padding: 0;
	list-style: none;
	text-align: left;
}

.submenu ul li{
	margin-top:7px;
	margin-bottom:7px;
}
.submenu ul li a{
	padding: 0;
	padding-left: 20px;
	padding-right: 20px;
	
	text-decoration: none;
	color:black;
	text-decoration: none;
}

.submenu:hover ul{
	display:inherit;
	background-color: white;

}


/*--- RECIBIR INFORMACIÓN------*/
.flex_biseccion{
	display:flex;
	width:100%;
}

.flex_item_biseccion{
	width:50%;
	padding: 5% 5% 5% 5%;
}

.margin_bottom_reduce{
	margin-bottom: 0.5em;
}


form{
	font-family: 'dosis';
	font-size: 4em;
	text-align: left;
	width:80%;
}
legend{
	font-weight: 100;
	font-size: 0.8em;
}

.input_form{
	width:100%;
	font-size: 0.3em;
	font-weight: 100;
	padding:20px 10px 20px 10px;
	margin-top: 10px;
}

.button_form{
	width:70%;
	font-size: 0.2em;
	font-weight: 100;
	padding:20px 10px 20px 10px;
	margin-top: 20px;
	background-color: #9900ff;
	color:white;
	border:none
}

#mail_patron{
	background-image: url("../img/patron_mail.webp");
	background-repeat: repeat;
	background-size: 500px 500px;
	opacity: 0.3;

}

/*----EFECTOS-----*/

.title_let{
	font-family: 'dosis';
	font-weight: 100;
	font-size: 2em;
	line-height: 1em;
	margin-top:10px;
}
@keyframes rotacion{
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.rotando {
  animation: rotacion 0.5s ease-in-out; /* Aplica la animación durante 1 segundo */
}

.hidden{
	opacity:0;
	transition: all 1s;
	filter: blur(5px);
	transform: translateX(-90%);
	z-index:100;
}
.hidden_d{
	opacity:0;
	transition: all 1s;
	filter: blur(5px);
	transform: translateX(100%);
	z-index:100;
}
.hidden_r{
	opacity:0;
	transition: all 1s;
	filter: blur(5px);
	transform: translateX(0%);
	z-index:100;
}
.show{
	opacity:1;
	filter: blur(0px);
	transform: translateX(0%);
	z-index:100;
}
.parallax{
	z-index:100;
}
/*-------HEADER------*/

.indice{
	font-family: 'quickly';
	font-size: 1.3em;
	text-decoration: none;
	padding:20px;
}


.video_layer{
	width: 100%;
	height: calc(200vh);
	overflow: hidden;
	z-index: -10;
	background-color: black;
}

.contenedor_video{
	width: 100%;
	height: calc(100vh);
	overflow: hidden;
}

.black_layer{
	position: fixed;
	width: 100%;
	height: calc(100vh);
	background-color: black;
	opacity: 0.2;
	z-index: 1;
}

.video_player{
	width:100%;
	position: fixed;
	z-index: 0;
}

.logo{
	position: relative;
	width: 50%;
	padding: 20px;
	height: calc(100vh);
	z-index: 2;
}

#tressesenta{
	color:white;
	font-size:5em;
	font-family: 'quickly';
	font-weight: 10;
	bottom:20px;
	position: absolute;
	transform: translateX(0%);
	filter: blur(0px);
}
.portada_flex{
	display: inline-flex;
	width: 100%;
	z-index:100;
}
.lettering{
	position: relative;
	width: 50%;
	height: calc(100vh);
	color:white;
	font-family: 'quickly';
	z-index: 2;
}
.arrow_layer{
	width: 100%;
	position:fixed;
	z-index: 10;
	bottom:30px;
	text-align: center;
}
.lettering_content{
	line-height: 0.8em;
	width: 90%;
	position:absolute;
	top:50%;
	left:50%;
	text-align: center;
	font-size: 2.2em;
	transform: translate(-55%, -50%);
}
.lettering_secundario{
	position: relative;
	width:100%;
	height: calc(100vh);
	z-index:10;
	text-align: center;
}
.lettering_content_secundario{
	color:white;
	font-family: 'quickly';
	line-height: 0.8em;
	width: 90%;
	position:absolute;
	top:0%;
	left:50%;
	text-align: center;
	font-size: 2.2em;
	transform: translate(-50%, -50%);
}
#background_logo{
	width: 80%;
	height: auto;
}

/*----SERVICIOS------*/
.margin_left{
	margin-left:20%;
}
.margin_top{
	margin-top:50px;
}
.boton_accion{
	bottom:50px;
	background-color: #9900ff;
	color:white;
	font-family: 'dosis';
	box-shadow: 5px 5px 10px 5px #ccc;
	text-align: center;
	font-size: 1.5em;
	padding: 15px;
	width:fit-content;

}

.btn_ajustado{
	width:100%;
	text-align: right;
}
.ajustado{
	position: relative;
	left:95%;
	top:0;
	transform: translateX(-100%);

}
.contenido_accion{
	margin:4px;
	width:60%;
}
#servicios{
	width: 100%;
	text-align: left;
	background-color: #f9fafc;
}
.plataforma_service{
	width: 60%;
	text-align: left;
	padding: 5%;
	padding-right: 0;
}

.titulo_servicio{
	font-size:6em;
	font-weight: 100;
	margin-top:0;
	font-family: 'dosis';
}

.column_layout{
	width:40%;
	padding: 5%;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap: 5%;
}

.flex_service{
	display: flex;
	width:100%;

}
.padding_reverse{
	padding-right: 5%;
	width:55%;	
}
.column_content{
	width:100%;
	height: 100%;
	padding: 5%;
	
}
.adorno_item{
	width: 20%;
	height: 3px;
	background-color: #9900ff;
}
.titulo_columna{
	margin-top: 10px;
	font-family: 'dosis';
	font-weight: 300;
	font-size: 1.5em;

}

/*----Secciones----*/

.section_layout{
	position: relative;
	height: auto;
	width: 100%;
	background-color: #f9fafc;
	z-index:100;
	margin: -1px;
}

/*----RESPONSIVE------*/
.movil{
	display: none;
}

.logo_movil{
	position:relative;
	height: calc(100vh);
	width: 100%;
	z-index: 100;
}




/*-----Espacialidad-------*/
.bi_layout{
	display: flex;
	width: 100%;
	height: auto;
	background-color: #f9fafc;
}

.block{
	width: 40%;
	padding: 5%;
	text-align: left;
}

#background_content{
	background-image: url('../img/especial.webp');
	background-position: center;
	background-size: auto 100%;
}

#background_content_2{
	background-image: url('../img/especial_2.webp');
	background-position: center;
	background-size: auto 100%;
}

.titulo_2{
	font-family: 'dosis';
	font-size: 3em;
	margin-top:0;
	font-weight: 100;
}

.sub_titulo_2{
	font-family: 'dosis';
	font-size: 1.5em;
	margin-top:0;
	font-weight: 100;
}


.titulo_1{
	font-family: 'dosis';
	font-size: 6em;
	margin-top:0;
	font-weight: 100;
}
.titulo_1_in{
	font-family: 'dosis';
	font-size: 4em;
	margin-top:0;
	font-weight: 100;
	color:white;
	background-color: black;
}



/*------slider--------*/

@keyframes slider_animation{
	0%{
		transform: translateX(0);
	}
	100%{
		transform: translateX(-100%);
	}
}
@keyframes slider_animation_movil{
	0%{
		transform: translateX(0);
	}
	100%{
		transform: translateX(-320%);
	}
}
.galeria {
  width: 100%;
  overflow: hidden;
}

.padding_top{
	padding-top:7%;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  animation: slider_animation 50s linear infinite;
}

.slider img {
  height: auto;
}

.slider img:hover {
  scale:120%;
}


.img_slider{
	width:25%;
}

/*-------CONTACTO-------*/
#contacto{
	width: calc(100% - 200px);
	padding: 100px;
}
.contacto_medio{
	text-align: center;
}

.contacto_medio h3{
	margin:0;
}

.num_telefono{
	margin-top: 60px;
	text-decoration: none;
	font-size:4em;
	font-family: 'quickly';
	color:black;
}

.pre_numero{
	font-size: 2em;
}

.contacto_icons_content{
	display:flex;
	width:40%;
	padding-left: 30%;
	padding-right: 20%;
	justify-content:space-evenly;
	margin-top: 60px;
	margin-bottom: 60px;
}


@media screen and (max-width: 1250px) {
  	.indice{
  		font-size: 1em;
  	}
}



@media screen and (max-width: 1100px) {
  	.video_player{
		height: calc(100vh);
		width:auto;
		position: fixed;
		z-index: 0;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}



@media screen and (max-width: 1000px) {
	.flex_item_biseccion{
		width:100%;
		padding: 5% 10% 5% 10%;
		text-align: center;
	}
	form{
		text-align: center;
		width:100%;
	}
	legend{
		font-size: 0.5em;
	}

	.flex_content{
		flex-direction: column-reverse;
		padding-top: 80px;
	}
	.flex_item {
		width: 100%;
		text-align: center;
	}
	.desplegado{
		background-color: white;
		width:100%;
		padding-bottom: 10px;
		overflow: hidden;
		height: 0;
		opacity: 0;
		transition: all 0.5s ease-in-out;
	}

	.flex_list{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ajustado{
		left:0;
		transform: translateX(0);
	}

	.item_menu_list{
		font-family: 'dosis';
		margin:20px;
		font-size: 1.6em;
		color:gray;
		text-decoration: none;
	}

	#contacto{
		padding: 10%;
		width: 80%;
	}
	.contacto_icons_content{
		padding-left: 10%;
		padding-right: 10%;
		width: 80%;
	}

	.num_telefono{
		font-size: 2em;
	}
	/*------efectos-------------*/
	.hidden{
		transition: all 0.8s;
	}
	.hidden_d{
		transition: all 0.8s;
	}
	.hidden_r{
		transition: all 0.8s;
	}
	.show{
		opacity:1;
		filter: blur(0px);
		transform: translateX(0%);
		z-index:100;
	}
	/*-------------*/
	.video_layer{
		height: calc(265vh);
	}
	.movil{
		display:inherit;
	}
	

	#btn_menu{
		filter:invert(50%);
	}
	.logo_menu{
		width: 50px;
		height: 50px;
		margin-left: 10px;
	}

	h2{
		font-size: 1.5em;
	}
	p{
		font-size: 1em;
	}
	nav{
		text-align: right;
		width: calc(100% - 20px);
		position: fixed;
		z-index: 9999;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.center_text{
		position: relative;
		width: 90px;
		height: auto;
		font-size: 1.5em;
	}
	.flex_menu_c{
		color:gray;
		font-size: 1.3em;
		display: inline-flex;
		padding:5px 10px 5px 20px;
		border-radius: 10px;
	}

	.fondo_nav{
		background:rgba(255,255,255);
	}


	#tressesenta{
		display:none;
	}
	.portada_flex {
	    display: flex;
	    width: 100%;
	    flex-direction: column;
	    z-index: 100;
	    height: calc(65vh);
	}

	#background_logo {
	    position: absolute;
	    width: 80%;
	    height: auto;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    left: 50%;
	}
	
	.lettering {
	    position: relative;
	    width: 100%;
	    height: calc(100vh);
	    color: white;
	    font-family: 'quickly';
	    z-index: 2;
	}
	.lettering_content {
	    line-height: 0.8em;
	    width: calc(100% - 40px);
	    position: absolute;
	    top: 50%;
	    left: 0;
	    text-align: center;
	    font-size: 2.2em;
	    transform: translate(0%,-50%);
	    padding:20px;
	}

	.lettering_secundario{
		width: calc(100% - 40px);
		padding: 20px;
	}

	.lettering_content_secundario {
		transform: translate(-50%,0%);
	}

	.logo {
	   display:none;
	}

	.escritorio{
		display: none;
	}
}

@media screen and (max-width: 780px){
	.movil_whatsapp{
		display: inherit;
	}

	.escritorio_whatsapp{
		display: none;
	}

	#navegacion_movil{
		height: auto;
		overflow: hidden;
		display: inherit;
		opacity: 100;
		transition: opacity 0.5s ease-in-out;
	}
	.plataforma_service {
		padding: 10%;
		width: 80%;
	}
	

	.titulo_servicio{
		font-size: 3.5em;
	}
	.column_layout{
		width: 100%;
		padding: 0;
		grid-template-columns: repeat(1,1fr);
		display:flex;
		flex-direction: column;
	}
	.column_content{
		padding: 10%;
		width:80%;
		padding-bottom: 0;
	}
	.plataforma_service{
		padding: 10%;
		width: 80%;
		padding-top: 80px;
	}
	.flex_service{
		flex-direction: column;
	}
	.reverse{
		flex-direction: column-reverse;
	}
	.section_layout p{
		font-size: 1.3em;
	}
	h2{
		font-size: 0.9em;
	}
	p{
		font-size: 0.7em;
	}
	.center_text{
		position: relative;
		width: 60px;
		height: auto;
		font-size: 1.5em;
	}
	.title_let{
		font-family: 'dosis';
		font-weight: 100;
		font-size: 1.5em;
		line-height: 1em;
		margin-top:10px;
	}

	.img_slider{
		width: 80%;
	}

	.bi_layout{
		flex-direction: column;
	}

	.slider{
		animation: slider_animation_movil 50s linear infinite;
	}

	#background_content{
		height: calc(70vh);
	}
	#background_content_2{
		height: calc(70vh);
	}

	.block{
		width: 80%;
		padding:10%;
	}

	.escritorio{
		display: none;
	}
}