/* flat&white · demo IMAN. Registro de su Instagram: base de humo como sus carruseles, letra fina en minúscula,
   fotos de producto recortadas y las tazas de su carta (FW_CARTA_MAIN BELGRANO.pdf) para la marca. */
:root {
  --humo: #1C1B19;
  --humo-2: #262523;
  --humo-3: #32302D;
  --borde: rgba(244, 242, 236, .1);
  --crema: #F4F2EC;
  --crema-2: rgba(244, 242, 236, .66);
  --crema-3: rgba(244, 242, 236, .42);
  --papel: #F4F2EC;
  --papel-2: #E9E5DC;
  --papel-3: #DCD7CC;
  --blanco: #FFFFFF;
  --tinta: #1D1D1B;
  --tinta-2: #57554F;
  --gris: #8D8A82;
  --linea: #DCD8CE;
  --petroleo: #3A5C69;
  --petroleo-d: #2A4650;
  --rojo: #AC4646;
  --cielo: #6B9FB5;
  --cielo-c: #8FBCCD;
  --agua: #6DBDBC;
  --piedra: #B5B2A8;
  --tierra: #8C7263;
  --cacao: #695246;
  --texto: 'Jost', system-ui, sans-serif;
  --ancho: 'Archivo', system-ui, sans-serif;
  --sombra: 0 24px 44px -26px rgba(0, 0, 0, .75);
  --sombra-foto: drop-shadow(0 22px 20px rgba(0, 0, 0, .45)) drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
  --barra-h: 70px;
  --seguro: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--humo); }
body {
  margin: 0; min-height: 100dvh; background: var(--humo); color: var(--crema);
  font: 400 16px/1.45 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
/* Títulos como sus carruseles: Jost fino, en minúscula; lo destacado va en peso medio y en el celeste de la taza. */
.w { font-family: var(--texto); font-weight: 300; text-transform: lowercase; letter-spacing: -.02em; line-height: 1; }
.w em { font-style: normal; font-weight: 500; color: var(--cielo-c); }
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .26em; text-transform: uppercase; color: var(--piedra); }
.eyebrow i, .kicker i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: latir 1.8s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .25; } }

/* ---------- Cabecera ---------- */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px; background: color-mix(in srgb, var(--humo) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: var(--crema);
  transition: box-shadow .3s;
}
.top.sombra { box-shadow: 0 1px 0 var(--borde); }
.top .wm { background: var(--crema); }
.marca { display: block; height: 22px; }
.wm { display: block; width: 118px; height: 20px; background: var(--tinta); -webkit-mask: url(assets/flatwhite.svg) left center / contain no-repeat; mask: url(assets/flatwhite.svg) left center / contain no-repeat; }
.top-der { display: flex; align-items: center; gap: 8px; }
.pill {
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px;
  font: 500 13px/1 var(--texto); letter-spacing: .01em; white-space: nowrap;
}
.pill svg { width: 15px; height: 15px; flex: none; }
.pill-demo { color: var(--crema); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .32); transition: background .2s; }
.pill-demo:active { background: rgba(244, 242, 236, .1); }
.tag-mesa { background: var(--crema); color: var(--humo); font: 600 10.5px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .2em; text-transform: uppercase; }
.tag-mesa i { width: 7px; height: 7px; border-radius: 50%; background: var(--agua); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agua) 30%, transparent); }

