/* Kiosko vertical 1080×1920. Todo mide en rem, y el rem sale del ancho de la
   pantalla: el mismo diseño en un tótem de 1080 y en una tablet de 720. */
:root {
  --fondo: #0f0d0c;
  --superficie: #1c1917;
  --superficie-2: #292421;
  --borde: #3a332e;
  --texto: #fff7f0;
  --texto-suave: #c9bdb4;
  --acento: #ff7a3d;
  --sobre-acento: #1a0e08;
  --bien: #5fd38d;
  --error: #ff6b6b;
  --radio: 1.6rem;
  --sombra: 0 1.2rem 3rem rgb(0 0 0 / .45);
  --sombra-tarjeta: 0 .6rem 1.6rem rgb(0 0 0 / .35);
  --acento-texto: var(--acento);
  --letra: 'Poppins', system-ui, sans-serif;
  color-scheme: dark;
  font-size: min(calc(100vw / 54), calc(100vh / 70));
}
@media (orientation: landscape) { :root { font-size: min(calc(100vw / 80), calc(100vh / 50)); } }
/* Tema claro (panel › Marca, o el botón ☀️/🌙 del cliente). El acento como letra,
   más oscuro: el color del local sobre blanco no se leería. */
:root[data-tema="claro"] {
  --fondo: #f4f1ee;
  --superficie: #ffffff;
  --superficie-2: #efeae6;
  --borde: #ded6cf;
  --texto: #1c1714;
  --texto-suave: #665a52;
  --bien: #1e7f46;
  --error: #c62828;
  --sombra: 0 .8rem 2rem rgb(60 40 20 / .12);
  --sombra-tarjeta: 0 .2rem .8rem rgb(60 40 20 / .10);
  --acento-texto: color-mix(in oklab, var(--acento) 62%, #000);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 1.3rem;
  line-height: 1.35;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:focus-visible { outline: .3rem solid var(--acento); outline-offset: .3rem; }
h1, h2, p { margin: 0; }

/* Pantallas: una a la vez, la que diga body[data-pantalla]. */
.pantalla { display: none; position: fixed; inset: 0; flex-direction: column; }
body[data-pantalla="cargando"] #cargando, body[data-pantalla="reposo"] #reposo,
body[data-pantalla="donde"] #donde, body[data-pantalla="carta"] #carta,
body[data-pantalla="resumen"] #resumen, body[data-pantalla="pago"] #pago,
body[data-pantalla="sugerencias"] #sugerencias, body[data-pantalla="mesa"] #mesa, body[data-pantalla="grande"] #grande,
body[data-pantalla="ticket"] #ticket, body[data-pantalla="correo"] #correo,
body[data-pantalla="datafono"] #datafono, body[data-pantalla="hecho"] #hecho {
  display: flex; animation: entrar .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes entrar { from { opacity: 0; transform: translateY(2rem); } }

.boton-gigante {
  background: var(--acento); color: var(--sobre-acento);
  font-weight: 600; font-size: 1.8rem; padding: 1.4rem 3rem;
  border-radius: 99rem; box-shadow: 0 .8rem 2.4rem color-mix(in srgb, var(--acento) 35%, transparent);
  transition: transform .12s;
}
.boton-gigante:active, .opcion:active, .tarjeta:active, .boton-pedido:active { transform: scale(.96); }
.boton-gigante:disabled { opacity: .5; }
.boton-texto { color: var(--texto-suave); font-size: 1.3rem; padding: 1rem 1.2rem; min-height: 4rem; }
.titulo-pantalla { font-size: 3rem; font-weight: 600; line-height: 1.1; text-align: center; }
.subtitulo { color: var(--texto-suave); text-align: center; font-size: 1.6rem; margin-top: .6rem; }
.subtitulo strong { color: var(--texto); }

/* Cargando */
#cargando { align-items: center; justify-content: center; gap: 2rem; color: var(--texto-suave); }
.cargador { width: 5rem; height: 5rem; border-radius: 50%; border: .5rem solid var(--superficie-2); border-top-color: var(--acento); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }

/* ---------- Reposo: lo que se ve mientras nadie toca ---------- */
#reposo { justify-content: space-between; cursor: pointer; --texto: #fff7f0; --texto-suave: #e3d8cf; color: var(--texto); }
.reposo-fondo { position: absolute; inset: 0; overflow: hidden; }
.reposo-fondo > img, .reposo-fondo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.reposo-fondo > .visible { opacity: 1; }
.reposo-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 13 12 / .75) 0%, rgb(15 13 12 / 0) 30%, rgb(15 13 12 / 0) 45%, rgb(15 13 12 / .92) 78%); }
.reposo-marca { position: relative; padding: 5rem 3rem 0; text-align: center; }
.reposo-marca img { max-width: 60%; max-height: 10rem; }
#nombre-local { font-size: 2.2rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.reposo-llamada { position: relative; padding: 0 3rem 7rem; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.reposo-titulo { font-size: 5.4rem; font-weight: 600; line-height: 1.02; letter-spacing: -.02em; }
.reposo-titulo em { font-style: normal; color: var(--acento); }
#empezar { font-size: 2.2rem; padding: 1.8rem 4.4rem; animation: latir 2.2s ease-in-out infinite; }
@keyframes latir { 50% { transform: scale(1.06); box-shadow: 0 .8rem 4rem color-mix(in srgb, var(--acento) 60%, transparent); } }
.reposo-nota { color: var(--texto-suave); font-size: 1.4rem; }

