/* Página nova (12/10). Só os assets de "Imagens GPT/Atuais": logo, 1 + 3, elo verde e amarelo, rostos, barras e caixa verde.
   Títulos em Montserrat (substituto livre da Gotham do guia da campanha, com acentos). Texto em Archivo.
   Cores tiradas do logo. Mobile-first: 320 a 1920, em pé e deitado. */
/* Fontes (13/10): recorte das variáveis de ../fonts só com latim e os eixos usados aqui (394 KB → 101 KB).
   Gerado com fontTools (instancer + subset); para refazer, partir dos originais em ../fonts. */
@font-face{font-family:Archivo;src:url(fontes/archivo.woff2) format('woff2');font-weight:400 900;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Titulo;src:url(fontes/titulo.woff2) format('woff2');font-weight:600 900;font-display:swap}

/* Raios (13/10): três valores. --raio-p para selo e miniatura, --raio para caixa e card, 999px só nas pílulas de compartilhar.
   O botão principal e as etiquetas não têm raio: usam o canto cortado das caixas da campanha. */
:root{--azul:#0039bc;--vermelho:#f32b23;--vermelho-t:#d6060b;--amarelo:#ffd400;--verde:#00b923;--zap:#25d366;--tinta:#111;--tinta-2:#444;--sobre-escuro:#ddd;--cinza:#f4f4f2;--linha:rgba(17,17,17,.12);
  --raio-p:4px;--raio:8px;--corte:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  --topo:68px;--margem:clamp(16px,4vw,48px);--largura:1320px;--tit:Titulo,Montserrat,'Arial Black',sans-serif;--texto:Archivo,system-ui,sans-serif}
