/* ============================================================
   mdr.css — design system + componentes compartilhados (DS 2030)
   Fonte única de estilo das ferramentas do Meta de Rico.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* ============================================================
   DESIGN LANGUAGE "INSTRUMENTO" v1 — camada de tokens (CEO 2026-07-23)
   Fonte única de cor/tipo/espaço/forma/elevação/movimento. Redefinir aqui
   re-skina o site inteiro por herança. Os nomes legados (--navy/--paper/…)
   permanecem, remapeados para a paleta FRIA — mata a metáfora de "papel".
   ============================================================ */
:root{
  /* — superfície (escala neutra fria; era papel quente) — */
  --srf-0:#FFFFFF; --srf-1:#F7F8FA; --srf-2:#EEF1F5; --srf-3:#E3E8EF;
  /* — traço — */
  --brd-1:#E6EAF0; --brd-2:#D3DAE4; --brd-3:#9AA6B8;
  /* — texto — */
  --txt-1:#0B1220; --txt-2:#46536A; --txt-3:#6B7A92;
  /* — marca (uso raro: 1×/tela) — */
  --mrc:#C9A96E; --mrc-deep:#B08D4F;
  /* — semântica (cor + sinal sempre; a11y/YMYL) — */
  --pos:#0E7C5A; --neg:#C0392F; --atn:#A9761B; --neu:#46536A;
  --pos-bg:#E8F5F0; --neg-bg:#FCEDEB; --atn-bg:#FDF5E6;
  /* — elevação (4 níveis semânticos; era 5 aleatórios) — */
  --el-1:0 1px 2px rgba(11,18,32,.06);
  --el-2:0 4px 12px rgba(11,18,32,.08);
  --el-3:0 12px 32px rgba(11,18,32,.12);
  /* — forma (3 degraus; era 13) — */
  --r:10px; --r-sm:6px; --r-lg:16px;
  /* — movimento (era 6 transições no sistema todo) — */
  --mv-rapido:120ms cubic-bezier(.2,0,.2,1);
  --mv-padrao:200ms cubic-bezier(.2,0,.2,1);
  --mv-entrada:320ms cubic-bezier(.16,1,.3,1);
  /* — fonte de número (tabular; colunas financeiras alinham) — */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ui:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* === APELIDOS LEGADOS (300 regras herdam) — LITERAIS por tema (não encadear var():
     var() encadeado não re-invalida quando só o atributo data-theme muda) === */
  --navy:#0F172A; --navy-soft:#1E293B;
  --offwhite:#F7F8FA; --paper:#F7F8FA; --white:#FFFFFF;
  --gold:#C9A96E; --gold-deep:#B08D4F;
  --green:#1F6B4F; --green-hover:#1D5E46;
  --ink:#0B1220; --muted:#46536A; --line:#E6EAF0;
  --warn:var(--atn);
  --shadow:var(--el-1);
  --maxw:1200px;
  /* — superfície ESCURA PERMANENTE (header, hero de resultado): não muda com o tema — */
  --srf-dark:#0F172A; --srf-dark-2:#1b2942; --srf-dark-3:#11203b;
  --txt-on-dark:#EAF0F7; --txt-on-dark-2:#AFC0D6; --txt-on-dark-3:#9FB0C4; --txt-on-dark-4:#7E8EA3;
  --txt-on-dark-nav:#C7D2E0;
  --white-pure:#fff;
  /* — superfície "liberdade" (bloco patrimonial verde-escuro) — */
  --srf-lib:#143024; --srf-lib-2:#173a2d; --srf-lib-3:#13362a; --srf-lib-4:#102019;
  --txt-on-lib:#9FE3C2; --txt-on-lib-2:#bfe6d3; --txt-on-lib-3:#cfe6da; --txt-on-lib-4:#dffaed; --gold-soft:#EAD9B4;
}
/* — DARK MODE NATIVO (1ª classe): segue o sistema, e o toggle manual vence — */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --srf-0:#111927; --srf-1:#0B1220; --srf-2:#1B2433; --srf-3:#243149;
  --brd-1:#1F2A3A; --brd-2:#2C3A4F; --brd-3:#546681;
  --txt-1:#F2F5F9; --txt-2:#AFBDD1; --txt-3:#8090A8;
  --pos:#3FBF92; --neg:#F0766B; --atn:#E0B357;
  --pos-bg:#123227; --neg-bg:#33211F; --atn-bg:#332a17;
  --el-1:0 1px 2px rgba(0,0,0,.4); --el-2:0 4px 12px rgba(0,0,0,.5); --el-3:0 12px 32px rgba(0,0,0,.6);
  --navy:#0B1220; --navy-soft:#111927;
  --green:#2E9E74; --green-hover:#37B083;
  --offwhite:#0B1220; --paper:#0B1220; --white:#111927; --ink:#F2F5F9; --muted:#AFBDD1; --line:#1F2A3A;
}}
:root[data-theme="dark"]{
  --srf-0:#111927; --srf-1:#0B1220; --srf-2:#1B2433; --srf-3:#243149;
  --brd-1:#1F2A3A; --brd-2:#2C3A4F; --brd-3:#546681;
  --txt-1:#F2F5F9; --txt-2:#AFBDD1; --txt-3:#8090A8;
  --pos:#3FBF92; --neg:#F0766B; --atn:#E0B357;
  --pos-bg:#123227; --neg-bg:#33211F; --atn-bg:#332a17;
  --el-1:0 1px 2px rgba(0,0,0,.4); --el-2:0 4px 12px rgba(0,0,0,.5); --el-3:0 12px 32px rgba(0,0,0,.6);
  --navy:#0B1220; --navy-soft:#111927;
  --green:#2E9E74; --green-hover:#37B083;
  --offwhite:#0B1220; --paper:#0B1220; --white:#111927; --ink:#F2F5F9; --muted:#AFBDD1; --line:#1F2A3A;
}
/* toggle p/ CLARO vence o sistema escuro (restaura a paleta clara explicitamente) */
:root[data-theme="light"]{
  --srf-0:#FFFFFF; --srf-1:#F7F8FA; --srf-2:#EEF1F5; --srf-3:#E3E8EF;
  --brd-1:#E6EAF0; --brd-2:#D3DAE4; --brd-3:#9AA6B8;
  --txt-1:#0B1220; --txt-2:#46536A; --txt-3:#6B7A92;
  --pos:#0E7C5A; --neg:#C0392F; --atn:#A9761B;
  --pos-bg:#E8F5F0; --neg-bg:#FCEDEB; --atn-bg:#FDF5E6;
  --el-1:0 1px 2px rgba(11,18,32,.06); --el-2:0 4px 12px rgba(11,18,32,.08); --el-3:0 12px 32px rgba(11,18,32,.12);
  --navy:#0F172A; --navy-soft:#1E293B;
  --green:#1F6B4F; --green-hover:#1D5E46;
  --offwhite:#F7F8FA; --paper:#F7F8FA; --white:#FFFFFF; --ink:#0B1220; --muted:#46536A; --line:#E6EAF0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* rede defensiva anti scroll-horizontal no mobile: contém excessos decorativos menores (pins de
   timeline, etc.) sem criar scrollbar. `clip` (não `hidden`) preserva position:sticky. Tabelas
   largas continuam rolando dentro do próprio contêiner overflow-x:auto — não são afetadas. */
