/* ===== La Flor Mercado v2 =====
   Layers:  #bg-layer (z 0, fixed, swappable, parallax)  ->  .bg-shade (z 1)
            ->  #fg (z 2): fixed glass chrome (header + sidebar/dock) + scrolling .content
   Every foreground size below is set here. No foreground box takes its size from an image file.
   No pure black anywhere: darkest colour is deep purple (--deep). */
:root{
  --pink:#ff3fa4; --cyan:#3fd8ff; --deep:#1c0729; --deep2:#2a0b3d; --ink:#fff; --muted:#f3e3fb;
  --glass-bg:linear-gradient(135deg,rgba(130,45,185,.42),rgba(235,60,160,.28));
  --glass-line:rgba(255,255,255,.30); --glass-blur:blur(18px) saturate(165%);
  --soft-bg:rgba(74,22,108,.40); --soft-line:rgba(255,255,255,.22);
  --edge:12px; --header-h:76px; --side-w:92px; --gap:22px; --max:1120px;
  --top-space:calc(var(--edge) + var(--header-h) + var(--gap));
  --left-space:calc(var(--edge) + var(--side-w) + var(--gap));
  --bottom-space:var(--gap);
  --font:"Montserrat","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{color:#fff;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--top-space);background:var(--deep)}
html,body{margin:0;min-height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--deep);line-height:1.45;font-size:16px}
a{color:inherit}
img{display:block}
.ico{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sep{opacity:.75}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- LAYER 0: background (far back, parallax) ---------- */
#bg-layer{position:fixed;left:0;right:0;top:0;height:126vh;z-index:0;overflow:hidden;pointer-events:none;contain:strict;
  background:linear-gradient(160deg,#5b1a7a,#c2367f 55%,#2a0b3d);transform-origin:50% 0;will-change:transform;transform:scale(1.04)}
#bg-layer .bg-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block}
#bg-layer video.bg-media{z-index:1}
#bg-layer.no-parallax{transform:none;will-change:auto;height:100vh}
.bg-shade{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,8,62,.22) 0%,rgba(40,8,62,.08) 45%,rgba(40,8,62,.38) 100%)}

/* ---------- LAYER 2 ---------- */
#fg{position:relative;z-index:2;min-height:100vh}
.skip{position:fixed;left:-9999px;top:0;background:#fff;color:var(--deep);padding:8px 12px;z-index:50;border-radius:8px}
.skip:focus{left:8px;top:8px}

/* glass */
.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);box-shadow:0 10px 34px rgba(36,6,56,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.glass-soft{background:var(--soft-bg);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--soft-line)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:rgba(88,28,120,.92)} .glass-soft{background:rgba(60,18,88,.9)} }

