/* ═══════════════════════════════════════════════
   DZ7 CLUB — Da Rua Pro Mundo
   Identidade: Manual de Marca DZ7 © 2026
   ═══════════════════════════════════════════════ */

:root{
  --preto:#000000;
  --branco:#ffffff;
  --c42:#424242;
  --c64:#646464;
  --c7e:#7e7e7e;
  --azul:#190ec0;
  --azul2:#3512ad;
  --roxo:#5314c8;
  --rosa:#fd4def;
  /* --verde guarda o tint roxo por herança da v1 (a marca virou
     roxa); --tint é o nome certo — use este em código novo. */
  --verde:#8a5cff;
  --tint:#8a5cff;
  --lima:#8ffe09;
  --vermelho:#9e0015;
  --laranja:#c75000;
  --bg:#050505;
  --panel:#0d0d0d;
  --linha:#1c1c1c;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
  /* No PWA em tela cheia o conteúdo desenha POR BAIXO da barra de status
     (é o que 'black-translucent' pede, e é o visual que a gente quer: o
     header borrado sobe até o topo do aparelho). Mas aí o conteúdo dele
     tem que descer o tanto da barra. Embutir na --nav-h faz todo mundo
     que reserva espaço no topo herdar a correção — mesmo padrão do
     --bnav-h logo abaixo. */
  --nav-alt:64px;   /* altura útil, onde a logo e os botões moram */
  --nav-h:calc(var(--nav-alt) + env(safe-area-inset-top, 0px));
  --bnav-h:calc(62px + env(safe-area-inset-bottom));
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--branco);
  font-family:var(--body);
  font-weight:300;
  overflow-x:hidden;
  line-height:1.6;
}
body::after{ /* grain sutil */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
::selection{background:var(--roxo);color:var(--branco)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--preto)}
::-webkit-scrollbar-thumb{background:var(--c42)}
::-webkit-scrollbar-thumb:hover{background:var(--verde)}

/* display de autor vence o [hidden] do user-agent — sem esta linha,
   qualquer classe com display:flex torna o atributo hidden inoperante
   (foi exatamente o bug do seletor de playlists e do painel de comentários) */
[hidden]{display:none !important}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ── tipografia display ── */
h1,h2,h3,.btn,.filter{font-family:var(--display);font-stretch:125%;text-transform:uppercase}
h1{font-weight:900;letter-spacing:-.01em;line-height:1.02}
h2{font-weight:800;line-height:1.05}
h3{font-weight:700}

.chrome{
  background:linear-gradient(100deg,#5a5a5a 0%,#fdfdfd 18%,#8a8a8a 32%,#ffffff 47%,#4c4c4c 62%,#e8e8e8 78%,#6e6e6e 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:chromeShift 5.2s linear infinite;
}
@keyframes chromeShift{to{background-position:220% 0}}

/* ═══ LOGO CROMADO ═══
   O PNG branco vira MÁSCARA e o gradiente cromado passa por baixo:
   mesmo efeito metálico animado dos títulos, sem depender de um PNG
   cromado estático (que perderia nitidez ao escalar e não animaria).
   Só em hero e preloader; na topbar o cromado some em 22px. */
.logo-cromo{
  display:block;
  aspect-ratio:1167/345;   /* proporção do SVG oficial */                 /* proporção real da arte oficial */
  background:linear-gradient(100deg,#5a5a5a 0%,#fdfdfd 18%,#8a8a8a 32%,#ffffff 47%,
                             #4c4c4c 62%,#e8e8e8 78%,#6e6e6e 100%);
  background-size:220% 100%;
  animation:chromeShift 5.2s linear infinite;
  -webkit-mask:url(/assets/dz7-logo.svg) center/contain no-repeat;
          mask:url(/assets/dz7-logo.svg) center/contain no-repeat;
}
/* sem suporte a mask, cai no PNG branco em vez de sumir */
@supports not ((-webkit-mask: url('')) or (mask: url(''))){
  .logo-cromo{background:url(/assets/dz7-logo.svg) center/contain no-repeat;animation:none}
}
@media (prefers-reduced-motion:reduce){ .logo-cromo{animation:none;background-position:47% 0} }
.verde{color:var(--verde)}

/* ═══ PRELOADER ═══ */
#preloader{
  position:fixed;inset:0;z-index:5000;background:var(--preto);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:transform .7s cubic-bezier(.83,0,.17,1);
}
#preloader.done{transform:translateY(-101%)}
.pre-logo,.brand-logo,.hero-logo,.foot-logo{filter:contrast(1.6) brightness(.94)}
.pre-logo{width:min(46vw,300px);mix-blend-mode:normal;animation:preLogo 1.6s cubic-bezier(.22,1,.36,1) both}
@keyframes preLogo{from{opacity:0;transform:scale(.82);filter:contrast(1.6) brightness(.94) blur(14px)}to{opacity:1;transform:scale(1);filter:contrast(1.6) brightness(.94) blur(0)}}
.pre-tag{font-family:var(--display);font-stretch:125%;font-weight:700;letter-spacing:.42em;font-size:.68rem;color:var(--c7e);animation:preLogo 1.2s .5s both}
.pre-bar{width:min(52vw,300px);height:2px;background:var(--c42);overflow:hidden}
.pre-bar span{display:block;height:100%;width:0;background:var(--verde);animation:preBar 1.5s .25s cubic-bezier(.65,0,.35,1) forwards}
@keyframes preBar{to{width:100%}}

/* ═══ TOP BAR ═══ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;gap:26px;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:0;
  /* deitado, o notch come a lateral: max() garante o respiro sem
     encolher a margem normal */
  padding-left:max(clamp(16px,4vw,44px), env(safe-area-inset-left, 0px));
  padding-right:max(clamp(16px,4vw,44px), env(safe-area-inset-right, 0px));
  background:rgba(0,0,0,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
/* flex:none porque a marca é o único item encolhível do header. Sem
   isso o flex a espreme quando a barra fica cheia e o "CLUB" vaza por
   cima da navegação — foi o que aconteceu ao somar COMUNIDADE ao menu e
   trocar o ícone da conta por um botão escrito. */
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand-logo{height:26px;width:auto;mix-blend-mode:normal}
.brand-club{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.72rem;letter-spacing:.3em;color:var(--verde);margin-top:2px}
.topnav{display:flex;gap:4px;margin-left:auto}
.topnav a{
  font-family:var(--display);font-stretch:125%;font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c7e);
  padding:9px 13px;position:relative;transition:color .25s;
}
.topnav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.topnav a:hover{color:var(--branco)}
.topnav a.active{color:var(--branco)}
.topnav a.active::after{transform:scaleX(1)}
.cart-btn{position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--c42);transition:border-color .25s,transform .15s}
.cart-btn:hover{border-color:var(--verde)}
.cart-btn:active{transform:scale(.92)}
.cart-btn svg{width:20px;height:20px}
.cart-count{
  position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;
  background:var(--roxo);color:var(--branco);font-family:var(--display);font-weight:800;
  font-size:.62rem;display:grid;place-items:center;
}

/* ═══ VIEWS ═══ */
#app{min-height:100vh}
.view{display:none}
.view.active{display:block;animation:viewIn .55s cubic-bezier(.22,1,.36,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.section{padding:clamp(56px,9vw,110px) clamp(18px,5vw,64px);max-width:1280px;margin:0 auto}
.sec-title{font-size:clamp(1.7rem,4.6vw,3.2rem);margin-bottom:14px}
.sec-lead{color:var(--c7e);max-width:640px;font-size:.98rem;margin-bottom:40px}

/* reveals */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ═══ HERO ═══ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:var(--nav-h)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.5);animation:heroZoom 16s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 45%,var(--bg) 96%)}
.hero-inner{position:relative;z-index:2;text-align:center;padding:0 20px;max-width:900px}
.hero-eyebrow{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:.68rem;letter-spacing:.5em;color:var(--verde);margin-bottom:26px}
.hero-logo{width:min(72vw,520px);margin:0 auto 8px;mix-blend-mode:normal}
.hero-tag{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(1.5rem,5.2vw,3.4rem);letter-spacing:.04em;display:flex;gap:.45em;justify-content:center;flex-wrap:wrap}
.hero-tag span{display:inline-block;animation:tagUp .8s cubic-bezier(.22,1,.36,1) both}
.hero-tag span:nth-child(1){animation-delay:.75s}
.hero-tag span:nth-child(2){animation-delay:.87s}
.hero-tag span:nth-child(3){animation-delay:.99s}
.hero-tag span:nth-child(4){animation-delay:1.11s}
.hero-tag em{font-style:normal;color:var(--verde)}
@keyframes tagUp{from{opacity:0;transform:translateY(.7em) skewX(-8deg)}to{opacity:1;transform:none}}
.hero-sub{color:#bdbdbd;max-width:520px;margin:20px auto 34px;font-size:.95rem}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--display);font-stretch:125%;font-size:.62rem;letter-spacing:.4em;color:var(--c7e);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.hero-scroll .seta{animation:seta 1.6s ease-in-out infinite;color:var(--verde);font-size:1rem}
@keyframes seta{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(8px);opacity:.4}}

/* ═══ BOTÕES ═══ */
.btn{
  display:inline-block;padding:15px 30px;font-size:.78rem;font-weight:800;letter-spacing:.16em;
  position:relative;overflow:hidden;transition:transform .15s,box-shadow .25s;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.btn:active{transform:scale(.96)}
/* .btn-verde é herança da v1 (a marca virou roxa). .btn-roxo é
   o nome correto — ambos apontam pro mesmo estilo. */
.btn-verde,.btn-roxo{background:var(--roxo);color:var(--branco)}
.btn-verde:hover,.btn-roxo:hover{box-shadow:0 0 34px rgba(138,92,255,.45)}
.btn-branco{background:var(--branco);color:var(--preto)}
.btn-branco:hover{box-shadow:0 0 30px rgba(255,255,255,.35)}
.btn-ghost{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 1px var(--c64)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--branco)}
.btn-full{width:100%;text-align:center}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .5s}
.btn:hover::before{left:150%}

/* ═══ TICKER ═══ */
.ticker{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);overflow:hidden;background:var(--preto);padding:15px 0}
.ticker-track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:ticker 30s linear infinite}
.ticker-track span{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.82rem;letter-spacing:.26em;color:var(--branco)}
.ticker-track b{color:var(--verde);font-weight:800}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ═══ STATS ═══ */
.stats-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--linha);padding:0;max-width:1280px;margin:0 auto;border:1px solid var(--linha)}
.stat{background:var(--bg);padding:44px 26px;text-align:center}
.stat strong{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.01em}
.stat span{font-size:.74rem;color:var(--c7e);letter-spacing:.06em;text-transform:uppercase}

/* ═══ ECOSSISTEMA ═══ */
.eco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.eco-card{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel);border:1px solid var(--linha);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.eco-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.72);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s}
.eco-card:hover img{transform:scale(1.07);filter:grayscale(.2) contrast(1.08) brightness(.85)}
.eco-info{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.92) 55%)}
.eco-info h3{font-size:1.02rem;letter-spacing:.06em}
.eco-info p{font-size:.76rem;color:#b5b5b5}
.eco-go{position:absolute;right:18px;bottom:18px;font-family:var(--display);font-weight:900;font-size:1.2rem;color:var(--verde);transform:translateX(-8px);opacity:0;transition:all .35s}
.eco-card:hover .eco-go{transform:none;opacity:1}

/* ═══ HOME DROP ═══ */
.home-drop-card{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--linha);background:var(--panel);overflow:hidden}
.hd-left{padding:clamp(28px,4.5vw,54px);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.hd-label{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.68rem;letter-spacing:.3em;color:var(--verde);display:flex;align-items:center;gap:9px}
.dot-live{width:8px;height:8px;background:var(--verde);border-radius:50%;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(138,92,255,.6)}55%{box-shadow:0 0 0 9px rgba(138,92,255,0)}}
.hd-left h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.hd-sub{color:var(--c7e);font-size:.9rem}
.hd-right{position:relative;min-height:280px}
.hd-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.65)}
.hd-right::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel),transparent 45%)}

.countdown{display:flex;gap:12px}
.countdown div{background:var(--preto);border:1px solid var(--linha);min-width:66px;padding:10px 8px;text-align:center}
.countdown strong{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.5rem;color:var(--branco);font-variant-numeric:tabular-nums}
.countdown span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c7e)}
.countdown-lg div{min-width:84px;padding:16px 10px}
.countdown-lg strong{font-size:2.2rem}

/* ═══ DIAG BAND / B2B HOME ═══ */
.diag-band{
  background:var(--branco);color:var(--preto);padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  clip-path:polygon(0 0,100% 4%,100% 100%,0 96%);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.diag-band h2{font-size:clamp(1.5rem,3.6vw,2.6rem)}
.diag-band .verde{color:var(--azul);-webkit-text-stroke:0}
.diag-band p{color:var(--c42);max-width:560px}

/* ═══ PAGE HEAD ═══ */
.page-head{position:relative;padding:calc(var(--nav-h) + clamp(52px,9vw,110px)) clamp(18px,5vw,64px) clamp(48px,7vw,84px);overflow:hidden}
.page-head-bg{position:absolute;inset:0;z-index:0}
.page-head-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.3)}
.page-head-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),var(--bg) 97%)}
.page-head>*:not(.page-head-bg){position:relative;z-index:1}
.page-head{text-align:center}
.ph-eyebrow{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.42em;color:var(--verde);margin-bottom:18px;text-transform:uppercase}
.page-head h1{font-size:clamp(2rem,6vw,4rem);margin-bottom:18px}
.ph-sub{color:#b9b9b9;max-width:600px;margin:0 auto;font-size:.95rem}

/* ═══ PLANOS ═══ */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;align-items:stretch}
.plan{
  background:var(--panel);border:1px solid var(--linha);padding:30px 24px;display:flex;flex-direction:column;gap:16px;
  position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.plan:hover{transform:translateY(-8px)}
.plan.destaque{border-color:var(--verde)}
.plan.destaque:hover{box-shadow:0 18px 60px -20px rgba(138,92,255,.35)}
.plan-flag{position:absolute;top:0;right:0;background:var(--roxo);color:var(--branco);font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.58rem;letter-spacing:.18em;padding:6px 12px}
.plan-flag.rosa{background:var(--rosa);color:var(--preto)}
.plan-name{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.3rem;letter-spacing:.04em}
.plan-desc{font-size:.78rem;color:var(--c7e);min-height:38px}
.plan-price{font-family:var(--display);font-stretch:125%}
.plan-price strong{font-size:2rem;font-weight:900}
.plan-price span{font-size:.72rem;color:var(--c7e)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1}
.plan li{font-size:.8rem;color:#cfcfcf;padding-left:20px;position:relative}
.plan li::before{content:"7";position:absolute;left:0;top:0;font-family:var(--display);font-stretch:125%;font-weight:900;font-style:italic;color:var(--verde);font-size:.78rem}
.plan .btn{margin-top:8px;text-align:center}
.plans-note{margin-top:26px;text-align:center;color:var(--c64);font-size:.78rem}

/* ═══ CORRE7 ═══ */
.corre-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:34px}
.corre-card{border:1px solid var(--linha);background:var(--panel);padding:26px 22px}
.corre-card strong{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:2rem;color:var(--verde);display:block}
.corre-card p{font-size:.8rem;color:#c9c9c9}
.corre-redeem h3{font-size:.9rem;letter-spacing:.2em;margin-bottom:14px;color:var(--c7e)}
.redeem-tags{display:flex;flex-wrap:wrap;gap:10px}
.redeem-tags span{border:1px solid var(--c42);padding:9px 16px;font-size:.76rem;letter-spacing:.06em;transition:all .25s}
.redeem-tags span:hover{border-color:var(--verde);color:var(--verde)}

/* ═══ FAQ ═══ */
.faq details{border:1px solid var(--linha);background:var(--panel);margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--verde);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--c7e);font-size:.85rem}

