/* ══════════════════════════════════════════════════════════════════════════════
   GRUPO AGENCY — direção de arte
   ──────────────────────────────────────────────────────────────────────────────
   DUAS COISAS SEPARADAS, e foi assim que se chegou aqui:

   1) A IDENTIDADE (cor + tipografia) é a aprovada: fundo #07070A, cards #111116,
      gradiente violeta→magenta→ciano e Sora + Inter. Uma tentativa de trocar por
      serifa e vermelho foi descartada — não era o problema.

   2) O que fazia a página parecer gerada era a ESTRUTURA, não a paleta: toda
      seção na mesma fôrma (rótulo → título → lead → grade de cards idênticos),
      repetida oito vezes. Isso sim foi refeito, e é o que ficou:
        · o que a agência recebe → lista editorial numerada, não 8 cards iguais;
        · o comparativo → <table> de verdade, com semântica e rolagem própria;
        · a remuneração → símbolo dominante ao lado do texto (sem número fechado:
          percentual em página pública vira promessa);
        · LIVE/Shop → dupla dividida; cartão só onde cartão faz sentido.

   O gradiente aparece em POUCOS lugares de propósito — botão principal, ênfase
   do título, o número e o filete. Espalhado, ele volta a ser template.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  --tinta:#07070A;
  --tinta-2:#0C0C11;
  --tinta-3:#111116;
  --papel:#FFFFFF;
  --papel-2:#A1A1AA;
  --papel-3:#71717A;

  /* acento: o gradiente da marca. Usado com PARCIMÔNIA — filete, número e um
     botão. Espalhado, ele é justamente o que fazia a página parecer template. */
  --violeta:#7C5CFF;
  --magenta:#E24BC8;
  --ciano:#3BC9F0;
  --live:#7C5CFF;
  --live-fosco:#6A4CE0;
  --grad:linear-gradient(100deg,var(--violeta) 0%,var(--magenta) 55%,var(--ciano) 100%);

  --linha:rgba(255,255,255,.09);
  --linha-forte:rgba(255,255,255,.18);

  --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --corpo:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s6:1.5rem;
  --s8:2rem; --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem;
  --max:1240px; --topo:70px;
}

*{box-sizing:border-box}
*{min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 16px);
  overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--tinta);color:var(--papel-2);
  font-family:var(--corpo);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%;position:relative;
}
/* grão: tira o aspecto de render limpo demais */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:1}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--live);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev{opacity:1!important;transform:none!important}
}
.env{width:min(100% - 2.5rem,var(--max));margin-inline:auto}

/* ── tipografia ─────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--papel);margin:0;
  letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.045em}
h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-.04em}
h3{font-family:var(--corpo);font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
  line-height:1.3;color:var(--papel)}
/* a ênfase vira o gradiente da marca — é o único lugar do texto onde ele aparece */
h1 em,h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
p{margin:0}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.6;max-width:56ch;color:var(--papel-2)}
.mini{font-size:.94rem;line-height:1.62;color:var(--papel-3)}

/* rótulo: número + texto, no lugar do "olho" genérico */
.eixo{display:flex;align-items:baseline;gap:.9rem;margin-bottom:var(--s8);
  border-top:1px solid var(--linha);padding-top:var(--s3)}
.eixo b{font-family:var(--corpo);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--live);font-variant-numeric:tabular-nums}
.eixo span{font-family:var(--corpo);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papel-3)}

.live-ponto{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--corpo);
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--papel)}
.live-ponto::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);
  animation:bate 2.4s ease-in-out infinite}
@keyframes bate{0%,100%{opacity:1}50%{opacity:.25}}

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:600;font-size:.94rem;letter-spacing:-.005em;
  padding:.88rem 1.5rem;border:1px solid transparent;cursor:pointer;border-radius:10px;
  transition:background .18s,color .18s,border-color .18s}
