/* ==========================================================================
   Vetorial360 Engenharia — Layout das LPs (etapa 6, front-end)
   Depende de /assets/css/tokens.css + /assets/css/componentes.css (DS aprovado).
   Nenhum hex solto: só var(--...). Nenhum segundo sistema de cores.
   --------------------------------------------------------------------------
   Regras de aceite embutidas:
   - html{overflow-x:clip} (NUNCA overflow-x no body — quebra position:sticky)
   - img{height:auto} no reset (aspect-ratio x atributos width/height)
   - todo wrapper de midia em display:block
   - scroll nativo + scroll-behavior:smooth (tokens.css). Sem momentum/inercia.
   - banner de cookies a ESQUERDA (componentes.css) e fora do caminho de CTA
   ========================================================================== */

/* ==========================================================================
   0. BASE / RESET COMPLEMENTAR
   ========================================================================== */
html {
  overflow-x: clip;          /* nunca no body: criaria contexto de scroll e mataria o sticky */
  scroll-padding-top: 96px;  /* header fixo */
}
body { margin: 0; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }        /* libera o aspect-ratio dos atributos width/height */

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link: some da tela, mas aparece no foco de teclado */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 80;
  background: var(--surface-inverse-deep);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus-visible { top: var(--space-4); }

.stack > * + * { margin-top: var(--space-5); }

/* ==========================================================================
   1. BASELINE DE MOVIMENTO (a camada rica e da etapa 7)
   Ganchos deixados prontos: [data-reveal], [data-delay], [data-parallax],
   .hero-media, [data-underline], [data-hscroll], [data-count], [data-timeline]
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 620ms var(--ease-out),
              transform 720ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .06s; }
[data-delay="2"] { transition-delay: .12s; }
[data-delay="3"] { transition-delay: .18s; }
[data-delay="4"] { transition-delay: .24s; }

/* FAIL-SAFE 1 — sem JS, nada de conteudo fica invisivel para sempre */
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Elemento sticky nunca entra por transform (salta ao colar) — so opacidade */
[data-reveal].is-sticky-safe { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   2. HEADER — logo original (fundo transparente, nunca caixa branca) + CTA
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: var(--border-width-hairline) solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
  padding-block: var(--space-3);
}
.header__logo { display: block; }
.header__logo img { width: 208px; height: 41px; }
.header__cta { white-space: nowrap; }
/* Menu de âncoras (desktop). Some no mobile (≤980px): a LP fica com logo + CTA,
   o usuário rola. Texto navy (11:1); indicador ativo é sublinhado navy que
   desenha — nunca dourado como texto/indicador (dourado no branco = 2,09:1). */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
  margin-right: var(--space-8);
}
.header__nav a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--brand);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  white-space: nowrap;
}
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: var(--brand);
  transition: right var(--duration-base) var(--ease-out);
}
.header__nav a:hover::after,
.header__nav a:focus-visible::after,
.header__nav a.is-active::after { right: 0; }
.header__nav a.is-active { font-weight: var(--weight-semibold); }
@media (max-width: 980px) { .header__nav { display: none; } }

/* Âncora não fica escondida sob o header fixo (--header-h medido em app.js). */
section[id] { scroll-margin-top: calc(var(--header-h, 80px) + var(--space-4)); }

@media (max-width: 599px) {
  .header__logo img { width: 152px; height: 30px; }
  .header__cta { font-size: var(--text-base); padding: var(--space-3) var(--space-5); }
  .header__inner { min-height: 64px; }
}

/* ==========================================================================
   3. SLOT DE IMAGEM — placeholder tecnico com as dimensoes FINAIS
   O arquivo .webp definitivo esta em data-img-final (nomes de imagens/manifesto.json).
   Trocar depois = so trocar o src pelo caminho do data-img-final.
   ========================================================================== */
.media { display: block; position: relative; overflow: hidden; } /* wrapper SEMPRE display:block */
.media img { width: 100%; height: auto; object-fit: cover; }
.media--16x9 img { aspect-ratio: 16 / 9; }
.media--4x3  img { aspect-ratio: 4 / 3; }
.media--3x2  img { aspect-ratio: 3 / 2; }
.media--framed {
  border-radius: var(--radius-lg);
  border: var(--border-width-hairline) solid var(--border);
  box-shadow: var(--shadow-md);
}
.media__note { /* etiqueta do slot: some sozinha quando a foto real entrar */
  position: absolute;
  left: var(--space-4); bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-inverse-muted);
  background: rgba(14, 23, 40, .58);
  border: var(--border-width-hairline) solid var(--border-inverse);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  pointer-events: none;
}

/* ==========================================================================
   4. HERO — full-bleed 100dvh, imagem de fundo + overlay navy (componentes.css)
   Conteudo centrado na vertical DE PROPOSITO: o banner de cookies mora no
   canto inferior ESQUERDO, entao nenhum CTA pode ficar ali embaixo.
   ========================================================================== */
.hero {
  align-items: center;
  box-sizing: border-box;
  /* O header é sticky mas fica NO FLUXO: um hero de 100dvh começa abaixo dele e
     transborda a primeira tela exatamente pela altura do header (medido: header
     77px + hero 325px num viewport de 322px). Descontar o header é o que faz o
     hero caber de fato na dobra. --header-h é medido em app.js. */
  min-height: calc(100dvh - var(--header-h, 84px));
  /* Reserva a faixa do banner de cookies. Só surte efeito porque o hero agora
     CABE na dobra: enquanto ele crescia além de 100dvh, o padding só o deixava
     mais alto e o CTA continuava debaixo do banner. Com border-box, o conteúdo
     centraliza na caixa ACIMA do banner — CTA e faixa de números fora do
     alcance dele por construção. Sem banner, --cookie-clearance é 0. */
  padding-bottom: var(--cookie-clearance);
}
/* --cookie-clearance é medido por app.js (altura real do banner + folga), mas
   NÃO é consumido como padding-bottom do hero: o hero é min-height:100dvh e
   cresce com o conteúdo, então o padding só o deixa mais alto sem tirar o CTA
   de baixo do banner (medido: hero 1141px num viewport de 720px, sobreposição
   em 99% — tentativa revertida). Fica só como var disponível, sem uso. */
:root { --cookie-clearance: 0px; }
.hero__media img { height: 100%; }            /* vence o img{height:auto} do reset */
.hero .container { width: 100%; position: relative; z-index: 2; }
/* O header é sticky (fica no fluxo), então o hero NÃO precisa de padding extra
   para escapar dele. Largura em px, não em `ch`: `ch` aqui é medido no
   font-size do container (16px) e estrangulava o H1 de 88px em 6 linhas. */
.hero__content {
  padding-block: var(--space-16);
  max-width: min(100%, 1080px);
}
.hero__eyebrow { color: var(--text-inverse); }
.hero__lede { color: var(--text-inverse-muted); }
.hero__micro {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  color: var(--text-inverse-muted);
}
.hero__actions { align-items: center; }

/* Abertura editorial do hero: a linha identifica o contexto B2B antes do H1 e
   o bloco de resposta técnica fica associado ao CTA, sem virar um card. */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}
.hero__kicker span {
  width: 40px;
  height: 3px;
  flex: 0 0 auto;
  background: var(--accent);
}
.hero__title {
  max-width: 18ch;
  text-wrap: balance;
}
.hero__lede {
  max-width: 58ch;
  line-height: 1.55;
}
.hero__actions--brief {
  gap: var(--space-6);
}
.hero__actions--brief .hero__micro {
  position: relative;
  max-width: 31ch;
  margin: 0;
  padding-left: var(--space-5);
  border-left: 1px solid var(--border-inverse);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.hero__actions--brief .hero__micro strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

@media (min-width: 900px) {
  .hero {
    min-height: calc(100dvh - var(--header-h, 76px));
    align-items: center;
  }
  .hero__media img { object-position: center 46%; }
  .hero__overlay {
    background:
      linear-gradient(90deg,
        rgba(14,23,40,.92) 0%,
        rgba(14,23,40,.76) 38%,
        rgba(14,23,40,.26) 70%,
        rgba(14,23,40,.08) 100%),
      linear-gradient(180deg,
        rgba(14,23,40,.14) 0%,
        rgba(14,23,40,.18) 58%,
        rgba(14,23,40,.54) 100%);
  }
  .hero__title {
    font-size: clamp(3.75rem, 5.15vw, 5.4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
  }
  .hero__lede { margin-top: var(--space-8); }
  .hero__actions { margin-top: var(--space-10); }
}

@media (max-width: 599px) {
  .hero__kicker {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: 11px;
    letter-spacing: .09em;
  }
  .hero__kicker span { width: 24px; height: 2px; }
  .hero__actions--brief {
    align-items: flex-start;
    gap: var(--space-4);
  }
  .hero__actions--brief .hero__micro {
    flex-basis: 100%;
    max-width: 34ch;
    padding-left: var(--space-4);
  }
}

/* Faixa de numeros embutida no hero (LP 1) */
.hero__stats {
  position: relative;
  z-index: 2;
  display: grid;
  /* 4 credenciais do cliente (Sobre nós dissolvido na faixa de números do hero,
     ver §20). 4 col no desktop, 2 no tablet, 1 no mobile — nunca órfão. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-width-hairline) solid var(--border-inverse);
}
.hero__stats .stat__number {
  color: var(--accent);
}
/* Sobre navy o número já é o gradiente: o tique é da variante on-light do DS
   e aqui só duplicaria o acento (e comeria 16px de altura do hero). */
.hero__stats .stat__number::before { display: none; }
.hero__stats .stat__label { color: var(--text-inverse-muted); max-width: 30ch; }

@media (max-width: 899px) {
  .hero__content { padding-block: var(--space-12); }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
}
@media (max-width: 599px) {
  /* 2x2 em vez de 4 empilhadas: encurta o hero em telas altas/estreitas (evita
     o CTA ser empurrado para baixo do banner em 390x844) e fica mais equilibrado. */
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .hero__stats .stat__number::before { display: none; }
}

/* Mobile: num celular estreito o título e a subhead quebram em muitas linhas, e
   o conteúdo do hero fica mais alto que a tela. Duas medidas: (1) alinhar ao
   TOPO para o CTA ficar no alto, bem acima do banner de cookies; (2) hero mais
   compacto que no desktop — subhead menor (mobile pede isso) e menos padding —
   para o CTA não ser empurrado atrás do banner. O desktop segue airy/bold. */
@media (max-width: 599px) {
  .hero { align-items: flex-start; }
  .hero__content { padding-block: var(--space-8) var(--space-6); }
  .hero__lede { font-size: var(--text-base); margin-top: var(--space-4); max-width: 42ch; }
  .hero__actions { margin-top: var(--space-6); }
  .hero__micro { margin-top: var(--space-3); }
}

/* Viewport BAIXO (altura, não largura): quando a tela é curta, o hero+faixa de
   números não cabem na dobra e o hero cresce além de 100dvh. Aperta título,
   margens e a faixa de números — SÓ em telas realmente baixas. O gatilho é
   760px (não 900): a 900 quase todo monitor entrava no tier e o hero saía
   MENOR que o título de seção (bug de 18/08). Aqui o hero compacto ainda fica
   maior que a seção. */
@media (max-height: 755px) {
  /* Compactação SUAVE (gatilho baixado 760->700; antes esmagava o hero em quase
     todo laptop). Agora que o hero não tem mais os 4 números, ele é curto e não
     precisa apertar tanto: o título encolhe um pouco, mas a subhead segue
     legível (~18px, não 14) e o respiro entre itens é mantido. */
  .hero__content { padding-block: var(--space-5); }
  .hero__title { font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem); line-height: var(--leading-snug); }
  .hero__lede { font-size: var(--text-lg); margin-top: var(--space-4); max-width: 60ch; }
  .hero__actions { margin-top: var(--space-6); }
  .hero__micro { margin-top: var(--space-3); }
  .hero__stats {
    margin-top: 2px;
    padding-top: var(--space-1);
    gap: var(--space-3);
  }
  .hero__stats .stat { gap: 2px; }
  .hero__stats .stat__number { font-size: 1.25rem; }
  .hero__stats .stat__label { font-size: 12px; line-height: 1.35; }
}
@media (max-height: 755px) and (max-width: 599px) {
  /* Celular retrato de altura média/baixa: título e subhead quebram em muitas
     linhas e empurram o CTA para baixo do banner. Este bloco é o mais específico
     (altura E largura), então é aqui que o hero mobile compacta de verdade:
     menos padding no topo, subhead menor e gaps justos — mantendo H1, subhead e
     CTA acima do banner. */
  .hero__content { padding-block: var(--space-6) var(--space-5); }
  .hero__title { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 2.5rem); }
  .hero__lede { font-size: var(--text-sm); margin-top: var(--space-3); max-width: 40ch; }
  .hero__actions { margin-top: var(--space-5); }
  .hero__micro { margin-top: var(--space-2); }
}

/* Viewport MUITO baixo (<=520px de altura: celular deitado, janela achatada).
   Aqui não existe arranjo em que hero cheio + banner de cookies caibam sem se
   sobrepor: medido a 726x322, o conteúdo do hero já comprimido dá 310px e o
   banner 118px — 310+118+folgas > 322. Como o CTA do Merlin é o único caminho
   de conversão, ele tem prioridade sobre a faixa de números e o microcopy, que
   saem de cena nessa faixa de altura. H1, subhead e CTA continuam visíveis. */
@media (max-height: 660px) {
  .hero__stats,
  .hero__micro { display: none; }
  .hero__content { padding-block: var(--space-2); }
  .hero__title { font-size: clamp(1.5rem, 1.05rem + 2.4vw, 2.5rem); } /* compacto mas ainda >= titulo de secao em paisagem */

  /* Tela muito baixa (paisagem de celular): o card vira UMA LINHA (texto a
     esquerda, botoes a direita) para nao roubar altura do hero. Some o titulo
     e o respiro aperta — volta a ~70px em vez dos ~126px do card empilhado. */
  .cookie-banner {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: min(560px, calc(100vw - var(--space-4) - var(--space-8)));
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .cookie-banner__title { display: none; }
  .cookie-banner p:not(.cookie-banner__title) { flex: 1 1 200px; font-size: 12px; line-height: 1.35; }
  .cookie-banner__actions { margin-top: 0; flex: 0 0 auto; }
  .cookie-banner .btn { font-size: 13px; padding: var(--space-2) var(--space-4); }

  /* Agora que a compactação faz o conteúdo do hero CABER no viewport, a reserva
     de espaço passa a funcionar — o que não acontecia no hero cheio, onde o
     hero crescia além de 100dvh e o padding só o deixava mais alto (ver nota da
     seção 4). Com border-box, o conteúdo centraliza na caixa ACIMA do banner,
     então o CTA não fica embaixo dele por construção, não por acaso.
     `--cookie-clearance` é medido em app.js (altura real do banner + folga). */
  /* Header comprimido: 84px num viewport de 323px é 26% da tela só de cabeçalho.
     Aqui ele encolhe para sobrar altura para H1 + subhead + CTA acima do banner. */
  .header__inner { padding-block: var(--space-2); }
  .header__logo img { height: 26px; width: auto; }
  .header__cta { font-size: 14px; padding: var(--space-2) var(--space-4); }

  .hero__title { line-height: 1.15; }
  .hero__lede { font-size: 12px; line-height: 1.35; }
  /* Só o respiro encolhe. NÃO reduzir font-size/weight do .btn--primary: ele
     precisa de >=18,66px em peso 700 para passar WCAG na ponta laranja do
     gradiente (4,34:1 só vale como texto grande). Reduzir aqui reprovaria. */
  .hero__actions .btn { padding: var(--space-2) var(--space-5); }
}

/* Altura <=400px (celular deitado pequeno). Aqui a conta simplesmente não fecha:
   medido a 726x322 — header 77 + H1 64 + subhead 34 + CTA 48 = 223, e o banner
   ocupa de 222 para baixo. Não existe ajuste de respiro que caiba os quatro.
   Como o CTA do Merlin é o ÚNICO caminho de conversão da página, ele tem
   prioridade e o subhead sai nessa faixa. H1 e CTA continuam inteiros, e o
   subhead volta assim que houver 400px de altura. */
@media (max-height: 400px) {
  .hero__lede { display: none; }
}

/* ==========================================================================
   5. CABECALHO DE SECAO
   ========================================================================== */
.section__head { max-width: 62ch; }
.section__head--wide { max-width: none; }
.section__head + * { margin-top: var(--space-16); }
@media (max-width: 899px) { .section__head + * { margin-top: var(--space-12); } }

/* ==========================================================================
   6. ENTREGAS — split com midia fixa + lista editorial numerada
   (variante "lista editorial" da Biblioteca-secoes; nao e grade de cards)
   ========================================================================== */
.deliver {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.deliver__aside { position: sticky; top: 116px; }
.deliver__list { border-top: var(--border-width-hairline) solid var(--border); }
.deliver__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-bottom: var(--border-width-hairline) solid var(--border);
}
.deliver__index {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
  line-height: 1.1;
}
.deliver__title { font-size: var(--text-h4); }
.deliver__text { color: var(--text-muted); margin-top: var(--space-3); }

@media (max-width: 899px) {
  .deliver { grid-template-columns: minmax(0, 1fr); }
  .deliver__aside { position: static; }
}

/* ==========================================================================
   6b. SPLIT imagem + texto (seção "como funciona" da LP 2)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.split__body { max-width: 54ch; }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ========================================================================== 
   7. PAINEL TECNICO DE DIFERENCIAIS
   Uma matriz editorial contínua substitui o bento de cartões soltos. A leitura
   lembra uma prancha de especificações: régua, divisórias e iconografia linear.
   ========================================================================== */
.proof-panel {
  background: var(--surface-inverse-deep);
  position: relative;
  overflow: hidden;
}
.proof-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border-inverse) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-inverse) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.2), transparent);
  opacity: .18;
}
.proof-panel .container { position: relative; }
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--border-width-hairline) solid var(--border-inverse-strong);
  border-bottom: var(--border-width-hairline) solid var(--border-inverse-strong);
}
.bento__tile {
  grid-column: auto;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  min-height: 156px;
  padding: var(--space-8) clamp(24px, 3vw, 48px);
  color: var(--text-inverse);
  background: transparent;
  border: 0;
  border-bottom: var(--border-width-hairline) solid var(--border-inverse);
  transition: background var(--duration-base) var(--ease-standard);
}
.bento__tile:nth-child(odd) { border-right: var(--border-width-hairline) solid var(--border-inverse); }
.bento__tile:hover { background: rgba(255,255,255,.045); }
.bento__tile--wide,
.bento__tile--narrow { grid-column: auto; }
.bento__tile--feature {
  grid-column: auto;
  background: transparent;
  position: relative;
}
.bento__tile--feature::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.bento__tile--feature .bento__title { color: var(--text-inverse); }
.bento__tile--feature .bento__text { color: var(--text-inverse-muted); }
.bento__icon {
  color: var(--accent);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
}
.bento__icon svg { width: 36px; height: 36px; stroke-width: 1.35; }
.bento__title { font-size: var(--text-h4); color: var(--text-inverse); max-width: 34ch; }
.bento__text { color: var(--text-inverse-muted); margin-top: var(--space-3); }

