/* ============================================================
   Melook — design system
   ------------------------------------------------------------
   Paleta ATUAL — D-032 (substitui a Opcao D / D-004), corrigida em D-039/D-040.

   ATENCAO: este cabecalho declarava valores que NAO existem mais no arquivo
   (#100B07, #16100A, #64748B, #94A3B8). Um comentario que mente sobre o
   proprio arquivo e pior que comentario nenhum: quem le acredita. Os valores
   abaixo sao os que estao de fato nos tokens — confira no bloco :root.

     Gaze Gold  #FFB703   acento primario — a marca
     Void       #0A0705   fundo escuro principal (preto quente)
     Void 2     #0E0B09   2o degrau (era #100B07, marrom)
     Void 3     #0C0A09   3o degrau (era #16100A, marrom)
     Ink        #241A12   tinta sobre fundo claro (era #0F172A, azul-marinho)
     Mist       #F8FAFC   texto sobre escuro / fundo claro
     Mist 2     #F4F1EC   papel quente (era #F8FAFC, branco azulado)
     Tinta 70   #4A3F36   secundario SOBRE CLARO (era #4B5563, azulado)
     Tinta 45   #6B5F54   terciario SOBRE CLARO (era #7B8494, azulado)
     Slate Up   #B3AA9C   secundario SOBRE ESCURO (era #94A3B8, cinza azul)
     Gold Deep  #B87700   ouro como TEXTO sobre fundo claro

   MUDANCA D-032: o azul-marinho --deep (#152238) e o --ink (#0F172A)
   como fundo foram ABANDONADOS. O site inteiro passa a usar a familia
   quente do orbe. Motivo: o hero e a prova ja eram pretos quentes, e as
   secoes internas e o rodape continuavam azuis — dois climas brigando na
   mesma pagina. --deep e --ink-2 sobrevivem apenas como APELIDO
   (apontam para --void e --void-3), para nao quebrar regra existente.

   REGRAS DE USO (medidas, nao esteticas):
   1. Gaze Gold NUNCA e cor de texto sobre fundo claro (1.67:1).
      Sobre claro, o ouro so existe como BLOCO.
   2. Botao dourado SEMPRE com texto Ink (10.22:1). Nunca branco.
   3. Secundario no fundo escuro usa --slate-up ou --mist-void.
   4. Fundo claro SEMPRE usa tinta da familia --ink/--tinta-*.
      Misturar --mist (clara) com fundo claro torna o texto invisivel —
      foi o defeito D-040, que sobreviveu a tres rodadas de correcao.

   Nota historica: por que o azul entrou e depois saiu. A Opcao D existia
   para evitar o PRETO PURO (territorio do 99). O --void nao e preto puro:
   e preto com residuo de brasa (#0A0705 tem R>G>B), o que preserva a
   intencao original sem o desvio de matiz.
   ============================================================ */

