:root{--brand-logo:url(assets/brand/logo.svg?v=202610192341);--logo-ratio:396/331;--logo-tilt:-2deg;--logo-hero-w:clamp(290px,60vh,640px);--logo-gate-w:min(calc(100vw - 8px),clamp(364px,57vh,676px));--logo-foot-w:min(360px,76vw);
  --black:#050505;--ink:#0d0d0e;--ink2:#141416;--white:#f6f3ee;
  --pink:#ff3f9e;--pink-soft:rgba(255,63,158,.16);--acid:#d4ff3a;--ice:#bfe6ff;
  --line:rgba(255,255,255,.14);--mute:rgba(246,243,238,.62);
  --display:"Bebas Neue","Oswald",Impact,sans-serif;--sans:"Manrope",system-ui,sans-serif;--marker:"Permanent Marker","Segoe Print",cursive;
  --g:var(--pink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
html{overflow-x:hidden}
body{font-family:var(--sans);background:var(--black);color:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
section{position:relative}
::selection{background:var(--pink);color:#000}

/* logos blancos sobre negro: invierte y funde el fondo */
.logo-inv{}

/* grano */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--mute);margin-bottom:1.2rem;display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--pink)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:.015em;text-transform:uppercase}
h2{font-size:clamp(3.2rem,8vw,6.6rem)}
h2 em{font-style:normal;color:var(--pink);text-shadow:0 0 28px rgba(255,63,158,.35)}
.sec{padding:130px 0}
.sec-head{margin-bottom:64px}
.sec-head.center{text-align:center}.sec-head.center .eyebrow{justify-content:center}
.sub{max-width:36rem;margin:1.4rem auto 0;color:var(--mute);font-weight:300}

/* botones */
.btn{display:inline-block;background:var(--white);color:#000;padding:15px 32px;border-radius:99px;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--white);cursor:pointer;transition:.3s}
.btn:hover{background:var(--pink);border-color:var(--pink);color:#000;transform:translateY(-3px);box-shadow:0 12px 30px rgba(255,63,158,.35)}
.btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn.ghost:hover{background:var(--white);color:#000;border-color:var(--white);box-shadow:none}
.ctas{display:flex;gap:14px;flex-wrap:wrap}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:10px 28px;transition:background .3s}
.nav.solid{background:rgba(5,5,5,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand img{height:48px;width:auto}
.nav nav{display:flex;gap:28px;align-items:center;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.nav nav a{opacity:.75;transition:opacity .2s,color .2s}.nav nav a:hover{opacity:1;color:var(--pink)}
.nav .pill{border:1px solid var(--white);padding:8px 18px;border-radius:99px;opacity:1}
.nav .pill:hover{background:var(--pink);border-color:var(--pink);color:#000}
.burger{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--white);transition:.3s}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.burger[aria-expanded=true] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:19px;transform:rotate(-45deg)}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:110px 0 90px;isolation:isolate}
.slides{position:absolute;inset:0;z-index:-3}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:112%;object-fit:cover;object-position:60% 40%;transform:scale(1.06);transition:transform 9s ease-out;will-change:transform}
.slide.on img{transform:scale(1)}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.72) 42%,rgba(5,5,5,.25) 100%),linear-gradient(180deg,rgba(5,5,5,.5) 0%,transparent 30%,rgba(5,5,5,.95) 100%)}
.glow{position:absolute;z-index:-1;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(circle,var(--g) 0%,transparent 62%);opacity:.28;filter:blur(46px);pointer-events:none;transition:background .8s,opacity .8s;mix-blend-mode:screen}
.hero[data-mood=meh]{--g:var(--acid)}
.hero[data-mood=bajon]{--g:var(--ice)}
.hero-in{position:relative;max-width:1240px;margin:0 auto;padding:0 28px;width:100%}
.hero-logo{width:min(860px,92vw);height:auto;margin:-10px 0 4px -14px;filter:drop-shadow(0 0 22px rgba(255,63,158,.3))}
.hero-logo:hover{animation:glitch .5s steps(2) 1}
@keyframes glitch{0%{filter:drop-shadow(5px 0 0 rgba(255,63,158,.9)) drop-shadow(-5px 0 0 rgba(212,255,58,.8))}50%{filter:drop-shadow(-4px 2px 0 rgba(255,63,158,.9)) drop-shadow(4px -2px 0 rgba(212,255,58,.8))}100%{filter:drop-shadow(0 0 22px rgba(255,63,158,.3))}}
.lead{max-width:32rem;margin:1.2rem 0 2rem;font-weight:300;font-size:1.1rem;color:rgba(246,243,238,.85)}
.moods{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:2rem}
.mood{display:flex;align-items:center;gap:9px;background:rgba(5,5,5,.4);border:1px solid var(--line);border-radius:99px;padding:6px 18px 6px 8px;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.25s;backdrop-filter:blur(6px)}
.mood svg{width:26px;height:26px;color:var(--white);transition:.25s}
.mood:hover{border-color:rgba(255,255,255,.55)}
.mood.on{background:var(--white);color:#000;border-color:var(--white)}
.mood.on svg{color:#000}
.scroll{position:absolute;bottom:26px;left:28px;display:flex;align-items:center;gap:12px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
.scroll i{width:44px;height:1px;background:currentColor;display:block;transform-origin:left;animation:line 2.2s ease-in-out infinite}
@keyframes line{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;white-space:nowrap;background:var(--black)}
.track{display:inline-flex;align-items:center;gap:34px;animation:mq 38s linear infinite;font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:.04em;text-transform:uppercase;padding-right:34px}
.track i{width:12px;height:12px;background:var(--pink);transform:rotate(45deg);display:block;flex:none}
.track i:nth-of-type(3n){background:var(--acid)}
@keyframes mq{to{transform:translateX(-50%)}}

/* historia */
.historia{background:var(--ink)}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.txt{margin-top:2.2rem}
.txt p{font-size:1.04rem;font-weight:300;margin-bottom:1.1rem;color:rgba(246,243,238,.82);max-width:34rem}
.txt b{font-weight:700;color:var(--white)}
.q{font-family:var(--marker);font-style:normal;color:var(--pink);font-size:1.15rem;line-height:1.4}
.facts{display:flex;gap:44px;margin-top:2.2rem;border-top:1px solid var(--line);padding-top:1.5rem;flex-wrap:wrap}
.facts b{display:block;font-family:var(--display);font-size:3.8rem;font-weight:400;line-height:1;color:var(--white)}
.facts span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.duo{position:relative;height:600px}
.duo figure{position:absolute;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.duo img{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;right:6%;top:-22px;width:92px;height:92px;border-radius:50%;background:var(--pink);color:#000;display:grid;place-items:center;transform:rotate(12deg);animation:wob 5s ease-in-out infinite}
.sticker svg{width:64px;height:64px}
@keyframes wob{50%{transform:rotate(-8deg) scale(1.06)}}
.bolt-div{display:block;width:100%;height:24px;color:var(--pink);background:var(--black);padding:0;opacity:.8}

/* música */
.musica{background:var(--black)}
.latest{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:28px;background:linear-gradient(120deg,rgba(255,63,158,.08),transparent 55%),var(--ink)}
.latest-art{position:relative;aspect-ratio:1;border-radius:4px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 20%,#2a0f1e,#0b0b0c 70%);border:1px solid rgba(255,63,158,.35)}
.latest-art .big-face{width:62%;height:62%;color:var(--pink);filter:drop-shadow(0 0 22px rgba(255,63,158,.55))}
.latest-art span{position:absolute;left:16px;bottom:10px;font-family:var(--display);font-size:3.2rem;line-height:1;color:var(--white)}
.tagline{display:inline-block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#000;background:var(--acid);padding:4px 12px;border-radius:99px;font-weight:700}
.latest h3{font-size:clamp(3rem,7vw,5.6rem);margin:.9rem 0 .8rem}
.latest p{max-width:34rem;font-weight:300;color:rgba(246,243,238,.8);margin-bottom:1.6rem}
.discs{list-style:none;margin:56px 0 70px}
.disc{display:grid;grid-template-columns:110px 1fr 54px;align-items:center;gap:20px;padding:22px 6px;border-bottom:1px solid var(--line);transition:.3s;cursor:default}
.disc b{font-family:var(--display);font-weight:400;font-size:3rem;line-height:1;color:var(--mute);transition:.3s}
.disc h3{font-size:clamp(2rem,4.4vw,3.2rem);transition:.3s}
.disc span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.disc svg{width:44px;height:44px;color:var(--mute);transition:.4s}
.disc:hover{padding-left:22px;background:linear-gradient(90deg,var(--pink-soft),transparent 70%)}
.disc:hover b,.disc:hover h3{color:var(--pink)}
.disc:hover svg{color:var(--acid);transform:rotate(18deg) scale(1.15)}
.stream h3{font-size:clamp(2rem,4vw,3rem);margin-bottom:24px}
.stream-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stream-links a{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:6px;padding:24px 26px;transition:.3s;background:var(--ink)}
.stream-links b{font-family:var(--display);font-weight:400;font-size:2.4rem;letter-spacing:.03em;line-height:1}
.stream-links span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.stream-links a:hover{border-color:var(--pink);transform:translateY(-4px);box-shadow:0 18px 40px rgba(255,63,158,.18)}
.stream-links a:hover b{color:var(--pink)}

/* en vivo */
.envivo{background:var(--ink);overflow:hidden}
.bgimg{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:.28;filter:saturate(1.2)}
.bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(13,13,14,.55) 40%,var(--ink))}
.envivo .wrap{position:relative}
.shows{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:60px}
.show{display:flex;gap:26px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:6px;background:rgba(5,5,5,.6);backdrop-filter:blur(8px)}
.show time{flex:none;width:96px;text-align:center;border:1px solid var(--pink);border-radius:4px;padding:10px 0 8px;color:var(--pink)}
.show time b{display:block;font-family:var(--display);font-weight:400;font-size:3.4rem;line-height:1}
.show time span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.show h3{font-size:2.1rem;margin-bottom:.4rem}
.show p{font-size:.9rem;color:var(--mute);font-weight:300;margin-bottom:.8rem}
.pill-tag{display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:5px 14px;color:var(--mute)}
.pill-tag.live{border-color:var(--acid);color:var(--acid);transition:.25s}
.pill-tag.live:hover{background:var(--acid);color:#000}
.show.next time{border-color:var(--acid);color:var(--acid)}
.setlist h3{font-size:clamp(2rem,4vw,3rem);margin-bottom:22px}
.setlist ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.setlist li{border:1px solid var(--line);border-radius:99px;padding:8px 18px;font-size:.88rem;background:rgba(5,5,5,.55);transition:.25s}
.setlist li:hover{background:var(--pink);color:#000;border-color:var(--pink);transform:rotate(-2deg)}

/* banda */
.banda{background:var(--black)}
.members{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:960px;margin-left:auto;margin-right:auto}
.mph{aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 4px 4px;background:#111;margin-bottom:18px;position:relative;border:1px solid transparent;transition:.4s}
.mph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .6s,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.mph::after{content:"";position:absolute;inset:0;background:var(--pink);mix-blend-mode:color;opacity:.55;transition:opacity .6s}
.member:hover .mph{border-color:var(--pink)}
.member:hover .mph img{filter:none;transform:scale(1.07)}
.member:hover .mph::after{opacity:0}
.member h3{font-size:2.4rem}
.member span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* galería */
.galeria{background:var(--ink)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:2rem}
.f{background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 20px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.25s}
.f:hover{border-color:rgba(255,255,255,.5)}
.f.on{background:var(--pink);border-color:var(--pink);color:#000;font-weight:700}
.gal{columns:3;column-gap:14px}
.g{display:block;position:relative;overflow:hidden;margin-bottom:14px;break-inside:avoid;border-radius:4px;background:#111;cursor:zoom-in;transition:opacity .4s,transform .4s}
.g img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s;filter:brightness(.88)}
.g::after{content:"";position:absolute;inset:0;border:2px solid transparent;transition:.3s;pointer-events:none}
.g:hover img{transform:scale(1.05);filter:brightness(1.05)}
.g:hover::after{border-color:var(--pink)}
.g.hide{display:none}
.credit{margin-top:34px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-align:right}

/* contacto */
.contacto{background:var(--black);overflow:hidden}
.contacto::before{content:"";position:absolute;left:50%;top:30%;width:760px;height:760px;max-width:100%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,63,158,.16),transparent 65%);pointer-events:none}
.contacto .wrap{position:relative}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:start}
.form{display:grid;gap:18px}
.form label{display:grid;gap:8px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.form input,.form select,.form textarea{background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:14px 16px;font:300 1rem var(--sans);color:var(--white);letter-spacing:0;text-transform:none;transition:.25s;width:100%}
.form select option{background:#111}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,63,158,.2)}
.form .btn{justify-self:start}
.form-msg{min-height:1.4em;font-size:.88rem;color:var(--acid)}
.form-msg.err{color:#ff7a7a}
.side{border:1px solid var(--line);border-radius:6px;padding:32px;background:var(--ink)}
.side h3{font-size:2rem;margin-bottom:18px}
.side ul{list-style:none}
.side li a{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:500;transition:.25s}
.side li a span{color:var(--mute);font-weight:300;font-size:.9rem}
.side li a:hover{color:var(--pink);padding-left:8px}
.faces{display:flex;gap:14px;margin-top:28px;color:var(--pink)}
.faces svg{width:44px;height:44px;transition:.4s}
.faces svg:nth-child(2){color:var(--acid)}.faces svg:nth-child(3){color:var(--white)}
.faces svg:hover{transform:rotate(20deg) scale(1.2)}

/* footer */

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:30px}
.lb[hidden]{display:none}
.lb img{max-width:min(1500px,92vw);max-height:86vh;width:auto;height:auto;border-radius:4px;box-shadow:0 0 0 1px var(--pink),0 30px 80px rgba(0,0,0,.8)}
.lb-x,.lb-n{position:absolute;background:rgba(5,5,5,.6);border:1px solid var(--line);color:var(--white);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.4rem;transition:.25s}
.lb-x{top:20px;right:20px}.lb-n{top:50%;transform:translateY(-50%)}.prev{left:18px}.next{right:18px}
.lb-x:hover,.lb-n:hover{background:var(--pink);color:#000;border-color:var(--pink)}

/* reveal: visible por defecto; se oculta solo si JS está vivo */
.js .reveal:not(.in){opacity:0;transform:translateY(28px)}
.reveal{transition:opacity .9s ease var(--delay,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--delay,0s)}
.reveal[data-split]{opacity:1;transform:none}

/* responsive */
@media(max-width:960px){
  .sec{padding:90px 0}
  .two{grid-template-columns:1fr;gap:70px}
  .duo{height:480px;margin-bottom:40px}
  .latest{grid-template-columns:1fr;gap:26px}.latest-art{max-width:300px}
  .stream-links{grid-template-columns:1fr}
  .shows{grid-template-columns:1fr}
  .members{grid-template-columns:repeat(3,1fr);gap:34px 16px}
  .gal{columns:2}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  /* menú móvil */
  .nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,5,5,.94)}
  .burger{display:block}
  .nav nav{position:fixed;inset:0;background:rgba(5,5,5,.97);flex-direction:column;justify-content:center;gap:26px;font-family:var(--display);font-size:2.6rem;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .3s;z-index:-1}
  .nav nav.open{opacity:1;pointer-events:auto}
  .nav .pill{padding:6px 28px}
  .scroll{display:none}
  .brand img{height:40px}
  .hero-shade{background:linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,.78) 45%,rgba(5,5,5,.97) 100%)}
  .hero-logo{margin-left:-6px}
  .hero{padding-top:96px;align-items:flex-end}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .hero-in{padding:0 20px}
  .disc{grid-template-columns:70px 1fr 36px;gap:12px}.disc b{font-size:2.1rem}.disc svg{width:32px;height:32px}
  .gal{columns:1}
  .members{grid-template-columns:1fr;max-width:340px}.member h3{font-size:1.9rem}
  .show{flex-direction:column;align-items:flex-start}
  .duo{height:400px}
  .facts{gap:28px}.facts b{font-size:3rem}
  .mood{padding-right:14px}
}

/* ===== HEADER POST-PUNK ===== */
.nav:not(.solid) .brand{opacity:0;pointer-events:none}
.brand{transition:opacity .4s}
.nav nav a.active{opacity:1;color:var(--pink)}
.slide img{filter:brightness(.85) contrast(1.04)}
.hero-shade{background:linear-gradient(180deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,.2) 38%,rgba(5,5,5,.92) 100%)}
.halftone{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply;opacity:.16;
  background:radial-gradient(circle at center,#000 0 1px,transparent 1.6px) 0 0/5px 5px}
.glow{opacity:.4}
.hero{align-items:stretch;padding:84px 0 70px}
.hero-in{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100svh - 154px);padding-right:70px}
.meta-top{display:flex;gap:0;border-top:2px solid var(--white);border-bottom:1px solid var(--line);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700}
.meta-top span{padding:10px 18px 10px 0;margin-right:18px;border-right:1px solid var(--line)}
.meta-top span:last-child{border:0;color:var(--pink)}
.logo-stack{position:relative;width:var(--logo-hero-w);margin:2vh auto 0;transform:rotate(var(--logo-tilt));aspect-ratio:var(--logo-ratio);animation:jit 5s steps(1) infinite}
.logo-stack .ls{position:absolute;inset:0;width:100%;height:100%}
.logo-stack img.main{position:relative;filter:drop-shadow(0 6px 0 #000)}
.logo-stack .ls.pink,.logo-stack .ls.acid{background:var(--pink);-webkit-mask:var(--brand-logo) center/100% 100% no-repeat;mask:var(--brand-logo) center/100% 100% no-repeat}
.logo-stack .ls.pink{transform:translate(.8%,1.2%)}
.logo-stack .ls.acid{background:var(--acid);transform:translate(-.6%,-.8%);opacity:.85}
@keyframes jit{0%,88%,100%{transform:rotate(-3deg)}90%{transform:rotate(-3deg) translate(8px,-2px) skewX(4deg)}93%{transform:rotate(-3deg) translate(-10px,3px) skewX(-5deg)}96%{transform:rotate(-3deg) translate(4px,0)}}
.logo-stack:hover .ls.pink{transform:translate(2.4%,3%)}.logo-stack:hover .ls.acid{transform:translate(-2%,-2.4%)}
.logo-stack .ls{transition:transform .25s}
.note{position:absolute;right:12%;top:20%;font-family:var(--marker);font-size:clamp(1.2rem,2.6vw,2.2rem);color:var(--acid);transform:rotate(8deg);text-shadow:2px 2px 0 #000;pointer-events:none}
.hero-bottom{display:grid;grid-template-columns:1.1fr auto auto;gap:22px 40px;align-items:end;border-top:1px solid var(--line);padding-top:22px}
.hero-bottom .lead{margin:0;max-width:30rem;font-size:1rem}
.hero-bottom .moods{margin:0}
.vert{position:absolute;right:20px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--mute);white-space:nowrap}
@media(max-width:1100px){.hero-bottom{grid-template-columns:1fr;align-items:start}}
@media(max-width:960px){
  .hero{padding:80px 0 50px;align-items:stretch}
  .hero-in{padding-right:20px;min-height:calc(100svh - 130px)}
  .logo-stack{width:min(88vw,var(--logo-hero-w));margin:2vh auto 0;transform:rotate(var(--logo-tilt))}
  @keyframes jit{0%,100%{transform:rotate(-4deg)}}
  .vert{display:none}.note{right:5%;top:17%;font-size:1.1rem}
  .meta-top span{padding-right:10px;margin-right:10px;letter-spacing:.2em}.hide-s{display:none}
  .hero-shade{background:linear-gradient(180deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,.35) 40%,rgba(5,5,5,.97) 100%)}
}

/* ===== TONO SOMBRÍO + STICKERS + GRIETAS ===== */
:root{--ink:#080808;--ink2:#101011;--crk-impact:url(assets/img/glass-impact.svg);--crk-corner:url(assets/img/glass-corner.svg);--crk-long:url(assets/img/glass-long.svg)}
.sec{box-shadow:inset 0 0 220px rgba(0,0,0,.75)}
.grain{opacity:.06}

/* grietas decorativas (blancas, con copia rosa desfasada) */
.fx-crack{position:absolute;pointer-events:none;z-index:0;background:no-repeat center/contain;mix-blend-mode:screen}
.fx-crack.impact{width:min(760px,90vw);aspect-ratio:1;right:-6%;top:6%;background-image:var(--crk-impact);opacity:.26}
.fx-crack.corner{width:min(640px,80vw);aspect-ratio:1;left:0;top:0;background-image:var(--crk-corner);opacity:.22}
.fx-crack.corner.r{left:auto;right:0;transform:scaleX(-1)}
.fx-crack.long{width:min(1500px,150vw);aspect-ratio:4/1;left:-10%;top:12%;background-image:var(--crk-long);opacity:.18}
.fx-crack.long.b{top:auto;bottom:6%;transform:scaleY(-1)}
.fx-crack.long.f{top:0;opacity:.14}
.fx-crack.impact.c{right:auto;left:-8%;top:auto;bottom:-10%}
.fx-crack.pink{background:var(--pink);background-image:none;-webkit-mask:var(--crk-impact) center/contain no-repeat;mask:var(--crk-impact) center/contain no-repeat;opacity:.5;transform:translate(5px,4px);mix-blend-mode:normal}
.hero .fx-crack{z-index:-1}
.hero .fx-crack.impact{right:-10%;top:10%;opacity:.34}
.hero .fx-crack.corner{opacity:.3}
.hero .fx-crack.pink{opacity:.45}
.sec>.wrap,.break>.wrap{position:relative;z-index:1}

/* STICKERS pegados con cinta */
.stk{position:relative;display:block;background:#ebe7de;padding:9px;border-radius:4px;box-shadow:0 20px 38px rgba(0,0,0,.75),0 3px 0 rgba(0,0,0,.4);transform:rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.stk::before,.stk::after{content:"";position:absolute;z-index:3;width:104px;height:28px;background:var(--tape,rgba(255,63,158,.72));
  background-image:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.14) 7px 8px),linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.08));
  clip-path:polygon(0 0,100% 0,98% 25%,100% 50%,98% 75%,100% 100%,0 100%,2% 75%,0 50%,2% 25%);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.stk::before{top:-15px;left:50%;margin-left:-52px;transform:rotate(-4deg)}
.stk::after{width:84px;bottom:-13px;right:-22px;transform:rotate(-38deg);opacity:.9}
.stk.tp-pink{--tape:rgba(255,63,158,.72)}
.stk.tp-bone{--tape:rgba(232,222,190,.7)}
.stk.tp-acid{--tape:rgba(212,255,58,.62)}
.stk .im{position:relative;display:block;overflow:hidden;background:#000;height:100%}
.stk .im img{display:block;width:100%;height:100%;object-fit:cover;filter:none;transition:filter .6s,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.stk .im::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.4;background:no-repeat center/cover}
.stk.c1 .im::after{background-image:var(--crk-impact);background-position:70% 40%;background-size:130%}
.stk.c2 .im::after{background-image:var(--crk-corner)}
.stk.c3 .im::after{background-image:var(--crk-long);background-size:200% auto;background-position:30% 55%}
.stk.c0 .im::after{display:none}
.stk:hover{transform:rotate(0) scale(1.035);z-index:5;box-shadow:0 30px 60px rgba(0,0,0,.85)}
.stk:hover .im img{transform:scale(1.04)}
.stk .cap{position:absolute;left:18px;bottom:16px;z-index:4;font-family:var(--marker);font-style:normal;font-size:1.05rem;color:#fff;text-shadow:2px 2px 0 #000}

/* historia */
.duo{height:560px}
.duo .stk{position:absolute}
.duo .big{left:0;top:30px;width:84%;aspect-ratio:3/2.15}
.duo .small{right:0;bottom:-20px;width:46%;aspect-ratio:4/5}
.sticker{right:4%;top:-18px;z-index:6}

/* interludio */
.break{position:relative;padding:190px 0;overflow:hidden;text-align:center;background:#000}
.break-img{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:.55}
.break::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,transparent 25%,#000 85%),linear-gradient(180deg,#000,transparent 25%,transparent 75%,#000)}
.break .eyebrow{justify-content:center}
.break h2{font-size:clamp(3.6rem,10vw,9rem);line-height:.88}
.break-sub{margin-top:1.4rem;color:var(--mute);font-family:var(--marker);font-size:1.1rem}
.break .fx-crack.impact{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,110vw);z-index:2;opacity:.3}
.break .fx-crack.pink{transform:translate(calc(-50% + 5px),calc(-50% + 4px))}

/* banda */
.members{gap:38px 28px;margin-bottom:90px}
.member .stk{aspect-ratio:3/4;margin-bottom:22px}
.member .stk .im::before{display:none}
.member:hover .stk .im::before{opacity:0}
.member .stk{transform:rotate(var(--r,0deg))}
.stk.wide{max-width:980px;margin:0 auto;aspect-ratio:3/2}
.stk.wide .im{aspect-ratio:3/2}

/* galería */
.gal{columns:3;column-gap:34px;padding:16px 8px}
.g.stk{margin-bottom:38px;break-inside:avoid;cursor:zoom-in;overflow:visible;background:#ebe7de}
.g.stk .im{height:auto}
.g.stk .im img{height:auto}
.g.stk::after{opacity:.0}
.g.stk:nth-child(3n+1)::after{opacity:.9}
.g.hide{display:none}
.g.stk:hover::after{border:0}

/* footer verde radiactivo + rosa + negro */
.foot{position:relative;overflow:hidden;background:#030403;border-top:1px solid rgba(212,255,58,.25);padding:120px 28px 30px;isolation:isolate}
.foot-layers{position:absolute;inset:0;z-index:-2}
.foot-layers i{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen}
.foot-layers .l1{width:62%;aspect-ratio:1;left:-16%;bottom:-30%;background:radial-gradient(circle,rgba(212,255,58,.8),transparent 65%);animation:drift 14s ease-in-out infinite alternate}
.foot-layers .l2{width:55%;aspect-ratio:1;right:-14%;bottom:-26%;background:radial-gradient(circle,rgba(255,63,158,.7),transparent 65%);animation:drift 17s ease-in-out infinite alternate-reverse}
.foot-layers .l3{width:46%;aspect-ratio:1;left:24%;bottom:-34%;background:radial-gradient(circle,rgba(96,255,120,.6),rgba(212,255,58,.22) 45%,transparent 68%);animation:drift 12s ease-in-out infinite alternate}
.foot-layers .l4{inset:0;border-radius:0;filter:none;mix-blend-mode:normal;background:linear-gradient(180deg,#030403 0%,rgba(3,4,3,.5) 34%,rgba(3,4,3,0) 100%)}
@keyframes drift{to{transform:translate(6%,-8%) scale(1.12)}}
.foot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.foot .fx-crack.f{top:-4%;z-index:-1}
.foot-in{max-width:1240px;margin:0 auto;text-align:center}
.foot-logo{width:var(--logo-foot-w);height:auto;margin:0 auto;opacity:.95;filter:drop-shadow(0 0 30px rgba(212,255,58,.25)) drop-shadow(0 4px 0 rgba(0,0,0,.6))}
.foot-tag{margin:18px 0 44px;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(246,243,238,.7)}
.social{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:920px;margin:0 auto 70px}
.social a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 14px;border:1px solid rgba(246,243,238,.22);border-radius:6px;background:rgba(3,4,3,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.3s}
.social b{font-family:var(--display);font-weight:400;font-size:2rem;letter-spacing:.04em;line-height:1}
.social span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,243,238,.65)}
.social a:hover{border-color:var(--acid);background:rgba(212,255,58,.12);transform:translateY(-4px);box-shadow:0 16px 36px rgba(212,255,58,.15)}
.social a:hover b{color:var(--acid)}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(246,243,238,.16);font-size:.75rem;letter-spacing:.1em;color:rgba(246,243,238,.7)}
.foot-row a:hover{color:var(--acid)}

@media(max-width:960px){
  .duo{height:auto;display:grid;gap:40px;padding-bottom:30px}
  .duo .stk{position:relative}.duo .big{width:92%;margin:0 auto}.duo .small{width:56%;margin:-30px 0 0 auto}
  .gal{columns:2;column-gap:22px}
  .break{padding:130px 0}
  .social{grid-template-columns:1fr 1fr}
  .foot{padding-top:90px}
}
@media(max-width:560px){
  .gal{columns:1;padding:10px 6px}
  .members{gap:34px 16px}
  .stk::before{width:86px;margin-left:-43px}
}

.contacto .fx-crack.pink{opacity:.18}.contacto .fx-crack.impact{opacity:.14}


/* ===== Botón de tema ===== */
.theme-btn{flex:none;width:42px;height:42px;margin-left:16px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;position:relative;transition:.3s}
.theme-btn svg{width:20px;height:20px;position:absolute;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.theme-btn .i-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-btn .i-moon{opacity:1}
html[data-theme=dark] .theme-btn .i-sun{opacity:1;transform:none}
html[data-theme=dark] .theme-btn .i-moon{opacity:0;transform:rotate(90deg) scale(.5)}
.theme-btn:hover{background:var(--pink);border-color:var(--pink);color:#fff;transform:rotate(14deg)}
.nav nav{margin-left:auto}
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .45s,color .45s,border-color .45s,filter .45s !important}
@media(max-width:960px){.nav nav{margin-left:0}.theme-btn{margin-left:auto;margin-right:6px}}
/* =====================================================
   MODO LIGHT · luminoso y prendido
   Tokens invertidos: --black = papel, --white = tinta
   ===================================================== */
html[data-theme=light]{
  color-scheme:light;
  --black:#fcfaf5;--ink:#f6f2e8;--ink2:#eee8da;--white:#0c0c0d;
  --pink:#ff2e93;--pink-soft:rgba(255,46,147,.14);--acid:#c8f000;--ice:#9fd8ff;
  --line:rgba(12,12,13,.15);--mute:rgba(12,12,13,.62);
  --paper:#fffdf8;
}
html[data-theme=light] ::selection{background:var(--pink);color:#fff}
html[data-theme=light] .grain{mix-blend-mode:multiply;filter:invert(1);opacity:.07}
html[data-theme=light] .sec{box-shadow:none}
html[data-theme=light] .sec.historia,html[data-theme=light] .sec.envivo,html[data-theme=light] .sec.galeria{background:var(--ink)}
html[data-theme=light] h2 em{text-shadow:none;color:var(--pink)}
html[data-theme=light] .btn{background:var(--white);color:#fcfaf5;border-color:var(--white)}
html[data-theme=light] .btn:hover{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 14px 30px rgba(255,46,147,.35)}
html[data-theme=light] .btn.ghost{background:transparent;color:var(--white);border-color:rgba(12,12,13,.45)}
html[data-theme=light] .btn.ghost:hover{background:var(--white);color:#fcfaf5;border-color:var(--white)}

/* nav */
html[data-theme=light] .nav.solid{background:rgba(252,250,245,.86);border-bottom:1px solid var(--line)}
html[data-theme=light] .brand img{filter:none}
html[data-theme=light] .nav .pill{border-color:var(--white)}
html[data-theme=light] .nav .pill:hover{background:var(--pink);border-color:var(--pink);color:#fff}
html[data-theme=light] .nav nav a.active{color:var(--pink)}

/* hero luminoso */
html[data-theme=light] .slide img{filter:brightness(1.1) contrast(1.02)}
html[data-theme=light] .hero-shade{background:
  linear-gradient(90deg,rgba(252,250,245,.9) 0%,rgba(252,250,245,.62) 46%,rgba(252,250,245,.18) 100%),
  linear-gradient(180deg,rgba(252,250,245,.6) 0%,rgba(252,250,245,0) 34%,rgba(252,250,245,.96) 100%)}
html[data-theme=light] .halftone{opacity:.07}
html[data-theme=light] .glow{mix-blend-mode:normal;opacity:.38;filter:blur(60px)}
html[data-theme=light] .hero[data-mood=meh]{--g:#d8ff3a}
html[data-theme=light] .hero[data-mood=bajon]{--g:#8fd0ff}
html[data-theme=light] .logo-stack img.main{filter:drop-shadow(2px 0 0 #0c0c0d) drop-shadow(-2px 0 0 #0c0c0d) drop-shadow(0 2px 0 #0c0c0d) drop-shadow(0 -2px 0 #0c0c0d) drop-shadow(0 7px 0 rgba(12,12,13,.18))}
html[data-theme=light] .logo-stack .ls.acid{background:#c8f000;opacity:1}
html[data-theme=light] .hero-logo{filter:none}
html[data-theme=light] .note{color:var(--pink);text-shadow:none}
html[data-theme=light] .meta-top{border-top-color:var(--white)}
html[data-theme=light] .meta-top span:last-child{color:var(--pink)}
html[data-theme=light] .lead{color:rgba(12,12,13,.82)}
html[data-theme=light] .mood{background:rgba(255,255,255,.62);border-color:rgba(12,12,13,.2)}
html[data-theme=light] .mood.on{background:var(--white);color:#fcfaf5;border-color:var(--white)}
html[data-theme=light] .mood.on svg{color:#fcfaf5}
html[data-theme=light] .vert{color:rgba(12,12,13,.55)}

/* grietas: tinta fina, sutiles; sin rosado en el inicio */
html[data-theme=light] .fx-crack:not(.pink){filter:invert(1);mix-blend-mode:multiply}
html[data-theme=light] .fx-crack.impact{opacity:.2}html[data-theme=light] .fx-crack.corner{opacity:.16}html[data-theme=light] .fx-crack.long{opacity:.16}
html[data-theme=light] .fx-crack.pink{opacity:.22;mix-blend-mode:multiply}
html[data-theme=light] .hero .fx-crack.pink{display:none}
html[data-theme=light] .hero .fx-crack.impact{opacity:.1;right:-12%}
html[data-theme=light] .hero .fx-crack.corner{opacity:.09}
html[data-theme=light] .hero .fx-crack{mix-blend-mode:multiply}

/* contenido */
html[data-theme=light] .txt p{color:rgba(12,12,13,.8)}
html[data-theme=light] .latest{background:linear-gradient(120deg,rgba(255,46,147,.1),rgba(200,240,0,.12) 70%),var(--paper);box-shadow:0 24px 60px rgba(40,30,20,.12)}
html[data-theme=light] .latest-art{background:radial-gradient(circle at 30% 20%,#3a1228,#0b0b0c 72%)}
html[data-theme=light] .latest-art span{color:#f6f3ee}
html[data-theme=light] .disc:hover svg{color:var(--pink)}
html[data-theme=light] .stream-links a,html[data-theme=light] .side,html[data-theme=light] .form input,html[data-theme=light] .form select,html[data-theme=light] .form textarea{background:var(--paper)}
html[data-theme=light] .stream-links a:hover{box-shadow:0 18px 40px rgba(255,46,147,.2)}
html[data-theme=light] .show{background:rgba(255,253,248,.72);box-shadow:0 14px 34px rgba(40,30,20,.08)}
html[data-theme=light] .show.next time{border-color:#6c8c00;color:#6c8c00}
html[data-theme=light] .pill-tag.live{border-color:#6c8c00;color:#4f6900}
html[data-theme=light] .pill-tag.live:hover{background:var(--acid);color:#0c0c0d;border-color:var(--acid)}
html[data-theme=light] .setlist li{background:rgba(255,253,248,.8)}
html[data-theme=light] .setlist li:hover{color:#fff}
html[data-theme=light] .form select option{background:#fff}
html[data-theme=light] .form-msg{color:#4f6900}
html[data-theme=light] .faces svg:nth-child(2){color:#9bc400}
html[data-theme=light] .envivo .bgimg{opacity:.22}
html[data-theme=light] .bgimg::after{background:linear-gradient(180deg,var(--ink),rgba(241,236,225,.5) 40%,var(--ink))}
html[data-theme=light] .bolt-div{background:var(--black)}

/* interludio luminoso */
html[data-theme=light] .break{background:var(--black)}
html[data-theme=light] .break-img{opacity:.7}
html[data-theme=light] .break::before{background:radial-gradient(ellipse at center,rgba(252,250,245,.72) 15%,rgba(252,250,245,.2) 70%),linear-gradient(180deg,var(--black),transparent 22%,transparent 78%,var(--black))}
html[data-theme=light] .break h2{color:var(--white)}
html[data-theme=light] .break .fx-crack.impact{opacity:.2}

/* stickers sobre papel claro */
html[data-theme=light] .stk{background:var(--paper);box-shadow:0 18px 34px rgba(40,30,20,.3),0 2px 0 rgba(40,30,20,.14),0 0 0 1px rgba(12,12,13,.07)}
html[data-theme=light] .stk:hover{box-shadow:0 28px 54px rgba(40,30,20,.38)}
html[data-theme=light] .stk::before,html[data-theme=light] .stk::after{box-shadow:0 2px 5px rgba(40,30,20,.25)}
html[data-theme=light] .f.on{color:#fff}
html[data-theme=light] .mph,html[data-theme=light] .g{background:#ddd}

/* footer luminoso: verde radiactivo + rosa + papel */
html[data-theme=light] .foot{background:var(--black);border-top:1px solid rgba(12,12,13,.14)}
html[data-theme=light] .foot-layers .l1{background:radial-gradient(circle,rgba(200,240,0,.95),rgba(200,240,0,0) 66%);mix-blend-mode:normal;filter:blur(60px)}
html[data-theme=light] .foot-layers .l2{background:radial-gradient(circle,rgba(255,46,147,.8),rgba(255,46,147,0) 66%);mix-blend-mode:normal;filter:blur(60px)}
html[data-theme=light] .foot-layers .l3{background:radial-gradient(circle,rgba(110,255,150,.85),rgba(150,255,80,.25) 48%,transparent 70%);mix-blend-mode:normal;filter:blur(60px)}
html[data-theme=light] .foot-layers .l4{background:linear-gradient(180deg,#fcfaf5 0%,rgba(252,250,245,.7) 30%,rgba(252,250,245,0) 100%)}
html[data-theme=light] .foot::after{opacity:.18;mix-blend-mode:multiply}
html[data-theme=light] .foot-logo{opacity:1;filter:drop-shadow(0 0 26px rgba(200,240,0,.6)) drop-shadow(0 3px 0 rgba(0,0,0,.55))}
html[data-theme=light] .foot-tag{color:rgba(12,12,13,.72)}
html[data-theme=light] .social a{background:rgba(255,253,248,.62);border-color:rgba(12,12,13,.22)}
html[data-theme=light] .social span{color:rgba(12,12,13,.65)}
html[data-theme=light] .social a:hover{border-color:#0c0c0d;background:var(--acid);box-shadow:0 16px 36px rgba(160,200,0,.35)}
html[data-theme=light] .social a:hover b{color:#0c0c0d}
html[data-theme=light] .foot-row{border-top-color:rgba(12,12,13,.2);color:rgba(12,12,13,.75)}
html[data-theme=light] .foot-row a:hover{color:var(--pink)}
html[data-theme=light] .foot .fx-crack.long.f{opacity:.1}

/* lightbox se mantiene oscuro para ver las fotos */
html[data-theme=light] .lb-x,html[data-theme=light] .lb-n{color:#f6f3ee;background:rgba(5,5,5,.6);border-color:rgba(255,255,255,.25)}

@media(max-width:960px){
  html[data-theme=light] .nav.solid{background:rgba(252,250,245,.96)}
  html[data-theme=light] .nav nav{background:rgba(252,250,245,.98)}
  html[data-theme=light] .hero-shade{background:linear-gradient(180deg,rgba(252,250,245,.72) 0%,rgba(252,250,245,.4) 40%,rgba(252,250,245,.97) 100%)}
}

/* hero: foto impresa sobre papel, más luminosa */
html[data-theme=light] .hero{background:var(--black)}
html[data-theme=light] .slide img{mix-blend-mode:multiply;filter:brightness(1.45) contrast(.9)}
html[data-theme=light] .hero-shade{background:
  linear-gradient(90deg,rgba(252,250,245,.82) 0%,rgba(252,250,245,.45) 42%,rgba(252,250,245,0) 78%),
  linear-gradient(180deg,rgba(252,250,245,.5) 0%,rgba(252,250,245,0) 30%,rgba(252,250,245,0) 62%,rgba(252,250,245,.95) 100%)}
html[data-theme=light] .glow{opacity:.2}
html[data-theme=light] .note{color:#0c0c0d;background:var(--acid);padding:2px 12px;border-radius:3px;transform:rotate(6deg);box-shadow:3px 3px 0 rgba(12,12,13,.85)}
@media(max-width:960px){html[data-theme=light] .hero-shade{background:linear-gradient(180deg,rgba(252,250,245,.55) 0%,rgba(252,250,245,.2) 40%,rgba(252,250,245,.96) 100%)}}

html[data-theme=light] .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;z-index:-1;background:linear-gradient(180deg,rgba(252,250,245,.9),rgba(252,250,245,0))}

/* grietas del inicio: sutiles y sin rosado (también en modo oscuro) */
.hero .fx-crack.pink{display:none}
.hero .fx-crack.impact{opacity:.15}
.hero .fx-crack.corner{opacity:.12}
.note{white-space:nowrap}
.duo .big .cap{font-size:.95rem;opacity:.85}

/* interludio: grietas sin rosado y detrás del texto */
.break .fx-crack{z-index:1}
.break>.wrap{z-index:2}
.break .fx-crack.impact{opacity:.34}
html[data-theme=light] .break .fx-crack.impact{opacity:.26}

/* trizadura de vidrio: más sutil */
.fx-crack.impact{opacity:.13}.fx-crack.corner{opacity:.11}.fx-crack.long{opacity:.09}
.fx-crack.pink{opacity:.12}
.hero .fx-crack.impact{opacity:.1}.hero .fx-crack.corner{opacity:.09}
.break .fx-crack.impact{opacity:.2}
.stk .im::after{opacity:.26}
.foot .fx-crack.long.f{opacity:.08}
html[data-theme=light] .fx-crack.impact{opacity:.15}
html[data-theme=light] .fx-crack.corner{opacity:.13}
html[data-theme=light] .fx-crack.long{opacity:.11}
html[data-theme=light] .fx-crack.pink{opacity:.14}
html[data-theme=light] .hero .fx-crack.impact{opacity:.1}
html[data-theme=light] .hero .fx-crack.corner{opacity:.09}
html[data-theme=light] .break .fx-crack.impact{opacity:.2}
html[data-theme=light] .foot .fx-crack.long.f{opacity:.09}

/* reproductores */
.players{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;margin:0 0 70px;align-items:start}
.player h3{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}
.embed{position:relative;border-radius:12px;overflow:hidden;background:var(--ink);border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.embed.sp iframe{display:block;border:0;border-radius:12px;min-height:352px}
.embed.yt{aspect-ratio:16/9}
.embed.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-poster{position:absolute;inset:0;display:block;cursor:pointer;background:#000}
.yt-poster img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s}
.yt-poster:hover img{transform:scale(1.04);opacity:1}
.yt-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(255,46,147,.25),0 14px 34px rgba(0,0,0,.5);transition:transform .3s}
.yt-play svg{width:38px;height:38px;margin-left:4px}
.yt-poster:hover .yt-play{transform:scale(1.1)}
.yt-title{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-style:normal;font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.yt-channel{display:inline-block;margin-top:16px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--pink);padding-bottom:3px;transition:.25s}
.yt-channel:hover{color:var(--pink)}
@media(max-width:960px){.players{grid-template-columns:1fr;gap:44px}}
.member .stk .im::before{display:none}

/* créditos del fotógrafo */
.ph-link{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px;transition:.2s}
.ph-link:hover{color:var(--pink)}
.photo-credit{display:flex;align-items:center;justify-content:center;gap:12px 16px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.pc-label{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.pc-name{font-size:1.05rem;font-weight:700;letter-spacing:.04em;line-height:1.2;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:4px;transition:.2s}
.pc-name:hover{color:var(--pink)}
.pc-ig{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-size:.78rem;letter-spacing:.06em;font-weight:500;transition:.25s}
.pc-ig svg{width:18px;height:18px}
.pc-ig:hover{background:var(--pink);border-color:var(--pink);color:#fff;transform:translateY(-2px)}
.band-credit,.duo-credit{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.band-credit{text-align:center;margin-top:20px}
.duo-credit{position:absolute;left:4px;bottom:-62px;z-index:2}
.hero-credit{position:absolute;right:28px;bottom:26px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);z-index:3}
.lb-credit{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,243,238,.75)}
.lb-credit a{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px;color:#f6f3ee}
.break-sub .ph-link{color:inherit}
@media(max-width:960px){.duo-credit{position:static;margin-top:6px}.hero-credit{right:20px;bottom:14px}}

/* galería en dos grupos */
.gal-group+.gal-group{margin-top:90px}
.gal-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gal-head h3{font-size:clamp(2rem,4vw,3rem)}
.gal-head p{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.photo-credit{margin-top:34px}
.envivo .bgimg{opacity:.5}
html[data-theme=light] .envivo .bgimg{opacity:.34}

/* ===== Caritas: isotipo de la banda ===== */
.mq-face{width:46px;height:46px;flex:none;color:var(--pink);animation:wob2 4s ease-in-out infinite}
.mq-face.f1{color:var(--acid);animation-delay:-1.3s}.mq-face.f2{color:var(--white);animation-delay:-2.6s}
html[data-theme=light] .mq-face.f1{color:#8aa800}
@keyframes wob2{50%{transform:rotate(14deg) scale(1.1)}}
.track i{display:none}
.eyebrow::before{display:none}
.eb-face{width:20px;height:20px;flex:none;color:var(--pink);transition:transform .5s}
.eyebrow:hover .eb-face{transform:rotate(180deg)}
.break .eyebrow,.sec-head.center .eyebrow{justify-content:center}
.face-div{display:flex;align-items:center;gap:0;background:var(--black);color:var(--pink);padding:4px 0;overflow:hidden}
.face-div .bd{flex:1;min-width:0;height:24px;opacity:.85}
.fd-faces{display:flex;gap:14px;padding:0 22px;flex:none}
.fd-faces svg{width:38px;height:38px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fd-faces .f1{color:var(--acid)}.fd-faces .f2{color:var(--white)}
html[data-theme=light] .fd-faces .f1{color:#8aa800}
.fd-faces svg:hover{transform:rotate(24deg) scale(1.25)}
.h3-face{display:inline-block;width:.8em;height:.8em;vertical-align:-.08em;margin-right:.35em;color:var(--pink)}
.faces svg{cursor:pointer}
.mood-fab{position:fixed;right:20px;bottom:20px;z-index:55;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--pink);color:#fff;box-shadow:0 10px 28px rgba(255,46,147,.4),0 0 0 4px rgba(255,46,147,.18);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1),background .4s}
.mood-fab.show{opacity:1;transform:none;pointer-events:auto}
.mood-fab:hover{transform:rotate(-12deg) scale(1.1)}
.mood-fab svg{position:absolute;width:38px;height:38px;opacity:0;transform:scale(.6) rotate(-30deg);transition:.35s}
.mood-fab svg.on{opacity:1;transform:none}
.mood-fab[data-m=meh]{background:#c8f000;color:#0c0c0d}
.mood-fab[data-m=sad]{background:#0c0c0d;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 4px rgba(255,255,255,.18)}
html[data-theme=dark] .mood-fab[data-m=sad]{background:#f6f3ee;color:#0c0c0d}
@media(max-width:560px){.mq-face{width:36px;height:36px}.fd-faces svg{width:28px;height:28px}.fd-faces{gap:8px;padding:0 12px}.mood-fab{right:14px;bottom:14px;width:52px;height:52px}}

/* mood + música */
.mood-block{display:grid;gap:12px}
.mood-copy{display:grid;gap:2px;max-width:22rem}
.mood-copy b{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:var(--pink)}
.mood-copy span{font-size:.8rem;color:var(--mute);line-height:1.4}
.hero-bottom{grid-template-columns:1.1fr auto auto;align-items:end}
.mood-player{position:absolute;right:70px;bottom:150px;z-index:6;width:min(380px,calc(100% - 70px));padding:14px 14px 10px;border-radius:14px;background:rgba(12,12,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 60px rgba(0,0,0,.5);color:#f6f3ee;animation:mpin .5s cubic-bezier(.2,.7,.2,1)}
.mood-player[hidden]{display:none}
@keyframes mpin{from{opacity:0;transform:translateY(16px) scale(.97)}}
.mp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.mp-tag{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--pink)}
.mp-face{width:22px;height:22px}
.mp-x{background:none;border:0;color:inherit;opacity:.65;font-size:1rem;cursor:pointer;width:28px;height:28px;border-radius:50%}
.mp-x:hover{opacity:1;background:rgba(255,255,255,.12)}
.mp-song{font-family:var(--display);font-size:1.7rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:10px}
.mp-embed{border-radius:12px;overflow:hidden;min-height:152px}
.mp-embed iframe{display:block;width:100%;border:0}
.mp-note{margin-top:8px;font-size:.66rem;letter-spacing:.06em;color:rgba(246,243,238,.6)}
@media(max-width:1100px){.mood-player{right:20px;bottom:170px}}
@media(max-width:960px){.mood-player{position:relative;right:auto;bottom:auto;width:100%;margin-top:16px}.hero-bottom{grid-template-columns:1fr}}
.mp-head{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;padding:2px 0}
.mood-player.dragging{cursor:grabbing;box-shadow:0 34px 80px rgba(0,0,0,.6);animation:none}
.mood-player.dragging .mp-head{cursor:grabbing}
.mood-player.dragging iframe{pointer-events:none}
.mp-grip{letter-spacing:-.2em;opacity:.5;font-size:1rem;margin-right:6px}
.mp-head .mp-tag{flex:1}
.mood-player{animation:none}
.mood-player.pop{animation:mpin .5s cubic-bezier(.2,.7,.2,1)}

/* ===== color fluor por mood ===== */
.hero{--mc:#ff2bb4}
.hero[data-mood=meh]{--mc:#c8ff00}
.hero[data-mood=bajon]{--mc:#00e5ff}
html[data-theme] .hero[data-mood]{--g:var(--mc)}
.glow{opacity:.55;transition:background .6s,opacity .6s}
.logo-stack .ls.pink{background:var(--mc);transition:background .5s,transform .25s}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:-1;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--mc) 38%,transparent),transparent);mix-blend-mode:screen;transition:background .6s}
html[data-theme=light] .hero::after{mix-blend-mode:multiply;background:linear-gradient(0deg,color-mix(in srgb,var(--mc) 30%,transparent),transparent)}
.mood.on{background:var(--mc);border-color:var(--mc);color:#08090a;box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 30%,transparent),0 0 26px color-mix(in srgb,var(--mc) 70%,transparent)}
.mood.on svg{color:#08090a}
html[data-theme=light] .mood.on{background:var(--mc);color:#08090a}
html[data-theme=light] .mood.on svg{color:#08090a}
.mood-copy b{color:var(--mc);text-shadow:0 0 18px color-mix(in srgb,var(--mc) 60%,transparent);transition:color .5s}
html[data-theme=light] .mood-copy b{color:#0c0c0d;text-shadow:none;background:var(--mc);padding:2px 8px;border-radius:3px;display:inline-block;width:max-content}
.mood-player{border-color:color-mix(in srgb,var(--mc) 65%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--mc) 35%,transparent),0 0 38px color-mix(in srgb,var(--mc) 40%,transparent),0 24px 60px rgba(0,0,0,.5)}
.mp-tag{display:flex;align-items:center;gap:8px;margin:0;text-transform:none;letter-spacing:.04em;font-size:.82rem;font-weight:500;color:#f6f3ee}
.mp-tag b{color:var(--mc);font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 14px color-mix(in srgb,var(--mc) 70%,transparent)}
.mp-face{color:var(--mc)}
.mp-song{color:var(--mc);text-shadow:0 0 22px color-mix(in srgb,var(--mc) 55%,transparent)}
.mp-rate{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:10px}
.mp-rate-label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,243,238,.75)}
.stars{display:flex;gap:2px}
.stars button{background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:rgba(246,243,238,.28);padding:0 2px;transition:transform .2s,color .2s,text-shadow .2s}
.stars button.hov,.stars button.on{color:var(--mc);text-shadow:0 0 12px color-mix(in srgb,var(--mc) 80%,transparent)}
.stars button:hover{transform:scale(1.25) rotate(-8deg)}
.mp-rate-msg{font-size:.7rem;color:rgba(246,243,238,.75);width:100%}
.latest-embed{border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.35)}
.latest-embed iframe{display:block;width:100%;height:352px;border:0}
@media(max-width:960px){.latest-embed{max-width:420px}}

/* ===== carrusel de lanzamientos, con el color fluor del mood ===== */
:root{--mcl:#ff2bb4}
.latest{display:block;position:relative;overflow:hidden;padding:30px 30px 22px;border:1px solid color-mix(in srgb,var(--mcl) 55%,transparent);background:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--mcl) 25%,transparent),0 0 46px color-mix(in srgb,var(--mcl) 28%,transparent),0 24px 60px rgba(0,0,0,.35);transition:border-color .6s,box-shadow .6s}
.latest .neon{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;transition:background .6s}
.latest .n1{width:60%;aspect-ratio:1;left:-14%;top:-40%;background:radial-gradient(circle,color-mix(in srgb,var(--mcl) 65%,transparent),transparent 65%);animation:drift 14s ease-in-out infinite alternate}
.latest .n2{width:46%;aspect-ratio:1;right:-10%;bottom:-45%;background:radial-gradient(circle,color-mix(in srgb,var(--mcl) 45%,#00e5ff 20%),transparent 65%);animation:drift 17s ease-in-out infinite alternate-reverse}
.ls-track{position:relative;display:grid}
.ls-slide{grid-area:1/1;display:grid;grid-template-columns:360px 1fr;gap:44px;align-items:center;opacity:0;visibility:hidden;transform:translateX(30px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.ls-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.ls-slide.out{transform:translateX(-30px)}
.latest-embed{box-shadow:0 0 0 1px color-mix(in srgb,var(--mcl) 60%,transparent),0 0 34px color-mix(in srgb,var(--mcl) 45%,transparent),0 20px 50px rgba(0,0,0,.4);transition:box-shadow .6s}
.latest .tagline{background:var(--mcl);color:#08090a;box-shadow:0 0 22px color-mix(in srgb,var(--mcl) 70%,transparent);transition:background .6s,box-shadow .6s}
.latest h3{text-shadow:0 0 26px color-mix(in srgb,var(--mcl) 55%,transparent)}
.ls-nav{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.ls-arrow{width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mcl) 70%,transparent);background:transparent;color:var(--mcl);font-size:1.3rem;cursor:pointer;line-height:1;transition:.25s,box-shadow .6s,border-color .6s,color .6s}
.ls-arrow:hover{background:var(--mcl);color:#08090a;box-shadow:0 0 26px color-mix(in srgb,var(--mcl) 70%,transparent);transform:scale(1.08)}
.ls-dots{display:flex;gap:10px}
.ls-dots button{width:12px;height:12px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mcl) 80%,transparent);background:transparent;cursor:pointer;padding:0;transition:.3s}
.ls-dots button.on{background:var(--mcl);box-shadow:0 0 14px color-mix(in srgb,var(--mcl) 80%,transparent);width:28px;border-radius:99px}
html[data-theme=light] .latest{background:var(--paper)}
html[data-theme=light] .latest .tagline{color:#08090a}
html[data-theme=light] .ls-arrow{color:#0c0c0d;background:color-mix(in srgb,var(--mcl) 25%,#fff)}
@media(max-width:960px){.ls-slide{grid-template-columns:1fr;gap:24px}.latest{padding:22px 18px 18px}.latest-embed{max-width:none}}
.sp-holder{min-height:352px;background:#000;border-radius:14px}
.sp-holder iframe{display:block;width:100%;border:0}
.mp-embed{min-height:0;aspect-ratio:16/9;background:#000}
.mp-embed iframe{width:100%;height:100%}

/* fotos que se intercalan en la ficha */
.im.cycle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.im.cycle img.on{opacity:1}
.im.cycle .cyc-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:3}
.im.cycle .cyc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:.3s}
.im.cycle .cyc-dots i.on{background:#fff;width:18px;border-radius:99px}

/* móvil: el logo del menú siempre visible */
@media(max-width:960px){.nav:not(.solid) .brand{opacity:1;pointer-events:auto}.nav{padding:10px 18px}.brand img{height:38px}}

/* ===== ÁLBUMES DE FOTOS ===== */
.albums-intro{color:var(--mute);margin:-28px 0 34px;font-size:.95rem}
.albums{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:54px 44px;margin-bottom:28px;perspective:1400px}
.album{--leather:#2a1d19;--leather2:#1a1210;--gold:#e8c46a;position:relative;display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:#f6f3ee;font:inherit;transform:rotate(var(--tilt,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.album[data-hue=wine]{--leather:#43141f;--leather2:#240a11}
.album[data-hue=ink]{--leather:#1f2430;--leather2:#10131b}
.album[data-hue=moss]{--leather:#1f3326;--leather2:#101c15}
.alb-front{position:absolute;inset:0;display:block;border-radius:6px 16px 16px 6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:filter .9s,box-shadow .5s;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.1),transparent 55%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),linear-gradient(145deg,var(--leather),var(--leather2));
  box-shadow:0 26px 50px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 2px 2px rgba(255,255,255,.15)}
.alb-front::before{content:"";position:absolute;inset:14px 14px 14px 46px;border:2px dashed rgba(232,196,106,.45);border-radius:4px 10px 10px 4px;pointer-events:none}
.alb-front::after{content:"";position:absolute;right:-9px;top:6px;bottom:6px;width:10px;border-radius:0 8px 8px 0;background:repeating-linear-gradient(180deg,#efe7d6 0 2px,#cfc4ab 2px 3px);box-shadow:2px 3px 8px rgba(0,0,0,.4)}
.alb-spine{position:absolute;left:0;top:0;bottom:0;width:34px;z-index:2;border-radius:6px 0 0 6px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.07) 70%,rgba(0,0,0,.3));box-shadow:inset -2px 0 3px rgba(0,0,0,.4)}
.alb-spine::before,.alb-spine::after{content:"";position:absolute;left:11px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9a9a9a 55%,#444);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.alb-spine::before{top:22%}.alb-spine::after{bottom:22%}
.alb-photo{position:absolute;right:9%;top:11%;width:42%;aspect-ratio:1;background:#ece6d6;padding:7px 7px 24px;transform:rotate(5deg);box-shadow:0 10px 22px rgba(0,0,0,.5);z-index:3}
.alb-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.alb-photo::before{content:"";position:absolute;left:50%;top:-11px;width:62px;height:20px;margin-left:-31px;background:rgba(232,196,106,.7);transform:rotate(-3deg);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.alb-label{position:absolute;left:62px;bottom:16%;width:52%;background:#efe7d6;color:#17120f;padding:12px 14px 10px;border-radius:2px;transform:rotate(-2deg);box-shadow:0 8px 16px rgba(0,0,0,.45);z-index:3;display:grid;gap:2px}
.alb-label small{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:#7b6c50;font-weight:700}
.alb-label b{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:.95;letter-spacing:.03em;text-transform:uppercase}
.alb-label i{font-style:normal;font-family:var(--marker);font-size:.82rem;color:#b3174f}
.alb-face{position:absolute;left:62px;top:12%;width:44px;height:44px;color:var(--gold);z-index:3;opacity:.9}
.alb-hint{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);transition:.3s}
.album:hover{transform:rotate(0)}
.album:hover .alb-hint{color:var(--pink)}
.album.stored .alb-book{animation:stored .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes stored{40%{transform:scale(1.07) rotate(-1.5deg)}}
.album[aria-expanded=true] .alb-hint{color:var(--pink)}
html[data-theme=light] .album{color:#f6f3ee}
html[data-theme=light] .alb-front{box-shadow:0 22px 40px rgba(40,30,20,.4),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 2px 2px rgba(255,255,255,.15)}

.gal-group{scroll-margin-top:90px}
.gal-group[hidden]{display:none}
.album-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:36px}
.album-bar .btn svg{width:22px;height:22px;vertical-align:-6px;margin-right:8px}
.album-top{display:flex;justify-content:flex-end;margin-bottom:12px}
.gal-head{position:relative}
@media(max-width:620px){.albums{grid-template-columns:1fr;gap:54px}.alb-label{left:54px;width:58%}.alb-front::before{inset:12px 12px 12px 40px}.alb-face{left:54px}}

/* cuatro integrantes */
.members{grid-template-columns:repeat(3,1fr);max-width:960px}
@media(max-width:960px){.members{grid-template-columns:repeat(2,1fr);max-width:620px;gap:40px 20px}}
@media(max-width:420px){.members{grid-template-columns:1fr;max-width:320px}}

/* slide con foto vertical: lleva el retrato a un costado, con el borde difuminado */
.slide.side img.bgfill{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(38px) brightness(.55) saturate(1.1);transform:none!important;opacity:.9}
.slide.side img.sidepic{position:absolute;left:0;top:0;width:min(46vw,760px);height:128%;max-width:none;object-fit:cover;object-position:50% 22%;transform:translate(-20%,-24%)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 66%,transparent 100%),linear-gradient(180deg,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 66%,transparent 100%),linear-gradient(180deg,#000 70%,transparent 100%);mask-composite:intersect;filter:brightness(1.05) contrast(1.05)}
html[data-theme=light] .slide.side img.bgfill{filter:blur(38px) brightness(1.5) saturate(.9);mix-blend-mode:multiply;opacity:.55}
html[data-theme=light] .slide.side img.sidepic{mix-blend-mode:multiply;filter:brightness(1.35) contrast(.95)}
.hero.no-credit .hero-credit{opacity:0}
@media(max-width:960px){
  .slide.side img.sidepic{width:100%;height:100%;left:0;transform:none!important;object-position:50% 30%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
}

/* encuadres del header: las dos caras (Sammy y Danilo) quedan sobre las letras del logo, no debajo */
@media(min-width:961px){
  .slide img.t-bajon{transform:translateY(-30%) scale(1.45)!important;transform-origin:50% 30%}
  .slide img.t-tubos{transform:translateY(-43%) scale(1.45)!important;transform-origin:50% 0;object-position:50% 40%}
  .slide img.t-alambre{transform:translateY(-36%) scale(1.4)!important;transform-origin:50% 0;object-position:50% 40%}
}


/* ===== ÁLBUM 3D: la tapa se abre como una puerta sobre su lomo ===== */
.alb-book{position:relative;display:block;aspect-ratio:4/3.1;perspective:2400px;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.25,.8,.25,1)}
.alb-book::after{content:"";position:absolute;right:-9px;top:6px;bottom:6px;width:10px;border-radius:0 8px 8px 0;background:repeating-linear-gradient(180deg,#efe7d6 0 2px,#cfc4ab 2px 3px);box-shadow:2px 3px 8px rgba(0,0,0,.4);z-index:0}
.alb-inside{position:absolute;inset:0;border-radius:6px 16px 16px 6px;overflow:hidden;z-index:1;
  background:linear-gradient(90deg,#b9ab8c 0,#e6dcc4 5%,#f1e9d6 14%,#efe6d1 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 14px 0 18px -10px rgba(0,0,0,.55),0 26px 50px rgba(0,0,0,.5)}
.alb-inside::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>")}
.alb-inside i{position:absolute;display:block;width:34%;aspect-ratio:3/2;background:#fffdf6;padding:5px;box-shadow:0 6px 14px rgba(0,0,0,.35);border-radius:2px}
.alb-inside i img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05)}
.alb-inside .k1{left:34%;top:14%;transform:rotate(-9deg)}
.alb-inside .k2{left:44%;top:30%;transform:rotate(6deg)}
.alb-inside .k3{left:38%;top:46%;transform:rotate(-3deg);width:38%}
.alb-cover{position:absolute;inset:0;z-index:3;display:block;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.22,.8,.24,1)}
.album:not(.is-open):hover .alb-cover{transform:rotateY(-24deg)}
.album.is-open .alb-cover{transform:rotateY(-82deg)}
.album.is-open .alb-front{filter:brightness(.62);box-shadow:30px 24px 50px rgba(0,0,0,.55)}
.album.is-open .alb-book{transform:rotateX(6deg) rotateZ(-1.2deg) translateY(-6px)}
.album.is-open .alb-hint{opacity:.0}
@media(max-width:620px){.album.is-open .alb-cover{transform:rotateY(-70deg)}}

/* ===== flechas del slider del header ===== */
.hero-arrow{position:absolute;top:40%;z-index:7;width:46px;height:46px;border-radius:50%;border:1px solid rgba(246,243,238,.28);background:rgba(5,5,5,.22);color:#f6f3ee;display:grid;place-items:center;cursor:pointer;opacity:.55;transition:opacity .3s,background .3s,border-color .3s,color .3s,transform .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-arrow svg{width:18px;height:18px}
.hero-arrow.prev{left:18px}.hero-arrow.next{right:18px}
.hero-arrow:hover{opacity:1;background:var(--mc);border-color:var(--mc);color:#08090a;transform:scale(1.08)}
html[data-theme=light] .hero-arrow{border-color:rgba(12,12,13,.3);background:rgba(252,250,245,.4);color:#0c0c0d}
html[data-theme=light] .hero-arrow:hover{background:var(--mc);color:#08090a}
.vert{top:66%}
@media(max-width:960px){.hero-arrow{width:38px;height:38px;top:34%}.hero-arrow.prev{left:8px}.hero-arrow.next{right:8px}}

/* formulario: trampa anti-spam + comprobación de identidad */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.hc{border:1px solid var(--line);border-radius:8px;padding:14px 16px 16px;display:grid;gap:10px;background:var(--paper,rgba(255,255,255,.03));transition:border-color .3s,box-shadow .3s}
.hc legend{padding:0 8px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.hc p{font-size:.92rem;color:var(--white)}
.hc p b{color:var(--pink);text-transform:uppercase;letter-spacing:.08em}
.hc-faces{display:flex;gap:14px}
.hc-faces button{width:58px;height:58px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--white);cursor:pointer;display:grid;place-items:center;transition:.25s}
.hc-faces svg{width:36px;height:36px}
.hc-faces button:hover{border-color:var(--pink);color:var(--pink);transform:rotate(-8deg) scale(1.08)}
.hc-faces button.on{background:var(--acid,#c8ff00);border-color:var(--acid,#c8ff00);color:#08090a}
.hc.ok{border-color:#7cb500;box-shadow:0 0 0 3px rgba(124,181,0,.16)}
.hc.ok p::after{content:" ✓ Listo";color:#7cb500;font-weight:700}
.hc.bad{border-color:#ff5c5c;animation:hcshake .45s}
@keyframes hcshake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.form .btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* ===== PUERTA DE ENTRADA (santo y seña) ===== */
.gate{display:none}
html.locked .gate{display:grid}
html.locked body{overflow:hidden}
.gate{position:fixed;inset:0;z-index:300;place-items:center;padding:24px;background:#050505;color:#f6f3ee;overflow:hidden;--mc:#ff2bb4;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
.gate::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background:radial-gradient(circle at center,#fff 0 1px,transparent 1.6px) 0 0/5px 5px}
.gate::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.7) 100%)}
.gate-glow{position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:radial-gradient(circle,var(--mc) 0,transparent 62%);opacity:.34;filter:blur(60px);pointer-events:none;transition:opacity .4s}
.gate .fx-crack{opacity:.16;right:-8%;top:8%;filter:none;mix-blend-mode:screen}
.gate-in{position:relative;z-index:2;width:min(960px,100%);display:grid;justify-items:center;text-align:center;gap:0}
.gate .logo-stack{width:var(--logo-gate-w);margin:0 auto .5vh;transform:rotate(var(--logo-tilt))}
.gate .logo-stack img.main{filter:drop-shadow(0 5px 0 rgba(0,0,0,.5))!important}
.gate .logo-stack .ls.pink{background:var(--mc)!important;transition:background .5s}
.gate .logo-stack .ls.acid{background:#d4ff3a!important;opacity:.9}
.gate-copy{margin:1.6rem 0 1.8rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.9;color:rgba(246,243,238,.72)}
.gate-row{display:flex;gap:10px;align-items:stretch;width:min(420px,100%)}
.gate-row input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid rgba(246,243,238,.28);border-radius:99px;padding:14px 22px;color:#f6f3ee;font:500 1.05rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-align:center;transition:border-color .25s,box-shadow .25s}
.gate-row input::placeholder{color:rgba(246,243,238,.35);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.gate-row input:focus{outline:0;border-color:#ff2bb4;box-shadow:0 0 0 3px rgba(255,43,180,.25),0 0 28px rgba(255,43,180,.25)}
.gate-go{border:1px solid #f6f3ee;background:#f6f3ee;color:#050505;border-radius:99px;padding:0 24px;font:700 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.25s}
.gate-go:hover{background:#ff2bb4;border-color:#ff2bb4;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,43,180,.4)}
.gate-msg{min-height:1.5em;margin-top:14px;font-size:.8rem;letter-spacing:.1em;color:#ff7aa8}
.gate.bad .gate-row{animation:hcshake .45s}
.gate.bad .gate-row input{border-color:#ff5c5c}
.gate.ok{opacity:0;transform:scale(1.06);filter:blur(10px);pointer-events:none}
.gate.ok .logo-stack{animation:none}
@media(max-width:560px){.gate-row{flex-direction:column}.gate-go{padding:14px 24px}.gate-copy{font-size:.72rem}}

/* ===== moods dentro de la puerta: se puede escuchar música sin entrar ===== */
.gate[data-mood=euforia]{--mc:#ff2bb4}
.gate[data-mood=meh]{--mc:#c8ff00}
.gate[data-mood=bajon]{--mc:#00e5ff}
.gate{overflow:auto}
.gate-moods{margin-top:2.2rem;display:grid;gap:12px;justify-items:center}
.gate-moods-copy{display:grid;gap:3px;justify-items:center}
.gate-moods-copy b{font-family:var(--display);font-weight:400;font-size:1.45rem;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:var(--mc);text-shadow:0 0 18px color-mix(in srgb,var(--mc) 55%,transparent);transition:color .5s}
.gate-moods-copy span{font-size:.78rem;color:rgba(246,243,238,.62)}
.gate-mood-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gmood{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid rgba(246,243,238,.22);border-radius:99px;padding:6px 18px 6px 8px;color:#f6f3ee;font:500 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.25s}
.gmood svg{width:26px;height:26px;color:#f6f3ee;transition:.25s}
.gmood:hover{border-color:rgba(246,243,238,.6)}
.gmood.on{background:var(--mc);border-color:var(--mc);color:#08090a;box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 30%,transparent),0 0 26px color-mix(in srgb,var(--mc) 70%,transparent)}
.gmood.on svg{color:#08090a}
.gate-player{position:fixed;right:22px;bottom:22px;z-index:5;width:min(380px,calc(100% - 44px));padding:14px 14px 12px;border-radius:14px;background:rgba(12,12,13,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid color-mix(in srgb,var(--mc) 65%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--mc) 30%,transparent),0 0 38px color-mix(in srgb,var(--mc) 38%,transparent),0 24px 60px rgba(0,0,0,.55);animation:mpin .5s cubic-bezier(.2,.7,.2,1);text-align:left}
.gate-player[hidden]{display:none}
.gp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.gp-tag{display:flex;align-items:center;gap:8px;margin:0;font-size:.82rem;letter-spacing:.04em;color:#f6f3ee}
.gp-tag b{color:var(--mc);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 14px color-mix(in srgb,var(--mc) 70%,transparent)}
.gp-face{width:22px;height:22px;color:var(--mc)}
.gp-x{background:none;border:0;color:#f6f3ee;opacity:.65;font-size:1rem;cursor:pointer;width:28px;height:28px;border-radius:50%}
.gp-x:hover{opacity:1;background:rgba(255,255,255,.12)}
.gp-song{font-family:var(--display);font-size:1.7rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin:0 0 10px;color:var(--mc);text-shadow:0 0 22px color-mix(in srgb,var(--mc) 55%,transparent)}
.gp-embed{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000}
.gp-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:560px){.gate-player{left:12px;right:12px;bottom:12px;width:auto}.gate-moods{margin-top:1.4rem}.gate-in{padding-bottom:230px}}


/* ===== tarjetas de mood flotantes: se arrastran, se lanzan, y en Meh derivan ===== */
.mood-player,.gate-player{position:fixed!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;margin:0!important;width:min(380px,calc(100vw - 16px))!important;will-change:transform;animation:none!important;touch-action:none}
.mood-player{z-index:80;--mc:var(--mcl,#ff2bb4)}
.gate-player{z-index:10}
.mood-player.pop,.gate-player:not([hidden]){animation:mpfade .45s ease!important}
@keyframes mpfade{from{opacity:0}}
.gp-head,.gp-song,.mp-song{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.gate-player.dragging,.mood-player.dragging{cursor:grabbing;box-shadow:0 34px 80px rgba(0,0,0,.6)}
.gate-player.dragging .gp-head,.gate-player.dragging .gp-song,.mood-player.dragging .mp-head,.mood-player.dragging .mp-song{cursor:grabbing}
.gate-player.dragging iframe,.mood-player.dragging iframe{pointer-events:none}
@media(max-width:560px){.gate-in{padding-bottom:0!important}}
.gate{overflow-x:hidden;overflow-y:auto}

/* ===== TIENDA (discos, poleras, chapitas) ===== */
.tienda{background:var(--ink)}
.shop-lead{max-width:38rem;margin-top:1.2rem;color:var(--mute);font-weight:300}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px;padding:14px 6px}
.shop-card{color:#17120f;display:flex;flex-direction:column;padding:10px 10px 18px}
.shop-card .sc-photo{position:relative;aspect-ratio:4/5;background:#0b0b0c;overflow:hidden;border-radius:2px}
.shop-card .sc-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.shop-card:hover .sc-photo img{transform:scale(1.05)}
.sc-ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:#f6f3ee;
  background:radial-gradient(circle at 30% 20%,rgba(255,43,180,.28),transparent 60%),linear-gradient(145deg,#181015,#0a0a0b)}
.sc-ph svg{width:84px;height:84px;color:#ff2bb4;opacity:.9}
.sc-ph span{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.sc-tag{position:absolute;left:10px;top:10px;z-index:2;background:#d4ff3a;color:#08090a;font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.sc-body{display:grid;gap:8px;padding:16px 8px 0}
.sc-kind{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:#7b6c50;font-weight:700}
.sc-body h3{font-size:2.1rem;line-height:.95;color:#17120f}
.sc-desc{font-size:.88rem;line-height:1.5;color:#3d352a;font-weight:400}
.sc-size{display:flex;align-items:center;gap:10px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#7b6c50;font-weight:700}
.sc-size select{background:#fff;border:1px solid rgba(23,18,15,.3);border-radius:99px;padding:7px 14px;font:600 .82rem var(--sans);color:#17120f;letter-spacing:.04em}
.sc-price{font-family:var(--display);font-size:2.4rem;line-height:1;color:#17120f;margin-top:4px}
.sc-price small{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#7b6c50;margin-left:6px}
.sc-actions{display:grid;gap:8px;margin-top:6px}
.sc-btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;padding:13px 18px;font:800 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:.25s;text-align:center}
.sc-btn svg{width:18px;height:18px;flex:none}
.sc-btn.mp{background:#009ee3;color:#fff}
.sc-btn.mp:hover{background:#0083bd;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,158,227,.35)}
.sc-btn.wa{background:#17120f;color:#fff}
.sc-btn.wa:hover{background:#25d366;color:#08090a;transform:translateY(-2px);box-shadow:0 10px 22px rgba(37,211,102,.35)}
.sc-btn.alt{background:transparent;color:#17120f;border-color:rgba(23,18,15,.4)}
.sc-btn.alt:hover{background:#17120f;color:#fff}
.sc-btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.shop-note{margin-top:46px;text-align:center;font-size:.8rem;letter-spacing:.06em;color:var(--mute)}
.shop-note:empty{display:none}
@media(max-width:960px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shop-grid{grid-template-columns:1fr;gap:40px}}

/* tienda: producto con dos fotos (portada / contraportada) */
.sc-photo.multi{cursor:pointer}
.sc-photo.multi img{position:absolute;inset:0;opacity:0;transition:opacity .5s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.sc-photo.multi img.on{opacity:1}
.sc-switch{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(5,5,5,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}
.sc-switch button{border:0;background:transparent;color:#f6f3ee;font:700 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:99px;cursor:pointer;transition:.25s}
.sc-switch button.on{background:#f6f3ee;color:#08090a}
.sc-switch button:not(.on):hover{background:rgba(255,255,255,.16)}

/* aviso sobre la tarjeta flotante */
.grab-hint{margin:-2px 0 8px;text-align:center;font-family:var(--marker);font-size:.98rem;line-height:1.1;color:var(--mc);text-shadow:0 0 16px color-mix(in srgb,var(--mc) 60%,transparent);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;animation:hintbob 2.6s ease-in-out infinite}
@keyframes hintbob{50%{transform:translateY(-2px) rotate(-1.5deg)}}
.mood-player.dragging .grab-hint,.gate-player.dragging .grab-hint{cursor:grabbing;animation:none}

/* ===== tienda: pedido por WhatsApp, Instagram, entrega ===== */
.sc-btn.add{background:transparent;color:#17120f;border:1px dashed rgba(23,18,15,.5)}
.sc-btn.add:hover{background:#d4ff3a;border-style:solid;border-color:#17120f}
.shop-ig{margin-top:18px;text-align:center;font-size:.9rem;color:var(--mute)}
.shop-ig a{color:var(--pink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.shop-delivery{margin:56px auto 0;max-width:980px;padding:30px 30px 26px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03)}
.shop-delivery:empty{display:none}
.shop-delivery h3{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:20px}
.shop-delivery ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 34px}
.shop-delivery li{display:flex;gap:14px;align-items:flex-start}
.shop-delivery svg{width:34px;height:34px;flex:none;color:var(--pink);margin-top:2px}
.shop-delivery b{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:3px}
.shop-delivery span{font-size:.9rem;color:var(--mute);line-height:1.5;font-weight:300}
.shop-demo{margin:26px auto 0;max-width:620px;padding:10px 16px;border:1px dashed #ffb300;border-radius:8px;text-align:center;font-size:.76rem;letter-spacing:.04em;color:#ffb300}
.shop-demo[hidden]{display:none}
.wa-fab{position:fixed;left:18px;bottom:20px;z-index:54;width:58px;height:58px;border-radius:50%;background:#25d366;color:#08090a;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.4),0 0 0 4px rgba(37,211,102,.18);transition:transform .3s,box-shadow .3s}
.wa-fab[hidden]{display:none}
.wa-fab svg{width:30px;height:30px}
.wa-fab:hover{transform:scale(1.1) rotate(-6deg);box-shadow:0 14px 32px rgba(37,211,102,.55),0 0 0 6px rgba(37,211,102,.22)}
.order{position:fixed;left:50%;bottom:20px;z-index:56;width:min(420px,calc(100vw - 150px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:stretch;gap:8px}
.order[hidden]{display:none}
.order-toggle{display:flex;align-items:center;gap:10px;background:#0c0c0d;color:#f6f3ee;border:1px solid rgba(246,243,238,.28);border-radius:99px;padding:8px 18px 8px 8px;cursor:pointer;font:700 .8rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 14px 34px rgba(0,0,0,.45);transition:.25s}
.order-toggle:hover{border-color:var(--pink)}
.order-count{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:#d4ff3a;color:#08090a;font-size:.85rem}
.order-label{flex:1;text-align:left}
.order-toggle b{font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:.04em;color:#d4ff3a}
.order.pulse .order-toggle{animation:ordpulse .6s}
@keyframes ordpulse{40%{transform:scale(1.06)}}
.order-panel{background:rgba(12,12,13,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f6f3ee;border:1px solid rgba(246,243,238,.2);border-radius:14px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.order-panel[hidden]{display:none}
.order-title{font-family:var(--display);font-size:1.5rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.order-list{list-style:none;display:grid;gap:8px;max-height:34vh;overflow:auto}
.order-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.88rem;border-bottom:1px solid rgba(246,243,238,.12);padding-bottom:8px}
.order-list i{font-style:normal;color:#d4ff3a;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.ol-q{display:flex;align-items:center;gap:8px;flex:none}
.ol-q button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(246,243,238,.35);background:transparent;color:#f6f3ee;cursor:pointer;font-size:1rem;line-height:1}
.ol-q button:hover{background:#d4ff3a;color:#08090a;border-color:#d4ff3a}
.order-hint{margin:12px 0;font-size:.74rem;color:rgba(246,243,238,.65)}
.order-actions{display:grid;gap:8px}
.order-actions .btn{width:100%;text-align:center;padding:13px 18px}
.order-actions .btn.ghost{color:#f6f3ee;border-color:rgba(246,243,238,.4)}
.order-actions .btn.ghost:hover{background:#f6f3ee;color:#08090a}
@media(max-width:700px){.shop-delivery ul{grid-template-columns:1fr}.shop-delivery{padding:22px 18px}.wa-fab{left:12px;bottom:14px;width:52px;height:52px}.order{bottom:14px;width:calc(100vw - 140px)}.order-label{display:none}}

/* ===== mini chat de preguntas prediseñadas ===== */
.chat-fab{position:fixed;left:18px;bottom:20px;z-index:55;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:#d4ff3a;color:#08090a;box-shadow:0 10px 26px rgba(212,255,58,.35),0 0 0 4px rgba(212,255,58,.18);transition:transform .3s,box-shadow .3s}
.chat-fab svg{position:absolute;width:34px;height:34px;transition:transform .35s,opacity .25s}
.chat-fab .cf-x{width:22px;height:22px;opacity:0;transform:rotate(-60deg) scale(.6)}
.chat-fab.open .cf-face{opacity:0;transform:rotate(60deg) scale(.6)}
.chat-fab.open .cf-x{opacity:1;transform:none}
.chat-fab:hover{transform:scale(1.08) rotate(-6deg)}
.chat{position:fixed;left:18px;bottom:92px;z-index:57;width:min(360px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 130px));display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:rgba(12,12,13,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#f6f3ee;border:1px solid rgba(212,255,58,.5);box-shadow:0 0 0 1px rgba(212,255,58,.15),0 24px 60px rgba(0,0,0,.55);animation:chatin .35s cubic-bezier(.2,.8,.2,1)}
.chat[hidden]{display:none}
@keyframes chatin{from{opacity:0;transform:translateY(14px) scale(.97)}}
.chat-head{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(246,243,238,.14);background:linear-gradient(90deg,rgba(212,255,58,.14),transparent)}
.chat-head svg{width:34px;height:34px;color:#d4ff3a;flex:none}
.chat-head b{display:block;font-family:var(--display);font-weight:400;font-size:1.45rem;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.chat-head span{font-size:.7rem;color:rgba(246,243,238,.65)}
.chat-body{padding:14px 14px 6px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:120px}
.cb{max-width:88%;padding:10px 13px;border-radius:14px;font-size:.88rem;line-height:1.45;animation:cbin .3s ease}
@keyframes cbin{from{opacity:0;transform:translateY(8px)}}
.cb p{margin:0}
.cb.bot{align-self:flex-start;background:#1c1c1f;border:1px solid rgba(246,243,238,.12);border-bottom-left-radius:4px}
.cb.me{align-self:flex-end;background:#ff2bb4;color:#08090a;font-weight:600;border-bottom-right-radius:4px}
.cb.typing{display:flex;gap:5px;padding:13px 14px}
.cb.typing i{width:7px;height:7px;border-radius:50%;background:rgba(246,243,238,.6);animation:cdot 1s infinite}
.cb.typing i:nth-child(2){animation-delay:.15s}.cb.typing i:nth-child(3){animation-delay:.3s}
@keyframes cdot{50%{transform:translateY(-4px);opacity:.4}}
.cas{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ca{border:1px solid #d4ff3a;color:#d4ff3a;background:transparent;border-radius:99px;padding:7px 13px;font:700 .72rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:.2s}
.ca:hover{background:#d4ff3a;color:#08090a}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 14px;border-top:1px solid rgba(246,243,238,.1);max-height:34%;overflow:auto}
.chat-quick.wait{opacity:.5;pointer-events:none}
.cq{border:1px solid rgba(246,243,238,.3);background:rgba(255,255,255,.04);color:#f6f3ee;border-radius:99px;padding:8px 12px;font:500 .78rem/1.2 var(--sans);cursor:pointer;text-align:left;transition:.2s}
.cq:hover{border-color:#ff2bb4;color:#ff2bb4}
.cq.done{opacity:.55}
@media(max-width:700px){.chat-fab{left:12px;bottom:14px;width:52px;height:52px}.chat{left:12px;bottom:76px;max-height:calc(100vh - 110px)}}

/* ===== compra de disco: modal de 3 pasos ===== */
.sc-btn.buy{background:#009ee3;color:#fff;border-color:#009ee3}
.sc-btn.buy:hover{background:#0083bd;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,158,227,.35)}
.sc-btn.buy svg{width:18px;height:18px}
html.co-open{overflow:hidden}
.co{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:14px;overflow-y:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.co[hidden]{display:none}
.co-box{position:relative;width:100%;max-width:640px;max-height:calc(100vh - 28px);overflow-y:auto;background:var(--ink);color:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.co-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--white);cursor:pointer;font-size:1rem}
.co-x:hover{background:var(--pink);border-color:var(--pink);color:#000}
.co-kicker{margin:0 40px 4px 0;font:800 .7rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.co-title{margin:0 0 14px;font:400 clamp(1.7rem,5vw,2.3rem)/1 var(--display);letter-spacing:.02em}
.co-steps{display:flex;gap:6px;list-style:none;margin:0 0 18px;padding:0}
.co-steps li{flex:1;text-align:center;font:700 .66rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:9px 4px;border-radius:99px;border:1px solid var(--line);color:var(--mute)}
.co-steps li.on{background:var(--pink);border-color:var(--pink);color:#000}
.co-steps li.done{border-color:var(--acid);color:var(--acid)}
.co-lead{margin:0 0 14px;color:var(--mute)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-f{display:flex;flex-direction:column;gap:5px;font:700 .72rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.co-f.wide{grid-column:1/-1}
.co-f small{text-transform:none;letter-spacing:0;font-weight:500}
.co-f input,.co-f select{width:100%;font:500 1rem/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--white);background:var(--ink2);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:46px}
.co-f input:focus,.co-f select:focus{outline:2px solid var(--pink);outline-offset:1px}
.co-f [aria-invalid=true]{border-color:#ff4d6d}
.co-err{font:600 .74rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:#ff6b8f;font-style:normal;min-height:0}
.co-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.co-note{margin:14px 0 0;font-size:.82rem;color:var(--mute)}
.co-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.co-actions .btn{padding:14px 26px}
.co-sum{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.co-sum div{display:flex;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line)}
.co-sum div:last-child{border-bottom:0}
.co-sum dt{color:var(--mute)}.co-sum dd{margin:0;text-align:right;font-weight:700}
.co-sum .tot{background:var(--pink-soft);font-size:1.1rem}
.co-addr{margin-top:14px;padding:14px;border-radius:12px;background:var(--ink2);font-size:.9rem}
.co-addr p{margin:0 0 4px}
.co-wait{display:grid;justify-items:center;gap:14px;padding:30px 0;text-align:center}
.co-spin{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--pink);animation:coSpin .8s linear infinite}
@keyframes coSpin{to{transform:rotate(360deg)}}
.co-fail{padding:14px;border-radius:12px;border:1px solid #ff4d6d;color:#ff6b8f;margin:6px 0 0}
@media(max-width:560px){.co{padding:0;place-items:end stretch}.co-box{max-width:none;max-height:94vh;border-radius:18px 18px 0 0;padding:22px 16px 18px}.co-grid{grid-template-columns:1fr}.co-actions .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.co-spin{animation-duration:2.4s}}

.co-price{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:10px;background:var(--pink-soft);border:1px solid var(--line);font-weight:700}
.co-pane[hidden],.co-wait[hidden],.co-fail[hidden],.co-actions[hidden]{display:none}

/* descargas eléctricas del logo */
.hero-bolts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;mix-blend-mode:screen}

/* energía azul fluor que recorre las letras */
.logo-stack .volt-wrap{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  filter:drop-shadow(0 0 6px rgba(40,215,255,.95)) drop-shadow(0 0 18px rgba(0,170,255,.75))}
.logo-stack .volt-in{position:absolute;inset:0;
  -webkit-mask:var(--brand-logo) center/100% 100% no-repeat;mask:var(--brand-logo) center/100% 100% no-repeat}
/* en modo claro la energía no puede mezclarse en "screen" (se perdería sobre fondo claro) */
html[data-theme=light] .logo-stack .volt-wrap{mix-blend-mode:normal;filter:drop-shadow(0 0 5px rgba(0,150,255,.95)) drop-shadow(0 0 14px rgba(0,120,255,.7))}
html[data-theme=light] .hero-bolts{mix-blend-mode:normal}

/* foto de la banda: velo oscuro que se retira al pasar el mouse */
#banda .stk.wide .im::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.52) 55%,rgba(0,0,0,.62));
  opacity:1;transition:opacity .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  #banda .stk.wide:hover .im::before,#banda .stk.wide:focus-visible .im::before{opacity:0}
}
@media (hover:none){#banda .stk.wide .im::before{opacity:.55}}

/* menú del header: más marcado, en negrita, con una línea fina abajo */
.nav{border-bottom:1px solid rgba(246,243,238,.26)}
.nav.solid{border-bottom-color:rgba(246,243,238,.34)}
html[data-theme=light] .nav{border-bottom-color:rgba(12,12,13,.28)}
html[data-theme=light] .nav.solid{border-bottom-color:rgba(12,12,13,.36)}
@media(min-width:961px){
  .nav nav{font-size:.84rem;font-weight:800;letter-spacing:.12em}
  .nav nav a{opacity:1}
  .nav nav a:not(.pill):hover,.nav nav a.active{color:var(--pink)}
  .nav .pill{font-weight:800;border-width:1.5px}
}

/* menú del header: fondo negro fijo (en ambos temas) con líneas en degradé */
.nav,.nav.solid,html[data-theme=light] .nav,html[data-theme=light] .nav.solid{
  background:rgba(5,5,5,.96);border-bottom:0;color:#f6f3ee;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  --white:#f6f3ee;--line:rgba(246,243,238,.18);--mute:rgba(246,243,238,.62)}
.nav::before,.nav::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.nav::before{top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(40,215,255,.7) 20%,rgba(212,255,58,.7) 50%,rgba(255,63,158,.7) 80%,transparent)}
.nav::after{bottom:0;height:2px;background:linear-gradient(90deg,transparent 0,#ff3f9e 16%,#d4ff3a 50%,#28d7ff 84%,transparent 100%);
  box-shadow:0 0 14px rgba(255,63,158,.35),0 0 22px rgba(40,215,255,.18)}
html[data-theme=light] .nav .pill{border-color:#f6f3ee}
html[data-theme=light] .nav .pill:hover{background:var(--pink);border-color:var(--pink);color:#000}
html[data-theme=light] .nav nav a.active{color:var(--pink)}
@media(max-width:960px){
  html[data-theme=light] .nav nav{background:rgba(5,5,5,.98)}
}
/* el logo del menú (sobre fondo negro) se mantiene blanco también en modo claro */
html[data-theme=light] .nav .brand img{filter:none}

/* carita seria abajo al centro: mismo estilo que el botón de subir, en azul fluor; lleva de inmediato al final */
.down-fab{position:fixed;left:50%;bottom:20px;z-index:55;width:58px;height:58px;margin-left:-29px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:#1aa8ff;color:#fff;box-shadow:0 10px 28px rgba(26,168,255,.45),0 0 0 4px rgba(26,168,255,.2);
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1),background .4s}
.down-fab.show{opacity:1;transform:none;pointer-events:auto}
.down-fab:hover{transform:rotate(12deg) scale(1.1)}
.down-fab svg{position:absolute;width:38px;height:38px;transition:transform .35s}
.down-fab.drop{animation:dfDrop .45s cubic-bezier(.5,0,1,.6)}
@keyframes dfDrop{0%{transform:none}40%{transform:translateY(-8px) scale(1.05)}100%{transform:translateY(60px) scale(.7);opacity:0}}
@media(max-width:560px){.down-fab{bottom:14px;width:52px;height:52px;margin-left:-26px}}
@media(prefers-reduced-motion:reduce){.down-fab.drop{animation:none}}
/* carita seria: tamaño exacto y carita siempre centrada */
.down-fab{box-sizing:border-box;padding:0;line-height:0}
.down-fab svg{position:absolute;inset:0;margin:auto;width:38px;height:38px}

/* ===== puerta: cuenta regresiva con cartucho de dinamita ===== */
.gate-count{display:grid;justify-items:center;gap:6px;margin:1.2rem 0 .4rem;width:min(640px,100%)}
.tnt{width:min(520px,92vw);filter:drop-shadow(0 10px 0 rgba(0,0,0,.45));animation:tntShake 2.6s ease-in-out infinite}
.tnt svg{display:block;width:100%;height:auto;overflow:visible}
.tnt-spark{transform-box:fill-box;transform-origin:center;animation:tntSpark .32s steps(2,end) infinite}
@keyframes tntSpark{0%{transform:translate(622px,8px) scale(1) rotate(0)}50%{transform:translate(622px,8px) scale(1.25) rotate(18deg)}100%{transform:translate(622px,8px) scale(.92) rotate(-12deg)}}
@keyframes tntShake{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-1.4deg) translateX(-2px)}92%{transform:rotate(1.4deg) translateX(2px)}95%{transform:rotate(-.8deg)}}
.cd{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-top:2px;flex-wrap:nowrap}
.cd-u{display:grid;justify-items:center;gap:3px;min-width:clamp(52px,12vw,92px);padding:10px 8px 8px;border:1px solid rgba(246,243,238,.22);border-radius:12px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,43,180,.12) inset,0 8px 26px rgba(0,0,0,.35)}
.cd-u b{font:400 clamp(2rem,7.5vw,3.6rem)/1 var(--display);letter-spacing:.03em;color:#d4ff3a;text-shadow:0 0 18px rgba(212,255,58,.45);font-variant-numeric:tabular-nums}
.cd-u span{font:700 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(246,243,238,.62)}
.cd>i{font:400 clamp(1.6rem,5vw,2.6rem)/1 var(--display);font-style:normal;color:var(--mc);padding-top:10px;opacity:.9}
.cd-note{margin:6px 0 0;font:700 .7rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(246,243,238,.55)}
@media(max-width:560px){.cd{gap:3px}.cd>i{display:none}.cd-u{padding:8px 5px 6px;min-width:0;flex:1}.gate-count{margin:.8rem 0 .2rem}}
@media(prefers-reduced-motion:reduce){.tnt,.tnt-spark{animation:none}}

/* ===== identidad: transición Inestable → nueva etapa ===== */
.gate-former{margin:.2rem 0 0;font:700 .72rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(246,243,238,.55)}
#historia .txt-note{margin:1.4rem 0 0;max-width:560px;padding:14px 16px;border-left:3px solid var(--pink);background:var(--pink-soft);border-radius:0 10px 10px 0;font-size:.95rem;line-height:1.6}

/* ===== logo plano y vectorial: sin capas dobles de color ni sombras duras ===== */
.logo-stack .ls.pink,.logo-stack .ls.acid{display:none!important}
.logo-stack img.main,.gate .logo-stack img.main{filter:none!important}
.logo-stack{animation:none}
html[data-theme=light] .logo-stack img.main{filter:drop-shadow(1.5px 0 0 #0c0c0d) drop-shadow(-1.5px 0 0 #0c0c0d) drop-shadow(0 1.5px 0 #0c0c0d) drop-shadow(0 -1.5px 0 #0c0d0d)!important}
.foot-logo,html[data-theme=light] .foot-logo{filter:none}

/* puerta: logo grande y contenido compacto para que todo quepa sin scroll en pantallas altas */
.gate .logo-stack{margin:0 auto 3.2vh}
.gate .tnt{width:min(400px,78vw)}
.gate .gate-count{margin:.6rem 0 .2rem}
.gate .gate-copy{margin:1rem 0 1.1rem}
.gate .gate-moods{margin-top:1.3rem}
@media(max-height:760px){:root{--logo-gate-w:min(calc(100vw - 8px),clamp(286px,52vh,494px))}}

/* Historia: tercera foto (Pablo) apilada abajo a la izquierda */
.duo .third{left:21%;bottom:-2px;width:34%;aspect-ratio:4/5;z-index:3}
@media(max-width:960px){.duo .third{position:relative;left:auto;bottom:auto;width:46%;margin:-40px auto 0 0}}
/* acento de los titulares: rojo del logo (solo las letras destacadas de los títulos) */
:root{--red:#e0202a}
h2 em,html[data-theme=light] h2 em,.break h2 em{color:var(--red)}
h2 em{text-shadow:0 0 28px rgba(224,32,42,.38)}
html[data-theme=light] h2 em{text-shadow:none}

/* caritas de marca (crema + rojo): en modo claro llevan contorno oscuro para no perderse sobre fondo claro */
html[data-theme=light] svg:has(> use[href^="#face-"]){filter:drop-shadow(1px 0 0 #0c0c0d) drop-shadow(-1px 0 0 #0c0c0d) drop-shadow(0 1px 0 #0c0c0d) drop-shadow(0 -1px 0 #0c0c0d)}
/* moods: botones más grandes, la carita cabe completa dentro y al activarse pasa a negro para no perderse */
.mood,.gmood{min-height:48px;padding:4px 20px 4px 10px;align-items:center;gap:8px}
.mood svg,.gmood svg{width:30px;height:40px;margin:0;flex:none;overflow:visible}
.mood.on svg,.gmood.on svg{filter:brightness(0)!important}
/* "Antes Inestable" en el rojo del logo */
.meta-top span:last-child,html[data-theme=light] .meta-top span:last-child{color:var(--red,#e0202a)}
/* caritas sobre fondos claros/fluor: en negro para que no se pierdan */
.chat-fab .cf-face,.mood-fab[data-m=meh] .fab-face{filter:brightness(0)!important}
/* menú superior: hover y sección activa en el rojo del logo */
.nav nav a:hover,.nav nav a.active,.nav nav a:not(.pill):hover,html[data-theme=light] .nav nav a.active,html[data-theme=light] .nav nav a:hover{color:var(--red,#e0202a)}
.nav .pill:hover,html[data-theme=light] .nav .pill:hover{background:var(--red,#e0202a);border-color:var(--red,#e0202a);color:#fff;box-shadow:0 10px 24px rgba(224,32,42,.35)}

/* ===== glitch del logo (reemplaza a las descargas eléctricas) ===== */
.hero-bolts,.logo-stack .volt-wrap{display:none!important}
.logo-stack.glitching .ls.pink,.logo-stack.glitching .ls.acid{display:block!important;opacity:.95;mix-blend-mode:normal}
.logo-stack.glitching .ls.pink{background:#ff2bb4!important}
.logo-stack.glitching .ls.acid{background:#00e5ff!important}
.logo-stack.glitching img.main{animation:glMain .62s steps(1,end) both}
.logo-stack.glitching .ls.pink{animation:glPink .62s steps(1,end) both}
.logo-stack.glitching .ls.acid{animation:glCyan .62s steps(1,end) both}
.logo-stack.glitching[data-gl="2"] img.main{animation-name:glMain2}
.logo-stack.glitching[data-gl="2"] .ls.pink{animation-name:glPink2}
.logo-stack.glitching[data-gl="2"] .ls.acid{animation-name:glCyan2}
.logo-stack.glitching[data-gl="3"] img.main{animation-name:glMain3}
.logo-stack.glitching[data-gl="3"] .ls.pink{animation-name:glPink3}
.logo-stack.glitching[data-gl="3"] .ls.acid{animation-name:glCyan3}
@keyframes glMain{
  0%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  8%{transform:translate(-3.5%,0) skewX(-5deg);clip-path:inset(8% 0 70% 0)}
  16%{transform:translate(4%,0);clip-path:inset(46% 0 30% 0)}
  24%{transform:translate(-2%,0) skewX(3deg);clip-path:inset(0 0 0 0)}
  34%{transform:translate(3%,-1%);clip-path:inset(62% 0 12% 0)}
  44%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  58%{transform:translate(-5%,0) skewX(-7deg);clip-path:inset(22% 0 52% 0)}
  68%{transform:translate(2%,0);clip-path:inset(0 0 0 0)}
  80%{transform:translate(-1.5%,1%);clip-path:inset(78% 0 4% 0)}
  100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}}
@keyframes glPink{0%{transform:translate(0,0);clip-path:inset(0 0 0 0)}8%{transform:translate(5%,0);clip-path:inset(8% 0 70% 0)}16%{transform:translate(-6%,0);clip-path:inset(46% 0 30% 0)}24%{transform:translate(4%,0);clip-path:inset(0 0 0 0)}34%{transform:translate(-4%,0);clip-path:inset(62% 0 12% 0)}44%{transform:translate(2%,0);clip-path:inset(0 0 0 0)}58%{transform:translate(7%,0);clip-path:inset(22% 0 52% 0)}68%{transform:translate(-3%,0);clip-path:inset(0 0 0 0)}80%{transform:translate(4%,0);clip-path:inset(78% 0 4% 0)}100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}}
@keyframes glCyan{0%{transform:translate(0,0);clip-path:inset(0 0 0 0)}8%{transform:translate(-6%,1%);clip-path:inset(8% 0 70% 0)}16%{transform:translate(6%,-1%);clip-path:inset(46% 0 30% 0)}24%{transform:translate(-4%,0);clip-path:inset(0 0 0 0)}34%{transform:translate(5%,1%);clip-path:inset(62% 0 12% 0)}44%{transform:translate(-2%,0);clip-path:inset(0 0 0 0)}58%{transform:translate(-8%,0);clip-path:inset(22% 0 52% 0)}68%{transform:translate(3%,0);clip-path:inset(0 0 0 0)}80%{transform:translate(-5%,0);clip-path:inset(78% 0 4% 0)}100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}}
@keyframes glMain2{
  0%{transform:none;clip-path:inset(0 0 0 0)}
  12%{transform:translate(6%,0);clip-path:inset(0 0 55% 0)}
  22%{transform:translate(-6%,0);clip-path:inset(45% 0 0 0)}
  32%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  48%{transform:scale(1.04,.96) translate(0,2%);clip-path:inset(0 0 0 0)}
  60%{transform:translate(-3%,0) skewX(6deg);clip-path:inset(35% 0 35% 0)}
  74%{transform:translate(3%,0);clip-path:inset(0 0 0 0)}
  100%{transform:none;clip-path:inset(0 0 0 0)}}
@keyframes glPink2{0%{transform:none}12%{transform:translate(-7%,0)}22%{transform:translate(7%,0)}32%{transform:translate(3%,0)}48%{transform:translate(-4%,2%)}60%{transform:translate(6%,0)}74%{transform:translate(-3%,0)}100%{transform:none}}
@keyframes glCyan2{0%{transform:none}12%{transform:translate(8%,0)}22%{transform:translate(-8%,0)}32%{transform:translate(-3%,0)}48%{transform:translate(5%,-2%)}60%{transform:translate(-7%,0)}74%{transform:translate(4%,0)}100%{transform:none}}
@keyframes glMain3{
  0%{transform:none;clip-path:inset(0 0 0 0)}
  10%{clip-path:inset(0 0 82% 0);transform:translate(-4%,0)}
  20%{clip-path:inset(18% 0 60% 0);transform:translate(5%,0)}
  30%{clip-path:inset(42% 0 38% 0);transform:translate(-3%,0)}
  40%{clip-path:inset(64% 0 16% 0);transform:translate(4%,0)}
  50%{clip-path:inset(84% 0 0 0);transform:translate(-5%,0)}
  62%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
  76%{clip-path:inset(30% 0 50% 0);transform:translate(3%,0) skewX(-4deg)}
  100%{transform:none;clip-path:inset(0 0 0 0)}}
@keyframes glPink3{0%{transform:none}10%{transform:translate(6%,0)}20%{transform:translate(-5%,0)}30%{transform:translate(4%,0)}40%{transform:translate(-6%,0)}50%{transform:translate(5%,0)}62%{transform:translate(2%,0)}76%{transform:translate(-4%,0)}100%{transform:none}}
@keyframes glCyan3{0%{transform:none}10%{transform:translate(-6%,1%)}20%{transform:translate(7%,-1%)}30%{transform:translate(-4%,0)}40%{transform:translate(6%,1%)}50%{transform:translate(-7%,0)}62%{transform:translate(-2%,0)}76%{transform:translate(5%,0)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.logo-stack.glitching *{animation:none!important}}
/* botón de subir en su estado "triste": el fondo es crema (modo oscuro) → carita negra */
html[data-theme=dark] .mood-fab[data-m=sad] .fab-face{filter:brightness(0)!important}

/* divisor con las tres caritas: 30 % más grande */
.fd-faces{gap:18px;padding:0 28px}
.fd-faces svg{width:49px;height:49px}
@media(max-width:560px){.fd-faces svg{width:36px;height:36px}.fd-faces{gap:10px;padding:0 16px}}

/* ===== glitch también en el logo del menú ===== */
.nav .brand{position:relative;display:inline-block;line-height:0}
.nav .brand img{position:relative;z-index:1}
.nav .brand::before,.nav .brand::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  -webkit-mask:var(--brand-logo) center/contain no-repeat;mask:var(--brand-logo) center/contain no-repeat}
.nav .brand.glitching::before{background:#ff2bb4;opacity:.95;animation:glPink .62s steps(1,end) both}
.nav .brand.glitching::after{background:#00e5ff;opacity:.95;animation:glCyan .62s steps(1,end) both}
.nav .brand.glitching img{animation:glMain .62s steps(1,end) both}
.nav .brand.glitching[data-gl="2"]::before{animation-name:glPink2}
.nav .brand.glitching[data-gl="2"]::after{animation-name:glCyan2}
.nav .brand.glitching[data-gl="2"] img{animation-name:glMain2}
.nav .brand.glitching[data-gl="3"]::before{animation-name:glPink3}
.nav .brand.glitching[data-gl="3"]::after{animation-name:glCyan3}
.nav .brand.glitching[data-gl="3"] img{animation-name:glMain3}
@media(prefers-reduced-motion:reduce){.nav .brand.glitching::before,.nav .brand.glitching::after,.nav .brand.glitching img{animation:none!important}}
/* Banda con 3 integrantes: nunca queda uno solo en una fila */
@media(min-width:561px) and (max-width:960px){.members{grid-template-columns:repeat(3,1fr);max-width:none;gap:30px 14px}}
@media(min-width:421px) and (max-width:560px){.members{grid-template-columns:repeat(2,1fr)}.members .member:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}}


/* ===== MENÚ MÓVIL (hamburguesa): animación ===== */
.menu-foot{display:none}
@media(max-width:960px){
  /* el desenfoque del header encerraba al panel: se quita para que cubra toda la pantalla */
  .nav,.nav.solid,html[data-theme=light] .nav,html[data-theme=light] .nav.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,5,5,.97)}

  /* botón: 3 barras que se transforman en una X con rebote */
  .burger{width:44px;height:44px;border-radius:50%;transition:transform .7s cubic-bezier(.3,1.7,.5,1),background .3s;-webkit-tap-highlight-color:transparent}
  .burger span,.burger::before{position:absolute;left:11px;right:11px;height:2.5px;border-radius:3px;background:#f6f3ee;transition:transform .55s cubic-bezier(.3,1.7,.5,1),top .4s cubic-bezier(.3,1.4,.5,1),opacity .2s,background .3s,left .4s,right .4s}
  .burger::before{content:"";top:20px;left:17px}
  .burger span:first-child{top:13px}
  .burger span:last-child{top:27px;right:17px}
  .burger:hover span:last-child,.burger:active span:last-child{right:11px}
  .burger[aria-expanded=true]{transform:rotate(180deg);background:rgba(224,32,42,.18);box-shadow:0 0 0 1px rgba(224,32,42,.6),0 0 22px rgba(224,32,42,.45)}
  .burger[aria-expanded=true] span,.burger[aria-expanded=true]::before{background:#e0202a}
  .burger[aria-expanded=true] span:first-child{top:20px;left:11px;transform:rotate(45deg)}
  .burger[aria-expanded=true] span:last-child{top:20px;right:11px;transform:rotate(-45deg)}
  .burger[aria-expanded=true]::before{opacity:0;transform:scaleX(0)}

  /* panel: círculo rojo que se expande desde el botón y, apenas detrás, el panel negro (queda un anillo rojo en el borde) */
  .nav nav{--mx:calc(100% - 40px);--my:38px;--mt:1;
    background:#e0202a!important;opacity:1;visibility:hidden;pointer-events:none;overflow:hidden;
    justify-content:center;align-items:flex-start;padding:90px 9vw 40px;gap:4px;
    clip-path:circle(0px at var(--mx) var(--my));
    transition:clip-path calc(.55s*var(--mt)) cubic-bezier(.77,0,.18,1),visibility 0s calc(.6s*var(--mt))}
  .nav nav::before{content:"";position:absolute;inset:0;z-index:0;background:#050505;pointer-events:none;
    background-image:radial-gradient(circle at 1px 1px,rgba(246,243,238,.08) 1px,transparent 1.4px);background-size:6px 6px;
    clip-path:circle(0px at var(--mx) var(--my));
    transition:clip-path calc(.6s*var(--mt)) cubic-bezier(.77,0,.18,1) calc(.07s*var(--mt))}
  .nav nav.open{visibility:visible;pointer-events:auto;clip-path:circle(160vmax at var(--mx) var(--my));
    transition:clip-path calc(.85s*var(--mt)) cubic-bezier(.77,0,.18,1),visibility 0s}
  .nav nav.open::before{clip-path:circle(160vmax at var(--mx) var(--my));transition:clip-path calc(.9s*var(--mt)) cubic-bezier(.77,0,.18,1) calc(.1s*var(--mt))}

  /* enlaces: entran uno a uno con corte glitch */
  .nav nav a{position:relative;z-index:1;width:100%;font-size:clamp(2.5rem,13vw,4.2rem);line-height:1.02;letter-spacing:.02em;padding:6px 0;color:#f6f3ee;opacity:0!important;
    transform:translate3d(0,54px,0) skewY(8deg);filter:blur(7px);transition:transform calc(.35s*var(--mt)) ease,opacity calc(.25s*var(--mt)),filter calc(.35s*var(--mt)),color .2s}
  .nav nav.open a{opacity:1!important;transform:none;filter:none;animation:mnGlitch calc(.55s*var(--mt)) steps(2,end) both;
    transition:transform calc(.65s*var(--mt)) cubic-bezier(.2,.9,.2,1),opacity calc(.4s*var(--mt)),filter calc(.5s*var(--mt)),color .2s}
  .nav nav.open a:nth-child(1){transition-delay:calc(.34s*var(--mt));animation-delay:calc(.34s*var(--mt))}
  .nav nav.open a:nth-child(2){transition-delay:calc(.40s*var(--mt));animation-delay:calc(.40s*var(--mt))}
  .nav nav.open a:nth-child(3){transition-delay:calc(.46s*var(--mt));animation-delay:calc(.46s*var(--mt))}
  .nav nav.open a:nth-child(4){transition-delay:calc(.52s*var(--mt));animation-delay:calc(.52s*var(--mt))}
  .nav nav.open a:nth-child(5){transition-delay:calc(.58s*var(--mt));animation-delay:calc(.58s*var(--mt))}
  .nav nav.open a:nth-child(6){transition-delay:calc(.64s*var(--mt));animation-delay:calc(.64s*var(--mt))}
  .nav nav.open a:nth-child(7){transition-delay:calc(.72s*var(--mt));animation-delay:calc(.72s*var(--mt))}
  .nav nav a::before{content:counter(mn,decimal-leading-zero);counter-increment:mn;position:absolute;right:0;top:50%;transform:translateY(-50%);font:700 .72rem/1 var(--sans);letter-spacing:.2em;color:#e0202a;opacity:.9}
  .nav nav{counter-reset:mn}
  .nav nav a:active,.nav nav a:hover,.nav nav a.active{color:#e0202a!important}
  .nav nav a.pill{width:auto;margin-top:14px;border:2px solid #e0202a;color:#fff;padding:8px 30px;border-radius:99px;font-size:1.7rem}
  .nav nav a.pill::before{display:none}
  .nav nav a.pill:active{background:#e0202a;color:#fff!important}

  /* pie del menú: caritas que rebotan + "antes Inestable" */
  .nav nav .menu-foot{display:flex;position:absolute;left:9vw;right:9vw;bottom:calc(28px + env(safe-area-inset-bottom));z-index:1;align-items:center;justify-content:space-between;gap:14px;
    opacity:0;transform:translateY(24px);transition:opacity calc(.4s*var(--mt)),transform calc(.5s*var(--mt)) cubic-bezier(.2,.9,.2,1)}
  .nav nav.open .menu-foot{opacity:1;transform:none;transition-delay:calc(.8s*var(--mt))}
  .menu-foot .mf-faces{display:flex;gap:10px}
  .menu-foot .mf-faces svg{width:40px;height:40px;animation:mnBob 2.4s ease-in-out infinite}
  .menu-foot .mf-faces svg:nth-child(2){animation-delay:.25s}.menu-foot .mf-faces svg:nth-child(3){animation-delay:.5s}
  .menu-foot em{font:700 .66rem/1.3 var(--sans);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,243,238,.55);text-align:right}
}
@keyframes mnGlitch{0%{text-shadow:7px 0 #ff2bb4,-7px 0 #00e5ff;clip-path:inset(0 0 55% 0)}50%{text-shadow:-5px 0 #ff2bb4,5px 0 #00e5ff;clip-path:inset(40% 0 0 0)}100%{text-shadow:none;clip-path:inset(0 0 0 0)}}
@keyframes mnBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.nav nav,.nav nav::before,.nav nav a,.menu-foot,.burger,.burger span,.burger::before{transition-duration:.01s!important;animation:none!important}}

/* ===== Música: bloque "Lo nuevo" con reproductor de Bandcamp ===== */
.nasty-release{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:34px;align-items:center;margin:8px 0 54px;padding:26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(224,32,42,.14),rgba(224,32,42,0) 55%),#0b0b0c;color:#f6f3ee;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.nr-kicker{margin:0 0 10px;font:800 .68rem/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#e0202a}
.nr-title{margin:0 0 12px;font:400 clamp(2.4rem,6vw,4rem)/.95 var(--display);letter-spacing:.02em;text-transform:uppercase}
.nr-sub{margin:0 0 22px;color:rgba(246,243,238,.72);font-size:.98rem;line-height:1.6;max-width:34ch}
.nasty-release .btn{background:#e0202a;border-color:#e0202a;color:#fff}
.nasty-release .btn:hover{background:#f6f3ee;border-color:#f6f3ee;color:#0b0b0c;box-shadow:none}
.nr-player{min-width:0;border-radius:10px;overflow:hidden;background:#0b0b0c}
.nr-player iframe{display:block;width:100%;min-height:472px}
@media(max-width:860px){.nasty-release{grid-template-columns:1fr;gap:22px;padding:20px}.nr-sub{max-width:none}}
html[data-theme=light] .nasty-release{box-shadow:0 18px 44px rgba(12,12,13,.22)}
html[data-theme=light] .nasty-release .btn{background:#e0202a;border-color:#e0202a;color:#fff}
html[data-theme=light] .nasty-release .btn:hover{background:#f6f3ee;border-color:#f6f3ee;color:#0b0b0c;box-shadow:none}

/* título previo al bloque de Bandcamp */
.nasty-title{margin:0 0 34px}
.nasty-title .nt-sub{display:block;margin-top:14px;font:600 clamp(1rem,2.2vw,1.5rem)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-shadow:none}
@media(max-width:560px){.nasty-title{margin-bottom:26px}.nasty-title .nt-sub{letter-spacing:.1em}}
.nasty-title em{white-space:nowrap}

/* puerta en pantallas de poca altura: el contenido se centra si cabe y, si no, arranca desde arriba y se puede recorrer (antes se cortaba el logo) */
html.locked .gate{align-items:start;justify-items:center}
.gate .gate-in{margin-block:auto}

/* puerta: con el logo 30 % más grande, el resto se compacta un poco en pantallas de poca altura */
@media(max-height:900px){.gate .tnt{width:min(340px,76vw)}.gate .gate-copy{margin:.8rem 0 .9rem}.gate .gate-moods{margin-top:1rem}.gate .logo-stack{margin-bottom:1.6vh}}
/* puerta: sin desborde lateral por las grietas decorativas, y un poco más compacta bajo el logo */
.gate{overflow-x:hidden}
@media(max-height:900px){.gate .tnt{width:min(290px,70vw)}.gate .gate-msg{min-height:0;margin-top:8px}.gate .cd-u{padding-top:8px;padding-bottom:6px}}

/* Nastyboy, el personaje, asomando en el pie de página */
.foot-in{position:relative}
.nastyboy{position:absolute;right:2%;bottom:-6px;width:clamp(120px,15vw,210px);height:auto;z-index:1;pointer-events:none;transform:rotate(4deg);filter:drop-shadow(0 10px 0 rgba(0,0,0,.45));transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.foot:hover .nastyboy{transform:rotate(-2deg) translateY(-8px)}
@media(max-width:900px){.nastyboy{position:relative;right:auto;bottom:auto;display:block;margin:34px auto 0;width:150px;transform:none}.foot:hover .nastyboy{transform:none}}
.nastyboy{bottom:96px;right:5%}
@media(min-width:901px){.nastyboy{right:0;width:clamp(110px,11vw,170px);bottom:78px}}
@media(min-width:901px) and (max-width:1300px){.nastyboy{width:104px;right:-2%;bottom:70px}}

/* Nastyboy en "En vivo": a la derecha del título, apoyado sobre las tarjetas de fechas */
#envivo .sec-head{position:relative}
.nastyboy-live{position:absolute;right:1%;bottom:-70px;width:clamp(120px,15vw,200px);height:auto;z-index:3;pointer-events:none;transform:rotate(5deg);filter:drop-shadow(0 12px 0 rgba(0,0,0,.5));animation:nbSway 4.5s ease-in-out infinite}
@keyframes nbSway{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-8px)}}
@media(max-width:900px){.nastyboy-live{position:relative;right:auto;bottom:auto;display:block;width:120px;margin:18px 0 0 auto}}
@media(prefers-reduced-motion:reduce){.nastyboy-live{animation:none}}
@media(min-width:901px){.nastyboy-live{width:clamp(96px,10.5vw,150px);right:2%;bottom:-96px}}

/* En vivo: Nastyboy gigante de fondo (reemplaza la foto anterior) */
.envivo .bgimg.nb-bg{background-image:url(assets/brand/nastyboy.webp);background-repeat:no-repeat;background-size:auto 104%;background-position:right 7% center;opacity:.62;filter:none}
.envivo .bgimg.nb-bg::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(13,13,14,.78) 38%,rgba(13,13,14,.18) 72%,rgba(13,13,14,0) 100%),linear-gradient(180deg,var(--ink),rgba(13,13,14,0) 22%,rgba(13,13,14,0) 78%,var(--ink))}
html[data-theme=light] .envivo .bgimg.nb-bg{opacity:.5}
@media(max-width:900px){.envivo .bgimg.nb-bg{background-size:auto 72%;background-position:right -8% bottom 8%;opacity:.4}.envivo .bgimg.nb-bg::after{background:linear-gradient(180deg,var(--ink),rgba(13,13,14,.55) 40%,var(--ink))}}
@media(max-width:900px){.envivo .bgimg.nb-bg{background-size:auto 82%;background-position:right -4% center;opacity:.6}.envivo .bgimg.nb-bg::after{background:linear-gradient(180deg,var(--ink),rgba(13,13,14,.15) 18%,rgba(13,13,14,.15) 82%,var(--ink))}}

/* Contacto: Nastyboy alegre de fondo, grande, a la izquierda y espejado respecto de "En vivo" */
.contacto{isolation:isolate}
.nb-contacto{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nb-contacto::before{content:"";position:absolute;inset:-2% 0 -2% 0;background:url(assets/brand/nastyboy.webp) no-repeat left 5% center/auto 98%;opacity:.5;transform:scaleX(-1);transform-origin:center}
.nb-contacto::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#050505 0%,rgba(5,5,5,.8) 40%,rgba(5,5,5,.15) 78%,rgba(5,5,5,0) 100%),linear-gradient(180deg,#050505,rgba(5,5,5,0) 20%,rgba(5,5,5,0) 80%,#050505)}
.contacto .wrap{position:relative;z-index:2}
html[data-theme=light] .nb-contacto::before{opacity:.4}
@media(max-width:900px){.nb-contacto::before{background-size:auto 70%;background-position:left -10% bottom 4%;opacity:.38;transform:scaleX(-1)}.nb-contacto::after{background:linear-gradient(180deg,#050505,rgba(5,5,5,.2) 18%,rgba(5,5,5,.3) 82%,#050505)}}

/* Galería: Nastyboy triste de fondo, grande, detrás de los álbumes */
.galeria{isolation:isolate}
.nb-galeria{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nb-galeria::before{content:"";position:absolute;inset:0;background:url(assets/brand/nastyboy-triste.svg) no-repeat right 4% bottom 0/auto 96%;opacity:.5}
.nb-galeria::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.72) 40%,rgba(8,8,8,.1) 80%,rgba(8,8,8,0) 100%),linear-gradient(180deg,#080808,rgba(8,8,8,0) 18%,rgba(8,8,8,0) 82%,#080808)}
.galeria .wrap{position:relative;z-index:2}
html[data-theme=light] .nb-galeria::before{opacity:.4}
@media(max-width:900px){.nb-galeria::before{background-size:auto 66%;background-position:right -12% bottom 3%;opacity:.38}.nb-galeria::after{background:linear-gradient(180deg,#080808,rgba(8,8,8,.2) 18%,rgba(8,8,8,.3) 82%,#080808)}}
.nb-galeria::before{opacity:.62}
@media(max-width:900px){.nb-galeria::before{background-size:auto 34%;background-position:right 2% top 70px;opacity:.55}}

/* Pie: Nastyboy (corazón) de fondo, sobre las capas de color y textura del pie, bajo el contenido */
.nastyboy{display:none!important}
.foot .nb-foot{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.foot .nb-foot::before{content:"";position:absolute;inset:0;background:url(assets/brand/nastyboy-corazon.webp) no-repeat right 8% bottom -2%/auto 112%;opacity:.46}
.foot .nb-foot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,3,.9) 0%,rgba(3,4,3,.45) 40%,rgba(3,4,3,0) 75%),linear-gradient(180deg,#030403,rgba(3,4,3,0) 22%)}
.foot .foot-in{position:relative;z-index:2}
@media(max-width:900px){.foot .nb-foot::before{background-size:auto 70%;background-position:right -10% bottom 0;opacity:.34}.foot .nb-foot::after{background:linear-gradient(180deg,#030403,rgba(3,4,3,.25) 25%,rgba(3,4,3,.3))}}