@charset "UTF-8";
@font-face {
  font-family: "changa_oneregular";
  src: url("../fonts/") format("woff2"), url("../fonts/changaone-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "dosisextralight";
  src: url("../fonts/dosis-variablefont_wght-webfont.woff2") format("woff2"), url("../fonts/dosis-variablefont_wght-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
:root {
  --primary-font: "dosisextralight", sans-serif;
  --highlight-font: "changa_oneregular", sans-serif;
  --text-color: #292929;
  --main-color: #F9218C;
  --secondary-color: #006CA4;
  --font-size-small: 14px;
  --font-size-medium: 18px;
  --font-size-big: 30px;
  --font-size-title: 48px;
  --border-size: 2px;
  --icon-size: 36px;
  --color-shadow: rgba(0,0,0,.2);
}

/* Estilos generales */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 10px = 1rem! */
}

body {
  min-width: 32rem;
  font-family: var(--primary-font);
  font-size: var(--font-size-medium);
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  height: 100vh;
}

.hide {
  opacity: 0;
}

.cargador {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255);
  color: #8116E3;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  position: fixed;
}

.onboarding {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  position: fixed;
  touch-action: none;
}
.onboarding .cursor-toch {
  width: 25.6rem;
  max-width: 50vw;
  -webkit-animation: instruction 2s ease-in 1s infinite normal backwards;
          animation: instruction 2s ease-in 1s infinite normal backwards;
}
.onboarding .cursor-toch img {
  width: 100%;
  height: auto;
}

@-webkit-keyframes instruction {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-25vh);
    opacity: 0;
  }
}

@keyframes instruction {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-25vh);
    opacity: 0;
  }
}
/* UI */
.title {
  font-family: var(--highlight-font);
  font-size: var(--font-size-title);
  color: var(--main-color);
  text-shadow: var(--color-shadow) 5px 5px 0;
  letter-spacing: 2px;
}

.dark-section .title {
  color: white;
}

