/* TRESSEN · app de la mesa / carta. Colores, letras y formas del salón: paredes verde botella, arcos de ónix
   iluminados desde atrás con marco dorado, mármol, cuero coñac. Color pleno en bloques, fotos en arco, filete
   dorado solo donde suma. Fichas de color y tipografía en comun/marca.css. */

:root {
  --fondo: var(--crema);
  --tinta: #13211A;
  --tinta-2: rgba(19, 33, 26, .64);
  --tinta-3: rgba(19, 33, 26, .42);
  --linea: rgba(18, 38, 29, .12);
  --cab: 58px;
  --barra: 66px;
  --seguro-ab: env(safe-area-inset-bottom, 0px);
  --seguro-ar: env(safe-area-inset-top, 0px);
  --lado: 16px;
  --ancho: 1120px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--botella); }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--tinta);
  font: 400 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.ico { width: 22px; height: 22px; flex: none; }
.precio, .cifras, .num { font-variant-numeric: tabular-nums; }
body.trabado { overflow: hidden; }

/* Rótulo chico en mayúsculas con el aire del logo. */
.rot { font-size: 11.5px; font-weight: 600; letter-spacing: var(--espaciado-logo); text-transform: uppercase; }
/* Títulos como sus placas: sans fina + sans gruesa itálica («Banana split», «Risotto cuatro hongos»). */
.placa { font-weight: 300; letter-spacing: -.01em; line-height: 1.02; }
.placa em { font-style: italic; font-weight: 750; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ───────── cabecera ───────── */
.cab {
  position: sticky; top: 0; z-index: 30; height: calc(var(--cab) + var(--seguro-ar)); padding: var(--seguro-ar) var(--lado) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--botella); color: var(--crema);
}
.cab-logo img { height: 15px; width: auto; }
.cab-demo {
  text-decoration: none; background: var(--oro); color: var(--botella); font-weight: 650; font-size: 13.5px;
  padding: 9px 15px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(201, 164, 92, .8);
}
.cab-demo:active { transform: scale(.97); }
.cab-mesa {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(201, 164, 92, .55); color: var(--crema); font-weight: 600; font-size: 14px; transition: opacity .25s;
}
body.mesa-visible .cab-mesa { opacity: 0; pointer-events: none; }
.cab-mesa .punto, .punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #7fd39c; box-shadow: 0 0 0 0 rgba(127, 211, 156, .6); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 7px rgba(127, 211, 156, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 211, 156, 0); } }

/* ───────── vistas ───────── */
main { min-height: calc(100vh - var(--cab)); padding-bottom: calc(var(--barra) + var(--seguro-ab) + 28px); }
body.con-pildora main { padding-bottom: calc(var(--barra) + var(--seguro-ab) + 96px); }
.vista.entra, .lista-entra { animation: entraVista .34s var(--facil) both; }
@keyframes entraVista { from { opacity: 0; transform: translateY(10px); } }
.envuelve { width: min(100%, var(--ancho)); margin: 0 auto; padding: 0 var(--lado); }

/* entradas escalonadas de bloques */
.aparece { animation: aparece .6s var(--facil) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes aparece { from { opacity: 0; transform: translateY(16px); } }

/* bloques de color: el verde botella sigue a la cabecera y la crema entra con curva */
.bloque-oscuro { background: var(--botella); color: var(--crema); }
.crema-sube { position: relative; background: var(--fondo); border-radius: 28px 28px 0 0; margin-top: -22px; padding-top: 6px; z-index: 1; }

.tit-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.tit-sec h2 { font-size: 27px; }
#i-promos > .tit-sec { margin-top: 22px; }
.tit-sec .ver { font-size: 14px; font-weight: 600; color: var(--tressen); white-space: nowrap; }
.tit-sec .rot { color: var(--salvia); }

/* filete dorado de los arcos de metal */
.filete { height: 1px; background: linear-gradient(90deg, transparent, var(--oro) 18%, var(--oro) 82%, transparent); opacity: .55; }

/* ───────── botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 20px;
  border-radius: 999px; font-weight: 650; font-size: 16px; text-decoration: none; transition: transform .15s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.975); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-oro { background: var(--oro); color: var(--botella); }
.btn-botella { background: var(--botella); color: var(--crema); }
.btn-crema { background: var(--crema); color: var(--botella); }
.btn-linea { border: 1.5px solid currentColor; }
.btn-ancho { width: 100%; }

.mas {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--botella); color: var(--crema); box-shadow: 0 6px 14px -6px rgba(5, 15, 10, .6); transition: transform .15s, background .25s;
}
.mas .ico { width: 20px; height: 20px; stroke-width: 2.3; }
.mas:active { transform: scale(.9); }
.mas.hecho { background: var(--tressen); }
.mas.claro { background: transparent; color: var(--botella); border: 1.5px solid rgba(18, 38, 29, .35); box-shadow: none; }

/* ───────── barra inferior ───────── */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--barra) + var(--seguro-ab)); padding-bottom: var(--seguro-ab);
  display: flex; align-items: stretch; background: var(--botella); color: rgba(242, 237, 226, .55);
  border-top: 1px solid rgba(201, 164, 92, .22);
}
.barra > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; transition: color .2s; }
.barra > button.activo { color: var(--oro-claro); }
.barra .b-ico { position: relative; display: grid; place-items: center; }
.barra > button.activo .b-ico::after { content: ''; position: absolute; top: -9px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 0 0 3px 3px; background: var(--oro); }
.barra .insignia { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--oro); color: var(--botella); font-size: 11px; font-weight: 750; display: grid; place-items: center; }
.b-flor { position: relative; }
.b-arco {
  position: absolute; left: 50%; top: -16px; width: 58px; height: 66px; margin-left: -29px; display: grid; place-items: center;
  border-radius: 999px 999px 14px 14px; border: 1.5px solid var(--oro);
  background: radial-gradient(120% 90% at 50% 60%, #2a4a39 0%, #6f8f73 55%, var(--onix) 82%, var(--onix-luz) 100%);
  box-shadow: 0 0 0 4px var(--botella), 0 0 26px 2px rgba(207, 224, 207, .38);
  transition: transform .2s var(--facil);
}
.b-arco img { width: 30px; height: 30px; filter: invert(1) sepia(.35) saturate(.7) brightness(1.15); }
.b-flor:active .b-arco { transform: scale(.94); }
body:not(.con-bot) [data-bot] { display: none !important; }
body:not(.con-bot) .acciones-3 { grid-template-columns: 1fr 1fr; }

/* píldora del pedido (sobre la barra) */
.pildora {
  position: fixed; z-index: 39; left: 12px; right: 12px; bottom: calc(var(--barra) + var(--seguro-ab) + 12px);
  margin: 0 auto; max-width: 560px; height: 56px; padding: 0 8px 0 8px; border-radius: 999px;
  display: flex; align-items: center; gap: 12px; background: var(--oro); color: var(--botella);
  box-shadow: 0 16px 34px -14px rgba(5, 15, 10, .7); font-weight: 650;
  animation: pildoraSube .45s var(--facil) both;
}
@keyframes pildoraSube { from { transform: translateY(30px); opacity: 0; } }
.pildora .cuenta-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--botella); color: var(--oro-claro); font-weight: 750; font-variant-numeric: tabular-nums; }
.pildora .pil-t { flex: 1; text-align: left; font-size: 16px; }
.pildora .pil-p { padding-right: 14px; font-size: 16px; }
.pildora.late { animation: late .45s var(--facil); }
@keyframes late { 40% { transform: scale(1.05); } }

