/* =====================================================================
   MENÚ DIGITAL Y RESERVAS (páginas públicas, compartido)
   Igual que base.css: todo usa las variables del tema.
   ===================================================================== */

/* =====================================================================
   MENÚ
   ===================================================================== */
.carta { padding-bottom: 40px; }
.carta__cabeza { padding: clamp(28px, 5vw, 56px) var(--margen) 18px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; }
.carta__cabeza h1 { font-size: clamp(64px, 10vw, 132px); }
.carta__cabeza p { color: var(--texto-2); max-width: 40ch; }

/* Promos de hoy: tira que se desliza de costado */
.promos-hoy { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--margen) 22px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; scrollbar-width: none; }
.promos-hoy::-webkit-scrollbar { display: none; }
.promos-hoy .chapa { flex: 0 0 min(360px, 84vw); scroll-snap-align: start; box-shadow: none; }

/* Barra de categorías: queda pegada arriba al bajar */
.categorias { position: sticky; top: var(--alto-cabecera, 69px); z-index: 20; background: var(--cabecera-fondo, var(--fondo)); border-bottom: 1px solid var(--linea); }
.categorias__riel { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.categorias__riel::-webkit-scrollbar { display: none; }
.categorias button {
  position: relative; z-index: 1; flex: none; min-height: 56px; padding: 0 16px;
  font: var(--t-peso) 19px/1 var(--f-titulo); text-transform: var(--t-mayus); letter-spacing: .03em;
  color: var(--texto-2); transition: color .3s;
}
.categorias button:hover { color: var(--titulo); }
.categorias button[aria-current="true"] { color: var(--titulo); }
.categorias button:disabled { opacity: .3; cursor: default; }
/* La brasa: el indicador que se desliza de una categoría a otra */
.categorias__brasa {
  position: absolute; left: 0; bottom: 0; height: 4px; width: 100px; transform-origin: 0 0;
  background: linear-gradient(90deg, var(--acento), var(--brasa-clara, var(--acento-2)), var(--acento));
  background-size: 200% 100%; animation: fuego 2.4s linear infinite;
  transition: transform .5s var(--ease);
}

/* Buscador y filtros */
.herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px var(--margen) 6px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.buscador { position: relative; flex: 1 1 240px; max-width: 360px; }
.buscador .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-3); width: 20px; height: 20px; }
.buscador input { padding-left: 44px; min-height: 46px; border-radius: var(--radio-chip); }
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.filtros::-webkit-scrollbar { display: none; }

/* Secciones del menú */
.bloque { padding: 34px var(--margen) 10px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; scroll-margin-top: calc(var(--alto-cabecera, 69px) + 60px); }
.bloque__titulo { font-size: clamp(40px, 5.6vw, 64px); margin-bottom: 18px; display: flex; align-items: baseline; gap: 14px; }
.bloque__titulo small { font: 500 15px/1 var(--f-texto); color: var(--texto-3); text-transform: none; letter-spacing: 0; }
.platos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 760px) { .platos { grid-template-columns: 1fr; gap: 10px; } }

