/* ============================================================
   CONSTEC — folha do site (etapa 6, corrigida na 10b)
   Direção A aprovada: GREIGE CLARO DOMINANTE, tinta navy,
   navy como âncora (hero, faixa de borda, blocos de destaque,
   card da marca) e só ali a tinta é bone.
   Raio ~zero, imagens sangram, superfície nunca chapada.
   Movimento: scroll nativo, sem inércia.

   Contrato de superfície (10b): o CSS de componente NUNCA cita
   `--bone*` direto quando o traço depende da superfície. Ele cita
   `--ink`, `--ink-muted`, `--ink-strong` e `--rule`, que
   `.surf-greige` (claro) e `.surf-navy` (escuro) redefinem no
   próprio escopo. Bloco navy dentro de superfície clara é uma
   ILHA: reseta os quatro nomes de volta para bone.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Altura real do header fixo, para a âncora parar SEMPRE à mesma distância
   dele. Com o valor fixo de 112px que estava aqui, a folga abaixo do header
   era desigual: 39px no mobile (header de 73px) e só 19px no desktop (header
   de 93px), ou seja, no desktop o título da seção chegava colado na barra.
   Amarrado à altura do header, a folga passa a ser 40px nos dois. */
:root { --hdr-h: 93px; --anchor-gap: 40px; }
@media (max-width: 900px) { :root { --hdr-h: 73px; } }

html {
  overflow-x: clip;              /* NUNCA overflow-x:hidden no body */
  scroll-behavior: smooth;       /* nativo, sem inércia */
  scroll-padding-top: calc(var(--hdr-h) + var(--anchor-gap));
  -webkit-text-size-adjust: 100%;
}
/* O `scroll-behavior` do html NÃO cascateia para caixa de rolagem interna.
   O off-canvas rola por conta própria em tela baixa, então declara o seu. */
.drawer { scroll-behavior: smooth; }
/* Alvo que fica dentro de container com rolagem própria não é coberto pelo
   scroll-padding do html; a margem no próprio alvo cobre os dois casos. */
:target { scroll-margin-top: calc(var(--hdr-h) + var(--anchor-gap)); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* o padrão do site é CLARO: tinta navy sobre greige. O escuro é exceção
     e se declara em .surf-navy, .hero, .hdr, .drawer, .ft, .lb e .cookie. */
  color: var(--ink-invert);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }            /* libera o aspect-ratio (armadilha 10) */
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
/* palavra sem espaço (e-mail, URL) não pode vazar do bloco: o texto vaza
   sem mudar o rect do pai, então só a rolagem denuncia. Medido no harness. */
p, li, dd, dt, td, figcaption, label { overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html, .drawer { scroll-behavior: auto; }   /* a caixa interna também */
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- Superfícies (nunca chapado) ----------
   O gradiente de `.surf-greige` e `.surf-navy` mora no tokens.css, junto
   dos tokens que cada uma redefine. Aqui ficam só os ajustes de componente.
   NÃO existe mais `.surf-greige-2` (o marrom escuro #605B53 → #241F19 que
   a etapa 6 pintou por engano) nem `.surf-bone` (classe morta, 16 regras e
   zero uso): as duas viraram esta única superfície clara. */

/* CONTEXTOS SEMPRE ESCUROS (hero, cromo do site e overlays). O corpo do
   documento é claro, então cada um destes declara o escuro por conta. */
.hero, .hdr, .drawer, .ft, .lb, .cookie {
  color: var(--ink);
  --ink:        var(--bone);
  --ink-muted:  var(--bone-dim);
  --ink-strong: var(--bone);
  --rule:       var(--bone-faint);
  --focus:      #C9C4BC;
}
/* O HERO é o único destes contextos cujo fundo é FOTO, e não cor chapada.
   `--bone-dim` é bone com 72% de opacidade: sobre cor sólida isso é só um tom
   mais apagado, mas sobre foto a translucidez derruba a luminância do próprio
   texto, e o subtítulo e o microcopy reprovaram no contraste (1,42:1 e 3,35:1
   contra o mínimo de 4,5:1).
   Diagnóstico que eu tinha errado antes: reforcei o véu achando que o problema
   era o fundo. O fundo já estava certo; quem estava fraco era a tinta.
   Aqui a tinta secundária vira COR SÓLIDA, um degrau abaixo do bone. */
.hero { --ink-muted: #DAD6D0; }

/* ILHAS NAVY dentro da superfície clara: bloco escuro que carrega tinta
   bone. Sem este reset, o bloco herdaria a tinta navy da seção e sumiria. */
.limitbox, .route, .overlap__card, .cmp__card--brand, .folio__count, .tl__dot {
  color: var(--bone);
  --ink:        var(--bone);
  --ink-muted:  var(--bone-dim);
  --ink-strong: var(--bone);
  --rule:       var(--bone-faint);
}
/* ... e a exceção da exceção: na comparativa invertida (LP Reformas) o card
   da MARCA é o bloco claro sobre o navy, então volta para tinta navy. */
.cmp--invert .cmp__card--brand {
  color: var(--navy-700);
  --ink:        var(--navy-700);
  --ink-muted:  rgba(29, 41, 55, 0.74);
  --ink-strong: var(--navy-700);
  --rule:       rgba(29, 41, 55, 0.18);
}

/* A textura do tokens.css usa z-index:-1, que a joga para trás do próprio
   fundo da seção (some em .surf-navy). Aqui ela sobe para 0 e o conteúdo
   fica em 1, que é o empilhamento que faz a grade aparecer. */

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sec { position: relative; padding-block: var(--section-y); }
.sec--tight { padding-block: clamp(56px, 6vw, 104px); }

/* Faixa/bloco navy na borda: elemento estrutural de assinatura */
.sec--anchor-l::before,
.sec--anchor-r::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(10px, 3.4vw, 56px);
  background: var(--navy-700);
  z-index: 0;
}
.sec--anchor-l::before { left: 0; }
.sec--anchor-r::before { right: 0; }
.sec > .container { position: relative; z-index: 1; }

.sec__head { max-width: 72ch; }
.sec__head--wide { max-width: none; }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: .8;
}
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
  letter-spacing: var(--display-track);
  line-height: var(--lh-head);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: 0.05em; }
.h4 { font-size: 1rem; letter-spacing: 0.08em; }
/* Caixa alta + largura 112% engorda muito a palavra: em tela estreita a
   escala precisa de piso menor, senão o título sozinho estoura a largura. */
