/* ================================================================
   Rastreio Cognitivo Interativo — estilos da mini-SPA pública.
   Usa SOMENTE variáveis/aliases de /css/tokens.css (carregado antes
   deste arquivo). Mobile-first (base 375px), sem imports externos.
   ================================================================ */

/* ----------------------------------------------------------------
   Base da página
   ---------------------------------------------------------------- */
.rst-body{
  background:var(--bg-app);
  color:var(--text);
  font-family:'Plus Jakarta Sans', var(--font-ui);
  min-height:100vh;
}

.rst-main{
  max-width:720px;
  margin:0 auto;
  padding:24px 18px 64px;
}

.rst-main h1,
.rst-main h2,
.rst-main h3{
  font-family:'Instrument Serif', Georgia, serif;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.12;
  color:var(--text);
  margin:0 0 12px;
}

.rst-main p{ margin:0 0 14px; color:var(--muted); line-height:1.6; }

.rst-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:22px 18px;
  margin-bottom:18px;
}

/* Telas — controladas via [hidden] pelo JS */
.rst-screen[hidden]{ display:none !important; }
.rst-screen{ animation:rst-fade .35s ease both; }

@keyframes rst-fade{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------
   HERO / LANDING — #tela-landing
   ---------------------------------------------------------------- */
.rst-hero{
  text-align:center;
  padding:28px 4px 8px;
}

.rst-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:999px;
  padding:6px 14px;
  margin-bottom:14px;
}

.rst-hero h1{ font-size:clamp(28px,7vw,40px); }
.rst-hero .rst-sub{ font-size:16px; max-width:52ch; margin:0 auto 18px; }

.rst-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:22px;
}

.rst-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  padding:7px 12px;
  border-radius:999px;
  background:var(--lilac-50);
  color:var(--lilac-700);
}
.rst-badge.b-blue{ background:var(--blue-50); color:var(--blue-700); }
.rst-badge.b-green{ background:var(--green-50); color:var(--green-700); }
.rst-badge.b-pink{ background:var(--pink-50); color:var(--pink-700); }

/* Como funciona — 3 passos */
.rst-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:18px 0 6px;
}

.rst-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-align:left;
  background:var(--bg-app);
  border-radius:var(--radius);
  padding:14px 16px;
}

.rst-step-n{
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rst-step p{ margin:0; font-size:14px; }
.rst-step strong{ display:block; color:var(--text); font-size:15px; margin-bottom:2px; }

/* Faixa de transparência ética */
.rst-ethics{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--lilac-50);
  border:1px solid var(--lilac-200);
  border-radius:var(--radius);
  padding:16px;
  text-align:left;
}
.rst-ethics .ic{ flex:none; font-size:20px; line-height:1; }
.rst-ethics p{ margin:0; font-size:13.5px; color:var(--ink-2); }

/* Formulário de início */
.rst-form-group{ text-align:left; margin-bottom:16px; }
.rst-form-group label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}

.rst-select{
  width:100%;
  min-height:48px;
  border-radius:12px;
  border:1px solid var(--lilac-200);
  background:var(--paper);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  padding:0 14px;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4FA8' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
}
.rst-select:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

.rst-check-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  color:var(--ink-2);
  text-align:left;
  line-height:1.5;
}
.rst-check-row input[type="checkbox"]{
  flex:none;
  width:22px;
  height:22px;
  margin-top:1px;
  accent-color:var(--brand);
}
.rst-check-row a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }

.rst-msg-erro{
  color:var(--danger);
  font-size:13.5px;
  font-weight:600;
  margin-top:10px;
  min-height:0;
}
.rst-msg-erro:empty{ display:none; }

/* Botões grandes de toque (>=48px) */
.rst-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:52px;
  padding:14px 22px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  border:0;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.rst-btn:disabled{ opacity:.45; cursor:not-allowed; }

.rst-btn-primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 24px -10px rgba(107,79,168,.55);
}
.rst-btn-primary:not(:disabled):hover{ transform:translateY(-2px); }

.rst-btn-ghost{
  background:var(--card);
  color:var(--brand);
  border:1px solid var(--lilac-200);
}
.rst-btn-ghost:not(:disabled):hover{ background:var(--brand-soft); }

.rst-btn-small{ width:auto; min-height:44px; padding:10px 18px; font-size:14px; }

/* Bloco "continuar de onde parei" */
#bloco-retomar{
  background:var(--lilac-50);
  border:1px dashed var(--lilac-200);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:18px;
  text-align:left;
}
#bloco-retomar p{ margin:0 0 12px; font-size:14px; color:var(--ink-2); }

