/* =============================================================================
   FIRST IMPRESSION AI — SISTEMA VISUAL
   =============================================================================

   DIREÇÃO
   -------
   O produto mede como alguém é VISTO. O vocabulário vem daí: exposição,
   foco, luz caindo sobre um sujeito. A paleta é a de um fotômetro — base
   índigo profunda, e três cores de luz que atravessam do violeta ao âmbar.

   Base índigo, não preto. Preto puro com um acento neon é o visual padrão
   de todo produto de IA hoje; o violeta na sombra dá temperatura e afasta
   o resultado desse lugar comum.

   ASSINATURA
   ----------
   O fotômetro da tela de revelação: arco circular preenchendo enquanto o
   número gigante é exposto por um gradiente que varre da esquerda. É o
   único momento ousado da interface. Todo o resto — chips, cards, barras —
   é deliberadamente quieto, para que ele seja lembrado.

   TIPOGRAFIA
   ----------
   Sem fonte externa, por decisão. O CSP restringe font-src a 'self' e
   data:, e uma requisição bloqueante a um CDN de fontes contradiz o
   requisito de velocidade. A stack de sistema entrega SF Pro no iOS, Roboto
   no Android e Segoe no Windows — todas boas em peso alto e numeral tabular.
   A personalidade vem do TRATAMENTO: contraste extremo de peso, tracking
   negativo agressivo nos números, micro-rótulos em caixa alta com tracking
   largo.

   ORDEM DO ARQUIVO
   ----------------
   tokens → reset → tipografia → botões → formulários → componentes →
   telas → utilidades → responsivo → acessibilidade
   ============================================================================= */

/* =============================================================================
   TOKENS
   ============================================================================= */

:root {
  /* Paleta */
  --ink:        #14101F;
  --ink-raised: #1E1830;
  --ink-line:   #2C2442;
  --beam:       #7B5CFF;
  --halo:       #FF5C7A;
  --flare:      #FFB454;
  --paper:      #F6F2FF;
  --paper-dim:  #A79EC4;
  --paper-mute: #6F6790;
  --danger:     #FF6B6B;

  /* Gradientes */
  --gradient-light: linear-gradient(100deg, var(--beam) 0%, var(--halo) 55%, var(--flare) 100%);
  --gradient-veil:  linear-gradient(180deg, rgba(123, 92, 255, .16) 0%, transparent 60%);

  /* Tipografia */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-num:  ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala de tipo — clamp para acompanhar a tela sem media query */
  --t-hero:  clamp(2.35rem, 11vw, 3.75rem);
  --t-xl:    clamp(1.75rem, 7.5vw, 2.5rem);
  --t-lg:    clamp(1.25rem, 5vw, 1.6rem);
  --t-md:    1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-micro: 0.6875rem;

  /* Espaçamento — escala de 4px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --ring: 0 0 0 3px rgba(255, 92, 122, .55);

  /* Área segura do notch, com fallback para navegadores sem env() */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* =============================================================================
   RESET
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/**
 * Textura sutil sobre o fundo.
 *
 * Gradiente radial fixo, não imagem: zero requisição, zero peso. Ele evita
 * que o fundo escuro pareça uma chapa lisa e sugere luz entrando pelo topo,
 * que é a metáfora do produto inteiro.
 */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(123, 92, 255, .22), transparent 65%),
    radial-gradient(80% 40% at 100% 0%, rgba(255, 92, 122, .12), transparent 60%);
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.app {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding:
    calc(var(--s-6) + var(--safe-top))
    var(--s-5)
    calc(var(--s-8) + var(--safe-bottom));
}

.screen { display: none; }
.screen.is-active { display: block; animation: enter .45s cubic-bezier(.2, .7, .3, 1) both; }

/**
 * A tela de revelação ocupa a altura toda e centraliza.
 *
 * É o único momento do produto que merece a tela inteira: nada compete com
 * o número, e não há nada abaixo da dobra para distrair. O usuário vê o
 * score, absorve, e só então decide avançar.
 */
