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

*{
	font-family: "Inter", sans-serif;
}
#menu, #formulario, #pie, #encuesta, #final, #sectionFoto{color:white;}
body{
	width: 100%;
	min-height: auto;
	background-image: url('../assets/estadio.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 center;
}
#bienvenida img{
	margin-top:30vh;
	display: hidden;
}

/*Cambiar a 2 segundos*/
.animate__animated.animate__fadeIn { --animate-duration: 1s; } /*cambiar a 1 segundo*/
.oculto{
	visibility: hidden;
	overflow: hidden;
}
.cajaRoja{
	background-color: #EC111A;
	padding: 0 2rem;
	border-radius: 10px;

}
#personajes .card-body{
	background-color: #E9E9E9;
}
.cardTransparente{
	background-color: rgba(0, 0, 0, 0.5);
	border:1px solid #fff;
	color:white;
}
.nombrePersonaje{font-weight: bold; text-align: center; font-size: 1.1rem; margin: 1rem 0;}
.rango{font-weight: bold; text-align: center; font-size: 1.2rem; margin: 1rem 0;}
.medalla{text-align: center; font-size: 0.95em;}
.slick-slide{ margin-bottom: 0rem;}
.carrera{
	background-color: #EC111A; color: white; font-weight: bold; font-size: 1rem; padding: 5px 30px;
	border-radius: 20px;
	transform: translateY(-1.4rem);
}
.slick-dots li button:before{
	color: white!important;
	opacity: 1!important;
}
.slick-dots li.slick-active button:before{
	color: #EC111A!important;
}
.slick-dots li button:before{
	width: 40px!important;
	height: 40px!important;
	font-size: 17px!important;
}
.btn-rojo, .btn-cuadrado{
	background-color: #EC111A;
	padding: 10px 100px;
	color:white;
	font-size: 1.2rem;
	font-weight: bold;
	border-radius: 60px;
}
.btn-blanco{
	background-color: white;
	padding: 10px 100px;
	color:#6F7072;
	font-size: 1.2rem;
	font-weight: bold;
	border-radius: 60px;
}
.btn:first-child:active, .btn-rojo:hover, .btn-cuadrado:hover{
	background-color: #c10910!important;
	border-color: #a7070c!important;
}
.btn:first-child:active, .btn-blanco:hover{
	background-color: #c10910!important;
	border-color: #a7070c!important;
}
.btn-cuadrado{
	padding:10px;
	border-radius: 8px;

}
.btn-cuadrado img{ height: 80px;}
.espaciado{margin:4rem;}
#pie{
	background-color: black;
}
.question{
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
}
.question .rojo{
	background-color: #EC111A;
	padding: 2px 6px;
	border-radius: 6px;
}
#encuesta label{
	font-weight: bold;
	margin-top:1rem;
}
#encuesta .form-control{
	background-color: #ffffff30;
	border: 2px solid #ffffff50;
	border-radius: 6px;
	color: white;
	text-transform: uppercase;
	text-align: center;
}
#timeline{
	display: flex;
	justify-content: space-between;
	margin-top: -1.5rem;
}
#linea{
	width: 100%;
	height: 2px;
	background-color: white;
	z-index: -2;
	margin-top: 2.5rem;
}
#timeline .item{
	display: flex;
	font-size: 0.8rem;
	width: 50px;
	height: 50px;
	background-color: white;
	border: 3px solid white;
	color:#6F7072;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	scale:1;
	cursor:default;
}
#timeline .activo{
	background-color: #EC111A;
	border: 3px solid white;
	color:white;
	cursor: pointer;
}
#numPregunta{color:rgba(255, 255, 255, 0.5)}
.alternativa{
	background-color: white;
	color: #000;
	font-size: 1.5rem;
	margin-bottom:20px;
	padding: 20px;
	border-radius: 8px;
	cursor: pointer;
	-webkit-user-select: none;  /* Para navegadores WebKit (Safari, Chrome) */
  -moz-user-select: none;     /* Para Firefox */
  -ms-user-select: none;      /* Para Internet Explorer/Edge */
  user-select: none;          /* Estándar */
}
.alternativa:hover, .alternativa.activo{
	background-color: #EC111A;
	color:white;
}
.bola{
	text-align: center;
	background-color: #EC111A;
	color: white;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}
.alternativa:hover .bola, .alternativa.activo .bola{
	background-color: white;
	color:#EC111A;
}

#overload{
	position: fixed;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000db;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 576px) {
	.w-50, .w-75{
		width: 95%!important;
	}
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

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

:root {
	--color-primary: #EC111A;
	--color-background: #fff;
}

#overload ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

#overload li {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 5px solid var(--color-background);
  border-radius: 100%;
}

#overload li:nth-child(1) {
  margin: -30px 0 0 -30px;
  border-top-color: var(--color-primary);
  width: 60px;
  height: 60px;
  animation: loading 3s infinite linear;
}

#overload li:nth-child(2) {
  margin: -20px 0 0 -20px;
  border-top-color: var(--color-primary);
  width: 40px;
  height: 40px;
  animation: loading 2s infinite linear;
}

#overload li:nth-child(3) {
  margin: -10px 0 0 -10px;
  border-top-color: var(--color-primary);
  width: 20px;
  height: 20px;
  animation: loading 1s infinite linear;
}
#txtFoto, #txtCamara{ display: none;}