/* ============================================================
   PROJETO EU — QUIZ DE DIAGNÓSTICO
   Escuro · direto · intenso. Carvão como base, vermelho do
   Projeto EU como cor de AÇÃO. Anton (impacto) + IBM Plex Sans
   (leitura). Mobile-first, cinematográfico.
   ============================================================ */

.quiz-page{
  --charcoal:   #161618;   /* fundo principal */
  --charcoal-2: #1d1d1f;   /* cards / blocos */
  --charcoal-3: #232325;   /* card hover / inputs */
  --q-red:      #E10600;   /* vermelho de ação (mesmo do site) */
  --q-red-hi:   #ff4338;   /* hover / brilho */
  --q-red-deep: #9E0B0F;
  --q-text:     #F2F2F4;   /* texto principal */
  --q-text-2:   #C4C4CA;   /* secundário */
  --q-muted:    #9A9AA0;   /* legendas / rodapé */
  --q-line:     rgba(255,255,255,.09);
  --q-line-2:   rgba(255,255,255,.16);
  --q-plex: 'IBM Plex Sans', system-ui, sans-serif;
}

.quiz-page{
  background:var(--charcoal);
  color:var(--q-text);
  font-family:var(--q-plex);
  min-height:100vh;
  overflow-x:hidden;
}
.quiz-page ::selection{ background:var(--q-red); color:#fff; }

/* glow vermelho cinematográfico (canto superior direito) */
.q-glow{
  position:fixed; top:-18vh; right:-12vw; width:62vw; height:62vw;
  max-width:760px; max-height:760px; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 70% 30%, rgba(225,6,0,.30), rgba(225,6,0,.07) 42%, transparent 66%);
  filter:blur(8px); opacity:.9;
  transition:opacity .8s ease;
}
.q-glow.soft{ opacity:.5; }
.q-grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:overlay;
}

/* ---------- topo: logo discreta ---------- */
.q-top{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,40px);
  pointer-events:none;
}
.q-top a{ pointer-events:auto; }
.q-top .logo-img{ height:26px; width:auto; opacity:.95; }
.q-top .q-exit{
  font-family:var(--font-sub); font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--q-muted); display:inline-flex; align-items:center; gap:8px;
  transition:color .2s ease;
}
.q-top .q-exit:hover{ color:var(--q-text); }
.q-top .q-exit svg{ width:14px; height:14px; }

/* ============================================================
   STAGE + SCREENS  (uma tela visível por vez, fade cinematográfico)
   ============================================================ */
.q-stage{ position:relative; z-index:1; }
.q-screen{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; min-height:100svh;
  padding:96px clamp(20px,6vw,40px) 64px;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
  pointer-events:none;
}
.q-screen.active{
  position:relative; z-index:2;
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
.q-col{ width:100%; max-width:600px; margin:0 auto; }

/* ---------- tipografia base do quiz ---------- */
.q-display{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:.94; letter-spacing:.006em; color:var(--q-text);
}
.q-display .red{ color:var(--q-red); }
.q-kicker{
  font-family:var(--font-sub); font-weight:700; text-transform:uppercase;
  letter-spacing:.26em; font-size:11.5px; color:var(--q-red);
}
.q-lead{ color:var(--q-text-2); font-size:clamp(15px,1.6vw,17px); line-height:1.62; }

/* ---------- botões ---------- */
.q-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--font-display); font-weight:400; letter-spacing:.04em;
  text-transform:uppercase; font-size:clamp(16px,1.8vw,19px);
  color:#fff; background:var(--q-red); border:0; border-radius:10px;
  padding:18px 30px; width:100%; cursor:pointer;
  box-shadow:0 16px 40px -16px rgba(225,6,0,.6);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.q-btn:hover{ background:var(--q-red-hi); transform:translateY(-2px); box-shadow:0 22px 50px -18px rgba(225,6,0,.75); }