html,body{overflow-x:clip}
html{color-scheme:light dark}
body{margin:0;background:var(--offwhite);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* número = cidadão tabular (colunas alinham na vertical) */
.num,.big,.pill .v,.scn .s .n,td.n,th.n,.fv-card-v,.fv-card-verd{font-variant-numeric:tabular-nums slashed-zero}
/* prosa editorial mantém densidade de leitura (16–17px), não a de interface */
#verbete p,#verbete li,.hero p.lead,.lead{font-size:16.5px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
/* TIPOGRAFIA "INSTRUMENTO": UI = sans (Inter) com tracking negativo — voz de software.
   Playfair fica RESTRITA à prosa editorial (verbete/artigo/e-book) via .serif e #verbete. */
h1,h2,h3{font-family:var(--ui);letter-spacing:-.02em;line-height:1.15;font-weight:600}
.serif,#verbete h1,#verbete h2,#verbete h3,.vtitle,#verbete .callout b{font-family:"Playfair Display",Georgia,serif;letter-spacing:-.01em;font-weight:600}
a{color:var(--green);text-decoration:none;transition:color var(--mv-rapido)}
/* ESTADOS GLOBAIS — foco visível (teclado/a11y) + movimento com propósito */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brd-3);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}

header.top{background:var(--navy);color:var(--txt-on-dark);position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:700;letter-spacing:.02em;color:var(--white-pure);font-size:15px}
.brand b{color:var(--gold)}
.crumbs{font-size:13px;color:var(--txt-on-dark-3)}.crumbs a{color:var(--txt-on-dark-3)}

.hero{padding:30px 0 8px}
.hero h1{font-size:clamp(28px,6vw,44px);margin:.1em 0 .25em}
.hero p.lead{font-size:18px;color:var(--muted);max-width:60ch;margin:0}

.grid{display:grid;grid-template-columns:1fr;gap:22px;padding:14px 0 56px}
/* mobile: filhos do grid podem encolher abaixo do min-content (tabela larga, número .big) sem
   esticar a coluna e estourar o viewport. Tabelas largas devem estar em .tbl-scroll (overflow-x:auto). */
.grid>*{min-width:0}
/* DS v1 §6-B — CALCULADORA EM COLUNA ÚNICA: painel de input full-width (campos 2-up quando couber)
   → resultado full-width abaixo. Elimina por construção o "void" das 2 colunas desequilibradas
   (form curto + sticky deixava buraco de fundo ao lado do resultado longo). Vale p/ as 8 calculadoras. */
@media(min-width:640px){
  .controls{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:0;align-content:start}
  .controls>:not(.field){grid-column:1/-1}
  /* campos com conteúdo largo (grupo de botões/segmentos) ocupam a linha inteira — nunca espremer */
  .controls>.field:has([role="group"]),.controls>.field:has(.tipos),.controls>.field.full{grid-column:1/-1}
}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card h2{font-size:21px;margin:0 0 4px}
.card .hint{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.section-t{margin:26px 0 4px}.section-t .eyebrow{margin-bottom:2px}.section-t h2{font-size:23px;margin:0}

/* fields */
.field{margin:0 0 16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:14px;margin-bottom:6px}
.field label .val{font-variant-numeric:tabular-nums;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:2px 8px;font-weight:700}
.field input[type=number]{width:100%;font:inherit;font-weight:600;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.field input[type=number]:focus{outline:2px solid var(--green);border-color:var(--green);background:var(--srf-0)}
.field input[type=range]{width:100%;accent-color:var(--green);margin-top:10px}
.field select{width:100%;font:inherit;font-weight:600;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prefill{font-size:11px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.04em}

/* result hero */
.result{background:var(--srf-dark);background-image:linear-gradient(180deg,var(--srf-dark-3),var(--srf-dark));color:var(--white-pure);border:none}
.result .eyebrow{color:var(--gold)}
.big{font-family:"Playfair Display",serif;font-weight:700;font-size:clamp(34px,9vw,56px);line-height:1;margin:2px 0 4px;font-variant-numeric:tabular-nums}
.result .sub{color:var(--txt-on-dark-2);font-size:14.5px}
.decomp{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.pill{flex:1;min-width:130px;background:var(--srf-dark-2);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 13px}
.pill .k{font-size:12px;color:var(--txt-on-dark-3);letter-spacing:.04em;overflow-wrap:anywhere}
.pill .v{font-size:clamp(16px,4.3vw,19px);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;color:var(--white-pure);overflow-wrap:anywhere;line-height:1.16}
.realnote{margin-top:12px;font-size:13.5px;color:var(--txt-on-dark-3)}.realnote b{color:var(--gold-soft)}

/* chart */
svg.chart{width:100%;height:auto;display:block}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* diagnosis — DS v1 §7: diagnóstico em CARDS premium (não <ul> de bullet cru): cada ponto é
   um card com respiro, acento dourado e sombra. Usado pelas 8 calculadoras (nó "Ferramenta"). */
.diag{padding:0}
.diag h3{font-size:13px;margin:0 0 12px;font-family:Inter,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep)}
.diag ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.diag li{margin:0;background:var(--srf-0);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow);font-size:14.5px;line-height:1.6;color:var(--ink)}
/* variante sem lista (ex.: comparar-renda-fixa usa .diag>.verdict): o próprio conteúdo vira card */
.diag>.verdict{background:var(--srf-0);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.diag b{color:var(--navy)}

/* scenarios / bars */
.scn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.scn .s{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;background:var(--paper)}
.scn .s.base{border-color:var(--green);box-shadow:0 0 0 2px rgba(31,107,79,.12)}
.scn .s .t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.scn .s .n{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}
.bar{margin:12px 0}.bar .lab{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}.bar .lab b{font-variant-numeric:tabular-nums}
.track{height:14px;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.fill{height:100%;border-radius:20px;transition:width .5s ease}

/* liberty / proprietary */
.liberty{background:var(--srf-lib);background-image:linear-gradient(180deg,var(--srf-lib-2),var(--srf-lib-3));color:var(--white-pure);border:none}
.liberty .eyebrow{color:var(--txt-on-lib)}.liberty .big{color:var(--white-pure)}.liberty .sub{color:var(--txt-on-lib-2)}
.badge-prop{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.14);color:var(--txt-on-lib-4);padding:3px 8px;border-radius:20px;margin-left:8px;vertical-align:middle}

/* FIRE timeline (idade -> liberdade) */
.fireline{margin-top:8px}
.fireline .track2{position:relative;height:40px;margin:18px 0 6px}
.fireline .road{position:absolute;top:18px;left:0;right:0;height:6px;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.fireline .road span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold),var(--green));border-radius:20px}
.fireline .pin{position:absolute;top:6px;transform:translateX(-50%);text-align:center;font-size:11px;color:var(--muted);width:80px}
.fireline .pin b{display:block;font-size:13px;color:var(--navy)}
.fireline .pin.flag{top:-2px}.fireline .pin.flag b{color:var(--green)}

/* badges / versions / cta / buttons */
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.vers{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:680px){.vers{grid-template-columns:repeat(3,1fr)}}
.vers .v{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--srf-0)}
.vers .v.free{border-color:var(--green)}.vers .v .tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.vers .v.free .tag{color:var(--green)}.vers .v.prem .tag{color:var(--gold-deep)}.vers .v.ai .tag{color:var(--txt-2)}
.vers .v h3{font-family:Inter,sans-serif;font-size:16px;margin:6px 0 8px}.vers .v ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}.vers .v li{margin:5px 0}
.vers .v.prem{background:linear-gradient(180deg,var(--srf-0),var(--atn-bg))}
.roadmap{display:inline-block;font-size:11px;font-weight:700;background:var(--srf-2);color:var(--txt-2);padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.cta{background:var(--navy);color:var(--white-pure);border:none;text-align:center}.cta h2{color:var(--white-pure)}
.btn{display:inline-block;background:var(--green);color:var(--white-pure);font-weight:700;padding:14px 26px;border-radius:11px;border:none;font-size:16px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--green-hover)}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:var(--white-pure)}
.btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* PASSAPORTE (C31) */
.mdr-pass{background:linear-gradient(180deg,var(--atn-bg),var(--white-pure));border:1px solid var(--gold);border-radius:12px;padding:13px 16px;margin:6px 0 2px}
.mdr-pass--empty{background:var(--paper);border-color:var(--line);color:var(--muted);font-size:13.5px}
.mdr-pass__t{font-weight:700;color:var(--navy);font-size:14.5px;margin-bottom:8px}
.mdr-pass__mem{font-size:13.5px;color:var(--navy);background:rgba(31,107,79,.07);border-left:3px solid var(--green);border-radius:6px;padding:7px 11px;margin:0 0 8px;line-height:1.45}
.mdr-pass__say a{color:var(--green);font-weight:700;white-space:nowrap}
.mdr-pass__chips{display:flex;gap:7px;flex-wrap:wrap}
.mdr-chip{font-size:12.5px;background:var(--srf-0);border:1px solid var(--line);border-radius:20px;padding:3px 10px;color:var(--muted)}.mdr-chip b{color:var(--navy)}
.mdr-pass__bar{height:6px;background:var(--srf-3);border-radius:20px;overflow:hidden;margin:10px 0 4px}
.mdr-pass__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green))}
.mdr-pass__pct{font-size:12px;color:var(--muted)}

