/* LA MANSIÓN RECORDS — estilos globales compartidos por todas las páginas.
   Extraído tal cual del <style> de index.html (base + footer + banner PWA)
   para que index.html y las páginas nuevas se vean SIEMPRE igual. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#C9A227;--gold2:#F2C93B;--black:#000000;--black2:#111;--black3:#1a1a1a;
  --white:#FFFFFF;--gray:#888;--red:#e63946;
  --font-d:'Bebas Neue',sans-serif;--font-b:'Outfit',sans-serif;--font-m:'Space Mono',monospace;
  --radius:12px;--glow:0 0 30px rgba(201,162,39,.35);--nav-h:64px;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--font-b);font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:var(--font-b);border:none;outline:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
body::before{content:'';position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section-label{font-family:var(--font-m);font-size:11px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.section-title{font-family:var(--font-d);font-size:clamp(2.4rem,6vw,4.5rem);letter-spacing:2px;line-height:1;color:var(--white)}
.gold{color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;font-family:var(--font-m);font-size:13px;letter-spacing:2px;text-transform:uppercase;border-radius:4px;cursor:pointer;transition:all .25s ease;position:relative;overflow:hidden}
.btn-gold{background:var(--gold);color:var(--black);font-weight:700}
.btn-gold:hover{background:var(--gold2);box-shadow:var(--glow);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn-outline:hover{background:var(--gold);color:var(--black);box-shadow:var(--glow)}
/* WhatsApp button override — always black text on hover */
a.btn-outline[href*="wa.me"]:hover,
a.btn-outline[style*="25d366"]:hover{background:#25d366;color:#000 !important;border-color:#25d366;box-shadow:0 0 20px rgba(37,211,102,.35)}
a.btn-outline[href*="wa.me"] svg,
a.btn-outline[style*="25d366"] svg{transition:fill .2s}
a.btn-outline[href*="wa.me"]:hover svg,
a.btn-outline[style*="25d366"]:hover svg{fill:#000}

/* HEADER */
.top-header{position:fixed;top:0;left:0;right:0;z-index:900;height:calc(var(--nav-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:rgba(8,8,8,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(201,162,39,.15);display:flex;align-items:center;box-sizing:border-box}
.top-header .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-right{display:flex;align-items:center;gap:20px}
.lang-switch{display:flex;background:var(--black3);border-radius:20px;padding:3px;border:1px solid #222}
.lang-switch button{background:none;border:none;color:var(--gray);font-family:var(--font-m);font-size:.68rem;letter-spacing:1px;padding:6px 12px;border-radius:16px;cursor:pointer;transition:.2s}
.lang-switch button.active{background:var(--gold);color:var(--black);font-weight:700}
.lang-switch-mobile{width:100%;margin-bottom:8px}
.lang-switch-mobile button{flex:1;padding:12px;font-size:.75rem}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-img{height:38px;width:auto;display:block}
.logo-svg{width:44px;height:44px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text .la{font-family:var(--font-d);font-size:13px;letter-spacing:8px;color:var(--gold)}
.logo-text .mansion{font-family:var(--font-d);font-size:22px;letter-spacing:3px;color:var(--white)}
.logo-text .records{font-family:var(--font-m);font-size:9px;letter-spacing:5px;color:var(--gray);margin-top:1px}
.nav-desktop{display:flex;align-items:center;gap:8px}
.nav-desktop a{font-family:var(--font-m);font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:8px 14px;color:#d4cfc6;border-radius:4px;transition:color .2s}
.nav-desktop a:hover{color:var(--gold)}
.nav-desktop .btn{padding:9px 22px;font-size:11px}
.nav-desktop .btn-gold{color:var(--black) !important}
.nav-desktop .btn-gold:hover{color:var(--black) !important}
.hamburger{display:none;background:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;border:none}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:all .3s}

/* Cuenta — link normal (desktop, sesión no iniciada) */
.account-link{display:inline-flex;align-items:center;gap:6px;transition:.2s}
.account-link.logged-in{
  border:1px solid var(--gold);border-radius:30px;padding:7px 16px;color:var(--gold)!important;
  font-family:var(--font-m);font-size:.78rem;letter-spacing:.5px;
}
.account-link .acc-dot{width:7px;height:7px;border-radius:50%;background:#4caf7d;display:none;flex-shrink:0}
.account-link.logged-in .acc-dot{display:inline-block}

/* Ícono de cuenta — solo visible en móvil, junto al hamburger */
.account-icon-mobile{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--black3);border:1px solid #222;margin-right:8px;position:relative;transition:.2s}
.account-icon-mobile svg{width:18px;height:18px;stroke:var(--white)}
.account-icon-mobile.logged-in{border-color:var(--gold)}
.account-icon-mobile.logged-in svg{stroke:var(--gold)}
.account-icon-mobile .mini-dot{position:absolute;top:1px;right:1px;width:9px;height:9px;border-radius:50%;background:#4caf7d;border:2px solid var(--black2);display:none}
.account-icon-mobile.logged-in .mini-dot{display:block}

/* ── Carrito / Wishlist — íconos del header (siempre visibles) ── */
.shop-icons{display:flex;align-items:center;gap:8px;margin-left:8px}
.shop-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--black3);border:1px solid #222;cursor:pointer;transition:.2s;color:var(--white)}
.shop-icon-btn:hover{border-color:var(--gold)}
.shop-icon-btn svg{width:17px;height:17px}
.shop-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:20px;background:var(--gold);color:var(--black);font-family:var(--font-m);font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center}
.shop-badge.show{display:flex}

/* ── Drawer lateral (carrito / wishlist) ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1200;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:100%;max-width:400px;background:var(--black2);z-index:1201;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.5)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #222}
.drawer-head h3{margin:0;font-size:1.3rem;color:var(--gold)}
.drawer-close{background:none;border:none;color:var(--gray);font-size:1.4rem;cursor:pointer;line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
.drawer-empty{color:var(--gray);text-align:center;padding:60px 0;font-size:.9rem}
.drawer-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #1c1c1c}
.drawer-item img{width:60px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--black3)}
.drawer-item-info{flex:1;min-width:0}
.drawer-item-name{font-size:.88rem;font-weight:600;margin-bottom:4px}
.drawer-item-price{font-family:var(--font-m);color:var(--gold);font-size:.85rem}
.drawer-item-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.qty-stepper{display:flex;align-items:center;gap:10px;background:var(--black3);border-radius:20px;padding:4px 10px}
.qty-stepper button{background:none;border:none;color:var(--gold);font-size:1rem;cursor:pointer;width:18px}
.qty-stepper span{font-family:var(--font-m);font-size:.82rem;min-width:14px;text-align:center}
.drawer-remove,.wish-move{background:none;border:none;color:var(--gray);font-size:.75rem;text-decoration:underline;cursor:pointer;padding:0}
.drawer-remove:hover{color:var(--red)}
.wish-move:hover{color:var(--gold)}
.drawer-foot{padding:20px;border-top:1px solid #222}
.drawer-subtotal{display:flex;justify-content:space-between;font-size:1rem;margin-bottom:14px}
.drawer-subtotal strong{color:var(--gold);font-family:var(--font-m)}
.checkout-email-row{margin-bottom:12px;display:none}
.checkout-email-row.show{display:block}
.checkout-email-row input{width:100%;padding:11px 14px;background:var(--black3);border:1px solid #2a2a2a;border-radius:8px;color:var(--white);font-family:var(--font-b);font-size:.9rem}
.checkout-email-row label{display:block;font-family:var(--font-m);font-size:.68rem;color:var(--gray);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.mobile-nav{display:none;position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top));left:0;right:0;background:rgba(10,10,10,.98);backdrop-filter:blur(20px);border-bottom:1px solid rgba(201,162,39,.15);z-index:899;flex-direction:column;padding:20px;gap:4px}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--font-m);font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:14px 16px;color:var(--gray);border-bottom:1px solid rgba(255,255,255,.05);transition:color .2s}
.mobile-nav a:hover{color:var(--gold)}
.mobile-nav .btn{margin-top:12px;width:100%;justify-content:center}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:calc(var(--nav-h) + env(safe-area-inset-top));position:relative;overflow:hidden}
/* Slider de fondo del hero: 2-3 videos (o fotos reales del estudio como respaldo si el video
   no carga) en loop con crossfade + efecto Ken Burns. Ver comentario en el HTML para instrucciones
   de qué archivos de video subir. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hero-slide.active{opacity:1}
.hero-slide video,.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;animation:heroKenBurns 18s ease-in-out infinite alternate}
.hero-slide:nth-child(2) video,.hero-slide:nth-child(2) img{animation-delay:-6s}
.hero-slide:nth-child(3) video,.hero-slide:nth-child(3) img{animation-delay:-12s}
@keyframes heroKenBurns{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero-media-overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 38%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.86) 100%),
  linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.15) 75%,rgba(0,0,0,.35) 100%),
  radial-gradient(ellipse 70% 60% at 65% 35%,rgba(201,162,39,.08) 0%,transparent 60%)}
@media(max-width:768px){
  .hero-media-overlay{background:
    linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,.66) 60%,rgba(0,0,0,.92) 100%),
    radial-gradient(ellipse 70% 60% at 65% 35%,rgba(201,162,39,.08) 0%,transparent 60%)}
}
.hero-sound-toggle{display:none;position:absolute;z-index:3;right:24px;bottom:28px;width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(201,162,39,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;cursor:pointer;color:var(--gold);transition:.2s}
.hero-sound-toggle:hover{border-color:var(--gold);background:rgba(0,0,0,.75)}
.hero-sound-toggle svg{width:18px;height:18px;pointer-events:none}
@media(max-width:768px){.hero-sound-toggle{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){
  .hero-slide video,.hero-slide img{animation:none}
  .hero-slide{transition:none}
}
/* Animación de entrada del logo en el nav (una sola vez, al cargar la página) */
.logo-intro{animation:logoIntro 1.3s cubic-bezier(.16,1,.3,1) both}
@keyframes logoIntro{
  0%{opacity:0;transform:scale(.82);filter:blur(6px) drop-shadow(0 0 0 rgba(201,162,39,0))}
  55%{opacity:1;filter:blur(0) drop-shadow(0 0 16px rgba(201,162,39,.6))}
  100%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 0 rgba(201,162,39,0))}
}
@media(prefers-reduced-motion:reduce){.logo-intro{animation:none}}

.hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 60% 40%,rgba(201,162,39,.08) 0%,transparent 60%),
  radial-gradient(ellipse 50% 50% at 10% 80%,rgba(201,162,39,.05) 0%,transparent 50%),
  linear-gradient(180deg,#000000 0%,#0d0d0d 100%)}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(201,162,39,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,39,.04) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 100%)}
.hero-content{position:relative;z-index:1;padding:80px 0}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.hero-eyebrow .line{width:40px;height:1px;background:var(--gold)}
.hero-eyebrow span{font-family:var(--font-m);font-size:11px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hero-title{font-family:var(--font-d);font-size:clamp(3.5rem,10vw,8rem);line-height:.95;letter-spacing:3px;margin-bottom:32px;text-shadow:0 4px 24px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.7)}
.hero-title .outline{-webkit-text-stroke:1px rgba(201,162,39,.85);color:transparent;text-shadow:0 4px 20px rgba(0,0,0,.65)}
.hero-title .gold{text-shadow:0 4px 20px rgba(0,0,0,.65),0 0 30px rgba(201,162,39,.25)}
.hero-sub{font-size:1.1rem;color:#e4e4e4;max-width:520px;margin-bottom:40px;line-height:1.7;text-shadow:0 2px 10px rgba(0,0,0,.75)}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-actions .btn-outline{background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.stats-band{padding:52px 0 56px;background:linear-gradient(180deg,rgba(201,162,39,.045) 0%,rgba(0,0,0,0) 75%)}
.stats-strip{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap}
.stat-item{flex:1 1 0;min-width:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px 26px;text-align:center}
.stat-item + .stat-item{border-left:1px solid rgba(255,255,255,.09)}
.stat-top{display:flex;align-items:center;gap:9px}
.stat-icon{width:19px;height:19px;flex:none;color:var(--gold);opacity:.9}
.stat-num{font-family:var(--font-d);font-size:2.5rem;color:var(--gold);line-height:1}
.stat-label{font-family:var(--font-m);font-size:10px;letter-spacing:2.5px;color:#bdbdbd;text-transform:uppercase}
.hero-vinyl{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:500px;height:500px;border-radius:50%;
  background:conic-gradient(from 0deg,#111 0deg,#1a1a1a 10deg,#111 20deg,#1a1a1a 30deg,#111 40deg,#1a1a1a 50deg,#111 60deg);
  box-shadow:0 0 80px rgba(201,162,39,.12),inset 0 0 60px rgba(0,0,0,.8);animation:spin 20s linear infinite;opacity:.35;pointer-events:none}
.hero-vinyl::after{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,#1a1a1a,#0a0a0a);box-shadow:0 0 0 2px rgba(201,162,39,.3)}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* MARQUEE */
.marquee-wrap{background:var(--gold);padding:12px 0;overflow:hidden}
.marquee-track{display:flex;gap:0;animation:marquee 38s linear infinite;white-space:nowrap}
.marquee-item{display:flex;align-items:center;gap:24px;padding:0 24px;font-family:var(--font-d);font-size:1rem;letter-spacing:3px;color:var(--black)}
.marquee-dot{width:6px;height:6px;background:var(--black);border-radius:50%;opacity:.4}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;justify-content:center;flex-wrap:wrap;white-space:normal}.marquee-item:nth-child(n+6){display:none}}
@media(max-width:600px){
  .marquee-wrap{padding:10px 0}
  .marquee-item{gap:16px;padding:0 16px;font-size:.85rem;letter-spacing:2px}
}
/* CTA bajo el marquee */
.marquee-cta{background:linear-gradient(180deg,rgba(201,162,39,.08) 0%,rgba(0,0,0,0) 78%);border-bottom:1px solid rgba(255,255,255,.05)}
.marquee-cta-inner{display:flex;align-items:center;justify-content:center;gap:14px 30px;flex-wrap:wrap;padding:26px 0 30px}
.marquee-cta-text{font-family:var(--font-m);font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray);margin:0;text-align:center}
.marquee-cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.marquee-cta .btn{padding:13px 28px}
.marquee-cta .btn-outline::after{content:'→';font-size:14px;line-height:1;transition:transform .25s ease}
.marquee-cta .btn-outline:hover::after{transform:translateX(4px)}
@media(max-width:860px){
  .marquee-cta-inner{flex-direction:column;gap:16px;padding:22px 0 26px}
}
@media(max-width:600px){
  .marquee-cta-inner{padding:20px 0 24px}
  .marquee-cta-actions{width:100%;flex-direction:column;gap:10px}
  .marquee-cta-actions .btn{width:100%;justify-content:center;padding:14px 18px}
}

/* SECTIONS */
.section{padding:100px 0}
.section-header{margin-bottom:60px}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px}
.service-card{background:var(--black2);padding:40px 32px;position:relative;overflow:hidden;cursor:pointer;transition:background .3s;border:1px solid rgba(201,162,39,.08)}
.service-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.service-card:hover{background:var(--black3)}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover .service-icon{color:var(--gold);transform:scale(1.1)}
.service-icon{color:var(--gray);margin-bottom:20px;display:block;transition:all .3s;line-height:1}
.service-icon svg{width:38px;height:38px;display:block}
.service-name{font-family:var(--font-d);font-size:1.6rem;letter-spacing:1px;margin-bottom:10px}
.service-desc{font-size:.9rem;color:var(--gray);line-height:1.6;margin-bottom:24px}
.service-price{font-family:var(--font-m);font-size:.85rem;color:var(--gold);letter-spacing:1px}
.service-listen-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid rgba(255,255,255,.12);color:var(--gray);font-family:var(--font-m);font-size:.72rem;letter-spacing:.5px;padding:5px 12px;border-radius:20px;cursor:pointer;transition:.2s}
.service-listen-btn:hover{border-color:var(--gold);color:var(--gold)}
.service-listen-btn.loading{color:var(--gold);border-color:rgba(201,162,39,.3)}
.service-listen-btn.loading .service-listen-icon{animation:pm-typing 1s infinite}
.service-listen-btn.playing{color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.08)}
.service-listen-icon{font-size:.85rem}
.service-badge{position:absolute;top:16px;right:16px;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.3);color:var(--gold);font-family:var(--font-m);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:20px}

/* STUDIO */
.photos-section{background:var(--black2)}
.photos-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.photo-card{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black3)}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;filter:brightness(.8) saturate(.7)}
.photo-card:hover img{transform:scale(1.05);filter:brightness(.9) saturate(.9)}
.photo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.9) 0%,transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px}
.photo-overlay h3{font-family:var(--font-d);font-size:1.8rem;letter-spacing:2px;margin-bottom:6px}
.photo-overlay p{font-size:.85rem;color:var(--gray)}
.photo-card-wide{grid-column:span 2}
.photo-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#111,#1a1a1a);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;aspect-ratio:4/3}