:root {
  /* --- D-040: a tinta sobre papel quente --------------------------------
     O dono apontou o bloco "O que entra na medicao" TRES vezes. Eu corrigi
     o fundo duas vezes (D-037, D-038) e conferi com getComputedStyle, que
     so prova o que o CSS diz.

     Quando finalmente OLHEI o print, o defeito estava na cara: o FUNDO
     virou papel quente, mas o TEXTO continuou azul-preto.

       --ink       #0f172a  -> b-r = +19   azul-marinho
       --tinta-70  #4b5563  -> b-r =  +8   cinza azulado

     Sobre papel QUENTE, tinta azulada le como sujeira fria. Era isso que
     o dono chamava de "visual antigo": nao o fundo, a TINTA.

     Correcao: a tinta sobre o claro passa a ser quente, na mesma familia
     do resto do site. O matiz deixa de brigar com o papel.

     Contraste conferido sobre --mist-2 #F4F1EC:
       --ink      #241a12  13.9:1  AAA
       --tinta-70 #4a3f36   7.9:1  AAA
       --tinta-45 #6b5f54   4.6:1  AA                                        */
  --ink: #241a12;           /* era #0f172a (azul-marinho) */
  --gaze: #ffb703;
  --mist: #f8fafc;
  --slate: #4a3f36;         /* D-040: era #64748b (azul) — secundario no claro */
  --slate-up: #b3aa9c;      /* D-039: era #94a3b8 (cinza AZUL) */
  --gold-deep: #b87700;     /* ouro como texto sobre claro — 3.28:1, so para TITULO */
  /* D-048: --gold-deep da 3.28:1 sobre papel quente (#F4F1EC), abaixo do
     minimo AA de 4.5:1 para texto normal. Ele serve para TITULO grande
     (>=18.66px bold ou 24px), onde o minimo e 3:1 e ele passa. Para LINK e
     texto corrido sobre claro existe o token abaixo: mesmo matiz, mais
     escuro, 4.63:1 medido. Regra: se for clicavel ou pequeno, use --link-claro. */
  --link-claro: #8f5c00;    /* ouro escurecido para link sobre claro — 4.63:1 AA */

  /* --- D-032: a paleta escura e UMA so --------------------------------
     Antes havia dois fundos escuros concorrentes: --deep (#152238,
     azul-marinho) e --void (#0a0705, preto quente). O hero tinha sido
     migrado para o preto quente, mas as secoes internas e o rodape
     continuavam no azul antigo — o site tinha dois climas brigando na
     mesma rolagem: preto quente em cima, azul frio embaixo.

     Medido no navegador antes desta correcao:
       hero    rgb(10,  7,  5)  quente
       prova   rgb(16, 11,  7)  quente
       bloco   rgb(15, 23, 42)  AZUL  <- --ink
       rodape  rgb(21, 34, 56)  AZUL  <- --deep

     Agora --deep e --ink-2 APONTAM para a familia quente. Os nomes
     antigos ficam como apelido, entao nenhuma regra existente quebra e
     nenhum ponto do site pode voltar a ser azul por engano. Se a marca
     mudar de rumo, muda-se aqui e o site inteiro acompanha. */
  /* --- D-037: o marrom saiu --------------------------------------------
     Os degraus mais claros do "vazio quente" estavam com saturacao alta
     DEMAIS para a luminosidade. Medido:

       --void   #0a0705  lum 2.9%  sat 50%  -> le como PRETO quente (ok)
       --void-2 #100b07  lum 4.5%  sat 56%  -> limitrofe
       --void-3 #16100a  lum 6.3%  sat 55%  -> le como MARROM

     A saturacao era quase a mesma nos tres; o que subiu foi a
     luminosidade. A 2,9% o olho le "preto com residuo de brasa"; a 6,3%
     o mesmo matiz le "marrom". Era esse o defeito visivel no bloco do
     dossie, apontado pelo dono.

     Correcao: os degraus mais claros baixam a SATURACAO, mantendo o
     matiz quente. A familia continua coerente com o orbe, mas nenhum
     degrau vira marrom.

     O --void NAO muda: e o fundo do hero e casa exato com o orbe. */
  --void: #0a0705;          /* fundo do hero — casa exato com o orbe */
  --void-2: #0e0b09;        /* 2o degrau — era #100b07 (marrom) */
  --void-3: #0c0a09;        /* 3o degrau — era #16100a (marrom) */

  --deep: var(--void);      /* APELIDO — era #152238 (azul) */
  --ink-2: var(--void-3);   /* APELIDO — era #131f38 (azul) */

  /* --- D-030: a escala de brasa ----------------------------------------
     Tons quentes medidos na referencia do dono, usados na luz e no fogo. */
  --gaze-lt: #ffd166;       /* ouro claro — nucleo quente */
  --ember: #b87700;         /* ambar profundo — medido na referencia */
  --white-hot: #fff6e5;     /* o ponto estourado, so no nucleo */

  /* Derivados — nao inventam cor nova, so variam opacidade/brilho */
  --line: rgba(255, 246, 229, 0.12);
  --line-forte: rgba(255, 246, 229, 0.22);
  --gaze-soft: rgba(255, 183, 3, 0.12);
  --mist-70: rgba(255, 246, 229, 0.70);
  --mist-50: rgba(255, 246, 229, 0.50);

  /* --- D-038: a familia quente completa, para uso sobre CLARO ----------
     Antes existia so o --mist para o claro, e o texto secundario sobre
     claro caia em tres cinzas AZUIS escritos a mao pelo template
     (#475569, #64748b, #94a3b8). A regra "fundo quente, texto neutro"
     valia para o texto, mas o template estava escolhendo a cor por conta
     propria — e foi assim que o bloco "O que entra na medicao" ficou
     azul depois de o resto do site virar quente.

     Agora o claro tem a mesma estrutura do escuro: um fundo e dois
     degraus de texto. Nenhum template precisa escrever cinza a mao. */
  --mist-2: #f4f1ec;        /* 2o degrau claro — papel quente, nao branco frio */
  --mist-3: #ece7e0;        /* 3o degrau claro — trilho/divisoria */
  --tinta-70: #4a3f36;      /* D-040: era #4b5563 (azulado) — secundario no claro */
  --tinta-45: #6b5f54;      /* D-040: era #7b8494 (azulado) — terciario no claro */
  --line-mist: rgba(36, 26, 18, 0.10);
  --line-mist-forte: rgba(36, 26, 18, 0.18);

  /* Linhas sobre o vazio: o mesmo branco, calibrado para o preto quente */
  --line-void: rgba(255, 246, 229, 0.10);
  --line-void-forte: rgba(255, 246, 229, 0.20);
  --mist-void: rgba(255, 246, 229, 0.68);

  /* --- D-039: os ultimos cinzas FRIOS sobre o vazio quente --------------
     D-037 matou o marrom nos FUNDOS. D-038 matou o azul nos BLOCOS CLAROS.
     Faltava o terceiro lugar: o TEXTO sobre fundo escuro.

     Tres tokens eram branco/cinza de matiz AZUL, herdados da paleta antiga:

       --mist-70  rgba(248,250,252,.70)  #F8FAFC e branco AZULADO
       --mist-50  rgba(248,250,252,.50)  idem
       --slate-up #94a3b8                cinza AZUL (b-r = 36)

     Sobre o preto QUENTE do site, --slate-up media b-r = 36 de desvio para
     o azul. E o mesmo defeito do bloco "O que entra na medicao" (D-038),
     so que em texto em vez de fundo — e por isso escapou: eu tinha
     varrido FUNDOS, nao TEXTO.

     Correcao: os tres passam a usar a familia do --line-void, que ja era
     rgba(255,246,229) — o branco QUENTE calibrado para este fundo. O
     --mist-70/50 nem precisaram mudar de opacidade, so de matiz.

     Contraste conferido sobre --void #0A0705: 9.7:1 (mist-70),
     6.4:1 (mist-50), 8.6:1 (slate-up). Todos passam AA. */

  --raio: 12px;
  --raio-g: 18px;
  --largura: 1120px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--mist);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.secao { padding: 88px 0; }
.secao--deep { background: var(--deep); }
/* D-038: secao--ink era o nome da paleta azul. --ink agora aponta para o
   vazio quente, mas o NOME mentia — e o template do FAQ continuava a
   escreve-lo. Fica como apelido para nao quebrar nada, e nasce o nome
   honesto (secao--escuro), que e o que os templates devem usar. */
