{"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-05-06T07:27:41","modified_gmt":"2026-05-06T12:27:41","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-section brz-css-1rmma2l\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-sectionitem-bg brz-css-51l25v\" data-brz-custom-id=\"qIBN7WfLct96\">\n<div class=\"brz-container brz-css-d-sectionitem-container brz-css-5jxajl\">\n<div id=\"\" class=\"brz-css-d-wrapper brz-css-7xt12b brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-wpcustomshortcode brz-css-l41n4l\" data-brz-custom-id=\"ksAu1WSk_4T6\">\n<div>\n<p>    <title>Header &#8211; D&#8217;Andr\u00e9<\/title><\/p>\n<p>        \/* Reset y estilos base *\/<br \/>\n        * {<br \/>\n            margin: 0;<br \/>\n            padding: 0;<br \/>\n            box-sizing: border-box;<br \/>\n        }<\/p>\n<p>        body {<br \/>\n            font-family: -apple-system, BlinkMacSystemFont, &#8216;Segoe UI&#8217;, Roboto, Oxygen, Ubuntu, sans-serif;<br \/>\n        }<\/p>\n<p>        \/* Header principal *\/<br \/>\n        .dandre-header {<br \/>\n            position: fixed;<br \/>\n            top: 0;<br \/>\n            left: 0;<br \/>\n            width: 100%;<br \/>\n            background-color: white;<br \/>\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);<br \/>\n            z-index: 1000;<br \/>\n            padding: 15px 5%;<br \/>\n        }<\/p>\n<p>        .header-container {<br \/>\n            display: flex;<br \/>\n            justify-content: space-between;<br \/>\n            align-items: center;<br \/>\n            max-width: 1400px;<br \/>\n            margin: 0 auto;<br \/>\n        }<\/p>\n<p>        \/* Logo *\/<br \/>\n        .logo-container {<br \/>\n            flex: 0 0 auto;<br \/>\n        }<\/p>\n<p>        .logo-container a {<br \/>\n            display: block;<br \/>\n        }<\/p>\n<p>        .logo-img {<br \/>\n            height: 50px;<br \/>\n            width: auto;<br \/>\n            max-width: 200px;<br \/>\n        }<\/p>\n<p>        \/* Navegaci\u00f3n *\/<br \/>\n        .nav-container {<br \/>\n            display: flex;<br \/>\n            align-items: center;<br \/>\n            gap: 40px;<br \/>\n        }<\/p>\n<p>        .nav-links {<br \/>\n            display: flex;<br \/>\n            list-style: none;<br \/>\n            gap: 30px;<br \/>\n            margin: 0;<br \/>\n            padding: 0;<br \/>\n        }<\/p>\n<p>        .nav-link {<br \/>\n            text-decoration: none;<br \/>\n            color: #333;<br \/>\n            font-weight: 500;<br \/>\n            font-size: 16px;<br \/>\n            transition: color 0.3s ease;<br \/>\n            position: relative;<br \/>\n            padding: 5px 0;<br \/>\n        }<\/p>\n<p>        .nav-link:hover {<br \/>\n            color: #1A3E5F;<br \/>\n        }<\/p>\n<p>        .nav-link::after {<br \/>\n            content: &#8221;;<br \/>\n            position: absolute;<br \/>\n            bottom: 0;<br \/>\n            left: 0;<br \/>\n            width: 0;<br \/>\n            height: 2px;<br \/>\n            background-color: #1A3E5F;<br \/>\n            transition: width 0.3s ease;<br \/>\n        }<\/p>\n<p>        .nav-link:hover::after {<br \/>\n            width: 100%;<br \/>\n        }<\/p>\n<p>        \/* Bot\u00f3n Ver Men\u00fa &#8211; Color #1A3E5F *\/<br \/>\n        .menu-btn {<br \/>\n            background-color: #1A3E5F;<br \/>\n            color: white;<br \/>\n            border: none;<br \/>\n            padding: 12px 25px;<br \/>\n            border-radius: 30px;<br \/>\n            font-weight: 600;<br \/>\n            font-size: 15px;<br \/>\n            cursor: pointer;<br \/>\n            transition: all 0.3s ease;<br \/>\n            text-transform: uppercase;<br \/>\n            letter-spacing: 0.5px;<br \/>\n            text-decoration: none;<br \/>\n            display: inline-block;<br \/>\n        }<\/p>\n<p>        .menu-btn:hover {<br \/>\n            background-color: #0F2840;<br \/>\n            transform: translateY(-2px);<br \/>\n            box-shadow: 0 5px 15px rgba(26, 62, 95, 0.3);<br \/>\n        }<\/p>\n<p>        \/* Men\u00fa hamburguesa para m\u00f3viles *\/<br \/>\n        .menu-toggle {<br \/>\n            display: none;<br \/>\n            background: none;<br \/>\n            border: none;<br \/>\n            font-size: 24px;<br \/>\n            color: #333;<br \/>\n            cursor: pointer;<br \/>\n            padding: 5px;<br \/>\n        }<\/p>\n<p>        \/* Responsive *\/<br \/>\n        @media (max-width: 768px) {<br \/>\n            .dandre-header {<br \/>\n                padding: 15px 20px;<br \/>\n            }<\/p>\n<p>            .menu-toggle {<br \/>\n                display: block;<br \/>\n            }<\/p>\n<p>            .nav-container {<br \/>\n                position: fixed;<br \/>\n                top: 80px;<br \/>\n                left: 0;<br \/>\n                width: 100%;<br \/>\n                background-color: white;<br \/>\n                flex-direction: column;<br \/>\n                padding: 20px;<br \/>\n                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);<br \/>\n                gap: 20px;<br \/>\n                transform: translateY(-100%);<br \/>\n                opacity: 0;<br \/>\n                visibility: hidden;<br \/>\n                transition: all 0.4s ease;<br \/>\n            }<\/p>\n<p>            .nav-container.active {<br \/>\n                transform: translateY(0);<br \/>\n                opacity: 1;<br \/>\n                visibility: visible;<br \/>\n            }<\/p>\n<p>            .nav-links {<br \/>\n                flex-direction: column;<br \/>\n                align-items: center;<br \/>\n                gap: 20px;<br \/>\n                width: 100%;<br \/>\n            }<\/p>\n<p>            .nav-link {<br \/>\n                font-size: 18px;<br \/>\n                padding: 10px 0;<br \/>\n            }<\/p>\n<p>            .logo-img {<br \/>\n                height: 40px;<br \/>\n            }<\/p>\n<p>            .menu-btn {<br \/>\n                padding: 12px 30px;<br \/>\n                width: 100%;<br \/>\n                max-width: 200px;<br \/>\n            }<br \/>\n        }<\/p>\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>        \/\/ Funcionalidad para men\u00fa m\u00f3vil<br \/>\n        const menuToggle = document.getElementById(&#8216;menuToggle&#8217;);<br \/>\n        const navContainer = document.getElementById(&#8216;navContainer&#8217;);<\/p>\n<p>        \/\/ Alternar men\u00fa en m\u00f3viles<br \/>\n        menuToggle.addEventListener(&#8216;click&#8217;, () =&gt; {<br \/>\n            navContainer.classList.toggle(&#8216;active&#8217;);<br \/>\n            menuToggle.textContent = navContainer.classList.contains(&#8216;active&#8217;) ? &#8216;\u2715&#8217; : &#8216;\u2630&#8217;;<br \/>\n        });<\/p>\n<p>        \/\/ Cerrar men\u00fa al hacer clic en un enlace (m\u00f3viles)<br \/>\n        const navLinks = document.querySelectorAll(&#8216;.nav-link&#8217;);<br \/>\n        navLinks.forEach(link =&gt; {<br \/>\n            link.addEventListener(&#8216;click&#8217;, () =&gt; {<br \/>\n                if (window.innerWidth  {<br \/>\n            if (window.innerWidth &gt; 768) {<br \/>\n                navContainer.classList.remove(&#8216;active&#8217;);<br \/>\n                menuToggle.textContent = &#8216;\u2630&#8217;;<br \/>\n            }<br \/>\n        });<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"beQI5K8kHvHJ_beQI5K8kHvHJ\" class=\"brz-section brz-css-d-section brz-css-1lqu7jh\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-sectionitem-bg brz-css-mmtw7t\" data-brz-custom-id=\"lSX1e1rzCMnQ\">\n<div class=\"brz-container brz-css-d-sectionitem-container brz-css-y3jd0k\">\n<div id=\"\" class=\"brz-css-d-wrapper brz-css-1ltm1kc brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-wpcustomshortcode brz-css-7ynzn3\" data-brz-custom-id=\"mjG0F0W1I3x1\">\n<div>\n<p>    <title>Men\u00fa Restaurante-Caf\u00e9<\/title><\/p>\n<p>        \/* Reset completo para eliminar m\u00e1rgenes\/paddings *\/<br \/>\n        * {<br \/>\n            margin: 0;<br \/>\n            padding: 0;<br \/>\n            box-sizing: border-box;<br \/>\n        }<\/p>\n<p>        html, body {<br \/>\n            width: 100%;<br \/>\n            max-width: 100%;<br \/>\n            overflow-x: hidden; \/* Prevenir scroll horizontal *\/<br \/>\n            scroll-behavior: smooth; \/* Scroll suave para toda la p\u00e1gina *\/<br \/>\n        }<\/p>\n<p>        body {<br \/>\n            background: #ffffff;<br \/>\n            font-family: &#8216;Poppins&#8217;, sans-serif;<br \/>\n        }<\/p>\n<p>        \/* Banner Superior &#8211; QUE CUBRE COMPLETAMENTE DE IZQUIERDA A DERECHA *\/<br \/>\n        .menu-banner {<br \/>\n            width: 100vw; \/* 100% del viewport width *\/<br \/>\n            height: 100vh; \/* Cambiado a 100vh para scroll effect *\/<br \/>\n            background-image:<br \/>\n                linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),<br \/>\n                url(&#8216;https:\/\/images.unsplash.com\/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=2070&amp;q=80&#8217;);<br \/>\n            background-size: cover;<br \/>\n            background-position: center;<br \/>\n            background-repeat: no-repeat;<br \/>\n            display: flex;<br \/>\n            flex-direction: column;<br \/>\n            justify-content: center;<br \/>\n            align-items: center;<br \/>\n            text-align: center;<br \/>\n            color: white;<br \/>\n            position: relative;<br \/>\n            left: 50%;<br \/>\n            right: 50%;<br \/>\n            margin-left: -50vw;<br \/>\n            margin-right: -50vw;<br \/>\n            padding: 0;<br \/>\n            transition: all 0.8s ease-out;<br \/>\n        }<\/p>\n<p>        .banner-content {<br \/>\n            max-width: 900px;<br \/>\n            padding: 0 20px;<br \/>\n            transform: translateY(20px);<br \/>\n            opacity: 0;<br \/>\n            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;<br \/>\n        }<\/p>\n<p>        .banner-content.visible {<br \/>\n            transform: translateY(0);<br \/>\n            opacity: 1;<br \/>\n        }<\/p>\n<p>        .banner-content h1 {<br \/>\n            font-size: 4.5rem;<br \/>\n            margin-bottom: 25px;<br \/>\n            text-transform: uppercase;<br \/>\n            letter-spacing: 8px;<br \/>\n            font-weight: 800;<br \/>\n            text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);<br \/>\n        }<\/p>\n<p>        .banner-content p {<br \/>\n            font-size: 1.5rem;<br \/>\n            line-height: 1.4;<br \/>\n            text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);<br \/>\n            max-width: 700px;<br \/>\n            margin: 0 auto;<br \/>\n            font-weight: 300;<br \/>\n        }<\/p>\n<p>        \/* Flecha indicadora de scroll *\/<br \/>\n        .scroll-indicator {<br \/>\n            position: absolute;<br \/>\n            bottom: 40px;<br \/>\n            left: 50%;<br \/>\n            transform: translateX(-50%);<br \/>\n            color: white;<br \/>\n            font-size: 1.8rem;<br \/>\n            animation: bounce 2s infinite;<br \/>\n            cursor: pointer;<br \/>\n            opacity: 0.8;<br \/>\n            transition: opacity 0.3s ease;<br \/>\n            z-index: 10;<br \/>\n        }<\/p>\n<p>        .scroll-indicator:hover {<br \/>\n            opacity: 1;<br \/>\n        }<\/p>\n<p>        @keyframes bounce {<br \/>\n            0%, 20%, 50%, 80%, 100% {<br \/>\n                transform: translateX(-50%) translateY(0);<br \/>\n            }<br \/>\n            40% {<br \/>\n                transform: translateX(-50%) translateY(-10px);<br \/>\n            }<br \/>\n            60% {<br \/>\n                transform: translateX(-50%) translateY(-5px);<br \/>\n            }<br \/>\n        }<\/p>\n<p>        \/* Contenedor de botones &#8211; QUE CUBRE COMPLETAMENTE DE IZQUIERDA A DERECHA *\/<br \/>\n        .artistic-menu-container {<br \/>\n            display: flex;<br \/>\n            flex-direction: column;<br \/>\n            align-items: center;<br \/>\n            justify-content: center;<br \/>\n            width: 100vw; \/* 100% del viewport width *\/<br \/>\n            padding: 70px 20px;<br \/>\n            font-family: &#8216;Poppins&#8217;, sans-serif;<br \/>\n            background: #ffffff;<br \/>\n            position: relative;<br \/>\n            left: 50%;<br \/>\n            right: 50%;<br \/>\n            margin-left: -50vw;<br \/>\n            margin-right: -50vw;<br \/>\n            opacity: 0;<br \/>\n            transform: translateY(40px);<br \/>\n            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);<br \/>\n        }<\/p>\n<p>        .artistic-menu-container.visible {<br \/>\n            opacity: 1;<br \/>\n            transform: translateY(0);<br \/>\n        }<\/p>\n<p>        .artistic-menu-title {<br \/>\n            width: 100%;<br \/>\n            text-align: center;<br \/>\n            margin-bottom: 50px;<br \/>\n            position: relative;<br \/>\n            z-index: 1;<br \/>\n            max-width: 1200px;<br \/>\n            padding: 0 20px;<br \/>\n            opacity: 0;<br \/>\n            transform: translateY(30px);<br \/>\n            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;<br \/>\n        }<\/p>\n<p>        .artistic-menu-container.visible .artistic-menu-title {<br \/>\n            opacity: 1;<br \/>\n            transform: translateY(0);<br \/>\n        }<\/p>\n<p>        .artistic-menu-title h2 {<br \/>\n            font-size: 2.2rem;<br \/>\n            color: #222222;<br \/>\n            margin-bottom: 15px;<br \/>\n            text-transform: uppercase;<br \/>\n            letter-spacing: 3px;<br \/>\n            position: relative;<br \/>\n            display: inline-block;<br \/>\n            font-weight: 700;<br \/>\n        }<\/p>\n<p>        .artistic-menu-title h2::after {<br \/>\n            content: &#8220;&#8221;;<br \/>\n            position: absolute;<br \/>\n            bottom: -10px;<br \/>\n            left: 50%;<br \/>\n            transform: translateX(-50%);<br \/>\n            width: 120px;<br \/>\n            height: 3px;<br \/>\n            background: #6E0025;<br \/>\n            border-radius: 2px;<br \/>\n        }<\/p>\n<p>        .artistic-menu-title p {<br \/>\n            color: #666666;<br \/>\n            font-size: 1.1rem;<br \/>\n            max-width: 600px;<br \/>\n            margin: 25px auto 0;<br \/>\n            line-height: 1.5;<br \/>\n            font-weight: 400;<br \/>\n        }<\/p>\n<p>        \/* Contenedor de botones &#8211; LADO A LADO *\/<br \/>\n        .buttons-wrapper {<br \/>\n            display: flex;<br \/>\n            justify-content: center;<br \/>\n            align-items: center;<br \/>\n            gap: 25px;<br \/>\n            width: 100%;<br \/>\n            max-width: 1300px;<br \/>\n            position: relative;<br \/>\n            z-index: 1;<br \/>\n            padding: 0 20px;<br \/>\n        }<\/p>\n<p>        \/* Estilos de los botones &#8211; Compactos pero art\u00edsticos *\/<br \/>\n        .artistic-button {<br \/>\n            position: relative;<br \/>\n            width: 320px;<br \/>\n            height: 420px;<br \/>\n            border-radius: 15px;<br \/>\n            overflow: hidden;<br \/>\n            cursor: pointer;<br \/>\n            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);<br \/>\n            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);<br \/>\n            z-index: 1;<br \/>\n            border: 1px solid rgba(0, 0, 0, 0.08);<br \/>\n            flex-shrink: 0;<br \/>\n            opacity: 0;<br \/>\n            transform: translateY(40px) scale(0.95);<br \/>\n            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);<br \/>\n            display: block; \/* Importante para que el enlace funcione correctamente *\/<br \/>\n            text-decoration: none; \/* Elimina el subrayado del enlace *\/<br \/>\n            color: inherit; \/* Hereda el color del texto *\/<br \/>\n        }<\/p>\n<p>        .artistic-menu-container.visible .artistic-button {<br \/>\n            opacity: 1;<br \/>\n            transform: translateY(0) scale(1);<br \/>\n        }<\/p>\n<p>        \/* Animaci\u00f3n escalonada para cada bot\u00f3n *\/<br \/>\n        .artistic-button:nth-child(1) {<br \/>\n            transition-delay: 0.4s;<br \/>\n        }<\/p>\n<p>        .artistic-button:nth-child(2) {<br \/>\n            transition-delay: 0.6s;<br \/>\n        }<\/p>\n<p>        .artistic-button:nth-child(3) {<br \/>\n            transition-delay: 0.8s;<br \/>\n        }<\/p>\n<p>        .artistic-button::before {<br \/>\n            content: &#8220;&#8221;;<br \/>\n            position: absolute;<br \/>\n            top: 0;<br \/>\n            left: 0;<br \/>\n            width: 100%;<br \/>\n            height: 100%;<br \/>\n            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);<br \/>\n            z-index: 1;<br \/>\n        }<\/p>\n<p>        .artistic-button img {<br \/>\n            width: 100%;<br \/>\n            height: 100%;<br \/>\n            object-fit: cover;<br \/>\n            transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);<br \/>\n            filter: brightness(0.9) contrast(1.1);<br \/>\n        }<\/p>\n<p>        .button-content {<br \/>\n            position: absolute;<br \/>\n            bottom: 0;<br \/>\n            left: 0;<br \/>\n            width: 100%;<br \/>\n            padding: 30px 25px;<br \/>\n            color: white;<br \/>\n            z-index: 2;<br \/>\n            transition: all 0.4s ease;<br \/>\n        }<\/p>\n<p>        .button-content h3 {<br \/>\n            font-size: 1.9rem;<br \/>\n            margin-bottom: 12px;<br \/>\n            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);<br \/>\n            letter-spacing: 1px;<br \/>\n            font-weight: 700;<br \/>\n            font-family: &#8216;Poppins&#8217;, sans-serif;<br \/>\n        }<\/p>\n<p>        .button-content p {<br \/>\n            font-size: 0.95rem;<br \/>\n            opacity: 0.95;<br \/>\n            line-height: 1.4;<br \/>\n            margin-bottom: 15px;<br \/>\n            font-family: &#8216;Poppins&#8217;, sans-serif;<br \/>\n            font-weight: 400;<br \/>\n            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);<br \/>\n        }<\/p>\n<p>        .button-icon {<br \/>\n            font-size: 1.5rem;<br \/>\n            opacity: 0.9;<br \/>\n            transition: all 0.3s ease;<br \/>\n            color: #1A3E5F; \/* Flecha en color #1A3E5F *\/<br \/>\n        }<\/p>\n<p>        \/* Efectos hover *\/<br \/>\n        .artistic-button:hover {<br \/>\n            transform: translateY(-10px) scale(1.02);<br \/>\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);<br \/>\n            border-color: rgba(0, 0, 0, 0.15);<br \/>\n        }<\/p>\n<p>        .artistic-button:hover img {<br \/>\n            transform: scale(1.15);<br \/>\n            filter: brightness(0.95) contrast(1.1);<br \/>\n        }<\/p>\n<p>        .artistic-button:hover .button-content {<br \/>\n            transform: translateY(-5px);<br \/>\n        }<\/p>\n<p>        .artistic-button:hover .button-icon {<br \/>\n            opacity: 1;<br \/>\n            transform: translateX(5px);<br \/>\n            color: #2a5a7f; \/* Color m\u00e1s claro al hacer hover *\/<br \/>\n        }<\/p>\n<p>        \/* Colores espec\u00edficos para cada bot\u00f3n &#8211; NUEVOS COLORES *\/<br \/>\n        .brunch-button::after {<br \/>\n            content: &#8220;&#8221;;<br \/>\n            position: absolute;<br \/>\n            top: 0;<br \/>\n            left: 0;<br \/>\n            width: 100%;<br \/>\n            height: 5px;<br \/>\n            background: #6E0025; \/* Color #6E0025 para Brunch *\/<br \/>\n            z-index: 2;<br \/>\n            box-shadow: 0 2px 8px rgba(110, 0, 37, 0.5);<br \/>\n        }<\/p>\n<p>        .lunch-button::after {<br \/>\n            content: &#8220;&#8221;;<br \/>\n            position: absolute;<br \/>\n            top: 0;<br \/>\n            left: 0;<br \/>\n            width: 100%;<br \/>\n            height: 5px;<br \/>\n            background: #0E4D64; \/* Color #0E4D64 para Almuerzos *\/<br \/>\n            z-index: 2;<br \/>\n            box-shadow: 0 2px 8px rgba(14, 77, 100, 0.5);<br \/>\n        }<\/p>\n<p>        .drinks-button::after {<br \/>\n            content: &#8220;&#8221;;<br \/>\n            position: absolute;<br \/>\n            top: 0;<br \/>\n            left: 0;<br \/>\n            width: 100%;<br \/>\n            height: 5px;<br \/>\n            background: #E5D9C9; \/* Color #E5D9C9 para Bebidas *\/<br \/>\n            z-index: 2;<br \/>\n            box-shadow: 0 2px 8px rgba(229, 217, 201, 0.7);<br \/>\n        }<\/p>\n<p>        \/* Efecto de brillo sutil en hover *\/<br \/>\n        .artistic-button:hover::after {<br \/>\n            filter: brightness(1.3);<br \/>\n            box-shadow: 0 3px 15px;<br \/>\n        }<\/p>\n<p>        \/* Ajuste espec\u00edfico para el bot\u00f3n de bebidas (color claro) *\/<br \/>\n        .drinks-button:hover::after {<br \/>\n            filter: brightness(1.1);<br \/>\n        }<\/p>\n<p>        \/* Responsive para el banner *\/<br \/>\n        @media (max-width: 1024px) {<br \/>\n            .menu-banner {<br \/>\n                height: 100vh;<br \/>\n            }<\/p>\n<p>            .banner-content h1 {<br \/>\n                font-size: 3.8rem;<br \/>\n                letter-spacing: 6px;<br \/>\n            }<\/p>\n<p>            .banner-content p {<br \/>\n                font-size: 1.3rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 768px) {<br \/>\n            .menu-banner {<br \/>\n                height: 100vh;<br \/>\n            }<\/p>\n<p>            .banner-content h1 {<br \/>\n                font-size: 3rem;<br \/>\n                letter-spacing: 4px;<br \/>\n                margin-bottom: 20px;<br \/>\n            }<\/p>\n<p>            .banner-content p {<br \/>\n                font-size: 1.1rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 600px) {<br \/>\n            .menu-banner {<br \/>\n                height: 100vh;<br \/>\n            }<\/p>\n<p>            .banner-content h1 {<br \/>\n                font-size: 2.3rem;<br \/>\n                letter-spacing: 3px;<br \/>\n            }<\/p>\n<p>            .banner-content p {<br \/>\n                font-size: 1rem;<br \/>\n            }<\/p>\n<p>            .scroll-indicator {<br \/>\n                font-size: 1.5rem;<br \/>\n                bottom: 30px;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 480px) {<br \/>\n            .menu-banner {<br \/>\n                height: 100vh;<br \/>\n            }<\/p>\n<p>            .banner-content h1 {<br \/>\n                font-size: 2rem;<br \/>\n                letter-spacing: 2px;<br \/>\n            }<\/p>\n<p>            .banner-content p {<br \/>\n                font-size: 0.9rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        \/* Responsive para los botones *\/<br \/>\n        @media (max-width: 1100px) {<br \/>\n            .buttons-wrapper {<br \/>\n                gap: 20px;<br \/>\n            }<\/p>\n<p>            .artistic-button {<br \/>\n                width: 290px;<br \/>\n                height: 380px;<br \/>\n            }<\/p>\n<p>            .button-content h3 {<br \/>\n                font-size: 1.7rem;<br \/>\n            }<\/p>\n<p>            .button-content p {<br \/>\n                font-size: 0.9rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 950px) {<br \/>\n            .buttons-wrapper {<br \/>\n                flex-wrap: wrap;<br \/>\n                gap: 25px;<br \/>\n            }<\/p>\n<p>            .artistic-button {<br \/>\n                width: 280px;<br \/>\n                height: 370px;<br \/>\n            }<\/p>\n<p>            .artistic-menu-title h2 {<br \/>\n                font-size: 2rem;<br \/>\n            }<\/p>\n<p>            .artistic-menu-title p {<br \/>\n                font-size: 1rem;<br \/>\n            }<\/p>\n<p>            .button-content h3 {<br \/>\n                font-size: 1.6rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 850px) {<br \/>\n            .buttons-wrapper {<br \/>\n                gap: 20px;<br \/>\n            }<\/p>\n<p>            .artistic-button {<br \/>\n                width: 250px;<br \/>\n                height: 340px;<br \/>\n            }<\/p>\n<p>            .button-content {<br \/>\n                padding: 25px 20px;<br \/>\n            }<\/p>\n<p>            .button-content h3 {<br \/>\n                font-size: 1.5rem;<br \/>\n            }<\/p>\n<p>            .button-content p {<br \/>\n                font-size: 0.85rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 750px) {<br \/>\n            .buttons-wrapper {<br \/>\n                flex-direction: column;<br \/>\n                gap: 25px;<br \/>\n            }<\/p>\n<p>            .artistic-button {<br \/>\n                width: 100%;<br \/>\n                max-width: 400px;<br \/>\n                height: 320px;<br \/>\n            }<\/p>\n<p>            .artistic-menu-title h2 {<br \/>\n                font-size: 1.8rem;<br \/>\n            }<\/p>\n<p>            .artistic-menu-title p {<br \/>\n                font-size: 0.95rem;<br \/>\n                max-width: 90%;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 600px) {<br \/>\n            .artistic-menu-container {<br \/>\n                padding: 50px 15px;<br \/>\n            }<\/p>\n<p>            .artistic-menu-title {<br \/>\n                margin-bottom: 40px;<br \/>\n            }<\/p>\n<p>            .artistic-menu-title h2 {<br \/>\n                font-size: 1.6rem;<br \/>\n                letter-spacing: 2px;<br \/>\n            }<\/p>\n<p>            .artistic-menu-title p {<br \/>\n                font-size: 0.9rem;<br \/>\n                margin-top: 20px;<br \/>\n            }<\/p>\n<p>            .artistic-button {<br \/>\n                height: 300px;<br \/>\n            }<\/p>\n<p>            .button-content h3 {<br \/>\n                font-size: 1.4rem;<br \/>\n            }<\/p>\n<p>            .button-content p {<br \/>\n                font-size: 0.85rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 480px) {<br \/>\n            .artistic-menu-title h2 {<br \/>\n                font-size: 1.5rem;<br \/>\n                letter-spacing: 1.5px;<br \/>\n            }<\/p>\n<p>            .artistic-button {<br \/>\n                height: 280px;<br \/>\n            }<\/p>\n<p>            .button-content h3 {<br \/>\n                font-size: 1.3rem;<br \/>\n            }<\/p>\n<p>            .button-content p {<br \/>\n                font-size: 0.8rem;<br \/>\n            }<\/p>\n<p>            .artistic-menu-container {<br \/>\n                padding: 40px 10px;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        \/* Asegurar que los botones queden lado a lado sin envolverse *\/<br \/>\n        .buttons-wrapper {<br \/>\n            flex-wrap: nowrap;<br \/>\n        }<\/p>\n<p>        \/* Para pantallas muy grandes *\/<br \/>\n        @media (min-width: 1400px) {<br \/>\n            .buttons-wrapper {<br \/>\n                gap: 40px;<br \/>\n            }<\/p>\n<p>            .artistic-button {<br \/>\n                width: 350px;<br \/>\n                height: 460px;<br \/>\n            }<\/p>\n<p>            .button-content h3 {<br \/>\n                font-size: 2rem;<br \/>\n            }<\/p>\n<p>            .button-content p {<br \/>\n                font-size: 1rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>    <!-- Fuente Poppins desde Google Fonts --><\/p>\n<p>    <!-- Banner Superior - QUE CUBRE COMPLETAMENTE DE IZQUIERDA A DERECHA --><\/p>\n<div class=\"menu-banner\">\n<div class=\"banner-content\">\n<h1>Men\u00fa<\/h1>\n<p>Calidad, pasi\u00f3n y frescura en cada creaci\u00f3n. Productos frescos preparados a la minuta.<\/p>\n<\/p><\/div>\n<p>        <!-- Flecha indicadora de scroll --><\/p>\n<div class=\"scroll-indicator\">\n            <i class=\"fas fa-chevron-down\"><\/i>\n        <\/div>\n<\/p><\/div>\n<p>    <!-- Contenedor de botones - QUE CUBRE COMPLETAMENTE DE IZQUIERDA A DERECHA --><\/p>\n<div class=\"artistic-menu-container\" id=\"menu-section\">\n<div class=\"artistic-menu-title\">\n<h2>Descubre Nuestras Especialidades<\/h2>\n<p>Selecciona una categor\u00eda para explorar nuestras deliciosas opciones<\/p>\n<\/p><\/div>\n<div class=\"buttons-wrapper\">\n            <!-- Bot\u00f3n Brunch con nuevo enlace --><br \/>\n            <a href=\"https:\/\/drive.google.com\/file\/d\/1pqSpRkm25X8GD4b7f1TjNoIAPPzQn98H\/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>Panader\u00eda artesanal, waffles y combinaciones \u00fanicas todo el d\u00eda.<\/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 con nuevo enlace --><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>Platos principales con ingredientes frescos y opciones saludables.<\/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 Bebidas con nuevo enlace --><br \/>\n            <a href=\"https:\/\/drive.google.com\/file\/d\/1EsahjjtsFbeztGur1tUvfjtpcyHJ9bBQ\/view?usp=sharing\" target=\"_blank\" class=\"artistic-button drinks-button\"><br \/>\n                <img decoding=\"async\" src=\"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\" alt=\"Bebidas\"><\/p>\n<div class=\"button-content\">\n<h3>Bebidas<\/h3>\n<p>T\u00e9s artesanales, caf\u00e9s especiales y refrescantes opciones fr\u00edas.<\/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>        \/\/ Efectos adicionales con JavaScript<br \/>\n        document.addEventListener(&#8216;DOMContentLoaded&#8217;, function() {<br \/>\n            \/\/ Mostrar contenido del banner con efecto<br \/>\n            setTimeout(() =&gt; {<br \/>\n                document.querySelector(&#8216;.banner-content&#8217;).classList.add(&#8216;visible&#8217;);<br \/>\n            }, 300);<\/p>\n<p>            \/\/ Scroll effect con Intersection Observer<br \/>\n            const observerOptions = {<br \/>\n                threshold: 0.1,<br \/>\n                rootMargin: &#8216;0px 0px -50px 0px&#8217;<br \/>\n            };<\/p>\n<p>            const observer = new IntersectionObserver((entries) =&gt; {<br \/>\n                entries.forEach(entry =&gt; {<br \/>\n                    if (entry.isIntersecting) {<br \/>\n                        entry.target.classList.add(&#8216;visible&#8217;);<br \/>\n                    }<br \/>\n                });<br \/>\n            }, observerOptions);<\/p>\n<p>            \/\/ Observar el contenedor de botones<br \/>\n            const menuContainer = document.querySelector(&#8216;.artistic-menu-container&#8217;);<br \/>\n            observer.observe(menuContainer);<\/p>\n<p>            \/\/ Obtener todos los botones art\u00edsticos<br \/>\n            const buttons = document.querySelectorAll(&#8216;.artistic-button&#8217;);<\/p>\n<p>            \/\/ Efecto de seguimiento de cursor sutil (solo en desktop)<br \/>\n            if (window.matchMedia(&#8220;(min-width: 768px)&#8221;).matches) {<br \/>\n                document.addEventListener(&#8216;mousemove&#8217;, function(e) {<br \/>\n                    const x = e.clientX \/ window.innerWidth;<\/p>\n<p>                    buttons.forEach(button =&gt; {<br \/>\n                        const rect = button.getBoundingClientRect();<br \/>\n                        const buttonCenterX = rect.left + rect.width \/ 2;<br \/>\n                        const distanceFromCenter = (e.clientX &#8211; buttonCenterX) \/ rect.width;<\/p>\n<p>                        \/\/ Efecto de inclinaci\u00f3n sutil basado en la posici\u00f3n del cursor<br \/>\n                        button.style.transform = `perspective(1000px) rotateY(${distanceFromCenter * 3}deg) translateY(0) scale(1)`;<br \/>\n                    });<br \/>\n                });<\/p>\n<p>                \/\/ Resetear transformaci\u00f3n cuando el cursor sale<br \/>\n                document.addEventListener(&#8216;mouseleave&#8217;, function() {<br \/>\n                    buttons.forEach(button =&gt; {<br \/>\n                        button.style.transform = &#8216;perspective(1000px) rotateY(0deg) translateY(0) scale(1)&#8217;;<br \/>\n                    });<br \/>\n                });<br \/>\n            }<\/p>\n<p>            \/\/ A\u00f1adir efecto de brillo sutil al pasar sobre los botones<br \/>\n            buttons.forEach(button =&gt; {<br \/>\n                button.addEventListener(&#8216;mouseenter&#8217;, function() {<br \/>\n                    this.style.boxShadow = &#8216;0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 255, 0.1) inset&#8217;;<br \/>\n                });<\/p>\n<p>                button.addEventListener(&#8216;mouseleave&#8217;, function() {<br \/>\n                    this.style.boxShadow = &#8216;0 12px 30px rgba(0, 0, 0, 0.12)&#8217;;<br \/>\n                });<br \/>\n            });<\/p>\n<p>            \/\/ Efecto de scroll suave para el banner al cargar<br \/>\n            window.addEventListener(&#8216;scroll&#8217;, function() {<br \/>\n                const scrolled = window.pageYOffset;<br \/>\n                const banner = document.querySelector(&#8216;.menu-banner&#8217;);<br \/>\n                const rate = scrolled * 0.5;<\/p>\n<p>                \/\/ Efecto parallax sutil en el banner<br \/>\n                banner.style.transform = `translate3d(0, ${rate}px, 0)`;<br \/>\n            });<br \/>\n        });<\/p>\n<p>        \/\/ Funci\u00f3n para scroll suave hacia la secci\u00f3n del men\u00fa<br \/>\n        function scrollToMenu() {<br \/>\n            const menuSection = document.getElementById(&#8216;menu-section&#8217;);<br \/>\n            menuSection.scrollIntoView({<br \/>\n                behavior: &#8216;smooth&#8217;,<br \/>\n                block: &#8216;start&#8217;<br \/>\n            });<br \/>\n        }<\/p>\n<p>        \/\/ Efecto adicional al hacer scroll: mostrar\/ocultar flecha<br \/>\n        window.addEventListener(&#8216;scroll&#8217;, function() {<br \/>\n            const scrollIndicator = document.querySelector(&#8216;.scroll-indicator&#8217;);<br \/>\n            const scrollPosition = window.scrollY;<br \/>\n            const windowHeight = window.innerHeight;<\/p>\n<p>            if (scrollPosition &gt; windowHeight * 0.3) {<br \/>\n                scrollIndicator.style.opacity = &#8216;0&#8217;;<br \/>\n                scrollIndicator.style.pointerEvents = &#8216;none&#8217;;<br \/>\n            } else {<br \/>\n                scrollIndicator.style.opacity = &#8216;0.8&#8217;;<br \/>\n                scrollIndicator.style.pointerEvents = &#8216;auto&#8217;;<br \/>\n            }<br \/>\n        });<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"uOTqfyIhjUlS_uOTqfyIhjUlS\" class=\"brz-section brz-css-d-section brz-css-1ptaubl\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-sectionitem-bg brz-css-181tukb\" data-brz-custom-id=\"wvaFwmH8fuYd\">\n<div class=\"brz-container brz-css-d-sectionitem-container brz-css-1vgq8nr\">\n<div id=\"\" class=\"brz-css-d-wrapper brz-css-4jk91j brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-wpcustomshortcode brz-css-9xxqf\" 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-section brz-css-1mb11k5\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-sectionitem-bg brz-css-1p4b4a8\" data-brz-custom-id=\"jrwk5S_MsTtD\">\n<div class=\"brz-container brz-css-d-sectionitem-container brz-css-17hqgpf\">\n<div id=\"\" class=\"brz-css-d-wrapper brz-css-11trx28 brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-wpcustomshortcode brz-css-16mv6qi\" data-brz-custom-id=\"f7vV6KpfR0uB\">\n<div>\n<p>    <title>Ubicaci\u00f3n Medell\u00edn &#8211; WordPress<\/title><\/p>\n<p>        * {<br \/>\n            margin: 0;<br \/>\n            padding: 0;<br \/>\n            box-sizing: border-box;<br \/>\n        }<\/p>\n<p>        body {<br \/>\n            background-color: #f5f5f5;<br \/>\n            padding: 20px;<br \/>\n        }<\/p>\n<p>        .container {<br \/>\n            font-family: &#8216;Poppins&#8217;, sans-serif;<br \/>\n            position: relative;<br \/>\n            width: 100%;<br \/>\n            max-width: 1000px;<br \/>\n            margin: 0 auto;<br \/>\n            overflow: hidden;<br \/>\n            border-radius: 0;<br \/>\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);<br \/>\n        }<\/p>\n<p>        .image-container {<br \/>\n            position: relative;<br \/>\n            width: 100%;<br \/>\n            height: 400px;<br \/>\n            background-color: #000;<br \/>\n            border-radius: 0;<br \/>\n        }<\/p>\n<p>        .image-container img {<br \/>\n            width: 100%;<br \/>\n            height: 100%;<br \/>\n            object-fit: cover;<br \/>\n            object-position: center 30%;<br \/>\n            opacity: 0.6;<br \/>\n            filter: brightness(0.8);<br \/>\n            transition: opacity 0.5s ease;<br \/>\n            border-radius: 0;<br \/>\n        }<\/p>\n<p>        .image-container:hover img {<br \/>\n            opacity: 0.7;<br \/>\n            filter: brightness(0.9);<br \/>\n        }<\/p>\n<p>        .text-overlay {<br \/>\n            position: absolute;<br \/>\n            top: 0;<br \/>\n            left: 0;<br \/>\n            width: 100%;<br \/>\n            height: 100%;<br \/>\n            display: flex;<br \/>\n            flex-direction: column;<br \/>\n            justify-content: center;<br \/>\n            align-items: center;<br \/>\n            color: white;<br \/>\n            text-align: center;<br \/>\n            padding: 20px;<br \/>\n        }<\/p>\n<p>        .city-name {<br \/>\n            font-size: 2rem; \/* MUCHO m\u00e1s peque\u00f1o (era 4rem) *\/<br \/>\n            font-weight: 700;<br \/>\n            margin-bottom: 8px; \/* Menor separaci\u00f3n *\/<br \/>\n            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);<br \/>\n            letter-spacing: 1px;<br \/>\n        }<\/p>\n<p>        .address {<br \/>\n            font-size: 1rem; \/* MUCHO m\u00e1s peque\u00f1o (era 1.8rem) *\/<br \/>\n            font-weight: 400;<br \/>\n            margin-bottom: 30px; \/* Menor separaci\u00f3n *\/<br \/>\n            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);<br \/>\n            max-width: 70%;<br \/>\n            line-height: 1.4;<br \/>\n        }<\/p>\n<p>        .whatsapp-btn {<br \/>\n            background-color: white;<br \/>\n            color: #333;<br \/>\n            border: none;<br \/>\n            padding: 12px 30px; \/* M\u00e1s peque\u00f1o *\/<br \/>\n            font-size: 0.9rem; \/* M\u00e1s peque\u00f1o *\/<br \/>\n            font-weight: 600;<br \/>\n            font-family: &#8216;Poppins&#8217;, sans-serif;<br \/>\n            border-radius: 0;<br \/>\n            cursor: pointer;<br \/>\n            transition: all 0.3s ease;<br \/>\n            text-decoration: none;<br \/>\n            display: inline-block;<br \/>\n            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);<br \/>\n            letter-spacing: 0.5px;<br \/>\n            border: 1px solid transparent;<br \/>\n        }<\/p>\n<p>        .whatsapp-btn:hover {<br \/>\n            background-color: #f0f0f0;<br \/>\n            transform: translateY(-2px);<br \/>\n            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);<br \/>\n            border-color: #ccc;<br \/>\n        }<\/p>\n<p>        .whatsapp-btn:active {<br \/>\n            transform: translateY(0);<br \/>\n        }<\/p>\n<p>        \/* Efectos de borde puntiagudo adicional *\/<br \/>\n        .container::before {<br \/>\n            content: &#8221;;<br \/>\n            position: absolute;<br \/>\n            top: -2px;<br \/>\n            left: -2px;<br \/>\n            right: -2px;<br \/>\n            bottom: -2px;<br \/>\n            background: linear-gradient(45deg, #fff, #ddd, #fff);<br \/>\n            z-index: -1;<br \/>\n            border-radius: 0;<br \/>\n        }<\/p>\n<p>        \/* Responsive para tablets y m\u00f3viles *\/<br \/>\n        @media (max-width: 1024px) {<br \/>\n            .container {<br \/>\n                max-width: 95%;<br \/>\n            }<\/p>\n<p>            .city-name {<br \/>\n                font-size: 1.8rem;<br \/>\n            }<\/p>\n<p>            .address {<br \/>\n                font-size: 0.9rem;<br \/>\n                margin-bottom: 25px;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 768px) {<br \/>\n            .image-container {<br \/>\n                height: 350px;<br \/>\n            }<\/p>\n<p>            .city-name {<br \/>\n                font-size: 1.6rem;<br \/>\n            }<\/p>\n<p>            .address {<br \/>\n                font-size: 0.85rem;<br \/>\n                margin-bottom: 20px;<br \/>\n                max-width: 80%;<br \/>\n            }<\/p>\n<p>            .whatsapp-btn {<br \/>\n                padding: 10px 25px;<br \/>\n                font-size: 0.85rem;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        @media (max-width: 480px) {<br \/>\n            .image-container {<br \/>\n                height: 300px;<br \/>\n            }<\/p>\n<p>            .city-name {<br \/>\n                font-size: 1.4rem;<br \/>\n            }<\/p>\n<p>            .address {<br \/>\n                font-size: 0.75rem;<br \/>\n                margin-bottom: 15px;<br \/>\n                max-width: 85%;<br \/>\n            }<\/p>\n<p>            .whatsapp-btn {<br \/>\n                padding: 8px 20px;<br \/>\n                font-size: 0.8rem;<br \/>\n            }<\/p>\n<p>            body {<br \/>\n                padding: 10px;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        \/* Para pantallas muy grandes *\/<br \/>\n        @media (min-width: 1600px) {<br \/>\n            .container {<br \/>\n                max-width: 1200px;<br \/>\n            }<\/p>\n<p>            .image-container {<br \/>\n                height: 450px;<br \/>\n            }<\/p>\n<p>            .city-name {<br \/>\n                font-size: 2.2rem; \/* Relativamente peque\u00f1o incluso en pantallas grandes *\/<br \/>\n            }<\/p>\n<p>            .address {<br \/>\n                font-size: 1.1rem;<br \/>\n            }<br \/>\n        }<\/p>\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\/2025\/12\/IMG-20190714-WA0030.jpg\" 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<\/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>        document.addEventListener(&#8216;DOMContentLoaded&#8217;, function() {<br \/>\n            const img = document.querySelector(&#8216;.image-container img&#8217;);<\/p>\n<p>            \/\/ Efecto de carga de imagen<br \/>\n            img.addEventListener(&#8216;load&#8217;, function() {<br \/>\n                this.style.transition = &#8216;opacity 1s ease&#8217;;<br \/>\n                this.style.opacity = &#8216;0.6&#8217;;<br \/>\n            });<\/p>\n<p>            \/\/ Si la imagen ya est\u00e1 cargada (cach\u00e9)<br \/>\n            if (img.complete) {<br \/>\n                img.style.opacity = &#8216;0.6&#8217;;<br \/>\n            }<\/p>\n<p>            \/\/ Ajustar el recorte de imagen seg\u00fan el tama\u00f1o de pantalla<br \/>\n            function adjustImagePosition() {<br \/>\n                const width = window.innerWidth;<br \/>\n                if (width &lt;= 768) {<br \/>\n                    img.style.objectPosition = &#039;center 40%&#039;;<br \/>\n                } else {<br \/>\n                    img.style.objectPosition = &#039;center 30%&#039;;<br \/>\n                }<br \/>\n            }<\/p>\n<p>            \/\/ Ajustar al cargar y al redimensionar<br \/>\n            adjustImagePosition();<br \/>\n            window.addEventListener(&#039;resize&#039;, adjustImagePosition);<br \/>\n        });<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"\" class=\"brz-css-d-wrapper brz-css-1w1pm9d brz-wrapper\">\n<div class=\"brz-map brz-map_styles brz-css-d-map brz-css-jqoqpo\" data-brz-custom-id=\"a2gu3apcH8e4\">\n<div class=\"brz-ui-ed-map-content\"><\/div>\n<\/div>\n<\/div>\n<div id=\"\" class=\"brz-css-d-wrapper brz-css-1gr9x0z brz-wrapper\">\n<div class=\"brz-map brz-map_styles brz-css-d-map brz-css-1v5j8nx\" data-brz-custom-id=\"zU8DrIejOtEn\">\n<div class=\"brz-ui-ed-map-content\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"fjk9cq8m2vAm_fjk9cq8m2vAm\" class=\"brz-section brz-css-d-section brz-css-ssbftb\">\n<div class=\"brz-section__content brz-section--boxed brz-css-d-sectionitem-bg brz-css-7as83c\" data-brz-custom-id=\"vpCtre3TDGVg\">\n<div class=\"brz-container brz-css-d-sectionitem-container brz-css-bz050t\">\n<div id=\"\" class=\"brz-css-d-wrapper brz-css-t4og6b brz-wrapper\">\n<div class=\"brz-wp-shortcode brz-css-d-wpcustomshortcode brz-css-1ov8d2e\" data-brz-custom-id=\"i2ZObuL3CXCo\">\n<div>\n.dandroca-contacto-block {<br \/>\n    font-family: -apple-system, BlinkMacSystemFont, &#8216;Segoe UI&#8217;, Roboto, Oxygen, Ubuntu, sans-serif;<br \/>\n    width: 100%;<br \/>\n    margin: 0 auto;<br \/>\n    padding: 20px 15px;<br \/>\n    color: white;<br \/>\n    background-color: #1A3E5F;<br \/>\n    font-size: 12px;<br \/>\n    box-sizing: border-box;<br \/>\n}<\/p>\n<p>\/* Contenedor interno para centrar el contenido *\/<br \/>\n.dandroca-contacto-block .contenedor-interno {<br \/>\n    max-width: 1000px;<br \/>\n    margin: 0 auto;<br \/>\n    width: 100%;<br \/>\n}<\/p>\n<p>\/* Contenedor principal &#8211; todo lado a lado *\/<br \/>\n.dandroca-contacto-block .contenedor-principal {<br \/>\n    display: flex;<br \/>\n    flex-wrap: wrap;<br \/>\n    gap: 30px;<br \/>\n    margin-bottom: 15px;<br \/>\n}<\/p>\n<p>\/* Columna izquierda: Contacto *\/<br \/>\n.dandroca-contacto-block .columna-contacto {<br \/>\n    flex: 1;<br \/>\n    min-width: 250px;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .titulo-contacto {<br \/>\n    color: white;<br \/>\n    font-size: 14px;<br \/>\n    font-weight: 600;<br \/>\n    margin-bottom: 8px;<br \/>\n    border-bottom: 1px solid rgba(255, 255, 255, 0.3);<br \/>\n    padding-bottom: 3px;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .info-contacto {<br \/>\n    margin-top: 3px;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .telefonos {<br \/>\n    font-size: 12px;<br \/>\n    font-weight: 500;<br \/>\n    margin-bottom: 6px;<br \/>\n    color: white;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .email {<br \/>\n    font-size: 12px;<br \/>\n    color: white;<br \/>\n    font-weight: 500;<br \/>\n}<\/p>\n<p>\/* Contenedor para Direcci\u00f3n y Horario (lado a lado) *\/<br \/>\n.dandroca-contacto-block .columna-derecha {<br \/>\n    flex: 2;<br \/>\n    min-width: 300px;<br \/>\n    display: flex;<br \/>\n    gap: 30px;<br \/>\n}<\/p>\n<p>\/* Estilos para Direcci\u00f3n y Horario *\/<br \/>\n.dandroca-contacto-block .seccion-direccion,<br \/>\n.dandroca-contacto-block .seccion-horario {<br \/>\n    flex: 1;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .titulo-seccion {<br \/>\n    color: white;<br \/>\n    font-size: 14px;<br \/>\n    font-weight: 600;<br \/>\n    margin-bottom: 8px;<br \/>\n    border-bottom: 1px solid rgba(255, 255, 255, 0.3);<br \/>\n    padding-bottom: 3px;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .contenido-seccion {<br \/>\n    font-size: 12px;<br \/>\n    line-height: 1.4;<br \/>\n    color: rgba(255, 255, 255, 0.95);<br \/>\n}<\/p>\n<p>\/* Secci\u00f3n de suscripci\u00f3n *\/<br \/>\n.dandroca-contacto-block .separator {<br \/>\n    height: 1px;<br \/>\n    background-color: rgba(255, 255, 255, 0.2);<br \/>\n    margin: 20px 0;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .suscripcion {<br \/>\n    background-color: rgba(255, 255, 255, 0.1);<br \/>\n    padding: 15px;<br \/>\n    margin: 15px 0;<br \/>\n    border: 1px solid rgba(255, 255, 255, 0.15);<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .suscripcion h3 {<br \/>\n    color: white;<br \/>\n    margin-top: 0;<br \/>\n    margin-bottom: 10px;<br \/>\n    font-size: 14px;<br \/>\n    font-weight: 600;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .suscripcion-form {<br \/>\n    display: flex;<br \/>\n    gap: 8px;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .email-input {<br \/>\n    flex-grow: 1;<br \/>\n    padding: 8px 12px;<br \/>\n    border: none;<br \/>\n    border-radius: 3px;<br \/>\n    font-size: 12px;<br \/>\n    background-color: white;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .unete-btn {<br \/>\n    background-color: #FF7F50;<br \/>\n    color: white;<br \/>\n    border: none;<br \/>\n    border-radius: 3px;<br \/>\n    padding: 8px 20px;<br \/>\n    font-size: 12px;<br \/>\n    font-weight: 600;<br \/>\n    cursor: pointer;<br \/>\n    transition: background-color 0.3s;<br \/>\n    white-space: nowrap;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .unete-btn:hover {<br \/>\n    background-color: #FF6347;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .gracias-mensaje {<br \/>\n    text-align: center;<br \/>\n    font-size: 16px;<br \/>\n    color: white;<br \/>\n    margin: 20px 0;<br \/>\n    font-weight: 600;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .legal-links {<br \/>\n    display: flex;<br \/>\n    justify-content: center;<br \/>\n    gap: 20px;<br \/>\n    margin-top: 15px;<br \/>\n    font-size: 11px;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .legal-links a {<br \/>\n    color: rgba(255, 255, 255, 0.9);<br \/>\n    text-decoration: none;<br \/>\n    font-weight: 500;<br \/>\n    border-bottom: 1px solid rgba(255, 255, 255, 0.3);<br \/>\n    padding-bottom: 1px;<br \/>\n}<\/p>\n<p>.dandroca-contacto-block .legal-links a:hover {<br \/>\n    color: white;<br \/>\n    border-bottom-color: white;<br \/>\n}<\/p>\n<p>\/* Responsive *\/<br \/>\n@media (max-width: 768px) {<br \/>\n    .dandroca-contacto-block {<br \/>\n        padding: 15px 12px;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .contenedor-principal {<br \/>\n        flex-direction: column;<br \/>\n        gap: 20px;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .columna-derecha {<br \/>\n        flex-direction: column;<br \/>\n        gap: 20px;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .columna-contacto,<br \/>\n    .dandroca-contacto-block .columna-derecha {<br \/>\n        min-width: 100%;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .suscripcion-form {<br \/>\n        flex-direction: column;<br \/>\n    }<br \/>\n}<\/p>\n<p>@media (max-width: 480px) {<br \/>\n    .dandroca-contacto-block {<br \/>\n        padding: 10px;<br \/>\n        font-size: 11px;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .titulo-contacto,<br \/>\n    .dandroca-contacto-block .titulo-seccion {<br \/>\n        font-size: 13px;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .contenido-seccion,<br \/>\n    .dandroca-contacto-block .telefonos,<br \/>\n    .dandroca-contacto-block .email {<br \/>\n        font-size: 11px;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .suscripcion h3 {<br \/>\n        font-size: 13px;<br \/>\n    }<\/p>\n<p>    .dandroca-contacto-block .gracias-mensaje {<br \/>\n        font-size: 14px;<br \/>\n    }<br \/>\n}<\/p>\n<p>\/* Para asegurar que ocupe todo el ancho en WordPress *\/<br \/>\nbody .dandroca-contacto-block {<br \/>\n    width: 100vw;<br \/>\n    position: relative;<br \/>\n    left: 50%;<br \/>\n    right: 50%;<br \/>\n    margin-left: -50vw;<br \/>\n    margin-right: -50vw;<br \/>\n}<\/p>\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                        Lun &#8211; Sab: 7:00 &#8211; 16:00<br \/>\n                        Domingo: 7:30 &#8211; 15:30\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<p>                <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>document.addEventListener(&#8216;DOMContentLoaded&#8217;, function() {<br \/>\n    \/\/ Manejar el env\u00edo del formulario de suscripci\u00f3n<br \/>\n    const suscripcionBtn = document.querySelector(&#8216;.unete-btn&#8217;);<br \/>\n    const emailInput = document.querySelector(&#8216;.email-input&#8217;);<\/p>\n<p>    if (suscripcionBtn) {<br \/>\n        suscripcionBtn.addEventListener(&#8216;click&#8217;, function() {<br \/>\n            const email = emailInput.value.trim();<\/p>\n<p>            if (email === &#8221;) {<br \/>\n                alert(&#8216;Por favor, ingresa tu email&#8217;);<br \/>\n                emailInput.focus();<br \/>\n                return;<br \/>\n            }<\/p>\n<p>            if (!isValidEmail(email)) {<br \/>\n                alert(&#8216;Por favor, ingresa un email v\u00e1lido&#8217;);<br \/>\n                emailInput.focus();<br \/>\n                return;<br \/>\n            }<\/p>\n<p>            \/\/ Aqu\u00ed normalmente enviar\u00edas los datos a un servidor<br \/>\n            alert(`Gracias por suscribirte con el email: ${email}`);<br \/>\n            emailInput.value = &#8221;;<br \/>\n        });<\/p>\n<p>        \/\/ Permitir enviar con la tecla Enter<br \/>\n        emailInput.addEventListener(&#8216;keypress&#8217;, function(e) {<br \/>\n            if (e.key === &#8216;Enter&#8217;) {<br \/>\n                suscripcionBtn.click();<br \/>\n            }<br \/>\n        });<br \/>\n    }<\/p>\n<p>    \/\/ Funci\u00f3n para validar email<br \/>\n    function isValidEmail(email) {<br \/>\n        const re = \/^[^s@]+@[^s@]+.[^s@]+$\/;<br \/>\n        return re.test(email);<br \/>\n    }<br \/>\n});\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section><\/div>\n<p><!-- version:1772797769 --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Header &#8211; D&#8217;Andr\u00e9 \/* Reset y estilos base *\/ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, &#8216;Segoe UI&#8217;, Roboto, Oxygen, Ubuntu, sans-serif; } \/* Header principal *\/ .dandre-header { position: fixed; top: 0; left: 0; width: 100%; background-color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: [&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":2465,"href":"https:\/\/www.dandre.com.co\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions\/2465"}],"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}]}}