/* ==========================================================================
   FINN — site institucional
   Paleta e fontes espelhadas de C:/FINN/src/constants/theme.js (tema DARK).
   Nenhum valor aqui e reinterpretacao: os tokens sao os mesmos do app.
   ========================================================================== */

:root {
  /* --- Escala neutra (DARK) --- */
  --bg:        #080c0a;   /* fundo base */
  --bg2:       #0d120f;   /* cards */
  --bg3:       #111810;   /* superfícies elevadas */
  --white:     #FFFFFF;   /* token de foreground/texto */
  --gray1:     #8a8a8a;   /* texto secundário */
  --gray2:     #3a3a3a;   /* bordas/ícones inativos */
  --gray3:     #1e1e1e;   /* divisores */

  /* --- Cores de destaque (idênticas nos dois temas do app) --- */
  --green:     #2ECC8F;   /* primária da marca */
  --green-dim: rgba(46, 204, 143, 0.12);
  --red:       #FF4D4D;   /* gastos / saldo negativo */
  --yellow:    #F5A623;   /* avisos */
  --blue:      #5B8DEF;   /* correções de saldo */
  --purple:    #9B59B6;   /* plano pago / FINN Livre */

  /* --- Derivados só do site (bordas e vidros) --- */
  --border-green:  rgba(46, 204, 143, 0.25);  /* = INPUT_BORDER do app */
  --glass:         rgba(13, 18, 15, 0.72);

  /* --- Tipografia --- */
  --font-titulo: 'Cinzel', 'Times New Roman', serif;
  --font-corpo:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Espaçamento (SPACING do app, em px) --- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* --- Layout --- */
  --largura: 1120px;
  --raio:    16px;
  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   Reset enxuto
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-corpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--green); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   A marca — wordmark no colchete
   Porte do MarcaFinn do app. As proporções do colchete são relativas à ALTURA
   DE CAIXA-ALTA do Cinzel, não ao font-size:
     braço 0.50 · espessura 0.088 · recuo 0.33   (medidos em assets/icon.png)
   Métricas do Cinzel_700Bold (unitsPerEm 1000): caixa-alta 0.700em,
   ascender 0.976, descender 0.372, tinta de "FINN" 0.718em acima da baseline
   e 0.014em abaixo.
   Com line-height:1 a baseline cai a 0.802em do topo da caixa de linha, então
   a tinta ocupa de 0.084em a 0.816em. O recuo vale 0.33 * 0.700 = 0.231em, e o
   padding vertical desconta a sobra transparente: 0.231-0.084 e 0.231-0.184.
   Resultado: o colchete se ancora na tinta, não na caixa de linha — os recuos
   batem em qualquer tamanho.

   SÃO DOIS CANTOS, não quatro: superior-esquerdo e inferior-direito. É o que
   `MarcaFinn.js` desenha no app e o que está em assets/icon.png — a arte
   canônica. Uma versão anterior deste arquivo acrescentava o superior-direito e
   o inferior-esquerdo, que não existem em lugar nenhum do produto. O comentário
   do MarcaFinn.js conta que aquele componente nasceu justamente para acabar com
   desenhos divergentes da marca; se você veio aqui fechar o colchete nos quatro
   cantos, é o app que manda — mude lá primeiro.
   -------------------------------------------------------------------------- */
.marca {
  --cap:    0.700em;
  --recuo:  calc(var(--cap) * 0.33);   /* 0.231em */
  --esp:    calc(var(--cap) * 0.088);  /* 0.0616em */
  --braco:  calc(var(--cap) * 0.50);   /* 0.35em */

  position: relative;
  display: inline-block;
  padding: 0.147em var(--recuo) 0.047em;
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;      /* compensa o letter-spacing sobrando à direita */
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
}
.marca:hover { text-decoration: none; }

/* Os dois cantos do colchete — pseudo-elementos, sem markup extra */
.marca::before,
.marca::after {
  content: '';
  position: absolute;
  width: var(--braco);
  height: var(--braco);
  border: 0 solid var(--green);
  pointer-events: none;
}
.marca::before { /* superior esquerdo */
  top: 0; left: 0;
  border-top-width: var(--esp);
  border-left-width: var(--esp);
}
.marca::after { /* inferior direito */
  bottom: 0; right: 0;
  border-bottom-width: var(--esp);
  border-right-width: var(--esp);
}

