/* ============================================================
   RESPONSIVE · 2 RANGOS
   ------------------------------------------------------------
   Móvil:      320px – 1023px
   Escritorio: 1024px en adelante
   ============================================================ */

@media (max-width: 1023px) {
    /* ---------- Layout ---------- */
    .container { padding: 0 20px; }
    section { padding: 48px 0; }

    /* ---------- Navbar ---------- */
    .navbar { padding: 12px 0; }
    .navbar_logo_img { width: 38px; height: 38px; }

    .navbar_toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        transition: background .2s, color .2s, transform .2s;
    }
    .navbar_toggle:hover { background: rgba(190,57,102,.18); }
    .navbar_toggle.is-active {
        background: var(--primary);
        color: var(--white);
        transform: rotate(90deg);
    }

    .navbar_menu {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: rgba(251, 220, 231, .98);
        backdrop-filter: blur(12px);
        padding: 8px 0;
        border-bottom: 1px solid rgba(121, 52, 78, .08);
        box-shadow: 0 16px 32px rgba(121, 52, 78, .12);
        z-index: 95;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height .35s ease, opacity .25s ease, visibility .25s;
    }
    .navbar_menu.is-open {
        max-height: 420px;
        opacity: 1;
        visibility: visible;
    }
    .navbar_menu a {
        padding: 14px 24px;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(121, 52, 78, .06);
        transition: background .2s, color .2s;
    }
    .navbar_menu a:last-child { border-bottom: none; }
    .navbar_menu a:hover,
    .navbar_menu a:focus-visible {
        background: rgba(190, 57, 102, .08);
        color: var(--primary);
    }

    .navbar_backdrop {
        position: fixed;
        inset: 0;
        background: rgba(61, 43, 31, .35);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
        z-index: 90;
    }
    .navbar_backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------- Inicio ---------- */
    .inicio { padding: 32px 0 48px; }
    .inicio_title { font-size: clamp(2rem, 9vw, 3rem); margin-bottom: 24px; }
    .inicio_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-bottom: 40px;
    }
    .inicio_video_frame { aspect-ratio: 9/16; }
    .inicio_content { gap: 28px; }
    .inicio_presentacion_title,
    .inicio_historia_title { font-size: 1.35rem; }
    .inicio_presentacion p,
    .inicio_historia p { font-size: 0.95rem; }

    .inicio_clientes_title { font-size: 1.2rem; margin-bottom: 14px; }
    .clientes_strip_item { flex: 0 0 76px; }
    .inicio_clientes_note { font-size: 0.8rem; }

    /* ---------- Sección títulos ---------- */
    .section_title { font-size: 1.6rem; margin-bottom: 10px; }
    .section_intro { font-size: 0.9rem; margin-bottom: 24px; }
    .eyebrow { font-size: 0.68rem; letter-spacing: 2px; }

    /* ---------- Categorías ---------- */
    .categoria { padding: 36px 0; }
    .categoria_destacada,
    .categoria_eventos { padding: 28px 20px; }
    .categoria_title { font-size: 1.35rem; }
    .categoria_desc { font-size: 0.9rem; }
    .categoria_actions { flex-direction: column; align-items: stretch; }
    .categoria_actions .btn { width: 100%; }

    /* ---------- Carruseles ---------- */
    .carousel { gap: 6px; }
    .carousel_arrow { display: none; }
    .carousel_track { gap: 14px; padding: 6px 0 14px; }
    .product_card { flex: 0 0 65vw; }
    .product_card_image { aspect-ratio: 2/3 ;}

    /* ---------- Pedidos ---------- */
    .bloque { padding: 26px 0; }
    .bloque_title { font-size: 1.2rem; }
    .bloque p { font-size: 0.92rem; }

    .sabores { gap: 20px; }
    .tabla th, .tabla td { padding: 12px 14px; font-size: 0.86rem; }
    .banner { font-size: 0.85rem; padding: 16px 18px; }
    .nota { font-size: 0.85rem; padding: 12px 16px; }
    .policies_list li { font-size: 0.86rem; }
    .lista li { font-size: 0.88rem; }

    /* ---------- Contacto ---------- */
    .contacto_cta { margin-bottom: 36px; }
    .contacto_cta_text { font-size: 1.15rem; }
    .contacto_redes,
    .contacto_ubicacion,
    .contacto_horarios { padding: 20px 0; }
    .social { gap: 10px; }
    .social_link { width: 46px; height: 46px; }

    /* ---------- Footer ---------- */
    .footer { padding: 40px 0 16px; }
    .footer_inner { grid-template-columns: 1fr; gap: 22px; margin-bottom: 22px; }
    .footer_brand_block { gap: 12px; }
    .footer_logo { height: 50px; }
    .footer_brand { font-size: 1.25rem; }
    .footer_tagline { font-size: 0.82rem; }
    .footer_links a { font-size: 0.85rem; }
    .footer_copy { font-size: 0.72rem; padding-top: 18px; }

    /* ---------- WhatsApp flotante ---------- */
    .whatsapp_float {
        width: 54px;
        height: 54px;
        bottom: 18px;
        right: 18px;
    }
    .whatsapp_float svg { width: 22px; height: 22px; }

    /* ---------- Botones ---------- */
    .btn { min-height: 46px; font-size: 0.9rem; padding: 12px 22px; }
    .btn_lg { padding: 16px 28px; font-size: 0.98rem; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    section { padding: 40px 0; }

    .inicio_title    { font-size: 1.9rem; }
    .section_title    { font-size: 1.4rem; }
    .categoria_title { font-size: 1.25rem; }

    .product_card { flex: 0 0 78vw; }

    .navbar_logo_img { width: 42px; height: 42px; }
}

@media (max-width: 650px) {
    .guia_cortar_grid {
        grid-template-columns: minmax(0, 280px);
        gap: 30px; 
    }
}

@media (min-width: 1024px) {
    /* ---------- Navbar ---------- */
    .navbar_menu   { display: flex; }
    .navbar_toggle { display: none; }

    /* ---------- Inicio: 2 columnas ---------- */
    .inicio_grid {
        grid-template-columns: 380px minmax(0, 1fr);
        gap: 56px;
        align-items: start;
    }
    .inicio_video_frame { aspect-ratio: 3/4; }
    .clientes_strip_item { flex: 0 0 120px; }

    /* ---------- Carrusel ---------- */
    .product_card { flex: 0 0 320px; }

    /* ---------- Sabores: 3 columnas ---------- */
    .sabores { grid-template-columns: repeat(3, 1fr); }

    /* ---------- Categorías: más aire ---------- */
    .categoria { padding: 56px 0; }
    .categoria_destacada { padding: 48px 40px; }
    .categoria_eventos { padding: 48px 40px; }

    /* ---------- Contacto ---------- */
    .contacto_redes,
    .contacto_ubicacion,
    .contacto_horarios { padding: 28px 0; }

    /* ---------- Footer ---------- */
    .footer_inner {
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
    }
}