/* ============================================================================
   A BASE DO SITE — o que vale em todas as páginas
   ============================================================================
   O SÍMBOLO É UM INSTRUMENTO, E O SITE É FEITO DELE
   A marca do Cotejo é um C atravessado por um EIXO com traços de medição e um
   PONTO lima. Não é um enfeite: é a gramática do site inteiro.

     o eixo com traços  → o campo que ondula no fundo do hero (canvas), a
                          linha do tempo 2026→2033 que avança com a rolagem,
                          a barra de progresso no topo da página
     o ponto lima       → o cursor que percorre o eixo, a pulsação de status,
                          o botão de ação
     o C                → o arco que se desenha atrás do hero e do fecho

   ESCURO COMO O PRODUTO
   O aplicativo é petróleo escuro com números claros. O site era papel creme
   e parecia outra empresa. Agora é o mesmo material — petróleo em camadas,
   painéis de vidro, brilho teal — e o contador que sai do site e entra no
   produto não sente a porta.

   Duas regras que não se negociam:
     1. impacto NUNCA é dito só por cor — sempre com seta e palavra junto
     2. movimento serve o dado: número conta, barra cresce, ano avança.
        Nada se mexe por se mexer, e quem pediu menos movimento no sistema
        não vê nenhum (responsivo.css).

   A ordem no <head>, montada por site/construir.mjs:
     1. esta folha  2. o <style> da prancha  3. responsivo.css
   ============================================================================ */

:root {
  --petroleo-0: #04161a;
  --petroleo: #072326;
  --petroleo-2: #0b2f34;
  --petroleo-3: #12404a;
  --mineral: #18635f;
  --mineral-claro: #2e9b93;
  --mineral-luz: #5ed3c8;
  --sinal: #d2e14e;
  --sinal-forte: #e6f26c;

  --papel: #ffffff;
  --papel-2: #f0f5f3;
  --tinta: #072326;
  --tinta-2: #4a5f5c;
  --regua: #d3dedb;

  --branco: #eaf2f0;
  --branco-2: #9fb4b1;
  --branco-3: #5f7875;
  --vidro: rgba(255, 255, 255, 0.04);
  --vidro-2: rgba(255, 255, 255, 0.07);
  --vidro-borda: rgba(255, 255, 255, 0.09);
  --vidro-borda-forte: rgba(255, 255, 255, 0.16);
  --linha-escura: rgba(255, 255, 255, 0.08);

  --sobe: #a03422;
  --desce: #15803d;
  --sobe-claro: #f39a86;
  --desce-claro: #7ad9a4;

  --f-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --raio: 8px;
  --raio-painel: 18px;
  --folha: 1200px;
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--petroleo-0);
  color: var(--branco);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--sinal); color: var(--tinta); }
