/* ==========================================================================
   estilo.css — sistema visual do theoholanda.com · identidade "Moeda em alta"

   Toda página do site usa com:
     <link rel="stylesheet" href="/estilo.css">

   Direção: clean e premium, entre um private bank e uma fintech jovem.
   Marinho dominante (cabeçalho, abertura, rodapé), marfim no conteúdo,
   areia nos cartões e seções secundárias, e o dourado só como acento
   (linhas finas, um destaque por seção, estados de hover). Cantos de 16 px
   nos painéis e 10 px nos botões; sem gradiente, sem sombra pesada.

   Tipografia (arquivos guardados no próprio site, em /assets/fonts/ —
   nada é buscado de fora; licença livre OFL):
     Instrument Serif  títulos e o nome no logo (o itálico destaca uma palavra)
     Manrope           texto, menus, botões, formulários, números e rótulos
     mono do aparelho  só em fórmulas

   Partes deste arquivo:
     1. Fontes e variáveis (cores, medidas) + modo escuro automático
     2. Base (texto, links, foco, seleção)
     3. Logo e cabeçalho do site (.site-marca, .site-topo)
     4. Cabeçalho de página (.site-cabecalho: trilha, título, introdução, ficha)
     5. Faixas, seções e textos (.site-faixa, .site-secao, .site-lede, .site-fonte)
     6. Página inicial (.site-abertura, .site-indicadores, .site-figura)
     7. Índice de ferramentas (.site-indice) e princípios (.site-principios)
     8. Botões, tabela e peças pequenas
     9. Rodapé do site (.site-rodape)
    10. Compatibilidade com o visual antigo
    11. Impressão e acessibilidade

   Classes começam com "site-" e variáveis com "--site-", pra não colidir
   com o CSS próprio de cada funcionalidade.
   ========================================================================== */