@media (max-width: 460px) {
  /* mesma conta para o h1: "fornecedores" (12 caracteres) no título de
     /fornecedores/ pedia 304px em 320px de tela, contra 280px de container. */
  .h1 { font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.6rem); }
  /* em 320px o container útil tem 280px; "Empreendimentos" (15 caracteres a
     0,889em cada) precisa de 15 × 0,889 × corpo. Com 20,96px dava 279,5px e
     quebrava no meio da palavra por menos de 1px. */
  .h2 { font-size: clamp(1.1rem, 0.9rem + 1.6vw, 1.7rem); }
  .h3 { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem); }
}
/* rede: palavra que ainda assim não couber quebra em vez de vazar */
.h1, .h2, .h3, .h4, .hero__title { overflow-wrap: break-word; }
a[href^="mailto:"], .contact dd, .ft__list a { overflow-wrap: anywhere; }
.lead { font-size: var(--fs-lead); color: var(--ink-muted); max-width: var(--maxw-text); }
.body-text { max-width: var(--maxw-text); }
.body-text p + p { margin-top: var(--s-5); }
.hr { height: 1px; background: var(--rule); border: 0; margin-block: var(--s-7); }
.mono {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Mídia ---------- */
.media { display: block; position: relative; overflow: hidden; background: var(--greige-500); }
.media img { width: 100%; height: 100%; object-fit: cover; }
/* SANGRIA — a foto avança sobre a calha do container e encosta na borda do
   bloco de texto, como no papel do portfólio. Não vai até a borda da
   viewport de propósito: o acervo veio de dentro de um PDF e qualquer
   largura maior estouraria o teto do MANIFESTO. Abaixo de 900px as colunas
   empilham e a sangria é desligada, senão viraria overflow horizontal. */
.media--bleed-r { margin-right: calc(var(--gutter) * -1); }
.media--bleed-l { margin-left: calc(var(--gutter) * -1); }
@media (max-width: 900px) {
  .media--bleed-r, .media--bleed-l { margin-right: 0; margin-left: 0; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: var(--r-0);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  text-align: left;
}
.btn--primary { background: var(--bone); color: var(--navy-900); }
.btn--primary:hover { background: #FFFFFF; }
.btn--ghost { border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-strong); background: rgba(233, 230, 225, 0.08); }
.surf-greige .btn--primary { background: var(--navy-700); color: var(--bone); }
.surf-greige .btn--primary:hover { background: var(--navy-900); }
.surf-greige .btn--ghost { border-color: rgba(29, 41, 55, 0.7); color: var(--navy-700); }
.surf-greige .btn--ghost:hover { border-color: var(--navy-700); background: rgba(29, 41, 55, 0.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur-1) var(--ease), gap var(--dur-1) var(--ease);
}
.link-arrow:hover { border-color: var(--ink-strong); gap: 16px; }
.microcopy { font-size: var(--fs-sm); color: var(--ink-muted); }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(11, 21, 32, 0.62), rgba(11, 21, 32, 0));
}
.hdr.is-solid { background: var(--navy-900); border-bottom-color: var(--bone-faint); }
.hdr__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 92px; }
.hdr__logo { display: block; flex: none; }
.hdr__logo img { width: 68px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__link {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
  padding: 8px 0; border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--bone); border-bottom-color: var(--bone); }
.hdr__cta { display: inline-flex; padding: 13px 22px; font-size: var(--fs-xs); }
.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--bone-faint);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 20px; height: 1.5px; background: var(--bone); transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
/* O wrapper existe para CLIPAR o off-canvas fechado: elemento fixo
   translado para fora da tela cresce o scrollWidth e o overflow-x:clip
   do html não o alcança (medido no harness). */
.drawer-wrap { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.drawer-wrap .drawer { pointer-events: auto; }
.drawer {
  position: absolute; inset: 0 0 0 auto; width: min(88vw, 380px);
  background: var(--navy-900); border-left: 1px solid var(--bone-faint);
  transform: translateX(101%); transition: transform var(--dur-2) var(--ease);
  padding: 96px var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: var(--s-5);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__link {
  font-family: var(--font-display); font-weight: 700; font-stretch: 108%;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.1rem;
  padding-bottom: 14px; border-bottom: 1px solid var(--bone-faint);
}
.drawer__close { position: absolute; top: 22px; right: 20px; width: 44px; height: 44px; font-size: 1.4rem; line-height: 1; }
.scrim { position: fixed; inset: 0; background: rgba(11, 21, 32, 0.6); z-index: 65; opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2); }
.scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: flex; }
  .hdr__inner { height: 72px; }
  .hdr__logo img { width: 54px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; isolation: isolate; background: var(--navy-900); }
/* sem z-index negativo: empilhamento explícito, mídia embaixo, conteúdo em cima */
.hero__media { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--navy-900); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Véu de legibilidade do hero. Só gradiente: o quadriculado de 1px que ficava
   por cima foi removido em 04/08/2026 a pedido do usuário, junto com a textura
   das seções. Ele tinha entrado para mascarar a maciez do upscale, e desde que
   os heros passaram a vir em resolução real não tinha mais função técnica.
   O véu é forte onde o texto assenta e quase transparente no lado da foto. */
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* Recalibrado por MEDIÇÃO em 04/08/2026, depois de o harness reprovar.
       A versão anterior (0,80 → 0,46 em 52% → 0,26) foi ajustada olhando só o
       H1 e reprovou no subtítulo, no microcopy e nos rótulos dos números: o
       texto do hero ocupa de 14% a 50% da largura, e o pior nó pedia véu de
       0,615 num ponto onde o gradiente entregava 0,47.
       Agora o patamar forte se estende até 55%, que é onde o texto acaba, e só
       depois cai. O lado direito segue em 0,26, então a foto continua visível. */
    linear-gradient(to right, rgba(11, 21, 32, 0.86) 0%, rgba(11, 21, 32, 0.68) 55%, rgba(11, 21, 32, 0.26) 100%),
    linear-gradient(to top, rgba(11, 21, 32, 0.52) 0%, rgba(11, 21, 32, 0) 58%);
}
/* A cena de reforma é clara (parede branca, piso claro, sol na piscina),
   então esta variante segue mais fechada que a padrão, por legibilidade. */
