/* ==========================================================================
   TEMA: PISO 18 · FIESTA EN LA AZOTEA — dirección de arte "NEÓN MOJADO"
   Creada el 7 de octubre de 2026 con fotos de Blender. Abdiel: "algo neón,
   brilloso, ciudad oscura, que se note el Blender".

   LA IDEA: el piso del elevador es la edad. Se llama al elevador (el indicador
   sube PB → 9 → 18), se abren las puertas y uno entra a la azotea. Las puertas
   son dos fotos sueltas que se recorren con CSS; el número del indicador es
   HTML. La portada es la azotea de noche, que se funde con el fondo oscuro de
   la página; el nombre va en neón. Las tarjetas son de vidrio oscuro con su
   filo de luz; el programa, una columna de luz con focos.

   TEORÍA DEL COLOR: noche azul casi negra de base (60), morado profundo en los
   bloques (30), rosa de neón solo en lo que se toca (10); el cian acompaña como
   segunda luz, igual que en la foto. Rosa y cian son casi complementarios: por
   eso vibran juntos sin ensuciarse.
   Colores medidos en la foto: cielo #080C1C · piso #0F0F1B.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre noche #080C1C  → claro #F4F1FF 17.3 · suave #B9B4D6 9.4 · rosa #FF4FB0 6.7 · cian #48E5FF 12.6
     sobre morado #150D33 → claro 16.4 · suave 8.9 · rosa 6.3 · cian 11.9
     noche sobre el botón rosa #FF4FB0 → 6.7
   ========================================================================== */
:root{
  --noche:#080C1C; --morado:#150D33; --vidrio:#1B1440; --rosa:#FF4FB0; --cian:#48E5FF; --ambar:#FFD36B;
  --papel:#080C1C;  --papel-hondo:#150D33;
  --tinta:#F4F1FF;  --tinta-suave:#B9B4D6;
  --marca:#F4F1FF;  --marca-claro:#48E5FF;
  --acento:#FF4FB0; --acento-hondo:#C7308A;
  --f-display:"Unbounded", "Arial Black", sans-serif;
  --f-neon:"Neonderthaw", "Segoe Script", cursive;
  --f-texto:"Sora", system-ui, sans-serif;
  --radio:18px;
  --sombra:0 10px 30px rgba(0,0,0,.5);
  --sombra-alta:0 20px 46px rgba(0,0,0,.65);
  --luz-rosa:0 0 6px #fff, 0 0 14px #FF4FB0, 0 0 34px rgba(255,79,176,.75);
  --luz-cian:0 0 5px #fff, 0 0 12px #48E5FF, 0 0 30px rgba(72,229,255,.7);
  font-synthesis:none;
}
body{ background:var(--noche); color:var(--tinta); }