/* ---------- 1. Fontes e variáveis ---------- */
@font-face{
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Variavel.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root{
  /* Paleta da marca (fixa) */
  --site-marinho: #0f1f3a;
  --site-marinho-profundo: #0a1529;
  --site-dourado: #c9a45c;          /* acento sobre fundo escuro */
  --site-dourado-escuro: #9a7a3a;   /* acento sobre fundo claro: só detalhe e texto grande */
  --site-marfim: #f4efe4;
  --site-areia: #e9e5dc;

  /* Fontes */
  --site-serif: "Instrument Serif", "Iowan Old Style", "Sitka Heading", Georgia, serif;
  --site-fonte: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --site-serif-texto: var(--site-fonte);   /* textos de leitura também em Manrope */
  --site-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;

  /* Papéis (as páginas usam estes nomes) */
  --site-fundo: var(--site-marfim);
  --site-cartao: var(--site-areia);
  --site-borda: #d6cfbf;
  --site-borda-forte: #b3aa97;
  --site-grade: #d9d3c6;            /* linhas de grade dos gráficos */
  --site-tinta: var(--site-marinho);
  --site-texto: var(--site-marinho);
  --site-texto-suave: #4a5468;
  --site-texto-fraco: #5a6274;
  --site-primaria: var(--site-marinho);    /* links, foco, seleção, números de destaque */
  --site-primaria-escura: var(--site-marinho-profundo);
  --site-acento: var(--site-dourado-escuro);
  --site-separador: rgba(201, 164, 92, 0.55);   /* linha fina dourada */
  --site-destaque: #dcd4c2;         /* fundo de item selecionado */

  /* Significado (sempre acompanhado de texto, nunca só a cor) */
  --site-positivo: #1e6b45;
  --site-negativo: #a8322a;
  --site-alerta: #865a0c;
  --site-alerta-fundo: #f3e6c8;

  /* Séries de dados: paleta categórica validada (daltonismo incluído).
     Ordem fixa — a cor segue a série. O dourado nunca entra nos dados. */
  --site-serie-1: #2a78d6; --site-serie-2: #eb6834; --site-serie-3: #1baf7a; --site-serie-4: #eda100;
  --site-serie-5: #e87ba4; --site-serie-6: #008300; --site-serie-7: #4a3aa7; --site-serie-8: #e34948;

  /* Áreas marinho (cabeçalho, abertura, rodapé) */
  --site-sobre-marinho: var(--site-marfim);
  --site-sobre-marinho-suave: rgba(244, 239, 228, 0.74);
  --site-linha-marinho: rgba(244, 239, 228, 0.14);

  /* Medidas */
  --site-largura: 1160px;
  --site-margem: 24px;
  --site-raio: 16px;                /* cartões e painéis */
  /* Tipografia padrão das páginas (19/10/2026): título da página, frase de abertura,
     título e subtítulo de cada quadro. Página nenhuma muda esses tamanhos no CSS próprio. */
  --site-h1: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem);   /* Instrument Serif, 1 palavra em itálico */
  --site-lede-tam: clamp(1.05rem, 1rem + 0.25vw, 1.15rem); /* Manrope 400 */
  --site-painel-titulo: 1.125rem;   /* h2 dos quadros, Manrope 600 */
  --site-painel-sub: 0.875rem;      /* frase embaixo do h2, Manrope 400, texto suave */
  --site-raio-p: 10px;              /* botões e campos */
  --site-sombra: none;
  --site-sombra-forte: none;
  --site-sombra-flutuante: 0 12px 32px rgba(10, 21, 41, 0.16), 0 1px 3px rgba(10, 21, 41, 0.10); /* só dicas flutuantes */

  /* Legado — páginas que ainda usam a faixa escura antiga */
  --site-topo-fundo: var(--site-marinho);
  --site-hero-de: var(--site-marinho);
  --site-hero-ate: var(--site-marinho);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --site-fundo: var(--site-marinho-profundo);
    --site-cartao: var(--site-marinho);
    --site-borda: #23314c;
    --site-borda-forte: #3a4a68;
    --site-grade: #1c2a44;
    --site-tinta: var(--site-marfim);
    --site-texto: var(--site-marfim);
    --site-texto-suave: #b4bac6;
    --site-texto-fraco: #949cac;
    --site-primaria: var(--site-dourado);
    --site-primaria-escura: #e2cb97;
    --site-acento: var(--site-dourado);
    --site-separador: rgba(201, 164, 92, 0.45);
    --site-destaque: #1b2d4d;
    --site-positivo: #5cbf8a;
    --site-negativo: #ee8074;
    --site-alerta: #e0b25a;
    --site-alerta-fundo: #2b2413;
    --site-serie-1: #3987e5; --site-serie-2: #d95926; --site-serie-3: #199e70; --site-serie-4: #c98500;
    --site-serie-5: #d55181; --site-serie-6: #008300; --site-serie-7: #9085e9; --site-serie-8: #e66767;
    --site-sombra-flutuante: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

@media (max-width: 640px){
  :root{ --site-margem: 16px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body{ margin: 0; padding: 0; }
body{
  background: var(--site-fundo);
  color: var(--site-texto);
  font-family: var(--site-fonte);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Títulos grandes em Instrument Serif (só tem peso normal: nada de negrito) */
h1{ font-family: var(--site-serif); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
h1 em, h2 em{ font-style: italic; }
/* Títulos pequenos (dentro de painéis) em Manrope */
h2{ font-family: var(--site-fonte); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
p, li{ text-wrap: pretty; }
a{ color: var(--site-primaria); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover{ text-decoration-color: var(--site-acento); text-decoration-thickness: 2px; }
::selection{ background: var(--site-destaque); color: var(--site-texto); }
:focus-visible{ outline: 2px solid var(--site-primaria); outline-offset: 2px; }

/* Link "pular para o conteúdo" (aparece só com o teclado) */
.site-pular{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--site-dourado); color: var(--site-marinho);
  padding: 10px 16px; font-weight: 600; font-size: 0.9rem; text-decoration: none;
  border-radius: var(--site-raio-p);
}
.site-pular:focus{ left: 12px; top: 12px; }

/* Números alinhados em coluna (tabelas, eixos) */
.site-num{ font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 3. Logo e cabeçalho do site ---------- */
/*  <a class="site-marca" href="/">
      <img src="/assets/brand/simbolo-claro.svg" alt="" width="40" height="40">
      <span class="site-marca-nome">Theo <em>Holanda</em></span>
    </a>
    Proporções do brief: espaço ≈ 0,3× a altura do símbolo; texto ≈ 0,8×. */
.site-marca{
  --logo: 36px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo) * 0.3);
  color: var(--site-sobre-marinho);
  text-decoration: none;
  white-space: nowrap;
}
.site-marca img{ width: var(--logo); height: var(--logo); display: block; flex: none; }
.site-marca-nome{
  font-family: var(--site-serif);
  font-size: calc(var(--logo) * 0.8);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
}
.site-marca-nome em{ font-style: italic; }
.site-marca:hover{ color: var(--site-sobre-marinho); text-decoration: none; }

.site-topo{
  background: var(--site-marinho);
  color: var(--site-sobre-marinho);
  border-bottom: 1px solid var(--site-linha-marinho);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-topo-conteudo{
  max-width: var(--site-largura);
  margin: 0 auto;
  padding: 0 var(--site-margem);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-topo :focus-visible, .site-cabecalho :focus-visible, .site-rodape :focus-visible, .site-faixa-marinho :focus-visible{
  outline-color: var(--site-dourado);
}
.site-nav{
  display: flex;
  align-self: stretch;
  gap: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar{ display: none; }
.site-nav a{
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--site-sobre-marinho-suave);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;             /* o sublinhado encosta na linha do cabeçalho */
  padding-top: 2px;
}
.site-nav{ margin-left: auto; }
.site-nav a:hover{ color: var(--site-sobre-marinho); }

/* Menus suspensos de Calculadoras e Mercado (montados pelo /tema.js).
   Abrem ao passar o mouse ou ao chegar com o teclado (Tab); no celular
   ficam escondidos e o link leva direto pra lista. */
.site-nav-item{ position: relative; display: flex; }
.site-menu{ display: none; }
@media (hover: hover) and (min-width: 641px){
  .site-nav{ overflow: visible; }
  .site-menu{
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    padding: 8px;
    background: var(--site-fundo);
    color: var(--site-texto);
    border: 1px solid var(--site-borda);
    border-radius: var(--site-raio);
    box-shadow: var(--site-sombra-flutuante);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
  }
  .site-nav-item:hover .site-menu, .site-nav-item:focus-within .site-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav-item.site-menu-fechado .site-menu{ opacity: 0; visibility: hidden; }
}
.site-nav .site-menu a{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 10px;
  margin: 0;
  border: 0;
  border-radius: var(--site-raio-p);
  color: var(--site-texto);
  white-space: normal;
  text-decoration: none;
}
.site-nav .site-menu a:hover, .site-nav .site-menu a:focus-visible{ background: var(--site-cartao); color: var(--site-texto); }
.site-nav .site-menu a[aria-current="page"]{ background: var(--site-cartao); }
.site-menu-icone{
  --icone-acento: var(--site-dourado);
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--site-marinho);
  color: var(--site-marfim);
  display: grid; place-items: center;
}
.site-menu-icone svg{ width: 30px; height: 30px; display: block; }
@media (prefers-color-scheme: dark){
  .site-menu-icone{ box-shadow: inset 0 0 0 1px var(--site-borda-forte); }
  .site-menu{ background: #13264a; border-color: var(--site-borda-forte); }
  .site-nav .site-menu a:hover, .site-nav .site-menu a:focus-visible, .site-nav .site-menu a[aria-current="page"]{ background: #1b3160; }
}
.site-menu-texto{ display: grid; gap: 1px; line-height: 1.3; }
.site-menu-texto b{ font-weight: 600; font-size: 0.92rem; }
.site-menu-texto small{ font-size: 0.78rem; color: var(--site-texto-suave); }
.site-nav .site-menu a.site-menu-todas{
  display: block;
  margin-top: 4px;
  padding: 10px 10px 6px;
  border-top: 1px solid var(--site-borda);
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--site-texto-suave);
}
.site-nav .site-menu a.site-menu-todas:hover{ background: transparent; color: var(--site-texto); text-decoration: underline; text-decoration-color: var(--site-acento); }

/* Botão claro / escuro (criado pelo /tema.js no fim do cabeçalho) */
.site-tema{
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--site-raio-p);
  border: 1px solid var(--site-linha-marinho);
  background: transparent;
  color: var(--site-sobre-marinho);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.site-tema:hover{ border-color: var(--site-dourado); color: var(--site-dourado); }
.site-tema svg{ width: 20px; height: 20px; display: block; }
.site-nav a[aria-current="page"]{ color: var(--site-sobre-marinho); border-bottom-color: var(--site-dourado); }

@media (max-width: 640px){
  /* No celular: logo numa linha, menu na linha de baixo (nada fica escondido) */
  .site-topo{ position: static; }
  .site-topo-conteudo{ flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 14px; }
  .site-marca{ --logo: 32px; }
  .site-nav{ width: 100%; height: 48px; gap: 26px; margin-top: 6px; margin-left: 0; order: 2; }
  .site-tema{ order: 1; margin-left: auto; width: 40px; height: 40px; }
}
@media (max-width: 430px){
  /* Celular estreito: as 4 seções cabem na largura (antes "Mercado" ficava
     escondido numa rolagem lateral invisível) */
  .site-nav{ gap: 8px; justify-content: space-between; }
  .site-nav a{ font-size: 0.84rem; }
}
@media (max-width: 380px){
  .site-nav a{ font-size: 0.78rem; }
}
@media (max-width: 340px){
  .site-nav{ gap: 4px; }
  .site-nav a{ font-size: 0.72rem; }
}

/* ---------- 4. Cabeçalho de página (faixa marinho) ---------- */
/*  <header class="site-cabecalho" id="site-conteudo">
      <div class="site-cabecalho-conteudo">
        <p class="site-migalha"><a href="/">Início</a><span aria-hidden="true">/</span><span>Nome</span></p>
        <h1>Título da <em>página</em></h1>
        <p class="site-lede">Uma ou duas frases dizendo o que a página faz.</p>
        <dl class="site-ficha"><div><dt>Fonte</dt><dd>…</dd></div>…</dl>
      </div>
    </header>                                                              */
.site-cabecalho{
  background: var(--site-marinho);
  color: var(--site-sobre-marinho);
}
.site-cabecalho-conteudo{
  max-width: var(--site-largura);
  margin: 0 auto;
  padding: 48px var(--site-margem) 0;
}
.site-cabecalho-conteudo > :last-child{ margin-bottom: 0; }
.site-cabecalho h1{
  color: var(--site-sobre-marinho);
  font-size: var(--site-h1);
  line-height: 1.06;
  margin: 0 0 14px;
  max-width: 36ch;
}
.site-cabecalho h1 em, .site-faixa-marinho h1 em{ color: var(--site-dourado); }
.site-cabecalho .site-lede{ color: var(--site-sobre-marinho-suave); font-size: var(--site-lede-tam); max-width: 60ch; margin-bottom: 28px; }
.site-cabecalho > .site-cabecalho-conteudo > h1:last-child{ margin-bottom: 48px; }
/* Cabeçalho que termina na frase (sem ficha): linha dourada fina embaixo e
   respiro até o fim da faixa — mesmo ritmo do cabeçalho com ficha */
.site-cabecalho > .site-cabecalho-conteudo > .site-lede:last-child{ margin-bottom: 32px; }
.site-cabecalho-conteudo:has(> .site-lede:last-child)::after{
  content: "";
  display: block;
  border-top: 1px solid var(--site-separador);
  height: 56px;
}
.site-cabecalho a{ color: var(--site-sobre-marinho); }
.site-cabecalho a:hover{ text-decoration-color: var(--site-dourado); }

.site-migalha{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  margin: 0 0 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-texto-fraco);
}
.site-migalha a{ color: var(--site-texto-suave); text-decoration: none; }
.site-migalha a:hover{ text-decoration: underline; }
.site-migalha span[aria-hidden]{ color: var(--site-acento); }
.site-cabecalho .site-migalha{ color: var(--site-sobre-marinho-suave); }
.site-cabecalho .site-migalha a{ color: var(--site-sobre-marinho-suave); }
.site-cabecalho .site-migalha a:hover{ color: var(--site-sobre-marinho); }
.site-cabecalho .site-migalha span[aria-hidden]{ color: var(--site-dourado); }

/* Ficha técnica da página: fonte, atualização, método */
.site-ficha{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 0;
  padding: 16px 0 18px;
  border-top: 1px solid var(--site-separador);
  font-size: 0.86rem;
}
.site-ficha > div{ display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.site-ficha dt{
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-acento);
  white-space: nowrap;
}
.site-ficha dd{ margin: 0; color: var(--site-texto); }
.site-ficha a{ color: inherit; }
.site-cabecalho .site-ficha dt{ color: var(--site-dourado); }
/* Ficha padrão do cabeçalho: SEMPRE 3 itens numa linha só — Fonte · Atualização (mercado) ou
   Premissas (calculadora) · Método. Rótulo em cima, texto embaixo, cada item na sua coluna.
   (Banco Data e Carteira FIDC têm ficha própria — class="site-ficha site-ficha-livre" — e ficam no formato antigo.) */
@media (min-width: 720px){
  .site-cabecalho .site-ficha:not(.site-ficha-livre):not(:has(> div:nth-child(4))){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
}
.site-cabecalho .site-ficha:not(.site-ficha-livre):not(:has(> div:nth-child(4))) > div{ flex-direction: column; gap: 3px; }
.site-cabecalho .site-ficha dd{ color: var(--site-sobre-marinho); }

/* Espaço entre o cabeçalho de página e o conteúdo */
.site-cabecalho + main, .site-cabecalho + div, .site-cabecalho + section{ margin-top: 40px; }

/* ---------- 5. Faixas, seções e textos ---------- */
/* Faixas de largura total, pra alternar marinho / marfim / areia */
.site-faixa{ padding: 0 0 72px; }
.site-faixa-marinho{ background: var(--site-marinho); color: var(--site-sobre-marinho); }
.site-faixa-areia{ background: var(--site-areia); margin-top: 80px; }
@media (prefers-color-scheme: dark){ .site-faixa-areia{ background: var(--site-marinho); } }

.site-secao{
  max-width: var(--site-largura);
  margin: 0 auto;
  padding: 72px var(--site-margem) 0;
}
/* Linha fina dourada em cima do título da seção */
.site-secao-cabeca{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  border-top: 1px solid var(--site-separador);
  padding-top: 16px;
  margin-bottom: 28px;
}
.site-secao-cabeca h2{
  font-family: var(--site-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}
.site-secao-cabeca h2 em{ color: var(--site-acento); }
.site-secao-cabeca p{ margin: 0; font-size: 0.9rem; color: var(--site-texto-suave); max-width: 60ch; }

.site-sobretitulo{
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-acento);
  margin: 0 0 20px;
}
.site-faixa-marinho .site-sobretitulo{ color: var(--site-dourado); }
.site-lede{
  font-family: var(--site-fonte);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--site-texto-suave);
  max-width: 62ch;
  margin: 0;
}
.site-faixa-marinho .site-lede{ color: var(--site-sobre-marinho-suave); }
.site-nota{ font-size: 0.86rem; color: var(--site-texto-suave); }
/* Linha de fonte embaixo de número/gráfico: "Fonte: ANBIMA · 25/09/2026" */
.site-fonte{
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--site-texto-fraco);
  margin: 0;
}
.site-fonte a{ color: inherit; }

/* ---------- 6. Página inicial ---------- */
.site-abertura{
  position: relative;
  max-width: var(--site-largura);
  margin: 0 auto;
  padding: 80px var(--site-margem) 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: end;
}
@media (max-width: 920px){
  .site-abertura{ grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 52px; }
}
.site-abertura h1{
  color: var(--site-sobre-marinho);
  font-size: clamp(2.8rem, 1.6rem + 4.4vw, 4.8rem);
  line-height: 1;
  margin: 0 0 24px;
  max-width: 16ch;
}
.site-abertura .site-lede{ font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem); }
.site-acoes{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 34px 0 0; }
.site-abertura > *{ position: relative; z-index: 1; }

/* Curva fina dourada ao fundo da abertura (eco do símbolo da marca) */
.site-curva{
  position: absolute; z-index: 0; pointer-events: none;
  right: 0; top: 0; width: min(100%, 980px); height: 100%;
  opacity: 0.5;
}
.site-curva path{ fill: none; stroke: var(--site-dourado); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
@media (max-width: 920px){ .site-curva{ display: none; } }

/* Indicadores do dia: grade com linhas finas entre as casas */
.site-indicadores{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--site-borda);
  border: 1px solid var(--site-borda);
  border-radius: var(--site-raio);
  overflow: hidden;
  margin: 0;
}
@media (max-width: 1000px){ .site-indicadores{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px){ .site-indicadores{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-indicador{
  background: var(--site-cartao);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.site-indicador dt{ font-size: 0.8rem; line-height: 1.3; min-height: 2.6em; color: var(--site-texto-suave); font-weight: 500; }
.site-indicador dd{ margin: 0; }
.site-indicador .site-valor{
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--site-texto);
  font-variant-numeric: lining-nums;
}
.site-indicador .site-valor small{
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--site-texto-suave);
  margin-left: 3px;
}
.site-indicador .site-fonte{ margin-top: auto; padding-top: 4px; font-size: 0.7rem; }
.site-indicador .site-fonte span{ display: block; }
.site-indicadores-nota{ margin: 14px 0 0; }

/* Figura (gráfico) com título, subtítulo, legenda e fonte */
.site-figura{
  margin: 0;
  background: var(--site-cartao);
  color: var(--site-texto);
  border: 1px solid var(--site-borda);
  border-radius: var(--site-raio);
  padding: 20px 20px 16px;
  min-width: 0;
}
.site-faixa-marinho .site-figura{ background: var(--site-marfim); border-color: transparent; color: var(--site-marinho); }
@media (prefers-color-scheme: dark){
  .site-faixa-marinho .site-figura{ background: var(--site-marinho-profundo); border-color: var(--site-linha-marinho); color: var(--site-marfim); }
}
.site-figura-titulo{ display: block; font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.site-figura-sub{ display: block; font-size: 0.8rem; color: var(--site-texto-suave); margin-top: 2px; }
.site-legenda{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 2px; font-size: 0.8rem; color: var(--site-texto-suave); }
.site-legenda span{ display: inline-flex; align-items: center; gap: 6px; }
.site-legenda i{ display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.site-grafico{ position: relative; margin: 6px 0 8px; }
.site-grafico svg{ display: block; width: 100%; height: auto; overflow: visible; }
.site-grafico text{ font-family: var(--site-fonte); font-size: 11px; fill: var(--site-texto-fraco); font-variant-numeric: tabular-nums; }
.site-grafico .site-rotulo-serie{ font-family: var(--site-fonte); font-size: 11.5px; fill: var(--site-texto); font-weight: 600; }
.site-dica{
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--site-fundo);
  color: var(--site-texto);
  border: 1px solid var(--site-borda-forte);
  border-radius: var(--site-raio-p);
  box-shadow: var(--site-sombra-flutuante);
  padding: 8px 11px;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.site-dica b{ font-weight: 600; }
.site-dica .site-dica-titulo{ display: block; color: var(--site-texto-suave); margin-bottom: 2px; }
.site-dica i{ display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 6px; }

/* Gráfico de linha padrão (/grafico.js): controles, caixa de medir, séries */
.site-grafico-linhas{ user-select: none; -webkit-user-select: none; }
.site-grafico-linhas svg:focus-visible{ outline: 2px solid var(--site-primaria); outline-offset: 4px; border-radius: 4px; }
.site-grafico-controles{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; font-size: 0.85rem; }
.site-grafico-opcoes{ display: inline-flex; flex-wrap: wrap; border: 1px solid var(--site-borda); border-radius: var(--site-raio-p); overflow: hidden; }
.site-grafico-opcoes button{
  font: inherit; font-size: 0.84rem; padding: 7px 12px; min-height: 36px;
  border: 0; background: var(--site-cartao); color: var(--site-texto); cursor: pointer;
}
.site-grafico-opcoes button + button{ border-left: 1px solid var(--site-borda); }
.site-grafico-opcoes button:hover{ color: var(--site-primaria); }
.site-grafico-opcoes button[aria-pressed="true"]{ background: var(--site-destaque); color: var(--site-primaria); font-weight: 700; }
.site-grafico-opcoes button:focus-visible, .site-grafico-btn:focus-visible{ outline: 2px solid var(--site-primaria); outline-offset: -2px; }
.site-grafico-datas{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--site-texto-suave); }
.site-grafico-datas label{ display: inline-flex; align-items: center; gap: 6px; }
.site-grafico-datas input[type="date"]{
  font: inherit; font-size: 0.9rem; color: var(--site-texto); background: var(--site-fundo);
  border: 1px solid var(--site-borda-forte); border-radius: var(--site-raio-p); padding: 6px 8px;
  font-variant-numeric: tabular-nums;
}
.site-grafico-datas input.site-grafico-invalido{ border-color: var(--site-negativo); }
.site-grafico-marcar{ cursor: pointer; color: var(--site-texto); }
.site-grafico-series{ display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.site-grafico-chip{
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; padding: 5px 11px; border: 1px solid var(--site-borda); border-radius: 999px; cursor: pointer;
}
.site-grafico-chip input{ position: absolute; opacity: 0; pointer-events: none; }
.site-grafico-chip i{ display: inline-block; width: 14px; height: 0; border-top: 2px solid; }
.site-grafico-chip.site-grafico-desligada{ color: var(--site-texto-fraco); border-style: dashed; }
.site-grafico-chip.site-grafico-desligada i{ opacity: 0.3; }
.site-grafico-chip:has(input:focus-visible){ outline: 2px solid var(--site-primaria); }
.site-grafico-erro{ color: var(--site-negativo); font-size: 0.84rem; margin: 0 0 8px; }
.site-grafico-ajuda{ font-size: 0.8rem; color: var(--site-texto-suave); margin: 4px 0 0; }
.site-grafico-medida{
  position: absolute; top: 6px; z-index: 6; min-width: 240px; max-width: min(420px, 94%);
  background: var(--site-cartao); color: var(--site-texto);
  border: 1px solid var(--site-borda-forte); border-radius: var(--site-raio-p);
  box-shadow: var(--site-sombra-flutuante);
  padding: 10px 12px; font-size: 0.78rem; line-height: 1.45;
}
.site-grafico-medida table{ border-collapse: collapse; width: 100%; margin-top: 6px; font-variant-numeric: tabular-nums; }
.site-grafico-medida td{ padding: 1px 0; }
.site-grafico-medida td + td{ text-align: right; padding-left: 10px; white-space: nowrap; }
.site-grafico-medida i{ display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px; }
.site-grafico-medida-titulo{ font-size: 1rem; font-weight: 700; }
.site-grafico-medida-botoes{ display: flex; gap: 6px; margin-top: 8px; }
.site-grafico-btn{
  font: inherit; font-size: 0.82rem; padding: 6px 11px; min-height: 32px;
  border: 1px solid var(--site-borda-forte); border-radius: var(--site-raio-p);
  background: transparent; color: var(--site-texto); cursor: pointer;
}
.site-grafico-btn:hover{ border-color: var(--site-acento); }
.site-grafico-pos{ color: var(--site-positivo); }
.site-grafico-neg{ color: var(--site-negativo); }
.site-grafico-fraco{ color: var(--site-texto-suave); }

/* "Como a conta é feita": quadro FECHADO que abre ao clicar — padrão de todas as páginas.
   <details class="site-conta" id="como-a-conta">
     <summary><span class="site-conta-titulo">Como a conta é feita</span>
              <span class="site-conta-dica">Fórmulas, premissas e fontes</span></summary>
     …conteúdo…
   </details>
   O tema.js abre o quadro sozinho quando alguém segue um link para ele (ou para algo dentro dele). */
details.site-conta{ background: var(--site-cartao); border: 1px solid var(--site-borda); border-radius: var(--site-raio); padding: 0 24px; margin: 24px 0; }
details.site-conta[open]{ padding-bottom: 20px; }
details.site-conta > summary{
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 16px; min-height: 72px; padding: 14px 0; margin: 0; border-radius: var(--site-raio);
}
details.site-conta > summary::-webkit-details-marker{ display: none; }
details.site-conta > summary::marker{ content: ""; }
.site-conta-titulo{ grid-column: 1; font-family: var(--site-fonte); font-weight: 600; font-size: 1.08rem; color: var(--site-texto); line-height: 1.3; }
.site-conta-dica{ grid-column: 1; font-size: 0.84rem; color: var(--site-texto-suave); margin-top: 2px; }
details.site-conta > summary::after{
  content: "+"; grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--site-borda-forte); display: grid; place-items: center;
  font-family: var(--site-fonte); font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--site-texto);
  transition: border-color .15s, color .15s, transform .2s;
}
details.site-conta[open] > summary::after{ content: "−"; }
details.site-conta > summary:hover::after{ border-color: var(--site-acento); color: var(--site-acento); }
details.site-conta > summary:hover .site-conta-titulo{ color: var(--site-primaria); }
details.site-conta > summary:focus-visible{ outline: 2px solid var(--site-primaria); outline-offset: 4px; }
details.site-conta[open] > summary{ border-bottom: 1px solid var(--site-separador); border-radius: 0; margin-bottom: 18px; }
@media (max-width: 640px){ details.site-conta{ padding: 0 16px; } details.site-conta[open]{ padding-bottom: 16px; } }

/* Título e subtítulo de cada quadro da página (padrão de todas as calculadoras e estudos) */
.site-painel-titulo, main h2.site-painel-titulo{ font-family: var(--site-fonte); font-weight: 600; font-size: var(--site-painel-titulo); line-height: 1.3; margin: 0 0 4px; }
.site-painel-sub{ font-size: var(--site-painel-sub); line-height: 1.5; color: var(--site-texto-suave); margin: 0 0 16px; max-width: 72ch; }
/* "Veja também": link para a ferramenta irmã, no fim da página (não no topo) */
.site-veja-tambem{ font-size: 0.9rem; color: var(--site-texto-suave); margin: 0 0 24px; }
.site-veja-tambem a{ font-weight: 600; }

/* "Ver os números": tabela gêmea do gráfico */
.site-detalhes{ margin-top: 10px; border-top: 1px solid var(--site-borda); padding-top: 8px; }
.site-detalhes summary{ cursor: pointer; font-size: 0.82rem; color: var(--site-texto-suave); min-height: 32px; display: flex; align-items: center; }
.site-detalhes summary:hover{ color: var(--site-texto); }
.site-detalhes[open] summary{ margin-bottom: 8px; }

/* ---------- 7. Índice de ferramentas e princípios ---------- */
.site-indice{ list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--site-borda); }
.site-indice > li{ border-top: 1px solid var(--site-borda); }
.site-indice a{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 1.5rem;
  gap: 4px 24px;
  align-items: center;
  padding: 22px 16px 22px 12px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--site-raio);
  transition: background-color 0.15s ease;
}
.site-indice a:hover{ background: var(--site-cartao); }
.site-indice a:hover .site-indice-titulo{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: var(--site-acento); }
.site-indice a:hover .site-indice-seta{ transform: translateX(4px); color: var(--site-acento); }
/* Ícone da ferramenta (símbolos em /assets/brand/icones.svg) */
.site-indice-icone{
  --icone-acento: var(--site-dourado);
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--site-marinho);
  color: var(--site-marfim);
  display: grid; place-items: center;
  transition: transform 0.15s ease;
}
.site-indice-icone svg{ width: 40px; height: 40px; display: block; }
.site-indice a:hover .site-indice-icone{ transform: translateY(-2px); }
@media (prefers-color-scheme: dark){ .site-indice-icone{ box-shadow: inset 0 0 0 1px var(--site-borda-forte); } }
.site-indice-n{ font-size: 0.76rem; font-weight: 600; color: var(--site-acento); padding-left: 12px; font-variant-numeric: tabular-nums; }
.site-indice-corpo{ display: grid; gap: 4px; min-width: 0; }
.site-indice-tipo{
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-texto-fraco);
}
.site-indice-titulo{ font-family: var(--site-serif); font-size: 1.7rem; font-weight: 400; line-height: 1.1; }
.site-indice-desc{ font-size: 0.93rem; color: var(--site-texto-suave); max-width: 64ch; }
.site-indice-fonte{ font-size: 0.76rem; line-height: 1.55; color: var(--site-texto-fraco); }
.site-indice-fonte b{ display: block; font-weight: 600; color: var(--site-texto-suave); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.64rem; }
.site-indice-seta{ color: var(--site-texto-fraco); transition: transform 0.15s ease, color 0.15s ease; justify-self: end; }
.site-indice li.site-indice-futuro{ padding: 18px 12px 18px 0; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 24px; font-size: 0.9rem; color: var(--site-texto-suave); }
.site-indice li.site-indice-futuro .site-indice-tipo{ display: block; margin-bottom: 4px; }
@media (max-width: 760px){
  .site-indice a{ grid-template-columns: 44px minmax(0, 1fr) 1.2rem; gap: 6px 14px; align-items: start; padding-left: 4px; }
  .site-indice-icone{ width: 44px; height: 44px; border-radius: 12px; }
  .site-indice-icone svg{ width: 32px; height: 32px; }
  .site-indice-fonte{ grid-column: 2 / 3; grid-row: 2; }
  .site-indice-seta{ grid-column: 3; grid-row: 1; }
  .site-indice-n{ padding-left: 4px; }
  .site-indice li.site-indice-futuro{ grid-template-columns: 2.4rem minmax(0, 1fr); gap: 14px; }
}

/* Princípios / método: lista numerada em duas colunas */
.site-principios{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  counter-reset: principio;
}
@media (max-width: 760px){ .site-principios{ grid-template-columns: minmax(0, 1fr); } }
.site-principios li{
  counter-increment: principio;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 8px;
  padding: 20px 0;
  border-top: 1px solid var(--site-borda);
}
.site-principios li::before{
  content: counter(principio, decimal-leading-zero);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--site-acento);
  padding-top: 3px;
}
.site-principios h3{ margin: 0 0 4px; font-size: 1.02rem; font-weight: 600; grid-column: 2; }
.site-principios p{ margin: 0; font-size: 0.92rem; color: var(--site-texto-suave); grid-column: 2; }

/* ---------- 7b. Índice "Nesta página" (páginas longas) ----------
   <div class="site-com-indice">
     <nav class="site-indice-pagina" aria-label="Nesta página">
       <p class="site-indice-pagina-titulo">Nesta página</p>
       <ol><li><a href="#secao">Seção</a></li>…</ol>
       <a class="site-indice-pagina-outra" href="…">Outra página →</a>   (opcional)
     </nav>
     <div>…conteúdo…</div>
   </div>
   Tela larga: o índice fica na margem esquerda, FORA da coluna do conteúdo
   (o conteúdo mantém a largura toda). Tela menor: vira uma barra horizontal
   fixa no topo. O link da seção em que a pessoa está é marcado pelo tema.js. */
.site-indice-pagina{
  position: sticky;
  top: 72px;                         /* abaixo do cabeçalho fixo */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 calc(-1 * var(--site-margem)) 24px;
  padding: 0 var(--site-margem);
  background: var(--site-fundo);
  border-bottom: 1px solid var(--site-borda);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 0.86rem;
}
.site-indice-pagina::-webkit-scrollbar{ display: none; }
.site-indice-pagina-titulo{ display: none; }
.site-indice-pagina ol{ display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
/* barra do celular: cada item numa linha só (a barra rola pro lado); na margem larga volta a quebrar */
.site-indice-pagina li{ flex-shrink: 0; white-space: nowrap; }
.site-indice-pagina a{
  display: flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
  color: var(--site-texto-suave);
  text-decoration: none;
}
.site-indice-pagina a:hover{ color: var(--site-texto); }
.site-indice-pagina a[aria-current="true"]{ color: var(--site-texto); border-bottom-color: var(--site-acento); font-weight: 600; }
.site-indice-pagina-outra{ font-weight: 600; }
.site-com-indice [id]{ scroll-margin-top: 136px; }
@media (max-width: 640px){ .site-indice-pagina{ top: 0; } }
@media (min-width: 1640px){
  .site-com-indice{
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    margin-left: -240px;             /* a coluna do índice entra na margem esquerda */
  }
  .site-indice-pagina{
    display: block;
    top: 104px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
    white-space: normal;
  }
  .site-indice-pagina li{ white-space: normal; }
  .site-indice-pagina-titulo{
    display: block;
    margin: 0 0 12px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--site-texto-fraco);
  }
  .site-indice-pagina ol{ display: block; border-left: 1px solid var(--site-borda); }
  .site-indice-pagina a{
    display: block; min-height: 0;
    padding: 6px 0 6px 14px;
    margin-left: -1px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    line-height: 1.35;
  }
  .site-indice-pagina a[aria-current="true"]{ border-left-color: var(--site-acento); }
  .site-indice-pagina-outra{ display: block; margin-top: 16px; padding: 12px 0 0 14px !important; border-top: 1px solid var(--site-borda); border-left: 0 !important; }
  .site-com-indice [id]{ scroll-margin-top: 96px; }
}

/* ---------- 8. Botões, tabela e peças pequenas ---------- */
.site-botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--site-raio-p);
  border: 1px solid var(--site-marinho);
  background: var(--site-marinho);
  color: var(--site-marfim);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.site-botao:hover{ background: var(--site-marinho-profundo); border-color: var(--site-dourado); color: var(--site-marfim); text-decoration: none; }
