/* ============================================================================
   QUIZ DO PAIZÃO — identidade visual estilo TikTok / Instagram
   Dark base · gradientes vibrantes · cards arredondados · mobile-first
============================================================================ */

:root {
  /* base — identidade App Paizão: lavanda claro + branco + roxo */
  --bg:        #f4eeff;
  --bg-2:      #ece2fb;
  --card:      #ffffff;
  --card-2:    #f5f0fe;
  --line:      rgba(91,46,158,.14);
  --line-2:    rgba(91,46,158,.26);

  /* texto (tinta roxo-escura, não preto puro) */
  --tx:        #281e44;
  --tx-soft:   #6c6488;
  --tx-mute:   #a39bbb;

  /* ação: roxo da marca (botão "Entrar" do app) */
  --accent:    #7c3aed;
  --accent-2:  #8b5cf6;
  --grad:      linear-gradient(180deg, #a98bf5 0%, #7c46e6 100%);
  --act:       #7c3aed;
  --act-tx:    #ffffff;

  /* preenchimentos/detalhes (roxo translúcido) */
  --hair:      rgba(124,58,237,.07);
  --hair-2:    rgba(124,58,237,.16);
  --neutral:   #e6def7;
  --quote:     rgba(124,58,237,.20);

  --r: 20px;
  --r-sm: 14px;
  --shadow: 0 18px 44px -18px rgba(76,29,149,.28);

  /* anel de stories do Instagram (avatar) */
  --ig-ring: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);

  /* tipografia do App Paizão (Poppins, geométrica/arredondada) */
  --display: "Poppins", system-ui, -apple-system, sans-serif;
  --body: "Poppins", system-ui, -apple-system, sans-serif;
  --mono: "Poppins", system-ui, sans-serif;

  --maxw: 520px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
/* o atributo hidden tem que vencer os display:flex/block dos componentes */
[hidden] { display: none !important; }

body {
  font-family: var(--body);
  background:
    radial-gradient(120% 80% at 50% -10%, #e9dcfb, transparent 58%),
    radial-gradient(110% 70% at 50% 112%, #e4d6fa, transparent 60%),
    #f6f1ff;
  background-attachment: fixed;
  color: var(--tx);
  /* body em coluna: o .stage recebe a altura que SOBRA depois do topbar —
     assim tela de pergunta cabe na dobra (antes: topbar + stage 100dvh = scroll) */
  min-height: 100dvh;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* grão monocromático bem sutil (textura de papel/dossiê, sem cor) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .015; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- TOP BAR
   Mesma coluna do .stage (width 100% + max-width --maxw) pra não
   “vazar” nem ficar mais estreito que o quiz no desktop/mobile. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  box-sizing: border-box; flex: 0 0 auto;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  /* evita o conteúdo interno estourar a coluna de 520px */
  overflow: hidden;
}
.topbar__row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 8px;
  min-width: 0; width: 100%; box-sizing: border-box;
}
/* faixa de urgência — vermelho forte, uma linha só */
.timerbar {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 12px 10px;
  border-top: 1px solid #ff1a1a;
  background: linear-gradient(180deg, #ff2d2d 0%, #e10600 55%, #c40000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 10px rgba(225,6,0,.35);
  font-family: var(--sans, "Poppins", system-ui, sans-serif);
  color: #fff;
  min-width: 0; width: 100%; box-sizing: border-box;
  overflow: hidden;
}
.timerbar__label {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.timerbar__label b {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* últimos 30s: brilho + número piscando */
.timerbar.is-urgent {
  background: linear-gradient(180deg, #ff3b3b 0%, #ff0a0a 50%, #b30000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 0 1px rgba(255,80,80,.35),
    0 0 16px rgba(255,0,0,.45);
}
.timerbar.is-urgent b { animation: timerBlink 1s steps(1, end) infinite; }
@keyframes timerBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.topbar__back {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--tx);
  cursor: pointer; transition: .15s;
}
.topbar__back:active { transform: scale(.92); }
.topbar__back[disabled] { opacity: .25; pointer-events: none; }
.topbar__brand { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar__avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
  background: var(--neutral);
  background-size: cover; background-position: center;
}
.topbar__name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
.topbar__namerow {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__namerow .verified {
  display: inline-block; vertical-align: -2px; margin-left: 4px;
}
.topbar__name em {
  font-style: normal; color: var(--tx-mute); font-weight: 500; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.verified { flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(56,151,240,.5)); }

/* ----------- ANEL DE STORIES DO INSTAGRAM -----------
   Anel = borda transparente preenchida por gradiente (border-box);
   miolo = foto/grad (padding-box); gap escuro via box-shadow inset. */
.igring {
  border: 3px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(var(--neutral),var(--neutral)), var(--ig-ring);
  background-size: cover, cover;
  box-shadow: inset 0 0 0 2.5px var(--bg);
}
/* foto do perfil (declarativa — sem corrida de onload) */
.avatar-photo {
  background-image: url("../img/carlao-avatar.jpg"), var(--ig-ring) !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  color: transparent !important;
}
/* foto da Liz (filhota real) — usada no depoimento */
.avatar-liz {
  background-image: url("../img/liz-avatar.jpg"), var(--ig-ring) !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  color: transparent !important;
}
/* foto da Niic (@niic.ca) — depoimento trilha "Emagrecer e secar" */
.avatar-niic {
  background-image: url("../img/niic-avatar.jpg"), var(--ig-ring) !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  color: transparent !important;
}
.topbar__count {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 700;
  color: var(--tx-soft); padding: 5px 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
}

.progress {
  position: relative; height: 3px; width: 100%;
}
.progress::before {
  content:""; position:absolute; inset:0;
  background: var(--hair-2);
}
.progress__bar {
  position: relative; height: 100%; width: 0%;
  background: var(--act);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------- STAGE */
.stage {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%; box-sizing: border-box;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom));
  /* cresce até preencher a sobra do body (viewport - topbar); conteúdo
     mais alto que a dobra (oferta, gráfico) continua rolando normal */
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}

/* animação de entrada de cada tela */
.screen { animation: rise .42s cubic-bezier(.22,1,.36,1) both; display:flex; flex-direction:column; flex:1; }
@keyframes rise { from { opacity:0; transform: translateY(16px) scale(.99);} to {opacity:1; transform:none;} }
/* landing entra SÓ com opacidade (sem transform): um filho position:fixed (a .landing-cta)
   se ancoraria na section animada em vez do viewport enquanto o transform roda. */
.screen.landing { animation-name: landingIn; }
@keyframes landingIn { from { opacity:0; } to { opacity:1; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-soft); padding: 7px 12px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--line-2);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--act);
}

/* destaque na copy: roxo da marca (como "TREINO / DIETA / PAIZÃO" no app) */
.hl {
  color: var(--accent); font-weight: 800;
  white-space: nowrap; /* mantém o prazo ("4 semaninhas") junto, sem quebrar entre linhas */
}

/* ------------------------------------------------------------- LANDING */
/* FOLD-SAFE (AULA 03 §6): H1 + imagem + botão + escassez sempre visíveis
   sem rolar. A imagem é o elemento elástico — encolhe pra não empurrar
   o botão pra baixo do fold. Testado p/ iPhone pequeno, Android médio e tela grande. */
.landing {
  justify-content: space-between;
  gap: 10px;
  text-align: center;
  padding-top: 8px;
  padding-bottom: calc(150px + env(safe-area-inset-bottom)); /* espaço p/ a .landing-cta fixa */
  min-height: 100dvh;
}
.landing .media {
  aspect-ratio: auto;
  flex: 0 1 auto;
  min-height: 0;
  height: clamp(140px, 34dvh, 420px);
}
.landing .media img,
.landing .media .media__placeholder { height: 100%; }
.landing h1 { flex: 0 0 auto; }
.landing .btn { flex: 0 0 auto; }
.landing .scarcity { flex: 0 0 auto; margin-bottom: 4px; }
/* cabeçalho estilo perfil do Instagram */
.igprofile {
  display: flex; align-items: center; gap: 13px;
  text-align: left; flex: 0 0 auto;
}
.igprofile__av {
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff;
  background: var(--neutral); background-size: cover; background-position: center;
}
.igprofile__meta { min-width: 0; }
.igprofile__namerow {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.01em;
}
.igprofile__sub { font-size: 13px; color: var(--tx-soft); font-weight: 500; }
.igprofile__sub b { color: var(--tx); font-weight: 700; }
.landing h1 {
  font-family: var(--display);
  font-size: clamp(19px, 5.4vw, 30px); line-height: 1.14; font-weight: 800;
  letter-spacing: -.025em; margin: 0;
}
.landing__h2 {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: clamp(14px, 3.8vw, 17px); line-height: 1.3; font-weight: 500;
  color: var(--tx-soft); margin: 8px 0 0;
}

/* FIGURA RECORTADA (PNG sem fundo) — integra Carlão+filhota ao botão.
   O brilho atrás "puxa" o olho até o CTA logo abaixo. */
.landing .figure {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;        /* figura centralizada na vertical */
  justify-content: center;
  margin-bottom: -6px; /* aproxima a base da figura do botão */
}
.figure__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 86%; height: 80%;
  transform: translate(-50%, -50%);
  /* halo roxo suave da marca atrás da figura */
  background: radial-gradient(58% 62% at 50% 50%, rgba(139,92,246,.28), transparent 72%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}
.figure__img {
  position: relative; z-index: 1;
  height: 100%;
  max-height: clamp(230px, 56dvh, 640px);
  width: auto; max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.18));
  animation: figIn .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes figIn { from { opacity:0; transform: translateY(14px) scale(.98);} to {opacity:1; transform:none;} }
.media {
  position: relative; width: 100%; border-radius: var(--r);
  overflow: hidden; background: var(--card-2);
  box-shadow: var(--shadow);
}
.media--portrait { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
.media img { width:100%; height:100%; object-fit: cover; display:block; }
.media__placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center;
  padding: 18px; color: var(--tx-mute);
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px),
    var(--card);
  border: 1.5px dashed var(--line-2); border-radius: var(--r);
}
.media__placeholder svg { opacity:.6; }
.media__placeholder span { font-size: 12.5px; font-weight:600; line-height:1.35; max-width: 80%; }
.media__placeholder b { display:block; color: var(--tx-soft); font-size:13px; margin-bottom:2px; }

.scarcity {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--tx-soft);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
/* microcopy logo abaixo do botão (reforço rápido) */
.subcta {
  flex: 0 0 auto;
  text-align: center; margin: 8px 0 0;
  font-size: 13px; font-weight: 700; color: var(--tx);
}

/* botão primário (CTA) — gradiente roxo da marca (botão "Entrar" do app) */
.btn {
  position: relative; width: 100%;
  border: none; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; color: var(--act-tx);
  padding: 18px 20px; border-radius: var(--r-sm);
  background: var(--grad);
  box-shadow: 0 12px 26px -10px rgba(124,58,237,.6);
  transition: transform .12s ease, box-shadow .2s, filter .2s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: scale(.98); }
.btn--block { margin-top: auto; }
/* pulso de atenção no CTA da landing (velocidade 2 — ~0,9s por ciclo) */
.btn--pulse { animation: btnPulse .9s ease-in-out infinite; transform-origin: center; }
@keyframes btnPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 12px 26px -10px rgba(124,58,237,.6); }
  50%      { transform: scale(1.045); box-shadow: 0 16px 34px -8px rgba(124,58,237,.85); }
}
/* pulso LEVE no CTA do diagnóstico */
.btn--pulse-soft { animation: btnPulseSoft 1.35s ease-in-out infinite; transform-origin: center; }
@keyframes btnPulseSoft {
  0%, 100% { transform: scale(1);    box-shadow: 0 10px 22px -10px rgba(124,58,237,.45); }
  50%      { transform: scale(1.02); box-shadow: 0 14px 28px -10px rgba(124,58,237,.65); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--pulse,
  .btn--pulse-soft { animation: none; }
}
.btn span.arrow { margin-left: 6px; }
.btn .arrow svg { color: var(--act-tx); }

/* ----------- CTA FLUTUANTE (acompanha o scroll — AULA 03 §5) -----------
   Barra fixa no rodapé do viewport pras telas de conteúdo alto.
   Garante que o botão está SEMPRE alcançável sem precisar rolar até o fim. */
.ctabar {
  position: sticky;
  bottom: 0;
  margin: 18px -18px calc(-28px - env(safe-area-inset-bottom));
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(244,238,255,.85) 26%, #f1e9ff 74%);
  z-index: 20;
}
.ctabar .btn { margin: 0; }

/* ----------- CTA FLUTUANTE DA LANDING (fixo no viewport) -----------
   Garante o botão SEMPRE na dobra, mesmo no in-app browser do Instagram
   (viewport curto/dinâmico). FIXED (não sticky): ancora na base do viewport
   e ignora o reflow de dvh. Centralizado em --maxw no desktop. */
.landing-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin-inline: auto;
  width: 100%;
  max-width: var(--maxw);            /* 520px — largura do stage */
  z-index: 40;                       /* acima do conteúdo; topbar(30) some na landing; grão(9999) é pointer-events:none */
  padding: 20px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(244,238,255,.9) 30%, #f1e9ff 74%);
  pointer-events: none;              /* zona transparente do topo não bloqueia a figura */
}
.landing-cta > * { pointer-events: auto; }
.landing-cta .btn { margin: 0; }
.landing-cta .subcta { margin: 8px 0 0; }
.landing-cta .scarcity { margin: 6px 0 0; }

