/* =====================================================================
   RAIO-X DE CARREIRA — folha única
   Palco principal: 390px de largura. Tudo é validado ali primeiro.
   Paleta e movimento herdados do Diagnóstico dos Sabotadores: é a mesma
   marca e a pessoa pode receber os dois links.
   ===================================================================== */

:root{
  --bg1:#111111; --bg2:#1C252C;
  --brasa:#B5341B; --brasa-2:#d24326;
  --aco:#4A5C66;  --aco-claro:#6b8090;
  --ouro:#FFD700;
  --texto:#FFFFFF; --texto-suave:#E0E0E0; --texto-fraco:#9fb0b9;
  --card:#18222A; --card-2:#141C22;
  --linha:rgba(255,255,255,.09);
  --linha-forte:rgba(255,255,255,.16);
  --verde:#3E8E6E;

  /* Cores dos 4 perfis. Vivem aqui porque o JS também as lê. */
  --perfil-D:#B5341B; --perfil-I:#C9862B; --perfil-S:#4A7C84; --perfil-C:#5C6E9E;

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --raio:8px;
  --sombra:0 18px 40px -18px rgba(0,0,0,.75);
  --maxw:640px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  color:var(--texto);
  background:linear-gradient(160deg,var(--bg1) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:rgba(181,52,27,.55); color:#fff; }

a{ color:var(--ouro); }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-visible,
.opcao:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 18px; }
.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; }

/* =====================================================================
   MÁQUINA DE TELAS — slide horizontal, entra pela direita
   ===================================================================== */
.screen{ display:none; }
.screen.active{ display:block; animation:entraDireita .3s cubic-bezier(.22,.61,.36,1) both; }
.screen.active.voltando{ animation-name:entraEsquerda; }
@keyframes entraDireita{ from{ opacity:0; transform:translateX(26px); } }
@keyframes entraEsquerda{ from{ opacity:0; transform:translateX(-26px); } }

/* =====================================================================
   BARRA DE PROGRESSO — anima junto com a transição, nunca salta
   ===================================================================== */
.progresso{ position:fixed; top:0; left:0; right:0; height:5px;
  background:rgba(0,0,0,.55); z-index:1000; display:none; }
body[data-fase="quiz"] .progresso{ display:block; }
.progresso-fill{ height:100%; width:0%;
  background:linear-gradient(90deg,var(--aco),var(--brasa),var(--ouro));
  transition:width .4s cubic-bezier(.175,.885,.32,1.275); }
@keyframes barraPulso{ 50%{ transform:scaleY(2.1); filter:brightness(1.7); } }
.progresso-fill.pulso{ animation:barraPulso .35s ease-out; }
.progresso-num{ position:fixed; top:11px; right:14px; z-index:1000;
  font-size:12px; letter-spacing:.04em; color:var(--texto-fraco);
  background:rgba(0,0,0,.5); padding:3px 10px; border-radius:999px;
  display:none; font-variant-numeric:tabular-nums; }
body[data-fase="quiz"] .progresso-num{ display:block; }

/* =====================================================================
   ABERTURA
   ===================================================================== */
#t-abertura .wrap{ min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; padding-top:48px; padding-bottom:40px; }
.selo{ font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--aco-claro); margin-bottom:20px; }
.headline{ font-family:var(--serif); font-weight:700; font-size:clamp(29px,8.2vw,42px);
  line-height:1.14; margin:0 0 18px; letter-spacing:-.01em; }
.apoio{ color:var(--texto-suave); font-size:16px; margin:0 0 30px; max-width:34em; }

.btn{ display:block; width:100%; border:0; cursor:pointer;
  font-family:var(--sans); font-size:16.5px; font-weight:650; letter-spacing:.01em;
  padding:17px 22px; border-radius:var(--raio); min-height:56px;
  background:linear-gradient(180deg,var(--brasa-2),var(--brasa)); color:#fff;
  box-shadow:0 10px 26px -12px rgba(181,52,27,.9);
  transition:transform .15s ease, filter .2s ease; }
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:scale(.985); }
.btn[disabled]{ opacity:.5; cursor:default; }
.btn-secundario{ background:transparent; border:1px solid var(--linha-forte);
  color:var(--texto-suave); box-shadow:none; }

