{"id":7,"date":"2026-03-13T07:06:37","date_gmt":"2026-03-13T11:06:37","guid":{"rendered":"https:\/\/aftermarking.com\/donderichard\/?page_id=7"},"modified":"2026-05-19T08:20:14","modified_gmt":"2026-05-19T12:20:14","slug":"tienda","status":"publish","type":"page","link":"https:\/\/comida.aftermarking.com\/index.php\/tienda\/","title":{"rendered":"Tienda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-441c91c e-flex e-con-boxed e-con e-parent\" data-id=\"441c91c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-018739c elementor-widget elementor-widget-html\" data-id=\"018739c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* Variables y reset - Dise\u00f1o profesional Azul\/Blanco\/Negro *\/\r\n    :root {\r\n        --primary: #1a56db;      \/* Azul profesional *\/\r\n        --primary-dark: #1e40af;\r\n        --primary-light: #eff6ff;\r\n        --secondary: #0f172a;     \/* Negro\/Azul oscuro para textos *\/\r\n        --success: #059669;\r\n        --danger: #dc2626;\r\n        --warning: #d97706;\r\n        --light: #f8fafc;          \/* Blanco azulado *\/\r\n        --dark: #0f172a;           \/* Negro\/Azul oscuro *\/\r\n        --border: #e2e8f0;         \/* Gris claro para bordes *\/\r\n        --white: #ffffff;\r\n        --black: #0f172a;\r\n    }\r\n    \r\n    * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n    \r\n    body {\r\n        font-family: 'Inter', 'Poppins', -apple-system, sans-serif;\r\n        background: #f1f5f9;\r\n    }\r\n    \r\n    .ecommerce-container {\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 20px;\r\n    }\r\n    \r\n    \/* Header *\/\r\n    .ecommerce-header {\r\n        background: var(--white);\r\n        border-radius: 20px;\r\n        padding: 12px 25px;\r\n        margin-bottom: 30px;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        border: 1px solid var(--border);\r\n    }\r\n    \r\n    .logo-area {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n    \r\n    .logo-text h1 {\r\n        font-size: 28px;\r\n        color: var(--primary);\r\n        margin: 0;\r\n        line-height: 1.2;\r\n        font-weight: 700;\r\n    }\r\n    \r\n    .logo-text p {\r\n        color: var(--secondary);\r\n        font-size: 14px;\r\n        margin: 3px 0 0;\r\n        font-style: italic;\r\n    }\r\n    \r\n    .cart-icon {\r\n        position: relative;\r\n        cursor: pointer;\r\n        padding: 10px 22px;\r\n        background: var(--light);\r\n        border-radius: 50px;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        border: 2px solid var(--primary);\r\n        font-size: 14px;\r\n        color: var(--dark);\r\n    }\r\n    \r\n    .cart-icon:hover {\r\n        background: var(--primary);\r\n        color: white;\r\n    }\r\n    \r\n    .cart-icon:hover .dashicons {\r\n        color: white;\r\n    }\r\n    \r\n    .cart-count {\r\n        position: absolute;\r\n        top: -8px;\r\n        right: -8px;\r\n        background: var(--primary);\r\n        color: white;\r\n        border-radius: 50%;\r\n        width: 22px;\r\n        height: 22px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 11px;\r\n        font-weight: bold;\r\n        border: 2px solid white;\r\n    }\r\n    \r\n    \/* Tasa BCV - visible *\/\r\n    .tasa-bcv {\r\n        background: linear-gradient(135deg, var(--light) 0%, #fff 100%);\r\n        border-radius: 16px;\r\n        padding: 15px 20px;\r\n        margin-bottom: 25px;\r\n        text-align: center;\r\n        border: 2px solid var(--primary);\r\n        box-shadow: 0 4px 12px rgba(26, 86, 219, 0.1);\r\n    }\r\n    \r\n    .tasa-bcv span {\r\n        font-size: 18px;\r\n        font-weight: bold;\r\n        color: var(--dark);\r\n    }\r\n    \r\n    .tasa-bcv .tasa-valor {\r\n        color: var(--primary);\r\n        font-size: 20px;\r\n        font-weight: bold;\r\n        margin-left: 10px;\r\n    }\r\n    \r\n    .tasa-bcv .tasa-fecha {\r\n        font-size: 12px;\r\n        color: #666;\r\n        margin-left: 15px;\r\n    }\r\n    \r\n    \/* Grid de productos *\/\r\n    .productos-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n        gap: 25px;\r\n        margin-bottom: 40px;\r\n    }\r\n    \r\n    .producto-card {\r\n        background: white;\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\r\n        transition: all 0.3s;\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        border: 1px solid var(--border);\r\n    }\r\n    \r\n    .producto-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 15px 30px rgba(26, 86, 219, 0.15);\r\n        border-color: var(--primary);\r\n    }\r\n    \r\n    .producto-badge {\r\n        position: absolute;\r\n        top: 15px;\r\n        right: 15px;\r\n        background: var(--primary);\r\n        color: white;\r\n        padding: 5px 12px;\r\n        border-radius: 25px;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        z-index: 2;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n    }\r\n    \r\n    .producto-imagen {\r\n        height: 200px;\r\n        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        overflow: hidden;\r\n        border-bottom: 1px dashed var(--border);\r\n        position: relative;\r\n    }\r\n    \r\n    \/* Estilos para im\u00e1genes *\/\r\n    .producto-imagen img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.3s ease;\r\n    }\r\n    \r\n    .producto-card:hover .producto-imagen img {\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .producto-imagen .dashicons {\r\n        font-size: 64px;\r\n        width: 64px;\r\n        height: 64px;\r\n        color: var(--primary);\r\n        opacity: 0.7;\r\n    }\r\n    \r\n    .producto-imagen::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 30px;\r\n        background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);\r\n        pointer-events: none;\r\n    }\r\n    \r\n    .producto-info {\r\n        padding: 20px;\r\n        flex: 1;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .producto-nombre {\r\n        font-size: 18px;\r\n        font-weight: bold;\r\n        color: var(--dark);\r\n        margin-bottom: 8px;\r\n    }\r\n    \r\n    .producto-precio {\r\n        font-size: 24px;\r\n        font-weight: bold;\r\n        color: var(--primary);\r\n        margin-bottom: 5px;\r\n    }\r\n    \r\n    .producto-precio small {\r\n        font-size: 12px;\r\n        color: var(--secondary);\r\n        font-weight: normal;\r\n    }\r\n    \r\n    .producto-precio-bs {\r\n        font-size: 14px;\r\n        color: var(--dark);\r\n        margin-bottom: 10px;\r\n    }\r\n    \r\n    .producto-precio-bs span {\r\n        color: var(--primary);\r\n        font-weight: bold;\r\n    }\r\n    \r\n    .producto-stock {\r\n        font-size: 13px;\r\n        color: var(--dark);\r\n        margin-bottom: 12px;\r\n    }\r\n    \r\n    .producto-stock span {\r\n        color: var(--primary);\r\n        font-weight: bold;\r\n    }\r\n    \r\n    .producto-tipo {\r\n        display: inline-block;\r\n        padding: 4px 12px;\r\n        background: var(--light);\r\n        border-radius: 20px;\r\n        font-size: 11px;\r\n        color: var(--dark);\r\n        align-self: flex-start;\r\n        margin-bottom: 15px;\r\n        border: 1px solid var(--border);\r\n    }\r\n    \r\n    .btn-agregar {\r\n        width: 100%;\r\n        padding: 12px;\r\n        background: var(--primary);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 12px;\r\n        font-weight: bold;\r\n        font-size: 14px;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        margin-top: auto;\r\n        border: 2px solid var(--primary);\r\n    }\r\n    \r\n    .btn-agregar:hover {\r\n        background: white;\r\n        color: var(--primary);\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 8px 15px rgba(26, 86, 219, 0.2);\r\n    }\r\n    \r\n    .btn-agregar .dashicons {\r\n        font-size: 16px;\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n    \r\n    \/* Carrito flotante *\/\r\n    .carrito-flotante {\r\n        position: fixed;\r\n        top: 0;\r\n        right: -100%;\r\n        width: 100%;\r\n        max-width: 450px;\r\n        height: 100vh;\r\n        background: white;\r\n        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);\r\n        z-index: 1000;\r\n        transition: right 0.4s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .carrito-flotante.abierto {\r\n        right: 0;\r\n    }\r\n    \r\n    .carrito-header {\r\n        padding: 20px;\r\n        border-bottom: 2px solid var(--border);\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        background: var(--light);\r\n    }\r\n    \r\n    .carrito-header h2 {\r\n        font-size: 20px;\r\n        color: var(--dark);\r\n        margin: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n    \r\n    .cerrar-carrito {\r\n        background: none;\r\n        border: none;\r\n        font-size: 28px;\r\n        cursor: pointer;\r\n        color: var(--dark);\r\n        width: 40px;\r\n        height: 40px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border-radius: 50%;\r\n    }\r\n    \r\n    .cerrar-carrito:hover {\r\n        background: #e2e8f0;\r\n        color: var(--danger);\r\n    }\r\n    \r\n    .carrito-items {\r\n        flex: 1;\r\n        overflow-y: auto;\r\n        padding: 20px;\r\n    }\r\n    \r\n    .carrito-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n        padding: 15px;\r\n        border-bottom: 1px solid var(--border);\r\n        background: white;\r\n        border-radius: 15px;\r\n        margin-bottom: 10px;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.02);\r\n    }\r\n    \r\n    .item-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: flex-start;\r\n        margin-bottom: 10px;\r\n    }\r\n    \r\n    .item-nombre {\r\n        font-weight: bold;\r\n        color: var(--dark);\r\n        font-size: 16px;\r\n        flex: 1;\r\n    }\r\n    \r\n    .item-precio {\r\n        color: var(--primary);\r\n        font-weight: bold;\r\n        font-size: 16px;\r\n    }\r\n    \r\n    .item-precio-bs {\r\n        font-size: 12px;\r\n        color: var(--dark);\r\n        margin-top: 4px;\r\n    }\r\n    \r\n    .item-detalles {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 15px;\r\n    }\r\n    \r\n    .item-cantidad-control {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        background: var(--light);\r\n        padding: 5px;\r\n        border-radius: 10px;\r\n    }\r\n    \r\n    .cantidad-btn {\r\n        width: 30px;\r\n        height: 30px;\r\n        border: 1px solid var(--border);\r\n        background: white;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        font-size: 16px;\r\n        font-weight: bold;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n    \r\n    .cantidad-btn:hover:not(:disabled) {\r\n        background: var(--primary);\r\n        color: white;\r\n        border-color: var(--primary);\r\n    }\r\n    \r\n    .cantidad-btn:disabled {\r\n        opacity: 0.5;\r\n        cursor: not-allowed;\r\n    }\r\n    \r\n    .item-cantidad {\r\n        font-weight: bold;\r\n        min-width: 40px;\r\n        text-align: center;\r\n    }\r\n    \r\n    .eliminar-item {\r\n        background: #fee;\r\n        border: none;\r\n        color: var(--danger);\r\n        cursor: pointer;\r\n        padding: 8px 12px;\r\n        border-radius: 8px;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n    }\r\n    \r\n    .eliminar-item:hover {\r\n        background: #fecaca;\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .carrito-footer {\r\n        padding: 20px;\r\n        border-top: 2px solid var(--border);\r\n        background: var(--light);\r\n    }\r\n    \r\n    .carrito-totales {\r\n        margin-bottom: 15px;\r\n    }\r\n    \r\n    .carrito-total {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 8px;\r\n        font-size: 16px;\r\n        font-weight: bold;\r\n    }\r\n    \r\n    .carrito-total-bs {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        font-size: 18px;\r\n        font-weight: bold;\r\n        color: var(--primary);\r\n        padding-top: 8px;\r\n        border-top: 2px solid var(--border);\r\n    }\r\n    \r\n    .carrito-acciones {\r\n        display: flex;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .btn-vaciar {\r\n        flex: 1;\r\n        padding: 12px;\r\n        background: #fee;\r\n        color: var(--danger);\r\n        border: 2px solid #fecaca;\r\n        border-radius: 12px;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 5px;\r\n    }\r\n    \r\n    .btn-vaciar:hover {\r\n        background: #fecaca;\r\n    }\r\n    \r\n    .btn-checkout {\r\n        flex: 2;\r\n        padding: 12px;\r\n        background: var(--primary);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 12px;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 5px;\r\n    }\r\n    \r\n    .btn-checkout:hover {\r\n        background: var(--primary-dark);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    \/* Modal Checkout *\/\r\n    .checkout-modal {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0, 0, 0, 0.6);\r\n        backdrop-filter: blur(8px);\r\n        z-index: 2000;\r\n        display: none;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 20px;\r\n    }\r\n    \r\n    .checkout-content {\r\n        background: white;\r\n        border-radius: 32px;\r\n        width: 100%;\r\n        max-width: 600px;\r\n        max-height: 85vh;\r\n        overflow-y: auto;\r\n        box-shadow: 0 25px 50px -12px rgba(26, 86, 219, 0.25);\r\n        animation: modalFadeIn 0.3s ease-out;\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n    }\r\n    \r\n    @keyframes modalFadeIn {\r\n        from {\r\n            opacity: 0;\r\n            transform: scale(0.95) translateY(10px);\r\n        }\r\n        to {\r\n            opacity: 1;\r\n            transform: scale(1) translateY(0);\r\n        }\r\n    }\r\n    \r\n    .checkout-header {\r\n        background: var(--primary);\r\n        padding: 24px 28px;\r\n        border-radius: 32px 32px 0 0;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        color: white;\r\n        position: sticky;\r\n        top: 0;\r\n        z-index: 10;\r\n    }\r\n    \r\n    .checkout-header h2 {\r\n        font-size: 24px;\r\n        margin: 0;\r\n        font-weight: 600;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        letter-spacing: -0.3px;\r\n    }\r\n    \r\n    .checkout-header .cerrar-modal {\r\n        background: rgba(255, 255, 255, 0.2);\r\n        border: none;\r\n        color: white;\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        font-size: 24px;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.2s;\r\n        backdrop-filter: blur(4px);\r\n    }\r\n    \r\n    .checkout-header .cerrar-modal:hover {\r\n        background: rgba(255, 255, 255, 0.3);\r\n        transform: rotate(90deg);\r\n    }\r\n    \r\n    .checkout-body {\r\n        padding: 28px;\r\n    }\r\n    \r\n    .form-section {\r\n        margin-bottom: 28px;\r\n    }\r\n    \r\n    .form-section h3 {\r\n        font-size: 16px;\r\n        color: var(--dark);\r\n        margin-bottom: 16px;\r\n        font-weight: 600;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 2px solid var(--border);\r\n    }\r\n    \r\n    .form-section h3 .dashicons {\r\n        color: var(--primary);\r\n        font-size: 20px;\r\n        width: 20px;\r\n        height: 20px;\r\n    }\r\n    \r\n    .form-row {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 16px;\r\n    }\r\n    \r\n    .form-group {\r\n        margin-bottom: 16px;\r\n    }\r\n    \r\n    .form-group.full-width {\r\n        grid-column: span 2;\r\n    }\r\n    \r\n    .form-group label {\r\n        display: block;\r\n        margin-bottom: 6px;\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n        color: var(--dark);\r\n        letter-spacing: 0.3px;\r\n    }\r\n    \r\n    .form-group input,\r\n    .form-group textarea,\r\n    .form-group select {\r\n        width: 100%;\r\n        padding: 12px 16px;\r\n        border: 2px solid var(--border);\r\n        border-radius: 16px;\r\n        font-size: 15px;\r\n        font-family: inherit;\r\n        transition: all 0.2s;\r\n        background: #fff;\r\n    }\r\n    \r\n    .form-group input:hover,\r\n    .form-group textarea:hover,\r\n    .form-group select:hover {\r\n        border-color: var(--primary);\r\n    }\r\n    \r\n    .form-group input:focus,\r\n    .form-group textarea:focus,\r\n    .form-group select:focus {\r\n        outline: none;\r\n        border-color: var(--primary);\r\n        box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.1);\r\n    }\r\n    \r\n    \/* M\u00e9todos de pago - Estilos profesionales *\/\r\n    .payment-methods {\r\n        display: flex;\r\n        gap: 15px;\r\n        margin-bottom: 20px;\r\n        flex-wrap: wrap;\r\n    }\r\n    \r\n    .payment-option {\r\n        flex: 1;\r\n        min-width: 120px;\r\n    }\r\n    \r\n    .payment-option input[type=\"radio\"] {\r\n        display: none;\r\n    }\r\n    \r\n    .payment-option label {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 15px 10px;\r\n        background: var(--light);\r\n        border: 2px solid var(--border);\r\n        border-radius: 16px;\r\n        cursor: pointer;\r\n        transition: all 0.2s;\r\n        text-align: center;\r\n        font-weight: 500;\r\n        color: var(--dark);\r\n    }\r\n    \r\n    .payment-option input[type=\"radio\"]:checked + label {\r\n        border-color: var(--primary);\r\n        background: var(--primary-light);\r\n        color: var(--primary);\r\n    }\r\n    \r\n    .payment-option label .dashicons {\r\n        font-size: 28px;\r\n        width: 28px;\r\n        height: 28px;\r\n    }\r\n    \r\n    .payment-option input[type=\"radio\"]:checked + label .dashicons {\r\n        color: var(--primary);\r\n    }\r\n    \r\n    \/* Tarjeta de informaci\u00f3n de pago *\/\r\n    .payment-info-card {\r\n        background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);\r\n        border-radius: 20px;\r\n        padding: 20px;\r\n        margin: 20px 0;\r\n        border: 2px solid var(--primary);\r\n        position: relative;\r\n        box-shadow: 0 4px 12px rgba(26, 86, 219, 0.1);\r\n        transition: all 0.3s;\r\n    }\r\n    \r\n    .payment-info-card::before {\r\n        content: \"\ud83d\udcb0 Informaci\u00f3n de Pago\";\r\n        position: absolute;\r\n        top: -12px;\r\n        left: 20px;\r\n        background: var(--primary);\r\n        color: white;\r\n        padding: 4px 16px;\r\n        border-radius: 30px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.5px;\r\n    }\r\n    \r\n    .payment-info-grid {\r\n        display: grid;\r\n        grid-template-columns: auto 1fr;\r\n        gap: 12px 16px;\r\n        margin-top: 8px;\r\n    }\r\n    \r\n    .payment-info-grid .label {\r\n        font-weight: 600;\r\n        color: var(--dark);\r\n        opacity: 0.7;\r\n    }\r\n    \r\n    .payment-info-grid .value {\r\n        color: var(--dark);\r\n        font-weight: 500;\r\n    }\r\n    \r\n    .payment-info-grid .value strong {\r\n        color: var(--primary);\r\n        font-size: 15px;\r\n    }\r\n    \r\n    .file-upload-area {\r\n        border: 2px dashed var(--border);\r\n        border-radius: 20px;\r\n        padding: 24px;\r\n        text-align: center;\r\n        background: var(--light);\r\n        cursor: pointer;\r\n        transition: all 0.2s;\r\n        margin: 16px 0;\r\n    }\r\n    \r\n    .file-upload-area:hover {\r\n        border-color: var(--primary);\r\n        background: #fff;\r\n    }\r\n    \r\n    .file-upload-area .dashicons {\r\n        font-size: 32px;\r\n        width: 32px;\r\n        height: 32px;\r\n        color: var(--primary);\r\n        margin-bottom: 8px;\r\n    }\r\n    \r\n    .file-upload-area p {\r\n        color: var(--dark);\r\n        font-size: 14px;\r\n        margin: 4px 0;\r\n    }\r\n    \r\n    .file-upload-area .file-name {\r\n        color: var(--primary);\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        margin-top: 8px;\r\n        display: none;\r\n    }\r\n    \r\n    #pago-comprobante {\r\n        display: none;\r\n    }\r\n    \r\n    .order-summary-card {\r\n        background: var(--light);\r\n        border-radius: 20px;\r\n        padding: 20px;\r\n        margin: 20px 0;\r\n    }\r\n    \r\n    .summary-items {\r\n        max-height: 200px;\r\n        overflow-y: auto;\r\n        padding-right: 8px;\r\n    }\r\n    \r\n    .summary-items::-webkit-scrollbar {\r\n        width: 4px;\r\n    }\r\n    \r\n    .summary-items::-webkit-scrollbar-track {\r\n        background: var(--border);\r\n        border-radius: 4px;\r\n    }\r\n    \r\n    .summary-items::-webkit-scrollbar-thumb {\r\n        background: var(--primary);\r\n        border-radius: 4px;\r\n    }\r\n    \r\n    .summary-item {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        padding: 12px 0;\r\n        border-bottom: 1px solid var(--border);\r\n        font-size: 14px;\r\n    }\r\n    \r\n    .summary-item:last-child {\r\n        border-bottom: none;\r\n    }\r\n    \r\n    .summary-item .product-info {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 2px;\r\n    }\r\n    \r\n    .summary-item .product-name {\r\n        font-weight: 500;\r\n        color: var(--dark);\r\n    }\r\n    \r\n    .summary-item .product-qty {\r\n        font-size: 12px;\r\n        color: var(--dark);\r\n    }\r\n    \r\n    .summary-item .product-total {\r\n        font-weight: 600;\r\n        color: var(--primary);\r\n        font-size: 15px;\r\n    }\r\n    \r\n    .summary-total {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-top: 16px;\r\n        padding-top: 16px;\r\n        border-top: 2px solid var(--border);\r\n        font-weight: 700;\r\n        font-size: 18px;\r\n        color: var(--dark);\r\n    }\r\n    \r\n    .summary-total span:last-child {\r\n        color: var(--primary);\r\n    }\r\n    \r\n    .summary-bs {\r\n        text-align: right;\r\n        margin-top: 8px;\r\n        color: var(--dark);\r\n        font-size: 16px;\r\n        font-weight: bold;\r\n    }\r\n    \r\n    .btn-procesar {\r\n        width: 100%;\r\n        padding: 16px;\r\n        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 50px;\r\n        font-weight: 600;\r\n        font-size: 18px;\r\n        cursor: pointer;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        margin-top: 24px;\r\n        box-shadow: 0 8px 20px rgba(26, 86, 219, 0.3);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n    }\r\n    \r\n    .btn-procesar:hover {\r\n        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 12px 28px rgba(26, 86, 219, 0.4);\r\n    }\r\n    \r\n    .notificacion {\r\n        position: fixed;\r\n        top: 20px;\r\n        right: 20px;\r\n        background: white;\r\n        border-radius: 16px;\r\n        padding: 16px 24px;\r\n        box-shadow: 0 15px 30px rgba(0,0,0,0.15);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        z-index: 3000;\r\n        animation: slideIn 0.3s ease;\r\n        max-width: 350px;\r\n        border-left: 4px solid;\r\n    }\r\n    \r\n    .notificacion.success { border-left-color: var(--primary); }\r\n    .notificacion.error { border-left-color: var(--danger); }\r\n    \r\n    @keyframes slideIn {\r\n        from { transform: translateX(50px); opacity: 0; }\r\n        to { transform: translateX(0); opacity: 1; }\r\n    }\r\n    \r\n    .spinner {\r\n        display: inline-block;\r\n        width: 20px;\r\n        height: 20px;\r\n        border: 3px solid rgba(255,255,255,0.3);\r\n        border-radius: 50%;\r\n        border-top-color: white;\r\n        animation: spin 1s linear infinite;\r\n    }\r\n    \r\n    @keyframes spin {\r\n        to { transform: rotate(360deg); }\r\n    }\r\n    \r\n    .carrito-vacio {\r\n        text-align: center;\r\n        padding: 40px 20px;\r\n        color: var(--dark);\r\n    }\r\n    \r\n    .btn-seguir-comprando {\r\n        padding: 10px 20px;\r\n        background: var(--primary);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-weight: bold;\r\n        margin-top: 15px;\r\n    }\r\n    \r\n    @media (max-width: 768px) {\r\n        .productos-grid { grid-template-columns: 1fr; }\r\n        .carrito-flotante { max-width: 100%; }\r\n        .logo-text h1 { font-size: 22px; }\r\n        .logo-text p { font-size: 12px; }\r\n        .ecommerce-header { padding: 10px 15px; }\r\n        \r\n        .form-row {\r\n            grid-template-columns: 1fr;\r\n            gap: 0;\r\n        }\r\n        \r\n        .form-group.full-width {\r\n            grid-column: span 1;\r\n        }\r\n        \r\n        .checkout-content {\r\n            max-height: 90vh;\r\n        }\r\n        \r\n        .checkout-header {\r\n            padding: 18px 22px;\r\n        }\r\n        \r\n        .checkout-header h2 {\r\n            font-size: 20px;\r\n        }\r\n        \r\n        .checkout-body {\r\n            padding: 20px;\r\n        }\r\n        \r\n        .payment-methods {\r\n            flex-direction: column;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"ecommerce-container\">\r\n    <!-- Header -->\r\n    <div class=\"ecommerce-header\">\r\n        <div class=\"logo-area\">\r\n            <div class=\"logo-text\">\r\n                <h1>\ud83c\udf54 FASTFOOD<\/h1>\r\n                <p>COMIDA R\u00c1PIDA CON DELIVERY<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"cart-icon\" onclick=\"abrirCarrito()\">\r\n            <span class=\"dashicons dashicons-cart\"><\/span>\r\n            <span>Mi Compra<\/span>\r\n            <span class=\"cart-count\" id=\"cart-count\">0<\/span>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <!-- Tasa BCV (visible) -->\r\n    <div class=\"tasa-bcv\">\r\n        <span>\ud83d\udcb0 Tasa oficial:<\/span>\r\n        <span class=\"tasa-valor\" id=\"tasa-valor\">Calculando...<\/span>\r\n        <span id=\"tasa-fecha\" style=\"font-size:12px; color:#888;\"><\/span>\r\n    <\/div>\r\n    \r\n    <!-- Grid de productos -->\r\n    <div class=\"productos-grid\" id=\"productos-grid\"><\/div>\r\n<\/div>\r\n\r\n<!-- Carrito flotante -->\r\n<div class=\"carrito-flotante\" id=\"carrito-flotante\">\r\n    <div class=\"carrito-header\">\r\n        <h2>\r\n            <span class=\"dashicons dashicons-cart\"><\/span> \r\n            Mi Carrito (<span id=\"cart-count-header\">0<\/span>)\r\n        <\/h2>\r\n        <button class=\"cerrar-carrito\" onclick=\"cerrarCarrito()\">\u00d7<\/button>\r\n    <\/div>\r\n    \r\n    <div class=\"carrito-items\" id=\"carrito-items\"><\/div>\r\n    \r\n    <div class=\"carrito-footer\" id=\"carrito-footer\" style=\"display: none;\">\r\n        <div class=\"carrito-totales\">\r\n            <div class=\"carrito-total\">\r\n                <span>Total USD:<\/span>\r\n                <span id=\"total-usd\">$0,00<\/span>\r\n            <\/div>\r\n            <div class=\"carrito-total-bs\">\r\n                <span>Total Bs:<\/span>\r\n                <span id=\"total-bs\">Bs. 0,00<\/span>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"carrito-acciones\">\r\n            <button class=\"btn-vaciar\" onclick=\"vaciarCarrito()\">\r\n                <span class=\"dashicons dashicons-trash\"><\/span> Vaciar\r\n            <\/button>\r\n            <button class=\"btn-checkout\" onclick=\"abrirCheckout()\">\r\n                <span class=\"dashicons dashicons-checkout\"><\/span> Confirmar Pedido\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Modal Checkout -->\r\n<div class=\"checkout-modal\" id=\"checkout-modal\">\r\n    <div class=\"checkout-content\">\r\n        <div class=\"checkout-header\">\r\n            <h2>\r\n                <span class=\"dashicons dashicons-cart\"><\/span> \r\n                Finalizar Compra\r\n            <\/h2>\r\n            <button class=\"cerrar-modal\" onclick=\"cerrarCheckout()\">\u00d7<\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"checkout-body\">\r\n            <form id=\"form-checkout\" onsubmit=\"event.preventDefault(); return false;\">\r\n                <!-- Secci\u00f3n Datos de Contacto -->\r\n                <div class=\"form-section\">\r\n                    <h3>\r\n                        <span class=\"dashicons dashicons-admin-users\"><\/span>\r\n                        Datos de Contacto\r\n                    <\/h3>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label>Nombre completo *<\/label>\r\n                        <input type=\"text\" id=\"cliente-nombre\" required placeholder=\"Ej: Juan P\u00e9rez\">\r\n                    <\/div>\r\n                    \r\n                    <div class=\"form-row\">\r\n                        <div class=\"form-group\">\r\n                            <label>Tel\u00e9fono *<\/label>\r\n                            <input type=\"tel\" id=\"cliente-telefono\" required placeholder=\"Ej: 0412-1234567\">\r\n                        <\/div>\r\n                        \r\n                        <div class=\"form-group\">\r\n                            <label>Email<\/label>\r\n                            <input type=\"email\" id=\"cliente-email\" placeholder=\"Opcional\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label>Direcci\u00f3n de entrega *<\/label>\r\n                        <textarea id=\"cliente-direccion\" required rows=\"2\" placeholder=\"Ej: Av. Principal, Edif. Centro, Caracas\"><\/textarea>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- Secci\u00f3n Datos de Pago con 3 m\u00e9todos -->\r\n                <div class=\"form-section\">\r\n                    <h3>\r\n                        <span class=\"dashicons dashicons-money-alt\"><\/span>\r\n                        M\u00e9todo de Pago\r\n                    <\/h3>\r\n                    \r\n                    <div class=\"payment-methods\">\r\n                        <div class=\"payment-option\">\r\n                            <input type=\"radio\" name=\"metodo_pago\" id=\"pago-transferencia\" value=\"transferencia\" checked>\r\n                            <label for=\"pago-transferencia\">\r\n                                <span class=\"dashicons dashicons-building\"><\/span>\r\n                                <span>Transferencia<\/span>\r\n                            <\/label>\r\n                        <\/div>\r\n                        <div class=\"payment-option\">\r\n                            <input type=\"radio\" name=\"metodo_pago\" id=\"pago-pagomovil\" value=\"pagomovil\">\r\n                            <label for=\"pago-pagomovil\">\r\n                                <span class=\"dashicons dashicons-smartphone\"><\/span>\r\n                                <span>Pago M\u00f3vil<\/span>\r\n                            <\/label>\r\n                        <\/div>\r\n                        <div class=\"payment-option\">\r\n                            <input type=\"radio\" name=\"metodo_pago\" id=\"pago-credito\" value=\"credito\">\r\n                            <label for=\"pago-credito\">\r\n                                <span class=\"dashicons dashicons-clock\"><\/span>\r\n                                <span>Cr\u00e9dito<\/span>\r\n                            <\/label>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <!-- Informaci\u00f3n de pago din\u00e1mica seg\u00fan el m\u00e9todo seleccionado -->\r\n                    <div class=\"payment-info-card\" id=\"payment-info-card\">\r\n                        <div class=\"payment-info-grid\" id=\"payment-info-content\">\r\n                            <!-- Contenido din\u00e1mico seg\u00fan m\u00e9todo de pago -->\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label>Referencia \/ Autorizaci\u00f3n *<\/label>\r\n                        <input type=\"text\" id=\"pago-referencia\" required placeholder=\"N\u00famero de operaci\u00f3n o autorizaci\u00f3n\">\r\n                    <\/div>\r\n                    \r\n                    <div class=\"file-upload-area\" id=\"file-upload-area\" onclick=\"document.getElementById('pago-comprobante').click()\">\r\n                        <span class=\"dashicons dashicons-upload\"><\/span>\r\n                        <p>Haz clic para subir el comprobante<\/p>\r\n                        <p style=\"font-size: 12px;\">JPG, PNG o PDF \u00b7 M\u00e1x 5MB<\/p>\r\n                        <div class=\"file-name\" id=\"file-name\"><\/div>\r\n                    <\/div>\r\n                    \r\n                    <input type=\"file\" id=\"pago-comprobante\" accept=\"image\/*,.pdf\" onchange=\"updateFileName(this)\">\r\n                <\/div>\r\n                \r\n                <!-- Secci\u00f3n Resumen -->\r\n                <div class=\"form-section\">\r\n                    <h3>\r\n                        <span class=\"dashicons dashicons-list-view\"><\/span>\r\n                        Resumen del Pedido\r\n                    <\/h3>\r\n                    \r\n                    <div class=\"order-summary-card\">\r\n                        <div class=\"summary-items\" id=\"resumen-pedido-items\">\r\n                            <!-- Los items se cargar\u00e1n din\u00e1micamente -->\r\n                        <\/div>\r\n                        \r\n                        <div class=\"summary-total\" id=\"resumen-total\">\r\n                            <span>TOTAL USD:<\/span>\r\n                            <span>$0.00<\/span>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"summary-bs\" id=\"resumen-bs\">\r\n                            Bs. 0,00\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <button type=\"button\" class=\"btn-procesar\" id=\"btn-procesar\" onclick=\"procesarPedido()\">\r\n                    <span class=\"dashicons dashicons-yes-alt\"><\/span> Confirmar Pedido\r\n                <\/button>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ Configuraci\u00f3n\r\nconst API_URL = 'https:\/\/comida.aftermarking.com\/api-productos.php';\r\nconst AJAX_URL = 'https:\/\/comida.aftermarking.com\/wp-admin\/admin-ajax.php';\r\n\r\n\/\/ Variable para la tasa BCV (se cargar\u00e1 din\u00e1micamente)\r\nlet TASA_BCV = 36.50; \/\/ Valor por defecto inicial\r\nlet carrito = [];\r\nlet productos = [];\r\n\r\n\/\/ ===== FUNCI\u00d3N PARA CARGAR LA TASA BCV =====\r\nasync function cargarTasa() {\r\n    try {\r\n        const response = await fetch(`${AJAX_URL}?action=obtener_tasa_bcv_actual&t=${Date.now()}`);\r\n        const data = await response.json();\r\n        if (data.success && data.data && data.data.tasa) {\r\n            TASA_BCV = parseFloat(data.data.tasa);\r\n            document.getElementById('tasa-valor').innerText = `Bs. ${TASA_BCV.toLocaleString('es-VE', {minimumFractionDigits: 2})}`;\r\n            document.getElementById('tasa-fecha').innerText = `(${data.data.fecha || ''})`;\r\n            console.log('\u2705 Tasa BCV cargada:', TASA_BCV);\r\n        } else {\r\n            document.getElementById('tasa-valor').innerText = `Bs. ${TASA_BCV.toFixed(2)} (Manual)`;\r\n        }\r\n    } catch (e) {\r\n        console.error('Error al cargar tasa:', e);\r\n        document.getElementById('tasa-valor').innerText = `Bs. ${TASA_BCV.toFixed(2)} (Manual)`;\r\n    }\r\n}\r\n\r\n\/\/ ===== FUNCI\u00d3N PARA ACTUALIZAR INFO DE PAGO SEG\u00daN M\u00c9TODO SELECCIONADO =====\r\nfunction actualizarInfoPago() {\r\n    const metodoSeleccionado = document.querySelector('input[name=\"metodo_pago\"]:checked').value;\r\n    const infoContainer = document.getElementById('payment-info-content');\r\n    \r\n    let contenido = '';\r\n    \r\n    if (metodoSeleccionado === 'transferencia') {\r\n        contenido = `\r\n            <span class=\"label\">\ud83c\udfe6 Banco:<\/span>\r\n            <span class=\"value\"><strong>BANCO VENEZUELA<\/strong><\/span>\r\n            <span class=\"label\">\ud83d\udcc4 CI:<\/span>\r\n            <span class=\"value\"><strong>C.I: 13918008<\/strong><\/span>\r\n            <span class=\"label\">\ud83d\udcf1 Tel\u00e9fono:<\/span>\r\n            <span class=\"value\"><strong>0422-6425127<\/strong><\/span>\r\n            <span class=\"label\">\ud83d\udcb0 Cuenta:<\/span>\r\n            <span class=\"value\"><strong>0102-0363510000088255<\/strong><\/span>\r\n        `;\r\n    } else if (metodoSeleccionado === 'pagomovil') {\r\n        contenido = `\r\n            <span class=\"label\">\ud83d\udcf1 Tel\u00e9fono:<\/span>\r\n            <span class=\"value\"><strong>0422-6425127<\/strong><\/span>\r\n            <span class=\"label\">\ud83d\udcc4 CI\/RIF:<\/span>\r\n            <span class=\"value\"><strong>C.I: 13918008<\/strong><\/span>\r\n            <span class=\"label\">\ud83c\udfe6 Banco:<\/span>\r\n            <span class=\"value\"><strong>BANCO VENEZUELA<\/strong><\/span>\r\n        `;\r\n    } else if (metodoSeleccionado === 'credito') {\r\n        contenido = `\r\n            <span class=\"label\">\ud83d\udccb Modalidad:<\/span>\r\n            <span class=\"value\"><strong>Cr\u00e9dito<\/strong><\/span>\r\n            <span class=\"label\">\u23f0 Plazo:<\/span>\r\n            <span class=\"value\"><strong>7 d\u00edas para el pago<\/strong><\/span>\r\n            <span class=\"label\">\ud83d\udce6 Entrega:<\/span>\r\n            <span class=\"value\"><strong>Se entrega la mercanc\u00eda al momento<\/strong><\/span>\r\n            <span class=\"label\">\ud83d\udcde Contacto:<\/span>\r\n            <span class=\"value\"><strong>0422-6425127<\/strong><\/span>\r\n        `;\r\n    }\r\n    \r\n    infoContainer.innerHTML = contenido;\r\n}\r\n\r\n\/\/ ===== INICIALIZAR TIENDA =====\r\nasync function inicializarTienda() {\r\n    await cargarTasa();\r\n    await cargarProductos();\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    console.log('\ud83d\udecd\ufe0f Tienda El Mundo De Las Bolsas lista');\r\n    \r\n    \/\/ Cargar carrito guardado\r\n    const guardado = localStorage.getItem('carrito_fruter\u00eda');\r\n    if (guardado) {\r\n        try {\r\n            carrito = JSON.parse(guardado);\r\n        } catch (e) {\r\n            carrito = [];\r\n        }\r\n    }\r\n    \r\n    \/\/ Inicializar tienda (carga tasa primero, luego productos)\r\n    inicializarTienda();\r\n    actualizarCarrito();\r\n    \r\n    \/\/ Escuchar cambios en el m\u00e9todo de pago\r\n    const radios = document.querySelectorAll('input[name=\"metodo_pago\"]');\r\n    radios.forEach(radio => {\r\n        radio.addEventListener('change', actualizarInfoPago);\r\n    });\r\n    actualizarInfoPago();\r\n});\r\n\r\nfunction cargarProductos() {\r\n    fetch(API_URL + '?nocache=' + Date.now())\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            if (data.success && data.data?.length) {\r\n                productos = data.data;\r\n                renderizarProductos();\r\n            } else {\r\n                throw new Error('No hay productos disponibles');\r\n            }\r\n        })\r\n        .catch(error => {\r\n            document.getElementById('productos-grid').innerHTML = `\r\n                <div style=\"text-align: center; padding: 50px; background: #fee; border-radius: 10px; grid-column: 1\/-1;\">\r\n                    <h3 style=\"color: var(--danger);\">\u26a0\ufe0f Error<\/h3>\r\n                    <p>${error.message}<\/p>\r\n                <\/div>\r\n            `;\r\n        });\r\n}\r\n\r\nfunction renderizarProductos() {\r\n    const grid = document.getElementById('productos-grid');\r\n    \r\n    grid.innerHTML = productos.map(p => {\r\n        const icono = p.tipo_producto === 'Granel' ? 'clipboard' : 'food';\r\n        \r\n        return `\r\n            <div class=\"producto-card\">\r\n                ${p.tipo_producto === 'Granel' ? '<div class=\"producto-badge\">Por peso<\/div>' : ''}\r\n                <div class=\"producto-imagen\">\r\n                    ${p.img ? \r\n                        `<img decoding=\"async\" src=\"${p.img}\" alt=\"${p.nombre}\" onerror=\"this.onerror=null; this.style.display='none'; this.parentNode.innerHTML='<span class=\\'dashicons dashicons-${icono}\\' style=\\'font-size:64px;\\'><\/span>';\">` : \r\n                        `<span class=\"dashicons dashicons-${icono}\" style=\"font-size: 64px;\"><\/span>`\r\n                    }\r\n                <\/div>\r\n                <div class=\"producto-info\">\r\n                    <div class=\"producto-nombre\">${p.nombre}<\/div>\r\n                  \r\n                    <div class=\"producto-precio\">\r\n                        \u2248 <span>Bs. ${(p.precio * TASA_BCV).toLocaleString('es-VE', {minimumFractionDigits: 2})}<\/span>\r\n                    <\/div>\r\n                      <div class=\"producto-precio-bs\">\r\n                        $${parseFloat(p.precio).toFixed(2).replace('.', ',')} \r\n                        <small>${p.tipo_producto === 'Granel' ? '\/kg' : ''}<\/small>\r\n                    <\/div>\r\n                    <div class=\"producto-stock\">\r\n                        Disponible: <span>${p.stock} ${p.tipo_producto === 'Granel' ? 'kg' : 'unid'}<\/span>\r\n                    <\/div>\r\n                    <span class=\"producto-tipo\">${p.tipo_producto}<\/span>\r\n                    \r\n                    <button class=\"btn-agregar\" onclick=\"agregarAlCarrito(${p.id})\">\r\n                        <span class=\"dashicons dashicons-cart\"><\/span> Agregar al carrito\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n    }).join('');\r\n}\r\n\r\nfunction agregarAlCarrito(productoId) {\r\n    const producto = productos.find(p => p.id == productoId);\r\n    if (!producto) return;\r\n    \r\n    let cantidad = 1;\r\n    \r\n    if (producto.tipo_producto === 'Granel') {\r\n        const kg = prompt(`Cantidad en kg para ${producto.nombre} (M\u00e1x: ${producto.stock}kg):`, '0.5');\r\n        if (!kg) return;\r\n        cantidad = parseFloat(kg);\r\n    } else {\r\n        const cant = prompt(`Cantidad de ${producto.nombre} (M\u00e1x: ${producto.stock}):`, '1');\r\n        if (!cant) return;\r\n        cantidad = parseInt(cant);\r\n    }\r\n    \r\n    if (isNaN(cantidad) || cantidad <= 0 || cantidad > producto.stock) {\r\n        alert('\u274c Cantidad no v\u00e1lida');\r\n        return;\r\n    }\r\n    \r\n    const existente = carrito.find(item => item.id == producto.id);\r\n    if (existente) {\r\n        if (existente.cantidad + cantidad > producto.stock) {\r\n            alert('\u274c Stock insuficiente');\r\n            return;\r\n        }\r\n        existente.cantidad += cantidad;\r\n    } else {\r\n        carrito.push({\r\n            id: producto.id,\r\n            nombre: producto.nombre,\r\n            precio: parseFloat(producto.precio),\r\n            cantidad: cantidad,\r\n            tipo: producto.tipo_producto,\r\n            stock: producto.stock,\r\n            img: producto.img\r\n        });\r\n    }\r\n    \r\n    localStorage.setItem('carrito_fruter\u00eda', JSON.stringify(carrito));\r\n    actualizarCarrito();\r\n    mostrarNotificacion(`\u2705 ${cantidad} ${producto.tipo_producto === 'Granel' ? 'kg' : ''} ${producto.nombre} agregado`, 'success');\r\n    abrirCarrito();\r\n}\r\n\r\nfunction actualizarCarrito() {\r\n    const items = document.getElementById('carrito-items');\r\n    const count = document.getElementById('cart-count');\r\n    const countHeader = document.getElementById('cart-count-header');\r\n    const totalUSD = document.getElementById('total-usd');\r\n    const totalBS = document.getElementById('total-bs');\r\n    const footer = document.getElementById('carrito-footer');\r\n    \r\n    let subtotal = 0;\r\n    \r\n    if (carrito.length === 0) {\r\n        items.innerHTML = `\r\n            <div class=\"carrito-vacio\">\r\n                <span class=\"dashicons dashicons-cart\" style=\"font-size: 48px;\"><\/span>\r\n                <p>Tu carrito est\u00e1 vac\u00edo<\/p>\r\n                <button class=\"btn-seguir-comprando\" onclick=\"cerrarCarrito()\">Ver productos<\/button>\r\n            <\/div>\r\n        `;\r\n        footer.style.display = 'none';\r\n    } else {\r\n        items.innerHTML = carrito.map((item, i) => {\r\n            const itemTotal = item.precio * item.cantidad;\r\n            const itemTotalBs = itemTotal * TASA_BCV;\r\n            subtotal += itemTotal;\r\n            return `\r\n                <div class=\"carrito-item\">\r\n                    <div class=\"item-header\">\r\n                        <span class=\"item-nombre\">${item.nombre}<\/span>\r\n                        <div style=\"text-align: right;\">\r\n                            <div class=\"item-precio\">Bs. ${itemTotalBs.toLocaleString('es-VE', {minimumFractionDigits: 2})}<\/div>\r\n                            <div class=\"item-precio-bs\">$${itemTotal.toFixed(2).replace('.', ',')}<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"item-detalles\">\r\n                        <div class=\"item-cantidad-control\">\r\n                            <button class=\"cantidad-btn\" onclick=\"cambiarCantidad(${i}, -1)\" ${item.cantidad <= 1 ? 'disabled' : ''}>\u2212<\/button>\r\n                            <span class=\"item-cantidad\">${item.cantidad} ${item.tipo === 'Granel' ? 'kg' : ''}<\/span>\r\n                            <button class=\"cantidad-btn\" onclick=\"cambiarCantidad(${i}, 1)\" ${item.cantidad >= item.stock ? 'disabled' : ''}>+<\/button>\r\n                        <\/div>\r\n                        <button class=\"eliminar-item\" onclick=\"eliminarDelCarrito(${i})\">\r\n                            <span class=\"dashicons dashicons-trash\"><\/span>\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n        }).join('');\r\n        footer.style.display = 'block';\r\n    }\r\n    \r\n    count.textContent = carrito.length;\r\n    countHeader.textContent = carrito.length;\r\n    totalUSD.textContent = '$' + subtotal.toFixed(2).replace('.', ',');\r\n    totalBS.textContent = 'Bs. ' + (subtotal * TASA_BCV).toLocaleString('es-VE', {minimumFractionDigits: 2});\r\n}\r\n\r\nfunction cambiarCantidad(index, delta) {\r\n    const item = carrito[index];\r\n    const nueva = item.cantidad + delta;\r\n    if (nueva >= 1 && nueva <= item.stock) {\r\n        item.cantidad = nueva;\r\n        localStorage.setItem('carrito_fruter\u00eda', JSON.stringify(carrito));\r\n        actualizarCarrito();\r\n    }\r\n}\r\n\r\nfunction eliminarDelCarrito(index) {\r\n    const item = carrito[index];\r\n    if (confirm(`\u00bfEliminar ${item.nombre} del carrito?`)) {\r\n        carrito.splice(index, 1);\r\n        localStorage.setItem('carrito_fruter\u00eda', JSON.stringify(carrito));\r\n        actualizarCarrito();\r\n    }\r\n}\r\n\r\nfunction vaciarCarrito() {\r\n    if (carrito.length && confirm('\u00bfVaciar todo el carrito?')) {\r\n        carrito = [];\r\n        localStorage.removeItem('carrito_fruter\u00eda');\r\n        actualizarCarrito();\r\n    }\r\n}\r\n\r\nfunction abrirCarrito() {\r\n    document.getElementById('carrito-flotante').classList.add('abierto');\r\n}\r\n\r\nfunction cerrarCarrito() {\r\n    document.getElementById('carrito-flotante').classList.remove('abierto');\r\n}\r\n\r\nfunction abrirCheckout() {\r\n    if (carrito.length === 0) {\r\n        alert('Agrega productos al carrito');\r\n        return;\r\n    }\r\n    \r\n    \/\/ Actualizar resumen en el modal\r\n    const itemsContainer = document.getElementById('resumen-pedido-items');\r\n    const totalContainer = document.getElementById('resumen-total');\r\n    const bsContainer = document.getElementById('resumen-bs');\r\n    \r\n    let subtotal = 0;\r\n    \r\n    itemsContainer.innerHTML = carrito.map(item => {\r\n        const total = item.precio * item.cantidad;\r\n        subtotal += total;\r\n        return `\r\n            <div class=\"summary-item\">\r\n                <div class=\"product-info\">\r\n                    <span class=\"product-name\">${item.nombre}<\/span>\r\n                    <span class=\"product-qty\">${item.cantidad} ${item.tipo === 'Granel' ? 'kg' : 'unid'}<\/span>\r\n                <\/div>\r\n                <span class=\"product-total\">Bs. ${(total * TASA_BCV).toLocaleString('es-VE', {minimumFractionDigits: 2})}<\/span>\r\n            <\/div>\r\n        `;\r\n    }).join('');\r\n    \r\n    totalContainer.innerHTML = `\r\n        <span>TOTAL USD:<\/span>\r\n        <span>$${subtotal.toFixed(2).replace('.', ',')}<\/span>\r\n    `;\r\n    \r\n    bsContainer.innerHTML = `Bs. ${(subtotal * TASA_BCV).toLocaleString('es-VE', {minimumFractionDigits: 2})}`;\r\n    \r\n    document.getElementById('checkout-modal').style.display = 'flex';\r\n    cerrarCarrito();\r\n}\r\n\r\nfunction cerrarCheckout() {\r\n    document.getElementById('checkout-modal').style.display = 'none';\r\n    document.getElementById('form-checkout').reset();\r\n    \r\n    \/\/ Resetear file input\r\n    document.getElementById('file-name').style.display = 'none';\r\n    document.getElementById('file-name').innerHTML = '';\r\n}\r\n\r\nfunction updateFileName(input) {\r\n    const fileName = document.getElementById('file-name');\r\n    if (input.files && input.files[0]) {\r\n        fileName.style.display = 'block';\r\n        fileName.innerHTML = `\ud83d\udcce ${input.files[0].name}`;\r\n    }\r\n}\r\n\r\nfunction procesarPedido() {\r\n    const nombre = document.getElementById('cliente-nombre').value;\r\n    const telefono = document.getElementById('cliente-telefono').value;\r\n    const direccion = document.getElementById('cliente-direccion').value;\r\n    const referencia = document.getElementById('pago-referencia').value;\r\n    const comprobante = document.getElementById('pago-comprobante').files[0];\r\n    const metodoPago = document.querySelector('input[name=\"metodo_pago\"]:checked').value;\r\n    \r\n    \/\/ Validaciones mejoradas\r\n    const errores = [];\r\n    if (!nombre) errores.push('Nombre');\r\n    if (!telefono) errores.push('Tel\u00e9fono');\r\n    if (!direccion) errores.push('Direcci\u00f3n');\r\n    if (!referencia) errores.push('Referencia');\r\n    if (!comprobante) errores.push('Comprobante');\r\n    \r\n    if (errores.length > 0) {\r\n        mostrarNotificacion(`Campos requeridos: ${errores.join(', ')}`, 'error');\r\n        return;\r\n    }\r\n    \r\n    \/\/ Validar tipo de archivo\r\n    const tiposPermitidos = ['image\/jpeg', 'image\/png', 'image\/jpg', 'application\/pdf'];\r\n    if (!tiposPermitidos.includes(comprobante.type)) {\r\n        mostrarNotificacion('Tipo de archivo no permitido. Usa JPG, PNG o PDF', 'error');\r\n        return;\r\n    }\r\n    \r\n    \/\/ Validar tama\u00f1o (5MB m\u00e1ximo)\r\n    if (comprobante.size > 5 * 1024 * 1024) {\r\n        mostrarNotificacion('El archivo no puede ser mayor a 5MB', 'error');\r\n        return;\r\n    }\r\n    \r\n    \/\/ Calcular total\r\n    const subtotal = carrito.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);\r\n    const totalBs = subtotal * TASA_BCV;\r\n    \r\n    \/\/ Preparar datos para enviar\r\n    const formData = new FormData();\r\n    formData.append('action', 'procesar_pedido_fruteria');\r\n    \r\n    const cliente = {\r\n        nombre: nombre.trim(),\r\n        telefono: telefono.trim(),\r\n        direccion: direccion.trim(),\r\n        email: document.getElementById('cliente-email').value.trim() || '',\r\n        referencia: referencia.trim(),\r\n        metodo_pago: metodoPago\r\n    };\r\n    \r\n    formData.append('cliente', JSON.stringify(cliente));\r\n    formData.append('carrito', JSON.stringify(carrito));\r\n    formData.append('total', subtotal.toString());\r\n    formData.append('tasa_bcv', TASA_BCV.toString());\r\n    formData.append('comprobante', comprobante);\r\n    \r\n    \/\/ Mostrar loading\r\n    const btn = document.getElementById('btn-procesar');\r\n    const textoOriginal = btn.innerHTML;\r\n    btn.disabled = true;\r\n    btn.innerHTML = '<span class=\"spinner\"><\/span> Procesando...';\r\n    \r\n    \/\/ Enviar a WordPress\r\n    fetch(AJAX_URL, {\r\n        method: 'POST',\r\n        body: formData,\r\n    })\r\n    .then(response => {\r\n        console.log('Status:', response.status);\r\n        if (!response.ok) {\r\n            return response.text().then(text => {\r\n                console.log('Error response text:', text);\r\n                throw new Error(`HTTP error ${response.status}: ${text.substring(0, 200)}`);\r\n            });\r\n        }\r\n        return response.json();\r\n    })\r\n    .then(data => {\r\n        console.log('Respuesta del servidor:', data);\r\n        \r\n        if (data.success) {\r\n            let mensajeExito = '\u2705 \u00a1Pedido procesado correctamente!';\r\n            let numeroPedido = 'N\/A';\r\n            \r\n            if (data.data) {\r\n                if (typeof data.data === 'object') {\r\n                    mensajeExito = data.data.mensaje || mensajeExito;\r\n                    numeroPedido = data.data.numero_pedido || numeroPedido;\r\n                } else if (typeof data.data === 'string') {\r\n                    mensajeExito = data.data;\r\n                }\r\n            }\r\n            \r\n            mostrarNotificacion(mensajeExito, 'success');\r\n            \r\n            \/\/ Crear mensaje para WhatsApp con m\u00e9todo de pago\r\n            let metodoTexto = '';\r\n            if (metodoPago === 'transferencia') metodoTexto = '\ud83c\udfe6 Transferencia Bancaria';\r\n            else if (metodoPago === 'pagomovil') metodoTexto = '\ud83d\udcf1 Pago M\u00f3vil';\r\n            else metodoTexto = '\ud83d\udccb Cr\u00e9dito - Pago a 7 d\u00edas';\r\n            \r\n            let mensaje = `\ud83d\udecd\ufe0f *NUEVO PEDIDO - EL MUNDO DE LAS BOLSAS* \ud83d\udecd\ufe0f\\n\\n`;\r\n            mensaje += `*Pedido #:* ${numeroPedido}\\n`;\r\n            mensaje += `*Cliente:* ${nombre}\\n`;\r\n            mensaje += `*Tel\u00e9fono:* ${telefono}\\n`;\r\n            mensaje += `*Direcci\u00f3n:* ${direccion}\\n`;\r\n            mensaje += `*M\u00e9todo de Pago:* ${metodoTexto}\\n`;\r\n            mensaje += `*Referencia:* ${referencia}\\n\\n`;\r\n            mensaje += `*PRODUCTOS:*\\n`;\r\n            \r\n            carrito.forEach(item => {\r\n                mensaje += `\u2022 ${item.nombre}: ${item.cantidad} ${item.tipo === 'Granel' ? 'kg' : 'unid'} - Bs. ${(item.precio * item.cantidad * TASA_BCV).toLocaleString('es-VE', {minimumFractionDigits: 2})}\\n`;\r\n            });\r\n            \r\n            mensaje += `\\n*TOTAL USD:* $${subtotal.toFixed(2)}`;\r\n            mensaje += `\\n*TOTAL BS:* Bs. ${totalBs.toLocaleString('es-VE', {minimumFractionDigits: 2})}`;\r\n            mensaje += `\\n*TASA:* Bs. ${TASA_BCV.toFixed(2)}`;\r\n            \r\n            if (metodoPago === 'credito') {\r\n                mensaje += `\\n\\n\u23f0 *CONDICI\u00d3N ESPECIAL:* Cr\u00e9dito concedido - Pago en 7 d\u00edas`;\r\n            }\r\n            \r\n            \/\/ Abrir WhatsApp\r\n            const mensajeCodificado = encodeURIComponent(mensaje);\r\n            window.open(`https:\/\/wa.me\/584226425127?text=${mensajeCodificado}`, '_blank');\r\n            \r\n            \/\/ Limpiar carrito\r\n            carrito = [];\r\n            localStorage.removeItem('carrito_fruter\u00eda');\r\n            actualizarCarrito();\r\n            cerrarCheckout();\r\n        } else {\r\n            let mensajeError = 'Error al procesar el pedido';\r\n            if (data.data) {\r\n                if (typeof data.data === 'object') {\r\n                    mensajeError = data.data.mensaje || mensajeError;\r\n                } else if (typeof data.data === 'string') {\r\n                    mensajeError = data.data;\r\n                }\r\n            }\r\n            mostrarNotificacion('\u274c ' + mensajeError, 'error');\r\n        }\r\n    })\r\n    .catch(error => {\r\n        console.error('Error completo:', error);\r\n        mostrarNotificacion('\u274c Error de conexi\u00f3n con el servidor', 'error');\r\n    })\r\n    .finally(() => {\r\n        btn.disabled = false;\r\n        btn.innerHTML = textoOriginal;\r\n    });\r\n}\r\n\r\nfunction mostrarNotificacion(mensaje, tipo) {\r\n    const notif = document.createElement('div');\r\n    notif.className = `notificacion ${tipo}`;\r\n    notif.innerHTML = `<span class=\"dashicons dashicons-${tipo === 'success' ? 'yes' : 'no'}\"><\/span><span>${mensaje}<\/span>`;\r\n    document.body.appendChild(notif);\r\n    setTimeout(() => notif.remove(), 3000);\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf54 FASTFOOD COMIDA R\u00c1PIDA CON DELIVERY Mi Compra 0 \ud83d\udcb0 Tasa oficial: Calculando&#8230; Mi Carrito (0) \u00d7 Total USD: $0,00 Total Bs: Bs. 0,00 Vaciar Confirmar Pedido Finalizar Compra \u00d7 Datos de Contacto Nombre completo * Tel\u00e9fono * Email Direcci\u00f3n de entrega * M\u00e9todo de Pago Transferencia Pago M\u00f3vil Cr\u00e9dito Referencia \/ Autorizaci\u00f3n * Haz [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":118,"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/comida.aftermarking.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}