/* =========================================================================
   AGÊNCIA REI — Diagnóstico Real • IA
   styles.css — design system premium ("Apple-like"): glass, profundidade,
   movimento, gamificação. Mobile-first, container ~440px.
   ========================================================================= */

/* ---------- TOKENS DE MARCA ---------- */
:root {
  --bg:            #080f1c;                  /* fundo geral */
  --bg-2:          #0a1322;                  /* camada um tom acima */
  --amber:         #EF9F27;                  /* acento principal */
  --amber-2:       #ffd17a;                  /* highlight do âmbar (gradientes) */
  --amber-ink:     #412402;                  /* texto sobre âmbar */
  --amber-glow:    rgba(239,159,39,.30);     /* brilho difuso */
  --amber-soft:    rgba(239,159,39,.12);     /* fundo de seleção */

  --text:          #ffffff;                  /* texto principal */
  --text-body:     rgba(255,255,255,.74);    /* corpo legível (AA em tamanho normal) */
  --text-muted:    rgba(255,255,255,.62);    /* rótulos informativos secundários (AA ~5.5:1) */
  --text-2:        rgba(255,255,255,.35);    /* secundário/decorativo (token de marca) */
  --text-3:        rgba(255,255,255,.20);    /* microcopy decorativo (token de marca) */

  --track:         rgba(255,255,255,.10);    /* trilho da barra */

  /* Glassmorphism */
  --glass:         rgba(255,255,255,.045);
  --glass-2:       rgba(255,255,255,.06);
  --glass-bd:      rgba(255,255,255,.08);
  --glass-hi:      rgba(255,255,255,.14);    /* highlight superior */

  --sel-bd:        #EF9F27;
  --sel-bg:        rgba(239,159,39,.12);

  --danger:        #ff6b6b;
  --ok:            #3dd7a3;

  --r-xl:  24px;
  --r-lg:  20px;
  --r-md:  16px;
  --r-sm:  12px;
  --maxw:  440px;
  --header-h: 64px;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  /* glow radial âmbar saindo do topo + leve glow inferior */
  background-image:
    radial-gradient(125% 70% at 50% -15%, rgba(239,159,39,.10), transparent 55%),
    radial-gradient(90% 60% at 50% 115%, rgba(239,159,39,.05), transparent 55%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Textura de grão quase imperceptível (tira o aspecto "chapado") */
.bg-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input  { font-family: inherit; }
img, video { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Foco programático (títulos que recebem foco na troca de tela p/ leitores de tela):
   sem anel visual — eles não são interativos. Botões/inputs mantêm o foco visível. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* =========================================================================
   CABEÇALHO + PROGRESSO + XP
   ========================================================================= */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,15,28,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--glass-bd);
}
.header-row {
  max-width: var(--maxw); margin: 0 auto; height: var(--header-h);
  padding: 0 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
}
/* Colunas fixas: a marca fica SEMPRE no centro, mesmo com voltar/XP ocultos. */
.header-row .back-btn { grid-column: 1; justify-self: start; }
.header-row .brand    { grid-column: 2; justify-self: center; }
.header-row .xp-chip  { grid-column: 3; justify-self: end; }

.back-btn {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  color: var(--text-2); border-radius: 50%; border: 1px solid var(--glass-bd);
  background: var(--glass);
  transition: color .2s, border-color .2s, background .2s, transform .15s var(--ease);
}
.back-btn svg { width: 20px; height: 20px; }
.back-btn:hover  { color: var(--text); border-color: var(--amber); background: var(--amber-soft); }
.back-btn:active { transform: scale(.9); }
.back-btn[hidden] { display: none; }

.brand { display: flex; align-items: center; gap: 9px; }
.brand-logo { height: 32px; width: auto; max-width: 200px; display: block; object-fit: contain; }
.brand-mark { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark[hidden] { display: none; }
.brand-crown svg { fill: var(--amber); display: block; filter: drop-shadow(0 2px 7px var(--amber-glow)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-weight: 800; font-size: 13px; letter-spacing: 1.4px; }
.brand-seal { font-size: 9.5px; font-weight: 600; letter-spacing: .3px; color: var(--amber); }

/* Medidor de XP */
.xp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 9px; border-radius: 99px;
  background: var(--amber-soft); border: 1px solid rgba(239,159,39,.25);
  color: var(--amber); font-weight: 700; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 18px -6px var(--amber-glow);
  transition: transform .25s var(--ease);
}
.xp-chip[hidden] { display: none; }
.xp-chip svg { fill: var(--amber); }
.xp-chip.bump { animation: xpBump .45s var(--ease); }
@keyframes xpBump { 0%{transform:scale(1)} 35%{transform:scale(1.16)} 100%{transform:scale(1)} }

/* Barra de progresso premium */
.progress-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 14px 9px; }
.progress-track { position: relative; height: 5px; background: var(--track); border-radius: 99px; overflow: visible; }
.progress-bar {
  position: relative; height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(239,159,39,.65), var(--amber));
  border-radius: 99px; box-shadow: 0 0 12px var(--amber-glow);
  transition: width .6s var(--ease);
}
.progress-glow {
  position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 3px var(--amber), 0 0 4px 1px #fff;
  animation: glowPulse 1.6s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.7; transform:translateY(-50%) scale(.85)} 50%{opacity:1; transform:translateY(-50%) scale(1.15)} }