/* producto que vuela al pedido */
.vuelo { position: fixed; z-index: 90; pointer-events: none; left: 0; top: 0; }
.vuelo > div { width: 52px; height: 52px; border-radius: 26px 26px 8px 8px; overflow: hidden; background: var(--botella); border: 2px solid var(--oro); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.vuelo img { width: 100%; height: 100%; object-fit: cover; }
.vuelo.suelto > div { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; display: grid; place-items: center; }
.vuelo.suelto img { object-fit: contain; filter: drop-shadow(0 8px 8px rgba(3, 10, 6, .45)); }
.vuelo .flor-vuelo { width: 100%; height: 100%; display: grid; place-items: center; }
.vuelo .flor-vuelo img { width: 60%; height: 60%; object-fit: contain; }

/* ───────── entrada ─────────
   Vive en un <style> de index.html: se pinta con el primer cuadro, sin esperar a esta hoja ni a las tipografías. */

/* ───────── INICIO ───────── */
.mesa-bloque { padding: 18px 0 30px; }
.mesa-arriba { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mesa-num { display: flex; align-items: baseline; gap: 10px; }
.mesa-num .placa { font-size: 30px; }
.mesa-num .n { font-family: var(--serif); font-style: italic; font-size: 92px; line-height: .8; color: var(--oro-claro); }
.mesa-quien { font-size: 14.5px; color: rgba(242, 237, 226, .7); margin-top: 8px; }
.mesa-quien b { color: var(--crema); font-weight: 600; }
.acciones-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.accion {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;
  min-height: 96px; padding: 14px 14px 13px; border-radius: 20px; text-align: left; overflow: hidden;
  background: var(--botella-2); color: var(--crema); border: 1px solid rgba(201, 164, 92, .25); transition: background .3s, transform .15s, border-color .3s;
}
.accion:active { transform: scale(.98); }
.accion .ico { width: 26px; height: 26px; color: var(--oro-claro); }
.accion b { font-size: 16px; font-weight: 650; line-height: 1.15; }
.accion small { display: block; font-size: 12.5px; color: rgba(242, 237, 226, .66); font-weight: 500; margin-top: 2px; }
.accion.quieta { opacity: .62; }
.accion.activa { background: var(--oro); color: var(--botella); border-color: var(--oro); }
.accion.activa .ico, .accion.activa small { color: var(--botella); }
.accion.activa small { opacity: .75; }
.accion.va { background: var(--onix-luz); color: var(--botella); border-color: var(--onix); }
.accion.va .ico, .accion.va small { color: var(--tressen); }
.accion .pulso { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: pulso 1.4s infinite; }
@keyframes pulso { 50% { opacity: .25; transform: scale(.7); } }

.estado-corto {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: 18px;
  background: rgba(207, 224, 207, .1); border: 1px solid rgba(207, 224, 207, .18); color: var(--crema); text-align: left;
}
.estado-corto .ec-t { flex: 1; }
.estado-corto b { display: block; font-weight: 650; }
.estado-corto small { color: rgba(242, 237, 226, .66); font-size: 13px; }
.mini-pasos { display: flex; gap: 4px; margin-top: 8px; }
.mini-pasos i { flex: 1; height: 4px; border-radius: 2px; background: rgba(242, 237, 226, .18); }
.mini-pasos i.ok { background: var(--oro); }
.estado-corto .ver-mesa { font-size: 13.5px; font-weight: 650; color: var(--oro-claro); }

/* pared de arcos: el ónix de su pared iluminado desde atrás y el producto recortado por delante, saliendo del marco */
.arcos-zona { padding: 10px 0 24px; }
.arcos-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.arcos-cab .rot { color: var(--onix); opacity: .8; }
.abierto { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--onix); }
.abierto.no { color: rgba(242, 237, 226, .6); }
.abierto.no .punto-vivo { background: #d39b2a; animation: none; }
.arcos-tit { font-size: 32px; }
.arcos-fila {
  display: flex; align-items: flex-end; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(var(--lado) * -1); padding: 26px var(--lado) 6px; scroll-padding: 0 var(--lado);
}
.arcos-fila::-webkit-scrollbar { display: none; }
.arco { flex: 0 0 148px; scroll-snap-align: start; text-align: left; color: var(--crema); cursor: pointer; }
.arco .sello-top { top: 14px; }
.arco .mas { position: absolute; z-index: 3; right: -6px; bottom: -8px; width: 42px; height: 42px; background: var(--oro); color: var(--botella); border: 3px solid var(--botella); }
.arco .mas.hecho { background: var(--onix); }
.arco-marco {
  position: relative; display: block; aspect-ratio: 1 / 1.22; border-radius: 999px 999px 16px 16px;
  border: 1.5px solid rgba(201, 164, 92, .72); background: var(--noche); transition: box-shadow .6s, border-color .6s, transform .2s var(--facil);
  box-shadow: 0 0 22px 2px rgba(207, 230, 205, .2), 0 0 60px 10px rgba(207, 230, 205, .06);   /* todos prendidos: el de «Ahora», un poco más */
}
.arco:active .arco-marco { transform: scale(.975); }
/* el ónix: la textura real de su pared, con la luz que sale de atrás por el borde */
.onix {
  position: absolute; inset: 5px; border-radius: 999px 999px 11px 11px; overflow: hidden;
  background:
    radial-gradient(60% 40% at 50% 80%, rgba(12, 28, 20, .34), transparent 75%),
    radial-gradient(closest-side at 50% 50%, transparent 52%, rgba(240, 250, 236, .58) 100%),
    url(app/onix.webp) calc(50% + var(--ox, 0px)) calc(50% + var(--oy, 0px)) / 135% auto, var(--onix);
  filter: brightness(.86) saturate(.94); transition: filter .7s;
}
.onix::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 20px 3px rgba(240, 250, 236, .6), inset 0 0 0 1px rgba(240, 250, 236, .4); }
.arco.ahora .arco-marco { border-color: var(--oro); box-shadow: 0 0 0 1px rgba(201, 164, 92, .3), 0 0 34px 4px rgba(207, 230, 205, .38), 0 0 90px 18px rgba(207, 230, 205, .14); }
.arco.ahora .onix { filter: none; }
/* el producto: por delante del marco, con sombra suave y un flotar lento */
.corte { position: absolute; z-index: 2; left: calc(50% + var(--x, 0%)); bottom: var(--b, -12%); width: var(--w, 110%); transform: translateX(-50%); pointer-events: none; }
.corte .flota { display: block; animation: flota 5.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.corte img { width: 100%; height: auto; filter: drop-shadow(0 12px 12px rgba(3, 10, 6, .48)) drop-shadow(0 2px 3px rgba(3, 10, 6, .3)); -webkit-user-drag: none; user-select: none; }
.corte-sombra { position: absolute; left: 16%; right: 16%; bottom: 2%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 8, 5, .55), transparent); animation: sombra 5.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes flota { 50% { transform: translateY(-6px); } }
@keyframes sombra { 50% { transform: scaleX(.86); opacity: .7; } }
/* al presentarse el inicio, el producto sube desde el pie del arco */
.aparece .corte img { animation: sale 1s cubic-bezier(.2, .9, .25, 1.12) both; animation-delay: calc(var(--i, 0) * 70ms + 260ms); }
@keyframes sale { from { opacity: 0; transform: translateY(34%) scale(.84); } }
.en-entrada .aparece, .en-entrada .aparece * { animation-play-state: paused !important; }
/* el rótulo mide lo mismo en todos los arcos (hasta dos líneas): así los arcos quedan parados sobre la misma línea */
/* el producto baja del arco en proporción a su tamaño: el rótulo se corre lo mismo (el % del margen es del ancho) */
.arco-txt { display: block; min-height: 76px; margin-top: calc(17% + 6px); }
.arco b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; font-weight: 650; line-height: 1.2; }
.arco small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: rgba(207, 224, 207, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arco.ahora small { color: var(--onix); }
.arco .arco-p { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 650; color: var(--oro-claro); }

/* Preguntale a Tressen */
.preguntale {
  position: relative; overflow: hidden; margin-top: 26px; padding: 24px 20px 20px; border-radius: 28px; color: var(--botella);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .55), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(105, 126, 99, .35), transparent 60%),
    linear-gradient(160deg, var(--onix-luz), var(--onix) 55%, #b4cbb3);
  box-shadow: var(--sombra-suave);
}
.preguntale::before { content: ''; position: absolute; inset: 0; background: url(app/vetas.svg) center / cover; opacity: .35; mix-blend-mode: multiply; pointer-events: none; }
.preguntale > * { position: relative; }
.preguntale .flor-fondo { position: absolute; right: -36px; top: -36px; width: 170px; height: 170px; opacity: .2; }
.preguntale .rot { color: var(--tressen); }
.preguntale h2 { font-size: 34px; margin: 8px 0 8px; }
.preguntale p { font-size: 15px; color: rgba(18, 38, 29, .72); max-width: 32ch; }
.sugeridas { display: flex; gap: 8px; margin: 16px -20px 0; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 20px; }
.sugeridas::-webkit-scrollbar { display: none; }
.sugeridas button {
  flex: none; white-space: nowrap; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(18, 38, 29, .14);
  font-size: 14.5px; font-weight: 550; color: var(--botella); text-align: left; transition: background .2s, transform .15s;
}
.sugeridas button:active { transform: scale(.97); background: #fff; }
.campo-bot {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--botella); color: rgba(242, 237, 226, .7); font-size: 15px; text-align: left;
}
.campo-bot span { flex: 1; }
.campo-bot i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); }
.campo-bot i img { width: 22px; height: 22px; }
/* el asistente arriba del inicio, sobre el verde botella: un campo con la flor y las preguntas sugeridas */
.pg-arriba { padding: 16px 0 2px; }
.pg-arriba .campo-bot {
  margin-top: 0; padding: 7px 7px 7px 7px; gap: 12px; color: var(--crema);
  background: linear-gradient(135deg, rgba(230, 242, 227, .17), rgba(230, 242, 227, .06));
  border: 1px solid rgba(201, 164, 92, .6); box-shadow: 0 0 28px -8px rgba(207, 230, 205, .45);
}
.pg-arriba .campo-bot:active { transform: scale(.985); }
.pg-arriba .campo-bot i { flex: none; width: 44px; height: 44px; }
.pg-arriba .campo-bot span { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.pg-arriba .campo-bot b { font-size: 16.5px; font-weight: 650; color: var(--crema); }
.pg-arriba .campo-bot small { font-size: 12.5px; color: rgba(207, 224, 207, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-arriba .campo-bot em { flex: none; font-style: normal; padding: 11px 16px; border-radius: 999px; background: var(--crema); color: var(--botella); font-size: 14px; font-weight: 650; }
.pg-arriba .sugeridas { margin: 12px calc(var(--lado) * -1) 0; padding: 0 var(--lado) 2px; scroll-padding: 0 var(--lado); }
.pg-arriba .sugeridas button { padding: 8px 13px; font-size: 13.5px; background: rgba(242, 237, 226, .08); border-color: rgba(242, 237, 226, .22); color: var(--crema); }
.pg-arriba .sugeridas button:active { background: rgba(242, 237, 226, .2); }
@media (min-width: 700px) { .pg-arriba .sugeridas { flex-wrap: wrap; overflow: visible; margin: 12px 0 0; padding: 0; } }

/* fila horizontal de tarjetas */
.fila { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--lado) * -1); padding: 4px var(--lado) 10px; scroll-padding: 0 var(--lado); }
.fila::-webkit-scrollbar { display: none; }
.fila > * { scroll-snap-align: start; flex: none; }

/* promos */
.promo {
  position: relative; overflow: hidden; width: min(86vw, 380px); min-height: 172px; padding: 18px 20px; border-radius: 26px;
  background: var(--tressen); color: var(--crema); display: flex; flex-direction: column; gap: 8px;
}
.promo:nth-child(3n+2) { background: var(--cuero); }
.promo:nth-child(3n+3) { background: var(--terciopelo); }
.promo .flor-fondo { position: absolute; right: -40px; bottom: -40px; width: 180px; opacity: .14; }
.promo .rot { color: var(--oro-claro); }
.promo h3 { font-size: 27px; }
.promo p { font-size: 14.5px; color: rgba(242, 237, 226, .8); max-width: 30ch; }
.promo .promo-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.promo .promo-p { font-size: 26px; font-weight: 300; }
.promo .btn { min-height: 44px; font-size: 14.5px; padding: 0 16px; }
.promo.con-foto { padding-right: 132px; }
.promo .promo-foto { position: absolute; right: 16px; top: 18px; width: 104px; aspect-ratio: 4 / 5; border-radius: 999px 999px 12px 12px; object-fit: cover; border: 1px solid rgba(228, 201, 143, .6); }
.promo .ahora-chip { display: inline-flex; align-items: center; gap: 6px; }

/* destacados con foto en arco (los que tienen recorte: el producto sale del arco de ónix) */
.fila-dest { gap: 16px; padding-top: 30px; margin-top: -22px; }
.dest { width: 168px; text-align: left; }
.dest-foto { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; background: var(--botella); }
.dest-foto > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dest-foto .mas { position: absolute; z-index: 3; right: -4px; bottom: -6px; border: 3px solid var(--fondo); width: 44px; height: 44px; }
.corte-dest { background: var(--noche); border: 1.5px solid var(--oro); box-shadow: 0 0 26px -4px rgba(150, 190, 150, .55); }
.corte-dest .onix { inset: 4px; border-radius: 999px 999px 14px 14px; filter: brightness(.92) saturate(.9); }
.corte-dest .corte { bottom: 2%; width: calc(var(--w) * .86); }
.sello-top { position: absolute; z-index: 3; left: 50%; top: 12px; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--oro); color: var(--botella); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.dest b { display: block; margin-top: 12px; font-weight: 650; font-size: 15.5px; line-height: 1.2; }
.dest .precio { display: block; margin-top: 3px; color: var(--tinta-2); font-size: 14.5px; }

/* experiencias */
.exp { width: min(78vw, 320px); border-radius: 22px; overflow: hidden; background: var(--papel); border: 1px solid var(--linea); display: flex; flex-direction: column; }
.exp-foto { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.exp.sin-foto { position: relative; justify-content: flex-end; border: 0; color: var(--crema); background: var(--botella); }
.exp.sin-foto.c1 { background: var(--tressen); }
.exp.sin-foto.c2 { background: var(--cuero); }
.exp.sin-foto.c3 { background: var(--terciopelo); }
.exp.sin-foto .flor-fondo { position: absolute; right: -44px; top: -44px; width: 190px; opacity: .16; }
.exp.sin-foto .exp-txt { position: relative; padding: 22px 20px 22px; }
.exp.sin-foto h3 { font-size: 30px; margin-top: 8px; }
.exp.sin-foto .rot { color: var(--oro-claro); }
.exp.sin-foto p { color: rgba(242, 237, 226, .78); }
.exp-txt { padding: 16px 18px 18px; }
.exp-txt .rot { color: var(--cuero); }
.exp-txt h3 { font-size: 21px; margin: 6px 0 6px; }
.exp-txt p { font-size: 14px; color: var(--tinta-2); }

/* premios */
.premios { margin-top: 40px; padding: 30px 0 34px; }
.premios-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.premio { padding: 4px 16px 0; text-align: center; }
.premio + .premio { border-left: 1px solid rgba(201, 164, 92, .35); }
.premio .anio { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--oro-claro); }
.premio .anio .ord { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: .5em; letter-spacing: -.02em; margin-left: .04em; vertical-align: .62em; }
.premio .rot { display: block; margin-top: 10px; color: var(--oro); font-size: 10.5px; }
.premio p { margin-top: 8px; font-size: 14px; color: rgba(242, 237, 226, .82); line-height: 1.35; }

.pie-info { display: flex; flex-direction: column; gap: 12px; padding: 26px 0 8px; }
.pie-info p { color: var(--tinta-2); font-size: 14.5px; }

/* ───────── CARTA ───────── */
.carta-tope { position: sticky; top: calc(var(--cab) + var(--seguro-ar)); z-index: 20; background: var(--fondo); box-shadow: 0 1px 0 var(--linea); }
.cats { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--botella); padding: 0 calc(var(--lado) - 10px) 0; }
.cats::-webkit-scrollbar, .secs::-webkit-scrollbar { display: none; }
.cats button { position: relative; flex: none; padding: 12px 10px 14px; font-size: 15px; font-weight: 600; color: rgba(242, 237, 226, .55); transition: color .2s; }
.cats button.activo { color: var(--crema); }
.cats button.activo::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--oro); }
.secs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--lado); }
.secs button { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--botella); background: rgba(18, 38, 29, .06); transition: background .2s, color .2s; }
.secs button.activo { background: var(--botella); color: var(--crema); }