.pe-abertura{ margin-top:22px; font-size:13px; color:var(--texto-fraco); }
.pe-abertura a{ color:var(--texto-fraco); text-decoration:underline; }

/* =====================================================================
   TELAS DE PERGUNTA
   ===================================================================== */
.pergunta-wrap{ min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; padding-top:58px; padding-bottom:34px; }
.bloco-tag{ font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aco-claro); margin-bottom:14px; }
.pergunta{ font-family:var(--serif); font-weight:700;
  font-size:clamp(23px,6.4vw,31px); line-height:1.24; margin:0 0 8px; }
.pergunta-apoio{ color:var(--texto-fraco); font-size:14.5px; margin:0 0 22px; }

.opcoes{ display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none; }
.opcao{ position:relative; display:flex; align-items:center; gap:13px;
  width:100%; min-height:56px; padding:13px 15px; cursor:pointer;
  background:var(--card); border:1px solid var(--linha); border-radius:var(--raio);
  color:var(--texto-suave); font-size:15.5px; text-align:left;
  transition:border-color .2s, background .2s, color .2s; }
.opcao:hover{ border-color:var(--linha-forte); background:var(--card-2); }
.opcao input{ position:absolute; opacity:0; width:1px; height:1px; }
.opcao .marca{ flex:0 0 22px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--aco); display:grid; place-items:center; transition:all .2s; }
.opcao .marca::after{ content:''; width:9px; height:9px; border-radius:50%;
  background:var(--ouro); transform:scale(0); transition:transform .18s ease-out; }
.opcao.selecionada{ border-color:var(--ouro); background:rgba(255,215,0,.11); color:var(--texto); }
.opcao.selecionada .marca{ border-color:var(--ouro); }
.opcao.selecionada .marca::after{ transform:scale(1); }

/* Recompensa: a opção pulsa em dourado no clique. O reflow forçado no JS
   é o que permite re-disparar quando a pessoa troca de ideia. */
@keyframes aura{
  0%  { transform:scale(1);    box-shadow:0 0 0 0 rgba(255,215,0,0); }
  50% { transform:scale(1.035); box-shadow:0 0 22px 6px rgba(255,215,0,.42); }
  100%{ transform:scale(1);    box-shadow:0 0 8px 1px rgba(255,215,0,.22); }
}
.opcao.pulso{ animation:aura .42s ease-out; z-index:2; }

/* Múltipla escolha: marca quadrada, e a tela ganha um botão de continuar. */
.opcao.multi .marca{ border-radius:5px; }
.opcao.multi .marca::after{ width:11px; height:6px; border-radius:0; background:transparent;
  border-left:2px solid var(--ouro); border-bottom:2px solid var(--ouro);
  transform:rotate(-45deg) scale(0); margin-top:-3px; }
.opcao.multi.selecionada .marca::after{ transform:rotate(-45deg) scale(1); }
.contador-multi{ margin-top:16px; font-size:13px; color:var(--texto-fraco);
  font-variant-numeric:tabular-nums; }
.acao-tela{ margin-top:16px; }

/* Escala 1–5: numerada, com âncoras nas pontas. */
.escala-ancoras{ display:flex; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--texto-fraco); margin-bottom:9px; letter-spacing:.02em; }
.opcao .num{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700;
  color:var(--aco-claro); font-size:13px; min-width:14px; }
.opcao.selecionada .num{ color:var(--ouro); }

.voltar{ margin-top:20px; background:none; border:0; cursor:pointer;
  color:var(--texto-fraco); font-family:var(--sans); font-size:13.5px;
  padding:8px 0; text-align:left; }
