/* ═══════════════════════════════════════════════════════════════
   ePoint v6 — sistema de design

   Princípio único: a resposta é o herói.
   Não existe abertura de marketing. O primeiro elemento visível de
   qualquer página é o dado que a pessoa veio buscar. Explicação,
   tabela e anúncio vêm depois disso, nunca antes.

   O bronze da marca é reservado para uma coisa só: o dado que importa.
   Todo o resto é neutro frio — é o contraste que faz o bronze parecer
   deliberado em vez de decorativo.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fontes ────────────────────────────────────────────────────
   IBM Plex: algarismos tabulares desenhados para dado financeiro,
   e o par sans/mono compartilha esqueleto — a tabela não parece
   colada de outro site. Baixe os WOFF2 em /assets/fontes/
   (instruções no LEIA-ME). Sem eles, o fallback do sistema assume. */

@font-face {
  font-family: 'Plex';
  src: url('/assets/fontes/plex-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+20A0-20BF, U+2190-21BB;
}
@font-face {
  font-family: 'Plex';
  src: url('/assets/fontes/plex-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'PlexMono';
  src: url('/assets/fontes/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20BF;
}

/* ── Tokens ────────────────────────────────────────────────────

   O tema é escolhido pela pessoa, não pelo sistema operacional.
   O padrão é claro: o site é de consulta rápida, muita tabela e muito
   número, e o claro lê melhor nesse uso. Quem quiser escuro escolhe no
   rodapé, e a escolha fica guardada.

   O escuro aqui é carvão quente e em camadas — papel, superfície e
   elevação têm valores diferentes. Fundo único e quase preto achata
   tudo e é o que faz uma interface escura parecer barata. */

:root {
  --tinta:        #33302E;
  --tinta-suave:  #6B6763;
  --tinta-fraca:  #94908B;
  --bronze:       #A07E41;   /* marca: acento, dado principal, bordas */
  --bronze-forte: #8A6B33;   /* bronze em texto pequeno, sobre fundo claro */
  --bronze-acao:  #8A6B33;   /* fundo de botão — 4,96:1 com branco, passa AA */
  --bronze-acao2: #6F5626;   /* estado hover */
  --bronze-fundo: #F3EADA;
  --sobre-bronze: #FFFFFF;   /* texto que fica em cima do bronze de ação */
  --papel:        #FAFAF9;
  --superficie:   #FFFFFF;
  --elevada:      #FFFFFF;
  --linha:        #E5E3E0;
  --linha-forte:  #CFCBC6;
  --sobe:         #0F7B6C;
  --desce:        #B3261E;
  --aviso-fundo:  #FDF6E3;
  --sombra:       0 1px 2px rgba(51,48,46,.05), 0 4px 14px rgba(51,48,46,.05);

  /* Barra lateral do painel: escura nos dois temas, de propósito.
     Antes ela usava --tinta, que inverte no escuro e deixava texto
     branco sobre fundo claro. */
  --painel-fundo:  #2B2825;
  --painel-tinta:  rgba(255,255,255,.74);
  --painel-forte:  #FFFFFF;
  --painel-linha:  rgba(255,255,255,.10);
  --painel-hover:  rgba(255,255,255,.07);

  --fonte:     'Plex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-num: 'PlexMono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  --t-nota:   0.8125rem;
  --t-peq:    0.9375rem;
  --t-base:   1.0625rem;
  --t-medio:  1.25rem;
  --t-titulo: 1.5rem;
  --t-secao:  1.875rem;
  --t-hero:   clamp(2.25rem, 9vw, 3.25rem);

  --e-1: .25rem; --e-2: .5rem;  --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem;   --e-7: 3rem;   --e-8: 4rem;

  --raio: 8px;
  --raio-g: 14px;
  --largura: 1140px;
  --leitura: 68ch;
  --toque: 48px;
}

/* Escuro: três níveis de superfície e bronze mais claro, com texto escuro
   em cima dele — bronze claro com texto branco não alcança contraste AA. */
:root[data-tema="escuro"] {
  --tinta: #ECE8E3; --tinta-suave: #A9A39B; --tinta-fraca: #7E7872;
  --bronze: #D5AE6B; --bronze-forte: #E6C489; --bronze-fundo: #332C21;
  --bronze-acao: #D5AE6B; --bronze-acao2: #E6C489; --sobre-bronze: #241F17;
  --papel: #201D1A; --superficie: #2A2622; --elevada: #332F2A;
  --linha: #3D3832; --linha-forte: #524B43;
  --sobe: #56C7B0; --desce: #F2918A; --aviso-fundo: #322A1B;
  --sombra: 0 1px 2px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.24);
  --painel-fundo: #17151300;
  --painel-fundo: #191715;
}

/* "Automático" só vale se a pessoa escolher explicitamente. */
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --tinta: #ECE8E3; --tinta-suave: #A9A39B; --tinta-fraca: #7E7872;
    --bronze: #D5AE6B; --bronze-forte: #E6C489; --bronze-fundo: #332C21;
    --bronze-acao: #D5AE6B; --bronze-acao2: #E6C489; --sobre-bronze: #241F17;
    --papel: #201D1A; --superficie: #2A2622; --elevada: #332F2A;
    --linha: #3D3832; --linha-forte: #524B43;
    --sobe: #56C7B0; --desce: #F2918A; --aviso-fundo: #322A1B;
    --sombra: 0 1px 2px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.24);
    --painel-fundo: #191715;
  }
}

/* ── Base ─────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e-3); line-height: 1.22; letter-spacing: -0.018em; font-weight: 600; }
h1 { font-size: var(--t-secao); }
h2 { font-size: var(--t-titulo); margin-top: var(--e-7); }
h3 { font-size: var(--t-medio); margin-top: var(--e-5); }
p  { margin: 0 0 var(--e-4); }
p, li { max-width: var(--leitura); }

a { color: var(--bronze-forte); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tinta); }

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

img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-6) 0; }

.numero { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Estrutura ────────────────────────────────────────────────── */

.envolucro { width: min(100% - 2rem, var(--largura)); margin-inline: auto; }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: var(--papel); padding: var(--e-3) var(--e-4); z-index: 100;
}
.pular:focus { left: var(--e-4); }

main { padding-bottom: var(--e-8); }

@media (min-width: 1024px) {
  .pagina { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-7); align-items: start; }
  .trilha-lateral { position: sticky; top: var(--e-5); }
}
.trilha-lateral { display: none; }
@media (min-width: 1024px) { .trilha-lateral { display: block; } }

/* ── Cabeçalho ───────────────────────────────────────────────── */

.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 40;
}
.topo__interno {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 60px;
}
.marca {
  font-size: var(--t-medio); font-weight: 600; letter-spacing: -0.03em;
  color: var(--tinta); text-decoration: none; flex-shrink: 0;
}
.marca b { color: var(--bronze); font-weight: 600; }

.topo__nav { display: none; margin-left: auto; gap: var(--e-5); }
.topo__nav a { color: var(--tinta-suave); text-decoration: none; font-size: var(--t-peq); }
.topo__nav a:hover, .topo__nav a[aria-current] { color: var(--bronze-forte); }
@media (min-width: 860px) { .topo__nav { display: flex; } }

.topo__busca { margin-left: auto; display: flex; }
@media (min-width: 860px) { .topo__busca { margin-left: var(--e-5); } }
.topo__busca input {
  width: 100%; max-width: 220px; min-height: 40px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
  padding: 0 var(--e-3); font: inherit; font-size: var(--t-peq);
}

/* ── Trilha de navegação ─────────────────────────────────────── */

.migalhas { font-size: var(--t-nota); color: var(--tinta-fraca); padding: var(--e-4) 0 0; }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; }
.migalhas li::after { content: '/'; margin-left: var(--e-2); color: var(--linha-forte); }
.migalhas li:last-child::after { content: none; }
.migalhas a { color: var(--tinta-fraca); text-decoration: none; }
.migalhas a:hover { color: var(--bronze-forte); text-decoration: underline; }

/* ── Home: a entrada ─────────────────────────────────────────── */

.entrada { padding: var(--e-7) 0 var(--e-6); }
.entrada h1 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  max-width: 16ch; margin-bottom: var(--e-2);
}
.entrada p { color: var(--tinta-suave); max-width: 46ch; margin-bottom: var(--e-5); }