.boton {
  font-size: var(--font-size-medium);
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  background-color: var(--secondary-color);
  background-size: cover;
  white-space: initial;
  background-repeat: no-repeat;
  border: solid var(--border-size) #000;
  border-radius: 1rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.boton:disabled {
  background-color: #999 !important;
}

.caja_borde_doble {
  width: auto;
  max-width: 90vw;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  margin: 3rem;
  z-index: 30;
}
.caja_borde_doble .contenido {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  background-color: #F2F2F2;
  border: solid var(--border-size) #4E4E4E;
  border-radius: 1.4rem;
  z-index: 30;
}
.caja_borde_doble::before {
  content: "";
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  position: absolute;
  top: -1rem;
  left: -1rem;
  background-color: #919191;
  border: solid var(--border-size) #4E4E4E;
  border-radius: 2rem;
  box-shadow: 0 5px 0 var(--color-shadow);
  z-index: 29;
}
.caja_borde_doble::after {
  content: "";
  width: calc(var(--icon-size) * 2);
  height: calc(var(--icon-size) * 2);
  position: absolute;
  top: -3.5rem;
  right: 2rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  z-index: 31;
}
.caja_borde_doble .title {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
  font-size: var(--font-size-big);
  text-shadow: 0 5px 0 var(--color-shadow);
}

.caja_borde_sencillo {
  width: 30rem;
  max-width: 95vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  padding-top: 4.5rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #FFFFFF;
  border: solid 4px var(--secondary-color);
  box-shadow: 0 5px 0 var(--color-shadow);
  border-radius: 2rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 5px 0 var(--color-shadow);
  z-index: 30;
  color: var(--secondary-color);
}
.caja_borde_sencillo p {
  margin-top: 0;
  font-weight: bold;
}
.caja_borde_sencillo span.paso {
  width: calc(var(--icon-size) * 2);
  height: calc(var(--icon-size) * 2);
  position: absolute;
  top: 0;
  transform: translateY(-60%);
  right: 2rem;
  background-image: url(../img/circle_pink_step.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  font-family: var(--highlight-font);
  font-size: var(--font-size-big);
  z-index: 31;
}

.logo_desafio {
  width: calc(100vw - 4rem);
  max-width: 13%;
  height: auto;
  position: absolute;
  z-index: 30;
  left: 2rem;
  top: 50vh;
  transform: translateY(-100%);
}

.i00 {
  width: 44rem;
  left: 15%;
  top: 40%;
  padding-top: 0;
}
.i00 img {
  max-width: 100%;
  height: auto;
  display: block;
}
.i00 p {
  align-self: flex-start;
}

.i01 {
  left: 30%;
}

.i02 img,
.i03 img {
  width: calc(var(--icon-size) * 2);
  height: auto;
  position: absolute;
  bottom: 0;
  transform: translateY(60%);
}

.i02 {
  top: 30%;
  left: 45%;
}

.i03 {
  top: 40%;
  left: 58%;
}

.i04 {
  width: 45rem;
  top: 40%;
  left: 70%;
}
.i04 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.i04 ul li {
  background-color: var(--secondary-color);
  color: white;
  font-family: var(--highlight-font);
  width: calc(50% - 1rem);
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.i04 ul li img {
  width: var(--icon-size);
  height: auto;
  margin-right: 1rem;
}

.i05 {
  width: 40rem;
  left: auto;
  transform: translateY(-70%);
  right: 0;
  z-index: 19;
}

.i05 input[type=button],
.i05 button[type=submit] {
  font-family: var(--highlight-font);
  font-size: var(--font-size-medium);
  font-weight: lighter;
  background-color: #1CC6D9;
  background-image: url(../img/buttons_shadow.svg);
  background-position: center;
  color: white;
}
.i05 button[type=submit] {
  width: 11rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.i05 input[type=button] {
  width: 15rem;
  height: 6rem;
  display: block;
  margin: 0 auto;
}

.contenedor_avances {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 50;
  width: 30rem;
  height: auto;
  max-width: 70vw;
  padding: 0.5rem;
  background-color: #0093FF;
  border: solid var(--border-size) #4E4E4E;
  box-shadow: 0 5px 0 var(--color-shadow);
  border-radius: 1.3rem;
  display: grid;
  transform: translateY(-150%);
  touch-action: none;
  grid-gap: 0.5rem;
  grid-template-columns: 16% calc(84% - 0.5rem);
}
.contenedor_avances > div {
  background-color: white;
  border: solid var(--border-size) #4E4E4E;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contenedor_avances .logoV img {
  max-width: 90%;
  height: auto;
}
.contenedor_avances .iconos img {
  max-width: calc(20% - 1px);
  height: auto;
}
.contenedor_avances.activo {
  transform: translateY(0);
}

.scrollText {
  font-family: var(--highlight-font);
  font-size: var(--font-size-big);
  pointer-events: none;
  color: white;
  text-shadow: 0 2px 0 var(--color-shadow);
  position: fixed;
  width: auto;
  height: 20%;
  left: 50%;
  padding-right: 6rem;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  bottom: 0;
  z-index: 20;
  display: none;
}
.scrollText .arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: scale(0.5) translateY(-100%);
}
.scrollText .arrows path {
  stroke: #fff;
  fill: transparent;
  stroke-width: 4px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}
.scrollText .arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s; /* Safari 和 Chrome */
}
.scrollText .arrows path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
}
.scrollText .arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s; /* Safari 和 Chrome */
}

@-webkit-keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.btn_playMusic {
  position: fixed;
  width: var(--icon-size);
  height: var(--icon-size);
  bottom: 5%;
  left: 2rem;
  opacity: 0.5;
  cursor: pointer;
  z-index: 20;
}
.btn_playMusic.active {
  opacity: 1;
}
.btn_playMusic img {
  max-width: 100%;
  height: auto;
}
.btn_playMusic.scaling {
  -webkit-animation: scaleLoop 1s infinite;
          animation: scaleLoop 1s infinite;
}

