/* Kinlig Menu — carta
 * Proporciones tomadas del análisis Watati/Kimenu (sin copiar su CSS).
 * Card = fondo foto + radio 48 + nombre debajo + sin precio + sin sombra.
 */

body.kinlig-menu-home .sh-header,
body.kinlig-menu-home .sh-app-nav,
body.kinlig-menu-home .sh-cart-fab,
body.kinlig-menu-home .sh-footer,
body.kinlig-menu-home .am-wa-float,
body.kinlig-menu-home .kinlig-credit {
  display: none !important;
}

/* Sin hueco de app-nav (shop reserva ~148px abajo) */
body.kinlig-body.kinlig-menu-home {
  padding-bottom: 0 !important;
}

@media (max-width: 720px) {
  body.kinlig-body.kinlig-menu-home {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

body.kinlig-menu-home .hm-mobile-stream {
  display: block !important;
}

body.kinlig-menu-home {
  --km-carta-max: 640px;
  --km-pad-x: 15px;          /* .swiper-container padding Watati */
  --km-pad-side: 35px;       /* aire logo / tiles */
  --km-slide: 270px;
  --km-radius: 48px;
  --km-gap: 15px;
}

/* Theme pinta body.kinlig-body { background: cream !important } — hay que ganar esa pelea.
 * Foto: ancho 100% (móvil), alto al natural — textura se repite hacia abajo.
 * No pintar html de #111: --km-menu-bg no vive en html y se veía un flash negro. */
body.kinlig-body.kinlig-menu-home {
  /* No usar el shorthand `background` (Theme/shop cream): pisa la foto. */
  background-color: var(--km-menu-bg, var(--sh-cream, #f7f4ef)) !important;
  background-image: none !important;
  background-size: var(--km-menu-bg-size, 100% auto) !important;
  background-position: top center !important;
  background-repeat: repeat-y !important;
}

body.kinlig-body.kinlig-menu-home[data-km-bg="image"] {
  background-image: var(--km-menu-bg-image) !important;
}

.km-carta {
  --km-tool-inset: 6px;
  --km-prestige-inset: 16px;
  max-width: var(--km-carta-max);
  margin: 0 auto;
  padding: max(var(--km-tool-inset), env(safe-area-inset-top, 0px)) 0 1.5rem;
  color: var(--sh-ink, #1a1a1a);
  font-family: var(--sh-font-body, inherit);
  font-weight: var(--sh-font-weight, 400);
}

/* —— Iconos arriba: círculo perfecto —— */
.km-carta-tools {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0 var(--km-pad-side);
  min-height: 44px;
}

.km-carta-tools-actions {
  position: relative;
  display: inline-block;
  vertical-align: top;
  line-height: 0;
}

.km-carta-tools-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  line-height: 0;
}

/* Idioma: bandera con aro fino + menú overlay (no empuja la carta) */
.km-carta-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 5;
}

/* Aro visible (~2.5px): mismo fondo que los otros círculos */
.km-carta-lang-btn.km-carta-icon {
  background: var(--km-tool-bg, #e8eaed);
  box-shadow: none;
  overflow: hidden;
  padding: 2.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.km-carta-lang-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
  user-select: none;
  border-radius: 50%;
  overflow: hidden;
}

.km-carta-lang-flag .km-flag-svg,
.km-carta-lang-flag svg,
.km-carta-lang-btn .km-flag-svg,
.km-carta-lang-btn svg.km-flag-svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* Overlay bajo los 3 botones: no baja el logo ni la carta (~+20% vs tamaño anterior) */
.km-carta-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: max-content;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  padding: 5px 6px;
  margin: 0;
  background: var(--km-lang-bg, #1a1f22);
  color: var(--km-lang-text, #f4f5f6);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.36s;
  z-index: 30;
}

.km-carta-tools-actions.is-lang-open .km-carta-lang-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.km-carta-lang-menu[hidden] {
  display: none !important;
}

.km-carta-tools-actions.is-lang-open .km-carta-lang-menu[hidden] {
  display: flex !important;
}

/* Chip del idioma: redondeado suave, no círculo */
.km-carta-lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 41px;
  min-height: 34px;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--km-lang-text, #f4f5f6);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-carta-lang-opt:hover,
.km-carta-lang-opt:focus-visible {
  background: color-mix(in srgb, var(--km-lang-text, #f4f5f6) 14%, transparent);
  outline: none;
}

.km-carta-lang-opt.is-current {
  background: color-mix(in srgb, var(--km-lang-text, #f4f5f6) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .km-carta-lang-menu {
    transition: none;
  }
}

/* Prestigio Kinlig — aire a la izquierda; solo estrellas ganadas */
.km-carta-prestige {
  position: absolute;
  left: max(var(--km-prestige-inset), env(safe-area-inset-left, 0px));
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--km-tool-fg, #153f4a);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  z-index: 1;
}

.km-carta-prestige-star {
  display: inline-flex;
  opacity: 1;
  color: #c4a35a;
}

.km-carta-prestige-star.is-on {
  opacity: 1;
  color: #c4a35a;
}

.km-carta-prestige-star svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.km-review-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.km-review-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 4px;
}

.km-review-star {
  display: inline-flex;
  margin: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--sh-ink, #111) 28%, transparent);
  cursor: pointer;
  line-height: 0;
}

.km-review-star.is-on {
  color: #c4a35a;
}

.km-review-star svg {
  width: 42px;
  height: 42px;
  fill: currentColor;
  stroke: none;
}

/* Verificación Califícanos — tarjeta clara, no campo gris genérico */
.km-review-check {
  box-sizing: border-box;
  width: min(100%, 22rem);
  margin: 1rem auto 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid color-mix(in srgb, #c4a35a 34%, transparent);
  background: color-mix(in srgb, #c4a35a 7%, var(--sh-cream, #fff));
  text-align: center;
}

.km-review-check-eyebrow {
  margin: 0 0 0.7rem;
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: 0.72rem;
  font-weight: var(--sh-heading-weight, 700);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sh-ink, #111) 58%, transparent);
}

.km-review-check-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}

.km-review-check-num {
  min-width: 2ch;
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: 1.72rem;
  font-weight: var(--sh-heading-weight, 700);
  font-variant-numeric: tabular-nums;
  color: var(--sh-ink, #111);
}

.km-review-check-op,
.km-review-check-eq {
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--sh-ink, #111) 42%, transparent);
}

.km-review-check-q {
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: 1.72rem;
  font-weight: var(--sh-heading-weight, 700);
  color: #c4a35a;
}

.km-review-check-input-wrap {
  display: block;
  margin: 0;
}

.km-review-check-input {
  box-sizing: border-box;
  display: block;
  width: min(100%, 148px);
  margin: 0 auto;
  padding: 0.62rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--sh-ink, #111) 14%, transparent);
  border-radius: 999px !important;
  background: #fff;
  color: var(--sh-ink, #111);
  caret-color: var(--sh-ink, #111);
  font: inherit;
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  transition:
    border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-review-check-input::placeholder {
  color: color-mix(in srgb, var(--sh-ink, #111) 38%, transparent);
  opacity: 1;
}

.km-review-check-input:focus {
  border-color: color-mix(in srgb, #c4a35a 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #c4a35a 18%, transparent);
}

.km-review-check .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Califícanos: bloque al centro de la pantalla (H + V) */
.km-review-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding:
    max(3.5rem, calc(env(safe-area-inset-top, 0px) + 3rem))
    0
    max(1.25rem, env(safe-area-inset-bottom, 0px));
}

.km-review-sheet .km-rsv-close {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 5;
}

.km-review-sheet .km-rsv-topbar {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 1.25rem 0.35rem;
  border-bottom: 0;
  background: transparent;
  text-align: center;
}

.km-review-sheet .km-rsv-head {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  text-align: center;
}

.km-review-sheet .km-rsv-eyebrow,
.km-review-sheet .km-rsv-head h3,
.km-review-sheet .km-rsv-label,
.km-review-sheet .km-rsv-ok-title,
.km-review-sheet .km-rsv-ok-text {
  text-align: center !important;
}

.km-review-sheet .km-rsv-head h3 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.km-review-sheet .km-rsv-scroll {
  flex: 0 1 auto;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.35rem 1.25rem 0;
  max-height: min(70vh, calc(100% - 1rem));
}

.km-review-sheet .km-rsv-field {
  display: block;
  text-align: center;
}

.km-review-sheet .km-rsv-float {
  display: block;
  width: min(100%, 22rem);
  margin: 0.85rem auto 0;
  text-align: left;
}

.km-review-sheet .km-rsv-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 110px;
  margin: 6px 0 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--sh-ink, #111) 16%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--sh-ink, #111) 4%, var(--sh-cream, #fff));
  color: var(--sh-ink, #111);
  font: inherit;
  text-align: center;
  resize: vertical;
}

.km-review-sheet .km-rsv-ok {
  text-align: center;
}

.km-rsv-back {
  display: block;
  width: 100%;
  margin: 0.55rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--sh-ink, #111) 18%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--sh-ink, #111);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--rsv-ease, ease), border-color 0.2s var(--rsv-ease, ease);
}

.km-rsv-back:hover {
  background: color-mix(in srgb, var(--sh-ink, #111) 5%, transparent);
}

.km-carta-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--km-tool-bg, #e8eaed);
  color: var(--km-tool-fg, #153f4a);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
}

a.km-carta-icon,
button.km-carta-icon {
  background: var(--km-tool-bg, #e8eaed);
  color: var(--km-tool-fg, #153f4a);
}

.km-carta-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.km-carta-lang-btn .km-flag-svg,
.km-carta-lang-btn svg.km-flag-svg {
  width: 100%;
  height: 100%;
}

#km-carta-share.is-share-ok {
  outline: 2px solid rgba(46, 160, 90, 0.85);
  outline-offset: 2px;
}

#km-carta-share.is-share-err {
  outline: 2px solid rgba(180, 60, 50, 0.85);
  outline-offset: 2px;
}

/* Solo iconos (arriba + redes): ganar a shop.css * { border-radius:0 !important } */
body.kinlig-body.kinlig-menu-home .km-carta-icon,
body.kinlig-body.kinlig-menu-home a.km-carta-icon,
body.kinlig-body.kinlig-menu-home button.km-carta-icon {
  border-radius: 50% !important;
  background: var(--km-tool-bg, #e8eaed) !important;
  color: var(--km-tool-fg, #153f4a) !important;
}

body.kinlig-body.kinlig-menu-home .km-carta-social-link {
  border-radius: 50% !important;
}

body.kinlig-body.kinlig-menu-home .km-carta-lang-btn.km-carta-icon {
  background: var(--km-tool-bg, #e8eaed) !important;
  box-shadow: none !important;
  padding: 2.5px !important;
}

body.kinlig-body.kinlig-menu-home .km-carta-lang-flag .km-flag-svg,
body.kinlig-body.kinlig-menu-home .km-carta-lang-flag svg,
body.kinlig-body.kinlig-menu-home .km-carta-lang-btn svg.km-flag-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: hidden;
}

/* Marco del submenú: esquinas suaves, sin borde, +20% */
body.kinlig-body.kinlig-menu-home .km-carta-lang-menu {
  border: 0 !important;
  border-radius: 14px !important;
  width: max-content !important;
  height: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

body.kinlig-body.kinlig-menu-home .km-carta-lang-opt {
  border-radius: 10px !important;
}

/* —— Logo: ~40px de aire debajo de los iconos (como Watati) —— */
.km-carta-logo {
  text-align: center;
  margin: 40px 0 30px;
  padding: 0 var(--km-pad-side);
  line-height: 0;
}

.km-carta-logo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  transform: scale(var(--brand-logo-scale, 1));
  transform-origin: center;
}

/* —— Categoría: molde 640×256 (arte título menú) ——
 * Con arte: PNG contain (placa + aire), fondo transparente.
 * Sin arte: mismo alto de molde + placa centrada con presencia.
 */
.km-carta-section {
  margin-bottom: 18px;
}

.km-carta-drinks {
  display: block;
}

/* Bebidas: cuadrado. 2 tiles + un recorte de la tercera. Esquinas = platos. */
.km-carta-drinks .km-carta-swiper .swiper-slide.km-carta-slide,
.km-carta-drinks .km-carta-swiper .km-carta-slide {
  width: calc((100% - 30px) / 2.15);
  margin-right: 15px;
}

.km-carta-drinks .km-carta-dish-visual {
  aspect-ratio: 1 / 1;
  border-radius: var(--km-radius);
}

body.kinlig-body.kinlig-menu-home .km-carta-drinks .km-carta-dish-visual {
  border-radius: var(--km-radius) !important;
}

.km-carta-cat-banner {
  box-sizing: border-box;
  width: min(100% - (2 * var(--km-pad-side)), 640px);
  max-width: 640px;
  margin: 0 auto 4px; /* poco aire antes del swiper (Watati va casi pegado) */
  aspect-ratio: 640 / 256;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.km-carta-cat-banner.has-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 0;
}

/* Placa ~72% del molde → en ~314px de ancho ≈ 80px (Watati ~114px de marco, placa visual media) */
.km-carta-cat-banner.is-fallback .km-carta-cat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 90%;
  height: 72%;
  max-height: 5.5rem;
  min-height: 3.75rem;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  background: #12202c;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-size: calc(clamp(0.82rem, 3.4vw, 1rem) * var(--sh-heading-size, 1));
  font-weight: var(--sh-heading-weight, 800);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

.km-carta-turnos-banner {
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  margin: 0 auto 0.65rem;
  max-width: 22rem;
  opacity: 0.88;
}

.km-carta-empty {
  margin: 28px auto;
  padding: 18px 20px;
  max-width: 22rem;
  text-align: center;
  opacity: 1;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #555;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 14px;
}

.km-carta-empty strong {
  color: #1a1a1a;
  font-weight: 700;
}

.km-carta-cat {
  display: none;
}

/*
 * Swiper: aire izq + der (--km-pad-x) para que el último plato no pegue al borde.
 * El siguiente slide sigue asomándose al arrastrar (slidesPerView:auto).
 */
.km-carta-swiper {
  overflow: hidden;
  width: 100%;
  padding: 0 var(--km-pad-x) 0 var(--km-pad-x);
  margin: 0;
  box-sizing: border-box;
}

/*
 * Menú oficial con franja del secundario a la derecha: el pad-x solo no basta;
 * hay que reservar el ancho de la pestaña (~28px) + un poco de aire.
 */
.km-carta.has-extra-tab {
  --km-extra-strip: 28px;
  /* pad-x + franja + aire extra (~25% más que el primer ajuste) */
  --km-swiper-pad-end: calc(var(--km-pad-x) + var(--km-extra-strip) + 24px);
}

.km-carta.has-extra-tab .km-carta-menu .km-carta-swiper {
  padding-right: var(--km-swiper-pad-end);
}

.km-carta-swiper .swiper-slide.km-carta-slide,
.km-carta-swiper .km-carta-slide {
  width: var(--km-slide);
  flex-shrink: 0;
  margin-right: -15px;
  box-sizing: border-box;
}

.km-carta-dish {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

/* Zona foto: más alta que ancha (retrato), radio 48 — shop.css mata radius sin !important */
.km-carta-dish-visual {
  display: block;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 270 / 340;
  height: auto;
  padding: 0;
  border-radius: var(--km-radius);
  background-color: #e8eaed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: padding-box;
  overflow: hidden;
}

/* Con foto: el gris de placeholder se veía en el radio (borde feo). */
.km-carta-dish-visual.has-img,
.km-carta-dish-visual[style*="background-image"] {
  background-color: transparent;
  background-clip: border-box;
}

.km-carta-dish-visual.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111;
}

.km-carta-dish-ph {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.72;
}

body.kinlig-body.kinlig-menu-home .km-carta-dish-visual {
  border-radius: var(--km-radius) !important;
}

/* Nombre debajo — Watati h7: ~20px, peso liviano, centrado */
.km-carta-dish-name {
  display: block;
  margin: 0;
  padding: 10px 6px 0;
  font-family: var(--sh-font-dish, var(--sh-font-heading, inherit));
  font-size: calc(1.25rem * var(--sh-dish-size, 1));
  font-weight: var(--sh-dish-weight, 500);
  line-height: 1.15;
  text-align: center;
  color: var(--sh-ink, inherit);
}

/* —— Tiles / redes —— */
.km-carta-actions {
  display: grid;
  gap: 12px;
  margin: 28px 0 12px;
  padding: 0 var(--km-pad-side);
}

.km-carta-tile {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1.05rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  background: #e8eaed;
  color: #222;
  font-family: var(--sh-font-heading, inherit);
  font-size: 1rem;
  font-weight: var(--sh-heading-weight, 700);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.km-carta-tile.is-placeholder {
  opacity: 0.85;
  cursor: default;
  outline: 1px dashed rgba(0, 0, 0, 0.2);
  outline-offset: -2px;
}

.km-carta-tile-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #666;
  line-height: 1.2;
}

.km-carta-tile.has-img .km-carta-tile-hint {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  margin: 0;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #333;
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
}

.km-carta-tile.has-img {
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
}

.km-carta-tile.has-img img {
  display: block;
  width: 100%;
  height: auto;
}

.km-carta-tile.has-img .km-carta-tile-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.kinlig-body.kinlig-menu-home .km-carta-tile {
  border-radius: 0 !important;
  background: #e8eaed !important;
  color: #222 !important;
}

body.kinlig-body.kinlig-menu-home .km-carta-tile.has-img {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.km-carta-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 4px 0 10px;
  padding: 0 var(--km-pad-side);
}

.km-carta-social-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #12202c;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
}

.km-carta-social-link.is-placeholder {
  opacity: 0.92;
  cursor: default;
}

.km-carta-social-link svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  color: #fff;
}

.km-carta-credit {
  margin: 0.35rem 0 0;
  padding: 0 var(--km-pad-side);
  text-align: center;
  font-size: 0.78rem;
  color: var(--sh-ink, #1a1a1a);
  opacity: 0.45;
}

.km-carta-legal {
  display: block;
  width: max-content;
  max-width: calc(100% - (2 * var(--km-pad-side)));
  margin: 0.55rem auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sh-ink, #1a1a1a);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  opacity: 0.62;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.km-carta-legal:hover {
  opacity: 0.9;
}

.km-carta-legal + .km-carta-credit {
  margin-top: 1.15rem;
}

.km-carta-dialog {
  border: 0;
  padding: 0;
  max-width: min(22rem, 92vw);
  background: transparent;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-carta-dialog[open].is-open {
  opacity: 1;
  transform: none;
}

.km-carta-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-carta-dialog[open].is-open::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .km-carta-dialog,
  .km-carta-dialog::backdrop {
    transition: none;
  }
  .km-carta-dialog {
    opacity: 1;
    transform: none;
  }
}

.km-carta-dialog-panel {
  margin: 0;
  padding: 1.5rem 1.35rem 1.6rem;
  border-radius: 18px;
  background: var(--sh-cream, #fff);
  color: var(--sh-ink, #111);
  position: relative;
}

.km-carta-dialog-panel h3 {
  margin: 0;
  font-size: 1.35rem;
  text-align: center;
}

.km-carta-dialog-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--sh-btn-bg, #0a0a0a);
  color: var(--sh-btn-text, #fff);
  font-size: 1.85rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.km-carta-dialog-close:hover {
  opacity: 0.9;
}

/* Avisos (Reservas / Términos / QR / Ambientes): paleta aparte del menú */
.km-carta-dialog,
.km-carta-dialog--rsv {
  --sh-cream: var(--sh-sheet-bg, #fff);
  --sh-cream-deep: var(--sh-sheet-bg-deep, #f5f5f5);
  --sh-ink: var(--sh-sheet-ink, #111);
  --sh-muted: var(--sh-sheet-muted, #666);
  --sh-btn-bg: var(--sh-sheet-btn, #111);
  --sh-btn-text: var(--sh-sheet-btn-text, #fff);
  --sh-btn-hover: var(--sh-sheet-btn, #111);
}

/* —— Medir antojo: fullscreen; panel centrado (X e Y); crece con ítems —— */
#km-carta-antojo.km-carta-dialog--rsv {
  background: var(--sh-cream, #fff);
}

.km-antojo-sheet {
  display: flex;
  flex-direction: column;
  background: var(--sh-cream, #fff);
  color: var(--sh-ink, #111);
}

/* —— Ambientes: solo color del título (sin fondo configurable) —— */
#km-carta-ambientes.km-carta-dialog--rsv {
  background: transparent;
}

#km-carta-ambientes.km-carta-dialog--rsv .km-amb-sheet {
  background: transparent;
  color: #fff;
}

#km-carta-ambientes.km-carta-dialog--rsv .km-amb-top h3 {
  color: var(--sh-amb-text, #fff);
}

#km-carta-ambientes.km-carta-dialog--rsv .km-amb-x {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
}

#km-carta-ambientes.km-carta-dialog--rsv .km-amb-dot {
  background: rgba(255, 255, 255, 0.35);
}

#km-carta-ambientes.km-carta-dialog--rsv .km-amb-dot.is-active {
  background: #fff;
}

#km-carta-ambientes.km-carta-dialog--rsv .km-amb-empty {
  color: rgba(255, 255, 255, 0.72);
}

.km-amb-sheet {
  display: flex;
  flex-direction: column;
  background: transparent;
  color: #fff;
  min-height: 100%;
  position: relative;
}

.km-amb-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.9rem 0;
  flex-shrink: 0;
}

.km-amb-top::before {
  display: none;
}

.km-amb-top h3 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sh-amb-text, #fff);
}

.km-amb-x {
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
  transition: opacity 0.18s ease;
}

.km-amb-x span,
.km-amb-x span::before {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.km-amb-x span::before {
  content: '';
  inset: 0;
  transform: rotate(90deg);
}

.km-amb-x:hover {
  opacity: 0.9;
}

.km-amb-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.km-amb-swiper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.km-amb-swiper .swiper-wrapper,
.km-amb-swiper .km-amb-slide {
  height: 100%;
}

.km-amb-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: #f3f5f7;
}

.km-amb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.km-amb-dots {
  position: absolute !important;
  left: 50%;
  bottom: max(0.85rem, calc(env(safe-area-inset-bottom) + 0.3rem));
  transform: translateX(-50%);
  margin: 0;
  z-index: 4;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.km-amb-count {
  display: none !important;
}

.km-amb-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.km-amb-dot.is-active {
  background: #fff;
  transform: scale(1.05);
}

.km-amb-empty {
  margin: 2rem 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

/* —— Términos: sheet fullscreen con texto ——
 * El color de letras de la carta (--sh-ink) puede ser blanco sobre granito.
 * Esta hoja es crema: el cuerpo usa tinta de sheet, no la de la carta. */
.km-terms-sheet {
  display: flex;
  flex-direction: column;
  background: var(--sh-cream, #fff);
  color: var(--sh-sheet-ink, #111);
  min-height: 100%;
}

.km-terms-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--sh-cream, #fff);
}

.km-terms-top h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--sh-font-heading, inherit);
  font-size: 1.15rem;
  font-weight: var(--sh-heading-weight, 800);
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--sh-sheet-ink, #111);
}

.km-terms-x {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  background: var(--sh-btn-bg, #0a0a0a);
  color: var(--sh-btn-text, #fff);
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.km-terms-x:hover {
  opacity: 0.9;
}

.km-terms-x span,
.km-terms-x span::before {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.km-terms-x span::before {
  content: '';
  inset: 0;
  transform: rotate(90deg);
}

.km-terms-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.35rem 1rem max(1.4rem, env(safe-area-inset-bottom));
  background: var(--sh-cream-deep, #f7f6f3);
}

.km-terms-legal.sp-legal--accordion {
  padding: 12px 0 8px;
  max-width: none;
}

.km-terms-legal .sp-legal-head {
  display: none;
}

.km-terms-legal .sp-legal-intro {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--sh-muted, var(--sh-sheet-muted, #666));
}

.km-terms-legal .sp-legal-acc {
  border-top: 0;
  gap: 8px;
}

.km-terms-legal .sp-legal-acc-btn {
  padding: 11px 14px;
}

.km-terms-legal .sp-legal-acc-title {
  font-size: 11px;
}

.km-terms-legal .sp-legal-acc-panel-inner .sp-prose--legal {
  padding: 10px 2px 14px;
  font-size: 0.92rem;
  color: var(--sh-sheet-ink, #111);
}

.km-terms-banner {
  display: none;
}

.km-terms-eyebrow,
.km-terms-lead,
.km-terms-body {
  display: none;
}

.km-antojo-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1.15rem max(1rem, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.km-antojo-panel {
  width: 100%;
  max-width: 26rem;
  margin-block: auto;
  flex: 0 0 auto;
}

.km-antojo-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

.km-antojo-titles h3 {
  margin: 0;
  font-family: var(--sh-font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

.km-antojo-brand {
  margin: 0.25rem 0 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4af37;
}

.km-antojo-x {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--sh-btn-bg, #0a0a0a);
  color: var(--sh-btn-text, #fff);
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.km-antojo-x span,
.km-antojo-x span::before,
.km-antojo-x span::after {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: currentColor;
}

.km-antojo-x span {
  transform: translate(-50%, -50%) rotate(45deg);
}

.km-antojo-x span::before {
  content: '';
  transform: translate(-50%, -50%) rotate(90deg);
}

.km-antojo-x span::after {
  display: none;
}

.km-antojo-x:hover {
  opacity: 0.9;
}

.km-antojo-body {
  width: 100%;
  padding: 0;
  background: transparent;
}

.km-antojo-search {
  position: relative;
  z-index: 2;
  margin-bottom: 0.55rem;
}

.km-antojo-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0.95rem;
  border-radius: 16px;
  background: #f4f4f4;
}

.km-antojo-search-ico {
  color: #999;
  font-size: 1.05rem;
}

.km-antojo-search-box input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #111;
  outline: none;
}

.km-antojo-results {
  margin-top: 0.45rem;
  max-height: min(40vh, 280px);
  overflow: auto;
  border: 1px solid #efefef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.km-antojo-results[hidden] {
  display: none !important;
}

.km-antojo-hit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0.8rem 0.95rem;
  border: 0;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.km-antojo-hit:last-child {
  border-bottom: 0;
}

.km-antojo-hit span {
  flex: 1;
  font-weight: 600;
  line-height: 1.35;
  color: #111;
}

.km-antojo-hit em {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 800;
  color: #111;
}

.km-antojo-nohit {
  margin: 0;
  padding: 0.85rem;
  color: #777;
  font-size: 0.85rem;
  text-align: center;
}

.km-antojo-list {
  margin-bottom: 0.75rem;
}

.km-antojo-empty {
  padding: 0.85rem 0.25rem 0.55rem;
  text-align: center;
  color: #888;
}

.km-antojo-empty p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
}

.km-antojo-empty span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #999;
}

.km-antojo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0.85rem 0.95rem;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-antojo-item.is-enter {
  opacity: 0;
  transform: translateY(12px);
}

.km-antojo-item.is-in {
  opacity: 1;
  transform: translateY(0);
}

.km-antojo-item.is-out {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.km-antojo-item:last-child {
  margin-bottom: 0;
}

.km-antojo-item-copy {
  flex: 1;
  min-width: 0;
}

.km-antojo-item-copy strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
}

.km-antojo-item-copy em {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-weight: 700;
  color: #d4af37;
}

.km-antojo-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 12px;
  background: #f8f8f8;
}

.km-antojo-qty button {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  color: #222;
}

.km-antojo-qty span {
  min-width: 1.2rem;
  text-align: center;
  font-weight: 800;
  display: inline-block;
}

.km-antojo-qty span.is-bump {
  animation: km-antojo-bump 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes km-antojo-bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

.km-antojo-summary {
  margin-top: 0.15rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.km-antojo-rows {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.km-antojo-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
}

.km-antojo-row span {
  color: #888;
  font-weight: 500;
}

.km-antojo-row strong {
  font-weight: 700;
}

.km-antojo-row strong.is-tick,
.km-antojo-total strong.is-tick {
  animation: km-antojo-tick 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes km-antojo-tick {
  0% {
    opacity: 0.45;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.km-antojo-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0.8rem 0.9rem;
  border-radius: 18px;
  background: var(--sh-btn-bg, #0d091d);
  color: var(--sh-btn-text, #fff);
}

.km-antojo-total span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.km-antojo-total strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.km-antojo-total-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.km-antojo-action-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  padding: 0.52rem 0.78rem;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-antojo-action-btn:hover,
.km-antojo-action-btn:focus-visible {
  opacity: 0.92;
  outline: none;
}

.km-antojo-clear {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.km-antojo-clear[hidden] {
  display: none !important;
}

.km-antojo-close-btn {
  background: #d4af37;
  color: #111;
}

.km-carta-hours-text {
  margin: 0.75rem 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  white-space: pre-wrap;
  text-align: center;
}

#km-carta-hours.km-carta-dialog--hours {
  --km-hours-bg: #080a1c;
  --km-hours-bg-opacity: 55;
  position: fixed;
  inset: 0;
  width: 100%;
  width: 100vw;
  max-width: none !important;
  height: 100%;
  height: 100dvh;
  max-height: none !important;
  margin: 0;
  padding: 0;
  background: transparent;
}

#km-carta-hours.km-carta-dialog--hours::backdrop,
#km-carta-hours.km-carta-dialog--hours[open].is-open::backdrop {
  background: rgb(from var(--km-hours-bg) r g b / calc(var(--km-hours-bg-opacity, 55) / 100));
}

.km-hours-stage {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  min-height: 100svh;
  padding: max(22px, env(safe-area-inset-top, 0px)) 22px max(24px, env(safe-area-inset-bottom, 0px));
  background: transparent;
  color: #f4ead8;
  text-align: center;
}

.km-hours-kicker {
  margin: 0 0 1.35rem;
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 234, 216, 0.55);
}

.km-hours-sheet,
.km-carta-hours-body {
  width: min(26rem, 100%);
}

.km-hours-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.km-hours-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
  margin: 0;
  padding: 1.85rem 0 0;
  border: 0;
}

.km-hours-block:first-child {
  padding-top: 0;
}

.km-hours-days {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin: 0;
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: none;
  color: rgba(244, 234, 216, 0.62);
}

.km-hours-today {
  font-family: var(--font, Manrope, system-ui, sans-serif);
  letter-spacing: 0.14em;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #e8c9a0;
}

.km-hours-time {
  margin: 0;
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: clamp(1.45rem, 5.2vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #f7f1e4;
}

.km-hours-clock {
  white-space: nowrap;
}

.km-hours-time.is-closed {
  font-size: clamp(1.25rem, 4.4vw, 1.7rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(244, 234, 216, 0.78);
}

.km-hours-dash {
  display: inline-block;
  margin: 0 0.4em;
  font-weight: 300;
  opacity: 0.45;
}

#km-carta-hours .km-hours-kicker,
#km-carta-hours .km-hours-days,
#km-carta-hours .km-hours-time,
#km-carta-hours .km-hours-today,
#km-carta-hours .km-hours-legacy,
#km-carta-hours .km-hours-empty {
  color: inherit;
}

#km-carta-hours .km-hours-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  grid-template-columns: none !important;
  gap: 0.06rem !important;
  padding: 1.85rem 0 0 !important;
}

#km-carta-hours .km-hours-block:first-child {
  padding-top: 0 !important;
}

#km-carta-hours .km-hours-days {
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-size: 0.82rem !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

#km-carta-hours .km-hours-time {
  font-size: clamp(1.45rem, 5.2vw, 2rem) !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

#km-carta-hours .km-hours-clock {
  white-space: nowrap !important;
}

#km-carta-hours .km-hours-legacy,
#km-carta-hours .km-hours-empty {
  font-size: 1.2rem !important;
  white-space: pre-wrap;
  text-align: center;
  line-height: 1.5;
}

.km-hours-legacy,
.km-hours-empty {
  margin: 0;
  font-family: var(--sh-font-heading, Georgia, serif);
  font-size: clamp(1.2rem, 4.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: #f7f1e4;
  white-space: pre-wrap;
}

#km-carta-hours .km-carta-volver {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(72%, 200px) !important;
  min-height: 2.75rem;
  margin: 1.6rem auto 0;
  padding: 0.7rem 1.25rem !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 !important;
  background: #e8eaed !important;
  color: #222 !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

#km-carta-hours .km-carta-volver.has-img {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0;
  width: min(72%, 220px) !important;
}

#km-carta-hours .km-carta-volver.has-img img {
  display: block;
  width: 100%;
  height: auto;
}

.km-carta-field {
  display: block;
  margin: 0.75rem 0 0;
  text-align: left;
}

.km-carta-field span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
}

.km-carta-field input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 1rem;
}

.km-carta-reservas-send {
  margin-top: 1rem;
}

/* —— Reservas fullscreen premium —— */
.km-carta-dialog--rsv {
  --rsv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rsv-item: 48px;
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sh-cream, #fbfbfa);
  color: var(--sh-ink, #111);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.4s var(--rsv-ease),
    transform 0.42s var(--rsv-ease);
}

.km-carta-dialog--rsv[open].is-open {
  opacity: 1;
  transform: translateY(0);
}

.km-carta-dialog--rsv::backdrop {
  background: #0a0a0a;
  opacity: 0;
  transition: opacity 0.4s var(--rsv-ease);
}

.km-carta-dialog--rsv[open].is-open::backdrop {
  opacity: 1;
}

.km-rsv-sheet {
  --rsv-line: color-mix(in srgb, var(--sh-ink, #111) 12%, transparent);
  --rsv-soft: var(--sh-cream-deep, #efeeeb);
  --rsv-field: color-mix(in srgb, var(--sh-ink, #111) 6%, var(--sh-cream, #fff));
  --rsv-field-focus: var(--sh-cream, #fff);
  --rsv-chip: color-mix(in srgb, var(--sh-ink, #111) 4%, var(--sh-cream, #fff));
  --rsv-chip-line: color-mix(in srgb, var(--sh-ink, #111) 14%, transparent);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--sh-cream, #fbfbfa);
  color: var(--sh-ink, #111);
  overflow: hidden;
}

.km-rsv-topbar {
  position: relative;
  flex: 0 0 auto;
  padding: max(0.85rem, env(safe-area-inset-top)) 1.25rem 0.85rem;
  border-bottom: 1px solid var(--rsv-line);
  background: var(--sh-cream, #fbfbfa);
}

.km-rsv-scroll {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1.25rem 1.25rem;
}

.km-rsv-foot {
  flex: 0 0 auto;
  padding: 0.85rem 1.25rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rsv-line);
  background: var(--sh-cream, #fbfbfa);
}

.km-rsv-foot[hidden] {
  display: none !important;
}

.km-rsv-close {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  right: 1rem;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  background: var(--sh-btn-bg, #0a0a0a);
  color: var(--sh-btn-text, #fff);
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.18s ease;
}

.km-rsv-close:hover {
  opacity: 0.9;
}

.km-rsv-close span,
.km-rsv-close span::before,
.km-rsv-close span::after {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: currentColor;
}

.km-rsv-close span {
  margin: 0;
  background: transparent;
  transform: translate(-50%, -50%);
}

.km-rsv-close span::before {
  content: '';
  transform: translate(-50%, -50%) rotate(45deg);
}

.km-rsv-close span::after {
  content: '';
  transform: translate(-50%, -50%) rotate(-45deg);
}

.km-rsv-head {
  margin: 0;
  padding-right: 2.5rem;
}

.km-rsv-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sh-muted, #9a9a9a);
}

.km-rsv-head h3 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-align: left !important;
  line-height: 1.15;
}

.km-rsv-block {
  margin: 0 0 1.35rem;
}

.km-rsv-label {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sh-muted, #8a8a8a);
}

.km-rsv-err {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: color-mix(in srgb, #b42318 12%, var(--sh-cream, #fff));
  color: #7a1f1f;
  font-size: 0.88rem;
}

.km-rsv-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.km-rsv-cal-month {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.km-rsv-nav-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--rsv-field);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--sh-ink, #222);
}

.km-rsv-cal-dow,
.km-rsv-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.km-rsv-cal-dow {
  margin-bottom: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--sh-muted, #b0b0b0);
  letter-spacing: 0.04em;
}

.km-rsv-cal-day {
  min-height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--sh-ink, #171717);
  transition: background 0.2s var(--rsv-ease), color 0.2s var(--rsv-ease);
}

.km-rsv-cal-day.is-muted,
.km-rsv-cal-day.is-past {
  color: color-mix(in srgb, var(--sh-ink, #111) 22%, transparent);
  cursor: default;
}

.km-rsv-cal-day.is-closed {
  color: color-mix(in srgb, var(--sh-muted, #888) 80%, var(--sh-ink, #111));
  cursor: default;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
}

.km-rsv-cal-day.is-active {
  background: var(--sh-btn-bg, #111);
  color: var(--sh-btn-text, #fff);
  text-decoration: none;
}

/* Reloj grande → franja (hora, luego minutos) */
.km-rsv-clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.05rem;
  margin: 0.15rem 0 0.35rem;
}

.km-rsv-clock-part {
  margin: 0;
  padding: 0.15rem 0.35rem;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: color-mix(in srgb, var(--sh-ink, #111) 28%, transparent);
  font: inherit;
  font-size: clamp(2.6rem, 11vw, 3.35rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.28s var(--rsv-ease),
    background 0.28s var(--rsv-ease),
    transform 0.28s var(--rsv-ease);
}

.km-rsv-clock-part:disabled {
  cursor: default;
}

.km-rsv-clock-part.is-set {
  color: var(--sh-ink, #111);
}

.km-rsv-clock-part.is-editing {
  color: var(--sh-ink, #111);
  background: var(--rsv-soft);
}

.km-rsv-clock-sep {
  font-size: clamp(2.2rem, 9vw, 2.9rem);
  font-weight: 300;
  color: color-mix(in srgb, var(--sh-ink, #111) 32%, transparent);
  line-height: 1;
  padding: 0 0.05rem;
}

.km-rsv-clock-period {
  align-self: flex-end;
  margin: 0 0 0.45rem 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sh-muted, #666);
  letter-spacing: 0.02em;
  line-height: 1;
}

.km-rsv-clock-coach {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--sh-muted, #888);
  min-height: 1.2em;
  transition: opacity 0.28s var(--rsv-ease);
}

.km-rsv-rail-wrap {
  position: relative;
  margin: 0 -0.15rem;
}

.km-rsv-rail-wrap::before,
.km-rsv-rail-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6rem;
  z-index: 1;
  pointer-events: none;
}

.km-rsv-rail-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--sh-cream, #fff) 10%, transparent);
}

.km-rsv-rail-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--sh-cream, #fff) 10%, transparent);
}

.km-rsv-rail-wrap--mins::before,
.km-rsv-rail-wrap--mins::after {
  display: none;
}

.km-rsv-rail {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.35rem 1.35rem 0.55rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.km-rsv-rail::-webkit-scrollbar {
  display: none;
}

.km-rsv-hour {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 4.1rem;
  height: 4.1rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--sh-ink, #111) 42%, transparent);
  font: inherit;
  scroll-snap-align: center;
  cursor: pointer;
  transition:
    background 0.28s var(--rsv-ease),
    color 0.28s var(--rsv-ease),
    transform 0.28s var(--rsv-ease);
}

.km-rsv-hour-num {
  font-size: 1.35rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.km-rsv-hour-period {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.85;
}

.km-rsv-hour:hover {
  color: var(--sh-ink, #444);
}

.km-rsv-hour.is-active {
  background: var(--sh-btn-bg, #111);
  color: var(--sh-btn-text, #fff);
  transform: scale(1.06);
}

.km-rsv-hour.is-active .km-rsv-hour-num {
  font-weight: 600;
}

.km-rsv-rail--mins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.55rem;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0.15rem 0 0.35rem;
}

.km-rsv-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 5.1rem;
  margin: 0;
  padding: 0.85rem 0.75rem;
  border: 1px solid var(--rsv-chip-line);
  border-radius: 20px;
  background: var(--rsv-chip);
  color: var(--sh-ink, #111);
  font: inherit;
  cursor: pointer;
  transition:
    background 0.28s var(--rsv-ease),
    border-color 0.28s var(--rsv-ease),
    color 0.28s var(--rsv-ease),
    transform 0.28s var(--rsv-ease);
}

.km-rsv-min:hover {
  border-color: color-mix(in srgb, var(--sh-ink, #111) 22%, transparent);
  background: var(--rsv-soft);
}

.km-rsv-min.is-active {
  background: var(--sh-btn-bg, #111);
  border-color: var(--sh-btn-bg, #111);
  color: var(--sh-btn-text, #fff);
  transform: translateY(-1px);
}

.km-rsv-min-main {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.km-rsv-min-sub {
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

.km-rsv-min.is-active .km-rsv-min-sub {
  opacity: 0.72;
}

.km-rsv-times-hint {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--sh-muted, #888);
  text-align: center;
}

.km-rsv-pax-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.km-rsv-pax-block .km-rsv-label {
  margin: 0;
}

.km-rsv-pax {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--rsv-soft);
}

.km-rsv-pax button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--sh-cream, #fff);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--sh-ink, #111);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--sh-ink, #111) 10%, transparent);
}

.km-rsv-pax span {
  min-width: 2rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sh-ink, #111);
}

.km-rsv-fields {
  display: grid;
  gap: 0.7rem;
}

/* Labels inside fields */
.km-rsv-float {
  position: relative;
  display: block;
  margin: 0;
}

.km-rsv-float input,
.km-rsv-float select,
.km-rsv-float textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 1.35rem 1rem 0.55rem;
  border: 0;
  border-radius: 14px;
  background: var(--rsv-soft);
  color: var(--sh-ink, #111);
  caret-color: var(--sh-ink, #111);
  font: inherit;
  font-size: 1.02rem;
  outline: none;
  transition: box-shadow 0.22s var(--rsv-ease), background 0.22s var(--rsv-ease);
}

.km-rsv-float textarea {
  min-height: 5rem;
  resize: vertical;
  padding-top: 1.45rem;
}

.km-rsv-float span {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 500;
  color: var(--sh-muted, #8d8d8d);
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  transition:
    top 0.2s var(--rsv-ease),
    transform 0.2s var(--rsv-ease),
    font-size 0.2s var(--rsv-ease),
    color 0.2s var(--rsv-ease);
}

.km-rsv-float--area span {
  top: 1.15rem;
  transform: none;
}

.km-rsv-float input:focus,
.km-rsv-float select:focus,
.km-rsv-float textarea:focus {
  background: var(--rsv-field-focus);
  box-shadow: 0 0 0 1.5px var(--sh-btn-bg, #111);
}

.km-rsv-float input:focus + span,
.km-rsv-float input:not(:placeholder-shown) + span,
.km-rsv-float textarea:focus + span,
.km-rsv-float textarea:not(:placeholder-shown) + span,
.km-rsv-float select:focus + span,
.km-rsv-float--select.is-filled span {
  top: 0.48rem;
  transform: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sh-muted, #777);
}

.km-rsv-float--area textarea:focus + span,
.km-rsv-float--area textarea:not(:placeholder-shown) + span {
  top: 0.48rem;
}

.km-rsv-occ-block {
  margin: 0.15rem 0 0.2rem;
}

.km-rsv-occ-block .km-rsv-label {
  margin-bottom: 0.55rem;
}

.km-rsv-occ-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.km-rsv-occ {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.15rem;
  margin: 0;
  padding: 0.7rem 0.65rem;
  border: 1px solid var(--rsv-chip-line);
  border-radius: 16px;
  background: var(--rsv-chip);
  color: var(--sh-ink, #222);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.28s var(--rsv-ease),
    border-color 0.28s var(--rsv-ease),
    color 0.28s var(--rsv-ease),
    transform 0.28s var(--rsv-ease);
}

.km-rsv-occ:hover {
  border-color: color-mix(in srgb, var(--sh-ink, #111) 22%, transparent);
  background: var(--rsv-soft);
}

.km-rsv-occ.is-active {
  background: var(--sh-btn-bg, #111);
  border-color: var(--sh-btn-bg, #111);
  color: var(--sh-btn-text, #fff);
  transform: translateY(-1px);
}

.km-rsv-float--select select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sh-muted, #666) 50%),
    linear-gradient(135deg, var(--sh-muted, #666) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.km-rsv-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--sh-btn-bg, #111);
  color: var(--sh-btn-text, #fff);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s var(--rsv-ease), opacity 0.2s var(--rsv-ease);
}

.km-rsv-btn:hover {
  transform: translateY(-1px);
}

.km-rsv-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.km-rsv-float input:-webkit-autofill,
.km-rsv-float input:-webkit-autofill:hover,
.km-rsv-float input:-webkit-autofill:focus,
.km-rsv-float textarea:-webkit-autofill,
.km-rsv-float select:-webkit-autofill {
  -webkit-text-fill-color: var(--sh-ink, #111);
  caret-color: var(--sh-ink, #111);
  box-shadow: 0 0 0 1000px var(--rsv-soft, #efeeeb) inset;
  transition: background-color 99999s ease-out;
}

.km-rsv-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.km-rsv-ok {
  text-align: center;
  padding: 3.5rem 0.5rem 1.5rem;
}

.km-rsv-ok-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--sh-btn-bg, #111);
  position: relative;
}

.km-rsv-ok-mark::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 15px;
  width: 12px;
  height: 22px;
  border: solid var(--sh-btn-text, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.km-rsv-ok-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center !important;
  color: var(--sh-ink, #111);
}

.km-rsv-ok-text {
  margin: 0.55rem 0 1.5rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--sh-muted, #666);
}

@media (prefers-reduced-motion: reduce) {
  .km-carta-dialog--rsv,
  .km-carta-dialog--rsv::backdrop,
  .km-rsv-btn,
  .km-rsv-cal-day,
  .km-rsv-hour,
  .km-rsv-min,
  .km-rsv-occ,
  .km-rsv-clock-part,
  .km-rsv-clock-coach,
  .km-rsv-float input,
  .km-rsv-float span,
  .km-antojo-item {
    transition: none !important;
  }

  .km-carta-dialog--rsv[open] {
    opacity: 1;
    transform: none;
  }

  .km-antojo-qty span.is-bump,
  .km-antojo-row strong.is-tick,
  .km-antojo-total strong.is-tick {
    animation: none !important;
  }
}
.km-carta-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
}

.km-carta-qr-img {
  display: block;
  width: 220px;
  height: 220px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

#km-carta-qr {
  --km-qr-bg: #080a1c;
  --km-qr-bg-opacity: 0;
}

#km-carta-qr.km-carta-dialog--qr {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  background: transparent;
}

#km-carta-qr.km-carta-dialog--qr::backdrop,
#km-carta-qr.km-carta-dialog--qr[open].is-open::backdrop {
  background: rgb(from var(--km-qr-bg) r g b / calc(var(--km-qr-bg-opacity, 0) / 100));
}

.km-carta-qr-stage {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(22px, env(safe-area-inset-bottom, 0px));
  background: transparent;
}

#km-carta-qr .km-carta-qr-img {
  width: min(86vw, calc((100svh - 9.5rem) * 700 / 725), 700px);
  height: auto;
  max-height: calc(100svh - 9.5rem);
  aspect-ratio: 700 / 725;
  object-fit: contain;
  background: transparent;
  border: 0;
}

#km-carta-qr .km-carta-qr-img:not(.is-poster) {
  aspect-ratio: 1 / 1;
}

#km-carta-qr .km-qr-volver {
  position: static !important;
  align-self: center;
  width: min(72%, 280px) !important;
  margin: 1.25rem auto 0 !important;
  padding: 0.7rem 1.25rem !important;
}

#km-carta-qr .km-qr-volver.has-img {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0;
  width: min(72%, 280px) !important;
  margin: 1.25rem auto 0 !important;
}

#km-carta-qr .km-qr-volver.has-img img {
  display: block;
  width: 100%;
  height: auto;
}

body.kinlig-body.kinlig-menu-home #km-carta-qr .km-carta-dialog-panel,
body.kinlig-body.kinlig-menu-home #km-carta-hours .km-carta-dialog-panel {
  background: transparent !important;
}

body.kinlig-body.kinlig-menu-home .km-carta-dialog-panel {
  border-radius: 0 !important;
  background: #fff !important;
  color: #111 !important;
}

html.km-rsv-lock,
html.km-rsv-lock body {
  overflow: hidden !important;
}

/* Modal plato premium — debe ganar a Theme::inlineCss (cream/ink en .product-modal-*) */
body.kinlig-body.kinlig-menu-home {
  --km-modal-card: #fff;
}

body.kinlig-body.kinlig-menu-home .product-modal {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

body.kinlig-body.kinlig-menu-home .product-modal-backdrop {
  background: #000;
}

body.kinlig-body.kinlig-menu-home .product-modal-panel {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  grid-template-columns: 1fr;
  border-radius: 0 !important;
  box-shadow: none;
  /* No usar shorthand background:!important — pisa background-image del look */
  background-color: #000 !important;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #111 !important;
  overflow: hidden;
}

body.kinlig-body.kinlig-menu-home .product-modal-gallery,
body.kinlig-body.kinlig-menu-home .product-modal-gallery-main {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  margin: 0;
  background-color: #111 !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  overflow: hidden;
}

body.kinlig-body.kinlig-menu-home .product-modal-gallery-main {
  display: block !important;
}

body.kinlig-body.kinlig-menu-home .product-modal-gallery-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

body.kinlig-body.kinlig-menu-home .product-modal-gallery-main img.is-wait {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.kinlig-body.kinlig-menu-home .product-modal-gallery-main img {
    transition: none;
  }
}

body.kinlig-body.kinlig-menu-home .product-modal-track {
  display: none !important;
}

body.kinlig-body.kinlig-menu-home .product-modal-thumbs,
body.kinlig-body.kinlig-menu-home .product-modal-dots {
  display: none !important;
}

body.kinlig-body.kinlig-menu-home .product-modal-gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.58) 100%
  );
}

body.kinlig-body.kinlig-menu-home .product-modal-body {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: auto;
  max-height: min(52vh, 440px);
  overflow: auto;
  padding: 1.5rem 1.35rem 1.25rem !important;
  text-align: center;
  color: var(--km-modal-text-color, #fff) !important;
  background-color: var(
    --km-modal-bg-fill,
    rgb(from var(--km-modal-bg-color, #0a0a0a) r g b / calc(var(--km-modal-bg-opacity, 100) / 100))
  ) !important;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0;
  border-radius: 22px !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

body.kinlig-body.kinlig-menu-home .product-modal[data-bg-mode="image"] .product-modal-body {
  background-image: var(--km-modal-bg-image, none) !important;
}

body.kinlig-body.kinlig-menu-home .product-modal-brand,
body.kinlig-body.kinlig-menu-home .product-modal-pack {
  display: none !important;
}

/* Sistema virgen: tipografía = panel Tipo de letra; color = Adicionales */
body.kinlig-body.kinlig-menu-home .product-modal-title {
  order: 1;
  width: 100%;
  margin: 0 0 0.1rem !important;
  font-family: var(--sh-font-dish, var(--sh-font-heading, var(--sh-serif, Georgia, serif))) !important;
  font-size: calc(clamp(1.85rem, 7vw, 2.35rem) * var(--sh-dish-size, 1)) !important;
  font-weight: var(--sh-dish-weight, var(--sh-heading-weight, 700)) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.12 !important;
  color: var(--km-modal-title-color, var(--km-modal-text-color, #fff)) !important;
  text-shadow: none;
}

body.kinlig-body.kinlig-menu-home .product-modal-desc {
  order: 2;
  width: 100%;
  margin: 0 0 0.45rem !important;
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
  display: block;
  flex: none;
  font-family: var(--sh-font-body, var(--font-body, sans-serif)) !important;
  font-size: calc(clamp(0.9rem, 3.6vw, 1.02rem) * var(--sh-body-size, 1)) !important;
  line-height: 1.32 !important;
  font-weight: var(--sh-font-weight, 400) !important;
  font-style: var(--sh-body-style, normal);
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--km-modal-text-color, #fff) !important;
  opacity: 0.88;
  text-shadow: none;
}

body.kinlig-body.kinlig-menu-home .product-modal-price {
  order: 3;
  width: 100%;
  margin: 0 0 0.4rem !important;
  font-family: var(--sh-font-dish, var(--sh-font-heading, var(--sh-serif, Georgia, serif))) !important;
  font-size: clamp(1.75rem, 6.6vw, 2.2rem) !important;
  font-weight: var(--sh-dish-weight, var(--sh-heading-weight, 700)) !important;
  letter-spacing: 0.04em;
  line-height: 1.12 !important;
  color: var(--km-modal-text-color, #fff) !important;
  text-shadow: none;
}

body.kinlig-body.kinlig-menu-home .product-modal-price.has-sizes {
  display: block !important;
  margin-top: 0.15rem !important;
}

body.kinlig-body.kinlig-menu-home .product-modal-price[hidden] {
  display: none !important;
}

body.kinlig-body.kinlig-menu-home .product-modal-sizes {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin: 0.35rem 0 0.2rem;
}

body.kinlig-body.kinlig-menu-home .product-modal-price {
  order: 3;
}

body.kinlig-body.kinlig-menu-home .product-modal-size-chip {
  border: 0;
  background: transparent;
  color: var(--km-modal-text-color, #fff);
  font-size: clamp(0.68rem, 2.7vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem 0.65rem;
  opacity: 0.4;
}

body.kinlig-body.kinlig-menu-home .product-modal-size-chip.is-on {
  background: transparent;
  border: 0;
  color: var(--km-modal-text-color, #fff);
  opacity: 1;
  font-weight: 700;
}

body.kinlig-body.kinlig-menu-home .product-modal-size-chip:hover {
  opacity: 0.75;
}

body.kinlig-body.kinlig-menu-home .product-modal-size-chip:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: none;
}

body.kinlig-body.kinlig-menu-home .product-modal-size-chip + .product-modal-size-chip::before {
  background: var(--km-modal-text-color, #fff);
  opacity: 0.22;
  height: 9px;
  margin-top: -5px;
}

body.kinlig-body.kinlig-menu-home .product-modal-recados {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0.2rem 0 0.15rem;
}

body.kinlig-body.kinlig-menu-home .product-modal-recado-chip {
  border-color: var(--km-modal-text-color, #fff);
  color: var(--km-modal-text-color, #fff);
  font-size: clamp(0.64rem, 2.5vw, 0.74rem);
  padding: 0.28rem 0.7rem;
  opacity: 0.45;
}

body.kinlig-body.kinlig-menu-home .product-modal-recado-chip.is-on {
  opacity: 1;
}

/* Mold rectangular neutro (sistema virgen) — branding pondrá el PNG */
body.kinlig-body.kinlig-menu-home .km-carta-volver {
  order: 4;
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(72%, 200px) !important;
  min-width: 0;
  height: auto !important;
  min-height: 2.75rem;
  margin: 0 auto;
  padding: 0.7rem 1.25rem !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 !important;
  background: #e8eaed !important;
  box-shadow: none;
  color: #222 !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1 !important;
  cursor: pointer;
}

body.kinlig-body.kinlig-menu-home .km-carta-volver.has-img {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0;
  width: min(72%, 220px) !important;
}

body.kinlig-body.kinlig-menu-home .km-carta-volver.has-img img {
  display: block;
  width: 100%;
  height: auto;
}

body.kinlig-body.kinlig-menu-home .km-carta-volver:focus,
body.kinlig-body.kinlig-menu-home .km-carta-volver:focus-visible,
body.kinlig-body.kinlig-menu-home .km-ad-volver:focus,
body.kinlig-body.kinlig-menu-home .km-ad-volver:focus-visible {
  outline: none;
}

body.kinlig-body.kinlig-menu-home .product-modal[data-bg-mode="color"] .product-modal-panel {
  background-color: var(--km-modal-bg-color, #0a0a0a) !important;
  background-image: none !important;
}

body.kinlig-body.kinlig-menu-home .product-modal[data-bg-mode="image"] .product-modal-panel {
  background-color: var(--km-modal-bg-color, #0a0a0a) !important;
  background-image: var(--km-modal-bg-image, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Entrada + modal Adicionales */
.km-carta-adicionales-entry {
  margin: 1.25rem 0 0.35rem;
  padding: 0 1rem;
}

.km-carta-ad-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 640px);
  max-width: 640px;
  margin: 0 auto;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1px solid #111;
  border-radius: 0;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Misma foto que el título del modal: molde más alto que categorías (640×342). */
.km-carta-ad-tile.has-art {
  box-sizing: border-box;
  position: relative;
  width: min(100%, 640px);
  max-width: 640px;
  aspect-ratio: 640 / 342;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  overflow: hidden;
}

.km-carta-ad-tile.has-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}

.km-carta-ad-tile.has-art .km-carta-ad-tile-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.km-ad-modal {
  --km-ad-ease: cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--km-ad-bg, #0a0a0a);
  opacity: 0;
  transition: opacity 0.4s var(--km-ad-ease);
}

.km-ad-modal[open].is-open {
  opacity: 1;
}

.km-ad-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.4s var(--km-ad-ease);
}

.km-ad-modal[open].is-open::backdrop {
  opacity: 1;
}

.km-ad-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  --km-ad-text: #ffffff;
  background-color: var(--km-ad-bg, #0a0a0a);
  background-image: none;
  color: var(--km-ad-text, #fff);
  font-family: var(--sh-font-body, var(--font-body, inherit));
  font-weight: var(--sh-font-weight, 400);
  transform: translateY(16px);
  transition: transform 0.4s var(--km-ad-ease);
}

.km-ad-modal[open].is-open .km-ad-shell {
  transform: none;
}

.km-ad-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  display: block;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.km-ad-stack {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: max(0.65rem, env(safe-area-inset-top, 0px)) 1rem max(1.25rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--km-ad-bg, #0a0a0a);
  background-size: var(--km-menu-bg-size, 100% auto);
  background-position: top center;
  background-repeat: repeat-y;
}

.km-ad-title {
  box-sizing: border-box;
  flex-shrink: 0;
  width: min(100%, 640px);
  max-width: 640px;
  margin: 0 auto 0.85rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.km-ad-title.has-art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center top;
}

.km-ad-title-text {
  margin: 0 0 0.7rem;
  text-align: center;
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-size: clamp(1.4rem, 5.5vw, 1.85rem);
  font-weight: var(--sh-heading-weight, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}

.km-ad-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.38rem;
  width: max-content;
  max-width: min(100%, 360px);
}

.km-ad-row {
  display: grid;
  grid-template-columns: 90px auto;
  gap: 1.1rem;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.km-ad-photo {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  border: 0;
  overflow: hidden;
  background-color: #0a0a0a;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* shop.css: body.kinlig-body * { border-radius:0 !important } — hay que ganar en especificidad */
body.kinlig-body .km-ad-photo,
body.kinlig-body.kinlig-menu-home .km-ad-photo {
  border-radius: 16px !important;
}

.km-ad-photo.has-img {
  background-color: transparent;
}

.km-ad-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
}

.km-ad-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  max-width: 13.2rem;
  text-align: left;
}

.km-ad-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-size: 0.94rem;
  font-weight: var(--sh-heading-weight, 700);
  line-height: 1.22;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: inherit;
  opacity: 0.95;
}

.km-ad-copy em {
  display: block;
  margin: 0;
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-style: normal;
  font-size: 1.47rem;
  font-weight: var(--sh-heading-weight, 700);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: inherit;
}

/* Lista de bebidas: nombre + texto de apoyo + precio. Sin foto. */
.km-drink-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 360px);
}

.km-drink-row {
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.km-drink-row:last-child {
  border-bottom: 0;
}

.km-drink-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
}

.km-drink-top strong {
  min-width: 0;
  margin: 0;
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-size: 1.02rem;
  font-weight: var(--sh-heading-weight, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: inherit;
}

.km-drink-top em {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-style: normal;
  font-size: 1.05rem;
  font-weight: var(--sh-heading-weight, 700);
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
  color: inherit;
}

.km-drink-note {
  margin: 0.1rem 0 0;
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-size: 0.88rem;
  font-weight: var(--sh-font-weight, 400);
  line-height: 1.32;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  opacity: 0.72;
}

.km-drink-empty {
  margin: 0.5rem 0 0;
  text-align: center;
  opacity: 0.7;
  font-size: 0.95rem;
}

/* Bebidas: lista al centro; si no cabe, baja con el dedo. El mármol no se mueve. Volver abajo. */
#km-carta-bebidas .km-ad-shell {
  background-color: var(--km-ad-bg, #0a0a0a);
  background-size: var(--km-menu-bg-size, 100% auto);
  background-position: top center;
  background-repeat: repeat-y;
}

#km-carta-bebidas .km-ad-scroll {
  display: flex;
  flex-direction: column;
}

#km-carta-bebidas .km-ad-stack {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  margin-top: auto;
  margin-bottom: auto;
  padding-bottom: 0.65rem;
  justify-content: flex-start;
  background: transparent;
}

#km-carta-bebidas .km-ad-volver {
  flex-shrink: 0;
  align-self: center;
  margin: 0.35rem auto max(1.1rem, env(safe-area-inset-bottom, 0px));
}

.km-ad-volver {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(72%, 220px);
  min-height: 2.75rem;
  margin: 1.75rem auto 0;
  padding: 0.7rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font: inherit;
  font-family: var(--sh-font-heading, var(--font-display, inherit));
  font-size: 0.82rem;
  font-weight: var(--sh-heading-weight, 800);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.km-ad-volver.has-img {
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
}

.km-ad-volver.has-img img {
  display: block;
  width: 100%;
  height: auto;
}

.km-ad-volver:focus,
.km-ad-volver:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .km-ad-modal,
  .km-ad-modal::backdrop,
  .km-ad-shell,
  .km-ad-scroll {
    transition: none !important;
  }

  .km-ad-modal,
  .km-ad-shell {
    opacity: 1;
    transform: none;
  }
}

body.kinlig-body.kinlig-menu-home .km-carta-volver:hover {
  opacity: 0.9;
}

/* X arriba derecha */
body.kinlig-body.kinlig-menu-home .km-carta-modal-x {
  position: absolute !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  right: 12px !important;
  z-index: 6;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

body.kinlig-body.kinlig-menu-home .km-carta-modal-x:hover {
  opacity: 0.85;
}

body.kinlig-body.kinlig-menu-home:not(.has-cart-items) .product-modal-actions,
body.kinlig-body.kinlig-menu-home.kinlig-menu-no-cart .product-modal-actions {
  display: none;
}

/* Marca destacada: 2 espacios + asoma la siguiente categoría */
.km-carta-drinks .km-carta-swiper .swiper-slide.km-carta-slide.km-carta-sponsor-slide {
  width: calc(2 * ((100% - 30px) / 2.15) + 15px);
}

.km-carta-drinks .km-carta-dish-visual.km-carta-sponsor-visual {
  aspect-ratio: 2.1 / 1;
  border-radius: var(--km-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.km-carta-sponsor-tile.is-reserved {
  cursor: default;
  pointer-events: none;
}

.km-carta-sponsor-fallback {
  color: #fff;
  font-size: clamp(0.95rem, 3.6vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 12px;
  text-align: center;
}

.km-sponsor-shell[data-bg="image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.km-sponsor-stack {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  background-image: none;
}

.km-sponsor-logo {
  display: block;
  width: min(220px, 58%);
  height: auto;
  margin: 0 auto 1.1rem;
  object-fit: contain;
}

.km-sponsor-brand {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.km-sponsor-grid {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 10px;
  width: 100%;
}

.km-sponsor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}

.km-sponsor-item-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}

.km-sponsor-item-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}

.km-sponsor-item-photo.is-empty {
  background: rgba(255, 255, 255, 0.2);
}

.km-sponsor-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.km-sponsor-item-price {
  font-size: 12px;
  font-weight: 700;
}

.km-sponsor-modal .km-ad-volver {
  margin-left: auto;
  margin-right: auto;
}

/* Marca: foto a pantalla completa. Adicionales/bebidas usan 100% auto + repeat-y. */
.km-sponsor-modal .km-ad-shell {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .km-sponsor-modal,
  .km-sponsor-modal .km-ad-shell,
  .km-sponsor-modal .km-ad-scroll,
  .km-sponsor-modal::backdrop {
    transition: none !important;
  }
}

@media (max-width: 380px) {
  .km-carta {
    --km-prestige-inset: 14px;
  }

  body.kinlig-menu-home {
    --km-slide: 250px;
    --km-pad-side: 20px;
    --km-radius: 40px;
  }
}

/* —— Segunda carta: franja de lomo, de arriba a abajo, pegada al modal —— */
.km-extra {
  position: static;
}

.km-extra-sheet {
  --km-extra-strip: 28px;
  --km-extra-peek: 22px;
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background-color: var(--km-extra-sheet-bg, var(--sh-cream, #f7f4ef));
  background-image: none;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
}

.km-extra-sheet.has-photo {
  /* El fondo va en el shell (crece con el contenido), no en el panel con overflow. */
  background-image: none;
}

.km-extra-sheet.has-photo .km-extra-panel {
  background-image: none;
}

.km-extra-sheet.has-photo .km-extra-shell {
  background-image: var(--km-extra-bg);
  background-size: var(--km-extra-bg-size, 100% auto);
  background-position: top center;
  background-repeat: repeat-y;
}

.km-extra.is-open .km-extra-sheet {
  transform: translateX(var(--km-extra-peek));
  pointer-events: auto;
}

.km-extra.is-open .km-extra-tab {
  transform: none;
}

.km-extra-tab {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--km-extra-strip);
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 14px 0 0 14px;
  background-color: var(--km-extra-strip-bg, var(--sh-cream, #f7f4ef));
  background-image: none;
  color: var(--km-extra-strip-title, var(--sh-ink, #111));
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.1);
  font: inherit;
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
  transform: translateX(-100%);
}

.km-extra-tab::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 14px;
}

.km-extra-tab:hover,
.km-extra-tab:focus-visible {
  outline: none;
}

.km-extra-tab-label {
  position: absolute;
  top: 50%;
  left: 50%;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%) rotate(180deg);
  max-height: 70vh;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Kindoma en la franja: lápiz ARRIBA del texto (no al lado — no empuja ni tapa) */
.km-extra-tab {
  overflow: visible;
}

.km-extra-tab-label .ki-ed {
  display: inline-block;
  max-width: none;
  padding-right: 0;
  padding-top: 0;
  vertical-align: baseline;
}

.km-extra-tab-label .ki-ed-pen {
  top: 0;
  right: 50%;
  left: auto;
  bottom: auto;
  width: 22px;
  height: 22px;
  transform: translate(50%, calc(-100% - 10px)) scale(0.92);
}

.km-extra-tab-label .ki-ed:hover .ki-ed-pen,
.km-extra-tab-label .ki-ed:focus-within .ki-ed-pen,
.km-extra-tab-label .ki-ed.is-active .ki-ed-pen,
body.ki-edit-on .km-extra-tab-label .ki-ed-pen,
html.ki-edit-on .km-extra-tab-label .ki-ed-pen {
  transform: translate(50%, calc(-100% - 10px)) scale(1);
  pointer-events: auto;
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .km-extra-tab-label .ki-ed-pen {
    transform: translate(50%, calc(-100% - 10px)) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes km-extra-wave {
  0%, 100% { transform: translateX(100%); }
  40% { transform: translateX(calc(100% - 10px)); }
}

.km-extra-sheet.is-wave {
  animation: km-extra-wave 0.95s cubic-bezier(0.22, 1, 0.36, 1) 2;
}

.km-extra-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.km-extra-shell {
  width: min(100%, var(--km-carta-max, 640px));
  min-height: 100%;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top, 0px)) 0 0;
  padding-left: var(--km-extra-strip);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: var(--km-extra-dish-color, var(--sh-ink, #111));
}

.km-extra-back {
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 0 8px 6px;
  padding: 0.38rem 0.78rem;
  min-height: 2rem;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--km-extra-sheet-bg, #fff) 82%, transparent);
  color: inherit;
  font-family: var(--sh-font-heading, var(--font-display, Georgia, serif));
  font-size: 0.76rem;
  font-weight: var(--sh-heading-weight, 700);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}

.km-extra-back:focus,
.km-extra-back:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.km-extra-menu {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 1.5rem;
}

.km-extra-section {
  flex: 0 0 auto;
  width: 100%;
}

.km-extra-menu .km-carta-empty {
  margin: 0;
  padding: 1rem var(--km-pad-side, 35px);
  text-align: center;
}

.km-extra-cat {
  margin: 0 var(--km-pad-side, 24px) 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--km-extra-cat-color, var(--sh-ink, #111));
  font-family: var(--sh-font-heading, inherit);
  font-size: calc(var(--km-extra-cat-size, 20px) * var(--sh-heading-size, 1));
  font-weight: var(--sh-heading-weight, 700) !important;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.km-extra-menu .km-carta-swiper .swiper-slide.km-carta-slide,
.km-extra-menu .km-carta-swiper .km-carta-slide {
  width: calc(var(--km-slide) * 0.78);
  /* Sin Swiper (primer arrastre) el -15px del menú principal pega los platos. */
  margin-right: 15px;
}

.km-extra-menu .km-carta-dish-visual {
  border-radius: calc(var(--km-radius) * 0.78);
}

body.kinlig-body.kinlig-menu-home .km-extra-menu .km-carta-dish-visual {
  border-radius: calc(var(--km-radius) * 0.78) !important;
}

.km-extra-menu .km-carta-dish-name {
  color: var(--km-extra-dish-color, inherit);
  font-family: var(--sh-font-dish, var(--sh-font-heading, inherit));
  font-weight: var(--sh-dish-weight, 500);
  font-size: calc(1rem * var(--sh-dish-size, 1));
  padding-top: 7px;
}

.km-extra-section + .km-extra-section {
  margin-top: 1.35rem;
}

html.km-extra-lock,
html.km-extra-lock body {
  overflow: hidden;
}

/* Al arrastrar/abrir el secundario, el menú principal no debe recibir toques. */
html.km-extra-dragging #km-carta-menu,
html.km-extra-lock #km-carta-menu {
  pointer-events: none;
}

html.km-extra-dragging #km-carta-menu .km-carta-swiper,
html.km-extra-lock #km-carta-menu .km-carta-swiper {
  touch-action: none;
}

.mm-preview-carta {
  position: relative;
}

.mm-preview-screen .km-extra-tab--preview,
.mm-preview-carta .km-extra-tab--preview {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: 4;
  width: 22px;
  transform: none;
  border-radius: 12px 0 0 12px;
  box-shadow: -3px 0 12px rgba(0, 0, 0, 0.1);
  animation: km-extra-preview-wave 0.95s cubic-bezier(0.22, 1, 0.36, 1) 2;
}

.mm-preview-screen .km-extra-tab--preview::before {
  display: none;
}

.mm-preview-screen .km-extra-tab--preview .km-extra-tab-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  max-height: 78%;
}

@keyframes km-extra-preview-wave {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .km-extra-sheet,
  .km-extra-tab {
    transition: none !important;
    animation: none !important;
  }
  .km-extra-sheet.is-wave,
  .mm-preview-screen .km-extra-tab--preview,
  .mm-preview-carta .km-extra-tab--preview {
    animation: none !important;
  }
}