/* ============================================================
   SIVU SYSTEMS — FlowOS(tm)  |  Design tokens
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{
  --bg:#ffffff;
  --bg-soft:#F5F7FB;
  --bg-soft-2:#EDF1F8;
  --card:#ffffff;
  --ink:#0A0F1E;
  --ink-2:#414A63;
  --ink-3:#727C97;
  --line:#E3E8F1;
  --brand:#2B5CFF;
  --brand-2:#7A5CFF;
  --accent:#12E29A;
  --amber:#FFB020;
  --danger:#FF5A5A;
  --dark:#061B42;
  --dark-2:#0C2757;
  --radius:20px;
  --radius-s:12px;
  --shadow-s:0 1px 2px rgba(10,15,30,.05), 0 6px 18px rgba(10,15,30,.05);
  --shadow-m:0 24px 60px -24px rgba(14,24,60,.30);
  --shadow-l:0 40px 90px -30px rgba(14,24,60,.38);
  --maxw:1200px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:700}
p{margin:0}
::selection{background:var(--brand);color:#fff}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding:104px 0;position:relative}
.section--tight{padding:74px 0}
.center{text-align:center}

/* ---------- Dark theme scope (token swap) ---------- */
.dark{
  --bg:#061B42;--bg-soft:#0C2757;--card:rgba(255,255,255,.045);
  --ink:#FFFFFF;--ink-2:#B9C2DA;--ink-3:#8791AE;--line:rgba(255,255,255,.11);
  --shadow-s:0 1px 2px rgba(0,0,0,.4);--shadow-m:0 30px 70px -30px rgba(0,0,0,.8);
  background:#061B42;color:#fff;position:relative;overflow:hidden;
}
.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* Resplandores en azul Meta + cian para el acabado "cristal" */
  background:
    radial-gradient(760px 440px at 12% -8%, rgba(8,102,255,.40), transparent 64%),
    radial-gradient(680px 420px at 92% 4%, rgba(122,92,255,.24), transparent 60%),
    radial-gradient(620px 380px at 68% 42%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(900px 500px at 50% 118%, rgba(18,226,154,.14), transparent 62%);
}
.dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}
.dark > *{position:relative;z-index:1}

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);background:rgba(43,92,255,.09);
  border:1px solid rgba(43,92,255,.20);border-radius:999px;padding:7px 15px;
  font-family:var(--font);
}
.dark .eyebrow{color:#9FB6FF;background:rgba(43,92,255,.16);border-color:rgba(120,150,255,.30)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(43,92,255,.18)}
h1,.h1{font-size:clamp(2.3rem,5.4vw,4.05rem)}
h2,.h2{font-size:clamp(1.92rem,3.9vw,3rem)}
h3,.h3{font-size:clamp(1.22rem,2vw,1.55rem)}
.lead{font-size:clamp(1.02rem,1.35vw,1.19rem);color:var(--ink-2);max-width:64ch}
.muted{color:var(--ink-3)}
.small{font-size:14px}
.xs{font-size:12.5px}
.grad{background:linear-gradient(100deg,#2B5CFF 0%,#7A5CFF 48%,#12E29A 108%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.underline-mark{position:relative;white-space:nowrap;z-index:0}
.underline-mark::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.34em;z-index:-1;
  background:linear-gradient(90deg,rgba(18,226,154,.45),rgba(43,92,255,.22));border-radius:4px;
  transform:scaleX(1);transform-origin:left;transition:transform .9s var(--ease) .3s}
.js .underline-mark::after{transform:scaleX(0)}
.in .underline-mark::after{transform:scaleX(1)}
.section-head{max-width:768px}
.section-head.center{margin-inline:auto}
.section-head h2{margin:18px 0 16px}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:linear-gradient(100deg,#2B5CFF,#5B4BFF 55%,#7A5CFF);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
  font-weight:650;font-size:15.5px;letter-spacing:-.01em;line-height:1.15;
  background:var(--btn-bg);color:#fff;overflow:hidden;isolation:isolate;
  box-shadow:0 10px 26px -10px rgba(43,92,255,.72), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
  text-align:center;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:linear-gradient(100deg,#1F4CF0,#4C3CF5 55%,#6B45FF)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(43,92,255,.85), inset 0 1px 0 rgba(255,255,255,.3)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .3s var(--ease);flex:none}
.btn:hover .arw{transform:translateX(4px)}
.btn--lg{padding:18px 32px;font-size:16.4px}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost::after{display:none}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand);background:rgba(43,92,255,.05);box-shadow:none;transform:translateY(-2px)}
.dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.22)}
.dark .btn--ghost:hover{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.07)}
.btn--light{background:#fff;color:#0A0F1E;box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.btn--light::after{display:none}
.btn--light:hover{filter:brightness(.95)}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-note{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.btn-note svg{width:15px;height:15px;flex:none;color:var(--accent)}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-s);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),background .4s;
}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:rgba(43,92,255,.35)}
.dark .card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dark .card--hover:hover{border-color:rgba(140,165,255,.42);background:rgba(255,255,255,.075)}
.card__ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(43,92,255,.14),rgba(122,92,255,.14));
  border:1px solid rgba(43,92,255,.20);color:var(--brand);flex:none}