/* Sobre marinho, o botão principal vira dourado (o destaque da seção) */
.site-faixa-marinho .site-botao, .site-cabecalho .site-botao{ background: var(--site-dourado); border-color: var(--site-dourado); color: var(--site-marinho); }
.site-faixa-marinho .site-botao:hover, .site-cabecalho .site-botao:hover{ background: #d6b673; border-color: #d6b673; color: var(--site-marinho); }
.site-botao.site-botao-secundario{ background: transparent; color: var(--site-texto); border-color: var(--site-borda-forte); }
.site-botao.site-botao-secundario:hover{ border-color: var(--site-acento); background: transparent; color: var(--site-texto); }
@media (prefers-color-scheme: dark){
  .site-botao{ background: var(--site-dourado); border-color: var(--site-dourado); color: var(--site-marinho); }
  .site-botao:hover{ background: #d6b673; border-color: #d6b673; color: var(--site-marinho); }
}
.site-link-seta{ display: inline-flex; align-items: center; min-height: 44px; font-size: 0.94rem; font-weight: 600; color: var(--site-texto); text-decoration: none; }
.site-link-seta::after{ content: "→"; margin-left: 6px; color: var(--site-acento); transition: transform 0.15s ease; }
.site-link-seta:hover{ text-decoration: underline; text-decoration-color: var(--site-acento); }
.site-link-seta:hover::after{ transform: translateX(3px); }
.site-faixa-marinho .site-link-seta, .site-cabecalho .site-link-seta{ color: var(--site-sobre-marinho); }
.site-faixa-marinho .site-link-seta::after, .site-cabecalho .site-link-seta::after{ color: var(--site-dourado); }

.site-tabela{ width: 100%; border-collapse: collapse; font-size: 0.84rem; font-variant-numeric: tabular-nums lining-nums; }
.site-tabela th, .site-tabela td{ padding: 8px 10px; border-bottom: 1px solid var(--site-borda); text-align: right; white-space: nowrap; }
.site-tabela th:first-child, .site-tabela td:first-child{ text-align: left; padding-left: 0; }
.site-tabela thead th{
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-texto-fraco);
  border-bottom-color: var(--site-borda-forte);
  vertical-align: bottom;
}
.site-rolagem{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

.site-selo{
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--site-borda-forte);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--site-texto-suave);
}

