/* ========================================================================== VOTE NO PARTIDO — base.css Design system compartilhado por todas as páginas (vendas + modelos). Cada modelo de candidato só precisa sobrescrever os TOKENS de cor/número. Estrutura, componentes, acessibilidade e conformidade vivem aqui. ========================================================================== */ /* ============================================================ 1. TOKENS */ :root{ /* Paleta padrão = marca neutra/apartidária Vote no Partido. Páginas de candidato sobrescrevem estes tokens no próprio . */ --primaria:#123E6B; --primaria-densa:#0D2E50; --destaque:#F2B705; --confirma:#128A4E; --tinta:#1B2430; --tinta-rgb:27,36,48; /* mesmo valor de --tinta em RGB, p/ rgba() */ --branco:#FFFFFF; --papel:#F3F6FB; --linha:rgba(27,36,48,.14); --display:'Archivo','Arial',sans-serif; --texto:'Archivo','Arial',sans-serif; --peso-display:900; /* Anton usa 400; modelos Archivo usam 900 */ --raio:10px; --larg:1120px; /* Gutter lateral: mínimo confortável + safe-area (notch) + escala por viewport */ --gutter:max(24px, 5vw, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --vice-min:.34; /* proporção do nome do vice (regra TSE: mín. 30%) */ } /* ============================================================ 2. RESET */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } body{ font-family:var(--texto); color:var(--tinta); background:var(--branco); line-height:1.55; font-size:1.0625rem; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{font-family:var(--display);font-weight:var(--peso-display);letter-spacing:-.01em;line-height:1.03} /* ============================================================ 3. ACESSIBILIDADE */ :focus-visible{outline:3px solid var(--destaque);outline-offset:3px} .pular-conteudo{ position:absolute;left:12px;top:-60px;z-index:200; background:var(--tinta);color:#fff;padding:12px 18px;border-radius:8px; text-decoration:none;font-weight:700;transition:top .15s ease; } .pular-conteudo:focus{top:12px} .visually-hidden{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* Escala de fonte (botões A+/A−) */ html.fonte-a1{font-size:112.5%} html.fonte-a2{font-size:125%} /* Alto contraste — força uma paleta acessível independente da cor do candidato */ html.alto-contraste{ --primaria:#000000;--primaria-densa:#000000;--destaque:#FFEB00; --confirma:#005c1f;--tinta:#000000;--tinta-rgb:0,0,0; --branco:#FFFFFF;--papel:#FFFFFF;--linha:#000000; background:#fff; } html.alto-contraste body{background:#fff;color:#000} html.alto-contraste .card, html.alto-contraste .prop, html.alto-contraste .urna{border:2px solid #000} html.alto-contraste a{text-decoration:underline} /* ============================================================ 4. LAYOUT */ .container{ width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--gutter); box-sizing:border-box; } .secao{padding:88px 0} [id]{scroll-margin-top:120px} .eyebrow{ font-family:var(--display);font-weight:var(--peso-display);text-transform:uppercase; letter-spacing:.14em;font-size:1rem;color:var(--primaria-densa); display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:26px;height:4px;background:var(--primaria-densa)} h2{font-size:clamp(2.4rem,5vw,3.6rem);margin:14px 0 18px;text-transform:uppercase} .lead{font-size:1.15rem;max-width:60ch} .txt-suave{color:rgba(var(--tinta-rgb),.85)} @media(max-width:640px){ .secao{padding:56px 0} body{font-size:1rem} .lead{font-size:1.05rem} } /* Regra eleitoral: mostrar/esconder pedido de voto conforme o modo */ [data-modo="pre-campanha"] .so-campanha{display:none!important} [data-modo="campanha"] .so-pre{display:none!important} /* ============================================================ 5. BOTÕES */ .btn{ display:inline-block;text-decoration:none;font-family:var(--display); font-weight:var(--peso-display);text-transform:uppercase; font-size:1rem;letter-spacing:.06em;cursor:pointer;border:0; padding:13px 28px 11px;border-radius:var(--raio); transition:transform .15s ease,background .15s ease; } .btn:hover{transform:translateY(-2px)} .btn-amarelo{background:var(--destaque);color:var(--tinta)} .btn-azul{background:var(--tinta);color:var(--branco)} .btn-borda{border:2px solid currentColor} .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none} /* ============================================================ 6. AVISO DE DEMONSTRAÇÃO */ .demo-banner{ background:repeating-linear-gradient(45deg,#1B2430 0 16px,#26313f 16px 32px); color:#fff;font-size:.9rem;text-align:center; padding:9px 16px;line-height:1.4; } .demo-banner strong{color:var(--destaque)} .demo-nota{ display:block;margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.55); } /* ============================================================ 7. HEADER / NAV */ header.topo{position:sticky;top:0;z-index:50;background:var(--primaria);color:var(--branco)} .header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px} .marca{display:flex;align-items:center;gap:12px;text-decoration:none} .marca .num{ font-family:var(--display);font-weight:var(--peso-display);font-size:1.45rem;line-height:1; background:var(--branco);color:var(--primaria);padding:5px 10px 2px;border-radius:6px; } .marca .nome{font-family:var(--display);font-weight:var(--peso-display);font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase} nav.principal ul{display:flex;gap:26px;list-style:none} nav.principal a{ text-decoration:none;font-weight:700;font-size:.95rem;text-transform:uppercase; letter-spacing:.06em;border-bottom:3px solid transparent;padding:6px 0; } nav.principal a:hover{border-color:var(--destaque)} .ferramentas-a11y{display:flex;align-items:center;gap:6px} .a11y-btn{ background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.55);color:#fff;cursor:pointer; width:40px;height:40px;border-radius:8px;font-weight:700;font-size:.85rem; display:inline-flex;align-items:center;justify-content:center; } .a11y-btn:hover{background:rgba(0,0,0,.58)} .a11y-btn[aria-pressed="true"]{background:var(--destaque);color:var(--tinta);border-color:var(--destaque)} .menu-btn{ display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:8px; color:var(--branco);align-items:center;justify-content:center;flex-direction:column;gap:5px; } .menu-btn span{width:22px;height:3px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease} header[data-nav="aberto"] .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)} header[data-nav="aberto"] .menu-btn span:nth-child(2){opacity:0} header[data-nav="aberto"] .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} @media(max-width:900px){ .menu-btn{display:flex} nav.principal{ position:absolute;left:0;right:0;top:68px;background:var(--primaria); border-top:1px solid rgba(255,255,255,.25);box-shadow:0 18px 30px rgba(0,0,0,.3);display:none; } header[data-nav="aberto"] nav.principal{display:block} nav.principal ul{flex-direction:column;gap:0} nav.principal a{display:block;padding:15px 24px;min-height:48px;border-bottom:1px solid rgba(255,255,255,.18)} } /* ============================================================ 8. HERO */ .hero{ background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 42%), var(--primaria); color:var(--branco);position:relative;overflow:hidden; } /* Pseudo decorativo removido: causava CLS alto (~0.8) ao carregar fontes */ /* Importante: NÃO usar shorthand `padding` aqui — isso zerava o gutter do .container */ .hero-grid{ display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between; gap:40px 48px;padding-block:72px 36px;position:relative;z-index:1; } .hero-copy{ display:flex;flex-direction:column;align-items:flex-start;gap:0; flex:1 1 280px;min-width:0;max-width:36rem; } .hero .cargo{ font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.9rem; color:var(--destaque);margin:0 0 14px; } .hero-titulo{ display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px; width:100%;margin:0 0 4px; } .hero-titulo h1{ font-size:clamp(3.2rem,12vw,7.5rem);text-transform:uppercase;margin:0;line-height:.95; min-width:0;overflow-wrap:anywhere; } /* Vice ao lado do nome do titular (hero). Tamanho bem acima dos 30% exigidos pelo TSE. */ .hero-vice{ display:flex;flex-direction:column;gap:3px;padding-bottom:.2em;min-width:0;flex:1 1 8rem; } .hero-vice-rotulo{ font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.72);line-height:1.2; } .hero-vice-nome{ font-family:var(--display);font-weight:var(--peso-display); font-size:clamp(1.15rem,3.4vw,1.75rem);text-transform:uppercase; color:rgba(255,255,255,.95);line-height:1.1;overflow-wrap:anywhere; } .hero .frase{ font-size:1.25rem;max-width:48ch;width:100%;margin:20px 0 26px; color:rgba(255,255,255,.94);overflow-wrap:break-word; } .hero-ctas{ display:flex;flex-wrap:wrap;align-items:stretch;gap:12px 14px; width:100%;margin:0; } .hero-ctas .btn{flex:0 1 auto;text-align:center;max-width:100%} .hero-foto{ display:block; /* box estável p/ aspect-ratio (evita CLS da foto LCP) */ flex:1 1 240px;align-self:stretch;position:relative;min-height:460px; border-radius:var(--raio) var(--raio) 0 0;background:rgba(0,0,0,.22);overflow:hidden; contain:layout paint; } .hero-foto picture{ display:block;width:100%;height:100%;position:absolute;inset:0; } .hero-foto img{ width:100%;height:100%;object-fit:cover;object-position:center 18%; display:block; } .hero-foto .placeholder{ position:relative;z-index:1;color:rgba(255,255,255,.85);font-weight:700;text-transform:uppercase; letter-spacing:.12em;font-size:.8rem;text-align:center;padding:0 20px 24px; } .selo-foto{ /* etiqueta de status da foto (oficial / a substituir) */ position:absolute;top:12px;left:12px;z-index:2;background:rgba(0,0,0,.6);color:#fff; font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:5px 9px;border-radius:6px; } .foto-credito{ position:absolute;right:0;bottom:0;z-index:3;margin:0; font-size:.68rem;letter-spacing:.04em;text-transform:lowercase;line-height:1.2; color:rgba(var(--tinta-rgb),.78); /* ≥4.5:1 sobre branco */ background:var(--foto-credito-bg, var(--branco)); padding:5px 10px 4px;border-radius:6px 0 0 0; } /* Foto 3:4 encostada na seção seguinte (sem overlap, sem vão residual) */ .hero--foto-colada{ --foto-credito-bg:var(--branco); overflow:hidden; /* corta o brilho decorativo e evita traços vazando */ } .hero--foto-colada .hero-grid{ align-items:flex-end; padding-block:72px 0; /* base da foto = fim da hero */ gap:40px 48px; } .hero--foto-colada .hero-copy{ padding-bottom:48px; /* texto/CTAs não colam na borda */ } .hero--foto-colada .hero-foto{ flex:0 1 380px;width:100%;max-width:400px;min-height:0; aspect-ratio:3 / 4;align-self:flex-end; margin:0;padding:0;border:0;outline:0; border-radius:var(--raio) var(--raio) 0 0; } .hero--foto-colada + .secao{ margin-top:0; /* sem overlap: evita cobrir botões e traço escuro */ } @media(max-width:900px){ .hero-grid{ flex-direction:column;align-items:stretch;gap:28px; padding-block:40px 28px; } .hero-copy{flex:1 1 auto;max-width:none;width:100%} .hero-titulo{align-items:flex-start;gap:10px 18px} .hero-vice{padding-bottom:0;flex:1 1 100%} .hero .frase{font-size:1.08rem;margin:16px 0 22px} .hero-foto{ flex:1 1 auto;width:100%;min-height:0;aspect-ratio:3 / 4;max-height:none; } .hero-foto img{object-position:center 12%} .hero-ctas .btn{flex:1 1 100%} .hero--foto-colada .hero-grid{ flex-direction:column;align-items:stretch;gap:20px; padding-block:40px 0; } .hero--foto-colada .hero-copy{padding-bottom:8px} .hero--foto-colada .hero-foto{ flex:1 1 auto;max-width:none;width:100%; } } @media(max-width:380px){ .hero-titulo h1{font-size:clamp(2.8rem,18vw,3.4rem)} .hero .cargo{letter-spacing:.12em;font-size:.8rem} } /* ============================================================ 9. CHAPA / VICE / BADGE */ .chapa{ position:relative;z-index:2;background:var(--branco);color:var(--primaria); border-top:1px solid rgba(var(--tinta-rgb),.08); } .chapa-inner{ display:flex;align-items:baseline;gap:18px 24px;flex-wrap:wrap; padding-block:14px 12px; /* só vertical — o gutter lateral vem do .container */ } .chapa .badge-partido{ font-family:var(--display);font-weight:var(--peso-display);font-size:1.1rem;letter-spacing:.06em; display:flex;align-items:baseline;gap:8px;flex:0 0 auto; } .chapa .badge-partido strong{font-size:2rem;font-weight:var(--peso-display)} .chapa-nomes{display:flex;align-items:baseline;gap:14px 22px;flex-wrap:wrap;min-width:0} .chapa .titular{font-family:var(--display);font-weight:var(--peso-display);font-size:1.5rem;text-transform:uppercase;line-height:1} /* Regra TSE: nome do vice não pode ser inferior a 30% do titular. Usamos ~65% (bem acima do mínimo) para atender à norma com legibilidade. */ .chapa .vice{ font-size:calc(1.5rem * .65);text-transform:uppercase;font-weight:700; color:rgba(var(--tinta-rgb),.8);line-height:1.15;display:flex;flex-direction:column;gap:2px; } .chapa .vice span{display:block;font-weight:400;letter-spacing:.06em;opacity:.75;font-size:.62em} @media(max-width:900px){ .chapa-inner{padding-top:16px;padding-bottom:14px;gap:12px 18px} .chapa .titular{font-size:1.35rem} .chapa .vice{font-size:calc(1.35rem * .65)} } /* ============================================================ 10. CARDS / DIFERENCIAIS */ .diferenciais{background:var(--branco)} .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px} .card{border:1px solid var(--linha);border-top:6px solid var(--primaria);border-radius:var(--raio);padding:26px 24px;background:var(--branco)} .card .dado{font-family:var(--display);font-weight:var(--peso-display);font-size:2.6rem;color:var(--primaria);line-height:1} .card h3{font-size:1.35rem;margin:10px 0 8px;text-transform:uppercase} .card p{font-size:.98rem;color:rgba(var(--tinta-rgb),.85)} @media(max-width:900px){.cards-3{grid-template-columns:1fr}} /* ============================================================ 10b. MÍDIAS SOCIAIS (feed de posts) */ .midias{ background:var(--primaria);color:var(--branco);position:relative;overflow:hidden; } .midias::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(255,255,255,.12), transparent 55%), radial-gradient(ellipse 50% 40% at 0% 100%, rgba(0,0,0,.18), transparent 60%); } .midias .container{position:relative;z-index:1} .midias .eyebrow{color:#fff} .midias .eyebrow::before{background:var(--destaque)} .midias .lead{color:#fff} .midias-topo{ display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:20px 28px;margin-bottom:8px; } .midias-topo .intro{flex:1 1 260px;min-width:0;max-width:40rem} .midias-seguir{ display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:0 1 auto; } .midias-seguir .rede{ background:rgba(255,255,255,.16); } .midias-seguir .rede:hover{background:var(--destaque);color:var(--tinta)} .feed-posts{ display:flex;flex-wrap:wrap;gap:18px;margin-top:32px; } .post-card{ display:flex;flex-direction:column;flex:1 1 260px;min-width:0;max-width:100%; background:var(--branco);color:var(--tinta);border-radius:var(--raio); overflow:hidden;text-decoration:none; border:1px solid rgba(255,255,255,.2); transition:transform .15s ease, box-shadow .15s ease; } .post-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.22)} .post-head{ display:flex;align-items:center;gap:12px;padding:14px 16px 10px; } .post-avatar{ width:40px;height:40px;border-radius:50%;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; background:var(--primaria);color:#fff; font-family:var(--display);font-weight:var(--peso-display);font-size:.95rem; } .post-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto} .post-meta strong{font-size:.95rem;line-height:1.2} .post-meta span{font-size:.78rem;color:rgba(var(--tinta-rgb),.6)} .post-rede{ flex:0 0 auto;width:28px;height:28px;border-radius:8px; display:inline-flex;align-items:center;justify-content:center; background:rgba(var(--tinta-rgb),.08);color:var(--tinta); } .post-rede svg{width:14px;height:14px;fill:currentColor} .post-media{ aspect-ratio:16/10;background:var(--papel);overflow:hidden;position:relative; } .post-media img{width:100%;height:100%;object-fit:cover;display:block} .post-media .post-faixa{ position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px; background:linear-gradient(transparent 35%, rgba(0,0,0,.55)); color:#fff;font-family:var(--display);font-weight:var(--peso-display); font-size:clamp(1.1rem,2.4vw,1.35rem);text-transform:uppercase;line-height:1.1; } .post-corpo{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1 1 auto} .post-corpo p{font-size:.95rem;line-height:1.45;color:rgba(var(--tinta-rgb),.88)} .post-rodape{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:auto;padding-top:4px;font-size:.78rem;color:rgba(var(--tinta-rgb),.55); } .post-rodape .ver{font-weight:700;color:var(--primaria);text-transform:uppercase;letter-spacing:.04em} .midias-acoes{ display:flex;justify-content:center;margin-top:28px; } .midias-acoes .btn{text-align:center} .midias-nota{ margin-top:18px;font-size:.8rem;color:rgba(255,255,255,.65);max-width:70ch; } @media(max-width:900px){ .feed-posts{flex-direction:column} .post-card{flex:1 1 auto} .midias-acoes .btn{width:100%} } html.alto-contraste .post-card{border:2px solid #000} html.alto-contraste .post-card:hover{box-shadow:none} /* ============================================================ 11. REALIZAÇÕES */ .realizacoes{background:var(--papel)} .lista-real{margin-top:36px;display:grid;gap:0} .real-item{display:grid;grid-template-columns:120px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--linha);align-items:start} .real-item:first-child{border-top:1px solid var(--linha)} .real-ano{font-family:var(--display);font-weight:var(--peso-display);font-size:1.4rem;color:var(--primaria-densa)} .real-item h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:6px} .real-item p{max-width:62ch;color:rgba(var(--tinta-rgb),.85)} @media(max-width:640px){.real-item{grid-template-columns:1fr;gap:6px}} /* ============================================================ 12. PROPOSTAS */ .propostas{background:var(--primaria);color:var(--branco);position:relative} .propostas .eyebrow{color:#fff} .propostas .eyebrow::before{background:var(--destaque)} .propostas .lead{color:#fff} .prop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px} /* Overlay escuro (não branco) para manter contraste AA do texto branco */ .prop{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.35);border-radius:var(--raio);padding:26px 24px} .prop h3{font-size:1.45rem;text-transform:uppercase;margin-bottom:8px;color:#fff} .prop p{color:#fff;font-size:.99rem} @media(max-width:900px){.prop-grid{grid-template-columns:1fr}} /* ============================================================ 13. GALERIA */ .galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:36px} .foto{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--papel)} .foto picture{display:contents} .foto img{width:100%;height:100%;object-fit:cover} .foto .legenda{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;background:linear-gradient(transparent,rgba(0,0,0,.6))} .foto.grande{grid-column:span 2;grid-row:span 2} @media(max-width:900px){ .galeria-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:10px} .foto.grande{grid-row:span 1} } /* ============================================================ 14. NÚMERO / URNA */ .numero{background:var(--tinta);color:var(--branco)} .numero .eyebrow{color:#fff} .numero .eyebrow::before{background:var(--destaque)} .numero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .numero .gigante{font-family:var(--display);font-weight:var(--peso-display);font-size:clamp(7rem,20vw,13rem);line-height:.85;color:var(--destaque)} .urna{background:#E9E5DC;color:#1B2430;border-radius:14px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.35);max-width:420px;justify-self:end;width:100%} .urna-tela{background:#F4F2EA;border:3px solid #b8b2a4;border-radius:8px;padding:18px;min-height:150px} .urna-tela .rotulo{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#6b6558} .urna-tela .num-digitado{font-family:var(--display);font-weight:var(--peso-display);font-size:2.6rem;letter-spacing:.25em;margin:6px 0 4px} .urna-tela .cand{font-weight:700;text-transform:uppercase} .urna-tela .partido{font-size:.9rem;color:#6b6558} .urna-botoes{display:flex;gap:10px;margin-top:16px} .urna-btn{flex:1;text-align:center;font-family:var(--display);font-weight:var(--peso-display);font-size:.85rem;padding:12px 6px 9px;border-radius:6px;color:#fff;letter-spacing:.06em} .urna-btn.branco{background:#f4f2ea;color:#1B2430;border:1px solid #b8b2a4} .urna-btn.corrige{background:#C7420A} .urna-btn.confirma{background:var(--confirma);color:#fff} @media(max-width:900px){ .numero-grid{grid-template-columns:1fr;gap:40px} .urna{justify-self:center;max-width:380px} .numero .gigante{font-size:clamp(6rem,26vw,9rem)} } /* ============================================================ 15. FORMULÁRIOS + CONSENTIMENTO LGPD */ .form{display:grid;gap:14px;margin-top:22px;max-width:520px} .form-linha{display:flex;gap:10px;flex-wrap:wrap} .form label{font-size:.85rem;font-weight:700;display:block;margin-bottom:4px} .form input,.form select,.form textarea{ width:100%;padding:13px 15px;font-family:var(--texto);font-size:1rem; border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco);color:var(--tinta); } .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--primaria)} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.4} .consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px} .consent a{font-weight:700;text-decoration:underline} .form-msg{font-size:.9rem;font-weight:700;min-height:1.2em} .form-msg.ok{color:var(--confirma)} .form-msg.erro{color:#C7420A} .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ============================================================ 16. DOAÇÃO (TSE) */ .bloco-doacao{background:var(--primaria-densa);color:#fff;border-radius:var(--raio);padding:32px 30px} .bloco-doacao h3{font-size:1.7rem;text-transform:uppercase;margin-bottom:10px;color:#fff} .bloco-doacao p{color:#fff;margin-bottom:14px} .doacao-avisos{list-style:none;display:grid;gap:8px;margin:16px 0 20px;font-size:.85rem;color:#fff} .doacao-avisos li{display:flex;gap:8px;align-items:flex-start} .doacao-avisos li::before{content:"✓";color:var(--destaque);font-weight:900} /* ============================================================ 17. SELO IA */ .selo-ia{ display:inline-flex;align-items:center;gap:6px;font-size:.7rem;line-height:1.2; background:rgba(0,0,0,.6);color:#fff;padding:5px 9px;border-radius:6px; text-transform:none;letter-spacing:.02em; } .selo-ia::before{content:"🤖"} .foto .selo-ia{position:absolute;right:8px;bottom:8px;z-index:2} /* ============================================================ 18. RODAPÉ LEGAL */ footer.rodape{background:var(--tinta);color:rgba(255,255,255,.85);padding:48px 0 36px} .rodape-topo{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap} footer.rodape .marca .num{background:var(--primaria);color:#fff} footer.rodape nav a{padding:10px 4px;display:inline-block;text-decoration:none} footer.rodape .rede{ display:inline-flex;align-items:center;justify-content:center; padding:0;line-height:0; } .rodape-legal{ margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18); display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 34px; } .rodape-legal dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-bottom:2px} .rodape-legal dd{font-size:.92rem;color:rgba(255,255,255,.9);margin-bottom:12px} .rodape-legal .vice-nome{display:block;font-size:.82rem;color:rgba(255,255,255,.75)} /* vice bem acima do mínimo de 30% e legível */ .rodape-mini{margin-top:24px;font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.5;max-width:95ch} .rodape-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.85rem} .rodape-links a{text-decoration:underline;color:rgba(255,255,255,.8)} /* ============================================================ 19. APOIE / SEÇÕES CLARAS */ .apoie{background:var(--papel)} .apoie-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start} @media(max-width:900px){.apoie-inner{grid-template-columns:1fr}} /* Agenda */ .agenda-lista{list-style:none;margin-top:36px;display:grid;gap:14px} .agenda-item{display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:center;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 22px} .agenda-data{text-align:center} .agenda-data .dia{font-family:var(--display);font-weight:var(--peso-display);font-size:2rem;color:var(--primaria);line-height:1} .agenda-data .mes{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(var(--tinta-rgb),.75);font-weight:700} .agenda-item h3{font-size:1.15rem;text-transform:uppercase;margin-bottom:2px} .agenda-item p{font-size:.9rem;color:rgba(var(--tinta-rgb),.75)} /* Redes sociais */ .redes{display:flex;gap:10px;flex-wrap:wrap} .rede{ width:44px;height:44px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.14);color:#fff;text-decoration:none;flex:0 0 auto; padding:0;line-height:0;box-sizing:border-box; } .rede svg{ width:20px;height:20px;fill:currentColor;display:block; flex:0 0 auto;margin:auto; } .rede:hover{background:var(--destaque);color:var(--tinta)} /* ============================================================ 20. VLIBRAS */ /* Reserva espaço fixo; esconde até o plugin marcar data-ready (app.js) */ div[vw]{ position:fixed;right:12px;bottom:12px;z-index:100; width:64px;height:64px;max-width:64px;overflow:visible; opacity:0;pointer-events:none;transition:opacity .2s ease; } div[vw][data-ready="1"]{opacity:1;pointer-events:auto} div[vw] .access-button, div[vw] [vw-access-button]{ width:64px!important;min-width:64px;min-height:64px; } /* Evita baixar Archivo/Asap italic só por no rodapé */ em{font-style:normal;opacity:.9} /* ============================================================ UTIL */ .mt-0{margin-top:0} .center{text-align:center}