/* RECOMENDADOR (C30) */
.mdr-reco__t{font-family:"Playfair Display",serif;font-size:20px;margin:0 0 10px}
.mdr-reco__grid{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:680px){.mdr-reco__grid{grid-template-columns:repeat(3,1fr)}}
.mdr-reco__card{display:block;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper);transition:.15s}
.mdr-reco__card:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-2px)}
.mdr-reco__ico{font-size:20px}.mdr-reco__name{display:block;font-weight:700;color:var(--navy);margin:6px 0 2px}
.mdr-reco__desc{display:block;font-size:13px;color:var(--muted)}

/* result card share */
.sharecard{background:var(--srf-lib-4);background-image:linear-gradient(135deg,var(--srf-dark),var(--srf-lib-2));color:var(--white-pure);border-radius:var(--r);padding:22px;text-align:center;border:none}
.sharecard .selo{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.sharecard .num{font-family:"Playfair Display",serif;font-size:clamp(30px,8vw,46px);margin:6px 0;line-height:1}
.sharecard .ph{color:var(--txt-on-lib-3);font-size:14.5px}

/* misc */
details.method{background:var(--srf-0);border:1px solid var(--line);border-radius:var(--r);padding:4px 18px;margin-top:18px}
details.method summary{cursor:pointer;font-weight:700;padding:14px 0}
details.method[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.faq h3{font-size:16px;font-family:Inter,sans-serif;margin:16px 0 4px}.faq p{margin:0 0 10px;color:var(--muted);font-size:15px}
.links{list-style:none;padding:0;margin:0}.links li{border-bottom:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;padding:12px 2px;color:var(--navy);font-weight:600}.links a:hover{color:var(--green)}
.disclaimer{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:30px;padding:18px 0 50px;text-align:center}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:var(--white-pure);padding:12px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Glossário / verbete */
.crumbs2{font-size:13px;color:var(--muted);margin:10px 0 12px}.crumbs2 a{color:var(--muted)}
.vtitle{font-size:clamp(28px,6vw,42px);margin:.1em 0 .35em}
.callout{border-radius:0 10px 10px 0;padding:13px 16px;margin:14px 0;border-left:4px solid var(--gold);background:var(--paper)}
.callout.tldr{border-color:var(--navy)}.callout.ex{border-color:var(--green)}
.vlist{padding-left:20px}.vlist li{margin:8px 0}
#verbete h2{font-size:22px;margin:26px 0 6px}#verbete p{font-size:17px;line-height:1.7}
.slidefaq{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0;background:var(--srf-0)}
.slidefaq b{color:var(--navy)}.slidefaq p{margin:4px 0 0;color:var(--muted);font-size:15px}
.relgrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
@media(min-width:620px){.relgrid{grid-template-columns:repeat(2,1fr)}}
.rel{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--paper);transition:.15s}
.rel:hover{border-color:var(--green);transform:translateY(-2px)}
.rel b{display:block;color:var(--navy)}.rel span{font-size:13px;color:var(--muted)}
.vcta{margin-top:24px}

/* ===================== POLISH (sprint premium) ===================== */
/* menu no header */
.top .wrap{gap:16px}
.mdr-nav{display:flex;align-items:center;gap:3px;margin-left:auto;flex-wrap:wrap}
.mdr-nav a{color:var(--txt-on-dark-nav);font-size:14px;font-weight:500;padding:7px 11px;border-radius:8px}
.mdr-nav a:hover{color:var(--white-pure);background:rgba(255,255,255,.08)}
.mdr-nav a.on{color:var(--white-pure);background:rgba(255,255,255,.06)}
.mdr-nav-cta{background:var(--green)!important;color:var(--white-pure)!important;font-weight:700!important;margin-left:6px}
.mdr-nav-cta:hover{background:var(--green-hover)!important}
@media(max-width:700px){
  .top .wrap{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  /* nav QUEBRA em linhas no mobile — CTA "Meu Plano" sempre visível, nunca atrás de scroll (T1) */
  .mdr-nav{width:100%;flex-wrap:wrap;overflow:visible;gap:2px;padding-bottom:2px}
  .mdr-nav a{padding:6px 9px;font-size:13px;white-space:nowrap}
  .mdr-nav-cta{margin-left:auto!important}
}

/* footer */
.mdr-footer{background:var(--navy);color:var(--txt-on-dark-2);margin-top:54px}
.mdr-footer .wrap{padding-top:42px;padding-bottom:30px}
.mdr-foot-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:760px){.mdr-foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr}}
.mdr-foot-brand{font-family:Inter,sans-serif;font-weight:700;color:var(--white-pure);font-size:16px;letter-spacing:.02em;margin-bottom:8px}
.mdr-foot-brand b{color:var(--gold)}
.mdr-foot-about p{font-size:14px;line-height:1.6;margin:0;max-width:44ch;color:var(--txt-on-dark-3)}
.mdr-footer h4{color:var(--white-pure);font-family:Inter,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.mdr-footer a{display:block;color:var(--txt-on-dark-2);font-size:14px;padding:4px 0;border:none}
.mdr-footer a:hover{color:var(--white-pure)}
.mdr-foot-src{display:block;font-size:12px;color:var(--txt-on-dark-4);margin-top:8px}
.mdr-foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:18px;font-size:12.5px;color:var(--txt-on-dark-4)}
/* tap targets ≥44px no mobile (acessibilidade T8) — só links de navegação do rodapé */
@media(max-width:640px){.mdr-footer a{padding:12px 0;min-height:44px;line-height:20px}}

