/* =========================================================
   CATEGORÍAS DEL MENÚ
   ========================================================= */

.categorias-menu {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.categoria-btn {
    border: 2px solid #c62828;
    background: #ffffff;
    color: #c62828;

    padding: 10px 22px;

    border-radius: 30px;

    cursor: pointer;

    font-weight: bold;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.20s ease;
}

.categoria-btn:hover,
.categoria-btn.active {
    background: #c62828;
    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   TARJETAS DE PRODUCTOS DEL MENÚ
   ========================================================= */

.producto-card-menu {
    background: #ffffff;

    border-radius: 15px;

    overflow: hidden;

    height: 100%;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.producto-card-menu:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.13);
}


/* =========================================================
   CONTENEDOR DE LA IMAGEN

   La imagen siempre se mostrará completa.
   ========================================================= */

.producto-imagen {
    width: 100%;

    height: 230px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #ffffff;

    padding: 8px;
}


/* =========================================================
   IMAGEN DEL PRODUCTO

   IMPORTANTE:
   object-fit: contain evita que las imágenes se recorten.
   ========================================================= */

.producto-imagen img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain !important;

    object-position: center center !important;

    background: #ffffff;

    transform: none !important;

    transition: none;
}


/* =========================================================
   DESACTIVAR ZOOM DE LA IMAGEN
   ========================================================= */

.producto-card-menu:hover .producto-imagen img {
    transform: none !important;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.producto-contenido {
    padding: 20px;
}

.producto-categoria {
    display: inline-block;

    font-size: 12px;

    text-transform: uppercase;

    color: #c62828;

    font-weight: bold;

    margin-bottom: 5px;
}

.producto-contenido h3 {
    font-size: 22px;

    margin: 8px 0;

    font-weight: 700;
}

.producto-contenido p {
    color: #666666;

    min-height: 50px;

    line-height: 1.6;

    margin-bottom: 0;
}


/* =========================================================
   PRECIO Y BOTÓN
   ========================================================= */

.producto-footer {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-top: 20px;
}

.producto-footer strong {
    font-size: 21px;

    color: #c62828;
}

.btn-agregar-carrito {
    background: #c62828;

    color: #ffffff;

    border: none;

    padding: 10px 18px;

    border-radius: 30px;

    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.20s ease;
}

.btn-agregar-carrito:hover {
    background: #9e1f1f;

    transform: translateY(-1px);
}

.btn-agregar-carrito:disabled {
    opacity: 0.75;

    cursor: default;
}


/* =========================================================
   MENSAJES DEL MENÚ
   ========================================================= */

.menu-mensaje {
    width: 100%;

    padding: 35px 20px;

    text-align: center;

    color: #666666;
}


/* =========================================================
   RESPONSIVE
   TABLET / CELULAR
   ========================================================= */

@media (max-width: 767px) {

    .categorias-menu {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 8px;
    }


    .categoria-btn {
        flex: 0 0 auto;

        padding: 9px 18px;
    }


    .producto-imagen {
        width: 100%;

        height: 210px;

        display: flex;

        align-items: center;

        justify-content: center;

        overflow: hidden;

        background: #ffffff;

        padding: 8px;
    }


    .producto-imagen img {
        width: 100%;

        height: 100%;

        display: block;

        object-fit: contain !important;

        object-position: center center !important;

        transform: none !important;

        background: #ffffff;
    }


    .producto-contenido p {
        min-height: auto;
    }


    .producto-footer {
        flex-direction: column;

        align-items: stretch;
    }


    .producto-footer strong {
        text-align: center;
    }


    .btn-agregar-carrito {
        width: 100%;
    }

}


/* =========================================================
   RESPONSIVE
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 480px) {

    .producto-imagen {
        width: 100%;

        height: 195px;

        display: flex;

        align-items: center;

        justify-content: center;

        overflow: hidden;

        background: #ffffff;

        padding: 6px;
    }


    .producto-imagen img {
        width: 100%;

        height: 100%;

        display: block;

        object-fit: contain !important;

        object-position: center center !important;

        transform: none !important;

        background: #ffffff;
    }


    .producto-contenido {
        padding: 16px;
    }


    .producto-contenido h3 {
        font-size: 20px;
    }

}