/* --------------------------------------------------------------------------
   Utilitários de layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

.secao { padding-block: 96px; position: relative; }

.secao--linha { border-top: 1px solid var(--gray3); }

.secao__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-dim);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: var(--sp-md);
}

.secao__titulo {
  font-size: clamp(28px, 4.4vw, 42px);
  margin-bottom: var(--sp-md);
  max-width: 20ch;
}

.secao__sub {
  color: var(--gray1);
  font-size: 17px;
  max-width: 58ch;
}

.centro { text-align: center; }
.centro .secao__titulo,
.centro .secao__sub { margin-inline: auto; }

.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;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-corpo);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease,
              border-color 0.16s ease, box-shadow 0.16s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primario {
  background: var(--green);
  color: var(--bg);
  box-shadow: 0 8px 30px rgba(46, 204, 143, 0.18);
}
.btn--primario:hover { box-shadow: 0 12px 38px rgba(46, 204, 143, 0.28); }

.btn--secundario {
  background: transparent;
  color: var(--white);
  border-color: var(--gray2);
}
.btn--secundario:hover { border-color: var(--green); color: var(--green); }

/* Enquanto o link da Play Store não existe, o botão é um placeholder honesto:
   não navega e se anuncia como indisponível. Basta preencher PLAY_STORE_URL
   em js/main.js que ele vira link de verdade (ver data-play). */
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.92;
  transform: none;
}
.btn[aria-disabled='true']:hover { transform: none; }

.btn__icone { width: 18px; height: 18px; flex: none; }

.btn__texto { display: flex; flex-direction: column; align-items: flex-start; }
.btn__texto small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* O header só ganha fundo depois que a página rola — a linha de baixo tem que
   terminar sempre reta, como o HeaderGlobal do app. */
.header.is-rolado {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--gray3);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  width: 100%;
}

.header__marca { font-size: 20px; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}
.nav__link {
  color: var(--gray1);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.16s ease;
}
.nav__link:hover { color: var(--white); text-decoration: none; }

.nav__cta { margin-left: var(--sp-sm); padding: 10px 18px; font-size: 14px; }

.menu-btn {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gray2);
  border-radius: 12px;
  cursor: pointer;
  color: var(--white);
}

@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-md) var(--sp-lg) var(--sp-xl);
    background: var(--bg2);
    border-bottom: 1px solid var(--gray3);
    transform: translateY(-120%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
  }
  .nav.is-aberto { transform: translateY(0); visibility: visible; }
  .nav__link {
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--gray3);
  }
  .nav__cta { margin: var(--sp-md) 0 0; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 104px) clamp(64px, 10vw, 112px);
  overflow: hidden;
}

/* Brilho verde de fundo — o mesmo verde da marca, bem diluído */
.hero::before {
  content: '';
  position: absolute;
  top: -340px; left: 50%;
  width: 900px; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(46, 204, 143, 0.16), transparent 72%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray1);
  background: var(--bg2);
  border: 1px solid var(--gray3);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  margin-bottom: var(--sp-lg);
}
.hero__selo b { color: var(--white); font-weight: 600; }
.ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-dim);
  flex: none;
}

.hero__titulo {
  font-size: clamp(38px, 6.4vw, 66px);
  line-height: 1.08;
  margin-bottom: var(--sp-lg);
}
.hero__titulo em {
  font-style: normal;
  color: var(--green);
  display: block;
}

.hero__texto {
  color: var(--gray1);
  font-size: clamp(16px, 1.9vw, 18.5px);
  max-width: 46ch;
  margin-bottom: var(--sp-xl);
}
.hero__texto strong { color: var(--white); font-weight: 500; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  align-items: center;
}

