/* Fontes de Juan Parada servidas pelo próprio site (SIL Open Font License). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/static/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/static/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/static/fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/static/fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Tema amarelo: uma cor só nas telas, tinta azul-marinho e acento rosa. */
:root{
  --noite:#14204D; --creme:#F8E955; --papel:#F8E955; --alt:#F8E955; --azul:#F8E955; --fundo:#F8E955; --listra:#14204D;
  --tinta:#14204D; --suave:#5E5515; --linha:rgba(20,32,77,.3);
  --amarelo:#E8368A; --vermelho:#E8368A; --ciano:#E8368A; --onacc:#fff;
  --display:"Archivo",Impact,sans-serif; --body:"IBM Plex Mono",ui-monospace,monospace; --ital:"Fraunces",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
/* A página de discos do comum troca as fontes para as do disco da vnuvem
   (#v-disco); aqui ela usa as do Juan, como o resto do site. */
#v-disco{--display:"Archivo",Impact,sans-serif;--body:"IBM Plex Mono",ui-monospace,monospace}
body{font-size:15px}
h1,h2,h3,.titulo-obra{font-family:var(--display);font-stretch:62%;font-weight:850;text-transform:uppercase}
.top.solid{background:var(--fundo);color:var(--tinta)}
/* Grão estático por cima da página, como no protótipo. O do comum é animado, com
   filtro e blend "screen" para fundo escuro: sobre o amarelo ele pisca a tela
   toda. Aqui nada anima e nada mistura (o ruído já é preto com transparência). */
.grao{position:fixed;inset:0;width:auto;height:auto;z-index:40;pointer-events:none;opacity:.22;animation:none;filter:none;mix-blend-mode:normal;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Faixas de tecido nas duas bordas, em todas as telas: o tecido girado 90°
   (tecido-lateral.jpg), com a largura do protótipo. Começam abaixo da faixa da
   campanha, quando ela está no ar. */
:root{--rib:clamp(22px,3vw,44px)}
body{padding-left:var(--rib);padding-right:var(--rib)}
body::before,body::after{content:"";position:fixed;top:0;bottom:0;width:var(--rib);z-index:30;pointer-events:none;background:#000 url("../img/tecido-lateral.jpg") 0 0/100% auto repeat-y}
body::before{left:0}
body::after{right:0}
body.com-apoio::before,body.com-apoio::after{top:var(--apb)}
.top{left:var(--rib);right:var(--rib)}
@media (max-width:860px){:root{--rib:clamp(14px,3.6vw,22px)}}

/* ---------- marca: JUAN cheio, PARADA só contorno ---------- */
.jp-marca{font:850 clamp(22px,2.2vw,30px)/1 var(--display);font-stretch:62%;text-transform:uppercase;white-space:nowrap;color:var(--tinta)}
.jp-marca i{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--tinta);margin-left:.18em}
.top,.top .in,.menu a{color:var(--tinta)}
.top.hero-mode .home{visibility:visible}
.menu a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.menu a:hover,.menu a[aria-current="page"]{text-decoration-color:var(--amarelo)}
.idioma{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.rodape,.rodape a{color:var(--tinta)}
.rodape{background:var(--fundo)}
.jp-marca-rodape{font-size:34px}
:focus-visible{outline-color:var(--amarelo)}

/* ---------- home: cabe em uma tela ---------- */
body[data-pagina="inicio"]{height:100svh;overflow:hidden}
body[data-pagina="inicio"] .rodape{display:none}
body[data-pagina="inicio"] main{height:100%}
body[data-pagina="inicio"].com-apoio main{height:calc(100svh - var(--apb))}
/* no cabeçalho da home só o menu, à esquerda, como no protótipo */
.top.hero-mode .home{display:none}
.top.hero-mode .in{max-width:none;height:clamp(54px,8vh,70px);padding:0 clamp(16px,3vw,48px) 0 clamp(14px,2.4vw,36px);justify-content:flex-start;gap:clamp(14px,2.4vw,36px)}
.top.hero-mode .menu{margin-left:0}
.top.hero-mode .idioma{margin-left:auto}
.top.hero-mode .menu a{color:var(--suave)}
.top.hero-mode .menu a:hover,.top.hero-mode .menu a[aria-current="page"]{color:var(--tinta)}
.jp-home{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%)}
.jp-esq{display:grid;grid-template-rows:clamp(54px,8vh,70px) minmax(0,1fr) auto clamp(130px,23vh,200px);min-height:0;min-width:0;padding:0 clamp(16px,3vw,48px) 0 clamp(14px,2.4vw,36px)}
.jp-sociais{grid-row:2;align-self:start;list-style:none;margin:clamp(14px,3vh,30px) 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:3}
.jp-sociais a{display:flex;align-items:center;gap:10px;min-height:44px;padding:11px 16px;border:1px solid var(--tinta);font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.jp-sociais a:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--onacc)}
.jp-sociais .ico{width:16px;height:16px}
.jp-bloco{grid-row:3;min-width:0;padding-bottom:clamp(10px,2vh,20px);position:relative;z-index:3}
.jp-nome{margin:0;font:850 clamp(48px,min(18vh,10.2vw),210px)/.8 var(--display);font-stretch:62%;text-transform:uppercase;letter-spacing:-.01em}
.jp-nome span{display:block}
.jp-nome span+span{color:transparent;-webkit-text-stroke:2px var(--tinta)}
.jp-lema{margin:clamp(10px,1.8vh,18px) 0 clamp(12px,2.2vh,22px);font:italic 400 clamp(17px,1.9vw,28px)/1.2 var(--ital)}
.jp-agenda{grid-row:4;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;border-top:1px solid var(--tinta);padding-bottom:clamp(8px,1.6vh,16px);position:relative;z-index:3}
.jp-agenda h2{margin:0;padding:clamp(6px,1vh,10px) 0;font:700 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.jp-agenda h2 a{text-decoration:none}.jp-agenda h2 a:hover{color:var(--amarelo)}
.jp-datas{display:flex;overflow-x:auto;scrollbar-width:none;min-height:0}
.jp-datas::-webkit-scrollbar{display:none}
.jp-data{flex:0 0 clamp(190px,17vw,250px);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-content:start;padding:2px 16px 0 0;margin-right:16px;border-right:1px solid var(--linha);text-decoration:none}
.jp-data b{grid-row:1/3;font:850 clamp(44px,8vh,80px)/.82 var(--display);font-stretch:62%;letter-spacing:-.01em}
.jp-mes{grid-column:2;grid-row:1;align-self:end;font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--amarelo)}
.jp-cidade{grid-column:2;grid-row:2;align-self:start;font:italic 600 16px/1.1 var(--ital);white-space:nowrap}
.jp-data small{grid-column:1/3;margin-top:8px;font:400 12px var(--mono);opacity:.8}
.jp-sem-datas{align-self:center;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.jp-vazio{margin:0;font:850 clamp(24px,4vh,44px)/.9 var(--display);font-stretch:62%;text-transform:uppercase}
/* direita: a arte atravessa o fundo, sem moldura */
.jp-dir{position:relative;min-height:0;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
.jp-arte{position:absolute;z-index:0;top:0;bottom:0;left:-34%;right:0;background:url("../img/ep1-fundo.jpg") 70% 40%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 46%),linear-gradient(to bottom,transparent 8%,#000 34%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 46%),linear-gradient(to bottom,transparent 8%,#000 34%,#000 82%,transparent 100%);mask-composite:intersect}
.jp-capa{position:relative;z-index:1;padding:clamp(16px,3.4vh,30px) clamp(18px,2.8vw,40px) 0 0;min-height:0}
.jp-capa .contagem{align-items:flex-start;gap:0}
.contagem small{display:block;margin-bottom:6px;font:500 10px/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta)}
.contagem .n{gap:clamp(10px,1.4vw,22px)}
.contagem .n b{font:850 clamp(30px,6vh,60px)/.85 var(--display);font-stretch:62%;color:var(--tinta)}
.contagem .n span{font:400 9.5px var(--mono);letter-spacing:.2em;margin-top:5px;color:var(--amarelo)}
.jp-capa .contagem .presave,.jp-capa .jp-ouvir{position:absolute;right:clamp(18px,2.8vw,40px);bottom:clamp(8px,1.6vw,16px);margin:0}
.btn.b-claro{display:flex;align-items:center;gap:12px;background:var(--tinta);color:var(--papel);border:0;border-radius:0;padding:clamp(10px,1.6vh,14px) 16px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.btn.b-claro:hover{background:var(--amarelo);color:var(--onacc)}
.btn.b-claro .ico{width:14px;height:14px}
.jp-agora small{display:block;font:500 10px/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.jp-agora span{font:850 clamp(30px,6vh,60px)/.9 var(--display);font-stretch:62%;text-transform:uppercase}
.jp-pl{position:relative;z-index:1;border-top:1px solid var(--linha);padding:clamp(10px,1.5vh,16px) clamp(18px,2.8vw,40px) clamp(10px,1.5vh,16px) clamp(14px,2vw,28px)}
.jp-pl-t{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:0 0 8px}
.jp-pl-t strong{font:italic 600 clamp(16px,1.6vw,22px)/1.05 var(--ital);min-width:0}
.jp-pl-t span{font:400 10px var(--mono);letter-spacing:.14em;color:var(--suave);white-space:nowrap;text-transform:uppercase}
.jp-faixas{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.jp-faixas button,.jp-faixas span{font:400 11px/1 var(--mono);letter-spacing:.18em;padding:4px 0;color:var(--suave);border-bottom:1px solid transparent}
.jp-faixas button:hover,.jp-faixas li.on button{color:var(--tinta);border-color:var(--amarelo)}
@media (max-width:860px){
  .jp-home{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(54px,8vh,70px) auto auto minmax(0,1fr) 104px}
  .jp-esq{display:contents}
  .jp-bloco{grid-row:2;grid-column:1;padding:0 14px 0 12px}
  .jp-nome{font-size:clamp(34px,11.6vw,64px);white-space:nowrap}
  .jp-nome span{display:inline}.jp-nome span+span{margin-left:.12em}
  .jp-lema{font-size:16px;margin:8px 0 8px}
  .jp-sociais{grid-row:3;grid-column:1;align-self:auto;margin:0 14px 6px 12px;gap:14px;flex-wrap:nowrap}
  /* Só o ícone, sem caixa: o toque muda a cor, sem fundo (a caixa rosa ficava
     torta, com o ícone encostado na esquerda). */
  .jp-sociais a{min-height:44px;min-width:44px;justify-content:center;padding:10px;border:0;-webkit-tap-highlight-color:transparent}
  .jp-sociais li:first-child a{margin-left:-10px}
  .jp-sociais a:hover,.jp-sociais a:active{background:none;color:var(--amarelo)}
  .jp-sociais span{display:none}.jp-sociais .ico{width:24px;height:24px}
  .jp-dir{grid-row:4;grid-column:1;margin:0 6px 0 12px}
  .jp-arte{left:-10%;right:0;top:auto;height:78%;bottom:clamp(54px,10vh,90px);background-position:60% 100%}
  .jp-capa{padding:6px 4px 0 0}
  .contagem .n b{font-size:28px}
  .jp-capa .contagem .presave,.jp-capa .jp-ouvir{right:0;bottom:12px;font-size:9px;padding:8px 10px}
  .jp-pl{padding:10px 10px 10px 0}
  .jp-pl-t strong{font-size:16px}
  .jp-faixas{display:none}
  .jp-agenda{grid-row:5;grid-column:1;margin:0 0 0 12px;padding-bottom:6px}
  .jp-sem-datas{gap:8px}.jp-sem-datas .jp-vazio{font-size:clamp(22px,3.4vh,40px)}.jp-sem-datas .jp-chip{min-height:40px;padding-block:9px}
  .jp-data{flex:0 0 auto;padding-right:12px;margin-right:12px}.jp-data b{font-size:28px}.jp-data small{display:block;margin-top:3px;font-size:11px}
}
@media (max-height:640px) and (min-width:861px){.contagem .n b{font-size:34px}.jp-faixas{display:none}}

/* ---------- telas internas ---------- */
/* No Juan o cabeçalho ocupa o próprio espaço (no comum ele flutua por cima e
   o título desce 104-140px): aqui o título começa logo abaixo dele. */
.pg-topo{border-bottom:1px solid var(--tinta);padding-top:clamp(20px,3vw,36px)}
.pg-t{font:850 clamp(48px,10vh,110px)/.8 var(--display);font-stretch:62%;text-transform:uppercase}
.kicker,.pg-intro{font-family:var(--mono);color:var(--suave);letter-spacing:.18em}
.sec,.sec.escuro,.sec.pg-alt,.pg-alt{background:var(--fundo);color:var(--tinta)}
.btn,.b-amarelo,.b-linha,.b-noite{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;border-radius:0}
.b-amarelo,.b-noite{background:var(--tinta);color:var(--papel);border:1px solid var(--tinta)}
.b-amarelo:hover,.b-noite:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--onacc)}
.b-linha{border:1px solid var(--tinta);color:var(--tinta);background:none}
.b-linha:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--onacc)}
.titulo-obra{font-family:var(--ital);font-stretch:100%;font-style:italic;font-weight:600;text-transform:none}
.mini-tl button,.tl button{color:var(--tinta)}
.mini-tl button:hover,.tl button:hover,.tl li.on button,.mini-tl li.on button{color:var(--amarelo)}
.trava{color:var(--suave)}
.faixa-apoio{background:var(--noite);color:var(--creme);font-size:11.5px;letter-spacing:.16em}
.faixa-apoio .fa-k{opacity:.7}
.faixa-apoio .fa-n{font-weight:500;letter-spacing:.16em}
.fa-barra{max-width:420px;height:10px;border-radius:0;background:rgba(248,233,85,.25)}
.fa-barra i{background:var(--amarelo)}
.faixa-apoio .fa-p{color:#fff;font-size:13px}
.faixa-apoio .fa-b{color:var(--onacc);background:var(--amarelo);padding:12px 18px;letter-spacing:.2em}
.faixa-apoio .fa-b:hover{background:var(--creme);color:var(--noite)}
.np{background:var(--fundo);color:var(--tinta);border-top:1px solid var(--tinta)}
@media (max-width:860px){.pg-t{font-size:min(15vw,70px)}}

/* A página de cada disco: o comum usa um bloco escuro com a capa borrada; aqui
   tudo é o amarelo da página, com tinta azul-marinho. */
.dhero{background:var(--fundo);color:var(--tinta);border-bottom:1px solid var(--tinta)}
.dhero .blur,.dhero::before{display:none}
.dhero .kicker,.escuro .kicker{color:var(--suave)}
.tl{border-top:1px solid var(--tinta)}
.tl li{border-bottom:1px solid var(--linha)}
.tl .no,.tl .du{opacity:1;color:var(--suave)}
.tl li.on button,.tl button:hover{color:var(--amarelo)}
.capa-vazia{background:rgba(20,32,77,.08)}
.mini-tl li{border-color:var(--linha)}
.np{background:var(--fundo);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--tinta);color:var(--tinta)}
.dhero h1,.dhero .titulo-obra,.dhero b{color:var(--tinta)}

/* fim da agenda: o quadro "quer Juan Parada no seu evento?" do protótipo, sem
   cantos redondos e com o botão cheio de tinta */
.jp-book-sec{border-top:0;padding-block:clamp(24px,5vh,56px) clamp(40px,6vw,72px)}
.jp-book{border:1px solid var(--tinta);padding:clamp(18px,3vw,34px);display:flex;gap:18px 32px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.jp-book p{margin:0;max-width:24ch;font:italic 600 clamp(22px,2.6vw,36px)/1.05 var(--ital)}
.jp-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 15px;border:1px solid var(--tinta);border-radius:0;background:var(--tinta);color:var(--papel);font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.jp-chip:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--onacc)}

/* ---------- painel (/juanzeira e a edição nas páginas) ----------
   O painel foi desenhado para fundo escuro: cartões #111, gaveta #141414 e
   textos claros. Sobre o amarelo da Juan isso virava texto azul sobre preto.
   Aqui as superfícies viram claras. O painel.css carrega depois deste arquivo,
   por isso cada regra leva o "body" na frente para ganhar na especificidade. */
body .vv-card,body.logado .vv-c{background:rgba(255,255,255,.5);border-color:var(--tinta);color:var(--tinta)}
body .vv-card .vv-sub,body .vv-card .vv-nota{color:var(--suave)}
body .vv-dev{border-color:var(--tinta);color:var(--tinta)}
body.logado .vv-pend{border-color:var(--tinta);background:rgba(255,255,255,.35)}
body.logado .vv-btn{color:var(--tinta);border-color:var(--tinta)}
body.logado .vv-btn:hover:not([disabled]){background:var(--tinta);color:var(--papel)}
body.logado .vv-btn[disabled]{opacity:.45}
body.logado .vv-pri{background:var(--adm);color:#0b1a12;border-color:var(--adm)}
body.logado .vv-pri:hover:not([disabled]){background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
body.logado .vv-c h2,body.logado .vv-c .kicker{color:var(--tinta)}
body.logado .adm-box{border-color:var(--tinta)}
body.logado .adm-box-t,body.logado .adm-dica-in{color:var(--tinta)}
body.logado .adm-dica{color:var(--suave)}
body.logado .ferr button{color:var(--tinta);border-color:var(--tinta);background:rgba(255,255,255,.35)}
body.logado .ferr button:hover{background:var(--tinta);color:var(--papel)}
body.logado .ferr button.perigo{color:#a3201a;border-color:#a3201a}
body.logado .ferr button.perigo:hover{background:#a3201a;color:#fff}
body.editando .editavel{outline-color:var(--tinta)}
body.logado .gaveta{background:var(--fundo);color:var(--tinta);border-left:1px solid var(--tinta)}
body.logado .gaveta-fundo{background:rgba(20,32,77,.5)}
body.logado .adm-campo input,body.logado .adm-campo select,body.logado .adm-campo textarea,
body.logado .adm-tam input:not([type=checkbox]),body.logado .adm-rider input:not([type=hidden]),
body.logado .adm-faixas input,body.logado .adm-cred input{background:rgba(255,255,255,.7);color:var(--tinta);border:1px solid var(--tinta);border-radius:0}
body.logado .adm-sw span{background:rgba(20,32,77,.35)}
body.logado .adm-sw input:checked+span{background:var(--adm)}
body.logado .up-prev div{background:rgba(20,32,77,.12)}
body.logado .adm-barra{background:var(--noite);color:var(--creme);box-shadow:0 14px 40px rgba(20,32,77,.35)}
body.logado .adm-b-pend{color:var(--creme)}
body.logado .toast{background:var(--tinta);color:var(--papel)}
body.logado .adm-trad summary,body.logado .adm-dica,body.logado .adm-box-t{color:var(--tinta)}
body.logado .adm-b-pub{background:var(--adm);color:#0b1a12}
body.logado .adm-b-pub[disabled]{background:rgba(248,233,85,.25);color:var(--creme)}

/* seletor de lançamentos (página de discos): o do comum tem borda branca e
   fundo preto translúcido, para o bloco escuro. Aqui: borda de tinta, como as
   caixas do protótipo, e o disco aberto marcado com fundo de tinta leve. */
.obras-sel a{border:1px solid var(--linha);border-radius:0;background:transparent;color:var(--tinta)}
.obras-sel a:hover{border-color:var(--tinta)}
.obras-sel a[aria-current="page"]{border-color:var(--tinta);background:rgba(20,32,77,.07)}
.obras-sel img,.obras-sel .capa-vazia{border-radius:0;opacity:1}
.obras-sel small{opacity:1;color:var(--suave)}

/* bolinhas de play: o comum usa branco, para o bloco escuro. Aqui são de tinta,
   com o ícone amarelo, e ficam rosa ao passar o mouse, como no protótipo. */
.np .ctl .pp{background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);box-shadow:0 8px 22px rgba(20,32,77,.3)}
.np .ctl .pp:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--onacc)}
/* play da capa (discos): só o contorno, em azul, para não tapar a capa (o
   rosto costuma estar no centro) */
.capa-play{background:rgba(248,233,85,.18);color:var(--tinta);border:2.5px solid var(--tinta);box-shadow:none;filter:drop-shadow(0 2px 6px rgba(248,233,85,.45))}
/* nunca enche: depois do clique o mouse (ou o toque, que "gruda") fica em
   cima e o botão ficava azul tocando e depois do pause. Com mouse, só clareia */
@media (hover:hover){.capa-play:hover{background:rgba(248,233,85,.45)}}
.capa-play:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}
.np .ctl .prev,.np .ctl .next{color:var(--tinta)}
.np .ctl .prev:hover,.np .ctl .next:hover{color:var(--amarelo)}
.np .prog{background:var(--linha)}
.np .prog .pg{background:var(--tinta)}
.np .meta small,.np .t{color:var(--suave)}

/* o player: botão de fechar legível, botão de comprar sem borda branca e a
   imagem quadrada (o ícone da pulseira ou a capa) */
.np .fechar{background:var(--tinta);color:var(--papel);border:1px solid var(--tinta)}
.np .fechar:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--onacc)}
.np .out{border:1px solid var(--tinta);border-radius:0;color:var(--tinta)}
.np .out:hover{background:var(--tinta);color:var(--papel)}
.np{border-radius:0}
.np img{border-radius:0}