.voltar:hover{ color:var(--texto-suave); }
.dica-teclado{ margin-top:14px; font-size:12px; color:rgba(159,176,185,.65); }

/* =====================================================================
   MARCOS DE PERCURSO — telas de respiro entre blocos
   ===================================================================== */
.marco-wrap{ min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; padding:58px 0 34px; }
.marco-traco{ width:44px; height:2px; background:var(--brasa); margin-bottom:22px; }
.marco-titulo{ font-family:var(--serif); font-weight:700;
  font-size:clamp(26px,7vw,34px); line-height:1.2; margin:0 0 14px; }
.marco-texto{ color:var(--texto-suave); font-size:16px; margin:0 0 28px; max-width:32em; }

/* =====================================================================
   CENA DE ANÁLISE
   ===================================================================== */
#t-analise .wrap{ min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; }
.anel{ width:120px; height:120px; margin-bottom:30px; }
.anel-base{ fill:none; stroke:var(--aco); stroke-opacity:.25; stroke-width:3; }
.anel-varredura{ fill:none; stroke:var(--brasa); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:82 245; transform-origin:60px 60px; animation:varre 1.6s linear infinite; }
@keyframes varre{ to{ transform:rotate(360deg); } }

.etapas{ list-style:none; margin:0 0 26px; padding:0; text-align:left; width:100%; max-width:340px; }
.etapa{ opacity:.32; transition:opacity .3s; font-size:14.5px; color:var(--texto-suave);
  padding:7px 0; display:flex; align-items:center; gap:10px; }
.etapa.ativa{ opacity:1; }
.etapa.feita{ opacity:.75; }
.etapa::before{ content:''; display:inline-block; width:10px; height:5px;
  border-left:2px solid transparent; border-bottom:2px solid transparent;
  transform:rotate(-45deg); flex:0 0 10px; margin-top:-3px; }
.etapa.feita::before{ border-color:var(--ouro); }

.barra-analise{ width:100%; max-width:340px; height:3px;
  background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.barra-analise i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--brasa),var(--ouro)); }

/* =====================================================================
   RESULTADO — cabeçalho e revelação
   ===================================================================== */
.res-topo{ padding:52px 0 12px; }
.res-selo{ font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--aco-claro); margin-bottom:16px; }
.revelacao{ font-family:var(--serif); font-weight:700;
  font-size:clamp(27px,7.6vw,39px); line-height:1.16; margin:0 0 10px;
  letter-spacing:-.01em; }
.revelacao em{ color:var(--ouro); font-style:normal; }

/* =====================================================================
   GRÁFICOS
   Tudo SVG desenhado à mão: nenhuma biblioteca, nenhum CDN. Chart.js
   custaria ~200 KB para desenhar quatro coisas que cabem em SVG puro, e
   a meta é a primeira tela em menos de 2s no 4G.
   ===================================================================== */
.gr{ background:var(--card); border:1px solid var(--linha); border-radius:var(--raio);
  padding:22px 18px; margin:26px 0; box-shadow:var(--sombra); }
.gr-tag{ font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--aco-claro); margin-bottom:8px; }
.gr-titulo{ font-family:var(--serif); font-size:20.5px; font-weight:700;
  margin:0 0 4px; line-height:1.26; }
.gr-legenda{ font-size:14px; color:var(--texto-fraco); margin:0 0 18px; }
.gr-nota{ font-size:14.5px; color:var(--texto-suave); margin:16px 0 0; }

/* --- 1. Barras dos 4 fatores --- */
.fatores{ display:flex; flex-direction:column; gap:11px; }
.fator{ display:grid; grid-template-columns:78px 1fr; align-items:center; gap:11px; }
.fator-nome{ font-size:13px; color:var(--texto-fraco); letter-spacing:.02em; }
.fator.dom .fator-nome{ color:var(--ouro); font-weight:650; }
.fator-trilho{ height:11px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden; }
.fator-barra{ height:100%; width:0; border-radius:6px;
  background:var(--aco); transition:width .8s cubic-bezier(.2,.8,.3,1); }