.progress-meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; }
.step-label { color: var(--text-2); font-weight: 600; letter-spacing: .3px; }
.progress-pct { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }

/* =========================================================================
   LAYOUT / TELAS
   ========================================================================= */
.app { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 24px 18px 56px; }
.screen { will-change: opacity, transform, filter; }
.screen-ghost { will-change: opacity, transform, filter; z-index: 2; }

/* Bloco que aparece via IntersectionObserver */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* Eyebrow / títulos */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--amber); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--amber); display: inline-block; box-shadow: 0 0 8px var(--amber-glow); }

h1.question, h2.question {
  font-weight: 700; font-size: 24px; line-height: 1.18; letter-spacing: -0.025em; margin-bottom: 9px;
}
.question-sub { color: var(--text-body); font-size: 14px; margin-bottom: 24px; letter-spacing: 0; }

/* =========================================================================
   CHIPS DE ÍCONE (line icons)
   ========================================================================= */
.chip {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  color: var(--amber);
  background: radial-gradient(120% 120% at 50% 0%, rgba(239,159,39,.16), rgba(239,159,39,.05));
  border: 1px solid rgba(239,159,39,.22);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 18px -8px var(--amber-glow);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.chip svg { width: 22px; height: 22px; }
.chip-round { border-radius: 50%; }
.chip-sm { width: 38px; height: 38px; border-radius: 11px; }
.chip-sm svg { width: 19px; height: 19px; }

/* =========================================================================
   OPÇÕES (glass cards com chip + ícone)
   ========================================================================= */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  position: relative; display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left; padding: 13px 14px;
  background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-bd); border-radius: var(--r-md);
  color: var(--text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s, background .2s, transform .14s var(--ease), box-shadow .2s;
}
.option::before { /* highlight superior glass */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-hi), transparent 30%); opacity: .5;
}
.option:hover { border-color: rgba(239,159,39,.4); transform: translateY(-1px); }
.option:active { transform: scale(.99); }
.option:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.option .opt-label { flex: 1; }

/* Estado selecionado: borda âmbar 1.5px + fundo soft + glow */
.option.selected {
  border: 1.5px solid var(--sel-bd); background: var(--sel-bg);
  box-shadow: 0 0 0 1px var(--sel-bd), 0 0 34px -10px var(--amber-glow);
}
.option.selected .chip { transform: scale(1.04); border-color: rgba(239,159,39,.5); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 22px -6px var(--amber-glow); }

/* Check de múltipla escolha (desenha-se) */
.opt-check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--glass-bd); display: grid; place-items: center;
  transition: background .2s, border-color .2s;
}
.opt-check svg { width: 13px; height: 13px; stroke: var(--amber-ink); stroke-width: 3.2;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s var(--ease); }
.option.selected .opt-check { background: var(--amber); border-color: var(--amber); }
.option.selected .opt-check svg { stroke-dashoffset: 0; }

