/* =========================================================
   OSAKA — sistema de diseño
   Una sola fotografía fija de fondo en toda la web.
   Todo el contenido flota encima en paneles de vidrio
   esmerilado (blur + transparencia real), como Axolotl.
   ========================================================= */

:root {
  color-scheme: dark;
  --ink:        #17130f;
  --washi:      #fdfaf3;
  --washi-dim:  rgba(253, 250, 243, 0.8);
  --shu:        #e2483a;
  --shu-deep:   #b32720;
  --gold:       #e3bc6f;
  --gold-deep:  #ab7c2c;
  --line:       rgba(255, 255, 255, 0.28);
  --line-soft:  rgba(255, 255, 255, 0.16);

  /* vidrio — el único lenguaje visual del sitio */
  --glass-fill:   rgba(15, 12, 9, 0.46);
  --glass-fill-2: rgba(15, 12, 9, 0.34);
  --glass-strong: rgba(15, 12, 9, 0.62);
  --glass-chip:   rgba(255, 255, 255, 0.14);
  --blur: blur(24px) saturate(170%);
  --blur-sm: blur(14px) saturate(150%);
  --shadow: 0 24px 60px -20px rgba(0,0,0,.45);
  --shadow-sm: 0 12px 30px -14px rgba(0,0,0,.4);

  --f-display: 'Shippori Mincho', 'Noto Serif JP', serif;
  --f-body: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;

  --gap-xs: clamp(0.4rem, 0.3rem + 0.4vw, 0.6rem);
  --gap-s:  clamp(0.8rem, 0.6rem + 0.6vw, 1.1rem);
  --gap-m:  clamp(1.4rem, 1rem + 1.2vw, 2rem);
  --gap-l:  clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
  --gap-xl: clamp(3.6rem, 2.6rem + 4vw, 6rem);

  --radius: 26px;
  --radius-sm: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-s: .28s;
  --dur-m: .55s;

  --hero-mobile: url('../img/hero-mobile.jpg');
  --hero-desktop: url('../img/hero-desktop.jpg');
  --header-h: 78px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--washi);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fondo fijo real, como elemento aparte en vez de
   background-attachment:fixed: esa propiedad se renderiza mal en iOS y
   en bastantes Android (recorte/zoom al aparecer u ocultarse la barra
   de direcciones). Un elemento position:fixed normal, en cambio, sí se
   queda quieto de forma fiable en todas las plataformas. */
.bg-fixed {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(6,10,8,.42) 0%, rgba(6,10,8,.3) 30%, rgba(6,10,8,.6) 100%),
    var(--hero-mobile);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .bg-fixed {
    background-image:
      linear-gradient(180deg, rgba(6,10,8,.38) 0%, rgba(6,10,8,.22) 30%, rgba(6,10,8,.55) 100%),
      var(--hero-desktop);
  }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
h1,h2,h3,h4,p,figure { margin: 0; }

::selection { background: var(--shu); color: var(--washi); }

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

/* ---------- tipografía ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.5);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); display: inline-block; }
h1, h2, h3 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: .01em; color: var(--washi);
  text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 10px 34px rgba(0,0,0,.4);
}
h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 4.2rem); line-height: 1.06; }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.15; }
h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); line-height: 1.3; }
.lede { font-size: clamp(1rem, .93rem + .3vw, 1.14rem); color: var(--washi-dim); max-width: 58ch; text-shadow: 0 1px 4px rgba(0,0,0,.6), 0 6px 20px rgba(0,0,0,.4); }
.kanji-mark { font-family: var(--f-display); color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.5); }

.container { width: min(1200px, 92%); margin-inline: auto; }
.section { padding-block: var(--gap-l); position: relative; }
.center { text-align: center; margin-inline: auto; }

/* ---------- panel de vidrio (componente base) ---------- */
.glass {
  background: var(--glass-fill);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.glass--soft { background: var(--glass-fill-2); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); box-shadow: var(--shadow-sm); }
.glass--strong { background: var(--glass-strong); }

