/* ==========================================================================
   Plano Social — estilos partilhados
   A Home segue a referência azul-marinho/laranja enviada pelo cliente. A página
   Projeto Social mantém a sua estrutura, usando a mesma paleta e componentes.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[id], section[id], #orcamento { scroll-margin-top: 88px; }

:focus-visible {
    outline: 2px solid #C4550A;
    outline-offset: 2px;
}

/* ---------- Botões reutilizados na página adicional e no modal ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: .5rem;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.25rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary {
    background-color: #C4550A;
    color: #fff;
    border: 1px solid #C4550A;
    box-shadow: 0 4px 10px rgba(196, 85, 10, .18);
}
.btn-primary:hover { background-color: #A94807; border-color: #A94807; }
.btn-secondary {
    background-color: #fff;
    color: #10213A;
    border: 1px solid #D1D5DB;
}
.btn-secondary:hover { border-color: #C4550A; color: #A94807; }
.on-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.on-dark .btn-secondary:hover { border-color: #fff; }

.btn-whatsapp { background-color: #22C55E; color: #fff; border: 1px solid #22C55E; }
.btn-whatsapp:hover { background-color: #16A34A; border-color: #16A34A; }

/* ---------- Formulários ---------- */
.field {
    width: 100%;
    padding: .75rem 1rem;
    background-color: #fff;
    border: 1px solid #D1D5DB;
    border-radius: .5rem;
    font-size: 1rem;
    color: #111827;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: #9CA3AF; }
.field:focus {
    outline: none;
    border-color: #C4550A;
    box-shadow: 0 0 0 3px rgba(196, 85, 10, .14);
}
.field[aria-invalid="true"] { border-color: #B42318; }
.field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180,35,24,.14); }
.field-error { margin-top: .375rem; font-size: .8125rem; line-height: 1.25rem; color: #B42318; }
textarea.field { min-height: 6.5rem; resize: vertical; }

/* ---------- Componentes usados na página Projeto Social ---------- */
.text-link {
    color: #C4550A;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(196,85,10,.25);
    text-underline-offset: 4px;
}
.text-link:hover { text-decoration-color: currentColor; }
.on-dark .text-link { color: #F2A36B; text-decoration-color: rgba(242,163,107,.35); }
.on-dark .text-link:hover { color: #fff; text-decoration-color: #fff; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #C4550A;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background-color: #C4550A; }
.on-dark .eyebrow { color: #F2A36B; }
.on-dark .eyebrow::before { background-color: #F2A36B; }

.topbar a:hover { color: #fff; }
.nav-link { position: relative; padding: .375rem 0; white-space: nowrap; }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: #C4550A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
[aria-current="page"] { color: #10213A; font-weight: 600; }

.card {
    height: 100%;
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: .75rem;
    padding: 1.5rem;
}
@media (min-width: 640px) { .card { padding: 1.75rem; } }
.card--navy { border-top: 3px solid #10213A; }
.card--accent { border-top: 3px solid #C4550A; }

.form-shell.form-shell { border-top: 4px solid #C4550A; }

.service-icon {
    width: 40px;
    height: 40px;
    border-radius: .5rem;
    background-color: #10213A;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9375rem;
    flex-shrink: 0;
    transition: background-color .15s ease;
}
.service-row:hover .service-icon { background-color: #C4550A; }

.link-arrow i { font-size: .75em; margin-left: .375rem; transition: transform .15s ease; }
.link-arrow:hover i { transform: translateX(3px); }
.on-dark .link-accent { color: #F2A36B; text-decoration-color: rgba(242,163,107,.35); }
.on-dark .link-accent:hover { color: #fff; text-decoration-color: #fff; }
.note-accent.note-accent { border-left: 3px solid #C4550A; }

/* ---------- Linha de processo (página Projeto Social) ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding-left: 3.25rem; padding-bottom: 2.25rem; }
.step:last-child { padding-bottom: 0; }
.step::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 40px;
    bottom: 8px;
    width: 2px;
    background-color: #E5E7EB;
}
.step:last-child::before { display: none; }
.step-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 2px solid #10213A;
    background-color: #fff;
    color: #10213A;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-final .step-num { background-color: #C4550A; border-color: #C4550A; color: #fff; }
.on-dark .step::before { background-color: rgba(255,255,255,.22); }

@media (min-width: 1024px) {
    .steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 2.5rem; }
    .steps--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .step { padding-left: 0; padding-top: 3.25rem; padding-bottom: 0; }
    .step::before { left: 44px; right: calc(-2.5rem + 12px); top: 15px; bottom: auto; width: auto; height: 2px; }
    .btn.lg\:hidden { display: none; }
}
@media (min-width: 640px) { .btn.sm\:hidden { display: none; } }

[data-cooperative][hidden] { display: none !important; }

.footer-heading::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 2px;
    margin-top: .625rem;
    background-color: #C4550A;
}

.mobile-cta { transition: transform .2s ease; }
.mobile-cta.is-hidden { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
    .mobile-cta, .nav-link::after, .link-arrow i { transition: none; }
}

/* ---------- Ajustes Home: hero e processo ---------- */
.hero-highlight {
    min-width: 0;
    padding: .875rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .75rem;
    background: rgba(255,255,255,.05);
}
.hero-highlight__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
}
.hero-highlight p {
    margin-top: .4rem;
    color: #CBD5E1;
    font-size: .75rem;
    line-height: 1.2rem;
}

.process-card {
    position: relative;
    min-width: 0;
    height: 100%;
    padding: 4.25rem 1.5rem 1.75rem;
    border: 1px solid #DCE2E9;
    border-radius: 1rem;
    background: #fff;
    text-align: center;
}
.process-card__badge {
    position: absolute;
    left: 50%;
    top: 1.35rem;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateX(-50%);
    border: 3px solid #fff;
    border-radius: 9999px;
    background: #10213A;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16,33,58,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
}
.process-card h3 {
    margin-top: .75rem;
    color: #111827;
    font-size: 1rem;
    line-height: 1.4rem;
    font-weight: 700;
}
.process-card p {
    margin-top: .75rem;
    color: #6B7280;
    font-size: .875rem;
    line-height: 1.5rem;
}
.process-card--social {
    border-color: #BFE8D1;
    background: #F0FBF5;
}
.process-card__badge--social {
    background: #1FAF5A;
}

@media (max-width: 639px) {
    .hero-copy { font-size: .95rem; line-height: 1.6; }
    .hero-highlight { padding: .8rem .9rem; }
    .process-card { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ---------- Conteúdo legal ---------- */
.legal-copy {
    color: #475569;
    font-size: .975rem;
    line-height: 1.8;
}
.legal-copy h2 {
    color: #10213A;
    font-size: 1.2rem;
    line-height: 1.45;
    font-weight: 700;
    margin-bottom: .75rem;
}
.legal-copy p + p { margin-top: .8rem; }
.legal-copy ul {
    margin-top: .75rem;
    padding-left: 1.25rem;
    list-style: disc;
}
.legal-copy li + li { margin-top: .45rem; }
.legal-copy a {
    color: #A94807;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legal-copy a:hover { color: #C4550A; }