/* =====================================================
   style.css — Estilos globais + formulário público
   Design: limpo, mobile-first, sem framework externo
   Paleta: branco, cinza neutro, azul escuro, verde ação
   ===================================================== */

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #1a1f2e;
    background: #f4f6f9;
}

/* ---- Cores / tokens ---- */
:root {
    --brand:      #1a56db;
    --brand-dark: #1347b5;
    --success:    #0e9f6e;
    --danger:     #e02424;
    --text:       #1a1f2e;
    --text-muted: #6b7280;
    --border:     #d1d5db;
    --bg:         #f4f6f9;
    --card:       #ffffff;
    --radius:     8px;
    --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}

/* ---- Tipografia ---- */
h1, h2, h3 { line-height: 1.3; font-weight: 700; }
h1 { font-size: clamp(1.4rem, 4vw, 2rem); }
h2 { font-size: 1.15rem; color: var(--text); }
small { font-size: .82em; color: var(--text-muted); }
p    { margin-bottom: .75rem; }
a    { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.container {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---- Cabeçalho público ---- */
.site-header {
    background: var(--brand);
    color: #fff;
    padding: 2rem 0 1.5rem;
    margin-bottom: 2rem;
}
.site-header h1 { color: #fff; }
.site-header p  { color: rgba(255,255,255,.85); margin: .25rem 0 0; }
.header-logo {
    display: block;
    max-height: 72px;
    max-width: 220px;
    width: auto;
    margin-bottom: .75rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}

/* ---- Footer público ---- */
.site-footer {
    background: #1a1f2e;
    color: rgba(255,255,255,.6);
    padding: 1.25rem 0;
    font-size: .85rem;
    margin-top: 3rem;
    text-align: center;
}

/* ---- Alertas ---- */
.alert {
    padding: .85rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
    font-size: .93rem;
}
.alert-erro   { background: #fde8e8; border-color: #f8b4b4; color: #9b1c1c; }
.alert-sucesso{ background: #def7ec; border-color: #84e1bc; color: #03543f; }
.alert ul     { margin: .5rem 0 0 1.25rem; }

/* ---- Cards ---- */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow: hidden;
}
.card-header {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #f9fafb;
}
.card-header h2 { font-size: 1rem; color: var(--text-muted); font-weight: 600; }
.card-body  { padding: 1.25rem; }

/* ---- Formulário ---- */
.form-section {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--brand);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-size: .9rem; font-weight: 600; color: var(--text); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .95rem;
    color: var(--text);
    background: #fff;
    transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.form-group textarea { resize: vertical; min-height: 90px; }

/* Grids do formulário */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Checkboxes e radios */
.checkbox-group, .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-top: .2rem;
}
.checkbox-label, .radio-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-weight: 400;
    font-size: .95rem;
    padding: .35rem .6rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #f9fafb;
    transition: background .12s, border-color .12s;
}
.checkbox-label:has(input:checked),
.radio-label:has(input:checked) {
    background: #e8f0fe;
    border-color: var(--brand);
    color: var(--brand);
}
.checkbox-label input, .radio-label input { accent-color: var(--brand); }

/* Segunda opção (details) */
.segunda-opcao {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.segunda-opcao summary {
    padding: .75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    color: var(--brand);
    background: #f0f4ff;
    user-select: none;
}
.segunda-opcao summary:hover { background: #e8f0fe; }
.segunda-opcao > div { padding: 0 1rem 1rem; }

/* Obrigatório */
.obrigatorio { color: var(--danger); }

/* Ações do formulário */
.form-actions {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0 2rem;
}

/* ---- Botões ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .52rem 1.1rem;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}
.btn-sm  { padding: .3rem .7rem; font-size: .82rem; }
.btn-lg  { padding: .7rem 1.8rem; font-size: 1rem; }

.btn-primary  { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); text-decoration: none; color:#fff; }
.btn-secondary{ background: #fff; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #f3f4f6; text-decoration: none; }
.btn-ghost    { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: #f3f4f6; text-decoration: none; }
.btn-danger   { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #c81e1e; text-decoration: none; color:#fff; }

/* ---- Página de obrigado ---- */
.obrigado-box {
    max-width: 480px;
    margin: 4rem auto;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: 3rem 2rem;
    text-align: center;
}
.obrigado-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.obrigado-box h1 { margin-bottom: .75rem; }

/* ---- Textos utilitários ---- */
.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }