.secao-contador {
    width: min(1100px, calc(100% - 40px));
    margin: -15px auto 0;

    position: relative;
    z-index: 3;
}




.coracao {
    width: 72px;
    height: 66px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.coracao img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}





.contador-box {
    width: 100%;
    padding: 35px 45px 28px;

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 32px;

    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 22px 50px rgba(45, 104, 160, 0.18);

    backdrop-filter: blur(16px);
}






.casal {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 18px;
}






.pessoa {
    min-width: 220px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 18px;
}




.pessoa:not(.pessoa-direita) .nome {
    order: 1;
}

.pessoa:not(.pessoa-direita) img {
    order: 2;
}


.pessoa-direita {
    justify-content: flex-start;
}

.pessoa-direita img {
    order: 1;
}

.pessoa-direita .nome {
    order: 2;
}


.pessoa img {
    width: 115px;
    height: 115px;

    display: block;

    border: 5px solid white;
    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 8px 18px rgba(41, 94, 145, 0.2);
}


.nome {
    color: #397fc8;

    font-size: 22px;
    font-weight: 800;
}





.ligacao {
    display: none;
}





.centro {
    min-width: 130px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.centro strong {
    color: #203654;

    font-size: 27px;
    font-weight: 800;

    line-height: 1;
}


.centro strong span {
    font-size: 38px;
}






.info {
    margin-top: 30px;
    padding-top: 25px;

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

    border-top: 1px solid rgba(79, 145, 214, 0.25);
}





.info-item {
    min-height: 65px;
    padding: 0 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.info-item + .info-item {
    border-left: 1px solid rgba(79, 145, 214, 0.22);
}


.info-item strong {
    color: #203654;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.15;
}


.info-item > span {
    margin-top: 5px;

    color: #526984;

    font-size: 14px;
    font-weight: 500;
}


.info-item.destaque strong {
    color: #5e9fe2;
}






@media (max-width: 900px) {

    .casal {
        gap: 10px;
    }


    .pessoa {
        min-width: auto;
        gap: 12px;
    }


    .nome {
        font-size: 17px;
    }


    .pessoa img {
        width: 90px;
        height: 90px;
    }


    .centro {
        min-width: 110px;
    }


    .centro strong {
        font-size: 23px;
    }


    .centro strong span {
        font-size: 32px;
    }

}






@media (max-width: 700px) {

    .secao-contador {
        width: min(100%, calc(100% - 20px));
        margin-top: 10px;
    }


    .contador-box {
        padding: 28px 18px;
    }


    .casal {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;

        gap: 10px;
    }


    .pessoa {
        min-width: 0;

        flex-direction: column;
        gap: 8px;
    }




    .pessoa:not(.pessoa-direita) .nome {
        order: 1;
    }


    .pessoa:not(.pessoa-direita) img {
        order: 2;
    }


    

    .pessoa-direita {
        flex-direction: column;
    }


    .pessoa-direita img {
        order: 1;
    }


    .pessoa-direita .nome {
        order: 2;
    }


    .pessoa img {
        width: 75px;
        height: 75px;

        border-width: 4px;
    }


    .nome {
        font-size: 15px;
    }


    .centro {
        min-width: 90px;
    }


    .centro strong {
        font-size: 17px;
    }


    .centro strong span {
        font-size: 26px;
    }


.info {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
}

.info-item:nth-child(3) {
    border-left: none;
}

    .info-item strong {
        font-size: 21px;
    }


    .info-item > span {
        font-size: 13px;
    }

}




@media (max-width: 420px) {

    .contador-box {
        padding: 24px 12px;
    }


    .casal {
        gap: 6px;
    }


    .pessoa img {
        width: 63px;
        height: 63px;
    }


    .nome {
        font-size: 13px;
    }


    .centro {
        min-width: 72px;
    }


    .centro strong {
        font-size: 15px;
    }


    .centro strong span {
        font-size: 22px;
    }


    .info-item {
        padding: 0 8px;
    }


    .info-item strong {
        font-size: 18px;
    }


    .info-item > span {
        font-size: 12px;
    }

}