.card__ico svg{width:21px;height:21px}
.dark .card__ico{color:#A9BEFF;border-color:rgba(160,185,255,.24);background:linear-gradient(140deg,rgba(43,92,255,.26),rgba(122,92,255,.20))}
.card h3{margin-bottom:9px;font-size:1.13rem}
.card p{color:var(--ink-2);font-size:15.2px}

/* ---------- Reveal ----------
   Solo escondemos el contenido si el JavaScript está vivo (clase .js en <html>).
   Si el JS falla o está bloqueado, la página se ve completa igualmente. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,.74);backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -12px rgba(10,20,50,.16)}
.nav__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;
  font-size:18.5px;letter-spacing:-.03em;flex:none;line-height:1}
.brand__mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,#2B5CFF,#7A5CFF 60%,#12E29A);
  box-shadow:0 6px 16px -6px rgba(43,92,255,.75);display:grid;place-items:center}
.brand__mark svg{width:18px;height:18px;color:#fff}
.brand small{display:block;font-family:var(--font);font-size:9.4px;font-weight:700;
  letter-spacing:.19em;color:var(--ink-3);text-transform:uppercase;line-height:1;margin-top:4px}
.brand__mark img{width:22px;height:22px;object-fit:contain;display:block}
/* Logotipo horizontal — se usa en el pie de página */
.brand-h{display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px}
.brand-h img{width:100%;max-width:166px;height:auto;display:block}
.brand-h small{font-family:var(--font);font-size:9.6px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#6C7590;line-height:1}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links a{position:relative;padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:520;
  color:var(--ink-2);transition:color .22s,background .22s}
.nav__links a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#2B5CFF,#7A5CFF);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease)}
.nav__links a:hover{color:var(--ink);background:rgba(10,15,30,.04)}
.nav__links a.active{color:var(--ink);font-weight:640}
.nav__links a.active::after{transform:scaleX(1)}
.nav__cta{margin-left:10px;flex:none}
.nav__cta .btn{padding:12px 19px;font-size:14.3px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:890;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 26px 50px -24px rgba(10,20,50,.3);
  padding:12px 24px 26px;display:none;flex-direction:column;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.mobile-menu.open{display:flex;animation:mmIn .34s var(--ease)}
@keyframes mmIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mobile-menu a{padding:15px 10px;border-radius:12px;font-weight:600;font-size:16.5px;border-bottom:1px solid var(--line)}
.mobile-menu a:last-of-type{border-bottom:0}
.mobile-menu .btn{margin-top:16px}
.scroll-progress{position:fixed;top:0;left:0;height:2px;z-index:901;width:0%;
  background:linear-gradient(90deg,#2B5CFF,#7A5CFF 55%,#12E29A)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:calc(var(--nav-h) + 76px) 0 82px;overflow:hidden;background:#fff}
.hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__grid{position:absolute;inset:-10% -10% 0;opacity:.6;
  background-image:linear-gradient(rgba(10,20,60,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,20,60,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 26%,#000 18%,transparent 76%);
          mask-image:radial-gradient(ellipse 72% 62% at 50% 26%,#000 18%,transparent 76%)}
.blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;will-change:transform}
.blob--1{width:520px;height:520px;left:-150px;top:-160px;background:rgba(43,92,255,.34);animation:float1 17s ease-in-out infinite}
.blob--2{width:460px;height:460px;right:-120px;top:-70px;background:rgba(122,92,255,.30);animation:float2 21s ease-in-out infinite}
.blob--3{width:400px;height:400px;left:44%;bottom:-200px;background:rgba(18,226,154,.22);animation:float3 19s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.1)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,66px) scale(1.08)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-40px) scale(1.12)}}
/* Rejilla por áreas: en escritorio el texto va a la izquierda y la gráfica a la
   derecha; en móvil la gráfica se cuela entre el titular y el párrafo. */
.hero__in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;
  grid-template-areas:"head media" "body media";
  column-gap:54px;row-gap:0;align-items:center}
.hero__head{grid-area:head}
.hero__body{grid-area:body}
.hero__media{grid-area:media}
.hero h1{margin:22px 0 20px}
.hero__cta{margin-top:32px}
.hero__proof{display:flex;flex-wrap:wrap;gap:28px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.pstat b{display:block;font-family:var(--display);font-size:1.8rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.pstat span{font-size:12.5px;color:var(--ink-3);font-weight:560}

/* Hero console */
/* Tarjeta de la gráfica FlowOS en el hero.
   Mismo lenguaje visual que el mapa de la sección El Sistema: panel azul
   profundo, retícula tenue y resplandores de color. */
.flowmini{
  position:relative;border-radius:26px;color:#fff;overflow:hidden;
  background:
    radial-gradient(540px 320px at 80% -8%, rgba(8,102,255,.36), transparent 62%),
    radial-gradient(420px 300px at 6% 106%, rgba(18,226,154,.16), transparent 64%),
    radial-gradient(380px 260px at 100% 62%, rgba(122,92,255,.20), transparent 66%),
    linear-gradient(168deg, #0C2757 0%, #071F49 46%, #041434 100%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 46px 88px -32px rgba(6,27,66,.65),
             inset 0 1px 0 rgba(255,255,255,.15);
  transform:perspective(1700px) rotateY(-4deg) rotateX(1.5deg);
  transition:transform .8s var(--ease)}
.flowmini:hover{transform:perspective(1700px) rotateY(0deg) rotateX(0deg)}
/* Retícula tenue detrás del contenido */
.flowmini::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(circle at 52% 42%,#000,transparent 84%);
          mask-image:radial-gradient(circle at 52% 42%,#000,transparent 84%)}
.flowmini > *{position:relative;z-index:1}
.flowmini .console__bar{background:rgba(255,255,255,.05);border-bottom-color:rgba(255,255,255,.11)}
.flowmini__body{padding:16px 16px 14px}
/* Trazo y nodos luminosos, como en el mapa grande */
.jsvg-mini .jpath-fg{filter:drop-shadow(0 0 7px rgba(96,140,255,.55))}
.jsvg-mini .jnode > circle:not(.halo){filter:drop-shadow(0 0 11px rgba(96,126,255,.6))}
.jsvg-mini .jnode:last-of-type > circle:not(.halo){filter:drop-shadow(0 0 13px rgba(18,226,154,.7))}
/* Un halo detrás de la tarjeta para que el vidrio tenga algo que refractar */
.hero__media{position:relative}
.hero__media::before{
  content:"";position:absolute;z-index:-1;inset:6% -6% 10% -4%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(8,102,255,.30), rgba(122,92,255,.16) 60%, transparent);
  filter:blur(46px);pointer-events:none}
.jsvg-mini{width:100%;max-width:430px;margin-inline:auto;height:auto;display:block}
.jnum{font-family:'Sora',sans-serif;font-weight:800;font-size:11.5px;fill:#fff;letter-spacing:.02em}
/* Variante compacta del recorrido en el hero: mitad de alto.
   Los tamaños van algo más grandes que el original porque el SVG se dibuja
   reducido en móvil (~0.8x) y si no, el subtítulo caería por debajo de 9px. */
.jlabel--mini{font-size:16px}
.jsub--mini{font-size:12.5px}
.jpath-fg--mini{stroke-dasharray:300;stroke-width:3}
.js .jpath-fg--mini{stroke-dashoffset:300}
.in .jpath-fg--mini{stroke-dashoffset:0}
.jpath-energy--mini{stroke-dasharray:6 110;stroke-width:1.7;animation:energyMini 4.4s linear infinite}
@keyframes energyMini{to{stroke-dashoffset:-232}}
.halo--mini{animation:haloMini 3s ease-out infinite}
@keyframes haloMini{0%{r:17;opacity:.6}70%{r:31;opacity:0}100%{r:31;opacity:0}}

/* Panel de operación dentro de la sección El Sistema */
.ops{max-width:720px;margin:44px auto 0}
.ops__cap{text-align:center;font-size:12.4px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-bottom:18px}
.console--flat{transform:none}
.console--flat:hover{transform:translateY(-4px)}

.console{
  border-radius:24px;background:#041434;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 50px 90px -36px rgba(10,20,60,.55);
  transform:perspective(1600px) rotateY(-7deg) rotateX(3deg);transition:transform .8s var(--ease)}
.console:hover{transform:perspective(1600px) rotateY(-2deg) rotateX(1deg)}
.console__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.console__bar i{width:9px;height:9px;border-radius:50%;display:block}
.console__bar i:nth-child(1){background:#FF5F57}.console__bar i:nth-child(2){background:#FEBC2E}.console__bar i:nth-child(3){background:#28C840}
.console__title{margin-left:10px;font-size:11.2px;letter-spacing:.13em;text-transform:uppercase;color:#7E8AAB;font-weight:700}
.console__live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10.6px;color:#12E29A;font-weight:800;letter-spacing:.09em}
.console__live .pulse{width:7px;height:7px;border-radius:50%;background:#12E29A;animation:blink 1.7s infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(18,226,154,.6)}50%{opacity:.4;box-shadow:0 0 0 7px rgba(18,226,154,0)}}
.console__body{padding:20px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kpi{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:13px 12px 12px}
.kpi small{display:block;font-size:9.8px;letter-spacing:.10em;text-transform:uppercase;color:#7E8AAB;font-weight:700;margin-bottom:5px}
.kpi b{font-family:var(--display);font-size:1.28rem;font-weight:750;letter-spacing:-.02em;display:block;line-height:1.15}
.kpi u{text-decoration:none;font-size:10.4px;color:#12E29A;font-weight:700}
.feed{display:grid;gap:8px}
.feed__row{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  opacity:0;transform:translateY(9px);animation:rowIn .6s var(--ease) forwards}
.feed__row:nth-child(1){animation-delay:.3s}.feed__row:nth-child(2){animation-delay:.55s}
.feed__row:nth-child(3){animation-delay:.8s}.feed__row:nth-child(4){animation-delay:1.05s}
@keyframes rowIn{to{opacity:1;transform:none}}
.feed__av{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;
  background:linear-gradient(140deg,#2B5CFF,#7A5CFF);flex:none;font-family:var(--display)}
.feed__t{flex:1;min-width:0}
.feed__t b{display:block;font-size:13px;font-weight:640}
.feed__t span{font-size:11.2px;color:#7E8AAB}
.tag{font-size:9.6px;font-weight:800;letter-spacing:.07em;padding:5px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.tag--new{background:rgba(43,92,255,.19);color:#A6BCFF}
.tag--wa{background:rgba(18,226,154,.16);color:#4BF0BB}
.tag--cita{background:rgba(255,176,32,.16);color:#FFCB6B}
.tag--win{background:rgba(18,226,154,.22);color:#12E29A}
.console__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:15px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);font-size:11.4px;color:#7E8AAB}
.console__foot b{color:#fff;font-weight:650}

/* ---------- Marquee ---------- */
.marquee{padding:34px 0;border-block:1px solid var(--line);background:var(--bg-soft);overflow:hidden}
.marquee__label{text-align:center;font-size:11.4px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:20px}
.marquee__track{display:flex;gap:50px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
  font-size:16px;color:#8b95ad;letter-spacing:-.02em;white-space:nowrap;opacity:.8;transition:opacity .3s,color .3s}
.mq-item:hover{opacity:1;color:var(--ink)}
.mq-item svg{width:20px;height:20px;flex:none}

/* ============================================================
   PROBLEMA / FUGA
   ============================================================ */
.leak-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.leak{padding:28px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden}
.leak::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--danger),transparent)}
.leak__n{font-family:var(--display);font-size:2.7rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  color:#FF7B7B;margin-bottom:12px;display:block}
.leak h3{font-size:1.05rem;margin-bottom:8px}
.leak p{font-size:14.6px;color:var(--ink-2)}
.leak__src{font-size:11.4px;color:var(--ink-3);margin-top:14px;display:block}

/* ============================================================
   FLOWOS — JOURNEY MAP
   ============================================================ */
.journey{margin-top:56px;border-radius:26px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  padding:30px 20px 22px;overflow:hidden}
.journey__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.journey__scroll::-webkit-scrollbar{height:6px}
.journey__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
/* Versión horizontal (escritorio) y vertical (móvil) del mismo recorrido */
.jsvg-h{min-width:900px;width:100%;height:auto;display:block}
.jsvg-v{width:100%;max-width:370px;margin-inline:auto;height:auto;display:block}
.journey__v{display:none}
@media (max-width:900px){
  .journey__h{display:none}
  .journey__v{display:block}
  .journey{padding:26px 14px 20px}
}
.jpath-bg{fill:none;stroke:rgba(255,255,255,.13);stroke-width:2.5;stroke-linecap:round}
.jpath-fg{fill:none;stroke:url(#jgrad);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:2400;stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--ease)}
.js .jpath-fg{stroke-dashoffset:2400}
.in .jpath-fg{stroke-dashoffset:0}
.jpath-energy{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:10 320;animation:energy 4.4s linear infinite;opacity:.65}
@keyframes energy{to{stroke-dashoffset:-660}}
/* El trazo vertical es más corto: su propia longitud de animación */
.jpath-fg--v{stroke-dasharray:900}
.js .jpath-fg--v{stroke-dashoffset:900}
.in .jpath-fg--v{stroke-dashoffset:0}
.jpath-energy--v{stroke-dasharray:8 190;animation:energyV 4.4s linear infinite}
@keyframes energyV{to{stroke-dashoffset:-396}}
.jnode circle.halo{fill:rgba(43,92,255,.16);animation:halo 3s ease-out infinite}
.jnode:nth-child(2) circle.halo{animation-delay:.5s}
.jnode:nth-child(3) circle.halo{animation-delay:1s}
.jnode:nth-child(4) circle.halo{animation-delay:1.5s}
@keyframes halo{0%{r:20;opacity:.65}70%{r:40;opacity:0}100%{r:40;opacity:0}}
.jlabel{font-family:'Sora',sans-serif;font-weight:750;font-size:15px;fill:#fff;letter-spacing:-.02em}
.jphase{font-family:'Inter',sans-serif;font-weight:800;font-size:10.5px;fill:#8CA6FF;letter-spacing:.18em}
.jsub{font-family:'Inter',sans-serif;font-weight:500;font-size:11.5px;fill:#8791AE}
.jchip{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.14)}
.jdot{/* El halo va como stroke en el propio circulo: un filter CSS sobre un
   grupo con animateMotion deja un resplandor fantasma en el origen. */}
.journey__legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:18px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.09);font-size:12.4px;color:var(--ink-3)}
.journey__legend b{color:#fff;font-weight:640}
.jl{display:flex;align-items:center;gap:8px}
.jl i{width:9px;height:9px;border-radius:50%;display:block}

/* ---------- Phase cards ---------- */
.phase-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.pc{padding:26px 24px;border-radius:18px;border:1px solid var(--line);background:var(--card);
  position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s,background .4s}
.pc:hover{transform:translateY(-6px);border-color:rgba(140,165,255,.45);background:rgba(255,255,255,.08)}
.pc__n{font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.2em;color:#8CA6FF;display:block;margin-bottom:14px}
.pc h3{font-size:1.28rem;margin-bottom:8px;font-weight:750}
.pc p{font-size:14.3px;color:var(--ink-2)}
.pc__bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#2B5CFF,#7A5CFF)}
.pc:nth-child(2) .pc__bar{background:linear-gradient(180deg,#7A5CFF,#B45CFF)}
.pc:nth-child(3) .pc__bar{background:linear-gradient(180deg,#12E29A,#2BD1FF)}
.pc:nth-child(4) .pc__bar{background:linear-gradient(180deg,#FFB020,#12E29A)}

/* ============================================================
   FASE LAYOUT
   ============================================================ */
.fase{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.fase--rev .fase__media{order:-1}
.fase__tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;
  font-size:11.5px;letter-spacing:.2em;color:var(--brand);margin-bottom:16px}
.dark .fase__tag{color:#9FB6FF}
.fase__tag em{font-style:normal;width:26px;height:1.5px;background:currentColor;display:block;opacity:.5}
.fase h2{margin-bottom:16px}
.fase .lead{margin-bottom:26px}
.bullets{display:grid;gap:13px;margin:0 0 30px;padding:0;list-style:none}
.bullets li{display:flex;gap:12px;align-items:flex-start;font-size:15.4px;color:var(--ink-2)}
.bullets li b{color:var(--ink);font-weight:640}
.bullets .ck{width:21px;height:21px;border-radius:7px;flex:none;margin-top:2px;display:grid;place-items:center;
  background:rgba(18,226,154,.14);color:#0FB77E;border:1px solid rgba(18,226,154,.28)}
.dark .bullets .ck{color:#12E29A;background:rgba(18,226,154,.16)}
.bullets .ck svg{width:12px;height:12px}

/* ============================================================
   CALCULADORAS
   ============================================================ */
.calc{border-radius:24px;border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow-m);overflow:hidden}
.calc__head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
  background:linear-gradient(100deg,rgba(43,92,255,.055),rgba(122,92,255,.045))}
.dark .calc__head{background:linear-gradient(100deg,rgba(43,92,255,.16),rgba(122,92,255,.10))}
.calc__head .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#2B5CFF,#7A5CFF);color:#fff}
.calc__head .ic svg{width:18px;height:18px}
.calc__head b{display:block;font-family:var(--display);font-weight:750;font-size:15.6px;letter-spacing:-.02em;line-height:1.3}
.calc__head span{font-size:12.2px;color:var(--ink-3)}
.calc__body{padding:26px}
.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
.field label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13.4px;font-weight:640;color:var(--ink-2);margin-bottom:9px}
.field label em{font-style:normal;font-size:11.6px;color:var(--ink-3);font-weight:500}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .pre{position:absolute;left:15px;font-weight:700;color:var(--ink-3);font-size:15px;pointer-events:none}
.input-wrap .suf{position:absolute;right:15px;font-weight:600;color:var(--ink-3);font-size:12.6px;pointer-events:none}
.inp{
  width:100%;padding:14px 16px;border-radius:13px;border:1.5px solid var(--line);background:var(--bg);
  font-size:16.5px;font-weight:640;font-family:var(--display);letter-spacing:-.02em;
  transition:border-color .25s,box-shadow .25s,background .25s;outline:none;-moz-appearance:textfield}
.inp::-webkit-outer-spin-button,.inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(43,92,255,.14)}
.inp.has-pre{padding-left:34px}
.inp.has-suf{padding-right:74px}
.dark .inp{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);color:#fff}
.dark .inp:focus{border-color:#7A9BFF;box-shadow:0 0 0 4px rgba(43,92,255,.22)}
.inp::placeholder{color:var(--ink-3);font-weight:500;font-family:var(--font)}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;margin-top:16px;
  background:linear-gradient(90deg,#2B5CFF 0%,#7A5CFF var(--pct,30%),rgba(120,130,160,.22) var(--pct,30%));
  outline:none;cursor:pointer}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid #2B5CFF;box-shadow:0 3px 10px rgba(43,92,255,.5);cursor:grab}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #2B5CFF;
  box-shadow:0 3px 10px rgba(43,92,255,.5);cursor:grab}
.rng-marks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:8px;font-weight:560}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.preset{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;
  font-size:12.8px;font-weight:640;cursor:pointer;color:var(--ink-2);transition:all .22s}
.preset:hover{border-color:var(--brand);color:var(--brand);background:rgba(43,92,255,.06)}
.preset.on{background:var(--brand);border-color:var(--brand);color:#fff}

.calc__out{padding:24px 26px;border-top:1px dashed var(--line);background:var(--bg-soft)}
.dark .calc__out{background:rgba(0,0,0,.26)}
.out-hero{text-align:center;padding:6px 0 4px}
.out-hero small{display:block;font-size:11.6px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:8px}
.out-hero .big{font-family:var(--display);font-size:clamp(2.9rem,7vw,4.4rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;
  background:linear-gradient(100deg,#2B5CFF,#7A5CFF 55%,#12E29A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.out-hero .unit{display:block;font-family:var(--font);font-size:14px;font-weight:640;color:var(--ink-2);margin-top:8px}
.out-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.om{text-align:center;padding:13px 8px;border-radius:13px;background:var(--card);border:1px solid var(--line)}
.om b{display:block;font-family:var(--display);font-size:1.16rem;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.om span{font-size:10.8px;color:var(--ink-3);font-weight:600;letter-spacing:.03em}
.calc__note{font-size:11.8px;color:var(--ink-3);margin-top:18px;text-align:center;line-height:1.55}

/* Comparativo (calc 2) */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:4px}
.vs__col{padding:20px 16px;border-radius:16px;text-align:center;border:1px solid var(--line);background:var(--card)}
.vs__col small{display:block;font-size:10.6px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;margin-bottom:10px}
.vs__col--now small{color:var(--ink-3)}
.vs__col--now b{color:var(--ink-3)}
.vs__col--flow{border-color:rgba(18,226,154,.42);background:linear-gradient(160deg,rgba(18,226,154,.10),rgba(43,92,255,.06))}
.vs__col--flow small{color:#0FB77E}
.dark .vs__col--flow small{color:#12E29A}
.vs__col b{font-family:var(--display);font-size:clamp(2rem,5vw,2.9rem);font-weight:800;letter-spacing:-.04em;
  display:block;line-height:1}
.vs__col--flow b{background:linear-gradient(100deg,#12E29A,#2B5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs__col span{display:block;font-size:11.8px;color:var(--ink-3);margin-top:7px;font-weight:560}
.vs__arrow{display:grid;place-items:center;padding:0 4px}
.vs__badge{background:linear-gradient(135deg,#12E29A,#2B5CFF);color:#fff;border-radius:999px;
  padding:9px 14px;font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:-.02em;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(18,226,154,.8);animation:pop 2.6s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Simulador final */
.sim{display:grid;grid-template-columns:.92fr 1.08fr;gap:0;border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 90px -34px rgba(0,0,0,.85)}
.sim__form{padding:34px;border-right:1px solid rgba(255,255,255,.10)}
.sim__res{padding:34px;background:linear-gradient(160deg,rgba(43,92,255,.14),rgba(18,226,154,.07))}
.sim__title{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:750;font-size:16px;margin-bottom:6px}
.sim__hint{font-size:12.4px;color:var(--ink-3);margin-bottom:24px;line-height:1.55}
.autofill{display:inline-flex;align-items:center;gap:6px;font-size:10.4px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#12E29A;background:rgba(18,226,154,.14);border:1px solid rgba(18,226,154,.3);
  border-radius:999px;padding:3px 9px;margin-left:auto;opacity:0;transition:opacity .4s}
.autofill.on{opacity:1}
.res-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:14px 0;
  border-bottom:1px dashed rgba(255,255,255,.13)}
.res-row span{font-size:13.6px;color:var(--ink-2)}
.res-row b{font-family:var(--display);font-size:1.24rem;font-weight:750;letter-spacing:-.03em;white-space:nowrap}
.res-row.is-now b{color:var(--ink-3)}
.res-row.is-up b{color:#12E29A}
.res-hero{margin-top:22px;padding:24px;border-radius:18px;text-align:center;
  background:linear-gradient(150deg,rgba(18,226,154,.16),rgba(43,92,255,.14));
  border:1px solid rgba(18,226,154,.3)}
.res-hero small{display:block;font-size:11.2px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:#9FF3D2;margin-bottom:8px}
.res-hero .big{font-family:var(--display);font-size:clamp(2.2rem,5.2vw,3.2rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:#fff}
.res-hero .sub{font-size:12.6px;color:var(--ink-2);margin-top:10px}
.res-empty{text-align:center;padding:40px 20px;color:var(--ink-3);font-size:14px;line-height:1.7}
.res-empty svg{width:44px;height:44px;margin:0 auto 16px;opacity:.4}
.res-anual{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-size:12.6px;color:var(--ink-2);flex-wrap:wrap;text-align:center}
.res-anual b{font-family:var(--display);color:#fff;font-weight:750;font-size:15px}

/* ============================================================
   PULSE — chat mock
   ============================================================ */
.phone{width:100%;max-width:340px;margin-inline:auto;border-radius:38px;background:#05183E;
  border:9px solid #123058;box-shadow:0 44px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
  overflow:hidden;position:relative}
.phone__notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:106px;height:20px;
  background:#123058;border-radius:0 0 14px 14px;z-index:3}
.phone__hdr{display:flex;align-items:center;gap:10px;padding:26px 14px 12px;background:#0A2450;
  border-bottom:1px solid rgba(255,255,255,.07)}
.phone__av{width:33px;height:33px;border-radius:50%;background:linear-gradient(140deg,#12E29A,#0EA271);
  display:grid;place-items:center;flex:none}
.phone__av svg{width:18px;height:18px;color:#fff}
.phone__hdr b{font-size:13.4px;display:block;font-weight:650;color:#fff}
.phone__hdr span{font-size:10.6px;color:#12E29A;font-weight:640}
.chat{padding:16px 13px 18px;min-height:392px;display:flex;flex-direction:column;gap:9px;
  background:
    radial-gradient(400px 200px at 80% 0%,rgba(18,226,154,.07),transparent 70%),
    #05183E}
.msg{max-width:82%;padding:10px 13px;border-radius:15px;font-size:13.1px;line-height:1.5;
  opacity:0;transform:translateY(12px) scale(.96);animation:msgIn .5s var(--ease) forwards;color:#fff}
.msg--in{align-self:flex-start;background:#143059;border-bottom-left-radius:5px}
.msg--out{align-self:flex-end;background:linear-gradient(140deg,#0E9E6E,#11C989);border-bottom-right-radius:5px}
.msg small{display:block;font-size:9.4px;opacity:.6;margin-top:5px;text-align:right}
.msg b{font-weight:700}
@keyframes msgIn{to{opacity:1;transform:none}}
.typing{align-self:flex-end;display:flex;gap:4px;padding:11px 14px;background:#143059;border-radius:15px;
  opacity:0;animation:typIn .4s forwards}
@keyframes typIn{to{opacity:1}}
.typing i{width:6px;height:6px;border-radius:50%;background:#7E8AAB;animation:bounce 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.js .chat .msg,.js .chat .typing{animation-play-state:paused}
.chat.play .msg,.chat.play .typing{animation-play-state:running}
.timer-badge{
  position:absolute;top:74px;right:-6px;z-index:4;background:#fff;color:#0A0F1E;border-radius:13px;
  padding:9px 13px;box-shadow:0 16px 34px -12px rgba(0,0,0,.7);text-align:center;
  animation:tbIn .6s var(--ease) .6s both}
@keyframes tbIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.timer-badge b{display:block;font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:#0FB77E}
.timer-badge span{font-size:9.2px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:#727C97}

/* Curva de decaimiento */
.decay{margin-top:30px;padding:24px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.decay h4{font-family:var(--display);font-size:13.4px;font-weight:700;margin-bottom:4px}
.decay p{font-size:12.2px;color:var(--ink-3);margin-bottom:18px}
.decay__bars{display:flex;align-items:flex-end;gap:10px;height:132px}
.db{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.db__bar{width:100%;border-radius:8px 8px 4px 4px;height:var(--h);transition:height 1.2s var(--ease);
  background:linear-gradient(180deg,#2B5CFF,#7A5CFF)}
.js .db__bar{height:0}
.db:nth-child(1) .db__bar{background:linear-gradient(180deg,#12E29A,#0FB77E)}
.db:nth-child(n+3) .db__bar{background:linear-gradient(180deg,#FF7B7B,#FF5A5A);opacity:.85}
.in .db__bar{height:var(--h)}
.db small{font-size:10.4px;color:var(--ink-3);font-weight:640;text-align:center;line-height:1.3}
.db em{font-style:normal;font-size:11.4px;font-weight:800;font-family:var(--display)}

/* ============================================================
   MOMENTUM — pipeline board
   ============================================================ */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.col{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:13px 11px;min-height:250px}
.dark .col{background:rgba(255,255,255,.035)}
.col__h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px;padding:0 3px}
.col__h b{font-size:11.4px;font-weight:750;letter-spacing:.02em}
.col__h i{width:7px;height:7px;border-radius:50%;display:block}
.col__h u{text-decoration:none;font-size:10.4px;color:var(--ink-3);font-weight:700;
  background:var(--card);border:1px solid var(--line);border-radius:99px;padding:2px 7px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 11px;margin-bottom:8px;
  box-shadow:0 2px 6px rgba(10,20,50,.05)}
.pcard b{display:block;font-size:12.2px;font-weight:650;margin-bottom:3px}
.pcard span{font-size:10.6px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.pcard span i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
.pcard--ghost{opacity:.42;border-style:dashed;box-shadow:none;background:transparent}
.pcard--fly{position:relative;z-index:2;animation:fly 11s var(--ease) infinite;
  border-color:rgba(43,92,255,.5);box-shadow:0 12px 26px -10px rgba(43,92,255,.5)}
@keyframes fly{
  0%,14%{transform:translate(0,0) scale(1);opacity:1}
  20%{transform:translate(calc(100% + 12px),14px) scale(1.03)}
  24%,38%{transform:translate(calc(100% + 12px),14px) scale(1)}
  44%{transform:translate(calc(200% + 24px),28px) scale(1.03)}
  48%,62%{transform:translate(calc(200% + 24px),28px) scale(1)}
  68%{transform:translate(calc(300% + 36px),42px) scale(1.06)}
  72%,92%{transform:translate(calc(300% + 36px),42px) scale(1)}
  96%,100%{transform:translate(0,0) scale(1);opacity:1}}
.board__foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chipx{font-size:11.6px;font-weight:640;padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.chipx svg{width:13px;height:13px;color:var(--accent);flex:none}

/* ============================================================
   OFERTA
   ============================================================ */
.offer{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;margin-top:52px;align-items:start}
.offer__list{display:grid;gap:14px}
.oi{display:flex;gap:16px;padding:20px 22px;border-radius:16px;border:1px solid var(--line);
  background:var(--card);transition:border-color .35s,transform .35s var(--ease),background .35s}
.oi:hover{border-color:rgba(140,165,255,.45);transform:translateX(5px);background:rgba(255,255,255,.075)}
.oi__n{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.06em;color:#8CA6FF;flex:none;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(43,92,255,.16);border:1px solid rgba(120,150,255,.28)}
.oi b{display:block;font-family:var(--display);font-size:15.4px;font-weight:700;margin-bottom:5px;letter-spacing:-.02em}
.oi p{font-size:14px;color:var(--ink-2)}
.offer__side{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:16px}
.guarantee{padding:28px;border-radius:20px;border:1px solid rgba(18,226,154,.35);
  background:linear-gradient(160deg,rgba(18,226,154,.12),rgba(43,92,255,.06))}
.guarantee .seal{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(140deg,#12E29A,#0FB77E);color:#04140E}
.guarantee .seal svg{width:26px;height:26px}
.guarantee h3{font-size:1.16rem;margin-bottom:9px}
.guarantee p{font-size:14.2px;color:var(--ink-2)}
.fitbox{padding:26px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.fitbox h4{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:14px;color:var(--ink-3)}
.fitbox ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fitbox li{display:flex;gap:10px;font-size:13.8px;color:var(--ink-2);align-items:flex-start}
.fitbox li svg{width:17px;height:17px;flex:none;margin-top:3px}
.fit-yes svg{color:#12E29A}.fit-no svg{color:#FF7B7B}
.fitbox + .fitbox{margin-top:0}

/* ============================================================
   TIMELINE IMPLEMENTACION
   ============================================================ */
.tl{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tl::before{content:"";position:absolute;left:26px;right:26px;top:22px;height:2px;
  background:linear-gradient(90deg,#2B5CFF,#7A5CFF 40%,#12E29A);opacity:.28}
.tli{position:relative;padding-top:0}
.tli__dot{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--bg);border:2px solid var(--line);position:relative;z-index:1;
  font-family:var(--display);font-weight:800;font-size:13px;color:var(--brand);
  box-shadow:0 0 0 6px var(--bg)}
.tli:hover .tli__dot{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 0 0 6px var(--bg),0 10px 24px -8px rgba(43,92,255,.6)}
.tli__dot{transition:all .35s var(--ease)}
.tli small{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--ink-3);margin-bottom:7px}
.tli b{display:block;font-family:var(--display);font-size:16px;font-weight:700;margin-bottom:7px;letter-spacing:-.02em}
.tli p{font-size:14px;color:var(--ink-2)}

/* ============================================================
   RESULTADOS / STATS
   ============================================================ */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);margin-top:16px}
.sb{padding:32px 24px;text-align:center;border-right:1px solid var(--line)}
.sb:last-child{border-right:0}
.sb b{display:block;font-family:var(--display);font-size:clamp(2rem,4vw,2.7rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;
  background:linear-gradient(100deg,#2B5CFF,#7A5CFF 60%,#12E29A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sb span{display:block;font-size:12.8px;color:var(--ink-3);margin-top:9px;font-weight:560;line-height:1.45}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.quote{padding:28px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card)}
.quote .stars{display:flex;gap:3px;margin-bottom:16px;color:#FFB020}
.quote .stars svg{width:15px;height:15px}
.quote p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:20px}
.quote__who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.quote__av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(140deg,#2B5CFF,#7A5CFF)}
.quote__who b{display:block;font-size:13.6px;font-weight:650}
.quote__who span{font-size:11.8px;color:var(--ink-3)}

/* ---------- Casos reales (capturas del administrador de anuncios) ---------- */
.cases{display:grid;gap:24px}
.cases > *{min-width:0}
.confid{display:flex;gap:18px;padding:26px 28px;border-radius:20px;
  border:1px solid rgba(255,176,32,.34);background:rgba(255,176,32,.07);margin-top:8px}
.confid__ico{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#FFB020,#F08A00);color:#3A2400}
.confid__ico svg{width:22px;height:22px}
.confid b{display:block;font-family:var(--display);font-size:15.4px;font-weight:700;
  letter-spacing:-.02em;margin-bottom:8px}
.confid p{font-size:14.4px;color:var(--ink-2);line-height:1.65}
.confid p + p{margin-top:11px}

.case{border:1px solid var(--line);border-radius:22px;background:var(--card);
  padding:26px 26px 22px;box-shadow:var(--shadow-s);
  transition:box-shadow .4s var(--ease),border-color .4s}
.case:hover{box-shadow:var(--shadow-m);border-color:rgba(43,92,255,.28)}
.case__head{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:22px}
.case__badge{font-family:var(--display);font-size:11.4px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;padding:8px 15px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(100deg,#2B5CFF,#7A5CFF);
  box-shadow:0 8px 20px -9px rgba(43,92,255,.8)}
.case__badge--alt{background:linear-gradient(100deg,#12E29A,#0FB77E);
  box-shadow:0 8px 20px -9px rgba(18,226,154,.8);color:#04140E}
.case__badge--crm{background:linear-gradient(100deg,#0A0F1E,#39415A);
  box-shadow:0 8px 20px -9px rgba(10,15,30,.7)}
/* Nota destacada dentro de una tarjeta de caso (disponible si se necesita) */
.case__warn{display:flex;gap:12px;padding:15px 17px;border-radius:13px;margin-bottom:18px;
  border:1px solid rgba(255,176,32,.32);background:rgba(255,176,32,.06)}
.case__warn svg{width:19px;height:19px;flex:none;margin-top:2px;color:#C77A00}
.case__warn p{font-size:13.4px;color:var(--ink-2);line-height:1.62;margin:0}
.case__id b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.3}
.case__id span{font-size:12.4px;color:var(--ink-3)}
.case__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.case__stats > div{padding:16px 14px;border-radius:14px;background:var(--bg-soft);
  border:1px solid var(--line);text-align:center}
.case__stats b{display:block;font-family:var(--display);font-size:clamp(1.15rem,2.3vw,1.5rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.15;
  background:linear-gradient(100deg,#2B5CFF,#7A5CFF 70%,#12E29A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.case__stats span{display:block;font-size:11.2px;color:var(--ink-3);font-weight:560;
  margin-top:6px;line-height:1.35}
.case__note{font-size:14.2px;color:var(--ink-2);margin-bottom:18px;line-height:1.65}
.case__note b{color:var(--ink);font-weight:640}
/* La captura escala al ancho de la tarjeta: sirve como evidencia visual.
   Las cifras legibles están en los recuadros de arriba y el enlace
   "Ver en tamaño real" permite auditarla al 100%. */
.case__shot{margin:0}
.case__shot .shotbox{max-width:100%;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-soft);position:relative}
.case__shot img{width:100%;height:auto;display:block}
.case__shot figcaption{font-size:11.8px;color:var(--ink-3);margin-top:11px;text-align:center}
.case__shot figcaption a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .case__stats{grid-template-columns:1fr 1fr}
  .confid{flex-direction:column;gap:14px;padding:22px}
}
@media (max-width:520px){
  .case{padding:20px 18px 18px}
  .case__stats{grid-template-columns:1fr 1fr;gap:9px}
}

.ph-note{margin-top:26px;padding:15px 18px;border-radius:13px;border:1px dashed var(--line);
  background:var(--bg-soft);font-size:12.6px;color:var(--ink-3);text-align:center}

/* ============================================================
   PRICING
   ============================================================ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:32px 28px;border-radius:22px;border:1px solid var(--line);
  background:var(--card);position:relative;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.plan--pro{border-color:rgba(43,92,255,.5);box-shadow:0 30px 70px -34px rgba(43,92,255,.55);
  background:linear-gradient(175deg,rgba(43,92,255,.05),var(--card) 42%)}
.plan__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(100deg,#2B5CFF,#7A5CFF);color:#fff;font-size:10.6px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(43,92,255,.9)}
.plan__name{font-family:var(--display);font-size:1.32rem;font-weight:750;letter-spacing:-.03em;margin-bottom:6px}
.plan__for{font-size:13.2px;color:var(--ink-3);margin-bottom:22px;min-height:38px}
.plan__price{padding:18px 0 20px;border-block:1px solid var(--line);margin-bottom:22px}
.plan__price b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:750;letter-spacing:-.03em;line-height:1.2}
.plan__price span{font-size:12.4px;color:var(--ink-3);display:block;margin-top:5px}
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;flex:1}
.plan li{display:flex;gap:10px;font-size:14.2px;color:var(--ink-2);align-items:flex-start}
.plan li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--accent)}
.plan li b{color:var(--ink);font-weight:640}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin:52px auto 0;display:grid;gap:12px}
.qa{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.qa[open]{border-color:rgba(43,92,255,.35);box-shadow:var(--shadow-s)}
.qa summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;gap:16px;
  font-family:var(--display);font-weight:650;font-size:16px;letter-spacing:-.02em;transition:color .25s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brand)}
.qa summary .ico{margin-left:auto;width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--bg-soft);border:1px solid var(--line);transition:transform .35s var(--ease),background .3s}
.qa summary .ico svg{width:13px;height:13px}
.qa[open] summary .ico{transform:rotate(45deg);background:var(--brand);border-color:var(--brand);color:#fff}
.qa__body{padding:0 24px 22px 66px;font-size:15px;color:var(--ink-2);line-height:1.68;animation:qaIn .4s var(--ease)}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   CTA FINAL + FOOTER
   ============================================================ */
.cta-final{text-align:center;max-width:760px;margin-inline:auto}
.cta-final h2{margin:20px 0 18px}
.cta-final .btn-row{justify-content:center;margin-top:34px}
.trust-row{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:34px;
  font-size:12.6px;color:var(--ink-3)}
.trust-row div{display:flex;align-items:center;gap:8px}
.trust-row svg{width:15px;height:15px;color:var(--accent)}
.footer{background:#03102A;color:#fff;padding:60px 0 32px;border-top:1px solid rgba(255,255,255,.08)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.footer__brand p{font-size:14px;color:#8791AE;margin-top:16px;max-width:34ch}
.footer h5{font-family:var(--display);font-size:11.6px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:#8791AE;margin:0 0 16px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer a{font-size:14px;color:#B9C2DA;transition:color .22s}
.footer a:hover{color:#fff}
.footer__bot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding-top:26px;font-size:12.4px;color:#6C7590}
.socials{display:flex;gap:9px}
.socials a{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);color:#B9C2DA;transition:all .25s}
.socials a:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateY(-2px)}
.socials svg{width:16px;height:16px}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:880;display:none;
  transform:translateY(140%);transition:transform .45s var(--ease)}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%;padding:16px;box-shadow:0 18px 40px -12px rgba(43,92,255,.9)}

/* ============================================================
   MODAL FORM
   ============================================================ */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal__ov{position:absolute;inset:0;background:rgba(5,9,20,.72);backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);animation:ovIn .3s ease}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.modal__box{position:relative;width:100%;max-width:940px;max-height:92vh;overflow:hidden;border-radius:26px;
  background:#fff;box-shadow:0 60px 120px -40px rgba(0,0,0,.7);display:grid;grid-template-columns:.86fr 1.14fr;
  animation:boxIn .45s var(--ease)}
@keyframes boxIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.modal__aside{background:#041434;color:#fff;padding:38px 32px;position:relative;overflow:hidden;
  display:flex;flex-direction:column}
.modal__aside::before{content:"";position:absolute;inset:0;
  background:radial-gradient(500px 320px at 20% 0%,rgba(43,92,255,.4),transparent 62%),
             radial-gradient(400px 300px at 100% 100%,rgba(18,226,154,.22),transparent 60%)}
.modal__aside > *{position:relative;z-index:1}
.modal__aside h3{font-size:1.5rem;margin:18px 0 12px;letter-spacing:-.03em}
.modal__aside p{font-size:14px;color:#B9C2DA}
.mlist{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}
.mlist li{display:flex;gap:11px;font-size:13.6px;color:#D6DCEC;align-items:flex-start}
.mlist svg{width:17px;height:17px;color:#12E29A;flex:none;margin-top:3px}
.modal__snapshot{margin-top:auto;padding:16px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);font-size:12px;display:none}
.modal__snapshot.on{display:block;animation:qaIn .4s var(--ease)}
.modal__snapshot h6{margin:0 0 10px;font-family:var(--display);font-size:10.4px;letter-spacing:.14em;
  text-transform:uppercase;color:#12E29A;font-weight:800}
.modal__snapshot div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:#B9C2DA}
.modal__snapshot div b{color:#fff;font-weight:640;font-family:var(--display)}
.modal__form{padding:34px 34px 30px;overflow-y:auto;max-height:92vh}
.modal__close{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;
  color:var(--ink-2);transition:all .25s}
.modal__close:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(90deg)}
.modal__form h4{font-size:1.36rem;margin-bottom:7px;letter-spacing:-.03em}
.modal__form > p{font-size:13.8px;color:var(--ink-3);margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgroup{margin-bottom:15px}
.fgroup label{display:block;font-size:12.6px;font-weight:650;color:var(--ink-2);margin-bottom:7px}
.fgroup label sup{color:var(--danger);font-size:12px}
.fgroup input,.fgroup select,.fgroup textarea{
  width:100%;padding:12.5px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-size:15px;transition:border-color .22s,box-shadow .22s;outline:none;font-family:var(--font)}
.fgroup textarea{resize:vertical;min-height:82px;line-height:1.55}
.fgroup select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23727C97' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(43,92,255,.13)}
.fgroup input.err,.fgroup select.err,.fgroup textarea.err{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,90,90,.12)}
.fmsg{font-size:11.6px;color:var(--danger);margin-top:5px;display:none;font-weight:600}
.fmsg.on{display:block}
.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:12.2px;color:var(--ink-3);line-height:1.55}
.consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--brand);cursor:pointer}
.form-foot{font-size:11.6px;color:var(--ink-3);text-align:center;margin-top:14px;display:flex;
  align-items:center;justify-content:center;gap:7px}
.form-foot svg{width:13px;height:13px;color:var(--accent)}
.success{text-align:center;padding:44px 20px;display:none}
.success.on{display:block;animation:qaIn .5s var(--ease)}
.success__ico{width:74px;height:74px;border-radius:24px;margin:0 auto 22px;display:grid;place-items:center;
  background:linear-gradient(140deg,#12E29A,#0FB77E);color:#fff;
  box-shadow:0 20px 44px -16px rgba(18,226,154,.8);animation:pop2 .6s var(--ease)}
@keyframes pop2{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.success__ico svg{width:36px;height:36px}
.success h4{font-size:1.5rem;margin-bottom:12px}
.success p{color:var(--ink-2);font-size:15px;max-width:44ch;margin:0 auto 26px}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;display:none}
.btn.loading .spin{display:block}
.btn.loading .btn-label,.btn.loading .arw{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:flex}
  .hero__in{grid-template-columns:1fr;grid-template-areas:"head" "media" "body";row-gap:30px}
  .hero h1{margin-bottom:0}
  .flowmini{transform:none;max-width:420px;margin-inline:auto}
  .console{transform:none;max-width:560px;margin-inline:auto}
  .fase{grid-template-columns:1fr;gap:38px}
  .fase--rev .fase__media{order:0}
  .sim{grid-template-columns:1fr}
  .sim__form{border-right:0;border-bottom:1px solid rgba(255,255,255,.10)}
  .offer{grid-template-columns:1fr}
  .offer__side{position:static;grid-template-columns:1fr 1fr;display:grid}
  .modal__box{grid-template-columns:1fr;max-width:560px}
  .modal__aside{display:none}
  .modal__form{max-height:92vh}
  .sticky-cta{display:block}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .phase-cards{grid-template-columns:1fr 1fr}
  .leak-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .plan--pro{order:-1}
  .quote-grid{grid-template-columns:1fr}
  .stat-band{grid-template-columns:1fr 1fr}
  .sb:nth-child(2){border-right:0}
  .sb:nth-child(1),.sb:nth-child(2){border-bottom:1px solid var(--line)}
  .tl{grid-template-columns:1fr 1fr;gap:30px}
  .tl::before{display:none}
  .board{grid-template-columns:1fr 1fr}
  .pcard--fly{animation:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .timer-badge{right:2px;top:66px}
  .section{padding:74px 0}
  .section--tight{padding:56px 0}
  .wrap{padding-inline:18px}
  .phase-cards{grid-template-columns:1fr}
  .offer__side{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:last-child{display:none}
  .hero__proof{gap:20px}
  .pstat b{font-size:1.5rem}
  .out-mini{grid-template-columns:1fr}
  .vs{grid-template-columns:1fr}
  .vs__arrow{padding:6px 0}
  .vs__badge{transform:rotate(0)}
  .tl{grid-template-columns:1fr}
  .board{grid-template-columns:1fr}
  .col{min-height:auto}
  .stat-band{grid-template-columns:1fr}
  .sb{border-right:0;border-bottom:1px solid var(--line)}
  .sb:last-child{border-bottom:0}
  .frow{grid-template-columns:1fr}
  .calc__body,.calc__out{padding:20px}
  .sim__form,.sim__res{padding:24px 20px}
  .modal{padding:0}
  .modal__box{max-height:100vh;height:100dvh;border-radius:0;max-width:100%}
  .modal__form{max-height:100dvh;padding:26px 20px}
  .qa__body{padding-left:24px}
  .footer__top{grid-template-columns:1fr;gap:28px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-note{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   PÁGINA DE AGENDA (calendario de GoHighLevel)
   ============================================================ */
.nav__paso{font-size:13px;font-weight:640;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;white-space:nowrap}
.agenda-hero{padding:calc(var(--nav-h) + 54px) 0 68px}
.agenda-hero h1{font-size:clamp(2rem,4.4vw,3.15rem);margin:20px 0 18px}

/* Indicador de pasos */
.steps{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0;padding:0}
.steps__i{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);opacity:.55}
.steps__b{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:13px;
  background:rgba(255,255,255,.10);color:#fff}
.steps__b svg{width:15px;height:15px}
.steps__t b{display:block;font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:-.02em;line-height:1.25}
.steps__t span{font-size:11.4px;color:var(--ink-3)}
.steps__i--done{opacity:1;border-color:rgba(18,226,154,.4);background:rgba(18,226,154,.09)}
.steps__i--done .steps__b{background:linear-gradient(140deg,#12E29A,#0FB77E);color:#04140E}
.steps__i--now{opacity:1;border-color:rgba(120,150,255,.5);background:rgba(8,102,255,.14);
  box-shadow:0 0 0 4px rgba(8,102,255,.12)}
.steps__i--now .steps__b{background:linear-gradient(140deg,#0866FF,#7A5CFF)}
.steps__i--now .steps__t span{color:#9FB6FF;font-weight:700}

/* Tres razones para agendar */
.agenda-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.aw{padding:24px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.aw__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(140deg,rgba(8,102,255,.28),rgba(122,92,255,.22));
  border:1px solid rgba(160,185,255,.26);color:#A9BEFF}
.aw__ico svg{width:19px;height:19px}
.aw b{display:block;font-family:var(--display);font-size:15.4px;font-weight:700;
  letter-spacing:-.02em;margin-bottom:7px}
.aw p{font-size:14px;color:var(--ink-2);line-height:1.6}

/* Contenedor del calendario */
.booking{border-radius:24px;border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow-m);overflow:hidden;max-width:940px;margin-inline:auto}
.booking__bar{display:flex;align-items:center;gap:10px;padding:14px 22px;
  border-bottom:1px solid var(--line);font-size:12.4px;font-weight:600;color:var(--ink-3);
  background:linear-gradient(100deg,rgba(8,102,255,.06),rgba(122,92,255,.05))}
.booking__dot{width:8px;height:8px;border-radius:50%;background:#12E29A;flex:none;
  animation:blink 1.7s infinite}
.booking__frame{padding:8px}
.booking__frame iframe{width:100%;min-height:760px;border:0;display:block;border-radius:16px}
.booking__note{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  max-width:940px;margin:20px auto 0;font-size:12.8px;color:var(--ink-3);text-align:center}
.booking__note svg{width:15px;height:15px;flex:none;color:var(--accent)}
.booking__note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* Bloque de urgencia */
.urg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.urg__i{padding:22px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);text-align:center}
.urg__i b{display:block;font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.2rem);
  font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(100deg,#0866FF,#7A5CFF 60%,#12E29A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.urg__i span{display:block;font-size:12.4px;color:var(--ink-3);margin-top:9px;line-height:1.45}

@media (max-width:900px){
  .agenda-why{grid-template-columns:1fr}
  .urg{grid-template-columns:1fr}
  .steps{gap:9px}
  .steps__i{padding:10px 16px 10px 11px}
  .nav__paso{display:none}
  .booking__frame iframe{min-height:900px}
}
@media (max-width:640px){
  .steps{flex-direction:column;align-items:stretch}
  .booking__frame{padding:4px}
  .booking__frame iframe{min-height:1020px}
}

/* ============================================================
   PÁGINAS LEGALES (aviso de privacidad)
   ============================================================ */
.legal-hero{padding:calc(var(--nav-h) + 66px) 0 62px}
.legal-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:20px 0 18px}
.legal-hero .lead{margin-bottom:26px}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px}
.legal-meta span{display:inline-flex;align-items:center;gap:8px;font-size:12.4px;font-weight:600;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#B9C2DA}
.legal-meta svg{width:14px;height:14px;color:#12E29A;flex:none}

.legal{display:grid;grid-template-columns:252px 1fr;gap:60px;align-items:start;padding:88px 0 96px}
.legal__toc{position:sticky;top:calc(var(--nav-h) + 26px)}
.legal__toc h4{font-family:var(--display);font-size:11.4px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.legal__toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:1px}
.legal__toc a{display:flex;gap:10px;padding:8px 11px;border-radius:9px;font-size:13.4px;
  color:var(--ink-2);line-height:1.4;transition:background .22s,color .22s}
.legal__toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);
  font-family:var(--display);font-size:10.6px;font-weight:800;color:var(--ink-3);
  padding-top:2px;flex:none;transition:color .22s}
.legal__toc a:hover{background:rgba(43,92,255,.06);color:var(--brand)}
.legal__toc a:hover::before{color:var(--brand)}

.legal__body{max-width:74ch;counter-reset:sec}
.legal__body > section{padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid var(--line)}
.legal__body > section:last-of-type{border-bottom:0}
.legal__body h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:16px;display:flex;gap:14px;align-items:baseline}
.legal__body h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);
  font-family:var(--display);font-size:.72em;font-weight:800;color:var(--brand);flex:none}
.legal__body h3{font-size:1.02rem;margin:26px 0 10px;font-weight:700}
.legal__body p{margin-bottom:15px;color:var(--ink-2);font-size:15.6px;line-height:1.72}
.legal__body p:last-child{margin-bottom:0}
.legal__body strong{color:var(--ink);font-weight:640}
.legal__body ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.legal__body ul li{display:flex;gap:11px;font-size:15.2px;color:var(--ink-2);line-height:1.62}
.legal__body ul li::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;margin-top:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.legal__body a:not(.btn){color:var(--brand);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.legal__body a:not(.btn):hover{color:var(--brand-2)}

.legal-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;display:table}
.legal-table th{background:var(--bg-soft);text-align:left;font-family:var(--display);font-weight:700;
  font-size:11.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:12px 14px;
  border-bottom:1px solid var(--line)}
.legal-table td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.legal-table tr:last-child td{border-bottom:0}
.legal-table td b{color:var(--ink);font-weight:640;display:block;margin-bottom:3px}
.legal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:18px}
.legal-scroll .legal-table{margin-bottom:0;min-width:520px}

.callout{padding:20px 22px;border-radius:15px;border:1px solid rgba(43,92,255,.24);
  background:rgba(43,92,255,.05);margin:0 0 18px}
.callout p:last-child{margin-bottom:0}
.callout--ok{border-color:rgba(18,226,154,.32);background:rgba(18,226,154,.07)}

/* Marcador visible de dato pendiente de llenar. Buscar ".pend" antes de publicar. */
.pend{background:#FFF3D6;color:#8A5A00;border:1px dashed #E0A93B;border-radius:5px;
  padding:1px 7px;font-weight:700;font-size:.94em;white-space:nowrap}

.legal-cta{padding:80px 0}
.legal-cta .cta-final h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}

@media (max-width:900px){
  .legal{grid-template-columns:1fr;gap:34px;padding:56px 0 72px}
  .legal__toc{position:static;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft)}
  .legal__toc ol{grid-template-columns:1fr 1fr;display:grid;gap:2px}
}
@media (max-width:640px){
  .legal__toc ol{grid-template-columns:1fr}
  .legal__body h2{gap:10px}
  .legal-hero{padding:calc(var(--nav-h) + 44px) 0 46px}
}