{"id":34,"date":"2025-12-21T11:11:48","date_gmt":"2025-12-21T16:11:48","guid":{"rendered":"https:\/\/www.dandre.com.co\/nuevo-diseno\/?page_id=34"},"modified":"2026-08-01T20:42:51","modified_gmt":"2026-08-02T01:42:51","slug":"brizy-34","status":"publish","type":"page","link":"https:\/\/www.dandre.com.co\/","title":{"rendered":"Brizy #34"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\n

<\/span><\/a>
<\/span><\/a>
<\/span><\/a><\/div>\n
\n
\n
\n


\n
\n Header – D’Andr\u00e9<\/title><\/p>\n<style>\n \/* Reset y estilos base *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n }<\/p>\n<p> \/* Header principal *\/\n .dandre-header {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n padding: 15px 5%;\n }<\/p>\n<p> .header-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1400px;\n margin: 0 auto;\n }<\/p>\n<p> \/* Logo *\/\n .logo-container {\n flex: 0 0 auto;\n }<\/p>\n<p> .logo-container a {\n display: block;\n }<\/p>\n<p> .logo-img {\n height: 50px;\n width: auto;\n max-width: 200px;\n }<\/p>\n<p> \/* Navegaci\u00f3n *\/\n .nav-container {\n display: flex;\n align-items: center;\n gap: 40px;\n }<\/p>\n<p> .nav-links {\n display: flex;\n list-style: none;\n gap: 30px;\n margin: 0;\n padding: 0;\n }<\/p>\n<p> .nav-link {\n text-decoration: none;\n color: #333;\n font-weight: 500;\n font-size: 16px;\n transition: color 0.3s ease;\n position: relative;\n padding: 5px 0;\n }<\/p>\n<p> .nav-link:hover {\n color: #1A3E5F;\n }<\/p>\n<p> .nav-link::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background-color: #1A3E5F;\n transition: width 0.3s ease;\n }<\/p>\n<p> .nav-link:hover::after {\n width: 100%;\n }<\/p>\n<p> \/* Bot\u00f3n Ver Men\u00fa - Color #1A3E5F *\/\n .menu-btn {\n background-color: #1A3E5F;\n color: white;\n border: none;\n padding: 12px 25px;\n border-radius: 30px;\n font-weight: 600;\n font-size: 15px;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n text-decoration: none;\n display: inline-block;\n }<\/p>\n<p> .menu-btn:hover {\n background-color: #0F2840;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(26, 62, 95, 0.3);\n }<\/p>\n<p> \/* Men\u00fa hamburguesa para m\u00f3viles *\/\n .menu-toggle {\n display: none;\n background: none;\n border: none;\n font-size: 24px;\n color: #333;\n cursor: pointer;\n padding: 5px;\n }<\/p>\n<p> \/* Responsive *\/\n @media (max-width: 768px) {\n .dandre-header {\n padding: 15px 20px;\n }<\/p>\n<p> .menu-toggle {\n display: block;\n }<\/p>\n<p> .nav-container {\n position: fixed;\n top: 80px;\n left: 0;\n width: 100%;\n background-color: white;\n flex-direction: column;\n padding: 20px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n gap: 20px;\n transform: translateY(-100%);\n opacity: 0;\n visibility: hidden;\n transition: all 0.4s ease;\n }<\/p>\n<p> .nav-container.active {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }<\/p>\n<p> .nav-links {\n flex-direction: column;\n align-items: center;\n gap: 20px;\n width: 100%;\n }<\/p>\n<p> .nav-link {\n font-size: 18px;\n padding: 10px 0;\n }<\/p>\n<p> .logo-img {\n height: 40px;\n }<\/p>\n<p> .menu-btn {\n padding: 12px 30px;\n width: 100%;\n max-width: 200px;\n }\n }\n <\/style>\n<p> <!-- Header --><\/p>\n<header class=\"dandre-header\">\n<div class=\"header-container\">\n <!-- Logo --><\/p>\n<div class=\"logo-container\">\n <!-- ENLACE MODIFICADO: Logo ahora apunta a la URL especificada --><br \/>\n <a href=\"https:\/\/www.dandre.com.co\/\" title=\"Inicio\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/logo.png\" alt=\"D'Andr\u00e9\" class=\"logo-img\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- Bot\u00f3n men\u00fa hamburguesa (solo m\u00f3viles) --><br \/>\n <button class=\"menu-toggle\" id=\"menuToggle\"><br \/>\n \u2630<br \/>\n <\/button><\/p>\n<p> <!-- Navegaci\u00f3n --><\/p>\n<nav class=\"nav-container\" id=\"navContainer\">\n<ul class=\"nav-links\">\n<li><a href=\"#seccion-reservas\" class=\"nav-link\">Reservar<\/a><\/li>\n<\/ul>\n<p> <!-- Bot\u00f3n Ver Men\u00fa con enlace al men\u00fa --><br \/>\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" class=\"menu-btn\" id=\"menuButton\" target=\"_blank\">Ver Men\u00fa<\/a><br \/>\n <\/nav>\n<\/p><\/div>\n<\/header>\n<p> <script>\n \/\/ Funcionalidad para men\u00fa m\u00f3vil\n const menuToggle = document.getElementById('menuToggle');\n const navContainer = document.getElementById('navContainer');<\/p>\n<p> \/\/ Alternar men\u00fa en m\u00f3viles\n menuToggle.addEventListener('click', () => {\n navContainer.classList.toggle('active');\n menuToggle.textContent = navContainer.classList.contains('active') ? '\u2715' : '\u2630';\n });<\/p>\n<p> \/\/ Cerrar men\u00fa al hacer clic en un enlace (m\u00f3viles)\n const navLinks = document.querySelectorAll('.nav-link');\n navLinks.forEach(link => {\n link.addEventListener('click', () => {\n if (window.innerWidth <= 768) {\n navContainer.classList.remove('active');\n menuToggle.textContent = '\u2630';\n }\n });\n });\n \n \/\/ Cerrar men\u00fa al redimensionar la ventana (si se pasa a desktop)\n window.addEventListener('resize', () => {\n if (window.innerWidth > 768) {\n navContainer.classList.remove('active');\n menuToggle.textContent = '\u2630';\n }\n });\n <\/script><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"xlmfw1YMQxCG_xlmfw1YMQxCG\" class=\"brz-section brz-css-d-ynf0il brz-css-fg180z\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-8e3cnb\" data-brz-custom-id=\"vCA2EMwdSDT6\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-1i2l8m2\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-1664zqt brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1l29pwb\" data-brz-custom-id=\"njdYR1k4Kqpq\">\n<div>\n<p> <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>Banner D’Andre Gourmet<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<style>\n \/* === VERSI\u00d3N ESCRITORIO - EXACTAMENTE IGUAL === *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n overflow-x: hidden;\n }<\/p>\n<p> .banner-container {\n width: 100vw;\n min-height: 100vh;\n \/* IMAGEN ORIGINAL PARA ESCRITORIO *\/\n background-image: url('https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Diseno-sin-titulo-48.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n background-attachment: fixed;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n text-align: center;\n padding: 20px;\n padding-bottom: 80px;\n }<\/p>\n<p> .banner-content {\n position: relative;\n z-index: 2;\n color: white;\n max-width: 800px;\n padding: 40px;\n margin: 0 20px;\n margin-bottom: 15px;\n \/* MODIFICADO: Texto m\u00e1s abajo, cerca de la flecha *\/\n margin-top: auto;\n margin-bottom: 70px; \/* Reducido de 100px a 70px para bajar el texto m\u00e1s *\/\n }<\/p>\n<p> .main-title {\n font-family: 'Poppins', sans-serif;\n font-weight: 700;\n font-size: 3rem;\n margin-bottom: 20px;\n line-height: 1.1;\n text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);\n }<\/p>\n<p> .title-line-1 {\n display: block;\n font-size: 3rem;\n margin-bottom: 5px;\n }<\/p>\n<p> .title-line-2 {\n display: block;\n font-size: 3rem;\n }<\/p>\n<p> .subtitle {\n font-family: 'Poppins', sans-serif;\n font-weight: 400;\n font-size: 1.2rem;\n margin-bottom: 35px;\n line-height: 1.6;\n max-width: 700px;\n text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);\n }<\/p>\n<p> .subtitle-line-1 {\n display: block;\n margin-bottom: 5px;\n }<\/p>\n<p> .subtitle-line-2 {\n display: block;\n }<\/p>\n<p> .menu-button {\n display: inline-block;\n background-color: white;\n color: #1A3E5F;\n font-family: 'Poppins', sans-serif;\n font-weight: 700;\n font-size: 1rem;\n padding: 14px 36px;\n border-radius: 50px;\n text-decoration: none;\n transition: all 0.3s ease;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n margin-bottom: 10px;\n }<\/p>\n<p> .menu-button:hover {\n background-color: #f8f8f8;\n transform: translateY(-5px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);\n }<\/p>\n<p> .down-arrow {\n position: absolute;\n bottom: 30px;\n z-index: 2;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n }<\/p>\n<p> .double-arrow {\n color: white;\n font-size: 2.2rem;\n animation: elegantBounce 2.5s infinite;\n transition: all 0.4s ease;\n opacity: 0.9;\n text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);\n }<\/p>\n<p> .double-arrow:hover {\n opacity: 1;\n transform: scale(1.15);\n }<\/p>\n<p> .arrow-line {\n width: 1px;\n height: 30px;\n background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0));\n margin-top: 8px;\n animation: lineFlow 2.5s infinite;\n }<\/p>\n<p> @keyframes elegantBounce {\n 0%, 20%, 50%, 80%, 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-8px);\n }\n 60% {\n transform: translateY(-4px);\n }\n }<\/p>\n<p> @keyframes lineFlow {\n 0% {\n height: 30px;\n opacity: 0.8;\n }\n 50% {\n height: 20px;\n opacity: 0.4;\n }\n 100% {\n height: 30px;\n opacity: 0.8;\n }\n }<\/p>\n<p> \/* === SOLO PARA M\u00d3VIL (\u2264768px) === *\/\n @media (max-width: 768px) {\n \/* IMAGEN PARA M\u00d3VIL - CUBRE TODO EL RECUADRO *\/\n .banner-container {\n \/* IMAGEN NUEVA PARA M\u00d3VIL *\/\n background-image: url('https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Diseno-sin-titulo-55.png') !important;<\/p>\n<p> width: 100vw;\n min-height: 100vh;<\/p>\n<p> \/* AJUSTE: Cubrir todo el recuadro sin espacios negros *\/\n background-size: cover !important; \/* Cambiado a cover para cubrir todo *\/\n background-position: center 40% !important; \/* Ajustado para enfocar mejor *\/\n background-attachment: scroll;\n background-repeat: no-repeat;<\/p>\n<p> \/* Ajuste de padding *\/\n padding: 0 !important;\n padding-bottom: 60px;<\/p>\n<p> \/* Asegurar que est\u00e9 centrado *\/\n position: relative;\n left: 0;\n right: 0;\n margin: 0 !important;\n }<\/p>\n<p> \/* Contenido centrado verticalmente en la IMAGEN - SIN FONDO y M\u00c1S ABAJO *\/\n .banner-content {\n width: 100%;\n max-width: 90%;\n padding: 25px 20px;\n margin: 0 !important;\n box-sizing: border-box;\n \/* QUITADO: background-color y backdrop-filter *\/\n background-color: transparent !important;\n border-radius: 0;<\/p>\n<p> \/* CENTRADO PERO M\u00c1S ABAJO - MODIFICADO *\/\n position: absolute !important;\n top: 65% !important; \/* Cambiado de 50% a 65% para bajar el texto *\/\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n z-index: 3;\n }<\/p>\n<p> \/* Texto ajustado para mejor legibilidad - SIN FONDO *\/\n .main-title {\n font-size: 2.2rem;\n margin-bottom: 15px;\n text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9); \/* Sombra m\u00e1s fuerte *\/\n }<\/p>\n<p> .title-line-1,\n .title-line-2 {\n font-size: 2.2rem;\n margin-bottom: 3px;\n }<\/p>\n<p> .subtitle {\n font-size: 1rem;\n margin-bottom: 25px;\n line-height: 1.5;\n padding: 0 10px;\n text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.9); \/* Sombra m\u00e1s fuerte *\/\n }<\/p>\n<p> .subtitle-line-1 {\n margin-bottom: 5px;\n }<\/p>\n<p> .menu-button {\n font-size: 0.95rem;\n padding: 12px 30px;\n margin-bottom: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6); \/* Sombra m\u00e1s fuerte para el bot\u00f3n *\/\n }<\/p>\n<p> .down-arrow {\n bottom: 25px;\n position: fixed !important;\n z-index: 4;\n }<\/p>\n<p> .double-arrow {\n font-size: 1.8rem;\n }<\/p>\n<p> .arrow-line {\n height: 22px;\n margin-top: 6px;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .banner-container {\n min-height: 100vh;\n padding-bottom: 50px;\n \/* AJUSTE: M\u00e1s zoom para cubrir mejor *\/\n background-size: cover !important;\n background-position: center 45% !important; \/* Ajuste vertical *\/\n }<\/p>\n<p> .banner-content {\n padding: 20px 15px;\n max-width: 95%;\n \/* CENTRADO PERO M\u00c1S ABAJO - MODIFICADO *\/\n top: 65% !important; \/* Cambiado de 50% a 65% para bajar el texto *\/\n transform: translate(-50%, -50%) !important;\n background-color: transparent !important; \/* Sin fondo *\/\n }<\/p>\n<p> .main-title {\n font-size: 1.9rem;\n margin-bottom: 12px;\n text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.9); \/* Sombra a\u00fan m\u00e1s fuerte *\/\n }<\/p>\n<p> .title-line-1,\n .title-line-2 {\n font-size: 1.9rem;\n }<\/p>\n<p> .subtitle {\n font-size: 0.95rem;\n margin-bottom: 22px;\n padding: 0 5px;\n text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.9); \/* Sombra a\u00fan m\u00e1s fuerte *\/\n }<\/p>\n<p> .menu-button {\n font-size: 0.9rem;\n padding: 11px 28px;\n margin-bottom: 8px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);\n }<\/p>\n<p> .down-arrow {\n bottom: 20px;\n }<\/p>\n<p> .double-arrow {\n font-size: 1.7rem;\n }<\/p>\n<p> .arrow-line {\n height: 20px;\n margin-top: 5px;\n }\n }<\/p>\n<p> @media (max-width: 360px) {\n .banner-container {\n min-height: 100vh;\n padding-bottom: 40px;\n \/* AJUSTE: A\u00fan m\u00e1s zoom para m\u00f3viles peque\u00f1os *\/\n background-size: cover !important;\n background-position: center 50% !important;\n }<\/p>\n<p> .banner-content {\n padding: 18px 12px;\n max-width: 95%;\n \/* CENTRADO PERO M\u00c1S ABAJO - MODIFICADO *\/\n top: 65% !important; \/* Cambiado de 50% a 65% para bajar el texto *\/\n transform: translate(-50%, -50%) !important;\n background-color: transparent !important; \/* Sin fondo *\/\n }<\/p>\n<p> .main-title {\n font-size: 1.7rem;\n margin-bottom: 10px;\n text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.9); \/* Sombra muy fuerte *\/\n }<\/p>\n<p> .title-line-1,\n .title-line-2 {\n font-size: 1.7rem;\n }<\/p>\n<p> .subtitle {\n font-size: 0.9rem;\n margin-bottom: 20px;\n padding: 0;\n text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9); \/* Sombra muy fuerte *\/\n }<\/p>\n<p> .menu-button {\n font-size: 0.85rem;\n padding: 10px 25px;\n margin-bottom: 5px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);\n }<\/p>\n<p> .down-arrow {\n bottom: 15px;\n }<\/p>\n<p> .double-arrow {\n font-size: 1.6rem;\n }<\/p>\n<p> .arrow-line {\n height: 18px;\n }\n }<\/p>\n<p> \/* Para tablets (769px - 1024px) *\/\n @media (min-width: 769px) and (max-width: 1024px) {\n .banner-container {\n \/* Versi\u00f3n escritorio se mantiene igual *\/\n background-image: url('https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Diseno-sin-titulo-48.png');\n background-size: cover;\n background-position: center;\n }<\/p>\n<p> .banner-content {\n margin-bottom: 70px; \/* Aplicar mismo cambio en tablets *\/\n }\n }\n <\/style>\n<section class=\"banner-container\">\n<div class=\"banner-content\">\n<h1 class=\"main-title\">\n <span class=\"title-line-1\">El arte del<\/span><br \/>\n <span class=\"title-line-2\">sabor gourmet<\/span><br \/>\n <\/h1>\n<p class=\"subtitle\">\n <span class=\"subtitle-line-1\">Recetas aut\u00e9nticas, ingredientes seleccionados y una promesa:<\/span><br \/>\n <span class=\"subtitle-line-2\">calidad en cada bocado<\/span>\n <\/p>\n<p> <!-- BOT\u00d3N MODIFICADO CON EL NUEVO ENLACE --><br \/>\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" class=\"menu-button\">Men\u00fa<\/a>\n <\/div>\n<p> <!-- FLECHA ELEGANTE CON L\u00cdNEA SUTIL --><\/p>\n<div class=\"down-arrow\" onclick=\"scrollToNext()\">\n<div class=\"double-arrow\">\n <i class=\"fas fa-angle-double-down\"><\/i>\n <\/div>\n<div class=\"arrow-line\"><\/div>\n<\/p><\/div>\n<\/section>\n<p> <script>\n function scrollToNext() {\n window.scrollTo({\n top: window.innerHeight,\n behavior: 'smooth'\n });\n }<\/p>\n<p> document.querySelector('.down-arrow').addEventListener('click', scrollToNext);<\/p>\n<p> \/\/ Asegurar que el bot\u00f3n funcione correctamente\n document.querySelector('.menu-button').addEventListener('click', function(e) {\n \/\/ Permitir que el enlace funcione normalmente\n console.log('Redirigiendo a:', this.href);\n });<\/p>\n<p> document.querySelector('.double-arrow').addEventListener('mouseenter', function() {\n this.style.opacity = '1';\n });\n document.querySelector('.double-arrow').addEventListener('mouseleave', function() {\n this.style.opacity = '0.9';\n });<\/p>\n<p> \/\/ Forzar ancho completo en m\u00f3vil al cargar\n window.addEventListener('load', function() {\n if (window.innerWidth <= 768) {\n \/\/ Asegurar que el banner ocupe el 100% del viewport\n document.querySelector('.banner-container').style.width = '100vw';\n document.body.style.overflowX = 'hidden';\n }\n });\n \n \/\/ Ajustar en redimensionamiento\n window.addEventListener('resize', function() {\n if (window.innerWidth <= 768) {\n document.querySelector('.banner-container').style.width = '100vw';\n document.body.style.overflowX = 'hidden';\n }\n });\n <\/script><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"mzomu_Fpjqjj_mzomu_Fpjqjj\" class=\"brz-section brz-css-d-ynf0il brz-css-fpn27g\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-kmf6n9\" data-brz-custom-id=\"cyJxhYiqZg2M\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-cn672b\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-t3422y brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1qst53y\" data-brz-custom-id=\"nLjKxtHCpD0m\">\n<div>\n<div class=\"fullwidth-carousel\" style=\"width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: 350px; overflow: hidden; background: transparent;\">\n<div class=\"carousel-track\" style=\"display: flex; position: absolute; top: 50%; transform: translateY(-50%); animation: slideHorizontal 40s linear infinite;\">\n<p> <!-- IMAGEN 1 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20191128-WA0036.jpg\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 2 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/2.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 3 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/3.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 4 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/4.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 5 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/5.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 6 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/6.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 7 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/7.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 8 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/8.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 9 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/9.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- IMAGEN 10 --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/10.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<p> <!-- DUPLICADO PARA EFECTO INFINITO - Segunda tanda --><\/p>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/1.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/2.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/3.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/4.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/5.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/6.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/7.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/8.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/9.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<div class=\"circle-img\" style=\"width: 220px; height: 220px; margin: 0 25px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.15);\">\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: block; width: 100%; height: 100%; cursor: pointer;\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/10.png\" alt=\"Men\u00fa D'Andre\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\"><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/div>\n<style>\n \/* ANIMACI\u00d3N *\/\n @keyframes slideHorizontal {\n 0% {\n transform: translateX(0) translateY(-50%);\n }\n 100% {\n transform: translateX(-50%) translateY(-50%);\n }\n }<\/p>\n<p> \/* PAUSA AL PASAR EL MOUSE *\/\n .fullwidth-carousel:hover .carousel-track {\n animation-play-state: paused;\n }<\/p>\n<p> \/* RESPONSIVE MEJORADO CON LOOP INFINITO *\/\n @media (max-width: 768px) {\n .fullwidth-carousel {\n height: 250px !important; \/* Reducido de 350px a 250px *\/\n width: 100vw !important; \/* Mantenemos 100vw para el efecto completo *\/\n left: 0 !important; \/* Quitado el desplazamiento del 50% *\/\n right: 0 !important;\n margin-left: 0 !important; \/* Quitado el margen negativo *\/\n margin-right: 0 !important;\n overflow: hidden !important; \/* Mantenemos hidden *\/\n position: relative !important;\n }<\/p>\n<p> .carousel-track {\n top: 50% !important;\n \/* Ajustamos el c\u00e1lculo del translateX para que sea proporcional al contenido *\/\n animation: slideHorizontalMobile 30s linear infinite !important;\n \/* Aseguramos que el track tenga el ancho necesario para el loop infinito *\/\n width: calc(20 * (140px + 24px)) !important; \/* (10 im\u00e1genes * 2) * (ancho + margen) *\/\n }<\/p>\n<p> .circle-img {\n width: 140px !important; \/* Reducido de 220px a 140px *\/\n height: 140px !important;\n margin: 0 12px !important; \/* Reducido de 25px a 12px *\/\n box-shadow: 0 5px 15px rgba(0,0,0,0.12) !important;\n }<\/p>\n<p> \/* Animaci\u00f3n espec\u00edfica para m\u00f3vil que se mueve proporcionalmente *\/\n @keyframes slideHorizontalMobile {\n 0% {\n transform: translateX(0) translateY(-50%);\n }\n 100% {\n \/* Movemos exactamente la mitad del ancho total (porque tenemos 2 sets de 10 im\u00e1genes) *\/\n transform: translateX(calc(-50%)) translateY(-50%);\n }\n }\n }<\/p>\n<p> \/* Para m\u00f3viles m\u00e1s peque\u00f1os (480px) *\/\n @media (max-width: 480px) {\n .fullwidth-carousel {\n height: 220px !important;\n }<\/p>\n<p> .carousel-track {\n width: calc(20 * (120px + 20px)) !important;\n animation: slideHorizontalMobileSmall 25s linear infinite !important;\n }<\/p>\n<p> .circle-img {\n width: 120px !important;\n height: 120px !important;\n margin: 0 10px !important;\n }<\/p>\n<p> @keyframes slideHorizontalMobileSmall {\n 0% {\n transform: translateX(0) translateY(-50%);\n }\n 100% {\n transform: translateX(calc(-50%)) translateY(-50%);\n }\n }\n }<\/p>\n<p> \/* Para m\u00f3viles extra peque\u00f1os (360px) *\/\n @media (max-width: 360px) {\n .fullwidth-carousel {\n height: 200px !important;\n }<\/p>\n<p> .carousel-track {\n width: calc(20 * (110px + 16px)) !important;\n animation: slideHorizontalMobileXS 22s linear infinite !important;\n }<\/p>\n<p> .circle-img {\n width: 110px !important;\n height: 110px !important;\n margin: 0 8px !important;\n }<\/p>\n<p> @keyframes slideHorizontalMobileXS {\n 0% {\n transform: translateX(0) translateY(-50%);\n }\n 100% {\n transform: translateX(calc(-50%)) translateY(-50%);\n }\n }\n }<\/p>\n<p> \/* Para tablets en orientaci\u00f3n vertical *\/\n @media (min-width: 769px) and (max-width: 1024px) {\n .fullwidth-carousel {\n height: 320px !important;\n }<\/p>\n<p> .carousel-track {\n width: calc(20 * (190px + 40px)) !important;\n }<\/p>\n<p> .circle-img {\n width: 190px !important;\n height: 190px !important;\n margin: 0 20px !important;\n }\n }\n<\/style>\n<p><script>\n \/\/ Script para ajustar din\u00e1micamente el ancho del track en m\u00f3vil\n document.addEventListener('DOMContentLoaded', function() {\n function adjustCarouselForMobile() {\n const carouselTrack = document.querySelector('.carousel-track');\n const circleImgs = document.querySelectorAll('.circle-img');<\/p>\n<p> if (window.innerWidth <= 768 && circleImgs.length > 0) {\n \/\/ Calcular el ancho total necesario para el efecto infinito\n const imgWidth = 140; \/\/ Ancho de imagen en m\u00f3vil\n const imgMargin = 24; \/\/ Margen total (12px a cada lado)\n const totalImages = 20; \/\/ 10 im\u00e1genes originales + 10 duplicadas<\/p>\n<p> const totalWidth = totalImages * (imgWidth + imgMargin);\n carouselTrack.style.width = totalWidth + 'px';<\/p>\n<p> \/\/ Ajustar para diferentes tama\u00f1os de pantalla\n if (window.innerWidth <= 480) {\n const imgWidthSmall = 120;\n const imgMarginSmall = 20;\n carouselTrack.style.width = (totalImages * (imgWidthSmall + imgMarginSmall)) + 'px';\n }\n \n if (window.innerWidth <= 360) {\n const imgWidthXS = 110;\n const imgMarginXS = 16;\n carouselTrack.style.width = (totalImages * (imgWidthXS + imgMarginXS)) + 'px';\n }\n }\n }\n \n \/\/ Ajustar al cargar\n adjustCarouselForMobile();\n \n \/\/ Ajustar al redimensionar\n window.addEventListener('resize', adjustCarouselForMobile);\n });\n<\/script><br \/>\n<!-- TERMINA CARRUSEL --><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"lkRYvWmM9Dxa_lkRYvWmM9Dxa\" class=\"brz-section brz-css-d-ynf0il brz-css-spqj1g\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1rugeod\" data-brz-custom-id=\"tg7ofgDXgDDd\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-aa6vva\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-1qb82v brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-13ftypw\" data-brz-custom-id=\"oFSPfzQuiJkN\">\n<div><!-- SECCI\u00d3N GALER\u00cdA Y TEXTO --><\/p>\n<div class=\"dandre-gallery-section\" style=\"width: 100%; max-width: 1200px; margin: 60px auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 50px; align-items: center; justify-content: center;\">\n<p> <!-- COLUMNA IZQUIERDA - GALER\u00cdA CON FLECHAS --><\/p>\n<div class=\"gallery-column\" style=\"flex: 1; min-width: 300px; max-width: 600px; position: relative; order: 1;\">\n<div class=\"gallery-container\" style=\"position: relative;\">\n<p> <!-- IMAGEN PRINCIPAL GRANDE --><\/p>\n<div class=\"featured-image\" style=\"width: 100%; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative;\">\n <img decoding=\"async\" id=\"mainImage\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190504-WA0029.jpg\" alt=\"Dandre Gourmet - Plato destacado\" style=\"width: 100%; height: 400px; object-fit: cover; display: block;\"><\/p>\n<p> <!-- FLECHA IZQUIERDA --><br \/>\n <button class=\"arrow-btn left-arrow\" style=\"position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #333; box-shadow: 0 3px 10px rgba(0,0,0,0.2); transition: all 0.3s;\"><br \/>\n \u2190<br \/>\n <\/button><\/p>\n<p> <!-- FLECHA DERECHA --><br \/>\n <button class=\"arrow-btn right-arrow\" style=\"position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #333; box-shadow: 0 3px 10px rgba(0,0,0,0.2); transition: all 0.3s;\"><br \/>\n \u2192<br \/>\n <\/button>\n <\/div>\n<p> <!-- MINIATURAS (opcional, solo visual) --><\/p>\n<div class=\"thumbnail-row\" style=\"display: flex; gap: 10px; justify-content: center; margin-top: 15px;\">\n <!-- Miniatura 1 --><\/p>\n<div class=\"thumbnail\" style=\"width: 60px; height: 60px; border-radius: 6px; overflow: hidden; opacity: 0.6;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190504-WA0029.jpg\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <\/div>\n<p> <!-- Miniatura 2 --><\/p>\n<div class=\"thumbnail\" style=\"width: 60px; height: 60px; border-radius: 6px; overflow: hidden; opacity: 0.6;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190712-WA0044.jpg\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <\/div>\n<p> <!-- Miniatura 3 --><\/p>\n<div class=\"thumbnail\" style=\"width: 60px; height: 60px; border-radius: 6px; overflow: hidden; opacity: 0.6;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190714-WA0016.jpg\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <\/div>\n<p> <!-- Miniatura 4 --><\/p>\n<div class=\"thumbnail\" style=\"width: 60px; height: 60px; border-radius: 6px; overflow: hidden; opacity: 0.6;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190714-WA0030.jpg\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <\/div>\n<p> <!-- Miniatura 5 --><\/p>\n<div class=\"thumbnail\" style=\"width: 60px; height: 60px; border-radius: 6px; overflow: hidden; opacity: 0.6;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20191128-WA0036.jpg\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <\/div>\n<p> <!-- Miniatura 6 --><\/p>\n<div class=\"thumbnail\" style=\"width: 60px; height: 60px; border-radius: 6px; overflow: hidden; opacity: 0.6;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Foto-de-lilia-Galvis-7.jpg\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- COLUMNA DERECHA - TEXTO Y BOT\u00d3N --><\/p>\n<div class=\"text-column\" style=\"flex: 1; min-width: 300px; max-width: 450px; order: 2;\">\n<div class=\"text-content\" style=\"text-align: left;\">\n <!-- T\u00cdTULO: ESPACIO M\u00cdNIMO entre l\u00edneas --><\/p>\n<h2 style=\"font-family: 'Helvetica', Arial, sans-serif; font-weight: bold; font-size: 2rem; color: #1A3E5F; margin-bottom: 2px; letter-spacing: 1px; line-height: 1;\">\n \u00danete al movimiento<br \/>\n <\/h2>\n<h1 style=\"font-family: 'Helvetica', Arial, sans-serif; font-weight: bold; font-size: 3.5rem; color: #1A3E5F; margin-bottom: 25px; line-height: 1; margin-top: 0;\">\n Dandre Gourmet<br \/>\n <\/h1>\n<p> <!-- TEXTO: Poppins Extra Light --><\/p>\n<p style=\"font-family: 'Poppins', sans-serif; font-weight: 200; font-size: 1.1rem; color: #555; line-height: 1.7; margin-bottom: 20px;\">\n En Dandre Gourmet cocinamos cada d\u00eda con productos frescos, naturales y llenos de sabor.\n <\/p>\n<p style=\"font-family: 'Poppins', sans-serif; font-weight: 200; font-size: 1.1rem; color: #555; line-height: 1.7; margin-bottom: 35px;\">\n Nuestra misi\u00f3n es simple: ofrecerte comida aut\u00e9ntica, de calidad y deliciosa, lista cuando la necesites.\n <\/p>\n<p> <!-- BOT\u00d3N: #1A3E5F normal, negro al hover, m\u00e1s peque\u00f1o --><br \/>\n <a href=\"https:\/\/maps.app.goo.gl\/Dc5dEJsYMG7RwfUt8\" target=\"_blank\" class=\"visit-button\" style=\"display: inline-block; background-color: #1A3E5F; color: white; text-decoration: none; padding: 14px 36px; font-size: 1.1rem; font-weight: bold; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(26, 62, 95, 0.3); font-family: 'Helvetica', Arial, sans-serif;\"><br \/>\n Vis\u00edtanos<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<\/div>\n<style>\n \/* ESTILOS PARA LA GALER\u00cdA - Copia esto tambi\u00e9n *\/<\/p>\n<p> \/* Importar fuente Poppins *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');<\/p>\n<p> \/* Efecto hover en bot\u00f3n Vis\u00edtanos - Cambia a negro *\/\n .visit-button:hover {\n background-color: #000000 !important;\n color: white !important;\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;\n }<\/p>\n<p> \/* Efecto hover en flechas *\/\n .arrow-btn:hover {\n background: white !important;\n transform: translateY(-50%) scale(1.1);\n box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;\n }<\/p>\n<p> \/* Efecto en miniatura activa (punto indicador) *\/\n .thumbnail.active {\n opacity: 1 !important;\n }<\/p>\n<p> \/* Efecto hover en imagen principal *\/\n .featured-image img {\n transition: transform 0.5s ease;\n }<\/p>\n<p> .featured-image:hover img {\n transform: scale(1.02);\n }<\/p>\n<p> \/* Responsive - PARA ESCRITORIO se mantiene igual *\/\n @media (max-width: 900px) {\n .dandre-gallery-section {\n flex-direction: column;\n gap: 40px;\n }<\/p>\n<p> .text-column, .gallery-column {\n max-width: 100%;\n }<\/p>\n<p> .featured-image img {\n height: 350px;\n }<\/p>\n<p> .text-column h2 {\n font-size: 1.8rem !important;\n }<\/p>\n<p> .text-column h1 {\n font-size: 2.8rem !important;\n }\n }<\/p>\n<p> \/* NUEVA REGLA: Solo para m\u00f3viles - Invertir orden de columnas *\/\n @media (max-width: 768px) {\n .dandre-gallery-section {\n flex-direction: column;\n }<\/p>\n<p> \/* Texto arriba (order: 1) *\/\n .text-column {\n order: 1 !important;\n margin-bottom: 20px;\n }<\/p>\n<p> \/* Im\u00e1genes abajo (order: 2) *\/\n .gallery-column {\n order: 2 !important;\n }<\/p>\n<p> \/* Centrar contenido de texto en m\u00f3vil *\/\n .text-content {\n text-align: center !important;\n }<\/p>\n<p> .visit-button {\n margin: 0 auto;\n display: block;\n width: fit-content;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .text-column h2 {\n font-size: 1.4rem !important;\n }<\/p>\n<p> .text-column h1 {\n font-size: 2rem !important;\n }<\/p>\n<p> .featured-image img {\n height: 250px;\n }<\/p>\n<p> .arrow-btn {\n width: 35px !important;\n height: 35px !important;\n font-size: 16px !important;\n }<\/p>\n<p> .thumbnail {\n width: 45px !important;\n height: 45px !important;\n }<\/p>\n<p> .visit-button {\n padding: 12px 30px !important;\n font-size: 1rem !important;\n }<\/p>\n<p> .text-column p {\n font-size: 1rem !important;\n }\n }\n<\/style>\n<p><script>\n \/\/ SCRIPT PARA GALER\u00cdA CON FLECHAS - Copia esto tambi\u00e9n\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Lista de im\u00e1genes CON TUS 6 NUEVAS IM\u00c1GENES\n const images = [\n \"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190504-WA0029.jpg\",\n \"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190712-WA0044.jpg\",\n \"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190714-WA0016.jpg\",\n \"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190714-WA0030.jpg\",\n \"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20191128-WA0036.jpg\",\n \"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Foto-de-lilia-Galvis-7.jpg\"\n ];<\/p>\n<p> const mainImage = document.getElementById('mainImage');\n const leftArrow = document.querySelector('.left-arrow');\n const rightArrow = document.querySelector('.right-arrow');\n const thumbnails = document.querySelectorAll('.thumbnail');<\/p>\n<p> let currentIndex = 0;<\/p>\n<p> \/\/ Funci\u00f3n para actualizar la imagen\n function updateImage() {\n mainImage.src = images[currentIndex];<\/p>\n<p> \/\/ Actualizar miniatura activa (si hay miniaturas)\n thumbnails.forEach((thumb, index) => {\n thumb.classList.remove('active');\n if (index === currentIndex % thumbnails.length) {\n thumb.classList.add('active');\n }\n });\n }<\/p>\n<p> \/\/ Flecha izquierda - imagen anterior\n leftArrow.addEventListener('click', function() {\n currentIndex = (currentIndex - 1 + images.length) % images.length;\n updateImage();\n });<\/p>\n<p> \/\/ Flecha derecha - siguiente imagen\n rightArrow.addEventListener('click', function() {\n currentIndex = (currentIndex + 1) % images.length;\n updateImage();\n });<\/p>\n<p> \/\/ Tambi\u00e9n se puede navegar con teclado\n document.addEventListener('keydown', function(event) {\n if (event.key === 'ArrowLeft') {\n currentIndex = (currentIndex - 1 + images.length) % images.length;\n updateImage();\n } else if (event.key === 'ArrowRight') {\n currentIndex = (currentIndex + 1) % images.length;\n updateImage();\n }\n });<\/p>\n<p> \/\/ Inicializar primera imagen activa\n updateImage();\n });\n<\/script><br \/>\n<!-- TERMINA SECCI\u00d3N GALER\u00cdA --><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"w61T0jiXRkn7_w61T0jiXRkn7\" class=\"brz-section brz-css-d-ynf0il brz-css-1kgtdo6\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-q9gz5w\" data-brz-custom-id=\"f8IY1Y0EyyJ3\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-1ymkry3\"><\/div>\n<\/div>\n<\/section>\n<section id=\"aieegHQ7IB_m_aieegHQ7IB_m\" class=\"brz-section brz-css-d-ynf0il brz-css-zc30gh\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-q1iuom\" data-brz-custom-id=\"nPhy5MP6iZHW\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-992xug\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-10g8ohc brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1lkry0m\" data-brz-custom-id=\"gpYShyMwEtzT\">\n<div>\n<div class=\"menu-section-brizy\" style=\"background-color: #1A3E5F; padding: 20px 0; font-family: 'Poppins', sans-serif; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;\">\n<div style=\"max-width: 1400px; margin: 0 auto; padding: 0 20px;\">\n<div class=\"menu-cards-container-brizy\" style=\"display: flex; flex-wrap: wrap; justify-content: center; gap: 25px;\">\n<p> <!-- Brunch --><\/p>\n<div class=\"menu-card-brizy\" style=\"flex: 1; min-width: 280px; max-width: 350px; text-align: center; padding: 0 10px;\">\n<div class=\"image-container-brizy\" style=\"margin-bottom: 4px; border-radius: 6px; overflow: hidden; display: flex; justify-content: center; align-items: center;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/DESAYUNO.png\" alt=\"Brunch\" style=\"width: 100%; max-height: 140px; object-fit: contain; display: block; border-radius: 6px;\">\n <\/div>\n<h2 style=\"font-family: 'Poppins', sans-serif; font-weight: 600; color: #E5D9C9; font-size: 1.5rem; margin-bottom: 6px; letter-spacing: 0.5px; margin-top: 0;\">Brunch<\/h2>\n<p> <!-- ENLACE MODIFICADO --><br \/>\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: inline-block; background-color: transparent; color: #E5D9C9; border: 1.5px solid #E5D9C9; padding: 4px 16px; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 500; border-radius: 15px; transition: all 0.3s ease; font-size: 0.8rem; width: fit-content; margin: 0 auto; min-width: 100px;\">Ver men\u00fa<\/a>\n <\/div>\n<p> <!-- Almuerzos --><\/p>\n<div class=\"menu-card-brizy\" style=\"flex: 1; min-width: 280px; max-width: 350px; text-align: center; padding: 0 10px;\">\n<div class=\"image-container-brizy\" style=\"margin-bottom: 4px; border-radius: 6px; overflow: hidden; display: flex; justify-content: center; align-items: center;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/ALMUERZO.png\" alt=\"Almuerzos\" style=\"width: 100%; max-height: 140px; object-fit: contain; display: block; border-radius: 6px;\">\n <\/div>\n<h2 style=\"font-family: 'Poppins', sans-serif; font-weight: 600; color: #E5D9C9; font-size: 1.5rem; margin-bottom: 6px; letter-spacing: 0.5px; margin-top: 0;\">Almuerzos<\/h2>\n<p> <!-- ENLACE MODIFICADO --><br \/>\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: inline-block; background-color: transparent; color: #E5D9C9; border: 1.5px solid #E5D9C9; padding: 4px 16px; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 500; border-radius: 15px; transition: all 0.3s ease; font-size: 0.8rem; width: fit-content; margin: 0 auto; min-width: 100px;\">Ver men\u00fa<\/a>\n <\/div>\n<p> <!-- Bebidas --><\/p>\n<div class=\"menu-card-brizy\" style=\"flex: 1; min-width: 280px; max-width: 350px; text-align: center; padding: 0 10px;\">\n<div class=\"image-container-brizy\" style=\"margin-bottom: 4px; border-radius: 6px; overflow: hidden; display: flex; justify-content: center; align-items: center;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-1.55.31-p.m.png\" alt=\"Bebidas\" style=\"width: 100%; max-height: 140px; object-fit: contain; display: block; border-radius: 6px;\">\n <\/div>\n<h2 style=\"font-family: 'Poppins', sans-serif; font-weight: 600; color: #E5D9C9; font-size: 1.5rem; margin-bottom: 6px; letter-spacing: 0.5px; margin-top: 0;\">Bebidas<\/h2>\n<p> <!-- ENLACE MODIFICADO --><br \/>\n <a href=\"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/\" style=\"display: inline-block; background-color: transparent; color: #E5D9C9; border: 1.5px solid #E5D9C9; padding: 4px 16px; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 500; border-radius: 15px; transition: all 0.3s ease; font-size: 0.8rem; width: fit-content; margin: 0 auto; min-width: 100px;\">Ver men\u00fa<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<style>\n .menu-card-brizy a:hover {\n background-color: #E5D9C9;\n color: #1A3E5F;\n transform: translateY(-1px);\n }<\/p>\n<p> \/* Asegurar que todo quede alineado verticalmente *\/\n .menu-card-brizy {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n }<\/p>\n<p> @media (max-width: 1200px) {\n .menu-card-brizy {\n max-width: 320px !important;\n }<\/p>\n<p> .image-container-brizy img {\n max-height: 130px !important;\n }<\/p>\n<p> .menu-card-brizy a {\n padding: 3px 14px !important;\n font-size: 0.75rem !important;\n min-width: 90px !important;\n border-radius: 14px !important;\n }<\/p>\n<p> .image-container-brizy {\n margin-bottom: 3px !important;\n }<\/p>\n<p> h2 {\n margin-bottom: 5px !important;\n }\n }<\/p>\n<p> @media (max-width: 992px) {\n .menu-section-brizy {\n padding: 18px 0 !important;\n }<\/p>\n<p> .menu-cards-container-brizy {\n gap: 20px;\n }<\/p>\n<p> .menu-card-brizy {\n max-width: 300px !important;\n min-width: 250px !important;\n }<\/p>\n<p> .image-container-brizy img {\n max-height: 120px !important;\n }<\/p>\n<p> h2 {\n font-size: 1.4rem !important;\n margin-bottom: 4px !important;\n }<\/p>\n<p> .menu-card-brizy a {\n padding: 3px 12px !important;\n font-size: 0.75rem !important;\n min-width: 85px !important;\n border-radius: 12px !important;\n border-width: 1px !important;\n }<\/p>\n<p> .image-container-brizy {\n margin-bottom: 2px !important;\n }\n }<\/p>\n<p> @media (max-width: 768px) {\n .menu-section-brizy {\n padding: 15px 0 !important;\n }<\/p>\n<p> .menu-cards-container-brizy {\n flex-direction: column;\n align-items: center;\n gap: 25px;\n }<\/p>\n<p> .menu-card-brizy {\n max-width: 100% !important;\n min-width: 250px !important;\n padding: 0 15px !important;\n }<\/p>\n<p> .image-container-brizy img {\n max-height: 120px !important;\n }<\/p>\n<p> h2 {\n font-size: 1.4rem !important;\n margin-bottom: 4px !important;\n }<\/p>\n<p> .menu-card-brizy a {\n padding: 3px 14px !important;\n font-size: 0.75rem !important;\n min-width: 85px !important;\n border-radius: 12px !important;\n border-width: 1px !important;\n }<\/p>\n<p> .image-container-brizy {\n margin-bottom: 2px !important;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .menu-section-brizy {\n padding: 12px 0 !important;\n }<\/p>\n<p> .image-container-brizy img {\n max-height: 110px !important;\n }<\/p>\n<p> h2 {\n font-size: 1.3rem !important;\n margin-bottom: 3px !important;\n }<\/p>\n<p> .menu-card-brizy a {\n padding: 2px 10px !important;\n font-size: 0.7rem !important;\n min-width: 80px !important;\n border-radius: 10px !important;\n border-width: 1px !important;\n }<\/p>\n<p> .menu-card-brizy {\n padding: 0 10px !important;\n }<\/p>\n<p> .image-container-brizy {\n margin-bottom: 1px !important;\n }\n }\n<\/style>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"lvx3wMCLZMZp_lvx3wMCLZMZp\" class=\"brz-section brz-css-d-ynf0il brz-css-avvc5v\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-itwiai\" data-brz-custom-id=\"jyWVeS6aWsRW\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-17g2cvh\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-8yu89q brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-pqtf8y\" data-brz-custom-id=\"sssE3h5Rxcdq\">\n<div>\n<p> <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>Carrusel 3D Best Sellers<\/title><\/p>\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n background-color: #ffffff;\n font-family: 'Helvetica', Arial, sans-serif;\n padding: 20px;\n overflow-x: hidden;\n }<\/p>\n<p> .best-sellers-container {\n max-width: 1400px;\n margin: 0 auto;\n text-align: center;\n padding: 20px 20px;\n }<\/p>\n<p> .title {\n font-family: 'Helvetica', Arial, sans-serif;\n font-weight: bold;\n color: #1A3E5F;\n font-size: 2.5rem;\n margin-bottom: 10px;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n }<\/p>\n<p> .carousel-container {\n position: relative;\n width: 100%;\n height: 550px;\n margin: 0 auto;\n overflow: hidden;\n }<\/p>\n<p> .carousel-track {\n position: relative;\n width: 100%;\n height: 100%;\n }<\/p>\n<p> .carousel-item {\n position: absolute;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n cursor: pointer;\n transition: all 0.8s ease;\n }<\/p>\n<p> .carousel-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }<\/p>\n<p> \/* Posiciones iniciales - CONTENEDORES M\u00c1S ANCHOS *\/\n .item1 {\n width: 600px;\n height: 385px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 5;\n opacity: 1;\n }<\/p>\n<p> .item2 {\n width: 460px;\n height: 286px;\n left: 65%;\n top: 50%;\n transform: translate(-50%, -50%);\n zIndex: 4;\n opacity: 0.7;\n }<\/p>\n<p> .item3 {\n width: 360px;\n height: 231px;\n left: 60%;\n top: 25%;\n transform: translateX(-50%);\n z-index: 3;\n opacity: 0.4;\n }<\/p>\n<p> .item4 {\n width: 360px;\n height: 231px;\n left: 40%;\n top: 25%;\n transform: translateX(-50%);\n z-index: 3;\n opacity: 0.4;\n }<\/p>\n<p> .item5 {\n width: 460px;\n height: 286px;\n left: 35%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 4;\n opacity: 0.7;\n }<\/p>\n<p> \/* Indicadores *\/\n .indicators {\n margin-top: 10px;\n display: flex;\n justify-content: center;\n gap: 12px;\n }<\/p>\n<p> .indicator {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background-color: #E5D9C9;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }<\/p>\n<p> .indicator.active {\n background-color: #1A3E5F;\n }<\/p>\n<p> \/* Responsive - Ajustado para contenedores m\u00e1s anchos *\/\n @media (max-width: 1200px) {\n .carousel-container { height: 495px; }\n .item1 { width: 540px; height: 346.5px; }\n .item2, .item5 { width: 414px; height: 258.5px; }\n .item3, .item4 { width: 324px; height: 198px; }\n }<\/p>\n<p> @media (max-width: 992px) {\n .title { font-size: 2.2rem; margin-bottom: 8px; }\n .carousel-container { height: 440px; }\n .item1 { width: 480px; height: 308px; }\n .item2, .item5 { width: 368px; height: 231px; }\n .item3, .item4 { width: 288px; height: 176px; }\n }<\/p>\n<p> @media (max-width: 768px) {\n .title { font-size: 1.8rem; margin-bottom: 5px; }\n .carousel-container { height: 396px; }\n .item1 { width: 420px; height: 269.5px; }\n .item2 { left: 67%; width: 322px; height: 209px; }\n .item5 { left: 33%; width: 322px; height: 209px; }\n .item3 { left: 62%; width: 252px; height: 159.5px; }\n .item4 { left: 38%; width: 252px; height: 159.5px; }\n }<\/p>\n<p> @media (max-width: 576px) {\n .best-sellers-container { padding: 15px 10px; }\n .title { font-size: 1.5rem; margin-bottom: 5px; }\n .carousel-container { height: 352px; }\n .item1 { width: 360px; height: 231px; }\n .item2 { left: 68%; width: 276px; height: 176px; }\n .item5 { left: 32%; width: 276px; height: 176px; }\n .item3 { left: 64%; width: 216px; height: 132px; }\n .item4 { left: 36%; width: 216px; height: 132px; }\n .indicators { margin-top: 8px; }\n }\n <\/style>\n<div class=\"best-sellers-container\">\n<h1 class=\"title\">BEST SELLERS<\/h1>\n<div class=\"carousel-container\">\n<div class=\"carousel-track\">\n <!-- Imagen 1 --><\/p>\n<div class=\"carousel-item item1\" data-index=\"0\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/1-1.png\" alt=\"Best Seller 1\">\n <\/div>\n<p> <!-- Imagen 2 --><\/p>\n<div class=\"carousel-item item2\" data-index=\"1\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/2-1.png\" alt=\"Best Seller 2\">\n <\/div>\n<p> <!-- Imagen 3 --><\/p>\n<div class=\"carousel-item item3\" data-index=\"2\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/3-1.png\" alt=\"Best Seller 3\">\n <\/div>\n<p> <!-- Imagen 4 --><\/p>\n<div class=\"carousel-item item4\" data-index=\"3\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/4-2.png\" alt=\"Best Seller 4\">\n <\/div>\n<p> <!-- Imagen 5 --><\/p>\n<div class=\"carousel-item item5\" data-index=\"4\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/5-2.png\" alt=\"Best Seller 5\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"indicators\">\n<div class=\"indicator active\" data-index=\"0\"><\/div>\n<div class=\"indicator\" data-index=\"1\"><\/div>\n<div class=\"indicator\" data-index=\"2\"><\/div>\n<div class=\"indicator\" data-index=\"3\"><\/div>\n<div class=\"indicator\" data-index=\"4\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n const items = document.querySelectorAll('.carousel-item');\n const indicators = document.querySelectorAll('.indicator');\n let currentIndex = 0;\n let autoRotateInterval;<\/p>\n<p> \/\/ Mapa de posiciones para cada \u00edndice - CONTENEDORES M\u00c1S ANCHOS\n const positions = [\n { \/\/ Posici\u00f3n 0 - Centro\n width: '600px', height: '385px',\n left: '50%', top: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: 5, opacity: 1\n },\n { \/\/ Posici\u00f3n 1 - Derecha (15% desde el centro)\n width: '460px', height: '286px',\n left: '65%', top: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: 4, opacity: 0.7\n },\n { \/\/ Posici\u00f3n 2 - Arriba derecha (10% desde el centro)\n width: '360px', height: '231px',\n left: '60%', top: '25%',\n transform: 'translateX(-50%)',\n zIndex: 3, opacity: 0.4\n },\n { \/\/ Posici\u00f3n 3 - Arriba izquierda (10% desde el centro)\n width: '360px', height: '231px',\n left: '40%', top: '25%',\n transform: 'translateX(-50%)',\n zIndex: 3, opacity: 0.4\n },\n { \/\/ Posici\u00f3n 4 - Izquierda (15% desde el centro)\n width: '460px', height: '286px',\n left: '35%', top: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: 4, opacity: 0.7\n }\n ];<\/p>\n<p> \/\/ Funci\u00f3n para actualizar las posiciones de las im\u00e1genes\n function updatePositions() {\n \/\/ Asignar posici\u00f3n a cada imagen basado en su \u00edndice actual\n items.forEach((item, i) => {\n const posIndex = (i - currentIndex + 5) % 5;\n const pos = positions[posIndex];<\/p>\n<p> item.style.width = pos.width;\n item.style.height = pos.height;\n item.style.left = pos.left;\n item.style.top = pos.top;\n item.style.transform = pos.transform;\n item.style.zIndex = pos.zIndex;\n item.style.opacity = pos.opacity;\n });<\/p>\n<p> \/\/ Actualizar indicadores\n indicators.forEach((indicator, i) => {\n if (i === currentIndex) {\n indicator.classList.add('active');\n } else {\n indicator.classList.remove('active');\n }\n });\n }<\/p>\n<p> \/\/ Funci\u00f3n para rotar al siguiente\n function rotateNext() {\n currentIndex = (currentIndex + 1) % 5;\n updatePositions();\n }<\/p>\n<p> \/\/ Iniciar rotaci\u00f3n autom\u00e1tica cada 3 segundos\n function startAutoRotate() {\n autoRotateInterval = setInterval(rotateNext, 3000);\n }<\/p>\n<p> \/\/ Detener rotaci\u00f3n autom\u00e1tica\n function stopAutoRotate() {\n clearInterval(autoRotateInterval);\n }<\/p>\n<p> \/\/ Click en indicadores\n indicators.forEach((indicator) => {\n indicator.addEventListener('click', function() {\n const index = parseInt(this.getAttribute('data-index'));\n if (index !== currentIndex) {\n currentIndex = index;\n updatePositions();\n }\n });\n });<\/p>\n<p> \/\/ Pausar al hacer hover\n const carousel = document.querySelector('.carousel-container');\n carousel.addEventListener('mouseenter', stopAutoRotate);\n carousel.addEventListener('mouseleave', startAutoRotate);<\/p>\n<p> \/\/ Inicializar\n updatePositions();\n startAutoRotate();<\/p>\n<p> \/\/ Actualizar posiciones responsive\n function updateResponsivePositions() {\n const width = window.innerWidth;<\/p>\n<p> \/\/ Ajustar valores para diferentes tama\u00f1os de pantalla\n if (width <= 1200 && width > 992) {\n positions[0].width = '540px'; positions[0].height = '346.5px';\n positions[1].width = '414px'; positions[1].height = '258.5px'; positions[1].left = '65%';\n positions[4].width = '414px'; positions[4].height = '258.5px'; positions[4].left = '35%';\n positions[2].width = '324px'; positions[2].height = '198px'; positions[2].left = '60%';\n positions[3].width = '324px'; positions[3].height = '198px'; positions[3].left = '40%';\n } else if (width <= 992 && width > 768) {\n positions[0].width = '480px'; positions[0].height = '308px';\n positions[1].width = '368px'; positions[1].height = '231px'; positions[1].left = '65%';\n positions[4].width = '368px'; positions[4].height = '231px'; positions[4].left = '35%';\n positions[2].width = '288px'; positions[2].height = '176px'; positions[2].left = '60%';\n positions[3].width = '288px'; positions[3].height = '176px'; positions[3].left = '40%';\n } else if (width <= 768 && width > 576) {\n positions[0].width = '420px'; positions[0].height = '269.5px';\n positions[1].width = '322px'; positions[1].height = '209px'; positions[1].left = '67%';\n positions[4].width = '322px'; positions[4].height = '209px'; positions[4].left = '33%';\n positions[2].width = '252px'; positions[2].height = '159.5px'; positions[2].left = '62%';\n positions[3].width = '252px'; positions[3].height = '159.5px'; positions[3].left = '38%';\n } else if (width <= 576) {\n positions[0].width = '360px'; positions[0].height = '231px';\n positions[1].width = '276px'; positions[1].height = '176px'; positions[1].left = '68%';\n positions[4].width = '276px'; positions[4].height = '176px'; positions[4].left = '32%';\n positions[2].width = '216px'; positions[2].height = '132px'; positions[2].left = '64%';\n positions[3].width = '216px'; positions[3].height = '132px'; positions[3].left = '36%';\n } else {\n \/\/ Valores por defecto\n positions[0].width = '600px'; positions[0].height = '385px';\n positions[1].width = '460px'; positions[1].height = '286px'; positions[1].left = '65%';\n positions[4].width = '460px'; positions[4].height = '286px'; positions[4].left = '35%';\n positions[2].width = '360px'; positions[2].height = '231px'; positions[2].left = '60%';\n positions[3].width = '360px'; positions[3].height = '231px'; positions[3].left = '40%';\n }\n \n updatePositions();\n }\n \n \/\/ Escuchar cambios de tama\u00f1o\n window.addEventListener('resize', updateResponsivePositions);\n });\n <\/script><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"drulpdQQ06GN_drulpdQQ06GN\" class=\"brz-section brz-css-d-ynf0il brz-css-8fan6w\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1r87aq2\" data-brz-custom-id=\"r_dhnwJ8yk_J\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-1lnr7mw\"><\/div>\n<\/div>\n<\/section>\n<section id=\"yAeAMzYgVFW0_yAeAMzYgVFW0\" class=\"brz-section brz-css-d-ynf0il brz-css-191xie6\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1uqlxzt\" data-brz-custom-id=\"xp2kEvPqCdSw\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-jleyza\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-89cgey brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1is0dwp\" data-brz-custom-id=\"eN3p84NcMK_M\">\n<div>\n<div class=\"vertical-expand-carousel\">\n <!-- Carrusel de reviews con textos expandibles --><\/p>\n<div class=\"carousel-expand-wrapper\">\n<div class=\"track-expand\">\n <!-- Review 1 --><\/p>\n<div class=\"card-expand\" data-full-text=\"Excelente restaurante para almorzar. Muy amables y cordiales para atender. La comida es muy buena, de calidad. Lo mejor es el men\u00fa que incluye sopa y jugo. Es un buen precio por una buena comida. Muchas gracias!\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">F<\/div>\n<div class=\"name-expand\">Felipe del Solar<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excelente restaurante para almorzar. Muy amables y cordiales para atender...\"<\/p>\n<p class=\"full-text\">\"Excelente restaurante para almorzar. Muy amables y cordiales para atender. La comida es muy buena, de calidad. Lo mejor es el men\u00fa que incluye sopa y jugo. Es un buen precio por una buena comida. Muchas gracias!\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 2 --><\/p>\n<div class=\"card-expand\" data-full-text=\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial. Siempre comemos aqu\u00ed varias veces cuando visitamos Medell\u00edn.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">D<\/div>\n<div class=\"name-expand\">Daniel Vining<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial...\"<\/p>\n<p class=\"full-text\">\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial. Siempre comemos aqu\u00ed varias veces cuando visitamos Medell\u00edn.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 1 mes<\/div>\n<\/p><\/div>\n<p> <!-- Review 3 --><\/p>\n<div class=\"card-expand\" data-full-text=\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos. Comida deliciosa.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">S<\/div>\n<div class=\"name-expand\">Samantha Gomez<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos...\"<\/p>\n<p class=\"full-text\">\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos. Comida deliciosa.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 4 --><\/p>\n<div class=\"card-expand\" data-full-text=\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias. La remodelaci\u00f3n les qued\u00f3 muy bien.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">O<\/div>\n<div class=\"name-expand\">Omar Rueda<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias...\"<\/p>\n<p class=\"full-text\">\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias. La remodelaci\u00f3n les qued\u00f3 muy bien.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 meses<\/div>\n<\/p><\/div>\n<p> <!-- Review 5 --><\/p>\n<div class=\"card-expand\" data-full-text=\"Tan bueno, tan fresco y un servicio incre\u00edble.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">H<\/div>\n<div class=\"name-expand\">Herminia Vaz<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Tan bueno, tan fresco y un servicio incre\u00edble.\"<\/p>\n<p class=\"full-text\">\"Tan bueno, tan fresco y un servicio incre\u00edble.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 1 mes<\/div>\n<\/p><\/div>\n<p> <!-- Review 6 --><\/p>\n<div class=\"card-expand\" data-full-text=\"Los pancakes estaban incre\u00edbles!\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">M<\/div>\n<div class=\"name-expand\">Miguel A.<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Los pancakes estaban incre\u00edbles!\"<\/p>\n<p class=\"full-text\">\"Los pancakes estaban incre\u00edbles!\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 7 --><\/p>\n<div class=\"card-expand\" data-full-text=\"Excelente lugar para desayunar, limpio tranquilo y la atenci\u00f3n de Andreina fue genial. 10000% recomendado.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">J<\/div>\n<div class=\"name-expand\">Johan Reyes<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excelente lugar para desayunar, limpio tranquilo y la atenci\u00f3n de Andreina fue genial...\"<\/p>\n<p class=\"full-text\">\"Excelente lugar para desayunar, limpio tranquilo y la atenci\u00f3n de Andreina fue genial. 10000% recomendado.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 semanas<\/div>\n<\/p><\/div>\n<p> <!-- NUEVOS REVIEWS A PARTIR DE AQU\u00cd --><\/p>\n<p> <!-- Review 8 - Rod Major --><\/p>\n<div class=\"card-expand\" data-full-text=\"Excellent stop in Poblado\/Provenza area of Medell\u00edn. Broad menu and very attentive staff.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">R<\/div>\n<div class=\"name-expand\">Rod Major<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excellent stop in Poblado\/Provenza area of Medell\u00edn. Broad menu and very attentive staff...\"<\/p>\n<p class=\"full-text\">\"Excellent stop in Poblado\/Provenza area of Medell\u00edn. Broad menu and very attentive staff.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 9 - Danny Teklehaimanot --><\/p>\n<div class=\"card-expand\" data-full-text=\"You have to check this place for brunch or lunch if you are in Medellin.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">D<\/div>\n<div class=\"name-expand\">Danny Teklehaimanot<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"You have to check this place for brunch or lunch if you are in Medellin...\"<\/p>\n<p class=\"full-text\">\"You have to check this place for brunch or lunch if you are in Medellin.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 10 - Daniel --><\/p>\n<div class=\"card-expand\" data-full-text=\"Excelente servicio por parte del personal del restaurante, la comida se sirvi\u00f3 r\u00e1pidamente y estaba bien cocinada, el mejor caf\u00e9 hasta ahora.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">D<\/div>\n<div class=\"name-expand\">Daniel<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excelente servicio por parte del personal del restaurante, la comida se sirvi\u00f3 r\u00e1pidamente...\"<\/p>\n<p class=\"full-text\">\"Excelente servicio por parte del personal del restaurante, la comida se sirvi\u00f3 r\u00e1pidamente y estaba bien cocinada, el mejor caf\u00e9 hasta ahora.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 11 - Alejandra Rueda --><\/p>\n<div class=\"card-expand\" data-full-text=\"Dandre Gourmet es de los mejores restaurantes en Medell\u00edn. La comida es deliciosa, con una presentaci\u00f3n impecable y un servicio s\u00faper c\u00e1lido. Tiene opciones muy completas y frescas, ideales si buscas restaurantes saludables en la zona. Perfecto para celebrar cumplea\u00f1os o cualquier ocasi\u00f3n especial. Sin duda uno de los restaurantes gourmet que m\u00e1s vale la pena en El Poblado.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">A<\/div>\n<div class=\"name-expand\">Alejandra Rueda<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Dandre Gourmet es de los mejores restaurantes en Medell\u00edn. La comida es deliciosa, con una presentaci\u00f3n impecable...\"<\/p>\n<p class=\"full-text\">\"Dandre Gourmet es de los mejores restaurantes en Medell\u00edn. La comida es deliciosa, con una presentaci\u00f3n impecable y un servicio s\u00faper c\u00e1lido. Tiene opciones muy completas y frescas, ideales si buscas restaurantes saludables en la zona. Perfecto para celebrar cumplea\u00f1os o cualquier ocasi\u00f3n especial. Sin duda uno de los restaurantes gourmet que m\u00e1s vale la pena en El Poblado.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 1 d\u00eda<\/div>\n<\/p><\/div>\n<p> <!-- Review 12 - Genet Pierre --><\/p>\n<div class=\"card-expand\" data-full-text=\"Awesome atmosphere and service!! Food is amazing! I visit every time I'm here!\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">G<\/div>\n<div class=\"name-expand\">Genet Pierre<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Awesome atmosphere and service!! Food is amazing! I visit every time I'm here!...\"<\/p>\n<p class=\"full-text\">\"Awesome atmosphere and service!! Food is amazing! I visit every time I'm here!\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 13 - Shane Rice --><\/p>\n<div class=\"card-expand\" data-full-text=\"This place is an absolute gem! The food was amazing and the service was great.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">S<\/div>\n<div class=\"name-expand\">Shane Rice<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"This place is an absolute gem! The food was amazing and the service was great...\"<\/p>\n<p class=\"full-text\">\"This place is an absolute gem! The food was amazing and the service was great.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- Review 14 - Shawn Holloway --><\/p>\n<div class=\"card-expand\" data-full-text=\"Good american breakfast, when I visit Medell\u00edn I always come here for breakfast.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">S<\/div>\n<div class=\"name-expand\">Shawn Holloway<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Good american breakfast, when I visit Medell\u00edn I always come here for breakfast...\"<\/p>\n<p class=\"full-text\">\"Good american breakfast, when I visit Medell\u00edn I always come here for breakfast.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- PRIMER DUPLICADO PARA EFECTO LOOP INFINITO EN DESKTOP --><\/p>\n<div class=\"card-expand\" data-full-text=\"Excelente restaurante para almorzar. Muy amables y cordiales para atender. La comida es muy buena, de calidad. Lo mejor es el men\u00fa que incluye sopa y jugo. Es un buen precio por una buena comida. Muchas gracias!\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">F<\/div>\n<div class=\"name-expand\">Felipe del Solar<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excelente restaurante para almorzar. Muy amables y cordiales para atender...\"<\/p>\n<p class=\"full-text\">\"Excelente restaurante para almorzar. Muy amables y cordiales para atender. La comida es muy buena, de calidad. Lo mejor es el men\u00fa que incluye sopa y jugo. Es un buen precio por una buena comida. Muchas gracias!\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial. Siempre comemos aqu\u00ed varias veces cuando visitamos Medell\u00edn.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">D<\/div>\n<div class=\"name-expand\">Daniel Vining<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial...\"<\/p>\n<p class=\"full-text\">\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial. Siempre comemos aqu\u00ed varias veces cuando visitamos Medell\u00edn.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 1 mes<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos. Comida deliciosa.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">S<\/div>\n<div class=\"name-expand\">Samantha Gomez<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos...\"<\/p>\n<p class=\"full-text\">\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos. Comida deliciosa.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias. La remodelaci\u00f3n les qued\u00f3 muy bien.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">O<\/div>\n<div class=\"name-expand\">Omar Rueda<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias...\"<\/p>\n<p class=\"full-text\">\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias. La remodelaci\u00f3n les qued\u00f3 muy bien.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 meses<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Tan bueno, tan fresco y un servicio incre\u00edble.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">H<\/div>\n<div class=\"name-expand\">Herminia Vaz<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Tan bueno, tan fresco y un servicio incre\u00edble.\"<\/p>\n<p class=\"full-text\">\"Tan bueno, tan fresco y un servicio incre\u00edble.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 1 mes<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Los pancakes estaban incre\u00edbles!\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">M<\/div>\n<div class=\"name-expand\">Miguel A.<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Los pancakes estaban incre\u00edbles!\"<\/p>\n<p class=\"full-text\">\"Los pancakes estaban incre\u00edbles!\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Excelente lugar para desayunar, limpio tranquilo y la atenci\u00f3n de Andreina fue genial. 10000% recomendado.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">J<\/div>\n<div class=\"name-expand\">Johan Reyes<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excelente lugar para desayunar, limpio tranquilo y la atenci\u00f3n de Andreina fue genial...\"<\/p>\n<p class=\"full-text\">\"Excelente lugar para desayunar, limpio tranquilo y la atenci\u00f3n de Andreina fue genial. 10000% recomendado.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Excellent stop in Poblado\/Provenza area of Medell\u00edn. Broad menu and very attentive staff.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">R<\/div>\n<div class=\"name-expand\">Rod Major<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excellent stop in Poblado\/Provenza area of Medell\u00edn. Broad menu and very attentive staff...\"<\/p>\n<p class=\"full-text\">\"Excellent stop in Poblado\/Provenza area of Medell\u00edn. Broad menu and very attentive staff.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"You have to check this place for brunch or lunch if you are in Medellin.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">D<\/div>\n<div class=\"name-expand\">Danny Teklehaimanot<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"You have to check this place for brunch or lunch if you are in Medellin...\"<\/p>\n<p class=\"full-text\">\"You have to check this place for brunch or lunch if you are in Medellin.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Excelente servicio por parte del personal del restaurante, la comida se sirvi\u00f3 r\u00e1pidamente y estaba bien cocinada, el mejor caf\u00e9 hasta ahora.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">D<\/div>\n<div class=\"name-expand\">Daniel<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excelente servicio por parte del personal del restaurante, la comida se sirvi\u00f3 r\u00e1pidamente...\"<\/p>\n<p class=\"full-text\">\"Excelente servicio por parte del personal del restaurante, la comida se sirvi\u00f3 r\u00e1pidamente y estaba bien cocinada, el mejor caf\u00e9 hasta ahora.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Dandre Gourmet es de los mejores restaurantes en Medell\u00edn. La comida es deliciosa, con una presentaci\u00f3n impecable y un servicio s\u00faper c\u00e1lido. Tiene opciones muy completas y frescas, ideales si buscas restaurantes saludables en la zona. Perfecto para celebrar cumplea\u00f1os o cualquier ocasi\u00f3n especial. Sin duda uno de los restaurantes gourmet que m\u00e1s vale la pena en El Poblado.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">A<\/div>\n<div class=\"name-expand\">Alejandra Rueda<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Dandre Gourmet es de los mejores restaurantes en Medell\u00edn. La comida es deliciosa, con una presentaci\u00f3n impecable...\"<\/p>\n<p class=\"full-text\">\"Dandre Gourmet es de los mejores restaurantes en Medell\u00edn. La comida es deliciosa, con una presentaci\u00f3n impecable y un servicio s\u00faper c\u00e1lido. Tiene opciones muy completas y frescas, ideales si buscas restaurantes saludables en la zona. Perfecto para celebrar cumplea\u00f1os o cualquier ocasi\u00f3n especial. Sin duda uno de los restaurantes gourmet que m\u00e1s vale la pena en El Poblado.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 1 d\u00eda<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Awesome atmosphere and service!! Food is amazing! I visit every time I'm here!\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">G<\/div>\n<div class=\"name-expand\">Genet Pierre<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Awesome atmosphere and service!! Food is amazing! I visit every time I'm here!...\"<\/p>\n<p class=\"full-text\">\"Awesome atmosphere and service!! Food is amazing! I visit every time I'm here!\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"This place is an absolute gem! The food was amazing and the service was great.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">S<\/div>\n<div class=\"name-expand\">Shane Rice<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"This place is an absolute gem! The food was amazing and the service was great...\"<\/p>\n<p class=\"full-text\">\"This place is an absolute gem! The food was amazing and the service was great.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Good american breakfast, when I visit Medell\u00edn I always come here for breakfast.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">S<\/div>\n<div class=\"name-expand\">Shawn Holloway<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Good american breakfast, when I visit Medell\u00edn I always come here for breakfast...\"<\/p>\n<p class=\"full-text\">\"Good american breakfast, when I visit Medell\u00edn I always come here for breakfast.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<p> <!-- SEGUNDO DUPLICADO PARA MEJOR EFECTO LOOP --><\/p>\n<div class=\"card-expand\" data-full-text=\"Excelente restaurante para almorzar. Muy amables y cordiales para atender. La comida es muy buena, de calidad. Lo mejor es el men\u00fa que incluye sopa y jugo. Es un buen precio por una buena comida. Muchas gracias!\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">F<\/div>\n<div class=\"name-expand\">Felipe del Solar<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Excelente restaurante para almorzar. Muy amables y cordiales para atender...\"<\/p>\n<p class=\"full-text\">\"Excelente restaurante para almorzar. Muy amables y cordiales para atender. La comida es muy buena, de calidad. Lo mejor es el men\u00fa que incluye sopa y jugo. Es un buen precio por una buena comida. Muchas gracias!\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial. Siempre comemos aqu\u00ed varias veces cuando visitamos Medell\u00edn.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">D<\/div>\n<div class=\"name-expand\">Daniel Vining<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial...\"<\/p>\n<p class=\"full-text\">\"\u00a1Un lugar genial! Solemos venir a desayunar, pero el almuerzo tambi\u00e9n es genial. Siempre comemos aqu\u00ed varias veces cuando visitamos Medell\u00edn.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 1 mes<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos. Comida deliciosa.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">S<\/div>\n<div class=\"name-expand\">Samantha Gomez<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos...\"<\/p>\n<p class=\"full-text\">\"Un lugar incre\u00edble para brunch y almuerzo. El servicio y el personal son fabulosos. Comida deliciosa.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 3 semanas<\/div>\n<\/p><\/div>\n<div class=\"card-expand\" data-full-text=\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias. La remodelaci\u00f3n les qued\u00f3 muy bien.\">\n<div class=\"card-expand-header\">\n<div class=\"avatar-expand\">O<\/div>\n<div class=\"name-expand\">Omar Rueda<\/div>\n<\/p><\/div>\n<div class=\"stars-expand\">\u2605\u2605\u2605\u2605\u2605<\/div>\n<div class=\"text-expand\">\n<p class=\"short-text\">\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias...\"<\/p>\n<p class=\"full-text\">\"El solomito en salsa de champi\u00f1ones fue espectacular. Muchas gracias. La remodelaci\u00f3n les qued\u00f3 muy bien.\"<\/p>\n<\/p><\/div>\n<div class=\"expand-btn\">Ver m\u00e1s<\/div>\n<div class=\"date-expand\">Hace 2 meses<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- Contador --><\/p>\n<div class=\"counter-expand\">\n<div class=\"counter-number-expand\">+636<\/div>\n<div class=\"counter-label-expand\">opiniones<\/div>\n<\/p><\/div>\n<\/div>\n<style>\n\/* ESTILOS PRINCIPALES - TARJETAS VERTICALES CON EXPANSI\u00d3N *\/\n.vertical-expand-carousel {\n max-width: 1300px;\n margin: 0 auto;\n padding: 40px 20px;\n position: relative;\n}<\/p>\n<p>.carousel-expand-wrapper {\n overflow: hidden;\n position: relative;\n margin-bottom: 40px;\n padding: 10px 0;\n}<\/p>\n<p>.track-expand {\n display: flex;\n gap: 25px;\n animation: slideExpand 70s linear infinite;\n width: max-content;\n}<\/p>\n<p>.track-expand:hover {\n animation-play-state: paused;\n}<\/p>\n<p>\/* TARJETA PRINCIPAL - M\u00c1S ANCHA PARA TEXTO *\/\n.card-expand {\n width: 320px; \/* M\u00c1S ANCHO *\/\n height: 380px; \/* ALTO *\/\n background: white;\n border-radius: 20px;\n padding: 25px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid #e8e8e8;\n transition: all 0.4s ease;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n flex-shrink: 0;\n cursor: pointer;\n}<\/p>\n<p>.card-expand:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n border-color: #d0d0d0;\n}<\/p>\n<p>.card-expand.expanded {\n height: auto;\n min-height: 380px;\n z-index: 10;\n box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);\n}<\/p>\n<p>\/* HEADER *\/\n.card-expand-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 15px;\n flex-shrink: 0;\n}<\/p>\n<p>\/* SOLO CAMBI\u00c9 ESTO: Avatar con color #1A3E5F *\/\n.avatar-expand {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: #1A3E5F; \/* SOLO CAMBI\u00c9 ESTO *\/\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 1.5rem;\n flex-shrink: 0;\n}<\/p>\n<p>.name-expand {\n font-size: 1.1rem;\n font-weight: 700;\n color: #333;\n line-height: 1.3;\n}<\/p>\n<p>\/* ESTRELLAS *\/\n.stars-expand {\n color: #FFD700;\n font-size: 1.1rem;\n margin: 10px 0 20px 0;\n letter-spacing: 2px;\n flex-shrink: 0;\n}<\/p>\n<p>\/* CONTENEDOR DE TEXTO *\/\n.text-expand {\n flex: 1;\n position: relative;\n overflow: hidden;\n margin-bottom: 15px;\n}<\/p>\n<p>.short-text {\n color: #555;\n line-height: 1.6;\n font-size: 0.95rem;\n font-style: italic;\n margin: 0;\n transition: all 0.3s ease;\n}<\/p>\n<p>.card-expand.expanded .short-text {\n opacity: 0;\n height: 0;\n margin: 0;\n}<\/p>\n<p>.full-text {\n color: #555;\n line-height: 1.7;\n font-size: 0.95rem;\n font-style: italic;\n margin: 0;\n opacity: 0;\n max-height: 0;\n overflow: hidden;\n transition: all 0.4s ease;\n}<\/p>\n<p>.card-expand.expanded .full-text {\n opacity: 1;\n max-height: 500px;\n animation: fadeInText 0.5s ease forwards;\n}<\/p>\n<p>@keyframes fadeInText {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>\/* SOLO CAMBI\u00c9 ESTO: Bot\u00f3n de expansi\u00f3n con color #1A3E5F *\/\n.expand-btn {\n color: #1A3E5F; \/* SOLO CAMBI\u00c9 ESTO *\/\n font-size: 0.9rem;\n font-weight: 600;\n text-align: center;\n padding: 8px 0;\n border-radius: 8px;\n background: rgba(26, 62, 95, 0.08); \/* SOLO CAMBI\u00c9 ESTO *\/\n transition: all 0.3s ease;\n margin-top: 10px;\n cursor: pointer;\n flex-shrink: 0;\n}<\/p>\n<p>.expand-btn:hover {\n background: rgba(26, 62, 95, 0.15); \/* SOLO CAMBI\u00c9 ESTO *\/\n transform: translateY(-2px);\n}<\/p>\n<p>.card-expand.expanded .expand-btn {\n background: rgba(26, 62, 95, 0.2); \/* SOLO CAMBI\u00c9 ESTO *\/\n color: #1A3E5F; \/* SOLO CAMBI\u00c9 ESTO *\/\n}<\/p>\n<p>\/* FECHA *\/\n.date-expand {\n color: #888;\n font-size: 0.85rem;\n text-align: center;\n padding-top: 15px;\n margin-top: 15px;\n border-top: 1px solid #eee;\n flex-shrink: 0;\n}<\/p>\n<p>\/* SOLO CAMBI\u00c9 ESTO: Contador con color #1A3E5F *\/\n.counter-expand {\n text-align: center;\n padding: 15px 30px;\n background: #1A3E5F; \/* SOLO CAMBI\u00c9 ESTO *\/\n border-radius: 16px;\n max-width: 200px;\n margin: 0 auto;\n box-shadow: 0 8px 25px rgba(26, 62, 95, 0.3); \/* SOLO CAMBI\u00c9 ESTO *\/\n}<\/p>\n<p>.counter-number-expand {\n font-size: 2.2rem;\n font-weight: 900;\n color: white;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\n}<\/p>\n<p>.counter-label-expand {\n color: rgba(255, 255, 255, 0.95);\n font-size: 1rem;\n font-weight: 600;\n letter-spacing: 1px;\n margin-top: 5px;\n}<\/p>\n<p>\/* ANIMACI\u00d3N DEL CARRUSEL - ACTUALIZADA PARA M\u00c1S TARJETAS *\/\n@keyframes slideExpand {\n 0% {\n transform: translateX(0);\n }\n 100% {\n \/* 14 tarjetas originales + 14 del primer duplicado + 4 del segundo = 32 tarjetas *\/\n transform: translateX(calc(-320px * 32 - 25px * 32));\n }\n}<\/p>\n<p>\/* RESPONSIVE *\/\n@media (max-width: 1200px) {\n .card-expand {\n width: 300px;\n height: 370px;\n }<\/p>\n<p> @keyframes slideExpand {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(calc(-300px * 32 - 25px * 32));\n }\n }\n}<\/p>\n<p>@media (max-width: 992px) {\n .card-expand {\n width: 280px;\n height: 360px;\n padding: 22px;\n }<\/p>\n<p> .avatar-expand {\n width: 55px;\n height: 55px;\n font-size: 1.4rem;\n }<\/p>\n<p> .name-expand {\n font-size: 1.05rem;\n }<\/p>\n<p> .short-text, .full-text {\n font-size: 0.92rem;\n }<\/p>\n<p> .counter-expand {\n max-width: 180px;\n padding: 12px 25px;\n }<\/p>\n<p> .counter-number-expand {\n font-size: 2rem;\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .vertical-expand-carousel {\n padding: 30px 15px;\n }<\/p>\n<p> .card-expand {\n width: 260px;\n height: 350px;\n padding: 20px;\n }<\/p>\n<p> .avatar-expand {\n width: 50px;\n height: 50px;\n font-size: 1.3rem;\n }<\/p>\n<p> .name-expand {\n font-size: 1rem;\n }<\/p>\n<p> .short-text, .full-text {\n font-size: 0.9rem;\n line-height: 1.6;\n }<\/p>\n<p> .stars-expand {\n font-size: 1rem;\n margin: 8px 0 15px 0;\n }<\/p>\n<p> .expand-btn {\n font-size: 0.85rem;\n padding: 7px 0;\n }<\/p>\n<p> .date-expand {\n font-size: 0.82rem;\n padding-top: 12px;\n }\n}<\/p>\n<p>@media (max-width: 576px) {\n .card-expand {\n width: 240px;\n height: 340px;\n padding: 18px;\n }<\/p>\n<p> .track-expand {\n gap: 20px;\n }\n}<\/p>\n<p>\/* EFECTO DE EXPANSI\u00d3N PARA M\u00d3VILES *\/\n@media (max-width: 768px) {\n .card-expand.expanded {\n height: auto;\n min-height: 400px;\n }\n}<\/p>\n<p>\/* COMPATIBILIDAD BRIZY *\/\n.vertical-expand-carousel * {\n box-sizing: border-box !important;\n}<\/p>\n<p>\/* =========================================== *\/\n\/* NUEVOS ESTILOS ESPEC\u00cdFICOS PARA M\u00d3VIL *\/\n\/* No afectan la versi\u00f3n de computador *\/\n\/* =========================================== *\/<\/p>\n<p>@media (max-width: 768px) {\n .vertical-expand-carousel {\n width: 100%;\n max-width: 100%;\n padding: 30px 10px;\n overflow-x: hidden;\n }<\/p>\n<p> .carousel-expand-wrapper {\n margin-bottom: 30px;\n padding: 5px 0;\n }<\/p>\n<p> .track-expand {\n gap: 20px;\n animation: slideExpandMobile 80s linear infinite;\n width: max-content;\n padding: 0 10px;\n }<\/p>\n<p> .card-expand {\n width: 280px;\n height: 340px;\n padding: 20px;\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n }<\/p>\n<p> .card-expand:hover {\n transform: none;\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n }<\/p>\n<p> \/* Animaci\u00f3n espec\u00edfica para m\u00f3vil *\/\n @keyframes slideExpandMobile {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(calc(-280px * 32 - 20px * 32));\n }\n }<\/p>\n<p> \/* Ajuste del avatar para m\u00f3vil *\/\n .avatar-expand {\n width: 50px;\n height: 50px;\n font-size: 1.3rem;\n }<\/p>\n<p> .name-expand {\n font-size: 1rem;\n }<\/p>\n<p> .stars-expand {\n font-size: 1rem;\n margin: 10px 0 15px 0;\n }<\/p>\n<p> .short-text, .full-text {\n font-size: 0.9rem;\n line-height: 1.5;\n }<\/p>\n<p> .expand-btn {\n font-size: 0.85rem;\n padding: 8px 0;\n margin-top: 8px;\n }<\/p>\n<p> .date-expand {\n font-size: 0.8rem;\n padding-top: 12px;\n margin-top: 12px;\n }<\/p>\n<p> \/* Contador ajustado para m\u00f3vil *\/\n .counter-expand {\n max-width: 170px;\n padding: 12px 20px;\n margin-top: 20px;\n }<\/p>\n<p> .counter-number-expand {\n font-size: 1.8rem;\n }<\/p>\n<p> .counter-label-expand {\n font-size: 0.9rem;\n }\n}<\/p>\n<p>\/* Para m\u00f3viles muy peque\u00f1os *\/\n@media (max-width: 480px) {\n .vertical-expand-carousel {\n padding: 20px 5px;\n }<\/p>\n<p> .track-expand {\n gap: 15px;\n animation: slideExpandMobileSmall 70s linear infinite;\n padding: 0 5px;\n }<\/p>\n<p> .card-expand {\n width: 260px;\n height: 330px;\n padding: 18px;\n }<\/p>\n<p> @keyframes slideExpandMobileSmall {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(calc(-260px * 32 - 15px * 32));\n }\n }<\/p>\n<p> .avatar-expand {\n width: 45px;\n height: 45px;\n font-size: 1.2rem;\n }<\/p>\n<p> .name-expand {\n font-size: 0.95rem;\n }<\/p>\n<p> .short-text, .full-text {\n font-size: 0.85rem;\n line-height: 1.5;\n }<\/p>\n<p> .counter-expand {\n max-width: 150px;\n padding: 10px 15px;\n }<\/p>\n<p> .counter-number-expand {\n font-size: 1.6rem;\n }<\/p>\n<p> .counter-label-expand {\n font-size: 0.85rem;\n }\n}<\/p>\n<p>\/* Para m\u00f3viles extra peque\u00f1os *\/\n@media (max-width: 360px) {\n .track-expand {\n gap: 12px;\n animation: slideExpandMobileXS 60s linear infinite;\n }<\/p>\n<p> .card-expand {\n width: 240px;\n height: 320px;\n padding: 16px;\n }<\/p>\n<p> @keyframes slideExpandMobileXS {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(calc(-240px * 32 - 12px * 32));\n }\n }<\/p>\n<p> .avatar-expand {\n width: 40px;\n height: 40px;\n font-size: 1.1rem;\n }<\/p>\n<p> .name-expand {\n font-size: 0.9rem;\n }<\/p>\n<p> .short-text, .full-text {\n font-size: 0.82rem;\n line-height: 1.4;\n }<\/p>\n<p> .expand-btn {\n font-size: 0.8rem;\n padding: 7px 0;\n }<\/p>\n<p> .date-expand {\n font-size: 0.78rem;\n }\n}<\/p>\n<p>\/* Touch scrolling mejorado para m\u00f3vil *\/\n@media (max-width: 768px) {\n .carousel-expand-wrapper {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none; \/* Firefox *\/\n }<\/p>\n<p> .carousel-expand-wrapper::-webkit-scrollbar {\n display: none; \/* Chrome, Safari, Opera *\/\n }<\/p>\n<p> .track-expand {\n animation: none !important;\n padding-bottom: 10px;\n }<\/p>\n<p> \/* Mejorar la experiencia t\u00e1ctil *\/\n .card-expand {\n cursor: default;\n -webkit-tap-highlight-color: transparent;\n }<\/p>\n<p> .expand-btn {\n touch-action: manipulation;\n }<\/p>\n<p> \/* Asegurar que el texto expandido sea legible *\/\n .card-expand.expanded {\n height: auto;\n min-height: 380px;\n max-height: 500px;\n overflow-y: auto;\n }\n}\n<\/style>\n<p><script>\n\/\/ SCRIPT PARA EXPANSI\u00d3N DE TEXTOS\ndocument.addEventListener('DOMContentLoaded', function() {\n const track = document.querySelector('.track-expand');\n if (!track) return;<\/p>\n<p> \/\/ Verificar si estamos en m\u00f3vil\n const isMobile = window.innerWidth <= 768;\n \n \/\/ Animaci\u00f3n del carrusel solo para escritorio\n if (!isMobile) {\n track.addEventListener('mouseenter', function() {\n this.style.animationPlayState = 'paused';\n });\n \n track.addEventListener('mouseleave', function() {\n this.style.animationPlayState = 'running';\n });\n }\n \n \/\/ Expansi\u00f3n de tarjetas (funciona en ambos)\n const cards = document.querySelectorAll('.card-expand');\n \n cards.forEach(card => {\n const expandBtn = card.querySelector('.expand-btn');\n const shortText = card.querySelector('.short-text');\n const fullText = card.querySelector('.full-text');<\/p>\n<p> \/\/ Verificar si el texto corto es diferente del texto completo\n if (shortText.textContent.replace(\/[\".]\/g, '') === \n fullText.textContent.replace(\/[\".]\/g, '')) {\n expandBtn.style.display = 'none';\n }<\/p>\n<p> \/\/ Evento para expandir\n expandBtn.addEventListener('click', function(e) {\n e.stopPropagation();\n card.classList.toggle('expanded');<\/p>\n<p> if (card.classList.contains('expanded')) {\n expandBtn.textContent = 'Ver menos';\n \/\/ Detener animaci\u00f3n del carrusel temporalmente solo en escritorio\n if (!isMobile) {\n track.style.animationPlayState = 'paused';\n }\n } else {\n expandBtn.textContent = 'Ver m\u00e1s';\n \/\/ Reanudar despu\u00e9s de un breve momento solo en escritorio\n if (!isMobile) {\n setTimeout(() => {\n track.style.animationPlayState = 'running';\n }, 300);\n }\n }\n });<\/p>\n<p> \/\/ Tambi\u00e9n expandir al hacer clic en la tarjeta\n card.addEventListener('click', function(e) {\n if (!e.target.classList.contains('expand-btn')) {\n card.classList.toggle('expanded');<\/p>\n<p> if (card.classList.contains('expanded')) {\n expandBtn.textContent = 'Ver menos';\n if (!isMobile) {\n track.style.animationPlayState = 'paused';\n }\n } else {\n expandBtn.textContent = 'Ver m\u00e1s';\n if (!isMobile) {\n setTimeout(() => {\n track.style.animationPlayState = 'running';\n }, 300);\n }\n }\n }\n });\n });<\/p>\n<p> \/\/ Para touch devices (solo m\u00f3vil)\n if (isMobile) {\n let touchStartX = 0;\n let touchStartY = 0;\n let isScrolling = false;<\/p>\n<p> track.addEventListener('touchstart', function(e) {\n touchStartX = e.touches[0].clientX;\n touchStartY = e.touches[0].clientY;\n isScrolling = false;\n }, { passive: true });<\/p>\n<p> track.addEventListener('touchmove', function(e) {\n const touchX = e.touches[0].clientX;\n const touchY = e.touches[0].clientY;\n const diffX = Math.abs(touchX - touchStartX);\n const diffY = Math.abs(touchY - touchStartY);<\/p>\n<p> \/\/ Si se mueve m\u00e1s horizontal que vertical, es un scroll\n if (diffX > diffY && diffX > 5) {\n isScrolling = true;\n }\n }, { passive: true });<\/p>\n<p> track.addEventListener('touchend', function(e) {\n if (!isScrolling) {\n \/\/ Si no era un scroll, podr\u00eda ser un tap para expandir\n const touchEndX = e.changedTouches[0].clientX;\n const touchEndY = e.changedTouches[0].clientY;\n const diffX = Math.abs(touchEndX - touchStartX);\n const diffY = Math.abs(touchEndY - touchStartY);<\/p>\n<p> \/\/ Si fue un tap (poco movimiento)\n if (diffX < 5 && diffY < 5) {\n \/\/ El evento click ya manejar\u00e1 la expansi\u00f3n\n }\n }\n }, { passive: true });\n }\n});\n<\/script><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"eGqAN6IccRtt_eGqAN6IccRtt\" class=\"brz-section brz-css-d-ynf0il brz-css-1p6kln1\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1sjudyj\" data-brz-custom-id=\"wpSmTWv9iXtv\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-evht87\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-nqnvqu brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-j7dpom\" data-brz-custom-id=\"jaxlm2FWiBF7\">\n<div>\n<p> <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>De la Tierra a tu Mesa<\/title><br \/>\n <!-- Enlace a Google Fonts para Poppins -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n padding: 20px;\n font-family: 'Poppins', sans-serif;\n }<\/p>\n<p> .dandre-section {\n max-width: 1600px;\n margin: 0 auto;\n padding: 20px;\n }<\/p>\n<p> .features-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 30px;\n width: 100%;\n }<\/p>\n<p> .feature-card {\n background-color: #1A3E5F;\n border-radius: 12px;\n overflow: hidden;\n color: white;\n transition: transform 0.3s ease;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 280px;\n }<\/p>\n<p> .feature-card:hover {\n transform: translateY(-10px);\n }<\/p>\n<p> .feature-img-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 15px 0 5px 0;\n background-color: #1A3E5F;\n height: 110px;\n }<\/p>\n<p> .feature-img {\n width: auto;\n height: 55px;\n object-fit: contain;\n display: block;\n max-width: 75px;\n }<\/p>\n<p> .feature-content {\n padding: 5px 25px 20px 25px;\n flex-grow: 1;\n background-color: #1A3E5F;\n }<\/p>\n<p> .feature-title {\n font-size: 1.3rem;\n margin-bottom: 10px;\n color: white;\n text-align: center;\n font-weight: 600;\n font-family: 'Poppins', sans-serif;\n }<\/p>\n<p> .feature-description {\n line-height: 1.5;\n font-size: 0.85rem;\n color: rgba(255, 255, 255, 0.9);\n text-align: center;\n font-family: 'Poppins', sans-serif;\n }<\/p>\n<p> \/* Responsive *\/\n @media (max-width: 1200px) {\n .dandre-section {\n max-width: 95%;\n }<\/p>\n<p> .features-container {\n grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));\n }\n }<\/p>\n<p> @media (max-width: 992px) {\n .dandre-section {\n max-width: 98%;\n padding: 10px;\n }<\/p>\n<p> .features-container {\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 25px;\n }<\/p>\n<p> .feature-card {\n min-height: 260px;\n }\n }<\/p>\n<p> @media (max-width: 768px) {\n .features-container {\n grid-template-columns: 1fr;\n gap: 20px;\n }<\/p>\n<p> .feature-card {\n min-height: 240px;\n }<\/p>\n<p> .feature-img {\n height: 50px;\n max-width: 70px;\n }<\/p>\n<p> .feature-img-container {\n height: 100px;\n padding: 12px 0 5px 0;\n }<\/p>\n<p> .feature-content {\n padding: 5px 20px 18px 20px;\n }<\/p>\n<p> .feature-title {\n font-size: 1.2rem;\n }<\/p>\n<p> .feature-description {\n font-size: 0.82rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n body {\n padding: 10px;\n }<\/p>\n<p> .dandre-section {\n padding: 10px 5px;\n }<\/p>\n<p> .features-container {\n gap: 18px;\n }<\/p>\n<p> .feature-card {\n min-height: 230px;\n }<\/p>\n<p> .feature-img {\n height: 45px;\n max-width: 65px;\n }<\/p>\n<p> .feature-img-container {\n height: 95px;\n padding: 10px 0 5px 0;\n }<\/p>\n<p> .feature-content {\n padding: 5px 18px 16px 18px;\n }<\/p>\n<p> .feature-title {\n font-size: 1.15rem;\n margin-bottom: 8px;\n }<\/p>\n<p> .feature-description {\n font-size: 0.8rem;\n line-height: 1.45;\n }\n }\n <\/style>\n<section class=\"dandre-section\">\n <!-- Secci\u00f3n de caracter\u00edsticas (solo las 3 tarjetas) --><\/p>\n<div class=\"features-container\">\n <!-- Productos frescos --><\/p>\n<div class=\"feature-card\">\n<div class=\"feature-img-container\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-5.44.33-p.m.png\" alt=\"Productos frescos\" class=\"feature-img\">\n <\/div>\n<div class=\"feature-content\">\n<h3 class=\"feature-title\">Productos frescos<\/h3>\n<p class=\"feature-description\">Seleccionamos cuidadosamente cada producto para garantizar frescura, sabor y nutrici\u00f3n en cada plato. Trabajamos con proveedores locales para ofrecerte lo mejor de cada estaci\u00f3n.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- Cocina artesanal --><\/p>\n<div class=\"feature-card\">\n<div class=\"feature-img-container\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-5.45.36-p.m.png\" alt=\"Cocina artesanal\" class=\"feature-img\">\n <\/div>\n<div class=\"feature-content\">\n<h3 class=\"feature-title\">Cocina artesanal<\/h3>\n<p class=\"feature-description\">Preparaciones cuidadas desde el inicio: salsas, masas y aderezos hechos a mano, con recetas propias y procesos que preservan el sabor aut\u00e9ntico de nuestros ingredientes.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- Variedad --><\/p>\n<div class=\"feature-card\">\n<div class=\"feature-img-container\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-5.46.11-p.m.png\" alt=\"Variedad\" class=\"feature-img\">\n <\/div>\n<div class=\"feature-content\">\n<h3 class=\"feature-title\">Variedad<\/h3>\n<p class=\"feature-description\">Desde cl\u00e1sicos irresistibles hasta combinaciones innovadoras, nuestra carta ofrece alternativas para cada antojo y estilo de alimentaci\u00f3n.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"rgaxU9efHlyf_rgaxU9efHlyf\" class=\"brz-section brz-css-d-ynf0il brz-css-1sbfzas\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-17ll0uj\" data-brz-custom-id=\"q_NbUIUxjtox\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-4tux6u\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-onp3mb brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-nipot\" data-brz-custom-id=\"o14TwHLa_gr1\">\n<div><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<div id=\"seccion-reservas\" style=\"display: flex; min-height: 70vh; margin: 0; padding: 0; width: 100vw; font-family: 'Poppins', sans-serif;\">\n<p> <!-- MITAD IZQUIERDA - RAPPI (ID\u00c9NTICA) --><\/p>\n<div style=\"flex: 1; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; width: 50vw;\">\n<div style=\"max-width: 450px; width: 100%; text-align: center;\">\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-6.44.26-p.m.png\" alt=\"Rappi D'Andr\u00e9\" style=\"width: 100%; max-width: 350px; margin-bottom: 20px;\"><\/p>\n<h2 style=\"color: #333; font-size: 18px; margin-bottom: 3px; font-weight: 600;\">Pide por Rappi<\/h2>\n<p style=\"color: #333; font-size: 20px; margin-bottom: 25px; line-height: 1.5; font-weight: 700;\">\n Lo mejor de nuestra cocina,<br \/>donde t\u00fa est\u00e9s\n <\/p>\n<p> <a href=\"https:\/\/www.rappi.com.co\/restaurantes\/900056317-dandre-gourmet\" target=\"_blank\" style=\"display: inline-block; background: #1A3E5F; color: white; padding: 12px 35px; border: none; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s;\"><br \/>\n Pedir ahora<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<p> <!-- MITAD DERECHA - FORMULARIO (ID\u00c9NTICO VISUALMENTE) --><\/p>\n<div style=\"flex: 1; background: #1A3E5F; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; width: 50vw;\">\n<div style=\"max-width: 450px; width: 100%;\">\n<h2 style=\"text-align: center; color: white; font-size: 28px; margin-bottom: 10px; font-weight: 600;\">\n Reserva una mesa<br \/>\n <\/h2>\n<p style=\"text-align: center; color: #E0E0E0; margin-bottom: 25px; font-size: 13px; line-height: 1.5; font-weight: 400;\">\n Selecciona los datos de tu reserva y conseguiremos<br \/>los mejores asientos para ti\n <\/p>\n<p> <!-- FORMULARIO - AHORA CON CAMPOS DE CONTACTO Y WHATSAPP --><\/p>\n<form id=\"formulario-reserva\" style=\"background: #1A3E5F; padding: 0; width: 100%;\">\n<p> <!-- CAMPOS NUEVOS AGREGADOS --><\/p>\n<div style=\"margin-bottom: 18px; width: 100%;\">\n <label style=\"display: block; margin-bottom: 6px; font-weight: 500; color: white; font-size: 14px;\">Nombre completo *<\/label><br \/>\n <input type=\"text\" id=\"nombre\" required=\"\" style=\"width: 100%; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, 0.3); font-size: 14px; color: white; background: #1A3E5F; font-family: 'Poppins', sans-serif;\" placeholder=\"Tu nombre\">\n <\/div>\n<div style=\"margin-bottom: 18px; width: 100%;\">\n <label style=\"display: block; margin-bottom: 6px; font-weight: 500; color: white; font-size: 14px;\">Tel\u00e9fono *<\/label><br \/>\n <input type=\"tel\" id=\"telefono\" required=\"\" style=\"width: 100%; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, 0.3); font-size: 14px; color: white; background: #1A3E5F; font-family: 'Poppins', sans-serif;\" placeholder=\"Ej: 3001234567\">\n <\/div>\n<p> <!-- CAMPOS ORIGINALES DEL FORMULARIO --><\/p>\n<div style=\"margin-bottom: 18px; width: 100%;\">\n <label style=\"display: block; margin-bottom: 6px; font-weight: 500; color: white; font-size: 14px;\">Tama\u00f1o del grupo *<\/label><br \/>\n <select id=\"personas\" required=\"\" style=\"width: 100%; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, 0.3); font-size: 14px; color: white; background: #1A3E5F; font-family: 'Poppins', sans-serif;\"><option value=\"\" disabled=\"\" selected=\"\" style=\"color: rgba(255, 255, 255, 0.5);\">Seleccionar...<\/option><option value=\"2 personas\" style=\"background: #1A3E5F; color: white;\">2 personas<\/option><option value=\"3 personas\" style=\"background: #1A3E5F; color: white;\">3 personas<\/option><option value=\"4 personas\" style=\"background: #1A3E5F; color: white;\">4 personas<\/option><option value=\"5-6 personas\" style=\"background: #1A3E5F; color: white;\">5-6 personas<\/option><option value=\"7-8 personas\" style=\"background: #1A3E5F; color: white;\">7-8 personas<\/option><\/select>\n <\/div>\n<div style=\"margin-bottom: 18px; width: 100%;\">\n <label style=\"display: block; margin-bottom: 6px; font-weight: 500; color: white; font-size: 14px;\">Fecha *<\/label><br \/>\n <input type=\"date\" id=\"fecha\" required=\"\" style=\"width: 100%; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, 0.3); font-size: 14px; color: white; background: #1A3E5F; font-family: 'Poppins', sans-serif;\">\n <\/div>\n<div style=\"margin-bottom: 25px; width: 100%;\">\n <label style=\"display: block; margin-bottom: 6px; font-weight: 500; color: white; font-size: 14px;\">Hora *<\/label><br \/>\n <select id=\"hora\" required=\"\" style=\"width: 100%; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, 0.3); font-size: 14px; color: white; background: #1A3E5F; font-family: 'Poppins', sans-serif;\"><option value=\"\" disabled=\"\" selected=\"\" style=\"color: rgba(255, 255, 255, 0.5);\">Seleccionar...<\/option><option value=\"12:00 PM\">12:00 PM<\/option><option value=\"12:30 PM\">12:30 PM<\/option><option value=\"1:00 PM\">1:00 PM<\/option><option value=\"1:30 PM\">1:30 PM<\/option><option value=\"2:00 PM\">2:00 PM<\/option><option value=\"2:30 PM\">2:30 PM<\/option><option value=\"3:00 PM\">3:00 PM<\/option><option value=\"3:30 PM\">3:30 PM<\/option><option value=\"4:00 PM\">4:00 PM<\/option><option value=\"4:30 PM\">4:30 PM<\/option><option value=\"5:00 PM\">5:00 PM<\/option><option value=\"5:30 PM\">5:30 PM<\/option><option value=\"6:00 PM\">6:00 PM<\/option><option value=\"6:30 PM\">6:30 PM<\/option><option value=\"7:00 PM\">7:00 PM<\/option><option value=\"7:30 PM\">7:30 PM<\/option><option value=\"8:00 PM\">8:00 PM<\/option><option value=\"8:30 PM\">8:30 PM<\/option><option value=\"9:00 PM\">9:00 PM<\/option><option value=\"9:30 PM\">9:30 PM<\/option><\/select>\n <\/div>\n<p> <button type=\"submit\" style=\"width: 100%; background: white; color: #1A3E5F; padding: 14px; border: none; font-size: 16px; font-weight: 600; cursor: pointer; font-family: 'Poppins', sans-serif;\"><br \/>\n Buscar una mesa<br \/>\n <\/button><br \/>\n <\/form>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><!-- ESTILOS RESPONSIVE (MISMO DISE\u00d1O QUE EL ORIGINAL) --><\/p>\n<style>\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n<p>html, body {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n width: 100%;\n font-family: 'Poppins', sans-serif;\n}<\/p>\n<p>\/* CONTENEDOR PRINCIPAL *\/\ndiv[style*=\"display: flex; min-height: 70vh\"] {\n margin: 0 !important;\n padding: 0 !important;\n width: 100vw !important;\n max-width: 100vw !important;\n}<\/p>\n<p>\/* MITADES *\/\ndiv[style*=\"background: white\"] {\n margin: 0 !important;\n width: 50vw !important;\n max-width: 50vw !important;\n}<\/p>\n<p>div[style*=\"background: #1A3E5F\"] {\n margin: 0 !important;\n width: 50vw !important;\n max-width: 50vw !important;\n}<\/p>\n<p>\/* EFECTO HOVER BOT\u00d3N RAPPI *\/\na[href*=\"rappi.com.co\"]:hover {\n background: #0F2A47 !important;\n transform: translateY(-2px);\n}<\/p>\n<p>\/* ESTILOS PARA INPUTS Y SELECTS *\/\nselect, input[type=\"date\"], input[type=\"text\"], input[type=\"tel\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: 0;\n}<\/p>\n<p>input[type=\"date\"]::-webkit-calendar-picker-indicator {\n filter: invert(1);\n opacity: 0.7;\n cursor: pointer;\n}<\/p>\n<p>input[type=\"date\"]::-webkit-calendar-picker-indicator:hover {\n opacity: 1;\n}<\/p>\n<p>select option {\n background: #1A3E5F;\n color: white;\n}<\/p>\n<p>\/* ANIMACIONES SUAVES *\/\na, button, select, input {\n transition: all 0.3s ease;\n}<\/p>\n<p>\/* RESPONSIVE PARA M\u00d3VILES *\/\n@media (max-width: 768px) {\n div[style*=\"display: flex; min-height: 70vh\"] {\n flex-direction: column;\n width: 100vw !important;\n min-height: auto;\n }<\/p>\n<p> div[style*=\"background: white\"] {\n width: 100vw !important;\n max-width: 100vw !important;\n min-height: 50vh;\n padding: 20px 20px !important;\n }<\/p>\n<p> div[style*=\"background: #1A3E5F\"] {\n width: 100vw !important;\n max-width: 100vw !important;\n min-height: 50vh;\n padding: 25px 20px !important;\n }<\/p>\n<p> h2[style*=\"font-size: 28px\"] {\n font-size: 24px !important;\n }<\/p>\n<p> h2[style*=\"font-size: 18px\"] {\n font-size: 16px !important;\n }<\/p>\n<p> p[style*=\"font-size: 20px\"] {\n font-size: 18px !important;\n }<\/p>\n<p> p[style*=\"font-size: 13px\"] {\n font-size: 12px !important;\n }<\/p>\n<p> a[style*=\"font-size: 16px\"],\n button[style*=\"font-size: 16px\"] {\n font-size: 15px !important;\n padding: 12px 35px !important;\n }<\/p>\n<p> select, input[type=\"date\"], input[type=\"text\"], input[type=\"tel\"] {\n font-size: 15px !important;\n padding: 11px 13px !important;\n }\n}\n<\/style>\n<p><!-- SCRIPT PARA ENV\u00cdO A WHATSAPP --><br \/>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n const formulario = document.getElementById('formulario-reserva');<\/p>\n<p> \/\/ Configurar fecha m\u00ednima como hoy\n const fechaInput = document.getElementById('fecha');\n if (fechaInput) {\n const hoy = new Date().toISOString().split('T')[0];\n fechaInput.min = hoy;<\/p>\n<p> \/\/ Fecha por defecto: ma\u00f1ana\n const manana = new Date();\n manana.setDate(manana.getDate() + 1);\n fechaInput.value = manana.toISOString().split('T')[0];\n }<\/p>\n<p> \/\/ Manejar env\u00edo del formulario\n formulario.addEventListener('submit', function(event) {\n event.preventDefault();<\/p>\n<p> \/\/ Obtener todos los valores\n const nombre = document.getElementById('nombre').value.trim();\n const telefono = document.getElementById('telefono').value.trim();\n const personas = document.getElementById('personas').value;\n const fecha = document.getElementById('fecha').value;\n const hora = document.getElementById('hora').value;<\/p>\n<p> \/\/ Validar campos obligatorios\n if (!nombre || !telefono || !personas || !fecha || !hora) {\n alert('\u26a0\ufe0f Por favor, completa todos los campos obligatorios.');\n return;\n }<\/p>\n<p> \/\/ Validar formato de tel\u00e9fono (10 d\u00edgitos)\n const telefonoLimpio = telefono.replace(\/D\/g, '');\n if (telefonoLimpio.length !== 10) {\n alert('\u26a0\ufe0f Por favor, ingresa un n\u00famero de tel\u00e9fono v\u00e1lido de 10 d\u00edgitos.');\n return;\n }<\/p>\n<p> \/\/ Formatear fecha en espa\u00f1ol\n const fechaObj = new Date(fecha);\n const opciones = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };\n const fechaFormateada = fechaObj.toLocaleDateString('es-ES', opciones);<\/p>\n<p> \/\/ Crear mensaje para WhatsApp\n const mensajeWhatsApp = `*NUEVA RESERVA - D'ANDR\u00c9 GOURMET*%0A%0A` +\n `*\ud83d\udc64 Nombre:* ${nombre}%0A` +\n `*\ud83d\udcde Tel\u00e9fono:* ${telefonoLimpio}%0A` +\n `*\ud83d\udc65 Personas:* ${personas}%0A` +\n `*\ud83d\udcc5 Fecha:* ${fechaFormateada}%0A` +\n `*\u23f0 Hora:* ${hora}%0A%0A` +\n `_Reserva enviada desde el sitio web_`;<\/p>\n<p> \/\/ N\u00famero de WhatsApp - CONFIGURADO CON TU N\u00daMERO: 3174842695\n const numeroWhatsApp = '573174842695'; \/\/ Formato internacional con c\u00f3digo de pa\u00eds<\/p>\n<p> \/\/ Crear enlace de WhatsApp\n const whatsappURL = `https:\/\/wa.me\/${numeroWhatsApp}?text=${mensajeWhatsApp}`;<\/p>\n<p> \/\/ Mostrar confirmaci\u00f3n al usuario\n const confirmacion = confirm(`\u2705 Reserva lista para enviar:nn` +\n `Nombre: ${nombre}n` +\n `Tel\u00e9fono: ${telefonoLimpio}n` +\n `Personas: ${personas}n` +\n `Fecha: ${fechaFormateada}n` +\n `Hora: ${hora}nn` +\n `\u00bfAbrir WhatsApp para enviar la reserva?`);<\/p>\n<p> if (confirmacion) {\n \/\/ Abrir WhatsApp en nueva pesta\u00f1a\n window.open(whatsappURL, '_blank');<\/p>\n<p> \/\/ Opcional: Mostrar mensaje final\n alert('\ud83d\udcf1 WhatsApp se ha abierto con tu reserva. Solo debes hacer clic en \"Enviar\" para finalizar.');<\/p>\n<p> \/\/ Opcional: Resetear formulario\n \/\/ formulario.reset();\n }\n });<\/p>\n<p> \/\/ A\u00f1adir efectos hover a los inputs (igual que en tu c\u00f3digo original)\n const inputs = formulario.querySelectorAll('input, select');\n inputs.forEach(input => {\n input.addEventListener('focus', function() {\n this.style.borderColor = 'white';\n this.style.boxShadow = '0 0 0 2px rgba(255, 255, 255, 0.2)';\n });<\/p>\n<p> input.addEventListener('blur', function() {\n this.style.borderColor = 'rgba(255, 255, 255, 0.3)';\n this.style.boxShadow = 'none';\n });\n });\n});\n<\/script><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"parZlPzYb8qO_parZlPzYb8qO\" class=\"brz-section brz-css-d-ynf0il brz-css-1giezda\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1b7h6cb\" data-brz-custom-id=\"ebn0sL_hA5zo\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-z7azg6\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-4twqif brz-wrapper\">\n<div class=\"brz-map brz-map_styles brz-css-d-1aguiix brz-css-hwxl6c\" data-brz-custom-id=\"umh8ljTj8D1U\">\n<div class=\"brz-ui-ed-map-content\"><iframe class=\"intrinsic-ignore brz-ui-ed-iframe\" src=\"https:\/\/www.google.com\/maps\/embed\/v1\/place?key=AIzaSyCcywKcxXeMZiMwLDcLgyEnNglcLOyB_qw&q=D'Andr\u00e9 Restaurante Cafe Cra. 37 #10-15, El Poblado, Medell\u00edn, El Poblado, Medell\u00edn, Antioquia&zoom=15\" title=\"map\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"rqsth2lopHM4_rqsth2lopHM4\" class=\"brz-section brz-css-d-ynf0il brz-css-1rcq7ck\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-11h87f3\" data-brz-custom-id=\"m2FK5q1Leeet\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-1eypylm\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-u4l6ta brz-wrapper\">\n<div class=\"brz-map brz-map_styles brz-css-d-1aguiix\" data-brz-custom-id=\"sC8DDF78eVPs\">\n<div class=\"brz-ui-ed-map-content\"><iframe class=\"intrinsic-ignore brz-ui-ed-iframe\" src=\"https:\/\/www.google.com\/maps\/embed\/v1\/place?key=AIzaSyCcywKcxXeMZiMwLDcLgyEnNglcLOyB_qw&q=D'Andr\u00e9 Restaurante Caf\u00e9&zoom=15\" title=\"map\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"b2VTZIMu6YiS_b2VTZIMu6YiS\" class=\"brz-section brz-css-d-ynf0il brz-css-11mfm7k\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1dz33ut\" data-brz-custom-id=\"sDsptmMwdu0X\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-zddbon\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-1tgf4ai brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1mgk3sz\" data-brz-custom-id=\"paKaJQgQ76cv\">\n<div>\n<p> <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>Ubicaci\u00f3n Medell\u00edn - WordPress<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n background-color: #f5f5f5;\n padding: 20px;\n }<\/p>\n<p> .container {\n font-family: 'Poppins', sans-serif;\n position: relative;\n width: 100%;\n max-width: 1000px;\n margin: 0 auto;\n overflow: hidden;\n border-radius: 0;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }<\/p>\n<p> .image-container {\n position: relative;\n width: 100%;\n height: 400px;\n background-color: #000;\n border-radius: 0;\n }<\/p>\n<p> .image-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center 30%;\n opacity: 0.6;\n filter: brightness(0.8);\n transition: opacity 0.5s ease;\n border-radius: 0;\n }<\/p>\n<p> .image-container:hover img {\n opacity: 0.7;\n filter: brightness(0.9);\n }<\/p>\n<p> .text-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n text-align: center;\n padding: 20px;\n }<\/p>\n<p> .city-name {\n font-size: 2rem; \/* MUCHO m\u00e1s peque\u00f1o (era 4rem) *\/\n font-weight: 700;\n margin-bottom: 8px; \/* Menor separaci\u00f3n *\/\n text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);\n letter-spacing: 1px;\n }<\/p>\n<p> .address {\n font-size: 1.1rem; \/* Aumentado ligeramente *\/\n font-weight: 400;\n margin-bottom: 10px; \/* Reducido para acercar al tel\u00e9fono *\/\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);\n max-width: 70%;\n line-height: 1.4;\n }<\/p>\n<p> .phone {\n font-size: 1.1rem; \/* Tama\u00f1o similar a la direcci\u00f3n *\/\n font-weight: 600; \/* Un poco m\u00e1s grueso para destacar *\/\n margin-bottom: 30px; \/* Separaci\u00f3n con el bot\u00f3n *\/\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);\n color: white;\n letter-spacing: 0.5px;\n }<\/p>\n<p> \/* QUITADO: el cuadro negro detr\u00e1s del n\u00famero *\/\n \/* .phone span {\n background-color: rgba(0, 0, 0, 0.2);\n padding: 5px 15px;\n border-radius: 4px;\n font-weight: 700;\n } *\/<\/p>\n<p> .whatsapp-btn {\n background-color: white;\n color: #333;\n border: none;\n padding: 12px 30px; \/* M\u00e1s peque\u00f1o *\/\n font-size: 0.9rem; \/* M\u00e1s peque\u00f1o *\/\n font-weight: 600;\n font-family: 'Poppins', sans-serif;\n border-radius: 0;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);\n letter-spacing: 0.5px;\n border: 1px solid transparent;\n }<\/p>\n<p> .whatsapp-btn:hover {\n background-color: #f0f0f0;\n transform: translateY(-2px);\n box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);\n border-color: #ccc;\n }<\/p>\n<p> .whatsapp-btn:active {\n transform: translateY(0);\n }<\/p>\n<p> \/* Efectos de borde puntiagudo adicional *\/\n .container::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n background: linear-gradient(45deg, #fff, #ddd, #fff);\n z-index: -1;\n border-radius: 0;\n }<\/p>\n<p> \/* Responsive para tablets y m\u00f3viles *\/\n @media (max-width: 1024px) {\n .container {\n max-width: 95%;\n }<\/p>\n<p> .city-name {\n font-size: 1.8rem;\n }<\/p>\n<p> .address {\n font-size: 1rem;\n margin-bottom: 8px;\n }<\/p>\n<p> .phone {\n font-size: 1rem;\n margin-bottom: 25px;\n }\n }<\/p>\n<p> @media (max-width: 768px) {\n .image-container {\n height: 350px;\n }<\/p>\n<p> .city-name {\n font-size: 1.6rem;\n }<\/p>\n<p> .address {\n font-size: 0.95rem;\n margin-bottom: 8px;\n max-width: 80%;\n }<\/p>\n<p> .phone {\n font-size: 0.95rem;\n margin-bottom: 20px;\n }<\/p>\n<p> .whatsapp-btn {\n padding: 10px 25px;\n font-size: 0.85rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .image-container {\n height: 300px;\n }<\/p>\n<p> .city-name {\n font-size: 1.4rem;\n }<\/p>\n<p> .address {\n font-size: 0.85rem;\n margin-bottom: 6px;\n max-width: 85%;\n }<\/p>\n<p> .phone {\n font-size: 0.85rem;\n margin-bottom: 15px;\n }<\/p>\n<p> .whatsapp-btn {\n padding: 8px 20px;\n font-size: 0.8rem;\n }<\/p>\n<p> body {\n padding: 10px;\n }\n }<\/p>\n<p> \/* Para pantallas muy grandes *\/\n @media (min-width: 1600px) {\n .container {\n max-width: 1200px;\n }<\/p>\n<p> .image-container {\n height: 450px;\n }<\/p>\n<p> .city-name {\n font-size: 2.2rem; \/* Relativamente peque\u00f1o incluso en pantallas grandes *\/\n }<\/p>\n<p> .address {\n font-size: 1.2rem;\n }<\/p>\n<p> .phone {\n font-size: 1.2rem;\n }\n }\n <\/style>\n<div class=\"container\">\n<div class=\"image-container\">\n <!-- Imagen de fondo ACTUALIZADA --><br \/>\n <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2026\/08\/Portada.png\" alt=\"Medell\u00edn\"><\/p>\n<div class=\"text-overlay\">\n<h1 class=\"city-name\">Medell\u00edn<\/h1>\n<p class=\"address\">Carrera 37 #10-15 El Poblado<\/p>\n<p class=\"phone\">Tel: 604 777 9728<\/p>\n<p> <a href=\"https:\/\/wa.me\/573174842695?text=Hola%20estoy%20interesado%20en%20sus%20servicios\" class=\"whatsapp-btn\" target=\"_blank\">Contacto<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n const img = document.querySelector('.image-container img');<\/p>\n<p> \/\/ Efecto de carga de imagen\n img.addEventListener('load', function() {\n this.style.transition = 'opacity 1s ease';\n this.style.opacity = '0.6';\n });<\/p>\n<p> \/\/ Si la imagen ya est\u00e1 cargada (cach\u00e9)\n if (img.complete) {\n img.style.opacity = '0.6';\n }<\/p>\n<p> \/\/ Ajustar el recorte de imagen seg\u00fan el tama\u00f1o de pantalla\n function adjustImagePosition() {\n const width = window.innerWidth;\n if (width <= 768) {\n img.style.objectPosition = 'center 40%';\n } else {\n img.style.objectPosition = 'center 30%';\n }\n }\n \n \/\/ Ajustar al cargar y al redimensionar\n adjustImagePosition();\n window.addEventListener('resize', adjustImagePosition);\n });\n <\/script><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"qoI04rTQJEDv_qoI04rTQJEDv\" class=\"brz-section brz-css-d-ynf0il brz-css-12h6yin\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-i753qp\" data-brz-custom-id=\"fFZCsDb0ksWy\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-y6h5g2\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-gkqe9 brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-t9i5tj\" data-brz-custom-id=\"j3pLmb24x64M\">\n<div>\n<style>\n.dandroca-contacto-block {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n width: 100%;\n margin: 0 auto;\n padding: 20px 15px;\n color: white;\n background-color: #1A3E5F;\n font-size: 12px;\n box-sizing: border-box;\n}<\/p>\n<p>\/* Contenedor interno para centrar el contenido *\/\n.dandroca-contacto-block .contenedor-interno {\n max-width: 1000px;\n margin: 0 auto;\n width: 100%;\n}<\/p>\n<p>\/* Contenedor principal - todo lado a lado *\/\n.dandroca-contacto-block .contenedor-principal {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n margin-bottom: 15px;\n}<\/p>\n<p>\/* Columna izquierda: Contacto *\/\n.dandroca-contacto-block .columna-contacto {\n flex: 1;\n min-width: 250px;\n}<\/p>\n<p>.dandroca-contacto-block .titulo-contacto {\n color: white;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 8px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n padding-bottom: 3px;\n}<\/p>\n<p>.dandroca-contacto-block .info-contacto {\n margin-top: 3px;\n}<\/p>\n<p>.dandroca-contacto-block .telefonos {\n font-size: 12px;\n font-weight: 500;\n margin-bottom: 6px;\n color: white;\n}<\/p>\n<p>.dandroca-contacto-block .email {\n font-size: 12px;\n color: white;\n font-weight: 500;\n}<\/p>\n<p>\/* Contenedor para Direcci\u00f3n y Horario (lado a lado) *\/\n.dandroca-contacto-block .columna-derecha {\n flex: 2;\n min-width: 300px;\n display: flex;\n gap: 30px;\n}<\/p>\n<p>\/* Estilos para Direcci\u00f3n y Horario *\/\n.dandroca-contacto-block .seccion-direccion,\n.dandroca-contacto-block .seccion-horario {\n flex: 1;\n}<\/p>\n<p>.dandroca-contacto-block .titulo-seccion {\n color: white;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 8px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n padding-bottom: 3px;\n}<\/p>\n<p>.dandroca-contacto-block .contenido-seccion {\n font-size: 12px;\n line-height: 1.4;\n color: rgba(255, 255, 255, 0.95);\n}<\/p>\n<p>\/* Secci\u00f3n de suscripci\u00f3n *\/\n.dandroca-contacto-block .separator {\n height: 1px;\n background-color: rgba(255, 255, 255, 0.2);\n margin: 20px 0;\n}<\/p>\n<p>.dandroca-contacto-block .suscripcion {\n background-color: rgba(255, 255, 255, 0.1);\n padding: 15px;\n margin: 15px 0;\n border: 1px solid rgba(255, 255, 255, 0.15);\n}<\/p>\n<p>.dandroca-contacto-block .suscripcion h3 {\n color: white;\n margin-top: 0;\n margin-bottom: 10px;\n font-size: 14px;\n font-weight: 600;\n}<\/p>\n<p>.dandroca-contacto-block .suscripcion-form {\n display: flex;\n gap: 8px;\n}<\/p>\n<p>.dandroca-contacto-block .email-input {\n flex-grow: 1;\n padding: 8px 12px;\n border: none;\n border-radius: 3px;\n font-size: 12px;\n background-color: white;\n}<\/p>\n<p>.dandroca-contacto-block .unete-btn {\n background-color: #FF7F50;\n color: white;\n border: none;\n border-radius: 3px;\n padding: 8px 20px;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.3s;\n white-space: nowrap;\n}<\/p>\n<p>.dandroca-contacto-block .unete-btn:hover {\n background-color: #FF6347;\n}<\/p>\n<p>.dandroca-contacto-block .gracias-mensaje {\n text-align: center;\n font-size: 16px;\n color: white;\n margin: 20px 0;\n font-weight: 600;\n}<\/p>\n<p>.dandroca-contacto-block .legal-links {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 15px;\n font-size: 11px;\n}<\/p>\n<p>.dandroca-contacto-block .legal-links a {\n color: rgba(255, 255, 255, 0.9);\n text-decoration: none;\n font-weight: 500;\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n padding-bottom: 1px;\n}<\/p>\n<p>.dandroca-contacto-block .legal-links a:hover {\n color: white;\n border-bottom-color: white;\n}<\/p>\n<p>\/* Responsive *\/\n@media (max-width: 768px) {\n .dandroca-contacto-block {\n padding: 15px 12px;\n }<\/p>\n<p> .dandroca-contacto-block .contenedor-principal {\n flex-direction: column;\n gap: 20px;\n }<\/p>\n<p> .dandroca-contacto-block .columna-derecha {\n flex-direction: column;\n gap: 20px;\n }<\/p>\n<p> .dandroca-contacto-block .columna-contacto,\n .dandroca-contacto-block .columna-derecha {\n min-width: 100%;\n }<\/p>\n<p> .dandroca-contacto-block .suscripcion-form {\n flex-direction: column;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .dandroca-contacto-block {\n padding: 10px;\n font-size: 11px;\n }<\/p>\n<p> .dandroca-contacto-block .titulo-contacto,\n .dandroca-contacto-block .titulo-seccion {\n font-size: 13px;\n }<\/p>\n<p> .dandroca-contacto-block .contenido-seccion,\n .dandroca-contacto-block .telefonos,\n .dandroca-contacto-block .email {\n font-size: 11px;\n }<\/p>\n<p> .dandroca-contacto-block .suscripcion h3 {\n font-size: 13px;\n }<\/p>\n<p> .dandroca-contacto-block .gracias-mensaje {\n font-size: 14px;\n }\n}<\/p>\n<p>\/* Para asegurar que ocupe todo el ancho en WordPress *\/\nbody .dandroca-contacto-block {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n}\n<\/style>\n<div class=\"dandroca-contacto-block\">\n<div class=\"contenedor-interno\">\n<div class=\"contenedor-principal\">\n <!-- Columna izquierda: Informaci\u00f3n de contacto --><\/p>\n<div class=\"columna-contacto\">\n<div class=\"titulo-contacto\">Cont\u00e1ctanos<\/div>\n<div class=\"info-contacto\">\n<div class=\"telefonos\">3174842695 \u2013 6047779728<\/div>\n<div class=\"email\">contacto@dandre.com.co<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- Columna derecha: Direcci\u00f3n y Horario LADO A LADO --><\/p>\n<div class=\"columna-derecha\">\n <!-- Secci\u00f3n Direcci\u00f3n --><\/p>\n<div class=\"seccion-direccion\">\n<div class=\"titulo-seccion\">Direcci\u00f3n<\/div>\n<div class=\"contenido-seccion\">Carrera 37 #10-15<\/div>\n<\/p><\/div>\n<p> <!-- Secci\u00f3n Horario (justo al frente de Direcci\u00f3n) --><\/p>\n<div class=\"seccion-horario\">\n<div class=\"titulo-seccion\">Horario de trabajo<\/div>\n<div class=\"contenido-seccion\">\n Lunes - Domingo: 7:30am - 3:00pm\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"separator\"><\/div>\n<p> <!-- Secci\u00f3n de suscripci\u00f3n --><\/p>\n<div class=\"suscripcion\">\n<h3>Suscr\u00edbete ahora *<\/h3>\n<div class=\"suscripcion-form\">\n <input type=\"email\" class=\"email-input\" placeholder=\"Ingresa tu email\"><br \/>\n <button class=\"unete-btn\">\u00danete<\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"separator\"><\/div>\n<p> <!-- Mensaje de gracias --><\/p>\n<div class=\"gracias-mensaje\">\u00a1Gracias por tu mensaje!<\/div>\n<p> <!-- Enlaces legales --><\/p>\n<div class=\"legal-links\">\n <a href=\"#\">T\u00e9rminos y Condiciones<\/a><br \/>\n <a href=\"#\">Pol\u00edtica de privacidad<\/a>\n <\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Manejar el env\u00edo del formulario de suscripci\u00f3n\n const suscripcionBtn = document.querySelector('.unete-btn');\n const emailInput = document.querySelector('.email-input');<\/p>\n<p> if (suscripcionBtn) {\n suscripcionBtn.addEventListener('click', function() {\n const email = emailInput.value.trim();<\/p>\n<p> if (email === '') {\n alert('Por favor, ingresa tu email');\n emailInput.focus();\n return;\n }<\/p>\n<p> if (!isValidEmail(email)) {\n alert('Por favor, ingresa un email v\u00e1lido');\n emailInput.focus();\n return;\n }<\/p>\n<p> \/\/ Aqu\u00ed normalmente enviar\u00edas los datos a un servidor\n alert(`Gracias por suscribirte con el email: ${email}`);\n emailInput.value = '';\n });<\/p>\n<p> \/\/ Permitir enviar con la tecla Enter\n emailInput.addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n suscripcionBtn.click();\n }\n });\n }<\/p>\n<p> \/\/ Funci\u00f3n para validar email\n function isValidEmail(email) {\n const re = \/^[^s@]+@[^s@]+.[^s@]+$\/;\n return re.test(email);\n }\n});\n<\/script><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"gallery\" data-brz-id=\"pB8AN1FfuVh3_pB8AN1FfuVh3\" class=\"brz-section brz-css-d-ynf0il brz-css-wrpy74\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1usttjs\" data-brz-custom-id=\"hCrw_4PKQfm_\">\n<div class=\"brz-bg\">\n<div class=\"brz-bg-color\"><\/div>\n<\/div>\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-1cm68r\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-r-18yxudy brz-css-e65sc3 brz-wrapper\">\n<div class=\"brz-spacer brz-css-d-d4vxpd brz-css-10bay97\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"mriMvov2WNlS_mriMvov2WNlS\" class=\"brz-section brz-css-d-ynf0il brz-css-3zf1yr\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1oqexx7\" data-brz-custom-id=\"zV3PmMzgySdQ\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-18bv9i9\"><\/div>\n<\/div>\n<\/section><\/div>\n<p><!-- version:1785634971 --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Header – D’Andr\u00e9 \u2630 Reservar Ver Men\u00fa Banner D’Andre Gourmet El arte del sabor gourmet Recetas aut\u00e9nticas, ingredientes seleccionados y una promesa: calidad en cada bocado Men\u00fa \u2190 \u2192 \u00danete al movimiento Dandre Gourmet En Dandre Gourmet cocinamos cada d\u00eda con productos frescos, naturales y llenos de sabor. Nuestra misi\u00f3n es simple: ofrecerte comida aut\u00e9ntica, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"brizy-blank-template.php","meta":{"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"brizy_media":[{"id":12,"url":"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Diseno-sin-titulo-48.png","name":"Diseno-sin-titulo-48.png","meta":{"brizy_attachment_uid":"wp-4ff4805f2212c5adf434a2efa9ba6999.png","brizy_post_uid":["d95896b15847c1e96acdab6398517aaf"]}},{"id":42,"url":"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-6.14.30-a.m.png","name":"Captura-de-pantalla-2025-12-05-a-las-6.14.30-a.m.png","meta":{"brizy_attachment_uid":"wp-77f43636cd8e9f0cd0f63e775c04288b.png","brizy_post_uid":["d95896b15847c1e96acdab6398517aaf"]}},{"id":89,"url":"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/IMG-20190504-WA0029.jpg","name":"IMG-20190504-WA0029.jpg","meta":{"brizy_attachment_uid":"wp-62303091f9a5b8c55b03fa4e1592921e.jpg","brizy_post_uid":["d95896b15847c1e96acdab6398517aaf"]}},{"id":120,"url":"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-5.31.43-p.m-scaled.png","name":"Captura-de-pantalla-2025-12-05-a-las-5.31.43-p.m.png","meta":{"brizy_attachment_uid":"wp-bdacfb311a65ef3ae35158174e56a6e4.png","brizy_post_uid":["d95896b15847c1e96acdab6398517aaf"]}},{"id":134,"url":"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Captura-de-pantalla-2025-12-05-a-las-6.44.26-p.m.png","name":"Captura-de-pantalla-2025-12-05-a-las-6.44.26-p.m.png","meta":{"brizy_attachment_uid":"wp-0f001501113147d05576869aed187ce4.png","brizy_post_uid":["d95896b15847c1e96acdab6398517aaf"]}}],"_links":{"self":[{"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":30,"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":2488,"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions\/2488"}],"wp:attachment":[{"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}