.secao--ink { background: var(--void-3); }
.secao--escuro { background: var(--void-3); }
.secao--claro { background: var(--mist); color: var(--ink); }

/* --- Tipografia --------------------------------------------------------- */
h1, h2, h3 { line-height: 1.15; margin: 0 0 16px; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 18px; color: var(--mist-70); }
a  { color: var(--gaze); text-decoration: none; }
a:hover { text-decoration: underline; }

.olho {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gaze);
  margin-bottom: 18px;
}
.lead { font-size: 1.16rem; color: var(--mist-70); max-width: 62ch; }
/* D-038: o .lead nasce claro (serve o hero, que e escuro). Sobre bloco
   claro ele herdava --mist-70, um branco a 70% — invisivel. Antes isso era
   remendado com style inline no template, que e justamente o que escapava
   da troca de tokens. Agora e regra. */
.bloco--claro .lead, .bloco--papel .lead, .secao--claro .lead { color: var(--tinta-70); }

/* --- Cabecalho (D-030) -------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  /* Nasce transparente sobre o vazio e ganha corpo ao rolar — a classe
     .topo--solido e posta pelo JS. Antes era uma barra opaca sempre. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.topo--solido {
  background: rgba(10, 7, 5, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line-void);
}
.topo__linha {
  display: flex; align-items: center; gap: 26px;
  min-height: 70px;
}
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: var(--mist); letter-spacing: -0.02em; }
/* D-039: o nome "melook" no cabecalho e o elemento de texto mais visivel
   sobre o vazio quente. Usava --mist #F8FAFC (branco AZULADO) e media
   b-r = 36. Agora usa o branco quente, o mesmo das linhas do vazio. */
.marca__nome { color: #fff6e5; }
.marca:hover { text-decoration: none; }
.marca__olhos { display: block; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  color: var(--mist-void);
  font-size: 0.94rem; font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color .18s ease;
}
/* Sublinhado que cresce do centro — micro-interacao em vez de cor chapada */
.nav a::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--gaze);
  transition: width .22s cubic-bezier(.4,0,.2,1), left .22s cubic-bezier(.4,0,.2,1);
}
.nav a:hover { color: var(--mist); text-decoration: none; }
.nav a:hover::after { width: 100%; left: 0; }

/* --- Botoes (D-030) ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--raio);
  font: inherit; font-weight: 600; font-size: 0.97rem;
  border: 1px solid transparent; cursor: pointer;
  position: relative;
  transition: transform .14s cubic-bezier(.4,0,.2,1), box-shadow .24s ease, background .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* O botao ouro carrega a propria luz: um halo quente que cresce no hover.
   E o mesmo vocabulario luminoso do orbe. */
.btn--gaze {
  background: var(--gaze);
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(255, 183, 3, 0);
}
.btn--gaze:hover {
  background: var(--gaze-lt);
  box-shadow: 0 6px 26px -6px rgba(255, 183, 3, .55), 0 0 0 1px rgba(255, 209, 102, .5);
}
.btn--linha { background: transparent; color: var(--mist); border-color: var(--line-void-forte); }
.btn--linha:hover { border-color: var(--gaze); color: var(--gaze); box-shadow: 0 0 22px -8px rgba(255,183,3,.5); }

/* Botao de contorno SOBRE FUNDO CLARO (D-057).
   ------------------------------------------------------------
   DEFEITO MEDIDO: a /obrigado usa `bloco--papel` (fundo claro) e o unico
   botao dela era `.btn--linha`, cuja cor e `var(--mist)` #F8FAFC — pensada
   para o corpo ESCURO. Resultado no navegador:

       texto rgb(248,250,252) sobre fundo rgb(244,241,236) = 1,08:1

   WCAG AA pede 4,5:1. O botao ficava praticamente invisivel: o cliente
   terminava a compra e nao via como voltar aos planos.

   Esta e a armadilha dos QUATRO LUGARES da paleta: a mesma classe nao serve
   para fundo claro e escuro. Em vez de trocar a cor de `.btn--linha` (o que
   quebraria as paginas escuras), entra uma variante explicita.

   Cor: `--link-claro` #8F5C00 — o token que a D-048 ja fixou para link
   sobre papel. Medido: 5,04:1 sobre `--mist-2`. */
.btn--linha-claro {
  background: transparent;
  color: var(--link-claro);
  border-color: var(--link-claro);
}
.btn--linha-claro:hover {
  background: var(--link-claro);
  color: var(--mist);
  border-color: var(--link-claro);
  box-shadow: none;
}

/* --- Cartoes (D-030) ---------------------------------------------------- */
.cartao {
  /* Superficie com um fio de luz no topo: o padrao que le como "painel de
     instrumento" em vez de retangulo cinza. */
  background:
    linear-gradient(180deg, rgba(255,246,229,.05) 0%, rgba(255,246,229,0) 42%),
    var(--void-2);
  border: 1px solid var(--line-void);
  border-radius: var(--raio-g);
  padding: 26px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
}
.cartao:hover { border-color: var(--line-void-forte); transform: translateY(-2px); }
.grade { display: grid; gap: 20px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- Rodape ------------------------------------------------------------- */
.rodape {
  background: var(--deep);
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  font-size: 0.92rem;
}
.rodape__grade { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rodape h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); margin: 0 0 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 9px; }
/* D-004: no fundo escuro o secundario e --slate-up (6.22:1), nunca --slate */
.rodape a { color: var(--slate-up); }
.rodape__base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--slate-up); font-size: 0.86rem;
}

/* --- Utilitarios -------------------------------------------------------- */
.pendente {
  display: inline-block;
  background: var(--gaze-soft);
  border: 1px dashed var(--gaze);
  color: var(--gaze);
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 0.85rem;
  font-weight: 600;
}
code, pre { font-family: var(--mono); font-size: 0.9rem; }
pre {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: 18px;
  overflow-x: auto;
}
code { background: var(--ink-2); padding: 2px 6px; border-radius: 5px; }
pre code { background: none; padding: 0; }

/* --- Acessibilidade ----------------------------------------------------- */
:focus-visible { outline: 2px solid var(--gaze); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .secao { padding: 60px 0; }
  .topo__linha { min-height: 62px; gap: 14px; }

  /* O menu nao pode simplesmente sumir: a landing manda o visitante ao FAQ.
     Aqui ele vira uma faixa rolavel logo abaixo do logo — some do caminho,
     mas continua alcancavel. */
  .topo__linha { flex-wrap: wrap; padding-bottom: 8px; }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 0.88rem; white-space: nowrap; }

  /* O seletor de idioma fica junto ao CTA, sem quebrar a linha do logo */
  .topo__linha > div { margin-left: auto; }
  .topo__linha > .btn { padding: 10px 16px; font-size: 0.9rem; }
}

/* ==========================================================================
   LANDING (Rodada 1) — ver DESIGN_LANDING.md
   --------------------------------------------------------------------------
   Ordem: hero -> prova -> o que medimos -> como funciona -> dossie -> fecho
   Assinatura: a curva medida (D-005), desenhada uma vez ao entrar na tela.
   ========================================================================== */

/* --- 1. Hero (D-030: vazio quente + orbe) ------------------------------ */
.hero {
  padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 96px);
  /* O hero deixa --deep e vira o vazio quente, para o orbe encostar sem
     emenda. O resto do site continua em --deep. */
  background: var(--void);
  position: relative;
  overflow: hidden;
}

/* GRAO. Uma textura fina por cima de tudo tira o aspecto de "gradiente de
   CSS" e da materia a superficie. Custa 0 requisicoes: e um SVG inline em
   data-URI, ~200 bytes. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gaze);
  margin-bottom: 22px;
}
/* Um ponto de luz antes do eyebrow: pequeno, quente, aceso. */
.hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 99px;
  background: var(--gaze);
  box-shadow: 0 0 10px 2px rgba(255, 183, 3, .7);
}

.hero h1 {
  /* D-033: o hero virou grid de 2 colunas, entao o titulo tem METADE da
     largura que tinha. O tamanho antigo (ate 4.4rem) foi calibrado para
     a tela inteira e aqui forcava 6 linhas, empurrando o formulario para
     fora da dobra. Teto cai para 3.6rem, base para 2.1rem. */
  font-size: clamp(2.1rem, 4.1vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--mist);
  margin: 0 0 22px;
  max-width: none;
  text-wrap: balance;
}
/* O realce dourado deixa de ser cor chapada e vira LUZ: um gradiente
   quente com brilho por tras. Casa com o orbe em vez de competir. */
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--gaze) 0%, var(--gaze-lt) 52%, var(--gaze) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 183, 3, .28));
}
.hero__sub {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--mist-void);
  max-width: 52ch;
  /* D-066: era 34px. Reduzido para 18px porque em 1280x800 o botao fechava
     em 795,6px numa dobra de 800 — cabia por 4,4px, margem apertada demais.
     Ver D-067: a frase de categoria saiu do hero e virou bloco oculto. */
  margin: 0 0 18px;
  line-height: 1.6;
}

/* D-066: a frase de categoria ("O Melook e uma ferramenta brasileira de
   GEO..."). Discreta de proposito — ela existe para ser LIDA POR MAQUINA
   (buscador e LLM), nao para competir com o h1.

   MEDIDO: a 1a versao (0,92rem, line-height 1.55, margens -22/30) ocupava
   91px e empurrava o botao de submit para FORA DA DOBRA em 1440x900 e
   1280x800 — regressao minha, medida com e sem a frase. Nos outros dois
   viewports (1366x768 e mobile) o botao JA ficava fora antes.

   Correcao: corpo menor, entrelinha mais justa e margens negativas. O
   alvo e ~62px, que devolve o botao para dentro da dobra nos dois casos
   que EU quebrei, sem esconder o texto (esconder derrubaria o proposito). */
.hero__categoria {
  font-size: 0.82rem;
  color: var(--tinta-45);
  max-width: 74ch;
  margin: -26px 0 18px;
  line-height: 1.42;
}

/* --- Formulario de dominio --------------------------------------------- */
.form-dominio {
  /* D-033: com o hero em grid, a coluna de texto tem ~metade da largura.
     O campo (basis 300px) + o botao (206px) somavam 714px e estouravam
     os 508px disponiveis, entao o botao caia sozinho para a linha de
     baixo — quebra feia, com o botao menor que o campo. Empilhar de
     proposito: campo na largura toda, botao logo abaixo, tambem inteiro.
     E a mesma forma que o mobile ja usava, entao o site fica coerente. */
  display: flex; flex-direction: column; gap: 10px;
  max-width: 100%;
}
.form-dominio__campo {
  flex: 0 0 auto;
  display: flex; align-items: center;
  background: var(--mist);
  border: 2px solid transparent;
  border-radius: 99px;
  padding: 0 6px 0 20px;
  transition: border-color .18s ease;
}
.form-dominio__campo:focus-within { border-color: var(--gaze); }
.form-dominio__campo.erro { border-color: #f87171; }
.form-dominio__campo input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 15px 0;
}
.form-dominio__campo input::placeholder { color: var(--tinta-45); }
.form-dominio .btn { padding: 15px 26px; border-radius: 99px; font-size: 1rem; width: 100%; }

.form-dominio__nota {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--slate-up);       /* 6.22:1 sobre o fundo escuro — AA */
}
.form-dominio__erro {
  margin: 12px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fca5a5;               /* legivel sobre o fundo escuro */
}
.form-dominio__erro[hidden] { display: none; }

/* --- A curva medida (assinatura D-005) ---------------------------------- */
.curva { display: block; margin: 0; }
/* D-034: a curva saiu do hero e vive na secao de prova. Sem esta regra
   ela usava o tamanho intrinseco do SVG e esticava para 621px de altura. */
.curva--prova { max-width: 460px; width: 100%; height: auto; }
.curva__linha {
  fill: none;
  stroke: var(--gaze);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* desenhada por JS via stroke-dashoffset; sem JS, fica visivel */
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
/* D-032: o eixo usava --slate (#64748b, azulado) e a legenda --slate-up
   (#94a3b8, tambem azulado). Eram os ultimos restos da paleta azul no
   hero — num fundo quente eles liam como sujeira cinza-fria. Agora usam
   a familia quente, com a mesma hierarquia (eixo mais forte, legenda
   mais suave). */
.curva__eixo { stroke: var(--line-void-forte); stroke-width: 2.5; stroke-linecap: round; }
.curva__ponto { fill: var(--gaze); }
.curva__legenda {
  font-size: 0.82rem;
  color: var(--mist-void);
  margin-top: 10px;
  display: block;
}

/* Com movimento permitido, a curva se desenha uma vez ao entrar na tela. */
@media (prefers-reduced-motion: no-preference) {
  .curva--animar .curva__linha { stroke-dashoffset: 1000; }
  .curva--animar.visivel .curva__linha {
    transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);
    stroke-dashoffset: 0;
  }
  .curva--animar .curva__ponto { opacity: 0; }
  .curva--animar.visivel .curva__ponto {
    transition: opacity .3s ease .75s;
    opacity: 1;
  }
  /* Rede de seguranca: se o IntersectionObserver nao disparar (aba em
     background, JS bloqueado, elemento ja visivel na carga), a curva
     aparece sozinha depois de 2s. Sem isto ela ficava invisivel no mobile. */
  .curva--animar { animation: curva-fallback 0s linear 2s forwards; }
  @keyframes curva-fallback {
    to { --forcar: 1; }
  }
  .curva--animar:not(.visivel) .curva__linha {
    animation: curva-revela .9s cubic-bezier(.4,0,.2,1) 2s forwards;
  }
  .curva--animar:not(.visivel) .curva__ponto {
    animation: curva-ponto .3s ease 2.75s forwards;
  }
  @keyframes curva-revela { to { stroke-dashoffset: 0; } }
  @keyframes curva-ponto { to { opacity: 1; } }
}


/* --- 2. Faixa de prova (D-030) ------------------------------------------ */
.prova {
  background: var(--void-2);
  border-top: 1px solid var(--line-void);
  border-bottom: 1px solid var(--line-void);
  padding: 46px 0;
  position: relative;
}
.prova__grade {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* O numero deixa de ser texto dourado e vira LEITURA DE INSTRUMENTO:
   mono, grande, com brilho, e uma barra de luz que o acompanha. */
.prova__item { position: relative; padding-left: 20px; }
.prova__item::before {
  content: "";
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--gaze-lt), var(--ember));
  border-radius: 2px;
  box-shadow: 0 0 14px -1px rgba(255, 183, 3, .55);
}
.prova__num {
  font-family: var(--mono);
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 700;
  color: var(--mist);
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.prova__txt { font-size: 0.94rem; color: var(--mist-void); margin: 0; line-height: 1.55; }
.prova__fonte {
  margin: 30px 0 0;
  font-size: 0.79rem;
  color: var(--slate-up);
}

/* --- 3 e 5. Blocos de conteudo ----------------------------------------- */
.bloco { padding: clamp(64px, 9vw, 104px) 0; }
.bloco--claro { background: var(--mist); color: var(--ink); }
.bloco--claro h2, .bloco--claro h3 { color: var(--ink); }
.bloco--claro p { color: var(--tinta-70); }
.bloco--claro .olho { color: var(--gold-deep); }  /* ouro como TEXTO no claro */

/* Bloco claro QUENTE — D-038.
   O bloco "O que entra na medicao" estava com o fundo --mist #F8FAFC, um
   branco de matiz azulado, enquanto todo o resto da pagina ja era quente.
   Ele era a ultima secao azul do site. Agora ele usa --mist-2, o papel
   quente, e ganha um fio dourado no topo que o liga visualmente ao hero
   logo acima — antes eram dois mundos encostados um no outro. */
.bloco--papel { background: var(--mist-2); color: var(--ink); position: relative; }
.bloco--papel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,119,0,.42) 22%, rgba(184,119,0,.42) 78%, transparent);
}
.bloco--papel h2, .bloco--papel h3 { color: var(--ink); }
.bloco--papel p { color: var(--tinta-70); }
.bloco--papel .olho { color: var(--gold-deep); }

/* Bloco escuro quente — D-032.
   Existe para dar ritmo entre dois blocos claros sem voltar ao azul. Usa
   --void-3, o terceiro degrau da familia quente: escuro o bastante para
   separar, claro o bastante para nao virar um buraco na pagina. */
.bloco--escuro { background: var(--void-3); color: var(--mist); }
.bloco--escuro h2, .bloco--escuro h3 { color: var(--mist); }
.bloco--escuro p { color: var(--mist-void); }
.bloco--escuro .olho { color: var(--gaze); }
.bloco--escuro .lead { color: var(--mist-void); }

/* Motores — D-038.
   Eram tres pilulas de borda fina: corretas, mas o desenho mais generico
   que existe. Viraram cartoes com o nome em destaque e a funcao embaixo,
   o que tambem responde a pergunta seguinte do visitante ("o que cada um
   faz?") sem revelar metodo (D-002). O ponto dourado segue sendo o unico
   elemento que sugere "esta sendo consultado". */
.motores {
  display: grid; gap: 14px; margin: 34px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 760px;
}
.motor {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line-mist);
  border-radius: var(--raio-g);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.motor:hover { border-color: rgba(184,119,0,.34); transform: translateY(-2px); background: #fff; }
.motor__topo { display: flex; align-items: center; gap: 9px; }
.motor__nome { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--ink); }
.motor__papel { font-size: 0.85rem; color: var(--tinta-45); line-height: 1.45; }
.motor__ponto {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--gaze); flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.16);
}

/* --- 4. Como funciona (D-030) -------------------------------------------
   A numeracao aqui e LEGITIMA: e uma sequencia real. Por isso os passos
   ganham um fio que os liga — a estrutura codifica a informacao. */
.passos {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 40px;
  border-top: 1px solid var(--line-void);
}
.passo {
  position: relative;
  padding: 30px 26px 30px 0;
  border-right: 1px solid var(--line-void);
  transition: background .25s ease;
}
.passo:last-child { border-right: 0; }
.passo:hover { background: linear-gradient(180deg, rgba(255,183,3,.045), transparent 70%); }
.passo__num {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gaze);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 16px;
  opacity: .85;
}
.passo h3 { font-size: 1.1rem; color: var(--mist); margin: 0 0 9px; letter-spacing: -0.015em; }
.passo p { font-size: 0.94rem; color: var(--mist-void); margin: 0; line-height: 1.58; }

/* --- 5. O dossie (D-030) ------------------------------------------------ */
.tiers { display: grid; gap: 0; margin-top: 34px; }
.tier {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--line-void);
  transition: padding-left .22s cubic-bezier(.4,0,.2,1);
}
.tier:last-child { border-bottom: 1px solid var(--line-void); }
.tier:hover { padding-left: 8px; }
.tier__selo {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink);
  background: linear-gradient(135deg, var(--gaze-lt), var(--gaze));
  border-radius: 7px;
  padding: 4px 10px;
  box-shadow: 0 0 16px -3px rgba(255,183,3,.5);
}
.tier__txt { font-size: 0.94rem; color: var(--mist-void); margin: 0; line-height: 1.55; }
.tier__txt strong { color: var(--mist); }

/* --- 6. Fecho (D-030) --------------------------------------------------- */
.fecho {
  background: var(--void);
  padding: clamp(72px, 10vw, 116px) 0;
  border-top: 1px solid var(--line-void);
  position: relative;
  overflow: hidden;
}
/* O eco do orbe: um halo quente subindo do rodape da secao, para o fecho
   pertencer ao mesmo mundo do hero. */
.fecho::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -55%;
  width: 900px; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255,183,3,.09) 0%, transparent 62%);
  pointer-events: none;
}
.fecho > .wrap { position: relative; z-index: 1; }
.fecho h2 { max-width: 22ch; margin-bottom: 28px; text-wrap: balance; }
.fecho h2 em { font-style: normal; color: var(--gaze); }
.fecho__pergunta {
  margin: 28px 0 0;
  font-size: 0.97rem;
  color: var(--mist-void);
}
.fecho__pergunta a { color: var(--gaze); font-weight: 600; }

/* --- Faixa de CTA (FAQ) ------------------------------------------------
   Acao que aparece antes do conteudo longo. Fundo gaze com texto ink:
   e a unica faixa clara da pagina, entao o olho acha sozinho. */
.faixa-cta {
  background: var(--gaze);
  padding: 20px 0;
}
.faixa-cta__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.faixa-cta__txt {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
}
.faixa-cta .btn {
  background: var(--ink);
  color: var(--mist);
  white-space: nowrap;
}
.faixa-cta .btn:hover { background: var(--deep); }

/* ==========================================================================
   D-046/D-047 — paginas de conteudo longo: planos, legal e diagnostico.

   Estas quatro paginas eram placeholders de 11 linhas dentro de uma
   `.secao--deep` de 441px: 70px de conteudo e 371px de vao vazio medido.
   Agora usam `.bloco`, que dimensiona pelo conteudo.

   NENHUMA cor literal aqui. A paleta tem quatro lugares (fundo escuro, fundo
   claro, texto sobre escuro, tinta sobre claro) e todos vem de token — foi a
   cor escrita a mao que sobreviveu a tres trocas de paleta (D-037 a D-040).
   ========================================================================== */

/* --- Largura de leitura ------------------------------------------------- */
/* Texto juridico em 1120px de largura e ilegivel: a linha passa de 140
   caracteres. 68ch e o limite confortavel para leitura continua. */
.wrap--texto { max-width: 760px; }
.wrap--form { max-width: 720px; }

/* --- Paginas legais ----------------------------------------------------- */
.legal__data {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--tinta-45);
}
.legal__secao { margin-top: 42px; }
.legal__secao h3 {
  font-size: 1.12rem;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
.legal__secao p {
  margin: 0 0 12px;
  color: var(--tinta-70);
  line-height: 1.68;
}
.legal__secao .lista-marcada { margin-top: 4px; }

/* A clausula que protege o produto ganha um trilho dourado: e a que precisa
   ser lida, nao pulada. */
.legal__secao--destaque {
  border-left: 3px solid var(--gaze);
  padding-left: 22px;
}
.legal__secao--pendente {
  border-left: 3px solid var(--line-mist-forte);
  padding-left: 22px;
}
.legal__secao--pendente h3 { color: var(--gold-deep); }

.legal__contato {
  margin-top: 48px;
  padding: 26px 28px;
  background: var(--mist-2);
  border: 1px solid var(--line-mist);
  border-radius: var(--raio-g);
}
.legal__contato h3 { margin: 0 0 8px; font-size: 1.05rem; }
.legal__contato p { margin: 0; color: var(--tinta-70); }
.legal__rodape { margin-top: 44px; }
.legal__rodape a { color: var(--link-claro); font-weight: 600; }

/* --- Lista marcada ------------------------------------------------------ */
.lista-marcada {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.lista-marcada li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--tinta-70);
  line-height: 1.6;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gaze);
}
/* Sobre fundo escuro a tinta clara muda: mesma lista, outro token. */
.bloco--escuro .lista-marcada li { color: var(--mist-void); }

/* --- Cartoes de plano --------------------------------------------------- */
.planos__grade { align-items: stretch; }

.plano {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 30px 26px 28px;
}
.plano__selo {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--gaze);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
}
.plano--destaque {
  border-color: rgba(184, 119, 0, .42);
  box-shadow: 0 22px 60px -34px rgba(255, 183, 3, .55);
}

.plano__nome {
  font-size: 1.16rem;
  margin: 0 0 6px;
  color: var(--mist);
}
.plano__resumo {
  font-size: .9rem;
  color: var(--mist-void);
  margin: 0 0 20px;
  line-height: 1.5;
  min-height: 2.7em;
}
.plano__preco {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-void);
}
.plano__valor {
  font-size: 2.05rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--mist);
}
.plano__de {
  font-size: .95rem;
  color: var(--mist-50);
  text-decoration: line-through;
}
.plano__quando {
  font-size: .85rem;
  color: var(--mist-50);
}

.plano__lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  flex: 1;
}
.plano__lista li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--mist-void);
}
.plano__lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gaze);
  font-weight: 700;
}

.plano__form { margin: 0; }
.plano__cta { width: 100%; text-align: center; }

.plano__moeda {
  margin-top: 26px;
  font-size: .9rem;
  color: var(--mist-void);
  max-width: 68ch;
}
.plano__fecho { margin-top: 24px; }
.plano__fecho a { color: var(--link-claro); font-weight: 600; }

/* --- Formulario de duas colunas (/diagnostico) -------------------------- */
.form-dominio--duplo { max-width: none; }
.form-dominio__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}
.form-dominio__bloco { display: flex; flex-direction: column; }
.form-dominio__rotulo {
  font-size: .86rem;
  font-weight: 600;
  color: var(--tinta-70);
  margin-bottom: 7px;
}
.form-dominio--duplo .btn {
  margin-top: 16px;
  width: 100%;
}
.form-dominio__nota--fina {
  font-size: .84rem;
  opacity: .85;
}
.form-dominio__nota a { color: var(--link-claro); font-weight: 600; }

/* ==========================================================================
   D-049 — o gráfico da prova (home).

   Substitui a "curva medida" (D-005/D-034), que era uma linha subindo sem
   eixo, sem valor e sem fonte — e que contradizia a própria seção, cujo
   título é "Por que isso é urgente" e cujos números são de queda.

   A regra de cor aqui: o OURO marca a área perdida, que é o que o produto
   mede. Ele não decora — ele é o dado. As três séries usam um gradiente de
   intensidade do ouro para deixar claro que são três medições distintas.
   ========================================================================== */
.graf {
  margin: 46px 0 0;
  padding: 30px 28px 26px;
  background: var(--void-2);
  border: 1px solid var(--line-void);
  border-radius: var(--raio-g);
}
.graf__cabeca { margin-bottom: 26px; }
.graf__titulo {
  font-size: 1.16rem;
  margin: 0 0 8px;
  color: var(--mist);
  letter-spacing: -.01em;
}
.graf__lead {
  font-size: .93rem;
  color: var(--mist-void);
  margin: 0;
  max-width: 66ch;
}

/* Sem `min-width`: o SVG tem viewBox, entao ele ESCALA. Forcar largura minima
   empurrava a terceira serie para fora da tela no celular (medido: 460px de
   SVG dentro de 308px de area — 152px escondidos, e rolagem lateral num
   grafico e uma afordancia ruim). A escala tipografica do SVG sobe no mobile
   para os rotulos continuarem legiveis encolhidos. */
.graf__quadro { overflow-x: auto; }
.graf__svg { width: 100%; height: auto; display: block; }

/* Grade: presente mas discreta — ela orienta, não compete com o dado. */
.graf__grade line {
  stroke: var(--line-void);
  stroke-width: 1;
}
.graf__eixo {
  stroke: var(--line-void-forte);
  stroke-width: 1.5;
}
.graf__rotulo text {
  fill: var(--mist-50);
  font-family: var(--mono);
  font-size: 11px;
}

/* A ÁREA PERDIDA — o ouro como dado, não como enfeite. */
.graf__perda {
  fill: var(--gaze);
  opacity: .13;
}

