@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
}

p {
  text-wrap: pretty;
}

@font-face {
  font-family: ProximaNovaLight;
  src: url(../fonts/ProximaNovaLight.eot);
  src: local(☺), url(../fonts/ProximaNovaLight.eot) format("embedded-opentype"), url(../fonts/ProximaNovaLight.woff) format("woff"), url(../fonts/ProximaNovaLight.ttf) format("truetype"), url(../fonts/ProximaNovaLight.otf) format("opentype"), url(../fonts/ProximaNovaLight.svg) format("svg");
}
@font-face {
  font-family: ProximaNova;
  src: url(../fonts/ProximaNova-Regular.eot);
  src: local(☺), url(../fonts/ProximaNova-Regular.eot) format("embedded-opentype"), url(../fonts/ProximaNova-Regular.woff) format("woff"), url(../fonts/ProximaNova-Regular.ttf) format("truetype"), url(../fonts/ProximaNova-Regular.otf) format("opentype"), url(../fonts/ProximaNova-Regular.svg) format("svg");
}
@font-face {
  font-family: ProximaNovaSemibold;
  src: url(../fonts/ProximaNovaSemibold.eot);
  src: local(☺), url(../fonts/ProximaNovaSemibold.eot) format("embedded-opentype"), url(../fonts/ProximaNovaSemibold.woff) format("woff"), url(../fonts/ProximaNovaSemibold.ttf) format("truetype"), url(../fonts/ProximaNovaSemibold.otf) format("opentype"), url(../fonts/ProximaNovaSemibold.svg) format("svg");
}
@font-face {
  font-family: ProximaNovaBold;
  src: url(../fonts/ProximaNovaBold.eot);
  src: local(☺), url(../fonts/ProximaNovaBold.eot) format("embedded-opentype"), url(../fonts/ProximaNovaBold.woff) format("woff"), url(../fonts/ProximaNovaBold.ttf) format("truetype"), url(../fonts/ProximaNovaBold.otf) format("opentype"), url(../fonts/ProximaNovaBold.svg) format("svg");
}
@font-face {
  font-family: intermedium;
  src: url(../fonts/inter-medium.eot) format("embedded-opentype"), url(../fonts/inter-medium.svg) format("svg") url(../fonts/inter-medium.ttf) format("truetype"), url(../fonts/inter-medium.woff) format("woff"), url(../fonts/inter-medium.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: interregular;
  src: url(../fonts/inter-regular.eot) format("embedded-opentype"), url(../fonts/inter-reguar.svg) format("svg") url(../fonts/inter-reguar.ttf) format("truetype"), url(../fonts/inter-reguar.woff) format("woff"), url(../fonts/inter-reguar.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: intersemibold;
  src: url(../fonts/inter-semibold.eot) format("embedded-opentype"), url(../fonts/inter-semibold.svg) format("svg") url(../fonts/inter-semibold.ttf) format("truetype"), url(../fonts/inter-semibold.woff) format("woff"), url(../fonts/inter-semibold.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: interbold;
  src: url(../fonts/inter-bold.eot) format("embedded-opentype"), url(../fonts/inter-bold.svg) format("svg") url(../fonts/inter-bold.ttf) format("truetype"), url(../fonts/inter-bold.woff) format("woff"), url(../fonts/inter-bold.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoThin;
  src: url(../fonts/Roboto-Thin.eot);
  src: url(../fonts/Roboto-Thin.eot?) format("embedded-opentype"), url(../fonts/Roboto-Thin.woff) format("woff"), url(../fonts/Roboto-Thin.ttf) format("truetype"), url(../fonts/Roboto-Thin.svg#Roboto-Thin) format("svg");
}
@font-face {
  font-family: Roboto;
  src: url(../fonts/Roboto-Regular.eot);
  src: url(../fonts/Roboto-Regular.eot?) format("embedded-opentype"), url(../fonts/Roboto-Regular.woff) format("woff"), url(../fonts/Roboto-Regular.ttf) format("truetype"), url(../fonts/Roboto-Regular.svg#Roboto-Regular) format("svg");
}
@font-face {
  font-family: RobotoMedium;
  src: url(../fonts/Roboto-Medium.eot);
  src: url(../fonts/Roboto-Medium.eot?) format("embedded-opentype"), url(../fonts/Roboto-Medium.woff) format("woff"), url(../fonts/Roboto-Medium.ttf) format("truetype"), url(../fonts/Roboto-Medium.svg#Roboto-Medium) format("svg");
}
@font-face {
  font-family: RobotoBold;
  src: url(../fonts/Roboto-Bold.eot);
  src: url(../fonts/Roboto-Bold.eot?) format("embedded-opentype"), url(../fonts/Roboto-Bold.woff) format("woff"), url(../fonts/Roboto-Bold.ttf) format("truetype"), url(../fonts/Roboto-Bold.svg#Roboto-Bold) format("svg");
}
@font-face {
  font-family: RobotoBlack;
  src: url(../fonts/Roboto-Black.eot);
  src: url(../fonts/Roboto-Black.eot?) format("embedded-opentype"), url(../fonts/Roboto-Black.woff) format("woff"), url(../fonts/Roboto-Black.ttf) format("truetype"), url(../fonts/Roboto-Black.svg#Roboto-Black) format("svg");
}
@font-face {
  font-family: "gibsonlight";
  src: url("../fonts/gibson-light.woff2") format("woff2"), url("../fonts/gibson-light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gibsonlight_italic";
  src: url("../fonts/gibson-lightitalic.woff2") format("woff2"), url("../fonts/gibson-lightitalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gibsonregular";
  src: url("../fonts/gibson-regular.woff2") format("woff2"), url("../fonts/gibson-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gibsonitalic";
  src: url("../fonts/gibson-italic.woff2") format("woff2"), url("../fonts/gibson-italic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gibsonsemibold";
  src: url("../fonts/gibson-semibold.woff2") format("woff2"), url("../fonts/gibson-semibold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gibsonsemibold_italic";
  src: url("../fonts/gibson-semibolditalic.woff2") format("woff2"), url("../fonts/gibson-semibolditalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gibsonbold";
  src: url("../fonts/gibson-bold.woff2") format("woff2"), url("../fonts/gibson-bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gibsonbold_italic";
  src: url("../fonts/gibson-bolditalic.woff2") format("woff2"), url("../fonts/gibson-bolditalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
.light {
  font-family: RobotoThin;
  color: #ffffff;
}

.regular {
  font-family: Roboto;
  color: #ffffff;
}

.semibold {
  font-family: RobotoMedium;
  color: #ffffff;
}

.bold {
  font-family: RobotoBold;
  color: #ffffff;
}

.intermedium {
  font-family: intermedium;
}

.interregular {
  font-family: interregular;
}

.intersemibold {
  font-family: intersemibold;
}

.interbold {
  font-family: interbold;
}

.gibsonLight {
  font-family: gibsonlight;
  color: #ffffff;
}
.gibsonLightItalic {
  font-family: gibsonlight_italic;
  color: #ffffff;
}
.gibsonRegular {
  font-family: gibsonregular;
  color: #ffffff;
}
.gibsonItalic {
  font-family: gibsonitalic;
  color: #ffffff;
}
.gibsonSemibold {
  font-family: gibsonsemibold;
  color: #ffffff;
}
.gibsonSemiboldItalic {
  font-family: gibsonsemibold_italic;
  color: #ffffff;
}
.gibsonBold {
  font-family: gibsonbold;
  color: #ffffff;
}
.gibsonBoldItalic {
  font-family: gibsonbold_italic;
  color: #ffffff;
}

a {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:focus {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.bigtitle {
  font-size: 32px;
  text-wrap: balance;
}

.subtitle {
  font-size: 26px;
  text-wrap: balance;
}

@keyframes openmodal {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
.modal {
  display: none;
  position: fixed;
  z-index: 150;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}
.modalContent {
  position: relative;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  background: #a71c15 url(../img/mdb/fondo-rojo.jpg) no-repeat center;
  background-size: cover;
  animation-name: openmodal;
  animation-duration: 0.4s;
}
.modalContent .content {
  width: 90%;
  height: auto;
  margin: 0px auto;
}
.modalContent .contentImage {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0px auto;
}
.modalContent .contentImageIncre {
  width: 250px;
  height: 150px;
  margin: 0px auto 0px;
  background: transparent url(../img/mdb/increible.png) no-repeat center;
  background-size: contain;
}
.modalContent .contentImageFeli {
  width: 220px;
  height: 280px;
  margin: 20px auto 0px;
  background: transparent url(../img/mdb/final.png) no-repeat center;
  background-size: contain;
}
.modalContent .contentImageNum {
  width: 300px;
  height: 300px;
  margin: -70px auto 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: transparent url(../img/mdb/fondo-radial-ashurado.png) no-repeat center;
  background-size: contain;
  background-blend-mode: color-dodge;
}
.modalContent .content .circularNumber {
  text-align: center;
  color: #ffffff;
  font-size: 22px;
  width: 100px;
  height: 100px;
  background-color: #313131;
  padding: 35px 25px;
  border-radius: 50%;
  background: transparent url(../img/anima/Ruedita-1.gif) no-repeat center;
  background-size: 140px;
}
.modalContent .content .circularNumber2 {
  padding: 35px 20px;
  background: transparent url(../img/anima/Ruedita-2.gif) no-repeat center;
  background-size: 140px;
}
.modalContent .content .circularNumber2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  margin: 0px auto 0px;
  background: transparent url(../img/anima/confeti.gif) no-repeat center;
  background-size: contain;
}
.modalContent .contentTitle {
  font-size: 30px;
  margin: 0px auto 20px;
}
.modalContent .contentText {
  width: 100%;
  height: auto;
  margin: -60px auto 0px;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  text-wrap: pretty;
}
.modalContent .contentTextSub {
  max-width: 450px;
  margin: 20px auto 10px;
  font-size: 16px;
  text-align: center;
  color: #ffffff;
}
.modalContent .contentTextSub .bold {
  color: #ffffff;
}
.modalContent .contentTextFinal {
  max-width: 250px;
  margin: 20px auto 10px;
  font-size: 16px;
  text-align: center;
  color: #ffffff;
}
.modalContent .contentTextFinal .bold {
  color: #ffffff;
}
.modalContent .content .btnItem {
  margin: 20px auto;
}
.modalContent .content .btnItem .btnYellow {
  padding: 20px 60px;
}
.modalContent .content .rbs {
  width: 60px;
  height: 60px;
  margin: 20px auto;
  background: transparent url(../img/logos/logoRS.svg) no-repeat center;
  background-size: contain;
}

.progress {
  --size: 100px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 14px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
}
.progress10 {
  animation: progress10 0.5s linear 0s 1 forwards;
}
.progress20 {
  animation: progress20 0.5s linear 0s 1 forwards;
}
.progress30 {
  animation: progress30 0.5s linear 0s 1 forwards;
}
.progress40 {
  animation: progress40 0.5s linear 0s 1 forwards;
}
.progress50 {
  animation: progress50 0.5s linear 0s 1 forwards;
}
.progress60 {
  animation: progress60 0.5s linear 0s 1 forwards;
}
.progress70 {
  animation: progress70 0.5s linear 0s 1 forwards;
}
.progress80 {
  animation: progress80 0.5s linear 0s 1 forwards;
}
.progress90 {
  animation: progress90 0.5s linear 0s 1 forwards;
}
.progress100 {
  animation: progress100 0.5s linear 0s 1 forwards;
}
.progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}
.progress .bg {
  stroke: #be2379;
}
.progress .fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.5s linear 0s;
  stroke: #e06573;
}
@media screen and (max-width: 450px) {
  .progress {
    width: 80px;
    height: 80px;
  }
}

@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@keyframes progress10 {
  from {
    --progress: 0;
  }
  to {
    --progress: 10;
  }
}
@keyframes progress20 {
  from {
    --progress: 0;
  }
  to {
    --progress: 20;
  }
}
@keyframes progress30 {
  from {
    --progress: 0;
  }
  to {
    --progress: 20;
  }
}
@keyframes progress40 {
  from {
    --progress: 0;
  }
  to {
    --progress: 40;
  }
}
@keyframes progress50 {
  from {
    --progress: 0;
  }
  to {
    --progress: 50;
  }
}
@keyframes progress60 {
  from {
    --progress: 0;
  }
  to {
    --progress: 60;
  }
}
@keyframes progress70 {
  from {
    --progress: 0;
  }
  to {
    --progress: 70;
  }
}
@keyframes progress80 {
  from {
    --progress: 0;
  }
  to {
    --progress: 80;
  }
}
@keyframes progress90 {
  from {
    --progress: 0;
  }
  to {
    --progress: 90;
  }
}
@keyframes progress100 {
  from {
    --progress: 0;
  }
  to {
    --progress: 100;
  }
}
.fondo {
  background: #c68488 url(../img/fondo.png) no-repeat center;
  background-size: cover;
}
.fondo.bgBlue {
  background: #7f12ab url(../img/fondo.png) no-repeat right;
  background-size: cover;
}
.fondo.bgTri {
  background: #c68488 url(../img/fondo.png) no-repeat center;
  background-size: cover;
}
.fondo.bgTriL {
  background: #c68488 url(../img/fondo.png) no-repeat left;
  background-size: cover;
}

.general {
  width: 100%;
  max-width: 1024px;
  height: auto;
  min-height: 100vh;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.generalContainer {
  width: 90%;
  height: auto;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.generalItem {
  width: 100%;
  height: auto;
  margin: 10px auto 20px;
}
.generalItemSpec {
  margin: 0px auto 0px;
}
.general .logo31years {
  width: 225px;
  height: 138px;
  margin: 20px auto;
  background: transparent url(../img/gral/logo_31years.png) no-repeat center;
  background-size: contain;
}
.general .start {
  width: 100%;
  height: auto;
}
.general .startContainer {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.general .startText {
  width: 100%;
  height: auto;
  margin: 0px auto;
}
.general .startText p {
  text-align: center;
}
.general .startTextItem {
  max-width: 280px;
  height: auto;
  margin: 20px auto 40px;
  color: #ffffff;
}
.general .startText.finalInstruction {
  font-size: 16px;
  line-height: 22px;
}
.general .startTitle {
  font-size: 35px;
  color: #ffffff;
}
.general .startTitle span {
  color: #ffffff;
}

.verticalMid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btnContainer {
  list-style-type: none;
  width: 100%;
  height: auto;
  margin: 30px auto;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.btnItem {
  display: block;
  margin: 0px;
}
.btnGrey {
  cursor: pointer;
  display: block;
  margin: 0px auto;
  color: #ffffff;
  font-size: 16px;
  padding: 15px 40px;
  border-radius: 50px;
  outline: none;
  color: #606060;
  background-color: #f3f2f1;
}
.btnInac {
  cursor: pointer;
  display: block;
  margin: 0px auto;
  color: #ffffff;
  font-size: 16px;
  padding: 15px 40px;
  border-radius: 50px;
  outline: none;
  color: #b3b3b3;
  background-color: #f7f7f7;
}
.btnPurple {
  cursor: pointer;
  display: block;
  margin: 0px auto;
  color: #ffffff;
  font-size: 16px;
  padding: 15px 40px;
  border-radius: 50px;
  outline: none;
  background: #b51676;
}
.btnTurquoise {
  cursor: pointer;
  display: block;
  margin: 0px auto;
  color: #ffffff;
  font-size: 16px;
  padding: 15px 40px;
  border-radius: 50px;
  outline: none;
  background: #b51676;
  border: none;
}
.btnOff {
  cursor: pointer;
  display: block;
  margin: 0px auto;
  color: #ffffff;
  font-size: 16px;
  padding: 15px 40px;
  border-radius: 50px;
  outline: none;
  background: #b51676;
  border: none;
  opacity: 0.5;
  pointer-events: none;
}
.btnActive {
  opacity: 1;
}
.btnLink {
  display: block;
  margin: 15px auto;
  text-align: center;
  color: #0071ce;
  text-decoration: underline;
}
.btnBlink {
  display: block;
  margin: 5px auto 0px;
  text-align: center;
  color: #fff;
  text-decoration: underline;
}

.nav {
  width: 100%;
  height: auto;
}
.navContainer {
  width: 90%;
  max-width: 800px;
  height: auto;
  margin: 40px auto 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.navContainer .logo31years {
  width: 140px;
  height: 100px;
  margin: 0px;
}
@media screen and (max-width: 450px) {
  .navContainer .logo31years {
    width: 83px;
    height: 80px;
  }
}
.nav .counter {
  position: relative;
}
.nav .counter .progressNumber {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0px auto;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.nav .counter .progressNumberItem {
  color: #fff;
  font-size: 22px;
}
.nav .counter .progressNumberItem:nth-child(1) {
  font-size: 25px;
}
.nav .counter .progressNumberItem:nth-child(3) {
  font-size: 16px;
}
.nav .counter .progressNumberItem.q10 {
  font-size: 22px;
}

.juegoTitle {
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  margin: 0px auto;
  text-align: center;
  font-size: 20px;
}
.juegoSubtitle {
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  margin: 10px auto 0px;
  text-align: center;
  font-size: 14px;
}
.juegoContainer {
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.juegoContainer .pregunta {
  width: 100%;
  height: auto;
  margin: 0px auto;
}
.juegoContainer .preguntaContainer {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 40px auto 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.juegoContainer .preguntaContainer.m20 {
  margin: 20px auto 0px;
}
.juegoContainer .preguntaItem {
  flex: 0 0 auto;
  z-index: 100;
  top: 0px;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}
.juegoContainer .pregunta .foto {
  width: 100%;
  max-width: 640px;
  margin: 0px auto;
  border-radius: 8px;
  border: 1px solid #fff;
}
.juegoContainer .pregunta .foto::after {
  content: "";
  display: block;
  padding-bottom: 52%;
}
.juegoContainer .pregunta .foto1 {
  background: transparent url(../img/gral/tvazteca.png) no-repeat center;
  background-size: cover;
  margin-bottom: 20px;
}
.juegoContainer .pregunta .foto2 {
  background: transparent url(../img/gral/hechos.png) no-repeat center;
  background-size: cover;
  margin-bottom: 20px;
}
.juegoContainer .pregunta .foto3 {
  background: transparent url(../img/gral/sitiotva.png) no-repeat center;
  background-size: contain;
  border: none;
  -webkit-box-reflect: below -50px -webkit-gradient(linear, left top, from(transparent), to(rgba(255, 255, 255, 0.5)));
}
.juegoContainer .preguntaOptions {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.juegoContainer .preguntaOptions.grid {
  display: grid;
  grid-template-columns: repeat(3, 97px);
  grid-template-rows: repeat(2, 80px);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}
.juegoContainer .preguntaLabel {
  display: flex;
  width: 100%;
  min-width: 270px;
  height: auto;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 4px;
}
.juegoContainer .preguntaLabel.Inactive {
  background: rgba(255, 255, 255, 0.5);
}
.juegoContainer .preguntaLabel input {
  display: none;
}
.juegoContainer .preguntaLabelOption {
  display: flex;
  width: 97px;
  height: auto;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 4px;
}
.juegoContainer .preguntaLabelOption input {
  display: none;
}
.juegoContainer .preguntaOption {
  width: 97px;
  height: 80px;
  display: block;
  list-style: none;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 4px;
  border: 1px solid #fff;
}
.juegoContainer .preguntaOption.uno {
  background: transparent url(../img/logos/uno.png) no-repeat center;
  background-size: 85px;
}
.juegoContainer .preguntaOption.tva {
  background: transparent url(../img/logos/tva.png) no-repeat center;
  background-size: 60px;
}
.juegoContainer .preguntaOption.tvadep {
  background: transparent url(../img/logos/tvadep.png) no-repeat center;
  background-size: 75px;
}
.juegoContainer .preguntaOption.amas {
  background: transparent url(../img/logos/amas.png) no-repeat center;
  background-size: 80px;
}
.juegoContainer .preguntaOption.siete {
  background: transparent url(../img/logos/siete.png) no-repeat center;
  background-size: 60px;
}
.juegoContainer .preguntaOption.adn {
  background: transparent url(../img/logos/adn40.png) no-repeat center;
  background-size: 85px;
}
.juegoContainer .preguntaText {
  cursor: pointer;
  width: 100%;
  min-width: 270px;
  height: auto;
  margin: 0px auto;
  padding: 15px 12px;
  font-size: 22px;
  text-wrap: pretty;
  background-color: transparent;
  border: 1px solid white;
  border-radius: 4px;
}
.juegoContainer .pregunta .preguntaLabel input[type=radio]:checked + .preguntaText {
  border: none;
  padding: 15px;
  display: block;
  background-color: #c729e7;
}
.juegoContainer .pregunta .preguntaLabelOption input[type=checkbox]:checked + .preguntaOption {
  border: 1px solid white;
  padding: 15px;
  display: block;
  background-color: #c729e7;
}
.juegoContainer .personaje {
  width: 100%;
  height: auto;
  margin: 0px auto 60px;
}
.juegoContainer .personajeContainer {
  list-style-type: none;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 40px auto 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.juegoContainer .personajeItem {
  width: 45%;
  height: auto;
}
.juegoContainer .personajeRadio {
  display: none;
}
.juegoContainer .personajeFoto {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0px auto;
  border-radius: 20px;
  border: 1.5px solid #c729e7;
  transition: transform 0.3s ease, border 0.3s ease;
  background-size: cover;
}
.juegoContainer .personajeFoto::after {
  content: "";
  display: block;
  padding-bottom: 56%;
}
.juegoContainer .personajeName {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  margin: 20px auto;
  text-align: center;
}
.juegoContainer .personaje .personajeItem .personajeRadio:checked + .personajeFoto {
  background-size: 110%;
  border: 1.5px solid #3bfdfb;
  transition: border 0.3s ease, background-size 0.3s ease;
}
.juegoContainer .ordena {
  width: 100%;
  height: auto;
  margin: 0px auto;
}
.juegoContainer .ordenaContainer {
  margin: 30px auto 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
@media screen and (min-width: 360px) {
  .juegoContainer .ordenaContainer {
    justify-content: center;
    gap: 40px;
  }
}
.juegoContainer .ordenaContainer .numeros {
  position: relative;
  width: 50px;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.juegoContainer .ordenaContainer .numerosLine {
  width: 10px;
  height: 760px;
  margin: 17px auto 0px;
  background-color: #be2379;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 6px;
}
.juegoContainer .ordenaContainer .numerosLine3 {
  height: 280px;
}
.juegoContainer .ordenaContainer .numerosLineIcon {
  margin: 30px auto 0px;
}
.juegoContainer .ordenaContainer .numerosList {
  list-style-type: none;
  position: absolute;
  left: 0;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  margin: 0px auto;
  top: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 77px;
}
.juegoContainer .ordenaContainer .numerosList3 {
  height: auto;
  gap: 60px;
}
.juegoContainer .ordenaContainer .numerosListItem {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 9px 15px;
  background: #e06573;
}
.juegoContainer .ordenaContainer .logos {
  position: relative;
  width: 117px;
  height: auto;
}
.juegoContainer .ordenaContainer .logosList {
  list-style-type: none;
  width: 100%;
  height: auto;
  margin: 15px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 35px;
}
.juegoContainer .ordenaContainer .logosListItem {
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1.5px solid #c729e7;
  border-radius: 6px;
  transition: transform 0.3s ease, border 0.3s ease;
  background: #ffffff url(../img/dragging_pink.png) no-repeat right 10px center;
  background-size: 14px;
}
.juegoContainer .ordenaContainer .logosTva {
  list-style-type: none;
  position: absolute;
  z-index: 100;
  top: 0;
  width: 100%;
  height: auto;
  margin: 15px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 35px;
}
.juegoContainer .ordenaContainer .logosTvaItem {
  cursor: grab;
  width: 100%;
  height: 80px;
  padding: 0px 30px 0px 10px;
  border: 1px solid #e321e6;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.juegoContainer .ordenaContainer .logosTvaItem.tva2020 {
  background: transparent url(../img/logos/azteca.png) no-repeat left 20px center;
  background-size: 55px;
}
.juegoContainer .ordenaContainer .logosTvaItem.tvazteca {
  background: transparent url(../img/logos/tvazteca.png) no-repeat left 20px center;
  background-size: 55px;
}
.juegoContainer .ordenaContainer .logosTvaItem.tvavalor {
  background: transparent url(../img/logos/tvavalor.png) no-repeat left 20px center;
  background-size: 55px;
}
.juegoContainer .ordenaContainer .logosTvaItem.tvagreen {
  background: transparent url(../img/logos/tvagreen.png) no-repeat left 20px center;
  background-size: 55px;
}
.juegoContainer .ordenaContainer .logosTvaItem.television {
  background: transparent url(../img/logos/television.png) no-repeat left 20px center;
  background-size: 55px;
}
.juegoContainer .ordenaContainer .logosTvaItem.tvadef {
  background: transparent url(../img/logos/tva_def.png) no-repeat left 20px center;
  background-size: 55px;
}
.juegoContainer .ordenaContainer .logosTvaItem.tvaspace {
  background: transparent url(../img/logos/tva_space.png) no-repeat left 20px center;
  background-size: 55px;
}
.juegoContainer .ordenaContainer .logosIcons {
  list-style-type: none;
  position: absolute;
  z-index: 100;
  top: 0;
  width: 140px;
  height: auto;
  margin: 30px auto 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.juegoContainer .ordenaContainer .logosIconsItem {
  display: block;
  width: 100px;
  height: 100px;
}
.juegoContainer .ordenaContainer .simbolos {
  position: relative;
  width: 180px;
  height: auto;
}
.juegoContainer .ordenaContainer .simbolosSquare {
  list-style-type: none;
  width: 140px;
  height: auto;
  margin: 20px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.juegoContainer .ordenaContainer .simbolosSquareItem {
  width: 180px;
  height: 120px;
  background-color: #fff;
  border: 1.5px solid #c729e7;
  border-radius: 10px;
  transition: transform 0.3s ease, border 0.3s ease;
  background: transparent url(../img/dragging_pink.svg) no-repeat right 10px center;
  background-size: 14px;
}
.juegoContainer .ordenaContainer .simbolosIcons {
  list-style-type: none;
  position: absolute;
  z-index: 100;
  top: 0;
  width: 140px;
  height: auto;
  margin: 20px auto 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.juegoContainer .ordenaContainer .simbolosIconsItem {
  display: block;
  width: 180px;
  height: 120px;
}
.juegoContainer .ordenaContainer .dragging {
  border-radius: 6px;
  z-index: 50;
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
}
.juegoContainer .ordenaContainer .dropit {
  border-radius: 6px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.juego9Container {
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}
.juego9Container .preguntas {
  width: 100%;
  height: auto;
  margin: 0px auto;
  display: flex;
  flex-wrap: nowrap;
}
.juego9Container .preguntasSlider {
  margin: 0px auto;
  position: relative;
  display: flex;
  align-items: center;
}
.juego9Container .preguntasSlider .arrow {
  cursor: pointer;
  border: solid #ffca00;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
  transform-origin: center;
}
.juego9Container .preguntasSlider .arrowLeft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.juego9Container .preguntasSlider .arrowRight {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.juego9Container .preguntasSlider .arrowUp {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.juego9Container .preguntasSlider .arrowDown {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.juego9Container .preguntasContainer {
  list-style-type: none;
  width: 260px;
  height: auto;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: scroll;
  scroll-snap-type: x proximity;
}
.juego9Container .preguntasContainer::-webkit-scrollbar {
  display: none;
}
.juego9Container .preguntasItem {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 260px;
  height: 150px;
  margin: 0 auto;
  background-color: transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.juego9Container .preguntasRespuesta {
  width: 250px;
  height: 50px;
  border: 1px dashed #fff;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.juego9Container .preguntasText {
  width: 80%;
  height: auto;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  text-wrap: pretty;
}
.juego9Container .preguntas .moved {
  position: relative;
  top: -1px;
  left: -1px;
  width: 250px;
  height: auto;
  min-height: 50px;
  border: none;
  border-radius: 8px;
  font-family: ProximaNovaBold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.juego9Container .respuestas {
  width: 100%;
  height: auto;
  margin: 0px auto;
}
.juego9Container .respuestasContainer {
  list-style-type: none;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px 20px;
}
.juego9Container .respuestasItem {
  flex: 0 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  padding: 8px;
  background-color: #6a2294;
  border: 0.5px solid #ffffff;
  border-radius: 6px;
  font-size: 15px;
  line-height: 17px;
  text-align: center;
  text-wrap: pretty;
  cursor: grab;
}/*# sourceMappingURL=styles.css.map */


.container__spinner {
    width: 100%;
    height: 100vh;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.89);
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

    .container__spinner.active {
        display: flex;
    }

figure {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 6.250em;
    height: 6.250em;
    animation: rotate 2.4s linear infinite;
}



.white {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    animation: flash 2.4s linear infinite;
    opacity: 0;
}



.dot {
    position: absolute;
    margin: auto;
    width: 2.4em;
    height: 2.4em;
    border-radius: 100%;
    transition: all 1s ease;
}



    .dot:nth-child(2) {
        top: 0;
        bottom: 0;
        left: 0;
        background: rgb(239, 41, 63);
        animation: dotsY 2.4s linear infinite;
    }



    .dot:nth-child(3) {
        left: 0;
        right: 0;
        top: 0;
        background: #E4BB1B;
        animation: dotsX 2.4s linear infinite;
    }



    .dot:nth-child(4) {
        top: 0;
        bottom: 0;
        right: 0;
        background: #7937C8;
        animation: dotsY 2.4s linear infinite;
    }



    .dot:nth-child(5) {
        left: 0;
        right: 0;
        bottom: 0;
        background: #2277D6;
        animation: dotsX 2.4s linear infinite;
    }



@keyframes rotate {

    0% {
        transform: rotate(0);
    }



    10% {
        width: 6.250em;
        height: 6.250em;
    }



    66% {
        width: 2.4em;
        height: 2.4em;
    }



    100% {
        transform: rotate(360deg);
        width: 6.250em;
        height: 6.250em;
    }
}



@keyframes dotsY {

    66% {
        opacity: .1;
        width: 2.4em;
    }



    77% {
        opacity: 1;
        width: 0;
    }
}



@keyframes dotsX {

    66% {
        opacity: .1;
        height: 2.4em;
    }



    77% {
        opacity: 1;
        height: 0;
    }
}



@keyframes flash {

    33% {
        opacity: 0;
        border-radius: 0%;
    }



    55% {
        opacity: .6;
        border-radius: 100%;
    }



    66% {
        opacity: 0;
    }
}