/* ============================================================
   Marina Bay · Construttore — Formulário de Qualificação
   Paleta e tipografia do empreendimento; a Construttore aparece
   só na assinatura da saída.
   ============================================================ */

:root {
  /* Cores tiradas dos arquivos originais da marca (assets/MARINA BAY _LOGO_*) */
  --baia-profunda: #00384A;   /* azul escuro da marca — fundo dominante */
  --baia-noite: #002532;      /* um passo abaixo, para sombras e chapas */
  --baia-sage: #88A9A5;       /* azul claro da marca — apoio */
  --baia-verde: #1A5551;      /* verde da marca */
  --areia: #E3DDCD;           /* bege claro da marca — texto e CTA */

  /* O pôr do sol atravessa todas as imagens do empreendimento: é daí que sai
     o âmbar usado nos elementos de urgência (escassez, alerta, oferta). */
  --por-do-sol: #E0A458;

  --branco: #FFFFFF;
  --texto-claro: rgba(227, 221, 205, 0.82);
  --texto-fraco: rgba(227, 221, 205, 0.58);
  --verde-whatsapp: #25D366;
  --verde-whatsapp-escuro: #1EBE5A;
  --salmao-erro: #E8A18F;

  /* Superfícies de resposta (campos, cards) em sage translúcido; o bege fica
     reservado ao botão que faz avançar. A tela ensina em um olhar:
     sage = onde eu respondo, bege = onde eu clico para seguir. */
  --campo-fundo: rgba(136, 169, 165, 0.14);
  --campo-fundo-hover: rgba(136, 169, 165, 0.24);
  /* Sólido, não translúcido: sobre o azul profundo, o sage a 50% cai para
     ~2:1 de contraste — abaixo dos 3:1 que a WCAG 1.4.11 pede para o limite
     de um campo. Cheio, passa dos 3:1 e a borda realmente delimita. */
  --campo-borda: #4E7079;
  --campo-borda-foco: #88A9A5;
  --campo-anel: rgba(136, 169, 165, 0.22);

  --font-display: 'Marcellus', Georgia, serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Aceleração longa e freio curto: é o que dá o peso "caro" às transições */
  --ease-portal: cubic-bezier(0.76, 0, 0.24, 1);

  --raio: 5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* display:block/flex das classes vence a regra [hidden] do navegador —
   sem isto, campos e botões marcados com hidden continuam visíveis. */
[hidden] { display: none !important; }

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

body {
  font-family: var(--font-display);
  background-color: var(--baia-profunda);
  color: var(--branco);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============ CAMADAS DE FUNDO ============ */
/* A foto vive num único elemento fixo em vez de repetir no background de cada
   .screen: assim ela é decodificada uma vez só, não repinta a cada troca de
   tela, e sobra um elemento só para animar o afastamento lento da câmera. */
body::after {
  content: '';
  position: fixed;
  inset: -4%;
  z-index: 0;
  background:
    /* O degradê é agressivo a partir dos 40%: é exatamente onde a faixa do pôr
       do sol da foto cruza a tela, e é onde ficam o kicker e a pergunta. Mais
       claro que isto, o texto branco perde a leitura em cima da marina. */
    linear-gradient(to bottom,
      rgba(0, 37, 50, 0.32) 0%,
      rgba(0, 37, 50, 0.54) 24%,
      rgba(0, 37, 50, 0.86) 44%,
      rgba(0, 37, 50, 0.95) 64%,
      rgba(0, 29, 40, 0.98) 100%),
    url('assets/background.webp') center top / cover no-repeat,
    var(--baia-profunda);
  animation: bgDrift 38s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.09) translateY(-1.2%); }
}

/* Granulado sutil por cima de tudo: tira o aspecto "chapado" do degradê e
   disfarça o banding nas áreas escuras do céu. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Elos arredondados do caderno da marca, no canto superior direito */
