/* Momentos Burger · carta digital */

:root {
  --cafe-900: #2f1b10;
  --cafe-800: #4a2c1b;
  --cafe-700: #5e3924;
  --cafe-600: #704931;
  --cafe-500: #8a6450;
  --cafe-300: #cfb196;
  --cafe-200: #ecd6bb;
  --crema: #fff1de;
  --crema-2: #fde6c8;
  --papel: #fff1de;   /* el crema más claro del PDF; ya no hay blanco ajeno a la marca */
  --durazno: #fbd09f;
  --durazno-claro: #f6dcc0;
  --naranja: #f39537;
  --naranja-osc: #dc7a1e;
  --error: #a3361a;
  --error-fondo: #f8d9cc;

  --f-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-texto: 'Albert Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-script: 'Sacramento', 'Brush Script MT', cursive;

  --r-tarjeta: 16px;
  --r-hoja: 24px;
  /* Lenguaje de movimiento (mismas curvas en app.js, objeto MOV) */
  --sale: cubic-bezier(.23, 1, .32, 1);      /* entradas, respuestas, hover */
  --mueve: cubic-bezier(.77, 0, .175, 1);    /* algo que se desplaza en pantalla */
  --hoja: cubic-bezier(.32, .72, 0, 1);      /* hojas y la foto que viaja */
  --t-toque: 140ms;
  --t-estado: 200ms;
  --t-entrada: 480ms;
  --alto-cats: 60px;
  --borde: 1px solid var(--cafe-200);

  color-scheme: light;
  accent-color: var(--cafe-700);
  scrollbar-color: var(--cafe-300) transparent;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.con-capa { overflow: hidden; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--cafe-800);
  font: 400 16px/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--naranja-osc);
}
/* Recorte horizontal por bloque y con clip (no hidden en body): overflow hidden en body rompe
   position: sticky en navegadores móviles; clip no crea contenedor de scroll, así la barra sigue fija. */
.cabecera, .carta, .pie { overflow-x: clip; }
::selection { background: var(--durazno); color: var(--cafe-900); }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, summary, label.chip, .segmento label { touch-action: manipulation; }
button, .cat, .chip span, .segmento span, summary { -webkit-user-select: none; user-select: none; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--naranja-osc); outline-offset: 2px; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--papel); color: var(--cafe-900); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.saltar:focus { top: 12px; }

.contenedor { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .contenedor { padding-inline: 28px; } }

/* ---------- marca (logo como máscara para teñirlo con la paleta) ---------- */

/* El logo original (marca sobre nombre, como en la portada del PDF) se tiñe del durazno de la marca.
   Todas sus apariciones comparten proporciones a partir de --w, así la presentación puede viajar
   exactamente hasta la cabecera. */
.logo { --w: 168px; display: inline-grid; justify-items: center; gap: calc(var(--w) * .075); margin: 0; text-decoration: none; }
.logo-marca, .logo-nombre { display: block; background: var(--durazno); }
.logo-marca { width: calc(var(--w) * .27); aspect-ratio: 75.8 / 93.63; -webkit-mask: url(marca/mark.svg) center / contain no-repeat; mask: url(marca/mark.svg) center / contain no-repeat; }
.logo-nombre { width: var(--w); aspect-ratio: 280.55 / 81.12; -webkit-mask: url(marca/wordmark.svg) center / contain no-repeat; mask: url(marca/wordmark.svg) center / contain no-repeat; }
.logo--cabecera { --w: clamp(150px, 44vw, 196px); }
.logo--intro { --w: min(250px, 64vw); transform-origin: 0 0; will-change: transform; }
.logo--pie { --w: 138px; }
.vacio-marca, .ficha-media--marca::after, .cats-marca::before {
  display: block; aspect-ratio: 75.8 / 93.63; background: var(--durazno);
  -webkit-mask: url(marca/mark.svg) center / contain no-repeat; mask: url(marca/mark.svg) center / contain no-repeat;
}

/* ---------- cabecera ---------- */

.cabecera { background: var(--cafe-800); color: var(--durazno-claro); }
/* La portada es una pantalla propia del alto visible real (dvh sigue a las barras del navegador), así nunca
   asoma la carta debajo; svh y vh quedan como respaldo para navegadores sin dvh. */
.cabecera { min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; }
.cabecera > .cabecera-in { flex: 1; align-content: center; }
.cabecera-in { display: grid; justify-items: center; gap: 16px; padding-block: calc(30px + env(safe-area-inset-top, 0px)) 26px; text-align: center; }
.cabecera-texto { margin: 0; font-size: 14px; line-height: 1.45; display: grid; gap: 2px; }
.cabecera-sede { font-weight: 600; color: var(--durazno); letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; }
html.intro-on { overflow: hidden; }

