@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;300;400&display=swap');

@font-face{
	font-family: 'CAFE';
	src: url('../fonts/Reach_Story.ttf') format('OpenType');
}
:root{
	--color_1: #fff;
	--negro:   #1f1f1f;
	--aqua: #1cbaa4;
	--rosa_pastel: #f7bfd8;
	--rosa_pastel2: #f3aacb;
	--rosa_pastel3: #eb9ac0;
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'CAFE', sans-serif;
}
body::-webkit-scrollbar{
  width: 1px;
}
.portada{
	width: 100%;
	height: 100vh;
	background-image: url('../images/fondo_portada.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.portada>header{
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
}
.portada>header>a{
	width: 240px;
	height: 240px;
	text-decoration: none;
	background-color: var(--color_1);
	border: 5px solid var(--rosa_pastel3);
	border-radius: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.portada>header>a>img{
	width: 160px;
	height: 160px;
}
.slogan{
	font-size: 3em;
	font-family: 'CAFE';
	text-align: center;
	text-transform: uppercase;
	color: var(--rosa_pastel3);
	letter-spacing: 0.1em;
	font-weight: normal;
}
.juego, .juego a{
	font-size: 1.1em;
	font-family: 'Unbounded', cursive;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--negro);
	letter-spacing: 0.1em;
	font-weight: bold;
}
/* ================================= */
/* ========== C U E R P O ========== */
.cuerpo{
	width: 100%;
	height: 100vh;
	background-color: var(--rosa_pastel);
}
.cuerpo>header{
	width: 100%;
	height: 15vh;
	display: flex;
	justify-content: center;
}
.cuerpo>header>a>img{
	width: auto;
	height: 100%;
}
.cuerpo>nav{
	width: 100%;
	max-width: 800px;
	height: 75vh;
	margin: auto;
}
.cuerpo>nav>ul{
	list-style: none;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
}
.cuerpo>nav>ul>li, .titulo{
	width: 100%;
	margin: 20px 0;
}
.franja{
	height: 100px;
}
.cuerpo>nav>ul>li>a, .franja{
	width: 100%;
	text-decoration: none;
	display: grid;
	grid-template-columns: 5% 1fr 2fr 1fr 5%;
	grid-template-rows: 10% 80% 10%;
}
.cuerpo>nav>ul>li>a>p, .franja>p{
	grid-column: 1/6;
  grid-row: 2/3;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: 'CAFE';
	font-size: 2.5em;
	color: var(--aqua);
	background-color: var(--color_1);
	border-top: 6px solid var(--rosa_pastel3);
	border-bottom: 6px solid var(--rosa_pastel3);
	display: flex;
	justify-content: center;
	align-items: center;
}
.cuerpo>nav>ul>li>a>img, .franja>img{
	width: 100px;
	height: auto;
}
.cuerpo>nav>ul>li:nth-child(odd)>a>img{
	grid-column: 4/5;
  grid-row: 1/4;
	transform: rotate(-10deg);
	animation: spind 1.5s infinite;
}
.cuerpo>nav>ul>li:nth-child(even)>a>img{
	grid-column: 2/3;
  grid-row: 1/4;
	transform: rotate(10deg);
	animation: spini 1.5s infinite;
}
.lightbox>a{
	width: 100%;
	margin: auto;
}
.lightbox>a>img{
	width: 30%;
	margin: 0 35%;
}
.lightbox>p{
		font-family: 'Unbounded', cursive;
		font-size: 0.9em;
		font-weight: 200;
}
.lightbox>ul{
	width: 100%;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	grid-gap: 25px;
}
.lightbox>ul>li{
	width: 80%;
	list-style: none;
}
.lightbox>ul>li>a{
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lightbox>ul>li img{
	width: 70px;
}
.lightbox>ul>li p{
	width: CALC(100% - 80px);
	font-size: 2.2em;
	color: var(--rosa_pastel3);
	text-transform: uppercase;
}
.cuerpo>footer{
	width: 100%;
	height: 10vh;
	margin: auto;
	position: fixed;
	bottom: 0;
	background-color: var(--rosa_pastel3);
	text-align: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	z-index: 20000;
}
.cuerpo>footer>p{
	width: 100%;
	margin: 0;
	font-size: 1.8em;
	line-height: 1em;
	color: var(--color_1);
	display: flex;
	justify-content: center;
}
/* ================================= */
/* ========== C l a s e s ========== */
.espacio_padding{
	padding-bottom: 11vh;
}
	.swiper-container{
		width: 100%;
	}
	.swiper-container img{
		width: 100%;
	}
/* ================================= */
/* ====== Transiciones/Animaciones ====== */
@keyframes spind{
    50%{transform: rotate(10deg);}
}
@keyframes spini{
    50%{transform: rotate(-10deg);}
}
/* ================================= */
/* 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){
	.lightbox{left: 0;}
	.cuerpo>footer>p{font-size: 1.7em;}
}

/*---------------------------------------------------------------------------*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* 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) {...}