/* ══════════════════════════════════════════════════════════════════
   MARCOS NOBRE 2755 — LANDING PAGE DE CAMPANHA
   ONHUB · agent `designer`
   v1.0  24/08/2026 — estrutura + modo tipográfico
   v1.1  25/08/2026 — produtização `web-designer` (fontes, a11y, safe-area)
   v1.2  25/08/2026 — DIREÇÃO DE ARTE NOVA (`designer`):
                      · fotografia real de estúdio, fundo removido (3 peças)
                      · paleta e geometria alinhadas às artes de feed aprovadas
                        (azul-marinho dominante + cunhas diagonais + grão)
                      · seção "bairro a bairro" removida por decisão do gestor
                      · escala tipográfica refeita (ver bloco TIPOGRAFIA)
   v1.4  03/09/2026 — EDIÇÃO DE CONTEÚDO (`web-designer`), a pedido do gestor.
                      Só saiu coisa; nenhuma regra nova de arte entrou.
                      · .acoes3 REMOVIDO (bloco de 3 passos do grupo de
                        WhatsApp). Único CSS deletado — era exclusivo dele.
                      · .hero__provas: régua de 3 datas → 2 projetos, com o
                        par <b>/<span> empilhado em toda largura
                      · .cards: 3 colunas → 2 no desktop (2 projetos)
                      · .ficha: checklist de pendência → bloco editorial
                        (.ficha__lista saiu, .ficha__corpo entrou)
                      · .retrato/.hero__foto: regraduação e halo reposicionado
                        depois do conserto da máscara alpha das fotos
                      MANTIDOS de propósito, mesmo sem uso na página:
                      .sec--amarelo · .h2--grande · .sublinha ·
                      .destaque--grafite · .corpo--escuro — são utilitários
                      do sistema, órfãos da S06 removida, e voltam a valer
                      se qualquer seção amarela retornar. Não quebram nada.
   Mobile-first · CSS puro · sem framework · sem dependência externa
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   FONTES SELF-HOSTED — produtização `web-designer` 25/08/2026
   Saíram do CDN do Google Fonts e passaram a ser servidas do mesmo
   domínio da página. Três motivos, nesta ordem:
     1. Performance: elimina 2 handshakes DNS+TLS (fonts.googleapis.com
        e fonts.gstatic.com) no caminho crítico. Em 4G da Zona Oeste
        isso é o que separa um LCP de 1,2s de um de 2,5s.
     2. Zero terceiro: a página não faz nenhuma requisição externa.
        Relevante numa peça eleitoral que ainda vai passar por análise
        jurídica de hospedagem/soberania de dados.
     3. Portabilidade: se a hospedagem migrar pra provedor no Brasil,
        a pasta inteira vai junto e nada quebra.
   Subset: latin (U+0000–00FF) — cobre todo o português. 6 arquivos,
   ~127 KB somados, ~63 KB no caminho crítico (os 3 com preload).
   Licenças: Anton, Archivo Black, Barlow e Barlow Condensed são todas
   SIL Open Font License 1.1 — self-host é uso permitido.
   A stack de fallback do :root abaixo segura o layout se algum falhar.
   ══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/archivoblack-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/barlowcondensed-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/barlowcondensed-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════
   PALETA — v1.2, alinhada às 3 artes de feed aprovadas pelo gestor
   O que mudou em relação à v1.1: o AZUL-MARINHO passou a ser a cor de
   FUNDO dominante e o violeta #382A85 desceu para o papel de CUNHA
   GEOMÉTRICA (os blocos diagonais das artes). Antes era o contrário —
   e por isso a página parecia "roxa", não "azul de campanha".
   Amarelo e verde seguem idênticos ao coração bicolor do logo/favicon.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --azul:        #16104A;  /* FUNDO dominante das seções escuras       */
  --azul-fundo:  #0E0A33;  /* derivada: seção método / base            */
  --azul-rodape: #0B0827;  /* derivada: rodapé                         */
  --roxo:        #382A85;  /* CUNHA diagonal + ponta do coração        */
  --roxo-esc:    #241A5C;  /* derivada: sombras deslocadas             */
  --roxo-noite:  #16104A;  /* alias legado de --azul (não remover)     */
  --roxo-claro:  #5A48C0;  /* derivada: filetes, halo, retícula        */
  --amarelo:     #FFC81E;  /* bloco "MARCOS NOBRE" + cor de ação       */
  --amarelo-esc: #E5A800;  /* derivada: hover/pressionado              */
  --verde:       #1B9E3F;  /* topo do coração — acento + selo/CTA topo */
  --grafite:     #14121C;  /* texto sobre claro                        */
  --branco:      #FFFFFF;
  --osso:        #F4F2F8;  /* fundo de leitura                         */

  --max: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  /* altura medida do header sticky (67px em ≥360, 79px em 320 quando a marca
     quebra) — usada pelo scroll-margin das âncoras. Fica com folga. */
  --topo-h: 74px;

  /* ── ESCALA DE ESPAÇO (v1.2) ──────────────────────────────────────
     O gestor apontou tipografia "embolada". A causa não era só tamanho:
     era a falta de uma escala de respiro. Todo espaçamento vertical de
     bloco passa a sair destes 4 degraus — nada mais é digitado solto. */
  --sp-1: clamp(10px, 1.6vw, 14px);   /* dentro de um bloco            */
  --sp-2: clamp(16px, 2.6vw, 22px);   /* entre olho e título           */
  --sp-3: clamp(24px, 4.2vw, 38px);   /* entre título e corpo          */
  --sp-4: clamp(36px, 6.4vw, 64px);   /* entre blocos de uma seção     */

  /* duas famílias + display de número, conforme diretriz de identidade */
  --display: 'Anton', 'Archivo Black', Impact, 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --numero:  'Archivo Black', 'Anton', Impact, sans-serif;
  --texto:   'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cond:    'Barlow Condensed', 'Barlow', 'Arial Narrow', sans-serif;

  /* grão de impressão — mesmo tratamento das artes de feed.
     SVG em data-URI: nenhuma requisição externa, funciona offline. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ─────────── reset ─────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--texto);
  font-size:17px;
  line-height:1.62;
  color:var(--grafite);
  background:var(--branco);
  overflow-x:hidden;
  /* faixa de marca de 6px no topo — regra de identidade */
  border-top:6px solid var(--verde);
}
/* overflow-x:hidden no <body> cria um contexto de recorte que pode quebrar
   o position:sticky do header. overflow-x:clip corta igual e NÃO cria
   contexto de rolagem — mesmo efeito visual, sticky intacto. O hidden
   acima fica como fallback pra navegador antigo. */