/* =========================================================================
   BOTÕES
   ========================================================================= */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 17px 20px; border-radius: 99px;
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
  transition: transform .15s var(--ease), box-shadow .25s, opacity .25s, background .25s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: linear-gradient(180deg, var(--amber-2), var(--amber));
  color: var(--amber-ink);
  box-shadow: 0 10px 30px -8px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 16px 40px -8px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-ghost { background: var(--glass); border: 1px solid var(--glass-bd); color: var(--text); backdrop-filter: blur(12px); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn[disabled] { opacity: .25; pointer-events: none; }
.btn-row { margin-top: 24px; }
.btn-pulse { animation: btnPulse 2.6s ease-in-out infinite; }
@keyframes btnPulse {
  0%,100% { box-shadow: 0 10px 30px -8px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.35); }
  50%     { box-shadow: 0 12px 42px -4px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.35); }
}
/* Ripple discreto */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(65,36,2,.35);
  pointer-events: none; animation: ripple .6s ease-out; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* =========================================================================
   TELA 0 — LANDING + HERO MEDIA
   ========================================================================= */
.landing { text-align: center; padding-top: 2px; }

/* Frame de mídia premium (vídeo / imagem / mockup) */
.media-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--glass-bd); background: var(--bg-2);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7), 0 0 50px -16px var(--amber-glow), inset 0 1px 0 var(--glass-hi);
}
.media-frame::after { /* moldura highlight */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--glass-hi), transparent 35%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.hero-media { aspect-ratio: 16/10; margin: 4px 0 22px; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Skeleton enquanto a mídia não carrega */
.media-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--bg-2) 30%, rgba(255,255,255,.06) 50%, var(--bg-2) 70%);
  background-size: 220% 100%; animation: shimmer 1.6s infinite linear;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* Botão play sobreposto */
.play-btn {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: var(--amber-ink);
  background: linear-gradient(180deg, var(--amber-2), var(--amber));
  box-shadow: 0 8px 30px -6px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.4);
  transition: opacity .4s, transform .2s var(--ease);
}
.play-btn svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.play-btn:hover { transform: scale(1.06); }
.media-frame.playing .play-btn { opacity: 0; pointer-events: none; }

/* Mockup animado (fallback) */
.hero-mockup { width: 100%; height: 100%; display: block; }
.mock-bar { transform-box: fill-box; transform-origin: center bottom; animation: mockBar 1.8s ease-in-out infinite; }
@keyframes mockBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.55); } }

.landing h1 {
  font-weight: 800; font-size: 29px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 14px;
}
.landing h1 .hl { color: var(--amber); position: relative; }
.landing .lead { color: var(--text-body); font-size: 15px; margin-bottom: 24px; }

.steps { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; text-align: left; }
.step-card {
  display: flex; align-items: center; gap: 14px; padding: 15px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-bd); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s, transform .15s var(--ease);
}
.step-card:hover { border-color: rgba(239,159,39,.35); transform: translateY(-2px); }
.step-card .step-no { font-size: 11px; font-weight: 800; color: var(--amber); letter-spacing: 1px; }
.step-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.step-card p { font-size: 13px; color: var(--text-body); }

.trust-line { margin-top: 16px; font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; justify-content: center; }
.trust-line svg { width: 15px; height: 15px; stroke: var(--amber); }

/* =========================================================================
   INPUTS
   ========================================================================= */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.input {
  width: 100%; padding: 15px 16px; color: var(--text); font-size: 15px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm);
  backdrop-filter: blur(12px); transition: border-color .2s, background .2s, box-shadow .2s;
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--amber); background: var(--amber-soft); box-shadow: 0 0 0 3px rgba(239,159,39,.14); }
.input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,107,107,.12); }
.error-msg { color: var(--danger); font-size: 12.5px; margin-top: 6px; min-height: 16px; display: block; }
.secure-seal { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--text-2); margin-top: 14px; }
.secure-seal svg { width: 14px; height: 14px; stroke: var(--ok); }

/* =========================================================================
   TELA 7 — LOADING (radar/coroa traçando-se)
   ========================================================================= */
.loading { text-align: center; padding-top: 30px; }
.loading-orb { width: 210px; height: 210px; margin: 0 auto 28px; }
.loading-orb svg { width: 100%; height: 100%; overflow: visible; }
.lo-ring { animation: ringPulse 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes ringPulse { 0%,100%{opacity:.2} 50%{opacity:.55} }
.lo-sweep { transform-origin: 105px 105px; animation: sweep 1.7s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.lo-draw { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw 2.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lo-crown { animation: floaty 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.loading h2 { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; }
.loading-status { color: var(--amber); font-size: 14px; font-weight: 600; min-height: 20px; transition: opacity .3s; }
.loading-sub { color: var(--text-3); font-size: 12.5px; margin-top: 6px; }
.dots::after { content: ""; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} 100%{content:""} }

/* =========================================================================
   TELA 9 — RESULTADO
   ========================================================================= */
.result-headline {
  position: relative; overflow: hidden; text-align: center; margin-bottom: 8px;
  padding: 26px 18px; border-radius: var(--r-lg);
  background: radial-gradient(120% 120% at 50% 0%, rgba(239,159,39,.16), rgba(239,159,39,.03));
  border: 1px solid rgba(239,159,39,.28);
  box-shadow: 0 0 50px -18px var(--amber-glow), inset 0 1px 0 var(--glass-hi);
}
.result-headline .label { font-size: 12.5px; color: var(--text-body); margin-bottom: 8px; }
.result-headline .money {
  font-weight: 800; font-size: 38px; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: 0 2px 22px var(--amber-glow);
}
.result-headline .money-sub { font-size: 12.5px; color: var(--text-2); margin-top: 8px; }

.section-title { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; margin: 30px 0 14px; display: flex; align-items: center; gap: 9px; }
.section-title .chip-sm { width: 28px; height: 28px; }
.section-title .chip-sm svg { width: 15px; height: 15px; }

/* Animação "pop" de conquista — usada nos selos de coroa das telas finais. */
@keyframes badgePop { 0%{transform:scale(.5); opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1); opacity:1} }

/* Medidor de maturidade */
.maturity { margin-top: 14px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-md); padding: 20px 16px; backdrop-filter: blur(12px); }
.maturity-scale { position: relative; height: 8px; border-radius: 99px; margin: 26px 6px 10px; background: linear-gradient(90deg, #5a3a12, #9a6f1c, var(--amber)); }
.maturity-marker { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); transform: translate(-50%,-50%); box-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 16px var(--amber-glow); transition: left 1s var(--ease); }
.maturity-marker::after { content: attr(data-level); position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--amber); }
.maturity-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Radar */
.radar-wrap { display: grid; place-items: center; margin: 6px 0; }
.radar-wrap svg { width: 100%; max-width: 340px; height: auto; }
.radar-grid { opacity: 0; transition: opacity .6s ease; }
.radar-grid.in { opacity: 1; }
.radar-data { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.radar-data.draw { animation: draw 1.4s var(--ease) .2s forwards; }
.radar-dot { opacity: 0; }
.radar-dot.in { opacity: 1; transition: opacity .4s ease; }

/* Pilares */
.pillars { display: flex; flex-direction: column; gap: 10px; }
.pillar {
  display: grid; grid-template-columns: auto 1fr; gap: 0 13px; align-items: center;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-md); padding: 14px;
  backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(14px);
}
.pillar.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pillar .chip-sm { grid-row: 1 / span 2; }
.pillar-head { display: flex; align-items: center; justify-content: space-between; }
.pillar-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.pillar-score { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pillar-score .max { color: var(--text-3); font-weight: 500; }
.pillar.bad .pillar-score  { color: var(--danger); }
.pillar.mid .pillar-score  { color: var(--amber); }
.pillar.good .pillar-score { color: var(--ok); }
.pillar-bar { grid-column: 2; height: 5px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 8px 0 9px; }
.pillar-bar > span { display: block; height: 100%; border-radius: 99px; width: 0; background: var(--amber); transition: width 1s var(--ease); }
.pillar.bad .pillar-bar > span  { background: var(--danger); }
.pillar.good .pillar-bar > span { background: var(--ok); }
.pillar-copy { grid-column: 2; font-size: 12.5px; color: var(--text-body); line-height: 1.5; }

/* =========================================================================
   PÁGINAS DE OFERTA (Trilhas B e C)
   ========================================================================= */
.offer h1 { font-weight: 800; font-size: 25px; line-height: 1.18; letter-spacing: -0.03em; margin-bottom: 11px; }
.offer h1 .hl { color: var(--amber); }
.offer .offer-lead { color: var(--text-body); font-size: 14px; margin-bottom: 20px; }

.offer-media { aspect-ratio: 16/10; margin: 0 0 20px; }
.offer-media img { width: 100%; height: 100%; object-fit: cover; }

.benefit-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.benefit {
  display: flex; gap: 13px; align-items: center; padding: 13px 14px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-md); backdrop-filter: blur(12px);
  transition: border-color .2s, transform .15s var(--ease);
}
.benefit:hover { border-color: rgba(239,159,39,.3); transform: translateY(-1px); }
.benefit h4 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.benefit p { font-size: 12.5px; color: var(--text-body); }

.bonus-card { border: 1px dashed rgba(239,159,39,.5); background: var(--sel-bg); border-radius: var(--r-lg); padding: 18px; margin: 18px 0; text-align: center; box-shadow: inset 0 1px 0 var(--glass-hi); }
.bonus-card .tag { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--amber); text-transform: uppercase; }
.bonus-card h3 { font-size: 16px; font-weight: 700; margin: 6px 0; letter-spacing: -0.01em; }
.bonus-card .bonus-price { font-size: 13px; color: var(--text-2); }
.bonus-card .bonus-price b { color: var(--ok); }

