Tul xxx Tul

Viewing: index.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VendeFácil</title>
    <meta name="theme-color" content="#0d6efd">
    <link rel="icon" type="image/png" href="assets/images/logo.png">
    <link rel="apple-touch-icon" href="assets/images/logo.png">
    <link rel="manifest" href="manifest.json?v=4">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #0d6efd;
            --secondary: #ffb703;
            --success: #0fa958;
            --dark: #1f1f1f;
            --text: #575757;
            --light: #f8f9fa;
            --header-height: 96px;
        }

        @media (min-width: 769px) {
            .btn-install-mobile.is-visible {
                display: none;
            }
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', sans-serif;
            color: var(--text);
            background-color: #fff;
            line-height: 1.6;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            display: block;
        }

        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 50;
            background: transparent;
            backdrop-filter: blur(6px);
            box-shadow: none;
            transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
        }

        .nav-container {
            max-width: 1200px;
            margin: auto;
            padding: 0.85rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            transition: padding 0.35s ease;
        }

        .menu-toggle {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            background: rgba(15, 23, 42, 0.35);
            backdrop-filter: blur(10px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
        }

        .menu-toggle:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28);
        }

        .menu-toggle__line {
            display: block;
            width: 20px;
            height: 2px;
            margin: 4px 0;
            background: #fff;
            border-radius: 999px;
            transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
        }

        .menu-toggle__line:nth-child(1),
        .menu-toggle__line:nth-child(3) {
            transform-origin: center;
        }

        header.menu-open .menu-toggle__line:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        header.menu-open .menu-toggle__line:nth-child(2) {
            opacity: 0;
        }

        header.menu-open .menu-toggle__line:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

        header.scrolled .menu-toggle {
            border-color: rgba(15, 23, 42, 0.12);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
        }

        header.scrolled .menu-toggle__line {
            background: var(--dark);
        }

        header.menu-open .menu-toggle {
            border-color: var(--primary);
            background: rgba(255, 255, 255, 0.98);
        }

        header.menu-open .menu-toggle__line {
            background: var(--dark);
        }

        header.scrolled {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
        }

        header.scrolled .nav-container {
            padding: 0.65rem 1.25rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: var(--dark);
        }

        .logo img {
            width: 76px;
            height: 76px;
            object-fit: contain;
        }

        .logo strong {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #fff;
            transition: color 0.35s ease;
        }

        .logo-word {
            display: inline-block;
        }

        .logo-word--com {
            margin-right: 0.35rem;
        }

        header.scrolled .logo strong {
            color: var(--dark);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .nav-controls {
            display: none;
            align-items: center;
            gap: 0.85rem;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 1.25rem;
        }

        nav a {
            text-decoration: none;
            color: #fff;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        nav a::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            margin-top: 4px;
            background: var(--primary);
            transition: width 0.2s ease;
        }

        nav a:hover {
            color: var(--secondary);
        }

        nav a:hover::after {
            width: 100%;
        }

        header.scrolled nav a {
            color: var(--dark);
        }

        header.scrolled nav a::after {
            background: var(--primary);
        }

        .btn-login {
            text-decoration: none;
            padding: 0.55rem 1.35rem;
            border-radius: 999px;
            font-weight: 600;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(4px);
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border 0.2s ease;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 35px rgba(13, 110, 253, 0.4);
        }

        .btn-cart {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border-radius: 999px;
            border: none;
            color: #fff;
            background: linear-gradient(135deg, #2563eb 0%, #5a7dff 55%, #7c3aed 120%);
            box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

        .btn-cart:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 38px rgba(37, 99, 235, 0.42);
            filter: saturate(1.05);
        }

        header.scrolled .btn-cart {
            background: linear-gradient(135deg, #2563eb 0%, #5a7dff 55%, #7c3aed 120%);
            box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
        }

        .btn-cart__icon {
            width: 20px;
            height: 20px;
            display: block;
        }

        .cart-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            min-width: 22px;
            height: 22px;
            padding: 0 7px;
            border-radius: 999px;
            background: #ef4444;
            color: #fff;
            font-size: 0.72rem;
            font-weight: 800;
            border: 2px solid #fff;
            box-shadow: 0 10px 18px rgba(239, 68, 68, 0.35);
            display: none;
            align-items: center;
            justify-content: center;
        }

        .alert-container {
            position: fixed;
            top: calc(var(--header-height) + 14px);
            right: 18px;
            z-index: 120;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: min(360px, calc(100vw - 36px));
        }

        .alert-item {
            padding: 0.85rem 1rem;
            border-radius: 16px;
            color: #0f172a;
            background: #fff;
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
            border: 1px solid rgba(15, 23, 42, 0.08);
            font-weight: 600;
        }

        .alert-success {
            border-color: rgba(16, 185, 129, 0.25);
            background: rgba(16, 185, 129, 0.12);
        }

        .alert-warning {
            border-color: rgba(245, 158, 11, 0.25);
            background: rgba(245, 158, 11, 0.12);
        }

        .alert-error {
            border-color: rgba(239, 68, 68, 0.25);
            background: rgba(239, 68, 68, 0.12);
        }

        .cart-modal,
        .checkout-modal {
            position: fixed;
            inset: 0;
            background: rgba(7, 17, 36, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            z-index: 110;
        }

        .cart-modal.show,
        .checkout-modal.show {
            display: flex;
        }

        .cart-modal__content,
        .checkout-modal__content {
            background: #fff;
            border-radius: 24px;
            box-shadow: 0 25px 55px rgba(15, 23, 42, 0.25);
            width: min(980px, 100%);
            overflow: hidden;
        }

        .checkout-modal__content {
            width: min(480px, 100%);
        }

        .cart-modal__header,
        .checkout-modal__header {
            padding: 1.25rem 1.5rem;
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .checkout-modal__header {
            padding: 1rem 1.25rem;
        }

        .cart-modal__title,
        .checkout-modal__title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--dark);
        }

        .cart-modal-close,
        .checkout-modal-close {
            width: 44px;
            height: 44px;
            border-radius: 999px;
            border: none;
            background: rgba(15, 23, 42, 0.08);
            cursor: pointer;
            font-size: 1.4rem;
            line-height: 1;
            color: var(--dark);
        }

        .cart-modal__body,
        .checkout-modal__body {
            padding: 1.5rem;
        }

        .checkout-modal__body {
            padding: 0.95rem 1.1rem;
        }

        .checkout-modal__footer {
            padding: 0.75rem 1.1rem;
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.5rem;
            flex-wrap: nowrap;
        }

        .checkout-modal__footer .btn-cart-action {
            padding: 0.5rem 0.85rem;
            font-size: 0.78rem;
            white-space: nowrap;
        }

        .cart-table {
            width: 100%;
            border-collapse: collapse;
        }

        .cart-table th,
        .cart-table td {
            padding: 0.75rem 0.6rem;
            border-bottom: 1px solid rgba(15, 23, 42, 0.08);
            text-align: left;
            vertical-align: middle;
            font-size: 0.92rem;
            color: var(--dark);
        }

        .cart-table th {
            font-size: 0.82rem;
            color: rgba(15, 23, 42, 0.7);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .cart-table__image {
            width: 64px;
        }

        .cart-table__image img {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 14px;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
        }

        .cart-qty {
            width: 92px;
            padding: 0.5rem 0.6rem;
            border-radius: 12px;
            border: 1px solid rgba(15, 23, 42, 0.15);
            font-weight: 600;
        }

        .btn-cart-action {
            border: none;
            border-radius: 999px;
            padding: 0.6rem 1.05rem;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.85rem;
        }

        .btn-cart-secondary {
            background: rgba(15, 23, 42, 0.08);
            color: var(--dark);
        }

        .btn-cart-primary {
            background: linear-gradient(120deg, var(--primary), #5a7dff);
            color: #fff;
        }

        .btn-remove {
            background: rgba(239, 68, 68, 0.14);
            color: #b91c1c;
        }

        .cart-modal__footer {
            padding: 1.25rem 1.5rem;
            background: var(--light);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .cart-modal__total {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--dark);
        }

        .cart-footer-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: flex-end;
            width: 100%;
        }

        .checkout-footer-actions {
            display: flex;
            gap: 0.75rem;
            justify-content: flex-end;
            width: 100%;
            flex-wrap: nowrap;
        }

        .checkout-footer-actions .btn-cart-action {
            width: auto;
            white-space: nowrap;
        }

        @media (min-width: 720px) {
            .cart-footer-actions {
                width: auto;
            }
        }

        .checkout-form {
            display: grid;
            gap: 0.65rem;
        }

        @media (min-width: 680px) {
            .checkout-form {
                grid-template-columns: 1fr 1fr;
            }
        }

        .checkout-form label {
            font-size: 0.85rem;
            font-weight: 700;
            color: rgba(15, 23, 42, 0.7);
            display: block;
            margin-bottom: 0.35rem;
        }

        .checkout-modal__title {
            font-size: 1rem;
        }

        .checkout-form label {
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
        }

        .checkout-form input,
        .checkout-form textarea {
            width: 100%;
            padding: 0.75rem 0.85rem;
            border-radius: 16px;
            border: 1px solid rgba(15, 23, 42, 0.15);
            font-weight: 600;
            font-family: inherit;
        }

        .checkout-form input {
            padding: 0.6rem 0.75rem;
            border-radius: 12px;
        }

        .checkout-form input {
            font-size: 0.9rem;
        }

        .checkout-form textarea {
            padding: 0.6rem 0.75rem;
            border-radius: 12px;
            min-height: 72px;
        }

        .checkout-form textarea {
            resize: vertical;
            min-height: 72px;
        }

        header.scrolled .btn-login {
            border: none;
            color: #fff;
            background: linear-gradient(120deg, var(--primary), #5a7dff);
            box-shadow: 0 12px 25px rgba(13, 110, 253, 0.3);
        }

        .btn-install {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            padding: 0.55rem 1.35rem;
            border-radius: 999px;
            border: 1px solid rgba(13, 110, 253, 0.35);
            background: rgba(13, 110, 253, 0.12);
            color: var(--primary);
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
        }

        .btn-install:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .btn-install.is-visible {
            display: inline-flex;
        }

        .btn-install-mobile.is-visible {
            display: flex;
            width: 100%;
        }

        .btn-install-desktop {
            margin-top: 0.5rem;
        }

        .hero {
            min-height: 100vh;
            padding: calc(2.5rem + var(--header-height)) 1.5rem 3rem;
            background-image: linear-gradient(120deg, rgba(15, 32, 39, 0.58), rgba(32, 58, 67, 0.58), rgba(44, 83, 100, 0.68)), url('assets/images/portada.png');
            background-size: cover;
            background-position: top center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            color: #fff;
        }

        .hero-content {
            max-width: 1200px;
            margin: auto;
            padding: 3rem 1.5rem;
        }

        .hero-tag {
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .hero-content h1 {
            font-size: clamp(2.3rem, 5.5vw, 3.5rem);
            margin-bottom: 0.75rem;
        }

        .hero-subtitle {
            max-width: 520px;
            font-size: 1.05rem;
            color: rgba(255, 255, 255, 0.92);
            margin-bottom: 1.5rem;
        }

        .btn-primary {
            display: inline-block;
            background-color: var(--secondary);
            color: #1f1f1f;
            padding: 0.85rem 1.5rem;
            border-radius: 999px;
            font-weight: 600;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255, 183, 3, 0.3);
        }

        section {
            padding: 4.5rem 1.5rem;
            scroll-margin-top: calc(var(--header-height) + 20px);
        }

        .section-title {
            text-align: center;
            font-size: 2rem;
            color: var(--dark);
            margin-bottom: 0.5rem;
        }

        .section-subtitle {
            text-align: center;
            color: var(--text);
            margin-bottom: 2.5rem;
        }

        .products-grid {
            max-width: 1200px;
            margin: auto;
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
            justify-content: center;
        }

        .products-grid.single {
            grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
        }

        .products-header {
            max-width: 1200px;
            margin: 0 auto 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            text-align: center;
            align-items: center;
        }

        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: center;
        }

        .filter-btn {
            border: 1px solid rgba(13, 110, 253, 0.3);
            background: rgba(13, 110, 253, 0.05);
            color: var(--primary);
            padding: 0.4rem 1rem;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .filter-btn.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            box-shadow: 0 10px 20px rgba(13, 110, 253, 0.25);
        }

        .filter-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .product-card {
            border-radius: 18px;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
        }

        .product-card img {
            width: 100%;
            height: 210px;
            object-fit: contain;
            background: var(--light);
            padding: 1rem;
        }

        .product-content {
            padding: 1.5rem;
        }

        .product-content h3 {
            color: var(--dark);
            margin-bottom: 0.5rem;
        }

        .product-content p {
            font-size: 0.95rem;
        }

        .product-price {
            margin-top: 1rem;
            font-weight: 600;
            color: var(--success);
        }

        .product-actions {
            margin-top: 0.85rem;
        }

        .btn-pedir {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            padding: 0.7rem 1rem;
            border-radius: 14px;
            border: none;
            cursor: pointer;
            font-weight: 700;
            letter-spacing: 0.3px;
            color: #fff;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 55%, #0E6F62 100%);
            box-shadow: 0 14px 26px rgba(18, 140, 126, 0.35);
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
        }

        .btn-pedir:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 32px rgba(18, 140, 126, 0.45);
            filter: saturate(1.05);
        }

        .btn-pedir:active {
            transform: translateY(0);
            box-shadow: 0 12px 22px rgba(18, 140, 126, 0.32);
        }

        .btn-pedir:focus-visible {
            outline: 3px solid rgba(37, 211, 102, 0.35);
            outline-offset: 3px;
        }

        .btn-pedir--modal {
            margin-top: 1rem;
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
        }

        .products-empty {
            max-width: 420px;
            margin: 0 auto;
            text-align: center;
            background: #fff;
            padding: 2rem;
            border-radius: 18px;
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
        }

        .product-modal {
            position: fixed;
            inset: 0;
            background: rgba(7, 17, 36, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            z-index: 100;
        }

        .product-modal.show {
            display: flex;
        }

        .product-modal__content {
            background: #fff;
            border-radius: 24px;
            box-shadow: 0 25px 55px rgba(15, 23, 42, 0.25);
            width: 100%;
            max-width: 760px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            overflow: hidden;
        }

        .product-modal__image {
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }

        .product-modal__image img {
            width: 100%;
            border-radius: 18px;
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15);
        }

        .product-modal__body {
            padding: 2rem 2.5rem;
            position: relative;
        }

        .product-modal__close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text);
        }

        .product-meta {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin: 1rem 0;
        }

        .product-meta span {
            background: var(--light);
            color: var(--dark);
            border-radius: 999px;
            padding: 0.35rem 0.9rem;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .product-modal__price {
            font-size: 2rem;
            color: var(--success);
            font-weight: 700;
            margin: 1rem 0 1.5rem;
        }

        .product-modal__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .btn-outline {
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 0.8rem 1.5rem;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .btn-outline:hover {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 12px 25px rgba(13, 110, 253, 0.25);
        }

        .about {
            background-color: var(--light);
        }

        .about-content {
            max-width: 1100px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            align-items: center;
        }

        .about-text h3 {
            color: var(--dark);
            margin-bottom: 1rem;
        }

        .about-text ul {
            list-style: none;
            margin-top: 1rem;
        }

        .about-text li {
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .about-text li::before {
            content: '✔';
            color: var(--primary);
            font-weight: 600;
        }

        .contact {
            background-color: #fff;
        }

        .contact-grid {
            max-width: 1100px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2.5rem;
        }

        form {
            display: grid;
            gap: 1rem;
        }

        input,
        textarea {
            padding: 0.85rem 1rem;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            font-family: inherit;
            font-size: 1rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        input:focus,
        textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
        }

        textarea {
            min-height: 130px;
            resize: vertical;
        }

        .contact-info {
            background-color: var(--light);
            border-radius: 18px;
            padding: 2rem;
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.05);
        }

        .contact-info h3 {
            color: var(--dark);
            margin-bottom: 1rem;
        }

        .contact-info p,
        .contact-info a {
            color: var(--text);
            text-decoration: none;
        }

        .contact-info-item {
            margin-bottom: 1.2rem;
        }

        footer {
            background: linear-gradient(135deg, #0b1526, #101c34);
            color: #cfd6e6;
            padding: 3rem 1.5rem 2rem;
            margin-top: 3rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem;
        }

        .footer-brand img {
            width: 64px;
            margin-bottom: 0.75rem;
        }

        .footer-brand strong {
            display: block;
            font-size: 1.2rem;
        }

        .footer-links ul,
        .footer-contact ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li,
        .footer-contact li {
            margin-bottom: 0.4rem;
            color: #93a4c7;
        }

        .footer-links a,
        .footer-contact a {
            color: #f8fbff;
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-links a:hover,
        .footer-contact a:hover {
            color: var(--secondary);
        }

        .footer-bottom {
            max-width: 1200px;
            margin: 2rem auto 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.5rem;
            font-size: 0.95rem;
        }

        .footer-bottom a {
            color: var(--secondary);
            text-decoration: none;
            font-weight: 600;
        }

        .footer-bottom a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .nav-container {
                flex-wrap: wrap;
            }

            .nav-actions {
                flex-direction: column;
                gap: 1rem;
            }

            nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }

            .hero {
                text-align: center;
                padding: calc(2.5rem + var(--header-height)) 1rem 2.5rem;
                background-position: 47% top;
                background-size: auto 90%;
                background-image: linear-gradient(120deg, rgba(15, 32, 39, 0.4), rgba(32, 58, 67, 0.38), rgba(44, 83, 100, 0.45)), url('assets/images/portadamovil.png');
            }

            .hero-content p {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-content h1,
            .hero-subtitle {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            .products-header {
                justify-content: center;
            }

            .products-header h2 {
                white-space: nowrap;
            }

            .btn-install-desktop.is-visible {
                display: none;
            }

            .menu-toggle {
                display: flex;
            }

            .nav-controls {
                display: inline-flex;
            }

            .logo-word--com {
                display: none;
            }

            .nav-actions {
                width: 100%;
                display: none;
                background: rgba(255, 255, 255, 0.95);
                padding: 1rem;
                border-radius: 16px;
                box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15);
                animation: fadeIn 0.3s ease;
            }

            .nav-actions .btn-cart {
                display: none;
            }

            .btn-login {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.35rem;
                background: linear-gradient(135deg, var(--primary), #5a7dff);
                border: 1px solid rgba(13, 110, 253, 0.15);
                color: #fff;
                box-shadow: 0 15px 30px rgba(13, 110, 253, 0.28);
                text-align: center;
                margin-bottom: 0.5rem;
                padding: 0.75rem 1.5rem;
                border-radius: 14px;
                position: relative;
                overflow: hidden;
            }

            .btn-login::after {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: inherit;
                border: 1px solid rgba(255, 255, 255, 0.35);
                pointer-events: none;
            }

            header.menu-open .nav-actions {
                display: flex;
            }

            nav ul {
                flex-direction: column;
                align-items: flex-start;
                width: 100%;
                gap: 1rem;
            }

            nav a {
                color: var(--dark);
            }

            nav a:hover {
                color: var(--primary);
            }


            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }
        
        /* Floating WhatsApp Button */
        .floating-whatsapp {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50%;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 3px #999;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: transform 0.3s ease;
        }
        .floating-whatsapp:hover {
            transform: scale(1.1);
        }
        .floating-whatsapp svg {
            fill: #FFF;
        }
    </style>
</head>

<body>
    <div id="alertContainerHome" class="alert-container" aria-live="polite"></div>
    
    <!-- Floating WhatsApp -->
    <a href="#" id="floatingWhatsAppBtn" class="floating-whatsapp" target="_blank" style="display: none;" aria-label="Chat en WhatsApp">
        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
        </svg>
    </a>
    
    <header>
        <div class="nav-container">
            <a class="logo" href="#portada">
                <img src="assets/images/logo.png" alt="Logo VendeFácil">
                <strong>
                    <span class="logo-word logo-word--com">Vende</span>
                    <span class="logo-word logo-word--brand">Fácil</span>
                </strong>
            </a>
            <div class="nav-controls">
                <button id="btnCarritoHomeMobile" class="btn-cart" type="button" aria-label="Carrito">
                    <svg class="btn-cart__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 6H22L20 14H7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M6 6L5 3H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M7 14L6 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" />
                        <path d="M18 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" />
                    </svg>
                    <span id="carritoCountHomeMobile" class="cart-badge">0</span>
                </button>
                <button id="menuToggle" class="menu-toggle" aria-label="Menú" aria-expanded="false">
                    <span class="menu-toggle__line"></span>
                    <span class="menu-toggle__line"></span>
                    <span class="menu-toggle__line"></span>
                </button>
            </div>
            <div class="nav-actions">
                <nav>
                    <ul>
                        <li><a href="#productos">Productos</a></li>
                        <li><a href="#nosotros">Sobre Nosotros</a></li>
                        <li><a href="#contacto">Contáctanos</a></li>
                    </ul>
                </nav>
                <button id="btnCarritoHome" class="btn-cart" type="button" aria-label="Carrito">
                    <svg class="btn-cart__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 6H22L20 14H7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M6 6L5 3H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M7 14L6 17H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" />
                        <path d="M18 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" />
                    </svg>
                    <span id="carritoCountHome" class="cart-badge">0</span>
                </button>
                <a class="btn-login" href="principal">Iniciar Sesión</a>
                <button id="installBtnMobile" class="btn-install btn-install-mobile" type="button">
                    Instalar
                </button>
            </div>
        </div>
    </header>

    <main>
        <section id="portada" class="hero">
            <div class="hero-content">
                <span class="hero-tag">Bienvenidos</span>
                <h1>Mercadería en general para tu negocio.</h1>
                <p class="hero-subtitle">Abarrotes, ferretería y todo lo que tu hogar necesita, en un solo lugar.</p>
                <a class="btn-primary" href="#productos">Ver Productos</a>
            </div>
        </section>

        <section id="productos">
            <div class="products-header">
                <div>
                    <h2 class="section-title" style="text-align:center;">Productos Destacados</h2>
                </div>
                <div class="filter-group" id="categoryFilters">
                    <button class="filter-btn active" data-category="all">Todos</button>
                </div>
            </div>
            <div id="productsGrid" class="products-grid"></div>
            <div id="productsEmpty" class="products-empty" style="display:none;">
                <h3 style="color: var(--dark); margin-bottom: 0.5rem;">Sin productos cargados</h3>
                <p style="color: var(--text);">Publica productos desde el sistema administrativo para mostrarlos aquí automáticamente.</p>
            </div>
        </section>

        <section id="nosotros" class="about">
            <h2 class="section-title">Sobre Nosotros</h2>
            <div class="about-content">
                <div class="about-text">
                    <h3>Nuestra esencia</h3>
                    <p>Iniciamos como un pequeño abarrotería en la comunidad y hoy distribuimos mercadería variada para negocios y familias. Seleccionamos proveedores confiables para garantizar frescura en alimentos, calidad en ferretería y variedad en artículos de hogar.</p>
                    <p>Atendemos con trato cercano, asesoría rápida y entregas que llegan justo cuando las necesitas.</p>
                    <ul>
                        <li>Catálogo integral: abarrotes, ferretería y hogar</li>
                        <li>Compra mayorista o al detalle según tu necesidad</li>
                        <li>Entrega a domicilio y retiro en tienda</li>
                        <li>Asesoría rápida para surtir tu inventario</li>
                    </ul>
                </div>
                <div>
                    <img src="assets/images/sobre.png" alt="Nuestro equipo en VendeFácil" style="border-radius: 22px; box-shadow: 0 25px 50px rgba(15, 23, 42, 0.15);">
                </div>
            </div>
        </section>

        <section id="contacto" class="contact">
            <h2 class="section-title">Contáctanos</h2>
            <p class="section-subtitle">¿Tienes dudas o quieres una cotización a medida? Escríbenos y te respondemos en minutos.</p>
            <div class="contact-grid">
                <form id="contactForm">
                    <input type="text" name="nombre" placeholder="Nombre completo" required>
                    <input type="email" name="correo" placeholder="Correo electrónico" required>
                    <input type="tel" name="telefono" placeholder="Teléfono" required>
                    <textarea name="mensaje" placeholder="Cuéntanos qué necesitas" required></textarea>
                    <button class="btn-primary" type="submit" style="border: none; cursor: pointer; text-align: center;">Enviar Mensaje</button>
                </form>
                <div class="contact-info">
                    <h3>Visítanos o llámanos</h3>
                    <div class="contact-info-item">
                        <strong>Dirección:</strong>
                        <p>Nicaragua</p>
                    </div>
                    <div class="contact-info-item">
                        <strong>Teléfono:</strong>
                        <a href="tel:+50558668096">+5055866 8096</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div id="productModal" class="product-modal" aria-hidden="true">
        <div class="product-modal__content">
            <div class="product-modal__image">
                <img id="modalProductImage" src="" alt="Producto seleccionado">
            </div>
            <div class="product-modal__body">
                <button class="product-modal__close" aria-label="Cerrar">×</button>
                <p class="hero-tag" id="modalProductCategory" style="margin-bottom:0.5rem;"></p>
                <h2 id="modalProductName" style="color: var(--dark);"></h2>
                <p id="modalProductBrand" style="color: var(--text);"></p>
                <div class="product-meta">
                    <span id="modalProductBadge"></span>
                </div>
                <p class="product-modal__price" id="modalProductPrice"></p>
                <button id="modalOrderBtn" class="btn-pedir btn-pedir--modal" type="button">Agregar al carrito</button>
            </div>
        </div>
    </div>

    <div id="cartModalHome" class="cart-modal" aria-hidden="true">
        <div class="cart-modal__content">
            <div class="cart-modal__header">
                <div class="cart-modal__title">Tu carrito</div>
                <button class="cart-modal-close" type="button" aria-label="Cerrar">×</button>
            </div>
            <div class="cart-modal__body">
                <div style="overflow:auto;">
                    <table class="cart-table">
                        <thead>
                            <tr>
                                <th>Imagen</th>
                                <th>Producto</th>
                                <th>Precio</th>
                                <th>Cantidad</th>
                                <th>Subtotal</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="carritoTableBodyHome"></tbody>
                    </table>
                </div>
            </div>
            <div class="cart-modal__footer">
                <div class="cart-modal__total">Total: <span id="carritoTotalHome"></span></div>
                <div class="cart-footer-actions">
                    <button id="btnVaciarCarritoHome" class="btn-cart-action btn-cart-secondary" type="button">Vaciar</button>
                    <button id="btnAbrirCheckoutHome" class="btn-cart-action btn-cart-primary" type="button">Confirmar pedido</button>
                </div>
            </div>
        </div>
    </div>

    <div id="checkoutModalHome" class="checkout-modal" aria-hidden="true">
        <div class="checkout-modal__content">
            <div class="checkout-modal__header">
                <div class="checkout-modal__title">Confirmar pedido</div>
                <button class="checkout-modal-close" type="button" aria-label="Cerrar">×</button>
            </div>
            <form id="checkoutFormHome">
                <div class="checkout-modal__body">
                    <div class="checkout-form">
                        <div>
                            <label>Identidad</label>
                            <input name="identidad" value="DNI" required>
                        </div>
                        <div>
                            <label>Número de identidad</label>
                            <input name="num_identidad" required>
                        </div>
                        <div>
                            <label>Nombre</label>
                            <input name="nombre" required>
                        </div>
                        <div>
                            <label>Teléfono</label>
                            <input name="telefono" required>
                        </div>
                        <div>
                            <label>Correo (opcional)</label>
                            <input name="correo" type="email">
                        </div>
                        <div>
                            <label>Dirección (opcional)</label>
                            <input name="direccion">
                        </div>
                        <div style="grid-column: 1 / -1;">
                            <label>Nota (opcional)</label>
                            <textarea name="nota" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="checkout-modal__footer">
                    <button class="btn-cart-action btn-cart-secondary checkout-modal-close" type="button">Cerrar</button>
                    <button class="btn-cart-action btn-cart-primary" type="submit">Enviar pedido</button>
                </div>
            </form>
        </div>
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-brand">
                <img src="assets/images/logo.png" alt="Logo VendeFácil">
                <strong>VendeFácil</strong>
            </div>
            <div class="footer-links">
                <h4 style="margin-bottom:0.75rem; color:#fff;">Navegación</h4>
                <ul>
                    <li><a href="#productos">Productos</a></li>
                    <li><a href="#nosotros">Sobre Nosotros</a></li>
                    <li><a href="#contacto">Contáctanos</a></li>
                </ul>
            </div>
            <div class="footer-contact">
                <h4 style="margin-bottom:0.75rem; color:#fff;">Contacto</h4>
                <ul>
                    <li>Nicaragua</li>
                    <li><a href="tel:+50558668096">+5055866 8096</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <span>© <span id="year"></span> VendeFácil. Todos los derechos reservados.</span>
            <span>Creado por <a href="https://aircan.me/" target="_blank" rel="noopener">Aircan</a></span>
            <button id="installBtnDesktop" class="btn-install btn-install-desktop" type="button">
                Instalar
            </button>
        </div>
    </footer>

    <script>
        document.getElementById('year').textContent = new Date().getFullYear();

        const header = document.querySelector('header');
        const hero = document.querySelector('.hero');
        const menuToggle = document.getElementById('menuToggle');
        const navActions = document.querySelector('.nav-actions');
        const navLinks = document.querySelectorAll('.nav-actions nav a');
        const installBtnMobile = document.getElementById('installBtnMobile');
        const installBtnDesktop = document.getElementById('installBtnDesktop');
        let deferredInstallPrompt = null;

        const toggleHeaderState = () => {
            if (!header || !hero) return;
            const heroBottom = hero.offsetHeight - header.offsetHeight;
            if (window.scrollY > heroBottom) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        };

        const toggleMenu = () => {
            const isOpen = header.classList.toggle('menu-open');
            if (menuToggle) {
                menuToggle.setAttribute('aria-expanded', isOpen);
            }
        };

        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                if (window.innerWidth <= 768 && header.classList.contains('menu-open')) {
                    header.classList.remove('menu-open');
                    if (menuToggle) {
                        menuToggle.setAttribute('aria-expanded', 'false');
                    }
                }
            });
        });

        const hideInstallButtons = () => {
            if (installBtnMobile) installBtnMobile.classList.remove('is-visible');
            if (installBtnDesktop) installBtnDesktop.classList.remove('is-visible');
        };

        const updateInstallButtonsVisibility = () => {
            if (!deferredInstallPrompt) {
                hideInstallButtons();
                return;
            }
            const isMobileViewport = window.innerWidth <= 768;
            if (installBtnMobile) {
                installBtnMobile.classList.toggle('is-visible', isMobileViewport);
            }
            if (installBtnDesktop) {
                installBtnDesktop.classList.toggle('is-visible', !isMobileViewport);
            }
        };

        const handleInstallClick = () => {
            if (!deferredInstallPrompt) return;
            deferredInstallPrompt.prompt();
            deferredInstallPrompt.userChoice.then((choiceResult) => {
                if (choiceResult.outcome === 'accepted') {
                    hideInstallButtons();
                }
                deferredInstallPrompt = null;
            });
        };

        if (installBtnMobile) {
            installBtnMobile.addEventListener('click', handleInstallClick);
        }

        if (installBtnDesktop) {
            installBtnDesktop.addEventListener('click', handleInstallClick);
        }

        window.addEventListener('beforeinstallprompt', (event) => {
            event.preventDefault();
            deferredInstallPrompt = event;
            updateInstallButtonsVisibility();
        });

        window.addEventListener('appinstalled', () => {
            deferredInstallPrompt = null;
            hideInstallButtons();
        });

        if (menuToggle) {
            menuToggle.addEventListener('click', toggleMenu);
        }

        window.addEventListener('resize', () => {
            if (window.innerWidth > 768) {
                header.classList.remove('menu-open');
                if (menuToggle) menuToggle.setAttribute('aria-expanded', 'false');
                document.body.style.overflow = '';
            }
            updateInstallButtonsVisibility();
        });

        window.addEventListener('scroll', toggleHeaderState);
        window.addEventListener('resize', toggleHeaderState);
        toggleHeaderState();

        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('sw.js').catch((error) => {
                    console.error('SW registration failed:', error);
                });
            });
        }

        updateInstallButtonsVisibility();

        // Productos dinámicos
        const productsGrid = document.getElementById('productsGrid');
        const productsEmpty = document.getElementById('productsEmpty');
        const categoryFilters = document.getElementById('categoryFilters');

        const state = {
            productos: [],
            categorias: ['all'],
            filtro: 'all',
            moneda: ''
        };

        const productModal = document.getElementById('productModal');
        const modalProductImage = document.getElementById('modalProductImage');
        const modalProductName = document.getElementById('modalProductName');
        const modalProductBrand = document.getElementById('modalProductBrand');
        const modalProductCategory = document.getElementById('modalProductCategory');
        const modalProductPrice = document.getElementById('modalProductPrice');
        const modalProductBadge = document.getElementById('modalProductBadge');
        const modalOrderBtn = document.getElementById('modalOrderBtn');
        let currentProduct = null;

        const WHATSAPP_NUMBER = '50558668096';

        const openWhatsApp = (texto) => {
            const url = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(texto)}`;
            window.open(url, '_blank');
        };

        const getProductoPedidoTexto = (producto) => {
            const precio = `${state.moneda} ${Number(producto.precio).toLocaleString('es-GT', { minimumFractionDigits: 2 })}`;
            return [
                'Hola, quiero pedir este producto:',
                '',
                `Producto: ${producto.nombre}`,
                `Marca: ${producto.marca}`,
                `Categoría: ${producto.categoria}`,
                `Precio: ${precio}`,
                '',
                '¿Me ayudas con disponibilidad y envío?'
            ].filter(Boolean).join('\n');
        };

        const openProductModal = (producto) => {
            currentProduct = producto;
            modalProductImage.src = producto.foto;
            modalProductImage.alt = producto.nombre;
            modalProductName.textContent = producto.nombre;
            modalProductBrand.textContent = `Marca: ${producto.marca}`;
            modalProductCategory.textContent = producto.categoria;
            modalProductPrice.textContent = `${state.moneda} ${Number(producto.precio).toLocaleString('es-GT', { minimumFractionDigits: 2 })}`;
            modalProductBadge.textContent = producto.categoria;
            if (modalOrderBtn) {
                modalOrderBtn.setAttribute('data-product-id', producto.id);
            }
            productModal.classList.add('show');
            document.body.style.overflow = 'hidden';
        };

        const closeProductModal = () => {
            productModal.classList.remove('show');
            document.body.style.overflow = '';
        };

        productModal.addEventListener('click', (event) => {
            if (event.target === productModal || event.target.classList.contains('product-modal__close')) {
                closeProductModal();
            }
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && productModal.classList.contains('show')) {
                closeProductModal();
            }
        });

        const createProductCard = (producto) => {
            const card = document.createElement('article');
            card.className = 'product-card';
            card.dataset.categoria = producto.categoria;
            card.innerHTML = `
                <img src="${producto.foto}" alt="${producto.nombre}">
                <div class="product-content">
                    <h3>${producto.nombre}</h3>
                    <p style="font-size:0.9rem; color: var(--text);">${producto.marca}</p>
                    <p class="product-price">${state.moneda} ${Number(producto.precio).toLocaleString('es-GT', { minimumFractionDigits: 2 })}</p>
                    <div class="product-actions">
                        <button class="btn-pedir btn-add-cart-home" type="button" data-product-id="${producto.id}">Agregar al carrito</button>
                    </div>
                </div>
            `;
            card.addEventListener('click', (event) => {
                if (event.target && event.target.closest('.btn-add-cart-home')) {
                    return;
                }
                openProductModal(producto);
            });
            return card;
        };

        const renderProducts = () => {
            productsGrid.innerHTML = '';
            const filtrados = state.productos.filter((producto) => {
                return state.filtro === 'all' ? true : producto.categoria === state.filtro;
            });

            if (filtrados.length === 0) {
                productsEmpty.style.display = 'block';
                productsGrid.style.display = 'none';
                productsGrid.classList.remove('single');
                return;
            }

            productsEmpty.style.display = 'none';
            productsGrid.style.display = 'grid';
            productsGrid.classList.toggle('single', filtrados.length === 1);
            filtrados.forEach((producto) => {
                productsGrid.appendChild(createProductCard(producto));
            });
        };

        const setActiveFilter = (categoria) => {
            state.filtro = categoria;
            const buttons = categoryFilters.querySelectorAll('.filter-btn');
            buttons.forEach((btn) => {
                btn.classList.toggle('active', btn.dataset.category === categoria);
            });
            renderProducts();
        };

        const renderFilters = () => {
            // preserve "Todos" button
            categoryFilters.innerHTML = '';
            const allBtn = document.createElement('button');
            allBtn.className = 'filter-btn active';
            allBtn.dataset.category = 'all';
            allBtn.textContent = 'Todos';
            allBtn.addEventListener('click', () => setActiveFilter('all'));
            categoryFilters.appendChild(allBtn);

            state.categorias.forEach((categoria) => {
                const btn = document.createElement('button');
                btn.className = 'filter-btn';
                btn.dataset.category = categoria;
                btn.textContent = categoria;
                btn.addEventListener('click', () => setActiveFilter(categoria));
                categoryFilters.appendChild(btn);
            });
        };

        const fetchProductos = async () => {
            try {
                const response = await fetch('index.php?url=principal/productosPublicos');
                if (!response.ok) {
                    throw new Error('Error al cargar productos');
                }
                const data = await response.json();
                state.productos = data.productos || [];
                state.categorias = data.categorias || [];
                state.moneda = data.moneda || '';
                
                // Set WhatsApp Dynamic Button
                if (data.telefono_admin) {
                    const waBtn = document.getElementById('floatingWhatsAppBtn');
                    if (waBtn) {
                        waBtn.href = `https://wa.me/${data.telefono_admin}`;
                        waBtn.style.display = 'flex';
                    }
                }
                
                renderFilters();
                renderProducts();
            } catch (error) {
                productsEmpty.style.display = 'block';
                productsEmpty.innerHTML = `<h3 style="color: var(--dark); margin-bottom: 0.5rem;">Ups, algo salió mal</h3><p style="color: var(--text);">No pudimos cargar los productos. Intenta recargar la página.</p>`;
            }
        };

        fetchProductos();

        // WhatsApp contact form
        const contactForm = document.getElementById('contactForm');
        const whatsAppNumber = WHATSAPP_NUMBER;

        if (contactForm) {
            contactForm.addEventListener('submit', (event) => {
                event.preventDefault();
                const formData = new FormData(contactForm);
                const nombre = formData.get('nombre')?.trim();
                const correo = formData.get('correo')?.trim();
                const telefono = formData.get('telefono')?.trim();
                const mensaje = formData.get('mensaje')?.trim();

                const texto = [
                    'Nuevo contacto desde la web (VendeFácil)',
                    '',
                    `Nombre: ${nombre}`,
                    `Correo: ${correo}`,
                    `Teléfono: ${telefono}`,
                    '',
                    'Mensaje:',
                    `${mensaje}`
                ].join('\n');
                const url = `https://wa.me/${whatsAppNumber}?text=${encodeURIComponent(texto)}`;

                window.open(url, '_blank');
                contactForm.reset();
            });
        }
    </script>
    <script src="assets/js/index-carrito.js"></script>
</body>

</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64