* {
	margin: 0;
	padding: 0;


	font-family: Arial;
}

body {
	overflow-x: hidden;
}

#contacto {
	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 4vw;
	color: white;
	background-color: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(16px);
}

#inicio {
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;
}

#imagen_zurriola {
	pointer-events: none;
	user-select: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 53vw;
	object-fit: cover; /* Ajusta la imagen para llenar completamente el espacio sin distorsionar */
	z-index:  -1; /* Coloca la imagen detrás del contenido */
}

#imagen_logo {
	pointer-events: none;
	user-select: none;
	width: 53vw;
	object-fit: cover; /* Ajusta la imagen para llenar completamente el espacio sin distorsionar */
	z-index: 1; /* Coloca la imagen detrás del contenido */
	transform: translateY(100%); /* Empieza oculta fuera de la pantalla */
	animation: slideIn 1s forwards; /* Aplica la animación */
}

@keyframes slideIn {
    to {
        transform: translateY(0); /* Desplaza la imagen hacia arriba */
    }
}

#imagen_montaña {
	pointer-events: none;
	user-select: none;
	position: absolute;
	top: 19vw;
	left: 39.1vw;
	width: 5vw;
	object-fit: cover; /* Ajusta la imagen para llenar completamente el espacio sin distorsionar */
	z-index:  2; /* Coloca la imagen detrás del contenido */ 
}

#imagen_ola {
	pointer-events: none;
	user-select: none;
	position: absolute;
	top: 36.8vw;
	left: 62.5vw;
	width: 5.5vw;
	object-fit: cover; /* Ajusta la imagen para llenar completamente el espacio sin distorsionar */
	z-index:  2; /* Coloca la imagen detrás del contenido */ 
}

#triangulo {
	z-index: 3;
	background-color: white;
	display: flex;
	align-items: center;
}

#triangulo #triangulo_izquierda {
	transform: rotate(5deg);
	background-color: white;
	position: absolute;
	top: 47vw;
	left: -7vw;
	width: 60vw;
	height: 20vw;
	z-index: 3;
}

#triangulo #triangulo_derecha {
	transform: rotate(-5deg);
	background-color: white;
	position: absolute;
	top: 47vw;
	left: 47vw;
	width: 60vw;
	height: 20vw;
	z-index: 3;
}

#contenido {
	position: relative;
	z-index: 4;
	height: 100vw;
	background-color: white;
}

#contenido #imagen_difuminada {
	pointer-events: none;
	user-select: none;
	left: 0vw;
	top: 0vw;
	opacity: 0.2;
	width: 100%;
	position: absolute;
	filter: blur(15vw);
}

#contenido .titulo {
	margin-top: 1vw;
	font-size: 2.5vw;
	color: black;
	text-align: center;
}

#contenido #cajas {
	display: flex;
	flex-direction: row;

	padding: 4vw;
	color: black;
}

#contenido #cajas .cajas_caja {
	overflow: hidden;
	position: relative;
	padding: 2vw;
	margin: 0 2vw;
	border-radius: 0.5vw;
	border: solid 0.1vw black;
	width: 100%;
	height: 20vw;
}

#contenido #cajas .cajas_caja:first-child {
	margin-left: 0;
}

#contenido #cajas .cajas_caja:last-child {
	margin-right: 0;
}

#cajas .cajas_caja i {
	font-size: 3vw;
}

#cajas .cajas_caja h2 {
	position: relative;
	margin-top: 1vw;
	z-index: 2;
	font-size: 1.8vw;
}

#cajas .cajas_caja p {
	position: relative;
	z-index: 2;
	font-size: 1.3vw;
}

/* CAJA ALQUILER */
#alquileres:hover {
	background-color: rgba(255, 221, 124, 0.4);
	cursor: pointer;
}

#alquileres #imagen_tablas {
	opacity: 0.7;
	display: none;
	transform: rotate(-10deg);
	width: 20vw;
	top: 11vw;
	left: 12vw;
	position: absolute;
	z-index: 1;
	animation: aparecer_tablas 0.1s ease-out forwards; /* Aplicamos la animación */
}

#alquileres:hover > #imagen_tablas {
	display: block;
}

@keyframes aparecer_tablas {
    from {
        transform: rotate(-10deg) scale(0);
    }
    to {
        transform: rotate(-10deg) scale(1);
    }
}

#alquileres:hover > i {
	color: white;
	padding: 0.7vw 0.5vw 0.5vw 0.5vw;
	border-radius: 10px;
	width: 3vw;
	height: 3vw;
	background-color: #FFC95E;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s ease;
}

/* CAJA CURSOS */
#cursos:hover {
	background-color: rgba(124, 166, 255, 0.4);
	cursor: pointer;
}

#cursos #imagen_surf {
	opacity: 0.6;
	transform: none;
	display: none;
	width: 32vw;
	top: 2.3vw;
	left: 0vw;
	position: absolute;
	z-index: 1;
	animation: aparecer_ola 0.1s ease-out forwards; /* Aplicamos la animación */
}