@supports (overflow:clip){ body{overflow-x:clip} }

/* âncoras: sem isso o header sticky come o topo de cada seção no clique do menu */
[id]{scroll-margin-top:calc(var(--topo-h) + 14px)}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit}
em{font-style:normal}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--amarelo);color:var(--grafite);padding:12px 18px;font-weight:700
}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
/* contorno amarelo some sobre fundo amarelo — inverte pro roxo nessas seções */
.sec--amarelo :focus-visible,.destaque--amarelo :focus-visible{outline-color:var(--roxo)}

/* ─────────── layout base ─────────── */
/* padding lateral respeita o notch em paisagem (viewport-fit=cover no <meta>) */
.wrap{
  width:100%;max-width:var(--max);margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}
.wrap--estreito{max-width:840px}
.centro{text-align:center}
.sec{padding:clamp(68px,11vw,124px) 0;position:relative}
.sec--branco{background:var(--branco)}
.sec--osso{background:var(--osso)}
.sec--amarelo{background:var(--amarelo)}

/* ══════════════════════════════════════════════════════════════════
   GEOMETRIA DIAGONAL — a assinatura visual das artes de feed
   Duas cunhas em violeta sobre o azul-marinho, feitas com hard-stop
   em linear-gradient: zero elemento extra no DOM, zero peso, zero JS.
   O ângulo (107deg) é o mesmo das três peças aprovadas.
   ══════════════════════════════════════════════════════════════════ */
.hero,.sec--roxo,.sec--roxo-escuro,.rodape{
  color:var(--branco);
  background-color:var(--azul);
  background-image:
    linear-gradient(107deg,transparent 0 12%,rgba(90,72,192,.20) 12% 29%,transparent 29% 100%),
    linear-gradient(107deg,transparent 0 66%,rgba(56,42,133,.62) 66% 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.sec--roxo-escuro{background-color:var(--azul-fundo)}
.rodape{background-color:var(--azul-rodape)}

/* retícula de meio-tom (cartaz de comício) + grão de impressão.
   ::before = retícula (atrás do conteúdo) · ::after = grão (na frente de tudo) */
.sec--roxo::before,.sec--roxo-escuro::before,.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:7px 7px;
}
.sec--roxo::after,.sec--roxo-escuro::after,.hero::after,.rodape::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background-image:var(--grao);
  /* 0.22 é o teto: acima disso o grão passa por cima do botão amarelo
     (que fica dentro de um contexto de empilhamento e não tem como
     subir acima dele) e começa a comer a legibilidade do CTA. */
  opacity:.22;mix-blend-mode:overlay;
}
/* o grão também roda nas seções claras — em multiply, bem mais fraco,
   só o suficiente pra unificar a página com o tratamento das artes */
.sec--amarelo::after,.sec--osso::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background-image:var(--grao);
  opacity:.10;mix-blend-mode:multiply;
}
.sec--roxo>*,.sec--roxo-escuro>*,.hero>*,.sec--amarelo>*,.sec--osso>*,.rodape>*{
  position:relative;z-index:1;
}
/* isolation prende o mix-blend-mode do grão DENTRO da própria seção.
   Sem isso o blend sobe pro contexto raiz e pode contaminar o header
   sticky e a barra fixa do celular em alguns navegadores. */
.sec,.hero,.rodape{isolation:isolate}

/* ══════════════════════════════════════════════════════════════════
   TIPOGRAFIA — reescala v1.2
   O problema apontado ("tudo embolado") tinha 4 causas somadas:
     1. line-height de display abaixo de 1 em bloco de 3–4 linhas;
     2. olho colado no título (14px fixos);
     3. clamps com vw alto demais — em 360–414px o título encostava
        nas duas margens ao mesmo tempo;
     4. nenhuma escala de espaço entre blocos (tudo com o mesmo respiro).
   Correções: line-height sobe, tracking negativo só no tamanho grande,
   vw reduzido nos clamps e espaçamento saindo de --sp-1..4.
   ══════════════════════════════════════════════════════════════════ */