/* Portada: las burgers premiadas, con foto real e insignia, a un toque de su ficha. */
.destacadas { padding: 6px 0 4px; }
.portada-bajar {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px;
  margin: 14px 0 calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px 20px; border-radius: 999px;
  color: var(--durazno-claro); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: transform var(--t-toque) var(--sale), color var(--t-estado) ease;
}
.portada-bajar .ico { width: 20px; height: 20px; }
.portada-bajar:active { transform: scale(.96); }
.portada-bajar:focus-visible { outline-color: var(--durazno); }
@media (hover: hover) and (pointer: fine) { .portada-bajar:hover { color: var(--crema); } }
.destacadas-cab { margin-bottom: 14px; }
.destacadas-titulo { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.destacadas-script { font: 400 clamp(2.4rem, 10vw, 3.1rem)/1 var(--f-script); color: var(--durazno); }
.destacadas-sub { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--durazno-claro); opacity: .8; }
.destacadas-riel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 2px 16px 6px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.destacadas-riel::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .destacadas-riel { scroll-padding-inline: 28px; padding-inline: 28px; } }
@media (min-width: 1000px) {
  .destacadas-riel { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; max-width: 1180px; margin-inline: auto; overflow: visible; }
}
.destacada {
  position: relative; scroll-snap-align: start; display: grid; border-radius: 18px; overflow: hidden;
  background: var(--cafe-900); color: var(--crema);
  transition: transform 260ms var(--sale);
}
.destacada:active { transform: scale(.985); transition-duration: var(--t-toque); }
.destacada .tarjeta-media { aspect-ratio: 16 / 10; background: var(--cafe-700); }
.destacada .tarjeta-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(30, 16, 8, .78)); pointer-events: none; }
.destacada-cuerpo { position: absolute; z-index: 2; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px 16px; pointer-events: none; }
.destacada-nombre { margin: 0; font: 400 1.55rem/1.05 var(--f-titulo); color: var(--crema); }
.destacada-nombre .tarjeta-abrir { pointer-events: auto; }
.destacada .ganadora { display: block; font-size: 1.45rem; line-height: 1; color: var(--durazno); margin: 0 0 6px; }
.destacada .precio { color: var(--crema); }
.destacada .moneda { color: var(--durazno-claro); }
.destacada .tarjeta-abrir::after { border-radius: 18px; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .destacada:hover .tarjeta-img.cargada { transform: scale(1.03); } }
.destacada.es-agotado .tarjeta-img { opacity: .55; }
html.intro-on #logo { opacity: 0; }

/* ---------- barra de categorías ---------- */

.cats {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 20; background: var(--cafe-700); box-shadow: 0 6px 18px -12px rgba(47, 27, 16, .7);
  /* área segura: muesca en horizontal o app instalada (con viewport-fit=cover) */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
.cats-in { position: relative; display: flex; align-items: center; gap: 2px; padding-left: 6px; padding-right: 6px; }

/* Lupa y buscador: viven en la misma barra; al abrir, el buscador ocupa su lugar sin cambiar su alto. */
.lupa {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--durazno); transition: background-color var(--t-estado) ease, transform var(--t-toque) var(--sale);
}
.lupa:active { transform: scale(.92); }
.lupa:focus-visible, .buscador-cerrar:focus-visible { outline-color: var(--durazno); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .lupa:hover { background: rgba(251, 208, 159, .12); } }
.buscador {
  position: absolute; inset: 0 6px 0 10px; display: flex; align-items: center; gap: 8px;
  visibility: hidden; opacity: 0; transform: translateX(10px);
  transition: opacity 180ms var(--sale), transform 220ms var(--sale), visibility 0s linear 220ms;
}
.cats.buscando .cats-marca, .cats.buscando .cats-scroll, .cats.buscando .lupa { visibility: hidden; opacity: 0; transition: opacity 120ms ease, visibility 0s linear 120ms; }
.cats.buscando .buscador { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms var(--sale), transform 240ms var(--sale), visibility 0s; }
.buscador-campo {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 44px;
  border-radius: 999px; background: rgba(255, 250, 243, .12); box-shadow: inset 0 0 0 1px rgba(251, 208, 159, .22);
  transition: box-shadow var(--t-estado) ease, background-color var(--t-estado) ease;
}
.buscador-campo:focus-within { background: rgba(255, 250, 243, .16); box-shadow: inset 0 0 0 1.5px var(--durazno); }
.buscador-campo > .ico { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--durazno); pointer-events: none; }
.buscador-campo input {
  flex: 1; min-width: 0; height: 100%; padding: 0 6px 0 44px; border: 0; background: none; outline: none;
  font-size: 16px; color: var(--crema); caret-color: var(--durazno); -webkit-appearance: none; appearance: none;
}
.buscador-campo input::placeholder { color: rgba(246, 220, 192, .62); }
.buscador-campo input::-webkit-search-cancel-button, .buscador-campo input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.buscador-borrar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 2px; border: 0; border-radius: 50%; background: none; color: var(--durazno-claro); }
.buscador-borrar .ico { width: 18px; height: 18px; }
.buscador-borrar:active { transform: scale(.9); }
.buscador-cerrar {
  flex: none; height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
  color: var(--crema); font-weight: 600; font-size: 15px;
}
.buscador-cerrar:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .buscador-cerrar:hover { background: rgba(251, 208, 159, .12); } }
.cats-marca { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; opacity: .85; transition: opacity var(--t-estado) ease; }
.cats-marca::before { content: ''; width: 19px; }
.cats-marca:focus-visible { outline-color: var(--durazno); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .cats-marca:hover { opacity: 1; } }
.cats-scroll {
  position: relative; flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 32px), transparent);
  mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 32px), transparent);
}
.cats-scroll::-webkit-scrollbar { display: none; }
.cats-lista { display: flex; margin: 0; padding: 0 32px 0 4px; list-style: none; width: max-content; }
.cat {
  display: flex; align-items: center; height: var(--alto-cats); padding: 0 14px;
  color: rgba(246, 220, 192, .74); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  transition: color var(--t-estado) ease;
}
.cat span { display: block; transition: transform var(--t-toque) var(--sale); }
.cat:active span { transform: translateY(1px); }
.cat.activa { color: var(--crema); }
.cat:focus-visible { outline-color: var(--durazno); outline-offset: -8px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .cat:not(.activa):hover { color: var(--durazno-claro); } }
.cats-indicador {
  position: absolute; left: 0; bottom: 12px; width: 100px; height: 2px; border-radius: 1px; background: var(--durazno);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none;
  transition: transform 320ms var(--mueve), opacity var(--t-estado) ease;
}
.cats-indicador.listo { opacity: 1; }
.cats-indicador.sin-transicion { transition: none; }

