/* style.css — base do Guia v2 (identidade Viggo dark). Cores SEMPRE via var(--token). */

/* ---------- reset básico ---------- */
*{box-sizing:border-box}
html{
  scroll-padding-top:calc(var(--header-h) + 16px);
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Movimento é opcional por contrato (DESIGN.md §5): com 43 links na
   sidebar, 43 no índice mobile e 43 na busca, o scroll suave é a maior
   fonte de movimento involuntário do produto. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

/* Quebra de palavras longas para nunca estourar a viewport no mobile.
   word-break só no mobile: em desktop ele parte palavras longas do
   português ("não-cumulatividade") no meio da sílaba. */
h1,h2,h3,p,li,a,span,strong,small,td,th,label{overflow-wrap:break-word}

/* ---------- papéis tipográficos (DESIGN.md §3) ----------
   Títulos em Montserrat, corpo em Open Sans. Peso é hierarquia e
   só funciona se for escasso: 800 é exclusivo de título. */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:var(--w-display);
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h3{
  font-size:var(--t-sub);
  font-weight:var(--w-heading);
  letter-spacing:normal;
}

/* Medida de leitura: nenhum bloco de texto corrido acima de ~68ch.
   O container de 920px deixava o parágrafo correr muito além disso. */
p,li{max-width:var(--measure)}
p{font-size:var(--t-body)}

/* Valores fiscais alinham na vírgula — o leitor confere a soma. */
table,
.result-grid strong,
.grand-total strong,
.worked-grid strong,
.example-data b,
.formula-strip strong,
.timeline b,
.hero-countdown strong,
.form-grid input,
.capture-field input{
  font-variant-numeric:tabular-nums;
}

/* ---------- foco visível (acessibilidade) ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- barra de progresso de leitura ---------- */
.reading-progress{
  position:fixed;
  top:0;
  left:0;
  height:4px;
  width:100%;
  z-index:9999;
  background:var(--progress);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .1s linear;
  will-change:transform;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(16px,4vw,28px);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none}
/* Duas variantes do SVG: o azul institucional da marca (#224484) fica
   ilegível sobre o navy do header escuro, então lá entra a versão clara.
   <picture> cobre o modo do SO; os seletores abaixo cobrem o toggle manual. */
.brand-logo{display:block;line-height:0}
.brand-logo img{display:block;width:auto;height:29px}
:root[data-theme="dark"] .brand-logo img{content:url("../img/viggo-logo-dark.svg")}
:root[data-theme="light"] .brand-logo img{content:url("../img/viggo-logo.svg")}
.brand-sub{
  color:var(--muted);font-size:.78rem;line-height:1.2;
  padding-left:14px;border-left:1px solid var(--border);
}
@media(max-width:560px){.brand-sub{display:none}}

.header-actions{display:flex;align-items:center;gap:8px}
.icon-button{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:1.1rem;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.icon-button:hover{background:var(--surface-alt);border-color:var(--brand)}
/* Ícones de traço substituem os emoji de interface. */
.icon-button svg{width:20px;height:20px;display:block}
.icon-button:active{transform:scale(.96)}

/* ---------- conteúdo principal: o trilho ----------
   Mundo "Agenda Tributária": uma linha vertical contínua à esquerda,
   do primeiro marco ao fechamento. Toda seção pendura nela um nó. */
.content{
  position:relative;
  max-width:1120px;
  margin-inline:auto;
  padding:12px clamp(18px,4vw,56px) 0 calc(var(--railx) + var(--railgap));
}
.content::before{
  content:"";position:absolute;top:0;bottom:0;left:var(--railx);
  width:3px;border-radius:2px;background:var(--rail);
}

/* ---------- botões ---------- */
/* O atributo hidden só esconde via display:none no UA stylesheet, que
   qualquer display explícito sobrescreve. Sem esta regra, um botão com
   [hidden] continuaria visível. */
[hidden]{display:none !important}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:var(--radius-sm);
  padding:14px 24px;
  font-weight:var(--w-emphasis);
  font-size:1rem;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.button.primary{
  background:var(--btn-bg);
  color:var(--btn-ink);
  box-shadow:var(--shadow);
}
.button.primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 22px 60px rgba(3,22,83,.28);
}
.button.primary:active{transform:translateY(0)}
.button.secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--brand);
}
.button.secondary:hover{
  background:var(--surface-alt);
  transform:translateY(-2px);
}

/* ---------- footer ---------- */
.site-footer{
  text-align:center;
  padding:56px clamp(20px,5vw,56px);
  background:var(--surface);
  border-top:1px solid var(--border);
  display:grid;
  gap:14px;
  justify-items:center;
}
.site-footer strong{font-size:1.15rem;color:var(--text)}
.site-footer p{margin:0;max-width:560px;color:var(--muted)}
.site-footer .brand-cta{margin-top:8px}

/* ---------- responsivo ---------- */
@media (max-width:600px){
  /* Em telas estreitas, quebrar no meio da palavra é preferível a
     estourar a viewport. */
  h1,h2,h3,td,th{word-break:break-word}
  .button{padding:13px 18px;font-size:.95rem}
  .hero-actions .button{flex:1 1 auto}
  .site-footer{padding:44px clamp(16px,5vw,28px)}
}

/* Alternância do ícone de tema por CSS. O JS não escreve conteúdo no
   botão: fazê-lo destruiria o SVG e traria emoji de volta à interface. */
.icon-button .icon-moon{display:none}
:root[data-theme="dark"] .icon-button .icon-sun{display:none}
:root[data-theme="dark"] .icon-button .icon-moon{display:block}

/* ---------- skip link ----------
   Leva o teclado direto ao conteúdo, antes de qualquer navegação. */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:10000;
  background:var(--btn-bg);color:var(--btn-ink);
  padding:12px 18px;border-radius:var(--radius-sm);
  font-weight:var(--w-emphasis);
  transition:top .16s ease;
}
.skip-link:focus{top:12px}

/* Rótulo só para leitor de tela. */
.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;
}