@import url("../fonts/roboto/font_roboto.css");
@import url("../fonts/komika/stylesheet.css");
@import url("../fonts/generales_ieem/style.css");
@import url("../fonts/Dacherry/stylesheet.css");
@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Tilt+Neon&family=Unkempt&display=swap" rel="stylesheet');
@import "pop-up.css";
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.clear {
  clear: both;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  letter-spacing: 0.05rem;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: #f09;
}

p {
  font-weight: 300;
}

.no-link {
  cursor: auto;
}

/*------- ANIMACIONES GENERALES --------*/
.fadeTop {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.fadeBottom {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.fadeRight {
  opacity: 0;
  transform: translate(10vh, 0vh);
  transition: all 1s;
}

.fadeLeft {
  opacity: 0;
  transform: translate(-10vh, 0vh);
  transition: all 1s;
}

.visible {
  opacity: 1;
  transform: translate(0, 0);
}

html, body {
  height: 100%;
  min-height: 100%;
  font-family: "Roboto";
}

h1, h2, h3, h4, h5 {
  display: block;
}

h1 {
  font-size: 5rem;
}
h1 img {
  width: auto;
  height: 7rem;
}

h2 {
  font-size: 4rem;
}

#btn-menu {
  display: none;
}

img.movil {
  display: none;
}

body {
  font-size: 1.6rem; /* 1rem = 10px */
  font-style: normal;
  background-color: #48175C;
  background-image: url(../imagenes/back-body.jpg);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: center 100%;
  overflow-x: hidden;
  position: relative;
}

.btn {
  display: block;
  border-radius: 2rem;
  padding: 1rem 2rem;
  color: #fff;
  cursor: pointer;
  text-align: center;
}

.cont-principal {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

.prev, .presentacion, .antecedentes, .modalidades, .ubica, .boletas, .recursos, .mundo-divertido, .preguntas-frecuentes {
  display: block;
  width: 100%;
  height: auto;
  min-height: 90rem;
  margin: auto;
  position: relative;
}
.prev h2, .presentacion h2, .antecedentes h2, .modalidades h2, .ubica h2, .boletas h2, .recursos h2, .mundo-divertido h2, .preguntas-frecuentes h2 {
  display: block;
  width: 100%;
  color: #fdfcff;
  margin: 2rem auto;
  text-align: center;
  font-family: "Unkempt", cursive;
  font-size: 6rem;
  position: relative;
  top: -5rem;
  font-weight: 100;
  letter-spacing: 0.1rem;
  text-shadow: 0px 0px 40px #b85cff;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.prev h3, .presentacion h3, .antecedentes h3, .modalidades h3, .ubica h3, .boletas h3, .recursos h3, .mundo-divertido h3, .preguntas-frecuentes h3 {
  font-family: "Unkempt", cursive;
  color: #8062F8;
  font-size: 3rem;
  margin-bottom: 1.5rem;
}
.prev h3 span, .presentacion h3 span, .antecedentes h3 span, .modalidades h3 span, .ubica h3 span, .boletas h3 span, .recursos h3 span, .mundo-divertido h3 span, .preguntas-frecuentes h3 span {
  display: block;
  font-size: 2.5rem;
  font-weight: 500;
  color: #f5be0b;
}
.prev ul li, .presentacion ul li, .antecedentes ul li, .modalidades ul li, .ubica ul li, .boletas ul li, .recursos ul li, .mundo-divertido ul li, .preguntas-frecuentes ul li {
  font-family: "Kumbh Sans", sans-serif;
  color: #76787b;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
.prev h4, .presentacion h4, .antecedentes h4, .modalidades h4, .ubica h4, .boletas h4, .recursos h4, .mundo-divertido h4, .preguntas-frecuentes h4 {
  font-family: "Unkempt", cursive;
  font-size: 3rem !important;
  line-height: 3rem;
}

.iframe-animacion {
  overflow: visible !important;
  border: none;
}

.presentacion, .antecedentes, .modalidades, .ubica, .boletas, .recursos, .mundo-divertido, .preguntas-frecuentes {
  padding-top: 20rem;
}

.contenedor-nav {
  display: none;
  background-color: rgba(21, 25, 71, 0.5);
}
.contenedor-nav .icon {
  display: flex;
  font-family: "generales_ieem";
  width: 10rem;
  height: auto;
}
.contenedor-nav .icon.icon-ieem_logo {
  display: block;
  font-size: 6rem;
  width: auto;
  text-align: center;
  color: #fff;
  margin-right: 4rem;
}
.contenedor-nav nav {
  display: flex;
}
.contenedor-nav nav ul {
  display: flex;
}
.contenedor-nav nav ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 1rem;
}
.contenedor-nav nav ul li a {
  display: block;
  border-radius: 2rem;
  padding: 1rem 2rem;
  color: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 1.3rem;
  background: rgb(255, 0, 185);
  background: linear-gradient(180deg, rgb(255, 0, 185) 0%, rgb(124, 21, 114) 100%);
  color: #ffffff;
  border: solid 2px #a145cb;
  transition: all 0.5s;
}
.contenedor-nav nav ul li a:hover {
  transform: scale(1.2);
  transition: all 0.5s;
  background: rgb(124, 21, 114);
  background: linear-gradient(180deg, rgb(124, 21, 114) 0%, rgb(255, 0, 185) 100%);
}
.contenedor-nav.fixed {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 2rem auto;
  padding: 3rem;
  transition: all 0.2s;
  width: 100%;
  z-index: 6;
}

.prev {
  background-image: url(../imagenes/back-prev.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
  overflow: hidden;
  position: relative;
}
.prev .contenedor {
  position: relative;
  z-index: 1;
}
.prev .contenedor .icon {
  display: flex;
  font-family: "generales_ieem";
  width: 10rem;
  height: auto;
}
.prev .contenedor .icon.icon-ieem_logo {
  display: block;
  font-size: 8rem;
  width: 100%;
  text-align: center;
  color: #fff;
  margin: 5rem auto;
}
.prev .contenedor img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 50%;
  max-height: 50rem;
}
.prev .btn-main {
  background: rgb(255, 0, 185);
  background: linear-gradient(180deg, rgb(255, 0, 185) 0%, rgb(124, 21, 114) 100%);
  color: #fff;
  font-size: 1.4rem;
  width: 20rem;
  margin: 5rem auto;
  position: relative;
  z-index: 3;
  border: solid 1px #dccffb;
  transition: all 0.5s;
}
.prev .btn-main:hover {
  transform: scale(1.2);
  transition: all 0.5s;
  background: rgb(124, 21, 114);
  background: linear-gradient(180deg, rgb(124, 21, 114) 0%, rgb(255, 0, 185) 100%);
}
.prev .cohete {
  display: block;
  position: absolute;
  width: 80rem;
  height: 60rem;
  overflow: visible !important;
  border: none;
  left: 0;
  right: 0;
  top: 10%;
  bottom: 0;
  margin: 0 auto;
  z-index: 3;
}

.presentacion {
  background-image: url(../imagenes/back-presentacion.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.presentacion .iframe-animacion {
  display: block;
  position: absolute;
  width: 65rem;
  height: 50rem;
  left: 0;
  right: 0;
  top: 10%;
  bottom: 0;
  margin: 0 auto;
}

.mundo-div {
  position: absolute;
  right: 0;
  bottom: -8rem;
}
.mundo-div img {
  display: block;
  width: 25rem;
  height: auto;
  transition: all 0.5s;
}
.mundo-div img:hover {
  transition: all 0.5s;
  width: 27rem;
}

.resultados-div {
  position: absolute;
  left: -5rem;
  bottom: -8rem;
}
.resultados-div img {
  display: block;
  width: 35rem;
  height: auto;
  transition: all 0.5s;
  /*
  &:hover {
      transition: all .5s;
      width: 37rem;
  }
  */
}

.antecedentes {
  min-height: 80rem;
  margin-bottom: 10rem;
}
.antecedentes .back1 {
  position: absolute;
  left: 0;
  bottom: -8rem;
  width: 30rem;
}
.antecedentes #slider {
  margin: 0 auto;
  width: 800px;
  max-width: 100%;
  text-align: center;
}
.antecedentes #slider input[type=radio] {
  display: none;
}
.antecedentes #slider label {
  cursor: pointer;
  text-decoration: none;
}
.antecedentes #slides {
  margin-top: 50px;
  padding: 0 2%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  width: 100%;
}
.antecedentes #slides .slide_1 {
  align-items: center;
}
.antecedentes .slide-content h3, .antecedentes .slide-content ul li {
  color: #fff;
  text-align: left;
}
.antecedentes .slide-content h3 {
  font-family: "Kumbh Sans", sans-serif;
  color: #fff;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  text-align: left;
  color: #f5be0b;
  border-bottom: solid 2px #fff;
  padding: 0 0 2rem 0;
}
.antecedentes .slide-content h3 span {
  display: block;
  font-size: 2.5rem;
  font-weight: 500;
  color: #fff;
}
.antecedentes #overflow {
  width: 100%;
  overflow: hidden;
}
.antecedentes #slide1:checked ~ #slides .inner {
  margin-left: -100%;
}
.antecedentes #slide2:checked ~ #slides .inner {
  margin-left: 0;
}
.antecedentes #slide3:checked ~ #slides .inner {
  margin-left: -200%;
}
.antecedentes #slides .inner {
  transition: margin-left 800ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 400%;
  height: auto;
}
.antecedentes #slides .inner h2 {
  margin-top: 10rem;
}
.antecedentes #slides .slide {
  width: 25%;
  float: left;
  display: flex;
  justify-content: center;
  height: 100%;
  color: black;
}
.antecedentes #bullets {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.antecedentes #bullets .linea {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 0.5rem;
  background-color: #fff;
  top: 15px;
  left: 0;
  z-index: 1;
}
.antecedentes #bullets .planeta {
  display: block;
  position: absolute;
  width: auto;
  height: 8rem;
  top: -20px;
  left: 0;
  right: 0;
  z-index: 3;
  margin: auto;
  transition: all 0.2s;
}
.antecedentes #bullets label {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #f09;
  margin: 0 10px;
  position: relative;
  z-index: 2;
}
.antecedentes #slide1:checked ~ #bullets .planeta {
  left: -10px;
  right: inherit;
  margin: inherit;
  transition: all 0.2s;
}
.antecedentes #slide3:checked ~ #bullets .planeta {
  left: inherit;
  right: -10px;
  margin: inherit;
  transition: all 0.2s;
}
.antecedentes #slide1:checked ~ #bullets label:nth-child(1),
.antecedentes #slide2:checked ~ #bullets label:nth-child(2),
.antecedentes #slide2:checked ~ #bullets label:nth-child(3) {
  background: transparent;
}

