.boxDoctor{
    width: 100%;
    height: 100%;
    max-width: 40rem;

    padding: 1rem;

    display: flex;
    gap: 1rem;

    border-radius: 1ch;
    background-color: white;

    border: 0.1rem solid var(--mainGray);
    box-shadow: 0 0 10px var(--mainGray);

    transition: border-color .1s ease,
                box-shadow .1s ease,
                transform .1s ease;
}
.boxDoctor .boxImg{
    width: 100%;
    max-width: 12rem;
    max-height: 17rem;

    overflow: hidden;

    border-radius: 1ch;
}
.boxDoctor .boxImg img{
    width: 100%;
    object-fit: cover;

    aspect-ratio: 2/3;
}
.boxDoctor .boxInfo{
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.boxDoctor .boxInfo *{
    font-family: var(--mainFontFamilyText);
}
.boxDoctor .boxInfo .name{
    color: var(--mainGreen);
    font-weight: 600;
    font-size: 1.1rem;
}
.boxDoctor .boxInfo .label{
    color: var(--mainBlackGray);
    font-size: .8rem;
}
.boxDoctor .boxInfo .text{
    color: var(--mainGreen);
    font-size: .8rem;
}
.boxDoctor .boxInfo .buttonToDoctor{
    width: 100%;
    height: fit-content;

    margin-top: auto;
    padding: 1rem 0;
    
    border: 0.1rem solid var(--mainGray);
    border-radius: 1ch;
    box-shadow: 0 0 10px var(--mainGray);
    background-color: white;

    text-align: center;

    font-family: var(--mainFontFamilyText);
    font-size: .8rem;
    font-weight: 700;
    color: var(--mainGreen);
    text-transform: uppercase;

    transition: border-color .1s ease,
                background-color .1s ease,
                color .1s ease,
                box-shadow .1s ease,
                transform .1s ease;
}

@media (hover: hover){
    .boxDoctor:hover{
        transform: scale(1.005);
        border-color: white;
        box-shadow: 0 0 15px var(--mainGreen);
    }

    .boxDoctor:has(.buttonToDoctor:hover){
        box-shadow: 0 0 15px var(--mainYellow)
    }

    .boxDoctor .boxInfo .buttonToDoctor:hover{
        border-color: var(--mainYellow);
        background-color: var(--mainYellow);
        color: white;
        box-shadow: 0 0 10px var(--mainYellow);
    }
    .boxDoctor .boxInfo .buttonToDoctor:active{
        transform: scale(.95);
    }
}
@media (hover: none) {
    .boxDoctor:has(.buttonToDoctor:active){
        box-shadow: 0 0 15px var(--mainYellow)
    }

    .boxDoctor .boxInfo .buttonToDoctor:active{
        border-color: var(--mainYellow);
        background-color: var(--mainYellow);
        color: white;
        box-shadow: 0 0 10px var(--mainYellow);
        transform: scale(.95);
    }
}