.hero__nota {
  margin-top: var(--sp-lg);
  font-size: 13px;
  color: var(--gray1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__nota svg { width: 15px; height: 15px; color: var(--green); flex: none; }

.hero__telefone { justify-self: center; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__texto { margin-inline: auto; }
  .hero__acoes, .hero__nota { justify-content: center; }
  .hero__telefone { order: 2; margin-top: var(--sp-sm); }
}

/* --------------------------------------------------------------------------
   Moldura de celular
   -------------------------------------------------------------------------- */
.telefone {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  background: var(--bg2);
  border: 1px solid var(--gray2);
  border-radius: 40px;
  padding: 9px;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(46, 204, 143, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.telefone::after { /* recorte da câmera */
  content: '';
  position: absolute;
  top: 20px; left: 50%;
  width: 62px; height: 6px;
  transform: translateX(-50%);
  background: var(--bg);
  border-radius: 999px;
  z-index: 3;
}

.telefone__tela {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg);
  display: grid;
  place-items: center;
}

.telefone__tela img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Placeholder que fica no lugar do print até o PNG existir. O JS marca a tela
   como carregada assim que a imagem chega; se o arquivo faltar, o placeholder
   permanece — a página nunca mostra ícone de imagem quebrada. */
.telefone__vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: var(--sp-lg);
  text-align: center;
  background: linear-gradient(180deg, var(--bg3), var(--bg));
}
.telefone__vazio .marca { font-size: 15px; opacity: 0.5; }
.telefone__vazio span {
  font-size: 11.5px;
  color: var(--gray2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.telefone__tela.is-carregada .telefone__vazio { display: none; }

/* --------------------------------------------------------------------------
   Pilares (o que é o FINN)
   -------------------------------------------------------------------------- */
.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-top: 56px;
}

.card {
  background: var(--bg2);
  border: 1px solid var(--gray3);
  border-radius: var(--raio);
  padding: var(--sp-xl) var(--sp-lg);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--border-green); transform: translateY(-3px); }

.card__icone {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--green-dim);
  color: var(--green);
  margin-bottom: var(--sp-md);
}
.card__icone svg { width: 22px; height: 22px; }

/* Variantes semânticas — mesmas cores, mesmos significados do app */
.card__icone--amarelo  { background: rgba(245, 166, 35, 0.12); color: var(--yellow); }
.card__icone--roxo     { background: rgba(155, 89, 182, 0.12); color: var(--purple); }
.card__icone--azul     { background: rgba(91, 141, 239, 0.12); color: var(--blue); }
.card__icone--vermelho { background: rgba(255, 77, 77, 0.12);  color: var(--red); }

.card__titulo {
  font-family: var(--font-titulo);
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 10px;
}
.card__texto { color: var(--gray1); font-size: 15px; }

@media (max-width: 860px) { .pilares { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   A conta — "você tem hoje + ainda vai receber − ainda vai sair"
   -------------------------------------------------------------------------- */
.conta {
  margin-top: 56px;
  background: var(--bg2);
  border: 1px solid var(--gray3);
  border-radius: var(--raio);
  padding: var(--sp-xl);
  max-width: 620px;
}
.conta__titulo {
  font-family: var(--font-corpo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray1);
  margin-bottom: var(--sp-md);
}
.conta__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: 12px 0;
  border-bottom: 1px solid var(--gray3);
  font-size: 15px;
}
.conta__linha span { color: var(--gray1); }
.conta__linha b {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
}
.conta__linha--verde b    { color: var(--green); }
.conta__linha--vermelho b { color: var(--red); }
.conta__linha--total {
  margin-top: var(--sp-sm);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--gray2);
  border-bottom: 0;
}
.conta__linha--total span { color: var(--white); font-weight: 500; }
.conta__linha--total b { font-size: 26px; color: var(--green); }

.conta__nota {
  margin-top: var(--sp-md);
  font-size: 13px;
  color: var(--gray2);
}

/* --------------------------------------------------------------------------
   Galeria de telas
   -------------------------------------------------------------------------- */
.galeria { margin-top: 48px; }

.abas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: 48px;
}

.aba {
  font-family: var(--font-corpo);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray1);
  background: transparent;
  border: 1px solid var(--gray2);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.aba:hover { color: var(--white); border-color: var(--gray1); }
.aba[aria-selected='true'] {
  color: var(--green);
  background: var(--green-dim);
  border-color: var(--border-green);
}

.painel {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.painel[hidden] { display: none; }

.painel__texto h3 {
  font-size: clamp(24px, 3.4vw, 32px);
  margin-bottom: var(--sp-md);
}
.painel__texto p { color: var(--gray1); font-size: 16.5px; max-width: 52ch; }

.painel__lista {
  list-style: none;
  margin: var(--sp-lg) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.painel__lista li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--gray1);
}
.painel__lista li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

@media (max-width: 860px) {
  .painel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .painel__texto p { margin-inline: auto; }
  .painel__lista li { text-align: left; }
}

/* --------------------------------------------------------------------------
   Confiança / privacidade
   -------------------------------------------------------------------------- */
.confianca {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
  margin-top: 56px;
}
@media (max-width: 760px) { .confianca { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  background: var(--bg2);
  border: 1px solid var(--gray3);
  border-radius: 28px;
  padding: clamp(40px, 7vw, 72px) var(--sp-lg);
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: auto 0 -60% 0;
  height: 320px;
  background: radial-gradient(closest-side, rgba(46, 204, 143, 0.14), transparent 70%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta__titulo { font-size: clamp(28px, 4.6vw, 44px); margin-bottom: var(--sp-md); }
.cta__sub {
  color: var(--gray1);
  max-width: 46ch;
  margin: 0 auto var(--sp-xl);
}
.cta__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: center; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--gray3);
  margin-top: 96px;
  padding-block: 56px 40px;
  color: var(--gray1);
  font-size: 14px;
}

.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xl);
  justify-content: space-between;
  padding-bottom: var(--sp-xl);
}

