/*==========================================================
                APOIAR MHD PREMIUM
==========================================================*/

#doacoes{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    background:

    radial-gradient(
        circle at top left,
        rgba(255,255,255,.35),
        transparent 35%),

    radial-gradient(
        circle at bottom right,
        rgba(255,255,255,.18),
        transparent 45%),

    linear-gradient(
        135deg,
        #FFFDF8 0%,
        #FCF6E8 20%,
        #F8EBC8 50%,
        #F3E0A8 80%,
        #EFD68D 100%);

}

/*==========================================================
                ILUMINAÇÃO
==========================================================*/

#doacoes::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.45),

        transparent 72%

    );

    filter:blur(80px);

    pointer-events:none;

}

#doacoes::after{

    content:"";

    position:absolute;

    bottom:-220px;

    right:-180px;

    width:620px;

    height:620px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(212,164,55,.28),

        transparent 72%

    );

    filter:blur(90px);

    pointer-events:none;

}

/*==========================================================
                PADRÃO DE FUNDO
==========================================================*/

#doacoes .container{

    position:relative;

    z-index:2;

}

#doacoes .container::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(

        rgba(75,20,138,.045) 1px,

        transparent 1px

    );

    background-size:42px 42px;

    opacity:.45;

    pointer-events:none;

}

/*==========================================================
                CABEÇALHO
==========================================================*/

#doacoes h2{

    text-align:center;

    font-size:3.5rem;

    font-weight:800;

    color:#2B2142;

    line-height:1.15;

    margin-bottom:28px;

    position:relative;

}

#doacoes h2::after{

    content:"";

    display:block;

    width:100px;

    height:5px;

    margin:22px auto 0;

    border-radius:50px;

    background:

    linear-gradient(

        90deg,

        var(--purple),

        var(--gold)

    );

}

#doacoes .section-subtitle{

    max-width:950px;

    margin:0 auto 28px;

    text-align:center;

    color:#5E556B;

    font-size:1.18rem;

    line-height:2;

}

#doacoes p:not(.section-subtitle){

    max-width:980px;

    margin:0 auto;

    text-align:center;

    color:#6C6575;

    font-size:1.05rem;

    line-height:2;

}

/*==========================================================
                GRELHA
==========================================================*/

#doacoes .cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    margin-top:85px;

}

/*==========================================================
                SEPARADOR DECORATIVO
==========================================================*/

#doacoes .cards::before{

    content:"";

    grid-column:1/-1;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(75,20,138,.12),

        transparent

    );

    margin-bottom:25px;

}

/*==========================================================
                CARTÕES PREMIUM
==========================================================*/

#doacoes .card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    text-decoration:none;

    padding:45px 35px;

    border-radius:30px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.75);

    box-shadow:

    0 18px 45px rgba(75,20,138,.10);

    transition:.45s;

    isolation:isolate;

}

/*==========================================================
                EFEITO DE LUZ
==========================================================*/

#doacoes .card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.45),

        transparent 45%,

        rgba(212,164,55,.12)

    );

    opacity:0;

    transition:.45s;

}

#doacoes .card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    top:-140px;

    right:-120px;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.65),

        transparent 70%

    );

    opacity:0;

    transition:.45s;

}

/*==========================================================
                HOVER
==========================================================*/

#doacoes .card:hover{

    transform:

    translateY(-16px);

    border-color:

    rgba(212,164,55,.45);

    box-shadow:

    0 35px 80px rgba(75,20,138,.18);

}

#doacoes .card:hover::before{

    opacity:1;

}

#doacoes .card:hover::after{

    opacity:1;

}

/*==========================================================
                LOGÓTIPO
==========================================================*/

.apoio-logo{

    width:95px;

    height:95px;

    object-fit:contain;

    margin-bottom:30px;

    transition:.45s;

}

#doacoes .card:hover .apoio-logo{

    transform:

    scale(1.08)

    rotate(-4deg);

}

/*==========================================================
                TÍTULO
==========================================================*/

#doacoes .card h3{

    color:var(--purple);

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:18px;

    line-height:1.3;

}

