html{ background:#fff; }
*{box-sizing:border-box}
html{
  height: 100%;
  margin: 0;
  background: #fff;
}

body{
  height: 100%;
  margin: 0;
  background: #fff;
  overflow: hidden;      /* NO scroll manual */
  overscroll-behavior: none;
}
body{ touch-action: none; }

#hero{
  position:fixed;
  inset:0;
  width:100vw;
  height:100svh;   /* iOS estable */
  height: 100dvh;   /* navegadores modernos */
  display:block;
  background:#fff;
  z-index: 1;
  pointer-events: none;
}
::-webkit-scrollbar { width: 0; height: 0; }
#spacer{
  height:1600vh;
  pointer-events: none;
}

#hero.pressed{
  animation: press 180ms ease-out;
}
@keyframes press{
  0%{transform:scale(1);}
  40%{transform:scale(.985);}
  100%{transform:scale(1);}
}

/* Modal */
.modal{position:fixed;inset:0;z-index:100}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal__panel{
  position:relative;
  width:min(520px, calc(100vw - 32px));
  margin:2vh auto 0;
  background:#fff;
  border-radius:18px;
  padding:18px 18px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal__close{
  position:absolute;top:10px;right:10px;border:0;background:transparent;
  font-size:18px;cursor:pointer;
}
.modal__desc strong{
    font-weight: 700;
    font-size: 0.8em;
  }
.modal__list{margin:10px 0 0;padding-left:18px}
.modal__list a{color:#111; text-decoration: underline; text-underline-offset: 1px;}
.modal__small{margin-top:12px;font-size:12px;color:#666}
.modal__formLink{
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  color: #7b2cff;
  text-decoration: none;
}
/* Botón elegante para el formulario */
.modal__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 1px;
  border-radius: 12px; /*texto más fino*/
  border: 1px solid rgba(123,44,255,.35);
  background: rgba(123,44,255,.10);
  color: #4a18b6; 
  font-weight: 600; /*texto menos pesado*/
  font-size: 12px; /*tamaño texto*/
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.modal__button:hover{
  background: rgba(123,44,255,.14);
}

.modal__button:active{
  transform: translateY(1px) scale(.99);
}

/* === PASO 2: columnas perfectas + botón elegante === */
.modal__columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start; /* ✅ alinea arriba perfecto */
  margin-top: 8px;
}

.modal__col{
  min-width: 0; /* evita overflow raro */
}

/* En móvil: apilar */
@media (max-width: 768px){
  .modal__columns{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.modal__formLink:hover{
  text-decoration: underline;
}
/* Texto clicable "PURPLE ROOM" (solo aparece en el último frame) */
#prLink{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;

  background: transparent;
  border: 0;
  padding: 12px 18px;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 600;
  /* font-size: 18px; Tamaño Purple room */
  line-height: 1;
  letter-spacing: 0.14em;
  white-space: nowrap;
  
  color: #111;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /*touch-action: manipulation;*/

  user-select: none;
  pointer-events: auto;
}

#prLink[hidden]{
  pointer-events: none;
}

@media (hover:hover) and (pointer:fine){
  #prLink:hover{
    color:#7b2cff !important;
    text-shadow: 0 10px 26px rgba(123,44,255,.35);
  }

  #prLink:active{
    transform: translate(-50%, -50%) scale(.985);
      }
  }
/* Ajuste SOLO para móvil */
@media (max-width: 768px){
  /* #prLink{
    font-size: clamp(13px,3vw, 20px);
    letter-spacing: 0.12em;
  }*/
    /* Estado final: animación terminada (solo móvil) */
  #prLink.is-ready{
    color: #111 !important; /*Texto Negro*/
    text-shadow: 0 10px 26px rgba(123,44,255,.55), 0 0  2px rgba(123,44,255,.65);
  }
}

#prLink.is-ready{
  /*font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;*/
  transform: translate(-50%, -50%);
  
}

#legalBlock{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 40;
  pointer-events: none; /* no molesta al click */
}

.legalLine{
  height: 2px;
  width: 100%;
  background: #111;
  margin-bottom: 18px;
}

.legalText{
  margin: 0;
  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: clamp(9px, 2vw, 6px); /*Tamaño texto*/
  line-height: 1.35;
  color: #111;
  padding: 0 18px;
}
@keyframes purplePulse {
  0%{
    color:#111;
    text-shadow:
      0 0 0 rgba(123,44,255,0);
  }

  50%{
    color:#7b2cff;
    text-shadow:
      0 10px 26px rgba(123,44,255,.6),
      0 0 6px rgba(123,44,255,.8);
  }

  100%{
    color:#111;
    text-shadow:
      0 0 0 rgba(123,44,255,0);
  }
}
#prLink.is-ready{
  animation: purplePulse 1.6s ease-in-out infinite;
}