.q-btn:disabled{ background:var(--charcoal-3); color:var(--q-muted); cursor:not-allowed; box-shadow:none; transform:none; }
.q-btn .arr{ transition:transform .25s var(--ease); font-family:var(--q-plex); }
.q-btn:hover:not(:disabled) .arr{ transform:translateX(4px); }
.q-btn.ghost{
  background:transparent; color:var(--q-text); border:1px solid var(--q-line-2);
  box-shadow:none; font-family:var(--font-sub); font-weight:700; font-size:13px; letter-spacing:.14em;
}
.q-btn.ghost:hover{ background:rgba(255,255,255,.05); border-color:var(--q-text); transform:none; }

/* ============================================================
   TELA · ABERTURA
   ============================================================ */
.q-intro .q-kicker{ margin-bottom:20px; display:block; }
.q-intro h1{ font-size:clamp(34px,6.6vw,62px); line-height:.98; margin-bottom:clamp(26px,4vh,40px); }
.q-intro .q-lead{ max-width:46ch; margin-bottom:38px; }
.q-intro .q-start{ max-width:340px; }
.q-intro .q-note{ margin-top:22px; font-size:12.5px; color:var(--q-muted); letter-spacing:.02em; }
.q-intro .q-areas-row{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px;
}
.q-areas-row .chip{
  font-family:var(--font-sub); font-weight:600; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--q-muted);
  border:1px solid var(--q-line); border-radius:100px; padding:7px 13px;
}

/* ============================================================
   TELA · PERGUNTAS
   ============================================================ */
.q-progress{
  position:fixed; top:0; left:0; right:0; z-index:90; height:3px; background:rgba(255,255,255,.06);
  opacity:0; transition:opacity .4s ease;
}
.q-progress.show{ opacity:1; }
.q-progress .bar{ height:100%; width:0%; background:var(--q-red); transition:width .5s var(--ease); }

.q-quiz .q-step{
  font-family:var(--font-sub); font-weight:700; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--q-red); margin-bottom:16px; display:block;
}
.q-quiz h2{ font-size:clamp(26px,4.6vw,40px); margin-bottom:clamp(26px,4vw,36px); max-width:20ch; }
.q-options{ display:flex; flex-direction:column; gap:11px; }
.q-opt{
  text-align:left; width:100%; cursor:pointer;
  background:var(--charcoal-2); border:1px solid var(--q-line); border-radius:12px;
  padding:18px 20px; color:var(--q-text-2); font-family:var(--q-plex);
  font-size:clamp(15px,1.7vw,16.5px); line-height:1.45;
  display:flex; align-items:center; gap:15px;
  transition:border-color .22s ease, background .22s ease, color .22s ease, transform .18s ease, box-shadow .22s ease;
}
.q-opt .dot{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--q-line-2); position:relative; transition:border-color .2s ease;
}
.q-opt .dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--q-red);
  transform:scale(0); transition:transform .22s var(--ease);
}
.q-opt:hover{ border-color:var(--q-line-2); color:var(--q-text); transform:translateY(-1px); }
.q-opt.sel{
  border-color:var(--q-red); background:var(--charcoal-3); color:#fff;
  box-shadow:0 0 0 1px var(--q-red), 0 14px 34px -18px rgba(225,6,0,.7);
}
.q-opt.sel .dot{ border-color:var(--q-red); }
.q-opt.sel .dot::after{ transform:scale(1); }

.q-quiz .q-nav{ display:flex; gap:12px; align-items:center; margin-top:26px; }
.q-back{
  font-family:var(--font-sub); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--q-muted); background:none; border:0; cursor:pointer; padding:10px 4px;
  display:inline-flex; align-items:center; gap:8px; transition:color .2s ease; opacity:0; pointer-events:none;
}
.q-back.show{ opacity:1; pointer-events:auto; }
.q-back:hover{ color:var(--q-text); }
.q-back svg{ width:15px; height:15px; }
.q-quiz .q-nav .q-btn{ margin-left:auto; width:auto; min-width:200px; }

/* ============================================================
   TELA · CAPTURA
   ============================================================ */
.q-capture h2{ font-size:clamp(28px,5vw,46px); margin-bottom:14px; max-width:16ch; }
.q-capture .q-step{ display:block; margin-bottom:16px; }
.q-capture .q-lead{ margin-bottom:32px; max-width:42ch; }
.q-field{ margin-bottom:18px; }
.q-field label{
  display:block; font-family:var(--font-sub); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--q-muted); margin-bottom:9px;
}
.q-field input{
  width:100%; background:var(--charcoal-2); border:1px solid var(--q-line); border-radius:10px;
  padding:15px 16px; color:var(--q-text); font-family:var(--q-plex); font-size:16px;
  transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.q-field input::placeholder{ color:var(--q-muted); }
.q-field input:focus{ outline:none; border-color:var(--q-red); background:var(--charcoal-3); box-shadow:0 0 0 1px var(--q-red); }
.q-subfield input{
  width:100%; background:var(--charcoal-2); border:1px solid var(--q-line); border-radius:10px;
  padding:15px 16px; color:var(--q-text); font-family:var(--q-plex); font-size:16px;
  transition:border-color .22s ease, background .22s ease, box-shadow .22s ease; margin-top:9px;
}
.q-subfield input::placeholder{ color:var(--q-muted); }
.q-subfield input:focus{ outline:none; border-color:var(--q-red); background:var(--charcoal-3); box-shadow:0 0 0 1px var(--q-red); }
.q-subfield label{ display:block; font-family:var(--font-sub); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--q-muted); }

.q-choice{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.q-choice-3{ grid-template-columns:1fr 1fr 1fr; }
.q-pick{
  text-align:center; cursor:pointer; background:var(--charcoal-2); border:1px solid var(--q-line);
  border-radius:12px; padding:18px 14px; color:var(--q-text-2); font-family:var(--font-sub);
  font-weight:700; font-size:14px; letter-spacing:.04em;
  transition:border-color .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}
.q-pick small{ display:block; font-weight:500; letter-spacing:0; font-size:12px; color:var(--q-muted); margin-top:5px; text-transform:none; }
.q-pick:hover{ border-color:var(--q-line-2); color:var(--q-text); }
.q-pick.sel{ border-color:var(--q-red); background:var(--charcoal-3); color:#fff; box-shadow:0 0 0 1px var(--q-red); }
.q-pick.sel small{ color:var(--q-text-2); }

.q-subfield{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease), opacity .35s ease, margin .35s ease; }
.q-subfield.show{ max-height:500px; opacity:1; margin-top:18px; }

.q-capture .q-support{ font-size:12.5px; color:var(--q-muted); line-height:1.55; margin:22px 0 26px; max-width:44ch; }
.q-capture .q-btn{ max-width:360px; }

/* ============================================================
   TELA · PREPARANDO
   ============================================================ */
.q-prep{ text-align:center; }
.q-prep .pulse{
  width:80px; height:80px; margin:0 auto 30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(225,6,0,.32), transparent 70%);
  animation:qpulse 1.6s ease-in-out infinite;
}
.q-prep .pulse img{ height:40px; width:auto; }
@keyframes qpulse{ 0%,100%{ transform:scale(.92); opacity:.7; } 50%{ transform:scale(1.08); opacity:1; } }
.q-prep p{ font-family:var(--q-plex); font-size:clamp(16px,2vw,19px); color:var(--q-text-2); letter-spacing:.01em; }
.q-prep .dots::after{ content:""; animation:qdots 1.4s steps(4,end) infinite; }
@keyframes qdots{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } }

/* ============================================================
   TELA · RESULTADO
   ============================================================ */
.q-result{ justify-content:flex-start; padding-top:clamp(90px,12vh,120px); }
.q-result .q-col{ max-width:640px; }
.q-seal{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; white-space:nowrap; max-width:100%;
  background:var(--q-red); color:#fff; border-radius:6px; padding:9px 15px;
  font-family:var(--font-display); font-weight:400; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
}
.q-seal .lbl{ font-family:var(--font-sub); font-weight:700; font-size:10px; letter-spacing:.18em; opacity:.85; }
.q-result h2{ font-size:clamp(27px,5vw,48px); line-height:1.07; margin-bottom:28px; }
.q-reading{ color:var(--q-text-2); font-size:clamp(15.5px,1.8vw,17.5px); line-height:1.68; }
.q-reading p{ margin-bottom:16px; }
.q-reading p:last-child{ margin-bottom:0; }
.q-reading strong{ color:var(--q-text); font-weight:600; }

.q-verse{
  border-left:3px solid var(--q-red); background:var(--charcoal-2);
  padding:20px 22px; border-radius:0 10px 10px 0; margin:30px 0;
}
.q-verse p{ font-family:var(--q-plex); font-style:italic; font-size:clamp(16px,2vw,18.5px); line-height:1.55; color:var(--q-text); }
.q-verse cite{ display:block; font-style:normal; font-family:var(--font-sub); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--q-red); margin-top:12px; }

.q-gift{ margin:30px 0 8px; }
.q-gift .q-btn{ box-shadow:0 18px 44px -16px rgba(225,6,0,.7); }
.q-gift .q-gift-cap{ font-size:12.5px; color:var(--q-muted); text-align:center; margin-top:12px; }

/* trilho final — card sóbrio */
.q-rail{
  margin-top:34px; background:var(--charcoal-2); border:1px solid var(--q-line);
  border-radius:14px; padding:clamp(24px,3.4vw,32px);
}
.q-rail .rk{ font-family:var(--font-sub); font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--q-red); display:block; margin-bottom:14px; }
.q-rail h3{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:clamp(22px,3.4vw,30px); line-height:.98; color:var(--q-text); margin-bottom:14px; }
.q-rail p{ color:var(--q-text-2); font-size:15px; line-height:1.6; margin-bottom:20px; }
.q-rail .q-btn{ max-width:none; }
.q-rail .q-arm{ display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--q-line); }
.q-rail .q-arm .a-ic{ width:46px; height:46px; flex-shrink:0; color:var(--q-red); border:1px solid var(--q-line-2); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.q-rail .q-arm .a-ic svg{ width:24px; height:24px; }
.q-rail .q-arm .a-tx strong{ display:block; font-family:var(--font-sub); font-weight:800; font-size:15px; color:var(--q-text); letter-spacing:.02em; }
.q-rail .q-arm .a-tx span{ font-size:13px; color:var(--q-muted); }
.q-rail.accepted{ border-color:var(--q-red); }
.q-rail .q-accepted-msg{ display:none; align-items:flex-start; gap:12px; color:var(--q-text); font-size:15px; line-height:1.55; }
.q-rail.accepted .q-accepted-msg{ display:flex; }
.q-rail.accepted .q-accept-wrap{ display:none; }
.q-accepted-msg .ck{ width:24px; height:24px; flex-shrink:0; color:var(--q-red); }

.q-share{ margin-top:18px; }
.q-share .q-btn.ghost{ width:100%; }
.q-restart{ text-align:center; margin-top:26px; }
.q-restart button{ font-family:var(--font-sub); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--q-muted); background:none; border:0; cursor:pointer; transition:color .2s ease; }
.q-restart button:hover{ color:var(--q-text); }

/* ---------- modal do card compartilhável ---------- */
.q-modal{ position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(8,8,9,.86); backdrop-filter:blur(6px); }
.q-modal.open{ display:flex; }
.q-modal-inner{ width:100%; max-width:340px; text-align:center; }
.q-modal canvas{ width:100%; height:auto; border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); display:block; }
.q-modal .q-modal-actions{ display:flex; gap:10px; margin-top:18px; }
.q-modal .q-modal-actions .q-btn{ font-size:14px; padding:14px 18px; }
.q-modal .q-close{ position:absolute; top:20px; right:24px; background:none; border:0; color:var(--q-text-2); font-size:26px; cursor:pointer; line-height:1; }

/* ---------- rodapé minimal ---------- */
.q-foot{ position:relative; z-index:2; text-align:center; padding:30px 20px 40px; }
.q-foot a{ font-family:var(--font-sub); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--q-muted); transition:color .2s ease; }
.q-foot a:hover{ color:var(--q-red); }

@media (prefers-reduced-motion:reduce){
  .q-screen{ transition:opacity .2s ease; transform:none; }
  .q-prep .pulse{ animation:none; }
}

@media (max-width:480px){
  .q-choice{ grid-template-columns:1fr 1fr; }
  .q-choice-3{ grid-template-columns:1fr; }
  .q-quiz .q-nav{ flex-wrap:wrap; }
  .q-quiz .q-nav .q-btn{ width:100%; margin-left:0; }
}