/* Menú digital: la hoja de papel del menú y la comanda que se manda por WhatsApp.
   Todos los colores salen de data/*.json (js/app.js los pone en estas variables); aquí solo están los de la demo. */

@font-face {
  font-family: "Imbue";
  src: url("fonts/imbue-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fondo: #9c2118;
  --fondo-tinta: #ffffff;
  --papel: #f9f9f9;
  --papel-tono: #efedea;
  --tinta: #1d1714;
  --tinta-suave: #5c4f48;
  --acento: #9c2118;
  --acento-tinta: #ffffff;
  --abierto: #1f6a37;

  --display: "Imbue", "Times New Roman", serif;
  --texto: "Albert Sans", system-ui, sans-serif;
  --paso-chico: 0.875rem;   /* 14 */
  --paso-texto: 1.0625rem;  /* 17 */
  --paso-lead: 1.25rem;     /* 20 */
  --paso-cabeza: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  --paso-nombre: clamp(4.5rem, 21vw, 8.5rem);
  --margen: 10px;
  --redondo: 999px;
  --festón: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Ccircle cx='14' cy='14' r='14'/%3E%3C/svg%3E");
  --sale: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 var(--paso-texto) / 1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}
.oculto {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: solo para lectores de pantalla */
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.saltar {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 20;
  padding: 12px 18px;
  background: var(--papel);
  border-radius: var(--redondo);
}
.saltar:focus {
  top: 12px;
}

/* ---------- El campo: la foto del negocio arriba y el color de fondo ---------- */

.telon {
  position: relative;
  z-index: 1;
  background: var(--fondo);
  padding-bottom: 64px;
}
.campo {
  position: absolute;
  inset: 0 0 auto;
  height: 300px;
  overflow: hidden;
}
.campo-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: deriva 24s ease-in-out infinite alternate;
}
.barra {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--margen) 0 calc(var(--margen) + 6px);
}
.sello {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--papel);
  color: var(--acento);
  font: 400 1.75rem/1 var(--display);
  overflow: hidden;
}
.sello img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.boton-pedido {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--redondo);
  background: var(--tinta);
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: transform 160ms var(--sale);
}
.boton-pedido:active {
  transform: scale(0.96);
}
.boton-pedido.latido {
  animation: latido 420ms var(--sale);
}

/* ---------- La hoja del menú ---------- */

.mesa {
  position: relative;
  z-index: 1;
  padding: 0 var(--margen);
}
.hoja,
.comanda,
.reverso-papel {
  position: relative;
  background: var(--papel);
}
/* Borde festoneado: una fila de medios círculos en color papel arriba de la hoja. */
.hoja::before,
.comanda::before,
.reverso-papel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  height: 14px;
  background: var(--papel);
  -webkit-mask: var(--festón) repeat-x left bottom / 28px 14px;
  mask: var(--festón) repeat-x left bottom / 28px 14px;
}
.hoja {
  margin-top: 64px;
  padding: 36px 20px 40px;
}
.portada {
  text-align: center;
  padding-bottom: 28px;
}
.nombre {
  margin: 0 auto;
  padding-top: 0.12em;
  font: 400 var(--paso-nombre) / 0.9 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--tinta);
}
.lema {
  margin: 18px 0 0;
  font-size: var(--paso-lead);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.que-es {
  max-width: 30em;
  margin: 10px auto 0;
  text-wrap: pretty;
}
.datos {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  font-size: var(--paso-chico);
  font-weight: 500;
  line-height: 1.45;
}
.datos li + li::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 10px auto;
  background: var(--acento);
  transform: rotate(45deg);
}
.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--redondo);
  background: var(--papel-tono);
  font-size: var(--paso-texto);
  font-weight: 600;
}
.estado::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tinta-suave);
}
.estado[data-abierto="true"]::before {
  background: var(--abierto);
  animation: pulso 2.4s ease-in-out infinite;
}

/* Las secciones, siempre a la mano arriba de la hoja. */
.cats ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cats a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--redondo);
  background: var(--papel-tono);
  font-size: var(--paso-chico);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms, color 160ms, transform 160ms var(--sale);
}
.cats a:hover {
  background: var(--tinta);
  color: var(--papel);
}
.cats a:active {
  transform: scale(0.96);
}

.menu:focus {
  outline: none;
}
.grupo {
  padding-top: 52px;
}
.grupo-nombre {
  margin: 0;
  text-align: center;
  font: 400 var(--paso-cabeza) / 1 var(--display);
  text-transform: uppercase;
  padding-top: 0.1em;
}
.grupo-nota {
  margin: 8px auto 0;
  max-width: 28em;
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--paso-chico);
}
.platillos {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.platillo-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "texto precio" "texto mas";
  column-gap: 14px;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 14px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  transition: background-color 200ms, transform 160ms var(--sale);
}
.platillo-fila.con-foto {
  grid-template-columns: 84px minmax(0, 1fr) auto;
  grid-template-areas: "foto texto precio" "foto texto mas";
}
.platillo-fila:hover {
  background: var(--papel-tono);
}
.platillo-fila:active {
  transform: scale(0.985);
}
.platillo-fila.recien {
  animation: recien 900ms ease-out;
}
.platillo-fila img {
  grid-area: foto;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
}
.platillo-texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.platillo-nombre {
  font-size: var(--paso-texto);
  font-weight: 600;
  line-height: 1.3;
}
.platillo-desc {
  color: var(--tinta-suave);
  font-size: var(--paso-chico);
  line-height: 1.45;
}
.en-pedido {
  color: var(--acento);
  font-size: var(--paso-chico);
  font-weight: 700;
}
.en-pedido:empty {
  display: none;
}
.platillo-precio {
  grid-area: precio;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.platillo-precio small {
  font-size: var(--paso-chico);
  font-weight: 500;
  color: var(--tinta-suave);
}
.mas {
  grid-area: mas;
  justify-self: end;
  align-self: end;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-tinta);
  transition: transform 200ms var(--sale);
}
.platillo-fila:hover .mas {
  transform: rotate(90deg);
}
.aviso {
  margin: 44px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--papel-tono);
  text-align: center;
  font-size: var(--paso-chico);
  font-weight: 500;
}
.aviso-menu {
  margin: 20px 0 0;
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--paso-chico);
}
.aviso-menu:empty {
  display: none;
}
.revision {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--papel-tono);
  font-size: var(--paso-chico);
}
.revision p {
  margin: 0;
}
.revision ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.platillo-fila.agotado {
  cursor: default;
}
.platillo-fila.agotado:hover {
  background: transparent;
}
.platillo-fila.agotado:active {
  transform: none;
}
.platillo-fila.agotado img {
  filter: grayscale(1);
  opacity: 0.6;
}
.platillo-fila.agotado .platillo-nombre,
.platillo-fila.agotado .platillo-precio {
  color: var(--tinta-suave);
}
.platillo-fila.agotado .platillo-precio {
  text-decoration: line-through;
}
.sello-agotado {
  grid-area: mas;
  justify-self: end;
  align-self: end;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: var(--redondo);
  background: var(--papel-tono);
  color: var(--tinta);
  font-size: var(--paso-chico);
  font-weight: 700;
}
.vacio {
  margin: 0;
  color: var(--tinta-suave);
}

/* ---------- La comanda: lo que se va a mandar ---------- */