/* Tarjeta de plato */
.plato {
  position: relative; display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: stretch;
  width: 100%; text-align: left; padding: 12px; border-radius: var(--radio);
  background: var(--fondo-2); border: 1px solid var(--linea);
  transition: background-color .3s, border-color .3s, transform .35s var(--ease-rebote);
}
.plato:hover { background: var(--fondo-3); border-color: var(--linea-2); }
.plato:active { transform: scale(.985); }
.plato__foto { display: block; width: 100%; align-self: start; border-radius: calc(var(--radio) - 4px); overflow: hidden; aspect-ratio: 1; background: var(--fondo-3); }
.plato__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.plato:hover .plato__foto img { transform: scale(1.07); }
.plato__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 2px 4px 2px 0; }
.plato__nombre { font-size: 26px; }
.plato__detalle { color: var(--texto-2); font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plato__pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.plato__precio { font: var(--t-peso) 26px/1 var(--f-titulo); color: var(--acento); white-space: nowrap; }
.plato__porcion { color: var(--texto-3); font-size: 13px; }
.marcas { display: flex; gap: 6px; flex-wrap: wrap; }
.marca-plato { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 99px; border: 1px solid var(--linea-2); color: var(--texto-2); white-space: nowrap; }
.marca-plato--casa { border-color: transparent; background: var(--acento-suave); color: var(--acento-2); }
/* Destacado: ocupa las dos columnas, foto grande */
.plato--grande { grid-column: 1 / -1; grid-template-columns: minmax(200px, 42%) 1fr; padding: 14px; }
.plato--grande .plato__foto { aspect-ratio: 16 / 10; }
.plato--grande .plato__nombre { font-size: clamp(32px, 4vw, 46px); }
.plato--grande .plato__detalle { -webkit-line-clamp: 3; font-size: 16px; }
.plato--grande .plato__precio { font-size: 34px; }
.plato--grande .plato__txt { padding: 10px 10px 6px 4px; }
@media (max-width: 760px) {
  .plato { grid-template-columns: 96px 1fr; gap: 12px; padding: 10px; }
  .plato__nombre { font-size: 22px; }
  .plato__precio { font-size: 23px; }
  .plato--grande { grid-template-columns: 1fr; }
  .plato--grande .plato__txt { padding: 4px 4px 4px; }
}
/* Agotado */
.plato--agotado { opacity: .55; }
.plato--agotado .plato__foto img { filter: grayscale(1); }
.plato__agotado { position: absolute; top: 18px; left: 18px; background: var(--titulo); color: var(--fondo); font: 700 12px/1 var(--f-texto); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-radius: 6px; }

/* Aparición escalonada: los platos "salen de la parrilla" */
.espera { opacity: 0; transform: translateY(26px); }
.entra { animation: sale-plato .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sale-plato { from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(4px); } }

.sin-resultados { text-align: center; padding: 60px var(--margen); color: var(--texto-2); }
.sin-resultados strong { display: block; font-size: 34px; margin-bottom: 8px; }

/* Ficha del plato (hoja) */
.hoja--plato .hoja__cuerpo { padding: 0; gap: 0; }
.hoja__foto { aspect-ratio: 4 / 3; background: var(--fondo-3); overflow: hidden; flex: none; }
.hoja__foto img { width: 100%; height: 100%; object-fit: cover; }
.hoja__info { padding: 22px; display: grid; gap: 12px; }
.hoja__info h2 { font-size: clamp(38px, 8vw, 52px); }
.hoja__info .plato__precio { font-size: 36px; }
.hoja__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Punto de cocción */
.coccion { display: grid; gap: 10px; padding: 16px; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--linea); }
.coccion strong { font-size: 15px; color: var(--titulo); }
.coccion__barra { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.coccion__barra button { min-height: 46px; border-radius: 8px; background: var(--c); opacity: .45; transition: opacity .2s, transform .3s var(--ease-rebote); position: relative; }
.coccion__barra button[aria-pressed="true"] { opacity: 1; transform: scaleY(1.12); box-shadow: 0 0 0 2px var(--titulo); }
.coccion__txt { font-size: 14px; color: var(--texto-2); min-height: 1.5em; }

/* =====================================================================
   RESERVAS
   ===================================================================== */
.reserva { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(20px, 3vw, 44px); align-items: start; padding: clamp(24px, 4vw, 48px) var(--margen) 60px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.reserva h1 { font-size: clamp(54px, 8vw, 104px); }
.reserva__intro { color: var(--texto-2); margin: 10px 0 26px; font-size: 17px; max-width: 48ch; }
.reserva > * { min-width: 0; }
@media (max-width: 980px) { .reserva { grid-template-columns: 1fr; padding-bottom: 130px; } }

.paso { border-top: 1px solid var(--linea); padding: 26px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.paso__cabeza { display: flex; align-items: center; gap: 14px; }
.paso__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--linea-2); font: var(--t-peso) 20px/1 var(--f-titulo); color: var(--texto-2); transition: background-color .3s, border-color .3s, color .3s; }
.paso--listo .paso__num { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.paso__cabeza h2 { font-size: clamp(28px, 3.6vw, 38px); }
.paso--bloqueado { opacity: .4; pointer-events: none; }
.etiqueta-campo { font-weight: 600; color: var(--titulo); font-size: 15px; margin-bottom: 8px; display: block; }

/* Días */
.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dia { flex: 0 0 auto; width: 70px; min-height: 84px; border-radius: var(--radio); border: 1.5px solid var(--linea-2); display: grid; place-content: center; gap: 4px; text-align: center; scroll-snap-align: start; transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease-rebote); }
.dia small { font-size: 13px; color: var(--texto-2); text-transform: capitalize; }
.dia b { font: var(--t-peso) 30px/1 var(--f-titulo); color: var(--titulo); }
.dia:hover { border-color: var(--texto-2); }
.dia:active { transform: scale(.94); }
.dia[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); }
.dia[aria-pressed="true"] small, .dia[aria-pressed="true"] b { color: var(--sobre-acento); }

.segmento { display: inline-flex; padding: 4px; border-radius: var(--radio-chip); background: var(--fondo-2); border: 1px solid var(--linea); }
.segmento button { min-height: 44px; padding: 0 20px; border-radius: var(--radio-chip); font-weight: 600; color: var(--texto-2); transition: background-color .25s, color .25s; }
.segmento button[aria-pressed="true"] { background: var(--titulo); color: var(--fondo); }

.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hora { min-height: 48px; border-radius: 10px; border: 1.5px solid var(--linea-2); font-weight: 700; color: var(--titulo); font-variant-numeric: tabular-nums; transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease-rebote); }
.hora:hover:not(:disabled) { border-color: var(--texto-2); }
.hora:active:not(:disabled) { transform: scale(.94); }
.hora[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.hora:disabled { color: var(--texto-3); border-style: dashed; text-decoration: line-through; cursor: not-allowed; }

.contador { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--linea-2); border-radius: var(--radio-chip); padding: 4px; }
.contador button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo-3); color: var(--titulo); transition: transform .25s var(--ease-rebote), opacity .2s; }
.contador button:active { transform: scale(.88); }
.contador button:disabled { opacity: .35; }
.contador output { min-width: 110px; text-align: center; font-weight: 700; color: var(--titulo); font-size: 17px; }
.nota-grupo { font-size: 14px; color: var(--texto-2); }
.nota-grupo a { color: var(--titulo); }

/* Plano */
.plano { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
.plano__dibujo { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px; max-width: 520px; width: 100%; }
.plano__lado { display: grid; gap: 14px; position: sticky; top: calc(var(--alto-cabecera, 69px) + 16px); }
.mesa-info { border-radius: var(--radio); background: var(--fondo-2); border: 1px solid var(--linea); padding: 16px; display: grid; gap: 6px; min-height: 108px; }
.mesa-info strong { font-size: 30px; }
.mesa-info p { color: var(--texto-2); font-size: 14px; }
.mesa-info--elegida { border-color: var(--acento); animation: mesa-info .5s var(--ease-rebote); }
@keyframes mesa-info { from { transform: scale(.96); } }
.libres { display: flex; flex-wrap: wrap; gap: 6px; }
.libres .ficha { min-height: 38px; padding: 0 12px; font-size: 14px; }
@media (max-width: 760px) { .plano { grid-template-columns: 1fr; } .plano__lado { position: static; } }

.ocasiones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ticket de la reserva (resumen a la derecha) */
.ticket {
  position: sticky; top: calc(var(--alto-cabecera, 69px) + 20px);
  background: var(--ticket-fondo, var(--titulo)); color: var(--ticket-texto, var(--sobre-acento));
  border-radius: var(--radio); padding: 22px 22px 18px; display: grid; gap: 14px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
  /* borde dentado abajo, como ticket de comanda */
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 50% 0 / 20px 100% repeat-x;
          mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 50% 0 / 20px 100% repeat-x;
  padding-bottom: 30px;
}
.ticket h2 { font-size: 30px; color: inherit; }
.ticket dl { display: grid; gap: 0; }
.ticket dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1.5px dashed color-mix(in srgb, currentColor 25%, transparent); font-size: 15px; }
.ticket dt { opacity: .7; }
.ticket dd { font-weight: 700; text-align: right; }
.ticket dd.falta { opacity: .45; font-weight: 500; }
.ticket .btn { background: var(--acento); color: var(--sobre-acento); }
.ticket .btn:hover { background: var(--acento-2); }
.ticket__nota { font-size: 13px; opacity: .75; }
@media (max-width: 980px) {
  .ticket { display: none; }
  .barra-reserva { display: flex; }
}
/* Barra fija abajo en el celular */
.barra-reserva {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--fondo-2); border-top: 1px solid var(--linea);
  box-shadow: 0 -12px 30px -10px rgba(0, 0, 0, .5);
}
.barra-reserva p { flex: 1; font-size: 14px; color: var(--texto-2); line-height: 1.3; min-width: 0; }
.barra-reserva p b { color: var(--titulo); display: block; font-size: 15px; }
body[data-pagina="reservas"] .flotante { display: none; }

/* Confirmación */
.listo { max-width: 620px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) var(--margen) 80px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.listo__icono { width: 84px; height: 84px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; animation: sello .7s var(--ease-rebote) both; }
.listo__icono .ico { width: 44px; height: 44px; stroke-width: 2.6; }
@keyframes sello { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }
.listo h1 { font-size: clamp(48px, 8vw, 84px); }
.listo .ticket { position: static; width: 100%; text-align: left; display: grid; }
.listo__acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }