@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*Font Family*/
/* COLACAO COLORS */
/* Opciones($prop): color, background-color,opacity,..., all */
/*PlaceHolder*/
/*font-size: get-vw(30px);*/
/*padding-top:get-vw(50px);*/
body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

@font-face {
  font-family: "Nosy";
  src: url(Nosy.woff2) format("woff2"), url(Nosy.woff) format("woff");
  font-weight: 400;
}
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  overflow: hidden;
  background: #111;
  color: white;
  font-family: sans-serif;
  scroll-margin-left: 0;
  background: linear-gradient(to bottom right, #78c3d6, #0b9b8f);
}

/*
  container emergap
*/
#container {
  position: relative;
  /*border: 1px solid #ff0038;*/
  top: 0px;
  max-width: 910px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  #container {
    max-width: 525px;
  }
}
@supports (height: 100dvh) {
  #container {
    height: 100dvh; /* Mejor en móviles */
  }
}
#container .bgaahh {
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6vh;
  aspect-ratio: 9/16;
  width: 260%;
}
@media (max-height: 670px) {
  #container .bgaahh {
    top: -20vh;
  }
}
#container .bgaahh img {
  width: 100%;
  transform-origin: center;
  animation: spinZoom 35s linear infinite;
  opacity: 1;
}
@keyframes spinZoom {
  0% {
    transform: rotate(0deg) scale(0.95);
  }
  25% {
    transform: rotate(90deg) scale(1.2);
  }
  50% {
    transform: rotate(180deg) scale(0.95);
  }
  75% {
    transform: rotate(270deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(0.95);
  }
}
#container .personaje1 {
  z-index: 2;
  position: absolute;
  bottom: 0;
  margin-bottom: clamp(20px, 32vw, 180px);
  width: 90%;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  opacity: 0;
}
#container .personaje1 img {
  width: 100%;
}
@media (max-height: 738px) {
  #container .personaje1 img {
    transform-origin: center bottom;
    transform: scale(0.85);
  }
}
#container .personaje2 {
  z-index: 5;
  position: absolute;
  bottom: -5px;
  /*@media (max-height: 670px) {
    top: 236px;
    transform-origin: center bottom;
    transform: translateX(-45%) translateY(20px) scale(1.2);
  }*/
  width: 129%;
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(1);
  opacity: 0;
}
@media (max-height: 800px) {
  #container .personaje2 {
    top: 236px;
    transform-origin: center bottom;
    transform: translateX(-45%) translateY(20px) scale(1.2);
  }
}
#container .personaje2 img {
  width: 100%;
}
#container .bgrojo {
  z-index: 4;
  position: absolute;
  bottom: -6vh;
  left: 50%;
  transform: translateX(-50%) translateY(90%);
  width: 110%;
}
@media (max-height: 670px) {
  #container .bgrojo {
    bottom: -8vh;
  }
}
#container .bgrojo img {
  width: 100%;
}
#container .audioControls {
  z-index: 1001;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 10px;
  width: 400px;
  left: 50%;
  transform: translateX(-50%);
}
#container .audioControls #startBtn {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  cursor: pointer;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 10px;
}
#container .audioControls #volumenTexto {
  margin-top: 15px;
  font-size: 1.5rem;
}
#container .audioControls #barraContenedor {
  margin: 1rem auto;
  width: 300px;
  height: 30px;
  background: #333;
  border-radius: 15px;
  overflow: hidden;
}
#container .audioControls #barraVolumen {
  height: 100%;
  width: 0%;
  background: #00ff00;
  transition: width 0.1s;
}

/* P FONT */
.pFfontSize {
  font-size: 0.8854166667vw;
}
@media only screen and (max-width: 1720px) {
  .pFfontSize {
    font-size: 0.9375vw;
  }
}
@media only screen and (max-width: 1550px) {
  .pFfontSize {
    font-size: 1.0416666667vw;
  }
}
@media only screen and (max-width: 1448px) {
  .pFfontSize {
    font-size: 1.1458333333vw;
  }
}
@media only screen and (max-width: 1248px) {
  .pFfontSize {
    font-size: 1.25vw;
  }
}
@media only screen and (max-width: 1024px) {
  .pFfontSize {
    font-size: 1.3541666667vw;
  }
}
@media only screen and (max-width: 900px) {
  .pFfontSize {
    font-size: 1.4583333333vw;
  }
}
@media only screen and (max-width : 768px) {
  .pFfontSize {
    font-size: 2.9947916667vw;
  }
}
@media only screen and (max-width : 640px) {
  .pFfontSize {
    font-size: 3.2552083333vw;
  }
}
@media only screen and (max-width : 525px) {
  .pFfontSize {
    font-size: 3.90625vw;
  }
}

