:root {
    --fundo: #f3f5f9;
    --cartao: #ffffff;
    --texto: #152033;
    --suave: #5b6779;
    --borda: #d5dbe5;
    --marca: #0f4c81;
    --marca-escura: #0b3a63;
    --marca-clara: #e8f0f8;
    --erro: #b3261e;
    --erro-fundo: #fdecea;
    --ok: #17663a;
    --ok-fundo: #e6f4ec;
    --raio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.pagina {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

/* ---------- Cabeçalho ---------- */
.topo {
    background: linear-gradient(135deg, var(--marca) 0%, var(--marca-escura) 100%);
    color: #fff;
    border-radius: var(--raio);
    padding: 28px 28px 26px;
    margin-bottom: 20px;
}
.topo h1 { margin: 8px 0 6px; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.01em; }
.topo p  { margin: 0; opacity: .9; font-size: .95rem; }
.topo .req { color: #ffd27a; }
.selo {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .16);
    padding: 3px 10px;
    border-radius: 99px;
}

/* ---------- Cartões ---------- */
.cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px 24px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(21, 32, 51, .04);
}
.cartao h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borda);
    font-size: 1.05rem;
}
.cartao h2 span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--marca);
    color: #fff;
    font-size: .8rem;
}

/* ---------- Grade e campos ---------- */
.grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.campo        { grid-column: span 2; min-width: 0; }
.campo.cheio  { grid-column: 1 / -1; }
.campo.largo  { grid-column: span 3; }
.campo.curto  { grid-column: span 1; }

fieldset { border: 0; margin: 0; padding: 0; }
fieldset.cheio { margin-bottom: 16px; }
.grade fieldset.cheio { margin-bottom: 0; }

label, legend {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
}
.req { color: var(--erro); font-weight: 700; }

input[type="text"], input[type="email"], input[type="tel"], select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fff;
    color: var(--texto);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #9aa4b2; }
input:focus, select:focus {
    outline: 0;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, .18);
}
.invalido input[type="text"], .invalido input[type="email"],
.invalido input[type="tel"], .invalido select {
    border-color: var(--erro);
    background: var(--erro-fundo);
}
.invalido .chip span { border-color: var(--erro); }

/* ---------- Opções (radio em formato de botão) ---------- */
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { margin: 0; cursor: pointer; font-weight: 500; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fff;
    font-size: .92rem;
    transition: background .15s, border-color .15s, color .15s;
}
.chip:hover span { border-color: var(--marca); }
.chip input:checked + span {
    background: var(--marca-clara);
    border-color: var(--marca);
    color: var(--marca-escura);
    font-weight: 600;
}
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(15, 76, 129, .25); }

/* ---------- Alertas ---------- */
.alerta {
    border-radius: var(--raio);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: .95rem;
}
.alerta ul { margin: 6px 0 0; padding-left: 20px; }
.alerta.ok   { background: var(--ok-fundo);   color: var(--ok);   border: 1px solid #b7dcc5; }
.alerta.erro { background: var(--erro-fundo); color: var(--erro); border: 1px solid #f3c1bd; }

/* ---------- Captcha ---------- */
.captcha { display: flex; justify-content: flex-end; margin-top: 20px; min-height: 65px; }

/* ---------- Ações ---------- */
.acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 20px;
}
.aviso { margin: 0; color: var(--erro); font-size: .9rem; font-weight: 600; }
.botao {
    height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 8px;
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.botao:hover  { background: var(--marca-escura); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid rgba(15, 76, 129, .35); outline-offset: 2px; }
.botao:disabled { opacity: .6; cursor: wait; }

.rodape { margin-top: 24px; text-align: center; color: var(--suave); font-size: .82rem; }

/* Armadilha para robôs: fora da tela */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

[hidden] { display: none !important; }

/* ---------- Celular ---------- */
@media (max-width: 640px) {
    .pagina { padding: 16px 12px 32px; }
    .topo { padding: 22px 20px; }
    .topo h1 { font-size: 1.35rem; }
    .cartao { padding: 18px 16px 20px; }
    .grade { grid-template-columns: 1fr; }
    .campo, .campo.largo, .campo.curto { grid-column: 1 / -1; }
    .captcha { justify-content: center; }
    .acoes { flex-direction: column; align-items: stretch; }
    .botao { width: 100%; }
}