.fator.dom .fator-barra{ background:linear-gradient(90deg,var(--brasa),var(--ouro)); }
.fator-cadeado{ font-size:12px; color:var(--texto-fraco); display:inline-flex;
  align-items:center; gap:5px; }

/* --- 2. Velocímetro do score --- */
.veloc{ position:relative; text-align:center; }
.veloc svg{ width:100%; max-width:290px; height:auto; }
.veloc-arco-base{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:13; stroke-linecap:round; }
.veloc-arco{ fill:none; stroke:url(#gradArco); stroke-width:13; stroke-linecap:round; }
.veloc-num{ font-family:var(--serif); font-weight:700; font-size:52px;
  line-height:1; margin:-64px 0 0; font-variant-numeric:tabular-nums; }
.veloc-de{ font-size:12.5px; color:var(--texto-fraco); margin:4px 0 0; }
.veloc-faixa{ margin:22px 0 0; font-family:var(--serif); font-size:23px; font-weight:700;
  color:var(--ouro); opacity:0; transition:opacity .5s ease; }
.veloc-faixa.aparece{ opacity:1; }

/* --- 3. Régua da distância — a visualização mais importante --- */
.regua{ position:relative; margin:34px 0 8px; height:96px; }
.regua-trilho{ position:absolute; left:0; right:0; top:44px; height:6px;
  background:rgba(255,255,255,.08); border-radius:3px; }
.regua-faixa{ position:absolute; top:44px; height:6px; border-radius:3px;
  background:linear-gradient(90deg,rgba(181,52,27,.75),rgba(255,215,0,.75));
  left:0; width:0; transition:left .5s ease, width .7s cubic-bezier(.2,.8,.3,1); }
.marcador{ position:absolute; top:30px; transform:translateX(-50%);
  opacity:0; transition:opacity .4s ease, left .7s cubic-bezier(.2,.8,.3,1); }
.marcador.aparece{ opacity:1; }
.marcador i{ display:block; width:15px; height:15px; border-radius:50%;
  border:3px solid var(--bg2); margin:0 auto; }
.marcador.hoje i{ background:var(--texto-suave); }
.marcador.teto i{ background:var(--ouro); }
.marcador b{ position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:11px; font-weight:600; letter-spacing:.02em; }
.marcador.hoje b{ top:20px; color:var(--texto-suave); }
.marcador.teto b{ bottom:20px; color:var(--ouro); }
.marcador em{ position:absolute; left:50%; transform:translateX(-50%);
  font-style:normal; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.marcador.hoje em{ top:34px; color:var(--texto); }
.marcador.teto em{ bottom:34px; color:var(--ouro); }
.regua-distancia{ text-align:center; font-size:15px; color:var(--texto-suave);
  margin-top:6px; opacity:0; transition:opacity .45s ease; }
.regua-distancia.aparece{ opacity:1; }
.regua-distancia b{ color:var(--ouro); font-size:19px; font-variant-numeric:tabular-nums; }

/* --- 4. Habilidades --- */
.habs{ display:flex; flex-direction:column; gap:10px; }
.hab{ display:grid; grid-template-columns:1fr; gap:5px; }
.hab-topo{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.hab-nome{ font-size:14px; color:var(--texto-suave); }
.hab.destaque .hab-nome{ color:var(--texto); font-weight:600; }
.hab-demanda{ font-size:11px; color:var(--texto-fraco); letter-spacing:.06em;
  text-transform:uppercase; flex:0 0 auto; }
.hab.destaque .hab-demanda{ color:var(--ouro); }
.hab-trilho{ height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.hab-barra{ height:100%; width:0; border-radius:4px; background:var(--aco);
  transition:width .65s cubic-bezier(.2,.8,.3,1); }
.hab.destaque .hab-barra{ background:linear-gradient(90deg,var(--brasa),var(--ouro)); }
.habs-vazio{ font-size:14.5px; color:var(--texto-fraco); }

/* =====================================================================
   BLOCOS DO RELATÓRIO
   ===================================================================== */
.bloco{ background:var(--card); border:1px solid var(--linha); border-radius:var(--raio);
  padding:24px 19px; margin:20px 0; box-shadow:var(--sombra); }
.bloco h3{ font-family:var(--serif); font-size:21px; font-weight:700; margin:0 0 14px;
  line-height:1.26; }
.bloco p{ margin:0 0 13px; color:var(--texto-suave); font-size:15.5px; }
.bloco p:last-child{ margin-bottom:0; }
.bloco .citacao{ border-left:2px solid var(--brasa); padding:2px 0 2px 15px;
  margin:0 0 15px; font-family:var(--serif); font-size:17px; font-style:italic;
  color:var(--texto); }

.travamento{ border-top:1px solid var(--linha); padding-top:15px; margin-top:15px; }
.travamento h4{ font-size:15.5px; margin:0 0 7px; color:var(--ouro); font-weight:650; }
.travamento .fazer{ font-size:14.5px; color:var(--texto-suave); margin-top:8px;
  padding-left:13px; border-left:2px solid var(--aco); }

.arma{ margin-top:20px; border:1px solid var(--linha-forte); border-radius:var(--raio);
  padding:17px 16px; background:var(--card-2); }
.arma .rotulo{ font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--aco-claro); margin-bottom:9px; }
.arma ol{ margin:10px 0; padding-left:20px; color:var(--texto-suave); font-size:15px; }
.arma li{ margin-bottom:6px; }
.arma .meta{ font-size:13px; color:var(--texto-fraco); margin-top:10px; }

/* Revelação progressiva na rolagem: cada bloco entra uma única vez. */
.revela{ opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }
.revela.visivel{ opacity:1; transform:none; }

/* =====================================================================
   PORTÃO — blocos bloqueados e formulário
   ===================================================================== */
.trancado{ position:relative; }
.trancado .bloco{ filter:blur(6px); user-select:none; pointer-events:none; }
.trancado::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,0) 0%,rgba(17,17,17,.55) 72%,var(--bg2) 100%); }
.cadeado{ position:absolute; inset:0; display:grid; place-items:start center;
  padding-top:52px; z-index:2; pointer-events:none; }
.cadeado-caixa{ text-align:center; }
.cadeado svg{ width:30px; height:30px; opacity:.9; }
.cadeado span{ display:block; margin-top:9px; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-fraco); }

