/* =========================================================
   Chapa A Voz da Base · Manual de Identidade · tokens
   OPS! Comunicação Visual · v1 · 28/10/2026
   ========================================================= */
:root{
  /* ---- cores da marca ---- */
  --vb-royal:   #0033A0;  /* fundo principal das peças */
  --vb-marinho: #1E1B78;  /* traço da logo, texto sobre claro */
  --vb-verde:   #00923F;  /* quadrado da logo, "DA" */
  --vb-vivo:    #3DBE3A;  /* verde para texto sobre royal */
  --vb-amarelo: #FFC800;  /* balão, destaques */
  --vb-branco:  #FFFFFF;
  --vb-gelo:    #EEF3FA;  /* fundo claro alternativo */
  --vb-noite:   #001F66;  /* royal escuro: degradê e sombra */

  /* ---- tipografia ---- */
  --vb-display: "Archivo", "Arial Black", Arial, sans-serif;     /* títulos: wght 800–900, wdth 100–112 */
  --vb-texto:   "Atkinson Hyperlegible", Verdana, Arial, sans-serif; /* textos: legibilidade para 50+ */

  /* escala para peça de 1080 px de largura */
  --vb-t-hero: 128px;   /* 1 palavra-chave */
  --vb-t-h1:   96px;    /* título principal */
  --vb-t-h2:   64px;    /* subtítulo / nome */
  --vb-t-h3:   46px;    /* chamada / data */
  --vb-t-body: 38px;    /* texto corrido */
  --vb-t-min:  32px;    /* nada menor que isso em peça de 1080 px */

  /* ---- forma ---- */
  --vb-raio: 34px;            /* cantos do quadrado da logo (em 1080 px) */
  --vb-traco: 18px;           /* espessura do contorno do balão */
  --vb-inclinacao: -6deg;     /* etiquetas e faixas */
  --vb-margem: 72px;          /* margem de segurança em 1080 px */

  /* ---- movimento ---- */
  --vb-ease-pop: cubic-bezier(.34,1.56,.64,1);   /* entrada com leve "salto" */
  --vb-ease-out: cubic-bezier(.16,1,.3,1);       /* saída suave */
  --vb-dur: 600ms;
}

/* =========================================================
   avozdabase.com.br · estilo do site
   Segue o Manual de Identidade (tokens.css). OPS! Comunicação Visual
   ========================================================= */


*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--vb-texto);color:var(--vb-marinho);background:#fff;font-size:19px;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--vb-royal)}
h1,h2,h3{font-family:var(--vb-display);font-weight:900;font-stretch:108%;line-height:1;margin:0;text-transform:uppercase;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--vb-amarelo);outline-offset:3px;border-radius:6px}
section{padding-block:clamp(64px,9vw,112px);position:relative}

