/* CSS de la página: solo lo que el kit no trae (dentro de visuales y composiciones de un "place").
   Movimiento según Emil Kowalski: < 300 ms, curva propia, nunca ease-in, hover solo con puntero fino. */
:root { --ease-ui: cubic-bezier(0.23, 1, 0.32, 1); --m-image: 280ms; --m-image-out: 240ms; }
.tile__media > img { transition-duration: 280ms; transition-timing-function: var(--ease-ui); }

/* type moment "address" */
.type-moment { font: var(--display-weight) clamp(40px, 5vw, 72px)/1.05 var(--font-display); letter-spacing: -0.03em; margin: var(--s-4) 0 var(--s-7); }
.type-moment a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; text-decoration-color: transparent; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .type-moment a:hover { text-decoration-color: currentColor; } }

/* la oferta: grupos y, debajo, la tira de detalles */
.menu-group .t-label { margin: 0 0 var(--s-3); }
.rows .rows__name { display: block; }
.rows .rows__name .link { font-weight: 500; }
.rows__dur { font-weight: 400; margin-left: var(--s-2); }


/* la casa: trio con topes alineados */
.trio { align-items: start; }

/* galería: par de fotos 1:1, topes alineados */
.pair__item { display: block; overflow: clip; aspect-ratio: 1; }
.pair__item > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 280ms var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .pair__item:hover > img { transform: scale(1.03); } }
@media (max-width: 639px) { .pair > .pair__item { grid-column: 1 / -1; } }

/* productos: filtros como palabras, cambio instantáneo */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-6); }
.filter { font: 500 16px/44px var(--font-text); min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.filter[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .filter:hover { color: var(--ink); } }
.products { list-style: none; padding: 0; margin: 0; row-gap: var(--s-7); align-items: stretch; }
.product { --tile-ratio: 4 / 5; display: flex; flex-direction: column; gap: var(--s-4); }
.product .tile__media { background: var(--p-surface); }
.product .btn-row { margin-top: auto; }
.product[data-soldout] .tile__price { font-weight: 500; }
.product[data-soldout] .tile__media > img { opacity: .55; }
.product__mono { display: grid; place-items: center; width: 100%; height: 100%; font: 400 64px/1 var(--font-display); color: var(--muted); }
.product[hidden] { display: none; }
@media (max-width: 1023px) { .products > .product.span-4 { grid-column: span 6; } }
@media (max-width: 639px) {
  .products > .product.span-4 { grid-column: span 6; }
  .product > p { display: none; }
  .product .btn { width: 100%; padding-inline: var(--s-3); }
  .hide-sm { display: none; }
  .strip > .pl-photo.span-6 { grid-column: span 6; }
  .type-moment { font-size: var(--t-h2); }
  .rows__dur { display: block; margin-left: 0; }
}

/* reserva */
.booking__panel { background: var(--p-surface); padding: var(--s-7); display: grid; gap: var(--s-5); align-content: start; }
.booking__panel .field select { width: 100%; height: 48px; font: 400 16px var(--font-text); color: var(--ink); background: var(--p-bg); border: 1px solid var(--line-strong, #0003); border-radius: 2px; padding: 0 var(--s-4); }
.booking__cal { position: relative; }
.cal-frame { position: relative; min-height: 640px; }
.cal-frame[hidden] { display: none; }
.cal-frame--failed { min-height: 0; }
.cal-skeleton { position: absolute; inset: 0; z-index: 1; background: var(--p-surface); display: grid; align-content: start; gap: var(--s-5); transition: opacity 200ms var(--ease-ui); }
[data-ready] > .cal-skeleton { opacity: 0; pointer-events: none; }
.cal-skeleton__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-2); }
.sk { background: color-mix(in oklab, var(--p-ink) 8%, transparent); }
.sk--title { height: 20px; width: 160px; }
.sk--day { aspect-ratio: 1; }
.booking__alt { margin: 0; color: var(--muted); }
.booking__panel:has(.cal-frame--failed:not([hidden])) .booking__alt { display: none; }
@media (max-width: 1023px) { .booking > .pl-photo { order: 2; grid-column: 1 / -1; --pl-r: 1.3333; } .booking > .booking__panel { grid-column: 1 / -1; } }
@media (max-width: 639px) { .booking__panel { padding: var(--s-5); } }

/* visita: martes resaltado, mapa en el marco de la foto */
.hours dd { white-space: nowrap; }
.hours .is-closed { color: var(--p-accent); font-weight: 600; }
.map { margin: 0; align-self: stretch; display: flex; }
.map > iframe { display: block; width: 100%; min-height: 360px; flex: 1; border: 0; background: var(--p-surface); }

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer__address a { color: inherit; text-decoration: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Emil Kowalski: los botones responden al presionar con scale(0.97), con la curva ease-out propia y en < 160 ms.
   (El kit usa .985; el brief pide 0.97.) Sin movimiento si el sistema pide menos animación. */
html:not([data-motion="off"]) .btn:active,
html:not([data-motion="off"]) :is([data-buttons]) .btn--secondary:active { transform: scale(0.97); transition: transform 120ms var(--ease-ui); }
@media (prefers-reduced-motion: reduce) { html .btn:active { transform: none; } }

/* Logo del cliente (sticker recortado): en la barra ocupa casi toda la altura; el nombre queda al lado para leerse. */
.nav__logo img.brand-logo { height: calc(var(--nav) - 14px); max-height: 52px; width: auto; }
@media (max-width: 639px) { .nav__logo img.brand-logo { height: 40px; } }
.footer-logo { width: 120px; height: auto; }

/* ── Asistente (Gemini) ───────────────────────────────────────
   Botón fijo abajo a la derecha; el panel crece desde el botón (scale 0.95 + opacidad, 200 ms, ease-out).
   En teléfono sube junto con la barra de acciones cuando ésta aparece (transform, no bottom). */
.ai__launch {
  position: fixed; right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: var(--s-2); height: 48px; padding: 0 var(--s-5) 0 var(--s-4);
  border: 0; border-radius: 999px; background: var(--p-ink); color: var(--p-bg); font: 500 15px/1 var(--font-text);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); cursor: pointer;
  transition: transform 200ms var(--ease-ui), opacity 200ms var(--ease-ui);
}
.ai__launch svg { width: 20px; height: 20px; }
.ai__launch:active { transform: scale(0.97); transition-duration: 120ms; }
.ai[data-open] .ai__launch { opacity: 0; transform: scale(0.95); pointer-events: none; }
@media (max-width: 639px) {
  .ai__launch { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .ai__launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :root:has(> body > nav.actionbar:is([data-bar="shown"], [data-bar="always"])) .ai__launch { transform: translateY(calc(-1 * var(--bar))); }
}

.ai__panel {
  position: fixed; right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; width: min(380px, calc(100vw - 2 * var(--s-4))); height: min(560px, calc(100svh - var(--nav) - 2 * var(--s-4)));
  background: var(--p-bg); color: var(--p-ink); border: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent);
  border-radius: var(--r-lg); box-shadow: 0 18px 50px rgb(0 0 0 / 0.22); overflow: hidden;
  transform-origin: bottom right; opacity: 0; transform: scale(0.95); visibility: hidden;
  transition: transform 200ms var(--ease-ui), opacity 200ms var(--ease-ui), visibility 0s 200ms;
}
.ai[data-open] .ai__panel { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
@media (max-width: 639px) {
  .ai__panel { left: var(--s-2); right: var(--s-2); bottom: calc(var(--s-2) + env(safe-area-inset-bottom)); width: auto; height: min(620px, 82svh); transform-origin: bottom center; transform: translateY(12px) scale(0.98); }
}

.ai__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 11%, transparent); }
.ai__head img { width: auto; height: 40px; }
.ai__head > div { flex: 1; min-width: 0; }
.ai__title { font: 500 19px/1.1 var(--font-display); }
.ai__sub { font-size: 13px; color: var(--p-muted); }
.ai__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.ai__close svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .ai__close:hover { background: var(--p-surface); } }

