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

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:wght@300;400;500&family=Outfit:wght@300;400;500;600;700;800&display=swap');

@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%; }
  img, svg, video { display:block; max-width:100%; }
  button, input { font:inherit; border:none; background:none; cursor:pointer; }
  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;
    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)); }
  .sec { padding-block:clamp(var(--s16),8vw,var(--s24)); }
  .page { padding-top:var(--nav-h); padding-bottom:calc(var(--tab-h) + var(--safe-b)); }
  @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;
    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; 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; }
  .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; }
  .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:3px;
    padding:2px var(--s3); border-radius:var(--r-full);
    font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  }
  .badge-new  { background:rgba(193,122,47,.1); color:var(--caramel); border:1px solid rgba(193,122,47,.22); }
  .badge-pop  { background:rgba(17,16,16,.07);  color:var(--ink-soft); border:1px solid rgba(17,16,16,.14); }
  .badge-veg  { background:rgba(56,132,46,.09); color:#2d6b26; border:1px solid rgba(56,132,46,.18); }

  /* ══ 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 glow disc behind logo */
  .hero-logo-glow {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:clamp(280px,55vw,460px);
    height:clamp(280px,55vw,460px);
    border-radius:50%;
    background:radial-gradient(circle,rgba(248,242,230,1) 30%,rgba(241,233,216,.6) 65%,transparent 85%);
    animation:breathe 5s ease-in-out infinite;
    pointer-events:none;
  }

  /* Expanding rings — echo the steam swirl aesthetic */
  .ring {
    position:absolute; top:50%; left:50%;
    border-radius:50%; border:1px solid rgba(193,122,47,.12);
    animation:ringOut 5s linear infinite;
    pointer-events:none;
  }
  .ring:nth-child(1){ width:260px;height:260px;margin:-130px 0 0 -130px; }
  .ring:nth-child(2){ width:380px;height:380px;margin:-190px 0 0 -190px;animation-delay:1.7s; }
  .ring:nth-child(3){ width:500px;height:500px;margin:-250px 0 0 -250px;animation-delay:3.4s; }

  /* The actual logo PNG */
  .hero-logo-img {
    position:relative; z-index:2;
    width:clamp(280px, 52vw, 520px);
    height:auto;
    filter:
      drop-shadow(0 12px 36px rgba(193,122,47,.18))
      drop-shadow(0 3px 10px rgba(17,16,16,.08));
    transition:transform var(--dur-s) var(--ease-out);
  }
  .hero-logo-img:hover { transform:scale(1.03) rotate(-1.5deg); }

  /* 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);
  }
  .prod-card:hover { transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(193,122,47,.28); }
  .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);
  }
  .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:var(--cream-warm); border:1.5px solid var(--latte);
    border-radius:var(--r-2xl); aspect-ratio:4/5;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--sh-lg); overflow:hidden; position:relative;
  }
  .about-frame::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.65),transparent 58%);
  }
  /* Logo inside the about frame */
  .about-logo {
    width:clamp(160px,22vw,240px); position:relative; z-index:2;
    filter:drop-shadow(0 8px 22px rgba(193,122,47,.15));
    animation:float 5s ease-in-out infinite;
  }
  .about-badge {
    position:absolute; bottom:-20px; right:-20px;
    width:110px; height:110px; border-radius:50%;
    background:var(--ink); color:var(--cream);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; text-align:center;
    box-shadow:var(--sh-md); z-index:3;
  }
  .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 ─────────────────────────────────────────────*/
  .loc-sec {
    background:var(--cream-warm);
    display:grid; grid-template-columns:1fr 1fr;
    min-height:500px; padding:0;
  }
  .loc-info { padding:clamp(var(--s12),8vw,var(--s20)) clamp(var(--s5),7%,var(--s16)); display:flex; flex-direction:column; justify-content:center; }
  .loc-item { display:flex; align-items:flex-start; gap:var(--s4); margin-bottom:var(--s6); }
  .loc-icon {
    width:46px; height:46px; border-radius:var(--r-md); flex-shrink:0;
    background:var(--white); border:1.5px solid var(--latte);
    display:flex; align-items:center; justify-content:center;
    font-size:1.08rem; box-shadow:var(--sh-xs);
  }
  .loc-lbl { font-size:var(--t-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--caramel); display:block; margin-bottom:var(--s1); }
  .loc-txt { font-family:'Cormorant Garamond',serif; font-size:var(--t-md); color:var(--text-mid); font-weight:300; line-height:1.55; }
  .loc-map {
    background:var(--cream-deep); border-left:1.5px solid var(--latte);
    display:flex; align-items:center; justify-content:center;
  }
  .map-inner { display:flex; flex-direction:column; align-items:center; gap:var(--s5); padding:var(--s10) var(--s8); text-align:center; }
  .map-logo { width:clamp(130px,18vw,180px); filter:drop-shadow(0 6px 18px rgba(193,122,47,.15)); animation:float 4.5s ease-in-out infinite; }
  .map-lbl { font-size:var(--t-xs); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--caramel); }
  .map-addr { font-family:'Playfair Display',serif; font-size:var(--t-lg); color:var(--ink); line-height:1.5; }

  /* ── RESPONSIVE ───────────────────────────────────────────*/
  @media(max-width:900px){
    .drinks-grid { grid-template-columns:1fr 1fr; }
    .promo { grid-template-columns:1fr; }
    .prods-grid { grid-template-columns:repeat(2,1fr); }
    .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-sec { grid-template-columns:1fr; }
    .loc-map { min-height:280px; }
  }
  @media(max-width:580px){
    .drinks-grid { grid-template-columns:1fr; }
    .prods-grid { grid-template-columns:repeat(2,1fr); }
    .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); }
  }
   /* estilo menu */
    /* ═══════════════ MENU-SPECIFIC STYLES ════════════════════ */

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

  /* ── HERO ─────────────────────────────────────────────── */
  .m-hero {
    position:relative; overflow:hidden;
    padding-block:clamp(var(--s16),10vw,var(--s24));
    background:var(--ink);
    display:flex; align-items:flex-end;
  }
  .m-hero::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 12% 85%,rgba(193,122,47,.22),transparent 52%),
      radial-gradient(ellipse at 82% 15%,rgba(201,168,76,.1),transparent 44%);
    pointer-events:none;
  }
  /* Faded logo watermark right side */
  .m-hero-logo {
    position:absolute; right:-2%; top:50%; transform:translateY(-50%);
    width:clamp(220px,35vw,400px); height:auto;
    filter:invert(1) brightness(1.2);
    opacity:.07; pointer-events:none;
  }
  .m-hero-content { position:relative; z-index:2; }
  .m-hero-title {
    font-family:'Playfair Display',serif; font-size:var(--t-hero); font-weight:900;
    color:var(--cream); line-height:1.0; margin-block:var(--s3) var(--s4);
  }
  .m-hero-title em {
    font-style:italic;
    background:linear-gradient(130deg,var(--caramel),var(--gold));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .m-hero-sub { font-family:'Cormorant Garamond',serif; font-size:var(--t-lg); color:var(--latte); font-weight:300; letter-spacing:.06em; opacity:.8; }

  /* ── STICKY CATEGORY NAV ─────────────────────────────── */
  .cat-nav {
    position:sticky; top:var(--nav-h); z-index:80;
    background:rgba(253,250,244,.97);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border-bottom:1px solid var(--latte);
    box-shadow:0 2px 14px rgba(17,16,16,.06);
  }
  [id].menu-cat { scroll-margin-top:calc(var(--nav-h) + 60px); }

  .cat-scroll { display:flex; 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(--s4) var(--s5); flex-shrink:0;
    font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-soft); white-space:nowrap;
    border-bottom:2.5px solid transparent;
    transition:color var(--dur-f),border-color var(--dur-f); text-decoration:none;
    touch-action:manipulation;
  }
  .cat-btn:hover   { color:var(--caramel); }
  .cat-btn.active  { color:var(--caramel); border-bottom-color:var(--caramel); }

  /* ── 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%, 260px), 1fr));
    gap:var(--s5);
  }

  /* THE CARD */
  .pcard {
    background:var(--white);
    border:1.5px solid var(--latte);
    border-radius:var(--r-xl);
    overflow:hidden;
    box-shadow:var(--sh-xs);
    display:flex; flex-direction:column;
    transition:transform var(--dur-m) var(--ease-out), box-shadow var(--dur-m);
  }
  .pcard:hover { transform:translateY(-7px); box-shadow:var(--sh-md); border-color:rgba(193,122,47,.25); }

  /* 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,.18) 0%, transparent 45%);
    pointer-events:none;
  }

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

  /* Price on photo corner */
  .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.05rem; font-weight:700;
    padding:var(--s1) var(--s3);
    border-radius:var(--r-full);
    box-shadow:var(--sh-sm);
    line-height:1.2;
  }

  /* Card body */
  .pcard-body { padding:var(--s4) var(--s5) var(--s5); flex:1; display:flex; flex-direction:column; }
  .pcard-name {
    font-family:'Playfair Display',serif; font-size:var(--t-md); font-weight:700;
    color:var(--ink); margin-bottom:var(--s2); line-height:1.25;
  }
  .pcard-desc {
    font-family:'Cormorant Garamond',serif; font-size:var(--t-base);
    color:var(--text-mid); line-height:1.6; font-weight:300;
    flex:1; margin-bottom:var(--s3);
  }
  .pcard-badges { display:flex; gap:var(--s2); flex-wrap:wrap; }

  /* ── LIST VIEW (for items that fit a 2-col list) ─────── */
  .items-list { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--latte); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-xs); }
  .list-item { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s4); padding:var(--s4) var(--s5); background:var(--white); transition:background var(--dur-f); }
  .list-item:hover { background:var(--cream); }
  .list-item.full { grid-column:1/-1; }
  .li-info { flex:1; min-width:0; }
  .li-name { font-family:'Playfair Display',serif; font-size:var(--t-base); font-weight:700; color:var(--ink); margin-bottom:var(--s1); }
  .li-desc { font-family:'Cormorant Garamond',serif; font-size:var(--t-sm); color:var(--text-mid); font-weight:300; line-height:1.52; margin-bottom:var(--s2); }
  .li-price { font-family:'Playfair Display',serif; font-size:var(--t-lg); font-weight:700; color:var(--caramel); white-space:nowrap; flex-shrink:0; padding-top:2px; }

  /* ── 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; }

  /* ── NOTE FOOTER ──────────────────────────────────────── */
  .menu-note { background:var(--cream-warm); border-top:1px solid var(--latte); padding-block:var(--s8); text-align:center; }
  .menu-note p { font-family:'Cormorant Garamond',serif; font-size:var(--t-base); color:var(--text-soft); font-weight:300; max-width:54ch; margin-inline:auto; line-height:1.7; }

  /* ── 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); }
  }