/* ═══════════════════════════════════════════════════════════
   CHIQUITITA CAFETERÍA — Shared Design System v3
   Aesthetic: Clean line-art · warm cream · single-stroke elegance
   ═══════════════════════════════════════════════════════════ */

@layer reset, tokens, base, components, utilities, animations;

/* ─── TOKENS ─────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Palette — derived from the logo: pure black lines on white, caramel accent */
    --ink:         #111010;
    --ink-soft:    #333;
    --caramel:     #C17A2F;
    --caramel-lt:  #D9974A;
    --gold:        #C9A84C;
    --cream:       #FDFAF4;
    --cream-warm:  #F8F2E6;
    --cream-deep:  #F1E9D8;
    --latte:       #EDE0C8;
    --beige:       #D9CCBA;
    --white:       #FFFFFF;
    --text:        #1A1208;
    --text-mid:    #4A3520;
    --text-soft:   #7A6248;

    /* Type scale */
    --t-xs:   clamp(.62rem,1.1vw,.72rem);
    --t-sm:   clamp(.75rem,1.4vw,.88rem);
    --t-base: clamp(.88rem,1.7vw,1rem);
    --t-md:   clamp(1rem,2vw,1.12rem);
    --t-lg:   clamp(1.1rem,2.3vw,1.3rem);
    --t-xl:   clamp(1.35rem,3vw,1.8rem);
    --t-2xl:  clamp(1.7rem,4.2vw,2.6rem);
    --t-3xl:  clamp(2.2rem,5.5vw,3.8rem);
    --t-hero: clamp(2.8rem,7vw,5.5rem);

    /* Spacing */
    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
    --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem;
    --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem;

    /* Radii */
    --r-sm:6px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:9999px;

    /* Shadows */
    --sh-xs: 0 1px 4px rgba(17,16,16,.06);
    --sh-sm: 0 3px 12px rgba(17,16,16,.08);
    --sh-md: 0 8px 28px rgba(17,16,16,.1);
    --sh-lg: 0 18px 52px rgba(17,16,16,.13);
    --sh-xl: 0 32px 80px rgba(17,16,16,.16);
    --sh-caramel: 0 8px 28px rgba(193,122,47,.36);

    /* Easing */
    --ease: cubic-bezier(.4,0,.2,1);
    --ease-out: cubic-bezier(.22,.68,0,1.2);
    --ease-in: cubic-bezier(.4,0,1,1);
    --dur-f:130ms; --dur-m:260ms; --dur-s:420ms;

    /* Layout */
    --nav-h: 70px;
    --tab-h: 62px;
    --max-w: 1140px;
    --safe-b: env(safe-area-inset-bottom,0px);
  }
}

