/* Eficaz — Fiscal Fácil · folha da LANDING pública (`/`).

   A landing é estática de propósito (spec §2.3): HTML + CSS + um módulo ES
   nativo, sem build e sem framework. O Caddy da FF-18 aponta um `root` para
   `landing/` e acabou — não há `dist/` para gerar nem versão para esquecer de
   publicar.

   ⚠️ O bloco `:root` abaixo é ESPELHO de `frontend/src/styles.css`, byte a
   byte, e não uma releitura. Sem build não há como importar o arquivo da SPA, e
   duas paletas que divergissem em silêncio fariam a porta da rua e o produto
   parecerem coisas diferentes. Quem garante que continuam iguais é o CI:
   `scripts/verificar_tokens_landing.py` compara os dois blocos e falha se
   alguém mexer só de um lado. Editar aqui é editar lá — nunca só aqui.

   Fora do bloco espelhado o layout é próprio: a SPA é um painel de trabalho,
   isto aqui é uma vitrine. */

/* >>> TOKENS ESPELHADOS DE frontend/src/styles.css — NÃO EDITAR SÓ AQUI */
:root {
  /* ── Marca ── */
  --dourado: #e1a755;          /* acento único: fio, ativo, botão primário */
  --dourado-claro: #ebbd81;    /* hover do primário */
  --dourado-profundo: #b87c2e; /* dourado com contraste sobre fundo claro (texto) */
  --dourado-fundo: #fdf6ec;    /* lavagem dourada: faixa informativa, focus wash */
  --grafite: #3a3a3a;          /* títulos, barra superior */

  /* ── Superfícies e texto ── */
  --fundo-app: #faf7f2;        /* papel quente */
  --superficie: #ffffff;
  --borda: #e9e2d6;            /* hairline — única borda do app */
  --texto: #2c2c2c;
  --texto-leve: #6b6b6b;

  /* ── Semânticas (estado, nunca decoração) — mesmos valores do v3 ── */
  --verde: #2e7d32;   --verde-fundo: #e8f5e9;
  --amarelo: #f9a825; --amarelo-fundo: #fff8e1;
  --vermelho: #c62828;--vermelho-fundo: #ffebee;
  --azul: #1e4fd4;    --azul-fundo: #e8eefc;
  --neutro-fundo: #f5f4f2;

  /* ── Sotaque do Fiscal Fácil ── */
  --raio: 10px;                /* v3 usa 8px; a porta pública lê mais leve */
  --raio-pilula: 999px;
  --fio: 3px;
  /* Fundo das telas centrais: papel quente com uma lavagem dourada no topo. */
  --lavagem: radial-gradient(90% 55% at 50% 0%, #fbf1e0 0%, var(--fundo-app) 62%);
  --sombra-card: 0 1px 2px rgba(57, 57, 57, 0.06);

  /* ── Tipografia ── */
  --f-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}
/* <<< TOKENS ESPELHADOS */

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

/* ⚠️ Isto NÃO é zelo: sem esta regra a página mente.
   O atributo `hidden` esconde pela folha do navegador, que perde para qualquer
   `display` declarado aqui — e os blocos que nascem escondidos são justamente
   os que têm um (`display: grid` na caixa de preços, `inline-flex` nos botões,
   `inline-block` no selo do teste). Sem o `!important`, a caixa de preços
   apareceria VAZIA antes de a API responder e o selo do trial apareceria em
   branco. Todo o mecanismo de estado da landing depende desta linha. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--f-corpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo-app);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-display); color: var(--grafite); margin: 0; line-height: 1.2; }
p { margin: 0; }
a { color: var(--dourado-profundo); }
img, svg { max-width: 100%; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Foco visível em tudo que recebe teclado: a landing é a primeira coisa que um
   leitor de tela encontra no produto. */
:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Atalho para quem navega por teclado: some até receber foco. */
.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--grafite); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--raio) 0; z-index: 20;
}
.pular:focus { left: 0; }

