/* ==========================================================================
   MURRIS SEAFOOD & GRILL — Menú digital
   Dirección de arte "Del faro al mural" (ver docs/BRAND.md)
   Tipografía: logotipo original vectorizado · Instrument Serif (display) · Archivo (texto, ancho variable)
   Mobile-first. Todo :hover vive dentro de @media (hover: hover).
   ========================================================================== */

/* Fuentes alojadas en el sitio (subconjunto "latin": español e inglés completos). Licencia SIL OFL.
   Archivo es variable: ancho 62–125 % y grosor 300–800 en un solo archivo. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

:root {
  --navy: #14263c;
  --navy-deep: #0b1a2c;
  --navy-2: #1d3552;
  --ink-black: #05090f;
  --sea: #46667f;
  --sun: #e1bc75;
  --sun-2: #f0d39b;
  --gold-ink: #8a6420;
  --cream: #f7f4ef;
  --paper: #fbf8f3;
  --line: #e6ded0;
  --ink: #14263c;
  --muted: #5d6a79;
  --mural-blue: #1f5bd6;
  --chili: #c2412a;
  --gingham: #2f6fdb;
  --mustard: #e9a321;

  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(20px, 5.5vw, 36px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  /* Curvas de resorte reales (masa-resorte-amortiguador), ver source/README */
  --spring-island: linear(
    0,
    0.016,
    0.0501,
    0.099,
    0.1593,
    0.2278,
    0.3017,
    0.3786,
    0.4564,
    0.5331,
    0.6074,
    0.6781,
    0.7441,
    0.8049,
    0.8601,
    0.9092,
    0.9524,
    0.9895,
    1.0209,
    1.0467,
    1.0673,
    1.0831,
    1.0946,
    1.1021,
    1.1063,
    1.1075,
    1.1062,
    1.1029,
    1.0978,
    1.0915,
    1.0843,
    1.0764,
    1.0682,
    1.0598,
    1.0516,
    1.0435,
    1.0359,
    1.0287,
    1.022,
    1.016,
    1.0106,
    1.0059,
    1.0018,
    0.9983,
    0.9954,
    0.9931,
    0.9913,
    0.99,
    0.9891,
    0.9886,
    0.9884,
    0.9885,
    0.9889,
    0.9894,
    0.99,
    0.9908,
    0.9916,
    0.9925,
    0.9934,
    0.9943,
    0.9952,
    0.996,
    0.9968,
    0.9975,
    1
  );
  --spring-sheet: linear(
    0,
    0.0111,
    0.0342,
    0.0667,
    0.106,
    0.1503,
    0.1978,
    0.2471,
    0.2971,
    0.3469,
    0.3958,
    0.4433,
    0.4891,
    0.5326,
    0.5739,
    0.6128,
    0.6492,
    0.683,
    0.7144,
    0.7434,
    0.77,
    0.7944,
    0.8167,
    0.837,
    0.8554,
    0.8721,
    0.8871,
    0.9006,
    0.9128,
    0.9236,
    0.9333,
    0.9419,
    0.9496,
    0.9564,
    0.9624,
    0.9677,
    0.9723,
    0.9764,
    0.98,
    0.9831,
    0.9858,
    0.9881,
    0.9901,
    0.9919,
    0.9934,
    0.9946,
    0.9957,
    0.9966,
    0.9974,
    0.9981,
    0.9986,
    0.999,
    0.9994,
    0.9997,
    1,
    1.0001,
    1.0003,
    1.0004,
    1.0005,
    1
  );
  --spring-snappy: linear(
    0,
    0.0215,
    0.0623,
    0.1181,
    0.1843,
    0.257,
    0.333,
    0.4097,
    0.485,
    0.5573,
    0.6254,
    0.6885,
    0.746,
    0.7978,
    0.8436,
    0.8836,
    0.9181,
    0.9473,
    0.9716,
    0.9915,
    1.0074,
    1.0197,
    1.0289,
    1.0354,
    1.0396,
    1.042,
    1.0427,
    1.0423,
    1.0408,
    1.0387,
    1.036,
    1.033,
    1.0298,
    1.0265,
    1.0232,
    1.0201,
    1.0171,
    1.0143,
    1.0118,
    1.0095,
    1.0074,
    1.0056,
    1.004,
    1.0027,
    1.0016,
    1.0007,
    0.9999,
    0.9993,
    0.9989,
    0.9986,
    0.9984,
    0.9982,
    0.9982,
    0.9982,
    1
  );
  /* Resorte críticamente amortiguado (sin rebasar el destino): para encoger la isla.
     Con rebote, al pasar de 631 px a 44 px de alto el 10 % de sobrepaso dejaba la isla en 0 px. */
  --spring-collapse: linear(
    0,
    0.0207,
    0.0674,
    0.1295,
    0.1994,
    0.272,
    0.3439,
    0.4128,
    0.4775,
    0.5373,
    0.5918,
    0.6411,
    0.6852,
    0.7246,
    0.7595,
    0.7903,
    0.8175,
    0.8413,
    0.8621,
    0.8803,
    0.8962,
    0.9101,
    0.9221,
    0.9325,
    0.9416,
    0.9495,
    0.9563,
    0.9622,
    0.9674,
    0.9718,
    0.9756,
    0.979,
    0.9818,
    0.9843,
    0.9864,
    0.9883,
    0.9899,
    0.9913,
    0.9925,
    0.9935,
    0.9944,
    0.9952,
    0.9958,
    0.9964,
    0.9969,
    0.9973,
    0.9977,
    1
  );
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-island: cubic-bezier(0.34, 1.4, 0.64, 1);
    --spring-sheet: cubic-bezier(0.22, 1, 0.36, 1);
    --spring-snappy: cubic-bezier(0.34, 1.3, 0.64, 1);
    --spring-collapse: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked {
  overflow: hidden;
}
img,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--sun);
  color: var(--navy);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip:focus {
  left: 8px;
}

.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
}
.ico--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--fill {
  fill: currentColor;
}
.ico--brand {
  overflow: visible;
}

/* Escala tipográfica */
.label {
  font: 600 0.7rem/1.2 var(--f-sans);
  font-stretch: 78%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Revelado de títulos con máscara (línea que sube) */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.reveal-line > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.is-in .reveal-line > span,
.reveal-line.is-in > span {
  transform: none;
}
.reveal-media {
  clip-path: inset(12% 6% 12% 6% round var(--r-md));
  transition: clip-path 1.1s var(--ease-out);
}
.reveal-media.is-in {
  clip-path: inset(0 0 0 0 round var(--r-md));
}
.fade-in {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.fade-in.is-in {
  opacity: 1;
}

/* Imágenes: aparecen desde desenfoque al cargar */
img.blur-up {
  filter: blur(14px);
  transform: scale(1.04);
  transition:
    filter 0.7s var(--ease-out),
    transform 0.9s var(--ease-out);
}
img.blur-up.is-loaded {
  filter: none;
  transform: none;
}

/* ==========================================================================
   ISLA DINÁMICA
   Rendimiento: la forma se dibuja con 6 piezas animadas SOLO con transform (GPU).
   Nada en la isla anima width/height, filtros ni backdrop-filter.
   ========================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(5, 9, 15, 0.55);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.scrim.is-on {
  opacity: 1;
}

/* Ancla de 0×0 en la esquina superior DERECHA (alcance del pulgar): todo crece hacia la izquierda
   y hacia abajo. --revela la calcula js/isla.js con la física del resorte: es el momento en que la
   forma ya cubre su tamaño final y el contenido puede aparecer sin salirse. */
.island {
  position: fixed;
  z-index: 50;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 0;
  height: 0;
  pointer-events: none;
  color: #fff;
  --revela: 0ms;
  --asoma: 0ms;
  --pill-cx: -80px;
}
.island__body {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  transform-origin: var(--pill-cx) 24px; /* al presionar se encoge desde el centro de la píldora */
  transition: transform 0.45s var(--spring-snappy);
}
.island.is-pressed .island__body {
  transform: scale(0.95);
  transition-duration: 0.2s;
}

.island__shape {
  position: absolute;
  left: 0;
  top: 0;
}
.island__shape > i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: var(--ink-black);
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
.island__shape > i.c {
  border-radius: 50%;
}
/* Recorte del contenido a la forma (js/isla.js → recorte): dos capas que se trasladan en sentidos
   opuestos dentro de la misma animación que la forma. El contenido nunca se ve fuera de la isla. */
.island__clip {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.island__clip-in {
  position: absolute;
  left: 0;
  will-change: transform;
}

/* Gota (carrito) y la membrana que la une a la isla al despegarse: van DEBAJO de la forma negra,
   así cuando la isla crece la cubre y parece que la absorbe. */
.island__puente {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  overflow: visible;
  fill: var(--ink-black);
}
.island__gota {
  position: absolute;
  z-index: 0;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink-black);
  color: var(--sun);
  transform-origin: 50% 50%;
  will-change: transform;
  visibility: hidden;
}
.island__gota.is-on {
  visibility: visible;
  pointer-events: auto;
}
.island__gota-in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font: 700 1.02rem/1 var(--f-sans);
  font-variant-numeric: tabular-nums lining-nums;
  transition: transform 0.35s var(--spring-snappy);
}
.island__gota:active .island__gota-in {
  transform: scale(0.86);
  transition-duration: 0.12s;
}
.island__gota .roll {
  height: 22px;
  line-height: 22px;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.16s var(--ease-out),
    transform 0.5s var(--spring-snappy);
}
.island__gota.is-lista .roll {
  opacity: 1;
  transform: none;
}
.island__gota:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
}