/* ---------- botones ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.8em;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--line);
  background: var(--glass-chip);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  color: var(--washi);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-s) var(--ease-soft), background var(--dur-s) var(--ease-soft), border-color var(--dur-s) var(--ease-soft);
  overflow: hidden; isolation: isolate;
}
.btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.24); }
.btn--solid { background: var(--shu); border-color: var(--shu); color: #fff; }
.btn--solid:hover { background: var(--shu-deep); border-color: var(--shu-deep); }
.btn .arrow { transition: transform var(--dur-s) var(--ease-soft); }
.btn:hover .arrow { transform: translateX(4px); }

.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.5); pointer-events: none; animation: ripple .65s var(--ease-soft); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #0c0f0b;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease-soft), visibility .6s var(--ease-soft);
}
#preloader.is-hidden { opacity: 0; visibility: hidden; }
#preloader img { width: 180px; height: 180px; opacity: 0; transform: scale(.85); animation: logoIn 1s var(--ease) forwards; }
@keyframes logoIn { to { opacity: 1; transform: scale(1); } }

/* ---------- header flotante ----------
   El vidrio vive en ::before (no en .site-header) a propósito:
   backdrop-filter en un ancestro convierte a ese ancestro en el
   "contenedor" de cualquier descendiente position:fixed (como el
   menú móvil), rompiendo su posicionamiento respecto al viewport. */
.site-header {
  position: fixed; top: var(--gap-s); left: var(--gap-s); right: var(--gap-s); z-index: 500;
  height: 68px;
  display: flex; align-items: center; gap: var(--gap-s);
  padding-inline: var(--gap-m);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-m) var(--ease-soft), top var(--dur-m) var(--ease-soft);
}
.site-header::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--glass-fill);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: background var(--dur-m) var(--ease-soft);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }
.site-header.is-scrolled::before { background: var(--glass-strong); }

.brand { color: var(--washi); display: flex; align-items: center; gap: .5rem; font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .05em; z-index: 2; }
.brand strong { color: var(--shu); }
.brand .brand-kanji { font-size: .78rem; letter-spacing: .28em; opacity: .8; }
.brand-logo { display: inline-block; height: 2.7rem; width: 2.7rem; object-fit: contain; flex-shrink: 0; vertical-align: middle; }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: var(--gap-m); }
.nav-list { display: flex; gap: var(--gap-m); }
.nav-link { position: relative; color: var(--washi-dim); font-size: .82rem; letter-spacing: .04em; font-weight: 500; padding-block: .4rem; transition: color var(--dur-m) var(--ease-soft); }
.nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right var(--dur-m) var(--ease); }
.nav-link:hover::after, .nav-link.is-active::after { right: 0; }
.nav-link:hover, .nav-link.is-active { color: var(--washi); }

/* ---------- selector de idioma ---------- */
.lang-switcher { position: relative; }
.lang-switcher__toggle {
  display: flex; align-items: center; gap: .4em;
  background: var(--glass-chip); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: .45em .8em; color: var(--washi); font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  transition: background var(--dur-s);
}
.lang-switcher__toggle:hover { background: rgba(255,255,255,.22); }
.lang-switcher__code { font-size: .72rem; }
.flag-icon { width: 1.3em; height: .95em; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; }
.lang-switcher__menu {
  position: absolute; top: calc(100% + .6rem); right: 0; z-index: 50;
  min-width: 190px; max-height: 60vh; overflow-y: auto;
  background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: .4rem;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur-s) var(--ease-soft), transform var(--dur-s) var(--ease-soft);
}
.lang-switcher__menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-switcher__menu a { display: flex; align-items: center; gap: .6em; padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: .86rem; color: var(--washi-dim); transition: background var(--dur-s), color var(--dur-s); }
.lang-switcher__menu a:hover { background: var(--glass-chip); color: var(--washi); }
.lang-switcher__menu a.is-active { color: var(--gold); font-weight: 700; }
[dir="rtl"] .lang-switcher__menu { right: auto; left: 0; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: .4rem; z-index: 600; }
.nav-toggle span { width: 24px; height: 1.5px; background: var(--washi); transition: all var(--dur-s) var(--ease-soft); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  /* .main-nav pasa a position:fixed (cajón lateral) y sale del flujo del
     flex del header, así que su margin-left:auto deja de empujar a lo
     que viene después; se lo damos aquí al propio selector de idioma
     para que quede pegado al hamburguesa. */
  .lang-switcher { margin-left: auto; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px);
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    border-left: 1px solid var(--line);
    flex-direction: column; align-items: flex-start;
    padding: calc(var(--header-h) + 2rem) var(--gap-m) var(--gap-m);
    transform: translateX(100%);
    transition: transform var(--dur-m) var(--ease);
  }
  .main-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; gap: var(--gap-s); }
  .nav-link { font-size: 1.05rem; }
  .nav-cta { margin-top: var(--gap-m); }
  body.nav-locked { overflow: hidden; }
}
.nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 450; opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease-soft); }
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 94vh; display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--gap-l)); padding-bottom: var(--gap-l); overflow: hidden; }
.hero--inner { min-height: 50vh; align-items: flex-end; }
.hero__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-l); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__main h1 { margin-top: var(--gap-s); max-width: 14ch; text-shadow: 0 4px 30px rgba(0,0,0,.55); }
.hero__divider { display: flex; align-items: center; gap: .8rem; margin-block: var(--gap-m); color: var(--gold); }
.hero__divider::before, .hero__divider::after { content: ''; height: 1px; width: 40px; background: var(--line); }
.hero__lede { max-width: 46ch; color: var(--washi-dim); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); margin-top: var(--gap-m); }