.comanda {
  margin-top: 44px;
}
.comanda:focus {
  outline: none;
}
.comanda-arriba {
  padding: 30px 22px 22px;
}
.comanda-titulo {
  margin: 0 0 18px;
  font: 400 var(--paso-cabeza) / 1 var(--display);
  text-transform: uppercase;
  padding-top: 0.1em;
}
.lineas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 12px 0;
}
.linea + .linea {
  border-top: 4px dotted var(--papel-tono);
}
.linea-texto {
  display: flex;
  flex-direction: column;
}
.linea-nombre {
  font-weight: 600;
  line-height: 1.3;
}
.linea-det {
  color: var(--tinta-suave);
  font-size: var(--paso-chico);
}
.linea-importe {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.linea .cantidad {
  grid-column: 1 / -1;
}
.cantidad {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cantidad button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--papel-tono);
  font-size: 1.375rem;
  line-height: 1;
  transition: transform 140ms var(--sale), background-color 160ms;
}
.cantidad button:hover {
  background: var(--tinta);
  color: var(--papel);
}
.cantidad button:active {
  transform: scale(0.9);
}
.cantidad button:disabled {
  opacity: 0.4;
  cursor: default;
}
.cantidad-num {
  min-width: 2ch;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cuentas {
  margin: 14px 0 0;
  font-variant-numeric: tabular-nums;
}
.cuentas div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.cuentas dt small {
  color: var(--tinta-suave);
  font-size: var(--paso-chico);
}
.cuentas dd {
  margin: 0;
}
.cuentas .total {
  margin-top: 8px;
  font-size: var(--paso-lead);
  font-weight: 700;
}

/* Perforación con muescas: aquí se "corta" el talón con los datos de entrega. */
.perforado {
  position: relative;
  height: 0;
  margin: 0 26px;
  border-top: 5px dotted var(--fondo);
}
.perforado::before,
.perforado::after {
  content: "";
  position: absolute;
  top: -17px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fondo);
}
.perforado::before {
  left: -42px;
}
.perforado::after {
  right: -42px;
}