/* ---------- pecinhas da marca ---------- */
.eb{display:inline-flex;align-items:center;gap:10px;font-family:var(--vb-display);font-weight:800;font-stretch:112%;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--vb-verde)}
.eb::before{content:"";width:28px;height:4px;border-radius:4px;background:currentColor}
.h2{font-size:clamp(34px,5.6vw,64px);margin-top:14px}
.h2 em{font-style:normal;color:var(--vb-verde)}
.lead{font-size:clamp(19px,2vw,22px);max-width:58ch;margin-top:18px;color:#3A3F78}
.tag{display:inline-block;transform:rotate(var(--vb-inclinacao));background:var(--vb-amarelo);color:var(--vb-marinho);font-family:var(--vb-display);font-weight:900;text-transform:uppercase;line-height:1.15;padding:10px 18px 8px;border-radius:10px;box-shadow:0 0 0 4px #fff,6px 7px 0 4px var(--vb-marinho);font-size:clamp(14px,1.6vw,18px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 28px;border-radius:999px;font-family:var(--vb-display);font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--vb-ease-pop),box-shadow .2s;line-height:1.1;text-align:center}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px)}
.btn svg{width:22px;height:22px;flex:none}
.btn-am{background:var(--vb-amarelo);color:var(--vb-marinho);box-shadow:0 0 0 4px #fff,6px 7px 0 4px var(--vb-marinho)}
.btn-am:hover{box-shadow:0 0 0 4px #fff,8px 10px 0 4px var(--vb-marinho)}
.btn-ln{color:#fff;border:2px solid rgba(255,255,255,.65)}
.btn-ln:hover{background:rgba(255,255,255,.1)}
.btn-rl{background:var(--vb-royal);color:#fff}
.btn-zap{background:#1FAF54;color:#fff}
.pontos{background-image:radial-gradient(rgba(255,255,255,.08) 2px,transparent 2.4px);background-size:30px 30px}
.raios{width:64px;height:auto}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #E3E8F2;transition:box-shadow .3s}
.topo.sombra{box-shadow:0 10px 30px -18px rgba(0,31,102,.45)}
.topo .wrap{display:flex;align-items:center;gap:16px;min-height:74px}
.topo .logo img{height:50px;width:auto}
.topo nav{display:flex;gap:2px;margin-left:auto}
.topo nav a{font-family:var(--vb-display);font-weight:700;font-size:16px;text-decoration:none;color:var(--vb-marinho);padding:10px 13px;border-radius:99px}
.topo nav a:hover,.topo nav a[aria-current]{background:var(--vb-gelo)}
.topo .btn{min-height:46px;padding:0 20px;font-size:15px;box-shadow:none}
.menu{display:none;margin-left:auto;background:var(--vb-gelo);border:0;border-radius:14px;width:52px;height:52px;color:var(--vb-marinho);cursor:pointer}
.menu svg{width:26px;height:26px;margin:auto}
@media (max-width:960px){
  .topo nav{display:none;position:absolute;top:74px;left:12px;right:12px;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 24px 50px -20px rgba(0,31,102,.5);padding:10px}
  .topo nav.aberto{display:flex}
  .topo nav a{font-size:20px;padding:14px 16px}
  .topo .btn{display:none}
  .menu{display:grid}
}

/* ---------- abertura ---------- */
.hero{background:var(--vb-royal);color:#fff;overflow:hidden;padding-block:clamp(40px,6vw,80px) clamp(70px,9vw,120px)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 2px,transparent 2.4px);background-size:30px 30px}
.hero::after{content:"";position:absolute;width:780px;height:780px;right:-260px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(61,190,58,.22),transparent);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(44px,6.4vw,86px);margin-top:30px;letter-spacing:-.01em}
.hero h1 .l{display:block}
.hero h1 .am{color:var(--vb-amarelo);position:relative;display:inline-block}
.hero h1 .am svg{position:absolute;left:0;right:0;bottom:-.2em;width:100%;height:.3em;overflow:visible}
.hero h1 .am path{stroke-dasharray:420;stroke-dashoffset:420;animation:risca 1s var(--vb-ease-out) 2.8s forwards}
@keyframes risca{to{stroke-dashoffset:0}}
.hero .sub{font-size:clamp(19px,2vw,23px);color:#D7E0F5;margin-top:26px;max-width:44ch}
.hero .sub b{color:#fff}
.hero .ctas{display:flex;flex-wrap:wrap;gap:18px 16px;margin-top:34px}
.hero .palco{position:relative;max-width:480px;width:100%;margin:0 auto}
.hero .palco svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 30px 40px rgba(0,15,60,.35))}
.faixas{position:absolute;right:-60px;bottom:-90px;width:360px;height:360px;background:url("img/faixas.svg") center/contain no-repeat;transform:scaleX(-1);pointer-events:none}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;text-align:left}
  .hero .palco{max-width:200px;order:-1;margin:0}
  .contagem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .contagem div{min-width:0;padding:10px 4px}
  .contagem b{font-size:28px}
  .contagem .dt b{font-size:22px;line-height:1.4}
  .hero h1{margin-top:22px}
  .faixas{width:200px;height:200px;right:-60px;bottom:-60px;opacity:.85}
}

/* logo animada (mesma coreografia do motion da marca) */
.lg-square,.lg-bubble,.lg-hands-in,.lg-top,.lg-name,.lg-da{transform-box:fill-box}
.lg-square{transform-origin:center;animation:sq .55s var(--vb-ease-pop) .2s both}
.lg-bubble{transform-origin:50% 60%;animation:bub .7s var(--vb-ease-pop) .45s both}
.lg-hands-in{transform-origin:52% 32%;animation:wipe .65s var(--vb-ease-out) .9s both,squeeze .55s ease-in-out 1.55s}
.lg-ray path{stroke-dasharray:100;animation:draw .35s var(--vb-ease-out) both}
.lg-ray:nth-child(1) path{animation-delay:1.65s}
.lg-ray:nth-child(2) path{animation-delay:1.78s}
.lg-ray:nth-child(3) path{animation-delay:1.91s}
.lg-top{animation:fade .5s var(--vb-ease-out) 1.9s both}
.lg-name{animation:rise .6s var(--vb-ease-out) 2.1s both}
.lg-da{transform-origin:center;animation:pop .45s var(--vb-ease-pop) 2.65s both}
.lg-swoosh{stroke-dasharray:1000;stroke-dashoffset:1000;animation:sw .6s var(--vb-ease-out) 2.7s both}
@keyframes sq{from{transform:scale(.35);opacity:0}to{transform:none;opacity:1}}
@keyframes bub{from{transform:translateY(-90px) rotate(-16deg) scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes squeeze{0%,100%{transform:none}40%{transform:scale(1.07)}70%{transform:scale(1.015)}}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes sw{to{stroke-dashoffset:0}}
.palco .lg-rays{animation:fala 3.2s ease-in-out 3.4s infinite}
@keyframes fala{0%,70%,100%{transform:none}78%{transform:translateX(6px)}86%{transform:translateX(0)}92%{transform:translateX(4px)}}

/* contagem */
.contagem{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.contagem div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:10px 16px;text-align:center;min-width:92px}
.contagem b{display:block;font-family:var(--vb-display);font-weight:900;font-size:36px;line-height:1.1;font-variant-numeric:tabular-nums}
.contagem span{font-size:14px;color:#C9D5F0}
.contagem .dt{background:var(--vb-amarelo);border-color:var(--vb-amarelo);color:var(--vb-marinho)}
.contagem .dt span{color:var(--vb-marinho)}

/* ---------- faixa que corre ---------- */
.faixa-w{position:relative;z-index:5;background:linear-gradient(var(--vb-royal) 50%,var(--vb-marinho) 50%);padding:22px 0;overflow:hidden}
.faixa{background:var(--vb-amarelo);color:var(--vb-marinho);transform:rotate(-2.2deg);margin:0 -40px;position:relative;border-block:5px solid #fff;box-shadow:0 12px 0 -4px var(--vb-marinho);overflow:hidden}
.faixa .trilho{display:flex;width:max-content;animation:corre 38s linear infinite}
.faixa ul{display:flex;list-style:none;margin:0;padding:16px 0;gap:0}
.faixa li{font-family:var(--vb-display);font-weight:900;font-stretch:112%;text-transform:uppercase;font-size:clamp(18px,2.2vw,26px);white-space:nowrap;display:flex;align-items:center}
.faixa li::after{content:"";width:16px;height:16px;border-radius:5px;background:var(--vb-verde);margin:0 26px;transform:rotate(45deg)}
@keyframes corre{to{transform:translateX(-50%)}}
.faixa:hover .trilho{animation-play-state:paused}

/* ---------- o movimento (manifesto) ---------- */
.movimento{background:var(--vb-marinho);color:#fff}
.movimento .wrap{display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,5vw,70px)}
.movimento .lado{position:sticky;top:110px;align-self:start}
.movimento .eb{color:var(--vb-vivo)}
.movimento .lado h2{font-size:clamp(30px,3.6vw,44px);margin-top:16px}
.movimento .lado .raios{margin-top:22px}
.manifesto{font-family:var(--vb-display);font-weight:800;font-stretch:100%;font-size:clamp(26px,3.5vw,44px);line-height:1.28;letter-spacing:-.005em}
.manifesto .w{color:rgba(255,255,255,.2);transition:color .35s}
.manifesto .w.on{color:#fff}
.manifesto .w.k{position:relative}
.manifesto .w.k.on{color:var(--vb-amarelo)}
.movimento .assina{display:flex;align-items:center;gap:16px;margin-top:44px;font-size:17px;color:#C9CDF0}
.movimento .assina img{width:64px;height:64px}
@media (max-width:860px){.movimento .wrap{grid-template-columns:1fr}.movimento .lado{position:static}}

/* ---------- resgates ---------- */
.resgates{background:var(--vb-gelo)}
.r-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.r-card{background:#fff;border-radius:26px;padding:28px 24px 30px;position:relative;box-shadow:0 0 0 3px var(--vb-marinho);transition:transform .35s var(--vb-ease-pop),box-shadow .35s}
.r-card:hover{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 0 0 3px var(--vb-marinho),8px 12px 0 3px var(--vb-amarelo)}
.r-card .n{width:62px;height:62px;border-radius:17px;background:var(--vb-verde);color:#fff;display:grid;place-items:center;font-family:var(--vb-display);font-weight:900;font-size:28px}
.r-card:nth-child(2) .n{background:var(--vb-royal)}
.r-card:nth-child(3) .n{background:var(--vb-amarelo);color:var(--vb-marinho)}
.r-card:nth-child(4) .n{background:var(--vb-marinho)}
.r-card h3{font-size:clamp(19px,1.75vw,23px);font-stretch:88%;margin-top:20px;overflow-wrap:break-word}
.r-card p{font-size:17px;margin-top:10px;color:#3A3F78}
@media (max-width:980px){.r-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.r-grid{grid-template-columns:1fr}}

/* ---------- a chapa ---------- */
.chapa-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px}
.filtro{display:flex;flex-wrap:wrap;gap:8px}
.filtro button{font-family:var(--vb-display);font-weight:800;font-size:15px;min-height:46px;padding:0 20px;border-radius:99px;border:2px solid var(--vb-royal);background:#fff;color:var(--vb-royal);cursor:pointer}
.filtro button{display:inline-flex;align-items:center;gap:8px;transition:transform .2s var(--vb-ease-pop),background .2s,color .2s}
.filtro button:hover{transform:translateY(-2px)}
.filtro button[aria-pressed="true"]{background:var(--vb-royal);color:#fff}
.filtro button i{font-style:normal;min-width:26px;height:26px;padding:0 6px;border-radius:99px;background:var(--vb-gelo);color:var(--vb-royal);display:grid;place-items:center;font-size:13px}
.filtro button[aria-pressed="true"] i{background:var(--vb-amarelo);color:var(--vb-marinho)}
.entra-f{animation:entraF .5s var(--vb-ease-pop) both}
@keyframes entraF{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.destaque{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
.time{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 18px;margin-top:34px}
.time .titulo{grid-column:1/-1;font-family:var(--vb-display);font-weight:900;font-size:22px;text-transform:uppercase;padding-top:22px;border-top:2px solid #E3E8F2;margin-top:6px}
.pessoa{display:block;text-decoration:none;color:inherit;position:relative}
.pessoa .bal{position:relative}
.pessoa .bal svg{width:100%;height:auto;overflow:visible}
.pessoa .bal image{transition:transform .5s var(--vb-ease-out);transform-origin:50% 45%}
.pessoa:hover .bal image{transform:scale(1.07)}
.pessoa .bal .rz{position:absolute;right:-6%;top:6%;width:22%;opacity:0;transform:translateX(-12px);transition:.35s var(--vb-ease-pop)}
.pessoa:hover .bal .rz,.pessoa:focus-visible .bal .rz{opacity:1;transform:none}
.pessoa .uf{position:absolute;left:6%;bottom:16%;background:var(--vb-verde);color:#fff;font-family:var(--vb-display);font-weight:900;font-size:14px;padding:4px 10px;border-radius:8px;box-shadow:0 0 0 3px #fff}
.pessoa b{display:block;font-family:var(--vb-display);font-weight:800;font-size:18px;line-height:1.15;margin-top:6px}
.pessoa span{display:block;font-size:15px;color:#4A5080;line-height:1.35;margin-top:4px}
.destaque .pessoa{display:grid;grid-template-columns:.9fr 1fr;gap:18px;align-items:center;background:var(--vb-gelo);border-radius:28px;padding:20px}
.destaque .pessoa b{font-size:clamp(22px,2.4vw,30px);font-weight:900;text-transform:uppercase}
.destaque .pessoa .cg{display:inline-block;margin-bottom:10px;font-size:14px;padding:6px 14px;transform:rotate(-3deg)}
@media (max-width:980px){.time{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.destaque{grid-template-columns:1fr}}
@media (max-width:540px){.time{grid-template-columns:1fr 1fr;gap:22px 14px}.pessoa b{font-size:16px}.pessoa span{font-size:14px}.destaque .pessoa{grid-template-columns:.8fr 1fr;padding:14px}}

/* ---------- a rede ---------- */
.rede{background:var(--vb-royal);color:#fff;overflow:hidden}
.rede::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 2px,transparent 2.4px);background-size:30px 30px}
.rede .wrap{position:relative}
.rede .eb{color:var(--vb-vivo)}
.rede .lead{color:#D7E0F5}
.rede-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:30px}
.numeros{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.numeros div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:18px 20px}
.numeros div:first-child{grid-column:1/-1;background:var(--vb-amarelo);color:var(--vb-marinho);border:0}
.numeros b{display:block;font-family:var(--vb-display);font-weight:900;font-size:clamp(44px,6vw,72px);line-height:1;font-variant-numeric:tabular-nums}
.numeros span{font-size:16px}
.mapa{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;max-width:500px;margin:0 auto}
.mapa .v{aspect-ratio:1}
.uf-b{aspect-ratio:1;border-radius:12px;display:grid;place-content:center;font-family:var(--vb-display);font-weight:800;font-size:15px;line-height:1.05;text-align:center;cursor:pointer;transition:transform .25s var(--vb-ease-pop);border:0;padding:0;font-stretch:100%}
.uf-b small{display:block;font-size:12px;font-weight:700;opacity:.85;margin-top:2px}
.uf-b:hover,.uf-b:focus-visible{transform:scale(1.16);z-index:2;position:relative}
.uf-b.n3{background:var(--vb-amarelo);color:var(--vb-marinho)}
.uf-b.n2{background:#fff;color:var(--vb-royal)}
.uf-b.n1{background:#7FA0E6;color:#fff}
.uf-b.n0{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 6px,transparent 6px 12px)}
.leg{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:14px;color:#D7E0F5}
.leg i{display:inline-block;width:16px;height:16px;border-radius:5px;vertical-align:-3px;margin-right:6px}
.rede .nota{font-size:14px;color:#AFC0E8;margin-top:14px;text-align:center}
@media (max-width:860px){.rede-grid{grid-template-columns:1fr}.uf-b{font-size:13px;border-radius:9px}.uf-b small{font-size:10px}.mapa{gap:5px}}

/* ---------- propostas ---------- */
.eixos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.eixo{background:var(--vb-royal);color:#fff;border-radius:24px;padding:26px;min-height:210px}
.eixo .n{width:54px;height:54px;border-radius:14px;background:var(--vb-verde);display:grid;place-items:center;font-family:var(--vb-display);font-weight:900;font-size:24px}
.eixo h3{font-size:22px;margin-top:16px}
.eixo p{font-size:16px;color:#D7E0F5;margin-top:8px}
@media (max-width:900px){.eixos{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.eixos{grid-template-columns:1fr}}

/* ---------- como votar + agenda ---------- */
.votar .h2{font-size:clamp(32px,4.2vw,52px)}
.votar .duas{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px)}
.passos{counter-reset:p;display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none}
.passos li{display:flex;gap:16px;align-items:flex-start;background:var(--vb-gelo);border-radius:20px;padding:18px 20px}
.passos li::before{counter-increment:p;content:counter(p);flex:none;width:46px;height:46px;border-radius:13px;background:var(--vb-royal);color:#fff;display:grid;place-items:center;font-family:var(--vb-display);font-weight:900;font-size:22px}
.passos li span{padding-top:7px}
.votar .acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.agenda-l{display:grid;gap:14px;margin-top:30px}
.ag{background:#fff;border:2px solid #E3E8F2;border-radius:22px;padding:18px;display:flex;gap:18px;align-items:center}
.ag .dt{flex:none;background:var(--vb-amarelo);border-radius:16px;width:78px;padding:12px 6px;text-align:center;font-family:var(--vb-display);font-weight:900;line-height:1;text-transform:uppercase;font-size:15px}
.ag .dt b{display:block;font-size:32px}
.ag h3{font-size:19px}
.ag p{margin-top:4px;font-size:16px;color:#4A5080}
.ag a{font-weight:700}
.ag.vazio{border-style:dashed}
.ag.vazio .dt{background:var(--vb-gelo)}
@media (max-width:860px){.votar .duas{grid-template-columns:1fr}}

/* ---------- participe ---------- */
.part{background:var(--vb-verde);color:#fff;overflow:hidden}
.part::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 2px,transparent 2.4px);background-size:30px 30px}
.part .wrap{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.part .wrap>*{min-width:0}
.part .eb{color:var(--vb-amarelo)}
.part h2 span{color:var(--vb-amarelo)}
.part .lead{color:#E6F6EA}
.part .beneficios{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.part .beneficios li{display:flex;gap:12px;align-items:flex-start;font-size:18px}
.part .beneficios li::before{content:"";flex:none;width:28px;height:28px;border-radius:9px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%2300923F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;margin-top:1px}
.cartao{background:#fff;color:var(--vb-marinho);border-radius:30px;padding:clamp(22px,3vw,34px);box-shadow:10px 12px 0 0 var(--vb-marinho)}
.progresso{display:flex;gap:8px;margin-bottom:22px}
.progresso i{flex:1;height:8px;border-radius:8px;background:#E3E8F2;transition:background .4s}
.progresso i.on{background:var(--vb-verde)}
.passo-n{font-family:var(--vb-display);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--vb-verde)}
.etapa h3{font-size:clamp(24px,2.8vw,32px);margin:8px 0 18px}
.etapa[hidden]{display:none}
.etapa.entra{animation:entra .45s var(--vb-ease-out)}
@keyframes entra{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.ufs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.ufs button,.opcoes button{font-family:var(--vb-display);font-weight:800;font-size:17px;min-height:56px;border-radius:14px;border:2px solid #D3DBEA;background:#fff;color:var(--vb-marinho);cursor:pointer;transition:.15s}
.ufs button:hover,.opcoes button:hover{border-color:var(--vb-royal)}
.ufs button[aria-pressed="true"],.opcoes button[aria-pressed="true"]{background:var(--vb-royal);border-color:var(--vb-royal);color:#fff}
.opcoes{display:grid;gap:10px}
.opcoes button{min-height:66px;font-size:20px;text-align:left;padding:0 22px;display:flex;align-items:center;gap:14px}
.opcoes button i{width:26px;height:26px;border-radius:50%;border:3px solid currentColor;flex:none;opacity:.5}
.opcoes button[aria-pressed="true"] i{opacity:1;background:var(--vb-amarelo);border-color:var(--vb-amarelo)}
.campos{display:grid;gap:14px}
.campos label{font-family:var(--vb-display);font-weight:700;font-size:15px;display:grid;gap:6px}
.campos input{width:100%;min-width:0;min-height:56px;border:2px solid #D3DBEA;border-radius:14px;padding:0 16px;font:inherit;font-size:19px;color:var(--vb-marinho);background:#fff}
.campos input:focus{outline:none;border-color:var(--vb-royal);box-shadow:0 0 0 4px rgba(0,51,160,.12)}
.ck{display:flex!important;grid-template-columns:none!important;gap:12px;align-items:flex-start;font-family:var(--vb-texto)!important;font-weight:400!important;font-size:16px!important;line-height:1.45;cursor:pointer}
.ck input{min-height:0!important;width:26px!important;height:26px;flex:none;accent-color:var(--vb-verde);margin-top:0}
.ck a{color:var(--vb-royal)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.navega{display:flex;gap:12px;align-items:center;margin-top:22px}
.navega .btn{flex:1}
.voltar{background:none;border:0;font-family:var(--vb-display);font-weight:800;font-size:16px;color:#4A5080;cursor:pointer;padding:12px 8px;text-decoration:underline;text-underline-offset:4px}
.erro{color:#B42318;font-weight:700;font-size:16px;min-height:1.4em;margin-top:12px}
.pronto{text-align:center}
.pronto .selo{width:110px;height:110px;margin:0 auto 6px;animation:pop2 .7s var(--vb-ease-pop)}
@keyframes pop2{from{transform:scale(.3) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.pronto h3{font-size:clamp(26px,3vw,34px);margin:10px 0}
.pronto p{font-size:18px}
.desafio{margin-top:22px;background:var(--vb-gelo);border-radius:22px;padding:20px;text-align:left}
.desafio b{font-family:var(--vb-display);font-weight:900;text-transform:uppercase;font-size:20px;display:block}
.desafio p{font-size:16px;margin:6px 0 14px}
.desafio .btn{width:100%}
@media (max-width:860px){.part .wrap{grid-template-columns:1fr}}

/* ---------- rodapé ---------- */
.rodape{background:var(--vb-marinho);color:#C9CDF0;padding-block:52px 40px;font-size:16px}
.rodape .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:28px 40px;align-items:center}
.rodape img{height:64px;width:auto}
.rodape a{color:#fff}
.rodape .links{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--vb-display);font-weight:700}
.rodape .links a{text-decoration:none}
.rodape .links a:hover{text-decoration:underline}
.rodape small{grid-column:1/-1;display:block;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;font-size:14px;line-height:1.6;color:#A9AEDC}
.rodape .ig{display:inline-flex;align-items:center;gap:8px}
.rodape .ig svg{width:22px;height:22px}
@media (max-width:760px){.rodape .wrap{grid-template-columns:1fr}}

/* ---------- página do integrante ---------- */
.perfil{background:var(--vb-royal);color:#fff;overflow:hidden;padding-block:clamp(40px,6vw,80px) clamp(60px,8vw,100px)}
.perfil::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 2px,transparent 2.4px);background-size:30px 30px}
.perfil .wrap{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,5vw,64px);align-items:center}
.perfil .bal svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 30px 40px rgba(0,15,60,.35))}
.perfil .bal .rz{position:absolute;right:-4%;top:8%;width:18%}
.perfil .bal{position:relative;max-width:520px;animation:bub .8s var(--vb-ease-pop) both}
.perfil h1{font-size:clamp(38px,5.6vw,72px);margin-top:26px}
.perfil .info{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px;font-size:20px;color:#D7E0F5}
.perfil .info .ufb{background:var(--vb-verde);color:#fff;font-family:var(--vb-display);font-weight:900;padding:4px 12px;border-radius:9px}
.perfil .frase{font-family:var(--vb-display);font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.3;margin-top:26px;border-left:6px solid var(--vb-amarelo);padding-left:18px}
.perfil .ctas{display:flex;flex-wrap:wrap;gap:18px 14px;margin-top:32px}
.voltar-chapa{display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:var(--vb-display);font-weight:800;text-decoration:none;font-size:16px;opacity:.85}
.voltar-chapa:hover{opacity:1;text-decoration:underline}
.mais .video{aspect-ratio:9/16;max-width:360px;border-radius:24px;overflow:hidden;background:#000}
.mais .video iframe,.mais .video video{width:100%;height:100%;border:0}
.vizinhos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.vizinhos a{display:flex;gap:14px;align-items:center;background:var(--vb-gelo);border-radius:20px;padding:14px;text-decoration:none;color:var(--vb-marinho)}
.vizinhos a:last-child{flex-direction:row-reverse;text-align:right}
.vizinhos img{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:none}
.vizinhos small{display:block;font-size:14px;color:#4A5080}
.vizinhos b{font-family:var(--vb-display);font-weight:800;font-size:17px;line-height:1.2}
@media (max-width:860px){.perfil .wrap{grid-template-columns:1fr}.perfil .bal{max-width:340px}}
@media (max-width:560px){.vizinhos{grid-template-columns:1fr}.vizinhos a:last-child{flex-direction:row;text-align:left}}

/* ---------- texto (privacidade) ---------- */
.texto{max-width:760px}
.texto h2{font-size:clamp(22px,2.6vw,28px);margin:38px 0 10px}
.texto p,.texto li{font-size:18px;margin-top:10px}
.cabeca{background:var(--vb-royal);color:#fff;padding-block:56px}
.cabeca h1{font-size:clamp(36px,5vw,60px);margin-top:16px}

/* ---------- entrada ao rolar ---------- */
.rv{transition:opacity .8s var(--vb-ease-out),transform .8s var(--vb-ease-out)}
.rv.oculto{opacity:0;transform:translateY(34px)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv.oculto{opacity:1;transform:none}
  .manifesto .w{color:#fff}.manifesto .w.k{color:var(--vb-amarelo)}
  .hero h1 .am path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}