/* capa compacta (pegada a la derecha del ancla) */
.island__compact {
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
  width: max-content; /* el ancla mide 0 px: sin esto el contenido se encoge a su mínimo y recorta la etiqueta */
  display: flex;
  align-items: center;
  white-space: nowrap;
  transform-origin: 100% 50%;
  transition:
    opacity 0.24s var(--revela) var(--ease-out),
    transform 0.5s calc(var(--revela) - 80ms) var(--spring-snappy);
}
.island[data-state="compact"] .island__compact {
  pointer-events: auto;
}
.island[data-state="open"] .island__compact,
.island[data-state="live"] .island__compact {
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity 0.1s,
    transform 0.2s;
}
.island__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px 0 8px;
  border: 0;
  background: transparent;
}
.island__logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.island__toggle:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: -4px;
  border-radius: 24px;
}
.island__label {
  position: relative;
  display: inline-grid;
  height: 20px;
  overflow: hidden;
  font: 600 0.92rem/20px var(--f-sans);
  letter-spacing: 0.01em;
  flex: none;
  transition: width 0.4s var(--spring-snappy);
}
.island__label > span {
  grid-area: 1 / 1;
  transition:
    transform 0.5s var(--spring-snappy),
    opacity 0.25s var(--ease-out);
}
.island__label > span.is-leaving {
  transform: translateY(-100%);
  opacity: 0;
}
.island__label > span.is-entering {
  transform: translateY(100%);
  opacity: 0;
}

.burger {
  position: relative;
  width: 18px;
  height: 12px;
  margin-left: 2px;
}
.burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
}
.burger i:first-child {
  top: 2px;
}
.burger i:last-child {
  top: 8.5px;
}

.roll {
  position: relative;
  display: inline-grid;
  height: 30px;
  overflow: hidden;
  vertical-align: top;
}
.roll > span {
  grid-area: 1 / 1;
  transition:
    transform 0.45s var(--spring-snappy),
    opacity 0.25s;
}
.roll > span.is-leaving {
  transform: translateY(-100%);
  opacity: 0;
}
.roll > span.is-entering {
  transform: translateY(100%);
  opacity: 0;
}

/* actividad en vivo ("Agregado a tu lista") */
.island__live {
  position: absolute;
  right: 0;
  top: 0;
  height: 72px;
  width: 356px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.1s,
    transform 0.2s;
}
.island[data-state="live"] .island__live {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.24s var(--asoma) var(--ease-out),
    transform 0.45s var(--asoma) var(--spring-snappy);
}
.live__thumb {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  object-fit: cover;
  flex: none;
  background: var(--navy-2);
}
.live__thumb--cut {
  object-fit: contain;
  padding: 3px;
}
.live__thumb--logo {
  padding: 0;
  border-radius: 50%;
}
.live__text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.live__text small {
  display: block;
  font: 600 0.68rem/1.3 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun);
}
.live__text strong {
  display: block;
  font: 400 1.2rem/1.2 var(--f-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live__check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #34c759;
  color: #fff;
  flex: none;
  font-size: 1rem;
}
.live__check .ico {
  stroke-width: 2.5;
}
.live__check .ico > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.island[data-state="live"] .live__check .ico > * {
  animation: draw 0.45s calc(var(--asoma) + 0.2s) var(--ease-out) forwards;
}

/* panel expandido */
.island__panel {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 32px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  visibility: hidden;
  transition: visibility 0s 0.12s;
  outline: none;
}
.island__panel::-webkit-scrollbar {
  display: none;
}
.island[data-state="open"] .island__panel {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
.ip {
  padding: 16px 16px 18px;
}
/* El contenido ya está recortado por la forma: se revela con ella (--asoma) como una ventana que
   se abre, con un leve fundido y caída de arriba hacia abajo. Al cerrar se va al instante. */
.ip > *,
.ip-browse > * {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.1s,
    transform 0.1s;
}
.island[data-state="open"] .ip > *,
.island[data-state="open"] .ip-browse > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.45s var(--spring-snappy);
  transition-delay: calc(var(--asoma) + var(--i, 0) * 30ms);
}
.island[data-state="open"] .ip-browse {
  opacity: 1;
  transform: none;
  transition: none;
}

.ip-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ip-search {
  position: relative;
  flex: 1;
}
.ip-search .ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.1rem;
}
.ip-search input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 42px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: 500 16px/1 var(--f-sans); /* 16 px: iOS no hace zoom al enfocar */
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.25s;
}
.ip-search input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ip-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.ip-search input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.16);
}
.ip-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.15rem;
  transition:
    transform 0.4s var(--spring-snappy),
    background 0.2s;
}
.ip-close:active {
  transform: scale(0.88) rotate(90deg);
}

.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.seg button {
  position: relative;
  z-index: 1;
  height: 34px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font: 600 0.84rem/1 var(--f-sans);
  transition: color 0.3s;
}
.seg button[aria-pressed="true"] {
  color: var(--navy);
}
.seg__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 10px;
  background: var(--sun);
  transition: transform 0.55s var(--spring-snappy);
}
.seg[data-active="1"] .seg__thumb {
  transform: translateX(100%);
}