/* ---------- secciones ---------- */

.carta { display: block; outline: none; padding-bottom: 40px; }
.estado-carga, .error-carga { padding: 72px 0; text-align: center; color: var(--cafe-600); }
.seccion { padding-top: 56px; scroll-margin-top: calc(var(--alto-cats) - 12px); }
@media (min-width: 760px) { .seccion { padding-top: 76px; } }
.seccion-cab { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.seccion-regla { flex: 1; height: 1px; background: var(--cafe-200); align-self: center; margin-top: .55em; }
.titulo-script {
  margin: 0; font: 400 clamp(3.1rem, 13vw, 4.4rem)/1 var(--f-script); color: var(--cafe-700);
  padding-top: .08em; outline: none;
}
.seccion-meta { margin: 0; font-size: 14px; font-weight: 500; color: var(--cafe-600); white-space: nowrap; }

.incluye { margin: 0 0 18px; padding: 14px 16px; background: var(--crema-2); border-radius: 14px; font-size: 15px; color: var(--cafe-800); }
.incluye-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.incluye-lista li { padding: 4px 11px; background: var(--papel); border-radius: 999px; font-size: 13.5px; font-weight: 500; }

.nota-seccion { margin-top: 18px; font-size: 13.5px; line-height: 1.45; color: var(--cafe-600); }
.nota-seccion p { margin: 0 0 4px; max-width: 75ch; }

/* ---------- grupos con título propio (p. ej. Burger Master) ---------- */

.bloque { margin-bottom: 28px; }
.bloque-titulo { margin: 0 0 14px; font: 600 1.2rem/1.2 var(--f-titulo); color: var(--cafe-800); }
.rejilla--grupo { gap: 16px; }

/* ---------- tarjetas ---------- */

.rejilla { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .rejilla { grid-template-columns: repeat(2, 1fr); } .rejilla.rejilla--grupo { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 999px) {
  .rejilla--grupo > .tarjeta--foto { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .rejilla--grupo > .tarjeta--foto .tarjeta-cuerpo { align-self: stretch; padding: 22px 24px 20px; }
}
@media (min-width: 1000px) { .rejilla.rejilla--grupo { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 18px; } .rejilla--par { grid-template-columns: repeat(2, 1fr); } }

.tarjeta {
  position: relative; display: flex; flex-direction: column; background: var(--crema-2);
  border: var(--borde); border-radius: var(--r-tarjeta); overflow: hidden;
  transition: transform 260ms var(--sale), box-shadow 260ms var(--sale), border-color 260ms ease,
              opacity var(--t-entrada) var(--sale), translate var(--t-entrada) var(--sale);
}
.tarjeta:active { transform: scale(.985); transition-duration: var(--t-toque); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { border-color: var(--cafe-300); box-shadow: 0 14px 30px -18px rgba(74, 44, 27, .5); transform: translateY(-3px); }
  .tarjeta:hover .tarjeta-img.cargada { transform: scale(1.025); }
}

/* Marco fotográfico único: 16:10, igual que los archivos del dashboard (1600 × 1000). */
.tarjeta-media, .ficha-media, .fantasma-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cafe-200); }
.tarjeta-img, .ficha-img, .fantasma-media img:not(.media-fondo) { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.tarjeta-img { opacity: 0; transition: opacity 360ms ease, transform 600ms var(--sale); }
.tarjeta-img.cargada { opacity: 1; }
.formato-libre img:not(.media-fondo) { object-fit: contain; }
/* Foto con encuadre propio (ENCUADRE en app.js): llena el marco centrada en el plato; el zoom usa
   la propiedad scale, independiente del transform del hover. */
.encuadre-propio img:not(.media-fondo) { object-fit: cover; }
.media-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.1) brightness(.9); transform: scale(1.15); }
.en-vuelo { visibility: hidden; }
.sin-imagen { display: grid; place-items: center; background: var(--cafe-700); }
.sin-imagen::after { content: ''; width: 56px; aspect-ratio: 75.8 / 93.63; background: var(--durazno); opacity: .5; -webkit-mask: url(marca/mark.svg) center / contain no-repeat; mask: url(marca/mark.svg) center / contain no-repeat; }

