/* Deli Market — estilos comunes (tienda y panel). Verde oliva, crema y un toque dorado, como su marca. */
:root {
  --oliva: #4a5340;
  --oliva-2: #5d6a4f;
  --oliva-3: #8a957a;
  --musgo: #343b2d;
  --papel: #f7f4ee;
  --crema: #efe9dc;
  --arena: #e2dacb;
  --linea: #ddd5c4;
  --cafe: #5b4a3a;
  --oro: #b08f52;
  --oro-2: #d9c08a;
  --tinta: #26291f;
  --tenue: #75786b;
  --rojo: #a9472f;
  --ok: #4f7a45;
  --r: 18px;
  --r-s: 12px;
  --sombra: 0 1px 2px rgba(38, 41, 31, .06), 0 8px 24px -12px rgba(38, 41, 31, .18);
  --sombra-alta: 0 -1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -16px rgba(38, 41, 31, .35);
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --firma: "Allura", "Brush Script MT", cursive;
  --out: cubic-bezier(.22, 1, .36, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --ancho: 560px;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 16px/1.45 var(--sans); color: var(--tinta); background: var(--papel);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 700px) {
  body { background: var(--crema) url("/img/fondo.svg") center/420px repeat fixed; }
  .app { box-shadow: 0 0 0 1px var(--linea), 0 30px 80px -40px rgba(38, 41, 31, .45); }
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 8px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.ic { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic.s { width: 18px; height: 18px; }
.ic.xs { width: 15px; height: 15px; }
.ic.l { width: 28px; height: 28px; }

.app { max-width: var(--ancho); margin: 0 auto; min-height: 100dvh; background: var(--papel); position: relative; padding-bottom: 120px; overflow-x: clip; }

/* ── cabecera ── */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 16px 10px; background: rgba(247, 244, 238, .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.top.borde { box-shadow: 0 1px 0 var(--linea); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.sello { width: 40px; height: 40px; border-radius: 50%; background: var(--oliva); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 2px var(--papel), 0 0 0 3px var(--oro-2); }
.sello svg { width: 26px; height: 26px; }
.marca b { display: block; font: 400 30px/0.9 var(--firma); color: var(--oliva); letter-spacing: .01em; white-space: nowrap; }
.marca small { display: block; font: 500 10px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); margin-top: 3px; }
.top .espacio { flex: 1; }
.btn-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--oliva); background: var(--crema); transition: transform .15s var(--out), background .2s; }
.btn-ic:active { transform: scale(.94); }
.btn-ic .punto { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 2px var(--crema); }

/* ── selector delivery / pick-up ── */
.modo { margin: 6px 16px 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--crema); box-shadow: inset 0 0 0 1px var(--linea); }
.modo .pastilla { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--oliva); box-shadow: 0 6px 16px -8px rgba(52, 59, 45, .8); transition: transform .45s var(--out); }
.modo[data-v="pickup"] .pastilla { transform: translateX(100%); }
.modo button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; color: var(--oliva); transition: color .3s; text-align: left; }
.modo button[aria-pressed="true"] { color: var(--papel); }
.modo button span { display: flex; flex-direction: column; line-height: 1.1; }
.modo button b { font-weight: 500; font-size: 15px; }
.modo button small { font-size: 11px; opacity: .75; }

.estado-tienda { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; padding: 12px 18px 4px; font-size: 13px; color: var(--tenue); }
.estado-tienda .luz { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 500; }
.estado-tienda .luz::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(79, 122, 69, .15); }
.estado-tienda .luz.cerrado { color: var(--rojo); }
.estado-tienda .luz.cerrado::before { box-shadow: 0 0 0 3px rgba(169, 71, 47, .12); }

/* ── buscador ── */
.buscar { display: block; margin: 12px 16px 0; position: relative; }
.buscar .ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--tenue); }
.buscar input { width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--linea); background: #fff; padding: 0 44px; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.buscar input::placeholder { color: #9b9b8e; }
.buscar input:focus { outline: none; border-color: var(--oliva-3); box-shadow: 0 0 0 4px rgba(93, 106, 79, .12); }
.buscar .limpiar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; color: var(--tenue); border-radius: 50%; }

/* ── categorías como los destacados de su Instagram ── */
.cats { display: flex; gap: 14px; overflow-x: auto; padding: 16px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; font-size: 12px; color: var(--tenue); }
.cat .aro { width: 62px; height: 62px; border-radius: 50%; padding: 3px; background: var(--linea); transition: background .3s, transform .2s var(--out); }
.cat .aro > * { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--papel); background: var(--oliva); display: grid; place-items: center; color: var(--crema); }
.cat[aria-pressed="true"] { color: var(--tinta); font-weight: 500; }
.cat[aria-pressed="true"] .aro { background: conic-gradient(from 200deg, var(--oro), var(--oro-2), var(--oliva-3), var(--oro)); }
.cat:active .aro { transform: scale(.95); }