.olho{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(11px,2.4vw,13px);line-height:1.3;
  color:var(--roxo);margin-bottom:var(--sp-2);
}
.olho--claro{color:var(--amarelo)}

.h2{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(29px,6.4vw,54px);line-height:1.02;letter-spacing:-.012em;
  color:var(--grafite);margin-bottom:var(--sp-3);
  text-wrap:balance;
}
.h2--claro{color:var(--branco)}
.h2--grande{font-size:clamp(32px,7.4vw,62px)}
.h2--gigante{font-size:clamp(46px,14.4vw,116px);line-height:.94;letter-spacing:-.025em}
.h2 em{color:var(--roxo)}
.h2--claro em{color:var(--amarelo)}
.h2 .mk{color:var(--amarelo)}
.h2 .sublinha{
  color:var(--grafite);
  box-shadow:inset 0 -.13em 0 var(--grafite);
}
/* bloco amarelo de fechamento (S09 "REAGE, / ZONA OESTE.") — mesmo
   recurso do hl--bloco do hero, em escala de manchete. A sombra
   deslocada é o desregistro de serigrafia das artes de feed. */
.slab{
  display:inline-block;background:var(--amarelo);color:var(--grafite);
  padding:.04em .14em .1em;margin-top:.06em;
  box-shadow:8px 8px 0 var(--roxo);
}

.corpo p{margin-bottom:var(--sp-1);max-width:60ch;text-wrap:pretty}
.corpo p:last-child{margin-bottom:0}
.corpo--claro{color:rgba(255,255,255,.88)}
.corpo--claro b{color:var(--branco)}
.corpo--escuro{color:rgba(20,18,28,.88)}
.corpo--menor p{font-size:16px;line-height:1.6}
.corpo--intro{margin-bottom:var(--sp-4)}
.corpo--intro p{font-size:clamp(17px,2.3vw,19.5px)}
.corpo--intro b{color:var(--roxo)}
.corpo--menor{margin-top:var(--sp-1)}

/* frase-slab: o bloco que vira arte */
.destaque{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(20px,4.1vw,31px);line-height:1.14;letter-spacing:-.005em;
  padding:clamp(22px,4.2vw,32px);margin:var(--sp-4) 0;
  border-left:8px solid currentColor;text-wrap:balance;
}
.destaque span{display:inline-block}
.destaque--roxo{background:var(--azul);color:var(--branco);border-left-color:var(--amarelo)}
.destaque--roxo span{color:var(--amarelo)}
.destaque--amarelo{background:var(--amarelo);color:var(--grafite);border-left-color:var(--roxo)}
.destaque--amarelo span{color:var(--roxo)}
.destaque--grafite{background:var(--grafite);color:var(--branco);border-left-color:var(--amarelo)}
.destaque--grafite span{color:var(--amarelo)}
.destaque--centro{border-left:0;border-top:8px solid var(--amarelo);text-align:center}

/* ─────────── ticker ─────────── */
.ticker{overflow:hidden;background:var(--azul);border-bottom:2px solid var(--roxo)}
.ticker--amarelo{background:var(--amarelo);border-bottom:0;border-top:4px solid var(--azul)}
.ticker__trilho{display:flex;width:max-content;animation:desliza 34s linear infinite}
.ticker__trilho--rev{animation-duration:28s;animation-direction:reverse}
.ticker__trilho span{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:13px;line-height:1;
  padding:10px 0;white-space:nowrap;color:var(--branco);
}
.ticker--amarelo .ticker__trilho span{color:var(--grafite)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─────────── header ─────────── */
.topo{position:sticky;top:0;z-index:50;background:var(--branco);border-bottom:3px solid var(--azul)}
.topo__wrap{
  max-width:var(--max);margin:0 auto;padding:10px var(--gutter);
  display:flex;align-items:center;gap:16px;
}
/* min-height 44px: a marca também é link (volta ao topo) e precisa de alvo de polegar */
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1 1 auto;min-width:0;min-height:44px}
.marca__num{
  font-family:var(--numero);font-size:clamp(26px,7vw,34px);line-height:.85;
  color:var(--azul);letter-spacing:-.03em;transform:skewX(-8deg);
}
.marca__nome{display:flex;flex-direction:column;justify-content:center}
.marca__nome b{
  display:flex;align-items:center;gap:1px;
  font-family:var(--display);font-size:clamp(13px,3.6vw,17px);line-height:1;
  letter-spacing:.01em;color:var(--grafite);white-space:nowrap;
}
.marca__nome i{
  font-family:var(--cond);font-weight:700;font-size:9px;letter-spacing:.22em;
  color:var(--roxo);font-style:normal;margin-top:3px;
}
.coracao{width:1em;height:.92em;display:inline-block;vertical-align:-.06em}
.coracao--inline{width:.86em;height:.8em;margin:0 .02em}
.nav{display:none}
/* v1.5 · CTA DO TOPO — CORREÇÃO DE OVERFLOW (achado no QA, defeito ANTIGO,
   não veio da troca de canal: a versão com "WHATSAPP · 2755" estourava
   igual, só que cortada em "WHA"). O header é um flex de 3 peças (número +
   lockup + botão) e o botão é nowrap; abaixo de ~1024px não sobra largura,
   então ele vazava pra fora da viewport. Ficava escondido porque o body
   tem overflow-x:clip — não gerava scroll lateral, só cortava o botão.
   Some no mobile e volta no desktop. Não perde CTA nenhum: a barra fixa
   .sticky carrega o MESMO destino e é exatamente o inverso disso
   (aparece <1024, some >=1024). As duas juntas cobrem as duas pontas.

   Seletor com DUAS classes (.btn.topo__cta) de propósito: .topo__cta é
   declarado aqui, ANTES do bloco de botões, e .btn{display:inline-flex}
   vem depois — com uma classe só, o display:none perdia por ordem de
   cascata e o botão continuava vazando. */