.tarjeta-insignia { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 6px; border-radius: 50%; background: rgba(47, 27, 16, .5); pointer-events: none; }
.insignia-img {
  display: block; width: 60px; height: 60px; background: var(--crema);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  filter: drop-shadow(0 2px 6px rgba(20, 10, 4, .65));
}
.insignia--2024 { -webkit-mask-image: url(marca/badge-2024.png); mask-image: url(marca/badge-2024.png); }
.insignia--2025 { -webkit-mask-image: url(marca/badge-2025.png); mask-image: url(marca/badge-2025.png); }
.insignia--2026 { -webkit-mask-image: url(marca/badge-2026.png); mask-image: url(marca/badge-2026.png); }

.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 16px; }
.ganadora { font: 400 1.7rem/0.9 var(--f-script); color: var(--naranja-osc); margin-bottom: -2px; }
.tarjeta-nombre { margin: 0; font: 400 1.45rem/1.12 var(--f-titulo); letter-spacing: -.012em; color: var(--cafe-800); text-wrap: balance; }
.tarjeta--foto .tarjeta-nombre { font-size: 1.6rem; }
.tarjeta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.tarjeta-cab .precio { white-space: nowrap; }
.tarjeta-desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cafe-600); }
.tarjeta-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex: 1; }
.tarjeta-texto { flex: 1; min-width: 0; align-self: flex-start; }
.precio { font: 500 1.3rem/1 var(--f-titulo); font-variant-numeric: tabular-nums lining-nums; color: var(--cafe-800); }
.moneda { font-size: .7em; margin-right: .06em; vertical-align: .22em; color: var(--cafe-600); }

.tarjeta-abrir { padding: 0; border: 0; background: none; text-align: left; font: inherit; letter-spacing: inherit; color: inherit; }
.tarjeta-abrir::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.tarjeta .tarjeta-abrir::after { border-radius: var(--r-tarjeta); }
.tarjeta-abrir:focus-visible { outline: none; }
.tarjeta-abrir:focus-visible::after { outline: 3px solid var(--naranja-osc); outline-offset: -3px; }

.mas {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: var(--naranja); color: var(--cafe-900);
  transition: background-color var(--t-estado) ease, transform var(--t-toque) var(--sale);
}
.mas .ico { width: 22px; height: 22px; stroke-width: 2.4; transition: transform var(--t-estado) var(--sale); }
.mas:active { transform: scale(.9); }
.mas.hecho { background: var(--cafe-700); color: var(--durazno); }
.mas.hecho .ico { animation: confirmar 260ms var(--sale); }
@keyframes confirmar { from { transform: scale(.6); opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .mas:hover:not(.hecho) { background: var(--naranja-osc); } }
.sello { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: var(--cafe-600); background: var(--cafe-200); padding: 6px 12px; border-radius: 999px; }
.es-agotado .tarjeta-img, .es-agotado .tarjeta-nombre, .es-agotado .precio { opacity: .55; }

.bandera { display: inline-block; width: 18px; height: 12px; margin-left: 8px; border-radius: 2px; vertical-align: .12em; box-shadow: 0 0 0 1px rgba(74, 44, 27, .18); }
.bandera--mx { background: linear-gradient(90deg, #1f7a45 33.3%, #fff 33.3% 66.6%, #c8202f 66.6%); }
.bandera--ar { background: linear-gradient(#75aadb 33.3%, #fff 33.3% 66.6%, #75aadb 66.6%); }

/* foto + texto lado a lado cuando hay espacio; la foto conserva su marco 16:10 */
@media (min-width: 600px) {
  .rejilla:not(.rejilla--grupo) > .tarjeta--foto { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .rejilla:not(.rejilla--grupo) > .tarjeta--foto .tarjeta-cuerpo { align-self: stretch; padding: 22px 24px 20px; }
  .rejilla:not(.rejilla--grupo) > .tarjeta--foto .tarjeta-nombre { font-size: 1.8rem; }
}

.sabores { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.sabores li { padding: 4px 11px; border: var(--borde); border-radius: 999px; font-size: 13.5px; font-weight: 500; background: var(--crema); }

/* ---------- resultados de búsqueda (reemplazan la carta mientras hay texto) ---------- */

.resultados { min-height: calc(100dvh - var(--alto-cats)); padding-top: 26px; padding-bottom: 40px; }
.resultados[hidden] { display: none; }
.resultados-cuenta { margin: 0; font-size: 14px; font-weight: 500; color: var(--cafe-600); }
.resultados-grupo { margin-top: 26px; }
.resultados-grupo > .bloque-titulo { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--cafe-300); }
.resultados-grupo > .bloque-titulo + .rejilla { margin-top: 14px; }
.resultados-vacio { display: grid; justify-items: center; gap: 10px; padding: 56px 8px; text-align: center; }
.resultados-vacio-titulo { margin: 0; font: 400 1.5rem/1.2 var(--f-titulo); color: var(--cafe-800); text-wrap: balance; }
.resultados-vacio p:not(.resultados-vacio-titulo) { margin: 0 0 8px; color: var(--cafe-600); }
.sello--accion { border: 0; background: var(--cafe-200); color: var(--cafe-800); cursor: pointer; }

/* ---------- platos sin foto: lista de carta impresa (nombre · guía punteada · precio) ---------- */

.platos { margin: 0; padding: 0; list-style: none; display: grid; }
.rejilla + .platos, .platos + .rejilla, .bloque + .platos { margin-top: 10px; }
.platos + .rejilla { margin-top: 22px; }
@media (min-width: 760px) { .platos { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
.plato {
  position: relative; display: grid; gap: 6px; padding: 18px 0 16px; border-bottom: 1px solid var(--cafe-200);
  transition: opacity var(--t-entrada) var(--sale), translate var(--t-entrada) var(--sale);
}
.plato-cab { display: flex; align-items: baseline; gap: 10px; }
.plato-nombre { margin: 0; font: 400 1.4rem/1.12 var(--f-titulo); letter-spacing: -.012em; color: var(--cafe-800); }
.plato-guia { flex: 1; min-width: 18px; border-bottom: 2px dotted var(--cafe-300); transform: translateY(-.28em); }
.plato .precio { white-space: nowrap; }
.plato-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.plato-desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cafe-600); max-width: 52ch; }
.plato-pie .mas, .plato-pie .sello { margin-left: auto; }
.plato .tarjeta-abrir::after { border-radius: 10px; }
.plato:active { background: rgba(236, 214, 187, .35); }
@media (hover: hover) and (pointer: fine) { .plato:hover .plato-nombre { text-decoration: underline; text-decoration-color: var(--cafe-300); text-underline-offset: 5px; text-decoration-thickness: 1px; } }
.plato.es-agotado .plato-nombre, .plato.es-agotado .precio { opacity: .55; }

/* ---------- listas compactas (bebidas y adiciones) ---------- */

.grupos { display: grid; gap: 28px; margin-top: 26px; }
.rejilla--par + .grupos { margin-top: 30px; }
@media (min-width: 760px) { .grupos { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
.seccion--adiciones .grupos { margin-top: 0; grid-template-columns: 1fr; }
@media (min-width: 760px) { .seccion--adiciones .filas { columns: 2; column-gap: 40px; } .seccion--adiciones .fila { break-inside: avoid; } }
.grupo-titulo { margin: 0 0 4px; padding-bottom: 8px; font: 600 1.2rem/1.2 var(--f-titulo); color: var(--cafe-800); border-bottom: 1px solid var(--cafe-300); }
.filas { margin: 0; padding: 0; list-style: none; }
.fila {
  position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center;
  min-height: 60px; padding: 8px 0; border-bottom: 1px dotted var(--cafe-300);
}
.fila-nombre { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.fila-desc { grid-column: 1; margin: 2px 0 0; font-size: 13.5px; color: var(--cafe-600); }
.fila-pie { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; gap: 12px; }
.fila .precio { font-size: 1.1rem; }
@media (hover: hover) { .fila:hover .fila-nombre { text-decoration: underline; text-decoration-color: var(--cafe-300); text-underline-offset: 4px; } }

/* ---------- reservas ---------- */

.reserva { display: grid; gap: 16px; }
@media (min-width: 900px) { .reserva { grid-template-columns: 1.1fr 1fr; align-items: start; column-gap: 28px; } .reserva-titulo, .ocasiones { grid-column: 1 / -1; } }
.reserva-titulo { margin: 0; font: 400 clamp(1.5rem, 5.5vw, 2rem)/1.15 var(--f-titulo); color: var(--cafe-800); text-wrap: balance; }
.ocasiones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ocasiones li { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border: var(--borde); background: var(--papel); border-radius: 999px; font-weight: 600; font-size: 15px; }
.ocasiones .ico { color: var(--naranja-osc); }
.reserva-tarjeta { display: grid; gap: 8px; padding: 18px; background: var(--crema-2); border: var(--borde); border-radius: var(--r-tarjeta); }
.reserva-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.reserva-tarjeta .boton { margin-top: 8px; justify-self: start; }
.reserva-nota { padding: 16px 18px; background: var(--crema-2); border-radius: var(--r-tarjeta); }
.reserva-nota h3 { margin: 0 0 6px; font: 600 1.05rem/1.3 var(--f-titulo); }
.reserva-nota p { margin: 0; font-size: 14.5px; color: var(--cafe-700); }

/* ---------- botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--cafe-700); color: var(--crema);
  font: 600 16px/1.2 var(--f-texto); text-decoration: none; transition: background-color .2s, transform .15s var(--sale);
}
.boton:active:not(:disabled) { transform: scale(.98); }
.boton--primario { background: var(--naranja); color: var(--cafe-900); }
.boton--ancho { width: 100%; }
.boton:disabled { background: var(--cafe-200); color: var(--cafe-600); cursor: not-allowed; }
@media (hover: hover) { .boton:hover:not(:disabled) { background: var(--cafe-800); } .boton--primario:hover:not(:disabled) { background: var(--naranja-osc); } }
.enlace { padding: 6px 0; border: 0; background: none; color: var(--cafe-800); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.enlace--suave { color: var(--cafe-600); margin: 6px 0 0; }

/* ---------- pie ---------- */

.pie { background: var(--cafe-800); color: var(--durazno-claro); }
.pie-in { display: grid; gap: 18px; padding-block: 48px 56px; }
body.con-barra .pie-in { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.logo--pie { justify-self: start; }
.pie-historia { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.pie-enlaces a, .pie-enlaces span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--durazno); font-weight: 600; }
.pie-enlaces a:focus-visible { outline-color: var(--durazno); }

/* ---------- barra de pedido ---------- */

.barra-pedido {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 24px)); height: 60px; padding: 0 8px;
  border: 0; border-radius: 999px; background: var(--cafe-900); color: var(--crema);
  box-shadow: 0 14px 30px -10px rgba(47, 27, 16, .6);
  transform: translate(-50%, 150%); transition: transform .38s var(--sale);
}
.barra-pedido.visible { transform: translate(-50%, 0); }
.barra-pedido:focus-visible { outline-color: var(--naranja); }
.barra-cuenta { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--naranja); color: var(--cafe-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-cuenta .ico { width: 20px; height: 20px; }
.barra-texto { flex: 1; text-align: left; font-weight: 600; }
.barra-total { padding-right: 14px; font: 500 1.2rem/1 var(--f-titulo); font-variant-numeric: tabular-nums lining-nums; }
.barra-pedido.golpe .barra-cuenta { animation: golpe .42s var(--sale); }
@keyframes golpe { 40% { transform: scale(1.12); } }

/* ---------- hojas (ficha y pedido) ---------- */

/* Las animaciones de apertura y cierre viven en app.js (Web Animations: interrumpibles y reversibles). */
.hoja {
  position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; border: 0;
  width: 100%; max-width: none; max-height: calc(100dvh - max(14px, env(safe-area-inset-top, 0px)));
  background: var(--papel); color: var(--cafe-800); border-radius: var(--r-hoja) var(--r-hoja) 0 0; overflow: hidden;
  box-shadow: 0 -10px 40px -10px rgba(47, 27, 16, .45);
}
.hoja[open] { display: flex; flex-direction: column; }
.hoja::backdrop { background: rgba(47, 27, 16, .58); opacity: 0; transition: opacity 320ms var(--sale); }
.hoja.visible::backdrop { opacity: 1; }

@media (min-width: 760px) {
  .hoja { inset: 0; margin: auto; width: min(1040px, calc(100% - 64px)); max-height: min(88dvh, 780px); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(20, 10, 4, .55); }
  .hoja--pedido, #ficha.ficha--simple { width: min(580px, calc(100% - 64px)); }
}

/* La foto viajera: capa propia por encima del diálogo durante la transición tarjeta ↔ ficha. */
.foto-fantasma { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; overflow: hidden; background: none; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.foto-fantasma .fantasma-media { width: 100%; height: 100%; aspect-ratio: auto; }

.ficha-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cerrar {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: rgba(47, 27, 16, .66); color: var(--crema);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--t-estado) ease, color var(--t-estado) ease, transform var(--t-toque) var(--sale);
}
.cerrar:active { transform: scale(.92); }
.cerrar--plano { background: var(--crema-2); color: var(--cafe-800); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) { .cerrar:hover { background: var(--cafe-900); } .cerrar--plano:hover { background: var(--cafe-200); } }

/* Barra fija de la ficha: transparente sobre la foto; sólida, con el nombre, al bajar. */
.ficha-barra { position: sticky; top: 0; z-index: 4; height: 0; }
.ficha-barra::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64px;
  background: rgba(255, 250, 243, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--cafe-200); opacity: 0; transition: opacity var(--t-estado) ease;
}
.ficha-barra-nombre {
  position: absolute; left: 20px; right: 72px; top: 0; margin: 0; font: 400 1.2rem/64px var(--f-titulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-estado) ease, transform var(--t-estado) var(--sale);
}
.ficha-barra .cerrar { position: absolute; top: 10px; right: 10px; }
.desplazada .ficha-barra::before, .desplazada .ficha-barra-nombre { opacity: 1; transform: none; }
.desplazada .ficha-barra .cerrar { background: var(--crema-2); color: var(--cafe-800); }

.ficha-media { border-radius: var(--r-hoja) var(--r-hoja) 0 0; }
.ficha-img { opacity: 0; transition: opacity 300ms ease; }
.ficha-img.cargada { opacity: 1; }
.ficha-media .tarjeta-insignia { top: auto; bottom: 14px; right: 14px; }
.ficha-media .insignia-img { width: 80px; height: 80px; }
.ficha-media--marca { aspect-ratio: auto; height: 132px; display: flex; align-items: flex-end; padding: 0 20px 16px; background: var(--cafe-700); }
.ficha-media--marca::after { content: ''; position: absolute; right: 78px; top: 50%; width: 60px; transform: translateY(-50%) rotate(-8deg); opacity: .22; }
.ficha-cat { font: 400 2.8rem/1 var(--f-script); color: var(--crema); }

.ficha-info { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 4px; }
.ficha-der { display: flex; flex-direction: column; gap: 10px; padding: 10px 20px 28px; }
.ficha--simple .ficha-der { padding: 0 0 18px; }
.ficha-insignia { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cafe-600); display: flex; align-items: center; gap: 8px; }
.ficha-insignia::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); }
.ficha-nombre { margin: 0; padding-right: 8px; font: 400 clamp(2rem, 8vw, 2.7rem)/1.04 var(--f-titulo); letter-spacing: -.02em; text-wrap: balance; }
.ficha-precio { margin: 0; color: var(--cafe-700); }
.ficha-precio .precio { font-size: 1.55rem; color: var(--cafe-700); }
.ficha-desc { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cafe-700); max-width: 62ch; }
.ficha-incluye { margin: 2px 0 0; padding: 10px 14px; background: var(--crema-2); border-radius: 12px; font-size: 15px; font-weight: 500; }

.ficha-nota, .adiciones { border: var(--borde); border-radius: 14px; }
.ficha-nota summary, .adiciones summary {
  display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px 0 16px;
  font-weight: 600; font-size: 15.5px; list-style: none; cursor: pointer;
}
.ficha-nota summary::-webkit-details-marker, .adiciones summary::-webkit-details-marker { display: none; }
.ficha-nota summary { justify-content: space-between; }
.det-flecha { width: 18px; height: 18px; transition: transform .2s var(--sale); }
details[open] > summary .det-flecha { transform: rotate(90deg); }
.ficha-nota p { margin: 0; padding: 0 16px 10px; font-size: 14px; color: var(--cafe-600); }
.ficha-nota p:first-of-type { padding-top: 2px; }

.opciones { margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.opciones legend { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 17px; }
.obligatorio { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--crema-2); color: var(--cafe-600); transition: background-color .2s, color .2s; }
.con-error .obligatorio { background: var(--error-fondo); color: var(--error); }
.opciones-error { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--error); }
.opciones-error:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--cafe-300);
  border-radius: 20px; background: var(--papel); font-size: 15px; font-weight: 500; line-height: 1.25; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.chip-check { width: 0; margin-left: -6px; opacity: 0; transition: width .18s var(--sale), opacity .18s, margin .18s; }
.chip input:checked + span { background: var(--cafe-700); border-color: var(--cafe-700); color: var(--crema); }
.chip input:checked + span .chip-check { width: 18px; margin-left: -4px; opacity: 1; }
.chip input:focus-visible + span { outline: 3px solid var(--naranja-osc); outline-offset: 2px; }
.con-error .chip span { border-color: #d9967f; }
@media (hover: hover) { .chip input:not(:checked) + span:hover { border-color: var(--cafe-500); } }

.adiciones { margin-top: 10px; }
.opcional { font-size: 12.5px; font-weight: 500; color: var(--cafe-600); margin-left: 4px; }
.adic-cuenta { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--cafe-600); }
.adic-lista { margin: 0; padding: 0 8px 8px; list-style: none; }
.adic { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border-top: 1px dotted var(--cafe-200); border-radius: 10px; transition: background-color .2s; }
.adic.con-cantidad { background: var(--crema); border-top-color: transparent; }
.adic-nombre { font-size: 15px; line-height: 1.3; }
.adic-precio { display: block; font-size: 13px; color: var(--cafe-600); font-variant-numeric: tabular-nums; }

.paso { display: inline-flex; align-items: center; flex: none; height: 50px; border: 1.5px solid var(--cafe-300); border-radius: 999px; background: var(--papel); }
.paso button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cafe-800); }
.paso button:disabled { color: var(--cafe-300); cursor: default; }
@media (hover: hover) { .paso button:not(:disabled):hover { background: var(--crema-2); } }
.paso output { min-width: 26px; text-align: center; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.paso--chico { height: 47px; }
.paso--chico button { width: 44px; height: 44px; }
.paso--chico .ico { width: 18px; height: 18px; }
.paso--chico output { min-width: 22px; font-size: 15px; }

.nota-campo, .campo { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 600; }
.nota-campo textarea, .campo input, .campo textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--cafe-300); border-radius: 12px; background: #fff;
  font-size: 16px; font-weight: 400; color: var(--cafe-900); resize: vertical; transition: border-color .15s, box-shadow .15s;
}
.campo input { height: 50px; }
.nota-campo textarea:focus, .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cafe-700); box-shadow: 0 0 0 3px rgba(243, 149, 55, .35); }
::placeholder { color: #7a5a47; opacity: 1; }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo-error { font-size: 14px; font-weight: 500; color: var(--error); }
.campo-error:empty { display: none; }
.campo[hidden] { display: none; }

.ficha-pie, .pedido-pie {
  flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: var(--borde); background: var(--papel);
}
.ficha-pie { display: flex; align-items: center; gap: 12px; }
.boton--agregar { flex: 1; justify-content: space-between; min-height: 52px; padding: 0 22px; }
.boton-total { font: 500 1.15rem/1 var(--f-titulo); font-variant-numeric: tabular-nums lining-nums; }
.boton--agregar.hecho { justify-content: center; background: var(--cafe-700); color: var(--durazno); }

/* Pantallas grandes: la foto y la presentación del plato a la izquierda (fija), las opciones a la derecha. */
@media (min-width: 760px) {
  #ficha { --col: 46%; }
  #ficha:not(.ficha--simple) .ficha-scroll { display: grid; grid-template-columns: var(--col) 1fr; align-items: start; }
  #ficha:not(.ficha--simple) .ficha-barra { grid-column: 1 / -1; }
  #ficha:not(.ficha--simple) .ficha-barra::before { left: var(--col); }
  #ficha:not(.ficha--simple) .ficha-barra-nombre { display: none; }
  #ficha:not(.ficha--simple) .ficha-izq { position: sticky; top: 0; background: var(--crema); min-height: 100%; }
  #ficha:not(.ficha--simple) .ficha-media { border-radius: 20px 0 0 0; }
  #ficha:not(.ficha--simple) .ficha-info { padding: 24px 28px 30px; }
  #ficha:not(.ficha--simple) .ficha-der { padding: 76px 30px 30px; }
  #ficha:not(.ficha--simple) .ficha-pie { margin-left: var(--col); width: calc(100% - var(--col)); padding-inline: 24px; }
  #ficha.ficha--simple .ficha-media { border-radius: 20px 22px 0 0; }
  .boton--agregar { min-width: 0; padding: 0 18px; }
  .boton--agregar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #ficha.ficha--simple .ficha-info { padding: 24px 28px 8px; }
  #ficha .ficha-media--marca { height: 160px; padding: 0 28px 20px; }
}
@media (min-width: 1000px) { #ficha { --col: 52%; } }

/* pedido */
.pedido-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px 20px; border-bottom: var(--borde); }
.pedido-cab h2 { margin: 0; font: 400 1.75rem/1.1 var(--f-titulo); }
.pedido-scroll { padding: 0 20px 22px; }
.lineas { margin: 0; padding: 0; list-style: none; }
.linea { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px dotted var(--cafe-300); }
.linea-nombre { margin: 0; font: 400 1.15rem/1.2 var(--f-titulo); }
.linea-detalle { margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: var(--cafe-600); }
.linea-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.linea-total { font: 500 1.1rem/1.2 var(--f-titulo); font-variant-numeric: tabular-nums lining-nums; }
.datos { display: grid; gap: 4px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cafe-200); }
.entrega { margin: 0; padding: 0; border: 0; }
.entrega legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 16px; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: var(--borde); border-radius: 999px; background: var(--crema); }
.segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmento span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border-radius: 999px; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.2; cursor: pointer; transition: background-color .2s, color .2s; }
.segmento input:checked + span { background: var(--cafe-700); color: var(--crema); }
.segmento input:focus-visible + span { outline: 3px solid var(--naranja-osc); outline-offset: 2px; }
.pedido-total { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.pedido-total strong { font: 500 1.6rem/1 var(--f-titulo); font-variant-numeric: tabular-nums lining-nums; }
.pedido-aviso { margin: 4px 0 0; font-size: 13.5px; color: var(--cafe-600); }
.pedido-pie .boton { margin-top: 12px; }
.vacio { display: grid; justify-items: center; gap: 6px; padding: 36px 12px 40px; text-align: center; color: var(--cafe-600); }
.vacio p { margin: 0; }
.vacio-marca { width: 56px; background: var(--cafe-200); margin-bottom: 8px; }
.vacio-titulo { font: 400 1.45rem/1.2 var(--f-titulo); color: var(--cafe-800); }
.vacio .boton { margin-top: 14px; }

/* ---------- aparición progresiva al hacer scroll (usa translate, independiente de hover/press) ---------- */

.seccion-cab, .incluye, .bloque-titulo, .grupo, .reserva > * { transition: opacity var(--t-entrada) var(--sale), translate var(--t-entrada) var(--sale); }
.por-aparecer { opacity: 0; translate: 0 18px; }

/* ---------- presentación de marca ---------- */

.intro { display: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 100; height: 100dvh; display: grid; place-items: center;
  touch-action: none; overscroll-behavior: none; cursor: default;
}
/* Dos mitades, como un pan, que se abren al salir. Cerradas deben leerse como UN solo fondo:
   se solapan 2 px (sin rendija subpíxel) y el brillo de ambas se centra en la misma línea de la pantalla,
   así en el solape los dos degradados dan exactamente el mismo color y no aparece costura. */
.intro-mitad { position: absolute; left: 0; right: 0; height: calc(50% + 1px); will-change: transform; }
.intro-mitad--arriba { top: 0; background: radial-gradient(120% 70% at 50% calc(100% - 1px), #5a3622 0%, var(--cafe-800) 62%); }
.intro-mitad--abajo { bottom: 0; background: radial-gradient(120% 70% at 50% 1px, #5a3622 0%, var(--cafe-800) 62%); }
.intro-centro { position: relative; display: grid; justify-items: center; gap: 26px; text-align: center; }
.intro .logo-marca, .intro .logo-nombre, .intro-linea, .intro-lema, .intro-premios { visibility: hidden; }
.intro.lista .logo-marca, .intro.lista .logo-nombre, .intro.lista .intro-linea, .intro.lista .intro-lema, .intro.lista .intro-premios { visibility: visible; }
.intro-linea { width: 56px; height: 2px; border-radius: 1px; background: var(--durazno); transform-origin: 50% 50%; }
.intro-lema { margin: -8px 0 0; padding-inline: 16px; font: 400 clamp(1.7rem, 7.4vw, 2.4rem)/1 var(--f-script); color: var(--durazno-claro); }
.intro-premios { display: flex; gap: 14px; }
.intro-premios .insignia-img { width: 54px; height: 54px; background: var(--durazno); filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .por-aparecer { opacity: 1; translate: none; }
}