.comanda-abajo {
  padding: 26px 22px 28px;
}
.sub {
  margin: 0 0 12px;
  font-size: var(--paso-lead);
  font-weight: 700;
  line-height: 1.3;
}
.entrega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.opcion-entrega {
  position: relative;
}
.opcion-entrega input,
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px; /* taste-skill-ignore: radio accesible oculto */
}
.opcion-entrega span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 10px 16px;
  border-radius: 16px;
  background: var(--papel-tono);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 160ms, color 160ms, transform 140ms var(--sale);
}
.opcion-entrega small {
  font-size: var(--paso-chico);
  font-weight: 500;
}
.opcion-entrega input:checked + span,
.chip input:checked + span {
  background: var(--tinta);
  color: var(--papel);
}
.opcion-entrega input:focus-visible + span,
.chip input:focus-visible + span {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}
.opcion-entrega span:active,
.chip span:active {
  transform: scale(0.97);
}
.nota-entrega {
  margin: 10px 0 18px;
  color: var(--tinta-suave);
  font-size: var(--paso-chico);
}
.nota-entrega:empty {
  margin-bottom: 8px;
}
.campo-texto {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-weight: 600;
}
.campo-texto small {
  font-weight: 400;
  color: var(--tinta-suave);
}
.campo-texto input,
.campo-texto textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--papel-tono);
  font-size: var(--paso-texto);
  font-weight: 400;
}
.campo-texto textarea {
  resize: vertical;
}
.campo-texto input:focus,
.campo-texto textarea:focus {
  outline: none;
  border-color: var(--tinta);
}
.campo-texto ::placeholder {
  color: var(--tinta-suave);
  opacity: 0.8;
}
.error {
  margin: 0;
  color: var(--acento);
  font-weight: 700;
}
.error:empty,
.cerrado:empty {
  display: none;
}
.cerrado {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--papel-tono);
  font-size: var(--paso-chico);
  font-weight: 500;
}
.enviar {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--redondo);
  background: var(--acento);
  color: var(--acento-tinta);
  font-size: var(--paso-texto);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--sale), filter 160ms;
}
.enviar:hover {
  filter: brightness(1.12);
}
.enviar:active {
  transform: scale(0.98);
}
.vista-previa {
  margin-top: 20px;
}
.vista-previa summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--paso-chico);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mensaje {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: 4px 16px 16px;
  background: #e2f6d3;
  color: #14210f;
  font-size: var(--paso-chico);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- El reverso de la hoja ---------- */

.reverso {
  background: var(--fondo);
  padding: 40px var(--margen) calc(96px + env(safe-area-inset-bottom));
}
.reverso-papel {
  display: grid;
  gap: 28px;
  max-width: 1088px;
  margin: 0 auto;
  padding: 36px 22px 24px;
}
.despedida {
  margin: 0 0 10px;
  font: 400 var(--paso-cabeza) / 1 var(--display);
  text-transform: uppercase;
  padding-top: 0.1em;
}
.reverso-mensaje p {
  margin: 0;
  max-width: 32em;
}
.reverso-datos {
  position: relative;
}
.estampa {
  float: right;
  width: 76px;
  height: 100px;
  margin: 0 0 12px 16px;
  padding: 5px;
  background: var(--papel-tono);
  object-fit: cover;
  transform: rotate(3deg);
}
.direccion {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.direccion a {
  text-underline-offset: 3px;
}
.horario {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.horario div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.horario dd {
  margin: 0;
  font-weight: 600;
}
.imprenta {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--paso-chico);
}

/* ---------- Barra del teléfono con el pedido ---------- */

.barra-pedido {
  position: fixed;
  left: var(--margen);
  right: var(--margen);
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 24px;
  border-radius: var(--redondo);
  background: var(--tinta);
  color: var(--papel);
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.28); /* taste-skill-ignore: barra fija que flota */
  animation: sube 320ms var(--sale);
}

/* ---------- Diálogo de un platillo ---------- */

.platillo {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.25); /* taste-skill-ignore: diálogo */
  overflow: hidden;
}
.platillo[open] {
  display: flex;
  animation: sube 300ms var(--sale);
}
.platillo::backdrop {
  background: rgb(20 12 8 / 0.55);
}
.platillo form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.platillo-cabeza {
  position: relative;
  flex: none;
  min-height: 64px;
}
.platillo-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 34dvh;
  object-fit: cover;
}
.cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--papel);
  transition: transform 140ms var(--sale);
}
.cerrar:active {
  transform: scale(0.9);
}
.platillo-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px 8px;
  overscroll-behavior: contain;
}
.platillo-titulo {
  outline: none;
  margin: 0;
  padding-right: 44px;
  font: 400 var(--paso-cabeza) / 1 var(--display);
  text-transform: uppercase;
  padding-top: 0.1em;
}
.platillo-detalle {
  margin: 8px 0 0;
}
.platillo-base {
  margin: 4px 0 20px;
  font-weight: 700;
}
.grupo-opciones {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.grupo-opciones legend {
  padding: 0;
  margin-bottom: 10px;
  font-weight: 700;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--redondo);
  background: var(--papel-tono);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms, color 160ms, transform 140ms var(--sale);
}
.chip small {
  font-weight: 500;
  opacity: 0.85;
}
.extra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
}
.extra input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--tinta);
}
.extra-precio {
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.platillo-pie {
  flex: none;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 22px max(14px, env(safe-area-inset-bottom));
  background: var(--papel);
}
.agregar {
  flex: 1;
  min-height: 56px;
  border: 0;
  border-radius: var(--redondo);
  background: var(--acento);
  color: var(--acento-tinta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--sale), filter 160ms;
}
.agregar:hover {
  filter: brightness(1.12);
}
.agregar:active {
  transform: scale(0.97);
}

/* ---------- Entradas ---------- */

.entra {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--sale), transform 700ms var(--sale);
}
.entra.visto {
  opacity: 1;
  transform: none;
}
.grupo.entra .platillos li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms var(--sale), transform 600ms var(--sale);
}
.grupo.visto .platillos li {
  opacity: 1;
  transform: none;
}
.grupo.visto .platillos li:nth-child(2) { transition-delay: 70ms; }
.grupo.visto .platillos li:nth-child(3) { transition-delay: 140ms; }
.grupo.visto .platillos li:nth-child(4) { transition-delay: 210ms; }
.grupo.visto .platillos li:nth-child(n + 5) { transition-delay: 280ms; }