.topo__cta{flex:0 0 auto;white-space:nowrap}
.btn.topo__cta{display:none}

/* ─────────── botões ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:14px 24px;text-decoration:none;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(14px,3.2vw,17px);line-height:1.15;
  border:3px solid transparent;transition:transform .12s ease,background .18s ease,color .18s ease;
}
.btn:active{transform:translateY(2px)}
.btn--primario{
  background:var(--amarelo);color:var(--grafite);
  box-shadow:6px 6px 0 var(--roxo);
}
.btn--primario:hover{background:var(--branco);box-shadow:6px 6px 0 var(--verde)}
.btn--lg{min-height:64px;font-size:clamp(15px,3.8vw,20px);padding:18px 30px;width:100%}
.btn--sm{min-height:44px;padding:10px 14px;font-size:12px;letter-spacing:.06em;
  background:var(--verde);color:var(--branco)}
.btn--sm:hover{background:var(--azul)}
/* .btn--wa REMOVIDA na v1.5 junto com os botões de WhatsApp (era só o
   white-space:nowrap, que migrou pra .topo__cta). */
.btn--contorno{
  background:transparent;color:var(--roxo);border-color:var(--roxo);
  margin-top:8px;
}
.btn--contorno:hover{background:var(--roxo);color:var(--branco)}
.btn--contorno-claro{
  background:transparent;color:var(--branco);border-color:rgba(255,255,255,.55);width:100%;
}
.btn--contorno-claro:hover{background:var(--branco);color:var(--azul);border-color:var(--branco)}

.link-scroll{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--cond);font-weight:600;
  font-size:16px;letter-spacing:.06em;color:var(--roxo);
  text-decoration:none;border-bottom:2px solid currentColor;padding:8px 0;
}
.link-scroll--claro{color:var(--amarelo)}
.acoes{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:var(--sp-3)}
.acoes--coluna{align-items:stretch;gap:14px;margin:var(--sp-4) 0}
.acoes--coluna .link-scroll{align-self:center;margin-top:6px}

/* ══════════════════════════════════════════════════════════════════
   TRATAMENTO DE FOTO — feito 100% em CSS sobre o PNG/WebP recortado
   As 3 fotos chegam do estúdio com o croma já removido e SEM grading.
   O tratamento das artes de feed é reproduzido aqui em três camadas:
     1. filter no <img> ....... contraste/saturação (a foto crua é chapada)
     2. drop-shadow ........... respeita o alpha do recorte, então cria
                                sombra na SILHUETA, não numa caixa
     3. halo radial atrás ..... separa o vulto (camisa preta) do fundo
                                azul-marinho — sem ele o ombro some
   O grão da seção passa POR CIMA da foto (z-index 4 do ::after), que é
   exatamente o que acontece nas artes: grão sobre a composição inteira.
   ══════════════════════════════════════════════════════════════════ */
/* ── v1.4 · REGRADUAÇÃO DEPOIS DO CONSERTO DO RECORTE ───────────────
   A graduação da v1.2 (contrast 1.10 · saturate .93 · brightness .98)
   não foi escolhida no vácuo: ela compensava o defeito da máscara. Com
   a alpha furada, o azul-marinho do fundo vazava pela camisa e a figura
   chegava lavada e esverdeada — daí o contraste alto e a saturação
   baixa. Com a alpha consertada (ver index.html, bloco BANCO DE FOTO),
   essa mesma graduação passou a AGIR SOBRE UMA FOTO QUE JÁ ESTÁ CERTA:
   fechava a camisa preta num borrão sem costura e apagava o desenho do
   ombro. Os números voltam pra perto de 1 — o trabalho de separar a
   figura do fundo passou pro halo e pela sombra, que é onde ele deve
   estar.
   object-fit/object-position são cinto de segurança: o recorte tem alpha
   nas bordas e proporção própria, então se qualquer container impuser
   altura, a figura encolhe inteira e ancora pelos pés em vez de esticar
   ou cortar a cabeça. */
.retrato{position:relative;margin:0}
.retrato img{
  width:100%;height:auto;display:block;
  object-fit:contain;object-position:center bottom;
  filter:contrast(1.04) saturate(.98) brightness(1.02)
         drop-shadow(0 16px 30px rgba(0,0,0,.5));
}
/* halo: subiu o centro de 46% pra 36% da altura. O corte novo tirou
   20–23% de moldura vazia acima da cabeça, então o tronco e o rosto —
   que é o que o halo precisa destacar — subiram na mesma proporção
   dentro do quadro. Com o centro antigo, o brilho ficava atrás da
   barriga e o ombro voltava a sumir no fundo. */
