<?php
// Include the Database class to establish a connection
include_once 'services/pdo_connection.php';

// Inicializa la conexión a la base de datos y la clase Pedido
$database = new Database();
$db = $database->getConnection();


// --- MODO MANTENIMIENTO ---
// Pon esto en 'true' para activar la página de mantenimiento.
// Pon esto en 'false' para mostrar el sitio web normal.
$modoMantenimiento = false;

if ($modoMantenimiento) {
  // Envía un código de respuesta 503 (Servicio No Disponible),
  // que es la práctica correcta para que los buscadores sepan que es temporal.
  header('HTTP/1.1 503 Service Unavailable');
  header('Retry-After: 3600'); // Inténtalo de nuevo en 1 hora

  // Carga y muestra tu página de mantenimiento.
  // Asegúrate de que el archivo 'mantenimiento.html' exista.
  include('mantenimiento.html');

  // Detiene la ejecución del resto del script para no cargar la web normal.
  exit();
}

$query_categorias = "SELECT id_categoria, nombre FROM categoria ORDER BY nombre ASC";
$stmt_categorias = $db->prepare($query_categorias);
$stmt_categorias->execute();
$categorias_disponibles = $stmt_categorias->fetchAll(PDO::FETCH_ASSOC);

// --- Consulta para OBTENER UN PRODUCTO AL AZAR POR CATEGORÍA ---
// Necesitas todos los productos activos para hacer esto en un bucle eficiente.
// SIN EMBARGO, para simplificar y evitar complejidad de modelos por ahora, 
// usaremos una función simple de consulta directa por cada categoría:

function get_random_product_by_category($db, $category_id)
{
  $query_random_prod = "
        SELECT id_producto, titulo, foto_url
        FROM producto 
        WHERE id_categoria = :id_cat AND activo = 1 
        ORDER BY RAND() 
        LIMIT 1
    ";
  $stmt_random_prod = $db->prepare($query_random_prod);
  $stmt_random_prod->bindParam(':id_cat', $category_id);
  $stmt_random_prod->execute();
  return $stmt_random_prod->fetch(PDO::FETCH_ASSOC);
}

?>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  <link rel="shortcut icon" href="views/imgs/logo.png" type="image/x-icon">
  <link rel="icon" href="/favicon.png" type="image/png">

  <!-- META TAGS SEO OPTIMIZADOS -->
  <title>Taquería El Mexicano en Chilpancingo | Los Mejores Tacos al Pastor</title>
  <meta name="description" content="Los auténticos tacos al pastor de Chilpancingo, Guerrero. Renta de trompo para eventos, catering y servicio a domicilio. ¡El sabor que conquista Guerrero!">
  <meta name="keywords" content="tacos al pastor, taquería chilpancingo, trompo para eventos, comida mexicana, tacos guerrero, catering chilpancingo">

  <!-- OPEN GRAPH META TAGS -->
  <meta property="og:title" content="Taquería El Mexicano | Los Mejores Tacos de Chilpancingo">
  <meta property="og:description" content="Disfruta de los auténticos tacos al pastor en Chilpancingo. Renta de trompo para tus eventos y servicio a domicilio.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://taqueriaelmexicano.com.mx/">
  <meta property="og:image" content="https://taqueriaelmexicano.com.mx/views/imgs/logo.png">
  <meta property="og:site_name" content="Taquería El Mexicano">
  <meta property="og:locale" content="es_MX">

  <!-- TWITTER CARD META TAGS -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Taquería El Mexicano | Los Mejores Tacos de Chilpancingo">
  <meta name="twitter:description" content="Los auténticos tacos al pastor en Chilpancingo, Guerrero. ¡Sabor que enamora!">
  <meta name="twitter:image" content="https://taqueriaelmexicano.com.mx/views/imgs/logo.png">

  <!-- CSS Y FUENTES -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uW/x60O+25XqWn7T2F76a1C97kR6F7J4n0h5zY0h9rL6G/B1B54B4B4B4B4=" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://ai.mobirise.com/assets/immersem5/web/assets/mobirise-icons2/mobirise2.css?v=m3frcrn2">
  <link rel="stylesheet" href="https://ai.mobirise.com/assets/immersem5/bootstrap/css/bootstrap.min.css?v=m3frcrn2">
  <link rel="stylesheet" href="https://ai.mobirise.com/assets/immersem5/bootstrap/css/bootstrap-grid.min.css?v=m3frcrn2">
  <link rel="stylesheet" href="https://ai.mobirise.com/assets/immersem5/bootstrap/css/bootstrap-reboot.min.css?v=m3frcrn2">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://ai.mobirise.com/assets/immersem5/dropdown/css/style.css?v=m3frcrn2">
  <link rel="stylesheet" href="https://ai.mobirise.com/assets/immersem5/animatecss/animate.css?v=m3frcrn2">
  <link rel="stylesheet" href="https://ai.mobirise.com/assets/immersem5/theme/css/style.css?v=m3frcrn2">
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap">
  </noscript>
  <link rel="stylesheet" href="https://ai-builder.mobirise.com/api/v2/themes/immersem5/additional.css?v=T8Rn8cRvHySBh7y1VLg5GQ&primaryColor=%23BFCAD0&secondaryColor=%23738580&successColor=%2376E6B2&infoColor=%2365DEF7&warningColor=%23FFD75D&dangerColor=%23E77580&mainFont=Manrope&display1Font=Manrope&display1Size=8.125&display2Font=Manrope&display2Size=4.375&display5Font=Manrope&display5Size=2.625&display7Font=Manrope&display7Size=2&display4Font=Manrope&display4Size=1.125&isRoundedImages=true&isRoundedButtons=true&isLargeButtons=true&isGhostButtonBorder=true&underlinedLinks=false&isAnimatedOnScroll=false&isScrollToTopButton=false" type="text/css">
  <!-- Agrega esto en el <head> justo después de los otros enlaces a Font Awesome, o reemplaza si ya tienes uno -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uW/x60O+25XqWn7T2F76a1C97kR6F7J4n0h5zY0h9rL6G/B1B54B4B4B4B4B=" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- SCHEMA MARKUP PARA RESTAURANTE -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Restaurant",
      "name": "Taquería El Mexicano",
      "description": "Los auténticos tacos al pastor de Chilpancingo, Guerrero",
      "url": "https://taqueriaelmexicano.com.mx",
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Chilpancingo",
        "addressRegion": "Guerrero",
        "addressCountry": "MX"
      },
      "servesCuisine": "Mexicana",
      "priceRange": "$$",
      "telephone": "+527471234567",
      "openingHours": "Mo-Su 11:00-22:00",
      "image": "https://taqueriaelmexicano.com.mx/views/imgs/logo.png"
    }
  </script>

  <!-- META PIXEL CODE OPTIMIZADO -->
  <script>
    ! function(f, b, e, v, n, t, s) {
      if (f.fbq) return;
      n = f.fbq = function() {
        n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
      };
      if (!f._fbq) f._fbq = n;
      n.push = n;
      n.loaded = !0;
      n.version = '2.0';
      n.queue = [];
      t = b.createElement(e);
      t.async = !0;
      t.src = v;
      s = b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t, s)
    }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');

    fbq('init', '2057411288352776');
    fbq('track', 'PageView');

    // Eventos personalizados para conversiones
    document.addEventListener('DOMContentLoaded', function() {
      // Track menu views
      fbq('track', 'ViewContent', {
        content_name: 'Menu Principal',
        content_category: 'Food'
      });

      // Track category interactions
      const categoryLinks = document.querySelectorAll('[data-category-track]');
      categoryLinks.forEach(link => {
        link.addEventListener('click', function() {
          fbq('track', 'ViewContent', {
            content_name: this.dataset.categoryTrack,
            content_category: 'Food Category'
          });
        });
      });
    });
  </script>
  <noscript>
    <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2057411288352776&ev=PageView&noscript=1" />
  </noscript>
  <!-- END META PIXEL CODE -->

  <style>
    /* VARIABLES GLOBALES MEJORADAS */
    :root {
      --primary-orange: #F7931E;
      --primary-orange-dark: #E65100;
      --accent-yellow: #FFD700;
      --text-light: #FFFFFF;
      --text-dark: #1A1A1A;
      --bg-dark: #1C1C1C;
      --gradient-primary: linear-gradient(135deg, #F7931E 0%, #E65100 100%);
      --gradient-gold: linear-gradient(45deg, #F9A825, #FFD700);
      --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);
      --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.15);
      --shadow-strong: 0 12px 36px rgba(0, 0, 0, 0.2);
    }

    /* HEADER MEJORADO - NAVEGACIÓN DINÁMICA */
    .cid-uSSQs9mpeE.menu .navbar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 1030 !important;
      min-height: 90px;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      background: var(--gradient-primary) !important;
      border-bottom: 1px solid transparent;
      box-shadow: var(--shadow-medium);
      backdrop-filter: blur(10px);
    }

    /* Navbar al hacer scroll */
    .cid-uSSQs9mpeE.menu .navbar.navbar-scrolled {
      min-height: 70px;
      background: rgba(247, 147, 30, 0.98) !important;
      backdrop-filter: blur(15px);
      box-shadow: var(--shadow-strong);
    }

    /* LOGO Y MARCA MEJORADOS */
    .cid-uSSQs9mpeE .navbar-brand {
      min-height: 70px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.3s;
    }

    .cid-uSSQs9mpeE .navbar-logo img {
      height: 3.5rem !important;
      border-radius: 12px;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-soft);
    }

    .cid-uSSQs9mpeE .navbar-logo img:hover {
      transform: scale(1.05);
      box-shadow: var(--shadow-medium);
    }

    .cid-uSSQs9mpeE .navbar-caption {
      color: var(--text-light) !important;
      font-weight: 800;
      font-size: 1.4rem;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
    }

    /* NAVEGACIÓN PRINCIPAL DINÁMICA */
    .cid-uSSQs9mpeE .nav-main {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 2rem;
    }

    .cid-uSSQs9mpeE .nav-item {
      position: relative;
      margin: 0 0.3rem;
    }

    .cid-uSSQs9mpeE .nav-link {
      color: var(--text-light) !important;
      font-weight: 600;
      font-size: 1.05rem;
      padding: 0.7rem 1.2rem !important;
      border-radius: 10px;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .cid-uSSQs9mpeE .nav-link::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 3px;
      background: var(--gradient-gold);
      transition: all 0.3s ease;
      transform: translateX(-50%);
      border-radius: 2px;
    }

    .cid-uSSQs9mpeE .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
    }

    .cid-uSSQs9mpeE .nav-link:hover::before {
      width: 80%;
    }

    /* ENLACE ACTIVO MEJORADO */
    .cid-uSSQs9mpeE .nav-link.active {
      background-color: rgba(255, 255, 255, 0.2);
      box-shadow: var(--shadow-medium);
    }

    .cid-uSSQs9mpeE .nav-link.active::before {
      width: 80%;
    }

    .cid-uSSQs9mpeE .nav-link.active::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0.8rem;
      width: 8px;
      height: 8px;
      background: var(--accent-yellow);
      border-radius: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 8px var(--accent-yellow);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        transform: translateY(-50%) scale(1);
      }

      50% {
        transform: translateY(-50%) scale(1.2);
      }

      100% {
        transform: translateY(-50%) scale(1);
      }
    }

    /* DROPDOWNS DINÁMICOS MEJORADOS */
    .cid-uSSQs9mpeE .dropdown-menu {
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: blur(20px);
      border: none;
      border-radius: 12px;
      box-shadow: var(--shadow-strong);
      padding: 0.8rem 0;
      margin-top: 0.8rem;
      animation: dropdownFade 0.3s ease;
      min-width: 240px;
      max-height: 400px;
      overflow-y: auto;
    }

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

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .cid-uSSQs9mpeE .dropdown-item {
      padding: 0.8rem 1.5rem;
      font-weight: 500;
      color: var(--text-dark);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 0.7rem;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .cid-uSSQs9mpeE .dropdown-item:last-child {
      border-bottom: none;
    }

    .cid-uSSQs9mpeE .dropdown-item::before {
      content: '';
      position: absolute;
      left: -100%;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(247, 147, 30, 0.1), transparent);
      transition: left 0.5s ease;
    }

    .cid-uSSQs9mpeE .dropdown-item:hover::before {
      left: 100%;
    }

    .cid-uSSQs9mpeE .dropdown-item:hover {
      background-color: rgba(247, 147, 30, 0.1);
      color: var(--primary-orange-dark);
      padding-left: 2rem;
    }

    /* CATEGORÍAS CON ÍCONOS DINÁMICOS */
    .category-icon {
      width: 20px;
      text-align: center;
      font-size: 1.1rem;
    }

    /* BARRA DE BÚSQUEDA MEJORADA */
    .cid-uSSQs9mpeE .search-container {
      width: 320px;
      margin: 0 1.5rem;
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.98);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50px;
      box-shadow: var(--shadow-soft);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      overflow: hidden;
      backdrop-filter: blur(10px);
      position: relative;
    }

    .cid-uSSQs9mpeE .search-container:focus-within,
    .cid-uSSQs9mpeE .search-container:hover {
      border-color: var(--accent-yellow);
      box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
      transform: translateY(-2px) scale(1.02);
      background: rgba(255, 255, 255, 1);
    }

    /* Input de búsqueda */
    #searchInput {
      flex-grow: 1;
      border: none;
      background: transparent;
      color: var(--text-dark);
      font-size: 1rem;
      font-family: 'Manrope', sans-serif;
      padding: 0.9rem 1.5rem;
      outline: none;
      transition: all 0.3s ease;
    }

    /* Placeholder con estilo */
    #searchInput::placeholder {
      color: rgba(26, 26, 26, 0.5);
      font-style: italic;
      transition: color 0.3s ease;
    }

    #searchInput:focus::placeholder {
      color: rgba(26, 26, 26, 0.3);
    }

    /* Botón de búsqueda */
    #searchButton {
      background: var(--gradient-primary);
      border: none;
      color: var(--text-light);
      font-size: 1.1rem;
      padding: 0.9rem 1.3rem;
      border-radius: 0 50px 50px 0;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      min-width: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Efecto ripple en el botón */
    #searchButton::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
      pointer-events: none;
    }

    #searchButton:active::before {
      width: 300px;
      height: 300px;
    }

    /* Hover en botón */
    #searchButton:hover {
      background: linear-gradient(135deg, var(--primary-orange-dark), var(--primary-orange));
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(230, 81, 0, 0.3);
    }

    /* Icono en botón con animación */
    #searchButton i {
      transition: transform 0.3s ease;
    }

    #searchButton:hover i {
      transform: rotate(90deg) scale(1.1);
    }

    /* RESPONSIVE - MÓVIL */
    @media (max-width: 1199px) {
      .cid-uSSQs9mpeE .search-container {
        width: 280px;
        margin: 0 1rem;
      }
    }

    @media (max-width: 991px) {

      /* En menú colapsado (móvil) - estilo completo */
      .cid-uSSQs9mpeE .navbar-collapse .search-container {
        width: 100% !important;
        margin: 1rem 0 !important;
        order: -1;
        background: rgba(255, 255, 255, 0.98);
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: var(--shadow-medium);
      }

      .cid-uSSQs9mpeE .navbar-collapse #searchInput {
        border-radius: 50px 0 0 50px !important;
        padding: 1rem 1.5rem !important;
        font-size: 1.1rem;
      }

      .cid-uSSQs9mpeE .navbar-collapse #searchButton {
        border-radius: 0 50px 50px 0 !important;
        min-width: 60px !important;
        padding: 1rem 1.4rem !important;
      }

      /* Efectos en móvil */
      .cid-uSSQs9mpeE .navbar-collapse .search-container:focus-within {
        border-color: var(--accent-yellow);
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
        transform: none;
        /* Evitar escalado en móvil */
      }
    }

    @media (max-width: 768px) {
      .cid-uSSQs9mpeE .search-container {
        width: 100%;
        margin: 0.5rem 0;
      }

      /* En navbar superior (si se muestra en móvil sin collapse) */
      .cid-uSSQs9mpeE .navbar .search-container {
        width: 100%;
        margin: 0.5rem 1rem;
      }

      #searchInput {
        font-size: 1rem;
        padding: 0.8rem 1.2rem;
      }

      #searchButton {
        padding: 0.8rem 1.1rem;
        min-width: 50px;
      }
    }

    /* ANIMACIÓN DE CARGA SUBTIL (opcional) */
    @keyframes searchPulse {
      0% {
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0);
      }

      50% {
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
      }

      100% {
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0);
      }
    }

    .cid-uSSQs9mpeE .search-container:focus-within {
      animation: searchPulse 2s infinite;
    }

    /* ACCESIBILIDAD MEJORADA */
    #searchInput:focus {
      /* Asegurar visibilidad */
      box-shadow: inset 0 0 0 2px var(--accent-yellow);
    }

    #searchButton:focus {
      outline: 2px solid var(--accent-yellow);
      outline-offset: -2px;
    }

    .cid-uSSQs9mpeE .btn-whatsapp:hover {
      background: #ffffff;
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
      border-color: #25D366;
    }

    /* BOTÓN HAMBURGUESA CORREGIDO */
    .cid-uSSQs9mpeE .navbar-toggler {
      border: none;
      background: transparent;
      padding: 0.25rem 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .cid-uSSQs9mpeE .navbar-toggler:focus {
      box-shadow: none;
      outline: none;
    }

    .cid-uSSQs9mpeE .navbar-toggler .hamburger {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 25px;
      height: 18px;
    }

    .cid-uSSQs9mpeE .navbar-toggler .hamburger span {
      display: block;
      width: 100%;
      height: 3px;
      background-color: #fff;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .cid-uSSQs9mpeE .navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .cid-uSSQs9mpeE .navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(2) {
      opacity: 0;
    }

    .cid-uSSQs9mpeE .navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }

    /* RESPONSIVE DESIGN MEJORADO */
    @media (max-width: 1199px) {
      .cid-uSSQs9mpeE .search-container {
        width: 280px;
        margin: 0 1rem;
      }

      .cid-uSSQs9mpeE .nav-main {
        margin: 0 1rem;
      }
    }

    @media (max-width: 991px) {
      .cid-uSSQs9mpeE .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        padding: 2rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: fixed;
        width: 100%;
        top: 70px;
        left: 0;
        /* ELIMINAMOS EL TRANSFORM Y DEJAMOS QUE BOOTSTRAP MANEJE LA VISIBILIDAD */
        transition: opacity 0.3s ease, visibility 0.3s ease;
        box-shadow: none;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        /* AGREGAMOS ESTAS PROPIEDADES */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .cid-uSSQs9mpeE .navbar-collapse.show {
        /* ELIMINAMOS EL TRANSFORM Y USAMOS OPACITY */
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        box-shadow: var(--shadow-strong);
      }

      .navbar-collapse.collapsing .dropdown-toggle,
      .navbar-collapse:not(.show) .dropdown-toggle {
        pointer-events: none !important;
      }

      /* Forzar ocultamiento inmediato de dropdowns en móvil */
      .navbar-collapse .dropdown-menu {
        transition: none !important;
      }

      .navbar-collapse.collapsing .dropdown-menu.show,
      .navbar-collapse:not(.show) .dropdown-menu.show {
        display: none !important;
      }

      .cid-uSSQs9mpeE .nav-main {
        flex-direction: column;
        margin: 0;
        width: 100%;
        gap: 0;
      }

      .cid-uSSQs9mpeE .nav-item {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .cid-uSSQs9mpeE .nav-item:last-child {
        border-bottom: none;
      }

      .cid-uSSQs9mpeE .nav-link {
        color: var(--text-dark) !important;
        font-size: 1.1rem;
        padding: 1.2rem 1rem !important;
        border-radius: 0;
        justify-content: space-between;
      }

      .cid-uSSQs9mpeE .nav-link::before {
        display: none;
      }

      .cid-uSSQs9mpeE .nav-link:hover {
        background-color: rgba(247, 147, 30, 0.1);
        transform: none;
        box-shadow: none;
        color: var(--primary-orange-dark) !important;
      }

      .cid-uSSQs9mpeE .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        margin-top: 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
        background: rgba(0, 0, 0, 0.03) !important;
        animation: none;
      }

      .cid-uSSQs9mpeE .search-container {
        width: 100%;
        margin: 1rem 0;
        order: -1;
      }

      .cid-uSSQs9mpeE .navbar-buttons {
        width: 100%;
        margin-top: 1rem;
      }

      .cid-uSSQs9mpeE .btn-whatsapp {
        width: 100%;
        justify-content: center;
      }

      /* --- ARREGLO PARA LA BARRA DE BÚSQUEDA EN MÓVIL --- */
      .cid-uSSQs9mpeE .navbar-collapse .search-container {
        display: flex !important;
        /* Fuerza el layout horizontal */
        flex-direction: row !important;
        width: 100%;
        margin: 1rem 0;
      }

      .cid-uSSQs9mpeE .navbar-collapse #searchInput {
        border-radius: 50px 0 0 50px !important;
        /* Redondea la esquina izquierda */
        padding-left: 1.5rem !important;
      }

      .cid-uSSQs9mpeE .navbar-collapse #searchButton {
        border-radius: 0 50px 50px 0 !important;
        /* Redondea la esquina derecha */
        min-width: 60px !important;
        /* Asegura un buen tamaño */
      }

    }

    @media (max-width: 768px) {
      .cid-uSSQs9mpeE .navbar-brand {
        min-height: 60px;
      }

      .cid-uSSQs9mpeE .navbar-logo img {
        height: 2.8rem !important;
      }

      .cid-uSSQs9mpeE .navbar-caption {
        font-size: 1.2rem;
      }
    }

    @media (min-width: 992px) {
      .cid-uSSQs9mpeE .navbar-toggler {
        display: none !important;
      }
    }

    /* === ESTILOS PARA CORREGIR EL MODAL DE BÚSQUEDA === */

    /* Capa oscura que cubre toda la pantalla */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Clase que lo hace visible */
    .modal-overlay.visible {
      opacity: 1;
      visibility: visible;
    }

    /* Contenedor del mensaje del modal */
    .modal-container {
      background-color: white;
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
      max-width: 400px;
      width: 90%;
      color: #333;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      transform: scale(0.9);
      transition: transform 0.3s ease;
      position: relative;
    }

    /* Ajuste de escala cuando el modal es visible */
    .modal-overlay.visible .modal-container {
      transform: scale(1);
    }

    /* Icono del modal */
    .modal-icon {
      width: 50px;
      height: 50px;
      color: #E65100;
      margin-bottom: 1rem;
    }

    /* Título del modal */
    .modal-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    /* Mensaje del modal */
    .modal-message {
      font-size: 1rem;
      margin-bottom: 1.5rem;
    }

    /* Botón para cerrar el modal */
    .modal-close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      background: none;
      border: none;
      font-size: 2rem;
      color: #aaa;
      cursor: pointer;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .modal-close-btn:hover {
      color: #333;
    }

    #searchButton svg {
      width: 1.1rem;
      height: 1.1rem;
      transition: transform 0.3s ease;
    }

    #searchButton:hover svg {
      transform: rotate(90deg) scale(1.1);
    }
  </style>
</head>

<body>

  <!-- HEADER OPTIMIZADO -->
  <section data-bs-version="5.1" class="menu menu2 cid-uSSQs9mpeE" once="menu" id="menu-3-uSSQs9mpeE">
    <nav class="navbar navbar-dropdown navbar-expand-lg">
      <div class="container-fluid">
        <!-- Logo y Marca -->
        <div class="navbar-brand">
          <span class="navbar-logo">
            <a href="index.php">
              <img src="views/imgs/logo.png" alt="Taquería El Mexicano" loading="eager">
            </a>
          </span>
          <span class="navbar-caption-wrap">
            <a class="navbar-caption text-white display-4" href="index.php">
              Taquería El Mexicano
            </a>
          </span>
        </div>

        <!-- Botón Hamburguesa - MANTÉNLO COMO ESTÁ -->
        <button class="navbar-toggler" type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation">
          <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </button>

        <!-- Contenido Colapsable -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <!-- Navegación Principal -->
          <ul class="navbar-nav nav-main">
            <li class="nav-item">
              <a class="nav-link <?= $current_page == 'index.php' ? 'active' : '' ?>" href="index.php">
                <i class="fas fa-home"></i>
                Inicio
              </a>
            </li>

            <!-- Menú -->
            <li class="nav-item">
              <a class="nav-link <?= strpos($current_page, 'menu.php') !== false ? 'active' : '' ?>" href="views/menu.php">
                <i class="fas fa-home"></i>
                Menú
              </a>
            </li>

            <!-- Eventos -->
            <li class="nav-item">
              <a class="nav-link <?= strpos($current_page, 'agendar') !== false ? 'active' : '' ?>" href="views/agendar.php">
                <i class="fas fa-calendar-alt"></i>
                Renta de Trompo para Eventos
              </a>
            </li>

            <!-- Contacto -->
            <li class="nav-item">
              <a class="nav-link" href="#footer-1-uSSQs9puSh">
                <i class="fas fa-phone"></i>
                Contacto
              </a>
            </li>
          </ul>

          <!-- Búsqueda -->
          <div class="ms-auto search-container">
            <input class="form-control" type="search" id="searchInput" placeholder="Buscar productos..." aria-label="Search">
            <button class="btn" type="button" id="searchButton">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </nav>
  </section>

  <!-- Modal de Búsqueda Optimizado -->
  <div id="noMatchModal" class="modal-overlay">
    <div class="modal-container">
      <svg class="modal-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
      </svg>
      <h3 class="modal-title">¡Lo siento!</h3>
      <p class="modal-message">No se encontró ninguna coincidencia en la página.</p>
      <button class="modal-close-btn">&times;</button>
    </div>
  </div>


  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const navbarCollapse = document.getElementById('navbarSupportedContent');
      const navbarToggler = document.querySelector('.navbar-toggler');

      if (!navbarCollapse || !navbarToggler) {
        console.error('Navbar elements not found');
        return;
      }

      let isClosing = false;

      // Función para forzar cierre completo
      function forceCloseMenu() {
        isClosing = true;

        // 1. Cerrar collapse inmediatamente
        const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse);
        if (bsCollapse) {
          bsCollapse.hide();
        } else {
          navbarCollapse.classList.remove('show');
          navbarCollapse.classList.add('collapsing'); // Simular animación
          setTimeout(() => {
            navbarCollapse.classList.remove('collapsing');
          }, 300);
        }

        // 2. Cerrar todos los dropdowns
        document.querySelectorAll('.dropdown-menu.show').forEach(dropdown => {
          const parent = dropdown.closest('.dropdown');
          const bsDropdown = bootstrap.Dropdown.getInstance(parent);
          if (bsDropdown) {
            bsDropdown.hide();
          } else {
            dropdown.classList.remove('show');
            dropdown.style.display = 'none';
          }

          const toggle = parent.querySelector('.dropdown-toggle');
          if (toggle) {
            toggle.setAttribute('aria-expanded', 'false');
            toggle.classList.remove('show');
          }
        });

        // 3. Resetear toggler
        navbarToggler.setAttribute('aria-expanded', 'false');
        navbarToggler.classList.add('collapsed');

        // 4. Finalizar cierre
        setTimeout(() => {
          isClosing = false;
        }, 350);
      }

      // ESCUCHAR eventos de Bootstrap para controlar el cierre
      navbarCollapse.addEventListener('hide.bs.collapse', function() {
        // Bootstrap está cerrando, forzar cierre completo
        forceCloseMenu();
      });

      // Prevenir que dropdowns se abran durante el cierre
      document.addEventListener('click', function(e) {
        if (isClosing) {
          const dropdownToggle = e.target.closest('.dropdown-toggle[data-bs-toggle="dropdown"]');
          if (dropdownToggle) {
            e.preventDefault();
            e.stopPropagation();
            return false;
          }
        }
      });

      // Manejar clics en dropdown-items
      document.querySelectorAll('.dropdown-item').forEach(item => {
        item.addEventListener('click', function(e) {
          e.stopPropagation();

          // Cerrar dropdown padre
          const dropdownMenu = this.closest('.dropdown-menu');
          if (dropdownMenu) {
            const parent = dropdownMenu.closest('.dropdown');
            const bsDropdown = bootstrap.Dropdown.getInstance(parent);
            if (bsDropdown) {
              bsDropdown.hide();
            }
          }

          // Si es enlace a otra página, cerrar menú completo
          const href = this.getAttribute('href');
          if (href && href !== '#' && !href.startsWith('#') &&
            this.hostname === window.location.hostname &&
            this.href !== window.location.href) {
            setTimeout(forceCloseMenu, 200);
          }
        });
      });

      // Cerrar menú al hacer clic en enlaces normales (no dropdowns)
      document.querySelectorAll('.nav-link:not(.dropdown-toggle)').forEach(link => {
        link.addEventListener('click', function(e) {
          const href = this.getAttribute('href');
          if (href && href !== '#' && !href.startsWith('#') &&
            this.hostname === window.location.hostname) {
            setTimeout(forceCloseMenu, 100);
          }
        });
      });

      // Interceptar SOLO cuando el toggler se usa para CERRAR
      navbarToggler.addEventListener('click', function(e) {
        const isCurrentlyOpen = navbarCollapse.classList.contains('show');

        if (isCurrentlyOpen) {
          // Bootstrap manejará el cierre, pero nosotros forzamos el resultado
          setTimeout(() => {
            if (!navbarCollapse.classList.contains('show')) {
              // Asegurar que todo esté cerrado
              document.querySelectorAll('.dropdown-menu.show').forEach(dropdown => {
                const parent = dropdown.closest('.dropdown');
                const bsDropdown = bootstrap.Dropdown.getInstance(parent);
                if (bsDropdown) bsDropdown.hide();
              });
            }
          }, 50);
        } else {
          // Permitir que Bootstrap abra normalmente
        }
      });

      // Cuando el collapse se muestre completamente, habilitar dropdowns
      navbarCollapse.addEventListener('shown.bs.collapse', function() {
        isClosing = false;
      });

      // Navbar scroll effect
      window.addEventListener('scroll', function() {
        const navbar = document.querySelector('.cid-uSSQs9mpeE .navbar');
        if (navbar) {
          navbar.classList.toggle('navbar-scrolled', window.scrollY > 50);
        }
      });

      // Búsqueda mejorada
      const searchInput = document.getElementById('searchInput');
      const searchButton = document.getElementById('searchButton');
      const noMatchModal = document.getElementById('noMatchModal');
      const modalCloseBtn = noMatchModal ? noMatchModal.querySelector('.modal-close-btn') : null;

      function performSearch() {
        if (!searchInput) return;
        const searchTerm = searchInput.value.trim();
        if (!searchTerm) {
          searchInput.focus();
          return;
        }
        if (typeof fbq !== 'undefined') {
          fbq('track', 'Search', {
            search_string: searchTerm
          });
        }
        const found = window.find(searchTerm, false, false);
        if (!found && noMatchModal) {
          noMatchModal.classList.add('visible');
          if (window.getSelection) window.getSelection().removeAllRanges();
        }
      }

      if (searchButton && searchInput) {
        searchButton.addEventListener('click', performSearch);
        searchInput.addEventListener('keyup', (e) => e.key === 'Enter' && performSearch());
      }

      if (modalCloseBtn) {
        modalCloseBtn.addEventListener('click', function(e) {
          e.stopPropagation();
          noMatchModal.classList.remove('visible');
        });
      }

      if (noMatchModal) {
        noMatchModal.addEventListener('click', function(e) {
          if (e.target === noMatchModal) {
            e.stopPropagation();
            noMatchModal.classList.remove('visible');
          }
        });
      }

      // Category tracking
      document.querySelectorAll('[data-category-track]').forEach(link => {
        link.addEventListener('click', function() {
          if (typeof fbq !== 'undefined') {
            fbq('track', 'ViewContent', {
              content_name: this.dataset.categoryTrack,
              content_category: 'Food Category'
            });
          }
        });
      });

    });
  </script>




    <?php
    // Define una imagen por defecto
    $default_image = 'views/imgs/tacos1.jpg';
    $query = "SELECT id_producto, titulo, foto_url FROM producto WHERE activo = 1 ORDER BY RAND() LIMIT 5";
    $stmt = $db->prepare($query);
    $stmt->execute();
    ?>

    <br><br>
    <!-- HERO SECTION PROFESIONAL - RESTAURANTE -->
    <section class="hero-slider mbr-embla cid-uSSQs9oklE" id="hero-slider-uSSQs9oklE">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="hero-content-wrapper">
              <!-- Overlay de contenido principal -->
              <div class="hero-content">
                <div class="hero-badge">
                  <span class="badge-text">SABOR INIGUALABLE</span>
                </div>

                <h1 class="hero-title">
                  <span class="title-line">Los MÁS SABROSOS de</span>
                  <span class="title-accent">Chilpancingo</span>
                </h1>

                <p class="hero-subtitle">
                  Descubre y degusta de nuestros deliciosos tacos, preparados con ingredientes
                  frescos y recetas tradicionales que han conquistado Guerrero
                </p>
              </div>

              <!-- Carousel de imágenes -->
              <div class="hero-carousel">
                <div class="embla" data-skip-snaps="true" data-align="center" data-contain-scroll="trimSnaps"
                  data-loop="true" data-auto-play-interval="4" data-draggable="true">
                  <div class="embla__viewport">
                    <div class="embla__container">
                      <?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)):
                        $image_src = !empty($row['foto_url']) ? htmlspecialchars($row['foto_url']) : $default_image;
                      ?>
                        <div class="embla__slide hero-slide">
                          <div class="slide-content">
                            <div class="image-wrapper">
                              <img src="<?php echo $image_src; ?>"
                                alt="<?php echo htmlspecialchars($row['titulo']); ?>"
                                class="hero-image">
                              <div class="image-overlay"></div>
                              <div class="slide-caption">
                                <h3><?php echo htmlspecialchars($row['titulo']); ?></h3>
                                <p>Descubre este sabor único</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      <?php endwhile; ?>
                    </div>
                  </div>

                  <!-- Controles del carousel -->
                  <button class="embla__button embla__button--prev">
                    <i class="fas fa-chevron-left"></i>
                  </button>
                  <button class="embla__button embla__button--next">
                    <i class="fas fa-chevron-right"></i>
                  </button>

                  <!-- Indicadores de paginación -->
                  <div class="embla__dots"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Elementos decorativos -->
      <div class="hero-decoration">
        <div class="decoration-item decor-1"></div>
        <div class="decoration-item decor-2"></div>
        <div class="decoration-item decor-3"></div>
      </div>
    </section>

    <style>
      /* VARIABLES Y CONFIGURACIÓN PRINCIPAL */
      :root {
        --primary-color: #B92117;
        --secondary-color: #F9A825;
        --accent-color: #E65100;
        --text-light: #FFFFFF;
        --text-dark: #1A1A1A;
        --overlay-dark: rgba(0, 0, 0, 0.4);
        --overlay-primary: rgba(185, 33, 23, 0.1);
        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);
        --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.15);
        --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.25);
        --gradient-primary: linear-gradient(135deg, #B92117 0%, #E65100 100%);
        --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
      }

      /* ESTILOS BASE DEL HERO */
      .cid-uSSQs9oklE {
        padding: 0;
        margin: 0;
        overflow: hidden;
        background: var(--gradient-primary);
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
      }

      .cid-uSSQs9oklE .container-fluid {
        padding: 0;
        position: relative;
        z-index: 2;
      }

      /* CONTENEDOR PRINCIPAL */
      .hero-content-wrapper {
        position: relative;
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        align-items: center;
        gap: 4rem;
        padding: 2rem 4rem;
      }

      /* CONTENIDO DE TEXTO */
      .hero-content {
        max-width: 600px;
        position: relative;
        z-index: 3;
      }

      .hero-badge {
        margin-bottom: 2rem;
      }

      .badge-text {
        background: var(--secondary-color);
        color: var(--text-dark);
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: var(--shadow-soft);
        animation: pulse 2s infinite;
      }

      @keyframes pulse {

        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.05);
        }
      }

      .hero-title {
        font-family: 'Poppins', sans-serif;
        font-size: 4rem;
        font-weight: 900;
        line-height: 1.1;
        margin-bottom: 1.5rem;
        color: var(--text-light);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .title-line {
        display: block;
      }

      .title-accent {
        display: block;
        color: var(--secondary-color);
        background: linear-gradient(45deg, #F9A825, #FFD700);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero-subtitle {
        font-size: 1.3rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 2.5rem;
        font-weight: 400;
      }

      /* BOTONES CALL-TO-ACTION */
      .hero-cta-group {
        display: flex;
        gap: 1rem;
        margin-bottom: 3rem;
        flex-wrap: wrap;
      }

      .btn {
        padding: 1rem 2rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.1rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
      }

      .btn:hover::before {
        left: 100%;
      }

      .btn-primary {
        background: var(--secondary-color);
        color: var(--text-dark);
        box-shadow: var(--shadow-medium);
      }

      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-strong);
      }

      .btn-secondary {
        background: transparent;
        color: var(--text-light);
        border: 2px solid var(--text-light);
      }

      .btn-secondary:hover {
        background: var(--text-light);
        color: var(--primary-color);
        transform: translateY(-3px);
      }

      /* CARACTERÍSTICAS */
      .hero-features {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
      }

      .feature-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-light);
        font-weight: 500;
      }

      .feature-item i {
        color: var(--secondary-color);
        font-size: 1.1rem;
      }

      /* CAROUSEL MEJORADO */
      .hero-carousel {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--shadow-strong);
        width: 100%;
      }

      .hero-slide {
        min-width: 100%;
        position: relative;
      }

      .image-wrapper {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        height: 600px;
        width: 100%;
      }

      .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--gradient-overlay);
      }

      .slide-caption {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        color: var(--text-light);
        z-index: 2;
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.5s ease 0.3s;
      }

      .hero-slide.is-selected .slide-caption {
        transform: translateY(0);
        opacity: 1;
      }

      .slide-caption h3 {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }

      .slide-caption p {
        font-size: 1rem;
        opacity: 0.9;
      }

      /* Asegurar que solo el slide activo muestre el caption */
      .embla__slide:not(.is-selected) .slide-caption {
        opacity: 0 !important;
        transform: translateY(20px) !important;
      }

      .embla__slide.is-selected .slide-caption {
        transform: translateY(0);
        opacity: 1;
      }

      /* CONTROLES DEL CAROUSEL */

      .embla {
        position: relative;
        width: 100%;
        overflow: hidden;
      }

      .embla__container {
        display: flex;
        /* ¡Esta es la línea clave! */
      }

      /* CONTROLES DEL CAROUSEL - POSICIONAMIENTO CORRECTO */
      .embla__button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.9) !important;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-medium);
        color: var(--primary-color) !important;
      }

      .embla__button:hover {
        background: var(--text-light) !important;
        transform: translateY(-50%) scale(1.1);
      }

      .embla__button--prev {
        left: 2rem;
      }

      .embla__button--next {
        right: 2rem;
      }

      .embla__button i {
        font-size: 1.2rem;
      }

      /* PAGINACIÓN */
      .embla__dots {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 0.5rem;
        z-index: 10;
      }

      .embla__dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .embla__dot.is-selected {
        background: var(--secondary-color);
        transform: scale(1.2);
      }

      /* ELEMENTOS DECORATIVOS */
      .hero-decoration {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
      }

      .decoration-item {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
      }

      .decor-1 {
        width: 200px;
        height: 200px;
        top: 10%;
        right: 10%;
        animation: float 6s ease-in-out infinite;
      }

      .decor-2 {
        width: 150px;
        height: 150px;
        bottom: 20%;
        left: 5%;
        animation: float 8s ease-in-out infinite 1s;
      }

      .decor-3 {
        width: 100px;
        height: 100px;
        top: 50%;
        right: 20%;
        animation: float 7s ease-in-out infinite 0.5s;
      }

      @keyframes float {

        0%,
        100% {
          transform: translateY(0) rotate(0deg);
        }

        50% {
          transform: translateY(-20px) rotate(180deg);
        }
      }

      /* RESPONSIVE */
      @media (max-width: 1200px) {
        .hero-content-wrapper {
          grid-template-columns: 1fr;
          gap: 2rem;
          text-align: center;
          padding: 6rem 2rem 2rem;
        }

        .hero-title {
          font-size: 3rem;
        }

        .image-wrapper {
          height: 500px;
        }
      }

      @media (max-width: 768px) {
        .hero-content-wrapper {
          padding: 5rem 1rem 1rem;
        }

        .hero-title {
          font-size: 2.5rem;
        }

        .hero-subtitle {
          font-size: 1.1rem;
        }

        .hero-cta-group {
          flex-direction: column;
          align-items: center;
        }

        .btn {
          width: 100%;
          max-width: 300px;
          justify-content: center;
        }

        .hero-features {
          justify-content: center;
        }

        .image-wrapper {
          height: 400px;
        }

        .embla__button {
          width: 50px;
          height: 50px;
        }

        .embla__button--prev {
          left: 1rem;
        }

        .embla__button--next {
          right: 1rem;
        }
      }

      /* ANIMACIONES DE ENTRADA */
      .hero-content>* {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease forwards;
      }

      .hero-badge {
        animation-delay: 0.2s;
      }

      .hero-title {
        animation-delay: 0.4s;
      }

      .hero-subtitle {
        animation-delay: 0.6s;
      }

      .hero-cta-group {
        animation-delay: 0.8s;
      }

      .hero-features {
        animation-delay: 1s;
      }

      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/embla-carousel@8.0.0/dist/embla-carousel.umd.js"></script>
    <script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>


    <script>
      // Inicialización CORREGIDA del carousel
      document.addEventListener('DOMContentLoaded', function() {
        const emblaNode = document.querySelector('.cid-uSSQs9oklE .embla');

        // Opciones específicas para carousel de una sola imagen
        const options = {
          loop: true,
          align: 'center',
          containScroll: 'trimSnaps',
          dragFree: false,
          skipSnaps: false,
          startIndex: 0 // Comenzar desde el primer slide
        };

        // Verificar que Embla Carousel esté disponible
        if (typeof EmblaCarousel !== 'undefined' && emblaNode) {
          const embla = EmblaCarousel(emblaNode, options);

          // Agregar funcionalidad de dots
          const setupDots = () => {
            const dotsContainer = emblaNode.querySelector('.embla__dots');
            const slides = emblaNode.querySelectorAll('.embla__slide');

            // Limpiar dots existentes
            dotsContainer.innerHTML = '';

            slides.forEach((_, index) => {
              const dot = document.createElement('button');
              dot.className = 'embla__dot';
              dot.setAttribute('type', 'button');
              dot.addEventListener('click', () => embla.scrollTo(index));
              dotsContainer.appendChild(dot);
            });

            const updateDots = () => {
              const dots = dotsContainer.querySelectorAll('.embla__dot');
              const selected = embla.selectedScrollSnap();

              dots.forEach((dot, index) => {
                dot.classList.toggle('is-selected', index === selected);
              });
            };

            embla.on('select', updateDots);
            updateDots();
          };

          // Agregar clase active a slide seleccionado
          const updateActiveSlide = () => {
            const slides = emblaNode.querySelectorAll('.embla__slide');
            const selected = embla.selectedScrollSnap();

            slides.forEach((slide, index) => {
              slide.classList.toggle('is-selected', index === selected);

              // Efecto de zoom en la imagen activa
              const image = slide.querySelector('.hero-image');
              if (image) {
                if (index === selected) {
                  image.style.transform = 'scale(1.05)';
                } else {
                  image.style.transform = 'scale(1)';
                }
              }
            });
          };

          embla.on('select', updateActiveSlide);
          embla.on('init', updateActiveSlide);

          // Configurar botones de navegación
          const setupButtons = () => {
            const prevBtn = emblaNode.querySelector('.embla__button--prev');
            const nextBtn = emblaNode.querySelector('.embla__button--next');

            if (prevBtn) prevBtn.addEventListener('click', embla.scrollPrev);
            if (nextBtn) nextBtn.addEventListener('click', embla.scrollNext);
          };

          // Inicializar componentes
          setupDots();
          setupButtons();
          updateActiveSlide();

          // Auto-play mejorado
          let autoplay = setInterval(() => {
            if (document.hasFocus() && embla) {
              embla.scrollNext();
            }
          }, 4000);

          // Pausar auto-play en hover
          emblaNode.addEventListener('mouseenter', () => {
            if (autoplay) clearInterval(autoplay);
          });

          emblaNode.addEventListener('mouseleave', () => {
            autoplay = setInterval(() => {
              if (document.hasFocus() && embla) {
                embla.scrollNext();
              }
            }, 4000);
          });

          // Inicializar Embla
          embla.on('init', () => {
          });

        } else {
          console.error('Embla Carousel no está disponible o no se encontró el elemento');
        }
      });
    </script>




    <!-- *******MENU CABRON HECHO POR NICK********** -->
    <section class="menu-premium cid-uSSQs9pxtz" id="menu-premium-uSSQs9pxtz">
      <style>
        /* VARIABLES Y CONFIGURACIÓN PREMIUM */
        :root {
          --primary-color: #B92117;
          --secondary-color: #F9A825;
          --accent-color: #E65100;
          --text-light: #FFFFFF;
          --text-dark: #1A1A1A;
          --card-bg: rgba(255, 255, 255, 0.12);
          --card-border: rgba(255, 255, 255, 0.25);
          --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);
          --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.15);
          --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.25);
          --gradient-primary: linear-gradient(135deg, #B92117 0%, #E65100 100%);
          --gradient-gold: linear-gradient(45deg, #F9A825, #FFD700);
        }

        /* ESTILOS BASE PREMIUM */
        .cid-uSSQs9pxtz {
          padding: 6rem 0;
          background: var(--gradient-primary) !important;
          font-family: 'Poppins', sans-serif !important;
          position: relative;
          overflow: hidden;
        }

        /* ELEMENTOS DECORATIVOS DE FONDO */
        .cid-uSSQs9pxtz::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.03"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
          pointer-events: none;
        }

        .menu-decoration {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
        }

        .decor-item {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.05);
        }

        .decor-1 {
          width: 150px;
          height: 150px;
          top: 10%;
          left: 5%;
          animation: float 8s ease-in-out infinite;
        }

        .decor-2 {
          width: 100px;
          height: 100px;
          bottom: 15%;
          right: 8%;
          animation: float 6s ease-in-out infinite 1s;
        }

        .decor-3 {
          width: 80px;
          height: 80px;
          top: 60%;
          left: 10%;
          animation: float 7s ease-in-out infinite 0.5s;
        }

        @keyframes float {

          0%,
          100% {
            transform: translateY(0) rotate(0deg);
          }

          50% {
            transform: translateY(-15px) rotate(180deg);
          }
        }

        /* CONTENEDOR PRINCIPAL */
        .cid-uSSQs9pxtz .container-fluid {
          position: relative;
          z-index: 2;
        }

        /* ENCABEZADO DEL MENÚ */
        .menu-header {
          text-align: center;
          margin-bottom: 4rem;
          position: relative;
        }

        .menu-badge {
          display: inline-block;
          background: var(--gradient-gold);
          color: var(--text-dark);
          padding: 0.8rem 2rem;
          border-radius: 50px;
          font-weight: 800;
          font-size: 1rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          margin-bottom: 2rem;
          box-shadow: var(--shadow-medium);
          animation: pulse 2s infinite;
        }

        @keyframes pulse {

          0%,
          100% {
            transform: scale(1);
          }

          50% {
            transform: scale(1.05);
          }
        }

        .menu-title {
          font-size: 4rem;
          font-weight: 900;
          color: var(--text-light);
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          margin-bottom: 1.5rem;
          line-height: 1.1;
        }

        .menu-subtitle {
          font-size: 1.4rem;
          color: rgba(255, 255, 255, 0.9);
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.6;
          font-weight: 400;
        }

        /* GRID DE PRODUCTOS PREMIUM */
        .menu-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 2.5rem;
          padding: 0 1rem;
        }

        /* TARJETAS DE PRODUCTO MEJORADAS */
        .menu-item {
          position: relative;
          opacity: 0;
          transform: translateY(30px);
          animation: fadeInUp 0.8s ease forwards;
        }

        @keyframes fadeInUp {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .menu-card {
          background: var(--card-bg);
          backdrop-filter: blur(20px);
          border-radius: 24px;
          overflow: hidden;
          border: 1px solid var(--card-border);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          height: 100%;
          display: flex;
          flex-direction: column;
          position: relative;
          box-shadow: var(--shadow-soft);
          min-height: 550px;
        }

        .menu-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: var(--gradient-gold);
          transform: scaleX(0);
          transition: transform 0.4s ease;
          z-index: 2;
        }

        .menu-card:hover {
          transform: translateY(-12px) scale(1.02);
          background: rgba(255, 255, 255, 0.18);
          box-shadow: var(--shadow-strong);
        }

        .menu-card:hover::before {
          transform: scaleX(1);
        }

        /* IMAGEN CUADRADA PREMIUM */
        .menu-image {
          width: 100%;
          height: 280px;
          overflow: hidden;
          position: relative;
          background: rgba(255, 255, 255, 0.1);
          flex-shrink: 0;
        }

        .menu-image::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 40%;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
        }

        .menu-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .menu-card:hover .menu-image img {
          transform: scale(1.1);
        }

        /* CONTENIDO DE LA TARJETA */
        .menu-content {
          padding: 2rem;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          position: relative;
          z-index: 2;
        }

        .menu-price {
          font-size: 2.2rem;
          font-weight: 900;
          color: var(--secondary-color);
          margin-bottom: 0.8rem;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        .price-currency {
          font-size: 1.4rem;
          opacity: 0.9;
        }

        .menu-name {
          font-size: 1.6rem;
          font-weight: 800;
          color: var(--text-light);
          margin-bottom: 1rem;
          line-height: 1.3;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .menu-description {
          font-size: 1rem;
          color: rgba(255, 255, 255, 0.85);
          line-height: 1.6;
          margin-bottom: 1.5rem;
          flex-grow: 1;
          font-weight: 400;
        }

        /* BOTONES DE ACCIÓN */
        .menu-actions {
          display: flex;
          gap: 1rem;
          margin-top: auto;
        }

        .btn-menu {
          flex: 1;
          padding: 1rem 1.5rem;
          border-radius: 12px;
          font-weight: 700;
          font-size: 0.95rem;
          text-decoration: none;
          text-align: center;
          transition: all 0.3s ease;
          border: none;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }

        .btn-primary {
          background: var(--gradient-gold);
          color: var(--text-dark);
          box-shadow: var(--shadow-medium);
        }

        .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-strong);
        }

        .btn-secondary {
          background: transparent;
          color: var(--text-light);
          border: 2px solid var(--text-light);
        }

        .btn-secondary:hover {
          background: var(--text-light);
          color: var(--primary-color);
          transform: translateY(-2px);
        }

        /* ETIQUETA DE DESTACADO */
        .featured-badge {
          position: absolute;
          top: 1rem;
          right: 1rem;
          background: var(--gradient-gold);
          color: var(--text-dark);
          padding: 0.5rem 1rem;
          border-radius: 20px;
          font-weight: 800;
          font-size: 0.8rem;
          text-transform: uppercase;
          letter-spacing: 1px;
          z-index: 3;
          box-shadow: var(--shadow-soft);
        }

        /* BOTÓN VER TODO */
        .view-all-container {
          text-align: center;
          margin-top: 4rem;
        }

        .btn-view-all {
          display: inline-flex;
          align-items: center;
          gap: 0.8rem;
          background: var(--gradient-gold);
          color: var(--text-dark);
          padding: 1.2rem 3rem;
          border-radius: 50px;
          font-weight: 800;
          font-size: 1.1rem;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: 1px;
          transition: all 0.3s ease;
          box-shadow: var(--shadow-medium);
        }

        .btn-view-all:hover {
          transform: translateY(-3px) scale(1.05);
          box-shadow: var(--shadow-strong);
        }

        /* RESPONSIVE DESIGN */
        @media (max-width: 1200px) {
          .menu-grid {
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
          }

          .menu-title {
            font-size: 3.2rem;
          }
        }

        @media (max-width: 768px) {
          .cid-uSSQs9pxtz {
            padding: 4rem 0;
          }

          .menu-title {
            font-size: 2.8rem;
          }

          .menu-subtitle {
            font-size: 1.2rem;
            padding: 0 1rem;
          }

          .menu-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            padding: 0 0.5rem;
          }

          .menu-card {
            min-height: 500px;
          }

          .menu-image {
            height: 250px;
          }

          .menu-actions {
            flex-direction: column;
          }

          .menu-price {
            font-size: 2rem;
          }

          .menu-name {
            font-size: 1.4rem;
          }
        }

        @media (max-width: 480px) {
          .menu-title {
            font-size: 2.2rem;
          }

          .menu-badge {
            font-size: 0.9rem;
            padding: 0.6rem 1.5rem;
          }

          .menu-content {
            padding: 1.5rem;
          }

          .btn-view-all {
            padding: 1rem 2rem;
            font-size: 1rem;
          }
        }

        /* ANIMACIÓN DE APARICIÓN ESCALONADA */
        .menu-item:nth-child(1) {
          animation-delay: 0.1s;
        }

        .menu-item:nth-child(2) {
          animation-delay: 0.2s;
        }

        .menu-item:nth-child(3) {
          animation-delay: 0.3s;
        }

        .menu-item:nth-child(4) {
          animation-delay: 0.4s;
        }

        .menu-item:nth-child(5) {
          animation-delay: 0.5s;
        }

        .menu-item:nth-child(6) {
          animation-delay: 0.6s;
        }

        .menu-card-link {
          text-decoration: none;
          display: block;
          color: inherit;
        }

        .menu-card-link:hover {
          text-decoration: none;
          color: inherit;
        }
      </style>

      <?php
      $default_image = 'views/imgs/fiestaMexicana.jpg';
      $query = "SELECT id_producto, titulo, descripcion, precio, foto_url FROM producto WHERE activo = 1 ORDER BY RAND() LIMIT 8";
      $stmt = $db->prepare($query);
      $stmt->execute();
      ?>

      <!-- Elementos decorativos -->
      <div class="menu-decoration">
        <div class="decor-item decor-1"></div>
        <div class="decor-item decor-2"></div>
        <div class="decor-item decor-3"></div>
      </div>

      <div class="container-fluid">
        <!-- Encabezado premium -->
        <div class="menu-header">
          <div class="menu-badge">
            Los Auténticos de Chilpancingo
          </div>
          <h1 class="menu-title">
            Menú Estrella
          </h1>
          <p class="menu-subtitle">
            Descubre nuestros deliciosos platillos, preparados con el auténtico sazón MEXICANO
            que nos hace los unicos en CHILPANCINGO
          </p>
        </div>

        <!-- Grid de productos -->
        <div class="menu-grid">
          <?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)):
            extract($row);
            $image_src = !empty($foto_url) ? htmlspecialchars($foto_url) : $default_image;
            $is_featured = rand(0, 1); // Aleatorio para featured badge
          ?>
            <div class="menu-item">
              <a href="views/menu.php?product_id=<?php echo $id_producto; ?>" class="menu-card-link">
                <div class="menu-card">
                  <?php if ($is_featured): ?>
                    <div class="featured-badge">Más Pedido</div>
                  <?php endif; ?>

                  <div class="menu-image">
                    <img src="<?php echo $image_src; ?>" alt="<?php echo htmlspecialchars($titulo); ?>">
                  </div>

                  <div class="menu-content">
                    <div class="menu-price">
                      <span class="price-currency">$</span>
                      <?php echo htmlspecialchars(number_format($precio, 2)); ?>
                      <span class="price-currency">MXN</span>
                    </div>

                    <h3 class="menu-name">
                      <?php echo htmlspecialchars($titulo); ?>
                    </h3>

                    <p class="menu-description">
                      <?php echo htmlspecialchars($descripcion); ?>
                    </p>

                    <div class="menu-actions">
                      <span class="btn-menu btn-primary">
                        <i class="fas fa-shopping-cart"></i>
                        Ordenar
                      </span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          <?php endwhile; ?>
        </div>

        <!-- Botón ver todo -->
        <div class="view-all-container">
          <a href="views/menu.php" class="btn-view-all">
            <i class="fas fa-utensils"></i>
            Ver Menú Completo
          </a>
        </div>
      </div>
    </section>

    <script>
      // Animación de aparición al hacer scroll
      document.addEventListener('DOMContentLoaded', function() {
        const menuItems = document.querySelectorAll('.menu-item');

        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.style.animationPlayState = 'running';
            }
          });
        }, {
          threshold: 0.1
        });

        menuItems.forEach(item => {
          item.style.animationPlayState = 'paused';
          observer.observe(item);
        });
      });

      // Funciones de interactividad
      function orderProduct(productName) {
        // Aquí integrarías con tu sistema de pedidos
        // Ejemplo: window.location.href = `order.php?product=${encodeURIComponent(productName)}`;
      }

      function showDetails(productName) {
        // Aquí podrías mostrar un modal con más detalles
        // Ejemplo: openProductModal(productName);
      }

      // Efectos hover mejorados
      document.querySelectorAll('.menu-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
          this.style.transform = 'translateY(-12px) scale(1.02)';
        });

        card.addEventListener('mouseleave', function() {
          this.style.transform = 'translateY(0) scale(1)';
        });
      });
    </script>


    <section class="pricing01 immersem5 cid-uSSQs9catalogo" id="product-list-catalogo">
      <style>
        /* VARIABLES DEL DISEÑO PRINCIPAL */
        :root {
          --dominant-color: #B92117;
          --dominant-text: #FFFFFF;
          --yellow: #F9A825;
          --orange: #E65100;
          --white: #FFFFFF;
          --soft-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          --hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Estilos base de la sección */
        .cid-uSSQs9catalogo {
          padding-top: 4rem;
          padding-bottom: 4rem;
          background-color: #d1390d !important;
          font-family: 'Poppins', sans-serif !important;
          color: var(--dominant-text);
        }

        /* LÍNEA DEGRADADA DORADA DEBAJO DEL TÍTULO */
        .cid-uSSQs9catalogo .content-wrapper {
          width: 100%;
          margin-bottom: 3rem;
          position: relative;
          text-align: center;
          padding-bottom: 2rem;
        }

        .cid-uSSQs9catalogo .content-wrapper::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 200px;
          height: 4px;
          background: linear-gradient(90deg, transparent, var(--yellow), transparent);
          border-radius: 2px;
        }

        /* TÍTULO CON ESTILO DEL CATÁLOGO */
        .cid-uSSQs9catalogo .content-wrapper .mbr-section-title {
          color: var(--yellow) !important;
          text-align: center;
          font-size: 2.8rem !important;
          font-weight: 900 !important;
          text-transform: uppercase;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          letter-spacing: 2px;
          margin-bottom: 1rem;
        }

        /* CONTENEDOR PRINCIPAL - 4 TARJETAS POR FILA EN DESKTOP */
        .cid-uSSQs9catalogo .row {
          margin: 0;
          justify-content: center;
          align-items: stretch;
          padding: 20px 16px;
          gap: 2rem;
          display: flex;
          flex-wrap: wrap;
        }

        /* CONTENEDOR DE CADA TARJETA - 4 POR FILA */
        .cid-uSSQs9catalogo .item {
          display: flex;
          flex-direction: column;
          width: 100%;
          position: relative;
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 0.6s ease, transform 0.6s ease;
        }

        /* MOBILE: 1 columna */
        @media (max-width: 767px) {
          .cid-uSSQs9catalogo .item {
            flex: 1 1 100%;
          }
        }

        /* TABLET: 2 columnas */
        @media (min-width: 768px) and (max-width: 1199px) {
          .cid-uSSQs9catalogo .item {
            flex: 1 1 calc(50% - 1rem);
          }
        }

        /* DESKTOP: 4 COLUMNAS FIJAS */
        @media (min-width: 1200px) {
          .cid-uSSQs9catalogo .item {
            flex: 1 1 calc(25% - 1.5rem) !important;
            max-width: calc(25% - 1.5rem) !important;
          }
        }

        .cid-uSSQs9catalogo .item.visible {
          opacity: 1;
          transform: translateY(0);
        }

        /* TARJETAS SEMI-TRANSPARENTES CON ALTURA UNIFORME */
        .cid-uSSQs9catalogo .item-wrapper {
          background: rgba(255, 255, 255, 0.12) !important;
          border-radius: 20px !important;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.25) !important;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          height: 100%;
          backdrop-filter: blur(15px);
          box-shadow: var(--soft-shadow);
          text-decoration: none;
          color: inherit;
          position: relative;
          display: flex;
          flex-direction: column;
          min-height: 450px;
          /* ALTURA MÍNIMA PARA CUADRADO */
        }

        /* Línea superior con gradiente en hover */
        .cid-uSSQs9catalogo .item-wrapper::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, var(--yellow), var(--orange));
          transform: scaleX(0);
          transition: transform 0.4s ease;
          z-index: 2;
        }

        /* Efecto Hover mejorado */
        .cid-uSSQs9catalogo .item-wrapper:hover {
          transform: translateY(-10px) scale(1.02);
          background: rgba(255, 255, 255, 0.18) !important;
          box-shadow: var(--hover-shadow);
        }

        .cid-uSSQs9catalogo .item-wrapper:hover::before {
          transform: scaleX(1);
        }

        /* IMAGEN CUADRADA FIJA - MÁS ALTA Y FORZADA A CUADRADO */
        .cid-uSSQs9catalogo .item-img {
          width: 100%;
          height: 280px !important;
          /* MÁS ALTA PARA CUADRADO PERFECTO */
          overflow: hidden;
          background: rgba(255, 255, 255, 0.1);
          position: relative;
          flex-shrink: 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .cid-uSSQs9catalogo .item-img::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 40%;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
        }

        .cid-uSSQs9catalogo .item-img img {
          width: 100%;
          height: 100%;
          object-fit: cover !important;
          transition: transform 0.4s ease;
          display: block;
        }

        .cid-uSSQs9catalogo .item-wrapper:hover .item-img img {
          transform: scale(1.1);
        }

        /* CONTENIDO DE LA TARJETA - TIPOGRAFÍA ESTILIZADA */
        .cid-uSSQs9catalogo .item-content {
          padding: 1.8rem !important;
          text-align: center;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-height: 170px;
          /* ALTURA MÍNIMA DEL CONTENIDO */
        }

        /* NOMBRE DE CATEGORÍA - ESTILO PRINCIPAL */
        .cid-uSSQs9catalogo .card-price {
          font-size: 1.4rem !important;
          font-weight: 800 !important;
          color: var(--yellow) !important;
          margin-bottom: 0.8rem !important;
          text-transform: uppercase;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
          line-height: 1.2;
          min-height: 3rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* TÍTULO DEL PRODUCTO */
        .cid-uSSQs9catalogo .card-title {
          font-size: 1.1rem !important;
          font-weight: 700 !important;
          color: var(--white) !important;
          margin-bottom: 0.8rem !important;
          line-height: 1.3;
          min-height: 2.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* DESCRIPCIÓN */
        .cid-uSSQs9catalogo .card-desc {
          font-size: 0.9rem !important;
          font-weight: 400 !important;
          color: rgba(255, 255, 255, 0.85) !important;
          margin-bottom: 0 !important;
          line-height: 1.4;
          min-height: 2.8rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* AJUSTES ESPECÍFICOS PARA 4 COLUMNAS */
        @media (min-width: 1200px) {
          .cid-uSSQs9catalogo .item-wrapper {
            min-height: 480px;
            /* MÁS ALTAS EN DESKTOP */
          }

          .cid-uSSQs9catalogo .item-img {
            height: 300px !important;
            /* MÁS ALTAS EN DESKTOP */
          }

          .cid-uSSQs9catalogo .card-price {
            font-size: 1.3rem !important;
            min-height: 3.2rem;
          }

          .cid-uSSQs9catalogo .card-title {
            font-size: 1rem !important;
            min-height: 2.8rem;
          }

          .cid-uSSQs9catalogo .card-desc {
            font-size: 0.85rem !important;
            min-height: 3rem;
          }
        }

        /* AJUSTES PARA TABLET */
        @media (min-width: 768px) and (max-width: 1199px) {
          .cid-uSSQs9catalogo .item-wrapper {
            min-height: 420px;
          }

          .cid-uSSQs9catalogo .item-img {
            height: 250px !important;
          }
        }

        /* AJUSTES PARA MOBILE */
        @media (max-width: 767px) {
          .cid-uSSQs9catalogo .item-wrapper {
            min-height: 400px;
          }

          .cid-uSSQs9catalogo .item-img {
            height: 220px !important;
          }

          .cid-uSSQs9catalogo .item-content {
            padding: 1.5rem !important;
            min-height: 180px;
          }
        }

        /* GARANTIZAR QUE TODAS LAS TARJETAS SEAN IGUALES */
        .cid-uSSQs9catalogo .item-wrapper {
          aspect-ratio: 3/4;
          /* PROPORCIÓN CUADRADA CONSISTENTE */
        }
      </style>

      <script>
        // Efecto de aparición escalonada para las tarjetas
        document.addEventListener('DOMContentLoaded', function() {
          const items = document.querySelectorAll('.cid-uSSQs9catalogo .item');

          items.forEach((item, index) => {
            setTimeout(() => {
              item.classList.add('visible');
            }, index * 150);
          });

          // Forzar mismo tamaño para todas las tarjetas
          function equalizeCards() {
            const cards = document.querySelectorAll('.cid-uSSQs9catalogo .item-wrapper');
            let maxHeight = 0;

            // Encontrar la altura máxima
            cards.forEach(card => {
              card.style.height = 'auto';
              const height = card.offsetHeight;
              if (height > maxHeight) maxHeight = height;
            });

            // Aplicar altura máxima a todas
            cards.forEach(card => {
              card.style.height = maxHeight + 'px';
            });
          }

          // Ejecutar al cargar y al redimensionar
          window.addEventListener('load', equalizeCards);
          window.addEventListener('resize', equalizeCards);
        });
      </script>

      <div class="container-fluid">
        <div class="row">
          <div class="content-wrapper">
            <h2 class="mbr-section-title mbr-fonts-style display-2">
              <strong>Explora Nuestro Delicioso Catálogo</strong>
            </h2>
          </div>

          <?php
          foreach ($categorias_disponibles as $cat) {
            $category_name = htmlspecialchars($cat['nombre']);
            $category_id = $cat['id_categoria'];
            $random_prod = get_random_product_by_category($db, $category_id);
            $cat_url_name = strtolower(str_replace(' ', '', $category_name));

            $image_src = 'views/imgs/default_image.png';
            $product_title = '¡Ver todos los productos!';

            if ($random_prod) {
              $image_src = !empty($random_prod['foto_url']) ? htmlspecialchars($random_prod['foto_url']) : $image_src;
              $product_title = htmlspecialchars($random_prod['titulo']);
            }
          ?>

            <div class="item features-image col-12 col-lg-4">
              <a href="views/catalogo.php?categoria=<?php echo $cat_url_name; ?>" class="card-link">
                <div class="item-wrapper" data-category-name="<?php echo $category_name; ?>">
                  <div class="item-img">
                    <img alt="<?php echo $category_name; ?>" src="<?php echo $image_src; ?>">
                  </div>
                  <div class="item-content">
                    <div>
                      <p class="card-price mbr-fonts-style display-5">
                        <?php echo $category_name; ?>
                      </p>
                      <h4 class="card-title mbr-fonts-style display-7">
                        <?php echo $product_title; ?>
                      </h4>
                      <p class="card-desc mbr-fonts-style display-4">
                        Haz clic para explorar todos los disponibles en esta sección.
                      </p>
                    </div>
                  </div>
                </div>
              </a>
            </div>

          <?php } ?>
        </div>
      </div>
    </section>

    <style>
      .cid-uSSQs9mbck {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9mbck .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9mbck .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9mbck .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mbck .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mbck .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9mbck .content-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mbck .content-wrapper {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9mbck .content-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px !important;
        object-fit: cover;
        animation: none;
      }

      .cid-uSSQs9mbck .content-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        border-radius: 20px !important;
        background-color: var(--dominant-color);
        opacity: 0.6;
      }

      .cid-uSSQs9mbck .content-wrapper .content-wrap {
        position: relative;
        z-index: 1;
        margin: 280px 0 200px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mbck .content-wrapper .content-wrap {
          margin: 150px 0;
        }
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mbck .content-wrapper .content-wrap {
          margin: 46px 0;
        }
      }

      .cid-uSSQs9mbck .content-wrapper .content-wrap .mbr-section-title {
        margin-bottom: 16px;
      }

      .cid-uSSQs9mbck .content-wrapper .content-wrap .text-wrap .mbr-text {
        display: inline-flex;
        width: 40%;
        margin-bottom: 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mbck .content-wrapper .content-wrap .text-wrap .mbr-text {
          width: 100%;
        }
      }

      .cid-uSSQs9mbck .content-wrapper .mbr-section-btn {
        position: relative;
        z-index: 1;
        margin-bottom: 64px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mbck .content-wrapper .mbr-section-btn {
          margin-bottom: 46px;
        }
      }

      .cid-uSSQs9mbck .mbr-section-title {
        color: #ffffff;
      }

      .cid-uSSQs9mbck .mbr-text,
      .cid-uSSQs9mbck .text-wrap {
        color: var(--dominant-text);
        text-align: center;
      }

      .cid-uSSQs9mbck .mbr-section-title,
      .cid-uSSQs9mbck .mbr-section-btn {
        text-align: center;
        color: var(--dominant-text);
      }
    </style>

    <style>
      .cid-uSSQs9mvHM {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9mvHM .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9mvHM .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9mvHM .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvHM .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvHM .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9mvHM .item {
        margin-top: 32px;
      }

      .cid-uSSQs9mvHM .item:first-child {
        margin-top: 0;
      }

      .cid-uSSQs9mvHM .item:nth-child(2) {
        margin-top: 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvHM .item:nth-child(2) {
          margin-top: 32px;
        }
      }

      .cid-uSSQs9mvHM .item:nth-child(2n) .item-wrapper {
        background-color: var(--dominant-color, #3454ff);
      }

      .cid-uSSQs9mvHM .item .item-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 52px 40px;
        background-color: #f3f6f9;
        border-radius: 20px !important;
        height: 100%;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvHM .item .item-wrapper {
          padding: 46px 20px;
        }
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .card-desc_1,
      .cid-uSSQs9mvHM .item .item-wrapper .card-box .card-desc_2 {
        margin-bottom: 46px;
      }

      @media (max-width: 992px) {

        .cid-uSSQs9mvHM .item .item-wrapper .card-box .card-desc_1,
        .cid-uSSQs9mvHM .item .item-wrapper .card-box .card-desc_2 {
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .icon-wrapper_1 .mbr-iconfont,
      .cid-uSSQs9mvHM .item .item-wrapper .card-box .icon-wrapper_2 .mbr-iconfont {
        display: inline-flex;
        font-size: 78px;
        margin-bottom: 80px;
        color: #000000;
      }

      @media (max-width: 992px) {

        .cid-uSSQs9mvHM .item .item-wrapper .card-box .icon-wrapper_1 .mbr-iconfont,
        .cid-uSSQs9mvHM .item .item-wrapper .card-box .icon-wrapper_2 .mbr-iconfont {
          margin-bottom: 46px;
        }
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .icon-wrapper_2 .mbr-iconfont {
        color: #ffffff;
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .card-title_1,
      .cid-uSSQs9mvHM .item .item-wrapper .card-box .card-title_2 {
        margin-bottom: 32px;
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .title-wrapper_1 .card-title_1 {
        display: inline-flex;
        justify-content: center;
        width: 70%;
        margin-bottom: 32px;
      }

      @media (max-width: 1200px) {
        .cid-uSSQs9mvHM .item .item-wrapper .card-box .title-wrapper_1 .card-title_1 {
          width: 100%;
        }
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .title-wrapper_2 .card-title_2 {
        display: inline-flex;
        justify-content: center;
        width: 70%;
        margin-bottom: 32px;
      }

      @media (max-width: 1200px) {
        .cid-uSSQs9mvHM .item .item-wrapper .card-box .title-wrapper_2 .card-title_2 {
          width: 100%;
        }
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .text-wrapper_1 .card-text_1 {
        display: inline-flex;
        justify-content: center;
        width: 60%;
        margin-bottom: 32px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvHM .item .item-wrapper .card-box .text-wrapper_1 .card-text_1 {
          width: 100%;
        }
      }

      .cid-uSSQs9mvHM .item .item-wrapper .card-box .text-wrapper_2 .card-text_2 {
        display: inline-flex;
        justify-content: center;
        width: 60%;
        margin-bottom: 32px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvHM .item .item-wrapper .card-box .text-wrapper_2 .card-text_2 {
          width: 100%;
        }
      }

      .cid-uSSQs9mvHM .card-desc_1 {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9mvHM .card-desc_2 {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9mvHM .card-title_1 {
        color: #000000;
      }

      .cid-uSSQs9mvHM .card-title_2 {
        color: var(--dominant-text, #ffffff);
      }

      .cid-uSSQs9mvHM .card-text_1,
      .cid-uSSQs9mvHM .text-wrapper_1 {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9mvHM .card-text_2,
      .cid-uSSQs9mvHM .text-wrapper_2 {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9mvHM .card-title_1,
      .cid-uSSQs9mvHM .buttons_1,
      .cid-uSSQs9mvHM .icon-wrapper_1,
      .cid-uSSQs9mvHM .title-wrapper_1 {
        text-align: center;
      }

      .cid-uSSQs9mvHM .card-title_2,
      .cid-uSSQs9mvHM .buttons_2,
      .cid-uSSQs9mvHM .icon-wrapper_2,
      .cid-uSSQs9mvHM .title-wrapper_2 {
        text-align: center;
      }

      .cid-uSSQs9mvHM .B {
        color: var(--dominant-text);
      }
    </style>

    <style>
      .cid-uSSQs9mvuJ {
        padding-top: 1rem;
        padding-bottom: 1rem;
        overflow: hidden;
        background-color: #ffffff;
      }

      .cid-uSSQs9mvuJ .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvuJ .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9mvuJ .content-wrapper {
        padding: 60px 60px 40px;
        background-color: var(--dominant-color, #000000);
        border-radius: 20px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvuJ .content-wrapper {
          padding: 60px 20px 40px;
        }
      }

      .cid-uSSQs9mvuJ .content-wrapper .content-wrap {
        padding: 0 86px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .content-wrapper .content-wrap {
          padding: 0;
        }
      }

      .cid-uSSQs9mvuJ .content-wrapper .content-wrap .mbr-desc {
        margin-bottom: 60px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvuJ .content-wrapper .content-wrap .mbr-desc {
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9mvuJ .content-wrapper .content-wrap .mbr-section-title {
        margin-bottom: 40px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvuJ .content-wrapper .content-wrap .mbr-section-title {
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9mvuJ .content-wrapper .content-wrap .text-wrapper .mbr-text {
        display: inline-flex;
        justify-content: center;
        width: 40%;
        margin-bottom: 60px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mvuJ .content-wrapper .content-wrap .text-wrapper .mbr-text {
          width: 100%;
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide {
        display: flex;
        justify-content: center;
        position: relative;
        min-width: 672px;
        max-width: 672px;
        flex: 0 0 100%;
        /* Each slide takes full width of the viewport */
      }

      @media (max-width: 767px) {
        .cid-uSSQs9mvuJ .embla__slide {
          min-width: 100%;
          max-width: 100%;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 20px !important;
        background-color: #f3f6f9;
        overflow: hidden;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-img img {
        height: 340px;
        border-radius: 0 !important;
        object-fit: cover;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-img img {
          height: 300px;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content {
        padding: 32px;
        z-index: 1;
        position: relative;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content {
          padding: 32px 20px;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc {
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc {
          display: block;
          margin-bottom: 20px;
        }
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc .icon-wrapper {
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc .icon-wrapper .mbr-iconfont {
        font-size: 54px;
        color: #999c9f;
        margin-right: 32px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc .icon-wrapper .mbr-iconfont {
          margin-right: 0;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc .list {
        display: inline-flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc .list {
          justify-content: flex-start;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc .list .item-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        border-radius: 30px;
        margin-right: 10px;
        margin-bottom: 5px;
        padding: 12px 16px;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .item-desc .list .item-wrap:last-child {
        margin-right: 0;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper {
          display: block;
        }
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .name-wrap {
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .name-wrap .item-name {
        margin-bottom: 8px;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .name-wrap .item-role {
        margin-bottom: 0;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .social-wrapper {
        display: flex;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .social-wrapper .soc-item a {
        display: block;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .social-wrapper .soc-item a:hover .mbr-iconfont,
      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .social-wrapper .soc-item a:hover .mbr-iconfont {
        border: 1px solid #000000;
      }

      .cid-uSSQs9mvuJ .embla__slide .slide-content .item-wrapper .item-content .name-wrapper .social-wrapper .soc-item a .mbr-iconfont {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 100%;
        border: 1px solid #dcdde0;
        color: #000000;
        font-size: 18px;
        transition: all 0.3s ease-in-out;
        margin-right: 10px;
      }

      .cid-uSSQs9mvuJ .embla__button--next,
      .cid-uSSQs9mvuJ .embla__button--prev {
        display: flex;
      }

      .cid-uSSQs9mvuJ .embla__button {
        top: -24px;
        width: 48px;
        height: 48px;
        margin-top: -1.5rem;
        font-size: 18px;
        background-color: transparent !important;
        color: var(--dominant-text, #ffffff) !important;
        border: 2px solid var(--dominant-text, #ffffff) !important;
        border-radius: 50%;
        transition: all 0.3s;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: .6 !important;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla__button {
          top: 2.5rem;
        }
      }

      .cid-uSSQs9mvuJ .embla__button:disabled {
        cursor: default;
        display: none;
      }

      .cid-uSSQs9mvuJ .embla__button:hover {
        opacity: 1 !important;
      }

      .cid-uSSQs9mvuJ .embla__button.embla__button--prev {
        left: 30px;
      }

      .cid-uSSQs9mvuJ .embla__button.embla__button--next {
        right: 30px;
      }

      .cid-uSSQs9mvuJ .embla {
        position: relative;
        width: 100%;
        padding-top: 60px;
        overflow: hidden;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mvuJ .embla {
          padding-top: 100px;
        }
      }

      .cid-uSSQs9mvuJ .embla__viewport {
        overflow: hidden !important;
        /* CRÍTICO: Oculta el desbordamiento */
        width: 100%;
        margin-right: 1rem;
      }

      @media (max-width: 767px) {
        .cid-uSSQs9mvuJ .embla__viewport {
          overflow: hidden;
        }
      }

      .cid-uSSQs9mvuJ .embla__viewport.is-draggable {
        cursor: grab;
      }

      .cid-uSSQs9mvuJ .embla__viewport.is-dragging {
        cursor: grabbing;
      }

      .cid-uSSQs9mvuJ .embla__container {
        display: flex;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -webkit-tap-highlight-color: transparent;
        margin-left: 0;
        /* Eliminar márgenes que causan desbordamiento */
      }

      .cid-uSSQs9mvuJ .mbr-desc {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9mvuJ .mbr-section-title {
        color: #ffffff;
      }

      .cid-uSSQs9mvuJ .mbr-text,
      .cid-uSSQs9mvuJ .text-wrapper {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9mvuJ .item-name {
        color: #000000;
      }

      .cid-uSSQs9mvuJ .item-role {
        color: #000000;
      }

      .cid-uSSQs9mvuJ .list {
        color: #000000;
      }

      .cid-uSSQs9mvuJ .mbr-section-title,
      .cid-uSSQs9mvuJ .mbr-section-btn {
        text-align: center;
        color: var(--dominant-text);
      }
    </style>

    <style>
      .cid-uSSQs9mInq {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9mInq .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9mInq .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9mInq .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mInq .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9mInq .row {
        justify-content: center;
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .row {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9mInq .item {
        margin-bottom: 32px;
      }

      .cid-uSSQs9mInq .item .item-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 20px !important;
        background-color: #f3f6f9;
        overflow: hidden;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-img img {
        height: 340px;
        border-radius: 0 !important;
        object-fit: cover;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-img img {
          height: 300px;
        }
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content {
        padding: 32px;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-content {
          padding: 32px 20px;
        }
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc {
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc {
          display: block;
          margin-bottom: 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc .icon-wrapper {
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc .icon-wrapper .mbr-iconfont {
        font-size: 54px;
        color: #999c9f;
        margin-right: 32px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc .icon-wrapper .mbr-iconfont {
          margin-right: 0;
        }
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc .list {
        display: inline-flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc .list {
          justify-content: flex-start;
        }
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc .list .item-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        border-radius: 30px;
        margin-right: 10px;
        margin-bottom: 5px;
        padding: 12px 16px;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .item-desc .list .item-wrap:last-child {
        margin-right: 0;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper {
          display: block;
        }
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .title-wrap {
        width: 60%;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .title-wrap {
          margin-bottom: 20px;
          width: 100%;
        }
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .title-wrap .item-title {
        margin-bottom: 8px;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .title-wrap .item-text {
        margin-bottom: 0;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .social-wrapper {
        display: flex;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a {
        display: block;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a:hover .mbr-iconfont,
      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a:hover .mbr-iconfont {
        color: #000000;
        background-color: #ffffff;
      }

      .cid-uSSQs9mInq .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a .mbr-iconfont {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 100%;
        background-color: #000000;
        color: #ffffff;
        font-size: 18px;
        transition: all 0.3s ease-in-out;
        margin-right: 10px;
      }

      .cid-uSSQs9mInq .item-title {
        color: #000000;
      }

      .cid-uSSQs9mInq .item-text {
        color: #000000;
      }

      .cid-uSSQs9mInq .list {
        color: #000000;
      }
    </style>

    <!-- LISTON DE ANUNCIOS -->
    <style>
      /* ANUNCIO LED - ESTILOS MEJORADOS SIN ESPACIOS */
      .cid-uSSQs9nXOB {
        padding: 2rem 0;
        background: linear-gradient(135deg, #B92117 0%, #E65100 100%) !important;
        box-shadow:
          0 10px 30px rgba(185, 33, 23, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-top: 3px solid rgba(255, 215, 0, 0.6);
        border-bottom: 3px solid rgba(255, 215, 0, 0.6);
        overflow: hidden;
        position: relative;
        width: 100%;
        margin: 0;
      }

      /* EFECTO DE BRILLO ANIMADO MÁS SUAVE */
      .cid-uSSQs9nXOB::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 50%,
            transparent 100%);
        animation: ledShine 4s infinite linear;
        z-index: 1;
      }

      @keyframes ledShine {
        0% {
          transform: translateX(-100%);
        }

        100% {
          transform: translateX(200%);
        }
      }

      /* CONTENEDOR PRINCIPAL DEL TEXTO */
      .led-scroll-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 1.5rem 0;
      }

      /* TEXTO EN MOVIMIENTO INFINITO - MÁS RÁPIDO Y SIN ESPACIOS */
      .led-scroll-text {
        display: inline-block;
        white-space: nowrap;
        font-weight: 800;
        color: #FFD700;
        /* COLOR DORADO */
        font-size: 3rem;
        text-transform: uppercase;
        letter-spacing: 4px;
        text-shadow:
          2px 2px 4px rgba(0, 0, 0, 0.8),
          0 0 10px rgba(255, 215, 0, 0.9),
          0 0 20px rgba(255, 215, 0, 0.7),
          0 0 30px rgba(255, 215, 0, 0.5);
        animation: scrollLeft 12s linear infinite;
        padding: 0 1rem;
      }

      /* ANIMACIÓN MÁS RÁPIDA Y SIN PAUSAS */
      @keyframes scrollLeft {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-33.33%);
        }
      }

      /* ELEMENTOS DECORATIVOS LATERALES */
      .led-decoration {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.5rem;
        color: #FFD700;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        z-index: 2;
        animation: pulse 2s infinite;
      }

      .led-decoration-left {
        left: 2rem;
      }

      .led-decoration-right {
        right: 2rem;
      }

      @keyframes pulse {

        0%,
        100% {
          opacity: 1;
          transform: translateY(-50%) scale(1);
        }

        50% {
          opacity: 0.7;
          transform: translateY(-50%) scale(1.1);
        }
      }

      /* EFECTO DE BORDE BRILLANTE */
      .led-border {
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,
            transparent 0%,
            #FFD700 20%,
            #FFD700 80%,
            transparent 100%);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
      }

      .led-border-top {
        top: 0;
      }

      .led-border-bottom {
        bottom: 0;
      }

      /* PUNTOS DECORATIVOS */
      .led-dots {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 0.5rem;
      }

      .led-dots-left {
        left: 1rem;
      }

      .led-dots-right {
        right: 1rem;
      }

      .led-dot {
        width: 8px;
        height: 8px;
        background: #FFD700;
        border-radius: 50%;
        animation: dotBlink 1.5s infinite;
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
      }

      .led-dot:nth-child(2) {
        animation-delay: 0.2s;
      }

      .led-dot:nth-child(3) {
        animation-delay: 0.4s;
      }

      .led-dot:nth-child(4) {
        animation-delay: 0.6s;
      }

      @keyframes dotBlink {

        0%,
        100% {
          opacity: 0.3;
          transform: scale(0.8);
        }

        50% {
          opacity: 1;
          transform: scale(1.2);
        }
      }

      /* RESPONSIVE */
      @media (max-width: 1200px) {
        .led-scroll-text {
          font-size: 2.5rem;
          letter-spacing: 3px;
          animation-duration: 10s;
        }

        .led-decoration {
          font-size: 2rem;
        }
      }

      @media (max-width: 768px) {
        .cid-uSSQs9nXOB {
          padding: 1.5rem 0;
        }

        .led-scroll-text {
          font-size: 1.8rem;
          letter-spacing: 2px;
          animation-duration: 8s;
        }

        .led-decoration {
          font-size: 1.5rem;
        }

        .led-decoration-left {
          left: 1rem;
        }

        .led-decoration-right {
          right: 1rem;
        }

        .led-dots {
          display: none;
        }
      }

      @media (max-width: 480px) {
        .led-scroll-text {
          font-size: 1.4rem;
          letter-spacing: 1px;
          animation-duration: 6s;
          padding: 0 0.5rem;
        }

        .led-decoration {
          font-size: 1.2rem;
        }

        .led-decoration-left {
          left: 0.5rem;
        }

        .led-decoration-right {
          right: 0.5rem;
        }
      }

      /* ANIMACIÓN DE ENTRADA */
      @keyframes ledEntrance {
        0% {
          opacity: 0;
          transform: translateY(-20px);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .cid-uSSQs9nXOB {
        animation: ledEntrance 1s ease-out forwards;
      }
    </style>

    <!-- ANUNCIO LED MEJORADO - SIN ESPACIOS VACÍOS -->
    <section class="features08 immersem5 cid-uSSQs9nXOB" id="features-7-uSSQs9nXOB">
      <!-- Bordes superiores e inferiores -->
      <div class="led-border led-border-top"></div>
      <div class="led-border led-border-bottom"></div>

      <!-- Decoraciones laterales -->
      <div class="led-decoration led-decoration-left">🎯</div>
      <div class="led-decoration led-decoration-right">🔥</div>

      <!-- Puntos decorativos -->
      <div class="led-dots led-dots-left">
        <div class="led-dot"></div>
        <div class="led-dot"></div>
        <div class="led-dot"></div>
        <div class="led-dot"></div>
      </div>

      <div class="led-dots led-dots-right">
        <div class="led-dot"></div>
        <div class="led-dot"></div>
        <div class="led-dot"></div>
        <div class="led-dot"></div>
      </div>

      <!-- Contenedor del texto en movimiento - TRIPLICADO PARA EFECTO CONTINUO -->
      <div class="led-scroll-container">
        <div class="led-scroll-text">
          🌟 LOS MEJORES DE CHILPANCINGO 🌟 •
          🌟 TACOS AL PASTOR PARA EL GANADOR 🌟 •
          🌟 TU MEJOR ELECCIÓN EN CHILPANCINGO 🌟 •
          🌟 UN TACO AL DIA, QUE ALEGRÍA 🌟 •
          🌟 INGREDIENTES FRESCOS 🌟 •
          🌟 UNA SABROSA EXPERIENCIA EN CADA TACO 🌟
        </div>
      </div>
    </section>

    <style>
      .cid-uSSQs9nvbm {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffff;
      }

      .cid-uSSQs9nvbm .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9nvbm .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9nvbm .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9nvbm .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nvbm .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9nvbm .row {
        margin: 0;
        justify-content: center;
        padding: 60px 16px;
        background-color: #f3f6f9;
        border-radius: 20px !important;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nvbm .row {
          padding: 46px 4px 46px;
        }
      }

      .cid-uSSQs9nvbm .content-wrapper {
        margin-bottom: 80px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nvbm .content-wrapper {
          margin-bottom: 46px;
        }
      }

      .cid-uSSQs9nvbm .content-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9nvbm .content-wrapper .mbr-section-title {
        margin-bottom: 32px;
      }

      .cid-uSSQs9nvbm .content-wrapper .text-wrapper .mbr-text {
        display: inline-flex;
        width: 40%;
        margin-bottom: 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nvbm .content-wrapper .text-wrapper .mbr-text {
          width: 100%;
        }
      }

      .cid-uSSQs9nvbm .item {
        margin-bottom: 40px;
      }

      .cid-uSSQs9nvbm .item:first-child {
        margin-bottom: 0;
      }

      .cid-uSSQs9nvbm .item:hover .item-wrapper .item-img img,
      .cid-uSSQs9nvbm .item:focus .item-wrapper .item-img img {
        transform: scale(1.05);
      }

      .cid-uSSQs9nvbm .item .item-wrapper .item-img {
        overflow: hidden;
        margin-bottom: 25px;
        border-radius: 20px !important;
      }

      .cid-uSSQs9nvbm .item .item-wrapper .item-img img {
        height: 300px;
        object-fit: cover;
        border-radius: 20px !important;
        transition: all 0.3s ease-in-out;
      }

      .cid-uSSQs9nvbm .item .item-wrapper .item-content .card-title {
        margin-bottom: 16px;
      }

      .cid-uSSQs9nvbm .item .item-wrapper .item-content .card-desc {
        margin-bottom: 0;
      }

      .cid-uSSQs9nvbm .item a {
        display: block;
      }

      .cid-uSSQs9nvbm .mbr-section-title {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9nvbm .mbr-desc {
        color: #000000;
        text-align: center;
        display: flex;
        justify-content: center;
      }

      .cid-uSSQs9nvbm .mbr-text,
      .cid-uSSQs9nvbm .text-wrapper {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9nvbm .card-title {
        color: #000000;
      }

      .cid-uSSQs9nvbm .card-desc {
        color: #616161;
      }
    </style>

    <!-- ++++ RENTA DE TROMPOS MIJITO AQUI ESTA LO MERO BUENO ++++ -->
    <style>
      /* VARIABLES EXCLUSIVAS PARA EVENTOS */
      :root {
        --event-primary: #E65100;
        /* Naranja fuerte */
        --event-secondary: #FF9800;
        /* Naranja amarillento */
        --event-accent: #FF5722;
        /* Naranja rojizo */
        --event-text-light: #FFFFFF;
        --event-text-dark: #2C1810;
        --event-card-bg: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
        --event-gradient: linear-gradient(135deg, #FF5722 0%, #E65100 100%);
        --event-shadow: 0 15px 40px rgba(230, 81, 0, 0.3);
        --event-shadow-hover: 0 25px 60px rgba(230, 81, 0, 0.4);
      }

      /* ESTILOS BASE EXCLUSIVOS PARA EVENTOS */
      .cid-uSSQs9nOVT {
        padding: 5rem 0;
        background: var(--event-gradient) !important;
        font-family: 'Poppins', sans-serif !important;
        position: relative;
        overflow: hidden;
      }

      /* CONTENEDOR DE ANCHO COMPLETO */
      .event-full-container {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
      }

      /* ENCABEZADO DE EVENTOS */
      .event-full-header {
        text-align: center;
        margin-bottom: 3rem;
      }

      .event-full-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.9);
        color: var(--event-primary);
        padding: 1rem 2.5rem;
        border-radius: 50px;
        font-weight: 800;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 2rem;
        box-shadow: var(--event-shadow);
        animation: eventPulse 3s infinite;
        border: 2px solid rgba(255, 255, 255, 0.5);
      }

      @keyframes eventPulse {

        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.05);
        }
      }

      .event-full-title {
        font-size: 3.5rem;
        font-weight: 900;
        color: var(--event-text-light);
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
        margin-bottom: 1rem;
        line-height: 1.1;
      }

      .event-full-subtitle {
        font-size: 1.3rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
        font-weight: 400;
        max-width: 600px;
        margin: 0 auto;
      }

      /* TARJETA DE ANCHO COMPLETO (COLSPAN 2) */
      .event-full-card {
        background: var(--event-card-bg);
        border-radius: 25px;
        overflow: hidden;
        box-shadow: var(--event-shadow-hover);
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        min-height: 400px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
      }

      .event-full-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 35px 80px rgba(230, 81, 0, 0.5);
      }

      /* IMAGEN DEL EVENTO */
      .event-full-image {
        height: 100%;
        min-height: 400px;
        overflow: hidden;
        position: relative;
      }

      .event-full-image::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(230, 81, 0, 0.3), transparent);
      }

      .event-full-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
      }

      .event-full-card:hover .event-full-image img {
        transform: scale(1.1);
      }

      /* CONTENIDO INFORMATIVO */
      .event-full-content {
        padding: 3rem;
        position: relative;
        z-index: 2;
        color: var(--event-text-light);
      }

      .event-full-badge-card {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: rgba(255, 255, 255, 0.95);
        color: var(--event-primary);
        padding: 0.8rem 1.5rem;
        border-radius: 20px;
        font-weight: 800;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 3;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .event-full-name {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      }

      .event-full-description {
        font-size: 1.2rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        font-weight: 400;
        opacity: 0.95;
      }

      /* LISTA DE CARACTERÍSTICAS */
      .event-full-features {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2.5rem;
      }

      .event-full-feature {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.8rem;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .event-full-feature i {
        color: var(--event-text-light);
        font-size: 1.3rem;
        width: 30px;
        text-align: center;
      }

      .event-full-feature span {
        color: var(--event-text-light);
        font-weight: 600;
        font-size: 1rem;
      }

      /* BOTÓN DE AGENDAR */
      .event-full-actions {
        text-align: left;
      }

      .btn-event-full {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        background: rgba(255, 255, 255, 0.95);
        color: var(--event-primary);
        padding: 1.2rem 2.5rem;
        border-radius: 50px;
        font-weight: 800;
        font-size: 1.1rem;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: all 0.4s ease;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        border: 2px solid transparent;
      }

      .btn-event-full:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
        background: var(--event-text-light);
        color: var(--event-primary);
        text-decoration: none;
      }

      /* RESPONSIVE - COLSPAN 2 EN DESKTOP, UNA COLUMNA EN MÓVIL */
      @media (max-width: 992px) {
        .event-full-card {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .event-full-image {
          min-height: 300px;
          height: 300px;
        }

        .event-full-content {
          padding: 2.5rem 2rem;
        }

        .event-full-title {
          font-size: 2.8rem;
        }

        .event-full-name {
          font-size: 2rem;
        }
      }

      @media (max-width: 768px) {
        .event-full-container {
          max-width: 95%;
        }

        .event-full-title {
          font-size: 2.2rem;
        }

        .event-full-badge {
          font-size: 1rem;
          padding: 0.8rem 2rem;
        }

        .event-full-content {
          padding: 2rem 1.5rem;
        }

        .event-full-name {
          font-size: 1.8rem;
        }

        .btn-event-full {
          padding: 1rem 2rem;
          font-size: 1rem;
          width: 100%;
          justify-content: center;
        }
      }

      @media (max-width: 480px) {
        .event-full-title {
          font-size: 1.8rem;
        }

        .event-full-name {
          font-size: 1.5rem;
        }

        .event-full-description {
          font-size: 1rem;
        }
      }
    </style>

    <?php
    // SOLO MOSTRAR 1 EVENTO
    $query = "SELECT * FROM producto_evento ORDER BY id_producto_evento DESC LIMIT 1";
    $stmt = $db->prepare($query);
    $stmt->execute();

    $default_image = 'views/imgs/trompo-eventos.jpg';
    ?>

    <section data-bs-version="5.1" class="features05 immersem5 cid-uSSQs9nOVT" id="event-full-uSSQs9nOVT">
      <div class="container-fluid">
        <div class="event-full-container">
          <!-- Encabezado -->
          <div class="event-full-header">
            <div class="event-full-badge">
              🎊 UNA SABROSA EXPERIENCIA PARA TUS EVENTOS
            </div>
            <h1 class="event-full-title">
              Trompo al Pastor<br>
              <span style="font-size: 2.2rem; color: #FFD700;">Para Tu Fiesta o Evento en Chilpancingo</span>
            </h1>
            <p class="event-full-subtitle">
              Lleva el auténtico sabor de los tacos al pastor a tu celebración.
              Servicio completo profesional para eventos inolvidables
            </p>
          </div>

          <!-- Tarjeta de ancho completo (colspan 2) -->
          <?php if ($row = $stmt->fetch(PDO::FETCH_ASSOC)):
            extract($row);
            $image_to_display = !empty($foto_url) ? htmlspecialchars($foto_url) : $default_image;
          ?>
            <div class="event-full-card">
              <!-- Imagen del evento -->
              <div class="event-full-image">
                <img src="<?php echo $image_to_display; ?>" alt="<?php echo htmlspecialchars($titulo); ?>">
              </div>

              <!-- Contenido informativo -->
              <div class="event-full-content">

                <h2 class="event-full-name">
                  <?php echo htmlspecialchars($titulo); ?>
                </h2>

                <p class="event-full-description">
                  <?php echo htmlspecialchars($descripcion); ?>
                </p>

                <div class="event-full-features">
                  <div class="event-full-feature">
                    <i class="fas fa-users"></i>
                    <span>Servicio ESPECIAL</span>
                  </div>
                  <div class="event-full-feature">
                    <i class="fas fa-clock"></i>
                    <span>Tacos calientitos para tus invitados</span>
                  </div>
                  <div class="event-full-feature">
                    <i class="fas fa-utensils"></i>
                    <span>Ingredientes frescos</span>
                  </div>
                  <div class="event-full-feature">
                    <i class="fas fa-chef-hat"></i>
                    <span>Lo mejores de Chilpancingo</span>
                  </div>
                </div>

                <div class="event-full-actions">
                  <a href="views/agendar.php?id=<?php echo htmlspecialchars($id_producto_evento); ?>" class="btn-event-full">
                    <i class="fas fa-calendar-plus"></i>
                    Agendar Mi Evento
                  </a>
                </div>
              </div>
            </div>
          <?php endif; ?>
        </div>
      </div>
    </section>

    <script>
      // Efectos interactivos para la tarjeta
      document.addEventListener('DOMContentLoaded', function() {
        const eventCard = document.querySelector('.event-full-card');

        if (eventCard) {
          // Efecto de aparición
          eventCard.style.opacity = '0';
          eventCard.style.transform = 'translateY(30px)';

          setTimeout(() => {
            eventCard.style.transition = 'all 0.8s ease';
            eventCard.style.opacity = '1';
            eventCard.style.transform = 'translateY(0)';
          }, 300);

          // Efectos hover mejorados
          eventCard.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-8px)';
          });

          eventCard.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
          });
        }
      });
    </script>


    <style>
      .cid-uSSQs9nkf6 {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9nkf6 .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9nkf6 .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9nkf6 .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9nkf6 .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nkf6 .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9nkf6 .content-wrapper {
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nkf6 .content-wrapper {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9nkf6 .content-wrapper .mbr-section-title {
        margin-bottom: 32px;
      }

      .cid-uSSQs9nkf6 .content-wrapper .desc-wrapper .mbr-desc {
        display: inline-flex;
        width: 30%;
        margin-bottom: 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nkf6 .content-wrapper .desc-wrapper .mbr-desc {
          width: 100%;
        }
      }

      .cid-uSSQs9nkf6 .content-wrapper .items-wrapper {
        margin: 60px 0 80px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nkf6 .content-wrapper .items-wrapper {
          margin: 46px 0 46px;
        }
      }

      .cid-uSSQs9nkf6 .content-wrapper .items-wrapper .item {
        padding: 20px 24px;
        border-radius: 20px !important;
        background-color: #f3f6f9;
        flex-grow: 1;
        width: 260px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nkf6 .content-wrapper .items-wrapper .item {
          padding: 20px;
        }
      }

      .cid-uSSQs9nkf6 .content-wrapper .items-wrapper .item .item-wrapper .card-box .card-number {
        margin-bottom: 18px;
      }

      .cid-uSSQs9nkf6 .content-wrapper .items-wrapper .item .item-wrapper .card-box .card-title {
        margin-bottom: 60px;
      }

      .cid-uSSQs9nkf6 .content-wrapper .items-wrapper .item .item-wrapper .card-box .icon-wrapper .mbr-iconfont {
        font-size: 48px;
        color: #000000;
        display: inline-flex;
      }

      .cid-uSSQs9nkf6 .content-wrapper .text-wrapper .mbr-text {
        display: inline-flex;
        width: 40%;
        margin-bottom: 40px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nkf6 .content-wrapper .text-wrapper .mbr-text {
          margin-bottom: 20px;
          width: 100%;
        }
      }

      .cid-uSSQs9nkf6 .mbr-section-title {
        color: #000000;
      }

      .cid-uSSQs9nkf6 .mbr-desc,
      .cid-uSSQs9nkf6 .desc-wrapper {
        color: #000000;
        text-align: center;
        display: flex;
        justify-content: center;
      }

      .cid-uSSQs9nkf6 .card-number {
        color: #000000;
      }

      .cid-uSSQs9nkf6 .card-title {
        color: #000000;
      }

      .cid-uSSQs9nkf6 .mbr-text,
      .cid-uSSQs9nkf6 .text-wrapper {
        color: #000000;
        text-align: center;
        display: flex;
        justify-content: center;
      }

      .cid-uSSQs9nkf6 .mbr-section-title,
      .cid-uSSQs9nkf6 .mbr-section-btn {
        text-align: center;
      }
    </style>

    <style>
      .cid-uSSQs9nblG {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9nblG .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9nblG .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9nblG .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9nblG .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nblG .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9nblG .content-wrapper {
        padding: 60px;
        background-color: var(--dominant-color, #232323);
        border-radius: 20px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nblG .content-wrapper {
          padding: 46px 20px 46px;
        }
      }

      .cid-uSSQs9nblG .content-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9nblG .content-wrapper .mbr-section-title {
        margin-bottom: 32px;
      }

      .cid-uSSQs9nblG .content-wrapper .text-wrapper .mbr-text {
        display: inline-flex;
        width: 40%;
        margin-bottom: 40px;
        justify-content: center;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nblG .content-wrapper .text-wrapper .mbr-text {
          width: 100%;
        }
      }

      .cid-uSSQs9nblG .content-wrapper .items-wrapper .items-wrap {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
      }

      .cid-uSSQs9nblG .content-wrapper .items-wrapper .items-wrap .item {
        margin-left: -1rem;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9nblG .content-wrapper .items-wrapper .items-wrap .item {
          margin-left: 0;
        }
      }

      .cid-uSSQs9nblG .content-wrapper .items-wrapper .items-wrap .item:first-child {
        margin-left: 0;
      }

      .cid-uSSQs9nblG .content-wrapper .items-wrapper .items-wrap .item .item-wrapper .card-box .card-title {
        width: 226px;
        height: 226px;
        border-radius: 100%;
        border: 1px solid var(--dominant-text, #ffffff);
        border-left: 10px solid var(--dominant-text, #ffffff);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
      }

      .cid-uSSQs9nblG .content-wrapper .mbr-section-btn {
        margin-top: 40px;
      }

      .cid-uSSQs9nblG .mbr-section-title {
        color: #ffffff;
      }

      .cid-uSSQs9nblG .mbr-desc {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9nblG .mbr-text,
      .cid-uSSQs9nblG .text-wrapper {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9nblG .card-title {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9nblG .mbr-section-title,
      .cid-uSSQs9nblG .mbr-section-btn,
      .cid-uSSQs9nblG .items-wrapper {
        text-align: center;
        color: var(--dominant-text);
      }
    </style>


<style>
  /* VARIABLES Y CONFIGURACIÓN PREMIUM PARA SUGERENCIAS */
  :root {
    --suggestions-primary: #B92117;
    --suggestions-accent: #F9A825;
    --suggestions-secondary: #E65100;
    --suggestions-light: #FFFFFF;
    --suggestions-dark: #1A1A1A;
    --suggestions-card-bg: rgba(255, 255, 255, 0.95);
    --suggestions-gradient: linear-gradient(135deg, #B92117 0%, #E65100 100%);
    --suggestions-gold-gradient: linear-gradient(45deg, #F9A825, #FFD700);
    --suggestions-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);
    --suggestions-shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.15);
    --suggestions-shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.25);
  }

  /* CONTENEDOR PRINCIPAL DE SUGERENCIAS */
  .cid-uSSQs9ndkD {
    padding: 4rem 0;
    background: var(--suggestions-gradient) !important;
    font-family: 'Poppins', sans-serif !important;
    position: relative;
    overflow: hidden;
  }

  /* ELEMENTOS DECORATIVOS DE FONDO */
  .cid-uSSQs9ndkD::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
  }

  /* ENCABEZADO DE SUGERENCIAS */
  .suggestions-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
  }

  .suggestions-badge {
    display: inline-block;
    background: var(--suggestions-gold-gradient);
    color: var(--suggestions-dark);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    box-shadow: var(--suggestions-shadow-medium);
    animation: badgePulse 2s infinite;
  }

  @keyframes badgePulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .suggestions-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--suggestions-light);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
    line-height: 1.1;
  }

  .suggestions-subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 400;
  }

  /* GRID DE 4 TARJETAS FIJAS - OCUPAN TODO EL ANCHO */
  .suggestions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* TARJETA DE SUGERENCIA - TAMAÑO FIJO Y CONSISTENTE */
  .suggestion-item {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
    height: 550px;
    /* ALTO FIJO PARA TODAS */
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .suggestion-card {
    background: var(--suggestions-card-bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--suggestions-shadow-strong);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    /* OCUPA TODO EL ALTO DEL CONTENEDOR */
    display: flex;
    flex-direction: column;
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .suggestion-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--suggestions-gold-gradient);
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .suggestion-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--suggestions-shadow-strong);
  }

  .suggestion-card:hover::before {
    opacity: 1;
  }

  /* IMAGEN CUADRADA - TAMAÑO FIJO */
  .suggestion-image {
    width: 100%;
    height: 220px;
    /* ALTO FIJO PARA IMAGEN CUADRADA */
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  .suggestion-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  }

  .suggestion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }

  .suggestion-card:hover .suggestion-image img {
    transform: scale(1.1);
  }

  /* CONTENIDO - DISTRIBUCIÓN FLEXIBLE PARA MÓVILES */
  .suggestion-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    /* PERMITE QUE EL CONTENIDO SE AJUSTE MEJOR */
  }

  /* ETIQUETA DE SUGERENCIA */
  .suggestion-label {
    position: absolute;
    top: 10px;
    left: 1.5rem;
    background: var(--suggestions-gold-gradient);
    color: var(--suggestions-dark);
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--suggestions-shadow-soft);
    z-index: 2;
  }

  /* PRECIO Y NOMBRE - TAMAÑO FLEXIBLE */
  .suggestion-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--suggestions-primary);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    /* ALTURA FLEXIBLE EN LUGAR DE FIJA */
  }

  .price-currency {
    font-size: 1.2rem;
    opacity: 0.9;
  }

  .suggestion-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--suggestions-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    /* ALTURA FLEXIBLE EN LUGAR DE FIJA */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2em; /* ALTURA MÍNIMA PARA 2 LÍNEAS */
  }

  /* DESCRIPCIÓN - ALTURA FLEXIBLE */
  .suggestion-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* MÁXIMO 3 LÍNEAS */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em; /* ALTURA MÍNIMA PARA 3 LÍNEAS */
  }

  /* BOTÓN - POSICIÓN FIJA EN LA PARTE INFERIOR */
  .suggestion-actions {
    display: flex;
    gap: 1rem;
    margin-top: auto;
    flex-shrink: 0;
    /* ALTURA FLEXIBLE EN LUGAR DE FIJA */
  }

  .btn-suggestion {
    flex: 1;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px; /* ALTURA MÍNIMA PARA TOCAR FÁCIL EN MÓVIL */
  }

  .btn-suggestion-primary {
    background: var(--suggestions-gradient);
    color: var(--suggestions-light);
    box-shadow: var(--suggestions-shadow-medium);
  }

  .btn-suggestion-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--suggestions-shadow-strong);
  }

  /* RESPONSIVE DESIGN - MEJORADO PARA MÓVILES */
  @media (max-width: 1200px) {
    .suggestions-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
      padding: 0 2rem;
    }

    .suggestion-item {
      height: 520px; /* LIGERAMENTE MÁS ALTO PARA MÁS ESPACIO */
    }

    .suggestions-title {
      font-size: 3rem;
    }
  }

  @media (max-width: 768px) {
    .cid-uSSQs9ndkD {
      padding: 3rem 0;
    }

    .suggestions-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      max-width: 450px; /* MÁXIMO ANCHO PARA MEJOR LEGIBILIDAD */
      padding: 0 1rem;
    }

    .suggestion-item {
      height: auto; /* ALTURA AUTOMÁTICA EN MÓVIL */
      min-height: 480px;
    }

    .suggestion-card {
      min-height: 480px; /* ALTURA MÍNIMA GARANTIZADA */
    }

    .suggestions-title {
      font-size: 2.5rem;
    }

    .suggestions-subtitle {
      font-size: 1.1rem;
      padding: 0 1rem;
    }

    .suggestion-content {
      padding: 1.2rem;
      flex: 1 1 auto; /* FLEXIBILIDAD MEJORADA */
    }

    .suggestion-price {
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
    }

    .suggestion-name {
      font-size: 1.2rem;
      margin-bottom: 0.8rem;
      min-height: 2.8em;
    }

    .suggestion-image {
      height: 200px;
    }

    .suggestion-description {
      margin-bottom: 1rem;
      min-height: 4em;
      -webkit-line-clamp: 2; /* MENOS LÍNEAS EN MÓVIL */
    }

    /* ESPACIO ADICIONAL PARA EL BOTÓN EN MÓVIL */
    .suggestion-actions {
      margin-top: 1rem;
      padding-top: 0.5rem;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
  }

  @media (max-width: 480px) {
    .suggestions-title {
      font-size: 2rem;
    }

    .suggestions-badge {
      font-size: 0.9rem;
      padding: 0.6rem 1.5rem;
    }

    .suggestion-item {
      min-height: 460px;
    }

    .suggestion-card {
      min-height: 460px;
    }

    .suggestion-image {
      height: 180px;
    }

    .suggestion-content {
      padding: 1rem;
    }

    .suggestion-price {
      font-size: 1.6rem;
    }

    .suggestion-name {
      font-size: 1.1rem;
      min-height: 2.6em;
    }

    .suggestion-description {
      font-size: 0.9rem;
      min-height: 3.6em;
    }

    .btn-suggestion {
      padding: 0.9rem 1rem; /* MÁS PADDING PARA MEJOR TOCAR */
      font-size: 0.95rem;
    }
  }

  /* ANIMACIÓN ESCALONADA */
  .suggestion-item:nth-child(1) {
    animation-delay: 0.1s;
  }

  .suggestion-item:nth-child(2) {
    animation-delay: 0.2s;
  }

  .suggestion-item:nth-child(3) {
    animation-delay: 0.3s;
  }

  .suggestion-item:nth-child(4) {
    animation-delay: 0.4s;
  }
</style>

<?php
// Consulta para seleccionar 4 productos aleatorios de la tabla 'producto'
$query = "SELECT * FROM producto ORDER BY RAND() LIMIT 4";
$stmt = $db->prepare($query);
$stmt->execute();

$default_image = 'views/imgs/tacos2.jpg';
?>

<section data-bs-version="5.1" class="features05 immersem5 cid-uSSQs9ndkD" id="suggestions-premium">
  <div class="container-fluid">
    <!-- Encabezado premium de sugerencias -->
    <div class="suggestions-header">
      <div class="suggestions-badge">
        Recomendado por el público
      </div>
      <h2 class="suggestions-title">
        Nuestras Sugerencias
      </h2>
      <p class="suggestions-subtitle">
        Descubre los platillos más pedidos y mejor calificados por nuestros clientes
      </p>
    </div>

    <!-- Grid de 4 tarjetas fijas -->
    <div class="suggestions-grid">
      <?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)):
        extract($row);
        $image_to_display = !empty($foto_url) ? htmlspecialchars($foto_url) : $default_image;
      ?>
        <div class="suggestion-item">
          <div class="suggestion-card">
            <!-- Etiqueta de sugerencia -->
            <div class="suggestion-label">
              Sugerencia
            </div>

            <!-- Imagen cuadrada del producto -->
            <div class="suggestion-image">
              <img src="<?php echo $image_to_display; ?>" alt="<?php echo htmlspecialchars($titulo); ?>">
            </div>

            <!-- Contenido con distribución flexible -->
            <div class="suggestion-content">
              <div class="suggestion-price">
                <span class="price-currency">$</span>
                <?php echo htmlspecialchars(number_format($precio, 2)); ?>
                <span class="price-currency">MXN</span>
              </div>

              <h3 class="suggestion-name">
                <?php echo htmlspecialchars($titulo); ?>
              </h3>

              <p class="suggestion-description">
                <?php echo htmlspecialchars($descripcion); ?>
              </p>

              <div class="suggestion-actions">
                <a href="views/menu.php?id_producto=<?php echo htmlspecialchars($id_producto); ?>"
                  class="btn-suggestion btn-suggestion-primary">
                  <i class="fas fa-shopping-cart"></i>
                  Ordenar Ahora
                </a>
              </div>
            </div>
          </div>
        </div>
      <?php endwhile; ?>
    </div>
  </div>
</section>

<script>
  // Efectos de hover mejorados
  document.addEventListener('DOMContentLoaded', function() {
    const cards = document.querySelectorAll('.suggestion-card');

    cards.forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-10px) scale(1.02)';
      });

      card.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0) scale(1)';
      });
    });
  });
</script>

    <section class="gallery01 immersem5 cid-uSSQs9nwbC" id="gallery-1-uSSQs9nwbC">
      <style>
        /* VARIABLES Y CONFIGURACIÓN PREMIUM */
        :root {
          --primary-color: #B92117;
          --secondary-color: #F9A825;
          --accent-color: #E65100;
          --text-light: #FFFFFF;
          --text-dark: #1A1A1A;
          --card-bg: rgba(255, 255, 255, 0.12);
          --card-border: rgba(255, 255, 255, 0.25);
          --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);
          --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.15);
          --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.25);
          --gradient-primary: linear-gradient(135deg, #B92117 0%, #E65100 100%);
          --gradient-gold: linear-gradient(45deg, #F9A825, #FFD700);
        }

        /* ESTILOS BASE PREMIUM */
        .cid-uSSQs9nwbC {
          padding: 6rem 0;
          background: var(--gradient-primary) !important;
          font-family: 'Poppins', sans-serif !important;
          position: relative;
          overflow: hidden;
        }

        /* ELEMENTOS DECORATIVOS DE FONDO */
        .cid-uSSQs9nwbC::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.03"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
          pointer-events: none;
        }

        .gallery-decoration {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
        }

        .decor-item {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.05);
        }

        .decor-1 {
          width: 150px;
          height: 150px;
          top: 10%;
          left: 5%;
          animation: float 8s ease-in-out infinite;
        }

        .decor-2 {
          width: 100px;
          height: 100px;
          bottom: 15%;
          right: 8%;
          animation: float 6s ease-in-out infinite 1s;
        }

        .decor-3 {
          width: 80px;
          height: 80px;
          top: 60%;
          left: 10%;
          animation: float 7s ease-in-out infinite 0.5s;
        }

        @keyframes float {

          0%,
          100% {
            transform: translateY(0) rotate(0deg);
          }

          50% {
            transform: translateY(-15px) rotate(180deg);
          }
        }

        /* ENCABEZADO DE LA GALERÍA */
        .gallery-header {
          text-align: center;
          margin-bottom: 4rem;
          position: relative;
          z-index: 2;
        }

        .gallery-title {
          font-size: 4.5rem;
          font-weight: 900;
          background: var(--gradient-gold);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          margin-bottom: 1.5rem;
          line-height: 1.1;
          letter-spacing: 1px;
          position: relative;
          display: inline-block;
        }

        .gallery-title::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 10%;
          width: 80%;
          height: 4px;
          background: var(--gradient-gold);
          border-radius: 2px;
        }

        /* CONTENEDOR PRINCIPAL DE LA GALERÍA */
        .cid-uSSQs9nwbC .container-fluid {
          position: relative;
          z-index: 2;
        }

        /* CONTENEDOR DE LAS IMÁGENES DEL CARRUSEL */
        .cid-uSSQs9nwbC .carousel-container {
          display: flex;
          transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          gap: 1.5rem;
          padding: 0 1rem;
        }

        /* ESTILOS DE CADA IMAGEN */
        .cid-uSSQs9nwbC .grid-item {
          flex-shrink: 0;
          width: 320px;
          height: 420px;
          overflow: hidden;
          border-radius: 20px;
          box-shadow: var(--shadow-strong);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          position: relative;
          cursor: pointer;
        }

        .cid-uSSQs9nwbC .grid-item:hover {
          transform: translateY(-10px) scale(1.03);
          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        }

        .cid-uSSQs9nwbC .grid-item::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.7));
          z-index: 1;
          opacity: 0;
          transition: opacity 0.4s ease;
        }

        .cid-uSSQs9nwbC .grid-item:hover::before {
          opacity: 1;
        }

        .cid-uSSQs9nwbC .grid-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cid-uSSQs9nwbC .grid-item:hover img {
          transform: scale(1.1);
        }

        /* BOTONES DE NAVEGACIÓN */
        .carousel-nav {
          display: flex;
          justify-content: center;
          gap: 1rem;
          margin-top: 3rem;
          position: relative;
          z-index: 2;
        }

        .carousel-btn {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: var(--gradient-gold);
          color: var(--text-dark);
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.2rem;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: var(--shadow-medium);
        }

        .carousel-btn:hover {
          transform: translateY(-3px);
          box-shadow: var(--shadow-strong);
        }

        /* MEDIA QUERIES PARA RESPONSIVIDAD */
        @media (max-width: 1200px) {
          .cid-uSSQs9nwbC .grid-item {
            width: 280px;
            height: 380px;
          }

          .gallery-title {
            font-size: 3.8rem;
          }
        }

        @media (max-width: 768px) {
          .cid-uSSQs9nwbC {
            padding: 4rem 0;
          }

          .cid-uSSQs9nwbC .grid-item {
            width: 240px;
            height: 320px;
          }

          .gallery-title {
            font-size: 3rem;
          }
        }

        @media (max-width: 480px) {
          .cid-uSSQs9nwbC .grid-item {
            width: 200px;
            height: 280px;
          }

          .gallery-title {
            font-size: 2.5rem;
          }

          .carousel-container {
            gap: 1rem;
          }
        }
      </style>

      <!-- Elementos decorativos -->
      <div class="gallery-decoration">
        <div class="decor-item decor-1"></div>
        <div class="decor-item decor-2"></div>
        <div class="decor-item decor-3"></div>
      </div>

      <div class="container-fluid gallery-wrapper">
        <div class="gallery-header">
          <h2 class="gallery-title">
            ¡Conoce Nuestros Platillos!
          </h2>
        </div>

        <div class="carousel-container" id="carousel-container">
          <!-- Bloque de imágenes, se repetirá con JS para el carrusel infinito -->
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel.png" alt="Comida Mexicana 1"></div>
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel1.png" alt="Comida Mexicana 2"></div>
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel2.png" alt="Comida Mexicana 3"></div>
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel3.png" alt="Comida Mexicana 4"></div>
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel4.png" alt="Comida Mexicana 5"></div>
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel5.png" alt="Comida Mexicana 6"></div>
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel6.png" alt="Comida Mexicana 7"></div>
          <div class="grid-item"><img src="views/imgs/carrusel/carrusel7.png" alt="Comida Mexicana 8"></div>
        </div>

        
      </div>
    </section>

    <script>
      // Carrusel infinito
      document.addEventListener('DOMContentLoaded', function() {
        const carouselContainer = document.getElementById('carousel-container');
        const items = carouselContainer.querySelectorAll('.grid-item');
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');

        // Clonar elementos para efecto infinito
        items.forEach(item => {
          const clone = item.cloneNode(true);
          carouselContainer.appendChild(clone);
        });

        let currentIndex = 0;
        const itemWidth = items[0].offsetWidth + 24; // Ancho + gap
        const totalItems = items.length;

        function updateCarousel() {
          carouselContainer.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
        }

        function nextSlide() {
          currentIndex++;
          if (currentIndex >= totalItems) {
            // Efecto infinito: saltar al principio sin animación
            setTimeout(() => {
              carouselContainer.style.transition = 'none';
              currentIndex = 0;
              updateCarousel();
              // Forzar reflow
              void carouselContainer.offsetWidth;
              carouselContainer.style.transition = 'transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
            }, 1500);
          }
          updateCarousel();
        }

        function prevSlide() {
          currentIndex--;
          if (currentIndex < 0) {
            // Efecto infinito: saltar al final sin animación
            setTimeout(() => {
              carouselContainer.style.transition = 'none';
              currentIndex = totalItems - 1;
              updateCarousel();
              // Forzar reflow
              void carouselContainer.offsetWidth;
              carouselContainer.style.transition = 'transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
            }, 1500);
          }
          updateCarousel();
        }

        // Event listeners para botones
        nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);

        // Auto avanzar cada 5 segundos
        let autoSlide = setInterval(nextSlide, 5000);

        // Pausar auto slide al interactuar
        carouselContainer.addEventListener('mouseenter', () => {
          clearInterval(autoSlide);
        });

        carouselContainer.addEventListener('mouseleave', () => {
          autoSlide = setInterval(nextSlide, 5000);
        });
      });
    </script>

    <script>
      // Script para la funcionalidad del carrusel
      document.addEventListener('DOMContentLoaded', () => {
        const carouselContainer = document.getElementById('carousel-container');
        let scrollPosition = 0;
        const cardWidth = 300; // Ancho base de la tarjeta + 1rem de margen-derecho (16px) = 316px

        // Clona las imágenes para crear un efecto de bucle infinito
        const images = Array.from(carouselContainer.children);
        images.forEach(image => {
          carouselContainer.appendChild(image.cloneNode(true));
        });

        // Función para mover el carrusel
        function autoScroll() {
          // Mueve la posición de desplazamiento
          scrollPosition += 1.5; // Velocidad del movimiento
          carouselContainer.style.transform = `translateX(${-scrollPosition}px)`;

          // Si llegamos al final de la primera copia, reiniciamos la posición
          const firstGroupWidth = images.length * (cardWidth + 16); // 16px es el 1rem de margin-right
          if (scrollPosition >= firstGroupWidth) {
            scrollPosition = 0;
            carouselContainer.style.transform = `translateX(0px)`;
          }
        }

        // Ajusta el ancho de las tarjetas de manera responsiva en tiempo real
        function adjustCarouselWidth() {
          const newCardWidth = carouselContainer.querySelector('.grid-item').offsetWidth + 16;
          carouselContainer.style.width = `${images.length * 2 * newCardWidth}px`;
        }

        // Ejecuta el ajuste inicial y cada vez que la ventana cambie de tamaño
        window.addEventListener('resize', adjustCarouselWidth);
        adjustCarouselWidth();

        // Inicia el movimiento automático del carrusel
        setInterval(autoScroll, 20); // Intervalo de tiempo en milisegundos para el movimiento
      });
    </script>

    <section data-bs-version="5.1" class="tabs02 immersem5 cid-uSSQs9n0en" id="features-6-uSSQs9n0en">
      <style>
        /* Estilos generales de la sección */
        .cid-uSSQs9n0en {
          padding-top: 1rem;
          padding-bottom: 1rem;
          background-color: #f5f5f5;
          font-family: 'Inter', sans-serif;
        }

        .cid-uSSQs9catalogo,
        .cid-uSSQs9oklE,
        .cid-uSSQs9pxtz,
        .cid-uSSQs9nOVT,
        .cid-uSSQs9nwbC {
          background-color: #c7310f !important;
        }

        .cid-uSSQs9ndkD {
          background-color: #c7310f !important;
        }


        .cid-uSSQs9n0en .mbr-fallback-image.disabled {
          display: none;
        }

        .cid-uSSQs9n0en .mbr-fallback-image {
          display: block;
          background-size: cover;
          background-position: center center;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
        }

        .cid-uSSQs9n0en .container-fluid {
          padding: 0 30px;
        }

        @media (max-width: 768px) {
          .cid-uSSQs9n0en .container-fluid {
            padding: 0 20px;
          }
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .container {
            padding: 0 20px;
          }
        }

        .cid-uSSQs9n0en .row {
          justify-content: center;
          padding: 60px 0;
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .row {
            padding: 46px 0;
          }
        }

        .cid-uSSQs9n0en .mbr-desc {
          margin-bottom: 2rem;
          color: #F7931E;
          /* Naranja para el texto de servicio */
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .mbr-desc {
            margin-bottom: 1rem;
          }
        }

        .cid-uSSQs9n0en .content-wrapper {
          margin-right: 100px;
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .content-wrapper {
            margin-right: 0;
            text-align: center;
          }
        }

        .cid-uSSQs9n0en .content-wrapper .mbr-section-title {
          margin-bottom: 1.5rem;
          color: #000000;
          font-weight: 800;
          line-height: 1.2;
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .content-wrapper .mbr-section-title {
            margin-bottom: 1rem;
          }
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .content-wrapper .mbr-text {
            margin-bottom: 2rem;
          }
        }

        .cid-uSSQs9n0en .tabs-wrap {
          margin-bottom: 40px;
          margin-left: 60px;
          text-align: right;
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .tabs-wrap {
            margin-left: 0;
            text-align: center;
          }
        }

        .cid-uSSQs9n0en .tabs-wrap .nav.nav-tabs {
          display: flex;
          flex-wrap: wrap;
          border: none;
          justify-content: space-around;
          margin-bottom: 32px;
          background-color: #ffffff;
          padding: 10px;
          border-radius: 12px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        .cid-uSSQs9n0en .tabs-wrap .nav.nav-tabs .nav-item {
          padding: 0;
          border: none;
          border-radius: 0;
          margin: 0 5px;
          transition: all 0.3s ease-in-out;
        }

        .cid-uSSQs9n0en .tabs-wrap .nav.nav-tabs .nav-item .nav-link {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 0;
          border: none;
          color: #F7931E;
          /* Naranja de los tabs */
          font-weight: 600;
          padding: 12px 20px;
          border-radius: 8px;
          transition: all 0.3s ease-in-out;
          opacity: 0.7;
          text-align: center;
        }

        .cid-uSSQs9n0en .tabs-wrap .nav.nav-tabs .nav-item .nav-link.active {
          opacity: 1;
          background-color: #F7931E;
          /* Fondo naranja cuando está activo */
          color: #ffffff;
          /* Letras blancas cuando está activo */
          box-shadow: 0 2px 5px rgba(247, 147, 30, 0.4);
        }

        .cid-uSSQs9n0en .tabs-wrap .nav.nav-tabs .nav-item .nav-link:hover {
          opacity: 1;
          background-color: #ffb861;
          color: #ffffff;
        }

        .cid-uSSQs9n0en .tabs-wrap .tab-content .tab-pane .image-wrapper {
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
          border-radius: 12px;
          overflow: hidden;
        }

        .cid-uSSQs9n0en .tabs-wrap .tab-content .tab-pane .image-wrapper img {
          width: 100%;
          height: 400px;
          border-radius: 12px;
          object-fit: cover;
          transition: transform 0.5s ease-in-out;
        }

        .cid-uSSQs9n0en .tabs-wrap .tab-content .tab-pane .image-wrapper img:hover {
          transform: scale(1.05);
        }

        /* Estilo para las nuevas descripciones */
        .cid-uSSQs9n0en .tab-description {
          margin-top: 1.5rem;
          font-size: 1.1rem;
          color: #555555;
          line-height: 1.6;
          text-align: center;
        }

        @media (max-width: 992px) {
          .cid-uSSQs9n0en .tab-description {
            margin-top: 1rem;
          }
        }

        .cid-uSSQs9n0en .mbr-section-title {
          color: #000000;
        }

        .cid-uSSQs9n0en .mbr-text {
          color: #555555;
          font-size: 1.1rem;
        }
      </style>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 col-lg-10">

          </div>
          <div class="col-12 col-lg-5">
            <div class="content-wrapper">
              <h2 class="mbr-section-title mbr-fonts-style display-2">
                <strong>La Taquería Ideal</strong>
              </h2>
              <p class="mbr-text mbr-fonts-style display-4">
                Desde la cocina hasta tu puerta, garantizamos una experiencia
                culinaria inolvidable. ¡Somos más que tacos, somos una fiesta de sabores!
              </p>
            </div>
          </div>
          <div class="col-12 col-lg-5">
            <div class="tabs-wrap">
              <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item first mbr-fonts-style">
                  <a class="nav-link show display-4" role="tab" data-toggle="tab" data-bs-toggle="tab" href="#tab1" aria-selected="false">Rápido</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mbr-fonts-style display-4" role="tab" data-toggle="tab" data-bs-toggle="tab" href="#tab2" aria-selected="false">Amable</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mbr-fonts-style display-4 active" role="tab" data-toggle="tab" data-bs-toggle="tab" href="#tab3" aria-selected="true">Delicioso</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mbr-fonts-style display-4" role="tab" data-toggle="tab" data-bs-toggle="tab" href="#tab4" aria-selected="true">Confiable</a>
                </li>
              </ul>
              <div class="tab-content">
                <!-- Contenido de la pestaña "Rápido" -->
                <div id="tab1" class="tab-pane in" role="tabpanel">
                  <div class="image-wrapper">
                    <img alt="Entrega Rápida de Tacos" src="views/imgs/carrusel/rapido.jpg">
                  </div>
                  <p class="tab-description">
                    Nuestro servicio de entrega es tan rápido como un rayo. Recibe tus tacos frescos y calientes en la puerta de tu casa en un abrir y cerrar de ojos.
                  </p>
                </div>
                <!-- Contenido de la pestaña "Amable" -->
                <div id="tab2" class="tab-pane" role="tabpanel">
                  <div class="image-wrapper">
                    <img alt="Personal de Taquería Sonriendo" src="views/imgs/carrusel/amable.jpg">
                  </div>
                  <p class="tab-description">
                    Te recibimos siempre con una sonrisa. Nuestro equipo está listo para atenderte con la mejor disposición y hacer que tu visita sea una experiencia agradable.
                  </p>
                </div>
                <!-- Contenido de la pestaña "Delicioso" -->
                <div id="tab3" class="tab-pane active show" role="tabpanel">
                  <div class="image-wrapper">
                    <img alt="Tacos Deliciosos en Plato" src="views/imgs/carrusel/delicioso.jpg">
                  </div>
                  <p class="tab-description">
                    El sabor auténtico de México en cada bocado. Usamos ingredientes frescos y recetas tradicionales para que cada taco sea una explosión de sabor.
                  </p>
                </div>
                <!-- Contenido de la pestaña "Confiable" -->
                <div id="tab4" class="tab-pane" role="tabpanel">
                  <div class="image-wrapper">
                    <img alt="Tacos Deliciosos en Plato" src="views/imgs/carrusel/confiable.jpg">
                  </div>
                  <p class="tab-description">
                    Usamos ingredientes 100% frescos y procesos de preparación que cumplen con los más altos estándares de higiene. Con nosotros, sabes que siempre recibirás la mejor calidad.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <style>
      /* Importa la fuente 'Inter' de Google Fonts para un diseño moderno */
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap');

      /* Estilos para el contenedor principal de la sección */
      .video-section {
        width: 100%;
        /* Ocupa todo el ancho de la página */
        background-color: #B92117;
        /* Fondo oscuro */
        color: #ffffff;
        /* Color de texto blanco */
        padding: 3rem 2rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        font-family: 'Inter', sans-serif;
      }

      /* Estilos para el contenedor del contenido */
      .video-content-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        max-width: 1280px;
        /* Se mantiene un ancho máximo para el contenido interno */
        margin: 0 auto;
        /* Centra el contenido */
      }

      /* Media query para pantallas más grandes (desde 1024px) */
      @media (min-width: 1024px) {
        .video-content-container {
          flex-direction: row;
          gap: 5rem;
        }
      }

      /* Estilos para el contenedor del texto */
      .video-text-container {
        text-align: center;
        padding: 0 1rem;
      }

      @media (min-width: 1024px) {
        .video-text-container {
          text-align: left;
          flex: 1;
        }
      }

      /* Estilos para la descripción superior */
      .video-text-container .description {
        font-size: 1rem;
        font-weight: 600;
        color: #fb923c;
        /* Color naranja */
        margin-bottom: 0.5rem;
      }

      /* Estilos para el título principal */
      .video-text-container .title {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 1rem;
      }

      @media (min-width: 768px) {
        .video-text-container .title {
          font-size: 3.75rem;
        }
      }

      /* Estilos para el párrafo */
      .video-text-container .subtitle {
        font-size: 1.125rem;
        color: #d1d5db;
        /* Gris claro */
        margin-bottom: 0;
      }

      /* Estilos para el contenedor del video */
      .video-wrapper {
        flex: 1;
        width: 100%;
        position: relative;
        padding-bottom: 56.25%;
        /* Relación de aspecto 16:9 */
        overflow: hidden;
        border-radius: 1rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
      }

      /* Efecto hover en el video */
      .video-wrapper:hover {
        transform: scale(1.05);
      }

      .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>

    <section class="video-section">
      <div class="video-content-container">
        <!-- Contenedor del texto -->
        <div class="video-text-container">
          <p class="description">
            El Sabor de Nuestra Tradición Guerrerense
          </p>
          <h2 class="title">
            La Mejor Taquería de Chilpancingo
          </h2>
          <p class="subtitle">
            Sumérgete en el sabor de los auténticos <strong>tacos en Chilpancingo</strong>.
            Además, lleva La Magia del Sabor a tus celebraciones con nuestro servicio de
            <strong>renta de trompo de pastor para fiestas y eventos</strong>.
          </p>
        </div>

        <!-- Contenedor del video -->
        <div class="video-wrapper">
          <iframe
            src="https://www.youtube.com/embed/1lqQRMgLM1c?autoplay=1&mute=1&loop=1&playlist=1lqQRMgLM1c&controls=0&modestbranding=1&rel=0&showinfo=0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
          </iframe>
        </div>
      </div>
    </section>

    <style>
      .cid-uSSQs9noeR {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9noeR .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9noeR .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9noeR .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9noeR .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9noeR .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9noeR .content-wrapper {
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9noeR .content-wrapper {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9noeR .content-wrapper .content-wrap {
        margin-bottom: 80px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9noeR .content-wrapper .content-wrap {
          margin-bottom: 46px;
        }
      }

      .cid-uSSQs9noeR .content-wrapper .content-wrap .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9noeR .content-wrapper .content-wrap .mbr-section-title {
        margin-bottom: 0;
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card {
        border-radius: 20px !important;
        background-color: #f3f6f9;
        margin-bottom: 12px;
        padding: 60px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9noeR .content-wrapper .panel-group .card {
          padding: 46px 20px;
        }
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card .card-header {
        background-color: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card .card-header .panel-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card .card-header .panel-title .panel-title-edit {
        width: 50%;
        margin-bottom: 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9noeR .content-wrapper .panel-group .card .card-header .panel-title .panel-title-edit {
          width: auto;
        }
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card .card-header .panel-title .mbr-iconfont {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        width: 32px;
        height: 32px;
        min-width: 32px;
        transition: all 0.3s ease-in-out;
        color: #000000;
        margin-left: 16px;
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card .card-header .panel-title:not(.collapsed) .mbr-iconfont {
        transform: rotate(45deg);
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card .panel-collapse .panel-body {
        padding-top: 60px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9noeR .content-wrapper .panel-group .card .panel-collapse .panel-body {
          padding-top: 46px;
        }
      }

      .cid-uSSQs9noeR .content-wrapper .panel-group .card .panel-collapse .panel-body .panel-text {
        display: inline-flex;
        width: 30%;
        margin-bottom: 0;
      }

      @media (max-width: 1200px) {
        .cid-uSSQs9noeR .content-wrapper .panel-group .card .panel-collapse .panel-body .panel-text {
          width: 50%;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9noeR .content-wrapper .panel-group .card .panel-collapse .panel-body .panel-text {
          width: 100%;
        }
      }

      .cid-uSSQs9noeR .mbr-section-title {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9noeR .mbr-desc {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9noeR .panel-title-edit {
        color: #000000;
      }

      .cid-uSSQs9noeR .panel-text {
        color: #000000;
      }
    </style>




    <style>
      /* Importa la fuente 'Inter' para un estilo moderno */
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

      /* Estilos para la sección de Uber Eats, copiados de la sección de Rappi */
      .cid-uSSQs9oKO3 {
        padding-top: 2rem;
        /* Aumenta el padding para un mejor espacio */
        padding-bottom: 2rem;
        background-color: #ffffff;
        font-family: 'Inter', sans-serif;
      }

      .cid-uSSQs9oKO3 .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9oKO3 .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9oKO3 .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oKO3 .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oKO3 .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9oKO3 .content-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 64px 30px;
        border-radius: 20px;
        /* Bordes redondeados más visibles */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        /* Sombra para un efecto más bonito */
        overflow: hidden;
        /* Para que la imagen respete los bordes redondeados */
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oKO3 .content-wrapper {
          padding: 46px 20px;
        }
      }

      .cid-uSSQs9oKO3 .content-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: none;
        z-index: 0;
        /* Asegura que la imagen esté detrás del contenido */
      }

      .cid-uSSQs9oKO3 .content-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        border-radius: 20px !important;
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
        /* Degradado para mayor contraste */
      }

      .cid-uSSQs9oKO3 .content-wrapper .title-wrapper {
        position: relative;
        z-index: 2;
        /* Asegura que el texto esté encima del degradado */
        margin-bottom: 250px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oKO3 .content-wrapper .title-wrapper {
          margin-bottom: 150px;
        }
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oKO3 .content-wrapper .title-wrapper {
          margin-bottom: 46px;
        }
      }

      .cid-uSSQs9oKO3 .content-wrapper .title-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9oKO3 .content-wrapper .title-wrapper .mbr-section-title {
        margin-bottom: 0;
      }

      .cid-uSSQs9oKO3 .content-wrapper .content-wrap {
        position: relative;
        z-index: 2;
        /* Asegura que el contenido esté encima del degradado */
      }

      .cid-uSSQs9oKO3 .content-wrapper .content-wrap .icon-wrapper {
        display: block;
        margin-bottom: 108px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oKO3 .content-wrapper .content-wrap .icon-wrapper {
          margin-bottom: 32px;
        }
      }

      .cid-uSSQs9oKO3 .content-wrapper .content-wrap .icon-wrapper:hover .mbr-iconfont,
      .cid-uSSQs9oKO3 .content-wrapper .content-wrap .icon-wrapper:focus .mbr-iconfont {
        color: #ffffff;
        background-color: #000000;
      }

      .cid-uSSQs9oKO3 .content-wrapper .content-wrap .icon-wrapper .mbr-iconfont {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #000000;
        background-color: #ffffff;
        border-radius: 100%;
        transition: all 0.3s ease-in-out;
      }

      .cid-uSSQs9oKO3 .content-wrapper .content-wrap .mbr-name {
        margin-bottom: 16px;
      }

      .cid-uSSQs9oKO3 .content-wrapper .content-wrap .mbr-desc {
        margin-bottom: 16px;
      }

      .cid-uSSQs9oKO3 .mbr-section-title {
        color: #ffffff;
      }

      .cid-uSSQs9oKO3 .mbr-desc {
        color: #ffffff;
        /* Asegura que el texto sea legible */
        text-align: center;
      }

      .cid-uSSQs9oKO3 .mbr-text,
      .cid-uSSQs9oKO3 .text-wrap {
        color: #ffffff;
        text-align: center;
      }

      .cid-uSSQs9oKO3 .mbr-name {
        color: #ffffff;
        text-align: center;
      }

      .cid-uSSQs9oKO3 .mbr-role {
        color: #ffffff;
        text-align: center;
      }

      .cid-uSSQs9oKO3 .mbr-section-title,
      .cid-uSSQs9oKO3 .mbr-section-btn,
      .cid-uSSQs9oKO3 .icon-wrapper {
        text-align: center;
        color: #ffffff;
      }

      /* Estilos para el resaltado de "Uber Eats" */
      .cid-uSSQs9oKO3 .rappi-highlight {
        color: #06c167;
        font-weight: bold;
        text-transform: uppercase;
      }

      /* Estilo del botón principal de Uber Eats - Sin bordes como pediste */
      .cid-uSSQs9oKO3 .btn-rappi {
        background-color: #06c167;
        color: #ffffff;
        border: none;
        /* Quitamos el borde */
        padding: 12px 24px;
        border-radius: 25px;
        transition: all 0.3s ease-in-out;
        margin-right: 10px;
        box-shadow: 0 4px 10px rgba(6, 193, 103, 0.4);
        /* Sombra para que se vea más bonito */
      }

      .cid-uSSQs9oKO3 .btn-rappi:hover {
        background-color: #05a057;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(6, 193, 103, 0.6);
        /* Sombra más pronunciada en hover */
      }

      /* Estilo del botón secundario - Sin bordes como pediste */
      .cid-uSSQs9oKO3 .btn-white {
        background-color: #ffffff;
        color: #000000;
        border: none;
        /* Quitamos el borde */
        padding: 12px 24px;
        border-radius: 25px;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .cid-uSSQs9oKO3 .btn-white:hover {
        background-color: #f0f0f0;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
      }
    </style>

    <section data-bs-version="5.1" class="article01 immersem5 cid-uSSQs9oKO3" id="call-to-action-1-uSSQs9oKO3">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="content-wrapper">
              <div class="image-wrap">
                <img alt="Uber Eats" src="views/imgs/UBER1.jpg">
              </div>
              <div class="title-wrapper">
                <p class="mbr-desc mbr-fonts-style display-4">Tu Comida Favorita a un Clic, Buscanos en </p>
                <h1 class="mbr-section-title mbr-fonts-style display-1">
                  <strong>UBER EATS</strong>
                </h1>
              </div>
              <div class="content-wrap">
                <a href="#" class="icon-wrapper">
                  <span class="mbr-iconfont mobi-mbri-search mobi-mbri"></span>
                </a>
                <p class="mbr-name mbr-fonts-style display-7">
                  <strong>Auténtico Sabor Mexicano</strong>
                </p>
                <p class="mbr-role mbr-fonts-style display-4">
                  ¡Disfruta de tacos irresistibles y encuentra tu antojo en
                  <span class="rappi-highlight">Uber Eats</span> ahora mismo!
                </p>
                <div class="mbr-section-btn">
                  <a class="btn btn-rappi display-4" href="https://www.ubereats.com/mx/store/taqueria-el-mexicano-chilpancingo-de-los-bravo/LPeFELe-WfOZqk7NkpXbzA?diningMode=DELIVERY&ps=1&sc=SEARCH_SUGGESTION">¡Pide en Uber Eats!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <style>
      .cid-uSSQs9o6Rj {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9o6Rj .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9o6Rj .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9o6Rj .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9o6Rj .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o6Rj .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9o6Rj .content-wrapper {
        padding: 60px;
        background-color: #f3f6f9;
        border-radius: 20px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o6Rj .content-wrapper {
          padding: 46px 20px 46px;
        }
      }

      .cid-uSSQs9o6Rj .content-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9o6Rj .content-wrapper .title-wrapper {
        text-align: center;
        display: flex;
        justify-content: center;
      }

      .cid-uSSQs9o6Rj .content-wrapper .title-wrapper .mbr-section-title {
        width: 50%;
        margin-bottom: 20px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o6Rj .content-wrapper .title-wrapper .mbr-section-title {
          width: 100%;
        }
      }

      .cid-uSSQs9o6Rj .content-wrapper .items-wrapper {
        margin-top: 60px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o6Rj .content-wrapper .items-wrapper {
          margin-top: 46px;
        }
      }

      .cid-uSSQs9o6Rj .content-wrapper .items-wrapper .item {
        margin-bottom: 32px;
      }

      .cid-uSSQs9o6Rj .content-wrapper .items-wrapper .item .item-wrapper .card-box .card-desc {
        margin-bottom: 20px;
      }

      .cid-uSSQs9o6Rj .content-wrapper .items-wrapper .item .item-wrapper .card-box .title-wrap {
        display: flex;
        justify-content: center;
      }

      .cid-uSSQs9o6Rj .content-wrapper .items-wrapper .item .item-wrapper .card-box .title-wrap .card-title {
        max-width: 50%;
        margin-bottom: 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o6Rj .content-wrapper .items-wrapper .item .item-wrapper .card-box .title-wrap .card-title {
          width: 100%;
        }
      }

      .cid-uSSQs9o6Rj .mbr-section-title {
        color: #000000;
      }

      .cid-uSSQs9o6Rj .mbr-desc {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9o6Rj .card-desc {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9o6Rj .card-title,
      .cid-uSSQs9o6Rj .title-wrap {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9o6Rj .mbr-section-title,
      .cid-uSSQs9o6Rj .mbr-section-btn,
      .cid-uSSQs9o6Rj .title-wrapper {
        text-align: center;
      }
    </style>

    <style>
      .cid-uSSQs9oWlE {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9oWlE .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oWlE .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oWlE .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9oWlE .row {
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oWlE .row {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9oWlE .content-wrapper {
        padding: 0 86px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oWlE .content-wrapper {
          padding: 0;
        }
      }

      .cid-uSSQs9oWlE .content-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9oWlE .content-wrapper .mbr-section-title {
        margin-bottom: 0;
      }

      .cid-uSSQs9oWlE .content-wrapper .mbr-section-btn-main {
        margin-top: 25px;
      }

      .cid-uSSQs9oWlE .embla__slide {
        position: relative;
        min-width: 100% !important;
        /* FORZAR que cada slide ocupe el 100% del viewport */
        flex: 0 0 100%;
        /* No permitir que se expanda o contraiga */
        margin: 0 !important;
        /* Eliminar márgenes que rompen el layout */
      }

      @media (max-width: 767px) {
        .cid-uSSQs9oWlE .embla__slide {
          min-width: 100%;
          max-width: 100%;
          padding: 0 5px;
        }
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 60px 40px 40px;
        border-radius: 20px !important;
        background-color: #f3f6f9;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oWlE .embla__slide .slide-content {
          padding: 60px 20px 40px;
        }
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-img {
        display: flex;
        justify-content: center;
        margin-bottom: 32px;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-img img {
        width: 134px;
        height: 134px;
        border-radius: 100% !important;
        object-fit: cover;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-content {
        z-index: 1;
        position: relative;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-content .item-name {
        margin-bottom: 20px;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-content .item-role {
        margin-bottom: 25px;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-content .tags-wrapper .list {
        display: inline-flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-content .tags-wrapper .list .item-wrap {
        margin-right: 10px;
        margin-bottom: 0;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .item-wrapper .item-content .tags-wrapper .list .item-wrap:last-child {
        margin-right: 0;
      }

      .cid-uSSQs9oWlE .embla__slide .slide-content .mbr-section-btn {
        z-index: 1;
        position: relative;
        margin-top: 20px;
      }

      .cid-uSSQs9oWlE .embla__button--next,
      .cid-uSSQs9oWlE .embla__button--prev {
        display: flex;
      }

      .cid-uSSQs9oWlE .embla__button {
        top: -24px;
        width: 48px;
        height: 48px;
        margin-top: -1.5rem;
        font-size: 18px;
        background-color: transparent !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
        border-radius: 50%;
        transition: all 0.3s;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: .6 !important;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oWlE .embla__button {
          top: 2.5rem;
        }
      }

      .cid-uSSQs9oWlE .embla__button:disabled {
        cursor: default;
        display: none;
      }

      .cid-uSSQs9oWlE .embla__button:hover {
        opacity: 1 !important;
      }

      .cid-uSSQs9oWlE .embla__button.embla__button--prev {
        left: 30px;
      }

      .cid-uSSQs9oWlE .embla__button.embla__button--next {
        right: 30px;
      }

      .cid-uSSQs9oWlE .embla {
        position: relative;
        width: 100%;
        padding-top: 60px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oWlE .embla {
          padding-top: 100px;
        }
      }

      .cid-uSSQs9oWlE .embla__viewport {
        overflow: hidden;
        width: 100%;
        margin-right: 1rem;
      }

      .cid-uSSQs9oWlE .embla__viewport.is-draggable {
        cursor: grab;
      }

      .cid-uSSQs9oWlE .embla__viewport.is-dragging {
        cursor: grabbing;
      }

      .cid-uSSQs9oWlE .embla__container {
        display: flex;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

      .cid-uSSQs9oWlE .mbr-desc {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9oWlE .mbr-section-title {
        color: #000000;
      }

      .cid-uSSQs9oWlE .item-name {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9oWlE .item-role {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9oWlE .list,
      .cid-uSSQs9oWlE .tags-wrapper {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9oWlE .mbr-section-title,
      .cid-uSSQs9oWlE .mbr-section-btn-main {
        text-align: center;
      }

      .cid-uSSQs9oWlE .item-name,
      .cid-uSSQs9oWlE .mbr-section-btn {
        text-align: center;
      }
    </style>



    <style>
      .cid-uSSQs9osrI {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9osrI .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9osrI .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9osrI .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9osrI .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9osrI .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9osrI .content-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 64px 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9osrI .content-wrapper {
          padding: 46px 20px;
        }
      }

      .cid-uSSQs9osrI .content-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px !important;
        object-fit: cover;
        animation: none;
      }

      .cid-uSSQs9osrI .content-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        border-radius: 20px !important;
        background-color: var(--dominant-color, #000000);
        opacity: 0.6;
      }

      .cid-uSSQs9osrI .content-wrapper .title-wrapper {
        position: relative;
        z-index: 1;
        margin-bottom: 250px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9osrI .content-wrapper .title-wrapper {
          margin-bottom: 150px;
        }
      }

      @media (max-width: 768px) {
        .cid-uSSQs9osrI .content-wrapper .title-wrapper {
          margin-bottom: 46px;
        }
      }

      .cid-uSSQs9osrI .content-wrapper .title-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9osrI .content-wrapper .title-wrapper .mbr-section-title {
        margin-bottom: 0;
      }

      .cid-uSSQs9osrI .content-wrapper .content-wrap {
        position: relative;
        z-index: 1;
      }

      .cid-uSSQs9osrI .content-wrapper .content-wrap .icon-wrapper {
        display: block;
        margin-bottom: 108px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9osrI .content-wrapper .content-wrap .icon-wrapper {
          margin-bottom: 32px;
        }
      }

      .cid-uSSQs9osrI .content-wrapper .content-wrap .icon-wrapper:hover .mbr-iconfont,
      .cid-uSSQs9osrI .content-wrapper .content-wrap .icon-wrapper:focus .mbr-iconfont {
        color: #ffffff;
        background-color: #000000;
      }

      .cid-uSSQs9osrI .content-wrapper .content-wrap .icon-wrapper .mbr-iconfont {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #000000;
        background-color: #ffffff;
        border-radius: 100%;
        transition: all 0.3s ease-in-out;
      }

      .cid-uSSQs9osrI .content-wrapper .content-wrap .mbr-name {
        margin-bottom: 16px;
      }

      .cid-uSSQs9osrI .content-wrapper .content-wrap .mbr-desc {
        margin-bottom: 16px;
      }

      .cid-uSSQs9osrI .mbr-section-title {
        color: #ffffff;
      }

      .cid-uSSQs9osrI .mbr-desc {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9osrI .mbr-text,
      .cid-uSSQs9osrI .text-wrap {
        color: #ffffff;
        text-align: center;
      }

      .cid-uSSQs9osrI .mbr-name {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9osrI .mbr-role {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9osrI .mbr-section-title,
      .cid-uSSQs9osrI .mbr-section-btn,
      .cid-uSSQs9osrI .icon-wrapper {
        text-align: center;
        color: var(--dominant-text, #ffffff);
      }

      .cid-uSSQs9osrI .rappi-highlight {
        color: #ff4c4c;
        font-weight: bold;
        text-transform: uppercase;
      }

      .cid-uSSQs9osrI .btn-rappi {
        background-color: #ff4c4c;
        color: #ffffff;
        border: none;
        padding: 12px 24px;
        border-radius: 25px;
        transition: all 0.3s ease-in-out;
        margin-right: 10px;
      }

      .cid-uSSQs9osrI .btn-rappi:hover {
        background-color: #e63939;
        transform: scale(1.05);
      }

      .cid-uSSQs9osrI .btn-white {
        background-color: #ffffff;
        color: #000000;
        border: none;
        padding: 12px 24px;
        border-radius: 25px;
        transition: all 0.3s ease-in-out;
      }

      .cid-uSSQs9osrI .btn-white:hover {
        background-color: #f0f0f0;
        transform: scale(1.05);
      }
    </style>

    <section class="header01 immersem5 cid-uSSQs9osrI" id="hero-4-uSSQs9osrI">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="content-wrapper">
              <div class="image-wrap">
                <img alt="Mexican Food" src="views/imgs/rappi.png">
              </div>
              <div class="title-wrapper">
                <p class="mbr-desc mbr-fonts-style display-4">Tu Comida Favorita a un Clic, Buscanos en</p>
                <h1 class="mbr-section-title mbr-fonts-style display-1">
                  <strong>RAPPI</strong>
                </h1>
              </div>
              <div class="content-wrap">
                <a href="#" class="icon-wrapper">
                  <span class="mbr-iconfont mobi-mbri-search mobi-mbri"></span>
                </a>
                <p class="mbr-name mbr-fonts-style display-7">
                  <strong>Auténtico Sabor Mexicano</strong>
                </p>
                <p class="mbr-role mbr-fonts-style display-4">¡Disfruta de tacos irresistibles y encuentra tu antojo en
                  <span class="rappi-highlight">Rappi</span> ahora mismo!
                </p>
                <div class="mbr-section-btn">
                  <a class="btn btn-rappi display-4" href="https://www.rappi.com">¡Pide en Rappi!</a>
                  <a class="btn btn-white display-4" href="views/menu.php">Ver Menú</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <style>
      .cid-uSSQs9o8Nw {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9o8Nw .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9o8Nw .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9o8Nw .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9o8Nw .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o8Nw .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9o8Nw .row {
        margin: 0;
        justify-content: center;
        padding: 60px;
        background-color: var(--dominant-color, #3454ff);
        border-radius: 20px !important;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o8Nw .row {
          padding: 46px 10px 46px;
        }
      }

      .cid-uSSQs9o8Nw .content-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9o8Nw .content-wrapper .mbr-section-title {
        margin-bottom: 32px;
      }

      .cid-uSSQs9o8Nw .item {
        padding: 0 10px;
        margin-bottom: 20px;
      }

      .cid-uSSQs9o8Nw .item:first-child {
        margin-bottom: 0;
      }

      .cid-uSSQs9o8Nw .item:last-child {
        margin-bottom: 0;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img {
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 600px;
        padding: 32px 20px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9o8Nw .item .item-wrapper .item-img {
          min-height: 400px;
        }
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px !important;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content {
        width: 100%;
        position: relative;
        z-index: 1;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content .card-title {
        margin-bottom: 20px;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content .card-name {
        margin-bottom: 5px;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content .card-role {
        margin-bottom: 0;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content .icon-wrapper {
        display: block;
        margin-top: 20px;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content .icon-wrapper:hover .mbr-iconfont,
      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content .icon-wrapper:focus .mbr-iconfont {
        color: #ffffff;
        background-color: #000000;
      }

      .cid-uSSQs9o8Nw .item .item-wrapper .item-img .item-content .icon-wrapper .mbr-iconfont {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #000000;
        background-color: #ffffff;
        border-radius: 100%;
        transition: all 0.3s ease-in-out;
      }

      .cid-uSSQs9o8Nw .mbr-section-btn {
        margin-top: 40px;
      }

      .cid-uSSQs9o8Nw .mbr-section-title {
        color: #ffffff;
      }

      .cid-uSSQs9o8Nw .mbr-desc {
        color: var(--dominant-text, #ffffff);
        text-align: center;
      }

      .cid-uSSQs9o8Nw .card-title {
        color: #ffffff;
      }

      .cid-uSSQs9o8Nw .card-name {
        color: #ffffff;
        text-align: center;
      }

      .cid-uSSQs9o8Nw .card-role {
        color: #ffffff;
        text-align: center;
      }

      .cid-uSSQs9o8Nw .mbr-section-title,
      .cid-uSSQs9o8Nw .mbr-section-btn {
        text-align: center;
        color: var(--dominant-text);
      }

      .cid-uSSQs9o8Nw .card-title,
      .cid-uSSQs9o8Nw .icon-wrapper {
        text-align: center;
      }
    </style>

    <style>
      .cid-uSSQs9oATY {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9oATY .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9oATY .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9oATY .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9oATY .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oATY .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9oATY .content-wrapper {
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oATY .content-wrapper {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9oATY .content-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9oATY .content-wrapper .mbr-section-title {
        margin-bottom: 32px;
      }

      .cid-uSSQs9oATY .content-wrapper .text-wrapper .mbr-text {
        display: inline-flex;
        width: 40%;
        margin-bottom: 40px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oATY .content-wrapper .text-wrapper .mbr-text {
          margin-bottom: 20px;
          width: 100%;
        }
      }

      .cid-uSSQs9oATY .content-wrapper .image-wrapper img {
        display: inline-flex;
        width: 50%;
        border-radius: 20px !important;
        object-fit: cover;
        height: 280px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oATY .content-wrapper .image-wrapper img {
          width: 100%;
        }
      }

      .cid-uSSQs9oATY .content-wrapper .mbr-section-btn {
        margin-top: 60px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9oATY .content-wrapper .mbr-section-btn {
          margin-top: 20px;
        }
      }

      .cid-uSSQs9oATY .mbr-section-title {
        color: #000000;
      }

      .cid-uSSQs9oATY .mbr-desc {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9oATY .mbr-text,
      .cid-uSSQs9oATY .text-wrapper {
        color: #000000;
        text-align: center;
        display: flex;
        justify-content: center;
      }

      .cid-uSSQs9oATY .mbr-section-title,
      .cid-uSSQs9oATY .mbr-section-btn,
      .cid-uSSQs9oATY .image-wrapper {
        text-align: center;
      }
    </style>

    <style>
      .cid-uSSQs9pwBM {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9pwBM .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9pwBM .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9pwBM .row {
        justify-content: center;
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .row {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9pwBM .item {
        margin-bottom: 32px;
      }

      .cid-uSSQs9pwBM .item .item-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 20px !important;
        background-color: #f3f6f9;
        overflow: hidden;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-img img {
        height: 340px;
        border-radius: 0 !important;
        object-fit: cover;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-img img {
          height: 300px;
        }
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content {
        padding: 32px;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-content {
          padding: 32px 20px;
        }
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc {
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc {
          display: block;
          margin-bottom: 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc .icon-wrapper {
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc .icon-wrapper .mbr-iconfont {
        font-size: 54px;
        color: #999c9f;
        margin-right: 32px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc .icon-wrapper .mbr-iconfont {
          margin-right: 0;
        }
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc .list {
        display: inline-flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc .list {
          justify-content: flex-start;
        }
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc .list .item-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        border-radius: 30px;
        margin-right: 10px;
        margin-bottom: 5px;
        padding: 12px 16px;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .item-desc .list .item-wrap:last-child {
        margin-right: 0;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper {
          display: block;
        }
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .title-wrap {
        width: 60%;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .title-wrap {
          margin-bottom: 20px;
          width: 100%;
        }
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .title-wrap .item-title {
        margin-bottom: 8px;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .title-wrap .item-text {
        margin-bottom: 0;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .social-wrapper {
        display: flex;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a {
        display: block;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a:hover .mbr-iconfont,
      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a:hover .mbr-iconfont {
        color: #000000;
        background-color: #ffffff;
      }

      .cid-uSSQs9pwBM .item .item-wrapper .item-content .title-wrapper .social-wrapper .soc-item a .mbr-iconfont {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 100%;
        background-color: #000000;
        color: #ffffff;
        font-size: 18px;
        transition: all 0.3s ease-in-out;
        margin-right: 10px;
      }

      .cid-uSSQs9pwBM .item-title {
        color: #000000;
      }

      .cid-uSSQs9pwBM .item-text {
        color: #000000;
      }

      .cid-uSSQs9pwBM .list {
        color: #000000;
      }
    </style>



    <style>
      .cid-uSSQs9ptjA {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9ptjA .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9ptjA .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9ptjA .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9ptjA .content-wrapper {
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9ptjA .content-wrapper {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9ptjA .content-wrapper .content-wrap {
        margin-bottom: 80px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9ptjA .content-wrapper .content-wrap {
          margin-bottom: 46px;
        }
      }

      .cid-uSSQs9ptjA .content-wrapper .content-wrap .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9ptjA .content-wrapper .content-wrap .mbr-section-title {
        margin-bottom: 0;
      }

      .cid-uSSQs9ptjA .mbr-section-title {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9ptjA .mbr-desc {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9ptjA .google-map {
        height: 30rem;
        border-radius: 20px;
        position: relative;
      }

      .cid-uSSQs9ptjA .google-map iframe {
        height: 100%;
        width: 100%;
      }

      .cid-uSSQs9ptjA .google-map [data-state-details] {
        color: #6b6763;
        height: 1.5em;
        margin-top: -0.75em;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 100%;
      }

      .cid-uSSQs9ptjA .google-map[data-state] {
        background: #e9e5dc;
      }

      .cid-uSSQs9ptjA .google-map[data-state="loading"] [data-state-details] {
        display: none;
      }

      .cid-uSSQs9ptjA iframe {
        border-radius: 20px !important;
      }
    </style>

    <section data-bs-version="5.1" class="list03 immersem5 cid-uSSQs9noeR" id="faq-1-uSSQs9noeR">





      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="content-wrapper">
              <div class="content-wrap">
                <p class="mbr-desc mbr-fonts-style display-4">Preguntas Frecuentes</p>
                <h2 class="mbr-section-title mbr-fonts-style display-2">
                  <strong>¿Tienes Dudas?</strong>
                </h2>
              </div>
              <div id="bootstrap-accordion_20" class="panel-group accordionStyles accordion" role="tablist"
                aria-multiselectable="true">
                <div class="card">
                  <div class="card-header" role="tab" id="headingOne">
                    <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse"
                      data-core="" href="#collapse1_20" aria-expanded="false" aria-controls="collapse1">
                      <h4 class="panel-title-edit mbr-fonts-style display-5">
                        <strong>¿Cuál es su horario de atención?</strong>
                      </h4>
                      <span class="sign mbr-iconfont mobi-mbri-plus mobi-mbri"></span>
                    </a>
                  </div>
                  <div id="collapse1_20" class="panel-collapse noScroll collapse" role="tabpanel"
                    aria-labelledby="headingOne" data-parent="#accordion" data-bs-parent="#bootstrap-accordion_20">
                    <div class="panel-body">
                      <p class="mbr-fonts-style panel-text display-4"> Abrimos todos los dias, de 4:00 PM a 2:00 AM. ¡Te esperamos para disfrutar de un auténtico sabor mexicano!</p>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" role="tab" id="headingTwo">
                    <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse"
                      data-core="" href="#collapse2_20" aria-expanded="false" aria-controls="collapse2">
                      <h4 class="panel-title-edit mbr-fonts-style display-5">
                        <strong>¿Qué tipo de carnes ofrecen?</strong>
                      </h4>
                      <span class="sign mbr-iconfont mobi-mbri-plus mobi-mbri"></span>
                    </a>
                  </div>
                  <div id="collapse2_20" class="panel-collapse noScroll collapse" role="tabpanel"
                    aria-labelledby="headingTwo" data-parent="#accordion" data-bs-parent="#bootstrap-accordion_20">
                    <div class="panel-body">
                      <p class="mbr-fonts-style panel-text display-4">Tenemos una variedad para todos los gustos. ¡Pregunta por nuestros platillos especiales!</p>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" role="tab" id="headingThree">
                    <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse"
                      data-core="" href="#collapse3_20" aria-expanded="false" aria-controls="collapse3">
                      <h4 class="panel-title-edit mbr-fonts-style display-5">
                        <strong>¿Puedo pedir para llevar?</strong>
                      </h4>
                      <span class="sign mbr-iconfont mobi-mbri-plus mobi-mbri"></span>
                    </a>
                  </div>
                  <div id="collapse3_20" class="panel-collapse noScroll collapse" role="tabpanel"
                    aria-labelledby="headingThree" data-parent="#accordion" data-bs-parent="#bootstrap-accordion_20">
                    <div class="panel-body">
                      <p class="mbr-fonts-style panel-text display-4">¡Claro que sí! Puedes hacer tu pedido aqui para recoger en sucursal o nosotros te lo llevamos, tambien contamos con uber eats o rappi.</p>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" role="tab" id="headingFour">
                    <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse"
                      data-core="" href="#collapse4_20" aria-expanded="false" aria-controls="collapse4">
                      <h4 class="panel-title-edit mbr-fonts-style display-5">
                        <strong>¿Qué bebidas tienen?</strong>
                      </h4>
                      <span class="sign mbr-iconfont mobi-mbri-plus mobi-mbri"></span>
                    </a>
                  </div>
                  <div id="collapse4_20" class="panel-collapse noScroll collapse" role="tabpanel"
                    aria-labelledby="headingFour" data-parent="#accordion" data-bs-parent="#bootstrap-accordion_20">
                    <div class="panel-body">
                      <p class="mbr-fonts-style panel-text display-4"> Ofrecemos refrescos tradicionales, aguas frescas del día como horchata y jamaica, y más.</p>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <style>
      .cid-uSSQs9pDfN {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9pDfN .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9pDfN .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9pDfN .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9pDfN .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pDfN .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9pDfN .content-wrapper {
        padding: 60px;
        background-color: #f3f6f9;
        border-radius: 20px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pDfN .content-wrapper {
          padding: 46px 20px 46px;
        }
      }

      .cid-uSSQs9pDfN .content-wrapper .mbr-desc {
        margin-bottom: 32px;
      }

      .cid-uSSQs9pDfN .content-wrapper .mbr-section-title {
        margin-bottom: 32px;
      }

      .cid-uSSQs9pDfN .content-wrapper .text-wrapper .mbr-text {
        display: inline-flex;
        justify-content: center;
        width: 40%;
        margin-bottom: 40px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pDfN .content-wrapper .text-wrapper .mbr-text {
          width: 100%;
          margin-bottom: 20px;
        }
      }

      .cid-uSSQs9pDfN .content-wrapper .items-wrapper .items-wrap {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
      }

      .cid-uSSQs9pDfN .content-wrapper .items-wrapper .items-wrap .item .item-wrapper .item-img {
        display: flex;
        justify-content: center;
        padding: 0 10px;
      }

      .cid-uSSQs9pDfN .content-wrapper .items-wrapper .items-wrap .item .item-wrapper .item-img img {
        height: 150px;
        object-fit: contain;
        border-radius: 0 !important;
      }

      .cid-uSSQs9pDfN .content-wrapper .mbr-section-btn {
        margin-top: 40px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pDfN .content-wrapper .mbr-section-btn {
          margin-top: 20px;
        }
      }

      .cid-uSSQs9pDfN .mbr-section-title {
        color: #000000;
      }

      .cid-uSSQs9pDfN .mbr-desc {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9pDfN .mbr-text,
      .cid-uSSQs9pDfN .text-wrapper {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9pDfN .card-title {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9pDfN .mbr-section-title,
      .cid-uSSQs9pDfN .mbr-section-btn,
      .cid-uSSQs9pDfN .items-wrapper {
        text-align: center;
      }
    </style>

    <style>
      .cid-uSSQs9pg6Y {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9pg6Y .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9pg6Y .container-fluid {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9pg6Y .row {
        justify-content: center;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pg6Y .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9pg6Y .content-wrapper {
        padding: 60px 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pg6Y .content-wrapper {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9pg6Y .dragArea.row {
        position: relative;
        z-index: 1;
      }

      .cid-uSSQs9pg6Y .dragArea.row .mbr-section-title {
        margin-bottom: 32px !important;
      }

      .cid-uSSQs9pg6Y .dragArea.row .mbr-text {
        margin-bottom: 60px !important;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pg6Y .dragArea.row .mbr-text {
          margin-bottom: 46px !important;
        }
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group {
        margin-bottom: 46px !important;
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group .form-control-label {
        width: 100%;
        margin-bottom: 16px;
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group .form-control {
        padding: 0 0 8px 0;
        border: none !important;
        border-bottom: 1px solid #dcdde0 !important;
        box-shadow: none;
        border-radius: 0 !important;
        background-color: transparent;
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group .form-control:hover,
      .cid-uSSQs9pg6Y .dragArea.row .form-group .form-control:focus {
        border: none !important;
        border-bottom: 1px solid #000000 !important;
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group .form-control::placeholder {
        color: #dcdde0;
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group textarea {
        min-height: 150px;
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group .form-check {
        padding-left: 1.9em;
        margin-bottom: 16px;
      }

      .cid-uSSQs9pg6Y .dragArea.row .form-group .form-check .form-check-input {
        background-color: #000000;
        border-color: #000000;
        border-radius: 0;
      }

      .cid-uSSQs9pg6Y .dragArea.row .mbr-section-btn {
        width: 100%;
      }

      .cid-uSSQs9pg6Y .mbr-section-title {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9pg6Y .mbr-text {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9pg6Y .mbr-text,
      .cid-uSSQs9pg6Y .text-wrapper {
        color: #000000;
        text-align: center;
      }

      .cid-uSSQs9pg6Y label {
        color: #000000;
      }

      .cid-uSSQs9pg6Y .mbr-section-btn {
        text-align: center;
      }
    </style>


    <style>
      .cid-uSSQs9pOyA {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #ffffff;
      }

      .cid-uSSQs9pOyA .mbr-fallback-image.disabled {
        display: none;
      }

      .cid-uSSQs9pOyA .mbr-fallback-image {
        display: block;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .cid-uSSQs9pOyA .container-fluid {
        padding: 0 30px;
      }

      @media (max-width: 768px) {
        .cid-uSSQs9pOyA .container-fluid {
          padding: 0 20px;
        }
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pOyA .container {
          padding: 0 20px;
        }
      }

      .cid-uSSQs9pOyA .content-wrapper .mbr-section-title {
        padding: 60px 0;
        margin-bottom: 0;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pOyA .content-wrapper .mbr-section-title {
          padding: 46px 0;
        }
      }

      .cid-uSSQs9pOyA .content-wrapper .items-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
        width: 100%;
      }

      .cid-uSSQs9pOyA .content-wrapper .items-wrapper .item {
        padding: 20px 24px;
        border-radius: 20px !important;
        background-color: #f3f6f9;
        flex-grow: 1;
        width: 260px;
      }

      @media (max-width: 992px) {
        .cid-uSSQs9pOyA .content-wrapper .items-wrapper .item {
          padding: 20px;
        }
      }

      .cid-uSSQs9pOyA .content-wrapper .items-wrapper .item .item-wrapper {
        height: 100%;
      }

      .cid-uSSQs9pOyA .content-wrapper .items-wrapper .item .item-wrapper .card-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }

      .cid-uSSQs9pOyA .content-wrapper .items-wrapper .item .item-wrapper .card-box .card-title {
        margin-bottom: 40px;
      }

      .cid-uSSQs9pOyA .content-wrapper .items-wrapper .item .item-wrapper .card-box .icon-wrapper .mbr-iconfont {
        font-size: 48px;
        color: #000000;
        display: inline-flex;
      }

      .cid-uSSQs9pOyA .mbr-section-title {
        color: #000000;
      }

      .cid-uSSQs9pOyA .card-number {
        color: #000000;
      }

      .cid-uSSQs9pOyA .card-title {
        color: #000000;
      }

      .cid-uSSQs9pOyA .mbr-section-title,
      .cid-uSSQs9pOyA .mbr-section-btn {
        text-align: center;
      }
    </style>


    </head>

    <body>


      <style>
        /* Importa la fuente Inter */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

        /* Estilos de la sección del footer */
        .cid-uSSQs9puSh {
          padding-top: 4rem;
          padding-bottom: 2rem;
          background-color: #B92117;
          /* Fondo rojo para combinar con la estética de Taquería El Mexicano */
          color: #ffffff;
          font-family: 'Inter', sans-serif;
        }

        /* Contenedor principal para el diseño responsivo */
        .cid-uSSQs9puSh .container-fluid {
          padding: 0 4rem;
        }

        /* Estilos para el título y la dirección */
        .cid-uSSQs9puSh .title-wrapper {
          margin-bottom: 2rem;
          text-align: center;
        }

        @media (min-width: 992px) {
          .cid-uSSQs9puSh .title-wrapper {
            text-align: left;
          }
        }

        .cid-uSSQs9puSh .title-wrapper .mbr-section-title {
          font-size: 1.5rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
          color: #fbd38d;
          /* Color de acento amarillo/dorado */
        }

        .cid-uSSQs9puSh .title-wrapper .mbr-address {
          font-size: 0.875rem;
          color: #ffffff;
          /* Color de dirección blanco */
        }

        /* Estilos de las listas de navegación y legal */
        .cid-uSSQs9puSh .list-wrapper {
          margin-bottom: 2rem;
          text-align: center;
        }

        @media (min-width: 992px) {
          .cid-uSSQs9puSh .list-wrapper {
            text-align: left;
          }
        }

        .cid-uSSQs9puSh .list-wrapper .mbr-list-title {
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 1rem;
          color: #fbd38d;
        }

        .cid-uSSQs9puSh .list-wrapper .list {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .cid-uSSQs9puSh .list-wrapper .list .item-wrap {
          font-size: 1rem;
          margin-bottom: 0.5rem;
          cursor: pointer;
          transition: color 0.3s ease;
        }

        .cid-uSSQs9puSh .list-wrapper .list .item-wrap:hover {
          color: #ffffff;
        }

        /* Estilos del mapa de Google */
        .cid-uSSQs9puSh .map-wrapper {
          margin-bottom: 2rem;
          text-align: center;
        }

        @media (min-width: 992px) {
          .cid-uSSQs9puSh .map-wrapper {
            text-align: left;
          }
        }

        .cid-uSSQs9puSh .map-wrapper .mbr-section-title {
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 1rem;
          color: #fbd38d;
        }

        .cid-uSSQs9puSh iframe {
          width: 100%;
          height: 250px;
          border: 0;
          border-radius: 10px;
          aspect-ratio: 16/9;
          /* Mejor relación de aspecto para móviles */
        }

        /* Estilos del copyright */
        .cid-uSSQs9puSh .copyright-wrapper {
          text-align: center;
          border-top: 1px solid #FFFFFF;
          /* Línea separadora blanca */
          padding-top: 1rem;
          margin-top: 2rem;
        }

        .cid-uSSQs9puSh .mbr-copy {
          font-size: 0.875rem;
          color: #FFFFFF;
          /* Color de copyright blanco */
        }

        /* Estilos para la sección de redes sociales */
        .cid-uSSQs9puSh .social-wrapper {
          margin-bottom: 2rem;
          text-align: center;
        }

        @media (min-width: 992px) {
          .cid-uSSQs9puSh .social-wrapper {
            text-align: left;
          }
        }

        .cid-uSSQs9puSh .social-wrapper .mbr-list-title {
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 1rem;
          color: #fbd38d;
        }

        .cid-uSSQs9puSh .social-wrapper .social-icons-list {
          display: flex;
          justify-content: center;
          gap: 1.5rem;
          list-style: none;
          padding: 0;
          margin: 0;
        }

        @media (min-width: 992px) {
          .cid-uSSQs9puSh .social-wrapper .social-icons-list {
            justify-content: flex-start;
          }
        }

        .cid-uSSQs9puSh .social-wrapper .social-icon-item a {
          color: #a0aec0;
          transition: color 0.3s ease;
        }

        .cid-uSSQs9puSh .social-wrapper .social-icon-item a:hover {
          color: #ffffff;
        }

        .cid-uSSQs9puSh .social-wrapper .social-icon-item svg {
          width: 24px;
          height: 24px;
        }

        /* Estilos para el Footer */
        .footer01 {
          background: linear-gradient(135deg, #e34c3e, #f9a825);
          /* Degradado de color */
          color: #fff;
          padding: 60px 0;
          box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
          font-family: 'Arial', sans-serif;
          /* Fuente más legible */
        }

        .footer01 .title-wrapper h2,
        .footer01 .list-wrapper h3,
        .footer01 .social-wrapper h3,
        .footer01 .map-wrapper h3 {
          color: #fff;
          font-weight: bold;
          letter-spacing: 1px;
          /* Espaciado de letras */
        }

        .footer01 .mbr-address,
        .footer01 .list-wrapper ul li,
        .footer01 .copyright-wrapper p {
          color: #f0f0f0;
          /* Color de letra más claro */
          line-height: 1.6;
          /* Mayor espaciado entre líneas */
        }

        /* Estilos para los iconos sociales */
        .social-icons-list .social-icon-item a svg {
          width: 30px;
          height: 30px;
          fill: #fff;
          transition: transform 0.3s ease;
        }

        .social-icons-list .social-icon-item a:hover svg {
          transform: scale(1.2);
          fill: #e34c3e;
          /* Nuevo color al pasar el cursor */
        }

        /* Estilos para el botón "Volver Arriba" */
        .back-to-top {
          position: fixed;
          bottom: 25px;
          right: 25px;
          display: none;
          /* Se oculta por defecto */
          width: 50px;
          height: 50px;
          background-color: #f9a825;
          color: #fff;
          text-align: center;
          line-height: 50px;
          border-radius: 50%;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          z-index: 999;
          transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .back-to-top:hover {
          background-color: #e34c3e;
          transform: scale(1.1);
        }

        @media (max-width: 768px) {
          .back-to-top {
            display: none !important;
          }
        }
      </style>





      </head>

      <body>
        <footer class="footer01 immersem5 cid-uSSQs9puSh" once="footers" id="footer-1-uSSQs9puSh">
          <div class="container-fluid">
            <div class="row g-8">

              <div class="col-12 col-lg-4">
                <div class="title-wrapper">
                  <h2 class="mbr-section-title mbr-fonts-style display-7">
                    <strong>Taquería El Mexicano - Frente al Aeropuerto</strong>
                  </h2>
                  <p class="mbr-address mbr-fonts-style display-4">
                    📍 Llano Grande 39001, Col. Zona Industrial, 39016 Chilpancingo de los Bravo, Gro.
                  </p>
                  <p class="mbr-address mbr-fonts-style display-4">
                    📞 <a href="tel:+527472603325" class="text-white">747-260-3325</a> </p>

                </div>
              </div>

              <div class="col-12 col-lg-2">
                <div class="list-wrapper">
                  <h3 class="mbr-list-title mbr-fonts-style display-7">
                    <strong>Navegación</strong>
                  </h3>
                  <ul class="list mbr-fonts-style display-4">
                    <li class="item-wrap"><a href="/" class="text-white">Inicio</a></li>
                    <li class="item-wrap"><a href="views/menu.php" class="text-white">Menú</a></li>
                    <li class="item-wrap"><a href="views/agendar.php" class="text-white">Paquetes para Eventos</a></li>
                  </ul>
                </div>
              </div>

              <div class="col-12 col-lg-3">
                <div class="list-wrapper">
                  <h3 class="mbr-list-title mbr-fonts-style display-7">
                    <strong>Horario de Atención</strong>
                  </h3>
                  <p class="mbr-address mbr-fonts-style display-4">
                    Lunes a Domingo<br>
                    4:00 PM - 2:00 AM
                  </p>
                </div>
                <div class="social-wrapper mt-4">
                  <h3 class="mbr-list-title mbr-fonts-style display-7">
                    <strong>Síguenos</strong>
                  </h3>
                  <ul class="social-icons-list">
                    <li class="social-icon-item">
                      <a href="https://www.facebook.com/profile.php?id=100064077631936" target="_blank" aria-label="Facebook">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                          <path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.256V279.676h-49.338v-51.524h49.338V185.71c0-48.441 29.832-74.965 72.825-74.965 20.738 0 38.583 1.551 43.615 2.246v48.271h-29.308c-22.189 0-26.657 10.828-26.657 26.248v33.913h54.722l-7.143 51.524h-47.579V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z" />
                        </svg>
                      </a>
                    </li>

                    <li class="social-icon-item">
                      <a href="https://wa.me/527472603325" target="_blank" aria-label="WhatsApp">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                          <path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.8 0-67.6-9.5-97.8-27.2l-4.9-3-72.2 18.9L76.6 386l-3.3-5.1c-19.1-29.1-29.6-63.3-29.6-98.5 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
                        </svg>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>

              <div class="col-12 col-lg-3">
                <div class="map-wrapper">
                  <h3 class="mbr-section-title mbr-fonts-style display-7">
                    <strong>Ubícanos</strong>
                  </h3>
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1940323.8139202213!2d-100.18666783747591!3d18.223936783604938!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85cbedf45637e39d%3A0xb7c394e6d0b7cd97!2sTaqueria%20El%20Mexicano!5e0!3m2!1ses-419!2smx!4v1755290034906!5m2!1ses-419!2smx" width="100%"
                    height="200"
                    style="border:0; border-radius:10px;"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                    title="Mapa de ubicación de Taquería El Mexicano en Chilpancingo">
                  </iframe>
                </div>
              </div>

              <div class="col-12">
                <div class="copyright-wrapper">
                  <p class="mbr-copy mbr-fonts-style display-4">
                    © 2025 Taquería El Mexicano. Todos los derechos reservados.
                  </p>
                  <p class="mbr-copy mbr-fonts-style display-4">
                    Desarrollado por <a href="https://desarrollowebchilpancingo.netlify.app" target="_blank" class="text-white">KŌDŌRA</a>.
                  </p>
                </div>
              </div>

            </div>
          </div>
        </footer>
        <a href="#top" id="btn-top" class="back-to-top">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
            <path d="M12 2L2 12h7v9h6v-9h7L12 2z" />
          </svg>
        </a>
        <script>
          document.addEventListener('DOMContentLoaded', function() {
            const btnTop = document.getElementById('btn-top');
            const rootElement = document.documentElement;

            function handleScroll() {
              if (rootElement.scrollTop > 300) {
                btnTop.style.display = 'block';
              } else {
                btnTop.style.display = 'none';
              }
            }

            function scrollToTop() {
              rootElement.scrollTo({
                top: 0,
                behavior: 'smooth'
              });
            }

            btnTop.addEventListener('click', scrollToTop);
            document.addEventListener('scroll', handleScroll);
          });
        </script>



        <script src="https://ai.mobirise.com/assets/immersem5/bootstrap/js/bootstrap.bundle.min.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/dropdown/js/navbar-dropdown.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/embla/embla.min.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/embla/script.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/scrollgallery/scroll-gallery.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/mbr-tabs/mbr-tabs.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/mbr-switch-arrow/mbr-switch-arrow.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/smoothscroll/smooth-scroll.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/ytplayer/index.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/immersem5/theme/js/script.js?v=m3frcrn2"></script>
        <script src="https://ai.mobirise.com/assets/preview.js"></script>


        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
        <script>
          (function() {
            var animationInput = document.createElement('input');
            animationInput.setAttribute('name', 'animation');
            animationInput.setAttribute('type', 'hidden');
            document.body.append(animationInput);
          })();
        </script>
      </body>

</html>