/* ==========================================================================
   TEMA: GRADUACIÓN · NEÓN  —  dirección de arte "PRÉNDELE"
   Creada el 3 de octubre de 2026. Idea propia (Abdiel pidió: "sorpréndeme").

   LA IDEA: un letrero de neón en una pared de noche. La entrada es el letrero
   APAGADO (un birrete hecho de tubos): se toca, parpadea como neón de verdad
   y se enciende. Adentro todo es luz: su nombre es un letrero, las cajas son
   tubos de colores y los botones se prenden. Los colores cambian tantito al
   mover el celular (usa --luz, de nucleo/detalles.js).
   Es el estilo de las fiestas de jóvenes: la foto en el letrero de neón.

   TEORÍA DEL COLOR: fondo casi negro morado (60), paneles morado oscuro (30)
   y tres luces de neón que casi forman una triada: magenta, cian y amarillo
   (10). Sobre negro cualquier luz resalta: el magenta se guarda para lo que
   se toca.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre fondo #0E0B1A → texto 17.3 · suave 9.6 · cian 12.3 · magenta 6.8 · amarillo 14.9
     sobre panel #17122B → texto 16.2 · suave 9.0
     fondo sobre el botón magenta #FF4FD8 → 6.8
   ========================================================================== */
:root{
  --papel:#0E0B1A;  --papel-hondo:#17122B;
  --tinta:#F3F0FF;  --tinta-suave:#B9B2D6;
  --marca:#36E2F2;  --marca-claro:#7C6BD6;
  --acento:#FF4FD8; --acento-hondo:#B81E96;
  --cian:#36E2F2; --magenta:#FF4FD8; --amarillo:#FFE14D;
  --f-display:"Tilt Neon", system-ui, sans-serif;
  --f-texto:"Outfit", system-ui, sans-serif;
  --radio:18px;
  --sombra:0 0 0 1px rgba(124,107,214,.5), 0 18px 34px -20px #000;
  --sombra-alta:0 30px 60px -28px #000;
  /* la luz de cada tubo: un halo cerca y otro lejos */
  --luz-cian:0 0 6px #fff, 0 0 14px var(--cian), 0 0 34px rgba(54,226,242,.75);
  --luz-magenta:0 0 6px #fff, 0 0 14px var(--magenta), 0 0 36px rgba(255,79,216,.8);
  --luz-amarillo:0 0 5px #fff, 0 0 12px var(--amarillo), 0 0 30px rgba(255,225,77,.7);
  /* la pared: ladrillo oscuro apenas dibujado */
  --pared:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255,255,255,.035) 26px 28px),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.03) 58px 60px);
  --tinte:calc(var(--luz, 0) * 22deg);            /* los colores giran tantito al mover el celular */
}
body{ background:var(--pared), radial-gradient(120% 60% at 50% 0%, #1D1638 0%, var(--papel) 60%), var(--papel); }

.etiqueta{ font-family:var(--f-texto); font-weight:600; letter-spacing:.34em; color:var(--cian); font-size:.7rem; }
.titulo{
  font-family:var(--f-display); font-weight:400; font-size:clamp(2rem,9vw,2.8rem); line-height:1.1;
  color:#fff; text-shadow:var(--luz-cian); filter:hue-rotate(var(--tinte));
  margin:.4rem 0 1.5rem;
}


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el letrero apagado. Se toca y se prende.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:var(--pared), radial-gradient(80% 50% at 50% 46%, #1B1533 0%, #0B0915 70%); transition:background-color .5s ease, opacity .7s ease .5s, visibility 0s linear 1.2s; }
.entrada__para{ font-family:var(--f-texto); font-weight:600; letter-spacing:.4em; color:var(--tinta-suave); }
.entrada__nombre{ font-family:var(--f-display); font-weight:400; color:var(--tinta); font-size:clamp(1.5rem,6.8vw,2rem); margin-bottom:1.4rem; }
.gancho.letrero{ width:min(62vw,250px); }
/* los tubos: apagados son vidrio gris; uno parpadea de vez en cuando, como con falso contacto */
.gancho.letrero .tubo{ stroke:#4A4466; transition:stroke .1s linear, filter .1s linear; }
.gancho.letrero .tubo--b{ animation:falso-contacto 4.6s linear infinite; }
@keyframes falso-contacto{
  0%,88%,92%,96%,100%{ stroke:#4A4466; filter:none; }
  90%,94%{ stroke:var(--cian); filter:drop-shadow(0 0 6px var(--cian)); }
}
.gancho.letrero.abre{ animation:none; }
.gancho.letrero.abre .tubo--a{ animation:prender-a 1.05s linear forwards; }
.gancho.letrero.abre .tubo--b{ animation:prender-b 1.05s linear forwards; }
.gancho.letrero.abre .tubo--c{ animation:prender-c 1.05s linear forwards; }
@keyframes prender-a{
  0%,8%,14%,22%{ stroke:#4A4466; filter:none; }
  4%,11%,18%,26%,100%{ stroke:#FFD9F6; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px var(--magenta)) drop-shadow(0 0 30px var(--magenta)); }
}
@keyframes prender-b{
  0%,30%,38%{ stroke:#4A4466; filter:none; }
  34%,44%,100%{ stroke:#D6FAFF; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px var(--cian)) drop-shadow(0 0 30px var(--cian)); }
}
@keyframes prender-c{
  0%,52%,58%{ stroke:#4A4466; filter:none; }
  55%,62%,100%{ stroke:#FFF6C2; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px var(--amarillo)) drop-shadow(0 0 26px var(--amarillo)); }
}
body.revelado .entrada{ background-color:#1A1238; }
.entrada__pista{ font-family:var(--f-texto); font-weight:600; font-size:.76rem; letter-spacing:.34em; text-transform:uppercase; color:var(--tinta-suave); margin-top:1.8rem; animation:titilar 2.4s ease-in-out infinite; }
@keyframes titilar{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.entrada__marcador{ display:none; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — su nombre en neón, sobre la pared
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  isolation:isolate; overflow:hidden;
  background:var(--pared),
    radial-gradient(60% 34% at 50% 44%, rgba(255,79,216,.22), rgba(255,79,216,0) 70%),
    radial-gradient(70% 40% at 50% 62%, rgba(54,226,242,.14), rgba(54,226,242,0) 70%), var(--papel);
}
.portada::before{                      /* el marco: un tubo de neón cian que rodea todo */
  content:""; position:absolute; inset:16px; z-index:-1; pointer-events:none;
  border:2px solid #D6FAFF; border-radius:26px;
  box-shadow:0 0 8px var(--cian), 0 0 26px rgba(54,226,242,.6), inset 0 0 8px var(--cian), inset 0 0 26px rgba(54,226,242,.35);
  filter:hue-rotate(var(--tinte));
}
.portada__arriba{ font-family:var(--f-texto); font-weight:600; font-size:.78rem; letter-spacing:.46em; text-transform:uppercase; color:var(--tinta); }
.portada__grito{ margin:.9rem 0 0; font-family:var(--f-display); font-size:1.5rem; color:#FFF6C2; text-shadow:var(--luz-amarillo); transform:rotate(-4deg); }
.portada__nombre{
  font-family:var(--f-display); font-weight:400; font-size:clamp(4rem,22vw,6.4rem); line-height:1;
  color:#FFE3F8; text-shadow:var(--luz-magenta); filter:hue-rotate(var(--tinte));
  margin:.1rem 0 1.2rem; animation:neon-vivo 5.5s linear infinite;
}
@keyframes neon-vivo{ 0%,91%,94%,97%,100%{ opacity:1; } 92.5%{ opacity:.55; } 95.5%{ opacity:.75; } }
.portada__fecha{ border:2px solid #FFF6C2; border-radius:999px; padding:.55rem 1.4rem; gap:1rem; box-shadow:0 0 8px var(--amarillo), inset 0 0 8px rgba(255,225,77,.45); }
.portada__fecha .fcol{ color:var(--tinta); letter-spacing:.24em; font-size:.7rem; font-weight:600; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:400; font-size:2.6rem; color:#FFF6C2; text-shadow:var(--luz-amarillo); }
.portada__lugar{ margin-top:1.2rem; color:var(--tinta-suave); letter-spacing:.06em; }
.portada__flecha span{ border-color:var(--cian); border-width:2px; filter:drop-shadow(0 0 5px var(--cian)); }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-weight:400; color:#fff; text-shadow:var(--luz-cian); }
.saludo__pases{ background:transparent; color:#FFF6C2; border:2px solid #FFF6C2; border-radius:999px; box-shadow:0 0 8px var(--amarillo), inset 0 0 8px rgba(255,225,77,.4); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.76rem; padding:.5rem 1.2rem; }

.seccion.alterna, .momento{ position:relative; background:var(--pared), var(--papel-hondo); }
.seccion.alterna::before, .seccion.alterna::after{                 /* un tubo de luz arriba y abajo de cada bloque */
  content:""; position:absolute; left:8%; right:8%; height:2px; border-radius:2px;
  background:#FFD9F6; box-shadow:0 0 8px var(--magenta), 0 0 22px var(--magenta);
}
.seccion.alterna::before{ top:0; } .seccion.alterna::after{ bottom:0; background:#D6FAFF; box-shadow:0 0 8px var(--cian), 0 0 22px var(--cian); }
.seccion.alterna .titulo{ text-shadow:var(--luz-magenta); }

.momento{ padding-top:3.2rem; padding-bottom:3.6rem; }
.momento__foto, .foto img{ border:0; border-radius:var(--radio); box-shadow:0 0 0 2px #FFD9F6, 0 0 14px var(--magenta), 0 0 40px rgba(255,79,216,.45), var(--sombra-alta); }
.foto img{ box-shadow:0 0 0 2px #D6FAFF, 0 0 12px var(--cian), var(--sombra); }
.foto:nth-child(even) img{ box-shadow:0 0 0 2px #FFF6C2, 0 0 12px var(--amarillo), var(--sombra); }
.galeria__grid{ gap:1.2rem; padding:6px; }
.foto__hueco{ border:2px dashed var(--marca-claro); background:var(--papel-hondo); }
.flotantes{ display:none; }

.cuenta__caja, .tarjeta, .notas__lista li, .faq__item, .formulario{
  background:rgba(23,18,43,.86); color:var(--tinta);
  border:1px solid rgba(124,107,214,.6); border-radius:var(--radio); box-shadow:var(--sombra);
}
.cuenta__caja{ padding:1rem .2rem .8rem; border-color:#D6FAFF; box-shadow:0 0 8px rgba(54,226,242,.7), inset 0 0 10px rgba(54,226,242,.25); }
.cuenta__caja .n{ font-family:var(--f-display); font-weight:400; color:#fff; text-shadow:var(--luz-cian); font-size:clamp(2rem,9vw,2.6rem); }
.cuenta__caja .l{ letter-spacing:.2em; font-size:.6rem; color:var(--tinta-suave); }
.tarjeta{ padding:1.5rem .8rem 1.3rem; }
.tarjeta__icono{ color:#FFD9F6; width:44px; height:44px; filter:drop-shadow(0 0 5px var(--magenta)) drop-shadow(0 0 12px var(--magenta)); }
.tarjeta:nth-child(even) .tarjeta__icono{ color:#D6FAFF; filter:drop-shadow(0 0 5px var(--cian)) drop-shadow(0 0 12px var(--cian)); }
.tarjeta b{ font-family:var(--f-display); font-weight:400; font-size:1.12rem; color:var(--tinta); }
.tarjeta small{ color:var(--tinta-suave); }
.notas__lista li{ border-left:3px solid var(--amarillo); color:var(--tinta); }
.faq__item summary{ font-weight:600; color:var(--tinta); }
.faq__item summary::after{ color:var(--cian); }
.faq__item p{ color:var(--tinta-suave); }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:400; font-size:clamp(1.2rem,5.2vw,1.5rem); line-height:1.5; color:var(--tinta); }
.dedicatoria__firma{ font-family:var(--f-display); font-size:1.3rem; color:#FFF6C2; text-shadow:var(--luz-amarillo); }

.linea::before{ width:2px; background:#D6FAFF; box-shadow:0 0 8px var(--cian), 0 0 18px var(--cian); }
.linea__paso::before{ width:12px; height:12px; left:-5px; top:1.25rem; border:0; background:#fff; box-shadow:0 0 6px #fff, 0 0 14px var(--cian); }
.linea__paso.destaca::before{ box-shadow:0 0 6px #fff, 0 0 16px var(--magenta), 0 0 30px var(--magenta); }
.linea__hora{ font-family:var(--f-display); font-weight:400; color:#FFF6C2; text-shadow:var(--luz-amarillo); font-size:1.2rem; }
.linea__que b{ font-weight:600; font-size:1.1rem; color:var(--tinta); }
.linea__que small{ color:var(--tinta-suave); }

.mapa{ border:0; border-radius:var(--radio); box-shadow:0 0 0 2px #D6FAFF, 0 0 14px var(--cian), var(--sombra); }
.mapa iframe{ filter:invert(.92) hue-rotate(180deg) saturate(.8) brightness(.95); }      /* el mapa, de noche */

/* los botones: un letrero magenta ya prendido; el de línea es un tubo cian */
.boton{
  font-family:var(--f-texto); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.84rem; color:#0E0B1A;
  background:linear-gradient(180deg, #FF7BE3 0%, #FF4FD8 60%, #E23CC0 100%); border-radius:999px; padding:1.05rem 1.7rem;
  box-shadow:0 0 12px var(--magenta), 0 0 34px rgba(255,79,216,.55);
}
.boton:active{ transform:translateY(2px); box-shadow:0 0 6px var(--magenta); }
.boton--linea{ background:transparent; color:#D6FAFF; border:2px solid #D6FAFF; box-shadow:0 0 8px var(--cian), inset 0 0 8px rgba(54,226,242,.4); }

.formulario{ padding:1.8rem 1.4rem; }
.campo select,.campo textarea,.campo input{ background:#0E0B1A; color:var(--tinta); border:1px solid rgba(124,107,214,.8); border-radius:12px; }
.campo select option{ background:#17122B; color:#F3F0FF; }
.campo textarea::placeholder{ color:#8E86AE; }
.formulario__nota, .buscar__nota{ color:var(--tinta-suave); }

.pie{ background:var(--pared), #09070F; border-top:2px solid #FFD9F6; box-shadow:0 -1px 14px var(--magenta); }
.pie__nombre{ font-family:var(--f-display); font-weight:400; font-size:3rem; color:#FFE3F8; text-shadow:var(--luz-magenta); }
.volver{ background:#17122B; color:var(--tinta); border:1px solid var(--marca-claro); }
.musica{ background:#17122B; }