:root { --green:#3B6148; --dgreen:#2E4D39; --cream:#FEF7DD; --ink:#2A1D15; --muted:#6B6152; }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body { background:var(--cream); color:var(--ink); font-family:Montserrat, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
  img { display:block; max-width:100%; }
  .wrap { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
  h2 { font-family:Fraunces, serif; font-weight:600; letter-spacing:-.02em; line-height:1; }

  /* ── HERO: el vapor dibuja el logo ─────────────────────────── */
  .hero { position:relative; height:100svh; min-height:640px; background:var(--green); overflow:hidden; display:grid; place-items:center; }
  .hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .stage { position:relative; width:min(860px, 92vw); aspect-ratio:1560/1080; margin-top:-6vh; }
  .stage svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .logo path { fill:var(--cream); }
  .hero.intro-active .desde path, .hero.intro-active .name path, .hero.intro-active .cafe path { opacity:0; }
  .hero:not(.intro-active) .logo g[mask] { mask:none; }
  .wisp { fill:none; stroke:var(--cream); stroke-linecap:round; opacity:0; }
  .hero-ui { position:absolute; left:0; right:0; bottom:7vh; display:flex; flex-direction:column; align-items:center; gap:22px; color:var(--cream); }
  .hero-ui.on { opacity:1; transform:none; }
  .hero-ui p { font-size:clamp(15px, 1.4vw, 18px); letter-spacing:.02em; opacity:.85; text-align:center; padding:0 20px; }
  .btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .btn { display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border-radius:999px; font:600 13px/1 Montserrat; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
  .btn.cream { background:var(--cream); color:var(--green); }
  .btn.line { border:1.5px solid currentColor; color:var(--cream); }
  .btn.green { background:var(--green); color:var(--cream); }
  .topbar { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px clamp(20px, 5vw, 64px); color:var(--cream); font:600 12px/1 Montserrat; letter-spacing:.14em; text-transform:uppercase; z-index:2; }
  .topbar.on { opacity:1; }
  .topbar nav { display:flex; gap:28px; }
  .topbar a { color:inherit; text-decoration:none; }
  .replay { position:absolute; right:16px; bottom:14px; color:var(--cream); opacity:.35; font:500 11px Montserrat; background:none; border:0; cursor:pointer; z-index:2; }

  /* steam border (like the sauce drips on Matt's) */
  .steam-edge { display:block; width:100%; height:90px; background:var(--green); }
  .steam-edge path { fill:none; stroke:var(--cream); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:40 140; animation:steam 4s linear infinite; filter:blur(.6px); }
  @keyframes steam { from { stroke-dashoffset:180; opacity:0; } 30% { opacity:.7; } to { stroke-dashoffset:0; opacity:0; } }

  /* ── PLATOS ─────────────────────────────────────────────── */
  .platos { display:grid; grid-template-columns:repeat(4, 1fr); }
  .plato { position:relative; aspect-ratio:4/5; overflow:hidden; }
  .plato img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .plato:hover img { transform:scale(1.05); }
  .plato span { position:absolute; left:16px; bottom:16px; background:var(--cream); padding:10px 14px; font:600 12px/1 Montserrat; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; }
  .plato b { color:var(--green); margin-left:8px; }

  /* ── CARTA ──────────────────────────────────────────────── */
  .carta { padding:96px 0 110px; }
  .carta-head { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
  .carta-head h2 { font-size:clamp(56px, 7vw, 96px); }
  .carta-head p { color:var(--muted); font-size:15px; max-width:340px; line-height:1.6; }
  .cards { columns:2 520px; column-gap:24px; }
  .card { break-inside:avoid; background:var(--green); color:var(--cream); border-radius:24px; padding:36px 36px 28px; margin-bottom:24px; }
  .card h3 { font-family:Fraunces, serif; font-weight:600; font-size:34px; letter-spacing:-.01em; display:flex; align-items:baseline; gap:10px; }
  .card h3 small { font-size:16px; opacity:.88; }
  .card .swirl { display:block; width:120px; height:16px; margin:10px 0 18px; }
  .card .swirl path { fill:none; stroke:var(--cream); stroke-width:2.2; stroke-linecap:round; opacity:.6; }
  .row { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid rgba(254,247,221,.14); }
  .row:first-of-type { border-top:0; }
  .row strong { font:600 14px/1.3 Montserrat; letter-spacing:.06em; text-transform:uppercase; }
  .row .detail { display:block; font:400 13px/1.4 Montserrat; font-style:normal; opacity:.88; margin-top:4px; text-transform:none; letter-spacing:0; }
  .row span { font:600 14px/1.3 Montserrat; white-space:nowrap; }
  .card.cream { background:#F3E8C6; color:var(--ink); }
  .card.cream .row { border-color:rgba(42,29,21,.12); }
  .card.cream .swirl path { stroke:var(--green); }
  .horario { text-align:center; }
  .horario h3 { justify-content:center; }
  .horario .swirl { margin:10px auto 16px; }
  .horario p { font:500 15px/1.9 Montserrat; letter-spacing:.06em; text-transform:uppercase; }

  /* ── LOCAL ──────────────────────────────────────────────── */
  .local-head { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
  .local-head h2 { font-size:clamp(56px, 7vw, 96px); }
  .local-head p { color:var(--muted); max-width:460px; line-height:1.6; }
  .galeria { display:grid; grid-template-columns:1.3fr 1fr 1fr; }
  .galeria img { width:100%; height:min(62vw, 600px); object-fit:cover; }

  /* ── VISITA ─────────────────────────────────────────────── */
  .visita { background:var(--green); color:var(--cream); padding:96px 0; }
  .visita .wrap { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .visita h2 { font-size:clamp(56px, 7vw, 96px); margin-bottom:36px; }
  .dato { margin-bottom:24px; }
  .dato small { display:block; font:600 11px Montserrat; letter-spacing:.16em; text-transform:uppercase; opacity:.88; margin-bottom:6px; }
  .dato p { font:500 22px/1.35 Fraunces, serif; }
  .mapa { aspect-ratio:1/1; border-radius:24px; overflow:hidden; background:#E9DFC2; }
  .mapa iframe { width:100%; height:100%; border:0; filter:sepia(.25) saturate(.8); }
  footer { background:var(--dgreen); color:var(--cream); padding:40px 0; }
  footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; font-size:13px; opacity:.9; }
  footer .footer-logo { width:150px; display:block; }
  footer .footer-logo img { width:100%; height:auto; filter:brightness(0) saturate(100%) invert(96%) sepia(14%) saturate(689%) hue-rotate(328deg) brightness(106%) contrast(99%); }
  footer svg path { fill:var(--cream); }

  .reveal { opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity:1; transform:none; }

  @media (max-width: 760px) {
    .topbar nav { display:none; }
    .platos { grid-template-columns:repeat(2, 1fr); }
    .galeria { grid-template-columns:1fr; }
    .galeria img { height:70vw; }
    .visita .wrap { grid-template-columns:1fr; }
    .card { padding:28px 22px 20px; }
  }

  .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  a:focus-visible, button:focus-visible { outline:3px solid currentColor; outline-offset:6px; }
  .skip-link { position:fixed; top:12px; left:12px; z-index:10; padding:16px; background:var(--cream); color:var(--green); transform:translateY(-200%); }
  .skip-link:focus { transform:none; }
  .footer-links { display:flex; gap:20px; flex-wrap:wrap; }
  .footer-links a { color:inherit; text-underline-offset:5px; padding:12px 0; }
  .visit-buttons { justify-content:flex-start; margin-top:12px; }
  .plato picture { display:block; width:100%; height:100%; }
  .row .detail { font-style:normal; }
  @media (max-width:760px) {
    .hero { min-height:680px; }
    .stage { width:96vw; margin-top:-15vh; }
    .hero-ui { bottom:48px; gap:20px; }
    .hero-ui p { max-width:370px; line-height:1.6; }
    .hero-ui .btns { flex-direction:column; align-items:center; }
    .topbar { font-size:10px; letter-spacing:.06em; padding:22px 20px; gap:16px; }
    .topbar a { padding:12px 0; }
    .plato span { left:10px; right:10px; bottom:10px; font-size:10px; letter-spacing:.02em; padding:10px; width:fit-content; max-width:calc(100% - 20px); line-height:1.5; }
    .plato b { display:block; margin-left:0; }
    .card h3 { font-size:30px; flex-wrap:wrap; gap:6px; }
    .card h3 small { white-space:nowrap; }
    .row { gap:12px; }
    .row strong, .row span { font-size:13px; }
    .carta { padding:64px 0 48px; }
    .local-head h2, .visita h2 { font-size:56px; }
    .visita { padding:64px 0; }
    .visita .wrap { gap:36px; }
    footer .wrap { flex-direction:column; align-items:flex-start; line-height:1.7; }
  }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation:none !important; transition:none !important; }
    .hero .logo g[mask] { mask:none !important; }
    .hero .desde path, .hero .name path, .hero .cafe path { opacity:1 !important; }
    #wisps, #loop { display:none; }
    .steam-edge path { stroke-dasharray:none; opacity:.35; }
    .plato:hover img { transform:none; }
  }

  @media (min-width:761px) and (max-height:760px) {
    .stage { width:min(860px, 92vw, calc(144svh - 330px)); }
  }