.btn-1{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 24px rgba(124,92,255,.22)}
.btn-1:hover{filter:brightness(1.12)}
.btn-2{background:transparent;color:var(--papel);border-color:var(--linha-forte)}
.btn-2:hover{border-color:var(--papel);background:rgba(250,249,247,.05)}
.btn-3{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.btn-3:hover{background:#E8E5DF}
.btn-g{padding:1.05rem 2rem;font-size:1rem}
.btn svg{width:17px;height:17px;flex-shrink:0}
.acoes{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s8)}

/* ── cabeçalho ──────────────────────────────────────────────────────────── */
header.topo{position:sticky;top:0;z-index:80;height:var(--topo);display:flex;align-items:center;
  background:rgba(10,10,11,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
/* ⚠️ sem `width:100%` aqui: o .barra também é .env, e o 100% sobrescrevia a
   largura contida do .env — o cabeçalho colava nas duas bordas da tela. */
.barra{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.marca{display:flex;align-items:baseline;gap:.5rem;flex-shrink:0}
.marca b{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--papel);
  letter-spacing:-.02em}
.marca i{font-style:normal;font-family:var(--display);font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.menu{display:none;gap:1.6rem}
nav.menu a{font-size:.86rem;color:var(--papel-2);transition:color .16s;padding-block:.2rem;
  border-bottom:1px solid transparent}
nav.menu a:hover{color:var(--papel)}
nav.menu a[aria-current="page"]{color:var(--papel);border-bottom-color:var(--live)}
.topo-acoes{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.topo-acoes .btn{padding:.55rem 1.05rem;font-size:.83rem}
@media(min-width:1080px){nav.menu{display:flex}}
.menu-btn{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;padding:0;
  background:rgba(255,255,255,.04);border:1px solid var(--linha-forte);border-radius:10px;
  color:var(--papel);cursor:pointer}
.menu-btn:hover{border-color:var(--papel)}
.menu-btn svg{width:19px;height:19px}
@media(min-width:1080px){.menu-btn{display:none}}
@media(max-width:620px){
  .topo-acoes .btn{padding:.5rem .8rem;font-size:.76rem}
  .marca b{font-size:1.15rem}
  .marca i{font-size:.55rem}
}
.gaveta{display:none;position:fixed;left:0;right:0;top:var(--topo);z-index:79;
  background:var(--tinta);border-bottom:1px solid var(--linha);padding:var(--s2) 0 var(--s8);
  max-height:calc(100dvh - var(--topo));overflow-y:auto}
.gaveta.aberta{display:block}
.gaveta a{display:block;padding:.9rem 0;font-family:var(--display);font-weight:500;font-size:1.1rem;
  color:var(--papel);border-bottom:1px solid var(--linha)}
.gaveta .btn{margin-top:var(--s6);width:100%}
@media(min-width:1080px){.gaveta{display:none!important}}

/* ── seções ─────────────────────────────────────────────────────────────── */
section{padding-block:clamp(4rem,8vw,var(--s24))}
.faixa{background:var(--tinta-2);border-block:1px solid var(--linha)}

/* ── hero: assimétrico, tipografia dominante ────────────────────────────── */
.hero{padding-block:clamp(2.5rem,4.5vw,4rem) clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.hero-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s6);border-bottom:1px solid var(--linha);margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.hero-topo .mini{font-size:.78rem;letter-spacing:.02em;max-width:30ch;text-align:right}
.hero h1{color:var(--papel)}
.hero h1 .risco{position:relative;white-space:nowrap}
.hero h1 .risco::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:3px;
  background:var(--grad);border-radius:2px}
/* `start` e não `end`: com a rede sendo alta, o alinhamento pela base empurrava o
   texto e os botões para baixo da primeira dobra no desktop — a página abria com um
   vazio enorme e o CTA fora de vista. */
.hero-baixo{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem);
  align-items:start}
@media(min-width:900px){.hero-baixo{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero-num{display:flex;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;margin-top:var(--s12);
  padding-top:var(--s6);border-top:1px solid var(--linha)}
.hero-num div b{display:block;font-family:var(--display);font-size:clamp(1.8rem,3.5vw,2.6rem);
  color:var(--papel);line-height:1}
.hero-num div span{display:block;margin-top:.25rem;font-size:.78rem;color:var(--papel-3);
  letter-spacing:.04em}

/* ── constelação (a figura da marca) ────────────────────────────────────── */
.rede{width:100%;max-width:430px;margin-inline:auto}
.rede svg{width:100%;height:auto;overflow:visible}
.rede .fio{stroke:var(--linha-forte);stroke-width:1;fill:none}
.rede .no{fill:var(--tinta-3);stroke:var(--linha-forte);stroke-width:1}
.rede .no-txt{font-family:"DM Sans",sans-serif;font-size:9px;font-weight:500;fill:var(--papel-2);
  letter-spacing:.06em}
.rede .centro-txt{font-family:"Sora",sans-serif;font-weight:700;font-size:13px;fill:var(--papel);letter-spacing:.04em}
.rede .creator{fill:var(--violeta);opacity:.6}
.rede .pisca{animation:bate 3s ease-in-out infinite}

/* ── lista editorial (no lugar da grade de cards) ───────────────────────── */
.lista{border-top:1px solid var(--linha)}
.linha{display:grid;gap:var(--s3);padding-block:clamp(1.6rem,3vw,2.2rem);
  border-bottom:1px solid var(--linha);align-items:start}
@media(min-width:760px){.linha{grid-template-columns:5rem 1fr 1.35fr;gap:var(--s6)}}
.linha .idx{font-family:var(--corpo);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  color:var(--live);padding-top:.35rem;font-variant-numeric:tabular-nums}
.linha h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.9vw,1.32rem);
  line-height:1.25;letter-spacing:-.02em}
.linha p{font-size:.97rem;line-height:1.62;color:var(--papel-2)}
.linha:hover .idx{color:var(--papel)}

/* ── número gigante ─────────────────────────────────────────────────────── */
.grande{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.grande{grid-template-columns:.9fr 1.1fr}}
.grande .cifra{font-family:var(--display);font-weight:800;line-height:.8;
  font-size:clamp(7rem,18vw,13rem);letter-spacing:-.06em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grande .cifra sup{font-size:.28em;vertical-align:super;letter-spacing:0}
.aviso{border-left:2px solid var(--live);padding:var(--s3) 0 var(--s3) var(--s4);
  font-size:.9rem;line-height:1.6;color:var(--papel-3);margin-top:var(--s8)}

/* ── tabela comparativa ─────────────────────────────────────────────────── */
.tab{width:100%;border-collapse:collapse;font-size:.93rem}
.tab th{font-family:var(--corpo);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papel-3);text-align:left;padding:0 var(--s4) var(--s4);
  border-bottom:1px solid var(--linha-forte)}
.tab th.mid,.tab td.mid{text-align:center;width:8rem}
.tab th:first-child{padding-left:0}
.tab td{padding:.85rem var(--s4);border-bottom:1px solid var(--linha);color:var(--papel)}
.tab td:first-child{padding-left:0;font-weight:500}
.tab td.mid{color:var(--papel-3)}
.tab td.sim{color:var(--live);font-weight:600}
.tab tr:hover td{background:rgba(250,249,247,.02)}
.tab-env{overflow-x:auto}
@media(max-width:640px){.tab th.mid,.tab td.mid{width:5rem;font-size:.85rem}}

/* ── passos ─────────────────────────────────────────────────────────────── */
.passos{display:grid;gap:0;border-top:1px solid var(--linha)}
@media(min-width:820px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{padding:var(--s8) var(--s6) var(--s8) 0;border-bottom:1px solid var(--linha)}
@media(min-width:820px){
  .passo{border-right:1px solid var(--linha);padding-left:var(--s6)}
  .passo:first-child{padding-left:0}
  .passo:nth-child(3n){border-right:0}
  .passo:nth-child(3n+1){padding-left:0}
}
.passo b{display:block;font-family:var(--corpo);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;color:var(--live);margin-bottom:var(--s4);font-variant-numeric:tabular-nums}
.passo h3{font-family:var(--display);font-weight:600;font-size:1.16rem;line-height:1.25;
  letter-spacing:-.02em;margin-bottom:var(--s3)}
.passo p{font-size:.94rem;color:var(--papel-2);line-height:1.6}

/* ── cartões (só onde card faz sentido) ─────────────────────────────────── */
.cartoes{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
@media(min-width:700px){.cartoes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cartoes{grid-template-columns:repeat(3,1fr)}}
.cartao{background:var(--tinta);padding:var(--s8) var(--s6);transition:background .2s}
.cartao:hover{background:var(--tinta-2)}
.cartao h3{font-family:var(--display);font-weight:600;font-size:1.14rem;line-height:1.25;
  letter-spacing:-.02em;margin-bottom:var(--s3)}
.cartao p{font-size:.94rem;color:var(--papel-2);line-height:1.6}

/* ── dupla LIVE / SHOP ──────────────────────────────────────────────────── */
.dupla{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
@media(min-width:860px){.dupla{grid-template-columns:1fr 1fr}}
.meia{background:var(--tinta);padding:clamp(2rem,4vw,3.5rem)}
.meia .live-ponto{margin-bottom:var(--s6)}
.meia h3{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.15;letter-spacing:-.03em;margin-bottom:var(--s4)}
.meia p{color:var(--papel-2);line-height:1.62}
.meia .btn{margin-top:var(--s8)}

/* ── painel (mockup) ────────────────────────────────────────────────────── */
.painel{border:1px solid var(--linha);background:var(--tinta-2)}
.painel-topo{display:flex;align-items:center;gap:.5rem;padding:.8rem var(--s4);
  border-bottom:1px solid var(--linha)}
.painel-topo i{width:7px;height:7px;border-radius:50%;background:var(--linha-forte);display:block}
.painel-topo span{margin-left:auto;font-size:.7rem;color:var(--papel-3);letter-spacing:.1em;
  text-transform:uppercase}
.painel-corpo{padding:clamp(1.2rem,3vw,var(--s8))}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linha);
  border:1px solid var(--linha);margin-bottom:var(--s6)}
@media(min-width:640px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--tinta-2);padding:var(--s6) var(--s4)}
.kpi b{display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--papel);line-height:1;
  font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:.3rem;font-size:.72rem;color:var(--papel-3)}
.kpi em{font-style:normal;font-size:.7rem;color:var(--live)}
.nota-mock{margin-top:var(--s4);font-size:.76rem;color:var(--papel-3)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--linha)}
details{border-bottom:1px solid var(--linha)}
summary{cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.5vw,1.12rem);
  letter-spacing:-.02em;color:var(--papel);line-height:1.35}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--corpo);font-size:1.3rem;color:var(--live);line-height:1;font-weight:300}