.brand-ornament {
  position: fixed;
  top: -34px;
  right: -46px;
  width: 210px;
  height: 210px;
  z-index: 1;
  color: var(--areia);
  opacity: 0.09;
  pointer-events: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ============ LOGO ============ */
.logo { display: block; height: auto; }
.logo-small { width: 104px; }
.logo-connect { width: 148px; margin: 0 auto 30px; }
.logo-exit { width: 138px; margin: 0 auto 26px; }
/* Só na tela de entrada: o header com a logo pequena fica hidden até o fluxo
   começar, então esta é a única marca visível na primeira etapa. Anima direto
   ao pintar (sem gate de .cascade-in): a #branch já nasce .active no HTML e
   nunca passa por showScreen(), então cascade-in nunca seria aplicado a ela —
   mesma situação da .scarcity-fill mais abaixo. */
.logo-branch {
  width: 158px;
  margin: 0 auto 22px;
  animation: logoIn 0.9s var(--ease-smooth) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(-10px); letter-spacing: 0; filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ============ HEADER DO FLUXO ============ */
.flow-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  animation: headerIn 0.5s var(--ease-smooth) both;
}
@keyframes headerIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
.flow-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px 0;
  max-width: 480px;
  margin: 0 auto;
}
.step-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.step-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-claro);
}
/* Trocar de etapa reanima o rótulo, para o número não mudar sem aviso */
.step-label.tick { animation: labelTick 0.4s var(--ease-pop); }
@keyframes labelTick {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Aparece só na última etapa: quem respondeu cinco perguntas não abandona por
   uma sexta, desde que saiba que é a última. */
.step-nudge {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--por-do-sol);
  animation: labelTick 0.45s var(--ease-pop);
}

.progress-track {
  position: relative;
  height: 3px;
  background: rgba(227, 221, 205, 0.13);
  overflow: hidden;
}
.progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--baia-sage), var(--areia));
  transition: width 0.55s var(--ease-smooth);
}
/* Ponto de luz na cabeça da barra: dá direção ao avanço */
.progress-fill::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--areia);
  box-shadow: 0 0 10px 2px rgba(227, 221, 205, 0.75);
}

/* ============ PORTAL DE TRANSIÇÃO (glyph portal) ============
   A chapa escura cobre a viewport inteira, recortada por um glifo em forma de
   vela. Fechar = o recorte encolhe de 320vmax até o tamanho do glifo, engolindo
   a tela atual. Abrir = o mesmo recorte cresce de volta, revelando a próxima.
   As duas camadas de máscara se cancelam por `exclude`/`xor`: a primeira pinta
   tudo, a segunda fura o glifo. */
.portal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.portal.on { opacity: 1; visibility: visible; }

.portal-cover {
  /* Vela: base arredondada e ápice fino. É a forma que sobrou depois de testar
     a letra "M" da marca — um glifo tipográfico vira uma mancha ilegível abaixo
     de uns 30vmin, e o recorte passa boa parte da transição menor que isso. */
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C68 24 82 49 82 68c0 17-14 29-32 29S18 85 18 68C18 49 32 24 50 2Z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(136, 169, 165, 0.16) 0%, transparent 58%),
    linear-gradient(160deg, var(--baia-profunda) 0%, var(--baia-noite) 60%, #001B25 100%);

  -webkit-mask-image: linear-gradient(#000, #000), var(--glifo);
  mask-image: linear-gradient(#000, #000), var(--glifo);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: 100% 100%, 320vmax 320vmax;
  mask-size: 100% 100%, 320vmax 320vmax;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Vinheta que acompanha o portal: escurece as bordas enquanto o recorte está
   fechado e dá profundidade ao buraco, sem custar outra camada mascarada. */
.portal-rim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(70% 55% at 50% 50%, transparent 38%, rgba(0, 21, 30, 0.55) 100%);
}

.portal.closing .portal-cover { animation: portalClose 0.26s var(--ease-portal) forwards; }
.portal.opening .portal-cover { animation: portalOpen 0.38s var(--ease-portal) forwards; }
.portal.closing .portal-rim { animation: rimIn 0.26s ease-out forwards; }
.portal.opening .portal-rim { animation: rimOut 0.38s ease-in forwards; }

/* O recorte não para no glifo: fecha de vez nos últimos quadros. É essa fração
   de tela totalmente coberta que esconde a troca das telas — parando no glifo,
   o conteúdo trocaria à vista, dentro do buraco. */
@keyframes portalClose {
  0% { -webkit-mask-size: 100% 100%, 320vmax 320vmax; mask-size: 100% 100%, 320vmax 320vmax; }
  76% { -webkit-mask-size: 100% 100%, 26vmin 26vmin; mask-size: 100% 100%, 26vmin 26vmin; }
  100% { -webkit-mask-size: 100% 100%, 0 0; mask-size: 100% 100%, 0 0; }
}
@keyframes portalOpen {
  0% { -webkit-mask-size: 100% 100%, 0 0; mask-size: 100% 100%, 0 0; }
  22% { -webkit-mask-size: 100% 100%, 26vmin 26vmin; mask-size: 100% 100%, 26vmin 26vmin; }
  100% { -webkit-mask-size: 100% 100%, 320vmax 320vmax; mask-size: 100% 100%, 320vmax 320vmax; }
}
@keyframes rimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rimOut { from { opacity: 1; } to { opacity: 0; } }

/* Navegadores sem composição de máscara (Chrome < 120 sem o prefixo antigo,
   WebViews antigas): o portal vira uma cortina que atravessa a tela. Mesma
   duração, mesma leitura — só sem o recorte. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .portal-cover {
    -webkit-mask-image: none;
    mask-image: none;
    transform: translateX(-100%);
  }
  .portal.closing .portal-cover { animation: curtainIn 0.26s ease-in forwards; }
  .portal.opening .portal-cover { animation: curtainOut 0.38s ease-out forwards; }
  @keyframes curtainIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
  @keyframes curtainOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
}

/* Campo-proxy do teclado mobile: precisa ser focável, então não pode usar
   display:none nem visibility:hidden. font-size 16px evita o zoom do iOS. */
.kb-proxy {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  outline: none;
  opacity: 0;
  font-size: 16px;
  background: transparent;
  pointer-events: none;
  z-index: -1;
}

/* ============ TELAS ============ */
.form-container {
  position: relative;
  min-height: 100dvh;
  z-index: 2;
}

.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 24px 20px;
  flex-direction: column;
}
.screen.active { display: flex; }

.screen-question {
  justify-content: center;
  padding-top: 92px;
  padding-bottom: 46px;
}

/* Telas de campo digitável não centralizam verticalmente: em vários
   navegadores in-app (WhatsApp, Instagram) o teclado não encolhe a viewport de
   layout, e o conteúdo centralizado sobra um vão vazio entre o botão e o
   teclado. Alinhado ao topo, o conteúdo some atrás do teclado em vez disso. */
.screen-question:not(.has-cards) { justify-content: flex-start; }

/* Bloqueia cliques durante a transição (evita double-tap) */
.form-container.no-pointer { pointer-events: none; }

@media (min-width: 768px) {
  .screen { padding: 44px 20px; }
  .screen > *, .screen .exit-content {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

.tagline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-top: auto;
  padding-top: 18px;
}

/* ============ CASCATA DE ENTRADA/SAÍDA ============ */
/* Os elementos da tela não aparecem juntos: entram em sequência, de cima para
   baixo, para o olho ser conduzido até as opções em vez de ter que escolher
   por onde começar. */
@keyframes elemIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes elemOut {
  to { opacity: 0; transform: translateY(-14px); }
}
@keyframes imgReveal {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

.screen.has-cards.cascade-in .question-media,
.screen.has-cards.cascade-in .offer-panel {
  animation: imgReveal 0.5s var(--ease-smooth) both;
}
.screen.has-cards.cascade-in .question-kicker {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.10s;
}
.screen.has-cards.cascade-in .question-title {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.16s;
}
.screen.has-cards.cascade-in .option-card { animation: elemIn 0.38s ease-out both; }
.screen.has-cards.cascade-in .option-card:nth-child(1) { animation-delay: 0.24s; }
.screen.has-cards.cascade-in .option-card:nth-child(2) { animation-delay: 0.31s; }
.screen.has-cards.cascade-in .option-card:nth-child(3) { animation-delay: 0.38s; }
.screen.has-cards.cascade-in .option-card:nth-child(4) { animation-delay: 0.45s; }

.screen.has-cards.cascade-out .question-media,
.screen.has-cards.cascade-out .offer-panel,
.screen.has-cards.cascade-out .question-kicker {
  animation: elemOut 0.18s ease-in both;
}
.screen.has-cards.cascade-out .question-title {
  animation: elemOut 0.18s ease-in both;
  animation-delay: 0.03s;
}
.screen.has-cards.cascade-out .option-card { animation: elemOut 0.16s ease-in both; }
.screen.has-cards.cascade-out .option-card:nth-child(1) { animation-delay: 0.05s; }
.screen.has-cards.cascade-out .option-card:nth-child(2) { animation-delay: 0.08s; }
.screen.has-cards.cascade-out .option-card:nth-child(3) { animation-delay: 0.11s; }
.screen.has-cards.cascade-out .option-card:nth-child(4) { animation-delay: 0.14s; }

/* Telas de campo digitável. O .alert-panel fica de fora: ele aparece depois,
   com animação própria, e herdar a cascata daria duas animations concorrentes
   no mesmo elemento. */
.screen-question:not(.has-cards).cascade-in .question-kicker {
  animation: elemIn 0.38s ease-out both;
}
.screen-question:not(.has-cards).cascade-in .question-title {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.08s;
}
.screen-question:not(.has-cards).cascade-in .question-hint {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.14s;
}
.screen-question:not(.has-cards).cascade-in .input-group > .text-input,
.screen-question:not(.has-cards).cascade-in .input-group > .phone-row,
.screen-question:not(.has-cards).cascade-in .input-group > .currency-field {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.20s;
}
.screen-question:not(.has-cards).cascade-in .input-group > .trust-note {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.26s;
}
.screen-question:not(.has-cards).cascade-in .input-group > .btn {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.30s;
}
.screen-question:not(.has-cards).cascade-in .online-status {
  animation: elemIn 0.38s ease-out both;
  animation-delay: 0.36s;
}

/* ============ MÍDIA DA PERGUNTA ============ */
.question-media {
  position: relative;
  margin-bottom: 24px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 22px 48px -26px rgba(0, 12, 18, 0.95),
    0 0 0 1px rgba(227, 221, 205, 0.14);
}
.question-image {
  display: block;
  width: 100%;
  height: 196px;
  object-fit: cover;
  object-position: center;
}
/* Luz quente vinda do alto da foto, na direção do pôr do sol das imagens */
.question-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(224, 164, 88, 0.10) 0%, transparent 34%, rgba(0, 37, 50, 0.42) 100%);
}
@media (min-width: 768px) {
  .question-image { height: 236px; }
}

.media-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--areia);
  background: rgba(0, 37, 50, 0.6);
  border: 1px solid rgba(227, 221, 205, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Faixa de escassez sobre a base da foto: prova de que o empreendimento está
   vendendo, para reforçar a decisão de continuar. */
.scarcity-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 10px 12px 11px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(0, 37, 50, 0.42) 0%, rgba(0, 37, 50, 0.82) 100%);
  border: 1px solid rgba(227, 221, 205, 0.22);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.scarcity-top {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}
.scarcity-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--branco);
}
.scarcity-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--por-do-sol);
}
.scarcity-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(227, 221, 205, 0.18);
  overflow: hidden;
}
/* Preenche até 60% ao pintar a tela. Sem gate de .cascade-in pelo mesmo motivo
   da .logo-branch: a #branch nasce .active e nunca passa por showScreen(). */
.scarcity-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--baia-sage), var(--por-do-sol));
  animation: scarcityFill 1.2s var(--ease-smooth) 0.6s both;
}
@keyframes scarcityFill {
  from { width: 0%; }
  to { width: 60%; }
}
.scarcity-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%);
  animation: scarcityShine 2.8s ease-in-out 2s infinite;
}
@keyframes scarcityShine {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(220%); }
}

/* ============ TEXTO DAS PERGUNTAS ============ */
/* A sombra segura a leitura onde o título sobe até a parte clara da foto de
   fundo; some sozinha onde o degradê já escureceu. */
.question-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.42rem, 5.2vw, 2rem);
  color: var(--branco);
  line-height: 1.34;
  text-align: center;
  letter-spacing: 0.006em;
  margin-bottom: 28px;
  text-shadow: 0 2px 18px rgba(0, 27, 37, 0.7);
}

.question-kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
  color: var(--texto-fraco);
  margin-bottom: 11px;
}

.question-hint {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.55;
  text-align: center;
  color: var(--texto-claro);
  margin-top: -18px;
  margin-bottom: 26px;
}

/* ============ PAINEL DA OFERTA ============ */
/* Aparece uma vez, na pergunta do prazo, logo acima dela: o "quando você
   decidiria" precisa ser respondido com o valor já na cabeça. */
