/* ==========================================================================
   Felipe Branding — /consultas (Consultoria Gratuita de Perfil Instagram)
   Reaproveita TODO o design system de assets/css/main.a7ad8bfa81.css
   (cores, --space-*, --radius-*, --font-*, .btn, .field, .modal-*, .cta-banner,
   .eyebrow, .sr-only, tema claro/escuro). Este arquivo só acrescenta o que é
   específico do wizard e da tela de resultado — nunca redefine tokens.
   Mobile-first: todo bloco novo aqui nasce em coluna única, com toque >= 48px.
   ========================================================================== */

.consultas-page { overflow-x: hidden; }

/* ---------- Cabeçalho simplificado (sem nav — ferramenta focada) ---------- */
.consultas-header {
  position: sticky; top: 0; height: auto; padding: 14px 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
  z-index: 50;
}

/* ---------- Layout raiz ---------- */
.consulta-shell { padding-top: clamp(28px, 5vw, 48px); padding-bottom: 64px; }
.consulta-container { max-width: 640px; }

/* ---------- Barra de progresso ---------- */
.wizard-progress { margin-bottom: 28px; }
.wizard-progress-track {
  height: 6px; border-radius: 100px; background: var(--bg-elevated); overflow: hidden;
}
.wizard-progress-fill {
  height: 100%; background: var(--star); border-radius: 100px;
  transition: width .4s cubic-bezier(.2,.8,.2,1); width: 0%;
}
.wizard-progress-text {
  display: block; margin-top: 8px; font-family: var(--font-mono); font-size: .72rem;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Etapas ---------- */
.wizard-step { display: none; }
.wizard-step.is-active { display: block; animation: fbConsultaFade .35s ease; }
@keyframes fbConsultaFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-step.is-active { animation: none; }
}

.wizard-step h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); margin-bottom: 16px; }
.wizard-step h2 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); margin-bottom: 10px; }
.wizard-step-label {
  font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--star); margin-bottom: 10px;
}
.wizard-step-optional { color: var(--text-muted); font-weight: 400; font-size: .7em; }
.wizard-step-help { color: var(--text-muted); margin-bottom: 28px; max-width: 52ch; }

.wizard-intro-lead { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 24px; max-width: 56ch; }
.wizard-intro-list { display: grid; gap: 12px; margin-bottom: 36px; }
.wizard-intro-list li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.wizard-intro-list svg { width: 18px; height: 18px; color: var(--star); flex-shrink: 0; }

/* ---------- Campos maiores (toque confortável, texto legível) ---------- */
.field-lg input, .field-lg select { padding: 18px; font-size: 1.05rem; border-radius: var(--radius-md); }

.input-prefix {
  display: flex; align-items: center; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden;
  transition: border-color .25s ease;
}
.input-prefix:focus-within { border-color: var(--star); }
.input-prefix-at { padding-left: 18px; color: var(--text-muted); font-size: 1.05rem; flex-shrink: 0; }
.input-prefix input { border: 0; background: transparent; padding: 18px 18px 18px 6px; width: 100%; }
.input-prefix input:focus { outline: 0; }

/* Honeypot — invisível para pessoas, alcançável (e preenchível) só por bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Escolha do objetivo (cards grandes, tocáveis) ---------- */
.choice-list { display: grid; gap: 12px; margin-bottom: 8px; }
.choice-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  text-align: left; font-size: 1rem; font-weight: 500; min-height: 56px; width: 100%;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.choice-card:hover { border-color: var(--star); }
.choice-card.is-selected { border-color: var(--star); background: var(--bg-soft); }
.choice-card .check-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.choice-card.is-selected .check-dot { border-color: var(--star); background: var(--star); }
.choice-card.is-selected .check-dot svg { width: 13px; height: 13px; color: var(--accent-contrast); }
.choice-card .check-dot svg { display: none; }
.choice-card.is-selected .check-dot svg { display: block; }

/* Erro de campo fora de um wrapper .field (ex: escolha por cards) */
.field-error.is-visible { display: block; }

