/* ============================================================
   FAVER GROWTH — protótipo de site (rodada 4, 17/08/2026)
   Snapshot de tokens. Fonte canônica da marca:
   clientes/_faver/dossie/brand/01_Guia_da_Marca/Faver_Growth_Brand_Kit.md
   e .../03_Tipografia/Faver_Growth_Guia_Tipografico_Plus_Jakarta_Sans.md
   Tokens de duração e curva: cockpit/capacidades/site/keydocs/03.
   Snapshot e fonte devem permanecer sincronizados (keydoc 04).
   Não existe sexta cor: todo valor abaixo é um dos cinco HEX,
   puro ou com alfa.
   ============================================================ */

@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("assets/fonts/PlusJakartaSans-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("assets/fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* paleta — os cinco, e não existe sexto */
  --navy:#011E3B;
  --cream:#F4ECDE;
  --gold:#D6A62E;
  --warm:#F7F2E8;
  --ink:#171717;

  /* derivados: sempre alfa de um dos cinco, nunca cor nova */
  --on-deep:           rgba(247,242,232,1);
  --on-deep-2:         rgba(247,242,232,.78);
  --on-deep-3:         rgba(247,242,232,.56);
  --on-deep-rule:      rgba(247,242,232,.16);
  --on-deep-rule-gold: rgba(214,166,46,.42);
  --on-light:          var(--ink);
  --on-light-2:        rgba(23,23,23,.74);
  --on-light-rule:     rgba(1,30,59,.16);

  /* raio — rodada 4. Arredondado subiu para o sistema todo, em escala. */
  --raio-ilha:999px;
  --raio-g:20px;
  --raio-m:12px;
  --raio-p:8px;

  /* grão: ruído acromático em mix-blend-mode:overlay. Overlay só modula
     luminosidade — não introduz cor nova. */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  /* movimento — keydoc 03. Um sistema só. */
  --t-feedback:160ms; --t-instant:180ms; --t-state:200ms;
  --t-fast:420ms;     --t-base:720ms;    --t-slow:1200ms;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-reveal:cubic-bezier(.65,0,.35,1);

  /* ritmo */
  --wrap:1200px;
  --gut:clamp(20px,5vw,48px);
  --sec-y:clamp(76px,9vw,140px);
  --cut:clamp(22px,3.6vw,58px);
  --barra:clamp(74px,7vw,92px);

  color-scheme:light;
  accent-color:var(--gold);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--on-light);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,.42vw + 15px,18px);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, NUNCA hidden: overflow-x:hidden no body faz o body virar
     contêiner de rolagem próprio e a página para de rolar de verdade —
     junto com a ilha, o scrollspy e o mapa, que escutam a janela. */
  overflow-x:clip;
}
html{overflow-x:clip}
img,svg{max-width:100%}
img{height:auto}

/* superfícies do navegador — elas também são a página */
::selection{background:var(--gold);color:var(--navy)}
:where(input,textarea){caret-color:var(--gold)}
html{scrollbar-color:var(--gold) var(--navy);scroll-behavior:smooth;
  scroll-padding-top:calc(var(--barra) + 24px)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--gold);border:3px solid var(--navy);border-radius:var(--raio-ilha)}
::-webkit-scrollbar-thumb:hover{background:var(--warm)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--raio-p)}
.field--light :focus-visible,.field--warm :focus-visible{outline-color:var(--navy)}

.vh{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{
  position:fixed;top:10px;left:10px;z-index:100;
  transform:translateY(-180%);
  background:var(--gold);color:var(--navy);
  padding:12px 18px;font-weight:600;text-decoration:none;border-radius:var(--raio-p);
  transition:transform var(--t-state) var(--e-out);
}
.skip:focus{transform:translateY(0)}

/* ---------- tipografia ---------- */
.label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.5}

h1,h2,h3{margin:0 0 .5em;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(44px,6.2vw,72px);font-weight:700;line-height:1.04}
h2{font-size:clamp(30px,3.6vw,48px);font-weight:700;line-height:1.12}
h3{font-size:clamp(21px,1.7vw,29px);font-weight:600;line-height:1.22;letter-spacing:-.015em}
p{margin:0 0 1.1em;max-width:68ch}
p:last-child{margin-bottom:0}
strong{font-weight:700}
.lead{font-size:clamp(18px,1.15vw + 14px,22px);line-height:1.55}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec-y)}
.sec--tight{padding-block:clamp(56px,6vw,96px)}
.col-copy{max-width:none}