/* ---------- Vistas ---------- */
main { overflow-x: clip; padding-bottom: calc(var(--barra-h) + var(--seguro) + 30px); }
.vista { animation: entrar-vista .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes entrar-vista { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Inicio: foto de la barra, saludo y riel de tarjetas (como We! Soft) ---------- */
.hd { position: relative; padding: 80px 18px 220px; margin-top: -60px; overflow: hidden; }
.hd-foto { position: absolute; inset: 0; z-index: 0; }
.hd-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); animation: respira 18s ease-in-out infinite alternate; }
.hd-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 27, 25, .55) 0%, rgba(28, 27, 25, .35) 34%, rgba(28, 27, 25, .82) 62%, var(--humo) 86%); }
@keyframes respira { to { transform: scale(1.14) translateY(-8px); } }
.saludo { position: relative; z-index: 3; }
.saludo .kicker { color: rgba(244, 242, 236, .78); }
.saludo h1 { margin: 12px 0 0; font-size: clamp(40px, 12.4vw, 58px); color: var(--crema); }
.hd.con-mesa { padding-bottom: 204px; }
.hd.con-mesa .saludo h1 { font-size: clamp(34px, 10vw, 48px); margin-top: 8px; }
.hd.con-mesa .mesa-acciones { margin-top: 12px; }
.hd.con-mesa .mesa-acciones button { height: 44px; }
.saludo h1 em { font-weight: 500; color: var(--crema); }
.hd-acc { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px; margin-top: 16px; }
.hd-acc .placa, .hd-acc .preg { height: 54px; padding: 0 16px 0 10px; gap: 10px; border-radius: 18px; text-align: left; font: 500 15px/1 var(--texto); }
.hd-acc span { display: flex; flex-direction: column; gap: 5px; }
.hd-acc small { font: 600 8.5px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.hd-acc .placa { display: inline-flex; flex-direction: row; gap: 10px; align-items: center; color: var(--crema); text-decoration: none; white-space: nowrap; background: rgba(28, 27, 25, .46); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hd-acc .placa > svg:first-child { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(244, 242, 236, .12); color: var(--cielo-c); flex: none; }
.hd-acc .placa:active { transform: scale(.97); }
.placa-mesa > i { width: 34px; height: 34px; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--agua) 0 4px, color-mix(in srgb, var(--agua) 26%, transparent) 5px 100%); }
/* Sucursal en la barra de arriba */
.pill-suc { color: var(--crema); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .32); padding: 0 12px 0 10px; gap: 6px; transition: background .2s; }
.pill-suc:active { background: rgba(244, 242, 236, .1); }
.pill-suc > svg:first-child { width: 14px; height: 14px; color: var(--cielo-c); }
.pill-suc .flechita { width: 10px; height: 10px; color: var(--crema-2); }
.hd-acc .preg svg { width: 34px; height: 34px; padding: 5px; }
.hd-acc .preg small { color: var(--crema-2); opacity: 1; }
/* Botones del asistente: borde con los colores de las tazas girando y el vapor de la tacita */
.preg { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 13px; border-radius: 999px; color: var(--crema); font: 500 14.5px/1 var(--texto); white-space: nowrap; box-shadow: 0 14px 28px -14px rgba(172, 70, 70, .7); transition: transform .15s; }
.preg::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; background: conic-gradient(#AC4646, #6B9FB5, #6DBDBC, #B5B2A8, #F4F2EC, #AC4646); transform: translate(-50%, -50%) rotate(0); animation: preg-girar 3.6s linear infinite; }
.preg::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: inherit; background: linear-gradient(180deg, #2B2926, #1C1B19); }
@keyframes preg-girar { to { transform: translate(-50%, -50%) rotate(1turn); } }
.preg:active { transform: scale(.96); }
.preg svg { width: 24px; height: 24px; flex: none; padding: 3px; border-radius: 50%; background: var(--crema); color: var(--humo); overflow: visible; }
.preg svg path + path { transform-box: fill-box; transform-origin: 50% 100%; animation: preg-vapor 2.2s ease-in-out infinite; }
@keyframes preg-vapor { 0%, 100% { opacity: .35; transform: translateY(1px) scaleY(.8); } 50% { opacity: 1; transform: translateY(-1.5px) scaleY(1.1); } }
.preg-carta { display: flex; width: 100%; height: auto; margin-top: 16px; padding: 14px 16px 14px 14px; gap: 13px; border-radius: 22px; text-align: left; white-space: normal; }
.preg-carta::before { width: 140%; animation-duration: 5s; }
.preg-carta::after { inset: 2px; background: linear-gradient(120deg, #2E2B28, #1E1D1B 60%); }
.preg-carta svg { width: 38px; height: 38px; padding: 6px; }
.preg-carta span { display: block; flex: 1; font: 500 16px/1.2 var(--texto); }
.preg-carta small { display: block; margin-top: 4px; font: 400 13.5px/1.25 var(--texto); color: var(--crema-2); }
.preg-carta em { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--crema); color: var(--humo); font: 500 13px/1 var(--texto); font-style: normal; }
.mesa-acciones { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.mesa-acciones button {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px;
  background: var(--crema); color: var(--humo); font: 500 14.5px/1 var(--texto); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); transition: transform .15s, background .25s;
}
.mesa-acciones button:active { transform: scale(.97); }
.mesa-acciones svg { width: 18px; height: 18px; }
.mesa-acciones .hecho { background: var(--agua); }
.wifi { position: relative; z-index: 3; margin: 12px 0 0; font: 600 10.5px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .22em; text-transform: uppercase; color: var(--crema-2); }
.wifi b { color: var(--crema); font-weight: 700; letter-spacing: .14em; }

.rail { position: relative; z-index: 2; display: flex; gap: 14px; margin-top: -246px; padding: 120px 9vw 34px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.drag { scroll-snap-type: none; cursor: grabbing; }
.hc {
  --o: 0; --a: 0; position: relative; flex: 0 0 82vw; max-width: 400px; height: 410px; border-radius: 30px; color: var(--crema);
  background: radial-gradient(120% 70% at 78% 14%, var(--luz) 0%, transparent 62%), linear-gradient(170deg, var(--bg) 0%, var(--bg2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 34px 50px -30px rgba(0, 0, 0, .9);
  scroll-snap-align: center; transform: scale(calc(1 - var(--a) * .12)); transform-origin: 50% 70%; padding: 22px 22px 0; user-select: none; -webkit-user-select: none;
  opacity: calc(1 - var(--a) * .4);
}
.hc-in { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.hc-in::after { content: ""; position: absolute; right: -18%; top: 2%; width: 82%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(244, 242, 236, .09); box-shadow: 0 0 0 26px rgba(244, 242, 236, .025); }
.hc-chip { position: absolute; z-index: 3; left: 22px; top: 168px; display: inline-flex; align-items: center; gap: 8px; font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--crema-2); }
.hc-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent); animation: latir 1.8s infinite; }
.hc h2 { position: absolute; z-index: 3; left: 22px; right: 22px; top: 192px; margin: 0; font-size: clamp(36px, 10.6vw, 46px); line-height: .98; }
.hc h2 em { color: var(--acc); }
.hc p { position: absolute; z-index: 3; left: 22px; bottom: 84px; margin: 0; max-width: 58%; font: 400 13.5px/1.4 var(--texto); color: var(--crema-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-fl { position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: flota 6s ease-in-out infinite; animation-delay: calc(var(--n) * -1.4s); }
@keyframes flota { 50% { transform: translateY(-9px); } }
.hc-foto { position: absolute; right: -20px; top: -74px; width: 64%; filter: var(--sombra-foto); transform: translate3d(calc(var(--o) * 70px), 0, 0) rotate(calc(var(--rot, -4deg) + var(--o) * 10deg)); will-change: transform; }
.hc-foto img { width: 100%; height: auto; }
.hc-cut { position: absolute; right: -40px; top: -44px; width: 80%; filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .4)); transform: translate3d(calc(var(--o) * 60px), 0, 0) rotate(calc(var(--rot, -7deg) + var(--o) * 14deg)); will-change: transform; }
.hc-cut svg { width: 100%; height: auto; overflow: visible; display: block; }
.hc-ph { position: absolute; right: 6px; top: -46px; width: 60%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 26px 30px -14px rgba(0, 0, 0, .7); transform: translate3d(calc(var(--o) * 44px), 0, 0) rotate(calc(5deg + var(--o) * 8deg)); }
.seal { position: absolute; z-index: 4; right: 16px; bottom: 18px; width: 92px; height: 92px; border-radius: 50%; color: var(--crema); display: grid; place-items: center; background: rgba(28, 27, 25, .28); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 22s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.seal svg text { font: 600 7.6px var(--ancho); font-variation-settings: 'wdth' 120; letter-spacing: .16em; fill: var(--crema-2); }
.seal b { position: relative; display: block; text-align: center; font: 500 17px/1 var(--texto); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.seal b small { display: block; font: 600 7px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .2em; margin-bottom: 5px; color: var(--crema-2); }
.hc-b { position: absolute; z-index: 5; left: 22px; bottom: 20px; display: flex; align-items: center; gap: 16px; }
.hc-b .hc-btn { height: 46px; padding: 0 22px; }
.hc-b .lnk { padding: 4px 0; font: 400 13.5px/1 var(--texto); color: var(--crema-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hc.in .hc-foto, .hc.in .hc-cut, .hc.in .hc-ph { animation: sube 1s cubic-bezier(.2, .9, .25, 1.15) backwards; animation-delay: calc(var(--n) * 90ms + 120ms); }
.hc.in .seal { animation: sello .7s cubic-bezier(.2, .9, .25, 1.1) backwards; animation-delay: calc(var(--n) * 90ms + 560ms); }
@keyframes sube { from { opacity: 0; translate: 0 60px; scale: .82; } }
@keyframes sello { from { scale: .4; opacity: 0; } }
.under { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; margin-top: -6px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--crema); opacity: .22; transition: width .35s, opacity .35s; }
.dots i.on { width: 22px; opacity: 1; }
.desliza { display: inline-flex; align-items: center; gap: 8px; font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--crema-2); }
.desliza svg { width: 15px; height: 15px; animation: empuja 1.4s ease-in-out infinite; }
@keyframes empuja { 50% { transform: translateX(4px); } }

/* ---------- Entrada: las 3 tazas del logo ---------- */
#intro { position: fixed; inset: 0; z-index: 95; background: var(--papel); display: grid; place-items: center; cursor: pointer; }
.in-centro { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.in-logo { width: min(52vw, 230px); height: auto; overflow: visible; }
.in-logo .ti { mix-blend-mode: multiply; }
.in-wm { width: 170px; height: 28px; }

/* ---------- Botones y chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font: 500 12.5px/1 var(--texto); color: var(--tinta-2); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--tinta); color: var(--papel); font: 500 15px/1 var(--texto); letter-spacing: .01em;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .7); transition: transform .15s, background .2s; white-space: nowrap; text-decoration: none;
}
.boton:active { transform: scale(.97); }
.boton.claro, .hc-btn { background: var(--crema); color: var(--humo); }
.boton.negro { background: var(--tinta); color: var(--papel); }
.boton.blanco { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.boton.ancho { width: 100%; }

/* ---------- Cinta: sus palabras, tranquila ---------- */
.cinta-caja { overflow: hidden; margin: 18px 0 0; border-block: 1px solid var(--borde); }
.cinta { overflow: hidden; }
.cinta-in { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.cinta span { display: inline-flex; align-items: center; gap: 18px; padding: 15px 0 14px 18px; font: 300 17px/1 var(--texto); color: var(--crema-2); white-space: nowrap; }
.cinta span svg { width: 22px; height: 14px; opacity: .8; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Secciones del inicio ---------- */
.seccion-tit { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 40px 18px 0; }
.seccion-tit h2 { margin: 0; font-size: clamp(30px, 8.6vw, 40px); }
.seccion-tit .kicker { display: flex; margin-bottom: 10px; }
.seccion-tit button { font: 400 13.5px/1 var(--texto); color: var(--crema-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; white-space: nowrap; padding-bottom: 4px; }
.seccion-sub { margin: 10px 18px 0; color: var(--crema-2); font-size: 15px; max-width: 34em; }

/* La casa: fotos reales de su Instagram */
.casa { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 18px 6px; scrollbar-width: none; }
.casa::-webkit-scrollbar { display: none; }
.casa-f { position: relative; flex: 0 0 58vw; max-width: 270px; aspect-ratio: 3 / 4.3; border-radius: 22px; overflow: hidden; scroll-snap-align: start; background: var(--humo-2); text-align: left; color: var(--crema); }
.casa-f:first-child { flex-basis: 74vw; max-width: 360px; }
.casa-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.casa-f:active img { transform: scale(1.04); }
.casa-f::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(20, 19, 17, .86)); }
.casa-f > span { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; }
.casa-f .kicker { display: flex; color: var(--crema-2); font-size: 9.5px; }
.casa-f b { display: block; margin-top: 8px; font: 300 24px/1.02 var(--texto); letter-spacing: -.02em; text-transform: lowercase; }

.bloque { margin: 22px 16px 0; border-radius: 28px; position: relative; overflow: hidden; }
.bloque-tit { margin: 0; font-size: clamp(32px, 9.6vw, 44px); }
.bloque .sub { margin: 10px 0 0; font-size: 15px; }
.claro-bloque { background: var(--papel); color: var(--tinta); }
.claro-bloque .w em { color: var(--petroleo); }
.claro-bloque .kicker, .claro-bloque .eyebrow { color: var(--gris); }
.claro-bloque .sub { color: var(--tinta-2); }

.b-club { padding: 24px 20px 20px; display: grid; grid-template-columns: 1fr 116px; gap: 4px 12px; }
.b-club .mini-torre { grid-row: 1 / span 3; grid-column: 2; align-self: end; height: 172px; display: flex; flex-direction: column-reverse; align-items: center; }
.b-club .mini-torre svg { width: 100%; height: 100%; overflow: visible; }
.barra-prog { margin-top: 16px; height: 4px; border-radius: 2px; background: rgba(29, 29, 27, .12); overflow: hidden; }
.barra-prog i { display: block; height: 100%; width: 0; background: var(--tinta); border-radius: 2px; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.b-club .acciones { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 16px; }

.b-juego { padding: 24px 20px 20px; min-height: 250px; background: var(--papel-2); }
.b-juego .escena { position: absolute; right: 10px; bottom: 0; width: 140px; height: 214px; pointer-events: none; }
.b-juego .cab { position: relative; max-width: 60%; }
.b-juego .boton { margin-top: 20px; }

.riel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 18px 10px; scrollbar-width: none; }
.riel::-webkit-scrollbar { display: none; }
.prod { flex: none; width: 164px; scroll-snap-align: start; text-align: left; display: flex; flex-direction: column; color: inherit; }
.prod .foto { aspect-ratio: 4 / 5; border-radius: 20px; background: var(--papel); overflow: hidden; }
.prod .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.prod:active .foto img { transform: scale(1.04); }
.prod b { display: block; margin: 12px 2px 0; font: 400 14.5px/1.25 var(--texto); flex: 1; }
.prod .fila { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 0; }
.prod .pr { font: 500 15px/1 var(--texto); font-variant-numeric: tabular-nums; }
.mas { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--crema); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .34); flex: none; transition: transform .15s, background .2s; }
.mas:active { transform: scale(.9); background: rgba(244, 242, 236, .1); }
.mas svg { width: 14px; height: 14px; }

.diferencia { margin: 22px 16px 0; padding: 26px 18px 20px; border-radius: 28px; background: var(--papel); color: var(--tinta); }
.diferencia h2 { margin: 0; font-size: clamp(30px, 8.8vw, 40px); }
.diferencia .kicker { color: var(--gris); margin-bottom: 12px; }
.dif-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.dif-f { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--tinta); }
.df-img { position: relative; width: 100%; aspect-ratio: 1; display: block; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #fff 0%, var(--papel-2) 70%); }
.df-img img { position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(40, 30, 20, .22)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2); }
.dif-f:active .df-img img { transform: scale(.95) rotate(-3deg); }
.dif-f b { display: block; margin-top: 10px; font: 500 15px/1 var(--texto); text-transform: lowercase; }
.df-ratio { display: flex; gap: 2px; width: 84%; height: 6px; margin-top: 10px; border-radius: 3px; overflow: hidden; }
.df-ratio i { display: block; height: 100%; background: #E7DCC8; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.df-ratio i:first-child { background: #3B2418; }
.diferencia.ver .df-ratio i { transform: none; }
.diferencia.ver .df-ratio i:last-child { transition-delay: .35s; }
.dif-f small { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.3; color: var(--tinta-2); }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 12.5px; color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }

.sucursales { display: grid; margin: 12px 18px 0; }
.suc-card { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--borde); text-align: left; width: 100%; }
.suc-card .ico { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--humo-2); }
.suc-card .ico svg { width: 17px; height: 17px; color: var(--crema-2); }
.suc-card.on .ico svg { color: var(--cielo-c); }
.suc-card b { display: block; font: 500 16px/1.15 var(--texto); }
.suc-card small { display: block; color: var(--crema-2); font-size: 13.5px; margin-top: 3px; }
.suc-card .estado { margin-left: auto; height: 30px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; font: 600 9.5px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-2); box-shadow: inset 0 0 0 1px var(--borde); white-space: nowrap; }
.suc-card.on .estado { background: var(--crema); color: var(--humo); box-shadow: none; }

.pie-app { margin: 44px 16px 0; text-align: center; color: var(--crema-3); font-size: 12.5px; }
.pie-app .wm { margin: 0 auto 10px; width: 104px; background: var(--crema-3); }

/* Sucursales dentro de una hoja clara */
.hoja .sucursales { margin: 14px 0 0; }
.hoja .suc-card { border-color: var(--linea); }
.hoja .suc-card small { color: var(--tinta-2); }
.hoja .suc-card .ico { background: var(--papel-2); }
.hoja .suc-card .estado { color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linea); }
.hoja .suc-card.on .estado { background: var(--tinta); color: var(--papel); }

/* ---------- Barra inferior ---------- */
.barra {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--seguro)); z-index: 40; height: var(--barra-h);
  display: grid; grid-template-columns: 1fr 1fr 80px 1fr 1fr; align-items: center; border-radius: 24px;
  background: color-mix(in srgb, #121110 88%, transparent); color: var(--crema); box-shadow: inset 0 0 0 1px var(--borde), 0 18px 34px -16px rgba(0, 0, 0, .8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-width: 560px; margin: 0 auto;
}
.barra button { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 400 11px/1 var(--texto); color: var(--crema-3); transition: color .25s; }
.barra button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.barra button.on { color: var(--crema); }
.barra .b-centro { position: relative; }
.b-taza { position: absolute; left: 50%; top: -24px; width: 76px; height: 76px; transform: translateX(-50%); border-radius: 50%; background: var(--papel); display: grid; place-items: center; box-shadow: 0 0 0 5px #151413, 0 14px 24px -10px rgba(0, 0, 0, .7); transition: transform .15s; }
.b-taza svg { width: 52px; height: auto; overflow: visible; }
.b-taza .vapor { stroke: var(--gris); stroke-width: 4; fill: none; stroke-linecap: round; opacity: 0; animation: vapor 2.8s ease-in-out infinite; }
.b-taza .vapor:nth-child(2) { animation-delay: .5s; }
.b-taza .vapor:nth-child(3) { animation-delay: 1s; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-14px); } }
.barra .b-centro:active .b-taza { transform: translateX(-50%) scale(.94); }

.pedido-flota {
  position: fixed; left: 50%; bottom: calc(var(--barra-h) + var(--seguro) + 22px); z-index: 39; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 7px 0 20px; border-radius: 999px; background: var(--crema); color: var(--humo);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .8); font: 500 14.5px/1 var(--texto); white-space: nowrap; font-variant-numeric: tabular-nums;
  animation: flota-in .5s cubic-bezier(.2, .9, .3, 1.2);
}
.pedido-flota .n { min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; background: var(--humo); color: var(--crema); display: grid; place-items: center; font: 500 14px/1 var(--texto); }
.pedido-flota.salta { animation: salta .5s cubic-bezier(.3, 1.5, .4, 1); }
@keyframes flota-in { from { transform: translateX(-50%) translateY(30px) scale(.9); opacity: 0; } }
@keyframes salta { 40% { transform: translateX(-50%) scale(1.07); } }

/* ---------- Hojas (claras, como el papel de su carta) ---------- */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(12, 11, 10, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fundido .3s; }
@keyframes fundido { from { opacity: 0; } }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--papel); color: var(--tinta); border-radius: 30px 30px 0 0; padding: 10px 0 calc(18px + var(--seguro));
  animation: subir .5s cubic-bezier(.2, .9, .2, 1); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5);
}
.hoja .w em { color: var(--petroleo); }
.hoja .kicker, .hoja .eyebrow { color: var(--gris); }
.hoja .mas { color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.hoja.cerrando { animation: bajar .3s cubic-bezier(.4, 0, 1, 1) forwards; }
.velo.cerrando { animation: fundido .3s reverse forwards; }
@keyframes subir { from { transform: translateY(100%); } }
@keyframes bajar { to { transform: translateY(100%); } }
.tirador { width: 40px; height: 4px; border-radius: 2px; background: var(--linea); margin: 0 auto 8px; }
.hoja-in { padding: 0 20px; }
.hoja h2 { margin: 8px 0 0; font-size: clamp(34px, 10vw, 46px); }
.hoja .desc { margin: 10px 0 0; font-size: 16px; color: var(--tinta-2); }
.hoja .nota-caja { margin: 14px 0 0; font-size: 14px; padding: 12px 14px; border-radius: 16px; background: var(--papel-2); color: var(--tinta-2); }
.cerrar { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .7); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--linea); z-index: 3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cerrar svg { width: 15px; height: 15px; stroke: var(--tinta); stroke-width: 2; fill: none; stroke-linecap: round; }