@media (max-width:760px){:root{--topo:58px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--tinta);font-family:var(--texto);font-stretch:92%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
/* hidden sempre esconde, mesmo em elemento que define o próprio display (botões, cartões) */
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:4px}
.pular{position:absolute;left:-999px;top:8px;z-index:50;padding:10px 14px;background:var(--tinta);color:#fff}
.pular:focus{left:8px}

/* Topo */
.topo{position:sticky;top:0;z-index:20;height:var(--topo)}
.topo-in{position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);height:100%;max-width:calc(var(--largura) + 2 * var(--margem));margin:0 auto;padding:0 var(--margem);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.topo-in::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:var(--raio);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 8px 26px rgba(17,17,17,.1);opacity:0;transition:opacity .3s ease}
.topo.rolou .topo-in{transform:translateY(5px) scale(.94)}
.topo.rolou .topo-in::before{opacity:1}
.topo-marca{display:flex;align-items:center;gap:.35em;flex:none;min-height:44px;text-decoration:none;font:900 calc(var(--topo) * .22)/.95 var(--tit);text-transform:uppercase;letter-spacing:-.02em}
.topo-marca img{width:auto;height:1.25em;rotate:-62deg;margin:0 -.1em}
.topo-lula{height:calc(var(--topo) - 24px);width:auto}
.topo-nav{display:none;gap:clamp(14px,1.6vw,28px);margin-left:auto}
.topo-nav a{display:inline-flex;align-items:center;min-height:44px;font:700 15px/1 var(--texto);font-stretch:88%;text-decoration:none;background:linear-gradient(var(--vermelho),var(--vermelho)) left 75%/0 3px no-repeat;transition:background-size .2s ease}
.topo-nav a:hover{background-size:100% 3px}
.topo-conta{flex:none;margin:0 0 0 auto;font:600 12px/1.1 var(--texto);color:var(--tinta-2);text-align:right;white-space:nowrap}
.topo-conta b{display:block;margin-top:2px;color:var(--tinta);font:900 17px/1 var(--tit);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* Mesmo canto cortado do botão principal (13/10), no lugar do retângulo arredondado */
.topo-btn{position:relative;isolation:isolate;display:none;flex:none;align-items:center;min-height:44px;padding:0 14px;color:#fff;font:900 14px/1 var(--tit);text-transform:uppercase;text-decoration:none;white-space:nowrap;filter:drop-shadow(3px 4px 0 var(--tinta))}
.topo-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--vermelho);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.topo.mostra-btn .topo-btn{display:inline-flex}
.topo-btn span{margin-right:.3em} /* o espaço dentro do span some quando ele vira item flex (13/10) */
@media (max-width:560px){.topo.mostra-btn .topo-conta,.topo.mostra-btn .topo-lula{display:none}}
@media (max-width:560px){.topo-btn{flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;font-size:12.5px;line-height:1.05}.topo-btn span{font-size:12px;color:#fff;opacity:.92}} /* 13/10: "Tô com Lula:" em cima, para caber no celular */
@media (max-width:379.98px){.topo-lula{display:none}.topo-btn{padding:0 9px;font-size:12.5px}.topo-in{gap:8px}}
@media (min-width:561px){.topo-btn{display:inline-flex}}
@media (min-width:1180px){.topo-nav{display:flex}.topo-conta{margin-left:0}}
@media (prefers-reduced-motion:reduce){.topo-in,.topo-in::before{transition:none}}

/* Botões */
.btn-vermelho{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:.5em .7em .46em;color:#fff;font:900 clamp(20px,2vw,28px)/1 var(--tit);letter-spacing:-.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap;filter:drop-shadow(.12em .15em 0 var(--tinta));transition:translate .15s ease,filter .15s ease}
/* Mesmo formato das caixas da campanha (e da etiqueta): reto, cantos cortados em cima à direita e embaixo à esquerda */
.btn-vermelho::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--vermelho);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
@media (hover:hover){.btn-vermelho:hover{translate:0 -2px;filter:drop-shadow(.15em .19em 0 var(--tinta))}}
.btn-vermelho:active{translate:.06em .08em;filter:drop-shadow(.05em .05em 0 var(--tinta))}
.btn-zap,.btn-insta,.btn-linha{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 1.15em;border-radius:999px;font:800 1rem/1 var(--texto);font-stretch:86%;text-decoration:none;cursor:pointer}
.btn-zap{background:var(--zap);color:var(--tinta);border:2.5px solid var(--tinta)}
.btn-insta{background:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 55%,#962fbf 80%,#4f5bd5);color:#fff;border:2.5px solid var(--tinta);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.btn-linha{background:transparent;color:#fff;border:2.5px solid #fff}
.btn-linha.escuro{color:var(--tinta);border-color:var(--tinta);background:#fff}
.mini{min-height:44px;padding:0 .9em;font-size:.92rem}
.btn-insta.icone{width:48px;min-height:48px;padding:0}
.btn-insta.icone svg{width:24px;height:24px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.acoes .fx-status{flex-basis:100%;min-height:1.2em;margin:0;font-weight:700;font-size:.92rem}
.acoes .fx-status:empty{display:none}
.acoes .fx-manual{flex-basis:100%;width:100%;font:inherit}
.aviso{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:min(520px,calc(100% - 32px));margin:0;padding:14px 18px;translate:-50% calc(100% + 60px);visibility:hidden;border-radius:var(--raio);background:var(--tinta);color:#fff;font:700 15px/1.35 var(--texto);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:translate .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
.aviso.ver{translate:-50% 0;visibility:visible;transition:translate .35s cubic-bezier(.22,1,.36,1),visibility 0s}
@media (prefers-reduced-motion:reduce){.aviso{transition:none}}

/* Máscara "Mande para mais 3 pessoas" sobre peças e fotos */
.mascara{position:absolute;left:0;right:0;bottom:0;padding:.55em .5em .5em;background:var(--vermelho);color:#fff;font:900 clamp(11px,1.05vw,14px)/1 var(--tit);text-transform:uppercase;text-align:center;letter-spacing:-.01em;border-top:3px solid var(--tinta)}

/* Hero */
.hero{transform-origin:50% 0;display:grid;grid-template-columns:1fr;justify-items:center;row-gap:clamp(16px,4vw,28px);max-width:calc(var(--largura) + 2 * var(--margem));margin:0 auto;padding:clamp(8px,3vw,24px) var(--margem) clamp(36px,7vw,64px)}
.hero-logo{margin:0;width:min(560px,100%);line-height:0}
.hero-logo img{width:100%;height:auto}
.hero-chamada{margin:0 0 -.4em;font:900 clamp(18px,1.6vw,22px)/1.1 var(--tit);letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance} /* 13/10: chamada logo acima do botão */
.hero-chamada :is(.chamada-lula,.chamada-ponto){text-shadow:.06em .07em 0 #000}.chamada-lula{color:#ffd52b}.chamada-ponto{color:var(--vermelho)} /* 13/10, Thiago: Lula em amarelo e ! em vermelho, com sombra preta */
.hero-acao{display:grid;justify-items:center;--vao-hero:clamp(18px,1.8vw,24px);gap:var(--vao-hero);width:min(440px,100%);text-align:center}
/* Etiqueta reta com os cantos cortados das caixas do Lula (em cima à direita e embaixo à esquerda).
   O recorte fica no ::before para a sombra (filter) acompanhar o formato. */
.hero-tag{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;padding:.3em .95em .26em;color:#fff;font:900 clamp(16px,1.3vw,19px)/1 var(--tit);text-transform:uppercase;text-decoration:none;filter:drop-shadow(4px 4px 0 var(--vermelho))}
.hero-tag::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--tinta);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.hero-tag:hover{filter:drop-shadow(4px 4px 0 var(--tinta))}
.hero-tag:hover::before{background:var(--vermelho-t)}
.hero-frase{margin:0;font:900 clamp(28px,2.6vw,38px)/1.02 var(--tit);letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.hero-frase em{display:block;font-size:1.08em;font-style:normal;color:var(--vermelho-t)}
.hero-denuncia,.hero-convite{margin:0;font:500 clamp(16px,1.25vw,20px)/1.42 var(--texto);font-stretch:90%;text-wrap:pretty}
/* 14/10, Thiago: o convite vira subtítulo da frase, com mais peso e colado nela; a denúncia fica colada na etiqueta.
   Assim a coluna lê em 4 blocos (censura, frase, placar, chamada) em vez de 7 itens com o mesmo vão. */
.hero-acao>.hero-convite{margin-top:calc(var(--vao-hero) * -.55);font-weight:700;color:var(--tinta);text-wrap:balance}
.hero-acao>.hero-denuncia{margin-top:calc(var(--vao-hero) * -.35)}
.sem-quebra{white-space:nowrap}
/* Dupla card de exemplo + placar: o que você recebe ao lado de quantos já somos */
.hero-duo{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:24px;margin:0;padding-block:10px}
.hero-card{margin:0;width:clamp(100px,33vw,148px);line-height:0}
.hero-card img{display:block;width:100%;height:auto;aspect-ratio:1080/1350;border-radius:var(--raio-p);background:var(--cinza);box-shadow:0 0 0 2px var(--tinta),4px 5px 0 var(--tinta);rotate:-4deg}
.placar{--n:3;position:relative;isolation:isolate;display:grid;place-items:center;--pw:min(200px,calc((67vw - 2 * var(--margem) - 24px) / 1.22));width:var(--pw);margin:18px calc(var(--pw) * .22) 18px 0;aspect-ratio:900/593} /* --pw: largura da placa; a margem guarda o elo que sai 22% para fora */
.placar::before,.placar::after{content:'';position:absolute;inset:0;clip-path:polygon(0 0,calc(100% - 14%) 0,100% 22%,100% 100%,14% 100%,0 78%)} /* 13/10: placa reta, em CSS, com o canto cortado dos botões */
.placar::before{z-index:-1;background:var(--azul)}
.placar::after{z-index:-2;background:var(--tinta);translate:4px 5px} /* sombra dura, fora do recorte */
.placar-tag{position:absolute;left:44%;z-index:1;isolation:isolate;padding:.22em .55em .18em;filter:drop-shadow(2px 2px 0 var(--tinta));font:900 clamp(16px,1.5vw,23px)/1 var(--tit);text-transform:uppercase;white-space:nowrap}
.placar-tag{--fundo-tag:var(--verde)}
.placar-tag::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fundo-tag);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))} /* canto cortado como o resto; a sombra vem do filter do pai */
.placar-tag{top:0;translate:-50% -55%;color:#fff;text-shadow:.05em .06em 0 #000}
/* --n (dígitos) vem da placa, gravado pelo nova.js; declarar aqui de novo travava a fonte em 3 dígitos */
.placar-num{padding-right:12%;color:#fff;font:900 min(56px,calc(240px / (var(--n) * 1.2)))/1 var(--tit);letter-spacing:-.03em;text-shadow:.04em .05em 0 #000;font-variant-numeric:tabular-nums}
/* Elo em pé do lado de fora da borda direita, entrando pouco na placa (referência do Thiago, 13/10) */
.placar-elo{position:absolute;right:-22%;top:50%;width:44%;height:auto;translate:0 -50%;rotate:-78deg}

@media (min-width:900px) and (orientation:landscape),(min-width:1101px){
  .hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(28px,4vw,64px);min-height:calc(100svh - var(--topo));padding-top:0;padding-bottom:var(--margem)}
  .hero-logo{width:min(1000px,100%,calc((100svh - var(--topo) - 40px) / .442))}
  .hero-acao{width:min(460px,34vw)}
  .hero-frase{font-size:clamp(26px,2.3vw,36px)}
  .hero-duo{justify-content:start;column-gap:26px}
  .hero-card{width:clamp(148px,12vw,180px)}
  .placar{--pw:min(245px,17.4vw)}
  .placar-num{padding-right:4%;font-size:min(72px,5vw,calc(370px / (var(--n) * 1.25)))}
}
/* Desktop baixo (1024 × 768): a dupla card + placar aperta para o botão ficar na 1ª tela */
@media (min-width:900px) and (max-height:800px) and (orientation:landscape){.hero-card{width:136px}.hero-acao{--vao-hero:16px}.placar{--pw:min(178px,17.4vw)}}
/* Celular deitado: logo + duas colunas de conteúdo. Texto à esquerda (etiqueta, denúncia, virada);
   card e placar em cima do botão à direita. Tudo visível, com pouco zoom.
   (13/10: tirada a chave sobrando que anulava a regra de animação logo abaixo.) */
@media (max-height:520px) and (orientation:landscape){
  .hero{grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);align-items:center;column-gap:20px;min-height:calc(100svh - var(--topo));padding-top:0;padding-bottom:8px}
  .hero-logo{width:100%}
  .hero-acao{width:100%;grid-template-rows:repeat(4,auto);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);--vao-hero:8px;gap:8px 18px;align-items:center}
  .hero-tag{grid-area:1/1;font-size:14px;min-height:36px}
  .hero-denuncia{grid-area:2/1;font-size:14px;line-height:1.32}
  .hero-frase{grid-area:3/1;font-size:19px}
  .hero-convite{grid-area:4/1;font-size:14px;line-height:1.32}
  .hero-duo{grid-area:1/2/3/3;column-gap:18px}
  .hero-chamada{grid-area:3/2;font-size:15px}
  .hero-btn{grid-area:4/2}
  .hero-card{width:78px}
  .placar{--pw:104px;margin-block:12px}
  .placar-tag{font-size:13px}
  .placar-num{padding-right:8%;font-size:min(28px,calc(126px / (var(--n) * 1.2)))}
  .btn-vermelho{min-height:44px;font-size:16px}
}

@media (prefers-reduced-motion:no-preference){
  .hero-logo img{animation:sobe .6s cubic-bezier(.22,1,.36,1) both}
  .hero-acao>*{animation:sobe .5s cubic-bezier(.22,1,.36,1) both}
  .hero-acao>:nth-child(2){animation-delay:.06s}.hero-acao>:nth-child(3){animation-delay:.12s}.hero-acao>:nth-child(4){animation-delay:.18s}.hero-acao>:nth-child(n+5){animation-delay:.24s}
}
@keyframes sobe{from{opacity:0;translate:0 14px}}

/* Blocos com título em barra */
/* minmax(0,1fr): a coluna nunca cresce com o conteúdo (a fileira de posts rola dentro dela) */
.bloco{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;max-width:calc(var(--largura) + 2 * var(--margem));margin:0 auto;padding:min(clamp(56px,7vw,96px),9svh) var(--margem) 0}
/* Divisor entre seções: o elo verde e amarelo no centro, entre duas linhas finas */
/* Títulos de seção: caixa reta com os cantos cortados das caixas da campanha (13/10), no lugar da barra inclinada esticada */
.titulo-barra{position:relative;isolation:isolate;margin:0;padding:.62em 1.35em .58em;text-align:center;color:#fff;font:900 clamp(22px,3.4vw,44px)/1.05 var(--tit);letter-spacing:-.025em;text-transform:uppercase;text-shadow:.04em .06em 0 var(--tinta);filter:drop-shadow(5px 5px 0 var(--tinta))}
.titulo-barra::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--cor-barra,var(--vermelho));clip-path:polygon(0 0,calc(100% - .55em) 0,100% .55em,100% 100%,.55em 100%,0 calc(100% - .55em))}
.barra-vermelha{--cor-barra:var(--vermelho)}
.barra-verde{--cor-barra:var(--verde)}
/* Título longo ("Compartilhe uma notícia boa") quebra em duas linhas em vez de passar da tela */
@media (max-width:480px){.titulo-barra{text-wrap:balance;padding:.85em .95em .8em;font-size:clamp(15px,5.3vw,24px)}}
.bloco-sub{max-width:42ch;margin:0;text-align:center;font:600 clamp(16px,1.5vw,19px)/1.38 var(--texto);font-stretch:90%}
.bloco-pe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;margin-top:6px}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--vermelho-t);font:800 16px/1 var(--texto);font-stretch:88%}
.estado{min-height:1.2em;margin:0;font:600 15px/1.3 var(--texto);color:var(--tinta-2);text-align:center}
.estado:empty{display:none}
.credito{max-width:60ch;margin:0;font:500 14px/1.45 var(--texto);color:var(--tinta-2);text-align:center}
/* Filtros do "Pronto para compartilhar" (13/10): formato numa pílula dupla e temas numa faixa só, que rola
   para o lado quando não cabe. As margens automáticas centralizam a faixa quando ela cabe inteira. */
.filtros{display:grid;justify-items:center;gap:14px;width:100%;margin-top:4px}
.abas{display:inline-flex;gap:4px;padding:4px;border:2.5px solid var(--tinta);border-radius:999px;background:#fff}
.abas button{min-height:44px;padding:0 1.5em;border:0;border-radius:999px;background:transparent;color:var(--tinta);font:800 15px/1 var(--texto);font-stretch:88%;cursor:pointer;transition:background .15s ease,color .15s ease}
.abas button[aria-pressed=true]{background:var(--tinta);color:#fff}
.temas{display:flex;gap:8px;width:calc(100% + 2 * var(--margem));margin-inline:calc(-1 * var(--margem));padding:2px var(--margem) 6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--margem),#000 calc(100% - var(--margem)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--margem),#000 calc(100% - var(--margem)),transparent)}
.temas::-webkit-scrollbar{display:none}
.temas button:first-child{margin-left:auto}
.temas button:last-child{margin-right:auto}
.temas button{flex:none;min-height:44px;padding:0 1.05em;border:2px solid var(--linha);border-radius:999px;background:#fff;color:var(--tinta);font:700 15px/1 var(--texto);font-stretch:88%;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,background .15s ease}
@media (hover:hover){.temas button:hover{border-color:var(--tinta)}}
.temas button[aria-pressed=true]{border-color:var(--tinta);background:var(--amarelo)}
/* 14/10 (3ª revisão): do iPad para cima os filtros quebram linha; rolando de lado, sem barra nem seta, o último sumia para quem usa mouse. No celular seguem deslizando. */
@media (min-width:700px){.temas{flex-wrap:wrap;justify-content:center;width:auto;margin-inline:0;padding-inline:0;overflow:visible;-webkit-mask-image:none;mask-image:none}.temas button:first-child,.temas button:last-child{margin:0}}

/* Título em caixa (13/10): o mesmo da versão anterior (home.css, regra dos títulos .t9s com --pl-forma).
   Caixa da campanha quase reta, só com os cantos de cima à direita e de baixo à esquerda chanfrados; letra amarela
   condensada e pesada com sombra preta; detalhe vermelho no fim. Alterna verde e azul entre as seções.
   Fonte: Archivo 900 a 75% de largura (a reserva que o CSS antigo já indicava). A Transducer da versão anterior
   é versão de teste, sem acentos nem "!" e "?". */
/* Polimento (13/10): cantos em em, não em %. Em %, a caixa larga ("Mostre para todos...") inclinava muito mais que a curta;
   em em, toda caixa tem o mesmo ângulo. Medidas tiradas de "Como convidar" em 72 px, que fica igual. */
.titulo-caixa{width:fit-content;max-width:100%;margin:0;padding:.2em .42em .16em;text-align:center;background:var(--cor-caixa,var(--azul));clip-path:polygon(.12em .12em,calc(100% - .38em) 0,100% .2em,calc(100% - .14em) calc(100% - .12em),.38em 100%,0 calc(100% - .2em));color:#ffd52b;font:900 clamp(30px,5.4vw,72px)/1 var(--texto);font-stretch:75%;letter-spacing:0;text-transform:uppercase;text-wrap:balance;text-shadow:.05em .055em 0 #000}
.titulo-caixa .ponto{color:var(--vermelho)}
.caixa-azul{--cor-caixa:#0039bc}
.caixa-verde{--cor-caixa:#2fb234}
@media (max-width:759.98px){.titulo-caixa{font-size:clamp(28px,9.4vw,44px);line-height:1.04}}

/* Título de texto (13/10), no lugar da barra: mesma voz da frase do hero, sem caixa em volta */
.titulo-texto{max-width:24ch;margin:0;text-align:center;font:900 clamp(24px,3.4vw,44px)/1.05 var(--tit);letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.titulo-texto em{font-style:normal;color:var(--vermelho-t)}

/* Mostre para todos: o status do WhatsApp (arte 9:16 num celular) ao lado dos três passos e do botão.
   A seção ocupa a altura da tela (menos o topo): o título fica em cima e o resto do espaço vai para o conteúdo,
   repartido por igual (space-evenly). Celular, passos e vãos acompanham a altura (svh). Tela baixa demais:
   o encaixe do nova.js reduz. */
.seu-elo{min-height:calc(100svh - var(--topo));grid-template-rows:auto minmax(0,1fr);align-content:stretch;row-gap:clamp(16px,3svh,32px);padding-block:clamp(20px,4svh,48px)}
.seu-elo-in{display:grid;align-content:space-evenly;align-items:center;gap:clamp(20px,4svh,56px) clamp(20px,4vw,64px);width:min(1040px,100%);height:100%}
/* Celular: moldura escura com cantos de aparelho (único raio fora dos tokens: é o formato do telefone) */
.seu-elo-arte{--fone:min(320px,90%,calc((100svh - var(--topo) - 280px) * 9 / 16));margin:0;justify-self:center;width:var(--fone);padding:max(5px,2.2%);border-radius:calc(var(--fone) * .11);background:var(--tinta);box-shadow:6px 8px 0 var(--vermelho);rotate:-2deg}
.status-tela{position:relative;overflow:hidden;aspect-ratio:9/16;border-radius:calc(var(--fone) * .09);background:#fff;container-type:inline-size}
.status-tela>img{display:block;width:100%;height:100%;object-fit:cover}
/* Barras do status, desenhadas por cima da arte em medidas relativas à tela (cqw) */
.status-topo{position:absolute;inset:0 0 auto;display:grid;gap:3.5cqw;padding:4cqw 4.5cqw 12cqw;background:linear-gradient(rgba(0,0,0,.6),transparent);color:#fff}
.status-progresso{height:max(2px,1.1cqw);border-radius:999px;background:rgba(255,255,255,.45);overflow:hidden}
.status-progresso i{display:block;width:30%;height:100%;background:#fff}
.status-quem{display:flex;align-items:center;gap:3cqw;font:700 6.2cqw/1 var(--texto)}
.status-quem img{width:11cqw;height:11cqw;border-radius:50%;object-fit:cover;background:var(--cinza);box-shadow:0 0 0 .7cqw #fff}
.status-quem small{font:500 5cqw/1 var(--texto);opacity:.85}
.status-base{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2.5cqw;padding:14cqw 4cqw 5cqw;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff}
.status-responder{grid-area:1/1;display:flex;align-items:center;min-height:11cqw;padding:0 4.5cqw;border-radius:999px;background:rgba(38,38,38,.82);font:500 5cqw/1 var(--texto)}
.status-reacoes{grid-area:1/1;justify-self:end;padding-right:3.5cqw;font-size:5cqw;letter-spacing:.3cqw;white-space:nowrap}
.status-icone{display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;background:rgba(38,38,38,.82)}
.status-icone svg{width:5.6cqw;height:5.6cqw}
/* Passos crescem com a altura da tela (svh), para acompanhar o celular */
.seu-elo-passos{display:grid;gap:clamp(22px,4svh,40px);justify-items:start}
.passos{display:grid;gap:clamp(18px,3.4svh,34px);margin:0;padding:0;list-style:none}
.passos li{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.8svh,20px);align-items:start}
.passos b{display:grid;place-items:center;width:clamp(48px,6svh,60px);height:clamp(48px,6svh,60px);background:var(--amarelo);color:var(--tinta);font:900 clamp(24px,3svh,30px)/1 var(--tit);clip-path:polygon(0 12%,88% 0,100% 14%,100% 88%,12% 100%,0 86%);filter:drop-shadow(3px 3px 0 var(--vermelho))}
.passos h3{margin:2px 0 4px;font:900 min(clamp(19px,1.8vw,30px),3.2svh)/1.1 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.passos p{margin:0;font:500 clamp(16px,2.1svh,20px)/1.4 var(--texto)}
.seu-elo-passos .btn-vermelho{width:min(380px,100%)}
@media (min-width:760px){.seu-elo-in{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
/* Celular (13/10): status à esquerda e passos à direita, os passos espalhados na altura do celular;
   o botão ocupa a largura toda embaixo. display:contents solta a lista e o botão na grade da seção. */
@media (max-width:759.98px){
  .seu-elo-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,5svh,48px) 16px}
  .seu-elo-passos{display:contents}
  .seu-elo-arte{--fone:min(100%,calc((100svh - var(--topo) - 300px) * 9 / 16));grid-area:1/1}
  .passos{grid-area:1/2;align-self:stretch;align-content:space-evenly;gap:clamp(12px,3svh,28px)}
  .passos li{gap:10px}
  .passos b{width:clamp(34px,4.4svh,44px);height:clamp(34px,4.4svh,44px);font-size:clamp(18px,2.3svh,22px)}
  .passos h3{margin:0 0 2px;font-size:min(clamp(14px,4.2vw,18px),2.4svh + 2px)}
  .passos p{font-size:clamp(14px,1.9svh,17px);line-height:1.3}
  .seu-elo-passos .btn-vermelho{grid-area:2/1/3/3;justify-self:center}
  /* 14/10, Thiago: o celular vai do topo do passo 1 ao fim do passo 3. A tela estica na altura da linha e a arte 9:16
     fica inteira no meio, com faixa escura em cima e embaixo, como o status num celular comprido. */
  .seu-elo-arte{align-self:stretch;display:flex}
  .seu-elo-arte .status-tela{flex:1;aspect-ratio:auto;min-height:calc(var(--fone) * 16 / 9 - 10px);background:#111}
  .seu-elo-arte .status-tela>img{object-fit:contain}
  .passos{align-content:space-between}
}
/* Celular deitado: status ao lado dos passos, na altura da tela. */
@media (max-height:520px) and (orientation:landscape){.seu-elo{padding-block:8px;row-gap:8px}.seu-elo-in{grid-template-columns:auto minmax(0,1fr);gap:28px}.seu-elo-arte{--fone:calc((100svh - var(--topo)) * .7 * 9 / 16)}.seu-elo-passos{gap:12px;justify-items:start}.passos{gap:10px}.passos b{width:40px;height:40px;font-size:20px}.passos h3{font-size:18px}.passos p{font-size:14px}}

/* Tentaram nos calar */
/* margin-top 0 (polimento 13/10): o hero já ocupa a tela; a faixa preta começa na dobra, sem vão branco de 96 px */
.calar{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(16px,2.6vw,26px);margin-top:0;padding:clamp(48px,7vw,88px) var(--margem);background:var(--tinta);color:#fff}
.calar-sub{max-width:36ch;margin:-4px 0 0;text-align:center;font:600 clamp(16px,1.6vw,20px)/1.35 var(--texto);font-stretch:90%}
.calar-fatos{display:grid;gap:24px 18px;width:min(1120px,100%);margin:14px 0 0;padding:0;list-style:none}
.calar-fatos li{position:relative;display:flex;flex-direction:column;padding:28px 18px 14px;border:2px solid rgba(255,255,255,.22);border-radius:var(--raio)}
.fato-n{position:absolute;z-index:2;top:-17px;left:14px;display:grid;place-items:center;width:36px;height:36px;background:var(--vermelho);color:#fff;font:900 20px/1 var(--tit);clip-path:polygon(0 10%,90% 0,100% 88%,8% 100%)}
/* Thumb de cada fato: o que fizeram, em um olhar (número, foto da matéria ou olho riscado) com carimbo. */
.fato-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;margin:-28px -18px 20px;overflow:hidden;border-radius:calc(var(--raio) - 2px) calc(var(--raio) - 2px) 0 0;background:#262626}
.fato-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(.35) contrast(1.05)}
.fato-thumb small{position:absolute;top:8px;right:10px;font:600 11px/1 var(--texto);color:rgba(255,255,255,.85);text-shadow:0 1px 2px #000}
.tipo-foto::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.fato-numero{display:grid;justify-items:center;gap:2px;margin-bottom:22px;text-align:center;font:700 clamp(13px,1.2vw,15px)/1.2 var(--texto);color:#fff}
.fato-numero strong{font:900 clamp(40px,4.4vw,58px)/.95 var(--tit);letter-spacing:-.04em;text-transform:uppercase}
.tipo-numero{background:var(--verde)}
.fato-olho{position:relative;display:grid;place-items:center;width:100%;height:100%}
.fato-olho svg{position:relative;z-index:1;width:clamp(84px,9vw,112px);margin-bottom:22px;color:var(--amarelo);filter:drop-shadow(0 3px 0 #000)}
.fato-selo{position:absolute;z-index:1;left:50%;bottom:12px;translate:-50% 0;padding:.5em .9em .45em;white-space:nowrap;background:var(--vermelho);color:#fff;font:900 clamp(12px,1.1vw,14px)/1 var(--tit);letter-spacing:.01em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));filter:drop-shadow(3px 3px 0 #000)}
.calar-fatos h3{margin:0 0 8px;font:900 clamp(18px,1.6vw,22px)/1.12 var(--tit);letter-spacing:-.02em;text-transform:uppercase;color:var(--amarelo)}
.calar-fatos p{flex:1;margin:0 0 10px;font:500 16px/1.45 var(--texto)}
.calar-fatos a{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;color:var(--sobre-escuro);font:600 14px/1.3 var(--texto)}
.calar-virada{display:grid;justify-items:center;gap:14px;width:min(760px,100%);margin-top:8px;text-align:center}
.calar-virada>p{margin:0;font:600 clamp(17px,1.8vw,21px)/1.4 var(--texto)}
.calar-virada b{color:var(--amarelo)}
.calar-virada .acoes{justify-content:center}
.calar-virada .fx-status{color:var(--amarelo)}
@media (min-width:860px){.calar-fatos,.noticias-lista{grid-auto-columns:clamp(280px,25vw,330px);gap:20px}}
/* 11 fatos (13/10): 4 colunas no desktop largo, para a parede de casos caber em 3 fileiras. */
@media (min-width:1200px){.fato-numero strong{font-size:clamp(34px,3vw,46px)}}
.fato-numero strong{white-space:nowrap}
/* O último fato (quando calam, cresce) fecha a parede ocupando 2 colunas: 3+3+3+2 e 4+4+3 sem buraco. */

/* Thumbs dos fatos (13/10): número por cima da foto escurecida e cenas desenhadas em código.
   A cena mede em em sobre 7cqh: acompanha a altura do thumb em 16:9, 21:9 e 3:1 sem passar do selo. */
.fato-thumb{container-type:size}
.tipo-foto:has(.fato-numero) img{filter:grayscale(.3) brightness(.42)}
.tipo-foto .fato-numero{position:relative;z-index:1}
.tipo-cena{background:radial-gradient(120% 90% at 50% 0,#3a3a3a,#1d1d1d)}
.cena{position:absolute;left:50%;top:40%;translate:-50% -50%;font:500 min(8.4cqh,4.1cqw)/1.2 var(--texto);color:var(--tinta,#141414)}
.fato-thumb .cena small{position:static;display:block;color:#6b6b6b;font:500 .95em/1.2 var(--texto);text-shadow:none}
.cena-anuncio,.cena-busca{width:22em;padding:.8em .9em;background:#fff;border-radius:.8em;box-shadow:0 .35em 0 #000}
.cena-canal{top:50%;width:min(25em,90cqw)}
/* Ponto 1 (13/10, pedido do Thiago): só o print do canal e o carimbo CENSURADO no canto inferior direito. */
.cc-carimbo{position:absolute;right:-.4em;bottom:-1.3em;padding:.2em .55em .15em;border:.18em solid var(--vermelho);border-radius:.3em;background:rgba(17,17,17,.88);color:var(--vermelho);font:900 1.75em/1 var(--tit);font-style:normal;text-transform:uppercase;letter-spacing:.05em;rotate:-8deg;box-shadow:0 0 0 .08em rgba(243,43,35,.35)}
.mov .calar.visto .cc-carimbo{animation:lc-carimbo .45s var(--mola) both;animation-delay:.5s}
/* A cena não passa pelo brilho de carregamento das fotos (que esconde img até .carregou). */
.mov .fato-thumb.tipo-cena .cena img{opacity:1}
.cena-canal img{display:block;position:static;width:100%;height:auto;border:1px solid rgba(255,255,255,.25);border-radius:.7em;filter:none;box-shadow:0 .35em 0 #000}
.cena-anuncio b{display:-webkit-box;margin:.2em 0 .6em;font-weight:800;font-size:1.05em;line-height:1.15;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ca-linha{display:flex;align-items:center;gap:.6em}
.ca-chave{position:relative;width:2.6em;height:1.4em;border-radius:1em;background:#c9c9c9}
.ca-chave::after{content:'';position:absolute;left:.18em;top:.18em;width:1.04em;height:1.04em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ca-linha em{font:900 1.15em/1 var(--tit);font-style:normal;text-transform:uppercase;color:var(--vermelho)}
.cena-busca{width:20em;padding:.7em}
.cb-campo{display:flex;align-items:center;gap:.5em;height:2em;padding:0 .7em;border-radius:.6em;background:#efefef;font-weight:700;font-size:1.05em}
.cb-campo i{width:.8em;height:.8em;border:.18em solid #555;border-radius:50%}
.cb-res{display:flex;align-items:center;gap:.6em;margin-top:.55em}
.cb-res i{flex:none;width:1.5em;height:1.5em;border-radius:50%;background:#dcdcdc}
.cb-res b{height:.6em;width:60%;border-radius:.3em;background:#e4e4e4}
.cb-res:nth-child(3) b{width:45%}.cb-res:nth-child(4) b{width:70%}
.cena-removido{display:flex;align-items:center;gap:.9em}
.cena-removido strong{font:900 4.2em/.9 var(--tit);letter-spacing:-.04em;color:var(--amarelo);text-shadow:0 .06em 0 #000}
.cr-pilha{display:grid}
.cr-pilha span{width:11em;margin-top:-.35em;padding:.45em .6em;background:#fff;border-left:.35em solid var(--vermelho);border-radius:.3em;box-shadow:0 .2em 0 #000;font-weight:700;font-size:.95em;white-space:nowrap}
.cr-pilha span:nth-child(1){rotate:-3deg}.cr-pilha span:nth-child(2){rotate:2deg;translate:.8em 0}.cr-pilha span:nth-child(3){rotate:-1deg}
.cs-folha{position:relative;display:grid;gap:.45em;width:12.5em;padding:.9em 1em;background:#fff;border-radius:.3em;rotate:-3deg;box-shadow:0 .35em 0 #000}
.cs-folha b{height:.85em;background:#141414}.cs-folha i{height:.4em;width:85%;background:#d6d6d6}
.cs-folha em{position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-14deg;padding:.15em .5em;border:.2em solid var(--vermelho);border-radius:.3em;background:rgba(255,255,255,.85);color:var(--vermelho);font:900 1.7em/1 var(--tit);font-style:normal;text-transform:uppercase;letter-spacing:.04em}
/* Acompanhe ao vivo (13/10): cartão do canal (print + botão) e posts do Instagram pelo embed oficial.
   O embed tem altura própria; o iframe fixa 600 px e o cartão corta o resto. Faixa de fundo como as alternadas. */
#ao-vivo{position:relative;isolation:isolate}
#ao-vivo::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--fundo-2,#f1eee6)}
.ao-vivo-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;width:100%;max-width:var(--largura);margin-top:10px}
.canal-card{display:grid;gap:10px;align-content:start;padding:18px;background:#fff;border:2.5px solid var(--tinta);border-radius:var(--raio);box-shadow:0 5px 0 var(--tinta)}
.canal-card img{display:block;width:100%;height:auto;border-radius:12px;background:#111}
.canal-quando{margin:0;font:600 13px/1.3 var(--texto);color:var(--tinta-2)}
.canal-btn{justify-self:center;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;font:900 16px/1 var(--tit);text-transform:uppercase;text-decoration:none;box-shadow:0 4px 0 var(--tinta)}
.posts-ig{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,340px);gap:16px;margin:0;padding:4px 2px 14px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.posts-ig::-webkit-scrollbar{display:none}
.post-ig{display:grid;gap:8px;align-content:start;scroll-snap-align:start}
.post-ig iframe{display:block;width:100%;height:600px;max-height:max(400px,calc(100svh - var(--topo) - 330px));border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff}
.post-ig-link{font:600 14px/1.3 var(--texto);color:var(--tinta-2);min-height:44px;display:inline-flex;align-items:center}
.post-ig-pede{margin:4px 0 0;font:900 15px/1.1 var(--tit);text-transform:uppercase;letter-spacing:-.01em}
.post-ig .acoes .mini{flex:1 1 0}
@media (min-width:960px){.ao-vivo-in{grid-template-columns:300px minmax(0,1fr);align-items:start}.canal-card{position:sticky;top:calc(var(--topo) + 16px)}}
@media (max-width:759.98px){.posts-ig{width:calc(100% + 2 * var(--margem));margin-inline:calc(-1 * var(--margem));padding-inline:var(--margem)}.post-ig iframe{height:540px}}
/* Trilhos (13/10, regra do Thiago para iPad e desktop): fatos e notícias rolam para o lado em todas as larguras
   (o próximo aparece pela metade), para cada seção caber numa tela. */
@media all{
  .calar-fatos,.noticias-lista{grid-auto-flow:column;grid-auto-columns:min(84%,340px);gap:16px;width:calc(100% + 2 * var(--margem));margin-inline:calc(-1 * var(--margem));padding:20px var(--margem) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none}
  .calar-fatos{margin-top:0}
  .calar-fatos::-webkit-scrollbar,.noticias-lista::-webkit-scrollbar{display:none}
  .calar-fatos li,.noticia{scroll-snap-align:start}
}

/* Posts (13/10): uma fileira que rola para o lado em qualquer tela, com o próximo post aparecendo pela metade.
   No celular vai de borda a borda; de 700px em diante, setas nas laterais. */
.carrossel{position:relative;width:100%}
.pecas{display:grid;grid-auto-flow:column;grid-auto-columns:min(72%,300px);gap:12px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none}
.pecas::-webkit-scrollbar{display:none}
.carrossel-seta{display:none}
@media (min-width:700px){
  .pecas{grid-auto-columns:clamp(220px,21vw,280px);gap:20px}
  .carrossel-seta{position:absolute;z-index:2;top:calc(50% - 40px);display:grid;place-items:center;width:52px;height:52px;padding:0;border:2.5px solid var(--tinta);border-radius:999px;background:#fff;color:var(--tinta);box-shadow:3px 4px 0 var(--tinta);cursor:pointer;transition:opacity .2s ease,translate .15s ease}
  .carrossel-seta svg{width:24px;height:24px}
  .carrossel-seta.anterior{left:calc(-1 * var(--margem) + 8px)}
  .carrossel-seta.proxima{right:calc(-1 * var(--margem) + 8px)}
  .carrossel-seta:disabled{opacity:0;pointer-events:none}
  .carrossel-seta:hover{translate:0 -2px}
}
.peca{display:grid;gap:8px;align-content:start;min-width:0;scroll-snap-align:start}
.peca-img{position:relative;display:block;overflow:hidden;border:2.5px solid var(--tinta);border-radius:var(--raio);background:var(--cinza);aspect-ratio:4/5}
.peca-img img{display:block;width:100%;height:100%;object-fit:cover}
.peca.is-video .peca-img::after{content:'';position:absolute;left:50%;top:44%;width:46px;height:46px;translate:-50% -50%;border-radius:50%;background:rgba(17,17,17,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") center/60% no-repeat}
.peca-acoes{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.peca-acoes .mini{padding:0 .5em}

/* Quer compartilhar mais? (13/10): os conteúdos da página Espalhe em duas linhas de cartões que rolam juntas
   para o lado, em qualquer tela. A coluna seguinte aparece pela metade para mostrar que tem mais. */
/* 1 → 3 entre o crédito dos posts e o título: a imagem tem respiro branco próprio, por isso a margem negativa */
.espalhar-um-tres{width:min(520px,92%);height:auto;margin-block:clamp(-36px,-3vw,-12px) clamp(-28px,-2.4vw,-8px)}
.espalhar-lista{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:min(74%,300px);gap:12px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);scrollbar-width:none}
.espalhar-lista::-webkit-scrollbar{display:none}
.espalhar-lista li{display:flex;scroll-snap-align:start}
.espalhar-lista a{position:relative;display:grid;align-content:start;gap:8px;width:100%;padding:18px 18px 20px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;color:var(--tinta);text-decoration:none;box-shadow:4px 5px 0 var(--tinta);transition:translate .15s ease,box-shadow .15s ease,background .15s ease}
.espalhar-lista b{padding-right:40px;font:900 clamp(17px,1.5vw,20px)/1.1 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.espalhar-lista span{font:500 15px/1.4 var(--texto);color:var(--tinta-2)}
.espalhar-lista a::after{content:'↗';position:absolute;top:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;background:var(--cor-seta,var(--amarelo));color:var(--tinta);font:900 16px/1 var(--texto);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.espalhar-lista li:nth-child(3n+2) a{--cor-seta:var(--verde)}
/* Polimento (13/10): o rosa (#ff8f86) saía da paleta; azul da campanha com seta branca */
.espalhar-lista li:nth-child(3n) a{--cor-seta:var(--azul)}
.espalhar-lista li:nth-child(3n) a::after{color:#fff}
@media (hover:hover){.espalhar-lista a:hover{translate:0 -3px;box-shadow:5px 8px 0 var(--tinta);background:var(--cinza)}}
@media (min-width:760px){.espalhar-lista{grid-auto-columns:clamp(250px,24vw,320px);gap:20px}}

/* Responde assim (13/10): oito respostas, quatro à vista. Duas colunas no tablet, quatro no desktop. */
/* Como convidar (13/10): ilustração do elo com o WhatsApp, o convite num balão de conversa e dois botões
   no formato da campanha (copiar em vermelho, WhatsApp em verde). */
.convidar-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,4vw,56px);align-items:center;width:min(980px,100%);margin-top:6px}
.convidar-arte{justify-self:center;width:100%;max-width:360px;height:auto}
.convidar-texto{display:grid;gap:12px;justify-items:start;min-width:0}
.convidar-rotulo{margin:0;font:800 clamp(17px,1.6vw,20px)/1.2 var(--texto)}
.convidar-balao{margin:0;padding:14px 16px;border-radius:var(--raio-p) calc(2 * var(--raio)) calc(2 * var(--raio)) calc(2 * var(--raio));background:#d9fdd3;font:500 16px/1.45 var(--texto);box-shadow:0 1px 0 rgba(0,0,0,.14)}
.convidar-balao b{display:block;margin-top:8px;font-weight:800}
.convidar-dica{margin:0;font:500 15px/1.4 var(--texto);color:var(--tinta-2)}
.convidar-acoes{display:grid;gap:12px;width:min(380px,100%)}
.convidar-acoes .btn-vermelho{width:100%;min-height:52px;font-size:clamp(18px,1.6vw,22px)}
.btn-verde::before{background:#2fb234}
/* <button> com cara de botão da campanha: sem a borda e o fundo padrão do navegador */
button.btn-vermelho{border:0;background:transparent;cursor:pointer}
@media (max-width:759.98px){.convidar-in{grid-template-columns:minmax(0,1fr);justify-items:center}.convidar-arte{max-width:180px}.convidar-texto{justify-items:stretch;width:min(440px,100%)}.convidar-acoes{width:100%}}

/* Antes e agora (13/10): um cartão por comparativo, Bolsonaro e Lula lado a lado, num trilho lateral */
.comparativos{display:grid;grid-auto-flow:column;grid-auto-columns:min(88%,420px);gap:16px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 14px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none}
.comparativos::-webkit-scrollbar{display:none}
@media (min-width:760px){.comparativos{grid-auto-columns:clamp(380px,34vw,460px);gap:20px}}
.comp{display:flex;flex-direction:column;gap:10px;padding:18px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta);scroll-snap-align:start}
.comp-tema{margin:0;font:700 14px/1.2 var(--texto);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.06em}
.comp h3{margin:0;font:900 clamp(17px,1.6vw,20px)/1.15 var(--tit);letter-spacing:-.01em;text-transform:uppercase}
/* Medidas pelo próprio cartão (cqw): em cartão estreito nada é cortado, o valor diminui e a foto vai para cima do nome */
.comp-lados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:2px solid var(--tinta);border-radius:var(--raio-p);overflow:hidden;container-type:inline-size}
.comp-lado{display:flex;flex-direction:column;gap:4px;min-width:0;padding:clamp(8px,3cqw,12px);background:#fff}
.comp-lado+.comp-lado{border-left:2px solid var(--tinta)}
.comp-lado.lula{background:#e3f4e6}
.comp-quem{display:flex;align-items:center;gap:6px;font:800 14px/1.15 var(--texto)}
.comp-quem img{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--cinza)}
@container (max-width:380px){.comp-quem{flex-direction:column;align-items:flex-start;gap:4px}}
.comp-lado strong{font:900 clamp(16px,6.4cqw,25px)/1.08 var(--tit);letter-spacing:-.02em;overflow-wrap:break-word}
.comp-lado.lula strong,.comp-extra{color:#1c6b33}
.comp-periodo{font:500 14px/1.3 var(--texto);color:var(--tinta-2)}
.comp-extra{font:700 14px/1.3 var(--texto)}
.comp-fonte{display:flex;align-items:flex-end;min-height:44px;margin-top:auto;font:600 14px/1.3 var(--texto);color:var(--tinta-2)}
.comp-contexto summary{display:flex;align-items:center;min-height:44px;font:700 14px/1 var(--texto);text-decoration:underline;cursor:pointer}
.comp-contexto p{margin:0;font:500 14px/1.45 var(--texto)}

/* Responde assim (13/10): doze conversas em duas linhas que rolam juntas para o lado, em qualquer tela */
.conversas{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:min(86%,360px);gap:16px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none}
.conversas::-webkit-scrollbar{display:none}
@media (min-width:760px){.conversas{grid-auto-columns:clamp(300px,28vw,380px);gap:20px}}
/* Tela baixa (menos de 700 px, como celular pequeno ou deitado): uma linha só, para a seção caber em duas telas */
@media (max-height:1099.98px){.conversas{grid-template-rows:auto}}
/* Fundo de conversa do WhatsApp: a imagem do papel de parede padrão (fundo-conversa.webp), cobrindo o cartão */
.conversa{display:flex;flex-direction:column;gap:10px;padding:18px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#f7f3ec url(fundo-conversa.webp) center top/cover no-repeat;box-shadow:4px 5px 0 var(--tinta);scroll-snap-align:start}
.conversa p{margin:0}
/* Balões no formato de conversa de WhatsApp: canto pequeno do lado de quem fala */
.balao-ele{align-self:flex-start;max-width:88%;padding:10px 14px;border-radius:var(--raio-p) calc(2 * var(--raio)) calc(2 * var(--raio)) calc(2 * var(--raio));background:#fff;font:700 16px/1.35 var(--texto)}
.balao-voce{align-self:flex-end;max-width:94%;padding:10px 14px;border-radius:calc(2 * var(--raio)) var(--raio-p) calc(2 * var(--raio)) calc(2 * var(--raio));background:#d9fdd3;font:500 15px/1.45 var(--texto)}
/* Fonte legível sobre o padrão: etiqueta clara, como a data numa conversa */
.conversa-fonte{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;padding:0 10px;border-radius:var(--raio-p);background:rgba(255,255,255,.85);font:600 14px/1.3 var(--texto);color:var(--tinta-2)}
.conversa .acoes{margin-top:auto}

/* Compartilhe uma notícia boa */
.noticias-lista{display:grid;gap:22px;margin-top:6px} /* 14/10: sem width fixo; a largura do trilho vem do bloco @media all acima (como .pecas), senão o 3º cartão era cortado em 1132 px */
.noticia{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.noticia-foto{position:relative;display:block;width:100%;overflow:hidden;border:2.5px solid var(--tinta);border-radius:var(--raio);aspect-ratio:16/10;background:var(--cinza)}
.noticia-foto img{display:block;width:100%;height:100%;object-fit:cover}
.noticia-foto.sem-foto{display:grid;place-items:center}
.noticia-foto.sem-foto img{position:absolute;inset:0;margin:auto;width:34%;height:auto;max-height:100%;object-fit:contain} /* 14/10: em janela baixa o selo passava da caixa e a régua lia texto cortado */
.noticia-data{position:absolute;left:10px;top:10px;padding:.24em .55em .2em;background:var(--amarelo);border:2px solid var(--tinta);font:900 15px/1 var(--tit)}
.noticia h3{margin:0;font:900 clamp(18px,1.6vw,22px)/1.14 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.noticia p{flex:1;margin:0;font:500 15px/1.45 var(--texto)}
.noticia-fonte{display:inline-flex;align-items:center;min-height:44px;font:600 14px/1.3 var(--texto);color:var(--tinta-2)}
.noticia-foto img[src^="assets/noticias-home/"]:not([src*="/arte-"]){object-position:center 24%} /* foto de capa: rosto no alto do quadro */
/* 14/10: setas do trilho de notícias com folga da borda da tela e na altura da miniatura, não sobre o texto do cartão */
@media (min-width:700px){#noticias .carrossel-seta{top:calc(4px + var(--foto,120px) * .65 - 26px);margin-top:0}#noticias .carrossel-seta.anterior{left:calc(-1 * var(--margem) + 22px)}#noticias .carrossel-seta.proxima{right:calc(-1 * var(--margem) + 22px)}}


/* Fecho */
.fecho{display:grid;justify-items:center;gap:16px;max-width:1000px;margin:0 auto;padding:clamp(56px,7vw,96px) var(--margem) 0;text-align:center}
/* Logo no lugar da barra "Nosso elo é mais forte" (13/10): a mesma imagem do topo */
.fecho-logo{margin:0;width:min(620px,100%);line-height:0}
.fecho-logo img{width:100%;height:auto}
/* Marca Lula 13 no fim da página (13/10), no lugar do 1 → 3 */
.fecho-marca{width:min(340px,70%);height:auto;margin-top:clamp(8px,2vw,20px)}
.fecho-frase{margin:0;font:900 clamp(17px,1.8vw,22px)/1.15 var(--tit);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.fecho-frase em{font-style:normal;color:var(--vermelho-t)}
.fecho .btn-vermelho{width:min(420px,100%)}

/* Rodapé */
/* Rodapé (13/10): faixa azul da campanha, o elo da corrente costurado na borda de cima,
   marca e data à esquerda, dois índices (desta página e do site) e a linha de crédito. */
.rodape{position:relative;padding:clamp(60px,6vw,84px) var(--margem) calc(18px + env(safe-area-inset-bottom,0px));background:var(--azul);color:#fff}
.rodape-elo{position:absolute;top:0;left:50%;width:clamp(64px,6vw,84px);height:auto;translate:-50% -50%;rotate:-10deg;filter:drop-shadow(2px 3px 0 rgba(17,17,17,.28))}
.rodape-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);width:min(100%,1120px);margin:0 auto}
.rodape-logo{display:inline-flex;min-height:44px;color:#ffd52b;text-decoration:none;font:900 clamp(32px,3.2vw,44px)/.9 var(--tit);text-transform:uppercase;letter-spacing:-.02em}
.rodape-frase{margin:16px 0 0;font:900 clamp(19px,1.7vw,23px)/1.15 var(--tit);text-transform:uppercase}
.rodape-frase em{display:block;font-style:normal;color:#ffd52b}
.rodape-data{margin:12px 0 0;font:500 15px/1.4 var(--texto);color:rgba(255,255,255,.86)}
.rodape-data strong{font-weight:800;color:#fff}
.rodape-autoria{margin:0 0 14px;font:600 14px/1.35 var(--texto);color:var(--sobre-escuro)} /* 13/10: autoria acima do Contato */
.rodape-col h2{margin:0 0 4px;font:900 14px/1.2 var(--tit);letter-spacing:.06em;text-transform:uppercase;color:#ffd52b}
.rodape-col ul{margin:0;padding:0;list-style:none}
.rodape-col a,.rodape-topo{display:inline-flex;align-items:center;min-height:40px;color:#fff;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;font:700 16px/1.2 var(--texto);font-stretch:88%;transition:text-decoration-color .16s ease}
.rodape-col a:hover,.rodape-topo:hover{text-decoration-color:#ffd52b}
.rodape :focus-visible{outline-color:#ffd52b}
.rodape-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 24px;width:min(100%,1120px);margin:clamp(32px,4vw,52px) auto 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.24);font:500 14px/1.4 var(--texto);color:rgba(255,255,255,.82)}
.rodape-base p{margin:0}
.rodape-topo{gap:.4em;font-size:14px;font-weight:800}
@media (max-width:759.98px){
  .rodape-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .rodape-marca{grid-column:1/-1}
  .rodape-col a{min-height:44px}
}

/* Celular em pé (13/10): espaço, logo e card acompanham a altura da tela, para o encaixe (zoom no nova.js)
   encolher o mínimo e o texto continuar legível em telas baixas. */
@media (max-width:760px) and (orientation:portrait){
  .hero{row-gap:clamp(8px,2svh,26px);padding-top:clamp(4px,1.2svh,20px)}
  .hero-logo{width:min(560px,100%,48svh)}
  .hero-acao{--vao-hero:clamp(8px,1.9svh,20px)}
  /* Card pela altura da tela, limitado pela largura: card + vão + placa (1,35 card) + elo (22% da placa) cabem na linha */
  .hero-duo{--card:min(clamp(92px,17svh,170px),calc((100vw - 2 * var(--margem) - 24px) / 2.65));column-gap:24px}
  .hero-card{width:var(--card)}
  .placar{--pw:calc(var(--card) * 1.35);margin-block:clamp(10px,1.6svh,14px)}
}

/* Celular deitado (13/10): a tela tem ~330 px úteis de altura. Versão compacta das seções longas,
   para cada uma caber em até duas telas: menos respiro, filtros numa linha, cartões e imagens menores. */
@media (max-height:520px) and (orientation:landscape){
  .bloco{padding-top:28px;gap:10px}
  .calar{margin-top:28px;padding-block:24px;gap:12px}
  .titulo-caixa{font-size:24px}
  .calar-sub,.bloco-sub{font-size:15px}
  .calar-fatos{grid-auto-columns:min(46%,300px);padding-top:18px}
  .fato-thumb{aspect-ratio:21/9;margin-bottom:12px}
  .fato-numero strong{font-size:34px}
  .fato-olho svg{width:64px;margin-bottom:14px}
  .calar-fatos h3{font-size:16px}
  .calar-fatos p{font-size:14px;line-height:1.35}
  .calar-virada>p{font-size:15px}
  .filtros{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
  .temas{width:100%;min-width:0;margin-inline:0;padding-inline:0 var(--margem)}
  .pecas{grid-auto-columns:150px;gap:14px}
  .espalhar-um-tres{width:300px}
  .espalhar-lista a{padding:14px 14px 16px;gap:6px}
  .espalhar-lista span{font-size:14px}
  .noticias-lista{grid-auto-columns:min(60%,440px)}
  .noticia p{font-size:14px}
  .calar{padding-block:20px;gap:10px}
  .fato-thumb{aspect-ratio:3/1}
  .calar-virada{gap:10px;margin-top:0}
  .noticia{gap:6px}
  .noticia-foto{aspect-ratio:2/1}
  .noticia h3{font-size:16px}
  .noticia-fonte{min-height:36px}
  .convidar-in{grid-template-columns:auto minmax(0,1fr)}.convidar-arte{max-width:140px}.convidar-acoes{grid-template-columns:1fr 1fr}
  .seu-elo .titulo-caixa{font-size:22px}
  .fecho{padding-top:28px;gap:10px}
  .fecho-marca{width:220px}
}

/* ============================================================================================
   Polimento e movimento (13/10). Decisões em docs/design/polimento-home-nova-2026-10-13.md.
   Movimento só com prefers-reduced-motion: no-preference e só depois que o nova.js liga a classe .mov
   no <html> (sem JS, tudo aparece parado). Anima só opacity, translate e scale (GPU, sem recalcular layout).
   ============================================================================================ */
:root{--sai:cubic-bezier(.22,1,.36,1);--mola:cubic-bezier(.34,1.32,.64,1);--t-toque:.16s}

/* Ritmo: título, apoio e conteúdo com o mesmo respiro em todas as seções (menos "Mostre para todos", que tem o respiro
   próprio medido pelo encaixe por zoom) */
.bloco:not(.seu-elo){gap:clamp(14px,1.4vw,18px)}
.bloco>.bloco-sub+*,.bloco>.titulo-caixa+.carrossel{margin-top:clamp(4px,1vw,12px)}
.bloco-sub,.calar-sub{text-wrap:balance}
.bloco-sub{max-width:46ch}
.calar-sub{max-width:44ch}
.bloco-pe{margin-top:clamp(4px,1vw,10px)}
/* Título longo de "Mostre para todos" no celular: 4 linhas em vez de 5 */
@media (max-width:759.98px){.seu-elo .titulo-caixa{font-size:clamp(24px,7.4vw,36px)}}

/* Setas em todos os trilhos laterais (o nova.js mostra só quando há o que rolar) */
@media (min-width:700px){.carrossel[data-trilho] .carrossel-seta{top:50%;margin-top:-26px}}
.carrossel[data-trilho] .carrossel-seta:disabled{opacity:0;pointer-events:none}

/* Respostas: os três botões numa linha no celular */
.conversa .acoes{gap:8px}
.conversa .acoes .mini{flex:1 1 auto;padding:0 .55em}
@media (max-width:479.98px){.conversa{padding:16px 14px}}

/* Toque: sobe 2 px no hover (só onde há mouse) e afunda um pouco ao apertar */
.btn-zap,.btn-insta,.btn-linha,.abas button,.temas button{transition:translate var(--t-toque) var(--sai),scale var(--t-toque) var(--sai),background-color .15s ease,border-color .15s ease,color .15s ease}
.carrossel-seta{transition:opacity .2s ease,translate var(--t-toque) var(--sai),scale var(--t-toque) var(--sai)}
@media (hover:hover){.btn-zap:hover,.btn-insta:hover,.btn-linha:hover{translate:0 -2px}}
.btn-zap:active,.btn-insta:active,.btn-linha:active,.abas button:active,.temas button:active,.carrossel-seta:active{scale:.96}

@media (prefers-reduced-motion:no-preference){
  /* Entrada das seções: o nova.js marca a seção com .visto quando o topo dela chega a 85% da tela */
  .mov main>section :is(.titulo-caixa,.bloco-sub,.calar-sub,.filtros,.convidar-arte,.convidar-texto,.espalhar-um-tres,.seu-elo-arte,.passos li,.calar-virada,.bloco-pe,.credito,.fecho-frase,.fecho-marca),
  .mov main>section>.temas,.mov .rodape-elo,.mov .rodape-in{transition:opacity .5s var(--sai) var(--d,0s),translate .6s var(--sai) var(--d,0s),scale .6s var(--mola) var(--d,0s),rotate .7s var(--mola) var(--d,0s)}
  .mov main>section:not(.visto) :is(.bloco-sub,.calar-sub,.filtros,.convidar-texto,.seu-elo-arte,.passos li,.calar-virada,.bloco-pe,.credito,.fecho-frase,.fecho-marca),
  .mov main>section:not(.visto)>.temas{opacity:0;translate:0 16px}
  /* Título: chega como um carimbo (escala com um leve passo além e volta) */
  .mov main>section:not(.visto) .titulo-caixa{opacity:0;scale:.9}
  .mov main>section:not(.visto) :is(.convidar-arte,.espalhar-um-tres){opacity:0;scale:.9}
  /* "Mostre para todos": título e botão só com opacidade (o encaixe por zoom mede a posição deles) */
  .mov .seu-elo:not(.visto) .titulo-caixa{scale:none}
  .mov .seu-elo:not(.visto) .seu-elo-passos .btn-vermelho,.mov .fecho:not(.visto) .btn-vermelho{opacity:0}
  /* Botões com hover: a entrada anima só a opacidade e o hover continua imediato */
  .mov :is(.seu-elo-passos,.fecho) .btn-vermelho{transition:opacity .5s var(--sai) var(--d,0s),translate .15s ease,filter .15s ease}
  .mov .seu-elo-passos .btn-vermelho{--d:.5s}
  /* Ordem: título, apoio, conteúdo, pé */
  .mov :is(.bloco-sub,.calar-sub,.convidar-arte,.espalhar-um-tres,.fecho-frase){--d:.08s}
  .mov :is(.filtros,.convidar-texto,.seu-elo-arte,.calar-virada,.fecho .btn-vermelho){--d:.16s}
  .mov main>section>.temas{--d:.16s}
  .mov .espalhar-um-tres+.titulo-caixa{--d:.12s}
  .mov .espalhar .bloco-sub{--d:.2s}
  .mov main>section.visto .espalhar-lista>*{animation-delay:calc(.28s + var(--i,0) * 70ms)}
  .mov .passos li:nth-child(1){--d:.22s}.mov .passos li:nth-child(2){--d:.32s}.mov .passos li:nth-child(3){--d:.42s}
  .mov :is(.bloco-pe,.credito,.fecho-marca){--d:.3s}
  /* Trilhos: os cartões sobem em sequência (até o 6º; os de depois entram juntos). Cartão que entra depois
     (tema trocado, "carregar mais", notícias ao vivo) também anima, porque a animação roda na inserção. */
  .mov main>section:not(.visto) :is(.calar-fatos,.pecas,.espalhar-lista,.comparativos,.conversas,.noticias-lista)>*{opacity:0}
  .mov main>section.visto :is(.calar-fatos,.pecas,.espalhar-lista,.comparativos,.conversas,.noticias-lista)>*{animation:sobe .55s var(--sai) both;animation-delay:calc(.14s + var(--i,0) * 70ms)}
  :is(.calar-fatos,.pecas,.espalhar-lista,.comparativos,.conversas,.noticias-lista)>:nth-child(2){--i:1}
  :is(.calar-fatos,.pecas,.espalhar-lista,.comparativos,.conversas,.noticias-lista)>:nth-child(3){--i:2}
  :is(.calar-fatos,.pecas,.espalhar-lista,.comparativos,.conversas,.noticias-lista)>:nth-child(4){--i:3}
  :is(.calar-fatos,.pecas,.espalhar-lista,.comparativos,.conversas,.noticias-lista)>:nth-child(5){--i:4}
  :is(.calar-fatos,.pecas,.espalhar-lista,.comparativos,.conversas,.noticias-lista)>:nth-child(n+6){--i:5}
  /* Divisor final: o elo gira para o lugar */
  .mov .rodape:not(.visto) .rodape-elo{opacity:0;rotate:-70deg;scale:.6}
  .mov .rodape:not(.visto) .rodape-in{opacity:0;translate:0 16px}
  .mov .rodape-in{--d:.12s}
  /* Status do WhatsApp: a barra de progresso enche uma vez, como um status de verdade */
  .mov .status-progresso i{width:100%;transform-origin:0 50%;scale:.3 1}
  .mov .seu-elo.visto .status-progresso i{animation:progresso 6s linear .6s both}
  /* Carregando imagem: brilho que passa sobre o cinza; para quando a imagem chega (.carregou, do nova.js) */
  .mov :is(.peca-img,.noticia-foto,.fato-thumb):has(>img):not(.carregou){background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);background-size:220% 100%;animation:brilho 1.3s linear 3 forwards}
  .mov .fato-thumb:has(>img):not(.carregou){background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%)}
  .mov :is(.peca-img,.noticia-foto,.fato-thumb) img{transition:opacity .4s ease}
  .mov :is(.peca-img,.noticia-foto,.fato-thumb):not(.carregou) img{opacity:0}
  /* Placar: o número troca com um pulo curto quando o contador sobe */
  .placar-num.subiu{animation:pulo .5s var(--mola)}
}
/* Impressão e PDF: tudo aparece parado, sem depender de rolagem nem de evento */
@media print{.mov *,.mov *::before,.mov *::after{transition:none!important;animation:none!important}.mov main>section *,.mov :is(.rodape-elo,.rodape-in){opacity:1!important;translate:none!important;scale:none!important}}
@keyframes progresso{from{scale:0 1}to{scale:1 1}}
@keyframes brilho{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes pulo{40%{scale:1.18}}

/* ============================================================================================
   Logo em camadas e movimento, 2ª rodada (13/10). Peças recortadas do "Logo sem BG" na posição exata
   (letreiro, DA, VIRADA!, elo, L13, faixa) + rostos e Lula dos arquivos separados. Cada peça anima sozinha.
   ============================================================================================ */
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.logo-camadas{position:relative;aspect-ratio:3516/1556;line-height:0}
.logo-camadas .lc{position:absolute;max-width:none;height:auto;animation:none}

/* "Tentaram nos calar" sem caixa e sem sombra: letra amarela direto sobre o preto */
.calar .titulo-caixa{background:none;clip-path:none;padding:0;text-shadow:none}

@media (prefers-reduced-motion:no-preference){
  /* Entrada do logo (hero na 1ª pintura; fecho quando a seção aparece). Ordem: letreiro cai, VIRADA! sobe,
     DA e elo giram, L13 desliza. Bonecos: o mesmo salto da home 4192 (07b1700, home.css t9-pop): de 60% a 100%
     com opacidade, 0,55 s, Lula 0,12 s e os rostos 0,24 / 0,30 / 0,36 s. Sem gesto depois. */
  /* backwards: segura o início durante o atraso e solta no fim (o hover dos bonecos precisa das propriedades livres) */
  .hero-logo .lc,.mov .fecho.visto .fecho-logo .lc{animation:var(--entra) backwards}
  .mov .fecho:not(.visto) .fecho-logo .lc{opacity:0}
  .lc-corrente{--entra:lc-cai .6s var(--mola) .1s}
  .lc-virada{--entra:lc-sobe .6s var(--mola) .26s}
  .lc-da{--entra:lc-gira .55s var(--mola) .42s}
  .lc-faixa{--entra:lc-faixa .55s var(--sai) .5s}
  .lc-l13{--entra:lc-desliza .6s var(--mola) .48s}
  .lc-elo{--entra:lc-elo .9s var(--mola) .6s}
  .lc-lula{--entra:lc-salta .55s var(--sai) .12s}
  .lc-homem{--entra:lc-salta .55s var(--sai) .24s}
  .lc-mulher{--entra:lc-salta .55s var(--sai) .3s}
  .lc-senhora{--entra:lc-salta .55s var(--sai) .36s}

  /* Placar: o elo dá uma volta e para no lugar; a arte de exemplo chega inclinada */
  .placar-elo{animation:lc-elo-placar 1s var(--mola) .9s both}
  .hero-card img{animation:lc-card .7s var(--mola) .55s both}

  /* Pontinho vermelho do fim do título aparece depois da caixa */
  .titulo-caixa .ponto{display:inline-block;transform-origin:50% 80%}
  .mov main>section.visto .titulo-caixa .ponto{animation:lc-gira .45s var(--mola) both;animation-delay:calc(var(--d,0s) + .38s)}

  /* Selos dos fatos carimbam e os números dos passos saltam, depois do cartão */
  .mov .calar.visto .fato-selo{animation:lc-carimbo .45s var(--mola) both;animation-delay:calc(.5s + var(--i,0) * 70ms)}
  .calar-fatos>li{--i:0}.calar-fatos>li:nth-child(2){--i:1}.calar-fatos>li:nth-child(3){--i:2}
  .mov .seu-elo.visto .passos li b{animation:lc-gira .5s var(--mola) both;animation-delay:calc(var(--d,0s) + .12s)}

  /* Rolagem (Chrome e Safari recentes; nos outros fica parado): ilustrações acompanham a passagem pela tela */
  @supports (animation-timeline:view()){
    .seu-elo-arte{animation:lc-fone linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
    .convidar-arte{animation:lc-balanca linear both;animation-timeline:view();animation-range:entry 0% exit 0%}
    .espalhar-um-tres{animation:lc-flutua linear both;animation-timeline:view();animation-range:entry 0% exit 0%}
  }
}

/* Bonecos do logo: com o mouse em cima, cada um sobe e inclina de leve */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .logo-camadas :is(.lc-lula,.lc-homem,.lc-mulher,.lc-senhora){transition:translate .35s var(--sai),rotate .35s var(--sai),scale .35s var(--sai)}
  .logo-camadas .lc-lula:hover{translate:0 -3%;rotate:-4deg;scale:1.04}
  .logo-camadas .lc-homem:hover{translate:0 -4%;rotate:4deg;scale:1.05}
  .logo-camadas .lc-mulher:hover{translate:-2% -3%;rotate:-4deg;scale:1.05}
  .logo-camadas .lc-senhora:hover{translate:0 -4%;rotate:4deg;scale:1.05}
}

/* Cartões sobem um pouco com o mouse (resposta de toque, não enfeite) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :is(.comp,.conversa,.calar-fatos li,.noticia-foto,.peca-img){transition:translate .2s var(--sai),box-shadow .2s var(--sai)}
  :is(.comp,.conversa):hover{translate:0 -4px;box-shadow:6px 9px 0 var(--tinta)}
  .calar-fatos li:hover{translate:0 -4px}
  :is(.noticia-foto,.peca-img):hover{translate:0 -3px}
  /* Elo do topo inclina de leve no hover (não gira) */
  .topo-marca img{transition:rotate .3s var(--sai)}
  .topo-marca:hover img{rotate:-50deg}
  /* Brilho que atravessa o botão principal no hover */
  .btn-vermelho:hover::after{animation:lc-brilho .7s var(--sai)}
}
@media (prefers-reduced-motion:no-preference){
  .btn-vermelho::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%) 160% 0/250% 100% no-repeat}
  .hero-btn::after{animation:lc-brilho .9s var(--sai) 2.4s}
}

@keyframes lc-cai{from{opacity:0;translate:0 -45%;scale:1.12}}
@keyframes lc-sobe{from{opacity:0;translate:0 35%;scale:.86}}
@keyframes lc-gira{from{opacity:0;scale:0;rotate:-25deg}}
@keyframes lc-faixa{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes lc-desliza{from{opacity:0;translate:-45% 10%;rotate:-14deg}}
@keyframes lc-elo{from{opacity:0;scale:.3;rotate:-220deg}}
@keyframes lc-salta{from{opacity:0;scale:.6}}
@keyframes lc-elo-placar{from{rotate:-420deg;scale:.4;opacity:0}}
@keyframes lc-card{from{opacity:0;rotate:8deg;translate:0 12px}}
@keyframes lc-carimbo{from{opacity:0;scale:1.7;rotate:-9deg}}
@keyframes lc-brilho{from{background-position:160% 0}to{background-position:-60% 0}}
@keyframes lc-fone{from{rotate:-7deg;translate:0 40px}to{rotate:-2deg;translate:0 0}}
@keyframes lc-balanca{from{rotate:-6deg;translate:0 24px}to{rotate:5deg;translate:0 -16px}}
@keyframes lc-flutua{from{translate:0 30px}to{translate:0 -20px}}
@media print{.logo-camadas .lc,.placar-elo,.hero-card img,.titulo-caixa .ponto,.fato-selo,.passos b{animation:none!important;opacity:1!important}}
/* Figurinhas (tela de teste, 13/10, só com ?figurinhas): uma por seção, colada na quina do título.
   Sombra de figurinha, inclinação leve, mesmo salto dos bonecos na entrada e mexida leve no hover. */
.com-figurinhas main>section{position:relative}
.figurinha{position:absolute;z-index:3;width:clamp(50px,7vw,100px);height:auto;rotate:var(--rot,6deg);filter:drop-shadow(2px 4px 4px rgba(0,0,0,.22));pointer-events:auto;user-select:none}
.fig-lula{width:clamp(44px,5.6vw,80px)}
@media (max-width:359.98px){.figurinha{display:none}}
@media (prefers-reduced-motion:no-preference){
  .mov main>section:not(.visto) .figurinha{opacity:0}
  .mov main>section.visto .figurinha{animation:lc-salta .55s var(--sai) .55s backwards}
  @media (hover:hover){
    .figurinha{transition:translate .35s var(--sai),scale .35s var(--sai),rotate .35s var(--sai)}
    .figurinha:hover{translate:0 -4px;scale:1.08;rotate:calc(var(--rot,6deg) * .4)}
  }
}

/* Fundo e faixas (13/10, pedido do Thiago): papel #faf9f6 no lugar do branco; seções alternadas num tom um pouco
   mais quente, de borda a borda, para marcar a troca de seção. Cartões e botões continuam brancos (relevo leve). */
:root{--fundo:#faf9f6;--fundo-2:#f1eee6}
body{background:var(--fundo)}
.topo-in::before{background:rgba(250,249,246,.78)}
.bloco:not(.seu-elo),.fecho{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
:is(#convidar,#espalhar,#responde,.fecho){position:relative;isolation:isolate}
:is(#convidar,#espalhar,#responde,.fecho)::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--fundo-2)}
@media (max-height:520px) and (orientation:landscape){.bloco:not(.seu-elo),.fecho{padding-top:24px;padding-bottom:24px}}

/* Pedido de apoio (13/10): mesmo cartão no meio da página (depois de "Quer mais") e no fim (antes do rodapé).
   Cartão amarelo com borda e sombra dura, como os botões; o botão leva ao APOIA.se em outra aba. */
.apoio{padding:clamp(44px,5vw,72px) var(--margem) 0}
#apoio-fim{padding-bottom:clamp(56px,6vw,88px)}
.apoio-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,32px);width:min(100%,960px);margin:0 auto;padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,40px);background:var(--amarelo);border:2.5px solid var(--tinta);border-radius:var(--raio);box-shadow:6px 6px 0 var(--tinta)}
.apoio-elo{width:clamp(56px,6vw,84px);height:auto;rotate:-62deg}
.apoio-texto{display:grid;gap:6px}
.apoio-tag{justify-self:start;margin:0;padding:.3em .55em .24em;border-radius:var(--raio-p);background:var(--tinta);color:#fff;font:900 12px/1 var(--tit);letter-spacing:.04em;text-transform:uppercase}
.apoio h2{margin:0;font:900 clamp(24px,2.6vw,36px)/1.02 var(--tit);text-transform:uppercase;letter-spacing:-.01em}
.apoio-texto p:last-child{margin:0;font:500 16px/1.45 var(--texto)}
.apoio-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:52px;padding:0 24px;border:2.5px solid var(--tinta);border-radius:999px;background:var(--azul);color:#fff;text-decoration:none;white-space:nowrap;font:900 17px/1 var(--tit);text-transform:uppercase;box-shadow:0 4px 0 var(--tinta);transition:translate var(--t-toque,.16s) ease,box-shadow var(--t-toque,.16s) ease}
@media (hover:hover){.apoio-btn:hover{translate:0 -2px;box-shadow:0 6px 0 var(--tinta)}}
.apoio-btn:active{translate:0 2px;box-shadow:0 2px 0 var(--tinta)}
@media (max-width:759.98px){
  .apoio-card{grid-template-columns:auto minmax(0,1fr);row-gap:16px}
  .apoio-elo{align-self:start;width:48px}
  .apoio-btn{grid-column:1/-1;width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .mov .apoio-card{transition:opacity .5s var(--sai) .05s,translate .6s var(--sai) .05s}
  .mov .apoio:not(.visto) .apoio-card{opacity:0;translate:0 18px}
  .mov .apoio-elo{transition:rotate .7s var(--mola) .2s}
  .mov .apoio:not(.visto) .apoio-elo{rotate:-120deg}
}
@media print{.mov .apoio-card{opacity:1!important;translate:none!important}}

/* Antes e agora (13/10): compartilhar cada cartão e a ponte para o Puxa Ficha (comparação completa Lula x Flávio). */
.comp-acoes{margin-top:auto;padding-top:4px}
.comp-acoes .mini{flex:1 1 0}
.puxa{display:grid;justify-items:center;gap:10px;width:min(100%,640px);margin-top:clamp(10px,1.4vw,18px);padding:clamp(16px,2vw,22px);border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta);text-align:center}
.puxa p{margin:0;font:500 16px/1.4 var(--texto);text-wrap:balance}
.puxa p b{font-weight:800}
.puxa-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 20px}
.btn-puxa{display:inline-flex;align-items:center;gap:.4em;min-height:48px;padding:0 22px;border:2.5px solid var(--tinta);border-radius:999px;background:var(--tinta);color:#fff;text-decoration:none;font:900 15px/1 var(--tit);text-transform:uppercase;box-shadow:0 4px 0 var(--vermelho);transition:translate var(--t-toque,.16s) ease,box-shadow var(--t-toque,.16s) ease}
@media (hover:hover){.btn-puxa:hover{translate:0 -2px;box-shadow:0 6px 0 var(--vermelho)}}
.btn-puxa:active{translate:0 2px;box-shadow:0 2px 0 var(--vermelho)}

/* Menos movimento (13/10): nenhuma transição, nem as de toque. A sombra dos botões é medida em em e muda quando
   o encaixe do hero ajusta o zoom ao carregar; com transição, isso virava um movimento que a pessoa não pediu. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* ============================================================================================
   iPad e desktop (13/10, regra do Thiago): cada seção da home cabe na altura útil da tela (janela menos o topo fixo),
   com título, conteúdo e ação. Só a home (html[data-pagina=nova]) e só de 700 px de largura (iPad mini em pé incluído) e 521 de altura em diante;
   o celular, em pé ou deitado, não muda. A densidade é contínua: espaços, títulos, fotos e cartões saem da altura da tela
   (svh) com piso e teto, sem faixas ajustadas a tamanhos de aparelho. A medição usa a área visível real do navegador
   (a barra do Safari ou do Chrome tira de 70 a 120 px).
   ============================================================================================ */
.antes-lado{display:contents} /* só agrupa o Puxa Ficha e o link do pé; no iPad e no desktop vira a coluna ao lado do trilho */
@media (min-width:700px) and (min-height:521px){
  html[data-pagina=nova]{--u:calc(100svh - var(--topo));--pv:clamp(14px,min(5vw,3.5svh),72px);--vao:clamp(7px,1.5svh,18px);--tfs:clamp(26px,min(5.4vw,6.4svh),72px);--foto:clamp(72px,13svh,210px)}
  [data-pagina=nova] :is(.bloco:not(.seu-elo),.fecho,.calar){padding-block:var(--pv)}
  [data-pagina=nova] :is(.bloco:not(.seu-elo),.calar){gap:var(--vao)}
  [data-pagina=nova] main .titulo-caixa{font-size:var(--tfs)}
  [data-pagina=nova] :is(.calar-sub,.bloco-sub){max-width:min(100%,88ch);font-size:clamp(14px,2.4svh,19px);line-height:1.3} /* a frase de apoio cabe em uma ou duas linhas */
  [data-pagina=nova] .bloco-pe{margin-top:0}

  /* Hero: textos, card e placar pela altura da tela; o card e a placa guardam a proporção (placa ~ 75% do card) */
  [data-pagina=nova] .hero{row-gap:clamp(8px,1.6svh,28px);padding-bottom:clamp(14px,3svh,64px)}
  [data-pagina=nova] .hero-acao{--vao-hero:clamp(7px,1.5svh,24px)}
  [data-pagina=nova] :is(.hero-denuncia,.hero-convite){font-size:clamp(13.5px,min(1.25vw,2.3svh),20px);line-height:1.38}
  [data-pagina=nova] .hero-frase{font-size:clamp(21px,min(2.3vw,4.3svh),36px)}
  [data-pagina=nova] .hero-tag{min-height:clamp(32px,5.5svh,44px);font-size:clamp(13px,2.4svh,19px)}
  [data-pagina=nova] .hero-chamada{font-size:clamp(15px,2.6svh,22px)}
  [data-pagina=nova] .hero-btn{min-height:clamp(44px,7.6svh,58px);font-size:clamp(18px,min(3.3svh,2.6vw),28px)}
  [data-pagina=nova] .hero-duo{padding-block:clamp(2px,1svh,10px)}
  [data-pagina=nova] .hero-card{width:min(clamp(100px,33vw,148px),17svh)}
  [data-pagina=nova] .placar{--pw:min(200px,calc((67vw - 2 * var(--margem) - 24px) / 1.22),24svh);margin-block:clamp(10px,2.4svh,18px)}
  [data-pagina=nova] .placar-num{font-size:min(72px,calc(var(--pw) * .3),calc(var(--pw) * 1.2 / (var(--n) * 1.2)))}
  [data-pagina=nova] .placar-tag{font-size:clamp(12px,calc(var(--pw) * .1),23px)}

  /* Tentaram nos calar: fatos em trilho com cartão mais largo e foto pela altura; texto de ação ao lado da frase */
  [data-pagina=nova] .calar-fatos{grid-auto-columns:clamp(380px,44vw,420px);padding-top:clamp(12px,2.4svh,18px);padding-bottom:4px}
  [data-pagina=nova] .fato-thumb{aspect-ratio:auto;height:var(--foto);margin-bottom:clamp(8px,1.8svh,14px)}
  [data-pagina=nova] .calar-fatos li{padding-bottom:4px}
  /* O que fica dentro da foto (número, olho, selo) acompanha a altura da foto: nada passa da moldura */
  [data-pagina=nova] .fato-numero{margin-bottom:calc(var(--foto) * .26);font-size:clamp(11.5px,calc(var(--foto) * .15),15px)}
  [data-pagina=nova] .fato-numero strong{font-size:min(clamp(34px,3vw,46px),calc(var(--foto) * .34))}
  [data-pagina=nova] .fato-olho svg{width:clamp(40px,calc(var(--foto) * .62),112px);margin-bottom:calc(var(--foto) * .26)}
  [data-pagina=nova] .fato-selo{bottom:clamp(5px,calc(var(--foto) * .12),12px)}
  [data-pagina=nova] .calar-fatos h3{font-size:clamp(15px,min(1.6vw,2.9svh),22px);margin-bottom:clamp(4px,1svh,8px)}
  [data-pagina=nova] .calar-fatos p{font-size:clamp(13.5px,2.3svh,15px);line-height:1.38;margin-bottom:4px}
  [data-pagina=nova] .calar-virada{grid-template-columns:minmax(0,1fr) auto;justify-items:start;align-items:center;gap:6px 24px;width:min(1120px,100%);margin-top:0;text-align:left}
  [data-pagina=nova] .calar-virada>p{font-size:clamp(14px,min(1.8vw,2.5svh),21px);line-height:1.3}
  [data-pagina=nova] .calar-virada .acoes{justify-content:flex-end}
  [data-pagina=nova] .calar-virada .btn-linha{max-width:min(190px,100%);white-space:normal;line-height:1.1;font-size:.85rem;text-align:center;padding-inline:.8em} /* o rótulo longo quebra em duas linhas dentro do botão */
  [data-pagina=nova] :is(.calar-sub){font-size:clamp(14px,min(2.4svh,2.1vw),19px)}
  [data-pagina=nova] .calar-virada .btn-zap,[data-pagina=nova] .calar-virada .btn-insta,[data-pagina=nova] .calar-virada .btn-linha{min-height:44px;padding-inline:1em;font-size:.95rem}

  /* Quer mais para compartilhar */
  [data-pagina=nova] .espalhar-um-tres{width:min(520px,92%,calc(var(--u) * .26 * 2.174));margin-block:clamp(-30px,-2.4svh,-8px) clamp(-24px,-2svh,-6px)}
  [data-pagina=nova] .espalhar-lista a{padding:clamp(10px,2svh,14px) 16px clamp(10px,2.2svh,16px);gap:clamp(3px,.8svh,6px)}
  [data-pagina=nova] .espalhar-lista span{font-size:clamp(13px,2.2svh,14.5px);line-height:1.36}
  [data-pagina=nova] .espalhar-lista{grid-auto-columns:max(250px,calc((min(100vw - 2 * var(--margem), var(--largura)) - 40px) / 3))} /* as 3 colunas ocupam a largura; passa disso, rola */

  /* Notícias: foto pela altura, cartão mais largo; a fonte e os botões na mesma linha */
  [data-pagina=nova] .noticias-lista{grid-auto-columns:clamp(320px,36vw,420px);padding-top:4px;padding-bottom:6px}
  [data-pagina=nova] .noticia{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(4px,1.1svh,8px) 10px;justify-items:stretch}
  [data-pagina=nova] .noticia>:is(.noticia-foto,h3,p){grid-column:1/-1}
  [data-pagina=nova] .noticia-foto{aspect-ratio:auto;height:var(--foto)}
  @media (min-height:700px){[data-pagina=nova] .noticia-foto{height:calc(var(--foto) * 1.3)}} /* 14/10: miniatura mais alta onde sobra tela (a faixa de 13 svh cortava rostos); abaixo de 700 px de altura a seção não passa da tela */
  [data-pagina=nova] .noticia h3{font-size:clamp(15px,min(1.6vw,2.9svh),22px)}
  [data-pagina=nova] .noticia p{font-size:clamp(13.5px,2.3svh,15px);line-height:1.38}
  [data-pagina=nova] .noticia .acoes{justify-content:flex-end;flex-wrap:nowrap}
  [data-pagina=nova] .noticia-fonte{justify-self:start}

  /* Respostas: cartão mais largo (menos linhas no balão) e texto pela altura; uma fileira até 1199 px de altura */
  [data-pagina=nova] .conversas{grid-auto-columns:clamp(340px,36vw,440px);padding-block:4px 8px;gap:clamp(12px,2svh,20px)}
  [data-pagina=nova] .conversa{padding:clamp(10px,2svh,18px);gap:clamp(6px,1.2svh,10px)}
  [data-pagina=nova] .balao-ele{font-size:clamp(14px,2.4svh,16px)}
  [data-pagina=nova] .balao-voce{font-size:clamp(13.5px,2.3svh,15px);line-height:1.4}
  [data-pagina=nova] .balao-ele,[data-pagina=nova] .balao-voce{padding-block:clamp(6px,1.2svh,10px)}
}
@media (min-width:700px) and (min-height:521px) and (max-height:1199.98px){[data-pagina=nova] .conversas{grid-template-rows:auto}}
@media (min-width:1300px) and (min-height:521px){
  [data-pagina=nova] .espalhar-lista{grid-template-rows:auto;grid-auto-columns:max(220px,calc((min(100vw - 2 * var(--margem), var(--largura)) - 4 * 20px) / 5))} /* cinco cartões numa fileira só */
}
/* Hero em duas colunas (mesma regra da base: deitado ou largo): a coluna do texto cresce com a largura, o card e a placa seguem a altura */
@media (min-width:900px) and (orientation:landscape) and (min-height:521px),(min-width:1101px) and (min-height:521px){
  [data-pagina=nova] .hero-acao{width:min(500px,42vw)}
  [data-pagina=nova] .hero-card{width:min(clamp(148px,12vw,180px),17svh)}
  [data-pagina=nova] .placar{--pw:min(245px,17.4vw,24svh)}
  [data-pagina=nova] .placar-num{font-size:min(72px,calc(var(--pw) * .3),calc(var(--pw) * 1.5 / (var(--n) * 1.25)))}
}

/* Acompanhe ao vivo: canal e posts lado a lado já a partir de 700 px */
@media (min-width:700px) and (min-height:521px){
  [data-pagina=nova] .ao-vivo-in{grid-template-columns:clamp(220px,24vw,300px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
  [data-pagina=nova] .canal-card{position:sticky;top:calc(var(--topo) + 16px)}
  [data-pagina=nova] .posts-ig{width:100%;margin-inline:0;padding-inline:2px} /* a sangria de celular (até 759 px) não vale com o canal ao lado */
  [data-pagina=nova] .ao-vivo-in .carrossel-seta.anterior{left:-16px}
  [data-pagina=nova] .post-ig iframe{max-height:max(300px,calc(var(--u) - 2 * var(--pv) - 330px))}
}
/* Deitado (iPad e desktop): o título segue centralizado, igual aos outros; a frase de apoio e o canal ficam numa coluna
   à esquerda e os posts ocupam o resto, para o post aparecer maior sem passar da tela */
@media (min-width:700px) and (min-height:521px) and (orientation:landscape){
  [data-pagina=nova] #ao-vivo{grid-template-columns:clamp(240px,24vw,320px) minmax(0,1fr);grid-template-rows:auto 1fr auto auto 1fr;column-gap:clamp(24px,3.4vw,56px);justify-items:start;align-items:start}
  [data-pagina=nova] #ao-vivo>.titulo-caixa{grid-area:1/1/2/3;justify-self:center}
  [data-pagina=nova] #ao-vivo>.bloco-sub{grid-area:3/1;max-width:30ch;text-align:left}
  [data-pagina=nova] #ao-vivo .ao-vivo-in{display:contents}
  [data-pagina=nova] #ao-vivo .canal-card{grid-area:4/1;position:static;width:100%}
  [data-pagina=nova] #ao-vivo .carrossel{grid-area:2/2/6/3;align-self:start;min-width:0}
  [data-pagina=nova] #ao-vivo .posts-ig{width:calc(100% + var(--margem));margin-right:calc(-1 * var(--margem));padding-right:var(--margem);scroll-padding-right:var(--margem)} /* os posts correm até a borda, como os outros trilhos */
  [data-pagina=nova] .post-ig{gap:clamp(4px,1svh,8px)}
  [data-pagina=nova] .post-ig iframe{max-height:max(240px,calc(var(--u) - 2 * var(--pv) - 1.4 * var(--tfs) - var(--vao) - 176px))}
}

/* Antes e agora: o Puxa Ficha e o link do pé ficam ao lado do trilho, não embaixo dele */
@media (min-width:700px) and (min-height:521px){
  [data-pagina=nova] #antes{grid-template-columns:minmax(0,1fr) clamp(230px,24vw,290px);column-gap:clamp(20px,3vw,44px);align-items:center}
  [data-pagina=nova] #antes>:is(.titulo-caixa,.bloco-sub,.temas){grid-column:1/-1}
  [data-pagina=nova] #antes>.temas{padding-block:0 2px}
  [data-pagina=nova] #antes .carrossel{grid-column:1;min-width:0}
  [data-pagina=nova] #antes .comparativos{width:100%;margin-inline:0;padding:4px 30px 8px 6px;scroll-padding-inline:6px;grid-auto-columns:clamp(420px,40vw,470px);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)} /* a borda do trilho esmaece: sem fatia de cartão cortada; o último cartão para antes da faixa */
  [data-pagina=nova] #antes .carrossel-seta.proxima{right:-20px}
  [data-pagina=nova] #antes .carrossel-seta.anterior{left:-16px}
  [data-pagina=nova] .antes-lado{display:grid;grid-column:2;gap:var(--vao);justify-items:center;align-content:center}
  [data-pagina=nova] .puxa{width:100%;margin-top:0;padding:16px}
  [data-pagina=nova] .puxa-links{flex-direction:column;gap:2px}
  [data-pagina=nova] .btn-puxa{white-space:normal;text-align:center;justify-content:center;padding:10px 18px;line-height:1.15}
  /* Cartão: "Contexto e limites" e os botões de compartilhar na mesma linha (aberto, o contexto ocupa a linha toda) */
  [data-pagina=nova] .comp{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:center;padding:clamp(9px,2svh,14px);gap:clamp(5px,1.1svh,8px) 10px}
  [data-pagina=nova] .comp>:is(.comp-tema,h3,.comp-lados,.comp-contexto[open]){grid-column:1/-1}
  [data-pagina=nova] .comp-acoes{margin-top:0;padding-top:0;flex-wrap:nowrap}
  [data-pagina=nova] .comp-acoes .mini{flex:0 0 auto;min-width:112px}
  [data-pagina=nova] .comp-acoes{grid-column:2}
  [data-pagina=nova] .comp-contexto{grid-column:1}
  [data-pagina=nova] .comp-contexto[open]~.comp-acoes{grid-column:1/-1}
  [data-pagina=nova] .comp h3{font-size:clamp(15px,2.8svh,20px)}
  [data-pagina=nova] .comp-lado{padding:clamp(6px,1.5svh,12px);gap:clamp(2px,.6svh,4px)}
  [data-pagina=nova] .comp-quem img{width:clamp(26px,4.6svh,32px);height:clamp(26px,4.6svh,32px)}
  [data-pagina=nova] .comp-quem{font-size:clamp(13px,2.2svh,14px)}
  [data-pagina=nova] .comp-fonte{min-height:clamp(38px,6.6svh,44px)}
  [data-pagina=nova] .comp-tema{font-size:clamp(11.5px,2.1svh,14px);line-height:1.1}
  [data-pagina=nova] #antes>.temas button{min-height:clamp(40px,6.8svh,44px)}
  [data-pagina=nova] #antes>.temas{gap:clamp(4px,1vw,8px)}
  [data-pagina=nova] #antes>.temas button{padding-inline:clamp(.6em,1.6vw,1.05em);font-size:clamp(13px,2.1vw,15px)} /* os seis filtros cabem numa linha desde 700 px */
}

/* Fecho: o logo e a marca acompanham a altura da tela */
@media (min-width:700px) and (min-height:521px){
  [data-pagina=nova] .fecho{gap:var(--vao)}
  [data-pagina=nova] .fecho-logo{width:min(620px,100%,calc(var(--u) * .3 * 2.26))}
  [data-pagina=nova] .fecho-marca{width:min(340px,70%,calc(var(--u) * .2 * 1.98));margin-top:0}
  [data-pagina=nova] .fecho .btn-vermelho{min-height:clamp(44px,7.6svh,58px)}
}

/* Hero em duas colunas também de 700 a 899 px quando a janela é quase quadrada ou deitada (largura/altura de 7/8 em diante): a coluna única passava de uma tela.
   Mesma grade da base (a partir de 900 px); card e placa seguem a altura, a coluna do texto a largura. */
@media (min-width:700px) and (max-width:899.98px) and (min-aspect-ratio:7/8) and (min-height:521px),(min-width:900px) and (max-width:1100px) and (orientation:portrait) and (min-aspect-ratio:7/8) and (min-height:521px){
  [data-pagina=nova] .hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(20px,3.4vw,40px);min-height:calc(100svh - var(--topo));padding-top:0;padding-bottom:var(--margem)}
  [data-pagina=nova] .hero-logo{width:min(560px,100%,calc((100svh - var(--topo) - 40px) / .442))}
  [data-pagina=nova] .hero-acao{width:min(500px,42vw);grid-template-columns:minmax(0,1fr)} /* a trilha não cresce com o texto: sem rolagem lateral */
  [data-pagina=nova] .hero-duo{justify-content:start;column-gap:clamp(14px,3.2vw,26px)}
  [data-pagina=nova] .hero-card{width:min(clamp(100px,14vw,148px),17svh)}
  [data-pagina=nova] .placar{--pw:min(200px,19vw,24svh)}
}

/* Hero em coluna única (janela estreita e alta, de 700 a 899 px): o logo acompanha a altura, como nas duas colunas */
@media (min-width:700px) and (max-width:1100px) and (max-aspect-ratio:7/8) and (min-height:521px){
  [data-pagina=nova] .hero-logo{width:min(560px,100%,calc(var(--u) * .22 * 2.26))}
}

/* Como convidar: duas colunas desde 700 px (a regra de celular, até 759 px, empilhava e passava de uma tela); a arte acompanha a altura */
@media (min-width:700px) and (min-height:521px){
  [data-pagina=nova] .convidar-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);justify-items:normal;gap:clamp(16px,4vw,56px)}
  [data-pagina=nova] .convidar-arte{max-width:min(360px,calc(var(--u) * .5))}
  [data-pagina=nova] .convidar-texto{justify-items:start;width:auto}
  [data-pagina=nova] .convidar-acoes{width:min(380px,100%)}
}

/* Tentaram nos calar: abaixo de 780 px o texto e os botões (com o rótulo longo "Copiar legenda e baixar imagem") ficam um sobre o outro,
   para o texto não ficar espremido numa coluna estreita */
@media (min-width:700px) and (max-width:779.98px) and (min-height:521px){
  [data-pagina=nova] .calar-virada{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  [data-pagina=nova] .calar-virada .acoes{justify-content:center}
}

/* 14/10, Thiago: "não gosto do logo de um lado e toda a informação amassada do outro". Com espaço para duas colunas,
   o hero vira uma grade 2 × 2: em cima o logo e a mensagem (censura, frase e subtítulo); embaixo a arte com o placar
   e a chamada com o botão. .hero-acao some da caixa (display:contents) e cada item vai para a sua área. */
@media (min-width:700px) and (min-height:521px) and (min-aspect-ratio:7/8){
  [data-pagina=nova] .hero{--alt:calc(100svh - var(--topo));grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto;
    grid-template-areas:"logo tag" "logo den" "logo frase" "logo conv" "duo cham" "duo btn";align-content:center;align-items:center;justify-items:center;
    column-gap:clamp(24px,4vw,72px);row-gap:0;min-height:var(--alt);padding-block:clamp(8px,2svh,28px)}
  [data-pagina=nova] .hero-acao{display:contents}
  [data-pagina=nova] .hero-logo{grid-area:logo;align-self:center;width:min(100%,640px,calc(var(--alt) * .5 * 2.26))}
  [data-pagina=nova] .hero-tag{grid-area:tag;align-self:end}
  [data-pagina=nova] .hero-denuncia{grid-area:den;max-width:52ch;margin-top:clamp(6px,1.2svh,12px)}
  [data-pagina=nova] .hero-frase{grid-area:frase;margin-top:clamp(10px,2.4svh,26px);font-size:clamp(24px,min(3vw,5.2svh),46px)}
  [data-pagina=nova] .hero-acao>.hero-convite{grid-area:conv;max-width:46ch;margin-top:clamp(4px,1svh,10px);align-self:start}
  [data-pagina=nova] .hero-duo{grid-area:duo;justify-content:center;margin-top:clamp(14px,3.2svh,40px);padding-block:0}
  [data-pagina=nova] .hero-card{width:min(clamp(100px,13vw,190px),22svh)}
  [data-pagina=nova] .placar{--pw:min(260px,19vw,28svh)}
  [data-pagina=nova] .hero-chamada{grid-area:cham;align-self:end;margin:clamp(14px,3.2svh,40px) 0 clamp(8px,1.4svh,14px)}
  [data-pagina=nova] .hero-btn{grid-area:btn;align-self:start;width:min(100%,460px)}
}
/* De 700 a 999 px as duas colunas ficam estreitas: a arte com o placar sobe para o lado da frase e a chamada com o botão
   vira uma faixa inteira embaixo, para a coluna da direita não ficar com 5 dos 7 itens. */
@media (min-width:700px) and (max-width:999.98px) and (min-height:521px) and (min-aspect-ratio:7/8){
  [data-pagina=nova] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"logo tag" "logo den" "duo frase" "duo conv" "cham cham" "btn btn"}
  [data-pagina=nova] .hero-logo{width:min(100%,calc(var(--alt) * .32 * 2.26))}
  [data-pagina=nova] .hero-tag{font-size:clamp(13px,1.9vw,17px);white-space:nowrap}
  [data-pagina=nova] .hero-duo{margin-top:clamp(10px,2svh,24px)}
  [data-pagina=nova] .hero-card{width:min(15vw,24svh)}
  [data-pagina=nova] .placar{--pw:min(18vw,28svh)}
  [data-pagina=nova] .hero-duo{column-gap:clamp(12px,2.4vw,24px)}
  [data-pagina=nova] .hero-chamada{margin-top:clamp(12px,2.6svh,32px)}
  [data-pagina=nova] .hero-btn{width:min(100%,520px)}
}
/* Pronto para compartilhar (#mandar), 14/10: com os posts carregados a seção passava da tela. Mesma conta do #acervo de /espalhar:
   a largura do cartão sai da altura útil (--u) menos o que a seção já gasta (respiro, título, apoio, vãos, filtros, link e crédito).
   Só a home, só de 700 px de largura e 521 de altura em diante; o celular não muda. */
@media (min-width:700px) and (min-height:521px){
  [data-pagina=nova] #mandar{
    --pv:clamp(12px,min(5vw,2.8svh),72px);--lk:clamp(32px,6svh,44px);--btn:clamp(32px,5.6svh,44px);--S:clamp(14px,2.4svh,19px);--C:clamp(12px,1.9svh,14px);--filtros:calc(2 * var(--btn) + 15px);
    /* sobra para o trilho: altura útil - respiro - título (1,38 em) - apoio (2 linhas) - 4 vãos - margem do filtro - filtros - linha do link e do crédito (a maior das duas) - 12 de segurança */
    --trilho:calc(var(--u) - 2 * var(--pv) - 1.38 * var(--tfs) - 2.6 * var(--S) - 4 * var(--vao) - 12px - var(--filtros) - max(var(--lk), 4.1 * var(--C)) - 12px);
    --w:clamp(112px,calc((var(--trilho) - 92px) * .8),280px);
  }
  [data-pagina=nova] #mandar .pecas{grid-auto-columns:var(--w);min-height:calc(var(--w) * 1.25 + 88px)}
  /* O botão do post acompanha a largura do cartão: no cartão pequeno o texto cabe dentro do botão */
  [data-pagina=nova] #mandar .peca-acoes .mini{font-size:clamp(11px,calc(var(--w) * .095),14px);padding-inline:.3em}
  /* O link "Ver todo o acervo" e o crédito dividem a mesma linha (poupa uma linha inteira em janela baixa) */
  [data-pagina=nova] #mandar{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,2vw,28px)}
  [data-pagina=nova] #mandar>*{grid-column:1/-1}
  [data-pagina=nova] #mandar>.bloco-pe{grid-column:1;align-self:center}
  [data-pagina=nova] #mandar .bloco-pe .link{min-height:var(--lk)}
  [data-pagina=nova] #mandar>.credito{grid-column:2;align-self:center;max-width:none;font-size:var(--C);line-height:1.35}
  /* Formato e temas quebram linha juntos (display:contents põe os botões do tema no fluxo das abas), em chips menores em janela baixa */
  [data-pagina=nova] #mandar .filtros{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-items:center;gap:8px;min-height:var(--filtros)}
  [data-pagina=nova] #mandar .temas{display:contents}
  [data-pagina=nova] #mandar .abas button{min-height:calc(var(--btn) - 6px)}
  [data-pagina=nova] #mandar .temas button{min-height:var(--btn);padding-inline:clamp(10px,min(2.1svh,1.9vw),17px);font-size:clamp(13px,min(2.4svh,1.95vw),15px)}
}