/* ── FUENTES (servidas desde el sitio) ── */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/bebas-neue-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENS ── */
:root {
  color-scheme: dark;

  /* Color */
  --bg: #0E0C0A;
  --surface: #171411;
  --surface-2: #201C18;
  --border: #2E2924;
  --border-strong: #4A4239;
  --text: #F4EFE8;
  --muted: #A39D95;           /* 7:1 sobre --bg */
  --accent: #E8A020;
  --accent-strong: #F5B53D;
  --accent-dim: rgba(232,160,32,0.12);
  --accent-line: rgba(232,160,32,0.35);
  --on-accent: #120E08;
  --success: #34D27B;

  /* Espaciado (escala 4/8) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem; --space-9: 6rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1240px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

  /* Capas */
  --z-nav: 100; --z-menu: 90; --z-float: 200;

  --nav-h: 72px;
}

/* Spring real donde el navegador lo soporte */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%,
      1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.7%, 1.003 38.1%, 0.981 42.2%, 0.975 45.7%,
      0.988 54%, 1.001 63.4%, 1.002 72.3%, 1);
  }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.icon { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--accent); color: var(--on-accent);
  padding: var(--space-3) var(--space-4); font-weight: 600;
  z-index: 1000; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }

/* ── BOTONES ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 15px; height: 15px; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); }

.btn-ghost { border-color: var(--border-strong); color: var(--text); background: rgba(14,12,10,0.4); }
.btn-ghost:hover { border-color: var(--text); }

/* ── NAV ── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transform: translateZ(0); /* capa propia (ver .action-bar) */
  height: var(--nav-h);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
  padding: 0 var(--gutter);
  background: rgba(14,12,10,0.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.nav-logo { display: block; flex-shrink: 0; }
.nav-logo img { height: 52px; width: auto; display: block; }

.nav-links { display: flex; gap: var(--space-1); list-style: none; }

.nav-links a {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-3);
  text-decoration: none;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-fast);
}
.nav-links a::after {
  content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-mobile-menu > a[aria-current="page"] { color: var(--accent); }

.nav-cta { min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.75rem; }

.nav-hamburger {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px; background: var(--text);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  background: rgba(14,12,10,0.98);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--gutter) var(--space-5);
  z-index: var(--z-menu);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav-mobile-menu.open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out), visibility 0s;
}
.nav-mobile-menu > a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 52px;
  text-decoration: none;
  font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-fast);
}
.nav-mobile-menu > a:hover { color: var(--accent); }
.nav-mobile-menu .mobile-phone { color: var(--accent); }
.nav-mobile-menu .mobile-phone .icon { width: 16px; height: 16px; }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: var(--space-7);
  padding: calc(var(--nav-h) + var(--space-7)) var(--gutter) var(--space-8);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 15% 85%, rgba(232,160,32,0.10), transparent 70%),
    radial-gradient(40% 40% at 90% 10%, rgba(232,160,32,0.06), transparent 70%);
}

.hero-bg-text {
  position: absolute; left: -0.04em; bottom: -0.18em; z-index: -1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(9rem, 26vw, 26rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,239,232,0.045);
  white-space: nowrap;
  pointer-events: none; user-select: none;
}

.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

.status-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-4);
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--success);
  background: rgba(52,210,123,0.08);
  border: 1px solid rgba(52,210,123,0.3);
  border-radius: 999px;
}
/* Mientras JS calcula si está abierto, el aviso ocupa su lugar (invisible) para que nada brinque */
.status-badge { min-height: 34px; }
.status-badge:empty { visibility: hidden; }
.status-badge.cerrado { color: var(--muted); background: rgba(163,157,149,0.08); border-color: var(--border-strong); }

.status-dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.status-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor;
  animation: ping 2s var(--ease-out) infinite;
}
.cerrado .status-dot::after { display: none; }

@keyframes ping {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(3.3); opacity: 0; }
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(4rem, 10.5vw, 10rem);
  line-height: 0.88;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-5);
}
/* Cada línea va en una "máscara" para que el texto suba desde abajo al cargar */
.hero-line { display: block; overflow: hidden; padding-top: 0.14em; margin-top: -0.14em; }
.hero-line > span { display: block; }
.hero-line-accent { color: var(--accent); }

.hero-desc {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: var(--space-6);
}

.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-media {
  position: relative;
  align-self: stretch;
  max-height: calc(100svh - var(--nav-h) - 7rem);
  min-height: 420px;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 0% 40%; /* deja ver el letrero */
  filter: saturate(1.05) contrast(1.03);
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,0.7) 0%, transparent 45%);
}
.hero-media-frame {
  position: absolute; inset: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
  border: 1px solid var(--accent-line);
  z-index: -1;
}

.hero-stat {
  position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 1;
  display: flex; align-items: center; gap: var(--space-3);
}
.hero-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem; line-height: 1;
  color: var(--accent);
}
.hero-stat-label {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); line-height: 1.4;
}
.hero-stat-label .stars { color: var(--accent); letter-spacing: 0.1em; display: block; }

/* ── SECCIONES ── */
.section {
  padding: var(--space-9) max(var(--gutter), (100% - var(--max)) / 2);
  border-bottom: 1px solid var(--border);
}

.section-header {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem; letter-spacing: 0.1em;
  color: var(--accent);
}
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1; letter-spacing: 0.03em;
  text-wrap: balance;
}
.section-line { flex: 1; height: 1px; background: var(--border); align-self: center; }

