/* Mobile-first layout. Local fonts, compiled Tailwind, no runtime dependencies. */
:root{--forest:#075733;--deep:#073d28;--ivory:#fcfaf3;--mint:#e9f5e8;--yellow:#ffdf00;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--ivory);color:var(--deep);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}h1,h2{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.035em;line-height:1.15;text-wrap:balance}h3{line-height:1.35}em{font-weight:inherit}a,button,input{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b39700;outline-offset:5px}[hidden]{display:none!important}.icon{width:22px;height:22px;flex:none}.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:white;padding:12px;transform:translateY(-160%)}.skip-link:focus{transform:none}.header-inner{max-width:1280px;margin:auto;min-height:84px;padding:14px 5%;gap:20px}.brand{display:block;width:180px;flex:none}.brand img{width:100%;height:auto}.desktop-nav,.header-cta{display:none}.mobile-toggle{display:grid;place-items:center;margin-left:auto;background:transparent;border:1px solid #07573330;border-radius:10px;width:44px;height:44px}.mobile-nav{padding:8px 5% 20px;border-top:1px solid #07573315}.mobile-nav a{display:block;padding:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:12px 22px;background:var(--yellow);color:var(--deep);border:0;border-radius:8px;font-size:14px;font-weight:700;transition:transform .25s,box-shadow .25s}.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--forest);color:white;padding-bottom:245px}.hero-image{position:absolute;inset:auto 0 0;width:100%;height:280px;object-fit:cover;z-index:-2}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#075733 0%,#075733 45%,#075733dd 60%,transparent 85%);pointer-events:none}.hero-copy{padding:42px 6% 28px;position:relative;z-index:1}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;line-height:1.5}.hero h1{font-size:clamp(36px,8.5vw,48px);margin:16px 0}.hero h1 em,.story em,.banner-copy em,.menu-banner em{color:var(--yellow)}.hero-description{font-size:16px;line-height:1.65;margin:18px 0 24px;max-width:38ch}.brush{display:none}.flag-rule{display:flex;width:110px;height:3px;margin-top:25px}.flag-rule i{flex:1;background:#fddd00}.flag-rule i:nth-child(2){background:#1549a3}.flag-rule i:nth-child(3){background:#d52d36}.benefits{gap:16px;padding:24px 5%;background:#f2f6ec}.benefits>div{display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;font-size:11px}.benefit-icon{display:grid;place-items:center;width:36px;height:36px}.favorites,.menu-content{padding:44px 5%;max-width:1280px;margin:auto;position:relative}.home-favorites-backdrop,.original-flag{display:none}.section-heading{text-align:center;margin-bottom:28px}.section-heading h2,.price-section-heading h2{font-size:clamp(28px,5vw,38px)}.short-rule{display:block;width:40px;height:3px;background:#bca416;margin:16px auto 0}.food-grid{gap:22px;align-items:stretch}.food-card{display:block;min-width:0;background:#fffdf7;border:1px solid #07573314;border-radius:16px;overflow:hidden;box-shadow:0 5px 20px #073d2806;transition:box-shadow .3s,transform .3s}.card-photo{aspect-ratio:1.5;overflow:hidden;background:#e9f1e3}.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.card-caption{display:flex;align-items:center;justify-content:space-between;padding:22px;gap:14px}.card-caption h2,.card-caption h3{font-family:'DM Sans',Arial,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.3}.card-caption p{font-size:14px;line-height:1.6;margin-top:8px;max-width:34ch;color:#476553}.round-arrow{display:grid;place-items:center;flex:none;background:#edf4e6;border-radius:50%;width:36px;height:36px}.story{display:grid;background:var(--forest);color:white;overflow:hidden}.story-photo{position:relative;overflow:hidden;aspect-ratio:1.5}.story-photo img{width:100%;height:100%;object-fit:cover}.story-copy{padding:36px 7% 44px;align-self:center}.story-copy .flag-rule{margin:0 0 22px}.story h2{font-size:clamp(29px,5vw,40px)}.story p{font-size:15px;line-height:1.8;margin-top:22px;max-width:40ch}.home-banner,.menu-banner{position:relative;overflow:hidden;background:#06472e;color:white}.banner-copy{text-align:center;padding:48px 6%}.banner-copy h2,.menu-banner h2{font-size:clamp(29px,5vw,40px);margin-bottom:24px}.footer-inner{max-width:1280px;margin:auto;padding:30px 5%;gap:26px;flex-direction:column}.footer-brand{width:190px}.footer-links{flex-wrap:wrap;justify-content:center;gap:24px;font-size:13px}.footer-links a{display:inline-flex;align-items:center;gap:7px;min-height:44px}.search-box{display:flex;align-items:center;gap:12px;background:white;border-radius:10px;color:var(--deep);max-width:420px;width:100%;padding:12px 16px}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:14px}.search-clear{border:0;background:transparent;min-width:32px;min-height:32px}.filter-bar{gap:8px;flex-wrap:wrap;padding:0 0 28px}.filter{border:1px solid #07573322;background:transparent;border-radius:24px;padding:10px 18px;font-size:13px;min-height:44px}.filter.active{color:white;background:var(--forest)}.menu-banner{display:grid}.menu-banner-copy{padding:40px 7%}.menu-banner-photo{width:100%;height:300px;object-fit:cover}.category-hero{display:grid;background:var(--mint)}.category-hero-copy{padding:30px 6% 36px;align-self:center;min-width:0}.breadcrumb{display:inline-block;font-size:13px;margin-bottom:28px;padding-block:8px}.category-hero h1{font-size:clamp(32px,7vw,44px);margin-top:14px;overflow-wrap:anywhere}.category-intro{font-size:15px;line-height:1.7;margin-top:18px;max-width:42ch}.category-hero-photo{aspect-ratio:1.6;overflow:hidden}.category-hero-photo img{width:100%;height:100%;object-fit:cover}.category-navigation{display:flex;gap:8px;overflow:auto;padding:18px 5%;scrollbar-width:thin;border-bottom:1px solid #07573312}.category-tab{white-space:nowrap;padding:10px 16px;border:1px solid #07573322;border-radius:22px;font-size:12px;min-height:44px}.category-tab.current{background:var(--forest);color:white}.price-section{max-width:1200px;padding:40px 5%;margin:auto}.price-section-heading{margin-bottom:28px}.price-section-heading h2{margin:10px 0}.price-section-heading>p{font-size:13px;color:#476553}.price-layout{display:grid;gap:26px;align-items:start}.price-list{min-width:0;background:white;border:1px solid #07573312;border-radius:16px;padding:0 20px}.price-item{display:flex;align-items:baseline;gap:12px;padding:24px 0;border-bottom:1px solid #07573312}.price-item:last-child{border:0}.price-item-copy{flex:1;min-width:0}.price-item h3{font-size:17px;font-weight:600;overflow-wrap:anywhere}.price-item-copy>p{font-size:13px;color:#476553;line-height:1.75;margin-top:8px}.price-dots{display:none}.item-price{font-size:17px;font-weight:700;flex:none}.currency{font-size:.8em;margin-right:2px}.category-aside{display:grid;gap:20px;min-width:0}.category-aside section,.category-help{padding:24px;background:#edf4e8;border-radius:14px}.category-aside h2{font-size:23px;margin-bottom:14px}.category-aside p,.category-aside li{font-size:14px;line-height:1.75}.category-aside ul{padding-left:18px;margin:0}.category-help p{font-size:17px;margin:12px 0 20px}.price-caption{font-size:12px;line-height:1.7;color:#526456;margin-top:26px}.category-pagination{display:flex;justify-content:space-between;gap:16px;padding:24px 5%;border-top:1px solid #07573318;font-size:12px}.category-pagination a{padding-block:10px}.category-pagination a:nth-child(2){display:none}.empty-state{text-align:center;padding:40px 0}.empty-state h2,.dish-results h2{font-size:26px;margin-bottom:16px}.empty-state p{margin-bottom:20px}.dish-results{margin-top:32px}.dish-result-list{display:grid;gap:14px}.dish-result{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;background:white;border:1px solid #07573322;border-radius:12px}.dish-result span{min-width:0}.dish-result small,.dish-result strong{display:block}.dish-result small{font-size:12px}.dish-result strong{font-size:15px}.dish-result b{flex:none;font-size:14px}.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--delay,0ms)}.motion-ready .reveal.is-visible{opacity:1;transform:none}.hero-reveal{animation:enter .65s var(--ease) both}.hero-reveal:nth-child(2){animation-delay:.08s}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:640px){.home-page .food-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-card .card-caption{padding:16px}.home-card .round-arrow{display:none}.home-card .card-caption h3{font-size:19px}.footer-inner{flex-direction:row}.benefits{gap:50px}.benefits>div{font-size:13px;flex-direction:row}.dish-result-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:769px){.desktop-nav{display:flex;gap:30px;font-size:14px}.desktop-nav a{padding:10px 0}.desktop-nav a[aria-current]{font-weight:700}.header-cta{display:inline-flex}.mobile-toggle,.mobile-nav{display:none}.header-inner{min-height:90px}.hero{padding-bottom:0;min-height:440px;display:flex;align-items:center}.hero-image{inset:0 0 0 auto;width:65%;height:100%;object-position:center}.hero:after{background:linear-gradient(90deg,#075733 20%,#075733ed 33%,#07573344 59%,transparent 80%)}.hero-copy{padding:58px 6%;width:100%;max-width:1440px;margin:auto}.hero h1{font-size:clamp(42px,4.8vw,64px);max-width:13ch}.hero-description{font-size:17px}.favorites,.menu-content{padding:56px 5%}.story{grid-template-columns:1fr 1fr;max-height:460px}.story-photo{aspect-ratio:auto;min-height:350px}.story-copy{padding:44px 12%}.menu-banner{grid-template-columns:1fr 1fr;align-items:center}.menu-banner-photo{height:360px}.category-hero{grid-template-columns:1fr 1fr}.category-hero-copy{padding:38px 12%}.category-hero h1{font-size:clamp(36px,4vw,52px)}.category-hero-photo{aspect-ratio:1.6;max-height:400px}.price-layout{grid-template-columns:minmax(0,1fr) minmax(240px,.45fr)}.price-list{padding:0 30px}.category-pagination a:nth-child(2){display:block}.category-navigation{justify-content:flex-start}.home-card .round-arrow{display:grid}.card-caption h2{font-size:22px}}
@media(min-width:1280px){.hero-copy{padding-inline:max(6%,calc((100vw - 1120px)/2))}.hero{min-height:490px}.story-copy{padding-right:max(12%,calc((100vw - 1120px)/2))}.category-navigation{padding-inline:max(5%,calc((100vw - 1160px)/2))}}
@media(hover:hover){.food-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #073d2812}.food-card:hover .card-photo img{transform:scale(1.035)}.button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0002}.desktop-nav a:hover,.footer-links a:hover,.breadcrumb:hover{text-decoration:underline;text-underline-offset:5px}.category-tab:hover{background:#dcead7}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}
@media print{.mobile-toggle,.search-box,.filter-bar{display:none}.motion-ready .reveal{opacity:1;transform:none}.hero{print-color-adjust:exact}}
/* Restored corporate backgrounds: the mobile assets are the default. */
.site-header,.site-footer,.benefits{background-color:#fffdf5;background-image:url('./assets/backgrounds/fondo-marfil-mobile.avif');background-size:cover;background-position:center}
.hero{background-color:#075733;background-image:url('./assets/backgrounds/fondo-hero-mobile.avif');background-size:cover;background-position:left top}
.hero:after{background:linear-gradient(180deg,#07573320 0%,#07573340 46%,#07573375 60%,transparent 85%)}
.hero-image{z-index:-1;mask-image:linear-gradient(180deg,transparent,#000 24%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%)}
.hero:after{z-index:0}.hero-copy{z-index:1}
.home-page .favorites{max-width:none;background:#edf6e7 url('./assets/backgrounds/fondo-platos-mobile.avif') center/cover no-repeat}
.home-page .favorites .food-grid{max-width:1152px;margin-inline:auto}
body:has(.menu-content){background:#edf6e7 url('./assets/backgrounds/fondo-platos-mobile.avif') center top/100% auto no-repeat}
.story{background:#075733 url('./assets/backgrounds/fondo-tradicion-mobile.avif') right center/cover no-repeat}
.home-banner,.menu-banner{background:#06472e url('./assets/backgrounds/fondo-antojo-mobile.avif') center/cover no-repeat}
.home-banner:before{content:'';position:absolute;inset:0;background:#003d2730;pointer-events:none}.banner-copy{position:relative}
.category-hero{background:#e9f5e8 url('./assets/backgrounds/fondo-platos-mobile.avif') center/cover no-repeat}
/* Restore the original editorial serif, with restrained responsive sizing. */
.card-caption h2,.card-caption h3,.home-card .card-caption h3{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:700;letter-spacing:-.035em;line-height:1.2}
.card-caption p{font-family:'Playfair Display',Georgia,serif;font-size:15px;line-height:1.5;color:var(--deep)}
.price-item h3{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.filter,.category-tab,.button{font-family:'Playfair Display',Georgia,serif}
.round-arrow{background:var(--forest);color:white}.button{border-radius:24px}
@media(min-width:769px){
 .site-header,.site-footer,.benefits{background-image:url('./assets/backgrounds/fondo-marfil-desktop.avif')}
 .hero{background-image:url('./assets/backgrounds/fondo-hero-desktop.avif');background-position:center}
 .hero-image{mask-image:linear-gradient(90deg,transparent,#000 24%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%)}
 .hero:after{background:linear-gradient(90deg,#004b2d28,#004b2d20 40%,transparent 66%)}
 .home-page .favorites,body:has(.menu-content),.category-hero{background-image:url('./assets/backgrounds/fondo-platos-desktop.avif')}
 .story{background-image:url('./assets/backgrounds/fondo-tradicion-desktop.avif')}
 .home-banner,.menu-banner{background-image:url('./assets/backgrounds/fondo-antojo-desktop.avif')}
 .site-header{background-position:center 14%}.benefits{background-position:center 49%}.site-footer{background-position:center 87%}
 .card-caption h2,.card-caption h3,.home-card .card-caption h3{font-size:26px}
 .card-caption p{font-size:16px}
}
/* Compact shared header: the same logo as the footer and two direct links. */
.header-inner{gap:16px;flex-wrap:nowrap;min-height:80px;padding-inline:5%}
.header-actions{display:flex;margin-left:auto;gap:16px;flex:none;font-size:13px}
.header-actions>a:first-child{display:inline-flex;align-items:center;min-height:44px}
.header-actions .header-cta{display:inline-flex;color:var(--deep);font-weight:800;font-family:'DM Sans',Arial,sans-serif;padding:10px 19px;min-height:44px;letter-spacing:.025em}
.header-inner .brand{width:clamp(132px,35vw,225px);min-width:0;flex-shrink:1}
.header-actions a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
/* Scroll effects are handled individually by the Web Animations API. */
/* hero-reveal enabled */
@media(min-width:769px){.header-actions{gap:24px;font-size:14px}.header-inner{min-height:90px}.header-actions .header-cta{padding-inline:25px}}
/* Portrait art direction: contain the entire mobile photograph, never crop food. */
.hero:has(.hero-media){min-height:max(690px,165vw);padding-bottom:0;display:block;background-color:#075733}
.hero-media{position:absolute;inset:0;display:block;z-index:-1;pointer-events:none;animation:hero-drift 9s ease-in-out infinite alternate}
.hero-media .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;mask-image:none;-webkit-mask-image:none}
.hero:has(.hero-media):after{background:linear-gradient(180deg,#07573333,transparent 44%);z-index:0}
.hero:has(.hero-media) .hero-copy{padding:34px 6% 24px}
.hero:has(.hero-media) h1{font-size:clamp(34px,8vw,48px);margin-block:12px}
.hero:has(.hero-media) .hero-description{margin:14px 0 20px}
.hero:has(.hero-media) .flag-rule{margin-top:20px}
.category-hero-photo{animation:hero-drift 9s ease-in-out infinite alternate}
@keyframes hero-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-5px,0)}}
@media(min-width:769px){
 .hero:has(.hero-media){display:flex;align-items:center;min-height:490px}
 .hero-media{left:auto;width:65%;animation-duration:11s}
 .hero-media .hero-image{object-fit:cover;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 24%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%)}
 .hero:has(.hero-media) .hero-copy{padding:58px 6%}
 .hero:has(.hero-media) h1{font-size:clamp(42px,4.8vw,64px)}
}
@media(min-width:1280px){.hero:has(.hero-media) .hero-copy{padding-inline:max(6%,calc((100vw - 1120px)/2))}}
@media(prefers-reduced-motion:reduce){.hero-media,.category-hero-photo{animation:none!important;transform:none!important}}
/* Mobile hero uses the real photograph, fully visible in normal document flow. */
@media(max-width:768px){
 .hero:has(.hero-media){display:flex;flex-direction:column;min-height:0;padding-bottom:0}
 .hero:has(.hero-media) .hero-copy{order:0;width:100%;padding:34px 6% 28px}
 .hero-media{position:relative;inset:auto;order:1;width:100%;z-index:0;flex:none;margin-top:0;padding-top:12px}
 .hero-media .hero-image{position:relative;inset:auto;width:100%;height:auto;object-fit:contain;object-position:center;mask-image:none;-webkit-mask-image:none}
 .hero:has(.hero-media):after{display:none}
}
/* The transparent photographic cutout sits directly on the shared green backdrop. */
.hero-media .hero-image{object-fit:contain;object-position:center;mask-image:none;-webkit-mask-image:none;filter:drop-shadow(0 14px 15px #001e2438)}
@media(max-width:768px){
 .hero:has(.hero-media){min-height:610px;padding-bottom:24px;background-image:url('./assets/backgrounds/fondo-hero-mobile.avif');background-position:center;background-size:cover}
 .hero:has(.hero-media) .hero-copy{padding-bottom:12px}
 .hero-media{width:100%;margin-top:auto;padding:12px 4% 8px}
 .hero-media .hero-image{width:100%;height:auto}
}
@media(min-width:769px){
 .hero-media{width:62%;inset:18px 1% 10px auto}
 .hero-media .hero-image{object-fit:contain;object-position:center bottom;padding:20px}
}
/* Float the whole photographic board independently of the scroll entry animation. */
.hero-media{animation:hero-board-float 6s ease-in-out infinite;transform-origin:center}
.hero-media .hero-image{filter:drop-shadow(0 19px 13px #001b214a)}
@keyframes hero-board-float{0%,100%{transform:translate3d(0,0,0) rotate(-.2deg)}50%{transform:translate3d(0,-12px,0) rotate(.2deg)}}
@media(max-width:768px){.hero-media{padding:20px 4% 18px}.hero:has(.hero-media){padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.hero-media{animation:none!important;transform:none!important}}
/* Let the serving board cross the hero boundary into the following section. */
.hero:has(.hero-media){--hero-overlap:42px;overflow:visible;z-index:2;padding-bottom:0}
.hero-media{z-index:2}
.hero:has(.hero-media)+section{position:relative;z-index:1;padding-top:calc(var(--next-overlap,42px) + 24px)}
@media(max-width:768px){
 .hero:has(.hero-media){min-height:0}
 .hero:has(.hero-media) .hero-copy{padding-bottom:8px}
 .hero-media{position:relative;inset:auto;bottom:calc(-1 * var(--hero-overlap));margin-top:0;padding:12px 4% 0}
 .hero-media .hero-image{padding:0}
 .hero:has(.hero-media)+.benefits{padding-top:70px;padding-bottom:26px}
 .hero:has(.hero-media)+.menu-content{padding-top:70px}
}
@media(min-width:769px){
 .hero:has(.hero-media){--hero-overlap:68px;min-height:460px}
 .hero-media{position:absolute;inset:auto 1% calc(-1 * var(--hero-overlap)) auto;width:61%;height:auto;padding:0}
 .hero-media .hero-image{position:relative;inset:auto;width:100%;height:auto;padding:0;object-fit:contain}
 .hero:has(.hero-media)+.benefits{padding-top:94px;padding-bottom:28px}
 .hero:has(.hero-media)+.menu-content{padding-top:96px}
}
/* Original drinks and cachapa, composed as a separate editorial banner. */
.menu-pairing{background:#075733 url('./assets/backgrounds/fondo-hero-mobile.avif') center/cover no-repeat;color:#fffdf5;overflow:hidden;isolation:isolate;border-block:1px solid #ffffff20}
.pairing-inner{max-width:1280px;margin:auto;display:grid;gap:12px;padding:36px 6% 12px;align-items:center}
.pairing-copy{position:relative;z-index:1}.pairing-copy .eyebrow{font-size:10px;letter-spacing:.13em;color:#f1f6d9}
.pairing-copy h2{font-size:clamp(30px,6vw,46px);line-height:1.08;margin:14px 0 16px}.pairing-copy h2 em{color:var(--yellow)}
.pairing-copy>p:not(.eyebrow){max-width:32ch;font-size:14px;line-height:1.7;color:#f3f7eb}
.pairing-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}.pairing-links a{display:inline-flex;gap:8px;align-items:center;min-height:44px;font-size:13px;font-weight:600;border-bottom:1px solid #ffdf0080}.pairing-links .icon{width:17px;height:17px}
.pairing-art{min-width:0;position:relative}.pairing-photo{width:100%;height:auto;max-height:390px;object-fit:contain;filter:drop-shadow(0 12px 15px #002c2533)}
@media(min-width:769px){.menu-pairing{background-image:url('./assets/backgrounds/fondo-hero-desktop.avif')}.pairing-inner{grid-template-columns:.8fr 1.2fr;gap:32px;padding:30px 6%}.pairing-photo{max-height:350px}.pairing-copy h2{font-size:clamp(34px,3.7vw,48px)}}
@media(hover:hover){.pairing-links a:hover{color:var(--yellow)}}

/* ==========================================================================
   CUSTOM ENHANCEMENTS: Red Animated Menu Button, Responsive Overlap Fix,
   Restaurant Facade Photo, Google Reviews Section, Google Maps Embed
   ========================================================================== */

/* 1. Header CTA "MENÚ" Button: Red & Animated Pulse */
.header-actions .header-cta {
  background: #ce1126 !important;
  color: #ffffff !important;
  border: 2px solid #ce1126 !important;
  box-shadow: 0 4px 14px rgba(206, 17, 38, 0.45) !important;
  font-weight: 800 !important;
  position: relative !important;
  overflow: visible !important;
  animation: pulse-red-cta 2.2s infinite ease-in-out !important;
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s !important;
}

.header-actions .header-cta:hover {
  background: #ad091b !important;
  border-color: #ad091b !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(206, 17, 38, 0.6) !important;
}

@keyframes pulse-red-cta {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(206, 17, 38, 0.55), 0 4px 14px rgba(206, 17, 38, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(206, 17, 38, 0), 0 6px 18px rgba(206, 17, 38, 0.6);
    transform: scale(1.04);
  }
}

/* 2. Responsive Hero Overlap: Shorten vertical space on mobile */
@media (max-width: 768px) {
  .hero:has(.hero-media) {
    min-height: auto !important;
    padding-bottom: 0px !important;
  }
  .hero:has(.hero-media) .hero-copy {
    padding-top: 24px !important;
    padding-bottom: 4px !important;
  }
  .hero-media {
    margin-top: 0 !important;
    padding: 4px 3% 0 !important;
    bottom: -15px !important;
  }
  .hero-media .hero-image {
    max-height: 240px !important;
    width: 100% !important;
    object-fit: contain !important;
  }
  .hero:has(.hero-media) + .benefits {
    padding-top: 36px !important;
    padding-bottom: 20px !important;
  }
  .hero:has(.hero-media) + .menu-content {
    padding-top: 40px !important;
  }
}

/* 3. Restaurant Store Facade Section (above "Tu próximo antojo empieza aquí") */
.restaurant-facade {
  background: #063c25;
  padding: 0;
  overflow: hidden;
  position: relative;
  border-top: 2px solid #004d2e;
  border-bottom: 2px solid #004d2e;
}
.restaurant-facade .facade-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease);
}
.restaurant-facade:hover .facade-img {
  transform: scale(1.02);
}

/* 4. Google Reviews Section (placed right above the map) */
.reviews-section {
  background: #f7faf5;
  padding: 56px 5% 44px;
  position: relative;
  border-top: 1px solid #07573315;
}
.reviews-container {
  max-width: 1200px;
  margin: 0 auto;
}
.reviews-header {
  text-align: center;
  margin-bottom: 36px;
}
.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid #07573315;
  margin-bottom: 14px;
}
.reviews-badge .stars {
  color: #f59e0b;
  font-size: 17px;
  letter-spacing: 2px;
}
.reviews-badge .score {
  font-weight: 800;
  font-size: 14px;
  color: var(--deep);
}
.reviews-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 42px);
  color: var(--deep);
  margin-bottom: 10px;
}
.reviews-subtitle {
  font-size: 15px;
  color: #4a6352;
  max-width: 600px;
  margin: 0 auto;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  margin-bottom: 32px;
}
.review-card {
  background: #ffffff;
  border: 1px solid #07573318;
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 4px 18px rgba(7, 61, 40, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 26px rgba(7, 61, 40, 0.1);
}
.review-stars {
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #2b4233;
  margin-bottom: 18px;
  font-style: italic;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #07573310;
}
.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #075733;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.author-info strong {
  display: block;
  font-size: 14px;
  color: var(--deep);
}
.author-info span {
  font-size: 12px;
  color: #6a7c6f;
}
.reviews-cta {
  text-align: center;
}
.button-review {
  background: var(--forest) !important;
  color: #ffffff !important;
  border-radius: 24px !important;
  padding: 12px 26px !important;
  font-size: 14px !important;
}
.button-review:hover {
  background: var(--deep) !important;
  color: var(--yellow) !important;
}

/* 5. Google Maps Embed Section */
.map-section {
  background: #ffffff;
  padding: 50px 5% 56px;
  border-top: 1px solid #07573315;
}
.map-container {
  max-width: 1200px;
  margin: 0 auto;
}
.map-header {
  text-align: center;
  margin-bottom: 24px;
}
.map-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--deep);
  margin-bottom: 8px;
}
.map-address {
  font-size: 15px;
  color: #435b4b;
  margin-bottom: 16px;
}
.map-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--forest);
  border: 1px solid var(--forest);
  padding: 8px 18px;
  border-radius: 20px;
  transition: all 0.25s ease;
}
.map-directions-btn:hover {
  background: var(--forest);
  color: #ffffff;
}
.map-embed-wrapper {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid #07573320;
}
.map-embed-wrapper iframe {
  display: block;
}

/* ==========================================================================
   ADVANCED SCROLL MOTION ENGINE: DIRECTION-AWARE TITLES & FAST ASSEMBLE TEXT
   - All Titles (H1, H2, H3): Smooth direction-aware slide entrance
     * Scrolling down: Slides up from bottom (translateY(55px) -> 0)
     * Scrolling up: Slides down from top (translateY(-55px) -> 0)
   - Secondary Texts (p, eyebrow, description, price, review): Rapid assembly
   - Cards & Images: Smooth scale & fade-in entrance
   ========================================================================== */

/* 1. KEYFRAMES FOR TITLES */
@keyframes titleSlideFromBottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 55px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes titleSlideFromTop {
  0% {
    opacity: 0;
    transform: translate3d(0, -55px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 2. KEYFRAMES FOR SECONDARY TEXTS RAPID ASSEMBLY */
@keyframes textFastAssemble {
  0% {
    opacity: 0;
    transform: scale(0.9) translate3d(0, 20px, 0);
    filter: blur(5px);
    letter-spacing: 0.12em;
  }
  60% {
    opacity: 0.95;
    transform: scale(1.02) translate3d(0, -2px, 0);
    filter: blur(0.5px);
    letter-spacing: -0.01em;
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(0px);
    letter-spacing: normal;
  }
}

/* 3. KEYFRAMES FOR CARDS & IMAGES */
@keyframes elementEntrance {
  0% {
    opacity: 0;
    transform: scale(0.94) translate3d(0, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

/* MOTION CLASSES - High specificity & forced override */
.motion-title {
  opacity: 0;
  will-change: transform, opacity;
}

.motion-title.slide-up {
  animation: titleSlideFromBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.motion-title.slide-down {
  animation: titleSlideFromTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.motion-text {
  opacity: 0;
  will-change: transform, opacity, filter, letter-spacing;
}

.motion-text.assembled {
  animation: textFastAssemble 0.52s cubic-bezier(0.2, 0.9, 0.3, 1.2) both !important;
}

.motion-element {
  opacity: 0;
  will-change: transform, opacity;
}

.motion-element.visible {
  animation: elementEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Fallback: if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .motion-title, .motion-text, .motion-element {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    letter-spacing: normal !important;
  }
}

/* ==========================================================================
   LANGUAGE SWITCHER (EN / ES) - HEADER OPTIONS WITH FLAGS
   ========================================================================== */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: #ede9dc;
  padding: 3px 4px;
  border-radius: 9999px;
  border: 1px solid rgba(7, 87, 51, 0.22);
  gap: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 4px 9px;
  cursor: pointer;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #073d28;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
}

.lang-btn .lang-flag {
  width: 20px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.lang-btn .lang-code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lang-btn:hover:not(.active) {
  background: rgba(7, 87, 51, 0.12);
  color: #075733;
}

.lang-btn.active {
  background: #075733 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(7, 87, 51, 0.35);
}

@media (max-width: 640px) {
  .lang-switcher {
    padding: 2px 3px;
    gap: 2px;
  }
  .lang-btn {
    padding: 3px 6px;
    font-size: 11px;
    gap: 4px;
  }
  .lang-btn .lang-flag {
    width: 17px;
    height: 11px;
  }
  .lang-btn .lang-code {
    font-size: 10px;
  }
  .header-actions {
    gap: 8px !important;
  }
}

/* ==========================================================================
   ORIGINAL LARGE FLOATING HERO - VISUALLY STUNNING & OVERLAP-PROOF
   - Restores the grand, prominent, large floating arepa board
   - Preserves authentic hero-board-float animation with rich drop-shadow
   - Fixes text collision by giving .hero-copy a strict safe-zone on the left
   - Fully optimized for Safari (WebKit 3D layer separation) & all responsives
   ========================================================================== */

/* Hero Base */
.hero,
.hero.home-hero,
.hero.menu-hero,
.hero.original-hero,
.hero:has(.hero-media) {
  position: relative !important;
  width: 100% !important;
  background-color: #075733 !important;
  overflow: visible !important;
  z-index: 2 !important;
  display: block !important;
}

/* ==========================================================================
   DESKTOP & TABLETS (>= 769px) - LARGE FLOATING BOARD WITH PERFECT CLEARANCE
   ========================================================================== */
@media (min-width: 769px) {
  .hero,
  .hero.home-hero,
  .hero.menu-hero,
  .hero.original-hero,
  .hero:has(.hero-media) {
    min-height: 520px !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* Text Safe-Zone: Anchored on the left, strictly bounded so it never collides with the board */
  .hero-copy,
  .hero:has(.hero-media) .hero-copy {
    position: relative !important;
    z-index: 10 !important;
    width: 48% !important;
    max-width: 540px !important;
    padding: 60px 0 60px max(5%, calc((100vw - 1280px) / 2)) !important;
    margin: 0 !important;
    pointer-events: auto !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translate3d(0, 0, 10px) !important;
    transform: translate3d(0, 0, 10px) !important;
  }

  .hero h1,
  .hero:has(.hero-media) h1 {
    font-size: clamp(36px, 4.3vw, 62px) !important;
    line-height: 1.08 !important;
    margin-block: 14px !important;
    max-width: 15ch !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .hero-description,
  .hero:has(.hero-media) .hero-description {
    max-width: 34ch !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 14px 0 24px !important;
  }

  /* Grand Floating Photographic Board: Large, Prominent, Gorgeous Scale */
  .hero-media,
  .hero:has(.hero-media) .hero-media {
    position: absolute !important;
    inset: auto !important;
    right: max(1%, calc((100vw - 1340px) / 2)) !important;
    bottom: -60px !important;
    width: 58% !important;
    max-width: 820px !important;
    height: auto !important;
    z-index: 2 !important;
    display: block !important;
    pointer-events: none !important;
    animation: hero-board-float 6s ease-in-out infinite !important;
    transform-origin: center center !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
  }

  .hero-media .hero-image,
  .hero:has(.hero-media) .hero-media .hero-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 540px !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.48)) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    display: block !important;
  }

  /* Seamless transition to following section */
  .hero + .benefits,
  .hero:has(.hero-media) + .benefits {
    padding-top: 85px !important;
    padding-bottom: 28px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .hero + .menu-content,
  .hero:has(.hero-media) + .menu-content {
    padding-top: 85px !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Medium Tablets & Smaller Laptops (769px to 1024px) - Ensure Safe Clearance */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero,
  .hero.home-hero,
  .hero.menu-hero,
  .hero.original-hero,
  .hero:has(.hero-media) {
    min-height: 480px !important;
  }

  .hero-copy,
  .hero:has(.hero-media) .hero-copy {
    width: 50% !important;
    max-width: 440px !important;
    padding-left: 5% !important;
  }

  .hero h1,
  .hero:has(.hero-media) h1 {
    font-size: clamp(32px, 3.8vw, 44px) !important;
  }

  .hero-media,
  .hero:has(.hero-media) .hero-media {
    width: 52% !important;
    max-width: 520px !important;
    right: 0 !important;
    bottom: -45px !important;
  }

  .hero-media .hero-image,
  .hero:has(.hero-media) .hero-media .hero-image {
    max-height: 420px !important;
  }
}

/* ==========================================================================
   MOBILE DEVICES (<= 768px) - STACKED, LARGE, APPETIZING & CLEAN
   ========================================================================== */
@media (max-width: 768px) {
  .hero,
  .hero.home-hero,
  .hero.menu-hero,
  .hero.original-hero,
  .hero:has(.hero-media) {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    padding: 24px 5% 0 !important;
    background-image: url('./assets/backgrounds/fondo-hero-mobile.avif') !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .hero-copy,
  .hero:has(.hero-media) .hero-copy {
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 16px !important;
    position: relative !important;
    z-index: 10 !important;
    text-align: left !important;
  }

  .hero h1,
  .hero:has(.hero-media) h1 {
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1.1 !important;
    margin-block: 10px !important;
  }

  /* Large appetizing board on mobile */
  .hero-media,
  .hero:has(.hero-media) .hero-media {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 8px auto -20px !important;
    padding: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    animation: hero-board-float 6s ease-in-out infinite !important;
  }

  .hero-media .hero-image,
  .hero:has(.hero-media) .hero-media .hero-image {
    width: 100% !important;
    max-height: 300px !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.4)) !important;
  }

  .hero + .benefits,
  .hero:has(.hero-media) + .benefits {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }

  .hero + .menu-content,
  .hero:has(.hero-media) + .menu-content {
    padding-top: 40px !important;
  }
}

/* Floating board animation */
@keyframes hero-board-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-0.3deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(0.3deg);
  }
}

/* Safari WebKit 3D layer stabilization */
@supports (-webkit-hyphens:none) {
  .hero-media {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .hero-copy {
    -webkit-transform: translate3d(0, 0, 10px);
    transform: translate3d(0, 0, 10px);
  }
}

/* ==========================================================================
   DISH PRESENTATION: SEAMLESS 1200x1024 RATIO & ZERO-CLIPPING GUARANTEE
   - All 16 dishes (17 PNG transparent items + 8 Instagram dishes) are seamlessly
     calibrated to 1200x1024 with identical Venezuelan green studio lighting.
   - aspect-ratio: 1200 / 1024 fills the card edge-to-edge with no cut-off
     plates, no vertical strips, and no black/dark bars.
   ========================================================================== */

.food-card {
  background: #fffdf7 !important;
  border: 1px solid rgba(7, 87, 51, 0.12) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(7, 61, 40, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.food-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 32px rgba(7, 61, 40, 0.16) !important;
}

.card-photo {
  aspect-ratio: 1200 / 1024 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  background: radial-gradient(circle at 50% 48%, #2ba650 0%, #209544 42%, #198a3e 72%, #0e632c 100%) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.card-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.food-card:hover .card-photo img {
  transform: scale(1.04) !important;
}

/* Category Hero Dish Presentation */
.category-hero {
  background: #075733 !important;
  color: white !important;
  position: relative !important;
}

.category-hero-photo {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: radial-gradient(circle at 50% 48%, #2ba650 0%, #209544 42%, #198a3e 72%, #0e632c 100%) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34) !important;
  overflow: hidden !important;
  min-height: 280px !important;
  max-height: 440px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.category-hero-photo img {
  max-width: 100% !important;
  max-height: 400px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.42)) !important;
  transition: transform 0.4s ease !important;
}

/* Facade section presentation */
.restaurant-facade {
  background: #063c25 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  border-top: 2px solid #004d2e !important;
  border-bottom: 2px solid #004d2e !important;
}

.restaurant-facade .facade-img {
  width: 100% !important;
  max-height: 520px !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center 48% !important;
  display: block !important;
  transition: transform 0.6s var(--ease) !important;
}

.restaurant-facade:hover .facade-img {
  transform: scale(1.02) !important;
}

/* Ensure clean, unclipped price list layout */
.price-item {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 0 !important;
  border-bottom: 1px dashed rgba(7, 87, 51, 0.15) !important;
}

.price-item-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.price-item h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #073d28 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.price-item p {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #476553 !important;
  margin: 4px 0 0 !important;
}

.price-dots {
  flex: 1 1 auto !important;
  height: 1px !important;
  border-bottom: 2px dotted rgba(7, 87, 51, 0.25) !important;
  margin: 0 8px !important;
  min-width: 24px !important;
  align-self: flex-end !important;
  margin-bottom: 4px !important;
}

.item-price {
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #075733 !important;
  white-space: nowrap !important;
  flex: none !important;
}

/* Search results */
.dish-result {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: white !important;
  border: 1px solid rgba(7, 87, 51, 0.14) !important;
  border-radius: 12px !important;
}

.dish-result-thumb {
  width: 48px !important;
  height: 40px !important;
  object-fit: contain !important;
  flex: none !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.14)) !important;
}

/* ==========================================================================
   MENU BANNER: EXACT 1FR 1FR GRID & TEXT SHIFTED MUCH MORE TO THE RIGHT
   - Collage returned to its exact original 50% place (grid 1fr 1fr, height: 360px)
   - Text "Siempre hay espacio para otro antojo." shifted much more to the right,
     sitting directly in the open green space right before the collage.
   ========================================================================== */

@media (min-width: 769px) {
  .menu-banner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    background: #06472e url('./assets/backgrounds/fondo-antojo-desktop.avif') left center / cover no-repeat !important;
    min-height: 360px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .menu-banner-copy {
    justify-self: end !important;
    margin-left: auto !important;
    width: 100% !important;
    max-width: 380px !important;
    padding: 40px 32px 40px clamp(100px, 12vw, 200px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
  }

  .menu-banner-copy h2 {
    font-size: clamp(26px, 2.8vw, 38px) !important;
    line-height: 1.18 !important;
    max-width: 13ch !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    margin: 0 !important;
  }

  .menu-banner-copy em {
    color: var(--yellow) !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  }

  .menu-banner-photo {
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    box-shadow: none !important;
  }
}

@media (min-width: 1200px) {
  .menu-banner-copy {
    max-width: 390px !important;
    padding-right: 44px !important;
  }
}

@media (min-width: 1440px) {
  .menu-banner-copy {
    max-width: 410px !important;
    padding-right: 52px !important;
  }
}