@media (max-width: 899px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__tile,
  .bento__tile--wide,
  .bento__tile--narrow,
  .bento__tile--feature { grid-column: auto; border-right: 0; min-height: 0; }
}

/* ========================================================================== 
   8. PROCESSO — imagem de campo + sequência vertical integrada
   ========================================================================== */
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: var(--space-12);
}
.media--process {
  aspect-ratio: 4 / 5;
  position: sticky;
  top: 116px;
}
.media--process img { width: 100%; height: 100%; object-fit: cover; }
.timeline { position: relative; }
.timeline__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  position: relative;
}
.timeline__rail {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--border);
}
.timeline__rail .line {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform-origin: top center;
}
.timeline__step {
  position: relative;
  min-height: 30px;
  padding: 0 0 var(--space-10) var(--space-16);
}
.timeline__step + .timeline__step { padding-top: var(--space-2); }
.timeline__dot {
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  color: var(--brand);
  background: var(--surface);
  border: var(--border-width-thick) solid var(--brand);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.section.alt .timeline__dot { background: var(--surface-alt); }
.timeline__text { color: var(--text-muted); font-size: var(--text-base); max-width: 48ch; }

@media (max-width: 899px) {
  .process-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .media--process { position: static; aspect-ratio: 16 / 10; }
  .timeline__step { padding-left: var(--space-12); }
}

/* ==========================================================================
   9. SEGMENTOS — faixa escura com foto de fundo + colunas com indice
   (nunca nuvem de pills)
   ========================================================================== */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-inverse-deep);
}
.band__media { position: absolute; inset: 0; z-index: -2; display: block; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,23,40,.90) 0%, rgba(14,23,40,.82) 100%);
}
.band .container { position: relative; z-index: 1; }

.sectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-8);
}
.sector { border-top: var(--border-width-hairline) solid var(--border-inverse); padding-top: var(--space-5); }
.sector__index {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  letter-spacing: var(--tracking-widest);
  color: var(--accent);
}
.sector__name { font-size: var(--text-h4); margin-top: var(--space-2); }
.sector__text { color: var(--text-inverse-muted); margin-top: var(--space-2); font-size: var(--text-base); }

@media (max-width: 899px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sectors { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   10. APLICACOES — trilho horizontal com scroll-snap NATIVO
   (gancho [data-hscroll] p/ a etapa 7 pinar; aqui e scroller nativo, funciona
   no touch e no reduced-motion sem depender de JS)
   ========================================================================== */
/* GRADE (18/08): era um scroller horizontal (flex + scroll-snap) — no desktop
   mostrava ~2 cards e escondia o resto atrás de scroll lateral, navegação ruim
   e cards cortados. Agora é grade: tudo visível de uma vez, sem arrastar.
   4 colunas no desktop largo, 2 no tablet, 1 no celular. */
/* LISTA EDITORIAL (18/08): era grade de cards que, no desktop em 4 colunas,
   virava caixa estreita/alta com muito vazio (a grade estica todos à altura do
   maior). Agora cada item é uma LINHA: número grande à esquerda, título+texto à
   direita, com filete separando. Preenche a largura, absorve textos de tamanhos
   diferentes e some com a "cara de card de template". 2 colunas no desktop,
   1 no mobile. Sem caixa, sem sombra. */
.rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-16);
  row-gap: 0;
}
@media (max-width: 767px) { .rail { grid-template-columns: minmax(0, 1fr); column-gap: 0; } }
.rail__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
  padding: var(--space-7) 0;
  border-top: var(--border-width-hairline) solid var(--border);
  background: none;
}
.rail__index {
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  line-height: .9;
  color: var(--accent);
}
.rail__title { grid-column: 2; font-size: var(--text-h4); align-self: center; }
.rail__text  { grid-column: 2; color: var(--text-muted); margin-top: var(--space-3); }
.rail__hint { display: none; } /* removido: não há mais scroll horizontal */

