/* ============================================================ DAYSE AMARILIO — protótipo home (Fase 2) Mobile-first. Tokens do docs/01-DESIGN-SYSTEM.md ============================================================ */ /* ---------- Campton (texto) — auto-hospedada, licença webfont ---------- */ @font-face{font-family:'Campton';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/campton-book.woff2') format('woff2')} @font-face{font-family:'Campton';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/campton-medium.woff2') format('woff2')} @font-face{font-family:'Campton';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/campton-semibold.woff2') format('woff2')} @font-face{font-family:'Campton';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/campton-bold.woff2') format('woff2')} @font-face{font-family:'Campton';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/campton-book-italic.woff2') format('woff2')} @font-face{font-family:'Campton';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/campton-medium-italic.woff2') format('woff2')} /* ---------- Oswald (títulos) — auto-hospedada desde 13/08/2026, licença OFL ---------- Vinha do `fonts.googleapis.com` em 15 HTML. Saiu porque o Google ROTOU as URLs dos subconjuntos no meio de uma sessão: o CSS de uma borda apontava um `.woff2` que outra borda ainda não servia, e a bateria acusou 404 em `/quem-sou` e `/revistas`. Passou sozinho em minutos — e é exatamente esse o problema: uma dependência que quebra e conserta sozinha não dá para depurar nem para confiar. A Campton já era auto-hospedada; agora as duas famílias vêm do mesmo lugar que o resto do site. SÃO DOIS ARQUIVOS, não seis. O Oswald é fonte VARIÁVEL: o Google entrega o MESMO `.woff2` para 500, 600 e 700 (md5 conferido) e só muda o `font-weight` de cada `@font-face`. O que separa os dois arquivos é o SUBCONJUNTO, não o peso — daí a `unicode-range`, copiada do CSS do Google sem alterar. O eixo declarado é `500 700`, que é a faixa que este site usa; o arquivo é o recorte que o Google serve para `wght@500;600;700`, e não o 200..700 inteiro. Cirílico e vietnamita ficaram de fora de propósito: um site em português nunca casaria aquelas `unicode-range`, e o navegador jamais baixaria os arquivos. Se algum dia entrar conteúdo nesses alfabetos, é acrescentar os `@font-face` — não há nada de errado com eles, só não servem aqui. */ @font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap; src:url('/assets/fonts/oswald-var.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap; src:url('/assets/fonts/oswald-var-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ /* ============ COR — rampa da marca ============ Só os degraus REALMENTE usados moram aqui. Tints que seguem o EIXO continuam sem token: são gerados na hora com color-mix(in srgb,var(--e) N%,#fff), que segue a cor do tema em vez de fixar uma cor. Ver docs/01-DESIGN-SYSTEM.md §1.5. Os dois tints da MARCA (-100/-200) têm token porque não seguem tema nenhum: são um valor só, repetido em ~26 lugares — e o valor é um color-mix mesmo. A rampa inteira e o porquê de cada degrau estão em docs/29. */ /* da marca — os hexes vieram dos SVGs da assinatura nova */ --turquesa-500:#2EB7BD; /* fundo só com tinta escura: 2,43:1 com branco */ --petroleo-600:#047B98; /* tinta sobre claro: 4,89:1 */ --ambar-500:#F7A815; /* = o antigo --laranja-500: 1,01 de diferença */ --roxo-600:#5A328A; /* rebaixado de cor da marca a cor de eixo: 9,30:1 */ /* derivados — casados por LUMINÂNCIA com os degraus roxos que substituem, para que o site troque de cor sem trocar de peso e nada que passava deixe de passar */ --turquesa-300:#7FD3D7; /* realce sobre escuro: 9,00:1 no --petroleo-900 */ --turquesa-400:#1D959C; /* borda/foco sobre claro: 3,60:1 (era --roxo-400, 3,65) */ --petroleo-700:#045A72; /* 7,75:1 (era --roxo-600, 7,83) */ --petroleo-800:#04455A; /* 10,48:1 (era --roxo-700, 10,95) */ --petroleo-900:#032833; /* 15,50:1 (era --roxo-900, 15,59) */ --roxo-800:#4B2D70; /* 11,00:1 (era --roxo-700, 10,95) — 2º degrau do eixo */ --petroleo-200:color-mix(in srgb,var(--petroleo-700) 34%,#fff); /* 1,78 (era --roxo-200, 1,80) */ --petroleo-100:color-mix(in srgb,var(--petroleo-700) 14%,#fff); /* 1,25 (era --roxo-100, 1,27) */ --ambar-600:#E07E0B; --magenta-500:#E6197D; --ciano-500:#12B5C4; --amarelo-500:#F7C600; --amarelo-300:#FBD84E; --lavanda:#9B59D0; --violeta:#7A3FF2; --indigo:#4A2A9E; /* ============ FUNDO ESCURO DO SITE — uma cor só, editável ============ Hero, CTA/fecho e rodapé dividem a MESMA cor. Quem escolhe é o painel "Cor do site" (⚙️ → Azulejo), que publica no KV e escreve `--fundo-1` inline no ; os outros dois degraus saem daqui, sozinhos. Por que derivar em vez de pedir três cores: o degradê tem de escurecer de cima para baixo, e é a queda que segura o texto branco. Se as três fossem escolhidas à mão, uma escolha infeliz apagaria o hero. Assim quem edita mexe em UMA cor e a forma da rampa é lei. Os percentuais não são chutados: reproduzem a rampa de petróleo do docs/29 a menos de um décimo — 78% do --petroleo-700 dá 10,37:1 com branco (contra os 10,48 do --petroleo-800) e 44% dá 15,53 (contra 15,50 do --petroleo-900). */ --fundo-1:var(--petroleo-700); /* topo do degradê */ --fundo-2:color-mix(in srgb,var(--fundo-1) 78%,#000); /* meio */ --fundo-3:color-mix(in srgb,var(--fundo-1) 44%,#000); /* base — e o rodapé */ /* ============ REALCE — o destaque da AÇÃO e do contorno ============ O botão Apoie, o WhatsApp flutuante, a moldura do carrossel, a bolinha ativa, o "hl" do fecho, a sobrancelha. Editável em ⚙️ → Cores. O VALOR É O ÂMBAR DA MARCA, que é o que já estava publicado nos botões — e não o --amarelo-500, que é a cor do EIXO GUARÁ. Usar o amarelo aqui recriaria um token com dois trabalhos: trocar o destaque do site repintaria o Guará junto. Mesma separação que --tinta e --tinta-fundo já tinham exigido (docs/29 §4). Dois degraus derivados, para o painel continuar pedindo UMA cor só: -claro 69% + branco → texto de realce sobre fundo escuro (4,79:1 no hero) -forte 86% + preto → o hover dos botões (o antigo --ambar-600) */ --realce:var(--ambar-500); --realce-claro:color-mix(in srgb,var(--realce) 69%,#fff); --realce-forte:color-mix(in srgb,var(--realce) 86%,#000); /* neutros */ --tinta:#12262E; /* texto do corpo: 14,64:1 no papel */ --tinta-fundo:var(--fundo-3); /* FUNDO escuro (rodapé) — era --tinta */ /* os mesmos hexes em componentes r,g,b — só para os rgba() de sombra e borda, que precisam de alfa. Um espelho, sim, mas de UM valor cada, comentado ao lado do original: antes eram 30 literais soltos pelo arquivo. */ --tinta-rgb:18,38,46; /* = --tinta #12262E */ --petroleo-900-rgb:3,40,51; /* = --petroleo-900 #032833 */ --petroleo-700-rgb:4,90,114; /* = --petroleo-700 #045A72 */ --tinta-60:#6B6577; --papel:#FAF7F2; --branco:#FFFFFF; --sobre-turquesa:#04302F; /* texto escuro sobre fundo turquesa: 5,87:1 */ /* cor de marca de terceiros (não é paleta nossa — não derivar nada daqui) */ --c-whatsapp:#25D366; --c-facebook:#1877F2; --c-x:#111; /* ============ COR POR TEMA — FONTE ÚNICA ============ Nenhum hex temático pode existir fora deste bloco. Consumido por: 1. style="--e:…;--e-ink:…" nas páginas (quem-sou, apoiar) 2. os blocos #guara/#saude/… que pintam os componentes do eixo 3. js/util.js, que LÊ estes tokens em tempo de execução (sem espelho manual) Par fixo: cor de FUNDO (--th-x) + cor de TEXTO sobre claro (--th-x-ink). */ /* eixos do site e "faces" de quem-sou */ --th-saude:var(--turquesa-500); --th-saude-ink:#0A7C82; /* terceiro membro do par, e só a saúde tem: texto SOBRE o fundo sólido do eixo. `--th-x-ink` é tinta sobre CLARO; sobre o turquesa cheio ela não tem contraste. Mora aqui, junto do eixo, para não virar um `#04302F` solto em cada uso. Desde docs/29 o eixo Saúde e a MARCA compartilham o turquesa, de propósito: o eixo deixou de ser visualmente exclusivo e volta a ser com um token só. */ --th-saude-sobre:var(--sobre-turquesa); /* o roxo saiu da marca e ficou aqui: Transversal e Legislativo continuam roxos, nos dois degraus de sempre — é o que os mantém distintos um do outro. */ --th-roxo:var(--roxo-600); --th-roxo-ink:var(--roxo-600); --th-roxo2:var(--violeta); --th-roxo2-ink:var(--indigo); --th-mulher:var(--magenta-500); --th-mulher-ink:#A8125C; --th-laranja:var(--ambar-500); --th-laranja-ink:#B4650A; --th-guara:var(--amarelo-500); --th-guara-ink:#8F5E00; --th-legislativo:var(--roxo-800); --th-legislativo-ink:var(--roxo-800); --th-idade:var(--lavanda); --th-idade-ink:#6B3AA0; --th-esporte:var(--violeta); --th-esporte-ink:#5A29C0; --th-mulheres:var(--magenta-500); --th-mulheres-ink:#B01060; --th-educacao:var(--indigo); --th-educacao-ink:var(--indigo); /* categorias do BLOG — taxonomia PRÓPRIA, não é a dos eixos. Onde o nome coincide (Educação, Concurso) o valor diverge de propósito: no site "Educação" é índigo e "Concurso" é laranja; no blog são ciano e magenta. */ --tag-saude:var(--th-saude); --tag-saude-ink:var(--th-saude-ink); --tag-mulher:var(--th-mulher); --tag-mulher-ink:var(--th-mulher-ink); --tag-guara:var(--th-guara); --tag-guara-ink:var(--th-guara-ink); --tag-educacao:var(--ciano-500); --tag-educacao-ink:#0A6E77; --tag-enfermagem:var(--violeta); --tag-enfermagem-ink:var(--indigo); --tag-editais:var(--th-laranja); --tag-editais-ink:var(--th-laranja-ink); --tag-lutas:var(--roxo-600); --tag-lutas-ink:var(--roxo-600); --tag-assistencia:var(--ambar-600); --tag-assistencia-ink:#8F4E06; --tag-concurso:var(--magenta-500); --tag-concurso-ink:var(--th-mulher-ink); --tag-padrao:var(--petroleo-700); --tag-padrao-ink:var(--petroleo-800); /* ============ TIPOGRAFIA ============ */ --font-titulo:'Oswald',system-ui,sans-serif; --font-texto:'Campton',system-ui,sans-serif; /* ============ FORMA ============ */ --raio-sm:12px; --raio-md:20px; --raio-lg:32px; --raio-pill:999px; --sombra-sm:0 3px 12px rgba(var(--petroleo-900-rgb),.22); /* botão sobreposto a um card */ --sombra-card:0 6px 24px rgba(var(--tinta-rgb),.10); /* repouso */ --sombra-hover:0 16px 40px rgba(var(--tinta-rgb),.18); /* elevado */ --sombra-pop:0 16px 44px rgba(var(--petroleo-900-rgb),.28); /* popovers e menus */ /* ============ ESPAÇO (base 4) ============ Definida na Fase 1, APLICADA na Fase 2 (ver docs/06-AUDITORIA-CSS.md). Nenhum padding/gap/margin novo deve usar valor fora desta escala. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:56px;--sp-11:64px;--sp-12:72px; /* ============ MOVIMENTO ============ Aplicados de verdade na vistoria de 05/08/2026: até então --t-rapida, --t-lenta e --ease-mola estavam DEFINIDOS e nunca lidos — a curva da mola aparecia escrita à mão em 4 lugares, e uma delas com .34,1.5 em vez de .34,1.56 (deriva de cópia; a que sobrou literal é a do .hdr-social-pop). */ --t-rapida:.15s; --t-media:.2s; --t-lenta:.3s; --ease-mola:cubic-bezier(.34,1.56,.64,1); /* ============ CAMADAS ============ Só a pilha GLOBAL vira token — o que precisa ser comparado entre partes distantes do documento. z-index local dentro de um stacking context isolado (hero, divisor, card) continua literal 0–5: ali o número já é auto-explicativo. */ --z-sticky:50; /* header fixo */ --z-pop:60; /* subnav e popover de redes, ancorados no header */ --z-flutuante:80; /* WhatsApp flutuante */ --z-menu:200; /* menu de compartilhar (posicionado no body) */ --z-edicao:1200; /* dock da engrenagem */ --z-edicao-frame:1280; /* alças de redimensionar */ --z-edicao-guia:1290; /* linha de solta + frame de escala */ --z-edicao-alta:1300; /* barrinha de bloco e painéis */ --z-toast:1400; /* feedback — sempre por cima de tudo */ /* ============ LAYOUT ============ */ --container:1200px; --container-header:1320px; /* SÓ o cabeçalho — a assinatura inteira mede 380px */ --header-h:64px; --azulejo-h:42px; /* ---- AZULEJO: camada de padrão no hero, nos divisores e no CTA ---- Uma faixa por área: modo de mesclagem, opacidade e nº de linhas (quantas faixas do SVG cabem na altura da seção). São estes tokens que o controlador do modo edição (botão "Azulejo") sobrescreve no . */ --az-src-eixos:url('/assets/svg/azulejo-eixos.svg'); --az-src-bg:url('/assets/svg/azulejo-bg.svg'); --az-hero-blend:lighten; --az-hero-op:.30; --az-hero-rows:1.5; --az-claro-blend:multiply; --az-claro-op:.30; --az-claro-rows:1; --az-escuro-blend:lighten; --az-escuro-op:.30; --az-escuro-rows:1; --az-cta-blend:lighten; --az-cta-op:.30; --az-cta-rows:1.5; } /* camada comum às três áreas — cada uma define --az-img/--az-blend/--az-op/--az-rows */ .hero::before,.divisor::after,.cta::before{ content:"";position:absolute;inset:0;pointer-events:none; background:var(--az-img) center bottom/auto calc(100% / var(--az-rows)) repeat; mix-blend-mode:var(--az-blend);opacity:var(--az-op); } .hero{--az-img:var(--az-src-bg);--az-blend:var(--az-hero-blend);--az-op:var(--az-hero-op);--az-rows:var(--az-hero-rows)} .cta{--az-img:var(--az-src-bg);--az-blend:var(--az-cta-blend);--az-op:var(--az-cta-op);--az-rows:var(--az-cta-rows)} /* o topo das subpáginas usa a caixa do .cta, mas é hero: segue o azulejo do hero */ .cta--hero{--az-blend:var(--az-hero-blend);--az-op:var(--az-hero-op);--az-rows:var(--az-hero-rows)} .divisor{--az-img:var(--az-src-eixos);--az-blend:var(--az-escuro-blend);--az-op:var(--az-escuro-op);--az-rows:var(--az-escuro-rows)} /* eixos de cor CLARA: clarear lava o azulejo e derruba o texto — ali ele escurece */ .dv-guara,.dv-saude,.dv-concurso{--az-blend:var(--az-claro-blend);--az-op:var(--az-claro-op);--az-rows:var(--az-claro-rows)} /* ---------- reset enxuto ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} /* ============================================================ `[hidden]` MANDA — regra de base, e ela existe por reincidência ------------------------------------------------------------ O `display:none` do atributo `hidden` vem da folha do NAVEGADOR, e QUALQUER `display` declarado por nós o atropela. Isso derrubou três coisas em dois dias, sempre do mesmo jeito: o elemento era marcado como escondido, o JavaScript acreditava, e ele continuava na tela. 17/08 `.kpi-modal{display:grid}` o modal fechado seguia por cima da página, comendo todo clique 18/08 `.mold-solta{display:flex}` a área de soltar não sumia com a foto 18/08 `.btn{display:inline-flex}` o botão de câmera aparecia no computador, onde ele não funciona Consertar caso a caso já falhou duas vezes, então a regra sobe para a base. O `!important` é o que a torna imune a qualquer `display` de componente — que é exatamente o problema que ela resolve. ============================================================ */ [hidden]{display:none !important} html{scroll-behavior:smooth} body{ font-family:var(--font-texto); color:var(--tinta); /* base do recorte dos ícones: o papel. Cards e badges sobrescrevem por herança. */ --ic-recorte:var(--papel); background:var(--ic-recorte); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-wrap:break-word; } /* anti-overflow: filhos de grid/flex podem encolher abaixo do conteúdo */ .hero-grid>*,.counters-grid>*,.seg-grid>*,.header-inner>*{min-width:0} /* textura de papel bem sutil */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(var(--tinta-rgb),.025) 1px,transparent 1px); background-size:4px 4px; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--font-titulo);line-height:1.02;letter-spacing:.01em} :focus-visible{outline:3px solid var(--petroleo-700);outline-offset:3px;border-radius:6px} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6)} @media (min-width:768px){.container{padding-inline:var(--sp-7)}} section[id]{scroll-margin-top:calc(var(--header-h) + var(--azulejo-h) + 12px)} /* ============================================================ COMPONENTES-BASE — a receita compartilhada, extraída uma vez ------------------------------------------------------------ Estas regras agrupam o que 9 cards, 37 rótulos e 9 botões-círculo repetiam cada um por conta própria. Cada componente abaixo mantém SÓ o que é dele (padding, acento, cor). As classes .card e .rotulo existem para o código NOVO: um card novo é `class="card"` + o que for específico, sem copiar a receita de novo. Os nomes legados seguem na lista enquanto a marcação não migrar — migrar é opcional, o CSS já está consolidado. .campo e .circulo saíram na vistoria de 05/08/2026: eram apelidos da mesma ideia que NENHUMA marcação chegou a usar (0 ocorrências em 5 listas). Apelido sem uso não é ponto de extensão — é seletor que toda regra futura tem de carregar sem saber por quê. ============================================================ */ /* --- CARD: fundo, raio e elevação de repouso --- */ .card,.seg-card,.stat,.prog,.cat,.law,.region,.step,.faq-item,.post-card{ /* --ic-recorte acompanha o fundo por CONSTRUÇÃO: é a mesma variável nas duas linhas, então não há como divergirem. Ver docs/11 §13 (cor do recorte). */ --ic-recorte:var(--branco); background:var(--ic-recorte);border-radius:var(--raio-md);box-shadow:var(--sombra-card); } /* --- CARD elevável: sobe no hover. A distância é por componente (--elev). --- */ .card--elev,.seg-card,.prog,.step,.post-card{ transition:transform var(--t-media),box-shadow var(--t-media); } .card--elev:hover,.seg-card:hover,.prog:hover,.step:hover,.post-card:hover{ transform:translateY(var(--elev,-4px));box-shadow:var(--sombra-hover); } .seg-card{--elev:-6px} .post-card{--elev:-3px} /* --- RÓTULO: Oswald caixa-alta. O tracking/tamanho/peso fica em cada um. --- */ .rotulo,.btn,.nav-desktop a,.mm-link,.eyebrow,.hero-pill,.section-kicker,.counter-cta, .seg-name,.seg-go,.divisor-eixo,.divisor-frase,.subeixo-name,.prog h3,.prog h4,.prog .tag, .cat-role,.sub-label,.carreiras h4,.region-head b,.cta-kicker,.cta-social-label, .dayse-edit-bar .deb-status,.dayse-toast,.step-title,.field > label,.checks-label,.form-ok h3, .faq-q,.chip-toggle,.facets-lead,.side-block h3,.post-tag, .share-menu .sm-head,.post-share-bar .psb-label,.post-back, .post-article h2,.post-article h3,.post-article h4,.editor h3,.adm-status,.adm-btn{ font-family:var(--font-titulo);text-transform:uppercase; } /* --- BOTÃO: o clicável sem borda (a base de tudo que se clica e não tem contorno) --- */ .btn,.btn--sutil,.menu-toggle,.carousel-dots button,.deb-btn,.dayse-blk-tools button, .bk-create,.bk-del{border:0;cursor:pointer} /* forma pílula */ .btn,.btn--sutil,.badge,.deb-btn,.bk-create, .divisor-eixo,.prog .tag,.law-badge,.post-tag,.adm-status,.chip{border-radius:var(--raio-pill)} /* BADGE de tema: tinta e fundo derivados de --e (o tint segue o eixo, não é cor fixa) */ .badge--tema,.prog .tag,.law-badge{color:var(--e-ink,var(--e));background:color-mix(in srgb,var(--e) 13%,white)} /* tom SUTIL — roxo claro sobre claro (ações secundárias do painel). `.az-reset`, `.bk-restore` e `.dp-item button` eram TRÊS APELIDOS deste mesmo botão, e apareciam juntos nas três listas acima. Na vistoria de 05/08/2026 a marcação passou a dizer `class="btn--sutil az-reset"` e cada um ficou só com o que é dele (largura e respiro, adiante). Custou uma palavra em 8 templates do próprio main.js e tirou 9 menções de seletor de 3 listas — e um botão sutil novo agora não precisa de linha nenhuma de CSS. */ .btn--sutil{font:600 .74rem var(--font-texto);background:var(--petroleo-100);color:var(--petroleo-800)} .btn--sutil:hover{background:var(--petroleo-700);color:#fff} /* tom SUCESSO — tiffany (publicar, criar backup) */ .btn--sucesso,.deb-btn.deb-publish,.bk-create{background:var(--turquesa-500);color:var(--sobre-turquesa)} .btn--sucesso:hover,.deb-btn.deb-publish:hover,.bk-create:hover{background:var(--turquesa-300)} /* tom CONTORNO — borda fina roxa sobre fundo claro */ .btn--contorno,.adm-btn,.editor-toolbar button,.chip-toggle{ font-weight:600;color:var(--petroleo-800);cursor:pointer;line-height:1} .btn--contorno,.adm-btn,.editor-toolbar button{background:var(--papel);border-radius:8px} .btn--contorno:hover,.adm-btn:hover,.editor-toolbar button:hover{border-color:var(--turquesa-400)} /* desabilitado: a opacidade ainda diverge por componente (.4/.5/.6) — ver 06-AUDITORIA §13 */ .btn[disabled],.deb-btn[disabled],.bk-create[disabled],.adm-btn:disabled{cursor:default} /* --- GRADE auto-fit: uma largura mínima por grade, um mecanismo só --- */ .grade-auto,.prog-grid,.law-grid,.region-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,240px)),1fr)); } .prog-grid{--min:265px} .law-grid{--min:245px} .region-grid{--min:215px} /* --- CAMPO: superfícies de entrada (input, textarea, select, editor, checkbox) --- */ /* a borda fina roxa é a mesma em campo, card de contorno, FAQ e linha do painel */ .btn--contorno,.adm-btn,.editor-toolbar button,.chip-toggle, .field input,.field textarea,.field select,.blog-search input,.editor,.check, .faq-item,.adm-row{border:1.5px solid var(--petroleo-100)} /* tipografia de campo */ .field input,.field textarea,.field select,.blog-search input,.editor{ font-family:var(--font-texto);font-size:1rem;color:var(--tinta); } /* superfície clara de raio pequeno */ .field input,.field textarea,.field select,.editor,.check{ background:var(--papel);border-radius:var(--raio-sm); } /* --- ÍCONE DE TRAÇO: a receita de todo SVG de contorno do site --- Estava escrita 16 vezes. As exceções — cor do ícone da busca e do "copiar", espessura do toast/chevron/voltar — sobrescrevem nas próprias regras, adiante. */ .ico-traco,.counter-ico svg,.prog-ico svg,.cat-ico svg,.dayse-toast svg,.dayse-blk-tools button svg,.deb-ico svg,.deb-backup svg,.bk-del svg,.step-badge svg,.form-ok svg,.faq-chevron,.post-share svg,.post-share-bar .psb-copy svg,.post-back svg,.share-menu .sm-copy svg,.blog-search svg{ fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } /* --- COMPARTILHAR: o popover (.sm-*) e a barra do post (.psb-*) dividem as cores de marca, o item clicável, o ícone e o rótulo. --- */ .sm-wa,.post-share-bar .psb-wa{background:var(--c-whatsapp)} .sm-fb,.post-share-bar .psb-fb{background:var(--c-facebook)} .sm-x,.post-share-bar .psb-x{background:var(--c-x)} .sm-copy,.post-share-bar .psb-copy{background:var(--petroleo-700)} .share-menu a,.share-menu button,.post-share-bar a,.post-share-bar button{ align-items:center;font-family:var(--font-texto);border:none;cursor:pointer;text-decoration:none; } .share-menu .sm-ico svg,.post-share-bar svg{width:16px;height:16px} .share-menu .sm-head,.post-share-bar .psb-label{letter-spacing:.05em;color:var(--tinta-60)} /* --- CÍRCULO: contêiner redondo de ícone. O tamanho e a cor ficam em cada um. --- */ .hdr-social,.hdr-social-pop a,.counter-ico,.social a,.wa-float,.dayse-gear, .step-n,.post-share,.share-menu .sm-ico{ display:grid;place-items:center;border-radius:50%; } /* ---------- botões ---------- */ .btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center; font-weight:600;letter-spacing:.03em;padding:.7em 1.2em;font-size:.9rem;transition:transform .18s,box-shadow .18s,background .18s} .btn-lg{padding:.85em 1.6em;font-size:1.05rem} /* a tinta acompanha o realce: nos eixos escuros (roxo do Transversal) o texto escuro sumiria, e o JS troca para branco. `transition` porque a cor muda ao ROLAR — sem ela o botão pisca de uma cor para outra. */ .btn-cta{background:var(--realce);color:var(--realce-ink,var(--tinta)); transition:background .25s,color .25s,transform .2s,box-shadow .2s} .btn-cta:hover{background:var(--realce-forte);transform:translateY(-2px);box-shadow:var(--sombra-hover)} /* O 40222 é SEMPRE branco, e um pouco maior que o rótulo ao lado. Era `--realce-claro`, que muda com a seção — o número da urna mudando de cor conforme a rolagem é a única coisa desta página que não pode variar. Branco sobre `--tinta` dá 14,64:1. */ .btn-num b{background:var(--tinta);color:#fff;border-radius:8px; padding:.05em .4em;letter-spacing:.06em;font-size:1.1em} .btn-ghost{background:transparent;color:var(--branco);border:2px solid rgba(255,255,255,.55)} .btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)} /* TOM DO EIXO: o botão veste a cor da frente a que pertence, lendo o `--e` que o elemento já traz — o mesmo mecanismo das seções. Não é `.btn--saude` de propósito: os outros tons têm nome de PAPEL (cta, ghost, sutil, sucesso), e um nome de eixo abriria a porta para `.btn--guara`, `.btn--concurso` e a proliferação que o docs/08 §3.3 já cobra. `--e-sobre` é o texto sobre a cor cheia; sem ele, branco, que serve para os eixos escuros. */ .btn--eixo{background:var(--e);color:var(--e-sobre,#fff)} .btn--eixo:hover{background:color-mix(in srgb,var(--e) 86%,var(--tinta)); transform:translateY(-2px);box-shadow:var(--sombra-hover)} /* ============================================================ HEADER ============================================================ */ /* --- PULAR PARA O CONTEÚDO --- Fora da tela até receber foco. `position:absolute` e não `clip`: o link é o primeiro filho do `.header-inner`, que é flex — no fluxo ele abriria uma coluna de largura zero e um `gap` a mais entre a marca e a borda. Absoluto, ele sai do fluxo e o cabeçalho fica pixel a pixel o que era. O contêiner é o `.site-header`, que é `position:sticky` e portanto já é o bloco de referência de um filho absoluto. */ .pular{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-sticky) + 1); padding:var(--sp-2) var(--sp-4);border-radius:0 0 var(--raio-sm) 0; background:var(--petroleo-800);color:#fff; font-family:var(--font-titulo);text-transform:uppercase; letter-spacing:.04em;font-size:.82rem;line-height:1.4} .pular:focus{left:0} /* O
recebe o foco só para RECEBÊ-LO (tabindex=-1, posto pela borda). Não é um controle, então a moldura de 3px em volta da página inteira seria ruído: o retorno visual de ter pulado é o conteúdo passando a rolar dali. */ main:focus{outline:none} /* SEM `border-bottom`. Ela existia para separar o cabeçalho branco do conteúdo, e virou defeito: o último elemento do cabeçalho é a FAIXA DE AZULEJOS, então a borda caía DEPOIS dela, entre a faixa e o hero escuro — uma risca clara de 1px atravessando a página inteira. Medido: o header fechava em 129px enquanto --header-h (74) + --azulejo-h (54) dão 128. O 1px sobrando era ela, e `rgba(tinta,.06)` sobre o branco dá 242 de brilho — exatamente o que a captura a 9x mostrou entre a faixa (138) e o hero (80). Nada se perdeu: quem separa o cabeçalho do conteúdo é a própria faixa, e ao rolar entra a sombra do `.scrolled`, que é o sinal de elevação de verdade. */ .site-header{ position:sticky;top:0;z-index:var(--z-sticky);background:var(--branco); transition:box-shadow .2s; } .site-header.scrolled{box-shadow:0 6px 22px rgba(var(--tinta-rgb),.10)} .header-inner{display:flex;align-items:center;gap:var(--sp-3);height:var(--header-h)} .brand{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-titulo)} /* A assinatura VEM EM DOIS ARQUIVOS e o CSS escolhe qual aparece (docs/29 §5): a inteira, com o 40222, só cabe junto do menu desktop acima de --bp-assinatura; abaixo disso entra a curta, que é o mesmo desenho sem o número. É isso que permite mostrar a assinatura completa SEM empurrar o menu para o hambúrguer nos notebooks de 1280px. As duas têm o mesmo alt: `display:none` não vai para a árvore de acessibilidade, então nunca são anunciadas as duas. */ /* A ASSINATURA VESTE A COR DA SEÇÃO (18/08/2026). Era um , e não obedece a CSS: as duas cores estavam chumbadas no arquivo (#047B98 = --petroleo-600 no traço, #2EB7BD = --turquesa-500 no acento). Agora são duas camadas MASCARADAS sobre um : ::before máscara = o próprio assinatura*.svg. O alfa dele já é a silhueta inteira, então esta camada não custou um byte novo de rede. ::after máscara = assinatura*-realce.svg, só as duas formas do acento (937 B), gerado pelo tools/build-assinatura-realce.py. As cores saem de --sec-tinta/--sec-cor, que o azPintarSecao() só declara enquanto uma seção domina a tela. Fora daí o var() cai no fallback e a marca volta ao turquesa — é por isso que o padrão mora AQUI e não no :root: no hero, no blog e no /apoiar não existe seção, e herdar --realce faria o logo nascer âmbar em toda página. --sec-tinta é o par "sobre claro" da cor (--e-ink), não a cor cheia: o amarelo do Guará é fundo de bolinha, mas como traço sobre papel branco não passa de 1,5:1. */ .brand-assin{height:34px;display:block;flex:0 0 auto;position:relative} .brand-assin::before,.brand-assin::after{content:"";position:absolute;inset:0; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:left center;mask-position:left center; transition:background-color var(--t-media)} .brand-assin::before{background-color:var(--sec-tinta,var(--petroleo-600)); -webkit-mask-image:var(--assin);mask-image:var(--assin)} .brand-assin::after{background-color:var(--sec-acento,var(--turquesa-500)); -webkit-mask-image:var(--assin-realce);mask-image:var(--assin-realce)} /* a proporção substitui o width:auto que o dava de graça */ .brand-assin--curta{aspect-ratio:2047/370; --assin:url(../assets/svg/assinatura-curta.svg); --assin-realce:url(../assets/svg/assinatura-curta-realce.svg)} .brand-assin--cheia{aspect-ratio:3512/370; --assin:url(../assets/svg/assinatura.svg); --assin-realce:url(../assets/svg/assinatura-realce.svg); display:none} /* símbolo quadrado + nome numa linha: sobrou nos PAINÉIS (entrar, gerenciar, crm, capas, novo-post), que têm cabeçalho próprio e não passam pelo partial. A assinatura nova não serve lá: a 25px de altura o "deputada distrital" some. */ .brand-logo{height:34px;width:auto;display:block;flex:0 0 auto} .brand-wordmark{height:21px;width:auto;display:block;flex:0 0 auto} /* O GAP DO MENU É MEDIDO, NÃO ESCOLHIDO. Com o oitavo item (Projetos, 16/08/2026) o menu passou a transbordar a própria caixa — e transbordar aqui não corta: o texto entra POR CIMA do botão Apoie, porque o `.header-inner` é flex e deixa o nav encolher. A medida é `scrollWidth - clientWidth`; a altura engana (com `nowrap` ela fica em 33px mesmo transbordando 109px). Transbordo medido com 8 itens, por gap: gap 24px → 1440:12 1366:12 1280:0 1180: 1 1100:56 1024:109 gap 20px → 1440: 0 1366: 0 1280:0 1180: 0 1100:36 1024: 88 gap 12px → todos 0 até 1100 1024: 49 Daí as três faixas abaixo. A 1024 nem o gap de 8px basta (29px sobrando): só cabe encolhendo a fonte junto — e ali o menu JÁ transbordava 40px com sete itens, antes deste commit. Abaixo de 1024 vale o hambúrguer. */ .nav-desktop{display:none;margin-left:auto;gap:var(--sp-3)} /* `nowrap` porque o menu tem um item de DUAS PALAVRAS ("Quem sou"), e ele é o primeiro a ceder: sem isto o rótulo racha em "QUEM / SOU", o menu passa de 33px para 58px de altura e, a 1024px, "Revistas" entra por cima do botão Apoie. Medido em 16/08/2026 ao acrescentar o oitavo item (Projetos): a quebra aparecia em 1440, 1180 e 1100 por causa dele, e a 1024 JÁ acontecia com sete. Com `nowrap` o menu fica em uma linha nas seis larguras medidas (1440 → 1024) sem precisar apertar o gap de 24px. Abaixo de 1024 vale o hambúrguer. */ .nav-desktop a{font-weight:500;letter-spacing:.04em;font-size:.98rem;color:var(--tinta);padding:var(--sp-1);position:relative;white-space:nowrap} /* A faixa estreita vem DEPOIS da regra acima de propósito: mesma especificidade, e quem vem por último ganha. Na primeira tentativa ela estava antes e o `font-size` simplesmente não valeu — a medição acusou 39px de transbordo com a regra "aplicada". */ @media (max-width:1179.98px){ .nav-desktop{gap:10px} .nav-desktop a{font-size:.92rem} } .nav-desktop a::after{ content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;border-radius:3px; background:var(--petroleo-700);transition:right .25s; } .nav-desktop a:hover::after,.nav-desktop a.active::after{right:0} .nav-desktop a.active{color:var(--petroleo-800)} /* Só o CTA do HEADER some no mobile (vira hambúrguer). Reaparece ≥1024px (ver breakpoints). Os outros "Apoie" (hero e menu mobile) seguem as regras normais de .btn e ficam visíveis. */ .hdr-cta{display:none;margin-left:var(--sp-2)} .btn-cta.btn-num span{font-weight:600} /* Redes "colapsadas" na barra — surgem ao lado do Apoie quando rola além do hero. O wrap cresce de 0→--bolinha (mola) e some sem deixar buraco quando está no topo. `--bolinha` é UM número para as duas caixas de propósito. Antes eram dois literais que precisavam concordar e não concordavam: a régua de toque de 44px engordou o botão no celular (`@media(max-width:640px)`, lá embaixo) e deixou o wrap em 42 — e como o wrap é `overflow:hidden`, o círculo saía com **2px raspados no lado direito**. Medido a 390px em 17/08/2026: wrap client=42, scroll=44, botão 44x44, `border-radius:50%` — um corte reto num círculo. Com o token, encolher ou crescer a bolinha é mexer num lugar só. */ .hdr-social-wrap{--bolinha:42px; position:relative;display:flex;align-items:center;width:0;overflow:hidden; transition:width .42s var(--ease-mola)} body.past-hero .hdr-social-wrap{width:var(--bolinha)} .hdr-social-wrap.open{overflow:visible} .hdr-social{width:var(--bolinha);height:var(--bolinha);flex:0 0 auto;padding:0; /* mesma regra da assinatura: veste a cor da seção enquanto houver uma, e cai no petróleo da marca no resto do site. A tinta do ícone não é #fff fixo — sobre o amarelo do Guará ela some; quem escolhe é a luminância, medida no azPintarSecao(). */ border:0;cursor:pointer;background:var(--sec-cor,var(--petroleo-700));color:var(--sec-sobre,#fff); /* `visibility` junto do `opacity`, como o .hdr-social-pop logo abaixo já faz. Só com opacity:0 o botão continua FOCÁVEL: no topo da home, quem navega por Tab perdia o foco num controle invisível (medido: activeElement caía nele). A transição inclui visibility para não estalar. */ opacity:0;visibility:hidden;transform:scale(.5); transition:opacity var(--t-lenta) ease .08s,transform .35s var(--ease-mola) .08s,visibility .35s,background var(--t-media),color var(--t-media)} .hdr-social svg{width:20px;height:20px;display:block} body.past-hero .hdr-social{opacity:1;visibility:visible;transform:scale(1)} .hdr-social:hover,.hdr-social[aria-expanded="true"]{background:var(--ambar-500);color:var(--tinta)} /* popover que expande as 5 redes */ .hdr-social-pop{ position:absolute;top:calc(100% + 12px);right:0;z-index:var(--z-pop); display:flex;gap:var(--sp-1);padding:var(--sp-2); background:var(--branco);border:1px solid rgba(var(--tinta-rgb),.08);border-radius:16px; box-shadow:0 16px 36px rgba(var(--tinta-rgb),.20); opacity:0;visibility:hidden;transform:translateY(-10px) scale(.94);transform-origin:top right; transition:opacity .2s ease,transform .28s cubic-bezier(.34,1.5,.64,1),visibility .28s; } .hdr-social-wrap.open .hdr-social-pop{opacity:1;visibility:visible;transform:none} .hdr-social-pop a{width:40px;height:40px;flex:0 0 auto;color:var(--petroleo-800);background:rgba(var(--petroleo-700-rgb),.08); opacity:0;transform:scale(.4) translateY(-6px); transition:transform var(--t-lenta) var(--ease-mola),opacity .25s,background var(--t-media),color var(--t-media)} .hdr-social-wrap.open .hdr-social-pop a{opacity:1;transform:none} .hdr-social-pop a:hover,.hdr-social-pop a:focus-visible{background:var(--ambar-500);color:#fff;transform:translateY(-2px)} .hdr-social-pop .social-ico{width:19px;height:19px;fill:currentColor} .hdr-social-wrap.open .hdr-social-pop a:nth-child(1){transition-delay:.05s} .hdr-social-wrap.open .hdr-social-pop a:nth-child(2){transition-delay:.10s} .hdr-social-wrap.open .hdr-social-pop a:nth-child(3){transition-delay:.15s} .hdr-social-wrap.open .hdr-social-pop a:nth-child(4){transition-delay:.20s} .hdr-social-wrap.open .hdr-social-pop a:nth-child(5){transition-delay:.25s} /* mobile: o botão fica junto do hambúrguer, à direita */ @media(max-width:1023px){ .hdr-social-wrap{margin-left:auto} .menu-toggle{margin-left:0} } /* toggle mobile */ .menu-toggle{ margin-left:auto;width:44px;height:44px;display:grid;place-items:center;gap:var(--sp-1); background:transparent; } .menu-toggle span{display:block;width:24px;height:3px;border-radius:3px;background:var(--petroleo-800);transition:.25s} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .mobile-menu{ display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6) var(--sp-5); background:var(--papel);border-bottom:1px solid rgba(var(--tinta-rgb),.08); animation:slideDown .25s ease; } .mobile-menu[hidden]{display:none} @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .mm-link{letter-spacing:.04em; font-size:1.25rem;font-weight:600;padding:var(--sp-3) var(--sp-4);border-radius:var(--raio-sm); border-left:6px solid transparent;background:var(--branco);box-shadow:var(--sombra-card)} .mm-guara{border-left-color:var(--amarelo-500)} .mm-saude{border-left-color:var(--ciano-500)} .mm-concurso{border-left-color:var(--ambar-500)} .mm-transversal{border-left-color:var(--th-roxo)} .mm-cta{margin-top:var(--sp-1)} /* ============================================================ FAIXA DE AZULEJOS (frieze) — logo abaixo do header Altura fixa; ladrilhos de mesma altura encaixados lado a lado. Preenchida/embaralhada em js/main.js. ============================================================ */ .azulejos{ display:flex;flex-wrap:nowrap;align-items:flex-start; height:var(--azulejo-h);overflow:hidden;line-height:0;background:var(--branco); } /* +2px de sobra vertical, cortada pelo overflow → some qualquer linha/sliver na base (borda, arredondamento sub-pixel ou desenho que não chega ao fim do viewBox). São (não ): é o que deixa as formas lerem os tokens --az-cor-* do :root. Ver docs/09. */ .azulejos img,.azulejos svg{height:calc(100% + 2px);width:auto;display:block;flex:0 0 auto;user-select:none;pointer-events:none} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;overflow:hidden;isolation:isolate; background: radial-gradient(120% 90% at 80% -10%, var(--fundo-1) 0%, var(--fundo-2) 45%, var(--fundo-3) 100%); color:var(--branco);padding:var(--sp-8) 0 var(--sp-9); } /* azulejo no fundo do hero: atrás das formas (z 1) e do conteúdo (z 2) */ .hero::before{z-index:0} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6);position:relative;z-index:2} .eyebrow{letter-spacing:.18em; font-size:var(--eyebrow-size,.8rem);font-weight:500;color:var(--realce-claro);margin-bottom:var(--sp-2)} /* line-height 1,02 e não os 0,95 de antes: a 2ª linha tem MAIÚSCULA ACENTUADA (o Ú de SAÚDE) e a 1ª tem hastes altas. Medido a 1440px: com 0,95 as caixas das duas linhas se cruzavam em 20px e o acento encostava no I de VERDADEIRA. Oswald desenha o acento alto; quem apertar isto de novo vai reencostar. */ .hero-title{ font-size:clamp(2.1rem,9vw,4.6rem);font-weight:700;text-transform:uppercase;line-height:1.02; } /* "A VERDADEIRA" em branco, "VOZ DA SAÚDE" no turquesa claro. Não é o --turquesa-500 da marca: sobre o topo do degradê ele daria 1,85:1. O --turquesa-300 dá 4,50:1 no ponto MAIS CLARO do hero e 9,01:1 na base. */ .hero-title .hl{color:var(--turquesa-300)} /* largura casada pelo JS (heroAlign) — a 1ª linha encolhe até bater com a 2ª */ .hero-title .hero-l1{display:inline-block;font-size:var(--l1-size,1em);color:var(--branco)} /* nowrap só quando o alinhamento JS está ativo (mede/escala em 1 linha) */ .hero-fitted .hero-l1,.hero-fitted .eyebrow{white-space:nowrap} .hero-lead{ margin-top:var(--sp-4);font-size:clamp(1rem,3.5vw,1.18rem);color:rgba(255,255,255,.9);max-width:46ch; } .hero-lead strong{color:var(--branco)} .hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)} /* carrossel */ .hero-media{position:relative;max-width:100%} .carousel{position:relative;max-width:100%} .carousel-track{ display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth; gap:0;border-radius:var(--raio-lg); border:4px solid var(--realce);transition:border-color .25s; box-shadow:0 20px 50px rgba(0,0,0,.35); -ms-overflow-style:none;scrollbar-width:none; } .carousel-track::-webkit-scrollbar{display:none} .slide{ min-width:100%;scroll-snap-align:center;aspect-ratio:4/3;overflow:hidden; display:grid;place-items:end start;position:relative;background:var(--petroleo-800); } .slide img{grid-area:1/1;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block} /* pill branco POR foto do hero — elemento em cima da foto, texto editável/independente, levemente à direita e girado (não encaixado); responsivo (quebra sem vazar da tela) */ .hero-pill{position:absolute;z-index:3;bottom:16px;right:7%;left:auto;max-width:80%;margin:0; background:#fff;color:var(--petroleo-900); font-weight:600;font-size:clamp(.74rem,1.7vw,1.02rem);line-height:1.16;letter-spacing:.005em; padding:var(--sp-2) var(--sp-4);border-radius:22px;box-shadow:0 10px 26px rgba(var(--tinta-rgb),.30); transform:rotate(-2deg);text-align:left} @media(max-width:560px){.hero-pill{right:5%;max-width:86%;bottom:12px}} .carousel-dots{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-3)} .carousel-dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);transition:.2s;padding:0} .carousel-dots button.active{background:var(--realce);width:26px;border-radius:6px} /* (as formas geométricas soltas do hero — círculos, quarto de círculo e estrelas — saíram quando o azulejo virou o padrão de fundo) */ /* ============================================================ CONTADORES ============================================================ */ .counters{background:var(--branco);color:var(--tinta);padding:var(--sp-7) 0} /* A sobrancelha "3 anos de mandato" mudou de casa em 10/08/2026: era a primeira linha da faixa de KPIs, que saiu da home, e passou a abrir os cartões de eixo. O nome acompanhou — ela não é mais "dos contadores". */ .section-kicker{text-align:center;letter-spacing:.1em;font-size:.9rem;color:var(--tinta-60);margin-bottom:var(--sp-2)} .section-kicker b{color:var(--ambar-600)} /* FLEX centrado, e não grid de colunas fixas: apagar um cartão no modo edição deixava um buraco à direita, porque `repeat(4,1fr)` reserva as 4 pistas existam 4 itens ou 2. Com flex + justify-content:center, os que sobram se recentralizam sozinhos — 3 itens ocupam 75% da largura, centrados. A base (50% / 25%) é a mesma proporção do grid de antes, então com o número cheio de cartões nada muda de aparência. Vale para os KPIs (.counters-grid, hoje fora da home mas de pé para outras páginas) e para os eixos (.seg-grid). */ .counters-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-5) var(--sp-3)} .counters-grid>*{flex:0 1 calc(50% - var(--sp-3) / 2)} .counter{text-align:center;display:block;color:inherit;padding:var(--sp-2) var(--sp-1);border-radius:var(--raio-md);transition:transform .2s,background .2s} /* cada KPI puxa a cor do seu eixo */ .counter[href="#saude"]{--e:var(--th-saude);--e-ink:var(--th-saude-ink)} .counter[href="#guara"]{--e:var(--th-guara);--e-ink:var(--th-guara-ink)} .counter[href="#concurso"]{--e:var(--th-saude);--e-ink:var(--th-saude-ink)} /* "9.400 nomeações na saúde" → cor da Saúde */ .counter[href="#legislativo"]{--e:var(--th-legislativo);--e-ink:var(--th-legislativo-ink)} /* ícone temático em badge no topo de cada KPI */ .counter-ico{width:46px;height:46px;margin:0 auto var(--sp-2);--ic-recorte:color-mix(in srgb,var(--e) 16%,#fff);background:var(--ic-recorte);color:var(--e-ink,var(--petroleo-700))} .counter-ico svg{width:24px;height:24px} a.counter:hover .counter-ico{background:color-mix(in srgb,var(--e) 26%,#fff)} a.counter:hover{transform:translateY(-4px);background:color-mix(in srgb,var(--e) 12%,white)} a.counter:hover .counter-label{color:var(--tinta)} .counter-cta{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);letter-spacing:.05em;font-size:.72rem;color:var(--e-ink,var(--petroleo-700));opacity:0;transform:translateY(-3px);transition:.2s} a.counter:hover .counter-cta,a.counter:focus-visible .counter-cta{opacity:1;transform:none} .counter-cta svg{width:13px;height:13px} .counter-num{ display:block;font-family:var(--font-titulo);font-weight:700;line-height:1; font-size:clamp(1.75rem,7.5vw,3.4rem);color:var(--e-ink,var(--petroleo-800));white-space:nowrap; } .counter-label{ display:block;margin-top:var(--sp-1);font-size:.82rem;font-weight:500;color:var(--tinta-60); text-transform:uppercase;letter-spacing:.04em; } /* ============================================================ CARDS DE SEGUIMENTO ============================================================ */ .segments{padding:var(--sp-9) 0} .section-head{text-align:center;margin-bottom:var(--sp-7)} .section-title{font-size:clamp(1.55rem,6vw,2.6rem);text-transform:uppercase;color:var(--petroleo-800)} .section-sub{color:var(--tinta-60);margin-top:var(--sp-1);font-size:1.05rem} .seg-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4)} .seg-grid>*{flex:0 1 100%} .seg-card{ position:relative;display:flex;flex-direction:column;gap:var(--sp-1); padding:var(--sp-6) var(--sp-5);overflow:hidden; border-top:6px solid var(--e,var(--petroleo-700)); } .seg-card::before{ content:"";position:absolute;width:120px;height:120px;border-radius:50%; /* com fallback: um cartão SEM eixo (o que nasce do "+") não tem `--e`, e sem isto o anel caía em currentColor — um aro escuro que ninguém pediu */ right:-34px;top:-34px;background:none;border:12px solid var(--e,var(--petroleo-700));opacity:.2;transition:.25s; } .seg-card:hover::before{transform:scale(1.35)} .seg-head{display:flex;align-items:center;gap:var(--sp-3)} .seg-ico{color:var(--e);flex:none;line-height:0} .seg-ico svg{width:30px;height:30px;display:block} .seg-name{font-weight:700;font-size:1.5rem;color:var(--petroleo-900)} .seg-num{font-family:var(--font-titulo);font-weight:700;color:var(--e);font-size:1.08rem} .seg-go{margin-top:var(--sp-2);letter-spacing:.05em;font-size:.85rem;color:var(--tinta-60);display:inline-flex;align-items:center;gap:var(--sp-1)} .seg-go svg{width:14px;height:14px} .seg-card:hover .seg-go{color:var(--e)} .seg-guara{--e:var(--th-guara)} .seg-saude{--e:var(--th-saude)} .seg-concurso{--e:var(--th-laranja)} .seg-transversal{--e:var(--th-roxo)} /* ============================================================ NAV — SUBMENU (Transversal) ============================================================ */ .nav-item{position:relative;display:flex;align-items:center} .subnav{ position:absolute;top:100%;left:-14px;min-width:210px;background:var(--branco); border-radius:var(--raio-md);box-shadow:var(--sombra-hover);padding:var(--sp-2); display:flex;flex-direction:column;gap:var(--sp-1);opacity:0;visibility:hidden; transform:translateY(6px);transition:.18s;z-index:var(--z-pop); } .nav-item:hover .subnav,.nav-item:focus-within .subnav{opacity:1;visibility:visible;transform:none} .subnav a{ font-family:var(--font-texto);text-transform:none;letter-spacing:0;font-weight:600; font-size:.95rem;padding:var(--sp-2) var(--sp-3);border-radius:10px;border-left:5px solid var(--e,var(--petroleo-700)); } .subnav a::after{display:none} .subnav a:hover{background:var(--petroleo-100)} .sn-idade{--e:var(--th-idade)} .sn-esporte{--e:var(--th-esporte)} .sn-mulheres{--e:var(--th-mulheres)} .sn-educacao{--e:var(--th-educacao)} /* submenu no mobile */ .mm-sub{display:flex;flex-direction:column;gap:var(--sp-1);margin:0 0 var(--sp-1) var(--sp-3);padding-left:var(--sp-3);border-left:3px solid rgba(var(--tinta-rgb),.12)} .mm-sublink{font-family:var(--font-texto);font-weight:600;font-size:1rem;padding:var(--sp-2) var(--sp-3);border-radius:10px;border-left:5px solid var(--e);background:var(--branco);box-shadow:var(--sombra-card)} /* ============================================================ SEÇÕES DE EIXO (Fase 3 — estrutura + divisores) ============================================================ */ .divisor{position:relative;overflow:hidden;min-height:44vh;display:flex;align-items:flex-end;padding:var(--sp-7) 0;color:#fff; /* isolate: prende o blend do azulejo dentro do divisor */ isolation:isolate} .divisor-inner{position:relative;z-index:2} .divisor-eixo{display:inline-flex;align-items:center;gap:var(--sp-2);letter-spacing:.16em;font-size:.82rem;font-weight:600; padding:var(--sp-1) var(--sp-3);background:rgba(255,255,255,.20);margin-bottom:var(--sp-4)} .divisor-frase{font-weight:700;font-size:clamp(1.9rem,6.5vw,3.6rem);line-height:.98;max-width:18ch} .divisor-frase .q{opacity:.45} /* Camada da FOTO (fica atrás). Placeholder tracejado até a foto real entrar. Para usar a foto: adicionar a classe .has-foto no .divisor e definir --dv-foto: url("assets/img/div-.webp") (inline ou por classe). */ .divisor{background:var(--dv-color)} .divisor-media{position:absolute;inset:0;z-index:0; background:repeating-linear-gradient(45deg,#d8d2ca 0 15px,#cec7bf 15px 30px)} .divisor.has-foto .divisor-media{background:var(--dv-foto) center top/cover no-repeat} /* Overlay em degradê alpha da cor-tema. MOBILE (base): foto revelada em cima, cor forte embaixo (atrás do texto). --dv-mask espelha as MESMAS paradas do degradê em alpha puro: é ela que guia o azulejo (.divisor::after), pra ele acompanhar o overlay. */ .divisor.has-foto{ --dv-mask:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 40%, #000 82%)} .divisor.has-foto .divisor-overlay{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--dv-color) 45%, transparent) 40%, var(--dv-color) 82%)} /* divisores sem foto (placeholder tracejado): cor forte embaixo, revela em cima */ .divisor:not(.has-foto){ --dv-mask:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.80) 46%, #000 84%)} .divisor:not(.has-foto) .divisor-overlay{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg, color-mix(in srgb, var(--dv-color) 30%, transparent) 0%, color-mix(in srgb, var(--dv-color) 80%, transparent) 46%, var(--dv-color) 84%)} /* Azulejo por cima (foto + degradê), recortado pela --dv-mask: fica acima do overlay (z-index 1 + ordem no DOM) e abaixo do texto (z 2). */ .divisor::after{ z-index:1; -webkit-mask-image:var(--dv-mask);mask-image:var(--dv-mask); } .dv-guara{--dv-color:var(--amarelo-500);color:var(--tinta)} .dv-saude{--dv-color:var(--ciano-500)} .dv-concurso{--dv-color:var(--ambar-500);color:var(--tinta)} .dv-transversal{--dv-color:var(--th-roxo)} /* Mulheres não é eixo, é subeixo do Transversal — por isso reaproveita a FOTO do Transversal e troca só a cor. O token é o mesmo `--th-mulher` que pinta a seção na home: mudar a cor da pauta lá muda a barra aqui, sem tocar neste arquivo. Ver a página /acoes-mulheres. */ .dv-mulheres{--dv-color:var(--th-mulher)} /* A pílula padrão é branco a 20%, e sobre o magenta ela CLAREIA o fundo: o rótulo de 13px caiu para 3,44:1, medido no pixel renderizado (o valor do token não serve — atrás há foto sob degradê). Escurecer em vez de clarear resolve sem mudar a linguagem da peça. */ .dv-mulheres .divisor-eixo{background:rgba(0,0,0,.34)} .dv-legislativo{--dv-color:var(--th-legislativo)} /* (o "escurecer em vez de clarear" dos eixos claros está lá em cima, na camada do azulejo — .dv-guara/.dv-saude/.dv-concurso sobrescrevem --az-*.) */ /* mostra o rosto: enquadra a parte de cima do retrato (a imagem "desce") */ .dv-legislativo .divisor-media{background-position:center 22% !important} .dv-guara .divisor-eixo,.dv-concurso .divisor-eixo{background:rgba(var(--tinta-rgb),.14)} /* (.eixo-body / .eixo-num-big são definidos uma única vez, na seção "CONTEÚDO DOS EIXOS" logo abaixo.) */ /* subeixos da Transversal */ /* padding-BLOCK, não o atalho `padding`: estes elementos também são .container, e o atalho zeraria o padding-inline dele — o conteúdo dos eixos encostava na borda da tela em todos os breakpoints (vistoria 01/08/2026). */ .subeixos{padding-block:var(--sp-8) var(--sp-7)} .subeixo{padding:var(--sp-6) 0;border-top:1px solid rgba(var(--tinta-rgb),.09)} .subeixo:first-child{border-top:0;padding-top:var(--sp-1)} .subeixo-head{display:flex;align-items:center;justify-content:center;gap:var(--sp-3)} .subeixo-ico{color:var(--e);flex:none;line-height:0} .subeixo-ico svg{width:26px;height:26px} .subeixo-name{font-weight:700;font-size:clamp(1.3rem,4vw,1.8rem);color:var(--petroleo-900)} .subeixo-frase{color:var(--tinta-60);font-style:italic;margin-top:var(--sp-1);text-align:center} .subeixo-num{margin-top:var(--sp-1);font-family:var(--font-titulo);font-weight:700;font-size:1.08rem;color:var(--e);text-align:center} /* A porta para a página de pauta. Veste a cor do subeixo (--e) em vez do realce do site: aqui ela é a última coisa depois dos cartões, e o botão de realce competiria com o "Apoie" do cabeçalho a poucos centímetros. */ .subeixo-mais{margin-top:var(--sp-5);text-align:center} /* 44px é a régua de alvo de toque do projeto, e o `.btn--contorno` sozinho para em 40 (medido). No dedo a diferença é a de acertar e a de errar. */ .subeixo-mais .btn{min-height:44px;border-color:var(--e);color:var(--e-ink,var(--e))} .subeixo-mais .btn:hover{background:var(--e);color:var(--sobre-e,#fff);border-color:var(--e)} .subeixo-mais .btn svg{width:18px;height:18px} .subeixo>.stat-grid,.subeixo>.prog-grid,.subeixo>.law-grid{margin-top:var(--sp-4)} .se-idade{--e:var(--th-idade)} .se-esporte{--e:var(--th-esporte)} .se-mulheres{--e:var(--th-mulheres)} .se-educacao{--e:var(--th-educacao)} /* ============================================================ FASE 4 — CONTEÚDO DOS EIXOS (componentes) ============================================================ */ /* idem .subeixos: padding-block preserva a calha lateral do .container */ .eixo-body{padding-block:var(--sp-8) var(--sp-7);text-align:left} .eixo-intro{text-align:center;max-width:58ch;margin:0 auto var(--sp-2)} .block-note{text-align:center;color:var(--tinta-60);font-size:clamp(1rem,2.5vw,1.1rem);max-width:54ch;margin:var(--sp-5) auto 0} .eixo-num-big{font-family:var(--font-titulo);font-weight:700;font-size:clamp(2.1rem,7vw,3.3rem);color:var(--e-ink,var(--petroleo-800));line-height:1} .eixo-num-big span{display:block;font-family:var(--font-texto);font-weight:500;font-size:clamp(1rem,2.5vw,1.12rem);color:var(--tinta-60);text-transform:none;margin-top:var(--sp-3)} .block{padding:var(--sp-7) 0} .block-title{text-align:center;font-size:clamp(1.25rem,4vw,1.8rem);text-transform:uppercase;color:var(--petroleo-900);margin-bottom:var(--sp-5)} .block-title::before{content:"";display:block;width:46px;height:5px;border-radius:3px;background:var(--e,var(--petroleo-700));margin:0 auto var(--sp-3)} /* cards de valor (R$) — distribuição balanceada (~metade por linha, máx 5). --cols/--cols-sm são definidos por JS por grid = mín(5, teto(N/2)). */ .stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} @media(min-width:560px){.stat-grid{grid-template-columns:repeat(var(--cols-sm,3),minmax(0,1fr))}} @media(min-width:960px){.stat-grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}} .stat{padding:var(--sp-4);border-top:5px solid var(--e,var(--petroleo-700));min-width:0} .stat-num{display:block;font-family:var(--font-titulo);font-weight:700;font-size:clamp(1.3rem,4.6vw,2rem);color:var(--e-ink,var(--petroleo-800));line-height:1;white-space:nowrap} .stat-label{display:block;margin-top:var(--sp-1);font-size:.88rem;color:var(--tinta-60);font-weight:500;line-height:1.35} /* ---- KPI QUE COLAPSA (17/08/2026) ---------------------------------------- Quem manda no `.colapsavel` é o `montarColapsoKPI()` do main.js: só ganha a classe o cartão que tem TEMA e algo além dele. Aqui é só a aparência. O corte são DUAS LINHAS, e elas mostram exatamente o tema — ele vem sempre seguido de `

`, então ou a segunda linha é a linha em branco (tema curto), ou as duas são do próprio tema (tema que quebra). Nos dois casos o corpo some. Medido a 390px: a grade do Guará ia a 2621px com cartões de até 882px; colapsada, 453px. É `max-height` e NÃO `-webkit-line-clamp`, e isso foi decidido olhando a captura: o clamp acrescenta reticências no fim do trecho cortado, e como a segunda linha é a linha em branco, sobrava um "…" solto embaixo do tema, parecendo erro de digitação. O chevron já diz que há mais. NADA DE `display:none` no corpo: colapsar por altura mantém o texto na DOM, legível por leitor de tela e por buscador. */ .stat{position:relative} .stat.colapsavel .stat-label{max-height:2.7em;overflow:hidden} /* 2 × line-height 1.35 */ /* O CARTÃO NÃO ESTICA MAIS. A primeira versão abria em pé, e no hover — e as duas coisas somadas ficaram ruins: abrir empurrava tudo que vinha abaixo, e com o hover a página pulava ao simples passar do mouse. O detalhe passou a abrir em MODAL (17/08/2026, a pedido), então aqui não há estado "aberto": o cartão fica sempre do tamanho do número e do tema. */ .stat-abrir{ position:absolute;right:var(--sp-2);bottom:var(--sp-2); width:32px;height:32px;display:grid;place-items:center; padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(var(--petroleo-700-rgb),.08);color:var(--e-ink,var(--petroleo-800)); transition:background var(--t-media),transform var(--t-media)} .stat-abrir svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-media)} .stat-abrir:hover,.stat-abrir:focus-visible{background:rgba(var(--petroleo-700-rgb),.16)} /* o chevron cresce um pouco ao passar o mouse — a seta não gira mais, porque girar prometia "vou expandir aqui" e o que acontece é abrir uma janela */ .stat.colapsavel:hover .stat-abrir{transform:scale(1.12)} /* alvo de toque sem engordar o círculo (a régua do docs/16) */ .stat-abrir::after{content:"";position:absolute;inset:-6px} /* NO MODO EDIÇÃO O CARTÃO FICA ABERTO. Colapsado, o gabinete não alcançaria o texto que quer editar — e a seta ali só atrapalharia o clique que põe o cursor. */ body.dayse-editing .stat.colapsavel .stat-label{max-height:none;overflow:visible} body.dayse-editing .stat-abrir{display:none} /* ---- O MODAL DO KPI -------------------------------------------------------- O texto entra CLONADO (ver `kpiAbrir` no main.js): o original é editável, e movê-lo faria o Publicar fotografar um cartão vazio. `--e-ink` vem do cartão de origem, então o número no topo sai na cor do eixo — o modal é daquele KPI, não uma janela genérica. */ /* `[hidden]` PRECISA VENCER O `display:grid`, e esta linha não é zelo: o `display:none` do atributo vem da folha do NAVEGADOR, e qualquer `display` de autor o atropela. Sem ela o modal nunca sumia — ficava com o véu e a caixa por cima da página, interceptando todo clique: nada mais fechava, o chevron não reabria, e a página parecia travada. E os testes não pegavam, porque conferiam o ATRIBUTO `hidden`, que estava certo, em vez do que se vê. Achado em 17/08/2026 com `elementFromPoint` no centro da tela. */ .kpi-modal[hidden]{display:none} .kpi-modal{position:fixed;inset:0;z-index:var(--z-toast);display:grid;place-items:center;padding:var(--sp-4)} .kpi-veu{position:absolute;inset:0;background:rgba(var(--petroleo-700-rgb),.55);backdrop-filter:blur(2px)} /* ABERTO POR HOVER, O MODAL NÃO PODE INTERCEPTAR O PONTEIRO — e isto não é refinamento, é o que impede um LAÇO: o véu cobre a tela inteira, inclusive o cartão; assim que ele aparecesse, o ponteiro passaria a estar sobre o véu, o `mouseout` do cartão dispararia e o modal fecharia — para abrir de novo no quadro seguinte. Só a caixa recebe ponteiro, e é ela que precisa: entrar nela é o que conta como "ainda estou no hover". O resto atravessa para a página. O véu também fica mais leve: janela que aparece sem clique não deve escurecer o site inteiro. */ .kpi-modal.por-hover{pointer-events:none} .kpi-modal.por-hover .kpi-caixa{pointer-events:auto} .kpi-modal.por-hover .kpi-veu{background:rgba(var(--petroleo-700-rgb),.22);backdrop-filter:none} .kpi-modal.por-hover .kpi-x{display:none} /* sem clique não há o que fechar à mão */ .kpi-caixa{ position:relative;width:min(640px,100%);max-height:min(80vh,720px);overflow:auto; background:var(--branco);border-radius:var(--raio-md); border-top:5px solid var(--e,var(--petroleo-700)); padding:var(--sp-6) var(--sp-6) var(--sp-7);box-shadow:0 24px 64px rgba(0,0,0,.28)} .kpi-caixa:focus{outline:none} .kpi-num{margin:0 0 var(--sp-3);font-family:var(--font-titulo);font-weight:700; font-size:clamp(1.6rem,5vw,2.4rem);line-height:1;color:var(--e-ink,var(--petroleo-800))} .kpi-texto{display:block;font-size:1rem;line-height:1.55;color:var(--tinta)} .kpi-x{position:absolute;top:var(--sp-3);right:var(--sp-3); width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%; cursor:pointer;background:rgba(var(--petroleo-700-rgb),.08);color:var(--petroleo-800); transition:background var(--t-media)} .kpi-x:hover,.kpi-x:focus-visible{background:rgba(var(--petroleo-700-rgb),.18)} .kpi-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} /* A ROLAGEM NÃO TRAVA. A versão anterior travava com o modal fixado, e isso tornava impossível o comportamento pedido em seguida — "rolar para longe fecha": sem rolagem, não há evento de rolagem. Quem fecha é o rolar. */ /* ---- AVISO DE RASCUNHO (17/08/2026) --------------------------------------- Fica GRUDADO embaixo e atravessa a largura: o defeito que ele existe para contar — "o que você vê é local, e publicar apagaria o que está no ar" — é o tipo de coisa que ninguém procura, então tem de encontrar a pessoa. Discreto no caso informativo, âmbar no caso em que há conteúdo a perder. */ .dayse-rascunho{ position:fixed;left:0;right:0;bottom:0;z-index:var(--z-menu); display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); background:var(--petroleo-800);color:#fff; box-shadow:0 -6px 24px rgba(0,0,0,.18);font-size:.92rem} .dayse-rascunho.grave{background:var(--ambar-500);color:var(--tinta)} .dayse-rascunho svg{width:22px;height:22px;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dayse-rascunho p{margin:0;flex:1 1 260px;line-height:1.35} .dayse-rascunho button{ flex:0 0 auto;min-height:36px;padding:0 var(--sp-4);cursor:pointer; border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit; font:inherit;font-weight:600} .dayse-rascunho button[data-ver]{background:currentColor} .dayse-rascunho button[data-ver]:hover{opacity:.85} /* o texto do botão cheio precisa contrastar com o próprio fundo herdado */ .dayse-rascunho button[data-ver]{color:var(--petroleo-800)} .dayse-rascunho.grave button[data-ver]{color:var(--ambar-500)} .dayse-rascunho button[data-manter]:hover{background:rgba(255,255,255,.14)} .dayse-rascunho.grave button[data-manter]:hover{background:rgba(0,0,0,.08)} /* cards de programa */ .prog-grid{gap:var(--sp-4)} /* `align-content:start` NÃO é enfeite. Sem ele o valor é `normal`, que em grade se comporta como `stretch`: as linhas de altura automática incham para preencher o cartão, e como os cartões da fileira têm todos a altura do mais alto, cada um distribui a sobra de um jeito. Medido em 12/08 na grade das Mulheres: ícones começando a 20, 24 e 30px do topo e parágrafos a 74, 85 e 103 — em cartões de altura idêntica (179px). O conteúdo se ancora no TOPO; a sobra vai toda para o rodapé do cartão, onde ninguém a lê como desalinho. */ .prog{padding:var(--sp-5);min-width:0; display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-3);row-gap:var(--sp-3); align-items:center;align-content:start} .prog-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;--ic-recorte:color-mix(in srgb,var(--e) 15%,white);background:var(--ic-recorte);color:var(--e-ink,var(--e));grid-column:1;grid-row:1} .prog-ico svg{width:23px;height:23px} .prog h3,.prog h4{font-weight:600;font-size:1.18rem;color:var(--petroleo-900);line-height:1.06;grid-column:2;grid-row:1;margin:0} .prog p{font-size:.94rem;color:var(--tinta-60);line-height:1.55;grid-column:1 / -1;grid-row:2;margin:0} .prog .tag{grid-column:1 / -1;grid-row:3;justify-self:start;margin:0;letter-spacing:.04em;font-size:.72rem;padding:var(--sp-1) var(--sp-3)} /* SELO VAZIO NÃO APARECE PARA O VISITANTE. O "+" da entrega clona o último cartão e esvazia o texto; se o molde tiver selo de lei, o clone nasce com um selo em branco — uma pílula colorida de 20px dizendo nada. E o `.tag` não é unidade (não tem botão de apagar), então ficaria lá para sempre. Escondê-lo só FORA do modo edição preserva as duas coisas: o visitante não vê sobra, e quem edita continua vendo o "escreva aqui" e pode pôr a lei. */ body:not(.dayse-editing) .prog .tag:empty{display:none} /* categorias com ícone (cargo maior, número abaixo) */ .cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} @media(min-width:820px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* variante: 1 card por linha no mobile */ @media(max-width:559px){.cat-grid--1col{grid-template-columns:minmax(0,1fr)}} .cat{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:4px solid var(--e,var(--petroleo-700));min-width:0} .cat-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;--ic-recorte:color-mix(in srgb,var(--e) 15%,white);background:var(--ic-recorte);color:var(--e-ink,var(--e));flex:none} /* "Também produzimos": o número ocupa o lugar do ícone (badge à esquerda) */ .cat--num .cat-ico{font-family:var(--font-titulo);font-weight:700;font-size:1.15rem;letter-spacing:.01em} .cat-ico svg{width:21px;height:21px} .cat-text{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0} .cat-role{font-weight:600;font-size:1.02rem;color:var(--petroleo-900);line-height:1.05} .cat-num{font-family:var(--font-titulo);font-weight:700;font-size:.9rem;color:var(--e-ink,var(--petroleo-800))} .carreiras{margin-top:var(--sp-5)} .sub-label,.carreiras h4{font-size:1.05rem;color:var(--e-ink,var(--petroleo-800));text-align:center;margin:var(--sp-6) 0 var(--sp-3)} .carreiras h4{margin:0 0 var(--sp-3)} .block-title + .sub-label{margin-top:0} .chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center} .chip{font-weight:600;font-size:.85rem;color:var(--petroleo-900);background:var(--branco);box-shadow:var(--sombra-card);padding:var(--sp-2) var(--sp-3)} /* quebra-linha p/ equilibrar chips: no PC, se passaria de 5 numa linha, divide em 2 linhas (ponto de quebra inserido por js/main.js). No mobile fica natural. */ .chip-br{display:none} @media(min-width:640px){.chip-row .chip-br{display:block;flex-basis:100%;width:100%;height:0;margin:0;padding:0;border:0}} /* cards de lei */ .law-grid{gap:var(--sp-3)} .law{padding:var(--sp-4) var(--sp-5);border-left:5px solid var(--e,var(--petroleo-700));min-width:0} .law-badge{display:inline-block;font-family:var(--font-titulo);font-weight:600;font-size:.76rem;letter-spacing:.02em;padding:var(--sp-1) var(--sp-2);margin-bottom:var(--sp-2)} .law p{font-size:.92rem;color:var(--tinta);line-height:1.5} /* regiões (mapa do Guará) */ .region-grid{gap:var(--sp-3)} .region{padding:var(--sp-4);border-top:4px solid var(--e);min-width:0} .region-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2)} .region-head b{color:var(--petroleo-900);font-size:1.02rem} .region-head span{font-family:var(--font-titulo);color:var(--e-ink,var(--e));font-weight:700;white-space:nowrap} .region p{font-size:.83rem;color:var(--tinta-60);line-height:1.5} /* grades equilibradas: com >5 itens, quebra em 2 linhas de N/2 no PC (a classe .grid-balanced é posta por js/main.js). Grades com até 5 itens mantêm o auto-fit. */ .grid-balanced{grid-template-columns:1fr} @media(min-width:560px){.grid-balanced{grid-template-columns:repeat(var(--cols-sm,2),minmax(0,1fr))}} @media(min-width:960px){.grid-balanced{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}} /* galeria em carrossel */ .carousel--gal{max-width:840px;margin-inline:auto} .carousel--gal .carousel-track{border:0;box-shadow:var(--sombra-card);border-radius:var(--raio-md)} /* galerias de fotos ("A saúde na rua", "O Guará em movimento"): a foto inteira cabe na altura da tela — sem cortar as verticais; centrada e fixa no box (sem rolagem vertical dentro do box). */ .carousel--gal .slide{aspect-ratio:auto;height:min(70vh,86vw);background:#1c1033;display:block} .carousel--gal .slide img{width:100%;height:100%;object-fit:contain;object-position:center} .carousel--gal .carousel-dots button{background:rgba(var(--tinta-rgb),.22)} .carousel--gal .carousel-dots button.active{background:var(--e,var(--petroleo-700))} /* cor-tema por eixo p/ os componentes */ #guara{--e:var(--th-guara);--e-ink:var(--th-guara-ink)} #saude{--e:var(--th-saude);--e-ink:var(--th-saude-ink)} #concurso{--e:var(--th-laranja);--e-ink:var(--th-laranja-ink)} #transversal{--e:var(--th-roxo);--e-ink:var(--th-roxo-ink)} #legislativo{--e:var(--th-legislativo);--e-ink:var(--th-legislativo-ink)} #melhor-idade{--e:var(--th-idade);--e-ink:var(--th-idade-ink)} #esporte{--e:var(--th-esporte);--e-ink:var(--th-esporte-ink)} #mulheres{--e:var(--th-mulheres);--e-ink:var(--th-mulheres-ink)} #educacao{--e:var(--th-educacao);--e-ink:var(--th-educacao-ink)} /* ============================================================ CONTATO / CTA + REDES + RODAPÉ + WHATSAPP FLUTUANTE ============================================================ */ .svg-sprite{position:absolute;width:0;height:0;overflow:hidden} /* CTA / contato */ /* .guia-final divide o degradê: é o mesmo bloco roxo de fecho, num cartão. */ .cta,.guia-final{position:relative;overflow:hidden;color:#fff;text-align:center;padding:var(--sp-10) 0;isolation:isolate; background:radial-gradient(120% 100% at 50% -20%, var(--fundo-1), var(--fundo-2) 55%, var(--fundo-3))} /* azulejo no fundo do CTA: atrás da Dayse (z 1) e do texto (z 2) */ .cta::before{z-index:0} .cta-inner{position:relative;z-index:2;max-width:680px;margin-inline:auto} /* ---- HERO EM DUPLA: o dizer de um lado, a moldura do outro (18/08/2026) ---- O `.cta--hero` nasceu centrado e de coluna única, e continua assim em toda página — só a /apoiar veste o `.cta--par`, porque só lá existe uma peça que vale tanto quanto o texto. O texto perde a centralização junto: bloco de texto centrado ao lado de uma imagem fica sem eixo. */ .cta--par .cta-inner{max-width:1060px;display:grid;gap:var(--sp-8);align-items:center; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);text-align:left} .cta--par .cta-actions{justify-content:flex-start} .cta--par .cta-lead{margin-inline:0} /* O cartão é UM link. O "botão" dentro dele é : veste-se de botão, mas não é alvo próprio — dois alvos para o mesmo destino atrapalham quem navega por teclado. */ .mold-chamada{display:block;position:relative;text-decoration:none;color:inherit; justify-self:center;width:min(340px,100%); transition:transform var(--t-media),filter var(--t-media)} .mold-chamada:hover,.mold-chamada:focus-visible{transform:translateY(-4px)} .mold-chamada-foto{display:block;width:100%;height:auto;aspect-ratio:1/1; border-radius:var(--raio-lg);box-shadow:0 18px 44px rgba(var(--tinta-rgb),.42)} /* O SELO CAVALGA O CANTO, não o meio de cima: no meio ele tapa o "TÔ COM A DAYSE" da própria moldura — a peça perdia a frase que a explica. É ele que diz "isto é uma moldura" antes de qualquer texto ser lido. */ .mold-chamada-selo{position:absolute;top:0;left:0;translate:-28% -28%;z-index:2; width:56px;height:56px;display:grid;place-items:center;border-radius:50%; background:var(--realce);color:var(--realce-ink,var(--tinta)); box-shadow:0 8px 20px rgba(var(--tinta-rgb),.38)} .mold-chamada-selo svg{width:28px;height:28px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* o botão cavalga a borda de baixo, do mesmo jeito: o cartão vira uma peça só */ .mold-chamada-btn{position:absolute;left:50%;bottom:0;translate:-50% 45%;z-index:2; white-space:nowrap;gap:var(--sp-2)} .mold-chamada-btn svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mold-chamada:hover .mold-chamada-btn{background:var(--realce-forte)} /* a folga de baixo é do botão que cavalga: sem ela ele encosta no que vier */ .cta--par .mold-chamada{margin-bottom:var(--sp-5)} @media(max-width:820px){ .cta--par .cta-inner{grid-template-columns:1fr;text-align:center; max-width:560px;gap:var(--sp-7)} /* desfaz o alinhamento à esquerda da coluna dupla; o centro vem da base */ .cta--par .cta-actions{justify-content:center} .cta--par .cta-lead{margin-inline:auto} .mold-chamada{width:min(280px,84%)} } .cta-kicker{letter-spacing:.18em;font-size:.8rem;color:var(--realce-claro);margin-bottom:var(--sp-2)} .cta-title{font-size:clamp(1.9rem,6vw,3rem);text-transform:uppercase} .cta-title .hl{color:var(--realce)} .cta-lead{margin:var(--sp-3) auto 0;color:rgba(255,255,255,.9);font-size:clamp(1rem,3vw,1.15rem);max-width:48ch} .cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-6)} /* No mobile os botões abrem espaço à direita p/ a Dayse (encolhem/vão pra esquerda) — MAS SÓ ONDE A DAYSE ESTÁ. O recorte `.cta-dayse` existe num lugar só: o CTA de rodapé montado pelo `_middleware.js`. Os heros de página vestem `.cta.cta--hero` e não têm recorte nenhum, então até 18/08/2026 eles abriam 34% de espaço para ninguém e o botão nascia torto — medido a 390px na /apoiar: 58px à esquerda do centro; a 600px, 87px. O `:not()` devolve a eles o `justify-content:center` da regra base. */ @media(max-width:720px){ .cta:not(.cta--hero) .cta-actions{justify-content:flex-start;padding-right:34%} .cta-actions .btn{padding-left:var(--sp-4);padding-right:var(--sp-4);font-size:.92rem} } .btn-ico{width:20px;height:20px;fill:currentColor} .cta-social-label{margin-top:var(--sp-7);letter-spacing:.12em;font-size:.78rem;color:var(--petroleo-200)} /* redes (chips) */ .social{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-3)} /* redes no hero: alinhadas à esquerda p/ casar com os botões (fundo roxo, mesmo estilo do CTA) */ .social--hero{justify-content:flex-start;margin-top:var(--sp-4)} /* assinatura empilhada no topo do hero. NÃO leva `filter:brightness(0) invert(1)`: o arquivo já vem branco e turquesa, e o filtro achataria as duas cores em branco chapado — era o truque de quando a assinatura era roxa (docs/29 §6). QUEM MANDA NO TAMANHO AQUI É O JS, não este `height`: o `heroAlign()` do main.js iguala a largura da assinatura à de "mas não sou só.", que é a régua do hero inteiro (título, sobrancelha e assinatura na mesma largura). O `height` abaixo é só o estado antes do JS rodar e a rede de quem está sem JS. Como o desenho novo é empilhado (2,15:1, e não os 7,2:1 do antigo), a MESMA largura dá um bloco ~3x mais alto — é isso que se vê no hero, e é de propósito. */ .hero-wordmark{display:block;height:clamp(86px,14vw,150px);max-width:100%;margin:0 0 var(--sp-4); /* 1789,24 x 832,06 = o viewBox do arquivo antigo, agora reconstruído por posição. A PROPORÇÃO substitui o width:auto que o dava de graça — e convive com o heroAlign(), que crava width e deixa height:auto. */ aspect-ratio:1789.24/832.06;position:relative} .hw-belt{position:absolute;inset:0} .hw-parte{position:absolute;left:0;width:100%;height:auto;display:block} .hw-logo{top:0} .hw-num{top:47.27%} /* 393,3 / 832,06 — a folga exata do arquivo de origem */ .hw-bis{display:none} /* a cópia do logo só serve à esteira do celular */ /* desktop: hero centralizado por completo (texto + CTA + redes no mesmo eixo) */ @media(min-width:1024px){ .hero-content{text-align:center} .hero-wordmark{margin-inline:auto} .hero-lead{margin-inline:auto} .hero-actions{justify-content:center} .social--hero{justify-content:center} } /* mobile: Apoie + Conheça lado a lado (dividem a linha, sem quebrar) + redes centralizadas abaixo */ @media(max-width:600px){ /* A ESTEIRA (18/08/2026). No celular a assinatura empilhada come um terço da primeira tela — e ela é duas informações, o nome e o número, que não precisam aparecer juntas. Aqui elas se revezam numa faixa só: o logo sai de lado PUXANDO o número, e o número sai puxando o logo. Não é cruzamento de opacidade; é uma esteira rígida, que é o que dá a sensação de arrastar um ao outro. O laço fecha sem emenda porque a esteira tem TRÊS peças: logo, número, logo. Em -66,666% o que se vê é a terceira peça, quadro idêntico ao de translateX(0) — então o retorno ao zero é invisível. Sem essa terceira peça, o loop precisaria voltar andando para trás (feio) ou dar um salto visível. A proporção da faixa é a do NÚMERO (a peça mais alta): com object-fit contain, o logo, que é mais baixo, entra inteiro e centrado, e as duas peças mantêm a escala relativa que tinham no arquivo original. */ .hero-wordmark{aspect-ratio:1789.24/438.76;overflow:hidden} .hw-belt{display:flex;width:300%;height:100%; animation:hw-esteira 12s cubic-bezier(.65,0,.35,1) infinite} .hw-parte{position:static;flex:0 0 33.3333%;width:33.3333%;height:100%; object-fit:contain;object-position:center} .hw-bis{display:block} .hero-actions{flex-wrap:nowrap;gap:var(--sp-2)} .hero-actions .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;padding:.72em .6em;font-size:clamp(.72rem,3.2vw,.92rem)} .hero-actions .btn-num b{padding:.05em .32em} .social--hero{justify-content:center} } .social a{width:46px;height:46px;background:rgba(255,255,255,.10);color:#fff;transition:transform .2s,background .2s,color .2s} .social a:hover,.social a:focus-visible{background:var(--ambar-500);color:var(--tinta);transform:translateY(-3px)} .social-ico{width:21px;height:21px;fill:currentColor} /* rodapé */ .site-footer{background:var(--tinta-fundo);color:#fff;padding:var(--sp-8) 0} .footer-inner{display:flex;flex-direction:column;gap:var(--sp-4);align-items:center;text-align:center} .footer-meta{color:rgba(255,255,255,.7);font-size:.9rem} .footer-meta b{color:var(--realce-claro)} .footer-mail a{color:rgba(255,255,255,.6);font-size:.85rem} .footer-mail a:hover{color:#fff;text-decoration:underline} /* WhatsApp flutuante */ .wa-float{position:fixed;right:16px;bottom:16px;z-index:var(--z-flutuante);width:56px;height:56px;background:var(--realce);color:var(--realce-ink,var(--tinta));box-shadow:0 10px 26px rgba(var(--tinta-rgb),.34);transition:transform .2s,background .25s,color .25s} .wa-float:hover{transform:translateY(-3px) scale(1.05);background:var(--realce-forte)} .wa-float svg{width:30px;height:30px;fill:currentColor} @media (min-width:1024px){.wa-float{width:62px;height:62px;right:24px;bottom:24px}.wa-float svg{width:34px;height:34px}} /* ============================================================ SCROLL-REVEAL ============================================================ */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} .stillmode .reveal{opacity:1 !important;transform:none !important;transition:none !important} /* captura determinística: congela o slideshow do hero de "Quem sou" no 1º quadro (mesma regra que o prefers-reduced-motion já aplica lá embaixo) */ .stillmode .cta-slideshow span{animation:none} .stillmode .cta-slideshow span:first-child{opacity:1} /* modo captura: encurta divisores p/ ver a página inteira sem distorção de vh */ .compact .divisor{min-height:360px} /* ============================================================ BREAKPOINTS (min-width — mobile-first) ============================================================ */ @media (min-width:640px){ .counters-grid>*{flex:0 1 calc(25% - var(--sp-3) * 3 / 4)} .seg-grid>*{flex:0 1 calc(50% - var(--sp-4) / 2)} } @media (min-width:768px){ .slide{aspect-ratio:16/11} /* DESKTOP com foto: foto no painel direito, cor+texto à esquerda, seam em degradê */ .divisor.has-foto .divisor-media{left:40%;background-position:center} .divisor.has-foto{ --dv-mask:linear-gradient(90deg, #000 0%, #000 38%, transparent 62%)} .divisor.has-foto .divisor-overlay{ background:linear-gradient(90deg, var(--dv-color) 0%, var(--dv-color) 38%, transparent 62%)} /* DESKTOP sem foto: cor forte à esquerda → revela o placeholder à direita */ .divisor:not(.has-foto){ --dv-mask:linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,.60) 52%, transparent 86%)} .divisor:not(.has-foto) .divisor-overlay{ background:linear-gradient(90deg, var(--dv-color) 0%, var(--dv-color) 30%, color-mix(in srgb, var(--dv-color) 60%, transparent) 52%, color-mix(in srgb, var(--dv-color) 0%, transparent) 86%)} } @media (min-width:1024px){ :root{--header-h:74px;--azulejo-h:54px} .brand-assin{height:40px} .brand-logo{height:40px} .brand-wordmark{height:25px} .nav-desktop{display:flex} .hdr-cta{display:inline-flex} .menu-toggle{display:none} .mobile-menu{display:none !important} /* (a faixa 1024–1099 volta ao hambúrguer logo abaixo do fecho deste bloco) */ .hero{padding:var(--sp-11) 0 var(--sp-12)} .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:var(--sp-8)} .seg-grid>*{flex:0 1 calc(25% - var(--sp-4) * 3 / 4)} .segments{padding:var(--sp-12) 0} .divisor{min-height:56vh} .subeixos{padding-block:var(--sp-9) var(--sp-8)} } /* A ASSINATURA INTEIRA, COM O 40222 — e o cabeçalho ganha um container próprio. O `--container` de 1200px é o container do SITE INTEIRO: alargá-lo mudaria a medida de leitura de todas as páginas. Só o cabeçalho cresce. O ponto de virada (1360px) e a largura (1320px) saíram de medição no Chrome COM Oswald carregado — a fonte é condensada e mede diferente. Ver docs/29 §5 e `node tools/medir-header.mjs`, que refaz a conta. Medido: a 1360 a assinatura inteira ocupa 380px e ainda sobram 101px de folga no cabeçalho. O limiar real fica por volta de 1310; 1360 é margem de propósito, para um item de menu renomeado não estourar a linha. */ @media (min-width:1360px){ .site-header .container{max-width:var(--container-header)} .brand-assin--curta{display:none} .brand-assin--cheia{display:block} } /* 1024–1099: ESTA FAIXA VOLTA AO HAMBÚRGUER. Com o oitavo item (Projetos) o menu não cabe aqui — e o que enganou a primeira medição foi eu medir só a HOME: nela o botão de redes tem largura 0, no resto do site ele ocupa 41px. Medido em /blog, transbordo do menu: gap 12px / .98rem → 1024: 73px gap 10px / .92rem → 1024: 45px gap 10px / .86rem → 1024: 25px Ou seja: não cabe nem apertando a fonte a 13px. E 1024 é iPad deitado, que é touch — encolher mais o texto salvaria o pixel e estragaria o alvo de toque (a régua deste projeto é 44px). O hambúrguer já resolve isso, e é o que vale um pixel abaixo daqui. O `!important` responde ao `display:none !important` do bloco de 1024 acima; por isso o `[hidden]` também precisa do dele, senão o menu abriria sozinho. */ @media (min-width:1024px) and (max-width:1099.98px){ .nav-desktop{display:none} .menu-toggle{display:grid} .mobile-menu{display:flex !important} .mobile-menu[hidden]{display:none !important} } @media (min-width:1440px){ .container{max-width:1240px} } /* ============================================================ MOVIMENTO REDUZIDO ============================================================ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition:none !important} .reveal{opacity:1;transform:none} .carousel-track{scroll-behavior:auto} } /* ============================================================ FOTOS DA REVISTA — base (Dayse PNG) + carimbos flutuantes (overs) ============================================================ */ /* Dayse recortada no fundo roxo da CTA ("Fale com o mandato"), sem faixa branca */ .cta-dayse{position:absolute;right:var(--dayse-x,0px);bottom:0;z-index:1;height:min(90%,450px);width:auto;pointer-events:none;filter:drop-shadow(0 12px 30px rgba(0,0,0,.32))} @media(max-width:720px){.cta-dayse{right:-12%;bottom:0;height:min(70%,310px);opacity:.9}} /* modo edição: a Dayse pode ser reposicionada horizontalmente (arrastar). A posição é guardada em --dayse-x e só vale no wide; no mobile a regra acima vence */ body.dayse-editing .cta-dayse{pointer-events:auto;cursor:ew-resize;touch-action:none} body.dayse-editing .cta-dayse:hover{outline:2px dashed var(--ambar-500);outline-offset:4px} .cta-dayse.dayse-dragging-x{cursor:grabbing;outline:2px solid var(--ambar-500);outline-offset:4px} /* modo edição: arrastar a foto do carrossel dentro do frame p/ reenquadrar (object-position). Só nos carrosséis com corte (cover); galerias usam contain (nada a reenquadrar). */ body.dayse-editing .carousel:not(.carousel--gal) .slide img{cursor:grab;touch-action:none} body.dayse-editing .slide img.dayse-img-panning{cursor:grabbing} body.dayse-editing .carousel:not(.carousel--gal) .slide::after{content:"arraste · rodinha = zoom";position:absolute;z-index:4;left:8px;top:8px; background:rgba(20,8,40,.72);color:#fff;font:600 11px/1 var(--font-titulo);text-transform:uppercase;letter-spacing:.04em; padding:var(--sp-1) var(--sp-2);border-radius:8px;pointer-events:none;opacity:0;transition:opacity .15s} body.dayse-editing .carousel:not(.carousel--gal) .slide:hover::after{opacity:1} body.dayse-editing .carousel:not(.carousel--gal) .slide:has(.dayse-img-panning)::after{opacity:0} /* mobile intocado: ignora reposicionamento/escala aplicados no wide */ @media(max-width:720px){.cta-dayse{transform:none !important}} /* seções posicionadas p/ os carimbos flutuantes (qualquer seção pode hospedar) */ section,footer{position:relative} .over-stamp{position:absolute;z-index:5;pointer-events:none;width:clamp(110px,13vw,180px);height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))} .over-promessa{right:2%;bottom:8%;transform:rotate(-7deg)} .over-guara-pediu{right:1.5%;top:7%;transform:rotate(6deg)} .over-guara-atendeu{left:1.5%;bottom:10%;transform:rotate(-5deg)} .over-hrgu{right:1.5%;top:24%;transform:rotate(5deg)} .over-saude-escolas{left:1.5%;bottom:12%;transform:rotate(-6deg)} .over-hq{right:1.5%;top:16%;transform:rotate(6deg)} @media(max-width:820px){.over-stamp{display:none}} /* só no desktop, pra não cobrir conteúdo no mobile */ /* no modo edição os carimbos ficam agarráveis p/ posicionar livremente */ body.dayse-editing .over-stamp{pointer-events:auto;cursor:grab;outline:2px dashed var(--turquesa-400);outline-offset:2px} body.dayse-editing .over-stamp.over-dragging{opacity:.8;cursor:grabbing;z-index:1000} /* ============================================================ MODO EDIÇÃO — engrenagem (canto sup. direito) → editar textos Ferramenta de rascunho (client-side, salva no navegador). ============================================================ */ /* dock: engrenagem + barra juntas no canto sup. direito */ .dayse-edit-dock{ position:fixed;z-index:var(--z-edicao); top:calc(var(--header-h) + var(--azulejo-h) + 12px);right:14px; display:flex;flex-direction:row-reverse;align-items:center;gap:var(--sp-2); } .dayse-gear{flex:none;width:44px;height:44px;border:0;cursor:pointer;padding:0; background:var(--branco);color:var(--petroleo-800); box-shadow:var(--sombra-card);transition:transform .25s,background .2s,color .2s} .dayse-gear svg{width:22px;height:22px;display:block} .dayse-gear:hover{transform:rotate(35deg)} .dayse-gear[aria-pressed="true"]{background:var(--petroleo-800);color:#fff;transform:rotate(60deg)} /* barra ao lado da engrenagem; só aparece no modo edição (bar.hidden) */ .dayse-edit-bar{ display:flex;align-items:center;gap:var(--sp-2); background:var(--petroleo-900);color:#fff;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); /* canto arredondado, não pílula: --raio-md é o mesmo do .dayse-panel que abre logo abaixo dela, então a barra e o painel passam a ter o mesmo canto. E o pill só funcionava numa linha — no celular a barra quebra em 3 (medido: 362x123) e o raio de 999px virava uma ponta de 61px. */ border-radius:var(--raio-md);box-shadow:var(--sombra-hover); } .dayse-edit-bar[hidden]{display:none} .dayse-edit-bar .deb-status{letter-spacing:.05em;font-size:.72rem;color:var(--amarelo-300);white-space:nowrap} .deb-btn{font-family:var(--font-texto);font-weight:600;font-size:.82rem;line-height:1;padding:var(--sp-2) var(--sp-3);background:rgba(255,255,255,.14);color:#fff;transition:background var(--t-rapida)} .deb-btn:hover{background:rgba(255,255,255,.26)} .deb-btn.deb-primary{background:var(--amarelo-500);color:var(--petroleo-900)} .deb-btn.deb-primary:hover{background:var(--amarelo-300)} /* (o :hover do deb-publish vem do .btn--sucesso, lá em cima — não se repete aqui) */ /* toast de feedback ao Publicar (gira → check verde → some) */ .dayse-toast{position:fixed;z-index:var(--z-toast);top:calc(var(--header-h) + var(--azulejo-h) + 20px);left:50%; display:none;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--raio-pill); letter-spacing:.04em;font-weight:600;font-size:.86rem; box-shadow:var(--sombra-hover);color:#fff;background:var(--petroleo-800); opacity:0;transform:translate(-50%,-10px);transition:opacity .2s,transform .2s;pointer-events:none} .dayse-toast.on{display:flex;opacity:1;transform:translate(-50%,0)} .dayse-toast.t-ok{background:var(--turquesa-500);color:var(--sobre-turquesa)} .dayse-toast.t-err{background:var(--magenta-500)} .dayse-toast .dt-ico{display:grid;place-items:center} .dayse-toast svg{width:20px;height:20px;stroke-width:2.4;display:block} @keyframes dt-rot{to{transform:rotate(360deg)}} .dayse-toast .dt-spin{animation:dt-rot .8s linear infinite;transform-origin:center} @media(max-width:560px){ .dayse-edit-dock{flex-direction:column;align-items:flex-end} .dayse-edit-bar{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 28px)} .dayse-edit-bar .deb-status{display:none} } body.dayse-editing [data-edit-key]{outline:2px dashed rgba(var(--petroleo-700-rgb),.45);outline-offset:3px;border-radius:5px;cursor:text} body.dayse-editing [data-edit-key]:hover{outline-color:rgba(var(--petroleo-700-rgb),.8)} body.dayse-editing [data-edit-key]:focus{outline:2px solid var(--petroleo-700);outline-offset:3px;background:rgba(155,114,212,.10)} body.dayse-editing [data-edit-key].is-edited{outline-color:var(--ambar-500)} /* ocultos: fantasma de baixa opacidade no modo edição, some fora dele */ body:not(.dayse-editing) .dayse-hidden{display:none !important} body.dayse-editing .dayse-hidden{opacity:.4;outline:2px dashed var(--turquesa-400) !important;outline-offset:3px} /* mini-barra flutuante por bloco (alça + ocultar + deletar) */ .dayse-blk-tools{position:fixed;z-index:var(--z-edicao-alta);display:none;gap:var(--sp-1);padding:var(--sp-1);border-radius:10px;background:var(--petroleo-900);box-shadow:var(--sombra-hover)} .dayse-blk-tools.on{display:flex} .dayse-blk-tools button{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;background:transparent;color:#fff;padding:0} .dayse-blk-tools button:hover{background:rgba(255,255,255,.18)} .dayse-blk-tools button svg{width:16px;height:16px;display:block} .dayse-blk-tools .bt-drag{cursor:grab} .dayse-blk-tools .bt-del:hover{background:var(--magenta-500)} body.dayse-editing .dayse-blk-hot{outline:2px solid var(--petroleo-700) !important;outline-offset:3px} .dayse-dragging{opacity:.45} .dayse-drop-line{position:fixed;z-index:var(--z-edicao-guia);background:var(--ambar-500);border-radius:2px;pointer-events:none;display:none} /* frame de redimensionamento (títulos e textos livres) */ .dayse-rez{position:fixed;z-index:var(--z-edicao-frame);pointer-events:none;display:none} .dayse-rez.on{display:block} .dayse-rez i{position:absolute;pointer-events:auto;background:var(--petroleo-700);opacity:.85} .dayse-rez .rz-l,.dayse-rez .rz-r{top:0;bottom:0;width:6px;cursor:ew-resize;border-radius:4px} .dayse-rez .rz-l{left:-3px} .dayse-rez .rz-r{right:-3px} .dayse-rez .rz-t,.dayse-rez .rz-b{left:0;right:0;height:6px;cursor:ns-resize;border-radius:4px} .dayse-rez .rz-t{top:-3px} .dayse-rez .rz-b{bottom:-3px} /* frame de ESCALA dos PNGs (carimbos + Dayse do CTA): grip proporcional no canto livre */ .dayse-scale{position:fixed;z-index:var(--z-edicao-guia);pointer-events:none;display:none;outline:2px dashed var(--ambar-500)} .dayse-scale.on{display:block} .dayse-scale i{position:absolute;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--ambar-500);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:nwse-resize} .dayse-scale.anchor-tl i{right:-9px;bottom:-9px} .dayse-scale.anchor-br i{left:-9px;top:-9px} /* botões-ícone da barra + painel ocultos/lixeira */ .deb-ico{padding:var(--sp-2)} .deb-ico svg{width:15px;height:15px;display:block} .deb-btn[disabled]{opacity:.4} .deb-count{font-weight:700} .dayse-panel{position:fixed;z-index:var(--z-edicao-alta);top:calc(var(--header-h) + var(--azulejo-h) + 64px);right:14px;width:min(300px,calc(100vw - 28px));max-height:60vh;overflow:auto;background:var(--branco);border-radius:var(--raio-md);box-shadow:var(--sombra-hover);padding:var(--sp-3)} .dayse-panel[hidden]{display:none} .dayse-panel h4{font:700 .78rem/1 var(--font-titulo);text-transform:uppercase;letter-spacing:.05em;color:var(--petroleo-900);margin:var(--sp-2) var(--sp-1) var(--sp-1)} .dp-item{display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;padding:var(--sp-1) var(--sp-2);border-radius:8px;background:var(--papel);margin-bottom:var(--sp-1)} .dp-item span{font-size:.8rem;color:var(--tinta-60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-item button{flex:none;padding:var(--sp-1) var(--sp-3)} .dp-empty{font-size:.8rem;color:var(--tinta-60);padding:var(--sp-1)} /* --- Botão Backup (barra) + painel de checkpoints do site --- */ .deb-backup{display:inline-flex;align-items:center;gap:var(--sp-2)} .deb-backup svg{width:15px;height:15px;display:block} .dayse-bk-panel{width:min(340px,calc(100vw - 28px))} .bk-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)} .bk-head h4{margin:0} .bk-create{flex:none;padding:var(--sp-2) var(--sp-3);font:700 .76rem var(--font-texto)} .bk-create[disabled]{opacity:.6} .bk-hint{font-size:.74rem;line-height:1.35;color:var(--tinta-60);margin:0 var(--sp-1) var(--sp-2)} /* --- MODAL DE CORES (barra de edição) --- Único painel do editor que NÃO é gaveta lateral. Escolher cor é a tarefa em que o site inteiro é a prévia e em que quatro grupos precisam ser comparados lado a lado; numa coluna de 320px o conteúdo passava de 1.400px e obrigava a rolar para comparar duas cores vizinhas. Lixeira, backup e texto continuam gaveta — ali a tarefa é lista, não composição. */ /* O VÉU COMEÇA ONDE O CABEÇALHO ACABA (18/08/2026). A faixa de azulejo é a PRÉVIA deste painel, e ela mora dentro do header sticky: medido em 1440x900, o modal centralizado tapava 33 dos 54px dela e o véu escurecia o resto. O elemento continua cobrindo a tela inteira — é ele que barra o clique no menu durante a edição —, mas o escurecimento vive no ::after, que começa em --cx-topo-livre (a altura do header, medida pelo editor ao abrir). */ .dayse-cx-fundo{position:fixed;inset:0;z-index:calc(var(--z-edicao-alta) - 1);background:none} .dayse-cx-fundo::after{content:"";position:absolute;left:0;right:0;bottom:0; top:var(--cx-topo-livre,0px); background:rgba(var(--petroleo-900-rgb),.55);backdrop-filter:blur(2px)} .dayse-cx-fundo[hidden]{display:none} .dayse-az-panel{ top:calc(var(--cx-topo-livre,0px) + var(--sp-2));left:50%;right:auto;transform:translateX(-50%); width:min(1040px,calc(100vw - 32px)); max-height:calc(100vh - var(--cx-topo-livre,0px) - var(--sp-4) * 2); padding:var(--sp-4) var(--sp-5); /* sombra mais funda que a da gaveta: aqui há um véu atrás, e o cartão precisa descolar dele para não parecer parte do fundo */ box-shadow:0 24px 70px rgba(var(--petroleo-900-rgb),.45)} .cx-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); margin-bottom:var(--sp-1)} .cx-topo h4{margin:0;font-size:1rem} .cx-fechar{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0; border:0;border-radius:50%;background:var(--papel);color:var(--petroleo-800);cursor:pointer} .cx-fechar:hover{background:var(--petroleo-100)} .cx-fechar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;display:block} .cx-lead{margin-bottom:var(--sp-4)} /* MULTI-COLUNA, e não grid: 1 coluna no celular, 2 no notebook, 3 na tela larga, sem um breakpoint sequer. O grid foi tentado primeiro e as linhas ficavam desiguais — "Cores da faixa" é 3x mais alto que os outros e empurrava o último bloco sozinho para uma 2ª linha, com um vão enorme ao lado. A multi-coluna empilha na vertical e equilibra as alturas. */ .cx-grade{columns:3 260px;column-gap:var(--sp-4)} .cx-bloco{break-inside:avoid;min-width:0;background:var(--papel);border-radius:var(--raio-sm); padding:var(--sp-3) var(--sp-3) var(--sp-2);margin-bottom:var(--sp-4)} .cx-bloco .bk-head{margin-bottom:var(--sp-1)} .cx-bloco .az-row:last-child{margin-bottom:var(--sp-2)} /* dentro do bloco os campos ficam sobre o papel: o branco volta a ser contraste */ .cx-bloco .az-row select,.cx-bloco .az-cor input[type=text]{background:var(--branco)} /* prévia do destaque: a moldura do carrossel, a bolinha e o texto claro, sobre o fundo real do site — é ali que a cor vive e é ali que ela some */ .az-prev{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3); border-radius:10px;margin:0 2px var(--sp-1)} .az-prev-btn{flex:none;padding:.32em .9em;border-radius:var(--raio-pill);color:var(--tinta); font:700 .72rem var(--font-titulo);letter-spacing:.05em;text-transform:uppercase} .az-prev-moldura{flex:none;width:38px;height:26px;border-radius:6px;border:3px solid} .az-prev-dot{flex:none;width:22px;height:9px;border-radius:5px;display:block} .az-prev-txt{font:600 .68rem var(--font-titulo);letter-spacing:.14em;text-transform:uppercase} .az-hint{font-size:.74rem;line-height:1.35;color:var(--tinta-60);margin:0 var(--sp-1) var(--sp-3)} .az-row{margin-bottom:var(--sp-3)} .az-row label{display:block;font:600 .74rem var(--font-texto);color:var(--tinta-60);margin:0 var(--sp-1) var(--sp-1)} .az-val{float:right;font:700 .74rem var(--font-texto);color:var(--petroleo-800)} .az-row select{width:100%;padding:var(--sp-2);border-radius:10px;border:1px solid rgba(var(--tinta-rgb),.16); background:var(--branco);font:600 .8rem var(--font-texto);color:var(--petroleo-900);cursor:pointer} .az-row input[type=range]{width:100%;accent-color:var(--petroleo-700);cursor:pointer} .az-reset{flex:none;padding:var(--sp-1) var(--sp-3)} /* cores da faixa: 3 lugares (Principal/Destaque/Vazio) — ver docs/09 */ .az-sep{margin:var(--sp-4) 0 var(--sp-2);padding-top:var(--sp-3);border-top:1px solid rgba(var(--tinta-rgb),.10)} .az-cor{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)} .az-cor > b{flex:1;min-width:0;font:600 .74rem var(--font-texto);color:var(--tinta-60)} .az-cor input[type=color]{flex:none;width:34px;height:26px;padding:0;cursor:pointer; border:1px solid rgba(var(--tinta-rgb),.2);border-radius:7px;background:none} .az-cor input[type=text]{flex:none;width:78px;padding:var(--sp-1) var(--sp-2);border-radius:7px; border:1px solid rgba(var(--tinta-rgb),.16);background:var(--branco); font:600 .72rem ui-monospace,monospace;color:var(--petroleo-900);text-transform:lowercase} .az-cor input[type=text].ruim{border-color:var(--magenta-500);color:var(--magenta-500)} .az-sws{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 var(--sp-3) 2px} .az-sw{width:17px;height:17px;padding:0;border-radius:50%;cursor:pointer; border:1px solid rgba(var(--tinta-rgb),.22);transition:transform .12s} .az-sw:hover,.az-sw:focus-visible{transform:scale(1.25)} /* --- CORES DA FAIXA: o chip é o alvo da edição (docs/09 §14) --- O bloco é LARGO e fica fora da multi-coluna: ele carrega nove chips e uma sanfona que abre dentro da fileira. Espremido em 260px, cada clique num chip mudava a altura e a `columns` redistribuía os outros blocos — o modal inteiro pulava a cada escolha. */ .cx-faixa{width:100%} .az-pals{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-2)} .az-pal{display:flex;align-items:center;gap:5px;padding:var(--sp-1) var(--sp-2);border-radius:var(--raio-pill); border:1.5px solid var(--petroleo-100);background:var(--branco);cursor:pointer; font:600 .7rem var(--font-texto);color:var(--petroleo-800)} .az-pal:hover{border-color:var(--turquesa-400)} .az-pal i{width:11px;height:11px;border-radius:50%;display:block;border:1px solid rgba(var(--tinta-rgb),.18)} /* preset regravado pelo usuário: some quando ele restaura o de fábrica */ .az-pal.mexido{border-color:var(--turquesa-500)} .az-pal.mexido::after{content:"•";color:var(--turquesa-500);font-weight:700;margin-left:1px} /* o eixo ABERTO: é ele que a faixa está mostrando e a página foi buscar */ .az-pal[aria-expanded=true]{background:var(--petroleo-800);border-color:var(--petroleo-800);color:var(--branco)} .az-pal[aria-expanded=true].mexido::after{color:var(--turquesa-400)} /* a sanfona quebra a linha da fileira e abre EMBAIXO do chip clicado */ .az-sanfona{flex-basis:100%;min-width:0;margin:var(--sp-1) 0 var(--sp-2); padding:var(--sp-3) var(--sp-3) var(--sp-2);border-radius:var(--raio-sm); background:var(--branco);border:1.5px solid var(--petroleo-800); animation:az-abre .16s ease} @keyframes az-abre{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.az-sanfona{animation:none}} /* a base fica sempre visível, abaixo da fileira — é a cor de fora dos eixos */ .az-base{margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px dashed rgba(var(--tinta-rgb),.14)} .az-sub{font-size:.74rem} .az-nota{font:400 .72rem var(--font-texto);color:var(--tinta-60); letter-spacing:0;text-transform:none} /* as três cores LADO A LADO: no bloco largo cada coluna passa de 300px, e as 14 amostras da marca cabem numa linha só (medido: 290px) */ .az-tres{display:flex;flex-wrap:wrap;gap:0 var(--sp-4)} .az-um{flex:1 1 250px;min-width:0} .az-um .az-sws{margin-bottom:var(--sp-2)} /* a faixa fica sob um header branco: se as três cores clarearem demais, ela some */ .az-aviso{display:flex;gap:6px;font-size:.72rem;line-height:1.35;color:var(--th-laranja-ink); background:color-mix(in srgb,var(--ambar-500) 14%,#fff); padding:var(--sp-2);border-radius:8px;margin:0 0 var(--sp-2)} /* prévia da rampa do fundo: os três degraus que o CSS deriva da cor escolhida. Existe para a escolha ser feita OLHANDO o degradê inteiro, e não só o topo. */ .az-rampa{display:flex;height:26px;border-radius:8px;overflow:hidden;margin:0 2px var(--sp-1); border:1px solid rgba(var(--tinta-rgb),.18)} .az-rampa i{flex:1} .az-rampa-leg{margin-bottom:var(--sp-2)} .bk-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2);border-radius:8px;background:var(--papel);margin-bottom:var(--sp-1)} .bk-meta{min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)} .bk-meta b{font-size:.8rem;color:var(--petroleo-900)} .bk-tag{font-size:.72rem;color:var(--tinta-60)} .bk-cover{font-size:.68rem;color:var(--tinta-60);opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px} .bk-acts{flex:none;display:flex;align-items:center;gap:var(--sp-1)} .bk-restore{padding:var(--sp-1) var(--sp-3)} .bk-del{background:transparent;color:var(--tinta-60);display:grid;place-items:center;padding:var(--sp-1);border-radius:8px} .bk-del:hover{background:#fff;color:var(--magenta-500)} .bk-del svg{width:15px;height:15px;display:block} /* Snapshot do rascunho: seção do painel de backup. A régua acima separa duas coisas que não se confundem — backup vai ao SERVIDOR e vale para todos; snapshot é um arquivo e não sai deste navegador até alguém mandá-lo. */ .bk-snap{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid rgba(var(--tinta-rgb),.14)} .bk-snap h4{margin:0 0 var(--sp-1)} .bk-snap-acts{display:flex;gap:var(--sp-1);margin:0 var(--sp-1)} .bk-snap-btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center; gap:var(--sp-1);padding:var(--sp-2);text-align:center} .bk-snap-btn svg{width:15px;height:15px;display:block;flex:none} /* ============================================================ PÁGINA APOIADORES (apoiar.html) — form, FAQ, manual "Como apoiar?" Tudo sobre os tokens já existentes. ============================================================ */ .apoio-sec{padding:clamp(40px,7vw,68px) 0} .apoio-sec.alt{background:var(--branco)} /* --- Manual "Como apoiar?" (estilo institucional/Portal: painel, número, ícone de traço) --- */ .manual{display:grid;gap:var(--sp-4);grid-template-columns:1fr} @media(min-width:760px){.manual{grid-template-columns:repeat(2,1fr)}} .step{position:relative;display:flex;gap:var(--sp-4);align-items:flex-start; border:1.5px solid color-mix(in srgb,var(--e,var(--petroleo-700)) 24%,var(--papel)); padding:var(--sp-5)} /* A FAIXA DO CORAÇÃO. Com o botão em posição absoluta no canto de baixo à direita (docs/40), o texto do chip mais alto da fileira chega até lá: medido, o "Defenda o Guará" tinha o rótulo coberto em repouso, e só ele entre os cinco. Reservar a faixa custa altura e resolve para qualquer texto futuro — cobrir conteúdo para comemorar um clique é trocar o assunto por confete. 38px = os 34 do círculo + 4 de respiro. */ .step[data-curtir]{padding-bottom:calc(var(--sp-5) + 38px)} .step-badge{position:relative;flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center; --ic-recorte:color-mix(in srgb,var(--e,var(--petroleo-700)) 14%,#fff);background:var(--ic-recorte);color:var(--e-ink,var(--petroleo-800))} .step-badge svg{width:28px;height:28px} .step-n{position:absolute;top:-10px;left:-10px;width:26px;height:26px;--ic-recorte:var(--e-ink,var(--petroleo-800));background:var(--ic-recorte);color:#fff;font-family:var(--font-titulo);font-weight:700;font-size:.9rem; box-shadow:var(--sombra-card)} .step-body{min-width:0} .step-title{font-weight:700;font-size:1.16rem;color:var(--petroleo-900);line-height:1.05} .step-desc{margin-top:var(--sp-1);color:var(--tinta-60);font-size:.98rem;line-height:1.45} .step-extra{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2)} .step .social{margin-top:var(--sp-3);justify-content:flex-start;gap:var(--sp-2)} .step .social a{width:40px;height:40px;background:color-mix(in srgb,var(--e) 14%,#fff);color:var(--e-ink)} .step .social a:hover{background:var(--e-ink);color:#fff;transform:translateY(-3px)} /* convite ao material interno: mesmo card, faixa inteira e fundo tingido — lê-se como "mais um degrau", não como o 5º gesto de apoio. (.step--largo mora na seção do Guia do Mobilizador: é a mesma regra de "ocupa a linha toda".) */ .step--convite{--ic-recorte:color-mix(in srgb,var(--e) 8%,var(--branco));background:var(--ic-recorte); border-color:color-mix(in srgb,var(--e) 38%,var(--papel))} .step--convite .step-title{color:var(--e-ink)} /* Os dois manuais ficam centrados na faixa — são um PAR de portas, não uma ação seguida de outra. Centrado só aqui: o `.step-extra` do passo "Gere ideias" tem um botão só, e centrá-lo o desalinharia do texto dele. O badge vai para CIMA, e isso não é gosto: `.step` é flex com o badge ao lado, então o `.step-extra` centraliza dentro da COLUNA DE TEXTO, não do cartão — medido, os botões saíam 37px à direita do centro no desktop e visivelmente fora dele no celular, onde o badge come 84px de uma coluna de 230. Compensar com margem negativa exigiria saber a largura do badge (58px, escrita noutro lugar) e ainda estouraria o cartão no celular. Empilhando, o corpo ocupa a faixa inteira e o centro do texto passa a ser o centro do cartão. */ .step--convite{flex-direction:column;align-items:flex-start} .step--convite .step-body{width:100%} .step--convite .step-extra{justify-content:center;margin-top:var(--sp-4)} /* No celular as 5 redes do passo 2 não cabem: o .step-body tem 226px (o badge de 58px + gap ficam ao lado), e 5x40 + 4x8 pede 232 — quebrava 4+1. Fechando o gap para --sp-1: 5x40 + 4x4 = 216, cabe numa linha. Aumentar o ícone para 44 seria o contrário do que resolve (pediria 252). Medido a 390px. */ @media(max-width:640px){.step .social{gap:var(--sp-1)}} /* --- Formulário de apoiador --- */ .form-wrap{max-width:720px;margin-inline:auto} .form,.guia-ficha{--ic-recorte:var(--branco);background:var(--ic-recorte);border-radius:var(--raio-lg); box-shadow:var(--sombra-card);padding:clamp(20px,4vw,30px)} .form{display:grid;gap:var(--sp-4)} .form-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr} @media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}} .field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0} .field.full{grid-column:1/-1} /* `>` e não descendente: o .check TAMBÉM é um