/* Lenguaje visual minimalista: negro tinta, hueso y un solo acento. Fotos en blanco y negro con grano y trama. */
:root{
  --bg:#060505;
  --bg2:#0e0c0b;
  --bone:#ece7db;
  --acc:var(--bone);       /* sin color de acento: la página va en blanco y negro */
  --ink:var(--bg);
  --char:#161413;
  --paper:var(--bone);
  --paper-ink:#0e0c0b;
  --chrome:var(--bone);
  --mute:#ece7db8c;
  --mute2:#ece7db59;
  --line:#ece7db26;
  --rose:var(--acc);       /* alias usados por otras páginas */
  --mint:var(--bone);
  --display:'Anton','Anton Fallback',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.7,0,.2,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:clip;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--bone);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--bone);color:var(--bg)}
:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
[hidden]{display:none!important}

/* Grano de película */
.grain{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:45px -80px}60%{background-position:-90px -20px}80%{background-position:70px 65px}100%{background-position:0 0}}

/* Tipografía */
.display{font:400 clamp(52px,8.4vw,150px)/.88 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:0;color:var(--bone)}
.display.sm{font-size:clamp(42px,6vw,104px)}
.display.ink{color:var(--paper-ink)}
.tex{--tinta:var(--bone);color:transparent;background-image:var(--noise),linear-gradient(var(--tinta),var(--tinta));-webkit-background-clip:text;background-clip:text}
.display .rose,.display .mint{color:var(--mute2)}
.display.ink .rose{color:#0e0c0b66}
.rose{color:var(--acc)}
.mint{color:var(--bone)}
.kicker{display:flex;align-items:center;gap:14px;margin:0 0 26px;font:400 11px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.kicker i{width:28px;height:1px;background:currentColor}
.kicker.ink{color:#0e0c0bb3}
.lede{font-size:clamp(16px,1.3vw,19px);line-height:1.7;max-width:600px}
.muted{color:var(--mute)}
.small{font-size:13px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:17px 24px;font:400 15px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;background:transparent;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.btn i{font-style:normal;font-family:var(--body);font-size:15px;transition:transform .3s}
.btn:hover i{transform:translate(3px,-3px)}
.btn-rose{background:var(--bone);border-color:var(--bone);color:var(--bg)}
.btn-rose:hover{background:transparent;border-color:var(--bone);color:var(--bone)}
.btn-line{color:var(--bone);border-color:#ece7db66}
.btn-line:hover{background:var(--bone);color:var(--bg);border-color:var(--bone)}
.btn-ink{background:var(--paper-ink);border-color:var(--paper-ink);color:var(--bone)}
.btn-ink:hover{background:var(--bone);border-color:var(--bone);color:var(--bg)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.block{width:100%}

/* Barra superior */
.bar{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;padding:0 var(--gutter);display:flex;align-items:center;gap:28px;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.bar.solid{background:#060505e0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.bar-mark{font:400 24px/1 var(--display);letter-spacing:.04em;color:var(--bone);text-transform:uppercase;white-space:nowrap}
.bar-mark span{font:400 9px var(--mono);letter-spacing:.28em;color:var(--mute);margin-left:12px;vertical-align:middle}
.bar nav{display:flex;gap:34px;margin-left:auto;font:400 15px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.bar nav a{position:relative;padding:8px 0;color:var(--mute);transition:color .3s}
.bar nav a:hover{color:var(--bone)}
.bar nav a::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--bone);transition:right .4s var(--ease)}
.bar nav a:hover::after{right:0}
.bar .btn{padding:12px 18px;font-size:14px}
@media (max-width:860px){.bar nav{display:none}.bar .btn{margin-left:auto}.bar-mark{font-size:20px}.bar-mark span{display:none}}

/* Botón Menú y menú de pantalla completa. En celular se usa siempre; en computador con "estiloNav": "b" o ?nav=b. */
.bar-info,.bar-menu{display:none}
.bar-menu{align-items:center;gap:14px;padding:10px 0 10px 6px;background:none;border:0;color:var(--bone);cursor:pointer;font:400 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.bar-menu b{position:relative;display:block;width:30px;height:12px}
.bar-menu b i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease),width .5s var(--ease)}
.bar-menu b i:first-child{top:0}.bar-menu b i:last-child{top:10px;left:auto;width:20px}
.bar-menu:hover b i:last-child{width:30px}
.menu-abierto .bar-menu b i{top:5px!important;width:30px!important}
.menu-abierto .bar-menu b i:first-child{transform:rotate(45deg)}.menu-abierto .bar-menu b i:last-child{transform:rotate(-45deg)}
.menu-abierto .bar{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-abierto{overflow:hidden}
.menu{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;justify-content:center;padding:110px var(--gutter) 0;background:var(--bg);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.menu.abierto{clip-path:inset(0)}
.menu-links{display:flex;flex-direction:column;margin:auto 0}
.menu-links a{display:flex;align-items:flex-start;gap:clamp(14px,2vw,28px);padding:.06em 0;font:400 clamp(54px,9.5vw,150px)/.95 var(--display);text-transform:uppercase;color:var(--bone);opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease),color .3s}
.menu-links a small{font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--mute);margin-top:.9em}
.menu-links:hover a{color:var(--mute2)}
.menu-links a:hover{color:var(--acc)}
.menu.abierto .menu-links a{opacity:1;transform:none}
.menu.abierto .menu-links a:nth-child(1){transition-delay:.25s}.menu.abierto .menu-links a:nth-child(2){transition-delay:.31s}
.menu.abierto .menu-links a:nth-child(3){transition-delay:.37s}.menu.abierto .menu-links a:nth-child(4){transition-delay:.43s}
.menu-pie{display:flex;flex-wrap:wrap;gap:16px 56px;padding:24px 0 clamp(24px,4vh,40px);border-top:1px solid var(--line)}
.menu-pie p{margin:0;font:400 12px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.menu-pie small{display:block;font-size:10px;color:var(--mute)}
.nav-b .bar nav{display:none}
.nav-b .bar-info{display:flex;align-items:center;gap:12px;margin:0 0 0 auto;font:400 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.nav-b .bar-info i{width:18px;height:1px;background:var(--mute2)}
.nav-b .bar-menu{display:flex}
@media (max-width:860px){.bar{gap:18px}.bar-menu{display:flex}.bar-menu span{display:none}.nav-b .bar-info{display:none}}

/* Hero: retrato del artista a la derecha, texto sobre la cortina a la izquierda */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:110px var(--gutter) 0;overflow:hidden;background:var(--bg);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--bg)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 28%;filter:saturate(.95) contrast(1.08) brightness(.95);animation:heroZoom 22s ease-out both;transform-origin:72% 30%}
@keyframes heroZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
html.fx .hero-bg img{visibility:hidden}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,#060505 0%,#060505f5 22%,#060505cc 38%,#06050566 52%,#06050514 64%,transparent 72%),
  linear-gradient(180deg,#06050599 0%,transparent 16%,transparent 70%,#060505 100%)}
.hero-halftone{display:none}
.hero-inner{position:relative;width:100%;max-width:min(780px,56vw);margin:auto 0}
.hero-code{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:0 0 26px;font:400 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#ece7dbcc}
.hero-code i{width:22px;height:1px;background:var(--mute2)}
.hero .display{font-size:clamp(68px,10.5vw,200px);line-height:.9}
.hero-lede{margin:26px 0 0;max-width:440px;font-size:clamp(15px,1.25vw,18px);color:#ece7dbd9}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.hero-meta{position:relative;width:100%;margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding:26px 0 clamp(26px,4vh,40px);border-top:1px solid var(--line);text-align:left}
.hero-facts{display:flex;gap:clamp(26px,4vw,64px);flex-wrap:wrap}
.hero-facts div{font:400 10px/1.4 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.hero-facts b{display:block;font:400 clamp(22px,2.1vw,32px)/1 var(--display);letter-spacing:.03em;color:var(--bone);margin-top:8px}
.countdown{display:flex;gap:6px}
.countdown div{text-align:center;min-width:58px;padding:0 4px}
.countdown div+div{border-left:1px solid var(--line)}
.countdown b{display:block;font:400 clamp(28px,2.6vw,40px)/1 var(--display);color:var(--bone);font-variant-numeric:tabular-nums}
.countdown span{font:400 9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
@media (max-width:860px){
  .hero{justify-content:flex-end;padding-top:90px}
  .hero-bg img{object-position:80% 20%;transform-origin:80% 20%}
  .hero-bg::after{background:linear-gradient(180deg,#06050580 0%,transparent 14%,transparent 30%,#060505b3 42%,#060505eb 56%,#060505 100%)}
  .hero-code,.hero-lede{text-shadow:0 1px 12px #000}
  .hero-inner{max-width:100%;margin:auto 0 0;padding-top:34svh}
  .hero .display{font-size:clamp(60px,19vw,120px)}
}
.hero-side{display:none}

/* Hero alternativa B (afiche): texto sobre negro a la izquierda, retrato en un panel a la derecha.
   Se activa con "estiloHero": "b" en evento.config.json, o para probar con ?hero=b en la dirección. */
.hero-b .hero-bg{inset:0 0 0 auto;width:54%;overflow:hidden;border-left:1px solid var(--line)}
.hero-b .hero-bg img{object-position:78% 26%;filter:saturate(.9) contrast(1.1) brightness(.92);transform-origin:78% 30%}
.hero-b .hero-bg::after{background:
  linear-gradient(90deg,#060505 0%,#060505e6 16%,#06050580 32%,transparent 52%),
  linear-gradient(180deg,#060505b3 0%,transparent 20%,transparent 70%,#060505 100%)}
.hero-b .hero-inner{max-width:min(980px,66vw)}
.hero-b .display{font-size:clamp(72px,12.5vw,240px);line-height:.86}
.hero-b .hero-lede{max-width:380px}
.hero-b .hero-side{display:block;position:absolute;right:calc(var(--gutter) - 6px);top:50%;z-index:1;margin:0;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font:400 10px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--mute);text-shadow:0 0 10px #000,0 0 3px #000}
.hero-b .hero-side i{display:inline-block;width:1px;height:40px;margin:14px 0;background:var(--mute2);vertical-align:middle}
@media (max-width:860px){
  .hero-b .hero-bg{inset:56px 0 auto 0;width:100%;height:60svh;border-left:0}
  .hero-b .hero-bg img{object-position:80% 20%}
  .hero-b .hero-bg::after{background:linear-gradient(180deg,#06050580 0%,transparent 18%,transparent 45%,#060505 100%),linear-gradient(#06050540,#06050540)}
  .hero-b .hero-inner{max-width:100%;padding-top:44svh}
  .hero-b .display{font-size:clamp(60px,19vw,130px)}
  .hero-b .hero-side{display:none}
}
/* Hero A: el nombre en una sola línea a lo ancho, justo encima de la línea de fecha, lugar, ciudad y cuenta regresiva. */
.hero-a .hero-bg::after{background:
  linear-gradient(90deg,#060505 0%,#060505f5 22%,#060505cc 38%,#06050566 52%,#06050514 64%,transparent 72%),
  linear-gradient(180deg,#06050599 0%,transparent 16%,transparent 48%,#060505b3 68%,#060505 90%)}
.hero-a .hero-inner{display:contents}
.hero-a .display{order:3;align-self:stretch;margin:auto 0 clamp(4px,1vh,12px) -.04em;padding:.08em 0 .1em;font-size:15.2vw;line-height:.8;white-space:nowrap;letter-spacing:-.005em}
.hero-a .hero-meta{order:4;margin-top:0}
@media (max-width:860px){
  .hero-a .hero-bg::after{background:linear-gradient(180deg,#06050580 0%,transparent 12%,transparent 42%,#060505b3 56%,#060505f2 64%,#060505 100%)}
  .hero-a .display{font-size:15.2vw}
}
/* Hero C: "cartelera". Foto completa, el nombre en una sola línea gigante abajo y la información arriba.
   Se activa con "estiloHero": "c" en evento.config.json, o para probar con ?hero=c en la dirección. */
.hero-c{justify-content:flex-end;padding-top:96px}
.hero-c .hero-bg img{object-position:68% 22%;transform-origin:68% 24%}
.hero-c .hero-bg::after{background:
  linear-gradient(90deg,#060505d9 0%,#06050599 24%,transparent 50%),
  linear-gradient(180deg,#060505a6 0%,transparent 16%,transparent 48%,#060505bf 70%,#060505 92%)}
.hero-c .hero-inner{flex:1;max-width:100%;margin:0;display:flex;flex-direction:column;align-items:flex-start}
.hero-c .hero-code{margin:0}
.hero-c .hero-lede{order:1;margin:auto 0 0;max-width:340px}
.hero-c .hero-cta{order:2;margin:22px 0 0}
.hero-c .display{order:3;align-self:stretch;margin:clamp(18px,3vh,34px) 0 0 -.04em;padding:.08em 0 .1em;font-size:15.4vw;line-height:.8;white-space:nowrap;letter-spacing:-.005em}
.hero-c .hero-meta{margin-top:clamp(18px,3vh,30px)}
.hero-c .hero-facts{display:none}
.hero-c .hero-meta::before{content:'Venta oficial — cupos limitados';font:400 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);align-self:center}
@media (max-width:860px){
  .hero-c{padding-top:90px}
  .hero-c .hero-bg img{object-position:80% 12%;transform-origin:80% 15%}
  .hero-c .hero-bg::after{background:linear-gradient(180deg,#06050580 0%,transparent 14%,transparent 34%,#060505b3 48%,#060505f0 62%,#060505 100%)}
  .hero-c .hero-code{margin:auto 0 16px;text-shadow:0 1px 12px #000}
  .hero-c .hero-code{order:0}
  .hero-c .hero-lede{order:1;margin-top:18px}
  .hero-c .display{order:0;white-space:normal;font-size:21.5vw;line-height:.82;margin:0}
  .hero-c .hero-meta::before{display:none}
}
/* Hero D: "titular". El nombre en una sola línea de borde a borde, pegado abajo; encima una franja con los datos y la compra.
   Se activa con "estiloHero": "d" en evento.config.json, o para probar con ?hero=d en la dirección. */
.hero-d{display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto auto auto;align-items:end;padding:110px 0 0}
.hero-d .hero-bg img{object-position:66% 20%;transform-origin:66% 22%}
.hero-d .hero-bg::after{background:
  linear-gradient(90deg,#060505cc 0%,#06050580 26%,transparent 52%),
  linear-gradient(180deg,#06050599 0%,transparent 16%,transparent 52%,#060505d9 72%,#060505 86%)}
.hero-d .hero-inner{display:contents}
.hero-d .hero-code{grid-area:1/1/2/2;margin:0 0 20px;padding:0 var(--gutter)}
.hero-d .hero-lede{grid-area:2/1/3/2;margin:0 0 clamp(26px,5vh,48px);padding:0 var(--gutter);max-width:calc(420px + 2 * var(--gutter));font-size:clamp(17px,1.5vw,22px);line-height:1.4;color:var(--bone)}
.hero-d .hero-meta{grid-area:3/1/4/2;margin:0;padding:18px 0 18px var(--gutter);border-top:1px solid var(--line);align-items:center}
.hero-d .hero-cta{grid-area:3/2/4/3;margin:0;padding:18px var(--gutter) 18px 0;border-top:1px solid var(--line);align-self:stretch;align-items:center}
.hero-d .hero-cta .btn-line{display:none}
.hero-d .hero-facts{gap:clamp(22px,3.4vw,56px)}
.hero-d .hero-facts b{font-size:clamp(18px,1.6vw,24px);margin-top:6px}
.hero-d .countdown{margin-right:clamp(10px,2vw,36px)}
.hero-d .countdown b{font-size:clamp(20px,1.8vw,26px)}
.hero-d .countdown div{min-width:46px}
.hero-d .display{grid-area:4/1/5/3;justify-self:center;margin:0;padding:.08em 0 max(.1em,1.2vw);font-size:16.6vw;line-height:.84;white-space:nowrap;letter-spacing:-.005em}
@media (max-width:860px){
  .hero-d{grid-template-columns:1fr;grid-template-rows:1fr auto auto auto auto;padding-top:90px}
  .hero-d .hero-bg img{object-position:80% 12%;transform-origin:80% 15%}
  .hero-d .hero-bg::after{background:linear-gradient(180deg,#06050580 0%,transparent 14%,transparent 36%,#060505b3 50%,#060505f0 62%,#060505 100%)}
  .hero-d .hero-code{text-shadow:0 1px 12px #000}
  .hero-d .hero-lede{margin-bottom:24px}
  .hero-d .hero-meta{grid-area:3/1/4/2;padding:18px var(--gutter);justify-content:flex-start;text-align:left}
  .hero-d .hero-facts{justify-content:flex-start}
  .hero-d .countdown{width:auto;justify-content:flex-start;margin:0}
  .hero-d .hero-cta{grid-area:4/1/5/2;padding:0 var(--gutter) 22px;border-top:0}
  .hero-d .hero-cta .btn{flex:1;justify-content:center}
  .hero-d .display{grid-area:5/1/6/2}
}
@media (max-width:640px){.hero-meta{justify-content:center;text-align:center}.hero-facts{justify-content:center}.countdown{width:100%;justify-content:center}}

/* Entrada del hero */
.js .hero-code,.js .hero .display,.js .hero-lede,.js .hero-cta,.js .hero-meta{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .hero.on .hero-code,.js .hero.on .display,.js .hero.on .hero-lede,.js .hero.on .hero-cta,.js .hero.on .hero-meta{opacity:1;transform:none}
.js .hero.on .display{transition-delay:.12s}.js .hero.on .hero-lede{transition-delay:.3s}.js .hero.on .hero-cta{transition-delay:.42s}.js .hero.on .hero-meta{transition-delay:.55s}

/* Aparición al hacer scroll */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}

/* Marquee */
@keyframes marquee{to{transform:translateX(-50%)}}
/* Franja debajo del hero: dos cintas cruzadas que se mueven en sentidos opuestos. */
.cintas{position:relative;height:clamp(170px,17vw,260px);overflow:hidden;background:var(--bg);display:grid;place-items:center}
.cinta{position:absolute;left:-5%;right:-5%;white-space:nowrap;overflow:hidden}
.cinta-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.cinta-track>div{display:flex;align-items:center}
.cinta span{padding:0 .55em;font:400 clamp(30px,3.6vw,58px)/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.cinta i{flex:none;width:clamp(10px,1vw,15px);height:clamp(10px,1vw,15px);border-radius:50%}
.cinta-1{z-index:1;transform:rotate(-3.4deg) skewX(var(--sk,0deg));background:var(--bone);color:var(--bg);padding:clamp(12px,1.2vw,18px) 0;box-shadow:0 18px 40px -12px #000}
.cinta-1 i{background:var(--bg)}
.cinta-2{transform:rotate(3.4deg) skewX(calc(var(--sk,0deg) * -1));background:#141212;border-block:1px solid var(--line);padding:clamp(10px,1vw,15px) 0}
.cinta-2 .cinta-track{animation-direction:reverse;animation-duration:52s}
.cinta-2 span{color:transparent;-webkit-text-stroke:1px #ece7dbbf}
.cinta-2 i{width:clamp(8px,.8vw,12px);height:clamp(8px,.8vw,12px);border:1px solid #ece7dbbf}

/* Secciones */
.section{padding:clamp(90px,11vw,170px) var(--gutter)}
.section-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:clamp(40px,5vw,70px)}
@media (max-width:860px){.section-head{grid-template-columns:1fr}}
.paper{background:var(--paper);color:var(--paper-ink);position:relative}
.paper::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:.35;mix-blend-mode:multiply}
.paper>*{position:relative}

/* Localidades */
.tiers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:t}
.tier{position:relative;display:grid;grid-template-columns:56px minmax(0,1.3fr) minmax(0,1fr) auto auto;align-items:center;gap:clamp(16px,2.4vw,36px);padding:30px 14px;margin:0 -14px;border-bottom:1px solid var(--line);isolation:isolate;counter-increment:t}
.tier::before{content:'';position:absolute;inset:0;background:#ece7db08;transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease);z-index:-1}
.tier:hover::before{transform:scaleY(1)}
.tier-dot{font:400 11px var(--mono);letter-spacing:.2em;color:var(--mute2);display:flex;align-items:center;gap:10px}
.tier-dot::before{content:counter(t,decimal-leading-zero)}
.tier-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--c,var(--bone))}
.tier strong{display:block;font:400 clamp(38px,4.6vw,72px)/.9 var(--display);text-transform:uppercase;color:var(--bone);letter-spacing:.01em}
.tier ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font:400 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--mute)}
.tier ul li::before{content:'/ ';color:var(--mute2)}
.tier-price{font:400 clamp(28px,2.8vw,44px)/1 var(--display);color:var(--bone);white-space:nowrap;letter-spacing:.02em}
.tier-price small{display:block;font:400 9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute2);margin-top:8px}
.tier-stock{font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line);white-space:nowrap;color:var(--mute)}
.tier-stock.low{border-color:var(--acc);color:var(--acc)}
.tier-stock.out{border-color:transparent;color:var(--mute2);text-decoration:line-through}
.stepper{display:inline-flex;align-items:center;border:1px solid #ece7db59}
.stepper button{width:46px;height:46px;background:none;border:0;font:400 20px var(--body);color:var(--bone);transition:background .25s,color .25s}
.stepper button:hover{background:var(--bone);color:var(--bg)}
.stepper button[disabled]{opacity:.22;pointer-events:none}
.stepper output{min-width:42px;text-align:center;font:400 24px var(--display)}
.tier.sold-out{opacity:.4}
@media (max-width:860px){
  .tier{grid-template-columns:40px 1fr auto;grid-template-areas:"dot name name" ". price stock" ". qty qty";row-gap:16px}
  .tier-dot{grid-area:dot;align-self:start;margin-top:8px}.tier-name{grid-area:name}.tier-price{grid-area:price}.tier-stock{grid-area:stock;justify-self:end}.stepper{grid-area:qty;justify-self:start}
  .tier-dot::after{display:none}
}

.tier-cupo,.tier-perf,.tier-mapa{display:none}

/* Boletas B: mapa 3D fijo a la izquierda y las localidades como tickets a la derecha.
   Se activa con "estiloBoletas": "b" en evento.config.json, o para probar con ?boletas=b en la dirección. */
.boletas-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);column-gap:clamp(20px,2.4vw,36px);align-items:start}
.boletas-b .section-head{grid-column:1/-1}
.boletas-b .s3d{position:sticky;top:96px;height:calc(100vh - 130px);max-height:760px;margin:0}
.boletas-b .tiers{display:flex;flex-direction:column;gap:14px;border:0}
.boletas-b .tier{grid-template-columns:1fr auto;grid-template-areas:"dot price" "name name" "cupo cupo" "perf perf" "mapa qty";align-items:center;gap:16px 14px;margin:0;padding:22px 22px 18px;background:#0e0d0d;border:1px solid var(--line);border-left:3px solid var(--c,var(--bone));transition:border-color .3s,transform .4s var(--ease)}
.boletas-b .tier::before{display:none}
.boletas-b .tier:hover{border-color:#ece7db47;border-left-color:var(--c,var(--bone));transform:translateX(-4px)}
.boletas-b .tier.on{border-color:var(--bone);border-left-color:var(--c,var(--bone))}
.boletas-b .tier-dot{grid-area:dot}
.boletas-b .tier-dot::after{display:block}
.boletas-b .tier-price{grid-area:price;text-align:right;font-size:clamp(24px,2vw,30px)}
.boletas-b .tier-price small{margin-top:6px}
.boletas-b .tier-name{grid-area:name}
.boletas-b .tier strong{font-size:clamp(40px,3.6vw,54px)}
.boletas-b .tier ul{gap:4px 16px}
.boletas-b .tier-seats{margin:10px 0 0;font:400 10px/1.5 var(--mono);letter-spacing:.06em;color:var(--mute2)}
.boletas-b .tier-seats b{color:var(--bone);font-weight:400}
.boletas-b .tier-cupo{grid-area:cupo;display:flex;flex-direction:column;gap:8px}
.boletas-b .tier-cupo i{display:block;height:2px;background:var(--line);overflow:hidden}
.boletas-b .tier-cupo b{display:block;height:100%;background:var(--c,var(--bone))}
.boletas-b .tier-cupo small{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.boletas-b .tier-stock{display:none}
.boletas-b .tier-cupo.low small{color:var(--acc)}
.boletas-b .tier-perf{grid-area:perf;display:block;position:relative;height:0;margin:4px -22px;border-top:1px dashed #ece7db33}
.boletas-b .tier-perf::before,.boletas-b .tier-perf::after{content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.boletas-b .tier-perf::before{left:-12px}.boletas-b .tier-perf::after{right:-10px}
.boletas-b .tier-mapa{grid-area:mapa;justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:6px 0;background:none;border:0;border-bottom:1px solid #ece7db40;color:var(--mute);font:400 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s}
.boletas-b .tier-mapa span{font-family:var(--body);font-size:12px}
.boletas-b .tier-mapa:hover{color:var(--bone);border-color:var(--bone)}
.boletas-b .stepper{grid-area:qty}
.boletas-b .stepper button{width:40px;height:40px}
.boletas-b .stepper output{min-width:34px;font-size:20px}
@media (max-width:1000px){
  .boletas-b{display:block}
  .boletas-b .s3d{position:relative;top:auto;height:76svh;max-height:none;margin-bottom:28px}
  .boletas-b .tier-dot::after{display:block}
  .boletas-b .tier{grid-template-columns:1fr auto;grid-template-areas:"dot price" "name name" "cupo cupo" "perf perf" "mapa qty";row-gap:16px}
  .boletas-b .stepper{justify-self:end}
  .boletas-b .tier-dot{margin-top:0;align-self:center}
}

/* Boletas C (taquilla): localidades lado a lado como boletas grandes; el mapa 3D plegado debajo. */
.boletas-c .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.6vw,22px);border:0;counter-reset:t}
.boletas-c .tier{grid-template-columns:1fr auto;grid-template-areas:"dot stock" "name name" "cupo cupo" "perf perf" "price qty" "mapa mapa";align-content:start;gap:18px 14px;margin:0;padding:24px 24px 20px;background:#0e0d0d;border:1px solid var(--line);border-top:4px solid var(--c,var(--bone));transition:border-color .3s,transform .4s var(--ease),background .3s}
.boletas-c .tier::before{display:none}
.boletas-c .tier:hover{transform:translateY(-4px);border-color:#ece7db47;border-top-color:var(--c,var(--bone))}
.boletas-c .tier.on{background:#141211;border-color:var(--bone);border-top-color:var(--c,var(--bone))}
.boletas-c .tier.sold-out:hover{transform:none}
.boletas-c .tier-dot{grid-area:dot;margin:0}
.boletas-c .tier-dot::after{display:block}
.boletas-c .tier-stock{grid-area:stock;justify-self:end;padding:7px 10px}
.boletas-c .tier-name{grid-area:name;min-height:7.2em}
.boletas-c .tier strong{font-size:clamp(56px,6vw,88px)}
.boletas-c .tier ul{flex-direction:column;gap:4px}
.boletas-c .tier-seats{font-size:10px;letter-spacing:.06em}
.boletas-c .tier-cupo{grid-area:cupo;display:flex;flex-direction:column;gap:8px}
.boletas-c .tier-cupo i{display:block;height:2px;background:var(--line);overflow:hidden}
.boletas-c .tier-cupo b{display:block;height:100%;background:var(--c,var(--bone))}
.boletas-c .tier-cupo small{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.boletas-c .tier-cupo.low small{color:var(--acc)}
.boletas-c .tier-perf{grid-area:perf;display:block;position:relative;height:0;margin:4px -24px;border-top:1px dashed #ece7db33}
.boletas-c .tier-perf::before,.boletas-c .tier-perf::after{content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.boletas-c .tier-perf::before{left:-10px}.boletas-c .tier-perf::after{right:-10px}
.boletas-c .tier-price{grid-area:price;font-size:clamp(30px,2.6vw,40px)}
.boletas-c .stepper{grid-area:qty;justify-self:end}
.boletas-c .stepper button{width:42px;height:42px}
.boletas-c .stepper output{min-width:36px;font-size:22px}
.boletas-c .tier-mapa{grid-area:mapa;justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:6px 0;background:none;border:0;border-bottom:1px solid #ece7db40;color:var(--mute);font:400 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s}
.boletas-c .tier-mapa span{font-family:var(--body);font-size:12px}
.boletas-c .tier-mapa:hover{color:var(--bone);border-color:var(--bone)}
.boletas-c:not(:has(.s3d)) .tier-mapa{display:none}
.s3d-abrir{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin:clamp(20px,2.4vw,32px) 0 0;padding:22px 24px;background:none;border:1px solid var(--line);color:var(--bone);text-align:left;cursor:pointer;transition:background .3s,border-color .3s}
.s3d-abrir:hover{background:#ece7db08;border-color:#ece7db47}
.s3d-abrir b{display:block;font:400 clamp(24px,2.4vw,34px)/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.s3d-abrir small{display:block;margin-top:8px;font:400 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--mute)}
.s3d-abrir i{flex:none;font-style:normal;font-size:22px;transition:transform .4s var(--ease)}
.s3d-abrir[aria-expanded="true"]{border-bottom-color:transparent}
.s3d-abrir[aria-expanded="true"] i{transform:rotate(180deg)}
.boletas-c .s3d{margin:0;border-top:0}
@media (max-width:860px){
  .boletas-c .tier{grid-template-areas:"dot stock" "name name" "cupo cupo" "perf perf" "price qty" "mapa mapa";row-gap:16px}
  .boletas-c .tier-name{min-height:0}
  .boletas-c .tier-dot{align-self:center}
  .boletas-c .s3d{height:76svh}
}

/* Boletas D (pases): pases de acceso en abanico + plano de la discoteca para elegir sillas. */
.boletas-d .tiers{display:none}
.boletas-d .s3d{margin:0}
.boletas-d [data-s3d=full]{display:none}
.pases{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:start}
.pases-izq{position:sticky;top:90px}
.pases-mazo{position:relative;height:clamp(520px,64vh,640px);perspective:1500px;outline:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pases-mazo::before{content:'';position:absolute;left:10%;right:10%;bottom:2%;height:18%;background:radial-gradient(closest-side,#ece7db1f,transparent);filter:blur(20px);pointer-events:none}
.pase{--w:clamp(250px,24vw,330px);position:absolute;left:50%;top:48%;width:var(--w);aspect-ratio:5/8;transform-style:preserve-3d;cursor:pointer;
  transform:translate(-50%,-50%) translateX(calc(var(--off)*64%)) translateZ(calc(var(--abs)*-240px)) rotateY(calc(var(--off)*-24deg + var(--tx,0deg))) rotateX(var(--ty,0deg)) rotateZ(calc(var(--off)*2deg));
  transition:transform .9s var(--ease),opacity .6s,filter .6s}
.pase:not(.activo){filter:brightness(.42) saturate(.6)}
.pase:not(.activo):hover{filter:brightness(.6) saturate(.8)}
.pase.lejos{opacity:0;pointer-events:none}
.pase.activo{cursor:default}
.pase.mira{transition:transform .18s ease-out,opacity .6s,filter .6s}
.pase-cara,.pase-copia{position:absolute;inset:0;border-radius:14px;
  -webkit-mask:radial-gradient(circle at 0 79%,#0000 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 79%,#0000 13px,#000 13.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 79%,#0000 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 79%,#0000 13px,#000 13.5px) right/51% 100% no-repeat}
.pase-cara{overflow:hidden;background:#141110;color:var(--bone);box-shadow:inset 0 0 0 1px #ece7db24}
.pase-copia{background:var(--c);opacity:0;transform:translate(0,0);transition:transform .5s var(--ease),opacity .4s}
.pase-copia::after{content:'';position:absolute;inset:1px;border-radius:13px;background:#1b1716}
.pase-copia.on{opacity:1}
.pase-copia:nth-child(1).on{transform:translate(9px,9px) rotate(1.4deg)}
.pase-copia:nth-child(2).on{transform:translate(18px,16px) rotate(2.8deg)}
.pase-copia:nth-child(3).on{transform:translate(27px,22px) rotate(4.2deg)}
.pase-foto{position:absolute;inset:0;background:#221d1b center/cover;filter:grayscale(1) contrast(1.25) brightness(.8)}
.pase-foto::after{content:'';position:absolute;inset:0;background:var(--c);mix-blend-mode:multiply;opacity:.9}
.pase-cara::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0a0807b0 0%,transparent 26%,transparent 42%,#0a0807e8 66%,#0a0807 100%),var(--noise);pointer-events:none}
.pase-foil{position:absolute;z-index:3;top:0;bottom:21%;right:18px;width:26px;overflow:hidden;display:flex;justify-content:center;
  background:linear-gradient(115deg,#ff5f8a 0%,#ffd36a 18%,#7dffcf 36%,#7c8cff 54%,#ff7ae0 72%,#ffd36a 90%);background-size:300% 300%;background-position:var(--mx,30%) var(--my,30%);opacity:.55;mix-blend-mode:hard-light;transition:opacity .4s}
.pase-foil span{writing-mode:vertical-rl;white-space:nowrap;font:700 8px/26px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#0008}
.pase.mira .pase-foil{opacity:.9}
.pase-brillo{position:absolute;inset:0;z-index:4;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),#ffffff38,transparent 46%);opacity:0;transition:opacity .4s;pointer-events:none}
.pase.mira .pase-brillo{opacity:1}
.pase-top,.pase-num,.pase-nombre,.pase-datos,.pase-talon,.pase-sello{position:absolute;z-index:2}
.pase-top{top:20px;left:20px;right:60px;display:flex;flex-direction:column;gap:6px}
.pase-top b{font:400 19px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.pase-top small{font:400 9px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.pase-num{top:20px;right:56px;text-align:right;font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--bone)}
.pase-num small{display:block;margin-top:6px;font-size:8px;color:var(--mute)}
.pase-nombre{left:16px;right:52px;bottom:37%;font:400 clamp(64px,7vw,104px)/.8 var(--display);text-transform:uppercase;letter-spacing:-.005em;overflow-wrap:anywhere}
.pase-nombre::after{content:'';display:block;width:42px;height:4px;margin-top:14px;background:var(--c)}
.pase-datos{left:20px;right:56px;bottom:24%;display:grid;grid-template-columns:auto auto 1fr;gap:14px;font:400 8px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pase-datos b{display:block;margin-top:6px;font:400 14px/1.05 var(--display);letter-spacing:.04em;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pase-talon{left:0;right:0;bottom:0;height:21%;display:flex;align-items:center;gap:16px;padding:0 22px;border-top:2px dashed #ece7db40;background:#0a0807}
.pase-barras{flex:1;height:44%;color:var(--bone);opacity:.85}
.pase-precio{font:400 24px/1 var(--display);letter-spacing:.03em;white-space:nowrap}
.pase-sello{top:37%;right:22px;padding:8px 12px 6px;border:3px solid var(--acc);border-radius:6px;color:var(--acc);font:400 30px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-12deg) scale(1.6);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;mix-blend-mode:screen;background:#0a080780}
.pase.lleva .pase-sello,.pase.agotado .pase-sello{opacity:1;transform:rotate(-12deg) scale(1)}
.pase.agotado .pase-sello{color:var(--bone);border-color:var(--bone)}
.pase.agotado .pase-foto{filter:grayscale(1) brightness(.4)}
.pase.golpe .pase-cara{animation:golpe .45s var(--ease)}
@keyframes golpe{0%{transform:none}35%{transform:translateY(-14px) rotate(-1.2deg)}70%{transform:translateY(3px)}100%{transform:none}}
.pases-nav{display:flex;align-items:center;gap:10px;margin-top:8px}
.pases-flecha{flex:none;width:46px;height:46px;border:1px solid var(--line);background:none;color:var(--bone);font-size:16px;cursor:pointer;transition:background .3s,color .3s}
.pases-flecha:hover{background:var(--bone);color:var(--bg)}
.pases-tabs{flex:1;display:flex;gap:4px;min-width:0}
.pases-tabs button{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;padding:12px 6px 14px;position:relative;background:none;border:0;color:var(--mute2);font:400 18px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pases-tabs small{font:400 9px var(--mono);letter-spacing:.2em}
.pases-tabs i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.pases-tabs i::after{content:'';position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.pases-tabs button:hover{color:var(--mute)}
.pases-tabs [aria-selected=true]{color:var(--bone)}
.pases-tabs [aria-selected=true] i::after{transform:none}
.pases-panel{--c:var(--bone);min-width:0}
.pases-kick{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font:400 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.pases-kick b{font:400 15px var(--mono);color:var(--bone)}
.pases-kick em{margin-left:auto;font-style:normal;padding:8px 11px;border:1px solid var(--line);color:var(--bone)}
.pases-kick em.low{border-color:var(--acc);color:var(--acc)}
.pases-kick em.out{color:var(--mute2);text-decoration:line-through}
.pases-nombre{margin:0;font:400 clamp(72px,8vw,132px)/.85 var(--display);text-transform:uppercase;color:var(--bone);animation:entra .7s var(--ease)}
.pases-precio{display:flex;align-items:baseline;gap:14px;margin:14px 0 0;font:400 clamp(34px,3.2vw,48px)/1 var(--display);letter-spacing:.02em;color:var(--c);animation:entra .7s .05s var(--ease) backwards}
.pases-precio small{font:400 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
@keyframes entra{from{opacity:0;transform:translateY(18px)}}
.pases-benef{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;animation:entra .7s .1s var(--ease) backwards}
.pases-benef li{padding:8px 12px;border:1px solid var(--line);font:400 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--bone)}
.pases-plano{margin:26px 0 0;padding:14px;border:1px solid var(--line);background:#0b0909}
.pases-plano svg{display:block;width:100%;height:auto;max-height:420px;font-family:var(--mono)}
.pases-plano text{font-size:.82px;letter-spacing:.18em;text-transform:uppercase;text-anchor:middle;fill:currentColor;pointer-events:none}
.pl-sala{fill:#120f0e;stroke:#ece7db24;stroke-width:.08}
.pl-tarima rect{fill:#ece7db12;stroke:#ece7db55;stroke-width:.08}
.pl-tarima{color:#ece7dbaa}
.pl-entrada path{stroke:var(--bone);stroke-width:.25}
.pl-entrada{color:var(--mute2)}
.pl-zona{color:var(--c);cursor:pointer;transition:opacity .3s}
.pl-zona rect{fill-opacity:.14;stroke:currentColor;stroke-opacity:.35;stroke-width:.08;transition:fill-opacity .3s}
.pl-zona:hover rect{fill-opacity:.3}
.pl-zona text{fill:var(--bone);opacity:.6}
.pl-zona.on{cursor:default}
.pl-zona.on rect{fill-opacity:1;stroke-opacity:1;stroke-width:.14}
.pl-zona.on rect[fill="currentColor"]{fill-opacity:.1}
.pl-zona.on text{opacity:1}
.pl-zona.agotada{opacity:.35}
.pl-mesa{fill:#ece7db1f}
.pl-silla{cursor:pointer;outline:none}
.pl-silla circle:not(.pl-toque){fill:var(--c);transition:fill .2s,r .2s}
.pl-toque{fill:transparent}
.pl-silla:hover circle:not(.pl-toque),.pl-silla:focus-visible circle:not(.pl-toque){r:.55}
.pl-silla.mia circle:not(.pl-toque){fill:#fff;stroke:var(--c);stroke-width:.18;r:.5}
.pl-silla.ocupada{cursor:not-allowed}
.pl-silla.ocupada circle:not(.pl-toque){fill:#34343a}
.pases-plano figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font:400 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pases-plano figcaption i{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;vertical-align:-1px}
.pases-plano figcaption .libre{background:var(--c)}.pases-plano figcaption .mia{background:#fff}.pases-plano figcaption .ocupada{background:#34343a}
.pases-plano figcaption b{margin-left:auto;font-weight:400;color:var(--mute2)}
.pases-mias{margin:14px 0 0;font:400 11px/1.6 var(--mono);color:var(--mute)}
.pases-mias b{color:var(--bone);font-weight:400}
.pases-accion{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.pases-accion .stepper button{width:56px;height:56px;font-size:22px}
.pases-accion .stepper output{min-width:52px;font-size:30px}
.pases-sub{margin:0;text-align:right;font:400 9px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.pases-sub b{display:block;margin-top:8px;font:400 26px/1 var(--display);letter-spacing:.03em;color:var(--bone)}
.pases-3d{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:6px 0;background:none;border:0;border-bottom:1px solid #ece7db40;color:var(--mute);font:400 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s}
.pases-3d i{font-style:normal;font-family:var(--body);font-size:12px}
.pases-3d:hover{color:var(--bone);border-color:var(--bone)}
@media (max-width:960px){
  .pases{grid-template-columns:1fr;gap:28px}
  .pases-izq{position:relative;top:auto}
  .pases-mazo{height:clamp(440px,118vw,560px)}
  .pase{--w:min(68vw,300px)}
  .pase{transform:translate(-50%,-50%) translateX(calc(var(--off)*78%)) translateZ(calc(var(--abs)*-200px)) rotateY(calc(var(--off)*-20deg)) rotateZ(calc(var(--off)*2deg))}
  .pases-tabs button{justify-content:center;font-size:16px}
  .pases-tabs small{display:none}
  .pases-plano{padding:10px}
  .pases-plano figcaption b{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.pase,.pase-copia,.pase-sello{transition:none}.pases-nombre,.pases-precio,.pases-benef{animation:none}}

/* Tira de fotos */
.strip{overflow:hidden;padding:20px 0 70px;background:var(--bg);border-top:1px solid var(--line)}
.strip-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip figure{position:relative;margin:0 clamp(14px,2vw,26px);flex:none;transform:rotate(var(--r)) translateY(var(--y))}
.strip figure::before,.strip figure::after{content:'';position:absolute;top:-8px;z-index:1;width:46px;height:16px;background:#ece7db26;backdrop-filter:blur(2px)}
.strip figure::before{left:-12px;transform:rotate(-38deg)}
.strip figure::after{right:-12px;transform:rotate(38deg)}
.strip img{height:clamp(170px,19vw,250px);width:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid #ece7db33;filter:grayscale(1) contrast(1.08) brightness(.9);transition:filter .6s}
.strip figure:hover img{filter:grayscale(0) contrast(1.02)}

/* Carrito fijo */
.cart{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#060505f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #ece7db40;padding:16px var(--gutter);display:flex;align-items:center;gap:24px;transform:translateY(110%);transition:transform .5s var(--ease)}
.cart.on{transform:none}
.cart-sum{font:400 10px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.cart-sum b{display:block;font:400 30px/1 var(--display);letter-spacing:.02em;color:var(--bone);margin-top:4px}
.cart .btn{margin-left:auto}

/* Panel de compra */
.drawer{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:1fr min(560px,100%);visibility:hidden}
.drawer.on{visibility:visible}
.drawer-shade{background:#000c;opacity:0;transition:opacity .4s}
.drawer.on .drawer-shade{opacity:1}
.drawer-panel{background:var(--paper);color:var(--paper-ink);overflow:auto;padding:34px clamp(22px,3vw,40px) 40px;transform:translateX(100%);transition:transform .55s var(--ease)}
.drawer.on .drawer-panel{transform:none}
.drawer-close{float:right;background:none;border:1px solid var(--paper-ink);width:44px;height:44px;font:400 22px var(--body);color:var(--paper-ink)}
.drawer-close:hover{background:var(--paper-ink);color:var(--bone)}
.summary{border-top:1px solid var(--paper-ink);margin:24px 0}
.summary div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #0e0c0b26;font-size:15px}
.summary .total{font:400 30px/1 var(--display);border-bottom:1px solid var(--paper-ink);padding:18px 0}
.field{display:block;margin-bottom:16px}
.field span{display:block;font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;color:#0e0c0bb3}
.field input,.field select{width:100%;padding:14px;border:1px solid #0e0c0b59;background:#f6f3ec;color:var(--paper-ink);border-radius:0;font-size:16px;transition:border-color .25s}
.field input:focus{outline:none;border-color:var(--paper-ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13px;margin:6px 0 22px}
.check input{width:20px;height:20px;accent-color:var(--paper-ink);flex:none;margin-top:1px}
.check a{text-decoration:underline}
.alert{padding:14px 16px;border-left:3px solid var(--acc);background:#ece7db14;font-size:14px;margin:0 0 18px}
.alert.ok{border-color:var(--paper-ink);background:#0e0c0b0d}
.forma-pago{border:0;padding:0;margin:4px 0 18px}
.forma-pago legend{font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;color:#0e0c0bb3;padding:0}
.fp-op{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid #0e0c0b40;cursor:pointer;transition:border-color .25s,background .25s}
.fp-op + .fp-op{margin-top:-1px}
.fp-op:has(input:checked){border-color:var(--paper-ink);background:#0e0c0b0d;position:relative}
.fp-op input{width:18px;height:18px;accent-color:var(--paper-ink);flex:none;margin-top:2px}
.fp-op b{display:block;font-size:15px}
.fp-op small{display:block;font-size:12.5px;color:#0e0c0bb3;margin-top:2px;line-height:1.45}
.pay-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pay-logos span{font:400 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:7px 9px;border:1px solid #0e0c0b40}

/* Info + FAQ */
.evento{border-top:1px solid var(--line);overflow:hidden}
.evento-top{padding:clamp(70px,8vw,120px) var(--gutter) 0}
.evento-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 40px;font-size:16px;font-weight:600}
.evento-meta p{margin:0}
.evento-meta-r{color:var(--mute)}
.evento-fecha{margin:10px 0 0;font:400 clamp(150px,30vw,460px)/.82 var(--display);letter-spacing:-.02em;text-align:center;color:transparent;
  background:url(/assets/hero-concierto.jpg) center 30%/cover;-webkit-background-clip:text;background-clip:text;filter:grayscale(1) contrast(1.4) brightness(1.15)}
.evento-cuerpo{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px);padding:clamp(48px,6vw,90px) var(--gutter) clamp(70px,8vw,120px)}
.evento-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1px solid var(--bone);border-left:1px solid var(--line)}
.evento-datos>div{display:flex;flex-direction:column;gap:10px;padding:28px 26px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.evento-datos span{font-size:15px;font-weight:600;color:var(--mute)}
.evento-datos b{font:400 clamp(48px,5vw,72px)/.9 var(--display);text-transform:uppercase}
.evento-datos .evento-lugar{font-size:clamp(34px,3.2vw,46px);line-height:1}
.evento-datos .evento-acc{color:var(--acc)}
.evento-datos small{font-size:16px;color:var(--mute)}
.evento-datos a{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-weight:600;border-bottom:1px solid currentColor;transition:color .3s}
.evento-datos a:hover{color:var(--acc)}
.evento-datos .evento-dato-hueso{background:var(--bone);color:var(--paper-ink)}
.evento-dato-hueso span,.evento-dato-hueso small{color:#0e0c0bcc}
.evento-fila{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center}
.evento-foto{flex:1 1 420px;min-width:0;margin:0;position:relative;height:clamp(300px,34vw,480px);overflow:hidden;background:var(--char)}
.evento-foto img{width:100%;height:100%;object-fit:cover;object-position:78% 20%;filter:grayscale(1) contrast(1.2)}
.evento-foto figcaption{position:absolute;left:0;bottom:0;background:var(--bg);padding:10px 16px 6px;font:400 clamp(28px,3vw,44px)/1 var(--display);text-transform:uppercase}
.evento-pasos{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.evento-pasos h3{margin:0;font:400 clamp(36px,3.8vw,56px)/.95 var(--display);text-transform:uppercase}
.evento-pasos ol{list-style:none;margin:0;padding:0;align-self:stretch;border-top:1px solid var(--line)}
.evento-pasos li{display:flex;gap:22px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);color:var(--mute)}
.evento-pasos li i{flex:0 0 48px;font:400 40px/1 var(--display);font-style:normal;color:var(--acc)}
.evento-pasos li b{font:400 24px/1 var(--display);text-transform:uppercase;color:var(--bone);margin-right:10px}
.setlist{border-top:1px solid var(--line);padding:clamp(80px,9vw,140px) var(--gutter);overflow:hidden}
.setlist-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin-bottom:clamp(40px,5vw,70px)}
.setlist-head>p{margin:0;max-width:380px;color:var(--mute)}
.setlist .display .setlist-acc{color:var(--acc)}
.setlist-cuerpo{display:flex;flex-wrap:wrap;gap:48px clamp(32px,4vw,72px);align-items:flex-start}
.setlist-hoja{flex:999 1 560px;min-width:0;position:relative;transform:rotate(-1.2deg);background:var(--bone);color:var(--paper-ink);padding:clamp(22px,3vw,40px);box-shadow:0 40px 70px -24px #000}
.setlist-hoja::before{content:'';position:absolute;top:-14px;left:50%;width:140px;height:32px;margin-left:-70px;background:#2a2725;opacity:.92;transform:rotate(-3deg)}
.setlist-tope{display:flex;justify-content:space-between;gap:12px;border-bottom:3px solid var(--paper-ink);padding-bottom:10px;margin-bottom:6px;font:400 26px/1.1 var(--display);text-transform:uppercase}
.setlist-hoja ol{list-style:none;margin:0;padding:0}
.setlist-hoja li{border-bottom:1px solid #0e0c0b26}
.setlist-hoja button{width:100%;min-height:56px;display:flex;align-items:center;gap:18px;padding:10px 0;background:none;border:0;color:var(--paper-ink);text-align:left}
.setlist-hoja button i{flex:0 0 44px;font:400 26px/1 var(--display);font-style:normal;color:#0e0c0b80}
.setlist-hoja button span{flex:1;font:400 clamp(22px,2.2vw,32px)/1.05 var(--display);text-transform:uppercase;transition:color .25s;text-decoration:underline 4px transparent;text-underline-offset:4px}
.setlist-hoja button b{flex:none;font-size:22px;font-weight:400;color:var(--acc);opacity:0}
.setlist-hoja button:hover span{color:var(--acc)}
.setlist-hoja button[aria-pressed="true"] i{color:var(--acc)}
.setlist-hoja button[aria-pressed="true"] span{text-decoration-color:var(--acc)}
.setlist-hoja button[aria-pressed="true"] b{opacity:1}
.setlist-resp{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:22px;padding-top:8px;scroll-margin-top:100px}
.setlist-grande{margin:0;font:400 clamp(110px,12vw,180px)/.8 var(--display);color:var(--acc)}
.setlist-resp h3{margin:0;font:400 clamp(32px,3vw,44px)/1 var(--display);text-transform:uppercase}
.setlist-r{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.7;color:#ece7dbd9}
.setlist-resp.cambia .setlist-grande,.setlist-resp.cambia h3,.setlist-resp.cambia .setlist-r{animation:setlist-in .5s var(--ease)}
@keyframes setlist-in{from{opacity:0;transform:translateY(12px)}}
.setlist-nav{display:flex;gap:10px;margin-top:6px}
.setlist-prev{width:52px;height:52px;flex:none;border:1px solid #ece7db66;background:none;color:var(--bone);font-size:20px;transition:background .3s,color .3s}
.setlist-prev:hover{background:var(--bone);color:var(--bg)}
.setlist-pie{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--mute)}
.setlist-pie a{color:var(--bone);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.setlist-resp.cambia *{animation:none}}
.two-col{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px)}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
#recuperar{border-top:1px solid var(--line)}
.recover{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.recover input{flex:1 1 200px;padding:16px;border:1px solid #ece7db4d;background:transparent;color:var(--bone);border-radius:0;transition:border-color .25s}
.recover input:focus{outline:none;border-color:var(--bone)}
.recover input::placeholder{color:var(--mute2)}

/* Pie */
.foot{padding:clamp(56px,6vw,90px) var(--gutter) 34px;background:var(--bg);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.foot-name{grid-column:1/-1;font-size:clamp(64px,13vw,240px);line-height:.85;text-align:center}
.foot-cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line);padding-top:34px}
.foot-cols p{font:400 10px var(--mono);letter-spacing:.28em;text-transform:uppercase;margin:0 0 18px;color:var(--mute2)}
.foot-cols a,.foot-cols span{display:block;margin-bottom:10px;color:var(--mute);transition:color .3s}
.foot-cols a:hover{color:var(--bone)}
.foot-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute2)}
.foot-bottom a:hover{color:var(--bone)}
@media (max-width:760px){.foot-cols{grid-template-columns:1fr 1fr}}

/* Boletas */
.page{min-height:100svh;padding:120px var(--gutter) 80px;max-width:1100px;margin:0 auto}
.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:40px}
.ticket{background:var(--paper);color:var(--paper-ink);position:relative;display:flex;flex-direction:column}
.ticket-top{padding:22px 22px 18px;border-bottom:1px dashed #0e0c0b66;position:relative}
.ticket-top::before,.ticket-top::after{content:'';position:absolute;bottom:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
.ticket-top::before{left:-11px}.ticket-top::after{right:-11px}
.ticket-loc{font:400 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#0e0c0b99}
.tier-seats{margin:10px 0 0;font:400 11px/1.5 var(--mono);color:var(--mute2)}
.tier-seats b{color:var(--bone);font-weight:400}
.summary small{display:block;font-size:11px;color:#0e0c0b99;margin-top:2px}
.aviso{position:fixed;left:50%;top:84px;z-index:200;transform:translate(-50%,-20px);opacity:0;pointer-events:none;max-width:min(520px,calc(100% - 24px));padding:14px 18px;background:var(--bone);color:var(--bg);border-left:3px solid var(--bg);font-size:14px;font-weight:500;box-shadow:0 14px 40px #0008;transition:.3s}
.aviso.on{opacity:1;transform:translate(-50%,0)}
.ticket-seat{font:400 22px/1 var(--display);text-transform:uppercase;margin-top:6px}
.ticket-name{font:400 34px/.95 var(--display);text-transform:uppercase;margin:8px 0}
.ticket-qr{padding:18px;display:grid;place-items:center}
.ticket-qr img{width:min(240px,100%);image-rendering:pixelated}
.ticket-code{text-align:center;font:700 18px/1 var(--mono);letter-spacing:.2em;padding:0 0 20px}
.ticket.used .ticket-qr{opacity:.25}
.ticket.used::after{content:'Usada';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);font:400 64px var(--display);text-transform:uppercase;color:var(--acc);border:3px solid var(--acc);padding:0 16px}
@media print{.grain,.bar,.no-print{display:none!important}body{background:#fff}.ticket{break-inside:avoid;border:1px solid #000}}

.spinner{width:38px;height:38px;border:1px solid #ece7db33;border-top-color:var(--bone);border-radius:50%;animation:spin 1s linear infinite;margin:30px 0}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-flag{position:fixed;left:0;right:0;top:72px;z-index:99;background:var(--bone);color:var(--bg);text-align:center;font:400 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none!important}
}

/* ---------- Escenario 3D ---------- */
.s3d{position:relative;height:min(78vh,720px);min-height:460px;margin:0 0 clamp(40px,5vw,70px);background:#080707;border:1px solid var(--line);overflow:hidden;isolation:isolate;user-select:none;-webkit-user-select:none}
.s3d.full{position:fixed;inset:0;height:100%;z-index:130;margin:0;border:0}
.s3d-canvas,.s3d-canvas canvas,.s3d-labels{position:absolute;inset:0;width:100%;height:100%}
.s3d-canvas canvas{touch-action:none;display:block}
.s3d-labels{pointer-events:none;z-index:1}
.s3d-top,.s3d-card,.s3d-tip{z-index:2}
.s3d-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:0;font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:opacity .5s}
.s3d.ready .s3d-loading{opacity:0;pointer-events:none}

.s3d-tag{pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;background:#060505cc;border:1px solid var(--c,#fff);border-left-width:3px;backdrop-filter:blur(6px);white-space:nowrap;transition:transform .2s,background .2s}
.s3d-tag b{font:400 17px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.s3d-tag span{font:400 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c,#fff)}
.s3d-tag-zone:hover,.s3d-tag-zone.on{background:var(--c);transform:scale(1.06)}
.s3d-tag-zone:hover b,.s3d-tag-zone.on b,.s3d-tag-zone:hover span,.s3d-tag-zone.on span{color:#060505}
.s3d-tag-zone.sold{border-color:#555;opacity:.7}
.s3d-tag-zone.sold span{color:var(--mute)}
.s3d-tag-stage,.s3d-tag-misc{pointer-events:none;background:none;border:0;padding:0}
.s3d-tag-stage b{font-size:14px;letter-spacing:.3em;color:#ffffffcc}
.s3d-tag-misc b{font:400 9px var(--mono);letter-spacing:.22em;color:#ffffff99}
.s3d.pov .s3d-tag{opacity:.55;pointer-events:none}
.s3d-tag.hide{display:none}
.s3d-tag-mesa{display:none;pointer-events:none;padding:2px 6px;border-width:1px;border-left-width:1px}
.s3d-tag-mesa.show{display:flex}
.s3d-tag-mesa b{font-size:12px}
.s3d-seat-help,.s3d-seat-now{font-size:13px;margin:0 0 10px}
.s3d-seats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.s3d-seats span{display:inline-flex;border:1px solid var(--paper-ink)}
.s3d-seats button{background:none;border:0;padding:7px 8px;font:400 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-ink)}
.s3d-seats button:first-child{background:var(--c);color:#060505}
.s3d-seats button:hover{background:var(--paper-ink);color:var(--paper)}
.s3d-seat-key{display:flex;gap:12px;align-items:center;margin:0 0 12px;font:400 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#5d5d5d}
.s3d-seat-key i{display:inline-block;width:10px;height:10px;margin-right:-6px;border:1px solid #2323234d}
.s3d-seat-key .libre{background:var(--c)}.s3d-seat-key .mia{background:#fff}.s3d-seat-key .ocupada{background:#34343a}
.s3d.pov .s3d-tag-stage,.s3d.pov .s3d-tag-misc{display:none}

.s3d-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
.s3d-legend,.s3d-tools{display:flex;flex-wrap:wrap;gap:6px;pointer-events:auto}
.s3d-legend button,.s3d-tools button{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;background:#060505cc;border:1px solid #ffffff33;backdrop-filter:blur(6px);font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.s3d-legend button i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:none}
.s3d-legend button.on{background:var(--c);border-color:var(--c);color:#060505}
.s3d-legend button.on i{background:#060505;box-shadow:none}
.s3d-legend button.sold{opacity:.5}
.s3d-tools button:hover,.s3d-legend button:hover{border-color:#fff}

.s3d-card{position:absolute;left:14px;top:64px;width:min(340px,calc(100% - 28px));max-height:calc(100% - 78px);overflow:auto;padding:20px;background:var(--paper);color:var(--paper-ink);border-top:4px solid var(--c);box-shadow:0 20px 50px #0008}
.s3d-card-k{font:400 9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#5d5d5d}
.s3d-card strong{display:block;font:400 44px/.95 var(--display);text-transform:uppercase;margin:4px 0 6px}
.s3d-card-price{font:400 28px/1 var(--display)}
.s3d-card-price small{font:400 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#5d5d5d}
.s3d-card-stock{display:inline-block;margin:10px 0 2px;font:400 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:6px 8px;border:1px solid #23232366}
.s3d-card-stock.low{border-color:var(--rose);color:var(--rose)}
.s3d-card-stock.out{background:#2323231a;border-color:transparent;color:#777}
.s3d-card ul{list-style:none;margin:10px 0 14px;padding:0;font-size:13px}
.s3d-card ul li::before{content:'— ';color:var(--rose)}
.s3d-card-row{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.s3d-card .stepper{border-color:var(--paper-ink)}
.s3d-card .stepper button{width:40px;height:44px;color:var(--paper-ink)}
.s3d-card .stepper button:hover{background:var(--paper-ink);color:var(--paper)}
.s3d-card .stepper output{min-width:34px;font-size:22px}
.s3d-pov{flex:1;padding:12px;gap:10px;color:var(--paper-ink)}
.s3d-pov:hover{background:var(--paper-ink);color:var(--bone)}
.s3d-x{position:absolute;top:10px;right:10px;width:32px;height:32px;background:none;border:1px solid #23232366;font:400 18px var(--display);color:var(--paper-ink)}
.s3d-tip{position:absolute;left:0;top:0;pointer-events:none;padding:8px 10px;background:#060505ee;border:1px solid #ffffff33;font-size:12px;line-height:1.4;color:#fff;white-space:nowrap}
.s3d-tip small{color:var(--mute)}
.s3d-hint{position:absolute;right:14px;bottom:10px;margin:0;font:400 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#ffffff88;pointer-events:none}
.s3d-hint-pov,.s3d.pov .s3d-hint-map{display:none}
.s3d.pov .s3d-hint-pov{display:inline}
@media (max-width:860px){
  .s3d{height:76svh;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);border-inline:0}
  .s3d-tools span{display:none}
  .s3d-top{flex-direction:column-reverse;align-items:stretch}
  .s3d-tools{align-self:flex-end}
  .s3d{height:calc(100svh - 170px);min-height:440px}
  .s3d-card{left:8px;right:8px;top:auto;bottom:8px;width:auto;padding:12px 14px;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:end}
  .s3d-card-k,.s3d-card-stock,.s3d-card ul,.s3d-card-price small{display:none}
  .s3d-card strong{font-size:28px;margin:0;grid-column:1}
  .s3d-card-price{font-size:22px;grid-column:1}
  .s3d-card-row{grid-column:1/-1;margin:10px 0 0}
  .s3d-seat-help,.s3d-seat-now,.s3d-seats,.s3d-seat-key{grid-column:1/-1;margin:8px 0 0}
  .s3d-seat-help{font-size:12px}
  .s3d-card .btn-rose{grid-column:1/-1;padding:13px;margin-top:6px}
  .s3d:not(.full) .s3d-card .btn-rose{display:none}
  .s3d-pov{font-size:9px}
  .s3d-hint{display:none}
}

/* Fuera de pantalla completa, deslizar el dedo hacia arriba o abajo mueve la página; hacia los lados gira el escenario. */
.s3d:not(.full) .s3d-canvas canvas{touch-action:pan-y!important}
.s3d-aviso{position:absolute;left:50%;top:50%;z-index:3;margin:0;padding:14px 20px;transform:translate(-50%,-50%);background:#060505e6;border:1px solid #ece7db33;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);pointer-events:none;opacity:0;transition:opacity .3s}
.s3d-aviso.on{opacity:1}

/* Boletas A ("plano", plano.js): el escenario 3D a la izquierda y el panel de compra a la derecha.
   Si no hay 3D, en su lugar va la discoteca vista desde arriba (.plano-sala). */
.boletas-plano .tiers{display:none}
.boletas-plano .s3d{height:min(calc(100svh - 140px),760px);min-height:480px;margin:0}
.boletas-plano .s3d.full{height:100%}
.boletas-plano .s3d:not(.full) .s3d-card{display:none}   /* fuera de pantalla completa la tarjeta la reemplaza el panel */
.boletas-plano .s3d:not(.full) .s3d-legend{visibility:hidden}   /* las pestañas del panel hacen lo mismo (plano.js las usa por debajo) */
.plano-izq:has(.s3d) .plano-sala,.plano-izq:has(.s3d) .plano-nota{display:none}
.plano{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.6fr);gap:clamp(30px,3.6vw,56px);align-items:start}
.plano-izq{display:flex;flex-direction:column;gap:14px}
.plano-sala{position:relative;aspect-ratio:1;max-height:calc(100svh - 140px);border:1px solid var(--line);background:#0a0908}
.plano-sala>*{position:absolute;box-sizing:border-box}
.plano-tarima{display:flex;align-items:center;justify-content:center;background:#1a1716;border-bottom:3px solid var(--bone)}
.plano-tarima span{font:400 clamp(14px,1.6vw,22px)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#ece7dbcc}
.plano-barra{display:flex;align-items:center;justify-content:center;border:1px dashed #ece7db40}
.plano-barra span{writing-mode:vertical-rl;font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.plano-entrada{left:0;right:0;bottom:8px;text-align:center;font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.plano-zona{padding:0;border:1px solid #ece7db40;background:#0e0c0b;color:var(--bone);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.plano-zona:hover{border-color:#ece7dbb3}
.plano-zona:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.plano-zona.on{background:var(--c);border-color:var(--c);color:#060505}
.plano-zona.sold{opacity:.45}
.plano-zona-tag{position:absolute;left:50%;top:0;transform:translate(-50%,calc(-100% - 6px));display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;background:#060505;border:1px solid var(--c);color:var(--bone);white-space:nowrap;pointer-events:none}
.plano-zona.on .plano-zona-tag{background:var(--c);color:#060505}
.plano-zona-tag b{font:400 clamp(16px,1.8vw,26px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.plano-zona-tag small{font:400 10px/1 var(--mono);letter-spacing:.06em}
.plano-zona.de-pie .plano-zona-tag{top:50%;transform:translate(-50%,-50%)}   /* sin sillas que tapar: el nombre va en el centro */
.plano-silla{width:clamp(7px,1.15vw,14px);aspect-ratio:1;padding:0;border:1px solid #ece7db66;border-radius:50%;background:transparent;transform:translate(-50%,-50%);pointer-events:none;transition:background .2s,border-color .2s,transform .2s}
.plano-silla.ocupada{border-color:transparent;background:#ece7db1f}
.plano-silla.on{pointer-events:auto;cursor:pointer;border-color:#060505}
.plano-silla.on.ocupada{background:#06050559;cursor:not-allowed}
.plano-silla.on:not(.ocupada):hover{transform:translate(-50%,-50%) scale(1.35);background:#06050580}
.plano-silla.mia{background:#fff;border-color:#060505;box-shadow:0 0 0 2px #fff}
body.en-plano .cart.on{transform:translateY(110%)}   /* el panel ya muestra el total */
.plano-nota{margin:0;font-size:13px;line-height:1.5;color:var(--mute)}
.plano-info{display:flex;flex-direction:column}
.plano-panel{position:sticky;top:90px;display:flex;flex-direction:column;padding-top:16px;border-top:1px solid var(--bone)}
.plano-lugar{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}
.plano-precio{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:10px 0;border-block:1px solid var(--line)}
.plano-precio b{display:block;font:400 26px/1.1 var(--display);text-transform:uppercase}
.plano-precio small{display:block;font-size:14px;color:var(--mute)}
.plano-sillas{margin:14px 0 0;font-size:15px;line-height:1.5;color:#ece7dbcc}
.plano-sillas b{font-weight:600;color:var(--bone)}
.plano-3d{margin-left:6px;padding:0;background:none;border:0;font:600 15px/1.5 var(--body);color:var(--bone);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.plano-3d:hover{color:var(--acc)}
.plano-total{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.plano-total p{margin:0;font-size:14px;color:var(--mute)}
.plano-pagar{min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px;border:0;background:var(--bone);color:var(--bg);font:400 20px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;transition:background .3s,color .3s}
.plano-pagar:hover{background:var(--bg);color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)}
.plano-pagar[disabled]{background:#ece7db26;color:#ece7db99;pointer-events:none}
@media (max-width:960px){
  .plano{grid-template-columns:1fr}
  .plano-panel{position:static}
  .plano-sala{max-height:none}
  .boletas-plano .s3d:not(.full){height:auto;min-height:0;aspect-ratio:1.1}   /* el plano es más ancho que alto: sin franjas negras de sobra */
}

/* Encabezado de la boletería A y títulos por paso del panel */
.boletas-head{margin-bottom:clamp(36px,4.4vw,60px)}
.boletas-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none;border-top:1px solid var(--bone)}
.boletas-pasos li{display:flex;gap:18px;padding:22px 26px 0 0}
.boletas-pasos li+li{padding-left:26px;border-left:1px solid var(--line)}
.boletas-pasos b{font:400 13px/1.5 var(--mono);color:var(--acc)}
.boletas-pasos span{display:flex;flex-direction:column;gap:8px;font:400 clamp(20px,1.8vw,26px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.boletas-pasos small{font:400 14px/1.5 var(--body);text-transform:none;letter-spacing:0;color:var(--mute)}
@media (max-width:860px){
  .boletas-pasos{grid-template-columns:1fr}
  .boletas-pasos li,.boletas-pasos li+li{padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}
}
/* Número de cada mesa/palco del plano de un piso: siempre visible, encima de su base */
.s3d-tag-unidad{pointer-events:none;background:none;border:0;padding:0;backdrop-filter:none}
.s3d-tag-unidad b{font-size:13px;letter-spacing:0;text-shadow:0 0 3px #000,0 0 6px #000}
.s3d-tag-unidad.ocupada{opacity:.35}
.s3d-tag-unidad.puesto{pointer-events:auto;cursor:pointer;padding:3px 7px;border-radius:999px;background:#060505b3;border:1px solid #ffffff59}
.s3d-tag-unidad.puesto:hover,.s3d-tag-unidad.puesto.on{background:#fff;transform:scale(1.15)}
.s3d-tag-unidad.puesto:hover b,.s3d-tag-unidad.puesto.on b{color:#060505;text-shadow:none}
.s3d-tag-misc.area b{font:400 10px var(--mono);letter-spacing:.3em}

/* Panel del puesto (plano.js): vacío hasta que se toca una mesa o un palco en el 3D; luego su detalle, uno a la vez */
.pp-vacio{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:340px;padding:32px 28px;border:1px dashed #ece7db4d}
.pp-vacio h3{margin:0;font:400 clamp(34px,3vw,46px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.pp-vacio p{margin:0;max-width:300px;font-size:15px;line-height:1.55;color:var(--mute)}
.pp-cabeza{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pp-loc{display:flex;align-items:center;gap:10px;margin:0;font:600 15px/1.3 var(--body)}
.pp-loc i{width:14px;height:14px;border-radius:3px;background:var(--c)}
.pp-x{width:38px;height:38px;flex:none;padding:0;background:none;border:1px solid var(--line);font-size:22px;line-height:1;color:var(--bone);cursor:pointer}
.pp-x:hover{border-color:var(--bone)}
.pp-titulo{margin:10px 0 6px;font:400 clamp(54px,5vw,76px)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--c)}
.pp-sub{margin:0;font-size:14.5px;line-height:1.5;color:var(--mute)}
.pp-precio{display:flex;flex-direction:column;gap:4px;margin:18px 0 0;padding:14px 0;border-block:1px solid var(--line)}
.pp-precio strong{font:400 36px/1 var(--display);letter-spacing:.01em}
.pp-precio span{font-size:14px;color:var(--mute)}
.pp-sillas-top{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 10px}
.pp-sillas-top b{font:400 22px/1 var(--display);text-transform:uppercase}
.pp-sillas-top span{font-size:13.5px;color:var(--mute)}
.pp-sillas{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.pp-sillas>*{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;border:0;border-radius:6px;background:var(--c);color:#060505}
.pp-sillas>* b{font:400 24px/1 var(--display)}
.pp-sillas>.mia{background:#fff;box-shadow:0 0 0 3px var(--c)}
.pp-sillas>.vendida{background:#232328;color:#ece7db4d}
.pp-accion{width:100%;min-height:54px;margin-top:14px;padding:0 18px;background:none;border:1px solid var(--c);color:var(--bone);font:600 15px/1.2 var(--body);text-align:left;cursor:pointer;transition:background .2s,color .2s}
.pp-accion:hover{background:var(--c);color:#060505}
.pp-accion.mia{border-color:var(--bone)}
.pp-accion.mia:hover{background:var(--bone)}
.pp-accion[disabled]{border-color:var(--line);color:var(--mute);pointer-events:none}
.pp-titulo-off{color:#ece7db40;text-decoration:line-through;text-decoration-thickness:4px}
.pp-vendida{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;margin:18px 0 0;padding:30px 20px;border:2px solid var(--bone);text-align:center;
  background:repeating-linear-gradient(-45deg,#ece7db0d 0 10px,transparent 10px 22px)}
.pp-vendida strong{display:inline-block;padding:6px 20px;border:4px solid var(--bone);font:400 clamp(58px,6vw,88px)/.95 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--bone);transform:rotate(-4deg)}
.pp-vendida p{margin:18px 0 0;font:600 16px/1.4 var(--body);color:var(--bone)}
.pp-otra{border-color:var(--bone)}
.pp-otra:hover{background:var(--bone)}
.pp-agotado{margin-top:14px}
.plano-panel .plano-3d{display:block;margin:14px 0 0;text-align:left}
.pp-compra .plano-pagar{width:100%}
@media (max-width:700px){.s3d-tag-unidad.puesto{padding:1px 5px}.s3d-tag-unidad.puesto b{font-size:11px}}
.pp-compra{margin-top:24px;padding-top:14px;border-top:1px solid var(--bone)}
.pp-compra-t{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font:400 22px/1 var(--display);text-transform:uppercase}
.pp-compra-t span{font:400 13.5px var(--body);text-transform:none;color:var(--mute)}
.pp-compra ul{margin:0 0 12px;padding:0;list-style:none}
.pp-compra li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pp-compra li small{display:block;font-size:12.5px;color:var(--mute)}
.pp-compra li b{font-weight:600;white-space:nowrap}
/* Animaciones del panel del puesto (GSAP) */
.pp-det{position:relative}
.pp-barrido{position:absolute;inset:-6px -10px;background:var(--c);z-index:3;pointer-events:none;transform:scaleX(0)}
.pp-ch{display:inline-block;will-change:transform}
.plano-pagar{position:relative;overflow:hidden}
.plano-pagar::after{content:'';position:absolute;top:0;bottom:0;left:var(--brillo,-60%);width:45%;background:linear-gradient(100deg,transparent,#ffffffcc,transparent);transform:skewX(-20deg);pointer-events:none}

/* ---------- 02 — Cómo comprar: línea de tiempo animada (como.js) ---------- */
.como{overflow-x:clip} /* las cards entran desde afuera: sin esto, en celular la página se ensanchaba */
.como-head{max-width:900px;margin-bottom:clamp(50px,6vw,90px)}
.como-linea{position:relative;display:flex;flex-direction:column;gap:clamp(70px,9vw,130px);margin:0;padding:0;list-style:none}
.como-riel{position:absolute;top:28px;bottom:28px;left:50%;width:2px;margin-left:-1px;background:var(--line)}
.como-riel i{position:absolute;inset:0;background:var(--bone);transform-origin:50% 0}
.como-paso{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);grid-template-areas:"txt num ilus";gap:clamp(24px,4vw,64px);align-items:center}
.como-paso:nth-child(odd){grid-template-areas:"ilus num txt"}
.como-num{grid-area:num;position:relative;z-index:1;justify-self:center;display:grid;place-items:center;width:72px;height:72px;border:2px solid var(--bone);border-radius:50%;background:var(--bg);font:400 30px/1 var(--display);transition:background .4s,color .4s}
.como-paso.on .como-num{background:var(--bone);color:var(--bg)}
.como-txt{grid-area:txt}
.como-paso:nth-child(odd) .como-txt{text-align:left}
.como-paso:nth-child(even) .como-txt{text-align:right}
.como-paso:nth-child(even) .como-txt p{margin-left:auto}
.como-txt h3{margin:0 0 14px;font:400 clamp(40px,4.6vw,72px)/.92 var(--display);text-transform:uppercase}
.como-txt p{max-width:440px;margin:0;font-size:17px;line-height:1.6;color:var(--mute)}
.como-ilus{grid-area:ilus;position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--bg2);cursor:pointer;user-select:none}
.como-fin{display:flex;justify-content:center;margin-top:clamp(60px,7vw,100px)}
@media (max-width:800px){
  .como-riel{left:28px}
  .como-paso,.como-paso:nth-child(odd){grid-template-columns:56px minmax(0,1fr);grid-template-areas:"num txt" ". ilus";gap:18px 18px;align-items:start}
  .como-num{width:56px;height:56px;font-size:24px}
  .como-paso:nth-child(even) .como-txt{text-align:left}
  .como-paso:nth-child(even) .como-txt p{margin-left:0}
  .como-txt h3{font-size:40px;margin-top:6px}
  .como-txt p{font-size:16px}
  .im-pago{aspect-ratio:auto;padding:26px 22px}
  .im-total{margin-bottom:18px}
  .im-medios{margin-bottom:18px}
}
/* 1: mapa — el plano real de Pícaro inclinado; de la mesa sube un hilo y cae el pase con el precio */
.im-mapa{container-type:inline-size}
.im-lugar{position:absolute;left:4%;bottom:4.5%;margin:0;font-size:13px;color:var(--mute)}
.im-plano-mov{position:absolute;inset:0}
.im-plano{position:absolute;left:1%;top:30%;width:74%;aspect-ratio:33/19.8;transform:perspective(900px) rotateX(54deg) rotateZ(-10deg);transform-origin:50% 60%}
.im-plano svg{display:block;width:100%;height:100%;overflow:visible}
.im-piso{fill:#141210;stroke:var(--line);stroke-width:.08}
.im-tarima{fill:#ece7db33}
.im-sel{fill:#fff}
.im-onda{fill:none;stroke:#fff;stroke-width:.12}
.im-onda:first-of-type{stroke:#ffffff55;stroke-width:.08}
.im-pin{position:absolute;left:var(--px,30.6%);top:var(--py,48%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff}
.im-hilo{position:absolute;left:var(--px,30.6%);top:0;width:2px;height:var(--py,48%);margin-left:-1px;background:#fff}
.im-pase{position:absolute;left:60.5%;top:13%;width:31.25%;rotate:5deg;transform-origin:50% -40cqw}
.im-cinta{position:absolute;left:50%;bottom:100%;width:2px;height:60cqw;margin-left:-1px;background:var(--bone)}
.im-pase-cuerpo{position:relative;background:var(--bone);color:#060505;border-radius:10px;box-shadow:0 26px 60px #000d;overflow:hidden}
.im-pase-hueco{display:block;width:22%;height:max(7px,1.6cqw);margin:6% auto 0;border-radius:999px;background:var(--bg2)}
.im-pase-cara{display:flex;flex-direction:column;gap:max(3px,.6cqw);padding:7% 9% 8%}
.im-pase-cara span{font:700 max(9px,1.8cqw)/1.2 var(--body);letter-spacing:.04em;text-transform:uppercase;color:#060505aa}
.im-pase-cara span:last-child{margin-top:max(3px,1cqw);font-size:max(10px,2cqw);font-weight:600;letter-spacing:0;text-transform:none;color:#060505}
.im-pase-cara b{font:400 11.25cqw/.86 var(--display);text-transform:uppercase}
.im-pase-pie{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6% 9% 7%;border-top:2px dashed #06050555}
.im-pase-pie b{font:400 4cqw/1 var(--display)}
.im-sello{padding:max(3px,.8cqw) max(4px,1.2cqw);background:#060505;color:var(--bone);font:400 max(9px,2.3cqw)/1 var(--display);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
@container (max-width:480px){
  .im-pase{top:9%;width:34%}
  .im-pase-cara{gap:2px;padding:6% 8% 7%}
  .im-pase-cara span:first-child{display:none}
  .im-pase-cara span:last-child{font-size:9px;line-height:1.25}
  .im-pase-pie{flex-direction:column;align-items:flex-start;gap:4px;padding:6% 8% 7%}
  .im-pase-pie b{font-size:4.6cqw}
}
/* 2: sillas */
.im-sillas{display:grid;place-items:center}
.im-mesa{position:relative;width:30%;aspect-ratio:1;margin-bottom:14%;border-radius:50%;background:#2a2622;box-shadow:inset 0 0 0 2px #ece7db33}
.im-mesa i{position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));translate:-50% -50%;display:grid;place-items:center;width:28%;aspect-ratio:1;border-radius:7px;background:#f2c14e;color:#060505;font:400 clamp(13px,1.3vw,18px)/1 var(--display);font-style:normal}
.im-cuenta{position:absolute;left:0;right:0;bottom:7%;display:flex;justify-content:center;gap:14px;align-items:baseline;margin:0;font:400 clamp(22px,2.2vw,32px)/1 var(--display);text-transform:uppercase}
.im-cuenta span{color:var(--mute)}
/* 3: pago */
.im-pago{display:flex;flex-direction:column;justify-content:center;padding:0 9%}
.im-total-t{margin:0;font-size:15px;color:var(--mute)}
.im-total{margin:4px 0 7%;font:400 clamp(44px,5vw,76px)/1 var(--display)}
.im-medios{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:7%}
.im-medios span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font:600 13.5px/1 var(--body);transition:background .2s,color .2s,border-color .2s}
.im-medios span.on{background:var(--bone);border-color:var(--bone);color:var(--bg)}
.im-pagar{position:relative;height:54px;overflow:hidden;background:var(--bone);color:var(--bg);font:400 20px/54px var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.im-pagar span{position:absolute;inset:0}
.im-pagar .b{visibility:hidden}
/* 4: boleta física con talón y manilla */
.im-fisica{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%}
.im-boleta{display:grid;grid-template-columns:1fr auto;grid-template-areas:"top talon" "mesa talon";width:58%;background:var(--bone);color:#060505;border-radius:8px;box-shadow:0 20px 50px #0009}
.im-boleta-top{grid-area:top;display:flex;flex-direction:column;gap:3px;padding:7% 7% 0}
.im-boleta-top b{font:400 clamp(16px,1.6vw,24px)/1 var(--display);text-transform:uppercase}
.im-boleta-top span{font:600 12.5px/1.2 var(--body);color:#060505aa}
.im-boleta-mesa{grid-area:mesa;margin:0;padding:6% 7% 7%;font:400 clamp(30px,3.4vw,52px)/.9 var(--display);text-transform:uppercase}
.im-talon{grid-area:talon;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 clamp(12px,1.6vw,22px);border-left:2px dashed #06050555}
.im-talon span{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#060505aa;writing-mode:vertical-rl;rotate:180deg}
.im-talon b{font:400 clamp(26px,2.6vw,40px)/1 var(--display)}
.im-manilla{display:flex;align-items:center;gap:10px;width:66%;height:clamp(26px,2.6vw,36px);padding:0 12px;border-radius:5px;background:repeating-linear-gradient(135deg,#ece7db 0 10px,#d9d3c5 10px 20px);color:#060505;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.im-manilla i{flex:none;width:14px;height:14px;border-radius:50%;background:#060505}
.im-enviado{margin:0;font:400 clamp(18px,1.8vw,26px)/1 var(--display);text-transform:uppercase}
.pp-pal{display:inline-block;white-space:nowrap}
.strip.espera figure{visibility:hidden}

/* ---------- Efectos de toda la página (efectos.js) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
h1 .pal,h2 .pal{display:inline-block;white-space:nowrap}
h1 .ch,h2 .ch{display:inline-block;will-change:transform}
/* El nombre de la portada lleva la textura dentro de las letras: cada letra suelta la repite */
.tex[data-partido]{background-image:none}
.tex .ch{background-image:var(--noise),linear-gradient(var(--tinta),var(--tinta));-webkit-background-clip:text;background-clip:text}
/* La textura solo se pinta dentro de la caja de cada letra; con interlineado apretado (.8) la caja es más baja que la letra
   y se cortaban arriba y abajo. El relleno agranda la caja y el margen negativo lo compensa, así nada se mueve. */
.tex .ch{padding:.2em .06em;margin:-.2em -.06em}
/* Cuenta regresiva: el dígito que cambia gira hacia abajo */
.countdown b{perspective:300px}
.countdown b i{display:inline-block;font-style:normal}
.countdown b i.gira{animation:gira .55s cubic-bezier(.2,.9,.3,1.2)}
@keyframes gira{0%{transform:rotateX(90deg) translateY(-30%);opacity:0}60%{opacity:1}100%{transform:none}}
.evento-fecha{will-change:transform,clip-path}
/* En la barra: logo de Warr10rz (sin el borde rojo) */
.bar-mark{display:flex;align-items:center}
.bar-mark img{display:block;height:46px;width:auto;margin:-6px 0}
@media (max-width:860px){.bar-mark img{height:34px;margin:-4px 0}}
/* En celular la barra no cabía con "presenta": botón y espacios más compactos */
@media (max-width:480px){.bar{gap:12px}.bar .btn{padding:11px 13px;gap:10px;font-size:13px}.bar-menu{flex:none}}

/* Portada: el logo de Warr10rz va en la barra y "PRESENTA ——" hace de puente hacia el nombre del artista,
   que va resaltado: blanco hueso sólido con sombra para despegarlo de la foto */
.hero-a .display{--tinta:var(--bone);margin-top:0;filter:drop-shadow(0 .04em .12em #060505d9)}
.hero-presenta{order:2;align-self:stretch;display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);margin:auto 0 clamp(10px,1.4vw,20px);overflow:hidden}
.hero-presenta span{font:400 clamp(20px,2vw,30px)/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}


/* ---------- Mejoras para celular ---------- */
/* Preguntas frecuentes en acordeón: la respuesta se abre dentro de la hoja, debajo de su pregunta */
.setlist-resp[hidden]{display:none}
.setlist-hoja .setlist-resp{padding:0 0 18px 62px;gap:14px;color:var(--paper-ink)}
.setlist-hoja .setlist-grande,.setlist-hoja .setlist-resp h3,.setlist-hoja .setlist-nav{display:none}
.setlist-hoja .setlist-r{font-size:16px;line-height:1.6;color:#0e0c0bd9}
.setlist-hoja .setlist-pie{margin:0;padding-top:12px;border-top-color:#0e0c0b26;font-size:14px;color:#0e0c0b99}
.setlist-hoja .setlist-pie a{color:var(--paper-ink)}
.setlist-hoja button[aria-expanded="true"] b{transform:rotate(90deg)}
.setlist-hoja button b{transition:transform .3s var(--ease)}

@media (max-width:860px){
  /* Botón de menú con área de toque cómoda (44 px) */
  .bar-menu{min-width:44px;min-height:44px;justify-content:center;padding:10px}

  /* Datos del inicio y cuenta regresiva más legibles */
  .hero-facts div{font-size:12px;letter-spacing:.2em}
  .countdown span{font-size:11px;letter-spacing:.18em}

  /* Escenario 3D: las localidades en una sola fila que se desliza con el dedo */
  .s3d-top{left:0;right:0;top:10px;gap:8px}
  .s3d-tools{padding:0 10px}
  .s3d-legend{position:relative;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:0 10px 4px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .s3d-legend::-webkit-scrollbar{display:none}
  .s3d-legend button{flex:none;min-height:44px;padding:0 14px;font-size:11px;letter-spacing:.12em;white-space:nowrap;scroll-snap-align:start}
  .s3d-tools button{min-width:44px;min-height:44px;justify-content:center;font-size:14px}
  .s3d-legend button,.s3d-tools button{touch-action:manipulation}
  /* Tarjeta de la localidad: el nombre no se monta sobre la X, y la X se toca fácil */
  .s3d-card strong{padding-right:48px;font-size:26px}
  .s3d-x{width:44px;height:44px;top:6px;right:6px}
  .s3d-pov{font-size:11px;min-height:44px}
  .s3d-seat-key{font-size:11px}
  .s3d-seat-help{font-size:13px}
}
/* En la hoja color hueso el acento (también hueso) no se ve: la pregunta elegida y el hover van en negro */
.setlist-hoja button:hover span{color:var(--paper-ink)}
.setlist-hoja button[aria-pressed="true"] i,.setlist-hoja button b{color:var(--paper-ink)}
.setlist-hoja button[aria-pressed="true"] span{text-decoration-color:var(--paper-ink)}

/* Pago por transferencia (página de la orden) */
.transfer{max-width:560px;margin-top:30px;border:1px solid var(--line);padding:clamp(18px,3vw,28px)}
.transfer-valor span{display:block;font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.transfer-valor b{display:block;font:400 clamp(40px,6vw,56px)/1 var(--display);margin:6px 0 18px}
.transfer-cuentas{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.transfer-cuentas li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.transfer-cuentas span{font-size:13px;color:var(--mute)}
.transfer-cuentas b{font-size:16px;letter-spacing:.04em;overflow-wrap:anywhere}
.mono{font-family:var(--mono)}
.btn-copiar{background:none;border:1px solid var(--line);color:var(--bone);font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;cursor:pointer}
.btn-copiar:hover{border-color:var(--bone)}
.transfer-subir{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.transfer-archivo{flex:1 1 220px;position:relative;display:flex;align-items:center;min-height:52px;padding:0 16px;border:1px dashed #ece7db66;cursor:pointer;font-size:14px;overflow:hidden}
.transfer-archivo:hover{border-color:var(--bone)}
.transfer-archivo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.transfer-archivo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-subir .small{flex-basis:100%;margin:0}
@media (max-width:520px){.transfer-cuentas li{grid-template-columns:1fr auto}.transfer-cuentas span{grid-column:1/-1}}