/* =========================================================
    RESPONSIVE GENERAL
========================================================= */

@media (max-width: 768px) {

    /* HERO */

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .logo {
        width: 120px;
        height: 120px;
    }


    /* PRODUCTOS */

    .productos {
        grid-template-columns: 1fr;
        padding: 15px;
    }


    /* CATEGORÍAS */

    .categorias {
        padding-left: 12px;
        padding-right: 12px;
    }


    /* WHATSAPP */

    .whatsapp {
        right: 15px;
        bottom: 15px;
    }


    /* PROMOCIÓN */

    .promo-card {
        width: 94vw;
    }

    .promo-imagen {
        height: 200px;
    }

    .carrito-panel {
        left: 14px;
        right: 14px;
        bottom: 76px;
        width: auto;
        max-height: min(46vh, 380px);
        padding: 12px;
        border-radius: 14px;
        font-size: .92rem;
    }

    .carrito-lista {
        gap: 6px;
    }

    .carrito-item {
        padding: 8px 0;
    }

    .carrito-datos {
        gap: 5px;
        margin-top: 8px;
    }

    .carrito-input,
    .carrito-nota {
        padding: 8px 10px;
        border-radius: 10px;
    }

    .carrito-nota {
        min-height: 54px;
    }

    .carrito-enviar {
        margin-top: 10px;
        padding: 10px 12px;
    }
}


/* =========================================================
    RESPONSIVE - TEMA ELEGANTE
========================================================= */

@media (max-width: 768px) {

    .tema-elegante .hero h1 {
        font-size: 2.7rem;
    }

    .tema-elegante .card {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 0;
    }

    .tema-elegante .card img {
        width: 100%;
        height: 220px;
    }

    .tema-elegante .card-content h3 {
        font-size: 1.6rem;
    }
}


/* =========================================================
    RESPONSIVE - TEMA FRESH
========================================================= */

@media (max-width: 768px) {

    .tema-fresh .logo {
        width: 150px;
        height: 150px;
    }

    .tema-fresh .hero h1 {
        font-size: 2.6rem;
    }

    .tema-fresh .productos {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* =========================================================
    RESPONSIVE - TEMA DARK
========================================================= */

@media (max-width: 768px) {

    .tema-dark .hero h1 {
        font-size: 2.6rem;
    }
}


/* =========================================================
    RESPONSIVE - TEMA GASTROBAR
========================================================= */

@media (max-width: 768px) {

    .tema-gastrobar .hero {
        min-height: 60vh;
    }

    .tema-gastrobar .hero h1 {
        font-size: 2.6rem;
    }

    .tema-gastrobar .card {
        flex-direction: column;
        align-items: flex-start;
    }

    .tema-gastrobar .card img {
        width: 100%;
        height: 220px;
    }

    .tema-gastrobar .productos {
        padding: 20px;
    }
}