/* cap:II */
/* ============================================================================
   cap-II.css — Capítulo II (claro): confiança, desafio (momento 3), venda perdida (momento 4)
   Estado final é o padrão; estados iniciais dos momentos 3 e 4 só sob html.js-motion
   (motion.js liga `.is-on` por IO). Só url() com data:. Nenhum hex (tokens).
   Em capítulo claro todo traço é --mint-ink (= --fio-stroke do tema).
   ========================================================================== */

/* 2. Quem está por trás ----------------------------------------------------- */
.confianca { padding: calc(6vw + 28px) 0 24px; } /* varredura de vazios: 56→28/80→24 (o corte diagonal já ocupa os 6vw) */
/* o único corte diagonal da página (I → II), por clip-path */
.confianca::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6vw; background: var(--navy-deep);
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
}
.confianca-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.marca-mae { width: 180px; margin: 0 0 28px; }
.marca-mae img { width: 100%; height: auto; } /* PNG/WebP/AVIF com alfa (navy sobre transparente) */
.confianca-texto .text-link { margin-top: 4px; }
/* fila silenciosa de marcas: grade com hairlines, logos a 100 %, cor original, width/height no HTML */
.marcas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--hairline) solid var(--line); --stagger-ms: 40ms; }
.marcas li { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 12px 8px; border-bottom: var(--hairline) solid var(--line); }
.marcas li:nth-child(3n+2) { border-left: var(--hairline) solid var(--line); border-right: var(--hairline) solid var(--line); }
.marcas img { display: block; height: 36px; width: auto; max-width: 100%; object-fit: contain; transition: transform var(--dur-1) var(--ease-out); }
.marcas li:nth-child(2) img { height: 40px; }
.marcas .chip { padding: 0; border: 0; min-height: 0; }
.marcas .chip img { height: 40px; }
.confianca-marcas .micro { margin-top: 16px; }
@media (hover: hover) and (pointer: fine) { .marcas img:hover { transform: translateY(-1px); } }
@media (min-width: 900px) {
  .confianca { padding: calc(6vw + 32px) 0 40px; } /* varredura de vazios: 80→32/112→40 */
  .confianca-grid { grid-template-columns: 7fr 5fr; gap: 64px; }
  /* 68 caracteres em 7 colunas: 3 linhas sem órfã ("de energia" sozinha era o resultado do balance em 6/12) */
  .confianca h2 { font-size: clamp(32px, 3.3vw, 46px); }
  .marcas { grid-template-columns: 1fr 1fr; }
  /* Ajustes do dono (25/09, tarde): tudo centrado na célula, nas duas direções (antes: flex-start com 20 px de recuo à esquerda) */
  .marcas li { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 16px 20px; }
  .marcas li:nth-child(3n+2) { border-left: 0; border-right: 0; }
  .marcas li:nth-child(2n) { border-left: var(--hairline) solid var(--line); }
  .marcas img { height: 44px; }
  .marcas li:nth-child(2) img, .marcas .chip img { height: 44px; }
}

/* 3. O desafio (momento 3) --------------------------------------------------- */
.desafio { padding: 24px 0 24px; } /* varredura de vazios: 72→24/88→24 (padding duplicado nas duas bordas de seção) */
.desafio .sec-head { max-width: 760px; margin: 0 auto 40px; }
.desafio-foto { --mask-r: var(--r-3); border-radius: var(--r-3); overflow: clip; margin: 0; background: var(--paper-2); } /* fundo = buraco do lazy em 4G não é branco (V2 § 8) */
/* Rodada de ajustes (V2 ajuste 4c, calibrado por captura): o 50 % 80 % pedido corta o rosto do integrador na altura dos olhos (o rosto e os cards
   de vidro ocupam a MESMA faixa, 11–38 % da altura); 50 % 35 % é o corte máximo que preserva o rosto no 16/6. No mobile o 16/10 não corta o topo
   (corta as laterais) — fica o 16/9 do prompt. Tirar os cards exige outra foto (decisão do dono). */
.desafio-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%; }
.desafio-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: -32px 8px 0; position: relative; --stagger-ms: 60ms; }
.desafio-cards .card { padding: 28px; }
/* círculo com X (40 px) no topo do card e o título abaixo, nos dois breakpoints; o traço sai do X pela direita até a borda direita do card
   (Rodada de ajustes, V2 "fora dos cinco": o traço vertical do mobile "rumo ao método" apontava para a seção seguinte, Onde a venda morre) */
.card--reprovado { overflow: visible; }
.card--reprovado .x { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 16px; border-radius: 50%; border: var(--hairline) solid var(--line); color: var(--no); }
.card--reprovado h3 { margin: 0 0 8px; }
.card--reprovado p { margin-top: 0; }
.card--reprovado .x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* traço do X: nasce na borda do círculo (centro em 48/48 px do padding-box) e termina na borda EXTERNA do card (-1px = a borda); a ponta fica centrada na borda direita */
.card--reprovado .fio { position: absolute; overflow: visible; max-width: none; }
/* reta esticável (preserveAspectRatio="none"): sem non-scaling-stroke, senão o Chrome traceja o pathLength no espaço de tela; a espessura segue o eixo de escala 1 */
.card--reprovado .fio path { vector-effect: none; stroke-width: 2; }
.card--reprovado .fio-h { left: 76px; top: 47px; width: calc(100% - 75px); height: 2px; } /* até a borda externa (padding-box + 1 px de borda) */
.card--reprovado .fio-v { display: none; }
.card--reprovado .fio-track { position: absolute; left: 76px; right: -1px; top: 47px; height: 2px; transform: translateX(0); pointer-events: none; }
.card--reprovado .fio-track .fio-head { left: 100%; top: 50%; }
@media (min-width: 900px) {
  .desafio { padding: 40px 0 40px; } /* varredura de vazios: 96→40/112→40 */
  .desafio-foto img { aspect-ratio: 16 / 6; }
  .desafio-cards { grid-template-columns: 1fr 1fr; gap: 24px; margin: -48px 40px 0; }
}
/* estado inicial do momento 3 (só sob html.js-motion; motion.js liga .is-on por IO, threshold .5, uma vez): 600 ms ease-out.
   A7: a ponta nasce invisível (visibility) — antes ficava parada na origem, junto do X, antes do traço. */
html.js-motion [data-momento="3"]:not(.is-on) .fio path { stroke-dashoffset: 1; }
html.js-motion [data-momento="3"]:not(.is-on) .fio-track { transform: translateX(-100%); }
html.js-motion [data-momento="3"]:not(.is-on) .fio-track .fio-head { visibility: hidden; }
html.js-motion [data-momento="3"] .fio path { transition: stroke-dashoffset var(--dur-reveal) var(--ease-out); }
html.js-motion [data-momento="3"] .fio-track { transition: transform var(--dur-reveal) var(--ease-out); }

