@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500&family=Tangerine:wght@700&display=swap");

html,
body {
	background-color: #007fff;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: "Rajdhani", "Erbaum", sans-serif, "Tangerine";
}

.inicio {
	width: 100vw;
	height: 100vh;

	background-image: url("./data/inicio/mapa01.svg"), linear-gradient(330deg, #00ced1, #007fff, #007fff);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.5s, opacity, 0.4s;
}
.descripcion {
	position: fixed;
	right: 7vw;
	top: 25vh;
	font-family: "Erbaum", sans-serif;
	color: #fff;
	text-align: center;
	max-width: 50vw;
}
.titulo {
	position: fixed;
	right: 7vw;
	top: 5vw;
	display: flex;
	flex-flow: row nowrap;
	font-family: "Erbaum", sans-serif;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add a transition */
}

.zoom {
	transform: scale(2); /* Zoom to 150% */
	opacity: 0.01;
}

.icono {
	width: 5em;
	height: 5em;

	/*background-color: #fff;*/

	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("./data/inicio/estrella.svg");
}

.texto {
	display: flex;
	align-items: center; /* Vertical centering */
	justify-content: center; /* Horizontal centering */

	width: 12em;
	/*max-width: 8em;*/
	height: 100%;
	text-align: right;
	margin-top: auto;
	color: #fff;
	font-size: 2.5em;
	text-transform: uppercase;
	padding-bottom: 0.2em;
}

/*** BOTONES INICIO ****/

#cruz-inicio {
	cursor: pointer;
	display: none;
	position: fixed;
	background-color: #ffa500;
	width: 3rem;
	height: 3rem;
	top: 1rem;
	left: 1rem;
	z-index: 999;

	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("./data/cruz.svg");

	transition: 0.1s ease-in;
}

.botones-inicio {
	position: fixed;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;
	right: 8vw;
	bottom: 5vw;
	gap: 1em;
}

#icono-jugar {
	background-image: url("./data/inicio/flecha.svg");
}

#icono-salir {
	background-image: url("./data/inicio/cangrejo.svg");
}

.contenedor-boton {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	transition: 0.1s ease-in;
}

.contenedor-boton .icono {
	height: 3em;
	width: 3em;

	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("./data/inicio/estrella.svg");
}

.contenedor-boton:hover,
#cruz-inicio:hover,
#cruz-infografia:hover {
	transform: scale(1.1);
}

.jugar {
	cursor: pointer;
	background: none;

	color: #fff;

	padding-left: 0.5em;
	width: 5em;
	height: 3em;

	text-align: left;
	margin-top: auto;
	font-size: 1.6em;
	text-transform: uppercase;
	border: none;
	font-family: "Erbaum", sans-serif;
}

.jugar:disabled {
	cursor: wait;
}

.jugar:enabled {
	cursor: pointer;
	color: #fff;
}

#boton-salir a {
	color: #fff;
}

a,
input {
	text-decoration: none;
	color: #fff;
}

/**** FIN BOTONES INICIO ***/

#cruz-infografia {
	cursor: pointer;
	position: fixed;
	display: flex;
	align-items: center;
	width: max-content;
	height: 3rem;
	top: 1rem;
	right: 1rem;
	z-index: 999;
	padding-left: 0.5rem;
	padding-right: 0.5rem;

	background-color: #ffa500;

	transition: 0.1s ease-in;

	font-family: "Erbaum", sans-serif;
	text-transform: uppercase;
	text-align: center;
	color: white;

	font-size: 1.7rem;
}

.titulo:hover {
	transform: scale(1.1);
	/*box-shadow: rgba(0, 0, 0, 0.15) 0.5em 0.5em;*/
}

.volver:enabled:hover,
.mover-youtube:hover,
#salir:hover {
	transform: scale(1.1);
	/*box-shadow: rgba(0, 0, 0, 0.15) 0.3em 0.3em;*/
	/*background-color: #00ced1;*/
}

#final {
	display: none;
	width: 100vw;
	height: 100vh;
	z-index: 99;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;

	background-image: url("./data/animatica/fondoBarco.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contenedor {
	display: flex;
	width: 80vw;
	height: 90vh;
	background-color: #ffa500;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-around;
}

a,
input {
	text-decoration: none;
	color: #fff;
}

.volver {
	cursor: pointer;
	position: relative;
	width: 16em;
	height: 8vh;

	background-color: #103872;
	color: #fff;
	padding-left: 0.5em;
	padding-right: 0.5em;

	text-align: center;
	font-size: 1.3em;
	text-transform: uppercase;
	border: none;
	font-family: "Erbaum", sans-serif;
	transition: 0.1s ease-in;
}

.mover-youtube {
	cursor: pointer;
	position: relative;

	width: max-content;
	height: 6vh;

	background-color: #103872;
	color: #fff;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-bottom: 0.5em;

	font-size: 1em;
	text-align: center;
	text-transform: uppercase;
	border: none;
	font-family: "Erbaum", sans-serif;
	transition: 0.1s ease-in;
}