.hero--deep .hero__media::after {
  background-image:
    linear-gradient(to right, rgba(11, 21, 32, 0.88) 0%, rgba(11, 21, 32, 0.70) 55%, rgba(11, 21, 32, 0.34) 100%),
    linear-gradient(to top, rgba(11, 21, 32, 0.58) 0%, rgba(11, 21, 32, 0) 60%);
}
/* HERO "FIT" (Sobre e Portfólio, `hero-institucional`, nativo 947x419).
   A seção continua full-bleed e fullscreen (preferência fixa do usuário),
   mas a FAIXA de foto para de ser esticada para cobrir a altura toda: ela
   ocupa a altura que o próprio nativo sustenta na largura da tela e desce
   em fade para o campo navy, que é onde o texto assenta. Isso troca a
   dimensão que manda no `object-fit: cover` de ALTURA para LARGURA e derruba
   o fator sobre o nativo de 2,58x para 2,03x em 1920x1080 (medido).
   Só a partir de 900px: abaixo disso a faixa viraria um filete. */
@media (min-width: 900px) {
  .hero--fit .hero__media {
    bottom: auto;
    height: clamp(56%, calc(100vw / 2.2614), 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  }
}
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 132px 88px; width: 100%; }
.hero--bottom .hero__inner { justify-content: flex-end; }
.hero__title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.8rem); max-width: 17ch; }
@media (max-width: 480px) { .hero__title { font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.6rem); } }
/* A caixa do texto secundário precisa TERMINAR dentro do patamar forte do véu
   (55% da largura). Sem isso a caixa se estende até a zona de 0,26, e o pior
   caso do contraste é medido lá, não onde o glifo está. Foi o que reprovou o
   microcopy, que não tinha max-width nenhum. */
.hero__sub { margin-top: var(--s-6); max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-muted); }
.hero__actions { margin-top: var(--s-7); }
.hero__micro { margin-top: var(--s-5); max-width: 46ch; }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--s-7); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--bone-faint); max-width: 620px; }
.hero__stat { display: flex; flex-direction: column; gap: 4px; }
.hero__num { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1; letter-spacing: 0.02em; }
.hero__lab { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.hero__single { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--bone-faint); }
.hero--bottom .hero__title { max-width: 20ch; }

/* TELA BAIXA (10b) — a etapa 10 mediu só 1280x?? e 375x667 e concluiu que o
   banner de cookies estava resolvido. Estava errado: o que estoura o hero é
   a ALTURA da viewport, não a largura. Em 560x700, 600x800, 900x600 e
   1024x768 o conteúdo do hero não cabia no box com o banner ligado, o
   `justify-content:center` espalhava a sobra para os dois lados e os CTAs
   caíam embaixo do banner. Aqui o hero encolhe e passa a crescer para
   baixo, nunca para dentro do banner. */
@media (max-height: 820px) {
  .hero .hero__inner { justify-content: flex-start; padding-block: 96px 40px; }
  .hero--bottom .hero__inner { justify-content: flex-start; }
  .hero__title { font-size: clamp(1.45rem, 1rem + 2.2vw, 2.8rem); }
  .hero__sub { margin-top: var(--s-5); font-size: var(--fs-body); }
  .hero__actions { margin-top: var(--s-6); }
  .hero__micro { margin-top: var(--s-4); }
  .hero__stats, .hero__single { margin-top: var(--s-5); padding-top: var(--s-4); gap: var(--s-5) var(--s-6); }
}
@media (max-height: 820px) and (max-width: 900px) {
  .hero .hero__inner { padding-block: 84px 32px; }
}
/* TELEFONE PEQUENO DEITADO OU IPHONE SE (320x568): não cabem, ao mesmo
   tempo, título + subtítulo + dois CTAs + números + banner de cookies.
   A ordem de sacrifício é a do valor de conversão: os números e a microcopy
   do hero (que reaparecem no corpo da página) saem, os dois CTAs ficam lado
   a lado, e o hero devolve os ~160px que o banner precisa. Medido: o CTA
   primário volta a receber o clique na primeira tela. */
@media (max-height: 640px) and (max-width: 420px) {
  .hero .hero__inner { padding-block: 80px 24px; }
  .hero__title { font-size: clamp(1.3rem, 1rem + 2vw, 1.8rem); }
  .hero__sub { margin-top: var(--s-4); font-size: var(--fs-sm); }
  .hero__actions { margin-top: var(--s-5); }
  .hero__micro, .hero__stats, .hero__single { display: none; }
  .hero .btn-row { flex-wrap: nowrap; gap: var(--s-2); }
  .hero .btn-row .btn { flex: 1 1 0; width: auto; padding: 13px 12px; font-size: 0.7rem; letter-spacing: 0.08em; }
}
/* Com o banner ligado, o hero reserva a altura DELE em qualquer largura.
   Antes essa compensação só existia em @media (max-width:560px). */
/* O 56px não é estético: o `.hero__inner` é centrado, então este padding
   levanta o conteúdo pela METADE do valor. Com 24px a folga entre o CTA e o
   topo do banner ficava em 18px medidos, perto demais. Com 56px vai para ~34px. */
body.cookie-on .hero .hero__inner { padding-bottom: calc(56px + var(--cookie-h, 0px)); }
/* Viewport BAIXO é o caso que a compensação acima não resolve: o conteúdo do
   hero já passa da dobra, então o padding cresce para baixo em vez de empurrar
   o CTA para cima. Medido em 900x600: o banner ocupava 441..861 x 446..576 e o
   botão "Falar no WhatsApp" 349..613 x 440..499, ou seja o centro do CTA caía
   dentro do banner e o elementFromPoint devolvia o parágrafo dele.
   Abaixo de 760px de altura o banner vira barra rasa no rodapé e o hero abre
   mão dos números e do microcopy, que são reforço, não conversão. */
@media (max-height: 820px) {
  body.cookie-on .hero__stats, body.cookie-on .hero__micro { display: none; }
  /* O `.hero__inner` é centrado, então o padding-bottom da compensação só
     levanta o conteúdo pela METADE do seu valor: com 154px de padding o CTA
     subia 77px e ainda parava dentro da barra. Em tela baixa o hero passa a
     alinhar pelo topo e reserva a altura da barra embaixo, o que torna a
     posição do CTA determinística em vez de depender da altura do bloco. */
  body.cookie-on .hero .hero__inner,
  body.cookie-on .hero--bottom .hero__inner {
    justify-content: flex-start;
    padding-block: 96px calc(32px + var(--cookie-h, 0px));
  }
}

/* ---------- Foto de fundo em seção (`.sec--foto`) ----------
   Uso deliberado e restrito: as imagens de `assets/img/ia/` são RENDERS, não
   registro de obra. Como fundo, sob véu forte, elas dão atmosfera sem afirmar
   nada. NÃO usar render em card de portfólio, em caseband nem em qualquer slot
   que tenha nome de empreendimento ou metragem ao lado: ali a foto é prova, e
   prova gerada é o que derruba a confiança da página inteira.
   A `<img>` fica no DOM (e não em `background-image`) para carregar com
   `loading="lazy"`, ter `alt=""` de decorativa e respeitar o teto de peso. */