.section-intro {
  max-width: 52ch;
  font-size: 1rem; line-height: 1.7;
  color: var(--muted);
  margin-bottom: var(--space-6);
}

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── PÁGINA DEL MENÚ ── */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + var(--space-8)) max(var(--gutter), (100% - var(--max)) / 2) var(--space-7);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 80% at 85% 0%, rgba(232,160,32,0.12), transparent 70%);
}
.breadcrumb { display: flex; gap: var(--space-2); list-style: none; font-size: 0.85rem; color: var(--muted); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--space-2); color: var(--border-strong); }
.page-hero-title {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(3.8rem, 10vw, 8rem);
  line-height: 0.9; letter-spacing: 0.02em;
}
.page-hero-title .accent { color: var(--accent); }
/* Cada palabra en su "máscara" para que suba al cargar */
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-top: 0.14em; margin-top: -0.14em; }
.word-mask > span { display: inline-block; }
.page-hero-row {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-5);
}
.page-hero-desc { max-width: 46ch; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.page-hero .status-badge { margin: 0; }
#menu { padding-top: var(--space-7); }

.item-badge {
  margin-left: var(--space-1);
  padding: 0.15rem 0.45rem;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
}

/* Botón "Siguiente categoría" al final de cada lista */
.menu-next {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.menu-next:hover { border-color: var(--accent-line); background: var(--surface-2); }
.menu-next-label {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.menu-next-title {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem; line-height: 1.1; letter-spacing: 0.04em;
}
.menu-next .icon {
  width: 44px; height: 44px; padding: 10px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-next:hover .icon { transform: translateX(4px); }

.reco-more { display: flex; justify-content: center; margin-top: var(--space-6); }

/* ── MENÚ · BUSCADOR Y COMPARTIR ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-tools {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.menu-search {
  position: relative; flex: 0 1 460px;
  display: flex; align-items: center;
}
/* Lupa dentro de un cuadrito que se enciende al enfocar */
.menu-search > .icon {
  position: absolute; left: 8px; z-index: 1;
  width: 40px; height: 40px; padding: 10px;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-dim);
  pointer-events: none;
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.menu-search input {
  width: 100%; min-height: 56px;
  padding: 0 52px 0 60px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 30px -20px rgba(0,0,0,0.9);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
  -webkit-appearance: none; appearance: none;
}
.menu-search input::placeholder { color: var(--muted); opacity: 0.9; }
.menu-search input::-webkit-search-cancel-button { display: none; }
.menu-search input:hover { border-color: rgba(232,160,32,0.35); }
.menu-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(232,160,32,0.14), 0 18px 40px -22px rgba(232,160,32,0.45);
}
.menu-search:focus-within > .icon { background: var(--accent); color: var(--on-accent); transform: scale(1.04); }
.menu-search-clear {
  position: absolute; right: 8px;
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--muted); background: rgba(244,239,232,0.06); border: 0; border-radius: 10px; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.menu-search-clear:hover { color: var(--text); background: rgba(244,239,232,0.12); }
.menu-search-clear[hidden] { display: none; }
.menu-search-clear .icon { width: 18px; height: 18px; }
/* Pista de teclado "/" (solo computadora, con el buscador vacío y sin foco) */
.menu-search-kbd {
  position: absolute; right: 14px;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: grid; place-items: center;
  font: 600 0.8rem/1 'Outfit', sans-serif; color: var(--muted);
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px;
  pointer-events: none;
  transition: opacity var(--dur-fast);
}
.menu-search:focus-within .menu-search-kbd,
.menu-search-clear:not([hidden]) ~ .menu-search-kbd { opacity: 0; }
@media (hover: none) { .menu-search-kbd { display: none; } }

/* Compartir: cuadro dorado con el ícono + texto, misma altura y esquinas que el buscador */
.menu-tools .share-btn {
  margin-top: 0; min-height: 56px;
  padding: 0 20px 0 8px; gap: 12px;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 30px -20px rgba(0,0,0,0.9);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast) var(--ease-out);
}
.menu-tools .share-btn .icon {
  width: 40px; height: 40px; padding: 10px;
  border-radius: 10px;
  color: var(--on-accent); background: var(--accent);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base);
}
.menu-tools .share-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232,160,32,0.12), 0 18px 40px -22px rgba(232,160,32,0.45); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.menu-tools .share-btn:hover .icon { transform: rotate(-14deg) scale(1.06); }
.menu-tools .share-btn:active { transform: scale(0.97); }
.menu-tools .share-btn.is-done { color: var(--success); border-color: rgba(52,210,123,0.5); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.menu-tools .share-btn.is-done .icon { background: var(--success); color: #062312; }

/* Chips de sugerencias */
.menu-suggest {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
}
.menu-suggest[hidden] { display: none; }
.menu-suggest-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-right: var(--space-1); }
.menu-chip {
  min-height: 36px; padding: 0 14px;
  font: inherit; font-size: 0.85rem; font-weight: 500; color: var(--text);
  background: rgba(244,239,232,0.05);
  border: 1px solid var(--border-strong); border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.menu-chip:hover { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent-strong); }
.menu-chip:active { transform: scale(0.95); }

/* Resultados */
.menu-results { margin: var(--space-6) 0; }
.menu-results-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-strong);
}
.menu-results-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: 0.04em; line-height: 1; }
.menu-results-title q { color: var(--accent); quotes: '“' '”'; }
.menu-results-count { white-space: nowrap; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.menu-results-group + .menu-results-group { margin-top: var(--space-5); }
.menu-results-cat {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-2);
}
.menu-results-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: var(--space-6); }
.menu-result {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: 48px; padding: 0;
  font: inherit; font-size: 1rem; text-align: left; color: var(--text);
  background: none; border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: color var(--dur-fast);
}
.menu-result::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; background: var(--accent); transform: rotate(45deg); }
.menu-result small { margin-left: auto; padding-left: var(--space-3); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.menu-result mark { background: var(--accent-dim); color: var(--accent-strong); padding: 0 1px; }
.menu-result:hover { color: var(--accent-strong); }
.menu-result:hover small { color: var(--accent); }
.menu-results-empty { padding: var(--space-6) 0; color: var(--muted); }
.menu-results-empty strong { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.8rem; letter-spacing: 0.03em; color: var(--text); margin-bottom: var(--space-2); }
.menu-results-empty .btn { margin-top: var(--space-4); }

/* Al elegir un resultado, el platillo destella en su categoría */
.menu-list-item.is-found { color: var(--accent-strong); background-size: 100% 1px; }

/* Mientras se busca se ocultan pestañas y categorías */
.is-searching .menu-tabs, .is-searching .menu-panels { display: none; }

@media (max-width: 768px) {
  /* Buscador a lo ancho y Compartir como botón de ícono al lado */
  .menu-tools { flex-wrap: nowrap; gap: var(--space-2); }
  .menu-search { flex: 1 1 auto; min-width: 0; }
  .menu-tools .share-btn { flex: 0 0 56px; width: 56px; padding: 0; justify-content: center; }
  .menu-suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .menu-suggest::-webkit-scrollbar { display: none; }
  .menu-chip { flex-shrink: 0; }
  .share-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-search input { font-size: 16px; } /* 16px evita que iPhone haga zoom al escribir */
  .menu-results-title { font-size: 1.7rem; }
  .menu-results-list { grid-template-columns: 1fr; }
}

/* ── MENÚ · PESTAÑAS ── */
.menu-tabs {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-3));
  z-index: 40;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; /* mismas esquinas que el buscador */
  overflow-x: auto; scrollbar-width: none;
  width: fit-content; max-width: 100%;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.7);
}
.menu-tabs::-webkit-scrollbar { display: none; }

.menu-tab {
  position: relative;
  min-height: 48px;
  padding: 0 1.4rem;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  background: transparent; border: none;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-base);
  touch-action: manipulation;
}
.menu-tab:hover { color: var(--text); }
.menu-tab[aria-selected="true"] { color: var(--on-accent); }
.menu-tab:focus-visible { outline-offset: -2px; }

.tab-label { position: relative; z-index: 1; }

/* Indicador: un solo bloque que viaja entre pestañas.
   Se mueve y estira solo con transform (lo hace la tarjeta gráfica, sin recalcular la página).
   JS pone --x (posición) y --s (ancho / 100px). */
.tab-indicator {
  position: absolute; top: var(--space-1); bottom: var(--space-1); left: 0;
  width: 100px;
  background: var(--accent);
  border-radius: 10px;
  transform-origin: 0 0;
  transform: translateX(var(--x, 0)) scaleX(var(--s, 1));
  transition: transform 520ms var(--ease-spring);
  will-change: transform;
}
.tab-indicator.no-anim { transition: none; }

.menu-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) 1fr;
  gap: var(--space-7);
  align-items: start;
}
.menu-panel[hidden] { display: none; }
.menu-panel:focus-visible { outline-offset: 8px; }

/* Elemento compartido: la foto del panel se transforma entre categorías */
.menu-photo {
  position: relative;
  z-index: 0; isolation: isolate; /* la animación de la foto no sale de aquí */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
  view-transition-name: menu-photo;
}
.menu-photo img { width: 100%; height: 100%; object-fit: cover; }
.menu-photo figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-7) var(--space-5) var(--space-5);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1.05;
}
.menu-photo figcaption small {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

.menu-panel-head {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}
.menu-panel-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--border-strong);
  transform-origin: left;
}
.menu-panel-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 2.2rem; letter-spacing: 0.04em; line-height: 1;
}
.menu-panel-count {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.menu-category + .menu-category { margin-top: var(--space-6); }
.menu-subcategory {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.menu-list-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  column-gap: var(--space-6);
}
.menu-list-item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px;
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat;
  transition: color var(--dur-fast), background-size 500ms var(--ease-out);
}
.menu-list-item::before {
  content: ''; width: 6px; height: 6px; flex-shrink: 0;
  background: var(--accent);
  transform: rotate(45deg);
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) {
  .menu-list-item:hover { color: var(--accent-strong); background-size: 100% 1px; }
  .menu-list-item:hover::before { transform: rotate(225deg) scale(1.5); }
}

/* "Favorita": destello que la recorre cada pocos segundos */
.item-badge { position: relative; overflow: hidden; }

.menu-cta {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
  border: 1px solid var(--accent-line);
  background: linear-gradient(100deg, var(--accent-dim), transparent 70%);
}
.menu-cta p { font-size: 1.05rem; }
.menu-cta p span { display: block; font-size: 0.9rem; color: var(--muted); }