.titulo-fin {
	position: relative;
	text-transform: uppercase;
	text-align: center;
	font-family: "Erbaum";
	font-size: 1.8em;
	color: #fff;
	padding-top: 1em;
}

.subtitulo {
	position: relative;
	font-family: "Rajdhani", sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
}
.video-container {
	transition: 0.1s ease-in;
	position: relative;
	width: 25em;
	height: 0;
	padding-bottom: 15em; /* 16:9 aspect ratio */
	margin-bottom: 2vw;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#salir {
	transition: 0.1s ease-in;
	position: fixed;
	top: 2vh;
	right: 2vh;
	width: 10vh;
	height: 10vh;
	background-color: #ffa500;
	z-index: 900;

	color: #fff;
	font-size: 2em;
	text-align: center;
}

/* infografia ***********************************************/
#infografia {
	width: 100vw;
	height: 100vh;
	z-index: 70;
	display: none;
	background-color: transparent;

	background-image: url("./data/animatica/fondoBarco.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.grabbable {
	cursor: grab;
	position: absolute; /* Add this line */
	user-select: none;
}

.carpeta {
	z-index: 80;
	left: 15vw;
	top: 10vw;
	width: 70vw;
	height: 50vw;
}

.foto-carpeta {
	left: 60%;
	top: 5%;

	z-index: 95;
	width: 28vw;
	height: fit-content;

	border: 1vw solid #e9e9fa;
	box-shadow: rgba(0, 0, 0, 0.15) 0.1em 0.1em 0.2em;

	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* Align content to the bottom */
}
#foto-foto {
	position: relative;
	width: 100%;
	height: 20vw;
	background-image: url("./data/infografia/centolla4.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
#texto-foto {
	width: 100%;
	height: min-content;

	background-color: #e9e9fa;
	color: #000;
	text-align: center;
	font-size: 1.15rem;
	padding: 0.5em 0;
}

.texto-carpeta {
	z-index: 90;
	left: 60%;
	top: 35%;
	padding: 1em;
	width: 30vw;
	/*min-height: 25vw;*/
	height: max-content;
	font-size: 1.4rem;
	color: #000;
	background-color: #e9e9fa;
	box-shadow: rgba(0, 0, 0, 0.15) 0.1em 0.1em 0.2em;
}

.titulo-carpeta {
	position: relative;
	z-index: 110;
	left: -15%;
	top: 0%;
	padding: 1rem;
	min-width: 12vw;
	width: max-content;
	text-align: center;
	background-color: #b6deff;
	height: max-content;
	min-height: 5vw;
}

.nombre-comun {
	font-size: 2.5rem;
	font-weight: bold;
	padding-bottom: 0.5rem;
	color: #103872;
}
.nombre-cientifico {
	font-family: "Tangerine", serif;
	font-size: 2.5rem;
}

#gif-container{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

#gif{
	z-index: 99999;
	width: 10em;
	height: 10em;
}

.hidden{
	display: none;
}

/* tablets */
@media (max-width: 768px) {
	.inicio {
		/*background-color: aquamarine;*/
		background-image: url("./data/inicio/mapa02.svg"), linear-gradient(to left top, #00ced1, #007fff, #007fff);
	}
	.texto {
		text-align: center;
		max-width: 7em;
	}
}
/* celulares */
@media (max-width: 470px) {
	.inicio {
		/*background-color: #ffa500;*/
		background-image: url("./data/inicio/mapa03.svg"), linear-gradient(330deg, #00ced1, #007fff, #007fff);
	}
	.titulo {
		top: 18vh;
	}
	.icono {
		width: 6vh;
		background-size: 90%;
		background-position: center;
	}
	.texto {
		font-size: 1.1em;
		padding-bottom: 1em;
	}
	.jugar {
		font-size: 1.2em;
		height: 8vh;
	}
	.video-container {
		width: 60vw;
		height: 20vw;
		padding-bottom: 10em;
	}
	.subtitulo {
		font-size: 1em;
	}
	.titulo-fin {
		font-size: 1.4em;
	}
	.volver {
		width: 80%;
		font-size: 1.1em;
	}
	.texto-carpeta {
		font-size: 1.1rem;
	}
	.carpeta {
		width: 100vw;
		height: 80vw;
	}
	.titulo-carpeta {
		min-width: 20vw;
	}
	.foto-carpeta {
		width: 45vw;
		height: fit-content;
	}
	#foto-foto {
		height: 35vw;
	}
	#texto-foto {
		font-size: 1rem;
	}
	.nombre-comun {
		font-size: 2.5rem;
	}
	.nombre-cientifico {
		font-size: 2.5rem;
	}
	#salir {
		width: 6vh;
		height: 6vh;
		font-size: 1.4em;
	}
	.descripcion {
		top: 28vh;
		font-size: 0.9rem;

		right: 3vw;
	}
}