/* 4. Onde a venda morre (momento 4) — --paper-2 e bento 12 × 3 --------------- */
.venda { background: var(--paper-2); padding: 24px 0 24px; } /* varredura de vazios: 72→24/80→24 */
.venda-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } /* varredura de vazios: 32→24 no mobile (a ordem reflow usa este gap entre os 4 blocos) */
/* mobile (§ 6.4): texto → "33%" largura total + 3 tiles empilhados → foto → botão */
@media (max-width: 899px) {
  .venda-texto { display: contents; }
  .venda-texto .sec-head { order: 1; }
  .bento { order: 2; }
  .venda-texto .venda-foto { order: 3; }
  .venda-texto .cta-row { order: 4; margin-top: 0; }
}
.venda-texto .u { font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--mint-ink); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.venda-foto { --mask-r: var(--r-3); border-radius: var(--r-3); overflow: clip; margin: 0; background: var(--paper-2); }
.venda-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.venda-texto .cta-row { margin-top: 32px; }
.bento { display: grid; grid-template-columns: 1fr; gap: 12px; --stagger-ms: 60ms; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--white); border: var(--hairline) solid var(--line); border-radius: var(--r-2); container-type: inline-size; }
/* números: Bricolage 800 tabular-nums; o .count-live tem largura mínima em ch → nenhum número pula de largura durante a contagem */
.tile .num { font: 800 40px/1 var(--font-display); letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; flex-wrap: wrap; }
.tile .num .suf { font-size: .5em; letter-spacing: -.01em; white-space: pre; }
.tile .count-live { --ch: 2ch; }
.tile--83 .count-live { --ch: 4.6ch; } /* "83,98": a vírgula é mais estreita que um dígito */
/* Rodada de ajustes (dono): o tile de 7 col × 3 linhas se preenche com tipografia — número a clamp(120px, 15vw, 240px) no desktop, frase em --fs-lede, fonte no pé */
.tile--33 .num { font-size: clamp(96px, 11vw, 168px); line-height: .9; margin-top: -.04em; }
.tile--33 .num .suf { font-size: .36em; }
.tile .count-bar { margin-top: 6px; }
.tile .count-track { margin-top: -10px; } /* anula o gap da coluna flex: a ponta fica centrada na linha de base */

/* orquestrador (Fase 4→5): as trilhas transladadas antes do momento 4 (translateX 34% / -100%) não podem gerar overflow do documento em 360 */
#venda-perdida { overflow-x: clip; }
.tile--33 .count-bar { transform: scaleX(.66); }
.tile--33 .count-track .count-head { left: 66%; }
.tile .frase { font-size: var(--fs-small); line-height: 1.55; color: var(--ink); text-wrap: pretty; margin: 6px 0 0; }
.tile--33 .frase { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.45; max-width: 26ch; margin-top: 10px; }
@media (min-width: 900px) {
  /* o número enche a largura do tile sem quebrar o "%" (container query: "33%" mede ≈ 1,3 × font-size); o que sobrar da altura
     das três linhas se distribui entre número/linha de base → frase → fonte (margens auto: frase no meio, fonte no pé) */
  .tile--33 .num { font-size: min(clamp(120px, 15vw, 240px), 60cqw); flex-wrap: nowrap; } /* medido: "33%" = 1,63 × font-size; 60cqw = 185 px em 1440 (o tile de 7 col tem 366 px — 240 px não cabe) */
  .tile--33 .frase { font-size: clamp(24px, 1.9vw, 28px); line-height: 1.35; margin-top: auto; padding-top: 20px; }
}
.tile .fonte { font-size: var(--fs-caption); line-height: 1.4; color: var(--muted-dark); margin-top: auto; padding-top: 12px; }
@media (min-width: 900px) {
  .venda { padding: 40px 0 40px; } /* varredura de vazios: 96→40/112→40 */
  .venda-grid { grid-template-columns: 5fr 7fr; gap: 56px; }
  .bento { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, auto); gap: 16px; }
  .tile { padding: 20px; } /* dono: tiles da coluna direita mais baixos (padding 24 → 20) */
  .tile--33 { grid-column: 1 / span 7; grid-row: 1 / span 3; padding: 32px 28px 28px; }
  .tile--83 { grid-column: 8 / span 5; grid-row: 1; }
  .tile--49 { grid-column: 8 / span 5; grid-row: 2; }
  .tile--82 { grid-column: 8 / span 5; grid-row: 3; }
}
/* estado inicial do momento 4 (a contagem é JS; aqui só as linhas de base e as pontas): 800 ms ease-out, os quatro juntos.
   33 % conta 50→33: base scaleX(1→.66), ponta translateX(0→-34%); os outros: base scaleX(0→1), ponta translateX(-100%→0) */
.count-track .count-head { transform: translateX(0); }
html.js-motion [data-momento="4"]:not(.is-on) .count-bar { transform: scaleX(0); }
html.js-motion [data-momento="4"]:not(.is-on) .tile--33 .count-bar { transform: scaleX(1); }
html.js-motion [data-momento="4"]:not(.is-on) .count-track { transform: translateX(-100%); }
html.js-motion [data-momento="4"]:not(.is-on) .tile--33 .count-track { transform: translateX(34%); }
html.js-motion [data-momento="4"]:not(.is-on) .tile:not(.tile--33) .count-head { visibility: hidden; } /* A7: a ponta só existe a partir do gesto (o 33 % nasce cheio, com a ponta a 100 %) */
html.js-motion [data-momento="4"] .count-bar, html.js-motion [data-momento="4"] .count-track { transition: transform var(--dur-count) var(--ease-out); }

/* cap:III */
/* ============================================================================
   cap-III.css — Capítulo III (escuro): método (cena-assinatura, momento 5),
   resgate (momento 6), distribuidora (full-bleed). Fase 3 B.
   Estado final é o padrão; estados iniciais só sob html.js-motion.
   Só url() com data:. Nenhum hex (tokens).
   Contrato com o motion.js (Fase 4):
     · [data-momento="5"] .cena[data-etapa="0".."4"] (fallback IO por passo, só onde
       CSS.supports("animation-timeline: view()") for falso) e .metodo-card.is-active;
     · [data-momento="6"].is-on (IO threshold .4, uma vez) acende as 3 linhas;
     · .resgate-foto.is-in (IO, LIGA E DESLIGA) roda/pausa o Ken Burns;
       html.js-hidden (visibilitychange) pausa;
     · .contrast li[data-reveal].is-in (IO, uma vez) desenha os ícones 09/10/11.
   ========================================================================== */

/* 5. O método IBS — cena-assinatura (momento 5) ---------------------------- */
.metodo { padding: 24px 0 32px; } /* varredura de vazios: 64→24/88→32 */
/* a ilustração aparece UMA vez: faixa 16/9 no topo, inteira, com máscara e raio 20 — nunca sob a cena.
   Rodada de ajustes: só no desktop (≥ 900); no celular sai do fluxo e nada é baixado (o <picture> serve o GIF de 1 px abaixo de 900). */
.metodo-faixa { --mask-r: var(--r-3); border-radius: var(--r-3); overflow: clip; margin: 0 0 40px; display: none; background: var(--navy-2); }
@media (min-width: 900px) { .metodo-faixa { display: block; } }
/* Ajustes do dono (25/09, tarde): a arte 1600×900 tem o topo liso (conteúdo ilustrado de y 364 a 840 = 40–93 %); janela 3 / 1 (533 px da arte) de y 340 a 873 — sem navy vazio acima da casa */
.metodo-faixa img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; object-position: 50% 93%; }

/* grid: mobile = cabeçalho → cena sticky → passos rolam por baixo → botão.
   timeline-scope no grid; a coluna de passos nomeia a timeline pelo CENTRO da viewport
   (inset 50 %/50 %): 0–25 % = passo 1 no centro … 75–100 % = passo 4. */
.metodo-grid {
  display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "cena" "passos" "cta"; align-items: start;
  timeline-scope: --metodo;
}
.metodo-col { display: contents; }
.metodo-col .sec-head { grid-area: head; }
.cena { grid-area: cena; }
.metodo-cards { grid-area: passos; position: relative; z-index: 0; view-timeline-name: --metodo; view-timeline-axis: block; view-timeline-inset: 50% 50%; }
.metodo-col .cta-row { grid-area: cta; margin-top: 32px; }

/* passos: linhas editoriais separadas por hairline (sem caixa — a silhueta do capítulo II já é o card).
   Mobile: altura = conteúdo + 24 px. Só o anel do número e o ícone mudam no passo ativo; texto sempre a 100 %. */