/* ---------- Revisão (etapa final) ---------- */
.review-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px;
  margin-bottom: 28px; background: var(--bg-elevated); display: grid; gap: 12px;
}
.review-row {
  display: flex; justify-content: space-between; gap: 16px; font-size: .92rem;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.review-row:last-child { border-bottom: 0; padding-bottom: 0; }
.review-row .label { color: var(--text-muted); flex-shrink: 0; }
.review-row .value { font-weight: 600; text-align: right; max-width: 62%; word-break: break-word; }

.btn-lg { padding: 19px 28px; font-size: 1.05rem; border-radius: var(--radius-md); }

/* ---------- Navegação Voltar/Avançar (fixa perto do polegar no mobile) ---------- */
.wizard-nav {
  display: flex; gap: 12px; margin-top: 32px; position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--bg) 65%, transparent);
  padding-top: 20px; padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
}
.wizard-nav[hidden] { display: none; }
.wizard-nav .wizard-back { flex-shrink: 0; }
.wizard-nav .wizard-forward { flex: 1; }

/* ---------- Estados: carregando / erro / resultado ---------- */
.consulta-state { text-align: center; padding: 56px 0; display: grid; justify-items: center; gap: 14px; }
.consulta-state[hidden] { display: none; }
.consulta-state h2 { font-size: 1.4rem; max-width: 34ch; }

.spinner {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--border-strong);
  border-top-color: var(--star); animation: fbConsultaSpin .8s linear infinite;
}
@keyframes fbConsultaSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

.state-icon { width: 44px; height: 44px; color: #d97757; }
.state-icon-ok { color: var(--star); }

/* ---------- Tela de resultado ---------- */
/* .consulta-state é pensado pro spinner/erro centralizados (display:grid +
   justify-items:center). Aqui viramos um fluxo normal de blocos — e é
   preciso resetar TAMBÉM justify-items (não só display): mesmo fora de um
   grid, justify-items:center continua valendo pra filhos em fluxo normal e
   faz um bloco sem largura própria encolher pro tamanho do conteúdo em vez
   de preencher o container. Sem esse reset, o carrossel de dicas (que tem
   conteúdo largo de propósito, pra rolar) "estourava" a tela toda. */
.consulta-result { display: block; justify-items: normal; text-align: left; padding-top: 12px; }
.result-head { text-align: center; margin-bottom: 40px; }
.result-head .state-icon { margin: 0 auto 16px; }
.result-head .result-handle { font-size: clamp(1.5rem, 5vw, 2.1rem); margin-bottom: 14px; word-break: break-word; }
.result-head p { max-width: 60ch; margin-inline: auto; }

.diag-categories {
  display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px;
}
.diag-category { background: var(--bg-elevated); padding: 22px 24px; }
.diag-category-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.diag-category-head h3 { font-size: 1.05rem; }
.diag-badge {
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; padding: 4px 10px; border-radius: 100px; white-space: nowrap;
}
.diag-badge--atencao { background: rgba(217, 119, 87, .16); color: #d97757; }
.diag-badge--base { background: rgba(140, 140, 140, .18); color: var(--star); }
.diag-badge--oportunidade { background: rgba(127, 191, 143, .18); color: #5fa876; }
.diag-category p { color: var(--text-muted); font-size: .94rem; }

.diag-lists { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
@media (min-width: 720px) { .diag-lists { grid-template-columns: 1fr 1fr; } }
.diag-list-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px;
  background: var(--bg-elevated);
}
.diag-list-card h3 {
  display: flex; align-items: center; gap: 8px; font-size: .95rem; margin-bottom: 14px;
  font-family: var(--font-body); font-weight: 700;
}
.diag-list-card h3 svg { width: 16px; height: 16px; color: var(--star); flex-shrink: 0; }
.diag-list-card ul { display: grid; gap: 10px; }
.diag-list-card li { color: var(--text-muted); font-size: .9rem; padding-left: 16px; position: relative; }
.diag-list-card li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px;
  background: var(--star); border-radius: 50%;
}

/* ---------- Fundo com gradiente animado no CTA final ----------
   3 "manchas" de gradiente radial, desfocadas, se deslocando devagar cada
   uma no seu próprio ritmo — dá a sensação de um fundo "vivo" (tipo lava
   lamp/aurora) sem canvas, sem WebGL e sem nenhuma biblioteca externa (a
   política de segurança da página não permite script de fora mesmo). Só
   gradiente + blur + transform, então roda liso em qualquer celular. Fica
   sempre atrás do texto: o `.cta-banner` já é position:relative+overflow:
   hidden, e o conteúdo (`.diag-cta-inner`) já tem z-index:1. */
.gradient-mesh { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.gradient-mesh span {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(56px); opacity: .55; will-change: transform;
}
.gradient-mesh span:nth-child(1) {
  background: radial-gradient(circle, var(--midnight-3) 0%, transparent 70%);
  top: -22%; left: -12%;
  animation: fbMesh1 16s ease-in-out infinite;
}
.gradient-mesh span:nth-child(2) {
  background: radial-gradient(circle, rgba(140, 140, 140, .5) 0%, transparent 70%);
  bottom: -26%; right: -8%;
  animation: fbMesh2 20s ease-in-out infinite;
}
.gradient-mesh span:nth-child(3) {
  width: 42%;
  background: radial-gradient(circle, rgba(95, 168, 118, .4) 0%, transparent 70%);
  top: 28%; right: 18%;
  animation: fbMesh3 13s ease-in-out infinite;
}
@keyframes fbMesh1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12%, 10%) scale(1.15); }
}
@keyframes fbMesh2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10%, -9%) scale(1.1); }
}
@keyframes fbMesh3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16%, 12%) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-mesh span { animation: none; }
}