/* ── banner sushi ── */
.banner { margin: 14px 16px 4px; position: relative; border-radius: var(--r); overflow: hidden; min-height: 150px; display: flex; align-items: flex-end; color: #fff; text-align: left; width: calc(100% - 32px); box-shadow: var(--sombra); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--out); }
.banner:hover img { transform: scale(1.06); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(31, 35, 27, .85) 0%, rgba(31, 35, 27, .45) 55%, rgba(31, 35, 27, 0) 100%); }
.banner > div { position: relative; z-index: 1; padding: 18px; }
.banner small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-2); }
.banner b { display: block; font: 600 30px/1 var(--serif); margin: 4px 0 6px; }
.banner span { font-size: 14px; opacity: .9; display: inline-flex; align-items: center; gap: 6px; }

/* ── secciones y tarjetas ── */
.seccion { padding: 20px 16px 4px; scroll-margin-top: 76px; }
.seccion h2 { margin: 0 0 12px 2px; font: 600 26px/1 var(--serif); color: var(--musgo); display: flex; align-items: baseline; gap: 10px; }
.seccion h2 small { font: 400 13px var(--sans); color: var(--tenue); }
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 520px) { .grilla { gap: 14px; } }

.prod { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r); box-shadow: 0 0 0 1px rgba(221, 213, 196, .7); overflow: hidden; text-align: left; transition: box-shadow .25s, transform .25s var(--out); content-visibility: auto; contain-intrinsic-size: 260px; }
.prod:hover { box-shadow: 0 0 0 1px var(--linea), var(--sombra); }
.plato { position: relative; aspect-ratio: 1; background: radial-gradient(120% 90% at 50% 30%, #fbf9f4 0%, var(--crema) 100%); display: grid; place-items: center; overflow: hidden; }
.plato img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--out); }
.plato img.foto { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.prod:hover .plato img:not(.foto) { transform: scale(1.04) rotate(-1deg); }
.sin-foto { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--oliva-3); text-align: center; padding: 14px; }
.sin-foto .ic { width: 44px; height: 44px; stroke-width: 1.1; }
.sin-foto span { font: 600 italic 17px/1.1 var(--serif); color: var(--oliva); }
.etq { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 500; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--cafe); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.etq.oro { background: var(--oliva); color: var(--oro-2); }
.prod .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.prod .m { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; }
.prod .n { font-size: 15px; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod .d { font-size: 13px; color: var(--tenue); }
.prod .pie { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; min-height: 48px; }
/* En la tarjeta el contador crece hacia la izquierda y ocupa la fila completa. */
.prod .pie .cant { position: absolute; right: 0; bottom: 0; }
.prod .pie .cant:not(.cero) { width: 100%; }
.prod .pie:has(.cant:not(.cero)) .precio { opacity: 0; }
.prod .precio { transition: opacity .2s; }
.precio b { display: block; font-size: 17px; font-weight: 600; color: var(--musgo); }
.precio small { display: block; font-size: 11px; color: var(--tenue); }
.prod.agotado .plato { filter: grayscale(1) opacity(.6); }
.prod.fuera .plato img { filter: saturate(.6) opacity(.75); }

/* botón agregar → contador */
.cant { display: flex; align-items: center; height: 40px; border-radius: 999px; background: var(--oliva); color: var(--papel); overflow: hidden; transition: width .35s var(--out); flex: none; }
.cant.cero { width: 40px; }
.cant:not(.cero) { width: 108px; }
.cant button { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.cant button:active { background: rgba(255, 255, 255, .12); }
.cant output { flex: 1; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.cant.cero output, .cant.cero .menos { display: none; }
.cant.claro { background: var(--crema); color: var(--oliva); }
.cant[disabled] { background: var(--arena); color: var(--tenue); pointer-events: none; }

.vacio { text-align: center; padding: 50px 24px; color: var(--tenue); }
.vacio b { display: block; font: 600 24px var(--serif); color: var(--musgo); margin-bottom: 6px; }

.pie-tienda { margin: 34px 16px 0; padding: 26px 18px; text-align: center; color: var(--tenue); font-size: 13px; border-top: 1px solid var(--linea); }
.pie-tienda .firma { font: 400 34px/1 var(--firma); color: var(--oliva); }
.pie-tienda p { margin: 8px 0; }
.pie-tienda a { color: var(--oliva); }
.pie-tienda .demo { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--crema); }

/* ── barra del carrito ── */
.barra { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); width: min(calc(100% - 28px), calc(var(--ancho) - 28px)); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; min-height: 62px; border-radius: 20px; background: var(--musgo); color: var(--papel); box-shadow: var(--sombra-alta); transition: transform .5s var(--out); }
.barra.ver { transform: translate(-50%, 0); }
.barra .bolsa { position: relative; display: grid; place-items: center; }
.barra .bolsa i { position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--oro-2); color: var(--musgo); font: 600 11px/19px var(--sans); text-align: center; font-style: normal; }
.barra .bolsa.salto { animation: salto .5s var(--rebote); }
@keyframes salto { 40% { transform: scale(1.25) rotate(-6deg); } }
.barra .txt { flex: 1; min-width: 0; line-height: 1.15; }
.barra .txt b { display: block; font-weight: 600; font-size: 17px; }
.barra .txt small { font-size: 12px; opacity: .75; }
.barra .ir { height: 46px; padding: 0 18px; border-radius: 14px; background: var(--papel); color: var(--musgo); font-weight: 600; display: flex; align-items: center; gap: 6px; transition: transform .15s; }
.barra .ir:active { transform: scale(.97); }