/* ── VIEW TRANSITIONS (pestañas del menú) ── */
/* El resto de la página no participa: solo animan los elementos con nombre */
/* Transiciones dentro de la página: el resto no participa, solo animan los elementos con nombre */
:root.vt-local { view-transition-name: none; }
:root.vt-local nav, :root.vt-local .action-bar { view-transition-name: none; }

/* Transición entre páginas (inicio ↔ menú) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
nav { view-transition-name: site-nav; }
.action-bar { view-transition-name: action-bar; }
/* Al cambiar de página, el menú y la barra inferior siempre quedan encima de la foto que viaja */
::view-transition-group(site-nav), ::view-transition-group(action-bar) { z-index: 10; }
::view-transition-old(root) { animation: vt-fade-out 180ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-fade-in 360ms var(--ease-out) 60ms both, vt-rise 420ms var(--ease-out) 60ms both; }
@keyframes vt-rise { from { transform: translateY(14px); } }
::view-transition { pointer-events: none; }

/* Foto compartida: el contenedor se transforma y las imágenes se funden */
::view-transition-group(menu-photo) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-out); }
::view-transition-old(menu-photo),
::view-transition-new(menu-photo) {
  height: 100%; object-fit: cover;
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-out);
}
::view-transition-new(menu-photo) { animation-name: vt-fade-in, vt-zoom-settle; }

@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-slide-from-right { from { transform: translateX(16px); } }
@keyframes vt-slide-from-left { from { transform: translateX(-16px); } }
@keyframes vt-slide-to-left { to { transform: translateX(-12px); } }
@keyframes vt-slide-to-right { to { transform: translateX(12px); } }
@keyframes vt-zoom-settle { from { transform: scale(1.06); } }

/* ── DATOS CLAVE ── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 max(var(--gutter), (100% - var(--max)) / 2);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.stat {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
}
.stat + .stat { border-left: 1px solid var(--border); }
.stat-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
}
.stat-icon .icon { width: 22px; height: 22px; position: relative; }
.stat-icon { position: relative; transition: background var(--dur-base), color var(--dur-base); }
.stat-icon[data-anim="scooter"] { overflow: hidden; }
/* Reloj de líneas (los íconos normales son rellenos) */
.icon.icon-clock { fill: none; stroke: currentColor; }
/* Manecillas del reloj: giran sobre el centro */
.clock-hour, .clock-min { transform-box: view-box; transform-origin: 12px 12px; }
/* Destello de la estrella (anillo que se expande) */
.stat-icon[data-anim="star"]::after {
  content: ''; position: absolute; inset: 8px;
  border: 2px solid currentColor; border-radius: 50%;
  opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  .stat:hover .stat-icon { background: var(--accent); color: var(--on-accent); }
}
.stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; line-height: 1.05; letter-spacing: 0.03em;
}
.stat-label { font-size: 0.85rem; color: var(--muted); }

/* ── GALERÍA (carrusel) ── */
.galeria-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.galeria-head .section-intro { margin-bottom: 0; }
.galeria-nav { display: flex; gap: var(--space-2); flex-shrink: 0; }
.galeria-arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
.galeria-arrow .icon { width: 22px; height: 22px; }
.galeria-arrow:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  .galeria-arrow:not(:disabled):hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}

.galeria-track {
  --per-view: 4.3;   /* tarjetas visibles; el decimal deja ver la siguiente */
  --gap: var(--space-4);
  display: flex; gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}
.galeria-track::-webkit-scrollbar { display: none; }
.galeria-track:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .galeria-track { scroll-behavior: smooth; } }

.galeria-item {
  position: relative; margin: 0;
  flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
  scroll-snap-align: start;
}
.galeria-media {
  position: relative; overflow: hidden; overflow: clip; /* clip: no crea scroll propio (lo necesita el efecto ventana) */
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border-radius: 6px;
}
.galeria-media img, .galeria-media video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
/* Velo oscuro: animar su opacidad es mucho más barato que un filter sobre la foto */
.galeria-media::after {
  content: ''; position: absolute; inset: 0;
  background: #000; opacity: 0.08;
  transition: opacity var(--dur-slow);
  pointer-events: none;
}
@media (hover: hover) {
  .galeria-item:hover .galeria-media img, .galeria-item:hover .galeria-media video { transform: scale(1.04); }
  .galeria-item:hover .galeria-media::after { opacity: 0; }
  .galeria-item:hover .galeria-caption { color: var(--accent); }
}
.galeria-badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 999px;
  pointer-events: none;
}
.galeria-badge::before {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--accent);
}
.galeria-info { padding-top: var(--space-3); }
.galeria-label {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.galeria-caption {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem; line-height: 1.1; letter-spacing: 0.03em;
  color: var(--text);
  transition: color var(--dur-fast);
}

/* Puntos del carrusel */
.galeria-dots {
  display: flex; justify-content: center; gap: 4px;
  margin-top: var(--space-5);
}
.galeria-dots:empty { display: none; }
.galeria-dot {
  /* área táctil de 24px; el punto visible se dibuja con ::before */
  width: 24px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  transition: width 450ms var(--ease-out);
}
.galeria-dot::before {
  content: ''; width: 100%; max-width: 8px; height: 8px; border-radius: 999px;
  background: var(--border-strong);
  transition: max-width 450ms var(--ease-out), background var(--dur-base);
}
.galeria-dot[aria-current="true"] { width: 40px; }
.galeria-dot[aria-current="true"]::before { max-width: 32px; background: var(--accent); }
@media (hover: hover) {
  .galeria-dot:hover::before { background: var(--muted); }
  .galeria-dot[aria-current="true"]:hover::before { background: var(--accent); }
}

/* Arrastrar con el mouse */
.galeria-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.galeria-track.is-dragging .galeria-open { cursor: grabbing; }

/* ── RESEÑAS ── */
.rating-hero {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
}
.rating-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 6rem; line-height: 0.9;
  color: var(--accent);
}
.rating-stars { display: flex; gap: 2px; margin-bottom: var(--space-1); color: var(--accent); }
.rating-stars .icon { width: 22px; height: 22px; }
.rating-stars .half { opacity: 0.4; }
.rating-count { font-size: 0.9rem; color: var(--muted); }
.rating-source { margin-left: auto; text-align: right; }
.rating-source-name { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rating-source-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.06em; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.review-card {
  display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.review-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.review-quote { width: 28px; height: 28px; color: var(--accent); opacity: 0.6; margin-bottom: var(--space-3); }
.review-stars { display: flex; gap: 2px; margin-bottom: var(--space-3); color: var(--accent); }
.review-stars .icon { width: 15px; height: 15px; }
.review-text { font-size: 1rem; line-height: 1.7; margin-bottom: var(--space-5); flex: 1; }
.review-author { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
  font-size: 0.85rem; font-weight: 600;
}
.review-name { font-size: 0.9rem; font-weight: 600; }
.review-date { font-size: 0.8rem; color: var(--muted); }

.reviews-more { margin-top: var(--space-5); text-align: center; font-size: 0.85rem; color: var(--muted); }
.reviews-more a { color: var(--accent); text-underline-offset: 3px; }

/* ── CÓMO LLEGAR ── */
.ubicacion {
  position: relative;
  display: flex; align-items: center;
  min-height: 600px;
  background: #15120F;
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}

.ubicacion-map { position: absolute; inset: 0; }
.ubicacion-map iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
  /* Modo oscuro cálido: invierte y regresa el tono para que el agua y los parques conserven su color */
  filter: invert(92%) hue-rotate(180deg) saturate(0.6) brightness(0.92) contrast(0.95) sepia(0.12);
}
/* Tinte ámbar y viñeta para integrar el mapa con la página (no bloquea el mouse) */
.ubicacion-map::before,
.ubicacion-map::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
}
.ubicacion-map::before { background: rgba(232,160,32,0.06); mix-blend-mode: overlay; }
.ubicacion-map::after {
  background:
    linear-gradient(90deg, rgba(14,12,10,0.92) 0%, rgba(14,12,10,0.55) 30%, transparent 55%),
    radial-gradient(130% 100% at 70% 50%, transparent 60%, rgba(14,12,10,0.75) 100%);
}