/* fixed header (locked) */
.site-header{position:fixed;z-index:20;top:var(--edge);left:var(--edge);right:var(--edge);height:var(--header-h);border-radius:20px}
.site-header .inner{height:100%;padding:0 14px 0 18px;display:flex;align-items:center;gap:14px}
.logo{display:block;width:196px;height:64px;flex:0 0 auto}
.logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.top-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{font-weight:700;font-size:13.5px;letter-spacing:.02em;text-decoration:none;padding:10px 12px;border-radius:10px;white-space:nowrap}
.nav-link .en{font-weight:600;opacity:.85}
.nav-link:hover{background:rgba(255,255,255,.14)}
.socials{display:flex;gap:6px;align-items:center;margin:0 6px}
.socials a{display:block;width:34px;height:34px;flex:0 0 34px;border-radius:9px;overflow:hidden}
.socials img{width:34px;height:34px}
.cta{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px;border-radius:999px;text-decoration:none;font-weight:800;font-size:15px;white-space:nowrap;
  background:linear-gradient(180deg,#ff6cbd,#e0158a);color:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 22px rgba(255,63,164,.55);flex:0 0 auto}
.cta:hover{filter:brightness(1.1)}
.cta:focus-visible,.side-btn:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* fixed thin sidebar (locked) */
.sidebar{position:fixed;z-index:19;left:var(--edge);top:calc(var(--edge) + var(--header-h) + var(--gap));width:var(--side-w);
  border-radius:20px;padding:10px 8px;display:flex;flex-direction:column;gap:6px}
.side-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:74px;border-radius:14px;text-decoration:none;
  font-size:11.5px;font-weight:700;line-height:1.15;text-align:center;color:#fff}
.side-btn .ico{width:24px;height:24px;flex-basis:24px}
.side-btn:hover{background:rgba(255,255,255,.16)}
.side-order{background:linear-gradient(180deg,#ff6cbd,#e0158a);box-shadow:0 0 16px rgba(255,63,164,.5)}
.side-order:hover{background:linear-gradient(180deg,#ff80c6,#ea2a96)}

/* scrolling interior */
.content{padding:var(--top-space) var(--gap) var(--gap) var(--left-space)}
.main{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:var(--gap)}
.card{border-radius:20px;padding:22px}
.card h2{margin:0 0 14px;font-size:22px;font-weight:900;letter-spacing:.03em}
.card h2 .en{font-weight:700;opacity:.8}
.row{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--soft-line);
  background:rgba(255,255,255,.12);font-size:14px;font-weight:600;text-decoration:none}
.chip .ico{width:18px;height:18px;flex-basis:18px}
.chip:hover{background:rgba(255,255,255,.22)}

/* hero: fixed 16:9 frame, one image (the two stores, plane banner, helicopter); optional headline overlay is a separate switch.
   Phones get assets/hero-stores-v21-phone-crop-1080.* (a tighter 16:9 crop of the desktop art: full CARNICERIA, banner, both BBQ signs, plane, helicopter). */
.hero{position:relative;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--deep2);border:1px solid var(--glass-line);box-shadow:0 14px 40px rgba(36,6,56,.4)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:none}
.hero-img.hero-stores{display:block;object-position:50% 50%}
.hero-headline{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:radial-gradient(ellipse at center,rgba(40,8,62,.55),rgba(40,8,62,.15) 70%)}
html[data-headline="on"] .hero-headline{display:flex}
html[data-headline="on"] .hero-h1-fallback{display:none}
.hero-headline h1{margin:0;font-size:clamp(26px,4.4vw,58px);line-height:1.05;font-weight:900;text-shadow:0 0 12px var(--pink),0 0 30px rgba(255,63,164,.6)}
.hero-headline p{margin:10px 0 0;font-size:clamp(13px,1.5vw,19px);text-shadow:0 1px 8px var(--deep)}
.est{display:block;margin:0 0 8px;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 10px rgba(63,216,255,.7)}

/* order panel (4 buttons) */
.order h2{text-align:center}
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.order-col{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:rgba(40,8,62,.30);border:1px solid var(--soft-line)}
.order-col h3{margin:0 0 2px;text-align:center;font-size:18px;line-height:24px;height:24px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:6px 12px;border-radius:14px;text-decoration:none;text-align:center;
  font-size:18px;font-weight:800;color:#fff;border:2px solid transparent;transition:filter .15s,transform .15s}
.btn .en{font-weight:700;opacity:.9}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:translateY(1px)}
.btn-pink{background:linear-gradient(180deg,#ff6cbd,#d6127c);box-shadow:0 0 18px rgba(255,63,164,.45)}
.btn-cyan{background:linear-gradient(180deg,#5fe0ff,#0d8fc7);box-shadow:0 0 18px rgba(63,216,255,.45);color:#0b2140}
.btn-pink.btn-ghost{border-color:#ff7cc6;box-shadow:none;background:rgba(255,63,164,.16);color:#fff}
.btn-cyan.btn-ghost{border-color:#5fe0ff;box-shadow:none;background:rgba(63,216,255,.16);color:#fff}
.order-note{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}

/* locations / hours / maps / memory */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.loc{padding:16px;border-radius:16px;background:rgba(40,8,62,.28);border:1px solid var(--soft-line)}
.loc h3{margin:0 0 4px;font-size:19px}
.loc p{margin:0 0 12px;font-size:14.5px;color:var(--muted)}
.hours-note{margin:0 0 12px;color:var(--muted)}
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.map-box{display:flex;flex-direction:column;gap:8px;min-width:0}
.map-box h3{margin:0;font-size:16px;line-height:22px;height:22px}
.map-frame{position:relative;width:100%;height:320px;border-radius:14px;overflow:hidden;background:var(--deep2);border:1px solid var(--soft-line)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.memory-link{display:flex;align-items:center;gap:20px;text-decoration:none}
.memory-link img{width:120px;height:132px;object-fit:cover;border-radius:12px;flex:0 0 120px}
.mem-title{display:block;font-size:22px;font-weight:900}
.mem-sub{display:block;color:var(--muted)}

.site-footer{padding:0 var(--gap) var(--bottom-space) var(--left-space);font-size:13px;color:var(--muted)}
.site-footer .inner{max-width:var(--max);margin:0 auto;padding:16px 18px;border-radius:16px;background:rgba(40,8,62,.45);border:1px solid var(--soft-line);
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
.site-footer a{color:var(--muted)}
.foot-socials{margin:0}
.foot-socials a,.foot-socials img{width:30px;height:30px;flex-basis:30px}

/* dialogs (Order / Map / Call) */
.dlg{color:#fff;border-radius:22px;padding:26px 22px 22px;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto}
.dlg-wide{width:min(900px,calc(100vw - 24px))}
.dlg::backdrop{background:rgba(36,6,56,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg h2{margin:0 0 16px;font-size:22px;text-align:center}
.dlg-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-line);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dlg-close .ico{width:20px;height:20px}
.call-list{display:flex;flex-direction:column;gap:12px}

/* content pages */
.page .card{padding:28px}
.page h1{margin:0 0 14px;font-size:30px;line-height:1.2}
.page h1 .soon{color:var(--cyan)}
.page h2{font-size:18px;margin:24px 0 8px;letter-spacing:0}
.page p,.page li{color:var(--muted);font-size:15.5px}
.page .order{margin-top:18px}
.memorial-sub{margin:-4px 0 18px;color:var(--cyan)}
.memorial{display:flex;flex-direction:column;gap:16px;max-width:820px;margin:0 auto 20px}
.memorial img{width:100%;height:auto;border-radius:12px}
.qr{width:290px;height:290px;background:#fff;border-radius:8px;padding:0}

/* ---------- phone / tablet ---------- */
@media (max-width:899px){
  :root{--edge:8px;--header-h:62px;--gap:14px;--dock-h:66px;
    --left-space:var(--gap);--bottom-space:calc(var(--edge) + var(--dock-h) + var(--gap) + env(safe-area-inset-bottom,0px))}
  .site-header{border-radius:18px}
  .site-header .inner{padding:0 8px 0 12px;gap:8px}
  .logo{width:124px;height:46px}
  .top-nav{display:none}
  .cta{margin-left:auto;height:46px;padding:0 14px;gap:8px;font-size:12.5px;line-height:1.1}
  .cta .ico{width:20px;height:20px;flex-basis:20px}
  .cta-txt .es,.cta-txt .en{display:block}
  .cta-txt .sep{display:none}
  /* the thin sidebar becomes a fixed glass dock at the bottom */
  .sidebar{top:auto;bottom:calc(var(--edge) + env(safe-area-inset-bottom,0px));left:var(--edge);right:var(--edge);width:auto;height:var(--dock-h);
    flex-direction:row;padding:6px;gap:4px;border-radius:18px}
  .side-btn{flex:1 1 0;height:auto;font-size:10.5px;gap:3px;border-radius:12px}
  .side-btn .ico{width:22px;height:22px;flex-basis:22px}
  .card{padding:16px;border-radius:18px}
  .card h2{font-size:19px}
  .hero{border-radius:18px}
  .order-grid{gap:10px}
  .order-col{padding:10px;gap:10px}
  .order-col h3{font-size:15px}
  .btn{min-height:58px;font-size:15px;flex-direction:column;gap:0;line-height:1.15}
  .btn .sep{display:none}
  .btn .en{font-size:13px}
  .loc-grid,.map-grid{grid-template-columns:1fr}
  .map-frame{height:220px}
  .memory-link img{width:84px;height:96px;flex-basis:84px}
  .site-footer{padding-left:var(--gap)}
  .page .card{padding:20px}
  .page h1{font-size:24px}
}
@media (max-width:359px){ .order-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} .btn{transition:none}
  #bg-layer{transform:none !important;will-change:auto;height:100vh}
}

/* v2.1: click-to-load map, menus, locations, order page */
.map-load{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  border:0;color:#fff;font:inherit;font-weight:700;font-size:16px;background:linear-gradient(135deg,rgba(120,40,170,.55),rgba(220,60,150,.35))}
.map-load .ico{width:34px;height:34px;flex-basis:34px}
.map-load small{font-weight:500;font-size:12px;opacity:.8}
.map-load:hover{background:linear-gradient(135deg,rgba(140,50,190,.65),rgba(235,70,160,.45))}
.map-load:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.menu-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.menu-card{display:flex;align-items:center;gap:16px;padding:12px;border-radius:16px;background:rgba(40,8,62,.30);border:1px solid var(--soft-line);text-decoration:none}
.menu-card:hover{background:rgba(255,255,255,.12)}
.menu-card img{width:72px;height:128px;object-fit:cover;border-radius:10px;flex:0 0 72px}
.menu-card b{display:block;font-size:18px}
.menu-card small{display:block;color:var(--muted);margin-top:4px;font-size:14px}
.menu-store{color:var(--cyan) !important;margin-top:-6px}
.menu-body h2{margin:28px 0 8px;font-size:20px;color:#fff}
.menu-body h3{margin:14px 0 4px;font-size:16px}
.menu-note{font-style:italic}
.menu-items{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mi{padding:12px 14px;border-radius:14px;background:rgba(40,8,62,.30);border:1px solid var(--soft-line)}
.mi-top{display:flex;justify-content:space-between;gap:12px;font-weight:800}
.mi-num{color:var(--pink)}
.mi-price{color:var(--cyan);white-space:nowrap}
.mi-desc{margin:4px 0 0;font-size:14px !important}
.menu-extra{margin-top:10px;padding:10px 14px;border-radius:14px;background:rgba(40,8,62,.22);border:1px solid var(--soft-line)}
.menu-extra p{margin:2px 0 0}
.menu-disclaimer{font-size:13px !important;margin-top:18px}
.boards{display:flex;gap:12px;flex-wrap:wrap}
.board img{width:120px;height:213px;object-fit:cover;border-radius:10px;border:1px solid var(--soft-line)}
.order-soon{margin-top:16px}
.order-soon .btn{display:inline-flex;padding:0 26px}
.order-calls{margin-top:14px;justify-content:center}
.order-soon a:not(.btn){color:var(--cyan);font-weight:700}
.loc-page h2{margin:0 0 6px !important}
.loc-page h3{margin:14px 0 4px;font-size:16px}
.loc-order{margin-top:12px;background:none;border:0;padding:0}
@media (max-width:899px){
  .menu-cards,.menu-items{grid-template-columns:1fr}
  .side-btn{font-size:10px}
}
/* header must never push the Order button off-screen: nav gives way first (the sidebar has the same links) */
.top-nav{min-width:0;overflow:hidden}
.cta{flex-shrink:0}
@media (max-width:1439px){ .site-header .top-nav .socials{display:none} }
@media (max-width:1199px){ .nav-link.nav-hours{display:none} }
@media (max-width:1079px){ .top-nav{display:none} .cta{margin-left:auto} }
/* self-hosted SVG social icons */
.socials a.soc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid var(--glass-line);overflow:visible;transition:background .15s}
.socials a.soc svg{width:19px;height:19px}
.socials a.soc-instagram:hover{background:linear-gradient(135deg,#7a3cff,#ff3fa4 55%,#ffb347)}
.socials a.soc-facebook:hover{background:#1f6fe5}
.socials a.soc-tiktok:hover{background:linear-gradient(135deg,#25f4ee,#fe2c55)}
.socials a.soc:focus-visible{outline:3px solid #fff;outline-offset:2px}
.foot-socials a.soc{width:32px;height:32px;flex-basis:32px}
.foot-socials a.soc svg{width:17px;height:17px}
@media (max-width:899px){ .hero-img.hero-stores{object-position:50% 50%} } /* phone art is a 16:9 crop of the desktop art, same shape as the frame, so nothing is cut */

/* ===== v2.2: English by default + EN/ES pill; simplified chrome (logo + Order Online + sidebar) =====
   html[data-lang="es"] shows the bilingual "Español / English" text exactly as before; anything else
   (including no JavaScript) shows English only. The fixed layer keeps its locked positions. */
html:not([data-lang="es"]) .es,html:not([data-lang="es"]) .sep{display:none !important}
html:not([data-lang="es"]) .en{font-weight:inherit !important;opacity:1 !important}
html:not([data-lang="es"]) .btn .en{font-size:inherit}
.site-header .cta{margin-left:auto}                      /* header = logo + the one Order Online button */
.side-btn .lbl>span{display:block}                       /* sidebar labels: Spanish over English in ES mode */
.menu-body .sep{opacity:1}
/* the EN/ES pill (needs JS; hidden without it, the page is then English) */
.lang-toggle{display:none;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.14);color:#fff;font:inherit;font-weight:800;font-size:14px;letter-spacing:.08em;
  line-height:1;cursor:pointer;flex:0 0 auto;transition:background .15s}
html[data-lang] .lang-toggle{display:flex}
.lang-toggle:hover{background:rgba(255,255,255,.26)}
.lang-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lang-toggle .lt-ico{width:16px;height:16px;flex:0 0 16px;stroke-width:1.8}
.lang-toggle .lt-es{display:none}
html[data-lang="es"] .lang-toggle .lt-en{display:none}
html[data-lang="es"] .lang-toggle .lt-es{display:inline}
.sidebar .lang-toggle{margin:4px 4px 0;padding:0 8px}                 /* desktop: bottom of the thin sidebar stack */
/* map section on the simplified home */
.map-addr{margin:-4px 0 2px;font-size:13.5px;color:var(--muted)}
.map-hours{margin:14px 0 0;font-size:14px}
/* quiet one-line footer */
.site-footer .inner.foot-min{background:none;border:0;padding:6px 8px;justify-content:center;text-align:center;gap:4px 14px;font-size:12.5px;opacity:.9}
.foot-min a{text-decoration:none;border-bottom:1px solid rgba(243,227,251,.35)}
.foot-min a:hover{border-bottom-color:currentColor}
@media (max-width:899px){
  /* phone: a small tab sitting on the top-right of the bottom bar, so the 5 bar buttons keep their exact size and place */
  .sidebar .lang-toggle{position:absolute;right:0;bottom:calc(100% + 8px);margin:0;width:72px;padding:0 10px;
    background:linear-gradient(135deg,rgba(112,36,160,.94),rgba(206,52,146,.9));box-shadow:0 6px 18px rgba(36,6,56,.4)}
  :root{--bottom-space:calc(var(--edge) + var(--dock-h) + var(--gap) + 52px + env(safe-area-inset-bottom,0px))}
}