/* PALETA — DonPupusas. Cada color está MEDIDO contra el fondo donde se usa;
   ninguno se eligió a ojo.

   La trampa que cierra: el naranja de marca (#FF7A00) con texto blanco da
   2.61:1, cuando lo legible empieza en 4.5:1. Un botón "Pedir" así no se lee
   al sol ni en un teléfono barato — y el naranja anterior (#e8590c, 3.58:1)
   tampoco. Por eso hay DOS naranjas: uno para pintar y otro para leer.
     --marca   #FF7A00  solo decorativo: brasa del comal, degradados. NUNCA texto.
     --brand   #C2410C  todo lo que lleva o es texto (5.18:1 en blanco,
                        4.86:1 sobre crema). Se ve del mismo color, y se lee. */
:root{
  --bg:#fff7e6;          /* crema/masa */
  --card:#fff;
  --ink:#1f1f23;         /* carbón — 15.4:1 sobre crema */
  --muted:#5b6371;       /* 5.68:1; el gris anterior quedaba al borde */
  --line:#eee3cd;
  --marca:#ff7a00;       /* decorativo */
  --marca-clara:#ffb93d;
  --brand:#c2410c;       /* accesible: texto y botones */
  --brand2:#f59e0b;
  --azul:#0052cc;        /* identidad salvadoreña — 6.4:1 sobre crema */
  --ok:#15803d;          /* el verde #22C55E daba 2.14:1 como texto: ilegible */
  --err:#b91c1c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  padding-bottom:96px}
/* EL PIE ABAJO DE LA PANTALLA (Héctor, 17-oct). En una página corta —el negocio
   cerrado, "buscar mi pedido"— el pie quedaba a media pantalla y lo de abajo en
   blanco: se leía como una página cortada. Ahora el contenido (main) estira lo
   que falte y el pie baja al borde; en una página larga no cambia nada.
   ⚠️ En una columna flex, un hijo con margin:auto se ENCOGE a su contenido: por
   eso .wrap lleva width:100% (con border-box es lo mismo que antes en flujo normal).
   100vh primero: el teléfono que no conoce dvh se queda con ese. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
/* Los 96px son para la barra del carrito. Donde no hay carrito (cerrado, buscar,
   el estado del pedido) eran 96px de blanco debajo del pie. */
body:not(:has(#bar)){padding-bottom:0}
.wrap{width:100%;max-width:640px;margin:0 auto;padding:0 16px}
/* El menú CON fotos respira 60px más: es lo que hace falta para que el nombre
   más largo de un menú real entre en UNA línea junto a la foto, el precio, la
   masa y las cantidades. Sin fotos no se toca nada. */
.wrap.ancho{max-width:700px}
/* ── El comal ────────────────────────────────────────────────────────────────
   Antes el encabezado era un degradado naranja. Ahora es una plancha caliente:
   las pupusas abajo, medio recortadas —como si el comal siguiera fuera del
   cuadro— y el vapor subiendo detrás del rótulo.
   Fondo OSCURO a propósito: el humo es blanco y translúcido, sobre claro
   desaparece. Es la misma razón por la que la foto real debe ser oscura.
   Capas: comal(0) · pupusas(1) · vapor(2) · velo(3) · rótulo(4)            */
.top{position:relative;overflow:hidden;color:#fff;text-align:center;
  min-height:190px;display:flex;align-items:flex-start;
  background:linear-gradient(180deg,#1a1410 0%,#241c16 100%)}
.comal{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 78% at 50% 118%, #3a2c21 0%, transparent 62%),
    radial-gradient(88% 56% at 50% 104%, rgba(255,122,0,.34) 0%, transparent 72%)}
.comal .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comal.con-foto .pupusa{display:none}
/* velo: sin él el rótulo no se lee sobre las pupusas */
.top::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,15,12,.78) 0%,rgba(20,15,12,.38) 44%,rgba(20,15,12,0) 72%)}
/* CON FOTO DEL NEGOCIO, el velo se refuerza. Es lo que permite que la foto YA
   NO tenga que ser oscura: una foto clara —un plato blanco con flash— se comía
   el nombre.

   ⚠️ Se probó la alternativa obvia, ponerle contorno o halo a las LETRAS, y
   sale peor: el trazo se dibuja centrado en el borde del glifo, así que a 3px
   sobre una letra de 24px le roba un octavo del ancho y las letras salen
   pastosas; el halo les deja un vaho gris alrededor. Comparadas las cinco
   variantes en pantalla sobre la misma foto clara, la única que deja las letras
   LIMPIAS es oscurecer la foto y no tocar la tipografía. */
.top.con-portada::before{
  background:linear-gradient(180deg,rgba(20,15,12,.80) 0%,rgba(20,15,12,.52) 46%,rgba(20,15,12,.08) 80%)}
.rotulo{position:relative;z-index:4;width:100%;padding:22px 16px 18px}
  /* En la página del estado la marca va CHICA y arriba del número: la grande
     sigue siendo la del negocio, que es de quien es el pedido. */
  .marcaest{display:block;width:112px;margin:0 auto 10px}
  .marcaest img{display:block;width:100%;height:auto}
.top h1{font-size:24px;font-weight:700;line-height:1.2;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.top .muted{color:#fff;opacity:.92;font-size:14px;margin-top:4px;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* Chicas y apoyadas sobre el comal, con brasa visible debajo. A tamaño grande
   parecían papas: la escala es lo que las hace leer como comida. */
.pupusa{position:absolute;bottom:9px;width:23%;aspect-ratio:1.4;border-radius:50%;z-index:1;
  background:radial-gradient(60% 55% at 38% 34%,#e8c88f 0%,#d8ab63 45%,#b8823f 78%,#8a5a28 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.55),inset 0 -3px 6px rgba(0,0,0,.28)}
.pupusa::before,.pupusa::after{content:"";position:absolute;border-radius:50%;background:rgba(70,40,15,.5)}
.pupusa::before{width:22%;aspect-ratio:1.6;top:28%;left:22%}
.pupusa::after{width:14%;aspect-ratio:1.2;top:52%;left:58%}
.p1{left:13%;bottom:7px}  .p2{left:38.5%;bottom:15px;width:25%}  .p3{left:65%;bottom:7px}

/* Vapor: solo transform y opacity — lo mueve la GPU, no el procesador. */
/* bottom:8% los hace nacer SOBRE las pupusas. Antes nacían en el 26% y su
   núcleo caía en la zona del título: parecía un brillo suelto, no vapor. */
.vapor{position:absolute;bottom:8%;width:22%;aspect-ratio:1;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,252,247,.6) 0%,rgba(255,250,244,.26) 42%,transparent 70%);
  filter:blur(9px);opacity:0;will-change:transform,opacity;
  animation:vapor 5.4s var(--d,0s) infinite cubic-bezier(.36,.14,.42,.96)}
@keyframes vapor{
  0%{transform:translate3d(0,0,0) scale(.42);opacity:0}
  18%{opacity:.82}
  60%{opacity:.42}
  100%{transform:translate3d(var(--x,10px),-125%,0) scale(1.55);opacity:0}
}
/* Cada uno nace sobre una pupusa, no en cualquier parte. */
.v1{left:11%;--d:0s;--x:14px}     .v2{left:37%;--d:1.15s;--x:-12px}
.v3{left:63%;--d:2.3s;--x:16px}   .v4{left:24%;--d:3.2s;--x:-7px;width:17%}
.v5{left:50%;--d:4.3s;--x:10px;width:16%}
/* Fuera de pantalla no se anima: no se gasta batería mientras leen el menú. */
.top.quieto .vapor{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .vapor{animation:none;opacity:.3;transform:translate3d(0,-55%,0) scale(1.15)}
}
@media (min-width:560px){ .top{min-height:230px} .rotulo{padding:28px 16px 24px} .top h1{font-size:28px} }
.muted{color:var(--muted)}

.ask{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:16px 0 4px}
.ask label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.askrow{display:flex;gap:8px}
.askrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px;
  font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
.askrow input:focus{outline:2px solid var(--brand2);outline-offset:1px}
.askrow button{background:var(--ink);color:#fff;border:0;border-radius:10px;padding:12px 16px;
  font-size:15px;font-weight:600;cursor:pointer;flex:none}
.askrow button:disabled{opacity:.5}
.hint{margin-top:10px;font-size:14px;line-height:1.5}

/* 🧪 La demo: la pregunta para quien tiene una pupusería. */
.demoaviso{display:flex;flex-direction:column;gap:2px;margin:16px 0 4px;padding:12px 14px;border-radius:14px;
  background:#fff3d6;border:1px solid #f3d38a;color:#5b4a1d;text-decoration:none;font-size:15px;line-height:1.4}
.demoaviso b{color:#1f1f23}
.demoaviso span{color:#c2410c;font-weight:600}
.demoaviso small{color:#5b6371;font-size:13px}

/* ── LA ESPERA DESPUÉS DE "CONFIRMAR" (Héctor, 1-oct-2026) ─────────────────────
   Antes el menú se cambiaba por el "¡Pedido confirmado!" de golpe, como si
   nada hubiera pasado en el medio. Ahora el ícono de Don Pupusas echa vapor
   mientras el pedido viaja: al menos un segundo, o lo que tarde la base.
   Solo transform y opacity: lo mueve la GPU, también en un teléfono viejo. */
/* El ícono, el vapor y el rebote viven en transicion.ts (los usa todo el sitio). */
/* Y el "¡Pedido confirmado!" entra, no aparece. */
main.llega .card{animation:llega .45s cubic-bezier(.2,.8,.2,1) both}
main.llega .big{animation:salta .5s .12s cubic-bezier(.3,1.6,.5,1) both}
@keyframes llega{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes salta{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  main.llega .card,main.llega .big{animation:none}
}

/* "Lo de siempre" (053). Misma caja que "Decime qué se te antoja". */
.hab{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:16px 0 4px;position:relative}
.hab h2{font-size:15px;margin:0 0 4px;padding-right:96px}
.hab h2 .muted{font-weight:400;font-size:13px}
.hab p{margin:0 0 10px;font-size:14px;line-height:1.45}
.habx{position:absolute;top:6px;right:6px;background:none;border:0;color:var(--muted);
  font-size:13px;font-family:inherit;padding:10px;cursor:pointer;min-height:44px}
.habrow{display:flex;flex-wrap:wrap;gap:8px}
.habrow input{flex:1 1 130px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px;
  font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
.habrow input:focus{outline:2px solid var(--brand2);outline-offset:1px}
.habrow button,.habir{background:var(--ink);color:#fff;border:0;border-radius:10px;padding:12px 16px;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;flex:none;min-height:44px}
.habrow button:disabled{opacity:.5}
.habhola{font-weight:700;font-size:16px}
.habgrid{display:grid;gap:10px}
@media (min-width:560px){ .habgrid{grid-template-columns:1fr 1fr} }
.habcard{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fffdf8;
  display:flex;flex-direction:column}
.habcard h3{margin:0 0 6px;font-size:15px}
.habcard p{font-size:14px;margin:0 0 8px}
.habpie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.habpie b{font-size:16px}
.habir{background:var(--brand)}
.habnosoy{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:13px;
  font-family:inherit;padding:12px 0 2px;cursor:pointer}
.hint.ok{color:var(--ok)}
.hint.warn{color:#b45309}
.hint .qtygrid{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.hint .qtyrow{display:flex;gap:6px;align-items:center}
.hint .qtyrow b{flex:0 0 auto;min-width:46px;font-size:13px;font-weight:600;color:var(--ink)}
/* Numeros pegados en fila: si el blanco es chico se erra el toque. 44px de alto
   es el minimo comodo con el pulgar, y a 320px es lo que se puede dar de ancho. */
.hint .qtyrow button{flex:1 1 0;min-width:0;min-height:44px;background:#fff;
  border:1px solid var(--brand);color:var(--brand);border-radius:10px;padding:0;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.hint .qtyrow button:hover{background:var(--brand);color:#fff}
.hint .opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hint .opts button{background:#fff;border:1px solid var(--brand);color:var(--brand);
  border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer}
.hint .opts button:hover{background:var(--brand);color:#fff}

.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;-webkit-overflow-scrolling:touch}
.chip{flex:none;background:var(--card);border:1px solid var(--line);color:var(--ink);
  padding:9px 16px;border-radius:999px;font-size:15px;cursor:pointer}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

.cat{padding:8px 0 4px}
/* Grilla 2x2: nombre | precio arriba, controles abajo ocupando el ancho.
   Todas las tarjetas quedan iguales aunque el nombre ocupe dos lineas. */
.item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0;
  display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:start}
/* Qué lleva el plato. Chico y en gris: es para decidir, no para leerlo todo —
   quien ya sabe qué quiere pasa de largo sin que le estorbe. */
  .idesc{grid-column:1/-1;color:var(--muted);font-size:13.5px;line-height:1.4;margin:2px 0 0}
  .item h3{font-size:16px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.price{color:var(--brand);font-weight:700;white-space:nowrap;text-align:right}
.pick{grid-column:1 / -1;display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* Solo los telefonos MUY angostos apilan. Medido: masa 170px + boton 94px =
   273px, y a 360px hay 300px disponibles — caben. Apilar de mas hacia la
   tarjeta un 50% mas alta (162px vs 110px) y triplicaba el scroll. */
@media (max-width:339px){
  .pick{flex-direction:column;align-items:stretch;gap:8px}
  .masa{width:100%;justify-content:center}
  .masa label{flex:1;justify-content:center}
  .qty{width:100%;margin-left:0}
  .qty button,.qty input{flex:1 1 0;width:auto}
}
/* Pantallas anchas: todo en una sola fila, el precio antes de los controles.

   ⚠️ CADA COSA EN SU CELDA, a mano. Dejándolo automatico, la descripcion —que
   ocupa la fila entera— empujaba los controles a un renglon propio: una tarjeta
   CON descripcion quedaba de tres filas y una SIN descripcion de una, y la
   lista se veia de dos formas distintas segun lo que el negocio hubiera escrito.
   Lo reporto Hector con una captura: cuatro jugos altos y despues los refrescos
   compactos.

   Ahora la descripcion va DEBAJO DEL NOMBRE, en su columna, y el precio y los
   botones se estiran por las dos filas para quedar centrados contra la tarjeta
   entera. La fila de arriba se ve igual tenga o no descripcion. */
@media (min-width:560px){
  .item{grid-template-columns:1fr auto auto;align-items:center;gap:4px 12px}
  .item h3{grid-area:1/1}
  .price{grid-area:1/2/3/3;align-self:center}
  .pick{grid-area:1/3/3/4;justify-content:flex-end;align-self:center}
  .idesc{grid-area:2/1;margin:0}
}
/* ── LA FOTO DE CADA VARIEDAD ────────────────────────────────────────────────
   Opcional: solo sale si el negocio la enciende en Ajustes (fotos_en_menu).
   Se mete como una PRIMERA COLUMNA, y por eso la grilla se redeclara entera en
   los dos anchos: la de arriba coloca cada cosa a mano (ver el comentario de
   la descripcion), asi que agregar una celda sin decir donde va desarma la
   fila — lo mismo que ya paso una vez con los jugos.
   Abajo va la forma de telefono; mas abajo, la de pantalla ancha. */
.item.con-img{grid-template-columns:auto 1fr auto}
.item.con-img .ifoto{grid-area:1/1/3/2}
.item.con-img h3{grid-area:1/2}
.item.con-img .price{grid-area:1/3}
.item.con-img .idesc{grid-area:2/2/3/4;margin:0}
.item.con-img .pick{grid-area:3/1/4/4}
/* En pantalla ancha, TODO EN UNA FILA: igual que una tarjeta sin foto, con la
   imagen como una columna más adelante.

   Lo probé primero en dos filas —nombre arriba, controles abajo— y Héctor lo
   devolvió con dos capturas: la tarjeta se veía el doble de alta y en la
   pantalla entraban la mitad de las variedades.

   Lo que hace que la fila quepa es el ANCHO. Medido con los nombres reales de
   Los Azados: a 640px "Pupusa de frijol con queso" se parte en dos líneas y a
   700px entra entera — por eso un menú con fotos ensancha la página (.ancho).
   La foto chica también ayuda: cada píxel que suelta se lo lleva el nombre. */
@media (min-width:560px){
  .item.con-img{grid-template-columns:auto 1fr auto auto}
  .item.con-img .ifoto{grid-area:1/1/3/2}
  .item.con-img h3{grid-area:1/2}
  .item.con-img .price{grid-area:1/3/3/4}
  .item.con-img .pick{grid-area:1/4/3/5}
  .item.con-img .idesc{grid-area:2/2;margin:0}
}
/* ES UN BOTON, no un adorno: tocarla agrega una.
   52px: lo mas chico que sigue estando arriba del minimo de 44 que necesita un
   dedo. Empece en 72 y la primera prueba en el telefono fue que las tarjetas
   "usan mucho espacio" — a 72 la imagen manda el alto de la tarjeta, y donde
   antes se veian tres variedades se veian dos. */
.ifoto{width:52px;height:52px;padding:0;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:#f3efe8;cursor:pointer;position:relative;display:block;flex:none}
.ifoto img{width:100%;height:100%;object-fit:cover;display:block}
.ifoto:active{transform:scale(.96)}
/* Sin foto propia va el icono de la app, entero y como una foto mas (Hector,
   9-oct). Antes iba el logo grande, apagado y con aire, para que se leyera
   como "aca falta la foto": en 52px no se leia nada. */
/* El mismo ✓ que hacen los botones de cantidad: la confirmacion no puede
   depender de ver la barra de abajo, que en la mitad de la lista queda fuera
   de la vista. */
.ifoto.done::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:var(--ok);color:#fff;font-size:28px;font-weight:700}
@media (prefers-reduced-motion:reduce){ .ifoto:active{transform:none} }
/* Masa: control segmentado. Radios reales ocultos; la etiqueta es la pildora.
   Un toque cambia de masa — antes eran tres (abrir el select, elegir, cerrar). */
.masa{display:inline-flex;background:#f3efe8;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.masa::-webkit-scrollbar{display:none}
.masa input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.masa label{display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;
  min-height:38px;transition:background .12s,color .12s;user-select:none}
.masa label small{font-size:11px;font-weight:600;opacity:.8}
.masa label:active{transform:scale(.97)}
.masa input:checked + label{background:var(--brand);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14)}
/* Foco visible al navegar con teclado, sin marco permanente al tocar. */
.masa input:focus-visible + label{outline:2px solid var(--brand2);outline-offset:2px}
/* Cantidad: 1 2 3 y una cajita para el resto. El numero ES el boton — un toque
   agrega esa cantidad, sin un "Agregar" aparte que habia que tocar N veces. */
/* Medido a 360px: hay 298px y masa+cantidad pedian 304 — por SEIS pixeles se
   envolvia y la tarjeta pasaba de 110 a 164px (con 10 productos, medio metro
   mas de scroll). De ahi los 34/40px: caben con margen. El alto de 44px, que es
   lo que importa para no errar el toque, no se toca. */
.qty{display:flex;gap:4px;align-items:center;flex:none;margin-left:auto}
.qty button,.qty input{min-height:44px;border-radius:10px;font-family:inherit;
  font-size:15px;font-weight:700;padding:0}
.qty button{width:34px;background:var(--brand);color:#fff;border:0;cursor:pointer}
.qty button:active{transform:scale(.97)}
.qty button.done{background:var(--ok)}
.qty input{width:40px;min-width:0;text-align:center;border:1px solid var(--line);
  background:#fff;color:var(--ink)}
.qty input::placeholder{color:#9a8f80;font-weight:600}
.qty input:focus{outline:2px solid var(--brand2);outline-offset:1px}
.qty input.done{border-color:var(--ok);background:#f0fdf4}

/* ── AVISOS DE ERROR, ABAJO Y CON TIEMPO ──────────────────────────────────
   Los mensajes de la cajita se turnaban cada 2.6s en la línea de arriba, y
   Héctor no alcanzó a leerlos: «no pude leerlos completos porque cambiaron más
   rápido». Los ERRORES —lo que el negocio no vende— salen ahora acá abajo,
   duran 12 segundos y se APILAN, así tres variedades inexistentes se leen las
   tres en vez de pisarse.

   Abajo y no arriba porque es donde está el pulgar y donde el cliente ya está
   mirando (la barra del pedido). 86px de separación para no taparla.
   Translúcido con desenfoque: se lee encima sin borrar lo que hay debajo, que
   es justamente el menú donde tiene que elegir otra cosa. */
.toasts{position:fixed;left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom,0px));
  z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 12px;pointer-events:none}
.toast{pointer-events:auto;width:100%;max-width:520px;box-sizing:border-box;
  background:rgba(150,28,28,.90);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:12px 14px;font:600 15px/1.35 inherit;
  box-shadow:0 8px 28px rgba(0,0,0,.28);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);cursor:pointer;
  display:flex;gap:10px;align-items:center;animation:toastIn .22s ease-out}
/* EL AZUL NO ES DECORACION: es la diferencia entre "esto salio mal" y "me
   falta un dato". El rojo de al lado ya significa lo primero, asi que si los
   dos fueran iguales el cliente leeria un problema donde solo hay una
   pregunta. El color solo no alcanza —con sol en la pantalla, o para quien no
   distingue bien los colores— asi que el TEXTO tambien lo dice: empieza por
   "Solo falta". Misma leccion que los pedidos atrasados del tablero. */
.toast.pregunta{background:rgba(23,64,105,.92)}
.toast .cuantas{margin-left:auto;background:rgba(255,255,255,.22);border-radius:20px;
  padding:2px 9px;font-size:13px;flex:none}
.toast.fuera{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
  .toast.fuera{transition:opacity .2s}
}

.cart{position:fixed;left:0;right:0;bottom:0;z-index:20}
.bar{width:100%;border:0;background:var(--ink);color:#fff;font-size:16px;font-weight:600;
  padding:18px 20px;display:flex;gap:10px;align-items:center;cursor:pointer}
.bar .go{margin-left:auto;background:rgba(255,255,255,.16);padding:6px 12px;border-radius:8px;font-size:14px}
.bar[hidden]{display:none}
.panel{background:var(--card);border-top:1px solid var(--line);max-height:82vh;overflow-y:auto;padding:18px 16px 28px}

/* El panel SUBE desde la barra en vez de aparecer de golpe.
   ANIMACIÓN y no transición: el panel se muestra quitándole el atributo
   hidden, o sea pasa de display:none a visible, y una transición NO puede
   arrancar desde display:none — el navegador la descarta. Una animación sí
   corre en cuanto el elemento se dibuja por primera vez. Misma trampa de
   siempre, distinto disfraz.
   Solo transform y opacity: las dos las resuelve el compositor, sin recalcular
   maquetación ni repintar. En un teléfono de gama baja con el menú entero
   arriba, animar la altura sería visiblemente entrecortado.
   14px, no 40: tiene que leerse como "esto salió de la barra de abajo", no
   como una pantalla nueva que se desliza. El movimiento explica de dónde
   viene; pasado de largo, distrae. */
@keyframes subepanel{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.panel{animation:subepanel .26s cubic-bezier(.2,.8,.25,1) both}

/* La barra se hunde apenas al tocarla: el panel tarda un cuarto de segundo en
   llegar y sin esto, en ese ratito, parece que el toque no registró. */
.bar{transition:transform .08s ease}
.bar:active{transform:scale(.985)}

/* Con "reducir movimiento" activado no hay nada de esto — pero el panel
   igual se abre. Sin efecto, no roto. */
@media (prefers-reduced-motion: reduce){
  .panel{animation:none}
  .bar{transition:none}
  .bar:active{transform:none}
}
.panel h2{font-size:19px;margin-bottom:4px}
.prep{font-size:13px;margin-bottom:12px}
#lines{list-style:none;margin-bottom:12px}
#lines li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
#lines .nm{flex:1;min-width:0}
#lines .qty{display:flex;align-items:center;gap:8px}
#lines button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;
  font-size:18px;line-height:1;cursor:pointer;color:var(--ink)}
.totals{padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:14px}
.totals div{display:flex;justify-content:space-between;padding:3px 0}
.totals .grand{font-size:18px;font-weight:700;padding-top:8px}
.totals .falta{color:#b45309;font-weight:600}
/* Desde la mesa (057) */
.mesaaviso{margin:16px 0 4px;padding:12px 14px;border-radius:14px;background:#ecfdf3;border:1px solid #b7e4c7;
  color:#14532d;font-weight:700;font-size:16px;line-height:1.4}
/* Para más tarde (055) */
.abreaviso{margin:16px 0 4px;padding:12px 14px;border-radius:14px;background:#eef4ff;border:1px solid #c9d8f5;
  color:#1e3a8a;font-weight:600;font-size:15px;line-height:1.4}
.paralas{background:#eef4ff;border:1px solid #c9d8f5;color:#1e3a8a;border-radius:10px;padding:8px 12px;
  font-weight:600;display:inline-block}
.cuando select{margin-left:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:16px;
  font-family:inherit;background:#fff;color:var(--ink)}

form label{display:block;margin:12px 0;font-size:14px;font-weight:600}
/* Ubicación: opcional y al lado de la dirección, no en vez de ella. */
/* ── Seguimiento del pedido ─────────────────────────────────────────────── */
.top.mini{min-height:auto;display:block}
.top.mini .rotulo{padding:18px 16px 16px}
.top.mini h1{font-size:22px}
.pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pasos li{display:flex;align-items:center;gap:10px;padding:10px 4px;color:var(--muted);font-size:15px}
.pasos li .ico{filter:grayscale(1);opacity:.45;font-size:19px;width:26px;text-align:center}
.pasos li.hecho{color:var(--ink)}
.pasos li.hecho .ico{filter:none;opacity:1}
/* El paso ACTUAL es lo único que la persona vino a mirar: se marca fuerte. */
.pasos li.ahora{color:var(--brand);font-weight:700;background:#fff3ea;border-radius:10px}
.pasos li.ahora .ico{filter:none;opacity:1}
.eta{margin-top:10px;font-size:13px}
.rescab{font-size:15px;font-weight:700;margin-bottom:4px}
.restot{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.restot .grande{font-size:17px;font-weight:700;padding-top:4px}
.cancelf{margin:0}
.cancelbtn{background:#fff;color:var(--err);border:1px solid var(--err);border-radius:10px;
  padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;min-height:46px;font-family:inherit}
.cancelbtn:hover{background:var(--err);color:#fff}
.avisoya{font-size:14px}
.wa{display:inline-flex;align-items:center;margin-top:12px;background:#fff;color:#128c7e;
  border:1px solid #128c7e;border-radius:10px;padding:11px 16px;min-height:44px;
  font-size:15px;font-weight:600;text-decoration:none}
.guardalo{text-align:center;font-size:13px;margin-top:14px}
.privacidad{margin-top:12px;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.privacidad a{color:var(--brand)}
.geo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 12px}
.geo button{background:#fff;border:1px solid var(--brand);color:var(--brand);border-radius:10px;
  padding:0 14px;min-height:44px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.geo button:disabled{opacity:.6;cursor:default}
#geoOut{font-size:13px;line-height:1.4}
#geoOut.ok{color:var(--ok)}
#geoOut.warn{color:#b45309}
#geoOut .linkish{background:none;border:0;padding:0;min-height:0;color:inherit;font-weight:600;
  text-decoration:underline;font-size:13px;cursor:pointer;font-family:inherit}
form input,form textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;
  padding:12px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
form input:focus,form textarea:focus{outline:2px solid var(--brand2);outline-offset:1px}
.ff{border:1px solid var(--line);border-radius:10px;padding:12px;margin:12px 0}
.ff legend{padding:0 6px;font-size:14px;font-weight:600}
.radio{font-weight:400;margin:6px 0;display:flex;gap:9px;align-items:center}
.radio input{width:auto;margin:0}
.send{width:100%;background:var(--ok);color:#fff;border:0;border-radius:12px;padding:16px;
  font-size:17px;font-weight:700;cursor:pointer;margin-top:8px;min-height:52px}
.send:disabled{opacity:.6;cursor:wait}
.err{color:var(--err);font-size:14px;margin-top:10px;font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 22px;margin:40px 0}
/* LA PORTADA DEL NEGOCIO CON EL TURNO CERRADO.
   Reemplaza al comal dibujado: quien llega a un link cerrado tiene que
   reconocer el lugar, y la foto de SU negocio lo hace mejor que un dibujo
   genérico — para una taquería, además, la pupusa dibujada no dice nada.

   A sangre: los márgenes negativos la llevan hasta el borde de la tarjeta, y
   el radio de arriba acompaña al de la tarjeta (16px menos el borde de 1px).
   2.4:1 es la forma exacta con la que se recorta al subirla (1200x500), así
   que se ve la misma franja que el negocio eligió arrastrando. */
.portadilla{margin:-32px -22px 18px;border-radius:15px 15px 0 0;overflow:hidden;
  aspect-ratio:2.4/1;background:#241c16}
.portadilla img{width:100%;height:100%;object-fit:cover;display:block}
.center{text-align:center}
.big{font-size:52px;margin-bottom:10px}
.card h1{font-size:22px;margin-bottom:10px}
.card p{margin:6px 0}
.again + .again{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.reslist{list-style:none;margin:14px 0;padding:0;text-align:left}
.reslist li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.reslist li:last-child{border-bottom:0}
.reslist small{color:var(--muted)}
.again{display:inline-block;margin-top:18px;background:var(--brand);color:#fff;text-decoration:none;
  padding:13px 22px;border-radius:10px;font-weight:600}
  /* Horas de cada paso, frase de la etapa y conteo. */
  .pasos li{display:flex;align-items:center;gap:9px}
  .pasos .hora{margin-left:auto;font-size:13px;color:var(--muted);
               font-variant-numeric:tabular-nums}
  /* La frase cálida: es para alguien esperando su comida, puede respirar. */
  .frase{margin:12px 0 0;font-size:17px;font-weight:600;color:var(--brand);line-height:1.35}
  .rescab .cuantas{font-weight:600;color:var(--muted);font-size:15px}
  /* ── El efecto de "cayó en la barra" (2026-09-01) ────────────────────────
     Solo transform y opacity: el navegador las mueve en el compositor, sin
     recalcular posiciones ni repintar. Por eso corre suave en un teléfono
     viejo y no cuesta un solo byte de descarga. */
  .vuela{position:fixed;z-index:60;font-size:30px;line-height:1;
         pointer-events:none;              /* nunca se interpone a un toque */
         will-change:transform,opacity;
         transform:translate(-50%,-50%);margin:0}
  /* La barra da un saltito la primera vez que aparece. */
  @keyframes entraBarra{
    0%{transform:translateY(100%)} 60%{transform:translateY(-7px)}
    80%{transform:translateY(3px)} 100%{transform:translateY(0)}
  }
  #bar.recien{animation:entraBarra .55s cubic-bezier(.2,.8,.3,1)}
  /* El cartelito que explica qué es esa barra. */
  .tipbar{position:fixed;left:50%;transform:translateX(-50%);
          bottom:calc(var(--barh,72px) + 14px);z-index:59;
          background:var(--ink);color:#fff;border-radius:999px;
          padding:9px 16px;font-size:14px;font-weight:600;
          box-shadow:0 6px 20px rgba(0,0,0,.22);
          animation:subeTip .35s ease-out;pointer-events:none;max-width:88vw}
  @keyframes subeTip{from{opacity:0;transform:translate(-50%,10px)}
                     to{opacity:1;transform:translate(-50%,0)}}
  .tipbar.ida{opacity:0;transition:opacity .35s ease}
  /* Quien pidió menos movimiento no ve nada volar ni saltar: solo el cartel,
     quieto. Para algunas personas una figura cruzando la pantalla no es
     simpática, es mareo. */
  @media (prefers-reduced-motion: reduce){
    .vuela{display:none}
    #bar.recien{animation:none}
    .tipbar{animation:none}
  }
  /* Buscar un pedido perdido (/mi-pedido). */
  .buscah{font-size:22px;margin:0 0 6px}
  .buscaf label{display:block;font-size:14px;font-weight:600;margin:14px 0 0}
  .buscaf input{width:100%;margin-top:5px;padding:13px;font-size:16px;font-family:inherit;
                border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink)}
  .buscaf input:focus{outline:2px solid var(--brand);outline-offset:1px}
  .buscab{margin-top:18px;width:100%;background:var(--brand);color:#fff;border:0;
          border-radius:12px;padding:15px;font-size:17px;font-weight:700;
          font-family:inherit;cursor:pointer;min-height:54px}
  .hallados{list-style:none;margin:10px 0 0;padding:0}
  .hallados a{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;
              align-items:baseline;padding:13px;border:1px solid var(--line);
              border-radius:12px;margin:0 0 9px;text-decoration:none;color:var(--ink)}
  .hallados a:active{background:#fff9ef}
  .hno{font-weight:800}
  /* El nombre del negocio SIEMPRE, no solo con dos pedidos: quien tiene uno
     igual quiere saber a cuál pupusería le pidió. */
  .hneg{font-weight:600}
  .hmon{font-weight:700}
  .hest{grid-column:2;color:var(--muted);font-size:14px}
  /* Para quien ya pidió y vuelve buscando su pedido. */
/* El teléfono del negocio en la página de turno cerrado. Se ve como lo que es
   —una salida, no un adorno— y el número se puede TOCAR para llamar. */
.llamar{margin:14px 0 0;font-size:16px;line-height:1.5}
.llamar a{display:inline-block;font-weight:700;color:var(--brand);text-decoration:none;
  border-bottom:2px solid currentColor;padding:2px 0}
  .yapedi{text-align:center;color:var(--muted);font-size:14px;
          margin:26px 0 8px;padding:0 12px;line-height:1.5}
  .yapedi a{color:var(--brand);font-weight:600}
  /* Flotante: al final de la página no lo ve nadie. Discreto a propósito —
     blanco con borde, no del color de marca: no debe competir con los botones
     de agregar, que son a lo que la gente viene. */
  /* La vuelta al menú. Discreta pero SIEMPRE visible: en la pantalla de buscar
   y en la del pedido, el logo de arriba lleva a Don Pupusas —que no es donde
   estaba la persona— y no había ninguna otra salida. Quien probó la página se
   quedó ahí sin saber cómo volver. */
/* EL LOGO DEL NEGOCIO en las páginas del cliente.
   El modo de mezcla multiply no es un adorno: ese logo es el de la comanda,
   blanco y negro PURO con fondo blanco —así lo necesita la impresora térmica—
   y sin esto se vería como un rectángulo blanco pegado sobre el color de la
   página. Con multiply el blanco desaparece y queda solo el dibujo. Donde el
   navegador no lo soporte se ve el recuadro: peor, pero no roto. */
.suyo img{mix-blend-mode:multiply}
.marcabus.suyo img,.marcaest.suyo img{width:auto;max-width:230px;max-height:96px;height:auto}
.marcaest.suyo img{max-height:70px}
/* ── LA PORTADA COMO MARCA ───────────────────────────────────────────────────
   2.4:1 es la forma exacta con la que se recorta al subirla (1200x500): así se
   ve la MISMA franja que el negocio eligió arrastrando, y no una parte suya.
   Va recortada a esa forma, no escalada: una portada apaisada metida en la
   caja del logo quedaría de tres centímetros de alto. */
/* El envío sin precio todavía: ámbar y no rojo. No es un error —el pedido
   entró bien— es un dato que falta y que el negocio va a poner. */
.aconf{color:#92400e;font-weight:600}
/* El mismo ámbar en la pantalla de confirmación, pero como recuadro: ahí
   compite con el número del pedido y el total, y un color de texto solo se
   pierde entre los dos. */
.envmodal{position:fixed;inset:0;z-index:60;background:rgba(31,31,35,.55);display:flex;
  align-items:flex-end;justify-content:center;padding:16px}
@media (min-width:560px){.envmodal{align-items:center}}
.envcaja{background:var(--card);border-radius:18px;width:100%;max-width:420px;padding:20px 18px 16px;
  box-shadow:0 14px 44px rgba(0,0,0,.28);text-align:left}
.envcaja h3{font-size:18px;margin:0 0 8px}
.envcaja p{margin:6px 0;line-height:1.45}
.envcaja .envprecio{font-size:21px;font-weight:800;color:var(--ink)}
.envcaja button{display:block;width:100%;font:inherit;font-weight:700;font-size:16px;border-radius:12px;
  padding:14px 16px;margin-top:10px;cursor:pointer}
.envcaja .envsi{background:var(--brand);color:#fff;border:0;margin-top:16px}
.envcaja .envno{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.envioaviso{background:#fef3c7;border:1px solid #fcd34d;border-radius:12px;
  padding:12px 14px;margin:14px 0 0;font-size:14.5px;line-height:1.45;color:#713f12;text-align:left}
.marcabus.banner,.marcaest.banner{width:100%;aspect-ratio:2.4/1;border-radius:14px;
  overflow:hidden;background:#241c16}
.marcabus.banner{max-width:420px;margin:4px auto 14px}
/* En la página del estado el encabezado ya es oscuro: sin el borde claro, una
   portada de noche se funde con el fondo y parece un hueco. */
.marcaest.banner{max-width:260px;margin:0 auto 12px;border:1px solid rgba(255,255,255,.35)}
.marcabus.banner img,.marcaest.banner img{width:100%;height:100%;object-fit:cover;display:block;
  max-width:none;max-height:none;
  /* 🔴 SIN ESTO LA FOTO SE VE CASI NEGRA. El multiply de .suyo está para el
     logo de la comanda: le borra el fondo blanco. Multiplicar una FOTO contra
     el encabezado oscuro la apaga entera — se veía como un rectángulo negro
     con pupusas adentro. Lo delató mirar la página, no una prueba. */
  mix-blend-mode:normal}

.volvermenu{display:inline-block;margin:0 0 14px;font-weight:600;font-size:15px;
  color:var(--brand);text-decoration:none;padding:8px 2px}
.volvermenu:active{opacity:.7}

.fabpedido{position:fixed;right:14px;bottom:16px;z-index:40;
             background:#fff;color:var(--ink);border:1px solid var(--line);
             border-radius:999px;padding:11px 16px;font-size:14px;font-weight:600;
             text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.13);
             display:flex;align-items:center;gap:6px;min-height:44px}
  .fabpedido:active{background:#fff9ef}
  /* Se aparta cuando aparece la barra del carrito. */
  .fabpedido.oculto{opacity:0;transform:translateY(12px);pointer-events:none}
  .fabpedido{transition:opacity .2s ease,transform .2s ease}
  @media (prefers-reduced-motion: reduce){ .fabpedido{transition:none} }

  /* El pie de las páginas del cliente. Discreto a propósito: en la página de un
     negocio la marca es del negocio, y esto solo dice de dónde salió. */
  .piecli{display:flex;flex-direction:column;align-items:center;gap:4px;
          padding:22px 16px 26px;margin:26px 0 0;border-top:1px solid #eee3cd;
          color:#8a8579;font-size:13px;text-align:center;line-height:1.5}
  .piecli img{display:block;opacity:.85}
  .piecli a{color:#8a8579;text-decoration:underline}
  .piecli .dch{font-size:12px;opacity:.85}
  /* ⚠️ NO se le agrega margen inferior por la barra del carrito: el BODY ya
     reserva 96px para ella. Sumarle otro tanto dejaba 192px de blanco después
     del menú — se veía como si la página se hubiera cortado.

     Y con el carrito VACÍO esos 96px tampoco hacen falta: la barra está oculta,
     así que no hay nada que esquivar y el hueco queda debajo del pie, donde se
     lee como un error. Se devuelven en cuanto aparece la barra. No hay salto:
     la barra es fija, no empuja el contenido. */
  body:has(#bar[hidden]) .piecli{margin-bottom:-96px}
  /* El logo de la página de búsqueda: es la única del cliente que NO es de un
     negocio, así que acá la marca sí es nuestra. */
  .marcabus{display:block;width:190px;max-width:58%;margin:4px auto 14px}
  .marcabus img{display:block;width:100%;height:auto}
  /* ES | EN, arriba a la derecha. Trae su propio fondo blanco para leerse
     igual sobre la crema que sobre el comal oscuro. 34px de alto y 44 de
     ancho: es un blanco que se toca con el pulgar, no con la uña. */
  .idiomas{display:flex;justify-content:flex-end;padding:10px 12px 0}
  .idiomas a{display:inline-flex;align-items:center;justify-content:center;
             min-width:44px;min-height:34px;padding:0 10px;font-size:13px;font-weight:700;
             letter-spacing:.04em;color:#5b6371;background:#fff;border:1px solid #eee3cd;
             text-decoration:none}
  .idiomas a:first-child{border-radius:999px 0 0 999px}
  .idiomas a:last-child{border-radius:0 999px 999px 0;border-left:0}
  /* El elegido en naranja de marca y no en negro: sobre el comal oscuro un
     negro se funde con el fondo y parece elegido el OTRO, el blanco. */
  .idiomas a[aria-current]{background:#c2410c;border-color:#c2410c;color:#fff}
  /* Con el comal arriba, flota SOBRE él en vez de dejar una franja crema
     encima del encabezado; y el rótulo baja lo justo para que un nombre de
     negocio largo no quede debajo del botón. */
  body:has(> header.top) > .idiomas{position:absolute;top:10px;right:12px;z-index:20;padding:0}
  body:has(> header.top) .top .rotulo{padding-top:52px}
  /* ── Pagar con bitcoin: el código arriba de todo en la página del pedido ── */
  .pagobtc h2{font-size:19px;margin:0 0 4px}
  .pagomonto{font-size:17px;margin:2px 0 10px}
  .pagoqr{display:block;width:300px;max-width:100%;margin:6px auto 4px;background:#fff;border-radius:12px;
          padding:8px;border:1px solid #eee3cd}
  .pagoqr img{display:block;width:100%;height:auto}
  .pagobtc .again{display:block;width:100%;margin-top:10px;text-align:center;border:0;font:inherit;
          font-weight:600;cursor:pointer}
  .pagobtc .again.sec{background:#fff;color:#c2410c;border:1px solid #c2410c}
  .pagobtc form{margin:0}
  .pagobtc .linkish{background:none;border:0;color:#5b6371;text-decoration:underline;font:inherit;
          font-size:14px;margin-top:12px;cursor:pointer;padding:6px}
  .pagoacc{display:grid;gap:0}
  .pagobtc.pagado{border:2px solid #15803d;background:#f0fdf4}
  .pagook{font-size:19px;font-weight:700;color:#15803d;margin:0}
  .ff.pago .hint{margin:6px 0 0;font-size:13.5px}

/* ── La espera: el ícono con vapor (también la usa "Confirmar pedido") ── */
.espera{position:fixed;inset:0;z-index:100;background:#fff7e6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;opacity:0;transition:opacity .2s ease}
.espera.ve{opacity:1}
.espera.sevan{opacity:0;pointer-events:none}
.espera p{font-weight:600;color:#5b6371;font-size:15px;margin:0}
.esp-icono{position:relative;width:104px;height:104px}
.esp-icono img{position:relative;z-index:1;display:block;width:104px;height:104px;border-radius:24px;
  box-shadow:0 10px 28px rgba(194,65,12,.28);transform-origin:50% 85%;
  animation:rebota 1.15s cubic-bezier(.45,0,.55,1) infinite}
/* Baja y vuelve, cada vez menos — y NUNCA pasa de 1. El origen va abajo, como
   algo que se apoya en el comal: se aplasta hacia el piso, no hacia el centro. */
@keyframes rebota{
  0%{transform:scale(1)}
  22%{transform:scale(.82)}
  44%{transform:scale(1)}
  60%{transform:scale(.91)}
  76%{transform:scale(1)}
  88%{transform:scale(.97)}
  100%{transform:scale(1)}
}
/* El vapor sale por arriba, encima de las rayitas que ya trae el dibujo. Tono
   tostado: blanco no se ve sobre la crema, y gris parecía una mancha. */
.humo{position:absolute;z-index:2;top:2px;width:36px;height:36px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(234,138,60,.55) 0%,rgba(245,170,90,.22) 45%,transparent 70%);
  filter:blur(4px);opacity:0;animation:humo 2.1s infinite cubic-bezier(.36,.14,.42,.96)}
.humo.h1{left:24px;--x:-10px;animation-delay:0s}
.humo.h2{left:34px;--x:4px;animation-delay:.7s}
.humo.h3{left:44px;--x:12px;animation-delay:1.4s}
@keyframes humo{
  0%{transform:translate3d(0,0,0) scale(.45);opacity:0}
  25%{opacity:1}
  100%{transform:translate3d(var(--x),-96px,0) scale(1.9);opacity:0}
}

/* ── Al ABRIR el link de un negocio (Héctor, 3-oct-2026) ──
   Quien llega desde WhatsApp no tocó nada nuestro, así que no vio el ícono:
   el menú aparecía de golpe. Ahora el ícono rebota un segundo con el nombre
   del negocio y se desvanece solo. SOLO CSS: viene en el HTML y se va sin
   esperar a ningún script — si el JS fallara, igual no se queda tapando. */
.espera.llegada{opacity:1;animation:llegada-sale .35s ease 1s forwards}
.espera.llegada p{color:#1f1f23;font-size:17px;font-weight:700;text-align:center;padding:0 24px}
@keyframes llegada-sale{to{opacity:0;visibility:hidden}}

/* ── La página que llega entra suave, en vez de aparecer ──
   Transiciones entre documentos: Chrome/Android y Safari 18.2+. Donde no
   existen, la página cambia como siempre (sin romper nada). La foto de la
   página vieja es la del ícono, así que el ícono se desvanece en la nueva. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sale .18s ease both}
::view-transition-new(root){animation:vt-entra .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:reduce){
  .humo{display:none}
  .esp-icono img{animation:none}
  .espera{transition:none}
  .espera.llegada{display:none}
  @view-transition{navigation:none}
}