.retrato::before{
  content:"";position:absolute;z-index:-1;
  left:-16%;right:-16%;top:-6%;bottom:-4%;
  background:radial-gradient(58% 54% at 50% 36%,rgba(90,72,192,.55),rgba(22,16,74,0) 72%);
  pointer-events:none;
}

/* ══════════════════ S01 · HERO ══════════════════
   Composição nova: tipografia empilhada gigante à esquerda + foto de
   corpo inteiro (mãos abertas, "V" de paz e amor) à direita, encostada
   na régua de provas. É a leitura direta das artes de feed aprovadas.
   ══════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(40px,8vw,84px) 0 0;
}
.hero__num{
  position:absolute;right:-7vw;bottom:6%;
  transform:skewX(-8deg);
  font-family:var(--numero);font-size:clamp(190px,42vw,520px);line-height:.7;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.10);
  letter-spacing:-.04em;pointer-events:none;user-select:none;z-index:0;
}
.hero__grid{position:relative;z-index:2}

.hero__h1{
  font-family:var(--display);text-transform:uppercase;
  /* 11.6vw é o teto seguro: em 320px a linha mais longa
     ("REPRESENTAÇÃO.") ainda cabe dentro do gutter. */
  font-size:clamp(32px,11.6vw,70px);line-height:.94;letter-spacing:-.018em;
  margin:0 0 var(--sp-3);
}
/* cada palavra-bloco é uma linha própria — o empilhamento das artes.
   Branco = premissa · amarelo em bloco violeta = a virada da frase. */
.hl{display:block;color:var(--branco)}
.hl--bloco{
  display:block;width:fit-content;max-width:100%;
  color:var(--amarelo);
  background:rgba(90,72,192,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  padding:.05em .16em .11em;
  margin-top:.05em;
}
/* degrau: a segunda metade entra deslocada, como os retângulos
   escalonados de "REAGE / BRASIL / 2755" da arte 03 */
.hl--degrau{margin-left:.36em}

.hero__sub{
  font-size:clamp(16px,3.4vw,19.5px);max-width:46ch;
  color:rgba(255,255,255,.90);margin-top:var(--sp-3);
}
.hero__sub b{color:var(--amarelo)}

/* foto do hero */
.hero__foto{
  width:min(82%,320px);margin:var(--sp-3) auto 0;
  align-self:end;
}
.hero__foto img{
  filter:contrast(1.06) saturate(.99) brightness(1.03)
         drop-shadow(0 20px 36px rgba(0,0,0,.55));
}
/* CHÃO da figura no celular. Sem isso o corpo aparece cortado na coxa
   flutuando no meio do azul, que lê como erro de recorte. A régua
   sangra pelos dois lados (o .hero tem overflow:hidden) e transforma
   o corte em decisão de cartaz. No desktop ela não existe: lá a figura
   se apoia na própria régua de provas. */
.hero__foto::after{
  content:"";position:absolute;left:-50vw;right:-50vw;bottom:0;height:2px;
  background:rgba(255,255,255,.22);pointer-events:none;
}

/* régua de provas — vira o "chão" onde a figura se apoia.
   v1.4: a régua era DATA + projeto e o <b> era a data, curta e de largura
   previsível (112px seguravam "27/06/2026"). Agora o <b> é o NOME do
   projeto e o <span> é a descrição — ou seja, o par inverteu de peso.
   Por isso os dois passaram a empilhar em TODAS as larguras: lado a lado,
   "REAGE BRASIL" + descrição de 5 palavras estourava a linha no celular,
   e a min-width fixa desalinhava um item do outro. Empilhado, o nome do
   projeto vira manchete e a descrição vira legenda — que é o que o gestor
   pediu quando tirou as datas. */
.hero__provas{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:2px solid rgba(255,255,255,.28);
  margin-top:0;
}
.hero__provas li{
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:4px;
}
.hero__provas li:last-child{border-bottom:0}
.hero__provas b{
  font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.14em;
  color:var(--amarelo);
}
.hero__provas span{font-size:15px;color:rgba(255,255,255,.82)}
.hero__rodape{padding-bottom:clamp(28px,5vw,44px)}

/* ─────────── S03 quem é (com retrato 3/4) ─────────── */
.quem-sec{overflow:hidden}
.quem{display:grid;gap:var(--sp-3)}
.quem__foto{width:min(84%,340px);margin:var(--sp-3) auto var(--sp-3)}
/* mesmo "chão" do hero — ver comentário lá. Vale pros 3 retratos:
   é o que diferencia corte de cartaz de recorte mal feito. */
.quem__foto::after,.metodo__foto::after{
  content:"";position:absolute;left:-50vw;right:-50vw;bottom:0;height:2px;
  background:rgba(255,255,255,.20);pointer-events:none;
}
.corpo--menor.corpo--claro p,.corpo--claro.corpo--menor p{font-size:16px}
.legenda{
  font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.04em;
  color:rgba(255,255,255,.62);margin-top:12px;
}

/* ─────────── S04 currículo de rua ─────────── */
.cards{display:grid;gap:clamp(18px,3vw,26px)}
.card{
  position:relative;background:var(--branco);border:3px solid var(--grafite);
  padding:clamp(24px,5vw,34px);box-shadow:10px 10px 0 var(--azul);
}
.card__n{
  position:absolute;top:-3px;right:-3px;
  background:var(--azul);color:var(--amarelo);
  font-family:var(--numero);font-size:20px;line-height:1;padding:10px 12px;
}
.card__data{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:12px;color:var(--roxo);margin-bottom:10px;
}
.card__titulo{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(25px,5.4vw,35px);line-height:1.0;letter-spacing:-.008em;
  margin-bottom:var(--sp-2);
}
.card__titulo small{display:block;font-size:.5em;color:var(--roxo);letter-spacing:.02em;margin-top:.12em}
.card__destaque{
  margin-top:var(--sp-2);padding-top:var(--sp-1);border-top:3px solid var(--amarelo);
  font-family:var(--cond);font-weight:700;font-size:clamp(16.5px,3.4vw,19px);
  line-height:1.28;color:var(--grafite);
}
.fecho{margin-top:var(--sp-4)}

/* ─────────── S05 pilares ─────────── */
.pilares{display:grid;gap:clamp(26px,4.4vw,32px)}
.pilar{
  background:var(--osso);border-top:8px solid var(--azul);
  padding:clamp(24px,5vw,32px);
}
.pilar:nth-child(2){border-top-color:var(--amarelo)}
.pilar:nth-child(3){border-top-color:var(--verde)}
.pilar__h{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,4.6vw,29px);line-height:1.06;letter-spacing:-.005em;
  margin-bottom:var(--sp-2);text-wrap:balance;
}
.pilar__h em{color:var(--roxo)}
.pilar__destaque{
  margin-top:var(--sp-2);padding:16px 18px;background:var(--grafite);color:var(--branco);
  font-family:var(--cond);font-weight:700;font-size:17px;line-height:1.3;
}