.field--deep{background:var(--navy);color:var(--on-deep)}
.field--deep p{color:var(--on-deep-2)}
.field--deep .lead,.field--deep .closer{color:var(--on-deep)}
.field--light{background:var(--cream)}
.field--warm{background:var(--warm)}

/* ============================================================
   SISTEMA DE FUNDO (rodada 4) — variante A, escolhida pelo sócio
   Reprovação: "o fundo sem graça, cor estática".
   Duas camadas ATRÁS do conteúdo, nunca por cima:
   ::before = poças de luz (alfa das cinco cores) — a profundidade
   ::after  = grão em overlay — tira o chapado sem inventar cor
   Calibrado por campo: forte no marinho, quase nada no claro, porque
   é nos campos claros que mora o texto longo.
   ============================================================ */
.field,.foot,.nav{position:relative;isolation:isolate}
.field::before,.field::after,.foot::before,.foot::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.field::after,.foot::after{
  background-image:var(--grao);background-size:180px 180px;
  mix-blend-mode:overlay;opacity:.42}
.field--light::after,.field--warm::after{opacity:.22}
.field--deep::before,.foot::before{
  background-image:
    radial-gradient(115% 78% at 82% 4%, rgba(247,242,232,.11), transparent 58%),
    radial-gradient(85% 62% at 6% 96%, rgba(214,166,46,.075), transparent 60%);
}
.field--light::before,.field--warm::before{
  background-image:
    radial-gradient(96% 66% at 88% 2%, rgba(1,30,59,.05), transparent 60%),
    radial-gradient(70% 54% at 4% 98%, rgba(214,166,46,.05), transparent 62%);
}

/* corte diagonal — princípio "ângulo" da marca */
.cut-b{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);padding-bottom:calc(var(--sec-y) + var(--cut))}
.cut-t{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);padding-top:calc(var(--sec-y) + var(--cut));margin-top:calc(var(--cut) * -1)}
.cut-t.cut-b{clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%);padding-bottom:calc(var(--sec-y) + var(--cut))}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:clamp(14px,.2vw + 13.4px,16px);font-weight:600;
  letter-spacing:.005em;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--raio-ilha);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--t-state) var(--e-out),
             color var(--t-state) var(--e-out),
             border-color var(--t-state) var(--e-out),
             box-shadow var(--t-state) var(--e-out),
             transform var(--t-feedback) var(--e-out);
}
.btn--lg{padding:16px 30px;font-size:clamp(15px,.24vw + 14.2px,17px)}
.btn--xl{padding:20px 40px;font-size:clamp(16px,.3vw + 15px,19px)}
.btn--gold{background:var(--gold);color:var(--navy);box-shadow:0 3px 10px -4px rgba(1,30,59,.7)}
.btn--ghost{background:transparent;color:var(--on-deep);border-color:var(--on-deep-rule-gold)}
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{background:var(--warm);transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(23,23,23,.7)}
  .btn--ghost:hover{background:rgba(247,242,232,.08);border-color:var(--gold);transform:translateY(-2px)}
}
.btn:active{transform:scale(.97)}

/* ============================================================
   NAV — ilha flutuante (rodada 4)
   Referência do sócio: "centered rounded nav with glass effect and
   expanding card dropdowns".
   Dois estados: repouso = barra transparente de bordo a bordo;
   rolado = ilha de vidro, arredondada, descolada do topo.
   Só o bloco central se transforma; símbolo e CTA só descem junto.
   ============================================================ */
/* sem transição de padding: propriedade de layout não se anima
   (keydoc 04). Os dois estados têm a mesma altura de barra; o que muda
   é só a aparência do bloco central. */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  padding-block:clamp(14px,1.4vw,20px)}
.nav::before,.nav::after{content:none}
.nav__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.nav__logo{position:relative;display:flex;align-items:center;line-height:0;flex:0 0 auto;
  border-radius:var(--raio-p)}
.nav__sim{height:clamp(32px,3vw,40px);width:auto;display:block;
  transition:opacity var(--t-state) var(--e-out)}
.nav__sim--claro{position:absolute;left:0;top:0;opacity:0}
.nav[data-campo="claro"] .nav__sim--escuro{opacity:0}
.nav[data-campo="claro"] .nav__sim--claro{opacity:1}