.badge-stack { display: flex; flex-direction: column; gap: var(--gap-s); }
.badge-circle {
  width: 118px; height: 118px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--glass-fill-2); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--line);
  font-size: .68rem; letter-spacing: .05em; font-weight: 700; color: var(--washi); line-height: 1.25;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-m) var(--ease-soft), background var(--dur-m);
}
.badge-circle:hover { transform: translateY(-4px); background: var(--glass-fill); }
.badge-circle span { display: block; }
@media (max-width: 900px) { .badge-stack { flex-direction: row; flex-wrap: wrap; } .badge-circle { width: 96px; height: 96px; font-size: .62rem; } }

#petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---------- reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--r-delay, 0s), transform .9s var(--ease) var(--r-delay, 0s); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

/* ---------- franja de iconos (panel único) ---------- */
.icon-strip { padding: var(--gap-l); }
.icon-strip__head { text-align: center; margin-bottom: var(--gap-m); }
.icon-strip__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap-m); }
.icon-item { text-align: center; }
.icon-item__mark {
  width: 54px; height: 54px; margin-inline: auto; border-radius: 50%;
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); color: var(--gold); font-size: 1.2rem; margin-bottom: .8rem;
}
.icon-item h4 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--washi); font-weight: 700; }
.icon-item p { margin-top: .35rem; font-size: .82rem; color: var(--washi-dim); }

/* ---------- tarjetas destacadas (3 paneles separados) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap-m); }
.feature-card { padding: var(--gap-m); display: flex; flex-direction: column; }
.feature-card__mark {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass-chip);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); color: var(--gold); font-size: 1.2rem;
}
.feature-card h3 { margin-top: var(--gap-s); }
.feature-card p { margin-top: .5rem; color: var(--washi-dim); font-size: .92rem; flex-grow: 1; }
.feature-card .btn { margin-top: var(--gap-m); align-self: flex-start; padding: .7em 1.3em; font-size: .74rem; }
.info-card .btn { margin-top: .9rem; padding: .7em 1.3em; font-size: .74rem; }

/* ---------- selector de carta por local ---------- */
.menu-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-m); }
@media (max-width: 720px) { .menu-choice-grid { grid-template-columns: 1fr; } }
.menu-choice-card { display: block; overflow: hidden; padding: 0; color: inherit; transition: transform var(--dur-m) var(--ease); }
.menu-choice-card:hover { transform: translateY(-4px); }
.menu-choice-card__photo { width: 100%; height: 260px; object-fit: cover; display: block; }
.menu-choice-card__body { padding: var(--gap-l); }
.menu-choice-card__body h2 { margin-top: .4rem; }
.menu-choice-card__body .btn { margin-top: var(--gap-m); }

