/* ===== Estructura de la app ===== */
:root { --w-app: min(560px, 46vw); }

.app {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--c-fondo); color: var(--c-texto);
  transition: background-color var(--d-medio) var(--ease-enfasis), color var(--d-medio) var(--ease-enfasis);
}
.pager {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.pager::-webkit-scrollbar { display: none; }
.pager.arrastrando { scroll-snap-type: none; }

.mundo { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; background: var(--c-fondo); color: var(--c-texto); }
.mundo__scroll {
  height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  margin-right: var(--banda); scrollbar-width: none;
  padding: 64px 16px calc(108px + env(safe-area-inset-bottom));
}
.mundo__scroll::-webkit-scrollbar { display: none; }
.mundo__titulo {
  font: 700 var(--t-titulo-mundo) / .8 var(--f-display); text-transform: uppercase; letter-spacing: -.03em;
  white-space: nowrap; margin: 14px 0 0 -3px;
}
[data-mundo="amp"] .mundo__titulo { font-size: calc(var(--t-titulo-mundo) * 1.9); line-height: .72; }
[data-mundo="mex"] .mundo__titulo { font-size: calc(var(--t-titulo-mundo) * 1.9); line-height: .78; color: var(--c-ambar); }
.mundo__sub { font: 600 12px / 1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 6px; color: var(--c-texto-suave); }
.seccion {
  font: 700 26px / 1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  margin: 30px 0 4px; padding-top: 14px; border-top: 3px solid var(--c-texto);
}

/* Banda lateral: asoma el mundo siguiente y se toca para ir */
.banda {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--banda); z-index: 5;
  display: grid; place-items: center; background: var(--c-negro); color: var(--c-ambar);
  border-left: 1px solid rgba(254, 227, 180, .16);
}
.banda span { writing-mode: vertical-rl; font: 700 30px / 1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.banda:active { background: #1c1510; }

/* ===== Cabecera flotante ===== */
.cabecera {
  position: absolute; z-index: 20; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: calc(var(--banda) + 10px);
  display: flex; justify-content: space-between; gap: 8px; pointer-events: none;
}
.chip-estado, .chip-pedido {
  pointer-events: auto; height: 36px; padding: 0 14px; border-radius: var(--r-pildora);
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap;
  background: var(--c-texto); color: var(--c-fondo);
  font: 700 12px / 1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--d-medio), color var(--d-medio);
}
.chip-estado { pointer-events: none; }
.chip-estado__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-estado__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rojo); flex: none; }
.chip-estado--abierto .chip-estado__punto { background: #6fd36f; }
.chip-pedido { min-height: 44px; margin-top: -4px; transition: transform var(--d-micro) var(--ease-salida), background-color var(--d-medio), color var(--d-medio); }
.chip-pedido:active { transform: scale(.97); }
.chip-pedido__n { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; background: var(--c-ambar); color: var(--c-negro); font-size: 12px; }

/* ===== Dock inferior con el sello que viaja ===== */
.dock {
  position: absolute; z-index: 30; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  height: 68px; border-radius: var(--r-pildora);
  background: var(--c-texto); color: var(--c-fondo); box-shadow: var(--el-flotante);
  transition: background-color var(--d-medio), color var(--d-medio), transform var(--d-largo) var(--ease-salida);
}
.dock__etiquetas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.dock__etq { font: 700 15px / 1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: inherit; height: 100%; }
.dock__etq:nth-child(2) { font-size: 28px; letter-spacing: 0; }
.dock__sello {
  position: absolute; left: 0; top: 6px; width: 56px; height: 56px; border-radius: 50%;
  touch-action: none; cursor: grab; will-change: transform; z-index: 2;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .4));
}
.dock__sello img { width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.dock__sello--agarrado { cursor: grabbing; scale: 1.12; transition: scale var(--d-micro) var(--ease-salida); }

/* ===== Cartel (foto protagonista, precio enorme) ===== */
.cartel {
  position: relative; aspect-ratio: 1 / 1.1; margin: 22px -16px; overflow: hidden;
  background: #1a120c; color: var(--c-crema);
}
.cartel__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--d-largo) var(--ease-salida); }
.cartel__foto.lista { opacity: 1; }
.cartel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 9, 7, 0) 34%, rgba(11, 9, 7, .92) 100%); pointer-events: none; }
.cartel__abrir { position: absolute; inset: 0; z-index: 2; }
.cartel__abrir:active { background: rgba(0, 0, 0, .12); }
.cartel__texto { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; pointer-events: none; }
.cartel__texto .accion { pointer-events: auto; }
.cartel__nombre { font: 700 var(--t-cartel) / .88 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; }
.cartel__desc { font-size: 13.5px; line-height: 1.4; color: var(--c-crema-suave); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartel__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.precio { font: 700 22px / 1 var(--f-display); letter-spacing: .01em; }
.precio--grande { font-size: var(--t-precio); }

/* Cartel tipográfico (productos sin foto): rayas y estrella del logo sobre el color del mundo */
.cartel--tipo { aspect-ratio: 4 / 3.3; background: var(--c-superficie); border-block: 3px solid var(--c-texto); }
.cartel--tipo::after { display: none; }
.cartel--tipo .cartel__nombre { color: var(--c-acento); }
.cartel--tipo .cartel__desc { color: var(--c-texto-suave); }
.cartel--tipo { color: var(--c-texto); }
.cartel__rayas { position: absolute; z-index: 1; left: 0; right: 0; top: 18px; display: flex; align-items: center; gap: 12px; padding: 0 16px; color: var(--c-ambar); }
.cartel__rayas::before, .cartel__rayas::after { content: ""; flex: 1; height: 10px; background: repeating-linear-gradient(180deg, currentColor 0 1.5px, transparent 1.5px 4px); }

/* ===== Fila editorial ===== */
.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1.5px solid var(--c-linea); align-items: start; }
.fila__abrir { text-align: left; min-height: 44px; transition: opacity var(--d-micro); }
.fila__abrir:active { opacity: .6; }
.fila__nombre { font: 700 21px / 1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.fila__desc { font-size: 13px; line-height: 1.38; color: var(--c-texto-suave); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ===== Control de cantidad ===== */
.accion { display: inline-flex; }
.accion__btn {
  min-width: 44px; height: 44px; border-radius: var(--r-pildora); background: var(--c-acento); color: var(--c-sobre-acento);
  font: 700 24px / 1 var(--f-display); display: inline-grid; place-items: center;
  transition: transform var(--d-micro) var(--ease-salida);
}
.accion__btn:active { transform: scale(.94); }
.accion__btn--agregar:not(:only-child) { padding: 0 20px; }
.cartel .accion__btn--agregar { padding: 0 22px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.accion--cantidad { align-items: center; background: var(--c-acento); color: var(--c-sobre-acento); border-radius: var(--r-pildora); }
.accion--cantidad .accion__btn { background: transparent; color: inherit; min-width: 40px; }
.accion__n { min-width: 22px; text-align: center; font: 700 18px var(--f-display); }
.cartel .accion__btn, .cartel .accion--cantidad { background: var(--c-crema); color: var(--c-negro); }
.cartel .accion--cantidad .accion__btn { background: transparent; }
.cartel--tipo .accion__btn, .cartel--tipo .accion--cantidad { background: var(--c-acento); color: var(--c-sobre-acento); }
.cartel--tipo .accion--cantidad .accion__btn { background: transparent; }

/* ===== Cierre de la muestra ===== */
.cierre { margin-top: 36px; padding: 22px 20px; border: 1.5px solid var(--c-linea); border-radius: var(--r-medio); background: var(--c-superficie); }
.cierre__kicker { font: 700 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ambar); }
.cierre__titulo { font: 700 30px / 1 var(--f-display); text-transform: uppercase; margin: 8px 0 12px; }
.cierre__lista { display: grid; gap: 8px; font-size: 14.5px; color: var(--c-texto-suave); }
.cierre__lista li { padding-left: 18px; position: relative; }
.cierre__lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--c-ambar); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cierre__pie { font-size: 12.5px; color: var(--c-texto-suave); margin-top: 16px; }

/* ===== Capas: ficha y pedido ===== */
.capa { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--c-fondo); color: var(--c-texto); will-change: transform; }
.ficha__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ficha__media { position: relative; width: 100%; aspect-ratio: var(--ratio, 1.2); min-height: 280px; max-height: 58dvh; background: var(--c-superficie); overflow: hidden; touch-action: none; }
.ficha__fondo { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(26px) brightness(.72) saturate(1.25); }
.ficha__foto { position: relative; width: 100%; height: 100%; object-fit: contain; }
.ficha__sello { position: absolute; right: -70px; bottom: -70px; width: 300px; height: 300px; border-radius: 50%; opacity: .95; }
.ficha__asa { position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 44px; height: 5px; border-radius: 9px; background: rgba(254, 227, 180, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ficha__cerrar, .pedido__cerrar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--c-negro); color: var(--c-crema);
  font: 400 30px / 1 var(--f-display); display: grid; place-items: center;
}
.ficha__cerrar { position: absolute; z-index: 6; top: calc(18px + env(safe-area-inset-top)); left: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.ficha__cuerpo { padding: 20px 20px 28px; }
.ficha__cat { font: 700 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--c-texto-suave); }
.ficha__nombre { font: 700 calc(var(--t-cartel) * 1.05) / .9 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; margin-top: 6px; }
.ficha__precio { font: 700 var(--t-precio) / 1 var(--f-display); color: var(--c-acento); margin-top: 10px; }
[data-tema="burguer"] .ficha__precio, .ficha:not([data-tema="mex"]) .ficha__precio { color: var(--c-texto); }
.ficha__desc { margin-top: 14px; line-height: 1.55; }
.ficha__nota { margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--c-acento); background: var(--c-superficie); font-size: 14px; }
.grupo { margin-top: 24px; }
.grupo__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 3px solid var(--c-texto); }
.grupo__nombre { font: 700 22px / 1 var(--f-display); text-transform: uppercase; }
.grupo__pista { font: 700 11px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--c-texto-suave); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--c-texto); border-radius: var(--r-pildora); font: 600 15px var(--f-texto);
  transition: background-color var(--d-micro), color var(--d-micro), transform var(--d-micro) var(--ease-salida), opacity var(--d-corto);
}
.chip:active { transform: scale(.96); }
.chip--on { background: var(--c-texto); color: var(--c-fondo); }
.chip--tope { opacity: .38; }
.chip__extra { font-weight: 700; font-size: 13px; opacity: .8; }
.ficha__pie, .pedido__pie {
  display: flex; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1.5px solid var(--c-linea); background: var(--c-fondo);
}
.ficha__agregar {
  flex: 1; min-height: 56px; border-radius: var(--r-pildora); background: var(--c-acento); color: var(--c-sobre-acento);
  font: 700 18px var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: transform var(--d-micro) var(--ease-salida), opacity var(--d-corto);
}
.ficha__agregar:active { transform: scale(.98); }
.ficha__agregar[aria-disabled="true"] { opacity: .55; }

