/* ============================================================
   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);

  /* O laranja do grafico do relatorio -- consumo da unidade. Nao e cor
     nova: e a cor quente que o produto ja entrega ao cliente final, e e
     de la que o blog tira o calor sem inventar paleta. */
  --injecao: #ea7a15;

  --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 {
  /* Fixa no topo. `sticky` e não `fixed`: o elemento continua ocupando
     o lugar dele no fluxo, então não é preciso compensar o corpo com um
     padding do tamanho da faixa — compensação que envelhece sozinha
     quando a altura da faixa muda.
     z-index 50 fica ABAIXO do .pular (100): o atalho de teclado tem de
     aparecer por cima da faixa, não atrás dela. */
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--borda);
  background: var(--bg);
}

/* Com a faixa fixa, um link de âncora leva o topo da seção para debaixo
   dela. `scroll-margin-top` é a folga que o navegador respeita ao pular —
   e vale também para quem chega por link direto com #hash. */
#plataforma,
#portais,
#planos,
#contato,
#conteudo { scroll-margin-top: 68px; }
.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.
   -------------------------------------------------------------- */
/* Compactado em 12/10/2026: o rodapé ocupava quase uma tela inteira e
   competia com o conteúdo. Só CSS mudou — o MARKUP do rodapé é repetido
   em cinco arquivos (index, 404, privacidade, termos e a moldura do
   blog.mjs) e o build aborta se eles divergirem. Mexer na folha de
   estilo conserta as cinco de uma vez; mexer no markup é cinco chances
   de errar uma. */
.rodape { border-top: 1px solid var(--borda); padding: 16px 0 12px; }
.rodape p, .rodape li { font-size: 12.5px; line-height: 1.4; color: var(--texto-3); margin: 0; }

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

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

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

.rodape-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.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: 12px 32px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  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. */
  /* O rodape no telefone empilha tudo, e por isso e a parte do site que
     mais cresce em tela pequena. Intervalo menor e a barra de base em
     linha unica cortam sem tirar conteudo. */
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .rodape-marca { grid-column: 1 / -1; }

  /* A FAIXA FIXA VALE NO DESKTOP, E NAO AQUI.
     No telefone o menu quebra em tres linhas e a faixa mede 143px --
     17% da tela, permanentes, em troca de um atalho que a rolagem ja
     resolve. O caminho certo para fixar no telefone e um menu compacto
     (um botao que abre os links), e isso e decisao de produto, nao
     ajuste de folha de estilo. Enquanto nao houver, ela rola. */
  .topo { position: static; }
  .rodape-base { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
}

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

/* ============================================================
   Blog — listagem
   ============================================================
   A versão anterior era uma lista de texto corrido com hairline
   entre os itens: correta, legível e sem rosto. O que mudou aqui
   não foi "deixar bonito", foi dar ao blog o mesmo vocabulário
   visual do produto.

   O SELO DE BARRAS é o elemento que carrega isso. Ele não é
   ilustração de banco de imagem nem ícone de sol: é a construção
   da própria marca — o logo é um "E" feito de retângulos — nas
   duas cores do gráfico que o cliente final recebe no relatório,
   cobalto e laranja. Cada post tem o seu, derivado do slug, e o
   mesmo post desenha sempre o mesmo selo.

   Ele descansa comprimido e sobe no hover. A leitura é de carga,
   não de dado: sem eixo, sem rótulo, sem escala. Essa distinção
   é a razão de o selo poder existir num blog que não publica
   número sem fonte.
   ============================================================ */

.sec-blog {
  padding: 44px 0 72px;
  /* O mesmo brilho do heroi da landing, mais discreto. E o que impede a
     pagina de abrir como uma folha preta: o topo tem respiro e cor, e o
     olho sabe onde comecar. */
  background: radial-gradient(760px 340px at 82% 2%, rgba(132, 173, 255, 0.09), rgba(12, 14, 18, 0) 70%);
}