.screen--reveal.is-active {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--s-8) - var(--safe-top) - var(--safe-bottom));
}

.stack { display: flex; flex-direction: column; gap: var(--s-5); }
.stack--center { align-items: center; text-align: center; min-height: 78dvh; justify-content: center; }

/* Dentro da revelação o stack não precisa forçar altura: o grid já centraliza */
.screen--reveal .stack--center { min-height: 0; }

@keyframes enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================================
   TIPOGRAFIA
   ============================================================================= */

/**
 * O micro-rótulo em caixa alta com tracking largo é o contraponto ao
 * display: um sussurro antes do grito. É esse par que cria a hierarquia,
 * não o tamanho sozinho.
 */
.eyebrow {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.display {
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.display--hero { font-size: var(--t-hero); letter-spacing: -.04em; }

/* O acento no display carrega o mesmo gradiente do fotômetro: a cor da luz
   aparece primeiro aqui e reaparece no score. Repetição cria memória. */
.display__accent {
  background: var(--gradient-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 34ch;
  text-wrap: pretty;
}

.stack--center .lede { margin-inline: auto; }
.lede--tight { font-size: var(--t-sm); }

.micro { font-size: var(--t-xs); color: var(--paper-mute); }
.prose { color: var(--paper-dim); font-size: var(--t-sm); line-height: 1.65; text-wrap: pretty; }

.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--halo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* =============================================================================
   BOTÕES
   ============================================================================= */

/**
 * Alvo mínimo de 52px de altura. O padrão de acessibilidade pede 44, mas
 * este produto é usado com uma mão, muitas vezes andando, então a folga
 * extra reduz erro real de toque.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--t-md);
  font-weight: 650;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn--primary {
  background: var(--gradient-light);
  color: #16101F;
  font-weight: 750;
  box-shadow: 0 10px 30px -12px rgba(255, 92, 122, .7);
}

.btn--ghost { color: var(--paper-dim); border-color: var(--ink-line); }
.btn--ghost:hover:not(:disabled) { color: var(--paper); border-color: var(--paper-mute); }

.btn--danger { color: var(--danger); border-color: rgba(255, 107, 107, .35); }

.btn--xl { width: 100%; min-height: 58px; font-size: 1.0625rem; }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--t-xs); }

.btn--loading { pointer-events: none; opacity: .7; }

/* =============================================================================
   FORMULÁRIOS
   ============================================================================= */

.form { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: var(--t-xs);
  font-weight: 650;
  color: var(--paper-dim);
  letter-spacing: .01em;
}

/**
 * font-size 16px é obrigatório nos inputs.
 *
 * Abaixo disso o Safari no iOS dá zoom automático ao focar o campo, e a
 * pessoa perde o contexto da tela no meio do checkout. É a causa mais comum
 * de abandono em formulário mobile e não aparece em nenhum teste de desktop.
 */
.field__input {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-raised);
  color: var(--paper);
  font-family: inherit;
  font-size: 16px;
  transition: border-color .16s ease, background .16s ease;
}

.field__input::placeholder { color: var(--paper-mute); }
.field__input:focus { outline: none; border-color: var(--halo); background: #241C3A; }
.field__input--area { min-height: 110px; resize: vertical; line-height: 1.5; }

.field__input--code {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  letter-spacing: .38em;
  text-align: center;
  padding-left: .38em;
}

.field__hint { font-size: var(--t-xs); color: var(--paper-mute); }
.field__error { font-size: var(--t-xs); color: var(--danger); font-weight: 600; }
.field__input.is-invalid { border-color: var(--danger); }

/* Checkbox desenhado — o nativo não aceita estilo consistente entre navegadores */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  padding: var(--s-3);
  border-radius: var(--radius);
}

.check input { position: absolute; opacity: 0; width: 0; height: 0; }

.check__box {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 2px solid var(--ink-line);
  border-radius: 7px;
  transition: background .16s ease, border-color .16s ease;
  position: relative;
}

.check input:checked + .check__box {
  background: var(--gradient-light);
  border-color: transparent;
}

.check input:checked + .check__box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #16101F;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.check input:focus-visible + .check__box { box-shadow: var(--ring); }
.check__label { font-size: var(--t-sm); color: var(--paper-dim); line-height: 1.5; }

/* =============================================================================
   CHIPS — contexto e objetivo
   ============================================================================= */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  background: var(--ink-raised);
  color: var(--paper-dim);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.chip:hover { border-color: var(--paper-mute); color: var(--paper); }

.chip.is-selected {
  background: var(--gradient-light);
  border-color: transparent;
  color: #16101F;
  font-weight: 700;
}

/* =============================================================================
   UPLOAD
   ============================================================================= */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-5);
  border: 2px dashed var(--ink-line);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  text-align: center;
}

.dropzone:hover, .dropzone.is-over { border-color: var(--halo); background: #241C3A; }
.dropzone__icon { width: 40px; height: 40px; color: var(--halo); }
.dropzone__title { font-weight: 700; font-size: var(--t-md); }
.dropzone__hint { font-size: var(--t-xs); color: var(--paper-mute); }

.thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ink-line);
}

.thumb img { width: 100%; height: 100%; object-fit: cover; }

.thumb__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 16, 31, .9);
  color: var(--paper);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Slots de comparação (Antes × Depois, Batalha) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.duo__slot {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 2px dashed var(--ink-line);
  border-radius: var(--radius-lg);
  background: var(--ink-raised) center / cover no-repeat;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s ease;
  overflow: hidden;
}

.duo__slot:hover { border-color: var(--halo); }
.duo__slot.is-filled { border-style: solid; border-color: var(--beam); }

.duo__tag {
  position: absolute;
  bottom: var(--s-3);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  background: rgba(20, 16, 31, .85);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =============================================================================
   FOTÔMETRO — ELEMENTO-ASSINATURA
   =============================================================================
   Arco circular de raio 88. A circunferência é 2π×88 ≈ 553, e é esse valor
   que app.js usa para calcular o preenchimento via stroke-dashoffset.
   O arco começa no topo por causa do rotate(-90deg).
   ============================================================================= */

.meter {
  position: relative;
  width: min(78vw, 300px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.meter__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.meter__track {
  fill: none;
  stroke: var(--ink-line);
  stroke-width: 10;
}

.meter__arc {
  fill: none;
  stroke: url(#arc-gradient);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 553;
  stroke-dashoffset: 553;
  transition: stroke-dashoffset 1.6s cubic-bezier(.16, .84, .32, 1);
}

/* Varredura contínua da tela de processamento */
.meter__sweep {
  fill: none;
  stroke: var(--halo);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 90 463;
  animation: sweep 1.5s linear infinite;
}

@keyframes sweep {
  to { stroke-dashoffset: -553; }
}

.meter--pulse .meter__svg { animation: breathe 2.4s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

.meter__center {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/**
 * O número é o produto inteiro condensado em um elemento.
 *
 * O gradiente é maior que o texto e a posição é animada, de forma que a luz
 * "atravessa" o número enquanto o contador sobe. É a metáfora da exposição
 * fotográfica — e é o único momento da interface em que algo chama atenção
 * para si.
 */
.score {
  font-family: var(--font-num);
  font-size: clamp(4.5rem, 22vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-light);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: expose 1.8s cubic-bezier(.16, .84, .32, 1) forwards;
}

@keyframes expose {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

.score__total {
  font-family: var(--font-num);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--paper-mute);
}

.tier {
  font-size: var(--t-lg);
  font-weight: 750;
  letter-spacing: -.02em;
}

/* =============================================================================
   PROCESSAMENTO
   ============================================================================= */

.steps { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; }

.steps__item {
  font-size: var(--t-sm);
  color: var(--paper-mute);
  opacity: .35;
  transition: opacity .4s ease, color .4s ease;
}

.steps__item.is-active { opacity: 1; color: var(--paper); font-weight: 650; }
.steps__item.is-done { opacity: .6; color: var(--paper-dim); }

/* =============================================================================
   RESULTADO
   ============================================================================= */

.result-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
}

.result-head__score { display: flex; align-items: baseline; gap: 2px; }

.result-head__num {
  font-family: var(--font-num);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.result-head__den { font-size: var(--t-sm); color: var(--paper-mute); font-weight: 700; }
.result-head__meta { flex: 1; min-width: 0; }
.result-head__tier { font-weight: 750; font-size: var(--t-md); letter-spacing: -.01em; }

.split { display: grid; gap: var(--s-3); }

.card {
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-left-width: 3px;
}

.card--win { border-left-color: var(--flare); }
.card--gap { border-left-color: var(--halo); }

.card__kicker {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: var(--s-2);
}

.card__title { font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; margin-bottom: var(--s-2); }
.card__body { font-size: var(--t-sm); color: var(--paper-dim); line-height: 1.6; }

.block { display: flex; flex-direction: column; gap: var(--s-3); }

.block__title {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

/* -----------------------------------------------------------------------------
   NÍVEIS — as seis dimensões
   -----------------------------------------------------------------------------
   Barras horizontais em vez de gráfico de radar. O radar é bonito e ilegível
   em 390px de largura: é impossível ler seis rótulos girados numa tela de
   celular. A barra responde à pergunta que a pessoa realmente tem —
   "onde estou perdendo pontos?" — em uma varrida vertical.
   -------------------------------------------------------------------------- */

.levels { display: flex; flex-direction: column; gap: var(--s-4); }
.level { display: flex; flex-direction: column; gap: var(--s-2); }
.level__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.level__name { font-size: var(--t-sm); font-weight: 600; }

.level__value {
  font-family: var(--font-num);
  font-size: var(--t-md);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.level__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-line);
  overflow: hidden;
}

.level__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-light);
  transition: width 1.1s cubic-bezier(.16, .84, .32, 1);
}

/* A dimensão mais fraca é marcada: é o gap de curiosidade que move o funil */
.level.is-weakest .level__name { color: var(--halo); }
.level.is-weakest .level__value { color: var(--halo); }

.recs { display: flex; flex-direction: column; gap: var(--s-3); counter-reset: rec; }

.rec {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--paper-dim);
  line-height: 1.6;
}

.rec::before {
  counter-increment: rec;
  content: counter(rec);
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink-line);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: 750;
  display: grid;
  place-items: center;
}

.rec:first-child::before { background: var(--gradient-light); color: #16101F; }

.bullets { display: flex; flex-direction: column; gap: var(--s-2); }

.bullets li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--t-sm);
  color: var(--paper-dim);
  line-height: 1.6;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--halo);
}