.pFfontSizeMid {
  font-size: 1.6666666667vw;
}
@media only screen and (max-width: 1720px) {
  .pFfontSizeMid {
    font-size: 1.71875vw;
  }
}
@media only screen and (max-width: 1550px) {
  .pFfontSizeMid {
    font-size: 1.7708333333vw;
  }
}
@media only screen and (max-width: 1448px) {
  .pFfontSizeMid {
    font-size: 1.8229166667vw;
  }
}
@media only screen and (max-width: 1248px) {
  .pFfontSizeMid {
    font-size: 1.875vw;
  }
}
@media only screen and (max-width: 1024px) {
  .pFfontSizeMid {
    font-size: 1.9270833333vw;
  }
}
@media only screen and (max-width: 900px) {
  .pFfontSizeMid {
    font-size: 1.9791666667vw;
  }
}
@media only screen and (max-width : 768px) {
  .pFfontSizeMid {
    font-size: 5.078125vw;
  }
}
@media only screen and (max-width : 640px) {
  .pFfontSizeMid {
    font-size: 5.3385416667vw;
  }
}
@media only screen and (max-width : 525px) {
  .pFfontSizeMid {
    font-size: 5.5989583333vw;
  }
}

.pFfontSizeBig {
  font-size: 2.4479166667vw;
}
@media only screen and (max-width: 1720px) {
  .pFfontSizeBig {
    font-size: 2.4479166667vw;
  }
}
@media only screen and (max-width: 1550px) {
  .pFfontSizeBig {
    font-size: 2.65625vw;
  }
}
@media only screen and (max-width: 1448px) {
  .pFfontSizeBig {
    font-size: 2.8125vw;
  }
}
@media only screen and (max-width: 1248px) {
  .pFfontSizeBig {
    font-size: 3.0208333333vw;
  }
}
@media only screen and (max-width: 1024px) {
  .pFfontSizeBig {
    font-size: 3.2291666667vw;
  }
}
@media only screen and (max-width: 900px) {
  .pFfontSizeBig {
    font-size: 3.4375vw;
  }
}
@media only screen and (max-width : 768px) {
  .pFfontSizeBig {
    font-size: 5.46875vw;
  }
}
@media only screen and (max-width : 640px) {
  .pFfontSizeBig {
    font-size: 5.9895833333vw;
  }
}
@media only screen and (max-width : 525px) {
  .pFfontSizeBig {
    font-size: 6.25vw;
  }
}

#modal-error {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 1002;
}

#modal-error.show {
  display: block;
}

#modal-error .modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border: 3px solid #2C2C79;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
}

#modal-error .modal-content .modal-title {
  font-size: 20px;
  color: #2C2C79;
  font-family: Nosy;
  text-align: center;
  margin-bottom: 24px;
}

#modal-error .modal-content .modal-text {
  font-size: 17px;
  color: #2C2C79;
}

#modal-error .modal-content .modal-text p {
  margin-bottom: 10px;
}

.intro {
  z-index: 10;
  display: none;
  position: relative;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  /*--parentHeight: 100vh;
  height: var(--parentHeight);*/
  height: 100%;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
}
.intro .titularOasis {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  opacity: 0;
  top: 7.5%;
  width: 77%;
  max-width: 320px;
}
.intro .titularOasis img {
  width: 100%;
}
.intro .botellas {
  width: 72%;
  margin-bottom: clamp(19px, 4.5vw, 20px);
  transform: translateY(40px);
  opacity: 0;
}
.intro .botellas img {
  width: 100%;
}
@media (max-height: 738px) {
  .intro .botellas {
    transform-origin: center bottom;
    transform: scale(0.85);
  }
}
.intro .startScreming {
  width: 75%; /* o el % que necesites según el contenedor */
  aspect-ratio: 33.9/5.8;
  background-image: url(primary_button.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  text-align: center;
  margin: 0 auto; /* opcional: centrar horizontalmente */
  margin-bottom: clamp(18px, 5vw, 20px);
  transform: translateY(20px);
  opacity: 0;
}
.intro .startScreming .txt {
  font-size: 18px;
  color: #2C2C79;
  font-family: Nosy;
  white-space: nowrap;
  margin-bottom: -3px;
}
.intro .legal {
  width: fit-content;
  text-align: center;
  margin-bottom: clamp(20px, 6vw, 40px);
  transform: translateY(40px);
  opacity: 0;
}
.intro .legal a{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  text-decoration: none;
}

.starter {
  z-index: 11;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  height: 100%;
}
.starter .titular {
  position: relative;
  margin-top: 15%;
  width: 77%;
  max-width: 320px;
  margin-bottom: clamp(15px, 8vw, 35px);
  transform: translateY(-20px);
  opacity: 0;
}
.starter .titular img {
  width: 100%;
}
.starter .descripcion {
  position: relative;
  width: 80%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  width: 81%;
  text-align: center;
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: clamp(15px, 8vw, 35px);
  transform: translateY(-20px);
  opacity: 0;
}
.starter .startBoton {
  width: 75%; /* o el % que necesites según el contenedor */
  aspect-ratio: 33.9/5.8;
  background-image: url(primary_button.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  text-align: center;
  margin: 0 auto; /* opcional: centrar horizontalmente */
  margin-bottom: clamp(15px, 8vw, 35px);
  transform: translateY(-20px);
  opacity: 0;
}
.starter .startBoton .txt {
  font-size: 20px;
  color: #2C2C79;
  font-family: Nosy;
  white-space: nowrap;
  margin-bottom: -3px;
}

.espiral {
  z-index: 12;
  display: none;
  opacity: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  /*--parentHeight: 100vh;
   height: var(--parentHeight);*/
  height: 100%;
}
.espiral .camera {
  position: relative;
  margin: auto;
  width: 90%;
  height: 77%;
  max-width: 600px;
  top: 30px;
  opacity: 0;
  overflow: hidden;
  border-radius: 55px;
}
.espiral .camera .picture {
  z-index: 10;
  position: absolute;
  width: 100%;
  aspect-ratio: 9/18;
  overflow: hidden;
}
.espiral .camera .picture canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.espiral .camera .countdown {
  z-index: 101;
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.espiral .camera .countdown .tres {
  /*display: flex;*/
  display: none;
  opacity: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  transform: translateY(20px);
}
.espiral .camera .countdown .dos {
  display: none;
  opacity: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  transform: translateY(20px);
}
.espiral .camera .countdown .uno {
  display: none;
  opacity: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  transform: translateY(0px);
}
.espiral .camera .countdown .up {
  margin-top: 10px;
}
.espiral .camera .countdown .down {
  margin-bottom: 10px;
  width: 80%;
  align-items: center;
  align-content: center;
}
.espiral .camera .countdown .down img {
  width: 100%;
}
.espiral .premio {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 25, 112, 0.75);
  display: none;
  opacity: 0;
  justify-items: center;
  align-content: center;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.espiral .premio img {
  width: 75%;
}
.espiral .reloj {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  top: 10%;
  font-size: 24px;
  opacity: 0;
  font-family: Nosy;
}
.espiral .sprites {
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.8);
  position: absolute;
  width: 391px;
  height: 853px;
}
.espiral .sprites .sprite {
  width: 391px; /* ancho de un frame */
  height: 853px; /* alto del frame */
  background-image: url(dont.png);
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0;
}
.espiral .letterContainer {
  z-index: 999;
  width: 90%;
  height: 100%;
  position: absolute;
  opacity: 1;
  left: 50%;
  transform-origin: center;
  transform: translateX(-50%) scale(1.7);
}
.espiral .letter {
  position: absolute;
  font-size: 10px;
  color: white;
  font-family: Nosy;
  pointer-events: none;
}

.ended {
  z-index: 13;
  display: none;
  position: relative;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.ended .bloque-superior {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
}
.ended .bloque-botones {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 4vw;
}
.ended .preview {
  margin: 20px 0 10px; /* espacio opcional */
}
.ended .titular {
  margin-top: 10%;
  width: 65%;
  opacity: 0;
  transform: translateY(-20px);
}
.ended .titular img {
  width: 100%;
}
.ended .premio {
  font-size: 20px;
  font-family: Nosy;
  width: 70%;
  text-align: center;
  opacity: 0;
  transform: translateY(-20px);
}
.ended .premio img {
  max-width: 19px;
}
.ended .premio .won {
  color: white;
}
.ended .premio .gem {
  color: #2C2C79;
}
.ended .descripcion {
  width: 90%;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  margin-bottom: clamp(10px, 2vw, 30px);
  opacity: 0;
  transform: translateY(-20px);
}
.ended .preview {
  position: relative;
  width: 78.5%;
  height: 59%;
  max-width: 600px;
  opacity: 0;
}
@media (max-height: 670px) {
  .ended .preview {
    width: 69%;
    height: 51%;
  }
}
.ended .preview .shareEsquina {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 59%;
  max-width: 270px;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
}
.ended .preview .shareEsquina img {
  width: 100%;
}
.ended .preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px);
  opacity: 0;
  transform: scale(1.05);
  transition: filter 1s ease, opacity 1s ease, transform 1s ease;
}
.ended .preview.show img {
  filter: blur(0px);
  opacity: 1;
  transform: scale(1);
}
.ended .checkgemsBoton {
  width: 80%;
  aspect-ratio: 33.9/5.8;
  background-image: url(primary_button.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  text-align: center;
  /* margin: 0 auto; */
  opacity: 0;
}
.ended .checkgemsBoton .txt {
  font-size: 20px;
  color: #2C2C79;
  font-family: Nosy;
  white-space: nowrap;
  margin-bottom: -3px;
}
.ended .againBoton {
  width: 20%;
  max-width: 47px;
  cursor: pointer;
  position: relative;
  opacity: 0;
}
.ended .againBoton img {
  width: 100%;
  margin-top: 3px;
}

/*

gota

<div class="drop-container">
  <img src="img/gota.png" alt="Gota" class="gota" />
</div>

<style>
.drop-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: visible;
}

.gota {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  transform-origin: bottom right;
  opacity: 0;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  gsap.fromTo(".gota",
    {
      scale: 0,
      opacity: 0,
      x: 30,
      y: 30,
      rotate: 15,
    },
    {
      scale: 1,
      opacity: 1,
      x: 0,
      y: 0,
      rotate: 0,
      ease: "back.out(1.7)",
      duration: 1,
      delay: 0.2
    }
  );
</script>

*/