/* El mosaico de reposo cuando el local aún no ha subido vídeos ni fotos. */
.mosaico { position: absolute; inset: -10% -5%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; transform: rotate(-8deg); }
.mosaico-columna { display: flex; flex-direction: column; gap: 1.4rem; animation: subir 40s linear infinite; }
.mosaico-columna:nth-child(2) { animation-duration: 55s; animation-direction: reverse; }
.mosaico-columna:nth-child(3) { animation-duration: 47s; }
.mosaico .arte { aspect-ratio: 1; border-radius: var(--radio); }
@keyframes subir { to { transform: translateY(-50%); } }

/* ---------- Arte de relleno: emoji sobre degradado ---------- */
.arte {
  container-type: inline-size;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(circle at 30% 22%, hsl(var(--h) 95% 66% / .95), transparent 55%),
    radial-gradient(circle at 80% 90%, hsl(calc(var(--h) + 35) 85% 45% / .9), transparent 60%),
    hsl(calc(var(--h) + 15) 60% 22%);
}
.arte span { font-size: 52cqw; line-height: 1; filter: drop-shadow(0 4cqw 5cqw rgb(0 0 0 / .45)); transform: rotate(-6deg); }
.medio { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--superficie-2); }

/* ---------- Dónde y pago: dos opciones grandes ---------- */
#donde, #pago, #ticket { align-items: center; justify-content: center; gap: 4rem; padding: 3rem; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: 100%; max-width: 50rem; }
.opcion {
  background: var(--superficie); border: .2rem solid var(--borde); border-radius: 2.4rem;
  padding: 3.4rem 1.6rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  box-shadow: var(--sombra); transition: transform .12s, border-color .2s;
}
.opcion:hover { border-color: var(--acento); }
.opcion-emoji { font-size: 7rem; line-height: 1; }
.opcion-titulo { font-size: 2rem; font-weight: 600; }
.opcion-nota { font-size: 1.2rem; color: var(--texto-suave); text-align: center; }
.cabecera-pantalla { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; }
.cabecera-pantalla .boton-texto { align-self: flex-start; }
.aviso-impresora { color: var(--texto-suave); border: .15rem dashed currentColor; border-radius: 1rem; padding: 1rem 1.4rem; font-size: 1.2rem; max-width: 50rem; text-align: center; }
.aviso-error { background: rgb(255 107 107 / .12); color: var(--error); border: .15rem solid var(--error); border-radius: 1rem; padding: 1.2rem 1.6rem; font-size: 1.3rem; max-width: 50rem; text-align: center; }