@media (max-height: 480px) {         /* landscape/telas muito baixas: enxuga a barra */
  .landing-cta .subcta,
  .landing-cta .scarcity { display: none; }
  .landing-cta { padding-top: 14px; }
}

/* ------------------------------------------------------------- QUESTION */
/* cabeçalho de campo estilo anamnese: nº da pergunta + seção, em mono */
.q__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; align-self: flex-start;
}
.q__num {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--act-tx); background: var(--act);
  padding: 3px 8px; border-radius: 6px; letter-spacing: .02em;
}
.q__block {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-mute);
}
.q__title {
  font-family: var(--display);
  font-size: clamp(22px, 5.8vw, 27px); line-height: 1.22; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 24px;
}
/* data do plano (hoje+4 sem) — mesma do diagnóstico, destaque em vermelho */
.q__title .q__date {
  color: #e11d48;
  font-weight: 800;
  white-space: nowrap;
}
.opts { display: flex; flex-direction: column; gap: 12px; }

/* ---- GRADE DE CARDS COM FOTO (estilo BetterMe — ex.: idade) ---- */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qcard {
  position: relative; border: none; cursor: pointer; padding: 0; overflow: hidden;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #f3ecff 0%, #e6d9fb 100%);
  box-shadow: 0 10px 24px -14px rgba(124,58,237,.4);
  display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .2s, outline-color .15s;
  animation: rise .4s both;
}
.qcard:nth-child(1){animation-delay:.04s}.qcard:nth-child(2){animation-delay:.10s}
.qcard:nth-child(3){animation-delay:.16s}.qcard:nth-child(4){animation-delay:.22s}
.qcard:active { transform: scale(.97); }
.qcard.is-selected { outline: 3px solid var(--act); outline-offset: -3px; }
.qcard__imgwrap {
  display: flex; align-items: flex-end; justify-content: center;
  /* FOLD-SAFE: altura em dvh -> título + 2 linhas de cards cabem SEM rolar
     em qualquer celular (a imagem é o elemento que encolhe) */
  height: clamp(92px, 17dvh, 220px);
  overflow: hidden;
}
.qcard__img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom; /* pessoa INTEIRA visível, apoiada na faixa */
}
.qcard__bar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: -.01em;
  line-height: 1.2; text-align: center;
  color: var(--act-tx, #fff);
  background: var(--grad);
  padding: 10px 8px;
  flex: 1; min-height: 40px; /* rótulos de 2 linhas (ex.: foco) sem desalinhar os cards */
}
.qcard__arrow { display: inline-flex; }
.qcard__arrow svg { width: 16px; height: 16px; }
/* nº ímpar de cards: o último ocupa a linha inteira (mesma altura fold-safe) */
.qgrid .qcard:nth-child(odd):last-child { grid-column: 1 / -1; }