.ip-title {
  margin: 18px 4px 8px;
  font: 600 0.66rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ip-quick {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px;
}
.ip-quick::-webkit-scrollbar {
  display: none;
}
.ip-quick a {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 138px;
  height: 96px;
  padding: 10px 12px 11px;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  transition:
    transform 0.45s var(--spring-snappy),
    background 0.2s;
}
.ip-quick a:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.14);
}
.ip-quick a small {
  position: relative;
  z-index: 1;
  font: 600 0.62rem/1.2 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sun);
}
.ip-quick a span {
  position: relative;
  z-index: 1;
  font: 400 1.12rem/1.08 var(--f-serif);
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ip-quick a img {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.ip-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
.ip-cats a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 6px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  transition:
    background 0.2s,
    color 0.2s;
}
.ip-cats a:active {
  background: rgba(255, 255, 255, 0.1);
}
.ip-cats .n {
  font: 500 0.7rem/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
  width: 16px;
  flex: none;
}
.ip-cats .t {
  font: 400 1.18rem/1.15 var(--f-serif);
  flex: 1;
  min-width: 0;
}
.ip-cats a[aria-current="true"] {
  color: var(--sun);
}
.ip-cats a[aria-current="true"] .n {
  color: var(--sun);
}

.ip-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 52svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ip-results button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 6px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  text-align: left;
  color: #fff;
}
.ip-results .r-name {
  flex: 1;
  min-width: 0;
  font: 400 1.1rem/1.2 var(--f-serif);
}
.ip-results .r-cat {
  display: block;
  margin-top: 2px;
  font: 500 0.72rem/1.2 var(--f-sans);
  color: rgba(255, 255, 255, 0.5);
}
.ip-results .r-price {
  font: 600 0.9rem/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
  color: var(--sun);
}
.ip-results mark {
  background: none;
  color: var(--sun);
}
.ip-empty {
  padding: 18px 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.ip-foot {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.ip-foot a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 22px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  font: 600 0.84rem/1 var(--f-sans);
}
.ip-foot a:first-child {
  background: var(--sun);
  color: var(--navy);
}
.ip-foot a.ip-social {
  flex: 0 0 44px;
}
.ip-foot a.ip-social .ico {
  font-size: 1.3rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  /* Un poco menos que la pantalla: asoma la promo de hoy y se entiende que hay más abajo */
  min-height: 82svh;
  min-height: max(82svh, 560px);
  display: flex;
  flex-direction: column;
  color: var(--cream);
  /* Fondo mientras arranca el mural WebGL (y si el celular no tiene WebGL): manchas con los colores
     del mural, sin foto. Antes era una foto borrosa de un coctel y se veía como imagen rota. */
  background:
    radial-gradient(90% 45% at 12% 4%, rgba(255, 122, 61, 0.55), rgba(255, 122, 61, 0) 70%),
    radial-gradient(70% 35% at 88% 12%, rgba(255, 92, 147, 0.32), rgba(255, 92, 147, 0) 70%),
    radial-gradient(80% 45% at 78% 62%, rgba(51, 195, 240, 0.3), rgba(51, 195, 240, 0) 70%),
    radial-gradient(110% 60% at 18% 78%, rgba(31, 91, 214, 0.75), rgba(31, 91, 214, 0) 72%), var(--navy-deep);
  isolation: isolate;
  overflow: hidden;
}
.hero__mural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__mural.is-ready {
  opacity: 1;
}
.hero.no-webgl .hero__mural {
  display: none;
}
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 42% at 50% 44%, rgba(5, 9, 15, 0.62) 0%, rgba(5, 9, 15, 0) 72%),
    linear-gradient(
      180deg,
      rgba(5, 9, 15, 0.45) 0%,
      rgba(5, 9, 15, 0) 20%,
      rgba(5, 9, 15, 0) 62%,
      rgba(5, 9, 15, 0.72) 100%
    );
}
.hero__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 76px var(--pad) 20px;
}
.lighthouse {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 26px;
}
.lighthouse__logo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(247, 244, 239, 0.14),
    0 22px 60px rgba(0, 0, 0, 0.5);
  animation: logo-in 1.3s 0.15s var(--ease-out) both;
}
.lighthouse__glow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 26%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 160, 0.45) 0%, rgba(255, 228, 160, 0) 65%);
  animation:
    glow 5s ease-in-out infinite,
    fade-in 1.6s 0.7s both;
}
.lighthouse__beam {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 26%;
  width: 260vmax;
  height: 260vmax;
  margin: -130vmax 0 0 -130vmax;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 236, 190, 0) 0deg,
    rgba(255, 236, 190, 0.26) 7deg,
    rgba(255, 236, 190, 0) 15deg,
    rgba(255, 236, 190, 0) 180deg,
    rgba(255, 236, 190, 0.18) 187deg,
    rgba(255, 236, 190, 0) 195deg,
    rgba(255, 236, 190, 0) 360deg
  );
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 18%, transparent 42%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 18%, transparent 42%);
  mix-blend-mode: screen;
  animation:
    beam 12s linear infinite,
    fade-in 2.2s 1s both;
  pointer-events: none;
}
.wordmark {
  margin: 0;
  line-height: 0;
}
.wordmark__art {
  display: block;
  width: min(78vw, 360px);
  aspect-ratio: 2243 / 631;
  background: var(--cream);
  -webkit-mask: url("img/wordmark.svg") center / contain no-repeat;
  mask: url("img/wordmark.svg") center / contain no-repeat;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.35));
  animation: wordmark-in 1.4s 0.45s var(--ease-out) both;
}
.hero__tagline {
  margin: 22px 0 0;
  font: italic 400 clamp(1.35rem, 6vw, 1.7rem)/1.2 var(--f-serif);
  color: var(--sun-2);
  animation: fade-up 1.1s 0.95s var(--ease-out) both;
}
.hero__place {
  margin: 10px 0 0;
  font: 600 0.68rem/1.4 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.7);
  animation: fade-up 1.1s 1.1s var(--ease-out) both;
}
.scroll-cue {
  position: relative;
  z-index: 2;
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 58px;
  text-decoration: none;
  font: 600 0.68rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  animation: fade-in 1s 1.4s both;
}
/* "Ver la carta": píldora con filete, sin relleno (no compite con el logotipo) */
.scroll-cue span {
  padding: 13px 20px 12px;
  border: 1px solid rgba(247, 244, 239, 0.38);
  border-radius: 999px;
  background: rgba(5, 9, 15, 0.28);
  transition:
    transform 0.45s var(--spring-snappy),
    background 0.25s,
    border-color 0.25s;
}
.scroll-cue:active span {
  transform: scale(0.94);
  background: rgba(5, 9, 15, 0.45);
}
@media (hover: hover) {
  .scroll-cue:hover span {
    border-color: var(--sun);
    color: var(--sun-2);
  }
}
.scroll-cue i {
  position: relative;
  width: 1px;
  height: 38px;
  background: rgba(247, 244, 239, 0.2);
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--sun);
  animation: cue 2.2s var(--ease-out) infinite;
}
.waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}
.waves__layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
}
.waves__layer path {
  fill: currentColor;
}
.waves__layer--back {
  color: rgba(51, 195, 240, 0.28);
  height: 90%;
  animation: drift 20s linear infinite;
}
.waves__layer--front {
  color: var(--paper);
  height: 60%;
  animation: drift 26s linear infinite;
}

/* ==========================================================================
   Encabezados de sección (editorial)
   ========================================================================== */
.sh {
  margin: 0 0 18px;
}
.sh__title {
  margin: 8px 0 0;
  font: 400 clamp(2.3rem, 10vw, 3.2rem)/1 var(--f-serif);
  letter-spacing: -0.01em;
  color: var(--navy);
}
.sh__title em {
  font-style: italic;
  color: var(--gold-ink);
}
.sh__sub {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 40ch;
}

/* ==========================================================================
   PROMO DE HOY
   ========================================================================== */
.today {
  padding: 44px var(--pad) 8px;
  max-width: 760px;
  margin: 0 auto;
}
.promo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 340px;
  padding: 20px 20px 22px;
  border-radius: var(--r-lg);
  background: var(--navy-deep);
  color: var(--cream);
}
.promo::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -2;
  background:
    linear-gradient(
      165deg,
      rgba(255, 122, 61, 0.5) 0%,
      rgba(255, 92, 147, 0.28) 32%,
      rgba(31, 91, 214, 0.18) 62%,
      rgba(5, 9, 15, 0.96) 100%
    ),
    url("img/mural-blur.webp") center / cover;
  animation: slow-pan 26s ease-in-out infinite alternate;
}
.promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(5, 9, 15, 0.9) 0%, rgba(5, 9, 15, 0.25) 58%, rgba(5, 9, 15, 0) 100%);
}
.promo__day {
  font: 600 0.68rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun-2);
}
.promo__day b {
  color: #fff;
  font-weight: 700;
}
.promo__art {
  position: absolute;
  right: -18px;
  top: 26px;
  width: min(64%, 300px);
}
.promo__img {
  width: 100%;
  filter: drop-shadow(0 26px 22px rgba(0, 0, 0, 0.5));
  animation: float 7s ease-in-out infinite;
}
.promo__content {
  position: relative;
  margin-top: 150px;
}
.promo__title {
  margin: 0;
  max-width: 11ch;
  font: 800 clamp(2.4rem, 12.5vw, 3.4rem)/0.92 var(--f-sans);
  font-stretch: 62%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.promo__row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 14px;
}
.promo__price {
  font: 800 2.6rem/0.9 var(--f-sans);
  font-stretch: 62%;
  color: var(--sun);
  font-variant-numeric: lining-nums;
}
.promo__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(247, 244, 239, 0.82);
  max-width: 24ch;
}
.promo__empty p {
  margin: 10px 0 0;
  color: rgba(247, 244, 239, 0.82);
  max-width: 32ch;
}
.promo [data-swap] {
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.6s var(--spring-snappy),
    filter 0.4s;
}
.promo.is-out [data-swap] {
  opacity: 0;
  filter: blur(6px);
  transform: translateX(calc(var(--dir, 1) * -36px));
  transition-duration: 0.22s;
  transition-timing-function: var(--ease-in);
}
.promo.is-in-from [data-swap] {
  opacity: 0;
  filter: blur(6px);
  transform: translateX(calc(var(--dir, 1) * 36px));
  transition: none;
}