.limite { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ─────────────────────────────────────────────────────────────────────────
   Marca — Manual §04: fora do produto a descritiva é OBRIGATÓRIA
   ───────────────────────────────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
/* As cores do símbolo saem dos tokens, não de `fill` no atributo: a regra de
   ouro herdada é que nenhum lugar declara cor própria fora do bloco `:root`.
   Manual §05 — sobre papel E sobre grafite, cápsula ouro com letra grafite; por
   isso o rodapé escuro usa exatamente o mesmo símbolo. */
.marca-simbolo { flex: 0 0 auto; }
.marca-simbolo .capsula { fill: var(--dourado); }
.marca-simbolo .letra { fill: var(--grafite); }
.marca-simbolo .conferido { fill: #ffffff; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nome {
  font-family: var(--f-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.4px; color: var(--grafite);
}
/* "fácil" pesa menos que "Fiscal": o contraste de peso é o gesto da marca. */
.marca-nome em { font-style: normal; font-weight: 400; }
.marca-descritiva {
  font-size: 0.66rem; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--texto-leve); font-weight: 500;
}
.sobre-escuro .marca-nome { color: #f3ece1; }
.sobre-escuro .marca-descritiva { color: #b9ada0; }

/* ─────────────────────────────────────────────────────────────────────────
   Topo
   ───────────────────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.topo .limite { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.topo nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.topo nav a.item {
  color: var(--texto-leve); text-decoration: none; font-size: 0.92rem; font-weight: 500;
}
.topo nav a.item:hover { color: var(--grafite); }

/* ─────────────────────────────────────────────────────────────────────────
   Botões
   ───────────────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--raio);
  font-family: var(--f-corpo); font-size: 0.95rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.botao.principal { background: var(--dourado); color: var(--grafite); }
.botao.principal:hover { background: var(--dourado-claro); }
.botao.contorno { background: transparent; color: var(--grafite); border-color: var(--borda); }
.botao.contorno:hover { border-color: var(--dourado); }
.botao.clara { background: #fff; color: var(--grafite); }
.botao.clara:hover { background: #f3ece1; }
.botao.fantasma { background: transparent; color: #f3ece1; border-color: #57534e; }
.botao.fantasma:hover { border-color: var(--dourado); }
.botao.grande { padding: 14px 26px; font-size: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Herói — sobre grafite (Manual §05: cápsula OURO, letra grafite)
   ───────────────────────────────────────────────────────────────────────── */
.heroi {
  background:
    radial-gradient(70% 90% at 78% 8%, rgba(225, 167, 85, 0.22) 0%, transparent 62%),
    var(--grafite);
  color: #ece5da;
  padding: 84px 0 92px;
}
.heroi h1 {
  color: #fff; font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700;
  letter-spacing: -1px; max-width: 16ch;
}
.heroi h1 .destaque { color: var(--dourado); }
.heroi .chamada { margin-top: 20px; max-width: 54ch; font-size: 1.1rem; color: #c9c0b4; }
.heroi-acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Selo com as condições do teste. Nasce `hidden`: o número é do servidor. */
.heroi-selo {
  margin-top: 22px; display: inline-block;
  padding: 7px 14px; border-radius: var(--raio-pilula);
  background: rgba(225, 167, 85, 0.14); border: 1px solid rgba(225, 167, 85, 0.4);
  color: var(--dourado); font-size: 0.85rem;
}
.heroi-notas {
  margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: 0.88rem; color: #a89e91;
}
.heroi-notas li { list-style: none; display: flex; align-items: center; gap: 7px; }
.heroi-notas .marcador { color: var(--dourado); }

/* ─────────────────────────────────────────────────────────────────────────
   Estágio (FF-18) — o que ainda não está no ar

   Os módulos fiscais são os Blocos 3–4 e não existem. Estas três regras são o
   que faz a diferença ser VISÍVEL: o item ainda aparece (é o roadmap, e vende),
   mas com marcador vazado, cor apagada e etiqueta ao lado — nunca no mesmo peso
   do que já funciona. Sumir com o item seria honesto e mudo; deixá-lo igual aos
   outros seria bonito e falso.

   ⚠️ Nada aqui entra no bloco `:root`: ele é espelhado byte a byte com o CSS da
   SPA (scripts/verificar_tokens_landing.py) e mexer nele quebra o CI.
   ───────────────────────────────────────────────────────────────────────── */
.heroi-etapa {
  display: inline-block; margin-bottom: 18px;
  padding: 5px 12px; border-radius: var(--raio-pilula);
  background: rgba(236, 229, 218, 0.1); border: 1px solid rgba(236, 229, 218, 0.28);
  color: #d8cfc2; font-family: var(--f-mono);
  font-size: 0.74rem; letter-spacing: 0.8px; text-transform: uppercase;
}
.heroi-notas li.breve { color: #857c70; }
.heroi-notas li.breve .marcador { color: #857c70; }

/* Etiqueta de item futuro. Cores próprias, não herdadas: ela aparece sobre dois
   fundos muito diferentes e não pode trocar de contraste conforme o vizinho.

   Base = card de passo (fundo claro): o mesmo par dourado de `.passo .numero`,
   para a etiqueta pertencer ao card em vez de pousar sobre ele. */
.tag-breve {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: var(--raio-pilula);
  background: var(--dourado-fundo); color: var(--dourado-profundo);
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.4px; text-transform: lowercase;
  vertical-align: middle; white-space: nowrap;
}

/* No herói o fundo é grafite, e o chip claro da regra acima gritava mais que o
   próprio botão de CTA — a etiqueta diz "ainda não", não pode ser o elemento
   mais luminoso da dobra. Aqui ela vira contorno sobre o escuro.
   ⚠️ `margin-left` zerado de propósito: o `li` é flex e já aplica `gap: 7px`;
   com a margem, o espaço virava 13px só nestes dois itens. Pelo mesmo motivo o
   `display: inline-block` da base é blocificado pelo flex — sem efeito visual,
   já que a linha é uma flex row, mas anotado para não parecer contradição. */
.heroi-notas .tag-breve {
  margin-left: 0;
  background: transparent; color: #a89e91;
  border: 1px solid rgba(236, 229, 218, 0.25);
  font-weight: 500;
}

/* Ressalva dentro de uma resposta do FAQ que descreve o que ainda vai entrar. */
.aviso-breve {
  margin-bottom: 10px; padding: 10px 12px;
  border-left: 3px solid var(--dourado); border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--dourado-fundo); color: var(--dourado-profundo);
  font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Seções
   ───────────────────────────────────────────────────────────────────────── */
.secao { padding: 76px 0; }
.secao.alternada { background: var(--superficie); border-block: 1px solid var(--borda); }
.secao-titulo { max-width: 62ch; margin-bottom: 36px; }
.secao-titulo .etiqueta {
  display: block; font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--dourado-profundo); font-weight: 600; margin-bottom: 10px;
}
.secao-titulo h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; }
.secao-titulo p { margin-top: 12px; color: var(--texto-leve); }

/* Como funciona — 3 passos */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.passo {
  background: var(--fundo-app); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 26px 24px;
}
.passo .numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--raio-pilula);
  background: var(--dourado-fundo); color: var(--dourado-profundo);
  font-family: var(--f-mono); font-weight: 500; font-size: 0.95rem;
  margin-bottom: 16px;
}
.passo h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.passo p { color: var(--texto-leve); font-size: 0.95rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Preços — a calculadora
   ───────────────────────────────────────────────────────────────────────── */
.precos-caixa {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  background: var(--superficie); border: 1px solid var(--borda);
  border-top: var(--fio) solid var(--dourado);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-card);
}
.precos-controle { padding: 30px; }
.precos-controle > label {
  display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--texto-leve); margin-bottom: 14px;
}
.controle-linha { display: flex; align-items: center; gap: 14px; }
.controle-linha input[type="number"] {
  width: 96px; padding: 10px 12px; font-family: var(--f-mono); font-size: 1.05rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto);
}
.controle-linha input[type="range"] { flex: 1 1 auto; accent-color: var(--dourado); }
.precos-escala {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--f-mono); font-size: 0.74rem; color: var(--texto-leve);
}
.precos-ancoras { margin-top: 26px; border-top: 1px solid var(--borda); padding-top: 18px; }
.precos-ancoras h3 {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--texto-leve); margin-bottom: 10px;
}
.precos-ancoras table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.precos-ancoras td { padding: 7px 0; }
.precos-ancoras td.valor { text-align: right; font-family: var(--f-mono); }
.precos-ancoras tr + tr td { border-top: 1px solid var(--borda); }