/* Esquinas tipo visor sobre el mapa */
.ubicacion-corner {
  position: absolute; z-index: 1;
  width: 28px; height: 28px;
  border-color: var(--accent);
  border-style: solid;
  pointer-events: none;
}
.ubicacion-corner.tr { top: var(--space-4); right: var(--space-4); border-width: 2px 2px 0 0; }

.ubicacion-card {
  position: relative; z-index: 2;
  width: min(420px, 100%);
  margin: var(--space-6);
  padding: var(--space-6);
  background: rgba(23,20,17,0.9);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--accent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.ubicacion-title {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: 2.4rem; line-height: 1; letter-spacing: 0.03em;
  margin-top: var(--space-3);
}
.ubicacion-sub { color: var(--muted); margin-top: var(--space-1); }
.ubicacion-card .status-badge { margin: var(--space-4) 0 var(--space-5); }

.ubicacion-datos { list-style: none; display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.ubicacion-dato { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: start; }
.ubicacion-dato-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
}
.ubicacion-dato-icon .icon { width: 18px; height: 18px; }
.ubicacion-dato-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.ubicacion-dato-value { font-size: 0.95rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ubicacion-dato-value a { color: var(--text); text-decoration: none; font-weight: 600; }
.ubicacion-dato-value a:hover { color: var(--accent); }
.ubicacion-dato-value span { color: var(--muted); }
.ubicacion-dato-label, .ubicacion-dato-value { display: block; }
.ubicacion-dato-value b { font-weight: 600; color: var(--text); }
.ubicacion-dato-icon { position: relative; transition: background var(--dur-base), color var(--dur-base); }

/* Filas de teléfono: toda la fila es tocable */
.ubicacion-dato-link {
  grid-template-columns: 40px 1fr auto; align-items: center;
  margin: 0 calc(var(--space-2) * -1); padding: var(--space-2);
  color: inherit; text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.ubicacion-dato-go { width: 20px; height: 20px; color: var(--muted); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.ubicacion-dato-link:hover, .ubicacion-dato-link:focus-visible { background: var(--accent-dim); border-color: var(--accent-line); }
.ubicacion-dato-link:hover .ubicacion-dato-icon { background: var(--accent); color: var(--on-accent); }
.ubicacion-dato-link:hover .ubicacion-dato-go { color: var(--accent); transform: translateX(4px); }
.ubicacion-dato-link:active { transform: scale(0.99); }

/* Copiar dirección */
.copy-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0.35rem 0.75rem 0.35rem 0.6rem;
  font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(244,239,232,0.05);
  border: 1px solid var(--border-strong); border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.copy-btn .icon { width: 15px; height: 15px; color: var(--accent); }
.copy-btn:hover { border-color: var(--accent-line); background: var(--accent-dim); }
.copy-btn.is-done { color: var(--success); border-color: rgba(52,210,123,0.4); background: rgba(52,210,123,0.08); }
.copy-btn.is-done .icon { color: var(--success); }

/* Pulso dorado sobre la ubicación (centro del mapa) */
.map-pulse { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; pointer-events: none; }
.map-pulse span {
  position: absolute; left: -36px; top: -14px; width: 72px; height: 28px;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: 0;
}

/* Íconos de los botones */
.ubicacion-actions .btn .icon { transition: transform var(--dur-base) var(--ease-out); }

/* Horario de la semana: el día de hoy se resalta (JS pone .is-today) */
.horario { list-style: none; margin-top: var(--space-1); display: grid; gap: 1px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.horario li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 0.3rem 0.6rem; margin-left: -0.6rem;
  color: var(--muted);
  border-left: 2px solid transparent;
}
.horario li span:first-child { color: var(--text); }
.horario li.dia-cerrado span:last-child { color: var(--muted); font-style: italic; }
.horario li.is-today { background: var(--accent-dim); border-left-color: var(--accent); color: var(--text); font-weight: 600; }
.horario li.is-today span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.horario li.is-today span:first-child::after {
  content: 'Hoy';
  padding: 0.05rem 0.4rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
}
.horario li.is-today.dia-cerrado span:last-child { color: var(--muted); }
.horario-nota {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.82rem; color: var(--muted);
}
.horario-nota .icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
/* Renglón de hoy: "Miércoles [HOY]" arriba y la nota "lun – vie" justo debajo */
.horario li.is-today span:first-child {
  display: inline-grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
  column-gap: var(--space-2); white-space: nowrap;
}
.horario li.is-today span:first-child::after { order: 1; }
.horario-rango { order: 2; grid-column: 1 / -1; font-size: 0.72rem; font-weight: 400; line-height: 1.2; color: var(--muted); }
.horario li { align-items: center; }
.horario li > span:last-child { white-space: nowrap; }
@media (max-width: 420px) {
  .horario { font-size: 0.85rem; }
  .horario li { gap: var(--space-2); }
  /* El horario usa todo el ancho de la tarjeta, debajo del ícono del reloj */
  .ubicacion-dato:has(.horario) { align-items: center; }
  .ubicacion-dato:has(.horario) > div { display: contents; }
  .ubicacion-dato:has(.horario) .horario { grid-column: 1 / -1; margin-top: 0; }
  .ubicacion-dato:has(.horario) .horario-nota { grid-column: 1 / -1; margin-top: 0; }
}

.ubicacion-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ubicacion-actions .btn { flex: 1 1 auto; }

/* ── SERVICIOS ── */
#servicios { background: var(--surface); }
.servicios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.servicios-grid > div { display: flex; flex-direction: column; }
.servicios-label {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-4);
}
.pago-list { list-style: none; display: grid; gap: var(--space-3); }
.pago-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
}
.pago-item.destacado { border: 1px dashed var(--accent-line); background: var(--accent-dim); }
.pago-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
}
.pago-icon .icon { width: 20px; height: 20px; }
.pago-item { transition: border-color var(--dur-base), background var(--dur-base); }
.pago-icon { transition: background var(--dur-base), color var(--dur-base); perspective: 200px; }
@media (hover: hover) {
  .pago-item:hover { border-color: var(--accent-line); }
  .pago-item:hover .pago-icon { background: var(--accent); color: var(--on-accent); }
}
.pago-title { font-size: 1rem; font-weight: 600; }
.destacado .pago-title { color: var(--accent); }
.pago-desc { font-size: 0.875rem; color: var(--muted); }

.domicilio-card {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
}
.domicilio-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
  margin-bottom: var(--space-5);
}
.domicilio-icon .icon { width: 32px; height: 32px; position: relative; }
.domicilio-icon { position: relative; overflow: hidden; }
/* Líneas de velocidad detrás de la moto (solo se ven al animar) */
.domicilio-lines {
  position: absolute; left: 6px; top: 50%; width: 18px; height: 14px;
  margin-top: -9px; opacity: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 6px 6px / 70% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 2px 12px / 85% 2px no-repeat;
  border-radius: 2px;
}
.domicilio-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2rem; line-height: 1.05; letter-spacing: 0.03em; margin-bottom: var(--space-2); }
.domicilio-hora {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line); border-radius: 999px;
}
.domicilio-hora .icon { width: 16px; height: 16px; }
.domicilio-desc { font-size: 1rem; color: var(--muted); line-height: 1.7; margin-bottom: var(--space-5); max-width: 44ch; }

/* ── WHATSAPP ── */

.menu-cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── RECOMENDADOS ── */
.reco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.reco-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .reco-card:hover { border-color: var(--accent-line); transform: translateY(-4px); }
}
.reco-card:active { transform: translateY(-1px) scale(0.99); }
.reco-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.reco-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.reco-card:hover .reco-media img { transform: scale(1.05); }
.reco-badge {
  position: absolute; top: var(--space-4); left: var(--space-4);
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
}
.reco-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.reco-title {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: 2rem; line-height: 1; letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
}
.reco-text { color: var(--muted); font-size: 0.95rem; line-height: 1.6; flex: 1; margin-bottom: var(--space-4); }
.reco-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
.reco-link .icon { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }
.reco-card:hover .reco-link .icon { transform: translateX(4px); }