/* microinterações + tipografia editorial */
.btn{transition:transform .12s ease,background .15s ease;box-shadow:0 2px 12px rgba(31,107,79,.18)}
.btn:active{transform:translateY(1px)}
.addbtn{padding:12px 16px;font-size:15px}
.card{transition:box-shadow .2s ease,transform .15s ease}
.hero p.lead,.lead{line-height:1.62}
@media(min-width:920px){.hero h1{letter-spacing:-.02em}}
.mdr-pass__say{font-size:13.5px;color:var(--muted);margin:3px 0 11px;max-width:64ch;line-height:1.5}
.mdr-pass__t{font-size:15px}

/* ===== Design System Financeiro (MdrFinViz C1/C2/C3) — P2B-D ===== */
.fv-grade-h{font:600 11px/1 var(--ui,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.fv-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.fv-card{border:1px solid var(--line);border-top:2px solid var(--line);border-radius:3px;padding:10px 11px 11px;background:transparent;min-width:0}
.fv-card.fv-pos{border-top-color:var(--pos)}
.fv-card.fv-neg{border-top-color:var(--neg)}
.fv-card.fv-neutro{border-top-color:var(--gold)}
.fv-card-k{font:600 10.5px/1.2 var(--ui,inherit);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fv-card-v{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:600;color:var(--navy);margin-top:5px;line-height:1.1;letter-spacing:-.01em}
.fv-card-verd{font:500 11px/1.2 var(--ui,inherit);color:var(--muted);margin-top:2px}
.fv-pos .fv-card-verd{color:var(--pos)}
.fv-neg .fv-card-verd{color:var(--neg)}
.fv-card-viz{margin-top:8px}
.fv-spark{display:block;width:100%;height:28px;overflow:visible}
.fv-spark-line{stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fv-spark-area{fill:var(--gold);opacity:.08}
.fv-spark-dot{fill:var(--navy)}
.fv-cmp{display:flex;flex-direction:column;gap:3px}
.fv-cmp-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:6px;font:500 10.5px/1.2 var(--ui,inherit)}
.fv-cmp-k{color:var(--muted);text-transform:capitalize}
.fv-cmp-track{height:6px;background:var(--line);border-radius:2px;overflow:hidden}
.fv-cmp-fill{display:block;height:100%;background:var(--muted)}
.fv-cmp-empresa .fv-cmp-fill{background:var(--gold)}
.fv-cmp-v{font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--ink)}
@media (max-width:520px){.fv-grade{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}.fv-card-v{font-size:19px}}

/* ===== C8 Tabela histórica de indicadores (expansível) — P2B-D ===== */
.fv-ht{margin-top:4px;border:1px solid var(--line);border-radius:3px;overflow-x:auto}
.fv-ht-head,.fv-ht-row{display:grid;grid-template-columns:minmax(116px,1.3fr) 84px repeat(var(--anos,5),minmax(50px,1fr));gap:8px;align-items:center;padding:8px 12px}
.fv-ht-head{background:var(--navy);color:var(--white-pure);font:600 10.5px/1 var(--ui,inherit);letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0}
.fv-ht-head .fv-ht-y,.fv-ht-head .fv-ht-spark{color:var(--white-pure);opacity:.85}
.fv-ht-det{border-top:1px solid var(--line)}
.fv-ht-det:first-of-type{border-top:none}
.fv-ht-row{cursor:pointer;list-style:none;font:500 13px/1.2 var(--ui,inherit)}
.fv-ht-row::-webkit-details-marker{display:none}
.fv-ht-det[open]>.fv-ht-row{background:var(--paper)}
.fv-ht-row:hover{background:var(--paper)}
.fv-ht-c0{color:var(--navy);font-weight:600;display:flex;align-items:center;gap:5px}
.fv-ht-i{color:var(--gold);font-size:11px}
.fv-ht-y{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace}
.fv-ht-v{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--ink)}
.fv-ht-spark{display:flex;justify-content:center;align-items:center}
.fv-ht-exp{padding:2px 14px 14px;font-size:13.5px;line-height:1.55;color:var(--muted);background:var(--paper);border-top:1px dashed var(--line)}
.fv-ht-exp p{margin:0}
@media (max-width:640px){.fv-ht-head,.fv-ht-row{grid-template-columns:minmax(92px,1.2fr) 56px repeat(var(--anos,5),minmax(40px,1fr));gap:5px;padding:7px 9px;font-size:11.5px}}

/* ===== D4 Comparador direto ===== */
.cmp-comp th{font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.cmp-comp td,.cmp-comp th{text-align:right;padding:8px 10px;white-space:nowrap}
.cmp-comp td:first-child,.cmp-comp th:first-child{text-align:left}
.cmp-comp tr.cmp-base{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.cmp-comp tr.cmp-base td:first-child{border-left:3px solid var(--gold)}
.cmp-nm{color:var(--muted);font-size:11.5px;font-weight:400}

/* ===== Navegacao interna da Pagina Empresa (Ciclo 1 UX) ===== */
.emp-nav{position:sticky;top:0;z-index:40;display:flex;gap:2px;overflow-x:auto;background:var(--paper);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0 22px;padding:0 2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.emp-nav::-webkit-scrollbar{display:none}
.emp-nav a{flex:0 0 auto;padding:11px 14px;font:600 12.5px/1 var(--ui,inherit);letter-spacing:.01em;
  color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.emp-nav a:hover{color:var(--navy)}
.emp-nav a.on{color:var(--navy);border-bottom-color:var(--gold)}
@media (max-width:520px){.emp-nav a{padding:10px 11px;font-size:12px}}

/* ============================================================
   ONDA 1 — COMPONENTES "INSTRUMENTO" (cockpit · microinterações ·
   trilho comparativo · toggle de tema · tabelas densas). CEO 2026-07-23.
   ============================================================ */

/* ---- COCKPIT DE DECISÃO (veredito 5s; marca=dourado 1×/tela) ---- */
.cockpit{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--brd-1);
  border-radius:var(--r-lg);background:var(--srf-0);box-shadow:var(--el-2);overflow:hidden;margin:14px 0 8px}
@media(min-width:720px){.cockpit{grid-template-columns:auto 1fr}}
.ck-score{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px 26px;background:linear-gradient(160deg,var(--srf-1),var(--srf-2));border-bottom:1px solid var(--brd-1)}
@media(min-width:720px){.ck-score{border-bottom:none;border-right:1px solid var(--brd-1);min-width:190px}}
.ck-score-n{font-family:var(--mono);font-size:52px;font-weight:600;line-height:1;color:var(--mrc);font-variant-numeric:tabular-nums}
.ck-score-n small{font-size:19px;color:var(--txt-3);font-weight:500}
.ck-score-k{font:600 10.5px/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-top:8px}
.ck-score-z{font:700 13px/1 var(--ui);color:var(--txt-1);margin-top:5px}
.ck-grid{display:grid;grid-template-columns:1fr 1fr}
@media(min-width:560px){.ck-grid{grid-template-columns:repeat(4,1fr)}}
.ck-cell{padding:15px 16px;border-top:1px solid var(--brd-1);border-left:1px solid var(--brd-1);position:relative}
.ck-cell:nth-child(-n+2){border-top:none}
@media(min-width:560px){.ck-cell{border-top:none}}
.ck-cell::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:transparent}
.ck-pos::before{background:var(--pos)} .ck-neg::before{background:var(--neg)} .ck-neu::before{background:var(--brd-2)}
.ck-k{font:600 10.5px/1.2 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
.ck-v{font:600 19px/1.15 var(--ui);letter-spacing:-.01em;margin:5px 0 2px}
.ck-pos .ck-v{color:var(--pos)} .ck-neg .ck-v{color:var(--neg)} .ck-neu .ck-v{color:var(--txt-1)}
.ck-s{font:500 11.5px/1.35 var(--mono);color:var(--txt-3);font-variant-numeric:tabular-nums}
.ck-foot{grid-column:1/-1;font-size:11.5px;color:var(--txt-3);padding:10px 16px;border-top:1px solid var(--brd-1);background:var(--srf-1)}
.ck-foot a{color:var(--green);font-weight:600}

/* ---- MICROINTERAÇÕES: cartão sobe no hover; interativos respondem ---- */
.card,.fv-card,.diverg-card,.rel,.mdr-reco__card,.emp-fontes a{transition:box-shadow var(--mv-padrao),transform var(--mv-rapido),border-color var(--mv-rapido)}
.card:hover,.fv-card:hover{box-shadow:var(--el-2);transform:translateY(-1px)}
.emp-nav a{transition:color var(--mv-rapido),border-color var(--mv-rapido)}
details>summary{transition:color var(--mv-rapido)}
.btn{transition:transform var(--mv-rapido),background var(--mv-rapido),box-shadow var(--mv-padrao)}
.btn:hover{box-shadow:var(--el-2)} .btn:active{transform:translateY(1px)}

/* ---- TRILHO COMPARATIVO (posição na distribuição; substitui barra "maior que") ---- */
.rail{position:relative;height:30px;margin:12px 0 6px}
.rail .rk{position:absolute;top:13px;left:0;right:0;height:4px;background:var(--srf-3);border-radius:2px}
.rail .iqr{position:absolute;top:11px;height:8px;background:var(--brd-2);border-radius:2px;opacity:.9}
.rail .med{position:absolute;top:7px;width:2px;height:16px;background:var(--txt-3)}
.rail .dot{position:absolute;top:6px;width:16px;height:16px;border-radius:50%;background:var(--mrc);
  border:3px solid var(--srf-0);margin-left:-8px;box-shadow:var(--el-1)}
.rail-lbl{display:flex;justify-content:space-between;font:500 10.5px/1 var(--mono);color:var(--txt-3);font-variant-numeric:tabular-nums}

/* ---- TOGGLE DE TEMA (header) ---- */
.theme-tgl{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.18);border-radius:8px;background:transparent;color:var(--txt-on-dark-nav);
  cursor:pointer;font-size:15px;line-height:1;transition:background var(--mv-rapido),border-color var(--mv-rapido)}
.theme-tgl:hover{background:rgba(255,255,255,.08);color:var(--white-pure)}

/* ---- TABELAS DENSAS (linha 34px, tabular, zebra sutil, 1ª coluna fixa opcional) ---- */
.card table,table.cmp{border-collapse:collapse;width:100%}
.card table th,.card table td,table.cmp th,table.cmp td{padding:8px 12px;font-size:13.5px;border-bottom:1px solid var(--brd-1)}
.card table thead th,table.cmp thead th{font:600 10.5px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-3);background:var(--srf-1);position:sticky;top:0}
.card table td.mono,table.cmp td.mono,td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.card table tbody tr:hover td,table.cmp tbody tr:hover td{background:var(--srf-1)}

/* ---- CAMADA DE INTERPRETAÇÃO: "Veredito Meta de Rico" (classifica o ativo; não é ordem) ---- */
.veredito{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--brd-2);border-radius:var(--r-lg);
  background:var(--srf-0);box-shadow:var(--el-2);overflow:hidden;margin:8px 0 6px;position:relative}
@media(min-width:720px){.veredito{grid-template-columns:1fr auto}}
.veredito::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px}
.vd-ma::before{background:var(--pos)} .vd-a::before{background:var(--pos)}
.vd-n::before{background:var(--mrc)} .vd-ea::before{background:var(--atn)} .vd-pa::before{background:var(--neg)}
.vd-main{padding:20px 22px 16px}
.vd-eye{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.vd-klass{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:700;letter-spacing:-.01em;margin:6px 0 2px;line-height:1.1}
.vd-dot{width:14px;height:14px;border-radius:50%;flex:none}
.vd-ma .vd-dot,.vd-a .vd-dot{background:var(--pos)} .vd-n .vd-dot{background:var(--mrc)}
.vd-ea .vd-dot{background:var(--atn)} .vd-pa .vd-dot{background:var(--neg)}
.vd-ma .vd-klass,.vd-a .vd-klass{color:var(--pos)} .vd-n .vd-klass{color:var(--txt-1)}
.vd-ea .vd-klass{color:var(--atn)} .vd-pa .vd-klass{color:var(--neg)}
.vd-q{font-size:13px;font-weight:600;color:var(--txt-2);margin:12px 0 7px}
.vd-js{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.vd-j{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:var(--txt-1)}
.vd-j::before{position:absolute;left:0;top:1px;font-weight:700}
.vd-j.ok::before{content:"✔";color:var(--pos)} .vd-j.no::before{content:"!";color:var(--atn)}
.vd-hums{display:grid;grid-template-columns:1fr;gap:1px;background:var(--brd-1);border-top:1px solid var(--brd-1);margin-top:16px}
@media(min-width:560px){.vd-hums{grid-template-columns:repeat(3,1fr)}}
.vd-h{background:var(--srf-0);padding:12px 16px}
.vd-hk{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.vd-hv{font-size:13.5px;color:var(--txt-1);margin-top:3px;line-height:1.4}
.vd-side{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 26px;
  background:linear-gradient(160deg,var(--srf-1),var(--srf-2));border-top:1px solid var(--brd-1)}
@media(min-width:720px){.vd-side{border-top:none;border-left:1px solid var(--brd-1);min-width:170px}}
.vd-gauge{width:130px;height:auto}
.vd-gn{font-family:var(--mono);font-size:22px;font-weight:700;fill:var(--txt-1)}
.vd-side-k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-top:2px;text-align:center}
.vd-foot{grid-column:1/-1;font-size:11.5px;color:var(--txt-3);padding:11px 16px;border-top:1px solid var(--brd-1);background:var(--srf-1)}
.vd-foot b{color:var(--txt-2)}

/* ---- ranking do Score (linguagem de posição, não nota) ---- */
.vd-rank{margin-top:10px;text-align:center}
.vd-rank b{display:block;font-family:var(--mono);font-size:15px;color:var(--pos);font-weight:700}
.vd-rank span{display:block;font-size:11.5px;color:var(--txt-2);margin-top:1px}
.vd-rank small{display:block;font-family:var(--mono);font-size:10px;color:var(--txt-3);margin-top:2px}

/* ---- GANCHO DE RISCO (camada emocional, logo após o Veredito) ---- */
.riskhook{border:1px solid var(--brd-2);border-left:4px solid var(--atn);border-radius:0 var(--r) var(--r) 0;
  background:var(--atn-bg);padding:15px 18px;margin:0 0 10px}
.rh-tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--atn)}
.rh-t{font-size:16.5px;font-weight:600;color:var(--txt-1);margin:5px 0 5px;line-height:1.3}
.rh-p{font-size:14.5px;color:var(--txt-2);line-height:1.5;margin:0 0 8px;max-width:70ch}
.rh-link{font-size:13px;font-weight:600;color:var(--green)}

