/* La Tarima Café Concert — hoja de estilos */
:root{
  --ink:#120506;
  --night:#1a0809;
  --wine:#2a0c13;
  --brown:#4d1a11;      /* banda del logo */
  --sand:#d2bb9a;       /* círculo del logo */
  --cream:#f4e7ce;
  --amber:#e9a84c;      /* luz de escenario */
  --amber-2:#f6c97a;
  --text:#f4e7ce;
  --muted:rgba(244,231,206,.64);
  --faint:rgba(244,231,206,.4);
  --line:rgba(210,187,154,.18);
  --ff-display:"Bebas Neue",Impact,sans-serif;
  --ff-serif:"Fraunces",Georgia,serif;
  --ff-body:"Libre Franklin",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:min(1220px,100% - 32px);
  --nav-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--text);font:400 1rem/1.65 var(--ff-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{width:var(--wrap);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--amber);color:var(--ink);padding:.6rem 1rem;border-radius:8px;font-weight:600}
.skip:focus{top:16px}

/* grano de película sobre todo el sitio */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

/* tipografía */
.display{font-family:var(--ff-display);letter-spacing:.01em;line-height:.88;text-transform:uppercase}
.script{font-family:var(--ff-serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.01em;color:var(--amber-2)}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font:italic 300 1.15rem/1 var(--ff-serif);color:var(--sand)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.lead{font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);color:var(--muted);max-width:52ch}

/* botones */
.btn{--bg:var(--amber);--fg:var(--ink);position:relative;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;border-radius:999px;background:var(--bg);color:var(--fg);
  font:600 .95rem/1 var(--ff-body);letter-spacing:.01em;white-space:nowrap;transition:transform .25s var(--ease),background .25s,box-shadow .35s var(--ease);box-shadow:0 10px 30px -12px rgba(233,168,76,.55)}