.offer-panel {
  position: relative;
  padding: 20px 18px 16px;
  margin-bottom: 26px;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(158deg, rgba(136, 169, 165, 0.20) 0%, rgba(0, 37, 50, 0.62) 62%);
  border: 1px solid rgba(227, 221, 205, 0.24);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 20px 46px -30px rgba(0, 12, 18, 0.95);
}
/* Brilho que atravessa o painel uma vez a cada ciclo — chama o olho para os
   números sem piscar nem animar o texto em si. */
.offer-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: -55%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(227, 221, 205, 0.16), transparent);
  animation: offerSheen 5s ease-in-out 1.4s infinite;
}
@keyframes offerSheen {
  0% { left: -55%; }
  45%, 100% { left: 125%; }
}

.offer-kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--por-do-sol);
  margin-bottom: 14px;
}

.offer-figures {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.offer-figure {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.offer-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, rgba(227, 221, 205, 0.32), transparent);
}
.offer-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.offer-value {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  line-height: 1.1;
  color: var(--areia);
  white-space: nowrap;
}
.offer-value small {
  font-size: 0.5em;
  margin-left: 3px;
  letter-spacing: 0.06em;
}
.offer-note {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--baia-sage);
}
.offer-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid rgba(227, 221, 205, 0.16);
  font-family: var(--font-sans);
  font-size: 0.67rem;
  line-height: 1.4;
  color: var(--texto-claro);
}
.offer-foot svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--por-do-sol);
}

/* ============ CARDS DE OPÇÃO ============ */
.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Quatro opções curtas na mesma tela: sem o aperto, a última fica atrás da
   dobra em telas de 667px de altura. */
.options-compact { gap: 9px; }
.options-compact .option-card { min-height: 54px; padding: 13px 16px; }

.option-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 16px;
  text-align: left;
  overflow: hidden;
  background: linear-gradient(135deg, var(--campo-fundo-hover) 0%, var(--campo-fundo) 62%);
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  color: var(--branco);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.24s var(--ease-smooth), border-color 0.24s ease,
              background 0.24s ease, box-shadow 0.24s ease;
}
/* Faixa lateral que cresce ao selecionar — sinal claro de "esta é a sua" */
.option-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--areia);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease-pop);
}
.option-card:active { transform: scale(0.975); }
.option-card.selected {
  border-color: var(--areia);
  background: linear-gradient(135deg, rgba(227, 221, 205, 0.20) 0%, rgba(227, 221, 205, 0.06) 62%);
  box-shadow: 0 0 30px -6px rgba(227, 221, 205, 0.4);
  transform: translateY(-2px);
}
.option-card.selected::before { transform: scaleY(1); }

@media (hover: hover) {
  .option-card:hover {
    border-color: var(--campo-borda-foco);
    background: linear-gradient(135deg, rgba(136, 169, 165, 0.32) 0%, rgba(136, 169, 165, 0.18) 62%);
    transform: translateY(-2px);
  }
}

.option-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 7px;
  border-radius: 50%;
  /* Pastilha escura sobre o card já esverdeado: sem ela o ícone sumiria, já
     que o fundo do card é do mesmo tom do traço. */
  background: rgba(0, 37, 50, 0.55);
  color: var(--baia-sage);
  transition: background 0.24s ease, color 0.24s ease, transform 0.3s var(--ease-pop);
}
.option-icon svg { width: 100%; height: 100%; }
.option-card.selected .option-icon {
  color: var(--baia-profunda);
  background: var(--areia);
  transform: rotate(-6deg) scale(1.06);
}

.option-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.option-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.015em;
  line-height: 1.35;
}
.option-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--texto-fraco);
}

/* Cards de planta: a metragem entra como número, não como texto — é o dado
   que a pessoa compara entre as duas opções. */
.option-card-plan { min-height: 78px; }
.option-metric {
  flex-shrink: 0;
  min-width: 62px;
  font-family: var(--font-display);
  font-size: 1.62rem;
  line-height: 1;
  color: var(--areia);
  transition: color 0.24s ease, transform 0.3s var(--ease-pop);
}
.option-metric small {
  font-size: 0.42em;
  margin-left: 2px;
  color: var(--baia-sage);
}
.option-card.selected .option-metric { transform: scale(1.06); }