.metodo-card {
  display: grid; grid-template-columns: 40px 1fr auto; column-gap: 14px; row-gap: 6px;
  align-items: center; align-content: start; padding: 12px 0; margin: 0;
  border-top: var(--hairline) solid var(--line-dark); container-type: inline-size;
}
.metodo-card:last-child { border-bottom: var(--hairline) solid var(--line-dark); }
.metodo-card .num {
  position: relative; grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: var(--hairline) solid color-mix(in srgb, var(--white) 24%, transparent);
  color: var(--white); font: 700 15px/1 var(--font-display);
}
/* anel mint (crossfade por opacity; a cor nunca transiciona) */
.metodo-card .num::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: var(--fio) solid var(--mint); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.metodo-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 19px; color: var(--white); }
.metodo-card .ico { grid-column: 3; grid-row: 1; width: 28px; height: 28px; }
.metodo-card p { grid-column: 2 / -1; grid-row: 2; margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--on-dark); text-wrap: pretty; max-width: 60ch; }
.metodo-card.is-active .num::after { opacity: 1; }
.metodo-card.is-active .ico { color: var(--mint); }

/* a cena: bloco sticky com o rota.svg inlinado + overlay no MESMO viewBox (ponta do atendente).
   Mobile: top 0 (header mobile é estático), 32svh, cards rolam por baixo. Única cena sticky da página. */
.cena {
  position: sticky; top: 0; z-index: 1; height: 32svh; margin: 0 0 8px; padding: 0;
  background: var(--navy-deep); border-radius: var(--r-2); isolation: isolate; overflow: clip; will-change: transform;
}
.cena > svg { width: 100%; height: 100%; }
.cena .cena-over { position: absolute; inset: 0; pointer-events: none; }
/* X ×1,3 no celular estreito (o X de 6 px se lê, mas precisa de presença para "acender" no momento 5) */
@media (max-width: 480px) {
  #rota-g-destinos { display: none; }
  #rota-g-x-mobile { display: inline; }
}
@media (max-height: 600px) and (max-width: 1023px) { .cena { position: relative; } }

@media (min-width: 1024px) {
  .metodo { padding: 32px 0 64px; } /* varredura de vazios: 96→40/128→64; ajustes do dono: topo 40→32 (fim do claro → arte ≤ 96 px) */
  .metodo-faixa { margin-bottom: 48px; }
  .metodo-grid { grid-template-columns: 5fr 7fr; grid-template-areas: none; gap: 64px; }
  .metodo-col { display: block; grid-column: 1; }
  .metodo-col .sec-head, .metodo-cards, .metodo-col .cta-row { grid-area: auto; }
  .metodo-cards { margin-top: 8px; }
  /* o passo dá o ritmo ao scroll: max(conteúdo + 48 px, 40svh); o conteúdo fica no topo, do seu tamanho */
  /* Rodada de ajustes (dono): piso 26svh em vez dos 40svh do prompt § 6.5 — os 4 passos somam ≈ 104–110svh */
  /* Ajustes do dono (25/09, tarde): sem piso de altura — passo = conteúdo + 40 px (20 + 20), hairline entre eles; o progresso da cena continua por passo (timeline na <ol>, inset 50 %/50 %) */
  .metodo-card { min-height: 0; padding: 20px 0; column-gap: 16px; row-gap: 10px; }
  .metodo-card h3 { font-size: var(--fs-h3); }
  /* cena: sticky top 120, largura toda da coluna de 7, 16/9, ≤ 60svh, ≤ 700 × 400 CSS px */
  .cena {
    grid-area: auto; grid-column: 2; top: 120px; align-self: start; justify-self: center;
    height: auto; aspect-ratio: 16 / 9; width: min(100%, calc(60svh * 16 / 9), 700px); margin: 0;
  }
}
@media (max-height: 700px) and (min-width: 1024px) { .cena { position: relative; top: auto; } }

/* rota — estado final (padrão): tudo desenhado, X acesos, check em escala 1, pontas nos destinos */
.cena svg path, .cena svg line, .cena svg circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Rodada de ajustes (V2, ajuste 1): com vector-effect="non-scaling-stroke" o Chromium traceja no espaço de tela e ignora o pathLength="1" —
   a curva aparecia inteira em vez de se desenhar. vector-effect: none + stroke-width em unidades do viewBox (1600) calibrado por faixa de
   largura real da cena para ≈ 2 px CSS: 360 → 328 px (9,8); 412–480 (8,4); 481–1023 (6,4); 1024–1199 → 532–634 px (5,6); ≥ 1200 → 635 px (5). */
.cena svg :is(path, line, circle) { vector-effect: none; stroke-width: 5; }
@media (max-width: 1199px) { .cena svg :is(path, line, circle) { stroke-width: 5.6; } }
@media (max-width: 1023px) { .cena svg :is(path, line, circle) { stroke-width: 6.4; } }
@media (max-width: 480px) { .cena svg :is(path, line, circle) { stroke-width: 8.4; } }
@media (max-width: 400px) { .cena svg :is(path, line, circle) { stroke-width: 9.8; } }
#rota-g-check { transform-box: view-box; transform-origin: 1180px 450px; transform: scale(1); opacity: 1; }
#rota-desvio-head { offset-path: path("M270 470 C520 900 900 900 1124 470"); offset-rotate: 0deg; offset-distance: 100%; transform: none; }
#rota-atendente-head { offset-path: path("M1236 450 L1380 450"); offset-rotate: 0deg; offset-distance: 100%; }
@supports not (offset-path: path("M0 0")) { #rota-desvio-head, #rota-atendente-head { display: none; } } /* só o traço */

/* fallback por etapa (sem view(): Firefox) — motion.js põe data-etapa="1".."4" por IO (rootMargin −40 % desktop / −35 % mobile).
   Estados iniciais só sob html.js-motion; transições de 1,2 s (X 300 ms; check 600 ms spring). */
html.js-motion .cena[data-etapa="0"] #rota-g-rotas path { stroke-dashoffset: 1; }
html.js-motion .cena:is([data-etapa="0"], [data-etapa="1"]) :is(.rota-x, #rota-g-desvio path) { stroke-dashoffset: 1; }
html.js-motion .cena:is([data-etapa="0"], [data-etapa="1"]) #rota-desvio-head { offset-distance: 0%; }
html.js-motion .cena:is([data-etapa="0"], [data-etapa="1"], [data-etapa="2"]) #rota-g-check { transform: scale(.8); opacity: 0; }
html.js-motion .cena:is([data-etapa="0"], [data-etapa="1"], [data-etapa="2"], [data-etapa="3"]) #rota-g-atendente path { stroke-dashoffset: 1; }
html.js-motion .cena:is([data-etapa="0"], [data-etapa="1"], [data-etapa="2"], [data-etapa="3"]) #rota-atendente-head { offset-distance: 0%; visibility: hidden; } /* Fase 4: a ponta do atendente só existe a partir da etapa 4 (antes ficava como um ponto na borda do círculo do check) */
html.js-motion .cena :is(#rota-g-rotas path, #rota-g-desvio path, #rota-g-atendente path) { transition: stroke-dashoffset var(--dur-trilho) var(--ease-out); }
html.js-motion .cena .rota-x { transition: stroke-dashoffset 300ms var(--ease-out); }
html.js-motion .cena :is(#rota-desvio-head, #rota-atendente-head) { transition: offset-distance var(--dur-trilho) var(--ease-out); }
html.js-motion .cena #rota-g-check { transition: transform 600ms var(--ease-spring), opacity var(--dur-2) var(--ease-out); }

/* dirigida pelo scroll (Chromium/WebKit): 4 etapas na timeline --metodo; a ponta viaja no MESMO animation-timeline.
   Keyframes com "to" explícito (o valor-base sob data-etapa="0" é o estado inicial). Sob html.js-motion, como os reveals (MAPA § 12.2.5). */
@keyframes rota-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rota-head { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes rota-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Fase 4: ponta do atendente invisível antes da sua etapa (visibility é discreta: hidden só em 0 % do range, visível de 0+ a 100 % e depois) */
@keyframes rota-head-v { from { offset-distance: 0%; visibility: hidden; } to { offset-distance: 100%; visibility: visible; } }
@supports (animation-timeline: view()) {
  html.js-motion .cena :is(#rota-g-rotas path, #rota-g-desvio path, #rota-g-atendente path, .rota-x, #rota-desvio-head, #rota-atendente-head, #rota-g-check) { transition: none; }
  html.js-motion .cena #rota-g-rotas path { animation: rota-draw linear both; animation-timeline: --metodo; animation-range: 0% 25%; }
  html.js-motion .cena .rota-x { animation: rota-draw linear both; animation-timeline: --metodo; animation-range: 25% 35%; }
  html.js-motion .cena #rota-g-desvio path { animation: rota-draw linear both; animation-timeline: --metodo; animation-range: 25% 50%; }
  html.js-motion .cena #rota-desvio-head { animation: rota-head linear both; animation-timeline: --metodo; animation-range: 25% 50%; }
  html.js-motion .cena #rota-g-check { animation: rota-pop linear both; animation-timeline: --metodo; animation-range: 50% 75%; }
  html.js-motion .cena #rota-g-atendente path { animation: rota-draw linear both; animation-timeline: --metodo; animation-range: 75% 100%; }
  html.js-motion .cena #rota-atendente-head { animation: rota-head-v linear both; animation-timeline: --metodo; animation-range: 75% 100%; }
}

/* 6. Resgate de carteira (momento 6) — faixa quase vazia ------------------- */
.resgate { min-height: 64svh; display: flex; align-items: center; background: var(--navy-deep); overflow: clip; isolation: isolate; padding: 64px 0; }
.resgate-foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.resgate-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .22;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 60% 50%, var(--white) 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 60% 50%, var(--white) 30%, transparent 100%);
  transform: scale(1); transform-origin: center;
}
/* overlay navy 80 % atrás de TODO texto (decisão da Fase 0) + --sun; no desktop afina a 40 % só sob a lista (sem texto) */
.resgate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--sun), var(--sun)), color-mix(in srgb, var(--navy-deep) 80%, transparent); }
.resgate-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; width: 100%; }
.resgate .h1 { margin-bottom: 20px; }
.resgate .btn { margin-top: 8px; }
/* Ken Burns (o único da página): existe só sob html.js-motion; nasce pausado; .is-in (IO, liga e desliga) roda; html.js-hidden pausa */
@keyframes kenburns { to { transform: scale(1.04); } }
html.js-motion .resgate-foto img { animation: kenburns 24s linear infinite alternate; animation-play-state: paused; }
html.js-motion .resgate-foto.is-in img { animation-play-state: running; }
html.js-motion.js-hidden .resgate-foto img { animation-play-state: paused; }

