:root{
  --ground:#EEF1F5; --surface:#FFFFFF; --surface-2:#F6F8FA;
  --ink:#0E1826; --ink-2:#3C4C60; --muted:#68788C;
  --accent:#1D3A5F; --accent-ink:#FFFFFF; --accent-soft:#DFE7F1; --accent-line:#B9CADF;
  --rule:#D5DDE7; --focus:#1D3A5F;
  --warn-bg:#FBF0E4; --warn-ink:#7A4A16; --warn-line:#E4C79C;
  --x-bg:#101822; --x-ink:#CFE0D5; --x-line:#2C3A48; --x-accent:#8FD3B6;
  --shadow:0 1px 2px rgba(14,24,38,.05), 0 12px 32px -20px rgba(14,24,38,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#080D14; --surface:#111A25; --surface-2:#16212E;
    --ink:#E7EEF7; --ink-2:#B4C3D4; --muted:#8798AB;
    --accent:#89AFDF; --accent-ink:#08101B; --accent-soft:#1A2839; --accent-line:#2E4762;
    --rule:#22303F; --focus:#89AFDF;
    --warn-bg:#2A1F10; --warn-ink:#E8C68F; --warn-line:#4A3A20;
    --x-bg:#0B1219; --x-ink:#C6DBCD; --x-line:#233241; --x-accent:#79C6A7;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#080D14; --surface:#111A25; --surface-2:#16212E;
  --ink:#E7EEF7; --ink-2:#B4C3D4; --muted:#8798AB;
  --accent:#89AFDF; --accent-ink:#08101B; --accent-soft:#1A2839; --accent-line:#2E4762;
  --rule:#22303F; --focus:#89AFDF;
  --warn-bg:#2A1F10; --warn-ink:#E8C68F; --warn-line:#4A3A20;
  --x-bg:#0B1219; --x-ink:#C6DBCD; --x-line:#233241; --x-accent:#79C6A7;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}

/* ---------- fundo · gráfico do Teste OCA (textura, não ilustração) ----------
   Fonte: "Teste OCA.jpeg" · upscale 2x lanczos + unsharp, dessaturado (ffmpeg).
   Opacidade baixa DE PROPÓSITO: o gráfico é ANTES/DEPOIS, ou seja, promessa de
   resultado — e é o grafismo mais identificável do método, numa base cuja objeção
   nº 1 é "seita". Como textura ele diz "instrumento de medição"; legível, ele
   promete melhora que a pesquisa não sustenta (0 de 23 declaram mudança rápida).
   Por isso as palavras ANTES e DEPOIS foram apagadas do arquivo (delogo no ffmpeg,
   que interpola o entorno em vez de chapar): ficam as curvas e a grade, sai a promessa.
   ⚠️ Opacidade subida a pedido do João em 20/08 — o gráfico agora é elemento de desejo,
   não textura. Se subir mais, confira a legibilidade da H1 sobre a curva azul. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("../img/oca-grafico-cor.jpg") center/cover no-repeat;
  opacity:.34; filter:contrast(1.05) saturate(.45);
}
body::after{  /* vinheta: mantém o miolo limpo para o texto */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 72% 58% at 50% 46%, var(--ground) 30%, transparent 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::before{ filter:invert(1) contrast(1.05) saturate(.5); opacity:.24 }
}
:root[data-theme="dark"] body::before{ filter:invert(1) contrast(1.05) saturate(.5); opacity:.24 }

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:19px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:"Source Serif 4", Georgia, "Times New Roman", serif; font-weight:600; text-wrap:balance; margin:0}
h1{font-size:clamp(30px,5.2vw,40px); line-height:1.18; letter-spacing:-.012em}
h2{font-size:clamp(22px,3.6vw,26px); line-height:1.28}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---------- chrome ---------- */
.bar{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px;
}
.mark{display:flex; align-items:baseline; gap:10px; min-width:0}
.mark strong{
  font-family:"Source Serif 4",Georgia,serif; font-weight:600; font-size:19px; letter-spacing:-.01em;
}
.mark span{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.wrap{max-width:660px; margin:0 auto; padding:40px 20px 88px}
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  box-shadow:var(--shadow); padding:clamp(24px,5vw,44px);
  display:flex; flex-direction:column; gap:26px;
}
.screen[hidden]{display:none}

/* marca d'água do gráfico no alto da tela 1 — no celular o cartão cobre o fundo
   da página, e é lá que está a maior parte do avatar (55+, mobile). Fica ATRÁS do
   título; nunca atrás dos campos, onde a legibilidade manda. */
#s1{position:relative; overflow:hidden; isolation:isolate}
#s1::before{
  content:""; position:absolute; left:0; right:0; top:0; height:min(46%,360px); z-index:-1;
  background:url("../img/oca-grafico-cor.jpg") center 50%/auto 168% no-repeat;
  opacity:.34; filter:contrast(1.06) saturate(.95);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 40%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 40%, transparent 92%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #s1::before{ filter:contrast(1.06) saturate(.85) brightness(.95); opacity:.30 }
}
:root[data-theme="dark"] #s1::before{ filter:contrast(1.06) saturate(.85) brightness(.95); opacity:.30 }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.lede{font-size:19.5px; color:var(--ink-2); max-width:56ch}
.sub-strong{
  display:inline-block; font-weight:600; font-size:17px; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:3px;
  padding:9px 14px; align-self:flex-start; max-width:none;
}
.counter{font-size:14.5px; color:var(--muted); font-family:"IBM Plex Mono",ui-monospace,monospace}
.counter[data-ok="1"]{color:var(--accent)}
.fine{font-size:15px; color:var(--muted); line-height:1.55}
.rule{height:1px; background:var(--rule); border:0; margin:0}