.cat-cab { position: relative; overflow: hidden; padding: 26px 0 22px; }
.cat-cab h1 { font-size: 46px; }
.cat-cab p { margin-top: 8px; font-size: 15px; opacity: .78; max-width: 40ch; }
.cat-cab .flor-fondo { position: absolute; right: -50px; top: -40px; width: 200px; opacity: .16; }
.cat-cafeteria { background: var(--taupe); color: #3f3124; }
.cat-brunch { background: var(--arena); color: #333320; }
.cat-cocina { background: var(--salvia); color: var(--crema); }
.cat-bebidas { background: var(--botella-2); color: var(--crema); }
.cat-market { background: var(--onix); color: var(--botella); }
.cat-buscar { background: var(--papel); color: var(--botella); }

.herr { display: flex; align-items: center; gap: 8px; padding: 12px 0 2px; }
.buscador { position: relative; flex: 0 0 168px; min-width: 0; }
.buscador:focus-within { flex: 1 1 auto; }
.buscador:focus-within + .filtros { display: none; }
.buscador .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); width: 20px; height: 20px; }
.buscador input {
  width: 100%; height: 44px; padding: 0 40px 0 42px; border-radius: 999px; -webkit-appearance: none; appearance: none; border: 1px solid var(--linea); background: var(--papel);
  font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.buscador input:focus { border-color: var(--tressen); box-shadow: 0 0 0 3px rgba(78, 111, 80, .18); }
.buscador input::-webkit-search-cancel-button, .buscador input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.buscador .limpiar { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta-2); }
.filtros { flex: 1 1 0; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--lado) * -1) 0 0; padding: 2px var(--lado) 2px 0; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; font-size: 14px; font-weight: 550; color: var(--tinta); transition: background .2s, color .2s, border-color .2s; }
.filtros button.activo { background: var(--tressen); border-color: var(--tressen); color: var(--crema); }
.filtros .ico { width: 16px; height: 16px; }