@-webkit-keyframes scaleLoop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scaleLoop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.luces {
  position: fixed;
  z-index: 1;
  transform: rotateX(180deg);
  bottom: 0;
  height: 70px;
  opacity: 0.8;
}

/* Escenario */
#escenario {
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  width: auto;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}
#escenario section {
  margin-left: -1px;
  position: relative;
  background: #00a8d4;
  background: linear-gradient(180deg, #00a8d4 0%, #d6f6ff 70%, #aaedff 85%, #00579a 100%);
  height: 100%;
  width: auto;
  display: none;
}
#escenario section.visible {
  display: block;
}
#escenario #instrucciones .capa_piso {
  z-index: 19;
}
#escenario #instrucciones h2.title {
  position: absolute;
  top: 4rem;
  left: 30%;
  color: white;
}
#escenario .categoria_contenedor h2 {
  position: absolute;
  top: 25%;
  left: 13%;
  color: white;
  z-index: 17;
}
#escenario .ilustraciones {
  width: auto;
  height: 100%;
  position: relative;
}
#escenario .ilustraciones img {
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  max-height: 100%;
  left: 0;
  top: 0;
}
#escenario .ilustraciones img.capa_fondo {
  z-index: 15;
}
#escenario .ilustraciones img.capa_referencia {
  position: relative;
  z-index: 16;
}
#escenario .ilustraciones img.frente_puerta {
  z-index: 22;
}
#escenario .ilustraciones img.capa_frente {
  z-index: 21;
  display: none;
}
#escenario .ilustraciones img.capa_bloqueo {
  z-index: 19;
}
#escenario .ilustraciones img.capa_piso {
  z-index: 23;
}
#escenario .presentador {
  position: absolute;
  z-index: 19;
  right: 0;
  bottom: 20%;
  transform-origin: bottom center;
}

/* Preguntas */
.pregunta_contenedor {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 50rem;
  background-color: #F2F2F2;
}
.pregunta_contenedor::after {
  background-image: url(../img/icon_question.svg);
}
.pregunta_contenedor .title {
  position: relative;
}
.pregunta_contenedor .title::before {
  content: "";
  position: absolute;
  background-image: url(../img//characters_host_front.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  width: 10rem;
  height: 10rem;
  border-bottom: solid 2px #707070;
  transform: translateY(-100%);
}
.pregunta_contenedor .pregunta_descripcion {
  font-weight: bold;
}
.pregunta_contenedor .pregunta_opciones {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  width: 100%;
  left: 0;
  top: calc(100% - 3rem);
  justify-content: center;
}
.pregunta_contenedor .pregunta_opciones input[type=button] {
  font-family: var(--highlight-font);
  font-size: var(--font-size-medium);
  font-weight: lighter;
  width: 11rem;
  height: 6rem;
  margin: 0.5rem;
  background-color: #1CC6D9;
  background-image: url("../img/buttons_shadow.svg");
}

/* Métricas */
.espectacular {
  width: 40rem;
  height: auto;
  max-width: 90vw;
  position: absolute;
  display: none;
  right: 10%;
  bottom: 18%;
  z-index: 17;
}
.espectacular img {
  position: relative;
  width: 100%;
  height: auto;
}
.espectacular .foto {
  position: absolute;
  z-index: 18;
  width: 98%;
  left: 1%;
  top: 2%;
}
.espectacular .marco {
  z-index: 19;
}

.metricas_contenedor {
  position: absolute;
  right: 20%;
  top: 35%;
  width: 40rem;
  display: none;
  z-index: 18;
}
.metricas_contenedor::after {
  background-image: url(../img/icon_fact.svg);
}
.metricas_contenedor .metricas_grafico {
  width: auto;
  display: block;
  margin: 1rem auto;
  max-height: 20vh;
  max-width: 90%;
}
.metricas_contenedor p {
  font-weight: bold;
}

.metricas_fuente {
  position: absolute;
  width: 40rem;
  max-width: 100vw;
  bottom: 5%;
  text-align: center;
  right: 20%;
  display: none;
  color: white;
  z-index: 30;
}

/* Badge de Nivel */
.categoria_badge {
  width: 10rem;
  height: 10rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 19;
  -webkit-animation: scaleLoop 1s infinite;
          animation: scaleLoop 1s infinite;
}
.categoria_badge img {
  width: 100%;
  height: auto;
}

#nivel1 .categoria_badge {
  left: 48%;
}