/* lista anônima (aria-hidden): barra cinza + risco + X em --no. Nunca sob texto.
   Acesas: mobile 2ª, 4ª, 6ª de 6 (data-lit~="m"); desktop 2ª, 5ª, 8ª de 9 (data-lit~="d").
   Acender = risco scaleX 1→0 (origem direita) · camada mint por opacity (cor não anima) · X→check por crossfade de dois paths
   com ponta de luz no mesmo trajeto. 400 ms --ease-out por linha, stagger 300 ms (--i 0/1/2).
   Camada inativa = display: none (nenhum opacity 0 no estado final); o crossfade usa display allow-discrete + @starting-style. */
.lista { display: grid; gap: 8px; order: -1; margin: 0; }
.lista li { position: relative; display: grid; grid-template-columns: 1fr 12px; align-items: center; column-gap: 10px; height: 12px; }
.lista .barra { position: relative; display: block; height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 12%, transparent); overflow: clip; }
.lista .barra-mint { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--mint) 55%, transparent); display: none; opacity: 1; }
.lista .risco { position: absolute; left: 0; right: 22px; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--on-dark-soft) 60%, transparent); transform-origin: right; transform: scaleX(1); }
.lista .mark { width: 12px; height: 12px; overflow: visible; }
.lista .mark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lista .x { stroke: var(--no); display: block; opacity: 1; }
.lista .ok { stroke: var(--mint); stroke-dasharray: 1; stroke-dashoffset: 0; display: none; opacity: 1; }
.lista .fio-head { offset-path: path("M3 8.5 L6.5 12 L13 4.5"); offset-rotate: 0deg; offset-distance: 100%; display: none; opacity: 1; }
@supports not (offset-path: path("M0 0")) { .lista .fio-head { display: none !important; } }
.lista li:nth-child(4), .lista li:nth-child(5) { --i: 1; }
.lista li:nth-child(6), .lista li:nth-child(8) { --i: 2; }
/* estado acesa (final) por breakpoint */
@media (max-width: 899px) {
  .lista li:nth-child(n+7) { display: none; }
  .lista li[data-lit~="m"] .risco { transform: scaleX(0); }
  .lista li[data-lit~="m"] .x { display: none; opacity: 0; }
  .lista li[data-lit~="m"] :is(.barra-mint, .ok, .fio-head) { display: block; }
}
@media (min-width: 900px) {
  .resgate { min-height: 72svh; padding: 96px 0; }
  .resgate::before { background: linear-gradient(0deg, var(--sun), var(--sun)), linear-gradient(90deg, color-mix(in srgb, var(--navy-deep) 80%, transparent) 0 62%, color-mix(in srgb, var(--navy-deep) 40%, transparent)); }
  .resgate-grid { grid-template-columns: 7fr 5fr; gap: 64px; }
  .lista { order: 0; gap: 14px; }
  .lista li { height: 16px; grid-template-columns: 1fr 14px; }
  .lista .barra { height: 10px; }
  .lista .risco { right: 24px; }
  .lista .mark { width: 14px; height: 14px; }
  .lista li[data-lit~="d"] .risco { transform: scaleX(0); }
  .lista li[data-lit~="d"] .x { display: none; opacity: 0; }
  .lista li[data-lit~="d"] :is(.barra-mint, .ok, .fio-head) { display: block; }
}
/* estado inicial do momento 6 (só sob html.js-motion; motion.js liga .is-on por IO) — vence os estados acesos pela especificidade */
html.js-motion [data-momento="6"]:not(.is-on) .lista li .risco { transform: scaleX(1); }
html.js-motion [data-momento="6"]:not(.is-on) .lista li .x { display: block; opacity: 1; }
html.js-motion [data-momento="6"]:not(.is-on) .lista li :is(.barra-mint, .ok, .fio-head) { display: none; }
/* o gesto: 400 ms por linha, stagger 300 ms; o X some no fim (display allow-discrete); mint/check/ponta nascem de @starting-style */
html.js-motion .lista li { --d: calc(var(--i, 0) * 300ms); }
html.js-motion .lista .risco { transition: transform 400ms var(--ease-out) var(--d); }
html.js-motion .lista .x { transition: opacity 400ms var(--ease-out) var(--d), display 400ms allow-discrete var(--d); }
html.js-motion .lista :is(.barra-mint, .ok, .fio-head) { transition: opacity 400ms var(--ease-out) var(--d), stroke-dashoffset 400ms var(--ease-out) var(--d), offset-distance 400ms var(--ease-out) var(--d); }
@starting-style {
  html.js-motion .lista :is(.barra-mint, .ok, .fio-head) { opacity: 0; }
  html.js-motion .lista .ok { stroke-dashoffset: 1; }
  html.js-motion .lista .fio-head { offset-distance: 0%; }
}

/* 7. A distribuidora é sua — única foto full-bleed (sem raio) ---------------- */
.distribuidora { padding: 72px 0 0; overflow: clip; }
.distribuidora-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; }
/* mobile (§ 6.7): slogan → foto 16/9 full-bleed (sem gutter) → bullets → botão */
@media (max-width: 1023px) {
  .distribuidora-texto { display: contents; }
  .distribuidora-texto .sec-head { order: 1; }
  .distribuidora-foto { order: 2; }
  .distribuidora-texto .contrast { order: 3; margin: 0; }
  .distribuidora-texto .cta-row { order: 4; margin-top: 0; }
}
/* slogan como H2: cada frase em UMA linha (span em bloco, nowrap); tamanho calibrado à coluna.
   Rodada de ajustes (A4): onde há wdth 92 a pilha usa as faces "Bricolage Fallback 92" (size-adjust compensado) — base.css § 4 */
.slogan-h2 { font-size: clamp(28px, 8vw, 48px); font-stretch: 92%; font-family: "Bricolage Grotesque", "Bricolage Fallback 92", "Bricolage Fallback 92 Roboto", system-ui, sans-serif; }
.slogan-h2 .l1, .slogan-h2 .l2 { display: block; white-space: nowrap; }
.slogan-h2 .l1 { color: var(--on-dark); }
.slogan-h2 .l2 { color: var(--mint); }
.contrast { display: grid; gap: 0; margin: 8px 0; }
.contrast li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: var(--hairline) solid var(--line-dark); }
.contrast li:last-child { border-bottom: var(--hairline) solid var(--line-dark); }
.contrast .ico { width: 28px; height: 28px; margin-top: 2px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.contrast b { display: block; color: var(--white); font-size: 16px; margin-bottom: 2px; }
.contrast span { color: var(--on-dark); font-size: var(--fs-small); line-height: 1.55; }
.distribuidora-texto .cta-row { margin-top: 24px; padding-bottom: 24px; } /* varredura de vazios: 40→24 (soma com o topo de #o-que-voce-ganha no mobile) */
.distribuidora-foto { margin: 0 calc(-1 * var(--gutter)); --mask-r: 0px; background: var(--navy-2); } /* fundo = buraco do lazy em 4G não é navy puro (V2 § 8) */
.distribuidora-foto picture { height: 100%; }
.distribuidora-foto img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Rodada de ajustes (V1, A3): os ícones 09/10/11 nascem prontos — o desenho (DS3) contava como puxada de olho no scroll de 10 s; os <li> continuam com o reveal padrão.
   A máscara da foto (e a da faixa do método) deixa de ser dirigida pelo scroll: data-mask="time" no HTML → reveal por tempo (base.css § 9, motion.js § 1.2). */
@media (min-width: 1024px) {
  .distribuidora { padding: 0; }
  .distribuidora-grid { grid-template-columns: 6fr 6fr; gap: 0; }
  .distribuidora-texto { padding: 112px 48px 112px 0; }
  .slogan-h2 { font-size: clamp(34px, 3.4vw, 52px); font-stretch: 100%; font-family: var(--font-display); }
  /* a foto ocupa a altura inteira da seção, da metade até a borda da viewport; máscara linear 18 %; sem raio */
  .distribuidora-foto {
    position: absolute; inset: 0 0 0 50%; margin: 0; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--white) 18%); mask-image: linear-gradient(90deg, transparent, var(--white) 18%);
  }
  .distribuidora-foto picture, .distribuidora-foto img { width: 100%; height: 100%; }
  .distribuidora-foto img { aspect-ratio: auto; }
}

/* reduced-motion: Ken Burns parado; rota e lista já nascem completas (não há html.js-motion) */
@media (prefers-reduced-motion: reduce) {
  .resgate-foto img { animation: none; transform: none; }
}

/* cap:IV */
/* ============================================================================
   cap-IV.css — Capítulo IV (claro): o que você ganha (escada), como funciona
   (momento 7a, trilho), atendimento (pull-quotes), FAQ.
   Fase 3 (agente C): estado final é o padrão; estados iniciais só sob
   html.js-motion; view() sob @supports com fallback .is-in/.is-on (motion.js).
   Só data: URIs. Nenhum hex (tokens). Traço em capítulo claro = --mint-ink.
   ========================================================================== */

/* 8. O que você ganha — escada tipográfica, sem cards ------------------------ */
.ganha { padding: 24px 0 24px; } /* varredura de vazios: 64→24/80→24 */
.ganha-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.escada { display: grid; gap: 0; border-top: var(--hairline) solid var(--line); }
.escada .item { padding: 24px 0; border-bottom: var(--hairline) solid var(--line); }
.escada .item-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
/* escada: 600 → 700 → 800 e wdth 90 → 95 → 100 (estático; a Bricolage entregue tem wdth 90–100) */
.escada h3 { font-size: 36px; line-height: 1.02; letter-spacing: -.03em; margin: 0; color: var(--navy); white-space: nowrap; }
.escada .item:nth-child(1) h3 { font-weight: 600; font-stretch: 90%; }
.escada .item:nth-child(2) h3 { font-weight: 700; font-stretch: 95%; }
.escada .item:nth-child(3) h3 { font-weight: 800; font-stretch: 100%; }
.escada .mais { color: var(--mint-ink); }
/* ícones 01/02/03 a 32 px: desenham ao entrar (dashoffset herdado pelo <use>; cor --ink, nunca mint) */
.escada .ico { width: 32px; height: 32px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.escada p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); max-width: 44ch; text-wrap: pretty; }
/* o PDF: tile largo; entra uma vez com máscara de baixo para cima + escala 1.06→1 em 800 ms (sem 3D nem parallax) */
.pdf { --mask-r: var(--r-3); border-radius: var(--r-3); overflow: clip; margin: 8px 0 0; background: var(--paper-2); } /* fundo = buraco do lazy em 4G não é branco (V2 § 8) */
.pdf img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ganha-cta { margin-top: 24px; }
@media (min-width: 1024px) {
  .ganha { padding: 48px 0 40px; } /* varredura de vazios: 104→48/112→40 */
  /* 5/7: texto + botão na coluna 1, escada na coluna 2 (rows 1–2); a foto ocupa as 12 colunas logo abaixo (Ajustes do dono, 25/09 tarde: sem vazio ao lado da foto) */
  .ganha-grid { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr auto; gap: 24px 64px; }
  .ganha-texto { grid-column: 1; grid-row: 1; }
  /* Rodada de ajustes (V2 § 4): H2 sem órfã em 1440 — cada frase numa linha (span em bloco) e tamanho que cabe em 5 col ("Mais venda no caixa." ≤ 453 px até 48 px) */
  .ganha-texto h2 { font-size: clamp(32px, 3.3vw, 48px); }
  .ganha-texto h2 span { display: block; }
  .ganha-cta { grid-column: 1; grid-row: 2; align-self: start; margin-top: 24px; }
  .escada { grid-column: 2; grid-row: 1 / span 2; }
  .escada .item { padding: 24px 0; } /* 32→24: as duas colunas terminam a menos de 32 px uma da outra */
  .escada h3 { font-size: var(--fs-escada); }
  .pdf { grid-column: 1 / -1; grid-row: 3; margin-top: 24px; } /* 24 (gap da grade) + 24 = 48 px acima da foto */
  .pdf img { aspect-ratio: 2 / 1; object-position: 50% 40%; }
}
/* G2 — Rodada de ajustes (V1, A3): os ícones da escada nascem prontos (o desenho contava como puxada de olho no scroll de 10 s); o item continua com o reveal padrão */
/* G3 — máscara do PDF de baixo para cima (inset(100% 0 0 0) → inset(0)) + escala 1.06→1, 800 ms, por TEMPO a partir de .is-in
   (data-mask="time": nunca dirigida pelo scroll — base.css § 9 zera a animação view(); estas regras, mais específicas, refinam direção e duração) */
html.js-motion .pdf[data-mask] picture { transition: clip-path var(--dur-count) var(--ease-out); }
html.js-motion .pdf[data-mask] img { transition: transform var(--dur-count) var(--ease-out); }
html.js-motion .pdf[data-mask]:not(.is-in) picture { clip-path: inset(100% 0 0 0); }
html.js-motion .pdf[data-mask]:not(.is-in) img { transform: scale(1.06); }

/* 9. Como funciona (momento 7a) — compacta, sem sticky ----------------------- */
/* Pronto quando: ≤ 100svh em 1440×900 e ≤ 180svh em 360×740 (alturas medidas no MAPA, Fase 3 C). */
.como { padding: 24px 0 24px; } /* varredura de vazios: 56→24/64→24 */
.como-head { max-width: 60ch; margin-bottom: 32px; }
.como-head .body { font-size: var(--fs-small); line-height: 1.5; }
.passos-wrap { position: relative; }
.trilho { display: none; }
.passos { display: grid; gap: 16px; }
/* mobile: miniatura 72 px à esquerda, número + título + corpo à direita; trilho vertical PELA COLUNA DOS NÚMEROS (Rodada de ajustes, V2 5a / V1 A1):
   o algarismo (16 px, tabular) sai 14 px para dentro do gap de 24 px (caixa a 82 px, centro ≈ 90 px) e o trilho corre a x = 89–91 px, do pé de um
   número ao topo do seguinte — contínuo e visível, nunca atrás das miniaturas nem sobre o texto (que começa em 96 px). */
.passo { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 0 24px; align-items: start; --mini-h: calc(72px * 988 / 499); --trilho-x: 89px; }
.passo .num { grid-column: 2; position: relative; z-index: 1; width: fit-content; font: 800 28px/1 var(--font-display); letter-spacing: -.03em; color: var(--muted-dark); margin: 0 0 4px -14px; font-variant-numeric: tabular-nums; }
.passo .num.is-lit { color: var(--mint-ink); } /* cor por classe, sem transição (motion.js liga .is-lit nos tempos do MAPA § 3.3) */
.passo .fatia { grid-column: 1; grid-row: 1 / span 3; position: relative; z-index: 1; width: 72px; height: var(--mini-h); border: var(--hairline) solid var(--line); border-radius: var(--r-2); background: var(--white); --mask-r: var(--r-2); }
.passo .fatia img { width: 100%; height: 100%; object-fit: contain; }
.passo-texto { grid-column: 2; }
.passo-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.passo-titulo .ico { width: 24px; height: 24px; }
.passo h3 { font: 600 16px/1.3 var(--font-text); letter-spacing: -.01em; margin: 0; color: var(--navy); }
.passo p { font-size: 14px; line-height: 1.5; color: var(--ink); max-width: 34ch; text-wrap: pretty; }
/* trilho mobile: 4 vãos número-a-número (do pé do número i, y = 28 px, ao topo do número i+1, atravessando o gap de 16 px): pontilhado (::before) + traço --mint-ink (::after, scaleY) */
.passo::before, .passo::after { content: ""; position: absolute; left: var(--trilho-x); top: 28px; bottom: -16px; width: 2px; z-index: 0; }
.passo::before { background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px 8px); }
.passo::after { background: var(--mint-ink); transform-origin: top; transform: scaleY(1); }
.passo:last-child::before, .passo:last-child::after { content: none; }
/* o 4º vão termina 5 px acima do topo do "5": é onde a ponta pousa, visível, no fim */
.passo:nth-last-child(2)::before, .passo:nth-last-child(2)::after, .passo:nth-last-child(2) .seg-head { bottom: -11px; }
/* ponta de luz mobile: cada .seg-head é o trilho de translação do seu vão (a ponta é o ::before/::after na base); a 5ª fica parada sobre o topo do "5" */
.passo .seg-head { display: block; left: var(--trilho-x); top: 28px; bottom: -16px; width: 2px; height: auto; margin: 0; z-index: 0; visibility: hidden; transform: translateY(0); }
.passo .seg-head::before { inset: auto auto -9px -8px; width: 18px; height: 18px; }
.passo .seg-head::after { inset: auto auto -3px -2px; width: 6px; height: 6px; }
.passo:last-child .seg-head { top: -5px; bottom: auto; height: 0; z-index: 2; visibility: visible; }
.como .cta-row { margin-top: 32px; }
@media (min-width: 1024px) {
  .como { padding: 40px 0 40px; } /* varredura de vazios: 64→40/64→40 */
  /* cabeçalho apertado: eyebrow/H2/subtítulo em 5 col; corpo ao lado (7 col), alinhado ao pé do subtítulo */
  .como-head { max-width: none; display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: end; margin-bottom: 36px; }
  .como-head > * { grid-column: 1; }
  .como-head .eyebrow { margin-bottom: 14px; }
  .como-head h2 { font-size: clamp(32px, 2.9vw, 42px); margin-bottom: 14px; }
  .como-head .lede { margin-bottom: 0; }
  .como-head .body { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; max-width: 46ch; }
  .como .cta-row { margin-top: 24px; }
  .passos { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .passo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; --num-h: 40px; }
  .passo::before, .passo::after { content: none; }
  .passo .seg-head { display: none; }
  .passo .num { position: relative; z-index: 1; font-size: var(--num-h); line-height: var(--num-h); height: var(--num-h); margin-bottom: 12px; padding: 0 12px; background: var(--bg); }
  /* fatia 200 px de altura, largura proporcional (≈ 101 px), centrada na coluna */
  .passo .fatia { width: calc(200px * 499 / 988); height: 200px; margin-bottom: 16px; }
  .passo-texto { display: flex; flex-direction: column; align-items: center; }
  .passo-titulo { flex-direction: column; gap: 8px; margin-bottom: 6px; }
  .passo h3 { font-size: 17px; }
  .passo p { font-size: var(--fs-small); max-width: 24ch; }
  /* trilho horizontal pelo centro dos números: do centro do nº 1 (sob o número) à borda esquerda da caixa do nº 5 (meia coluna de cada borda; gap 24 × 4 = 96;
     a caixa do número tem 47 px com tabular-nums → termina 27 px antes do centro do 5, para a ponta ficar visível encostada no número, não sob o fundo dele) */
  .trilho { display: block; position: absolute; top: calc(var(--num-h, 44px) / 2 - 1px); left: calc((100% - 96px) / 10); right: calc((100% - 96px) / 10 + 27px); height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 8px); }
  .trilho .fio { position: absolute; inset: 0; width: 100%; height: 100%; }
  .trilho .fio path { vector-effect: none; stroke-width: 2; } /* reta esticável: ver cap-II (non-scaling-stroke tracejaria o pathLength) */
  .trilho .fio-track { position: absolute; inset: 0; transform: translateX(0); }
  .trilho .fio-track .fio-head { right: -9px; top: 1px; }
}
/* M7a — estado inicial (só sob html.js-motion; motion.js liga .is-on por IO threshold .3, uma vez) */
html.js-motion [data-momento="7"]:not(.is-on) .trilho .fio path { stroke-dashoffset: 1; }
html.js-motion [data-momento="7"]:not(.is-on) .trilho .fio-track { transform: translateX(-100%); }
html.js-motion [data-momento="7"]:not(.is-on) .passo .num { color: var(--muted-dark); } /* rede de segurança: sem .is-on nenhum número aceso */
html.js-motion [data-momento="7"]:not(.is-on) .passo::after { transform: scaleY(0); }
html.js-motion [data-momento="7"]:not(.is-on) .passo:last-child .seg-head { opacity: 0; }
/* desktop: um traço só, de uma vez, 1 200 ms --ease-inout; a ponta viaja no trilho de translação na mesma duração/easing */
html.js-motion [data-momento="7"] .trilho .fio path { transition: stroke-dashoffset var(--dur-trilho) var(--ease-inout); }
html.js-motion [data-momento="7"] .trilho .fio-track { transition: transform var(--dur-trilho) var(--ease-inout); }
/* mobile (Rodada de ajustes, V1 A1): 4 vãos × 150 ms lineares = 600 ms (o gesto de 1 200 ms não cabia na passagem da seção num flick);
   ponta visível só no seu vão (fill-mode none); a 5ª acende ao fim (600 ms); motion.js acende os números em 0/150/300/450/600 ms */
html.js-motion [data-momento="7"].is-on .passo::after { transition: transform 150ms linear; }
html.js-motion [data-momento="7"].is-on .passo:nth-child(2)::after { transition-delay: 150ms; }
html.js-motion [data-momento="7"].is-on .passo:nth-child(3)::after { transition-delay: 300ms; }
html.js-motion [data-momento="7"].is-on .passo:nth-child(4)::after { transition-delay: 450ms; }
@keyframes seg-head-go { from { transform: translateY(-100%); visibility: visible; } to { transform: translateY(0); visibility: visible; } }
@keyframes seg-head-end { from { opacity: 0; } to { opacity: 1; } }
html.js-motion [data-momento="7"].is-on .passo:not(:last-child) .seg-head { animation: seg-head-go 150ms linear 0ms 1 normal none; }
html.js-motion [data-momento="7"].is-on .passo:nth-child(2) .seg-head { animation-delay: 150ms; }
html.js-motion [data-momento="7"].is-on .passo:nth-child(3) .seg-head { animation-delay: 300ms; }
html.js-motion [data-momento="7"].is-on .passo:nth-child(4) .seg-head { animation-delay: 450ms; }
html.js-motion [data-momento="7"].is-on .passo:last-child .seg-head { animation: seg-head-end 1ms linear 600ms 1 normal both; }
/* 7·c — fatias: reveal (Camada C) com stagger 60 ms a partir do mesmo gatilho */
html.js-motion .passo .fatia[data-reveal] { transition-delay: calc(var(--stagger, 0) * 60ms); }

/* 10. Atendimento e prova social — pull-quotes 12 × 2 ------------------------- */
.atendimento { padding: 24px 0 24px; } /* varredura de vazios: 72→24/80→24 */
.atendimento-top { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.atendimento-texto .ico-lg { width: 32px; height: 32px; margin-bottom: 16px; }
.atendimento-foto { --mask-r: var(--r-3); border-radius: var(--r-3); overflow: clip; margin: 0; background: var(--paper-2); }
.atendimento-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.quotes-bloco { margin-top: 56px; }
.quotes-titulo { font-size: 24px; margin-bottom: 24px; }
.quotes { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.quote { margin: 0; padding: 28px 24px 24px; background: var(--paper-2); border: var(--hairline) solid var(--line); border-radius: var(--r-2); container-type: inline-size; }
/* aspas por quotes, penduradas fora da medida: text-indent onde não há hanging-punctuation (evita pendurar duas vezes no Safari) */
.quote blockquote { quotes: "\201C" "\201D"; }
.quote blockquote p { font: 500 20px/1.35 var(--font-display); letter-spacing: -.01em; color: var(--navy); text-wrap: pretty; text-indent: -.45em; hanging-punctuation: first; }
@supports (hanging-punctuation: first) { .quote blockquote p { text-indent: 0; } }
.quote blockquote p::before { content: open-quote; }
.quote blockquote p::after { content: close-quote; }
.quote--1 blockquote p { font-size: 24px; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.quote .avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--navy); font: 700 13px/1 var(--font-text); letter-spacing: .04em; flex: none; }
.quote cite { font-style: normal; font-size: var(--fs-small); font-weight: 600; color: var(--navy); }
/* A2 — pull-quotes: reveal com stagger 60 ms */
html.js-motion .quote[data-reveal] { transition-delay: calc(var(--stagger, 0) * 60ms); }
@media (min-width: 1024px) {
  .atendimento { padding: 40px 0; } /* varredura de vazios: 112→40 */
  .atendimento-top { grid-template-columns: 6fr 6fr; gap: 64px; }
  .atendimento-foto img { aspect-ratio: 4 / 5; }
  .quotes-bloco { margin-top: 48px; } /* varredura de vazios: 96→48 (vazio dentro da seção, entre o bloco superior e as pull-quotes) */
  .quotes-titulo { font-size: 28px; margin-bottom: 32px; }
  .quotes { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 24px; align-items: stretch; }
  .quote { padding: 32px; display: flex; flex-direction: column; }
  /* Ajustes do dono (25/09, tarde): o Thiago vira uma linha inteira (12 col) com a citação grande e o nome logo abaixo, sem card esticado nem vazio;
     Carlos e Maycon dividem a linha de baixo (6/6, alturas iguais) com o nome preso ao pé de cada card */
  .quote figcaption { margin-top: auto; padding-top: 12px; } /* nome preso ao pé; a diferença de uma linha entre os dois cards vira ≤ 39 px de ar */
  .quote--1 { grid-column: 1 / -1; grid-row: 1; }
  .quote--1 blockquote p { font-size: 30px; max-width: 60ch; text-wrap: pretty; }
  .quote--1 figcaption { margin-top: 0; padding-top: 24px; }
  .quote--2 { grid-column: 1 / span 6; grid-row: 2; }
  .quote--3 { grid-column: 7 / span 6; grid-row: 2; }
}

/* 11. Perguntas — --paper-2, hairlines, sem cards, sem reveal ---------------- */
/* <details> sem name (várias abertas, nenhuma fecha sozinha); ::details-content anima em base.css sob os dois @supports; fora deles, sem animação */
.faq { background: var(--paper-2); padding: 24px 0 calc(64px + 96px); } /* varredura de vazios: topo 72→24 (o pé mantém a folga da barra fixa mobile, ≈ 88 px) */
.faq-head { max-width: 60ch; margin-bottom: 32px; }
.faq-list { max-width: 860px; border-top: var(--hairline) solid var(--line); }
.faq details { border-inline-start: 2px solid transparent; padding-left: 14px; margin-left: -16px; }
.faq details[open] { border-inline-start-color: var(--mint-ink); } /* borda aberta = --mint-ink (mint puro a 1,17:1 sobre --paper-2 não se vê) */
.faq summary { padding: 16px 0; font: 600 17px/1.35 var(--font-text); }
.faq summary .chev { color: var(--mint-ink); }
.faq details .a p { padding: 0 0 20px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); max-width: 66ch; text-wrap: pretty; }
.faq-cta { margin-top: 40px; }
@media (min-width: 900px) {
  .faq { padding: 40px 0 40px; } /* varredura de vazios: 112→40 (desktop não tem barra fixa mobile) */
  .faq-head { margin-bottom: 40px; }
  .faq summary { padding: 18px 0; }
}

/* cap:V */
/* ============================================================================
   cap-V.css — Capítulo V (escuro): CTA final (momento 7b) e rodapé.
   Fase 3 (agente C): estado final é o padrão; inicial só sob html.js-motion.
   content-visibility só em #cta-final (MAPA § 9), contain-intrinsic-size medido.
   ========================================================================== */

/* 12. CTA final --------------------------------------------------------------- */
.final {
  --final-pt: 80px;
  padding: var(--final-pt) 0 64px; overflow: clip; isolation: isolate; /* Rodada de ajustes (V2 3c): sem os +96 px para a barra — ela fica oculta enquanto o .btn--final está na tela */
  content-visibility: auto; contain-intrinsic-size: auto 733px; /* content-box; a seção mede 973 px em 360×740 (Fase 3 C) */
}
.final-foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.final-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* parada: sem Ken Burns */
/* overlay navy 82 % em toda a área com texto; afina a 30 % só nas bordas laterais e superior sem texto (MAPA § 4.4: ≥ 80 %).
   Uma camada navy 82 % recortada por duas máscaras (interseção): horizontal (coluna de texto ±470 px) e vertical (faixa acima do H2).
   Sem mask-composite, a união das máscaras mantém ≥ 82 % sob todo o texto (só os cantos afinam). + --sun. */
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--sun), var(--sun)), color-mix(in srgb, var(--navy) 82%, transparent);
  -webkit-mask-image:
    linear-gradient(90deg, color-mix(in srgb, var(--white) 37%, transparent) 0, var(--white) max(72px, calc(50% - 470px)), var(--white) min(calc(100% - 72px), calc(50% + 470px)), color-mix(in srgb, var(--white) 37%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--white) 37%, transparent) 0, var(--white) calc(var(--final-pt) - 16px), var(--white) 100%);
  mask-image:
    linear-gradient(90deg, color-mix(in srgb, var(--white) 37%, transparent) 0, var(--white) max(72px, calc(50% - 470px)), var(--white) min(calc(100% - 72px), calc(50% + 470px)), color-mix(in srgb, var(--white) 37%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--white) 37%, transparent) 0, var(--white) calc(var(--final-pt) - 16px), var(--white) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.final-in { max-width: 820px; }
.final .lede { font-weight: 600; color: var(--white); }
/* "sim": o último sublinhado (2 px --mint, scaleX) */
.final .sim { color: var(--mint); position: relative; white-space: nowrap; }
.final .sim::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: var(--fio); background: currentColor; transform: scaleX(1); transform-origin: left; }
/* chips hairline com fundo --navy-deep a 80 % (contraste ≥ 11:1 no pior caso, MAPA § 4.4); */
.chips { display: flex; flex-direction: column; gap: 10px; margin: 0 0 32px; }
.chips .chip { justify-content: center; text-align: center; min-height: 44px; padding: 10px 18px; font-size: var(--fs-small); line-height: 1.4; color: var(--on-dark); background: color-mix(in srgb, var(--navy-deep) 80%, transparent); border-color: var(--line-dark); display: block; text-wrap: pretty; }
.chips .chip b { color: var(--white); }
.btn--final { width: 100%; }
/* ponta de luz: destino = centro da borda superior do botão (padrão CSS: estática no destino) */
.btn--final .fio-head { top: 0; left: 50%; }
/* linha de topo do botão que acende quando a luz chega (estado final: acesa; box-shadow nunca anima) */
.btn--final::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 1; transition: opacity var(--dur-2) var(--ease-out); background: none; border-top: 1px solid color-mix(in srgb, var(--mint) 55%, transparent); }
.final .micro { margin-top: 20px; color: var(--on-dark); }
.final .micro a { color: var(--mint); }
@media (min-width: 900px) {
  .final { --final-pt: 128px; padding: var(--final-pt) 0 128px; contain-intrinsic-size: auto 548px; } /* content-box; a seção mede 804 px em 1440×900 (Fase 3 C) */
  .chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .chips .chip { display: inline-flex; min-height: 40px; }
  .btn--final { width: auto; min-width: 280px; }
}
/* M7b — estado inicial (só sob html.js-motion; motion.js liga .is-on por IO threshold .5, uma vez).
   Sequência só por CSS a partir de .is-on: sublinhado 600 ms --ease-out → ponta viaja 500 ms --ease-inout (delay 600) → linha do botão 200 ms (delay 1100).
   O caminho da ponta é --fio-d (string), preenchido por motion.js no .btn--final ANTES de .is-on. Semântica medida em Chromium, WebKit e Firefox
   (work/ibsfinanciamento/landing/f3c-offset-test.mjs): a origem das coordenadas de path() é o canto superior esquerdo da caixa da PRÓPRIA ponta na posição normal
   (18×18, centro no topo do botão) e a âncora (centro) pousa no ponto. Logo, com hr = .fio-head.getBoundingClientRect() lido com offset-path none
   (antes de definir --fio-d), s = .sim.getBoundingClientRect(), fs = font-size do .sim:
   x0 = s.right − hr.left; y0 = s.bottom + .08·fs + 1 − hr.top; xb = hr.width/2 (= 9); yb = hr.height/2 (= 9);
   y1 = y0 + .4·(yb − y0); y2 = yb − .4·(yb − y0); --fio-d: "M x0 y0 C x0 y1 xb y2 xb yb".
   Sem --fio-d ou sem offset-path: a ponta aparece no destino aos 600 ms (só a luz acende). */
html.js-motion [data-momento="7"].final:not(.is-on) .sim::after { transform: scaleX(0); }
html.js-motion [data-momento="7"].final:not(.is-on) .btn--final::before { opacity: 0; }
html.js-motion [data-momento="7"].final:not(.is-on) .btn--final .fio-head { opacity: 0; offset-distance: 0%; }
html.js-motion [data-momento="7"].final .sim::after { transition: transform var(--dur-reveal) var(--ease-out); }
html.js-motion [data-momento="7"].final .btn--final .fio-head {
  offset-path: path(var(--fio-d)); offset-rotate: 0deg; offset-distance: 100%;
  transition: offset-distance 500ms var(--ease-inout) var(--dur-reveal), opacity 1ms linear var(--dur-reveal);
}
html.js-motion [data-momento="7"].final .btn--final::before { transition: opacity var(--dur-2) var(--ease-out) 1100ms; }
/* Rodada de ajustes (V2 3b / V1 A2), abaixo de 900: o gatilho é o próprio .btn--final visível (IO ≈ .9, motion.js § 1.5) e a sequência encurta —
   sublinhado 400 ms → ponta viaja 400 ms a partir de 250 ms → linha do botão aos 650 ms (total 850 ms): tudo acontece com o botão na tela */
@media (max-width: 899px) {
  html.js-motion [data-momento="7"].final .sim::after { transition-duration: 400ms; }
  html.js-motion [data-momento="7"].final .btn--final .fio-head { transition: offset-distance 400ms var(--ease-inout) 250ms, opacity 1ms linear 250ms; }
  html.js-motion [data-momento="7"].final .btn--final::before { transition-delay: 650ms; }
}

/* Rodapé — --navy-deep, grid 4/4/4, sem animação ------------------------------ */
.rodape { background: var(--navy-deep); color: var(--on-dark); padding: 56px 0 40px; }
.rodape-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.rodape .logo { color: var(--white); margin-bottom: 16px; }
.rodape .logo-mark { width: 180px; height: 34px; transition: none; }
.rodape-frase { font-size: var(--fs-small); line-height: 1.6; color: var(--on-dark); max-width: 44ch; text-wrap: pretty; }
.rodape-links { display: grid; grid-template-columns: 1fr; gap: 0; font-size: 14px; font-weight: 600; }
.rodape-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); border-radius: 4px; }
.rodape-links a:hover { color: var(--mint); }
.disclaimer { font-size: 14px; line-height: 1.6; color: var(--on-dark-soft); max-width: 68ch; text-wrap: pretty; }
.copyright { display: block; margin-top: 16px; font-size: var(--fs-caption); color: var(--on-dark-soft); }
@media (min-width: 900px) {
  .rodape { padding: 80px 0 48px; }
  .rodape-grid { grid-template-columns: 4fr 4fr 4fr; gap: 48px; align-items: start; }
  .rodape-links { grid-template-columns: 1fr 1fr; gap: 0 24px; }
}