/* Bemo SHOP — lo propio de la landing.

   Todo lo de familia (tokens, barra, hero, ventana, secciones, planes, pie)
   viene de landing-bemo/. Acá sólo hay lo que existe en esta página: las dos
   pantallas nuevas de la ventana (stock y caja), la carrera contra el
   cuaderno, las ilustraciones de "Cuatro cosas", la lista tachada y la
   cuenta de artículos. Colores sólo desde tokens; si falta un matiz, sale de
   un color-mix de tokens.

   Números: fuera de la ventana no hay monoespaciada. Van en la letra de la
   página con cifras tabulares (.num) y sin partirse del signo o la unidad. */

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Los componentes compartidos que traen var(--font-mono) (ticket, precio de
   artículo, monto de plan) toman la letra de la página en estas secciones,
   igual que adentro de la ventana. */
.carrera, #precios {
  --font-mono: var(--font-ui);
}
.plan-precio .monto { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Hero: la nota bajo los botones ── */
.cta-nota {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--sobre-tinta-2);
}

/* ═════════════ Ventana · Stock por sucursal ═════════════ */
.stk-tabla { display: grid; }
.stk-lista { display: grid; }
.stk-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px 92px;
  align-items: center;
  gap: var(--s-md);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--s-md);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-micro) ease-out;
}
.stk-fila .nom { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-fila .cnt { text-align: right; }
.stk-fila .stk-ir {
  text-align: right;
  font-size: 12px;
  color: var(--accent-ink);
  opacity: 0;
  transition: opacity var(--t-micro) ease-out;
}
.stk-enc {
  min-height: 28px;
  cursor: default;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.stk-lista .stk-fila:hover { background: var(--surface-2); }
.stk-lista .stk-fila:hover .ir,
.stk-fila[aria-pressed='true'] .ir { opacity: 1; }
.stk-fila[aria-pressed='true'] {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
}
.stk-fila:focus-visible { box-shadow: inset var(--ring); border-radius: var(--r-sm); }

/* La cantidad: neutra si alcanza, en ámbar si hay que reponer. */
.q {
  display: inline-block;
  min-width: 34px;
  padding: 1px var(--s-sm);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  text-align: center;
  line-height: 1.5;
}
.q.poco {
  border-color: var(--warning-line);
  background: var(--warning-tint);
  color: var(--warning-ink);
  font-weight: 500;
}
.q { transition: background var(--t-short) ease-out, border-color var(--t-short) ease-out, color var(--t-short) ease-out; }
/* Lo que se acaba de mover queda marcado un momento; el script lo saca. */
.q.cambio { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }

.panel.stock .aviso { margin-top: var(--s-md); }

.reponer-caja { display: grid; gap: var(--s-sm); }
.reponer-caja > .et { display: flex; align-items: center; gap: 6px; }
.reponer-caja > .et .num {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--warning-tint);
  color: var(--warning-ink);
  text-align: center;
  letter-spacing: 0;
}
.reponer { display: grid; gap: 6px; }
.reponer li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--s-sm);
  padding: 6px var(--s-md);
  border: 1px solid var(--warning-line);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13px;
}
.reponer .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.reponer .suc { font-size: 12px; color: var(--muted); }
.reponer .q-txt { font-size: 12px; color: var(--warning-ink); white-space: nowrap; }
.reponer li.nuevo { animation: aparecer var(--t-medium) ease-out; }
.reponer li.vacia {
  display: block;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  background: transparent;
}

.transfer {
  display: grid;
  gap: var(--s-sm);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--line);
}
.tr-vacio {
  padding: var(--s-lg);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.tr-form { display: grid; gap: var(--s-md); }
.tr-art {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.tr-ruta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.tr-suc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 6px;
  padding: 6px var(--s-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.35;
}
.tr-suc b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.tr-suc .num { color: var(--muted); font-size: 12.5px; }
.tr-de {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tr-invertir {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-micro) ease-out;
}
.tr-invertir:hover { background: var(--surface-2); }
.tr-cant { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); }
.tr-cant .tr-de { grid-column: auto; }
.tr-mover { width: 100%; }

/* Stepper: el mismo en la ventana y en la cuenta de artículos. */
.stepper {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.stepper button {
  width: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-micro) ease-out;
}
.stepper button:hover { background: var(--surface-2); }
.stepper button:disabled { color: var(--line-strong); background: transparent; cursor: default; }
.stepper button:focus-visible { box-shadow: inset var(--ring); border-radius: 0; }
.stepper input,
.stepper output {
  display: grid;
  place-items: center;
  width: 64px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: none; box-shadow: inset var(--ring); }
.stepper.chico { height: 32px; }
.stepper.chico button { width: 32px; font-size: 16px; }
.stepper.chico output { width: 44px; font-size: 14px; }

/* ═════════════ Ventana · Cierre de caja ═════════════ */
.caja-apertura {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 500;
}
.caja-apertura .tenue { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.caja-et { margin: var(--s-lg) 0 var(--s-sm); }

/* La barra del día: sólo el efectivo va con color, porque es lo único que
   termina en el cajón. */
.caja-barra {
  display: flex;
  gap: 2px;
  height: 10px;
  margin-bottom: var(--s-sm);
  border-radius: var(--r-full);
  overflow: hidden;
}
.caja-barra i { flex-basis: 0; min-width: 4px; }
.m-ef { background: var(--accent); }
.m-de { background: color-mix(in srgb, var(--muted) 62%, var(--surface)); }
.m-qr { background: color-mix(in srgb, var(--muted) 40%, var(--surface)); }
.m-tr { background: color-mix(in srgb, var(--muted) 24%, var(--surface)); }

.caja-medios li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto minmax(84px, auto);
  align-items: center;
  gap: var(--s-md);
  padding: 7px var(--s-sm);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.caja-medios .sw { width: 10px; height: 10px; border-radius: 3px; }
.caja-medios .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caja-medios .num { text-align: right; }
.caja-medios .al-cajon {
  border-bottom-color: transparent;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
}
.caja-medios .al-cajon .nom { font-weight: 500; }
.caja-medios .al-cajon .num { font-weight: 500; color: var(--accent-ink); }
.caja-medios .al-cajon .chip { background: var(--surface); padding: 1px 7px; font-size: 11px; }
.caja-medios .tot { border-bottom: 0; padding-top: var(--s-md); font-weight: 500; }
.caja-medios .tot .num { font-size: 15px; }

.arqueo { gap: var(--s-md); }
.arq-bloque { display: grid; gap: 6px; }
.arq-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-sm); }
.arq-valor {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.arq-cuenta { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.arq-input {
  display: flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-micro) ease-out, box-shadow var(--t-micro) ease-out;
}
.arq-input:focus-within,
.arq-input.enfocado {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.arq-campo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 var(--s-sm);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.arq-campo .pre { color: var(--muted); font-size: 15px; }
.arq-campo input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.arq-campo input::placeholder { color: var(--line-strong); }
.arq-campo input:disabled { color: var(--ink-2); }
.paso-btn {
  flex: none;
  width: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
  transition: background var(--t-micro) ease-out;
}
.paso-btn:hover { background: var(--surface-2); }
.paso-btn:disabled { color: var(--line-strong); background: transparent; cursor: default; }
.paso-btn:focus-visible { box-shadow: inset var(--ring); border-radius: 0; }

.arq-dif {
  padding: var(--s-md);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.arq-dif.falta, .arq-dif.sobra {
  border-color: var(--warning-line);
  border-left-color: var(--warning);
  background: var(--warning-tint);
}
.arq-dif.falta .arq-valor, .arq-dif.sobra .arq-valor,
.arq-dif.falta .et, .arq-dif.sobra .et { color: var(--warning-ink); }
.arq-dif.justa {
  border-color: var(--success-line);
  border-left-color: var(--success);
  background: var(--success-tint);
}
.arq-dif.justa .arq-valor, .arq-dif.justa .et { color: var(--success-ink); }
.arq-dif.falta .arq-cuenta, .arq-dif.sobra .arq-cuenta, .arq-dif.justa .arq-cuenta { color: var(--ink-2); }
.arq-dif.nuevo { animation: aparecer var(--t-medium) ease-out; }
.arq-cerrada {
  padding: var(--s-md);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.arq-cerrada b { font-weight: 500; color: var(--ink); }
#caja-chip.cerrada { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink-2); }

/* ═════════════ La carrera contra el cuaderno ═════════════ */
.circuito {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.largada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-lg) var(--s-xl);
  padding: var(--s-lg) var(--s-xl);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.pedido { display: grid; gap: 2px; min-width: 0; }
.pedido-txt { font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.pedido-txt .paga { font-weight: 400; color: var(--muted); white-space: nowrap; }
.largada-btns { display: flex; flex-wrap: wrap; gap: var(--s-sm); }

.carriles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carril {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  min-width: 0;
  padding: var(--s-xl);
}
/* La raya de carril, como en una pista. */
.carril + .carril { border-left: 1px dashed var(--line-strong); }
.carril-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
}
.carril-cab .wm { font-size: 17px; }
.carril-nombre {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.crono {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color var(--t-short) ease-out;
}
.circuito[data-fase='corriendo'] .carril-bemo .crono { color: var(--accent-ink); }
.carril-estado { min-height: 1.5em; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* El carril de Bemo SHOP: una pantalla de venta chica, de verdad. */
.mini-venta {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-lg);
  flex: 1;
}
.mini-gondola {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: var(--s-sm);
}
.mini-gondola .articulo { min-height: 0; padding: var(--s-sm); gap: 1px; }
.mini-gondola .articulo:disabled { cursor: default; opacity: .6; }
.mini-gondola .articulo:disabled:hover { border-color: var(--line); background: var(--surface); }
.mini-gondola .articulo .nom { font-size: 12.5px; }
.mini-gondola .articulo .precio { font-size: 12px; }
.articulo .foto {
  display: grid;
  place-items: center;
  height: 42px;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
}
.articulo:hover .foto { background: var(--surface); color: var(--accent-ink); }

.mini-ticket { display: flex; flex-direction: column; gap: var(--s-sm); min-width: 0; }
.mini-ticket .ticket-items { flex: 1 1 auto; min-height: 104px; overflow: visible; }
.mini-ticket .ticket-items li { align-items: center; }
.mini-ticket .ticket-items .cant { min-width: 22px; }
.mini-ticket .ticket-total .num { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.mini-ticket .cobrar { height: 44px; }
.mini-ticket .cobrar.no { animation: choque 420ms ease-out; }
/* Cobrada: no es un botón apagado, es una venta hecha. */
.mini-ticket .cobrar.hecha,
.mini-ticket .cobrar.hecha:disabled {
  opacity: 1;
  border-color: var(--success-line);
  background: var(--success-tint);
  color: var(--success-ink);
}
.sacar {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.sacar:hover { color: var(--ink); background: var(--surface-2); }

.carrera .cursor {
  transition: transform var(--t-medium) cubic-bezier(.3, .7, .2, 1), opacity var(--t-short) ease-out;
}

/* El carril del cuaderno. La hoja es la de la portada (.cuaderno), más alta
   y con lugar a la derecha para la birome. */
.hoja {
  position: relative;
  flex: 1;
  min-height: 232px;
  padding: 14px 52px 14px 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 21px;
}
.hoja p { gap: 6px; }
.hoja .puntos-l {
  min-width: 14px;
  clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0);
}
.hoja .suma { position: relative; justify-content: flex-end; gap: 10px; }
.hoja .suma .tx:last-child, .hoja .vuelto { color: var(--ink); }
.hoja .raya {
  position: absolute;
  right: -4px;
  top: 1px;
  width: 132px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-2);
  transform-origin: left center;
  transform: rotate(-1deg) scaleX(var(--p, 1));
}
.hoja s.mal { position: relative; text-decoration: none; color: var(--muted); }
.hoja s.mal::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 54%;
  height: 2px;
  border-radius: 2px;
  background: var(--danger);
  transform-origin: left center;
  transform: rotate(-5deg) scaleX(var(--p, 1));
}

/* La birome: cristal y tapita del color de la casa. */
.birome {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 0;
  height: 0;
  pointer-events: none;
  transition: transform var(--t-short) linear;
}
.birome svg {
  position: absolute;
  left: 0;
  top: -7px;
  overflow: visible;
  transform-origin: 1px 7px;
  transform: rotate(-38deg);
  filter: drop-shadow(2px 4px 3px rgba(20, 32, 31, .22));
}
.b-punta { fill: var(--ink-2); }
.b-cuerpo {
  fill: color-mix(in srgb, var(--line) 55%, var(--surface));
  stroke: var(--line-strong);
  stroke-width: 1;
}
.b-tapa { fill: var(--accent); }
.b-reflejo { fill: none; stroke: var(--surface); stroke-width: 1.2; stroke-linecap: round; }
.birome.escribe svg { animation: garabato 150ms linear infinite alternate; }
.birome.piensa svg { animation: golpecito 460ms ease-in-out infinite; }
@keyframes garabato {
  from { transform: rotate(-38deg) translate(0, 0); }
  to   { transform: rotate(-35deg) translate(1px, -1.5px); }
}
@keyframes golpecito {
  50% { transform: rotate(-44deg) translate(0, -4px); }
}

/* La meta: las dos barras y la frase. */
.meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-sm) var(--s-2xl);
  padding: var(--s-lg) var(--s-xl) var(--s-xl);
  border-top: 1px solid var(--line);
}
.meta-et { grid-column: 1 / -1; }
.meta-filas { display: grid; gap: var(--s-sm); }
.meta-fila {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--s-md);
  font-size: 14px;
}
.meta-fila .quien { font-weight: 500; white-space: nowrap; }
.barra {
  height: 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}
.barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--line-strong);
  transition: width var(--t-medium) ease-out;
}
.es-bemo .barra i { background: var(--accent); }
.meta-fila .t { text-align: right; font-weight: 600; font-size: 16px; }
.meta-frase {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.circuito[data-fase='corriendo'] .meta-filas { opacity: .5; }
.carrera-nota { margin-top: var(--s-md); max-width: 84ch; font-size: 12.5px; line-height: 1.55; color: var(--muted-2); }

/* ═════════════ Cuatro cosas, bien hechas ═════════════ */
.cosas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-xl);
}
.cosa {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-lg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.cosa h3 { margin-top: var(--s-sm); font-size: 21px; }
.cosa > p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.cosa .ver-demo { align-self: flex-start; margin-top: auto; }
.cosa > p + .ver-demo { margin-top: var(--s-md); }
.cosa a.ver-demo { color: var(--ink-2); }
.cosa a.ver-demo:hover { color: var(--ink); }
.cosas-nota { margin-top: var(--s-lg); font-size: 12.5px; color: var(--muted-2); }

.cosa-mock {
  position: relative;
  height: 212px;
  padding: var(--s-lg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
  font-size: 12.5px;
}

/* Vender: el lector, la grilla con fotos, el cobro partido. */
.mock-vender { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-sm); }
.mv-lector {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-md);
  height: 36px;
  padding: 0 var(--s-md);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.mv-barras {
  flex: none;
  width: 70px;
  height: 20px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 6px,
    var(--ink) 6px 9px, transparent 9px 10px, var(--ink) 10px 11px, transparent 11px 14px);
}
.mv-laser {
  position: absolute;
  left: 6px;
  width: 90px;
  top: calc(50% - 1px);
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.mv-cod { color: var(--muted); letter-spacing: 0.04em; overflow: hidden; }
.mv-grilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mv-art {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
}
.mv-art b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.mv-art.sel { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
.mv-pago { display: flex; gap: 3px; height: 30px; }
.mv-seg {
  flex-basis: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 0 var(--s-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11.5px;
  overflow: hidden;
}
.mv-seg b { font-weight: 500; }
.mv-seg.ef { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-ink); }

/* Cargar productos: la ficha. */
.mock-ficha { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--s-lg); align-items: start; }
.mf-foto {
  position: relative;
  display: grid;
  place-items: center;
  height: 178px;
  padding-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-2);
}
.mf-comp {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 2px 4px;
  border: 1px solid var(--success-line);
  border-radius: var(--r-sm);
  background: var(--success-tint);
  color: var(--success-ink);
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
}
.mf-campos { display: grid; gap: 6px; min-width: 0; }
.mf-nom { font-family: var(--font-title); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.mf-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: 5px var(--s-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.mf-fila span:first-child { color: var(--muted); }
.mf-talles, .mf-colores { display: flex; flex-wrap: wrap; gap: 4px; }
.mf-talles span {
  padding: 1px 7px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 500;
}
.mf-colores span { width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.mf-colores .c1 { background: var(--ink); }
.mf-colores .c2 { background: var(--surface); }
.mf-colores .c3 { background: var(--accent); }

/* Controlar el stock: dos locales y una transferencia. */
.mock-stock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-sm) var(--s-sm);
}
.ms-suc {
  display: grid;
  gap: 3px;
  padding: var(--s-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ms-nom {
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 13px;
}
.ms-fila { display: flex; justify-content: space-between; gap: 6px; padding: 1px 5px; border-radius: var(--r-sm); }
.ms-fila.poco { background: var(--warning-tint); color: var(--warning-ink); font-weight: 500; }
.ms-flecha { display: grid; justify-items: center; gap: 3px; font-size: 12px; color: var(--accent-ink); }
.ms-flecha .num { font-weight: 600; font-size: 14px; }
.ms-linea { position: relative; width: 100%; height: 2px; background: var(--accent); }
.ms-linea::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -4px;
  border-left: 7px solid var(--accent);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ms-reponer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 6px var(--s-sm);
  border: 1px solid var(--warning-line);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.ms-reponer .et { font-size: 10px; }

/* Cerrar la caja: el arqueo en cinco renglones. */
.mock-arqueo { display: grid; align-content: center; padding: var(--s-md) var(--s-xl); }
.ma-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ma-fila span:first-child { color: var(--muted); }
.ma-esp { border-bottom: 1.5px solid var(--ink-2); font-weight: 600; }
.ma-esp span:first-child { color: var(--ink); }
.ma-dif {
  margin-top: var(--s-sm);
  padding: 7px var(--s-sm);
  border: 1px solid var(--warning-line);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
  background: var(--warning-tint);
  color: var(--warning-ink);
  font-weight: 600;
}
.ma-dif span:first-child { color: inherit; }

/* ═════════════ Y esto no lo hace ═════════════
   Una franja de tinta, como "Cada producto tiene una palabra" en la portada.
   La lista va tachada con el mismo trazo que "cuaderno" en el hero. */
.no-hace {
  position: relative;
  isolation: isolate;
  /* clip y no hidden: hidden la volvería contenedor de scroll y la línea
     de tiempo view() de los tachados quedaría quieta. */
  overflow: clip;
  padding: clamp(72px, 10vw, 128px) 0;
  background: var(--tinta);
  color: var(--sobre-tinta);
}
.no-hace::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 60% at 100% 100%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.no-hace-in {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-3xl);
  align-items: start;
}
.no-hace-txt { position: sticky; top: 104px; }
.no-hace .rotulo { color: var(--sobre-tinta-marca); }
.no-hace h2 {
  font-size: clamp(32px, 4.8vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
}
.no-hace-porque {
  margin-top: var(--s-xl);
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sobre-tinta-2);
}
.no-hace-remate {
  margin-top: var(--s-lg);
  padding-left: var(--s-lg);
  max-width: 38ch;
  border-left: 2px solid var(--sobre-tinta-marca);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

@property --tachado {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
.tachados { border-top: 1px solid var(--tinta-linea); }
.tachados li {
  padding: clamp(10px, 1.3vw, 16px) 0;
  border-bottom: 1px solid var(--tinta-linea);
}
.tachados span {
  --giro: -1.2deg;
  position: relative;
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(26px, 4.1vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--sobre-tinta-2);
}
.tachados li:nth-child(3n + 2) span { --giro: 0.9deg; }
.tachados li:nth-child(3n) span { --giro: -0.6deg; }
.tachados span::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  top: 55%;
  height: 0.085em;
  min-height: 3px;
  border-radius: 2px;
  background: var(--sobre-tinta-marca);
  transform-origin: left center;
  transform: rotate(var(--giro)) scaleX(var(--tachado));
}
/* Donde el navegador sabe atar una animación al scroll, cada renglón se
   tacha al pasar por la pantalla. Donde no, ya viene tachado. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tachados span {
      animation: tachar-no linear both;
      animation-timeline: view();
      animation-range: entry 100% cover 30%;
    }
  }
}
@keyframes tachar-no {
  from { --tachado: 0; }
  to   { --tachado: 1; }
}

/* ═════════════ Precios · la cuenta de artículos ═════════════ */
.plan .btn.secondary { background: var(--surface); }
.plan .btn.secondary:hover { background: var(--surface-2); }

.articulos {
  margin-top: var(--s-3xl);
  padding: var(--s-xl);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.art-cab { max-width: 66ch; }
.art-cab h3 { font-size: 22px; line-height: 1.25; }
.art-cab p { margin-top: var(--s-sm); font-size: 15px; line-height: 1.6; color: var(--muted); }
.art-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-2xl);
  margin-top: var(--s-xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--line);
}
.art-remera {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-lg);
  align-self: start;
}
.art-foto {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-2);
}
.art-talles { display: grid; gap: var(--s-sm); min-width: 0; }
.talles { display: flex; flex-wrap: wrap; gap: 6px; }
.talle {
  min-width: 44px;
  height: 40px;
  padding: 0 var(--s-md);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-micro) ease-out, border-color var(--t-micro) ease-out, color var(--t-micro) ease-out;
}
.talle:hover { color: var(--ink); border-color: var(--accent-line); }
.talle[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
.art-igual { margin-top: 2px; font-size: 18px; line-height: 1.4; color: var(--ink-2); }
.art-igual b { font-weight: 600; color: var(--accent-ink); white-space: nowrap; }

.art-cuenta { display: grid; gap: var(--s-lg); min-width: 0; }
.art-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg); }
.art-campo { display: grid; gap: 6px; align-content: start; }
.art-campo label { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.art-campo .stepper { justify-self: start; }
.art-campo .stepper input { width: 76px; }
.art-total { font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.art-total b {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.art-cuenta-txt { font-size: 13.5px; color: var(--muted); white-space: nowrap; }

.escala-pista {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 3px;
  padding-top: 10px;
}
.tramo {
  padding-top: 6px;
  border-top: 6px solid var(--line);
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  transition: border-color var(--t-short) ease-out, color var(--t-short) ease-out;
}
.tramo b { display: block; font-weight: 500; color: var(--ink-2); }
.tramo:first-child { border-top-left-radius: 3px; }
.tramo.activo { border-top-color: var(--accent); color: var(--accent-ink); }
.tramo.activo b { color: var(--accent-ink); }
.marca-escala {
  position: absolute;
  top: 2px;
  width: 3px;
  height: 22px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--surface);
  transition: left var(--t-medium) ease-out;
}
.art-veredicto {
  padding: var(--s-md) var(--s-lg);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.art-veredicto b { font-weight: 600; color: var(--accent-ink); }

/* ═════════════════════════ Angosto ═════════════════════════ */
@media (max-width: 1020px) {
  .stk-fila { grid-template-columns: minmax(0, 1fr) 56px 56px 84px; gap: var(--s-sm); }
  .caja-apertura .tenue { display: none; }
  .mini-venta { grid-template-columns: minmax(0, 1fr); }
  .mini-ticket .ticket-items { min-height: 0; }
}

@media (max-width: 900px) {
  .cosas { grid-template-columns: minmax(0, 1fr); }
  .no-hace-in { grid-template-columns: minmax(0, 1fr); gap: var(--s-2xl); }
  .no-hace-txt { position: static; }
  .art-cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--s-xl); }
  .meta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Ventana: en el teléfono queda lo que demuestra. */
  .stk-fila { grid-template-columns: minmax(0, 1fr) 52px 52px; min-height: 36px; padding: 0 var(--s-sm); }
  .stk-fila .stk-ir { display: none; }
  .stk-lista .stk-fila:nth-child(2),
  .stk-lista .stk-fila:nth-child(6) { display: none; }
  .panel.stock .aviso { font-size: 13px; padding: var(--s-sm) var(--s-md); }
  .tr-form { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-ruta { grid-column: 1 / -1; }
  .tr-cant .tr-de { display: none; }
  .tr-mover { padding: 0 var(--s-md); }
  /* La apertura ya está en la cuenta del arqueo, y el total no hace a la
     diferencia: en el teléfono se caen. */
  .caja-barra, .caja-apertura, .caja-medios .tot { display: none; }
  .caja-et { margin-top: 0; }
  .caja-medios li { gap: var(--s-sm); padding: 6px var(--s-xs); }
  .caja-medios .al-cajon { padding: 6px var(--s-sm); }
  /* En stock queda lo que demuestra: las dos columnas, la lista para
     reponer y la transferencia. El artículo elegido ya se ve marcado. */
  .stk-aviso-caja { display: none; }
  .tr-art { display: none; }

  /* La carrera: carriles uno arriba del otro. */
  .carriles { grid-template-columns: minmax(0, 1fr); }
  .carril + .carril { border-left: 0; border-top: 1px dashed var(--line-strong); }
  .carril { padding: var(--s-lg); }
  .largada { padding: var(--s-lg); }
  .largada-btns { width: 100%; }
  .largada-btns .btn { flex: 1 1 auto; }
  .crono { font-size: 26px; }
  .hoja { min-height: 0; padding: 12px 48px 12px 40px; font-size: 20px; }
  .meta { padding: var(--s-lg); }
}

@media (max-width: 520px) {
  .cosa-mock { height: auto; min-height: 200px; }
  .mv-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mock-ficha { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-md); }
  .mf-foto { height: 150px; }
  .mf-comp { font-size: 9.5px; white-space: normal; }
  .mock-stock { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .mock-arqueo { padding: var(--s-md); }
  .mini-gondola .articulo { padding: 6px; }
  .articulo .foto { height: 36px; }
  .meta-fila { grid-template-columns: 80px minmax(0, 1fr) 58px; gap: var(--s-sm); }
  .articulos { padding: var(--s-lg); }
  .art-remera { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-md); }
  .art-foto { width: 84px; height: 84px; }
  .art-foto svg { width: 64px; height: 64px; }
  .art-campos { grid-template-columns: minmax(0, 1fr); }
  .talle { min-width: 40px; padding: 0 var(--s-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .birome.escribe svg, .birome.piensa svg { animation: none; }
}