/* ===================================================================
   Arkza — Liquid Glass Dark. Camada sobre form.css.
   Regras que definem o resultado:
   1. Vidro e SUGERIDO por gradiente + borda + sombra. backdrop-filter
      so em chrome fixo e modal — blur no que rola derruba o desempenho.
   2. Vermelho e exclusivo de estado critico. A marca e ciano.
   3. Violeta e segunda voz: traco, fio de sombra, fim de gradiente.
   =================================================================== */

/* ---------- Fundo cenico: tres auroras fixas ---------- */
.fa-scene{background:var(--fundo)}
.fa-scene__fallback{
  background:
    radial-gradient(48rem 48rem at 8% -6%,   rgba(34,194,214,.09), transparent 70%),
    radial-gradient(44rem 44rem at 104% -2%, rgba(169,140,255,.06), transparent 70%),
    radial-gradient(46rem 46rem at 96% 112%, rgba(34,194,214,.05), transparent 70%),
    var(--fundo);
  filter:saturate(1.18);
}
#faCanvas.is-on{opacity:.42}   /* a cena 3D vira textura, nao protagonista */

/* ---------- Chrome fixo: unico lugar com vidro real ---------- */
.fa-bar{
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  background:radial-gradient(120% 42% at 50% -12%, rgba(34,194,214,.12), transparent), rgba(16,21,28,.60);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.fa-brand__txt{
  font-family:var(--font-body);font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--txt-1);
}

/* ---------- Progresso ---------- */
.fa-progress__track{height:4px;background:rgba(255,255,255,.08)}
.fa-progress__fill{background:linear-gradient(90deg, var(--ciano-fundo), var(--ciano))}
.fa-progress__fill::after{
  width:8px;height:8px;background:var(--ciano-luz);
  box-shadow:0 0 0 0 rgba(34,194,214,.55);animation:faPulse 1.8s ease-out infinite;
}
@keyframes faPulse{0%{box-shadow:0 0 0 0 rgba(34,194,214,.5)}100%{box-shadow:0 0 0 10px rgba(34,194,214,0)}}
.fa-progress__num{font-family:var(--font-body);font-weight:800;font-size:.9rem;letter-spacing:-.02em;
  color:var(--txt-1);font-variant-numeric:tabular-nums}
.fa-progress__lbl{font-size:10px;letter-spacing:.22em;color:#7f8ea3}

/* ---------- Tipografia ---------- */
.fa-welcome__title{
  font-family:var(--font-body);font-weight:800;letter-spacing:-.03em;text-transform:none;
  line-height:1.06;font-size:clamp(2rem,5.2vw,3.1rem);color:var(--txt-1);
}
.fa-q__title{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.15rem,2.8vw,1.6rem);color:var(--txt-1)}
.fa-welcome__p,.fa-q__desc{color:var(--txt-2);font-size:.95rem}
.fa-tagline{
  font-family:var(--font-body);font-style:normal;font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1rem,2.2vw,1.25rem);color:var(--ciano-luz);
}
.fa-legal,.fa-hint,.fa-cta__hint{color:var(--txt-3);font-size:.78rem}
.fa-legal a{color:var(--ciano-luz);border-bottom-color:rgba(84,224,238,.35)}
.fa-q__count{color:var(--txt-3)}

/* Kicker com traco-gradiente: todo rotulo de grupo e precedido de 14x1,5px */
.fa-eyebrow,.fa-q__count{
  display:flex;align-items:center;gap:9px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#7f8ea3;font-weight:600;
}
.fa-eyebrow::before,.fa-q__count::before{
  content:"";flex:0 0 auto;width:14px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg, var(--ciano), var(--violeta));
}

