/* ==========================================================================
   Tipografía autoalojada
   Subconjuntos con solo los caracteres que el sitio usa hoy: las Noto CJK
   completas pesan 6-14 MB cada una, aquí quedan en ~130-200 KB. En la pila
   de fuentes van primero los subconjuntos y detrás las familias completas de
   Google, para que cualquier carácter nuevo (un plato añadido más adelante)
   siga renderizando bien.
   ========================================================================== */
@font-face{font-family:'NotoSansKRCore';src:url('../fonts/notokr500-core.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+1100-11FF, U+3000-303F, U+3040-30FF, U+3130-318F, U+4E00-9FFF, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;}
@font-face{font-family:'NotoSansKRCore';src:url('../fonts/notokr700-core.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+1100-11FF, U+3000-303F, U+3040-30FF, U+3130-318F, U+4E00-9FFF, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;}
@font-face{font-family:'NotoSerifKRCore';src:url('../fonts/notoserifkr700-core.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+1100-11FF, U+3000-303F, U+3040-30FF, U+3130-318F, U+4E00-9FFF, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;}
@font-face{font-family:'FrauncesSub';src:url('../fonts/fraunces600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'FrauncesSub';src:url('../fonts/frauncesitalic500.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'JakartaSub';src:url('../fonts/jakarta500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'JakartaSub';src:url('../fonts/jakarta700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ==========================================================================
   La Cuchara Latina — estilos principales
   Paleta: fusión cálida latinoamericana + elegancia coreana
   ========================================================================== */

:root {
  --terracota: #C1440E;
  --chile: #E0592A;
  --gochujang: #8E1F2F;
  --gochujang-dark: #6E1424;
  --gold: #D9A441;
  --gold-light: #F1C97B;
  --jade: #2F6E51;
  --cream: #FBF3E7;
  --cream-dark: #F3E4CE;
  --ink: #2B1B17;
  --ink-soft: #5B4438;
  --white: #FFFFFF;
  --surface: #FFFFFF;

  --font-display: 'FrauncesSub', 'Fraunces', 'NotoSerifKRCore', 'NotoSerifKRFull', 'Noto Serif KR', Georgia, serif;
  --font-body: 'JakartaSub', 'Plus Jakarta Sans', 'NotoSansKRCore', 'NotoSansKRFull', 'Noto Sans KR', system-ui, sans-serif;

  /* Role tokens (swap between light/dark); brand hues above stay constant */
  --heading: var(--gochujang-dark);
  --bar-bg: var(--ink);
  --bar-text: var(--cream);
  --header-bg: rgba(251, 243, 231, 0.9);

  --shadow-soft: 0 10px 30px rgba(43, 27, 23, 0.12);
  --shadow-strong: 0 20px 45px rgba(43, 27, 23, 0.22);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* Dark mode: follows system preference unless the user picks explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --heading: #F1C97B;
    --cream: #17110D;
    --cream-dark: #201712;
    --ink: #F3E6D8;
    --ink-soft: #C9B3A0;
    --surface: #251B16;
    --bar-bg: #0F0B08;
    --bar-text: #F3E6D8;
    --header-bg: rgba(23, 17, 13, 0.88);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 20px 45px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --heading: #F1C97B;
  --cream: #17110D;
  --cream-dark: #201712;
  --ink: #F3E6D8;
  --ink-soft: #C9B3A0;
  --surface: #251B16;
  --bar-bg: #0F0B08;
  --bar-text: #F3E6D8;
  --header-bg: rgba(23, 17, 13, 0.88);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 20px 45px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
  /* keep-all stops Korean/Chinese/Japanese breaking mid-word; it is a no-op for Latin text */
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.lang-transitioning main { opacity: 0; transform: translateY(6px); }
main { opacity: 1; transform: translateY(0); transition: opacity 0.28s var(--ease-soft), transform 0.28s var(--ease-soft); }

img, svg { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--heading);
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--terracota);
  margin-bottom: 0.75em;
}

.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.section-sub { color: var(--ink-soft); font-size: 1.05rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.btn-outline {
  background: transparent;
  border-color: var(--cream);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.15); transform: translateY(-3px); }
/* Contact / map buttons */
.contact-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.btn-map {
  padding: 11px 20px;
  font-size: 0.88rem;
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn-map:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(255,255,255,0.25);
  font-weight: 800;
  font-size: 0.75rem;
}
.btn-naver { background: #03C75A; }
.btn-google { background: var(--surface); color: var(--ink); border-color: rgba(43,27,23,0.15); }
.btn-kakao { background: #FEE500; color: #391B1B; }
.contact-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 14px; }

/* Header icon buttons (theme + music toggles) */
.icon-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(43,27,23,0.12);
  background: var(--surface);
  color: var(--terracota);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-soft), transform 0.3s var(--ease-out), color 0.3s var(--ease-soft);
}
.icon-toggle:hover { border-color: var(--terracota); transform: translateY(-2px); }
.icon-toggle svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.icon-toggle .icon-moon,
.icon-toggle .icon-music-on {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-80deg) scale(0.5);
}
:root[data-theme="dark"] #themeToggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(80deg) scale(0.5);
}
:root[data-theme="dark"] #themeToggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
#musicToggle.playing { color: var(--jade); border-color: var(--jade); }
#musicToggle.playing .icon-music-off {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(80deg) scale(0.5);
}
#musicToggle.playing .icon-music-on {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  animation: musicPulse 1.6s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.15); }
}

/* Topbar */
.topbar {
  background: var(--bar-bg);
  color: var(--gold-light);
  text-align: center;
  font-size: 0.82rem;
  padding: 8px 16px;
  letter-spacing: 0.02em;
}
.topbar p { margin: 0; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(43, 27, 23, 0.08);
  transition: box-shadow 0.4s var(--ease-soft), background-color 0.4s var(--ease-soft);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(43,27,23,0.08); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 20px;
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--heading); }
.logo-text em { font-style: normal; font-size: 0.72rem; color: var(--terracota); letter-spacing: 0.05em; }

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
}
.main-nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--terracota);
  transition: width 0.35s var(--ease-out);
}
.main-nav a:not(.nav-cta):hover::after { width: 100%; }
.main-nav a:hover { color: var(--heading); }
.main-nav a { transition: color 0.25s var(--ease-soft); }
.nav-cta {
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: var(--white) !important;
  padding: 9px 20px;
  border-radius: 999px;
}
.nav-cta:hover { filter: brightness(1.08); }

.header-actions { display: flex; align-items: center; gap: 14px; }

/* Language switcher */
.lang-switcher { position: relative; }
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid rgba(43,27,23,0.12);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
}
.lang-toggle:hover { border-color: var(--terracota); }
.lang-toggle svg { transition: transform 0.3s var(--ease-out); }
.lang-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-strong);
  min-width: 160px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.lang-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 0.2s var(--ease-soft);
}
.lang-menu li:hover { background: var(--cream); }
.lang-menu li.active { background: var(--cream-dark); font-weight: 600; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  width: 24px; height: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease-soft);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #FBF3E7;
  background:
    radial-gradient(circle at 15% 20%, rgba(217,164,65,0.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(47,110,81,0.28), transparent 45%),
    linear-gradient(135deg, var(--gochujang-dark), var(--terracota) 60%, var(--chile));
  overflow: hidden;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 38px, rgba(255,255,255,0.5) 38px, rgba(255,255,255,0.5) 40px);
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; padding-top: 60px; padding-bottom: 100px; }
.hero .eyebrow { color: var(--gold-light); }
.hero h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  text-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.hero-subtitle { font-size: 1.15rem; max-width: 560px; color: rgba(255,255,255,0.92); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  z-index: 2;
}
.scroll-cue span {
  display: block;
  width: 5px; height: 5px;
  background: var(--gold-light);
  border-radius: 50%;
  margin: 7px auto 0;
  animation: scrollCue 1.8s infinite;
}
@keyframes scrollCue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}

/* Highlights band */
.highlights { padding: 72px 0; background: var(--cream-dark); }
.highlights-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.highlight-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  text-align: center;
  border: 1px solid rgba(43,27,23,0.06);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.highlight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(193,68,14,0.14), rgba(217,164,65,0.2));
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.highlight-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.highlight-card p { color: var(--ink-soft); font-size: 0.88rem; margin: 0; line-height: 1.5; }

/* About */
.about { padding: 110px 0; background: var(--cream); }
.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.about-visual {
  background: linear-gradient(160deg, var(--cream-dark), var(--surface));
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.flag-blend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; font-size: 2.4rem; margin-bottom: 36px; }
.blend-plus { font-size: 1.4rem; color: var(--terracota); }
.about-stats { display: flex; justify-content: space-around; gap: 12px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--heading); }
.stat span { font-size: 0.78rem; color: var(--ink-soft); max-width: 140px; margin: 0 auto; word-break: keep-all; }

.about-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.about-copy p { color: var(--ink-soft); }
.link-arrow {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--terracota);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-soft);
}
.link-arrow:hover { border-color: var(--terracota); }

/* Menu */
.menu-section { padding: 90px 0; background: var(--surface); }
.menu-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.menu-cta-icons {
  display: flex;
  gap: 14px;
  font-size: 2.2rem;
}
.menu-cta-icons span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform 0.4s var(--ease-out);
}
.menu-cta:hover .menu-cta-icons span:nth-child(1) { transform: translateY(-6px); }
.menu-cta:hover .menu-cta-icons span:nth-child(2) { transform: translateY(-6px); transition-delay: 0.05s; }
.menu-cta:hover .menu-cta-icons span:nth-child(3) { transform: translateY(-6px); transition-delay: 0.1s; }
.menu-cta:hover .menu-cta-icons span:nth-child(4) { transform: translateY(-6px); transition-delay: 0.15s; }
.btn-menu-cta { font-size: 1rem; padding: 16px 34px; }

/* Menu modal */
.menu-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-soft), visibility 0.35s;
}
.menu-modal.open { visibility: visible; opacity: 1; }
.menu-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 17, 13, 0.6);
  backdrop-filter: blur(3px);
}
.menu-modal-panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 960px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-strong);
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform 0.4s var(--ease-smooth), opacity 0.4s var(--ease-smooth);
}
.menu-modal.open .menu-modal-panel { transform: translateY(0) scale(1); opacity: 1; }
.menu-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(43,27,23,0.08);
  flex-shrink: 0;
}
.menu-modal-header h3 { margin: 0; font-size: 1.3rem; }
.menu-modal-close {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(43,27,23,0.12);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease-soft), transform 0.3s var(--ease-out);
}
.menu-modal-close:hover { background: var(--terracota); color: var(--white); transform: rotate(90deg); }
.menu-modal-body { padding: 28px; overflow-y: auto; }
.menu-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.menu-tab {
  background: var(--cream);
  border: 1px solid transparent;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.35s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), transform 0.25s var(--ease-out);
  font-family: var(--font-body);
}
.menu-tab:hover { border-color: var(--terracota); color: var(--terracota); transform: translateY(-2px); }
.menu-tab.active {
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: var(--white);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  transition: opacity 0.25s var(--ease-soft);
}
.menu-grid.switching { opacity: 0; }
.menu-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background-color 0.3s var(--ease-soft);
  border: 1px solid rgba(43,27,23,0.06);
}
.menu-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.menu-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.menu-card-icon { font-size: 1.8rem; }
.menu-card h3 { font-size: 1.15rem; margin: 0; color: var(--heading); }
.menu-card-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--terracota);
  white-space: nowrap;
}
.menu-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.menu-card-tags { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(47,110,81,0.12);
  color: var(--jade);
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.tag.spicy { background: rgba(193,68,14,0.12); color: var(--terracota); }
.tag.tag-country { background: rgba(217,164,65,0.18); color: var(--gold); font-weight: 700; }
.menu-note { text-align: center; color: var(--ink-soft); font-size: 0.82rem; margin-top: 36px; }

/* Gallery */
.gallery { padding: 110px 0; background: var(--cream-dark); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.gallery-card {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--white);
  font-weight: 600;
  text-align: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out);
}
.gallery-card:hover { transform: scale(1.03) rotate(-0.5deg); }
.gallery-card .emoji { font-size: 2.6rem; }
.gallery-card span.name { font-family: var(--font-display); font-size: 1.05rem; }
.gallery-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.08) 0 10px, transparent 10px 20px);
}

/* Reel (photo/video carousel) */
.reel { padding: 110px 0; background: var(--surface); }
.reel-wrapper { display: flex; align-items: center; gap: 12px; }
.reel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 20px;
  flex: 1;
  scrollbar-width: thin;
}
.reel-track::-webkit-scrollbar { height: 6px; }
.reel-track::-webkit-scrollbar-thumb { background: rgba(43,27,23,0.2); border-radius: 999px; }
.reel-card {
  flex: 0 0 190px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: var(--white);
  transition: transform 0.4s var(--ease-out);
}
.reel-card:hover { transform: translateY(-4px) scale(1.02); }
.reel-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.08) 0 10px, transparent 10px 20px);
}
.reel-card .reel-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.8rem; }
.reel-card .reel-name { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; line-height: 1.25; }
.reel-card .play-badge {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.8rem;
}
.reel-arrow {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(43,27,23,0.12);
  background: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--terracota);
  line-height: 1;
}
.reel-arrow:hover { border-color: var(--terracota); }

/* Testimonials */
.testimonials { padding: 110px 0; background: var(--surface); }
.testimonial-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.testimonial-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 28px;
  position: relative;
}
.testimonial-card .stars { color: var(--gold); margin-bottom: 10px; letter-spacing: 2px; }
.testimonial-card p.quote { font-style: italic; color: var(--ink-soft); }
.testimonial-author { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-display);
}
.testimonial-author strong { display: block; font-size: 0.9rem; }
.testimonial-author span { font-size: 0.78rem; color: var(--ink-soft); }

/* Reservations */
.reservations { padding: 110px 0; background: linear-gradient(180deg, var(--cream-dark), var(--cream)); }
.reservations-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.info-list { list-style: none; margin: 28px 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-icon { font-size: 1.3rem; }
.info-list strong { display: block; font-size: 0.85rem; color: var(--heading); }
.info-list span { color: var(--ink-soft); font-size: 0.92rem; }

.reservation-form {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reservation-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.reservation-form input, .reservation-form textarea {
  font-family: var(--font-body);
  border: 1px solid rgba(43,27,23,0.15);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--cream);
  resize: vertical;
}
.reservation-form input:focus, .reservation-form textarea:focus {
  outline: none;
  border-color: var(--terracota);
}
.form-status {
  background: rgba(47,110,81,0.12);
  color: var(--jade);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
}
.form-hint {
  margin: -6px 0 0;
  font-size: 0.8rem;
  color: var(--terracota);
  background: rgba(193,68,14,0.1);
  padding: 8px 12px;
  border-radius: 8px;
}
.form-note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-soft);
  text-align: center;
}
.honeypot-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.reservation-form button[disabled] { opacity: 0.65; cursor: not-allowed; transform: none !important; }

/* FAQ */
.faq { padding: 110px 0; background: var(--cream); }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid rgba(43,27,23,0.08);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft);
}
.faq-item.open { border-color: rgba(193,68,14,0.25); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--heading);
}
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(193,68,14,0.12);
  color: var(--terracota);
  transition: transform 0.4s var(--ease-out);
}
.faq-item.open .faq-question .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-soft), opacity 0.3s var(--ease-soft), padding 0.4s var(--ease-soft);
  color: var(--ink-soft);
  font-size: 0.92rem;
  padding: 0 24px;
}
.faq-item.open .faq-answer { opacity: 1; }
.faq-item.open .faq-answer { max-height: 260px; padding: 0 24px 22px; }

/* Footer */
.site-footer { background: var(--bar-bg); color: var(--bar-text); padding: 56px 0 0; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-light); }
.footer-brand p { margin: 4px 0 0; color: rgba(251,243,231,0.7); font-size: 0.88rem; }
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
}
.footer-social a:hover { background: var(--terracota); transform: translateY(-3px); }
.footer-lang { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.footer-lang select {
  background: rgba(255,255,255,0.08);
  color: var(--bar-text);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-body);
}
.footer-bottom { text-align: center; padding: 20px 0; font-size: 0.78rem; color: rgba(251,243,231,0.55); }
.footer-credit { margin: 6px 0 0; }
.footer-credit a { color: var(--gold-light); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--gold); }

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.3s var(--ease-soft);
  z-index: 90;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.back-to-top:hover { box-shadow: var(--shadow-strong); transform: translateY(-3px) scale(1.05); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }

/* Side-entering panels */
.reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.85s var(--ease-smooth), transform 0.85s var(--ease-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-left.in-view, .reveal-right.in-view { opacity: 1; transform: translateX(0); }

/* "Reducir movimiento" pide quitar el MOVIMIENTO, no toda la animación.
   Antes se anulaba todo y el sitio aparecía de golpe en cualquier móvil con
   ese ajuste activado (muy habitual en iPhone). Ahora se conserva el
   fundido y solo se elimina el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition-property: opacity !important;
    transition-duration: 0.5s !important;
    transform: none !important;
  }
  .scroll-cue span,
  #musicToggle.playing .icon-music-on { animation: none !important; }
  .menu-cta:hover .menu-cta-icons span,
  .highlight-card:hover,
  .menu-card:hover,
  .gallery-card:hover,
  .reel-card:hover { transform: none !important; }
}

/* Responsive */
@media (max-width: 960px) {
  .about-inner, .reservations-inner { grid-template-columns: 1fr; }
  .about-visual { order: 2; }
}

@media (max-width: 800px) {
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 78%;
    max-width: 320px;
    background: var(--surface);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 32px 32px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-smooth);
    box-shadow: var(--shadow-strong);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
    transition-delay: var(--nav-delay, 0ms);
  }
  .main-nav.open a { opacity: 1; transform: translateX(0); }
  .hamburger { display: flex; }
  .nav-cta { width: 100%; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .header-inner { flex-wrap: nowrap; }
  .lang-toggle span:not(:first-child) { display: none; }
  .reel-arrow { display: none; }
  .header-actions { gap: 6px; }
  .header-inner { gap: 10px; }
  .icon-toggle { width: 34px; height: 34px; }
  .lang-toggle { padding: 7px 9px; gap: 2px; }
}

@media (max-width: 480px) {
  .flag-blend { font-size: 2.4rem; gap: 10px; }
  .reservation-form { padding: 24px; }
  .container { padding: 0 16px; }
  .logo { gap: 6px; }
  .logo-mark svg { width: 28px; height: 28px; }
  .logo-text strong { font-size: 0.82rem; line-height: 1.1; }
  .logo-text em { display: none; }
  .lang-toggle svg { display: none; }
  .menu-cta-icons { gap: 10px; font-size: 1.7rem; }
  .menu-cta-icons span { width: 50px; height: 50px; }
  .menu-modal { padding: 0; }
  .menu-modal-panel { max-height: 100vh; height: 100%; border-radius: 0; max-width: none; }
  .menu-modal-body { padding: 20px; }
}

/* ==========================================================================
   Auditoría de calidad para el mercado coreano + vitrina de menú
   ========================================================================== */

/* Tipografía coreana: sin keep-all, el hangul se parte a mitad de palabra.
   Es el defecto más visible de un sitio "traducido" en Corea. */
:root[lang="ko"] body,
:root[lang="ja"] body,
:root[lang="zh"] body {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.75;
}
:root[lang="ko"] h1,
:root[lang="ko"] h2,
:root[lang="ko"] h3,
:root[lang="ja"] h1,
:root[lang="ja"] h2,
:root[lang="ja"] h3,
:root[lang="zh"] h1,
:root[lang="zh"] h2,
:root[lang="zh"] h3 {
  word-break: keep-all;
  line-height: 1.35;
}
:root[lang="ko"] .hero h1 { line-height: 1.28; }

/* Objetivos táctiles: mínimo 44px recomendado para móvil. */
.menu-tab, .faq-question, .lang-menu li, .btn, .icon-toggle,
.reel-arrow, .footer-social a, .menu-modal-close { min-height: 44px; }

/* Vitrina: los 8 platos destacados en la página */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.menu-card-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.menu-card-heading h3 { min-width: 0; }
.menu-cat-note {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 0.84rem;
  color: var(--terracota);
  background: rgba(193, 68, 14, 0.09);
  padding: 10px 14px;
  border-radius: 10px;
}
.menu-cta-hint {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Barra fija inferior en móvil: convención habitual en sitios de
   restaurantes coreanos (llamar / cómo llegar / reservar a un toque). */
.mobile-bar { display: none; }
@media (max-width: 800px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    background: var(--surface);
    border-top: 1px solid rgba(43, 27, 23, 0.1);
    box-shadow: 0 -6px 24px rgba(43, 27, 23, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 8px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
  }
  .mobile-bar-btn svg { width: 20px; height: 20px; }
  .mobile-bar-btn:active { background: var(--cream); }
  .mobile-bar-reserve { color: var(--white); background: linear-gradient(135deg, var(--terracota), var(--gochujang)); }
  .mobile-bar-reserve:active { background: var(--gochujang); }
  /* Deja aire para que la barra no tape el final del contenido */
  body { padding-bottom: 58px; }
  .back-to-top { bottom: 74px; }
}

/* Teléfono tocable (tap-to-call en móvil) */
.info-link {
  color: var(--terracota);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease-soft);
}
.info-link:hover { border-color: var(--terracota); }

/* Vitrina destacada: tarjeta con más presencia que las del modal */
.featured-grid .menu-card {
  background: var(--cream);
  border: 1px solid rgba(43, 27, 23, 0.07);
  position: relative;
  overflow: hidden;
}
.featured-grid .menu-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--terracota), var(--gochujang));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--ease-out);
}
.featured-grid .menu-card:hover::after { transform: scaleY(1); }
.featured-grid .menu-card-price { font-size: 1.05rem; }

@media (max-width: 600px) {
  .featured-grid { grid-template-columns: 1fr; gap: 14px; }
  .featured-grid .menu-card { padding: 20px; }
  .menu-cta { gap: 14px; }
  .btn-menu-cta { width: 100%; justify-content: center; }
}

/* El drawer móvil cerrado y las entradas laterales quedan fuera del viewport.
   body ya bloquea el scroll horizontal; `clip` en html evita además que
   inflen scrollWidth (lo que auditorías tipo Lighthouse marcan como overflow).
   Se usa `clip` y no `hidden` para no romper el header sticky. */
html { overflow-x: clip; }

/* En móvil, una entrada lateral de 44px se sale de pantalla en equipos
   angostos: se acorta el recorrido para que la animación quede contenida. */
@media (max-width: 600px) {
  .reveal-left { transform: translateX(-18px); }
  .reveal-right { transform: translateX(18px); }
}

/* En móvil, 11 categorías apiladas llenaban la pantalla antes del primer
   plato. Se convierten en una tira horizontal deslizable y fija arriba,
   que es el patrón estándar de menús móviles en Corea. */
@media (max-width: 800px) {
  .menu-modal-body { padding: 0 16px 20px; }
  .menu-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0 -16px 20px;
    padding: 14px 16px;
    background: var(--surface);
    box-shadow: 0 6px 14px -10px rgba(43, 27, 23, 0.5);
  }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .menu-tab:hover { transform: none; }
  .menu-modal-header { padding: 18px 16px; }
  .menu-modal-header h3 { font-size: 1.05rem; }
}

/* Los nombres de plato se partían en 3 líneas al competir con el precio.
   Se les da algo más de ancho y se equilibra el salto de línea. */
.featured-grid { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
.menu-card h3 { text-wrap: balance; }
.menu-card-heading { align-items: flex-start; gap: 8px; }
.menu-card-icon { font-size: 1.4rem; line-height: 1.2; flex-shrink: 0; }
.menu-card-price { flex-shrink: 0; align-self: flex-start; }

/* ==========================================================================
   Fotos reales del local
   ========================================================================== */

/* Foto del salón detrás del degradado del hero: da contexto real
   (local lleno, ambiente) sin restarle legibilidad al titular. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/photo_3-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Velo de color encima de la foto: deja ver el local pero garantiza
   el contraste del titular en blanco. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(217, 164, 65, 0.30), transparent 45%),
    linear-gradient(135deg, rgba(110, 20, 36, 0.93), rgba(193, 68, 14, 0.84) 60%, rgba(224, 89, 42, 0.80));
  z-index: 1;
}
.hero-pattern { z-index: 2; }
.hero-inner { z-index: 3; }
.scroll-cue { z-index: 3; }

/* Galería */
.gallery-card {
  margin: 0;
  padding: 0;
  display: block;
  background: var(--cream-dark);
}
.gallery-card::before { content: none; }
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.gallery-card:hover img { transform: scale(1.06); }
.gallery-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 14px;
  background: linear-gradient(transparent, rgba(23, 17, 13, 0.82));
  color: #fff;
  text-align: left;
}
.gallery-card figcaption .name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Carrusel de momentos */
.reel-card { margin: 0; padding: 0; background: var(--cream-dark); }
.reel-card::before { content: none; }
.reel-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-card .reel-name {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 30px 14px 12px;
  margin: auto 0 0;
  background: linear-gradient(transparent, rgba(23, 17, 13, 0.85));
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Banderas SVG, transiciones más amplias y color
   ========================================================================== */

/* Bandera dibujada: siempre se ve igual en iOS, Android y Windows */
.flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(43, 27, 23, 0.16);
  overflow: hidden;
}
.tag-country { display: inline-flex; align-items: center; gap: 6px; }

.flag-blend { gap: 12px; }
.blend-flag {
  display: block;
  animation: flagFloat 4.5s var(--ease-soft) infinite;
  animation-delay: calc(var(--i) * 0.35s);
}
.blend-flag .flag {
  width: 46px;
  height: 31px;
  border-radius: 5px;
  box-shadow: 0 6px 16px rgba(43, 27, 23, 0.22);
}
@keyframes flagFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-7px) rotate(1deg); }
}

/* --- Transiciones más lentas y con más recorrido ---
   Antes duraban 0.8s con 28px; se sentían apuradas y cortas. */
.reveal {
  transform: translateY(46px) scale(0.97);
  transition-duration: 1.25s;
}
.reveal-left  { transform: translateX(-90px); }
.reveal-right { transform: translateX(90px); }
.reveal-left, .reveal-right { transition-duration: 1.35s; }

/* Franja de color viva detrás de las secciones claras */
.menu-section, .testimonials {
  position: relative;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(217, 164, 65, 0.16), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(193, 68, 14, 0.12), transparent 55%),
    var(--surface);
}
.faq {
  background:
    radial-gradient(ellipse at 85% 10%, rgba(47, 110, 81, 0.12), transparent 50%),
    var(--cream);
}

@media (max-width: 600px) {
  .reveal { transform: translateY(32px) scale(0.98); }
  .reveal-left  { transform: translateX(-34px); }
  .reveal-right { transform: translateX(34px); }
  .blend-flag .flag { width: 38px; height: 26px; }
}

/* ==========================================================================
   Reseñas de Google y Naver
   ========================================================================== */
.reviews { padding: 110px 0; overflow: hidden; }

.review-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 640px;
  margin: 0 auto 44px;
}
.platform-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.1);
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.platform-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.platform-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  flex-shrink: 0;
}
.platform-badge.naver { background: #03C75A; }
.platform-badge.google { background: #4285F4; }
.platform-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.platform-meta strong { font-size: 0.95rem; color: var(--heading); }
.platform-stars, .review-stars { color: var(--gold); letter-spacing: 2px; font-size: 0.85rem; }
.platform-go { color: var(--terracota); font-size: 1.2rem; transition: transform 0.35s var(--ease-out); }
.platform-card:hover .platform-go { transform: translateX(5px); }

/* Cinta deslizante */
.reviews-viewport {
  position: relative;
  margin: 0 -24px;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 0 24px;
  animation: reviewsScroll 46s linear infinite;
}
.reviews-viewport:hover .reviews-track,
.reviews-track:active { animation-play-state: paused; }
@keyframes reviewsScroll {
  from { transform: translateX(0); }
  /* La cinta lleva el listado duplicado: al recorrer la mitad, vuelve a
     empezar sin que se note el corte. */
  to   { transform: translateX(-50%); }
}

.review-card {
  flex: 0 0 300px;
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.09);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.review-head { display: flex; align-items: center; gap: 10px; }
.review-head .platform-badge { width: 30px; height: 30px; border-radius: 9px; font-size: 0.85rem; }
.review-sample {
  margin-left: auto;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-soft);
  background: rgba(43, 27, 23, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
}
.review-text { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.7; flex: 1; }
.review-foot { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-who strong { font-size: 0.88rem; }
.review-who span { font-size: 0.76rem; color: var(--ink-soft); }
.reviews-note { text-align: center; color: var(--ink-soft); font-size: 0.78rem; margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; overflow-x: auto; }
}
@media (max-width: 600px) {
  .review-card { flex-basis: 260px; padding: 20px; }
  .reviews-viewport { margin: 0 -16px; }
  .reviews-track { padding: 0 16px; }
}

/* ==========================================================================
   Movimiento y color: fondos vivos, hover en tarjetas, mosaico y marquesina
   ========================================================================== */

/* --- Animaciones aún más lentas y suaves --- */
.reveal { transition-duration: 1.6s; }
.reveal-left, .reveal-right { transition-duration: 1.7s; }
.reveal-left  { transform: translateX(-110px); }
.reveal-right { transform: translateX(110px); }

/* --- Fondo con movimiento propio: el estático se veía plano --- */
.highlights, .about, .gallery, .reviews, .faq, .reservations { position: relative; overflow: hidden; }
.highlights::before, .about::before, .gallery::before,
.reviews::before, .faq::before, .reservations::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 26%, rgba(193, 68, 14, 0.16), transparent 62%),
    radial-gradient(34% 38% at 82% 70%, rgba(217, 164, 65, 0.20), transparent 62%),
    radial-gradient(30% 34% at 62% 18%, rgba(47, 110, 81, 0.13), transparent 62%);
  animation: auroraDrift 34s ease-in-out infinite alternate;
}
.highlights > *, .about > *, .gallery > *,
.reviews > *, .faq > *, .reservations > * { position: relative; z-index: 1; }
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1);      }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.1); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.05); }
}
/* El hero respira lentamente */
.hero::after { animation: heroBreathe 22s ease-in-out infinite alternate; }
@keyframes heroBreathe {
  from { opacity: 1;    transform: scale(1);    }
  to   { opacity: 0.92; transform: scale(1.04); }
}

/* --- Highlights: iconos dibujados + interacción --- */
.highlight-card {
  cursor: default;
  outline: none;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out),
              border-color 0.5s var(--ease-soft), background 0.5s var(--ease-soft);
}
.highlight-card:hover, .highlight-card:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 22px 46px rgba(43, 27, 23, 0.18);
  border-color: rgba(193, 68, 14, 0.4);
}
.highlight-icon {
  color: var(--terracota);
  transition: transform 0.6s var(--ease-out), background 0.5s var(--ease-soft), color 0.4s var(--ease-soft);
}
.highlight-icon svg { width: 26px; height: 26px; }
.highlight-card:hover .highlight-icon,
.highlight-card:focus-visible .highlight-icon {
  transform: translateY(-4px) rotate(-6deg) scale(1.1);
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: #fff;
}
.highlight-card h3 { transition: color 0.4s var(--ease-soft); }
.highlight-card:hover h3 { color: var(--terracota); }

/* --- Vitrina de platos: sin precio, con relieve al tocar --- */
.featured-card {
  cursor: pointer;
  outline: none;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.4s var(--ease-soft);
}
.featured-card:hover, .featured-card:focus-visible {
  transform: translateY(-9px) scale(1.015);
  box-shadow: 0 24px 48px rgba(43, 27, 23, 0.2);
  border-color: rgba(193, 68, 14, 0.35);
}
.featured-card h3 { transition: color 0.4s var(--ease-soft); }
.featured-card:hover h3 { color: var(--terracota); }

