/* Fichas da Direcional Vendas SPI. Celular primeiro; cores e fonte da marca (azul-noite, azul Direcional, vermelho de ação, Roboto). */
:root {
  --noite: #0a1f4d; --azul: #003ca5; --azul-escuro: #153b83; --vermelho: #d02f27;
  --fundo: #f3f6fb; --cartao: #ffffff; --linha: #c9d3e4; --texto: #14213d; --apoio: #4a5875;
  --erro: #b3261e; --erro-fundo: #fdecea; --ok: #1f6b45; --ok-fundo: #e4f2ea; --foco: #003ca5;
  --fonte: Roboto, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 17px; line-height: 1.45; }
[hidden] { display: none !important; }

.topo { background: var(--noite); color: #fff;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 22px max(16px, env(safe-area-inset-left, 0px)); }
.topo .dentro { max-width: 640px; margin: 0 auto; }
.topo img { height: 46px; width: auto; display: block; margin-bottom: 18px; }
.topo h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; font-weight: 800; text-wrap: balance; }
.topo p { margin: 0; color: #e1e8f8; font-size: 16px; max-width: 52ch; }

main { max-width: 640px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 20px 18px; margin-bottom: 16px; }
.cartao h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--noite); }
.cartao > p.ajuda { margin: 0 0 14px; color: var(--apoio); font-size: 15px; }

.campo { display: grid; gap: 6px; margin-top: 16px; }
.campo:first-of-type { margin-top: 8px; }
.campo > label, .campo > .rotulo { font-weight: 600; font-size: 16px; }
.campo .dica { color: var(--apoio); font-size: 14px; margin-top: -2px; }
input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; color: var(--texto);
  background: #fff; border: 1.5px solid var(--linha); border-radius: 10px; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--apoio) 50%), linear-gradient(135deg, var(--apoio) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus-visible, select:focus-visible, button:focus-visible, .opcoes label:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcoes { display: grid; gap: 8px; }
.opcoes label { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--linha); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 500; }
.opcoes input { width: 20px; height: 20px; accent-color: var(--azul); flex: none; margin: 0; }
.opcoes label:has(input:checked) { border-color: var(--azul); background: #eef3fc; }
.opcoes.lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erro-campo { color: var(--erro); font-size: 14px; font-weight: 600; }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro .opcoes label { border-color: var(--erro); }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
@media (max-width: 420px) { .duas { grid-template-columns: minmax(0, 1fr); } }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 22px; border: 0; border-radius: 27px;
  background: var(--vermelho); color: #fff; font: 800 18px var(--fonte); cursor: pointer; width: 100%; }
.botao:disabled { opacity: .6; cursor: wait; }
.botao.claro { background: #fff; color: var(--azul); border: 1.5px solid var(--azul); }
.acoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin-top: 8px; }
.acoes.so { grid-template-columns: minmax(0, 1fr); }

.progresso { display: flex; gap: 6px; margin: 0 0 14px; }
.progresso i { flex: 1; height: 6px; border-radius: 3px; background: var(--linha); }
.progresso i.feito { background: var(--azul); }
.passo-de { color: var(--apoio); font-size: 14px; margin: 0 0 4px; font-weight: 600; }

.aviso { border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; font-size: 16px; }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); border: 1px solid var(--erro); }
.aviso.info { background: #eef3fc; color: var(--azul-escuro); border: 1px solid #b9c9ea; }
.final { text-align: center; padding: 32px 20px; }
.final .marca { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-fundo); color: var(--ok); display: grid; place-items: center; margin: 0 auto 14px; font-size: 34px; font-weight: 900; }
.final h2 { font-size: 22px; }
.privacidade { color: var(--apoio); font-size: 13.5px; margin: 14px 2px 0; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .cartao { animation: surge .25s ease-out; } @keyframes surge { from { transform: translateY(6px); } to { transform: none; } } }