/* ---- FUNIL DE PROGRESSÃO (fluxo entre páginas; retenção) ---- */
.flow{border:1px solid var(--brd-1);border-radius:var(--r-lg);background:var(--srf-0);box-shadow:var(--el-1);padding:20px 22px;margin:16px 0}
.flow-done{font-size:15px;font-weight:600;color:var(--txt-1);margin:0 0 4px}
.flow-done b{color:var(--pos)}
.flow-sub{font-size:13.5px;color:var(--txt-2);margin:0 0 14px}
.flow-nx{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.flow-nx a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brd-2);border-radius:99px;
  padding:8px 15px;font-weight:600;font-size:14px;color:var(--txt-1);background:var(--srf-1);transition:all var(--mv-rapido)}
.flow-nx a:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px);box-shadow:var(--el-1)}
.flow-nx a .ar{color:var(--txt-3)}
.flow-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--brd-1);padding-top:14px}
.flow-cta span{font-size:14px;color:var(--txt-2)}
.flow-cta a{flex:none;background:var(--green);color:var(--white-pure);font-weight:700;padding:11px 20px;border-radius:10px;font-size:14.5px}
.flow-cta a:hover{background:var(--green-hover)}

/* ---- frase-síntese (a identidade da empresa em uma linha) ---- */
.vd-sintese{font-size:18px;line-height:1.45;color:var(--txt-1);margin:8px 0 0;max-width:52ch;font-weight:500}
@media(min-width:720px){.vd-sintese{font-size:19.5px}}
/* Veredito ganha respiro de primeira tela */
.veredito{margin-top:14px}
.vd-klass{font-size:30px}
@media(min-width:720px){.vd-klass{font-size:34px}}

