/* ══════════════════════════════════════════════════════════════════
   Landing pública da estrutura de fee fixo (spec-026).

   TEMA CLARO desde 2026-08-30, a pedido do time: *"branco de fundo e
   mais objetivo"*. A versão anterior era dark deliberado, herdada do
   `design-referencia-hero.html` do owner — hero de viewport inteira,
   grain sobre o preto, seletor de fundo animado. A troca não é só de
   paleta: o que era ambiente virou hierarquia. O primeiro dado aparece
   sem rolagem, as bandas alternam branco/cinza em vez de hairline sobre
   preto, e o número é o elemento mais pesado de cada bloco.

   O CONTEÚDO não mudou, e não podia: `tests/unit/landing-fee-fixo.unit.js`
   (no aawz-web-frontend) lê este HTML do disco e compara termo a termo
   com as constantes do módulo — `KLABEL`, `BALDES`, `PRESETS`,
   `LENTES_OPTIONS`, `LABEL_POR_REGIME`, `DEF` — e confere cada número
   contra o motor `fee-lab-engine`. O que se reescreveu aqui é
   apresentação.

   Contraste: o lime `#9FCB3B` continua sendo a marca, mas sobre branco
   ele só serve como PREENCHIMENTO (com texto quase-preto por cima). Para
   texto e número há `--lime-ink`, da mesma família e escurecido até
   passar em AA. O mesmo vale para as três cores de apoio: as claras da
   versão dark sumiriam no branco.

   ⚠ Esta página NÃO é tela da plataforma: é documento público servido
   fora do bundle (mesmo caminho de `public/servicos/`). Por isso não usa
   Vuetify, `az-card` nem os tokens SASS do design-system — eles não
   existem neste contexto.
   ══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;
  --ground:#FFFFFF;
  --ground-2:#F7F8FA;        /* banda alternada */
  --panel:#FFFFFF;
  --hair:#E4E7EC;            /* hairline rules */
  --hair-2:#D0D5DD;
  --ink:#101828;
  --ink-2:#475467;
  --ink-3:#667085;
  --navy:#1F3A5F;            /* institucional AAWZ — ênfase tipográfica */
  --lime:#9FCB3B;            /* marca — só como preenchimento */
  --lime-ink:#4F7A14;        /* a mesma família, legível sobre branco */
  --op:#0E7C66;              /* consultoria CVM */
  --ge:#8A6D1F;              /* assessoria */
  --ia:#5B4BB5;              /* ano de cruzamento */
  --danger:#B42318;
  --display:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Coluna com o rodapé empurrado para baixo: a página de cadastro é curta, e sem
   isto a banda cinza do rodapé terminava no meio da tela, com branco embaixo —
   parece página cortada. Na landing, que tem 9 mil pixels, o `margin-top:auto`
   não faz nada. O `flex-shrink:0` é o que impede o modelo flex de comprimir as
   seções altas para caber. */
body{background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100vh;display:flex;flex-direction:column}
body > *{flex-shrink:0}
body > footer{margin-top:auto}
a{color:inherit}
::selection{background:var(--lime);color:#101828}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.sec,section{scroll-margin-top:70px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,44px);
  display:flex;align-items:center;gap:18px;height:60px}
.lockup{display:flex;align-items:baseline;gap:10px;text-decoration:none;margin-right:auto;flex-shrink:0}
.lockup b{font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--navy)}
.lockup i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  border-left:1px solid var(--hair-2);padding-left:10px}
.nav-links{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;min-width:0}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-login{font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;
  flex-shrink:0;transition:color .2s}
.nav-login:hover{color:var(--ink)}
.nav .cta-top{font-size:13px;font-weight:700;text-decoration:none;color:#101828;flex-shrink:0;
  background:var(--lime);padding:9px 18px;border-radius:4px;transition:filter .2s}
.nav .cta-top:hover{filter:brightness(1.06)}
.nav .cta-top:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}

/* ── hero ──
   Sem `min-height:100vh`: a versão dark pedia uma tela inteira de ambiente
   antes do primeiro fato. Aqui a manchete, a linha de apoio e os quatro
   números de referência cabem juntos na primeira dobra. */
