@charset "UTF-8";
* {
  font-weight: 400;
  font-style: normal;
  font-family: "Fredoka", sans-serif;
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2 {
  font-family: "hobo-std", sans-serif;
}

.hero-gachas article.garantizado .overlay-descripcion {
  transition: all 0.6s ease; /* animación suave */
  z-index: 1000; /* encima del resto */
}
.hero-gachas article.garantizado .descripcion-hidden {
  overflow: hidden;
  max-width: 0;
  transition: max-width 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  background-color: #fff;
}
.hero-gachas article.garantizado .descripcion-hidden.open {
  max-width: 100%;
  opacity: 1;
  background-color: #fff;
}
.hero-gachas article.garantizado .imagenes {
  height: 90vh; /* 90% de la altura de la pantalla */
  /* Estilos base */
}
.hero-gachas article.garantizado .imagenes img {
  position: absolute;
  max-width: 60%; /* o % si quieres responsive */
  height: auto;
}
.hero-gachas article.garantizado .imagenes img.key {
  left: 10%;
  transform: translateY(70%);
  max-width: 60%;
  position: absolute;
}
.hero-gachas article.garantizado .imagenes img.figure-1 {
  left: 40%;
  transform: translateX(-40%);
  max-width: 60%;
  position: absolute;
}
.hero-gachas article.garantizado .imagenes img.figure-2 {
  right: -5% !important;
  transform: translateY(30%) !important;
  max-width: 60%;
  position: absolute;
}
@media (min-width: 992px) {
  .hero-gachas article.garantizado .imagenes img.key {
    left: 10%;
    transform: translateY(60%);
    max-width: 60%;
  }
  .hero-gachas article.garantizado .imagenes img.figure-1 {
    left: 40%;
    transform: translateX(-40%);
    max-width: 60%;
  }
  .hero-gachas article.garantizado .imagenes img.figure-2 {
    right: 5%;
    transform: translateY(40%);
    max-width: 60%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-gachas article.garantizado .imagenes img.key {
    left: 20% !important;
    transform: translateY(30%);
    max-width: 55%;
  }
  .hero-gachas article.garantizado .imagenes img.figure-1 {
    top: 5% !important;
    transform: translateX(-80%) !important;
    max-width: 55%;
  }
  .hero-gachas article.garantizado .imagenes img.figure-2 {
    right: -5% !important;
    transform: translateY(20%);
    max-width: 60%;
  }
}
@media (max-width: 575.98px) {
  .hero-gachas article.garantizado .imagenes img.key {
    left: 10% !important;
    transform: translateY(80%) !important;
    max-width: 70%;
  }
  .hero-gachas article.garantizado .imagenes img.figure-1 {
    top: 5% !important;
    left: 30% !important;
    max-width: 65%;
  }
  .hero-gachas article.garantizado .imagenes img.figure-2 {
    right: 5% !important;
    transform: translateY(40%) !important;
    max-width: 50%;
  }
}
.hero-gachas article.garantizado .imagenes a {
  color: #fff;
  font-weight: bold;
  background-color: #D9042B;
  bottom: 3%;
  left: 15%;
}
.hero-gachas article.azar .imagen {
  height: 90vh; /* 90% de la altura de la pantalla */
}
.hero-gachas article.azar .imagen img {
  left: 0%;
}
.hero-gachas article.azar .imagen a {
  bottom: 3%;
  left: 30%;
  color: #fff;
  font-weight: bold;
  background-color: #D9042B;
}
@media (min-width: 992px) {
  .hero-gachas article.azar .imagen img.key {
    left: 10%;
    transform: translateY(50%);
    max-width: 60%;
  }
  .hero-gachas article.azar .imagen img.figure-1 {
    left: 40%;
    transform: translateX(-40%);
    max-width: 60%;
  }
  .hero-gachas article.azar .imagen img.figure-2 {
    right: 5%;
    transform: translateY(40%);
    max-width: 60%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-gachas article.azar .imagen img {
    left: 0 !important;
  }
}
@media (max-width: 575.98px) {
  .hero-gachas article.azar .imagen img {
    left: 0% !important;
    transform: translateY(20%);
  }
}

section.que-es-gacha img {
  max-width: 30%;
  border-radius: 300px;
}
section.que-es-gacha .texto-que {
  max-width: 80%;
  font-size: 1.2rem;
}

section.populares a .card {
  border: none;
}

.descripcion-hidden {
  position: absolute;
  top: 0;
  right: 0; /* se ancla al borde derecho */
  width: 50%; /* ancho final del div */
  height: 100%;
  overflow: hidden;
  z-index: 1000;
  background-color: #fff;
  transform: scaleX(0); /* inicia cerrado */
  transform-origin: left;
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.descripcion-hidden.open {
  transform: scaleX(1); /* se abre */
  opacity: 1;
}

.descripcion-hidden-azar {
  position: absolute;
  top: 0;
  left: 0; /* anclado al borde izquierdo */
  width: 50%; /* ancho final */
  height: 100%;
  overflow: hidden;
  z-index: 1000;
  background-color: #fff;
  transform: scaleX(0); /* inicia cerrado */
  transform-origin: right; /* abre desde la derecha hacia el centro */
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.descripcion-hidden-azar.open {
  transform: scaleX(1);
  opacity: 1;
}

.que-es-gacha a {
  color: #fff;
  font-weight: bold;
  background-color: #D9042B;
}

/* Footer */
.custom-footer {
  background: white;
  padding: 40px 0 0 0;
}

.footer-bottom {
  background-color: #D9042B;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

.footer-logo img {
  max-width: 100px;
}

.footer-section h5 {
  font-weight: bold;
  margin-bottom: 15px;
}

.footer-section a {
  display: block;
  text-decoration: none;
  color: #000;
  margin-bottom: 8px;
  font-size: 14px;
}

.footer-section a:hover {
  text-decoration: underline;
}

.footer-box {
  background: rgba(247, 247, 247, 0.5568627451);
  border-radius: 15px;
}

@media (max-width: 575.98px) {
  .descripcion-hidden {
    width: 100%;
    height: 40%;
  }
  .descripcion-hidden-azar {
    width: 100%;
    height: 40%;
    top: 50% !important;
  }
  .azar a {
    left: 10% !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  a {
    bottom: 20% !important;
  }
}
@media (min-width: 992px) {
  .gacha-imagen {
    left: 15% !important;
  }
}/*# sourceMappingURL=style.css.map */