Tul xxx Tul

Viewing: restaurante.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carta del Restaurante</title>
    <meta name="description" content="Descubre la carta gourmet del restaurante Hotel Sábalos: platos exclusivos, bebidas refrescantes y postres inolvidables.">

    <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=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="icon" type="image/png" href="./public/img/logo.png">

    <style>
        :root {
            color-scheme: light;
            --bg-dark: #0f0c07;
            --bg-card: #18130d;
            --accent: #d4a056;
            --accent-light: #f2c478;
            --text-primary: #fefcf6;
            --text-muted: #e5d8c4;
            --text-dim: rgba(255, 243, 224, 0.75);
            --border-color: rgba(212, 160, 86, 0.35);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background: #000;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-x: hidden;
        }

        body.lightbox-open {
            overflow: hidden;
        }

        body::before,
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -2;
            pointer-events: none;
        }

        body::before {
            background: url('./public/img/menu.jpg') center/cover no-repeat;
            background-attachment: fixed;
            filter: saturate(1.05) contrast(1.05) brightness(0.9);
        }

        body::after {
            z-index: -1;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.6) 100%);
        }

        .menu-wrapper,
        footer {
            position: relative;
            z-index: 1;
        }

        .menu-wrapper {
            max-width: 960px;
            margin: 48px auto;
            padding: 0 24px 64px;
            width: 100%;
        }

        .menu-card {
            background: #ffffff;
            color: #1a1a1a;
            border-radius: 32px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;
            position: relative;
        }

        .menu-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: none;
            pointer-events: none;
        }

        header.menu-header {
            text-align: center;
            padding: 56px 32px 40px;
            position: relative;
        }

        .menu-title-row {
            position: relative;
            max-width: 800px;
            margin: 0 auto 8px;
            text-align: center;
        }
        
        /* Contenedor para el título centrado */
        .menu-title-container {
            position: relative;
            width: 100%;
            text-align: center;
        }

        .menu-logo {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            object-fit: contain;
        }

        /* Ajustes para escritorio */
        @media (min-width: 769px) {
            .menu-title-row {
                position: relative;
                display: block;
            }
            
            .menu-logo {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;
            }
            
            .menu-title-container {
                width: 100%;
                text-align: center;
                position: relative;
                z-index: 0;
            }
            
            .menu-title-container h1 {
                margin: 0 auto;
                position: relative;
                display: inline-block;
            }
        }
        
        /* Ajustes para móvil */
        @media (max-width: 768px) {
            .menu-title-row {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-right: 0;
            }

            .menu-logo {
                position: static;
                transform: none;
                order: -1;
                margin-bottom: 16px;
                width: 120px;
                height: 120px;
            }

            header.menu-header h1 {
                margin: 0;
            }
        }

        header.menu-header h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.6rem, 4vw, 3.4rem);
            letter-spacing: 6px;
            text-transform: uppercase;
            margin: 0;
            padding: 0 120px; /* Espacio para el logo */
            position: relative;
            z-index: 1;
        }

        header.menu-header span {
            font-size: clamp(1.3rem, 2.8vw, 1.8rem);
            color: #000000;
            font-family: 'Playfair Display', serif;
            letter-spacing: 5px;
            display: block;
            margin-top: 8px;
        }

        .menu-subtitle {
            margin-top: 28px;
            font-size: 0.95rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #000000;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .menu-subtitle::before,
        .menu-subtitle::after {
            content: '';
            display: inline-block;
            width: 48px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
        }

        .menu-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            padding: 0 32px 12px;
            margin-top: 18px;
        }

        .filter-chip {
            border: 1px solid rgba(0, 0, 0, 0.12);
            color: #000000;
            padding: 10px 18px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.6);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }

        .filter-chip:hover {
            background: rgba(250, 214, 160, 0.15);
            transform: translateY(-1px);
        }

        .filter-chip.is-active {
            background: linear-gradient(135deg, var(--accent), var(--accent-light));
            color: #1a1a1a;
            border-color: transparent;
            box-shadow: 0 12px 20px rgba(212, 160, 86, 0.3);
        }

        .menu-sections {
            display: grid;
            gap: 36px;
            padding: 0 56px 56px;
        }

        @media (min-width: 900px) {
            .menu-sections {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .menu-sections.menu-sections--single {
                grid-template-columns: minmax(0, 1fr);
            }

            .menu-section--single .menu-items {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                column-gap: 24px;
            }
        }

        .menu-section {
            position: relative;
            padding-bottom: 28px;
        }

        .menu-section::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(250, 214, 160, 0.2), transparent);
        }

        .menu-section h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #b22525;
            margin: 0 0 18px;
        }

        .menu-item {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 18px;
            padding: 16px 0;
            border-bottom: 1px solid rgba(250, 214, 160, 0.12);
        }

        .menu-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .menu-item-thumb {
            width: 108px;
            height: 108px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid rgba(242, 196, 120, 0.45);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.35);
            background: linear-gradient(135deg, rgba(242, 196, 120, 0.2), rgba(24, 19, 13, 0.8));
            position: relative;
            padding: 0;
            display: block;
            line-height: 0;
            cursor: zoom-in;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .menu-item-thumb img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
            border-radius: inherit;
            filter: saturate(1.05) contrast(1.05);
            transition: transform 0.25s ease;
        }

        .menu-item-thumb:focus-visible {
            outline: 3px solid rgba(242, 196, 120, 0.6);
            outline-offset: 4px;
        }

        .menu-item-thumb:hover img,
        .menu-item-thumb:focus img {
            transform: scale(1.06);
        }

        .menu-item-thumb::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 50%;
            box-shadow: inset 0 0 18px rgba(12, 7, 4, 0.55);
            pointer-events: none;
        }

        .menu-item-thumb {
            position: relative;
        }

        .menu-item h3 {
            font-size: 1.05rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin: 0 0 6px;
            color: #b22525;
        }

        .menu-item p {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.6;
            color: #000000;
        }

        .menu-item .price {
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            color: #000000;
            white-space: nowrap;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(250, 214, 160, 0.12);
            color: var(--accent-light);
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 6px;
        }

        .btn-regresar {
            margin: 32px auto 0;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 28px;
            background: linear-gradient(135deg, var(--accent), var(--accent-light));
            color: #24160b;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            font-family: 'Inter', sans-serif;
        }

        .btn-regresar:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(212, 160, 86, 0.35);
        }

        .btn-regresar i {
            font-size: 0.95rem;
        }

        footer {
            text-align: center;
            color: var(--text-dim);
            font-size: 0.85rem;
            letter-spacing: 1px;
            padding: 24px 16px 32px;
        }

        .floating-shine {
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(250, 214, 160, 0.2), transparent 70%);
            filter: blur(6px);
            animation: float 12s ease-in-out infinite alternate;
            pointer-events: none;
        }

        .floating-shine:nth-of-type(1) {
            top: 12%;
            right: -4%;
        }

        .floating-shine:nth-of-type(2) {
            bottom: 10%;
            left: -6%;
            animation-delay: 3s;
        }

        @keyframes float {
            from {
                transform: translate3d(0, 0, 0);
            }
            to {
                transform: translate3d(12px, -16px, 0);
            }
        }

        @media (max-width: 640px) {
            .menu-wrapper {
                margin: 32px auto 48px;
                padding: 0 18px 48px;
            }

            .menu-card {
                border-radius: 24px;
            }

            header.menu-header {
                padding: 48px 24px 32px;
            }

            .menu-sections {
                padding: 0 28px 36px;
            }

            .menu-item {
                grid-template-columns: auto minmax(0, 1fr);
                align-items: center;
            }

            .menu-item .price {
                justify-self: flex-end;
                font-size: 1rem;
            }

            .menu-item-thumb {
                width: 88px;
                height: 88px;
            }
        }

        .image-lightbox {
            position: fixed;
            inset: 0;
            background: rgba(9, 7, 5, 0.85);
            backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 1000;
        }

        .image-lightbox.is-visible {
            opacity: 1;
            pointer-events: auto;
        }

        .image-lightbox figure {
            position: relative;
            max-width: min(90vw, 760px);
            width: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .image-lightbox img {
            width: auto;
            max-width: 100%;
            max-height: 78vh;
            object-fit: contain;
            border-radius: 28px;
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45);
            display: block;
        }

        .lightbox-caption {
            margin-top: 18px;
            text-align: center;
            font-family: 'Playfair Display', serif;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--accent-light);
            font-size: 1rem;
        }

        .lightbox-close {
            position: absolute;
            top: 24px;
            right: 24px;
            background: rgba(15, 15, 15, 0.75);
            color: #fefcf6;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 999px;
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        .lightbox-close:hover {
            transform: scale(1.05);
            background: rgba(15, 15, 15, 0.92);
        }

        @media (max-width: 640px) {
            .image-lightbox {
                padding: 24px;
            }

            .image-lightbox img {
                border-radius: 20px;
            }

            .lightbox-close {
                top: 16px;
                right: 16px;
            }
        }
    </style>
</head>
<body>
    <main class="menu-wrapper">
        <article class="menu-card">
            <span class="floating-shine"></span>
            <span class="floating-shine"></span>

            <div class="px-6 pt-6">
                <button class="btn-regresar" style="margin: 0;" onclick="window.location.href='index.html#restaurante';">
                    <i class="fa-solid fa-arrow-left"></i>
                    Regresar
                </button>
            </div>

            <header class="menu-header">
                <div class="menu-title-row">
                    <div class="menu-title-container">
                        <h1>Menú</h1>
                    </div>
                    <img class="menu-logo" src="./public/img/logorestaurante.png" alt="Logo del restaurante" data-branding-logo>
                </div>
                <div class="menu-subtitle" data-branding-name>Hotel Sábalos</div>
            </header>

            <nav class="menu-filter" id="menu-filtro" aria-label="Filtrar categorías"></nav>

            <section class="menu-sections" id="menu-secciones">
                <!-- Las secciones y productos se renderizan vía JS -->
            </section>
        </article>

        <button class="btn-regresar" onclick="window.location.href='index.html#restaurante';">
            <i class="fa-solid fa-arrow-left"></i>
            Regresar
        </button>
    </main>

    <div class="image-lightbox" id="image-lightbox" aria-hidden="true">
        <figure>
            <button class="lightbox-close" type="button" aria-label="Cerrar imagen ampliada">&times;</button>
            <img src="./public/img/producto-default.jpg" alt="Vista ampliada del plato">
            <figcaption class="lightbox-caption" hidden></figcaption>
        </figure>
    </div>

    <footer>
        © <?php echo date('Y'); ?> <span data-branding-name>Hotel Sábalos</span> · Restaurante exclusivo con sabores que enamoran
    </footer>

    <script type="module">
        const ENDPOINT_BRANDING = './site_publico/api/branding.php';
        const ENDPOINT = './site_publico/api/productos.php';

        const aplicarBranding = (payload) => {
            if (!payload || payload.ok === false) return;
            const nombre = (payload.nombre || '').toString().trim();
            const logoUrl = (payload.logo_url || '').toString().trim();

            if (nombre) {
                window.__BRANDING_NAME = nombre;
                window.__BRANDING = { nombre, logoUrl };
                document.title = `${nombre} | Restaurante`;
                document.querySelectorAll('[data-branding-name]').forEach((el) => (el.textContent = nombre));
            }
            if (logoUrl) {
                document.querySelectorAll('link[rel="icon"]').forEach((el) => el.setAttribute('href', logoUrl));
                document.querySelectorAll('[data-branding-logo]').forEach((img) => {
                    img.setAttribute('src', logoUrl);
                    if (nombre) img.setAttribute('alt', nombre);
                });
            }
        };

        fetch(ENDPOINT_BRANDING, { cache: 'no-store' })
            .then((r) => (r.ok ? r.json() : null))
            .then(aplicarBranding)
            .catch(() => {});

        const seccionesRoot = document.getElementById('menu-secciones');
        const filtroRoot = document.getElementById('menu-filtro');
        let productosCache = [];
        let categoriaActiva = 'todas';

        const templates = {
            contenedor: (categoria) => `
                <div class="menu-section" data-categoria="${categoria}">
                    <h2>${categoria}</h2>
                    <div class="menu-items"></div>
                </div>
            `,
            item: ({ nombre, descripcion, precio_formateado, precio, etiquetas = [], imagen }) => {
                const src = imagen && imagen.trim() ? imagen : './public/img/producto-default.jpg';
                return `
                <article class="menu-item">
                    <button class="menu-item-thumb" type="button" data-full="${src}" data-nombre="${nombre}">
                        <img src="${src}" alt="${nombre}" loading="lazy" onerror="this.src='./public/img/producto-default.jpg';">
                    </button>
                    <div>
                        <h3>${nombre}</h3>
                        ${descripcion ? `<p>${descripcion}</p>` : ''}
                        ${etiquetas.map((tag) => `<span class="tag"><i class="fa-solid fa-star"></i>${tag}</span>`).join('')}
                    </div>
                    <span class="price">${precio_formateado || formatearPrecio(precio)}</span>
                </article>
            `;
            },
        };

        const formatearPrecio = (valor) => {
            const numero = Number(valor || 0);
            return new Intl.NumberFormat('es-HN', {
                style: 'currency',
                currency: 'HNL',
                minimumFractionDigits: 2,
            }).format(numero);
        };

        const agruparPorCategoria = (items) => {
            return items.reduce((acc, item) => {
                const categoria = item.categoria || 'Especialidades';
                if (!acc[categoria]) acc[categoria] = [];
                acc[categoria].push(item);
                return acc;
            }, {});
        };

        const generarEtiquetas = (producto) => {
            const etiquetas = [];
            const descripcion = (producto.descripcion || '').toLowerCase();
            if (/veg\b|vegetariano|vegano/.test(descripcion)) {
                etiquetas.push('opción verde');
            }
            if (/sin\s*gluten|gluten\s*free/.test(descripcion)) {
                etiquetas.push('sin gluten');
            }
            if (/picante|spicy/.test(descripcion)) {
                etiquetas.push('picante');
            }
            if (producto.precio && Number(producto.precio) >= 400) {
                etiquetas.push('signature');
            }
            return etiquetas;
        };

        const obtenerCategorias = (items = []) => {
            const set = new Set(items.map((item) => item.categoria || 'Especialidades'));
            return Array.from(set).sort((a, b) => a.localeCompare(b, 'es', { sensitivity: 'base' }));
        };

        const renderizarCarta = (productos = [], categoria = 'todas') => {
            if (!seccionesRoot) return;
            const fuente = categoria === 'todas' ? productos : productos.filter((item) => (item.categoria || 'Especialidades') === categoria);
            const grupos = agruparPorCategoria(fuente);
            const categoriasOrdenadas = Object.keys(grupos).sort((a, b) => a.localeCompare(b, 'es', { sensitivity: 'base' }));

            seccionesRoot.innerHTML = categoriasOrdenadas.map((categoriaNombre) => {
                return templates.contenedor(categoriaNombre);
            }).join('');

            if (categoria !== 'todas' && categoriasOrdenadas.length === 1) {
                seccionesRoot.classList.add('menu-sections--single');
                const unicaCategoria = categoriasOrdenadas[0];
                const unicaSection = seccionesRoot.querySelector(`[data-categoria="${unicaCategoria}"]`);
                if (unicaSection) {
                    unicaSection.classList.add('menu-section--single');
                }
            } else {
                seccionesRoot.classList.remove('menu-sections--single');
            }

            categoriasOrdenadas.forEach((categoriaNombre) => {
                const wrapper = seccionesRoot.querySelector(`[data-categoria="${categoriaNombre}"] .menu-items`);
                if (!wrapper) return;
                grupos[categoriaNombre]
                    .sort((a, b) => a.nombre.localeCompare(b.nombre, 'es', { sensitivity: 'base' }))
                    .forEach((producto) => {
                        const etiquetas = generarEtiquetas(producto);
                        wrapper.insertAdjacentHTML('beforeend', templates.item({ ...producto, etiquetas }));
                    });
            });

            configurarLightbox();
        };

        const configurarFiltros = (categorias = []) => {
            if (!filtroRoot) return;
            const chips = ['todas', ...categorias];
            filtroRoot.innerHTML = chips.map((categoria) => `
                <button class="filter-chip ${categoriaActiva === categoria ? 'is-active' : ''}" type="button" data-categoria="${categoria}">
                    ${categoria === 'todas' ? 'Todo' : categoria}
                </button>
            `).join('');

            filtroRoot.querySelectorAll('.filter-chip').forEach((chip) => {
                chip.addEventListener('click', () => {
                    const target = chip.getAttribute('data-categoria') || 'todas';
                    if (target === categoriaActiva) return;
                    categoriaActiva = target;
                    filtroRoot.querySelectorAll('.filter-chip').forEach((el) => el.classList.remove('is-active'));
                    chip.classList.add('is-active');
                    renderizarCarta(productosCache, categoriaActiva);
                });
            });
        };

        const mostrarEstado = (mensaje) => {
            if (!seccionesRoot) return;
            seccionesRoot.innerHTML = `
                <div style="text-align:center; padding: 48px 0; color: var(--text-muted); letter-spacing:1px;">
                    ${mensaje}
                </div>
            `;
        };

        const lightbox = document.getElementById('image-lightbox');
        const lightboxImg = lightbox?.querySelector('img');
        const lightboxCaption = lightbox?.querySelector('.lightbox-caption');
        const lightboxClose = lightbox?.querySelector('.lightbox-close');

        const abrirLightbox = (src, nombre) => {
            if (!lightbox || !lightboxImg) return;
            lightboxImg.src = src;
            lightboxImg.alt = `Vista ampliada de ${nombre}`;
            if (lightboxCaption) {
                if (nombre) {
                    lightboxCaption.textContent = nombre;
                    lightboxCaption.hidden = false;
                } else {
                    lightboxCaption.hidden = true;
                }
            }
            lightbox.classList.add('is-visible');
            document.body.classList.add('lightbox-open');
            lightbox.setAttribute('aria-hidden', 'false');
            lightboxClose?.focus();
        };

        const cerrarLightbox = () => {
            if (!lightbox) return;
            lightbox.classList.remove('is-visible');
            document.body.classList.remove('lightbox-open');
            lightbox.setAttribute('aria-hidden', 'true');
        };

        const configurarLightbox = () => {
            if (!lightbox) return;
            const triggers = document.querySelectorAll('.menu-item-thumb');

            triggers.forEach((trigger) => {
                trigger.addEventListener('click', () => {
                    const src = trigger.getAttribute('data-full') || './public/img/producto-default.jpg';
                    const nombre = trigger.getAttribute('data-nombre') || 'Plato';
                    abrirLightbox(src, nombre);
                });
                trigger.addEventListener('keydown', (event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                        event.preventDefault();
                        const src = trigger.getAttribute('data-full') || './public/img/producto-default.jpg';
                        const nombre = trigger.getAttribute('data-nombre') || 'Plato';
                        abrirLightbox(src, nombre);
                    }
                });
            });

            lightbox.addEventListener('click', (event) => {
                if (event.target === lightbox) {
                    cerrarLightbox();
                }
            });

            lightboxClose?.addEventListener('click', cerrarLightbox);

            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape' && lightbox.classList.contains('is-visible')) {
                    cerrarLightbox();
                }
            });
        };

        const cargarProductos = async () => {
            try {
                mostrarEstado('Cargando carta del restaurante…');
                const respuesta = await fetch(ENDPOINT, { cache: 'no-store' });
                if (!respuesta.ok) throw new Error('No se pudo obtener la carta');
                const data = await respuesta.json();
                const productos = Array.isArray(data?.productos) ? data.productos : [];
                if (!productos.length) {
                    mostrarEstado('Próximamente actualizaremos nuestra carta.');
                    return;
                }
                productosCache = productos;
                const categorias = obtenerCategorias(productosCache);
                configurarFiltros(categorias);
                renderizarCarta(productosCache, categoriaActiva);
            } catch (error) {
                console.warn(error);
                mostrarEstado('Ups, no pudimos cargar la carta en este momento. Intenta nuevamente más tarde.');
            }
        };

        cargarProductos();
    </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