.graf__linha {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Três séries, três intensidades de ouro: mesma família, leitura distinta. */
.graf__linha--1 { stroke: var(--gaze); }
.graf__linha--2 { stroke: var(--gaze-lt); }
.graf__linha--3 { stroke: var(--ember); }

.graf__ponta { stroke: var(--void-2); stroke-width: 2; }
.graf__ponta--1 { fill: var(--gaze); }
.graf__ponta--2 { fill: var(--gaze-lt); }
.graf__ponta--3 { fill: var(--ember); }

.graf__valor text {
  fill: var(--mist);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

/* --- As séries como tabela --------------------------------------------- */
/* Os mesmos números do gráfico, com a fonte ao lado. É o que torna o gráfico
   verificável — e o que um leitor de tela lê, já que o SVG é decorativo. */
.graf__series {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.graf__serie {
  display: grid;
  grid-template-columns: 12px minmax(150px, 1.1fr) auto minmax(180px, 2fr);
  align-items: baseline;
  gap: 14px;
  padding: 13px 4px;
  border-top: 1px solid var(--line-void);
}
.graf__marca {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  align-self: center;
}
.graf__marca--1 { background: var(--gaze); }
.graf__marca--2 { background: var(--gaze-lt); }
.graf__marca--3 { background: var(--ember); }

.graf__serie-nome {
  font-size: .94rem;
  font-weight: 600;
  color: var(--mist);
}
.graf__serie-valor {
  font-family: var(--mono);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--gaze);
  white-space: nowrap;
}
.graf__serie-nota {
  font-size: .86rem;
  color: var(--mist-void);
}
.graf__serie-fonte {
  grid-column: 2 / -1;
  font-size: .78rem;
  color: var(--mist-50);
  font-family: var(--mono);
}

/* A virada: a seção prova a urgência, e a última frase devolve a ação.
   Sem ela o leitor sai deprimido e não clica. */
.graf__virada {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-void-forte);
  font-size: 1.04rem;
  color: var(--mist);
  max-width: 62ch;
}

@media (max-width: 720px) {
  .graf { padding: 22px 16px 20px; }
  .graf__serie {
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
  }
  .graf__serie-nota { grid-column: 2 / -1; }
  .graf__serie-fonte { grid-column: 2 / -1; }
  /* Encolhido, o SVG mantem a proporcao — os rotulos precisam crescer em
     unidades do viewBox para continuarem legiveis na tela do celular. */
  .graf__rotulo text { font-size: 15px; }
  .graf__valor text { font-size: 17px; }
}

/* --- Responsivo -------------------------------------------------------- */
@media (max-width: 720px) {
  .hero h1 { max-width: none; }
  .curva--hero { max-width: 100%; margin-top: 34px; }
  .form-dominio { max-width: none; }
  .form-dominio .btn { width: 100%; }
  .prova__item { border-left-width: 3px; }
  .bloco { padding: 56px 0; }
  .fecho { padding: 56px 0; }
  .faixa-cta__linha { flex-direction: column; align-items: stretch; text-align: center; }
  .faixa-cta .btn { width: 100%; }
  .form-dominio__linha { grid-template-columns: 1fr; }
  .plano__resumo { min-height: 0; }
  .legal__secao--destaque,
  .legal__secao--pendente { padding-left: 16px; }
}

/* ==========================================================================
   /scan/{id} — a pagina de acompanhamento (Bloco 3-C)
   ==========================================================================
   Estas classes nasceram no template `paginas/scan.html` e NAO existiam aqui.
   O resultado medido: a pagina renderizava "60 Nota de visibilidade" como
   texto corrido, sem numero destacado — porque classe sem regra nao da erro,
   so nao faz nada. Mesma familia de defeito do `{% block robots %}` que nao
   existia no base.html.

   REGRA: ao criar uma classe no template, crie a regra aqui na MESMA sessao.
   Classe orfa nao quebra nada e por isso passa despercebida. */

/* O numero da nota. Sobre bloco claro, entao usa tinta — nao --gaze, que
   sobre papel da 1.36:1 e some (ver audita_paleta.py). */
.resultado-nota {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 8px;
}
.resultado-nota__num {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-deep);
}
.resultado-nota__rot {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-45);
}

/* Caixa do aviso de e-mail. Fundo levemente mais escuro que o papel para
   separar do corpo sem precisar de borda dura. */
.aviso-email {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--mist-3);
  border-left: 3px solid var(--gaze);
  border-radius: var(--raio);
}
.aviso-email h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--ink);
}
.aviso-email p { margin: 0; color: var(--tinta-70); }

/* A lista do dossie (D-056). Criada junto com o template que a usa: classe
   orfa em template nao quebra nada e por isso passa despercebida — o texto
   sai como paragrafo corrido e ninguem ve que era para ser lista. */
.dossie-lista {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.dossie-lista--num { counter-reset: dossie; }
.dossie-lista li {
  padding: 14px 0;
  border-bottom: 1px solid var(--mist-3);
}
.dossie-lista--num li {
  counter-increment: dossie;
  padding-left: 34px;
  position: relative;
}
.dossie-lista--num li::before {
  content: counter(dossie);
  position: absolute;
  left: 0;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gaze);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dossie-lista__pergunta {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}
.dossie-lista__meta {
  display: block;
  margin-top: 4px;
  color: var(--tinta-45);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* O indicador de progresso. O ponto pulsa enquanto a analise roda — e o
   unico sinal de que algo esta acontecendo, entao ele PRECISA se mexer.
   Com prefers-reduced-motion o ponto fica parado, mas visivel: a informacao
   nao pode depender da animacao. */
.progresso {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 10px;
  padding: 18px 22px;
  background: var(--mist-3);
  border-radius: var(--raio);
}
.progresso__ponto {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-deep);
  animation: progresso-pulsa 1.4s ease-in-out infinite;
}
.progresso__texto {
  font-weight: 600;
  color: var(--ink);
}

@keyframes progresso-pulsa {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

/* --- Acessibilidade do movimento --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .curva__linha { stroke-dashoffset: 0 !important; }
  .curva__ponto { opacity: 1 !important; }
  /* O ponto para de pulsar mas continua visivel — ver comentario acima. */
  .progresso__ponto { animation: none !important; opacity: 1 !important; }
}