/* ============================================================
   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: 76px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.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: 72px 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é ------------------------------------------------- */
.rodape { border-top: 1px solid var(--borda); padding: 40px 0; }
.rodape .wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.rodape p, .rodape li { font-size: 14px; color: var(--texto-3); margin: 0; }
.rodape 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; }

  .rodape .wrap { flex-direction: column; }
}

@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: 22px 24px 26px;
}
.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: 14px 0 16px; 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: 16px 20px;
}
.doc-destaque .doc-rotulo { color: #c5c5e0; }
.doc-valor { font-size: 30px; 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: 12px;
}
.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 118px 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;
}
.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: o azul é o total consumido, o laranja é
   a parte que a usina cobriu. Nenhum mês é destacado — com barras
   agrupadas, colorir julho de outro jeito quebraria a legenda. */
.doc-barra-consumo { background: #191960; }
.doc-barra-comp { background: #ea7a15; }

.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: 12px;
  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: #191960; }
.doc-amostra-compensado { background: #ea7a15; }
.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: 18px 0 8px;
  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; }
}