/* ---- COCKPIT COMPACTO (CEO: ocupa espaço demais; o Veredito é o protagonista) ---- */
.cockpit{box-shadow:var(--el-1);border-radius:var(--r)}
.ck-score{padding:13px 18px;min-width:auto}
@media(min-width:720px){.ck-score{min-width:150px}}
.ck-score-n{font-size:34px}
.ck-score-n small{font-size:13px}
.ck-score-k{font-size:9.5px;margin-top:5px}
.ck-score-z{font-size:12px;margin-top:3px}
.ck-cell{padding:10px 13px}
.ck-v{font-size:15.5px;margin:3px 0 1px}
.ck-k{font-size:9.5px}
.ck-s{font-size:10.5px}
.ck-foot{font-size:11px;padding:8px 13px}

/* ============================================================
   GESTO GRÁFICO ÚNICO — "marcas de calibração" (Critério de Pronto §0.4)
   SIGNIFICADO (não é ornamento): são as marcas de canto de um instrumento
   de medição aferido — o mesmo vocabulário de miras, esquadros e réguas de
   precisão. Dizem "isto foi MEDIDO, não opinado". Por isso aparecem
   EXCLUSIVAMENTE no Veredito, que é a única conclusão da página.
   Um gesto repetido mil vezes vence cinco gestos repetidos duzentas.
   ============================================================ */
.veredito::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r-lg);
  background:
    linear-gradient(var(--mrc),var(--mrc)) 0 0/2px 16px no-repeat,
    linear-gradient(var(--mrc),var(--mrc)) 0 0/16px 2px no-repeat,
    linear-gradient(var(--mrc),var(--mrc)) 100% 100%/2px 16px no-repeat,
    linear-gradient(var(--mrc),var(--mrc)) 100% 100%/16px 2px no-repeat;
}
/* 🚫 PROIBIDO replicar este gesto em qualquer outro componente. */