/* --- Galería en mosaico --- */
.gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
}
.gallery-card {
  aspect-ratio: auto;
  grid-column: span 1;
  grid-row: span 1;
  outline: none;
  transition: transform 0.65s var(--ease-out), box-shadow 0.65s var(--ease-out);
}
.gallery-card.is-tall { grid-row: span 2; }
.gallery-card.is-wide { grid-column: span 2; }
.gallery-card:hover, .gallery-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(43, 27, 23, 0.26);
  z-index: 2;
}
.gallery-card img { transition: transform 0.9s var(--ease-out); }
.gallery-card:hover img { transform: scale(1.09); }
.gallery-card figcaption {
  transform: translateY(6px);
  opacity: 0.94;
  transition: transform 0.55s var(--ease-out), opacity 0.45s var(--ease-soft);
}
.gallery-card:hover figcaption { transform: translateY(0); opacity: 1; }

@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } }
@media (max-width: 480px) { .gallery-grid { grid-auto-rows: 140px; gap: 10px; } }

/* --- Momentos: marquesina continua de verdad --- */
.reel-wrapper { overflow: hidden; }
.reel-track {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  animation: reelScroll 55s linear infinite;
  transition: transform 0.8s var(--ease-out);
}
.reel-wrapper:hover .reel-track { animation-play-state: paused; }
@keyframes reelScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.reel-card { flex: 0 0 210px; }
.reel-card img { transition: transform 0.9s var(--ease-out); }
.reel-card:hover img { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .highlights::before, .about::before, .gallery::before,
  .reviews::before, .faq::before, .reservations::before,
  .hero::after, .reel-track, .blend-flag { animation: none !important; }
  .reel-track { overflow-x: auto; }
}

/* Sin huecos en el mosaico: las tarjetas altas/anchas dejaban un vacío */
.gallery-grid { grid-auto-flow: dense; }

/* ==========================================================================
   FAQ rediseñado
   ========================================================================== */
.faq-list { max-width: 820px; gap: 12px; }

.faq-item {
  position: relative;
  border: 1px solid rgba(43, 27, 23, 0.09);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(43, 27, 23, 0.04);
  transition: box-shadow 0.5s var(--ease-out), border-color 0.4s var(--ease-soft),
              transform 0.5s var(--ease-out);
}
.faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--terracota), var(--gochujang));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s var(--ease-out);
}
.faq-item:hover { transform: translateX(3px); box-shadow: 0 10px 26px rgba(43, 27, 23, 0.1); }
.faq-item.open {
  border-color: rgba(193, 68, 14, 0.3);
  box-shadow: 0 14px 34px rgba(43, 27, 23, 0.12);
}
.faq-item.open::before { transform: scaleY(1); }

.faq-question {
  gap: 14px;
  padding: 22px 24px;
  align-items: center;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 600;
}
.faq-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--terracota);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease-out);
}
.faq-item.open .faq-num { opacity: 1; transform: scale(1.15); }
.faq-q { flex: 1; min-width: 0; }
.faq-item.open .faq-q { color: var(--heading); }

.faq-question .faq-icon {
  width: 30px; height: 30px;
  background: var(--cream);
  color: var(--ink-soft);
  transition: transform 0.5s var(--ease-out), background 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}
.faq-question .faq-icon svg { width: 16px; height: 16px; }
.faq-item.open .faq-question .faq-icon {
  transform: rotate(180deg);
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: #fff;
}

/* La altura se anima con grid en vez de max-height: así no hay un tope fijo
   que recorte respuestas largas (el coreano ocupaba más de los 260px previos). */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  padding: 0;
  opacity: 0;
  transition: grid-template-rows 0.55s var(--ease-out), opacity 0.4s var(--ease-soft);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; opacity: 1; padding: 0; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p {
  margin: 0;
  padding: 0 24px 24px 62px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.75;
}

@media (max-width: 600px) {
  .faq-question { padding: 18px 16px; gap: 10px; font-size: 0.94rem; }
  .faq-answer-inner p { padding: 0 16px 20px 46px; font-size: 0.9rem; }
}

/* ==========================================================================
   Paneles horizontales con más carácter
   El motivo se inspira en los textiles andinos que aparecen en las fotos
   del propio local (los manteles de las mesas), en vez de un degradado
   cualquiera.
   ========================================================================== */
.highlights::after, .gallery::after, .reviews::after, .faq::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      var(--terracota) 0 14px, var(--gold) 14px 22px,
      var(--jade) 22px 30px, var(--gochujang) 30px 44px);
  opacity: 0.85;
}
.highlights::after, .reviews::after { top: 0; }
.gallery::after, .faq::after { bottom: 0; }

/* Textura tejida muy tenue sobre las bandas claras */
.highlights, .gallery, .reviews, .faq, .reservations {
  background-image:
    repeating-linear-gradient(45deg, rgba(193,68,14,0.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(47,110,81,0.03) 0 2px, transparent 2px 9px);
}

/* Separadores diagonales entre secciones: cortan la monotonía del apilado */
.gallery, .reviews {
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 calc(100% - 2.2vw));
  margin-top: -2vw;
  padding-top: calc(110px + 2vw);
  padding-bottom: calc(110px + 2vw);
}
@media (max-width: 700px) {
  .gallery, .reviews { clip-path: none; margin-top: 0; padding: 90px 0; }
}

/* ==========================================================================
   Reservas con presentación más formal
   ========================================================================== */
.reservation-policy {
  margin: 22px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: rgba(217, 164, 65, 0.12);
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.65;
}

.contact-buttons { gap: 10px; margin-top: 22px; }
.btn-map {
  flex: 1 1 auto;
  min-width: 144px;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(43, 27, 23, 0.14);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), filter 0.3s var(--ease-soft);
}
.btn-map:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43, 27, 23, 0.22); filter: brightness(1.04); }
.btn-map:active { transform: translateY(-1px); }
.btn-map svg, .btn-badge { flex-shrink: 0; }

.reservation-form { border: 1px solid rgba(43, 27, 23, 0.08); }
.reservation-form .btn-primary { padding: 16px 30px; border-radius: 14px; font-size: 1rem; }
.info-list li {
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(43, 27, 23, 0.14);
}
.info-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* ==========================================================================
   Fondos reales, banda de highlights festiva, redes, visor de fotos
   y secciones más compactas
   ========================================================================== */

/* Velo que va encima de las fotos de fondo. Se define como componentes RGB
   para poder graduar la opacidad por franjas: los bordes de cada panel dejan
   ver la foto y el centro queda opaco para que el texto se lea sin esfuerzo. */
:root { --veil-rgb: 251, 243, 231; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --veil-rgb: 20, 14, 11; } }
:root[data-theme="dark"] { --veil-rgb: 20, 14, 11; }

.about, .gallery, .reviews, .faq, .reservations, .social {
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(45deg, rgba(193, 68, 14, 0.04) 0 2px, transparent 2px 10px),
    linear-gradient(180deg,
      rgba(var(--veil-rgb), 0.55) 0%,
      rgba(var(--veil-rgb), 0.955) 20%,
      rgba(var(--veil-rgb), 0.975) 80%,
      rgba(var(--veil-rgb), 0.55) 100%),
    var(--panel-photo, none);
  background-size: auto, cover, cover;
  background-position: center, center, center;
  background-repeat: repeat, no-repeat, no-repeat;
}
.about       { --panel-photo: url('../img/photo_5-bg.jpg'); }
.gallery     { --panel-photo: url('../img/photo_2-bg.jpg'); }
.social      { --panel-photo: url('../img/photo_1_2026-08-15_17-10-19.jpg'); }
.reviews     { --panel-photo: url('../img/photo_9-bg.jpg'); }
.faq         { --panel-photo: url('../img/photo_11-bg.jpg'); }
.reservations{ --panel-photo: url('../img/photo_4_2026-08-15_17-10-19.jpg'); }

/* La sección del menú conserva su fondo limpio: las tarjetas de plato ya
   aportan bastante, y una foto detrás las ensuciaba. */

/* --------------------------------------------------------------------------
   Banda "Hablamos coreano": deja de ser una franja beige y pasa a ser el
   golpe de color de la página, sobre una foto real del local.
   -------------------------------------------------------------------------- */
.highlights {
  padding: 84px 0 88px;
  color: #FBF3E7;
  background-color: var(--gochujang-dark);
  background-image:
    linear-gradient(135deg, rgba(110, 20, 36, 0.93), rgba(193, 68, 14, 0.84) 52%, rgba(142, 31, 47, 0.93)),
    url('../img/photo_9-bg.jpg');
  background-size: cover, cover;
  background-position: center, center;
}
.highlights::before {
  background:
    radial-gradient(40% 46% at 20% 24%, rgba(241, 201, 123, 0.28), transparent 62%),
    radial-gradient(36% 40% at 82% 74%, rgba(47, 110, 81, 0.30), transparent 62%);
}
.highlights-inner { gap: 18px; }

.highlight-card {
  position: relative;
  overflow: hidden;
  padding: 30px 22px 28px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
/* Foco de luz que sigue al dedo o al cursor */
.highlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.20), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
  pointer-events: none;
}
.highlight-card:hover::before, .highlight-card:focus-visible::before { opacity: 1; }
/* Destello que cruza la tarjeta al entrar el puntero */
.highlight-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s var(--ease-out);
  pointer-events: none;
}
.highlight-card:hover::after, .highlight-card:focus-visible::after { left: 130%; }

.highlight-card > * { position: relative; z-index: 1; }
.highlight-card h3 { color: #FFFFFF; font-size: 1.08rem; }
.highlight-card p { color: rgba(251, 243, 231, 0.84); }
.highlight-card:hover, .highlight-card:focus-visible {
  transform: translateY(-10px);
  border-color: rgba(241, 201, 123, 0.75);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.32);
}
.highlight-card:active { transform: translateY(-4px) scale(0.99); }
.highlight-card:hover h3, .highlight-card:focus-visible h3 { color: var(--gold-light); }
.highlight-icon {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--gold-light);
}
.highlight-card:hover .highlight-icon, .highlight-card:focus-visible .highlight-icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color: transparent;
  color: var(--gochujang-dark);
}
.highlights::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Galería: mosaico más alto, pie de foto siempre legible y visor al tocar
   -------------------------------------------------------------------------- */
.gallery-grid { grid-auto-rows: 215px; gap: 16px; }
.gallery-card {
  cursor: zoom-in;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 26px rgba(43, 27, 23, 0.14);
}
.gallery-card figcaption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(12, 8, 6, 0.55) 45%, rgba(12, 8, 6, 0.9));
  opacity: 1;
  transform: none;
}
.gallery-card figcaption .name { font-size: 1.02rem; line-height: 1.3; }
.gallery-card figcaption .zoom {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 1rem;
  line-height: 1;
  transform: scale(0.75);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-soft), background 0.35s var(--ease-soft);
}
.gallery-card:hover .zoom, .gallery-card:focus-visible .zoom { transform: scale(1); opacity: 1; }
.gallery-card:hover .zoom { background: var(--terracota); border-color: var(--terracota); }
.gallery-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gallery-hint {
  text-align: center;
  margin: 26px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
@media (max-width: 900px) { .gallery-grid { grid-auto-rows: 180px; } }
@media (max-width: 480px) { .gallery-grid { grid-auto-rows: 155px; gap: 10px; } }

/* Visor a pantalla completa */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-soft), visibility 0.4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(6, 4, 3, 0.94); }
.lightbox-figure {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.5s var(--ease-smooth), opacity 0.4s var(--ease-smooth);
}
.lightbox.open .lightbox-figure { transform: scale(1); opacity: 1; }
.lightbox.swapping .lightbox-figure { opacity: 0.2; transform: scale(0.985); }
.lightbox-figure img {
  max-height: 78vh;
  width: auto;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
.lightbox-figure figcaption {
  color: rgba(251, 243, 231, 0.9);
  font-family: var(--font-display);
  font-size: 1.02rem;
  text-align: center;
}
.lightbox-btn {
  position: absolute;
  z-index: 2;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.10);
  color: #FBF3E7;
  cursor: pointer;
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox-figure img { max-height: 68vh; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* --------------------------------------------------------------------------
   Momentos: banda oscura con los bordes fundidos a negro
   -------------------------------------------------------------------------- */
.reel {
  padding: 96px 0 100px;
  background: linear-gradient(180deg, #0C0806, #171009 45%, #0C0806);
  color: #F3E6D8;
}
.reel .section-head h2 { color: var(--gold-light); }
.reel .section-head .eyebrow { color: var(--gold); }
.reel .section-sub { color: rgba(243, 230, 216, 0.7); }
.reel-wrapper { position: relative; }
.reel-wrapper::before, .reel-wrapper::after {
  content: '';
  position: absolute;
  top: -10px; bottom: -10px;
  width: 16%;
  max-width: 190px;
  z-index: 3;
  pointer-events: none;
}
.reel-wrapper::before { left: 0;  background: linear-gradient(90deg, #0C0806 8%, rgba(12, 8, 6, 0.75) 45%, rgba(12, 8, 6, 0)); }
.reel-wrapper::after  { right: 0; background: linear-gradient(270deg, #0C0806 8%, rgba(12, 8, 6, 0.75) 45%, rgba(12, 8, 6, 0)); }
.reel-card {
  background: #0C0806;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  border-radius: 18px;
}
.reel-arrow {
  position: relative;
  z-index: 4;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--gold-light);
}
.reel-arrow:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   Redes sociales
   -------------------------------------------------------------------------- */
.social { padding: 92px 0; position: relative; overflow: hidden; }
.social-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.social-featured {
  position: relative;
  display: block;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  color: #fff;
}
.social-featured img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.social-featured:hover img { transform: scale(1.06); }
.social-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 8, 6, 0.15) 0%, rgba(12, 8, 6, 0.05) 40%, rgba(12, 8, 6, 0.86) 100%);
}
.social-network {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.social-network svg { width: 22px; height: 22px; }
.social-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px 24px;
}
.social-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--gold-light);
}
.social-caption {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.social-date { font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); }
.social-cta {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 0.35s var(--ease-soft), transform 0.35s var(--ease-out);
}
.social-featured:hover .social-cta { background: rgba(255, 255, 255, 0.3); transform: translateX(3px); }

.social-side { display: flex; flex-direction: column; gap: 16px; }
.social-handle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.1);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.social-handle:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.social-handle-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF);
  color: #fff;
}
.social-handle-icon svg { width: 22px; height: 22px; }
.social-handle-text { display: flex; flex-direction: column; min-width: 0; }
.social-handle-text strong { font-size: 0.98rem; color: var(--heading); }
.social-handle-text span { font-size: 0.8rem; color: var(--ink-soft); }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; }
.social-thumb {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  min-height: 108px;
  box-shadow: 0 8px 20px rgba(43, 27, 23, 0.14);
}
.social-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.5s var(--ease-soft);
}
.social-thumb:hover img { transform: scale(1.1); filter: saturate(1.15); }
.social-more { margin: 0; font-size: 0.78rem; color: var(--ink-soft); text-align: center; }

@media (max-width: 860px) {
  .social-inner { grid-template-columns: 1fr; }
  .social-featured { min-height: 300px; }
}
@media (max-width: 600px) {
  .social { padding: 74px 0; }
  .social-caption { font-size: 1rem; }
  .social-cta { top: auto; bottom: 14px; right: 14px; }
  .social-overlay { padding: 22px 18px 58px; }
}

/* --------------------------------------------------------------------------
   Reseñas: nota media, estrellas reales y aviso de edición
   -------------------------------------------------------------------------- */