/*==========================================================
                TEXTO
==========================================================*/

#doacoes .card p{

    color:#666;

    font-size:1rem;

    line-height:1.9;

    margin-bottom:28px;

}

/*==========================================================
                SETA
==========================================================*/

#doacoes .card::marker{

    display:none;

}

#doacoes .card .arrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    background:

    linear-gradient(

        135deg,

        var(--purple),

        #6D2CC5

    );

    color:#fff;

    margin-top:auto;

    transition:.35s;

}

#doacoes .card:hover .arrow{

    transform:

    translateX(8px);

    background:

    linear-gradient(

        135deg,

        var(--gold),

        #E5B740

    );

}

/*==========================================================
                BORDA SUPERIOR
==========================================================*/

#doacoes .card::selection{

    background:transparent;

}

#doacoes .card{

    border-top:5px solid transparent;

}

#doacoes .card:nth-child(1){

    border-top-color:#00A651;

}

#doacoes .card:nth-child(2){

    border-top-color:#FF9800;

}

#doacoes .card:nth-child(3){

    border-top-color:#1976D2;

}

#doacoes .card:nth-child(4){

    border-top-color:#6C2DBF;

}

/*==========================================================
                BOTÃO PRINCIPAL
==========================================================*/

#doacoes .btn.primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    padding:22px 52px;

    border-radius:70px;

    text-decoration:none;

    font-size:1rem;

    font-weight:700;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    var(--purple),
    #6D2CC5);

    box-shadow:
    0 22px 55px rgba(75,20,138,.22);

    transition:.4s;

}

#doacoes .btn.primary:hover{

    transform:
    translateY(-6px);

    background:
    linear-gradient(
    135deg,
    var(--gold),
    #E5B740);

    color:var(--purple);

    box-shadow:
    0 35px 70px rgba(212,164,55,.35);

}

/*==========================================================
                ANIMAÇÕES
==========================================================*/

@keyframes apoiarFadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

#doacoes h2{

    animation:apoiarFadeUp .7s ease both;

}

#doacoes .section-subtitle{

    animation:apoiarFadeUp .8s ease both;

}

#doacoes p:not(.section-subtitle){

    animation:apoiarFadeUp .9s ease both;

}

#doacoes .card{

    animation:apoiarFadeUp .8s ease both;

}

#doacoes .card:nth-child(1){

    animation-delay:.05s;

}

#doacoes .card:nth-child(2){

    animation-delay:.12s;

}

#doacoes .card:nth-child(3){

    animation-delay:.19s;

}

#doacoes .card:nth-child(4){

    animation-delay:.26s;

}

/*==========================================================
                RESPONSIVIDADE
==========================================================*/

@media (max-width:1200px){

    #doacoes .cards{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    #doacoes{

        padding:90px 0;

    }

    #doacoes h2{

        font-size:2.6rem;

    }

    #doacoes .section-subtitle{

        font-size:1.05rem;

    }

    #doacoes .cards{

        grid-template-columns:1fr;

        gap:25px;

    }

    #doacoes .btn.primary{

        width:100%;

    }

}

@media (max-width:480px){

    #doacoes h2{

        font-size:2rem;

    }

    #doacoes p{

        font-size:.95rem;

        line-height:1.8;

    }

    #doacoes .card{

        padding:35px 25px;

    }

    .apoio-logo{

        width:80px;

        height:80px;

    }

}

/*==========================================================
                DETALHES PREMIUM
==========================================================*/

#doacoes .card{

    will-change:transform;

}

#doacoes .card:hover{

    transition:all .35s ease;

}

#doacoes .card:hover h3{

    color:var(--gold);

}

#doacoes .card:hover p{

    color:#555;

}

#doacoes .card:hover .apoio-logo{

    filter:
    drop-shadow(
    0 12px 25px rgba(212,164,55,.30));

}

/*==========================================================
                ACABAMENTO
==========================================================*/

#doacoes .container{

    position:relative;

    z-index:2;

}

#doacoes *{

    position:relative;

}