.ilha{margin-inline:auto;border:1px solid transparent;border-radius:var(--raio-ilha);
  padding:5px;background:transparent;
  transition:background-color var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out),
             box-shadow var(--t-fast) var(--e-out),
             backdrop-filter var(--t-fast) var(--e-out);
}
.nav[data-estado="ilha"] .ilha{
  background:rgba(1,30,59,.74);
  border-color:var(--on-deep-rule-gold);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 30px -16px rgba(23,23,23,.9);
}
/* A página alterna campo escuro e claro. Uma ilha marinha sobre creme
   vira placa cinza com texto ilegível — então a barra lê o campo que
   está atrás dela e troca de lado. Combinações aprovadas pelo Brand Kit
   nos dois sentidos. */
.nav[data-campo="claro"][data-estado="ilha"] .ilha{
  background:rgba(247,242,232,.76);
  border-color:rgba(1,30,59,.22);
  box-shadow:0 10px 30px -18px rgba(1,30,59,.55);
}
.nav[data-campo="claro"] .ilha__link{color:rgba(23,23,23,.72)}
.nav[data-campo="claro"] .ilha__link[aria-current="true"],
.nav[data-campo="claro"] .ilha__link[aria-expanded="true"]{color:var(--navy)}
@media (hover:hover) and (pointer:fine){
  .nav[data-campo="claro"] .ilha__link:hover{color:var(--navy)}
}
.nav[data-campo="claro"] .ilha__fio{background:rgba(214,166,46,.26);
  border-color:rgba(1,30,59,.28)}
.nav[data-campo="claro"] .nav__cta{border-color:rgba(1,30,59,.32)}
.nav[data-campo="claro"] .nav__toggle{border-color:rgba(1,30,59,.3)}
.nav[data-campo="claro"] .nav__toggle span{background:var(--navy)}
.ilha__nav{position:relative;display:flex;align-items:center;gap:2px}
.ilha__link{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:15px;font-weight:500;color:var(--on-deep-2);
  background:none;border:0;cursor:pointer;text-decoration:none;
  padding:10px 18px;border-radius:var(--raio-ilha);
  transition:color var(--t-state) var(--e-out);
  white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){.ilha__link:hover{color:var(--on-deep)}}
.ilha__link[aria-current="true"],.ilha__link[aria-expanded="true"]{color:var(--on-deep)}
.ilha__seta{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:1.5;
  transition:transform var(--t-state) var(--e-out)}
.ilha__link[aria-expanded="true"] .ilha__seta{transform:rotate(180deg)}

/* fio deslizante — o indicador de seção ativa */
.ilha__fio{position:absolute;left:0;top:50%;height:calc(100% - 4px);
  transform:translate(var(--fx,0px),-50%) scaleX(0);transform-origin:left center;
  width:var(--fw,0px);border-radius:var(--raio-ilha);
  background:rgba(214,166,46,.16);border:1px solid var(--on-deep-rule-gold);
  opacity:0;pointer-events:none;
  transition:transform var(--t-fast) var(--e-out),opacity var(--t-state) var(--e-out)}
.ilha__nav[data-fio="on"] .ilha__fio{opacity:1;transform:translate(var(--fx,0px),-50%) scaleX(1)}

.ilha__item{position:relative}

/* card expansível de Serviços */
.card{
  position:absolute;top:calc(100% + 14px);left:50%;
  width:min(680px,calc(100vw - 2 * var(--gut)));
  transform:translateX(-50%);
  background:rgba(1,30,59,.9);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--on-deep-rule-gold);border-radius:var(--raio-g);
  box-shadow:0 24px 60px -30px rgba(23,23,23,.95);
  padding:clamp(18px,1.8vw,26px);
}
.card[hidden]{display:none}
.js .card{display:block;opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-8px) scale(.985);
  transition:opacity var(--t-instant) var(--e-out),transform var(--t-instant) var(--e-out),
             visibility 0s linear var(--t-instant)}
.js .card[data-aberto="true"]{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);transition-delay:0s}
.card__grid{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:1fr}
@media (min-width:560px){.card__grid{grid-template-columns:1fr 1fr;gap:2px 10px}}
.card__grid a{display:block;text-decoration:none;padding:11px 13px;border-radius:var(--raio-m);
  transition:background-color var(--t-state) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .card__grid a:hover{background:rgba(247,242,232,.07)}
}
.card__t{display:block;font-size:15px;font-weight:600;color:var(--on-deep);margin-bottom:2px}
.card__d{display:block;font-size:13px;line-height:1.4;color:var(--on-deep-3)}
.card__pe{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--on-deep-rule);
  font-size:13px;color:var(--on-deep-3) !important;max-width:none}

.nav__cta{flex:0 0 auto}
.nav__toggle{display:none;background:none;border:1px solid var(--on-deep-rule-gold);
  border-radius:var(--raio-ilha);width:46px;height:46px;padding:14px 12px;cursor:pointer;
  flex-direction:column;justify-content:space-between;flex:0 0 auto}
.nav__toggle span{display:block;height:1.5px;background:var(--gold);border-radius:2px;
  transition:transform var(--t-state) var(--e-out),opacity var(--t-state) var(--e-out)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.25px) rotate(-45deg)}

/* navegação em tela cheia (celular) */
.telona{position:fixed;inset:0;z-index:55;background:var(--navy);
  overflow-y:auto;padding:calc(var(--barra) + 24px) var(--gut) 48px}
.telona[hidden]{display:none}
.js .telona{display:block;opacity:0;visibility:hidden;
  transition:opacity var(--t-state) var(--e-out),visibility 0s linear var(--t-state)}
.js .telona[data-aberto="true"]{opacity:1;visibility:visible;transition-delay:0s}
.telona__in{display:flex;flex-direction:column;max-width:600px;margin-inline:auto}
.telona__l{font-size:clamp(28px,7vw,40px);font-weight:700;letter-spacing:-.02em;
  color:var(--on-deep);text-decoration:none;padding:14px 0;
  border-bottom:1px solid var(--on-deep-rule)}
.telona__sub{list-style:none;margin:0 0 8px;padding:14px 0;display:grid;gap:10px;
  border-bottom:1px solid var(--on-deep-rule)}
.telona__sub a{color:var(--on-deep-2);text-decoration:none;font-size:17px;
  display:inline-flex;align-items:center;min-height:44px}
.telona__cta{margin-top:28px;align-self:flex-start}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--barra) + clamp(24px,4vw,64px));
  padding-bottom:calc(var(--cut) + clamp(76px,8vw,120px));
  overflow:hidden}
.hero__in{position:relative;z-index:1;width:100%}
/* símbolo monumental: sangra pela borda direita, mas ainda tem que LER
   como o F da marca — cortado demais vira polígono aleatório */
.hero__marca{
  position:absolute;z-index:0;pointer-events:none;
  right:-7vw;top:50%;transform:translateY(-50%);
  height:min(88vh,880px);width:auto;max-width:none;
  /* DOURADO, por escolha do sócio (17/08): ele preferiu o F amarelo ao
     prata que o `luminosity` produzia. Sem filtro e sem blend — é o
     arquivo oficial em opacidade, sem pós-processamento do metal.
     Registro do custo: ouro alfa-misturado com marinho puxa para oliva,
     e o revisor tratou isso como matiz fora das cinco. Decisão dele. */
  opacity:.42;
}
.hero__h1{margin:0 0 clamp(26px,3vw,40px);line-height:1}
.hero__sig{width:clamp(268px,42vw,560px);height:auto;display:block}
.hero__sub{font-size:clamp(20px,1.6vw + 14px,30px);line-height:1.32;font-weight:500;
  color:var(--on-deep) !important;max-width:22ch;margin-bottom:clamp(28px,3.2vw,40px);
  letter-spacing:-.014em}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.hero__note{font-size:15px;color:var(--on-deep-2);max-width:46ch;margin:0}

.desce{position:absolute;left:50%;bottom:calc(var(--cut) + 26px);transform:translateX(-50%);
  z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:var(--on-deep-3);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.desce__l{display:block;width:1px;height:44px;
  background:linear-gradient(to bottom,var(--gold),rgba(214,166,46,0))}
@media (hover:hover) and (pointer:fine){.desce:hover{color:var(--on-deep)}}
@media (max-width:760px){.desce{display:none}}

/* ---------- o mapa: as frentes soltas que se organizam ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(40px,4.5vw,64px);
  margin-top:clamp(56px,6vw,96px);align-items:center}
@media (min-width:960px){.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.mapa{margin:0}
/* As peças interpolam entre a posição solta (--x/--y) e a alinhada
   (20% / --ty) por --p, que a rolagem controla. No fim, a borda esquerda
   das peças encosta na espinha: elas não estão perto do plano, estão
   presas nele. */
.mapa__campo{position:relative;height:clamp(390px,44vw,470px);
  width:100%;max-width:430px;margin-inline:auto;container-type:size}
.mapa__espinha{position:absolute;left:14%;top:0;bottom:2%;width:2px;
  background:var(--gold);border-radius:2px;transform-origin:top center;
  transform:scaleY(var(--p,0));opacity:var(--p,0);
  transition:transform var(--t-base) var(--e-out),opacity var(--t-state) linear}
/* A peca mora na posicao RESOLVIDA e e deslocada por transform ate a
   posicao solta. Animar left/top seria animar layout, que o keydoc 04
   proibe; 1cqw/1cqh dao a mesma referencia do contêiner sem sair do
   transform. */
.mapa__peca{
  position:absolute;left:14%;top:calc(var(--ty) * 1%);
  transform:translate(
    calc((var(--x) - 14) * (1 - var(--p,0)) * 1cqw),
    calc((var(--y) - var(--ty)) * (1 - var(--p,0)) * 1cqh));
  display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(104px,12vw,132px);padding:9px 16px;
  border:1px solid var(--on-deep-rule);border-radius:var(--raio-m);
  background:rgba(247,242,232,.03);
  font-size:clamp(13px,.5vw + 11px,15px);font-weight:500;color:var(--on-deep-2);
  transition:transform var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             background-color var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out);
}
.mapa[data-p="1"] .mapa__peca{border-color:var(--on-deep-rule-gold);
  background:rgba(247,242,232,.06);color:var(--on-deep)}
.mapa__pe{margin:18px auto 0;position:relative;height:1.5em;max-width:430px}
.mapa__pe span{position:absolute;left:14%;top:0;font-size:13px;letter-spacing:.01em;
  transition:opacity var(--t-fast) var(--e-out)}
.mapa__pe-a{color:var(--on-deep-3) !important;opacity:calc(1 - var(--p,0))}
.mapa__pe-b{color:var(--gold) !important;font-weight:600;opacity:var(--p,0)}

/* ---------- passagens de tela cheia: o que muda ---------- */
.passo{min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(72px,10vw,120px);border-top:1px solid var(--on-light-rule)}
.passo__in{max-width:900px}
.passo__h{font-size:clamp(34px,5.2vw,68px);line-height:1.06;letter-spacing:-.028em;
  margin-bottom:.5em;max-width:16ch}
.passo__p{font-size:clamp(17px,.8vw + 14px,21px);line-height:1.55;color:var(--on-light-2);
  max-width:56ch}
.passo__tag{margin-top:clamp(28px,3vw,44px);padding-top:18px;
  border-top:1px solid var(--on-light-rule);color:var(--navy) !important;max-width:none}

/* ---------- método: a forma do projeto ---------- */
.etapas{margin-top:clamp(52px,6vw,88px);padding-top:clamp(32px,3.4vw,48px);
  border-top:1px solid var(--on-deep-rule)}
.etapas__h{color:var(--gold) !important;margin:0 0 14px;max-width:none}
.etapas__aviso{font-size:15px;color:var(--on-deep-3) !important;max-width:62ch;
  margin-bottom:clamp(26px,3vw,38px)}
.etapas__l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.etapa{display:grid;grid-template-columns:1fr;gap:8px;
  padding:clamp(18px,2vw,24px);border:1px solid var(--on-deep-rule);
  border-radius:var(--raio-m);background:rgba(247,242,232,.025)}
@media (min-width:760px){
  .etapa{grid-template-columns:auto 1fr 1fr;gap:clamp(20px,3vw,44px);align-items:baseline}
}
.etapa__c{color:var(--on-deep-3) !important}
.etapa__r{display:block;color:var(--on-deep-3);margin-bottom:5px}
.pend{display:inline-block;font-size:15px;font-weight:500;color:var(--gold);
  padding:3px 11px;border:1px dashed var(--on-deep-rule-gold);border-radius:var(--raio-p)}
.operamos__quem{margin-top:clamp(56px,6.5vw,96px)}

/* ---------- ledger: agente × pessoa ---------- */
.ledger{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,0px);
  margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--on-deep-rule)}