.price-box { position: relative; overflow: hidden; text-align: center; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: 24px 18px; margin: 18px 0; box-shadow: 0 0 50px -22px var(--amber-glow), inset 0 1px 0 var(--glass-hi); }
.price-box .off-badge { display: inline-block; margin-bottom: 12px; background: linear-gradient(180deg, var(--amber-2), var(--amber)); color: var(--amber-ink); font-weight: 800; font-size: 12px; padding: 5px 13px; border-radius: 99px; box-shadow: 0 6px 18px -6px var(--amber-glow); }
.price-box .anchor { color: var(--text-3); text-decoration: line-through; font-size: 15px; }
.price-box .now { font-weight: 800; font-size: 40px; letter-spacing: -0.03em; color: var(--amber); line-height: 1.05; text-shadow: 0 2px 20px var(--amber-glow); }
.price-box .terms { font-size: 13px; color: var(--text-2); margin-top: 5px; }

.guarantee { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 12.5px; color: var(--text-2); margin-top: 14px; }
.guarantee svg { width: 18px; height: 18px; stroke: var(--ok); flex: 0 0 auto; }

/* Prova social Trilha C */
.scarcity { display: flex; gap: 10px; align-items: center; background: rgba(255,107,107,.08); border: 1px solid rgba(255,107,107,.25); border-radius: var(--r-md); padding: 13px 14px; margin: 16px 0; font-size: 12.5px; }
.scarcity svg { width: 18px; height: 18px; stroke: var(--danger); flex: 0 0 auto; }

.stat-strip { display: flex; gap: 10px; margin: 18px 0; }
.stat { flex: 1; text-align: center; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-md); padding: 15px 8px; backdrop-filter: blur(12px); }
.stat .num { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--amber); display: inline-flex; align-items: center; gap: 3px; }
.stat .num svg { width: 16px; height: 16px; fill: var(--amber); stroke: none; }
.stat .desc { font-size: 11px; color: var(--text-2); margin-top: 3px; }

.testi-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px -18px; padding: 4px 18px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.testi-carousel::-webkit-scrollbar { height: 0; }
.testi { scroll-snap-align: center; flex: 0 0 87%; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: 16px; backdrop-filter: blur(12px); }
.testi .stars { display: flex; gap: 2px; margin-bottom: 9px; }
.testi .stars svg { width: 14px; height: 14px; fill: var(--amber); stroke: none; }
.testi p { font-size: 13px; color: var(--text); line-height: 1.55; margin-bottom: 13px; }
.testi .who { display: flex; align-items: center; gap: 10px; }
.testi .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sel-bg); color: var(--amber); display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.testi .avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi .who b { font-size: 13px; display: block; }
.testi .who span { font-size: 11px; color: var(--text-2); }

.authority { display: flex; gap: 14px; align-items: center; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: 16px; margin: 18px 0; backdrop-filter: blur(12px); }
.authority .photo { width: 60px; height: 60px; border-radius: 16px; overflow: hidden; flex: 0 0 60px; display: grid; place-items: center; background: var(--sel-bg); }
.authority .photo img { width: 100%; height: 100%; object-fit: cover; }
.authority .photo svg { fill: var(--amber); width: 30px; }
.authority h4 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.authority .role { font-size: 12px; color: var(--amber); margin-bottom: 4px; }
.authority p { font-size: 12px; color: var(--text-2); }

.logos-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.logo-chip { font-size: 11px; color: var(--text-2); border: 1px solid var(--glass-bd); border-radius: 99px; padding: 7px 13px; background: var(--glass); }

