﻿ul.app-page-menu.ui-listview {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center; /* centraliza horizontalmente */
    align-items: center; /* centraliza verticalmente */
    gap: 24px; /* espaço entre as boxes */
    padding: 60px 20px;
    min-height: 60vh; /* centraliza verticalmente na viewport */
    list-style: none;
    margin: 0 auto;
}

/* define o tamanho e estilo uniforme dos cards */
li.app-depth1,
li.app-depth2,
li.app-depth3 {
    flex: 0 1 300px; /* largura fixa, mas ainda responsiva */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.25s ease;
    overflow: hidden;
}

    /* mesmo estilo pra todos, remove diferenças de borda */
    li.app-depth1.ui-first-child,
    li.app-depth1.ui-last-child {
        border-radius: 12px !important;
        border: 1px solid #ddd;
    }

    /* hover suave */
    li.app-depth1:hover,
    li.app-depth2:hover,
    li.app-depth3:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

    /* link dentro do card */
    li.app-depth1 > a,
    li.app-depth2 > a,
    li.app-depth3 > a {
        display: block;
        padding: 25px 15px !important;
        font-size: 1.1rem;
        color: #222;
        text-decoration: none;
    }