/* ─────────── S05b método (com retrato frontal) ─────────── */
.metodo-sec{overflow:hidden}
.metodo{display:grid;gap:var(--sp-3)}
.metodo__col{max-width:860px}
.metodo__foto{width:min(78%,320px);margin:var(--sp-4) auto 0}
/* o CTA herdado da S07 entra centralizado entre os critérios e o fecho */
/* .metodo__col .btn--contorno-claro saiu na v1.5 — era exclusiva do CTA
   "ME CONTA O QUE FALTA NO SEU BAIRRO", removido com o canal WhatsApp.
   O blockquote que ficou no lugar tem margem própria (.destaque). */
.criterios{display:grid;gap:16px;margin:var(--sp-3) 0}
.criterios li{
  display:flex;gap:16px;align-items:flex-start;
  border-left:4px solid var(--amarelo);padding:4px 0 4px 18px;
}
.criterios__n{
  font-family:var(--numero);font-size:26px;line-height:1.1;color:var(--amarelo);
  flex:0 0 auto;min-width:32px;
}
.criterios p{color:rgba(255,255,255,.88);font-size:16px;line-height:1.55;max-width:56ch}
.criterios b{color:var(--branco)}

/* ─────────── S08 imprensa (oculta até chegarem os links) ─────────── */
.imprensa{display:grid;gap:10px;margin:var(--sp-3) 0}
.imprensa a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;background:var(--branco);border:2px solid var(--grafite);
  text-decoration:none;font-family:var(--cond);font-weight:700;font-size:18px;
}
.imprensa a:hover{background:var(--amarelo)}
.imprensa span{font-size:13px;letter-spacing:.1em;color:var(--roxo)}

/* ─────────── S09 mobilização ─────────── */
.mobilize{overflow:hidden}
.mobilize__num{
  position:absolute;right:-8vw;bottom:-6%;transform:skewX(-8deg);
  font-family:var(--numero);font-size:clamp(180px,40vw,480px);line-height:.7;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.08);
  letter-spacing:-.04em;pointer-events:none;user-select:none;z-index:0;
}
/* v1.4 — .acoes3 (a grade de 3 passos "entra no grupo / pega o kit /
   manda pra três") foi REMOVIDA daqui junto com o markup dela. Era o
   único componente exclusivo das seções que saíram, então some inteiro:
   não havia nenhum outro seletor da página compartilhando essas regras.
   Ver o comentário do bloco removido no index.html (seção S09). */

/* selo de fechamento — logo oficial, com lockup CSS de fallback */
.selo{margin-top:var(--sp-4);display:flex;justify-content:center}
.selo picture{display:block;max-width:100%}
/* width/height no <img> preservam a proporção 906×829 → zero CLS ao carregar */
.selo__img{width:min(300px,72vw);height:auto}
.lockup{text-align:center;line-height:1}
.lockup__tag{
  font-family:var(--display);color:var(--amarelo);font-size:clamp(22px,6vw,32px);
  letter-spacing:.02em;
}
.lockup__num{
  font-family:var(--numero);color:var(--branco);
  font-size:clamp(64px,20vw,120px);letter-spacing:-.04em;
  transform:skewX(-8deg);margin:2px 0 8px;
}
.lockup__bloco{
  display:inline-flex;flex-direction:column;align-items:center;
  background:var(--amarelo);color:var(--branco);
  font-family:var(--display);font-size:clamp(30px,9vw,54px);line-height:1;
  padding:.14em .18em .18em;letter-spacing:.005em;
  transform:skewY(-1.5deg);
}
.lockup__bloco span{display:flex;align-items:center;transform:skewY(1.5deg)}
.lockup__cargo{
  font-family:var(--cond);font-weight:700;color:var(--branco);
  letter-spacing:.32em;font-size:clamp(11px,3vw,14px);margin-top:10px;
}

