/* Nighteye — landing e página de resultado.
   Conceito: um laudo impresso. Papel claro, tinta quase preta, UM marcador (verde-limão) só onde o olho deve agir
   ou observar (botão principal, marca no título, endereço forjado). O instrumento de checagem é o único bloco escuro
   da página: é o produto, não enfeite. Grade editorial: cabeçalho de seção na margem esquerda, conteúdo à direita.
   Três vozes: Sans = explica; Mono = observado/técnico; Serif = quem assina.
   Banido: brilho, gradiente, vidro, ícone, card de 3 colunas, animação em bloco que já está na tela. */

@font-face { font-family: "Plex Sans"; src: url(fontes/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(fontes/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(fontes/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(fontes/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fontes/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fontes/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url(fontes/ibm-plex-serif-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url(fontes/ibm-plex-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --papel: #FAF9F6; --papel-2: #F0EEE8;
  --tinta: #141518; --tinta-2: #45494F; --mudo: #6B7079;
  --linha: #DCD8CF; --linha-2: #BEB9AE;
  --limao: #CDF03E; --limao-2: #BEE22A; --marca-luz: #76B900; --limao-tinta: #141518;
  --vermelho: #C0301E; --amarelo: #8A5A00; --verde: #1C7A3E;
  --escuro: #121417; --escuro-2: #1B1E23; --escuro-linha: #2C3139; --escuro-tinta: #EEF0F2; --escuro-tinta-2: #A6AEB7; --escuro-mudo: #6E7681;
  --sans: "Plex Sans", system-ui, sans-serif; --mono: "Plex Mono", ui-monospace, monospace; --serif: "Plex Serif", Georgia, serif;
  --raio: 4px;
  --corte: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow-x: clip; }
::selection { background: var(--limao); color: var(--limao-tinta); }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
b { font-weight: 600; }
/* o marcador fica atrás do texto vizinho (descendentes da linha de cima passam por cima dele) */
mark { background: linear-gradient(transparent 24%, var(--limao) 24%, var(--limao) 94%, transparent 94%); color: var(--limao-tinta); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; position: relative; z-index: -1; }
.mono { font-family: var(--mono); }
.nb { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ---------- grade editorial ---------- */
.env { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.sec { border-top: 1px solid var(--linha); padding: clamp(64px, 8vw, 112px) 0; }
.sec > .env { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; align-items: start; }
.cab { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 84px; }
.cab .n { font: 500 13px var(--mono); color: var(--tinta); letter-spacing: .04em; }
.cab .n::after { content: ""; display: block; width: 28px; height: 1px; background: var(--tinta); margin-top: 10px; }
.rotulo { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; color: var(--mudo); text-transform: uppercase; }
.corpo { grid-column: 4 / 13; min-width: 0; }
.corpo.estreito { grid-column: 4 / 11; }
.sec h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.028em; margin: 0 0 22px; max-width: 20ch; }
.sec .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--tinta-2); max-width: 58ch; margin: 0 0 36px; }
.sec .lead b { color: var(--tinta); font-weight: 500; }
.nota-pe { font-size: 13px; color: var(--mudo); margin-top: 20px; max-width: 60ch; }
@media (max-width: 900px) {
  .cab { grid-column: 1 / -1; position: static; flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 22px; }
  .cab .n::after { display: none; }
  .corpo, .corpo.estreito { grid-column: 1 / -1; }
}

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--papel); border-bottom: 1px solid var(--linha); }
.nav .env { display: flex; align-items: center; gap: 28px; height: 64px; }
.nav .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.nav .marca svg { width: 34px; height: 18px; color: var(--tinta); }
.nav .marca span { font: 500 15px var(--mono); letter-spacing: .22em; }
.nav a.link { text-decoration: none; color: var(--tinta-2); font-size: 15px; }
.nav a.link:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) { .nav a.link { display: none; } .nav .env { height: 58px; } .nav .btn { padding: 12px 16px; font-size: 14px; } }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--sans);
  padding: 15px 22px; border-radius: var(--raio); border: 1px solid var(--tinta); background: transparent; color: var(--tinta);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s; }
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn-limao { background: var(--limao); color: var(--limao-tinta); border-color: var(--tinta); }
.btn-limao:hover { background: var(--limao-2); color: var(--limao-tinta); }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- herói ---------- */
.heroi { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); border-top: 0; }
.heroi > .env > * { grid-column: 1 / -1; }
.heroi .rotulo { color: var(--tinta); margin-bottom: 26px; }
.heroi h1 { font: 700 clamp(38px, 5.7vw, 80px)/1.02 var(--sans); letter-spacing: -.04em; max-width: 24ch; margin: 0 0 clamp(32px, 4vw, 56px); }
.heroi .sub { grid-column: 1 / 5; font-size: clamp(17px, 1.5vw, 19px); color: var(--tinta-2); max-width: 36ch; }
.heroi .sub b { color: var(--tinta); font-weight: 600; }
.heroi .sub p + p { margin-top: 14px; }
.heroi .instrumento { grid-column: 5 / 13; min-width: 0; }
.micro { font-size: 13px; line-height: 1.5; color: var(--mudo); margin: 14px 2px 0; max-width: 64ch; }
@media (max-width: 900px) {
  .heroi .rotulo { font-size: 11px; letter-spacing: .1em; margin-bottom: 20px; }
  .heroi h1 { margin-bottom: 24px; }
  /* no celular o campo vem logo depois do título: a ação fica na primeira tela, o contexto vem depois */
  .heroi .instrumento { grid-column: 1 / -1; order: 1; }
  .heroi .sub { grid-column: 1 / -1; max-width: 56ch; order: 2; margin-top: 26px; }
}

