/* ══════════════════════════════════════════════════════════════
   DEMO EN VIVO · /productos/antu-fsm/demo/
   Solo esta página lo carga. Encima de style.css y producto.css.

   Las calcomanías son blancas a propósito: copian la calcomanía real que
   va pegada en el equipo, y sobre el fondo oscuro del sitio se leen como
   objetos físicos. El QR es un <svg> en línea (lo dibuja
   infra/gen-demo-qr.js): nada de data:, que la CSP bloquea.
   ══════════════════════════════════════════════════════════════ */

/* ── Idioma de lo generado ─────────────────────────────────
   El texto de cada calcomanía viene en las dos lenguas y se muestra el del
   idioma activo. main.js pone html[data-lang]; sin JS queda "es". */
html[data-lang="en"] .l-es{display:none}
html:not([data-lang="en"]) .l-en,
html:not([data-lang="en"]) .dm-en{display:none}

/* ── Hero ──────────────────────────────────────────────────── */
.dm-h1{font-size:var(--t-4);max-width:20ch}
.dm-hero .plede{max-width:62ch}
.dm-hero .demo-note{margin-top:22px}
.dm-en{margin-top:12px;font-size:var(--t--1);line-height:1.55;color:var(--ink2);max-width:66ch;
  padding-left:14px;border-left:2px solid var(--line-hi)}

/* Lo que se ve al escanear: el portal real es claro y turquesa, así que la
   recreación también (no es la paleta del sitio, es la del producto). */
.dm-phone-wrap{display:none;margin:0}
@media (min-width:900px){.dm-phone-wrap{display:block;justify-self:center}}
.dm-phone{width:292px;padding:11px;border-radius:40px;background:#0b1326;border:1px solid var(--line-hi);
  box-shadow:var(--card)}