/* FAQ curto da landing */
.rst-faq-item{ border-bottom:1px solid var(--line, rgba(31,26,58,.1)); padding:12px 0; text-align:left; }
.rst-faq-item:last-child{ border-bottom:0; }
.rst-faq-q{ font-weight:600; font-size:14.5px; margin:0 0 4px; color:var(--text); }
.rst-faq-a{ font-size:13.5px; margin:0; color:var(--muted); }

/* Disclaimers gerais */
.rst-disclaimer{
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  line-height:1.6;
  margin-top:8px;
}

/* ----------------------------------------------------------------
   BARRA DE PROGRESSO — #barra-progresso
   ---------------------------------------------------------------- */
#barra-progresso{
  display:flex;
  gap:6px;
  margin-bottom:22px;
}

#barra-progresso .seg{
  flex:1 1 0;
  height:8px;
  border-radius:999px;
  background:var(--lilac-100);
  transition:background-color .25s ease;
}

#barra-progresso .seg--feita{ background:var(--brand); }
#barra-progresso .seg--atual{
  background:var(--lilac-400);
  position:relative;
  overflow:hidden;
}
#barra-progresso .seg--atual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:rst-shimmer 1.4s ease-in-out infinite;
}

@keyframes rst-shimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* ----------------------------------------------------------------
   TELA JOGO — #tela-jogo
   ---------------------------------------------------------------- */
#jogo-titulo{ font-size:22px; text-align:center; }
#jogo-instrucao{ text-align:center; font-size:14.5px; max-width:46ch; margin:0 auto 18px; }

#jogo-area{
  min-height:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:12px 4px;
}

.rst-countdown{
  font-family:'Instrument Serif', Georgia, serif;
  font-size:64px;
  color:var(--brand);
  text-align:center;
}

/* Dica de instrução compartilhada pelos jogos (rt-dica) */
.rt-dica{
  font-size:14px;
  font-weight:600;
  color:var(--ink-2);
  text-align:center;
  margin:0;
}

/* Alvo dos jogos Reflexo e Go/No-Go (rt-alvo + estados) */
.rt-alvo{
  width:120px;
  height:120px;
  border-radius:50%;
  background:var(--lilac-100);
  border:3px solid var(--lilac-200);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:700;
  color:var(--ink-3);
  transition:background-color .12s ease, transform .12s ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* is-espera: aguardando a cor mudar (Reflexo) */
.rt-alvo.is-espera{
  background:var(--lilac-100);
  border-color:var(--lilac-200);
  color:var(--ink-3);
}
/* is-idle: entre estímulos no Go/No-Go */
.rt-alvo.is-idle{
  background:var(--lilac-100);
  border-color:var(--lilac-200);
  color:var(--ink-3);
}
/* is-go: verde ("já! toque") — Reflexo e Go */
.rt-alvo.is-go{
  background:var(--green-400);
  border-color:var(--green-700);
  color:#fff;
  transform:scale(1.05);
}
/* is-nogo: laranja/rosa ("não toque") no Go/No-Go */
.rt-alvo.is-nogo{
  background:var(--pink-400);
  border-color:var(--pink-700);
  color:#fff;
  transform:scale(1.05);
}
.rt-alvo:active{ transform:scale(.96); }
/* Modificadores por jogo (mesma base .rt-alvo; a cor vem dos estados is-*).
   O Go/No-Go usa AZUL (vai) e LARANJA (não-vai), como diz a instrução — sobrepondo
   o verde/rosa herdados do Reflexo. Mesma especificidade das regras .is-*, então
   estas vêm depois na ordem para vencer o empate. */
.rt-alvo--reflexo{ }
.rt-alvo--gonogo.is-go{ background:var(--blue-400); border-color:var(--blue-700); }
.rt-alvo--gonogo.is-nogo{ background:#F0A24B; border-color:#C56A17; }

/* Cores Teimosas (Stroop) — palavra + grade de 4 botões coloridos */
.rt-stroop-palavra{
  font-family:'Instrument Serif', Georgia, serif;
  font-size:40px;
  font-weight:400;
  margin-bottom:8px;
  text-align:center;
}
.rt-stroop-botoes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:100%;
  max-width:340px;
}
.rt-cor-btn{
  min-height:64px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
.rt-cor-btn:active{ transform:scale(.96); }

/* Sequência de Memória (Span) — grade de 4 painéis coloridos grandes */
.rt-span-grade{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:100%;
  max-width:300px;
}
.rt-painel{
  aspect-ratio:1;
  border-radius:20px;
  border:0;
  cursor:pointer;
  opacity:.55;
  background:var(--lilac-400);
  transition:opacity .12s ease, transform .12s ease;
}
.rt-painel:nth-child(1){ background:var(--lilac-400); }
.rt-painel:nth-child(2){ background:var(--blue-400); }
.rt-painel:nth-child(3){ background:var(--pink-400); }
.rt-painel:nth-child(4){ background:var(--green-400); }
.rt-painel:active{ transform:scale(.95); }
/* is-on: painel aceso durante a reprodução da sequência */
.rt-painel.is-on{ opacity:1; box-shadow:0 0 0 4px rgba(255,255,255,.7) inset; }
/* is-tap: feedback breve ao tocar o painel */
.rt-painel.is-tap{ opacity:1; transform:scale(.95); }

/* Troca de Regra (Switch) — pista + estímulo + botões */
.rt-switch-pista{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:999px;
  padding:6px 16px;
  text-align:center;
}
.rt-switch-pista--cor{ color:var(--blue-700); background:var(--blue-50); }
.rt-switch-pista--forma{ color:var(--lilac-700); background:var(--lilac-50); }

.rt-switch-estimulo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
}
.rt-shape{ width:80px; height:80px; }
.rt-shape--circulo{ border-radius:50%; }
.rt-shape--quadrado{ border-radius:14px; }

.rt-switch-botoes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
  max-width:300px;
}
.rt-switch-btn{
  min-height:56px;
  border-radius:16px;
  border:1px solid var(--lilac-200);
  background:var(--paper);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .12s ease, transform .1s ease;
}
.rt-switch-btn:active{ transform:scale(.96); }
.rt-switch-btn:hover{ border-color:var(--brand); }