.locations-panel { padding: var(--gap-l); }
.locations-panel__head { margin-bottom: var(--gap-m); }
.locations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-l); }
@media (max-width: 760px) { .locations-grid { grid-template-columns: 1fr; } }
.location-block { padding-inline-start: var(--gap-l); border-inline-start: 1px solid var(--line); }
.location-block:first-child { padding-inline-start: 0; border-inline-start: none; }
@media (max-width: 760px) { .location-block { padding-inline-start: 0; border-inline-start: none; padding-top: var(--gap-m); border-top: 1px solid var(--line); } .location-block:first-child { padding-top: 0; border-top: none; } }
.location-block__photo { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: var(--gap-s); }
.location-block h3 { display: flex; align-items: center; gap: .5em; }
.location-block__addr { font-size: .82rem; color: var(--washi-dim); margin-top: .2rem; letter-spacing: .02em; }
.location-block__hours { margin-top: var(--gap-s); display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.location-block__hours p { display: flex; justify-content: space-between; gap: var(--gap-s); flex-wrap: wrap; font-size: .88rem; border-bottom: 1px dashed var(--line); padding-bottom: .6rem; }
.location-block__hours p:last-child { border-bottom: none; padding-bottom: 0; }
.location-block__hours strong { color: var(--gold); font-weight: 600; white-space: nowrap; }
.location-block__hours span { color: var(--washi-dim); text-align: right; }

/* ---------- panel ancho: texto + insignias ---------- */
.wide-panel { padding: var(--gap-l); display: grid; grid-template-columns: 1fr auto; gap: var(--gap-l); align-items: center; }
@media (max-width: 860px) { .wide-panel { grid-template-columns: 1fr; } }
.wide-panel__text h2 { max-width: 16ch; }
.wide-panel__text p { margin-top: var(--gap-s); color: var(--washi-dim); max-width: 42ch; }
.stat-row { display: flex; gap: var(--gap-m); flex-wrap: wrap; }
.stat-badge { width: 92px; height: 92px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-chip); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.stat-badge__num { font-family: var(--f-display); font-size: 1.35rem; color: var(--washi); }
.stat-badge__label { font-size: .6rem; letter-spacing: .04em; color: var(--washi-dim); margin-top: .15rem; padding-inline: .3rem; }

/* ---------- menu page ---------- */
.menu-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--gap-l); padding: .4rem; }
.menu-tab { padding: .7rem 1.2rem; font-size: .8rem; letter-spacing: .04em; color: var(--washi-dim); position: relative; background: none; border: none; border-radius: var(--radius-pill); transition: color var(--dur-s), background var(--dur-s); }
.menu-tab.is-active { color: var(--ink); font-weight: 700; background: var(--gold); }
.menu-tab:not(.is-active):hover { color: var(--washi); background: rgba(255,255,255,.1); }
.menu-panel { display: none; }
.menu-panel.is-active { display: block; animation: fadeIn .5s var(--ease-soft); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
.menu-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-s); }
.menu-item { display: flex; align-items: center; gap: var(--gap-s); padding: var(--gap-s) var(--gap-m); border-radius: var(--radius-sm); transition: background var(--dur-m); cursor: pointer; }
.menu-item:hover { background: var(--glass-chip); }
.menu-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.menu-item__thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); }
.menu-item__thumb--empty { display: flex; align-items: center; justify-content: center; background: var(--glass-chip); color: var(--washi-dim); }
.menu-item__body { flex-grow: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; row-gap: .15rem; }
.menu-item__name { font-family: var(--f-display); font-size: 1.1rem; overflow-wrap: anywhere; }
.menu-item__tag { flex-shrink: 0; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--gold); border-radius: var(--radius-pill); padding: .15em .7em; }
.menu-item__desc { color: var(--washi-dim); font-size: .88rem; margin-top: .25rem; max-width: 50ch; flex-basis: 100%; }
.menu-item__price { flex-shrink: 0; font-family: var(--f-display); color: var(--gold); font-size: 1.02rem; white-space: nowrap; margin-left: auto; padding-left: var(--gap-s); }
@media (max-width: 520px) { .menu-item__thumb { width: 52px; height: 52px; } }
@media (max-width: 720px) { .menu-item__desc { display: none; } }
.menu-note { margin-top: var(--gap-l); padding: var(--gap-m); font-size: .88rem; color: var(--washi-dim); }