/* -------------------- Brilho no cursor (cards de categoria e dicas) -------------------- */
.diag-category, .dica-card { position: relative; z-index: 0; }
.diag-category::before, .dica-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(220px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--text) 12%, transparent), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  .diag-category:hover::before, .dica-card:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .diag-category::before, .dica-card::before { display: none; }
}

.diag-cta { margin-bottom: 8px; }
.diag-cta-inner {
  position: relative; z-index: 1;
  /* .cta-banner é display:grid com uma única coluna implícita — sem isto,
     o valor inicial min-width:auto faz a coluna (e o texto do h2/tagline
     dentro dela) crescer pro tamanho da linha mais larga SEM QUEBRAR,
     estourando a tela e ficando cortado pelo overflow-x:hidden da página
     (mesmo bug de fundo do "justify-items" que já corrigimos em outro
     lugar desta página — aqui é a variante em grid). */
  min-width: 0;
}
.diag-cta-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 600; font-style: italic; letter-spacing: -.01em;
  color: var(--paper, #F7F5F0); opacity: .92; margin-bottom: 10px;
}
.diag-cta-inner h2 { max-width: none; margin-bottom: 20px; font-size: clamp(1.3rem, 4vw, 1.7rem); }
.diag-cta .cta-actions {
  display: grid; gap: 12px;
  /* mesmo motivo do min-width:0 do .diag-cta-inner logo acima: sem isto, a
     coluna do grid cresce pro tamanho do BOTÃO MAIS LARGO sem quebrar (os
     botões são white-space:nowrap por padrão do site) e o texto mais
     comprido ("Conhecer a Felipe Branding no Instagram") estourava a tela
     no celular. */
  min-width: 0;
}
.diag-cta .cta-actions .btn {
  width: 100%;
  /* Nowrap é o padrão do site (bom pra botões curtos), mas aqui um dos
     rótulos é comprido de propósito — deixa quebrar em 2 linhas em vez de
     vazar da tela. */
  white-space: normal; line-height: 1.25; text-align: center;
}
.diag-cta .cta-note { margin-top: 16px; }
.print-contato { display: none; }

/* Respiração sutil e contínua no botão principal — é o clique que mais
   importa da página inteira (é pra onde tudo empurra), então ganha um
   convite visual discreto, sem gritar. */
