/* ============================================================ 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; /* O VERDE DAS AÇÕES não é o `--c-whatsapp` puro: aquele é claro demais para ícone branco em cima (medido no Chrome — ver docs/54 §7.16). Escurecido com o petróleo da casa, ele passa a régua e continua sendo verde de verdade. Nome honesto: é o verde DE AÇÃO, não "o verde do zap" (CLAUDE.md §3). */ --verde-acao:color-mix(in srgb,var(--c-whatsapp) 62%,var(--petroleo-900)); --c-facebook:#1877F2; --c-x:#111; /* A URNA ELETRÔNICA do simulador da /colinha (docs/98). Também não é paleta nossa: é a cor do objeto que o simulador imita, e quem treinou nele tem de reconhecer as teclas na cabine. Hex de propósito: o canvas da arte lê `--urna-branco*` e `--urna-tinta`, e o canvas não entende color-mix(). */ --urna-corpo:#2A2A28; --urna-teclado:#1B1B1A; --urna-tecla:#0E0E0E; --urna-tecla-tx:#F5F5F5; --urna-visor:#EFEFEA; --urna-tinta:#111111; --urna-foto:#D9D9D3; --urna-selo:#8F8F8A; --urna-branco:#F7F7F2; --urna-branco-borda:#C9C9C3; --urna-corrige:#E8712A; --urna-confirma:#23A04E; /* ============ 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,.lk-wrap::before,.faixa-par--escura::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)} /* a faixa partida escura da /legado segue o CTA, e não os divisores: ela é um bloco de fecho de assunto, com o mesmo degradê radial do `.cta` por fundo. */ .faixa-par--escura{--az-img:var(--az-src-bg);--az-blend:var(--az-cta-blend);--az-op:var(--az-cta-op);--az-rows:var(--az-cta-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,.nav-drop,.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-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,.nav-drop{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)} /* O GATILHO GENÉRICO da barra do post (11/09/2026) — um degrau mais escuro que o "copiar", que é o vizinho mais parecido: os outros três vestem a cor da rede de destino, e este não tem destino, tem MENU. O petróleo-800 dá 10,48:1 com o branco do texto. */ .post-share-bar .psb-share{background:var(--petroleo-800)} .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{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, .dayse-mview-btn,.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. PROPOSTAS, 28/09/2026 (docs/96): o sétimo item do primeiro nível. Medido pela borda direita do último item contra a borda do nav (o `scrollWidth` aqui MENTE: o submenu escondido de Mídias entra na conta e dá ~116px de transbordo em qualquer gap). Transbordo com o item novo, sem → com: gap 12/10 (o de antes) → 1440:22 1366:22 1180:13 1100:41 gap 8/10 → 1440: 8 1366: 8 1180: 0 1100:33 gap 4/2 + .86rem<1180 → zero nas seis larguras (1920 → 1100) O gap parece pouco, mas o espaço VISÍVEL entre os itens é ele MAIS os 24px do ladrilho, que ficam reservados mesmo invisíveis (ver .nav-ico). */ .nav-desktop{display:none;margin-left:auto;gap:var(--sp-1)} /* `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,.nav-drop{font-weight:500;letter-spacing:.04em;font-size:.98rem;color:var(--tinta);padding:var(--sp-1);position:relative;white-space:nowrap; /* inline-flex desde 04/09/2026: o item passou a ter DUAS coisas dentro, o ladrilho do tema e o rótulo. Sem isto o vira caixa em linha e senta na linha de base do texto, ~3px abaixo do centro óptico. */ display:inline-flex;align-items:center;gap:6px} /* EDITORIAL — o parente do submenu. É ): é 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)); /* flex desde 11/09/2026: o item passou a ter duas coisas dentro, o ícone e o rótulo. Sem isto o vira caixa em linha e senta na linha de base do texto, alguns pixels abaixo do centro óptico. */ display:flex;align-items:center;gap:8px; } .subnav a::after{display:none} .subnav a:hover{background:var(--petroleo-100)} /* O ÍCONE DO ITEM DO SUBMENU (11/09/2026) ----------------------------------- ELE FICA VISÍVEL SEMPRE, e o que o hover muda é o TAMANHO. Nasceu ao contrário — invisível, acendendo no hover — e o dono reprovou no mesmo dia: com a lista já aberta, o item que não estava sob o cursor não mostrava nada, e um vão de 41px antes do rótulo não é um ícone, é um buraco. O desenho passa a ser parte do item; o hover passa a ser ênfase, não revelação. E CRESCE POR `transform`, NUNCA por `width`. A caixa mede 20px em todos os estados e o desenho ocupa 80% dela em repouso — `scale` é pintura, não layout, então o rótulo não anda um pixel quando o ícone engorda. Trocar o `width` faria as quatro linhas dançarem sob o cursor a cada movimento, que é a mesma razão medida do `.nav-ico` um andar acima. A TINTA É O `--e-ink`, e não o `--e` da barrinha: a barra é área chapada de 5px, o ícone é traço de 2px sobre branco, e nessa espessura o tom cheio some. Medido contra o branco do submenu, em 11/09/2026: lavanda do Melhor Idade 4,44:1 contra 7,67:1 do -ink; magenta do Mulheres 4,38:1 contra 6,80:1; violeta do Esporte 5,50:1 contra 8,36:1. O índigo do Educação já nasce escuro (9,92:1) e o -ink dele é o próprio valor — a linha existe para que ele não seja a exceção que alguém precisa lembrar. Mesma família da barra, legível no fino. O ESTADO ATIVO SAI DO `aria-current`, não de `.active`: são a mesma verdade e o atributo é o que sobrevive: até hoje os quatro filhos do Mídias nasciam com DOIS atributos `class` e o parser descartava o segundo (ver o comentário do `atv` no _middleware.js). Amarrar o ícone ao atributo tira a chance de o defeito voltar pela mesma porta. */ .sn-ico{flex:none;width:20px;height:20px;color:var(--e-ink,var(--petroleo-800)); transform:scale(.8);transition:transform .16s ease} .subnav a:hover .sn-ico,.subnav a:focus-visible .sn-ico, .subnav a[aria-current] .sn-ico{transform:scale(1)} @media (prefers-reduced-motion:reduce){ .sn-ico{transition:none} } .sn-idade{--e:var(--th-idade);--e-ink:var(--th-idade-ink)} .sn-esporte{--e:var(--th-esporte);--e-ink:var(--th-esporte-ink)} .sn-mulheres{--e:var(--th-mulheres);--e-ink:var(--th-mulheres-ink)} .sn-educacao{--e:var(--th-educacao);--e-ink:var(--th-educacao-ink)} /* Os filhos do Mídias NÃO ganham cor de eixo, de propósito: Blog, Projetos, Revistas e Fotos não são frentes de atuação, e pintá-los com a cor de uma diria algo que não é verdade. Ficam no traço neutro. (Chamava-se `.sn-editorial` até 04/09/2026, quando o rótulo virou "Mídias". Classe que não acompanha o rótulo é a próxima pessoa procurando e não achando.) */ .sn-midias{--e:var(--petroleo-700);--e-ink:var(--petroleo-800)} /* 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); /* flex AQUI, e não só na régua de 44px lá embaixo (11/09/2026): aquela regra mora num `@media(max-width:640px)`, e o menu do celular vive até 1023px. Entre 640 e 1024 o não era flex, e o ícone sentava na linha de base do texto — a faixa do tablet é justamente onde ninguém olha. */ display:flex;align-items:center;gap:10px} /* O ÍCONE DO SUBMENU NO CELULAR APARECE SEMPRE (11/09/2026) — é a mesma razão do ladrilho do `.mm-link` logo acima: em tela de toque não existe hover, e pendurar o desenho nele seria escondê-lo para sempre de quem entra pelo telefone, que aqui é a maioria. Por isso nada de `opacity:0` neste lado. 18px, e o número sai de proporção, não de gosto: o primeiro nível é rótulo de 1,25rem com ladrilho de 22px, e aqui o rótulo é 1rem — 16/20 × 22 = 17,6. */ .mm-sub .sn-ico{width:18px;height:18px;transform:none} /* ============================================================ 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: classe .has-foto no .divisor e um dentro do .divisor-media — ver o passo-a-passo no comentário do index.html. */ .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)} /* A FOTO DO DIVISOR É UM , e não `background-image` (docs/57, Achado 1). Medido em 26/08/2026: como background, os cinco divisores da home pesavam ~876 KB e chegavam SEMPRE — `loading=lazy` não alcança background-image —, e sem `srcset` o celular recebia o arquivo pensado para desktop (até 4,9x maior que o exibido). Com ``: 209 KB no celular, e a maioria nem chega antes de a seção ser rolada. O `object-position:center top` reproduz o `center top` que o background usava: as fotos têm gente na parte de cima, e cortar por baixo é o corte certo. */ .divisor.has-foto .divisor-img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center top;display:block} /* 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") */ /* O legislativo tem enquadramento proprio: a foto e alta e o assunto esta a 22% da altura. Era `background-position`, e virou `object-position` pela mesma razao do bloco do desktop (docs/57). O `!important` NAO E PREGUICA: a regra do desktop (`.divisor.has-foto .divisor-img`) tem especificidade maior que esta, e sem ele o enquadramento volta ao centro a partir de 768px. O original ja tinha `!important` pelo mesmo motivo -- eu o tirei na conversao e a medicao pegou. */ .dv-legislativo .divisor-img{object-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)} /* O `--e-ink` acompanha o `--e` desde 11/09/2026, por causa do ícone do submenu do celular, que é traço fino sobre branco e some no tom cheio. Não muda nada na home: os quatro elementos que usam estas classes são os mesmos que já recebem o -ink pelo #id, com valor idêntico e especificidade maior. */ .se-idade{--e:var(--th-idade);--e-ink:var(--th-idade-ink)} .se-esporte{--e:var(--th-esporte);--e-ink:var(--th-esporte-ink)} .se-mulheres{--e:var(--th-mulheres);--e-ink:var(--th-mulheres-ink)} .se-educacao{--e:var(--th-educacao);--e-ink:var(--th-educacao-ink)} /* ============================================================ 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, E A JANELA GENÉRICA QUE SAIU DELE ---------------------- ERA SÓ DO KPI ATÉ 23/09/2026, e o comentário abaixo dizia isso com todas as letras. A busca por rosto precisou de uma janela (o consentimento e a escolha de rosto, docs/87), e havia três saídas: duplicar estas regras com outro nome, usar as classes `kpi-*` para uma coisa que não é KPI, ou generalizar. GENERALIZAR FOI O CAMINHO, e custou oito seletores ganharem um irmão `.janela*` — ZERO declaração nova. Usar `.kpi-caixa` num consentimento faria o nome mentir, que é a regra 3 do CLAUDE.md aplicada a classe em vez de cor; duplicar criaria dois modais que divergem no primeiro conserto. O QUE CONTINUA SÓ DO KPI: o `.por-hover` (janela que abre sem clique) e o `.kpi-num` (o número grande na cor do eixo). Esses são daquele cartão mesmo. ------------------------------------------------------------------------- */ 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],.janela[hidden]{display:none} .kpi-modal,.janela{position:fixed;inset:0;z-index:var(--z-toast);display:grid;place-items:center;padding:var(--sp-4)} .kpi-veu,.janela-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,.janela-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,.janela-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,.janela-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,.janela-x:hover,.janela-x:focus-visible{background:rgba(var(--petroleo-700-rgb),.18)} .kpi-x svg,.janela-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)} /* ---- AVISO DE COTA (15/09/2026, docs/78 §14) ------------------------------- No ALTO À ESQUERDA, abaixo do cabeçalho: embaixo mora o aviso de rascunho, no canto de baixo o WhatsApp, e no alto à direita o dock da engrenagem. Cartão, e não faixa: ele lista as cotas que passaram do degrau, e uma faixa esconderia o topo da página que se está editando. A COR É DO DEGRAU (50% atenção, 70% alta, 90% quase no fim) e vai na borda, no selo da porcentagem e na barra; o texto fica sempre em tinta de texto. */ .dayse-cota{ position:fixed;z-index:var(--z-edicao); top:calc(var(--header-h) + var(--azulejo-h) + 12px);left:14px; width:min(360px,calc(100vw - 28px - 58px)); display:flex;flex-direction:column;gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);border-radius:var(--raio-sm); background:var(--branco);color:var(--tinta);box-shadow:var(--sombra-pop); border-left:5px solid var(--ambar-500);font-size:.85rem;line-height:1.35} .dayse-cota.is-alto{border-left-color:var(--ambar-600)} .dayse-cota.is-critico{border-left-color:var(--th-mulher-ink)} .dayse-cota-cab{display:flex;align-items:center;gap:var(--sp-2)} .dayse-cota-cab svg{flex:none} .dayse-cota-titulo{font-weight:700;font-size:.95rem} .dayse-cota-linha{display:flex;flex-direction:column;gap:4px} .dayse-cota-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)} .dayse-cota-nome{font-weight:600} .dayse-cota-pct{flex:none;padding:2px 8px;border-radius:var(--raio-pill);font-size:.78rem;background:var(--ambar-500);color:var(--tinta)} .dayse-cota-linha.is-alto .dayse-cota-pct{background:var(--ambar-600)} .dayse-cota-linha.is-critico .dayse-cota-pct{background:var(--th-mulher-ink);color:var(--branco)} .dayse-cota-trilho{display:block;height:8px;border-radius:var(--raio-pill);background:var(--petroleo-100);overflow:hidden} .dayse-cota-cheio{display:block;height:100%;border-radius:var(--raio-pill);background:var(--ambar-500)} .dayse-cota-linha.is-alto .dayse-cota-cheio{background:var(--ambar-600)} .dayse-cota-linha.is-critico .dayse-cota-cheio{background:var(--th-mulher-ink)} .dayse-cota-texto,.dayse-cota-reinicio{color:var(--tinta-60);font-size:.78rem} .dayse-cota-acoes{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3)} .dayse-cota-painel{color:var(--petroleo-700);font-weight:600;font-size:.82rem} .dayse-cota-ok{min-height:36px;padding:0 var(--sp-4);border-radius:var(--raio-pill);border:1px solid var(--petroleo-700); background:var(--petroleo-700);color:var(--branco);font:inherit;font-weight:600;cursor:pointer} .dayse-cota-ok:hover{background:var(--petroleo-800)} .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)} /* DUAS CHAMADAS NA MESMA COLUNA: a moldura e a colinha (01/10/2026, docs/98). Lado a lado, as duas quadradas, para os botões que cavalgam a borda de baixo ficarem na mesma linha. */ .chamadas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7) var(--sp-6);align-items:start} .chamadas .mold-chamada{width:100%} /* No celular cada cartão tem ~150px, e o "Montar minha colinha" numa linha só media 216px: a 390px ele invadia o botão da moldura e passava da tela (medido, 179 a 394). Aqui o botão é preso à largura do cartão e QUEBRA. */ @media(max-width:820px){ .chamadas{gap:var(--sp-6) var(--sp-4)} .chamadas .mold-chamada-btn{white-space:normal;width:94%;text-align:center;line-height:1.15; font-size:.8rem;padding:.6em .5em} .chamadas .mold-chamada-btn svg{width:16px;height:16px} .chamadas .mold-chamada-selo{width:44px;height:44px} .chamadas .mold-chamada-selo svg{width:22px;height:22px} } @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)} /* A LINHA LEGAL da propaganda eleitoral (23/08/2026, ver o FOOTER no _middleware.js). Letra miúda, mas NÃO apagada: é identificação obrigatória, e texto legal que ninguém consegue ler é o mesmo que texto ausente. Por isso ela fica bem acima dos links de painel (.34) e no mesmo patamar do resto do rodapé — o contraste foi medido no elemento, com as fontes carregadas. `max-width` em ch para a linha quebrar em duas no celular em vez de virar uma tira de 90 caracteres. */ .footer-legal{color:rgba(255,255,255,.72);font-size:.7rem;line-height:1.55; letter-spacing:.02em;max-width:60ch;text-wrap:balance} /* O link da privacidade mora numa `.footer-legal` e o fundo ali é ESCURO — a cor de link em prosa (petroleo-700) sumiria. Herda o branco de 72% da própria linha e só ganha o sublinhado, que é o que o faz parecer clicável. */ .footer-legal a{text-decoration:underline;text-underline-offset:3px} .footer-legal a:hover{color:#fff} /* A LINHA LEGAL, MIÚDA (04/09/2026). O pedido era limpar o rodapé, e ela é o que mais pesa ali: caixa alta, larga, e logo abaixo do nome. Não pode SAIR (é a identificação obrigatória de propaganda eleitoral — Lei 9.504/97 art. 57-B, docs/51), então saiu do caminho do olho: foi para depois do link de privacidade, encolheu e apagou. O QUE NÃO SE FAZ AQUI é baixar mais a opacidade "só um pouquinho". Medido contra o `--tinta-fundo` do rodapé: a 0,52 ela dá 4,65:1 (medido a 9,92px), acima do mínimo de 4,5:1 para texto pequeno. Abaixo disso vira letra que a lei manda existir e ninguém consegue ler — que é o mesmo que não existir, com o trabalho de fingir que existe. */ .footer-legal--miuda{font-size:.62rem;color:rgba(255,255,255,.52);letter-spacing:.04em; max-width:64ch;line-height:1.5} /* 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ê */ /* No desktop a foto ocupa os 60% da direita e o texto fica na esquerda. O `object-position` SUBSTITUI o `background-position:center` que estava aqui: a foto virou em 26/08/2026 (docs/57), e regra de background numa caixa sem background nao faz nada -- some calada, levando junto o enquadramento. */ .divisor.has-foto .divisor-media{left:40%} .divisor.has-foto .divisor-img{object-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 da CTA ("Fale com o mandato"), sem faixa branca. Desde 24/08/2026 são DUAS recortadas em looping (a tabela `BONECAS` e o `buildBonecas()` do _middleware.js). A classe `.cta-dayse` migrou da para o CONTÊINER — é ela que o modo edição arrasta e escala, e no contêiner o arrasto move as duas de uma vez. O CONTÊINER É O SLOT, e o slot é o da PRIMEIRA recortada (daí o `aspect-ratio` chumbado): é dele que o editor tira a caixa para o arrasto e para o quadro de escala. Por isso o carrossel PARA na primeira enquanto o modo edição está ligado (main.js) — com a segunda à mostra o editor daria uma caixa de 296px para uma imagem de 373px, e o arrasto pularia 77px na mão de quem estivesse posicionando. */ .cta-dayse{position:absolute;right:var(--dayse-x,0px);bottom:0;z-index:1; height:min(90%,450px);aspect-ratio:724/1100;pointer-events:none} /* Cada recortada ocupa o mesmo canto inferior direito; quem troca é a opacidade. `--boneca-k` iguala o TAMANHO DA CABEÇA das duas e `--boneca-dx` a POSIÇÃO dela (as duas medições estão na tabela BONECAS do _middleware.js) — sem eles a Dayse mudaria de tamanho e de lugar a cada volta. O 100% é a ALTURA do slot, que é definida. A LARGURA VEM DE `aspect-ratio`, E NÃO DE `width:auto`, e isso custou uma medição: num elemento POSICIONADO, `width:auto` é *shrink-to-fit* — `min(max-content, espaço disponível)`. O espaço disponível é a largura do SLOT (266px a 1440), então toda recortada mais larga que ele saía esmagada nele: a 2, que mede 373px, renderizava 266. Altura definida + `aspect-ratio` dá largura definida, sem consultar o contêiner. */ .cta-boneca{position:absolute;bottom:0;right:calc(100% * var(--boneca-dx,0)); height:calc(100% * var(--boneca-k,1));aspect-ratio:var(--boneca-ar,724/1100); opacity:0;transition:opacity .9s ease} .cta-boneca.is-ativa{opacity:1} .cta-boneca img{display:block;width:100%;height:100%;filter:drop-shadow(0 12px 30px rgba(0,0,0,.32))} /* o coração é a única coisa clicável dentro do recorte (o resto é `none` para não roubar o clique dos botões do CTA, que ficam por baixo) */ .cta-bonecas .curtir{pointer-events:auto} @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)} /* A COLUNA DA DIREITA (04/09/2026): engrenagem em cima, visor de celular embaixo. O dock é `row-reverse` (a barra à esquerda, o canto à direita), então empilhar os dois botões pede uma coluna própria — e `align-items:flex-end` para o visor ficar alinhado à direita quando o dock vira coluna a 560px. */ .dayse-gear-col{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2)} /* mesmo corpo da engrenagem, sem o giro: aqui o hover que rodava seria ruído */ .dayse-mview-btn{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:background .2s,color .2s} .dayse-mview-btn:hover{background:var(--petroleo-700);color:#fff} .dayse-mview-btn[aria-expanded="true"]{background:var(--petroleo-800);color:#fff} .dayse-mview-btn svg{display:block} /* ---- OS NÚMEROS EM CIMA DO SITE (01/10/2026, docs/98 §12) ----------------- O botão de barras é o corpo do botão do visor (mesma coluna, mesmo desenho); ligado, fica petróleo como ele. Ao contrário do visor, ele vale também no celular: o número de um botão é tão útil no telefone quanto no computador. */ .dayse-num-btn[aria-pressed="true"]{background:var(--petroleo-800);color:var(--branco)} /* A camada não recebe toque: a bolinha não pode tapar o botão que ela conta. Fica abaixo da interface do editor e acima de todo o site (o cabeçalho grudado e o WhatsApp flutuante incluídos). */ .dayse-num-camada{position:fixed;inset:0;pointer-events:none;z-index:calc(var(--z-edicao) - 1);overflow:hidden} .dayse-num{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:4px;min-width:26px;height:26px;padding:0 8px; border-radius:var(--raio-pill);background:var(--petroleo-800);color:var(--branco);border:2px solid var(--branco); font:700 .78rem/1 var(--font-titulo);letter-spacing:.02em;box-shadow:0 4px 12px rgba(var(--tinta-rgb),.35);white-space:nowrap} /* os mais tocados (metade do maior para cima) no âmbar: o olho acha primeiro */ .dayse-num.is-quente{background:var(--realce);color:var(--tinta)} /* taxa com base pequena (menos de 20 visitas viram a seção): o número existe, mas não serve para comparar, e a bolinha diz isso pela forma */ .dayse-num.is-pouco{background:var(--branco);color:var(--petroleo-800);border-style:dashed;border-color:var(--petroleo-700)} /* a bolinha recebe o mouse (a camada não): é por ela que vem a explicação */ .dayse-num{pointer-events:auto;cursor:help} .dayse-num-dica{position:absolute;left:0;top:0;display:grid;gap:4px;width:max-content;max-width:min(280px,calc(100vw - 16px)); padding:10px 12px;border-radius:var(--raio-sm);background:var(--petroleo-900);color:var(--branco); font:400 .82rem/1.4 var(--font-texto);box-shadow:var(--sombra-pop);pointer-events:none} .dayse-num-dica b{font:600 .9rem/1.2 var(--font-titulo);text-transform:uppercase;letter-spacing:.02em;color:var(--turquesa-300)} .dayse-num-dica .is-miudo{font-size:.74rem;color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.18);padding-top:4px;margin-top:2px} .dayse-num i{font-style:normal;font-weight:600;padding-left:6px;margin-left:2px;border-left:1px solid currentColor} .dayse-num-painel{position:fixed;left:16px;bottom:16px;z-index:var(--z-edicao);width:min(340px,calc(100vw - 32px)); background:var(--branco);color:var(--tinta);border-radius:var(--raio-md);box-shadow:var(--sombra-pop);padding:var(--sp-3) var(--sp-4); display:grid;gap:var(--sp-2);font:400 .85rem/1.4 var(--font-texto)} .dnp-topo{display:flex;align-items:center;gap:var(--sp-2)} .dnp-topo b{flex:1} .dnp-recolher svg{transition:transform var(--t-media)} .dayse-num-painel.is-recolhido .dnp-recolher svg{transform:rotate(180deg)} .dayse-num-painel.is-recolhido > :not(.dnp-topo){display:none} .dnp-topo b{font:600 .95rem var(--font-titulo);text-transform:uppercase;color:var(--petroleo-800)} .dnp-x{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--petroleo-100);color:var(--petroleo-800);cursor:pointer} .dnp-periodos{display:flex;gap:4px;flex-wrap:wrap} .dnp-periodos button{flex:1 1 auto;min-height:36px;padding:0 8px;border:1px solid var(--petroleo-200);border-radius:var(--raio-pill); background:var(--branco);color:var(--petroleo-800);font:600 .8rem var(--font-texto);cursor:pointer} .dnp-periodos button.is-active{background:var(--petroleo-700);border-color:var(--petroleo-700);color:var(--branco)} .dnp-resumo{color:var(--tinta-60)} .dnp-modos button{flex:1 1 140px} /* ---- O VISOR DE CELULAR (mview) ------------------------------------------- A página de verdade, num