/* Padrões (Matrizes) — grade 3x3 (SVG inline) + opções */
.rt-matriz-grade{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}
.rt-matriz-grade svg{ width:180px; height:auto; }

.rt-matriz-opcoes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
  max-width:280px;
}
.rt-matriz-op{
  aspect-ratio:1;
  background:var(--paper);
  border:2px solid var(--lilac-200);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .12s ease, transform .1s ease;
}
.rt-matriz-op svg{ width:60%; height:60%; }
.rt-matriz-op:active{ transform:scale(.96); }
.rt-matriz-op:hover{ border-color:var(--brand); }

/* Cartão de conclusão de fase (rt-conclusao) */
.rt-conclusao{
  text-align:center;
  padding:8px 4px;
}
.rt-medalha{ font-size:56px; line-height:1; margin-bottom:10px; }
.rt-conclusao-titulo{
  font-family:'Instrument Serif', Georgia, serif;
  font-size:24px;
  color:var(--text);
  margin:0 0 6px;
}
.rt-conclusao-sub{ font-size:14.5px; color:var(--muted); margin:0 0 18px; }
.rt-btn-continuar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 28px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:16px;
  font-weight:700;
  font-family:inherit;
  border:0;
  cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(107,79,168,.55);
}
.rt-btn-continuar:disabled{ opacity:.45; cursor:not-allowed; }

/* Faixa de erro de rede (retry manual) — rt-erro-rede / rt-retry-btn */
.rt-erro-rede{
  background:var(--pink-50);
  border:1px solid var(--pink-200);
  border-radius:12px;
  padding:14px 16px;
  text-align:center;
  margin-top:12px;
}
.rt-erro-rede p{ margin:0 0 10px; font-size:13.5px; color:var(--ink-2); }
.rt-retry-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 20px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  border:0;
  cursor:pointer;
}

#btn-iniciar-jogo{ margin-top:8px; }

/* ----------------------------------------------------------------
   CHECK-IN — #tela-checkin / #checkin-area
   ---------------------------------------------------------------- */
/* Título do check-in (rt-checkin-titulo) */
.rt-checkin-titulo{
  font-family:'Instrument Serif', Georgia, serif;
  font-size:22px;
  color:var(--text);
  text-align:center;
  margin:0 0 18px;
}

/* Bloco de pergunta (rt-checkin-q) + enunciado (rt-checkin-perg) */
.rt-checkin-q{ margin-bottom:22px; }
.rt-checkin-perg{ font-size:15.5px; color:var(--text); font-weight:600; margin-bottom:12px; }

.rt-likert{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
}

/* Botão "Continuar" do check-in (rt-checkin-continuar) */
.rt-checkin-continuar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:52px;
  margin-top:8px;
  padding:14px 22px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:16px;
  font-weight:700;
  font-family:inherit;
  border:0;
  cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(107,79,168,.55);
}
.rt-checkin-continuar:disabled{ opacity:.45; cursor:not-allowed; }

.likert-op{
  min-height:48px;
  border-radius:12px;
  border:1px solid var(--lilac-200);
  background:var(--paper);
  color:var(--ink-2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 4px;
  text-align:center;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.likert-op.is-sel{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

/* ----------------------------------------------------------------
   LOADING — #tela-loading
   ---------------------------------------------------------------- */
#tela-loading{
  text-align:center;
  padding:60px 20px;
}

.rst-spinner{
  width:56px;
  height:56px;
  margin:0 auto 20px;
  border-radius:50%;
  border:5px solid var(--lilac-100);
  border-top-color:var(--brand);
  animation:rst-spin 1s linear infinite;
}

@keyframes rst-spin{
  to{ transform:rotate(360deg); }
}

.rst-loading-msg{ font-size:15px; color:var(--muted); }

/* ----------------------------------------------------------------
   RESULTADO — #tela-resultado
   ---------------------------------------------------------------- */
#res-eixos{ display:flex; flex-direction:column; gap:16px; margin-bottom:8px; }

.eixo{ }

.eixo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.eixo-nome{ font-size:14.5px; font-weight:700; color:var(--text); }

.eixo-track{
  width:100%;
  height:14px;
  border-radius:999px;
  background:var(--lilac-50);
  overflow:hidden;
}

.eixo-fill{
  height:100%;
  border-radius:999px;
  background:var(--brand);
  transition:width .6s ease;
}

.faixa-tag{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}

/* Faixas — 3 cores (verde / lilás / rosa) conforme paleta de tokens.css */
.faixa-tag.f-fluiu_bem{ background:var(--green-100); color:var(--green-700); }
.faixa-tag.f-vale_observar{ background:var(--lilac-100); color:var(--lilac-700); }
.faixa-tag.f-vale_investigar{ background:var(--pink-100); color:var(--pink-700); }

.eixo.f-fluiu_bem .eixo-fill{ background:var(--green-700); }
.eixo.f-vale_observar .eixo-fill{ background:var(--lilac-700); }
.eixo.f-vale_investigar .eixo-fill{ background:var(--pink-700); }

/* Percepção (check-ins) */
#res-percepcao{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rt-perc-titulo{ font-size:14.5px; font-weight:700; color:var(--text); margin:0 0 6px; }
.rt-perc-lista{
  margin:0 0 6px;
  padding-left:20px;
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.6;
}
.rt-perc-lista li{ margin:0 0 4px; }

/* Análise textual — preenchida via textContent pelo JS (parágrafos) */
#res-analise{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:15px;
  color:var(--ink-2);
  line-height:1.65;
}
#res-analise p{ margin:0; }

/* Disclaimer fixo do resultado */
#res-disclaimer{
  font-size:12.5px;
  color:var(--muted);
  background:var(--bg-app);
  border-radius:12px;
  padding:12px 14px;
  line-height:1.6;
  margin:6px 0 4px;
}

/* CTA WhatsApp do resultado */
#btn-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:52px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  font-weight:700;
  font-size:16px;
  border:0;
  cursor:pointer;
  text-decoration:none;
}

/* Form de contato */
#form-contato .rst-form-group input[type="text"],
#form-contato .rst-form-group input[type="email"]{
  width:100%;
  min-height:48px;
  border-radius:12px;
  border:1px solid var(--lilac-200);
  background:var(--paper);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  padding:0 14px;
}
#form-contato .rst-form-group input:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Status do envio do form de contato (rt-contato-status) */
.rt-contato-status{
  font-size:13.5px;
  font-weight:600;
  margin-top:10px;
}
.rt-contato-status.is-ok{ color:var(--green-700); }
.rt-contato-status.is-erro{ color:var(--danger); }

/* Apagar dados — ação destrutiva discreta */
#btn-apagar-dados{
  background:transparent;
  color:var(--danger);
  border:1px solid var(--pink-200);
  width:100%;
}
#btn-apagar-dados:hover{ background:var(--pink-50); }

/* ----------------------------------------------------------------
   Breakpoints — mobile-first, base 375px
   ---------------------------------------------------------------- */
@media (min-width:600px){
  .rst-main{ padding:40px 24px 80px; }
  .rst-steps{ grid-template-columns:repeat(3,1fr); }
  .rst-hero h1{ font-size:44px; }
  .rt-likert{ grid-template-columns:repeat(5,1fr); }
  .rst-btn{ width:auto; }
  #btn-comecar, #btn-retomar, #btn-iniciar-jogo{ width:100%; }
}

@media (min-width:900px){
  .rst-main{ max-width:820px; }
}

/* ----------------------------------------------------------------
   Acessibilidade de movimento
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  #barra-progresso .seg--atual::after{ animation:none; }
  .rst-spinner{ animation:none; border-top-color:var(--lilac-100); }
  .rst-screen{ animation:none; }
}