details[open] summary::after{content:"–"}
details .resp{padding:0 2.5rem 1.6rem 0;font-size:.98rem;line-height:1.68;max-width:66ch;
  color:var(--papel-2)}

/* ── formulário ─────────────────────────────────────────────────────────── */
.form{border:1px solid var(--linha);padding:clamp(1.5rem,4vw,var(--s16));background:var(--tinta-2)}
.campos{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:700px){.campos{grid-template-columns:repeat(2,1fr)}.campo-full{grid-column:1/-1}}
.campo label{display:block;font-size:.74rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--papel-3);margin-bottom:.5rem}
.campo input,.campo select,.campo textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--linha-forte);padding:.6rem 0;color:var(--papel);
  font-family:var(--corpo);font-size:1rem;transition:border-color .18s}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-bottom-color:var(--live);outline:none}
.campo textarea{min-height:90px;resize:vertical}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--papel-3) 50%),
  linear-gradient(135deg,var(--papel-3) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
.campo select option{background:var(--tinta-2);color:var(--papel)}
.form .btn{width:100%;margin-top:var(--s12)}
.form-nota{margin-top:var(--s4);font-size:.78rem;color:var(--papel-3);text-align:center}
.form-ok{display:none;text-align:center;padding:var(--s12) 0}
.form-ok.ver{display:block}
.form-ok h3{font-family:var(--display);font-weight:700;font-size:1.7rem;letter-spacing:-.03em;margin-bottom:var(--s3)}

/* ── fechamento ─────────────────────────────────────────────────────────── */
.fecho{padding-block:clamp(4rem,9vw,var(--s24));border-top:1px solid var(--linha)}
.fecho h2{max-width:16ch}
.fecho .lead{margin-top:var(--s6)}

/* ── rodapé ─────────────────────────────────────────────────────────────── */
footer.pe{border-top:1px solid var(--linha);padding-block:var(--s16) var(--s8);background:var(--tinta-2)}
.pe-grade{display:grid;gap:var(--s12);grid-template-columns:1fr}
@media(min-width:820px){.pe-grade{grid-template-columns:1.5fr repeat(3,1fr)}}
.pe-col h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--papel-3);
  margin:0 0 var(--s4);font-weight:600}
.pe-col a{display:block;padding:.28rem 0;font-size:.9rem;color:var(--papel-2);transition:color .16s}
.pe-col a:hover{color:var(--papel)}
.pe-sobre p{font-size:.9rem;margin-top:var(--s4);max-width:32ch;color:var(--papel-3)}
.pe-social{display:flex;gap:.5rem;margin-top:var(--s6)}
.pe-social a{width:36px;height:36px;border:1px solid var(--linha-forte);display:grid;
  place-items:center;color:var(--papel-2);transition:color .16s,border-color .16s}
.pe-social a:hover{color:var(--papel);border-color:var(--papel)}
.pe-social svg{width:16px;height:16px}
.pe-fim{margin-top:var(--s16);padding-top:var(--s6);border-top:1px solid var(--linha);
  font-size:.78rem;color:var(--papel-3);line-height:1.75}

/* ── whatsapp ───────────────────────────────────────────────────────────── */
.zap{position:fixed;right:1rem;bottom:1rem;z-index:90;width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .18s}
.zap:hover{transform:scale(1.06)}
.zap svg{width:27px;height:27px}
@media(min-width:760px){.zap{right:1.5rem;bottom:1.5rem;width:56px;height:56px}}

/* ── revelação ──────────────────────────────────────────────────────────── */
/* 🔴 A revelação só esconde se o JS estiver vivo para revelar. Sem esta trava, um
   erro no script deixa a PÁGINA INTEIRA em opacity:0 — foi o que aconteceu quando a
   classe foi renomeada e o observador ficou procurando o nome antigo. */