.dm-ph-scr{border-radius:30px;overflow:hidden;background:#f8fafc;color:#0f172a;padding-bottom:4px}
.dm-ph-notch{width:92px;height:20px;margin:0 auto;border-radius:0 0 13px 13px;background:#0b1326}
.dm-ph-hd{display:flex;align-items:center;gap:9px;padding:8px 16px 2px;line-height:1.25}
.dm-ph-hd b{display:block;font-size:12.5px;font-weight:700;color:#0f172a}
.dm-ph-hd span span{display:block;font-size:10px;letter-spacing:.04em;color:#64748b}
/* Franja del modo demostración: el ámbar del portal (#92400e sobre #fffbeb). */
.dm-ph-demo{display:flex;align-items:center;gap:7px;margin:10px 12px 0;padding:7px 11px;border:1px solid #fde68a;
  border-radius:11px;background:#fffbeb;color:#92400e;font-size:10.5px;font-weight:600;line-height:1.3}
.dm-ph-demo svg{width:13px;height:13px;flex:none}
.dm-ph-ic,.dm-ph-acts i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;
  background:#eafbf9;color:#0f8f8a}
.dm-ph-ic svg,.dm-ph-acts svg{width:17px;height:17px}
.dm-ph-card{margin:10px 12px 0;padding:12px 14px;background:#fff;border:1px solid #e2e8f0;border-radius:15px}
.dm-ph-ov{font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.dm-ph-sn{margin-top:6px;font:700 18px/1.15 var(--mono);letter-spacing:-.01em;color:#0f172a}
.dm-ph-md{margin-top:3px;font-size:12px;color:#475569}
.dm-ph-q{font-size:12.5px;font-weight:700;color:#0f172a}
.dm-ph-sub{margin-top:2px;font-size:10.5px;line-height:1.4;color:#64748b}
.dm-ph-acts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.dm-ph-acts li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e2e8f0;border-radius:12px;
  line-height:1.25}
.dm-ph-acts b{display:block;font-size:12px;font-weight:700;color:#0f172a}
.dm-ph-acts span span{display:block;font-size:10px;color:#64748b}
.dm-ph-ft{padding:11px 0 10px;text-align:center;font-size:10px;color:#64748b}
.dm-phone-wrap .shot-cap{text-align:center}

/* Las secciones de esta página son cortas: con el aire de las páginas
   grandes, la galería quedaba a tres pantallas del QR que se promete arriba. */
.dm-sec{padding-block:clamp(48px,7vw,104px)}

/* ── Cómo funciona: tres pasos en una fila ───────────────── */
.flow.flow-3{list-style:none;padding:0;margin-bottom:0;grid-template-columns:1fr}
.fstep-t{font-size:var(--t-0);font-weight:700;letter-spacing:-.01em;color:var(--ink1);margin-bottom:6px}
@media (min-width:720px){.flow.flow-3{grid-template-columns:repeat(3,1fr)}}

/* ── Galería de calcomanías ──────────────────────────────── */
.dm-hint{margin-top:16px;font-size:var(--t--1);color:var(--ink3);max-width:60ch}
.dm-hint-touch{display:none}
@media (hover:none){
  .dm-hint-desk{display:none}
  .dm-hint-touch{display:block}
}
/* El botón va pegado a SU calcomanía (12px) y lejos de la vecina (40px+):
   en el teléfono sube encima, y con huecos iguales no se sabría de cuál es. */
.stk-grid{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:grid;
  gap:clamp(40px,4vw,48px) clamp(20px,2.6vw,32px)}
.stk-item{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.stk{width:100%;max-width:360px;background:#fff;color:#0a0f1a;border-radius:16px;
  padding:20px 20px 0;text-align:center;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 22px 50px -24px rgba(0,0,0,.9)}
.stk-brand{font-weight:800;font-size:17px;line-height:1;letter-spacing:-.01em;color:#0a0f1a}
.stk-brand b{color:#9a6700;font-weight:800}
/* El QR nunca baja de 200px en escritorio: se escanea desde la silla, con
   la página proyectada. En el teléfono cabe entero sin scroll lateral. */
.stk-qr{width:min(100%,260px);margin:14px auto 0}
.stk-svg{display:block;width:100%;height:auto}
.stk-cta{margin-top:10px;font-weight:800;font-size:16px;line-height:1.3;color:#0a0f1a}
.stk-cap{margin-top:14px;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#5b6475}
.stk-serie{margin-top:6px;font-weight:800;font-size:clamp(22px,1.1rem + 1vw,27px);line-height:1.1;
  letter-spacing:.02em;color:#0a0f1a;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stk-mod{margin-top:7px;font-size:13.5px;line-height:1.4;font-weight:600;color:#3a4252}
.stk-tipo{display:inline-block;margin-left:4px;padding:3px 6px;border:1px solid #c9ced8;border-radius:5px;
  font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#3a4252;vertical-align:1px}
.stk-loc{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 11px;border-radius:999px;
  background:#f1f3f7;font-size:13px;line-height:1.3;font-weight:600;color:#3a4252}
.stk-pin{width:14px;height:14px;flex:none}
.stk-man{margin-top:12px;font-size:12px;line-height:1.45;color:#4a5263}
.stk-man b{color:#0a0f1a;font-weight:700}
/* La sugerencia no es parte de la calcomanía real: va en una franja aparte,
   con borde de corte, para que se lea como "lo que tienes que probar". */
.stk .stk-try{margin:16px -20px 0;padding:12px 20px 14px;background:#fff6dc;border-top:1px dashed #d9ad45;
  display:flex;flex-direction:column;gap:4px}
.stk-try-k{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a5a00}
.stk-try-v{font-weight:800;font-size:15.5px;line-height:1.3;color:#1c1300}
.stk-open{width:100%;max-width:360px}
/* En el teléfono no hay a quién apuntarle la cámara: el botón es la acción
   principal, así que sube encima de la calcomanía y toma el dorado. */
@media (hover:none){
  .stk-open{order:-1;background:var(--gold);border-color:var(--gold);color:#0a0600}
}
.dm-print{margin-top:clamp(26px,3vw,36px);font-size:var(--t--1);color:var(--ink3);max-width:66ch}
@media (hover:none){.dm-print{display:none}}
@media (min-width:680px){.stk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.stk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Sin QR: entrada por serie ───────────────────────────── */
.dm-series{list-style:none;margin:clamp(24px,3vw,34px) 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dm-series a{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:16px 18px;
  background:var(--deep);color:var(--ink2);transition:background .2s var(--e)}
.dm-series a:hover{background:var(--s1)}
.dm-series b{font:700 14px/1.2 var(--mono);letter-spacing:.06em;color:var(--gold)}
.dm-series span{font-size:var(--t--1);line-height:1.4;color:var(--ink3)}
.dm-series a:hover b{color:var(--gold-hi)}
/* se abre en otra pestaña, en el portal: la flecha lo anuncia */
.dm-series a{position:relative;padding-right:44px}
.dm-series a::after{content:"↗";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--ink4);transition:color .2s var(--e)}
.dm-series a:hover::after{color:var(--gold)}
@media (min-width:600px){.dm-series{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.dm-series{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Del otro lado: la lista junto a la captura ──────────── */
.dm-otro{display:grid;gap:clamp(30px,4vw,48px);align-items:center}
.dm-otro-tx{min-width:0}
@media (min-width:960px){.dm-otro{grid-template-columns:1fr 1.1fr}}

/* ── En una presentación: pasos numerados ────────────────── */
.dm-pasos{list-style:none;margin:clamp(24px,3vw,34px) 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border-block:1px solid var(--line);counter-reset:paso;max-width:820px}
.dm-pasos li{counter-increment:paso;background:var(--void);display:grid;grid-template-columns:44px 1fr;
  gap:12px;padding:18px 0;font-size:var(--t-0);line-height:1.55;color:var(--ink1);font-weight:500}
.dm-pasos li::before{content:counter(paso,decimal-leading-zero);font:600 12px/1.9 var(--mono);
  letter-spacing:.14em;color:var(--gold)}

@media (prefers-reduced-motion:reduce){.dm-series a{transition:none}}

/* ══════════════════════════════════════════════════════════════
   IMPRESIÓN: solo las seis calcomanías, en una hoja, listas para recortar.
   Todo lo demás de la página se oculta.
   ══════════════════════════════════════════════════════════════ */
@media print{
  @page{margin:10mm}
  html,body{background:#fff !important;color:#000}
  body{background-image:none !important}
  body::after{display:none !important}
  .skip,.hdr,.ft,.aiw,.aiw-fab,.aiw-peek{display:none !important}
  main>section:not(#calcomanias){display:none !important}
  #calcomanias{padding:0}
  #calcomanias .wrap{width:100%;max-width:none}
  #calcomanias .h2,#calcomanias .lede,.dm-hint,.dm-en,.dm-print,.stk-open{display:none !important}
  /* Sin esto, lo que todavía no había entrado en pantalla (reveal pendiente)
     salía impreso en blanco. */
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
  .stk-grid{margin:0;grid-template-columns:repeat(3,1fr) !important;gap:0}
  .stk-item{display:block;padding:4mm;border:1px dashed #9aa3b2;break-inside:avoid;page-break-inside:avoid}
  .stk{max-width:none;border-radius:0;box-shadow:none;padding:2mm 2mm 0;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stk-brand{font-size:12pt}
  .stk-qr{width:44mm;margin-top:3mm}
  .stk-cta{font-size:10pt;margin-top:2mm}
  .stk-cap{font-size:6.5pt;margin-top:3mm}
  .stk-serie{font-size:15pt;margin-top:1mm}
  .stk-mod{font-size:8.5pt}
  .stk-loc{font-size:8pt;padding:1mm 3mm}
  .stk-man{font-size:7.5pt;margin-top:2mm}
  .stk .stk-try{margin:3mm -2mm 0;padding:2mm 2mm 3mm}
  .stk-try-k{font-size:6.5pt}
  .stk-try-v{font-size:9.5pt}
}

/* Portal del cliente (con cuenta) */
#portal-cliente .pcta{margin-top:22px}
.dm-nota{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--ink3);max-width:64ch}