/* DJ Luigi · páginas por tipo de evento (/fiestas-de-empresa/, /bodas-y-quinces/, /fiestas-privadas/, /bares/).
   Misma identidad que la portada: la noche. Negro violeta, neón violeta, cian y rosa, Anton + Outfit, bandas cruzadas.
   Copiado y adaptado de sitio/djluigi/index.html; no usa marca.css ni estilos de otras marcas. */
:root{
  /* selector de idioma (idiomas.js) */ --idi-fondo:var(--noche2); --idi-tinta:var(--ink); --idi-acento:var(--violeta); --idi-sobre-acento:#07030c; --idi-borde:var(--linea2); --idi-fuente:var(--sans);
  --noche:#07030c; --noche2:#0f0719; --noche3:#170b26; --ink:#fbf7ff; --muted:#bcaed6; --dim:#7e6f99;
  --violeta:#b06cff; --cian:#22d3ee; --rosa:#ff4fd8; --linea:rgba(200,160,255,.16); --linea2:rgba(200,160,255,.32);
  --disp:"Anton",Impact,"Arial Narrow",sans-serif; --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(16px,4vw,48px); --max:1240px;
  --neon:0 0 12px rgba(176,108,255,.7),0 0 40px rgba(176,108,255,.45);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; background:var(--noche); color:var(--ink); font:400 16px/1.6 var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased}
