.modulo-ouvidoria {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    margin: 35px 0
}

.modulo-ouvidoria-header {
    background: #d56b3f url('../images/logo-leiloes.png') right center no-repeat;
    background-size: 266px 150px;
    display: flex;
    height: 150px;
    border-radius: 5px;
    width: 100%
}

.modulo-ouvidoria-header>span {
    color: #fff;
    font-size: 42px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin: auto
}

.modulo-ouvidoria-menu {
    width: 260px
}

.modulo-ouvidoria-conteudo {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
}

.modulo-ouvidoria-conteudo .joomla-article {
    margin: -20px 0
}

.modulo-ouvidoria-conteudo .custom-page {
    margin: -20px 0
}

.modulo-ouvidoria .menu-vertical {
    width: 100%;
    float: initial
}

.modulo-ouvidoria .menu-vertical>ul>li.active>a {
    background: rgb(196, 222, 235, 0.35);
}

.modulo-ouvidoria .menu-vertical>ul>li:hover {
    background: rgb(196, 222, 235, 0.35);
}

.modulo-ouvidoria .menu-vertical-item {
    background: none;
    padding-left: 10px;
}

.modulo-ouvidoria .menu-vertical>ul>li>a {
    height: auto;
    font-size: 0.85rem;
}

.cards-ouvidoria {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 3.125%;
    flex-wrap: wrap;
}

.card-ouvidoria {
    align-items: center;
    background-color: #eee;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    width: 17.5%;
    height: 11rem;
}

.card-ouvidoria-container {
    padding-right: 8%;
    padding-left: 8%;
}


.card-ouvidoria a {
    font-weight: bold;
    text-align: center;
}

.card-ouvidoria-legenda {
    font-size: .78rem;
    text-align: center;
}

/* TABLET (abaixo de 992px): menu vai para cima, 3 cards por linha */
@media (max-width: 992px) {
    .modulo-ouvidoria {
        flex-direction: column;
        /* Menu acima do conteúdo */
    }

    .modulo-ouvidoria-menu {
        width: 100%;
    }

    .cards-ouvidoria {
        gap: 5%;
        /* (100% - 3×30%) / 2 gaps = 5% */
    }

    .card-ouvidoria {
        width: 25%;
        /* 3 por linha */
    }
}

/* CELULAR (abaixo de 600px): 2 cards por linha */
@media (max-width: 600px) {
    .cards-ouvidoria {
        gap: 6%;
        /* (100% - 2×47%) / 1 gap = 6% */
    }

    .card-ouvidoria {
        width: 47%;
        /* 2 por linha */
        height: 13rem;
        /* Mais alto p/ caber o texto */
    }
}