.hero{position:relative;padding:132px 0 clamp(40px,6vh,64px);isolation:isolate;
  background:var(--ground);border-bottom:1px solid var(--hair)}
#flow{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 88%)}
.hero-inner{width:100%;position:relative}
.hero .eyebrow{color:var(--ink-3);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.hero .eyebrow::before{content:"";width:30px;height:2px;background:var(--lime);flex-shrink:0}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(34px,5.4vw,64px);
  line-height:1.06;letter-spacing:-.03em;max-width:15em;text-wrap:balance;color:var(--ink)}
.hero h1 em{font-style:normal;font-weight:800}
.hero h1 .l2{display:block;color:var(--ink-2)}
.hero h1 .l2 em{color:var(--navy)}
.hero .sub{margin-top:20px;font-size:clamp(15px,1.6vw,18px);font-weight:400;
  color:var(--ink-2);max-width:56ch}
.hero .sub b{font-weight:700;color:var(--ink)}
.hero .btns{margin-top:28px;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;
  border-radius:4px;font-size:14px;font-weight:700;text-decoration:none;
  transition:filter .2s,border-color .2s;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans)}
.btn:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}
.btn-lime{background:var(--lime);color:#101828}
.btn-lime:hover{filter:brightness(1.06)}
.btn-full{width:100%;margin-top:6px}
.btn[disabled]{opacity:.55;cursor:progress}
.link-sec{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--hair-2);padding-bottom:2px;transition:color .2s,border-color .2s}
.link-sec:hover{color:var(--ink);border-color:var(--lime-ink)}
.link-sec:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px}
.hero .proof{margin-top:30px;padding-top:18px;border-top:1px solid var(--hair);
  display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.hero .proof span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.hero .proof span b{color:var(--ink);font-weight:600}
/* entrada escalonada do hero */
.js .stag{opacity:0;transform:translateY(14px);animation:heroIn .6s ease forwards}
.js .stag.d1{animation-delay:.04s}.js .stag.d2{animation-delay:.13s}
.js .stag.d3{animation-delay:.22s}.js .stag.d4{animation-delay:.31s}
.js .stag.d5{animation-delay:.42s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* ── stats band ── */
.stats{background:var(--ground-2);border-bottom:1px solid var(--hair)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(26px,3.6vw,42px) clamp(16px,2.4vw,32px);border-left:1px solid var(--hair)}
.stat:first-child{border-left:none}
.stat .n{font-family:var(--mono);font-weight:600;font-size:clamp(32px,4.2vw,50px);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .l{margin-top:10px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.stat[data-tone="a"] .n{color:var(--op)}
.stat[data-tone="b"] .n{color:var(--ge)}
.stat[data-tone="c"] .n{color:var(--ia)}

/* ── seções ── */
/* Sem zebra entre seções: a régua horizontal e as bordas das grades já
   separam os blocos, e alternar cinza numa página desta altura vira ruído.
   As três âncoras cinzas são a banda de números, o CTA central e o rodapé. */
.sec{padding:clamp(56px,7.5vw,92px) 0;border-bottom:1px solid var(--hair)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(20px,4vw,64px);margin-bottom:clamp(30px,4vw,44px)}
.sec-head .eyebrow{padding-top:8px}
.sec-head h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.4vw,40px);
  line-height:1.14;letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.sec-head h2 em{font-style:normal;font-weight:800;color:var(--navy)}
.sec-head .lede{margin-top:12px;font-size:15.5px;color:var(--ink-2);max-width:62ch}
.sec-head .lede b{color:var(--ink);font-weight:700}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
.note{margin-top:20px;font-size:13.5px;color:var(--ink-2);max-width:80ch}
.note b{color:var(--ink);font-weight:700}
.note i{font-style:italic}

/* ── cards de 3 (o que muda) ── */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.card3{background:var(--panel);padding:clamp(22px,2.8vw,30px)}
.card3 .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--lime-ink);font-weight:600}
.card3 h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.015em;
  margin:10px 0 8px;color:var(--ink)}
.card3 p{font-size:14px;color:var(--ink-2)}
.card3 p b{color:var(--ink);font-weight:700}

