html, body { height: 100%; }
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--sh-navy);
}

.sh-navbar { background: #fff; box-shadow: 0 1px 0 rgba(11, 57, 84, 0.08); }

.sh-hero {
    background: linear-gradient(135deg, var(--sh-navy) 0%, #0d4a6b 45%, var(--sh-teal) 100%);
    color: #fff;
}
.sh-hero .display-4 { font-weight: 800; letter-spacing: -0.5px; }

/* Botão coral via sistema de variáveis do Bootstrap, para o hover/focus/active
   manterem fundo e texto legíveis (o .btn:hover do Bootstrap depende dessas vars). */
.btn-coral {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sh-coral);
    --bs-btn-border-color: var(--sh-coral);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef5d3c;
    --bs-btn-hover-border-color: #e2542f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d94e2c;
    --bs-btn-active-border-color: #cc4926;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sh-coral);
    --bs-btn-disabled-border-color: var(--sh-coral);
}

.btn-outline-light-2 { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-light-2:hover { background: #fff; color: var(--sh-navy); }

.sh-feature-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; background: var(--sh-areia); color: var(--sh-coral);
}

.sh-section { padding: 4.5rem 0; }
.text-coral { color: var(--sh-coral); }
.text-teal { color: var(--sh-teal); }
.bg-areia { background: var(--sh-areia); }

.sh-footer { background: var(--sh-navy); color: rgba(255,255,255,.75); }

.card-cadastro { max-width: 640px; }