.review-platforms {
  grid-template-columns: auto 1fr 1fr;
  max-width: 860px;
  gap: 14px;
  align-items: stretch;
}
.rating-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--terracota), var(--gochujang));
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.rating-badge strong { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }
.rating-badge .review-stars { color: var(--gold-light); font-size: 0.8rem; }
.rating-meta { font-size: 0.72rem; opacity: 0.85; }
.platform-go-label { font-size: 0.78rem; color: var(--ink-soft); }
.star-off { opacity: 0.28; }
.review-card { border-radius: 18px; }
.review-text::before { content: '“'; font-family: var(--font-display); color: var(--gold); margin-right: 2px; }
.review-text::after { content: '”'; font-family: var(--font-display); color: var(--gold); margin-left: 2px; }

/* Aviso dirigido al restaurante, no al cliente: se ve como una tarea
   pendiente y desaparece solo cuando ya no queda ninguna reseña de ejemplo. */
.editor-note {
  max-width: 620px;
  margin: 32px auto 0;
  padding: 12px 16px;
  border: 1px dashed rgba(193, 68, 14, 0.5);
  border-radius: 12px;
  background: rgba(193, 68, 14, 0.07);
  color: var(--terracota);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 760px) {
  .review-platforms { grid-template-columns: 1fr; max-width: 420px; }
  .rating-badge { flex-direction: row; gap: 12px; padding: 12px 18px; }
  .rating-badge strong { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Reservas y FAQ: mismo contenido, mucho menos alto
   -------------------------------------------------------------------------- */
.reservations { padding: 78px 0 86px; }
.reservations .section-head { margin-bottom: 34px; }
.reservations-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 26px;
  align-items: start;
}
.reservations-copy {
  padding: 24px 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.08);
  box-shadow: var(--shadow-soft);
}
.info-list { margin: 0; gap: 12px; }
.info-list li { padding-bottom: 12px; gap: 12px; align-items: center; }
.info-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(193, 68, 14, 0.1);
  color: var(--terracota);
  font-size: 0;
}
.info-icon svg { width: 18px; height: 18px; }
.info-list strong { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); }
.info-list li > div > span { font-size: 0.88rem; color: var(--ink); }
.reservation-policy { margin: 16px 0 0; padding: 11px 14px; font-size: 0.8rem; }
.contact-buttons { margin-top: 16px; gap: 8px; }
.btn-map { min-width: 0; flex: 1 1 46%; padding: 11px 12px; font-size: 0.82rem; border-radius: 12px; }
.contact-note { margin-top: 12px; font-size: 0.72rem; }

.reservation-form { padding: 26px; gap: 13px; border-radius: var(--radius-lg); }
.form-row { gap: 13px; }
.reservation-form label { font-size: 0.78rem; gap: 5px; }
.reservation-form input, .reservation-form textarea { padding: 10px 13px; font-size: 0.9rem; border-radius: 9px; }
.reservation-form .btn-primary { padding: 14px 26px; font-size: 0.95rem; }
.form-note { font-size: 0.72rem; }

@media (max-width: 960px) {
  .reservations-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .reservations { padding: 66px 0 74px; }
  .reservations-copy { padding: 20px; }
  .reservation-form { padding: 20px; }
  .btn-map { flex: 1 1 100%; }
}

.faq { padding: 78px 0; }
.faq .section-head { margin-bottom: 32px; }
.faq-list { max-width: 720px; gap: 10px; }
.faq-question { padding: 17px 20px; font-size: 0.95rem; }
.faq-answer-inner p { padding: 0 20px 20px 54px; font-size: 0.9rem; }
@media (max-width: 600px) {
  .faq { padding: 62px 0; }
  .faq-question { padding: 15px 14px; font-size: 0.9rem; }
  .faq-answer-inner p { padding: 0 14px 17px 42px; font-size: 0.87rem; }
}

/* Recorte de alturas generales: la página era demasiado larga en móvil */
.about { padding: 92px 0; }
.menu-section { padding: 84px 0; }
.gallery, .reviews { padding-top: calc(88px + 2vw); padding-bottom: calc(88px + 2vw); }
@media (max-width: 700px) {
  .gallery, .reviews { padding: 72px 0; }
  .highlights { padding: 64px 0 68px; }
  .about { padding: 72px 0; }
  .menu-section { padding: 68px 0; }
  .reel { padding: 72px 0 76px; }
}

/* --------------------------------------------------------------------------
   Transiciones: entrada con un punto de desenfoque, que suaviza el aterrizaje
   -------------------------------------------------------------------------- */
.reveal, .reveal-left, .reveal-right {
  filter: blur(6px);
  transition-property: opacity, transform, filter;
  transition-timing-function: var(--ease-smooth);
}
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view { filter: blur(0); }
.section-head h2 { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition-property: opacity !important;
    filter: none !important;
  }
  .highlight-card::after, .social-featured img, .social-thumb img { transition: none !important; }
}

/* ==========================================================================
   Ajustes finales de este pase
   ========================================================================== */

/* Foto de fondo por panel: se reparten para que no se repita ninguna cerca */
.social       { --panel-photo: url('../img/photo_6-bg.jpg'); }
.faq          { --panel-photo: url('../img/photo_10-bg.jpg'); }
.reservations { --panel-photo: url('../img/photo_11-bg.jpg'); }

/* El velo del hero tapaba casi por completo el local. Se aclara para que se
   reconozca el sitio y el contraste del titular se sostiene con un degradado
   oscuro por debajo, no subiendo la opacidad del color. */
.hero::after {
  background:
    radial-gradient(circle at 15% 18%, rgba(217, 164, 65, 0.26), transparent 48%),
    linear-gradient(180deg, rgba(12, 8, 6, 0.30), rgba(12, 8, 6, 0.10) 45%, rgba(12, 8, 6, 0.52)),
    linear-gradient(135deg, rgba(110, 20, 36, 0.80), rgba(193, 68, 14, 0.62) 58%, rgba(224, 89, 42, 0.58));
}
.hero-pattern { opacity: 0.10; }

/* El desenfoque de entrada es precioso en tarjetas y textos normales, pero en
   un titular de 4 rem el navegador lo rasteriza a baja resolución y se ve
   sucio mientras dura la transición. */
.hero .reveal { filter: none; }

/* Franja de highlights: un punto más profunda para que las tarjetas de vidrio
   despeguen del fondo. */
.highlights {
  background-image:
    linear-gradient(150deg, rgba(78, 12, 25, 0.94), rgba(160, 48, 16, 0.80) 50%, rgba(110, 20, 36, 0.94)),
    url('../img/photo_9-bg.jpg');
}

/* En móvil, cuatro botones de contacto a ancho completo alargaban la sección
   sin necesidad: caben de dos en dos. */
@media (max-width: 600px) {
  .btn-map { flex: 1 1 calc(50% - 4px); padding: 12px 8px; font-size: 0.78rem; }
}

/* ==========================================================================
   Ubicación: mapa real + tarjeta de cómo llegar
   ========================================================================== */
.location {
  padding: 84px 0 90px;
  position: relative;
  overflow: hidden;
  --panel-photo: url('../img/photo_12-bg.jpg');
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(45deg, rgba(193, 68, 14, 0.04) 0 2px, transparent 2px 10px),
    linear-gradient(180deg,
      rgba(var(--veil-rgb), 0.55) 0%,
      rgba(var(--veil-rgb), 0.955) 20%,
      rgba(var(--veil-rgb), 0.975) 80%,
      rgba(var(--veil-rgb), 0.55) 100%),
    var(--panel-photo);
  background-size: auto, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center;
}
.location .section-head { margin-bottom: 34px; }
.location-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.location-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(43, 27, 23, 0.1);
  background: var(--cream-dark);
}
.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* El mapa de Google llega en tonos muy fríos; se calienta un punto para
     que no rompa con el resto de la página. */
  filter: saturate(0.92) contrast(1.02);
}
:root[data-theme="dark"] .location-map iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.8); }
.location-map-open {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(43, 27, 23, 0.28);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), color 0.5s var(--ease-soft);
}
.location-map-open:hover { transform: translateY(-3px); color: var(--terracota); box-shadow: 0 14px 32px rgba(43, 27, 23, 0.34); }

.location-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.08);
  box-shadow: var(--shadow-soft);
}
.location-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--terracota);
}
.location-address {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.45;
  color: var(--heading);
}
.location-copy {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(193, 68, 14, 0.35);
  background: rgba(193, 68, 14, 0.07);
  color: var(--terracota);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.5s var(--ease-soft), color 0.5s var(--ease-soft),
              border-color 0.5s var(--ease-soft), transform 0.5s var(--ease-out);
}
.location-copy:hover { background: var(--terracota); color: #fff; border-color: var(--terracota); transform: translateY(-2px); }
.location-copy.copied { background: var(--jade); border-color: var(--jade); color: #fff; }

.location-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.location-facts li { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed rgba(43, 27, 23, 0.14); }
.location-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.location-facts strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); }
.location-facts span { font-size: 0.88rem; color: var(--ink); }

.location-apps-label {
  margin: 22px 0 10px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink-soft);
}
.location-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.location-app {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(43, 27, 23, 0.12);
  background: var(--cream);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  min-height: 44px;
  transition: transform 0.55s var(--ease-out), border-color 0.5s var(--ease-soft),
              background 0.5s var(--ease-soft), box-shadow 0.55s var(--ease-out);
}
.location-app:hover { transform: translateY(-3px); border-color: var(--terracota); box-shadow: var(--shadow-soft); }
.location-app svg { width: 17px; height: 17px; flex-shrink: 0; }
.app-badge {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
}
.app-badge.naver { background: #03C75A; }
.app-badge.kakao { background: #FEE500; color: #391B1B; }
.app-badge.google { background: #4285F4; }

@media (max-width: 900px) {
  .location-inner { grid-template-columns: 1fr; }
  .location-map { min-height: 300px; }
}
@media (max-width: 600px) {
  .location { padding: 68px 0 74px; }
  .location-card { padding: 20px; }
  .location-address { font-size: 1.05rem; }
  .location-apps { grid-template-columns: 1fr 1fr; gap: 7px; }
  .location-app { padding: 10px; font-size: 0.76rem; }
}

/* ==========================================================================
   Hover más lento y más suave
   La iluminación y los levantamientos iban demasiado rápido: se alargan para
   que el movimiento se sienta calmado, no nervioso.
   ========================================================================== */
.highlight-card {
  transition: transform 1.05s var(--ease-out), box-shadow 1.05s var(--ease-out),
              border-color 0.9s var(--ease-soft), background 0.9s var(--ease-soft);
}
.highlight-card::before { transition: opacity 1.1s var(--ease-soft); }
.highlight-card::after { transition: left 1.6s var(--ease-out); }
.highlight-icon { transition: transform 1s var(--ease-out), background 0.9s var(--ease-soft), color 0.8s var(--ease-soft); }
.highlight-card h3 { transition: color 0.8s var(--ease-soft); }

.featured-card { transition: transform 0.95s var(--ease-out), box-shadow 0.95s var(--ease-out), border-color 0.8s var(--ease-soft); }
.featured-card h3 { transition: color 0.7s var(--ease-soft); }
.gallery-card { transition: transform 1s var(--ease-out), box-shadow 1s var(--ease-out); }
.gallery-card img { transition: transform 1.4s var(--ease-out); }
.gallery-card figcaption .zoom { transition: transform 0.8s var(--ease-out), opacity 0.6s var(--ease-soft), background 0.6s var(--ease-soft); }
.platform-card { transition: transform 0.85s var(--ease-out), box-shadow 0.85s var(--ease-out); }
.platform-card .platform-go { transition: transform 0.7s var(--ease-out); }
.social-featured img { transition: transform 1.8s var(--ease-out); }
.social-thumb img { transition: transform 1.3s var(--ease-out), filter 0.8s var(--ease-soft); }
.social-handle, .btn-map { transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out), filter 0.6s var(--ease-soft); }
.menu-card { transition: transform 0.85s var(--ease-out), box-shadow 0.85s var(--ease-out), background-color 0.6s var(--ease-soft); }
.faq-item { transition: box-shadow 0.9s var(--ease-out), border-color 0.7s var(--ease-soft), transform 0.9s var(--ease-out); }
.btn { transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), background 0.55s var(--ease-soft), color 0.5s var(--ease-soft); }
.btn:active { transition-duration: 0.12s; }

/* ==========================================================================
   Papel picado y confeti
   ========================================================================== */
.papel-picado {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 2px;
  pointer-events: none;
}
/* La cuerda de la que cuelgan */
.papel-picado::before {
  content: '';
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.papel-flag {
  flex: 1 1 0;
  max-width: 78px;
  transform-origin: top center;
  animation: papelSway 6.5s var(--ease-soft) infinite;
  animation-delay: calc(var(--i) * -0.42s);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}
.papel-flag svg { width: 100%; height: auto; display: block; }
@keyframes papelSway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}
@media (max-width: 620px) {
  .papel-flag { max-width: 52px; }
}

.confetti {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  pointer-events: none;
}
.confetti i {
  position: absolute;
  top: -6vh;
  left: var(--l);
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  background: var(--c);
  opacity: 0;
  animation: confettiFall var(--d) linear infinite;
  animation-delay: var(--delay);
}
@keyframes confettiFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.62; }
  85%  { opacity: 0.62; }
  100% { transform: translate3d(var(--drift), 108vh, 0) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .papel-flag { animation: none !important; }
}

/* ==========================================================================
   Botón "Reservas" del menú superior
   Al ser un enlace en línea, el relleno no empujaba la caja y la píldora
   quedaba pegada al texto y descuadrada respecto al resto del menú.
   ========================================================================== */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(142, 31, 47, 0.28);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), filter 0.4s var(--ease-soft);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(142, 31, 47, 0.38); filter: brightness(1.06); }
.main-nav { gap: 22px; }
@media (max-width: 1100px) and (min-width: 801px) {
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 0.86rem; }
  .nav-cta { padding: 10px 16px; }
}
@media (max-width: 800px) {
  .nav-cta { width: 100%; padding: 14px 20px; }
}

/* ==========================================================================
   Acentos en cursiva
   La Fraunces cursiva da el punto de calidez que le faltaba a los textos:
   se reserva para los eyebrows, los subtítulos y las citas, nunca para los
   bloques largos. En coreano, chino y japonés no se aplica —la cursiva no
   existe en esas escrituras y solo deforma los caracteres.
   ========================================================================== */
.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}
.section-sub, .hero-subtitle { font-size: 1.06rem; }
.review-text { font-style: italic; }
.social-label, .location-label, .location-apps-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 0.88rem;
}
:root[lang="ko"] .eyebrow, :root[lang="zh"] .eyebrow, :root[lang="ja"] .eyebrow,
:root[lang="ko"] .social-label, :root[lang="zh"] .social-label, :root[lang="ja"] .social-label,
:root[lang="ko"] .location-label, :root[lang="zh"] .location-label, :root[lang="ja"] .location-label,
:root[lang="ko"] .location-apps-label, :root[lang="zh"] .location-apps-label, :root[lang="ja"] .location-apps-label,
:root[lang="ko"] .review-text, :root[lang="zh"] .review-text, :root[lang="ja"] .review-text {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
}
:root[lang="ko"] .review-text, :root[lang="zh"] .review-text, :root[lang="ja"] .review-text { font-weight: 500; }

/* ==========================================================================
   Interruptor Google / Naver
   ========================================================================== */
.location-map-wrap { display: flex; flex-direction: column; gap: 12px; }
.map-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cream-dark);
  border: 1px solid rgba(43, 27, 23, 0.1);
}
.map-switch-pill {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(43, 27, 23, 0.14);
  transition: transform 0.55s var(--ease-smooth);
}
.map-switch.is-naver .map-switch-pill { transform: translateX(calc(100% + 4px)); }
.map-switch-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color 0.5s var(--ease-soft);
}
.map-switch-btn.active { color: var(--heading); }
.map-switch-btn .app-badge { transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-soft); opacity: 0.5; }
.map-switch-btn.active .app-badge { opacity: 1; transform: scale(1.06); }

.location-map { flex: 1; }
.location-map.pane-in { animation: paneIn 0.6s var(--ease-smooth); }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Tarjeta de Naver mientras no haya Client ID para el mapa embebido */
.naver-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(3, 199, 90, 0.16), transparent 62%),
    var(--surface);
}
.naver-card { text-align: center; max-width: 340px; }
.naver-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: #03C75A;
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  box-shadow: 0 10px 24px rgba(3, 199, 90, 0.32);
}
.naver-name { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.25rem; color: var(--heading); }
.naver-addr { margin: 0 0 4px; font-size: 0.92rem; color: var(--ink); }
.naver-sub { margin: 0 0 20px; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; }
.naver-cta { background: #03C75A; box-shadow: 0 8px 22px rgba(3, 199, 90, 0.32); }
.naver-cta:hover { background: #02b352; }
.naver-cta .app-badge { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 600px) {
  .map-switch-btn { font-size: 0.8rem; gap: 6px; padding: 10px 8px; }
  .naver-pane { padding: 22px 16px; }
  .naver-name { font-size: 1.1rem; }
}

/* `hidden` tiene que ganar a los `display` de los paneles del mapa */
[hidden] { display: none !important; }

/* El confeti debe adornar, no competir con el texto: piezas algo más
   pequeñas y translúcidas para que las tarjetas blancas sigan mandando. */
.confetti i { mix-blend-mode: multiply; }
:root[data-theme="dark"] .confetti i { mix-blend-mode: screen; }
@keyframes confettiFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.42; }
  82%  { opacity: 0.42; }
  100% { transform: translate3d(var(--drift), 108vh, 0) rotate(540deg); opacity: 0; }
}

/* ==========================================================================
   Botón "Reservas" de la cabecera — arreglo definitivo
   El selector `.main-nav a` (0-1-1) pesa más que `.nav-cta` (0-1-0), así que
   su `padding: 4px 0` ganaba y la píldora salía sin relleno lateral, 9px más
   baja que el resto del menú y desalineada. Hay que subir la especificidad.
   ========================================================================== */
.main-nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  min-height: 40px;
  line-height: 1.15;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(142, 31, 47, 0.28);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), filter 0.4s var(--ease-soft);
}
/* El subrayado animado del resto del menú no debe dibujarse sobre la píldora */
.main-nav a.nav-cta::after { content: none; }
.main-nav a.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(142, 31, 47, 0.38);
  filter: brightness(1.06);
}
.main-nav a.nav-cta:active { transform: translateY(0); transition-duration: 0.12s; }

@media (max-width: 1100px) and (min-width: 801px) {
  .main-nav a.nav-cta { padding: 9px 16px; }
}
@media (max-width: 800px) {
  /* En el menú lateral ocupa todo el ancho, como un botón de verdad */
  .main-nav a.nav-cta { width: 100%; padding: 14px 20px; min-height: 48px; }
}

/* Con "Ubicación" el menú pasó a ocho enlaces y algunos empezaron a partirse
   en dos líneas ("About Us", "La Cuchara Latina"). Ninguno debe romperse. */
.main-nav a { white-space: nowrap; }
.logo-text strong, .logo-text em { white-space: nowrap; }
@media (max-width: 1200px) and (min-width: 801px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 0.84rem; }
  .header-inner { gap: 14px; }
  .logo-text strong { font-size: 1rem; }
  .lang-toggle span:not(:first-child) { display: none; }
}

/* ==========================================================================
   Vídeo dentro de la cinta de Momentos
   ========================================================================== */
.reel-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.reel-card.is-video:hover video { transform: scale(1.06); }
.reel-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(12, 8, 6, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.reel-badge svg { width: 13px; height: 13px; margin-left: 1px; }

/* ==========================================================================
   Galería que se renueva sola
   Dos capas por tarjeta: la de atrás carga la foto siguiente y, cuando ya
   está lista, se cruzan las opacidades. El cambio dura casi un segundo a
   propósito: es un relevo, no un parpadeo.
   ========================================================================== */
.gallery-card { position: relative; }
.gallery-card .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.9s var(--ease-soft), transform 1.4s var(--ease-out);
}
.gallery-card .layer.back { opacity: 0; }
.gallery-card.swapping .layer.front { opacity: 0; }
.gallery-card.swapping .layer.back { opacity: 1; }
.gallery-card:hover .layer { transform: scale(1.06); }
.gallery-card figcaption { position: absolute; z-index: 2; }
.gallery-card figcaption .name { transition: opacity 0.5s var(--ease-soft); }
.gallery-card.swapping figcaption .name { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .gallery-card .layer { transition: none; }
}

/* ==========================================================================
   Peso y altura en móvil
   Medido en 4G lento: 2143 KB y 15 pantallas de alto. La mayor parte del peso
   eran las ocho fotos de fondo a tamaño completo (1,1 MB) para verse detrás
   de un velo al 95 %, y las tres Noto coreanas (471 KB) que se descargaban
   también en español. Aquí va lo que queda: recortar el alto sin quitar nada.
   ========================================================================== */

/* El hero sí se ve nítido: foto mediana en móvil, la grande solo en pantallas
   que la aprovechan. */
.hero::before { background-image: url('../img/photo_3-hero.jpg'); }
@media (min-width: 1000px) {
  .hero::before { background-image: url('../img/photo_3_2026-08-15_17-10-19.jpg'); }
}

@media (max-width: 700px) {
  /* --- Highlights: cuatro tarjetas apiladas ocupaban 1050 px --- */
  .highlights { padding: 46px 0 50px; }
  .highlights-inner { grid-template-columns: 1fr 1fr; gap: 12px; }
  .highlight-card { padding: 20px 14px 18px; }
  .highlight-icon { width: 44px; height: 44px; margin-bottom: 10px; }
  .highlight-icon svg { width: 21px; height: 21px; }
  .highlight-card h3 { font-size: 0.94rem; margin-bottom: 4px; }
  .highlight-card p { font-size: 0.79rem; line-height: 1.45; }

  /* --- Menú: seis platos en una columna eran 1556 px --- */
  .featured-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; }
  .featured-grid .menu-card { padding: 14px 12px; }
  .featured-grid .menu-card h3 { font-size: 0.92rem; }
  .featured-grid .menu-card p { font-size: 0.78rem; line-height: 1.45; }
  .featured-grid .menu-card-icon { font-size: 1.1rem; }
  .featured-grid .menu-card-tags { margin-top: 8px; gap: 4px; }
  .featured-grid .tag { font-size: 0.6rem; padding: 3px 7px; }

  /* --- Aire general entre secciones --- */
  .menu-section, .about, .gallery, .reviews, .social, .location { padding: 52px 0; }
  .reel { padding: 52px 0 56px; }
  .faq, .reservations { padding: 52px 0 58px; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); margin-bottom: 0.35em; }
  .section-sub { font-size: 0.94rem; }
  .eyebrow { font-size: 0.85rem; margin-bottom: 0.5em; }

  /* --- Galería: seis filas de 155 px --- */
  .gallery-grid { grid-auto-rows: 124px; gap: 8px; }
  .gallery-card figcaption { padding: 26px 10px 9px; }
  .gallery-card figcaption .name { font-size: 0.82rem; }
  .gallery-hint { margin-top: 16px; font-size: 0.76rem; }

  /* --- Redes --- */
  .social-inner { gap: 14px; }
  .social-featured { min-height: 240px; }
  .social-side { gap: 12px; }
  .social-handle { padding: 12px 14px; }
  .social-thumb { min-height: 84px; }

  /* --- Ubicación --- */
  .location-inner { gap: 14px; }
  .location-map { min-height: 230px; }
  .location-card { padding: 18px 16px; }
  .location-facts { margin-top: 16px; gap: 10px; }
  .location-facts li { padding-bottom: 10px; }
  .location-apps-label { margin: 16px 0 8px; }

  /* --- Reservas: era la sección más alta, 1675 px --- */
  .reservations-copy { padding: 16px; }
  .info-list { gap: 9px; }
  .info-list li { padding-bottom: 9px; }
  .reservation-form { padding: 16px; gap: 10px; }
  .form-row { gap: 10px; }
  .reservation-policy { margin-top: 12px; padding: 9px 12px; font-size: 0.76rem; }

  /* --- Momentos y reseñas --- */
  .reel-card { flex: 0 0 168px; }
  .review-card { flex-basis: 236px; padding: 16px; }
  .review-text { font-size: 0.87rem; line-height: 1.6; }
}

/* En móvil el formulario ya pide una columna por fila; dos campos cortos
   (comensales y hora) caben perfectamente de dos en dos. */
@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-row:has(textarea), .reservation-form > label { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Último ajuste de altura en móvil
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Nosotros: las banderas y las cifras ocupaban media pantalla */
  .about-visual { padding: 22px 16px; }
  .flag-blend { gap: 8px; margin-bottom: 20px; }
  .blend-flag .flag { width: 30px; height: 21px; }
  .about-stats { gap: 8px; }
  .stat strong { font-size: 1.4rem; }
  .stat span { font-size: 0.7rem; max-width: 96px; }
  .about-inner { gap: 22px; }
  .about-copy p { font-size: 0.93rem; line-height: 1.65; }

  /* Reseñas: las dos fichas de plataforma caben en fila */
  .review-platforms { grid-template-columns: 1fr 1fr; max-width: none; gap: 8px; }
  .rating-badge { grid-column: 1 / -1; }
  .platform-card { padding: 11px 12px; gap: 9px; }
  .platform-badge { width: 30px; height: 30px; border-radius: 9px; font-size: 0.85rem; }
  .platform-meta strong { font-size: 0.84rem; }
  .platform-go-label { font-size: 0.7rem; }
  .platform-go { display: none; }

  /* Galería: una pizca más baja cada fila */
  .gallery-grid { grid-auto-rows: 112px; }

  /* Ubicación: los cuatro accesos a mapas en dos filas apretadas */
  .location-apps { gap: 6px; }
  .location-app { padding: 9px 8px; font-size: 0.74rem; gap: 7px; min-height: 40px; }
  .app-badge { width: 19px; height: 19px; font-size: 0.66rem; }
  .location-address { font-size: 0.98rem; margin-bottom: 10px; }
  .location-copy { padding: 8px 14px; font-size: 0.76rem; }
  .map-switch-btn { min-height: 40px; }

  /* Menú: el botón grande no necesita tanto aire */
  .menu-cta { gap: 10px; }
  .btn-menu-cta { padding: 13px 24px; font-size: 0.94rem; }
  .menu-cta-hint { margin-top: 8px; font-size: 0.76rem; }

  /* Pie */
  .site-footer { padding: 34px 0 0; }
  .footer-inner { padding-bottom: 22px; gap: 16px; }
}

/* --------------------------------------------------------------------------
   Rejillas que no se dejan empujar
   `1fr` equivale a `minmax(auto, 1fr)`: el minimo lo pone el contenido, y un
   <input> trae un ancho intrinseco de unos 219 px. Con dos por fila, la
   columna crecia a 486 px dentro de un movil de 358 y la tarjeta se salia de
   la pantalla. Con `minmax(0, 1fr)` la rejilla manda sobre el contenido.
   -------------------------------------------------------------------------- */