/* ─────────── rodapé ─────────── */
/* padding-bottom abre espaço pra barra fixa + faixa do home indicator do iPhone */
.rodape{
  position:relative;
  color:rgba(255,255,255,.80);font-size:15px;
  padding:clamp(56px,9vw,88px) 0 calc(110px + env(safe-area-inset-bottom));
}
.assinatura{
  font-family:var(--display);text-transform:uppercase;color:var(--branco);
  font-size:clamp(28px,7.4vw,52px);line-height:1.0;letter-spacing:-.015em;
  margin-bottom:var(--sp-4);
}
.assinatura em{color:var(--amarelo)}
.rodape__grid{display:grid;gap:28px;border-top:2px solid rgba(255,255,255,.2);padding-top:32px}
.rodape__rot{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:12px;color:var(--amarelo);margin-bottom:10px;
}
.rodape a{color:var(--branco)}
/* links do rodapé são texto corrido (exceção de alvo inline da WCAG 2.5.8),
   mas ganham respiro vertical pra não virar alvo de 17px no polegar */
.rodape__bloco a{display:inline-block;padding:6px 0}
.rodape__links{margin-top:12px;font-size:14px}

.tarja{
  display:block;background:var(--amarelo);color:var(--grafite);
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;padding:8px 12px;margin-bottom:16px;
}
.tarja--inline{display:inline-block;margin:6px 0 0;font-size:10px;padding:4px 8px}

/* ficha técnica legal — v1.4 deixou de ser checklist de pendência e virou
   bloco editorial de rodapé, com os campos que o comprovante de CNPJ
   fechou. A borda tracejada (que dizia "isto é um esqueleto") virou uma
   borda-topo sólida em amarelo: agora é informação publicável, não
   rascunho. O .ficha__lista saiu junto com a lista de [JURÍDICO]. */
.ficha{margin-top:44px;border-top:3px solid var(--amarelo);padding:clamp(20px,4vw,28px) 0 0}
.ficha__t{font-family:var(--display);text-transform:uppercase;color:var(--branco);font-size:20px;margin-bottom:14px;letter-spacing:.01em}
.ficha__corpo{font-size:14px;line-height:1.65;margin-bottom:12px;max-width:70ch}
.ficha__corpo b{color:var(--branco)}
.ficha__nota{margin-top:16px;font-size:13px;color:rgba(255,255,255,.6)}
.ficha__nota a,.ficha__corpo a{color:var(--amarelo)}

/* ─────────── privacidade.html ───────────
   A página de política reaproveita os componentes da LP inteiros (.sec--osso,
   .wrap--estreito, .h2, .corpo, .pilar__h, .tarja, .rodape). A única regra
   própria dela é o respiro entre os blocos numerados: .pilar__h nasceu dentro
   de um card .pilar, que já tinha padding, e solto no corpo do texto ele
   encostava no parágrafo anterior. O seletor é escopado em .sec--osso de
   propósito — os pilares da LP vivem em .sec--branco e não são afetados. */
.sec--osso .pilar__h{margin-top:var(--sp-4)}
.creditos{margin-top:36px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ─────────── barra fixa mobile ─────────── */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  /* 56px de área de toque + faixa do home indicator (iPhone sem botão) */
  min-height:calc(56px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--verde);color:var(--branco);
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:16px;text-decoration:none;
  border-top:3px solid var(--azul);
}
.sticky b{color:var(--amarelo);margin-left:.3em}
/* a regra a[aria-disabled="true"]{cursor:not-allowed} saiu na v1.5: existia
   só pros links de WhatsApp inertes, e não há mais link inerte na página. */

/* ══════════════════ CELULAR ESTREITO (≤359px) ══════════════════
   iPhone SE 1ª geração, Galaxy Fold fechado, Android de entrada.
   Nessa faixa o lockup do header quebrava em 3 linhas e empurrava o
   header pra 79px. O cargo sai; o que identifica (2755 + MARCOS NOBRE)
   fica. Nenhuma outra regra de arte muda. */
@media (max-width:359px){
  .marca__nome i{display:none}
  .topo__wrap{gap:10px}
  .hl--degrau{margin-left:0}      /* o degrau custa largura que não sobra */
  .hero__foto{width:88%}
}

/* ══════════════════ CELULAR LARGO / TABLET PEQUENO (≥560px) ══════════════════ */
@media (min-width:560px){
  /* v1.4: 2 colunas, não 3 — a régua tem dois projetos agora */
  .hero__provas{grid-template-columns:repeat(2,1fr);gap:0 clamp(16px,3vw,32px)}
  .hero__provas li{border-bottom:0;padding:16px 0 18px}
}

/* ══════════════════ TABLET ══════════════════ */
@media (min-width:680px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .acoes{flex-direction:row;align-items:center;gap:24px}
  .acoes--coluna{flex-direction:column}
  .btn--lg{width:auto;min-width:min(460px,100%)}
  .btn--contorno-claro{width:auto;min-width:min(460px,100%);margin:0 auto}
  .rodape__grid{grid-template-columns:repeat(3,1fr)}
  .pilares{grid-template-columns:repeat(2,1fr)}
  .hero__foto{width:min(56%,380px)}
  .quem__foto{width:min(58%,380px)}
  .metodo__foto{width:min(52%,340px)}
}