.locked {
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--ink-line);
  background: var(--gradient-veil);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.locked__count { font-size: var(--t-sm); color: var(--paper-dim); font-weight: 600; }

.copybox {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
}

.copybox__text {
  flex: 1;
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--paper);
  word-break: break-word;
  line-height: 1.5;
}

.actions { display: flex; flex-direction: column; gap: var(--s-3); }

/* =============================================================================
   COMPARTILHAMENTO
   ============================================================================= */

.formats { display: flex; gap: var(--s-3); justify-content: center; }

.format {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-raised);
  color: var(--paper-dim);
  font-size: var(--t-xs);
  font-weight: 650;
  cursor: pointer;
  transition: all .16s ease;
}

.format.is-selected { border-color: var(--halo); color: var(--paper); }
.format__shape { border: 2px solid currentColor; border-radius: 4px; }
.format__shape--story { width: 20px; height: 34px; }
.format__shape--square { width: 30px; height: 30px; }

.preview { display: grid; place-items: center; }

.preview canvas {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-line);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}

.challenge {
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.challenge__title { font-weight: 750; font-size: var(--t-md); }
.challenge__body { font-size: var(--t-sm); color: var(--paper-dim); }

/* =============================================================================
   PLANOS E PAGAMENTO
   ============================================================================= */

.plans { display: flex; flex-direction: column; gap: var(--s-3); }

.plan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease;
}