/* ---- MOCKUPS DECORATIVOS (espaço vazio abaixo das opções) ----
   Ocupam SÓ a sobra vertical da tela (flex:1 + min-height:0): em celular curto
   encolhem/somem sozinhos, sem empurrar as opções pra fora da dobra.
   1 imagem: canto esquerdo. 2 imagens: esquerda + direita. */
.q__decor {
  /* basis 0: não "pede" a altura da imagem — recebe SÓ o espaço livre da tela */
  flex: 1 1 0; min-height: 0;
  position: relative;
  margin-top: 10px; overflow: hidden;
}
/* imagens ABSOLUTAS: height:100% resolve contra a altura REAL do .q__decor.
   (Como filho flex normal, o Safari/iOS não trata a altura flexionada como
   definida e a % cai pro tamanho natural -> aparelhos "decapitados".) */
.q__decor img {
  position: absolute; bottom: 0;
  height: 100%; max-height: clamp(120px, 30dvh, 320px);
  width: auto; max-width: 46%;
  object-fit: contain;
}
.q__decor img:first-child { left: 0; object-position: left bottom; }
.q__decor img:only-child { max-width: 72%; }
.q__decor img:last-child:not(:only-child) { right: 0; object-position: right bottom; }
/* telefone curto: se a sobra for uma "lasca" (<90px), some com os mockups
   em vez de mostrar só o topo dos aparelhos */