.ai__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.ai__msg { max-width: 86%; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ai__msg--model { align-self: flex-start; background: var(--p-surface); }
.ai__msg--user { align-self: flex-end; background: var(--p-ink); color: var(--p-bg); }
.ai__msg--error { align-self: flex-start; background: color-mix(in oklab, var(--p-accent) 10%, var(--p-bg)); }
.ai__dots { display: inline-flex; gap: 4px; padding: 6px 2px; }
.ai__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-muted); animation: ai-dot 1s linear infinite; }
.ai__dots i:nth-child(2) { animation-delay: 160ms; }
.ai__dots i:nth-child(3) { animation-delay: 320ms; }
@keyframes ai-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.ai__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); }
.ai__chips[hidden] { display: none; }
.ai__form { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid color-mix(in oklab, var(--p-ink) 11%, transparent); }
.ai__form input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--s-3); border: 1px solid color-mix(in oklab, var(--p-ink) 20%, transparent); border-radius: var(--r-btn); background: #fff; color: var(--p-ink); font: 16px var(--font-text); }
.ai__form .btn { height: 44px; }
.ai__note { padding: 0 var(--s-4) var(--s-3); font-size: 12px; line-height: 1.4; color: var(--p-muted); }

@media (prefers-reduced-motion: reduce) {
  .ai__launch, .ai__panel { transition: opacity 120ms linear, visibility 0s 120ms; transform: none !important; }
  .ai[data-open] .ai__panel { transition: opacity 120ms linear; }
  .ai__dots i { animation: none; opacity: 0.6; }
}

/* ── Reserva en la página ─────────────────────────────────────
   Días y horas son botones que se tocan seguido: sin animación, solo el press (scale 0.97). */
.bk__form { display: grid; gap: var(--s-5); }
.bk__step { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-3); min-width: 0; }
.bk__step legend { padding: 0; margin-bottom: var(--s-3); font: 500 15px/1.2 var(--font-text); color: var(--muted); }
.bk select, .bk input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: #fff; color: var(--ink); font: 16px var(--font-text); }
.bk__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.bk .field { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
@media (max-width: 639px) { .bk__row { grid-template-columns: 1fr; } }

.bk__days { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: thin; }
.bk__day { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; width: 68px; padding: 10px 4px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); color: var(--ink); font: 13px/1.2 var(--font-text); text-transform: capitalize; cursor: pointer; }
.bk__day strong { font: 500 22px/1.1 var(--font-display); }
.bk__day span { color: var(--muted); }
.bk__day[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.bk__day[aria-checked="true"] span { color: inherit; opacity: 0.8; }
.bk__day:disabled { opacity: 0.45; cursor: not-allowed; }
.bk__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-2); min-height: 48px; }
.bk__slots > p { grid-column: 1 / -1; }
.bk__slot { height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--bg); color: var(--ink); font: 500 15px var(--font-text); font-variant-numeric: tabular-nums; cursor: pointer; }
.bk__slot[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bk__slot.sk { display: block; border: 0; background: var(--surface); animation: bk-pulse 1.2s ease-in-out infinite; }
@keyframes bk-pulse { 50% { opacity: 0.5; } }
.bk__day:not(:disabled):active, .bk__slot:not(.sk):active { transform: scale(0.97); transition: transform 120ms var(--ease-ui); }
@media (hover: hover) and (pointer: fine) {
  .bk__day:not(:disabled):not([aria-checked="true"]):hover, .bk__slot:not(.sk):not([aria-checked="true"]):hover { border-color: var(--ink); }
}

.bk__cart { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); }
.bk__cart-title { font-weight: 500; margin-bottom: var(--s-2); }
.bk__cart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bk__cart li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); align-items: baseline; font-size: 15px; }
.bk__cart .link { border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.bk__confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.bk__summary { flex: 1 1 240px; }
.bk__summary::first-letter { text-transform: uppercase; }
.bk__error { color: var(--accent); min-height: 1.2em; }
.bk__error:empty { display: none; }
.bk__done { display: grid; gap: var(--s-4); outline: none; }
.bk__done h3 { font: var(--display-weight, 400) clamp(28px, 3vw, 38px)/1.1 var(--font-display); }
.bk__done:not([hidden]) { animation: bk-done 220ms var(--ease-ui); }
@keyframes bk-done { from { opacity: 0; transform: scale(0.97); } }
@media (prefers-reduced-motion: reduce) {
  .bk__slot.sk { animation: none; }
  .bk__done:not([hidden]) { animation: none; }
  .bk__day:active, .bk__slot:active { transform: none; }
}

/* ── Carrito: botón fijo abajo a la izquierda (el asistente va a la derecha) ── */
.product__few { color: var(--accent); font-size: 14px; font-weight: 500; }
.cart[hidden] { display: none; }
.cart__launch {
  position: fixed; left: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: var(--s-2); height: 48px; padding: 0 var(--s-3) 0 var(--s-4);
  border: 0; border-radius: 999px; background: var(--p-accent); color: var(--p-accent-ink); font: 500 15px/1 var(--font-text);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); cursor: pointer; transition: transform 200ms var(--ease-ui), opacity 200ms var(--ease-ui);
}
.cart__launch svg { width: 20px; height: 20px; }
.cart__launch:active { transform: scale(0.97); transition-duration: 120ms; }
.cart__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--p-accent-ink); color: var(--p-accent); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart[data-open] .cart__launch { opacity: 0; transform: scale(0.95); pointer-events: none; }
@media (max-width: 639px) {
  :root:has(> body > nav.actionbar:is([data-bar="shown"], [data-bar="always"])) .cart__launch { transform: translateY(calc(-1 * var(--bar))); }
}
.cart__panel {
  position: fixed; left: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; width: min(360px, calc(100vw - 2 * var(--s-4))); max-height: min(560px, calc(100svh - var(--nav) - 2 * var(--s-4)));
  background: var(--p-bg); color: var(--p-ink); border: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.22); overflow: hidden;
  transform-origin: bottom left; opacity: 0; transform: scale(0.95); visibility: hidden;
  transition: transform 200ms var(--ease-ui), opacity 200ms var(--ease-ui), visibility 0s 200ms;
}
.cart[data-open] .cart__panel { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 11%, transparent); }
.cart__title { font: 500 20px/1.1 var(--font-display); }
.cart__list { list-style: none; margin: 0; padding: var(--s-2) var(--s-4); overflow-y: auto; }
.cart__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 8%, transparent); font-size: 15px; }
.cart__qty { display: inline-flex; align-items: center; gap: var(--s-2); font-variant-numeric: tabular-nums; }
.cart__qty button { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: inherit; font-size: 18px; cursor: pointer; }
.cart__qty button:active { transform: scale(0.95); }
.cart__qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.cart__foot { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid color-mix(in oklab, var(--p-ink) 11%, transparent); }
.cart__total { display: flex; justify-content: space-between; font-size: 17px; }
.cart__foot .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .cart__launch, .cart__panel { transition: opacity 120ms linear, visibility 0s 120ms; transform: none !important; }
  .cart[data-open] .cart__panel { transition: opacity 120ms linear; }
}
.bk__cal { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