/* ── GALERÍA · VISOR ── */
.galeria-open {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: var(--space-4);
  background: none; border: none;
  cursor: zoom-in;
}
.galeria-open:focus-visible { outline-offset: -4px; }

.lightbox {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: var(--space-8) var(--space-9);
  border: none;
  background: rgba(8,7,6,0.94);
  color: var(--text);
  view-transition-name: lightbox;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox-figure {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  max-width: 100%; max-height: 100%;
}
.lightbox-img {
  max-width: min(100%, 1200px);
  max-height: calc(100dvh - 12rem);
  width: auto; height: auto;
  object-fit: contain;
  view-transition-name: lightbox-img;
}
.lightbox-img[hidden] { display: none; }
video.lightbox-img { background: #000; }
.lightbox-caption {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1;
  text-align: center;
}
.lightbox-caption small {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-1);
}
.lightbox-btn {
  position: absolute;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--text);
  background: rgba(244,239,232,0.08);
  border: 1px solid rgba(244,239,232,0.18);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.lightbox-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lightbox-btn .icon { width: 24px; height: 24px; }
.lightbox-close { top: var(--space-5); right: var(--space-5); }
.lightbox-prev { left: var(--space-5); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-5); top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: absolute; top: var(--space-6); left: var(--space-5);
  font-size: 0.8rem; letter-spacing: 0.14em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Sin View Transitions: aparición simple */
.lightbox.is-opening { animation: vt-fade-in var(--dur-base) var(--ease-out); }

/* Foto compartida miniatura ↔ visor */
::view-transition-group(lightbox-img) { animation-duration: 460ms; animation-timing-function: var(--ease-out); }
::view-transition-image-pair(lightbox-img) { overflow: clip; }
::view-transition-old(lightbox-img),
::view-transition-new(lightbox-img) { height: 100%; object-fit: cover; }
::view-transition-group(lightbox) { animation-duration: var(--dur-base); }

/* ── ACCIONES RÁPIDAS ── */
.action-bar {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-float);
  /* Capa propia: en Safari (iPhone) evita que fotos animadas se dibujen encima de la barra */
  transform: translateZ(0);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end;
}
.action-btn {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 48px;
  padding: 0 1.3rem;
  text-decoration: none;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base), background var(--dur-fast);
}
.action-btn .icon { width: 18px; height: 18px; }
.action-btn:hover { transform: translateY(-2px); }
.action-btn:active { transform: scale(0.96); }
.action-btn.call { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px rgba(232,160,32,0.3); }
.action-btn.secondary { display: none; }
.only-mobile { display: none; }

/* ── FOOTER ── */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--space-8) max(var(--gutter), (100% - var(--max)) / 2) var(--space-6);
}
.footer-inner {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.footer-logo { display: block; width: auto; height: 96px; margin: 0 0 var(--space-4); }
.footer-copy { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }
.footer-copy a { color: var(--accent); text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-social-title {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--space-3);
}
.footer-legal {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding-top: var(--space-5);
  text-align: center;
  font-size: 0.85rem; color: var(--muted);
}
.footer-credit { color: var(--text); }

/* ── REDES SOCIALES ── */
.social-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.social-btn {
  --brand: var(--accent);
  --brand-bg: var(--accent);
  --brand-on: #fff;
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px;
  padding: 0 1.1rem 0 0.9rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base), border-color var(--dur-base), transform var(--dur-fast) var(--ease-out);
}
/* Relleno con el color de la marca que crece desde el ícono */
.social-btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--brand-bg);
  clip-path: circle(0 at 1.6rem 50%);
  transition: clip-path var(--dur-slow) var(--ease-out);
}
.social-btn svg { width: 20px; height: 20px; fill: var(--brand); transition: fill var(--dur-base); }
.social-btn:hover, .social-btn:focus-visible { color: var(--brand-on); border-color: transparent; }
.social-btn:hover::before, .social-btn:focus-visible::before { clip-path: circle(150% at 1.6rem 50%); }
.social-btn:hover svg, .social-btn:focus-visible svg { fill: var(--brand-on); }
.social-btn:active { transform: scale(0.96); }