.busca-grande { display: flex; gap: var(--e-2); max-width: 540px; }
.busca-grande input {
  flex: 1; min-height: 54px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta);
  padding: 0 var(--e-4); font: inherit;
}
.busca-grande input::placeholder { color: var(--tinta-fraca); }
.busca-grande button { min-height: 54px; padding-inline: var(--e-5); }

/* ── Grade de ferramentas ────────────────────────────────────── */

.secao-ferramentas + .secao-ferramentas { margin-top: var(--e-7); }
.secao-ferramentas h2 {
  font-size: var(--t-medio); margin: 0 0 var(--e-4);
  padding-bottom: var(--e-2); border-bottom: 1px solid var(--linha);
}

.grade-ferramentas {
  display: grid; gap: var(--e-3);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .grade-ferramentas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade-ferramentas { grid-template-columns: repeat(3, 1fr); } }

.cartao-ferramenta {
  display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  text-decoration: none; color: inherit;
  transition: border-color .12s ease;
}
.cartao-ferramenta:hover { border-color: var(--bronze); color: inherit; }
.cartao-ferramenta__nome { font-weight: 600; letter-spacing: -0.012em; }
.cartao-ferramenta__resumo { font-size: var(--t-peq); color: var(--tinta-suave); line-height: 1.45; }
.cartao-ferramenta--solo { max-width: 420px; margin-block: var(--e-4); }

/* ── Bloco de resposta: o herói ──────────────────────────────── */

.resposta {
  background: var(--bronze-fundo);
  border-left: 3px solid var(--bronze);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: var(--e-5);
  margin: var(--e-5) 0;
}
.resposta__contexto {
  font-size: var(--t-peq); color: var(--tinta-suave);
  margin: 0 0 var(--e-2);
}
.resposta__valor {
  font-size: var(--t-hero); font-weight: 600; line-height: 1.02;
  font-variant-numeric: tabular-nums; letter-spacing: -0.035em;
  color: var(--tinta); margin: 0;
}
.resposta__nota { font-size: var(--t-peq); color: var(--tinta-suave); margin: var(--e-3) 0 0; }

.variacao { display: inline-flex; align-items: center; gap: .3em; font-weight: 600; font-variant-numeric: tabular-nums; }
.variacao--sobe  { color: var(--sobe); }
.variacao--desce { color: var(--desce); }

.resposta--entrando { animation: revelar .28s ease-out; }
@keyframes revelar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Resumo em pares valor/rótulo, abaixo da resposta */
.destaques {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--e-5) 0;
  padding: var(--e-4) 0;
  border-block: 1px solid var(--linha);
}
.destaques div { min-width: 0; }
.destaques dt { font-size: var(--t-nota); color: var(--tinta-suave); margin-bottom: var(--e-1); }
.destaques dd {
  margin: 0; font-size: var(--t-medio); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* ── Formulários ─────────────────────────────────────────────── */

.formulario { max-width: 560px; }
.campo-grupo { margin-bottom: var(--e-5); }

.campo-rotulo {
  display: block; font-size: var(--t-peq); font-weight: 600;
  margin-bottom: var(--e-2);
}
.campo-ajuda { display: block; font-size: var(--t-nota); color: var(--tinta-suave); font-weight: 400; margin-top: 2px; }

.campo, select.campo, textarea.campo {
  width: 100%; min-height: var(--toque);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta);
  padding: var(--e-3); font: inherit;
}
.campo:focus { border-color: var(--bronze); }
.campo--moeda, .campo--numero { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
textarea.campo { min-height: 140px; resize: vertical; line-height: 1.55; }

.campo-com-prefixo { position: relative; }
.campo-com-prefixo .prefixo {
  position: absolute; left: var(--e-3); top: 50%; transform: translateY(-50%);
  color: var(--tinta-fraca); font-size: var(--t-peq); pointer-events: none;
}
.campo-com-prefixo .campo { padding-left: 2.6rem; }
.campo-com-sufixo .sufixo {
  position: absolute; right: var(--e-3); top: 50%; transform: translateY(-50%);
  color: var(--tinta-fraca); font-size: var(--t-peq); pointer-events: none;
}
.campo-com-sufixo { position: relative; }
.campo-com-sufixo .campo { padding-right: 3.2rem; }

.campo--erro { border-color: var(--desce); }
.erro-campo { display: block; color: var(--desce); font-size: var(--t-nota); margin-top: var(--e-2); }

.alerta {
  padding: var(--e-3) var(--e-4); border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--aviso-fundo);
  font-size: var(--t-peq); margin-bottom: var(--e-4);
}
.alerta--erro { border-color: var(--desce); background: color-mix(in srgb, var(--desce) 8%, var(--superficie)); }
.alerta--ok   { border-color: var(--sobe);  background: color-mix(in srgb, var(--sobe) 8%, var(--superficie)); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-5);
  background: var(--bronze-acao); color: var(--sobre-bronze);
  border: 1px solid var(--bronze-acao); border-radius: var(--raio);
  font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .12s ease;
}
.botao:hover { background: var(--bronze-acao2); border-color: var(--bronze-acao2); color: var(--sobre-bronze); }
.botao--secundario { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.botao--secundario:hover { background: var(--superficie); color: var(--tinta); border-color: var(--bronze); }
.botao--largo { width: 100%; }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

/* Barra fixa no celular enquanto o formulário está em foco */
@media (max-width: 719px) {
  .barra-envio {
    position: sticky; bottom: 0; z-index: 30;
    background: var(--papel); border-top: 1px solid var(--linha);
    padding: var(--e-3) 0; margin-top: var(--e-5);
  }
}

/* ── Etapas do resultado ─────────────────────────────────────── */

.etapas {
  display: flex; gap: var(--e-1); overflow-x: auto;
  border-bottom: 1px solid var(--linha); margin: var(--e-5) 0 var(--e-4);
  scrollbar-width: none;
}
.etapas::-webkit-scrollbar { display: none; }
.etapas a {
  padding: var(--e-3) var(--e-4); white-space: nowrap;
  color: var(--tinta-suave); text-decoration: none; font-size: var(--t-peq);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.etapas a[aria-current] { color: var(--tinta); border-bottom-color: var(--bronze); font-weight: 600; }

/* ── Tabelas ─────────────────────────────────────────────────── */
/* No desktop, só réguas horizontais: a coluna alinhada pelo mono já separa.
   No celular, cada linha vira cartão empilhado — CSS puro, sem JavaScript. */

.tabela-envolucro { overflow-x: auto; margin: var(--e-4) 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.tabela th {
  text-align: left; font-weight: 600; font-size: var(--t-nota);
  color: var(--tinta-suave); padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--linha-forte); white-space: nowrap;
}
.tabela td { padding: var(--e-3); border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num, .tabela th.num {
  font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.tabela tfoot td { font-weight: 600; border-top: 2px solid var(--linha-forte); border-bottom: 0; }
.tabela--compacta td, .tabela--compacta th { padding: var(--e-2) var(--e-3); }

@media (max-width: 719px) {
  .tabela--cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela--cartoes tr {
    display: block; padding: var(--e-3) 0; border-bottom: 1px solid var(--linha);
  }
  .tabela--cartoes td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--e-4); border: 0; padding: var(--e-1) 0; text-align: right;
  }
  .tabela--cartoes td::before {
    content: attr(data-rotulo); color: var(--tinta-suave);
    font-size: var(--t-nota); text-align: left; flex-shrink: 0;
  }
  .tabela--cartoes .num { text-align: right; }
}

.lista-verbas { list-style: none; padding: 0; margin: var(--e-4) 0; }
.lista-verbas li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); max-width: none;
}
.lista-verbas li:last-child { border-bottom: 0; }
.lista-verbas .num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-verbas--desconto .num { color: var(--desce); }
.lista-verbas__total {
  border-top: 2px solid var(--linha-forte) !important; font-weight: 600; font-size: var(--t-medio);
}

/* ── Gráficos ────────────────────────────────────────────────── */