.sec--foto { position: relative; isolation: isolate; overflow: hidden; }
.sec--foto > .sec__foto {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.sec--foto > .sec__foto img { width: 100%; height: 100%; object-fit: cover; }
.sec--foto > .sec__foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11, 21, 32, 0.94) 0%, rgba(11, 21, 32, 0.86) 46%, rgba(11, 21, 32, 0.74) 100%),
    linear-gradient(to bottom, rgba(11, 21, 32, 0.62) 0%, rgba(11, 21, 32, 0.88) 100%);
}
.sec--foto > .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  /* em coluna única o texto ocupa a largura toda, então o véu fecha mais */
  .sec--foto > .sec__foto::after {
    background: linear-gradient(to bottom, rgba(11, 21, 32, 0.9) 0%, rgba(11, 21, 32, 0.94) 100%);
  }
}

/* ---------- Escopo (mosaico + bullets) ---------- */
.scope { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 12px; max-width: 520px; }
.mosaic .media:first-child { grid-row: 1 / span 2; }
.mosaic .media { aspect-ratio: 3 / 4; }
.mosaic .media:not(:first-child) { aspect-ratio: 1 / 1; }
.mosaic__note { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-muted); letter-spacing: 0.06em; }
.bullets { display: grid; gap: 0; margin-top: var(--s-7); }
.bullets li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--rule); }
.bullets li:last-child { border-bottom: 1px solid var(--rule); }
.bullets .mono { color: var(--ink-muted); padding-top: 3px; }
.limitbox { margin-top: var(--s-7); padding: var(--s-5) var(--s-6); background: var(--navy-700); border-left: 3px solid var(--bone); color: var(--bone); }
.limitbox strong { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-sm); }
.fitline { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--ink-muted); }

/* ---------- Timeline horizontal ---------- */
.tl { margin-top: var(--s-9); position: relative; }
.tl__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); position: relative; }
.tl__rail { position: absolute; left: 11px; right: 11px; top: 11px; height: 1px; background: var(--rule); }
.tl__rail .line { display: block; height: 100%; background: var(--ink-strong); transform: scaleX(1); transform-origin: left; }
.tl__step { position: relative; padding-top: var(--s-7); }
.tl__dot { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border: 1px solid var(--bone); background: var(--navy-900); display: grid; place-items: center; font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; }
.tl__name { display: block; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.22rem); }
.tl__desc { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-muted); }

@media (max-width: 900px) {
  .tl__track { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tl__rail { left: 11px; right: auto; top: 11px; bottom: 11px; height: auto; width: 1px; }
  .tl__rail .line { width: 100%; height: 100%; transform: scaleY(1); transform-origin: top; }
  .tl__step { padding-top: 0; padding-left: 52px; min-height: 22px; }
  .tl__dot { top: 2px; }
}

/* ---------- Lista editorial numerada ---------- */
.edlist { border-top: 1px solid var(--rule); }
.edlist li { border-bottom: 1px solid var(--rule); }
.edlist__row { display: grid; grid-template-columns: minmax(88px, 128px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding-block: var(--s-6); transition: padding-left var(--dur-2) var(--ease); }
.edlist__row:hover { padding-left: 12px; }
.edlist__key { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1.05rem; }
.edlist__val { color: var(--ink-muted); }
/* Variante de chave-frase. A coluna padrão (128px no máximo) foi desenhada para
   chave curta ("NR 18", "PGR"). No /portfolio/ a chave é uma frase inteira
   ("02 · Compatibilização de projetos") e a palavra sozinha pede ~239px na
   display em caixa alta, então quebrava no meio em TODA largura. Aqui a chave
   ganha coluna larga e, abaixo de 1100px, empilha sobre o valor. */
.edlist--phrase .edlist__row { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
@media (max-width: 1100px) {
  .edlist--phrase .edlist__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* Lista editorial simples (valores) */
.vlist { border-top: 1px solid var(--rule); max-width: 68ch; }
.vlist li {
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 54px 1fr; align-items: baseline; gap: var(--s-4);
  padding-block: var(--s-5);
  font-family: var(--font-display); font-weight: 700; font-stretch: 108%;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  transition: padding-left var(--dur-2) var(--ease);
}
.vlist li:hover { padding-left: 10px; }
.vlist .mono { color: var(--ink-muted); font-size: 0.7rem; }

/* ---------- Split alternado ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.split + .split { margin-top: clamp(48px, 6vw, 104px); padding-top: clamp(48px, 6vw, 104px); border-top: 1px solid var(--rule); }
.split__media { display: block; max-width: 520px; width: 100%; }
.split__media .media { aspect-ratio: 4 / 5; }
.split--alt .split__media { order: 2; margin-left: auto; }
.split__idx { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: clamp(2.4rem, 2rem + 2vw, 4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ink-muted); display: block; margin-bottom: var(--s-4); }
.split__body { margin-top: var(--s-5); color: var(--ink-muted); }
.split__marks { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 10px 22px; }
.split__marks li { font-size: var(--fs-sm); color: var(--ink-muted); }
.split__marks li::before { content: '·'; margin-right: 10px; opacity: .7; }
.split__cta { margin-top: var(--s-6); }
.split--mosaic .split__media { max-width: 340px; }
/* par de fotos lado a lado, reaproveitável fora do split (usado também no
   fio condutor e no perfil da LP Reformas para dar lastro visual) */
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
/* o max-width existe para o slot nunca passar do teto do MANIFESTO quando
   a coluna empilha em <=900px (medido: sem ele, servico-reforma-sala ia a
   400px contra teto de 294px) */
.mini .media { aspect-ratio: 1 / 1; }

/* ---------- Duo (aside fixo + conteúdo) ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.duo__aside { position: sticky; top: 128px; }
/* A coluna do aside é estreita (≈276px em 901px de viewport, ≈305px em 1014px).
   Na escala global do --fs-h2 a display de 112% de largura não cabe e o
   `overflow-wrap: break-word` do reset quebra DENTRO da palavra
   ("DOCUMENT/AÇÃO", "FORNECED/OR"). A palavra mais longa dos títulos de aside
   tem 12 caracteres ("Documentação"). O avanço MEDIDO na Archivo 700 a 112% de
   largura com tracking de 0,06em é 0,889em por caractere em caixa alta, ou seja
   a palavra pede 10,67em de linha (não os ~9,4em que a estimativa sugeria).
   Daí o teto de corpo: box ÷ 10,67. Nas larguras em que a coluna existe isso dá
   901px→25,9px · 1014px→28,6px · 1280px→36,7px · 1440px+→35,9px (o container
   trava em 1280). A escala abaixo fica ~2px abaixo do teto em toda a faixa. */
/* Escopada em min-width para NÃO precisar de contra-regra abaixo de 900px: um
   override em `.duo__aside .h2` venceria por especificidade a escala de
   `@media (max-width:460px) .h2`, e o título voltaria a quebrar no meio da
   palavra em 320px. Abaixo de 901px a coluna é cheia e a escala global serve. */
@media (min-width: 901px) {
    .duo__aside .h2, .duo__aside h2 { font-size: clamp(1.25rem, 0.35rem + 1.85vw, 2.1rem); }
}
@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__aside { position: static; }
}

/* ---------- Comparativo ---------- */
.cmp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: var(--s-8); }
.cmp__card { padding: clamp(26px, 3vw, 44px); position: relative; }
.cmp__card--mkt {
  background: var(--greige-800);
  border: 1px dashed var(--greige-300);
  opacity: .88;
  padding-block: clamp(24px, 2.7vw, 38px);
}
.cmp__card--brand { background: var(--navy-700); border: 1px solid var(--navy-600); box-shadow: var(--sh-2); }
.cmp__card--brand::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bone); }
.cmp__kind { display: block; margin-bottom: var(--s-3); }
.cmp__name { display: block; margin-bottom: var(--s-5); }
.cmp__card--mkt .cmp__name { font-size: 1.05rem; color: var(--greige-200); }
.cmp__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-block: var(--s-4); align-items: start; }
.cmp__card--mkt .cmp__list li { border-top: 1px dashed rgba(201, 196, 188, 0.34); font-size: var(--fs-sm); line-height: 1.5; color: var(--greige-200); text-decoration: line-through; text-decoration-color: rgba(201, 196, 188, 0.5); }
.cmp__card--brand .cmp__list li { border-top: 1px solid var(--rule); }
.cmp__list li:first-child { border-top: 0; }
.cmp__mark { font-family: var(--font-display); font-weight: 700; line-height: 1.4; text-decoration: none; display: inline-block; }
.cmp__card--mkt .cmp__mark { font-size: 0.78rem; opacity: .7; }
.cmp__card--brand .cmp__mark { color: var(--bone); }