@media (min-width:820px){.ledger{grid-template-columns:1fr 1fr;gap:0}}
.ledger__col{padding:clamp(28px,3vw,40px) 0}
@media (min-width:820px){
  .ledger__col{padding-right:clamp(28px,3.4vw,52px)}
  .ledger__col--lock{padding-left:clamp(28px,3.4vw,52px);padding-right:0;
    border-left:1px solid var(--on-deep-rule)}
}
.ledger__h{color:var(--on-deep-2);margin-bottom:1.4em;max-width:none}
.ledger__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ledger__list li{position:relative;padding-left:26px;font-size:clamp(16px,.5vw + 14px,18px);
  line-height:1.45;color:var(--on-deep-2)}
.ledger__list li::before{content:"";position:absolute;left:0;top:.62em;
  width:10px;height:1.5px;background:var(--on-deep-rule-gold);border-radius:2px}
.ledger__col--lock .ledger__list li{color:var(--on-deep);font-weight:500}
.ledger__col--lock .ledger__list li::before{background:var(--gold);width:14px}
.closer{margin-top:clamp(40px,4.5vw,64px);font-size:clamp(21px,1.6vw + 14px,30px);
  font-weight:700;letter-spacing:-.018em;line-height:1.25;max-width:20ch}

/* ---------- declaração ---------- */
.stmt{border-top:1px solid var(--on-light-rule)}
.stmt__in{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,44px);align-items:start}
@media (min-width:900px){.stmt__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(44px,5vw,80px)}}
.stmt__h{font-size:clamp(28px,3.2vw,44px);margin:0;max-width:15ch;line-height:1.1}
.stmt__p{color:var(--on-light-2);max-width:46ch;font-size:clamp(16px,.5vw + 14px,18px)}
@media (min-width:900px){.stmt__p{padding-top:.5em}}

/* ---------- perguntas ---------- */
.faqwrap{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
@media (min-width:900px){.faqwrap{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);
  gap:clamp(40px,5vw,88px);align-items:start}}
.faqwrap__h{margin:0}
.faq{border-top:1px solid var(--on-light-rule)}
.faq__i{border-bottom:1px solid var(--on-light-rule)}
.faq__i summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;
  padding:22px 0;font-size:clamp(17px,.7vw + 14px,20px);font-weight:600;
  letter-spacing:-.012em;line-height:1.35;color:var(--navy);
  transition:color var(--t-state) var(--e-out);
}
.faq__i summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.faq__i summary:hover{color:var(--ink)}}
.faq__mark{margin-left:auto;flex:0 0 auto;position:relative;width:16px;height:16px;margin-top:.35em;
  transition:transform var(--t-state) var(--e-out)}
.faq__mark::before,.faq__mark::after{content:"";position:absolute;background:var(--gold);border-radius:2px}
.faq__mark::before{left:0;top:7.25px;width:16px;height:1.5px}
.faq__mark::after{left:7.25px;top:0;width:1.5px;height:16px;
  transition:opacity var(--t-state) var(--e-out),transform var(--t-state) var(--e-out)}
.faq__i[open] .faq__mark::after{opacity:0;transform:scaleY(0)}
.faq__a{padding:0 0 26px;animation:fade var(--t-state) var(--e-out) both}
.faq__a p{color:var(--on-light-2);max-width:64ch}

/* ---------- fechamento: a segunda dobra forte ---------- */
.close{min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding-block:calc(var(--cut) + clamp(76px,9vw,132px))}
.close__marca{position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-48%);
  height:min(112vh,1020px);width:auto;max-width:none;
  opacity:.3}
.close__in{position:relative;z-index:1;max-width:860px}
.close__h{font-size:clamp(34px,5.4vw,72px);line-height:1.04;letter-spacing:-.03em;
  max-width:15ch;margin-bottom:.45em}
.close__p{max-width:52ch;margin-bottom:clamp(30px,3.4vw,44px)}
.close__note{margin-top:20px;font-size:15px;color:var(--on-deep-2)}
.close__live{margin-top:22px;min-height:1.4em;font-size:15px;color:var(--on-deep) !important;
  max-width:62ch;padding-left:16px;border-left:1px solid var(--on-deep-rule-gold)}
.close__live:empty{border-left-color:transparent}