#cursos:hover > #imagen_surf {
	display: block;
}

@keyframes aparecer_ola {
    from {
        transform: translateY(100%); /* Empieza desde abajo */
    }
    to {
        transform: translateY(0); /* Se desplaza hacia su posición original */
    }
}

#cursos:hover > i {
	color: white;
	padding: 0.7vw 0.5vw 0.5vw 0.5vw;
	border-radius: 10px;
	width: 3vw;
	height: 3vw;
	background-color: #A8BEFF;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s ease;
}

/* CAJA ACTIVIDADES */
#actividades:hover {
	background-color: rgba(104, 209, 108, 0.4);
	cursor: pointer;
}

#actividades #imagen_yoga {
	opacity: 0.6;
	transform: none;
	display: none;
	width: 20vw;
	top: 2.9vw;
	left: 7.6vw;
	position: absolute;
	z-index: 1;
	animation: aparecer_ola 0.1s ease-out forwards; /* Aplicamos la animación */
}

#actividades:hover > #imagen_yoga {
	display: block;
}

@keyframes aparecer_ola {
    from {
        transform: translateY(100%); /* Empieza desde abajo */
    }
    to {
        transform: translateY(0); /* Se desplaza hacia su posición original */
    }
}

#actividades:hover > i {
	color: white;
	padding: 0.7vw 0.5vw 0.5vw 0.5vw;
	border-radius: 10px;
	width: 3vw;
	height: 3vw;
	background-color: #68D16C;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s ease;
}

/* OLAS */
#olas {
	display: flex;
	align-items: center;

	overflow: hidden;
	position: relative;
	height: 25vw; /* Ajusta la altura como desees */
	border: solid black;
	border-width: 0.1vw 0vw;
	margin-top: 2vw;
	margin-bottom: 4vw;
	z-index: -22;
}

#olas #imagen_surfeando {
	pointer-events: none;
	user-select: none;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ajusta la imagen para llenar completamente el espacio sin distorsionar */
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}

#text {
	display: flex;
	flex-direction: row;
	top: 1vw;
	width: 44.7%;
	z-index: 9999;
	position: absolute;
	animation: moveText 5s linear infinite;
}

#text h2 {
    color: transparent;
    /* Hace que el texto interior sea transparente */
    -webkit-text-stroke: 2px #303030;
    z-index: 0;
	font-size: 2.5vw;
	margin-left: 2vw;
}

#text_dos {
	display: flex;
	flex-direction: row;
	top: 21.2vw;
	width: 44.7%;
	z-index: 9999;
	color: white;
	position: absolute;
	animation: moveText 5s linear infinite;
}

#text_dos h2 {
	color: transparent;
    /* Hace que el texto interior sea transparente */
    -webkit-text-stroke: 2px #303030;
    z-index: 0;
	font-size: 2.5vw;
	margin-left: 2vw;
}

@keyframes moveText {
	0% {
	  transform: translateX(-4%);
	}
	100% {
	  transform: translateX(-100%);
	}
}

/* API */
#api {
	padding-left: 5vw;

	width: 100%;
	display: flex;
	flex-direction: row;

	color: white;
	display: flex;
	flex-direction: row;
	z-index: 2;
}

#api_izquierda {
	height: 100%;
	width: 35%;
}

#api_izquierda h2 {
	font-size: 10vw;
}

#api_derecha {
	padding: 1.3vw;

	display: flex;
	flex-direction: column;
	width: 65%;
}

#api_derecha h3 {
	font-size: 4vw;
}

#api_derecha #derecha_row {
	margin-top: 0.5vw;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#api_derecha #derecha_row h4 {
	font-weight: normal;
	font-size: 2.7vw;
	margin: 0vw 0.5vw 0vw 2vw;
}

#api_derecha #derecha_row i {
	font-size: 3.5vw;
}

#api_derecha #derecha_row #flecha {
	z-index: 2;
	font-size: 2.5vw;
	color: white;
}


/* BUSCADOR */
#evento_buscador {
	margin-top: 2vw;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#buscador {
	color: black;
	padding-left: 15px;
	box-sizing: border-box;
	border: solid 0.1vw #FFFFFF;
	width: 40%;
	height: 2.4vw;
	font-size: 1vw;
	background-color: transparent;
	border-radius: 0px 10px 10px 0px;
	outline: none; /* Esto elimina el borde de enfoque */
	background-color: rgba(189, 189, 189, 0.2);
}

#buscador:hover {
  background-color: rgba(189, 189, 189, 0.3);
}

.fi-tr-issue-loupe {
	border: solid #FFFFFF;
	box-sizing: border-box;
	border-width: 0.1vw 0px 0.1vw 0.1vw;
	padding: 10px;
	height: 2.4vw;
	width: 2.4vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(189, 189, 189, 0.3);
	border-radius: 10px 0px 0px 10px;
	font-size: 1vw;
	color: black;
}