.week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 12px;
  padding: 4px;
  border-radius: 14px;
  background: #efe9df;
}
.week button {
  position: relative;
  z-index: 1;
  height: 50px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 600 0.8rem/1 var(--f-sans);
  color: var(--navy);
  transition: color 0.3s;
}
.week button small {
  font: 500 0.56rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.week button.is-off {
  color: var(--muted);
} /* contraste AA: #a3abb5 daba 2.2:1 */
.week button[aria-pressed="true"] {
  color: var(--cream);
}
.week button[aria-pressed="true"] small {
  color: var(--sun);
}
.week button.is-today::after {
  content: "";
  position: absolute;
  top: 6px;
  right: calc(50% - 14px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--chili);
}
.week__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 7);
  border-radius: 10px;
  background: var(--navy);
  transform: translateX(calc(var(--pos, 0) * 100%));
  transition: transform 0.6s var(--spring-snappy);
}

/* ==========================================================================
   BUFFET (canastas de cuadros azules)
   ========================================================================== */
.buffet {
  padding: 40px var(--pad) 8px;
  max-width: 760px;
  margin: 0 auto;
}
.buffet__card {
  border-radius: var(--r-lg);
  padding: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(47, 111, 219, 0.55) 0 20px, transparent 20px 40px),
    repeating-linear-gradient(90deg, rgba(47, 111, 219, 0.55) 0 20px, transparent 20px 40px), #fff;
}
.buffet__inner {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 22px 20px 20px;
  background: #1f4fc4;
  color: #fff;
}
.buffet__sticker {
  position: absolute;
  top: 16px;
  right: 14px;
  z-index: 2;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  padding: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--sun);
  color: var(--navy);
  font: 800 0.78rem/1 var(--f-sans);
  font-stretch: 62%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: rotate(10deg);
}
.buffet__label {
  padding-right: 92px;
  font: 600 0.68rem/1.4 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sun-2);
}
.buffet__title {
  margin: 8px 0 0;
  font: 800 clamp(3rem, 16vw, 4rem)/0.86 var(--f-sans);
  font-stretch: 62%;
  text-transform: uppercase;
}
.buffet__title span {
  display: block;
  margin-top: 8px;
  color: #ffb547;
  font-size: 0.42em;
  line-height: 1.05;
}
.buffet__desc {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 34ch;
}
.buffet__photos {
  position: relative;
  height: 200px;
  margin: 20px 0 10px;
}
.buffet__photo {
  position: absolute;
  height: 196px;
  width: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  border: 5px solid #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.8s var(--spring-snappy);
}
.buffet__photo--a {
  left: 0;
  transform: rotate(-5deg);
}
.buffet__photo--b {
  right: 0;
  top: 6px;
  height: 186px;
  transform: rotate(5deg);
}
.buffet__card.is-in .buffet__photo--a {
  animation: polaroid-a 1s 0.2s var(--spring-snappy) both;
}
.buffet__card.is-in .buffet__photo--b {
  animation: polaroid-b 1s 0.32s var(--spring-snappy) both;
}
.buffet__when {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ff8a1f;
  color: var(--navy-deep); /* blanco sobre naranja daba 2.3:1 */
  font: 800 1rem/1.1 var(--f-sans);
  font-stretch: 70%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.buffet__prices {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.buffet__prices li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 500;
}
.buffet__prices .lead {
  flex: 1;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
  transform: translateY(-4px);
}
.buffet__prices strong {
  font: 800 1.5rem/1 var(--f-sans);
  font-stretch: 62%;
  color: #ffd36b;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   FAVORITOS
   ========================================================================== */
.favs {
  padding: 48px 0 6px;
  max-width: 1100px;
  margin: 0 auto;
}
.favs .sh {
  padding: 0 var(--pad);
}
.favs__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px var(--pad) 24px;
  scroll-padding: 0 var(--pad);
}
.favs__track::-webkit-scrollbar {
  display: none;
}
.fav {
  position: relative;
  flex: none;
  width: min(70vw, 280px);
  aspect-ratio: 4 / 5;
  border: 0;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  text-align: left;
  color: var(--cream);
  background: var(--navy);
  transition: transform 0.5s var(--spring-snappy);
}
.fav:active {
  transform: scale(0.97);
}
.fav__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.fav--cut {
  background: radial-gradient(120% 80% at 50% 28%, #2a62d9 0%, var(--navy) 62%, var(--navy-deep) 100%);
}
.fav__media--cut {
  object-fit: contain;
  padding: 12% 8% 36%;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.45));
}
.fav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(5, 9, 15, 0.86) 0%, rgba(5, 9, 15, 0.15) 46%, rgba(5, 9, 15, 0) 66%);
}
.fav__info {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 15px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.fav__name {
  flex: 1;
  font: 400 1.5rem/1.05 var(--f-serif);
}
.fav__price {
  font: 600 0.9rem/1.2 var(--f-sans);
  font-variant-numeric: tabular-nums;
  color: var(--sun);
  white-space: nowrap;
}
.fav__price.is-ask {
  font-size: 0.7rem;
  font-stretch: 80%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fav__n {
  position: absolute;
  top: 14px;
  left: 16px;
  font: 600 0.66rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.14em;
  color: rgba(247, 244, 239, 0.8);
}
@media (hover: hover) {
  .fav:hover {
    transform: translateY(-3px);
  }
}

/* ==========================================================================
   MENÚ
   ========================================================================== */
.menu {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px var(--pad) 24px;
}
.menu__loading {
  text-align: center;
  color: var(--muted);
  padding: 60px 0;
}
.cat {
  padding: 40px 0 6px;
}
/* Encabezado de categoría: número y conteo arriba, título serif y la ilustración de la carta
   "apoyada" sobre el filete azul marino, como un objeto en una repisa. */
.cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--navy);
}
.cat-head__text {
  flex: 1;
  min-width: 0;
}
.cat-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.cat-head__num {
  font: 600 0.74rem/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
  color: var(--gold-ink);
}
.cat-head__title {
  margin: 0;
  font: 400 clamp(2.1rem, 9.5vw, 2.8rem)/1 var(--f-serif);
  color: var(--navy);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cat-head__count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 0.72rem/1 var(--f-sans);
  color: var(--muted);
}
.cat-head__count::before {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(138, 100, 32, 0.45);
}

/* Ilustración de línea (web/ilustraciones.js): cada trazo se dibuja al entrar el encabezado */
.cat-ilus {
  flex: none;
  width: clamp(88px, 25vw, 116px);
  height: auto;
  margin: -6px -6px -18px 0;
  overflow: visible;
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 88%;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.cat-ilus--espejo {
  scale: -1 1;
}
.cat-ilus path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.cat-head.is-in .cat-ilus {
  opacity: 1;
}
.cat-head.is-in .cat-ilus path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--ease-out);
  transition-delay: calc(0.2s + min(var(--k, 0) * 55ms, 0.9s));
}
/* Mejora progresiva: con el scroll la ilustración se mece como sobre el agua
   (animation-timeline: Chrome, Firefox 159+, iOS 26+; sin soporte se queda quieta) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cat-ilus {
      animation: ilus-mece linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes ilus-mece {
  0% {
    rotate: -6deg;
    translate: 0 5px;
  }
  50% {
    rotate: 1deg;
    translate: 0 0;
  }
  100% {
    rotate: 5deg;
    translate: 0 -3px;
  }
}
.cat-note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.dish {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 14px;
  border-bottom: 1px solid var(--line);
}
.dish:last-child {
  border-bottom: 0;
}
.dish__main {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 14px;
  width: 100%;
  padding: 18px 0 18px;
  border: 0;
  background: transparent;
  text-align: left;
  transition: background 0.3s;
}
.dish__main:active .dish__name {
  color: var(--gold-ink);
}
.dish__text {
  min-width: 0;
  padding-right: var(--add-space, 48px);
}
.dish.has-thumb .dish__text {
  padding-right: 0;
}
.dish__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dish__name {
  margin: 0;
  font: 400 1.36rem/1.15 var(--f-serif);
  color: var(--navy);
  transition: color 0.2s;
}
.dish__alt {
  display: block;
  font: 500 0.74rem/1.3 var(--f-sans);
  color: var(--muted);
  margin-top: 1px;
}
.dish__lead {
  flex: 1;
  min-width: 12px;
  border-bottom: 1px dotted rgba(138, 100, 32, 0.45);
  transform: translateY(-5px);
}
.dish__price {
  flex: none;
  font: 600 1rem/1 var(--f-sans);
  color: var(--navy);
  font-variant-numeric: tabular-nums lining-nums;
}
.dish__price.is-ask {
  font: 600 0.66rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dish__desc {
  display: block;
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 9px;
}
.mark {
  font: 600 0.64rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.mark::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.12em;
}
.mark--picante {
  color: var(--chili);
}
.mark--compartir {
  color: var(--mural-blue);
}
.mark--nuevo {
  color: #b5245c;
}
.dish__thumb {
  width: 76px;
  height: 76px;
  margin-top: 4px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--navy);
}
.dish__thumb--cut {
  object-fit: contain;
  padding: 5px;
  background: radial-gradient(circle at 50% 35%, #2a62d9, var(--navy));
}

/* Botón agregar: + que gira y se convierte en ✓ */
.add {
  position: absolute;
  right: 0;
  top: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  display: grid;
  place-items: center;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s,
    transform 0.45s var(--spring-snappy);
}
.dish.has-thumb .add {
  top: 72px;
  right: -8px;
  box-shadow: 0 4px 12px rgba(11, 26, 44, 0.2);
  border-color: transparent;
  background: #fff;
}
.dish.has-thumb .add.is-on {
  background: var(--navy);
  color: var(--sun);
}
.add:active {
  transform: scale(0.82);
}
.add .ico {
  grid-area: 1 / 1;
  font-size: 1.05rem;
  stroke-width: 2;
  transition:
    transform 0.5s var(--spring-snappy),
    opacity 0.25s;
}
.add .ico--check {
  opacity: 0;
  transform: scale(0.4) rotate(-45deg);
}
.add.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--sun);
}
.add.is-on .ico--plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}
.add.is-on .ico--check {
  opacity: 1;
  transform: none;
}
.add.is-pop {
  animation: pop 0.5s var(--spring-snappy);
}
.dish.is-flash .dish__name {
  animation: flash-text 1.8s ease;
}

