/* Demos de los proyectos a medida (compartido por /a-medida y por la pagina de cada proyecto).
   Cada demo imita la interfaz real de su sistema con su propia paleta. El escenario
   (.am-stage) es de 16:10 y la demo se dibuja a 1000x625 y se escala por JS (--am-k). */

  /* Boton VER: abre el modal con la animacion del sistema. */
  .am-ver { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; align-self: flex-start; background: var(--acento); color: #fff; border: none; border-radius: .7rem; padding: .7rem 1.1rem; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; transition: background .18s, transform .12s; }
  .am-ver svg { width: 15px; height: 15px; }
  .am-ver:hover { background: var(--acento-osc); }
  .am-ver:active { transform: scale(.97); }

  /* ── Modal con la demo del sistema ── */
  .am-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
  .am-modal[hidden] { display: none; }
  .am-modal-fondo { position: absolute; inset: 0; background: rgba(15,23,42,.62); backdrop-filter: blur(3px); animation: am-fade .25s ease; }
  .am-modal-caja { position: relative; z-index: 1; width: 100%; max-width: 1040px; background: #fff; border-radius: 1.1rem; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: am-subir .3s cubic-bezier(.2,.7,.3,1); }
  @keyframes am-fade { from { opacity: 0; } }
  @keyframes am-subir { from { opacity: 0; transform: translateY(16px) scale(.98); } }
  .am-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--borde); }
  .am-modal-head strong { font-size: 1.05rem; color: var(--acento-osc); }
  .am-modal-head span { font-size: .82rem; color: var(--tenue); }
  .am-modal-x { background: var(--fondo); border: 1px solid var(--borde); border-radius: .6rem; width: 36px; height: 36px; font-size: 1.3rem; line-height: 1; color: var(--tenue); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
  .am-modal-x:hover { background: #fee2e2; color: #b91c1c; }
  .am-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--fondo); overflow: hidden; }
  .am-demo { position: absolute; top: 0; left: 0; width: 1000px; height: 625px; transform-origin: top left; transform: scale(var(--am-k, .5)); }

  /* ── Demo FILM (paleta kraft real del sistema) ── */
  .fd { --f-ink:#1f2420; --f-paper:#e7e8e1; --f-card:#fff; --f-accent:#c98a2b; --f-accent-d:#93641d;
    --f-teal:#2f6b5e; --f-teal-bg:#e4eeea; --f-teal-ink:#1f4a40; --f-red:#a13d2b; --f-line:#d7d4c8; --f-muted:#6e7268;
    width: 1000px; height: 625px; background: var(--f-paper); color: var(--f-ink);
    font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px; display: flex; flex-direction: column; }
  .fd * { box-sizing: border-box; }
  .fd-nav { background: var(--f-ink); color: #fff; display: flex; align-items: center; gap: .3rem; padding: .55rem .8rem; }
  .fd-nav .fd-marca { font-weight: 900; letter-spacing: .04em; margin-right: .6rem; padding-right: .8rem; border-right: 1px solid rgba(255,255,255,.2); }
  .fd-nav .fd-item { padding: .4rem .8rem; border-radius: .5rem; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.72); }
  .fd-nav .fd-item.on { background: var(--f-accent); color: #fff; }
  .fd-nav .fd-user { margin-left: auto; font-size: .8rem; color: rgba(255,255,255,.75); }
  .fd-body { flex: 1; min-height: 0; position: relative; }
  .fd-esc { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
  .fd-esc.on { opacity: 1; }
  .fd-h { font-size: 1.45rem; font-weight: 900; }
  .fd-h small { display: block; font-size: .8rem; font-weight: 600; color: var(--f-muted); }

  .fd-tabla { background: var(--f-card); border: 1px solid var(--f-line); border-radius: .8rem; overflow: hidden; }
  .fd-fila { display: grid; grid-template-columns: 1.3fr 1.4fr 100px 120px; gap: .8rem; align-items: center; padding: .75rem 1.1rem; border-bottom: 1px solid var(--f-line); }
  .fd-fila:last-child { border-bottom: none; }
  .fd-fila.fd-head { background: #fbf2de; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--f-accent-d); }
  .fd-fila.fd-nueva { animation: fd-pop .4s ease; }
  @keyframes fd-pop { from { opacity: 0; transform: translateY(-8px); background: #fbf2de; } }
  .fd-cli { font-weight: 800; }
  .fd-art { font-family: "Consolas", monospace; font-size: .85rem; color: var(--f-teal-ink); background: var(--f-teal-bg); padding: .2rem .5rem; border-radius: .4rem; justify-self: start; }
  .fd-cant { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
  .fd-estado { justify-self: start; font-size: .68rem; font-weight: 800; padding: .18rem .55rem; border-radius: 999px; }
  .fd-estado.pend { background: #fbf2de; color: var(--f-accent-d); }
  .fd-estado.desp { background: var(--f-teal-bg); color: var(--f-teal-ink); }

  /* Escena reparto de bultos (la funcion insignia) */
  .fd-form { background: var(--f-card); border: 1px solid var(--f-line); border-radius: .9rem; padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; max-width: 620px; }
  .fd-campo { display: flex; flex-direction: column; gap: .3rem; }
  .fd-campo label { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--f-muted); }
  .fd-input { border: 2px solid var(--f-line); border-radius: .6rem; padding: .6rem .8rem; font: inherit; font-weight: 700; background: #fff; min-height: 42px; display: flex; align-items: center; }
  .fd-input.foco { border-color: var(--f-accent); box-shadow: 0 0 0 3px #fbf2de; }
  .fd-cursor2 { border-right: 2px solid var(--f-accent); animation: fd-blink 1s steps(1) infinite; }
  @keyframes fd-blink { 50% { border-color: transparent; } }
  .fd-reparto { display: flex; flex-direction: column; gap: .5rem; }
  .fd-reparto .fd-rep-lbl { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--f-muted); }
  .fd-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .fd-chip { background: var(--f-accent); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; padding: .55rem .9rem; border-radius: .6rem; font-size: 1rem; opacity: 0; transform: scale(.7); }
  .fd-chip.resto { background: var(--f-teal); }
  .fd-chip.vis { opacity: 1; transform: scale(1); transition: opacity .3s, transform .3s cubic-bezier(.3,1.5,.5,1); }
  .fd-nota { font-size: .82rem; color: var(--f-muted); }
  .fd-listo { display: flex; align-items: center; gap: .6rem; background: var(--f-teal-bg); color: var(--f-teal-ink); border-radius: .7rem; padding: .8rem 1rem; font-weight: 800; opacity: 0; transition: opacity .4s; }
  .fd-listo.vis { opacity: 1; }
  .fd-listo svg { width: 22px; height: 22px; }

  .fd-pt { position: absolute; width: 20px; height: 20px; z-index: 20; left: 50%; top: 55%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition: left .55s cubic-bezier(.5,0,.3,1), top .55s cubic-bezier(.5,0,.3,1); }
  .fd-pt svg { width: 100%; height: 100%; }

  /* En el escenario hay una demo por sistema; se muestra la activa. */
  .am-demo { display: none; }
  .am-demo.act { display: flex; flex-direction: column; }

  /* ── Demo TecnoBus (paleta teal real del sistema) ── */
  .tb { --t-ink:#153B33; --t-teal:#1F6F5C; --t-teal2:#3FA08C; --t-teal-bg:#BFE2D8;
    --t-paper:#F7F5EF; --t-card:#fff; --t-line:#DDD8C9; --t-amber:#E2883C; --t-amber-bg:#FBEADA;
    --t-slate:#6B7A83; --t-red:#C4453A;
    width: 1000px; height: 625px; background: var(--t-paper); color: var(--t-ink);
    font-family: "Inter", system-ui, sans-serif; font-size: 15px; }
  .tb * { box-sizing: border-box; }
  .tb-nav { background: var(--t-ink); color: #fff; display: flex; align-items: center; gap: .3rem; padding: .55rem .8rem; }
  .tb-marca { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: .03em; text-transform: uppercase; margin-right: .6rem; padding-right: .8rem; border-right: 1px solid rgba(255,255,255,.2); }
  .tb-item { padding: .4rem .8rem; border-radius: .5rem; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.72); }
  .tb-item.on { background: var(--t-teal2); color: #fff; }
  .tb-user { margin-left: auto; font-size: .8rem; color: rgba(255,255,255,.75); }
  .tb-body { flex: 1; min-height: 0; position: relative; }
  .tb-esc { position: absolute; inset: 0; padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
  .tb-h { font-family: "Barlow Condensed", sans-serif; font-size: 1.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
  .tb-h small { display: block; font-family: "Inter", sans-serif; font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--t-slate); }
  .tb-lista { display: flex; flex-direction: column; gap: .6rem; }
  .tb-b { display: grid; grid-template-columns: 26px 150px 1fr 132px; gap: .9rem; align-items: center; background: var(--t-card); border: 1px solid var(--t-line); border-radius: .7rem; padding: .7rem .9rem; transition: border-color .2s, background .2s; }
  .tb-b.sel { border-color: var(--t-teal2); background: #f2faf7; }
  .tb-check { width: 20px; height: 20px; border: 2px solid var(--t-line); border-radius: .35rem; display: flex; align-items: center; justify-content: center; color: #fff; }
  .tb-b.sel .tb-check { background: var(--t-teal2); border-color: var(--t-teal2); }
  .tb-check svg { width: 13px; height: 13px; opacity: 0; }
  .tb-b.sel .tb-check svg { opacity: 1; }
  .tb-cod { display: flex; flex-direction: column; gap: .25rem; }
  .tb-cod .tb-codn { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .82rem; }
  .tb-barras { height: 16px; background-image: repeating-linear-gradient(90deg, var(--t-ink) 0, var(--t-ink) 1px, transparent 1px, transparent 3px, var(--t-ink) 3px, var(--t-ink) 5px, transparent 5px, transparent 7px); border-radius: 1px; }
  .tb-cli { display: block; font-weight: 700; }
  .tb-cont { display: block; font-size: .8rem; color: var(--t-slate); }
  .tb-stamp { justify-self: start; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .25rem .6rem; border-radius: 999px; }
  .tb-stamp.dep { background: var(--t-teal-bg); color: var(--t-ink); }
  .tb-stamp.tra { background: var(--t-amber-bg); color: var(--t-amber); }
  .tb-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .tb-btn { background: var(--t-teal); color: #fff; border: none; border-radius: .6rem; padding: .7rem 1.1rem; font: inherit; font-weight: 700; transition: background .2s, transform .12s; }
  .tb-btn.press { transform: scale(.96); background: var(--t-ink); }
  .tb-remito { display: flex; align-items: center; gap: .5rem; background: var(--t-teal-bg); color: var(--t-ink); border-radius: .6rem; padding: .55rem .9rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
  .tb-remito.vis { opacity: 1; transform: none; }
  .tb-remito svg { width: 18px; height: 18px; }
  .tb-pt { position: absolute; width: 20px; height: 20px; z-index: 20; left: 50%; top: 50%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition: left .55s cubic-bezier(.5,0,.3,1), top .55s cubic-bezier(.5,0,.3,1); }
  .tb-pt svg { width: 100%; height: 100%; }

  /* ── Demo Tablero fiscal (dashboard oscuro) ── */
  .tf { --f2-bg:#1d2127; --f2-card:#262b32; --f2-line:#2f353d; --f2-ink:#e8ecf1; --f2-slate:#7d8899;
    --f2-amber:#fab219; --f2-green:#199e70; --f2-red:#e05a5a; --f2-orange:#d95926; --f2-blue:#3987e5;
    width: 1000px; height: 625px; background: var(--f2-bg); color: var(--f2-ink);
    font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px; padding: 1.6rem 1.8rem; gap: 1.1rem; }
  .tf * { box-sizing: border-box; }
  .tf-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .tf-title { font-size: 1.55rem; font-weight: 800; }
  .tf-title span { display: block; font-size: .85rem; font-weight: 600; color: var(--f2-slate); }
  .tf-src { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--f2-slate); background: var(--f2-card); border: 1px solid var(--f2-line); border-radius: 999px; padding: .35rem .8rem; }
  .tf-src .tf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--f2-green); }
  .tf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .tf-card { background: var(--f2-card); border: 1px solid var(--f2-line); border-left: 4px solid var(--f2-slate); border-radius: .7rem; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
  .tf-card.deb { border-left-color: var(--f2-blue); }
  .tf-card.cred { border-left-color: var(--f2-green); }
  .tf-card.perc { border-left-color: var(--f2-orange); }
  .tf-card.ret { border-left-color: var(--f2-amber); }
  .tf-lbl { font-size: .82rem; font-weight: 700; color: var(--f2-slate); }
  .tf-num { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .tf-sub { font-size: .74rem; color: var(--f2-slate); }
  .tf-formula { text-align: center; font-size: .86rem; color: var(--f2-slate); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s; }
  .tf-formula.vis { opacity: 1; }
  .tf-saldo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(90deg, rgba(224,90,90,.16), rgba(224,90,90,.04)); border: 1px solid rgba(224,90,90,.4); border-radius: .8rem; padding: 1rem 1.4rem; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
  .tf-saldo.vis { opacity: 1; transform: none; }
  .tf-saldo-lbl { font-size: 1.05rem; font-weight: 800; }
  .tf-saldo-num { font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--f2-red); }
  .tf-nota { text-align: center; font-size: .76rem; color: var(--f2-slate); }
  .tf-cargando { position: absolute; inset: 0; background: var(--f2-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 5; transition: opacity .5s; }
  .tf-cargando.oculto { opacity: 0; pointer-events: none; }
  .tf-barra { width: 260px; height: 6px; background: var(--f2-line); border-radius: 999px; overflow: hidden; }
  .tf-barra i { display: block; height: 100%; width: 0; background: var(--f2-green); border-radius: 999px; }
  .tf-cargando span { font-size: .9rem; color: var(--f2-slate); }

  /* ── Demo Yatupa (paleta oficial: terracota, marfil, kraft y carbon) ── */
  .am-logo--yatupa { background: #f7f7f7; }  /* = fondo exacto del JPG del logo */
  .am-logo--yatupa img { max-height: 70px; }

  .yd { --y-negro:#1F1F1F; --y-grafito:#3A3A3A; --y-marfil:#F2E9D8; --y-kraft:#B99263; --y-terra:#A33A32;
    --y-borde: rgba(31,31,31,.14);
    width: 1000px; height: 625px; background: var(--y-marfil); color: var(--y-negro);
    font-family: "Lato", system-ui, sans-serif; font-size: 15px; }
  .yd * { box-sizing: border-box; }
  .yd-nav { background: var(--y-terra); color: var(--y-marfil); display: flex; align-items: center; gap: .25rem; padding: 0 1rem; }
  .yd-logo { font-weight: 900; letter-spacing: .14em; font-size: 1.05rem; padding: 1rem 1.2rem 1rem .2rem; margin-right: .4rem; }
  .yd-item { padding: .5rem .95rem; border-radius: .55rem; font-size: .85rem; font-weight: 700; }
  .yd-item.on { background: var(--y-marfil); color: var(--y-negro); }
  .yd-quien { margin-left: auto; font-size: .8rem; font-weight: 700; opacity: .92; }
  .yd-body { flex: 1; min-height: 0; position: relative; }
  .yd-esc { position: absolute; inset: 0; padding: 1.1rem 1.3rem; display: flex; gap: 1.2rem; }

  .yd-izq { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8rem; }
  .yd-balanza { display: flex; flex-direction: column; gap: .55rem; }
  .yd-visor { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 3.3rem; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; color: var(--y-negro); }
  .yd-visor.esp { color: var(--y-kraft); }
  .yd-importe { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.5rem; text-align: center; min-height: 1.25em; color: var(--y-terra); font-variant-numeric: tabular-nums; }
  .yd-nota { margin: 0; text-align: center; font-size: .82rem; color: var(--y-grafito); }
  .yd-btn { background: var(--y-terra); color: var(--y-marfil); border: 0; border-radius: 10px; padding: .75rem 1.2rem; font: inherit; font-weight: 700; text-align: center; transition: background .2s, transform .12s, color .2s; }
  .yd-btn.off { background: #d8cdb8; color: #9b9384; }
  .yd-btn.press { transform: scale(.97); background: #8d312a; }
  .yd-grupo h4, .yd-der h4 { margin: 0 0 .5rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--y-terra); font-weight: 700; }
  .yd-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
  .yd-art { background: #fff; border: 1px solid var(--y-borde); border-radius: 10px; padding: .65rem .7rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: 0 1px 3px rgba(31,31,31,.1); transition: transform .12s, border-color .15s, background .15s; }
  .yd-art.pes { border-left: 3px solid var(--y-kraft); }
  .yd-art.eleg { border: 2px solid var(--y-terra); background: #fdf6ea; }
  .yd-art.tap { transform: scale(.95); }
  .yd-art b { font-size: .88rem; line-height: 1.2; }
  .yd-art span { font-family: ui-monospace, Consolas, monospace; font-size: .76rem; color: var(--y-grafito); }

  .yd-der { width: 300px; flex-shrink: 0; background: #fff; border: 1px solid var(--y-borde); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; box-shadow: 0 1px 3px rgba(31,31,31,.1); }
  .yd-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .yd-vacio { color: var(--y-grafito); font-size: .85rem; text-align: center; padding: 1.4rem 0; margin: 0; }
  .yd-linea { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--y-borde); animation: yd-pop .35s ease; }
  @keyframes yd-pop { from { opacity: 0; transform: translateY(8px); } }
  .yd-linea b { display: block; font-size: .86rem; }
  .yd-linea small { font-size: .72rem; color: var(--y-grafito); }
  .yd-linea > span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: .85rem; }
  .yd-tot { border-top: 2px solid var(--y-borde); padding-top: .55rem; display: flex; flex-direction: column; gap: .15rem; }
  .yd-tot .f { display: flex; justify-content: space-between; font-size: .85rem; color: var(--y-grafito); font-family: "IBM Plex Mono", ui-monospace, monospace; }
  .yd-tot .f.t { font-family: "Lato", sans-serif; font-size: 1.3rem; font-weight: 900; color: var(--y-negro); }
  .yd-tot .f.t span:last-child { font-family: "IBM Plex Mono", ui-monospace, monospace; }

  /* Modal de cobro (se superpone a la venta) */
  .yd-cobro { align-items: center; justify-content: center; background: rgba(31,31,31,.45); opacity: 0; pointer-events: none; transition: opacity .35s; padding: 0; }
  .yd-cobro.on { opacity: 1; }
  .yd-card { background: var(--y-marfil); border-radius: 14px; width: 430px; padding: 1.5rem 1.6rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); text-align: center; display: flex; flex-direction: column; gap: .85rem; transform: scale(.94); transition: transform .35s ease; }
  .yd-cobro.on .yd-card { transform: scale(1); }
  .yd-card h3 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--y-terra); font-weight: 700; }
  .yd-monto { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 2.4rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
  .yd-medios { display: flex; justify-content: center; gap: .7rem; }
  .yd-medio { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--y-kraft); border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--y-grafito); }
  .yd-medio.sel { background: #fff; border: 2px solid var(--y-terra); color: var(--y-negro); }
  .yd-medio i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--y-kraft); display: inline-block; }
  .yd-medio.sel i { border-color: var(--y-terra); background: radial-gradient(circle, var(--y-terra) 45%, transparent 50%); }
  .yd-maq { display: none; align-items: center; justify-content: center; gap: .7rem; text-align: left; border-left: 3px solid var(--y-kraft); padding: .2rem 0 .2rem .7rem; color: var(--y-grafito); font-size: .85rem; line-height: 1.4; }
  .yd-maq.vis { display: flex; }
  .yd-spin { width: 22px; height: 22px; flex-shrink: 0; border: 3px solid var(--y-kraft); border-top-color: transparent; border-radius: 50%; animation: yd-giro .8s linear infinite; }
  @keyframes yd-giro { to { transform: rotate(360deg); } }
  .yd-acciones { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .yd-link { color: var(--y-grafito); text-decoration: underline; font-size: .85rem; }
  .yd-pagar, .yd-ok { display: flex; flex-direction: column; gap: .85rem; }
  .yd-ok { display: none; }
  .yd-cobro.ok .yd-pagar { display: none; }
  .yd-cobro.ok .yd-ok { display: flex; }
  .yd-check { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; background: var(--y-kraft); display: flex; align-items: center; justify-content: center; }
  .yd-check svg { width: 30px; height: 30px; stroke: var(--y-marfil); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
  .yd-cobro.ok .yd-check svg { animation: yd-draw .5s .15s forwards ease; }
  @keyframes yd-draw { to { stroke-dashoffset: 0; } }
  .yd-lineas { text-align: left; border-top: 1px solid var(--y-borde); padding-top: .65rem; display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; }
  .yd-lineas div { display: flex; justify-content: space-between; }
  .yd-lineas b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; }
  .yd-lineas .v { color: var(--y-terra); font-weight: 700; border-top: 1px dashed var(--y-borde); padding-top: .4rem; margin-top: .1rem; }
  .yd-sinmano { font-size: .8rem; color: var(--y-grafito); font-style: italic; }
  .yd-pt { position: absolute; width: 20px; height: 20px; z-index: 20; left: 55%; top: 50%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition: left .55s cubic-bezier(.5,0,.3,1), top .55s cubic-bezier(.5,0,.3,1); }
  .yd-pt svg { width: 100%; height: 100%; }

  /* Tarjeta con dos botones (sistema + equipos): el segundo, en version clara. */
  .am-ver-fila { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; }
  .am-ver-fila .am-ver { margin-top: 0; }
  .am-ver--sec { background: #fff; color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento-suave); }
  .am-ver--sec:hover { background: var(--acento-suave); }

  /* ── Demo de equipos de Yatupa: balanza + sistema + maquina de efectivo ──
     Es un solo SVG ilustrado (no fotos): asi se anima cada pieza -el producto
     que baja al plato, el billete que entra por la ranura, el vuelto que sale-
     y no depende de imagenes de los fabricantes. */
  .eq { background: #F2E9D8; }
  .eq svg { display: block; width: 1000px; height: 625px; }
  .eq text { font-family: "Lato", system-ui, sans-serif; }
  .eq .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
  .eq .eq-lbl { font-size: 13px; font-weight: 900; letter-spacing: .18em; fill: #3A3A3A; }
  .eq .fade { transition: opacity .45s ease; }
  .eq .flujo { stroke-dasharray: 6 6; }
  .eq .flujo.on { animation: eq-flujo .55s linear infinite; }
  @keyframes eq-flujo { to { stroke-dashoffset: -12; } }

  @media (max-width: 620px) {
    .am-modal { padding: 0; align-items: stretch; }
    .am-modal-caja { max-width: none; border-radius: 0; margin: auto; }
  }