.reservations-inner, .location-inner, .social-inner, .highlights-inner,
.form-row, .featured-grid, .review-platforms, .location-apps, .social-grid,
.gallery-grid, .menu-grid, .about-inner {
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
.reservation-form input,
.reservation-form textarea,
.reservation-form label { min-width: 0; width: 100%; }

/* Cada rejilla declara cuantas columnas quiere con --cols */
.about-inner { --cols: 1; }
.form-row { --cols: 2; }
@media (min-width: 961px) {
  .reservations-inner { grid-template-columns: 0.85fr minmax(0, 1.15fr); }
  .about-inner { grid-template-columns: 0.9fr minmax(0, 1.1fr); }
}
@media (min-width: 861px) {
  .social-inner { grid-template-columns: 1.25fr minmax(0, 1fr); }
}
@media (min-width: 901px) {
  .location-inner { grid-template-columns: 1.25fr minmax(0, 1fr); }
}
.social-grid, .location-apps, .review-platforms { --cols: 2; }
@media (min-width: 761px) {
  .review-platforms { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
}
.highlights-inner { --cols: 2; }
@media (min-width: 701px) {
  .highlights-inner { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.featured-grid { --cols: 2; }
@media (min-width: 601px) {
  .featured-grid { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
}
.menu-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.gallery-grid { --cols: 2; }
@media (min-width: 901px) { .gallery-grid { --cols: 4; } }

/* ==========================================================================
   Mapa de Latinoamérica
   Contornos reales de Natural Earth, simplificados. Los siete países de la
   carta llevan el color de su bandera; el resto del continente queda en gris
   porque sin ese contexto los siete no se leen como un mapa.
   ========================================================================== */
.latam-map-wrap { max-width: 300px; margin: 0 auto; }
.latam-map { width: 100%; height: auto; overflow: visible; }
.map-ctx { fill: var(--cream-dark); stroke: rgba(43, 27, 23, 0.14); stroke-width: 1.6; }
:root[data-theme="dark"] .map-ctx { fill: #2E241C; stroke: rgba(255,255,255,0.09); }
.map-country {
  stroke: var(--cream);
  stroke-width: 2.2;
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: filter 0.8s var(--ease-soft), transform 0.9s var(--ease-out), opacity 0.8s var(--ease-soft);
}
/* Antes cada país iba pintado con el color de su bandera, y salía un arcoíris
   donde Brasil verde claro y Bolivia verde oscuro se confundían, y el amarillo
   de Colombia y el de Ecuador eran el mismo. Con siete banderas juntas no hay
   composición que aguante. Ahora todos comparten el terracota de la casa en
   tonos distintos: el mapa se lee de un vistazo, la bandera de cada país ya
   está en su botón de abajo, y al elegir uno destaca de verdad. */
.map-country[data-c="mx"] { fill: #C1440E; }
.map-country[data-c="co"] { fill: #D4682B; }
.map-country[data-c="ve"] { fill: #B03A12; }
.map-country[data-c="ec"] { fill: #E08A4B; }
.map-country[data-c="pe"] { fill: #A8320F; }
.map-country[data-c="bo"] { fill: #CE5A1E; }
.map-country[data-c="br"] { fill: #DD7A3A; }
/* Chile y Argentina entraron después. Sin regla de fill un path de SVG es
   negro por defecto, y Chile salía como una raya negra en medio del mapa. */
.map-country[data-c="cl"] { fill: #BF4A17; }
.map-country[data-c="ar"] { fill: #E6803D; }
.map-country:hover, .map-country:focus-visible { filter: brightness(1.12); transform: scale(1.03); }
.map-menu-group:has(.is-active) .map-country:not(.is-active) { opacity: 0.34; }
.map-country.is-active {
  filter: drop-shadow(0 6px 14px rgba(43, 27, 23, 0.35)) brightness(1.08);
  transform: scale(1.05);
}

.map-hint {
  margin: 12px 0 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  min-height: 1.2em;
  transition: color 0.7s var(--ease-soft);
}
.map-hint.is-selected {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
}
.map-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(43, 27, 23, 0.12);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.7s var(--ease-soft), color 0.7s var(--ease-soft),
              border-color 0.7s var(--ease-soft), transform 0.7s var(--ease-out);
}
.map-flag:hover { transform: translateY(-2px); border-color: var(--terracota); }
.map-flag.is-active { background: var(--terracota); color: #fff; border-color: var(--terracota); }
.map-flag .flag { width: 15px; height: 10px; }

/* ==========================================================================
   Franja de highlights plegable
   ========================================================================== */
.highlight-card { padding: 0; overflow: hidden; text-align: left; }
.highlight-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
  min-height: 52px;
}
.highlight-card .highlight-icon { margin: 0; flex-shrink: 0; width: 40px; height: 40px; }
.highlight-card .highlight-icon svg { width: 20px; height: 20px; }
.highlight-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.highlight-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  line-height: 1.25;
}
.highlight-short {
  font-size: 0.78rem;
  color: rgba(251, 243, 231, 0.78);
  line-height: 1.4;
}
.highlight-chevron {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--gold-light);
  transition: transform 0.8s var(--ease-out), background 0.7s var(--ease-soft);
}
.highlight-chevron svg { width: 13px; height: 13px; }
.highlight-card.open .highlight-chevron { transform: rotate(180deg); background: var(--gold); color: var(--gochujang-dark); }
.highlight-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.85s var(--ease-out), opacity 0.6s var(--ease-soft);
}
.highlight-card.open .highlight-more { grid-template-rows: 1fr; opacity: 1; }
.highlight-more-inner { overflow: hidden; }
.highlight-more-inner p {
  margin: 0;
  padding: 0 16px 16px 66px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(251, 243, 231, 0.88);
}
.highlight-card.open { background: rgba(255, 255, 255, 0.17); border-color: rgba(241, 201, 123, 0.6); }
.highlight-card:hover, .highlight-card:focus-within { transform: translateY(-4px); }
@media (max-width: 700px) {
  .highlight-more-inner p { padding: 0 14px 14px 14px; }
  .highlight-toggle { padding: 13px 12px; gap: 10px; }
  .highlight-title { font-size: 0.9rem; }
  .highlight-short { font-size: 0.74rem; }
  .highlights-inner { --cols: 1; gap: 8px; }
}

/* ==========================================================================
   Botón flotante de KakaoTalk
   En Corea el chat del negocio es KakaoTalk, no WhatsApp. Mientras no exista
   el canal, el botón llama por teléfono: más vale un botón que hace algo que
   uno que abre una página que no existe.
   ========================================================================== */
.float-kakao {
  position: fixed;
  right: 16px;
  bottom: 74px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px 13px 15px;
  border-radius: 999px;
  background: #FEE500;
  color: #391B1B;
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: 0 10px 28px rgba(58, 27, 27, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.92);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out),
              visibility 0.7s, box-shadow 0.6s var(--ease-soft);
}
.float-kakao.visible { opacity: 1; visibility: visible; transform: none; }
.float-kakao:hover { box-shadow: 0 16px 36px rgba(58, 27, 27, 0.36); transform: translateY(-3px); }
.float-kakao .float-icon { display: flex; flex-shrink: 0; }
.float-kakao svg { width: 22px; height: 22px; }
@media (max-width: 700px) {
  .float-kakao { right: 12px; bottom: 70px; padding: 12px; }
  /* En movil solo el icono: la etiqueta taparia contenido */
  .float-kakao .float-label { display: none; }
}

/* ==========================================================================
   Menú más contenido
   Las tarjetas de plato competían en tamaño con los titulares de sección.
   ========================================================================== */
.featured-grid .menu-card { padding: 16px 15px; border-radius: 14px; }
.featured-grid .menu-card h3 { font-size: 1rem; }
.featured-grid .menu-card p { font-size: 0.84rem; line-height: 1.5; }
.featured-card.swapping { opacity: 0.25; transform: translateY(6px); }
.featured-card { transition: transform 0.95s var(--ease-out), box-shadow 0.95s var(--ease-out),
                             border-color 0.8s var(--ease-soft), opacity 0.7s var(--ease-soft); }

/* Menú completo dentro del modal */
.menu-modal-body .menu-card { padding: 16px 15px; border-radius: 14px; }
.menu-modal-body .menu-card h3 { font-size: 0.98rem; }
.menu-modal-body .menu-card p { font-size: 0.84rem; line-height: 1.5; }
.menu-modal-body .menu-card-icon { font-size: 1.15rem; }
.menu-modal-body .menu-card-price { font-size: 0.92rem; }
.menu-grid { gap: 14px; }
.menu-tabs { margin-bottom: 26px; }
@media (max-width: 700px) {
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .menu-modal-body .menu-card { padding: 12px 11px; }
  .menu-modal-body .menu-card h3 { font-size: 0.87rem; }
  .menu-modal-body .menu-card p { font-size: 0.75rem; line-height: 1.45; }
  .menu-modal-body .menu-card-price { font-size: 0.82rem; }
  .menu-modal-body .menu-card-top { margin-bottom: 6px; }
  .menu-modal-body .menu-card-tags { margin-top: 7px; gap: 4px; }
  .menu-modal-body .tag { font-size: 0.58rem; padding: 3px 6px; }
  .menu-cat-note { grid-column: 1 / -1; font-size: 0.78rem; padding: 8px 11px; }
}

/* ==========================================================================
   Todo un punto más lento
   ========================================================================== */
.reveal { transition-duration: 2s; }
.reveal-left, .reveal-right { transition-duration: 2.1s; }
/* El texto de "Toda Latinoamérica en una misma mesa" entra escalonado */
.about-copy > * { transition-delay: calc(var(--reveal-delay, 0ms) + var(--step, 0ms)); }
.about-copy .eyebrow { --step: 0ms; }
.about-copy h2 { --step: 260ms; }
.about-copy p:nth-of-type(1) { --step: 620ms; }
.about-copy p:nth-of-type(2) { --step: 1000ms; }
.about-copy .link-arrow { --step: 1360ms; }
.about-copy > * {
  opacity: 0;
  transform: translateY(22px);
  transition-property: opacity, transform;
  transition-duration: 1.9s;
  transition-timing-function: var(--ease-smooth);
}
.about-copy.in-view > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .about-copy > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .map-country { transition: none; }
}

/* --------------------------------------------------------------------------
   En móvil el mapa va primero
   Es lo que engancha; dejarlo debajo de dos párrafos largos significaba que
   casi nadie llegaba a verlo.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .about-visual { order: -1; }
  .about-inner { display: flex; flex-direction: column; }
}
@media (max-width: 700px) {
  .latam-map-wrap { max-width: 240px; }
  .about-visual { padding: 20px 14px 16px; }
  .map-legend { gap: 5px; margin-bottom: 16px; }
  .map-flag { padding: 5px 8px; font-size: 0.68rem; gap: 5px; }
  .map-hint { margin: 10px 0 12px; font-size: 0.76rem; }
  .map-hint.is-selected { font-size: 0.88rem; }
}

/* --------------------------------------------------------------------------
   Formulario de reservas a peticion en móvil
   -------------------------------------------------------------------------- */
.form-opener { display: none; }
@media (max-width: 960px) {
  .form-opener {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px dashed rgba(193, 68, 14, 0.45);
    background: rgba(193, 68, 14, 0.06);
    color: var(--terracota);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.7s var(--ease-soft), border-color 0.7s var(--ease-soft);
  }
  .form-opener svg { width: 18px; height: 18px; flex-shrink: 0; }
  .form-opener-chevron { margin-left: auto; display: flex; transition: transform 0.8s var(--ease-out); }
  .form-opener-chevron svg { width: 15px; height: 15px; }
  .reservations-inner.form-open .form-opener {
    background: var(--terracota); color: #fff; border-style: solid; border-color: var(--terracota);
  }
  .reservations-inner.form-open .form-opener-chevron { transform: rotate(180deg); }

  /* El truco de `0fr -> 1fr` necesita un unico hijo y el formulario tiene
     muchos, asi que aqui se oculta de verdad y entra con un fundido. Ocultarlo
     de verdad es ademas lo correcto: los campos de un formulario cerrado no
     deben poder recibir el foco al tabular. */
  .reservations-inner:not(.form-open) .reservation-form { display: none; }
  .reservations-inner.form-open .reservation-form { animation: formIn 0.7s var(--ease-smooth); }
  @keyframes formIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   El local: fotos, vídeos e Instagram con pestañas
   Eran tres secciones seguidas diciendo lo mismo. Una sola con pestañas hace
   el mismo trabajo en un tercio del alto, y el visitante elige qué mirar.
   ========================================================================== */
.showcase {
  padding: 84px 0 90px;
  position: relative;
  overflow: hidden;
  --panel-photo: url('../img/photo_2-bg.jpg');
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(45deg, rgba(193, 68, 14, 0.04) 0 2px, transparent 2px 10px),
    linear-gradient(180deg,
      rgba(var(--veil-rgb), 0.55) 0%, rgba(var(--veil-rgb), 0.955) 20%,
      rgba(var(--veil-rgb), 0.975) 80%, rgba(var(--veil-rgb), 0.55) 100%),
    var(--panel-photo);
  background-size: auto, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center;
}
.showcase::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    var(--terracota) 0 14px, var(--gold) 14px 22px,
    var(--jade) 22px 30px, var(--gochujang) 30px 44px);
  opacity: 0.85;
}
.showcase > * { position: relative; z-index: 1; }
.showcase .section-head { margin-bottom: 22px; }

.showcase-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  max-width: 420px;
  margin: 0 auto 22px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cream-dark);
  border: 1px solid rgba(43, 27, 23, 0.1);
}
.showcase-pill {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(33.333% - 5.33px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(43, 27, 23, 0.14);
  transition: transform 0.7s var(--ease-smooth);
}
.showcase-tabs[data-active="videos"] .showcase-pill { transform: translateX(calc(100% + 4px)); }
.showcase-tabs[data-active="redes"] .showcase-pill  { transform: translateX(calc(200% + 8px)); }
.showcase-tab {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color 0.6s var(--ease-soft);
}
.showcase-tab.active { color: var(--heading); }

.showcase-pane { animation: paneIn 0.7s var(--ease-smooth); }

/* El carrusel conserva su banda oscura, ahora como tarjeta */
#paneVideos .reel-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 18px 0;
  background: linear-gradient(180deg, #0C0806, #171009 45%, #0C0806);
}
#paneVideos .reel-wrapper::before { background: linear-gradient(90deg, #0C0806 8%, rgba(12,8,6,0.75) 45%, rgba(12,8,6,0)); }
#paneVideos .reel-wrapper::after  { background: linear-gradient(270deg, #0C0806 8%, rgba(12,8,6,0.75) 45%, rgba(12,8,6,0)); }

@media (max-width: 700px) {
  .showcase { padding: 52px 0 58px; }
  .showcase .section-head { margin-bottom: 18px; }
  .showcase-tabs { margin-bottom: 16px; }
  .showcase-tab { font-size: 0.8rem; min-height: 40px; padding: 8px 6px; }
  #paneVideos .reel-wrapper { padding: 14px 0; border-radius: var(--radius-md); }
  .gallery-hint { margin-top: 14px; }
}

/* El hero ya no necesita casi la pantalla entera: con algo menos se ve que
   hay más abajo, que es justo lo que interesa. */
@media (max-width: 700px) {
  .hero { min-height: 84vh; }
  .hero-inner { padding-top: 34px; padding-bottom: 74px; }
}

/* --------------------------------------------------------------------------
   Último recorte en móvil: las tres secciones que seguían largas
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Ubicación: los datos en una columna.
     Estaban en dos, de cuando eran cuatro datos y cabían de dos en dos. Al
     quitar el precio quedan tres, y el horario —que es el más largo— se
     partía y se metía debajo de la columna del teléfono. Además va a crecer:
     cuando lleguen las horas de verdad llevará también break time y last
     order. En una columna cabe lo que haga falta. */
  .location-map { min-height: 190px; }
  .location-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 14px;
  }
  .location-facts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-bottom: 0;
    border-bottom: none;
  }
  .location-facts li { flex-direction: row; align-items: center; }
  .location-facts .info-icon { width: 28px; height: 28px; border-radius: 8px; }
  .location-facts .info-icon svg { width: 15px; height: 15px; }
  .location-facts strong { font-size: 0.66rem; }
  .location-facts span, .location-facts .info-link { font-size: 0.8rem; }
  .location-apps-label { margin: 14px 0 7px; }

  /* Nosotros: leyenda y cifras más apretadas */
  .map-legend { gap: 4px; margin-bottom: 14px; }
  .map-flag { padding: 4px 7px; font-size: 0.64rem; }
  .map-flag .flag { width: 13px; height: 9px; }
  .about-stats { gap: 6px; }
  .stat strong { font-size: 1.25rem; }
  .stat span { font-size: 0.66rem; max-width: 88px; }
  .about-copy p { margin-bottom: 0.75em; }

  /* Menú: cuatro platos son dos filas limpias */
  .featured-grid { margin-bottom: 22px; }
}

/* ==========================================================================
   Entradas mucho más lentas
   A duraciones largas, una curva muy "out" gasta casi todo el recorrido en el
   primer medio segundo y el resto es imperceptible: parece que ya terminó y
   el movimiento se siente rápido. Esta curva reparte el avance de forma más
   pareja, así los tres segundos se notan de verdad.
   ========================================================================== */
:root { --ease-slow: cubic-bezier(0.22, 0.61, 0.24, 1); }

.reveal, .reveal-left, .reveal-right {
  transition-duration: 3.2s;
  transition-timing-function: var(--ease-slow);
}
.reveal { transform: translateY(56px) scale(0.965); filter: blur(8px); }
.reveal-left  { transform: translateX(-120px); }
.reveal-right { transform: translateX(120px); }
@media (max-width: 700px) {
  .reveal { transform: translateY(38px) scale(0.975); filter: blur(6px); }
  .reveal-left  { transform: translateX(-40px); }
  .reveal-right { transform: translateX(40px); }
}

/* "Toda Latinoamérica en una misma mesa": cada pieza con su propio turno */
.about-copy > * {
  transition-duration: 3s;
  transition-timing-function: var(--ease-slow);
  transform: translateY(30px);
}
.about-copy .eyebrow            { --step: 0ms; }
.about-copy h2                  { --step: 420ms; }
.about-copy p:nth-of-type(1)    { --step: 940ms; }
.about-copy p:nth-of-type(2)    { --step: 1460ms; }
.about-copy .link-arrow         { --step: 1980ms; }

/* El resto del movimiento acompaña: hero, mosaico y cintas */
.hero .reveal { transition-duration: 2.8s; }
.gallery-card .layer { transition: opacity 1.4s var(--ease-soft), transform 1.6s var(--ease-out); }
.featured-card.swapping { transition-duration: 1.1s; }
.reviews-track { animation-duration: 64s; }
.reel-track { animation-duration: 72s; }
.papel-flag { animation-duration: 8.5s; }
.showcase-pane { animation: paneIn 1.1s var(--ease-slow); }
.location-map.pane-in { animation: paneIn 1s var(--ease-slow); }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition-duration: 0.5s !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   Lento de verdad, pero legible desde el principio
   Con una sola duración larga para todo, el texto llegaba al centro de la
   pantalla todavía transparente: precioso y molesto a la vez. La salida es
   separar las dos cosas — la opacidad sube pronto, así se lee enseguida, y
   el desplazamiento se toma sus tres segundos largos. Lo que se percibe como
   "lento" es el movimiento, no la espera.
   ========================================================================== */
.reveal, .reveal-left, .reveal-right {
  transition-property: opacity, transform, filter;
  transition-duration: 1.15s, 3.2s, 1.5s;
  transition-timing-function: cubic-bezier(0.3, 0.8, 0.4, 1), var(--ease-slow), ease-out;
}
.hero .reveal { transition-duration: 1.1s, 2.9s, 1.4s; }

.about-copy > * {
  transition-property: opacity, transform;
  transition-duration: 1.1s, 3s;
  transition-timing-function: cubic-bezier(0.3, 0.8, 0.4, 1), var(--ease-slow);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right,
  .about-copy > * {
    transition-property: opacity !important;
    transition-duration: 0.5s !important;
  }
}

/* El escalonado de "Toda Latinoamérica en una misma mesa" se mantiene, pero
   con turnos más cortos: el último elemento esperaba casi dos segundos antes
   de empezar siquiera, y al llegar la vista ahí seguía en blanco. */
.about-copy .eyebrow         { --step: 0ms; }
.about-copy h2               { --step: 240ms; }
.about-copy p:nth-of-type(1) { --step: 540ms; }
.about-copy p:nth-of-type(2) { --step: 840ms; }
.about-copy .link-arrow      { --step: 1140ms; }

/* ==========================================================================
   Las cintas se mueven de verdad
   A 72 s de recorrido el carrusel avanzaba 15 px por segundo: técnicamente
   se movía, pero mirándolo parecía quieto. Velocidad calmada es una cosa y
   estar parado es otra.
   ========================================================================== */
.reel-track { animation-duration: 34s; }
.reviews-track { animation-duration: 46s; }
@media (max-width: 700px) {
  .reel-track { animation-duration: 26s; }
  .reviews-track { animation-duration: 34s; }
}

/* Dato del país al tocarlo en el mapa */
.map-info { /* envoltorio que colapsa */
  max-width: 300px;
  margin: 0 auto;
  padding: 0 4px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.8s var(--ease-out), opacity 0.6s var(--ease-soft),
              margin 0.8s var(--ease-out);
}
.map-info.is-open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 12px; }
.map-info::after { content: ''; }
@media (max-width: 700px) {
  .map-info { font-size: 0.78rem; max-width: 260px; }
}

/* La galería se renueva más a menudo: el cambio tiene que leerse como vida,
   no como un fallo, así que el cruce sigue siendo lento aunque llegue antes */
.gallery-card .layer { transition: opacity 1.1s var(--ease-soft), transform 1.6s var(--ease-out); }

/* ==========================================================================
   Ficha de Instagram (y TikTok cuando llegue)
   Antes era un enlace suelto con el @. Ahora imita la cabecera de un perfil:
   avatar, arroba, publicaciones y seguidores. Se reconoce de un vistazo, que
   es justo lo que hace que alguien pulse "seguir".
   ========================================================================== */
.social-inner {
  grid-template-areas: "profile" "featured" "shelf";
  align-items: start;
}
.ig-profile  { grid-area: profile; }
.social-featured { grid-area: featured; }
.social-side { grid-area: shelf; }

.ig-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.08);
  box-shadow: var(--shadow-soft);
}

/* El aro degradado de Instagram, sin imagen: dos fondos superpuestos y el
   hueco del medio pintado del color de la tarjeta. */
.ig-avatar {
  display: block;
  width: 66px; height: 66px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #F9CE34, #EE2A7B, #6228D7, #F9CE34);
  flex-shrink: 0;
}
.ig-avatar-inner {
  display: block;
  width: 100%; height: 100%;
  padding: 2.5px;
  border-radius: 50%;
  background: var(--surface);
}
.ig-avatar svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

.ig-id { min-width: 0; }
.ig-handle {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ig-handle:hover { color: var(--terracota); }
.ig-name { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-soft); }

.ig-stats {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.ig-stats li { display: flex; align-items: baseline; gap: 5px; }
.ig-stats strong { font-size: 0.95rem; font-weight: 700; color: var(--heading); }
.ig-stats span { font-size: 0.76rem; color: var(--ink-soft); }

.ig-follows {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
}
.ig-follow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 13px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), filter 0.6s var(--ease-soft);
}
.ig-follow:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43, 27, 23, 0.22); filter: brightness(1.05); }
.ig-follow:active { transform: translateY(-1px); }
.ig-follow-icon { display: flex; flex-shrink: 0; }
.ig-follow-icon svg { width: 19px; height: 19px; }
.ig-follow-instagram { background: linear-gradient(120deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%); }
.ig-follow-tiktok { background: #111; }

@media (min-width: 861px) {
  .social-inner {
    grid-template-columns: 1.25fr minmax(0, 1fr);
    grid-template-areas: "profile profile" "featured shelf";
  }
  .ig-profile { grid-template-columns: auto minmax(0, 1fr) auto; padding: 18px 22px; }
  .ig-follows { grid-column: auto; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
  .social-side { height: 100%; }
}
@media (max-width: 380px) {
  .ig-avatar { width: 56px; height: 56px; }
  .ig-handle { font-size: 0.94rem; }
  .ig-follow { font-size: 0.82rem; padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-follow { transition: none; }
}

/* --------------------------------------------------------------------------
   Que nada se pise en móvil
   Dos arreglos que solo se ven en un teléfono real:

   1. El botón flotante de WhatsApp caía justo encima de "Enviar solicitud".
      En reservas ya hay WhatsApp, KakaoTalk y el formulario, así que ahí se
      retira en vez de estorbar sobre el botón que hay que pulsar.
   2. El confeti caía también sobre los campos del formulario. Sobre una foto
      adorna; sobre un <input> parece suciedad. En reservas se retira.
   -------------------------------------------------------------------------- */
.float-kakao.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
  pointer-events: none;
}

/* El confeti se queda en el hero y solo en el hero.
   Era una capa fija sobre toda la página, así que los papelitos caían encima
   del texto de las preguntas, de los nombres de los platos y de los campos
   del formulario. Sobre una foto adorna; sobre una línea de texto parece
   suciedad en la pantalla, y en las capturas del móvil se veía exactamente
   así. Recortado a la primera pantalla hace lo que se le pedía —dar la
   bienvenida— y deja el resto del sitio limpio. */
.confetti {
  position: absolute;
  inset: 0;
  height: 100vh;
  z-index: 3;
  transition: opacity 0.9s var(--ease-soft);
}
.confetti i { animation-duration: var(--d); }
@keyframes confettiFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.55; }
  80%  { opacity: 0.5; }
  100% { transform: translate3d(var(--drift), 100vh, 0) rotate(520deg); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Franja de datos del hero
   Cuatro datos en la primera pantalla: variedad, metro, precio y reseñas.
   En un móvil coreano esa fila es la que decide si se sigue bajando.
   -------------------------------------------------------------------------- */
.hero-facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  gap: 8px;
  max-width: 620px;
}
.hero-fact {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(43, 27, 23, 0.09);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.3;
}
.hero-fact a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  width: 100%;
}
.hero-fact-icon { display: flex; flex-shrink: 0; color: var(--terracota); }
.hero-fact-icon svg { width: 17px; height: 17px; }
.hero-fact-reviews .hero-fact-icon { color: #E8A33D; }
:root[data-theme="dark"] .hero-fact {
  background: rgba(28, 20, 18, 0.62);
  border-color: rgba(247, 231, 206, 0.16);
}

@media (max-width: 700px) {
  .hero-facts { margin-top: 20px; grid-template-columns: 1fr 1fr; gap: 7px; }
  .hero-fact { font-size: 0.75rem; padding: 8px 10px; gap: 7px; min-height: 42px; border-radius: 14px; }
  .hero-fact-icon svg { width: 15px; height: 15px; }
}
@media (max-width: 360px) {
  .hero-fact { font-size: 0.71rem; padding: 7px 9px; }
}

/* --------------------------------------------------------------------------
   Zonas de toque
   Una auditoría en un móvil de 390 px encontró botones de 17 a 34 px de alto.
   Con el pulgar eso se falla. Estos son los que estaban por debajo de 44.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .map-flag { min-height: 36px; padding: 8px 11px; }
  .link-arrow { min-height: 44px; padding: 10px 2px; }
  .showcase-tab { min-height: 46px; }
  .location-copy { min-height: 44px; padding: 10px 16px; }
  .info-link { display: inline-flex; align-items: center; min-height: 32px; }
  .footer-lang select, #footerLangSelect { min-height: 44px; }
  .main-nav a { min-height: 44px; display: flex; align-items: center; }
  .main-nav a.nav-cta { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Reseñas: tarjetas del mismo alto
   Algunas reseñas de Naver son cinco líneas y otras veinte, así que la cinta
   pasaba de tarjetas de 300 px a tarjetas de 700. En un móvil eso se lee como
   un muro de texto. Se recortan a nueve líneas con degradado y la ficha
   completa sigue a un toque de distancia en Naver o en Google.
   -------------------------------------------------------------------------- */
.review-card { max-height: 420px; }
.review-text {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
}
@media (max-width: 700px) {
  .review-card { max-height: 360px; }
  .review-text { -webkit-line-clamp: 8; line-clamp: 8; }
}

/* La chip de reseñas del hero enseña la nota antes que el recuento. */
.hero-fact-lead {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1;
  color: var(--heading);
  margin-right: 1px;
}
@media (max-width: 700px) {
  .hero-fact-lead { font-size: 0.94rem; }
}

/* --------------------------------------------------------------------------
   Confirmación de la reserva
   El formulario decía "enviado" y abría WhatsApp con un número que no
   existía. Sin servidor no hay forma honesta de enviar nada, así que ahora la
   solicitud se copia y desde aquí se pega en KakaoTalk o se llama, que es como
   se cierra una reserva en Corea de todas formas.
   -------------------------------------------------------------------------- */
.form-sent {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.08);
  box-shadow: var(--shadow-soft);
  animation: formIn 0.7s var(--ease-smooth);
}
.sent-head { display: flex; align-items: center; gap: 13px; }
.sent-check {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(46, 160, 90, 0.14);
  color: #2EA05A;
}
.sent-check svg { width: 21px; height: 21px; }
.sent-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--heading);
}
.sent-copied { font-size: 0.8rem; color: var(--ink-soft); }