/* ─── RESET ──────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden !important; width:100%; max-width:100%; }
  img, svg, video, iframe { display:block; max-width:100%; }
  button, input, select { font:inherit; border:none; background:none; cursor:pointer; max-width:100%; }
  a { color:inherit; text-decoration:none; }
  ul, ol { list-style:none; }
  h1,h2,h3,h4 { text-wrap:balance; }
  p { text-wrap:pretty; }
  [id] { scroll-margin-top:calc(var(--nav-h) + 8px); }
}

/* ─── BASE ───────────────────────────────────────────────── */
@layer base {
  html { font-size:100%; }
  body {
    font-family:'Outfit',system-ui,sans-serif;
    background:var(--cream);
    color:var(--text);
    overflow-x:hidden !important;
    width:100%;
    max-width:100%;
    position:relative;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  /* Skip link */
  .skip { position:absolute;top:-200%;left:var(--s4);padding:var(--s2) var(--s4);
    background:var(--caramel);color:#fff;border-radius:0 0 var(--r-sm) var(--r-sm);
    font-weight:700;font-size:var(--t-sm);z-index:9999;transition:top var(--dur-f); }
  .skip:focus { top:0; }

  :focus-visible { outline:2.5px solid var(--caramel); outline-offset:3px; border-radius:var(--r-sm); }
  ::selection { background:rgba(193,122,47,.18); color:var(--ink); }
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
@layer base {
  .eyebrow {
    font-family:'Outfit',sans-serif;
    font-size:var(--t-xs); font-weight:700;
    letter-spacing:.22em; text-transform:uppercase;
    color:var(--caramel);
  }
  .sec-title {
    font-family:'Playfair Display',serif;
    font-size:var(--t-2xl); font-weight:900;
    color:var(--ink); line-height:1.06;
    margin-block:var(--s2) var(--s4);
  }
  .sec-body {
    font-family:'Cormorant Garamond',serif;
    font-size:var(--t-lg); color:var(--text-mid);
    font-weight:300; line-height:1.8; max-width:54ch;
  }
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
@layer base {
  .wrap { width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:clamp(var(--s5),5vw,var(--s12)); box-sizing:border-box; }
  .sec { padding-block:clamp(var(--s16),8vw,var(--s24)); width:100%; max-width:100%; box-sizing:border-box; }
  .page { padding-top:var(--nav-h); padding-bottom:calc(var(--tab-h) + var(--safe-b)); width:100%; max-width:100%; box-sizing:border-box; }
  @media(min-width:768px){ .page { padding-bottom:0; } }
}

/* ─── COMPONENTS ─────────────────────────────────────────── */
@layer components {

  /* ══ NAV ══════════════════════════════════════════════════ */
  .nav {
    position:fixed; inset-block-start:0; inset-inline:0; z-index:900;
    width:100%; max-width:100vw; box-sizing:border-box;
    height:var(--nav-h);
    background:rgba(253,250,244,.95);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border-bottom:1px solid rgba(193,122,47,.12);
    box-shadow:var(--sh-xs);
    display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
    padding-inline:clamp(var(--s4),4vw,var(--s10));
    transition:box-shadow var(--dur-m) var(--ease);
  }
  .nav.scrolled { box-shadow:0 4px 28px rgba(17,16,16,.1); }

  /* Brand – uses the real logo PNG */
  .nav-brand { display:flex; align-items:center; gap:var(--s3); text-decoration:none; flex-shrink:0; }
  .nav-logo-img {
    height:46px; width:auto;
    filter:drop-shadow(0 1px 6px rgba(193,122,47,.18));
    transition:transform var(--dur-m) var(--ease-out);
    /* Show only the cup part via object-fit */
    object-fit:contain; object-position:left center;
    max-width:52px;
  }
  .nav-brand:hover .nav-logo-img { transform:rotate(-5deg) scale(1.07); }

  .nav-wordmark {
    display:flex; flex-direction:column; line-height:1;
  }
  .nav-name {
    font-family:'Outfit',sans-serif; font-size:1.18rem; font-weight:800;
    color:var(--ink); letter-spacing:-.01em;
    text-transform:uppercase;
  }
  .nav-sub {
    font-family:'Cormorant Garamond',serif; font-size:.72rem;
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--caramel); font-weight:400; margin-top:2px;
  }

  .nav-links { display:none; align-items:center; gap:var(--s1); margin-inline-start:auto; }
  .nav-a {
    font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-mid); padding:var(--s2) var(--s3); border-radius:var(--r-sm);
    transition:color var(--dur-f),background var(--dur-f); white-space:nowrap;
  }
  .nav-a:hover { color:var(--caramel); background:var(--cream-warm); }
  .nav-a.active { color:var(--caramel); }
  .nav-cta {
    display:inline-flex; align-items:center; gap:var(--s2);
    background:var(--ink); color:var(--cream) !important;
    padding:var(--s2) var(--s5) !important; border-radius:var(--r-full) !important;
    font-weight:700 !important; letter-spacing:.09em !important;
    box-shadow:var(--sh-sm);
    transition:background var(--dur-f),transform var(--dur-f) !important;
  }
  .nav-cta:hover { background:var(--caramel) !important; transform:translateY(-1px); }

  /* Hamburger */
  .burger {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    margin-inline-start:auto; padding:var(--s2); border-radius:var(--r-sm);
    width:40px; height:40px; touch-action:manipulation;
    transition:background var(--dur-f);
  }
  .burger:hover { background:var(--cream-warm); }
  .burger span { display:block; height:2px; width:22px; background:var(--ink); border-radius:2px;
    transform-origin:center; transition:transform var(--dur-m) var(--ease),opacity var(--dur-m); }
  .burger[aria-expanded=true] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .burger[aria-expanded=true] span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .burger[aria-expanded=true] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* Drawer */
  .drawer { position:fixed; inset:0; z-index:850; pointer-events:none; overflow:hidden; visibility:hidden; transition:visibility var(--dur-m); }
  .drawer-bg {
    position:absolute; inset:0; background:rgba(17,16,16,.4);
    opacity:0; transition:opacity var(--dur-m) var(--ease);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  }
  .drawer-panel {
    position:absolute; inset-block:0; inset-inline-start:0;
    width:min(300px,82vw); background:var(--white);
    transform:translateX(-100%);
    transition:transform var(--dur-s) var(--ease-out);
    display:flex; flex-direction:column; overflow-y:auto;
    padding-top:var(--nav-h); box-shadow:var(--sh-xl);
  }
  .drawer.open { pointer-events:all; visibility:visible; }
  .drawer.open .drawer-bg  { opacity:1; }
  .drawer.open .drawer-panel { transform:translateX(0); }

  .drawer-body { padding:var(--s5) var(--s5) calc(var(--s8) + var(--safe-b)); display:flex; flex-direction:column; gap:var(--s1); }
  .drawer-a {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--s4); border-radius:var(--r-md);
    font-size:var(--t-md); font-weight:600; color:var(--text-mid);
    transition:background var(--dur-f),color var(--dur-f); touch-action:manipulation;
  }
  .drawer-a:hover,.drawer-a.active { background:var(--cream-warm); color:var(--caramel); }
  .drawer-a svg { width:15px; opacity:.4; }
  .drawer-hr { height:1px; background:var(--latte); border:none; margin-block:var(--s3); }
  .drawer-cta {
    display:block; text-align:center; margin-top:var(--s3);
    background:var(--ink); color:var(--cream) !important;
    padding:var(--s4) var(--s6); border-radius:var(--r-full);
    font-size:var(--t-base); font-weight:700; letter-spacing:.07em;
    box-shadow:var(--sh-sm);
    transition:background var(--dur-f),transform var(--dur-f);
  }
  .drawer-cta:hover { background:var(--caramel); transform:translateY(-2px); }

  /* ══ BOTTOM TAB BAR ═══════════════════════════════════════ */
  .tabbar {
    display:flex; position:fixed; inset-block-end:0; inset-inline:0; z-index:800;
    height:var(--tab-h); padding-bottom:var(--safe-b);
    background:rgba(253,250,244,.97);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-top:1px solid rgba(193,122,47,.12);
    box-shadow:0 -3px 16px rgba(17,16,16,.07);
  }
  .tab {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:var(--text-soft); font-size:.56rem; font-weight:600;
    letter-spacing:.07em; text-transform:uppercase;
    transition:color var(--dur-f); touch-action:manipulation;
    padding-block:var(--s2); text-decoration:none;
  }
  .tab svg { width:21px; height:21px; }
  .tab.active,.tab:hover { color:var(--caramel); }

  /* ══ BUTTONS ══════════════════════════════════════════════ */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
    padding:var(--s3) var(--s8); border-radius:var(--r-full);
    font-family:'Outfit',sans-serif; font-size:var(--t-sm);
    font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    text-decoration:none; cursor:pointer; border:2px solid transparent;
    transition:all var(--dur-m) var(--ease-out); white-space:nowrap; touch-action:manipulation;
  }
  .btn-ink {
    background:var(--ink); color:var(--cream);
    box-shadow:var(--sh-sm);
  }
  .btn-ink:hover { background:var(--caramel); transform:translateY(-2px); box-shadow:var(--sh-caramel); }
  .btn-outline {
    background:transparent; color:var(--ink);
    border-color:rgba(17,16,16,.25);
  }
  .btn-outline:hover { border-color:var(--caramel); color:var(--caramel); transform:translateY(-2px); background:var(--white); }
  .btn-caramel {
    background:linear-gradient(135deg,var(--caramel),var(--caramel-lt)); color:#fff;
    box-shadow:var(--sh-caramel);
  }
  .btn-caramel:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(193,122,47,.48); }

  /* ══ BADGES ═══════════════════════════════════════════════ */
  .badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:var(--r-full);
    font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  }
  .badge-new  { background:rgba(193,122,47,.14); color:var(--caramel); border:1px solid rgba(193,122,47,.32); }
  .badge-pop  { background:rgba(201,168,76,.18); color:var(--text); border:1px solid rgba(201,168,76,.4); }
  .badge-veg  { background:rgba(56,132,46,.12); color:#2d6b26; border:1px solid rgba(56,132,46,.28); }

  /* ══ FOOTER ════════════════════════════════════════════════ */
  .footer { background:var(--ink); color:var(--cream); padding-block:var(--s16) var(--s8); }
  .footer-grid {
    display:grid; grid-template-columns:2fr repeat(3,1fr); gap:var(--s10);
    padding-bottom:var(--s10); border-bottom:1px solid rgba(193,122,47,.14); margin-bottom:var(--s8);
  }
  .footer-logo-img { height:50px; width:auto; filter:invert(1) brightness(1.5); opacity:.85; margin-bottom:var(--s4); }
  .footer-desc { font-family:'Cormorant Garamond',serif; font-size:var(--t-md); color:var(--latte); line-height:1.75; opacity:.7; font-weight:300; max-width:26ch; }
  .footer-col-h { font-size:var(--t-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s5); }
  .footer-links { display:flex; flex-direction:column; gap:var(--s3); }
  .footer-a { font-family:'Cormorant Garamond',serif; font-size:var(--t-md); color:var(--latte); opacity:.62; transition:opacity var(--dur-f),color var(--dur-f); font-weight:300; }
  .footer-a:hover { opacity:1; color:var(--gold); }
  .footer-bot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s4); }
  .footer-copy { font-size:var(--t-xs); color:var(--latte); opacity:.36; letter-spacing:.04em; }
  .footer-soc { display:flex; gap:var(--s3); }
  .soc-btn {
    width:36px; height:36px; border-radius:var(--r-full);
    background:rgba(193,122,47,.1); border:1px solid rgba(193,122,47,.22);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-size:var(--t-xs); font-weight:700;
    transition:all var(--dur-f);
  }
  .soc-btn:hover { background:var(--caramel); color:#fff; border-color:var(--caramel); transform:translateY(-2px); }

  @media(max-width:860px){ .footer-grid { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } }
  @media(max-width:540px){ .footer-grid { grid-template-columns:1fr 1fr; gap:var(--s6); } }
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@layer animations {
  @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
  @keyframes float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes breathe{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.07)} }
  @keyframes ringOut{ from{transform:scale(.7);opacity:.5} to{transform:scale(1.2);opacity:0} }
  @keyframes spinSlow{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
  @keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

  .a0 { animation:fadeUp .8s var(--ease-out) both; }
  .a1 { animation:fadeUp .8s .12s var(--ease-out) both; }
  .a2 { animation:fadeUp .8s .24s var(--ease-out) both; }
  .a3 { animation:fadeUp .8s .36s var(--ease-out) both; }
  .a4 { animation:fadeUp .8s .48s var(--ease-out) both; }

  /* Scroll reveal */
  .reveal { opacity:0; transform:translateY(26px); transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); }
  .reveal.in { opacity:1; transform:translateY(0); }
  .reveal:nth-child(2){transition-delay:80ms} .reveal:nth-child(3){transition-delay:160ms}
  .reveal:nth-child(4){transition-delay:240ms} .reveal:nth-child(5){transition-delay:320ms}
  .reveal:nth-child(6){transition-delay:400ms} .reveal:nth-child(7){transition-delay:480ms}
  .reveal:nth-child(8){transition-delay:560ms}

  /* Skeleton shimmer for image loading */
  .img-skeleton {
    background:linear-gradient(90deg, var(--cream-deep) 25%, var(--latte) 50%, var(--cream-deep) 75%);
    background-size:400% 100%;
    animation:shimmer 1.5s ease-in-out infinite;
  }

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
    html { scroll-behavior:auto; }
  }
}