#ctaWhatsapp { animation: fbCtaBreathe 2.6s ease-in-out infinite; }
#ctaWhatsapp:hover, #ctaWhatsapp:focus-visible { animation-play-state: paused; }
@keyframes fbCtaBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 168, 118, .35); }
  50% { box-shadow: 0 0 0 10px rgba(95, 168, 118, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #ctaWhatsapp { animation: none; }
}

/* ---------- Ação: salvar o resultado em PDF (window.print + folha abaixo) ---------- */
.result-actions { margin-top: 18px; display: flex; justify-content: center; }
.btn-pdf { font-size: .85rem; padding: 10px 18px; }
.btn-pdf .icon { width: 16px; height: 16px; }

/* ---------- Texto imersivo: o @handle entra letra a letra quando a tela de
   resultado aparece — reaproveita a classe .is-visible que o observer global
   (final de assets/js/consultas.js) já liga em qualquer [data-reveal]. ---------- */
.result-head .result-handle { display: block; }
.reveal-char {
  display: inline-block; opacity: 0; transform: translateY(10px) scale(.92); filter: blur(4px);
  animation: fbCharIn .5s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-play-state: paused;
}
.result-head.is-visible .reveal-char { animation-play-state: running; }
@keyframes fbCharIn { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal-char { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ---------- Dicas práticas — conteúdo premium em cards, um "carrossel" real
   feito só com scroll-snap (arrasta com o dedo no celular, sem lib nenhuma) ---------- */
.dicas-section { margin-bottom: 44px; }
.dicas-head { text-align: center; margin-bottom: 24px; }
.dicas-head h2 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); margin-bottom: 8px; }
.dicas-head p { max-width: 56ch; margin-inline: auto; }

.dicas-carrossel { position: relative; }
.dicas-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px; padding: 4px 4px 8px; margin: 0 -4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* essencial: overflow-x:auto cria um novo contexto de formatação de bloco,
     que por padrão usa "shrink-to-fit" — e como é um flex row sem quebra de
     linha, o min-content é a SOMA da largura de todos os cards. Sem width:100%
     aqui, o carrossel "estoura" a largura do container em vez de rolar. */
  width: 100%;
}
.dicas-track::-webkit-scrollbar { display: none; }
.dicas-track:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }

.dica-card {
  /* "um card por vez": ocupa quase toda a largura útil (só uma tirinha do
     próximo card espia na lateral, convidando a arrastar) em vez de mostrar
     2 cards de uma vez — a sensação pedida foi "passa o dedo, vai pro
     outro", tipo stories, não uma rolagem livre de vitrine. */
  scroll-snap-align: center; scroll-snap-stop: always;
  flex: 0 0 min(360px, 90%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elevated); padding: 24px 22px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.dica-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .dica-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px -20px rgba(0,0,0,.28); border-color: var(--border-strong); }
  .dica-card--final:hover { border-color: transparent; }
}
.dica-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dica-card__num {
  font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); letter-spacing: .06em;
}
.dica-card h3 { font-size: 1.15rem; }
.dica-card__lista { display: grid; gap: 12px; }
.dica-card__lista li {
  display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text-muted); line-height: 1.5;
}
.dica-card__lista svg { width: 16px; height: 16px; color: #5fa876; flex-shrink: 0; margin-top: 2px; }

/* Convite sutil pra arrastar, uma vez só, no primeiro card — pequeno
   "aceno" lateral que some sozinho. Só roda se houver mais de 1 card e a
   pessoa não pediu redução de movimento (ver JS: classe é adicionada por
   script, então dá pra checar reduceMotion antes de aplicar). */
.dica-card--hint { animation: fbDicaHint 1.1s cubic-bezier(.3, .7, .3, 1) .5s 1; }
@keyframes fbDicaHint {
  0% { transform: translateX(0); }
  35% { transform: translateX(-14px); }
  65% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Card de conclusão — último item do carrossel, fecha a sequência de dicas
   já emendando com a ideia de agir (o cartão verificado e o CTA vêm logo
   depois, na sequência normal da página). */
.dica-card--final {
  align-items: center; text-align: center; justify-content: center;
  background: linear-gradient(160deg, var(--midnight) 0%, var(--midnight-2, var(--midnight)) 100%);
  color: var(--paper, #F7F5F0); border-color: transparent;
}
.dica-card--final .dica-card-final-icon {
  /* --star é um cinza neutro (usado como marca-d'água discreta em outros
     lugares do site) — fica quase invisível num fundo navy. Aqui o ícone é
     o "selo de conquista" do card, por isso usa o mesmo verde de sucesso já
     usado nos badges de oportunidade e nos checks das dicas (#5fa876). */
  width: 40px; height: 40px; color: #5fa876;
  animation: fbFinalIconSpin 6s linear infinite;
}
.dica-card--final h3 { color: inherit; }
.dica-card--final p { color: rgba(247, 245, 240, .78); font-size: .92rem; line-height: 1.55; margin: 0; }
.dica-card--final .btn { margin-top: 4px; }
.dica-card--final.is-active-card { animation: fbFinalPulse 1s cubic-bezier(.2, .8, .2, 1); }
@keyframes fbFinalIconSpin { to { transform: rotate(360deg); } }
@keyframes fbFinalPulse {
  0% { box-shadow: 0 0 0 0 rgba(95, 168, 118, .45); }
  70% { box-shadow: 0 0 0 18px rgba(95, 168, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 168, 118, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dica-card--hint { animation: none; }
  .dica-card--final .dica-card-final-icon { animation: none; }
  .dica-card--final.is-active-card { animation: none; }
}

.dicas-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.dicas-nav-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text);
  transition: border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .dicas-nav-btn:hover { border-color: var(--star); color: var(--star); transform: translateY(-2px); }
}
.dicas-nav-btn:active { transform: scale(.9); }
.dicas-nav-btn svg { width: 18px; height: 18px; }
.dicas-dots { display: flex; gap: 8px; }
.dicas-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); border: 0; padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.dicas-dot.is-active { background: var(--star); transform: scale(1.3); }
.dicas-dot--final.is-active { background: var(--star); }

@media (min-width: 720px) {
  .dica-card { flex-basis: 380px; }
}

/* ---------- Cartão de perfil verificado — selo de autoridade antes do CTA ---------- */
.verified-card {
  display: flex; align-items: center; gap: 16px; max-width: 520px; margin: 0 auto 32px;
  padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .verified-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -18px rgba(0,0,0,.24); border-color: var(--border-strong); }
}
.verified-card__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background-color: var(--midnight); background-image: var(--logo-icon-paper);
  background-repeat: no-repeat; background-size: 56%;
  /* Não é 50% 50% de propósito: o símbolo (traço + círculo + estrela) tem mais
     "peso" visual embaixo e à direita (é uma letra, não um ícone simétrico) —
     centralizar pela caixa geométrica deixava ele com cara de "subido" demais
     dentro do círculo. 52% 56% foi calibrado visualmente (testei várias
     combinações lado a lado) pra centralizar pelo peso óptico, não pela caixa. */
  background-position: 52% 56%;
}
.verified-card__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.verified-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: #1d9bf0; color: #fff; flex-shrink: 0;
  transform: scale(0);
}
.verified-badge svg { width: 10px; height: 10px; }
/* O selo "aparece" com um pequeno "pop" logo depois do cartão inteiro —
   como se fosse confirmado um instante depois, não tudo de uma vez. */