.seccion { padding-top: 26px; scroll-margin-top: calc(var(--cab) + var(--seguro-ar) + 104px); }
.sec-cab { margin-bottom: 4px; }
.sec-cab .rot-l { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: var(--espaciado-logo); text-transform: uppercase; color: var(--tressen); }
.sec-cab .rot-l::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 92, .7), transparent); }
.sec-cab .serif { display: block; margin-top: 4px; font-size: 20px; color: var(--tinta-2); }
.sec-cab .nota { margin-top: 6px; font-size: 13.5px; color: var(--tinta-2); }
.lista { display: grid; grid-template-columns: 1fr; column-gap: 32px; }

.it { position: relative; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.it:last-child { border-bottom: 0; }
.it-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.it-n { font-size: 16.5px; font-weight: 650; line-height: 1.25; }
.it-d { font-size: 14px; color: var(--tinta-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.it-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--salvia); font-weight: 600; }
.it-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.it-p { font-size: 15.5px; font-weight: 650; }
.it-p small { font-weight: 500; color: var(--tinta-2); font-size: 13px; }
.it-img { position: relative; flex: none; width: 96px; height: 120px; align-self: flex-start; }
.it-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 48px 48px 12px 12px; background: var(--taupe); }
.it-img .mas { position: absolute; right: -6px; bottom: -8px; border: 3px solid var(--fondo); width: 42px; height: 42px; }
.it.sin-foto .it-pie .mas { display: grid; }
.it-pie .mas { display: none; }
.it.agotado { cursor: default; }
.it.agotado .it-txt, .it.agotado .it-img img { opacity: .42; }
.it.agotado .mas { display: none !important; }
.agot { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--alerta); }
.it .sello { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--oro); color: var(--botella); font-size: 10.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

/* intensidad del café (de la carta impresa) */
.int { display: inline-flex; align-items: center; gap: 7px; color: var(--cafe); }
.int i { display: inline-flex; gap: 3px; }
.int i u { width: 7px; height: 10px; border-radius: 50%; border: 1.3px solid currentColor; text-decoration: none; transform: rotate(28deg); }
.int i u.ok { background: currentColor; }

