/* ==========================================================================
   infografico.css — Design system compartilhado do portal Investimento Prático
   Mobile-first. Carregado ANTES do CSS específico de cada página.

   Breakpoints: 480 (phone pequeno) · 700 (tabelas viram cards / acordeão)
                900 (menu hambúrguer) · 1024 (grids largos)
   Convenção: classes kebab-case alinhadas ao markup existente.
   Sem dark mode. Sem !important (exceto onde inevitável).
   ========================================================================== */

/* ---- Tokens ---- */
:root{
  /* Marca */
  --az9:#0B1F3A; --az8:#12305A; --az6:#1F4E8C;
  --lr5:#F26B1D; --lr6:#D95A10; --lr0:#FFF1E8;
  --c9:#1F2937; --c6:#4B5563; --c3:#D1D5DB; --c1:#F3F4F6; --c0:#F9FAFB; --w:#fff;
  --fonte:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Espaço (múltiplos de 4/8) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Forma */
  --raio:12px; --raio-lg:16px; --raio-btn:10px;
  --sombra:0 1px 2px rgba(11,31,58,.06);
  --sombra-hover:0 8px 24px rgba(11,31,58,.12);

  /* Alvos e layout */
  --toque:48px; --toque-min:44px;
  --header-h:58px; --cta-bar-h:60px;
  --maxw:1100px;

  --font:var(--fonte);
  color-scheme:light;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--w);
  color:var(--c6);
  font:400 1rem/1.6 var(--fonte);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{color:var(--az9);line-height:1.15;margin:0;letter-spacing:-.02em}
h1{text-wrap:balance}
h2,h3{text-wrap:pretty}
p{margin:0}

.wrap,.sheet{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--lr5);outline-offset:2px;border-radius:4px}

.rotulo,.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--az6);
}

/* ---- Header + menu mobile ---- */
header.site-header,.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:var(--w);border-bottom:1px solid var(--c3);
  transition:transform .2s ease;
}
/* Recolhe o cabeçalho depois do hero (quando a barra de CTA assume o CTA) */
body.passou-hero .site-header{transform:translateY(-100%)}
body.passou-hero .mininav{top:env(safe-area-inset-top,0px)}
.site-header .wrap,.site-header .header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:var(--header-h);
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--az9);font-size:.95rem;line-height:1.1;text-decoration:none;min-height:var(--toque-min)}
.logo b{background:var(--az9);color:#fff;border-radius:6px;padding:6px 8px;font-size:1.05rem}
.logo small{display:block;font-weight:500;font-size:.65rem;color:var(--c6);letter-spacing:.06em}
.header-actions{position:relative;display:flex;align-items:center;gap:var(--sp-2)}
.cta-header{white-space:nowrap}
.menu-toggle{
  display:none;width:var(--toque-min);height:var(--toque-min);flex:0 0 auto;
  align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--c3);border-radius:10px;color:var(--az9);
  transition:background .15s ease;
}
.menu-toggle:active{background:var(--c1)}
.menu-toggle[aria-expanded="true"]{background:var(--c1)}

/* ---- Botões ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--toque-min);padding:12px 22px;border-radius:var(--raio-btn);
  border:1px solid transparent;font-weight:700;font-size:.9375rem;line-height:1;
  text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.btn-primario{background:var(--lr5);color:var(--az9);border-color:var(--lr5)}
.btn-primario:hover{background:var(--lr6);border-color:var(--lr6);color:#fff}
.btn-primario:active{transform:translateY(1px);background:var(--lr6);color:#fff}
.btn-secundario{background:transparent;color:var(--az9);border-color:var(--az9)}
.btn-secundario:hover{background:var(--az9);color:#fff}
.btn.o{background:transparent;border:2px solid #fff;color:#fff}
.btn.o:hover{background:#fff;color:var(--az9)}
.btn svg{flex:0 0 auto}

.nav-principal{display:flex;align-items:center;gap:2px}
.nav-principal a{padding:10px 12px;border-radius:8px;font-size:.9375rem;font-weight:500;color:var(--az9);min-height:var(--toque-min);display:inline-flex;align-items:center;transition:background .15s ease}
.nav-principal a:hover{background:var(--c1)}
.nav-principal a.ativo{background:var(--lr0);box-shadow:inset 0 -2px 0 var(--lr5)}

/* ---- Hero + chips ---- */
.hero{padding:clamp(28px,5vw,56px) 0 clamp(28px,4vw,48px);background:var(--c0);border-bottom:1px solid var(--c3)}
header.hero{margin:0 0 40px}
.crumb{padding:0 0 12px;font-size:.8rem;color:var(--c6)}
.crumb span{color:var(--az6);font-weight:600}
.hero h1{font-size:clamp(1.9rem,5.5vw,3.2rem);font-weight:800;margin:10px 0 16px;max-width:19ch}
.hero h1 em{font-style:normal;color:var(--lr5)}
.hero p,.hero .subtitle,.hero .sub{max-width:62ch;font-size:1.0625rem;color:var(--c6);margin:0 0 22px}
.hero .btn+.btn{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:24px}
.chip{background:var(--w);border:1px solid var(--c3);border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:600;color:var(--az8)}