/* ---------- detalle del plato (popup) ---------- */
.plato-modal { position: fixed; inset: 0; z-index: 900; background: rgba(5,7,5,.75); backdrop-filter: var(--blur-sm); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease-soft); padding: var(--gap-m); }
.plato-modal.is-open { opacity: 1; pointer-events: auto; }
.plato-modal__card { position: relative; max-width: 420px; width: 100%; max-height: 85vh; overflow-y: auto; padding: var(--gap-l); transform: scale(.94); transition: transform var(--dur-m) var(--ease); }
.plato-modal.is-open .plato-modal__card { transform: scale(1); }
.plato-modal__close { position: absolute; top: var(--gap-s); right: var(--gap-s); width: 36px; height: 36px; border: 1px solid var(--line); background: var(--glass-chip); color: var(--washi); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--dur-s); z-index: 2; }
.plato-modal__close:hover { background: rgba(255,255,255,.24); }
.plato-modal__thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: var(--gap-m); }
.plato-modal__thumb[hidden] { display: none; }
.plato-modal__thumb--empty:not([hidden]) { display: flex; align-items: center; justify-content: center; background: var(--glass-chip); color: var(--washi-dim); }
.plato-modal__name { font-family: var(--f-display); font-size: 1.25rem; }
.plato-modal__tag { display: inline-block; margin-left: .6rem; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--gold); border-radius: var(--radius-pill); padding: .15em .7em; vertical-align: middle; }
.plato-modal__tag[hidden] { display: none; }
.plato-modal__desc { margin-top: .6rem; color: var(--washi-dim); font-size: .92rem; }
.plato-modal__price { display: block; margin-top: var(--gap-m); font-family: var(--f-display); color: var(--gold); font-size: 1.2rem; }

/* ---------- nosotros / timeline ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-l); align-items: center; padding: var(--gap-l); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.frame-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.frame-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.frame-photo:hover img { transform: scale(1.06); }

.timeline { position: relative; padding: var(--gap-l); }
.timeline-item { position: relative; padding-left: var(--gap-m); padding-bottom: var(--gap-l); border-left: 2px dotted var(--line); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--shu); }
.timeline-item time { font-family: var(--f-display); color: var(--gold); font-size: .92rem; }
.timeline-item h3 { margin-top: .3rem; }
.timeline-item p { margin-top: .4rem; color: var(--washi-dim); font-size: .9rem; }

/* ---------- galeria ---------- */
.gallery-section__head { margin-bottom: var(--gap-s); }
.gallery-section__head h3 { display: flex; align-items: center; gap: .6rem; }
.gallery { columns: 3 260px; column-gap: var(--gap-s); }
@media (max-width: 720px) { .gallery { columns: 2 160px; } }
.gallery figure { break-inside: avoid; margin-bottom: var(--gap-s); position: relative; overflow: hidden; cursor: zoom-in; border-radius: var(--radius-sm); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ease); }
.gallery figure::before { content: attr(data-caption); position: absolute; inset: auto 0 0 0; padding: .9rem; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); color: var(--washi); font-size: .78rem; transform: translateY(100%); transition: transform var(--dur-m) var(--ease); }
.gallery figure:hover::before { transform: translateY(0); }
.gallery figure:hover img { transform: scale(1.08); }

.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(5,7,5,.92); backdrop-filter: var(--blur-sm); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease-soft); padding: var(--gap-m); }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(90vw, 1000px); max-height: 82vh; object-fit: contain; transform: scale(.92); transition: transform var(--dur-m) var(--ease); border-radius: var(--radius-sm); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox.is-open img { transform: scale(1); }
.lightbox__caption { position: absolute; bottom: var(--gap-m); left: 0; right: 0; text-align: center; color: var(--washi-dim); font-size: .85rem; }
.lightbox__close, .lightbox__nav { border: 1px solid var(--line); background: var(--glass-chip); backdrop-filter: var(--blur-sm); color: var(--washi); display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--dur-s); }
.lightbox__close { position: absolute; top: var(--gap-m); right: var(--gap-m); width: 44px; height: 44px; font-size: 1.2rem; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lightbox__nav--prev { left: var(--gap-m); }
.lightbox__nav--next { right: var(--gap-m); }

.rest-modal { position: fixed; inset: 0; z-index: 900; background: rgba(5,7,5,.75); backdrop-filter: var(--blur-sm); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease-soft); padding: var(--gap-m); }
.rest-modal.is-open { opacity: 1; pointer-events: auto; }
.rest-modal__card { position: relative; max-width: 420px; width: 100%; padding: var(--gap-l); text-align: center; transform: scale(.94); transition: transform var(--dur-m) var(--ease); }
.rest-modal.is-open .rest-modal__card { transform: scale(1); }
.rest-modal__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: var(--gap-m); }
.rest-modal__option { display: flex; align-items: center; gap: .8rem; padding: .8rem var(--gap-m); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass-chip); color: var(--washi); cursor: pointer; font-family: var(--f-display); font-size: .95rem; text-align: left; transition: background var(--dur-s), border-color var(--dur-s); }
.rest-modal__option:hover, .rest-modal__option:focus-visible { background: rgba(255,255,255,.1); border-color: var(--shu); }
.rest-modal__option img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.rest-modal__close { position: absolute; top: var(--gap-s); right: var(--gap-s); width: 36px; height: 36px; border: 1px solid var(--line); background: var(--glass-chip); color: var(--washi); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--dur-s); }
.rest-modal__close:hover { background: rgba(255,255,255,.24); }