@media screen and (max-width: 900px) {
  #slides {
    max-width: 98%;
    margin: 0 auto;
  }
}
.preguntas-frecuentes-div {
  position: absolute;
  right: 0;
  bottom: -8rem;
}
.preguntas-frecuentes-div img {
  display: block;
  width: 30rem;
  height: auto;
  transition: all 0.5s;
}
.preguntas-frecuentes-div img:hover {
  transition: all 0.5s;
  width: 32rem;
}

.modalidades .back1 {
  position: absolute;
  left: 0;
  bottom: -8rem;
  width: 40rem;
}
.modalidades .contenedor-modalidades {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  z-index: 3;
}
.modalidades .contenedor-modalidades div {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2rem;
  width: 40%;
  margin: 5rem;
  box-shadow: 3px 3px 10px rgba(179, 144, 255, 0.5);
}
.modalidades .contenedor-modalidades div:nth-child(1) {
  transform: rotate(-5deg);
  transition: all 0.2s;
}
.modalidades .contenedor-modalidades div:nth-child(1):hover {
  transform: rotate(0);
  transition: all 0.2s;
}
.modalidades .contenedor-modalidades div:nth-child(2) {
  transform: rotate(5deg);
  transition: all 0.2s;
}
.modalidades .contenedor-modalidades div:nth-child(2):hover {
  transform: rotate(0);
  transition: all 0.2s;
}

.ubica {
  height: 100vh;
  min-height: auto;
  padding-bottom: 120rem;
}
.ubica .ubicacion-modulos {
  display: block;
  width: 100%;
  max-width: 90rem;
  height: 60rem;
  margin: 0 auto 40rem auto;
  position: relative;
}
.ubica .back1 {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: auto;
  bottom: 0;
}
.ubica .back2, .ubica .movil {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 70rem;
  bottom: 2rem;
}
.ubica .intrucciones {
  display: flex;
  justify-content: center;
  align-content: center;
  max-width: 96rem;
  margin: 0 auto;
  flex-wrap: wrap;
}
.ubica .intrucciones li {
  display: block;
  max-width: 25rem;
  padding-left: 3rem;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 2rem auto;
  color: #fff;
  position: relative;
  margin-right: 3rem;
}
.ubica .intrucciones li:nth-child(1) {
  background-image: url(../imagenes/ubicacion-modulos-1.svg);
}
.ubica .intrucciones li:nth-child(2) {
  background-image: url(../imagenes/ubicacion-modulos-3.svg);
}
.ubica .intrucciones li:nth-child(3) {
  background-image: url(../imagenes/ubicacion-modulos-2.svg);
}
.ubica .intrucciones li span {
  display: inline-block;
  position: relative;
  font-size: 2rem;
  font-weight: 800;
  left: 4;
  margin-right: 1rem;
}

.boletas {
  padding-bottom: 0;
  position: relative;
}
.boletas .back1 {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  margin: auto;
  width: auto;
  height: 5rem;
}
.boletas .back2 {
  position: absolute;
  left: -15rem;
  bottom: 20%;
  width: 30rem;
}
.boletas .movil {
  display: none;
}
.boletas .boletas-animacion {
  display: block;
  width: 34rem;
  height: 46rem;
  position: absolute;
  right: 0;
}

.mundo-divertido .back1 {
  position: absolute;
  bottom: 10%;
  left: 5rem;
  margin: auto;
  width: auto;
  height: 25rem;
}
.mundo-divertido .mundo-div-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.mundo-divertido .mundo-div-links li {
  width: 30%;
  height: 20rem;
  min-width: 25rem;
  max-width: 35rem;
  margin: 2rem;
  position: relative;
  z-index: 3;
}
.mundo-divertido .mundo-div-links li img {
  display: block;
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.mundo-divertido h4 {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin: 0rem auto 5rem auto;
}

.boletas .contenedor-boletas, .boletas .contenedor-recursos, .recursos .contenedor-boletas, .recursos .contenedor-recursos {
  display: block;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 3rem;
  position: relative;
  z-index: 3;
}
.boletas .contenedor-boletas ul, .boletas .contenedor-recursos ul, .recursos .contenedor-boletas ul, .recursos .contenedor-recursos ul {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.boletas .contenedor-boletas ul a, .boletas .contenedor-recursos ul a, .recursos .contenedor-boletas ul a, .recursos .contenedor-recursos ul a {
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 2rem;
  border: solid 2px #FFF;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30rem;
  flex-wrap: wrap;
  text-align: left;
  cursor: pointer;
  margin: 0 5rem;
  position: relative;
  font-family: "Tilt Neon", cursive;
  font-weight: 400;
  letter-spacing: normal;
  color: #fff;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0px 0px 30px rgba(184, 92, 255, 0.5);
  transition: all 0.2s;
}
.boletas .contenedor-boletas ul a:hover, .boletas .contenedor-recursos ul a:hover, .recursos .contenedor-boletas ul a:hover, .recursos .contenedor-recursos ul a:hover {
  transition: all 0.2s;
  box-shadow: 0px 0px 30px rgba(184, 92, 255, 0);
  background-color: #b85cff;
  transform: scale(1.1);
}
.boletas h4, .recursos h4 {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin: 0rem auto 5rem auto;
}

.recursos {
  padding-bottom: 25rem;
}

.preguntas-frecuentes .back3 {
  position: absolute;
  bottom: -20%;
  left: 0;
  right: 0;
  margin: auto;
  width: auto;
  height: 30rem;
}
.preguntas-frecuentes .contenedor-preguntas {
  display: block;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 3rem;
}
.preguntas-frecuentes .contenedor-preguntas ul {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}
.preguntas-frecuentes .contenedor-preguntas ul li {
  color: #fff;
  padding: 1rem 2rem 1rem 7rem;
  border: solid 1px #fff;
  border-radius: 2rem;
  font-size: 1.7rem;
  font-family: "Tilt Neon", cursive;
  font-weight: 400;
  display: flex;
  align-items: center;
  min-width: 30rem;
  flex-wrap: wrap;
  text-align: left;
  cursor: pointer;
  margin: 0 5rem;
  position: relative;
  letter-spacing: normal;
  color: #fff;
  margin-bottom: 1.5rem;
  box-shadow: 0px 0px 30px rgba(184, 92, 255, 0.5);
  transition: all 0.2s;
}
.preguntas-frecuentes .contenedor-preguntas ul li:hover {
  transition: all 0.2s;
  box-shadow: 0px 0px 30px rgba(184, 92, 255, 0);
  background-color: #b85cff;
  transform: scale(1.1);
}
.preguntas-frecuentes .contenedor-preguntas ul li span {
  display: block;
  width: 10rem;
  height: 5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -5rem;
  content: "";
  background-image: url(../imagenes/preguntas-f-pregunta-01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.8s;
}
.preguntas-frecuentes .contenedor-preguntas ul li:hover span {
  left: 70%;
  opacity: 0;
  animation-delay: 0.5s;
  transition: all 0.5s;
}
.preguntas-frecuentes .contenedor-preguntas ul.voluntario {
  display: flex;
  justify-content: center;
}
.preguntas-frecuentes .contenedor-preguntas ul.voluntario li {
  width: 50rem;
}
.preguntas-frecuentes h4 {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin: 5rem auto;
}

@media (max-device-width: 500px) {
  .resultados-div {
    position: absolute;
    left: -4rem;
    bottom: 18rem;
  }
  .resultados-div img {
    width: 23rem;
  }
  .resultados-div img:hover {
    width: 23rem;
  }
  img.movil {
    display: block;
    width: 100%;
    height: auto;
  }
  .prev .cohete {
    display: none;
  }
  .presentacion .iframe-animacion {
    display: none;
  }
  .prev .contenedor img {
    width: 80%;
    height: auto;
  }
  .presentacion, .antecedentes, .modalidades, .ubica, .boletas, .recursos, .mundo-divertido, .preguntas-frecuentes {
    width: 100%;
    height: auto;
    min-height: 90rem;
    position: relative;
    /*
    img {
        display: none;
    }*/
  }
  .presentacion h2, .antecedentes h2, .modalidades h2, .ubica h2, .boletas h2, .recursos h2, .mundo-divertido h2, .preguntas-frecuentes h2 {
    font-size: 4rem;
    position: relative;
    top: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 3rem;
  }
  .back1, .back2, .back3 {
    display: none;
  }
  .mundo-div {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .mundo-div img {
    display: block;
    width: 18rem;
  }
  .mundo-div img:hover {
    width: 18rem;
  }
  .antecedentes {
    margin-bottom: 30rem;
  }
  .antecedentes .back1 {
    display: block;
    position: absolute;
    left: -5rem;
    bottom: -4rem;
    width: 25rem;
  }
  .antecedentes #slide1:checked ~ .back1 {
    bottom: -12rem;
  }
  .antecedentes #slide1:checked ~ .preguntas-frecuentes-div {
    bottom: -42rem;
  }
  .preguntas-frecuentes-div {
    position: absolute;
    bottom: -30rem;
  }
  .preguntas-frecuentes-div img {
    display: block;
    width: 25rem;
  }
  .preguntas-frecuentes-div img:hover {
    width: 25rem;
  }
  .modalidades {
    height: auto;
    min-height: 90rem;
    margin-top: 10rem;
  }
  .modalidades .back1 {
    display: block;
    position: absolute;
    left: 0;
    bottom: -8rem;
    width: 25rem;
  }
  .modalidades .contenedor-modalidades {
    display: flex;
    justify-content: center;
  }
  .modalidades .contenedor-modalidades div {
    margin: 1rem;
  }
  .modalidades .contenedor-modalidades div:nth-child(1) {
    width: 100%;
    transform: rotate(0deg);
  }
  .modalidades .contenedor-modalidades div:nth-child(2) {
    width: 100%;
    transform: rotate(0deg);
  }
  .recursos {
    position: relative;
    padding-bottom: 40rem;
  }
  .recursos .contenedor-recursos {
    padding: 0;
  }
  .recursos .contenedor-recursos ul {
    gap: inherit;
  }
  .recursos .contenedor-recursos ul a {
    min-width: inherit;
  }
  .ubica {
    height: auto;
    min-height: auto;
    padding-bottom: 1rem;
  }
  .ubica .ubicacion-modulos {
    width: 90%;
    height: 40rem;
    margin: 0 auto 35rem auto;
  }
  .ubica .back1 {
    display: block;
  }
  .ubica .back2 {
    display: none;
  }
  .ubica .movil {
    display: block;
    width: auto;
    height: 30rem;
  }
  .boletas .back1 {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: auto;
  }
  .boletas .back2 {
    display: block;
    left: 0;
    width: 10rem;
  }
  .boletas .iframe-animacion {
    display: none;
  }
  .boletas .movil {
    display: block;
    width: auto;
    height: 35rem;
    right: 0;
    position: absolute;
  }
  .boletas .contenedor-boletas {
    padding: 0;
  }
  .boletas .contenedor-boletas ul {
    gap: 0;
  }
  .boletas .contenedor-boletas ul li a {
    min-width: inherit;
  }
  .mundo-divertido .back1 {
    position: absolute;
    bottom: 10%;
    left: 5rem;
    margin: auto;
    width: auto;
    height: 25rem;
  }
  .preguntas-frecuentes .back3 {
    display: block;
    position: absolute;
    bottom: -20%;
    left: 0;
    right: 0;
    margin: auto;
    width: 78%;
    height: auto;
  }
  .contenedor-nav {
    background-color: rgba(21, 25, 71, 0.5);
  }
  .contenedor-nav .icon.icon-ieem_logo {
    margin-right: 0;
  }
  .contenedor-nav nav {
    display: none;
  }
  .contenedor-nav.fixed {
    margin: 0 auto;
  }
  .preguntas-frecuentes .contenedor-preguntas {
    display: block;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 3rem;
  }
  .preguntas-frecuentes .contenedor-preguntas ul {
    gap: 0;
  }
  .preguntas-frecuentes .contenedor-preguntas ul li {
    margin: 0;
    margin-bottom: 1rem;
    padding: 1rem 1rem 1rem 9rem;
  }
  .preguntas-frecuentes .contenedor-preguntas ul li span {
    left: -2rem;
  }
}
.popup-close {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 25px;
  box-sizing: border-box;
  background: #9d9d9d;
  color: #FFF;
  text-decoration: none;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: 0.5s ease-in-out;
  z-index: 100;
}

.popup-close:before, .popup-close_2:before {
  content: "";
  display: block;
  height: 18px;
  width: 5px;
  background: #FFF;
  position: absolute;
  left: 11.5px;
  top: 5px;
  color: #FFF;
  transform: rotate(45deg);
}

.popup-close:after, .popup-close_2:after {
  content: "";
  display: block;
  height: 18px;
  width: 5px;
  background: #FFF;
  position: absolute;
  left: 11.5px;
  top: 5px;
  color: #FFF;
  transform: rotate(-45deg);
}/*# sourceMappingURL=layout.css.map */