Tul xxx Tul

Viewing: index.php

<?php
function normaliza_categoria($nombre) {
  $nombre = iconv('UTF-8', 'ASCII//TRANSLIT', $nombre);
  $nombre = strtolower($nombre);
  $nombre = preg_replace('/[^a-z0-9]+/', '-', $nombre);
  $nombre = trim($nombre, '-');
  return $nombre;
}
?>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>DONDEEDY</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link rel="apple-touch-icon" sizes="180x180" href="icon.php?size=180&maskable=1">

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="style.css" rel="stylesheet">

  <!-- PWA -->
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#b30000">

  <style>
    .precio-especial {
      font-weight: bold;
      margin-top: 15px;
      font-size: 18px;
    }

    .precio-especial span {
      color: #2e8b57;
      background: -webkit-linear-gradient(#2e8b57, #006400);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 22px;
      padding: 5px 10px;
      position: relative;
      font-weight: 700;
      text-shadow: 0px 0px 1px rgba(0, 100, 0, 0.3);
      animation: brillar 2s infinite alternate;
    }

    @keyframes brillar {
      from {
        opacity: 0.8;
      }

      to {
        opacity: 1;
        text-shadow: 0px 0px 5px rgba(46, 139, 87, 0.5);
      }
    }

    /* Estilos para las imágenes del menú */
    .menu .menu-img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      object-fit: cover;
      transition: all 0.3s ease;
      cursor: pointer;
      border: 3px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-right: 15px;
    }

    .menu .menu-img:hover {
      transform: scale(1.1);
      border-color: #cda45e;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    /* Ajustes para el lightbox */
    .glightbox-clean .gslide-media {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
      border-radius: 8px;
      overflow: hidden;
    }

    .carrito-pedido {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 15px;
      margin-top: 20px;
    }

    .carrito-pedido h5 {
      color: #000;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .lista-pedido {
      max-height: 200px;
      overflow-y: auto;
    }

    .item-seleccionado {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
      margin-bottom: 5px;
    }

    .item-seleccionado:last-child {
      border-bottom: none;
    }

    .item-seleccionado .info-item {
      flex-grow: 1;
    }

    .item-seleccionado .info-item h6 {
      margin: 0;
      color: #333;
    }

    .item-seleccionado .info-item p {
      margin: 0;
      color: #666;
      font-size: 0.9em;
    }

    .item-seleccionado .acciones-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .item-seleccionado .acciones-item button {
      background: none;
      border: none;
      color: #dc3545;
      cursor: pointer;
      padding: 5px;
    }

    .item-seleccionado .acciones-item button:hover {
      color: #c82333;
    }

    .item-seleccionado .cantidad {
      font-weight: bold;
      color: #000;
    }

    /* Estilos para el botón de carrito en la barra de navegación */
    #ver-pedido-btn {
      transition: all 0.3s ease;
    }
    
    #ver-pedido-btn:hover {
      transform: scale(1.05);
      background-color: #f8f8f8 !important;
    }
    
    #contador-items, 
    #contador-items-mobile {
      font-size: 10px;
      font-weight: bold;
      padding: 0.25em 0.6em;
      transform: translate(25%, -25%) !important;
    }
    
    /* Estilos para el botón de pedido móvil */
    #ver-pedido-btn-mobile {
      font-size: 0.9rem;
      padding: 0.5rem 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #b30000;
      color: white;
      border: none;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }
    
    #ver-pedido-btn-mobile i {
      font-size: 1.1rem;
    }
    
    #ver-pedido-btn-mobile:hover {
      background-color: #8c0000;
    }
    
    /* Estilos para el botón Pedir en Local */
    .btn-order-local {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 25px;
      font-weight: 600;
      font-size: 1.1rem;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .btn-order-local:hover {
      background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    }
    
    .btn-order-local i {
      margin-right: 8px;
      font-size: 1.2rem;
    }
    
    /* Estilos para el modal de pedido local */
    .modal-local .modal-header {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      color: white;
      border-bottom: none;
    }
    
    .modal-local .modal-title {
      font-weight: 700;
      letter-spacing: 1px;
    }
    
    .modal-local .btn-close {
      filter: invert(1);
    }
    
    .mesa-selector {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    
    .mesa-option {
      padding: 15px 10px;
      border: 2px solid #e9ecef;
      border-radius: 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background: white;
      font-weight: 600;
      font-size: 1.1rem;
    }
    
    .mesa-option:hover {
      border-color: #28a745;
      background: #f8fff9;
      transform: scale(1.05);
    }
    
    .mesa-option.selected {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      color: white;
      border-color: #28a745;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }
    
    .mesa-option.selected:hover {
      background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
    }
    
    /* Estilos específicos para dispositivos móviles */
    @media (max-width: 991.98px) {
      .navbar {
        position: relative;
      }
      
      .navbar-collapse {
        text-align: right;
      }
      
      .navbar-nav {
        width: 100%;
      }
      
      .navbar-nav .nav-link {
        padding-right: 0;
        text-align: right;
      }
      
      .navbar .d-flex {
        margin-top: 15px;
        justify-content: flex-end !important;
        width: 100%;
      }
      
      .navbar-toggler {
        border: none;
        padding-right: 0;
      }
      
      #header .logo {
        margin-right: auto;
      }
      
      /* Ajustar altura del header en móvil */
      #header {
        height: auto;
        padding: 15px 0;
      }
      
      /* Cuando el menú está abierto */
      #header.menu-open {
        padding-top: 10px;
      }
      
      #header.menu-open .logo {
        position: absolute;
        top: 10px;
        left: 15px;
        z-index: 1030;
        transform: scale(0.85);
        transform-origin: top left;
        transition: all 0.3s ease;
      }
      
      #header.menu-open .navbar-collapse {
        margin-top: 40px;
        padding-top: 10px;
      }
      
      /* Animación suave para los cambios */
      #header .logo,
      #header .navbar-collapse {
        transition: all 0.3s ease;
      }
      
      /* Estilos para los filtros del menú en móvil */
      #menu-flters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 0 10px;
      }
      
      #menu-flters li {
        font-size: 14px;
        padding: 6px 12px;
        margin: 0;
        border-radius: 20px;
        min-width: auto;
        white-space: nowrap;
      }
      
      /* Sobrescribir padding para el contenedor en tabletas */
      .filtros-container {
        padding: 0px 30px;
      }
      
      /* Espaciado correcto entre logo y botones */
      #header .container-fluid {
        align-items: center;
      }
    }
    
    /* Ajuste específico para pantallas muy pequeñas */
    @media (max-width: 380px) {
      #ver-pedido-btn-mobile {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
      }
      
      #ver-pedido-btn-mobile i {
        font-size: 1rem;
      }
    }
    
    @media (max-width: 767px) {
      .filtros-container {
        padding: 0px 20px;
      }
    }
    
    /* Media query específico para dispositivos muy pequeños */
    @media (max-width: 480px) {
      #menu-flters {
        gap: 4px;
        padding: 0 5px;
      }
      
      #menu-flters li {
        font-size: 12px;
        padding: 5px 10px;
      }
      
      .filtros-container {
        padding: 0px 10px !important;
      }
    }
    
    /* Estilos para el contenedor de filtros */
    .filtros-container {
      padding: 0px 120px;
    }

    /* Estilos para el contador de items en el botón */
    #contador-items, #contador-items-mobile {
      background-color: var(--color-primary) !important;
      color: var(--color-secondary) !important;
      font-weight: bold;
    }

    /* Estilos para destacar la cantidad en la lista de pedido */
    .cantidad-destacada {
      font-size: 1.2em; /* Make font size larger */
      font-weight: bold; /* Make text bold */
      color: var(--color-primary-dark); /* Use a prominent color */
      margin-right: 10px; /* Add some spacing */
    }
    
    .subtotal {
      font-weight: bold;
      color: #000; /* Use a prominent color, like black */
    }

    /* === FOOTER  MODERNO CON ENLACE DESTACADO === */
    .footer-spb {
      position: relative;
      background: linear-gradient(120deg, #b30000 0%, #d20000 100%);
      color: #fff;
      overflow: hidden;
      box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
      font-family: var(--font-primary);
    }

    .footer-wave {
      position: absolute;
      top: -30px;
      left: 0;
      width: 100%;
      height: 60px;
      background: url('data:image/svg+xml;utf8,<svg width="100%" height="60" viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30C120 60 360 0 720 30C1080 60 1320 0 1440 30V60H0V30Z" fill="%23fff" fill-opacity="0.15"/></svg>') repeat-x;
      background-size: cover;
      z-index: 2;
      pointer-events: none;
      animation: waveMove 8s linear infinite;
    }

    @keyframes waveMove {
      0% { background-position-x: 0; }
      100% { background-position-x: 1000px; }
    }

    .footer-logo {
      width: 60px;
      height: 60px;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: none;
      background: transparent;
      margin-bottom: 8px;
      transition: transform 0.3s;
    }
    .footer-logo:hover {
      transform: scale(1.08) rotate(-2deg);
    }

    .footer-brand {
      font-family: var(--font-logo);
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: #ffc107;
      margin-bottom: 0.2rem;
      text-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }

    .footer-slogan {
      font-size: 1rem;
      color: #fff;
      opacity: 0.85;
      font-style: italic;
      margin-bottom: 0;
    }

    .footer-phrase {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 80px;
      padding: 10px 0;
    }
    .footer-phrase-text {
      font-size: 1.15rem;
      font-weight: 600;
      color: #ffc107;
      text-shadow: 0 2px 8px rgba(0,0,0,0.10);
      letter-spacing: 0.5px;
      margin-bottom: 2px;
      animation: fadeInFooter 2s;
    }

    .footer-phrase-sub {
      font-size: 1rem;
      color: #fff;
      opacity: 0.85;
      font-style: italic;
      animation: fadeInFooter 2.5s;
    }

    @keyframes fadeInFooter {
      from { opacity: 0; transform: translateY(20px);}
      to { opacity: 1; transform: translateY(0);}
    }

    .footer-contact {
      color: #fff;
      font-size: 1rem;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0.92;
      transition: color 0.2s;
      justify-content: flex-end;
    }
    .footer-contact i {
      color: #ffc107;
      font-size: 1.2rem;
      margin-right: 4px;
      transition: color 0.2s;
    }
    .footer-contact:hover {
      color: #ffc107;
    }
    .footer-contact:hover i {
      color: #fff;
    }

    .footer-divider {
      border: none;
      border-top: 1.5px solid rgba(255,255,255,0.18);
      margin: 1.5rem 0;
    }

    .footer-copyright {
      color: #fff;
      font-size: 1rem;
      opacity: 0.85;
      margin-bottom: 2px;
      letter-spacing: 0.5px;
    }
    .footer-credits {
      color: #ffc107;
      font-size: 1.05rem;
      opacity: 0.95;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 2px;
    }
    .footer-link-sb {
      color: #fff;
      font-weight: 700;
      background: linear-gradient(90deg, #ffc107 0%, #ff4d4d 100%);
      padding: 3px 14px 3px 10px;
      border-radius: 20px;
      margin-left: 6px;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(255,193,7,0.10);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }
    .footer-link-sb i {
      color: #fff700;
      font-size: 1.1em;
      margin-right: 2px;
      transition: color 0.2s;
    }
    .footer-link-sb:hover {
      background: linear-gradient(90deg, #ff4d4d 0%, #ffc107 100%);
      color: #b30000;
      transform: scale(1.08) rotate(-2deg);
      box-shadow: 0 4px 16px rgba(255,77,77,0.18);
      text-decoration: none;
    }
    .footer-link-sb:hover i {
      color: #b30000;
    }

    @media (max-width: 767px) {
      .footer-spb .row > div {
        text-align: center !important;
        margin-bottom: 18px;
      }
      .footer-logo {
        margin: 0 auto 8px auto;
      }
      .footer-divider {
        margin: 1rem 0;
      }
      .footer-contact {
        justify-content: center;
      }
    }

    /* ALERTA FLOTANTE RESPONSIVE */
    #alerta-agregado {
      display: none;
      position: fixed;
      top: 90px;
      right: 30px;
      z-index: 2000;
      min-width: 260px;
      max-width: 350px;
      transition: left 0.3s, right 0.3s, transform 0.3s;
    }
    @media (max-width: 768px) {
      #alerta-agregado {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 80px;
      }
    }

    /* Imagen destacada sobre el mapa - MEJORA SORPRENDENTE */
    .map-highlight-container {
      width: 100%;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border: 3px solid rgba(255,255,255,0.8);
      transition: box-shadow 0.3s, transform 0.3s;
    }
    .map-highlight-container:hover {
      box-shadow: 0 12px 40px rgba(179,0,0,0.18), 0 2px 12px rgba(255,193,7,0.10);
      transform: scale(1.015);
    }
    .map-highlight-img {
      width: 100%;
      aspect-ratio: 16/9;
      height: auto;
      object-fit: cover;
      border-radius: 17px;
      filter: brightness(0.97) contrast(1.08) saturate(1.08);
      box-shadow: inset 0 0 20px rgba(0,0,0,0.08);
      display: block;
      transition: all 0.5s cubic-bezier(.4,2,.6,1);
      transform: scale(1.00);
    }
    .map-highlight-container:hover .map-highlight-img {
      transform: scale(1.06) rotate(-1deg);
      filter: brightness(1.05) contrast(1.15) saturate(1.18);
    }
    @media (max-width: 991px) {
      .map-highlight-container {
        max-width: 100%;
      }
      .map-highlight-img {
        aspect-ratio: 16/10;
      }
    }
    @media (max-width: 575px) {
      .map-highlight-img {
        aspect-ratio: 16/12;
      }
    }

    .ubicacion-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: linear-gradient(90deg, #fff 60%, #ffe5e5 100%);
      border-radius: 2em;
      box-shadow: 0 4px 24px rgba(179,0,0,0.10), 0 1.5px 8px rgba(179,0,0,0.08);
      padding: 10px 38px 10px 22px;
      font-weight: 700;
      font-size: 1.25rem;
      color: #b30000;
      position: relative;
      margin: 0 auto 12px auto;
      border: 2.5px solid #fff3f3;
      transition: box-shadow 0.2s, background 0.2s;
      max-width: 420px;
      min-width: 260px;
      width: fit-content;
      white-space: nowrap;
      overflow: hidden;
      letter-spacing: 0.5px;
      /* Efecto de brillo animado */
      box-shadow: 0 0 0 4px rgba(255,193,7,0.08), 0 4px 24px rgba(179,0,0,0.10);
      z-index: 1;
    }
    .ubicacion-badge::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: 2em;
      pointer-events: none;
      z-index: 2;
      border: 2.5px solid transparent;
      background: linear-gradient(120deg, #ffc107 0%, #b30000 100%) border-box;
      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      opacity: 0.7;
      animation: ubicacionBrillo 2.5s linear infinite;
    }
    @keyframes ubicacionBrillo {
      0% { opacity: 0.7; box-shadow: 0 0 0 0 #ffc107; }
      50% { opacity: 1; box-shadow: 0 0 16px 4px #ffc10788; }
      100% { opacity: 0.7; box-shadow: 0 0 0 0 #ffc107; }
    }
    .ubicacion-badge:hover {
      box-shadow: 0 8px 32px rgba(179,0,0,0.18), 0 2px 12px rgba(255,193,7,0.10), 0 0 16px 2px #ffc10755;
      background: linear-gradient(90deg, #fff 40%, #ffd6d6 100%);
      transform: scale(1.03) rotate(-1deg);
    }
    @media (max-width: 600px) {
      .ubicacion-badge {
        font-size: 1em;
        padding: 8px 10vw 8px 6vw;
        max-width: 98vw;
        min-width: 0;
      }
    }

    .ubicacion-icon {
      background: linear-gradient(135deg, #b30000 0%, #ffc107 100%);
      color: #fff;
      border-radius: 50%;
      width: 2.5em;
      height: 2.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6em;
      box-shadow: 0 2px 8px rgba(179,0,0,0.12);
      animation: pulseUbicacion 2.2s infinite;
    }
    @keyframes pulseUbicacion {
      0%, 100% { transform: scale(1);}
      50% { transform: scale(1.12);}
    }
    .ubicacion-text {
      display: flex;
      flex-direction: column;
      font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
      font-size: 1.1em;
      color: #b30000;
      line-height: 1.1;
      letter-spacing: 0.5px;
    }
    .ubicacion-text small {
      color: #444;
      font-size: 0.95em;
      font-weight: 500;
      letter-spacing: 0.2px;
      margin-top: 2px;
    }
    @media (max-width: 600px) {
      .ubicacion-badge {
        font-size: 1em;
        padding: 10px 12px 10px 10px;
        gap: 10px;
      }
      .ubicacion-icon {
        width: 2em;
        height: 2em;
        font-size: 1.2em;
      }
    }
    @keyframes badgeFadeIn {
      from { opacity: 0; transform: translateY(-18px);}
      to { opacity: 1; transform: translateY(0);}
    }

    .info .address h4,
    .info .address p,
    .info .email h4,
    .info .email p,
    .info .phone h4,
    .info .phone p {
      color: #111 !important;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* Galería del local */
    .gallery-wrapper {
      max-width: 980px;
      margin: 0 auto 0.75rem auto;
    }
    .gallery-video-container {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 6px 22px rgba(0,0,0,0.10);
      margin: 0 auto 1rem auto;
      max-width: 980px;
      aspect-ratio: 16 / 9;
    }
    .gallery-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .video-mute-btn {
      position: absolute;
      right: 12px;
      bottom: 12px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,0.55);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
      z-index: 3;
    }
    .video-mute-btn:hover { background: rgba(0,0,0,0.7); transform: translateY(-1px); }
    .video-mute-btn:active { transform: scale(0.96); }
    .video-mute-btn.pulse { animation: btnPulse .28s ease; }
    @keyframes btnPulse { from { box-shadow: 0 0 0 0 rgba(255,255,255,.35);} to { box-shadow: 0 0 0 12px rgba(255,255,255,0);} }
    @media (max-width: 575px) {
      .gallery-video-container { aspect-ratio: 16 / 10; }
    }
    .gallery-title {
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #b30000;
    }
    .gallery-item {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: #f8f9fa;
      box-shadow: 0 6px 22px rgba(0,0,0,0.10);
      aspect-ratio: 1 / 1;
    }
    .gallery-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.02);
      transition: transform 0.5s cubic-bezier(.4,2,.6,1), filter 0.3s ease;
      display: block;
    }
    .gallery-item:hover .gallery-img {
      transform: scale(1.08);
      filter: contrast(1.05) saturate(1.05);
    }
    .gallery-zoom {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events: none;
    }
    .gallery-item:hover .gallery-zoom {
      opacity: 1;
      transform: translateY(0);
    }

  </style>

</head>

<body class="has-fixed-header">

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">
      <h1 class="logo me-auto me-lg-0">
        <a href="index.html">
          <img src="assets/img/favicon.png" alt="DONDEEDY" oncontextmenu="return false;" ondragstart="return false;" onselectstart="return false;">
        </a>
      </h1>
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <!-- Botón de pedido para móviles - visible solo en móvil -->
          <a id="ver-pedido-btn-mobile" data-bs-toggle="modal" data-bs-target="#pedidoModal" class="btn btn-order2 d-lg-none me-2 position-relative">
            <i class="bi bi-bicycle"></i> Pedir a Domicilio
            <span id="contador-items-mobile" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark text-white">0</span>
          </a>
          <button class="navbar-toggler ms-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto text-lg-start text-end">
              <!-- <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">INICIO</a>
              </li> -->
              <li class="nav-item">
                <a class="nav-link" href="#menu">MENÚ</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contacto">CONTACTO</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#footer">UBICACIÓN</a>
              </li>
              <!-- <li class="nav-item">
                <a class="nav-link" href="contact.php">MENSAJEANOS</a>
              </li> -->
              <li class="nav-item">
                <a class="nav-link" href="admin/admin_login.php">INICIAR SESIÓN</a>
              </li>
            </ul>
            <div class="d-flex">
                <a id="ver-pedido-btn" data-bs-toggle="modal" data-bs-target="#pedidoModal" class="btn btn-order2 d-none d-lg-inline-block">
                  <i class="bi bi-bicycle"></i> Pedir a Domicilio 
                  <span id="contador-items" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark text-white">0</span>
                </a>                
              </div>
              <!-- Instalar Aplicación (solo móvil) -->
              <div class="w-100 d-lg-none text-end mt-3">
                <button id="installAppBtnMobile" type="button" class="btn btn-warning" style="display:none;">
                  <i class="bi bi-download"></i> Instalar Aplicación
                </button>
              </div>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <!-- FIN de Header -->

  <!-- ======= Landing Page Section ======= -->
  <!-- <section class="landing-page">
    <div class="container">
      <div class="row">
        <div class="col-lg-7">
          <div class="content-wrapper text-end">
            <div class="pattern-dots pattern-dots-1"></div>
            <h1 class="fast-food mt-5 mb-5">¡Donde Sabe Mejor!</h1>            
            <div class="d-flex justify-content-end mt-4 mb-4">
              <a data-bs-toggle="modal" data-bs-target="#pedidoModal" class="btn btn-order"><i class="bi bi-bicycle">
                </i>Pide YA!</a>
            </div>
            <div class="pattern-dots pattern-dots-2"></div>
          </div>
        </div>  
        <div class="col-lg-5">
          <div class="productos-circle">
            <img src="assets/img/productos.gif" alt="Productos DONDEEDY">
          </div>
        </div>              
      </div>
    </div>
  </section> -->
  <!-- FIN Landing Page Section -->

  <main id="main">
    <!-- ======= Seccion de Menu ======= -->
    <section id="menu" class="menu section-bg">
      <div class="container">

        <div class="section-title mt-4">
          <h2 class="fs-2 fs-md-3 fs-sm-4">Menú</h2>
          <p class="fs-5 fs-sm-6">Descubre el sabor</p>
        </div>

        <div class="row" style="margin-top: -50px;">
          <div class="col-12 mb-4 filtros-container">

            <!-- Botón Pedir en Local -->
            <!-- <div class="text-center mb-4">
              <button type="button" class="btn btn-order-local" data-bs-toggle="modal" data-bs-target="#pedidoLocalModal">
                <i class="bi bi-shop"></i> Pedir en Local
              </button>
            </div> -->

            <ul id="menu-flters">
              <?php
                include 'components/connect.php';
                // Obtener categorías dinámicamente
                $categorias = $conn->query("SELECT c.* FROM categories c INNER JOIN products p ON c.id = p.category AND COALESCE(p.is_active, 1) = 1 GROUP BY c.id, c.name ORDER BY c.name")->fetchAll(PDO::FETCH_ASSOC);
                // Obtener productos
                $stmt = $conn->prepare("SELECT p.*, c.name as category_name FROM products p LEFT JOIN categories c ON p.category = c.id WHERE COALESCE(p.is_active, 1) = 1 ORDER BY c.name, p.name");
                $stmt->execute();
                $productos = $stmt->fetchAll(PDO::FETCH_ASSOC);
                foreach ($productos as &$producto) {
                  $producto['sale_price'] = isset($producto['sale_price']) && (float)$producto['sale_price'] > 0
                    ? (float)$producto['sale_price']
                    : (float)$producto['price'];
                }
                unset($producto);
                // Obtener zonas de entrega activas
                try {
                  $zonesStmt = $conn->prepare("SELECT id, name, fee FROM delivery_zones WHERE is_active = 1 ORDER BY name");
                  $zonesStmt->execute();
                  $delivery_zones = $zonesStmt->fetchAll(PDO::FETCH_ASSOC);
                } catch (Throwable $e) {
                  $delivery_zones = [];
                }
                // Agrupar productos por categoría
                $productosPorCategoria = [];
                foreach ($productos as $producto) {
                  $cat = $producto['category_name'];
                  if (!isset($productosPorCategoria[$cat])) $productosPorCategoria[$cat] = [];
                  $productosPorCategoria[$cat][] = $producto;
                }
              ?>
              <?php foreach($categorias as $cat): ?>
                <li data-filter=".filter-<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></li>
              <?php endforeach; ?>
              <li data-filter="*" class="filter-active">Todo</li>
              </ul>
          </div>
          <div class="col-12">
            <!-- Aquí irá el contenido del menú -->

            <div class="row menu-container">
              <?php foreach($productos as $producto):
                $catClass = 'filter-'.normaliza_categoria($producto['category_name']);
              ?>
                <div class="col-lg-4 col-md-6 menu-item <?= $catClass ?>">
                <div class="menu-card">
                  <div class="menu-img-container">
                      <img src="uploaded_img/<?= htmlspecialchars($producto['image']) ?>" class="menu-img" alt="<?= htmlspecialchars($producto['name']) ?>" style="width: 100%; height: 100%;">
                  </div>
                <div class="menu-content">
                      <a href="javascript:void(0);"><?= htmlspecialchars($producto['name']) ?></a>
                      <span>COP <?= number_format($producto['sale_price'], 0, ',', '.') ?></span>
                </div>
                    <?php if(!empty($producto['description'])): ?>
                <div class="menu-ingredients">
                      <?= nl2br(htmlspecialchars($producto['description'])) ?>
                  </div>
                    <?php endif; ?>
                    <?php $nombrePlano = addslashes($producto['name']); $catKey = normaliza_categoria($producto['category_name']); ?>
                    <a href="javascript:void(0);" class="btn-order2" onclick="agregarItemDirecto('<?= $catKey ?>', '<?= $nombrePlano ?>', 1, event)">Agregar al Pedido</a>
                </div>
              </div>
              <?php endforeach; ?>
              </div>
          </div>
        </div>

      </div>
    </section><!-- FIN de seccion Menu -->



    <!-- Modal de Pedidos -->
    <div class="modal fade" id="pedidoModal" tabindex="-1" aria-labelledby="pedidoModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="pedidoModalLabel">Pedido a Domicilio</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="pedidoForm">
              <div class="mb-3">
                <label for="nombre" class="form-label">Nombre y Apellido</label>
                <input type="text" class="form-control" id="nombre" required>
              </div>
              <div class="mb-3">
                <label for="telefono" class="form-label">Teléfono Celular</label>
                <input type="tel" class="form-control" id="telefono" required>
              </div>
              <?php if (!empty($delivery_zones)): ?>
              <div class="mb-3">
                <label for="zonaEntrega" class="form-label">Zona/Localidad de Entrega</label>
                <select class="form-select" id="zonaEntrega" required>
                  <option value="" selected disabled>Selecciona tu zona/localidad</option>
                  <option value="other" data-fee="0" data-name="Localidad no registrada">Mi localidad no está registrada</option>
                  <?php foreach ($delivery_zones as $z): ?>
                    <option value="<?= (int)$z['id'] ?>" data-fee="<?= (float)$z['fee'] ?>" data-name="<?= htmlspecialchars($z['name']) ?>">
                      <?= htmlspecialchars($z['name']) ?> - COP <?= number_format((float)$z['fee'], 0, ',', '.') ?>
                    </option>
                  <?php endforeach; ?>
                </select>
              </div>
              <?php endif; ?>
              <div class="mb-3">
                <label for="direccion" class="form-label">Describe tu Dirección</label>
                <textarea class="form-control" id="direccion" rows="2" required></textarea>
                <input type="hidden" id="latitud" name="latitud">
                <input type="hidden" id="longitud" name="longitud">
              </div>
              <div class="mb-3">
                <button type="button" class="btn btn-outline-primary w-100" id="direccionGoogleBtn">
                  <i class="bi bi-geo-alt-fill me-2"></i> Dirección Google Maps
                </button>
                <small id="direccionGoogleStatus" class="text-muted d-block mt-2"></small>
              </div>
              <!-- ACCION PARA OBTENER LA DIRECCION POR GOOGLE MAPS -->
              <!-- <div class="mb-3">
                <button type="button" class="btn btn-outline-primary w-100" id="obtenerUbicacion">
                  <i class="bi bi-geo-alt-fill me-2"></i> Añadir ubicación actual
                </button>
                <small class="text-muted d-block mt-2">Al usar la ubicación actual, se añadirá automáticamente tu dirección</small>
              </div> -->
              <div class="mb-3">
                <label for="metodoPago" class="form-label">Método de Pago</label>
                <select class="form-select" id="metodoPago" required>
                  <option value="">Seleccione un método de pago</option>
                  <option value="efectivo">Efectivo</option>
                  <option value="transferencia">Transferencia</option>
                </select>
              </div>

              <div class="mb-3">
                <label for="facturaElectronica" class="form-label">¿Deseas Factura Electrónica?</label>
                <select class="form-select" id="facturaElectronica">
                  <option value="no" selected>No</option>
                  <option value="si">Sí</option>
                </select>
              </div>

              <div class="row g-2 mb-3" id="datosFacturaContainer" style="display:none;">
                <div class="col-md-6">
                  <label for="cedulaNit" class="form-label">Cédula/NIT</label>
                  <input type="text" class="form-control" id="cedulaNit">
                </div>
                <div class="col-md-6">
                  <label for="emailFactura" class="form-label">Correo</label>
                  <input type="email" class="form-control" id="emailFactura">
                </div>
              </div>

              <div class="mb-3">
                <label for="notas" class="form-label">Notas Adicionales (Opcional)</label>
                <textarea class="form-control" id="notas" rows="2"></textarea>
              </div>

              <div class="mb-3">
                <label class="form-label">Filtrar por categoría</label>
                <select id="selectCategoriaPedido" class="form-select mb-2">
                  <option value="">Seleccione una categoría</option>
                  <?php foreach($categorias as $cat): ?>
                    <option value="<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label">Selecciona tus comidas</label>
                <div id="productosPorCategoria">
                  <?php
                    $productosPorCategoria = [];
                    foreach ($productos as $producto) {
                      $cat = normaliza_categoria($producto['category_name']);
                      if (!isset($productosPorCategoria[$cat])) $productosPorCategoria[$cat] = [];
                      $productosPorCategoria[$cat][] = $producto;
                    }
                    foreach ($categorias as $cat) {
                      $catKey = normaliza_categoria($cat['name']);
                      if (!isset($productosPorCategoria[$catKey])) continue;
                  ?>
                    <div class="categoria-bloque mb-3 categoria-bloque-<?= $catKey ?>">
                      <h5 style="color:#b30000; margin-bottom:10px;"><?= htmlspecialchars($cat['name']) ?></h5>
                      <div class="row">
                        <?php foreach ($productosPorCategoria[$catKey] as $producto): ?>
                          <div class="col-md-6 col-lg-4 mb-2 producto-categoria producto-categoria-<?= $catKey ?>">
                            <div class="card h-100 shadow-sm">
                              <div class="card-body d-flex align-items-center">
                                <img src="uploaded_img/<?= htmlspecialchars($producto['image']) ?>" alt="<?= htmlspecialchars($producto['name']) ?>" style="width:60px;height:60px;object-fit:cover;border-radius:8px;margin-right:10px;">
                                <div style="flex:1;">
                                  <div style="font-weight:bold;"><?= htmlspecialchars($producto['name']) ?></div>
                                  <div>COP <?= number_format($producto['sale_price'], 0, ',', '.') ?></div>
                                </div>
                                <div class="d-flex flex-column align-items-center ms-2">
                                  <button type="button" class="btn btn-sm btn-outline-secondary" onclick="actualizarCantidadPedido('<?= $catKey ?>', <?= $producto['id'] ?>, -1)">-</button>
                                  <span id="cantidad-<?= $catKey ?>-<?= $producto['id'] ?>" class="mx-1">0</span>
                                  <button type="button" class="btn btn-sm btn-outline-primary" onclick="actualizarCantidadPedido('<?= $catKey ?>', <?= $producto['id'] ?>, 1)">+</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        <?php endforeach; ?>
                      </div>
                    </div>
                  <?php } ?>
                </div>
              </div>

              <div class="carrito-pedido mb-3">
                <h5 style="color: #000000 !important;">Tu Pedido:</h5>
                <div id="listaPedido" class="lista-pedido">
                  <!-- Aquí se mostrarán los items seleccionados -->
                </div>
              </div>

              <div class="total-pedido">
                <div style="font-weight:600;color:#111">Subtotal Comidas: <span id="subtotalComidas">0,00</span></div>
                <div style="font-weight:600;color:#111">Comisión de Envío: <span id="comisionEnvio">0,00</span></div>
                <h4 style="color: #32CD32 !important;">Total: <span id="totalPedido">0,00</span></h4>
              </div>
              <div id="transferenciaAlert" class="alert alert-warning align-items-center mt-2 small d-none" role="alert">
                <i class="bi bi-receipt me-2"></i>
                <div>Has elegido <strong>Transferencia</strong>. Para agilizar la confirmación, por favor envía el <strong>comprobante de pago</strong> por WhatsApp.</div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" id="enviarWhatsApp">
              <i class="bi bi-whatsapp"></i> Enviar pedido por WhatsApp
            </button>
          </div>
        </div>
      </div>
    </div>


    <!-- Modal de Pedido en Local -->
<div class="modal fade modal-local" id="pedidoLocalModal" tabindex="-1" aria-labelledby="pedidoLocalModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="pedidoLocalModalLabel">
          <i class="bi bi-shop me-2"></i>Pedido en Local
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="pedidoLocalForm">
          <div class="mb-3">
            <label for="nombreLocal" class="form-label">Nombre y Apellido</label>
            <input type="text" class="form-control" id="nombreLocal" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Selecciona tu Mesa</label>
            <div class="mesa-selector">
              <?php for($i = 1; $i <= 6; $i++): ?>
                <div class="mesa-option" data-mesa="<?= $i ?>">
                  Mesa <?= $i ?>
                </div>
              <?php endfor; ?>
            </div>
            <input type="hidden" id="mesaSeleccionada" name="mesa" required>
          </div>
          <div class="mb-3">
            <label for="metodoPagoLocal" class="form-label">Método de Pago</label>
            <select class="form-select" id="metodoPagoLocal" required>
              <option value="">Seleccione un método de pago</option>
              <option value="efectivo">Efectivo</option>
              <option value="transferencia">Transferencia</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="notasLocal" class="form-label">Notas Adicionales (Opcional)</label>
            <textarea class="form-control" id="notasLocal" rows="2"></textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">Buscar por categoría</label>
            <select id="selectCategoriaPedidoLocal" class="form-select mb-2">
              <option value="">Seleccione una categoría</option>
              <?php foreach($categorias as $cat): ?>
                <option value="<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Selecciona tus comidas</label>
            <div id="productosPorCategoriaLocal">
              <?php
                foreach ($categorias as $cat) {
                  $catKey = normaliza_categoria($cat['name']);
                  if (!isset($productosPorCategoria[$catKey])) continue;
              ?>
                <div class="categoria-bloque-local mb-3 categoria-bloque-local-<?= $catKey ?>" style="display:none;">
                  <h5 style="color:#28a745; margin-bottom:10px;"><?= htmlspecialchars($cat['name']) ?></h5>
                  <div class="row">
                    <?php foreach ($productosPorCategoria[$catKey] as $producto): ?>
                      <div class="col-md-6 col-lg-4 mb-2 producto-categoria-local producto-categoria-local-<?= $catKey ?>">
                        <div class="card h-100 shadow-sm">
                          <div class="card-body d-flex align-items-center">
                            <img src="uploaded_img/<?= htmlspecialchars($producto['image']) ?>" alt="<?= htmlspecialchars($producto['name']) ?>" style="width:60px;height:60px;object-fit:cover;border-radius:8px;margin-right:10px;">
                            <div style="flex:1;">
                              <div style="font-weight:bold;"><?= htmlspecialchars($producto['name']) ?></div>
                              <div>COP <?= number_format($producto['price'], 0, ',', '.') ?></div>
                            </div>
                            <div class="d-flex flex-column align-items-center ms-2">
                              <button type="button" class="btn btn-sm btn-outline-secondary" onclick="actualizarCantidadPedidoLocal('<?= $catKey ?>', <?= $producto['id'] ?>, -1)">-</button>
                              <span id="cantidad-local-<?= $catKey ?>-<?= $producto['id'] ?>" class="mx-1">0</span>
                              <button type="button" class="btn btn-sm btn-outline-primary" onclick="actualizarCantidadPedidoLocal('<?= $catKey ?>', <?= $producto['id'] ?>, 1)">+</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    <?php endforeach; ?>
                  </div>
                </div>
              <?php } ?>
            </div>
          </div>

          <div class="carrito-pedido mb-3">
            <h5 style="color: #000000 !important;">Tu Pedido:</h5>
            <div id="listaPedidoLocal" class="lista-pedido">
              <!-- Aquí se mostrarán los items seleccionados -->
            </div>
          </div>

          <div class="total-pedido">
            <h4 style="color: #28a745 !important;">Total: <span id="totalPedidoLocal">0,00</span></h4>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-success" id="enviarPedidoLocal">
          <i class="bi bi-check-circle"></i> Enviar Pedido
        </button>
      </div>
    </div>
  </div>
</div>


    <!-- ======= Seccion de Contactos ======= -->
    <style>
      #contacto [data-aos] {
        opacity: 1 !important;
        transform: none !important;
      }
    </style>
    <section id="contacto" class="contact">
      <div class="container" data-aos="fade-up">

        <div class="section-title" id="ubicacion">
          <h2>Contacto</h2>
          <p>Tu mesa te espera</p>
        </div>

        <div class="row mt-4">
          <div class="col-lg-5">
            <div class="open-hours-hexagon">
              <h3>Horario de Atención</h3>
              <div class="day">
                Lunes - Martes:
                <strong>4:00 PM - 12:00 PM</strong>
              </div>
              <div class="day">
                Jueves - Domingo:
                <strong>4:00 PM - 12:00 PM</strong>
              </div>
              <div class="day">
                Miércoles:
                <strong>Cerrado</strong>
              </div>
            </div>
          </div>

          <div class="col-lg-7">
            <div class="info">
              <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Ubicación:</h4>
                <p>Uribia - La Florida. Colombia</p>
              </div>

              <div class="email">
                <i class="bi bi-envelope"></i>
                <h4>Correo:</h4>
                <p>EDITHJOHANACAICEDOCHINCHILLA@GMAIL.COM</p>
              </div>

              <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Teléfono:</h4>
                <p>+57 3004798121</p>
              </div>
              <!-- Redes sociales -->
              <div class="social-media mt-2" style="display: flex; gap: 12px; align-items: center;">
                <a href="https://wa.me/573004798121?text=👋%20Hola%2C%20tengo%20una%20pregunta%20sobre%20DONDEEDY%20🍗" target="_blank" title="WhatsApp DONDEEDY" style="color: #25D366; font-size: 1.7rem; display: flex; align-items: center; text-decoration: none; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;">
                  <i class="bi bi-whatsapp" style="color: #25D366; font-size: 1.7rem; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important;"></i>
                </a>
            
              </div>
            </div>
          </div>

          <div class="row mt-5" data-aos="fade-up">
            <div class="col-12">
              <!-- Etiqueta arriba de la imagen -->
              <div class="ubicacion-badge">
                <span class="ubicacion-icon"><i class="bi bi-geo-alt-fill"></i></span>
                <span class="ubicacion-text">DONDEEDY<br><small>Centro</small></span>
              </div>
              <!-- <iframe style="border:0; width: 100%; height: 350px; border-radius: 15px; box-shadow: var(--shadow-md);"
                src="https://www.google.com/maps?q=8.599013,-71.156755&z=20&output=embed&hl=es"
                allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"
                title="Ubicación CC History Center, Mérida, Venezuela"></iframe> -->
              <!-- BOTÓN CÓMO LLEGAR -->
              <div class="d-flex justify-content-center mt-3 mb-4">
                <a href="https://maps.app.goo.gl/8axheXMf7QAAJiwv6" target="_blank" rel="noopener" class="btn-como-llegar-maps-img">
                  <span class="icono-maps-img" aria-hidden="true">
                    <img src="images/maps.png" alt="Google Maps" width="28" height="28" style="display:inline-block;vertical-align:middle;border-radius:6px;box-shadow:0 2px 8px rgba(66,133,244,0.10);background:#fff;" loading="lazy">
                  </span>
                  <span class="texto-btn-maps-img">¿Cómo llegar?</span>
                  <span class="direccion-btn-maps-img">Google Maps<br><span style='font-size:0.95em;color:#4285F4;'></span></span>
                </a>
              </div>
               <!-- GALERÍA DEL LOCAL -->
              <div class="gallery-wrapper" data-aos="fade-up">
                <!-- <div class="gallery-video-container" data-aos="zoom-in" data-aos-delay="50">
                  <video id="galleryVideo" class="gallery-video" src="assets/img/video.mp4" autoplay loop muted playsinline preload="auto"></video>
                  <button id="toggleMuteBtn" class="video-mute-btn" type="button" aria-pressed="false" title="Activar sonido">
                    <i class="bi bi-volume-mute-fill"></i>
                  </button>
                </div> -->
                <div class="row g-3">
                  <?php
                    $galleryDir = __DIR__ . '/assets/img/galeria';
                    $galleryUrlBase = 'assets/img/galeria';
                    $exts = ['jpg','jpeg','png','webp','gif','JPG','JPEG','PNG','WEBP','GIF'];
                    $galleryFiles = [];
                    if (is_dir($galleryDir)) {
                      $found = [];
                      foreach (scandir($galleryDir) as $f) {
                        $e = pathinfo($f, PATHINFO_EXTENSION);
                        if (in_array($e, $exts)) { $found[$f] = true; }
                      }
                      $preferredOrder = [
                        'pareycomarestaurante-20251029-0001.jpg',
                        'pareycomarestaurante-20251029-0002.jpg',
                        'pareycomarestaurante-20251029-0004.jpg',
                        '1_335c08ac-e804-4144-93ae-50c6c5e63f6f.jpeg',
                      ];
                      foreach ($preferredOrder as $filename) {
                        if (isset($found[$filename])) {
                          $galleryFiles[] = $filename;
                          unset($found[$filename]);
                        }
                      }
                      if (!empty($found)) {
                        $remaining = array_keys($found);
                        natsort($remaining);
                        $galleryFiles = array_merge($galleryFiles, $remaining);
                      }
                    }
                    if (!empty($galleryFiles)) {
                      $delay = 0;
                      foreach ($galleryFiles as $img):
                        $rel = $galleryUrlBase . '/' . $img;
                        $delay = ($delay + 50) % 300;
                  ?>
                    <div class="col-4" data-aos="zoom-in-up" data-aos-delay="<?= $delay ?>">
                      <a href="<?= htmlspecialchars($rel) ?>" class="gallery-lightbox" data-gallery="galeria-local">
                        <div class="gallery-item">
                          <img src="<?= htmlspecialchars($rel) ?>" alt="DONDEEDY - Galería" class="gallery-img" loading="lazy">
                          <span class="gallery-zoom"><i class="bi bi-arrows-fullscreen"></i></span>
                        </div>
                      </a>
                    </div>
                  <?php endforeach; } else { ?>
                    <div class="col-12">
                      <div class="map-highlight-container mb-3 position-relative">
                        <img src="assets/img/local.jpg" alt="DONDEEDY Local" class="img-fluid map-highlight-img">
                      </div>
                    </div>
                  <?php } ?>
                </div>
              </div>
              <style>
                .btn-como-llegar-maps-img {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  background: #fff;
                  color: #222;
                  font-weight: 600;
                  font-size: 1.13rem;
                  border: 2px solid #4285F4;
                  border-radius: 16px;
                  box-shadow: 0 4px 18px rgba(66,133,244,0.10), 0 1.5px 8px rgba(0,0,0,0.04);
                  padding: 16px 24px 12px 24px;
                  text-decoration: none;
                  transition: box-shadow 0.22s, transform 0.18s, border-color 0.18s, color 0.18s;
                  margin-top: 0.5rem;
                  min-width: 200px;
                  max-width: 100%;
                  text-align: center;
                  gap: 7px;
                  position: relative;
                  overflow: hidden;
                  z-index: 2;
                  cursor: pointer;
                  outline: none;
                  user-select: none;
                }
                .btn-como-llegar-maps-img:hover, .btn-como-llegar-maps-img:focus {
                  box-shadow: 0 8px 32px rgba(66,133,244,0.18), 0 2px 12px rgba(0,0,0,0.08);
                  border-color: #EA4335;
                  color: #4285F4;
                  transform: translateY(-2px) scale(1.035);
                  text-decoration: none;
                }
                .btn-como-llegar-maps-img:active {
                  box-shadow: 0 2px 8px rgba(66,133,244,0.10);
                  transform: scale(0.98);
                }
                .btn-como-llegar-maps-img .icono-maps-img {
                  margin-bottom: 2px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: filter 0.18s;
                }
                .btn-como-llegar-maps-img:hover .icono-maps-img img, .btn-como-llegar-maps-img:focus .icono-maps-img img {
                  filter: drop-shadow(0 4px 12px rgba(234,67,53,0.18)) brightness(1.08);
                }
                .btn-como-llegar-maps-img .texto-btn-maps-img {
                  font-size: 1.15rem;
                  font-weight: 800;
                  letter-spacing: 0.5px;
                  color: #222;
                  margin-bottom: 2px;
                  transition: color 0.18s;
                  display: inline-block;
                }
                .btn-como-llegar-maps-img:hover .texto-btn-maps-img, .btn-como-llegar-maps-img:focus .texto-btn-maps-img {
                  color: #4285F4;
                }
                .btn-como-llegar-maps-img .direccion-btn-maps-img {
                  font-size: 1.01rem;
                  color: #444;
                  font-weight: 500;
                  margin-top: 2px;
                  line-height: 1.2;
                  opacity: 0.93;
                  transition: color 0.18s;
                }
                .btn-como-llegar-maps-img:hover .direccion-btn-maps-img, .btn-como-llegar-maps-img:focus .direccion-btn-maps-img {
                  color: #4285F4;
                }
                @media (max-width: 767px) {
                  .btn-como-llegar-maps-img {
                    font-size: 1rem;
                    padding: 11px 7px 8px 7px;
                    min-width: 120px;
                  }
                  .btn-como-llegar-maps-img .icono-maps-img img {
                    width: 22px;
                    height: 22px;
                  }
                  .btn-como-llegar-maps-img .direccion-btn-maps-img {
                    font-size: 0.97rem;
                  }
                }
                @media (max-width: 480px) {
                  .btn-como-llegar-maps-img {
                    font-size: 0.97rem;
                    padding: 8px 2vw 6px 2vw;
                  }
                  .btn-como-llegar-maps-img .icono-maps-img img {
                    width: 18px;
                    height: 18px;
                  }
                  .btn-como-llegar-maps-img .direccion-btn-maps-img {
                    font-size: 0.93rem;
                  }
                }
              </style>
            </div>
          </div>

      </div>
    </section><!-- FIN de Contacto -->
  </main><!-- FIN #main -->

  <!-- Footer -->
  <footer id="footer" class="footer-spb">
    <div class="footer-wave"></div>
    <div class="container py-4">
      <div class="row align-items-center gy-4">
        <div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
          <img src="assets/img/favicon.png" alt="DONDEEDY" class="footer-logo mb-2">
          <h5 class="footer-brand mb-0">DONDEEDY</h5>
          <p class="footer-slogan mb-0">¡Donde sabe mejor!</p>
        </div>
        <div class="col-md-4 text-center mb-3 mb-md-0">
          <div class="footer-phrase">
            <i class="bi bi-stars" style="font-size:2rem;color:#ffc107; animation: spinStar 2.5s linear infinite;"></i>
            <div class="footer-phrase-text mt-2">
              <span>¡Gracias por preferirnos!🍗</span>
            </div>
            <div class="footer-phrase-sub">
              <span>Calidad, sabor y atención para ti.</span>
            </div>
          </div>
        </div>
        <div class="col-md-4 text-center text-md-end">
          <div class="footer-contact mb-2">
            <i class="bi bi-telephone"></i> <span>+57 3004798121</span>
          </div>
          <div class="footer-contact mb-2">
            <i class="bi bi-envelope"></i> <span>EDITHJOHANACAICEDOCHINCHILLA@GMAIL.COM</span>
          </div>
          <div class="footer-contact">
            <i class="bi bi-geo-alt"></i> <span>Uribia - La Florida. Colombia</span>
          </div>
        </div>
      </div>
      <!-- Botón Instalar Aplicación en escritorio (footer) -->
      <div class="row mt-2 d-none d-lg-flex justify-content-center">
        <div class="col-auto">
          <button id="installAppBtnDesktop" type="button" class="btn btn-warning" style="display:none;">
            <i class="bi bi-download"></i> Instalar Aplicación
          </button>
        </div>
      </div>
      <hr class="footer-divider my-4">
      <div class="row">
        <div class="col-12 text-center">
          <div class="footer-copyright">
            &copy; 2025 <strong>DONDEEDY</strong>. Todos los Derechos Reservados.
          </div>
          <div class="footer-credits">
            Creado por 
            <a href="https://aircan.me/" target="_blank" class="footer-link-sb">
              <i class="bi bi-lightning-charge-fill"></i> Aircan
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- FIN del Footer -->

  <div id="preloader">
    <div class="preloader-content">
      <img src="assets/img/favicon.png" class="preloader-logo" alt="DONDEEDY Logo" oncontextmenu="return false;" ondragstart="return false;" onselectstart="return false;">
      <div class="preloader-text">
        Bienvenido a <span>DONDEEDY</span>
      </div>
    </div>
  </div>
  
  <!-- Botones flotantes -->
  <div class="float-buttons-container">
    <a href="https://wa.me/573004798121?text=👋%20Hola%2C%20tengo%20una%20pregunta%20sobre%20DONDEEDY%20🍗"
      class="whatsapp-float" target="_blank">
      <i class="bi bi-whatsapp"></i>
    </a>
    <a href="#" class="back-to-top">
      <i class="bi bi-arrow-up-short"></i>
    </a>
  </div>

  <!-- ALERTA FLOTANTE PARA AGREGAR AL PEDIDO -->
  <div id="alerta-agregado" style="display:none;position:fixed;top:90px;right:30px;z-index:2000;min-width:260px;max-width:350px;"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Protección adicional contra descarga de imágenes
      document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && (e.key === 's' || e.key === 'S')) e.preventDefault();
        if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && (e.key === 'i' || e.key === 'I')) || (e.ctrlKey && e.shiftKey && (e.key === 'c' || e.key === 'C'))) e.preventDefault();
        if (e.ctrlKey && (e.key === 'u' || e.key === 'U')) e.preventDefault();
      });
      document.addEventListener('contextmenu', function(e) {
        if (e.target.tagName === 'IMG') e.preventDefault();
      });

      // --- INICIALIZACIÓN ---
      window.productosMenu = {};
      <?php foreach ($productos as $producto): $catKey = normaliza_categoria($producto['category_name']); ?>
        if (!window.productosMenu['<?= $catKey ?>']) window.productosMenu['<?= $catKey ?>'] = [];
        window.productosMenu['<?= $catKey ?>'].push({
          id: <?= $producto['id'] ?>,
          nombre: "<?= addslashes($producto['name']) ?>",
          precio: <?= (float)$producto['sale_price'] ?>,
          categoria: '<?= $catKey ?>',
        });
      <?php endforeach; ?>

      let pedidoActual = [];
      let deliveryFee = 0;
      let deliveryZoneName = '';

      // --- FUNCIONES ---
      function md5(str) {
        let hash = 0, i, chr;
        if (str.length === 0) return hash;
        for (i = 0; i < str.length; i++) {
          chr   = str.charCodeAt(i);
          hash  = ((hash << 5) - hash) + chr;
          hash |= 0;
        }
        return Math.abs(hash);
      }

      function normalizaId(nombre) {
        return nombre.replace(/[^a-zA-Z0-9]/g, '_');
      }

      // Función JS para normalizar categorías igual que en PHP
      function normaliza_categoria(nombre) {
        return nombre
          .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
          .toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/^-+|-+$/g, '');
      }

      function formatearCOP(valor) {
        return Number(valor || 0).toLocaleString('es-CO', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
      }

      window.formatearCOP = formatearCOP;
      
      // Inicializar galería (GLightbox)
      if (typeof GLightbox !== 'undefined') {
        GLightbox({ selector: '.gallery-lightbox', touchNavigation: true, loop: true, closeOnOutsideClick: true });
      }

      window.actualizarCantidadPedido = function(categoria, id, cambio) {
        var catKey = normaliza_categoria(categoria);
        const idSpan = 'cantidad-' + catKey + '-' + id;
        const cantidadElement = document.getElementById(idSpan);
        if (!cantidadElement) return;
        let cantidad = parseInt(cantidadElement.textContent) || 0;
        cantidad += cambio;
        cantidad = Math.max(0, cantidad);
        cantidadElement.textContent = cantidad;
        const itemIndex = pedidoActual.findIndex(item => item.categoria === catKey && item.id === id);
        const producto = (window.productosMenu[catKey] || []).find(p => p.id === id);
        const precio = producto ? producto.precio : 0;
        const nombre = producto ? producto.nombre : '';
        if (cantidad > 0) {
          if (itemIndex === -1) {
            pedidoActual.push({ categoria: catKey, id, nombre, cantidad, precio });
          } else {
            pedidoActual[itemIndex].cantidad = cantidad;
          }
        } else if (itemIndex !== -1) {
          pedidoActual.splice(itemIndex, 1);
        }
        actualizarListaPedidos();
        actualizarContadorItems();
        actualizarTotalPedido();
      };

      function actualizarContadorItems() {
        const contadorElement = document.getElementById('contador-items');
        const contadorMobileElement = document.getElementById('contador-items-mobile');
        const totalItems = pedidoActual.reduce((sum, item) => sum + item.cantidad, 0);
        contadorElement.textContent = totalItems;
        if (contadorMobileElement) contadorMobileElement.textContent = totalItems;
        if (totalItems > 0) {
          contadorElement.style.display = 'inline-block';
          if (contadorMobileElement) contadorMobileElement.style.display = 'inline-block';
        } else {
          contadorElement.style.display = 'none';
          if (contadorMobileElement) contadorMobileElement.style.display = 'none';
        }
      }

      function actualizarListaPedidos() {
        const listaPedido = document.getElementById('listaPedido');
        listaPedido.innerHTML = '';
        pedidoActual.forEach(item => {
          const itemElement = document.createElement('div');
          itemElement.className = 'item-seleccionado';
          itemElement.innerHTML = `
            <div class="info-item">
              <h6>${item.nombre}</h6>
              <p class="mb-0">COP ${formatearCOP(item.precio)}</p>
            </div>
            <div class="acciones-item">
              <div class="d-flex flex-column align-items-center">
                <small class="text-muted">Cantidad</small>
                <span class="cantidad-destacada">${item.cantidad}</span>
              </div>
              <span class="subtotal">COP ${formatearCOP(item.precio * item.cantidad)}</span>
              <button type="button" onclick="actualizarCantidadPedido('${item.categoria}', ${item.id}, -1)">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          `;
          listaPedido.appendChild(itemElement);
        });
      }

      function actualizarTotalPedido() {
        const subtotal = pedidoActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
        const comision = Number(deliveryFee || 0);
        const total = subtotal + comision;
        const subtotalEl = document.getElementById('subtotalComidas');
        const comisionEl = document.getElementById('comisionEnvio');
        const totalEl = document.getElementById('totalPedido');
        if (subtotalEl) subtotalEl.textContent = formatearCOP(subtotal);
        if (comisionEl) comisionEl.textContent = formatearCOP(comision);
        if (totalEl) totalEl.textContent = formatearCOP(total);
      }

      // --- ENVÍO POR WHATSAPP ---
      const facturaSelectEl = document.getElementById('facturaElectronica');
      const datosFacturaContainer = document.getElementById('datosFacturaContainer');
      const cedulaNitEl = document.getElementById('cedulaNit');
      const emailFacturaEl = document.getElementById('emailFactura');
      if (facturaSelectEl && datosFacturaContainer && cedulaNitEl && emailFacturaEl) {
        const toggleFacturaFields = function() {
          const show = facturaSelectEl.value === 'si';
          datosFacturaContainer.style.display = show ? '' : 'none';
          cedulaNitEl.required = show;
          emailFacturaEl.required = show;
          if (!show) {
            cedulaNitEl.classList.remove('is-invalid');
            emailFacturaEl.classList.remove('is-invalid');
          }
        };
        facturaSelectEl.addEventListener('change', toggleFacturaFields);
        toggleFacturaFields();
      }
      // Alerta para Transferencia
      const metodoPagoEl = document.getElementById('metodoPago');
      const transferenciaAlert = document.getElementById('transferenciaAlert');
      if (metodoPagoEl && transferenciaAlert) {
        const toggleTransferenciaAlert = function() {
          const isTransfer = metodoPagoEl.value === 'transferencia';
          transferenciaAlert.classList.toggle('d-none', !isTransfer);
          transferenciaAlert.setAttribute('aria-hidden', isTransfer ? 'false' : 'true');
        };
        metodoPagoEl.addEventListener('change', toggleTransferenciaAlert);
        toggleTransferenciaAlert();
      }
      // Zona de entrega (comisión)
      const zonaEntregaEl = document.getElementById('zonaEntrega');
      if (zonaEntregaEl) {
        const onZonaChange = function() {
          const opt = zonaEntregaEl.options[zonaEntregaEl.selectedIndex];
          const feeVal = parseFloat(opt?.dataset?.fee || '0');
          deliveryFee = isNaN(feeVal) ? 0 : feeVal;
          deliveryZoneName = opt?.dataset?.name || '';
          actualizarTotalPedido();
        };
        zonaEntregaEl.addEventListener('change', onZonaChange);
        onZonaChange();
      }
      // Dirección Google Maps (Geolocalización)
      (function(){
        const btn = document.getElementById('direccionGoogleBtn');
        const statusEl = document.getElementById('direccionGoogleStatus');
        const latEl = document.getElementById('latitud');
        const lonEl = document.getElementById('longitud');
        if (btn) {
          btn.addEventListener('click', function(){
            if (!navigator.geolocation) {
              if (statusEl) statusEl.textContent = 'Tu dispositivo/navegador no soporta GPS.';
              return;
            }
            if (statusEl) statusEl.textContent = 'Obteniendo ubicación...';
            navigator.geolocation.getCurrentPosition(function(pos){
              const { latitude, longitude } = pos.coords;
              if (latEl) latEl.value = latitude;
              if (lonEl) lonEl.value = longitude;
              if (statusEl) statusEl.textContent = 'Ubicación capturada ✔';
            }, function(err){
              if (statusEl) statusEl.textContent = 'No se pudo obtener la ubicación. Activa el GPS y permisos.';
            }, { enableHighAccuracy: true, timeout: 20000, maximumAge: 0 });
          });
        }
      })();
      document.getElementById('enviarWhatsApp').addEventListener('click', function () {
        const nombre = document.getElementById('nombre');
        const telefono = document.getElementById('telefono');
        const direccion = document.getElementById('direccion');
        const zonaEntrega = document.getElementById('zonaEntrega');
        const metodoPago = document.getElementById('metodoPago');
        const notas = document.getElementById('notas');
        const factura = document.getElementById('facturaElectronica');
        const cedulaNit = document.getElementById('cedulaNit');
        const emailFactura = document.getElementById('emailFactura');
        const latEl = document.getElementById('latitud');
        const lonEl = document.getElementById('longitud');
        [nombre, telefono, direccion, zonaEntrega, metodoPago, cedulaNit, emailFactura].forEach(field => { if (field) field.classList.remove('is-invalid'); });
        let isValid = true;
        let errorMessage = '';
        if (!nombre.value) {
          nombre.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor ingrese su nombre y apellido';
        } else if (!telefono.value) {
          telefono.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor ingrese su número de teléfono';
        } else if (!direccion.value && !(latEl && latEl.value && lonEl && lonEl.value)) {
          direccion.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor describe tu dirección o usa Dirección Google Maps';
        } else if (zonaEntrega && !zonaEntrega.value) {
          zonaEntrega.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor seleccione su zona/localidad de entrega';
        } else if (!metodoPago.value) {
          metodoPago.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor seleccione un método de pago';
        } else if (pedidoActual.length === 0) {
          isValid = false;
          errorMessage = 'Por favor seleccione al menos un item del menú';
        } else if (factura && factura.value === 'si' && (!cedulaNit || !cedulaNit.value.trim())) {
          if (cedulaNit) cedulaNit.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor ingrese su Cédula/NIT para la factura electrónica';
        } else if (factura && factura.value === 'si' && (!emailFactura || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailFactura.value))) {
          if (emailFactura) emailFactura.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor ingrese un correo válido para la factura electrónica';
        }
        if (!isValid) {
          const errorDiv = document.createElement('div');
          errorDiv.className = 'alert alert-danger alert-dismissible fade show';
          errorDiv.innerHTML = `
            <i class="bi bi-exclamation-triangle-fill"></i> ${errorMessage}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          `;
          const prevAlert = document.querySelector('.alert');
          if (prevAlert) prevAlert.remove();
          document.querySelector('#pedidoForm').insertBefore(errorDiv, document.querySelector('#pedidoForm').firstChild);
          return;
        }
        const subtotal = pedidoActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
        const comision = Number(deliveryFee || 0);
        const total = subtotal + comision;
        let mensaje = `🍕 *NUEVO PEDIDO - DONDEEDY* 🍗\n\n`;
        mensaje += `👤 *Cliente:* ${nombre.value}\n`;
        mensaje += `📱 *Teléfono:* ${telefono.value}\n`;
        const latVal = latEl && latEl.value ? String(latEl.value).trim() : '';
        const lonVal = lonEl && lonEl.value ? String(lonEl.value).trim() : '';
        if (latVal && lonVal) {
          const mapsLink = `https://www.google.com/maps?q=${latVal},${lonVal}`;
          mensaje += `📍 *Link:* ${mapsLink}\n`;
        }
        if (direccion.value && direccion.value.trim()) {
          mensaje += `📍 *Dirección:* ${direccion.value.trim()}\n`;
        }
        if (zonaEntrega && zonaEntrega.value) {
          mensaje += `📦 *Zona/Localidad:* ${deliveryZoneName}\n`;
          mensaje += `🚚 *Comisión de Envío:* COP ${formatearCOP(comision)}\n`;
        }
        mensaje += `💳 *Método de Pago:* ${metodoPago.value}\n`;
        if (factura && factura.value === 'si') {
          mensaje += `🧾 *Factura Electrónica:* Sí\n`;
          mensaje += `🪪 *Cédula/NIT:* ${cedulaNit ? cedulaNit.value : ''}\n`;
          mensaje += `📧 *Correo:* ${emailFactura ? emailFactura.value : ''}\n`;
        } else {
          mensaje += `🧾 *Factura Electrónica:* No\n`;
        }
        if (notas && notas.value.trim()) {
          mensaje += `📝 *Notas:* ${notas.value.trim()}\n`;
        }
        mensaje += `\n🍽️ *Productos:*\n`;
        pedidoActual.forEach(item => {
          mensaje += `• ${item.nombre} - ${item.cantidad} x COP ${formatearCOP(item.precio)} = COP ${formatearCOP(item.precio * item.cantidad)}\n`;
        });
        mensaje += `\n🧺 *Subtotal comidas:* COP ${formatearCOP(subtotal)}\n`;
        if (comision > 0) mensaje += `🚚 *Comisión envío:* COP ${formatearCOP(comision)}\n`;
        mensaje += `💰 *TOTAL A PAGAR:* COP ${formatearCOP(total)}\n\n`;
        mensaje += `¡Gracias por tu pedido! 😊`;
        const whatsappUrl = `https://wa.me/573004798121?text=${encodeURIComponent(mensaje)}`;
        window.open(whatsappUrl, '_blank');
      });

      // --- FILTRO DE CATEGORÍAS EN EL FORMULARIO ---
      const selectCategoria = document.getElementById('selectCategoriaPedido');
      if (selectCategoria) {
        document.querySelectorAll('.categoria-bloque').forEach(bloque => {
          bloque.style.display = 'none';
        });
        document.querySelectorAll('.producto-categoria').forEach(prod => {
          prod.style.display = 'none';
        });

        selectCategoria.addEventListener('change', function() {
          const categoria = this.value;
          document.querySelectorAll('.categoria-bloque').forEach(bloque => {
            bloque.style.display = 'none';
          });
          document.querySelectorAll('.producto-categoria').forEach(prod => {
            prod.style.display = 'none';
          });
          if (categoria) {
            const bloqueMostrar = document.querySelector('.categoria-bloque-' + categoria);
            if (bloqueMostrar) {
              bloqueMostrar.style.display = '';
              bloqueMostrar.querySelectorAll('.producto-categoria-' + categoria).forEach(prod => {
                prod.style.display = '';
                // Sincronizar el contador visual con el carrito usando el id
                const spanCantidad = prod.querySelector('span[id^="cantidad-"]');
                if (spanCantidad) {
                  // Extraer el id del producto del id del span
                  const idMatch = spanCantidad.id.match(/cantidad-[^-]+-(\d+)/);
                  const idProd = idMatch ? parseInt(idMatch[1]) : null;
                  const item = pedidoActual.find(item => item.categoria === categoria && item.id === idProd);
                  spanCantidad.textContent = item ? item.cantidad : 0;
                }
              });
              bloqueMostrar.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
          }
        });

        selectCategoria.value = '';
        document.querySelectorAll('.categoria-bloque').forEach(bloque => {
          bloque.style.display = 'none';
        });
        document.querySelectorAll('.producto-categoria').forEach(prod => {
          prod.style.display = 'none';
        });
      }

      // Al abrir el modal, sincroniza los contadores visuales con el carrito usando el id
      const pedidoModal = document.getElementById('pedidoModal');
      if (pedidoModal) {
        pedidoModal.addEventListener('show.bs.modal', function () {
          const selectCategoria = document.getElementById('selectCategoriaPedido');
          if (selectCategoria) {
            selectCategoria.value = '';
            document.querySelectorAll('.categoria-bloque').forEach(bloque => {
              bloque.style.display = 'none';
            });
            document.querySelectorAll('.producto-categoria').forEach(prod => {
              prod.style.display = 'none';
            });
          }
          pedidoActual.forEach(item => {
            const id = 'cantidad-' + item.categoria + '-' + item.id;
            const cantidadElement = document.getElementById(id);
            if (cantidadElement) cantidadElement.textContent = item.cantidad;
          });
        });
      }

      // --- AGREGAR ITEM DIRECTO DESDE EL MENÚ ---
      window.agregarItemDirecto = function(categoria, nombre, cantidad, event) {
        event.preventDefault();
        var catKey = normaliza_categoria(categoria);
        const producto = (window.productosMenu[catKey] || []).find(p => p.nombre === nombre);
        if (producto) {
          actualizarCantidadPedido(catKey, producto.id, cantidad);
          mostrarAlertaAgregado(producto.nombre);
        }
      };

      // FUNCIÓN PARA MOSTRAR ALERTA FLOTANTE AL AGREGAR PRODUCTO
      function mostrarAlertaAgregado(nombreProducto) {
        const alertaDiv = document.getElementById('alerta-agregado');
        if (!alertaDiv) return;
        alertaDiv.innerHTML = `
          <div class="alert alert-success alert-dismissible fade show shadow" role="alert" style="font-size:1rem;">
            <i class="bi bi-check-circle-fill me-2"></i>
            <strong>¡Agregado!</strong> <span>${nombreProducto}</span> se añadió al pedido.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
          </div>
        `;
        alertaDiv.style.display = 'block';
        // Ocultar automáticamente después de 2.5 segundos
        setTimeout(() => {
          if (alertaDiv) alertaDiv.style.display = 'none';
        }, 2500);
      }

      

    });
  </script>

  <!-- PWA: Service Worker + Install flow -->
  <script>
    (function() {
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('sw.js').catch(function(err){
            console.error('SW registration failed:', err);
          });
        });
      }

      var deferredPrompt = null;
      var btnMobile = document.getElementById('installAppBtnMobile');
      var btnDesktop = document.getElementById('installAppBtnDesktop');

      function hideInstallButtons() {
        if (btnMobile) btnMobile.style.display = 'none';
        if (btnDesktop) btnDesktop.style.display = 'none';
      }
      function showInstallButtons() {
        // Ocultar si ya está instalada
        var isStandalone = window.matchMedia && window.matchMedia('(display-mode: standalone)').matches;
        var isIOSStandalone = window.navigator && window.navigator.standalone;
        if (isStandalone || isIOSStandalone) { hideInstallButtons(); return; }
        if (btnMobile) btnMobile.style.display = '';
        if (btnDesktop) btnDesktop.style.display = '';
      }

      window.addEventListener('beforeinstallprompt', function(e){
        e.preventDefault();
        deferredPrompt = e;
        showInstallButtons();
      });

      window.addEventListener('appinstalled', function(){
        hideInstallButtons();
        deferredPrompt = null;
        try { localStorage.setItem('pwaInstalled', '1'); } catch (e) {}
      });

      async function triggerInstall() {
        if (!deferredPrompt) return;
        try {
          deferredPrompt.prompt();
          var choice = await deferredPrompt.userChoice;
          deferredPrompt = null;
          if (choice && choice.outcome === 'accepted') {
            hideInstallButtons();
          }
        } catch (e) {
          console.warn('Install prompt error:', e);
        }
      }

      if (btnMobile) btnMobile.addEventListener('click', triggerInstall);
      if (btnDesktop) btnDesktop.addEventListener('click', triggerInstall);

      document.addEventListener('DOMContentLoaded', function(){
        var alreadyInstalled = false;
        try { alreadyInstalled = localStorage.getItem('pwaInstalled') === '1'; } catch (e) {}
        var isStandalone = window.matchMedia && window.matchMedia('(display-mode: standalone)').matches;
        var isIOSStandalone = window.navigator && window.navigator.standalone;
        if (alreadyInstalled || isStandalone || isIOSStandalone) {
          hideInstallButtons();
        }
      });
    })();
  </script>

  <!-- --- PEDIDO LOCAL --- -->
  <script>
    let pedidoLocalActual = [];

    // Selección de mesa
    document.addEventListener('DOMContentLoaded', function() {
      const mesaOptions = document.querySelectorAll('.mesa-option');
      const mesaSeleccionadaInput = document.getElementById('mesaSeleccionada');
      
      if (mesaOptions && mesaSeleccionadaInput) {
        mesaOptions.forEach(option => {
          option.addEventListener('click', function() {
            mesaOptions.forEach(opt => opt.classList.remove('selected'));
            this.classList.add('selected');
            mesaSeleccionadaInput.value = this.dataset.mesa;
          });
        });
      }
    });

    // Funciones para el pedido local
    window.actualizarCantidadPedidoLocal = function(categoria, id, cambio) {
      var catKey = categoria; // ya viene normalizado
      const idSpan = 'cantidad-local-' + catKey + '-' + id;
      const cantidadElement = document.getElementById(idSpan);
      if (!cantidadElement) return;
      
      let cantidad = parseInt(cantidadElement.textContent) || 0;
      cantidad += cambio;
      cantidad = Math.max(0, cantidad);
      cantidadElement.textContent = cantidad;
      
      const itemIndex = pedidoLocalActual.findIndex(item => item.categoria === catKey && item.id === id);
      const producto = (window.productosMenu[catKey] || []).find(p => p.id === id);
      const precio = producto ? producto.precio : 0;
      const nombre = producto ? producto.nombre : '';
      
      if (cantidad > 0) {
        if (itemIndex === -1) {
          pedidoLocalActual.push({ categoria: catKey, id, nombre, cantidad, precio });
        } else {
          pedidoLocalActual[itemIndex].cantidad = cantidad;
        }
      } else if (itemIndex !== -1) {
        pedidoLocalActual.splice(itemIndex, 1);
      }
      
      actualizarListaPedidosLocal();
      actualizarTotalPedidoLocal();
    };

    function actualizarListaPedidosLocal() {
      const listaPedido = document.getElementById('listaPedidoLocal');
      if (!listaPedido) return;
      
      listaPedido.innerHTML = '';
      pedidoLocalActual.forEach(item => {
        const itemElement = document.createElement('div');
        itemElement.className = 'item-seleccionado';
        itemElement.innerHTML = `
          <div class="info-item">
            <h6>${item.nombre}</h6>
            <p class="mb-0">COP ${formatearCOP(item.precio)}</p>
          </div>
          <div class="acciones-item">
            <div class="d-flex flex-column align-items-center">
              <small class="text-muted">Cantidad</small>
              <span class="cantidad-destacada">${item.cantidad}</span>
            </div>
            <span class="subtotal">COP ${formatearCOP(item.precio * item.cantidad)}</span>
            <button type="button" onclick="actualizarCantidadPedidoLocal('${item.categoria}', ${item.id}, -1)">
              <i class="bi bi-trash"></i>
            </button>
          </div>
        `;
        listaPedido.appendChild(itemElement);
      });
    }

    function actualizarTotalPedidoLocal() {
      const total = pedidoLocalActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
      const totalElement = document.getElementById('totalPedidoLocal');
      if (totalElement) totalElement.textContent = formatearCOP(total);
    }

    // Envío del pedido local
    document.addEventListener('DOMContentLoaded', function() {
      const enviarPedidoLocalBtn = document.getElementById('enviarPedidoLocal');
      if (enviarPedidoLocalBtn) {
        enviarPedidoLocalBtn.addEventListener('click', function() {
          const nombre = document.getElementById('nombreLocal');
          // const telefono = document.getElementById('telefonoLocal'); // Eliminado
          const mesaSeleccionada = document.getElementById('mesaSeleccionada');
          const metodoPago = document.getElementById('metodoPagoLocal');
          const notas = document.getElementById('notasLocal');
          
          // Limpiar errores previos
          [nombre, /*telefono,*/ mesaSeleccionada, metodoPago].forEach(field => {
            if (field) field.classList.remove('is-invalid');
          });
          
          let isValid = true;
          let errorMessage = '';
          
          if (!nombre.value) {
            nombre.classList.add('is-invalid');
            isValid = false;
            errorMessage = 'Por favor ingrese su nombre y apellido';
          } else if (!mesaSeleccionada.value) {
            isValid = false;
            errorMessage = 'Por favor seleccione una mesa';
          } else if (!metodoPago.value) {
            metodoPago.classList.add('is-invalid');
            isValid = false;
            errorMessage = 'Por favor seleccione un método de pago';
          } else if (pedidoLocalActual.length === 0) {
            isValid = false;
            errorMessage = 'Por favor seleccione al menos un item del menú';
          }
          
          if (!isValid) {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'alert alert-danger alert-dismissible fade show';
            errorDiv.innerHTML = `
              <i class="bi bi-exclamation-triangle-fill"></i> ${errorMessage}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            const prevAlert = document.querySelector('#pedidoLocalForm .alert');
            if (prevAlert) prevAlert.remove();
            document.querySelector('#pedidoLocalForm').insertBefore(errorDiv, document.querySelector('#pedidoLocalForm').firstChild);
            return;
          }
          
          // Preparar datos para envío
          const total = pedidoLocalActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
          const datos = {
            nombre: nombre.value,
            // telefono: telefono.value, // Eliminado
            mesa: mesaSeleccionada.value,
            metodoPago: metodoPago.value,
            notas: notas.value,
            pedido: pedidoLocalActual,
            total: total
          };
          
          // Enviar pedido
          fetch('enviar_pedido_local.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(datos)
          })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              // Mostrar mensaje de éxito
              const alertaDiv = document.getElementById('alerta-agregado');
              if (alertaDiv) {
                alertaDiv.innerHTML = `
                  <div class="alert alert-success alert-dismissible fade show shadow" role="alert" style="font-size:1rem;">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    <strong>¡Pedido enviado!</strong> Tu pedido en local fue recibido correctamente.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
                  </div>
                `;
                alertaDiv.style.display = 'block';
                setTimeout(() => { alertaDiv.style.display = 'none'; }, 3500);
              }
              // Limpiar formulario
              document.getElementById('pedidoLocalForm').reset();
              pedidoLocalActual = [];
              actualizarListaPedidosLocal();
              actualizarTotalPedidoLocal();
              document.querySelectorAll('.mesa-option').forEach(opt => opt.classList.remove('selected'));
              // Cerrar modal después de 2 segundos
              setTimeout(() => {
                const modal = bootstrap.Modal.getInstance(document.getElementById('pedidoLocalModal'));
                if (modal) modal.hide();
              }, 2000);
            } else {
              const errorDiv = document.createElement('div');
              errorDiv.className = 'alert alert-danger alert-dismissible fade show';
              errorDiv.innerHTML = `
                <i class="bi bi-exclamation-triangle-fill"></i> ${data.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              `;
              const prevAlert = document.querySelector('#pedidoLocalForm .alert');
              if (prevAlert) prevAlert.remove();
              document.querySelector('#pedidoLocalForm').insertBefore(errorDiv, document.querySelector('#pedidoLocalForm').firstChild);
            }
          })
          .catch(error => {
            console.error('Error:', error);
            const errorDiv = document.createElement('div');
            errorDiv.className = 'alert alert-danger alert-dismissible fade show';
            errorDiv.innerHTML = `
              <i class="bi bi-exclamation-triangle-fill"></i> Error al enviar el pedido. Inténtalo de nuevo.
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            const prevAlert = document.querySelector('#pedidoLocalForm .alert');
            if (prevAlert) prevAlert.remove();
            document.querySelector('#pedidoLocalForm').insertBefore(errorDiv, document.querySelector('#pedidoLocalForm').firstChild);
          });
        });
      }
      
      // Filtro de categorías para pedido local
      const selectCategoriaLocal = document.getElementById('selectCategoriaPedidoLocal');
      if (selectCategoriaLocal) {
        document.querySelectorAll('.categoria-bloque-local').forEach(bloque => bloque.style.display = 'none');
        selectCategoriaLocal.value = '';
        selectCategoriaLocal.addEventListener('change', function() {
          const categoria = this.value;
          document.querySelectorAll('.categoria-bloque-local').forEach(bloque => {
            bloque.style.display = 'none';
          });
          document.querySelectorAll('.producto-categoria-local').forEach(prod => {
            prod.style.display = 'none';
          });
          
          if (categoria) {
            const bloqueMostrar = document.querySelector('.categoria-bloque-local-' + categoria);
            if (bloqueMostrar) {
              bloqueMostrar.style.display = '';
              bloqueMostrar.querySelectorAll('.producto-categoria-local-' + categoria).forEach(prod => {
                prod.style.display = '';
              });
              bloqueMostrar.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
          }
        });

        selectCategoriaLocal.dispatchEvent(new Event('change'));
      }
      const pedidoLocalModal = document.getElementById('pedidoLocalModal');
      if (pedidoLocalModal) {
        pedidoLocalModal.addEventListener('show.bs.modal', function () {
          if (!selectCategoriaLocal) return;
          selectCategoriaLocal.value = '';
          selectCategoriaLocal.dispatchEvent(new Event('change'));
        });
      }
    });

    // --- DELEGACIÓN DE EVENTOS PARA SUMAR/RESTAR EN PEDIDO LOCAL ---
    document.addEventListener('DOMContentLoaded', function() {
      const productosPorCategoriaLocal = document.getElementById('productosPorCategoriaLocal');
      if (productosPorCategoriaLocal) {
        productosPorCategoriaLocal.addEventListener('click', function(e) {
          const btn = e.target.closest('[data-btn-local]');
          if (btn) {
            const cat = btn.getAttribute('data-cat');
            const id = parseInt(btn.getAttribute('data-id'));
            const cambio = parseInt(btn.getAttribute('data-cambio'));
            window.actualizarCantidadPedidoLocal(cat, id, cambio);
          }
        });
      }
    });

  </script>

  <!-- ALERTA MODAL CENTRADA PARA PEDIDO LOCAL -->
  <div id="alerta-pedido-local" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:3000;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);">
    <div style="background:#fff;border-radius:18px;box-shadow:0 8px 32px rgba(0,0,0,0.18);padding:38px 32px 28px 32px;max-width:95vw;width:370px;text-align:center;animation:modalIn 0.22s cubic-bezier(.4,2,.6,1);position:relative;">
      <i class="bi bi-check-circle-fill" style="font-size:2.5rem;color:#28a745;"></i>
      <div style="font-size:1.35rem;font-weight:900;color:#28a745;margin:18px 0 8px 0;">¡Pedido enviado!</div>
      <div style="font-size:1.13rem;color:#222;margin-bottom:18px;">Tu pedido en local fue recibido correctamente.</div>
      <button type="button" class="btn btn-success" id="cerrarAlertaPedidoLocal">Cerrar</button>
    </div>
  </div>
  <style>
  @keyframes modalIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  #alerta-pedido-local { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 3000; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); }
  #alerta-pedido-local .btn { margin-top: 10px; }
  @media (max-width: 480px) {
    #alerta-pedido-local > div { width: 90vw !important; padding: 28px 8vw 18px 8vw !important; }
  }
  </style>
  <script>
  function mostrarAlertaPedidoLocalCentrada() {
    const alerta = document.getElementById('alerta-pedido-local');
    if (!alerta) return;
    alerta.style.display = 'flex';
    // Cierre automático
    setTimeout(() => { alerta.style.display = 'none'; }, 3500);
    // Cierre manual
    const btnCerrar = document.getElementById('cerrarAlertaPedidoLocal');
    if (btnCerrar) {
      btnCerrar.onclick = function() { alerta.style.display = 'none'; };
    }
  }
  </script>

  <script>
  (function() {
    const video = document.getElementById('galleryVideo');
    const btn = document.getElementById('toggleMuteBtn');
    if (!video || !btn) return;

    function updateIconAndState() {
      const icon = btn.querySelector('i');
      if (video.muted) {
        btn.setAttribute('aria-pressed', 'false');
        btn.title = 'Activar sonido';
        if (icon) icon.className = 'bi bi-volume-mute-fill';
      } else {
        btn.setAttribute('aria-pressed', 'true');
        btn.title = 'Silenciar';
        if (icon) icon.className = 'bi bi-volume-up-fill';
      }
    }

    btn.addEventListener('click', function() {
      video.muted = !video.muted;
      if (!video.muted) {
        const p = video.play();
        if (p && typeof p.catch === 'function') { p.catch(() => {}); }
      }
      btn.classList.remove('pulse'); void btn.offsetWidth; btn.classList.add('pulse');
      updateIconAndState();
    });

    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        video.muted = true;
        updateIconAndState();
      }
    });

    // Ensure initial state
    video.muted = true;
    updateIconAndState();
  })();
  </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