#nivel2 .categoria_badge {
  left: 47%;
  top: 43%;
}

#nivel3 .categoria_badge {
  left: 54%;
  top: 62%;
}

#nivel4 .categoria_badge {
  left: 53%;
}

#nivel5 .categoria_badge {
  left: 58%;
  top: 55%;
}

/* Acciones */
.acciones_contenedor {
  position: absolute;
  right: 0;
  top: auto;
  bottom: 25%;
  transform: translate(0);
  width: 30rem;
  z-index: 18;
}
.acciones_contenedor::before {
  background-color: #ED1C24;
}
.acciones_contenedor::after {
  background-image: url(../img/icon_actions.svg);
}
.acciones_contenedor .contenido {
  font-weight: bold;
  padding-bottom: 10vh;
}
.acciones_contenedor .contenido .advertencia {
  display: block;
  text-align: center;
}
.acciones_contenedor .contenido .advertencia::before {
  content: "¡Oh no! Olvidaste contestar la pregunta. ";
  display: block;
  margin-bottom: 1em;
  font-weight: bold;
}
.acciones_contenedor .contenido .advertencia::after {
  content: "Regresa y selecciona tu respuesta para desbloquear el siguiente nivel.";
}
.acciones_contenedor .contenido .final {
  display: none;
}

/* Resultados */
#resultados h2.title {
  position: absolute;
  top: 0;
  left: 5%;
  margin: 0;
  margin-top: 8rem;
  color: white;
  z-index: 20;
}
#resultados .metricas_contenedor {
  display: block;
  right: auto;
  left: 7%;
  top: 45%;
}
#resultados .resultados_contenedor {
  width: 60rem;
  max-width: 90vw;
  height: auto;
  top: 40%;
  left: 50%;
  transform: translateY(-50%);
}
#resultados .resultados_contenedor h3 {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-big);
  text-shadow: var(--color-shadow) 2px 2px 0;
}
#resultados .resultados_contenedor .resultados_descripcion {
  color: var(--secondary-color);
  margin-top: 3rem;
}
#resultados .resultados_contenedor .resultados_link {
  width: 20rem;
  height: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #54C700;
  position: absolute;
  top: calc(100% - 4rem);
}
#resultados .resultados_contenedor .resultados_iconosFinales {
  width: 100%;
  margin: 0;
  padding: 0;
  padding-top: 2rem;
  list-style-type: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
#resultados .resultados_contenedor .resultados_iconosFinales li {
  background-color: var(--secondary-color);
  width: calc(20% - 1rem);
  min-width: 10rem;
  height: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 0.5rem 1rem 0.5rem;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  font-size: var(--font-size-small);
}
#resultados .resultados_contenedor .resultados_iconosFinales li img {
  width: calc(var(--icon-size) * 2);
  height: auto;
  position: absolute;
  bottom: 50%;
  display: block;
}
#resultados .resultados_contenedor .resultados_iconosFinales li strong {
  color: white;
}