img, svg, video, canvas { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

a { color: var(--mineral-luz); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #ffffff; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sinal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- tipografia ---------- */
h1, h2, h3, .titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: #ffffff;
}
h1 { font-size: clamp(42px, 6vw, 82px); font-weight: 800; font-variation-settings: "wdth" 108; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(32px, 3.8vw, 52px); font-variation-settings: "wdth" 105; letter-spacing: -0.03em; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.012em; }

/* A frase em gradiente: uma por página, no lugar que mais importa. */
.luz {
  background: linear-gradient(92deg, #ffffff 10%, var(--mineral-luz) 60%, var(--sinal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { font-size: 20px; line-height: 1.5; color: var(--branco-2); text-wrap: pretty; }
.lead b { color: #ffffff; font-weight: 600; }
.texto-2 { color: var(--branco-2); }
.miudo { font-size: 15px; color: var(--branco-2); line-height: 1.5; }

.num {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Impacto: cor + seta + palavra, sempre juntos. */
.sobe { color: var(--sobe-claro); }
.desce { color: var(--desce-claro); }
.igual { color: var(--branco-2); }

/* ---------- a folha e as faixas ---------- */
.faixa { width: 100%; position: relative; }
.folha { max-width: var(--folha); margin: 0 auto; padding: 0 32px; position: relative; }
.secao { padding: 128px 0; }

/* A faixa clara: papel, para o momento de decidir (planos, perguntas). */
.clara { background: var(--papel); color: var(--tinta); }
.clara h1, .clara h2, .clara h3 { color: var(--tinta); }
.clara .lead, .clara .texto-2, .clara .miudo { color: var(--tinta-2); }
.clara a { color: var(--mineral); }
.clara a:hover { color: var(--tinta); }
.clara .sobe { color: var(--sobe); }
.clara .desce { color: var(--desce); }
.clara .igual { color: var(--tinta-2); }
.clara ::selection { background: var(--sinal); color: var(--tinta); }

/* A faixa funda: um degrau mais escuro para uma seção respirar diferente. */
.funda { background: linear-gradient(180deg, var(--petroleo-0), #020f12 60%, var(--petroleo-0)); }

.cabeca-secao { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; margin-bottom: 64px; }
.cabeca-secao .lead { margin: 0; }

/* ---------- a malha: o fundo de tecnologia, sem gritar ---------- */
.malha::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* O brilho: uma fonte de luz teal atrás do que importa. */
.brilho { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: 0.55; }
.brilho.teal { background: radial-gradient(circle, rgba(46, 155, 147, 0.55), transparent 65%); }
.brilho.lima { background: radial-gradient(circle, rgba(210, 225, 78, 0.28), transparent 65%); }

/* ---------- vidro ---------- */
.vidro {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-painel);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.vidro.iluminado { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), 0 0 80px -30px rgba(46, 155, 147, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

/* O holofote: a luz segue o mouse sobre o painel. JS escreve --mx/--my. */
.holofote { position: relative; overflow: hidden; }
.holofote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 211, 200, 0.13), transparent 60%);
  opacity: 0; transition: opacity 400ms var(--suave);
}
.holofote:hover::before { opacity: 1; }
.holofote > * { position: relative; z-index: 1; }

/* ---------- a pílula de status ---------- */
.pilula {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  border: 1px solid var(--vidro-borda-forte); background: var(--vidro);
  font-family: var(--f-titulo); font-size: 13.5px; font-weight: 600; color: var(--branco-2);
  letter-spacing: 0;
}
.pilula i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sinal); flex: none;
  box-shadow: 0 0 0 0 rgba(210, 225, 78, 0.55);
  animation: pulsar 2.4s var(--suave) infinite;
}
@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(210, 225, 78, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(210, 225, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 225, 78, 0); }
}

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--sinal); color: var(--tinta);
  font-family: var(--f-titulo); font-weight: 700; font-size: 15.5px; letter-spacing: -0.005em;
  padding: 15px 24px; border: 1px solid transparent; border-radius: var(--raio);
  text-decoration: none; line-height: 1; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(210, 225, 78, 0.55);
  transition: transform 160ms var(--suave), box-shadow 160ms var(--suave), background-color 160ms var(--suave);
}
.botao:hover { background: var(--sinal-forte); color: var(--tinta); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(210, 225, 78, 0.7); }
.botao:active { transform: translateY(0); }
.botao.fantasma { background: transparent; color: #ffffff; border-color: var(--vidro-borda-forte); box-shadow: none; }
.botao.fantasma:hover { background: var(--vidro-2); color: #ffffff; box-shadow: none; }
.clara .botao.fantasma { color: var(--tinta); border-color: var(--tinta); }
.clara .botao.fantasma:hover { background: var(--tinta); color: #ffffff; }
.botao.miudo { font-size: 14px; padding: 11px 16px; }
.botao .seta { transition: transform 200ms var(--suave); }
.botao:hover .seta { transform: translateX(3px); }

/* ---------- topo ---------- */
.progresso {
  position: fixed; top: 0; left: 0; height: 2px; width: var(--p, 0%); z-index: 60;
  background: var(--sinal); box-shadow: 0 0 12px rgba(210, 225, 78, 0.8);
  transition: width 120ms linear;
}
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 22, 26, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--suave), background-color 300ms var(--suave);
}
.topo.rolou { border-bottom-color: var(--vidro-borda); background: rgba(4, 22, 26, 0.78); }
.topo-linha { display: flex; align-items: center; gap: 36px; height: 76px; transition: height 300ms var(--suave); }
.topo.rolou .topo-linha { height: 64px; }
.topo-linha .marca img { height: 30px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; margin-left: auto; font-family: var(--f-titulo); font-size: 15px; font-weight: 500; }
.menu a { color: var(--branco-2); text-decoration: none; position: relative; padding: 4px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--sinal); transition: right 220ms var(--suave); }
.menu a:hover { color: #ffffff; }
.menu a:hover::after { right: 0; }
.menu .entrar { color: #ffffff; margin-left: 8px; }
.menu .botao::after { display: none; }

/* ---------- tabela ---------- */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
thead th {
  font-family: var(--f-titulo); font-size: 13.5px; font-weight: 600; color: var(--branco-3);
  text-align: left; padding: 0 16px 14px; border-bottom: 1px solid var(--vidro-borda-forte);
  white-space: nowrap;
}
thead th.num, tbody td.num { text-align: right; }
tbody td { padding: 22px 16px; border-bottom: 1px solid var(--linha-escura); vertical-align: top; }
thead th:first-child, tbody td:first-child { padding-left: 0; }
thead th:last-child, tbody td:last-child { padding-right: 0; }
.clara thead th { color: var(--tinta-2); border-bottom-color: var(--tinta); }
.clara tbody td { border-bottom-color: var(--regua); }

/* ---------- revelar ao entrar ---------- */
/* Só com JS ligado: sem ele, tudo nasce visível. movimento.js põe `js` no html. */
html.js [data-revela] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--suave), transform 900ms var(--suave);
  transition-delay: var(--atraso, 0ms);
}
html.js [data-revela].visto { opacity: 1; transform: none; }

/* ---------- rodapé ---------- */
.rodape { background: #020f12; color: var(--branco-2); padding: 72px 0 40px; font-size: 15px; border-top: 1px solid var(--linha-escura); }
.rodape-linha { display: flex; gap: 64px; align-items: flex-start; flex-wrap: wrap; }
.rodape-linha .marca img { height: 26px; width: auto; }
.rodape-col { display: flex; flex-direction: column; gap: 8px; }
.rodape-col b { color: #ffffff; font-family: var(--f-titulo); font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.rodape-col a { color: var(--branco-2); text-decoration: none; }
.rodape-col a:hover { color: #ffffff; text-decoration: underline; }
.rodape-fim { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linha-escura); line-height: 1.7; font-size: 14px; color: var(--branco-3); }