/* ---------- Opcoes: cartao com luz de cima ---------- */
.fa-opt{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.15) 50%, transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%),
    linear-gradient(180deg, #1a222d 0%, #121922 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 3px rgba(0,0,0,.40),
    0 16px 40px -18px rgba(0,0,0,.60);
  transition:transform var(--suave), border-color var(--suave), box-shadow var(--suave);
}
.fa-opt:hover{
  transform:translateY(-2px);
  border-color:rgba(34,194,214,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 3px rgba(0,0,0,.40),
    0 16px 40px -18px rgba(0,0,0,.60),
    0 10px 30px -16px rgba(169,140,255,.55);   /* fio de violeta */
}
.fa-opt:has(input:checked),.fa-opt.is-on{
  border-color:rgba(34,194,214,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 3px rgba(34,194,214,.16);
}
.fa-opt__label{color:var(--txt-1)}
.fa-opt__mark{border-color:rgba(255,255,255,.22)}
.fa-opt:has(input:checked) .fa-opt__mark{
  background:linear-gradient(135deg, var(--ciano), var(--ciano-fundo));
  border-color:transparent;color:var(--sobre-ciano);
}

/* ---------- Campo: poco de vidro (afundado, nao elevado) ---------- */
.fa-input{
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  color:var(--txt-1);
  transition:border-color var(--suave), box-shadow var(--suave);
}
.fa-input::placeholder{color:var(--txt-3)}
.fa-input:focus{
  outline:none;
  border-color:rgba(34,194,214,.50);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.2), 0 0 0 3px rgba(34,194,214,.20);
}
.fa-field__err{color:var(--critico)}

/* ---------- Botoes ---------- */
.btn{border-radius:var(--radius-pill);font-weight:600;letter-spacing:-.005em;
  transition:transform var(--suave), box-shadow var(--suave), border-color var(--suave), background var(--suave)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid rgba(34,194,214,.55);outline-offset:2px}
.btn--primary{
  background:linear-gradient(135deg, var(--ciano), var(--ciano-fundo));
  color:var(--sobre-ciano);border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 10px 28px -10px rgba(34,194,214,.80);
}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);color:var(--txt-2)}
.btn--ghost:hover{border-color:rgba(34,194,214,.45);color:var(--txt-1);background:rgba(255,255,255,.07)}
.fa-back{color:var(--txt-3)}
.fa-back:hover{color:var(--ciano-luz)}

/* ---------- Prova social e encerramento ---------- */
.fa-proof__ph,.fa-proof__stats > *{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.15) 50%, transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 52%),
    linear-gradient(180deg, #1a222d 0%, #121922 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 3px rgba(0,0,0,.40);
}
/* O <b> aqui e enfase DENTRO da frase, nao numero de KPI. Aumentar o corpo
   quebra o ritmo da linha — a enfase vem de peso e cor, no mesmo tamanho. */
