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


html,
body{
	font-family: "Unbounded";
	width: 100%;
	float: left;
	overflow-x: hidden;
}

.unbounded-<uniquifier> {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.navbar{
	padding: 2rem 0;
	background: #000;
}

nav .nav-link{
	font-size: 20px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 300;
	margin: 0 .5rem ;
	padding: 0 .5rem ;
	position: relative;
	transition: all 0.3s ease;
	overflow: hidden;
	z-index: 1;
}

/* Hover: fondo azul animado */
.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #02599b;
  z-index: -1;
  transition: left 0.4s ease-in-out;
}

.navbar-nav .nav-link:hover::before ,
.navbar-nav .nav-link:active::before {
  left: 0;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:active {
  color: #fff;
}

/* Animación de entrada del menú */
@keyframes slideInNav {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar .navbar-nav .nav-item {
  animation: slideInNav 0.6s ease forwards;
  opacity: 0;
}

/* Animación secuencial */
.navbar .navbar-nav .nav-item:nth-child(1) { animation-delay: 0.2s; }
.navbar .navbar-nav .nav-item:nth-child(2) { animation-delay: 0.4s; }
.navbar .navbar-nav .nav-item:nth-child(3) { animation-delay: 0.6s; }
.navbar .navbar-nav .nav-item:nth-child(4) { animation-delay: 0.8s; }

/* Animación de entrada del logo */
@keyframes logoZoomIn {
  0% {
    transform: scale(0.5) rotate(-15deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.logo-animado {
  font-weight: 700;
  font-size: 1.75rem;
  color: #02599b;
  position: relative;
  display: inline-block;
  animation: logoZoomIn 1s ease-out forwards;
  transform-origin: left;
  opacity: 0;
  transition: transform 0.3s ease, color 0.3s ease;
  overflow: hidden;
}

/* Destello deslizante */
.logo-animado::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
}

/* Hover animado con brillo + zoom + rotación */
.logo-animado:hover {
  transform: scale(1.05) rotate(2deg);
  color: #013f70;
  text-shadow: 1px 1px 8px rgba(2, 89, 155, 0.5);
}

.logo-animado:hover::after {
  animation: shine 0.8s ease forwards;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

/* Animación de entrada */
@keyframes logoZoomIn {
  0% {
    transform: scale(0.5) rotate(-15deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}


header{
	overflow: hidden;
}


/* Animación base */
@keyframes zoomFade {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-img {
  opacity: 0;
  animation: zoomFade 1s ease-out forwards;
  animation-delay: 0.2s; /* Ajusta el tiempo según lo necesites */
}


.bg-cafe{
	background: #f1e8d6;
	width: 100%;
	float: left;
	text-transform: uppercase;
	text-align: center;
}

.bg-cafe h1{
	font-size: 45px;
}

.bg-cafe h2{
	font-size: 30px;
	font-weight: 200;
}

.anim-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.anim-on-scroll.show {
  opacity: 1;
  transform: translateY(0);
}

.bg-cafe a{
	width: 50%;
	display: block;
	padding: 10px;
	text-align: center;
	background: #025798;
	color: #fff;
	margin: 0 auto;
	border-radius: 30px;
	text-decoration: none; border: none;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s ease;
  opacity: 0;
  transform: scale(0.95);
  animation: btnFadeZoom 1s ease-out forwards;
  animation-delay: 0.8s;
}

/* Brillito animado */
.bg-cafe a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}

/* Al hacer hover: destello + crecimiento */
.bg-cafe a:hover::before {
  animation: shine 0.8s ease forwards;
}

.bg-cafe a:hover {
  transform: scale(1.5);
  text-decoration: none;
}

/* Animación de entrada */
@keyframes btnFadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Movimiento del destello */
@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

footer{
	background: #000;
	width: 100%;
	float: left;
	padding:4rem 0 3rem;
	color: #fff;
	position: relative;
	z-index: 1;
}

footer ul{
	display: inline-flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

footer ul li{
	margin: 0 5px;
}

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

footer a svg{
	border: 1px solid #fff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	padding: 7px;
}

footer a svg path{
	fill: #fff;
}

footer h6{
	display: contents;
	font-weight: 200;
}

footer p{
	font-weight: 200;
	font-size: 14px;
}

footer .w-50{
	width: 50%;
	margin: 0 auto;
}

footer hr{
	margin: 3rem 0;
	opacity: 1;
}


img,
svg{
  transition: transform 0.5s ease;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

img:hover,
svg:hover {
  transform: scale(1.05) rotate(1.5deg);
}

.bg-banner{
	background: url(../img/de-que-trata-el-reto/banner.png)no-repeat;
	width: 100%;
	text-align: center;
	float: left;
	text-transform: uppercase;
	color: #fff;
}


.bg-banner h1{
	font-size: 65px;
	font-weight: 300;

}

.bg-banner h2{
	font-size: 80px;
	font-weight: 900;
	text-align: center;
}

.contenido{
	padding: 6rem 0 3rem;
	width: 100%;
	float: left;
	text-align: center;
}


.contenido h2 {
	font-weight: 700;
	margin-bottom: 2rem;
}

.contenido h2 span{
	color: #dd2728;

}

.contenido h4{
	font-weight: 400;
	margin-bottom: 2rem;
}

.contenido h5{
	font-weight: 300;
	margin-bottom: 2rem;
	text-align: justify;
}

.bg-beige{
	background: #f1e8d6;
	float: left;
	width: 100%;
	padding: 20rem 0 3rem;
	margin-top: -18rem;
	text-align: center;
}

.bg-beige h2 {
	font-weight: 700;
	margin-bottom: 2rem;
}

.bg-beige h2 span{
	color: #dd2728;
}

.bg-beige h5 {
  font-weight: 300;
}

/* Estilo base */
.bg-beige h5.borde {
  border: 1px solid #000;
  width: 100%;
  padding: 1rem 2rem;
  cursor: pointer;
  margin-bottom: 1rem;
  text-align: center;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
  transform-origin: center;
}

/* Hover con zoom y leve rotación */
.bg-beige h5.borde:hover {
  background-color: #0269b0;
  color: white;
  transform: scale(1.1);
  animation: bounceHover 0.4s ease forwards;

}

/* Animación al aparecer (fade-in desde abajo) */
.anim-rect {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Clase que se activa cuando el elemento entra en pantalla */
.anim-rect.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes bounceHover {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1) ;
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.02);
  }
}

.publico{
	width: 100%;
	float: left;
	background: url(../img/de-que-trata-el-reto/figura-roja-con-amarillo.svg)no-repeat;
	background-position: left center;
	padding: 6rem 0 3rem;
	text-align: center;
	position: relative;
	overflow: hidden; /* Muy importante si hay overflow horizontal */
	animation: moveBackground 6s ease-in-out alternate;
}

@keyframes moveBackground {
	0% {
		background-position: left center;
	}
	100% {
		background-position: 20px center;
	}
}
/* Antes de la animación */
.publico::before,
.publico::after {
	content: "";
	display: block;
	position: absolute;
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Imagen 1: línea azul */
.publico::before {
	background: url(../img/de-que-trata-el-reto/linea-azul.svg) no-repeat;
	top: 0;
	right: 10%;
	width: 294px;
	height: 159px;
	transform: translateX(50px); /* entra desde la derecha */
}

/* Imagen 2: líneas negras */
.publico::after {
	background: url(../img/de-que-trata-el-reto/lineas-negras.svg) no-repeat;
	bottom: 0;
	right: 0;
	width: 294px;
	height: 159px;
	transform: translateY(50px); /* entra desde abajo */
}

/* Cuando aparece */
.publico.animate::before,
.publico.animate::after {
	opacity: 1;
	transform: translate(0, 0);
}


.publico h2 {
	font-weight: 700;
	margin-bottom: 2rem;
}

.publico h2 span{
	color: #dd2728;
}

.publico h5 {
  font-weight: 300;
}

.bg-beige2{
	background: #f1e8d6;
	float: left;
	width: 100%;
	padding: 5rem 0 3rem;
	text-align: center;
}

.bg-beige2 h2 {
	font-weight: 700;
	margin-bottom: 1rem;
}

.bg-beige2 h2 span{
	color: #dd2728;
}

.bg-beige2 h5 {
  font-weight: 300;
}

.bg-beige2 a{
	width: 50%;
	display: block;
	padding: 10px;
	text-align: center;
	background: #025798;
	color: #fff;
	margin: 0 auto;
	border-radius: 30px;
	text-decoration: none; border: none;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s ease;
  opacity: 0;
  transform: scale(0.95);
  animation: btnFadeZoom 1s ease-out forwards;
  animation-delay: 0.8s;
  margin-top: 2rem;
  text-transform: uppercase;
}

/* Brillito animado */
.bg-beige2 a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}

/* Al hacer hover: destello + crecimiento */
.bg-beige2 a:hover::before {
  animation: shine 0.8s ease forwards;
}

.bg-beige2 a:hover {
  transform: scale(1.5);
  text-decoration: none;
}

.premios{
	    background: url(../img/premios/banner-premios.png) no-repeat;
}

.cuadro-beige{
	background: #f1e8d6;
	float: left;
	width: 100%;
	padding: 4rem 2rem;
	text-align: center;
}

.cuadro-beige h1 {
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 1rem;
}

.cuadro-beige h2 {
	font-weight: 300;
	margin-bottom: 1rem;
}


.cuadro-beige h5 {
  font-weight: 300;
}


.contenido a{
	width: 100%;
	display: block;
	padding: 10px;
	text-align: center;
	background: #d82126;
	color: #fff;
	margin: 0 auto;
	border-radius: 30px;
	text-decoration: none; border: none;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s ease;
  opacity: 0;
  transform: scale(0.95);
  animation: btnFadeZoom 1s ease-out forwards;
  animation-delay: 0.8s;
  margin-top: 2rem;
  text-transform: uppercase;
}

/* Brillito animado */
.contenido a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}

/* Al hacer hover: destello + crecimiento */
.contenido a:hover::before {
  animation: shine 0.8s ease forwards;
}

.contenido a:hover {
  transform: scale(1.5);
  text-decoration: none;
}


.parallax-container {
  height: 250px;
  overflow: hidden;
  position: relative;
    float: left;
    width: 100%;
}

.parallax-img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  will-change: transform;
}

.parallax-img{
  transition: transform 0.5s ease;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.parallax-img:hover{
  transform: scale(1.05) rotate(0);
}

.inscripcion{
	background: url(../img/inscripcion/banner.png) no-repeat;
	color: #000;
}

.fecha {
    background: #f1e8d6;
    width: 100%;
    float: left;
    text-transform: uppercase;
    text-align: center;
    padding: 4rem;
    position: relative;
}

.fecha h1{
	text-transform: initial;
	font-size:35px;
	margin-bottom: 2rem;
}

.fecha h1 span{
	color: #dd2728;

}

.fecha h2{
	border: 2px solid #000;
	padding: 1rem;
	text-align: center;
	font-weight: 400;
}

.bg-cafe{
	position: relative;
}

.fecha .figuras-inscripcion{
	position: absolute;
  top: -45px;
  left: 0;
  z-index: 0;
}

.figuras-inscripcion-btn{
	position: absolute;
  left: 0;
  z-index: 0;
}

form{
	width: 100%;
}

label{
	text-align: center;
	font-weight: 400;
	font-size: 20px;
}

label span{
	font-weight: 200;
}

input{
	border: 2px solid #000!important;
	border-radius: 0!important;
	margin-bottom: 2rem;
}

form button{
	width: 40%;
	border-radius: 50px!important;
  display: block;
  padding: 10px;
  text-align: center;
  background: #0169b0;
  color: #fff;
  margin: 0 auto;
  border-radius: 30px;
  text-decoration: none;
  border: none;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s ease;
  opacity: 0;
  transform: scale(0.95);
  animation: btnFadeZoom 1s ease-out forwards;
  animation-delay: 0.8s;
  margin-top: 2rem;
  text-transform: uppercase;
}


/* Brillito animado */
form button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}

/* Al hacer hover: destello + crecimiento */
form button:hover::before {
  animation: shine 0.8s ease forwards;
}

form button:hover {
  transform: scale(1.5);
  text-decoration: none;
}

.height-banner{
	min-height: 50vh;
}


@media (min-width: 768px) and (max-width: 1024px){
	.navbar-collapse {
	    padding: 2rem 0;
	}

	nav .nav-link {
	    font-size: 16px;
	}

	.figuras-inscripcion-btn {
	    bottom: 0;
	}

	.bg-cafe h1 {
	    font-size: 35px;
	}

	.bg-cafe h2 {
	    font-size: 20px;
	}

	footer h6 {
	    font-weight: 200;
	    width: 100%;
	    display: block;
	    margin-bottom: 1rem;
	}

	footer p {
	    font-weight: 200;
	    font-size: 10px;
	}

	.bg-banner h1 {
	    font-size: 36px;
	}

	.bg-banner h2 {
	    font-size: 36px;
		}

		.height-banner{
			min-height: 25vh;
		}

		.bg-beige {
		    padding: 9rem 0 3rem;
		    margin-top: -8rem;
		}

		.publico {
		    background-position: top left;
		    background-size: 18%;
		}

		.publico::before {
		    background: url(../img/de-que-trata-el-reto/linea-azul.svg) no-repeat;
		    top: 0;
		    right: 2%;
		    width: 294px;
		    height: 159px;
		    transform: translateX(50px);
		    background-size: 40%;
		    background-position: top right;
		}

		.publico::after {
		    width: 40px;
		    height: 70px;
		    background-position: 5%;
		}

		.parallax-container {
		    height: 76px;
		    overflow: hidden;
		    position: relative;
		    float: left;
		    width: 100%;
		}

		.premios-movil h2 {
		    font-size: calc(1.325rem + 0.2vw);
		}

		.fecha .figuras-inscripcion {
		    top: -12px;
		}

		.bg-cafe h1 {
		    font-size: 14px;
		    margin-bottom: 1rem;
		}

		.fecha h2 {
		    border: 2px solid #000;
		    padding: .5rem;
		    font-size: 18px !important;
		}	

		.fecha {
		    padding: 1rem 5rem;
		}

		.contenido {
		    padding: 3rem 0 3rem;
		}

		.contenido h2 {
		    margin-bottom: 1rem;
		}

		label,
		input {
		    font-size: 17px;
		}

		form button{
			margin-top: 0;
		}

		.bg-banner {
		    background-size: cover;
		}

}

@media (min-width: 1024.01px) and (max-width: 1440px){
	.navbar-collapse {
	    padding: 2rem 0;
	}

	nav .nav-link {
	}

	.figuras-inscripcion-btn {
	    bottom: 0;
	}

	.bg-cafe h1 {
		font-size: 38px;
	}

	.bg-cafe h2 {
		font-size: 24px;
	}

	.bg-cafe a{
		  margin-bottom: 4rem;
		
	}

	.bg-cafe {
    background: #f1e8d6;
    width: 100%;
    float: left;
    text-transform: uppercase;
    text-align: center;
    padding: 5rem 0 0;
}

	footer h6 {
	    font-weight: 200;
	    width: 100%;
	    display: block;
	    margin-bottom: 1rem;
	}

	.oculto{
		display: none!important;
	}

	.mostrar{
		display: block!important;
	}
		.height-banner{
			min-height: 31vh;
		}

		.bg-beige {
		    padding: 9rem 0 3rem;
		    margin-top: -8rem;
		}

	

		.parallax-container {
		    height: 76px;
		    overflow: hidden;
		    position: relative;
		    float: left;
		    width: 100%;
		}


		.fecha .figuras-inscripcion {
		    top: -12px;
		}

		.bg-cafe h1 {
		    margin-bottom: 1rem;
		}

		.fecha h2 {
		    border: 2px solid #000;
		    padding: .5rem;
		    font-size: 18px !important;
		}	

		.fecha {
		    padding: 1rem 5rem;
		}

		.contenido {
		    padding: 3rem 0 3rem;
		}

		.contenido h2 {
		    margin-bottom: 1rem;
		}

		label,
		input {
		    font-size: 17px;
		}

		form button{
			margin-top: 0;
		}

		.bg-banner {
		    background-size: cover;
		}

}

@media (min-width: 768px) and (max-width: 1024px){
	.navbar-collapse {
	    padding: 2rem 0;
	}

	nav .nav-link {
	    font-size: 16px;
	}

	.figuras-inscripcion-btn {
	    bottom: 0;
	}

	.bg-cafe h1 {
	    font-size: 35px;
	}

	.bg-cafe h2 {
	    font-size: 20px;
	}

	footer h6 {
	    font-weight: 200;
	    width: 100%;
	    display: block;
	    margin-bottom: 1rem;
	}

	footer p {
	    font-weight: 200;
	    font-size: 10px;
	}

	.bg-banner h1 {
	    font-size: 36px;
	}

	.bg-banner h2 {
	    font-size: 36px;
		}

		.height-banner{
			min-height: 25vh;
		}

		.bg-beige {
		    padding: 9rem 0 3rem;
		    margin-top: -8rem;
		}

		.publico {
		    background-position: top left;
		    background-size: 18%;
		}

		.publico::before {
		    background: url(../img/de-que-trata-el-reto/linea-azul.svg) no-repeat;
		    top: 0;
		    right: 2%;
		    width: 294px;
		    height: 159px;
		    transform: translateX(50px);
		    background-size: 40%;
		    background-position: top right;
		}

		.publico::after {
		    width: 40px;
		    height: 70px;
		    background-position: 5%;
		}

		.parallax-container {
		    height: 76px;
		    overflow: hidden;
		    position: relative;
		    float: left;
		    width: 100%;
		}

		.premios-movil h2 {
		    font-size: calc(1.325rem + 0.2vw);
		}

		.fecha .figuras-inscripcion {
		    top: -12px;
		}

		.bg-cafe h1 {
		    font-size: 14px;
		    margin-bottom: 1rem;
		}

		.fecha h2 {
		    border: 2px solid #000;
		    padding: .5rem;
		    font-size: 18px !important;
		}	

		.fecha {
		    padding: 1rem 5rem;
		}

		.contenido {
		    padding: 3rem 0 3rem;
		}

		.contenido h2 {
		    margin-bottom: 1rem;
		}

		label,
		input {
		    font-size: 17px;
		}

		form button{
			margin-top: 0;
		}

		.bg-banner {
		    background-size: cover;
		}

}

@media (max-width: 767px){
	.navbar-collapse {
	    padding: 2rem 0;
	}

	nav .nav-link {
	    font-size: 16px;
	}

	.figuras-inscripcion-btn {
	    bottom: 0;
	}

	.bg-cafe h1 {
	    font-size: 35px;
	}

	.bg-cafe h2 {
	    font-size: 20px;
	}

	footer h6 {
	    font-weight: 200;
	    width: 100%;
	    display: block;
	    margin-bottom: 1rem;
	}

	footer p {
	    font-weight: 200;
	    font-size: 10px;
	}

	.bg-banner h1 {
	    font-size: 36px;
	}

	.bg-banner h2 {
	    font-size: 36px;
		}

		.height-banner{
			min-height: 25vh;
		}

		.bg-beige {
		    padding: 9rem 0 3rem;
		    margin-top: -8rem;
		}

		.publico {
		    background-position: top left;
		    background-size: 18%;
		}

		.publico::before {
		    background: url(../img/de-que-trata-el-reto/linea-azul.svg) no-repeat;
		    top: 0;
		    right: 2%;
		    width: 294px;
		    height: 159px;
		    transform: translateX(50px);
		    background-size: 40%;
		    background-position: top right;
		}

		.publico::after {
		    width: 40px;
		    height: 70px;
		    background-position: 5%;
		}

		.parallax-container {
		    height: 76px;
		    overflow: hidden;
		    position: relative;
		    float: left;
		    width: 100%;
		}

		.premios-movil h2 {
		    font-size: calc(1.325rem + 0.2vw);
		}

		.fecha .figuras-inscripcion {
		    top: -12px;
		}

		.bg-cafe h1 {
		    font-size: 14px;
		    margin-bottom: 1rem;
		}

		.fecha h2 {
		    border: 2px solid #000;
		    padding: .5rem;
		    font-size: 18px !important;
		}	

		.fecha {
		    padding: 1rem 5rem;
		}

		.contenido {
		    padding: 3rem 0 3rem;
		}

		.contenido h2 {
		    margin-bottom: 1rem;
		}

		label,
		input {
		    font-size: 17px;
		}

		form button{
			margin-top: 0;
		}

		.bg-banner {
		    background-size: cover;
		}

}