.volando { position: fixed; z-index: 60; pointer-events: none; width: 56px; height: 56px; border-radius: 50%; background: #fff center/80% no-repeat; box-shadow: var(--sombra); }

/* ── hojas (sheets) ── */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(30, 33, 26, .42); opacity: 0; transition: opacity .3s; }
.velo.ver { opacity: 1; }
.hoja { position: fixed; left: 50%; bottom: 0; z-index: 51; width: min(100%, var(--ancho)); max-height: 92dvh; display: flex; flex-direction: column; background: var(--papel); border-radius: 24px 24px 0 0; transform: translate(-50%, 102%); transition: transform .45s var(--out); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .35); }
.hoja.ver { transform: translate(-50%, 0); }
.hoja .agarre { padding: 10px 0 4px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.hoja .agarre::before { content: ""; width: 42px; height: 5px; border-radius: 9px; background: var(--arena); }
.hoja .cuerpo { overflow-y: auto; padding: 0 18px 18px; overscroll-behavior: contain; }
.hoja .cierre { position: absolute; top: 10px; right: 12px; }
.hoja h3 { margin: 4px 0 14px; font: 600 28px/1.05 var(--serif); color: var(--musgo); }
.hoja .acciones { padding: 12px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--papel); }

/* detalle de producto */
.detalle .plato { border-radius: var(--r); aspect-ratio: 4/3; margin-bottom: 14px; }
.detalle .plato img { width: 70%; height: 86%; }
.detalle .m { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.detalle h3 { margin: 4px 0 4px; }
.detalle p { color: #4a4c42; margin: 8px 0 0; }
.aviso-dias { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #f4ecd8; color: var(--cafe); font-size: 14px; }

/* carrito */
.linea-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.linea-item .mini { width: 58px; height: 58px; border-radius: 14px; flex: none; background: var(--crema); display: grid; place-items: center; overflow: hidden; }
.linea-item .mini img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.linea-item .mini img.foto { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.linea-item .mini .ic { color: var(--oliva-3); }
.linea-item .t { flex: 1; min-width: 0; }
.linea-item .t b { display: block; font-weight: 500; font-size: 15px; line-height: 1.2; }
.linea-item .t small { color: var(--tenue); font-size: 13px; }
.linea-item .cant { width: 100px; height: 36px; }
.linea-item .cant button { width: 34px; height: 36px; }
.totales { margin: 14px 0 4px; display: grid; gap: 6px; font-size: 15px; }
.totales div { display: flex; justify-content: space-between; gap: 10px; }
.totales .tenue { color: var(--tenue); }
.totales .grande { font-size: 20px; font-weight: 600; color: var(--musgo); padding-top: 8px; border-top: 1px dashed var(--linea); }
.totales .bs { font-size: 13px; color: var(--tenue); justify-content: flex-end; }
.gratis { color: var(--ok); font-weight: 500; }
.meta-envio { margin-top: 8px; font-size: 13px; color: var(--tenue); }
.meta-envio .riel { height: 6px; border-radius: 9px; background: var(--crema); overflow: hidden; margin-top: 6px; }
.meta-envio .riel i { display: block; height: 100%; background: linear-gradient(90deg, var(--oliva-3), var(--oliva)); border-radius: 9px; transition: width .6s var(--out); }

/* ── botones ── */
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 16px; font-weight: 600; font-size: 16px; transition: transform .15s var(--out), background .2s, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn.ancho { width: 100%; }
.btn.prim { background: var(--oliva); color: var(--papel); box-shadow: 0 10px 22px -12px rgba(52, 59, 45, .9); }
.btn.prim:hover { background: var(--musgo); }
.btn.oro { background: linear-gradient(180deg, #c7a867, var(--oro)); color: #fff; box-shadow: 0 10px 22px -12px rgba(122, 94, 40, .9); }
.btn.suave { background: var(--crema); color: var(--oliva); }
.btn.borde { box-shadow: inset 0 0 0 1px var(--linea); background: #fff; }
.btn.chico { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.btn[disabled], .btn.cargando { opacity: .6; pointer-events: none; }
.btn .gira { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.wa { background: #e7f3e3; color: #2f6b2a; }

/* ── páginas internas ── */
.pagina { padding: 4px 16px 30px; animation: entra .45s var(--out); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.atras { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding-right: 10px; color: var(--oliva); font-weight: 500; }
.titulo { font: 600 34px/1.02 var(--serif); color: var(--musgo); margin: 6px 0 4px; }
.sub { color: var(--tenue); margin: 0 0 14px; }
.bloque { background: #fff; border-radius: var(--r); padding: 16px; box-shadow: 0 0 0 1px rgba(221, 213, 196, .7); margin-top: 14px; }
.bloque > h4 { margin: 0 0 12px; font: 600 21px/1.1 var(--serif); color: var(--musgo); display: flex; align-items: center; gap: 10px; }
.bloque > h4 .paso { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--crema); color: var(--oliva); font: 600 13px var(--sans); }

.campo { display: block; margin-top: 12px; }
.campo:first-of-type { margin-top: 0; }
.campo > span { display: block; font-size: 13px; font-weight: 500; color: var(--tenue); margin: 0 0 6px 2px; }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid var(--linea); background: var(--papel); padding: 12px 14px; font-size: 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
.campo textarea { min-height: 76px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--oliva-3); background: #fff; box-shadow: 0 0 0 4px rgba(93, 106, 79, .12); }
.campo.error input, .campo.error textarea { border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(169, 71, 47, .1); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos .campo { margin-top: 0; }
.nota-suave { font-size: 13px; color: var(--tenue); margin: 8px 2px 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 14px; border-radius: 14px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); text-align: left; line-height: 1.15; transition: box-shadow .2s, background .2s; }
.chip small { display: block; font-size: 12px; color: var(--tenue); }
.chip[aria-pressed="true"] { background: #f1f3ec; box-shadow: inset 0 0 0 2px var(--oliva); }

.pagos { display: grid; gap: 10px; }
.pago { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linea); background: var(--papel); overflow: hidden; transition: box-shadow .2s, background .2s; }
.pago > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; min-height: 60px; }
.pago .radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--arena); flex: none; transition: box-shadow .25s var(--out); }
.pago.sel { box-shadow: inset 0 0 0 2px var(--oliva); background: #fff; }
.pago.sel .radio { box-shadow: inset 0 0 0 7px var(--oliva); }
.pago .t { flex: 1; }
.pago .t b { display: block; font-weight: 500; }
.pago .t small { color: var(--tenue); font-size: 13px; }
.pago .extra { padding: 0 14px 14px; display: none; }
.pago.sel .extra { display: block; animation: entra .35s var(--out); }
.datos-pago { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--crema); margin-bottom: 10px; }
.datos-pago .fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; font-size: 15px; }
.datos-pago .fila span { color: var(--tenue); font-size: 13px; }
.datos-pago .fila b { font-weight: 600; text-align: right; flex: 1; }
.copiar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--oliva); }
.copiar:active { background: rgba(255, 255, 255, .7); }
.copiar.ok { color: var(--ok); }
.monto-bs { font-size: 22px !important; color: var(--musgo); }

/* ── seguimiento: la rama de olivo ── */
.encabezado-pedido { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.codigo { font: 600 46px/0.9 var(--serif); color: var(--musgo); letter-spacing: -.01em; }
.codigo small { display: block; font: 500 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); margin-bottom: 6px; }
.tipo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--crema); color: var(--oliva); font-size: 13px; font-weight: 500; }
.ahora { margin-top: 16px; padding: 18px; border-radius: var(--r); background: var(--oliva); color: var(--papel); position: relative; overflow: hidden; }
.ahora::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 170px; height: 170px; background: url("/img/rama.svg") center/contain no-repeat; opacity: .16; transform: rotate(-18deg); }
.ahora small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-2); }
.ahora b { display: block; font: 600 30px/1.05 var(--serif); margin: 6px 0 4px; }
.ahora p { margin: 0; opacity: .85; font-size: 15px; max-width: 34ch; }
.ahora.cancelado { background: #6d5a4a; }

.rama { position: relative; margin: 18px 0 4px; padding-left: 4px; }
.rama .tallo { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--arena); border-radius: 2px; }
.rama .tallo i { position: absolute; left: 0; top: 0; width: 100%; background: linear-gradient(var(--oliva), var(--oliva-2)); border-radius: 2px; transition: height 1s var(--out); }
.paso-r { position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; }
.paso-r .hoja-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--papel); position: relative; z-index: 1; }
.paso-r .hoja-ic svg { width: 26px; height: 26px; transition: transform .7s var(--rebote), fill .4s, stroke .4s; transform: scale(.62) rotate(-40deg); fill: var(--papel); stroke: #c9c0ad; stroke-width: 1.8; }
.paso-r.hecho .hoja-ic svg { transform: scale(1) rotate(0); fill: var(--oliva); stroke: var(--oliva); }
.paso-r.actual .hoja-ic svg { transform: scale(1.12) rotate(0); fill: var(--oro); stroke: var(--oro); }
.paso-r.actual .hoja-ic::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(176, 143, 82, .45); animation: latido 2.2s var(--out) infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(176, 143, 82, .45); } 80%, 100% { box-shadow: 0 0 0 14px rgba(176, 143, 82, 0); } }
.paso-r .tx b { display: block; font-weight: 500; color: var(--tenue); transition: color .3s; }
.paso-r.hecho .tx b, .paso-r.actual .tx b { color: var(--tinta); }
.paso-r.actual .tx b { font-weight: 600; }
.paso-r .tx small { font-size: 12px; color: var(--tenue); }