img,video{display:block; max-width:100%}
a{color:inherit}
::selection{background:var(--rosa); color:#fff}
:focus-visible{outline:2px solid var(--cian); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
section[id]{scroll-margin-top:80px}

/* nav */
.nav{position:fixed; inset:0 0 auto; z-index:50; transition:background .3s}
.nav.solida{background:rgba(7,3,12,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.nav .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; height:72px}
.logo{justify-self:center; font:400 26px/1 var(--disp); letter-spacing:.04em; text-decoration:none; text-transform:uppercase; white-space:nowrap; text-shadow:var(--neon)}
.logo span{color:var(--cian)}
.links{display:flex; gap:18px; font:500 12.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase}
.links a{text-decoration:none; color:var(--muted); transition:color .2s; white-space:nowrap}
.links a:hover{color:#fff}
.nav .btn{justify-self:end; padding:12px 18px; font-size:13px}
@media (max-width:1060px){ .nav .wrap{grid-template-columns:auto 1fr} .links{display:none} .logo{justify-self:start} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 15px/1 var(--sans); letter-spacing:.04em; text-transform:uppercase; text-decoration:none; border-radius:999px; padding:16px 26px; cursor:pointer; border:0; transition:transform .2s, box-shadow .2s, background .2s; white-space:nowrap}
.btn svg{width:18px; height:18px; flex:none}
.btn:active{transform:scale(.97)}
.btn-neon{background:linear-gradient(100deg,var(--violeta),var(--rosa)); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 10px 40px -8px rgba(176,108,255,.8)}
.btn-neon:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 0 30px rgba(255,79,216,.6),0 0 70px rgba(176,108,255,.5)}
.btn-vidrio{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.btn-vidrio:hover{background:rgba(255,255,255,.16)}
@media (max-width:400px){ .btn{padding:15px 20px; font-size:14px; white-space:normal; text-align:center} }

/* migas */
.migas{font:500 12.5px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 18px}
.migas ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.migas li+li::before{content:"/"; margin-right:8px; color:var(--linea2)}
.migas a{text-decoration:none; color:var(--muted)} .migas a:hover{color:#fff}

/* hero */
.hero{position:relative; min-height:82svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; padding:120px 0 clamp(70px,9vw,100px)}
.hero > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; filter:saturate(1.25) brightness(.45)}
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(7,3,12,.6) 0%,rgba(7,3,12,.15) 35%,rgba(7,3,12,.8) 75%,var(--noche) 100%)}
.laser{position:absolute; inset:-30% -20%; z-index:-1; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:conic-gradient(from 200deg at 20% 0%,transparent 0deg,rgba(176,108,255,.55) 4deg,transparent 9deg,transparent 30deg,rgba(34,211,238,.45) 33deg,transparent 37deg,transparent 360deg),
             conic-gradient(from 120deg at 85% 0%,transparent 0deg,rgba(255,79,216,.5) 3deg,transparent 8deg,transparent 26deg,rgba(176,108,255,.5) 30deg,transparent 35deg,transparent 360deg);
  animation:barrido 9s ease-in-out infinite alternate}
@keyframes barrido{to{transform:rotate(7deg) translateX(3%)}}
.hero .wrap{width:100%; text-align:center}
.badge{display:inline-flex; align-items:center; gap:10px; font:500 13px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.badge i{width:8px; height:8px; flex:none; border-radius:50%; background:var(--rosa); box-shadow:0 0 12px var(--rosa); animation:late 1s ease-in-out infinite}
@keyframes late{50%{transform:scale(.5); opacity:.5}}
h1{font:400 clamp(44px,8.6vw,128px)/.96 var(--disp); text-transform:uppercase; letter-spacing:.005em; margin:20px 0 24px; overflow-wrap:break-word}
h1 .lleno{display:block; text-shadow:0 0 40px rgba(176,108,255,.35)}
h1 .hueco{display:block; color:transparent; -webkit-text-stroke:2px var(--violeta); text-shadow:0 0 30px rgba(176,108,255,.55)}
.hero p.sub{font-size:clamp(17px,1.6vw,20px); color:#ddd2f0; max-width:660px; margin:0 auto 34px; font-weight:300}
.hero p.sub strong{color:#fff; font-weight:600}
.ctas{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* bandas cruzadas */
.bandas{position:relative; height:clamp(120px,14vw,170px); overflow:hidden; margin-top:-30px}
.banda{position:absolute; left:-5%; right:-5%; top:50%; padding:14px 0; overflow:hidden}
.banda.b1{top:62%; background:var(--violeta); color:var(--noche); transform:translateY(-50%) rotate(-2.4deg); z-index:2}
.banda.b2{top:36%; background:var(--cian); color:var(--noche); transform:translateY(-50%) rotate(1.8deg); opacity:.92}
.banda .pista{display:flex; gap:36px; width:max-content; animation:corre 30s linear infinite}
.banda.b2 .pista{animation-direction:reverse; animation-duration:38s}
.banda span{font:400 clamp(24px,3vw,38px)/1 var(--disp); text-transform:uppercase; white-space:nowrap; letter-spacing:.02em}
.banda span::after{content:"✦"; margin-left:36px}
@keyframes corre{to{transform:translateX(-50%)}}

/* secciones */
section.sec{padding:clamp(80px,11vw,140px) 0}
section.sec.pegada{padding-top:0}
.lado{display:inline-flex; align-items:center; gap:12px; font:600 13px/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--cian)}
.lado::before{content:""; flex:none; width:22px; height:22px; border-radius:50%; background:repeating-radial-gradient(circle,#1b0f2b 0 2px,#2c1a45 2px 3px); box-shadow:0 0 0 2px var(--cian) inset}
h2{font:400 clamp(40px,7vw,104px)/.98 var(--disp); text-transform:uppercase; margin:18px 0 0; letter-spacing:.005em; overflow-wrap:break-word}
h2 .hueco{color:transparent; -webkit-text-stroke:1.5px var(--violeta)}
h2.chico{font-size:clamp(34px,5vw,72px)}
.cabeza{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,56px)}
.lead{color:var(--muted); font-size:clamp(16px,1.4vw,18.5px); max-width:520px; margin:0; font-weight:300}
.texto{max-width:760px}
.texto p{color:var(--muted); font-size:clamp(16.5px,1.4vw,19px); font-weight:300; margin:0 0 18px}
.texto p strong{color:#fff; font-weight:600}

/* momentos / otros eventos como lista de canciones */
.tracklist{border-top:1px solid var(--linea2)}
.track{display:grid; grid-template-columns:90px 1fr auto; gap:clamp(16px,3vw,36px); align-items:center; padding:22px 10px; border-bottom:1px solid var(--linea2); position:relative; transition:background .3s}
.track:hover{background:linear-gradient(90deg,rgba(176,108,255,.14),transparent 70%)}
.track .n{font:400 44px/1 var(--disp); color:transparent; -webkit-text-stroke:1px var(--muted); transition:color .3s, -webkit-text-stroke-color .3s}
.track:hover .n{color:var(--violeta); -webkit-text-stroke-color:var(--violeta); text-shadow:var(--neon)}
.track small{font:600 12.5px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cian)}
.track h3{margin:10px 0 8px; font:400 clamp(26px,3.2vw,44px)/1 var(--disp); text-transform:uppercase; letter-spacing:.01em}
.track h3 a{text-decoration:none}
.track h3 a::after{content:""; position:absolute; inset:0}
.track p{margin:0; color:var(--muted); max-width:58ch}
.track .flecha{font:400 30px/1 var(--disp); color:var(--violeta); transition:transform .25s}
.track:hover .flecha{transform:translateX(6px)}
.track .barras{display:flex; align-items:flex-end; gap:3px; height:28px; width:34px}
.track .barras i{flex:1; background:var(--violeta); height:30%; border-radius:2px}
.track:hover .barras i{animation:eq .5s ease-in-out infinite alternate}
.track:hover .barras i:nth-child(2){animation-delay:-.2s} .track:hover .barras i:nth-child(3){animation-delay:-.35s} .track:hover .barras i:nth-child(4){animation-delay:-.1s}
@keyframes eq{0%{transform:scaleY(.12)} 100%{transform:scaleY(1)}}
@media (max-width:760px){
  .track{grid-template-columns:52px 1fr; gap:6px 14px; padding:18px 4px}
  .track .n{font-size:30px}
  .track .barras,.track .flecha{display:none}
  .track h3{font-size:25px; margin-top:6px}
  .track p{font-size:14.5px}
}

/* qué incluye: tornamesa + rider */
.rider{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,6vw,90px); align-items:center}
.tornamesa{position:relative; width:min(100%,440px); aspect-ratio:1; margin:0 auto}
.disco{position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle,#120a1d 0 2px,#22143a 2px 3.5px); box-shadow:0 0 0 2px rgba(176,108,255,.35),0 40px 90px -30px rgba(176,108,255,.6),0 0 80px -10px rgba(34,211,238,.25); animation:gira 6s linear infinite}
.disco::after{content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 40deg,rgba(255,255,255,.12) 60deg,transparent 80deg,transparent 220deg,rgba(255,255,255,.08) 240deg,transparent 260deg)}
@keyframes gira{to{transform:rotate(360deg)}}
.etiqueta{position:absolute; inset:24%; border-radius:50%; overflow:hidden; border:3px solid var(--violeta); box-shadow:0 0 30px rgba(176,108,255,.6); display:grid; place-items:center; background:linear-gradient(135deg,var(--violeta),var(--rosa))}
.etiqueta span{font:400 clamp(26px,4vw,40px)/.9 var(--disp); text-transform:uppercase; color:var(--noche); text-align:center}
.etiqueta span b{display:block; font-weight:400; color:#fff}
.brazo{position:absolute; right:0; top:-2%; width:44%; height:62%; pointer-events:none}
.brazo::before{content:""; position:absolute; right:12%; top:0; width:26px; height:26px; border-radius:50%; background:#2a1d3d; border:2px solid var(--muted)}
.brazo::after{content:""; position:absolute; right:calc(12% + 11px); top:20px; width:4px; height:86%; background:linear-gradient(var(--muted),#8f84a6); border-radius:2px; transform-origin:top center; transform:rotate(24deg)}
.items{list-style:none; margin:30px 0 34px; padding:0; display:grid}
.items li{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--linea)}
.items b{font:400 22px/1.1 var(--disp); text-transform:uppercase; letter-spacing:.02em; color:var(--violeta)}
.items span{color:var(--muted)}
@media (max-width:900px){ .rider{grid-template-columns:1fr} .tornamesa{max-width:300px} }
@media (max-width:520px){ .items li{grid-template-columns:1fr; gap:4px} }

/* así suena: el video real */
.escenario{display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:clamp(30px,6vw,80px); align-items:center}
.reel{position:relative; margin:0; aspect-ratio:9/16; border-radius:20px; overflow:hidden; background:#000; cursor:pointer; border:1px solid var(--linea2); box-shadow:0 0 0 2px var(--violeta),0 0 50px rgba(176,108,255,.55),0 0 120px rgba(255,79,216,.25)}
.reel video{width:100%; height:100%; object-fit:cover; transition:transform .8s}
.reel:hover video{transform:scale(1.04)}
.reel .pie{position:absolute; left:0; right:0; bottom:0; padding:56px 16px 16px; background:linear-gradient(transparent,rgba(7,3,12,.92)); display:flex; justify-content:space-between; align-items:flex-end; gap:10px}
.reel .pie b{display:block; font:400 22px/1.05 var(--disp); text-transform:uppercase; letter-spacing:.02em}
.reel .pie small{color:rgba(255,255,255,.72); font-size:12.5px}
.reel .pie small a{color:inherit; text-underline-offset:2px; white-space:nowrap}
.sonido{flex:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--violeta); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 0 18px rgba(176,108,255,.7)}
.sonido svg{width:18px; height:18px}
.mas{display:grid; gap:16px; justify-items:start; max-width:480px}
.mas p{margin:0; color:var(--muted); font-size:clamp(17px,1.5vw,20px); font-weight:300}
@media (max-width:900px){ .escenario{grid-template-columns:1fr} .reel{max-width:360px; width:100%; margin:0 auto} }

/* cómo reservar: boletos */
.boletos{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.boleto{position:relative; padding:26px 22px; background:var(--noche3); border-radius:16px;
  -webkit-mask:radial-gradient(circle 12px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 12px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 12px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 12px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
.boleto::after{content:""; position:absolute; left:18px; right:18px; top:62%; border-top:2px dashed var(--linea2)}
.boleto b{font:400 56px/1 var(--disp); color:transparent; -webkit-text-stroke:1.5px var(--cian)}
.boleto h3{margin:12px 0 0; font:400 24px/1.05 var(--disp); text-transform:uppercase; letter-spacing:.02em}
.boleto p{margin:34px 0 0; color:var(--muted); font-size:14.5px}
@media (max-width:900px){ .boletos{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .boletos{grid-template-columns:1fr} }

/* precio "desde" como pase */
.pase{display:grid; grid-template-columns:64px 1fr; background:var(--noche2); border:1px solid var(--linea2); border-radius:22px; overflow:hidden; box-shadow:0 40px 90px -40px rgba(176,108,255,.6); max-width:900px}
.pase .talon{background:linear-gradient(180deg,var(--violeta),var(--rosa)); display:grid; place-items:center; border-right:2px dashed rgba(7,3,12,.6)}
.pase .talon span{writing-mode:vertical-rl; transform:rotate(180deg); font:400 20px/1 var(--disp); letter-spacing:.18em; text-transform:uppercase; color:var(--noche); white-space:nowrap}
.pase .cuerpo{padding:clamp(22px,3.4vw,40px); display:grid; gap:14px; justify-items:start}
.pase small{font:600 12.5px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cian)}
.pase .monto{font:400 clamp(48px,7vw,92px)/.95 var(--disp); text-transform:uppercase; text-shadow:var(--neon); margin:0}
.pase .monto span{color:transparent; -webkit-text-stroke:1.5px var(--violeta); text-shadow:none; font-size:.5em; vertical-align:middle; margin-right:.25em}
.pase p{margin:0; color:var(--muted); max-width:60ch}
@media (max-width:560px){ .pase{grid-template-columns:40px 1fr} .pase .talon span{font-size:15px} }

/* preguntas */
.faq{max-width:900px; border-top:1px solid var(--linea2)}
.faq details{border-bottom:1px solid var(--linea2)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font:600 clamp(17px,1.6vw,20px)/1.35 var(--sans); color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; color:var(--cian); font:400 28px/1 var(--sans); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--cian); outline-offset:4px}
.faq p{margin:0 0 24px; color:var(--muted); max-width:68ch; line-height:1.65; font-size:16.5px}

/* llamado final */
.final{position:relative; overflow:hidden; text-align:center}
.final::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 60% at 80% 40%,rgba(176,108,255,.25),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(34,211,238,.14),transparent 70%)}
.final .lead{margin:22px auto 32px}
.final .alt{margin-top:24px}
.final .alt a{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted)}
.final .alt a:hover{color:#fff}
.final .alt svg{width:20px; height:20px; color:var(--rosa); flex:none}

/* pie */
footer{padding:clamp(60px,8vw,90px) 0 calc(30px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--linea); text-align:center; overflow:hidden}
.firma{font:400 clamp(70px,17vw,240px)/.85 var(--disp); text-transform:uppercase; color:transparent; -webkit-text-stroke:1.5px rgba(176,108,255,.55); white-space:nowrap}
.pie-fila{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:30px; color:var(--dim); font-size:13.5px}
.pie-fila nav{display:flex; gap:12px 20px; flex-wrap:wrap; justify-content:center}
.pie-fila a{text-decoration:none} .pie-fila a:hover{color:#fff}
.pie-fila a[aria-current]{color:var(--violeta)}
@media (max-width:620px){ .pie-fila{justify-content:center; text-align:center} }

.rev{opacity:0; transform:translateY(26px) scale(.98); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.rev.visto{opacity:1; transform:none}
.rev.d1{transition-delay:.08s} .rev.d2{transition-delay:.16s} .rev.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} .rev{opacity:1; transform:none} html{scroll-behavior:auto} }