.q__decor { container-type: size; }
@container (max-height: 90px) {
  .q__decor img { display: none; }
}
.opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; cursor: pointer;
  font-family: inherit; font-size: 16.5px; font-weight: 600; color: var(--tx);
  padding: 17px 18px; border-radius: var(--r-sm);
  background: var(--card); border: 1.5px solid var(--line);
  box-shadow: 0 4px 14px -8px rgba(76,29,149,.22);
  transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
  animation: rise .4s both;
}
.opt:nth-child(1){animation-delay:.04s}.opt:nth-child(2){animation-delay:.10s}
.opt:nth-child(3){animation-delay:.16s}.opt:nth-child(4){animation-delay:.22s}
.opt:nth-child(5){animation-delay:.28s}
.opt:active { transform: scale(.985); }
.opt:hover { border-color: var(--line-2); background: var(--card-2); }
.opt__dot {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line-2); display: grid; place-items: center;
  transition: .15s;
}
.opt__dot svg { width:13px; height:13px; opacity:0; transform: scale(.4); transition:.18s; color:#fff; }
.opt.is-selected {
  border-color: var(--act); color:#fff;
  background: var(--hair);
}
.opt.is-selected .opt__dot { background: var(--act); border-color: var(--act); }
.opt.is-selected .opt__dot svg { opacity:1; transform:scale(1); color: var(--act-tx); }

/* ------------------------------------------------------------- LETTER */
.letter { gap: 18px; }
.letter__card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 22px;
  box-shadow: var(--shadow); position: relative; overflow:hidden;
}
.letter__card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--act);
}
.letter__card p { font-size: 16.5px; line-height: 1.6; color: var(--tx-soft); margin: 0 0 14px; }
.letter__card p:first-of-type { color: var(--tx); }
.letter__card p:last-of-type { margin-bottom: 0; }
.letter__sign { font-weight: 800; font-size: 16px; margin-top: 18px; color: var(--tx); font-family: var(--mono); letter-spacing: .02em; }
.letter__sign .hl { font-weight:800; box-shadow:none; }