/* ---------- 9. Rodapé do site (marinho) ---------- */
/*  <footer class="site-rodape">
      <div class="site-rodape-conteudo">
        <div class="site-rodape-marca">(logo + frase)</div>
        <nav class="site-rodape-col">…</nav>
        <div class="site-rodape-col">…</div>
        <p class="site-aviso">…</p>
      </div>
    </footer>                                                              */
.site-rodape{
  margin-top: 104px;
  background: var(--site-marinho);
  color: var(--site-sobre-marinho-suave);
  padding: 56px 0 48px;
  font-size: 0.88rem;
}
.site-faixa + .site-rodape, main:has(> .site-faixa:last-child) + .site-rodape{ margin-top: 0; }
.site-rodape-conteudo{
  max-width: var(--site-largura);
  margin: 0 auto;
  padding: 0 var(--site-margem);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 56px;
}
@media (max-width: 760px){ .site-rodape-conteudo{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site-rodape-marca{ grid-column: 1 / -1; } }
.site-rodape p{ margin: 0; }
.site-rodape a{ color: var(--site-sobre-marinho); text-decoration: none; }
.site-rodape a:hover{ color: var(--site-dourado); text-decoration: none; }
.site-rodape-marca .site-marca{ --logo: 32px; margin-bottom: 14px; }
.site-rodape-marca p{ max-width: 38ch; }
.site-rodape-col{ display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.site-rodape-col a{ min-height: 32px; display: inline-flex; align-items: center; }
.site-rodape-titulo{
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-dourado);
  margin: 0 0 6px !important;
}
.site-rodape .site-aviso{
  grid-column: 1 / -1;
  border-top: 1px solid var(--site-separador);
  padding-top: 20px;
  font-size: 0.8rem;
  color: var(--site-sobre-marinho-suave);
  max-width: none;
}
.site-rodape .site-aviso + .site-aviso{ border-top: 0; padding-top: 0; }

/* ---------- 10. Compatibilidade com o visual antigo ---------- */
/* Logo antigo (<img src="/favicon.svg">Theo Holanda) continua funcionando */
.site-marca > img[src="/favicon.svg"]{ width: 30px; height: 30px; border-radius: 8px; }
.site-marca:not(:has(.site-marca-nome)){ font-family: var(--site-serif); font-size: 1.5rem; }
.site-hero{ background: var(--site-marinho); color: var(--site-sobre-marinho); padding: 48px var(--site-margem) 40px; }
.site-hero-conteudo{ max-width: var(--site-largura); margin: 0 auto; }
.site-hero h1{ font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); line-height: 1.04; margin: 0 0 12px; }
.site-hero p{ margin: 0; font-size: 1.12rem; color: var(--site-sobre-marinho-suave); max-width: 62ch; }
.site-principal{ max-width: var(--site-largura); margin: 40px auto 0; padding: 0 var(--site-margem); }
.site-grade{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.site-cartao{ display: flex; flex-direction: column; background: var(--site-cartao); border: 1px solid var(--site-borda); border-radius: var(--site-raio); padding: 24px; color: inherit; text-decoration: none; }
a.site-cartao:hover{ border-color: var(--site-acento); }
.site-cartao-icone{ display: none; }
.site-cartao h2{ margin: 0 0 6px; font-family: var(--site-serif); font-weight: 400; font-size: 1.5rem; }
.site-cartao p{ margin: 0; font-size: 0.9rem; color: var(--site-texto-suave); flex: 1; }
.site-cartao-rodape{ margin-top: 16px; display: flex; justify-content: space-between; gap: 8px; font-size: 0.74rem; color: var(--site-texto-fraco); }
.site-cartao-abrir{ color: var(--site-texto); font-weight: 600; }
.site-cartao.em-breve{ color: var(--site-texto-suave); }

/* ---------- 11. Impressão e acessibilidade ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print{
  :root{ --site-fundo: #fff; --site-cartao: #fff; }
  body{ background: #fff; color: #000; }
  .site-topo, .site-pular, .site-rodape-col, .site-acoes, .site-curva, .site-tema{ display: none !important; }
  .site-cabecalho, .site-faixa-marinho, .site-rodape{ background: #fff !important; color: #000 !important; }
  .site-cabecalho h1, .site-cabecalho .site-lede, .site-cabecalho .site-ficha dd, .site-abertura h1{ color: #000 !important; }
  .site-rodape{ margin-top: 32px; padding: 16px 0 0; }
  .site-cabecalho-conteudo, .site-secao, .site-abertura{ padding-left: 0; padding-right: 0; }
  a{ color: inherit; text-decoration: none; }
  .site-figura, .site-indicadores{ break-inside: avoid; }
}