.sent-text {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-soft, rgba(43, 27, 23, 0.045));
  border: 1px dashed rgba(43, 27, 23, 0.16);
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sent-step { margin: 14px 0 0; font-size: 0.84rem; line-height: 1.65; color: var(--ink-soft); }

.sent-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px;
}
.sent-actions .btn { min-height: 48px; justify-content: center; }
.btn-kakao-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 18px;
  border-radius: 13px;
  background: #FEE500;
  color: #391B1B;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.btn-kakao-solid svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn-ghost {
  padding: 13px 18px;
  border-radius: 13px;
  border: 1px solid rgba(43, 27, 23, 0.16);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.6s var(--ease-soft), border-color 0.6s var(--ease-soft);
}
.btn-ghost:hover { background: rgba(43, 27, 23, 0.05); }
.btn-ghost.copied { border-color: #2EA05A; color: #2EA05A; }
:root[data-theme="dark"] .sent-text { border-color: rgba(247, 231, 206, 0.2); background: rgba(247, 231, 206, 0.05); }
:root[data-theme="dark"] .btn-ghost { border-color: rgba(247, 231, 206, 0.22); }
:root[data-theme="dark"] .btn-ghost:hover { background: rgba(247, 231, 206, 0.07); }

@media (max-width: 600px) {
  .form-sent { padding: 18px; }
  .sent-text { font-size: 0.8rem; padding: 12px 13px; }
}

/* --------------------------------------------------------------------------
   Cambios de idioma y de tema, con calma
   Los dos cambiaban de golpe: en un parpadeo el sitio era otro. Ahora el
   contenido se apaga un poco, cambia por debajo y vuelve. Es medio segundo y
   se nota, que es justo de lo que se trata.
   -------------------------------------------------------------------------- */
body { transition: background-color 0.75s var(--ease-soft), color 0.75s var(--ease-soft); }

/* El cambio de tema recorre todo lo que tiene fondo, borde o sombra. Se hace
   con una clase temporal para no dejar transiciones puestas todo el rato, que
   arrastrarían cada hover del sitio. */
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition: background-color 0.7s var(--ease-soft),
              border-color 0.7s var(--ease-soft),
              color 0.7s var(--ease-soft),
              fill 0.7s var(--ease-soft),
              box-shadow 0.7s var(--ease-soft) !important;
  transition-delay: 0s !important;
}

/* El idioma cambia todos los textos a la vez. Bajar la opacidad mientras se
   reemplazan evita ver el salto de una lengua a otra. */
main, .site-header, .topbar, .site-footer, .mobile-bar {
  transition: opacity 0.42s var(--ease-soft);
}
body.lang-changing main,
body.lang-changing .site-header,
body.lang-changing .topbar,
body.lang-changing .site-footer,
body.lang-changing .mobile-bar { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  html.theme-changing *,
  html.theme-changing *::before,
  html.theme-changing *::after { transition-duration: 0.3s !important; }
}

/* --------------------------------------------------------------------------
   Reseñas: carrusel que se pasa con el dedo
   La cinta infinita se quita. En un iPhone con "Reducir movimiento" activado
   se paraba en seco y las tarjetas de más allá del borde no había forma de
   alcanzarlas: nada permitía desplazarlas. Ahora el propio contenedor es el
   que se desliza, así que funciona igual con el ajuste puesto o quitado.
   -------------------------------------------------------------------------- */
.reviews-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.reviews-viewport::-webkit-scrollbar { display: none; }
.reviews-viewport:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; border-radius: 12px; }

.reviews-track {
  animation: none;
  width: max-content;
  padding: 4px 24px 6px;
}
.review-card {
  scroll-snap-align: center;
  max-height: none;
}
.reviews-viewport:hover .reviews-track { animation: none; }