.fa-proof__stats b,.fa-proof__stats strong{
  font-weight:700;font-size:inherit;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--ciano-luz);
}
.fa-proof__stats li{color:var(--txt-2);line-height:1.55}
.fa-ending{border-radius:20px}
.fa-ending__badge{
  background:linear-gradient(135deg, var(--ciano) 0%, var(--ciano-fundo) 62%, #4b3f8f 130%);
  color:var(--sobre-ciano);
  box-shadow:0 6px 18px -6px rgba(34,194,214,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.fa-ending__title{font-weight:800;letter-spacing:-.03em;color:var(--txt-1)}
.fa-ending__p{color:var(--txt-2)}
.fa-ending--dq .fa-ending__badge{
  background:linear-gradient(135deg, #2b3644, #1a222d);color:var(--txt-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* números sempre tabulares */
.fa-progress__num,.fa-proof__stats{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .fa-opt,.btn{transition:none}
  .fa-progress__fill::after{animation:none}
}

/* ===================================================================
   Conversao e navegabilidade no celular
   =================================================================== */

/* Alvo de toque generoso: cartao de opcao com altura confortavel */
.fa-opt{min-height:60px;padding:16px 18px;gap:14px}
.fa-opt__label{font-size:15px;line-height:1.4}
.fa-opt__mark{width:22px;height:22px;flex:0 0 auto}
.fa-opts{gap:12px}

/* Campo com altura de toque e corpo que nao aciona zoom no iOS (>=16px) */
.fa-input{min-height:56px;font-size:16px;padding:15px 16px}

@media (max-width: 760px){
  /* Menos espaco morto no topo: a pergunta precisa aparecer sem rolar */
  .fa-screen{padding:76px var(--pad) 132px;align-items:flex-start}
  .fa-screen__inner{margin-top:0}
  .fa-welcome__title{font-size:clamp(1.8rem,7.4vw,2.4rem)}
  .fa-q__title{font-size:clamp(1.1rem,4.6vw,1.35rem)}

  /* Acao fixa no rodape: o polegar alcanca sem esticar.
     Vidro real aqui e permitido — e chrome fixo, nao rola. */
  .fa-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    display:flex;align-items:center;gap:12px;
    padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    margin:0;
    backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    background:radial-gradient(120% 60% at 50% -20%, rgba(34,194,214,.10), transparent), rgba(16,21,28,.82);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .fa-actions .btn--primary{flex:1;min-height:54px;font-size:15px}
  .fa-back{order:-1;flex:0 0 auto;padding:12px 6px;min-height:48px;display:inline-flex;align-items:center}

  /* A barra de marca encolhe para devolver altura ao conteudo */
  .fa-bar{padding:10px var(--pad)}
  .fa-brand img{height:22px}
  .fa-progress{width:min(200px,46vw)}

  /* Prova social: grade de duas colunas mantida, imagens menores */
  .fa-proof__grid{gap:10px}
}

/* Telas curtas (celular pequeno / teclado aberto) */
@media (max-width: 760px) and (max-height: 680px){
  .fa-screen{padding-top:64px}
  .fa-welcome__p{font-size:.9rem}
}

/* Marca de selecao imediata: o cartao responde antes da tela trocar */
.fa-opt.is-selected{
  border-color:rgba(34,194,214,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 3px rgba(34,194,214,.18);
  transform:translateY(-1px);
}
.fa-opt.is-selected .fa-opt__mark{
  background:linear-gradient(135deg, var(--ciano), var(--ciano-fundo));
  border-color:transparent;
}

/* ---------- Entregas: lista em pilulas, com uma em destaque ---------- */
.fa-entregas{margin:1.4rem 0 1.2rem}
.fa-entregas__t{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#7f8ea3;font-weight:600;
}
.fa-entregas__t::before{
  content:"";flex:0 0 auto;width:14px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg, var(--ciano), var(--violeta));
}
.fa-entregas__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fa-entrega{
  padding:9px 14px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:500;color:var(--txt-2);
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg, rgba(255,255,255,.055), transparent 60%), rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* O destaque vem do gradiente da marca, nao de um tamanho maior:
   aumentar o corpo de uma pilula na fila quebra o alinhamento das outras. */
.fa-entrega--destaque{
  order:-1;font-weight:700;color:var(--sobre-ciano);
  border-color:transparent;
  background:linear-gradient(135deg, var(--ciano) 0%, var(--ciano-fundo) 62%, #4b3f8f 130%);
  box-shadow:0 6px 18px -6px rgba(34,194,214,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
@media(max-width:760px){
  .fa-entregas{margin:1.2rem 0 1rem}
  .fa-entrega{padding:8px 12px;font-size:12.5px}
}

/* Titulo em linhas: a pergunta ganha respiro e peso proprio */
.fa-q__linha{display:block}
.fa-q__linha + .fa-q__linha{margin-top:.55em}

/* ===================================================================
   Ritmo tipografico
   Os espacamentos herdados eram valores avulsos (19.2 / 14.4 / 16 / 6.4 / 25.6px)
   que nao formavam escala. Aqui vale um passo unico, e a medida de linha e
   limitada em ch para o olho nao perder a linha na volta.
   =================================================================== */
:root{
  --r1:8px; --r2:12px; --r3:20px; --r4:28px; --r5:40px;
  --medida:58ch;          /* corpo */
  --medida-curta:44ch;    /* apoio, legal, hint */
}

/* Titulos: sem palavra orfa na ultima linha */
.fa-welcome__title,.fa-q__title,.fa-ending__title{
  text-wrap:balance;max-width:20ch;
}
.fa-q__title{max-width:26ch}
@media(min-width:761px){
  .fa-welcome__title{max-width:16ch}
  .fa-q__title{max-width:24ch}
}

/* Paragrafos: medida controlada e sem orfa */
.fa-welcome__p,.fa-q__desc,.fa-ending__p,.fa-proof__closing{
  max-width:var(--medida);text-wrap:pretty;
}
.fa-legal,.fa-hint{max-width:var(--medida-curta);text-wrap:pretty}

/* Escala vertical unica */
.fa-eyebrow,.fa-q__count{margin:0 0 var(--r2)}
.fa-welcome__title{margin:0 0 var(--r3)}
.fa-q__title{margin:0 0 var(--r2)}
.fa-q__desc{margin:0 0 var(--r3)}
.fa-welcome__p{margin:0 0 var(--r2)}
.fa-welcome__p:last-of-type{margin-bottom:var(--r4)}
.fa-entregas{margin:0 0 var(--r4)}
.fa-tagline{margin:0 0 var(--r4)}
.fa-q__body,.fa-opts{margin-top:var(--r3)}
.fa-legal{margin-top:var(--r3)}
.fa-proof__closing{margin-top:var(--r3)}
.fa-ending__title{margin:0 0 var(--r2)}
.fa-ending__p{margin:0 0 var(--r4)}

/* Desktop respira mais */
@media(min-width:761px){
  .fa-actions{margin-top:var(--r5)}
  .fa-welcome__p:last-of-type{margin-bottom:var(--r5)}
  .fa-entregas,.fa-tagline{margin-bottom:var(--r5)}
}

/* Centraliza quando cabe, encosta no topo e rola quando nao cabe.
   Margem automatica absorve a folga: e o que evita o vazio embaixo nas
   telas curtas (ex.: a pergunta que so tem um campo de texto). */
.fa-screen__inner{margin-block:auto}
@media(max-width:760px){
  .fa-screen{padding:76px var(--pad) 132px;align-items:flex-start}
  .fa-screen__inner{margin-block:auto}
}

/* Entrelinha por funcao: titulo compacto, corpo confortavel */
.fa-welcome__title{line-height:1.04}
.fa-q__title{line-height:1.22}
.fa-welcome__p,.fa-q__desc,.fa-ending__p{line-height:1.62}
.fa-legal{line-height:1.55}
.fa-opt__label{line-height:1.35}

/* A tagline e uma frase de marca, nao um paragrafo: nao herda a medida do corpo */
.fa-tagline{max-width:none}

/* ===================================================================
   Tela final — mesmo padrao das demais
   Estava fora: titulo em caixa-alta gigante com emoji, selo com emoji dentro
   de um circulo de gradiente, botao sublinhado. Nenhum desses aparece no resto.
   =================================================================== */
.fa-ending__title{
  text-transform:none;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.7rem,5.6vw,2.4rem);max-width:16ch;
}
/* Selo: quadrado arredondado no gradiente da marca, como o icone de pagina do DS.
   Sem emoji dentro — o simbolo e desenhado pela propria tipografia. */
.fa-ending__badge{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:20px;line-height:1;margin:0 0 var(--r3);
  background:linear-gradient(135deg, var(--ciano) 0%, var(--ciano-fundo) 62%, #4b3f8f 130%);
  color:var(--sobre-ciano);
  box-shadow:0 6px 18px -6px rgba(34,194,214,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.fa-ending--dq .fa-ending__badge{
  background:linear-gradient(180deg,#232c38,#18202a);color:var(--txt-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* A frase acionavel: e o que a pessoa precisa levar da tela */
.fa-ending__destaque{
  margin:0 0 var(--r3);padding:16px 18px;border-radius:var(--radius);
  font-size:15.5px;font-weight:700;line-height:1.45;color:var(--txt-1);
  max-width:var(--medida);
  border:1px solid rgba(34,194,214,.35);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.15) 50%, transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(34,194,214,.12), rgba(34,194,214,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* O botao volta ao padrao: pilula fantasma, sem sublinhado nem caixa-alta */
.fa-ending__actions{margin-top:var(--r4)}
.fa-ending__actions .btn{text-transform:none;text-decoration:none;letter-spacing:-.005em}

/* Sem caixa vazia embaixo: a tela final tambem se centraliza quando cabe */
.fa-ending .fa-screen__inner{margin-block:auto}
@media(max-width:760px){ .fa-ending{padding-bottom:var(--r5)} }

/* ---------- Prova de live shop ----------
   Os prints são quase quadrados e o contador de espectadores fica no canto
   superior direito. No recorte 4:5 das outras fotos ele seria cortado, então
   aqui a imagem é 1:1 e ancorada no topo, com a legenda fora da imagem. */
.fa-proof__ph--live{aspect-ratio:auto;display:flex;flex-direction:column}
.fa-proof__ph--live img{aspect-ratio:1/1;height:auto;object-fit:cover;object-position:top center}
.fa-proof__legenda{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:9px 11px 11px}
.fa-proof__perfil{flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.72rem;font-weight:600;color:var(--txt-2)}
.fa-proof__num{font-size:1.15rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:var(--ciano-luz);font-variant-numeric:tabular-nums}
.fa-proof__aovivo{font-size:.7rem;color:var(--txt-3)}
/* o traço do sobretítulo vira sinal de transmissão */
.fa-proof--live .fa-eyebrow::before{background:linear-gradient(90deg,#ff5e6a,var(--violeta))}
/* no celular a tela precisa caber: aperta respiro, não tamanho de letra */
@media (max-width:560px){
  .fa-proof--live .fa-proof__stats{gap:6px}
  .fa-proof__legenda{padding:7px 9px 9px}
  .fa-proof__num{font-size:1.02rem}
}

/* ---------- Faixa de números da tela inicial ----------
   Substituiu o parágrafo de autoridade: três números se leem de relance,
   um parágrafo de duas linhas ninguém lê num anúncio. */
.fa-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:1.3rem 0 1.1rem;
  border-radius:var(--radius-sm);overflow:hidden;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.08)}
.fa-numero{background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 60%), #121922;
  padding:.8rem .7rem .75rem;text-align:center}
.fa-numero__v{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(1.15rem,4.6vw,1.55rem);color:var(--ciano-luz);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.fa-numero__r{margin:.3rem 0 0;font-size:.68rem;line-height:1.3;color:var(--txt-2);letter-spacing:0}
/* um brilho que atravessa a faixa uma vez, quando a página abre */
.fa-numeros{position:relative}
.fa-numeros::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(84,224,238,.16) 50%, transparent 70%);
  transform:translateX(-100%);animation:faVarre 1.6s .5s cubic-bezier(.4,0,.2,1) 1 forwards}
@keyframes faVarre{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.fa-numeros::after{display:none}}
@media (max-width:380px){.fa-numero{padding:.7rem .4rem}.fa-numero__r{font-size:.62rem}}

/* tela inicial mais curta no celular: menos respiro, mesmas letras */
@media (max-width:560px){
  .fa-welcome .fa-entregas{margin:.9rem 0 .9rem}
  .fa-welcome .fa-entregas__lista{gap:6px}
}

/* ===================================================================
   Revisão de UX mobile
   =================================================================== */

/* 1. A dica "↵" ensina a tecla Enter. No celular não existe Enter no fluxo e
   ela aparecia como um quadrado escuro vazio dentro do botão. */
@media (hover:none), (pointer:coarse){ .fa-cta__hint{display:none} }

/* 2. Título em duas partes (contexto + pergunta): antes as duas vinham no mesmo
   peso e viravam um bloco de sete linhas em negrito. O contexto recua, a
   pergunta fica sendo o que se lê primeiro. */
.fa-q__title .fa-q__linha:not(:last-child){
  font-weight:500;font-size:.8em;line-height:1.45;letter-spacing:-.01em;color:var(--txt-2)}
.fa-q__title .fa-q__linha:last-child{color:var(--txt-1)}

@media (max-width:560px){
  /* 3. Dois contadores na mesma tela ("Sinal 2/10" no topo e "Pergunta 1 de 8")
     com números diferentes confundem. No celular fica só a barra no topo. */
  .fa-progress__num{display:none}

  /* 4. Rótulos pequenos demais para o celular */
  .fa-numero__r{font-size:.72rem}
  .fa-eyebrow,.fa-q__count,.fa-entregas__t{font-size:11px}
}

/* Marcador das listas de resultado: era o emoji de alfinete de mapa, que
   sugere localização. Resultado pede sinal de confirmação, na cor da marca. */
.fa-proof__stats li::before{
  content:"✓";display:grid;place-items:center;width:18px;height:18px;top:3px;
  border-radius:50%;font-size:11px;font-weight:800;line-height:1;
  color:var(--sobre-ciano);background:var(--ciano-luz)}

/* Botão da tela final para o lead chamar a especialista */
.fa-ending__wa{gap:10px}
.fa-wa__ico{display:inline-grid;place-items:center;line-height:0}
/* no celular o botão da especialista ocupa a largura toda: é a ação principal da tela */
@media (max-width:560px){
  .fa-ending__actions{display:grid;gap:10px}
  .fa-ending__wa,.fa-ending__actions .btn{width:100%}
}

/* ---------- Tela de resultado de live shop (22/09) ----------
   Totais em contagem, recorte do período e um cartão por loja com o print do painel. */
.fa-res__totais{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:var(--r2) 0 10px;padding:14px 12px;
  border-radius:var(--radius);border:1px solid rgba(155,135,255,.35);
  background:linear-gradient(160deg,rgba(107,77,240,.20),rgba(255,255,255,.03))}
.fa-res__total b{display:block;font-size:clamp(1.2rem,4.6vw,1.7rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  color:var(--txt-1);font-variant-numeric:tabular-nums;white-space:nowrap}
.fa-res__total span{display:block;margin-top:3px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);line-height:1.3}
.fa-res__periodo{font-size:.82rem;color:var(--txt-2);padding:9px 12px;border-radius:12px;border:1px solid rgba(34,194,214,.28);
  background:rgba(34,194,214,.06);margin-bottom:var(--r2);max-width:none}
.fa-res__lojas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fa-res__loja{margin:0;padding:10px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,#1a222d 0%,#121922 100%)}
.fa-res__rot{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano-luz);margin-bottom:7px}
.fa-res__loja img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
.fa-res__ticket{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:8px}
.fa-res__ticket span{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.fa-res__ticket b{font-size:.95rem;font-weight:800;letter-spacing:-.02em;color:var(--txt-1);white-space:nowrap}
.fa-proof--resultado .fa-eyebrow::before{background:linear-gradient(90deg,var(--ciano),var(--violeta))}
@media(max-width:560px){
  .fa-res__totais{padding:12px 10px;gap:6px}
  .fa-res__total span{font-size:.6rem}
  .fa-res__lojas{gap:8px}
  .fa-res__loja{padding:8px}
  .fa-res__ticket{flex-direction:column;gap:0}
}

/* ---------- UX mobile (22/09): nenhum texto abaixo de 12px, link legal tocável ---------- */
@media(max-width:560px){
  .fa-eyebrow,.fa-q__count,.fa-entregas__t{font-size:12px}
  .fa-numero__r{font-size:.75rem}
  .fa-entrega{font-size:13px}
  .fa-legal{font-size:13px}
  .fa-legal a{display:inline-block;padding:9px 0;margin:-9px 0}
  .fa-res__total span,.fa-res__rot,.fa-res__ticket span{font-size:11.5px;letter-spacing:.05em}
}

/* ---------- UX mobile (22/09): telas de prova cabem acima do botão ----------
   A grade 2x2 de fotos ocupava ~450px e empurrava o texto para trás do botão fixo.
   No celular vira uma faixa que arrasta para o lado; a 3ª foto aparece cortada
   na borda para mostrar que há mais. */
@media(max-width:560px){
  .fa-proof .fa-proof__grid{display:flex;grid-template-columns:none;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;padding-bottom:4px;scrollbar-width:none}
  .fa-proof .fa-proof__grid::-webkit-scrollbar{display:none}
  /* a foto cresce com a altura da tela: em aparelho alto ela ocupa bem mais */
  .fa-proof .fa-proof__grid > .fa-proof__ph{flex:0 0 62%;max-width:280px;scroll-snap-align:start}
  .fa-proof__perfil,.fa-proof__aovivo{font-size:12px}
}
@media(max-width:560px){
  .fa-consent input[type="checkbox"]{width:24px;height:24px;flex:0 0 auto}
  .fa-consent a{display:inline-block;padding:7px 0;margin:-7px 0}
  .fa-res__total span,.fa-res__rot,.fa-res__ticket span{font-size:12px}
}

/* Telas baixas (iPhone SE e afins): a foto diminui para o texto e o botão caberem */
@media(max-width:560px) and (max-height:730px){
  .fa-proof .fa-proof__grid > .fa-proof__ph{flex:0 0 46%}
}

/* ---------- Fita de marcas na tela de prova social (22/09) ----------
   Mesma ideia da home: a lista sai duas vezes e a volta parece contínua.
   Com movimento reduzido, a fita para e a pessoa arrasta se quiser. */
.fa-marcas{margin-top:var(--r3)}
.fa-marcas__t{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:10px}
.fa-marcas__janela{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fa-marcas__fita{display:flex;gap:10px;width:max-content;animation:faEsteira 42s linear infinite}
.fa-marcas__janela:hover .fa-marcas__fita{animation-play-state:paused}
.fa-marca{flex:0 0 auto;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.11);background:#111823}
.fa-marca img{width:100%;height:100%;object-fit:contain;display:block;opacity:.92}
@keyframes faEsteira{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .fa-marcas__fita{animation:none}
  .fa-marcas__janela{overflow-x:auto;scrollbar-width:none}
}
@media(min-width:761px){.fa-marca{width:64px;height:64px}}
@media(max-width:560px){
  .fa-marcas{margin-top:var(--r2)}
  .fa-marcas__t{margin-bottom:8px}
  .fa-marca{width:52px;height:52px}
}
/* Telas estreitas (até 400px): a foto cede espaço para o texto de fecho não ficar atrás do botão */
@media(max-width:400px){
  .fa-proof .fa-proof__grid > .fa-proof__ph{flex:0 0 52%}
  .fa-proof__stats > *{padding-block:9px}
  .fa-proof__closing{font-size:13.5px;line-height:1.5}
}
@media(max-width:400px){
  .fa-proof__stats{gap:6px}
  .fa-proof__stats li{padding:8px 12px 8px 38px;font-size:13.5px;line-height:1.45}
  .fa-proof .fa-proof__grid > .fa-proof__ph{flex:0 0 48%}
  .fa-marcas{margin-top:8px}
  .fa-proof__closing{margin-top:12px}
}

/* Controle de parar/retomar o carrossel de fotos (conteúdo que se move sozinho precisa ter como parar) */
.fa-carrossel__pausa{display:inline-flex;align-items:center;gap:7px;min-height:36px;margin-top:8px;padding:7px 12px;
  border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:var(--txt-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.fa-carrossel__pausa:hover{color:var(--txt-1);border-color:rgba(255,255,255,.3)}
.fa-carrossel__pausa span:first-child{font-size:10px;letter-spacing:1px}
@media(min-width:561px){.fa-carrossel__pausa{display:none}}   /* no desktop a grade é 2x2 e não anda */
.fa-parado .fa-marcas__fita{animation-play-state:paused}