/* ─── UTILITIES ──────────────────────────────────────────── */
@layer utilities {
  .tc { text-align:center; }
  .mx-a { margin-inline:auto; }
  @media(min-width:768px){ .nav-links { display:flex; } .burger { display:none; } .tabbar { display:none; } }
}

  /* ═══════════════ INDEX-SPECIFIC STYLES ═══════════════════ */

  /* ── HERO ─────────────────────────────────────────────────*/
  .hero {
    min-height:100svh;
    display:grid; place-items:center;
    position:relative; overflow:hidden;
    background:var(--white);
  }

  /* Subtle warm radial wash */
  .hero-wash {
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 70% 60% at 50% 55%, rgba(240,224,194,.55) 0%, transparent 75%),
      radial-gradient(ellipse 40% 35% at 50% 48%, rgba(248,242,230,.9) 0%, transparent 65%);
    pointer-events:none;
  }

  /* Very faint horizontal rule — echoes the logo's baseline stroke */
  .hero-rule {
    position:absolute; bottom:38%; inset-inline:0;
    height:1px; background:var(--latte); opacity:.55;
    pointer-events:none;
  }

  .hero-inner {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:var(--s12) var(--s6) var(--s8);
    gap:0;
  }

  /* ── THE LOGO – absolute star of the page ─────────────────*/
  .hero-logo-wrap {
    position:relative;
    margin-bottom:var(--s6);
  }

  /* Soft transparent glow behind logo */
  .hero-logo-glow {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:clamp(220px,40vw,360px);
    height:clamp(220px,40vw,360px);
    border-radius:50%;
    background:radial-gradient(circle, rgba(201,168,76,.25) 0%, rgba(193,122,47,.1) 50%, transparent 80%);
    pointer-events:none;
  }

  .ring { display:none; }

  /* The actual logo PNG */
  .hero-logo-img {
    position:relative; z-index:2;
    width:clamp(240px, 45vw, 440px);
    height:auto;
    filter:
      drop-shadow(0 0 16px rgba(255,255,255,.9))
      drop-shadow(0 10px 28px rgba(0,0,0,.65));
    transition:transform var(--dur-s) var(--ease-out);
  }
  .hero-logo-img:hover { transform:scale(1.03); }

  /* Hero text — minimal, letting the logo breathe */
  .hero-place {
    font-size:var(--t-xs); font-weight:700;
    letter-spacing:.28em; text-transform:uppercase;
    color:var(--text-soft); margin-top:var(--s4);
  }

  .hero-title {
    font-family:'Playfair Display',serif;
    font-size:var(--t-hero); font-weight:900;
    line-height:1.0; color:var(--ink);
    margin-block:var(--s3) var(--s4);
  }
  .hero-title em {
    font-style:italic;
    background:linear-gradient(130deg,var(--caramel) 0%,var(--gold) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }

  .hero-tagline {
    font-family:'Cormorant Garamond',serif;
    font-size:var(--t-xl); color:var(--text-soft);
    font-weight:300; letter-spacing:.05em;
    margin-bottom:var(--s8);
  }

  .hero-btns { display:flex; gap:var(--s4); justify-content:center; flex-wrap:wrap; }

  .scroll-hint {
    position:absolute; bottom:var(--s6); left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:var(--s2);
    color:var(--text-soft); opacity:.42; font-size:.56rem; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase;
    animation:float 2.6s ease-in-out infinite;
  }
  .scroll-hint svg { width:16px; }

  /* ── SEPARATOR LINE (logo motif echo) ─────────────────────*/
  .line-sep {
    width:100%; height:1px;
    background:linear-gradient(90deg,transparent,var(--latte) 30%,var(--latte) 70%,transparent);
  }

  /* ── BEBIDAS ──────────────────────────────────────────────*/
  .bebidas-sec { background:var(--white); }
  .drinks-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);
    margin-bottom:var(--s8);
  }
  .drink-card {
    background:var(--cream); border:1.5px solid var(--latte);
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--sh-xs);
    transition:transform var(--dur-m) var(--ease-out),box-shadow var(--dur-m);
  }
  .drink-card:hover { transform:translateY(-7px); box-shadow:var(--sh-md); }
  .drink-thumb {
    height:200px; display:flex; align-items:center; justify-content:center;
    font-size:5rem;
    background:linear-gradient(150deg,var(--cream-warm),var(--cream-deep));
    position:relative; overflow:hidden;
  }
  .drink-thumb::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 65%);
  }
  .drink-body { padding:var(--s5) var(--s5) var(--s6); }
  .drink-name { font-family:'Playfair Display',serif; font-size:var(--t-lg); font-weight:700; color:var(--ink); margin-bottom:var(--s2); }
  .drink-desc { font-family:'Cormorant Garamond',serif; font-size:var(--t-md); color:var(--text-mid); line-height:1.65; font-weight:300; margin-bottom:var(--s4); }

  /* Promo */
  .promo {
    display:grid; grid-template-columns:1fr 1.3fr;
    border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-lg);
  }
  .promo-cell { padding:clamp(var(--s8),5vw,var(--s12)) clamp(var(--s8),5vw,var(--s10)); }
  .promo-ink  { background:var(--ink); }
  .promo-warm { background:linear-gradient(135deg,var(--caramel),var(--caramel-lt)); }
  .ptag { font-size:var(--t-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; margin-bottom:var(--s3); }
  .promo-ink .ptag  { color:var(--gold); opacity:.8; }
  .promo-warm .ptag { color:rgba(255,255,255,.8); }
  .ptitle { font-family:'Playfair Display',serif; font-size:var(--t-2xl); font-weight:900; line-height:1.1; margin-bottom:var(--s3); }
  .promo-ink .ptitle  { color:var(--cream); }
  .promo-warm .ptitle { color:#fff; }
  .pprice { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3rem); font-weight:900; margin-bottom:var(--s4); }
  .promo-ink .pprice  { color:var(--gold); }
  .promo-warm .pprice { color:#fff; }
  .pdesc { font-family:'Cormorant Garamond',serif; font-size:var(--t-md); line-height:1.65; font-weight:300; margin-bottom:var(--s6); }
  .promo-ink .pdesc  { color:var(--latte); opacity:.88; }
  .promo-warm .pdesc { color:rgba(255,255,255,.9); }

  /* ── PRODUCTS ─────────────────────────────────────────────*/
  .prods-sec { background:var(--cream-warm); }
  .prods-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
  .prod-card {
    background:var(--white); border:1.5px solid var(--latte); border-radius:var(--r-lg);
    padding:var(--s6) var(--s4) var(--s5); text-align:center;
    box-shadow:var(--sh-xs); transition:all var(--dur-m) var(--ease-out);
    display:flex; flex-direction:column; justify-content:space-between; height:100%;
    min-width:0; box-sizing:border-box; overflow-wrap:break-word;
  }
  .prod-card:hover { transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(193,122,47,.28); }
  .prod-card .btn { margin-top:auto; }
  .prod-icon { font-size:2.6rem; margin-bottom:var(--s3); display:block; }
  .prod-name { font-family:'Playfair Display',serif; font-size:var(--t-base); font-weight:700; color:var(--ink); margin-bottom:var(--s2); }
  .prod-desc { font-family:'Cormorant Garamond',serif; font-size:var(--t-sm); color:var(--text-mid); line-height:1.55; font-weight:300; margin-bottom:var(--s3); }
  .prod-price { font-family:'Playfair Display',serif; font-size:var(--t-lg); color:var(--caramel); font-weight:700; }

  /* ── DEALS ────────────────────────────────────────────────*/
  .deals-sec {
    background:var(--ink); position:relative; overflow:hidden;
  }
  .deals-sec::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 6% 88%,rgba(193,122,47,.2),transparent 50%),
      radial-gradient(ellipse at 92% 8%,rgba(201,168,76,.12),transparent 46%);
    pointer-events:none;
  }
  .deals-grid { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:var(--s5); position:relative; }
  .deal-inner {
    background:rgba(255,255,255,.06); border:1.5px solid rgba(193,122,47,.2);
    border-radius:var(--r-xl); padding:var(--s8) var(--s6); height:100%;
    backdrop-filter:blur(6px); transition:background var(--dur-m);
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .deal-inner > div:last-child { margin-top:auto; }
  .deal-card:hover .deal-inner { background:rgba(193,122,47,.13); }
  .deal-emoji { font-size:2.4rem; margin-bottom:var(--s4); display:block; }
  .deal-name { font-family:'Playfair Display',serif; font-size:var(--t-xl); font-weight:700; color:var(--cream); margin-bottom:var(--s3); }
  .deal-desc { font-family:'Cormorant Garamond',serif; font-size:var(--t-md); color:var(--latte); line-height:1.65; font-weight:300; margin-bottom:var(--s5); }
  .deal-price { font-family:'Playfair Display',serif; font-size:var(--t-2xl); color:var(--gold); font-weight:700; }
  .deal-card.feat .deal-inner { background:linear-gradient(135deg,var(--caramel),var(--caramel-lt)); border-color:transparent; }
  .deal-card.feat .deal-name  { font-size:var(--t-2xl); }
  .deal-card.feat .deal-desc  { color:rgba(255,255,255,.92); }
  .deal-card.feat .deal-price { color:#fff; font-size:var(--t-3xl); }
  .deal-card.feat .deal-emoji { font-size:3.2rem; }

  /* ── ABOUT ────────────────────────────────────────────────*/
  .about-sec {
    background:var(--white);
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(var(--s10),8vw,var(--s20));
    align-items:center;
    padding-inline:clamp(var(--s5),8%,var(--s20));
    padding-block:clamp(var(--s16),8vw,var(--s24));
  }
  .about-vis { position:relative; }
  .about-frame {
    background:url('../assets/fachada.jpeg') center/cover no-repeat;
    border:1.5px solid var(--latte);
    border-radius:24px; aspect-ratio:4/5;
    display:flex; align-items:flex-end; padding:var(--s6);
    box-shadow:var(--sh-lg); overflow:hidden; position:relative;
  }
  .about-frame::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(17,16,16,.85) 0%, rgba(17,16,16,.2) 60%, transparent 100%);
    pointer-events:none;
  }
  .about-photo-badge {
    position:relative; z-index:2; display:flex; align-items:center; gap:var(--s3);
    background:rgba(253,250,244,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    padding:var(--s3) var(--s4); border-radius:var(--r-lg); border:1px solid var(--latte);
    box-shadow:var(--sh-sm);
  }
  .about-logo {
    width:45px; height:auto; flex-shrink:0;
  }
  .about-photo-txt strong { display:block; font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.2; }
  .about-photo-txt span { font-size:.72rem; color:var(--caramel); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
  .about-badge {
    position:absolute; bottom:-16px; right:-16px;
    width:100px; height:100px; border-radius:50%;
    background:var(--caramel); color:var(--white);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; text-align:center;
    box-shadow:var(--sh-caramel); z-index:3; border:2px solid var(--white);
  }
  .about-badge strong { font-size:2.1rem; font-weight:900; line-height:1; }
  .about-badge small { font-family:'Outfit',sans-serif; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-top:3px; }
  .about-text .sec-body { margin-bottom:var(--s5); }
  .vals { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s8); }
  .val {
    background:var(--cream-warm); border:1.5px solid var(--latte); border-radius:var(--r-md);
    padding:var(--s5) var(--s3); text-align:center; transition:all var(--dur-m) var(--ease-out);
  }
  .val:hover { border-color:rgba(193,122,47,.3); box-shadow:var(--sh-sm); transform:translateY(-4px); }
  .val-icon { font-size:1.7rem; display:block; margin-bottom:var(--s2); }
  .val-label { font-family:'Playfair Display',serif; font-size:var(--t-sm); font-weight:700; color:var(--ink-soft); }

  /* ── LOCATION ─────────────────────────────────────────────*/
  /* ── LOCATION ULTRA-MODERN LUXURY ─────────────────────────*/
  .loc-sec-dark {
    background: var(--ink);
    position: relative;
    padding-block: clamp(var(--s12), 7vw, var(--s24));
    overflow: hidden;
  }
  .loc-sec-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 12% 20%, rgba(193, 122, 47, 0.16), transparent 50%),
      radial-gradient(ellipse at 88% 80%, rgba(201, 168, 76, 0.12), transparent 45%);
    pointer-events: none;
  }

  .loc-container-modern {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(var(--s6), 4vw, var(--s12));
    align-items: stretch;
    position: relative;
    z-index: 2;
  }

  .loc-card-dark {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(24px);
    border: 1.5px solid rgba(193, 122, 47, 0.22);
    border-radius: var(--r-2xl);
    padding: clamp(var(--s6), 5vw, var(--s10));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .loc-live-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    background: rgba(46, 125, 50, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.35);
    color: #4caf50;
    padding: 6px var(--s4);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    width: max-content;
    margin-bottom: var(--s4);
  }
  .live-pulse {
    width: 8px;
    height: 8px;
    background-color: #4caf50;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(76, 175, 80, 0.6);
    animation: livePulseGlow 2s infinite;
  }
  @keyframes livePulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
  }

  .loc-eyebrow-gold {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--gold);
    margin-bottom: var(--s2);
  }

  .loc-title-modern {
    font-family: 'Playfair Display', serif;
    font-size: var(--t-2xl);
    font-weight: 900;
    color: var(--cream);
    line-height: 1.15;
    margin-bottom: var(--s6);
  }
  .loc-accent-gold {
    font-style: italic;
    color: var(--caramel-lt);
  }

  .loc-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin-bottom: var(--s6);
  }

  .glass-contact-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    text-decoration: none;
    transition: all var(--dur-m) var(--ease-out);
    position: relative;
  }
  .glass-contact-tile:not(.no-hover):hover {
    background: rgba(193, 122, 47, 0.12);
    border-color: rgba(193, 122, 47, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }

  .tile-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: rgba(193, 122, 47, 0.18);
    border: 1px solid rgba(193, 122, 47, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--gold);
    flex-shrink: 0;
  }
  .glass-contact-tile:hover .tile-icon-wrap {
    background: var(--caramel);
    border-color: var(--caramel);
    color: #fff;
  }

  .tile-content {
    display: flex;
    flex-direction: column;
  }
  .tile-label {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .tile-val {
    font-family: 'Playfair Display', serif;
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--cream);
    margin-block: 2px;
  }
  .tile-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--t-xs);
    color: var(--latte);
    opacity: 0.85;
  }

  .tile-arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.85rem;
    color: var(--gold);
    opacity: 0.5;
    transition: all var(--dur-f);
  }
  .glass-contact-tile:hover .tile-arrow {
    opacity: 1;
    transform: translate(3px, -3px);
  }

  .loc-cta-bar {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
    margin-top: var(--s2);
  }

  .btn-glow {
    box-shadow: 0 8px 25px rgba(193, 122, 47, 0.4);
  }
  .btn-glow:hover {
    box-shadow: 0 12px 35px rgba(193, 122, 47, 0.6);
    transform: translateY(-2px);
  }

  .btn-gold-outline {
    background: transparent;
    border: 1.5px solid rgba(201, 168, 76, 0.4);
    color: var(--cream);
    padding: var(--s3) var(--s6);
    border-radius: var(--r-full);
    font-family: 'Outfit', sans-serif;
    font-size: var(--t-sm);
    font-weight: 600;
    transition: all var(--dur-m);
    text-decoration: none;
  }
  .btn-gold-outline:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: var(--gold);
    color: #fff;
    transform: translateY(-2px);
  }

  /* Right Map Modern */
  .loc-map-modern {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 480px;
  }
  .modern-map-card {
    width: 100%;
    height: 100%;
    min-height: 480px;
    border-radius: var(--r-2xl);
    overflow: hidden;
    position: relative;
    border: 1.5px solid rgba(193, 122, 47, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    background: #1a1715;
  }

  .map-top-glass {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    background: rgba(17, 16, 16, 0.82);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(193, 122, 47, 0.3);
    padding: var(--s2) var(--s4);
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    gap: var(--s3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  }
  .map-dot-gold {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
  }
  .map-top-glass strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: var(--t-sm);
    color: var(--cream);
  }
  .map-top-glass small {
    display: block;
    font-size: var(--t-xs);
    color: var(--latte);
    opacity: 0.8;
  }

  .map-bottom-glass {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: max-content;
    max-width: 90%;
  }
  .btn-map-gold {
    background: linear-gradient(135deg, var(--caramel), var(--caramel-lt));
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: var(--t-sm);
    font-weight: 700;
    padding: var(--s3) var(--s6);
    border-radius: var(--r-full);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: all var(--dur-m) var(--ease-out);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .btn-map-gold:hover {
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 16px 40px rgba(193, 122, 47, 0.45);
  }

  .wrap-wide {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(var(--s5), 4vw, var(--s12));
  }

  .loc-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-bottom: var(--s2);
  }

  .loc-badge-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: var(--gold);
    padding: 6px var(--s4);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 700;
  }

  .loc-highlights-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
    margin-top: clamp(var(--s8), 4vw, var(--s12));
    padding-top: var(--s8);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .loc-hl-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-xl);
    transition: all var(--dur-m);
  }
  .loc-hl-item:hover {
    background: rgba(193, 122, 47, 0.12);
    border-color: rgba(193, 122, 47, 0.35);
    transform: translateY(-2px);
  }
  .loc-hl-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
  }
  .loc-hl-item strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: var(--t-sm);
    color: var(--cream);
  }
  .loc-hl-item small {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--t-xs);
    color: var(--latte);
    opacity: 0.85;
  }

  /* ── RESPONSIVE ───────────────────────────────────────────*/
  @media(max-width:900px){
    .drinks-grid { grid-template-columns:1fr 1fr; }
    .promo { grid-template-columns:1fr; }
    .prods-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s3); }
    .prod-card { padding:var(--s4) var(--s3) var(--s4); min-width:0; }
    .prod-name { font-size:var(--t-sm); line-height:1.25; overflow-wrap:break-word; word-break:break-word; }
    .prod-desc { font-size:var(--t-xs); line-height:1.4; margin-bottom:var(--s3); overflow-wrap:break-word; }
    .prod-card .btn { padding:var(--s2) var(--s2) !important; font-size:0.78rem !important; }
    .deals-grid { grid-template-columns:1fr; }
    .deal-card.feat { order:-1; }
    .about-sec { grid-template-columns:1fr; padding-inline:var(--s5); }
    .about-frame { aspect-ratio:16/10; }
    .about-badge { right:var(--s4); bottom:calc(-1 * var(--s4)); }
    .loc-container-modern { grid-template-columns:1fr; }
    .loc-grid-modern { grid-template-columns:1fr; }
    .loc-map-modern, .modern-map-card { min-height:380px; }
  }
  @media(max-width:580px){
    .drinks-grid { grid-template-columns:1fr; }
    .prods-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s2); }
    .prod-card { padding:var(--s3) var(--s2) var(--s3); }
    .prod-icon { font-size:2.2rem; margin-bottom:var(--s1); }
    .prod-card .btn { padding:var(--s2) 4px !important; font-size:0.74rem !important; }
    .vals { grid-template-columns:repeat(3,1fr); }
    .promo-cell { padding:var(--s8) var(--s6); }
    .deals-grid { gap:var(--s4); }
    .hero-logo-img { width:clamp(240px,88vw,380px); }
    .loc-highlights-strip { grid-template-columns: 1fr; }
  }
   /* estilo menu */
    /* ═══════════════ MENU-SPECIFIC STYLES ════════════════════ */

  /* Photo card image sources (Unsplash CDN – free) */
  /* Using specific crop sizes for performance */

  /* ── HERO ESPECTACULAR CON FOTO REAL Y DEGRADADO RICO ──── */
  .m-hero-spectacular {
    position:relative; overflow:hidden;
    padding-block:clamp(var(--s10), 6vw, var(--s16)) clamp(var(--s8), 4vw, var(--s12));
    background:url('../assets/fachada.jpeg') center/cover no-repeat;
    color:var(--cream);
  }
  .m-hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(17,16,16,.65) 0%, rgba(17,16,16,.82) 65%, rgba(17,16,16,.94) 100%);
    pointer-events:none;
  }
  .m-hero-spectacular-content { position:relative; z-index:2; text-align:center; max-width:820px; margin-inline:auto; }

  .breadcrumbs-list.light { color:rgba(237,224,200,.7); justify-content:center; }
  .breadcrumbs-list.light a { color:var(--latte); }
  .breadcrumbs-list.light a:hover { color:var(--gold); }

  .m-hero-badge { margin-block:var(--s2) var(--s3); }
  .location-badge {
    display:inline-flex; align-items:center; gap:var(--s2);
    padding:var(--s1) var(--s4); border-radius:var(--r-full);
    background:rgba(193,122,47,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(201,168,76,.4); font-size:var(--t-xs); font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
  }

  .m-hero-spectacular-title {
    font-family:'Playfair Display',serif; font-size:clamp(2.1rem, 5.2vw, 3.6rem); font-weight:900;
    color:var(--cream); line-height:1.08; margin-bottom:var(--s2);
    text-shadow:0 2px 18px rgba(0,0,0,.4);
  }
  .m-hero-spectacular-sub {
    font-family:'Cormorant Garamond',serif; font-size:var(--t-lg); color:var(--latte);
    font-weight:300; letter-spacing:.04em; max-width:56ch; margin-inline:auto; margin-bottom:var(--s4);
  }

  .m-hero-pills-row { display:flex; justify-content:center; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s6); }
  .hero-tag {
    font-size:var(--t-xs); font-weight:600; color:var(--cream);
    background:rgba(253,250,244,.12); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(237,224,200,.25); padding:var(--s1) var(--s3); border-radius:var(--r-full);
  }

  /* BUSCADOR FLOTANTE INTEGRADO EN HERO */
  .menu-search-bar-hero { max-width:620px; margin-inline:auto; }
  .menu-search-bar-hero .menu-search-input {
    background:rgba(253,250,244,.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1.5px solid var(--latte); box-shadow:0 12px 36px rgba(0,0,0,.3);
  }
  .menu-search-bar-hero .menu-search-input:focus {
    background:var(--white); border-color:var(--caramel); box-shadow:0 0 0 4px rgba(193,122,47,.3), 0 12px 36px rgba(0,0,0,.4);
  }

  /* ── STICKY CATEGORY NAV (SINGLE PILL BAR) ─────────────── */
  .cat-nav {
    position:sticky; top:var(--nav-h); z-index:80;
    background:rgba(253,250,244,.98);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border-bottom:1px solid var(--latte);
    box-shadow:0 3px 16px rgba(17,16,16,.05);
    padding-block:var(--s3);
  }
  [id].menu-cat { scroll-margin-top:calc(var(--nav-h) + 64px); }

  .cat-scroll { display:flex; align-items:center; gap:var(--s2); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-inline:clamp(var(--s4),4vw,var(--s10)); }
  .cat-scroll::-webkit-scrollbar { display:none; }

  .cat-btn {
    display:flex; align-items:center; gap:var(--s2);
    padding:var(--s2) var(--s4); flex-shrink:0;
    font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-soft); background:var(--cream-warm); border:1px solid var(--latte);
    border-radius:var(--r-full); transition:all var(--dur-f) var(--ease); text-decoration:none;
    touch-action:manipulation;
  }
  .cat-btn:hover { color:var(--caramel); border-color:var(--caramel); background:var(--white); }
  .cat-btn.active { color:var(--white); background:var(--caramel); border-color:var(--caramel); box-shadow:var(--sh-caramel); }

  /* ── BOTÓN FAB CATEGORÍAS MÓVIL ───────────────────────── */
  .mobile-cat-fab {
    position:fixed; bottom:calc(var(--tab-h) + var(--s4) + var(--safe-b)); left:50%; transform:translateX(-50%);
    z-index:840; background:var(--caramel); color:var(--white);
    padding:var(--s3) var(--s5); border-radius:var(--r-full);
    font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    box-shadow:var(--sh-caramel); display:flex; align-items:center; gap:var(--s2);
    border:1.5px solid rgba(255,255,255,.3); transition:transform var(--dur-f) var(--ease);
  }
  .mobile-cat-fab svg { width:18px; height:18px; }
  .mobile-cat-fab:active { transform:translateX(-50%) scale(.96); }
  @media(min-width:768px){ .mobile-cat-fab { display:none; } }

  /* ── MENU BODY ────────────────────────────────────────── */
  .menu-body { background:var(--cream); }
  .menu-content { max-width:var(--max-w); margin-inline:auto; padding-inline:clamp(var(--s5),5vw,var(--s12)); padding-block:var(--s12) var(--s20); }

  /* ── CATEGORY SECTION ─────────────────────────────────── */
  .menu-cat { margin-bottom:clamp(var(--s12),8vw,var(--s20)); }

  .cat-head {
    display:flex; align-items:center; gap:var(--s4);
    padding-bottom:var(--s5); border-bottom:1.5px solid var(--latte); margin-bottom:var(--s8);
  }
  .cat-head-icon {
    width:54px; height:54px; border-radius:var(--r-md); flex-shrink:0;
    background:var(--cream-warm); border:1.5px solid var(--latte);
    display:flex; align-items:center; justify-content:center;
    font-size:1.65rem; box-shadow:var(--sh-xs);
  }
  .cat-head-eye { font-size:var(--t-xs); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--caramel); margin-bottom:3px; }
  .cat-head-name { font-family:'Playfair Display',serif; font-size:var(--t-2xl); font-weight:900; color:var(--ink); line-height:1; }

  /* ── PHOTO PRODUCT CARDS GRID ─────────────────────────── */
  .cards-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap:var(--s6);
  }

  /* THE CARD (CUADRO DEL MENÚ CON FOTO) */
  .pcard {
    background:var(--white);
    border:1px solid rgba(237,224,200,.85);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(17,16,16,.05);
    display:flex; flex-direction:column;
    transition:transform var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
  }
  .pcard:hover { transform:translateY(-8px); box-shadow:0 18px 44px rgba(193,122,47,.12); border-color:rgba(193,122,47,.35); }

  /* Photo area */
  .pcard-photo {
    position:relative; overflow:hidden;
    aspect-ratio:4/3;
    background:var(--cream-warm);
    flex-shrink:0;
  }
  .pcard-photo img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform var(--dur-s) var(--ease);
    display:block;
  }
  .pcard:hover .pcard-photo img { transform:scale(1.06); }

  /* Gradient overlay at bottom of photo */
  .pcard-photo::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(17,16,16,.25) 0%, transparent 50%);
    pointer-events:none;
  }

  /* Badge on photo */
  .pcard-badge {
    position:absolute; top:var(--s3); left:var(--s3);
    z-index:2;
  }

  /* Price on photo corner (Burbuja rediseñada) */
  .pcard-price-bubble {
    position:absolute; bottom:var(--s3); right:var(--s3);
    z-index:2;
    background:var(--white);
    color:var(--caramel);
    font-family:'Playfair Display',serif;
    font-size:1.15rem; font-weight:900;
    padding:4px 14px;
    border-radius:var(--r-full);
    border:1px solid var(--latte);
    box-shadow:0 4px 14px rgba(17,16,16,.1);
    line-height:1.2;
  }

  /* Card body */
  .pcard-body { padding:var(--s5); flex:1; display:flex; flex-direction:column; justify-content:space-between; }
  .pcard-name {
    font-family:'Playfair Display',serif; font-size:1.18rem; font-weight:700;
    color:var(--ink); margin-bottom:var(--s2); line-height:1.25;
  }
  .pcard-desc {
    font-family:'Outfit',sans-serif; font-size:.88rem;
    color:var(--text-mid); line-height:1.52; font-weight:400;
    flex:1; margin-bottom:var(--s3); opacity:.9;
  }
  .pcard-badges { display:flex; gap:var(--s2); flex-wrap:wrap; }

  /* ── LIST VIEW (TARJETAS INDIVIDUALES PERFECCIONADAS PARA CAFÉS Y BEBIDAS) ─ */
  .items-list {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap:var(--s4); background:transparent; border-radius:0; overflow:visible; box-shadow:none;
  }
  .list-item {
    display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
    padding:var(--s4) var(--s5); background:var(--white);
    border:1px solid rgba(237,224,200,.9);
    border-left:4px solid var(--caramel);
    border-radius:18px;
    box-shadow:0 6px 20px rgba(17,16,16,.04);
    transition:transform var(--dur-f) var(--ease), box-shadow var(--dur-f) var(--ease), border-color var(--dur-f) var(--ease);
  }
  .list-item:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(193,122,47,.12);
    border-color:rgba(193,122,47,.4);
    background:var(--white);
  }
  .list-item.full { grid-column:1/-1; }
  .li-info { flex:1; min-width:0; }
  .li-name { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:var(--s1); line-height:1.28; }
  .li-desc { font-family:'Outfit',sans-serif; font-size:.85rem; color:var(--text-mid); font-weight:400; line-height:1.45; margin-bottom:var(--s2); opacity:.88; }
  .li-price {
    font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:900;
    color:var(--caramel); white-space:nowrap; flex-shrink:0;
    background:var(--cream-warm); padding:4px 14px; border-radius:var(--r-full);
    border:1px solid var(--latte); box-shadow:0 2px 8px rgba(17,16,16,.05);
    line-height:1.2;
  }

  /* ── HIGHLIGHT / SPECIAL CARD ─────────────────────────── */
  .highlight {
    background:var(--ink); border-radius:var(--r-2xl);
    padding:clamp(var(--s8),5vw,var(--s10));
    display:flex; gap:var(--s8); align-items:center;
    margin-top:var(--s6); box-shadow:var(--sh-lg); position:relative; overflow:hidden;
  }
  .highlight::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 5% 85%,rgba(193,122,47,.22),transparent 48%);
  }
  .highlight-photo {
    width:clamp(100px,14vw,150px); flex-shrink:0; position:relative; z-index:2;
    border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1; box-shadow:var(--sh-md);
  }
  .highlight-photo img { width:100%; height:100%; object-fit:cover; }
  .highlight-txt { position:relative; z-index:2; }
  .highlight-eye { font-size:var(--t-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s2); }
  .highlight-name { font-family:'Playfair Display',serif; font-size:var(--t-2xl); font-weight:900; color:var(--cream); margin-bottom:var(--s3); }
  .highlight-desc { font-family:'Cormorant Garamond',serif; font-size:var(--t-md); color:var(--latte); font-weight:300; line-height:1.65; margin-bottom:var(--s4); }
  .highlight-price { font-family:'Playfair Display',serif; font-size:var(--t-3xl); color:var(--gold); font-weight:900; }

  /* ── FOOTER ESPECTACULAR Y SOBRIO ───────────────────────── */
  .menu-footer-spectacular {
    background:var(--ink);
    color:var(--cream);
    border-top:2px solid var(--caramel);
    padding-top:clamp(var(--s10), 6vw, var(--s16));
    margin-top:var(--s12);
  }
  .footer-spectacular-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap:var(--s8);
    padding-bottom:var(--s10);
    border-bottom:1px solid rgba(237,224,200,.12);
  }
  .footer-brand-header { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
  .footer-brand-logo { border-radius:var(--r-sm); background:rgba(253,250,244,.1); padding:4px; border:1px solid rgba(201,168,76,.3); }
  .footer-brand-title { display:flex; flex-direction:column; }
  .footer-name { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:900; color:var(--cream); line-height:1; }
  .footer-sub { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); opacity:.9; margin-top:2px; }
  .footer-tagline { font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--latte); font-weight:300; line-height:1.6; opacity:.85; }

  .footer-col-title { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--gold); margin-bottom:var(--s4); letter-spacing:.02em; }
  .footer-info-item { font-family:'Outfit',sans-serif; font-size:.9rem; color:var(--latte); line-height:1.6; opacity:.85; margin-bottom:var(--s1); }
  .footer-info-item.phone a { color:var(--caramel-lt); font-weight:600; transition:color var(--dur-f); }
  .footer-info-item.phone a:hover { color:var(--gold); }

  .footer-checklist { list-style:none; padding:0; }
  .footer-checklist li { font-family:'Outfit',sans-serif; font-size:.88rem; color:var(--latte); line-height:1.7; opacity:.85; margin-bottom:var(--s2); }

  .footer-bottom-bar { background:rgba(0,0,0,.35); padding-block:var(--s4); margin-top:var(--s4); }
  .footer-bottom-flex { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s3); font-size:.8rem; color:var(--latte); opacity:.75; }
  .footer-back-top { color:var(--gold); font-weight:600; transition:color var(--dur-f); }
  .footer-back-top:hover { color:var(--cream); }

  /* ── SEARCH BAR INTERACTIVA ────────────────────────────── */
  .menu-search-bar { margin-block:var(--s2) var(--s4); }
  .menu-search-wrap { position:relative; display:flex; align-items:center; width:100%; }
  .menu-search-wrap .search-icon { position:absolute; left:var(--s4); width:20px; height:20px; color:var(--caramel); pointer-events:none; }
  .menu-search-input {
    width:100%; padding:var(--s3) var(--s4) var(--s3) calc(var(--s4)*2 + 20px);
    background:var(--cream-warm); border:1.5px solid var(--latte); border-radius:var(--r-full);
    font-family:'Outfit',system-ui,sans-serif; font-size:var(--t-base); color:var(--ink);
    transition:all var(--dur-f) var(--ease); box-shadow:var(--sh-xs);
  }
  .menu-search-input:focus { outline:none; background:var(--white); border-color:var(--caramel); box-shadow:0 0 0 3px rgba(193,122,47,.15), var(--sh-sm); }
  .menu-search-input::placeholder { color:var(--text-soft); opacity:.75; }
  .menu-search-clear {
    position:absolute; right:var(--s3); width:32px; height:32px; border-radius:var(--r-full);
    display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--text-soft);
    transition:background var(--dur-f), color var(--dur-f);
  }
  .menu-search-clear:hover { background:var(--cream-deep); color:var(--ink); }
  .search-status { font-size:var(--t-xs); font-weight:600; color:var(--caramel); margin-top:var(--s2); margin-left:var(--s4); letter-spacing:.05em; }

  /* Photo zoom indicator */
  .pcard-photo { cursor:pointer; }
  .pcard-photo::before {
    content:'🔍 Ampliar'; position:absolute; top:var(--s3); right:var(--s3); z-index:3;
    background:rgba(17,16,16,.65); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    color:var(--white); font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:var(--r-full);
    opacity:0; transition:opacity var(--dur-f); pointer-events:none;
  }
  .pcard-photo:hover::before { opacity:1; }

  /* ── LIGHTBOX MODAL ─────────────────────────────────────── */
  .lightbox-modal {
    position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
    padding:var(--s4); opacity:0; visibility:hidden; transition:opacity var(--dur-m) var(--ease), visibility var(--dur-m);
  }
  .lightbox-modal:not([hidden]) { opacity:1; visibility:visible; }
  .lightbox-overlay { position:absolute; inset:0; background:rgba(17,16,16,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .lightbox-card {
    position:relative; z-index:2; background:var(--white); border:1.5px solid var(--latte);
    border-radius:var(--r-2xl); max-width:520px; width:100%; max-height:90vh; overflow-y:auto;
    box-shadow:var(--sh-xl); display:flex; flex-direction:column; animation:lightbox-pop var(--dur-m) var(--ease-out);
  }
  @keyframes lightbox-pop {
    from { transform:scale(.92) translateY(12px); opacity:0; }
    to { transform:scale(1) translateY(0); opacity:1; }
  }
  .lightbox-close {
    position:absolute; top:var(--s3); right:var(--s3); z-index:10; width:38px; height:38px;
    border-radius:var(--r-full); background:rgba(253,250,244,.85); backdrop-filter:blur(4px);
    border:1px solid var(--latte); font-size:1.5rem; line-height:1; color:var(--ink);
    display:flex; align-items:center; justify-content:center; transition:background var(--dur-f), transform var(--dur-f);
  }
  .lightbox-close:hover { background:var(--caramel); color:var(--white); transform:scale(1.08); }
  .lightbox-photo { position:relative; aspect-ratio:4/3; background:var(--cream-warm); overflow:hidden; border-radius:var(--r-2xl) var(--r-2xl) 0 0; }
  .lightbox-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .lightbox-body { padding:var(--s6); }
  .lightbox-title { font-family:'Playfair Display',serif; font-size:var(--t-xl); font-weight:900; color:var(--ink); margin-bottom:var(--s2); }
  .lightbox-desc { font-family:'Cormorant Garamond',serif; font-size:var(--t-lg); color:var(--text-mid); line-height:1.6; margin-bottom:var(--s4); }
  .lightbox-price {
    display:inline-block; font-family:'Playfair Display',serif; font-size:var(--t-xl); font-weight:900;
    color:var(--caramel); background:var(--cream-warm); padding:var(--s2) var(--s5); border-radius:var(--r-full); border:1.5px solid var(--latte);
  }

  /* ── SCROLL TO TOP ─────────────────────────────────────── */
  .scroll-top-btn {
    position:fixed; bottom:calc(var(--tab-h) + var(--s4) + var(--safe-b)); right:var(--s5); z-index:850;
    width:46px; height:46px; border-radius:var(--r-full); background:var(--ink); color:var(--cream);
    border:1.5px solid var(--caramel); box-shadow:var(--sh-md); display:flex; align-items:center; justify-content:center;
    transition:transform var(--dur-f) var(--ease), opacity var(--dur-f), background var(--dur-f);
    opacity:0; pointer-events:none;
  }
  .scroll-top-btn:not([hidden]) { opacity:1; pointer-events:auto; }
  .scroll-top-btn:hover { background:var(--caramel); color:var(--white); transform:translateY(-3px); }
  .scroll-top-btn svg { width:22px; height:22px; }
  @media(min-width:768px){ .scroll-top-btn { bottom:var(--s8); } }

  /* ── RESPONSIVE ───────────────────────────────────────── */
  @media(max-width:640px){
    .items-list { grid-template-columns:1fr; }
    .list-item.full { grid-column:1; }
    .highlight { flex-direction:column; text-align:center; }
    .highlight-photo { margin-inline:auto; }
    .cards-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%,200px),1fr)); gap:var(--s4); }
  }