/* ── tabela das classes ── */
.tablewrap{overflow-x:auto;border:1px solid var(--hair);border-radius:6px;background:var(--panel)}
.tbl{width:100%;border-collapse:collapse;min-width:520px}
.tbl th,.tbl td{padding:12px clamp(12px,2vw,22px);text-align:left;
  border-bottom:1px solid var(--hair);font-size:14px}
.tbl thead th{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);background:var(--ground-2);white-space:nowrap}
.tbl thead th i{font-style:normal;color:var(--hair-2);margin-left:6px}
.tbl tbody th{font-weight:700;color:var(--ink)}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--ground-2)}

/* ── os dois canais ── */
.canais{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.canal{background:var(--panel);padding:clamp(22px,3vw,34px);position:relative}
.canal::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--hair-2)}
.canal[data-canal="consultoria_cvm"]::before{background:var(--op)}
.canal[data-canal="assessoria"]::before{background:var(--ge)}
.canal .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.canal .big{font-family:var(--mono);font-weight:600;font-size:clamp(36px,4.6vw,54px);
  line-height:1.1;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.canal .big i{font-style:normal;font-size:16px;color:var(--ink-3);margin-left:6px}
.canal[data-canal="consultoria_cvm"] .big b{color:var(--op);font-weight:600}
.canal[data-canal="assessoria"] .big b{color:var(--ge);font-weight:600}
.canal .desc{margin-top:6px;font-size:14px;font-weight:700;color:var(--ink)}
.canal .txt{margin-top:12px;font-size:14px;color:var(--ink-2)}
.canal .txt b{color:var(--ink);font-weight:700}

/* ── destinos do custo ── */
.baldes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.balde{background:var(--panel);padding:clamp(20px,2.6vw,28px)}
.balde h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;
  margin-bottom:8px;color:var(--ink)}
.balde p{font-size:13.5px;color:var(--ink-2)}
.balde--fecho{grid-column:1/-1;background:var(--ground-2)}
.lentes{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lente{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--panel);border:1px solid var(--hair-2);border-radius:4px;padding:7px 14px}
.lente-nota{font-size:13px;color:var(--ink-2)}

/* ── trajetórias ── */
.trajs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.traj{background:var(--panel);padding:clamp(20px,2.6vw,28px)}
.traj--on{background:var(--ground-2);box-shadow:inset 0 3px 0 var(--lime)}
.traj h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.015em;color:var(--ink)}
.tnums{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.tnums div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--hair);padding-bottom:7px}
.tnums dt{font-size:12.5px;color:var(--ink-2)}
.tnums dd{font-family:var(--mono);font-size:13px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tnums dd b{color:var(--lime-ink);font-weight:700;font-size:17px}
.talloc{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:5px}
.talloc li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-2)}
.talloc li b{font-family:var(--mono);font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ── ano de cruzamento (quote + série) ── */
.quote-sec{padding:clamp(56px,7.5vw,92px) 0;border-bottom:1px solid var(--hair)}
.quote-sec blockquote{font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.8vw,34px);line-height:1.28;letter-spacing:-.02em;max-width:26em;
  text-wrap:balance;color:var(--ink)}
.quote-sec blockquote em{font-style:normal;font-weight:800;color:var(--ia)}
.crossing{margin-top:30px;border-top:1px solid var(--hair);padding-top:24px}
.crossing .ck{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.serie{list-style:none;margin-top:16px;display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.serie li{background:var(--panel);padding:16px 14px;display:flex;flex-direction:column;gap:4px}
.serie li b{font-family:var(--mono);font-weight:600;font-size:clamp(21px,2.8vw,28px);
  color:var(--ink);font-variant-numeric:tabular-nums}
.serie li:last-child b{color:var(--lime-ink)}
.serie li span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.cnote{margin-top:18px;font-size:14px;color:var(--ink-2);max-width:72ch}

/* ── CTA central ── */
.ctamid{padding:clamp(48px,6.5vw,80px) 0;border-bottom:1px solid var(--hair);background:var(--ground-2)}
.ctamid h2{font-family:var(--display);font-weight:300;font-size:clamp(24px,3.2vw,38px);
  line-height:1.16;letter-spacing:-.025em;max-width:24em;text-wrap:balance;color:var(--ink)}
.ctamid h2 em{font-style:normal;font-weight:800;color:var(--navy)}
.ctamid p{margin-top:14px;font-size:15.5px;color:var(--ink-2);max-width:58ch}
.ctamid .btn{margin-top:24px}

/* ── cadastro (CTA final) ── */
.final{padding:clamp(56px,8vw,104px) 0;position:relative;isolation:isolate;background:var(--ground)}
#flow2{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;opacity:.4;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 0%,transparent 100%);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 0%,transparent 100%)}
.final-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
  gap:clamp(28px,5vw,64px);align-items:start;position:relative}
.final h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.8vw,46px);
  line-height:1.14;letter-spacing:-.025em;max-width:14em;text-wrap:balance;color:var(--ink)}