.avisos { display: flex; gap: 14px; align-items: center; }
.avisos .campana { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--crema); color: var(--oliva); }
.avisos .campana.on { background: #e6efdf; color: var(--ok); }
.avisos .campana.on .ic { animation: timbre 1.2s var(--out) 1; transform-origin: 50% 10%; }
@keyframes timbre { 20% { transform: rotate(16deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
.avisos .t { flex: 1; }
.avisos .t b { display: block; font-weight: 500; }
.avisos .t small { color: var(--tenue); font-size: 13px; }
.ios-pasos { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--crema); font-size: 14px; }

.llegue { width: 100%; min-height: 64px; font-size: 18px; border-radius: 18px; }
.llegue.hecho { background: #e6efdf; color: var(--ok); box-shadow: none; }

.demo-caja { margin-top: 16px; padding: 14px; border-radius: var(--r); border: 1.5px dashed var(--oro-2); background: #fbf6ea; }
.demo-caja small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); font-weight: 600; }
.demo-caja p { margin: 4px 0 10px; font-size: 14px; color: var(--cafe); }

details.items { margin-top: 14px; }
details.items summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 500; }
details.items summary::-webkit-details-marker { display: none; }
details.items summary .ic { transition: transform .3s var(--out); }
details.items[open] summary .ic { transform: rotate(180deg); }

/* mis pedidos */
.fila-pedido { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px rgba(221, 213, 196, .7); margin-top: 10px; }
.fila-pedido .cod { font: 600 26px/1 var(--serif); color: var(--musgo); min-width: 74px; }
.fila-pedido .t { flex: 1; min-width: 0; }
.fila-pedido .t b { display: block; font-weight: 500; }
.fila-pedido .t small { color: var(--tenue); font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--crema); color: var(--oliva); white-space: nowrap; }
.pill.oro { background: #f4ecd8; color: #7a5e28; }
.pill.ok { background: #e6efdf; color: var(--ok); }
.pill.rojo { background: #f6e3dc; color: var(--rojo); }

/* aviso flotante */
.toast { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); z-index: 80; transform: translate(-50%, -150%); width: min(calc(100% - 24px), 520px); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--musgo); color: var(--papel); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5); transition: transform .5s var(--out); }
.toast.ver { transform: translate(-50%, 0); }
.toast .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--oro-2); flex: none; }
.toast b { display: block; font-weight: 600; }
.toast small { opacity: .8; font-size: 13px; }

/* Cormorant trae números antiguos (1001 se lee IOOI): forzar números de línea. Va al final porque `font:` lo resetea. */
.codigo, .cod, .resumen-dia b, .titulo, .seccion h2, .hoja h3, .ahora b { font-variant-numeric: lining-nums; }
.pagina.quieta { animation: none; }

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