/* ══════════════════ DESKTOP ══════════════════ */
@media (min-width:1024px){
  body{font-size:18px}
  .nav{
    display:flex;gap:24px;align-items:center;justify-content:center;flex:1 1 auto;
    font-family:var(--cond);font-weight:600;text-transform:uppercase;
    letter-spacing:.12em;font-size:14px;
  }
  .nav a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
  .nav a:hover{border-bottom-color:var(--amarelo);color:var(--azul)}
  .marca{flex:0 0 auto}
  /* v1.4: os cards de currículo caíram de 3 pra 2 (só West Liga e Reage
     Brasil). Mantidos em 2 colunas no desktop — em 3 colunas o segundo
     card ficaria com uma coluna vazia do lado, que lê como card faltando. */
  .cards{grid-template-columns:repeat(2,1fr)}
  .pilares{grid-template-columns:repeat(3,1fr)}
  .sticky{display:none}
  /* aqui sobra largura pro botão do topo — ele entra no lugar da .sticky.
     Mesma especificidade de 2 classes usada pra esconder lá em cima. */
  .btn.topo__cta{display:inline-flex}
  .rodape{padding-bottom:clamp(56px,9vw,88px)}

  /* ── HERO em duas colunas ──────────────────────────────────────────
     A ordem do DOM é olho → h1 → foto → sub → ações (pensada pro
     celular, onde a figura entra logo depois do título). No desktop o
     grid recoloca a figura na coluna 2 ocupando as 4 linhas, e o texto
     segue lendo de cima a baixo na coluna 1. Nada de duplicar markup. */
  .hero{padding-top:clamp(56px,6vw,92px)}
  .hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(280px,.86fr);
    /* a 4ª linha é 1fr: ela absorve a sobra de altura quando a figura é
       mais alta que o texto. Sem isso a sobra seria distribuída entre as
       4 linhas e abriria buracos aleatórios no meio da headline. */
    grid-template-rows:auto auto auto 1fr;
    column-gap:clamp(28px,4vw,56px);
    align-items:start;
  }
  .hero__grid .olho   {grid-column:1;grid-row:1}
  .hero__grid .hero__h1{grid-column:1;grid-row:2}
  .hero__grid .hero__sub{grid-column:1;grid-row:3;margin-top:0}
  /* o CTA desce e alinha com a base da figura — os dois pousam na
     mesma linha imaginária, que é a régua de provas logo abaixo */
  .hero__grid .acoes  {grid-column:1;grid-row:4;align-self:end;margin-bottom:clamp(12px,2vw,26px)}
  .hero__foto{
    grid-column:2;grid-row:1 / span 4;align-self:end;
    /* sangra pro lado de fora do gutter: a figura encosta na borda */
    width:calc(100% + clamp(16px,3vw,48px));max-width:none;
    margin:0 calc(-1 * clamp(16px,3vw,48px)) 0 0;
  }
  .hero__foto::after{display:none}   /* a régua de provas já é o chão */
  .hero__provas li{padding:18px 0 22px}

  /* ── S03 quem é: retrato à esquerda, apoiado na base da seção ── */
  .quem{
    grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);
    grid-template-rows:auto 1fr;      /* mesma lógica do hero */
    column-gap:clamp(36px,4.6vw,64px);
    align-items:start;
  }
  .quem__intro{grid-column:2;grid-row:1}
  .quem__texto{grid-column:2;grid-row:2;align-self:start}
  .quem__foto{
    grid-column:1;grid-row:1 / span 2;align-self:end;
    width:calc(100% + clamp(16px,3vw,48px));max-width:none;
    margin:0 0 calc(-1 * clamp(68px,11vw,124px)) calc(-1 * clamp(16px,3vw,48px));
  }
  /* no desktop os retratos sangram pra fora da seção: o "chão" vira a
     própria borda entre uma seção e a seguinte */
  .quem__foto::after,.metodo__foto::after{display:none}

  /* ── S05b método: retrato à direita, apoiado na base da seção ── */
  .metodo{
    grid-template-columns:minmax(0,1.24fr) minmax(230px,.76fr);
    column-gap:clamp(36px,4.6vw,64px);
    align-items:end;
  }
  .metodo__col{grid-column:1}
  .metodo__foto{
    grid-column:2;align-self:end;
    width:calc(100% + clamp(16px,3vw,48px));max-width:none;
    margin:0 calc(-1 * clamp(16px,3vw,48px)) calc(-1 * clamp(68px,11vw,124px)) 0;
  }
}

/* ══════════════════ IMPRESSÃO (santinho/print de conferência) ══════════════════ */
@media print{
  .ticker,.sticky,.topo{display:none}
  body{border-top:0;color:#000;background:#fff}
  .sec--roxo,.sec--roxo-escuro,.hero,.rodape{background:#fff!important;color:#000!important;background-image:none!important}
  .sec--roxo::after,.sec--roxo-escuro::after,.hero::after,.rodape::after,
  .sec--osso::after,.sec--amarelo::after,
  .sec--roxo::before,.sec--roxo-escuro::before,.hero::before{display:none}
  .h2--claro,.corpo--claro,.hero__h1,.hl,.hl--bloco{color:#000!important;background:none!important}
  .hero__num,.mobilize__num{display:none}
  .retrato img{filter:grayscale(1) contrast(1.1)!important}
  .retrato::before{display:none}
}