/* Títulos legíveis por cima do borrão: ver o que existe do outro lado
   converte muito mais do que apenas prometer. */
.trancado .bloco h3{ filter:none; }
.titulos-trancados{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px; }
.titulos-trancados li{ display:flex; align-items:center; gap:11px;
  font-size:15px; color:var(--texto-suave); padding:12px 14px;
  background:var(--card-2); border:1px solid var(--linha); border-radius:var(--raio); }
.titulos-trancados svg{ flex:0 0 15px; opacity:.65; }

.portao{ margin:8px 0 30px; }
.portao h2{ font-family:var(--serif); font-size:clamp(23px,6.2vw,29px);
  font-weight:700; line-height:1.22; margin:0 0 8px; }
.portao .sub{ color:var(--texto-fraco); font-size:15px; margin:0 0 20px; }

.campo{ margin-bottom:13px; }
.campo label{ display:block; font-size:13px; color:var(--texto-fraco); margin-bottom:6px; }
.campo input[type=text], .campo input[type=email], .campo input[type=tel]{
  width:100%; min-height:54px; padding:14px 15px; font-size:16px; /* 16px evita zoom no iOS */
  font-family:var(--sans); color:var(--texto);
  background:var(--card); border:1px solid var(--linha-forte); border-radius:var(--raio);
  transition:border-color .2s; }
.campo input::placeholder{ color:rgba(159,176,185,.55); }
.campo input:focus{ border-color:var(--ouro); outline:none; }
.campo.erro input{ border-color:var(--brasa-2); }
.campo .msg{ display:none; margin-top:6px; font-size:13px; color:var(--brasa-2); }
.campo.erro .msg{ display:block; }

.linha-tel{ display:flex; gap:9px; align-items:center; }
.linha-tel input{ flex:1; }
.fora-br{ display:flex; align-items:center; gap:8px; margin-top:9px;
  font-size:13px; color:var(--texto-fraco); cursor:pointer; }
.fora-br input{ width:17px; height:17px; accent-color:var(--brasa); }

.consent{ display:flex; gap:11px; align-items:flex-start; margin:16px 0 18px;
  font-size:13.5px; color:var(--texto-fraco); cursor:pointer; line-height:1.5; }
.consent input{ margin-top:3px; width:19px; height:19px; flex:0 0 19px; accent-color:var(--brasa); }
.consent a{ color:var(--texto-suave); }

/* Armadilha para robô: fora da tela, sem display:none (que alguns robôs
   detectam) e escondida de leitor de tela. */
.armadilha{ position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden; }

.microcopy{ font-size:13px; color:var(--texto-fraco); margin-top:12px; text-align:center; }
.aviso-erro{ display:none; margin-top:14px; padding:12px 14px; border-radius:var(--raio);
  background:rgba(181,52,27,.16); border:1px solid rgba(181,52,27,.5);
  color:var(--texto-suave); font-size:14px; }
.aviso-erro.aparece{ display:block; }

/* Desbloqueio: o borrão se dissolve, o cadeado some, a página desce sozinha. */
.trancado.abrindo .bloco{ transition:filter .85s ease; filter:blur(0); }
.trancado.abrindo::after{ transition:opacity .6s ease; opacity:0; }
.trancado.abrindo .cadeado{ transition:opacity .45s ease; opacity:0; }
.trancado.aberto .bloco{ filter:none; user-select:auto; pointer-events:auto; }
.trancado.aberto::after, .trancado.aberto .cadeado{ display:none; }

/* =====================================================================
   CTA DA COMUNIDADE
   ===================================================================== */
.comunidade{ background:linear-gradient(160deg,#16302a,#12211f);
  border:1px solid rgba(62,142,110,.4); border-radius:var(--raio);
  padding:24px 19px; margin:26px 0; }
.comunidade .rotulo{ font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#7fc9a8; margin-bottom:10px; }
.comunidade h3{ font-family:var(--serif); font-size:22px; font-weight:700;
  margin:0 0 10px; line-height:1.24; }
.comunidade p{ color:var(--texto-suave); font-size:15px; margin:0 0 18px; }
.btn-zap{ background:linear-gradient(180deg,#3fa376,#2f7d5a);
  box-shadow:0 10px 26px -12px rgba(62,142,110,.9); text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:9px; }
.btn-zap svg{ width:19px; height:19px; flex:0 0 19px; }

.rodape{ padding:34px 0 46px; text-align:center; font-size:12.5px; color:var(--texto-fraco); }
.rodape a{ color:var(--texto-fraco); }

/* =====================================================================
   TELAS MAIORES
   ===================================================================== */
@media (min-width:700px){
  .gr, .bloco{ padding:28px 26px; }
  .opcao{ font-size:16px; }
}

/* =====================================================================
   REDUCED MOTION
   Estado final, sem espetáculo. A cena de análise MANTÉM as etapas de
   texto (são informação, não enfeite) — só encurta e não gira o anel.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .revela{ opacity:1; transform:none; }
  .anel-varredura{ animation:none; }
}

/* Texto longo da régua: entra abaixo da frase com o número, alinhado à
   esquerda porque são dois parágrafos — centralizar texto corrido de duas
   linhas para cima cansa a leitura no celular. */
.regua-longo{ display:block; margin-top:12px; text-align:left; font-size:14.5px;
  color:var(--texto-fraco); line-height:1.6; }