.restaurante-picked { margin-top: -.6rem; margin-bottom: 1.1rem; font-size: .85rem; color: var(--washi-dim); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.restaurante-picked strong { color: var(--washi); }
.restaurante-picked button { color: var(--shu); text-decoration: underline; font-size: .8rem; }

/* ---------- formularios ---------- */
.form-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap-l); }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } }
.form-panel { padding: var(--gap-l); }
.field { position: relative; margin-bottom: var(--gap-m); }
.field input, .field textarea, .field select {
  width: 100%; padding: 1.2rem 1rem .6rem; background: rgba(255,255,255,.06);
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--washi);
  color-scheme: dark;
  transition: border-color var(--dur-s), background var(--dur-s);
}
.field select { padding-top: 1.1rem; }
.field select option { background-color: #1c1712; color: var(--washi); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.1); }
.field label { position: absolute; left: 1rem; top: 1.05rem; color: var(--washi-dim); font-size: .95rem; pointer-events: none; transition: transform var(--dur-s), font-size var(--dur-s), color var(--dur-s); transform-origin: left top; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.has-value label { transform: translateY(-.65rem) scale(.78); color: var(--gold); }
.field.is-error input, .field.is-error textarea, .field.is-error select { border-color: var(--shu); animation: shake .45s var(--ease-soft); }
.field .error-msg { display: none; font-size: .78rem; color: #ff9086; margin-top: .35rem; }
.field.is-error .error-msg { display: block; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }

.form-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-m); }
.info-card { padding: var(--gap-m); }
.info-card h3 { display: flex; align-items: center; gap: .6rem; }
.info-card p { margin-top: .5rem; color: var(--washi-dim); font-size: .9rem; }
.address-block { margin-top: var(--gap-s); }
.address-block:first-of-type { margin-top: .5rem; }
.address-block p { margin-top: 0; margin-bottom: .5rem; }
.map-embed { width: 100%; height: 150px; border: 1px solid var(--line); border-radius: var(--radius-sm); filter: grayscale(.3) contrast(1.05); }

.alert { padding: 1rem 1.2rem; margin-bottom: var(--gap-m); border-left: 3px solid var(--shu); font-size: .92rem; display: flex; align-items: center; gap: .7rem; animation: fadeIn .5s var(--ease-soft); }
.alert--ok { border-left-color: #6fcf8a; }

/* ---------- fila de valores (sin panel, directo sobre la foto) ---------- */
.values-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-l); padding-block: var(--gap-m); }
.values-row .value-item { display: flex; align-items: center; gap: .6rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--washi-dim); }
.values-row .value-item span.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- footer ---------- */
.site-footer { padding: var(--gap-l) 0; margin: var(--gap-l) auto; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--gap-m); padding: var(--gap-l); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.footer-grid a, .footer-grid li { font-size: .9rem; color: var(--washi-dim); }
.footer-grid a { transition: opacity var(--dur-s), padding-left var(--dur-s); display: inline-block; }
.footer-grid a:hover { color: var(--washi); padding-left: .3rem; }
.footer-bottom { margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .76rem; color: var(--washi-dim); }
.social { display: flex; gap: .8rem; }
.social a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--washi); transition: background var(--dur-s), transform var(--dur-s); }
.social a:hover { background: var(--shu); border-color: var(--shu); transform: translateY(-3px); }

/* ---------- back to top / cursor ---------- */
.to-top { position: fixed; right: var(--gap-s); bottom: var(--gap-s); z-index: 400; width: 46px; height: 46px; border-radius: 50%; background: var(--glass-fill); backdrop-filter: var(--blur); border: 1px solid var(--line); color: var(--washi); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur-m), transform var(--dur-m), background var(--dur-s); }
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--shu); border-color: var(--shu); }