.verified-card.is-visible .verified-badge {
  animation: fbBadgePop .45s cubic-bezier(.34, 1.56, .64, 1) .5s forwards;
}
@keyframes fbBadgePop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .verified-badge { transform: scale(1); }
  .verified-card.is-visible .verified-badge { animation: none; }
}
.verified-card__role { color: var(--text-muted); font-size: .86rem; line-height: 1.45; margin: 0; }

@media (max-width: 480px) {
  .verified-card { flex-direction: column; text-align: center; }
}

/* ---------- Impressão / "Salvar em PDF" — CSP bloqueia libs de PDF por CDN
   nesta página, então a saída é o diálogo de impressão do navegador (que já
   oferece "Salvar como PDF" em todo navegador atual) com esta folha dedicada. ---------- */
@media print {
  .consultas-header, .wizard-nav, .result-actions, .dicas-nav,
  .diag-cta .cta-actions, .diag-cta .cta-note, .diag-cta .cta-star, .gradient-mesh,
  .dica-card--final .btn, #scheduleModal, .site-footer { display: none !important; }
  body { background: #fff; color: #111; }
  .consulta-shell { padding: 0; }
  /* Os botões do CTA não fazem sentido no papel (ninguém clica em PDF), mas
     sem ELES o diagnóstico salvo ficava sem nenhum jeito de voltar a falar
     com a Felipe Branding. No lugar deles, imprime o contato em texto puro. */
  .print-contato {
    display: block !important; margin-top: 20px; padding-top: 16px;
    border-top: 1px solid #ccc; color: #111;
  }
  .print-contato-titulo { font-weight: 600; margin-bottom: 6px; }
  .print-contato p { margin: 2px 0; font-size: .92rem; }
  .print-contato-site { color: #555; }
  /* O CTA final e o card "Você viu todas as dicas" são escuros de propósito
     na tela (texto claro em fundo navy). No PDF isso é arriscado nos dois
     sentidos: se a pessoa NÃO marcar "gráficos de fundo" na caixa de
     impressão (o padrão, a maioria não marca), o fundo navy some e o texto
     claro original fica quase invisível numa página em branco; se ela
     marcar, o fundo navy aparece mas competiria com uma cor de texto clara
     "resetada". Força fundo branco E tinta escura juntos, pros dois casos
     darem no mesmo resultado legível: um card claro com bordas, iguais aos
     outros da página. É o trecho mais importante do PDF inteiro pra fechar
     negócio, não pode se perder aqui. */
  .cta-banner, .dica-card--final { background: #fff !important; border-color: #ccc; }
  .cta-banner, .cta-banner *,
  .dica-card--final, .dica-card--final * { color: #111 !important; }
  /* [data-reveal] só ganha .is-visible quando o IntersectionObserver detecta
     que o bloco entrou na tela — quem clica em "Salvar em PDF" sem ter
     rolado até o fim ainda não disparou isso em tudo. Sem este reset, sair
     direto pro PDF imprimiria seções com opacity:0 (invisíveis). */
  [data-reveal], .reveal-char {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important; animation: none !important;
  }
  .dicas-track {
    display: grid !important; grid-template-columns: 1fr; overflow: visible; gap: 12px;
  }
  .dica-card, .diag-category, .diag-list-card, .verified-card, .diag-cta { break-inside: avoid; border-color: #ccc; }
}

/* ---------- Telas pequenas: nada pode causar rolagem horizontal ---------- */
@media (max-width: 420px) {
  .review-row { flex-direction: column; gap: 4px; }
  .review-row .value { max-width: 100%; text-align: left; }
}

/* ---------- Telas grandes: um pouco mais de respiro ---------- */
@media (min-width: 960px) {
  .consulta-container { max-width: 720px; }
}

/* ---------- Telas de computador: não é só o celular esticado — a tela de
   resultado ganha mais largura, categorias em duas colunas, os botões do
   CTA final lado a lado e os cards de dicas maiores, já que sobra espaço
   horizontal e não faz sentido pedir pra "arrastar" quando dá pra mostrar
   mais de uma vez. As etapas do formulário (wizard) continuam com a
   largura de leitura confortável de sempre — só a TELA DE RESULTADO é que
   fica mais rica aqui. ---------- */
@media (min-width: 1040px) {
  /* :has() troca a largura do container SÓ quando a tela de resultado está
     visível (o wizard escondido não conta) — assim o formulário continua
     com a largura de leitura de sempre, e só o resultado ganha espaço. Em
     navegadores sem suporte a :has() (raros hoje em dia), a página some
     essa regra e volta pro comportamento anterior — nada quebra. */
  .consulta-container:has(#resultState:not([hidden])) { max-width: 960px; }

  .diag-categories { grid-template-columns: 1fr 1fr; }
  .diag-category { padding: 26px 28px; }

  .dicas-head p, .result-head p { max-width: 64ch; }
  .dicas-track { gap: 20px; }
  .dica-card { flex-basis: 420px; padding: 28px 26px; }

  .verified-card { max-width: 620px; padding: 22px 30px; gap: 20px; }

  .diag-cta-inner { max-width: 640px; margin-inline: auto; text-align: center; }
  .diag-cta-tagline { text-align: center; }
  .diag-cta .cta-actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  }
  .diag-cta .cta-actions .btn { width: auto; }
}

/* ---------- Réguas de alinhamento (ferramenta de revisão, tecla G) ----------
   Escondida por padrão pra qualquer visitante — só existe quando o script
   liga o overlay (ver assets/js/consultas.js). Cores fortes de propósito,
   é uma ferramenta de trabalho, não parte do visual da página. */
#fbAlignGuides { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; z-index: 99999; }
.fb-guide { position: absolute; }
.fb-guide-center, .fb-guide-edge { top: 0; bottom: 0; width: 1px; }
.fb-guide-center { left: 50%; background: rgba(255, 0, 130, .55); }
.fb-guide-edge { background: rgba(0, 180, 255, .6); }
.fb-guide-tick { left: 0; right: 0; height: 1px; background: rgba(255, 0, 130, .1); }
.fb-guide-tick-major { background: rgba(255, 0, 130, .3); }
.fb-guide-tick-major::after {
  content: attr(data-y); position: absolute; left: 4px; top: -13px;
  font: 10px/1 var(--font-mono); color: #ff0082; background: rgba(255, 255, 255, .92);
  padding: 1px 4px; border-radius: 3px;
}
.fb-guide-legenda {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(20, 20, 30, .88); color: #fff; font: 11px/1.4 var(--font-mono);
  padding: 7px 12px; border-radius: 100px; white-space: nowrap; pointer-events: none;
}

/* ==========================================================================
   30/09 — Hero da consultoria (estrela da marca em motion) + conteúdo
   Movimento só com transform/opacity. Variáveis --scroll, --px, --py vêm do
   JS (initHeroMotion) dentro de requestAnimationFrame.
   ========================================================================== */
.wizard-step-intro { display: none !important; }
body.is-consulta-iniciada .cs-hero,
body.is-consulta-iniciada .cs-info { display: none; }
body:not(.is-consulta-iniciada) .wizard-progress { display: none; }

.cs-hero {
  position: relative;
  padding: clamp(36px, 7vw, 96px) 0 clamp(40px, 7vw, 88px);
  margin-top: calc(-1 * clamp(28px, 5vw, 48px));
  margin-bottom: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(1200px 500px at 85% 30%, rgba(201, 166, 103, 0.10), transparent 60%),
    linear-gradient(160deg, #1d2a44 0%, #161f30 70%);
  color: #f7f5f0;
  overflow: hidden;
}
.cs-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 3vw, 40px);
  align-items: center;
}
.cs-hero .eyebrow { color: #c9a667; }
.cs-hero .eyebrow::before { background: #c9a667; }
.cs-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  max-width: 17ch;
  color: #f7f5f0;
}
.cs-hero-lead {
  margin-top: 18px;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: rgba(247, 245, 240, 0.78);
  max-width: 56ch;
}
.cs-hero-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.cs-hero-list li { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: rgba(247, 245, 240, 0.9); }
.cs-hero-list svg { width: 18px; height: 18px; color: #c9a667; flex-shrink: 0; }
.cs-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.cs-hero-actions .btn { min-height: 52px; }
.cs-hero-actions .icon { width: 18px; height: 18px; }

/* ---------- Cena da estrela ---------- */
.cs-hero-visual {
  --scroll: 0; --px: 0; --py: 0;
  position: relative;
  width: min(100%, 460px);
  justify-self: center;
  aspect-ratio: 1;
  order: -1;
  max-width: 190px;
  margin-bottom: -6px;
}
.cs-star-scene { width: 100%; height: 100%; overflow: visible; }
.cs-ring circle:first-child { fill: none; stroke: rgba(247, 245, 240, 0.16); stroke-width: 1; stroke-dasharray: 2 7; }
.cs-sat { fill: #c9a667; }
.cs-ring { transform-origin: 200px 200px; transform-box: view-box; }
.cs-lines path { fill: none; stroke: rgba(201, 166, 103, 0.35); stroke-width: 1; stroke-dasharray: 190; stroke-dashoffset: 190; }
.cs-lines circle { fill: rgba(247, 245, 240, 0.55); opacity: 0; }
.cs-dust circle { fill: rgba(247, 245, 240, 0.5); }
.cs-glow { transform-origin: 200px 200px; transform-box: view-box; opacity: .8; }
.cs-star-wrap { transform-origin: 200px 200px; transform-box: view-box; }
.cs-layer-back { transform-origin: 200px 200px; transform-box: view-box; }

/* Estado estático (sem JS ou "reduzir movimento"): composição completa, parada. */
.cs-lines path { stroke-dashoffset: 0; }
.cs-lines circle { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrada: a estrela surge com blur -> nítida; linhas se desenham depois. */
  .cs-hero.is-ready .cs-star-wrap { animation: cs-star-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
  .cs-hero.is-ready .cs-lines path { stroke-dashoffset: 190; animation: cs-draw 1.4s .7s cubic-bezier(.4,0,.2,1) forwards; }
  .cs-hero.is-ready .cs-lines circle { opacity: 0; animation: cs-fade .6s 1.7s ease forwards; }
  .cs-hero.is-ready .cs-hero-copy > * { animation: cs-rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .cs-hero.is-ready .cs-hero-copy > :nth-child(2) { animation-delay: .08s; }
  .cs-hero.is-ready .cs-hero-copy > :nth-child(3) { animation-delay: .16s; }
  .cs-hero.is-ready .cs-hero-copy > :nth-child(4) { animation-delay: .24s; }
  .cs-hero.is-ready .cs-hero-copy > :nth-child(5) { animation-delay: .32s; }

  /* Movimento contínuo lento (órbitas e respiração do brilho). */
  .cs-ring-1 { animation: cs-spin 90s linear infinite; }
  .cs-ring-2 { animation: cs-spin 60s linear infinite reverse; }
  .cs-ring-3 { animation: cs-spin 40s linear infinite; }
  .cs-glow { animation: cs-breathe 7s ease-in-out infinite; }
  .cs-dust circle { animation: cs-drift 14s ease-in-out infinite; }
  .cs-dust circle:nth-child(2n) { animation-duration: 18s; animation-direction: reverse; }

  /* Reação ao scroll (parallax) e ao mouse (inclinação sutil). */
  .cs-star-wrap .cs-star {
    transform-origin: 200px 200px; transform-box: view-box;
    transform: translate(calc(var(--px) * 6px), calc(var(--py) * 6px + var(--scroll) * -26px)) rotate(calc(var(--scroll) * 45deg));
    transition: transform .25s ease-out, filter .4s ease;
  }
  .cs-layer-back {
    transform: translate(calc(var(--px) * -10px), calc(var(--py) * -10px + var(--scroll) * 18px)) scale(calc(1 + var(--scroll) * .08));
    transition: transform .35s ease-out;
  }
  .cs-hero-visual { opacity: calc(1 - var(--scroll) * .6); }
}
.cs-star { filter: drop-shadow(0 0 18px rgba(201, 166, 103, 0.35)); }
.cs-hero.is-cta-ativo .cs-star { filter: drop-shadow(0 0 30px rgba(201, 166, 103, 0.7)); }
.cs-hero.is-cta-ativo .cs-lines path { stroke: rgba(201, 166, 103, 0.7); transition: stroke .4s ease; }

@keyframes cs-star-in {
  from { opacity: 0; transform: scale(.72) rotate(-30deg); filter: blur(8px); }
  to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
@keyframes cs-fade { to { opacity: 1; } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes cs-drift { 0%, 100% { transform: translate(0, 0); opacity: .35; } 50% { transform: translate(6px, -8px); opacity: .8; } }

@media (min-width: 900px) {
  .cs-hero-grid { grid-template-columns: 1.15fr .85fr; }
  .cs-hero-visual { order: 0; max-width: 460px; }
}

/* ---------- Conteúdo informativo ---------- */
.cs-info { padding-bottom: 24px; }
.cs-block { padding-block: clamp(36px, 6vw, 72px); border-top: 1px solid var(--border); }
.cs-block h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); max-width: 26ch; margin-bottom: 24px; }
.cs-areas { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cs-areas article { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; background: var(--bg-elevated); }
.cs-areas h3 { font-size: 1.1rem; margin-bottom: 6px; }
.cs-areas p, .cs-steps li, .cs-about p, .cs-faq p { color: var(--text-muted); }
.cs-steps { display: grid; gap: 14px; padding-left: 1.2em; max-width: 70ch; }
.cs-steps b { color: var(--text); }
.cs-about p { max-width: 70ch; margin-bottom: 12px; }
.cs-about a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cs-faq { display: grid; gap: 10px; max-width: 760px; }
.cs-faq details { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 18px; background: var(--bg-elevated); }
.cs-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; min-height: 48px; }
.cs-faq summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 4px; }
.cs-faq details p { padding-bottom: 16px; }
.cs-final-cta { margin-top: 28px; }
@media (min-width: 720px) { .cs-areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cs-areas { grid-template-columns: repeat(3, 1fr); } }
@media print { .cs-hero, .cs-info { display: none !important; } }
.cs-about a { display: inline-flex; align-items: center; min-height: 44px; }

/* Celular: o botão principal precisa aparecer na primeira tela. */
@media (max-width: 480px) {
  .cs-hero-copy { display: flex; flex-direction: column; }
  .cs-hero h1 { font-size: 1.85rem; }
  .cs-hero-lead { font-size: .98rem; margin-top: 12px; }
  .cs-hero-actions { order: 3; margin-top: 20px; }
  .cs-hero-actions .btn { width: 100%; justify-content: center; font-size: 1rem; padding: 16px 18px; }
  .cs-hero-list { order: 4; margin-top: 16px; }
}

/* 01/10: aviso de privacidade no momento da coleta (LGPD art. 9º) */
.privacy-note { font-size: .85rem; margin-top: 12px; text-align: center; }
.privacy-note a { color: inherit; text-decoration: underline; }