/* Lead Express — design system alinhado ao app Lead Comex de produção.
   Marca (Manual de marca 2022): navy #1E3264 (Pantone 2758 C) e verde #3CA537 (2272 C).
   Azul de ação #2563EB é a cor de interação, como nas telas do produto.
   Tipografia de UI: Inter. O logotipo entra como imagem, nunca como texto. */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url(assets/inter-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url(assets/inter-600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url(assets/inter-700.woff2) format('woff2'); }

:root {
  --navy: #1E3264;
  --verde: #3CA537;
  --azul: #2563EB;
  --azul-escuro: #1D4ED8;
  --azul-fraco: #EFF4FF;
  --vermelho: #B42318;
  /* verde escurecido o suficiente para texto branco passar em contraste AA */
  --whats: #0C6B58;
  --whats-claro: #0F7D66;

  --bg: #F7F8FA;
  --superficie: #FFFFFF;
  --borda: #E4E7EC;
  --borda-forte: #D0D5DD;
  --trilho: #F2F4F7;

  --txt: #101828;
  --txt-2: #667085;
  --txt-3: #98A2B3;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-alta: 0 12px 32px rgba(16, 24, 40, .12);
  --barra-h: 56px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2 { margin: 0; font-weight: 600; letter-spacing: -.011em; }
p { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Splash ─────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  background: linear-gradient(168deg, #24407C 0%, #1E3264 48%, #16264C 100%);
  transition: opacity .35s ease, visibility .35s;
}
.splash img { width: 60%; max-width: 300px; height: auto; }
.splash.saiu { opacity: 0; visibility: hidden; }
.splash-carregando { display: flex; gap: 6px; }
.splash-carregando i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  animation: pulsar 1.15s ease-in-out infinite;
}
.splash-carregando i:nth-child(2) { animation-delay: .16s; }
.splash-carregando i:nth-child(3) { animation-delay: .32s; }
@keyframes pulsar {
  0%, 80%, 100% { opacity: .3; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); background: var(--verde); }
}

/* ── Barra superior ─────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--barra-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 18px 0;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borda);
}
.barra-logo { width: 118px; height: auto; display: block; }
.selo {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--txt-2); background: var(--trilho);
  border-radius: 999px; padding: 4px 10px;
}

/* ── Layout ─────────────────────────────────────────────── */
.aba {
  max-width: 620px; margin: 0 auto;
  padding: 20px 16px calc(env(safe-area-inset-bottom) + 36px);
}
.titulo-tela { margin-bottom: 18px; }
.titulo-tela h1 { font-size: 21px; font-weight: 700; color: var(--navy); }
.titulo-tela p { margin-top: 5px; font-size: 13px; color: var(--txt-2); }

.nota { font-size: 12px; color: var(--txt-2); }
.nota-anonima { margin-top: 12px; text-align: center; color: var(--txt-3); }

/* só ocupa espaço quando a Cloudflare decide mostrar um desafio */
#turnstile:not(:empty) { margin-bottom: 12px; }

/* Honeypot. Fora da tela em vez de display:none — há bot que ignora campo
   oculto por display, e leitor de tela já é coberto pelo aria-hidden. */
.isca {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; opacity: 0;
}

/* ── Trilha de progresso ────────────────────────────────── */
.trilha { height: 3px; border-radius: 999px; background: var(--borda); overflow: hidden; margin-bottom: 16px; }
.trilha i { display: block; height: 100%; width: 0; background: var(--azul); transition: width .22s ease; }

/* ── Campos ─────────────────────────────────────────────── */
.campo { display: block; }
.campo-rotulo { display: block; font-size: 13px; font-weight: 500; color: var(--txt); margin-bottom: 6px; }
.campo-caixa {
  display: flex; align-items: center; gap: 9px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  padding: 0 12px;
  transition: border-color .12s, box-shadow .12s;
}
.campo-caixa:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
/* 16px é o mínimo: abaixo disso o iOS dá zoom automático ao focar o campo */
.campo-caixa input {
  flex: 1; min-width: 0; width: 100%;
  font: inherit; font-size: 16px; color: var(--txt);
  background: none; border: 0; outline: none;
  height: 42px; padding: 0;
}
.campo-caixa input::placeholder { color: var(--txt-3); }
.campo-aviso { display: block; font-size: 11.5px; color: var(--txt-3); margin-top: 5px; }

.campo.erro .campo-caixa { border-color: var(--vermelho); }
.msg-erro { display: none; font-size: 12px; font-weight: 500; color: var(--vermelho); margin-top: 7px; }
.campo.erro > .msg-erro, .pergunta.erro > .msg-erro { display: block; }

/* ── Perguntas ──────────────────────────────────────────── */
.pergunta {
  border: 1px solid var(--borda); border-radius: var(--r-md);
  background: var(--superficie); box-shadow: var(--sombra);
  margin: 0 0 12px; padding: 0;
  overflow: hidden;
}
.pergunta.erro { border-color: #FDA29B; }
/* float tira a legend do posicionamento especial do fieldset,
   senão o título fica sobre a borda, fora do cartão */
.pergunta legend { float: left; width: 100%; padding: 14px 16px 0; }
.pergunta-num {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 3px;
}
.pergunta-titulo { display: block; font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.pergunta-dica { display: block; font-size: 12px; color: var(--txt-2); margin-top: 3px; }
.pergunta > .msg-erro, .pergunta .campo { clear: both; margin: 0 16px 14px; }
.pergunta > .msg-erro { margin-top: -4px; }
/* respiro entre a última opção da lista e o campo de complemento */
.pergunta .campo-extra { margin-top: 15px; }

/* lista de opções: linhas densas divididas, dentro do próprio cartão */
.opcoes { clear: both; margin-top: 12px; }
.opcoes.lista { border-top: 1px solid var(--borda); }
.opcoes.lista .opcao {
  display: flex; align-items: center; gap: 11px;
  min-height: 46px; padding: 10px 16px;
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
}
.opcoes.lista .opcao:last-child { border-bottom: 0; }
.opcao input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.marca {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--borda-forte); background: var(--superficie);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.marca.radio { border-radius: 50%; }
.marca.check { border-radius: 5px; }
.marca::after { content: ''; opacity: 0; transition: opacity .12s; }
.marca.radio::after { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.marca.check::after {
  width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.opcao-texto { font-size: 14px; line-height: 1.3; }
.opcao:has(input:checked) { background: var(--azul-fraco); }
.opcao:has(input:checked) .opcao-texto { font-weight: 500; color: var(--azul-escuro); }
.opcao:has(input:checked) .marca { border-color: var(--azul); background: var(--azul); }
.opcao:has(input:checked) .marca::after { opacity: 1; }
.opcao:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--azul); }

/* segmentado: opções curtas e mutuamente exclusivas em uma linha */
.opcoes.segmentado {
  display: flex; gap: 6px;
  margin: 12px 16px 16px; padding: 4px;
  background: var(--trilho); border-radius: 10px;
}
.opcoes.segmentado .opcao {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 4px;
  border-radius: 7px; cursor: pointer;
  transition: background .14s, box-shadow .14s;
}
.opcoes.segmentado .opcao .marca { display: none; }
.opcoes.segmentado .opcao-texto {
  font-size: 13.5px; font-weight: 500; color: var(--txt-2); text-align: center;
}
.opcoes.segmentado .opcao:has(input:checked) {
  background: var(--superficie); box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
}
.opcoes.segmentado .opcao:has(input:checked) .opcao-texto { color: var(--azul-escuro); font-weight: 600; }

/* ── Botões ─────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600;
  min-height: 46px; padding: 12px 18px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none;
  transition: background .12s, opacity .12s;
}
.btn:active { transform: translateY(.5px); opacity: .9; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-largo { width: 100%; }
.btn-primario { background: var(--azul); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn-secundario { background: var(--superficie); color: var(--navy); border-color: var(--borda-forte); }
.btn-whats { background: var(--whats); color: #fff; }
.btn-whats:active { background: var(--whats-claro); }
#form > .btn-largo { margin-top: 4px; }

/* ── Resultado (bottom sheet) ───────────────────────────── */
.veu {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(16, 24, 40, .45);
  opacity: 0; transition: opacity .22s;
}
.veu.aberto { opacity: 1; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-height: 90vh; overflow-y: auto;
  background: var(--superficie);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sombra-alta);
  padding: 8px 16px 0;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.folha.aberto { transform: translateY(0); }
.folha-alca {
  display: block; width: 36px; height: 4px; margin: 0 auto 14px;
  background: var(--borda-forte); border-radius: 999px;
}
/* grudado no rodapé da folha: com 4 serviços sugeridos o botão de contato
   cairia abaixo da dobra, e ele é a ação principal da tela */
.folha-acoes {
  position: sticky; bottom: 0;
  display: grid; gap: 9px; margin-top: 16px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--superficie);
  box-shadow: 0 -10px 16px -10px rgba(16, 24, 40, .14);
}

.folha-etiqueta {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 6px;
}
.perfil-nome { font-size: 22px; font-weight: 400; color: var(--navy); line-height: 1.2; }
.perfil-nome b { font-weight: 700; }
.perfil-resumo { margin-top: 8px; font-size: 13.5px; color: var(--txt-2); }

.sugestoes { margin-top: 20px; }
.sugestoes-titulo {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--verde); margin-bottom: 9px;
}
.sugestao {
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--borda);
  border-left: 3px solid var(--verde); border-radius: var(--r-sm);
}
.sugestao-nome { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.sugestao-resumo { display: block; font-size: 12.5px; color: var(--txt-2); margin-top: 3px; }

.perfil-destaque {
  margin-top: 14px; padding: 12px 14px;
  font-size: 12.5px; color: var(--azul-escuro);
  background: var(--azul-fraco); border-radius: var(--r-sm);
}

/* ── Alerta flutuante ───────────────────────────────────── */
.alerta {
  position: fixed; left: 16px; right: 16px; z-index: 50;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  display: flex; align-items: center; gap: 9px;
  padding: 12px 15px; border-radius: 10px;
  background: #101828; color: #fff;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--sombra-alta);
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.alerta.visivel { opacity: 1; transform: translateY(0); }
.alerta::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--txt-3);
}
.alerta.ok::before { background: var(--verde); }
.alerta.ruim::before { background: #F97066; }

@media (min-width: 620px) {
  .folha { left: 50%; right: auto; width: 620px; transform: translate(-50%, 100%); }
  .folha.aberto { transform: translate(-50%, 0); }
  .alerta { left: 50%; right: auto; width: 588px; transform: translate(-50%, 8px); }
  .alerta.visivel { transform: translate(-50%, 0); }
}