/* Pedido */
.pedido__cab { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 16px 10px; border-bottom: 3px solid var(--c-texto); }
.pedido__titulo { font: 700 38px / 1 var(--f-display); text-transform: uppercase; }
.pedido__cuerpo { flex: 1; overflow-y: auto; padding: 8px 16px 24px; overscroll-behavior: contain; }
.vacio { text-align: center; padding: 56px 12px; }
.vacio__titulo { font: 700 30px / 1 var(--f-display); text-transform: uppercase; }
.vacio__texto { margin: 12px auto 0; max-width: 28ch; color: var(--c-texto-suave); }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1.5px solid var(--c-linea); }
.linea__nombre { font: 700 20px / 1.05 var(--f-display); text-transform: uppercase; }
.linea__ops { font-size: 13px; color: var(--c-texto-suave); margin-top: 4px; }
.linea__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 20px; padding: 4px; border: 2px solid var(--c-texto); border-radius: var(--r-pildora); }
.segmento__op { min-height: 44px; border-radius: var(--r-pildora); font: 700 14px var(--f-display); letter-spacing: .1em; text-transform: uppercase; transition: background-color var(--d-corto), color var(--d-corto); }
.segmento__op--on { background: var(--c-texto); color: var(--c-fondo); }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; }
.total__etq { font: 700 14px var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.total__valor { font: 700 44px / 1 var(--f-display); }
.previa { margin-top: 22px; padding: 14px; border-radius: var(--r-medio); background: var(--c-negro); color: var(--c-crema); }
.previa__etq { font: 700 11px / 1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ambar); }
.previa__texto { font: 13px / 1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; margin-top: 10px; overflow-wrap: anywhere; }
.previa__nota { font-size: 12.5px; color: var(--c-crema-suave); margin-top: 12px; }
.boton { flex: 1; min-height: 52px; border-radius: var(--r-pildora); font: 700 16px var(--f-display); letter-spacing: .08em; text-transform: uppercase; transition: transform var(--d-micro) var(--ease-salida); }
.boton:active { transform: scale(.98); }
.boton--lleno { background: var(--c-texto); color: var(--c-fondo); }
.boton--borde { border: 2px solid var(--c-texto); flex: 0 0 auto; padding: 0 20px; }

/* ===== Avisos y vuelo ===== */
.aviso {
  position: fixed; z-index: 250; left: 50%; top: calc(60px + env(safe-area-inset-top)); width: max-content; max-width: min(90vw, 420px);
  translate: -50% -20px; opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: var(--r-pildora); background: var(--c-negro); color: var(--c-crema); border: 1.5px solid var(--c-ambar);
  font: 700 14px / 1.2 var(--f-display); letter-spacing: .04em; text-align: center;
  transition: opacity var(--d-corto) var(--ease-salida), translate var(--d-medio) var(--ease-salida);
}
.aviso--on { opacity: 1; translate: -50% 0; }
.vuelo { position: fixed; z-index: 300; width: 28px; height: 28px; border-radius: 50%; background: var(--c-ambar); border: 3px solid var(--c-negro); pointer-events: none; }

/* ===== Escritorio: composición propia ===== */
.escenario { display: none; }
@media (min-width: 1000px) {
  .app { left: auto; width: var(--w-app); box-shadow: -1px 0 0 rgba(254, 227, 180, .12); }
  .capa { right: var(--w-app); }
  .cabecera { left: 14px; }
  .escenario {
    display: flex; flex-direction: column; justify-content: center; position: fixed; inset: 0 var(--w-app) 0 0;
    padding: 6vh 6vw; background: var(--c-negro); color: var(--c-crema); overflow: hidden;
    background-image: repeating-linear-gradient(180deg, rgba(254, 227, 180, .06) 0 2px, transparent 2px 9px);
  }
  .escenario__sello { width: min(30vw, 340px); aspect-ratio: 1; border-radius: 50%; margin-bottom: 4vh; }
  .escenario__titulo { font: 700 clamp(56px, 8vw, 120px) / .85 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; }
  .escenario__texto { max-width: 34ch; margin-top: 18px; color: var(--c-crema-suave); font-size: 18px; }
  .escenario__datos { margin-top: 28px; display: grid; gap: 6px; font: 600 14px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ambar); }
  .escenario__datos a { text-underline-offset: 4px; }
  .escenario__pie { position: absolute; left: 6vw; bottom: 3vh; font-size: 12.5px; color: var(--c-crema-suave); }
  .ficha__asa { display: none; }
}