.portada > * {
  animation: aparece 700ms var(--sale) both;
}
.portada > :nth-child(2) { animation-delay: 80ms; }
.portada > :nth-child(3) { animation-delay: 160ms; }
.portada > :nth-child(4) { animation-delay: 240ms; }

@keyframes aparece {
  from { opacity: 0; transform: translateY(20px); }
}
@keyframes sube {
  from { transform: translateY(40px); opacity: 0; }
}
@keyframes deriva {
  to { transform: scale(1.08) translate(-1.5%, 1%); }
}
@keyframes latido {
  40% { transform: scale(1.08); }
}
@keyframes pulso {
  50% { opacity: 0.35; }
}
@keyframes recien {
  from { background-color: var(--papel-tono); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .entra,
  .grupo.entra .platillos li {
    transform: none;
  }
}

/* ---------- Pantallas grandes: la hoja al centro y la comanda a un lado ---------- */

@media (min-width: 600px) {
  :root {
    --margen: 28px;
  }
  .hoja {
    padding: 56px 56px 56px;
  }
  .platillo {
    margin: auto;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.3); /* taste-skill-ignore: diálogo */
  }
  .reverso-papel {
    max-width: 640px;
    padding: 56px 56px 28px;
  }
  .mesa > * {
    max-width: 640px;
    margin-inline: auto;
  }
  .estampa {
    width: 96px;
    height: 128px;
  }
  /* Fotos de platillo como láminas pegadas en la hoja, en 4:3. */
  .platillo-fila.con-foto {
    grid-template-columns: 160px minmax(0, 1fr) auto;
  }
  .platillo-fila img {
    width: 160px;
    height: 120px;
  }
}

@media (min-width: 980px) {
  .campo {
    height: 340px;
  }
  .barra {
    max-width: calc(1088px + 2 * var(--margen));
    margin: 0 auto;
    padding: 24px var(--margen) 0;
  }
  .mesa {
    display: grid;
    grid-template-columns: minmax(0, 640px) 400px;
    justify-content: center;
    align-items: start;
    gap: 48px;
  }
  .mesa > * {
    max-width: none;
    margin-inline: 0;
  }
  .hoja {
    margin-top: 56px;
  }
  .reverso-papel {
    max-width: 1088px;
    grid-template-columns: 1fr 1fr;
    gap: 40px 64px;
  }
  .comanda {
    position: sticky;
    top: 24px;
    margin-top: 56px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  /* Borde de ticket arrancado: dientes de 20px sobre los 400px de la comanda. */
  .comanda::before {
    display: none;
  }
  .comanda {
    clip-path: polygon(0 10px, 10px 0, 20px 10px, 30px 0, 40px 10px, 50px 0, 60px 10px, 70px 0, 80px 10px, 90px 0, 100px 10px, 110px 0, 120px 10px, 130px 0, 140px 10px, 150px 0, 160px 10px, 170px 0, 180px 10px, 190px 0, 200px 10px, 210px 0, 220px 10px, 230px 0, 240px 10px, 250px 0, 260px 10px, 270px 0, 280px 10px, 290px 0, 300px 10px, 310px 0, 320px 10px, 330px 0, 340px 10px, 350px 0, 360px 10px, 370px 0, 380px 10px, 390px 0, 400px 10px, 100% 100%, 0 100%);
  }
  .comanda-arriba {
    padding-top: 40px;
  }

  .barra-pedido {
    display: none !important;
  }
  .reverso {
    padding-bottom: 48px;
  }
}