.btn:hover{background:var(--amber-2);box-shadow:0 16px 40px -12px rgba(233,168,76,.75)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ghost{--bg:transparent;--fg:var(--cream);box-shadow:inset 0 0 0 1px rgba(244,231,206,.35)}
.btn--ghost:hover{background:rgba(244,231,206,.08);box-shadow:inset 0 0 0 1px rgba(244,231,206,.7)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ===== Entrada: tornamesa de DJ ===== */
.intro{position:fixed;inset:0;z-index:150;display:grid;place-items:center;align-content:center;gap:1.4rem;padding:16px;cursor:pointer;overflow:hidden;
  background:#070203;isolation:isolate;transition:opacity .7s var(--ease),visibility .7s}
/* fondo: el bar desenfocado detrás del DJ, con un foco de luz sobre la tornamesa */
.intro__bg{position:absolute;inset:-40px;z-index:-2;background-position:center 45%;background-size:cover;background-repeat:no-repeat;
  filter:blur(10px) brightness(.42) saturate(1.15);transform:scale(1.08);transition:filter 1.1s var(--ease),transform 1.4s var(--ease)}
.intro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 38% at 50% 44%,rgba(252,212,127,.16),transparent 70%),radial-gradient(120% 90% at 50% 45%,transparent 35%,rgba(7,2,3,.85) 100%);transition:opacity .8s}
.intro.is-zoom .intro__bg{filter:blur(0) brightness(.75) saturate(1.05);transform:scale(1)}
.intro.is-zoom::after{opacity:0}
.tt-stage{position:relative;perspective:1700px;width:min(720px,92vw)}
.tt{--u:calc(min(720px,92vw) / 56);position:relative;width:100%;aspect-ratio:56/42;border-radius:calc(var(--u)*1.8);transform-origin:37.5% 50%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(160deg,#2a2a2e,#151517 45%,#0c0c0e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06),0 2px 0 #050506,0 calc(var(--u)*.8) 0 #08080a;
  opacity:0;transform:rotateX(52deg) rotateZ(-14deg) scale(.86) translateY(8%);transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity .7s var(--ease)}
.intro.is-on .tt{opacity:1;transform:rotateX(30deg) rotateZ(-7deg) scale(1)}
.tt__shadow{position:absolute;left:8%;right:8%;bottom:-8%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(10px);z-index:-1;opacity:0;transition:opacity 1s}
.intro.is-on .tt__shadow{opacity:1}
.tt__engrave{position:absolute;left:calc(var(--u)*3.5);bottom:calc(var(--u)*1.4);font:600 calc(var(--u)*.85)/1 var(--ff-body);letter-spacing:.32em;color:rgba(255,255,255,.22);text-shadow:0 -1px 0 rgba(0,0,0,.8)}

.tt__platter{position:absolute;left:calc(var(--u)*3.5);top:calc(var(--u)*3.5);width:calc(var(--u)*35);aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#a39d92 0 .8deg,#3d3a36 .8deg 3deg);box-shadow:0 0 0 calc(var(--u)*.35) #0a0a0b,0 calc(var(--u)*.6) calc(var(--u)*1.4) rgba(0,0,0,.7)}
.tt__platter::after{content:"";position:absolute;inset:calc(var(--u)*.6);border-radius:50%;background:#101012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.intro.is-start .tt__platter{animation:spin 1.8s linear infinite,ttSpinUp 1.1s ease-in}
@keyframes ttSpinUp{from{animation-duration:9s}}
.tt__mat{position:absolute;inset:calc(var(--u)*1.1);border-radius:50%;z-index:1}
.tt__record{position:absolute;inset:calc(var(--u)*.5);border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 40.5%,rgba(255,255,255,.07) 41% 41.6%,transparent 42%),
    radial-gradient(circle,transparent 0 55.5%,rgba(255,255,255,.06) 56% 56.5%,transparent 57%),
    radial-gradient(circle,transparent 0 70.5%,rgba(255,255,255,.06) 71% 71.6%,transparent 72%),
    radial-gradient(circle,transparent 0 84.5%,rgba(255,255,255,.07) 85% 85.6%,transparent 86%),
    radial-gradient(circle,transparent 0 96%,#050505 96.5%),
    repeating-radial-gradient(circle,#121212 0 .6px,#1d1d1f .9px 1.5px);
  box-shadow:inset 0 0 0 2px #050505,0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(0,0,0,.6)}
.tt__label{position:absolute;inset:35%;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle,#e30613 0 66%,#b8040f 67% 69%,#e30613 70%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 0 0 calc(var(--u)*.25) #0b0b0b}
.tt__label img{position:relative;width:62%;height:auto;margin-top:-4%}
.tt__ring-text{position:absolute;inset:0;width:100%;height:100%}
.tt__ring-text text{font:600 10.5px var(--ff-body);fill:rgba(252,212,127,.85);letter-spacing:.06em}
.tt__sheen{position:absolute;inset:calc(var(--u)*.5);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 300deg,transparent 0 18deg,rgba(255,255,255,.16) 32deg,transparent 52deg 178deg,rgba(255,255,255,.1) 198deg,transparent 218deg),
    radial-gradient(60% 60% at 30% 25%,rgba(255,255,255,.06),transparent 70%)}
.tt__spindle{position:absolute;left:50%;top:50%;width:calc(var(--u)*.9);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,#fff,#9a948b 60%,#4a4641);box-shadow:0 1px 2px #000}
.intro.is-start .tt__sheen,.intro.is-start .tt__spindle{animation:spin 1.8s linear infinite reverse,ttSpinUp 1.1s ease-in}

.tt__rings{position:absolute;inset:0;pointer-events:none;z-index:2}
.tt__rings i{position:absolute;inset:6%;border-radius:50%;border:2px solid rgba(252,212,127,.7);opacity:0}
.intro.is-drop .tt__rings i{animation:ttRing 1.4s cubic-bezier(.2,.7,.3,1) forwards}
.intro.is-drop .tt__rings i:nth-child(2){animation-delay:.22s}.intro.is-drop .tt__rings i:nth-child(3){animation-delay:.44s}
@keyframes ttRing{0%{opacity:.85;transform:scale(.9)}100%{opacity:0;transform:scale(1.55)}}
.intro.is-drop .tt__label{box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 0 0 calc(var(--u)*.25) #0b0b0b,0 0 calc(var(--u)*3) rgba(227,6,19,.55)}

.tt__strobe{position:absolute;left:calc(var(--u)*1.6);top:calc(var(--u)*36.2);width:calc(var(--u)*2.2);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#5a5a5f,#1a1a1c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.intro.is-start .tt__strobe{background:radial-gradient(circle at 40% 40%,#ffe9b8,#ff9d2b);box-shadow:0 0 calc(var(--u)*1.2) #ffb347,0 0 calc(var(--u)*3) rgba(255,160,60,.5)}
.tt__start{position:absolute;left:calc(var(--u)*4.4);bottom:calc(var(--u)*3);width:calc(var(--u)*7.2);height:calc(var(--u)*3);border-radius:calc(var(--u)*.4);
  font:700 calc(var(--u)*.62)/1 var(--ff-body);letter-spacing:.12em;color:#c8c2b7;background:linear-gradient(#3a3a3f,#1f1f22);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 calc(var(--u)*.35) 0 #050506;transition:transform .12s,box-shadow .12s}
.intro.is-start .tt__start{transform:translateY(calc(var(--u)*.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 calc(var(--u)*.05) 0 #050506;color:#fcd47f}
.tt__speeds{position:absolute;left:calc(var(--u)*13);bottom:calc(var(--u)*3.3);display:flex;gap:calc(var(--u)*.8)}
.tt__spd{display:grid;justify-items:center;gap:calc(var(--u)*.35);width:calc(var(--u)*3);padding:calc(var(--u)*.45) 0;border-radius:calc(var(--u)*.3);background:linear-gradient(#333338,#1c1c1f);font:700 calc(var(--u)*.7)/1 var(--ff-body);color:#a9a397}
.tt__spd b{width:calc(var(--u)*.5);aspect-ratio:1;border-radius:50%;background:#3a1210}
.intro.is-start .tt__spd.is-33 b{background:#ff3b30;box-shadow:0 0 calc(var(--u)*.6) #ff3b30}
.tt__pitch{position:absolute;right:calc(var(--u)*3.2);top:calc(var(--u)*21);width:calc(var(--u)*2.4);height:calc(var(--u)*15);border-radius:calc(var(--u)*.4);
  background:linear-gradient(90deg,transparent 45%,#050506 45% 55%,transparent 55%),repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 1px,transparent 1px calc(var(--u)*1.2)),#18181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tt__pitch small{position:absolute;bottom:calc(var(--u)*-1.6);left:50%;transform:translateX(-50%);font:700 calc(var(--u)*.6)/1 var(--ff-body);letter-spacing:.14em;color:rgba(255,255,255,.3)}
.tt__pitch-knob{position:absolute;left:-10%;right:-10%;top:42%;height:calc(var(--u)*1.6);border-radius:calc(var(--u)*.3);background:linear-gradient(#e9e3d8,#8f897f);box-shadow:0 calc(var(--u)*.3) calc(var(--u)*.5) rgba(0,0,0,.6)}

.tt__arm{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.tt__arm-move{transform-box:view-box;transform-origin:470px 90px;transform:rotate(0deg);filter:drop-shadow(4px 8px 4px rgba(0,0,0,.55));
  transition:transform 1s cubic-bezier(.45,0,.2,1),filter .35s}
.intro.is-arm .tt__arm-move{transform:rotate(25deg);filter:drop-shadow(10px 18px 6px rgba(0,0,0,.45))}
.intro.is-drop .tt__arm-move{filter:drop-shadow(3px 5px 2px rgba(0,0,0,.6))}

.intro__sub{font:italic 300 1.05rem var(--ff-serif);color:rgba(252,212,127,.82);opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s var(--ease)}
.intro.is-drop .intro__sub{opacity:1;transform:none}
.intro.is-zoom .tt{transform:rotateX(0) rotateZ(0) scale(6);transition:transform 1s cubic-bezier(.7,0,.3,1)}
.intro.is-zoom .tt__shadow,.intro.is-zoom .intro__sub{opacity:0}
.intro.is-out{opacity:0;visibility:hidden;pointer-events:none}
.intro.is-done{display:none}
@media (max-width:640px){.intro__sub{font-size:.95rem}}

/* ===== Navegación ===== */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);transition:background .4s,backdrop-filter .4s,border-color .4s,transform .4s var(--ease);border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(18,5,6,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:var(--line)}
.nav__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav__logo img{height:46px;width:auto}
.nav__links{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.nav__links a{position:relative;font-size:.92rem;color:var(--muted);transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--cream)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__cta{padding:.75rem 1.2rem;font-size:.88rem}
.nav__burger{display:none;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);place-items:center}
.nav__burger i{display:block;width:18px;height:1.5px;background:var(--cream);transition:transform .3s var(--ease)}
.nav__burger i+i{margin-top:5px}
.menu-open .nav__burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .nav__burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--night);padding:calc(var(--nav-h) + 2rem) 16px 2rem;display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu-open .mobile-menu{clip-path:inset(0 0 0 0);visibility:visible}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu li a{display:block;font:400 clamp(2.6rem,12vw,4rem)/1.05 var(--ff-display);text-transform:uppercase;padding:.25rem 0;border-bottom:1px solid var(--line)}
.mobile-menu__foot{display:flex;flex-direction:column;gap:1rem;color:var(--muted);font-size:.9rem}

/* ===== Hero ===== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 3rem) 0 0;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(70% 60% at 75% 20%,rgba(122,24,32,.45),transparent 70%),
  radial-gradient(50% 50% at 10% 90%,rgba(77,26,17,.6),transparent 70%),var(--ink)}
.hero__beam{position:absolute;z-index:-1;top:-10%;left:var(--sx,62%);width:min(900px,120vw);height:130%;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,transparent 165deg,rgba(246,201,122,.13) 175deg,rgba(246,201,122,.2) 180deg,rgba(246,201,122,.13) 185deg,transparent 195deg);
  filter:blur(6px);transition:left .9s var(--ease);mix-blend-mode:screen}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.hero__title{font-size:clamp(4.2rem,3rem + 7vw,10.5rem);margin-top:1.4rem}
.hero__title .line:last-child{margin-top:-.12em;line-height:1}
.hero__title .line{display:block;overflow:hidden;padding:.1em 0 .04em;margin-top:-.1em}
.hero__title .line>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.hero__title .script{font-size:.86em;padding-right:.08em}
.is-ready .hero__title .line>span{transform:none}
.is-ready .hero__title .line:nth-child(2)>span{transition-delay:.12s}
.is-ready .hero__title .line:nth-child(3)>span{transition-delay:.24s}
.hero__copy{margin-top:2rem;display:flex;flex-direction:column;gap:1.8rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__media{position:relative;justify-self:end;width:min(100%,440px)}
.arch{position:relative;border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:3/4;background:var(--wine);box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(210,187,154,.25)}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.is-ready .hero__media .arch img{transform:scale(1)}
.arch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(18,5,6,.7))}
.hero__badge{position:absolute;left:-2.2rem;bottom:2.4rem;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:var(--brown);color:var(--sand);box-shadow:0 20px 40px -18px #000,0 0 0 6px rgba(18,5,6,.6)}
.hero__badge svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.hero__badge svg.ring text{font:600 9px var(--ff-body);letter-spacing:.12em;fill:var(--sand);text-transform:uppercase}
.hero__badge .mic{width:34px;height:34px;color:var(--cream)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__bar{margin-top:clamp(2.5rem,6vh,4.5rem);border-top:1px solid var(--line)}
.hero__bar .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;padding:1.1rem 0;font-size:.88rem;color:var(--muted)}
.hero__bar strong{color:var(--cream);font-weight:500}
.hero__bar .live{display:inline-flex;align-items:center;gap:.5rem}
.hero__bar .live i{width:8px;height:8px;border-radius:50%;background:#7bd88f;box-shadow:0 0 0 0 rgba(123,216,143,.6);animation:pulse 2s infinite}
.hero__bar .live.off i{background:var(--faint);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(123,216,143,0)}100%{box-shadow:0 0 0 0 rgba(123,216,143,0)}}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-ready .fade-up{opacity:1;transform:none}
.is-ready .fade-up.d1{transition-delay:.35s}.is-ready .fade-up.d2{transition-delay:.5s}.is-ready .fade-up.d3{transition-delay:.65s}

.hero--photo{justify-content:flex-end}
.hero__photo{position:absolute;inset:0;z-index:-3}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:sepia(.18) saturate(1.05) contrast(1.05);transform:scale(1.06);transition:transform 2.4s var(--ease)}
.is-ready .hero__photo img{transform:scale(1)}
.hero__shade{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(18,5,6,.92) 0%,rgba(18,5,6,.7) 38%,rgba(18,5,6,.15) 75%),
  linear-gradient(180deg,rgba(18,5,6,.55) 0%,transparent 25%,transparent 60%,rgba(18,5,6,.95) 100%)}
.hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem}
.hero__content .lead{color:rgba(244,231,206,.82);max-width:46ch}
.hero--photo .hero__title{font-size:clamp(4rem,2.6rem + 6.6vw,9.6rem);margin-top:0}
.btn--menu{background:linear-gradient(180deg,#f2c46d,#d9a046);box-shadow:0 0 0 1px rgba(255,236,190,.5) inset,0 12px 32px -10px rgba(233,168,76,.75)}
.btn--menu:hover{background:linear-gradient(180deg,#f8d48a,#e3ab52)}
.btn--lg{padding:1.1rem 1.7rem;font-size:1rem}
.btn--full{width:100%;justify-content:center}
.nav__cta.btn--menu{position:relative}
.nav__cta.btn--menu::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:1px solid rgba(242,196,109,.55);animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{opacity:.9;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.12)}}

/* ===== Cinta ===== */
.marquee{overflow:hidden;background:var(--amber);color:var(--ink);padding:.9rem 0;transform:rotate(-1.2deg);margin:3.5rem -2% 0;width:104%}
.marquee__track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee__track span{display:inline-flex;align-items:center;gap:2rem;padding-right:2rem;font:400 clamp(1.6rem,1.2rem + 1.6vw,2.6rem)/1 var(--ff-display);text-transform:uppercase;white-space:nowrap}
.marquee__track b{font:400 .6em/1 var(--ff-body);color:var(--brown)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== Secciones ===== */
.section{padding:clamp(4rem,7.5vw,6.5rem) 0;position:relative}
.section__head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__title{font-size:clamp(3rem,2rem + 4.6vw,6.4rem);margin-top:.9rem}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* La semana: lista tipo setlist */
.setlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:s}
.setlist li{position:relative;display:grid;grid-template-columns:5rem minmax(0,1.1fr) minmax(0,1.3fr) 11rem;align-items:center;gap:1.5rem;padding:1.8rem 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.setlist li::before{counter-increment:s;content:"0" counter(s);font:italic 300 1rem var(--ff-serif);color:var(--faint)}
.setlist__day{font:400 clamp(2.4rem,1.6rem + 2.8vw,4.6rem)/.9 var(--ff-display);text-transform:uppercase;transition:color .35s,transform .5s var(--ease)}
.setlist__what h3{font:500 1.15rem/1.3 var(--ff-body);color:var(--cream)}
.setlist__what p{margin-top:.35rem;color:var(--muted);font-size:.95rem}
.setlist__tag{justify-self:end;font:italic 300 1rem var(--ff-serif);color:var(--sand);padding:.4rem .9rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.setlist li.is-star .setlist__day{color:var(--amber)}
.setlist__time{justify-self:end;font:italic 300 1rem var(--ff-serif);color:var(--sand);white-space:nowrap}
.setlist__time b{font:400 2.4rem/1 var(--ff-display);color:var(--cream);font-style:normal;letter-spacing:.02em}
.program .setlist{border-top:3px double rgba(217,173,85,.45)}
.program .setlist li{border-bottom-color:rgba(217,173,85,.22)}
@media (hover:hover){
  .setlist li:hover .setlist__day{color:var(--amber-2);transform:translateX(10px)}
}
.setlist__float{position:fixed;left:0;top:0;z-index:5;width:240px;aspect-ratio:4/5;border-radius:120px 120px 12px 12px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .35s,transform .45s var(--ease);box-shadow:0 30px 60px -20px #000}
.setlist__float img{width:100%;height:100%;object-fit:cover}
.setlist__float.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.note{margin-top:1.5rem;font-size:.85rem;color:var(--faint)}

/* Karaoke */
.karaoke{background:linear-gradient(180deg,var(--ink),var(--wine) 40%,var(--ink))}
.karaoke__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.karaoke__media{position:relative}
.karaoke__media .arch{aspect-ratio:4/5}
.karaoke__media .vu{position:absolute;right:-1rem;top:12%;display:flex;gap:4px;align-items:flex-end;height:90px;padding:14px;border-radius:14px;background:rgba(18,5,6,.85);backdrop-filter:blur(8px);box-shadow:0 0 0 1px var(--line)}
.vu i{width:6px;border-radius:3px;background:linear-gradient(0deg,var(--amber),#ff7b54);animation:vu 1.1s ease-in-out infinite alternate;height:30%}
.vu i:nth-child(2){animation-delay:-.3s}.vu i:nth-child(3){animation-delay:-.7s}.vu i:nth-child(4){animation-delay:-.1s}.vu i:nth-child(5){animation-delay:-.5s}.vu i:nth-child(6){animation-delay:-.9s}
@keyframes vu{0%{height:18%}40%{height:85%}70%{height:45%}100%{height:100%}}
.arch--video{aspect-ratio:9/14}
.arch--video video{width:100%;height:100%;object-fit:cover;display:block}
.big-num{font:400 clamp(5.5rem,4rem + 7vw,11rem)/.82 var(--ff-display);color:var(--amber);margin:1.5rem 0 .4rem;font-variant-numeric:tabular-nums}
.big-num small{font-size:.4em;color:var(--sand);vertical-align:top;margin-left:.1em}
.steps{list-style:none;margin:2.5rem 0 2.5rem;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps b{font:400 1.8rem/1 var(--ff-display);color:var(--sand)}
.steps h3{font:500 1.05rem/1.3 var(--ff-body)}
.steps p{color:var(--muted);font-size:.93rem;margin-top:.2rem}

/* Carta: vinilos */
.vinyls{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem max(16px,(100vw - 1220px)/2) 2rem;scroll-padding-inline:max(16px,(100vw - 1220px)/2);scrollbar-width:none;cursor:grab}
.vinyls::-webkit-scrollbar{display:none}
.vinyls.dragging{cursor:grabbing;scroll-snap-type:none}
.vinyl{flex:none;width:clamp(250px,26vw,310px);scroll-snap-align:start;user-select:none}
.vinyl__disc{position:relative;aspect-ratio:1;border-radius:50%;background:
  radial-gradient(circle,var(--lbl,#4d1a11) 0 17%,#0d0405 17.5% 18.5%,transparent 19%),
  repeating-radial-gradient(circle,#160708 0 2px,#221012 3px 4px);
  box-shadow:0 30px 50px -25px #000,inset 0 0 0 1px rgba(255,255,255,.05);transition:transform 1.4s var(--ease)}
.vinyl__disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 40deg,rgba(255,255,255,.09) 60deg,transparent 80deg 220deg,rgba(255,255,255,.06) 240deg,transparent 260deg)}
.vinyl__disc::after{content:"";position:absolute;left:50%;top:50%;width:3%;height:3%;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.vinyl__disc span{position:absolute;left:0;right:0;top:calc(50% - 2.1em);text-align:center;font:400 .85rem/1 var(--ff-display);color:var(--cream);letter-spacing:.08em}
.vinyl:hover .vinyl__disc{transform:rotate(200deg)}
.vinyl__meta{margin-top:1.3rem;display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline}
.vinyl__meta h3{font:400 1.9rem/1 var(--ff-display);text-transform:uppercase}
.vinyl__meta .price{font:italic 400 1.2rem var(--ff-serif);color:var(--amber-2)}
.vinyl__meta p{grid-column:1/-1;color:var(--muted);font-size:.9rem}
.vinyls-wrap{position:relative}
.side-arrow{position:absolute;top:calc(50% - 3rem);z-index:3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(18,5,6,.82);color:var(--cream);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(217,173,85,.45),0 12px 26px -12px #000;transition:background .25s,color .25s,transform .2s var(--ease)}
.side-arrow:hover{background:var(--amber);color:var(--ink)}
.side-arrow:active{transform:scale(.92)}
.side-arrow svg{width:24px;height:24px}
.side-arrow--l{left:max(10px,(100vw - 1220px)/2 - 70px)}
.side-arrow--r{right:max(10px,(100vw - 1220px)/2 - 70px)}
.carta-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:1.5rem}
.carta-cta p{color:var(--muted);max-width:46ch}

/* Promo */
.promo{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(120deg,var(--brown),#6b2416 60%,#8a3a1c);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:360px}
.promo__copy{padding:clamp(2rem,5vw,4rem)}
.promo__copy h2{font-size:clamp(2.6rem,1.8rem + 3.4vw,5rem);margin:.8rem 0 1rem}
.promo__copy p{color:rgba(244,231,206,.75);max-width:40ch}
.promo__price{display:flex;align-items:baseline;gap:.5rem;margin:1.6rem 0;font-family:var(--ff-display)}
.promo__price b{font-size:clamp(4rem,3rem + 4vw,6.5rem);line-height:.8;color:var(--amber-2);font-weight:400}
.promo__price span{font-size:1.6rem;color:var(--sand)}
.promo__img{align-self:stretch;position:relative}
.promo__img img{position:absolute;bottom:0;left:0;width:auto;height:min(92%,330px);max-width:none;filter:drop-shadow(0 30px 30px rgba(0,0,0,.45))}
.promo::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(244,231,206,.14);box-shadow:0 0 0 40px rgba(244,231,206,.03),0 0 0 80px rgba(244,231,206,.02)}

/* Guías */
.guides{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
.guide-main{display:block;position:relative;border-radius:22px;overflow:hidden;min-height:460px}
.guide-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.guide-main:hover img{transform:scale(1.04)}
.guide-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(18,5,6,.92))}
.guide-main div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(1.4rem,3vw,2.4rem)}
.guide-main h3,.guide-row h3{font:400 clamp(1.9rem,1.4rem + 1.6vw,2.8rem)/.95 var(--ff-display);text-transform:uppercase;margin:.6rem 0}
.guide-main p,.guide-row p{color:var(--muted);font-size:.95rem;max-width:48ch}
.cat{font:italic 300 .98rem var(--ff-serif);color:var(--amber-2)}
.guide-list{display:flex;flex-direction:column}
.guide-row{display:grid;grid-template-columns:140px 1fr;gap:1.3rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.guide-row:first-child{padding-top:0}
.guide-row img{width:140px;height:140px;object-fit:cover;border-radius:70px 70px 10px 10px;transition:transform .6s var(--ease)}
.guide-row:hover img{transform:translateY(-4px) rotate(-2deg)}
.guide-row h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.more{display:inline-flex;gap:.5rem;align-items:center;margin-top:.8rem;font-size:.88rem;color:var(--cream)}
.more .arrow{transition:transform .3s var(--ease)}
a:hover .more .arrow,.more:hover .arrow{transform:translateX(4px)}

/* Fotos */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:.8rem}
.ph{position:relative;overflow:hidden;border-radius:14px;background:var(--wine);padding:0}
.ph--wide{grid-column:span 2}
.ph--tall{grid-row:span 2}
.ph img{width:100%;height:100%;object-fit:cover;filter:sepia(.28) saturate(.9);transition:transform 1s var(--ease),filter .6s}
.ph::after{content:"";position:absolute;inset:8px;border:1px solid rgba(244,231,206,.25);border-radius:8px;pointer-events:none;opacity:0;transition:opacity .4s}
.ph:hover img{transform:scale(1.05);filter:sepia(0) saturate(1.05)}
.ph:hover::after{opacity:1}
.lightbox{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:4.5rem 16px 2rem;background:rgba(8,2,3,.94);backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:grid;gap:.8rem;justify-items:center;max-width:min(1200px,100%)}
.lightbox img{max-height:78vh;width:auto;max-width:100%;border-radius:10px;box-shadow:0 30px 80px -30px #000}
.lightbox figcaption{color:var(--muted);font:italic 300 1rem var(--ff-serif);text-align:center}
.lightbox .side-arrow{top:50%;transform:translateY(-50%)}
.lightbox .side-arrow:active{transform:translateY(-50%) scale(.92)}
.lightbox .side-arrow--l{left:16px}.lightbox .side-arrow--r{right:16px}
.lightbox__close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;color:var(--cream);font-size:1.1rem;box-shadow:inset 0 0 0 1px var(--line)}
.lightbox__close:hover{background:rgba(244,231,206,.1)}

/* Reservas */
.reserve{background:linear-gradient(180deg,var(--ink),#1d0a09 50%,var(--ink))}
.reserve__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.ticks{list-style:none;margin:2rem 0;padding:0;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.6rem;color:var(--cream)}
.ticks li::before{content:"✦";position:absolute;left:0;top:.1rem;color:#d9ad55;font-size:.8rem}
.reserve__photo{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;box-shadow:inset 0 0 0 1px var(--line)}
.reserve__photo img{width:100%;height:100%;object-fit:cover;filter:sepia(.25)}
.ticket{position:relative;border-radius:22px;background:#f1e3c6;color:#2a0c13;box-shadow:0 40px 80px -40px #000;overflow:hidden}
.ticket::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.ticket__head{display:grid;justify-items:center;gap:.2rem;padding:1.4rem 1.5rem 1.1rem;background:var(--brown);color:var(--sand);text-align:center}
.ticket__head span{font:italic 300 .95rem var(--ff-serif);letter-spacing:.1em}
.ticket__head b{font:400 2.2rem/1 var(--ff-display);color:var(--cream);letter-spacing:.03em}
.ticket__body{position:relative;display:grid;gap:1rem;padding:1.6rem clamp(1.2rem,3vw,2rem)}
.f{display:grid;gap:.35rem;font:500 .8rem/1.2 var(--ff-body);letter-spacing:.04em;color:#5b2a20}
.f small{font-weight:400;letter-spacing:0;color:#8a6a55}
.f input,.f select,.f textarea{width:100%;padding:.8rem .9rem;border:0;border-radius:10px;background:#fbf4e4;color:#2a0c13;font:400 1rem var(--ff-body);box-shadow:inset 0 0 0 1px rgba(77,26,17,.25);transition:box-shadow .2s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;box-shadow:inset 0 0 0 2px #b9772a}
.f textarea{resize:vertical;min-height:64px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stepper{display:grid;grid-template-columns:44px 1fr 44px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(77,26,17,.25);background:#fbf4e4}
.stepper button{font-size:1.3rem;color:#4d1a11;transition:background .2s}
.stepper button:hover{background:rgba(77,26,17,.08)}
.stepper button:active{background:rgba(77,26,17,.15)}
.stepper input{box-shadow:none!important;text-align:center;font-weight:600;-moz-appearance:textfield;background:transparent!important;padding:.8rem 0}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none}
.f-err{min-height:1.2em;color:#a3271a;font-size:.88rem;font-weight:500}
.ticket .btn{margin-top:-.4rem}
.ticket__stub{position:relative;display:flex;justify-content:space-around;gap:.5rem;padding:1rem;border-top:2px dashed rgba(77,26,17,.35);font:400 1.15rem var(--ff-display);letter-spacing:.06em;color:#4d1a11}
.ticket__stub::before,.ticket__stub::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--ink)}
.ticket__stub::before{left:-12px}.ticket__stub::after{right:-12px}

/* Visítanos */
.visit{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:stretch}
.facts{display:grid;gap:0;margin-top:2rem}
.fact{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:1.15rem 0;border-top:1px solid var(--line)}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact dt{font:italic 300 1rem var(--ff-serif);color:var(--sand)}
.fact dd{margin:0;color:var(--cream)}
.fact dd a{border-bottom:1px solid rgba(244,231,206,.3);transition:border-color .25s,color .25s}
.fact dd a:hover{color:var(--amber-2);border-color:var(--amber-2)}
.fact dd small{display:block;color:var(--muted);font-size:.86rem}
.map{position:relative;border-radius:24px;overflow:hidden;min-height:440px;background:var(--wine);box-shadow:0 0 0 1px var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) sepia(.45) saturate(1.5) brightness(.82) contrast(.95)}
.map__pin{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:16px;background:rgba(18,5,6,.88);backdrop-filter:blur(10px);font-size:.9rem}
.map__pin b{display:block;font-weight:500}
.map__pin span{color:var(--muted);font-size:.84rem}
.socials{display:flex;gap:.6rem;margin-top:2rem}
.socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,transform .25s var(--ease)}
.socials a:hover{background:var(--amber);color:var(--ink)}
.socials a:active{transform:scale(.95)}
.socials svg{width:19px;height:19px}

/* Preguntas */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.35rem 0;cursor:pointer;font:500 1.06rem/1.35 var(--ff-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,transform .4s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--cream);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
.faq details[open] summary i{background:var(--amber);transform:rotate(180deg)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:var(--ink)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details p{padding:0 3rem 1.4rem 0;color:var(--muted)}

/* Cierre */
.final{text-align:center;padding:clamp(6rem,12vw,10rem) 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:0;width:min(1000px,140vw);height:100%;transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(246,201,122,.12) 180deg,transparent 200deg);pointer-events:none}
.final h2{font-size:clamp(3.4rem,2rem + 7vw,9rem);position:relative}
.final p{margin:1.4rem auto 2.2rem;color:var(--muted);max-width:44ch;position:relative}
.final .hero__actions{justify-content:center;position:relative}

/* Footer */
.footer{border-top:1px solid var(--line);padding:4rem 0 2rem;background:#0d0304}
.footer__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem}
.footer__brand img{width:220px}
.footer__brand p{margin-top:1.2rem;color:var(--muted);font-size:.92rem;max-width:34ch}
.footer h4{margin:0 0 1rem;font:italic 300 1.05rem var(--ff-serif);color:var(--sand)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.92rem}
.footer ul a{color:var(--muted);transition:color .25s}
.footer ul a:hover{color:var(--cream)}
.footer__legal{margin-top:3rem;padding:1.5rem 84px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem;font-size:.8rem;color:var(--faint)}
.footer__legal p{max-width:70ch}

/* firma WLS Innovations Group */
.signature{--wls-gold:#f3dfb9;--wls-blue:#3157ff;display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;padding:.45rem 1rem .45rem .45rem;border-radius:999px;
  background:#04060d;border:1px solid rgba(243,223,185,.22);box-shadow:0 10px 30px -14px rgba(49,87,255,.8),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.signature:hover{transform:translateY(-3px);border-color:rgba(243,223,185,.6);box-shadow:0 16px 40px -12px rgba(49,87,255,.95),inset 0 1px 0 rgba(255,255,255,.14)}
.signature__mark{position:relative;width:38px;height:38px;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,var(--wls-gold),var(--wls-blue),var(--wls-gold));animation:wlsSpin 6s linear infinite}
.signature__mark span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#0a0e1d;color:var(--wls-gold);font:800 .66rem/1 Inter,var(--ff-body);letter-spacing:.06em;animation:wlsSpin 6s linear infinite reverse}
.signature__txt{display:flex;flex-direction:column;line-height:1.15}
.signature__txt small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,245,251,.55)}
.signature__txt strong{font-size:.92rem;font-weight:800;background:linear-gradient(90deg,var(--wls-gold) 0%,#fff 40%,var(--wls-gold) 60%,#9db0ff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wlsShine 4.5s linear infinite}
@keyframes wlsSpin{to{transform:rotate(360deg)}}
@keyframes wlsShine{to{background-position:-220% 0}}



.house-rules{margin:clamp(3rem,6vw,5rem) 0 0;padding:2rem;border-radius:20px;background:var(--wine);display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;font-size:.88rem;color:var(--muted)}
.house-rules b{display:block;font:400 1.5rem/1 var(--ff-display);color:var(--cream);margin-bottom:.4rem}

/* ===== Adaptación ===== */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .hero__grid,.karaoke__grid,.visit,.faq,.guides{grid-template-columns:1fr}
  .hero__media{justify-self:start;width:min(100%,380px)}
  .setlist li{grid-template-columns:3rem 1fr auto;gap:.4rem 1rem}
  .setlist__tag,.setlist__time{grid-column:3;grid-row:1}
  .setlist__what{grid-column:2/-1;grid-row:2}
  .setlist li::before{grid-row:1;grid-column:1}
  .setlist__day{grid-row:1;grid-column:2}
  .setlist__float{display:none}
  .promo{grid-template-columns:1fr}
  .promo__img{min-height:220px}
  .promo__img img{left:auto;right:4%;height:100%}
  .footer__top{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .reserve__grid{grid-template-columns:1fr}
  .side-arrow--l{left:8px}.side-arrow--r{right:8px}
  .house-rules{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--nav-h:66px}
  .nav__logo img{height:38px}
  .nav__cta{padding:.6rem .85rem;font-size:.82rem;gap:.4rem}
  .nav__cta svg{width:15px;height:15px}
  .nav__in{gap:.6rem}
  .nav__logo{margin-right:auto}
  .hero{padding-top:calc(var(--nav-h) + 1.5rem)}
  .hero__title{font-size:clamp(3.6rem,19vw,5.2rem)}
  .hero__media{width:78%}
  .hero__badge{left:auto;right:-1.5rem;bottom:1.5rem;width:104px;height:104px}
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .section__head{grid-template-columns:1fr}
  .setlist__tag{grid-column:2;grid-row:3;justify-self:start}
  .footer__legal{padding-right:0;padding-bottom:4.5rem}
  .guide-row{grid-template-columns:96px 1fr}
  .guide-row img{width:96px;height:110px}
  .guide-main{min-height:380px}
  .fact{grid-template-columns:1fr;gap:.2rem}
  .map{min-height:360px}
  .faq details p{padding-right:0}
  .footer__top{grid-template-columns:1fr}
  .footer__legal{flex-direction:column;align-items:flex-start}
  .hero__shade{background:linear-gradient(180deg,rgba(18,5,6,.6) 0%,rgba(18,5,6,.35) 30%,rgba(18,5,6,.88) 62%,rgba(18,5,6,.98) 100%)}
  .hero__photo img{object-position:38% 40%}
  .gallery{grid-auto-rows:150px;gap:.5rem}
  .f-row{grid-template-columns:1fr}
  .side-arrow{width:44px;height:44px}
  .setlist__time{grid-column:2;grid-row:3;justify-self:start}
  .house-rules{grid-template-columns:1fr}
  .karaoke__media .vu{right:.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero__beam{display:none}
  .signature__mark,.signature__mark span,.signature__txt strong{animation:none}
}

/* ===== Púas de guitarra en lugar de flechas ===== */
.pick{display:block;width:100%;height:100%;overflow:visible}
.pick__body{fill:#e2a94f;transition:fill .25s}
.pick__ring{fill:none;stroke:rgba(77,26,17,.45);stroke-width:1.3}
.pick__dot{fill:#4d1a11}
.pick--l{transform:scaleX(-1)}
.side-arrow{width:60px;height:60px;padding:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));transition:transform .35s var(--ease)}
.side-arrow:hover{background:none}
.side-arrow svg{width:100%;height:100%}
.side-arrow:hover .pick__body{fill:#f6c97a}
.side-arrow--r:hover{transform:translateX(3px) rotate(-8deg)}
.side-arrow--l:hover{transform:translateX(-3px) rotate(8deg)}
.side-arrow:active{transform:scale(.9)}
.lightbox .side-arrow--r:hover{transform:translateY(-50%) translateX(3px) rotate(-8deg)}
.lightbox .side-arrow--l:hover{transform:translateY(-50%) translateX(-3px) rotate(8deg)}
.arrow{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.15em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 9C17 5 29 7 41 21.5c1.3 1.5 1.3 3.5 0 5C29 41 17 43 10 39 5.5 36.5 4 31 4 24s1.5-12.5 6-15z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 9C17 5 29 7 41 21.5c1.3 1.5 1.3 3.5 0 5C29 41 17 43 10 39 5.5 36.5 4 31 4 24s1.5-12.5 6-15z'/%3E%3C/svg%3E") center/contain no-repeat}
.arrow--l{transform:scaleX(-1)}
@media (max-width:640px){.side-arrow{width:50px;height:50px}}

/* ===== Colores de fondo por sección (paleta del logo: amarillo, rojo, crema y oscuro) ===== */
:root{--logo-yellow:#fcd47f;--logo-red:#e30613}
.marquee{background:var(--logo-red);color:var(--logo-yellow)}
.marquee__track b{color:var(--logo-yellow);opacity:.8}

.theme-yellow,.theme-cream{--cream:#2a0c13;--text:#2a0c13;--muted:rgba(42,12,19,.74);--faint:rgba(42,12,19,.52);--line:rgba(42,12,19,.18);--sand:#8a2414;--amber:#c3050f;--amber-2:#c3050f;color:var(--cream)}
.theme-yellow{background:#f4c866 linear-gradient(180deg,#f7d27b,#efbd55)}
.theme-cream{background:#f3e5c8}
.theme-yellow::before,.theme-cream::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.theme-yellow>*:not(.setlist__float),.theme-cream>*:not(.setlist__float){position:relative}
.theme-yellow .btn,.theme-cream .btn{--bg:#2a0c13;--fg:var(--logo-yellow);background:#2a0c13;box-shadow:0 12px 26px -14px rgba(42,12,19,.8)}
.theme-yellow .btn:hover,.theme-cream .btn:hover{background:#4d1a11}
.theme-yellow .pick__body{fill:#2a0c13}
.theme-yellow .side-arrow:hover .pick__body{fill:var(--logo-red)}
.theme-yellow .pick__dot{fill:var(--logo-yellow)}
.theme-yellow .vinyl__disc{box-shadow:0 30px 50px -25px rgba(42,12,19,.85)}
.theme-cream .program .setlist,.program.theme-cream .setlist{border-top-color:rgba(195,5,15,.55)}
.program.theme-cream .setlist li{border-bottom-color:rgba(42,12,19,.16)}
.program.theme-cream .setlist__float{box-shadow:0 30px 60px -20px rgba(42,12,19,.7)}
.theme-cream .faq summary i::before,.theme-cream .faq summary i::after{background:var(--cream)}
.theme-cream .faq details[open] summary i::before,.theme-cream .faq details[open] summary i::after{background:#fff4dc}

.theme-black{background:#0b0304}
.theme-red{background:#a3040e linear-gradient(160deg,#c0050f,#8c030b);--muted:rgba(255,236,214,.82);--faint:rgba(255,236,214,.6);--line:rgba(255,236,214,.22);--sand:#ffd9a8}
.theme-red .ticks li::before{color:var(--logo-yellow)}
.theme-red .ticket__stub::before,.theme-red .ticket__stub::after{background:#a5040e}
.theme-red .reserve__photo{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* cinta derecha (pedido del cliente) */
.marquee{transform:none;margin:0;width:100%}

/* WhatsApp rock retro: guitar pick, brass edge and the original WhatsApp symbol. */
.wa-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:80;display:block;width:76px;height:86px;border:0;border-radius:20px;background:transparent;color:#ffdf99;text-decoration:none;isolation:isolate;transition:transform .2s var(--ease)}
.wa-float::before{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 86'%3E%3Cdefs%3E%3ClinearGradient id='p' x2='.4' y2='1'%3E%3Cstop stop-color='%236b1725'/%3E%3Cstop offset='1' stop-color='%2320070e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M38 3C19 3 5 12 6 28C7 44 23 69 34 79Q38 83 42 79C53 69 69 44 70 28C71 12 57 3 38 3Z' fill='url(%23p)' stroke='%23f4c866' stroke-width='2'/%3E%3Cpath d='M38 8C21 8 10 15 11 28C12 42 26 65 36 75Q38 77 40 75C50 65 64 42 65 28C66 15 55 8 38 8Z' fill='none' stroke='%23f4c866' stroke-opacity='.3'/%3E%3Cpath d='M17 22l2 3-2 3-2-3zm42 0l2 3-2 3-2-3z' fill='%23f4c866'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(3px 4px 0 #990b1b) drop-shadow(0 6px 10px rgba(0,0,0,.4));pointer-events:none}
.wa-float svg{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:30px;height:30px;display:block}
.wa-float__label{position:absolute;top:54px;left:0;right:0;text-align:center;font:700 8px/1 "Courier New",monospace;letter-spacing:.1px;color:#ffdf99}
.wa-float:hover{transform:translateY(-3px) rotate(-4deg)}
.wa-float:active{transform:translateY(1px) scale(.96)}
.wa-float:focus-visible{outline:2px solid #fff0c9;outline-offset:5px}
.wa-float__tip{position:absolute;right:calc(100% + 10px);top:40%;transform:translate(6px,-50%);white-space:nowrap;padding:.65rem .9rem;border:1px solid #d9ad55;border-radius:4px;background:#240c11;color:#fcd47f;font:500 .82rem/1.3 var(--ff-body);box-shadow:3px 3px 0 #9c0b18;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.wa-float:hover .wa-float__tip,.wa-float:focus-visible .wa-float__tip{opacity:1;transform:translate(0,-50%)}
@media(hover:none){.wa-float__tip{display:none}}
@media(prefers-reduced-motion:reduce){.wa-float,.wa-float__tip{transition:none}.wa-float:hover,.wa-float:active{transform:none}}

/* en celular el recorte de la foto es más oscuro: un poco más de luz y se centra en la barra */
@media (max-width:640px){.intro__bg{filter:blur(8px) brightness(.62) saturate(1.2);background-position:62% 45%}}

/* "recuerdos." más cerca de la línea anterior */
.hero--photo .hero__title .line:last-child{margin-top:-.26em}

/* ===== Ronda de cambios del cliente (oct 2026) ===== */
/* portada: logo grande con "Desde 2018" */
.hero__brand{display:inline-grid;justify-items:center;gap:.2rem;margin-bottom:-.4rem}
.hero__brand img{width:clamp(150px,11vw + 60px,230px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.hero__brand span{font:600 .78rem/1 var(--ff-body);letter-spacing:.42em;text-transform:uppercase;color:var(--logo-yellow);padding-left:.42em;
  display:flex;align-items:center;gap:.7rem}
.hero__brand span::before,.hero__brand span::after{content:"";width:22px;height:1px;background:rgba(252,212,127,.6)}

/* tarjeta de artista (Vania Castillo) dentro de la programación crema */
.artist{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin-top:2.5rem;border-radius:22px;overflow:hidden;background:#1d0809;color:#f4e7ce;
  box-shadow:0 30px 60px -30px rgba(42,12,19,.75),inset 0 0 0 1px rgba(252,212,127,.18)}
.artist__photo{margin:0;position:relative;min-height:300px}
.artist__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.artist__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#1d0809)}
.artist__body{padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;--cream:#f4e7ce}
.artist__when{font:italic 300 1rem var(--ff-serif);color:var(--logo-yellow)}
.artist__body h3{font-size:clamp(2.8rem,2rem + 3vw,4.6rem);line-height:.9;color:#f4e7ce}
.artist__body h3 .script{color:var(--logo-yellow)}
.artist__genre{font:600 .8rem/1 var(--ff-body);letter-spacing:.32em;text-transform:uppercase;color:#ff4b55}
.artist__body p:not(.artist__genre){color:rgba(244,231,206,.78);max-width:42ch}
.artist .btn{--bg:var(--logo-red);--fg:#fff4dc;background:var(--logo-red);color:#fff4dc;margin-top:.4rem;box-shadow:0 12px 26px -12px rgba(227,6,19,.7)}
.artist .btn:hover{background:#ff1f2c}

/* After Office */
.promo--after{background:linear-gradient(125deg,#140505,#2a0a0b 55%,#5c0a10)}
.promo--after .promo__copy h2 .script{color:var(--logo-yellow);font-size:.9em}
.promo--after .promo__price{gap:.45rem;margin:1rem 0 1.2rem}
.promo--after .promo__price span:first-child{font-size:2.2rem;color:var(--cream)}
.after__list{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.after__list li{padding:.4rem .8rem;border-radius:999px;font-size:.85rem;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(252,212,127,.3)}
.after__beers{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.5rem}
.after__beers div{display:flex;align-items:baseline;gap:.6rem;padding:.6rem 1rem;border-radius:12px;background:rgba(227,6,19,.18);box-shadow:inset 0 0 0 1px rgba(227,6,19,.45)}
.after__beers b{font:400 1.35rem/1 var(--ff-display);letter-spacing:.03em;color:var(--cream);font-weight:400}
.after__beers span{font:400 1.5rem/1 var(--ff-display);color:var(--logo-yellow)}
.promo__img--photo{min-height:340px}
.promo__img--photo img{left:0;right:0;bottom:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%)}
@media (max-width:1024px){
  .promo__img--photo img{-webkit-mask:linear-gradient(180deg,transparent,#000 30%);mask:linear-gradient(180deg,transparent,#000 30%)}
}
@media (max-width:760px){
  .artist{grid-template-columns:1fr}
  .artist__photo{min-height:280px}
  .artist__photo::after{background:linear-gradient(180deg,transparent 55%,#1d0809)}
}

/* Photo-only refinements: faithful color and intentional subject framing. */
.hero__photo img{filter:none;object-position:50% 45%}
.ph img{filter:none;object-position:var(--photo-x,50%) var(--photo-y,50%)}
.ph:hover img{filter:none;transform:scale(1.025)}
.ph:has(img[src*="cantante-rojo"]) img{object-position:55% 28%}
.ph:has(img[src*="banda-vertical"]) img{object-position:50% 28%}
.ph:has(img[src*="video-"]) img{object-position:50% 35%}
.reserve__photo img{filter:none;object-position:50% 43%}
.artist__photo img{object-fit:contain;object-position:center bottom}
.artist__photo{background:#10080d}
.artist__photo::after{background:linear-gradient(0deg,#1d0809,transparent 22%)}
.setlist__float{width:300px;aspect-ratio:3/2;border-radius:20px}
.setlist__float:has(img[src*="vania"]){width:240px;aspect-ratio:520/530}
.setlist__float img{object-fit:contain;background:#10080d}
.promo__img--photo img{object-fit:contain;object-position:center bottom}
@media(max-width:640px){
 .hero__photo img{object-position:48% 40%}
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}
 .artist__photo{min-height:300px}
}

.photo-picture{display:contents}
/* Full-glass product framing in the gallery. */
.ph:has(img[src*="-pro-"]){grid-row:span 2;background:#13090a}
.ph:has(img[src*="-pro-"]) img{object-fit:contain}
@media(max-width:640px){.ph:has(img[src*="-pro-"]){grid-row:span 1}}
/* Revision: complete compositions, balanced promo cards and clean artist framing. */
.artist__photo{min-height:460px}
.artist__photo img{object-fit:cover;object-position:50% 18%}
.artist__photo::after{background:linear-gradient(90deg,transparent 85%,#1d0809)}
.promo__img--photo img{object-fit:cover;object-position:50% 50%}
.setlist__float{width:300px;aspect-ratio:3/2}
.setlist__float:has(img[src*="vania"]){width:230px;aspect-ratio:4/5}
@media(max-width:640px){.artist__photo{min-height:380px}.artist__photo img{object-position:50% 15%}.artist__photo::after{background:linear-gradient(0deg,#1d0809,transparent 12%)}.promo__img--photo{min-height:300px}.promo__img--photo img{object-fit:cover;object-position:center}}

/* ===== Cambios del cliente (27 oct) ===== */
/* inicio sin logo pequeño en el menú: los enlaces quedan a la izquierda y el logo grande manda */
.hero__brand img{width:clamp(210px,15vw + 80px,330px)}
.hero__brand span{font-size:.86rem}
/* púa de WhatsApp más grande con la frase "Quiero realizar una reserva" */
.wa-float{width:100px;height:113px;background-size:100% 100%}
.wa-float::before{background-size:100% 100%!important}
.wa-float svg{top:16px;width:28px;height:28px}
.wa-float__label{top:50px;left:12px;right:12px;font:400 13px/1.02 var(--ff-display);letter-spacing:.06em;text-transform:uppercase;color:#ffdf99}
@media (max-width:640px){
  .wa-float{width:88px;height:99px}
  .wa-float svg{top:14px;width:24px;height:24px}
  .wa-float__label{top:43px;left:10px;right:10px;font-size:11.5px}
}
/* la frase usa la parte ancha de la púa: dos líneas, ícono más arriba */
.wa-float svg{top:11px;width:24px;height:24px}
.wa-float__label{top:40px;left:4px;right:4px;font-size:12px;line-height:1.08;letter-spacing:.02em;white-space:nowrap}
@media (max-width:640px){
  .wa-float svg{top:10px;width:21px;height:21px}
  .wa-float__label{top:35px;font-size:10.6px}
}

/* portada con la foto del escenario: en pantallas anchas la foto ocupa la derecha
   para que el letrero "La Tarima" del ladrillo quede a la vista junto al título */
@media (min-width:1025px){
  .hero--photo .hero__photo{left:30%}
  .hero--photo .hero__photo img{object-position:25% 58%}
  .hero--photo .hero__photo::before{content:"";position:absolute;inset:0 auto 0 0;width:22%;z-index:1;background:linear-gradient(90deg,#120506,transparent)}
  .hero--photo .hero__shade{background:linear-gradient(90deg,#120506 0%,rgba(18,5,6,.92) 26%,rgba(18,5,6,.35) 48%,rgba(18,5,6,.05) 75%),
    linear-gradient(180deg,rgba(18,5,6,.5) 0%,transparent 25%,transparent 62%,rgba(18,5,6,.95) 100%)}
}
@media (max-width:1024px){.hero--photo .hero__photo img{object-position:52% 60%}}

/* aviso de la promo After Office */
.after__note{margin:-.6rem 0 1.2rem;font:italic 300 .9rem var(--ff-serif);color:var(--muted)}
.after__note{margin:1rem 0 0}