.music-toggle {
  position: fixed; left: var(--gap-s); bottom: var(--gap-s); z-index: 400;
  max-width: 46px; height: 46px; border-radius: var(--radius-pill);
  background: var(--glass-fill); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); color: var(--washi);
  display: flex; align-items: center; gap: .55rem; padding-inline: 14px;
  overflow: hidden; white-space: nowrap;
  transition: background var(--dur-s), max-width var(--dur-m) var(--ease-soft);
}
.music-toggle[hidden] { display: none; }
.music-toggle__on, .music-toggle__off { flex-shrink: 0; }
.music-toggle__label { font-size: .78rem; font-weight: 700; letter-spacing: .02em; opacity: 0; transition: opacity var(--dur-s) var(--ease-soft); }
.music-toggle.is-nudging { max-width: 160px; }
.music-toggle.is-nudging .music-toggle__label { opacity: 1; transition-delay: .15s; }
.music-toggle:hover { background: var(--shu); border-color: var(--shu); }
.music-toggle__off { display: none; }
.music-toggle.is-muted .music-toggle__on { display: none; }
.music-toggle.is-muted .music-toggle__off { display: block; }

.install-btn {
  position: fixed; left: 50%; bottom: var(--gap-s); z-index: 400;
  display: flex; align-items: center; gap: .55rem;
  padding: .75em 1.3em; border-radius: var(--radius-pill);
  background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); color: var(--washi);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px);
  transition: opacity var(--dur-m) var(--ease-soft), transform var(--dur-m) var(--ease-soft), background var(--dur-s);
}
.install-btn.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.install-btn:hover { background: rgba(255,255,255,.22); }
.install-btn svg { flex-shrink: 0; }
@media (max-width: 860px) { .install-btn { bottom: calc(var(--gap-s) + 4px); } }

.music-modal { position: fixed; inset: 0; z-index: 900; background: rgba(5,7,5,.75); backdrop-filter: var(--blur-sm); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease-soft); padding: var(--gap-m); }
.music-modal.is-open { opacity: 1; pointer-events: auto; }
.music-modal__card { max-width: 400px; width: 100%; padding: var(--gap-l); text-align: center; transform: scale(.94); transition: transform var(--dur-m) var(--ease); }
.music-modal.is-open .music-modal__card { transform: scale(1); }
.music-modal__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: var(--gap-m); }

.cursor-dot { position: fixed; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); pointer-events: none; z-index: 950; transform: translate(-50%,-50%); transition: opacity .3s, width .25s var(--ease-soft), height .25s var(--ease-soft); mix-blend-mode: difference; display: none; }
@media (hover: hover) and (pointer: fine) { .cursor-dot { display: block; } }
.cursor-dot.is-active { width: 30px; height: 30px; background: var(--washi); }

::view-transition-old(root) { animation: fadeOutVT .35s var(--ease-soft) forwards; }
::view-transition-new(root) { animation: fadeInVT .5s var(--ease-soft) forwards; }
@keyframes fadeOutVT { to { opacity: 0; } }
@keyframes fadeInVT { from { opacity: 0; } }

/* ---------- popup de aviso ---------- */
.aviso-modal {
  position: fixed; inset: 0; z-index: 920; background: rgba(5,7,5,.75); backdrop-filter: var(--blur-sm);
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-m) var(--ease-soft); padding: var(--gap-m);
}
.aviso-modal.is-open { opacity: 1; pointer-events: auto; }
.aviso-modal__card {
  max-width: 420px; width: 100%; padding: var(--gap-l); text-align: center;
  transform: scale(.94); transition: transform var(--dur-m) var(--ease);
  border-top: 3px solid var(--aviso-accent, var(--gold));
}
.aviso-modal.is-open .aviso-modal__card { transform: scale(1); }
.aviso-modal__icon { font-size: 1.6rem; }
.aviso-modal__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: var(--gap-m); }
.aviso-modal--info { --aviso-accent: #4fa8d8; }
.aviso-modal--aviso { --aviso-accent: #e3a63a; }
.aviso-modal--urgente {
  --aviso-accent: var(--shu-deep);
  z-index: 1000; background: rgba(10,4,3,.94); backdrop-filter: none;
}
.aviso-modal--urgente .aviso-modal__card { max-width: 460px; }
html.aviso-locked, html.aviso-locked body { overflow: hidden; height: 100%; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }