/* ===========================================================
   Lanzamientos 2026 · VentasxMayor
   Escenario oscuro, una sola luz de marca (teal).
   Display: Archivo variable (eje wdth). Cuerpo: Montserrat (marca).
   =========================================================== */

@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62.5% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --ink:#0E1113;
  --ink-2:#141A1C;
  --ink-3:#1B2328;
  --text:#ECF1F0;
  --muted:rgba(236,241,240,.68);
  --dim:rgba(236,241,240,.48);
  --line:rgba(236,241,240,.13);
  --line-soft:rgba(236,241,240,.07);
  --teal:#4DC6BE;
  --teal-soft:#7FD2CD;
  --teal-deep:#1E8F88;

  --r:14px;
  --r-sm:8px;
  --pill:999px;

  --shadow-lift:0 22px 60px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.32);
  --shadow-soft:0 12px 32px rgba(0,0,0,.36);

  --maxw:1320px;
  --gut:clamp(20px, 5vw, 72px);

  --fs-hero:clamp(42px, 5.9vw, 84px);
  --fs-h2:clamp(29px, 4.1vw, 54px);
  --fs-h3:19px;
  --fs-lead:clamp(17px, 1.35vw, 21px);
  --fs-body:16.5px;
  --fs-small:14px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ol,ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:'Archivo',system-ui,sans-serif;font-weight:700;line-height:1.04;letter-spacing:-.03em}

/* superficies del navegador: también son parte del diseño */
::selection{background:var(--teal);color:#08211F}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
html{scrollbar-color:var(--teal-deep) var(--ink);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2A3438;border-radius:99px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--teal-deep)}

/* los lienzos aurora */
.aurora{position:absolute;pointer-events:none}
.aurora__canvas{width:100%;height:100%;display:block}
.aurora-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.95;
  transition:opacity 1s var(--ease);
  mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.25));
}
/* todo el contenido apila por encima del lienzo de fondo */
body > section, body > footer{position:relative;z-index:1}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--teal);color:#08211F;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}

/* ---------- tipografía compartida ---------- */
.h2{font-size:var(--fs-h2);max-width:19ch;text-wrap:balance}
.h3{font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.25}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:60ch;line-height:1.6}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:14px 26px;border-radius:var(--pill);
  font-weight:700;font-size:15px;text-decoration:none;letter-spacing:-.01em;
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary{background:var(--teal);color:#07211F;box-shadow:0 10px 30px rgba(77,198,190,.22)}
.btn--primary:hover{background:var(--teal-soft)}
.btn--ghost{border:1px solid rgba(236,241,240,.32);color:var(--text)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-soft)}
.btn:active{transform:translateY(1px) scale(.99)}

.link{display:inline-flex;align-items:center;gap:8px;color:var(--teal);text-decoration:none;font-weight:700;font-size:15px;border-bottom:1px solid transparent;padding-bottom:2px}
.link::after{content:'→';transition:transform .2s var(--ease)}
.link:hover{border-bottom-color:var(--teal)}
.link:hover::after{transform:translateX(4px)}

/* ---------- nav: burbuja flotante ---------- */
.nav{
  position:fixed;top:14px;left:50%;translate:-50% 0;z-index:50;
  width:min(640px, calc(100% - 28px));height:56px;
  display:flex;align-items:center;gap:14px;
  padding:0 8px 0 18px;border-radius:var(--pill);
  background:rgba(14,17,19,.55);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(236,241,240,.10);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-stuck{background:rgba(14,17,19,.78);border-color:rgba(236,241,240,.16)}
.nav__brand{display:flex;align-items:center}
.nav__brand img{width:104px;height:33px;object-fit:contain}
/* el índice: el rótulo del centro abre la lista de los once sistemas */
.nav__toc{
  margin:0 auto;display:inline-flex;align-items:center;gap:7px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;font-stretch:112%;letter-spacing:.02em;
  color:var(--muted);background:none;border:0;padding:8px 10px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav__toc:hover,.nav__toc[aria-expanded="true"]{color:var(--text);background:rgba(236,241,240,.07)}
.nav__toc svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.nav__toc[aria-expanded="true"] svg{transform:rotate(180deg)}
.toc{
  position:fixed;top:78px;left:50%;translate:-50% 0;z-index:49;
  width:min(560px,calc(100% - 28px));max-height:min(70vh,620px);overflow-y:auto;
  padding:16px;border-radius:var(--r);
  background:rgba(14,17,19,.92);backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(236,241,240,.14);box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.anim .toc{opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.anim .toc.is-open{opacity:1;transform:none}
.toc__head{margin:0 0 10px;padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.toc__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.toc__list a{
  display:flex;align-items:baseline;gap:11px;padding:9px 10px;border-radius:var(--r-sm);
  color:var(--muted);text-decoration:none;font-size:14px;line-height:1.35;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.toc__list a b{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;flex:none}
.toc__list a:hover{background:rgba(236,241,240,.07);color:var(--text)}
.toc__list a.is-cur{color:var(--teal-soft);background:rgba(77,198,190,.1)}
.toc__list a.is-cur b{color:var(--teal)}
@media (max-width:560px){
  .toc__list{grid-template-columns:1fr}
  /* a 375px el rótulo largo parte el pill del menú en dos líneas */
  .nav__toc span{font-size:0}
  .nav__toc span::after{content:'Índice';font-size:13px}
}
.btn--nav{padding:9px 18px;font-size:13px;border:1px solid rgba(236,241,240,.28);background:rgba(236,241,240,.06)}
.btn--nav:hover{border-color:var(--teal);color:var(--teal-soft)}
@media (max-width:560px){.nav__year{display:none}.nav{height:52px}.nav__brand img{width:92px;height:29px}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100dvh;display:flex;align-items:center;
  padding:120px var(--gut) 80px;
  background:transparent;
  overflow:hidden;
}
.hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:3px 3px;
  mask-image:linear-gradient(to bottom, #000 20%, transparent 92%);
}
.hero__inner{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.hero__title{font-size:clamp(46px,6.1vw,96px);font-stretch:118%;letter-spacing:-.04em;line-height:.9}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line--accent{
  color:var(--teal);
  background:linear-gradient(110deg, var(--teal) 42%, #D9FFFB 50%, var(--teal) 58%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shine 5.5s var(--ease) infinite;
}
@keyframes shine{0%,55%{background-position:118% 0}90%,100%{background-position:-18% 0}}
.hero__title .char{display:inline-block}
.hero__sub{margin-top:28px;max-width:40ch;font-size:clamp(17px,1.6vw,22px);color:var(--muted);line-height:1.55}

/* la escena: video real en un marco de navegador + pantallas satélite */
.hero__media{position:relative;transform-style:preserve-3d;perspective:1200px}
.devframe{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);
  box-shadow:0 44px 110px rgba(0,0,0,.62), 0 0 0 1px rgba(77,198,190,.07);
}
.devframe__bar{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  background:var(--ink-2);border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--dim);
}
.devframe__bar i{width:9px;height:9px;border-radius:50%;background:rgba(236,241,240,.16)}
.devframe__bar span{margin-left:8px}
.devframe video{width:100%;height:auto;display:block}
/* ---------- el hero: la tienda en vista explotada ----------
   Cuatro planos recomponen exactamente la home (assets/lz/ia-tienda.webp) y
   tres satélites se acoplan alrededor. En reposo cada pieza está a su
   profundidad; GSAP las trae a Z=0 una por una. Sin JS ya están armadas. */
.xplode{
  position:relative;width:100%;aspect-ratio:1792/1063;
  transform-style:preserve-3d;
}
.xplode__glow{
  position:absolute;inset:-18% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 46%, rgba(77,198,190,.20), transparent 68%);
  filter:blur(14px);opacity:0;
}
.xplode__frame{
  position:absolute;inset:0;z-index:1;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);
  box-shadow:0 44px 110px rgba(0,0,0,.62), 0 0 0 1px rgba(77,198,190,.07);
  transform-style:preserve-3d;
}
.xplode__page{position:absolute;left:0;right:0;top:38px;bottom:0;transform-style:preserve-3d}
/* cada plano ocupa su lugar exacto dentro de la página recompuesta */
.xp{position:absolute;display:block;backface-visibility:hidden}
.xp--nav {left:0;top:0;width:18.75%;height:100%}
.xp--bar {left:18.75%;top:0;width:81.25%;height:7.38%}
.xp--hero{left:18.75%;top:7.38%;width:81.25%;height:47.26%}
.xp--body{left:18.75%;top:54.64%;width:81.25%;height:45.36%}

/* los satélites: los sistemas que se acoplan a la tienda */
.xsat{
  position:absolute;z-index:3;margin:0;border-radius:12px;
  border:1px solid rgba(236,241,240,.16);background:var(--ink-2);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  overflow:hidden;backface-visibility:hidden;
}
.xsat img{display:block;width:100%;height:auto}
.xsat figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 12px 8px;
  background:linear-gradient(to top, rgba(14,17,19,.94) 45%, transparent);
  font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;font-stretch:112%;
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal-soft);text-align:center;
}
.xsat--chat{right:-11%;top:4%;width:34%}
.xsat--prev{left:-13%;bottom:4%;width:19%}
.xsat--kit {right:6%;bottom:-8%;width:38%}
/* la barra del kit es muy baja: el rótulo encima la taparía entera */
.xsat--kit figcaption{position:static;padding:6px 10px 7px;background:var(--ink-2);border-top:1px solid var(--line-soft)}

/* flotación en reposo: apenas para que la escena respire */
.anim .xplode.is-set .xsat--chat{animation:bob 7s ease-in-out infinite}
.anim .xplode.is-set .xsat--prev{animation:bob 8.5s ease-in-out infinite reverse}
.anim .xplode.is-set .xsat--kit {animation:bob 9.5s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}

@media (max-width:980px){
  .hero{min-height:0;padding-top:110px}
  .hero__inner{grid-template-columns:1fr;gap:40px}
  .xsat--prev{display:none}
  .xsat--chat{width:38%;right:-6%}
  .xsat--kit{width:46%;right:2%;bottom:-6%}
}
@media (prefers-reduced-motion:reduce){
  .xsat{animation:none !important}
}

/* ---------- capítulos: apertura con título gigante + hoja que la cubre ---------- */
.feature{position:relative}
.opener{
  position:sticky;top:0;height:92vh;z-index:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 var(--gut) 16vh;overflow:hidden;
}
.opener__word{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:118%;
  font-size:clamp(52px, var(--wfs,14vw), 230px);
  line-height:.92;letter-spacing:-.045em;white-space:nowrap;
}
.opener__tag{margin-top:20px;font-size:clamp(16px,1.7vw,23px);color:var(--muted);max-width:34ch}
.opener__ghost{
  position:absolute;top:6%;left:-2%;
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:122%;
  font-size:26vw;line-height:1;white-space:nowrap;pointer-events:none;
  color:transparent;-webkit-text-stroke:1.5px rgba(236,241,240,.06);
}
.sheet{
  position:relative;z-index:1;background:var(--ink);
  border-top:1px solid var(--line);border-radius:30px 30px 0 0;
  margin-top:-13vh;
  box-shadow:0 -34px 90px rgba(0,0,0,.5);
}
.sheet--alt{background:var(--ink-2)}
.sheet::before{
  content:'';position:absolute;inset:0 0 auto 0;height:420px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 100% at 18% 0%, var(--glow, rgba(77,198,190,.07)), transparent 65%);
}
.feature--ia .sheet::before{background:radial-gradient(60% 100% at 18% 0%, rgba(139,124,246,.10), transparent 65%)}
.sheet > .chapter{padding-top:clamp(64px,7.5vw,110px)}
@media (max-width:700px){
  .opener{height:78vh}
  .opener__tag{font-size:16px}
  .sheet{border-radius:20px 20px 0 0;margin-top:-10vh}
}

/* ---------- 01 · escalera de descuentos ---------- */
.ladder{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.4vw,52px);
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow-lift);position:relative;overflow:hidden;
}
.ladder::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 90% at 8% 0%,rgba(77,198,190,.09),transparent 55%);pointer-events:none}
.ladder__name{font-size:15px;color:var(--muted)}
.ladder__qty{margin-top:14px;font-family:'Archivo',sans-serif}
.ladder__qty b{font-size:clamp(48px,5.4vw,76px);font-weight:800;font-stretch:114%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ladder__qty span{font-size:15px;color:var(--dim);margin-left:8px}
.ladder__price{margin-top:10px;font-family:'Archivo',sans-serif;font-size:clamp(24px,2.4vw,32px);font-weight:700;color:var(--teal-soft);font-variant-numeric:tabular-nums}
.ladder__price span{font-size:15px;color:var(--dim);font-weight:600}
.ladder__total{margin-top:18px;font-size:15px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:14px}
.ladder__total b{font-variant-numeric:tabular-nums;color:var(--text)}
.ladder__tiers{display:flex;flex-direction:column;gap:10px;position:relative}
.tier{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:14px 18px;border-radius:var(--r-sm);border:1px solid var(--line);
  font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.tier i{font-style:normal;font-size:13px;font-weight:700;color:var(--dim)}
.tier b{font-family:'Archivo',sans-serif;font-size:17px}
.tier.on{border-color:var(--teal);background:rgba(77,198,190,.09);color:var(--text);transform:translateX(6px)}
.tier.on i{color:var(--teal)}
.tier.on b{color:var(--teal-soft)}
.ladder__nudge{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:18px}
.ladder__nbar{flex:0 0 120px;height:5px;border-radius:99px;background:rgba(236,241,240,.1);overflow:hidden}
.ladder__nbar i{display:block;height:100%;width:22%;background:linear-gradient(90deg,var(--teal-deep),var(--teal));border-radius:99px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.chip{font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:var(--pill);border:1px solid var(--line);color:var(--muted)}
@media (max-width:860px){.ladder{grid-template-columns:1fr}}

/* ---------- composer de reglas de descuento ---------- */
.composer{margin-top:clamp(40px,5vw,64px)}
.composer__title{font-size:clamp(20px,2vw,26px)}
.composer__sub{margin-top:10px;color:var(--muted);font-size:15.5px;max-width:62ch}
.rules{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.rule{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:18px 20px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.rule:nth-child(2){rotate:-.4deg;margin-left:clamp(10px,3vw,54px)}
.rule:nth-child(3){rotate:.35deg;margin-left:clamp(20px,6vw,108px)}
.rp{
  font-size:14px;font-weight:600;padding:9px 15px;border-radius:var(--pill);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.rp--fill{background:rgba(77,198,190,.10);border-color:rgba(77,198,190,.35);color:var(--teal-soft)}
@media (max-width:700px){.rule:nth-child(2),.rule:nth-child(3){margin-left:0;rotate:none}.rp{white-space:normal}}

/* ---------- estructura de capítulo ---------- */
.chapter{padding:clamp(80px,9vw,140px) var(--gut);max-width:var(--maxw);margin:0 auto}

.chapter__intro{margin-bottom:clamp(36px,4.5vw,58px)}
.chapter__intro .lead{margin-top:18px}
.chapter__intro--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:end}
@media (max-width:860px){.chapter__intro--split{grid-template-columns:1fr}}

.chapter__notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(40px,5vw,68px)}
.chapter__notes--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.note{border-top:1px solid var(--line);padding-top:18px}
.note p{margin-top:10px;color:var(--muted);font-size:15px}
@media (max-width:900px){.chapter__notes,.chapter__notes--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.chapter__notes,.chapter__notes--4{grid-template-columns:1fr}}

.wide{margin:clamp(46px,6vw,80px) 0 0}
.wide img{width:100%;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-lift)}
.wide figcaption{margin-top:14px;color:var(--dim);font-size:14px}
.wide--video{margin-top:clamp(46px,6vw,80px)}
.devframe--inline{box-shadow:var(--shadow-lift)}
.wide--video img,.wide--video video{border-radius:0;border:0;box-shadow:none}

/* ---------- 01b · el constructor de reglas (video + pasos sincronizados) ---------- */
.rulebuilder{margin-top:clamp(46px,6vw,86px)}
.rulebuilder__intro{max-width:70ch}
.rulebuilder__title{font-size:clamp(20px,2vw,26px)}
.rulebuilder__sub{margin-top:10px;color:var(--muted);font-size:15.5px}
.rulebuilder__grid{
  margin-top:clamp(24px,3vw,38px);
  display:grid;grid-template-columns:minmax(0,304px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:start;
}
.rbsteps{display:flex;flex-direction:column;gap:4px;position:sticky;top:96px}
.rbstep{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:13px 16px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.rbstep:hover{background:rgba(236,241,240,.035)}
.rbstep__n{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);font-family:'Archivo',sans-serif;font-weight:700;
  font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;
  transition:all .3s var(--ease);
}
.rbstep__name{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.015em;color:var(--muted);transition:color .3s var(--ease)}
.rbstep__desc{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--dim);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease)}
.rbstep.is-on{background:rgba(77,198,190,.07);border-color:rgba(77,198,190,.32)}
.rbstep.is-on .rbstep__n{background:var(--teal);border-color:var(--teal);color:#07211F}
.rbstep.is-on .rbstep__name{color:var(--text)}
.rbstep.is-on .rbstep__desc{max-height:140px;opacity:1}
.rbstep.is-done .rbstep__n{border-color:rgba(77,198,190,.45);color:var(--teal-soft)}
.rbstage{position:sticky;top:96px}
.rbstage video{width:100%;height:auto;display:block;background:#fff}
.rbstage__prog{margin-top:14px;height:2px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.rbstage__prog i{display:block;height:100%;width:0;background:var(--teal);transition:width .2s linear}
.rbstage__foot{margin-top:12px;color:var(--dim);font-size:13.5px}
.devframe__live{margin-left:auto;font-size:11px;font-weight:700;color:var(--teal-soft);padding:4px 10px;border-radius:var(--pill);background:rgba(77,198,190,.1);border:1px solid rgba(77,198,190,.28)}
@media (max-width:1000px){
  .rulebuilder__grid{grid-template-columns:1fr}
  .rbsteps,.rbstage{position:static}
  .rbsteps{order:2}
  .rbstep__desc{max-height:140px;opacity:1}
}

/* ---------- 01c · el simulador ---------- */
.simstage{margin-top:clamp(46px,6vw,86px)}
.simstage__head{max-width:70ch}
.simstage__sub{margin-top:10px;color:var(--muted);font-size:15.5px}
.simstage__frame{margin-top:clamp(22px,3vw,34px)}
.simstage video{width:100%;height:auto;display:block;background:#fff}
.verdict{
  margin-top:18px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px);box-shadow:var(--shadow-soft);
}
.verdict__head{display:flex;align-items:baseline;gap:clamp(16px,3vw,44px);flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.verdict__rule{display:flex;align-items:center;gap:12px;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.verdict__flag{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#07211F;background:var(--teal);padding:4px 10px;border-radius:var(--pill)}
.verdict__note{flex:1 1 30ch;font-size:13.5px;color:var(--dim);max-width:66ch}
.verdict__list{margin-top:18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,26px)}
.verdict__list li{display:flex;flex-direction:column;gap:6px;font-size:14px;border-left:1px solid var(--line-soft);padding-left:16px}
.verdict__list li span{font-size:12px;letter-spacing:.02em;color:var(--dim)}
.verdict__list li b{color:var(--muted);font-weight:600}
.verdict__fx{border-left-color:rgba(77,198,190,.45) !important}
.verdict__fx b{color:var(--teal-soft);font-family:'Archivo',sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.anim .verdict__list li{opacity:0}
@media (max-width:860px){
  .verdict__list{grid-template-columns:1fr 1fr;gap:18px}
  .verdict__rule{white-space:normal}
}

/* ---------- 02 · el probador de tiendas en vivo ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);
  padding:clamp(22px,2.8vw,32px) 0;margin-bottom:clamp(30px,4vw,48px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:112%;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.035em;color:var(--teal-soft);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:13.5px;color:var(--dim)}
.stat__inf{line-height:.9}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr;gap:22px}}

.editorstage__lead{max-width:66ch;margin-bottom:20px}
.editorstage__kicker{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.editorstage__say{margin-top:8px;color:var(--muted);font-size:15.5px}
.editorstage__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.vchip{
  background:transparent;border:1px solid var(--line);border-radius:var(--pill);
  padding:9px 17px;cursor:pointer;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.vchip:hover{border-color:rgba(236,241,240,.32);color:var(--text)}
.vchip.is-active{border-color:var(--teal);background:rgba(77,198,190,.1);color:var(--teal-soft)}
.browser{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--ink-3);box-shadow:var(--shadow-lift)}
.browser__bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;background:var(--ink-2);border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--dim)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:rgba(236,241,240,.16)}
.browser__url{margin-left:10px}
.browser__badge{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--teal-soft);padding:4px 10px;border-radius:var(--pill);background:rgba(77,198,190,.1);border:1px solid rgba(77,198,190,.3)}
.kioskwrap{position:relative;width:100%;height:min(640px,72vh);overflow:hidden;background:#0E0E10}
.kioskwrap__poster{width:100%;height:100%;object-fit:cover;object-position:top center}
.kioskwrap.is-live .kioskwrap__poster{visibility:hidden}
.kioskframe{position:absolute;top:0;left:0;width:138.9%;height:138.9%;border:0;transform:scale(.72);transform-origin:top left}
.editorstage__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px}
.editorstage__foot{color:var(--dim);font-size:14px}
.tswitch{display:inline-flex;align-items:center;gap:11px;background:transparent;border:0;padding:0;cursor:pointer;color:var(--muted);font:inherit;font-size:14px;font-weight:600}
.tswitch__track{width:44px;height:25px;border-radius:99px;background:rgba(236,241,240,.12);border:1px solid var(--line);position:relative;transition:background-color .25s var(--ease), border-color .25s var(--ease)}
.tswitch__knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--dim);transition:transform .25s var(--ease), background-color .25s var(--ease)}
.tswitch[aria-checked="true"] .tswitch__track{background:rgba(77,198,190,.3);border-color:var(--teal)}
.tswitch[aria-checked="true"] .tswitch__knob{transform:translateX(19px);background:var(--teal)}
.tswitch[aria-checked="true"]{color:var(--teal-soft)}
@media (max-width:900px){
  .kioskwrap{height:460px}
  .kioskframe{width:200%;height:200%;transform:scale(.5)}
}

/* ---------- 02 · vendedor IA ---------- */
/* La demo son capturas de una conversación real (demo2.ventasxmayor.com):
   el hilo se rearma en HTML para que se lea, y la tienda son las pantallas
   tal cual, con el widget flotante pintado para no duplicar el chat. */
.stage--chat{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.chatpanel{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-soft)}
.chatpanel__head{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.chatpanel__hours{margin-left:auto;font-size:11.5px;color:var(--dim);font-weight:400}
.chat{display:flex;flex-direction:column;gap:12px;margin:16px 0 0;padding:0;list-style:none}
.msg{max-width:88%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5}
@media (min-width:901px){.anim .msg{opacity:0}}
.msg--user{align-self:flex-end;background:#232C31;border-bottom-right-radius:5px}
.msg--bot{align-self:flex-start;background:rgba(77,198,190,.13);border:1px solid rgba(77,198,190,.28);border-bottom-left-radius:5px;color:#DDF4F2}
/* no es un mensaje: es lo que hace el cliente con el mouse */
.msg--act{align-self:center;max-width:100%;padding:7px 15px;border:1px dashed var(--line);border-radius:var(--pill);background:none;font-size:12.5px;color:var(--dim);text-align:center}
.msg--act b{color:var(--text);font-weight:700}
.chatpanel__foot{margin:16px 0 0;padding:11px 16px;border:1px solid var(--line);border-radius:var(--pill);font-size:13.5px;color:var(--dim)}

.storepanel{position:relative;background:var(--ink);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lift)}
.storepanel__bar{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--dim);background:var(--ink-3)}
.storepanel__url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storepanel__url b{color:var(--text);font-weight:600}
.storestack{position:relative;aspect-ratio:1792/1003;background:#EEEEEB}
.storeview{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.015);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.storeview.is-active{opacity:1;transform:none}
.storeview picture{display:contents}
.storeview img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.storeview__label{
  position:absolute;left:12px;right:12px;bottom:12px;margin:0;
  padding:11px 15px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:rgba(14,17,19,.92);color:var(--text);
  font-size:13.5px;line-height:1.45;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.storeview__label b{color:var(--vio,#A78BFA)}
.stage__source{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--dim);max-width:70ch}

@media (max-width:900px){
  .stage--chat{grid-template-columns:1fr}
}
@media (max-width:760px){
  .storestack{aspect-ratio:960/738}
  .storeview img{object-position:center top}
  .storeview__label{font-size:12.5px;padding:10px 13px}
}

/* ---------- vendedor IA: acento violeta + chispa ---------- */
.feature--ia{--vio:#A78BFA;--vio-deep:#6D5EF3}
.spark{width:1em;height:1em;vertical-align:-.12em;color:var(--vio,#A78BFA);animation:sparkle 2.6s var(--ease) infinite}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(1.25) rotate(18deg);opacity:.75}}
.feature--ia .opener__tag{color:var(--muted)}
.feature--ia .msg--bot{background:rgba(139,124,246,.14);border:1px solid rgba(167,139,250,.34);color:#E4DEFC}
.feature--ia .chatpanel__head{color:var(--vio)}
.feature--ia .sheet{background:linear-gradient(180deg, rgba(109,94,243,.05), transparent 30%), var(--ink)}
.storepanel__hint{margin-left:auto;flex:none;white-space:nowrap;font-size:11.5px;font-weight:700;color:var(--vio,#A78BFA);letter-spacing:.01em}

/* ---------- 03 · gestor de pedidos (pin + scrub) ---------- */
.pinstage{position:relative}
.pinstage__sticky{position:relative;display:flex;flex-direction:column;justify-content:center}
.flow{position:relative;width:100%;min-height:clamp(400px,52vh,500px)}
html:not(.anim) .flow__step{position:static;opacity:1;pointer-events:auto;margin-bottom:44px}
html:not(.anim) .pinstage__sticky{min-height:0}
html:not(.anim) .storestack{aspect-ratio:auto}
html:not(.anim) .storeview{position:static;opacity:1;transform:none;pointer-events:auto}
html:not(.anim) .storeview img{height:auto}
html:not(.anim) .storeview__label{position:static;border-radius:0;border:0;border-top:1px solid var(--line)}
.flow__step{
  position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(22px,4vw,56px);align-items:center;
  opacity:0;visibility:hidden;transform:translateY(26px);pointer-events:none;
  transition:opacity .4s var(--ease), transform .55s var(--ease), visibility 0s linear .4s;
}
.flow__step.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.flow__text p{color:var(--muted);margin-top:16px;max-width:44ch}
.flow__text .chipline{margin-top:18px}
.flow__name{font-size:clamp(22px,2.6vw,34px)}
.flow__viz{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--shadow-lift);
  min-height:clamp(320px,40vh,400px);display:flex;flex-direction:column;gap:4px;
}
.viz__head{font-size:12.5px;color:var(--dim);padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:10px}
.viz__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--dim)}
.orow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.orow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orow em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.st{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:var(--pill);border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.st--now{background:var(--teal);border-color:var(--teal);color:#07211F}
.st--mid{border-color:rgba(77,198,190,.4);color:var(--teal-soft)}
.st--new{border-color:rgba(232,179,58,.5);color:#E8B33A}
.payline{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.payline span{color:var(--dim)}
.payline b{color:var(--teal-soft);text-align:right}
.docgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.chipline{display:flex;flex-wrap:wrap;gap:8px}
.chipline b{font-size:13px;font-weight:700;padding:7px 14px;border-radius:var(--pill);background:rgba(77,198,190,.1);border:1px solid rgba(77,198,190,.3);color:var(--teal-soft)}
.viz-entrada__file{margin-top:16px;font-size:13.5px;color:var(--dim);border-top:1px solid var(--line-soft);padding-top:14px}
.arow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.arow:last-child{border-bottom:0}
.arow b{font-variant-numeric:tabular-nums;color:var(--teal-soft)}
.arow--short b{color:#E8B33A}
.viz-cobro__pay{font-size:14px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:14px}
.viz-papeles{display:flex;flex-wrap:wrap;gap:10px}
.doc{font-size:13.5px;padding:10px 16px;border-radius:var(--r-sm);background:var(--ink-3);border:1px solid var(--line)}
.pinstage__progress{position:relative;margin-top:26px;height:2px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.pinstage__progress i{display:block;height:100%;width:0;background:var(--teal)}
html:not(.anim) .pinstage__progress{display:none}
@media (max-width:900px){
  .flow__step{grid-template-columns:1fr;align-content:start;gap:22px}
  .pinstage__sticky{min-height:640px}
}

/* indicador de pasos del circuito */
.flow__dots{display:flex;gap:22px;margin-top:22px;justify-content:center}
.flow__dots li{position:relative;font-size:12.5px;font-weight:600;color:var(--dim);padding-left:16px;transition:color .3s var(--ease)}
.flow__dots li::before{content:'';position:absolute;left:0;top:50%;translate:0 -50%;width:8px;height:8px;border-radius:50%;border:2px solid var(--line);transition:all .3s var(--ease)}
.flow__dots li.on{color:var(--teal-soft)}
.flow__dots li.on::before{background:var(--teal);border-color:var(--teal)}

/* ---------- 05 · modo pro ---------- */
.protable__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px clamp(16px,2.4vw,26px);background:var(--ink-3);border-bottom:1px solid var(--line)}
.protable__search{flex:1 1 auto;max-width:340px;font-size:13.5px;color:var(--dim);border:1px solid var(--line);border-radius:var(--pill);padding:9px 16px;background:var(--ink)}
.protable__tabs{display:flex;gap:4px}
.protable__tabs b{font-size:13px;font-weight:600;color:var(--dim);padding:8px 14px;border-radius:var(--pill)}
.protable__tabs b.on{background:rgba(77,198,190,.12);color:var(--teal-soft)}
@media (max-width:700px){.protable__tabs{display:none}}
.protable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-2);box-shadow:var(--shadow-lift)}
.protable__head,.prow{display:grid;grid-template-columns:100px minmax(0,1fr) 150px 90px;gap:16px;padding:14px clamp(16px,2.4vw,26px);align-items:center}
.protable__head{background:var(--ink-2);font-size:12.5px;color:var(--dim);letter-spacing:.02em}
.prow{border-top:1px solid var(--line-soft);font-size:15px}
.prow span:first-child{color:var(--dim);font-variant-numeric:tabular-nums;font-size:13.5px}
.prow s{color:var(--dim);margin-right:6px}
.qty{justify-self:end;font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right;color:var(--teal-soft)}
.protable__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px clamp(16px,2.4vw,26px);border-top:1px solid var(--line);background:var(--ink-3);font-size:15px}
.protable__foot b{font-family:'Archivo',sans-serif;font-variant-numeric:tabular-nums}
.protable__save{color:var(--teal);font-weight:700}
@media (max-width:700px){
  .protable__head,.prow{grid-template-columns:1fr 92px 62px;gap:10px}
  .protable__head span:first-child,.prow span:first-child{display:none}
}

/* ---------- 05/06 · preventa y cuotas ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(64px,7vw,104px)}
.duo--flip .duo__side{order:2}
.duo__side .lead{margin-top:18px}
.ticks{margin:26px 0 28px;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:26px;color:var(--muted);font-size:15.5px}
.ticks li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;border:2px solid var(--teal)}
.quotas{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-lift)}
/* preventa: la ficha real de un producto que todavía no llegó, recortada de
   una tienda de indumentaria. Se muestra a tamaño natural (490px) porque la
   captura es 1x y estirarla la ablanda. */
.prevshot{margin:0;max-width:500px;justify-self:center}
.prevshot img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-lift)}
.prevshot figcaption{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--dim)}
.prevshot figcaption b{color:var(--teal-soft)}
.duo > .wide{grid-column:1/-1}
.quotas__head{font-size:14px;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.quotas__list{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.quotas__list li{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:var(--r-sm);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.quotas__list li b{font-family:'Archivo',sans-serif;font-size:18px}
.quotas__list li.on{border-color:var(--teal);background:rgba(77,198,190,.09);color:var(--teal-soft)}
.quotas__rule{font-size:13.5px;color:var(--dim)}
@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo--flip .duo__side{order:0}
}

.ptl{margin-top:18px;display:flex;flex-direction:column}
.ptl li{
  position:relative;padding:0 0 18px 30px;font-size:14.5px;
}
.ptl li::before{
  content:'';position:absolute;left:6px;top:5px;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--line);background:var(--ink);z-index:1;
}
.ptl li:not(:last-child)::after{
  content:'';position:absolute;left:10px;top:17px;bottom:-3px;width:2px;background:var(--line-soft);
}
.ptl li.done::before{border-color:var(--teal);background:var(--teal)}
.ptl li.done::after{background:rgba(77,198,190,.4)}
.ptl li.now::before{border-color:var(--teal);box-shadow:0 0 0 4px rgba(77,198,190,.18)}
.ptl li b{display:block;font-family:'Archivo',sans-serif;font-size:15px}
.ptl li span{color:var(--dim);font-size:13px}
.quotas__methods{display:flex;gap:6px;margin-bottom:16px}
.quotas__methods b{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--dim);padding:9px 8px;border-radius:var(--r-sm);border:1px solid var(--line)}
.quotas__methods b.on{background:rgba(77,198,190,.1);border-color:var(--teal);color:var(--teal-soft)}
.quotas__ficha{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--dim)}
.quotas__ficha b{color:var(--teal-soft)}
.duo__viz{display:flex;flex-direction:column}

/* ---------- 10 · API abierta ---------- */
.chapter__cta{margin:clamp(28px,3.5vw,44px) 0 0}
.apistage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,3.4vw,44px);align-items:start}
.apicode{align-self:start}
.apicode__pre{
  margin:0;padding:clamp(16px,2vw,24px);overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.75;color:var(--text);background:var(--ink);
  -moz-tab-size:2;tab-size:2;
}
.apicode__pre code{white-space:pre}
.apicode__pre .c-dim{color:var(--dim)}
.apicode__pre .c-str{color:var(--teal-soft)}
.apicode__pre .c-ok{color:var(--teal);font-weight:700}
.apiends{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.apiends li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:14px 18px;background:var(--ink)}
.ev{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:5px}
.ev--get{color:#9BE8E2;background:rgba(77,198,190,.14)}
.ev--post{color:#AFC9F5;background:rgba(91,143,224,.16)}
.ep{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--text)}
.apiends i{grid-column:2;font-style:normal;font-size:13.5px;color:var(--dim);line-height:1.5}
@media (max-width:900px){
  .apistage{grid-template-columns:1fr}
  .apicode__pre{font-size:12px}
}


/* ---------- 08 · constructor de catálogos ----------
   Portado del hero de generador-de-catalogos.html (assets/css/ctb-2026.css):
   mismas 5 escenas × 2 fases y las mismas clases .ctb-*, para que un cambio
   allá se pueda volver a traer sin traducir nada. Lo único que cambia es el
   pin: allá es position:sticky (y por eso esa página pasa body a overflow:clip),
   acá lo hace ScrollTrigger, que es lo que ya usa el resto de esta página. */
.feature--ctb{
  --ctb-rose:#BE123C; --ctb-rose-2:#E11D48; --ctb-rose-soft:#FDA4AF; --ctb-rose-bg:#FFF1F2;
  --ctb-gold:#A16207; --ctb-blue:#477ECF; --ctb-ink:#1A1A1A; --ctb-muted:#5b6470;
  --ctb-line:#e7eaf0; --ctb-soft:#f5f7fb;
  --ctb-shadow:0 14px 40px rgba(20,30,55,.10), 0 2px 6px rgba(20,30,55,.05);
}
.feature--ctb .ctb-stage *,.feature--ctb .ctb-stage *::before,.feature--ctb .ctb-stage *::after{box-sizing:border-box}
.feature--ctb .ctb-stage i,.feature--ctb .ctb-stage em{font-style:normal}
.ctb-scrolly{margin-top:clamp(30px,4vw,48px)}
.ctb-scrolly__pin{will-change:transform}
.ctb-steps { max-width: 1040px; margin: 0 auto 18px; }
.ctb-steps__track { display: block; height: 3px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.ctb-steps__fill { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 99px;
  background: linear-gradient(90deg, #F43F5E, #FDA4AF); box-shadow: 0 0 12px rgba(244,63,94,.55); }
.ctb-steps__labels { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 9px; }
.ctb-steps__labels i { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.34); text-align: center; transition: color .3s ease; }
.ctb-steps__labels i:nth-child(1) { text-align: left; }
.ctb-steps__labels i:nth-child(5) { text-align: right; }
/* el paso vigente se enciende (data-step lo escribe el JS junto con la escena) */
.ctb-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; max-width: 1040px; margin: 0 auto; text-align: left; }

/* la hoja: una página del catálogo que muta con cada escena */
.ctb-sheet { --sheet-accent: #B02030; position: relative; border-radius: 14px; overflow: hidden; background: #fff; color: var(--ctb-ink); box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); padding: 24px 26px 0; display: flex; flex-direction: column; gap: 13px; height: 520px; }
.ctb-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%); pointer-events: none; }
.ctb-sheet__brand { display: flex; align-items: center; justify-content: center; }
.ctb-sheet__logo { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 15px; color: var(--sheet-accent); background: #F3EAE2; border-radius: 4px; padding: 7px 22px; transition: color .6s ease; }
.ctb-sheet__t { text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .22em; color: #2a2a2a; margin: 0; transition: font-family .2s step-end; }
.ctb-stage.lv4 .ctb-sheet__t { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .14em; }
.ctb-sheet__banner { text-align: center; background: var(--sheet-accent); color: #fff; border-radius: 6px; padding: 9px 12px; transition: background .6s ease; }
.ctb-sheet__banner i { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .28em; opacity: .85; }
.ctb-sheet__banner b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.ctb-sheet__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; flex: 1; }
.ctb-sheet__item { display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid var(--ctb-line); border-radius: 10px; padding: 9px; box-shadow: 0 3px 10px rgba(20,30,55,.06); }
.ctb-sheet__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; background: #fff; }
.ctb-sheet__item small { font-size: 9.5px; line-height: 1.35; font-weight: 600; color: #3c414b; letter-spacing: 0; }
.ctb-sheet__price { font-size: 12px; font-weight: 800; color: var(--sheet-accent); transition: color .6s ease; }
.ctb-sheet__stock { font-size: 8.5px; font-weight: 700; color: #0B7A43; }
.ctb-sheet__price, .ctb-sheet__stock { opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s ease; }
/* niveles acumulativos de la hoja: cada "click" del panel suma un nivel
   lv1 premium · lv2 tres columnas planas · lv3 precios y stock ·
   lv4 estilo dorado/serif · lv5 catálogo creado */
.ctb-sheet__item--xtra { display: none; }
.ctb-sheet__grid { transition: gap .35s ease; }
.ctb-sheet__item { transition: box-shadow .35s ease; }
.ctb-stage.lv1 .ctb-sheet__item:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
.ctb-stage.lv1 .ctb-sheet__item:first-child img { width: 38%; }
.ctb-stage.lv1 .ctb-sheet__item:first-child small { font-size: 11px; }
.ctb-stage.lv2 .ctb-sheet__grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
.ctb-stage.lv2 .ctb-sheet__item { box-shadow: none; }
.ctb-stage.lv2 .ctb-sheet__item--xtra { display: flex; }
.ctb-stage.lv3 .ctb-sheet__price, .ctb-stage.lv3 .ctb-sheet__stock { opacity: 1; transform: none; }
.ctb-stage.lv4 .ctb-sheet { --sheet-accent: var(--ctb-gold); }
.ctb-stage.lv4 .ctb-sheet .ctb-sheet__logo { background: #F6EED9; }
/* overlay “catálogo creado” (escena exportar) */
.ctb-sheet__done { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(255,255,255,.72); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.ctb-stage.lv5 .ctb-sheet__done { opacity: 1; }
.ctb-done__card { background: #fff; border: 1px solid var(--ctb-line); border-radius: 14px; box-shadow: var(--ctb-shadow); padding: 22px 26px; text-align: center; max-width: 86%; }
.ctb-done__check { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F0FBF5; color: #0B7A43; font-size: 18px; font-weight: 800; margin-bottom: 10px; border: 1px solid rgba(25,178,105,.4); }
.ctb-done__card b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.ctb-done__link { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--ctb-blue); background: #EFF4FC; border: 1px solid rgba(71,126,207,.35); border-radius: 999px; padding: 7px 13px; }
.ctb-done__link svg { width: 12px; height: 12px; flex: none; }
.ctb-done__meta { display: block; margin-top: 10px; font-size: 10.5px; font-weight: 600; color: var(--ctb-muted); }

/* el panel: Personalizar Catálogo */
.ctb-panel { display: flex; flex-direction: column; border-radius: 14px; background: #fff; color: var(--ctb-ink); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07); overflow: hidden; }
.ctb-panel__head { display: flex; align-items: center; gap: 9px; padding: 13px 16px 11px; border-bottom: 1px solid var(--ctb-line); font-size: 13px; font-weight: 800; color: var(--ctb-ink); }
.ctb-panel__head svg { width: 15px; height: 15px; color: var(--ctb-muted); }
.ctb-panel__tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--ctb-line); }
.ctb-panel__tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 8px; font-size: 9.5px; font-weight: 700; color: var(--ctb-muted); border-bottom: 2px solid transparent; transition: color .25s ease, border-color .25s ease; }
.ctb-panel__tab svg { width: 13px; height: 13px; }
.ctb-panel__tab.is-on { color: var(--ctb-blue); border-bottom-color: var(--ctb-blue); }
.ctb-panel__body { position: relative; flex: 1; min-height: 300px; }
/* Las escenas del panel se cruzan con un fade: nada de entradas escalonadas,
   que al scrollear rápido se re-disparaban y se leían como un rebote. */
.ctb-pp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .1s ease, visibility 0s .1s; }
/* la saliente se apaga primero y la entrante arranca después: sin cruce, las
   dos escenas nunca se leen superpuestas */
.ctb-pp.is-on { opacity: 1; visibility: visible; transition: opacity .16s ease .1s, visibility 0s .1s; }
.ctb-pp__lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a92a3; margin: 2px 0 -2px; }

/* controles del panel */
.ctb-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctb-tpl-card { border: 1px solid var(--ctb-line); border-radius: 9px; padding: 9px 8px; text-align: center; }
.ctb-tpl-card svg { width: 15px; height: 15px; color: var(--ctb-ink); margin-bottom: 4px; }
.ctb-tpl-card b { display: block; font-size: 10px; font-weight: 700; }
.ctb-tpl-card i { display: block; font-size: 8px; font-weight: 500; color: var(--ctb-muted); margin-top: 2px; line-height: 1.35; }
.ctb-seg { display: grid; grid-auto-flow: column; gap: 6px; }
.ctb-seg span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ctb-muted); border: 1px solid var(--ctb-line); border-radius: 7px; padding: 7px 4px; background: #fff; }
.ctb-togr { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; color: #3c414b; padding: 3px 0; }
.ctb-knob { width: 30px; height: 17px; border-radius: 99px; background: #d7dce5; position: relative; flex: none; transition: background .3s ease; }
.ctb-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s ease; }
.ctb-knob.is-on { background: var(--ctb-blue); }
.ctb-knob.is-on::after { transform: translateX(13px); }
.ctb-swatches { display: flex; align-items: center; gap: 8px; }
.ctb-swatches i { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); }
.ctb-select { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: #3c414b; border: 1px solid var(--ctb-line); border-radius: 8px; padding: 8px 11px; background: #fff; }
.ctb-select svg { width: 11px; height: 11px; color: var(--ctb-muted); }
.ctb-input { display: flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--ctb-ink); border: 1px solid var(--ctb-line); border-radius: 8px; padding: 8px 11px; background: #fff; }
.ctb-input .caret { display: inline-block; width: 1px; height: 12px; background: var(--ctb-ink); margin-left: 1px; }
.ctb-xbtns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.ctb-xbtns span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: #3c414b; border: 1px solid var(--ctb-line); border-radius: 8px; padding: 8px 3px; }
.ctb-xbtns svg { width: 13px; height: 13px; color: var(--ctb-muted); }
.ctb-cbtn { text-align: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--ctb-blue); border-radius: 8px; padding: 9px 10px; }

/* “clic” simulado: cada escena arranca con el valor actual (.is-cur) y el
   control elegido (.ctb-pick) se activa cuando la escena entra en fase
   "applied" (mitad del recorrido de scroll de esa escena) */
.ctb-pick, .ctb-seg span, .ctb-tpl-card, .ctb-select { transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ctb-pp.is-on .ctb-seg .is-cur, .ctb-pp.is-on .ctb-seg .is-fix { background: var(--ctb-blue); color: #fff; border-color: var(--ctb-blue); }
.ctb-pp.is-on .ctb-tpl-card.is-cur { border-color: var(--ctb-blue); box-shadow: 0 0 0 1.5px var(--ctb-blue) inset; }
.ctb-stage.is-applied .ctb-pp.is-on .is-cur { background: #fff; color: var(--ctb-muted); border-color: var(--ctb-line); box-shadow: none; }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-pick { border-color: var(--ctb-blue); box-shadow: 0 0 0 1.5px var(--ctb-blue) inset; }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-seg .ctb-pick { background: var(--ctb-blue); color: #fff; box-shadow: 0 0 0 3px rgba(71,126,207,.25); }
.ctb-knob--sc { transition: background .3s ease; }
.ctb-knob--sc::after { transition: transform .3s ease; }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-knob--sc { background: var(--ctb-blue); }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-knob--sc::after { transform: translateX(13px); }
/* textos que cambian con el “click” (selector de fuente, lista de precios) */
.ctb-swap .b { display: none; }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-swap .a { display: none; }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-swap .b { display: inline; }
/* swatches de color: el actual se apaga y el nuevo se enciende */
.ctb-swatches i { transition: opacity .3s ease, box-shadow .3s ease; }
.ctb-swatches .sw-b { opacity: .3; }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-swatches .sw-a { opacity: .3; }
.ctb-stage.is-applied .ctb-pp.is-on .ctb-swatches .sw-b { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ctb-blue); }
@media (prefers-reduced-motion: no-preference) {
  .ctb-pp.is-on .caret { animation: ctbCaret 1s step-end infinite; }
}
@keyframes ctbCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* caption por escena */
.ctb-stage__caps { position: relative; min-height: 24px; margin-top: 18px; }
.ctb-cap { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ctb-rose-soft); }
.ctb-cap.is-on { display: inline-flex; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.ctb-stage.is-applied + .ctb-stage__caps .ctb-cap.is-on { opacity: 1; transform: none; }
.ctb-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ctb-rose-soft); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ctb-cap::before { box-shadow: 0 0 0 0 rgba(253,164,175,.55); animation: ctbPulse 1.6s infinite; }
}
@media (max-width:900px){
  .ctb-stage { grid-template-columns: 1fr; max-width: 560px; gap: 12px; }
  /* menos deriva: el header móvil está más cerca y el pin no debe pisarlo */
  .ctb-sheet { height: 258px; padding: 14px 18px 0; gap: 8px; }
  .ctb-sheet__logo { font-size: 12px; padding: 5px 16px; }
  .ctb-sheet__t { font-size: 12px; letter-spacing: .16em; }
  .ctb-sheet__banner { padding: 6px 10px; }
  .ctb-sheet__banner b { font-size: 11px; }
  .ctb-sheet__grid { gap: 9px; }
  .ctb-sheet__item { padding: 7px; gap: 3px; }
  /* el panel necesita alto propio: con 4 grupos de controles se cortaba */
  .ctb-panel__body { min-height: 246px; }
  .ctb-panel__head { padding: 9px 14px 7px; font-size: 12px; }
  .ctb-pp { gap: 7px; padding: 11px 14px; }
  /* 3×2 en vez de 2×3: las seis plantillas tienen que entrar sin cortarse */
  .ctb-tpls { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ctb-tpl-card { padding: 7px 4px; }
  .ctb-tpl-card svg { width: 14px; height: 14px; margin-bottom: 3px; }
  .ctb-tpl-card b { font-size: 9px; line-height: 1.2; }
  .ctb-tpl-card i { display: none; }
  .ctb-togr { font-size: 10.5px; padding: 2px 0; }
  .ctb-seg span { font-size: 10px; padding: 6px 3px; }
  .ctb-stage__caps { margin-top: 12px; }
  .ctb-cap { font-size: 12.5px; }
  /* cinco rótulos no entran a 375px: se apilan y solo se ve el del paso vigente */
  .ctb-steps { margin-bottom: 12px; padding: 0 18px; }
  .ctb-steps__labels { display: block; position: relative; height: 13px; margin-top: 7px; }
  .ctb-steps__labels i { position: absolute; left: 0; right: 0; opacity: 0; font-size: 10px; letter-spacing: .14em; text-align: center !important; transition: opacity .25s ease, color .25s ease; }
}
@media (max-width:900px) and (max-height:740px){
  .ctb-sheet { height: 210px; }
  .ctb-panel__body { min-height: 216px; }
}
@media (max-width:640px){
  .ctb-sheet { padding: 13px 12px 0; height: 248px; }
  .ctb-sheet__item small { font-size: 8px; }
}

/* ---------- 07 · marketing kit ---------- */
.kit__out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(28px,3.5vw,44px) 0 0;padding:0;list-style:none}
.kitcard{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--ink-2)}
.anim .kitcard{opacity:0}
.kitcard p{margin-top:8px;color:var(--muted);font-size:14.5px}
.kit__foot{margin-top:26px;color:var(--dim);font-size:14.5px}
@media (max-width:1000px){.kit__out{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.kit__out{grid-template-columns:1fr}}

/* ---------- 08 · integraciones ---------- */
.marquee{position:relative;overflow:hidden;margin:0 calc(var(--gut) * -1);padding:8px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;align-items:center;gap:clamp(36px,5vw,72px);width:max-content;will-change:transform}
.marquee__track img{height:34px;width:auto;max-width:130px;object-fit:contain;opacity:.85;filter:grayscale(1) invert(1) brightness(1.6) contrast(.9)}
.erps{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-top:24px}
.erps__list{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.9;max-width:60ch}

/* ---------- el resto + cierre ---------- */

.close{
  position:relative;text-align:center;padding:clamp(100px,12vw,170px) var(--gut);
  background:var(--ink-2);border-top:1px solid var(--line-soft);overflow:hidden;
}
.close__aurora{inset:0;height:100%;opacity:.9;mask-image:linear-gradient(to top,#000 62%,transparent)}
.close__inner{position:relative}
.close__title{font-family:'Archivo',sans-serif;font-size:var(--fs-h2);font-stretch:112%;max-width:16ch;margin:0 auto}
.close__sub{margin:20px auto 0;max-width:52ch;color:var(--muted);font-size:var(--fs-lead)}
.close__cta{margin-top:36px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:36px var(--gut);border-top:1px solid var(--line-soft);color:var(--dim);font-size:13.5px;background:var(--ink);position:relative}
.foot img{width:120px;height:38px;object-fit:contain}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s !important;transition-duration:0s !important}
  .msg,.kitcard,.verdict__list li{opacity:1 !important}
  .rbstep__desc{max-height:140px;opacity:1}
  .rbsteps,.rbstage{position:static}
  .flow__step{position:static;opacity:1;pointer-events:auto;margin-bottom:44px}
  .pinstage__sticky{min-height:0}
  .storestack{aspect-ratio:auto}
  .storeview{position:static;opacity:1;transform:none;pointer-events:auto}
  .storeview img{height:auto}
  .storeview__label{position:static;border-radius:0;border:0;border-top:1px solid var(--line)}
  .marquee__track{transform:none !important}
  .rp,.ptl li{opacity:1 !important;transform:none !important}
  .xsat{animation:none}
  .spark{animation:none}
  .hero__title .line--accent{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--teal)}
  .tier:nth-child(3){border-color:var(--teal);background:rgba(77,198,190,.09)}
}