/* BLU · Página de captação (/blu). Só esta página carrega. Prefixo bl-.
   Identidade da BLU (mesma dos carrosséis): fundo branco, azul #0A7CFF, texto de apoio #415D80
   (nunca preto), Poppins para impacto (Black nos títulos, pesos mistos na mesma frase) e
   Creato Display para leitura. Fixa no claro: a marca não muda no modo escuro do aparelho.
   Celular primeiro: a resposta fica presa embaixo, ao alcance do polegar. */
@font-face { font-family: "Creato Display"; src: url("/fonts/CreatoDisplay-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("/fonts/CreatoDisplay-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }

body.bl-corpo {
  --bl-azul: #0A7CFF; --bl-azul-texto: #0B8AFF; --bl-apoio: #415D80; --bl-branco: #FFFFFF;
  --bl-tinta: color-mix(in srgb, var(--bl-azul) 6%, #FFFFFF);      /* balão da BLU */
  --bl-linha: color-mix(in srgb, var(--bl-azul) 22%, #FFFFFF);
  --bl-impacto: "Poppins", system-ui, sans-serif;
  --bl-leitura: "Creato Display", "Inter", system-ui, sans-serif;
  color-scheme: light;
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bl-branco); color: var(--bl-apoio); font-family: var(--bl-leitura);
}
.bl-largura { width: 100%; max-width: 560px; margin: 0 auto; padding-inline: var(--esp-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabeçalho de marca: BLU + linha + ✦ (igual aos carrosséis) e progresso */
.bl-topo { position: sticky; top: 0; z-index: 5; padding: var(--esp-4) 0 var(--esp-3);
  background: color-mix(in srgb, var(--bl-branco) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bl-cabecalho { display: flex; align-items: center; gap: var(--esp-3); }
.bl-marca { margin: 0; font: 900 20px/1 var(--bl-impacto); letter-spacing: .5px; color: var(--bl-azul); }
.bl-cabecalho hr { flex: 1; height: 2px; margin: 0; border: 0; background: var(--bl-azul); opacity: .25; }
.bl-brilho { font: 400 22px/1 var(--bl-impacto); color: var(--bl-azul); opacity: .9; }
.bl-barra { margin-top: var(--esp-3); height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--bl-azul) 14%, #FFFFFF); overflow: hidden; }
.bl-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bl-azul); transition: width var(--dur-entrada) var(--curva-saida); }
.bl-contagem { margin: var(--esp-2) 0 0; font: 500 12px/1.3 var(--bl-impacto); letter-spacing: .3px; color: var(--bl-apoio); opacity: .85; }

/* Abertura (hook): pontinho de marca + eyebrow + título com dois pesos */
.bl-hero { position: relative; padding-top: var(--esp-6); padding-bottom: var(--esp-2); }
.bl-ponto { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--bl-azul); margin-bottom: var(--esp-4); }
.bl-hero .bl-eyebrow { margin: 0 0 var(--esp-2); font: 600 12px/1.3 var(--bl-impacto); letter-spacing: 2px; text-transform: uppercase; color: var(--bl-azul-texto); opacity: .8; }
.bl-titulo { margin: 0; font: 400 clamp(30px, 8.6vw, 44px)/1.08 var(--bl-impacto); letter-spacing: -1.2px; color: var(--bl-azul); }
.bl-titulo strong { font-weight: 900; display: block; }
.bl-hero .bl-sub { margin: var(--esp-3) 0 0; font: 400 17px/1.45 var(--bl-leitura); color: var(--bl-apoio); max-width: 36ch; }

/* Conversa */
.bl-chat { flex: 1; display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-4); padding-bottom: var(--esp-6); }
.bl-balao { max-width: 85%; padding: var(--esp-3) var(--esp-4); border-radius: 22px; font: 400 16px/1.5 var(--bl-leitura);
  overflow-wrap: anywhere; animation: bl-entra var(--dur-padrao) var(--curva-entrada) both; }
.bl-balao small { display: block; margin-top: var(--esp-2); font: 400 13px/1.4 var(--bl-leitura); color: var(--bl-apoio); opacity: .8; }
.bl-blu { align-self: flex-start; background: var(--bl-tinta); color: var(--bl-apoio); border-bottom-left-radius: 6px; }
.bl-eu { align-self: flex-end; background: var(--bl-azul); color: #fff; border-bottom-right-radius: 6px; font: 500 15px/1.45 var(--bl-impacto); }
.bl-digitando { display: flex; gap: 6px; align-items: center; padding: 14px var(--esp-4); }
.bl-digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--bl-azul); opacity: .5; animation: bl-pula 1s ease-in-out infinite; }
.bl-digitando i:nth-child(2) { animation-delay: .15s; } .bl-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes bl-entra { from { opacity: 0; transform: translateY(var(--mov-desloc)); } to { opacity: 1; transform: none; } }
@keyframes bl-pula { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .bl-balao, .bl-digitando i { animation: none; } }

/* Resposta presa embaixo */
.bl-resposta { position: sticky; bottom: 0; z-index: 5; padding-top: var(--esp-3);
  padding-bottom: calc(var(--esp-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bl-branco) 78%, transparent); }
.bl-resposta:empty { padding: 0; }
.bl-linha { display: flex; gap: var(--esp-2); align-items: center; }
.bl-campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 var(--esp-4);
  border: 1.5px solid var(--bl-linha); border-radius: 999px; background: #fff; }
.bl-campo:focus-within { border-color: var(--bl-azul); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bl-azul) 14%, transparent); }
.bl-campo b { color: var(--bl-apoio); font-weight: 500; opacity: .7; }
.bl-campo input, .bl-campo input:focus, .bl-campo input:focus-visible { flex: 1; box-shadow: none; border-radius: 0; width: 100%; min-width: 0; border: 0; outline: 0;
  background: transparent; color: var(--bl-apoio); font: 400 var(--tam-campo-celular)/1.2 var(--bl-leitura); padding: 0; min-height: 50px; }