/* ==========================================================================
   11. DIFERENCIAIS EM CARDS (LP 2 — 3 itens: 3 colunas ou 1, nunca 2 = orfao)
   ========================================================================== */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 899px) { .trio { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   12. LISTA EDITORIAL COM SWEEP (segmentos da LP 2)
   ========================================================================== */
.editorial { border-top: var(--border-width-hairline) solid var(--border); }
.editorial__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-8) var(--space-5);
  border-bottom: var(--border-width-hairline) solid var(--border);
  transition: background var(--duration-base) var(--ease-standard),
              padding-left var(--duration-base) var(--ease-standard);
}
.editorial__row:hover { background: var(--surface-alt); padding-left: var(--space-8); }
.editorial__index {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  color: var(--text-muted);
}
.editorial__name { font-size: var(--text-h4); }
.editorial__text { color: var(--text-muted); }

@media (max-width: 899px) {
  .editorial__row { grid-template-columns: auto minmax(0, 1fr); }
  .editorial__text { grid-column: 2; }
}

/* ========================================================================== 
   13. COMPARATIVA — quadro técnico integrado, sem cartões flutuantes
   ========================================================================== */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border: var(--border-width-hairline) solid var(--border-strong);
}
.versus__card {
  padding: var(--space-10);
}
.versus__card--market {
  background: var(--surface-alt);
  border: 0;
  opacity: 1;
}
.versus__card--brand {
  position: relative;
  background: var(--surface-inverse);
  border: 0;
  box-shadow: none;
  color: var(--text-inverse);
  overflow: hidden;
}
.versus__card--brand::before { /* filete de acento que a etapa 7 faz desenhar (ver seção 19) */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1s var(--ease-out) .2s;
}
.versus__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}
.versus__card--brand .versus__label { color: var(--text-inverse-muted); }
.versus__name { font-size: var(--text-h4); margin-top: var(--space-2); }
.versus__card--brand .versus__name { color: var(--text-inverse); }
.versus__list { margin-top: var(--space-8); }
.versus__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: var(--border-width-hairline) dashed var(--border-strong);
}
.versus__card--brand .versus__item { border-top-style: solid; border-top-color: var(--border-inverse); }
.versus__item:first-child { border-top: 0; padding-top: 0; }
.versus__key {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  grid-column: 1 / -1;
}
.versus__card--brand .versus__key { color: var(--text-inverse-muted); }
.versus__mark { width: 18px; height: 18px; margin-top: 3px; color: var(--text-muted); }
.versus__card--brand .versus__mark { color: var(--gold-500); }
.versus__value { color: var(--text-muted); font-size: var(--text-sm); text-decoration: line-through; }
.versus__card--brand .versus__value {
  color: var(--text-inverse);
  font-size: var(--text-base);
  text-decoration: none;
}

@media (max-width: 780px) {
  .versus { grid-template-columns: minmax(0, 1fr); }
  .versus__card { padding: var(--space-6); }
}

/* ==========================================================================
   14. FAQ — 2 colunas, coluna esquerda sticky + accordion nativo <details>
   ========================================================================== */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.faq__aside { position: sticky; top: 116px; }
.faq__list { border-top: var(--border-width-hairline) solid var(--border); }
.faq__item { border-bottom: var(--border-width-hairline) solid var(--border); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding-block: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--brand);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q > span:first-child { text-wrap: balance; } /* sem palavra órfã na pergunta */
.faq__q:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.faq__sign {
  flex-shrink: 0;
  width: 24px; height: 24px;
  margin-top: 6px;
  position: relative;
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: var(--brand);
  inset: 50% 0 auto 0; height: 2px; margin-top: -1px;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__a { color: var(--text-muted); padding-bottom: var(--space-6); max-width: 62ch; }

@media (max-width: 899px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__aside { position: static; }
}

/* ==========================================================================
   15. CTA FINAL — faixa escura com foto de fundo, mesma largura do header
   ========================================================================== */
.final { text-align: left; }
.final__title { font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin-top: var(--space-4); max-width: 20ch; }
.final__actions { margin-top: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.final__micro { font-size: var(--text-sm); color: var(--text-inverse-muted); max-width: 44ch; }

/* ==========================================================================
   16. RODAPE — sem telefone, sem WhatsApp. So e-mail, endereco e paginas legais.
   ========================================================================== */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}
.footer__mark { display: block; width: 56px; }
.footer__mark img { width: 56px; height: 35px; object-fit: contain; }
.footer__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-inverse);
  margin-top: var(--space-4);
}
.footer__desc { font-size: var(--text-sm); margin-top: var(--space-3); max-width: 46ch; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.footer__title {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-inverse);
}
.footer__list { margin-top: var(--space-4); font-size: var(--text-sm); }
.footer__list li + li { margin-top: var(--space-3); }
.footer__list a { text-decoration: none; border-bottom: 1px solid var(--border-inverse); }
.footer__list a:hover { border-bottom-color: var(--text-inverse); }

