/* ==========================================================================
   shell.css — padrão visual dos produtos (modelo: página de ETFs)
   Tokens, cabeçalho, hero, títulos de seção, chips, CTA e rodapé.
   Carregado DEPOIS dos estilos da página, para padronizar o visual.
   ========================================================================== */
:root{
  --az9:#0B1F3A; --az8:#12305A; --az6:#1F4E8C;
  --lr5:#F26B1D; --lr6:#D95A10; --lr0:#FFF1E8;
  --c9:#1F2937; --c6:#4B5563; --c3:#D1D5DB; --c1:#F3F4F6; --c0:#F9FAFB; --w:#fff;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--w);
  color:var(--c6);
  font:400 1rem/1.6 var(--font);
  padding:0;
}
h1,h2,h3{color:var(--az9);line-height:1.15;letter-spacing:-.02em}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.sheet{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---- Cabeçalho padrão ---- */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:var(--w); border-bottom:1px solid var(--c3); margin:0;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--az9);font-size:.95rem;line-height:1.1;text-decoration:none}
.logo b{background:var(--az9);color:#fff;border-radius:6px;padding:6px 8px;font-size:1.1rem}
.logo small{display:block;font-weight:500;font-size:.65rem;color:var(--c6);letter-spacing:.06em}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:10px;background:var(--lr5);color:var(--az9);font-weight:700;
  text-decoration:none;font-size:.9rem;border:0;
}
.btn:hover{background:var(--lr6);color:#fff}
.btn.o{background:transparent;border:2px solid var(--az9);color:var(--az9)}
.btn.o:hover{background:var(--az9);color:#fff}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--az6);outline-offset:2px}

/* ---- Breadcrumb + hero ---- */
.crumb{padding:18px 0 0;font-size:.8rem;color:var(--c6)}
.crumb span{color:var(--az6);font-weight:600}
header.hero{
  background:var(--c0);border-bottom:1px solid var(--c3);
  margin:0 0 40px;padding:24px 0 40px;
}
.sheet>header.hero{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
header.hero .eyebrow{color:var(--az6);margin:12px 0 10px}
header.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;margin:0 0 16px;max-width:20ch}
header.hero h1 em{font-style:normal;color:var(--lr5)}
header.hero .subtitle{max-width:62ch;font-size:1.1rem;color:var(--c6);margin:0}

/* ---- Chips (ticker legado) ---- */
.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:99px;
  padding:6px 14px;font-size:.8rem;font-weight:600;color:var(--az8);
  display:inline-flex;align-items:center;gap:8px;white-space:normal;
}
.ticker-item b{color:var(--az9);font-weight:700}
.ticker-item svg{flex:0 0 auto}

/* ---- Títulos de seção (section-label legado -> .sh) ---- */
.section-label{display:block;margin:44px 0 24px;max-width:64ch}
.section-label .num{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--az6);margin:0 0 8px;
}
.section-label h2{font-size:clamp(1.5rem,3.2vw,2.15rem);font-weight:700;color:var(--az9);margin:0}
.section-label .rule{display:none}

/* ---- Detalhes visuais dos blocos de conteúdo ---- */
.pillar,.pillar2,.explainer-card,.benefit-card,.cost-card,.when-card,.att-card,
.mistake-card,.gloss-card,.type,.risk,.card{border-radius:12px;box-shadow:0 1px 2px rgba(11,31,58,.06)}
.ir-wrap,.tax-wrap,.flow-box,.formula-wrap{border-radius:12px}
.risk{border-radius:0 12px 12px 0}

/* ---- CTA final ---- */
.cta{
  background:var(--az9);color:#fff;text-align:center;
  padding:56px 24px;border-radius:16px;margin:56px 0 0;
}
.cta h2{color:#fff;font-size:clamp(1.6rem,3.5vw,2.3rem);max-width:24ch;margin:0 auto 12px}
.cta p{color:#dbe4f0;max-width:56ch;margin:0 auto 26px}
.cta .btn{background:var(--lr5);color:var(--az9)}
.cta .btn:hover{background:var(--lr6);color:#fff}

/* ---- Navegação entre módulos ---- */
.module-nav{display:flex;gap:12px;background:transparent;border:0;margin-top:20px}
.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;text-decoration:none;transition:border-color .15s ease;
}
.module-nav a:hover{background:var(--w);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}

/* ---- Rodapé ---- */
footer{padding:28px 0;background:var(--c0);font-size:.8rem;color:var(--c6)}
footer p{margin:0;max-width:96ch}

/* ---- Responsivo ---- */
@media(max-width:720px){
  .site-header .wrap{min-height:56px}
  .logo small{display:none}
  .btn{padding:0 16px}
  .cta{margin-top:40px;padding:44px 20px}
  .module-nav{flex-direction:column}
  .module-nav a.next{align-items:flex-start;text-align:left}
  header.hero{padding:20px 0 32px}
  .section-label{margin:36px 0 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}