/* ---------- form ---------- */
.fields{display:flex; flex-direction:column; gap:22px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-weight:600; font-size:17px}
.field .hint{font-size:15px; color:var(--muted)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font:inherit; font-size:18px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--rule); border-radius:3px; padding:14px 14px; min-height:54px; width:100%;
}
textarea{min-height:110px; resize:vertical; line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.85}

.opts{display:flex; flex-direction:column; gap:10px}
.opt{
  display:flex; align-items:flex-start; gap:13px; padding:15px 16px; min-height:56px;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:3px; cursor:pointer;
  transition:border-color .12s ease, background-color .12s ease;
}
.opt:hover{border-color:var(--accent-line)}
.opt input{margin:3px 0 0; width:22px; height:22px; accent-color:var(--accent); flex:none}
.opt span{font-size:17.5px; line-height:1.45}
.opt:has(input:checked){background:var(--accent-soft); border-color:var(--accent-line)}

.consent{
  display:flex; align-items:flex-start; gap:13px; padding:16px;
  border:1px solid var(--rule); border-radius:3px; background:var(--surface-2); cursor:pointer;
}
.consent input{margin:2px 0 0; width:22px; height:22px; accent-color:var(--accent); flex:none}
.consent span{font-size:16px; line-height:1.5; color:var(--ink-2)}

button.cta{
  font:inherit; font-weight:600; font-size:19px; background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:3px; padding:17px 24px; min-height:60px;
  cursor:pointer; width:100%;
}
button.cta:disabled{opacity:.4; cursor:not-allowed}
button.ghost{
  font:inherit; font-size:17px; background:none; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:3px; padding:13px 20px; min-height:52px; cursor:pointer;
}
.actions{display:flex; gap:12px; align-items:center}
.actions .cta{flex:1}

/* ---------- video ---------- */
.player{
  position:relative; aspect-ratio:9/16; width:min(100%,380px); max-height:78vh; margin:0 auto; background:#0B121B; border:1px solid var(--rule);
  border-radius:3px; overflow:hidden; display:grid; place-items:center;
}
.player .play{
  appearance:none; border:0; background:none; cursor:pointer; color:#EAF1FA;
  display:flex; flex-direction:column; align-items:center; gap:12px; font:inherit; font-size:16px;
}
.player .disc{
  width:74px; height:74px; border-radius:50%; border:1.5px solid rgba(234,241,250,.5);
  display:grid; place-items:center;
}
.player .disc::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:19px solid #EAF1FA; border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.player .running{
  position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:0;
}
.track{height:4px; background:rgba(234,241,250,.22)}
.track i{display:block; height:100%; width:0; background:#EAF1FA}
.stamp{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; color:#B7C6D8;
  padding:9px 12px; background:rgba(11,18,27,.9); display:flex; justify-content:space-between;
}
.gatenote{font-size:16px; color:var(--muted); text-align:center}

/* ---------- barra de análise (tela 4) ----------
   INDETERMINADA de propósito: não mostra porcentagem nem "faltam X%".
   Nada está sendo processado em tempo real — a leitura é humana e leva horas.
   Barra com percentual seria teatro, e teatro é o que a base menos perdoa
   (objeção nº 1 = desconfiança). Indeterminada comunica ESTADO, não progresso. */
.analise{
  border:1px solid var(--rule); border-radius:3px; background:var(--surface-2);
  padding:18px 20px; display:flex; flex-direction:column; gap:12px;
}
.analise-top{display:flex; align-items:center; gap:10px}
.analise-lab{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
}
.analise-dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation:pulsa 1.8s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:.25}50%{opacity:1}}
.analise-trilho{
  position:relative; height:6px; border-radius:99px; overflow:hidden;
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.analise-trilho i{
  position:absolute; inset:0 auto 0 0; width:38%; border-radius:99px;
  background:var(--accent); animation:corre 2.4s cubic-bezier(.55,0,.35,1) infinite;
}
@keyframes corre{
  0%{left:-38%} 100%{left:100%}
}
.analise-pe{margin:0}
@media (prefers-reduced-motion:reduce){
  .analise-dot{animation:none; opacity:.9}
  .analise-trilho i{animation:none; left:0; width:100%; opacity:.45}
}

/* ---------- espera ---------- */
.contactbox{
  border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:3px;
  padding:20px; display:flex; flex-direction:column; gap:6px;
}
.contactbox b{font-size:21px; font-family:"IBM Plex Mono",ui-monospace,monospace; letter-spacing:.02em}


/* ---------- produção ---------- */
.player video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0B121B}
.player .play{position:absolute; inset:0; justify-content:center; background:rgba(11,18,27,.38); z-index:2}
.player .play[hidden]{display:none}
.player .running{z-index:3}
.player .pause{
  position:absolute; inset:0; z-index:2; background:none; border:0; cursor:pointer;
}
.player .sound{
  position:absolute; top:10px; right:10px; z-index:4; font:inherit; font-size:14px;
  background:rgba(11,18,27,.82); color:#EAF1FA; border:1px solid rgba(234,241,250,.35);
  border-radius:3px; padding:8px 12px; cursor:pointer;
}
.contactbox[hidden]{display:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.err{font-size:15.5px; color:var(--warn-ink); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:3px; padding:12px 14px}
.err[hidden]{display:none}
.saude{
  border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:3px;
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.saude p{font-size:16px; line-height:1.5; color:var(--ink-2)}
.apoio{font-size:15px; color:var(--muted); line-height:1.55; border-top:1px solid var(--rule); padding-top:16px}
.foot{max-width:660px; margin:0 auto; padding:0 20px 40px; font-size:14px; color:var(--muted); text-align:center}
.foot a{color:var(--muted)}
.bar{justify-content:flex-start}