/* briefing.css — o questionário de TOQUES.
   ⭐ Desenhado para o POLEGAR primeiro: alvo mínimo de 48px, nada de hover como
      única pista, e a prévia vira uma tela cheia no celular em vez de encolher. */

:root{
  --preto:#0b0d10; --card:#14171c; --card2:#1b1f26; --borda:#262b33;
  --texto:#eef1f5; --texto2:#a3abb7; --acento:#3b82f6; --acento-forte:#2563eb;
  --ok:#22c55e; --alerta:#f59e0b; --erro:#f87171;
  --raio:14px; --alvo:48px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--preto); color:var(--texto);
  font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100dvh; display:flex; flex-direction:column;
}

/* ── topo ── */
.topo{position:sticky;top:0;z-index:30;background:rgba(11,13,16,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.topo-in{max-width:1180px;margin:0 auto;padding:12px 18px;display:flex;
  align-items:center;gap:14px}
.passo-txt{font-size:14px;color:var(--texto2);white-space:nowrap}
.passo-txt b{color:var(--texto)}
.barra{flex:1;height:6px;background:var(--card2);border-radius:99px;overflow:hidden}
.barra-in{height:100%;width:14%;background:var(--acento);border-radius:99px;
  transition:width .32s cubic-bezier(.4,0,.2,1)}
.ver-previa{display:none}

/* ── palco ── */
.palco{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:26px 18px 130px;
  display:grid;grid-template-columns:1fr 380px;gap:36px;align-items:start}
.perguntas{min-width:0}

.passo{border:0;display:none}
.passo.ativo{display:block;animation:entra .28s ease}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{font-size:27px;line-height:1.25;letter-spacing:-.02em;margin-bottom:8px;font-weight:700}
.ajuda{color:var(--texto2);font-size:16px;margin-bottom:22px}
.ajuda b{color:var(--texto)}
.nota{display:block;color:var(--texto2);font-size:14px;margin-top:10px}
.erro{display:block;color:var(--erro);font-size:15px;margin-top:8px;font-weight:600}
.erro:empty{display:none}

/* ── ramos ── */
.grade-ramos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.ramo{min-height:var(--alvo);padding:16px 14px;background:var(--card);
  border:2px solid var(--borda);border-radius:var(--raio);color:var(--texto);
  font-size:16px;font-weight:600;text-align:left;cursor:pointer;transition:.16s}
.ramo:hover{border-color:#3a414c}
.ramo[aria-pressed="true"]{border-color:var(--acento);background:var(--card2)}
.ramo[aria-pressed="true"]::after{content:" ✓";color:var(--acento)}

/* ── o escape: "Não achei o meu" ──
   ⛔ Borda TRACEJADA de propósito: ele é o card que diz "aqui é outra coisa", e
   precisa ser achado sem competir com os ramos. Card igual aos outros faria a
   pessoa que TEM ramo tocar nele por engano; botão apagado faria quem precisa
   dele não achar. */
.ramo-escape{border-style:dashed;color:var(--texto-2,#9aa4b2);font-weight:600}
.ramo-escape:hover{border-color:var(--acento);color:var(--texto)}
.ramo-escape[aria-pressed="true"]{border-style:solid}
.campo-escape{margin-top:16px}
.campo-escape textarea{min-height:96px;line-height:1.5}
.ajuda-campo{display:block;font-size:13px;color:var(--texto-2,#9aa4b2);margin-top:6px}

/* ── campos digitados ── */
.campo{display:block;margin-bottom:20px}
.rot{display:block;font-size:15px;font-weight:600;margin-bottom:7px}
/* ⛔ `email` entrou em 27/08/2026, e o defeito só apareceu quando o bloco do guardar
   FOI VISTO pela primeira vez: ele nasceu escondido até a chave do Turnstile existir,
   então nenhuma renderização jamais o mostrou. O campo saía BRANCO, de navegador, no
   meio de três campos escuros. ⭐ A lição: bloco que nasce desligado nunca passou pelo
   portão visual — ao acendê-lo, o primeiro passo é OLHAR, não publicar. */
input[type=text],input[type=tel],input[type=email],textarea{
  width:100%;min-height:var(--alvo);padding:13px 15px;background:var(--card);
  border:2px solid var(--borda);border-radius:var(--raio);color:var(--texto);
  font:inherit;font-size:17px}
input:focus,textarea:focus{outline:0;border-color:var(--acento)}
input::placeholder,textarea::placeholder{color:#5d6673}
textarea{resize:vertical;line-height:1.55}

/* ── serviços: já marcados, o toque TIRA ── */
.lista-servicos{display:flex;flex-direction:column;gap:10px}
.servico{display:flex;gap:13px;align-items:flex-start;width:100%;min-height:var(--alvo);
  padding:14px 15px;background:var(--card);border:2px solid var(--acento);
  border-radius:var(--raio);color:var(--texto);text-align:left;cursor:pointer;transition:.16s}
.servico .marca{flex:0 0 24px;height:24px;border-radius:7px;background:var(--acento);
  color:#04122b;display:grid;place-items:center;font-weight:800;font-size:15px;margin-top:1px}
.servico .txt b{display:block;font-size:16px}
.servico .txt span{display:block;color:var(--texto2);font-size:14px;margin-top:2px}
.servico[aria-pressed="false"]{border-color:var(--borda);opacity:.5}
.servico[aria-pressed="false"] .marca{background:transparent;
  border:2px solid var(--borda);color:transparent}
.servico[aria-pressed="false"] .txt b{text-decoration:line-through}

/* ── cores ── */
.grade-cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:11px}
.cor{min-height:var(--alvo);padding:12px;background:var(--card);border:2px solid var(--borda);
  border-radius:var(--raio);color:var(--texto);cursor:pointer;display:flex;
  flex-direction:column;gap:9px;align-items:flex-start;font-size:14px;font-weight:600}
.cor .amostra{width:100%;height:30px;border-radius:8px}
.cor[aria-pressed="true"]{border-color:var(--texto)}

/* ── chips do "sobre" ── */
.grupo{margin-bottom:22px}
.grot{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.gajuda{display:block;color:var(--texto2);font-size:14px;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{min-height:var(--alvo);padding:11px 16px;background:var(--card);
  border:2px solid var(--borda);border-radius:99px;color:var(--texto);font:inherit;
  font-size:15px;cursor:pointer;transition:.16s}
.chip[aria-pressed="true"]{border-color:var(--acento);background:var(--card2)}
.chip[disabled]{opacity:.35;cursor:not-allowed}
.sobre-saiu{background:var(--card);border:1px solid var(--borda);
  border-radius:var(--raio);padding:16px}
.sobre-saiu .grot{margin-bottom:9px}

/* ── fotos ── */
.solta-foto{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:130px;border:2px dashed var(--borda);border-radius:var(--raio);
  background:var(--card);cursor:pointer;color:var(--texto2)}
.solta-foto:hover{border-color:var(--acento);color:var(--texto)}
.solta-icone{font-size:32px;line-height:1}
.solta-txt{font-size:16px;font-weight:600}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:11px;margin-top:14px}
.foto{position:relative;aspect-ratio:4/3;border-radius:11px;overflow:hidden;
  background:var(--card2);border:2px solid var(--borda)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto .tira{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.72);color:#fff;border:0;font-size:15px;cursor:pointer;line-height:1}
.foto .aviso{position:absolute;left:0;right:0;bottom:0;padding:7px 9px;font-size:12px;
  line-height:1.35;background:rgba(245,158,11,.94);color:#1a1204;font-weight:600}
.foto.recusada{border-color:var(--alerta)}

/* ── endereço ── */
.endereco{display:flex;align-items:center;background:var(--card);
  border:2px solid var(--borda);border-radius:var(--raio);padding-left:14px;overflow:hidden}
.endereco:focus-within{border-color:var(--acento)}
.end-fixo{color:var(--texto2);font-size:16px;white-space:nowrap}
.endereco input{border:0;background:transparent;padding-left:2px}
.endereco input:focus{border:0}

.limites{margin-top:26px;background:var(--card);border:1px solid var(--borda);
  border-radius:var(--raio);padding:15px 17px}
.limites summary{cursor:pointer;font-weight:600;font-size:16px}
.limites ul{margin:13px 0 0 19px;display:flex;flex-direction:column;gap:8px;
  color:var(--texto2);font-size:15px}
.limites li b{color:var(--texto)}
.limites p{margin-top:12px;color:var(--texto2);font-size:15px}

/* ── prévia ── */
.previa{position:sticky;top:76px}
.previa-cabeca{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.previa-rot{font-size:14px;font-weight:600;color:var(--texto2)}
.fechar-previa{display:none;background:var(--card);border:1px solid var(--borda);
  color:var(--texto);width:40px;height:40px;border-radius:10px;font-size:17px;cursor:pointer}
.moldura{border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;
  background:#fff;height:min(660px,72vh)}
#quadro{width:100%;height:100%;border:0;display:block}
.previa-nota{margin-top:9px;font-size:13px;color:var(--texto2)}

/* ── rodapé ── */
.rodape{position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(11,13,16,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--borda);padding:13px 18px calc(13px + env(safe-area-inset-bottom));
  display:flex;gap:11px;justify-content:flex-end;max-width:1180px;margin:0 auto}
.btn{min-height:var(--alvo);padding:0 26px;border-radius:var(--raio);border:2px solid transparent;
  font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.btn-voltar{background:transparent;border-color:var(--borda);color:var(--texto)}
.btn-voltar[hidden]{display:none}
.btn-seguir{background:var(--acento);color:#04122b}
.btn-seguir:hover{background:var(--acento-forte);color:#fff}

/* ── celular: a prévia vira tela cheia, não miniatura ── */
@media (max-width:900px){
  .palco{grid-template-columns:1fr;gap:0;padding-bottom:120px}
  h1{font-size:24px}
  .ver-previa{display:block;min-height:40px;padding:0 15px;border-radius:10px;
    background:var(--card);border:1px solid var(--borda);color:var(--texto);
    font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
  /* ⚠️ 02/09/2026 — ORDEM DELE, olhando no celular: "no celular eu quero que a
     PRÉVIA apareça AO VIVO embaixo, e alguma forma tem que avisar a pessoa que
     a prévia dela está saindo ali embaixo".
     ⛔ Antes a prévia era MODAL de tela cheia atrás do botão "Ver prévia": quem
     respondia no celular não via a página nascer — só via se fosse procurar.
     ⭐ Agora ela FLUI abaixo das perguntas (a ordem no HTML já é essa) e monta
     em tempo real. O modal continua existindo para quem TOCA em "Ver prévia":
     `.previa.aberta` volta a ser tela cheia, e é o mesmo elemento — sem fork. */
  .previa{position:static;display:flex;flex-direction:column;margin-top:26px;
    padding:16px;background:var(--card);border:1px solid var(--borda);border-radius:14px}
  .previa.aberta{position:fixed;inset:0;z-index:40;background:var(--preto);
    margin-top:0;border:0;border-radius:0}
  .previa .moldura{min-height:420px}
  /* o chip que AVISA que a página está montando ali embaixo */
  .aviso-previa{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:35;
    display:none;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
    background:var(--card);border:1px solid var(--borda);color:var(--texto);
    font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer}
  .aviso-previa.visivel{display:flex}
  .fechar-previa{display:block}
  .moldura{flex:1;height:auto}
  .rodape{justify-content:stretch}
  .btn{flex:1;padding:0 14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── passo 9 · o pagamento ───────────────────────────────────────────────────
   ⛔ O marcador BLOQUEANTE é VISÍVEL de propósito. Slot de copy que falta tem de
   gritar na tela de quem revisa: marcador discreto vira texto publicado. */
.bloqueante{color:var(--erro);font-weight:700}
.cobranca{margin-top:22px;background:var(--card);border:1px solid var(--borda);
  border-radius:var(--raio);padding:22px}
.preco{font-size:34px;font-weight:800;color:var(--texto);line-height:1.1}
.preco small{display:block;font-size:15px;font-weight:600;color:var(--texto2);margin-top:6px}
.btn-pagar{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;
  background:var(--acento);color:#04122b;text-decoration:none}
.btn-pagar:hover{background:var(--acento-forte);color:#fff}
.btn-pagar[hidden]{display:none}

/* ── O convite de instalar (BLOCO B da copy) ──────────────────────────────────
   ⛔ `[hidden]{display:none}` explícito em tudo: os três estados são exclusivos, e um
   `display` herdado por engano faria a ficha do iPhone aparecer no Android. */
.instalar{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.instalar[hidden],.instalar [hidden]{display:none}
/* ⭐ FICHA, não prosa: o rótulo do que tocar em destaque, e o "onde" ao lado, em tom menor.
   Quem está com o Safari aberto varre atrás do rótulo que está vendo na tela. */
.ficha-iphone{margin:10px 0 0;padding-left:20px;display:grid;gap:10px}
.ficha-iphone li{line-height:1.5}
.ficha-iphone b{display:block}
.ficha-iphone span{opacity:.75;font-size:.94em}

/* ── "travei aqui": um por passo (BLOCO E da copy) ──────────────────────────
   ⛔ DISCRETO de propósito: ele é a saída de quem empacou, e não pode competir com o
   botão de seguir. Por isso tom de --texto2, tamanho de nota e sublinhado só no toque.
   ⭐ Alvo de toque de 44px de altura mesmo sendo texto pequeno: no celular, link fino
   colado no rodapé do passo é o que a pessoa erra e desiste. */
/* ⛔ PONTILHADO PERMANENTE — decisão do dono, 30/08/2026 ("pode fazer o recomendado").
   O traço que identificava o link só existia no `:hover`, e CELULAR NÃO TEM HOVER: no
   telefone ele ficava visualmente igual à linha de texto comum logo acima — e é a saída de
   emergência de quem empacou no passo.
   ⭐ Pontilhado parado (discreto, mas legível como link) e SÓLIDO no hover/foco: o estado
   ativo continua distinto de quem já sabia que era clicável. */
.travei{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;
  color:var(--texto2);font-size:14px;text-decoration:none;
  border-bottom:1px dotted var(--texto2)}
.travei:hover,.travei:focus-visible{color:var(--texto);border-bottom:1px solid var(--texto)}

/* ── guardar a minha página (a Porta Grátis) ────────────────────────────────
   ⛔ O bloco inteiro estava SEM CSS: `.guardar`, `.guardar-tit`, `.marca` e o botão não
   tinham uma regra sequer nesta folha, e a página do briefing carrega SÓ esta folha —
   o `site/estilo.css`, onde `.btn-bronze` mora, nunca chega aqui. Resultado medido no
   primeiro PNG: título colado no campo de cima, caixas sem alvo de toque, botão branco de
   navegador e links em azul padrão.
   ⭐ E o botão é DELIBERADAMENTE secundário: dentro do passo 2 quem manda é "Continuar".
   Guardar é a saída de quem quer voltar depois — importante, e não o caminho principal.
   ⛔ A classe deixou de se chamar `btn-bronze`: o bronze é token do `site/estilo.css`, e
   copiá-lo para cá criaria um segundo dono da cor da marca. Nome que promete uma cor que
   esta folha não tem é nome que mente. */
.guardar{margin-top:30px;padding-top:24px;border-top:1px solid var(--borda)}
.guardar-tit{font-size:clamp(19px,2.6vw,23px);margin:0 0 6px}
.guardar .marca{display:flex;gap:12px;align-items:flex-start;min-height:44px;
  margin-bottom:14px;color:var(--texto2);font-size:15px;line-height:1.5;cursor:pointer}
.guardar .marca input{flex:0 0 22px;width:22px;height:22px;margin-top:2px;accent-color:var(--acento)}
.guardar .campo{margin-top:18px}
.btn-guardar{width:100%;background:var(--card2);border-color:var(--acento);color:var(--texto)}
.btn-guardar:hover{background:var(--acento);color:#04122b}
.guardar a{color:var(--acento)}
#turnstile:not(:empty){margin:14px 0}

/* ⭐ OS DEPOIMENTOS — passo 8, entrou em 29/08/2026 (decisão do dono por questionário).
   ⛔ O trio é tudo-ou-nada por lei (CDC art. 37), e o desenho DIZ isso na tela: os três
   blocos são numerados e idênticos, para a compradora ver de relance que são três, não
   "quantos ela quiser". Numeração escondida atrás de rolagem faria ela preencher um e
   achar que bastou. */
.depoimentos{display:flex;flex-direction:column;gap:14px}
.dep-item{position:relative;background:var(--card);border:2px solid var(--borda);
  border-radius:var(--raio);padding:14px 14px 14px 40px;
  display:flex;flex-direction:column;gap:9px}
.dep-item:focus-within{border-color:var(--acento)}
.dep-n{position:absolute;left:13px;top:16px;width:20px;height:20px;border-radius:50%;
  background:var(--card2);color:var(--texto2);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.dep-item input,.dep-item textarea{width:100%}
.dep-item textarea{resize:vertical;min-height:56px}

/* ⚠️ A declaração é ALVO de toque inteiro (48px, o `--alvo` da casa): checkbox de 16px
   num celular é o campo que a pessoa erra e desiste — e sem ele o trio não sai. */
.dep-declaro{display:flex;align-items:flex-start;gap:11px;margin-top:16px;
  min-height:var(--alvo);cursor:pointer;font-size:15px;color:var(--texto2);line-height:1.45}
.dep-declaro input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--acento)}
.dep-declaro span{padding-top:1px}

/* ⚠️ 02/09/2026 — quando o /briefing roda DENTRO da home (ordem dele: "quero o
   BLOCO lá"), o cabeçalho próprio dele viraria um segundo topo dentro da
   página. Some só no modo embutido; aberto direto, nada muda. */
html.embutido .topo { display: none; }
html.embutido, html.embutido body { background: transparent; }