/* ---------- Carta ---------- */
#carta { background: var(--fondo); }
.barra-superior { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.4rem; border-bottom: .1rem solid var(--borde); }
.barra-local { font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 1.1rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiqueta-donde { background: var(--superficie-2); border-radius: 99rem; padding: .7rem 1.4rem; font-size: 1.15rem; white-space: nowrap; }
.carta-cuerpo { flex: 1; display: grid; grid-template-columns: 11rem 1fr; min-height: 0; }

.rail { overflow-y: auto; padding: 1rem .6rem 12rem; display: flex; flex-direction: column; gap: .6rem; border-right: .1rem solid var(--borde); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail button { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .8rem .3rem; border-radius: 1.4rem; font-size: 1.05rem; line-height: 1.15; text-align: center; color: var(--texto-suave); transition: background .2s, color .2s; }
.rail .rail-icono { width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; box-shadow: 0 .4rem 1rem rgb(0 0 0 / .4); transition: transform .2s; }
.rail button[aria-current="true"] { background: var(--superficie-2); color: var(--texto); font-weight: 600; }
.rail button[aria-current="true"] .rail-icono { transform: scale(1.08); box-shadow: 0 0 0 .3rem var(--acento); }

.lista { overflow-y: auto; padding: 1.4rem 1.4rem 14rem; scroll-behavior: smooth; scrollbar-width: none; }
.lista::-webkit-scrollbar { display: none; }
.seccion { margin-bottom: 3rem; scroll-margin-top: 1rem; }
.portada-categoria { position: relative; height: 15rem; border-radius: 2rem; overflow: hidden; margin-bottom: 1.4rem; box-shadow: var(--sombra); }
.portada-categoria .arte span { font-size: 22cqw; transform: rotate(-8deg) translateX(28cqw); }
.portada-categoria::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .7), transparent 70%); }
.portada-texto { position: absolute; left: 2rem; bottom: 1.6rem; right: 40%; z-index: 1; }
.portada-texto h2 { font-size: 2.8rem; font-weight: 600; line-height: 1.05; }
.portada-texto p { font-size: 1.2rem; color: #fff; opacity: .85; margin-top: .4rem; }

.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (orientation: landscape) { .rejilla { grid-template-columns: repeat(4, 1fr); } }
.tarjeta { position: relative; background: var(--superficie); border-radius: var(--radio); overflow: hidden; text-align: left; display: flex; flex-direction: column; box-shadow: var(--sombra-tarjeta); transition: transform .12s; }
.tarjeta-medio { aspect-ratio: 1 / .82; position: relative; }
.tarjeta-medio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.tarjeta-texto { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.tarjeta-nombre { font-weight: 600; font-size: 1.35rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.24rem; }
.tarjeta-precio { font-size: 1.4rem; color: var(--acento-texto); font-weight: 600; margin-top: auto; }
.tarjeta-precio small { font-size: .95rem; color: var(--texto-suave); font-weight: 400; }
.tarjeta-mas { position: absolute; right: .9rem; bottom: .9rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-size: 2.4rem; font-weight: 600; display: grid; place-items: center; line-height: 1; box-shadow: 0 .4rem 1rem rgb(0 0 0 / .4); }
.tarjeta-lleva { position: absolute; top: .8rem; right: .8rem; background: var(--acento); color: var(--sobre-acento); font-weight: 600; border-radius: 99rem; padding: .2rem .9rem; font-size: 1.2rem; box-shadow: 0 .3rem .8rem rgb(0 0 0 / .4); }
.destacados .rejilla { grid-template-columns: 1fr; }
.destacados .tarjeta { min-height: 13rem; }
.destacados .tarjeta-medio { aspect-ratio: auto; width: 45%; }
.destacados .tarjeta-texto { justify-content: center; padding-right: 6rem; }
.destacados .tarjeta-nombre { font-size: 1.7rem; }

.barra-pedido { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.4rem 1.6rem; background: linear-gradient(transparent, var(--fondo) 35%); pointer-events: none; }
.boton-pedido { pointer-events: auto; width: 100%; display: flex; align-items: center; gap: 1.2rem; background: var(--acento); color: var(--sobre-acento); border-radius: 99rem; padding: 1.1rem 1.4rem 1.1rem 1.1rem; font-size: 1.6rem; font-weight: 600; box-shadow: 0 .8rem 2.4rem rgb(0 0 0 / .5); transition: transform .12s; }
.boton-pedido .contador { background: var(--sobre-acento); color: var(--acento); border-radius: 99rem; min-width: 3.4rem; height: 3.4rem; display: grid; place-items: center; padding: 0 .8rem; }
.boton-pedido-texto { flex: 1; text-align: left; }
.salta { animation: saltar .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes saltar { 40% { transform: scale(1.06); } }

/* ---------- Hoja de producto ---------- */
dialog { border: 0; padding: 0; color: var(--texto); background: var(--superficie); }
dialog::backdrop { background: rgb(0 0 0 / .7); backdrop-filter: blur(.4rem); }
.hoja { width: 100%; max-width: 100%; height: fit-content; max-height: 90vh; margin: auto 0 0; border-radius: 2.8rem 2.8rem 0 0; display: none; flex-direction: column; overflow: hidden; }
.hoja[open] { display: flex; animation: hoja .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes hoja { from { transform: translateY(100%); } }
.cerrar { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 2; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgb(0 0 0 / .55); font-size: 1.6rem; backdrop-filter: blur(.4rem); }
.ficha-medio { height: 40vh; flex-shrink: 0; position: relative; }
.ficha-medio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ficha-medio .arte span { font-size: 38cqw; }
.ficha-cuerpo { flex: 1; overflow-y: auto; padding: 2rem 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.ficha-cuerpo h2 { font-size: 2.6rem; font-weight: 600; line-height: 1.1; }
.ficha-descripcion { color: var(--texto-suave); font-size: 1.35rem; }
.alergenos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.alergenos li { display: flex; align-items: center; gap: .5rem; background: var(--superficie-2); border-radius: 99rem; padding: .3rem .9rem .3rem .3rem; font-size: 1.05rem; }
.alergenos img { width: 2.2rem; height: 2.2rem; }
.alergenos .sin-icono { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--borde); display: grid; place-items: center; font-size: .9rem; }
.formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; }
.formatos button { background: var(--superficie-2); border: .2rem solid transparent; border-radius: 1.2rem; padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; font-size: 1.3rem; }
.formatos button strong { color: var(--acento-texto); }
.formatos button[aria-checked="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
.ficha-pie { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 2.4rem 2rem; border-top: .1rem solid var(--borde); }
.ficha-pie .boton-gigante { flex: 1; }
.paso { display: flex; align-items: center; background: var(--superficie-2); border-radius: 99rem; }
.paso button { width: 4.8rem; height: 4.8rem; font-size: 2.2rem; border-radius: 50%; }
.paso output { min-width: 2.6rem; text-align: center; font-size: 1.8rem; font-weight: 600; }

/* ---------- Resumen ---------- */
#resumen { padding: 1.4rem 2rem 0; }
.lineas { list-style: none; margin: 1.6rem 0 0; padding: 0 0 2rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.linea { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1.2rem; align-items: center; background: var(--superficie); border-radius: var(--radio); padding: .9rem; }
.linea-medio { width: 7rem; height: 7rem; border-radius: 1.2rem; overflow: hidden; position: relative; }
.linea-medio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.linea-nombre { font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.linea-formato { color: var(--texto-suave); font-size: 1.1rem; }
.linea-importe { color: var(--acento-texto); font-weight: 600; margin-top: .3rem; }
.linea-importe s { color: var(--texto-suave); font-weight: 400; }
.linea-promo { color: var(--error); font-weight: 600; font-size: 1rem; margin-top: .2rem; }
.nombre-opcion .escala { display: block; color: var(--texto-suave); font-size: .8rem; font-weight: 400; }
.linea .paso button { width: 4rem; height: 4rem; font-size: 1.8rem; }
.pie-pantalla { border-top: .1rem solid var(--borde); padding: 1.6rem 0 2.4rem; display: flex; flex-direction: column; gap: 1.4rem; }
.total-fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.6rem; }
.total-fila strong { font-size: 2.8rem; }

/* ---------- Datáfono ---------- */
#datafono { align-items: center; justify-content: center; gap: 2.4rem; padding: 3rem; text-align: center; }
.datafono-dibujo { position: relative; width: 18rem; height: 18rem; display: grid; place-items: center; }
.datafono-tarjeta { font-size: 9rem; animation: acercar 1.8s ease-in-out infinite; }
@keyframes acercar { 50% { transform: translateY(-1.2rem) rotate(-8deg); } }
.ondas, .ondas::before { position: absolute; inset: 0; border-radius: 50%; border: .3rem solid var(--acento); animation: onda 1.8s ease-out infinite; content: ''; }
.ondas::before { animation-delay: .9s; }
@keyframes onda { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.datafono-total { font-size: 4rem; font-weight: 600; color: var(--acento-texto); }
.datafono-estado { font-size: 2rem; max-width: 24ch; text-align: center; color: var(--texto-suave, inherit); }
.datafono-prueba { font-size: 1.5rem; font-weight: 700; padding: .5rem 1.25rem; border-radius: 99px; background: #ffd23f; color: #1a1300; }

/* ---------- Hecho ---------- */
#hecho { align-items: center; justify-content: center; gap: 1.2rem; padding: 3rem; text-align: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 60%), var(--fondo); }
.hecho-gracias { font-size: 4.4rem; font-weight: 600; }
.hecho-etiqueta { color: var(--texto-suave); font-size: 1.6rem; margin-top: 2rem; }
.hecho-numero { font-size: 14rem; font-weight: 600; line-height: 1; color: var(--acento-texto); letter-spacing: -.03em; animation: aparecer .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes aparecer { from { transform: scale(.4); opacity: 0; } }
.hecho-mensaje { font-size: 1.7rem; max-width: 40rem; margin-bottom: 3rem; }
.hecho-cuenta { color: var(--texto-suave); font-size: 1.2rem; }

/* ---------- ¿Sigues ahí? ---------- */
.aviso { border-radius: 2.4rem; padding: 3rem; max-width: 44rem; text-align: center; box-shadow: var(--sombra); }
.aviso[open] { display: flex; flex-direction: column; gap: 1.6rem; align-items: center; }
.aviso h2 { font-size: 2.6rem; }
.aviso p { color: var(--texto-suave); font-size: 1.4rem; }

.volando { position: fixed; z-index: 99; border-radius: 50%; overflow: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* La tarjeta son dos botones hermanos: abrir la ficha y «+» (un botón no puede ir dentro de otro). */
.tarjeta-abrir { display: flex; flex-direction: column; flex: 1; width: 100%; text-align: left; padding: 0; }
.destacados .tarjeta-abrir { flex-direction: row; }
.titulo-seccion { font-size: 2.2rem; font-weight: 600; margin: .4rem 0 1.2rem; }
.rail-icono { display: block; }
.rail-icono > *, .portada-categoria > :first-child { width: 100%; height: 100%; }
.portada-categoria > :first-child { position: absolute; inset: 0; }
/* El «+» en la esquina de la foto, no encima del nombre. */
.tarjeta { container-type: inline-size; }
.tarjeta-mas { top: calc(100cqw / 1.22 - 5.3rem); bottom: auto; }
.destacados .tarjeta-mas { top: auto; bottom: .9rem; }
.texto-seccion { color: var(--texto-suave); font-size: 1.2rem; margin: -.6rem 0 1.2rem; }

#cargando-texto { font-size: 1.8rem; color: var(--texto); text-align: center; max-width: 36rem; }
.cargando-personal { font-size: 1.1rem; color: var(--texto-suave); text-align: center; max-width: 40rem; padding: 0 2rem; }

/* ---------- Añadidos y notas en la ficha ---------- */
.grupos { display: flex; flex-direction: column; gap: 1.6rem; }
.grupo-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }
.grupo-cabeza h3 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.grupo-regla { font-size: 1.05rem; color: var(--texto-suave); white-space: nowrap; }
.grupo-regla.obligatorio { color: var(--acento-texto); }
.opciones-grupo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.opcion-anadido { background: var(--superficie-2); border: .2rem solid transparent; border-radius: .9rem; padding: .5rem .8rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .15rem; font-size: 1.05rem; line-height: 1.2; text-align: left; min-height: 3.6rem; }
.opcion-anadido[aria-pressed="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.opcion-anadido .mas-precio { color: var(--acento-texto); font-weight: 600; white-space: nowrap; font-size: .95rem; }
.opcion-contador { background: var(--superficie-2); border-radius: .9rem; padding: .5rem .7rem; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-size: 1.05rem; line-height: 1.2; min-height: 3.6rem; }
.opcion-contador.puesto { outline: .2rem solid var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.opcion-contador .paso { align-self: stretch; justify-content: space-between; }
.opcion-contador .mas-precio { white-space: nowrap; }
.opcion-contador .paso button { width: 3rem; height: 3rem; font-size: 1.5rem; }
.opcion-contador .paso output { min-width: 2rem; font-size: 1.4rem; }
.notas { display: flex; flex-direction: column; gap: .8rem; }
.notas h3 { margin: 0; font-size: 1.5rem; }
.notas-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.notas-chips button { background: var(--superficie-2); border: .2rem solid transparent; border-radius: 99rem; padding: .5rem 1rem; font-size: 1.05rem; }
.notas-chips button[aria-pressed="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.notas textarea { font: inherit; font-size: 1.2rem; color: var(--texto); background: var(--superficie-2); border: .15rem solid var(--borde); border-radius: 1.2rem; padding: 1rem; resize: none; user-select: text; -webkit-user-select: text; }
.linea-detalle { color: var(--texto-suave); font-size: 1.05rem; line-height: 1.3; margin-top: .2rem; }
#anadir:disabled { background: var(--superficie-2); color: var(--texto-suave); box-shadow: none; }

/* ---------- Botones con foto del local (panel › Marca) ---------- */
.opcion-foto { display: block; width: 12rem; height: 12rem; object-fit: cover; border-radius: 1.6rem; box-shadow: 0 .4rem 1.2rem rgb(0 0 0 / .45); }

/* ---------- Categorías arriba (con foto, o solo el nombre) ---------- */
body[data-disposicion^="superior"] .carta-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
body[data-disposicion^="superior"] .rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: .8rem 1rem; border-right: 0; border-bottom: .1rem solid var(--borde); }
body[data-disposicion^="superior"] .rail button { flex: 0 0 auto; width: 9rem; }
body[data-disposicion="superior-texto"] .rail { gap: 0; padding: 0 .6rem; }
body[data-disposicion="superior-texto"] .rail .rail-icono { display: none; }
body[data-disposicion="superior-texto"] .rail button { width: auto; border-radius: 0; padding: 1.3rem 1.4rem 1.1rem; font-size: 1.4rem; white-space: nowrap; border-bottom: .35rem solid transparent; }
body[data-disposicion="superior-texto"] .rail button[aria-current="true"] { background: none; color: var(--texto); font-weight: 700; border-bottom-color: var(--acento); }

/* ---------- Tablet en horizontal ----------
   Lo que en vertical va apilado, aquí va al lado: en la ficha, la foto a la
   izquierda y las opciones con «Añadir» a la derecha, a toda la altura (apilado
   solo se veían dos filas de opciones). */
@media (orientation: landscape) {
  .hoja[open] { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: minmax(0, 1fr) auto; height: 92vh; }
  .ficha-medio { grid-row: 1 / 3; height: auto; }
  .ficha-cuerpo { grid-column: 2; min-height: 0; }
  .ficha-pie { grid-column: 2; }
  .cerrar { right: auto; left: 1.4rem; }   /* sobre la foto, no encima de las opciones */
  .portada-categoria { height: 9rem; }
  /* La barra del pedido, al lado de las categorías y no encima. */
  body:not([data-disposicion^="superior"]) .barra-pedido { left: 11rem; }
}

/* ---------- Antes de pagar: «¿Te apetece algo más?» ---------- */
#sugerencias { padding: 1.4rem 2rem 0; }
/* ---------- ¿Lo hacemos grande? (al pagar): que apetezca ----------
   Tarjetas grandes que se tocan enteras: al ponerla, la foto crece con rebote,
   salta el sello «XL» y todo se pone del color del local. «Todo grande» late. */
#grande { padding: 1.4rem 2rem 0; }
#grande .titulo-pantalla { font-size: 3.6rem; }
.subtitulo-grande { color: var(--acento-texto); font-size: 1.6rem; font-weight: 600; text-align: center; }
/* Centradas y grandes: dos por fila (una sola, también grande). */
.rejilla-sugerencias.rejilla-grande { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2rem; }
.tarjeta-grande { width: clamp(18rem, 46%, 40rem); padding: 0; border: .35rem solid transparent; transition: transform .12s, border-color .25s, box-shadow .25s; }
.tarjeta-grande .tarjeta-medio { aspect-ratio: 1 / .85; max-height: 36vh; overflow: hidden; background: var(--superficie-2); }
.tarjeta-grande .tarjeta-medio > :first-child { transform: scale(.88); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.tarjeta-grande .tarjeta-texto { padding: 1.2rem 1.4rem 1.4rem; gap: 1rem; }
#grande .tarjeta-nombre { font-size: 1.8rem; font-weight: 600; text-align: center; min-height: 0; }
.tarjeta-grande[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--acento) 30%, transparent), var(--sombra-tarjeta); }
.tarjeta-grande[aria-pressed="true"] .tarjeta-medio > :first-child { transform: scale(1.08); }
.tarjeta-medio > .sello-grande {
  inset: 1rem 1rem auto auto; width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: 2.3rem;
  display: grid; place-items: center; box-shadow: 0 .4rem 1rem rgb(0 0 0 / .35);
  transform: scale(.75) rotate(-12deg); opacity: .85; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s;
}
.tarjeta-grande[aria-pressed="true"] .sello-grande { transform: scale(1.15) rotate(-12deg); opacity: 1; }
.grande-cta { display: block; margin-top: auto; text-align: center; background: var(--superficie-2); border-radius: 99rem; padding: 1.1rem 1rem; font-size: 1.8rem; font-weight: 700; transition: background .25s, color .25s; }
.grande-cta strong { color: var(--acento-texto); white-space: nowrap; }
.tarjeta-grande[aria-pressed="true"] .grande-cta { background: var(--acento); color: var(--sobre-acento); }
.tarjeta-grande[aria-pressed="true"] .grande-cta strong { color: inherit; }
#grande .pie-pantalla { display: grid; gap: 1rem; }
#todo-grande { font-size: 2rem; animation: latir 1.6s ease-in-out infinite; }
#seguir-grande { background: var(--superficie-2); color: var(--texto); box-shadow: none; font-size: 1.5rem; }
#seguir-grande.principal { background: var(--acento); color: var(--sobre-acento); font-size: 1.8rem; }
@keyframes latir { 50% { transform: scale(1.03); } }
/* Tarjetas de ancho fijo y centradas: a 3 columnas «1fr» en una pantalla ancha la
   foto salía enorme y el precio quedaba cortado por abajo. Filas a su altura
   entera (si no, con 6 se aplastaban para caber) y, si no caben, se desliza. */
.rejilla-sugerencias { flex: 1; overflow-y: auto; align-content: start; margin-top: 1.6rem; padding-bottom: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 19rem)); grid-auto-rows: max-content; justify-content: center; }
.rejilla-sugerencias .tarjeta-medio { max-height: 30vh; }
#sugerencias .pie-pantalla .boton-gigante { width: 100%; }

/* ---------- Personal: PIN y menú ---------- */
.personal { min-width: 32rem; }
.personal-pin, .personal-menu { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; width: 100%; }
.pin-puntos { font-size: 2.6rem; letter-spacing: .5rem; min-height: 3.4rem; }
.teclado { display: grid; grid-template-columns: repeat(3, 6.4rem); gap: .8rem; }
.tecla { height: 6.4rem; border-radius: 1.6rem; background: var(--superficie-2); font-size: 2.2rem; font-weight: 600; }
.tecla-ok { background: var(--acento); color: var(--sobre-acento); }
.personal-menu .boton-gigante { width: 100%; }
.modo-personal { position: fixed; top: 1rem; right: 1rem; z-index: 10; background: var(--error); color: #1a0606; font-weight: 600; border-radius: 99rem; padding: .8rem 1.4rem; font-size: 1.2rem; }

/* ---------- La foto de la tarjeta vuela hasta la ficha ----------
   Una copia de la foto se mueve por encima; mientras, la hoja no sube: aparece
   fundida (fondo, velo y texto) y la foto es la que se mueve. */
.foto-vuelo { position: fixed; z-index: 1; margin: 0; overflow: hidden; pointer-events: none; }
body > .foto-vuelo { z-index: 100; }
.hoja.foto-entrando[open] { animation: fondo-hoja .3s ease-out both; }
.hoja.foto-entrando[open]::backdrop { animation: fundido .3s ease-out both; }
.hoja.foto-entrando[open] > :not(.ficha-medio, .foto-vuelo) { animation: fundido .3s .12s ease-out both; }
@keyframes fondo-hoja { from { background-color: transparent; } }
@keyframes fundido { from { opacity: 0; } }

/* Alérgenos en la tarjeta: solo los iconos (el nombre, en la ficha). Libre la
   esquina del «+». */
.tarjeta-alergenos { gap: .3rem; padding-right: 4.8rem; }
.tarjeta-alergenos img, .tarjeta-alergenos .sin-icono { width: 1.9rem; height: 1.9rem; }
.tarjeta-alergenos .sin-icono { font-size: .8rem; }

/* ---------- Etiquetas de producto («Picante», «Nuevo»…) ---------- */
.etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }
.tarjeta-medio .etiquetas { position: absolute; inset: .7rem 4rem auto .7rem; width: auto; height: auto; z-index: 1; pointer-events: none; }
.etiqueta { display: inline-flex; align-items: center; gap: .35rem; background: var(--acento); color: var(--sobre-acento); font-weight: 600; font-size: 1.05rem; line-height: 1; padding: .35rem .75rem; border-radius: 99rem; box-shadow: 0 .3rem .8rem rgb(0 0 0 / .4); white-space: nowrap; }
.etiqueta img { height: 1.6rem; width: auto; max-width: 4rem; object-fit: contain; margin: -.2rem 0; }
#ficha-etiquetas .etiqueta { font-size: 1.3rem; padding: .45rem 1rem; }
#ficha-etiquetas .etiqueta img { height: 2rem; }

/* ---------- A la mesa: el número del soporte ---------- */
#mesa { padding: 1.4rem 2rem 0; }
.mesa-cuerpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 1.6rem; }
.mesa-numero { min-width: 16rem; min-height: 8rem; padding: 0 2rem; border-radius: 2rem; border: .3rem solid var(--acento); display: grid; place-items: center; font-size: 6rem; font-weight: 700; line-height: 1; }
.teclado-mesa { grid-template-columns: repeat(3, 8rem); }
.teclado-mesa .tecla { height: 7rem; font-size: 2.8rem; }
.teclado-mesa .tecla:last-child { grid-column: 2; }
#mesa .pie-pantalla .boton-gigante { width: 100%; }
#mesa .pie-pantalla .boton-texto { align-self: center; font-size: 1.5rem; }
/* En horizontal no cabe todo apilado: el número al lado del teclado. En TODA
   pantalla tumbada (antes solo hasta 900 px de alto, y en una de 1010 se apilaba
   y el teclado pisaba el título y «Tráemelo»): aquí el rem va con el alto. */
@media (orientation: landscape) {
  .mesa-cuerpo { flex-direction: row; gap: 4rem; }
  .teclado-mesa .tecla { height: 4.4rem; }
  #mesa .pie-pantalla { padding: 1.2rem 0 1.4rem; gap: .6rem; }
}

/* ---------- El ticket: imprimirlo, por correo o nada ---------- */
.opciones-ticket { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-width: 72rem; }
#correo { align-items: center; gap: 2.4rem; padding: 3rem; }
.form-correo { display: flex; flex-direction: column; gap: 1.6rem; width: 100%; max-width: 56rem; }
.campo-correo { font: inherit; font-size: 2.4rem; padding: 1.6rem 2rem; border-radius: 1.6rem; border: .25rem solid var(--borde); background: var(--superficie); color: var(--texto); width: 100%; }
.campo-correo:focus { outline: none; border-color: var(--acento); }

/* ---------- Tema: el botón ☀️/🌙 del cliente ---------- */
.barra-derecha { display: flex; align-items: center; gap: .8rem; }
.boton-tema { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--superficie-2); font-size: 1.9rem; display: grid; place-items: center; line-height: 1; }

/* ---------- Estilo «de cadena» (panel › Marca) ----------
   Como los tótems de las grandes cadenas: todo liso, la lista de categorías a la
   izquierda con su icono pequeño y el nombre, el título de la categoría arriba,
   las fotos enteras (no recortadas) sobre el fondo de la tarjeta y una barra
   fija abajo con el pedido. */
body[data-estilo="cadena"] #carta { background: var(--superficie); }
body[data-estilo="cadena"] .lista { padding: 1rem 1.4rem 12rem; }
body[data-estilo="cadena"]:not([data-disposicion^="superior"]) .carta-cuerpo { grid-template-columns: 15rem 1fr; }
body[data-estilo="cadena"]:not([data-disposicion^="superior"]) .rail { gap: .2rem; padding: .8rem 0 12rem; background: var(--fondo); }
body[data-estilo="cadena"]:not([data-disposicion^="superior"]) .rail button { flex-direction: row; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 0; text-align: left; font-size: 1.1rem; border-left: .4rem solid transparent; }
body[data-estilo="cadena"]:not([data-disposicion^="superior"]) .rail .rail-icono { width: 3.8rem; height: 3.8rem; flex-shrink: 0; border-radius: .9rem; box-shadow: none; }
body[data-estilo="cadena"]:not([data-disposicion^="superior"]) .rail button[aria-current="true"] { background: var(--superficie); border-left-color: var(--acento); }
body[data-estilo="cadena"]:not([data-disposicion^="superior"]) .rail button[aria-current="true"] .rail-icono { transform: none; box-shadow: none; }
/* La cabecera de cada categoría: su nombre, centrado, sin la foto grande. */
body[data-estilo="cadena"] .portada-categoria { height: auto; box-shadow: none; border-radius: 0; overflow: visible; margin: 1rem 0 1.4rem; }
body[data-estilo="cadena"] .portada-categoria > :first-child, body[data-estilo="cadena"] .portada-categoria::after { display: none; }
body[data-estilo="cadena"] .portada-texto { position: static; text-align: center; }
body[data-estilo="cadena"] .portada-texto h2, body[data-estilo="cadena"] .titulo-seccion { font-size: 2.8rem; font-weight: 700; text-align: center; }
body[data-estilo="cadena"] .portada-texto p, body[data-estilo="cadena"] .texto-seccion { color: var(--texto-suave); opacity: 1; text-align: center; }
/* La rejilla: tres por fila (cuatro en horizontal), tarjetas lisas con borde fino. */
body[data-estilo="cadena"] .rejilla, body[data-estilo="cadena"] .destacados .rejilla { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (orientation: landscape) { body[data-estilo="cadena"] .rejilla, body[data-estilo="cadena"] .destacados .rejilla { grid-template-columns: repeat(4, 1fr); } }
body[data-estilo="cadena"] .tarjeta { box-shadow: none; border: .1rem solid var(--borde); border-radius: 1.2rem; background: var(--superficie); min-height: 0; }
body[data-estilo="cadena"] .destacados .tarjeta-abrir { flex-direction: column; }
body[data-estilo="cadena"] .destacados .tarjeta-medio { aspect-ratio: 1 / .82; width: auto; }
body[data-estilo="cadena"] .destacados .tarjeta-texto { padding-right: 1rem; }
body[data-estilo="cadena"] .destacados .tarjeta-mas { top: calc(100cqw / 1.22 - 4.3rem); bottom: auto; }
body[data-estilo="cadena"] .tarjeta-medio .medio { object-fit: contain; padding: 8%; background: var(--superficie); }
body[data-estilo="cadena"] .tarjeta-texto { align-items: center; text-align: center; padding: .4rem .8rem 1rem; }
body[data-estilo="cadena"] .tarjeta-nombre, body[data-estilo="cadena"] .destacados .tarjeta-nombre { font-size: 1.15rem; font-weight: 500; min-height: 2.8rem; }
body[data-estilo="cadena"] .tarjeta-precio { margin-top: .2rem; font-size: 1.2rem; }
body[data-estilo="cadena"] .tarjeta-mas { width: 3.4rem; height: 3.4rem; font-size: 1.9rem; top: calc(100cqw / 1.22 - 4.3rem); box-shadow: none; }
body[data-estilo="cadena"] .tarjeta-alergenos { justify-content: center; padding-right: 0; }
/* Abajo, una barra fija con el pedido. */
body[data-estilo="cadena"] .barra-pedido { background: var(--superficie); border-top: .1rem solid var(--borde); padding: 1rem 1.4rem 1.2rem; }
body[data-estilo="cadena"] .boton-pedido { border-radius: 1.2rem; box-shadow: none; }
/* Tres por fila: las etiquetas, más pequeñas y sin salirse de la tarjeta. */
body[data-estilo="cadena"] .tarjeta-medio .etiquetas { inset: .5rem .5rem auto .5rem; gap: .3rem; }
body[data-estilo="cadena"] .tarjeta-medio .etiqueta { font-size: .85rem; padding: .25rem .55rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Idioma: las banderas del reposo y el menú del botón de la carta ---------- */
.idiomas { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.idioma { display: inline-flex; align-items: center; gap: .7rem; padding: .45rem 1.2rem .45rem .45rem; border-radius: 99rem; background: rgb(0 0 0 / .4); color: var(--texto); font-size: 1.25rem; border: .15rem solid transparent; }
.idioma[aria-pressed="true"] { border-color: var(--acento); font-weight: 600; }
/* La bandera en un círculo, con la abreviatura encima. */
.idioma-bandera, #cambiar-idioma { background-size: cover; background-position: center; color: #fff; font-weight: 800; letter-spacing: .03em; text-shadow: 0 .1rem .3rem rgb(0 0 0 / .9), 0 0 .2rem rgb(0 0 0 / .8); box-shadow: inset 0 0 0 .15rem rgb(255 255 255 / .6); }
.idioma-bandera { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
#cambiar-idioma { font-size: 1.3rem; }
.idiomas-grandes { flex-direction: column; align-items: stretch; min-width: 28rem; }
.idiomas-grandes .idioma { background: var(--superficie-2); font-size: 1.6rem; padding: 1.1rem 1.6rem; border-radius: 1.4rem; }

/* ---------- Ficha apretada (apretarFicha en kiosko.js) ----------
   Todas las opciones a la vista, sin desplazarse dentro de la ficha: si no
   caben, se aprieta por escalones, solo los que hagan falta. Un producto
   sencillo sigue con la foto grande. */
.hoja.apretada-1 .ficha-medio { height: 24vh; }
.hoja.apretada-1 .ficha-cuerpo { padding: 1.4rem 2rem; gap: .8rem; }
.hoja.apretada-1 .ficha-cuerpo h2 { font-size: 2.1rem; }
.hoja.apretada-1 .ficha-descripcion { font-size: 1.15rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hoja.apretada-1 .alergenos li { font-size: 0; padding: .2rem; gap: 0; }   /* solo el icono: el nombre sigue ahí para el lector */
.hoja.apretada-1 .alergenos .sin-icono { font-size: .9rem; }
.hoja.apretada-1 .grupos { gap: 1rem; }
.hoja.apretada-1 .grupo-cabeza { margin-bottom: .4rem; }
.hoja.apretada-2 .opciones-grupo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.hoja.apretada-2 .opcion-anadido, .hoja.apretada-2 .opcion-contador { min-height: 2.9rem; padding: .35rem .6rem; font-size: .95rem; }
.hoja.apretada-2 .opcion-contador .paso button { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
.hoja.apretada-2 .opcion-contador .paso output { font-size: 1.15rem; }
.hoja.apretada-3 .ficha-medio { height: 13vh; }
.hoja.apretada-3 .ficha-descripcion { -webkit-line-clamp: 1; }
.hoja.apretada-3 .opciones-grupo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hoja.apretada-3 .opcion-contador .paso button { width: 2.1rem; height: 2.1rem; }
.hoja.apretada-3 .opcion-contador .paso output { min-width: 1.4rem; }
/* El nombre del grupo a la izquierda de sus opciones, no encima. */
.hoja.apretada-3 .grupo { display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; align-items: start; }
.hoja.apretada-3 .grupo-cabeza { flex-direction: column; gap: .1rem; margin: .3rem 0 0; }
.hoja.apretada-3 .grupo-regla { white-space: normal; }
@media (orientation: landscape) {
  .hoja.apretada-1[open] { grid-template-columns: 32% 1fr; }
  .hoja.apretada-1 .ficha-medio, .hoja.apretada-3 .ficha-medio { height: auto; }
  /* Lo más cargado: sin foto (a ese tamaño ya no se veía) y las opciones a
     todo lo ancho; el contador con el precio y − / + en una sola fila. */
  .hoja.apretada-3[open] { grid-template-columns: 1fr; height: 98vh; max-height: 98vh; }
  .hoja.apretada-3 .ficha-medio { display: none; }
  .hoja.apretada-3 .ficha-cuerpo, .hoja.apretada-3 .ficha-pie { grid-column: 1; }
  .hoja.apretada-3 .cerrar { left: auto; right: 1.4rem; }
  .hoja.apretada-3 .ficha-cuerpo h2 { padding-right: 5rem; }
  .hoja.apretada-3 .opciones-grupo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hoja.apretada-3 .opcion-contador { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .3rem; }
  .hoja.apretada-3 .opcion-contador .nombre-opcion { grid-column: 1 / 3; }
  .hoja.apretada-3 .opcion-contador .paso { justify-self: end; background: none; }
  .hoja.apretada-3 .ficha-pie { padding: 1rem 2rem 1.2rem; }
}