/* PERSONAJES */
.personaje {
  position: fixed;
  z-index: 20;
  transform-origin: center bottom;
  bottom: calc(20% - 2px);
  left: 0;
}
.personaje.narrador {
  pointer-events: none;
  width: 229px;
  height: 276px;
  left: 20%;
}
.personaje.amarillo, .personaje.azul, .personaje.rosa, .personaje.verde {
  width: 139px;
  height: 153px;
  cursor: pointer;
}
.personaje.personajeActual {
  pointer-events: none;
}
.personaje.personajeActual::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  background-image: url(../img/selectorPersonaje.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 30%;
}
.personaje.personajeActual.seleccionado::before {
  display: none;
}
.personaje > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.personaje.inactivo {
  opacity: 0.5;
}
.personaje.narrador.inactivo {
  opacity: 1;
}
.personaje .contImagen {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.personaje .contImagen img {
  width: auto;
  max-height: 100%;
}
.personaje .contImagen.parado {
  position: relative;
  opacity: 1;
}
.personaje .contImagen.movimiento {
  opacity: 0;
}
.personaje .contImagen.movimiento img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* MEDIAS FOR MOBILE */
/* MEDIAS FOR MOBILE */
@media (max-width: 560px) {
  :root {
    --font-size-title: 34px;
  }
  .title {
    text-shadow: var(--color-shadow) 3px 3px 0;
  }
  .scrollText {
    text-align: center;
  }
  .i04 {
    z-index: 17;
  }
  .i04 ul li {
    width: 100%;
  }
  .pregunta_contenedor {
    top: 3rem;
    transform: translateY(5vh);
  }
  .pregunta_contenedor .title::before {
    display: none;
  }
  .metricas_contenedor .metricas_grafico {
    max-height: 7rem;
    margin: 0 auto;
  }
  .caja_borde_doble::after {
    right: 0;
  }
  #resultados .resultados_contenedor .resultados_iconosFinales li {
    min-width: auto;
    width: calc(30% - 1rem);
    padding: 2rem 0.5rem 0rem 0.5rem;
    height: auto;
  }
  #resultados .resultados_contenedor .resultados_iconosFinales li img {
    width: var(--icon-size);
  }
  #resultados .resultados_contenedor .resultados_iconosFinales li:last-of-type {
    width: calc(40% - 1rem);
  }
}
/* MEDIAS FOR DESKTOP */
@media (min-width: 1024px) and (min-height: 900px) {
  :root {
    --font-size-medium: 24px;
    --font-size-big: 48px;
    --font-size-title: 60px;
    --border-size: 3px;
    --icon-size: 48px;
  }
  #escenario #instrucciones h2.title {
    top: 7rem;
  }
  .caja_borde_sencillo {
    width: 40rem;
  }
  .caja_borde_doble .contenido {
    min-height: 33rem;
  }
  .contenedor_avances {
    width: 50rem;
    padding: 1rem;
    border-radius: 1.5rem;
    grid-gap: 1rem;
    grid-template-columns: 16% calc(84% - 1rem);
    transition: all 0.2s;
  }
  .contenedor_avances > div {
    border-radius: 1.5rem;
  }
  .i04 {
    width: 50rem;
  }
  .i05 input[type=button] {
    width: 20rem;
    height: 8rem;
    border-radius: 1.5rem;
    color: white;
  }
  .pregunta_contenedor {
    width: 65rem;
  }
  .pregunta_contenedor .title::before {
    width: 15rem;
    height: 15rem;
  }
  .pregunta_contenedor .pregunta_opciones input[type=button] {
    width: 14rem;
    height: 8rem;
  }
  .metricas_contenedor {
    width: 55rem;
  }
  .espectacular {
    width: 60rem;
  }
  .acciones_contenedor {
    width: 45rem;
    bottom: 30%;
  }
  .metricas_fuente {
    width: auto;
  }
  #resultados .resultados_contenedor {
    width: 100rem;
  }
  #resultados .resultados_contenedor .resultados_iconosFinales {
    padding-top: 5rem;
    gap: 1rem;
  }
  #resultados .resultados_contenedor .resultados_iconosFinales li {
    width: 15rem;
    height: 7rem;
    padding: 3rem 0.5rem 1rem 0.5rem;
    font-size: var(--font-size-medium);
  }
  #resultados .resultados_contenedor .resultados_iconosFinales li img {
    width: 10rem;
  }
}
@media (hover: hover) {
  .boton:hover {
    transform: scale(1.1);
  }
  .boton:disabled:hover {
    transform: scale(1);
  }
  .onboarding {
    display: none;
  }
  .scrollText {
    display: flex;
  }
}