.social-btn.facebook  { --brand: #4B8EF7; --brand-bg: #1877F2; }
.social-btn.instagram { --brand: #F0517E; --brand-bg: linear-gradient(45deg, #F9CE34, #EE2A7B 50%, #6228D7); }
.social-btn.tiktok    { --brand: #F4EFE8; --brand-bg: #000; }
.social-btn.tiktok svg { filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }

/* Versión compacta (menú móvil): solo ícono */
.social-row.compact { padding-top: var(--space-4); gap: var(--space-3); }
.social-row.compact .social-btn { width: 48px; padding: 0; justify-content: center; }
.social-row.compact .social-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.social-row.compact .social-btn::before { clip-path: circle(0 at 50% 50%); }
.social-row.compact .social-btn:hover::before { clip-path: circle(75% at 50% 50%); }

/* ── TABLET ── */
@media (max-width: 1024px) {
  .galeria-track { --per-view: 3.3; }
  .nav-links a { padding-inline: var(--space-2); letter-spacing: 0.1em; }
  .nav-links a::after { left: var(--space-2); right: var(--space-2); }
  .hero { grid-template-columns: 1fr 0.8fr; gap: var(--space-6); }
  .ubicacion-card { width: min(380px, 100%); }
  .reco-grid { gap: var(--space-4); }
  .reco-body { padding: var(--space-4); }
}

@media (min-width: 901px) {
  .action-bar { display: none; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── MÓVIL ── */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  /* Sin desenfoque en celular: fondo casi sólido, mismo aspecto y scroll más fluido */
  nav { background: rgba(14,12,10,0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  nav.is-scrolled { background: rgba(14,12,10,0.97); }
  .nav-logo img { height: 44px; }

  .hero {
    min-height: calc(100svh - 68px - env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    align-items: end;
    padding-top: calc(var(--nav-h) + var(--space-6));
    padding-bottom: var(--space-7);
  }
  .hero-media {
    position: absolute; inset: 0; z-index: -2;
    max-height: none; min-height: 0;
  }
  .hero-media::after {
    background: linear-gradient(to top, var(--bg) 18%, rgba(14,12,10,0.75) 55%, rgba(14,12,10,0.45) 100%);
  }
  .hero-media-frame, .hero-stat { display: none; }
  .hero-title { font-size: clamp(3.4rem, 17vw, 5.5rem); }
  .hero-desc { color: #CFC8BF; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }

  .section { padding-block: var(--space-8); }

  .menu-tabs {
    top: var(--nav-h);
    width: 100%;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .menu-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
  .menu-tab { padding: 0 1rem; flex: 1 0 auto; }
  .menu-panel { grid-template-columns: 1fr; gap: var(--space-5); }
  .menu-photo { aspect-ratio: 16 / 9; }
  .menu-list-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
  .menu-cta { padding: var(--space-5); }
  .menu-cta-actions { width: 100%; }
  .menu-cta .btn { flex: 1 1 140px; }

  .reco-grid {
    grid-template-columns: repeat(3, minmax(78%, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .reco-grid::-webkit-scrollbar { display: none; }
  .reco-card { scroll-snap-align: start; }

  /* Reseñas: carrusel deslizable en lugar de 4 tarjetas apiladas */
  .reviews-grid {
    display: flex; gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 82%; scroll-snap-align: start; padding: var(--space-5) var(--space-4); }
  .review-card:hover { transform: none; }

  /* Formas de pago: una sola tarjeta con filas separadas por líneas */
  .pago-list { gap: 0; border: 1px solid var(--border); background: var(--bg); }
  .pago-item { gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 0; background: none; }
  .pago-item + .pago-item { border-top: 1px solid var(--border); }
  .pago-item.destacado { border: 0; border-top: 1px dashed var(--accent-line); }
  .pago-icon { width: 40px; height: 40px; border-radius: 10px; }
  .pago-title { font-size: 0.95rem; }
  .pago-desc { font-size: 0.8rem; line-height: 1.4; }

  .lightbox { padding: var(--space-9) var(--space-4) var(--space-8); }
  .lightbox-img { max-height: calc(100dvh - 14rem); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: var(--space-5); transform: none; }
  .lightbox-prev { left: calc(50% - 64px); }
  .lightbox-next { right: calc(50% - 64px); }



  .stats { grid-template-columns: 1fr 1fr; padding: 0; }
  .stat { padding: var(--space-5) var(--gutter); gap: var(--space-3); }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--border); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .stat-icon { width: 40px; height: 40px; }
  .stat-value { font-size: 1.3rem; }
  .stat-label { font-size: 0.78rem; }

  /* Carrusel a todo el ancho de la pantalla, con la siguiente foto asomándose */
  .galeria-track {
    --per-view: 1.45;
    --gap: var(--space-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .galeria-arrow { width: 40px; height: 40px; }
  .galeria-caption { font-size: 1.2rem; }

  .rating-hero { gap: var(--space-4); padding: var(--space-5); }
  .rating-source { margin-left: 0; text-align: left; flex-basis: 100%; }
  .rating-big { font-size: 4.5rem; }

  .servicios-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .servicios-label { margin-bottom: var(--space-3); }
  /* Domicilio: más compacto, ícono al lado del título y botón a todo el ancho */
  .domicilio-card {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    border-top: 3px solid var(--accent);
  }
  .domicilio-icon { width: 52px; height: 52px; margin: 0; border-radius: 12px; }
  .domicilio-icon .icon { width: 28px; height: 28px; }
  .domicilio-title { font-size: 1.6rem; margin: 0; }
  .domicilio-hora { grid-column: 1 / -1; justify-self: start; margin: var(--space-4) 0 0; }
  .domicilio-desc { grid-column: 1 / -1; font-size: 0.92rem; margin: var(--space-3) 0 var(--space-4); max-width: none; }
  .domicilio-card .btn { grid-column: 1 / -1; width: 100%; }

  .ubicacion { flex-direction: column; align-items: stretch; min-height: 0; }
  .ubicacion-map { position: relative; aspect-ratio: 4 / 3; }
  .ubicacion-map::after {
    background: linear-gradient(to top, rgba(14,12,10,0.9) 0%, transparent 35%);
  }
  .ubicacion-card {
    width: 100%; margin: 0;
    padding: var(--space-5);
    border: 0; border-top: 3px solid var(--accent);
    box-shadow: none;
    backdrop-filter: none;
  }
  .ubicacion-actions .btn { flex: 1 1 100%; }
  .domicilio-card { height: auto; }

  /* Botones flotantes abajo: la barra es transparente, solo se ven los tres botones */
  .action-bar {
    inset: auto 0 0 0;
    flex-direction: row; gap: var(--space-2); align-items: stretch;
    padding: var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: none;
    pointer-events: none; /* los huecos entre botones dejan tocar lo de atrás */
  }
  .action-btn {
    flex: 1; justify-content: center; gap: var(--space-2);
    min-height: 52px; padding: 0;
    border-radius: 14px;
    pointer-events: auto;
    /* sombra para que se distingan sobre fotos y texto */
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.75), 0 2px 6px rgba(0,0,0,0.4) !important;
    font-size: 0.82rem;
  }
  .action-btn:hover { transform: none; }
  .action-btn.secondary { display: flex; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); }
  .action-btn.call { flex: 1.3; }
  .only-desktop { display: none; }
  .only-mobile { display: inline; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  .footer-inner { flex-direction: column; gap: var(--space-6); }
  .social-row .social-btn { flex: 1 1 0; justify-content: center; padding: 0 var(--space-2); font-size: 0.8rem; }
  .social-row.compact .social-btn { flex: 0 0 48px; }
}

/* Celulares grandes / tablets chicas en vertical */
@media (min-width: 520px) and (max-width: 768px) {
  .galeria-track { --per-view: 2.4; }
}

@media (max-width: 400px) {
  .menu-list-grid { grid-template-columns: 1fr; }
  .stat { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════
   ANIMACIONES
   Todas viven aquí y solo corren si el usuario no pidió "reducir movimiento".
   Sin JS o sin soporte, el contenido se ve normal.
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* ── Portada: entrada en secuencia ── */
  .hero-copy > .eyebrow      { animation: a-rise 700ms var(--ease-out) 100ms both; }
  .hero-copy > .status-badge { animation: a-rise 700ms var(--ease-out) 200ms both; }
  .hero-line > span          { animation: a-line-up 1s var(--ease-out) 250ms both; }
  .hero-line + .hero-line > span { animation-delay: 380ms; }
  .hero-desc                 { animation: a-rise 800ms var(--ease-out) 600ms both; }
  .hero-actions              { animation: a-rise 800ms var(--ease-out) 740ms both; }
  .hero-media img            { animation: a-wipe 1.2s cubic-bezier(0.77, 0, 0.18, 1) 150ms both; }
  .hero-media-frame          { animation: a-frame 900ms var(--ease-out) 1000ms both; }
  .hero-stat                 { animation: a-rise 700ms var(--ease-out) 1100ms both; }

  /* ── Títulos de sección: la línea se dibuja de izquierda a derecha ── */
  .section-header.reveal .section-line {
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.2s var(--ease-out) 250ms;
  }
  .section-header.reveal.is-visible .section-line { transform: none; }

  /* ── Aparición escalonada: hermanos .reveal entran uno tras otro (JS pone --i) ── */
  .reveal.is-visible { transition-delay: calc(var(--i, 0) * 90ms); }

  /* ── Galería: las tarjetas llegan deslizándose ── */
  .galeria-track.reveal { opacity: 1; transform: none; }
  .galeria-track.reveal .galeria-item {
    opacity: 0; transform: translateX(40px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  }
  .galeria-track.reveal.is-visible .galeria-item { opacity: 1; transform: none; }
  .galeria-track .galeria-item:nth-child(2) { transition-delay: 90ms; }
  .galeria-track .galeria-item:nth-child(3) { transition-delay: 180ms; }
  .galeria-track .galeria-item:nth-child(4) { transition-delay: 270ms; }
  .galeria-track .galeria-item:nth-child(n+5) { transition-delay: 360ms; }

  /* ── Botón dorado: destello al pasar el mouse ── */
  @media (hover: hover) {
    .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
    .btn-primary::after {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
      transform: translateX(-110%);
    }
    .btn-primary:hover::after { transform: translateX(110%); transition: transform 750ms var(--ease-out); }
  }

  /* ── Menú superior: sombra al bajar ── */
  nav { transition: background var(--dur-slow), box-shadow var(--dur-slow); }
  nav.is-scrolled { background: rgba(14,12,10,0.94); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.8); }

  /* ── Efectos ligados al scroll (Chrome, Edge, Safari recientes) ── */
  @supports (animation-timeline: scroll()) {
    /* "GÜERO" de fondo se desplaza lento al bajar */
    .hero-bg-text {
      will-change: transform;
      animation: a-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }

  /* ── Página del menú: entrada ── */
  .breadcrumb            { animation: a-rise 600ms var(--ease-out) 50ms both; }
  .word-mask > span      { animation: a-line-up 900ms var(--ease-out) 150ms both; }
  .word-mask + .word-mask > span { animation-delay: 260ms; }
  .page-hero-row         { animation: a-rise 700ms var(--ease-out) 450ms both; }
  .page-hero::before     { animation: a-breathe 7s ease-in-out infinite; }
  .menu-tabs             { animation: a-rise 700ms var(--ease-out) 550ms both; }

  /* ── Menú: al mostrar una categoría (JS pone .is-entering y --i en cada platillo) ── */
  .menu-panel.is-entering { --d0: 0ms; }
  .menu-panel.is-entering.is-first { --d0: 650ms; }
  .menu-panel.is-entering .menu-photo img      { animation: a-settle 1.4s var(--ease-out) var(--d0) both; }
  .menu-panel.is-entering .menu-photo figcaption { animation: a-rise 700ms var(--ease-out) calc(var(--d0) + 200ms) both; }
  .menu-panel.is-entering .menu-panel-title    { animation: a-rise 600ms var(--ease-out) var(--d0) both; }
  .menu-panel.is-entering .menu-panel-count    { animation: a-fade 600ms var(--ease-out) calc(var(--d0) + 250ms) both; }
  .menu-panel.is-entering .menu-panel-head::after { animation: a-draw 900ms var(--ease-out) calc(var(--d0) + 100ms) both; }
  .menu-panel.is-entering .menu-subcategory    { animation: a-rise 500ms var(--ease-out) calc(var(--d0) + 120ms + var(--i, 0) * 28ms) both; }
  .menu-panel.is-entering .menu-list-item      { animation: a-item 550ms var(--ease-out) calc(var(--d0) + 160ms + var(--i, 0) * 28ms) both; }
  .menu-panel.is-entering .menu-next           { animation: a-rise 700ms var(--ease-out) calc(var(--d0) + 500ms) both; }
  .menu-panel.is-entering .item-badge          { animation: a-pop 500ms var(--ease-spring) calc(var(--d0) + 600ms) both; }

  .item-badge::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: a-shine 4s ease-in-out 1.5s infinite;
  }

  /* ── Menú: buscador ── */
  .menu-tools { animation: a-rise 700ms var(--ease-out) 500ms both; }
  .menu-results-group { animation: a-rise 450ms var(--ease-out) both; }
  .menu-result { animation: a-item 420ms var(--ease-out) calc(var(--i, 0) * 30ms) both; }
  .menu-panel.is-entering .menu-list-item.is-found, .menu-list-item.is-found { animation: a-found 1.6s ease-out both; }
  .share-btn.is-done .icon { animation: a-pop 450ms var(--ease-spring); }
  .menu-suggest:not([hidden]) .menu-chip { animation: a-chip 380ms var(--ease-out) both; }
  .menu-suggest .menu-chip:nth-of-type(2) { animation-delay: 40ms; }
  .menu-suggest .menu-chip:nth-of-type(3) { animation-delay: 80ms; }
  .menu-suggest .menu-chip:nth-of-type(4) { animation-delay: 120ms; }
  .menu-suggest .menu-chip:nth-of-type(5) { animation-delay: 160ms; }
  .menu-suggest-label { animation: a-fade 300ms var(--ease-out) both; }

  /* ── Cómo llegar ── */
  .ubicacion.reveal { opacity: 1; transform: none; }
  .ubicacion.reveal .ubicacion-card { opacity: 0; transform: translateX(-28px); transition: opacity 800ms var(--ease-out) 150ms, transform 900ms var(--ease-out) 150ms; }
  .ubicacion.reveal.is-visible .ubicacion-card { opacity: 1; transform: none; }
  .ubicacion.reveal .ubicacion-map { opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease-out), transform 1.8s var(--ease-out); }
  .ubicacion.reveal.is-visible .ubicacion-map { opacity: 1; transform: none; }
  .ubicacion.reveal.is-visible .ubicacion-corner { animation: a-frame 800ms var(--ease-out) 700ms both; }
  .ubicacion.reveal.is-visible .ubicacion-datos > li  { animation: a-rise 600ms var(--ease-out) both; }
  .ubicacion.reveal.is-visible .ubicacion-datos > li:nth-child(1) { animation-delay: 450ms; }
  .ubicacion.reveal.is-visible .ubicacion-datos > li:nth-child(2) { animation-delay: 560ms; }
  .ubicacion.reveal.is-visible .ubicacion-datos > li:nth-child(3) { animation-delay: 670ms; }
  .ubicacion.reveal.is-visible .ubicacion-actions { animation: a-rise 600ms var(--ease-out) 780ms both; }
  .ubicacion.reveal.is-visible .horario li.is-today { animation: a-today 1.4s ease-out 1.1s both; }

  /* Íconos: reloj gira, teléfono timbra, celular vibra */
  .ubicacion.reveal.is-visible [data-anim="clock"] .clock-min  { animation: a-hand-min 1.6s var(--ease-out) 600ms both; }
  .ubicacion.reveal.is-visible [data-anim="clock"] .clock-hour { animation: a-hand-hour 1.6s var(--ease-out) 600ms both; }
  .ubicacion.reveal.is-visible [data-anim="phone"] .icon  { animation: a-ring 900ms ease-in-out 1s both; }
  .ubicacion.reveal.is-visible [data-anim="mobile"] .icon { animation: a-buzz 700ms ease-in-out 1.25s both; }
  .ubicacion.reveal.is-visible .ubicacion-dato:hover [data-anim="clock"] .clock-min  { animation: a-hand-min-h 1.2s var(--ease-out); }
  .ubicacion.reveal.is-visible .ubicacion-dato:hover [data-anim="clock"] .clock-hour { animation: a-hand-hour-h 1.2s var(--ease-out); }
  .ubicacion.reveal.is-visible .ubicacion-dato-link:hover [data-anim="phone"] .icon  { animation: a-ring-h 800ms ease-in-out; }
  .ubicacion.reveal.is-visible .ubicacion-dato-link:hover [data-anim="mobile"] .icon { animation: a-buzz-h 600ms ease-in-out; }

  /* Pulso del mapa (dos anillos desfasados) */
  .map-pulse span { animation: a-radar 2.4s var(--ease-out) infinite; }
  .map-pulse span + span { animation-delay: 1.2s; }

  /* Botones: la flecha avanza, el auto acelera; palomita al copiar */
  .ubicacion-actions .btn-primary:hover .icon { transform: translateX(3px) rotate(-8deg); }
  .ubicacion-actions .btn-waze:hover .icon { animation: a-rev 800ms var(--ease-out); }
  .copy-btn.is-done .icon { animation: a-pop 450ms var(--ease-spring); }

  /* ── Datos clave (bajo la portada): un ícono tras otro al aparecer; se repiten con hover ── */
  .stat.reveal.is-visible .stat-icon { --sd: calc(350ms + var(--i, 0) * 160ms); }
  .stat.reveal.is-visible [data-anim="clock"] .clock-min  { animation: a-hand-min 1.6s var(--ease-out) var(--sd) both; }
  .stat.reveal.is-visible [data-anim="clock"] .clock-hour { animation: a-hand-hour 1.6s var(--ease-out) var(--sd) both; }
  .stat.reveal.is-visible [data-anim="star"] .icon        { animation: a-star 800ms var(--ease-spring) var(--sd) both; }
  .stat.reveal.is-visible [data-anim="star"]::after       { animation: a-burst 700ms var(--ease-out) calc(var(--sd) + 250ms) both; }
  .stat.reveal.is-visible [data-anim="scooter"] .icon     { animation: a-ride-in 1.1s var(--ease-out) var(--sd) both; }
  .stat.reveal.is-visible [data-anim="scooter"] .domicilio-lines { animation: a-lines 1.1s var(--ease-out) var(--sd) both; }
  .stat.reveal.is-visible [data-anim="invoice"] .icon     { animation: a-stamp 700ms var(--ease-spring) var(--sd) both; }

  .stat.reveal.is-visible:hover [data-anim="clock"] .clock-min  { animation: a-hand-min-h 1.2s var(--ease-out); }
  .stat.reveal.is-visible:hover [data-anim="clock"] .clock-hour { animation: a-hand-hour-h 1.2s var(--ease-out); }
  .stat.reveal.is-visible:hover [data-anim="star"] .icon        { animation: a-star-h 700ms var(--ease-spring); }
  .stat.reveal.is-visible:hover [data-anim="star"]::after       { animation: a-burst-h 650ms var(--ease-out) 120ms; }
  .stat.reveal.is-visible:hover [data-anim="scooter"] .icon     { animation: a-rev 900ms var(--ease-out); }
  .stat.reveal.is-visible:hover [data-anim="scooter"] .domicilio-lines { animation: a-lines-h 900ms var(--ease-out); }
  .stat.reveal.is-visible:hover [data-anim="invoice"] .icon     { animation: a-stamp-h 600ms var(--ease-spring); }

  /* ── Servicios: cada ícono se mueve según lo que representa ──
     Corren al aparecer la sección y se repiten al pasar el mouse / tocar. */
  .servicios-grid .reveal.is-visible [data-anim="cash"]    .icon { animation: a-coin 900ms var(--ease-out) 300ms both; }
  .servicios-grid .reveal.is-visible [data-anim="card"]    .icon { animation: a-swipe 900ms var(--ease-out) 450ms both; }
  .servicios-grid .reveal.is-visible [data-anim="mobile"]  .icon { animation: a-buzz 700ms ease-in-out 650ms both; }
  .servicios-grid .reveal.is-visible [data-anim="invoice"] .icon { animation: a-stamp 700ms var(--ease-spring) 800ms both; }
  .servicios-grid .reveal.is-visible .pago-item:hover [data-anim="cash"]    .icon { animation: a-coin-h 900ms var(--ease-out); }
  .servicios-grid .reveal.is-visible .pago-item:hover [data-anim="card"]    .icon { animation: a-swipe-h 700ms var(--ease-out); }
  .servicios-grid .reveal.is-visible .pago-item:hover [data-anim="mobile"]  .icon { animation: a-buzz-h 600ms ease-in-out; }
  .servicios-grid .reveal.is-visible .pago-item:hover [data-anim="invoice"] .icon { animation: a-stamp-h 600ms var(--ease-spring); }

  /* Moto: entra manejando, deja líneas de velocidad y luego "anda" con un leve rebote */
  .servicios-grid .reveal.is-visible .domicilio-icon .icon {
    animation: a-ride-in 1.1s var(--ease-out) 400ms both, a-idle 1.6s ease-in-out 1.5s infinite;
  }
  .servicios-grid .reveal.is-visible .domicilio-lines { animation: a-lines 1.1s var(--ease-out) 400ms both; }
  .servicios-grid .reveal.is-visible .domicilio-card:hover .domicilio-icon .icon { animation: a-rev 900ms var(--ease-out), a-idle 1.6s ease-in-out 900ms infinite; }
  .servicios-grid .reveal.is-visible .domicilio-card:hover .domicilio-lines { animation: a-lines-h 900ms var(--ease-out); }

  /* Galería: la foto se mueve más lento que la tarjeta al deslizar (efecto ventana) */
  @supports (animation-timeline: view(inline)) {
    /* La fachada se queda fija para que siempre se lea el letrero */
    .galeria-item:not(:first-child) .galeria-media :is(img, video) {
      animation: a-pan linear both;
      animation-timeline: view(inline);
    }
  }

  /* Celular: la foto de fondo hace un zoom lento en lugar de la cortina */
  @media (max-width: 768px) {
    .hero { overflow: hidden; }
    .hero-media img { animation: a-fade 900ms var(--ease-out) both, a-settle 2.4s var(--ease-out) both; }
  }
}

@keyframes a-rise    { from { opacity: 0; transform: translateY(18px); } }
@keyframes a-line-up { from { transform: translateY(110%); } }
@keyframes a-wipe    { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes a-frame   { from { opacity: 0; transform: translate(-14px, -14px); } }
@keyframes a-fade    { from { opacity: 0; } }
@keyframes a-settle  { from { transform: scale(1.12); } }
/* Íconos de servicios (las versiones "-h" son copias para poder repetir al hacer hover) */
@keyframes a-coin    { 0% { opacity: 0; transform: rotateY(-540deg) scale(0.6); } 60% { opacity: 1; } 100% { transform: rotateY(0) scale(1); } }
@keyframes a-coin-h  { from { transform: rotateY(-360deg); } }
@keyframes a-swipe   { 0% { opacity: 0; transform: translateX(-140%) rotate(-12deg); } 70% { opacity: 1; transform: translateX(8%) rotate(3deg); } 100% { transform: none; } }
@keyframes a-swipe-h { 0% { transform: none; } 40% { transform: translateX(-130%); opacity: 0; } 41% { transform: translateX(130%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes a-buzz    { 0%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: rotate(-12deg) translateX(-1px); } 20%, 40%, 60%, 80% { transform: rotate(12deg) translateX(1px); } }
@keyframes a-buzz-h  { 0%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: rotate(-12deg) translateX(-1px); } 20%, 40%, 60%, 80% { transform: rotate(12deg) translateX(1px); } }
@keyframes a-stamp   { 0% { opacity: 0; transform: translateY(-60%) scale(1.8); } 60% { opacity: 1; transform: scale(0.85); } 100% { transform: none; } }
@keyframes a-stamp-h { 0% { transform: none; } 35% { transform: translateY(-25%) scale(1.25); } 70% { transform: scale(0.88); } 100% { transform: none; } }
@keyframes a-ride-in { 0% { opacity: 0; transform: translateX(-160%); } 70% { opacity: 1; transform: translateX(10%); } 100% { transform: none; } }
@keyframes a-rev     { 0% { transform: none; } 30% { transform: translateX(-8%) rotate(-6deg); } 70% { transform: translateX(12%) rotate(2deg); } 100% { transform: none; } }
@keyframes a-idle    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes a-lines   { 0% { opacity: 0; transform: translateX(-30px); } 40% { opacity: 0.7; } 100% { opacity: 0; transform: translateX(-6px); } }
@keyframes a-lines-h { 0% { opacity: 0; transform: translateX(0); } 40% { opacity: 0.7; } 100% { opacity: 0; transform: translateX(-14px); } }
/* Datos clave (las "-h" son copias para poder repetir con hover) */
@keyframes a-hand-min    { from { transform: rotate(-720deg); } }
@keyframes a-hand-min-h  { from { transform: rotate(-360deg); } }
@keyframes a-hand-hour   { from { transform: rotate(-60deg); } }
@keyframes a-hand-hour-h { from { transform: rotate(-30deg); } }
@keyframes a-star        { 0% { opacity: 0; transform: scale(0) rotate(-144deg); } 100% { opacity: 1; transform: none; } }
@keyframes a-star-h      { 0% { transform: none; } 40% { transform: scale(1.35) rotate(72deg); } 100% { transform: rotate(72deg); } }
@keyframes a-burst       { 0% { opacity: 0.8; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes a-burst-h     { 0% { opacity: 0.8; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.2); } }

/* Menú: buscador */
@keyframes a-chip  { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@keyframes a-found { 0%, 60% { background-color: rgba(232,160,32,0.22); } 100% { background-color: transparent; } }

/* Cómo llegar */
@keyframes a-ring    { 0%, 100% { transform: none; } 10%, 30%, 50% { transform: rotate(-16deg); } 20%, 40%, 60% { transform: rotate(16deg); } 70% { transform: rotate(-6deg); } 80% { transform: none; } }
@keyframes a-ring-h  { 0%, 100% { transform: none; } 10%, 30%, 50% { transform: rotate(-16deg); } 20%, 40%, 60% { transform: rotate(16deg); } 70% { transform: rotate(-6deg); } 80% { transform: none; } }
@keyframes a-radar   { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes a-today   { 0% { box-shadow: inset 0 0 0 0 rgba(232,160,32,0); } 30% { box-shadow: inset 0 0 0 40px rgba(232,160,32,0.25); } 100% { box-shadow: inset 0 0 0 40px rgba(232,160,32,0); } }

/* Página del menú */
@keyframes a-item    { from { opacity: 0; transform: translateX(-12px); } }
@keyframes a-draw    { from { transform: scaleX(0); } }
@keyframes a-pop     { from { opacity: 0; transform: scale(0.4); } }
@keyframes a-shine   { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
@keyframes a-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes a-pan     { from { translate: 7% 0; scale: 1.16; } to { translate: -7% 0; scale: 1.16; } }
@keyframes a-drift   { to { transform: translateX(-12%); } }

/* ── MOVIMIENTO REDUCIDO ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}