/* vinos */
.vinos-intro { scroll-margin-top: calc(var(--cab) + var(--seguro-ar) + 104px); margin-top: 30px; padding: 22px 20px; border-radius: 24px; background: var(--botella); color: var(--crema); position: relative; overflow: hidden; }
.vinos-intro h2 { font-size: 30px; }
.vinos-intro p { margin-top: 6px; color: rgba(242, 237, 226, .7); font-size: 14.5px; }
.vinos-intro .flor-fondo { position: absolute; right: -30px; top: -30px; width: 150px; opacity: .14; }
.tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tipos button { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(228, 201, 143, .45); font-size: 14px; font-weight: 600; color: var(--crema); }
.tipos button.activo { background: var(--oro); border-color: var(--oro); color: var(--botella); }
/* ficha de cada vino: cepa y bodega arriba, región y cosecha abajo; una sola vez */
.vino-meta { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.35; }
.vino-meta .vm-a { color: var(--cuero); font-weight: 550; }
.vino-meta .vm-a b { font-weight: 700; }
.vino-meta .vm-b { font-size: 12.5px; color: var(--tinta-3); }
.vino-meta.grande { margin-top: 10px; font-size: 16px; }
.vino-meta.grande .vm-b { font-size: 14px; color: var(--tinta-2); }
.vars-l { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14.5px; font-weight: 650; }
.vars-l span small { font-weight: 500; color: var(--tinta-2); font-size: 12.5px; margin-right: 4px; }

.sin-res { padding: 48px 8px; text-align: center; color: var(--tinta-2); }
.sin-res h3 { font-size: 24px; color: var(--tinta); margin-bottom: 8px; }
.res-n { margin: 22px 0 0; font-size: 14px; color: var(--tinta-2); }
.seguir { margin: 34px 0 0; }
.seguir .btn { width: 100%; justify-content: space-between; padding: 0 8px 0 22px; min-height: 64px; border-radius: 22px; }
.seguir .btn small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.seguir .btn .txt { text-align: left; }
.seguir .btn i { width: 48px; height: 48px; border-radius: 16px; background: rgba(242, 237, 226, .12); display: grid; place-items: center; }
.seguir .btn i img { width: 26px; }
.bot-linea { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 14px 16px; border-radius: 20px; background: var(--onix-luz); border: 1px solid rgba(78, 111, 80, .2); text-align: left; color: var(--botella); }
.bot-linea img { width: 30px; height: 30px; flex: none; }
.bot-linea b { display: block; font-weight: 650; }
.bot-linea small { color: var(--tinta-2); font-size: 13.5px; }

/* ───────── FICHA ───────── */
.velo { position: fixed; inset: 0; z-index: 58; background: rgba(5, 12, 9, .55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s; }
.velo.ver { opacity: 1; }
.ficha {
  --fw: min(86vw, 420px);
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--fondo);
  transform: translateY(100%); transition: transform .42s var(--facil); -webkit-overflow-scrolling: touch;
}
.ficha.ver { transform: none; }
/* abierta desde una foto (teléfono): la ficha aparece en su lugar con un fundido y un desplazamiento corto, y la foto vuela
   a su asiento; si subiera desde abajo, la foto llegaría antes que la ficha y quedaría flotando sobre la página */
@media (max-width: 759px) {
  .ficha.hero { transform: translateY(26px); opacity: 0; transition: transform .42s var(--facil), opacity .24s ease; }
  .ficha.hero.ver { transform: none; opacity: 1; }
}
.fi-arriba {
  position: relative; padding: calc(var(--seguro-ar) + 66px) 0 30px; display: grid; place-items: center;
  background: radial-gradient(55% 46% at 50% 56%, rgba(207, 224, 207, .5), rgba(207, 224, 207, .08) 62%, transparent 75%), var(--botella);
}
.fi-cerrar { position: absolute; z-index: 3; left: 14px; top: calc(var(--seguro-ar) + 14px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 237, 226, .12); color: var(--crema); backdrop-filter: blur(8px); }
.fi-cat { position: absolute; z-index: 2; top: calc(var(--seguro-ar) + 27px); left: 66px; right: 66px; text-align: center; color: var(--onix); opacity: .75; pointer-events: none; }
/* la foto del plato entera, a su proporción, sin marco de arco (pedido de Santiago: «imagen cuadrada y lo demás con arco, sacá el arco») */
.fi-foto { width: var(--fw); position: relative; }
.fi-foto img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--botella-2); box-shadow: 0 0 0 1px rgba(230, 242, 227, .22), 0 22px 46px -14px rgba(0, 0, 0, .7); }
/* 6 / 15 · sin foto del plato: cabecera tipográfica (nombre grande, cepa y bodega) sobre una foto del salón apagada */
.fi-arriba.sin-foto { display: block; overflow: hidden; padding: calc(var(--seguro-ar) + 72px) var(--lado) 26px; }
.fi-salon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.fi-arriba.sin-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 38, 29, .3), rgba(18, 38, 29, .94) 72%); }
.fi-tipo { position: relative; z-index: 1; width: min(100%, 680px); margin: 0 auto; color: var(--crema); }
.fi-tipo .rot { color: var(--oro-claro); }
.fi-tipo h2 { font-size: 40px; margin-top: 10px; }
.fi-tipo .vino-meta .vm-a { color: var(--oro-claro); }
.fi-tipo .vino-meta .vm-b { color: rgba(242, 237, 226, .7); }
.fi-sinfoto { padding: 6px 0 0; }
.fi-arco { position: relative; display: block; width: 136px; aspect-ratio: 1 / 1.22; border-radius: 999px 999px 16px 16px; border: 1.5px solid var(--oro); background: var(--noche); box-shadow: 0 0 34px 4px rgba(207, 230, 205, .3), 0 0 80px 14px rgba(207, 230, 205, .1); }
.fi-arco .onix { filter: none; }
.fi-arco img { position: absolute; left: 50%; top: 55%; width: 64px; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 10px rgba(3, 10, 6, .55)); }
.fi-cuerpo { width: min(100%, 680px); margin: 0 auto; padding: 24px var(--lado) 0; }
.fi-cuerpo h2 { font-size: 36px; }
.fi-precio { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; font-size: 22px; font-weight: 300; }
.fi-precio small { font-size: 13.5px; color: var(--tinta-2); font-weight: 500; }
.fi-d { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: rgba(19, 33, 26, .8); }
.fi-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fi-tags span { padding: 6px 12px; border-radius: 999px; background: rgba(78, 111, 80, .1); color: var(--tressen); font-size: 13px; font-weight: 600; }
.fi-bloque { margin-top: 26px; }
.fi-bloque > .rot { display: block; color: var(--salvia); margin-bottom: 10px; }
.fi-int { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--papel); border: 1px solid var(--linea); }
.fi-int .int i u { width: 10px; height: 14px; }
.vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.vars button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--linea); background: var(--papel); text-align: left; transition: border-color .2s, background .2s; }
.vars button.activo { border-color: var(--botella); background: var(--onix-luz); }
.vars b { font-weight: 650; }
.vars span { font-size: 14px; color: var(--tinta-2); }
.marida { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--lado) * -1); padding: 2px var(--lado) 6px; }
.marida::-webkit-scrollbar { display: none; }
.mar { flex: 0 0 auto; width: 250px; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linea); text-align: left; cursor: pointer; }
.mar img { width: 46px; height: 58px; border-radius: 23px 23px 8px 8px; object-fit: cover; flex: none; }
.mar .mar-t { flex: 1; min-width: 0; }
.mar b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.2; }
.mar small { font-size: 13px; color: var(--tinta-2); }
.mar .mas { width: 34px; height: 34px; }
.fi-nota textarea { width: 100%; min-height: 76px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); background: var(--papel); resize: vertical; font-size: 16px; outline: none; }
.fi-nota textarea:focus { border-color: var(--tressen); }
.fi-pie {
  position: sticky; bottom: 0; z-index: 2; margin: 26px calc(var(--lado) * -1) 0; padding: 18px var(--lado) calc(14px + var(--seguro-ab));
  display: flex; gap: 12px; align-items: center; background: linear-gradient(180deg, rgba(242, 237, 226, 0), var(--fondo) 30%);
}
.fi-pie .btn { flex: 1; min-width: 0; min-height: 58px; padding: 0 16px; font-size: 17px; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(5, 15, 10, .7); }
.paso-c { display: flex; align-items: center; gap: 2px; height: 58px; padding: 0 6px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); }
.paso-c button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.paso-c button:active { background: rgba(18, 38, 29, .08); }
.paso-c .num { min-width: 24px; text-align: center; font-weight: 700; font-size: 17px; }
.paso-c.chico { height: 40px; padding: 0 3px; }
.paso-c.chico button { width: 32px; height: 32px; }
.paso-c.chico .ico { width: 18px; height: 18px; }
.paso-c.chico .num { font-size: 15px; min-width: 18px; }

