/* =========================
   PADRONES Y RECURSOS
========================= */
/* =========================
   TITULO
========================= */
.padron-title {
    text-align: center;
}

/* =========================
   CONTENEDOR
========================= */
.container-padron {

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 30px 20px;

    box-sizing: border-box;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 40px;

}

/* =========================
   TARJETA
========================= */
.menu-item {

    width: 160px;

    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    transition:
        transform .3s ease;

}

.menu-item:hover {

    transform:
        translateY(-5px);

}

/* =========================
   ICONO
========================= */
.icon-box {

    width: 110px;
    height: 130px;

    margin-bottom: 16px;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    border-radius:
        22px 0 22px 0;

    background: var(--guinda);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .12);

    transition:
        transform .3s ease,
        background .3s ease;

}

.icon-box:hover {

    transform:
        scale(1.06);

    background: var(--guinda);

}

.icon-box:focus-visible {

    outline:
        3px solid var(--dorado);

    outline-offset:
        4px;

}

/* =========================
   IMAGEN
========================= */
.icon-box img {

    width: 65%;

    height: auto;

    display: block;

    object-fit: contain;

    user-select: none;

    pointer-events: none;

    filter:
        brightness(0) invert(1);

}

/* =========================
   TEXTO
========================= */
.label {

    margin: 0;

    min-height: 40px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.35;

    color: var(--gris);

}

/* =========================
   TABLET
========================= */
@media(max-width:768px) {

    .container-padron {

        gap: 30px;

    }

    .menu-item {

        width: 140px;

    }

    .icon-box {

        width: 95px;
        height: 115px;

    }

}

/* =========================
   MOBILE
========================= */
@media(max-width:480px) {

    .container-padron {

        gap: 20px;

        justify-content: center;

    }

    .menu-item {

        width: 120px;

        min-height: 170px;

    }

    .icon-box {

        width: 85px;
        height: 100px;

    }

    .label {

        font-size: 13px;

    }

}