html.js .rev{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
html.js .rev.visivel{opacity:1;transform:none}

/* ── blog e páginas de texto ────────────────────────────────────────────── */
.post-lista{border-top:1px solid var(--linha)}
.post-item{display:grid;gap:var(--s3);padding-block:var(--s8);border-bottom:1px solid var(--linha)}
@media(min-width:760px){.post-item{grid-template-columns:7rem 1fr 1.1fr;gap:var(--s6);align-items:start}}
.post-item time{font-size:.75rem;color:var(--papel-3);letter-spacing:.06em;padding-top:.3rem}
.post-item h3{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.25rem);
  line-height:1.3;letter-spacing:-.02em}
.post-item p{font-size:.95rem;color:var(--papel-2)}
.post-item:hover h3{color:var(--live)}
.artigo{max-width:42rem}
.artigo h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:var(--s16);margin-bottom:var(--s4)}
.artigo p{margin-bottom:var(--s4);line-height:1.75;color:var(--papel-2)}
.artigo .lead{margin-bottom:var(--s12);color:var(--papel);font-size:1.2rem}
.legal{max-width:44rem}
.legal h2{font-size:1.5rem;margin-top:var(--s16);margin-bottom:var(--s4)}
.legal p,.legal li{font-size:.97rem;line-height:1.72;margin-bottom:var(--s4);color:var(--papel-2)}
.legal ul{padding-left:1.1rem}
.cabeca{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,var(--s16))}
.cabeca .lead{margin-top:var(--s6)}


/* ── modalidades de live (ilustração vetorial) ──────────────────────────── */
.modos{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
@media(min-width:820px){.modos{grid-template-columns:repeat(3,1fr)}}
.modo{background:var(--tinta);padding:var(--s8) var(--s6) var(--s12)}
.modo-arte{display:grid;place-items:center;margin-bottom:var(--s8);
  padding:var(--s6) 0;background:radial-gradient(24rem 14rem at 50% 40%,rgba(124,92,255,.09),transparent 70%)}
.modo-arte .ilu{width:100%;max-width:190px;height:auto}
.modo .live-ponto{margin-bottom:var(--s3)}
.modo h3{font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.02em;
  line-height:1.25;margin-bottom:var(--s3)}
.modo p{font-size:.94rem;color:var(--papel-2);line-height:1.6}

/* ── galeria de fotos reais (só aparece quando houver arquivo) ──────────── */
.galeria{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
@media(min-width:640px){.galeria{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.galeria{grid-template-columns:repeat(4,1fr)}}
.foto{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--tinta-2)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(7,7,10,.92));font-size:.8rem;color:var(--papel)}