.ficha-foto { position: relative; display: grid; place-items: center; height: min(64vw, 260px); margin: 4px 0 16px; padding: 18px; border-radius: 26px; background: radial-gradient(70% 70% at 50% 52%, #fff 0%, var(--papel-2) 100%); }
.ficha-foto img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; filter: drop-shadow(0 18px 16px rgba(40, 30, 20, .24)) drop-shadow(0 3px 5px rgba(40, 30, 20, .16)); animation: aparece .8s cubic-bezier(.2, .9, .25, 1.1) backwards .06s; }
.ficha-tienda { padding: 0; overflow: hidden; height: auto; aspect-ratio: 4 / 3.4; background: #fff; }
.ficha-tienda img { inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; }
@keyframes aparece { from { opacity: 0; transform: translateY(40px) scale(.9) rotate(-4deg); } }
.ficha-taza { position: relative; display: grid; place-items: center; height: 210px; margin: 6px 0 18px; }
.ficha-taza svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.ficha-taza .vertido { position: absolute; top: 0; left: 50%; width: 9px; height: 0; border-radius: 0 0 6px 6px; transform: translateX(-50%); }
.receta-caja { display: flex; gap: 16px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: 20px; background: var(--papel-2); }
.receta-caja .mini-taza { width: 74px; flex: none; }
.receta-caja .prop { margin: 0 0 10px; font: 500 14px/1.3 var(--texto); color: var(--tinta); }
.receta-caja .mini-taza svg { width: 100%; height: auto; overflow: visible; }
.receta { flex: 1; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.receta li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.receta li i { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.receta li b { margin-left: auto; font: 500 13.5px/1 var(--texto); font-variant-numeric: tabular-nums; }
.op-tit { margin: 22px 0 10px; font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones button { height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font: 400 14px/1 var(--texto); transition: background .2s, color .2s; }
.opciones button.on { background: var(--tinta); color: var(--papel); box-shadow: none; }
.opciones button small { opacity: .66; margin-left: 5px; font-variant-numeric: tabular-nums; }
.agregar-pie { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; margin-top: 24px; padding: 12px 0 2px; background: linear-gradient(transparent, var(--papel) 30%); }
.cant { display: flex; align-items: center; height: 52px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); }
.cant button { width: 44px; height: 52px; font: 300 22px/1 var(--texto); }
.cant span { min-width: 20px; text-align: center; font: 500 16px/1 var(--texto); }
.agregar-pie .boton { flex: 1; }

/* ---------- Carta ---------- */
.carta-cab { position: relative; padding: 18px 18px 6px; }
.carta-cab h1 { margin: 12px 0 0; font-size: clamp(54px, 16vw, 80px); }
.carta-cab p { margin: 10px 0 0; color: var(--crema-2); font-size: 15px; }
.chips-sec { position: sticky; top: 54px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 12px 18px; background: color-mix(in srgb, var(--humo) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: none; }
.chips-sec::-webkit-scrollbar { display: none; }
.chips-sec button { flex: none; height: 36px; padding: 0 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--borde); font: 400 13.5px/1 var(--texto); color: var(--crema-2); white-space: nowrap; transition: background .25s, color .25s; }
.chips-sec button.on { background: var(--crema); color: var(--humo); box-shadow: none; }
.sec { padding: 30px 18px 4px; scroll-margin-top: 112px; }
.sec h2 { margin: 0; font-size: clamp(34px, 10vw, 46px); }
.sec .nota { margin: 10px 0 0; font-size: 14px; color: var(--crema-2); }
.sec .disp { display: inline-flex; margin-top: 10px; padding: 7px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--borde); font: 400 12.5px/1.3 var(--texto); color: var(--crema-2); }
.grupo-tit { margin: 24px 0 4px; font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--piedra); }
.grupo-nota { margin: 6px 0 0; font-size: 13px; color: var(--crema-2); }
.items { display: grid; }
.item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--borde); text-align: left; }
.item .mini { position: relative; width: 84px; height: 84px; flex: none; border-radius: 20px; display: block; background: radial-gradient(70% 70% at 50% 45%, var(--humo-3), var(--humo-2)); }
.item .mini img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2); }
.item:active .mini img { transform: scale(1.08) rotate(-3deg); }
.item .t { flex: 1; min-width: 0; }
.item b { display: block; font: 500 16px/1.2 var(--texto); }
.item small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--crema-2); }
.item .pr { display: block; margin-top: 7px; font: 500 14.5px/1 var(--texto); font-variant-numeric: tabular-nums; color: var(--crema); }
.cafes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.cafe-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px 14px; border-radius: 24px; background: radial-gradient(90% 60% at 50% 26%, var(--humo-3), var(--humo-2) 70%); box-shadow: inset 0 0 0 1px var(--borde); text-align: left; min-height: 226px; overflow: hidden; }
.cafe-card .ct { position: relative; width: 100%; height: 118px; display: grid; place-items: center; margin-bottom: 10px; }
.cafe-card .ct img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .5)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.3); }
.cafe-card .ct svg { height: 78%; width: auto; max-width: 100%; overflow: visible; }
.cafe-card:active .ct img, .cafe-card:active .ct svg { transform: scale(.95) rotate(-3deg); }
.cafe-card b { font: 500 17px/1.05 var(--texto); text-transform: lowercase; }
.cafe-card small { margin-top: 5px; font-size: 13px; line-height: 1.3; color: var(--crema-2); flex: 1; }
.cafe-card .pr { margin-top: 10px; font: 500 14px/1 var(--texto); font-variant-numeric: tabular-nums; }
.leches { margin: 20px 18px 0; padding: 16px 18px; border-radius: 20px; background: var(--humo-2); font-size: 14px; color: var(--crema-2); }
.leches b { font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; text-transform: uppercase; letter-spacing: .22em; color: var(--crema); }