@media (max-width: 899px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* ==========================================================================
   17. BANNER DE COOKIES — card claro, ancorado a ESQUERDA (o direito e do Merlin).
   Aparencia e cores no bloco de componentes.css; aqui so o essencial.
   ========================================================================== */
.cookie-banner[hidden] { display: none; }

/* ==========================================================================
   18. PAGINAS INTERNAS (privacidade, fornecedores, trabalhe conosco)
   ========================================================================== */
.page-head { padding-block: calc(var(--space-16) + 32px) var(--space-12); background: var(--surface-alt); }
.page-head__title { font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin-top: var(--space-4); }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--text-h3); margin-top: var(--space-12); }
.prose h3 { font-size: var(--text-h4); margin-top: var(--space-8); }
.prose p, .prose li { color: var(--text-muted); margin-top: var(--space-4); }
.prose ul { list-style: disc; padding-left: var(--space-6); }
.prose a { color: var(--brand); }

.form { max-width: 640px; }
.form__row { margin-top: var(--space-6); }
.form__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand);
  margin-bottom: var(--space-2);
}
.form__control {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.form__control:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--accent-solid); }
textarea.form__control { min-height: 148px; resize: vertical; }
.form__hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.form__consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-6); }
.form__consent input { margin-top: 5px; flex-shrink: 0; }
.form__consent label { font-size: var(--text-sm); color: var(--text-muted); }
.form__actions { margin-top: var(--space-8); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: var(--space-5); font-size: var(--text-sm); }
.form__status[data-state="ok"] { color: var(--brand); font-weight: var(--weight-semibold); }
.form__status[data-state="erro"] { color: var(--orange-600); font-weight: var(--weight-semibold); }

/* ==========================================================================
   19. CAMADA RICA DE ANIMAÇÃO (etapa 7 — agente-animacoes)
   Liga os ganchos que a etapa 6 deixou prontos: filete da comparativa,
   timeline que desenha, sublinhado em título. Contador (data-count) e o
   IntersectionObserver de [data-timeline]/[data-underline] estão em
   /assets/js/animacoes.js. Zoom-invertido do hero (.hero-media) e o
   parallax de imagem (data-parallax) ficam DE FORA por decisão: dependem de
   foto, e as imagens ainda são placeholder (ver PROJETO.md) — ganchos
   deixados prontos no markup para quando a foto real entrar.
   Sempre: estado final por padrão sem JS, sem RM; só transform/opacity ou
   background-size (não desloca layout, 0 overflow).
   ========================================================================== */

/* Comparativa — filete de acento "desenha" da esquerda pra direita quando o
   card já revelado (.is-in vem do MESMO observer de [data-reveal] do
   app.js — .versus__card--brand já tem data-reveal, nenhum JS novo aqui). */
.versus__card--brand.is-in::before { transform: scaleX(1); }
html:not(.js) .versus__card--brand::before { transform: none !important; }

/* Processo — linha da timeline desenha da origem (topo/esquerda) até o fim */
[data-timeline] .line {
  transform: scaleY(0);
  transition: transform 1.1s var(--ease-out);
}
[data-timeline].is-in .line { transform: scaleY(1); }
html:not(.js) [data-timeline] .line { transform: none !important; }

/* Título — sublinhado em acento que desenha (gancho [data-underline] num
   <span> dentro do título; usado no CTA final das duas LPs) */
[data-underline] {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  padding-bottom: .1em;
  transition: background-size var(--duration-slow) var(--ease-out) .15s;
}
[data-underline].is-in { background-size: 100% 3px; }
html:not(.js) [data-underline] { background-size: 100% 3px !important; }

@media (prefers-reduced-motion: reduce) {
  .versus__card--brand::before,
  [data-timeline] .line,
  [data-underline] { transition: none !important; }
  .versus__card--brand::before { transform: none !important; }
  [data-timeline] .line { transform: none !important; }
  [data-underline] { background-size: 100% 3px !important; }
}

/* ==========================================================================
   20. ADIÇÕES ESTRUTURAIS PARA A COPY DO CLIENTE (18/08/2026)
   A copy aprovada do cliente prevalece (ver Copy-CRO §"quando o cliente manda a
   copy"). Ela exige 4 estruturas que o baseline não tinha. TUDO abaixo usa só
   var(--...) existentes — nenhum hex solto, nenhuma cor/segundo sistema novo.
   - .cta-inline      → CTA no meio de seção (dor, comparativo, FAQ, sobre)
   - .timeline__title → nome da etapa do fluxo (cliente traz nome + descrição)
   - .stat-band       → faixa de números fora do hero (Sobre nós dissolvido na LP2)
   - .final__lede     → parágrafo do CTA final que a copy do cliente traz
   ========================================================================== */
.cta-inline {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
}
/* CTAs intermediários são convites editoriais, não repetem o bloco dourado do
   hero/header. A ação e o hook do Merlin permanecem exatamente os mesmos. */
.cta-inline .btn--primary {
  padding: var(--space-2) 0;
  color: var(--brand);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--brand);
  border-radius: 0;
  box-shadow: none;
}
.cta-inline .btn--primary:hover {
  color: var(--brand-strong);
  background: transparent;
  border-bottom-color: var(--accent-hover);
  box-shadow: none;
}
.cta-inline__micro { font-size: var(--text-sm); color: var(--text-muted); max-width: 48ch; }
.section.on-dark .cta-inline__micro { color: var(--text-inverse-muted); }

.timeline__title { font-size: var(--text-h4); margin-bottom: var(--space-2); }

/* Faixa de números em seção clara (Sobre nós → stat band). 4 credenciais:
   4 col desktop / 2 tablet / 1 mobile — nenhum órfão em nenhum breakpoint. */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-10) var(--space-8);
  margin-top: var(--space-12);
}
@media (max-width: 899px) { .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .stat-band { grid-template-columns: minmax(0, 1fr); } }

