/* ============================================================
   Erlis — site institucional
   Tema escuro, cobalto #84ADFF, IBM Plex auto-hospedada.
   Os valores de cor vêm do kit v1.3; a fonte é subset local.
   ============================================================ */

/* ----- Fontes. Locais de propósito: sem CDN, sem terceiro, e o
   site continua de pé se a rede do Google cair. -------------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #0c0e12;
  --surface: #15181e;
  --surface-alta: #1d2128;
  --borda: #343a44;
  --borda-forte: #505866;

  --texto: #f4f6f8;
  --texto-2: #aab0ba;
  --texto-3: #83888f;

  --marca: #84adff;
  --marca-clara: #a9c6ff;
  --marca-funda: #5b8ff0;
  --marca-veu: rgba(132, 173, 255, 0.08);
  --marca-borda: rgba(132, 173, 255, 0.28);

  --alerta: #fbbf24;
  --ok: #34d399;

  --claro-bg: #f7f8fa;
  --claro-surface: #ffffff;
  --claro-texto: #17191f;
  --claro-texto-2: #5e6470;
  --claro-borda: #d8dce3;
  --claro-veu: #eaf2ff;
  --claro-marca: #175cd3;

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --largura: 1280px;
  --gutter: 48px;
}

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

html { -webkit-text-size-adjust: 100%; }

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

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-clara); text-decoration: underline; }

a, button, input, summary {
  -webkit-tap-highlight-color: rgba(132, 173, 255, 0.18);
  touch-action: manipulation;
}

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

img, svg { max-width: 100%; }

/* Pular para o conteúdo: invisível até receber foco pelo teclado.
   Quem navega por Tab não deve atravessar o menu inteiro em toda
   página para chegar ao texto. */
/* Escondido de olho, presente para leitor de tela e para o Tab.
   NÃO usa `left: -9999px`: elemento posicionado fora à esquerda
   estica o documento e cria rolagem horizontal no telefone — foi
   exatamente o que apareceu ao medir em 390px. `clip-path` some
   sem ocupar espaço nenhum. */
.pular {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pular:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip-path: none;
  background: var(--marca);
  color: var(--bg);
  font-weight: 600;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}

/* Mesma técnica para o campo-armadilha do formulário. */
.armadilha {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.wrap {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mono {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
}

.sec { padding: 96px 0; }
.sec-clara { background: var(--claro-bg); color: var(--claro-texto); }
.sec-branca { background: var(--claro-surface); color: var(--claro-texto); }
.sec-clara h2, .sec-branca h2 { color: var(--claro-texto); }
.sec-clara p, .sec-branca p { color: var(--claro-texto); }

h1 {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.032em;
  margin: 0 0 26px;
  text-wrap: pretty;
}

h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0 0 24px;
  text-wrap: pretty;
}

h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 10px;
}

p { margin: 0 0 18px; }
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--texto-2); line-height: 1.6; }
.sec-clara .lede, .sec-branca .lede { color: var(--claro-texto-2); }

/* ----- Botões ------------------------------------------------ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--marca);
  color: var(--bg);
  font-family: var(--sans);
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.cta:hover { background: var(--marca-clara); color: var(--bg); text-decoration: none; }
.cta:active { background: var(--marca-funda); }
.cta[disabled] { opacity: 0.6; cursor: progress; }
.cta-nav { height: 40px; padding: 0 18px; font-size: 15px; }
.cta-grande { height: 54px; padding: 0 30px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

/* ----- Cabeçalho --------------------------------------------- */
.topo {
  border-bottom: 1px solid var(--borda);
  background: var(--bg);
}
.topo .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topo nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  flex-wrap: wrap;
}
.topo nav a:not(.cta) { color: var(--texto-2); }
.topo nav a:not(.cta):hover { color: var(--texto); }