/* ═══ DROPS ═══ */
.drop-next{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:52px;text-align:center}
.tracks{display:flex;flex-direction:column;gap:12px}
.track{
  display:grid;grid-template-columns:auto 64px 1fr auto;gap:16px;align-items:center;
  border:1px solid var(--linha);background:var(--panel);padding:14px 18px;transition:border-color .3s,transform .3s;
}
.track:hover{border-color:var(--c42);transform:translateX(6px)}
.track.locked{opacity:.85}
.track-n{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.85rem;color:var(--c42);width:26px}
.track-cover{width:64px;height:64px;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.track-info h4{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.95rem;letter-spacing:.03em;text-transform:uppercase}
.track-info p{font-size:.72rem;color:var(--c7e);letter-spacing:.08em;text-transform:uppercase}
.track-tag{display:inline-block;font-size:.58rem;letter-spacing:.16em;padding:3px 8px;margin-top:5px;font-family:var(--display);font-weight:700}
.track-tag.t-verde{background:rgba(138,92,255,.12);color:var(--verde)}
.track-tag.t-rosa{background:rgba(253,77,239,.14);color:var(--rosa)}
.track-tag.t-roxo{background:rgba(131,84,255,.16);color:#b18cff}
.track-play{
  width:52px;height:52px;border:1px solid var(--c42);display:grid;place-items:center;transition:all .25s;position:relative;
}
.track-play:hover{border-color:var(--verde);color:var(--verde)}
.track-play svg{width:18px;height:18px;fill:currentColor}
.track.playing .track-play{background:var(--roxo);border-color:var(--roxo);color:var(--branco)}
/* equalizer */
.eq{display:none;align-items:flex-end;gap:3px;height:20px}
.eq i{width:3px;background:var(--branco);animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:5px}50%{height:19px}}
.track.playing .eq{display:flex}
.track.playing .icon-play{display:none}
.track-lock{color:var(--c64);display:flex;align-items:center;gap:8px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.track-lock svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
/* progresso da faixa */
.track-progress{grid-column:1/-1;height:3px;background:var(--linha);display:none;overflow:hidden}
.track.playing .track-progress{display:block}
.track-progress span{display:block;height:100%;width:0;background:var(--verde);transition:width .3s linear}

/* ═══ SHOP ═══ */
.shop-filters{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.filter{border:1px solid var(--c42);padding:11px 22px;font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--c7e);transition:all .25s}
.filter:hover{color:var(--branco);border-color:var(--branco)}
.filter.active{background:var(--branco);color:var(--preto);border-color:var(--branco)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.product{
  background:var(--panel);border:1px solid var(--linha);overflow:hidden;position:relative;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s;transform-style:preserve-3d;
}
.product:hover{border-color:var(--c42)}
.product-img{aspect-ratio:1;overflow:hidden;position:relative;background:#101010}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.product:hover .product-img img{transform:scale(1.06)}
.product-badge{position:absolute;top:12px;left:12px;background:var(--roxo);color:var(--branco);font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.58rem;letter-spacing:.14em;padding:5px 10px;z-index:2}
.product-badge.rosa{background:var(--rosa);color:var(--preto)}
.product-badge.roxo{background:var(--azul);color:var(--branco)}
.product-info{padding:18px}
.product-info h4{font-size:.9rem;letter-spacing:.05em;margin-bottom:4px}
.product-cat{font-size:.64rem;letter-spacing:.2em;color:var(--c64);text-transform:uppercase}
.product-line{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.product-price{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.1rem}
.product-price small{display:block;font-size:.62rem;color:var(--verde);font-weight:600;letter-spacing:.06em}
.add-btn{border:1px solid var(--c42);width:42px;height:42px;display:grid;place-items:center;font-size:1.2rem;font-family:var(--display);font-weight:700;transition:all .2s}
.add-btn:hover{background:var(--roxo);border-color:var(--roxo);color:var(--branco)}
.add-btn:active{transform:scale(.9)}
.shop-socio{margin-top:56px;border:1px solid var(--verde);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:linear-gradient(120deg,rgba(138,92,255,.06),transparent 60%)}
.shop-socio h3{font-size:1.4rem}
.shop-socio em{font-style:normal;color:var(--verde)}
.shop-socio p{color:var(--c7e);font-size:.86rem}

/* ═══ ESTÚDIO ═══ */
.spaces{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.space{border:1px solid var(--linha);background:var(--panel);padding:26px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .3s}
.space:hover{border-color:var(--c42);transform:translateY(-6px)}
.space h3{font-size:1rem;letter-spacing:.05em}
.space p{font-size:.8rem;color:var(--c7e);flex:1}
.space-price{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.3rem;color:var(--verde)}
.space-price span{font-size:.68rem;color:var(--c7e);font-weight:400}
/* serviços selecionáveis: o cartão inteiro é o alvo do clique */
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:12px}
.service{border:1px solid var(--linha);padding:18px;display:flex;align-items:center;gap:14px;
  background:var(--panel);cursor:pointer;transition:border-color .25s,background .25s,transform .2s;position:relative}
.service:hover{border-color:var(--c42);transform:translateY(-3px)}
.service-check{position:absolute;opacity:0;pointer-events:none}
.service-marca{width:22px;height:22px;flex-shrink:0;border:1px solid var(--c42);position:relative;transition:all .2s}
.service-marca::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  font-size:.8rem;color:#fff;opacity:0;transform:scale(.5);transition:all .2s}
.service-check:checked ~ .service-marca{background:var(--roxo);border-color:var(--roxo)}
.service-check:checked ~ .service-marca::after{opacity:1;transform:none}
.service:has(.service-check:checked){border-color:var(--roxo);background:linear-gradient(120deg,rgba(83,20,200,.12),var(--panel) 65%)}
.service-check:focus-visible ~ .service-marca{outline:2px solid var(--tint);outline-offset:2px}
.service-info{flex:1;min-width:0}
.service h4{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.service p{font-size:.7rem;color:var(--c64);margin-top:2px}
.service-preco{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.86rem;
  color:var(--tint);text-align:right;flex-shrink:0;max-width:38%;line-height:1.2}
.service-preco span{display:block;font-size:.58rem;color:var(--c64);font-weight:400;letter-spacing:.04em}

/* resumo dos serviços dentro do formulário de reserva */
.bk-servicos{border:1px solid var(--linha);background:var(--preto);padding:14px 16px;margin-bottom:16px}
.bk-servicos-rot{font-family:var(--display);font-stretch:125%;font-weight:600;font-size:.62rem;
  letter-spacing:.22em;color:var(--c7e);display:flex;align-items:center;gap:8px}
.bk-servicos-rot b{background:var(--roxo);color:#fff;font-size:.58rem;padding:1px 7px;font-weight:800}
.bk-servicos-rot b:empty{display:none}
#bkServicos{font-size:.8rem;color:#c9c9c9;margin:8px 0 6px;line-height:1.5}
#bkServicos.vazio{color:var(--c64);font-style:italic}
.bk-escolher{font-size:.7rem;color:var(--tint);text-decoration:underline;text-underline-offset:3px}

/* booking */
.booking-card{max-width:560px;margin:0 auto;border:1px solid var(--linha);background:var(--panel);padding:clamp(28px,5vw,46px)}
.booking-card h2{font-size:1.6rem;margin-bottom:6px}
.bk-sub{color:var(--c7e);font-size:.84rem;margin-bottom:26px}
form label{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;font-family:var(--display);font-stretch:125%;font-weight:600;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c7e)}
form input,form select{
  background:var(--preto);border:1px solid var(--c42);color:var(--branco);
  padding:14px;font-family:var(--body);font-size:.9rem;outline:none;transition:border-color .25s;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a5cff' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
form input:focus,form select:focus{border-color:var(--verde)}
form input::placeholder{color:var(--c42)}

/* ═══ MARCAS ═══ */
.b2b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.b2b-card{border:1px solid var(--linha);background:var(--panel);padding:28px;position:relative;transition:all .3s}
.b2b-card:hover{border-color:var(--c42);transform:translateY(-5px)}
.b2b-n{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.8rem;color:var(--verde);letter-spacing:.1em}
.b2b-card h3{font-size:1rem;letter-spacing:.05em;margin:10px 0 8px}
.b2b-card p{font-size:.8rem;color:var(--c7e)}
.valid-band{display:flex;flex-wrap:wrap;gap:12px 34px;padding:34px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);justify-content:center}
.valid-band span{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.9rem;letter-spacing:.12em;color:var(--c64);transition:color .3s}
.valid-band span:hover{color:var(--branco)}
.b2b-anchor{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;margin-top:44px;border:1px solid var(--linha);background:var(--panel);padding:26px}
.b2b-anchor img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.b2b-anchor h3{font-size:1.5rem;margin-bottom:8px}
.b2b-anchor p{color:#c2c2c2;font-size:.88rem}

/* ═══ INSTITUTO ═══ */
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:44px}
.inst-card{border:1px solid var(--linha);background:var(--panel);overflow:hidden}
.inst-card img{aspect-ratio:16/10;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.08) brightness(.8)}
.inst-card h3{font-size:.95rem;letter-spacing:.05em;padding:18px 20px 6px}
.inst-card p{font-size:.8rem;color:var(--c7e);padding:0 20px 22px}
.inst-cta{border:1px solid var(--verde);padding:clamp(28px,4.5vw,48px);display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:linear-gradient(120deg,rgba(138,92,255,.06),transparent 60%)}
.inst-num strong{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--verde);display:block}
.inst-num span{font-size:.78rem;color:var(--c7e);text-transform:uppercase;letter-spacing:.08em}
.inst-cta p{color:#c2c2c2;font-size:.88rem;max-width:620px}

/* ═══ FOOTER ═══ */
.footer{border-top:1px solid var(--linha);background:var(--preto);padding:clamp(44px,7vw,80px) clamp(18px,5vw,64px) calc(30px + var(--bnav-h));max-width:100%;}
.foot-manifesto{max-width:1280px;margin:0 auto 44px;display:flex;flex-direction:column;gap:18px}
.foot-logo{width:150px;mix-blend-mode:normal}
.foot-manifesto p{color:var(--c7e);max-width:520px;font-size:.9rem}
.foot-links{max-width:1280px;margin:0 auto 44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px}
.foot-links h4{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.3em;color:var(--c64);margin-bottom:14px}
.foot-links a,.foot-links span{display:block;font-size:.84rem;color:#bdbdbd;padding:4px 0;transition:color .25s}
.foot-links a:hover{color:var(--verde)}
.foot-legal{max-width:1280px;margin:0 auto 18px;display:flex;gap:22px;flex-wrap:wrap}
.foot-legal a{font-size:.76rem;color:var(--c64);text-decoration:underline;text-underline-offset:3px;transition:color .25s}
.foot-legal a:hover{color:var(--tint)}
.foot-base{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--linha);padding-top:22px;font-size:.7rem;letter-spacing:.14em;color:var(--c64);text-transform:uppercase;font-family:var(--display);font-stretch:125%}
.foot-base em{font-style:normal}

/* ═══ BOTTOM NAV ═══ */
.bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:900;height:var(--bnav-h);
  display:none;grid-template-columns:repeat(6,1fr);
  background:rgba(0,0,0,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--linha);padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--c64);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-family:var(--display);font-stretch:125%;font-weight:600;transition:color .25s;position:relative}
.bottomnav a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.bottomnav a.active{color:var(--branco)}
.bottomnav a.active::before{content:"";position:absolute;top:0;left:28%;right:28%;height:2px;background:var(--verde)}
.nav-7{
  font-family:var(--display);font-stretch:125%;font-weight:900;font-style:italic;font-size:1.25rem;line-height:1;
  color:var(--branco);background:var(--roxo);width:34px;height:34px;display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.bottomnav a.nav-club.active .nav-7{box-shadow:0 0 18px rgba(138,92,255,.55)}

/* ═══ CART DRAWER ═══ */
.drawer-overlay,.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);z-index:1500;opacity:0;pointer-events:none;transition:opacity .35s}
.drawer-overlay.open,.modal-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:1600;background:var(--bg);
  border-left:1px solid var(--linha);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  transform:translateX(102%);transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.cart-drawer.open{transform:none}
.cd-head{display:flex;justify-content:space-between;align-items:center;padding:22px;border-bottom:1px solid var(--linha)}
.cd-head h3{font-size:1rem;letter-spacing:.2em}
.cd-head button{font-size:1.1rem;color:var(--c7e);width:36px;height:36px;border:1px solid var(--c42);transition:all .25s}
.cd-head button:hover{color:var(--branco);border-color:var(--branco)}
.cd-items{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.cd-empty{color:var(--c64);text-align:center;margin-top:60px;font-size:.85rem}
.cd-item{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;border:1px solid var(--linha);padding:10px;background:var(--panel)}
.cd-item img{width:58px;height:58px;object-fit:cover}
.cd-item h5{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase}
.cd-item .cd-price{font-size:.74rem;color:var(--verde);font-family:var(--display);font-weight:700}
.cd-qty{display:flex;align-items:center;gap:9px}
.cd-qty button{width:26px;height:26px;border:1px solid var(--c42);font-size:.85rem;display:grid;place-items:center;transition:all .2s}
.cd-qty button:hover{border-color:var(--verde);color:var(--verde)}
.cd-qty b{font-family:var(--display);font-size:.85rem;min-width:16px;text-align:center}
.cd-foot{border-top:1px solid var(--linha);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.cd-socio{display:flex;align-items:center;gap:10px;font-size:.74rem;color:var(--c7e);cursor:pointer;flex-direction:row;margin:0;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400}
.cd-socio input{accent-color:var(--verde);width:16px;height:16px}
.cd-socio b{color:var(--verde)}
.cd-total{display:flex;justify-content:space-between;align-items:center}
.cd-total span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c7e);font-family:var(--display)}
.cd-total strong{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.5rem}

/* ═══ MODAL ═══ */
.modal-overlay{display:grid;place-items:center;padding:20px}
.modal{width:min(440px,94vw);background:var(--bg);border:1px solid var(--c42);padding:34px;position:relative;transform:translateY(26px);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.modal-overlay.open .modal{transform:none}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid var(--c42);color:var(--c7e);transition:all .25s}
.modal-close:hover{color:var(--branco);border-color:var(--branco)}
.modal h3{font-size:1.6rem;margin-bottom:8px}
.modal-sub{font-size:.8rem;color:var(--c7e);margin-bottom:22px}
.modal-ok{display:none;color:var(--verde);font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.9rem;letter-spacing:.06em;text-align:center;padding:10px 0}
.modal-ok em{font-style:normal}
.modal.sent form{display:none}
.modal.sent .modal-ok{display:block}

/* ═══ TOAST ═══ */
.toast{
  position:fixed;bottom:calc(var(--bnav-h) + 16px);left:50%;transform:translate(-50%,20px);z-index:1700;
  background:var(--roxo);color:var(--branco);font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;opacity:0;pointer-events:none;
  transition:all .4s cubic-bezier(.22,1,.36,1);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ═══════════════════════════════════════════════
   ÁREA DO SÓCIO
   ═══════════════════════════════════════════════ */
.eu-secao{padding-top:calc(var(--nav-h) + 34px)}
.eu-vazio{text-align:center;max-width:560px;margin:60px auto;display:flex;flex-direction:column;gap:16px;align-items:center}
.eu-vazio h1{font-size:clamp(1.8rem,5vw,3rem)}
.eu-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.eu-topo h1{font-size:clamp(1.8rem,5vw,3rem)}
.eu-acoes{display:flex;gap:9px;flex-wrap:wrap}
.eu-acoes .btn{padding:11px 18px;font-size:.66rem}
.eu-bloco{border:1px solid var(--linha);background:var(--panel);padding:clamp(20px,3vw,30px);margin-bottom:16px}
.eu-titulo{font-size:1rem;letter-spacing:.14em;margin-bottom:18px}
.eu-nada{color:var(--c64);font-size:.84rem;padding:14px 0}
.eu-duplo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.roxo{color:var(--tint,#8a5cff)}

/* ─── esqueleto de carregamento ───
   Ocupa o mesmo lugar do painel para a tela não pular quando os dados
   chegam. Sem texto: não afirma nada enquanto a sessão não respondeu. */
.eu-esqueleto{display:flex;flex-direction:column;gap:16px}
.esq-topo{display:flex;flex-direction:column;gap:12px;margin-bottom:10px}
.esq-linha{display:flex;gap:16px;flex-wrap:wrap}
.esq-linha .esq-barra{flex:1 1 180px}
.esq-barra,.esq-cartao{
  background:linear-gradient(100deg,#141414 8%,#232323 26%,#141414 44%);
  background-size:280% 100%;animation:esqOnda 1.5s linear infinite;
}
.esq-cartao{height:190px;border:1px solid var(--linha)}
@keyframes esqOnda{to{background-position:-280% 0}}
@media (prefers-reduced-motion:reduce){
  .esq-barra,.esq-cartao{animation:none;background:#1a1a1a}
}

/* ─── vitrine do visitante ───
   Quem chega deslogado precisa entender o que ganha entrando, não achar
   uma tela vazia. Tudo aqui é convite; nada exige conta para ser lido. */
.eu-vitrine{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.vit-hero{max-width:660px;display:flex;flex-direction:column;gap:14px}
.vit-hero h1{font-size:clamp(1.9rem,5.4vw,3.2rem);line-height:1.02}
.vit-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.vit-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.vit-card{border:1px solid var(--linha);background:var(--panel);padding:22px 20px}
.vit-card h3{font-size:.78rem;letter-spacing:.2em;color:var(--tint);margin-bottom:9px}
.vit-card p{font-size:.86rem;color:var(--c64);line-height:1.6}
.vit-tit{font-size:.78rem;letter-spacing:.22em;color:var(--c64);margin-bottom:16px}
.vit-niveis{display:flex;gap:10px;flex-wrap:wrap}
.vit-nivel{
  display:flex;align-items:center;gap:9px;
  border:1px solid var(--linha);background:var(--panel);padding:12px 16px;flex:1 1 150px;
}
.vn-bola{width:9px;height:9px;border-radius:50%;flex:none}
.vit-nivel strong{font-family:var(--display);font-stretch:125%;font-size:.74rem;letter-spacing:.12em}
.vn-xp{margin-left:auto;font-size:.7rem;color:var(--c64);white-space:nowrap}
.vit-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}
.vit-missao{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid var(--linha);background:var(--panel);padding:14px 16px;font-size:.86rem;
}
.vm-pts{font-family:var(--display);font-stretch:125%;font-weight:700;color:var(--lima);font-size:.76rem}
.vit-fecho{
  border:1px solid var(--linha);background:var(--panel);
  padding:clamp(24px,3.4vw,36px);text-align:center;
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
.vit-fecho p{color:var(--c64);font-size:.9rem}
@media (max-width:920px){
  .vit-hero{text-align:center;align-items:center;margin:0 auto}
  .vit-cta{justify-content:center;width:100%}
  .vit-cta .btn{flex:1 1 100%}
}

/* ── carteirinha digital ── */
.carteirinha{
  border:1px solid var(--c42);background:linear-gradient(135deg,#101010,#050505 55%,#140a28);
  padding:clamp(20px,3vw,28px);margin-bottom:16px;position:relative;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.carteirinha::before{
  content:"";position:absolute;top:-40%;right:-10%;width:60%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(138,92,255,.16),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.card-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;position:relative}
.card-marca{font-family:var(--display);font-stretch:125%;font-weight:900;letter-spacing:.3em;font-size:.68rem}
.card-nivel{font-family:var(--display);font-stretch:125%;font-weight:800;letter-spacing:.2em;font-size:.72rem}
.card-corpo{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;position:relative}
.card-avatar{
  width:66px;height:66px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;
  background:var(--roxo);color:#fff;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.7rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.card-avatar img{width:100%;height:100%;object-fit:cover}
.card-info h3{font-size:1.15rem;letter-spacing:.03em;line-height:1.15}
.card-plano{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.7rem;letter-spacing:.2em;color:var(--c7e);margin:3px 0 6px}
.card-badge{display:inline-block;background:rgba(138,92,255,.16);color:var(--tint,#8a5cff);font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.56rem;letter-spacing:.18em;padding:4px 9px}
.card-qr{width:88px;height:88px;background:#fff;padding:5px;flex-shrink:0}
.card-qr svg{width:100%;height:100%;display:block}
.card-rodape{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--linha);position:relative}
.card-rodape span{font-family:var(--display);font-stretch:125%;font-size:.6rem;letter-spacing:.24em;color:var(--c64)}
.card-rodape strong{font-family:var(--display);font-stretch:125%;font-weight:900;letter-spacing:.14em;font-size:.95rem}
.card-copiar{margin-left:auto;font-size:.68rem;color:var(--tint,#8a5cff);text-decoration:underline;text-underline-offset:3px}

/* ── barra de progresso de nível ── */
.prog-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.prog-atual{font-family:var(--display);font-stretch:125%;font-weight:900;letter-spacing:.14em;font-size:.85rem}
.prog-xp{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.78rem;color:var(--c7e)}
.prog-barra{height:9px;background:var(--preto);border:1px solid var(--linha);overflow:hidden}
.prog-barra span{display:block;height:100%;transition:width .9s cubic-bezier(.22,1,.36,1)}
.prog-falta{font-size:.76rem;color:var(--c64);margin-top:9px}

/* ── stats ── */
.eu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);margin-bottom:16px}
.eu-stat{background:var(--panel);padding:22px 14px;text-align:center}
.eu-stat strong{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(1.3rem,3.4vw,2rem);color:var(--tint,#8a5cff)}
.eu-stat span{font-size:.58rem;letter-spacing:.16em;color:var(--c64);text-transform:uppercase;font-family:var(--display);font-stretch:125%}

/* ── check-in ── */
.checkin{
  width:100%;display:flex;align-items:center;gap:16px;text-align:left;margin-bottom:16px;
  border:1px solid var(--roxo);background:linear-gradient(110deg,rgba(83,20,200,.16),transparent 65%);
  padding:20px clamp(18px,3vw,26px);transition:transform .15s,box-shadow .3s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.checkin:hover{box-shadow:0 0 34px -8px rgba(138,92,255,.5)}
.checkin:active{transform:scale(.985)}
.checkin.feito{border-color:var(--linha);background:var(--panel);cursor:default}
.ck-icone{
  width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;background:var(--roxo);color:#fff;
  font-family:var(--display);font-stretch:125%;font-weight:900;font-style:italic;font-size:1.4rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
}
.checkin.feito .ck-icone{background:var(--linha);color:var(--verde);font-style:normal}
.checkin h4{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.9rem;letter-spacing:.1em}
.checkin p{font-size:.76rem;color:var(--c7e);margin-top:2px}
.ck-seta{margin-left:auto;font-family:var(--display);font-weight:900;font-size:1.3rem;color:var(--tint,#8a5cff)}

/* ── missões ── */
.missoes{display:flex;flex-direction:column;gap:9px}
.missao{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;border:1px solid var(--linha);background:var(--preto);padding:14px 16px;transition:border-color .25s}
.missao:hover{border-color:var(--c42)}
.missao.feita{opacity:.55}
.missao-check{width:22px;height:22px;border:1px solid var(--c42);display:grid;place-items:center;font-size:.75rem;color:var(--verde);flex-shrink:0}
.missao.feita .missao-check{border-color:var(--verde);background:rgba(143,254,9,.1)}
.missao-info h4{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.86rem;letter-spacing:.04em}
.missao-info p{font-size:.72rem;color:var(--c64)}
.missao-premio{text-align:right}
.missao-premio strong{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.95rem;color:var(--tint,#8a5cff)}
.missao-premio span{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c64)}
.missao-ir{width:34px;height:34px;border:1px solid var(--c42);font-family:var(--display);font-weight:900;color:var(--tint,#8a5cff);transition:all .2s}
.missao-ir:hover{background:var(--roxo);border-color:var(--roxo);color:#fff}

/* ── badges ── */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.badge-card{border:1px solid var(--bcor,var(--linha));background:var(--preto);padding:18px 12px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.badge-icone{font-size:1.5rem;color:var(--bcor)}
.badge-card strong{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.62rem;letter-spacing:.12em}

/* ── recompensas ── */
.recompensas{display:flex;flex-direction:column;gap:9px}
.recompensa{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--linha);background:var(--preto);padding:16px}
.recompensa h4{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.86rem;letter-spacing:.04em}
.recompensa p{font-size:.72rem;color:var(--c64);margin-top:2px}
.recompensa .btn{padding:11px 16px;font-size:.66rem;white-space:nowrap;flex-shrink:0}
.recompensa.bloqueada{opacity:.6}

/* ── extrato ── */
.extrato{display:flex;flex-direction:column}
.extrato-linha{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linha)}
.extrato-linha:last-child{border-bottom:none}
.ex-motivo{font-size:.82rem}
.ex-data{font-size:.68rem;color:var(--c64);text-transform:uppercase}
.ex-mais{color:var(--verde);font-family:var(--display);font-weight:800;font-size:.88rem}
.ex-menos{color:var(--rosa);font-family:var(--display);font-weight:800;font-size:.88rem}

/* ── listas mini ── */
.lista-mini{display:flex;flex-direction:column}
.mini-linha{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linha);font-size:.8rem}
.mini-linha:last-child{border-bottom:none}
.mini-status{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tint,#8a5cff);border:1px solid var(--linha);padding:3px 8px}

/* ═══════════════════════════════════════════════
   PAINEL ADM
   ═══════════════════════════════════════════════ */
.adm-metricas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--linha);border:1px solid var(--linha);margin-bottom:20px;
}
.adm-metrica{
  background:var(--panel);padding:16px 14px;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
}
/* O numero E o conteudo do cartao: nada de ellipsis. O valor grande ja
   chega em forma curta do painel.js (170,0M) e o exato mora no title. */
.adm-metrica strong{
  display:block;font-family:var(--display);font-stretch:125%;font-weight:900;
  font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.05;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.adm-metrica span{
  font-size:.55rem;letter-spacing:.12em;color:var(--c64);text-transform:uppercase;
  font-family:var(--display);font-stretch:125%;line-height:1.35;
  /* duas linhas reservadas: "CORRE7 EM CIRCULAÇÃO" quebrava e empurrava
     a borda do cartão, desalinhando a fileira toda */
  min-height:2.7em;display:flex;align-items:flex-end;
}
.adm-metrica.destaque strong{color:var(--tint,#8a5cff)}
.adm-metrica.destaque{background:linear-gradient(130deg,rgba(83,20,200,.14),var(--panel) 70%)}
.adm-ver-mais{display:none}
@media (max-width:640px){ .adm-ver-mais{display:block} }
.adm-abas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
/* Ate 900px vira trilho deslizante com desvanecido na ponta: em tela
   estreita, quebrar 13 abas em 5 linhas come a tela toda antes do
   conteudo. O desvanecido avisa que tem mais coisa para o lado. */
@media (max-width:900px){
  .adm-abas{
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .adm-abas::-webkit-scrollbar{display:none}
}
.adm-aba{border:1px solid var(--c42);padding:10px 18px;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.16em;color:var(--c7e);white-space:nowrap;transition:all .25s}
.adm-aba:hover{color:var(--branco);border-color:var(--branco)}
.adm-aba.ativa{background:var(--branco);color:var(--preto);border-color:var(--branco)}
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{width:100%;border-collapse:collapse;font-size:.82rem;min-width:520px}
.tab th{text-align:left;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c64);padding:10px 12px;border-bottom:1px solid var(--c42)}
.tab td{padding:12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tab tr:last-child td{border-bottom:none}
.tab tbody tr:hover{background:rgba(255,255,255,.02)}
.sel-status{background:var(--preto);border:1px solid var(--c42);color:var(--branco);padding:6px 9px;font-family:var(--body);font-size:.72rem;border-radius:0}
.sel-status:focus{outline:none;border-color:var(--roxo)}
.btn-mini{border:1px solid var(--c42);padding:6px 12px;font-size:.66rem;font-family:var(--display);font-stretch:125%;font-weight:700;letter-spacing:.1em;transition:all .2s}
.btn-mini:hover{background:var(--roxo);border-color:var(--roxo);color:#fff}
.tag-adm{display:inline-block;margin-left:7px;background:var(--roxo);color:#fff;font-family:var(--display);font-weight:800;font-size:.52rem;letter-spacing:.14em;padding:2px 6px}

/* ── seções da ficha do membro ── */
.adm-secao{border-top:1px solid var(--linha);padding-top:18px;margin-top:20px}
.adm-secao h4{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.66rem;
  letter-spacing:.22em;color:var(--tint);margin-bottom:14px}
.adm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.adm-form-grid .campo{margin-bottom:0}
.campo-linha{display:flex;align-items:center;gap:10px;margin-bottom:14px;cursor:pointer;
  font-family:var(--body);font-size:.84rem;color:#c9c9c9;text-transform:none;letter-spacing:0}
.campo-linha input[type=checkbox]{accent-color:var(--roxo);width:17px;height:17px;flex-shrink:0}

/* ── sub-abas e cards do catálogo ── */
/* Mesmo tratamento das .adm-abas: com 12 sub-abas a rolagem horizontal
   escondia "Descontos da locação" e "Hall da Fama" atrás de uma barra
   cinza. No desktop cabem quebrando linha. */
.adm-subabas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
@media (max-width:900px){
  .adm-subabas{
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .adm-subabas::-webkit-scrollbar{display:none}
}
.adm-subaba{border:1px solid var(--linha);background:var(--preto);padding:8px 14px;font-size:.68rem;
  color:var(--c7e);white-space:nowrap;transition:all .2s;font-family:var(--body)}
.adm-subaba:hover{color:var(--branco);border-color:var(--c42)}
.adm-subaba.ativa{background:var(--roxo);border-color:var(--roxo);color:#fff}
.adm-barra-acao{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.adm-contagem{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c64);
  font-family:var(--display);font-stretch:125%}
.adm-barra-acao .btn{padding:10px 18px;font-size:.66rem}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.adm-card{border:1px solid var(--linha);background:var(--preto);padding:16px;text-align:left;
  display:flex;flex-direction:column;gap:6px;transition:border-color .25s,transform .25s}
.adm-card:hover{border-color:var(--tint);transform:translateY(-3px)}
.adm-card.inativo{opacity:.45}
.adm-card strong{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.86rem;letter-spacing:.03em}
.adm-card-meta{font-size:.7rem;color:var(--c64)}

/* campos do modal genérico */
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-family:var(--display);font-stretch:125%;font-weight:600;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c7e)}
.campo input{background:var(--preto);border:1px solid var(--c42);color:var(--branco);padding:13px;font-family:var(--body);font-size:.9rem;outline:none;border-radius:0;-webkit-appearance:none}
.campo input:focus{border-color:var(--roxo)}

/* ── rodapé da área do sócio ── */
.eu-rodape{text-align:center;padding:26px 0 10px}
.link-perigo{font-size:.76rem;color:var(--c64);text-decoration:underline;text-underline-offset:4px;transition:color .25s}
.link-perigo:hover{color:var(--rosa)}

/* ── confete ── */
.confete{position:fixed;inset:0;pointer-events:none;z-index:1800;overflow:hidden}
.confete i{position:absolute;top:-14px;width:8px;height:14px;animation:cai linear forwards}
@keyframes cai{
  to{transform:translateY(105vh) rotate(720deg);opacity:.15}
}

/* ═══ RESPONSIVO ═══ */
/* faixa apertada: o menu ainda aparece mas encosta na marca */
@media (min-width:921px) and (max-width:1180px){
  .topbar{gap:14px;padding-left:18px;padding-right:18px}
  .brand{flex-shrink:0}
  .topnav a{padding:9px 8px;font-size:.66rem;letter-spacing:.1em}
  .topnav a::after{left:8px;right:8px}
}

/* ═══ CORREÇÕES DE MOBILE ═══
   O empurrão pra direita morava em .topnav{margin-left:auto}; como o
   menu some no celular, os botões ficavam soltos no meio da barra.
   Agora o empurrão vive no primeiro botão, que existe em toda largura. */
@media (max-width:920px){
  /* Com a área segura somada, 64px de altura útil viram uma tarja
     grossa demais no celular. 52px deixa o mesmo respiro visual que o
     header tinha antes de existir área segura. */
  :root{--nav-alt:52px}
  .topbar{gap:10px;padding-left:14px;padding-right:14px}
  .brand{flex-shrink:0;min-width:0}
  .brand-logo{height:30px}
  .brand-club{font-size:.62rem;letter-spacing:.24em}
  /* A âncora tem que ser o PRIMEIRO botão da linha. Era #userBtn quando
     ele era o primeiro; com a lupa e o sino na frente, o empurrão passou
     a nascer no meio do grupo e abria um buraco no meio do header.
     #buscaBtn serve porque existe sempre e nunca tem [hidden]. */
  #buscaBtn{margin-left:auto}
  #userBtn.btn-entrar{padding:0 13px;font-size:.62rem;letter-spacing:.12em}
  .cart-btn{width:38px;height:38px;flex-shrink:0}
  .cart-btn svg{width:18px;height:18px}
  /* a badge estourava pra fora da barra e era cortada no topo */
  .cart-count{top:-5px;right:-5px;min-width:16px;height:16px;font-size:.56rem}

  /* letter-spacing largo demais quebrava a linha em duas no 375px */
  .hero-eyebrow{letter-spacing:.26em;font-size:.6rem;padding:0 8px}
  .ph-eyebrow{letter-spacing:.26em;font-size:.6rem}

  /* CTAs com larguras diferentes pareciam desalinhados */
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:320px;margin:0 auto;gap:10px}
  .hero-cta .btn{width:100%;text-align:center}

  /* último item da barra inferior vazava pra fora da tela */
  .bottomnav{padding-left:2px;padding-right:2px}
  .bottomnav a{min-width:0;padding:0 2px}
  .bottomnav a span:last-child{font-size:.54rem;letter-spacing:.03em;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* rodapé: tudo centralizado e sem encostar na barra inferior */
  .foot-manifesto,.foot-links>div{text-align:center}
  .foot-manifesto{align-items:center}
  .foot-manifesto p{margin:0 auto}
  .foot-logo{margin:0 auto}
  .foot-legal{justify-content:center;gap:18px}
  .foot-base{flex-direction:column;align-items:center;text-align:center;gap:8px}

  .adm-form-grid{grid-template-columns:1fr}
  .adm-metricas{grid-template-columns:1fr 1fr}
  .adm-metrica{padding:13px 11px;gap:5px}
  .adm-metrica strong{font-size:1.12rem}
  .adm-metrica span{font-size:.5rem;letter-spacing:.1em;min-height:2.5em}
  /* No celular só as 6 primeiras (dinheiro + o que pede ação) ficam
     abertas; o resto entra sob demanda, senão a equipe rola meia tela
     de número antes de chegar na aba que veio usar. */
  .adm-metricas.encolhida > .adm-metrica:nth-child(n+7){display:none}
  .adm-ver-mais{
    width:100%;margin:-14px 0 20px;padding:11px;background:var(--panel);
    border:1px solid var(--linha);border-top:0;color:var(--c7e);cursor:pointer;
    font-family:var(--display);font-stretch:125%;font-weight:700;
    font-size:.6rem;letter-spacing:.16em;
  }
  .adm-ver-mais:hover{color:#fff;border-color:var(--c42)}
  .adm-cards{grid-template-columns:1fr}
  .modal{max-height:88vh;overflow-y:auto}

  .eu-duplo{grid-template-columns:1fr}
  .card-corpo{grid-template-columns:auto 1fr;grid-template-areas:"av info" "qr qr";gap:14px}
  .card-avatar{grid-area:av}
  .card-info{grid-area:info}
  .card-qr{grid-area:qr;width:100%;max-width:150px;height:auto;aspect-ratio:1;margin:6px auto 0}
  .missao{grid-template-columns:auto 1fr auto;gap:10px;padding:13px}
  .missao-ir{grid-column:3;grid-row:1;width:30px;height:30px}
  .missao-premio{grid-column:2;grid-row:2;text-align:left;display:flex;gap:6px;align-items:baseline}
  .missao-premio strong{font-size:.82rem}
  .recompensa{flex-direction:column;align-items:flex-start;gap:11px}
  .recompensa .btn{width:100%;text-align:center}
  .eu-stats{grid-template-columns:1fr}
  .eu-topo{align-items:flex-start}
  .eu-acoes{width:100%}
  .eu-acoes .btn{flex:1;text-align:center}
  .topnav{display:none}
  .bottomnav{display:grid}
  body{padding-bottom:0}
  .home-drop-card{grid-template-columns:1fr}
  .hd-right{min-height:200px;order:-1}
  .hd-right::after{background:linear-gradient(0deg,var(--panel),transparent 55%)}
  .b2b-anchor{grid-template-columns:1fr}
  .b2b-anchor img{max-width:260px}
  .countdown div{min-width:58px}
  .countdown-lg div{min-width:70px}
  .track{grid-template-columns:auto 48px 1fr auto;gap:10px;padding:12px}
  .track-cover{width:48px;height:48px}
}
@media (min-width:921px){
  .footer{padding-bottom:30px}
  .toast{bottom:28px}
}

/* ═══════════════════════════════════════════════
   BANNER DE VÍDEO
   A tela é só imagem. O texto vive embaixo dela, nunca por
   cima: quadro de vídeo muda o tempo todo e não existe véu
   que garanta contraste em todos eles.
   ═══════════════════════════════════════════════ */
.video-banner{
  width:100%;
  background:#000;
  --vb-h:clamp(320px, 46vh, 520px);      /* a altura vira variável porque a
                                            mídia precisa dela para se dimensionar */
}
.vb-tela{
  position:relative;
  height:var(--vb-h);
  overflow:hidden;                       /* é o corte que elimina a tarja */
  background:#000;
  isolation:isolate;
}

/* Borrão de espera. A miniatura só pinta depois de decodificar, e até lá
   sobrava um retângulo preto no meio da home. Isto é a média de cores da
   própria cena em 12 pontos (amostrada do miolo do frame, fora das tarjas),
   escrita em gradiente: pinta no primeiro quadro, sem download nem decode. */
.vb-midia{
  position:absolute;inset:0;z-index:0;
  background-color:#836449;
  background-image:
    radial-gradient(closest-side at 13% 17%,rgb(89,58,32),transparent),
    radial-gradient(closest-side at 38% 17%,rgb(134,77,53),transparent),
    radial-gradient(closest-side at 63% 17%,rgb(130,92,63),transparent),
    radial-gradient(closest-side at 88% 17%,rgb(186,125,99),transparent),
    radial-gradient(closest-side at 13% 50%,rgb(97,91,95),transparent),
    radial-gradient(closest-side at 38% 50%,rgb(149,111,86),transparent),
    radial-gradient(closest-side at 63% 50%,rgb(41,69,50),transparent),
    radial-gradient(closest-side at 88% 50%,rgb(146,112,86),transparent),
    radial-gradient(closest-side at 13% 83%,rgb(205,163,121),transparent),
    radial-gradient(closest-side at 38% 83%,rgb(140,88,44),transparent),
    radial-gradient(closest-side at 63% 83%,rgb(146,91,57),transparent),
    radial-gradient(closest-side at 88% 83%,rgb(111,119,89),transparent);
}
/* O vídeo de origem é 1.422:1, não 16:9. O YouTube devolve player e
   miniatura com tarja preta de 10% em cada lateral: medido no pixel, 128px
   de barra em 1280px de imagem, sobrando 1024px de cena.

   Miniatura e player têm a MESMA geometria, então uma regra serve para os
   dois: fixa a altura no maior entre a faixa e o que a cena precisa para
   cobrir a largura, e deixa o 16:9 calcular o resto. A tarja cai fora do
   corte sem precisar de zoom por cima.

   71vw ≈ 100vw ÷ 1.422, com um fio de folga. Refazer a conta se trocar o
   vídeo: com o divisor errado a borda preta volta.

   A largura é escrita à mão em vez de sair de aspect-ratio + width:auto
   porque num <img> a largura automática cai na largura intrínseca e a
   tarja voltava só no desktop. */
.vb-midia > *{
  --vb-mid-h:max(var(--vb-h), 71vw);
  position:absolute;top:50%;left:50%;
  height:var(--vb-mid-h);
  width:calc(var(--vb-mid-h) * 16 / 9);
  max-width:none;                        /* o reset global põe max-width:100% em img */
  transform:translate(-50%,-50%);
  border:0;
}
/* sem texto por cima, a cena não precisa mais apanhar escurecimento */
.vb-midia img{object-fit:cover;filter:saturate(1.06)}
.vb-midia iframe{pointer-events:none}   /* o clique é do banner, não do YouTube */
/* a capa cobre o player até ele começar; sem isso pisca preto no meio */
.vb-capa{z-index:1;transition:opacity .7s ease}

/* O bloco de texto sozinho no preto virava um quadrado morto embaixo do
   vídeo. A foto entra em P&B bem apagada, só como textura: aqui tem texto
   por cima, e a regra da casa é que legibilidade vence estética. */
.vb-texto{position:relative;background:#000;isolation:isolate}
/* A foto vive num pseudo-elemento porque precisa de filter: aplicado no
   .vb-texto o grayscale desbotaria o texto e o botão junto. */
.vb-texto::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:url(/assets/criancas.webp) center 58%/cover no-repeat;
  filter:grayscale(1) contrast(1.15) brightness(.42);
  opacity:.5;
}
.vb-texto::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(130% 100% at 18% 0%,rgba(83,20,200,.22),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.75) 100%);
}
.vb-conteudo{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;
  padding:clamp(26px,3.2vw,42px) clamp(18px,4vw,32px) clamp(34px,4vw,54px);
  display:flex;flex-direction:column;gap:13px;align-items:flex-start;
}
.vb-kicker{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.66rem;letter-spacing:.3em;color:var(--tint);
}
.vb-conteudo h2{font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.04}
.vb-conteudo p{font-size:.92rem;color:#d2d2d2;max-width:480px;line-height:1.6}

/* Botão de som: autoplay só roda mudo, então o som é escolha de quem assiste.
   Só ícone, sem rótulo: a regra é nada de texto sobre o vídeo. */
.vb-som{
  position:absolute;z-index:3;top:16px;right:16px;
  opacity:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;transition:all .25s;
}
.video-banner.tocando .vb-som{opacity:1;pointer-events:auto}
.vb-som:hover{border-color:var(--tint);background:rgba(83,20,200,.4)}
.vb-som svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vb-som .vb-audio{display:none}
.vb-som[aria-pressed="true"] .vb-mudo{display:none}
.vb-som[aria-pressed="true"] .vb-audio{display:block}
.vb-som[aria-pressed="true"]{border-color:var(--tint);background:rgba(83,20,200,.5)}

@media (max-width:920px){
  /* Faixa mais baixa de propósito: quanto mais alta a caixa no retrato,
     mais o cover precisa cortar a largura do vídeo e mais gente sai de cena.
     Nessa altura sobra quase toda a horizontal da cena. */
  .video-banner{--vb-h:clamp(230px,32vh,300px)}
  .vb-conteudo{max-width:100%;text-align:center;align-items:center;padding:24px 18px 32px}
  .vb-conteudo p{max-width:100%}
  .vb-som{top:12px;right:12px;width:36px;height:36px}
}

/* ═══ ARTISTAS, SELOS, INSTITUTO E IMPRENSA ═══ */
.sub-titulo{font-size:.85rem;letter-spacing:.24em;color:var(--c64);margin:44px 0 18px;text-align:center}

.artistas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.artista{border:1px solid var(--linha);background:var(--panel);padding:24px;transition:border-color .3s,transform .3s}
.artista:hover{border-color:var(--c42);transform:translateY(-5px)}
.artista.destaque{border-color:var(--roxo);background:linear-gradient(140deg,rgba(83,20,200,.1),var(--panel) 62%)}
.art-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.artista h3{font-size:1.15rem;letter-spacing:.04em}
.art-metrica{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.66rem;letter-spacing:.1em;color:var(--tint);white-space:nowrap}
.art-alcunha{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c64);margin:4px 0 10px}
.art-bio{font-size:.84rem;color:#c2c2c2;line-height:1.65}
.art-faixas{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.art-faixas span{font-size:.66rem;border:1px solid var(--linha);padding:5px 10px;color:var(--c7e)}

.selos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.selo{border:1px solid var(--linha);background:var(--preto);padding:22px;transition:border-color .3s}
.selo:hover{border-color:var(--tint)}
.selo h4{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.92rem;letter-spacing:.08em;margin-bottom:8px}
.selo p{font-size:.78rem;color:var(--c7e);line-height:1.6}

.inst-quadros{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.inst-quadro{border:1px solid var(--linha);background:var(--panel);padding:24px}
.inst-quadro h4{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.72rem;letter-spacing:.2em;color:var(--tint);margin-bottom:14px}
.inst-quadro ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.inst-quadro li{font-size:.82rem;color:#c9c9c9;padding-left:18px;position:relative}
.inst-quadro li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--roxo);
  clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%)}

.imprensa{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.imp-item{border:1px solid var(--linha);background:var(--panel);padding:20px}
.imp-veiculo{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.68rem;letter-spacing:.2em;color:var(--tint);display:block;margin-bottom:9px}
.imp-item p{font-size:.8rem;color:#c2c2c2;line-height:1.6}

/* ═══ IMAGENS QUE ACENDEM AO ROLAR ═══
   O grayscale antes só saía no :hover — que não existe em
   celular, então tudo ficava cinza pra sempre. Agora --cor
   vai de 0 (cinza) a 1 (colorida) conforme a imagem entra
   na viewport, preenchido pelo IntersectionObserver com
   vários thresholds. Fica progressivo de verdade e o custo
   fica fora da thread de scroll. */
.eco-card img,
.gallery-track img,
.pc-img img,
.inst-card img,
.b2b-anchor img,
.hd-right img,
.track-cover,
.article-hero img{
  --cor: 0;
  filter: grayscale(calc(1 - var(--cor))) contrast(1.08) brightness(calc(.74 + var(--cor) * .21));
  transition: filter .45s linear, transform .8s cubic-bezier(.22,1,.36,1);
}
/* o hover continua valendo no desktop, agora empurrando a var */
.eco-card:hover img,
.gallery-track img:hover,
.post-card:hover .pc-img img{ --cor: 1; transform: scale(1.05); }

@media (prefers-reduced-motion: reduce){
  .eco-card img,.gallery-track img,.pc-img img,.inst-card img,
  .b2b-anchor img,.hd-right img,.track-cover,.article-hero img{ transition: none }
}

/* ═══ AUTH / CONTA ═══ */
/* Deslogado o botão vira CTA escrito: o boneco genérico não dizia a
   ninguém que ali se entra. A largura passa a ser do conteúdo, não os
   42px quadrados do ícone. */
#userBtn.btn-entrar{
  width:auto;padding:0 18px;
  background:var(--roxo);border-color:var(--roxo);color:var(--branco);
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:.68rem;letter-spacing:.16em;
}
#userBtn.btn-entrar:hover{background:var(--tint);border-color:var(--tint)}

.user-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover}
.user-initial{width:30px;height:30px;display:grid;place-items:center;background:var(--roxo);color:var(--branco);font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.85rem}
.auth-providers{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.btn-prov{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px;background:var(--branco);color:var(--preto);font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.74rem;letter-spacing:.12em;transition:transform .15s,box-shadow .25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.btn-prov:hover{box-shadow:0 0 26px rgba(255,255,255,.28)}
.btn-prov:active{transform:scale(.97)}
.btn-prov svg{width:19px;height:19px;flex-shrink:0}
.auth-divider{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--c64);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--display);font-stretch:125%}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--linha)}
.acc-head{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.acc-avatar{width:64px;height:64px;flex-shrink:0;display:grid;place-items:center;background:var(--roxo);color:var(--branco);font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.6rem;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.acc-avatar img{width:100%;height:100%;object-fit:cover}
.acc-head h3{font-size:1.2rem;line-height:1.1}
.acc-email{font-size:.74rem;color:var(--c7e);margin:2px 0 6px;word-break:break-all}
.acc-badge{display:inline-block;background:rgba(138,92,255,.14);color:var(--verde);font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.58rem;letter-spacing:.18em;padding:4px 10px}
.acc-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.acc-stats div{border:1px solid var(--linha);background:var(--panel);padding:14px 16px}
.acc-stats span{display:block;font-size:.6rem;letter-spacing:.24em;color:var(--c64);font-family:var(--display);font-stretch:125%;margin-bottom:4px}
.acc-stats strong{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.1rem;color:var(--verde)}
.acc-actions{display:flex;flex-direction:column;gap:10px}

/* ═══ SCROLL PROGRESS ═══ */
#scrollProgress{position:fixed;top:env(safe-area-inset-top, 0px);left:0;height:3px;width:0;z-index:960;background:linear-gradient(90deg,var(--azul),var(--roxo),var(--rosa));box-shadow:0 0 12px rgba(138,92,255,.7);transition:width .12s linear}

/* ═══ SPOTLIGHT (desktop) ═══ */
/* Brilho que segue o cursor. Era 680px com 17% no centro: uma mancha
   roxa maior que meia tela, que competia com o conteúdo em vez de
   acompanhar a mão. Agora 300px e bem mais discreto.

   A posição vem de --x/--y em vez de pixels calculados no JS. Antes o
   script subtraía 340 na mão, metade da largura de então: mudar o
   tamanho aqui sem mexer lá deslocava o brilho do cursor. Com o calc
   abaixo, o tamanho é definido num lugar só. */
#spotlight{
  position:fixed;top:0;left:0;
  --tam:300px;--x:50vw;--y:50vh;
  width:var(--tam);height:var(--tam);border-radius:50%;
  pointer-events:none;z-index:1;display:none;
  transform:translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
  background:radial-gradient(circle,
    rgba(83,20,200,.11) 0%, rgba(83,20,200,.04) 44%, transparent 70%);
}
@media (pointer:fine){#spotlight{display:block}}

/* ═══ SHINE SWEEP (cards) ═══ */
.shine{position:relative;overflow:hidden}
.shine::before{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:3;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);transition:left .75s cubic-bezier(.22,1,.36,1)}
.shine:hover::before{left:170%}

/* ═══ GALERIA MARQUEE ═══ */
.gallery{overflow:hidden;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);background:var(--preto);padding:20px 0}
.gallery-track{display:flex;gap:14px;width:max-content;animation:galleryMove 42s linear infinite}
.gallery:hover .gallery-track{animation-play-state:paused}
.gallery-track img{height:clamp(170px,24vw,290px);width:auto;filter:grayscale(1) contrast(1.12) brightness(.82);transition:filter .45s,transform .45s}
.gallery-track img:hover{filter:grayscale(0) contrast(1.05) brightness(.95);transform:scale(1.03)}
@keyframes galleryMove{to{transform:translateX(-50%)}}

/* ═══ BANNERS ═══ */
.banner{position:relative;overflow:hidden;border:1px solid var(--linha);min-height:clamp(260px,38vw,420px);display:flex;align-items:flex-end;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.banner:hover .banner-bg{transform:scale(1.05)}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(12deg,rgba(0,0,0,.88) 18%,rgba(0,0,0,.25) 60%,transparent)}
.banner-content{position:relative;z-index:2;padding:clamp(24px,4.5vw,52px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.banner-kicker{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.4em;color:var(--verde);text-transform:uppercase;display:flex;align-items:center;gap:9px}
.banner-content h2{font-size:clamp(1.5rem,4vw,2.8rem);max-width:640px}
.banner-content p{color:#c4c4c4;font-size:.88rem;max-width:520px}
.banner+.banner{margin-top:16px}

/* ═══ BLOG ═══ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.post-card{background:var(--panel);border:1px solid var(--linha);overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-7px);border-color:var(--c42)}
.pc-img{aspect-ratio:16/10;overflow:hidden;position:relative}
.pc-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.78);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s}
.post-card:hover .pc-img img{transform:scale(1.07);filter:grayscale(.15) brightness(.9)}
.pc-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pc-meta{display:flex;align-items:center;gap:12px}
.pc-cat{background:var(--roxo);color:var(--branco);font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.56rem;letter-spacing:.18em;padding:5px 10px;text-transform:uppercase}
.pc-date{font-size:.66rem;letter-spacing:.14em;color:var(--c64);text-transform:uppercase;font-family:var(--display)}
.pc-body h3{font-size:1.02rem;letter-spacing:.03em;line-height:1.25}
.pc-body p{font-size:.8rem;color:var(--c7e);flex:1}
.pc-link{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.68rem;letter-spacing:.2em;color:var(--verde)}
.blog-strip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.blog-strip-head .sec-title{margin-bottom:0}
.link-mais{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.72rem;letter-spacing:.2em;color:var(--verde);text-transform:uppercase;border-bottom:2px solid var(--roxo);padding-bottom:4px;transition:color .25s}
.link-mais:hover{color:var(--branco)}

/* ═══ ARTIGO (leitura) ═══ */
.article-overlay{position:fixed;inset:0;z-index:1800;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;overflow-y:auto;overscroll-behavior:contain}
.article-overlay.open{display:block;animation:viewIn .4s cubic-bezier(.22,1,.36,1)}
.article{max-width:780px;margin:5vh auto 10vh;background:var(--bg);border:1px solid var(--c42);position:relative}
.article-close{position:sticky;top:14px;margin-left:auto;margin-right:14px;transform:translateY(14px);width:40px;height:40px;border:1px solid var(--c42);background:var(--preto);color:var(--branco);z-index:5;display:grid;place-items:center;font-size:1rem;transition:all .25s}
.article-close:hover{border-color:var(--rosa);color:var(--rosa)}
.article-hero{aspect-ratio:16/8;overflow:hidden;margin-top:-54px}
.article-hero img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.75)}
.article-body{padding:clamp(24px,5vw,52px)}
.article-body .pc-meta{margin-bottom:18px}
.article-body h1{font-size:clamp(1.6rem,4vw,2.5rem);margin-bottom:20px;line-height:1.08}
.article-body h2{font-size:1.15rem;margin:30px 0 12px;letter-spacing:.04em}
.article-body p{color:#c9c9c9;font-size:.94rem;margin-bottom:16px}
.article-body ul{margin:0 0 18px 20px;color:#c9c9c9;font-size:.92rem;display:flex;flex-direction:column;gap:8px}
.article-body blockquote{border-left:3px solid var(--roxo);padding:6px 0 6px 20px;margin:22px 0;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em}
.article-share{margin-top:34px;border-top:1px solid var(--linha);padding-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

@media (max-width:920px){
  .article{margin:0 0 0;border-left:none;border-right:none}
  .banner-content h2{font-size:1.4rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════
   MURAL DE MARCAS
   Marquee contínuo de logos. A trilha é duplicada no JS e a animação
   anda exatamente -50%: quando a segunda cópia chega onde a primeira
   começou, o ciclo reinicia sem emenda visível. Qualquer valor que não
   seja -50% produz um salto a cada volta.
   ═══════════════════════════════════════════════ */
.mural-titulo{
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.66rem;letter-spacing:.3em;color:var(--c64);
  text-align:center;margin-bottom:22px;
}
.mural-marcas{
  overflow:hidden;
  /* apaga as pontas para os logos entrarem e saírem em vez de cortarem */
  /* desbotar 9% de cada ponta fazia o mesmo logo parecer de tamanhos
     diferentes conforme a posição. 4% só suaviza a entrada. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.mm-trilha{
  display:flex;align-items:center;width:max-content;
  animation:mmAnda 32s linear infinite;
}
.mural-marcas:hover .mm-trilha{animation-play-state:paused}
@keyframes mmAnda{to{transform:translateX(-50%)}}

/* Caixa idêntica para todos, e o conteúdo centralizado dentro dela. Sem
   isso o logo desenhado e a marca escrita ocupam alturas diferentes e o
   mural fica com a linha de base dançando. */
.mm-item{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:clamp(158px,17vw,200px);height:106px;padding:0 12px;
  opacity:.7;transition:opacity .3s;
}
/* branco cheio no item sob o cursor, o resto recua para cinza: o
   destaque vem da opacidade, não de devolver a cor */
.mural-marcas:hover .mm-item{opacity:.32}
.mural-marcas .mm-item:hover{opacity:1}
/* Os traços do simple-icons são quadrados (viewBox 24x24). Numa caixa larga
   sobra ar dos lados e o logo parece minúsculo, então a altura manda e a
   largura acompanha. */
/* Caixa idêntica para todo logo, com object-fit:contain: um desenho
   largo e um quadrado passam a ocupar a MESMA área óptica, que é o que
   faz a fileira parecer padronizada apesar de formatos bem diferentes.

   brightness(0) zera a cor mantendo a transparência e invert(1) leva o
   resultado a branco. É o que permite subir o logo colorido que a marca
   entrega, sem ninguém preparar versão monocromática à mão. */
/* Altura generosa de propósito. O traço vem num viewBox quadrado com
   folga interna, então numa caixa larga e baixa o object-fit encolhe o
   desenho até ele parecer menor que a marca escrita ao lado. A altura é
   o que manda quando o desenho é quadrado. */
.mm-logo{
  width:100%;height:58px;display:block;
  object-fit:contain;object-position:center;
  filter:brightness(0) invert(1);
}
/* marca sem traço aberto entra como tipografia, no mesmo peso óptico
   dos logos, para o mural não parecer remendado */
/* Sem nowrap: nome comprido estourava a caixa e encostava no vizinho.
   A altura do item é fixa e o conteúdo fica centrado, então quebrar em
   duas linhas não desalinha a fileira. */
.mm-texto{
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:.98rem;letter-spacing:.04em;color:#fff;text-align:center;line-height:1.05;
  max-width:100%;overflow-wrap:break-word;
}
/* uma linha só: a legenda de duas linhas empurrava o nome para cima e
   desalinhava a marca vizinha */
.mm-item small{
  font-size:.56rem;letter-spacing:.16em;color:var(--c64);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}

@media (prefers-reduced-motion:reduce){
  /* sem animação o mural vira lista rolável: continua utilizável */
  .mm-trilha{animation:none}
  .mural-marcas{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .mm-item{opacity:.8;filter:none}
}
@media (max-width:920px){
  .mm-item{width:150px;height:94px;padding:0 8px}
  .mm-logo{height:50px}
  .mm-texto{font-size:.8rem}
  .mm-item small{font-size:.52rem}
}

/* ═══════════════════════════════════════════════
   HALL DA FAMA
   Cards em forma de disco premiado. A rolagem é nativa com scroll-snap:
   dedo, trackpad, roda e teclado funcionam sem reimplementação, e as
   setas só empurram o mesmo scroll.
   ═══════════════════════════════════════════════ */
.hf-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.hf-setas{display:flex;gap:8px}
.hf-seta{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--c42);background:transparent;color:#fff;
  transition:border-color .25s,opacity .25s,background .25s;
}
.hf-seta svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hf-seta:hover:not([disabled]){border-color:var(--tint);background:rgba(83,20,200,.28)}
.hf-seta[disabled]{opacity:.28;cursor:default}

.hf-trilho{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;scrollbar-width:none;
}
.hf-trilho::-webkit-scrollbar{display:none}
.hf-trilho:focus-visible{outline:2px solid var(--tint);outline-offset:6px}
.hf-card{
  flex:none;width:clamp(232px,25vw,282px);scroll-snap-align:start;
  border:1px solid var(--linha);background:var(--panel);
  padding:26px 22px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;
  transition:border-color .3s,transform .3s;
}
.hf-card:hover{border-color:var(--tint);transform:translateY(-4px)}

/* O disco: anéis concêntricos em gradiente metálico. repeating-conic dá o
   brilho girado do vinil prensado; o repeating-radial dá os sulcos. */
.hf-disco{
  width:128px;height:128px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.09) 0 1px, transparent 1px 4px),
    repeating-conic-gradient(from 0deg,
      #6d6d6d 0deg 8deg,#efefef 12deg,#8f8f8f 20deg,#fdfdfd 28deg,#5c5c5c 36deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 14px 34px rgba(0,0,0,.6);
}
.hf-card:hover .hf-disco{animation:hfGira 9s linear infinite}
@keyframes hfGira{to{transform:rotate(360deg)}}
.hf-miolo{
  width:56px;height:56px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--roxo);
  box-shadow:0 0 0 4px #0c0c0c;
}
.hf-miolo img{width:100%;height:100%;object-fit:cover}
.hf-inicial{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.5rem;color:#fff}

.hf-selo{
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:.56rem;letter-spacing:.2em;color:var(--lima);
  border:1px solid rgba(143,254,9,.3);padding:5px 10px;text-align:center;
}
.hf-corpo{text-align:center;display:flex;flex-direction:column;gap:7px}
.hf-corpo h3{font-size:1.02rem;letter-spacing:.05em}
.hf-papel{font-size:.68rem;letter-spacing:.14em;color:var(--tint);text-transform:uppercase}
.hf-info{font-size:.82rem;color:var(--c64);line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .hf-card:hover .hf-disco{animation:none}
  .hf-card:hover{transform:none}
}
@media (max-width:920px){
  .hf-topo{align-items:center}
  /* As setas ficam. Esconder e confiar no swipe deixou gente achando que
     o carrossel estava travado: num card que ocupa quase a faixa inteira
     sobra pouca área para começar um gesto horizontal. */
  .hf-card{width:min(72vw,250px)}
  .hf-disco{width:104px;height:104px}
  .hf-seta{width:38px;height:38px}
}

/* ─── bloco da casa no rodapé ─── */
.foot-casa address{font-style:normal;font-size:.84rem;color:var(--c64);line-height:1.7;margin-bottom:12px}
.foot-atalho{display:block;font-size:.84rem;color:var(--tint);margin-bottom:6px;transition:color .2s}
.foot-atalho:hover{color:#fff}

/* ═══════════════════════════════════════════════
   COMUNIDADE DZ7
   ═══════════════════════════════════════════════ */
.cm-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.cm-topo h1{font-size:clamp(1.8rem,5vw,3rem)}

.cm-barra{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.cm-chips,.cm-ordem{display:flex;gap:7px;flex-wrap:wrap}
.cm-chip{
  --cat:var(--roxo);
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.62rem;letter-spacing:.14em;color:var(--c64);
  border:1px solid var(--linha);background:transparent;padding:9px 13px;
  transition:color .2s,border-color .2s,background .2s;
}
.cm-chip:hover{color:#fff;border-color:var(--c42)}
.cm-chip.ativo{color:#fff;border-color:var(--cat);background:color-mix(in srgb,var(--cat) 22%,transparent)}

.cm-lista{display:flex;flex-direction:column;gap:11px}
.cm-post{
  --cat:var(--roxo);
  display:flex;gap:16px;cursor:pointer;
  border:1px solid var(--linha);border-left:3px solid var(--cat);
  background:var(--panel);padding:18px 20px;
  transition:border-color .25s,transform .2s,background .25s;
}
.cm-post:hover{background:#101010;transform:translateX(3px)}
.cm-post:focus-visible{outline:2px solid var(--tint);outline-offset:3px}
.cm-post.fixado{background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 10%,transparent),transparent 40%)}
.cm-post h3{font-size:1.02rem;line-height:1.25;margin-bottom:6px}
.cm-post-corpo{flex:1;min-width:0}

/* coluna do voto: largura fixa para os cartões alinharem
   independentemente de o número ter 1 ou 4 dígitos */
.cm-votar{
  flex:none;width:52px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:transparent;border:1px solid var(--linha);padding:9px 0;height:fit-content;
  color:var(--c64);transition:color .2s,border-color .2s,background .2s;
}
.cm-votar svg{width:19px;height:19px;fill:currentColor}
.cm-votar:hover{color:#fff;border-color:var(--c42)}
.cm-votar.votei{color:var(--lima);border-color:rgba(143,254,9,.4);background:rgba(143,254,9,.08)}
.cm-votos{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.78rem}

.cm-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.cm-tag{
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.56rem;letter-spacing:.18em;color:var(--cat,var(--tint));
}
.cm-fixado{font-size:.54rem;letter-spacing:.18em;color:var(--lima);border:1px solid rgba(143,254,9,.32);padding:2px 6px}
.cm-quando{font-size:.7rem;color:var(--c64)}
.cm-resumo{font-size:.86rem;color:var(--c64);line-height:1.6;margin-bottom:11px}

.cm-rodape{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-avatar{
  width:24px;height:24px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;background:var(--roxo);color:#fff;
  font-family:var(--display);font-weight:900;font-size:.66rem;
}
.cm-avatar img{width:100%;height:100%;object-fit:cover}
.cm-autor{font-size:.78rem;color:#d2d2d2}
.cm-plano{font-size:.54rem;letter-spacing:.14em;color:var(--tint);border:1px solid rgba(138,92,255,.34);padding:2px 6px}
.cm-respostas{margin-left:auto;font-size:.74rem;color:var(--c64)}

/* formulário */
.cm-form{border:1px solid var(--linha);background:var(--panel);padding:clamp(20px,3vw,28px);margin-bottom:16px}
.cm-form h3{font-size:.86rem;letter-spacing:.18em;margin-bottom:16px}
.cm-rotulo{display:block;font-size:.6rem;letter-spacing:.2em;color:var(--c64);margin:14px 0 6px}
.cm-input,.cm-textarea,.cm-select{
  width:100%;background:#0b0b0b;border:1px solid var(--linha);color:#fff;
  padding:12px 14px;font-family:inherit;font-size:.9rem;transition:border-color .2s;
}
.cm-textarea{resize:vertical;line-height:1.6}
.cm-input:focus,.cm-textarea:focus,.cm-select:focus{outline:none;border-color:var(--tint)}
.cm-form-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

/* tópico aberto */
.cm-voltar{
  background:transparent;border:0;color:var(--tint);padding:0 0 18px;
  font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.16em;
}
.cm-voltar:hover{color:#fff}
.cm-topico{border:1px solid var(--linha);border-left:3px solid var(--cat,var(--roxo));background:var(--panel);padding:clamp(22px,3.4vw,34px);margin-bottom:26px}
.cm-topico h1{font-size:clamp(1.4rem,3.6vw,2.2rem);line-height:1.15;margin:8px 0 14px}
/* pre-wrap preserva as quebras que a pessoa escreveu sem interpretar
   marcação nenhuma: nada do que ela digitou vira HTML */
.cm-texto{white-space:pre-wrap;line-height:1.75;font-size:.92rem;color:#d8d8d8;margin:16px 0}
.cm-secao{font-size:.76rem;letter-spacing:.2em;color:var(--c64);margin-bottom:14px}
.cm-respostas-lista{display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.cm-resposta{border:1px solid var(--linha);background:var(--panel);padding:18px 20px}
.cm-resposta .cm-texto{margin:11px 0 0;font-size:.88rem}
.cm-travado{border:1px solid var(--linha);background:var(--panel);padding:18px;text-align:center;color:var(--c64);font-size:.86rem}
.cm-vazio{border:1px solid var(--linha);background:var(--panel);padding:44px 24px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.cm-vazio p{color:var(--c64)}

/* vitrine de quem ainda não tem conta */
.cm-vitrine{max-width:860px;display:flex;flex-direction:column;gap:20px}
.cm-vitrine h1{font-size:clamp(1.9rem,5.4vw,3.2rem);line-height:1.02}
.cm-cats-vitrine{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:8px}
.cm-cat-card{border:1px solid var(--linha);border-left:3px solid var(--cat);background:var(--panel);padding:20px}
.cm-cat-card h3{font-size:.76rem;letter-spacing:.18em;color:var(--cat);margin-bottom:8px}
.cm-cat-card p{font-size:.84rem;color:var(--c64);line-height:1.6}
.cm-vitrine-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:10px}
.cm-nota{font-size:.78rem;color:var(--c64)}

@media (max-width:920px){
  .cm-topo{align-items:stretch}
  .cm-topo .btn{width:100%}
  .cm-barra{flex-direction:column}
  .cm-post{padding:15px 16px;gap:12px}
  .cm-votar{width:44px}
  .cm-respostas{margin-left:0;width:100%}
  .cm-vitrine{text-align:center;align-items:center}
  .cm-cat-card{text-align:left}
  .cm-vitrine-cta{align-items:center;width:100%}
  .cm-vitrine-cta .btn{width:100%}
}

/* ─── redes do perfil ─── */
.redes-titulo{font-size:.72rem;letter-spacing:.2em;color:var(--c64);margin:26px 0 4px}
.redes-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campo-rede{margin:0}
.rede-rotulo{display:flex;align-items:center;gap:6px}
.rede-icone{width:13px;height:13px;fill:currentColor;flex:none}
.redes-lista{display:flex;flex-wrap:wrap;gap:9px}
.rede-link{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--linha);background:#0b0b0b;padding:10px 14px;
  font-size:.8rem;color:#d2d2d2;transition:border-color .2s,color .2s;
}
.rede-link:hover{border-color:var(--tint);color:#fff}
.rede-link .rede-icone{width:16px;height:16px}
@media (max-width:560px){ .redes-grade{grid-template-columns:1fr} }

/* ─── comprovante da reserva ─── */
.bk-recibo{border:1px solid var(--tint);background:rgba(83,20,200,.1);padding:clamp(20px,3vw,28px);margin-top:18px}
.bk-recibo h3{font-size:.94rem;letter-spacing:.12em;margin-bottom:8px}
.bk-sub{font-size:.84rem;color:var(--c64);line-height:1.6;margin-bottom:16px}
.bk-itens{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.bk-itens li{display:flex;justify-content:space-between;gap:14px;font-size:.86rem;padding-bottom:8px;border-bottom:1px solid var(--linha)}
.bk-itens strong{color:#fff;white-space:nowrap}
.bk-total{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:6px}
.bk-total span{font-size:.62rem;letter-spacing:.22em;color:var(--c64)}
.bk-total strong{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.3rem;color:var(--lima)}
.bk-nota{font-size:.78rem;color:var(--c64);margin-top:10px}
.bk-recibo .btn{margin-top:16px}

/* ─── imagem no cartão de serviço ─── */
.service-capa{width:46px;height:46px;flex:none;overflow:hidden;border:1px solid var(--linha)}
.service-capa img{width:100%;height:100%;object-fit:cover}

/* ─── campo de imagem no painel ─── */
.campo-imagem{display:flex;flex-direction:column;gap:8px}
.campo-rot{font-size:.6rem;letter-spacing:.2em;color:var(--c64)}
.campo-dica{display:block;font-size:.68rem;color:var(--c64);margin-top:5px;letter-spacing:0;text-transform:none}
.img-previa{
  width:100%;height:118px;border:1px solid var(--linha);background:#0b0b0b;
  display:grid;place-items:center;overflow:hidden;
}
.img-previa img{width:100%;height:100%;object-fit:cover}
.img-vazia{font-size:.72rem;color:var(--c64);letter-spacing:.1em}
.img-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.img-acoes input[type=file]{font-size:.72rem;color:var(--c64);max-width:190px}
.img-limpar{background:transparent;border:0;color:var(--tint);font-size:.72rem;text-decoration:underline}
.img-limpar:hover{color:#fff}
.img-status{font-size:.7rem;color:var(--c64)}
.adm-form-grid textarea{
  width:100%;background:#0b0b0b;border:1px solid var(--linha);color:#fff;
  padding:10px 12px;font-family:inherit;font-size:.86rem;resize:vertical;line-height:1.55;
}
.adm-form-grid textarea:focus{outline:none;border-color:var(--tint)}

/* ─── pontos do Hall da Fama ───
   No celular são eles que revelam que existe mais gente do lado; sem
   nenhum indicador o carrossel parece uma lista que acabou. */
.hf-pontos{display:flex;justify-content:center;gap:7px;margin-top:16px}
.hf-ponto{
  width:7px;height:7px;border-radius:50%;padding:0;
  border:0;background:var(--c42);transition:background .3s,transform .3s;
}
.hf-ponto.ativo{background:var(--tint);transform:scale(1.5)}

/* ─── foto nas locações ───
   Alugar sala sem ver a sala é pedir para a pessoa confiar no adjetivo. */
.space{display:flex;flex-direction:column;padding:0;overflow:hidden}
.space-capa{width:100%;aspect-ratio:16/10;overflow:hidden;background:#0b0b0b}
.space-capa img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(calc(1 - var(--cor,1))) contrast(1.06) brightness(calc(.78 + var(--cor,1) * .2));
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .5s;
}
.space:hover .space-capa img{transform:scale(1.05)}
.space-corpo{padding:clamp(18px,2.4vw,24px);display:flex;flex-direction:column;gap:9px;flex:1}

/* ─── dados da empresa no rodapé ───
   Razão social e CNPJ visíveis é o que separa "site bonito" de empresa
   com quem dá para fechar contrato. Quem vai contratar procura isso. */
.foot-empresa{
  padding:14px 0 0;text-align:center;
  font-size:.72rem;color:var(--c42);letter-spacing:.04em;
}

/* ─── header cheio ───
   Nove itens de menu, marca e dois botões não cabem em qualquer largura
   de desktop. Em vez de deixar o flex espremer alguém, o menu aperta
   primeiro e o "CLUB" sai depois: a navegação vale mais que o enfeite. */
/* A conta em 1280, que é o desktop mais estreito comum:
     padding da barra 88 + marca 152 + botões 150 + vãos 54 = 444
     sobram 836 para nove itens de menu, ou ~93 cada.
   Com padding 13 o menu pedia 896 e a sacola saía da tela. */
@media (max-width:1400px){
  .topbar{gap:18px}
  .topnav a{padding:9px 8px;letter-spacing:.09em}
}
@media (max-width:1120px){
  .brand-club{display:none}
}

/* ─── faixa entre o celular e o desktop largo ───
   Abaixo de 1150px nove itens de menu não cabem em tamanho legível, e a
   nav de baixo (que assume em 920) só cobre cinco destinos: esconder o
   menu aqui apagaria Sócio, Blog, Marcas, Instituto e Comunidade.

   Então o menu aperta e ganha rolagem como válvula: min-width:0 deixa o
   flex encolhê-lo, e o que não couber vira arrasto lateral em vez de
   empurrar a sacola para fora da tela. A máscara na ponta avisa que
   continua. */
@media (max-width:1150px){
  /* padding-longhand de propósito: o atalho `padding:0 16px` que morava
     aqui ZERAVA o padding-top da área segura (vem depois na cascata e
     vence), e era isso que jogava a logo para debaixo do relógio do
     iPhone com um vão morto embaixo. */
  .topbar{gap:12px;
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px))}
  .topnav{
    min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
            mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{padding:9px 6px;font-size:.66rem;letter-spacing:.06em;white-space:nowrap}
  #userBtn.btn-entrar{padding:0 12px;font-size:.62rem}
}

/* link de contato no comprovante da reserva */
.bk-falar{
  display:inline-block;margin-top:14px;
  font-size:.82rem;color:var(--tint);transition:color .2s;
}
.bk-falar:hover{color:#fff}

/* ─── perfil de membro na comunidade ─── */
.mp-cartao{border:1px solid var(--linha);background:var(--panel);padding:clamp(20px,3.2vw,32px);margin-bottom:26px;display:flex;flex-direction:column;gap:16px}
.mp-cabeca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mp-cabeca .cm-avatar{width:58px;height:58px;font-size:1.3rem}
.mp-ident{flex:1;min-width:180px}
.mp-ident h1{font-size:clamp(1.3rem,3.4vw,1.9rem);line-height:1.1;margin-bottom:7px}
.mp-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.mp-cidade{font-size:.72rem;color:var(--c64)}
.mp-numeros{display:flex;gap:18px;font-size:.84rem;color:var(--c64)}
.mp-numeros strong{color:#fff;font-family:var(--display);font-stretch:125%;margin-right:4px}
.mp-bio{font-size:.9rem;color:#d2d2d2;line-height:1.65}
.mp-post{text-align:left;width:100%;background:var(--panel)}

/* chip de atuação: o "VIDEOMAKER" ao lado do nome é o que faz a
   comunidade servir de vitrine de quem presta serviço */
.cm-chip-atuacao{
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.54rem;letter-spacing:.14em;color:var(--lima);
  border:1px solid rgba(143,254,9,.3);padding:2px 7px;white-space:nowrap;
}

/* assinatura clicável: é botão, mas se veste de linha de autor */
.cm-assina{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
button.cm-assina-link{background:transparent;border:0;padding:0;cursor:pointer;font:inherit}
button.cm-assina-link:hover .cm-autor{color:#fff;text-decoration:underline}
button.cm-assina-link:focus-visible{outline:2px solid var(--tint);outline-offset:3px}

/* ─── social no topo da área do sócio ─── */
.eu-social{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:9px}
.eu-atuacao{
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.56rem;letter-spacing:.16em;color:var(--lima);
  border:1px solid rgba(143,254,9,.3);padding:3px 8px;
}
.eu-segue{font-size:.76rem;color:var(--c64)}
.redes-vazio{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media (max-width:920px){
  .redes-vazio{align-items:stretch}
  .redes-vazio .btn{width:100%}
  .mp-cabeca .btn{width:100%}
}

/* ═══ THREADS (respostas em árvore) ═══ */
.cm-fio{display:flex;flex-direction:column;gap:10px}
/* o fio à esquerda é o que faz a árvore ler como conversa e não como
   lista desalinhada; o recuo para no nível 4 via --nivel */
.cm-galhos{display:flex;flex-direction:column;gap:10px;margin-left:clamp(14px,3vw,26px);
  padding-left:clamp(10px,2vw,16px);border-left:2px solid var(--linha)}
.cm-galhos:empty{display:none}
.cm-resposta.cm-galho{background:#0d0d0d}
.cm-resp-acoes{display:flex;gap:14px;align-items:center;margin-top:10px}
.cm-resp-btn{
  background:transparent;border:0;padding:0;
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.6rem;letter-spacing:.16em;color:var(--tint);cursor:pointer;
}
.cm-resp-btn:hover{color:#fff}
.cm-form-galho{margin-top:12px;padding:14px}
.btn-mini-env{padding:9px 16px;font-size:.62rem}

/* ═══ OS MAIS ATIVOS ═══ */
.cm-ativos{margin-bottom:24px}
.cm-ativos-trilho{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.cm-ativos-trilho::-webkit-scrollbar{display:none}
.cm-ativo{
  flex:none;display:flex;align-items:center;gap:9px;scroll-snap-align:start;
  border:1px solid var(--linha);background:var(--panel);padding:10px 14px;
  color:inherit;font:inherit;cursor:pointer;transition:border-color .25s;
}
.cm-ativo:hover{border-color:var(--tint)}
.cm-ativo.eu{border-color:rgba(138,92,255,.5)}
.cm-ativo-pos{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.8rem;color:var(--c64)}
.cm-ativo-pos.podio{color:var(--lima)}
.cm-ativo-nome{font-size:.82rem;color:#fff;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.cm-ativo-pontos{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.68rem;white-space:nowrap}

/* ═══ CARD DZ7 (linktree) ═══ */
.card-pagina{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.card-cartao{
  border:1px solid var(--linha);background:var(--panel);
  padding:clamp(26px,5vw,40px);display:flex;flex-direction:column;
  align-items:center;gap:14px;text-align:center;
}
.card-avatar-grande{
  width:92px;height:92px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--roxo);color:#fff;
  font-family:var(--display);font-weight:900;font-size:2.2rem;
  box-shadow:0 0 0 3px #0c0c0c,0 0 0 5px var(--roxo);
}
.card-avatar-grande img{width:100%;height:100%;object-fit:cover}
.card-nome{font-size:clamp(1.4rem,5vw,1.9rem);line-height:1.1}
.card-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.card-nivel{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.62rem;letter-spacing:.18em}
.card-cidade{font-size:.74rem;color:var(--c64)}
.card-bio{font-size:.9rem;color:#d2d2d2;line-height:1.65;max-width:400px}
.card-redes{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:6px}
.card-rede{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1px solid var(--linha);background:#0b0b0b;padding:14px 16px;
  transition:border-color .25s,transform .15s;
}
.card-rede:hover{border-color:var(--tint)}
.card-rede:active{transform:scale(.98)}
.card-rede-icone{width:20px;height:20px;fill:#fff;flex:none}
.card-rede-nome{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.16em;color:#fff}
.card-rede-valor{margin-left:auto;font-size:.78rem;color:var(--c64);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.card-qr-caixa{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px}
.card-qr-caixa svg{width:132px;height:132px;background:#fff;padding:8px}
.card-qr-rotulo{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.56rem;letter-spacing:.26em;color:var(--c64)}
.card-assinatura{text-align:center;font-size:.7rem;letter-spacing:.14em;color:var(--c64)}
.card-assinatura strong{color:var(--tint)}
.card-assinatura:hover{color:#fff}
.card-vazio{text-align:center;max-width:520px;margin:40px auto;display:flex;flex-direction:column;gap:16px;align-items:center}
.card-vazio h1{font-size:clamp(1.6rem,5vw,2.4rem)}

/* ═══ MEU CARD no /eu ═══ */
.card-meu{display:flex;gap:clamp(16px,3vw,26px);align-items:flex-start;flex-wrap:wrap}
.card-qr-mini svg{width:110px;height:110px;background:#fff;padding:6px;flex:none}
.card-meu-info{flex:1;min-width:240px;display:flex;flex-direction:column;gap:11px}
.card-meu-sub{font-size:.86rem;color:var(--c64);line-height:1.6}
.card-meu-link{
  font-size:.8rem;background:#0b0b0b;border:1px solid var(--linha);
  padding:9px 12px;color:var(--tint);overflow-wrap:anywhere;
}
.card-meu-acoes{display:flex;gap:8px;flex-wrap:wrap}
.card-toggle{
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:.62rem;letter-spacing:.14em;padding:11px 16px;
  border:1px solid var(--c42);background:transparent;color:var(--c64);
  transition:all .25s;
}
.card-toggle.ligado{border-color:var(--lima);color:var(--lima);background:rgba(143,254,9,.08)}

/* ═══ CMS no admin ═══ */
.cms-aviso{font-size:.82rem;color:var(--c64);margin-bottom:20px;line-height:1.6}
.cms-editor{display:flex;flex-direction:column;gap:8px}
.cms-grupo{border:1px solid var(--linha);background:#0d0d0d;padding:18px;margin-bottom:14px;display:flex;flex-direction:column;gap:4px}
.cms-grupo-titulo{font-size:.66rem;letter-spacing:.24em;color:var(--tint);margin-bottom:10px}
.cms-grupo .campo input,.cms-grupo .campo textarea{
  width:100%;background:#0b0b0b;border:1px solid var(--linha);color:#fff;
  padding:10px 12px;font-family:inherit;font-size:.86rem;
}
.cms-grupo .campo textarea{resize:vertical;line-height:1.55}
.cms-grupo .campo input:focus,.cms-grupo .campo textarea:focus{outline:none;border-color:var(--tint)}

@media (max-width:640px){
  .card-meu{flex-direction:column;align-items:center;text-align:center}
  .card-meu-acoes{justify-content:center}
  .cm-ativo-nome{max-width:100px}
}

/* ═══ SELEÇÃO DE ESPAÇOS (locação v2) ═══ */
.space.escolhido{border-color:var(--tint);box-shadow:0 0 0 1px var(--tint)}
.space-rodape{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.space-toggle{
  font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:.6rem;letter-spacing:.14em;padding:10px 14px;
  border:1px solid var(--c42);background:transparent;color:var(--c64);
  transition:all .25s;cursor:pointer;
}
.space-toggle:hover{border-color:var(--tint);color:#fff}
.space-toggle.on{border-color:var(--tint);background:rgba(83,20,200,.24);color:#fff}
.space-horas{display:flex;align-items:center;gap:2px}
.space-horas:empty{display:none}
.space-horas button{
  width:32px;height:32px;border:1px solid var(--linha);background:#0b0b0b;
  color:#fff;font-size:1rem;cursor:pointer;transition:border-color .2s;
}
.space-horas button:hover{border-color:var(--tint)}
.space-horas b{
  min-width:42px;text-align:center;
  font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.86rem;
}

/* orçamento vivo no formulário */
#bkOrcamento{border:1px solid var(--linha);background:#0b0b0b;padding:16px;margin:6px 0 4px}
.orc-linha{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;padding:5px 0;color:#d2d2d2}
.orc-linha strong{white-space:nowrap}
.orc-desconto{color:var(--lima)}
.orc-desconto strong{color:var(--lima)}
.orc-total{border-top:1px solid var(--linha);margin-top:6px;padding-top:11px}
.orc-total span{font-size:.62rem;letter-spacing:.22em;color:var(--c64)}
.orc-total strong{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.15rem;color:var(--lima)}
.orc-economia{font-size:.74rem;color:var(--lima);margin-top:8px;text-align:right}
.bk-desconto,.bk-desconto strong{color:var(--lima)}

/* ═══ DZ7 TV ═══ */
.tv-topo{margin-bottom:22px}
.tv-topo h1{font-size:clamp(1.8rem,5vw,3rem)}
.tv-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--linha)}
.tv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-agora{font-size:clamp(1.1rem,3vw,1.6rem);margin:16px 0 6px}
.tv-cat-atual{display:inline-block;margin-bottom:26px}
.tv-secao{margin-top:26px}
.tv-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tv-card{background:transparent;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.tv-capa{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--linha);background:#0b0b0b}
.tv-capa img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tv-card:hover .tv-capa img{transform:scale(1.05)}
.tv-play{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:1.6rem;color:#fff;background:rgba(0,0,0,.34);
  opacity:0;transition:opacity .25s;
}
.tv-card:hover .tv-play{opacity:1}
.tv-card-titulo{display:block;margin-top:9px;font-size:.86rem;line-height:1.4}
.tv-escola-chamada{
  margin-top:40px;border:1px solid var(--linha);background:var(--panel);
  padding:clamp(22px,3.4vw,34px);display:flex;align-items:center;gap:20px;
  justify-content:space-between;flex-wrap:wrap;
}
.tv-escola-chamada h3{font-size:1.2rem;margin-bottom:7px}
.tv-escola-chamada p{color:var(--c64);font-size:.88rem;max-width:460px}

/* ═══ ESCOLA DZ7 ═══ */
.esc-topo{max-width:680px;margin-bottom:30px;display:flex;flex-direction:column;gap:12px}
.esc-topo h1{font-size:clamp(1.9rem,5.4vw,3.2rem)}
.esc-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.esc-curso{border:1px solid var(--linha);background:var(--panel);display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s}
.esc-curso.liberado{border-color:rgba(143,254,9,.4)}
.esc-capa{aspect-ratio:16/9;overflow:hidden;background:#0b0b0b}
.esc-capa img{width:100%;height:100%;object-fit:cover}
.esc-corpo{padding:clamp(18px,2.6vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.esc-selo{
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:.56rem;letter-spacing:.18em;color:var(--c64);
  border:1px solid var(--linha);padding:4px 9px;
}
.esc-selo.on{color:var(--lima);border-color:rgba(143,254,9,.35)}
.esc-curso h3{font-size:1.15rem}
.esc-desc{font-size:.86rem;color:var(--c64);line-height:1.6}
.esc-aulas-previa{list-style:none;display:flex;flex-direction:column;gap:7px;margin:4px 0}
.esc-aulas-previa li{display:flex;align-items:center;gap:9px;font-size:.82rem;color:#d2d2d2}
.esc-aulas-previa small{margin-left:auto;color:var(--c64)}
.esc-cadeado{flex:none;font-size:.72rem}
.esc-acoes{margin-top:auto}
.esc-curso .btn-full{margin-top:auto}

.esc-titulo-curso{font-size:clamp(1.5rem,4vw,2.4rem);margin:6px 0 18px}
.esc-player{margin-bottom:18px}
.esc-aula-atual{font-size:1.1rem;margin-bottom:6px}
.esc-sem-video{position:absolute;inset:0;display:grid;place-items:center;color:var(--c64);font-size:.88rem;padding:20px;text-align:center}
.esc-lista-aulas{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.esc-aula{
  display:flex;align-items:center;gap:12px;text-align:left;
  border:1px solid var(--linha);background:var(--panel);padding:13px 16px;
  color:inherit;font:inherit;cursor:pointer;transition:border-color .25s;
}
.esc-aula:hover{border-color:var(--c42)}
.esc-aula.atual{border-color:var(--tint);background:rgba(83,20,200,.1)}
.esc-aula-n{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:.8rem;color:var(--tint)}
.esc-aula-titulo{flex:1;font-size:.9rem}
.esc-aula small{color:var(--c64);font-size:.72rem;white-space:nowrap}
.esc-breve{color:var(--lima) !important}

/* ═══ CENTRAL DO ARTISTA (admin) ═══ */
.art-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}
.art-cartao{border:1px solid var(--linha);background:#0d0d0d;padding:18px;display:flex;flex-direction:column;gap:12px}
.art-cartao h4{font-size:1rem}
.art-plataformas{display:flex;flex-direction:column;gap:8px}
.art-metrica{
  display:flex;align-items:baseline;gap:10px;
  border:1px solid var(--linha);padding:9px 12px;
}
.art-metrica strong{font-family:var(--display);font-stretch:125%;font-size:1rem;color:var(--c64)}
.art-metrica.com-dado strong{color:#fff}
.art-plat{font-size:.58rem;letter-spacing:.18em;color:var(--c64);min-width:70px}
.art-metrica small{color:var(--c64);font-size:.7rem}
.art-sobe{color:var(--lima) !important}
.art-desce{color:#ff6b6b !important}
.adm-cursos{display:flex;gap:8px;flex-wrap:wrap}

/* ═══ DROPS: plataforma de áudio ═══ */
.dp-envio{border:1px solid var(--linha);background:var(--panel);padding:clamp(20px,3vw,30px);margin-bottom:22px}
.dp-envio h3{font-size:1.1rem;margin-bottom:16px}
.dp-envio-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dp-envio input[type=file]{font-size:.76rem;color:var(--c64)}
.dp-lista{display:flex;flex-direction:column;gap:12px}
.dp-faixa{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--linha);background:var(--panel);
  padding:16px;transition:border-color .25s;
}
.dp-faixa.tocando{border-color:var(--tint)}
.dp-faixa.carregando{opacity:.6}
.dp-faixa.dp-socio{background:linear-gradient(90deg,rgba(83,20,200,.08),transparent 45%)}
.dp-play{
  flex:none;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--c42);background:#0b0b0b;color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:all .25s;
}
.dp-play:hover{border-color:var(--tint);background:rgba(83,20,200,.3)}
/* triângulo/pausa desenhados em CSS: troca junto com o estado */
.dp-play-icone{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:3px}
.dp-faixa.tocando .dp-play-icone{width:14px;height:16px;border:0;margin:0;background:linear-gradient(90deg,#fff 35%,transparent 35%,transparent 65%,#fff 65%)}
.dp-capa{flex:none;width:52px;height:52px;overflow:hidden;border:1px solid var(--linha)}
.dp-capa img{width:100%;height:100%;object-fit:cover}
.dp-capa-vazia{display:grid;place-items:center;background:var(--roxo);color:#fff;font-family:var(--display);font-weight:900;font-size:1.3rem}
.dp-meio{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.dp-cabeca{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dp-cabeca h4{font-size:.98rem;line-height:1.2}
.dp-selo{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.52rem;letter-spacing:.18em;color:var(--tint);border:1px solid rgba(138,92,255,.4);padding:2px 7px}
.dp-genero{font-size:.58rem;letter-spacing:.16em;color:var(--c64)}
.dp-autor-linha{display:flex;align-items:center;gap:10px}
.dp-autor{background:transparent;border:0;padding:0;color:var(--c64);font-size:.78rem;cursor:pointer;text-align:left}
.dp-autor:hover{color:#fff;text-decoration:underline}
.dp-seguir{
  font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.54rem;
  letter-spacing:.14em;color:var(--lima);background:transparent;
  border:1px solid rgba(143,254,9,.35);padding:3px 9px;cursor:pointer;
}
.dp-progresso{height:4px;background:#1c1c1c;cursor:pointer}
.dp-progresso span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--roxo),var(--tint))}
.dp-rodape{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dp-stat,.dp-dur{font-size:.74rem;color:var(--c64)}
.dp-dur{margin-left:auto}
.dp-acao{
  background:transparent;border:0;padding:0;color:var(--c64);
  font-size:.8rem;cursor:pointer;transition:color .2s;
}
.dp-acao:hover{color:#fff}
.dp-acao.on{color:var(--lima)}
.dp-acao b{font-weight:600}
.dp-comentarios{border-top:1px solid var(--linha);padding-top:12px;display:flex;flex-direction:column;gap:9px}
.dp-com{display:flex;gap:8px;font-size:.84rem;align-items:baseline}
.dp-com strong{color:var(--tint);white-space:nowrap}
.dp-com span{color:#d2d2d2}
.dp-com-form{display:flex;gap:8px}
.dp-com-campo{flex:1;background:#0b0b0b;border:1px solid var(--linha);color:#fff;padding:10px 12px;font-family:inherit;font-size:.84rem}
.dp-com-campo:focus{outline:none;border-color:var(--tint)}
@media (max-width:640px){
  .dp-envio-grade{grid-template-columns:1fr}
  .dp-capa{display:none}
  .dp-dur{display:none}
}

/* embed oficial do Spotify nos Drops */
.spot-embed{min-height:352px;margin-bottom:16px}
.spot-embed iframe{width:100%;height:352px;border:0;border-radius:12px;display:block}
.spot-acoes{text-align:center}
@media (max-width:640px){ .spot-embed,.spot-embed iframe{height:380px;min-height:380px} }

/* ═══ DROPS · lado gerencial (aba DROPS do admin) ═══ */
.dpadm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.dpadm-kpi{border:1px solid var(--linha);background:var(--panel);padding:14px 12px;text-align:center}
.dpadm-kpi strong{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.5rem;color:var(--lima)}
.dpadm-kpi span{font-size:.58rem;letter-spacing:.16em;color:var(--c64)}
.dpadm-insights{border:1px solid rgba(138,92,255,.35);background:rgba(83,20,200,.08);padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.dpadm-insights p{font-size:.85rem;color:#d8d8d8}
.dpadm-secao{margin-bottom:18px}
.dpadm-faixa,.dpadm-pl-cabeca{display:flex;gap:12px;align-items:center;border:1px solid var(--linha);background:#0d0d0d;padding:10px 12px}
.dpadm-pl{margin-top:10px}
.dpadm-faixa{margin-top:8px}
.dpadm-faixa.off,.dpadm-pl.off .dpadm-pl-cabeca{opacity:.55}
.dpadm-capa{flex:none;width:44px;height:44px;overflow:hidden;border:1px solid var(--linha)}
.dpadm-capa img{width:100%;height:100%;object-fit:cover}
.dpadm-capa.sem-capa{display:grid;place-items:center;background:var(--roxo);color:#fff;font-family:var(--display);font-weight:900}
.dpadm-faixa-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dpadm-faixa-titulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dpadm-faixa-titulo strong{font-size:.92rem}
.dpadm-sub{font-size:.74rem;color:var(--c64)}
.dpadm-nums{font-size:.72rem;color:#9a9a9a}
.dpadm-selo{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.5rem;letter-spacing:.16em;padding:2px 7px;border:1px solid var(--c42);color:var(--c64)}
.dpadm-selo.socio{color:var(--tint);border-color:rgba(138,92,255,.4)}
.dpadm-selo.off{color:#ff7a7a;border-color:rgba(255,122,122,.35)}
.dpadm-selo.papel{color:var(--lima);border-color:rgba(143,254,9,.35)}
.dpadm-acoes{display:flex;gap:6px;flex-wrap:wrap}
.btn-mini.perigo{color:#ff7a7a;border-color:rgba(255,122,122,.35)}
.dpadm-mcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px}
.dpadm-mc{border:1px solid var(--linha);background:#0d0d0d;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.dpadm-mc-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;border:1px solid var(--c42)}
.dpadm-mc-avatar img{width:100%;height:100%;object-fit:cover}
.dpadm-mc-avatar.sem-capa{display:grid;place-items:center;background:var(--roxo);color:#fff;font-family:var(--display);font-weight:900;font-size:1.2rem}
.dpadm-mc strong{font-size:.9rem}
.dpadm-mc-nums{display:flex;gap:10px;font-size:.68rem;color:var(--c64)}
.dpadm-mc-nums b{color:#fff}
.dpadm-pl-seletor{border:1px solid var(--linha);border-top:0;background:#0a0a0a;padding:12px;display:flex;flex-direction:column;gap:6px}
.dpadm-pl-opcao{display:flex;gap:8px;align-items:center;font-size:.82rem;cursor:pointer}
.dpadm-pl-opcao.off{opacity:.5}
.dpadm-com{display:flex;gap:10px;align-items:center;border:1px solid var(--linha);background:#0d0d0d;padding:8px 12px;margin-top:6px}
.dpadm-com.off{opacity:.5}
.dpadm-com-corpo{font-size:.84rem;color:#d2d2d2}

/* ═══ DROPS · prateleiras de playlist (lado público) ═══ */
.dp-playlists{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
.dp-playlist{border-left:3px solid var(--roxo);padding-left:14px}
.dp-pl-cabeca{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.dp-pl-capa{flex:none;width:64px;height:64px;overflow:hidden;border:1px solid var(--linha)}
.dp-pl-capa img{width:100%;height:100%;object-fit:cover}
.dp-pl-textos h3{font-size:1.05rem}
.dp-pl-textos p{font-size:.8rem;color:var(--c64)}
.dp-pl-n{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:.54rem;letter-spacing:.16em;color:var(--tint)}
@media (max-width:640px){ .dpadm-mcs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} }

/* ═══ BUSCA ═══ */
.busca-titulo{font-size:clamp(1.8rem,6vw,3rem);margin-bottom:18px}
.busca-caixa{margin-bottom:22px}
.busca-campo{width:100%;background:#0b0b0b;border:1px solid var(--linha);color:#fff;
  padding:16px 18px;font-family:inherit;font-size:1rem}
.busca-campo:focus{outline:none;border-color:var(--tint)}
.bsc-grupo{margin-bottom:24px}
.bsc-conta{color:var(--c64);font-weight:400}
.bsc-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.bsc-lista{display:flex;flex-direction:column;gap:8px}
.bsc-artista,.bsc-faixa{display:flex;gap:12px;align-items:center;text-align:left;
  border:1px solid var(--linha);background:var(--panel);padding:12px;cursor:pointer;
  transition:border-color .2s;width:100%}
.bsc-artista:hover,.bsc-faixa:hover{border-color:var(--tint)}
.bsc-avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;border:1px solid var(--c42)}
.bsc-capa{flex:none;width:48px;height:48px;overflow:hidden;border:1px solid var(--linha)}
.bsc-avatar img,.bsc-capa img{width:100%;height:100%;object-fit:cover}
.bsc-sem-foto{display:grid;place-items:center;background:var(--roxo);color:#fff;
  font-family:var(--display);font-weight:900;font-size:1.1rem}
.bsc-artista-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bsc-artista-info strong{font-size:.92rem;color:#fff}
.bsc-sub{font-size:.76rem;color:var(--c64)}
.bsc-nums{font-size:.7rem;color:#8a8a8a}

/* ═══ NOTIFICAÇÕES ═══ */
.sino-count{background:var(--lima);color:#000}
.ntf-lista{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ntf-item{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid var(--linha);background:var(--panel);padding:14px;cursor:pointer;
  transition:border-color .2s}
.ntf-item:hover{border-color:var(--tint)}
.ntf-item.nova{background:rgba(83,20,200,.08);border-color:rgba(138,92,255,.3)}
.ntf-icone{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--c42);border-radius:50%;font-size:.9rem}
.ntf-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ntf-texto strong{font-size:.9rem;color:#fff}
.ntf-corpo{font-size:.8rem;color:#c2c2c2}
.ntf-quando{font-size:.68rem;color:var(--c64)}
.ntf-ponto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lima);margin-top:6px}

/* ═══ ATALHOS DA ÁREA DO SÓCIO ═══ */
.eu-atalhos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.eu-atalho{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1px solid var(--linha);background:var(--panel);padding:16px 8px;cursor:pointer;
  transition:border-color .2s,transform .2s}
.eu-atalho:hover{border-color:var(--tint);transform:translateY(-2px)}
.eu-atalho-icone{font-size:1.4rem}
.eu-atalho-nome{font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:.56rem;letter-spacing:.14em;color:var(--c64)}
.eu-atalho-selo{position:absolute;top:8px;right:8px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--lima);color:#000;font-size:.62rem;font-weight:700;
  display:grid;place-items:center}

/* ═══ VOLUME DO PLAYER ═══ */
.dp-volume{display:flex;align-items:center;gap:6px;margin-left:auto}
.dp-vol-btn{background:transparent;border:0;padding:2px;cursor:pointer;font-size:.9rem;line-height:1}
.dp-vol-faixa{width:76px;accent-color:var(--tint);cursor:pointer}
.dp-descricao{font-size:.8rem;color:#b4b4b4;line-height:1.45}

/* ═══ PEDIDO DE ACESSO (escola) ═══ */
.esc-pedido{display:flex;flex-direction:column;gap:8px}
.esc-selo.aguardando{color:var(--lima);border-color:rgba(143,254,9,.35)}
.esc-selo.negado{color:#ff7a7a;border-color:rgba(255,122,122,.35)}
.esc-acoes-caixa{width:100%}
.cm-area{resize:vertical;font-family:inherit}
.campo-largo{grid-column:1/-1}

/* ═══ GALERIA NO ADM ═══ */
.campo-galeria{display:flex;flex-direction:column;gap:8px}
.gal-lista{display:flex;flex-direction:column;gap:8px}
.gal-item{display:flex;gap:8px;align-items:center;border:1px solid var(--linha);
  background:#0b0b0b;padding:8px}
.gal-item img{width:56px;height:56px;object-fit:cover;flex:none;border:1px solid var(--linha)}
.gal-legenda{flex:1;min-width:0;background:#0b0b0b;border:1px solid var(--linha);color:#fff;
  padding:8px 10px;font-family:inherit;font-size:.82rem}
.gal-legenda:focus{outline:none;border-color:var(--tint)}
.gal-ordem{display:flex;gap:4px}

@media (max-width:640px){
  .eu-atalhos{grid-template-columns:repeat(2,1fr)}
  .bsc-grade{grid-template-columns:1fr}
  .dp-volume{margin-left:0;width:100%}
  .dp-vol-faixa{flex:1}
}

/* pontinhos do carrossel de galeria */
.space-capa.com-galeria{position:relative}
.gal-pontos{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.gal-ponto{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.4);transition:background .2s,transform .2s}
.gal-ponto.on{background:#fff;transform:scale(1.3)}

/* itens dentro da célula (pedidos e reservas) */
.adm-itens{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.adm-item{font-size:.66rem;padding:2px 7px;border:1px solid var(--linha);
  color:var(--c7e);white-space:nowrap}
.adm-item.servico{color:var(--lima);border-color:rgba(143,254,9,.3)}
.adm-sub-cel{display:block;font-size:.66rem;color:var(--c64);margin-top:3px}
.adm-vazio-cel{color:var(--c64)}
.adm-contato{color:var(--tint);text-decoration:underline;text-underline-offset:3px}
.adm-contato:hover{color:#fff}