/* ───────── HOJA (pedido, cuenta) ───────── */
.hoja {
  position: fixed; z-index: 64; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 auto; max-width: 640px; border-radius: 28px 28px 0 0; background: var(--fondo);
  padding: 10px var(--lado) calc(20px + var(--seguro-ab)); transform: translateY(105%); transition: transform .4s var(--facil);
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .45);
}
.hoja.ver { transform: none; }
.hoja .asa { width: 42px; height: 5px; border-radius: 3px; background: rgba(18, 38, 29, .18); margin: 0 auto 14px; }
.hoja-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hoja-cab h2 { font-size: 30px; }
.hoja-cab .rot { color: var(--salvia); display: block; margin-bottom: 6px; }
.x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 38, 29, .07); flex: none; }
.linea-p { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.linea-p .lp-img { width: 50px; height: 62px; flex: none; border-radius: 25px 25px 8px 8px; object-fit: cover; background: var(--taupe); }
.linea-p .lp-t { flex: 1; min-width: 0; }
.linea-p b { display: block; font-weight: 650; font-size: 15.5px; line-height: 1.25; }
.linea-p small { display: block; font-size: 13px; color: var(--tinta-2); }
.linea-p .lp-nota { color: var(--cuero); font-style: italic; }
.linea-p .precio { font-weight: 650; font-size: 15px; margin-top: 2px; display: block; }
.total-f { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0 6px; }
.total-f span { font-size: 15px; color: var(--tinta-2); }
.total-f b { font-size: 30px; font-weight: 300; }
.aviso-sin-mesa { margin: 12px 0 14px; padding: 16px; border-radius: 18px; background: var(--onix-luz); color: var(--botella); font-size: 14.5px; }
.aviso-sin-mesa b { display: block; margin-bottom: 4px; font-size: 16px; }
.hoja .btn + .btn { margin-top: 10px; }
.medios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.medios button { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; border-radius: 18px; background: var(--papel); border: 1.5px solid var(--linea); font-weight: 650; text-align: left; transition: border-color .2s, background .2s; }
.medios button:active { transform: scale(.98); }
.medios button.activo { border-color: var(--botella); background: var(--onix-luz); }
.medios button .ico { color: var(--tressen); }
.medios button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hoja-txt { color: var(--tinta-2); font-size: 15px; }

/* ───────── MI MESA ───────── */
.segui { padding-block: 20px 46px; }
.segui .rot { color: var(--onix); opacity: .75; }
.segui h1 { font-size: 40px; margin-top: 10px; }
.segui h1 em { color: var(--oro-claro); }
.segui h1.largo { font-size: clamp(28px, 8.4vw, 40px); }
.segui-sub { margin-top: 10px; font-size: 15px; color: rgba(242, 237, 226, .74); max-width: 42ch; }
.segui-sub b { color: var(--crema); font-weight: 650; }
.pista { position: relative; height: 128px; margin-top: 24px; }
.pista-prods { position: absolute; left: 0; right: 0; top: 0; height: 64px; }
.pp { position: absolute; top: 4px; width: 50px; height: 58px; margin-left: -25px; border-radius: 25px 25px 9px 9px; overflow: hidden; background: var(--botella-2); border: 2px solid var(--oro); rotate: var(--r, 0deg); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6); }
.pp img { width: 100%; height: 100%; object-fit: cover; }
.pp .ini { width: 100%; height: 100%; display: grid; place-items: center; background: var(--botella-2); }
.pp .ini img { width: 26px; height: 26px; object-fit: contain; }
.segui-cta { margin-top: 22px; }
.segui-cta .btn { min-width: 220px; }
.pp em { position: absolute; right: 2px; bottom: 2px; font-style: normal; font-size: 11px; font-weight: 750; padding: 1px 5px; border-radius: 8px; background: var(--oro); color: var(--botella); }
.pp.pp-entregado { border-color: var(--onix); }
.pp.fantasma { background: transparent; border: 1.5px dashed rgba(201, 164, 92, .7); display: grid; place-items: center; color: var(--oro-claro); }
.pp-mas { position: absolute; top: 20px; font-size: 13px; font-weight: 700; color: var(--oro-claro); }
.pista-carril { position: absolute; left: 12.5%; right: 12.5%; top: 80px; height: 4px; border-radius: 2px; background: rgba(242, 237, 226, .14); }
.pista-carril > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro)); box-shadow: 0 0 12px rgba(228, 201, 143, .6); }
.pista-carril > b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--botella); border: 2px solid rgba(242, 237, 226, .3); }
.pista-carril > b.ok { border-color: var(--oro-claro); background: var(--oro); }
.pista-pasos { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 98px; }
.pista-pasos li { position: absolute; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: rgba(242, 237, 226, .5); white-space: nowrap; }
.pista-pasos li.ok { color: rgba(242, 237, 226, .85); }
.pista-pasos li.aca { color: var(--oro-claro); }