/* ---------- instrumento de checagem (único bloco escuro) ---------- */
.visor { background: var(--escuro); color: var(--escuro-tinta); border-radius: 6px; overflow: hidden; border: 1px solid var(--escuro);
  --vermelho: #FF7466; --amarelo: #F5C451; --verde: #63DB95; }
.visor .btn { border-color: var(--escuro-tinta); color: var(--escuro-tinta); }
.visor .btn:hover { background: var(--escuro-tinta); color: var(--escuro); }
.visor .btn-limao { background: var(--limao); color: var(--limao-tinta); border-color: var(--limao); }
.visor .btn-limao:hover { background: var(--limao-2); color: var(--limao-tinta); }
.campo { display: flex; align-items: stretch; }
.campo .pre { display: flex; align-items: center; padding-left: 18px; color: var(--limao); font: 500 18px var(--mono); }
.campo input { flex: 1; border: 0; background: transparent; color: var(--escuro-tinta); font: 500 18px var(--mono);
  padding: 22px 12px; min-width: 0; caret-color: var(--limao); }
.campo input::placeholder { color: var(--escuro-mudo); }
.campo input:focus { outline: none; }
.campo button { border: 0; border-left: 1px solid var(--escuro-linha); background: var(--limao); color: var(--limao-tinta);
  font: 600 16px var(--sans); padding: 0 28px; cursor: pointer; transition: background-color .12s; }
.campo button:hover { background: var(--limao-2); }
.campo button:disabled { opacity: .55; cursor: default; }
@media (max-width: 420px) { .campo .pre { padding-left: 14px; } .campo input { padding: 18px 10px; font-size: 16px; } .campo button { padding: 0 16px; font-size: 15px; } }

/* log de varredura: cada linha aparece quando a consulta chega naquele passo */
.log { font: 400 14px/1.9 var(--mono); color: var(--escuro-tinta-2); padding: 18px 20px 10px; border-top: 1px solid var(--escuro-linha); display: none; }
.log.ativo { display: block; }
.log .linha { opacity: 0; transition: opacity .12s linear; }
.log .linha.on { opacity: 1; }
.log .linha::before { content: "› "; color: var(--limao); }
.cursor::after { content: "▌"; color: var(--limao); animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* resultado */
.res { display: none; border-top: 1px solid var(--escuro-linha); padding: 28px 24px 26px; }
.res.ativo { display: block; animation: surgir .22s var(--corte); }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.res .selo-estado { display: inline-flex; align-items: center; gap: 9px; font: 500 12px var(--mono); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 16px; padding-bottom: 6px; border-bottom: 2px solid currentColor; }
.res.e-vermelho .selo-estado { color: var(--vermelho); } .res.e-amarelo .selo-estado { color: var(--amarelo); }
.res.e-verde .selo-estado { color: var(--verde); }
.res .veredito { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: 1.28; letter-spacing: -.015em; max-width: 30ch; color: var(--escuro-tinta); }
.res .veredito:only-child { color: var(--escuro-tinta-2); font-size: 17px; }
.res .dom { font-family: var(--mono); font-weight: 500; color: var(--limao); overflow-wrap: anywhere; }
.golpe { color: var(--escuro-tinta-2); margin: 20px 0 0; font-size: 15px; max-width: 60ch; }
.golpe b { color: var(--escuro-tinta); font-weight: 500; }

/* maquete do e-mail forjado: papel branco dentro do instrumento, como um e-mail real.
   O endereço "De:" recebe o marcador depois que o bloco entra: a parte forjada é apontada, não enfeitada. */
.email-mock { background: #fff; color: var(--tinta); border-radius: var(--raio); margin: 24px 0 0; max-width: 560px; min-width: 0; }
.email-mock .de, .email-mock .assunto { min-width: 0; overflow-wrap: anywhere; }
.email-mock .cab { padding: 14px 16px; border-bottom: 1px solid var(--linha); font-size: 14px; display: grid; gap: 4px; }
.email-mock .de { font-family: var(--mono); color: var(--tinta-2); }
.email-mock .de b { color: var(--tinta); font-weight: 500; background: linear-gradient(var(--limao), var(--limao)) no-repeat 0 0 / 0% 100%;
  animation: marcar .3s .35s var(--corte) forwards; padding: 1px 3px; margin-left: -3px; }
@keyframes marcar { to { background-size: 100% 100%; } }
.email-mock .assunto { color: var(--tinta); font-weight: 500; }
.email-mock .corpo { padding: 14px 16px; color: var(--tinta-2); font-size: 14px; }
.email-mock .selo { font: 500 11px var(--mono); letter-spacing: .12em; color: var(--mudo); padding: 8px 16px;
  border-top: 1px dashed var(--linha-2); text-transform: uppercase; }

/* detalhe técnico recolhido */
details.tec { border-top: 1px solid var(--escuro-linha); margin-top: 22px; }
details.tec summary { cursor: pointer; padding: 14px 2px; font-size: 14px; color: var(--escuro-tinta-2); list-style: none; }
details.tec summary::-webkit-details-marker { display: none; }
details.tec summary::before { content: "+ "; color: var(--limao); font-family: var(--mono); }
details.tec[open] summary::before { content: "− "; }
.voz { display: grid; gap: 6px; padding: 4px 0 16px; }
.voz .maquina { font: 400 13px/1.5 var(--mono); color: var(--escuro-tinta-2); background: var(--escuro-2); border: 1px solid var(--escuro-linha);
  border-radius: var(--raio); padding: 10px 12px; word-break: break-all; }
.res .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.res .gatilho { color: var(--escuro-mudo); }
.gatilho { font-size: 13px; color: var(--mudo); margin: 12px 2px 0; }

/* ---------- 01 como o golpe chega: linha do tempo em pauta ---------- */
.ocorr { border-top: 1px solid var(--tinta); margin-top: 8px; }
.ocorr .ev { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--linha); }
.ocorr .ts { font: 500 13px/1.6 var(--mono); color: var(--vermelho); letter-spacing: .06em; }
.ocorr .txt { font-size: clamp(17px, 1.5vw, 19px); color: var(--tinta); max-width: 56ch; }
.ocorr .txt b { font-weight: 600; }
.ocorr .precisou { grid-column: 2; font: 400 13px var(--mono); color: var(--mudo); margin-top: 12px; }
.ocorr .precisou::before { content: "precisou de: "; }
@media (max-width: 600px) { .ocorr .ev { grid-template-columns: 1fr; row-gap: 8px; } .ocorr .precisou { grid-column: 1; } }

/* ---------- 02 honestidade: livro-razão faz / não faz ---------- */
.razao { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 8px; }
.razao h3 { font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--tinta); }
.razao .faz h3 { color: var(--verde); } .razao .naofaz h3 { color: var(--tinta-2); }
.razao ul { list-style: none; margin: 0; padding: 0; }
.razao li { font-size: 16px; color: var(--tinta-2); padding: 14px 0 14px 24px; position: relative; border-bottom: 1px solid var(--linha); }
.razao li::before { position: absolute; left: 2px; font-family: var(--mono); font-weight: 500; }
.razao .faz li::before { content: "+"; color: var(--verde); }
.razao .naofaz li::before { content: "−"; color: var(--tinta-2); }
@media (max-width: 680px) { .razao { grid-template-columns: 1fr; } .razao > div + div { margin-top: 32px; } }

/* ---------- 03 como funciona: três passos lado a lado ---------- */
.passos { list-style: none; counter-reset: p; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.passos li { counter-increment: p; border-top: 1px solid var(--tinta); padding-top: 16px; color: var(--tinta-2); font-size: 16px; }
.passos li::before { content: counter(p, decimal-leading-zero); display: block; font: 500 clamp(28px, 3vw, 40px)/1 var(--mono); letter-spacing: -.03em; color: var(--tinta); margin-bottom: 18px; }
.passos b { color: var(--tinta); font-weight: 600; }
@media (max-width: 760px) { .passos { grid-template-columns: 1fr; gap: 20px; } .passos li { position: relative; padding-left: 60px; } .passos li::before { position: absolute; left: 0; top: 16px; margin: 0; font-size: 26px; } }

/* ---------- 04 relatório: página de laudo com duas vozes ---------- */
.amostra { border: 1px solid var(--tinta); border-radius: var(--raio); overflow: hidden; margin-top: 8px; background: #fff; max-width: 680px; }
.amostra .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font: 500 12px var(--mono); letter-spacing: .08em;
  color: var(--tinta-2); padding: 12px 18px; border-bottom: 1px solid var(--linha); text-transform: uppercase; }
.amostra .top .grav { color: var(--vermelho); }
.amostra .mq { font: 400 13px/1.5 var(--mono); color: var(--tinta-2); padding: 14px 18px; border-bottom: 1px solid var(--linha);
  background: var(--papel-2); word-break: break-all; }
.amostra .mq::before { content: "a máquina viu  "; color: var(--mudo); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; display: block; margin-bottom: 4px; }
.amostra .bloco { padding: 8px 18px 10px; margin: 0; }
.amostra .bloco > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.amostra .bloco > div:last-child { border-bottom: 0; }
.amostra .bloco dt { font: 500 12px/1.6 var(--mono); color: var(--mudo); text-transform: uppercase; letter-spacing: .06em; }
.amostra .bloco dd { margin: 0; font-size: 15px; color: var(--tinta); }
@media (max-width: 600px) { .amostra .bloco > div { grid-template-columns: 1fr; gap: 4px; } }
.cta-meio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.cta-meio .gatilho { flex-basis: 100%; margin: 0; }

/* ---------- 05 quem responde: nota assinada + ficha ---------- */
.nota { font: 400 clamp(21px, 2.2vw, 27px)/1.4 var(--serif); font-style: italic; color: var(--tinta); max-width: 30em; margin: 0; text-wrap: pretty; }
.nota b { font: 500 1em var(--serif); font-style: normal; }
.quem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.quem.com-foto { grid-template-columns: 260px minmax(0, 1fr); }
.quem figure { margin: 0; }
.quem figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio); filter: grayscale(1) contrast(1.05); }
.quem figcaption { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mudo); margin-top: 10px; }
.ficha { margin: 0; border-top: 1px solid var(--tinta); }
.ficha > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.ficha dt { font: 500 12px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mudo); }
.ficha dd { margin: 0; font-size: 16px; color: var(--tinta-2); }
.ficha dd b { color: var(--tinta); font-weight: 600; }
.ficha dd a { color: var(--tinta); text-underline-offset: 3px; }
.assina { margin: 22px 0 44px; font: 500 17px var(--serif); color: var(--tinta); }
.assina small { display: block; font: 400 13px var(--sans); color: var(--mudo); margin-top: 2px; }
@media (max-width: 760px) { .quem.com-foto { grid-template-columns: 1fr; } .quem figure { max-width: 220px; } .ficha > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 06 preço: número grande, sem caixa ---------- */
.preco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; border-top: 1px solid var(--tinta); padding-top: 28px; margin-top: 8px; }
.preco .lancamento { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); margin: 0 0 14px; }
.preco .valor { font: 700 clamp(56px, 7vw, 96px)/1 var(--sans); letter-spacing: -.05em; }
.preco .valor .cent { display: block; font: 400 15px var(--sans); letter-spacing: 0; color: var(--mudo); margin-top: 10px; }
.preco .cond { color: var(--tinta-2); font-size: 16px; max-width: 52ch; }
.preco .cond + .cond { margin-top: 14px; }
.preco .cond b { color: var(--tinta); font-weight: 600; }
.preco .acoes { margin-top: 26px; }
@media (max-width: 680px) { .preco { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- 07 perguntas ---------- */
.faq .corpo details { border-top: 1px solid var(--linha); }
.faq .corpo details:first-of-type { border-top: 1px solid var(--tinta); }
.faq .corpo details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; padding: 20px 2px; font-weight: 500; font-size: 17px; list-style: none; display: flex;
  justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--tinta); }