/* o QR do Pix fica acima do grão (o ruído atrapalha a leitura da câmera) e as
   formas seguem retas como no protótipo: barras, botões de redes e produto */
.ap-qr{position:relative;z-index:41}
.apoie .ap-barra,.fa-barra,.fa-barra i{border-radius:0}
.lj-t{font-family:var(--ital);font-style:italic;font-weight:600;font-stretch:100%;text-transform:none;letter-spacing:0}
.lj-tag{border-radius:0}

/* loja: as miniaturas têm tamanho fixo (no comum cada uma divide a linha, e com
   poucas fotos ficam enormes), retas e com borda de tinta na selecionada */
.lj-thumbs{flex-wrap:wrap}
.lj-thumbs button{flex:0 0 clamp(64px,9vw,96px);border-radius:0}
.lj-thumbs button[aria-pressed="true"]{border-color:var(--tinta)}
.lj-main{aspect-ratio:auto;max-height:80vh;object-fit:contain;background:transparent}

/* filtros (registros), links de "ouça também em" e botões sobre o rosa: o comum
   fixa texto preto (#111) para o tema escuro. Aqui o texto vem das variáveis:
   ativo = fundo de tinta com texto amarelo; sobre o rosa, branco. */
.chip{border-radius:0;border-color:var(--tinta);color:var(--tinta)}
.chip:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--onacc)}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.chips{background:var(--fundo)}
.ouca a{border-color:var(--tinta);color:var(--tinta);border-radius:0}
.ouca a:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
@media (max-width:760px){.ouca a:hover{background:none;color:var(--amarelo)}}
.pill,.quadro .pl,.h-link:hover{color:var(--onacc)}
.h-link{border-radius:0;border-color:var(--tinta)}