/* ----- Herói + fluxo (abertura) ------------------------------ */
.heroi {
  padding: 32px 0 0;
  background: radial-gradient(900px 420px at 78% 18%, rgba(132, 173, 255, 0.16), rgba(12, 14, 18, 0) 70%);
  overflow: hidden;
}
.heroi-grade {
  display: grid;
  /* A coluna de texto pesa MAIS que a da tela. Com 1fr/1.05fr ela
     ficava em 472px e o H1 quebrava em cinco linhas de 19 caracteres —
     medida de legenda, não de título. */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
/* O H1 do herói é dimensionado pela COLUNA, não pela viewport — a
   escala global (até 62px) o quebrava em seis linhas e engolia a dobra.
   O teto subiu junto com o container: numa coluna de ~600px, 46px
   deixava o título pequeno para o espaço que ele tem. */
.heroi h1 { font-size: clamp(30px, 3.6vw, 52px); }
.heroi .lede { margin-bottom: 36px; }
.heroi-acoes {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
/* A cápsula do herói deixou de ser rótulo de categoria e passou a
   nomear o que o produto administra — "Usinas de investimento" e
   "Usinas convencionais" são termos do sistema, não do marketing.
   Duas consequências de forma:

   1. sai o versalete. Em caixa alta com tracking os três termos não
      cabem na coluna do herói (472px), e cápsula de duas linhas lê
      como erro de layout.
   2. viram TRÊS cápsulas, uma por termo, em vez de uma longa. Assim
      elas se reorganizam sozinhas em qualquer largura, sem que nenhum
      termo precise ser cortado — que era a alternativa. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--marca-borda);
  background: var(--marca-veu);
  border-radius: 999px;
  color: var(--marca-clara);
  margin-bottom: 26px;
}

.sec-fluxo { padding: 96px 0; border-top: 1px solid var(--borda); }
.fluxo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.fluxo-linha {
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(132,173,255,.15), rgba(132,173,255,.55), rgba(132,173,255,.15));
}
.fluxo-passo { position: relative; }
.fluxo-bolha {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--marca-borda);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.fluxo-passo:last-child .fluxo-bolha {
  border-color: rgba(132, 173, 255, 0.55);
  background: var(--marca-veu);
}

/* ----- Faixa de fatos ---------------------------------------- */
.fatos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 56px;
}
.fatos > div { background: var(--bg); padding: 22px 24px; }
.fatos p { font-size: 14px; color: var(--texto-2); margin: 0; line-height: 1.5; }

/* ----- Listas e cartões -------------------------------------- */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grade-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; }

.cartao {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 32px;
}
.cartao-claro {
  background: var(--claro-surface);
  border-radius: 10px;
  padding: 30px;
}

.dores { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--claro-borda); }
.dores li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--claro-borda);
  align-items: start;
  font-size: 16px;
  line-height: 1.6;
}

.colunas-prontidao {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.lista-recursos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  font-size: 15px;
  line-height: 1.5;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-simples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-size: 15px; color: var(--texto-2); }

.portais {
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: var(--borda);
}
.portais > div { background: var(--bg); padding: 26px 20px; }
.portais p { font-size: 13px; color: var(--texto-2); margin: 0; line-height: 1.5; }

/* ----- Tela do produto (figura de apoio) --------------------- */
.tela {
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.8);
  overflow: hidden;
}
.tela-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--surface-alta);
}
.tela-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--borda); }
.tela-corpo { padding: 22px; }
.tela-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 78px 96px 96px;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borda);
  align-items: center;
  font-size: 14px;
}
.tela-linha:last-child { border-bottom: 0; }
.legenda { font-size: 12px; color: var(--texto-3); margin-top: 10px; }

/* ----- Tabelas ------------------------------------------------ */
.tabela-rolavel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; }

/* ----- Formulário -------------------------------------------- */
.campo {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 16px;
  font-family: var(--sans);
  color: var(--texto);
  background: var(--bg);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
}
.campo::placeholder { color: var(--texto-3); opacity: 1; }
.campo[aria-invalid="true"] { border-color: #f87171; }
.recado { margin: 12px 0 0; font-size: 14px; min-height: 20px; }
.recado[data-estado="erro"] { color: #f87171; }
.recado[data-estado="ok"] { color: var(--ok); }

/* ----- Rodapé -------------------------------------------------
   Três colunas e uma barra de base. A versão anterior era uma linha
   só — nome da empresa, e-mail e quatro links —, e ficava com um vazio
   enorme no meio em tela larga. Substituição, não acréscimo: as regras
   antigas de `.rodape .wrap` e `.rodape ul` sairam daqui em vez de
   ganharem um modificador no fim do arquivo, porque o layout mudou
   inteiro.
   -------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--borda); padding: 56px 0 32px; }
.rodape p, .rodape li { font-size: 14px; color: var(--texto-3); margin: 0; }

.rodape-grade {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.2fr;
  gap: 32px 48px;
  align-items: start;
}

.rodape-marca svg { display: block; margin-bottom: 18px; }
.rodape-marca p { margin-bottom: 8px; }
.rodape-marca .rodape-legal { color: var(--texto-2); margin-top: 20px; }

.rodape-titulo {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--texto-2);
  margin: 0 0 18px;
}

.rodape-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rodape-lista a { color: var(--texto-3); }
.rodape-lista a:hover { color: var(--marca-clara); }

/* Barra de base: direitos à esquerda, links jurídicos à direita. */
.rodape-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--borda);
}
.rodape-base ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* ----- Texto longo (privacidade, termos, post) ---------------- */
.texto { max-width: 68ch; }
.texto h2 { font-size: clamp(24px, 3vw, 30px); margin-top: 48px; scroll-margin-top: 24px; }
.texto h3 { font-size: 19px; margin-top: 32px; scroll-margin-top: 24px; }
.texto ul { padding-left: 22px; }
.texto li { margin-bottom: 10px; }
.texto p, .texto li { color: var(--texto-2); }
.texto strong { color: var(--texto); font-weight: 600; }

/* ============================================================
   Telefone e tablet.
   Uma quebra só, e cedo: a partir de 900px tudo que é grade de
   3, 4 ou 5 colunas vira coluna única ou dupla. Grade de cinco
   espremida em 390px não é layout apertado — é ilegível.
   ============================================================ */
@media (max-width: 900px) {
  :root { --gutter: 24px; }

  .sec { padding: 64px 0; }
  .heroi { padding-top: 56px; }

  .grade-2,
  .grade-3,
  .colunas-prontidao,
  .lista-recursos { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .fatos, .grade-5, .portais > .grade-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* O fluxo vira vertical: a linha horizontal some e cada passo
     ganha o próprio bloco. Cinco círculos lado a lado num
     telefone viram cinco pontos sem texto legível. */
  .fluxo { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; }
  .fluxo-linha { display: none; }
  .fluxo-bolha { margin-bottom: 14px; }

  .tela-linha { grid-template-columns: minmax(0, 1.4fr) 64px 72px; font-size: 13px; }
  .tela-linha > :nth-child(4) { display: none; }


  .heroi-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .heroi { padding-top: 40px; }

  .topo .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .topo nav { gap: 18px; }

  /* Duas colunas antes de uma: os dois menus são curtos e ficariam
     com uma linha de texto e meia tela de vazio ao lado. A coluna da
     marca ocupa a largura inteira acima deles. */
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .rodape-marca { grid-column: 1 / -1; }
  .rodape-base { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 560px) {
  .fatos, .grade-5, .portais > .grade-5 { grid-template-columns: minmax(0, 1fr); }
  .heroi-acoes { flex-direction: column; align-items: stretch; }
  .heroi-acoes .cta { width: 100%; }
}

/* ============================================================
   O documento dentro da janela (herói).

   A paleta é da SUNO, não nossa: #191960 e #EA7A15 são as cores
   que a organização tem configurada na plataforma. É esse o
   ponto — o relatório sai com a identidade de quem opera a usina,
   e a peça só prova o white-label se a cor dela não for a nossa.
   ============================================================ */
.documento {
  background: #ffffff;
  color: #17191f;
  padding: 18px 20px 20px;
}
.doc-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3e6ea;
  flex-wrap: wrap;
}
.doc-logo { display: block; height: auto; }
.doc-tipo {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
}
.doc-unidade { font-size: 14px; font-weight: 600; margin: 12px 0 12px; color: #17191f; }
.doc-unidade span { font-weight: 400; color: #6b7280; }

.doc-rotulo {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 4px;
}
.doc-destaque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #191960;
  border-radius: 10px;
  padding: 13px 18px;
}
.doc-destaque .doc-rotulo { color: #c5c5e0; }
.doc-valor { font-size: 27px; font-weight: 600; color: #ffffff; margin: 0; letter-spacing: -0.02em; }
.doc-selo {
  background: #f1f5f9;
  border-radius: 999px;
  padding: 8px 16px;
  text-align: center;
  color: #191960;
  flex-shrink: 0;
}
.doc-selo span { display: block; font-size: 16px; font-weight: 600; }
.doc-selo small { font-size: 9px; color: #4b5563; }

.doc-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.doc-cartoes > div {
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  padding: 10px 12px;
}
.doc-cartoes p:last-child { font-size: 14px; font-weight: 600; margin: 0; }
.doc-cartao-forte { background: #f4f7fb; border-color: #d7e0ec !important; }

/* ----- O gráfico do relatório -------------------------------------
   Duas barras LADO A LADO por mês, com eixo vertical à esquerda.

   A versão anterior punha o compensado dentro da barra de consumo. A
   sobreposição mostrava a cobertura, mas escondia a grandeza: não dava
   para dizer se o mês consumiu 2.000 ou 6.000 kWh, e sem eixo não havia
   nada a que comparar. Duas barras e uma escala numerada resolvem as
   duas leituras — quanto foi, e quanto disso a usina cobriu. */
.doc-plot {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto 104px auto;
  column-gap: 8px;
}
.doc-unidade-eixo {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: #9aa3b0;
  text-align: right;
}
.doc-eixo {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 9px;
  color: #6b7280;
  /* Sobe meia linha: cada número marca a LINHA, não o espaço abaixo dela. */
  margin: -5px 0 -5px;
}
/* A BASE DO EIXO É ZERO, e não é preguiça de calibrar.
   A cobertura desta série é de 95,8%: um eixo começando em 90% faria
   4,2 pontos de diferença parecerem o dobro do que são. Fica mais
   bonito e mente. Se alguém vier aqui "dar mais contraste às barras",
   é este comentário que precisa ser respondido primeiro. */
.doc-area {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  border-bottom: 1px solid #c8cfd8;
}
.doc-grade {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #e0e5ec;
}
.doc-grupos {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}
.doc-grupo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
}
.doc-barra {
  display: block;
  width: 46%;
  border-radius: 2px 2px 0 0;
}
/* As duas cores são as da SUNO, e a ATRIBUIÇÃO segue a semântica que o
   relatório já tinha: na página 2 dele, o realce (laranja) é "sem
   compensação solar" e a cor da marca (azul) é "com locação solar".
   Então consumo — o total, o que se pagaria sem a usina — fica no
   realce, e o compensado fica na marca.

   Eu tinha feito o inverso aqui. Estava bonito e estava errado: a cor da
   marca representaria o GASTO do cliente no mesmo documento em que ela
   representa o SERVIÇO. Quem lê o relatório todo mês carrega essa
   associação, e a peça do site tem de falar a mesma língua.

   Nenhum mês é destacado — com barras agrupadas, um terceiro tom
   quebraria a legenda, que tem duas entradas. */
.doc-barra-consumo { background: #ea7a15; }
.doc-barra-comp { background: #191960; }

.doc-plot .doc-meses {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9px;
  color: #6b7280;
  text-align: center;
}

.doc-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
.doc-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.doc-amostra { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.doc-amostra-consumo { background: #ea7a15; }
.doc-amostra-compensado { background: #191960; }
.doc-meses {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: #6b7280;
  text-align: center;
}

/* Citação, regra e código dentro de texto longo (post, política).
   Sem isto a citação do post se confunde com o item de lista logo
   acima — foi o que apareceu na primeira renderização. */
.texto blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--marca-borda);
  color: var(--texto);
  font-size: 18px;
  line-height: 1.6;
}
.texto hr { border: 0; border-top: 1px solid var(--borda); margin: 40px 0; }
.texto code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface-alta);
  padding: 2px 7px;
  border-radius: 3px;
}

/* O documento no telefone. Fica no fim do arquivo de propósito: a
   definição base vem depois do bloco de 900px lá em cima, e regra de
   mesma especificidade perde por ordem de origem — foi assim que a
   primeira tentativa não pegou. */
@media (max-width: 900px) {
  .doc-cartoes { grid-template-columns: minmax(0, 1fr); }
  .doc-destaque { flex-direction: column; align-items: flex-start; }
  .doc-valor { font-size: 26px; }
  .documento { padding: 18px; }
}

/* Linha do FAQ. Era grade inline com primeira coluna de 360px fixos —
   e estilo inline vence media query, então ela não colapsava: 360 + 40
   de gap estouravam os 390px do telefone e a seção era cortada sem
   ninguém ver. Classe, para a quebra poder existir. */
.faq-linha {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 40px;
  padding: 26px 0;
  border-bottom: 1px solid var(--claro-borda);
}
@media (max-width: 900px) {
  .faq-linha { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Título do gráfico com a nota do maior mês à direita. É ela que
   declara a série como escala: sem um valor de referência, seis
   retângulos de alturas parecidas leem como ornamento, não como
   comparação mês a mês. */
.doc-grafico-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 6px;
  flex-wrap: wrap;
}

/* ----- Assinatura do autor -------------------------------------- */
.autor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--borda);
}
.autor-pessoa { display: flex; align-items: center; gap: 14px; }
.autor-foto {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.autor-iniciais {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alta);
  border: 1px solid var(--borda);
  color: var(--marca);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.autor-nome { margin: 0; font-weight: 600; color: var(--texto); }
.autor-cargo { margin: 2px 0 0; font-size: 14px; color: var(--texto-3); }

/* ----- Chamada no meio da página ---------------------------------
   Faixa fina, não seção: ela interrompe a leitura por dois segundos
   e devolve. Se tivesse o peso de uma seção, competiria com a
   chamada final em vez de servir de atalho para quem já decidiu. */
.faixa-cta {
  background: var(--bg);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  padding: 28px 0;
}
.faixa-cta .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.faixa-cta p {
  margin: 0;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--texto);
  max-width: 60ch;
}
.faixa-cta .cta { flex-shrink: 0; }

@media (max-width: 700px) {
  .faixa-cta .wrap { flex-direction: column; align-items: stretch; gap: 20px; }
  .faixa-cta .cta { width: 100%; }
}

/* As cápsulas do herói. No FIM do arquivo de propósito: `.chip` define
   `margin-bottom: 26px` e vem depois na origem — com a regra lá em cima,
   o `margin: 0` daqui perdia por ordem e cada cápsula carregava 26px de
   respiro, empilhando o bloco em 124px de altura. É o mesmo erro que já
   tinha acontecido com o FAQ e com a grade do documento. */
.chip-produto {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11px;
  padding: 5px 10px;
  margin: 0;
}

/* Medida de leitura no FAQ. O container foi de 1120 para 1280 e a
   coluna de resposta herdou a folga: em 1920 ela passaria de 90
   caracteres por linha, que é onde o olho perde a linha seguinte. O
   título ganha a largura, o texto corrido não. */
.faq-linha dd { max-width: 62ch; }

/* ----- Curtir e compartilhar, no fim do artigo -------------------
   Alvos de 44px de altura: são botões de dedo, não de mouse — a
   maior parte de quem compartilha um texto está no telefone. */
.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--borda);
}
.acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: transparent;
  color: var(--texto-2);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.acao:hover {
  border-color: var(--marca-borda);
  color: var(--marca);
  background: var(--marca-veu);
  text-decoration: none;
}
.acao-ativa,
.acao-ativa:hover {
  border-color: var(--marca-borda);
  background: var(--marca-veu);
  color: var(--marca);
}
.acoes-risco {
  width: 1px;
  height: 22px;
  background: var(--borda);
  margin: 0 4px;
}

/* Some do olho, continua no leitor de tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (prefers-reduced-motion: reduce) {
  .acao { transition: none; }
}

@media (max-width: 560px) {
  .acoes-risco { display: none; }
  .acao { flex: 1 1 auto; justify-content: center; }
}