/* Card do mercado sobre a superfície CLARA: o recuo deixa de ser "mais
   escuro" e passa a ser "lavado" (painel mais claro que a seção), que é
   como o material do cliente recua um bloco. A tinta continua legível:
   navy a 86% sobre o painel dá 5,74:1, medido. */
.surf-greige .cmp__card--mkt {
  background: rgba(233, 230, 225, 0.35);
  border-color: var(--greige-500);
  opacity: 1;
}
.surf-greige .cmp__card--mkt .cmp__name { color: rgba(29, 41, 55, 0.86); }
.surf-greige .cmp__card--mkt .cmp__list li {
  border-top-color: rgba(29, 41, 55, 0.26);
  color: rgba(29, 41, 55, 0.86);
  text-decoration-color: rgba(29, 41, 55, 0.55);
}

/* Variante 2 (LP Reformas): polaridade invertida */
.cmp--invert .cmp__card--mkt { background: var(--navy-900); border-color: var(--navy-500); }
.cmp--invert .cmp__card--mkt .cmp__list li { border-top-color: rgba(63, 76, 95, 0.7); color: rgba(233, 230, 225, 0.56); text-decoration-color: rgba(233, 230, 225, 0.4); }
.cmp--invert .cmp__card--mkt .cmp__name { color: rgba(233, 230, 225, 0.6); }
.cmp--invert .cmp__card--brand { background: var(--greige-100); border-color: var(--greige-300); color: var(--navy-700); }
.cmp--invert .cmp__card--brand::before { background: var(--navy-700); }
.cmp--invert .cmp__card--brand .cmp__list li { border-top-color: rgba(29, 41, 55, 0.18); }
.cmp--invert .cmp__card--brand .cmp__mark { color: var(--navy-700); }
.cmp--invert .cmp__card--brand .cmp__kind { color: var(--ink-muted); }   /* 0.6 dava 3,69:1, medido */

@media (max-width: 780px) {
  .cmp__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Portfólio: grade de cards ---------- */
.folio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.folio__card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); }
.folio__media { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--greige-500); }
/* SEM zoom no hover: o acervo veio de dentro de um PDF e foi ampliado 2x.
   Qualquer scale() aqui passa do teto de exibição do MANIFESTO e borra a
   foto. O afago de hover é o filete bone do motion.css (etapa 7). */
.folio__media img { width: 100%; height: 100%; object-fit: cover; }
.folio__count { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--navy-900); color: var(--bone); font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.folio__place { color: var(--ink-muted); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; }
.folio__ficha { font-size: var(--fs-sm); color: var(--ink-muted); }
.folio__status { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: auto; }
.folio__btn { position: static; font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); text-align: left; }
.folio__btn::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.folio__btn:focus-visible { outline: none; }
.folio__btn:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.folio__card:hover .folio__btn { color: var(--ink-strong); }

/* 3 colunas até 820px, 2 colunas até 560px, linha abaixo disso:
   os cortes existem para o slot nunca passar do teto do MANIFESTO. */
@media (max-width: 820px) { .folio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .folio__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .folio__card { display: grid; grid-template-columns: 38% 1fr; gap: var(--s-4); align-items: start; }
  .folio__media { grid-row: 1 / span 5; aspect-ratio: 3 / 4; }
  .folio__status { margin-top: 6px; }
}

/* ---------- Faixa de case (obra em destaque) ---------- */
.caseband { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.caseband__media { display: block; width: 100%; max-width: 480px; margin-left: auto; }
.caseband__media .media { aspect-ratio: 4 / 5; }
.caseband__data { display: flex; flex-wrap: wrap; gap: var(--s-7); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.caseband__num { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; display: block; }
.caseband__lab { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-top: 6px; display: block; }
.caseband__quote { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--ink-muted); max-width: 52ch; }

/* ---------- Bloco de case editorial (portfólio) ---------- */
.case { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--rule); }
.case__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.case__aside { position: sticky; top: 116px; }
.case__meta { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--ink-muted); }
.case__meta dt { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); margin-top: var(--s-4); }
.case__meta dd { margin: 4px 0 0; color: var(--ink); }
.case__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--s-5); max-width: 320px; }
.case__thumbs .media { aspect-ratio: 1 / 1; }
.case__block + .case__block { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.case__lab { display: block; margin-bottom: var(--s-3); }
.case__marks li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding-block: 7px; color: var(--ink-muted); }
.case__marks li::before { content: ''; width: 8px; height: 1px; background: var(--ink-muted); margin-top: 13px; }
.case__diff { font-size: var(--fs-lead); }
.case__highlight { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; }
/* O portfólio empilha 7 cases com a mesma anatomia. Alternar o lado da
   ficha a cada case quebra a monotonia sem encostar na copy (o padrão
   Desafio/Solução/Resultado/Diferencial é fiel ao PDF do cliente). */