/* ---- Seções ---- */
section{padding:clamp(36px,6vw,56px) 0}
section.alt{background:var(--c1)}
.sh{margin-bottom:24px;max-width:62ch}
.sh h2{font-size:clamp(1.5rem,3.2vw,2.15rem);margin-top:8px}
.sh p{margin:10px 0 0}
.section-label{display:block;margin:44px 0 22px;max-width:64ch}
.section-label .num{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--az6);margin:0 0 8px}
.section-label h2{font-size:clamp(1.4rem,3.2vw,2rem);font-weight:700;color:var(--az9);margin:0}
.section-label .rule{display:none}
.prose{font-size:1rem;line-height:1.65;color:var(--c6);max-width:68ch}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:6px}

/* ---- Fluxo em 3 passos ---- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:stretch}
.step{background:var(--w);border:1px solid var(--c3);border-radius:14px;padding:22px;position:relative}
.step .n,.step-num{width:36px;height:36px;border-radius:50%;background:var(--az9);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:14px}
.step h3{font-size:1.1rem;margin-bottom:6px}
.step p{font-size:.95rem}
.step small{display:block;margin-top:12px;color:var(--az6);font-weight:600;font-size:.8rem}

/* ---- Caixa destaque (basket) ---- */
.basket{margin-top:20px;background:var(--az9);color:#fff;border-radius:14px;padding:24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.basket p{margin:0;color:#dbe4f0;flex:1;min-width:220px}
.basket b{color:#fff}
.bld{display:flex;align-items:flex-end;gap:5px;height:64px;flex:0 0 auto}
.bld i{display:block;width:26px;border-radius:3px 3px 0 0;background:var(--az6)}
.dots{display:grid;grid-template-columns:repeat(6,22px);gap:6px;flex:0 0 auto}
.dots i{width:22px;height:22px;border-radius:50%;background:var(--lr5)}
.dots i:nth-child(2n){background:#fff}
.dots i:nth-child(3n){background:var(--az6)}

/* ---- Grid de cards (vantagens) ---- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--w);border:1px solid var(--c3);border-top:4px solid var(--lr5);border-radius:12px;padding:20px;box-shadow:var(--sombra)}
.card .big{font-size:2rem;font-weight:800;color:var(--az9);line-height:1}
.card h3{font-size:1.05rem;margin:8px 0 4px}
.card p{margin:0;font-size:.92rem}
.card em{display:block;margin-top:10px;font-style:normal;font-size:.78rem;color:var(--az6);font-weight:600}

/* ---- Barras de prioridade ---- */
.prio{display:grid;gap:10px;max-width:760px}
.bar{border-radius:10px;padding:14px 18px;color:#fff;font-weight:700;display:grid;gap:2px}
.bar span{font-weight:500;font-size:.88rem;opacity:.95}
.bar.p1{background:var(--az9)}.bar.p2{background:var(--az8)}.bar.p3{background:var(--az6)}
.bar.p4{background:var(--c6)}.bar.p5{background:var(--lr5);color:var(--az9)}

/* ---- Tabelas ---- */
.scroll,.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c3);border-radius:14px;background:var(--w)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--c1);vertical-align:top}
th{background:var(--az9);color:#fff;font-weight:600}
th.hl{background:var(--lr5);color:var(--az9)}
td.hl{background:var(--lr0);font-weight:600;color:var(--az9)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;color:var(--az9)}
tr.hl td{background:var(--lr0)}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700;background:var(--az9);color:#fff;white-space:nowrap}
.pill.o{background:var(--lr5);color:var(--az9)}
.pill.g{background:var(--c3);color:var(--az9)}
.meter{display:inline-flex;gap:4px;vertical-align:middle;margin-right:8px}
.meter i{width:14px;height:8px;border-radius:2px;background:var(--c3)}
.meter i.on{background:var(--az6)}
td.hl .meter i.on,tr.hl .meter i.on{background:var(--lr5)}

/* ---- Calendário de cupons ---- */
.legend{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px;font-size:.82rem;font-weight:600;color:var(--az9)}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c)}
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.m{min-height:106px;border-radius:12px;padding:12px;background:var(--w);border:1px solid var(--c3);border-top:5px solid var(--c);font-size:.8rem}
.m b{display:block;color:var(--az9);font-size:.95rem;margin-bottom:4px}
.m.on strong{display:block;color:var(--az9);font-size:.82rem}
.m.off{border:1px dashed var(--c3);border-top:5px dashed var(--c3);background:var(--c0)}
.m.off small{color:var(--c6)}
.f{--c:var(--lr5)}.a{--c:var(--az6)}.b{--c:var(--az9)}