.precos-resultado {
  background: var(--dourado-fundo); border-left: 1px solid var(--borda);
  padding: 30px; display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.precos-resultado .rotulo {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--dourado-profundo);
}
.precos-resultado .valor {
  font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 700; color: var(--grafite); letter-spacing: -1px;
}
.precos-resultado .valor .ciclo {
  font-family: var(--f-corpo); font-size: 1rem; font-weight: 400; color: var(--texto-leve);
}
.precos-resultado .detalhe { font-size: 0.92rem; color: var(--texto-leve); }
.precos-resultado .botao { margin-top: 10px; }
.precos-resultado .contatos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Estados alternativos (acima do teto da vitrine, catálogo fora do ar). Os dois
   existem no HTML e são alternados por `hidden`: o JS não monta markup de erro,
   só decide qual bloco aparece. */
.aviso {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 24px; background: var(--superficie);
}
.aviso h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.aviso p { color: var(--texto-leve); font-size: 0.95rem; }
.aviso p + p { margin-top: 8px; }
.aviso .acoes { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.aviso.atencao { background: var(--amarelo-fundo); border-color: #f0e0b0; }
.precos-nota { margin-top: 14px; font-size: 0.88rem; color: var(--texto-leve); }

/* ─────────────────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────────────────── */
.faq { max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 0;
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  color: var(--grafite); display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--f-mono);
  font-size: 1.25rem; color: var(--dourado-profundo); font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq .resposta { padding: 0 0 20px; color: var(--texto-leve); }
.faq .resposta p + p { margin-top: 10px; }

/* ─────────────────────────────────────────────────────────────────────────
   Chamada final e rodapé
   ───────────────────────────────────────────────────────────────────────── */
.fecho { background: var(--grafite); color: #ece5da; padding: 66px 0; text-align: center; }
.fecho h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; }
.fecho p { margin-top: 12px; color: #b9ada0; }
.fecho .acoes { margin-top: 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.rodape { background: #2f2f2f; color: #b9ada0; padding: 44px 0 32px; font-size: 0.9rem; }
.rodape .topo-rodape { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.rodape a { color: #ece5da; text-decoration: none; }
.rodape a:hover { color: var(--dourado); text-decoration: underline; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; }
.rodape-fim {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid #454545;
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; color: #8d8479;
}

/* ─────────────────────────────────────────────────────────────────────────
   Páginas legais (Termos, Privacidade)
   ───────────────────────────────────────────────────────────────────────── */
.legal { max-width: 74ch; margin: 0 auto; padding: 52px 24px 80px; }
.legal .volta { display: inline-block; margin-bottom: 26px; font-size: 0.9rem; }
.legal h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; }
.legal .vigencia { margin-top: 10px; color: var(--texto-leve); font-size: 0.9rem; }
.legal h2 {
  font-size: 1.12rem; font-weight: 600; margin-top: 38px; padding-top: 20px;
  border-top: 1px solid var(--borda);
}
.legal h3 { font-size: 1rem; font-weight: 600; margin-top: 22px; }
.legal p, .legal li { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal .identificacao {
  margin-top: 20px; background: var(--superficie); border: 1px solid var(--borda);
  border-left: var(--fio) solid var(--dourado);
  border-radius: var(--raio); padding: 18px 20px;
}
.legal .identificacao dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.legal .identificacao dt { color: var(--texto-leve); font-size: 0.86rem; }
.legal .identificacao dd { margin: 0; }
.legal .destaque-aviso {
  margin-top: 20px; background: var(--dourado-fundo);
  border: 1px solid #efdcc0; border-radius: var(--raio); padding: 16px 18px;
}
.legal .destaque-aviso p:first-child { margin-top: 0; }
/* ⚠️ Tabela de três colunas não encolhe abaixo do conteúdo mínimo das células:
   num celular de 375px ela empurra a PÁGINA inteira para o lado, e o texto
   corrido passa a exigir rolagem horizontal para ser lido. Quem rola é o
   invólucro, nunca o corpo do documento. */
.legal .tabela-rolante { overflow-x: auto; margin-top: 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.legal .tabela-rolante table { min-width: 30rem; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border: 1px solid var(--borda); vertical-align: top; }
.legal th { background: var(--neutro-fundo); font-weight: 600; }
.legal td p:first-child, .legal th p:first-child { margin-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Telas estreitas — legível e sem rolagem horizontal (roteiro do card, item 5)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .passos { grid-template-columns: 1fr; }
  .precos-caixa { grid-template-columns: 1fr; }
  .precos-resultado { border-left: none; border-top: 1px solid var(--borda); }
}
@media (max-width: 680px) {
  .limite { padding: 0 18px; }
  .topo .limite { flex-wrap: wrap; gap: 10px 16px; padding-block: 12px; }
  .topo nav { margin-left: 0; width: 100%; gap: 16px; justify-content: space-between; }
  /* Âncoras internas viram ruído quando a navegação quebra em duas linhas; os
     dois botões de ação continuam. */
  .topo nav a.item { display: none; }
  .heroi { padding: 56px 0 62px; }
  .secao, .fecho { padding: 54px 0; }
  .precos-controle, .precos-resultado { padding: 24px 20px; }
  .heroi-acoes .botao, .fecho .acoes .botao { flex: 1 1 100%; }
  .controle-linha { flex-wrap: wrap; }
  .controle-linha input[type="range"] { flex-basis: 100%; }
  .rodape .topo-rodape { flex-direction: column; }
  .legal .identificacao dl { grid-template-columns: 1fr; gap: 2px; }
  .legal .identificacao dt { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}