.plan.is-selected { border-color: var(--halo); background: #241C3A; }
.plan__name { font-weight: 700; font-size: var(--t-md); }
.plan__note { font-size: var(--t-xs); color: var(--paper-mute); margin-top: 2px; }

.plan__price {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.plan__badge {
  position: absolute;
  top: -10px;
  left: var(--s-5);
  padding: 3px var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--gradient-light);
  color: #16101F;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.includes { display: flex; flex-direction: column; gap: var(--s-2); }

.includes li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-sm);
  color: var(--paper-dim);
}

.includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--flare);
  font-weight: 800;
}

.amount {
  font-family: var(--font-num);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  background: var(--gradient-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* O QR precisa de fundo branco: leitores de Pix falham sobre fundo escuro */
.qr {
  padding: var(--s-4);
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
}

.qr img { width: 220px; height: 220px; }

.pixcode {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--paper-dim);
  word-break: break-all;
  line-height: 1.5;
  padding: var(--s-3);
  background: var(--ink);
  border-radius: var(--radius);
  max-height: 160px;
  overflow-y: auto;
}

.waiting {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--paper-dim);
}

.waiting__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--flare);
  animation: blink 1.4s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1; transform: scale(1); }
}

.waiting.is-paid { color: var(--flare); font-weight: 700; }
.waiting.is-paid .waiting__dot { animation: none; opacity: 1; }

.seal {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gradient-light);
  color: #16101F;
  font-size: 2.5rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* =============================================================================
   COMPARAÇÃO
   ============================================================================= */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
}

.versus__side { text-align: center; }

.versus__tag {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: var(--s-1);
}

.versus__score {
  font-family: var(--font-num);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.versus__side.is-winner .versus__score {
  background: var(--gradient-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.versus__side.is-winner .versus__tag { color: var(--flare); }

.versus__delta {
  font-family: var(--font-num);
  font-size: var(--t-md);
  font-weight: 750;
  color: var(--paper-mute);
}

.versus__delta.is-positive { color: var(--flare); }
.versus__delta.is-negative { color: var(--halo); }

/* =============================================================================
   CONTA E HISTÓRICO
   ============================================================================= */

.status {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  font-size: var(--t-sm);
  color: var(--paper-dim);
}

.status strong { color: var(--paper); }

.renew {
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 180, 84, .35);
  background: rgba(255, 180, 84, .08);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.renew__text { font-size: var(--t-sm); color: var(--paper); }

.tools { display: grid; gap: var(--s-3); }

.tool {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease;
}

.tool:hover { border-color: var(--halo); }
.tool__title { font-weight: 700; font-size: var(--t-md); }
.tool__body { font-size: var(--t-xs); color: var(--paper-mute); }

.history { display: flex; flex-direction: column; gap: var(--s-2); }

.history__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-raised);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .16s ease;
}

.history__item:hover { border-color: var(--paper-mute); }

.history__score {
  font-family: var(--font-num);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
}

.history__meta { flex: 1; font-size: var(--t-xs); color: var(--paper-mute); }

/* =============================================================================
   PROVAS, FATOS E DIVULGAÇÃO
   ============================================================================= */

.proof {
  display: flex;
  gap: var(--s-5);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

.proof__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--t-micro);
  color: var(--paper-mute);
  letter-spacing: .04em;
  max-width: 9ch;
  text-align: center;
  line-height: 1.35;
}

.proof__num {
  font-family: var(--font-num);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--paper);
  margin-bottom: 2px;
}

.facts { display: flex; flex-direction: column; gap: var(--s-3); }

.facts__item {
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  font-size: var(--t-sm);
  color: var(--paper-dim);
  line-height: 1.55;
}