/* Etiqueta de raridade da cobertura (2 unidades no edifício inteiro) */
.option-card-rare { padding-top: 22px; }
.option-flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 11px 5px;
  border-bottom-left-radius: var(--raio);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.57rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baia-noite);
  background: var(--por-do-sol);
}

.check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--areia);
  color: var(--baia-profunda);
  display: none;
}
.check-icon svg { width: 100%; height: 100%; }
.option-card.selected .check-icon {
  display: block;
  animation: checkPop 0.34s var(--ease-pop);
}
@keyframes checkPop {
  from { transform: scale(0) rotate(-45deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ============ BOTÕES ============ */
.btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 24px;
  min-height: 56px;
  border-radius: var(--raio);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn:active { transform: scale(0.97); }

/* Brilho que atravessa o botão a cada ciclo — chama o toque sem piscar */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: btnSheen 3.6s ease-in-out 1.2s infinite;
}
@keyframes btnSheen {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}

.btn-primary {
  background: var(--areia);
  color: var(--baia-profunda);
  border: 1px solid var(--areia);
  box-shadow: 0 8px 26px -14px rgba(227, 221, 205, 0.95);
}
.btn-secondary {
  background: transparent;
  color: var(--areia);
  border: 1px solid rgba(227, 221, 205, 0.42);
}
.btn-secondary:active { background: rgba(227, 221, 205, 0.08); }

/* Par de botões do alerta: mais baixos e lado a lado. O espaçamento entre
   letras cede aqui — "Sim, teria" não cabe em 320px com o tracking padrão. */
.btn-compact {
  min-height: 48px;
  padding: 13px 8px;
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}

/* CTA final: verde do WhatsApp, porque o próximo passo É o WhatsApp */
.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--verde-whatsapp);
  border-color: var(--verde-whatsapp);
  color: var(--branco);
  box-shadow: 0 8px 26px -14px rgba(37, 211, 102, 0.9);
  animation: btnPulseGreen 2.4s ease-in-out 1.2s infinite;
}
/* O sheen bege não combina com o verde, que já pulsa por conta própria */
.btn-whatsapp::after { content: none; }
.btn-whatsapp:active { background: var(--verde-whatsapp-escuro); }
.btn-whatsapp-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
@keyframes btnPulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}

/* CTA final do lead. Herda o bege do .btn-primary — e o sheen junto — porque
   ele não pode se anunciar como "o botão do WhatsApp": para quem responde, é
   só a etapa seguinte do formulário. */
.btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.btn-arrow {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  /* Empurrão sutil para a direita, no mesmo ciclo do sheen: dá o sentido de
     avanço que o "→" dos outros botões dá parado. */
  animation: arrowNudge 2.8s ease-in-out 1.4s infinite;
}
@keyframes arrowNudge {
  0%, 82%, 100% { transform: translateX(0); }
  88% { transform: translateX(4px); }
}

/* Botão em verificação: o passo espera a resposta da Evolution API */
.btn.btn-checking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--baia-verde);
  border-color: var(--baia-verde);
  color: var(--branco);
  box-shadow: none;
  pointer-events: none;
  cursor: progress;
  animation: none;
}
.btn.btn-checking::after { content: none; }

.btn-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  animation: spin 0.8s linear infinite;
}
.btn-spinner circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 42;
  stroke-dashoffset: 14;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ CAMPOS DE TEXTO ============ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.input-group-reveal {
  margin-top: 14px;
  animation: elemIn 0.42s var(--ease-smooth);
}

.text-input {
  width: 100%;
  padding: 16px;
  min-height: 58px;
  background: var(--campo-fundo);
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--branco);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.text-input::placeholder { color: rgba(227, 221, 205, 0.45); }
.text-input:focus {
  border-color: var(--campo-borda-foco);
  background: var(--campo-fundo-hover);
  box-shadow: 0 0 0 3px var(--campo-anel);
}
.text-input.invalid {
  border-color: var(--salmao-erro);
  box-shadow: 0 0 0 3px rgba(232, 161, 143, 0.16);
  animation: fieldShake 0.4s ease;
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

.input-error {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--salmao-erro);
  margin-top: -6px;
}

/* Linha de confiança na etapa do telefone — é onde a desistência acontece */
.trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--texto-fraco);
}
.trust-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--baia-sage);
}