.case--flip .case__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.case--flip .case__aside { order: 2; }
.case--flip .case__thumbs { margin-left: auto; }
@media (max-width: 900px) {
  .case__grid, .case--flip .case__grid { grid-template-columns: minmax(0, 1fr); }
  .case__aside, .case--flip .case__aside { position: static; order: 0; }
  .case--flip .case__thumbs { margin-left: 0; }
}

/* ---------- Matriz hairline (2x2) ---------- */
.matrix { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s-8); border-top: 1px solid var(--rule); }
.matrix > * { padding: var(--s-6) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--rule); }
.matrix > *:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: var(--s-6); }
.matrix > *:nth-child(even) { padding-left: var(--s-6); }
.matrix p { color: var(--ink-muted); margin-top: 10px; }
@media (max-width: 700px) {
  .matrix { grid-template-columns: minmax(0, 1fr); }
  .matrix > * { padding: var(--s-5) 0; border-right: 0 !important; padding-left: 0 !important; }
}

/* ---------- Colunas com letra-índice ---------- */
.abc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: var(--s-8); }
.abc__col { border-top: 2px solid var(--ink-strong); padding-top: var(--s-5); }
.abc__letter { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); line-height: 1; display: block; margin-bottom: var(--s-4); }
.abc__txt { color: var(--ink-muted); }
@media (max-width: 820px) { .abc { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }

/* ---------- Fio condutor (stepper vertical com aside) ---------- */
.fio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.fio__aside { position: sticky; top: 120px; }
.fio__meter { margin-top: var(--s-6); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; font-size: var(--fs-sm); color: var(--ink-muted); }
.fio__list { position: relative; padding-left: 42px; }
.fio__line { position: absolute; left: 10px; top: 12px; bottom: 12px; width: 1px; background: var(--rule); }
.fio__line .line { display: block; width: 100%; height: 100%; background: var(--ink-strong); transform: scaleY(1); transform-origin: top; }
.fio__item { position: relative; padding-block: var(--s-6); border-bottom: 1px solid var(--rule); }
.fio__item:first-child { padding-top: 0; }
.fio__item::before { content: ''; position: absolute; left: -37px; top: 6px; width: 9px; height: 9px; background: var(--ink-strong); }
.fio__item:first-child::before { top: 6px; }
.fio__desc { margin-top: 8px; color: var(--ink-muted); }
@media (max-width: 900px) { .fio { grid-template-columns: minmax(0, 1fr); } .fio__aside { position: static; } }

/* ---------- Números (lastro) ---------- */
.lastro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lastro__nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.lastro__nums--one { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.lastro__num { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); line-height: 0.95; letter-spacing: 0.01em; display: block; }
.lastro__lab { display: block; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--ink-muted); }
.marks { display: grid; gap: 0; }
.marks li { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.marks li::before { content: ''; width: 10px; height: 10px; border: 1px solid var(--ink-muted); margin-top: 8px; }
.marks li:first-child { border-top: 1px solid var(--rule); }
@media (max-width: 820px) { .lastro { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fita de 4 (NRs) ---------- */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-8); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.strip > * { padding: var(--s-6) var(--s-5); border-left: 1px solid var(--rule); }
.strip > *:first-child { border-left: 0; padding-left: 0; }
.strip p { color: var(--ink-muted); font-size: var(--fs-sm); margin-top: 10px; }
@media (max-width: 900px) { .strip { grid-template-columns: 1fr 1fr; } .strip > *:nth-child(odd) { border-left: 0; padding-left: 0; } .strip > *:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 560px) { .strip { grid-template-columns: minmax(0, 1fr); } .strip > * { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--rule); } .strip > *:last-child { border-bottom: 0; } }

/* ---------- FAQ ---------- */
.faq--two { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.faq__aside { position: sticky; top: 120px; }
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { display: flex; width: 100%; gap: var(--s-5); align-items: baseline; justify-content: space-between; padding-block: var(--s-5); text-align: left; }
.faq__qt { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.12rem); line-height: 1.3; }
.faq__ico { flex: none; width: 18px; height: 18px; position: relative; }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; background: var(--ink-strong); transition: transform var(--dur-2) var(--ease); }
.faq__ico::before { left: 0; right: 0; top: 8px; height: 1.5px; }
.faq__ico::after { top: 0; bottom: 0; left: 8px; width: 1.5px; }
.faq__q[aria-expanded="true"] .faq__ico::after { transform: scaleY(0); }
.faq__a { display: none; padding-bottom: var(--s-6); color: var(--ink-muted); max-width: 68ch; }
.faq__item.is-open .faq__a { display: block; }
.faq__num { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--ink-muted); font-weight: 600; margin-right: var(--s-4); }
.faq--single { max-width: 860px; margin-inline: auto; }
.faq--single .faq__q { padding-block: var(--s-6); }
@media (max-width: 900px) { .faq--two { grid-template-columns: minmax(0, 1fr); } .faq__aside { position: static; } }