/* ==========================================================================
   CELEBRA (banda mostaza, como las mesas del local)
   ========================================================================== */
.celebrate {
  padding: 32px 0 0;
}
.celebrate__photo {
  height: 240px;
  overflow: hidden;
}
.celebrate__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.celebrate__band {
  background: var(--mustard);
  color: var(--navy-deep);
  padding: 40px var(--pad) 36px;
}
.celebrate__inner {
  max-width: 760px;
  margin: 0 auto;
}
.celebrate .label {
  color: var(--navy-deep);
  opacity: 0.75;
}
.celebrate .sh__title {
  color: var(--navy-deep);
  max-width: 13ch;
}
.celebrate .sh__title em {
  color: #fff;
}
.celebrate p {
  margin: 14px 0 22px;
  max-width: 42ch;
  font-size: 0.96rem;
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--navy-deep);
  color: var(--cream);
  text-decoration: none;
  font: 600 0.9rem/1 var(--f-sans);
  transition:
    transform 0.45s var(--spring-snappy),
    background 0.2s;
}
.link-btn:active {
  transform: scale(0.96);
}
.link-btn .ico {
  transition: transform 0.45s var(--spring-snappy);
}
@media (hover: hover) {
  .link-btn:hover .ico--arrow {
    transform: translateX(4px);
  }
}

/* ==========================================================================
   VISÍTANOS
   ========================================================================== */
.visit {
  padding: 0;
}
.visit__photo {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.visit__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 28s ease-in-out infinite alternate;
}
.visit__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 26, 44, 0) 45%, var(--navy-deep) 100%);
}
.visit__body {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 4px var(--pad) 36px;
}
.visit__inner {
  max-width: 760px;
  margin: 0 auto;
}
.visit .label {
  color: var(--sun);
}
.visit .sh__title {
  color: var(--cream);
}
.info {
  margin: 20px 0 24px;
  display: grid;
  gap: 16px;
}
.info div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(247, 244, 239, 0.12);
  font-size: 0.94rem;
}
.info dt {
  font: 600 0.66rem/1.6 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.55);
}
.info dd {
  margin: 0;
}
.info a {
  text-underline-offset: 3px;
  text-decoration-color: rgba(247, 244, 239, 0.35);
}
.info small {
  display: block;
  opacity: 0.7;
  font-size: 0.82rem;
  margin-top: 2px;
}
/* Mapa de "Cómo llegar" (web/img/mapa.svg). Tocarlo abre Google Maps. */
.mapa {
  margin: 0 0 24px;
}
.mapa__enlace {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(247, 244, 239, 0.12);
  background: var(--navy);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--spring-snappy);
}
.mapa__enlace:active {
  transform: scale(0.98);
}
.mapa__enlace:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
}
.mapa__lienzo {
  aspect-ratio: 1080 / 860;
}
.mapa__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mapa__calle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mapa__calle--calle {
  stroke: rgba(247, 244, 239, 0.16);
  stroke-width: 7;
}
.mapa__calle--media {
  stroke: rgba(247, 244, 239, 0.34);
  stroke-width: 11;
}
.mapa__calle--principal {
  stroke: var(--sun);
  stroke-opacity: 0.75;
  stroke-width: 16;
}
.mapa__nombre,
.mapa__norte text {
  font: 500 30px var(--f-sans);
  letter-spacing: 0.02em;
  fill: rgba(247, 244, 239, 0.85);
  paint-order: stroke;
  stroke: var(--navy);
  stroke-width: 7px;
  stroke-linejoin: round;
}
.mapa__nombre--principal {
  font-weight: 600;
  fill: var(--sun-2);
}
.mapa__norte path {
  fill: rgba(247, 244, 239, 0.55);
}
.mapa__punto {
  fill: var(--sun);
  stroke: var(--navy-deep);
  stroke-width: 6;
}
.mapa__onda {
  fill: var(--sun);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.mapa__marca {
  font: 56px var(--f-serif);
  fill: var(--cream);
  paint-order: stroke;
  stroke: var(--navy);
  stroke-width: 8px;
  stroke-linejoin: round;
}
.mapa__abrir {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 20px;
  background: var(--sun);
  color: var(--navy);
  font: 600 0.88rem/1 var(--f-sans);
  box-shadow: 0 6px 18px rgba(5, 9, 15, 0.35);
  transition: transform 0.45s var(--spring-snappy);
}
.mapa__credito {
  margin-top: 6px;
  text-align: right;
  font-size: 0.7rem;
  color: rgba(247, 244, 239, 0.5);
}
.mapa__credito a {
  color: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .mapa__onda {
    animation: mapa-onda 2.4s var(--ease-out) infinite;
  }
}
@keyframes mapa-onda {
  from {
    opacity: 0.4;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.8);
  }
}
@media (hover: hover) {
  .mapa__enlace:hover .mapa__abrir {
    transform: translateY(-2px);
  }
}
.btn-row {
  display: flex;
  gap: 10px;
}
.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 25px;
  border: 1px solid rgba(247, 244, 239, 0.28);
  background: transparent;
  color: var(--cream);
  font: 600 0.9rem/1 var(--f-sans);
  text-decoration: none;
  transition:
    transform 0.45s var(--spring-snappy),
    background 0.25s,
    border-color 0.25s;
}
.btn:active {
  transform: scale(0.96);
}
.btn--sun {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--navy);
}
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 22px;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: rgba(247, 244, 239, 0.82);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.88rem;
}
.social .ico {
  font-size: 1.4rem;
}
@media (hover: hover) {
  .btn:hover {
    background: rgba(247, 244, 239, 0.08);
    border-color: rgba(247, 244, 239, 0.6);
  }
  .btn--sun:hover {
    background: var(--sun-2);
    border-color: var(--sun-2);
  }
  .social a:hover {
    color: #fff;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--navy-deep);
  color: rgba(247, 244, 239, 0.6);
  text-align: center;
  padding: 8px var(--pad) calc(40px + env(safe-area-inset-bottom));
  font-size: 0.78rem;
  border-top: 1px solid rgba(247, 244, 239, 0.08);
}
.footer__mark {
  width: 150px;
  aspect-ratio: 2243 / 631;
  margin: 28px auto 12px;
  background: var(--sun);
  -webkit-mask: url("img/wordmark.svg") center / contain no-repeat;
  mask: url("img/wordmark.svg") center / contain no-repeat;
}
.footer p {
  margin: 4px 0;
}

/* ==========================================================================
   SHEET (hoja inferior con gesto para cerrar)
   ========================================================================== */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 15, 0.5);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.sheet.is-open .sheet__backdrop {
  opacity: calc(1 - var(--drag-p, 0));
}
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100svh - 52px);
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  transform: translateY(102%);
  transition: transform 0.7s var(--spring-sheet);
  outline: none;
  box-shadow: 0 -10px 40px rgba(5, 9, 15, 0.2);
}
.sheet.is-open .sheet__panel {
  transform: translateY(var(--drag-y, 0px));
}
.sheet.is-dragging .sheet__panel,
.sheet.is-dragging .sheet__backdrop {
  transition: none;
}
.sheet.is-closing .sheet__panel {
  transition: transform 0.32s var(--ease-in);
}
/* ---------- Ficha con View Transition (js/hoja.js) ----------
   "ficha": la miniatura CRECE hasta ser la hoja (y al cerrar se encoge de regreso), como el zoom de
   iOS 18. La foto de la hoja está arriba, así que mientras crece se ve la foto y el resto se revela.
   "velo": el fondo oscuro aparece/desaparece por su cuenta. La página (root) no se funde: queda quieta. */
.sheet.is-vt .sheet__panel,
.sheet.is-vt .sheet__backdrop {
  transition: none;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-old(root) {
  display: none;
}
/* Orden de capas fijo: fondo oscuro ABAJO, tarjeta ARRIBA. Sin esto, al abrir, el velo (que solo
   existe en el estado nuevo) se pintaba encima de la tarjeta: toda la pantalla, ficha incluida, se
   veía más oscura durante la transición y se "aclaraba" de golpe al terminar. */
::view-transition-group(velo) {
  z-index: 1;
}
::view-transition-group(ficha) {
  z-index: 2;
  animation-duration: 0.5s;
  animation-timing-function: var(--spring-sheet);
}
::view-transition-image-pair(ficha) {
  overflow: clip; /* recorta a la forma de la tarjeta mientras crece */
  animation: 0.5s var(--spring-sheet) both;
}
/* La hoja (ancha y alta) se dibuja a todo lo ancho desde arriba: en la tarjeta chica se ve su foto */
::view-transition-old(ficha),
::view-transition-new(ficha) {
  height: auto;
  animation-duration: 0.16s;
  animation-timing-function: ease-out;
}
/* La miniatura (cuadrada) siempre llena la tarjeta */
html[data-vt="abre"]::view-transition-old(ficha),
html[data-vt="cierra"]::view-transition-new(ficha) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html[data-vt="abre"]::view-transition-image-pair(ficha) {
  animation-name: vt-esquinas-abre;
}
html[data-vt="cierra"]::view-transition-image-pair(ficha) {
  animation-name: vt-esquinas-cierra;
}
/* Al cerrar, el cruce hoja → miniatura ocurre al FINAL (cuando ya tienen el mismo tamaño);
   al abrir ocurre al inicio. Así nunca se ven dos imágenes distintas mezcladas a medio camino. */
html[data-vt="cierra"]::view-transition-old(ficha),
html[data-vt="cierra"]::view-transition-new(ficha) {
  animation-delay: 0.3s;
}
/* El velo llega a su oscuridad final al mismo ritmo que la tarjeta (sin pasarse ni quedarse corto) */
::view-transition-old(velo),
::view-transition-new(velo) {
  animation-duration: 0.36s;
  animation-timing-function: ease-out;
}
@keyframes vt-esquinas-abre {
  from {
    border-radius: 12px;
  }
  to {
    border-radius: 24px 24px 0 0;
  }
}
@keyframes vt-esquinas-cierra {
  from {
    border-radius: 24px 24px 0 0;
  }
  to {
    border-radius: 12px;
  }
}
.sheet__grab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 4;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.sheet__grab span {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.sheet--plain .sheet__grab span {
  background: rgba(20, 38, 60, 0.18);
  box-shadow: none;
}
.sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 9, 15, 0.45);
  color: #fff;
  font-size: 1rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.4s var(--spring-snappy);
}
.sheet--plain .sheet__close {
  background: #ece5d9;
  color: var(--navy);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sheet__close:active {
  transform: scale(0.85);
}
.sheet__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet__bar {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.sheet__bar:empty {
  display: none;
}

/* ==========================================================================
   FICHA DEL PLATILLO (js/hoja.js → detailBody / detailBar)
   Jerarquía: portada → categoría → nombre → PRECIO → marcas → descripción → cómo pedir → más platillos.
   ========================================================================== */
.d-media {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 44svh;
  width: 100%;
  background: var(--navy-deep);
  overflow: hidden;
}
.d-media img,
.d-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.d-media--cut {
  aspect-ratio: 16 / 10;
  background: radial-gradient(110% 90% at 50% 30%, #2a62d9 0%, var(--navy) 58%, var(--navy-deep) 100%);
}
.d-media--cut img {
  object-fit: contain;
  padding: 7% 12%;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.45));
  animation: float 7s ease-in-out infinite;
}
/* Sin foto: la ilustración de su categoría (la de la carta) trazándose sobre azul marino */
.d-media--ilus {
  aspect-ratio: auto;
  height: 172px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 90% at 50% 105%, rgba(225, 188, 117, 0.16), rgba(225, 188, 117, 0) 70%),
    radial-gradient(120% 100% at 50% 0%, var(--navy-2) 0%, var(--navy-deep) 72%);
}
.d-ilus {
  width: 136px;
  height: 136px;
  margin-top: 6px;
  fill: none;
  stroke: var(--sun);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-ilus.is-espejo,
.mini-ilus.is-espejo,
.l-vacia__ilus.is-espejo {
  scale: -1 1;
}
.d-ilus path,
.l-vacia__ilus path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s var(--ease-out) forwards;
  animation-delay: calc(0.18s + min(var(--k, 0) * 45ms, 0.7s));
}
.d-body {
  padding: 20px 20px 26px;
}
.d-crumb {
  margin: 0;
}
.d-title {
  margin: 6px 0 0;
  font: 400 2.15rem/1.04 var(--f-serif);
  color: var(--navy);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.d-alt {
  margin: 4px 0 0;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--muted);
}
.d-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 14px 0 0;
}
.d-price strong {
  font: 700 1.75rem/1 var(--f-sans);
  font-stretch: 86%;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-variant-numeric: tabular-nums lining-nums;
}
.d-price span {
  font: 500 0.84rem/1.2 var(--f-sans);
  color: var(--muted);
}
.d-price.is-ask strong {
  font-size: 1.15rem;
  font-stretch: 90%;
  color: var(--gold-ink);
}
/* Marcas como chips: ícono + texto (nunca solo color), contraste AA */
.d-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
}
.d-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 16px;
  font: 600 0.8rem/1 var(--f-sans);
  background: #efe9df;
  color: var(--navy);
}
.d-tag .ico {
  font-size: 1rem;
}
.d-tag--picante {
  background: #fbe8e3;
  color: #9e2d19;
}
.d-tag--compartir {
  background: #e6edfb;
  color: #1d4aa8;
}
.d-tag--favorito {
  background: #f8eed8;
  color: #6f4c0d;
}
.d-tag--nuevo {
  background: #f8e4ee;
  color: #941d4e;
}
.d-sec {
  margin-top: 22px;
}
.d-h {
  margin: 0 0 8px;
  font: 600 0.7rem/1.2 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.d-desc {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #2c3a4b;
}
/* Cómo se pide: la lista NO envía el pedido, se le muestra al mesero */
.d-help,
.l-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f2ede5;
  color: var(--navy);
  font-size: 0.88rem;
  line-height: 1.45;
}
.d-help {
  margin: 20px 0 0;
}
.d-help .ico,
.l-aviso .ico {
  flex: none;
  margin-top: 1px;
  font-size: 1.1rem;
  color: var(--gold-ink);
}
.d-more__track {
  list-style: none;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  margin: 0 -20px;
  padding: 2px 20px 6px;
}
.d-more__track::-webkit-scrollbar {
  display: none;
}
.d-more__track li {
  flex: none;
  scroll-snap-align: start;
}
.d-mini {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 7px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
  transition: transform 0.4s var(--spring-snappy);
}
.d-mini:active {
  transform: scale(0.96);
}
/* Sin foto: tarjeta de solo texto (repetir la misma ilustración no aporta) */
.d-mini--txt {
  justify-content: space-between;
  min-height: 92px;
  padding: 12px 10px;
}
.d-mini__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: var(--navy-deep);
}
.d-mini__img--cut,
.l-thumb--cut {
  object-fit: contain;
  padding: 5px;
  background: radial-gradient(circle at 50% 35%, #2a62d9, var(--navy));
}
.d-mini__img--ilus,
.l-thumb--ilus {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, var(--navy-2) 0%, var(--navy-deep) 75%);
}
.mini-ilus {
  width: 58%;
  height: auto;
  fill: none;
  stroke: var(--sun);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-mini strong {
  padding: 0 4px;
  font: 400 1.06rem/1.15 var(--f-serif);
  color: var(--navy);
}
.d-mini span {
  padding: 0 4px;
  font: 600 0.84rem/1 var(--f-sans);
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.d-mini span.is-ask {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.d-swap {
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.5s var(--spring-snappy);
}
.d-swap.is-out {
  opacity: 0;
  transform: translateX(-24px);
}

/* Barra inferior: "Cantidad" visible + botón que dice exactamente qué pasa y cuánto suma */
.d-qty {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.d-qty__lbl {
  padding-left: 14px;
  font: 600 0.62rem/1 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stepper {
  display: inline-flex;
  align-items: center;
  height: 50px;
  border-radius: 25px;
  border: 1px solid var(--line);
  background: #fff;
  flex: none;
}
.stepper button {
  width: 46px;
  height: 48px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--navy);
  border-radius: 25px;
  transition: transform 0.35s var(--spring-snappy);
}
.stepper button:active {
  transform: scale(0.8);
}
.stepper button:disabled {
  color: #b9bec5;
}
.stepper .roll {
  height: 24px;
  min-width: 22px;
  text-align: center;
  font: 700 1.02rem/24px var(--f-sans);
  font-variant-numeric: tabular-nums;
}
.cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  height: 52px;
  padding: 0 18px 0 20px;
  border: 0;
  border-radius: 26px;
  background: var(--navy);
  color: var(--cream);
  font: 600 0.95rem/1.15 var(--f-sans);
  text-align: left;
  transition:
    transform 0.45s var(--spring-snappy),
    background 0.3s;
}
.cta:active {
  transform: scale(0.97);
}
.cta b {
  flex: none;
  font-weight: 700;
  color: var(--sun);
  font-variant-numeric: tabular-nums;
}
.cta.is-done {
  background: #1d6b46;
}
.cta--quitar {
  background: #9e2d19;
}
.cta--center {
  justify-content: center;
  text-align: center;
}
.cta--mesero .ico {
  font-size: 1.2rem;
  color: var(--sun);
}

/* ==========================================================================
   MI LISTA (el "carrito"): qué llevas, cuánto suma y cómo se pide
   ========================================================================== */
.l-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 34px 20px 14px;
}
.l-head h2 {
  margin: 4px 0 0;
  font: 400 2.3rem/1 var(--f-serif);
  color: var(--navy);
}
.l-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #fff;
  color: #9e2d19;
  font: 600 0.8rem/1 var(--f-sans);
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.l-clear.is-confirm {
  background: #9e2d19;
  border-color: #9e2d19;
  color: #fff;
}
.l-aviso {
  margin: 0 20px 4px;
}
.l-aviso b {
  font-weight: 700;
}
.l-items {
  list-style: none;
  margin: 0;
  padding: 0 20px;
}
.l-items li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition:
    opacity 0.3s,
    transform 0.4s var(--spring-snappy);
}
.l-items li.is-removing {
  opacity: 0;
  transform: translateX(30px);
}
.l-thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--navy-deep);
}
.l-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.l-cat {
  font: 600 0.62rem/1.2 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.l-nom {
  font: 400 1.22rem/1.15 var(--f-serif);
  color: var(--navy);
}
.l-alt {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--muted);
}
.l-uni {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.l-der {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.l-sub {
  padding-top: 2px;
  font: 700 1.04rem/1 var(--f-sans);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.l-sub.is-ask {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.l-items .stepper {
  height: 44px;
}
.l-items .stepper button {
  width: 42px;
  height: 42px;
  font-size: 0.95rem;
}
.l-items .stepper .roll {
  min-width: 18px;
  font-size: 0.95rem;
}
.l-sum {
  margin: 14px 20px 24px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.l-sum__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--muted);
}
.l-sum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.l-sum__total span {
  font: 600 0.92rem/1.2 var(--f-sans);
  color: var(--navy);
}
.l-sum__total strong {
  font: 400 2.05rem/1 var(--f-serif);
  color: var(--navy);
  font-variant-numeric: lining-nums;
}
.l-sum__total small {
  font: 600 0.7rem var(--f-sans);
  color: var(--muted);
}
.l-sum p {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
/* Lista vacía: no un renglón gris, sino qué hacer */
.l-vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 46px 28px 34px;
}
.l-vacia__ilus {
  width: 118px;
  height: 118px;
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.l-vacia h2 {
  margin: 14px 0 6px;
  font: 400 2rem/1.05 var(--f-serif);
  color: var(--navy);
}
.l-vacia p {
  max-width: 28ch;
  margin: 0 0 22px;
  color: var(--muted);
}
.btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font: 600 0.92rem/1 var(--f-sans);
  transition: transform 0.4s var(--spring-snappy);
}
.btn-sec:active {
  transform: scale(0.96);
}

/* ==========================================================================
   VISTA PARA EL MESERO (pantalla completa, letra grande, en español)
   ========================================================================== */
.waiter {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--cream);
  color: var(--navy-deep);
  display: flex;
  flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) calc(18px + env(safe-area-inset-bottom));
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.6s var(--spring-sheet);
}
.waiter.is-open {
  opacity: 1;
  transform: none;
}
.waiter__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.waiter__mark {
  width: 120px;
  aspect-ratio: 2243 / 631;
  background: var(--navy);
  -webkit-mask: url("img/wordmark.svg") center / contain no-repeat;
  mask: url("img/wordmark.svg") center / contain no-repeat;
}
.waiter__x {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ece5d9;
  color: var(--navy);
  font-size: 1.1rem;
}
.waiter__aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--cream);
  font: 600 0.9rem/1.3 var(--f-sans);
}
.waiter__aviso .ico {
  flex: none;
  font-size: 1.2rem;
  color: var(--sun);
}
.waiter h2 {
  margin: 22px 0 4px;
  font: 400 2.6rem/1 var(--f-serif);
}
.waiter h2 span {
  font-size: 0.5em;
  color: var(--muted);
}
.waiter__table {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--muted);
}
.waiter__table input {
  width: 76px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  font: 600 1.2rem/1 var(--f-sans);
  color: var(--navy);
}
.waiter ol {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}
.waiter li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.6s var(--spring-snappy);
  transition-delay: calc(0.15s + var(--i) * 0.05s);
}
.waiter.is-open li {
  opacity: 1;
  transform: none;
}
.waiter li b {
  min-width: 2.2ch;
  font: 700 1.6rem/1 var(--f-sans);
  font-stretch: 70%;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.waiter li span {
  font: 400 1.7rem/1.1 var(--f-serif);
}
.waiter li small {
  display: block;
  margin-top: 4px;
  font: 500 0.8rem/1.2 var(--f-sans);
  color: var(--muted);
}
.waiter li em {
  font: 700 1.05rem/1 var(--f-sans);
  font-style: normal;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.waiter__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 14px;
  font-size: 0.95rem;
}
.waiter__total strong {
  font: 400 2rem/1 var(--f-serif);
}
.waiter .cta {
  flex: none;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes logo-in {
  from {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes wordmark-in {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(8px);
    clip-path: inset(0 50% 0 50%);
  }
  to {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.35));
    clip-path: inset(0 0 0 0);
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes beam {
  to {
    transform: rotate(360deg);
  }
}
@keyframes glow {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-9px) rotate(1.5deg);
  }
}
@keyframes slow-pan {
  from {
    transform: translateX(-3%);
  }
  to {
    transform: translateX(3%) scale(1.06);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes flash-text {
  0%,
  100% {
    color: var(--navy);
  }
  15%,
  55% {
    color: var(--gold-ink);
  }
}
@keyframes ken-burns {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.12) translateX(-3%);
  }
}
@keyframes polaroid-a {
  from {
    transform: translateY(30px) rotate(-14deg);
    opacity: 0;
  }
  to {
    transform: rotate(-5deg);
    opacity: 1;
  }
}
@keyframes polaroid-b {
  from {
    transform: translateY(30px) rotate(16deg);
    opacity: 0;
  }
  to {
    transform: rotate(5deg);
    opacity: 1;
  }
}

/* ==========================================================================
   ANIMACIONES LIGADAS AL SCROLL (mejora progresiva)
   Chrome 115+, Firefox 159+, iOS/Safari 26+. Sin soporte, todo se queda en su lugar final.
   Solo translate/rotate/scale/opacity (propiedades individuales: no pisan los `transform` existentes)
   y nunca con "reducir movimiento".
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Portada: el faro y el logotipo se alejan despacio al bajar (paralaje de salida) */
    .hero__center {
      animation: hero-sale linear both;
      animation-timeline: scroll(root);
      animation-range: 0 75svh;
    }
    /* Promo de hoy: el platillo recortado flota un poco más lento que la tarjeta */
    .promo__art {
      animation: paralaje linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    /* (Las polaroids del buffet ya tienen su propia entrada: polaroid-a / polaroid-b) */
    /* Favoritos: la tarjeta del centro del carrusel queda al frente */
    .fav {
      animation: carrusel linear both;
      animation-timeline: view(inline);
      animation-range: cover;
    }
  }
}
@keyframes hero-sale {
  to {
    translate: 0 -10svh;
    scale: 0.94;
    opacity: 0.15;
  }
}
@keyframes paralaje {
  from {
    translate: 0 22px;
  }
  to {
    translate: 0 -22px;
  }
}
@keyframes carrusel {
  0%,
  100% {
    scale: 0.93;
    opacity: 0.82;
  }
  50% {
    scale: 1;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .lighthouse__beam {
    display: none;
  }
  .reveal-line > span {
    transform: none;
  }
  .reveal-media {
    clip-path: none;
  }
  .fade-in {
    opacity: 1;
  }
}

/* ==========================================================================
   Pantallas grandes
   ========================================================================== */
@media (min-width: 720px) {
  .lighthouse {
    width: 176px;
    height: 176px;
  }
  .promo {
    min-height: 360px;
    padding: 28px;
  }
  .promo__art {
    width: 46%;
    right: 14px;
    top: 50%;
    translate: 0 -50%;
  }
  .promo__content {
    margin-top: 90px;
    max-width: 54%;
  }
  .buffet__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 6px 26px;
    padding: 30px;
  }
  .buffet__photos {
    grid-row: 1 / span 5;
    grid-column: 2;
    height: 300px;
    margin: 44px 0 0;
  }
  .buffet__photo--a {
    height: 270px;
  }
  .buffet__photo--b {
    height: 250px;
    top: 40px;
  }
  .visit__photo {
    height: 400px;
  }
  .celebrate__photo {
    height: 380px;
  }
}

/* ==========================================================================
   RESERVA TU MESA (js/reserva.js; el plano del local está en plano.css)
   ========================================================================== */
.reserva {
  padding: 48px var(--pad) 40px;
  max-width: 760px;
  margin: 0 auto;
}
/* Botón que despliega "Reserva tu mesa" (la sección empieza plegada para no ocupar media página) */
.reserva__abrir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin: 2px 0 0;
  padding: 0 22px;
  border: 1px solid var(--sun);
  border-radius: 999px;
  background: var(--sun);
  color: var(--navy-deep);
  font: 600 1rem/1 var(--f-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.45s var(--spring-snappy);
}
.reserva__abrir .ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.reserva__abrir:active {
  transform: scale(0.97);
}
.reserva__abrir:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.reserva__abrir[aria-expanded="true"] {
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
}
.reserva__flecha {
  transform: rotate(90deg);
  transition: transform 0.45s var(--spring-snappy);
}
.reserva__abrir[aria-expanded="true"] .reserva__flecha {
  transform: rotate(-90deg);
}
/* El formulario se despliega midiendo su alto real (filas de 0fr a 1fr) */
.reserva__pliegue {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--spring-sheet);
}
.reserva__pliegue.is-abierta {
  grid-template-rows: 1fr;
}
.reserva__dentro {
  min-height: 0;
  overflow: hidden;
  margin: 0 -6px;
  padding: 0 6px; /* plegado mide 0: el espacio va como margen de la tarjeta */
  transition: visibility 0s;
}
.reserva__dentro > .reserva__card {
  margin: 14px 0 6px;
}
.reserva__pliegue:not(.is-abierta) .reserva__dentro {
  visibility: hidden;
  transition: visibility 0s 0.55s;
}
@media (hover: hover) {
  .reserva__abrir:hover {
    background: var(--sun-2);
    border-color: var(--sun-2);
  }
  .reserva__abrir[aria-expanded="true"]:hover {
    background: rgba(20, 38, 60, 0.05);
    border-color: #cfc3ae;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reserva__pliegue,
  .reserva__flecha,
  .reserva__dentro {
    transition: none;
  }
}
.reserva__card {
  padding: 18px 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}
.reserva__pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* la fila de días se desplaza dentro, sin ensanchar la tarjeta */
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reserva__paso {
  min-width: 0;
}
.reserva__tit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--navy);
  font: 400 1.7rem/1.1 var(--f-serif);
  color: var(--navy);
}
.reserva__num {
  font: 600 0.74rem/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
  color: var(--gold-ink);
}
.reserva__sub {
  margin: 14px 0 8px;
  font: 600 0.68rem/1.2 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.reserva__chips {
  display: flex;
  gap: 8px;
  margin: 0 -2px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.reserva__chips::-webkit-scrollbar {
  display: none;
}
.chip {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font: 600 0.9rem/1 var(--f-sans);
  white-space: nowrap;
  scroll-snap-align: start;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.45s var(--spring-snappy);
}
.chip[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--cream);
}
.chip:active {
  transform: scale(0.95);
}
.reserva__nada {
  margin: 4px 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.reserva__personas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.reserva__personas .reserva__sub {
  margin: 0;
}
.paso-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #efe9df;
}
.paso-num button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 1.05rem;
  transition: transform 0.45s var(--spring-snappy);
}
.paso-num button:active:not(:disabled) {
  transform: scale(0.9);
}
.paso-num button:disabled {
  cursor: default;
  background: transparent;
  color: var(--muted);
}
.paso-num output {
  min-width: 36px;
  text-align: center;
  font: 600 1.15rem/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.reserva__mesa {
  margin: 12px 0 0;
  font: 400 1.25rem/1.25 var(--f-serif);
  color: var(--navy);
}
.reserva__form {
  display: grid;
  gap: 12px;
}
.campo {
  display: grid;
  gap: 6px;
}
.campo span {
  font: 600 0.76rem/1.2 var(--f-sans);
  color: var(--navy);
}
.campo input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #c9bfae;
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.2 var(--f-sans);
}
.campo input:focus {
  border-color: var(--navy);
  outline: 2px solid var(--sun);
  outline-offset: 1px;
}
.reserva__privacidad {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.reserva__enviar {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 8px 18px;
  line-height: 1.25;
  text-align: center;
}
.reserva__enviar[aria-disabled="true"] {
  border-color: #c9bfae;
  background: #efe9df;
  color: var(--navy);
}
.reserva__error {
  margin: 0;
  color: var(--chili);
  font-size: 0.88rem;
  font-weight: 600;
}
.reserva__error:empty {
  display: none;
}
.reserva__hecha {
  padding: 10px 4px 6px;
  text-align: center;
  outline: none;
}
.reserva__ok {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--sun);
  font-size: 1.6rem;
  animation: pop 0.6s var(--spring-snappy);
}
.reserva__listo {
  margin: 12px 0 0;
  font: 400 2.1rem/1.05 var(--f-serif);
  color: var(--navy);
}
.reserva__codigo {
  margin: 2px 0 0;
  font: 800 2.4rem/1 var(--f-sans);
  font-stretch: 62%;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
}
.reserva__resumen {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  text-align: left;
}
.reserva__resumen div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
}
.reserva__resumen dt {
  font: 600 0.66rem/1.6 var(--f-sans);
  font-stretch: 80%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.reserva__resumen dd {
  margin: 0;
  color: var(--navy);
}
.reserva__espera {
  margin: 16px 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
}
.reserva__otra {
  border: 0;
  cursor: pointer;
}
@media (hover: hover) {
  .chip:hover {
    border-color: var(--navy);
  }
}
@media (min-width: 720px) {
  .reserva__card {
    padding: 26px;
  }
}