/* ============================================================
   Landing page de doação — /doe
   Estilos específicos. Cores reaproveitam as variáveis do site
   (main.css): --hcb-azul-escuro, --hcb-azul-claro, --hcb-cinza.
   ============================================================ */

.pagina-doe .doe-section--cinza {
    background-color: rgb(var(--bg-secao-noticia));
}

.pagina-doe p {
    font-size: 18px;
}

/* ---------------- Hero ---------------- */
.doe-hero {
    background: linear-gradient(135deg, rgb(var(--hcb-azul-escuro)) 0%, rgb(var(--hcb-azul-claro)) 100%);
}

.doe-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .12), transparent 45%);
    pointer-events: none;
}

.doe-hero__lead {
    max-width: 640px;
}

/* ---------------- Números / Estatísticas ---------------- */
.doe-stat {
    background-color: rgb(var(--bg-secao-noticia));
    border: 1px solid rgba(var(--hcb-azul-escuro), .08);
    transition: transform .3s var(--animation-cubic), box-shadow .3s var(--animation-cubic);
}

.doe-stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(var(--hcb-azul-escuro), .12);
}

.doe-stat__num {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.1;
}

.doe-stat__label {
    font-size: 1.1rem;
    line-height: 1.3;
}

.doe-stat__sub {
    font-size: .9rem;
    line-height: 1.3;
}

/* ---------------- Ícones circulares ---------------- */
.doe-icon {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    background-color: rgba(var(--hcb-azul-escuro), .1);
}

.doe-icon--light {
    background-color: rgba(255, 255, 255, .18);
    color: #fff;
}

.doe-icon-sm {
    font-size: 1.5rem;
    flex: 0 0 auto;
    line-height: 1;
    margin-top: .15rem;
}

/* ---------------- Cards genéricos ---------------- */
.doe-pilar,
.doe-frente,
.doe-forma {
    border: 1px solid rgba(var(--hcb-azul-escuro), .08);
    transition: transform .3s var(--animation-cubic), box-shadow .3s var(--animation-cubic);
}

.doe-pilar:hover,
.doe-frente:hover,
.doe-forma:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(var(--hcb-azul-escuro), .12);
}

/* Pilares (História e Missão) — fundo no azul do site */
.doe-pilar {
    background-color: rgb(var(--hcb-azul-escuro));
    border-color: rgba(var(--hcb-azul-claro), .35) !important;
}

/* Frentes (Como Sua Doação Pode Ajudar) — fundo branco para contrastar na seção cinza */
.doe-frente {
    background-color: rgb(var(--bg-body));
}

/* ---------------- Depoimentos ---------------- */
.doe-depoimento {
    border-left: 4px solid rgb(var(--hcb-azul-escuro));
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);
}

/* ---------------- Projetos (carrossel) ---------------- */
.swiper-projetos .swiper-slide {
    height: auto;
}

.doe-projeto {
    border: 1px solid rgba(var(--hcb-azul-escuro), .08);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);
    transition: transform .3s var(--animation-cubic), box-shadow .3s var(--animation-cubic);
}

.doe-projeto:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(var(--hcb-azul-escuro), .12);
}

.doe-projeto__img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.doe-projeto__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.doe-projeto__tag {
    font-size: .75rem;
    letter-spacing: .08em;
}

/* ---------------- Passos do processo ---------------- */
.doe-passo {
    background-color: rgb(var(--bg-secao-noticia));
    border-top: 4px solid rgb(var(--hcb-azul-escuro));
    transition: transform .3s var(--animation-cubic);
}

.doe-passo:hover {
    transform: translateY(-6px);
}

.doe-passo__num {
    font-size: 2.5rem;
    line-height: 1;
}

/* ---------------- Pessoa Jurídica (bloco azul) ---------------- */
.doe-forma-pj {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    transition: transform .3s var(--animation-cubic);
}

.doe-forma-pj:hover {
    transform: translateY(-6px);
    background-color: rgba(255, 255, 255, .12);
}

@media (max-width: 575.98px) {
    .doe-hero {
        text-align: center;
    }
}

/* Acessibilidade — respeitar preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    .pagina-doe .doe-stat,
    .pagina-doe .doe-pilar,
    .pagina-doe .doe-frente,
    .pagina-doe .doe-forma,
    .pagina-doe .doe-forma-pj,
    .pagina-doe .doe-passo,
    .pagina-doe .doe-projeto {
        transition: none;
    }

    .pagina-doe .doe-stat:hover,
    .pagina-doe .doe-pilar:hover,
    .pagina-doe .doe-frente:hover,
    .pagina-doe .doe-forma:hover,
    .pagina-doe .doe-forma-pj:hover,
    .pagina-doe .doe-passo:hover,
    .pagina-doe .doe-projeto:hover {
        transform: none;
    }
}