/* ----- Abertura ---------------------------------------------- */
.blog-topo {
  position: relative;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--borda);
}
/* A regua atravessa a pagina porque ela e estrutura -- separa a abertura
   do acervo. Quem fica em 62ch e o TEXTO, que e medida de leitura. Com o
   max-width no bloco inteiro, a linha parava no meio da tela e parecia
   defeito. */
.blog-topo > * { max-width: 62ch; }
.blog-contagem { color: var(--marca); margin: 0 0 14px; }
.blog-topo h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  margin: 0 0 14px;
}
.blog-topo .lede { margin: 0; font-size: clamp(16px, 1.7vw, 18px); }

/* ----- O selo de barras -------------------------------------- */
.selo { display: block; overflow: visible; }
.selo rect {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0.78);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 26ms);
}
.cartao-post:hover .selo rect,
.cartao-post:focus-visible .selo rect,
.destaque:hover .selo rect,
.destaque:focus-visible .selo rect { transform: scaleY(1); }

/* ----- O mais recente ---------------------------------------- */
.destaque {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr);
  gap: 40px;
  align-items: center;
  padding: 34px 36px;
  margin-bottom: 20px;
  background:
    radial-gradient(520px 260px at 88% 12%, rgba(132, 173, 255, 0.1), rgba(21, 24, 30, 0) 72%),
    var(--surface);
  border: 1px solid var(--borda);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}
.destaque:hover,
.destaque:focus-visible {
  border-color: var(--marca-borda);
  text-decoration: none;
  transform: translateY(-2px);
}
.destaque-rotulo { color: var(--injecao); margin: 0 0 14px; }
.destaque h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.18;
  margin: 0 0 12px;
  color: var(--texto);
}
.destaque-resumo { color: var(--texto-2); margin: 0 0 20px; max-width: 54ch; }
.destaque-pe {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--texto-3);
  margin: 0;
}
.destaque-ler { color: var(--marca); }
.destaque:hover .destaque-ler { color: var(--marca-clara); }
.destaque-selo { display: flex; justify-content: flex-end; }

/* ----- A grade ----------------------------------------------- */
.grade-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cartao-post {
  display: block;
  height: 100%;
  padding: 24px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.cartao-post:hover,
.cartao-post:focus-visible {
  border-color: var(--marca-borda);
  background: var(--surface-alta);
  text-decoration: none;
  transform: translateY(-2px);
}
.cartao-post .selo { margin-bottom: 18px; }
.cartao-data { color: var(--texto-3); margin: 0 0 10px; }
.cartao-post h3 {
  font-size: 19px;
  line-height: 1.32;
  margin: 0 0 10px;
  color: var(--texto);
  text-wrap: pretty;
}
.cartao-resumo {
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.cartao-autor { color: var(--texto-3); margin: 0; }

/* ----- Telefone e tablet -------------------------------------- */
@media (max-width: 900px) {
  .sec-blog { padding: 32px 0 56px; }
  .destaque {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px 24px;
  }
  /* O selo grande vira faixa no topo do cartão: em coluna única ele
     empurraria o texto para baixo da dobra. */
  .destaque-selo { order: -1; justify-content: flex-start; }
  .destaque-selo .selo { height: 56px; }
  .grade-posts { grid-template-columns: 1fr; gap: 14px; }
}

/* O movimento do selo é decoração: quem pediu menos movimento
   recebe o selo parado, na altura cheia. */
@media (prefers-reduced-motion: reduce) {
  .selo rect { transform: none; transition: none; }
  .destaque, .cartao-post { transition: none; }
  .destaque:hover, .cartao-post:hover { transform: none; }
}

/* O mesmo selo da listagem, no alto do post. Serve de continuidade: quem
   clicou num cartão reencontra a marca daquele texto. Aqui ele fica na
   altura cheia e parado — no post não há hover para "carregar". */
.artigo-selo { margin-bottom: 18px; }
.artigo-selo .selo rect { transform: none; transition: none; }

/* A coluna de leitura do post vai para o MEIO da página.
   `.texto` tem 68ch de medida — isso é leitura, e está certo. O que
   estava errado era a posição: ancorada à esquerda, numa tela de
   1900px ela deixa metade da página vazia à direita e o post parece
   cortado. Medida certa, lugar errado.
   Vale só para o post (`.artigo`); privacidade e termos continuam
   como foram aprovados. */
.sec-blog .artigo { margin-inline: auto; }
.artigo-voltar {
  max-width: 68ch;
  margin: 56px auto 0;
}

/* ============================================================
   CTA final — o canal que funciona hoje
   ============================================================
   O verde é do WhatsApp, e é a única cor de fora da paleta em
   todo o site. Entra porque ela não compete com a identidade da
   Erlis: ela diz "canal", não "nós". Num botão que precisa ser
   reconhecido antes de ser lido, o reconhecimento vale mais que
   a coerência cromática — e é UM botão, numa seção, no fim da
   página.
   ============================================================ */

.cta-whats {
  width: 100%;
  height: 60px;
  gap: 12px;
  font-size: 18px;
  background: #25d366;
  color: #06220f;
}
.cta-whats:hover { background: #41e07d; color: #06220f; }
.cta-whats:active { background: #1fb855; }


/* O formulário desce para segundo plano: ele é o caminho alternativo
   enquanto a captura não está ligada, e some por completo quando o
   app.js o substitui pelo recado. */

/* O recado do formulário é a voz mais baixa do bloco. Ele informa quem
   veio procurar o cadastro por e-mail; quem só quer falar já tem o
   botão acima. */

/* Proporções de coluna que estavam CRAVADAS no atributo style do HTML.
   Estilo inline vence media query: no telefone as duas seções ficavam
   lado a lado, espremidas — a de planos e, pior, a do CTA final, que é
   de onde sai o clique no WhatsApp. Agora a quebra de 900px alcança as
   duas. O defeito é anterior ao botão; ficou visível com ele. */
.grade-1-15 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }

@media (max-width: 900px) {
  .grade-1-15,
  .grade-115-1 { grid-template-columns: minmax(0, 1fr); }
  .cta-whats { height: 56px; font-size: 17px; }
}

/* ============================================================
   Demonstração — a seção de fechamento
   ============================================================
   Substitui o bloco de captura por e-mail. A seção vende a
   DEMONSTRAÇÃO, não um número de telefone: por isso os três
   passos ocupam a coluna da esquerda, e o canal aparece só no
   fim, dentro do card.

   O desenho é de hairline, não de sombra: uma régua de 1px
   acima de cada passo, o card um degrau acima do painel
   (`--surface-alta` sobre `--surface`), e nenhum gradiente
   grande. O único volume de cor é o botão.
   ============================================================ */

.demo {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 52px);
}

.demo-grade {
  display: grid;
  /* ~55 / 45, com a coluna de texto pesando mais. */
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  /* Esticado, e não alinhado ao topo: com o card no topo sobrava um vazio
     à direita dos três passos — e vazio ao lado do CTA é justamente o que
     esta seção foi reescrita para não ter. O card vira painel de altura
     cheia, e o conteúdo dele se centra. */
  align-items: stretch;
}

/* ----- Coluna esquerda ---------------------------------------- */
.demo-titulo {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.14;
  margin: 0 0 16px;
}
.demo-lede { margin: 0; max-width: 56ch; }

/* Os três passos. Régua em cima de cada um: a linha é o que separa,
   e ela já é o único ornamento de que a sequência precisa. */
.demo-passos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 36px 0 0;
  padding: 0;
}
.demo-passos li { border-top: 1px solid var(--borda); padding-top: 14px; }
.demo-num {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--marca);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.demo-passos p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-2);
  text-wrap: pretty;
}

/* ----- Card da direita ---------------------------------------- */
.demo-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface-alta);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 26px;
}

.demo-pessoa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
/* 64px para uma imagem de 160px: sobra densidade para tela retina e
   não se amplia nada. O anel de 1px é `box-shadow` por ser o jeito de
   desenhar borda sem comer o círculo — e é 1px, não sombra. */
.demo-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--borda);
}
.demo-card-titulo {
  font-size: 17px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 4px;
  line-height: 1.3;
  /* Ao lado da foto, no telefone, a linha quebrava em "Demonstração da /
     Erlis" e deixava a última palavra sozinha. `balance` reparte as duas
     linhas — e resolve no texto, sem pedir uma segunda quebra de layout:
     este site tem uma só, aos 900px, e isso é decisão registrada. */
  text-wrap: balance;
}
.demo-card-apoio {
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto-2);
  margin: 0;
}

/* A linha de fatos: três dados curtos, separados por ponto médio.
   O separador é gerado, não digitado — assim nenhum item fica com um
   ponto órfão quando a linha quebra no telefone. */
.demo-fatos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 22px;
  padding: 18px 0 0;
  border-top: 1px solid var(--borda);
  color: var(--texto-3);
}
.demo-fatos li { display: flex; align-items: center; gap: 10px; }
.demo-fatos li + li::before { content: "·"; color: var(--borda-forte); }

.demo-cta { width: 100%; height: 56px; gap: 10px; font-size: 16px; }
.demo-nota {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-3);
  margin: 12px 0 0;
}

/* ----- Telefone e tablet -------------------------------------- */
@media (max-width: 900px) {
  .demo { padding: 24px 20px; }
  /* No telefone a altura cheia não faz sentido: cada bloco ocupa o que
     precisa, na ordem conteúdo → card. */
  .demo-grade { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  /* Passos em coluna: a régua sai do topo e vai para a esquerda, que é
     onde uma lista vertical pede separação. */
  .demo-passos { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .demo-passos li {
    border-top: 0;
    border-left: 1px solid var(--borda);
    padding: 0 0 0 14px;
  }
  .demo-num { margin-bottom: 4px; }
  .demo-card { padding: 22px; }
  .demo-foto { width: 56px; height: 56px; }
  /* O rótulo do botão não cabe em uma linha num card de ~245px, e
     encurtá-lo só no telefone criaria dois nomes para a mesma ação.
     Então o botão cresce: altura mínima em vez de fixa, com respiro
     para duas linhas. */
  .demo-cta {
    height: auto;
    min-height: 56px;
    padding: 14px 18px;
    line-height: 1.25;
    text-align: left;
  }
}

/* ============================================================
   Planos — a estrutura em vigência, sem valor
   ============================================================
   A página passa a dizer QUAIS são as linhas e o que cada uma
   inclui; o preço fica para a tabela. Por isso os cartões não
   têm o lugar do número: um card desenhado em volta de um preço
   ausente fica com um buraco no meio, e o buraco vira a coisa
   mais visível da seção.

   O que diferencia um plano do outro aqui é a LISTA — e a lista
   é um `dl`, porque cada linha é rótulo e valor de verdade.
   ============================================================ */

.planos-abre { max-width: 62ch; margin-bottom: 44px; }

.planos-modelo {
  border: 1px solid var(--marca-borda);
  background: var(--marca-veu);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.planos-nao-cobramos {
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-2);
  margin: 0;
}

/* ----- Cada linha de produto (Core, Gestão) ------------------- */
.planos-linha { margin-top: 44px; }
.planos-cabeca { margin-bottom: 20px; }
.planos-cabeca h3 { font-size: 21px; margin: 0 0 4px; }
.planos-cabeca p { font-size: 15px; color: var(--texto-2); margin: 0; }

.planos-escada {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-2);
  margin: 0 0 20px;
  max-width: 76ch;
}
.planos-escada strong { color: var(--texto); font-weight: 600; }

.planos-grade {
  list-style: none;
  /* 6px de folga no topo: o cartao destacado sobe essa altura, e sem a
     folga ele encostaria no texto de cima. */
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.planos-grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.plano {
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 22px;
}
/* O DESTAQUE.
   Primeira versão: só a cor da borda. Sobre `--surface`, numa fileira
   de cartões iguais, a diferença sumia — o selo fazia o trabalho
   sozinho e o olho não tinha onde pousar.
   Agora são quatro sinais somados, nenhum deles berrante: borda da
   marca, véu da marca no fundo, uma régua de 2px no topo e um degrau
   de elevação. É o cartão que a página recomenda; ele pode parecer
   recomendado. */
.plano-destaque {
  position: relative;
  border-color: var(--marca-borda);
  background: linear-gradient(var(--marca-veu), var(--marca-veu)), var(--bg);
  transform: translateY(-6px);
}
/* A régua fica DENTRO da borda arredondada, por isso é um pseudo-elemento
   recortado e não um `border-top` — borda de 2px num lado só desalinha o
   raio do canto. */
.plano-destaque::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--marca);
  border-radius: 12px 12px 0 0;
}
.plano-destaque .plano-nome { color: var(--texto); }
/* Duas classes no seletor, de propósito: `.plano-selo` é declarada DEPOIS
   desta no arquivo, e com a mesma especificidade a última vence — o selo
   sólido ficava com texto claro sobre fundo claro, ilegível. Ancorar em
   `.plano-selo.plano-selo--forte` resolve pela especificidade e não pela
   ordem, que é frágil a qualquer reorganização da folha. */
.plano-selo.plano-selo--forte {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--bg);
}

.plano-nome {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 16px;
}
.plano-selo {
  padding: 3px 9px;
  border: 1px solid var(--marca-borda);
  border-radius: 999px;
  color: var(--marca-clara);
  font-size: 10px;
}

/* ----- A lista de atributos (Core) ---------------------------- */
.plano-itens { margin: 0; }
.plano-itens > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--borda);
}
.plano-itens > div:first-child { border-top: 0; padding-top: 0; }
.plano-itens dt { font-size: 14px; color: var(--texto-2); }
.plano-itens dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  text-align: right;
  white-space: nowrap;
}
/* "incluído" e "—" no lugar de ✓ e ✗: um traço e um tique obrigam o
   leitor a procurar a legenda, e leitor de tela lê símbolo como
   pontuação. A palavra dispensa as duas coisas. */
.plano-sim { color: var(--marca-clara) !important; }
.plano-nao { color: var(--texto-3) !important; font-weight: 400 !important; }
.plano-asterisco { color: var(--texto-3); }

/* ----- A faixa (Gestão) --------------------------------------- */
.plano-faixa-rotulo { color: var(--texto-3); margin: 0 0 6px; }
.plano-faixa {
  font-size: 18px;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
  line-height: 1.3;
}

.planos-nota {
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto-3);
  margin: 16px 0 0;
}
.planos-pe {
  color: var(--texto-2);
  margin: 40px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--borda);
}

/* ----- Telefone e tablet -------------------------------------- */
@media (max-width: 900px) {
  .planos-abre { margin-bottom: 32px; }
  .planos-linha { margin-top: 34px; }
  /* Duas colunas no tablet e UMA no telefone, sem um segundo breakpoint:
     `auto-fit` faz a própria grade decidir. O mínimo é 240px e não um
     valor menor porque o cartão do Core tem rótulo e valor na MESMA
     linha — a 165px "Usuários da equipe" quebrava em três linhas e o
     "ilimitado" encostava na borda. Num telefone de 390px sobram 342px
     de conteúdo (gutter de 24px), e duas colunas de 240 não cabem: ela
     colapsa sozinha. Este site tem UMA quebra de layout, aos 900px, e
     isso é decisão registrada no topo da folha. */
  .planos-grade { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
  /* A grade de QUATRO pede um mínimo maior: com 240px ela ainda cabia em
     três colunas num tablet, e quatro cartões em três colunas deixam o
     último sozinho embaixo — numa escada, o degrau órfão parece outra
     coisa. Com 300px ela vai de quatro direto para duas. */
  .planos-grade-4 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
  .plano { padding: 18px; }
  .plano-itens dt, .plano-itens dd { font-size: 13px; }
}