/* ---- Avisos ---- */
.note,.warn,.formula-note{margin-top:16px;background:var(--lr0);border-left:5px solid var(--lr5);border-radius:0 12px 12px 0;padding:14px 18px;font-size:.92rem;color:var(--az9)}
.note b,.warn b{color:var(--az9)}

/* ---- Tipos / famílias / degraus ---- */
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.type{display:flex;gap:16px;background:var(--w);border:1px solid var(--c3);border-radius:12px;padding:20px}
.type .tag{flex:0 0 52px;height:52px;border-radius:12px;background:var(--lr0);color:var(--lr6);font-weight:800;display:grid;place-items:center;font-size:.78rem;text-align:center;line-height:1.1}
.type h3{font-size:1.05rem;margin-bottom:4px}
.type p{margin:0;font-size:.9rem}
.type em{display:block;margin-top:8px;font-style:normal;font-size:.78rem;color:var(--az6);font-weight:600}

/* ---- Calculadora ---- */
.calc{margin-top:20px;background:var(--w);border:1px solid var(--c3);border-top:4px solid var(--lr5);border-radius:14px;padding:22px;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:18px;align-items:end}
.calc label{display:block;font-size:.85rem;font-weight:700;color:var(--az9);margin-bottom:6px}
.calc input,.calc select{width:100%;min-height:var(--toque);border:1px solid var(--c3);border-radius:10px;padding:0 14px;font:inherit;font-size:1rem;color:var(--az9);background:var(--w)}
.calc output{display:block;background:var(--az9);color:#fff;border-radius:12px;padding:12px 18px}
.calc output small{display:block;font-size:.78rem;color:#dbe4f0}
.calc output b{font-size:1.5rem;font-weight:800}

/* ---- Painel de estratégia (escuro) ---- */
.strat{background:var(--az9);color:#dbe4f0;border-radius:var(--raio-lg);padding:32px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.strat h2{color:#fff;font-size:clamp(1.4rem,3vw,2rem);margin:8px 0 14px}
.strat p{margin:0 0 14px}
.strat ul{margin:0 0 20px;padding-left:20px}
.strat li{margin:8px 0}
.strat li b{color:#fff}
.strat .eyebrow{color:var(--lr5)}
.box{background:#ffffff12;border:1px solid #ffffff2a;border-radius:14px;padding:20px}
.box h3{color:#fff;font-size:1.05rem;margin-bottom:10px}
.box ol{margin:0;padding-left:20px;font-size:.92rem}
.box li{margin:7px 0}

/* ---- Riscos / cuidados ---- */
.risks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.risk{border-left:5px solid var(--lr5);background:var(--w);border-radius:0 12px 12px 0;padding:18px 20px;border-top:1px solid var(--c3);border-right:1px solid var(--c3);border-bottom:1px solid var(--c3)}
.risk h3{font-size:1rem;margin-bottom:4px}
.risk p{margin:0;font-size:.92rem}

/* ---- Caminho em 5 passos ---- */
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:p}
.path li{counter-increment:p;position:relative;background:var(--w);border:1px solid var(--c3);border-radius:12px;padding:18px 16px 18px 58px;font-size:.92rem;min-height:66px}
.path li::before{content:counter(p);position:absolute;left:16px;top:18px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lr5);color:var(--az9);font-weight:800}
.path b{display:block;color:var(--az9);margin-bottom:4px}

/* ---- Perfil (faz sentido) ---- */
.fit{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fit>div{border-radius:14px;padding:22px;border:1px solid var(--c3);background:var(--w)}
.fit h3{font-size:1.1rem;margin-bottom:10px}
.fit ul{margin:0;padding-left:20px}
.fit li{margin:6px 0}
.fit .yes{border-top:4px solid var(--az6)}
.fit .no{border-top:4px solid var(--lr5)}

/* ---- CTA final ---- */
.cta{background:var(--az9);color:#fff;text-align:center;padding:56px 20px}
.cta h2{color:#fff;font-size:clamp(1.5rem,3.5vw,2.3rem);max-width:24ch;margin:0 auto 12px}
.cta p{color:#dbe4f0;max-width:54ch;margin:0 auto 24px}
.cta .btn{background:var(--lr5);color:var(--az9)}
.cta .btn:hover{background:var(--lr6);color:#fff}
.next{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.next a{color:#fff;border:1px solid #ffffff55;border-radius:999px;padding:10px 16px;text-decoration:none;font-size:.85rem;font-weight:600;min-height:var(--toque-min);display:inline-flex;align-items:center}
.next a:hover,.next a:active{background:#ffffff1a}

/* ---- Navegação entre módulos ---- */
.module-nav{display:flex;gap:12px;margin:24px 0 0}
.module-nav a{flex:1;background:var(--c0);border:1px solid var(--c3);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;min-height:var(--toque)}
.module-nav a:hover{border-color:var(--az6)}
.module-nav .lbl{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c6);font-weight:600}
.module-nav .nm{font-size:1.05rem;font-weight:700;color:var(--az9)}
.module-nav a.next{align-items:flex-end;text-align:right}
.cta-inline{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--az9);padding:12px 18px;border-radius:var(--raio-btn);min-height:var(--toque-min)}
.cta-inline:hover{background:var(--lr5);color:var(--az9)}

/* ---- Ticker legado (chips) ---- */
.ticker{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:22px 0 0}
.ticker-item{flex:0 0 auto;border:1px solid var(--c3);background:var(--w);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;color:var(--az8);display:inline-flex;align-items:center;gap:8px}
.ticker-item b{color:var(--az9);font-weight:700}

/* ---- Tabela legada (.ledger) ---- */
.ledger{width:100%;border-collapse:collapse;min-width:640px;font-size:.9rem;background:var(--w)}
.ledger thead th{background:var(--az9);color:#fff;text-align:left;padding:12px 14px;font-weight:600}
.ledger thead th.hcol{background:var(--lr5);color:var(--az9)}
.ledger td{padding:12px 14px;border-bottom:1px solid var(--c1);vertical-align:top}
.ledger tbody tr:nth-child(odd){background:var(--c0)}
.ledger .instrument b{display:block;color:var(--az9)}

/* ---- Rodapé ---- */
footer.site-footer,.site-footer{background:var(--c0);border-top:1px solid var(--c3);padding:clamp(36px,6vw,56px) 0 28px}
footer:not(.site-footer){padding:28px 0;font-size:.875rem;color:var(--c6)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer-brand .marca{margin-bottom:var(--sp-4)}
.footer-brand p{font-size:.875rem;max-width:320px}
.footer-col h3{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--az9);margin-bottom:var(--sp-3);margin-top:var(--sp-5)}
.footer-col h3:first-child{margin-top:0}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.footer-col a{color:var(--c6);font-size:.9rem;display:inline-flex;align-items:center;min-height:var(--toque-min);transition:color .15s ease}
.footer-col a:hover{color:var(--az6);text-decoration:underline}
.footer-bottom{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--c3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);font-size:.8125rem;color:var(--c6)}
.disclaimer{font-size:.875rem;line-height:1.6;color:var(--c6);max-width:96ch}
.footer-legal{font-size:.82rem;line-height:1.6;color:var(--c6);max-width:96ch;margin:0 0 10px}
.footer-legal strong{color:var(--az9)}
.footer-quem{margin-top:16px}
.footer-quem a{display:inline-flex;align-items:center;gap:8px;min-height:var(--toque-min);font-weight:700;color:var(--az9);border:1px solid var(--c3);border-radius:10px;padding:0 16px;background:var(--w);transition:border-color .15s ease,background .15s ease}
.footer-quem a:hover{border-color:var(--az6);background:var(--c0)}

/* ==========================================================================
   Sistemas mobile novos
   ========================================================================== */

/* ---- Mini-navegação de seções (infográficos) ---- */
.mininav{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h));
  z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--c3);
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding:8px 20px;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.mininav::-webkit-scrollbar{display:none}
.mininav a{flex:0 0 auto;font-size:.8rem;font-weight:600;color:var(--az8);background:var(--c0);border:1px solid var(--c3);border-radius:999px;padding:8px 14px;min-height:var(--toque-min);display:inline-flex;align-items:center;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}
.mininav a:hover{background:var(--c1)}
.mininav a.ativo{background:var(--az9);color:#fff;border-color:var(--az9)}

/* ---- Barra de CTA inferior ---- */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.97);backdrop-filter:blur(6px);
  border-top:1px solid var(--c3);
  padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));
  transform:translateY(120%);transition:transform .2s ease;
}
.cta-bar.is-visivel{transform:translateY(0)}
.cta-bar .btn{width:100%;min-height:var(--cta-bar-h)}
body.tem-cta-bar{padding-bottom:calc(var(--cta-bar-h) + 16px + env(safe-area-inset-bottom,0px))}

/* ---- Botão voltar ao topo ---- */
.to-top{
  position:fixed;right:16px;bottom:calc(var(--cta-bar-h) + 20px + env(safe-area-inset-bottom,0px));
  z-index:55;width:var(--toque);height:var(--toque);border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:var(--az9);color:#fff;border:0;box-shadow:var(--sombra-hover);
  transition:opacity .15s ease,transform .15s ease;opacity:0;transform:translateY(8px);
}
.to-top.is-visivel{display:flex;opacity:1;transform:none}
.to-top:active{background:var(--az8)}

/* ---- Acordeão (Cuidados) ---- */
details.risk{list-style:none}
details.risk>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--toque-min);font-weight:700;color:var(--az9);font-size:1rem;
}
details.risk>summary::-webkit-details-marker{display:none}
details.risk>summary h3{display:inline;font-size:1rem}
details.risk>summary::after{content:"+";font-weight:800;color:var(--lr5);font-size:1.35rem;line-height:1;flex:0 0 auto}
details.risk[open]>summary::after{content:"–"}
details.risk>p{margin-top:6px}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:1024px){
  .grid4,.path{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .nav-principal{
    position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:240px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--w);border:1px solid var(--c3);border-radius:var(--raio);
    box-shadow:var(--sombra-hover);padding:var(--sp-2);display:none;
  }
  .nav-principal.is-open{display:flex}
  .nav-principal a{padding:12px;font-size:1rem}
  .strat{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  /* Fluxo vertical com conector */
  .flow{grid-template-columns:1fr;gap:30px}
  .flow .step:not(:last-child)::after{content:"";position:absolute;left:34px;top:auto;bottom:-30px;width:3px;height:30px;background:var(--lr5)}
  .step{padding:20px}
  /* Tipos / riscos / perfil em coluna */
  .types,.risks,.fit{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .basket{padding:20px;gap:16px}
  .basket .bld,.basket .dots{display:none}
  .strat{padding:22px;border-radius:14px}
  .strat .btn{width:100%}
  .path{grid-template-columns:1fr}
  .cal{grid-template-columns:repeat(3,1fr)}
  .m{min-height:0}
  .logo small{display:none}
  .card .big{font-size:1.6rem}
  .btn{padding:13px 18px}

  /* Tabelas viram cards empilhados */
  table.responsive,.ledger.responsive{border:0;min-width:0;font-size:.95rem}
  table.responsive thead,.ledger.responsive thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.responsive tr,.ledger.responsive tr{display:block;border:1px solid var(--c3);border-radius:12px;margin-bottom:12px;background:var(--w);overflow:hidden}
  table.responsive tbody tr:nth-child(odd),.ledger.responsive tbody tr:nth-child(odd){background:var(--w)}
  table.responsive td,.ledger.responsive td{display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:10px;border:0;border-bottom:1px solid var(--c1);padding:12px 14px;text-align:left}
  table.responsive td:last-child,.ledger.responsive td:last-child{border-bottom:0}
  table.responsive td::before,.ledger.responsive td::before{content:attr(data-label);font-weight:700;color:var(--c6);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
  table.responsive td:first-child,.ledger.responsive td:first-child{grid-template-columns:1fr;font-size:1.02rem;background:var(--c0)}
  table.responsive td:first-child::before,.ledger.responsive td:first-child::before{display:none}
  table.responsive tr.hl,table.responsive td.hl,.ledger.responsive tr:has(td.hl){background:var(--lr0)}
  table.responsive tr.hl td,.ledger.responsive tr:has(td.hl) td{background:transparent}
}
@media (min-width:701px){
  details.risk>summary{cursor:default;pointer-events:none}
  details.risk>summary::after{display:none}
}
@media (max-width:480px){
  .grid4,.path{grid-template-columns:1fr}
  .cal{grid-template-columns:repeat(3,1fr);gap:8px}
  .footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(1.75rem,8vw,2.4rem)}
  .next a{width:100%;justify-content:center}
  /* Header compacto para caber logo + CTA + hambúrguer */
  .site-header .wrap,.site-header .header-inner{gap:8px}
  .logo{font-size:.78rem;gap:8px}
  .logo b{padding:5px 7px;font-size:.95rem}
  .header-actions{gap:6px}
  .cta-header{padding:0 12px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}