/* YOUTUBE */
.yt-section{background:var(--black)}
.yt-search-wrap{background:var(--black2);border:1px solid rgba(201,162,39,.15);border-radius:var(--radius);padding:40px}
.yt-input-row{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.yt-input{flex:1;min-width:200px;background:var(--black3);border:1px solid rgba(255,255,255,.1);color:var(--white);padding:14px 20px;border-radius:6px;font-size:.95rem;transition:border-color .2s}
.yt-input:focus{border-color:var(--gold)}
.yt-input::placeholder{color:rgba(255,255,255,.3)}
.yt-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.yt-card{background:var(--black3);border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .25s}
.yt-card:hover,.yt-card.selected{border-color:var(--gold);transform:translateY(-4px)}
.yt-card.selected{box-shadow:var(--glow)}
.yt-thumb{width:100%;aspect-ratio:16/9;object-fit:cover}
.yt-card-body{padding:12px}
.yt-card-title{font-size:.8rem;font-weight:600;line-height:1.4;color:var(--white)}
.yt-card-ch{font-size:.73rem;color:var(--gray);margin-top:4px}
.yt-loading{text-align:center;padding:40px;font-family:var(--font-m);font-size:.85rem;color:var(--gray);letter-spacing:2px}
.yt-player{margin-top:24px;border-radius:8px;overflow:hidden}
.yt-player iframe{width:100%;aspect-ratio:16/9}

/* MIDI */
.midi-section{background:var(--black2)}
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.genre-btn{background:var(--black3);border:1px solid rgba(201,162,39,.15);color:var(--white);padding:20px 16px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all .25s;font-family:var(--font-b)}
.genre-btn:hover,.genre-btn.active{background:rgba(201,162,39,.12);border-color:var(--gold);color:var(--gold);transform:translateY(-3px);box-shadow:var(--glow)}
.genre-emoji{font-size:2rem}
.genre-name{font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-align:center}
/* MIDI WIZARD */
.mw-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:48px;flex-wrap:wrap}
.mw-step-dot{display:flex;align-items:center;gap:10px}
.mw-step-num{width:32px;height:32px;border-radius:50%;background:var(--black3);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.8rem;color:var(--gray);transition:all .25s;flex-shrink:0}
.mw-step-label{font-family:var(--font-m);font-size:.68rem;letter-spacing:1.5px;color:var(--gray);text-transform:uppercase;white-space:nowrap}
.mw-step-dot.active .mw-step-num{background:var(--gold);border-color:var(--gold);color:var(--black)}
.mw-step-dot.active .mw-step-label{color:var(--gold)}
.mw-step-dot.done .mw-step-num{background:rgba(201,162,39,.15);border-color:var(--gold);color:var(--gold)}
.mw-step-dot.done .mw-step-num::after{content:'✓'}
.mw-step-dot.done .mw-step-num span{display:none}
.mw-step-line{width:28px;height:1px;background:rgba(255,255,255,.12)}
.mw-panel{max-width:720px;margin:0 auto 20px;background:var(--black3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:32px;opacity:.4;pointer-events:none;transition:opacity .3s;transform-origin:top}
.mw-panel.active{opacity:1;pointer-events:auto}
.mw-panel.hidden-panel{display:none}
.mw-step-title{font-family:var(--font-d);font-size:1.4rem;letter-spacing:1px;margin-bottom:6px;color:var(--white)}
.mw-step-sub{font-size:.82rem;color:var(--gray);margin-bottom:20px}
.mw-yt-row{display:flex;gap:10px;flex-wrap:wrap}
.mw-yt-row .form-input{flex:1;min-width:200px}
.mw-hint{font-size:.78rem;color:var(--gray);margin-top:12px}
.mw-hint a{color:var(--gold);text-decoration:underline;cursor:pointer}
.mw-skip{background:none;border:none;color:var(--gray);font-family:var(--font-m);font-size:.72rem;letter-spacing:1px;text-decoration:underline;cursor:pointer;margin-top:14px}
#mwYtPreview{margin-top:16px;display:none;align-items:center;gap:12px;background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.25);border-radius:8px;padding:12px 16px}
#mwYtPreview img{width:64px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}
#mwYtPreview p{font-size:.8rem;color:var(--white);line-height:1.4}
.mw-format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.mw-format-card{background:var(--black2);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:22px 18px;cursor:pointer;transition:all .25s;text-align:center}
.mw-format-card:hover{border-color:rgba(201,162,39,.4)}
.mw-format-card.active{border-color:var(--gold);background:rgba(201,162,39,.1);box-shadow:var(--glow)}
.mw-format-icon{font-size:1.8rem;margin-bottom:8px}
.mw-format-name{font-family:var(--font-d);font-size:1.15rem;letter-spacing:1px;margin-bottom:4px}
.mw-format-deposit{font-family:var(--font-m);font-size:.75rem;color:var(--gold)}
.mw-format-note{font-size:.68rem;color:var(--gray);margin-top:4px}
.mw-version-toggle{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.mw-toggle-btn{flex:1;min-width:160px;background:var(--black2);border:1px solid rgba(255,255,255,.1);color:var(--white);padding:14px;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .25s}
.mw-toggle-btn:hover{border-color:rgba(201,162,39,.4)}
.mw-toggle-btn.active{border-color:var(--gold);background:rgba(201,162,39,.1);color:var(--gold)}
.mw-subgenre-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mw-chip{background:var(--black2);border:1px solid rgba(255,255,255,.1);color:var(--white);padding:10px 16px;border-radius:20px;cursor:pointer;font-size:.78rem;transition:all .2s;text-align:left}
.mw-chip:hover{border-color:rgba(201,162,39,.4)}
.mw-chip.active{border-color:var(--gold);background:rgba(201,162,39,.12);color:var(--gold)}
.mw-summary{max-width:720px;margin:8px auto 0;background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.3);border-radius:var(--radius);padding:24px 28px;display:none}
.mw-summary.visible{display:block}
.mw-summary-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.85rem;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.mw-summary-row:last-of-type{border-bottom:none}
.mw-summary-label{color:var(--gray)}
.mw-summary-value{color:var(--white);font-weight:600;text-align:right}
.mw-summary-deposit{font-family:var(--font-d);font-size:1.8rem;color:var(--gold);letter-spacing:1px;margin:14px 0}
@media(max-width:640px){.mw-panel{padding:22px}.mw-step-label{display:none}}

/* HUMAN NOTE */
.human-note{background:linear-gradient(135deg,rgba(201,162,39,.08) 0%,rgba(201,162,39,.03) 100%);border:1px solid rgba(201,162,39,.25);border-radius:var(--radius);padding:48px;display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.human-icon{font-size:4rem;flex-shrink:0;background:rgba(201,162,39,.1);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center}
.human-body{flex:1;min-width:260px}
.human-body h3{font-family:var(--font-d);font-size:2rem;letter-spacing:2px;margin-bottom:12px}
.human-body p{color:var(--gray);line-height:1.7}
.human-body .tag{display:inline-block;background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.3);color:var(--gold);font-family:var(--font-m);font-size:10px;letter-spacing:2px;padding:5px 12px;border-radius:20px;margin-top:16px}

/* PAYMENT */
.payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.payment-card{background:var(--black2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:32px 24px;text-align:center;transition:border-color .25s,transform .25s}
.payment-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.payment-logo{font-size:2.5rem;margin-bottom:12px;display:block}
.payment-name{font-family:var(--font-d);font-size:1.4rem;letter-spacing:2px;margin-bottom:6px}
.payment-info{font-family:var(--font-m);font-size:.75rem;color:var(--gray);letter-spacing:1px}

/* MERCH */
.merch-section{background:var(--black2)}
.merch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.merch-card{background:var(--black3);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.05);transition:all .3s}
.merch-card:hover{border-color:rgba(201,162,39,.35);transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.merch-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:5rem;background:var(--black2);position:relative;overflow:hidden}
.wish-heart{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;background:rgba(8,8,8,.55);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;z-index:2}
.wish-heart svg{width:16px;height:16px;color:var(--white);transition:.2s}
.wish-heart:hover{border-color:var(--red)}
.wish-heart.active svg{color:var(--red);fill:var(--red)}
.merch-badge{position:absolute;top:12px;right:12px;background:var(--gold);color:var(--black);font-family:var(--font-m);font-size:9px;letter-spacing:2px;padding:4px 10px;border-radius:20px;font-weight:700;z-index:2}
.merch-body{padding:20px}
.merch-name{font-family:var(--font-d);font-size:1.3rem;letter-spacing:1px;margin-bottom:4px}
.merch-desc{font-size:.82rem;color:var(--gray);margin-bottom:16px}
.merch-footer{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.merch-footer .merch-price{text-align:left}
.merch-footer .btn{width:100%;justify-content:center}
.merch-price{font-family:var(--font-m);color:var(--gold);font-size:1.1rem}
.btn-sm{padding:9px 18px;font-size:11px;white-space:nowrap}
.merch-card{cursor:pointer}

/* PRODUCT MODAL */
.product-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:1300;opacity:0;pointer-events:none;transition:opacity .25s}
.product-modal-overlay.open{opacity:1;pointer-events:auto}
.product-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.97);width:100%;max-width:900px;max-height:88vh;background:var(--black2);border:1px solid rgba(201,162,39,.2);border-radius:16px;z-index:1301;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;overflow-y:auto;overflow-x:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.product-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.product-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(8,8,8,.6);border:1px solid rgba(255,255,255,.15);color:var(--white);font-size:1.1rem;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;transition:.2s}
.product-modal-close:hover{border-color:var(--gold);color:var(--gold)}
.product-modal-inner{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.product-modal-gallery{background:var(--black3);display:flex;flex-direction:column;padding:20px;gap:14px;position:sticky;top:0}
.product-modal-main-img{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--black);display:flex;align-items:center;justify-content:center}
.product-modal-main-img img{width:100%;height:100%;object-fit:cover}
.product-modal-badge{position:absolute;top:12px;right:12px;background:var(--gold);color:var(--black);font-family:var(--font-m);font-size:9px;letter-spacing:2px;padding:4px 10px;border-radius:20px;font-weight:700}
.product-modal-badge:empty{display:none}
.product-modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(8,8,8,.55);border:1px solid rgba(255,255,255,.15);color:var(--white);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.product-modal-nav:hover{border-color:var(--gold);color:var(--gold)}
.product-modal-nav.prev{left:12px}
.product-modal-nav.next{right:12px}
.product-modal-thumbs{display:flex;gap:10px;justify-content:center}
.product-modal-thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.6;transition:.2s;flex-shrink:0;background:var(--black)}
.product-modal-thumb img{width:100%;height:100%;object-fit:cover}
.product-modal-thumb.active{border-color:var(--gold);opacity:1}
.product-modal-info{padding:36px 40px;display:flex;flex-direction:column}
.product-modal-info h3{font-family:var(--font-d);font-size:2rem;letter-spacing:1px;margin-bottom:14px}
.product-modal-desc{color:var(--gray);font-size:.95rem;line-height:1.7;margin-bottom:24px}
.product-modal-sizes-label{font-family:var(--font-m);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.product-modal-sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.product-modal-sizes:empty{display:none;margin-bottom:0}
.pm-size-chip{font-family:var(--font-m);font-size:.72rem;letter-spacing:1px;color:var(--white);background:var(--black3);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:8px 16px;cursor:pointer;transition:.2s}
.pm-size-chip:hover{border-color:var(--gold);color:var(--gold)}
.pm-size-chip.active{background:var(--gold);border-color:var(--gold);color:var(--black);font-weight:700}
.pm-size-chip.single{cursor:default;background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.3);color:var(--gold)}
.pm-size-hint{font-size:.72rem;color:var(--red);margin:2px 0 18px;display:none}
.pm-size-hint.show{display:block}
.product-modal-price{font-family:var(--font-m);color:var(--gold);font-size:1.6rem;margin-top:14px;margin-bottom:6px}
.product-modal-shipping{color:var(--gray);font-size:.78rem;margin-bottom:20px}
#pmAddBtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:720px){
  .product-modal{max-width:calc(100% - 24px);max-height:92vh;border-radius:14px}
  .product-modal-inner{grid-template-columns:1fr}
  .product-modal-gallery{padding:16px;position:static}
  .product-modal-info{padding:24px}
  .product-modal-info h3{font-size:1.5rem}
}