.facts__item strong { color: var(--paper); display: block; margin-bottom: 2px; }

.disclosure { border-top: 1px solid var(--ink-line); padding-top: var(--s-3); }

.disclosure__summary {
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--paper-dim);
  cursor: pointer;
  padding: var(--s-2) 0;
  list-style: none;
}

.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::before { content: "+ "; color: var(--halo); font-weight: 800; }
.disclosure[open] .disclosure__summary::before { content: "− "; }
.disclosure__body { padding-top: var(--s-3); }

/* =============================================================================
   TEXTO LEGAL
   ============================================================================= */

.legal { display: flex; flex-direction: column; gap: var(--s-4); }

.legal h3 {
  font-size: var(--t-md);
  font-weight: 750;
  letter-spacing: -.01em;
  margin-top: var(--s-2);
}

.legal p { font-size: var(--t-sm); color: var(--paper-dim); line-height: 1.65; }

/* =============================================================================
   RODAPÉ, TOAST E CONFIRMAÇÃO
   ============================================================================= */

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-5) calc(var(--s-6) + var(--safe-bottom));
  border-top: 1px solid var(--ink-line);
  margin-top: var(--s-6);
}

.foot__link {
  background: none;
  border: 0;
  padding: var(--s-2);
  font-size: var(--t-xs);
  color: var(--paper-mute);
  cursor: pointer;
}

.foot__link:hover { color: var(--paper-dim); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-6) + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 50;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 650;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .8);
  animation: rise .3s cubic-bezier(.2, .9, .3, 1) both;
  max-width: calc(100vw - 2 * var(--s-5));
  text-align: center;
}

@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: rgba(10, 8, 16, .78);
  backdrop-filter: blur(6px);
}

.overlay__box {
  width: 100%;
  max-width: 380px;
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.overlay__title { font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; }
.overlay__body { font-size: var(--t-sm); color: var(--paper-dim); line-height: 1.6; }
.overlay__actions { display: flex; gap: var(--s-3); }
.overlay__actions .btn { flex: 1; }

/* =============================================================================
   RESPONSIVO
   =============================================================================
   Projetado em 390×844 e ampliado a partir daí. As mudanças no desktop são
   poucas de propósito: um layout que funciona bem com uma mão não precisa
   ser reinventado em tela grande, só respirar mais.
   ============================================================================= */

@media (min-width: 620px) {
  .app { padding-inline: var(--s-6); }
  .split { grid-template-columns: 1fr 1fr; }
  .tools { grid-template-columns: 1fr 1fr; }
  .actions { flex-direction: row; }
  .actions .btn { flex: 1; }
  .btn--xl { width: auto; }
  .stack--center .btn--xl { min-width: 300px; }
  .preview canvas { max-width: 320px; }
}

/* =============================================================================
   ACESSIBILIDADE
   ============================================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}

.skip-link:focus { left: var(--s-5); }

/**
 * Foco visível em tudo que recebe teclado.
 *
 * :focus-visible mostra o anel apenas na navegação por teclado, sem o halo
 * indesejado ao tocar com o dedo. É o comportamento que torna o produto
 * navegável sem mouse sem prejudicar quem usa o celular.
 */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius);
}

[hidden] { display: none !important; }

.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;
}

/**
 * Movimento reduzido.
 *
 * O contador e o arco são animações grandes e centrais. Para quem tem
 * sensibilidade vestibular, isso vai de desconfortável a incapacitante, e
 * a pessoa não deveria ter que escolher entre usar o produto e passar mal.
 * A informação continua toda lá: o número aparece direto, no valor final.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .screen.is-active { animation: none; }
  .meter__arc { transition: none; }
  .score { animation: none; background-position: 0 0; }
}

/* Contraste alto: reforça bordas para quem depende delas */
@media (prefers-contrast: more) {
  :root {
    --ink-line: #4A3F6E;
    --paper-dim: #D6CFF0;
    --paper-mute: #A79EC4;
  }
}