/* =====================================================
   CATALOGO – RESPONSIVIDADE MOBILE
   ===================================================== */
@media (max-width: 768px) {

    /* =========================
       CONTAINER
       ========================= */
    .catalogo-wrapper {
        padding: 16px;
        margin: 0;
    }

    /* =========================
       TÍTULO
       ========================= */
    .titulo {
        font-size: 22px;
        margin-bottom: 18px;
    }

    /* =========================
       TABS → SCROLL HORIZONTAL
       ========================= */
    .tabs-area {
        padding-left: 0;
        overflow-x: auto;
    }

    .categorias-tabs {
        display: flex;
        gap: 6px;
        padding-bottom: 8px;
        min-width: max-content;
    }

        .categorias-tabs .tab {
            font-size: 14px;
            padding: 8px 14px;
            white-space: nowrap;
            border-radius: 12px;
        }

            .categorias-tabs .tab.active {
                box-shadow: 0 2px 6px rgba(0,0,0,.12);
            }

                .categorias-tabs .tab.active::after {
                    display: none;
                }

    /* =========================
       CONTAINER CATÁLOGO
       ========================= */
    .catalogo-container {
        padding: 16px;
        border-radius: 12px;
    }

    /* =========================
       RESULTADO
       ========================= */
    .resultado-info {
        font-size: 12px;
        text-align: left;
        margin-bottom: 14px;
    }

    /* =========================
       GRID
       ========================= */
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* =========================
       CARD
       ========================= */
    .produto-card {
        border-radius: 12px;
    }

        .produto-card img {
            height: 140px;
        }

        .produto-card .icone {
            font-size: 12px;
            padding: 4px;
            top: 8px;
            right: 8px;
        }

    /* =========================
       TEXTO DO CARD
       ========================= */
    .card-body {
        padding: 12px;
    }

        .card-body .categoria {
            font-size: 12px;
            margin-bottom: 2px;
        }

        .card-body h3 {
            font-size: 15px;
            line-height: 1.3;
        }

        .card-body p {
            font-size: 13px;
            line-height: 1.4;
            margin-top: 4px;
        }
}

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

    .produtos-grid {
        grid-template-columns: 1fr;
    }

    .produto-card img {
        height: 180px;
    }

    .card-body h3 {
        font-size: 16px;
    }

    .card-body p {
        font-size: 14px;
    }
}