.rodape__marca { font-size: 22px; margin-bottom: var(--sp-md); }
.rodape__tagline { max-width: 34ch; font-size: 14px; }

.rodape__cols {
  display: flex;
  gap: clamp(32px, 8vw, 88px);
  flex-wrap: wrap;
}
.rodape__col h4 {
  font-family: var(--font-corpo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--sp-md);
}
.rodape__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape__col a { color: var(--gray1); text-decoration: none; }
.rodape__col a:hover { color: var(--green); }

.rodape__base {
  border-top: 1px solid var(--gray3);
  padding-top: var(--sp-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gray2);
}
.rodape__base a { color: var(--gray1); }

/* --------------------------------------------------------------------------
   Documento legal (política de privacidade)
   -------------------------------------------------------------------------- */
.doc { padding-block: 56px 40px; }

.doc__voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gray1);
  text-decoration: none;
  margin-bottom: var(--sp-xl);
}
.doc__voltar:hover { color: var(--green); text-decoration: none; }

.doc__titulo { font-size: clamp(32px, 5.2vw, 48px); margin-bottom: var(--sp-md); }

.doc__resumo {
  color: var(--gray1);
  font-size: 17px;
  max-width: 62ch;
  margin-bottom: var(--sp-xl);
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-xl);
  color: var(--gray1);
  font-size: 14px;
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--gray3);
}
.doc__meta b { color: var(--white); font-weight: 500; }

.doc__layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
  margin-top: var(--sp-xl);
}

.sumario {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--bg2);
  border: 1px solid var(--gray3);
  border-radius: var(--raio);
  padding: var(--sp-lg);
}
.sumario h2 {
  font-family: var(--font-corpo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray1);
  margin-bottom: var(--sp-md);
}
.sumario ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: s; }
.sumario a {
  color: var(--gray1);
  font-size: 13.5px;
  text-decoration: none;
  display: block;
  line-height: 1.45;
}
.sumario a::before {
  counter-increment: s;
  content: counter(s) '. ';
  color: var(--gray2);
}
.sumario a:hover { color: var(--white); }
.sumario a.is-ativo { color: var(--green); }
.sumario a.is-ativo::before { color: var(--green); }

@media (max-width: 900px) {
  .doc__layout { grid-template-columns: 1fr; }
  .sumario { position: static; }
}

.doc__corpo { max-width: 72ch; counter-reset: sec; }

.doc__corpo section { padding-block: var(--sp-lg) var(--sp-xl); }
.doc__corpo section + section { border-top: 1px solid var(--gray3); }

.doc__corpo h2 {
  font-family: var(--font-titulo);
  font-size: clamp(22px, 3vw, 27px);
  margin-bottom: var(--sp-md);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.doc__corpo h2::before {
  counter-increment: sec;
  content: counter(sec) '.';
  color: var(--green);
  margin-right: 10px;
}

.doc__corpo h3 {
  font-family: var(--font-corpo);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin: var(--sp-lg) 0 var(--sp-sm);
}

.doc__corpo p,
.doc__corpo li { color: var(--gray1); font-size: 16px; }
.doc__corpo p + p { margin-top: var(--sp-md); }
.doc__corpo strong { color: var(--white); font-weight: 500; }

.doc__corpo ul { margin: var(--sp-md) 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.doc__corpo ul li { display: flex; gap: 12px; align-items: flex-start; }
.doc__corpo ul li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

/* Tabela de dados coletados */
.tabela-wrap {
  overflow-x: auto;
  margin-top: var(--sp-lg);
  border: 1px solid var(--gray3);
  border-radius: var(--raio);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 620px;
}
thead th {
  text-align: left;
  font-family: var(--font-corpo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray1);
  background: var(--bg3);
  padding: 14px var(--sp-md);
  border-bottom: 1px solid var(--gray3);
}
tbody td {
  padding: 14px var(--sp-md);
  border-bottom: 1px solid var(--gray3);
  color: var(--gray1);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--white); font-weight: 500; }

/* Blocos de destaque */
.aviso {
  display: flex;
  gap: var(--sp-md);
  background: var(--bg2);
  border: 1px solid var(--gray3);
  border-left: 3px solid var(--green);
  border-radius: 12px;
  padding: var(--sp-lg);
  margin-top: var(--sp-lg);
}
.aviso--amarelo { border-left-color: var(--yellow); }
.aviso--roxo    { border-left-color: var(--purple); }
.aviso p { font-size: 15px; margin: 0; }
.aviso svg { width: 20px; height: 20px; flex: none; color: var(--green); margin-top: 3px; }
.aviso--amarelo svg { color: var(--yellow); }
.aviso--roxo svg { color: var(--purple); }

/* --------------------------------------------------------------------------
   Revelação no scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}