.bl-campo input::placeholder { color: var(--bl-apoio); opacity: .5; }
.bl-erro { margin: var(--esp-2) var(--esp-2) 0; font: 400 14px/1.4 var(--bl-leitura); color: #B4232F; }
.bl-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Botões da marca: pílula azul, Poppins */
.bl-corpo .btn-primario { background: var(--bl-azul); color: #fff; border: 0; font: 600 15px/1 var(--bl-impacto); letter-spacing: .2px;
  min-height: 52px; padding: 0 var(--esp-6); border-radius: 999px; box-shadow: 0 10px 24px color-mix(in srgb, var(--bl-azul) 30%, transparent); }
.bl-corpo .btn-primario:disabled { opacity: .6; box-shadow: none; }
.bl-corpo .btn-texto { color: var(--bl-azul-texto); font: 500 14px/1 var(--bl-impacto); }
.bl-enviar { flex: none; padding-inline: var(--esp-5) !important; }
.bl-pular { display: block; margin: var(--esp-1) auto 0; min-height: var(--toque-min); }

.bl-opcoes { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-2); }
.bl-opcao { max-width: 100%; min-height: 46px; padding: var(--esp-2) var(--esp-4); text-align: right;
  border: 1.5px solid var(--bl-azul); border-radius: 999px; background: #fff; color: var(--bl-azul-texto);
  font: 500 15px/1.3 var(--bl-impacto); cursor: pointer;
  transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease, transform var(--dur-rapida) ease; }
.bl-opcao:hover { background: var(--bl-tinta); }
.bl-opcao:active { transform: scale(var(--mov-escala-press)); }
.bl-opcao:focus-visible { outline: 3px solid color-mix(in srgb, var(--bl-azul) 30%, transparent); outline-offset: 2px; }
.bl-sim { min-height: 52px; }

/* Várias escolhas (serviços): etiquetas que quebram linha; marcada = azul cheio */
.bl-varios { align-items: stretch; }
.bl-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-2); }
.bl-chip { text-align: center; }
.bl-chip[aria-pressed="true"] { background: var(--bl-azul); color: #fff; }
.bl-chip[aria-pressed="true"]::before { content: "✓ "; }
.bl-varios .bl-sim { align-self: flex-end; margin-top: var(--esp-2); }
.bl-resposta:has(.bl-varios) { position: static; background: none; }

/* Encerramento: assinatura da marca */
.bl-fim { text-align: center; padding: var(--esp-4) 0 var(--esp-2); }
.bl-fim strong { display: block; font: 900 64px/1 var(--bl-impacto); letter-spacing: -3px; color: var(--bl-azul); }
.bl-fim span { display: block; margin-top: var(--esp-2); font: 500 13px/1.4 var(--bl-impacto); letter-spacing: .3px; color: var(--bl-apoio); opacity: .85; }

@media (min-width: 768px) {
  .bl-hero { padding-top: var(--esp-10); }
  .bl-balao { font-size: 17px; }
}