/* Colores de sus tazas sobre el negro */
.chips-sec button i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); margin-right: 8px; display: inline-block; vertical-align: 1px; }
.chips-sec button.on { background: var(--sc); color: var(--si); }
.chips-sec button.on i { background: currentColor; opacity: .5; }
.sec-cab { display: flex; align-items: flex-end; gap: 12px; }
.sec-taza { width: 58px; flex: none; margin-bottom: 2px; }
.sec-taza svg { width: 100%; height: auto; overflow: visible; display: block; }
.sec-color .grupo-tit { color: var(--sc); }
.sec-color .item .pr { color: var(--sc); }
.sec-color .item .mini { background: var(--sc); }
.sec-color .item .mini img { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.sec-color .item .mas { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 70%, transparent); color: var(--sc); }
.sec-color .disp { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 50%, transparent); }
.sec-color h2 { color: var(--crema); }

.cafe-card { background: var(--cc); color: var(--ci); box-shadow: none; }
.cafe-card .cc-taza { position: absolute; right: -26%; bottom: -14%; width: 92%; opacity: .14; pointer-events: none; }
.cafe-card .cc-taza svg { width: 100%; height: auto; display: block; }
.cafe-card .ct img { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .38)); }
.cafe-card small { color: inherit; opacity: .74; }
.cafe-card .cc-int { margin-bottom: 9px; }
.cafe-card .pr { position: relative; }
.int { display: inline-flex; gap: 3px; flex: none; }
.int i { width: 10px; height: 4px; border-radius: 2px; background: currentColor; opacity: .26; }
.int i.on { opacity: 1; }
.int.grande i { width: 22px; height: 5px; border-radius: 3px; }
.int-caja { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; margin-top: 18px; color: var(--tinta); }
.int-caja .int i.on { background: var(--cc); opacity: 1; }
.int-caja p { grid-column: 1 / -1; margin: 0; font-size: 14.5px; color: var(--tinta-2); }

.escala { margin-top: 18px; padding: 14px 6px 8px; border-radius: 22px; background: var(--humo-2); box-shadow: inset 0 0 0 1px var(--borde); }
.escala-cab { display: flex; justify-content: space-between; padding: 0 10px; font: 600 9.5px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--crema-2); }
.escala-cab::before { content: ""; order: 1; flex: 1; height: 1px; margin: 4px 12px 0; background: linear-gradient(90deg, #F3EADB, #3B2418); opacity: .7; }
.escala-cab span:last-child { order: 2; }
.escala-tazas { display: flex; gap: 2px; overflow-x: auto; padding: 12px 4px 2px; scrollbar-width: none; }
.escala-tazas::-webkit-scrollbar { display: none; }
.escala-tazas button { flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.escala-tazas .et { position: relative; width: 48px; height: 32px; display: grid; place-items: end center; }
.escala-tazas .et img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.escala-tazas .et svg { width: 100%; height: auto; overflow: visible; }
.escala-tazas small { font: 400 11.5px/1.1 var(--texto); color: var(--crema-2); text-transform: lowercase; text-align: center; }

/* Orígenes: una vitrina, un país por vez, en el color de sus tazas */
.vitrina { margin: 18px 18px 0; }
.vt-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 12px; scrollbar-width: none; }
.vt-tabs::-webkit-scrollbar { display: none; }
.vt-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--borde); font: 400 14px/1 var(--texto); color: var(--crema-2); transition: background .3s, color .3s, box-shadow .3s; }
.vt-tabs button i { width: 7px; height: 7px; border-radius: 50%; background: var(--oc); }
.vt-tabs button.on { background: var(--oc); color: var(--oi); box-shadow: none; }
.vt-tabs button.on i { background: currentColor; opacity: .5; }
.vt-paneles { display: grid; touch-action: pan-y; }
.vt-panel { grid-area: 1 / 1; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 22px 20px 18px; border-radius: 28px; background: var(--oc); color: var(--oi); opacity: 0; transform: translateX(34px) scale(.97); transition: opacity .45s, transform .75s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.vt-panel.antes { transform: translateX(-34px) scale(.97); }
.vt-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.vt-taza { position: absolute; left: -18%; bottom: -10%; width: 70%; opacity: .1; pointer-events: none; }
.vt-taza svg { width: 100%; height: auto; display: block; }
.vt-cab { position: relative; }
.vt-cab .kicker { color: inherit; opacity: .74; letter-spacing: .18em; }
.vt-cab h3 { margin: 10px 0 0; font-size: clamp(50px, 15.5vw, 76px); line-height: .9; }
.vt-cuerpo { position: relative; display: grid; grid-template-columns: 1fr 46%; gap: 14px; align-items: end; margin-top: 14px; }
.vt-pts { position: relative; width: 62px; height: 62px; }
.vt-pts svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vt-pts circle { fill: none; stroke: currentColor; stroke-width: 3; }
.vt-pts circle:first-child { opacity: .2; }
.vt-pts circle + circle { stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1) .15s; }
.vt-panel.on .vt-pts circle + circle { stroke-dashoffset: var(--pts); }
.vt-pts b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 300 22px/1 var(--texto); }
.vt-pts small { display: block; margin-top: 2px; font: 600 7px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.vt-notas { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.vt-notas li { display: flex; align-items: center; gap: 9px; font: 400 15px/1.2 var(--texto); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.vt-notas li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; flex: none; }
.vt-panel.on .vt-notas li { opacity: 1; transform: none; }
.vt-panel.on .vt-notas li:nth-child(2) { transition-delay: .07s; }
.vt-panel.on .vt-notas li:nth-child(3) { transition-delay: .14s; }
.vt-panel.on .vt-notas li:nth-child(4) { transition-delay: .21s; }
.vt-datos p { margin: 14px 0 0; font: 400 12.5px/1.4 var(--texto); opacity: .74; }
.vt-foto { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: rgba(0, 0, 0, .15); box-shadow: 0 26px 30px -20px rgba(0, 0, 0, .65); transform: translateX(36px) rotate(9deg); transition: transform .9s cubic-bezier(.2, .9, .25, 1.1) .05s; }
.vt-panel.antes .vt-foto { transform: translateX(-36px) rotate(-6deg); }
.vt-panel.on .vt-foto { transform: rotate(3deg); }
.vt-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-pie { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.vt-pie > span { font: 500 19px/1 var(--texto); font-variant-numeric: tabular-nums; }
.vt-pie small { display: block; margin-top: 5px; font: 400 12px/1 var(--texto); opacity: .7; }
.vt-btn { height: 46px; padding: 0 22px; background: var(--oi); color: var(--oc); }
.vt-puntos { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.vt-puntos i { width: 6px; height: 6px; border-radius: 3px; background: var(--crema); opacity: .25; transition: opacity .3s, transform .3s; }
.vt-puntos i.on { opacity: .9; transform: scaleX(2.2); }

/* De la carta: mosaico en los colores de cada sección */
.de-carta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 18px 0; }
.dc { position: relative; display: flex; flex-direction: column; min-height: 222px; padding: 12px 14px 14px; border-radius: 24px; background: var(--sc); color: var(--si); text-align: left; overflow: hidden; }
.dc-foto { position: relative; display: block; height: 116px; margin: 0 -4px 10px; }
.dc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .34)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.3); }
.dc:active .dc-foto img { transform: scale(.95) rotate(-3deg); }
.dc-t { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.dc .kicker { color: inherit; opacity: .72; font-size: 9px; letter-spacing: .2em; }
.dc b { margin-top: 7px; font: 400 19px/1.08 var(--texto); letter-spacing: -.01em; text-transform: lowercase; }
.dc .pr { margin-top: auto; padding-top: 10px; font: 500 14.5px/1 var(--texto); font-variant-numeric: tabular-nums; }
.dc:first-child { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 196px; padding: 18px 12px 16px 18px; }
.dc:first-child .dc-foto { order: 2; flex: 0 0 52%; height: auto; margin: -6px 0 -4px; }
.dc:first-child .dc-t { justify-content: flex-start; }
.dc:first-child b { margin-top: 10px; font-size: 32px; line-height: .98; font-weight: 300; }

/* Tamaños dinámicos en los rieles: la que queda adelante, más grande */
.foco > * { transform: scale(calc(1 - var(--a, 0) * .1)); transform-origin: 50% 60%; opacity: calc(1 - var(--a, 0) * .3); will-change: transform; }
.casa.foco { position: relative; scroll-padding-inline: 18px; }
.casa.foco > * { transform-origin: 0 100%; transform: scale(calc(1 - var(--a, 0) * .12)); opacity: calc(1 - var(--a, 0) * .35); }
.casa.foco .casa-f, .casa.foco .casa-f:first-child { flex-basis: 66vw; max-width: 310px; scroll-snap-align: start; }

/* Onda de la carta: dos líneas que se dibujan mientras bajás por los cafés.
   Pasan por encima del fondo de cada tarjeta y por debajo de la taza y el texto (las tarjetas no arman capa propia). */
#sec-cafe { position: relative; isolation: isolate; }
#sec-cafe > :not(.onda):not(.cafes-grid):not(.escala) { position: relative; z-index: 2; }
#sec-cafe .escala { position: relative; }
#sec-cafe .escala > *, #sec-cafe .cafe-card > :not(.cc-taza) { position: relative; z-index: 2; }
.onda { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.onda path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.onda .oa { stroke: url(#onda-ga); stroke-width: 2.6; }
.onda .ob { stroke: url(#onda-gb); stroke-width: 1.6; }
.onda circle { fill: var(--crema); }

/* ---------- Pedido ---------- */
.ped-lista { margin: 16px 0 0; padding: 0; list-style: none; }
.ped-lista li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.ped-lista .ico { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--papel-2); }
.ped-lista .ico svg { width: 72%; height: 72%; overflow: visible; }
.ped-lista .ico img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.ped-lista .ico img.foto-llena { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.ped-lista .t { flex: 1; min-width: 0; }
.ped-lista b { display: block; font: 500 15px/1.2 var(--texto); }
.ped-lista small { color: var(--tinta-2); font-size: 13px; }
.ped-lista .pr { font: 500 14.5px/1 var(--texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ped-lista .cant { height: 36px; }
.ped-lista .cant button { width: 30px; height: 36px; font-size: 19px; }
.modo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.modo button { padding: 13px 14px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linea); text-align: left; font-size: 13px; color: var(--tinta-2); transition: box-shadow .2s, background .2s; }
.modo button b { display: block; color: var(--tinta); font: 500 14.5px/1.15 var(--texto); margin-bottom: 3px; }
.modo button.on { background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; font: 300 26px/1 var(--texto); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.total > span:last-child { font-weight: 500; }
.total small { font: 400 13px/1 var(--texto); letter-spacing: 0; color: var(--tinta-2); }
.tirada { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 14px 14px 16px; border-radius: 22px; background: var(--humo); color: var(--crema); text-align: left; width: 100%; }
.tirada b { display: block; font: 500 15px/1.2 var(--texto); }
.tirada small { font-size: 13px; color: var(--crema-2); }
.tirada .t { flex: 1; }
.tirada .ir { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--crema); color: var(--humo); display: grid; place-items: center; font: 500 13.5px/1 var(--texto); flex: none; }
.tirada svg { width: 40px; flex: none; }

/* Seguimiento */
.seg { text-align: center; padding-top: 6px; }
.seg .numero { display: inline-flex; margin-top: 6px; font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.seg h2 { margin-top: 12px; }
.seg .ficha-taza { height: 190px; margin: 18px 0 24px; }
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.pasos li { position: relative; padding-top: 16px; font: 400 12px/1.2 var(--texto); color: var(--gris); }
.pasos li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--linea); transition: background .4s; }
.pasos li.on { color: var(--tinta); font-weight: 500; }
.pasos li.on::before, .pasos li.ya::before { background: var(--tinta); }
.sumaste { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 16px; border-radius: 22px; background: var(--papel-2); text-align: left; }
.sumaste svg { width: 54px; flex: none; overflow: visible; }
.sumaste b { display: block; font: 500 15px/1.2 var(--texto); }
.sumaste small { font-size: 13.5px; color: var(--tinta-2); }

/* ---------- Tus tazas ---------- */
.club-cab { padding: 18px 18px 0; }
.club-cab h1 { margin: 12px 0 0; font-size: clamp(54px, 16vw, 80px); }
.club-cab p { margin: 10px 0 0; color: var(--crema-2); }
.mi-torre { position: relative; margin: 20px 16px 0; padding: 22px 18px; border-radius: 30px; background: var(--papel); color: var(--tinta); display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; align-items: end; min-height: 330px; overflow: hidden; }
.mi-torre .pila { height: 300px; display: flex; align-items: flex-end; justify-content: center; }
.mi-torre .pila svg { width: 100%; height: 100%; overflow: visible; }
.mi-torre .cuenta { font: 200 84px/.8 var(--texto); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mi-torre .cuenta small { font-size: 30px; color: var(--gris); font-weight: 300; }
.mi-torre p { margin: 12px 0 0; font-size: 15px; color: var(--tinta-2); }
.qr-card { margin: 12px 16px 0; padding: 18px; border-radius: 28px; background: var(--humo-2); box-shadow: inset 0 0 0 1px var(--borde); color: var(--crema); display: flex; gap: 16px; align-items: center; }
.qr-card.vale { background: var(--rojo); box-shadow: none; }
.qr-card .qr { width: 100px; height: 100px; flex: none; border-radius: 16px; background: var(--papel); padding: 8px; }
.qr-card .qr svg { width: 100%; height: 100%; }
.qr-card b { display: block; font: 500 18px/1.15 var(--texto); }
.qr-card small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--crema-2); }
.qr-card.vale small { color: rgba(255, 255, 255, .82); }
.beneficios { display: grid; margin: 10px 18px 0; }
.benef { display: flex; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--borde); }
.benef .ico { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--papel); }
.benef .ico svg { width: 30px; overflow: visible; }
.benef b { display: block; font: 500 15.5px/1.2 var(--texto); }
.benef small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--crema-2); }
.historial { margin: 16px 18px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.historial .chip { height: 34px; color: var(--crema-2); box-shadow: inset 0 0 0 1px var(--borde); }
.historial .chip span { width: 24px; display: inline-block; }

/* ---------- Tienda ---------- */
.tienda-cab { position: relative; margin: 0; padding: 120px 18px 26px; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.tienda-cab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tienda-cab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 27, 25, .25), rgba(28, 27, 25, .72) 52%, var(--humo) 96%); }
.tienda-cab > * { position: relative; z-index: 1; }
.tienda-cab h1 { margin: 12px 0 0; font-size: clamp(54px, 16vw, 80px); }
.tienda-cab p { margin: 10px 0 0; max-width: 30em; font-size: 15px; color: var(--crema-2); }
.grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 16px 18px 0; }
.grilla .prod { width: auto; }
.pie-nota { margin: 22px 18px 0; font-size: 12.5px; color: var(--crema-3); }

/* ---------- Juego ---------- */
.juego { position: fixed; inset: 0; z-index: 60; background: var(--papel); color: var(--tinta); overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; animation: fundido .3s; }
.j-cab { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 0; pointer-events: none; }
.j-cab > * { pointer-events: auto; }
.j-marcador { font: 200 84px/.8 var(--texto); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.j-marcador small { display: block; margin-top: 10px; font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.j-meta { text-align: right; font: 600 10px/1.3 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.j-meta b { display: block; margin-top: 5px; font: 500 15px/1 var(--texto); color: var(--tinta); letter-spacing: 0; text-transform: none; }
.j-meta .cerrar { position: static; margin-left: auto; margin-bottom: 10px; }
.j-mundo { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; }
.j-mundo svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.j-mundo .taza-j { mix-blend-mode: multiply; }
.j-pista { position: absolute; left: 0; right: 0; bottom: calc(40px + var(--seguro)); z-index: 3; text-align: center; font: 600 10px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); pointer-events: none; }
.j-toast { position: absolute; left: 50%; top: 38%; z-index: 4; transform: translate(-50%, -50%); font: 300 34px/1 var(--texto); letter-spacing: -.02em; text-transform: lowercase; color: var(--rojo); pointer-events: none; white-space: nowrap; opacity: 0; }
.j-toast.ver { animation: toast .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }
.j-panel { position: absolute; left: 16px; right: 16px; bottom: calc(24px + var(--seguro)); z-index: 5; padding: 24px 20px 20px; border-radius: 30px; background: var(--humo); color: var(--crema); animation: subir .5s cubic-bezier(.2, .9, .2, 1); max-width: 520px; margin: 0 auto; }
.j-panel h2 { margin: 0; font-size: clamp(34px, 10vw, 46px); }
.j-panel p { margin: 10px 0 0; font-size: 15.5px; color: var(--crema-2); }
.j-panel .botones { display: flex; gap: 10px; margin-top: 20px; }
.j-panel .boton { flex: 1; background: var(--crema); color: var(--humo); }
.j-panel .boton.blanco { background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .4); }
.j-panel .vale { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--papel); color: var(--tinta); display: flex; align-items: center; gap: 12px; }
.j-panel .vale b { display: block; font: 500 15px/1.2 var(--texto); }
.j-panel .vale code { display: block; margin-top: 4px; font: 600 18px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .14em; color: var(--rojo); }
.j-panel.gano { background: var(--rojo); }
.j-panel.gano p { color: rgba(255, 255, 255, .86); }

/* ---------- Aviso ---------- */
.aviso { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 80; transform: translate(-50%, -150%); padding: 12px 20px; border-radius: 999px; background: var(--crema); color: var(--humo); font: 500 14px/1.2 var(--texto); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7); transition: transform .5s cubic-bezier(.2, 1.2, .3, 1); max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.aviso.ver { transform: translate(-50%, 0); }

/* Vuelo de un producto al pedido */
.vuela { position: fixed; z-index: 70; pointer-events: none; will-change: transform; }
.vuela svg, .vuela img { width: 100%; height: 100%; overflow: visible; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); }

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

/* ---------- Aviso para jugar: notificación que baja desde arriba ---------- */
.invita { position: fixed; z-index: 60; left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px); max-width: 460px; margin: 0 auto; display: flex; align-items: stretch; border-radius: 24px; background: rgba(44, 42, 39, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(244, 242, 236, .12); color: var(--crema); transform: translateY(calc(-100% - 24px)); transition: transform .6s cubic-bezier(.2, .9, .25, 1.15); touch-action: pan-x; }
.invita.ver { transform: none; }
.inv-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 12px; text-align: left; color: inherit; }
.inv-ico { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--papel); }
.inv-ico svg { width: 32px; height: auto; overflow: visible; }
.invita.ver .inv-ico svg { animation: inv-taza 1.4s cubic-bezier(.3, 1.6, .5, 1) .5s 2; }
@keyframes inv-taza { 30% { transform: translateY(-5px) rotate(-8deg); } 60% { transform: translateY(1px) rotate(4deg); } }
.inv-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.inv-cab { display: flex; justify-content: space-between; font: 600 9px/1 var(--ancho); font-variation-settings: 'wdth' 125; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-2); }
.inv-cab small { font: inherit; letter-spacing: .1em; text-transform: none; font-family: var(--texto); font-size: 11px; }
.inv-t > b { font: 500 15px/1.2 var(--texto); }
.inv-t > span:last-child { font: 400 13px/1.3 var(--texto); color: var(--crema-2); }
.inv-jugar { flex: none; align-self: center; padding: 10px 14px; border-radius: 999px; background: #AC4646; color: var(--crema); font: 500 13.5px/1 var(--texto); }
.inv-x { width: 36px; flex: none; display: grid; place-items: center; color: var(--crema-2); }
.inv-x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
/* Tiradas en el botón del medio */
.b-n { position: absolute; z-index: 2; left: calc(50% + 16px); top: -30px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #AC4646; color: var(--crema); font: 600 12px/22px var(--texto); text-align: center; box-shadow: 0 0 0 3px #151413; animation: b-n 2.4s ease-in-out infinite; }
@keyframes b-n { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(.96); } }