/* perso.css — layout de viewport FIXO (sem scroll de página) para o motor PERSO.
   O quiz.css base já é um stage fixo com corpo de scroll interno e rodapé pinado;
   aqui só tornamos o stage responsivo (preenche a tela no mobile, moldura no desktop)
   e compactamos espaçamentos pra caber sem rolar. CTA sempre visível no rodapé. */

html, body { height: 100%; margin: 0; overflow: hidden; background: #0a0a0a; overscroll-behavior: none; }
/* quiz.css dá body{min-height:100vh} (LAYOUT viewport, fixo). O stage usa
   --app-h=innerHeight (VISUAL, encolhe com a barra de URL). Quando divergem, body>stage
   e sobra faixa preta #0a0a0a abaixo do botão (topo do stage sai da área visível). Pinar
   body/html no mesmo --app-h e zerar o min-height mata a faixa. */
html, body { height: var(--app-h, 100%); min-height: 0; }
/* padding:0 -> o quiz.css base dá padding:16px no body (moldura desktop); no motor
   perso o .q-stage já é altura cheia (--app-h), então esse padding empurra o stage
   16px pra fora da viewport (CTA cortado + faixa preta embaixo, que "buga" ao
   arrastar). Zera o padding e trava o overscroll (rubber-band do webview). */
body { display: block; padding: 0; }
.q-body { overscroll-behavior: contain; }
/* width:100% evita colapso quando body vira flex no desktop (#root é flex-item;
   sem largura definida encolhe a 0 e o .q-stage width:100% zera junto → tela preta) */
#root { height: 100%; width: 100%; display: block; }

/* Stage preenche a viewport no mobile (dvh/svh resolvem a barra de endereço) */
.q-stage {
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: #0a0a0a;
}

/* Corpo: ocupa o meio e rola internamente SÓ se faltar espaço (scrollbar oculta).
   Rodapé (.q-ft) já é flex:0 0 auto no base → CTA cola embaixo, sempre visível. */
.q-body { padding-left: 20px; padding-right: 20px; }
/* Respiro inferior PADRONIZADO (28px mín. + safe-area) — CTA nunca cola na
   borda de baixo, igual em todas as telas do motor perso. */
.q-ft   { padding: 8px 20px max(28px, calc(env(safe-area-inset-bottom) + 16px)); }

/* Compactar pra maximizar o que cabe sem rolar */
.q-title    { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.08; }
.q-title.lg { font-size: clamp(26px, 7.4vw, 34px); }
.q-sub      { font-size: 14.5px; margin: 6px 0 14px; }
.q-opts     { gap: 8px; margin-top: 12px; }
.q-opt      { padding: 13px 16px; }
.q-cards    { gap: 10px; }

/* corpo-meta: avatares-meta são fotos 2/3 (720x1080); a caixa padrão 1/1.25
   corta as pernas. Casa o aspect da caixa com a foto -> avatar inteiro, sem corte. */
.q-cards--goal .silh { aspect-ratio: 2 / 3; padding-bottom: 0; }
.q-cards--goal .silh img { object-position: center; }

/* Telas baixas: densifica ainda mais (listas de 6-7 opções: foco, dor) */
@media (max-height: 720px) {
  .q-title    { font-size: clamp(20px, 5.6vw, 26px); }
  .q-title.lg { font-size: clamp(23px, 6.6vw, 30px); }
  .q-sub      { font-size: 13.5px; margin-top: 6px; }
  .q-opts     { gap: 7px; margin-top: 10px; }
  .q-opt      { padding: 11px 14px; }
  .q-cards    { gap: 8px; }
  .cta        { height: 50px; min-height: 50px; }
  .q-gauges   { gap: 8px; margin: 8px 0; }
  .q-timeline { gap: 6px; margin: 8px 0; }
  .q-proj-card{ padding: 14px; margin: 8px 0; }
  .q-stats    { gap: 6px; }
  .q-stat-row { padding: 9px 12px; }
  .q-bmi      { margin: 8px 0 10px; }
  .q-metachart{ margin: 10px 0; padding: 10px 8px 4px; }
}

/* Comparação antes→depois na projeção (.ba-grid solto, fora de .q-story).
   O base só estiliza .q-story .ba; aqui damos suporte standalone + a legenda em pílula. */
.q-body .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.q-body .ba {
  position: relative; aspect-ratio: 1/1.25; border-radius: 12px; overflow: hidden;
}
.q-body .ba.before { background: #161210; }
.q-body .ba.after  { background: linear-gradient(180deg, rgba(233,106,45,.18) 0%, #2a1a10 100%); }
.ba-caption {
  height: 28px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; border-radius: 999px;
  padding: 0 10px; background: rgba(255,255,255,.07); color: rgba(245,241,234,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ba-caption--after { background: var(--brand); color: #0a0a0a; }

/* Logo do header maior (só /personal) + empurra barra/header pra não colidir */
.q-logo-sm { top: 12px; width: 44px; height: 44px; }
.q-prog-bar { top: 56px; }
.q-hd { padding-top: 62px; padding-bottom: 8px; }

/* Projeção: q-body volta a crescer (flex:1) p/ CTA colar no fundo como nas
   outras telas — o base quiz.css usava flex:0 1 auto (footer subia). */
.qs:has(.q-proj-hero) .q-body { flex: 1 1 0; }
.qs:has(.q-proj-hero) .q-ft  { padding: 8px 20px max(28px, calc(env(safe-area-inset-bottom) + 16px)); }

/* Distância barra→conteúdo PADRONIZADA em todas as telas (mín. de scroll) */
.q-body { padding-top: 6px; }
.q-eyebrow { margin-bottom: 10px; }
.q-title  { margin-bottom: 6px; }
/* Quebras (InfoShell) usavam q-body 20px + q-warn 28px = 48px no topo → padroniza */
.q-warn { padding: 2px 0 6px; }
.q-warn .ic { width: 56px; height: 56px; margin-bottom: 12px; font-size: 26px; }
.q-warn h2 { margin-bottom: 10px; }

/* Touch target: botão voltar tinha 32px (<44px recomendado) — amplia a área */
.q-back { width: 40px; height: 40px; }
/* .q-opt nunca abaixo de 44px (telas baixas comprimiam o padding) */
.q-opt { min-height: 44px; }
/* slider: valor gigante (72px) consumia altura em telas curtas; toggle de unidade
   tinha alvo de toque pequeno (~28px) */
.q-slider-val { font-size: clamp(44px, 13vw, 72px); }
.q-slider-tabs button { min-height: 40px; padding: 8px 16px; }

/* ── Escala de IMC (estilo BetterMe) ─────────────────────────────────── */
.q-bmi { margin: 10px 0 14px; }
.q-bmi-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.q-bmi-head .lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.q-bmi-head .val { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #f5f1ea; }
.q-bmi-track {
  position: relative; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8 0%, #4ade80 18%, #facc15 45%, #fb923c 66%, #ef4444 100%);
}
.q-bmi-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.q-bmi-marker i {
  display: block; width: 16px; height: 16px; border-radius: 999px;
  background: #fff; border: 3px solid #0a0a0a; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.5);
}
.q-bmi-ticks { position: relative; height: 16px; margin-top: 8px; }
.q-bmi-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; opacity: .65; white-space: nowrap; }
.q-bmi-bands { position: relative; height: 13px; margin-top: 6px; }
.q-bmi-bands span { position: absolute; transform: translateX(-50%); font-size: 10px; letter-spacing: 0; text-transform: uppercase; opacity: .6; white-space: nowrap; }

/* ── Reveal do IMC (etapa q-imc personalizada) ───────────────────────── */
.q-imc-reveal { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 8px; }
.q-imc-reveal .num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 13vw, 60px);
  line-height: 1; color: var(--brand); letter-spacing: -.02em;
}
.q-imc-reveal .band {
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  opacity: .75; padding-bottom: 6px;
}
.q-imc-msg { margin-top: 14px; }
.q-imc-msg h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.18; margin: 0 0 8px; }
.q-imc-msg p { font-size: 14px; line-height: 1.5; opacity: .9; margin: 0 0 10px; }
.q-imc-msg p.age {
  font-size: 13px; opacity: .85; padding: 10px 12px; border-radius: 10px;
  background: rgba(233,106,45,.08); border: 1px solid rgba(233,106,45,.22);
}
.q-imc-msg p.note { font-size: 13px; opacity: .65; margin-bottom: 0; }
.q-imc-msg p.note strong { color: #f5f1ea; }

/* ── Mapa muscular anatômico SVG (etapa q-foco) ──────────────────────── */
.q-musclemap {
  width: 56%; max-width: 184px; aspect-ratio: 724 / 1448;
  margin: 8px auto 4px; display: block; overflow: visible;
}
.q-musclemap svg { overflow: visible; }
.q-musclemap--empty { background: rgba(255,255,255,.03); border-radius: 12px; }
.q-musclemap path { transition: fill .18s ease; }
@media (max-height: 720px) { .q-musclemap { max-width: 150px; } }

/* Foto do físico + overlays de músculo por região (modo foto, frente) */
.q-musclephoto {
  position: relative; width: min(58%, 190px); aspect-ratio: 2 / 3; flex-shrink: 0;
  margin: 10px auto 4px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(120% 90% at 50% 0%, #2b2622 0%, #121010 72%);
}
.q-musclephoto > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
/* overlay de músculo: SEM glow, SEM alteração — mostra a pintura como veio */
.q-musclephoto .q-moverlay { cursor: pointer; }
@media (max-height: 720px) { .q-musclephoto { max-width: 150px; } }

.q-view-tabs { display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.q-view-tabs button {
  position: relative; font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 18px; min-height: 38px; border-radius: 999px; cursor: pointer;
  color: rgba(245,241,234,.7); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}
.q-view-tabs button.on { color: #fff; background: rgba(255,67,38,.14); border-color: #ff4326; }
.q-view-tabs .dot {
  position: absolute; top: 6px; right: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: #ff4326;
}

/* Etapa foco: opções à esquerda, personagem à direita */
.q-foco-split { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.q-foco-opts { flex: 1 1 auto; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.q-foco-split .q-musclephoto { width: 46%; max-width: 168px; margin: 0; flex: 0 0 auto; }
.q-foco-opt {
  width: 100%; text-align: left;
  padding: 13px 14px; min-height: 48px;
  border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px;
  background: rgba(255,255,255,.03); color: inherit; cursor: pointer;
  font-family: inherit; transition: border-color .15s, background .15s;
}
.q-foco-opt .lbl { font-size: 14px; font-weight: 700; }
.q-foco-opt.sel {
  border-color: #ff4326; background: rgba(255,67,38,.12);
  box-shadow: 0 0 0 1px rgba(255,67,38,.4) inset;
}
@media (max-height: 720px) {
  .q-foco-split .q-musclephoto { max-width: 150px; }
  .q-foco-opt { padding: 10px 12px; min-height: 44px; }
}

.q-foco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.q-foco-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px; min-height: clamp(48px, 12vh, 64px); justify-content: center;
  border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px;
  background: rgba(255,255,255,.03); color: inherit; cursor: pointer;
  font-family: inherit; transition: border-color .15s, background .15s;
}
.q-foco-chip .ic { font-size: 20px; line-height: 1; }
.q-foco-chip .lbl { font-size: 12px; font-weight: 600; text-align: center; }
.q-foco-chip.sel {
  border-color: #ff4326; background: rgba(255,67,38,.12);
  box-shadow: 0 0 0 1px rgba(255,67,38,.4) inset;
}
@media (max-height: 720px) {
  .q-musclemap { max-width: 116px; margin: 6px auto 2px; }
  .q-view-tabs { margin: 2px 0 8px; }
  .q-view-tabs button { min-height: 34px; padding: 6px 14px; }
  .q-foco-chip { min-height: 56px; padding: 9px 5px; }
}

/* ── Upgrade auditoria: input do nome, hint do foco, teaser, recap, a11y ── */
/* eyebrow um pouco menos apagado (contraste em webview escuro) */
.q-eyebrow { opacity: .68; }
/* input do nome (movido de inline) */
.q-perso-name { margin: 4px 0 18px; }
.q-perso-name label { display: block; font-size: 13.5px; font-weight: 600; opacity: .8; margin-bottom: 7px; }
.q-name-field { position: relative; display: flex; align-items: center; }
.q-perso-name input {
  width: 100%; padding: 14px 16px; font-size: 16px; font-family: inherit; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; outline: none;
}
.q-perso-name input:focus { border-color: var(--brand); }
/* Botão enviar estilo WhatsApp: aparece dentro do campo quando há nome digitado. */
.q-name-field input { padding-right: 56px; }
.q-name-send {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--brand); color: #0a0a0a; font-size: 20px; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity .15s, transform .15s; padding: 0;
}
.q-name-send:disabled {
  opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.6);
}
/* hint inteligente na etapa de foco */
.q-foco-hint {
  font-size: 13px; line-height: 1.4; opacity: .82; margin: 6px 0 2px;
  color: #f5d9c8;
}
/* teaser borrado do plano (pré-VSL, na projeção) */
.q-plan-tease {
  margin: 16px 0 6px; padding: 16px 18px; border-radius: 14px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); position: relative; overflow: hidden;
}
.q-plan-tease-hd { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.q-plan-tease-hd .lock { opacity: .7; }
/* linhas mock do plano (parecem cronograma real) — borradas pra dar sensação de bloqueado */
.q-plan-rows { display: flex; flex-direction: column; filter: blur(3px); user-select: none; }
.q-plan-rows .row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px;
}
.q-plan-rows .row:last-child { border-bottom: 0; }
.q-plan-rows .d {
  flex: 0 0 auto; width: 34px; font-family: var(--font-display); font-weight: 800;
  font-size: 12px; color: var(--brand); text-transform: uppercase;
}
.q-plan-rows .x { opacity: .85; }
.q-plan-tease-ft { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--brand); }
/* recap nome+arquétipo no track */
.q-track-recap { margin-top: 12px; font-size: 14px; text-align: center; opacity: .9; }
.q-track-recap strong { color: var(--brand); }

/* ── Chips de cruzamento autoavaliação × IMC (etapa q-perfil) ────────── */
.q-perfil-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 18px 0 8px; max-width: 100%; }
.q-perfil-chips .chip {
  font-size: 13px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); opacity: .9;
}
.q-perfil-chips .chip b { font-family: var(--font-display); font-weight: 800; color: var(--brand); }

/* ── Diagnóstico — coluna única, sem foto (2026-07-16) ───────────────── */
/* A foto lateral esmagava a escala de IMC e truncava chips/legendas em
   mobile. Card ocupa a largura toda; elementos maiores e mais espaçados. */
.q-diag-card { display: block; margin: 4px 0 10px; }
.q-diag-main { min-width: 0; }

/* ── Linhas de atributo do diagnóstico ───────────────────────────────── */
.q-stats { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.q-stat-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 11px 14px; background: rgba(255,255,255,.03);
}
.q-stat-row .ic { font-size: 18px; flex: 0 0 auto; }
.q-stat-row .bd { display: flex; flex-direction: column; min-width: 0; }
.q-stat-row .lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.q-stat-row .val { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }

/* ── Gráfico-meta no tempo (estilo BetterMe) ─────────────────────────── */
.q-metachart {
  position: relative; margin: 14px 0;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  padding: 12px 10px 6px; background: linear-gradient(180deg, rgba(233,106,45,.06), transparent);
}
.q-meta-callout {
  position: absolute; transform: translate(-108%, -132%);
  display: flex; flex-direction: column; line-height: 1.1;
  background: #fff; color: #0a0a0a; border-radius: 10px; padding: 5px 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); white-space: nowrap; pointer-events: none;
}
.q-meta-callout .t { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.q-meta-callout .v { font-family: var(--font-display); font-weight: 800; font-size: 14px; }

/* ── Card de riscos de IMC elevado (SS1 BetterMe) ────────────────────── */
.q-risk {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.28);
}
.q-risk .ic { font-size: 17px; flex: 0 0 auto; line-height: 1.2; }
.q-risk .bd { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.q-risk .lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #fca5a5; font-weight: 700; }
.q-risk .txt { font-size: 13px; line-height: 1.4; opacity: .9; }

/* ── Gráfico "te mantém no caminho" (SS3 BetterMe) ───────────────────── */
.q-trackchart {
  position: relative; margin: 16px 0 6px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  padding: 12px 10px 6px; background: linear-gradient(180deg, rgba(233,106,45,.05), transparent);
}
.q-track-tag {
  position: absolute; transform: translate(-50%, -132%); white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
  padding: 5px 10px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.4); pointer-events: none;
}
.q-track-tag.on  { background: var(--brand); color: #0a0a0a; transform: translate(-78%, -136%); }
.q-track-tag.off { background: #1c1c1c; color: rgba(245,241,234,.9); border: 1px solid rgba(255,255,255,.12); transform: translate(-60%, 34%); }
/* Animação: linhas desenham do mesmo ponto até a ponta; resto aparece depois */
.q-tk-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: q-tk-draw 2s cubic-bezier(.4,0,.2,1) .15s forwards;
}
@keyframes q-tk-draw { to { stroke-dashoffset: 0; } }
.q-tk-start { animation: q-tk-pop .3s ease-out both; }
.q-tk-area, .q-tk-end { opacity: 0; animation: q-tk-fade .4s ease-out 2s forwards; }
.q-track-tag { opacity: 0; animation: q-tk-fade .4s ease-out 2.15s forwards; }
@keyframes q-tk-fade { to { opacity: 1; } }
@keyframes q-tk-pop { from { opacity: 0; } to { opacity: 1; } }
/* ── Visuais novos das quebras ───────────────────────────────────────── */
/* Barras de custo (q-educativa) */
.q-costbars {
  display: flex; gap: 18px; justify-content: center; align-items: flex-end;
  margin: 14px 0; padding: 14px 12px 10px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  background: linear-gradient(180deg, rgba(233,106,45,.06), transparent);
}
.q-cb-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100px; }
.q-cb-plot { width: 100%; height: 96px; display: flex; align-items: flex-end; justify-content: center; }
.q-cb-bar {
  width: 46px; border-radius: 8px 8px 0 0;
  transform-origin: bottom center;
  animation: q-cb-grow .7s cubic-bezier(.22,1,.36,1) both;
}
.q-cb-bar.gym { height: 100%; background: linear-gradient(180deg, #ef4444, #7f1d1d); animation-delay: .12s; }
.q-cb-bar.cali { height: 6%; min-height: 6px; background: var(--brand); animation-delay: .42s; }
@keyframes q-cb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.q-cb-val { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.q-cb-val.brand { color: var(--brand); }
.q-cb-lbl { font-size: 11px; opacity: .6; text-align: center; }

/* Donut 15 min/dia (q-15min) */
.q-mindonut { display: flex; flex-direction: column; align-items: center; margin: 10px 0 12px; }
.q-mindonut svg { width: 128px; height: 128px; display: block; }
.q-md-num { font-family: var(--font-display); font-weight: 800; font-size: 34px; fill: #f5f1ea; }
.q-md-unit { font-size: 11px; letter-spacing: .06em; fill: rgba(245,241,234,.6); }
.q-md-cap { font-size: 13px; opacity: .75; margin-top: 4px; }
.q-md-cap strong { color: var(--brand); font-weight: 800; opacity: 1; }
/* Animação relógio (q-15min): arco varre + ponteiro dá uma volta */
.q-md-arc { animation: q-md-sweep 1s ease-out both; }
@keyframes q-md-sweep { from { stroke-dashoffset: 72.26; } to { stroke-dashoffset: 0; } }
.q-md-hand {
  transform-box: view-box; transform-origin: 60px 60px;
  animation: q-md-tick 1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes q-md-tick { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
.q-md-pivot, .q-md-hand12 { animation: q-md-fade .3s ease-out both; }
@keyframes q-md-fade { from { opacity: 0; } to { opacity: 1; } }
/* Linha de equipamento (q-equip) */
.q-equip-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0 14px; }
.q-eq-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px;
  padding: 10px 6px; border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px;
  background: rgba(255,255,255,.03); opacity: .5;
  transition: opacity .45s ease, border-color .45s ease, background .45s ease;
}
.q-eq-item svg { width: 24px; height: 24px; }
.q-eq-item .l { font-size: 11px; font-weight: 600; text-align: center; }
.q-eq-item.on {
  opacity: 1; border-color: var(--brand); background: rgba(233,106,45,.12);
  box-shadow: 0 0 0 1px rgba(233,106,45,.4) inset;
}
/* Contorno traçado nos selecionados */
.q-eq-item svg.q-eq-trace {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.q-eq-trace rect {
  fill: none; stroke: var(--brand); stroke-width: 2;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: q-eq-draw .6s ease-out forwards;
}
@keyframes q-eq-draw { to { stroke-dashoffset: 0; } }
/* Hero da meta + urgência (q-projecao) */
.q-proj-hero {
  text-align: center; margin: 10px 0 14px; padding: 16px 14px; flex: 0 0 auto;
  border: 1px solid rgba(233,106,45,.25); border-radius: 18px;
  background: linear-gradient(180deg, rgba(233,106,45,.12), transparent);
}
.q-proj-hero .num {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(48px, 16vw, 76px); color: var(--brand); letter-spacing: -.02em;
}
.q-proj-hero .suf { margin-top: 5px; font-size: 15px; font-weight: 700; color: #f5f1ea; }
.q-proj-hero .meta { margin-top: 8px; font-size: 12px; opacity: .6; }
.q-proj-urgency {
  display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 2px; padding: 12px 14px;
  border-radius: 12px; background: rgba(233,106,45,.08); border: 1px solid rgba(233,106,45,.22);
  font-size: 13px; line-height: 1.45;
}
.q-proj-urgency .ic { font-size: 15px; flex: 0 0 auto; }

@media (max-height: 720px) {
  .q-proj-hero { margin: 6px 0 10px; padding: 12px; }
  .q-proj-hero .num { font-size: clamp(40px, 13vw, 60px); }
  .q-proj-urgency { margin: 10px 0 2px; padding: 10px 12px; }
  .q-costbars { margin: 8px 0; padding: 10px; }
  .q-cb-plot { height: 74px; }
  .q-mindonut { margin: 6px 0 8px; }
  .q-mindonut svg { width: 104px; height: 104px; }
  .q-equip-row { margin: 8px 0; }
  .q-eq-item { width: 66px; padding: 8px 5px; }
}

/* ── Loading "plano montando" (/personal) ─────────────────────────────── */
.q-loading .ring { width: 104px; height: 104px; }
.q-load-arc { filter: drop-shadow(0 0 5px rgba(233,106,45,.55)); }
.q-load-status {
  margin-top: 10px; min-height: 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--brand); letter-spacing: .01em;
  animation: q-ls-fade .32s ease-out both;
}
@keyframes q-ls-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.q-plancard {
  width: 100%; max-width: 320px; margin: 18px auto 0;
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px;
  padding: 12px 14px 14px; text-align: left;
  background: linear-gradient(180deg, rgba(233,106,45,.06), rgba(255,255,255,.015));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.q-pc-head {
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(245,241,234,.55);
  margin-bottom: 10px;
}
.q-pc-rows { display: flex; flex-direction: column; gap: 9px; }
.q-pc-row { display: flex; align-items: center; gap: 8px; }
.q-pc-day {
  flex: 0 0 30px; font-size: 11px; font-weight: 700;
  color: rgba(245,241,234,.4); transition: color .4s ease;
}
.q-pc-bar {
  height: 9px; border-radius: 5px;
  background: rgba(255,255,255,.07);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: q-pc-shimmer 1.3s linear infinite;
  transition: background-color .4s ease;
}
.q-pc-bar.b1 { flex: 1 1 58%; }
.q-pc-bar.b2 { flex: 1 1 30%; }
.q-pc-check {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--brand);
  opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .3s cubic-bezier(.22,1.4,.4,1);
}
.q-pc-row.filled .q-pc-day { color: var(--brand); }
.q-pc-row.filled .q-pc-bar {
  animation: none; background-image: none; background-color: rgba(233,106,45,.55);
}
.q-pc-row.filled .q-pc-bar.b2 { background-color: rgba(245,241,234,.35); }
.q-pc-row.filled .q-pc-check { opacity: 1; transform: scale(1); }
@keyframes q-pc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.q-load-note { margin-top: 14px; font-size: 12px; opacity: .55; }

/* ── Animações das telas Resultado + Projeção (/personal) ─────────────── */
@keyframes q-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes q-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes q-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes q-draw { to { stroke-dashoffset: 0; } }

/* Resultado — marcador do IMC desliza de 0 até a posição real */
@keyframes q-bmi-slide { from { left: 0; } to { left: var(--bmi-left); } }
.q-bmi-marker {
  left: var(--bmi-left);
  animation: q-bmi-slide .9s cubic-bezier(.22,1,.36,1) both;
}
.q-bmi-marker i { box-shadow: 0 0 10px rgba(233,106,45,.6); }

/* Resultado — risco + stats entram em cascata */
.q-risk { animation: q-fade-up .45s ease-out both; }
.q-stat-row { animation: q-fade-up .45s ease-out both; }
.q-stats .q-stat-row:nth-child(1) { animation-delay: .05s; }
.q-stats .q-stat-row:nth-child(2) { animation-delay: .13s; }
.q-stats .q-stat-row:nth-child(3) { animation-delay: .21s; }
.q-stats .q-stat-row:nth-child(4) { animation-delay: .29s; }

/* Projeção — número-herói conta-up com glow */
.q-hero-num { text-shadow: 0 0 18px rgba(233,106,45,.45); animation: q-fade-up .5s ease-out both; }

/* Projeção — curva do MetaChart desenha; ponta + callout aparecem depois */
.q-mc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: q-draw 1.6s cubic-bezier(.4,0,.2,1) .2s forwards; }
.q-mc-end { opacity: 0; animation: q-fade .4s ease-out 1.7s forwards; }
.q-metachart .q-meta-callout { opacity: 0; animation: q-fade .4s ease-out 1.7s forwards; }

/* Projeção — antes→depois + tease do plano em cascata */
.ba.before { animation: q-fade .5s ease-out both; }
.ba.after  { animation: q-pop-in .55s ease-out .28s both; }
.q-plan-rows .row { animation: q-fade-up .4s ease-out both; }
.q-plan-rows .row:nth-child(1) { animation-delay: .15s; }
.q-plan-rows .row:nth-child(2) { animation-delay: .30s; }
.q-plan-rows .row:nth-child(3) { animation-delay: .45s; }

/* Só anima quando o bloco entra na viewport (Reveal → r-in). Antes fica pausado
   no 1º frame (escondido) — corrige animações que rodavam fora da tela no mobile. */
.r-out .q-stat-row,
.r-out .q-mc-line, .r-out .q-mc-end, .r-out .q-meta-callout,
.r-out .ba.before, .r-out .ba.after,
.r-out .q-plan-rows .row { animation-play-state: paused; }
.r-in .q-stat-row,
.r-in .q-mc-line, .r-in .q-mc-end, .r-in .q-meta-callout,
.r-in .ba.before, .r-in .ba.after,
.r-in .q-plan-rows .row { animation-play-state: running; }


/* Desktop: moldura centrada — ainda sem scroll de página */
@media (min-width: 1024px) {
  body { display: flex; align-items: center; justify-content: center; }
  .q-stage {
    height: min(880px, 100dvh);
    max-width: 440px;
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
  }
}