.va-banda { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; border-radius: 18px; background: var(--onix-luz); color: var(--botella); font-weight: 650; }
.va-banda .ico { color: var(--tressen); }
.va-banda small { display: block; font-weight: 500; color: var(--tinta-2); font-size: 13px; }
.acciones-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.acciones-3 .accion { min-height: 118px; background: var(--botella); border-color: transparent; }
.acciones-3 .accion.bot { background: var(--tressen); }
.acciones-3 .accion.bot img { width: 28px; height: 28px; filter: invert(1) sepia(.5) saturate(1.4) hue-rotate(5deg) brightness(.95); }
.acciones-3 .accion.activa { background: var(--oro); }
.acciones-3 .accion.va { background: var(--onix-luz); }
.sin-envio { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: var(--oro); color: var(--botella); text-align: left; font-weight: 650; }
.sin-envio span { flex: 1; }
.pedidos-l { margin-top: 8px; }
.ped { padding: 16px 18px; border-radius: 20px; background: var(--papel); border: 1px solid var(--linea); margin-top: 12px; }
.ped-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ped-cab b { font-weight: 700; }
.ped-cab small { color: var(--tinta-2); font-size: 13px; }
.lm { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.lm:first-of-type { border-top: 0; }
.lm .lm-n { flex: 1; min-width: 0; }
.lm .lm-n small { display: block; color: var(--cuero); font-size: 12.5px; font-style: italic; }
.chip-e { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(18, 38, 29, .07); color: var(--tinta-2); }
.chip-e.preparando { background: rgba(211, 155, 42, .16); color: #8a5f10; }
.chip-e.listo { background: rgba(62, 142, 94, .16); color: #23663e; }
.chip-e.entregado { background: rgba(18, 38, 29, .05); color: var(--tinta-3); }
.lm .precio { flex: none; min-width: 74px; text-align: right; font-weight: 600; }
.cuenta-placa { margin-top: 30px; padding: 22px 20px; border-radius: 26px; background: var(--botella); color: var(--crema); position: relative; overflow: hidden; }
.cuenta-placa .rot { color: var(--oro); }
.cuenta-placa .tot { font-size: 46px; font-weight: 300; margin-top: 8px; line-height: 1; }
.cuenta-placa .tot-s { color: rgba(242, 237, 226, .66); font-size: 14px; margin-top: 8px; }
.dividir { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(201, 164, 92, .3); }
.dividir .paso-c { background: rgba(242, 237, 226, .08); border-color: rgba(242, 237, 226, .18); color: var(--crema); }
.dividir .cada { text-align: right; }
.dividir .cada b { display: block; font-size: 24px; font-weight: 600; color: var(--oro-claro); }
.dividir .cada small { font-size: 13px; color: rgba(242, 237, 226, .66); }
.vacia-t { margin-top: 18px; font-size: 15px; color: var(--tinta-2); }
.sug-fila { margin-top: 6px; }

/* ───────── RESERVAR ───────── */
.res-cab { position: relative; overflow: hidden; padding-block: 24px 46px; }
.res-cab h1 { font-size: 42px; max-width: calc(100% - 120px); }
.res-cab p { margin-top: 10px; color: rgba(242, 237, 226, .74); font-size: 15px; max-width: 34ch; }
.res-cab .arco-foto { position: absolute; right: -28px; top: 18px; width: 128px; aspect-ratio: 3 / 4.2; border-radius: 999px 999px 14px 14px; object-fit: cover; opacity: .9; border: 1px solid rgba(201, 164, 92, .6); box-shadow: 0 0 34px 3px rgba(207, 224, 207, .25); }
.form { display: flex; flex-direction: column; gap: 22px; padding-top: 16px; }
.campo > .rot { display: block; color: var(--salvia); margin-bottom: 10px; }
.dias { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--lado) * -1); padding: 2px var(--lado) 4px; }
.dias::-webkit-scrollbar { display: none; }
.dias button { flex: none; width: 64px; padding: 10px 0; border-radius: 18px; border: 1.5px solid var(--linea); background: var(--papel); text-align: center; transition: background .2s, border-color .2s, color .2s; }
.dias button small { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.dias button b { display: block; font-size: 22px; font-weight: 600; margin-top: 2px; }
.dias button em { display: block; font-size: 10.5px; font-style: normal; color: var(--tinta-3); }
.dias button.activo { background: var(--botella); border-color: var(--botella); color: var(--crema); }
.dias button.activo small, .dias button.activo em { color: var(--oro-claro); }
.dias button[disabled] { opacity: .45; }
.franjas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: rgba(18, 38, 29, .06); }
.franjas button { padding: 9px 4px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.franjas button.activo { background: var(--papel); color: var(--botella); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .3); }
.franjas button[disabled] { opacity: .35; }
.horas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.horas button { height: 46px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--papel); font-weight: 650; font-variant-numeric: tabular-nums; }
.horas button.activo { background: var(--oro); border-color: var(--oro); color: var(--botella); }
.horas .nada { grid-column: 1 / -1; color: var(--tinta-2); font-size: 14px; padding: 8px 0; }
.personas { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linea); }
.personas b { font-size: 17px; }
.entrada-t { width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--linea); background: var(--papel); font-size: 16px; outline: none; }
.entrada-t:focus, textarea.entrada-t:focus { border-color: var(--tressen); box-shadow: 0 0 0 3px rgba(78, 111, 80, .15); }
textarea.entrada-t { height: auto; min-height: 80px; padding: 12px 16px; resize: vertical; }
.dos { display: grid; grid-template-columns: 1fr; gap: 12px; }
.res-error { color: var(--alerta); font-size: 14px; font-weight: 600; }
.res-ok { margin-top: 18px; padding: 24px 20px; border-radius: 26px; background: var(--onix-luz); border: 1px solid rgba(78, 111, 80, .25); position: relative; overflow: hidden; }
.res-ok .estado-r { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(211, 155, 42, .18); color: #7a520c; font-weight: 700; font-size: 13px; }
.res-ok .estado-r.confirmada { background: rgba(62, 142, 94, .18); color: #23663e; }
.res-ok .estado-r.rechazada, .res-ok .estado-r.cancelada { background: rgba(200, 85, 61, .15); color: #8d2f1c; }
.res-ok h3 { font-size: 26px; margin: 12px 0 6px; }
.res-ok p { color: var(--tinta-2); font-size: 15px; }
.res-ok .flor-fondo { position: absolute; right: -30px; bottom: -30px; width: 140px; opacity: .14; }
.mis-res { margin-top: 26px; }
.mis-res .ped { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ───────── INFO ───────── */
.placa-horarios { position: relative; overflow: hidden; margin-top: 18px; padding: 28px 22px 26px; border-radius: 28px; background: var(--tressen); color: var(--crema); text-align: center; }
.placa-horarios .flor-arriba { width: 46px; margin: 0 auto 14px; opacity: .9; }
.placa-horarios .flor-fondo { position: absolute; right: -60px; bottom: -60px; width: 220px; opacity: .12; }
.placa-horarios h2 { font-size: 15px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.placa-horarios h2 em { display: block; font-size: 32px; letter-spacing: .02em; font-weight: 750; font-style: italic; text-transform: uppercase; margin-top: 2px; }
.placa-horarios .abierto { margin-top: 14px; color: var(--onix-luz); }
.ph-dia { padding: 14px 0; border-top: 1px solid rgba(242, 237, 226, .22); }
.ph-dia:first-of-type { margin-top: 18px; }
.ph-dia b { display: block; font-size: 19px; font-weight: 650; }
.ph-dia span { display: block; font-style: italic; font-size: 17px; font-weight: 300; }
.ph-dia small { font-size: 12.5px; opacity: .7; }
.ph-dia.hoy b::after { content: 'Hoy'; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--oro); color: var(--botella); font-size: 11px; font-style: normal; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; vertical-align: 3px; }
.mapa { margin-top: 26px; border-radius: 26px; overflow: hidden; background: var(--botella); color: var(--crema); }
.mapa-foto { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: url(app/onix.webp) center / cover, var(--botella-2); }
.mapa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.mapa-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 23, 18, 0) 40%, rgba(11, 23, 18, .82) 92%); }
.mapa-dir { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; }
.mapa-dir .rot { display: block; color: var(--oro-claro); margin-bottom: 6px; }
.mapa-dir b { display: block; font-size: 26px; font-weight: 300; letter-spacing: -.01em; line-height: 1.05; }
.mapa-dir small { display: block; margin-top: 4px; color: rgba(242, 237, 226, .75); font-size: 14.5px; }
.mapa-t { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.botones-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botones-2 .btn { min-height: 48px; font-size: 15px; padding: 0 12px; }
.salon-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.salon-fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 18px 18px; border: 1px solid rgba(201, 164, 92, .5); }
.origen { position: relative; overflow: hidden; margin-top: 30px; padding: 26px 22px; border-radius: 28px; background: var(--taupe); color: #3f3124; }
.origen h2 { font-size: 32px; }
.origen p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; }
.origen .pasos-cafe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.origen .pasos-cafe span { padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .45); text-align: center; font-size: 12.5px; font-weight: 650; }
.origen .flor-fondo { position: absolute; right: -40px; top: -40px; width: 160px; opacity: .14; }

/* ───────── toast y conexión ───────── */
.toast {
  position: fixed; z-index: 95; left: 50%; bottom: calc(var(--barra) + var(--seguro-ab) + 14px); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100% - 32px); padding: 13px 18px; border-radius: 18px; background: var(--noche); color: var(--crema);
  font-size: 14.5px; font-weight: 550; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); transition: opacity .25s, transform .35s var(--facil);
  border: 1px solid rgba(201, 164, 92, .35); text-align: center;
}
.toast.ver { opacity: 1; transform: translate(-50%, 0); }
body.con-pildora .toast { bottom: calc(var(--barra) + var(--seguro-ab) + 82px); }
body:has(#hoja.ver) .toast, body:has(#ficha.ver) .toast, .toast.arriba, body.con-pildora .toast.arriba { top: calc(var(--seguro-ar) + 14px); bottom: auto; transform: translate(-50%, -16px); }
body:has(#hoja.ver) .toast.ver, body:has(#ficha.ver) .toast.ver, .toast.arriba.ver { transform: translate(-50%, 0); }
.toast.mal { background: #5a1f14; border-color: rgba(255, 255, 255, .2); }
.con { position: fixed; z-index: 96; top: calc(var(--seguro-ar) + 8px); left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--atencion); color: #2a1c02; font-size: 12.5px; font-weight: 700; }

/* ───────── pantallas anchas: iPad vertical y escritorio ───────── */
@media (min-width: 700px) {
  :root { --lado: 28px; }
  .cab-logo img { height: 17px; }
  .arco { flex: 0 0 172px; }
  .arcos-fila { gap: 22px; padding-top: 40px; }
  .buscador { flex-basis: 300px; }
  .arcos-tit { font-size: 42px; }
  .promo { width: 380px; }
  .lista { grid-template-columns: 1fr 1fr; }
  .lista .it:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .preguntale { padding: 30px 30px 26px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: start; }
  .preguntale .pg-izq { grid-row: 1 / span 2; }
  .preguntale .sugeridas { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .preguntale .sugeridas button { white-space: normal; }
  .acciones-2 { max-width: 560px; }
  /* iPad y escritorio: el número de la mesa a la izquierda y las dos acciones a la derecha, en una fila */
  .mesa-bloque > div { display: grid; grid-template-columns: auto minmax(0, 560px); justify-content: space-between; align-items: end; column-gap: 32px; }
  .mesa-bloque .acciones-2 { width: 100%; }
  .mesa-bloque .estado-corto { grid-column: 1 / -1; }
  .dos { grid-template-columns: 1fr 1fr; }
  .info-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .info-dos .mapa { margin-top: 18px; }
  .info-dos .mapa-foto { aspect-ratio: 4 / 3.6; }
  .salon-fotos { grid-template-columns: repeat(4, 1fr); }
  .hoja { border-radius: 28px; bottom: 20px; max-height: 86vh; }
  .res-cab .arco-foto { right: 28px; width: 170px; }
  .form { max-width: 680px; }
  .cuenta-y-lista { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
  .cuenta-y-lista .cuenta-placa { margin-top: 20px; }
  .segui-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: end; }
  .segui-dos .pista { margin-top: 0; }
}
@media (min-width: 760px) {
  .ficha { inset: 4vh 0 auto; margin: 0 auto; width: min(92vw, 940px); max-height: 92vh; border-radius: 30px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; transform: translateY(40px) scale(.98); opacity: 0; transition: transform .38s var(--facil), opacity .3s; }
  .ficha.ver { transform: none; opacity: 1; }
  .fi-arriba { padding: 64px 24px 40px; min-height: 100%; }
  .fi-cuerpo { overflow-y: auto; max-height: 92vh; padding: 36px 32px 0; }
  .ficha { --fw: 100%; }   /* en pantalla ancha la foto ocupa todo el ancho de su columna, entera */
  .ficha { width: min(94vw, 960px); grid-template-columns: 1fr 1.12fr; }
  .fi-cuerpo { padding: 36px 28px 0; }
  .fi-arco { width: 180px; }
  /* sin foto del plato: la columna izquierda es una foto del salón acorde (la cava para vinos y tragos) con el nombre abajo */
  .fi-arriba.sin-foto { display: flex; flex-direction: column; justify-content: flex-end; padding: 70px 28px 34px; }
  .fi-salon { opacity: .92; }
  .fi-arriba.sin-foto::after { background: linear-gradient(180deg, rgba(11, 23, 18, .15) 25%, rgba(11, 23, 18, .93) 80%); }
  .fi-tipo h2 { font-size: 44px; }
}
@media (min-width: 1000px) {
  :root { --lado: 40px; }
  .barra { top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: auto; height: calc(var(--cab) + var(--seguro-ar)); padding: var(--seguro-ar) 0 0; gap: 2px; z-index: 41;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .barra > button { flex: none; flex-direction: row; gap: 8px; padding: 0 14px; font-size: 14.5px; letter-spacing: 0; }
  .barra > button.activo { box-shadow: inset 0 -3px 0 var(--oro); }
  .barra > button.activo .b-ico::after { display: none; }
  .b-flor { order: 9; margin-left: 8px; }
  .b-arco { position: relative; left: auto; top: auto; margin: 0; width: 38px; height: 44px; box-shadow: 0 0 16px 1px rgba(207, 224, 207, .3); }
  .b-arco img { width: 21px; height: 21px; }
  .pildora { bottom: 24px; }
  main { padding-bottom: 60px; }
  body.con-pildora main { padding-bottom: 120px; }
  .toast { bottom: 28px; }
  body.con-pildora .toast { bottom: 96px; }
  .arco { flex: 1 0 0; min-width: 0; }
  .arcos-fila { overflow: visible; }
  .lista { column-gap: 48px; }
  .mesa-bloque .envuelve, .arcos-zona .envuelve { max-width: var(--ancho); }
  .dest { width: 200px; }
  .exp { width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}