/* Concierto · Frecuencia — neón, reflectores y synthwave */
:root{
  --bg:#06030f;--mag:#ff2bd6;--cyan:#22e6ff;--lime:#c6ff3d;--vio:#7b2cff;--ink:#f1ecff;--mut:#9a92b8;
  --ph-bg:linear-gradient(135deg,#2a0b3d,#0b1a3a);--ph-ink:rgba(34,230,255,.7);
  --music-bg:linear-gradient(135deg,var(--mag),var(--vio));--music-ink:#fff;
  --holo:linear-gradient(115deg,#ff2bd6,#7b2cff,#22e6ff,#c6ff3d,#ff2bd6);
}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 "Space Grotesk",system-ui,sans-serif}
main{position:relative;z-index:2}

/* ---------- Escenario de fondo ---------- */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.beam{position:absolute;top:-10vh;width:44vmax;height:130vh;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(6px);opacity:.55;
  background:conic-gradient(from 168deg at 50% 0,transparent 0deg,var(--c) 12deg,transparent 24deg)}
.b1{left:-18vmax;--c:rgba(255,43,214,.55);animation:swing 7s ease-in-out infinite alternate}
.b2{left:5vw;--c:rgba(34,230,255,.45);animation:swing 5.5s ease-in-out -2s infinite alternate-reverse}
.b3{right:5vw;--c:rgba(123,44,255,.55);animation:swing 6.5s ease-in-out -1s infinite alternate}
.b4{right:-18vmax;--c:rgba(198,255,61,.3);animation:swing 8s ease-in-out -3s infinite alternate-reverse}
@keyframes swing{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
.grid-floor{position:absolute;left:-50%;right:-50%;bottom:-2vh;height:45vh;transform:perspective(300px) rotateX(62deg);transform-origin:50% 100%;
  background:linear-gradient(transparent 0 94%,rgba(255,43,214,.8) 94%) 0 0/100% 40px,linear-gradient(90deg,transparent 0 96%,rgba(34,230,255,.7) 96%) 0 0/40px 100%;
  -webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%);animation:floor 1.2s linear infinite;opacity:.55}
@keyframes floor{to{background-position:0 40px,0 0}}
.haze{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 100%,rgba(123,44,255,.35),transparent 70%),radial-gradient(50% 30% at 20% 0,rgba(255,43,214,.18),transparent)}
.scan{position:fixed;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.flash{position:fixed;inset:0;z-index:80;pointer-events:none;background:#fff;opacity:0}
.flash.go{animation:strobe .9s steps(1)}
@keyframes strobe{0%,20%,40%{opacity:.85;background:#fff}10%,30%{opacity:0}50%{opacity:.5;background:var(--mag)}60%{opacity:0}70%{opacity:.4;background:var(--cyan)}80%,100%{opacity:0}}

/* ---------- Intro: boleto ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:20px;
  background:radial-gradient(70% 50% at 50% 50%,#1c0730,#040208);transition:opacity .6s}
.gate-k{font:700 .75rem "Space Grotesk";letter-spacing:.5em;text-transform:uppercase;color:var(--cyan);animation:flick 3s infinite}
.ticket{display:flex;width:min(92vw,440px);filter:drop-shadow(0 20px 40px rgba(255,43,214,.3))}
.t-main,.t-stub{position:relative;background:linear-gradient(135deg,#1b1030,#0f0a1f);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.t-main{flex:1;padding:18px 18px 16px;border-radius:16px 0 0 16px;border-right:2px dashed rgba(255,255,255,.3);display:grid;gap:2px}
.t-main small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.t-main b{font:400 clamp(2rem,9vw,2.8rem)/1 "Anton";letter-spacing:.04em;background:var(--holo);background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo 6s linear infinite}
.t-main em{font-style:normal;color:var(--lime);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.t-row span{white-space:nowrap}
.t-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;font:700 .72rem "Space Grotesk";letter-spacing:.12em;color:var(--ink)}
.t-row span{padding:4px 8px;border:1px solid rgba(255,255,255,.2);border-radius:6px}
.t-guest{margin-top:8px;font-size:.78rem;color:var(--mut)}
.t-guest strong{color:var(--cyan)}
.t-stub{width:88px;border-radius:0 16px 16px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:transform 1s cubic-bezier(.5,-0.3,.7,1),opacity 1s;transform-origin:0 100%}
.t-stub span{font:400 1rem/1 "Anton";letter-spacing:.1em;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--mag)}
.t-holo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,30%) var(--my,30%),rgba(255,255,255,.22),transparent 40%),var(--holo);background-size:100%,300%;mix-blend-mode:overlay;opacity:.35;animation:holo 8s linear infinite}
@keyframes holo{to{background-position:0 0,300% 0}}
.barcode{display:block;width:54px;height:60px;background:repeating-linear-gradient(0deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 12px);opacity:.85}
.barcode.wide{width:100%;height:46px;margin-top:14px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 12px,#fff 12px 13px,transparent 13px 17px)}
.gate-btn{border:0;padding:15px 30px;border-radius:99px;font:700 .85rem "Space Grotesk";letter-spacing:.25em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--mag),var(--vio));box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 30px var(--mag);animation:glowp 1.6s ease-in-out infinite alternate}
@keyframes glowp{to{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 50px var(--mag),0 0 90px var(--vio)}}
.gate.torn .t-stub{transform:translate(40px,120vh) rotate(38deg);opacity:0}
.gate.torn .ticket{animation:shakeT .35s}
.gate.lights{opacity:0}
.gate.torn .gate-btn,.gate.torn .gate-k{opacity:0;transition:opacity .3s}
@keyframes shakeT{30%{transform:translateX(-6px) rotate(-1deg)}60%{transform:translateX(5px) rotate(1deg)}}

/* ---------- Portada ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 18px 40px}
.neon-band{font:400 clamp(1.1rem,5.4vw,1.9rem) "Monoton";color:#ffe9fb;letter-spacing:.06em;text-shadow:0 0 4px #fff,0 0 12px var(--mag),0 0 28px var(--mag),0 0 60px var(--mag);animation:flick 4s infinite}
@keyframes flick{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}}
.glitch{position:relative;font:400 clamp(3.4rem,17vw,9rem)/.95 "Anton";letter-spacing:.02em;color:#fff;margin:10px 0 6px}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0}
.glitch::before{color:var(--cyan);transform:translate(-3px,0);mix-blend-mode:screen;animation:gl1 2.6s infinite steps(1)}
.glitch::after{color:var(--mag);transform:translate(3px,0);mix-blend-mode:screen;animation:gl2 3.1s infinite steps(1)}
@keyframes gl1{0%{clip-path:inset(0 0 85% 0)}10%{clip-path:inset(40% 0 30% 0);transform:translate(-8px,0)}20%{clip-path:inset(80% 0 2% 0)}30%{clip-path:inset(10% 0 60% 0);transform:translate(4px,0)}40%,100%{clip-path:inset(0 0 100% 0)}}
@keyframes gl2{0%{clip-path:inset(60% 0 10% 0)}12%{clip-path:inset(5% 0 75% 0);transform:translate(8px,0)}24%{clip-path:inset(45% 0 35% 0)}36%{clip-path:inset(85% 0 0 0);transform:translate(-5px,0)}48%,100%{clip-path:inset(0 0 100% 0)}}
.hero-sub{letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;color:var(--mut)}
.hero-sub b{color:var(--lime)}
.hero-pic{position:relative;width:min(92vw,560px);aspect-ratio:16/10;margin:28px auto 0;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(123,44,255,.45)}
.hero-pic .pic{position:absolute;inset:0}
.hero-pic .pic img{filter:grayscale(1) contrast(1.2);animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.15) translate(-3%,2%)}}
.duo{position:absolute;inset:0;background:linear-gradient(135deg,var(--mag),var(--vio) 50%,var(--cyan));mix-blend-mode:color;opacity:.85;pointer-events:none}
.viz{width:min(92vw,560px);height:90px;margin-top:-4px}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.hero-meta span{display:grid;padding:8px 14px;border:1px solid rgba(34,230,255,.4);border-radius:10px;font:700 .95rem "Space Grotesk";background:rgba(6,3,15,.6)}
.hero-meta small{font-size:.6rem;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;font-weight:500}

/* Marquesina */
.marquee{position:relative;z-index:2;padding:30px 0;overflow:hidden}
.mq{display:flex;width:max-content;font:400 clamp(1.4rem,6vw,2.4rem)/1.1 "Anton";letter-spacing:.04em;padding:10px 0;background:var(--mag);color:#0a0514;transform:rotate(-3deg) scale(1.05);animation:mq 22s linear infinite}
.mq.rev{background:transparent;color:transparent;-webkit-text-stroke:1.2px var(--cyan);transform:rotate(2deg) scale(1.05);animation-direction:reverse;margin-top:-4px}
@keyframes mq{to{translate:-50% 0}}

/* ---------- Secciones ---------- */
.sec{max-width:820px;margin:0 auto;padding:70px 18px;text-align:center;position:relative}
.h{font:400 clamp(2.4rem,11vw,4.4rem)/1 "Anton";text-transform:uppercase;letter-spacing:.02em;margin-bottom:30px;color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.h span{color:var(--ink);-webkit-text-stroke:0;text-shadow:0 0 24px var(--mag)}
.lcd{display:flex;justify-content:center;align-items:flex-start;gap:6px;padding:22px 12px;margin:0 auto 26px;max-width:520px;border-radius:18px;background:#0b0718;border:1px solid rgba(198,255,61,.25);box-shadow:inset 0 0 40px rgba(198,255,61,.08),0 0 40px rgba(198,255,61,.1)}
.lcd div{display:grid}
.lcd b{font:400 clamp(2.4rem,12vw,4rem)/1 "Anton";color:var(--lime);text-shadow:0 0 10px var(--lime),0 0 30px rgba(198,255,61,.5);font-variant-numeric:tabular-nums;min-width:1.25em}
.lcd b.tick{animation:gt .25s steps(2)}
@keyframes gt{0%{transform:translate(2px,-1px) skewX(8deg);color:var(--cyan)}50%{transform:translate(-2px,1px);color:var(--mag)}}
.lcd i{font:400 2.6rem/1 "Anton";color:var(--lime);opacity:.6;font-style:normal;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.1}}
.lcd span{font-size:.62rem;letter-spacing:.25em;color:var(--mut);text-transform:uppercase}
.btn{display:inline-flex;justify-content:center;align-items:center;border:0;padding:14px 26px;border-radius:12px;text-decoration:none;font:700 .8rem "Space Grotesk";letter-spacing:.2em;text-transform:uppercase;color:#0a0514;background:var(--lime);box-shadow:0 0 24px rgba(198,255,61,.45);transition:transform .15s,box-shadow .2s}
.btn:hover{box-shadow:0 0 40px rgba(198,255,61,.8)}
.btn:active{transform:scale(.95)}
.btn.wide{width:100%}
.link{background:none;border:0;color:var(--cyan);text-decoration:underline;margin-top:12px}

/* Line-up */
.lineup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.act{position:relative;border-radius:16px;overflow:hidden;text-align:left;background:#0e0920;border:1px solid rgba(255,255,255,.08)}
.act.head{grid-column:1/-1}
.act .pic{aspect-ratio:1}
.act.head .pic{aspect-ratio:16/9}
.act .pic img{filter:grayscale(1) contrast(1.15);transition:filter .4s,transform .6s}
.act::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,3,15,.95));pointer-events:none}
.act>div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 14px}
.act time{font:700 .7rem "Space Grotesk";letter-spacing:.2em;color:var(--lime)}
.act h3{font:400 clamp(1.2rem,5vw,1.9rem)/1.05 "Anton";text-transform:uppercase;margin:2px 0}
.act.head h3{font-size:clamp(1.8rem,8vw,3rem)}
.act p{font-size:.8rem;color:var(--mut)}
.act:hover .pic img,.act:focus-within .pic img{filter:none;transform:scale(1.06)}
.act:hover h3{animation:gt .3s steps(2) 2}
.act.head{box-shadow:0 0 0 1px var(--mag),0 0 40px rgba(255,43,214,.35)}

/* Tracklist */
.album{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center;max-width:680px;margin:0 auto}
@media (min-width:700px){.album{grid-template-columns:240px minmax(0,1fr)}}
.vinyl{width:min(64vw,240px);aspect-ratio:1;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:repeating-radial-gradient(circle,#111 0 2px,#1d1d1d 2px 4px);box-shadow:0 0 0 6px #000,0 20px 50px rgba(0,0,0,.6),0 0 60px rgba(123,44,255,.4);position:relative;animation:spin 3.2s linear infinite;animation-play-state:paused}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent,rgba(255,255,255,.12) 10%,transparent 20%,transparent 50%,rgba(255,255,255,.1) 60%,transparent 70%)}
.vinyl.on{animation-play-state:running}
.vinyl .label{width:38%;aspect-ratio:1;border-radius:50%;--ph-bg:var(--holo)}
@keyframes spin{to{transform:rotate(360deg)}}
.tracks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tracks button{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(14,9,32,.8);text-align:left;font-size:.98rem;transition:background .2s,border-color .2s,transform .2s}
.tracks button:hover{transform:translateX(4px);border-color:var(--cyan)}
.tracks i{font-style:normal;color:var(--mut);font-size:.75rem;width:20px}
.tracks em{margin-left:auto;font-style:normal;color:var(--mut);font-size:.8rem}
.eq{display:none;gap:2px;align-items:flex-end;height:14px}
.eq b{width:3px;background:var(--lime);animation:mbar .6s ease-in-out infinite alternate}
.eq b:nth-child(2){animation-delay:-.2s}.eq b:nth-child(3){animation-delay:-.4s}
.tracks .on button{background:linear-gradient(90deg,rgba(255,43,214,.25),rgba(123,44,255,.2));border-color:var(--mag)}
.tracks .on .eq{display:flex}
.np{margin-top:16px;font-size:.8rem;color:var(--mut);letter-spacing:.08em}
.np b{color:var(--cyan)}

/* Info */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;text-align:left}
.info>div{padding:20px;border-radius:16px;background:rgba(14,9,32,.8);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.info>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--mag),var(--cyan))}
.info b{font-size:1.6rem}
.info h3{font:400 1.4rem "Anton";text-transform:uppercase;margin:6px 0 2px;letter-spacing:.03em}
.info p{color:var(--mut);font-size:.92rem}
.info a{color:var(--cyan);font-weight:700;font-size:.85rem;text-decoration:none;display:inline-block;margin-top:8px}

/* Pase */
.pass{position:relative;overflow:hidden;max-width:420px;margin:0 auto 22px;padding:22px;border-radius:20px;text-align:left;background:linear-gradient(135deg,#1b1030,#0f0a1f);border:1px solid rgba(255,255,255,.15);box-shadow:0 0 50px rgba(34,230,255,.2)}
.pass small{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lime)}
.pass-name{display:block;font:400 clamp(1.8rem,8vw,2.4rem)/1.1 "Anton";text-transform:uppercase;margin:4px 0 6px}
.pass [data-guest]:not([hidden])~.pass-def{display:none}
.panel{max-width:420px;margin:0 auto;padding:22px;border-radius:20px;background:rgba(14,9,32,.9);border:1px solid rgba(255,255,255,.1)}
.rsvp-form label{color:var(--mut);font-size:.85rem;letter-spacing:.04em}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{background:#07040f;border:1px solid rgba(255,255,255,.14);color:var(--ink)}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,230,255,.25)}
.rsvp-choice label{border:1px solid rgba(255,255,255,.18);font-weight:700}
.rsvp-choice input:checked+label{background:var(--mag);border-color:var(--mag);color:#fff;box-shadow:0 0 24px var(--mag)}
.rsvp-choice input:focus-visible+label{outline:2px solid var(--cyan)}
.ok-icon{width:70px;height:70px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:#0a0514;background:var(--lime);box-shadow:0 0 40px var(--lime);animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(0)}}
.rsvp-ok h3{font:400 2rem "Anton";letter-spacing:.04em;margin-bottom:6px}
.rsvp-ok p{color:var(--mut);margin-bottom:16px}

.foot{text-align:center;padding:60px 18px 110px;position:relative;z-index:2}
.tag{margin-top:10px;letter-spacing:.3em;color:var(--cyan);font-weight:700}