{"id":211,"date":"2025-12-21T11:12:13","date_gmt":"2025-12-21T16:12:13","guid":{"rendered":"https:\/\/www.dandre.com.co\/nuevo-diseno\/?page_id=211"},"modified":"2026-08-01T20:44:53","modified_gmt":"2026-08-02T01:44:53","slug":"menu-del-dia","status":"publish","type":"page","link":"https:\/\/www.dandre.com.co\/index.php\/menu-del-dia\/","title":{"rendered":"Men\u00fa-del d\u00eda"},"content":{"rendered":"<div class=\"brz brz-root__container brz-reset-all brz-root__container-page\" >\n<section id=\"f0Y73qe7EgCj_f0Y73qe7EgCj\" class=\"brz-section brz-css-d-ynf0il brz-css-1dq8bkr\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-106xtji\" data-brz-custom-id=\"qIBN7WfLct96\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-1b0qepp\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-3fs9l1 brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1mmff1y\" data-brz-custom-id=\"ksAu1WSk_4T6\">\n<div>\n<p>    <meta charset=\"UTF-8\"><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n    <title>Header &#8211; D&#8217;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 https:\/\/www.dandre.com.co\/ --><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=\"https:\/\/www.dandre.com.co\/index.php\/brizy-34\/#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<\/section>\n<section id=\"beQI5K8kHvHJ_beQI5K8kHvHJ\" class=\"brz-section brz-css-d-ynf0il brz-css-tn9wmm\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-1bjcmd3\" data-brz-custom-id=\"lSX1e1rzCMnQ\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-148wcrb\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-4qmj7i brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1d664t3\" data-brz-custom-id=\"mjG0F0W1I3x1\">\n<div>\n<p>    <meta charset=\"UTF-8\"><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n    <title>Men\u00fa Restaurante-Caf\u00e9<\/title><\/p>\n<style>\n        \/* Reset completo para eliminar m\u00e1rgenes\/paddings *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }<\/p>\n<p>        html, body {\n            width: 100%;\n            max-width: 100%;\n            overflow-x: hidden; \/* Prevenir scroll horizontal *\/\n            scroll-behavior: smooth; \/* Scroll suave para toda la p\u00e1gina *\/\n        }<\/p>\n<p>        body {\n            background: #ffffff;\n            font-family: 'Poppins', sans-serif;\n        }<\/p>\n<p>        \/* Banner Superior - QUE CUBRE COMPLETAMENTE DE IZQUIERDA A DERECHA *\/\n        .menu-banner {\n            width: 100vw;\n            height: 100vh;\n            background-image: \n                linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), \n                url('https:\/\/images.unsplash.com\/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');\n            background-size: cover;\n            background-position: center;\n            background-repeat: no-repeat;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            color: white;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n            padding: 0;\n            transition: all 0.8s ease-out;\n        }<\/p>\n<p>        .banner-content {\n            max-width: 900px;\n            padding: 0 20px;\n            transform: translateY(20px);\n            opacity: 0;\n            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;\n        }<\/p>\n<p>        .banner-content.visible {\n            transform: translateY(0);\n            opacity: 1;\n        }<\/p>\n<p>        .banner-content h1 {\n            font-size: 4.5rem;\n            margin-bottom: 25px;\n            text-transform: uppercase;\n            letter-spacing: 8px;\n            font-weight: 800;\n            text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);\n        }<\/p>\n<p>        .banner-content p {\n            font-size: 1.5rem;\n            line-height: 1.4;\n            text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);\n            max-width: 700px;\n            margin: 0 auto;\n            font-weight: 300;\n        }<\/p>\n<p>        \/* Flecha indicadora de scroll *\/\n        .scroll-indicator {\n            position: absolute;\n            bottom: 40px;\n            left: 50%;\n            transform: translateX(-50%);\n            color: white;\n            font-size: 1.8rem;\n            animation: bounce 2s infinite;\n            cursor: pointer;\n            opacity: 0.8;\n            transition: opacity 0.3s ease;\n            z-index: 10;\n        }<\/p>\n<p>        .scroll-indicator:hover {\n            opacity: 1;\n        }<\/p>\n<p>        @keyframes bounce {\n            0%, 20%, 50%, 80%, 100% {\n                transform: translateX(-50%) translateY(0);\n            }<\/p>\n<p>            40% {\n                transform: translateX(-50%) translateY(-10px);\n            }<\/p>\n<p>            60% {\n                transform: translateX(-50%) translateY(-5px);\n            }\n        }<\/p>\n<p>        \/* Contenedor de botones *\/\n        .artistic-menu-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            width: 100vw;\n            padding: 70px 20px;\n            font-family: 'Poppins', sans-serif;\n            background: #ffffff;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n            opacity: 0;\n            transform: translateY(40px);\n            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\n        }<\/p>\n<p>        .artistic-menu-container.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }<\/p>\n<p>        .artistic-menu-title {\n            width: 100%;\n            text-align: center;\n            margin-bottom: 50px;\n            position: relative;\n            z-index: 1;\n            max-width: 1200px;\n            padding: 0 20px;\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\n        }<\/p>\n<p>        .artistic-menu-container.visible .artistic-menu-title {\n            opacity: 1;\n            transform: translateY(0);\n        }<\/p>\n<p>        .artistic-menu-title h2 {\n            font-size: 2.2rem;\n            color: #222222;\n            margin-bottom: 15px;\n            text-transform: uppercase;\n            letter-spacing: 3px;\n            position: relative;\n            display: inline-block;\n            font-weight: 700;\n        }<\/p>\n<p>        .artistic-menu-title h2::after {\n            content: \"\";\n            position: absolute;\n            bottom: -10px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 120px;\n            height: 3px;\n            background: #6E0025;\n            border-radius: 2px;\n        }<\/p>\n<p>        .artistic-menu-title p {\n            color: #666666;\n            font-size: 1.1rem;\n            max-width: 600px;\n            margin: 25px auto 0;\n            line-height: 1.5;\n            font-weight: 400;\n        }<\/p>\n<p>        \/* Contenedor de botones - LADO A LADO *\/\n        .buttons-wrapper {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            gap: 25px;\n            width: 100%;\n            max-width: 1300px;\n            position: relative;\n            z-index: 1;\n            padding: 0 20px;\n        }<\/p>\n<p>        \/* Estilos de los botones *\/\n        .artistic-button {\n            position: relative;\n            width: 320px;\n            height: 420px;\n            border-radius: 15px;\n            overflow: hidden;\n            cursor: pointer;\n            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);\n            z-index: 1;\n            border: 1px solid rgba(0, 0, 0, 0.08);\n            flex-shrink: 0;\n            opacity: 0;\n            transform: translateY(40px) scale(0.95);\n            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);\n            display: block;\n            text-decoration: none;\n            color: inherit;\n        }<\/p>\n<p>        .artistic-menu-container.visible .artistic-button {\n            opacity: 1;\n            transform: translateY(0) scale(1);\n        }<\/p>\n<p>        \/* Animaci\u00f3n escalonada para cada bot\u00f3n *\/\n        .artistic-button:nth-child(1) {\n            transition-delay: 0.4s;\n        }<\/p>\n<p>        .artistic-button:nth-child(2) {\n            transition-delay: 0.6s;\n        }<\/p>\n<p>        .artistic-button:nth-child(3) {\n            transition-delay: 0.8s;\n        }<\/p>\n<p>        .artistic-button::before {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(\n                to bottom,\n                rgba(0, 0, 0, 0) 0%,\n                rgba(0, 0, 0, 0.85) 100%\n            );\n            z-index: 1;\n        }<\/p>\n<p>        .artistic-button img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);\n            filter: brightness(0.9) contrast(1.1);\n        }<\/p>\n<p>        .button-content {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            padding: 30px 25px;\n            color: white;\n            z-index: 2;\n            transition: all 0.4s ease;\n        }<\/p>\n<p>        .button-content h3 {\n            font-size: 1.9rem;\n            margin-bottom: 12px;\n            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);\n            letter-spacing: 1px;\n            font-weight: 700;\n            font-family: 'Poppins', sans-serif;\n        }<\/p>\n<p>        .button-content p {\n            font-size: 0.95rem;\n            opacity: 0.95;\n            line-height: 1.4;\n            margin-bottom: 15px;\n            font-family: 'Poppins', sans-serif;\n            font-weight: 400;\n            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);\n        }<\/p>\n<p>        .button-icon {\n            font-size: 1.5rem;\n            opacity: 0.9;\n            transition: all 0.3s ease;\n            color: #1A3E5F;\n        }<\/p>\n<p>        \/* Efectos hover *\/\n        .artistic-button:hover {\n            transform: translateY(-10px) scale(1.02);\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n            border-color: rgba(0, 0, 0, 0.15);\n        }<\/p>\n<p>        .artistic-button:hover img {\n            transform: scale(1.15);\n            filter: brightness(0.95) contrast(1.1);\n        }<\/p>\n<p>        .artistic-button:hover .button-content {\n            transform: translateY(-5px);\n        }<\/p>\n<p>        .artistic-button:hover .button-icon {\n            opacity: 1;\n            transform: translateX(5px);\n            color: #2a5a7f;\n        }<\/p>\n<p>        \/* Colores espec\u00edficos para cada bot\u00f3n *\/\n        .brunch-button::after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 5px;\n            background: #6E0025;\n            z-index: 2;\n            box-shadow: 0 2px 8px rgba(110, 0, 37, 0.5);\n        }<\/p>\n<p>        .lunch-button::after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 5px;\n            background: #0E4D64;\n            z-index: 2;\n            box-shadow: 0 2px 8px rgba(14, 77, 100, 0.5);\n        }<\/p>\n<p>        \/* Efecto de brillo sutil en hover *\/\n        .artistic-button:hover::after {\n            filter: brightness(1.3);\n            box-shadow: 0 3px 15px;\n        }<\/p>\n<p>        \/* Responsive para el banner *\/\n        @media (max-width: 1024px) {\n            .menu-banner {\n                height: 100vh;\n            }<\/p>\n<p>            .banner-content h1 {\n                font-size: 3.8rem;\n                letter-spacing: 6px;\n            }<\/p>\n<p>            .banner-content p {\n                font-size: 1.3rem;\n            }\n        }<\/p>\n<p>        @media (max-width: 768px) {\n            .menu-banner {\n                height: 100vh;\n            }<\/p>\n<p>            .banner-content h1 {\n                font-size: 3rem;\n                letter-spacing: 4px;\n                margin-bottom: 20px;\n            }<\/p>\n<p>            .banner-content p {\n                font-size: 1.1rem;\n            }\n        }<\/p>\n<p>        @media (max-width: 600px) {\n            .menu-banner {\n                height: 100vh;\n            }<\/p>\n<p>            .banner-content h1 {\n                font-size: 2.3rem;\n                letter-spacing: 3px;\n            }<\/p>\n<p>            .banner-content p {\n                font-size: 1rem;\n            }<\/p>\n<p>            .scroll-indicator {\n                font-size: 1.5rem;\n                bottom: 30px;\n            }\n        }<\/p>\n<p>        @media (max-width: 480px) {\n            .menu-banner {\n                height: 100vh;\n            }<\/p>\n<p>            .banner-content h1 {\n                font-size: 2rem;\n                letter-spacing: 2px;\n            }<\/p>\n<p>            .banner-content p {\n                font-size: 0.9rem;\n            }\n        }<\/p>\n<p>        \/* Responsive para los botones *\/\n        @media (max-width: 1100px) {\n            .buttons-wrapper {\n                gap: 20px;\n            }<\/p>\n<p>            .artistic-button {\n                width: 290px;\n                height: 380px;\n            }<\/p>\n<p>            .button-content h3 {\n                font-size: 1.7rem;\n            }<\/p>\n<p>            .button-content p {\n                font-size: 0.9rem;\n            }\n        }<\/p>\n<p>        @media (max-width: 950px) {\n            .buttons-wrapper {\n                flex-wrap: wrap;\n                gap: 25px;\n            }<\/p>\n<p>            .artistic-button {\n                width: 280px;\n                height: 370px;\n            }<\/p>\n<p>            .artistic-menu-title h2 {\n                font-size: 2rem;\n            }<\/p>\n<p>            .artistic-menu-title p {\n                font-size: 1rem;\n            }<\/p>\n<p>            .button-content h3 {\n                font-size: 1.6rem;\n            }\n        }<\/p>\n<p>        @media (max-width: 850px) {\n            .buttons-wrapper {\n                gap: 20px;\n            }<\/p>\n<p>            .artistic-button {\n                width: 250px;\n                height: 340px;\n            }<\/p>\n<p>            .button-content {\n                padding: 25px 20px;\n            }<\/p>\n<p>            .button-content h3 {\n                font-size: 1.5rem;\n            }<\/p>\n<p>            .button-content p {\n                font-size: 0.85rem;\n            }\n        }<\/p>\n<p>        @media (max-width: 750px) {\n            .buttons-wrapper {\n                flex-direction: column;\n                gap: 25px;\n            }<\/p>\n<p>            .artistic-button {\n                width: 100%;\n                max-width: 400px;\n                height: 320px;\n            }<\/p>\n<p>            .artistic-menu-title h2 {\n                font-size: 1.8rem;\n            }<\/p>\n<p>            .artistic-menu-title p {\n                font-size: 0.95rem;\n                max-width: 90%;\n            }\n        }<\/p>\n<p>        @media (max-width: 600px) {\n            .artistic-menu-container {\n                padding: 50px 15px;\n            }<\/p>\n<p>            .artistic-menu-title {\n                margin-bottom: 40px;\n            }<\/p>\n<p>            .artistic-menu-title h2 {\n                font-size: 1.6rem;\n                letter-spacing: 2px;\n            }<\/p>\n<p>            .artistic-menu-title p {\n                font-size: 0.9rem;\n                margin-top: 20px;\n            }<\/p>\n<p>            .artistic-button {\n                height: 300px;\n            }<\/p>\n<p>            .button-content h3 {\n                font-size: 1.4rem;\n            }<\/p>\n<p>            .button-content p {\n                font-size: 0.85rem;\n            }\n        }<\/p>\n<p>        @media (max-width: 480px) {\n            .artistic-menu-title h2 {\n                font-size: 1.5rem;\n                letter-spacing: 1.5px;\n            }<\/p>\n<p>            .artistic-button {\n                height: 280px;\n            }<\/p>\n<p>            .button-content h3 {\n                font-size: 1.3rem;\n            }<\/p>\n<p>            .button-content p {\n                font-size: 0.8rem;\n            }<\/p>\n<p>            .artistic-menu-container {\n                padding: 40px 10px;\n            }\n        }<\/p>\n<p>        \/* Asegurar que los botones queden lado a lado *\/\n        .buttons-wrapper {\n            flex-wrap: nowrap;\n        }<\/p>\n<p>        \/* Para pantallas muy grandes *\/\n        @media (min-width: 1400px) {\n            .buttons-wrapper {\n                gap: 40px;\n            }<\/p>\n<p>            .artistic-button {\n                width: 350px;\n                height: 460px;\n            }<\/p>\n<p>            .button-content h3 {\n                font-size: 2rem;\n            }<\/p>\n<p>            .button-content p {\n                font-size: 1rem;\n            }\n        }\n    <\/style>\n<p>    <!-- Fuente Poppins desde Google Fonts -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n<p>    <!-- Banner Superior --><\/p>\n<div class=\"menu-banner\">\n<div class=\"banner-content\">\n<h1>Men\u00fa<\/h1>\n<p>\n                Calidad, pasi\u00f3n y frescura en cada creaci\u00f3n.<br \/>\n                Productos frescos preparados a la minuta.\n            <\/p>\n<\/p><\/div>\n<p>        <!-- Flecha indicadora de scroll --><\/p>\n<div class=\"scroll-indicator\" onclick=\"scrollToMenu()\">\n            <i class=\"fas fa-chevron-down\"><\/i>\n        <\/div>\n<\/p><\/div>\n<p>    <!-- Contenedor de botones --><\/p>\n<div class=\"artistic-menu-container\" id=\"menu-section\">\n<div class=\"artistic-menu-title\">\n<h2>Descubre Nuestras Especialidades<\/h2>\n<p>\n                Selecciona una categor\u00eda para explorar nuestras deliciosas opciones\n            <\/p>\n<\/p><\/div>\n<div class=\"buttons-wrapper\">\n            <!-- Bot\u00f3n Brunch --><br \/>\n            <a href=\"https:\/\/drive.google.com\/file\/d\/19kktFA2pb9q0oRy9PZhEvwyCESV2ex74\/view?usp=sharing\" target=\"_blank\" class=\"artistic-button brunch-button\"><br \/>\n                <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/1.png\" alt=\"Brunch\"><\/p>\n<div class=\"button-content\">\n<h3>Brunch<\/h3>\n<p>\n                        Panader\u00eda artesanal, waffles y combinaciones \u00fanicas todo el d\u00eda.\n                    <\/p>\n<div class=\"button-icon\">\n                        <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/div>\n<\/p><\/div>\n<p>            <\/a><\/p>\n<p>            <!-- Bot\u00f3n Almuerzos --><br \/>\n            <a href=\"https:\/\/drive.google.com\/file\/d\/1wYHHJmYxG0yYrx9Vzb2ZqIW8kqZVBT_p\/view?usp=sharing\" target=\"_blank\" class=\"artistic-button lunch-button\"><br \/>\n                <img decoding=\"async\" src=\"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/10.png\" alt=\"Almuerzos\"><\/p>\n<div class=\"button-content\">\n<h3>Almuerzos<\/h3>\n<p>\n                        Platos principales con ingredientes frescos y opciones saludables.\n                    <\/p>\n<div class=\"button-icon\">\n                        <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/div>\n<\/p><\/div>\n<p>            <\/a>\n        <\/div>\n<\/p><\/div>\n<p>    <script>\n        \/\/ Efectos adicionales con JavaScript\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Mostrar contenido del banner con efecto\n            setTimeout(() => {\n                document.querySelector('.banner-content').classList.add('visible');\n            }, 300);<\/p>\n<p>            \/\/ Scroll effect con Intersection Observer\n            const observerOptions = {\n                threshold: 0.1,\n                rootMargin: '0px 0px -50px 0px'\n            };<\/p>\n<p>            const observer = new IntersectionObserver((entries) => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('visible');\n                    }\n                });\n            }, observerOptions);<\/p>\n<p>            \/\/ Observar el contenedor de botones\n            const menuContainer = document.querySelector(\n                '.artistic-menu-container'\n            );<\/p>\n<p>            observer.observe(menuContainer);<\/p>\n<p>            \/\/ Obtener todos los botones art\u00edsticos\n            const buttons = document.querySelectorAll('.artistic-button');<\/p>\n<p>            \/\/ Efecto de seguimiento de cursor sutil\n            if (window.matchMedia(\"(min-width: 768px)\").matches) {\n                document.addEventListener('mousemove', function(e) {\n                    buttons.forEach(button => {\n                        const rect = button.getBoundingClientRect();\n                        const buttonCenterX = rect.left + rect.width \/ 2;\n                        const distanceFromCenter =\n                            (e.clientX - buttonCenterX) \/ rect.width;<\/p>\n<p>                        button.style.transform =\n                            `perspective(1000px) rotateY(${distanceFromCenter * 3}deg) translateY(0) scale(1)`;\n                    });\n                });<\/p>\n<p>                document.addEventListener('mouseleave', function() {\n                    buttons.forEach(button => {\n                        button.style.transform =\n                            'perspective(1000px) rotateY(0deg) translateY(0) scale(1)';\n                    });\n                });\n            }<\/p>\n<p>            \/\/ Efecto de brillo al pasar sobre los botones\n            buttons.forEach(button => {\n                button.addEventListener('mouseenter', function() {\n                    this.style.boxShadow =\n                        '0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 255, 0.1) inset';\n                });<\/p>\n<p>                button.addEventListener('mouseleave', function() {\n                    this.style.boxShadow =\n                        '0 12px 30px rgba(0, 0, 0, 0.12)';\n                });\n            });<\/p>\n<p>            \/\/ Efecto parallax en el banner\n            window.addEventListener('scroll', function() {\n                const scrolled = window.pageYOffset;\n                const banner = document.querySelector('.menu-banner');\n                const rate = scrolled * 0.5;<\/p>\n<p>                banner.style.transform = `translate3d(0, ${rate}px, 0)`;\n            });\n        });<\/p>\n<p>        \/\/ Scroll suave hacia la secci\u00f3n del men\u00fa\n        function scrollToMenu() {\n            const menuSection = document.getElementById('menu-section');<\/p>\n<p>            menuSection.scrollIntoView({\n                behavior: 'smooth',\n                block: 'start'\n            });\n        }<\/p>\n<p>        \/\/ Mostrar u ocultar la flecha\n        window.addEventListener('scroll', function() {\n            const scrollIndicator =\n                document.querySelector('.scroll-indicator');<\/p>\n<p>            const scrollPosition = window.scrollY;\n            const windowHeight = window.innerHeight;<\/p>\n<p>            if (scrollPosition > windowHeight * 0.3) {\n                scrollIndicator.style.opacity = '0';\n                scrollIndicator.style.pointerEvents = 'none';\n            } else {\n                scrollIndicator.style.opacity = '0.8';\n                scrollIndicator.style.pointerEvents = 'auto';\n            }\n        });\n    <\/script><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"uOTqfyIhjUlS_uOTqfyIhjUlS\" class=\"brz-section brz-css-d-ynf0il brz-css-1bcw6ur\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-k8b4ja\" data-brz-custom-id=\"wvaFwmH8fuYd\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-8jiddc\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-wm0t3j brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1xe2rxy\" data-brz-custom-id=\"sGGr8BUHk6DG\">\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"b3K99Cz7fKmd_b3K99Cz7fKmd\" class=\"brz-section brz-css-d-ynf0il brz-css-1rn3x7z\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-19f63gc\" data-brz-custom-id=\"jrwk5S_MsTtD\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-vhwrcr\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-37aa4f brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1y9ajvg\" data-brz-custom-id=\"f7vV6KpfR0uB\">\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 &#8211; 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&amp;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 id=\"\" class=\"brz-css-d-1wonu5h brz-css-1kylatz brz-wrapper\">\n<div class=\"brz-map brz-map_styles brz-css-d-1aguiix brz-css-1n495h5\" data-brz-custom-id=\"a2gu3apcH8e4\">\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&amp;q=D'Andr\u00e9 Restaurante Cafe Cra. 37 #10-15, El Poblado, Medell\u00edn, El Poblado, Medell\u00edn, Antioquia&amp;zoom=10\" title=\"map\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-jy2pqh brz-wrapper\">\n<div class=\"brz-map brz-map_styles brz-css-d-1aguiix brz-css-1x80476\" data-brz-custom-id=\"zU8DrIejOtEn\">\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&amp;q=D'Andr\u00e9 Restaurante Cafe Cra. 37 #10-15, El Poblado, Medell\u00edn, El Poblado, Medell\u00edn, Antioquia&amp;zoom=10\" title=\"map\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"fjk9cq8m2vAm_fjk9cq8m2vAm\" class=\"brz-section brz-css-d-ynf0il brz-css-1whi2pc\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-oh3bvl brz-css-jxq4p\" data-brz-custom-id=\"vpCtre3TDGVg\">\n<div class=\"brz-container brz-css-d-x9rvyp brz-css-jpudhg\">\n<div id=\"\" class=\"brz-css-d-1wonu5h brz-css-ie33kn brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-19rsjz0 brz-css-1n7oepn\" data-brz-custom-id=\"i2ZObuL3CXCo\">\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><\/div>\n<p><!-- version:1785635093 --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Header &#8211; D&#8217;Andr\u00e9 \u2630 Reservar Ver Men\u00fa Men\u00fa Restaurante-Caf\u00e9 Men\u00fa Calidad, pasi\u00f3n y frescura en cada creaci\u00f3n. Productos frescos preparados a la minuta. Descubre Nuestras Especialidades Selecciona una categor\u00eda para explorar nuestras deliciosas opciones Brunch Panader\u00eda artesanal, waffles y combinaciones \u00fanicas todo el d\u00eda. Almuerzos Platos principales con ingredientes frescos y opciones saludables. Ubicaci\u00f3n Medell\u00edn [&hellip;]<\/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-211","page","type-page","status-publish","hentry"],"brizy_media":[{"id":337,"url":"https:\/\/www.dandre.com.co\/wp-content\/uploads\/2025\/12\/Gen4Turbo-Manten-todo-igual-en-cuanto-a-los-vasos-y-su-contenido-juega-un-poco-con-la-posi-12961030.png","name":"Gen4Turbo-Manten-todo-igual-en-cuanto-a-los-vasos-y-su-contenido-juega-un-poco-con-la-posi-12961030.png","meta":{"brizy_attachment_uid":"wp-f6b0f1676fe15eab8f34b7aadf5bc6df.png","brizy_post_uid":["74351c16c5bbde540128ff9267b13776"]}}],"_links":{"self":[{"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages\/211","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=211"}],"version-history":[{"count":30,"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions"}],"predecessor-version":[{"id":2490,"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions\/2490"}],"wp:attachment":[{"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/media?parent=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}