.grafico { width: 100%; height: auto; display: block; margin: var(--e-4) 0; }
.grafico__grade  { stroke: var(--linha); stroke-width: 1; }
.grafico__eixo   { fill: var(--tinta-fraca); font-size: 11px; font-family: var(--fonte-num); }
.grafico__linha  { stroke: var(--bronze); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.grafico__area   { fill: var(--bronze); opacity: .08; }
.grafico__ponto  { fill: var(--bronze); stroke: var(--superficie); stroke-width: 2.5; }
.grafico__barra  { fill: var(--bronze); opacity: .55; }
.grafico__barra--destaque { opacity: 1; }

.rosca { display: block; margin: 0 auto; }
.rosca__fatia--0 { stroke: var(--bronze); }
.rosca__fatia--1 { stroke: var(--tinta-suave); }
.rosca__fatia--2 { stroke: var(--sobe); }
.rosca__fatia--3 { stroke: var(--linha-forte); }
.rosca__fatia--4 { stroke: var(--desce); }

.legenda { list-style: none; padding: 0; margin: var(--e-3) 0 0; font-size: var(--t-peq); }
.legenda li { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-1) 0; max-width: none; }
.legenda span { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Anúncios ────────────────────────────────────────────────── */

.anuncio {
  display: block; margin: var(--e-6) 0;
  text-align: center; overflow: hidden;
}
.anuncio__rotulo {
  display: block; font-size: 10px; letter-spacing: .06em;
  color: var(--tinta-fraca); margin-bottom: var(--e-2);
}
.anuncio--ancora {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 35;
  margin: 0; padding: var(--e-1) 0;
  background: var(--superficie); border-top: 1px solid var(--linha);
}
@media (min-width: 720px) { .anuncio--ancora { display: none; } }
body:has(.anuncio--ancora) { padding-bottom: 70px; }

/* ── Notícias do ePoint News ─────────────────────────────────── */

.noticias { margin-top: var(--e-7); }
.noticias__cabecalho {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  border-bottom: 1px solid var(--linha); padding-bottom: var(--e-2); margin-bottom: var(--e-4);
}
.noticias__cabecalho h2 { margin: 0; font-size: var(--t-medio); }
.noticias__cabecalho a { font-size: var(--t-peq); }

.noticia {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--e-3);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--linha);
  text-decoration: none; color: inherit;
}
.noticia:last-child { border-bottom: 0; }
.noticia img { width: 84px; height: 60px; object-fit: cover; border-radius: 4px; background: var(--linha); }
.noticia__titulo { font-size: var(--t-peq); font-weight: 600; line-height: 1.35; margin: 0 0 var(--e-1); }
.noticia__data { font-size: var(--t-nota); color: var(--tinta-fraca); }
.noticia:hover .noticia__titulo { color: var(--bronze-forte); }
.noticia--sem-imagem { grid-template-columns: 1fr; }

.trilha-lateral .noticia { grid-template-columns: 1fr; }
.trilha-lateral .noticia img { width: 100%; height: 120px; }

/* ── Conteúdo editorial ──────────────────────────────────────── */

.prosa { max-width: var(--leitura); }
.prosa h2 { font-size: var(--t-titulo); margin-top: var(--e-6); }
.prosa h3 { font-size: var(--t-medio); }
.prosa ul, .prosa ol { padding-left: var(--e-5); }
.prosa li { margin-bottom: var(--e-2); }
.prosa blockquote {
  margin: var(--e-5) 0; padding-left: var(--e-4);
  border-left: 3px solid var(--bronze); color: var(--tinta-suave);
}

.faq { margin-top: var(--e-6); }
.faq details {
  border-bottom: 1px solid var(--linha); padding: var(--e-3) 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  min-height: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--bronze); font-size: 1.3em; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details > *:not(summary) { margin-top: var(--e-3); color: var(--tinta-suave); }

.fonte-dado {
  font-size: var(--t-nota); color: var(--tinta-fraca);
  margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid var(--linha);
}

/* ── Rodapé ──────────────────────────────────────────────────── */

.rodape {
  border-top: 1px solid var(--linha);
  background: var(--superficie);
  padding: var(--e-6) 0 var(--e-7);
  margin-top: var(--e-8);
  font-size: var(--t-peq);
}
.rodape__colunas {
  display: grid; gap: var(--e-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--e-5);
}
@media (min-width: 620px) { .rodape__colunas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rodape__colunas { grid-template-columns: repeat(4, 1fr); } }
.rodape h3 { font-size: var(--t-nota); color: var(--tinta-suave); margin: 0 0 var(--e-3); font-weight: 600; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: var(--e-2); }
.rodape a { color: var(--tinta-suave); text-decoration: none; }
.rodape a:hover { color: var(--bronze-forte); text-decoration: underline; }
.rodape__base { color: var(--tinta-fraca); font-size: var(--t-nota); border-top: 1px solid var(--linha); padding-top: var(--e-4); }

/* ── Página de erro e estados vazios ─────────────────────────── */

.estado-vazio { padding: var(--e-8) 0; max-width: 44ch; }
.estado-vazio h1 { font-size: var(--t-secao); }
.estado-vazio p { color: var(--tinta-suave); }

/* ── Hotsites ────────────────────────────────────────────────── */

.hotsite { --bronze: var(--hs-cor, #A07E41); }
.hotsite__topo {
  background: var(--superficie); border-bottom: 1px solid var(--linha);
  padding: var(--e-4) 0;
}
.hotsite__topo .envolucro { display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap; }
.hotsite__marca { font-size: var(--t-medio); font-weight: 600; color: var(--tinta); text-decoration: none; }
.hotsite__nav { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-left: auto; }
.hotsite__nav a { color: var(--tinta-suave); text-decoration: none; font-size: var(--t-peq); }
.hotsite__nav a[aria-current] { color: var(--bronze); font-weight: 600; }
.hotsite__rodape {
  border-top: 1px solid var(--linha); margin-top: var(--e-8);
  padding: var(--e-5) 0; font-size: var(--t-nota); color: var(--tinta-fraca);
}
.aviso { padding: var(--e-4); background: var(--aviso-fundo); border-radius: var(--raio); }

/* ── Impressão ───────────────────────────────────────────────── */

@media print {
  .topo, .rodape, .anuncio, .etapas, .acoes, .trilha-lateral, .barra-envio { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .resposta { background: #f5f5f5; border-left: 3px solid #666; }
  .pagina { display: block; }
  a[href^="/"]::after { content: " (epoint.com.br" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* ── Dezenas de loteria ──────────────────────────────────────
   A bola sorteada é o dado principal da página: ela usa o bronze
   reservado, e não compete com mais nada em volta. */

.dezenas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 0; }
.dezena {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bronze-acao); color: var(--sobre-bronze);
  font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-peq); font-weight: 600;
}
.dezena--grande { width: 52px; height: 52px; font-size: var(--t-medio); }
@media (max-width: 480px) { .dezena--grande { width: 44px; height: 44px; font-size: var(--t-peq); } }
.dezenas--peq { margin: var(--e-2) 0; }
.dezenas--peq .dezena { width: 28px; height: 28px; font-size: var(--t-nota); }

/* ── Bloco de assinatura de alerta ───────────────────────────
   Fica sempre abaixo do dado. Nunca é a primeira coisa da página:
   pedir e-mail antes de entregar a resposta é o que faz a pessoa sair. */

.assinar {
  margin: var(--e-7) 0;
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--bronze);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.assinar h2 { margin: 0 0 var(--e-2); font-size: var(--t-medio); }
.assinar > p { color: var(--tinta-suave); font-size: var(--t-peq); margin-bottom: var(--e-4); }

.assinar__form { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.assinar__form .campo { flex: 1 1 220px; min-height: var(--toque); }
.assinar__form .botao { flex: 0 0 auto; }

.assinar__nota {
  font-size: var(--t-nota); color: var(--tinta-fraca);
  margin: var(--e-3) 0 0; max-width: none;
}

/* Etiqueta reaproveitada do painel, para o site */
.etiqueta {
  display: inline-block; padding: 1px 8px; border-radius: 20px;
  font-size: var(--t-nota); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--linha-forte); color: var(--tinta-suave);
}
.etiqueta--aviso { border-color: var(--bronze); color: var(--bronze-forte); }

/* ═══════════════════════════════════════════════════════════════
   Home — hierarquia

   O problema da versão anterior era ritmo: três grades de cartões
   idênticos, nada com peso, nada guiando o olho. Agora há três
   escalas diferentes — faixa de dados ao vivo, cartões principais
   grandes, e listas compactas por categoria.
   ═══════════════════════════════════════════════════════════════ */

.abertura {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  padding: var(--e-7) 0 var(--e-6);
  margin-bottom: var(--e-6);
}
.abertura h1 {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  max-width: 17ch; margin-bottom: var(--e-3);
  letter-spacing: -0.03em;
}
.abertura h1 em { font-style: normal; color: var(--bronze); }
.abertura__sub { color: var(--tinta-suave); max-width: 50ch; margin-bottom: var(--e-5); }

.atalhos {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-top: var(--e-4); font-size: var(--t-nota);
  color: var(--tinta-fraca); align-items: center;
}
.atalhos a {
  color: var(--tinta-suave); text-decoration: none;
  border: 1px solid var(--linha); border-radius: 20px;
  padding: 5px 12px; background: var(--papel);
}
.atalhos a:hover { border-color: var(--bronze); color: var(--bronze-forte); }

/* ── Faixa de dados ao vivo ──────────────────────────────────
   A coisa que mais tira a cara de "diretório de links" da home:
   número de verdade, atualizado, logo abaixo da busca. */

.agora {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  margin-bottom: var(--e-7);
}
.agora__item {
  background: var(--superficie);
  padding: var(--e-4);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 2px;
  transition: background .12s ease;
}
.agora__item:hover { background: var(--bronze-fundo); color: inherit; }
.agora__rotulo {
  font-size: var(--t-nota); color: var(--tinta-suave);
  display: flex; align-items: baseline; gap: var(--e-2);
}
.agora__valor {
  font-size: var(--t-medio); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
  color: var(--tinta);
}
.agora__nota { font-size: var(--t-nota); color: var(--tinta-fraca); }
.agora__dezenas { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.agora__dezenas span {
  background: var(--bronze-acao); color: var(--sobre-bronze);
  font-family: var(--fonte-num); font-size: 11px; font-weight: 600;
  border-radius: 3px; padding: 2px 5px;
}

/* ── Cartões principais ──────────────────────────────────────── */

.principais {
  display: grid; gap: var(--e-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--e-7);
}
@media (min-width: 700px)  { .principais { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .principais { grid-template-columns: repeat(3, 1fr); } }

.principal {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  text-decoration: none; color: inherit;
  transition: border-color .14s ease, transform .14s ease;
}
.principal:hover {
  border-color: var(--bronze); color: inherit;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .principal:hover { transform: none; } }
.principal__nome {
  font-size: var(--t-medio); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.25;
}
.principal__resumo { font-size: var(--t-peq); color: var(--tinta-suave); line-height: 1.5; }
.principal__acao {
  margin-top: auto; padding-top: var(--e-3);
  font-size: var(--t-nota); font-weight: 600; color: var(--bronze-forte);
}

/* ── Listas compactas por categoria ──────────────────────────── */

.blocos {
  display: grid; gap: var(--e-6);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .blocos { grid-template-columns: repeat(2, 1fr); } }

.bloco-lista h2 {
  font-size: var(--t-peq); font-weight: 600; margin: 0 0 var(--e-3);
  color: var(--tinta-suave); text-transform: none;
  padding-bottom: var(--e-2); border-bottom: 1px solid var(--linha);
}
.bloco-lista ul { list-style: none; margin: 0; padding: 0; }
.bloco-lista li { margin: 0; max-width: none; }
.bloco-lista a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--linha);
  text-decoration: none; color: var(--tinta); font-size: var(--t-peq);
  min-height: 44px;
}
.bloco-lista li:last-child a { border-bottom: 0; }
.bloco-lista a:hover { color: var(--bronze-forte); }
.bloco-lista a span { color: var(--tinta-fraca); font-size: var(--t-nota); text-align: right; }

/* ── Seletor de tema ─────────────────────────────────────────── */

.tema {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--linha); border-radius: 20px;
  background: var(--papel);
}
.tema button {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-nota); color: var(--tinta-suave);
  padding: 5px 12px; border-radius: 16px; min-height: 32px;
}
.tema button:hover { color: var(--tinta); }
.tema button[aria-pressed="true"] {
  background: var(--tinta); color: var(--papel); font-weight: 600;
}
.rodape__tema {
  display: flex; align-items: center; gap: var(--e-3);
  flex-wrap: wrap; margin-bottom: var(--e-4);
}
.rodape__tema span { font-size: var(--t-nota); color: var(--tinta-fraca); }