/* ---------- CTA final ---------- */
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.steps { position: relative; padding-left: 40px; margin-top: var(--s-7); }
.steps__line { position: absolute; left: 9px; top: 10px; bottom: 10px; width: 1px; background: var(--rule); }
.steps__line .line { display: block; width: 100%; height: 100%; background: var(--ink-strong); transform: scaleY(1); transform-origin: top; }
.steps li { position: relative; padding-block: var(--s-4); }
.steps li::before { content: ''; position: absolute; left: -35px; top: 22px; width: 9px; height: 9px; border: 1px solid var(--ink-strong); background: var(--navy-900); }
.contact { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: grid; gap: var(--s-4); }
.contact dt { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.contact dd { margin: 4px 0 0; }
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: var(--s-8); }
.route { padding: clamp(26px, 3vw, 44px); background: var(--navy-700); border-top: 2px solid var(--bone); display: flex; flex-direction: column; gap: var(--s-5); }
.route p { color: var(--ink-muted); }
.route .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 820px) { .cta__grid, .routes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mídia larga e sobreposição ---------- */
.wide-media { display: block; width: 100%; max-width: 940px; }
.wide-media .media { aspect-ratio: 16 / 9; }
.overlap { position: relative; }
.overlap__card {
  background: var(--navy-700); border-top: 2px solid var(--bone);
  padding: clamp(26px, 3.2vw, 52px); max-width: 520px;
  margin: -88px 0 0 auto; position: relative; z-index: 2;
}
.overlap__card p { color: var(--ink-muted); margin-top: var(--s-4); }
@media (max-width: 900px) { .overlap__card { margin: -40px 0 0 0; max-width: none; } }

/* ---------- Passos horizontais ---------- */
.hsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); border-top: 1px solid var(--rule); }
.hsteps li { padding-top: var(--s-6); position: relative; }
.hsteps li::before { content: ''; position: absolute; top: -2px; left: 0; width: 38px; height: 3px; background: var(--ink-strong); }
.hsteps .mono { display: block; color: var(--ink-muted); margin-bottom: 10px; }
@media (max-width: 760px) {
  .hsteps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hsteps li { padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
  .hsteps li::before { display: none; }
}

/* ---------- Footer ---------- */
.ft { background: var(--navy-900); padding-block: var(--s-9) var(--s-6); border-top: 1px solid var(--bone-faint); }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr)); gap: var(--s-7); }
.ft__logo img { width: 108px; height: auto; }
.ft__txt { margin-top: var(--s-5); color: var(--ink-muted); font-size: var(--fs-sm); max-width: 40ch; }
.ft__h { display: block; margin-bottom: var(--s-4); }
.ft__list li { padding-block: 7px; }
.ft__list a { color: var(--ink-muted); font-size: var(--fs-sm); transition: color var(--dur-1) var(--ease); }
.ft__list a:hover { color: var(--bone); }
.ft__bar { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--bone-faint); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-muted); }
@media (max-width: 900px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(11, 21, 32, 0.96); display: none; }
.lb.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) var(--gutter); }
.lb__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-sm); }
.lb__count { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.16em; color: var(--ink-muted); }
.lb__stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
/* TETO POR FOTO (10b). Com `width:auto` o `max-width` só encolhe, então a
   foto abria no tamanho ENTREGUE, que é por definição 2x o teto do
   MANIFESTO: em 1920x1080, 37 dos 41 arquivos abriam acima do teto, até
   2,0x. Agora cada foto entra com o seu próprio `--teto`, escrito pelo
   app.js a partir do `data-gallery-caps` (que sai do _caps.json). O 1100px
   continua como rede para o caso de a galeria não declarar teto. */
.lb__stage img { max-width: min(100%, var(--teto, 1100px)); max-height: 72vh; width: auto; height: auto; object-fit: contain; }
.lb__nav { display: flex; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-5) var(--gutter) var(--s-7); }
.lb__btn { width: 52px; height: 52px; border: 1px solid var(--bone-faint); display: grid; place-items: center; font-size: 1.2rem; }
.lb__btn:hover { border-color: var(--bone); }
.lb__close { width: 52px; height: 52px; border: 1px solid var(--bone-faint); display: grid; place-items: center; font-size: 1.3rem; }
body.is-locked { overflow: hidden; }

/* ---------- Cookies ----------
   z-index 66: acima do scrim (65) e ABAIXO do off-canvas (70). Com 80 o
   banner ficava por cima do menu aberto e o `elementFromPoint` no centro do
   "Solicitar orçamento" do menu devolvia ASIDE.cookie em 320x568 e 375x667:
   o único CTA do menu mobile era inclicável. Além do empilhamento, o banner
   SOME enquanto o menu está aberto, para não disputar a tela pequena. */
/* Canto inferior ESQUERDO, por decisão do usuário em 04/08/2026.
   Contraria a armadilha 5 do vault, que manda o banner para a direita
   justamente porque o CTA do hero fica à esquerda. Só é seguro porque o
   conflito real acontece em viewport BAIXO, e ali o banner já vira barra de
   rodapé de largura cheia (ver os dois blocos de @media mais abaixo), onde o
   lado deixa de existir. Em viewport alto o CTA para bem acima do banner.
   Medido em 11 viewports depois da mudança: nenhum CTA interceptado. */
.cookie {
  position: fixed; left: var(--s-5); bottom: var(--s-5); z-index: 66;
  width: min(420px, calc(100vw - 40px));
  background: var(--navy-900); border: 1px solid var(--bone-faint);
  padding: var(--s-5); display: none;
}
.cookie.is-on { display: block; }
body.menu-open .cookie.is-on { display: none; }
.cookie p { font-size: var(--fs-sm); color: var(--ink-muted); }
.cookie a { text-decoration: underline; }
.cookie__row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.cookie .btn { padding: 12px 20px; font-size: var(--fs-xs); }
@media (max-width: 560px) {
  .cookie { right: 0; left: 0; bottom: 0; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; }
  .cookie__row .btn { flex: 1 1 0; width: auto; justify-content: center; }
}
/* Em tela baixa o banner encolhe junto com o hero: cada pixel que ele
   devolve é pixel de CTA visível na primeira tela. Medido em 320x568: com o
   banner de 211px o CTA primário do hero ficava 100% coberto; com 144px e o
   hero compactado (abaixo) ele volta para a primeira tela. */
/* COMPACTO SEMPRE, não só em tela baixa. Com o banner no canto inferior
   ESQUERDO (decisão do usuário), a altura dele passou a ser o que decide se ele
   invade a faixa de CTA, porque o CTA vive na coluna da esquerda. Medido em
   1440x900 com a caixa de 420px: o banner ia de y 686 a 876 e o CTA primário de
   669 a 728, então o centro do botão caía dentro dele. Compacto e mais estreito,
   o banner encolhe e o seu topo desce para baixo do CTA. */
.cookie { padding: var(--s-3) var(--s-4); width: min(340px, calc(100vw - 40px)); }
.cookie p { font-size: var(--fs-xs); line-height: 1.45; }
.cookie__row { margin-top: var(--s-3); gap: var(--s-2); }
.cookie .btn { padding: 9px 14px; font-size: 0.68rem; }
/* BARRA HORIZONTAL em tela baixa e larga. Este é o caso que mais quebrava:
   medido em 900x600, o banner ocupava 446..576 e o CTA primário do hero
   452..511, então o elementFromPoint no centro do botão devolvia o parágrafo
   do banner. Em caixa vertical o banner tem 130px de altura; deitado, o texto
   e os botões dividem a mesma linha e ele cai para ~62px, o que tira a barra
   inteira de cima da faixa de CTA. */
@media (max-height: 820px) and (min-width: 561px) {
  .cookie {
    right: 0; left: 0; bottom: 0; width: 100%;
    border-left: 0; border-right: 0; border-bottom: 0;
    display: none;
    padding: var(--s-3) var(--gutter);
  }
  .cookie.is-on { display: flex; align-items: center; gap: var(--s-5); }
  .cookie p { flex: 1 1 auto; margin: 0; }
  .cookie__row { margin-top: 0; flex: 0 0 auto; flex-wrap: nowrap; }
}
/* Tela pequena E baixa (iPhone SE e similares): não dá para deitar a barra,
   então o ganho vem de dois lados. O banner encolhe ao mínimo legível e os
   dois CTAs do hero passam a dividir a mesma linha, o que devolve ~75px. */
@media (max-width: 560px) and (max-height: 700px) {
  .cookie { padding: 10px var(--s-4); }
  .cookie p { font-size: 0.72rem; line-height: 1.38; }
  .cookie__row { margin-top: var(--s-2); }
  .cookie .btn { padding: 8px 12px; font-size: 0.66rem; }
  body.cookie-on .hero .btn-row { flex-wrap: nowrap; gap: var(--s-2); }
  body.cookie-on .hero .btn-row .btn { flex: 1 1 0; width: auto; padding: 13px 10px; font-size: 0.68rem; letter-spacing: 0.06em; }
  body.cookie-on .hero .hero__inner { padding-block: 84px 16px; }
}

/* ---------- Formulários institucionais ---------- */
.form { display: grid; gap: var(--s-5); max-width: 720px; margin-top: var(--s-7); }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.field input, .field textarea, .field select {
  background: rgba(255, 255, 255, 0.46); border: 1px solid var(--rule);
  border-radius: var(--r-0); padding: 14px 16px; color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink-strong); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--fs-sm); color: var(--ink-muted); }
.consent input { width: 18px; height: 18px; margin-top: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { font-size: var(--fs-sm); }
@media (max-width: 620px) { .field--row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Página legal ---------- */
.legal { max-width: 76ch; }
.legal h2 { margin-top: var(--s-8); }
.legal h3 { margin-top: var(--s-6); }
.legal p, .legal li { color: var(--ink-muted); }
.legal p { margin-top: var(--s-4); }
.legal ul { margin-top: var(--s-4); display: grid; gap: 8px; }
.legal ul li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.legal ul li::before { content: ''; width: 8px; height: 1px; background: var(--ink-muted); margin-top: 13px; }

/* ---------- Loader ---------- */
/* ---------- Ganchos de animação (etapa 7 liga a camada rica) ----------
   Nesta etapa NADA fica escondido: os hooks existem, o conteúdo aparece. */
[data-reveal] { will-change: auto; }

/* ---------- Utilitários ---------- */
.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: 12px; top: -60px; z-index: 100; background: var(--bone); color: var(--navy-900); padding: 12px 18px; transition: top var(--dur-1) var(--ease); }
.skip:focus { top: 12px; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

@media (max-width: 900px) {
  .scope, .split, .caseband, .cta__grid { grid-template-columns: minmax(0, 1fr); }
  .split--alt .split__media { order: 0; margin-left: 0; }
  .caseband__media { margin-left: 0; }
  .hero__inner { padding-block: 120px 72px; }
}
@media (max-width: 560px) {
  .lastro__nums { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; justify-content: center; }
  .btn-row .btn { flex: 1 1 100%; }
}


/* ---------- Merlin ----------
   O botão flutuante do Merlin nasce azul padrão; aqui ele recebe o navy da
   marca. ATENÇÃO ao que isso NÃO faz: o ícone servido pelo Merlin é um logo
   do WhatsApp verde e OPACO, ocupando 64px dentro de um botão de 72px, então
   a cor da marca aparece só como um aro de ~21% da área. O botão fica verde
   com borda navy, e ele PARECE WhatsApp sem abrir o WhatsApp: abre o popup.
   Trocar o ícone é no painel do gomerlin, não daqui. */
.merlin-button { background: var(--navy-700) !important; }


/* ---------- Variante B do teste A/B `hero-layout` ----------
   Classe PRÓPRIA: não sobrescreve nada da variante A, para o teste isolar
   layout e só layout. A copy é idêntica byte a byte; o que muda é o hero
   deixar de ser full-bleed com foto de fundo e virar duas colunas.
   ⚠️ Contraria a preferência fixa do usuário (hero full-bleed e fullscreen,
   nunca painel lateral com foto recortada). É deliberado: o teste existe para
   questionar essa premissa. Se B vencer, é decisão de padrão, não só desta LP.

   CORRIGIDO depois de medir: tirar a foto do modo absoluto sem PRENDER a <img>
   fez a imagem impor o tamanho intrínseco de 2560x1429. Resultado medido:
   overflow de 122px em 375px de largura e hero com 5334px de altura. A <img>
   volta a ser absoluta dentro de um wrapper que tem tamanho próprio: razão de
   aspecto no empilhado, altura da linha do grid no desktop. */
.hero--split { min-height: auto; background: var(--navy-900); display: block; }
.hero--split .hero__media {
  position: relative; inset: auto; display: block; overflow: hidden;
  width: 100%; background: var(--navy-900);
}
.hero--split .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* na B o véu sai: a foto tem coluna própria e não carrega texto por cima */
.hero--split .hero__media::after { display: none; }
.hero--split .hero__split { display: grid; gap: 0; padding: 0; max-width: none; width: 100%; }
.hero--split .hero__col { min-width: 0; }

@media (min-width: 901px) {
  .hero--split .hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
  .hero--split .hero__col {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(120px, 14vh, 176px) clamp(56px, 7vh, 96px);
    padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) clamp(40px, 5vw, 80px);
  }
  .hero--split .hero__media { grid-column: 2; grid-row: 1; height: 100%; }
}
@media (max-width: 900px) {
  /* ARMADILHA JÁ PAGA: align-items:center com min-height:100vh faz o conteúdo
     mais alto que a viewport transbordar PARA CIMA, por baixo do header fixo,
     ignorando o padding-top. Empilhado é flex-start e altura automática. */
  .hero--split .hero__split { grid-template-columns: minmax(0, 1fr); align-items: flex-start; }
  .hero--split .hero__media { order: -1; aspect-ratio: 16 / 10; }
  .hero--split .hero__col { padding-inline: var(--gutter); padding-block: 56px 72px; }
}