.final__lede {
  color: var(--text-inverse-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-5);
  max-width: 56ch;
}

/* ==========================================================================
   21. RODADA EDITORIAL — layouts com identidade própria (19/08/2026)
   Troca a sucessão de componentes genéricos por quatro composições distintas:
   painel de problema, atlas de entregáveis, pilha de serviços e aplicações.
   ========================================================================== */

/* Dor: bloco cinematográfico assimétrico, com a imagem como metade estrutural. */
.problem-section { background: var(--surface); }
.problem-section .split {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 0;
  min-height: 620px;
  background: var(--surface-inverse-deep);
  color: var(--text-inverse);
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.problem-section .split__body {
  max-width: none;
  padding: clamp(40px, 5vw, 72px);
  align-self: center;
}
.problem-section .eyebrow,
.problem-section .section-title { color: var(--text-inverse); }
.problem-section .section-lede,
.problem-section .split__body > p { color: var(--text-inverse-muted); }
.problem-section .split__body > p:last-of-type {
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
}
.problem-section .media {
  height: 100%;
  min-height: 620px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.problem-section .media img { width: 100%; height: 100%; object-fit: cover; }
.problem-section .cta-inline .btn--primary {
  color: var(--text-inverse);
  border-bottom-color: var(--accent);
}
.problem-section .cta-inline__micro { color: var(--text-inverse-muted); }
.problem-section--reverse .split__body { order: 2; }
.problem-section--reverse .media { order: 1; }

/* Atlas: cabeçalho e imagem formam a capa; entregáveis viram células de prancha. */
.deliver--atlas { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.deliver--atlas .deliver__aside {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.deliver--atlas .deliver__aside figure {
  margin: 0 !important;
  aspect-ratio: 16 / 9;
}
.deliver--atlas .deliver__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--border-width-hairline) solid var(--border-strong);
  border-bottom: var(--border-width-hairline) solid var(--border-strong);
}
.deliver--atlas.deliver--four .deliver__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deliver--atlas .deliver__item {
  display: block;
  min-height: 260px;
  padding: var(--space-8);
  border: 0;
  border-right: var(--border-width-hairline) solid var(--border);
  border-bottom: var(--border-width-hairline) solid var(--border);
}
.deliver--atlas .deliver__item:nth-child(3n) { border-right: 0; }
.deliver--atlas.deliver--four .deliver__item:nth-child(3n) { border-right: var(--border-width-hairline) solid var(--border); }
.deliver--atlas.deliver--four .deliver__item:nth-child(2n) { border-right: 0; }
.deliver--atlas .deliver__index {
  display: block;
  margin-bottom: var(--space-10);
  font-size: clamp(2.75rem, 2.2rem + 2vw, 4rem);
  -webkit-text-stroke-color: var(--brand);
}
.deliver--atlas .deliver__title { max-width: 24ch; }

/* Pilha de serviços: cada oferta é uma linha de arquitetura, não um card. */
.service-stack { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.service-stack .rail__card {
  grid-template-columns: 88px minmax(220px, .72fr) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: center;
  min-height: 132px;
  padding: var(--space-7) var(--space-5);
  transition: background var(--duration-base) var(--ease-standard),
              padding-left var(--duration-base) var(--ease-standard);
}
.service-stack .rail__card:hover {
  background: var(--surface);
  padding-left: var(--space-8);
}
.service-stack .rail__index {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-hover);
}
.service-stack .rail__title { grid-column: 2; align-self: center; }
.service-stack .rail__text { grid-column: 3; margin-top: 0; }

/* Aplicações da LP2: palco visual à esquerda e roteiro consultável à direita. */
.applications-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: var(--space-12);
}
.media--applications {
  position: sticky;
  top: 116px;
  aspect-ratio: 4 / 5;
}
.media--applications img { width: 100%; height: 100%; object-fit: cover; }
.service-stack--compact .rail__card {
  grid-template-columns: 60px minmax(0, 1fr);
  min-height: 0;
  padding-inline: 0;
}
.service-stack--compact .rail__card:hover { padding-left: var(--space-4); }
.service-stack--compact .rail__index { grid-column: 1; grid-row: 1 / span 2; }
.service-stack--compact .rail__title { grid-column: 2; }
.service-stack--compact .rail__text { grid-column: 2; margin-top: var(--space-3); }

/* Segmentos: diretório técnico em duas colunas, com índice de grande escala. */
.sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-12); }
.sector {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-height: 112px;
  padding-block: var(--space-5);
}
.sector__index {
  font-size: var(--text-h3);
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
}
.sector__name { margin-top: 0; }