.etiqueta{ font-family:var(--f-texto); font-weight:700; font-size:.7rem; letter-spacing:.3em; color:var(--cian); }
.titulo{ font-family:var(--f-display); font-weight:700; line-height:1.15; font-size:clamp(1.55rem,6.8vw,2.1rem); margin:.6rem 0 1.5rem; color:var(--tinta); }
.titulo::after{ content:""; display:block; width:72px; height:3px; margin:.8rem auto 0; border-radius:3px; background:var(--rosa); box-shadow:0 0 10px var(--rosa), 0 0 24px rgba(255,79,176,.7); }
.parrafo b{ color:var(--rosa); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el elevador. Primer toque: sube. Segundo: se abren las puertas.
   (El motor quita la entrada 1.6 s después del último toque.)
   Las medidas en % salen de la cámara de Blender: el hueco va del 27.6 % al
   72.4 % de ancho y del 32.4 % al 91.4 % de alto; el indicador, 37.4–62.6 %
   y 19.1–26.9 %; el botón, en 86 % y 58.5 %.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:radial-gradient(ellipse 120% 70% at 50% 60%, #1A1238 0%, #0C0A1E 60%, #05060F 100%); transition:opacity .45s ease .45s, visibility 0s linear .9s; }
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ font-family:var(--f-texto); font-weight:700; letter-spacing:.32em; font-size:.68rem; color:var(--cian); }
.entrada__nombre{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.25rem,5.8vw,1.7rem); line-height:1.2; margin:.2rem 0 .1rem; color:#FFFFFF; text-shadow:var(--luz-rosa); }
.gancho.elevador{ position:relative; width:100vw; max-width:440px; aspect-ratio:720/960; margin:-1.6rem -1.5rem -2.2rem; }
.gancho.elevador.golpe, .gancho.elevador.abre{ animation:none; }
.elev{ position:absolute; inset:0; display:block; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.elev > img{ position:absolute; inset:0; width:100%; height:100%; }
.elev__vista{ position:absolute; left:27.6%; top:32.4%; width:44.8%; height:59%; background:url(portada.webp) 50% 38% / 150% auto no-repeat, #080C1C; }
.elev__puerta{ z-index:1; transition:transform .75s cubic-bezier(.6,0,.2,1); }
.elev__marco{ z-index:2; }
.elev__piso{ position:absolute; z-index:3; left:37.4%; top:19.1%; width:25.2%; height:7.8%; display:grid; place-items:center; }
.elev__piso b{ grid-area:1 / 1; font-family:var(--f-display); font-weight:700; font-size:clamp(.95rem,4.6vw,1.25rem); line-height:1; color:#FFFFFF; text-shadow:var(--luz-rosa); opacity:0; }
.elev__piso b:nth-child(1){ opacity:1; animation:piso-espera 1.6s ease-in-out infinite; }
@keyframes piso-espera{ 50%{ opacity:.45; } }
.elev__boton{ position:absolute; z-index:3; left:86%; top:58.5%; width:5%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; box-shadow:0 0 0 2px rgba(72,229,255,.5); animation:boton-llama 1.4s ease-in-out infinite; }
@keyframes boton-llama{ 50%{ box-shadow:0 0 0 2px var(--cian), 0 0 14px 4px rgba(72,229,255,.85); } }
/* primer toque: el indicador sube */
.gancho.elevador.golpe .elev__boton, .gancho.elevador.abre .elev__boton{ animation:none; background:var(--cian); box-shadow:0 0 12px 4px rgba(72,229,255,.9); }
.gancho.elevador.golpe .elev__piso b:nth-child(1){ animation:piso-pasa .5s ease forwards; }
.gancho.elevador.golpe .elev__piso b:nth-child(2){ animation:piso-pasa .5s ease .45s both; }
.gancho.elevador.golpe .elev__piso b:nth-child(3){ animation:piso-llega .4s ease .95s both; }
@keyframes piso-pasa{ 0%{ opacity:1; transform:translateY(0); } 100%{ opacity:0; transform:translateY(-70%); } }
@keyframes piso-llega{ 0%{ opacity:0; transform:translateY(70%); } 100%{ opacity:1; transform:translateY(0); } }
.gancho.elevador.golpe .elev{ animation:elev-tiembla .9s ease .15s; }
@keyframes elev-tiembla{ 0%,100%{ transform:translateY(0); } 20%{ transform:translateY(-3px); } 40%{ transform:translateY(2px); } 60%{ transform:translateY(-2px); } 80%{ transform:translateY(1px); } }
/* segundo: puertas abiertas y uno entra */
.gancho.elevador.abre .elev__piso b{ animation:none; opacity:0; }
.gancho.elevador.abre .elev__piso b:nth-child(3){ opacity:1; }
.gancho.elevador.abre .elev__puerta--i{ transform:translateX(-22.6%); }
.gancho.elevador.abre .elev__puerta--d{ transform:translateX(22.6%); }
.gancho.elevador.abre .elev{ transform-origin:50% 62%; animation:elev-entra .8s cubic-bezier(.6,0,.8,.4) .72s forwards; }
@keyframes elev-entra{ to{ transform:scale(3.2); opacity:.2; } }
.entrada__pista{
  margin-top:.4rem; padding:.7rem 1.6rem; border-radius:999px; background:var(--rosa); color:#080C1C; box-shadow:0 0 18px rgba(255,79,176,.75), 0 0 44px rgba(255,79,176,.35);
  font-family:var(--f-display); font-weight:700; font-size:.86rem; letter-spacing:.04em;
  animation:pista-late 1.7s ease-in-out infinite;
}
@keyframes pista-late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.entrada__marcador{ margin-top:.8rem; color:var(--cian); font-weight:700; letter-spacing:.16em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — la azotea arriba; el nombre en neón sobre su reflejo
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; gap:0; justify-content:flex-start; padding:0 1.5rem 3.4rem; background:linear-gradient(180deg, #080C1C 0%, #0B0C1C 60%, #080C1C 100%); }
.azotea{ position:relative; flex:none; width:100vw; max-width:560px; aspect-ratio:1080/1350; margin:0 -1.5rem -34%; background:url(portada.webp) center / cover no-repeat; -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent 96%); mask-image:linear-gradient(180deg, #000 58%, transparent 96%); }
.portada > :not(.azotea){ position:relative; z-index:2; }
.portada__arriba{ font-family:var(--f-texto); font-weight:700; font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--cian); text-shadow:0 0 12px rgba(72,229,255,.7); }
.portada__nombre{ font-family:var(--f-neon); font-weight:400; line-height:.95; font-size:clamp(5.6rem,30vw,8.4rem); margin:.1rem 0 1rem; color:#FFFFFF; text-shadow:var(--luz-rosa); }
body.revelado .portada__nombre{ animation:neon-prende 1.5s steps(1) 1.5s backwards; }
@keyframes neon-prende{ 0%{ opacity:.12; text-shadow:none; } 18%{ opacity:1; } 26%{ opacity:.2; text-shadow:none; } 40%{ opacity:1; } 48%{ opacity:.35; } 60%,100%{ opacity:1; } }
.portada__nombre .amp{ display:block; margin-top:.5rem; font-family:var(--f-display); font-weight:700; font-size:.17em; line-height:1.2; letter-spacing:.3em; text-transform:uppercase; color:#FFFFFF; text-shadow:var(--luz-cian); }
.portada__fecha{ background:rgba(27,20,64,.72); border:1px solid var(--cian); border-radius:16px; box-shadow:0 0 16px rgba(72,229,255,.45), inset 0 0 14px rgba(72,229,255,.12); padding:.75rem 1.5rem; gap:1.1rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.portada__fecha .fcol{ color:var(--tinta); font-weight:700; letter-spacing:.16em; font-size:.68rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:700; font-size:2.3rem; color:#FFFFFF; text-shadow:var(--luz-rosa); }
.portada__lugar{ margin-top:1.2rem; color:var(--tinta); font-weight:600; }
.portada__flecha span{ border-color:var(--cian); }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — vidrio oscuro con filo de luz
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.3rem,6vw,1.75rem); line-height:1.2; color:#FFFFFF; text-shadow:var(--luz-cian); }
.saludo__pases{ background:var(--rosa); color:#080C1C; border-radius:999px; font-weight:700; }

.seccion.alterna{ position:relative; background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,79,176,.16), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(72,229,255,.12), transparent 70%), var(--morado); border-top:1px solid rgba(255,79,176,.5); border-bottom:1px solid rgba(72,229,255,.45); }

.momento{ padding-top:1.6rem; padding-bottom:3.2rem; }
.momento__foto{ border:0; border-radius:20px; box-shadow:0 0 0 1px var(--rosa), 0 0 22px rgba(255,79,176,.55), var(--sombra-alta); }
.flotantes{ display:none; }

.cuenta__caja, .tarjeta, .notas__lista li, .formulario, .faq__item, .buscar{ background:var(--vidrio); border:1px solid rgba(72,229,255,.6); border-radius:var(--radio); box-shadow:0 0 14px rgba(72,229,255,.22), var(--sombra); color:var(--tinta); }
.tarjeta:nth-child(even), .cuenta__caja:nth-child(even), .faq__item:nth-child(even){ border-color:rgba(255,79,176,.65); box-shadow:0 0 14px rgba(255,79,176,.25), var(--sombra); }
.cuenta__caja .n{ font-family:var(--f-display); font-weight:700; color:#FFFFFF; text-shadow:var(--luz-rosa); }
.cuenta__caja .l{ color:var(--tinta-suave); font-weight:700; }
.tarjeta__icono{ color:var(--cian); filter:drop-shadow(0 0 6px rgba(72,229,255,.8)); }
.tarjeta b{ font-family:var(--f-display); font-weight:700; font-size:1rem; line-height:1.2; color:#FFFFFF; }
.tarjeta small{ color:var(--tinta-suave); }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:500; font-size:1.18rem; line-height:1.6; color:var(--tinta); }
.dedicatoria__firma{ font-family:var(--f-neon); font-size:3.6rem; line-height:1; color:#FFFFFF; text-shadow:var(--luz-rosa); }

.galeria__grid{ gap:.8rem; }
.foto img{ border:0; border-radius:16px; box-shadow:0 0 0 1px rgba(72,229,255,.6), 0 0 16px rgba(72,229,255,.25); background:#0F0F1B; }
.foto:nth-child(even) img{ box-shadow:0 0 0 1px rgba(255,79,176,.65), 0 0 16px rgba(255,79,176,.28); }
.foto--ancha img{ aspect-ratio:1100/620; }
.foto__hueco{ border:1.5px dashed var(--cian); border-radius:16px; }

/* el programa: una columna de luz con sus focos */
.linea::before{ width:2px; left:5px; background:linear-gradient(180deg, var(--rosa), var(--cian)); box-shadow:0 0 10px rgba(255,79,176,.8); }
.linea__paso::before{ left:-7px; top:1.1rem; width:14px; height:14px; border:0; background:#FFFFFF; box-shadow:0 0 0 2px var(--cian), 0 0 12px 3px rgba(72,229,255,.8); }
.linea__paso.destaca::before{ box-shadow:0 0 0 2px var(--rosa), 0 0 14px 4px rgba(255,79,176,.9); }
.linea__hora{ font-family:var(--f-display); font-weight:700; font-size:.98rem; color:var(--ambar); min-width:3.6rem; }
.linea__que b{ font-family:var(--f-texto); font-weight:700; font-size:1.08rem; color:#FFFFFF; }
.linea__que small{ color:var(--tinta-suave); }

.lugares__hora{ font-weight:700; color:var(--acento); }
.mapa{ border-radius:18px; box-shadow:0 0 0 1px rgba(72,229,255,.6), 0 0 18px rgba(72,229,255,.25); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:1px solid rgba(72,229,255,.6); }
.faq__item summary{ font-family:var(--f-texto); font-weight:700; font-size:1rem; color:#FFFFFF; }
.faq__item p{ color:var(--tinta-suave); }

.boton{
  background:var(--rosa); color:#080C1C; border:0; border-radius:999px; box-shadow:0 0 18px rgba(255,79,176,.7), 0 0 40px rgba(255,79,176,.3);
  font-family:var(--f-display); font-weight:700; font-size:.86rem; letter-spacing:.04em;
}
.boton:active{ transform:scale(.97); }
.boton--linea{ background:transparent; color:#FFFFFF; border:1px solid var(--cian); box-shadow:0 0 14px rgba(72,229,255,.35), inset 0 0 12px rgba(72,229,255,.12); font-size:.8rem; }

.formulario{ padding:1.6rem 1.2rem 1.7rem; }
.campo label, .formulario label, .formulario p, .formulario small{ color:var(--tinta); }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:1px solid rgba(72,229,255,.6); border-radius:12px; background:#0C0A1E; color:#F4F1FF; }
.campo select option{ background:#0C0A1E; color:#F4F1FF; }
.rsvp__intro b{ color:var(--rosa); }

.pie{ background:linear-gradient(180deg, var(--morado), #05060F); border-top:1px solid rgba(255,79,176,.5); color:var(--tinta); }
.pie__nombre{ font-family:var(--f-neon); font-size:4.6rem; line-height:1; color:#FFFFFF; text-shadow:var(--luz-rosa); }

.volver{ background:#150D33; color:var(--tinta); border:1px solid var(--cian); box-shadow:0 0 14px rgba(72,229,255,.4); }
.volver svg{ stroke:var(--tinta); }

@media (prefers-reduced-motion:reduce){
  .elev__piso b:nth-child(1), .elev__boton, .entrada__pista{ animation:none; }
  body.revelado .portada__nombre{ animation:none; }
}