.faq details[open] summary::after { content: "−"; }
.faq .resp { padding: 0 2px 22px; color: var(--tinta-2); max-width: 62ch; }

/* ---------- 08 fecho: faixa marcada ---------- */
.final { background: var(--limao); color: var(--limao-tinta); border-top: 1px solid var(--tinta); }
.final h2 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.04em; font-weight: 700; max-width: 14ch; margin-bottom: 18px; }
.final .lead { color: var(--limao-tinta); opacity: .8; margin-bottom: 30px; }
.final .btn { background: var(--tinta); color: var(--limao); border-color: var(--tinta); }
.final .btn:hover { background: #000; }
.final .btn.sec { background: transparent; color: var(--limao-tinta); }
.final .btn.sec:hover { background: var(--tinta); color: var(--limao); }
.final .acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.final .corpo { grid-column: 1 / 9; }
/* o olho grande: a marca fechando a página, olhando para onde o cursor está */
.final .olho-grande { grid-column: 9 / 13; align-self: center; justify-self: end; width: clamp(160px, 18vw, 240px); }
.final .olho-grande svg { display: block; width: 100%; height: auto; color: var(--limao-tinta); }
.final .olho-grande path { stroke-width: .7; }
@media (max-width: 900px) {
  .final .corpo { grid-column: 1 / -1; }
  .final .olho-grande { grid-column: 1 / -1; justify-self: start; width: 120px; order: -1; margin-bottom: 28px; }
  .final .olho-grande path { stroke-width: .9; }
}

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--tinta); padding: 36px 0 56px; color: var(--mudo); font-size: 13px; }
.rodape .env { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.rodape a { color: var(--tinta); text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape .marca-mini { font: 500 12px var(--mono); letter-spacing: .2em; color: var(--tinta); margin-right: auto; }

/* ---------- o olho ---------- */
/* A pupila é movida pelo JS (cx/cy); aqui só a piscada rara: uma vez, quando o resultado aparece. */
svg.olho.pisca { animation: piscar .16s var(--corte); transform-origin: 50% 50%; }
@keyframes piscar { 50% { transform: scaleY(.06); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .email-mock .de b { background-size: 100% 100%; }
}

.preco .ancora { margin: 18px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }

/* nome da barra: as letras para onde o olho está olhando acendem em verde */
.nav .marca .nome span {
  --luz: 0;
  color: color-mix(in srgb, var(--marca-luz) calc(var(--luz) * 100%), var(--tinta));
}

/* Turnstile: invisível para quem é humano; se pedir interação, aparece no canto, por cima de tudo */
.turnstile { position: fixed; right: 16px; bottom: 16px; z-index: 50; }

/* ---------- o que encontramos (rodada de campo) ---------- */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--tinta); margin-top: 8px; }
.num { padding: 26px 0; border-bottom: 1px solid var(--linha); }
.num .v { font: 700 clamp(44px, 6vw, 72px)/1 var(--sans); letter-spacing: -.04em; margin: 0 0 10px; color: var(--tinta); }
.num .v small { font: 500 15px var(--mono); letter-spacing: 0; color: var(--mudo); }
.num.grave .v { color: var(--vermelho); }
.num .d { font-size: 17px; color: var(--tinta-2); margin: 0; max-width: 34ch; }
.num .d b { color: var(--tinta); font-weight: 600; }
.fecho { font-size: clamp(18px, 1.8vw, 22px); margin: 28px 0 0; color: var(--tinta); }
@media (max-width: 680px) { .numeros { grid-template-columns: 1fr; } }

/* contador: o número real dos nossos testes; a contagem só anima se a pessoa aceita movimento */
.total { margin: 22px 0 0; font-size: 17px; color: var(--tinta-2); }
.total .cont { font: 700 clamp(34px, 4.4vw, 52px)/1 var(--sans); letter-spacing: -.03em; color: var(--tinta); margin-right: 8px; font-variant-numeric: tabular-nums; }
.num .v { font-variant-numeric: tabular-nums; }