/* ------------------------------------------------------------- STORY (Break 1) */
/* tela cheia imersiva (rompe o padding do .stage) */
.story {
  margin: -18px -18px calc(-1 * (28px + env(safe-area-inset-bottom)));
}
.story__frame {
  position: relative; height: 100dvh; overflow: hidden;
  background: #0d0d12; color: #fff;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
/* mídia (vídeo/placeholder) preenche o fundo */
.story__media { position: absolute; inset: 0; z-index: 0; }
.story__video, .story__media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.story__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 30px;
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(124,58,237,.30), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px),
    #14101f;
}
.story__play {
  width: 76px; height: 76px; border-radius: 50%; background: var(--grad);
  display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(124,58,237,.7);
}
.story__play svg { width: 30px; height: 30px; color: #fff; margin-left: 4px; }
.story__plabel { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: #fff; }
.story__pnote { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.45; max-width: 80%; }

/* barra de stories (enche e passa sozinho) */
.story__bars {
  position: relative; z-index: 3;
  display: flex; gap: 4px; padding: 12px 12px 0;
}
.story__bar {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.32); overflow: hidden;
}
.story__bar i { display: block; height: 100%; width: 0%; background: #fff; }

/* cabeçalho do story */
.story__top {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 0;
}
.story__top::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 120px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
  z-index: -1; pointer-events: none;
}
.story__av { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; }
.story__id b { display: block; font-size: 14px; font-weight: 700; line-height: 1.1; }
.story__id small { font-size: 12px; color: rgba(255,255,255,.7); }
.story__skip { margin-left: auto; color: rgba(255,255,255,.85); display: grid; place-items: center; }

/* legenda (a carta que ele fala) */
.story__caption {
  position: absolute; left: 0; right: 0; bottom: 44px; z-index: 3;
  padding: 60px 22px 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72) 42%);
}
.story__kicker {
  font-weight: 800; font-size: 15px; margin: 0 0 10px;
  color: #fff;
}
.story__caption p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.92); margin: 0 0 8px; }
.story__sign { font-weight: 700; margin-top: 4px !important; }
.story__hint {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  text-align: center; font-size: 11px; letter-spacing: .03em; color: rgba(255,255,255,.55);
}
/* botão central pra ativar o som (só aparece se o navegador bloquear o autoplay c/ áudio) */
.story__soundbtn {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: none; cursor: pointer; padding: 8px;
  color: #fff; font-family: var(--display);
}
.story__soundbtn[hidden] { display: none; }
.story__soundic {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; font-size: 38px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 34px -6px rgba(0,0,0,.6);
  animation: btnPulse 1.5s ease-in-out infinite;
}
.story__soundtx {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------- TESTIMONIAL */
.testi { gap: 14px; }
/* @ dela no insta — escrito em cima */
.testi__handle { display:flex; align-items:center; gap:10px; }
.testi__hav { width:38px; height:38px; flex:0 0 auto; border-radius:50%; }
.testi__hname {
  display:flex; align-items:center; gap:5px;
  font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--tx);
}
/* vídeo dela falando — embaixo (formato stories 9/16) */
.testi__video {
  position: relative; width:100%; aspect-ratio: 9/16; max-height: 64dvh;
  border-radius: var(--r); overflow:hidden; background:#000;
}
.testi__vid { width:100%; height:100%; object-fit: cover; display:block; border:0; }
.testi__placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:18px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(124,58,237,.18), rgba(0,0,0,.85));
}
.testi__play {
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
}
.testi__play svg { width:30px; height:30px; color:#fff; margin-left:4px; }
.testi__plabel { font-weight:700; font-size:13px; letter-spacing:.04em; color:#fff; }
.testi__pnote { font-size:12px; color:rgba(255,255,255,.7); line-height:1.45; max-width:80%; }

/* depoimento em formato STORIES do instagram — full-bleed, igual ao story do Carlão.
   O frame usa a classe .story__frame (vídeo cobre a tela; barra/@ por cima). */
.testi--story {
  margin: -18px -18px calc(-1 * (28px + env(safe-area-inset-bottom)));
}
/* barrinha de stories enche suave conforme o vídeo toca */
.testi__frame .story__bar i { transition: width .2s linear; }

/* VSL da vturb em stories: força o player a COBRIR a tela inteira (igual aos
   vídeos nativos). O player é responsivo por largura e deixaria barras pretas;
   com aspect-ratio 9/16 + min-w/min-h ele preenche e o excedente é cortado. */
#vslPlayer { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #000; }
#vslPlayer vturb-smartplayer {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100% !important; height: auto !important;
  aspect-ratio: 9 / 16; min-width: 100%; min-height: 100%;
  max-width: none !important; margin: 0 !important; display: block;
}
#vslPlayer vturb-smartplayer video,
#vslPlayer vturb-smartplayer iframe {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* ---------------------------------------------- POST DE REELS (oferta / VSL 2) */
.reels { justify-content: center; }
.reelspost {
  width: 100%; max-width: 440px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow);
}
.reelspost__top { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.reelspost__av { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; }
.reelspost__id { min-width: 0; }
.reelspost__id b { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--tx); }
.reelspost__id small { display: block; font-size: 12px; color: var(--tx-mute); line-height: 1.2; }
.reelspost__more { margin-left: auto; color: var(--tx-soft); font-weight: 800; letter-spacing: 1px; }
/* H1 visível como headline do post (acima do vídeo) */
.reelspost__h1 {
  margin: 2px 0 12px; padding: 0 14px;
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(17px, 4.6vw, 21px); line-height: 1.3; color: var(--tx);
}
/* mídia em fluxo natural — NÃO corta nada: o botão/CTA da vturb aparece
   logo abaixo do vídeo, dentro do próprio player, com espaço livre. */
.reelspost__media { width: 100%; }
#reelsPlayer vturb-smartplayer {
  display: block; width: 100% !important; height: auto !important;
  max-width: none !important; margin: 0 auto !important;
}

/* ------------------------------------------------------------- VSL / OFFER */
.vsl { gap: 18px; }
.vsl__trigger { font-family: var(--display); font-size: clamp(20px,5.4vw,25px); line-height:1.24; font-weight:800; letter-spacing:-.02em; margin:0; }
.vslbox {
  position: relative; width:100%; aspect-ratio: 9/16; max-height: 64dvh;
  border-radius: var(--r); overflow:hidden; background:#000;
  box-shadow: var(--shadow); border:1px solid var(--line);
}
.vslbox iframe, .vslbox video { width:100%; height:100%; border:0; display:block; }
.vslbox__placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 14px, transparent 14px 28px),
    var(--card);
}
.vslbox__play {
  width:74px; height:74px; border-radius:50%; background:var(--act);
  display:grid; place-items:center;
}
.vslbox__play svg { width:30px; height:30px; color:var(--act-tx); margin-left:4px; }
.vslbox__label { font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx); }
.vslbox__note { font-size:12px; color:var(--tx-soft); line-height:1.4; max-width:88%; }

.offer__stack {
  display:flex; flex-direction:column; gap:10px; margin-top:4px;
}

/* ------------------------------------------------------------- LOADING */
/* Loading: H1 em cima + print completo (antes/depois inteiro, sem cortar) */
.loading {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 12px;
  padding: 10px 0 12px;
  width: 100%;
  max-width: 100%;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader {
  width: 72px; height:72px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--hair), var(--act));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation: spin 1s linear infinite;
}
.loader--sm {
  width: 36px; height: 36px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
}
/* H1 acima da foto */
.loading__h1,
.loading__text {
  font-family: var(--display);
  font-size: clamp(17px, 4.8vw, 21px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0 auto;
  max-width: 20ch;
  color: var(--tx);
  text-align: center;
  padding: 0 6px;
  flex: 0 0 auto;
}
.loading__dots span { animation: blink 1.2s infinite; }
.loading__dots span:nth-child(2){animation-delay:.2s}
.loading__dots span:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} }

/* print: um pouco mais perto, ainda sem cortar o corpo */
.loadslide {
  position: relative;
  width: min(100%, 380px);
  max-width: 100%;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #f6f1ff;
  border: 1px solid rgba(124,58,237,.14);
  box-shadow:
    0 18px 44px -16px rgba(70,30,130,.38),
    0 0 0 1px rgba(255,255,255,.5) inset;
  animation: loadslideIn .4s ease both;
  flex: 0 1 auto;
}
@keyframes loadslideIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.loadslide__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 620px);
  object-fit: contain; /* NÃO corta o corpo — mostra o print do app completo */
  object-position: top center;
  background: #f6f1ff;
  transition: opacity .14s ease;
}
.loadslide__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 8px 0 10px;
  background: #fff;
  border-top: 1px solid rgba(124,58,237,.08);
}
.loadslide__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(124,58,237,.22);
  transition: background .2s, transform .2s;
}
.loadslide__dot.is-on {
  background: #7c3aed;
  transform: scale(1.2);
}