@media (max-width: 899px) {
  .problem-section .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .problem-section .split__body,
  .problem-section--reverse .split__body { order: 1; padding: var(--space-10) var(--space-6); }
  .problem-section .media,
  .problem-section--reverse .media { order: 2; min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .deliver--atlas .deliver__aside { grid-template-columns: minmax(0, 1fr); }
  .deliver--atlas .deliver__list,
  .deliver--atlas.deliver--four .deliver__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deliver--atlas .deliver__item,
  .deliver--atlas .deliver__item:nth-child(3n) { border-right: var(--border-width-hairline) solid var(--border); }
  .deliver--atlas .deliver__item:nth-child(2n) { border-right: 0; }
  .service-stack .rail__card { grid-template-columns: 64px minmax(0, 1fr); }
  .service-stack .rail__index { grid-column: 1; grid-row: 1 / span 2; }
  .service-stack .rail__title { grid-column: 2; }
  .service-stack .rail__text { grid-column: 2; margin-top: var(--space-3); }
  .applications-layout { grid-template-columns: minmax(0, 1fr); }
  .media--applications { position: static; aspect-ratio: 16 / 10; }
}

@media (max-width: 599px) {
  .deliver--atlas .deliver__list,
  .deliver--atlas.deliver--four .deliver__list { grid-template-columns: minmax(0, 1fr); }
  .deliver--atlas .deliver__item,
  .deliver--atlas .deliver__item:nth-child(2n),
  .deliver--atlas .deliver__item:nth-child(3n) {
    min-height: 0;
    border-right: 0;
  }
  .deliver--atlas .deliver__index { margin-bottom: var(--space-5); }
  .service-stack .rail__card,
  .service-stack--compact .rail__card { grid-template-columns: 48px minmax(0, 1fr); padding-inline: 0; }
  .sectors { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   22. MOVIMENTO EDITORIAL — camada refinada (19/08/2026)
   Varia por tipo de conteúdo. Somente transform/opacity nos movimentos longos;
   scroll permanece nativo e todos os estados têm fail-safe/reduced-motion.
   ========================================================================== */

/* Hero: zoom invertido curto, sem Ken Burns infinito. */
html.js .hero-media {
  opacity: .92;
  transform: scale(1.025);
  transform-origin: 50% 50%;
  transition: opacity 1100ms var(--ease-out),
              transform 1500ms var(--ease-out);
}
html.js .hero-media.is-in { opacity: 1; transform: scale(1); }
html:not(.js) .hero-media { opacity: 1; transform: none; }

/* Cabeçalhos: entrada própria, curta, para separar hierarquia de conteúdo. */
html.js .motion-head {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 680ms var(--ease-out), transform 780ms var(--ease-out);
}
html.js .motion-head.is-in { opacity: 1; transform: none; }

/* Painel de dor: texto e fotografia convergem de lados opostos. */
html.js .problem-section .split__body[data-reveal] { transform: translate3d(-14px,0,0); }
html.js .problem-section .media[data-reveal] { transform: translate3d(14px,0,0) scale(.995); }
html.js .problem-section--reverse .split__body[data-reveal] { transform: translate3d(14px,0,0); }
html.js .problem-section--reverse .media[data-reveal] { transform: translate3d(-14px,0,0) scale(.995); }
html.js .problem-section [data-reveal].is-in { transform: none; }

/* Atlas técnico: o filete de cada célula é desenhado junto da entrada. */
.deliver--atlas .deliver__item { position: relative; }
.deliver--atlas .deliver__item::after {
  content: "";
  position: absolute;
  inset: -1px auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}
.deliver--atlas .deliver__item.is-in::after { transform: scaleX(1); }
.deliver--atlas .deliver__index {
  opacity: .7;
  transform: translate3d(0,4px,0);
  transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-out);
}
.deliver--atlas .deliver__item.is-in .deliver__index { opacity: 1; transform: none; }

/* Pilha de serviços: direção alternada cria leitura progressiva sem flutuar. */
html.js .service-stack .rail__card[data-reveal] { transform: translate3d(-10px,0,0); }
html.js .service-stack .rail__card:nth-child(even)[data-reveal] { transform: translate3d(10px,0,0); }
html.js .service-stack .rail__card[data-reveal].is-in { transform: none; }

/* Diferenciais: ícone e régua entram depois da célula, como marcação de prancha. */
.bento__icon {
  opacity: .68;
  transform: scale(.92) rotate(-2deg);
  transform-origin: center;
  transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
}
.bento__tile.is-in .bento__icon { opacity: 1; transform: none; }
.bento__tile--feature::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 900ms var(--ease-out) 80ms;
}
.bento__tile--feature.is-in::before { transform: scaleY(1); }

/* Processo: cada marco acende quando seu conteúdo entra. */
.timeline__dot {
  opacity: .72;
  transform: scale(.92);
  transition: opacity 560ms var(--ease-out), transform 700ms var(--ease-out),
              background 220ms var(--ease-standard), color 220ms var(--ease-standard);
}
.timeline__step.is-in .timeline__dot {
  opacity: 1;
  transform: scale(1);
  background: var(--accent);
  color: var(--brand-strong);
}

/* FAQ: a resposta ganha continuidade em vez de aparecer abruptamente. */
.faq__item[open] .faq__a { animation: faq-in 340ms var(--ease-out) both; }
@keyframes faq-in {
  from { opacity: .7; transform: translate3d(0,-3px,0); }
  to { opacity: 1; transform: none; }
}

/* Mídias parallax recebem folga para o deslocamento nunca revelar bordas. */
[data-parallax] { inset: -5% 0; will-change: transform; }

@media (max-width: 899px) {
  html.js .problem-section .split__body[data-reveal],
  html.js .problem-section .media[data-reveal],
  html.js .problem-section--reverse .split__body[data-reveal],
  html.js .problem-section--reverse .media[data-reveal],
  html.js .service-stack .rail__card[data-reveal],
  html.js .service-stack .rail__card:nth-child(even)[data-reveal] {
    transform: translate3d(0,8px,0);
  }
  html.js .problem-section [data-reveal].is-in,
  html.js .service-stack .rail__card[data-reveal].is-in { transform: none; }
  [data-parallax] { inset: 0; transform: none !important; will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media,
  .motion-head,
  .problem-section [data-reveal],
  .service-stack .rail__card[data-reveal],
  .deliver--atlas .deliver__index,
  .bento__icon,
  .timeline__dot {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .deliver--atlas .deliver__item::after,
  .bento__tile--feature::before { transform: none !important; transition: none !important; }
  .faq__item[open] .faq__a { animation: none !important; }
  [data-parallax] { inset: 0; transform: none !important; will-change: auto; }
}