/* WhatsApp: DDI fixo + DDD + número em três colunas.
   Separar DDD e número existe para a verificação na Evolution API: ela só
   aceita o número exato, e um campo único mascarado deixa o lead errar a
   contagem de dígitos (comer o 9, colar com o 55 junto) sem perceber.
   O prefixo é um span (não um .text-input) para não roubar o foco automático
   do teclado mobile, que mira o primeiro .text-input da tela — que passa a ser
   o DDD, exatamente onde a digitação deve começar. */
.phone-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.phone-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.phone-field-ddi,
.phone-field-ddd { flex-shrink: 0; }
.phone-field-number { flex: 1; }

/* É o rótulo que diz "com o 9", não o placeholder — que some no instante em
   que a pessoa começa a digitar. */
.phone-label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  white-space: nowrap;
  user-select: none;
}

/* Largura fixa em "ch" para caber 2 dígitos centralizados sem esticar */
.input-ddd {
  width: 5.2ch;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  letter-spacing: 0.08em;
}

.ddi-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 14px;
  min-height: 58px;
  background: var(--campo-fundo);
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--texto-claro);
  white-space: nowrap;
  user-select: none;
}

/* ============ CAMPO DE MOEDA (entrada disponível) ============ */
/* O "R$" e o check são irmãos do input dentro da moldura, e não pseudo-
   elementos, para o input continuar sendo o primeiro .text-input da tela — é
   ele que o foco automático do teclado mobile procura. */
.currency-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  min-height: 78px;
  background: var(--campo-fundo);
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.currency-field:focus-within {
  border-color: var(--campo-borda-foco);
  background: var(--campo-fundo-hover);
  box-shadow: 0 0 0 3px var(--campo-anel);
}
.currency-field.ok {
  border-color: rgba(37, 211, 102, 0.6);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12);
}
.currency-field.warn {
  border-color: rgba(224, 164, 88, 0.7);
  box-shadow: 0 0 0 3px rgba(224, 164, 88, 0.14);
}
.currency-field.shake { animation: fieldShake 0.4s ease; }

.currency-prefix {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--texto-claro);
  user-select: none;
}
/* O input de moeda perde a moldura: quem desenha a borda é o .currency-field */
.currency-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  min-height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  letter-spacing: 0.01em;
}
.currency-input:focus {
  background: transparent;
  box-shadow: none;
}
.field-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background: var(--verde-whatsapp);
  color: var(--branco);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.3s var(--ease-pop);
}
.field-check svg { width: 100%; height: 100%; }
.currency-field.ok .field-check { opacity: 1; transform: scale(1); }

/* ============ ALERTA DA ENTRADA MÍNIMA ============ */
.alert-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 18px 16px;
  border: 1px solid rgba(224, 164, 88, 0.4);
  border-radius: var(--raio);
  background: linear-gradient(160deg, rgba(224, 164, 88, 0.13), rgba(224, 164, 88, 0.03));
  text-align: center;
  animation: alertIn 0.44s var(--ease-pop) both;
}
@keyframes alertIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.alert-icon {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  color: var(--por-do-sol);
  background: rgba(224, 164, 88, 0.14);
  animation: alertPulse 2.2s ease-in-out infinite;
}
.alert-icon svg { width: 100%; height: 100%; }
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 164, 88, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(224, 164, 88, 0); }
}
.alert-text {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--branco);
}
.alert-text strong {
  font-weight: 600;
  color: var(--por-do-sol);
  white-space: nowrap;
}
/* Selo de reforço: destaca o parcelamento sem competir com os botões de
   decisão logo abaixo — por isso um chip, não outro texto corrido, que a
   pessoa já vai pular a essa altura do alerta. */
.alert-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.4);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--verde-whatsapp);
}
.alert-highlight svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.alert-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

/* ============ PROVA SOCIAL (corretor on-line) ============ */
.online-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-claro);
}
.online-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--verde-whatsapp);
  animation: onlinePulse 1.8s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); opacity: 0.75; }
}

/* ============ SAÍDA (sem a entrada mínima) ============ */
.screen-exit {
  justify-content: center;
  text-align: center;
}
/* Sem min-height aqui: o bloco é curto e esticá-lo até a altura da tela só
   abriria um vão entre o botão e a assinatura. Quem centraliza é a .screen. */
.exit-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.screen-exit .tagline { margin-top: 34px; }
.exit-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  line-height: 1.25;
  margin-bottom: 18px;
}
.exit-note {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--texto-claro);
  border-top: 1px solid rgba(227, 221, 205, 0.22);
  border-bottom: 1px solid rgba(227, 221, 205, 0.22);
  padding: 18px 4px;
  margin-bottom: 28px;
}

/* ============ OVERLAY DE CONEXÃO ============ */
/* Cobre a última pergunta enquanto a API decide o corretor da vez e o Pixel
   sai. Não é uma conclusão: a pessoa não interage, só espera o WhatsApp abrir. */
.connect-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  background:
    radial-gradient(90% 60% at 50% 38%, rgba(136, 169, 165, 0.16) 0%, transparent 62%),
    linear-gradient(170deg, rgba(0, 56, 74, 0.94) 0%, rgba(0, 21, 30, 0.985) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: overlayIn 0.42s var(--ease-smooth) both;
}
@keyframes overlayIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; }
}
.connect-inner {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: elemIn 0.5s var(--ease-smooth) 0.1s both;
}

.connect-ring {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 26px;
}
.connect-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-track {
  fill: none;
  stroke: rgba(227, 221, 205, 0.16);
  stroke-width: 3;
}
.ring-arc {
  fill: none;
  stroke: var(--areia);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 327;       /* 2πr, r = 52 */
  stroke-dashoffset: 245;      /* arco de ~25% girando */
  transform-origin: 60px 60px;
  animation: ringSpin 1.15s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* Corretor confirmado: o arco fecha e o check toma o lugar do giro */
.connect-ring .connect-check {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  color: var(--verde-whatsapp);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.4s var(--ease-pop);
}
.connect-overlay.ready .ring-arc {
  stroke: var(--verde-whatsapp);
  stroke-dashoffset: 0;
  animation: none;
}
.connect-overlay.ready .connect-check { opacity: 1; transform: scale(1); }

.connect-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5.4vw, 1.6rem);
  line-height: 1.32;
  color: var(--branco);
  margin-bottom: 9px;
}
.connect-sub {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--texto-claro);
  margin-bottom: 22px;
}
.connect-track {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(227, 221, 205, 0.15);
  overflow: hidden;
  margin-bottom: 16px;
}
.connect-bar {
  height: 100%;
  width: 0%;
  background: var(--verde-whatsapp);
  transition: width 0.2s linear;
}
.connect-manual {
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--areia);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============ VIEWPORTS BAIXAS ============ */
/* Telas de 640–700px de altura (iPhone SE, Android de entrada, e qualquer
   celular com a barra do navegador in-app comendo 100px). A tela mais alta do
   formulário é a do prazo — painel da oferta + quatro opções — e sem este
   aperto a última opção cai abaixo da dobra, onde ninguém rola para achar. */
@media (max-height: 700px) {
  .screen-question {
    padding-top: 78px;
    padding-bottom: 22px;
  }
  .question-image { height: 148px; }
  .question-media { margin-bottom: 18px; }
  .question-kicker { margin-bottom: 7px; }
  .question-title { margin-bottom: 18px; }
  .logo-branch { width: 132px; margin-bottom: 10px; }

  .offer-panel {
    padding: 14px 14px 12px;
    margin-bottom: 18px;
  }
  .offer-kicker { margin-bottom: 10px; }
  .offer-foot {
    margin-top: 11px;
    padding-top: 10px;
  }

  .options { gap: 10px; }
  .option-card { min-height: 56px; padding: 13px 14px; }
  .options-compact { gap: 8px; }
  .options-compact .option-card { min-height: 48px; padding: 11px 14px; }
  .option-card-plan { min-height: 68px; }
}

/* ============ ACESSIBILIDADE ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Sem animação o portal não tem função nenhuma — e pior: com as keyframes
     zeradas a chapa ficaria opaca e sem recorte durante os 640ms que o JS
     reserva para a transição, um apagão no meio do formulário. Fora de cena,
     a troca das telas vira um corte seco, que é o comportamento certo aqui. */
  .portal { display: none !important; }
  /* A barra de escassez tem width: 0% na regra base e só chega aos 60% pela
     animação — que acabou de ser zerada. Sem isto, ela apareceria vazia. */
  .scarcity-fill { width: 60%; }
}