/* =========================================================================
   AGENDAMENTO (Trilha C)
   ========================================================================= */
.cal { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: 16px; backdrop-filter: blur(12px); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head .mon { font-weight: 700; font-size: 15px; text-transform: capitalize; letter-spacing: -0.01em; }
.cal-nav { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--glass-bd); display: grid; place-items: center; color: var(--text-2); background: var(--glass); }
.cal-nav svg { width: 18px; height: 18px; }
.cal-nav:hover:not([disabled]) { color: var(--amber); border-color: var(--amber); }
.cal-nav[disabled] { opacity: .2; pointer-events: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.cal-dow { text-align: center; font-size: 10.5px; color: var(--text-muted); padding: 4px 0; font-weight: 600; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; position: relative; border-radius: 11px; font-size: 13.5px; border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .12s var(--ease); }
.cal-day.empty { visibility: hidden; }
.cal-day.disabled { color: var(--text-3); pointer-events: none; }
.cal-day.avail::after { content:""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--ok); }
.cal-day:not(.disabled):not(.empty):hover { background: var(--sel-bg); }
.cal-day.selected { background: var(--amber); color: var(--amber-ink); font-weight: 700; box-shadow: 0 0 18px -4px var(--amber-glow); }
.cal-day.selected::after { background: var(--amber-ink); }
.time-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 16px; }
.time-slot { padding: 13px; border-radius: var(--r-sm); border: 1px solid var(--glass-bd); background: var(--glass); text-align: center; font-size: 14px; font-weight: 600; transition: all .15s; backdrop-filter: blur(12px); }
.time-slot:hover { border-color: rgba(239,159,39,.5); }
.time-slot.selected { border-color: var(--amber); background: var(--sel-bg); color: var(--amber); box-shadow: 0 0 22px -8px var(--amber-glow); }
.tz-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-top: 10px; }
.tz-note svg { width: 13px; height: 13px; stroke: var(--text-muted); }

/* =========================================================================
   FINAIS / CONFIRMAÇÃO / DESQUALIFICAÇÃO
   ========================================================================= */
.final { text-align: center; padding-top: 14px; }
.final .crown-badge { width: 90px; height: 90px; margin: 0 auto 22px; border-radius: 26px; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, rgba(239,159,39,.22), rgba(239,159,39,.05)); border: 1px solid rgba(239,159,39,.3); box-shadow: 0 0 50px -16px var(--amber-glow); }
.final .crown-badge svg { fill: var(--amber); filter: drop-shadow(0 4px 14px var(--amber-glow)); }
.final .crown-badge.pop { animation: badgePop .7s var(--ease) both; }
.final h1 { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--amber); margin-bottom: 12px; }
.final .final-sub { color: var(--text-body); font-size: 14.5px; margin-bottom: 24px; }
.summary { text-align: left; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: 18px; margin-bottom: 22px; backdrop-filter: blur(12px); }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--glass-bd); }
.summary-row:last-child { border-bottom: none; }
.summary-row .k { font-size: 12.5px; color: var(--text-2); }
.summary-row .v { font-size: 13px; font-weight: 600; text-align: right; }
.muted-note { font-size: 12px; color: var(--text-3); margin-top: 16px; }

/* =========================================================================
   RESPONSIVO + REDUCED MOTION
   ========================================================================= */
@media (min-width: 460px) {
  .app { padding: 30px 22px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .pillar { opacity: 1 !important; transform: none !important; }
  .progress-glow, .btn-pulse { animation: none !important; }
}

/* ANIM_INTENSITY='off' — desliga TODA animação CSS (espelha o reduced-motion),
   inclusive as que rodam só via CSS (btn-pulse, glow, equalizer, skeleton, loading). */
html.anim-off *, html.anim-off *::before, html.anim-off *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}
html.anim-off .reveal, html.anim-off .pillar { opacity: 1 !important; transform: none !important; }
html.anim-off .progress-glow, html.anim-off .btn-pulse, html.anim-off .mock-bar, html.anim-off .media-skeleton { animation: none !important; }

/* ANIM_INTENSITY='reduced' — mantém transições/contadores, corta os loops decorativos infinitos. */
html.anim-reduced .btn-pulse, html.anim-reduced .progress-glow, html.anim-reduced .mock-bar { animation: none !important; }