/* =========================================================
       FONDO ORGÁNICO RÚSTICO
       ========================================================= */
    .ambient-background {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: #f7f3f0;
        background-image: 
            linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
            url('https://www.transparenttextures.com/patterns/parchment.png');
        background-attachment: fixed;
        z-index: -2;
    }

    .ambient-background::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(44, 61, 48, 0.05) 100%);
        pointer-events: none;
    }
/* =========================================================
   VARIABLES Y RESET PREMIUM
   ========================================================= */
    :root {
        --color-principal: #8C1C13; /* Rojo Sangiovese profundo */
        --color-secundario: #2C3D30; /* Verde Oliva Oscuro */
        --color-fondo: #FDFBF7; /* Crema/Pergamino cálido */
        --color-surface: #ffffff;
        --color-dorado: #D4AF37; /* Dorado sutil para acentos */
        
        --color-texto: #1a1a1a;
        --color-texto-claro: #5c5c5c;
        --color-blanco: #ffffff;
        
        --sombra-suave: 0 4px 20px rgba(0, 0, 0, 0.04);
        --sombra-fuerte: 0 15px 35px rgba(0, 0, 0, 0.1);
        --sombra-flotante: 0 10px 30px rgba(44, 61, 48, 0.15);
        
        --radio-borde: 12px; /* Menos curvo, más serio */
        --radio-pequeno: 6px;
        --radio-pildora: 100px;
        
        --fuente-principal: 'Inter', system-ui, -apple-system, sans-serif;
        --fuente-titulos: 'Playfair Display', serif;
        --animacion-suave: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: var(--fuente-principal);
   }
   
   body {
       background-color: transparent;
       color: var(--color-texto);
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
   }
   
   /* =========================================================
      FONDO DINÁMICO (Orbes Ambientales)
      ========================================================= */
   
   .ambient-background::before,
   .ambient-background::after {
       content: '';
       position: absolute;
       width: 60vw;
       height: 60vw;
       min-width: 500px;
       border-radius: 50%;
       filter: blur(140px);
       opacity: 0.6;
       animation: floatAmbient 25s infinite ease-in-out alternate;
       will-change: transform;
   }
   
   .ambient-background::before {
       background: radial-gradient(circle, rgba(193, 18, 31, 0.12) 0%, transparent 70%);
       top: -10vh;
       left: -10vw;
   }
   
   .ambient-background::after {
       background: radial-gradient(circle, rgba(0, 48, 73, 0.08) 0%, transparent 70%);
       bottom: -10vh;
       right: -10vw;
       animation-delay: -12s;
   }
   
   @keyframes floatAmbient {
       0% { transform: translate(0, 0) scale(1); }
       100% { transform: translate(15%, 15%) scale(1.3); }
   }
   
   /* =========================================================
    /* =========================================================
       HERO HEADER (Cabecera dinámica)
       ========================================================= */
    .header-hero {
        position: relative;
        padding: 6rem 1rem 8rem 1rem;
        text-align: center;
        color: white;
        background: linear-gradient(rgba(44,61,48,0.7), rgba(44,61,48,0.85)), 
                    url('https://images.unsplash.com/photo-1595295333158-4742f28fbd85?q=80&w=1200&auto=format&fit=crop');
        background-size: cover;
        background-position: center;
        margin-bottom: -40px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .header-hero::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 40px;
        background: linear-gradient(to bottom, transparent, var(--color-fondo));
        pointer-events: none;
    }
    
    .header-hero h1 {
         font-family: var(--fuente-titulos);
         font-style: italic;
        position: relative;
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .logo-hero {
        position: relative;
        width: 140px;
        height: 140px;
        object-fit: cover;
        border-radius: 50%;
        margin: 0 auto 0.5rem auto;
        border: 2px solid var(--color-dorado);
        box-shadow: 0 8px 30px rgba(0,0,0,0.4);
        display: block;
    }

    /* Estado del Local (Abierto/Cerrado) */
    .estado-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 1rem;
        border-radius: var(--radio-pildora);
        font-size: 0.85rem;
        font-weight: 700;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(5px);
        margin: 0.5rem 0 1rem 0;
        border: 1px solid rgba(255,255,255,0.2);
        transition: var(--animacion-suave);
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .punto-luz {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .estado-abierto { color: #52ff9a; border-color: rgba(82, 255, 154, 0.4); }
    .estado-cerrado { color: #ff5252; border-color: rgba(255, 82, 82, 0.4); }

    .estado-abierto .punto-luz { background: #52ff9a; animation: pulseGlow 2s infinite; box-shadow: 0 0 10px #52ff9a; }
    .estado-cerrado .punto-luz { background: #ff5252; }

    @keyframes pulseGlow {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.2); }
        100% { opacity: 1; transform: scale(1); }
    }

    /* =========================================================
         BANNERS PROMOCIONALES (Carrusel Mobile / Grid Desktop)
         ========================================================= */
    .promociones-wrapper {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        padding: 0.5rem 1.5rem 1.5rem 1.5rem;
        position: relative;
        top: -15px;
        z-index: 10;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }
    .promociones-wrapper::-webkit-scrollbar { display: none; }

    .promo-card {
        flex: 0 0 320px;
        height: 190px;
        border-radius: 24px;
        padding: 0;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 2px solid var(--color-dorado); /* Borde Principal Dorado */
        cursor: pointer;
    }

    /* Marco Interno (Doble Borde sofisticado) */
    .promo-card::before {
        content: '';
        position: absolute;
        top: 8px; left: 8px; right: 8px; bottom: 8px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 18px;
        z-index: 2;
        pointer-events: none;
    }

    /* Overlay de Gradiente Sólido (No Cristal) */
    .promo-card .overlay-promo {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
        z-index: 1;
    }

    .promo-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    }

    /* Badge de Oferta */
    .promo-card::after {
        content: 'OFERTA';
        position: absolute;
        top: 20px; right: 20px;
        background: var(--color-principal);
        color: white;
        font-size: 0.7rem;
        font-weight: 800;
        padding: 0.4rem 1rem;
        border-radius: 8px;
        z-index: 3;
    }

    .promo-content { 
        position: relative;
        z-index: 3; 
        padding: 1.5rem 1.8rem;
        width: 100%;
    }

    .promo-content h4 { 
        font-family: var(--fuente-titulos); 
        font-size: 1.5rem; 
        color: var(--color-dorado); 
        margin-bottom: 0.3rem;
        text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
    .promo-content p { 
        font-size: 0.9rem; 
        color: #fff; 
        line-height: 1.4;
        font-weight: 500;
    }
        line-height: 1.4;
        font-weight: 500;
    }
   
    /* =========================================================
       BUSCADOR INTELIGENTE (STICKY)
       ========================================================= */
    .contenedor-buscador {
        position: sticky;
        top: 0px;
        z-index: 1000;
        max-width: 1000px;
        margin: 0.5rem auto 1.5rem auto;
        padding: 0.5rem 1.5rem;
        background: transparent;
    }

    .buscador-wrapper {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: var(--radio-pildora);
        padding: 0.6rem 1rem 0.6rem 1.2rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 1px solid rgba(255,255,255,0.8);
        transition: var(--animacion-suave);
    }

    .search-icon { color: var(--color-secundario); opacity: 0.6; }
    #input-busqueda { border: none; background: transparent; width: 100%; font-size: 1rem; font-weight: 500; outline: none; }

    .btn-categorias-trigger {
        background: var(--color-secundario);
        color: white;
        border: none;
        padding: 0.6rem 1rem;
        border-radius: var(--radio-pildora);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--animacion-suave);
        flex-shrink: 0;
    }

    .mini-menu-cats {
        position: absolute;
        top: 100%; left: 1.5rem; right: 1.5rem;
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        padding: 1.2rem;
        display: none;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 0.8rem;
        z-index: 1001;
        margin-top: 5px;
        border: 1px solid rgba(0,0,0,0.05);
    }

    .mini-menu-cats.visible { display: grid; animation: slideUp 0.3s ease; }

    .btn-mini-cat {
        padding: 0.8rem;
        background: var(--color-fondo);
        border: 2px solid transparent;
        border-radius: 14px;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--animacion-suave);
        color: var(--color-secundario);
    }
    .btn-mini-cat:hover { border-color: var(--color-principal); background: white; }

    @media (max-width: 600px) {
        .txt-cats { display: none; }
        .btn-categorias-trigger { padding: 0.6rem; border-radius: 50%; width: 40px; height: 40px; justify-content: center; }
    }

    @media (min-width: 1024px) {
        .contenedor-buscador {
            margin-left: auto; margin-right: auto; 
            max-width: 1100px;
            padding: 1.5rem;
        }
    }

   /* =========================================================
      NAVEGACIÓN CATEGORÍAS
      ========================================================= */
.nav-categorias { display: none !important;
        position: relative;
        z-index: 100;
        display: flex;
        overflow-x: auto;
        gap: 0.8rem;
        padding: 0.5rem;
        margin: 1.5rem 1.5rem 2.5rem 1.5rem;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: var(--radio-pildora);
        box-shadow: 0 8px 32px rgba(0,0,0,0.06);
        scrollbar-width: none;
        scroll-behavior: smooth;
        transition: var(--animacion-suave);
    }
    
    .nav-categorias::-webkit-scrollbar { display: none; }
    
    .btn-categoria {
         padding: 0.8rem 1.2rem;
         border: none;
         background: transparent;
         color: var(--color-texto-claro);
         font-weight: 500;
         font-size: 1.05rem;
         cursor: pointer;
         border-radius: var(--radio-pildora);
         transition: var(--animacion-suave);
         white-space: nowrap;
     }
    
    .btn-categoria.activa {
        background: var(--color-principal);
        color: var(--color-blanco);
        box-shadow: 0 4px 15px rgba(193, 18, 31, 0.3);
    }

    /* =========================================================
       CATÁLOGO DE PRODUCTOS
       ========================================================= */
    .contenedor-menu {
        max-width: 1000px; 
        margin: 0 auto;
        padding: 0 1.5rem;
    }
    
    .seccion-categoria { margin-bottom: 4rem; }
    
    .titulo-categoria {
        font-size: 1.8rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        color: var(--color-texto);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--fuente-titulos);
    }
    
    .grilla-productos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* Tarjetas */
    .card-producto {
        background-color: var(--color-surface);
        border-radius: var(--radio-borde);
        overflow: hidden;
        box-shadow: var(--sombra-suave);
        transition: var(--animacion-suave);
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
    }
    
    .card-img-wrapper {
        position: relative;
        width: 100%;
        height: 140px;
        overflow: hidden;
    }

    /* Etiquetas/Badges Premium */
    .badge-tag {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 0.4rem 0.8rem;
        border-radius: var(--radio-pequeno);
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        backdrop-filter: blur(4px);
    }

    .tag-favorito { background: rgba(255, 215, 0, 0.9); color: #000; }
    .tag-veggie { background: rgba(34, 197, 94, 0.9); color: #fff; }
    .tag-hot { background: rgba(239, 68, 68, 0.9); color: #fff; }

    /* Animación de Entrada 'Liquid' */
    .card-producto {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
    }

    .card-producto.revelado {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    
    .badge-descuento {
        position: absolute;
        top: 12px;
        right: 12px;
        background: var(--color-principal);
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: var(--radio-pequeno);
        font-weight: 800;
        font-size: 0.85rem;
        z-index: 5;
        box-shadow: 0 4px 10px rgba(193, 18, 31, 0.4);
        animation: pulseDescuento 2s infinite;
    }

    @keyframes pulseDescuento {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    .imagen-producto {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .precio-tag {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(8px);
        color: var(--color-secundario);
        padding: 0.3rem 0.6rem;
        border-radius: var(--radio-pequeno);
        font-weight: 800;
        font-size: 0.9rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        z-index: 3;
        display: flex;
        flex-direction: column;
        line-height: 1;
    }

    .precio-old {
        font-size: 0.75rem;
        text-decoration: line-through;
        opacity: 0.5;
        margin-bottom: 2px;
        font-weight: 500;
    }

    .info-producto {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .nombre-producto {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.4rem;
        color: var(--color-texto);
        font-family: var(--fuente-titulos);
    }
    
    .descripcion-producto {
        font-size: 0.8rem;
        color: var(--color-texto-claro);
        margin-bottom: 1rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .btn-agregar {
        background-color: var(--color-fondo);
        color: var(--color-secundario);
        border: 1px solid rgba(44, 61, 48, 0.1);
        padding: 0.6rem 1rem;
        border-radius: var(--radio-pildora);
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        transition: var(--animacion-suave);
    }

    /* =========================================================
       CARRITO FLOTANTE
       ========================================================= */
    .boton-flotante-carrito {
        position: fixed;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 3rem);
        max-width: 420px;
        background: var(--color-secundario);
        color: var(--color-blanco);
        border-radius: var(--radio-pildora);
        padding: 0.7rem 1rem 0.7rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 15px 35px rgba(0,0,0,0.25);
        z-index: 900;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .boton-flotante-carrito.oculto { transform: translate(-50%, 150px) scale(0.8); }
    
    .resumen-flotante { display: flex; align-items: center; gap: 0.8rem; }
    .carrito-cantidad {
        background-color: var(--color-principal);
        min-width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 800;
    }

    /* =========================================================
       MODAL DETALLE PRODUCTO (Mobile First)
       ========================================================= */
    .overlay-modal-producto {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(44, 61, 48, 0.4); z-index: 1050;
        opacity: 0; visibility: hidden; transition: all 0.4s ease;
        display: flex; justify-content: center; align-items: center;
        padding: 1rem; backdrop-filter: blur(12px);
    }
    .overlay-modal-producto.activo { opacity: 1; visibility: visible; }
    
    .modal-producto {
        background: var(--color-surface); border-radius: 24px;
        width: 100%; max-width: 450px; overflow: hidden;
        display: flex; flex-direction: column; max-height: 90vh;
        position: relative;
        transform: translateY(30px); transition: transform 0.4s ease;
    }
    .overlay-modal-producto.activo .modal-producto { transform: translateY(0); }
    
    .modal-producto-img-container { position: relative; width: 100%; height: 240px; }
    .modal-producto-img { width: 100%; height: 100%; object-fit: cover; }
    
    .modal-badge-descuento {
        position: absolute;
        top: 20px;
        left: 20px;
        background: #fbbf24;
        color: #000;
        padding: 0.5rem 1rem;
        border-radius: var(--radio-pildora);
        font-weight: 900;
        font-size: 0.75rem;
        letter-spacing: 1px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .btn-cerrar-modal-producto {
        position: absolute; top: 15px; right: 15px;
        background: rgba(255,255,255,0.9); color: var(--color-secundario); border: none;
        width: 38px; height: 38px; border-radius: 50%;
        cursor: pointer; z-index: 1100; display: flex; align-items: center; justify-content: center;
    }
    
    .modal-producto-content-wrapper { display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; }
    .modal-producto-body { padding: 1.5rem; flex-grow: 1; }
    .modal-producto-titulo { font-size: 1.6rem; font-family: var(--fuente-titulos); margin-bottom: 0.8rem; color: var(--color-secundario); }
    .modal-producto-desc { font-size: 0.95rem; color: var(--color-texto-claro); line-height: 1.5; margin-bottom: 1.5rem; }
    
    .modal-producto-footer { padding: 1.2rem 1.5rem; border-top: 1px solid rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; }
    
    .contenedor-precio-modal {
        display: flex;
        flex-direction: column;
    }

    .modal-precio-old {
        font-size: 0.9rem;
        text-decoration: line-through;
        opacity: 0.4;
        font-weight: 600;
        margin-bottom: -4px;
    }

    .modal-precio { font-size: 1.4rem; font-weight: 800; color: var(--color-principal); }
    .btn-agregar-modal { background: var(--color-principal); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: var(--radio-pildora); font-weight: 700; cursor: pointer; }

    /* --- Modificadores (Complementos) --- */
    .modificadores-container {
        margin-top: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .mod-grupo {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    .mod-grupo h4 {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--color-secundario);
        font-weight: 800;
        margin-bottom: 0.2rem;
        opacity: 0.7;
    }

    .mod-label {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.8rem 1rem;
        background: var(--color-fondo);
        border: 2px solid transparent;
        border-radius: 16px;
        cursor: pointer;
        transition: var(--animacion-suave);
    }

    .mod-label:hover {
        background: #fff;
        border-color: rgba(44, 61, 48, 0.1);
    }

    .mod-checkbox {
        display: none;
    }

    .mod-checkbox:checked + .mod-label {
        background: #fff;
        border-color: var(--color-secundario);
        box-shadow: var(--sombra-suave);
    }

    .mod-check-circle {
        width: 22px;
        height: 22px;
        border: 2px solid rgba(0,0,0,0.1);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        transition: var(--animacion-suave);
    }

    .mod-checkbox:checked + .mod-label .mod-check-circle {
        background: var(--color-secundario);
        border-color: var(--color-secundario);
    }

    .mod-check-circle::after {
        content: '\2713';
        color: white;
        font-size: 0.85rem;
        font-weight: 900;
        opacity: 0;
    }

    .mod-checkbox:checked + .mod-label .mod-check-circle::after {
        opacity: 1;
    }

    .mod-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .mod-nombre { font-weight: 600; font-size: 0.95rem; }
    .mod-precio { font-size: 0.85rem; color: var(--color-principal); font-weight: 700; }

    /* Mejora Botón Sugerencia en Carrito */
    .btn-sugerencia-add {
        background: var(--color-fondo);
        color: var(--color-secundario);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 700;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    /* =========================================================
       DESKTOP OVERRIDES (Solo PC)
       ========================================================= */
    @media (min-width: 1024px) {
        .header-hero { 
            padding: 8rem 4rem 10rem 4rem; 
            max-width: 1200px;
            margin: 0 auto;
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 40px;
        }
        .header-hero h1 { font-size: 5rem; }

        .nav-categorias { display: none !important; }

        .contenedor-menu { 
            margin: 2rem auto 6rem auto; 
            max-width: 1100px; 
            background: white;
            padding: 4rem 3rem;
            border-radius: 32px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
            border: 1px solid rgba(0,0,0,0.02);
        }

        .grilla-productos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
        
        .card-img-wrapper { height: 220px; }
        .nombre-producto { font-size: 1.3rem; }
        .descripcion-producto { font-size: 0.95rem; }

        .contenedor-buscador {
            margin-top: -30px !important;
        }

        .promociones-wrapper {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 2rem; max-width: 1200px; margin: -80px auto 2rem auto;
            position: relative; left: 0; overflow: visible; padding: 0 2rem;
            z-index: 20;
        }
        .promo-card { flex: none; height: 240px; box-shadow: 0 15px 40px rgba(0,0,0,0.2); }

        .boton-flotante-carrito { left: auto; right: 40px; bottom: 40px; transform: none; width: 320px; }
        
        .modal-producto { max-width: 900px; flex-direction: row; height: 600px; }
        .modal-producto-img-container { width: 50%; height: 100%; }
        .modal-producto-content-wrapper { width: 50%; }
        .modal-producto-body { padding: 2.5rem; }
        .modal-precio { font-size: 1.8rem; }
    }

    @media (min-width: 1400px) {
        .grilla-productos { grid-template-columns: repeat(4, 1fr); }
    }

    /* Hover Effects - Solo para dispositivos con mouse */
    @media (hover: hover) {
        .card-producto:hover { transform: translateY(-8px); box-shadow: var(--sombra-fuerte); }
        .card-producto:hover .imagen-producto { transform: scale(1.1); }
        .card-producto::after {
            content: 'Ver Detalles';
            position: absolute; top: 0; left: 0; width: 100%; height: 160px;
            background: rgba(44, 61, 48, 0.3); display: flex; justify-content: center; align-items: center;
            color: white; font-weight: 700; opacity: 0; transition: var(--animacion-suave); backdrop-filter: blur(2px);
        }
        @media (min-width: 650px) { .card-producto::after { height: 220px; } }
        .card-producto:hover::after { opacity: 1; }
        .btn-agregar:hover { background-color: var(--color-secundario); color: white; }
        .btn-categoria:hover:not(.activa) { background: rgba(0,0,0,0.03); }
    }

    /* Carrito Panel styles */
    .panel-carrito {
        position: fixed; top: 0; right: -100%; width: 100%; max-width: 450px; height: 100vh;
        background: var(--color-surface); z-index: 1000; transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex; flex-direction: column; box-shadow: -15px 0 50px rgba(0,0,0,0.15);
    }
    .panel-carrito.activo { right: 0; }
    @media (min-width: 1024px) { .panel-carrito { border-top-left-radius: 32px; border-bottom-left-radius: 32px; } }
    
    .carrito-header {
        padding: 2.5rem 2rem 1.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .carrito-header h2 {
        font-size: 1.8rem;
        font-weight: 800;
        font-family: var(--fuente-titulos);
        color: var(--color-secundario);
    }
    
    .btn-cerrar-carrito {
        background: var(--color-fondo);
        border: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: var(--color-secundario);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: var(--animacion-suave);
    }
    
    .carrito-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: 2rem;
    }
    
    .item-carrito {
        display: flex;
        gap: 1.2rem;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem;
        margin-bottom: 1rem;
        background: var(--color-fondo);
        border-radius: 20px;
    }
    
    .item-img-cart {
        width: 65px;
        height: 65px;
        border-radius: 14px;
        object-fit: cover;
    }

    /* Sugerencias en Carrito */
    .sugerencias-carrito {
        padding: 1.5rem 2rem;
        border-top: 1px solid rgba(0,0,0,0.05);
        background: #fff;
    }
    .sugerencias-titulo { font-size: 0.9rem; font-weight: 700; color: var(--color-principal); margin-bottom: 1rem; }
    .sugerencia-item {
        display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
        padding: 1rem; border-radius: 16px; border: 1px solid rgba(0,0,0,0.04);
    }
    .sugerencia-img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; }
    .sugerencia-info { flex-grow: 1; }
    .sugerencia-nombre { font-size: 0.9rem; font-weight: 600; }
    .sugerencia-precio { font-size: 0.85rem; color: var(--color-principal); font-weight: 700; }

    .carrito-footer {
        padding: 2rem;
        background: var(--color-surface);
        border-top: 1px solid rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .input-nota {
        width: 100%;
        padding: 1rem;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 16px;
        font-size: 0.9rem;
        resize: none;
        background: var(--color-fondo);
    }
    
    .carrito-resumen {
        display: flex;
        justify-content: space-between;
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--color-secundario);
    }
    
    .btn-whatsapp {
        width: 100%;
        background-color: #25D366; 
        color: white;
        border: none;
        padding: 1.2rem;
        border-radius: var(--radio-pildora);
        font-size: 1.15rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    }

    .control-cantidad {
        background: #fff;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        border-radius: var(--radio-pildora);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .btn-cant {
        background: transparent;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--color-secundario);
    }

    .footer-premium { 
        background-color: var(--color-secundario); 
        padding: 6rem 2rem 12rem 2rem; 
        border-top: 6px solid var(--color-principal); 
        color: white; 
        text-align: center; 
    }
    
    .footer-logo-img { 
        width: 100px; 
        height: 100px; 
        border-radius: 50%; 
        border: 3px solid rgba(255,255,255,0.2); 
        margin-bottom: 2rem; 
    }

    .footer-tech {
        background: rgba(255, 255, 255, 0.05);
        padding: 2rem;
        border-radius: 20px;
        max-width: 600px;
        margin: 2rem auto;
    }

    /* --- SKELETON LOADING --- */
    .skeleton {
        background: #eee;
        background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
        border-radius: var(--radio-borde);
        background-size: 200% 100%;
        animation: 1.5s shine linear infinite;
    }

    /* Preloader Styles */

    /* Mancha de luz para realismo */
    .ambient-background::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(44, 61, 48, 0.05) 100%);
        pointer-events: none;
    }

    .preloader {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: var(--color-secundario);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1);
    }

    .preloader-hidden {
        transform: translateY(-100%);
        pointer-events: none;
    }

    .preloader-content {
        text-align: center;
        width: 100%;
        max-width: 300px;
        padding: 2rem;
    }

    .logo-preloader {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 4px solid var(--color-dorado);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        margin-bottom: 2rem;
        animation: pulsePreloader 2s infinite ease-in-out;
    }

    .preloader-bar {
        width: 100%;
        height: 4px;
        background: rgba(255,255,255,0.1);
        border-radius: 2px;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .preloader-progress {
        width: 0%;
        height: 100%;
        background: var(--color-dorado);
        transition: width 0.5s ease;
    }

    .preloader-text {
        color: white;
        font-family: var(--fuente-titulos);
        font-size: 1.1rem;
        opacity: 0.8;
        letter-spacing: 2px;
    }

    @keyframes pulsePreloader {
        0%, 100% { transform: scale(1); filter: brightness(1); }
        50% { transform: scale(1.05); filter: brightness(1.2); }
    }

    /* Animaciones Globales */
    @keyframes shine {
        to { background-position-x: -200%; }
    }

    .skeleton-card {
        height: 300px;
        width: 100%;
        margin-bottom: 2rem;
    }

    /* Scroll Progresivo: Resaltado de Sidebar */
    @media (min-width: 1024px) {
        .btn-categoria.scrolled-active {
            background: var(--color-secundario);
            color: #fff;
            transform: scale(1.05);
            padding-left: 2rem;
        }
        .btn-categoria.scrolled-active::before {
            content: '●';
            margin-right: 10px;
            color: var(--color-dorado);
        }
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 10px; }

    .pop-carrito {
        transform: scale(1.1) !important;
    }

    @media (max-width: 1023px) {
        .pop-carrito {
            transform: translateX(-50%) scale(1.1) !important;
        }
    }

    /* Animación de vuelo */
    .img-vuelo-animacion {
        position: fixed;
        z-index: 2000;
        pointer-events: none;
        transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }