/* Interactive menu page. */

.menu-intro { padding-block: calc(var(--header-h) * 0.5) 1.75rem; }
.menu-intro__titulo { font-size: clamp(2.4rem, 4vw + 1rem, 4.25rem); margin: 1.5rem 0 0.75rem; }
.menu-intro__texto { font-size: var(--t-lead); max-width: 38rem; margin-bottom: 0.75rem; color: var(--c-ink-2); }
.menu-intro__servicio { display: flex; gap: 0.5rem; align-items: center; font-size: var(--t-small); font-weight: 500; margin-bottom: 1rem; }
.menu-intro__servicio .ti { color: var(--c-terra); font-size: 1.25rem; }

/* controls: search, filters, category bar. Sticky under the header. */
.menu-controles {
  position: sticky;
  top: var(--header-h);
  z-index: 1010;
  background: rgb(246 238 223 / 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line-soft);
}
@media (prefers-reduced-transparency: reduce) { .menu-controles { background: var(--c-cream); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.menu-controles__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding-block: 0.75rem 0.5rem; }
.buscador { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.buscador__campo {
  width: 100%; min-height: 2.9rem; padding: 0.5rem 2.6rem;
  background: var(--c-paper); border: 1.5px solid rgb(42 31 24 / 0.55); border-radius: var(--r-pill);
  font: 400 1rem/1.3 var(--font-body); color: var(--c-ink);
}
.buscador__campo::placeholder { color: var(--c-ink-2); opacity: 1; }
.buscador__campo:focus { outline: none; border-color: var(--c-agave); box-shadow: 0 0 0 4px rgb(31 77 58 / 0.22); }
.buscador__campo::-webkit-search-cancel-button { display: none; }
.buscador__icono { position: absolute; left: 0.95rem; top: 50%; translate: 0 -50%; font-size: 1.2rem; color: var(--c-ink-2); pointer-events: none; }
.buscador__limpiar {
  position: absolute; right: 0.4rem; top: 50%; translate: 0 -50%; width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink); font-size: 1.15rem; cursor: pointer;
}
.buscador__limpiar[hidden] { display: none; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.categorias-barra { overflow-x: auto; scrollbar-width: none; }
.categorias-barra::-webkit-scrollbar { display: none; }
.categorias-barra__lista { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0 0 0.6rem; width: max-content; }
.categorias-barra a {
  display: block; padding: 0.4rem 0.9rem; border-radius: var(--r-pill); white-space: nowrap;
  color: var(--c-ink); font-weight: 500; font-size: 0.95rem; text-decoration: none;
  transition: background-color var(--d-ui) ease, color var(--d-ui) ease;
}
.categorias-barra a[aria-current="true"] { background: var(--c-agave); color: var(--c-cream); font-weight: 700; }
.categorias-barra a[hidden], .categorias-barra li[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .categorias-barra a:not([aria-current="true"]):hover { background: var(--c-sand); } }

/* categories: anchors clear the sticky controls through --menu-offset, so the global scroll padding is cleared here */
html { scroll-padding-top: 0; }
.menu { padding-block: 1.5rem 7rem; }
.categoria { padding-top: 2.25rem; scroll-margin-top: var(--menu-offset, 11.5rem); }
.categoria[hidden] { display: none; }
.categoria__cabecera { margin-bottom: 1.25rem; }
.categoria__titulo { font-size: clamp(1.9rem, 2.2vw + 1.1rem, 3rem); margin: 0 0 0.35rem; }
.categoria__nota { margin: 0; color: var(--c-ink-2); max-width: 44rem; }

/* a category with one or two photos keeps them beside its list instead of leaving a gap */
.categoria__cuerpo--lado { display: grid; gap: 1.25rem 3rem; align-items: start; }
@media (min-width: 992px) { .categoria__cuerpo--lado { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); } }
.categoria__cuerpo--lado .platos-fotos { grid-template-columns: 1fr; margin-bottom: 0; }
@media (min-width: 576px) { .categoria__cuerpo--lado .platos-fotos { grid-template-columns: 1fr; } }
.categoria__cuerpo--lado .platos-lista { grid-template-columns: 1fr; }

/* dishes with a photo */
.platos-fotos { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-bottom: 1.25rem; }
@media (min-width: 576px) { .platos-fotos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .platos-fotos { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }

.plato { position: relative; scroll-margin-top: calc(var(--menu-offset, 11.5rem) + 1rem); }
.plato[hidden] { display: none; }
.plato__abrir {
  display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.plato__nombre { font-weight: 700; font-size: 1.1rem; line-height: 1.25; display: block; }
.plato__desc { display: block; color: var(--c-ink-2); font-size: var(--t-small); line-height: 1.45; margin-top: 0.3rem; }
.plato__precio { font-weight: 700; color: var(--c-terra-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plato__marcas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.plato__marcas:empty { display: none; }
.marca { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.6rem 0.1rem 0.45rem; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; line-height: 1.5; }
.marca .ti { font-size: 0.95rem; }
.marca--verde { background: #DCEBDD; color: #174B2D; }
.marca--rojo { background: #F6D9D0; color: #7A2412; }
.marca--oro { background: #FBE6B8; color: #4A3210; }

.plato--foto { background: var(--c-paper); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out); }
.plato--foto .plato__abrir { flex: 1; }
.plato__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-clay); }
.plato__foto picture, .plato__foto img { display: block; width: 100%; height: 100%; }
.plato__foto img { object-fit: cover; transition: transform 0.5s var(--ease-out); }
.plato--foto .plato__cuerpo { display: block; padding: 1rem 1.1rem 0.4rem; }
.plato--foto .plato__pie { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 1.1rem 1rem; }
.plato--foto .plato__precio { font-size: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
  .plato--foto:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
  .plato--foto:hover .plato__foto img { transform: scale(1.04); }
}
.plato--resaltado { animation: resaltar 2.2s ease-out 1; }
@keyframes resaltar { 0%, 35% { box-shadow: 0 0 0 4px var(--c-gold), var(--shadow-2); } 100% { box-shadow: var(--shadow-1); } }

/* dishes without a photo: a printed-menu ledger */
.platos-lista { display: grid; gap: 0 3rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .platos-lista { grid-template-columns: 1fr 1fr; } }
.plato--texto { padding: 0.85rem 0; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: start; border-bottom: 1px dotted rgb(42 31 24 / 0.3); }
.plato--texto .plato__abrir { grid-column: 1; }
.plato--texto .plato__cuerpo { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.5rem; align-items: baseline; }
.plato--texto .plato__nombre { grid-column: 1; }
.plato--texto .plato__guia { grid-column: 2; border-bottom: 1px dotted rgb(42 31 24 / 0.35); transform: translateY(-0.28em); min-width: 1rem; }
.plato--texto .plato__precio { grid-column: 3; }
.plato--texto .plato__desc, .plato--texto .plato__marcas { grid-column: 1 / -1; }
.plato--texto .plato__pie { grid-column: 2; grid-row: 1; align-self: center; }
@media (hover: hover) and (pointer: fine) { .plato--texto .plato__abrir:hover .plato__nombre { color: var(--c-terra-dark); } }

/* add / stepper */
.cantidad { display: inline-flex; }
.cantidad__agregar {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; padding: 0.3rem 0.95rem 0.3rem 0.75rem;
  border: 1.5px solid var(--c-agave); border-radius: var(--r-pill); background: transparent; color: var(--c-agave);
  font: 700 0.9rem/1 var(--font-body); cursor: pointer;
  transition: background-color var(--d-ui) ease, color var(--d-ui) ease, transform var(--d-press) var(--ease-out);
}
.cantidad__agregar .ti { font-size: 1.15rem; }
.cantidad__agregar:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .cantidad__agregar:hover { background: var(--c-agave); color: var(--c-cream); } }
.cantidad__paso { display: inline-flex; align-items: center; background: var(--c-agave); color: var(--c-cream); border-radius: var(--r-pill); }
.cantidad__paso[hidden] { display: none; }
.cantidad__paso button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; background: transparent; color: inherit; border-radius: var(--r-pill); font-size: 1.15rem; cursor: pointer; transition: transform var(--d-press) var(--ease-out); }
.cantidad__paso button:active { transform: scale(0.88); }
.cantidad__paso output { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cantidad--hecho .cantidad__paso { animation: rebote 0.28s var(--ease-out); }
@keyframes rebote { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.plato--texto .cantidad__agregar span { display: none; }
.plato--texto .cantidad__agregar { padding: 0.3rem; width: 2.5rem; justify-content: center; }
@media (min-width: 576px) { .plato--texto .cantidad__agregar span { display: inline; } .plato--texto .cantidad__agregar { width: auto; padding: 0.3rem 0.95rem 0.3rem 0.75rem; } }

/* empty state */
.menu-vacio { text-align: center; padding: 4rem 1rem; }
.menu-vacio[hidden] { display: none; }
.menu-vacio > .ti { font-size: 3rem; color: var(--c-terra); }
.menu-vacio h2 { font-size: 1.75rem; margin: 0.5rem 0; }

/* dish modal */
.modal-plato .modal-content { overflow: hidden; }
.modal-plato__cerrar {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: rgb(251 247 238 / 0.94); color: var(--c-ink); font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-1);
}
.modal-plato__foto { aspect-ratio: 4 / 3; background: var(--c-clay); }
.modal-plato__foto[hidden] { display: none; }
.modal-plato__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-plato__cuerpo { padding: 1.5rem 1.5rem 1.75rem; }
.modal-plato__categoria { margin: 0 0 0.35rem; color: var(--c-ink-2); font-size: var(--t-small); font-weight: 500; }
.modal-plato__nombre { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); margin: 0 0 0.35rem; }
.modal-plato__precio { font-size: 1.5rem; font-weight: 700; color: var(--c-terra-dark); margin: 0 0 0.75rem; }
.modal-plato__desc { margin: 0 0 0.5rem; }
.modal-plato__desc:empty { display: none; }
.modal-plato__nota { font-size: var(--t-small); color: var(--c-ink-2); margin: 1rem 0; }
.modal-plato__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 575px) { .modal-plato__acciones .btn-mn { flex: 1 1 100%; } }

/* order: floating bar and panel */
.pedido-barra {
  position: fixed; z-index: var(--z-bar);
  left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(calc(100% - 6.5rem - env(safe-area-inset-left)), 24rem);
  display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1.1rem 0.55rem 0.7rem;
  background: var(--c-terra); color: var(--c-cream); border: 0; border-radius: var(--r-pill); box-shadow: var(--shadow-2);
  font: 700 1rem/1.1 var(--font-body); cursor: pointer; text-align: left;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-ui) ease;
}
.pedido-barra[hidden] { display: none; }
.pedido-barra:active { transform: scale(0.97); }
.pedido-barra.is-entra { animation: barra-entra 0.34s var(--ease-out); }
@keyframes barra-entra { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.pedido-barra__icono { position: relative; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: var(--c-cream); color: var(--c-terra-dark); border-radius: var(--r-pill); font-size: 1.4rem; flex: none; }
.pedido-barra__cuenta { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--c-agave); color: var(--c-cream); font-size: 0.75rem; }
.pedido-barra__texto { flex: 1; }
.pedido-barra__total { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .pedido-barra:hover { background: var(--c-terra-dark); } }

.panel-pedido { --bs-offcanvas-width: min(26rem, 100vw); --bs-offcanvas-bg: var(--c-paper); }
.panel-pedido__titulo { font-size: 1.75rem; margin: 0; }
.panel-pedido__vacio { color: var(--c-ink-2); }
.panel-pedido__vacio[hidden], .pedido-form[hidden], .pedido-total[hidden], .panel-pedido__nota[hidden] { display: none; }
.pedido-lista { list-style: none; margin: 0; padding: 0; }
.pedido-item { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--c-line-soft); }
.pedido-item__nombre { font-weight: 700; line-height: 1.25; }
.pedido-item__precio { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-terra-dark); white-space: nowrap; }
.pedido-item__acciones { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.pedido-item .cantidad__paso { background: var(--c-sand); color: var(--c-ink); }
.pedido-item__quitar { background: none; border: 0; padding: 0.25rem 0; font: 500 0.875rem var(--font-body); color: var(--c-terra-dark); text-decoration: underline; cursor: pointer; }
.pedido-total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0 0.25rem; font-size: 1.15rem; }
.pedido-total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--c-terra-dark); }
.panel-pedido__nota { font-size: var(--t-small); color: var(--c-ink-2); margin: 0 0 1.25rem; }
.pedido-form { padding-top: 1rem; border-top: 1px solid var(--c-line); }
.panel-pedido__confirma { display: flex; gap: 0.45rem; margin: 0.9rem 0; font-size: var(--t-small); color: var(--c-ink-2); }
.pedido-form .enlace-boton { display: block; margin: 0.5rem auto 0; font-weight: 500; font-size: var(--t-small); }