.reviews-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}
.reviews-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(43, 27, 23, 0.2);
  cursor: pointer;
  transition: background 0.5s var(--ease-soft), width 0.5s var(--ease-out);
}
.reviews-dot.active { background: var(--terracota); width: 22px; border-radius: 999px; }
:root[data-theme="dark"] .reviews-dot { background: rgba(247, 231, 206, 0.24); }
:root[data-theme="dark"] .reviews-dot.active { background: var(--gold, #E8A33D); }

/* Zona de toque cómoda sin engordar el punto */
.reviews-dots { padding: 10px 0; }
.reviews-dot { position: relative; }
.reviews-dot::after { content: ''; position: absolute; inset: -12px; }

@media (max-width: 600px) {
  .reviews-track { padding: 4px 16px 6px; }
  .review-card { flex-basis: min(80vw, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-viewport { scroll-behavior: auto; }
  .reviews-dot { transition: none; }
}

/* --------------------------------------------------------------------------
   Iconos con acento local
   Un icono de línea sirve para casi cualquier cosa y por eso no dice nada.
   En la franja del hero, tres de los cuatro se cambian por marcas que un
   coreano reconoce sin leer: las banderas de la carta, el círculo azul de la
   línea 4 y el símbolo del won.
   -------------------------------------------------------------------------- */
.fact-flags { display: inline-flex; align-items: center; }
.fact-flags .flag {
  width: 15px; height: 15px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--surface);
  margin-right: -5px;
}
.fact-flags .flag:last-child { margin-right: 0; }

.metro-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #00A5DE;      /* el azul de la línea 4 en cualquier plano de Seúl */
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}
.fact-won {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--terracota);
}
.hero-fact-countries .hero-fact-icon,
.hero-fact-station .hero-fact-icon,
.hero-fact-price .hero-fact-icon { color: inherit; }

@media (max-width: 700px) {
  .fact-flags .flag { width: 13px; height: 13px; margin-right: -4px; }
  .metro-line { width: 15px; height: 15px; font-size: 0.6rem; }
  .fact-won { width: 15px; font-size: 0.9rem; }
}

/* Las cuatro chips a la misma altura aunque una lleve más texto */
.hero-facts { align-items: stretch; }
.hero-fact { align-items: center; }

/* --------------------------------------------------------------------------
   Que en el móvil se note que algo se mueve
   El recorrido en pantalla pequeña era de 40 px en 3,2 segundos: doce píxeles
   por segundo, técnicamente en movimiento y visualmente quieto. Y como la
   entrada además se disparaba media pantalla antes, para cuando llegabas
   mirando ya había terminado. Se alarga el recorrido y se dispara más tarde
   (eso último, en el observador de app.js).
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .reveal       { transform: translateY(64px) scale(0.955); filter: blur(7px); }
  .reveal-left  { transform: translateX(-78px); }
  .reveal-right { transform: translateX(78px); }
  .about-copy > * { transform: translateY(46px); }
}

/* El hero entra con el sitio ya a la vista, así que ahí el recorrido puede
   ser más corto sin que se pierda nada.

   El `:not(.in-view)` no es adorno, es lo que evita que el hero se quede
   borroso para siempre. `.hero .reveal` pesa lo mismo que `.reveal.in-view`
   pero va después en el archivo, así que ganaba también DESPUÉS de revelarse:
   el título entraba, se colocaba... y se quedaba desenfocado y 44 px más
   abajo, sin nada que lo devolviera a su sitio. Con `:not(.in-view)` la regla
   deja de existir en cuanto el elemento aparece, y ya no hay pelea que
   perder. Cualquier estado "antes de entrar" que se escriba de aquí en
   adelante debe llevarlo. */
@media (max-width: 700px) {
  .hero .reveal:not(.in-view) { transform: translateY(44px) scale(0.975); filter: blur(5px); }
}

/* --------------------------------------------------------------------------
   Con "Reducir movimiento" activado
   El ajuste pide quitar el movimiento grande, no dejar la página muerta. Antes
   se anulaba todo y el contenido aparecía de golpe en medio segundo, que es
   justo lo que se siente como "aquí no pasa nada". Se conserva un
   desplazamiento corto y el fundido se alarga, muy por debajo de lo que
   molesta a quien activa ese ajuste.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .about-copy > * {
    transition-property: opacity, transform !important;
    transition-duration: 1.1s, 1.1s !important;
    transition-timing-function: ease-out, ease-out !important;
    filter: none !important;
  }
  .reveal       { transform: translateY(14px) !important; }
  .reveal-left  { transform: translateX(-14px) !important; }
  .reveal-right { transform: translateX(14px) !important; }
  .about-copy > * { transform: translateY(12px) !important; }
  .reveal.in-view, .reveal-left.in-view, .reveal-right.in-view,
  .about-copy > *.in-view { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Por qué en el móvil no se veía moverse nada
   Medido en un teléfono de 390x844: cuando un elemento asomaba ya llevaba
   recorridos 28 de sus 64 px, y los 35 que le quedaban los repartía a lo
   largo de dos segundos de desplazamiento. Diecisiete píxeles por segundo:
   técnicamente en movimiento, visualmente quieto.

   La causa es que 3,2 segundos es más de lo que un elemento pasa en pantalla
   cuando alguien va bajando con el dedo. En escritorio funciona porque ahí se
   lee sin desplazar y da tiempo a que la entrada termine; en el móvil, no.

   Así que en pantalla pequeña la entrada dura menos y recorre más. No es
   volver a lo de antes: 80 px en 1,4 s son 57 px/s, más de tres veces lo que
   se movía, y sigue leyéndose como algo pausado.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .reveal, .reveal-left, .reveal-right {
    transition-property: opacity, transform, filter;
    transition-duration: 0.7s, 1.4s, 0.9s;
    transition-timing-function: ease-out, var(--ease-slow), ease-out;
  }
  .reveal       { transform: translateY(68px) scale(0.95); filter: blur(7px); }
  .reveal-left  { transform: translateX(-80px); }
  .reveal-right { transform: translateX(80px); }

  .hero .reveal { transition-duration: 0.8s, 1.6s, 1s; }

  .about-copy > * {
    transition-property: opacity, transform;
    transition-duration: 0.7s, 1.35s;
    transform: translateY(52px);
  }
  /* Los turnos también se acortan: con pasos de medio segundo, el último
     bloque empezaba cuando la vista ya había pasado de largo. */
  .about-copy .eyebrow         { --step: 0ms; }
  .about-copy h2               { --step: 130ms; }
  .about-copy p:nth-of-type(1) { --step: 290ms; }
  .about-copy p:nth-of-type(2) { --step: 450ms; }
  .about-copy .link-arrow      { --step: 610ms; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .about-copy > * {
    transition-duration: 0.8s, 0.9s !important;
  }
  .reveal       { transform: translateY(22px) !important; }
  .reveal-left  { transform: translateX(-22px) !important; }
  .reveal-right { transform: translateX(22px) !important; }
  .about-copy > * { transform: translateY(18px) !important; }
  .reveal.in-view, .reveal-left.in-view, .reveal-right.in-view,
  .about-copy > *.in-view { transform: none !important; }
}

/* Mientras no exista enlace de KakaoTalk, estos botones son una llamada y se
   visten como tal: el amarillo de Kakao en un botón que abre el marcador
   promete una cosa y hace otra. */
.btn-kakao.is-phone { background: var(--terracota); color: #fff; }
.float-kakao.is-phone {
  background: var(--terracota);
  color: #fff;
  box-shadow: 0 10px 28px rgba(193, 68, 14, 0.4);
}
.float-kakao.is-phone:hover { box-shadow: 0 16px 36px rgba(193, 68, 14, 0.52); }
.btn-kakao.is-phone svg, .float-kakao.is-phone svg { stroke: currentColor; fill: none; }

/* El tamaño de estos iconos venía en atributos del propio <svg>, y al
   cambiarlos desde JS se perdía: el teléfono salía gigante, llenando el botón
   entero. Ahora la medida la pone la hoja de estilos, que es donde no se
   pierde por reemplazar el marcado. */
.btn-map svg { width: 18px; height: 18px; flex-shrink: 0; }
.float-kakao .float-icon svg { width: 22px; height: 22px; }

/* ==========================================================================
   Vitrina de platos, con foto
   Un restaurante se elige mirando, no leyendo. La vitrina de la portada era
   una lista de nombres con etiquetas, y con seis platos seguidos así la
   sección más importante del sitio era la más sosa. Ahora cada tarjeta abre
   con la foto real del plato.
   ========================================================================== */
.menu-card.has-photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dish-photo {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(43, 27, 23, 0.06);
}
.dish-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s var(--ease-out);
}
.menu-card.has-photo:hover .dish-photo img { transform: scale(1.05); }

/* Un velo por abajo para que el borde de la foto no choque con la tarjeta */
.dish-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(43, 27, 23, 0.28), transparent);
  pointer-events: none;
}

.menu-card.has-photo .menu-card-top,
.menu-card.has-photo > p,
.menu-card.has-photo .menu-card-tags { padding-left: 16px; padding-right: 16px; }
.menu-card.has-photo .menu-card-top { padding-top: 14px; }
.menu-card.has-photo .menu-card-tags { padding-bottom: 16px; margin-top: auto; }
.menu-card.has-photo > p { margin-top: 8px; }

/* El icono de categoría sobraba junto a la foto: ya se ve de qué es el plato */
.menu-card.has-photo .menu-card-icon { display: none; }
.menu-card.has-photo h3 { font-size: 1.02rem; line-height: 1.3; }

@media (max-width: 700px) {
  .dish-photo { aspect-ratio: 1 / 1; }
  .menu-card.has-photo .menu-card-top,
  .menu-card.has-photo > p,
  .menu-card.has-photo .menu-card-tags { padding-left: 12px; padding-right: 12px; }
  .menu-card.has-photo .menu-card-top { padding-top: 11px; }
  .menu-card.has-photo .menu-card-tags { padding-bottom: 12px; }
  .menu-card.has-photo h3 { font-size: 0.92rem; }
  /* Con la foto delante, la descripción larga sobra en pantalla pequeña:
     la carta completa está a un toque. */
  .menu-card.has-photo > p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dish-photo img { transition: none; }
}

/* Cada tarjeta con el alto de lo que lleva dentro. Estirándolas todas al alto
   de la más alta, a la que solo tenía una etiqueta le quedaba un hueco de
   cuatro dedos entre el nombre y el país. */
.featured-grid { align-items: start; }
.menu-card.has-photo .menu-card-tags { margin-top: 10px; }

/* El país elegido se pinta del dorado de la casa, para que se distinga del
   resto aunque todos compartan la misma familia de color. */
.map-country.is-active { fill: var(--gold, #E8A33D) !important; }

/* --------------------------------------------------------------------------
   Franja de highlights, más honda
   El degradado se quedaba en naranja encendido y las tarjetas de vidrio
   flotaban encima con poco contraste: cuatro cajas rojizas sobre un fondo
   rojizo. Bajando el fondo a granate oscuro, el texto claro despega y la
   franja se lee de un vistazo.
   -------------------------------------------------------------------------- */
.highlights {
  background-image:
    linear-gradient(155deg, rgba(46, 8, 16, 0.95), rgba(104, 26, 14, 0.88) 48%, rgba(62, 10, 22, 0.96)),
    url('../img/photo_9-bg.jpg');
}
.highlights::before {
  background:
    radial-gradient(42% 48% at 18% 22%, rgba(241, 201, 123, 0.20), transparent 64%),
    radial-gradient(38% 42% at 84% 78%, rgba(47, 110, 81, 0.22), transparent 64%);
}
.highlight-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(247, 231, 206, 0.16);
}
.highlight-card.open,
.highlight-card:hover { background: rgba(255, 255, 255, 0.12); }
.highlight-short { color: rgba(251, 243, 231, 0.82); }

/* --------------------------------------------------------------------------
   La fachada dentro de la tarjeta de ubicación
   El local está en un segundo piso, encima de una inmobiliaria. Con la
   dirección sola hay que ir mirando números de portal; con la foto del cartel
   se reconoce de lejos, que es lo que de verdad hace falta al llegar.
   -------------------------------------------------------------------------- */
.storefront { margin: 0 0 18px; }
.storefront img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: rgba(43, 27, 23, 0.06);
}
.storefront figcaption {
  margin-top: 9px;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .storefront { margin-bottom: 15px; }
  .storefront img { aspect-ratio: 3 / 2; }
  .storefront figcaption { font-size: 0.76rem; }
}

/* --------------------------------------------------------------------------
   Modo oscuro: tres cosas que se volvían invisibles
   Revisado en un móvil con el tema oscuro puesto. Los tres elementos usaban
   blanco o casi blanco como fondo, así que al oscurecer el tema se quedaban
   sin superficie y parecían texto suelto flotando.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .btn-google {
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink);
  border-color: rgba(247, 231, 206, 0.22);
}
:root[data-theme="dark"] .map-flag {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(247, 231, 206, 0.18);
}
:root[data-theme="dark"] .map-flag:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .storefront img { background: rgba(255, 255, 255, 0.06); }

/* El círculo de la línea 4: el blanco sobre el azul oficial se quedaba en 2,8
   de contraste. Un punto más oscuro sigue leyéndose como la línea 4 de
   cualquier plano de Seúl y el número se ve. */
.metro-line { background: #0091C4; font-weight: 800; }

/* TikTok en negro sobre una tarjeta oscura desaparecía. La marca admite negro
   o blanco, y sobre fondo oscuro el blanco es el correcto. */
:root[data-theme="dark"] .ig-follow-tiktok { background: #F7E7CE; color: #111; }

/* --------------------------------------------------------------------------
   Cada red con su arroba
   TikTok era un botón suelto debajo de una ficha que era toda de Instagram:
   avatar, arroba, publicación y miniaturas, todo apuntando al mismo sitio. No
   quedaba claro adónde llevaba cada cosa. Ahora las dos filas se leen igual —
   qué red es, con qué nombre estamos ahí, y la flecha de que se sale del
   sitio.
   -------------------------------------------------------------------------- */
.ig-follow {
  justify-content: flex-start;
  gap: 11px;
  padding: 11px 15px;
  text-align: left;
}
.ig-follow-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ig-follow-text strong { font-size: 0.88rem; font-weight: 700; }
.ig-follow-text span { font-size: 0.74rem; opacity: 0.82; overflow-wrap: anywhere; }
.ig-follow-go {
  margin-left: auto;
  font-size: 1rem;
  opacity: 0.7;
  transition: transform 0.7s var(--ease-out);
}
.ig-follow:hover .ig-follow-go { transform: translateX(3px); opacity: 1; }
.ig-follows { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

@media (min-width: 861px) {
  .ig-follows { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width: 380px) {
  .ig-follow { padding: 10px 12px; gap: 9px; }
  .ig-follow-text strong { font-size: 0.82rem; }
  .ig-follow-text span { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-follow-go { transition: none; }
}

/* --------------------------------------------------------------------------
   "Estamos en Hyehwa": era la sección más alta de todas
   Medido: 1338 px en móvil (1,6 pantallas) y 1298 en escritorio, con un mapa
   de 945 px estirado solo para igualar el alto de la tarjeta de al lado. Un
   mapa no necesita 945 px: con 400 se ve la manzana igual de bien.

   Además la misma acción estaba ofrecida tres veces —la pestaña de arriba, el
   botón encima del mapa y los cuatro botones de abrir en app—, y el precio
   medio se repetía de la franja del hero. Eso ya está fuera del HTML.
   -------------------------------------------------------------------------- */
.location-inner { align-items: start; }
.location-map {
  /* `flex: none` no es adorno. El contenedor es una columna flex y el mapa
     traía `flex: 1`, que incluye `flex-basis: 0%` — y eso gana al `height` en
     un contenedor flex. Al dejar de estirarse la columna, el mapa se quedaba
     en 64 px, o sea invisible. */
  flex: none;
  height: clamp(230px, 34vh, 400px);
  min-height: 0;
}
.location-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* En escritorio hay ancho de sobra: la tarjeta se pone en dos bloques y deja
   de ser una tira larguísima al lado de un mapa corto.

   Lo intenté antes colocando los siete elementos sueltos por filas de grid y
   no salió: las filas las marcaba el elemento más alto de la otra columna, así
   que quedaban huecos en medio y la dirección se partía por el número. Con dos
   bloques de verdad cada columna fluye sola.

   Y el reparto cambia: el mapa cede ancho a la tarjeta, que es la que lleva
   texto coreano y no se puede partir en cualquier sitio. */
@media (min-width: 1100px) {
  .location-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .location-card {
    display: flex;
    /* La tarjeta ya era flex, pero en columna. Sin decir `row` aquí, los dos
       bloques se apilaban uno encima del otro —los medí y empezaban en la
       misma x— y parecía que la regla no se aplicaba. */
    flex-direction: row;
    gap: 28px;
    align-items: flex-start;
    /* Un elemento de grid trae `min-width: auto` y no baja del ancho mínimo
       de su contenido. */
    min-width: 0;
  }
  .location-card-main,
  .location-card-side { flex: 1 1 0; min-width: 0; }
  .location-card-side .location-facts { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   En móvil el mapa incrustado no se queda
   Ocupaba 281 px —la quinta parte de la sección— para algo que en un teléfono
   nadie usa: dentro de un iframe no se puede arrastrar bien, no da indicaciones
   y no conoce dónde estás. Lo que sí se usa está justo debajo: la foto del
   cartel para reconocer el sitio, la dirección para copiar, y los cuatro
   botones que abren Naver, Kakao, Google o Apple con navegación de verdad.

   En escritorio se queda, que ahí sí sirve para situar la manzana de un
   vistazo y no hay app a la que saltar.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .location-map-wrap { display: none; }
  .storefront img { aspect-ratio: 16 / 9; }
  .location-facts { margin-top: 14px; gap: 8px; }
  .location-facts li { padding-bottom: 8px; }
  .location-apps-label { margin: 14px 0 8px; }
}

/* --------------------------------------------------------------------------
   Resumen de las reseñas, como en una ficha de Naver
   Debajo de la nota, una fila de etiquetas con lo que más repite la gente. En
   Naver es lo primero que se lee —el resumen antes de ponerse a leer reseñas
   sueltas— y aquí no había nada parecido: se pasaba de la nota a un carrusel
   de textos largos.
   -------------------------------------------------------------------------- */
.review-themes { margin-top: 18px; }
.review-themes-title {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.review-themes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.review-theme {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(43, 27, 23, 0.1);
  box-shadow: var(--shadow-soft);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heading);
}
/* La primera es la que más se repite: se lleva el color de la casa */
.review-theme:first-child {
  background: var(--terracota);
  border-color: var(--terracota);
  color: #fff;
}
:root[data-theme="dark"] .review-theme {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(247, 231, 206, 0.18);
}
:root[data-theme="dark"] .review-theme:first-child {
  background: var(--terracota);
  border-color: var(--terracota);
}
@media (max-width: 700px) {
  .review-themes { margin-top: 14px; }
  .review-theme { padding: 7px 12px; font-size: 0.78rem; }
}

/* Un país sin cocina en la carta se pinta como fondo y deja de responder al
   toque. Antes seguía en color y al pulsarlo ponía "0 가지 요리". */
.map-country.is-off {
  fill: var(--cream-dark);
  stroke: rgba(43, 27, 23, 0.14);
  pointer-events: none;
  cursor: default;
}
:root[data-theme="dark"] .map-country.is-off { fill: #2E241C; stroke: rgba(255,255,255,0.09); }