/* ---------- rodapé ---------- */
.foot{background:var(--ink);color:var(--on-deep-2);padding-block:clamp(48px,5vw,72px)}
.foot__in{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:820px){.foot__in{grid-template-columns:auto 1fr;align-items:center}}
.foot__logo{width:clamp(160px,15vw,196px);height:auto;display:block}
.foot__nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,30px)}
@media (min-width:820px){.foot__nav{justify-content:flex-end}}
.foot__nav a{color:var(--on-deep-2);text-decoration:none;font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;
  transition:color var(--t-state) var(--e-out),border-color var(--t-state) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .foot__nav a:hover{color:var(--warm);border-bottom-color:var(--gold)}
}
.foot__proto{grid-column:1/-1;margin:0;padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid rgba(247,242,232,.12);
  font-size:13px;letter-spacing:.02em;color:rgba(247,242,232,.55);max-width:none}
/* O link legal precisa de contraste de texto de corpo, não de nota de rodapé:
   é o endereço que a Meta busca e que o visitante tem direito de achar. */
.foot__legal{color:var(--on-deep-2);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--on-deep-rule-gold);
  transition:color var(--t-state) var(--e-out),border-color var(--t-state) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .foot__legal:hover{color:var(--warm);border-bottom-color:var(--gold)}
}
.foot__sep{padding-inline:.5em}

/* ============================================================
   MOVIMENTO
   O orçamento de dois picos do keydoc 03 está SUSPENSO nesta rodada
   por decisão do sócio (17/08). O que continua valendo é a mecânica:
   reduced motion, transform/opacity (+filter/clip-path quando suaves),
   nada de transition:all, teclado sem esperar, nada invisível por falha.
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(22px);filter:blur(10px)}
.js.is-ready [data-reveal]{
  animation:sobe-foco var(--t-base) var(--e-reveal) both;
  animation-delay:calc((var(--i) - 1) * 110ms)}
[data-reveal="1"]{--i:1}[data-reveal="2"]{--i:2}
[data-reveal="3"]{--i:3}[data-reveal="4"]{--i:4}[data-reveal="5"]{--i:5}
@keyframes sobe-foco{
  from{opacity:0;transform:translateY(22px);filter:blur(10px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
/* a assinatura se constrói: revela da esquerda para a direita */
.js .hero__h1[data-reveal]{filter:none;transform:none;opacity:1;
  clip-path:inset(0 100% 0 0)}
.js.is-ready .hero__h1[data-reveal]{
  animation:constroi var(--t-slow) var(--e-reveal) both;animation-delay:120ms}
@keyframes constroi{
  from{clip-path:inset(0 100% 0 0);opacity:.4}
  to{clip-path:inset(0 0 0 0);opacity:1}
}

/* entradas de seção — uma gramática só, discreta */
.js [data-entra]{opacity:0;transform:translateY(26px)}
.js [data-entra].is-in{animation:sobe var(--t-fast) var(--e-out) both}
.js [data-entra].is-in[data-atraso="1"]{animation-delay:90ms}
.js [data-entra].is-in[data-atraso="2"]{animation-delay:180ms}
@keyframes sobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .ilha,.nav__cta{display:none}
  .nav__toggle{display:flex;margin-left:auto}
}
@media (min-width:901px){
  .telona{display:none !important}
}
@media (max-width:520px){
  .hero__act{flex-direction:column;align-items:stretch}
  .hero__act .btn{width:100%}
  .hero__marca{opacity:.1;right:-22vw;height:80vh}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-entra]{opacity:1;transform:none;filter:none;clip-path:none}
  .js.is-ready [data-reveal],.js [data-entra].is-in{
    animation:fade var(--t-state) linear both;animation-delay:0ms}
  .js .hero__h1[data-reveal]{clip-path:none}
  .js.is-ready .hero__h1[data-reveal]{animation:fade var(--t-state) linear both;animation-delay:0ms}
  .mapa__espinha,.mapa__peca{transition:none}
  .btn:active{transform:none}
  .btn--gold:hover,.btn--ghost:hover{transform:none}
  .skip{transition:none}
}

/* ---------- impressão ---------- */
@media print{
  .nav,.skip,.telona,.desce,.foot__nav{display:none}
  .field--deep{background:var(--warm);color:var(--ink)}
  .field--deep p,.field--deep .lead,.field--deep .closer{color:var(--ink)}
  .hero,.passo,.close{min-height:0}
  .hero__marca,.close__marca{display:none}
  .cut-t,.cut-b{clip-path:none;padding-block:24pt;margin-top:0}
  [data-reveal],[data-entra]{opacity:1;transform:none;filter:none;clip-path:none;animation:none}
}