/* recap das respostas dela pipocando durante o loading */
.loading__recap { display:flex; flex-direction:column; gap:10px; width:100%; max-width:300px; margin-top:4px; }
.loading__row {
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  font-size:15px; text-align:left;
}
.loading__row.is-in { opacity:1; transform:none; }
.loading__rk { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--tx-mute); min-width:96px; flex:0 0 auto; }
.loading__rv { font-weight:700; flex:1; }
.loading__rc { color:#22c55e; display:grid; place-items:center; flex:0 0 auto; }
.loading__rc svg { width:16px; height:16px; }

/* ------------------------------------------------------------- MIRROR */
.mirror { gap: 18px; justify-content:center; }
.mirror__title { font-family: var(--display); font-size: clamp(22px,5.8vw,28px); font-weight:800; letter-spacing:-.02em; line-height:1.16; margin:0; }
.mirror__rows { display:flex; flex-direction:column; gap:12px; margin: 6px 0; }
.mirror__row {
  display:flex; align-items:center; gap:14px;
  background: var(--card); border:1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 18px; animation: rise .5s both;
}
.mirror__row:nth-child(2){animation-delay:.14s}.mirror__row:nth-child(3){animation-delay:.28s}
.mirror__icon { width:38px;height:38px;border-radius:50%;background:var(--hair); border:1px solid var(--line); display:grid;place-items:center; flex:0 0 auto; }
.mirror__icon svg{ width:18px;height:18px; color:var(--tx-soft); }
.mirror__row small { display:block; color:var(--tx-mute); font-size:11px; font-weight:500; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.mirror__row b { font-size:17px; }
.mirror__footer { font-size:16px; color:var(--tx-soft); line-height:1.45; }

/* ------------------------------------------------------------- CHART */
.chart { gap: 16px; justify-content:center; }
.chart__title { font-family: var(--display); font-size: clamp(22px,5.8vw,27px); font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.16; }
.chart__sub { color: var(--tx-soft); font-size:15px; margin:0; }
.chart__lead { color: var(--tx-soft); font-size:15px; line-height:1.45; margin:2px 0 0; }
.chart__box {
  position: relative;
  background: var(--card); border:1px solid var(--line); border-radius: var(--r);
  padding: 22px 18px 14px; box-shadow: var(--shadow);
}
.chart__plot { position:relative; }
.chart__svg { width:100%; height:auto; display:block; overflow:visible; }
.chart__legend { display:flex; justify-content:space-between; margin-top:8px; padding:0 2px; }
.chart__legend span { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.03em; color:var(--tx-soft); }
.chart__legend span.is-goal { color:#b07d00; font-weight:800; }
/* balões de marco sobre a curva (estilo linha do tempo) */
.chart__bubble {
  position:absolute; z-index:2;
  background:#fff; color:var(--tx); border:1px solid var(--line);
  font-family:var(--display); font-weight:700; font-size:11px; line-height:1.18;
  text-align:center; padding:6px 9px; border-radius:11px; max-width:104px;
  box-shadow:0 8px 18px -10px rgba(76,29,149,.4);
  animation: bubbleIn .42s ease both;
}
.chart__bubble::after {
  content:""; position:absolute; bottom:-5px; width:10px; height:10px;
  background:inherit; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
.chart__bubble--c { transform:translate(-50%, calc(-100% - 13px)); }
.chart__bubble--c::after { left:50%; margin-left:-5px; }
.chart__bubble--l { transform:translate(-16px, calc(-100% - 13px)); }
.chart__bubble--l::after { left:16px; margin-left:-5px; }
.chart__bubble--r { transform:translate(calc(-100% + 16px), calc(-100% - 13px)); }
.chart__bubble--r::after { right:16px; margin-right:-5px; }
.chart__bubble--gold { background:#f5b301; color:#3a2a00; border-color:transparent; box-shadow:0 12px 24px -8px rgba(245,179,1,.6); }
.chart__bubble--gold::after { background:#f5b301; border-color:transparent; }
@keyframes bubbleIn { from { opacity:0; } to { opacity:1; } }
/* before/after estilo BetterMe — limpo, responsivo, sem texto vertical */
.ba {
  display:flex; flex-direction:column; gap:0;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 28px -14px rgba(15,10,30,.2);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ba__labels {
  display:grid;
  grid-template-columns: 1fr 12px 1fr;
  align-items:start;
  padding: 12px 12px 6px;
  gap: 6px;
}
.ba__labwrap {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center; min-width:0;
}
.ba__lab {
  font-family: var(--display);
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin:0;
  line-height: 1.15;
}
.ba__lab--now { color: var(--tx-soft); }
.ba__lab--goal { color: #7c3aed; }
.ba__date {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-mute);
  letter-spacing: .02em;
  line-height: 1.2;
}
.ba__date--goal { color: #b07d00; font-weight: 800; }
.ba__divider {
  width:1px; height: 26px;
  background: var(--line);
  margin: 4px auto 0;
  justify-self: center;
}
.ba__photos {
  display:grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
  align-items: start;
  gap: 6px;
  padding: 4px 10px 8px;
  background: linear-gradient(180deg, rgba(124,58,237,.05) 0%, rgba(124,58,237,.015) 100%);
  box-sizing: border-box;
}
.ba__shot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ba__img {
  display:block;
  width:100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  background: #0a0a0f;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
}
.ba__img--before { animation: baIn .5s ease both; }
.ba__img--after { animation: baIn .5s ease .1s both; }
@keyframes baIn {
  from { opacity:0; transform: translateY(6px); }
  to { opacity:1; transform: none; }
}
/* legendas sob as fotos: 1 linha reta em qualquer phone */
.ba__cap {
  margin: 0;
  text-align: center;
  font-size: clamp(10px, 2.7vw, 12px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tx);
  padding: 0 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: -.01em;
}
.ba__cap--goal {
  color: #7c3aed;
}
.ba__mid {
  display:flex;
  align-items:center;
  justify-content:center;
  align-self: center;
  min-height: 100%;
  padding-top: 18%;
}
.ba__arrows {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 1px;
  color: #7c3aed;
}
.ba__arrow {
  display:flex; line-height:0;
  opacity:.35;
  animation: baArrow 1.15s ease-in-out infinite;
}
.ba__arrow svg { display:block; width:14px; height:24px; }
.ba__arrow--1 { animation-delay: 0s; }
.ba__arrow--2 { animation-delay: .15s; opacity:.55; }
.ba__arrow--3 { animation-delay: .3s; opacity:.85; }
@keyframes baArrow {
  0%, 100% { opacity:.25; transform: translateX(-2px); }
  50% { opacity:1; transform: translateX(2px); }
}
/* marco do meio (ex: 5 dias) — faixa horizontal limpa, full width */
.ba__milestone {
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 12px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(124,58,237,.07);
  border: 1px solid rgba(124,58,237,.16);
  text-align: center;
  box-sizing: border-box;
}
.ba__milestone-when {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7c3aed;
}
.ba__milestone-txt {
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tx);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ba__info {
  display:flex; flex-direction:column;
  border-top: 1px solid var(--line);
  padding: 12px 12px 14px;
  gap: 10px;
  box-sizing: border-box;
}
.ba__row {
  display:grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  gap: 10px;
  align-items:start;
}
.ba__col { min-width:0; }
.ba__title {
  margin:0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-mute);
  letter-spacing: .02em;
}
.ba__value {
  margin:0;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 800;
  color: var(--tx);
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ba__value--goal { color: #7c3aed; }
.ba__vdiv {
  width:1px; align-self:stretch;
  background: var(--line);
}
.ba__hr {
  height:1px; width:100%;
  background: var(--line);
  border:0; margin:0;
}
.ba__bars {
  display:flex; gap:4px; margin-top:6px;
}
.ba__bar {
  flex:1; height:6px; border-radius:99px;
  background: rgba(124,58,237,.14);
}
.ba__bar.is-on {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
/* IMC: frase única dentro do card before/after */
.ba__imc {
  margin: 0 12px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(124,58,237,.06);
  border: 1px solid rgba(124,58,237,.14);
  box-sizing: border-box;
}
.ba__imc-phrase {
  margin: 0;
  font-size: clamp(13.5px, 3.6vw, 15px);
  line-height: 1.45;
  color: var(--tx);
  font-weight: 500;
}
.ba__imc-phrase strong {
  font-weight: 800;
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
}
.ba__imc--abaixo .ba__imc-phrase strong { color:#3b82f6; }
.ba__imc--saudavel .ba__imc-phrase strong { color:#16a34a; }
.ba__imc--acima .ba__imc-phrase strong { color:#d97706; }
.ba__imc--alto .ba__imc-phrase strong { color:#ea580c; }
/* título do diagnóstico um pouco mais contido no mobile */
.chart { gap: 14px; }
.chart__title {
  font-size: clamp(20px, 5.4vw, 26px) !important;
  text-align: left;
}
/* card de empatia abaixo da curva */
.chart__note {
  display:flex; gap:10px; align-items:flex-start;
  background: rgba(124,58,237,.07); border:1px solid rgba(124,58,237,.22);
  border-radius: var(--r-sm); padding:13px 14px;
}
.chart__note-ic { font-size:18px; line-height:1.25; flex:0 0 auto; }
.chart__note p { margin:0; font-size:15px; line-height:1.45; color:var(--tx); }

/* ------------------------------------------------------------- MEASURE (altura/peso) */
.measure { gap: 14px; }
.measure__fields { display:flex; gap:12px; margin-top:4px; }
.measure__field { flex:1; display:flex; flex-direction:column; gap:6px; }
.measure__flabel { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--tx-mute); }
.measure__inputwrap { position:relative; display:flex; align-items:center; }
.measure__input {
  width:100%; box-sizing:border-box;
  font-family:var(--display); font-size:24px; font-weight:800; color:var(--tx);
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:14px 46px 14px 16px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.measure__input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.measure__input.is-bad { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.measure__input::-webkit-outer-spin-button,
.measure__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.measure__input[type=number] { -moz-appearance:textfield; }
.measure__unit { position:absolute; right:14px; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--tx-mute); pointer-events:none; }
.measure__note { font-size:13px; color:var(--tx-soft); line-height:1.4; margin:2px 0 0; }
.measure__err { font-size:13px; font-weight:700; color:#ef4444; margin:0; }

/* ------------------------------------------------------------- IMC (card no diagnóstico) */
.imc {
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); padding:14px 16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px;
}
.imc__row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.imc__num { display:flex; align-items:baseline; gap:8px; }
.imc__num b { font-family:var(--display); font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.imc__num small { font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--tx-mute); }
.imc__cat { font-family:var(--mono); font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.imc__msg { margin:0; font-size:14.5px; line-height:1.45; color:var(--tx-soft); }
/* cores por faixa (acolhedoras) */
.imc--abaixo   .imc__num b { color:#3b82f6; } .imc--abaixo   .imc__cat { background:rgba(59,130,246,.14); color:#3b82f6; }
.imc--saudavel .imc__num b { color:#22c55e; } .imc--saudavel .imc__cat { background:rgba(34,197,94,.15); color:#16a34a; }
.imc--acima    .imc__num b { color:#f59e0b; } .imc--acima    .imc__cat { background:rgba(245,158,11,.16); color:#d97706; }
.imc--alto     .imc__num b { color:#f97316; } .imc--alto     .imc__cat { background:rgba(249,115,22,.16); color:#ea580c; }

/* ------------------------------------------------------------- FOOTNOTE / REVIEW FLAG */
.reviewflag {
  align-self:flex-start; margin: 14px 0 0;
  font-size:11.5px; font-weight:700; color:#ffd9a0;
  background: rgba(255,170,80,.12); border:1px solid rgba(255,170,80,.3);
  padding:7px 11px; border-radius:10px; line-height:1.4;
}

/* spacing helper para empurrar CTA pra base */
.spacer { flex: 1 1 auto; min-height: 18px; }

@media (min-width: 540px){
  .stage { padding-top: 24px; }
}