.final h2 em{font-style:normal;font-weight:800;color:var(--navy)}
.final > .wrap > div > p{margin-top:16px;font-size:15.5px;color:var(--ink-2);max-width:54ch}
.fbullets{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:9px}
.fbullets li{font-size:14px;color:var(--ink-2);padding-left:20px;position:relative}
.fbullets li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--lime)}

.formcard{background:var(--panel);border:1px solid var(--hair-2);border-radius:8px;
  padding:clamp(22px,2.6vw,30px);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.formcard h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.015em;
  margin-bottom:16px;color:var(--ink)}
.fld{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.fld label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.fld input{background:var(--ground);border:1px solid var(--hair-2);border-radius:4px;
  padding:12px 13px;color:var(--ink);font-family:var(--sans);font-size:15px;width:100%;
  transition:border-color .2s,box-shadow .2s}
.fld input:focus{outline:none;border-color:var(--lime-ink);box-shadow:0 0 0 3px rgba(79,122,20,.12)}
.fld input[aria-invalid="true"]{border-color:var(--danger)}
.fld .hint{font-size:12px;color:var(--ink-3)}
.fine{margin-top:14px;font-size:12px;color:var(--ink-3)}
.fine b{color:var(--ink-2);font-weight:700}
.fmsg{margin-top:14px;font-size:13.5px;border-left:3px solid var(--hair-2);padding-left:12px;
  color:var(--ink-2)}
.fmsg--err{border-color:var(--danger);color:var(--danger)}
.fok .okk{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime-ink)}
.fok h3{margin:10px 0 12px}
.fok p{font-size:14px;color:var(--ink-2)}
.fok p b{color:var(--ink);font-weight:700;word-break:break-word}

footer{padding:28px 0 40px;background:var(--ground-2);border-top:1px solid var(--hair)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot p{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.foot a{text-decoration:none;border-bottom:1px solid var(--hair-2);transition:color .2s}
.foot a:hover{color:var(--ink)}
#motion-toggle{border:none;background:none;color:var(--ink-3);font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  padding:6px 0;border-bottom:1px dashed var(--hair-2);transition:color .2s}
#motion-toggle:hover{color:var(--ink)}
#motion-toggle:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}
.disclaimer{margin-top:20px;border-top:1px solid var(--hair);padding-top:18px}
.disclaimer p{font-size:12px;line-height:1.6;color:var(--ink-3);max-width:90ch}
.disclaimer b{color:var(--ink-2);font-weight:700}

/* ── responsivo ── */
@media (max-width: 900px){
  .nav-links{gap:16px}
  .nav-links a{font-size:12px}
  .lockup i{display:none}
  .hero{padding-top:104px}
  .sec-head{grid-template-columns:1fr;gap:10px}
  .cards3,.canais,.baldes,.trajs,.final-grid{grid-template-columns:1fr}
  .balde--fecho{grid-column:auto}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:none;border-top:1px solid var(--hair)}
  .stat:nth-child(even){border-left:1px solid var(--hair)}
  .stat:nth-child(-n+2){border-top:none}
  .serie{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .serie{grid-template-columns:1fr}
}
/* reduzir movimento: preferência do sistema OU toggle da própria página */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal,.js .stag{opacity:1;transform:none}
}
html.rm *{animation:none!important;transition:none!important}
html.rm{scroll-behavior:auto}
html.rm .reveal,html.rm .stag{opacity:1!important;transform:none!important}