/* Planos residenciais */
.planos-residenciais {
    background-color: #f88d2f;
    padding: 50px 30px 30px;
    box-shadow: inset 0 0 50px 25px rgba(0, 0, 0, 0.3);
    
}

.separador {
    background-color: #4b4f58;
    height: 1px;
    width: 25vw;
}

.pr-texto {
    display: flex;
    justify-content: center;
    align-items: center;
}

#pr-texto-azul {
    color: #355583;
    font-size: 2rem;
    font-weight: bold;
}

.texto-cima,
.texto-baixo {
    font-size: 1.2rem;
    padding: 20px;
}

.container-valores-planos-residenciais {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
    padding: 30px 100px;
}

.quadro-planos {
    display: none;
    justify-content: center;
    align-items: center;
}

@media (max-width: 550px) {
    .planos-residenciais {
        padding: 20px 15px;
    }

    .titulo {
        text-align: center;
    }

    .pr-texto {
        text-align: center; /* Centraliza o texto */
    }

    .texto-cima h1,
    .texto-cima h2,
    .texto-baixo h3,
    .texto-baixo h4 {
        font-size: 1.5rem; /* Ajuste o tamanho do texto */
    }

    #pr-texto-azul {
        font-size: 1.7rem; /* Ajuste o tamanho para o subtítulo */
    }

    .separador {
        width: 50%; /* Deixa o separador menor */
        margin: 0 auto; /* Centraliza o separador */
    }

    .container-valores-planos-residenciais {
        display: none;
        justify-content: center; /* Centraliza os planos */
        align-items: center;
        flex-wrap: wrap;
        gap: 20px; /* Diminui o espaçamento entre as imagens */
        padding: 20px 0;
    }

    .quadro-planos {
        display: flex;
        scale: .85;
    }

    .container-valores-planos-residenciais img {
        max-width: 90%; /* Limita a largura das imagens para caber bem na tela */
        height: auto; /* Garante que a altura das imagens se ajuste proporcionalmente */
        scale: 1;
    }
}