/* celular: o botão "apoiar" é menor e fica centrado na faixa, com azul em volta
   (antes ele ocupava a altura toda e terminava junto com a borda da faixa) */
@media (max-width:860px){
  .faixa-apoio{padding-block:7px}
  .faixa-apoio .fa-b{display:inline-flex;align-items:center;height:32px;padding:0 12px;font-size:10px;letter-spacing:.14em}
}

/* reserva pelo WhatsApp: no celular o texto quebra em vez de sair da tela */
@media (max-width:860px){.lj-zap{white-space:normal;max-width:100%;text-align:center}}

/* contato: o e-mail numa linha só no celular (é o mais longo dos três) */
@media (max-width:860px){.ct-email{font-size:clamp(15px,5.2vw,24px);white-space:nowrap;word-break:normal}}

/* ---------- movimentos: performance (trilho de vídeos) e fotos ---------- */
.jp-perf{margin-top:clamp(18px,3vh,30px)}
.jp-perf-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.jp-perf h2,.jp-fotos h2{margin:0;font:700 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.jp-perf-n{font:500 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.jp-perf-yt{margin-left:auto;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--tinta);padding-bottom:3px}
.jp-perf-yt:hover{color:var(--amarelo);border-color:var(--amarelo)}
/* o trilho para na margem do conteúdo; nas pontas, um esmaecido e a seta em
   cima do vídeo cortado (as setas só com mouse) */
.jp-caixa{position:relative}
.jp-caixa::before,.jp-caixa::after{content:"";position:absolute;top:0;bottom:4px;width:clamp(48px,9vw,140px);z-index:2;pointer-events:none;opacity:0;transition:opacity .25s}
.jp-caixa::before{left:0;background:linear-gradient(to right,var(--papel) 0%,color-mix(in srgb,var(--papel) 85%,transparent) 35%,transparent 100%)}
.jp-caixa::after{right:0;background:linear-gradient(to left,var(--papel) 0%,color-mix(in srgb,var(--papel) 85%,transparent) 35%,transparent 100%)}
.jp-caixa.tem-antes::before,.jp-caixa.tem-depois::after{opacity:1}
.jp-seta{position:absolute;top:calc(50% - 2px);transform:translateY(-50%);z-index:3;width:56px;height:56px;border-radius:50%;border:0;background:var(--tinta);color:var(--papel);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(20,32,77,.3);transition:background .2s,color .2s}
.jp-seta[hidden]{display:none}
.jp-seta:hover{background:var(--amarelo);color:var(--onacc)}
.jp-seta .ico{width:20px;height:20px}
.jp-seta .jp-volta{transform:scaleX(-1)}
.jp-seta-v{left:18px}
.jp-seta-p{right:18px}
/* no toque não há setas nem esmaecido (ele borrava o vídeo tocando nas
   pontas); com mouse, o esmaecido some enquanto um vídeo toca */
@media (hover:none){.jp-seta,.jp-caixa::before,.jp-caixa::after{display:none}}
.jp-caixa:has(.tocando)::before,.jp-caixa:has(.tocando)::after{opacity:0}
.jp-trilho{display:flex;align-items:flex-start;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 4px;scrollbar-width:none;cursor:grab}
.jp-trilho::-webkit-scrollbar{display:none}
.jp-trilho.arrastando{cursor:grabbing;scroll-snap-type:none;user-select:none}
.jp-quadro{flex:0 0 clamp(300px,30vw,440px);scroll-snap-align:start;position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--tinta);color:var(--papel);text-decoration:none}
.jp-quadro img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.jp-quadro::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,32,77,.92) 0%,rgba(20,32,77,.55) 32%,rgba(20,32,77,0) 64%)}
.jp-q-play{position:absolute;right:16px;top:16px;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--papel);color:var(--tinta);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.jp-q-play .ico{width:20px;height:20px}
.jp-quadro:hover .jp-q-play,.jp-quadro:focus-visible .jp-q-play{background:var(--amarelo);color:var(--onacc)}
.jp-q-leg{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.jp-q-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.jp-q-txt small{font:500 10px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.jp-q-txt b{font:italic 600 22px/1.05 var(--ital)}
.jp-q-leg i{flex:none;font:normal 850 56px/.8 var(--display);font-stretch:62%;color:transparent;-webkit-text-stroke:1.4px var(--papel)}
.jp-quadro.tocando{background:#000}
.jp-quadro.tocando::after{display:none}
.jp-quadro.tocando iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jp-canal{flex:0 0 280px;scroll-snap-align:start;box-sizing:border-box;aspect-ratio:16/9;border:1px solid var(--tinta);padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:var(--tinta);text-decoration:none}
.jp-canal:hover{background:var(--tinta);color:var(--papel)}
.jp-canal .ico{width:34px;height:34px}
.jp-canal>span{display:flex;flex-direction:column;gap:4px}
.jp-canal small{font:500 10px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.jp-canal b{font:850 34px/.9 var(--display);font-stretch:62%;text-transform:uppercase}
.jp-fotos{margin-top:clamp(28px,4vh,44px)}
.jp-fotos h2{border-top:1px solid var(--tinta);padding-top:12px;margin-bottom:12px}
@media (hover:hover){.jp-perf-dica{display:none}}
@media (max-width:860px){
  .jp-trilho{gap:12px}
  .jp-quadro{flex-basis:85%}
  .jp-canal{flex-basis:60%}
  .jp-q-txt b{font-size:19px}
  .jp-q-leg{left:14px;right:14px;bottom:12px}
  .jp-q-leg i{font-size:40px}
  .jp-q-play{width:48px;height:48px;right:12px;top:12px}
  .jp-perf-yt{margin-left:0}
  .jp-canal b{font-size:28px}
}