/* TRIVIA */
.trivia-section{background:var(--black)}
.trivia-banner{background:var(--black2);border:1px solid rgba(201,162,39,.2);border-radius:var(--radius);padding:60px;text-align:center;position:relative;overflow:hidden}
.trivia-banner::before{content:'';position:absolute;left:-20px;top:-20px;width:150px;height:150px;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzlBODRDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAxOFY1bDEyLTJ2MTMiIC8+IDxjaXJjbGUgY3g9IjYiIGN5PSIxOCIgcj0iMyIgLz4gPGNpcmNsZSBjeD0iMTgiIGN5PSIxNiIgcj0iMyIgLz48L3N2Zz4=') no-repeat center/contain;opacity:.06}
.trivia-banner::after{content:'';position:absolute;right:-20px;bottom:-20px;width:150px;height:150px;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzlBODRDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtMTEuOSAxMi4xIDQuNTE0LTQuNTE0IiAvPiA8cGF0aCBkPSJNMjAuMSAyLjNhMSAxIDAgMCAwLTEuNCAwbC0xLjExNCAxLjExNEEyIDIgMCAwIDAgMTcgNC44Mjh2MS4zNDRhMiAyIDAgMCAxLS41ODYgMS40MTRBMiAyIDAgMCAxIDE3LjgyOCA3aDEuMzQ0YTIgMiAwIDAgMCAxLjQxNC0uNTg2TDIxLjcgNS4zYTEgMSAwIDAgMCAwLTEuNHoiIC8+IDxwYXRoIGQ9Im02IDE2IDIgMiIgLz4gPHBhdGggZD0iTTguMjMgOS44NUEzIDMgMCAwIDEgMTEgOGE1IDUgMCAwIDEgNSA1IDMgMyAwIDAgMS0xLjg1IDIuNzdsLS45Mi4zOEEyIDIgMCAwIDAgMTIgMThhNCA0IDAgMCAxLTQgNCA2IDYgMCAwIDEtNi02IDQgNCAwIDAgMSA0LTQgMiAyIDAgMCAwIDEuODUtMS4yM3oiIC8+PC9zdmc+') no-repeat center/contain;opacity:.06}
.trivia-title{font-family:var(--font-d);font-size:clamp(2rem,6vw,4rem);letter-spacing:3px;margin-bottom:16px}
.trivia-desc{color:var(--gray);font-size:1rem;max-width:500px;margin:0 auto 32px}
.trivia-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
.trivia-modal.open{display:flex}
.trivia-box{background:var(--black2);border:1px solid rgba(201,162,39,.25);border-radius:16px;max-width:560px;width:100%;padding:48px 40px;position:relative;margin:auto}
.trivia-q-num{font-family:var(--font-m);font-size:11px;letter-spacing:3px;color:var(--gold);margin-bottom:16px}
.trivia-question{font-family:var(--font-d);font-size:1.8rem;letter-spacing:1px;margin-bottom:28px}
.trivia-options{display:flex;flex-direction:column;gap:12px}
.trivia-opt{background:var(--black3);border:1px solid rgba(255,255,255,.08);color:var(--white);padding:16px 20px;border-radius:8px;cursor:pointer;font-size:.95rem;text-align:left;transition:all .2s}
.trivia-opt:hover{border-color:var(--gold);color:var(--gold)}
.trivia-opt.correct{border-color:#4caf50;background:rgba(76,175,80,.1);color:#4caf50}
.trivia-opt.wrong{border-color:var(--red);background:rgba(230,57,70,.1);color:var(--red)}
.trivia-score{font-family:var(--font-m);font-size:.85rem;color:var(--gray);margin-bottom:24px}
.trivia-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.06);border:none;color:var(--white);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center}

/* BOOKING */
.booking-section{background:var(--black2)}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.booking-form-wrap{background:var(--black3);border:1px solid rgba(201,162,39,.12);border-radius:var(--radius);padding:40px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.form-group label{font-family:var(--font-m);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gray)}
.form-input{background:var(--black2);border:1px solid rgba(255,255,255,.08);color:var(--white);padding:14px 16px;border-radius:6px;font-size:.9rem;transition:border-color .2s;width:100%}
.form-input:focus{border-color:var(--gold)}
.form-input::placeholder{color:rgba(255,255,255,.25)}
textarea.form-input{min-height:120px;resize:vertical}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
select.form-input option{background:var(--black2)}
.pay-opt{background:var(--black2);border:1px solid rgba(255,255,255,.08);color:var(--white);padding:14px 10px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .2s;font-family:var(--font-b);width:100%}
.pay-opt:hover{border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.06)}
.pay-opt.active{border-color:var(--gold);background:rgba(201,162,39,.12);box-shadow:var(--glow)}
.booking-info h3{font-family:var(--font-d);font-size:2rem;letter-spacing:2px;margin-bottom:20px}
.booking-info p{color:var(--gray);line-height:1.7;margin-bottom:24px}
.info-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.info-list li{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--gray)}
.info-list li::before{content:'✦';color:var(--gold);font-size:.7rem;flex-shrink:0}
.form-msg{padding:14px 18px;border-radius:6px;font-size:.88rem;margin-bottom:20px;display:none}
.form-msg.success{background:rgba(76,175,80,.12);border:1px solid #4caf50;color:#4caf50;display:block}
.form-msg.error{background:rgba(230,57,70,.1);border:1px solid var(--red);color:var(--red);display:block}

/* FOOTER */
footer{background:var(--black);border-top:1px solid rgba(201,162,39,.1);padding:60px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:32px}
.footer-brand .tagline{font-size:.88rem;color:var(--gray);margin-top:16px;line-height:1.6;max-width:260px}
.footer-col h4{font-family:var(--font-m);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{font-size:.88rem;color:var(--gray);transition:color .2s}
.footer-col ul li a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-family:var(--font-m);font-size:.75rem;color:rgba(255,255,255,.25);letter-spacing:1px}
.social-links{display:flex;gap:10px}
.social-links a{width:38px;height:38px;background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);transition:all .25s}
.social-links a svg{width:17px;height:17px;fill:#C9A227;transition:fill .25s}
.social-links a:hover{background:var(--gold);border-color:var(--gold);box-shadow:0 0 18px rgba(201,162,39,.4);transform:translateY(-2px)}
.social-links a:hover svg{fill:#000000}

/* BOTTOM NAV */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,10,.96);backdrop-filter:blur(20px);border-top:1px solid rgba(201,162,39,.15);z-index:800;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:stretch}
.bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 10px;cursor:pointer;transition:all .2s;background:none;border:none;font-family:var(--font-b);flex:1;min-width:0}
.bnav-icon{width:26px;height:26px;display:block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:rgba(201,162,39,.5);transition:background-color .2s;}
.bnav-item.active .bnav-icon,.bnav-item:hover .bnav-icon{background-color:#C9A227;}
.bnav-label{font-size:.55rem;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:rgba(201,162,39,.5);transition:color .2s;white-space:nowrap}
.bnav-item.active .bnav-label,.bnav-item:hover .bnav-label{color:#C9A227}

/* SCROLL TOP */
.floating-btns{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom));right:20px;z-index:700;display:flex;flex-direction:column;align-items:center;gap:12px}
.wa-btn{width:52px;height:52px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.4);opacity:0;pointer-events:none;transition:all .3s;text-decoration:none;border:none;animation:wa-pulse 2.5s infinite}
.wa-btn.visible{opacity:1;pointer-events:all}
.wa-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.6)}
.wa-btn svg{width:28px;height:28px;fill:#fff}
.scroll-top{width:44px;height:44px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--glow);opacity:0;pointer-events:none;transition:all .3s;font-size:1rem;color:var(--black);border:none}
.scroll-top.visible{opacity:1;pointer-events:all}
.scroll-top:hover{transform:scale(1.1);background:var(--gold2)}
@keyframes wa-pulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,.4)}50%{box-shadow:0 4px 20px rgba(37,211,102,.4),0 0 0 10px rgba(37,211,102,0)}}
.wa-tooltip{position:absolute;right:60px;background:#1a1a1a;color:#fff;font-size:12px;padding:8px 14px;border-radius:8px;white-space:nowrap;border:1px solid rgba(37,211,102,.3);opacity:0;pointer-events:none;transition:opacity .2s;font-family:var(--font-m);letter-spacing:1px}
.wa-btn:hover .wa-tooltip{opacity:1}

/* ASISTENTE VIRTUAL */
.assistant-btn{width:52px;height:52px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--glow);border:none;position:relative;transition:all .3s;color:var(--black)}
.assistant-btn:hover{transform:scale(1.1)}
.assistant-btn svg{width:24px;height:24px}
.assistant-tooltip{position:absolute;right:60px;background:#1a1a1a;color:#fff;font-size:12px;padding:8px 14px;border-radius:8px;white-space:nowrap;border:1px solid rgba(201,162,39,.3);opacity:0;pointer-events:none;transition:opacity .2s;font-family:var(--font-m);letter-spacing:1px}
.assistant-btn:hover .assistant-tooltip{opacity:1}
.assistant-panel{position:fixed;bottom:24px;right:24px;width:380px;max-width:calc(100vw - 24px);height:min(560px,calc(100vh - 100px));background:var(--black2);border:1px solid rgba(201,162,39,.25);border-radius:18px;z-index:1250;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:opacity .25s,transform .25s;overflow:hidden}
.assistant-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.assistant-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #222;background:rgba(201,162,39,.05)}
.assistant-head-info{display:flex;align-items:center;gap:10px}
.assistant-avatar{width:38px;height:38px;border-radius:50%;background:rgba(201,162,39,.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.assistant-name{font-family:var(--font-d);font-size:1.05rem;letter-spacing:1px}
.assistant-status{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--gray);margin-top:2px}
.assistant-dot{width:7px;height:7px;border-radius:50%;background:#4caf7d}
.assistant-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.assistant-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:.85rem;line-height:1.55}
.assistant-msg.bot{align-self:flex-start;background:var(--black3);border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:4px}
.assistant-msg.bot a{color:var(--gold);text-decoration:underline;font-weight:600}
.assistant-msg.bot strong{color:var(--gold)}
.assistant-msg.user{align-self:flex-end;background:var(--gold);color:var(--black);font-weight:500;border-bottom-right-radius:4px}
.assistant-msg.typing{display:flex;gap:4px;align-items:center;padding:14px}
.assistant-msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--gray);animation:pm-typing 1.2s infinite}
.assistant-msg.typing span:nth-child(2){animation-delay:.2s}
.assistant-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes pm-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.assistant-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.assistant-chip{font-size:.72rem;background:var(--black3);border:1px solid rgba(201,162,39,.25);color:var(--gold);padding:6px 12px;border-radius:20px;cursor:pointer;transition:.2s}
.assistant-chip:hover{background:rgba(201,162,39,.15)}
.assistant-input-row{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #222}
.assistant-input-row input{flex:1;background:var(--black3);border:1px solid rgba(255,255,255,.1);color:var(--white);padding:11px 14px;border-radius:20px;font-size:.85rem}
.assistant-input-row input:focus{border-color:var(--gold)}
.assistant-input-row button{width:40px;height:40px;border-radius:50%;background:var(--gold);border:none;color:var(--black);font-size:1rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.2s}
.assistant-input-row button:hover{transform:scale(1.08)}
.assistant-input-row button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.assistant-disclaimer{font-size:.62rem;color:var(--gray);text-align:center;padding:0 14px 12px}
@media(max-width:480px){
  .assistant-panel{right:12px;left:12px;bottom:calc(70px + env(safe-area-inset-bottom));width:auto;height:min(65vh,560px)}
}
/* ANIMATIONS */
.fade-in{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:none}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.4)}50%{box-shadow:0 0 0 12px rgba(201,162,39,0)}}
.pulse{animation:pulse-gold 2.5s infinite}
.dots::after{content:'...';animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ═══════════════════════════════════════
   RESPONSIVE — Mobile-first completo
═══════════════════════════════════════ */

/* Tablet grande / Desktop pequeño */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .booking-grid{grid-template-columns:1fr;gap:40px}
  .booking-info{order:-1}
  .hero-vinyl{display:none}
  .services-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

/* Tablet */
@media(max-width:768px){
  /* Nav */
  .nav-desktop{display:none}
  .hamburger{display:flex}
  .account-icon-mobile{display:flex}
  .bottom-nav{display:block}
  body{padding-bottom:72px}

  /* Hero */
  .hero{min-height:calc(100svh - var(--nav-h) - env(safe-area-inset-top));padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 16px)}
  .hero-content{padding:48px 0 40px}
  .hero-title{font-size:clamp(3rem,12vw,6rem);margin-bottom:20px}
  .hero-sub{font-size:1rem;margin-bottom:28px;max-width:100%}
  .hero-actions{gap:12px}
  .hero-actions .btn{padding:12px 24px;font-size:11px}
  .stats-band{padding:44px 0 48px}
  .stat-item{padding:6px 14px;min-width:130px}
  .stat-num{font-size:2rem}
  .stat-icon{width:17px;height:17px}

  /* Sections */
  .section{padding:72px 0}
  .section-header{margin-bottom:40px}
  .section-title{font-size:clamp(2rem,8vw,3.5rem)}

  /* Services */
  .services-grid{grid-template-columns:1fr 1fr;gap:2px}
  .service-card{padding:28px 20px}
  .service-icon svg{width:30px;height:30px}
  .service-name{font-size:1.3rem}
  .service-desc{font-size:.85rem}

  /* Studio */
  .photos-grid{grid-template-columns:1fr}
  .photo-card-wide{grid-column:span 1}
  .photo-card{aspect-ratio:16/9}

  /* YouTube */
  .yt-search-wrap{padding:24px 16px}
  .yt-input-row{flex-direction:column;gap:10px}
  .yt-input{min-width:100%}
  .yt-results{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

  /* MIDI */
  .genre-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .genre-btn{padding:16px 10px}
  .genre-emoji{font-size:1.6rem}
  .genre-name{font-size:.72rem}

  /* Human note */
  .human-note{padding:28px 20px;gap:20px}
  .human-icon{width:60px;height:60px;font-size:2.8rem}
  .human-body{min-width:unset}
  .human-body h3{font-size:1.5rem}

  /* Payment */
  .payment-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .payment-card{padding:24px 16px}

  /* Merch */
  .merch-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .merch-body{padding:14px}
  .merch-name{font-size:1.1rem}

  /* Trivia */
  .trivia-banner{padding:40px 24px}
  .trivia-box{padding:28px 20px;margin:0 4px}
  .trivia-question{font-size:1.4rem;margin-bottom:20px}
  .trivia-opt{padding:13px 16px;font-size:.88rem}

  /* Booking */
  .booking-form-wrap{padding:24px 20px}
  .form-row{grid-template-columns:1fr}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:span 2}
  footer{padding:48px 0 20px}

  /* Floating */
  .floating-btns{bottom:calc(96px + env(safe-area-inset-bottom));right:14px}
}

/* Móvil grande */
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr}
  .merch-grid{grid-template-columns:1fr 1fr}
  .payment-grid{grid-template-columns:1fr 1fr}
}

/* Móvil */
@media(max-width:480px){
  /* Badge del merch: fuera de la foto del producto (la tarjeta es horizontal aqui) */
  .merch-card{position:relative}
  .merch-img{position:static}
  .merch-badge{top:10px;right:10px;font-size:8px;padding:3px 8px;letter-spacing:1.5px}
  .merch-name{padding-right:92px}
  .container{padding:0 14px}
  .section{padding:56px 0}
  .section-header{margin-bottom:32px}

  /* Hero */
  .hero-title{font-size:clamp(2.8rem,14vw,4rem);letter-spacing:2px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-actions .btn{width:100%;justify-content:center}
  /* 2 columnas en móvil; el último dato ocupa la fila completa para no dejar hueco */
  /* 2 columnas; el quinto dato ocupa la fila completa para no dejar hueco */
  .stats-band{padding:36px 0 40px}
  .stats-strip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
  .stat-item{padding:18px 8px;background:var(--black)}
  .stat-item + .stat-item{border-left:none}
  .stats-strip .stat-item:last-child{grid-column:1/-1}
  .stat-num{font-size:1.85rem}
  .stat-label{font-size:9px;letter-spacing:1.6px}
  .stat-icon{width:16px;height:16px}
  .stat-top{gap:7px}

  /* Services */
  .services-grid{grid-template-columns:1fr}
  .service-card{padding:24px 18px}

  /* Merch */
  .merch-grid{grid-template-columns:1fr}
  .merch-card{display:grid;grid-template-columns:120px 1fr}
  .merch-img{aspect-ratio:1;border-radius:0}
  .merch-body{padding:16px}

  /* Payment */
  .payment-grid{grid-template-columns:1fr 1fr;gap:10px}
  .payment-card{padding:20px 12px}
  .payment-name{font-size:1.1rem}

  /* Genre */
  .genre-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .genre-btn{padding:14px 8px}
  .genre-emoji{font-size:1.4rem}
  .genre-name{font-size:.65rem;letter-spacing:.5px}

  /* Trivia */
  .trivia-box{padding:24px 16px}
  .trivia-question{font-size:1.2rem}
  .trivia-opt{padding:12px 14px;font-size:.85rem}
  .share-grid{grid-template-columns:1fr 1fr}
  .s-copy{grid-column:span 2}

  /* Booking */
  .booking-form-wrap{padding:20px 14px}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-brand{grid-column:span 1}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .social-links{gap:8px}

  /* Human note */
  .human-note{flex-direction:column;padding:24px 16px;gap:16px}

  /* YT */
  .yt-search-wrap{padding:20px 14px}
  .yt-results{grid-template-columns:repeat(2,1fr);gap:8px}
}

/* Móvil pequeño */
@media(max-width:380px){
  .merch-img{position:relative}
  .merch-badge{top:8px;right:8px}
  .merch-name{padding-right:0}
  .hero-title{font-size:clamp(2.4rem,15vw,3.2rem)}
  .genre-grid{grid-template-columns:repeat(2,1fr)}
  .merch-grid{grid-template-columns:1fr}
  .merch-card{display:block}
  .merch-img{aspect-ratio:16/9}
  .payment-grid{grid-template-columns:1fr}
  .bnav-label{display:none}
  .bnav-item{padding:8px 8px}
  .bnav-icon{width:28px;height:28px}
}

/* TRIVIA SHARE */
.share-card{background:linear-gradient(135deg,#0d0d0d 0%,#1a1a1a 100%);border:1px solid rgba(201,162,39,.35);border-radius:14px;padding:28px 20px;text-align:center;margin-bottom:20px}
.share-score-big{font-family:var(--font-d);font-size:4.5rem;color:var(--gold);line-height:1;letter-spacing:4px}
.share-score-sub{font-family:var(--font-m);font-size:10px;letter-spacing:4px;color:var(--gray);text-transform:uppercase;margin-top:4px;margin-bottom:12px;display:block}
.share-msg{font-size:.9rem;color:var(--white);margin-bottom:6px;font-weight:600}
.share-brand{font-family:var(--font-d);font-size:1rem;letter-spacing:5px;color:var(--gold);opacity:.6;margin-top:10px;display:block}
.share-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.share-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border-radius:8px;font-family:var(--font-m);font-size:9px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:none;transition:all .2s;font-weight:700;white-space:nowrap}
.share-btn:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.share-btn svg{width:15px;height:15px;flex-shrink:0}
.s-wa{background:#25D366;color:#fff}
.s-tg{background:#229ED9;color:#fff}
.s-fb{background:#1877F2;color:#fff}
.s-tw{background:#000;color:#fff;border:1px solid #333}
.s-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.s-copy{background:var(--black3);color:var(--gold);border:1px solid rgba(201,162,39,.4);grid-column:span 3}
@media(max-width:400px){.share-grid{grid-template-columns:1fr 1fr}.s-copy{grid-column:span 2}}

/* ── BANNER PWA ── */
#pwa-install-banner.visible{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
@media(max-width:480px){
  #pwa-install-banner{bottom:76px;width:calc(100vw - 28px)}
}

/* ── FOOTER ── */
footer{background:var(--black);border-top:1px solid rgba(201,162,39,.12);padding:0 0 22px}
/* Newsletter */
.foot-news{display:grid;grid-template-columns:1fr auto;gap:26px 40px;align-items:center;padding:38px 0 34px;border-bottom:1px solid rgba(255,255,255,.06)}
.foot-news-title{font-family:var(--font-d);font-size:1.9rem;letter-spacing:1.5px;color:var(--white);line-height:1.05;margin:0}
.foot-news-sub{font-size:.9rem;color:var(--gray);margin:8px 0 0;max-width:46ch;line-height:1.6}
.foot-news-form{display:flex;gap:10px;flex-wrap:wrap;min-width:min(420px,100%)}
.foot-news-form input{flex:1;min-width:200px;background:var(--black2);border:1px solid rgba(255,255,255,.12);color:var(--white);padding:14px 16px;border-radius:6px;font-size:.9rem;transition:border-color .2s}
.foot-news-form input:focus{border-color:var(--gold)}
.foot-news-form input::placeholder{color:rgba(255,255,255,.28)}
.foot-news-msg{font-size:.82rem;margin:10px 0 0;display:none;line-height:1.5}
.foot-news-msg.show{display:block}
.foot-news-msg.ok{color:#4caf7d}
.foot-news-msg.err{color:var(--red)}
.foot-news-note{font-size:.72rem;color:#666;margin:10px 0 0}
.foot-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
/* Grid principal */
.footer-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr 1.15fr;gap:40px;padding:44px 0 40px;border-bottom:1px solid rgba(255,255,255,.05)}
.footer-brand .tagline{font-size:.88rem;color:var(--gray);margin-top:16px;line-height:1.6;max-width:280px}
.footer-col h4,.foot-head{font-family:var(--font-m);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 18px;display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:0;text-align:left}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{font-size:.88rem;color:var(--gray);transition:color .2s}
.footer-col ul li a:hover{color:var(--gold)}
.foot-acc-icon{display:none}
/* Contacto directo */
.foot-contact{display:flex;flex-direction:column;gap:9px}
.foot-line{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);transition:.25s}
.foot-line:hover{border-color:rgba(201,162,39,.45);background:rgba(201,162,39,.05);transform:translateX(3px)}
.foot-line svg{width:17px;height:17px;flex:none;color:var(--gold)}
.foot-line-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.foot-line-lbl{font-family:var(--font-m);font-size:8.5px;letter-spacing:1.8px;text-transform:uppercase;color:#8a8a8a}
.foot-line-val{font-size:.88rem;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot-line.is-wa:hover{border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.07)}
.foot-line.is-wa svg{color:#25d366}
/* Horario */
.foot-hours{margin-top:22px}
.foot-hours-row{display:flex;justify-content:space-between;gap:14px;font-size:.83rem;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.foot-hours-row:last-child{border-bottom:none}
.foot-hours-day{color:var(--gray)}
.foot-hours-time{color:var(--white);font-family:var(--font-m);font-size:.76rem;letter-spacing:.5px}
.foot-hours-row.closed .foot-hours-time{color:#6a6a6a}
.foot-open-now{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--font-m);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;padding:5px 11px;border-radius:20px;border:1px solid rgba(76,175,125,.35);background:rgba(76,175,125,.1);color:#4caf7d}
.foot-open-now.closed{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#8a8a8a}
.foot-open-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
/* Social */
.social-links{display:flex;gap:10px;margin-top:22px}
.social-links a{width:38px;height:38px;background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);transition:all .25s}
.social-links a svg{width:17px;height:17px;fill:#C9A227;transition:fill .25s}
.social-links a:hover{background:var(--gold);border-color:var(--gold);box-shadow:0 0 18px rgba(201,162,39,.4);transform:translateY(-2px)}
.social-links a:hover svg{fill:#000}
/* Barra inferior */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px}
.footer-bottom p{font-family:var(--font-m);font-size:.72rem;color:rgba(255,255,255,.25);letter-spacing:1px}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{font-size:.75rem;color:rgba(255,255,255,.35);transition:color .2s}
.foot-legal a:hover{color:var(--gold)}
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-brand{grid-column:span 2}
  .foot-news{grid-template-columns:1fr;gap:18px}
}
@media(max-width:600px){
  .foot-news{padding:30px 0 26px}
  .foot-news-title{font-size:1.5rem}
  .foot-news-form{min-width:0;flex-direction:column}
  .foot-news-form input,.foot-news-form .btn{width:100%;justify-content:center}
  .footer-grid{grid-template-columns:1fr;gap:0;padding:26px 0 30px}
  .footer-brand{grid-column:span 1;padding-bottom:24px}
  /* En móvil las listas de enlaces se pliegan para que el footer no sea infinito */
  .footer-col{border-top:1px solid rgba(255,255,255,.06)}
  .footer-col h4,.foot-head{padding:16px 0;margin:0;cursor:pointer}
  .foot-acc-icon{display:block;font-size:14px;color:var(--gold);transition:transform .3s}
  .footer-col.open .foot-acc-icon{transform:rotate(45deg)}
  .footer-col ul{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0}
  .footer-col.open ul{max-height:460px;padding:0 0 18px}
  .foot-block{border-top:1px solid rgba(255,255,255,.06);padding:20px 0 4px}
  .foot-hours{margin-top:16px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
/* ════════════════════════════════════════════
   PÁGINAS INTERNAS (merch, legales, …)
   Lo que comparten todas las páginas que no son la portada: la barra de
   migas, el enlace del menú marcado como actual y el formato de los
   documentos legales. Vive aquí para no repetirlo en cada archivo.
   ════════════════════════════════════════════ */
.page-crumb{padding:calc(var(--nav-h) + 34px) 0 0;font-family:var(--font-m);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#666}
.page-crumb a{color:#888;text-decoration:none;transition:color .2s}
.page-crumb a:hover{color:var(--gold)}
.page-crumb span{color:var(--gold);margin-left:6px}
.page-crumb span::before{content:'/';color:#444;margin-right:8px}
.nav-desktop a.is-active,.mobile-nav a.ml.is-active{color:var(--gold)}

/* ── Documentos legales ── */
.legal-section{padding:34px 0 100px}
.legal-wrap{max-width:760px;margin:0 auto}
.legal-updated{font-family:var(--font-m);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#666;margin:-34px 0 40px;text-align:center}
.legal-lead{color:var(--gray);font-size:1rem;line-height:1.8;margin-bottom:34px}
.legal-block{margin-bottom:34px}
.legal-block h3{font-family:var(--font-d);font-size:1.35rem;letter-spacing:1px;color:var(--white);margin-bottom:12px}
.legal-block h4{font-size:.95rem;font-weight:600;color:var(--gold);margin:20px 0 8px}
.legal-block p{color:var(--gray);font-size:.94rem;line-height:1.8;margin-bottom:12px}
.legal-block ul{color:var(--gray);font-size:.94rem;line-height:1.8;margin:0 0 12px 20px}
.legal-block li{margin-bottom:6px}
.legal-block a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.legal-block strong{color:var(--white);font-weight:600}
/* Recuadro para avisos importantes (plazos, límites, derechos) */
.legal-note{background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.25);border-radius:var(--radius);padding:20px 22px;margin:22px 0}
.legal-note p{margin-bottom:0}
.legal-note .legal-note-title{font-family:var(--font-m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
/* Datos de una agencia (DACO, FTC…) */
.legal-agency{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.legal-agency-card{background:var(--black3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:20px}
.legal-agency-card h4{margin-top:0}
.legal-agency-card p{font-size:.86rem;margin-bottom:4px}

/* ── Formulario de reclamaciones ── */
.claim-form{background:var(--black2);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:32px;margin:8px 0 34px}
.claim-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.claim-field{margin-bottom:16px}
.claim-field label{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);margin-bottom:7px}
.claim-field input,.claim-field select,.claim-field textarea{width:100%;background:var(--black3);border:1px solid rgba(255,255,255,.1);color:var(--white);padding:13px 14px;border-radius:8px;font-size:.92rem;font-family:var(--font-b);transition:border-color .2s}
.claim-field input:focus,.claim-field select:focus,.claim-field textarea:focus{border-color:var(--gold);outline:none}
.claim-field input::placeholder,.claim-field textarea::placeholder{color:rgba(255,255,255,.25)}
.claim-field textarea{resize:vertical;min-height:120px;line-height:1.6}
.claim-field .claim-hint{font-size:.76rem;color:#666;margin-top:6px}
.claim-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.claim-msg{font-size:.9rem;line-height:1.6;margin-top:14px;display:none;padding:14px 16px;border-radius:8px}
.claim-msg.show{display:block}
.claim-msg.ok{color:#4caf7d;background:rgba(76,175,125,.08);border:1px solid rgba(76,175,125,.3)}
.claim-msg.err{color:var(--red);background:rgba(230,57,70,.08);border:1px solid rgba(230,57,70,.3)}
.claim-ticket{font-family:var(--font-m);font-size:1.05rem;letter-spacing:2px;color:var(--gold);display:block;margin-top:8px}
@media(max-width:600px){
  .page-crumb{padding-top:calc(var(--nav-h) + 22px)}
  .legal-section{padding-bottom:70px}
  .legal-updated{margin:-24px 0 30px}
  .claim-form{padding:22px 18px}
  .claim-row{grid-template-columns:1fr;gap:0}
}

/* Aviso de que el impuesto se calcula al pagar — evita la sorpresa en Stripe */
.drawer-tax-note{font-size:.72rem;color:#666;line-height:1.5;margin-top:8px;text-align:right}
/* ══════════════════════════════════════════════════════════════
   ARTISTAS — submenú del menú + páginas de artista
   Añadido con la página /artistas. Todo vive aquí para no tocar
   nada de lo que ya funcionaba arriba.
   ══════════════════════════════════════════════════════════════ */

/* ── Submenú del menú de escritorio ── */
.nav-drop{position:relative;display:inline-flex}
.nav-drop>a{display:inline-flex;align-items:center;gap:7px}
.nav-drop .nav-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.nav-drop:hover>a,.nav-drop:focus-within>a{color:var(--gold)}
.nav-drop:hover .nav-caret,.nav-drop:focus-within .nav-caret{transform:rotate(225deg) translateY(1px)}
.nav-drop-menu{position:absolute;top:100%;left:50%;margin-top:10px;transform:translate(-50%,8px);min-width:206px;
  background:rgba(12,12,12,.98);backdrop-filter:blur(16px);border:1px solid rgba(201,162,39,.2);border-radius:10px;
  padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* puente invisible: evita que el menú se cierre al bajar el mouse */
.nav-drop-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-desktop .nav-drop-menu a{display:block;width:100%;padding:11px 12px;font-size:11px;letter-spacing:1.5px;color:#cfc9bf;border-radius:6px;white-space:nowrap}
.nav-desktop .nav-drop-menu a:hover{background:rgba(201,162,39,.1);color:var(--gold)}
.nav-desktop .nav-drop-menu a.is-active{color:var(--gold)}
.nav-desktop .nav-drop-menu .nav-drop-all{margin-top:5px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);font-size:10px;color:#7d7669;border-radius:0 0 6px 6px}

/* ── Sub-enlaces en el menú móvil ── */
.mobile-nav a.ml-sub{position:relative;padding-left:34px;font-size:11px;color:#7d7669}
.mobile-nav a.ml-sub::before{content:'';position:absolute;left:16px;top:50%;width:9px;height:1px;background:rgba(201,162,39,.55)}
.mobile-nav a.ml-sub:hover,.mobile-nav a.ml-sub.is-active{color:var(--gold)}

/* ── Miga de pan de tres niveles ── */
.page-crumb .crumb-mid,.page-crumb .crumb-mid a{color:#888}
.page-crumb .crumb-mid a:hover{color:var(--gold)}

/* ══ /artistas — roster ══ */
.artists-section{padding-top:34px}
.artists-meta{font-family:var(--font-m);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#6f6a60;margin-top:14px}
.artists-intro{max-width:58ch;margin:-38px auto 54px;text-align:center;color:var(--gray);font-size:.95rem;line-height:1.7}
.artists-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px}

.artist-card{position:relative;display:block;overflow:hidden;background:var(--black2);border:1px solid rgba(201,162,39,.1);aspect-ratio:4/5}
.artist-media{position:absolute;inset:0;overflow:hidden}
.artist-media img,.artist-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.artist-media img{filter:grayscale(.4) contrast(1.05);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.artist-card:hover .artist-media img{transform:scale(1.06);filter:none}
/* Si todavía no hay foto, el hueco no se ve roto: queda el monograma sobre
   los surcos de un vinilo. Es a propósito, no un placeholder de emergencia. */
.artist-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 34%,rgba(201,162,39,.2),transparent 62%),
             repeating-radial-gradient(circle at 50% 34%,rgba(255,255,255,.04) 0 1px,transparent 1px 8px),
             linear-gradient(160deg,#141414,#0b0b0b)}
.artist-fallback span{font-family:var(--font-d);font-size:clamp(3.6rem,11vw,6rem);letter-spacing:6px;color:transparent;-webkit-text-stroke:1px rgba(201,162,39,.55);text-stroke:1px rgba(201,162,39,.55)}
.artist-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.95) 14%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.12) 78%)}
.artist-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 26px}
.artist-tag{font-family:var(--font-m);font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.artist-name{font-family:var(--font-d);font-size:clamp(2.1rem,4.6vw,3.1rem);line-height:.95;letter-spacing:1px;color:var(--white)}
.artist-line{display:block;width:34px;height:2px;background:var(--gold);margin:14px 0 12px;transition:width .45s ease}
.artist-card:hover .artist-line{width:78px}
.artist-desc{color:#b9b2a7;font-size:.9rem;line-height:1.6;max-width:36ch}
.artist-go{display:inline-block;margin-top:16px;font-family:var(--font-m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);transition:transform .3s ease}
.artist-go::after{content:' →'}
.artist-card:hover .artist-go{transform:translateX(5px)}


/* ── Plataformas del artista ── */
.artist-social{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.artist-soc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:var(--black2);border:1px solid rgba(255,255,255,.1);color:#b9b2a7;transition:all .25s ease}
.artist-soc svg{width:19px;height:19px;display:block}
.artist-soc:hover{transform:translateY(-3px);color:#fff}
.artist-soc.is-spotify:hover{background:#1DB954;border-color:#1DB954;color:#000}
.artist-soc.is-youtube:hover{background:#FF0000;border-color:#FF0000}
.artist-soc.is-instagram:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);border-color:#dc2743}
.artist-soc.is-tiktok:hover{background:#fff;border-color:#fff;color:#000}
.artist-soc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* En la tarjeta del roster son solo una señal de dónde escucharlo, no enlaces */
.artist-card-soc{display:flex;gap:12px;margin-top:16px;color:#6f6a60;transition:color .3s ease}
.artist-card-soc svg{width:15px;height:15px;display:block}
.artist-card:hover .artist-card-soc{color:var(--gold)}

/* ══ Ficha de artista ══ */
.artist-page{padding-top:30px}
.artist-hero{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start;margin-bottom:74px}
.artist-portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--black2);border:1px solid rgba(201,162,39,.18);border-radius:6px}
.artist-portrait-tag{position:absolute;left:0;bottom:18px;z-index:2;background:rgba(8,8,8,.85);backdrop-filter:blur(8px);border-left:2px solid var(--gold);
  font-family:var(--font-m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:#e6dfd2;padding:9px 14px}

/* La firma de la página: el nombre repetido en contorno, como un afiche
   pegado en la pared del estudio. */
.artist-name-stack{position:relative;overflow:hidden;padding-top:16px}
.artist-echo{position:absolute;top:0;left:-3px;font-family:var(--font-d);font-size:clamp(3.2rem,8vw,5.6rem);line-height:.9;letter-spacing:2px;
  color:transparent;-webkit-text-stroke:1px rgba(201,162,39,.2);white-space:nowrap;pointer-events:none;user-select:none}
.artist-title{position:relative;font-family:var(--font-d);font-size:clamp(2.8rem,7vw,5rem);line-height:.94;letter-spacing:2px;color:var(--white)}
.artist-role{font-family:var(--font-m);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:12px}
.artist-lead{color:#c6c0b5;font-size:1.02rem;line-height:1.85;margin:20px 0 30px;max-width:62ch}

.artist-mini-label{font-family:var(--font-m);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#6f6a60;margin-bottom:14px}
.artist-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);margin-bottom:28px}
.artist-fact{background:var(--black2);padding:16px 18px}
.artist-fact dt{font-family:var(--font-m);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#6f6a60;margin-bottom:6px}
.artist-fact dd{font-size:.9rem;color:var(--white);line-height:1.5}
.artist-actions{display:flex;flex-wrap:wrap;gap:12px}

.artist-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.artist-block{margin-bottom:56px}
.artist-bio h3{font-family:var(--font-d);font-size:1.5rem;letter-spacing:1px;color:var(--white);margin:0 0 14px}
.artist-bio h3:not(:first-child){margin-top:34px}
.artist-bio p{color:var(--gray);font-size:.96rem;line-height:1.85;margin-bottom:14px}
.artist-bio strong{color:var(--white);font-weight:600}

.artist-tl{position:relative;padding-left:26px;border-left:1px solid rgba(201,162,39,.22)}
.artist-tl-item{position:relative;padding-bottom:26px}
.artist-tl-item:last-child{padding-bottom:0}
.artist-tl-item::before{content:'';position:absolute;left:-31px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--black);border:2px solid var(--gold)}
.artist-tl-year{font-family:var(--font-m);font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:5px}
.artist-tl-text{color:var(--gray);font-size:.93rem;line-height:1.75}
.artist-tl-text strong{color:var(--white);font-weight:600}
.artist-tl-text em{color:#b9b2a7;font-style:italic}

.artist-tracks{display:flex;flex-wrap:wrap;gap:10px}
.artist-track{display:inline-flex;align-items:center;gap:8px;background:var(--black2);border:1px solid rgba(255,255,255,.08);border-radius:30px;padding:9px 17px;font-size:.88rem;color:#d3cdc2;transition:all .25s ease}
.artist-track:hover{border-color:rgba(201,162,39,.45);color:var(--white);transform:translateY(-2px)}
.artist-track i{color:var(--gold);font-style:normal;font-size:.85rem;line-height:1}
.artist-tracks-note{margin-top:16px;font-size:.82rem;color:#6f6a60}

.artist-closing{max-width:66ch;color:#b9b2a7;font-size:1rem;line-height:1.85;border-left:2px solid rgba(201,162,39,.5);padding-left:20px;margin-bottom:46px}

.artist-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid rgba(255,255,255,.08);padding-top:26px}
.artist-next-all{font-family:var(--font-m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#7d7669;transition:color .2s}
.artist-next-all:hover{color:var(--gold)}
.artist-next-link{text-align:right;transition:transform .3s ease}
.artist-next-link:hover{transform:translateX(5px)}
.artist-next-lbl{display:block;font-family:var(--font-m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:#6f6a60;margin-bottom:4px}
.artist-next-name{font-family:var(--font-d);font-size:1.6rem;letter-spacing:1px;color:var(--white);transition:color .2s}
.artist-next-link:hover .artist-next-name{color:var(--gold)}

.artist-cta{margin-top:60px;text-align:center;padding:44px 32px;border:1px solid rgba(201,162,39,.22);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(201,162,39,.1),rgba(201,162,39,.02))}
.artist-cta h3{font-family:var(--font-d);font-size:clamp(1.7rem,3.6vw,2.4rem);letter-spacing:1px;color:var(--white);margin-bottom:12px}
.artist-cta p{max-width:52ch;margin:0 auto 26px;color:var(--gray);font-size:.95rem;line-height:1.7}
.artist-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── Tablet / móvil ── */
@media(max-width:900px){
  .artist-hero{grid-template-columns:1fr;gap:34px}
  .artist-portrait{max-width:380px}
  .artist-columns{grid-template-columns:1fr;gap:0}
}
@media(max-width:600px){
  .artists-section,.artist-page{padding-top:22px}
  .artists-intro{margin:-24px auto 36px}
  .artists-grid{gap:14px}
  .artist-card{aspect-ratio:3/4}
  .artist-body{padding:24px 20px}
  .artist-portrait{max-width:none}
  .artist-block{margin-bottom:44px}
  .artist-actions .btn,.artist-cta-actions .btn{width:100%;justify-content:center}
  .artist-next{flex-direction:column;align-items:flex-start}
  .artist-next-link{text-align:left}
  .artist-cta{padding:32px 20px}
}
@media(prefers-reduced-motion:reduce){
  .artist-media img,.artist-card:hover .artist-media img,.artist-line,.artist-go,.artist-next-link,.artist-track{transition:none;transform:none}
}

/* ── MENÚ MÓVIL: LOS SERVICIOS SE PLIEGAN ───────────────────────
   Los 7 servicios como sub-enlaces sueltos ocupaban media pantalla y
   obligaban a hacer scroll para llegar a Estudio o Artistas. Ahora
   arrancan CERRADOS y se abren con la flechita. El texto "Servicios"
   sigue navegando al hub: solo el botón despliega, así que un toque
   nunca hace las dos cosas a la vez. */
.mobile-nav .ml-group{display:flex;flex-direction:column}
.mobile-nav .ml-head{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.05)}
.mobile-nav .ml-head > a.ml{flex:1;border-bottom:none}
.mobile-nav .ml-toggle{flex:0 0 52px;background:none;border:none;border-left:1px solid rgba(255,255,255,.05);
  color:#7d7669;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  -webkit-tap-highlight-color:transparent;transition:color .2s}
.mobile-nav .ml-toggle:hover,.mobile-nav .ml-group.open .ml-toggle{color:var(--gold)}
.mobile-nav .ml-toggle span{display:block;width:8px;height:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s ease}
.mobile-nav .ml-group.open .ml-toggle span{transform:rotate(-135deg) translate(-3px,-3px)}
.mobile-nav .ml-subs{display:none;flex-direction:column;overflow:hidden}
.mobile-nav .ml-group.open .ml-subs{display:flex;animation:mlOpen .26s ease}
@keyframes mlOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Tarjeta de servicio como enlace (portada y hub /servicios) */
a.service-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.service-card .service-desc{flex:1}
a.service-card:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}