/* =========================================================
   Linked360 — Landing
   Dark · galactic · futurista · minimalista (estructura tipo Imagine)
   Marca: #0a0a0f base · morado #7c3aed · Aura Glow
   ========================================================= */

:root{
  /* fondos */
  --bg:        #07060c;
  --bg-1:      #0a0a0f;
  --bg-2:      #0f0e1a;
  --surface:   #13111f;
  --surface-2: #17142a;

  /* morado marca */
  --violet:    #7c3aed;
  --violet-bright: #8b5cf6;
  --violet-light:  #a78bfa;
  --violet-soft:   #c4b5fd;
  --violet-deep:   #6d28d9;

  /* texto */
  --tx:    #ffffff;
  --tx-2:  rgba(255,255,255,.72);
  --tx-3:  rgba(255,255,255,.46);
  --tx-4:  rgba(255,255,255,.28);

  /* líneas */
  --line:   rgba(255,255,255,.08);
  --line-2: rgba(124,58,237,.22);

  /* San Francisco (nativo en Apple) → elegante y sin depender de Google Fonts */
  --mono: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --disp: 'DM Sans', system-ui, sans-serif;

  --maxw: 1180px;
  --r: 18px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Lenis: cuando está activo, manda Lenis (evita conflicto con scroll-behavior:smooth) */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--tx);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(124,58,237,.4); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-1); }
::-webkit-scrollbar-thumb{ background:#2a2540; border-radius:10px; border:2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover{ background:var(--violet-deep); }

/* =========================================================
   COSMOS — fondo galáctico
   ========================================================= */
.cosmos{ position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:radial-gradient(ellipse at bottom, #141031 0%, #08070f 58%, #050409 100%); }
/* beams animados (textura de fondo) */
.cosmos__beams{ position:absolute; inset:0; width:100%; height:100%; opacity:.6; }
/* estrellas chill (pocas, estáticas) */
.cosmos__stars-chill{ position:absolute; top:50%; left:50%; }
.chill-dot{ position:absolute; top:0; left:0; border-radius:50%; background:transparent; }
.grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* =========================================================
   PRIMITIVOS
   ========================================================= */
section{ position:relative; }
.eyebrow, .section-tag, .claim__tag, .trust__label{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; font-weight:500; color:var(--violet-light);
}
.eyebrow{ display:inline-flex; align-items:center; gap:.6em; }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--violet-bright);
  box-shadow:0 0 12px 2px rgba(139,92,246,.9); }

.h2{ font-family:var(--disp); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(30px,4.6vw,52px); line-height:1.05; }
.lede{ color:var(--tx-2); font-size:clamp(16px,1.5vw,19px); max-width:46ch; margin-top:16px; }
.section-tag{ display:block; margin-bottom:18px; }

.grad{
  background:linear-gradient(110deg, var(--violet-light) 0%, var(--violet-bright) 40%, var(--violet-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* botones */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:15px; white-space:nowrap;
  padding:13px 22px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s; }
.btn--lg{ padding:16px 30px; font-size:16px; }
.btn--solid{ background:linear-gradient(180deg, var(--violet-bright), var(--violet));
  color:#fff; box-shadow:0 0 0 1px rgba(167,139,250,.4) inset, 0 8px 30px -8px rgba(124,58,237,.8); }
.btn--solid:hover{ transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(167,139,250,.6) inset, 0 14px 40px -10px rgba(124,58,237,1), 0 0 40px -4px rgba(139,92,246,.6); }
.btn--line{ background:rgba(255,255,255,.02); color:var(--tx); border-color:var(--line); }
.btn--line:hover{ border-color:var(--line-2); background:rgba(124,58,237,.08); transform:translateY(-2px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{ position:sticky; top:0; z-index:50; width:100%; max-width:var(--maxw); margin:0 auto;
  transition:max-width .4s var(--ease), top .4s var(--ease); }
.nav__bar{ position:relative; display:flex; align-items:center; gap:28px; padding:16px 28px;
  transition:padding .4s var(--ease); }
.nav__bar::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(7,6,12,.5); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid transparent; border-bottom-color:var(--line);
  transition:border-radius .4s var(--ease), background .4s, border-color .4s, box-shadow .4s; }
/* scrolled → píldora flotante */
.nav.is-scrolled{ max-width:980px; top:14px; }
.nav.is-scrolled .nav__bar{ padding:10px 14px 10px 18px; }
.nav.is-scrolled .nav__bar::before{ border-color:var(--line-2); border-radius:16px;
  background:rgba(10,9,16,.72); box-shadow:0 14px 44px -14px rgba(0,0,0,.75), 0 0 32px -12px rgba(124,58,237,.45); }
.nav__brand{ display:flex; align-items:center; gap:11px; }
.nav__logo{ height:30px; width:auto; }
.nav__word{ font-family:var(--disp); font-weight:800; letter-spacing:.04em; font-size:18px; }
.accent{ color:var(--violet-light); }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{ font-size:14.5px; color:var(--tx-3); transition:color .2s; }
.nav__links a:hover{ color:var(--tx); }
.nav__links a.is-active{ color:var(--tx); }
.nav__cta{ padding:10px 18px; font-size:14px; }
.nav__toggle{ display:none; }
.nav__mobile{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; width:100%; overflow:hidden; text-align:center; isolation:isolate;
  background:radial-gradient(ellipse 95% 85% at 50% 32%, #120e28 0%, #08070f 58%, #060509 100%);
  padding:clamp(96px,15vh,180px) 24px clamp(170px,24vh,280px); }

.hero__inner{ position:relative; z-index:3; max-width:1180px; margin:0 auto; }

/* sparkles alrededor del planeta (canvas, concentrados en el horizonte) */
.hero__sparkles{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 97%, #000 0%, #000 32%, transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 97%, #000 0%, #000 32%, transparent 78%); }
.hero__sparkles canvas{ display:block; }

/* horizonte radial luminoso (la firma del diseño) */
.hero__horizon{ position:absolute; left:50%; top:calc(100% - 155px); transform:translateX(-50%);
  width:132%; max-width:1500px; height:720px; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(closest-side, var(--bg) 73%, rgba(139,92,246,.4) 90%, rgba(196,181,253,.95) 100%);
  border:1px solid rgba(180,140,222,.5);
  box-shadow:0 -6px 90px 8px rgba(124,58,237,.45);
  animation:fadeUp 1.3s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateX(-50%) translateY(44px);} to{ opacity:1; transform:translateX(-50%) translateY(0);} }

/* fade inferior */
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(80px,10vh,140px); z-index:2; pointer-events:none;
  background:linear-gradient(to top, #050409, transparent); }

.hero .eyebrow{ margin-bottom:26px; padding:8px 16px 8px 14px; border:1px solid var(--line);
  border-radius:999px; background:linear-gradient(to top right, rgba(124,58,237,.05), transparent);
  transition:border-color .25s, background .25s; }
.eyebrow--cta:hover{ border-color:var(--line-2); background:rgba(124,58,237,.1); }
.eyebrow__chev{ width:15px; height:15px; margin-left:2px; color:var(--violet-light);
  transition:transform .3s var(--ease); }
.eyebrow--cta:hover .eyebrow__chev{ transform:translateX(3px); }

.hero__title{ font-family:var(--disp); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(38px,5.4vw,72px); line-height:1.06; max-width:1120px; margin:0 auto; text-wrap:balance; }
.hero__title .grad{ font-weight:400; }
.hero__sub{ color:var(--tx-2); font-size:clamp(17px,1.8vw,21px); line-height:1.55;
  max-width:62ch; margin:26px auto 0; }
.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }

.trust{ margin-top:58px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.trust__label{ color:var(--tx-4); }
/* marquee de "logos" (nombres) en rotación continua */
.trust__marquee{ position:relative; width:100%; max-width:1000px; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); }
.trust__track{ display:flex; align-items:center; width:max-content; animation:trustScroll 38s linear infinite; }
.trust__marquee:hover .trust__track{ animation-play-state:paused; }
@keyframes trustScroll{ to{ transform:translateX(-50%); } }
.trust__logo{ flex:none; margin:0 clamp(34px,4.6vw,66px); width:auto; display:block; opacity:.65; transition:opacity .3s; }
.trust__logo:hover{ opacity:1; }
/* alturas por logo para equilibrarlos ópticamente (encomenda es un wordmark ancho → más bajo) */
.trust__logo[src*="encomenda"]{ height:clamp(17px,2.1vw,23px); }
.trust__logo[src*="pulpo"]{ height:clamp(28px,3.5vw,35px); }
.trust__logo[src*="conector"]{ height:clamp(31px,4vw,41px); }
@media (prefers-reduced-motion:reduce){ .trust__track{ animation:none; } }

/* tira de prueba (encima del método) */
.trustband{ position:relative; width:100%; padding:clamp(56px,9vh,120px) 28px clamp(18px,3vh,34px);
  display:flex; flex-direction:column; align-items:center; gap:16px; }
/* degradado negro que baja desde el hero hacia el resto de la página */
.trustband::before{ content:""; position:absolute; left:0; right:0; top:0; z-index:-1; pointer-events:none;
  height:clamp(380px,48vh,640px);
  background:linear-gradient(to bottom, #050409 0%, #050409 16%, transparent 100%); }

/* =========================================================
   MÉTODO — claim blocks (estilo Imagine, espaciado)
   ========================================================= */
.method{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,150px) 28px clamp(95px,15vh,180px); }
.method__head{ max-width:720px; margin:0 auto clamp(48px,7vh,90px); text-align:center; }
.method__head .lede{ margin-left:auto; margin-right:auto; }

.claim{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center;
  padding:clamp(40px,6vh,80px) 0; border-top:1px solid var(--line); }
.claim:nth-child(even) .claim__text{ order:2; }
.claim__tag{ display:block; margin-bottom:16px; }
.claim__title{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(24px,2.9vw,38px); line-height:1.12; }
.claim__desc{ color:var(--tx-2); font-size:17px; margin-top:18px; max-width:42ch; }
.claim__desc em{ color:var(--violet-light); font-style:normal; }

/* visual cards */
.claim__visual{ min-height:300px; display:flex; }
.viz{ position:relative; flex:1; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(160deg, var(--surface-2), var(--bg-2) 70%);
  border:1px solid var(--line); padding:30px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px;
  box-shadow:0 0 80px -30px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.04); }
.viz::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124,58,237,.18), transparent 70%); pointer-events:none; }

/* viz: engine (dos mitades → pipeline) */
.viz--engine{ gap:14px; }
.viz-engine__stream{ display:flex; align-items:center; gap:12px; width:100%; max-width:300px; }
.viz-pill{ font-family:var(--mono); font-size:12px; padding:7px 12px; border-radius:8px;
  border:1px solid var(--line-2); background:rgba(124,58,237,.1); color:var(--violet-light); white-space:nowrap; }
.viz-flow{ flex:1; height:2px; background:linear-gradient(90deg, var(--violet), transparent);
  position:relative; overflow:hidden; }
.viz-flow::after{ content:""; position:absolute; top:0; left:0; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, var(--violet-light)); animation:slide 2.2s linear infinite; }
.viz-engine__stream--out .viz-flow{ background:linear-gradient(90deg, var(--violet-deep), transparent); }
@keyframes slide{ to{ transform:translateX(400%);} }
.viz-engine__core{ margin-top:6px; font-family:var(--disp); font-weight:700; font-size:18px;
  padding:12px 26px; border-radius:12px; color:#fff;
  background:linear-gradient(180deg, var(--violet-bright), var(--violet-deep));
  box-shadow:0 0 30px -4px rgba(139,92,246,.7); }

/* viz: brain (doc → node) */
.viz--brain{ gap:22px; }
.viz-doc{ width:100%; max-width:240px; display:flex; flex-direction:column; gap:10px;
  padding:18px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.viz-doc__bar{ height:9px; border-radius:5px; background:linear-gradient(90deg, rgba(167,139,250,.5), rgba(124,58,237,.15)); }
.w90{ width:90%;} .w80{ width:80%;} .w70{ width:70%;} .w50{ width:50%;} .w60{ width:60%;}
.w85{ width:85%;} .w95{ width:95%;}
.viz-node{ display:flex; align-items:center; gap:12px; }
.viz-node__core{ width:18px; height:18px; border-radius:50%; background:var(--violet-bright);
  box-shadow:0 0 0 6px rgba(124,58,237,.2), 0 0 24px 2px rgba(139,92,246,.9); }
.viz-node__label{ font-family:var(--mono); font-size:12px; color:var(--violet-light); }

/* viz: voice (waveform) */
.viz--voice{ gap:24px; }
.viz-wave{ display:flex; align-items:center; gap:5px; height:80px; }
.viz-wave span{ width:5px; border-radius:3px; background:linear-gradient(180deg, var(--violet-light), var(--violet));
  box-shadow:0 0 12px rgba(139,92,246,.6); animation:eq 1.4s ease-in-out infinite; height:30%; }
.viz-wave span:nth-child(2n){ animation-delay:.15s; } .viz-wave span:nth-child(3n){ animation-delay:.3s; }
.viz-wave span:nth-child(4n){ animation-delay:.45s; } .viz-wave span:nth-child(5n){ animation-delay:.6s; }
.viz-wave span:nth-child(7n){ animation-delay:.2s; } .viz-wave span:nth-child(11n){ animation-delay:.5s; }
@keyframes eq{ 0%,100%{ height:22%;} 50%{ height:92%;} }
.viz-seal{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--tx-3); text-align:center; }

/* viz: signals (bars) */
.viz--signals{ gap:20px; }
.viz-bars{ display:flex; align-items:flex-end; gap:10px; height:130px; }
.viz-bars span{ width:24px; height:var(--h); border-radius:6px 6px 3px 3px;
  background:rgba(255,255,255,.08); border:1px solid var(--line); }
.viz-bars span.is-hot{ background:linear-gradient(180deg, var(--violet-bright), var(--violet-deep));
  border-color:transparent; box-shadow:0 0 26px -2px rgba(139,92,246,.9); }
.viz-tag-hot{ font-family:var(--mono); font-size:12px; color:var(--violet-light); }

/* viz: approve */
.viz--approve{ gap:22px; }
.viz-post{ width:100%; max-width:260px; padding:20px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); display:flex; flex-direction:column; gap:11px; }
.viz-post__line{ height:10px; border-radius:5px; background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); }
.viz-approve{ font-family:var(--sans); font-weight:600; font-size:14px; color:#fff;
  padding:11px 24px; border-radius:10px; border:none; cursor:default;
  background:linear-gradient(180deg, var(--violet-bright), var(--violet-deep));
  box-shadow:0 0 26px -4px rgba(139,92,246,.8); animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 26px -6px rgba(139,92,246,.6);} 50%{ box-shadow:0 0 34px -2px rgba(139,92,246,1);} }

/* viz: human */
.viz--human{ gap:16px; }
.viz-avatar{ width:74px; height:74px; border-radius:50%;
  background:conic-gradient(from 220deg, var(--violet-deep), var(--violet-bright), var(--violet-light), var(--violet-deep));
  box-shadow:0 0 34px -4px rgba(139,92,246,.8); position:relative; }
.viz-avatar::after{ content:""; position:absolute; inset:4px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #2a2540, #15122a); }
.viz-human__meta{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.viz-human__name{ font-family:var(--disp); font-weight:600; font-size:16px; }
.viz-human__role{ font-family:var(--mono); font-size:11.5px; color:var(--tx-3); }
.viz-check{ font-family:var(--mono); font-size:12px; color:var(--violet-light);
  padding:6px 14px; border-radius:999px; border:1px solid var(--line-2); background:rgba(124,58,237,.08); }
.viz-check::before{ content:"✓ "; }

/* =========================================================
   LA CUARTA VÍA — comparison table (estilo Workflows)
   ========================================================= */
.fourth{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,14vh,170px) 28px; }
.fourth__head{ text-align:center; max-width:760px; margin:0 auto clamp(40px,6vh,70px); }
.pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--violet-light);
  padding:9px 18px; border-radius:999px; border:1px solid var(--line-2);
  background:rgba(124,58,237,.08); margin-bottom:26px; }
.pill__spark{ color:var(--violet-bright); }
.fourth__title{ font-family:var(--disp); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(34px,5.4vw,64px); line-height:1.04; }
.fourth__head .lede{ margin:20px auto 0; }

.compare{ position:relative; }
.compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.ctable{ width:100%; min-width:820px; border-collapse:separate; border-spacing:0; }
.ctable th, .ctable td{ padding:18px 18px; text-align:center; vertical-align:middle;
  border-bottom:1px solid var(--line); }
.ctable thead th{ border-bottom:1px solid var(--line); padding-top:8px; padding-bottom:22px; }
.ctable__rowhead{ text-align:left; font-family:var(--sans); font-weight:600; font-size:15px;
  color:var(--tx-2); white-space:nowrap; }
thead .ctable__col{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--tx-3); }
.ctable td{ font-size:14.5px; color:var(--tx-2); }
.ctable td span{ display:inline-block; }
.ctable__txt{ color:var(--tx-3); font-family:var(--mono); font-size:12.5px; }

/* columna ganadora resaltada */
.ctable__col--win, .ctable__win{ position:relative; }
.ctable__brand{ display:inline-flex; align-items:center; gap:9px; font-family:var(--disp);
  font-weight:700; font-size:17px; color:#fff; }
.ctable__brand img{ border-radius:6px; }
/* glow frame sobre la columna ganadora */
.ctable thead .ctable__col--win{ border-radius:14px 14px 0 0; }
.ctable__win::before, .ctable__col--win::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(124,58,237,.16), rgba(124,58,237,.04));
  z-index:-1; }
.ctable thead .ctable__col--win::after{ content:""; position:absolute; left:0; right:0; top:0; bottom:-1px;
  border:1px solid var(--violet); border-bottom:none; border-radius:14px 14px 0 0;
  box-shadow:0 -2px 40px -6px rgba(124,58,237,.7); pointer-events:none; }
.ctable tbody tr:last-child .ctable__win{ border-radius:0 0 14px 14px; }
.ctable tbody tr:last-child .ctable__win::after{ content:""; position:absolute; left:0; right:0; top:0; bottom:0;
  border:1px solid var(--violet); border-top:none; border-radius:0 0 14px 14px; pointer-events:none; }
.ctable__win span{ color:#fff; font-weight:500; }

/* icons check / x */
.ic{ display:inline-block; width:22px; height:22px; border-radius:50%; position:relative; vertical-align:middle; margin-right:8px; flex:none; }
.ic--yes{ background:linear-gradient(180deg, var(--violet-bright), var(--violet-deep));
  box-shadow:0 0 16px -2px rgba(139,92,246,.8); }
.ic--yes::after{ content:""; position:absolute; left:7px; top:5px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg); }
.ic--no{ background:rgba(255,255,255,.06); border:1px solid var(--line); }
.ic--no::before, .ic--no::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:1.6px;
  background:var(--tx-4); border-radius:2px; }
.ic--no::before{ transform:translate(-50%,-50%) rotate(45deg); }
.ic--no::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.ctable td i.ic{ margin:0 auto 7px; display:block; }

/* =========================================================
   MOTOR 360 flow
   ========================================================= */
.motor{ max-width:var(--maxw); margin:0 auto; padding:clamp(50px,8vh,100px) 28px; text-align:center; }
.motor__head{ max-width:640px; margin:0 auto 56px; }
.motor__head .lede{ margin-left:auto; margin-right:auto; }
.flow{ list-style:none; display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:wrap; }
.flow__node{ position:relative; flex:1; min-width:150px; max-width:210px;
  padding:26px 16px; border:1px solid var(--line); border-radius:14px; margin:8px;
  background:linear-gradient(160deg, var(--surface), var(--bg-2));
  display:flex; flex-direction:column; gap:10px; align-items:center;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.flow__node:hover{ transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:0 0 40px -10px rgba(124,58,237,.6); }
.flow__node:not(:last-child)::after{ content:"→"; position:absolute; right:-19px; top:50%;
  transform:translateY(-50%); color:var(--violet-light); font-size:18px; z-index:2; }
.flow__n{ font-family:var(--mono); font-size:12px; color:var(--violet-light); letter-spacing:.1em; }
.flow__label{ font-family:var(--disp); font-weight:700; font-size:18px; }
.flow__node--end{ background:linear-gradient(160deg, rgba(124,58,237,.28), rgba(109,40,217,.12));
  border-color:var(--line-2); box-shadow:0 0 50px -12px rgba(124,58,237,.7); }
.flow__node--end .flow__label{ color:var(--violet-soft); }

/* =========================================================
   PRUEBA — stats grid
   ========================================================= */
.proof{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,150px) 28px; }
.proof__head{ max-width:640px; margin:0 auto 52px; text-align:center; }
.proof__head .lede{ margin-left:auto; margin-right:auto; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.stats__grid{ display:grid; grid-template-columns:1fr; gap:24px; }
/* mismo marco de líneas en degradado que las tarjetas del método */
.stat{ position:relative; padding:38px 34px; border-radius:14px; border:none;
  --stat-surface:linear-gradient(160deg, rgba(19,17,31,.5), rgba(10,10,15,.12));
  background:
    linear-gradient(90deg, transparent, rgba(167,139,250,.65), transparent) no-repeat,
    linear-gradient(90deg, transparent, rgba(124,58,237,.65), transparent) no-repeat,
    linear-gradient(180deg, transparent, rgba(167,139,250,.55), transparent) no-repeat,
    linear-gradient(180deg, transparent, rgba(167,139,250,.55), transparent) no-repeat,
    var(--stat-surface);
  background-size:100% 1px, 100% 1px, 1px 100%, 1px 100%, 100% 100%;
  background-position:0 16px, 0 calc(100% - 16px), 0 0, 100% 0, 0 0;
  display:flex; flex-direction:column; gap:12px; height:100%;
  transition:transform .3s var(--ease), box-shadow .3s; }
.stat--feature{ justify-content:center; gap:16px; }
.stat--feature .stat__num{ font-size:clamp(56px,8vw,104px); }
.stat--feature .stat__unit{ font-size:17px; max-width:22ch; }
.stat__num{ font-family:var(--disp); font-weight:300; letter-spacing:-.03em;
  font-size:clamp(40px,4.4vw,58px); line-height:1; color:#fff;
  text-shadow:0 0 38px rgba(139,92,246,.4); }
.stat__suf{ font-size:.46em; font-weight:400; color:var(--violet-light); margin-left:4px; vertical-align:super; }
.stat__unit{ color:var(--tx-2); font-size:15.5px; }
.stat__who{ font-family:var(--mono); font-size:12px; color:var(--tx-3); margin-top:auto; padding-top:8px; }

/* =========================================================
   ICP — big text
   ========================================================= */
.icp{ max-width:var(--maxw); margin:0 auto; padding:clamp(60px,10vh,120px) 28px; }
.icp__inner{ text-align:center; }
.icp__title{ font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(30px,4.4vw,52px); line-height:1.06; margin-bottom:44px; }
.icp__big{ list-style:none; display:flex; flex-direction:column; gap:6px; align-items:center; margin-bottom:40px; }
.icp__big li{ font-family:var(--disp); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(36px,7vw,84px); line-height:1.02; color:transparent;
  -webkit-text-stroke:1px rgba(167,139,250,.35); transition:.4s var(--ease); }
.icp__big li:hover{ -webkit-text-stroke:1px transparent;
  background:linear-gradient(110deg, var(--violet-light), var(--violet-bright));
  -webkit-background-clip:text; background-clip:text; }
.icp__note{ color:var(--tx-2); font-size:17px; max-width:54ch; margin:0 auto; }

/* =========================================================
   PROMESA
   ========================================================= */
.promise{ max-width:980px; margin:0 auto; padding:clamp(50px,8vh,100px) 28px; }
.promise__head{ text-align:center; max-width:620px; margin:0 auto 48px; }
.promise__head .lede{ margin-left:auto; margin-right:auto; }
.promise__cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.promise__col{ padding:30px 30px 34px; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(160deg, var(--surface), rgba(15,14,26,.5)); }
.promise__col--yes{ border-color:var(--line-2); box-shadow:0 0 60px -24px rgba(124,58,237,.6); }
.promise__label{ display:flex; align-items:center; font-family:var(--disp); font-weight:700; font-size:18px; margin-bottom:20px; }
.promise__label .ic{ width:24px; height:24px; }
.promise__col ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.promise__col li{ font-size:16px; color:var(--tx-2); padding-left:18px; position:relative; }
.promise__col li::before{ content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; }
.promise__col--yes li::before{ background:var(--violet-bright); box-shadow:0 0 10px rgba(139,92,246,.9); }
.promise__col--no li::before{ background:var(--tx-4); }
.promise__quote{ text-align:center; font-family:var(--disp); font-weight:600;
  font-size:clamp(20px,2.6vw,30px); line-height:1.35; color:#fff; max-width:24ch;
  margin:48px auto 0; }

/* =========================================================
   WHY quote
   ========================================================= */
.why{ max-width:1000px; margin:0 auto; padding:clamp(60px,10vh,130px) 28px; text-align:center; }
.why__quote{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(28px,4.4vw,54px); line-height:1.16; }
.why__quote .grad{ display:block; }

/* =========================================================
   CTA
   ========================================================= */
.cta{ max-width:var(--maxw); margin:0 auto; padding:clamp(20px,4vh,50px) 28px clamp(80px,12vh,150px); }
.cta__inner{ position:relative; text-align:center; padding:clamp(50px,8vw,90px) 32px; border-radius:30px;
  border:1px solid var(--line-2); overflow:hidden;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(124,58,237,.3), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--bg-2)); }
.cta__inner::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px -20px rgba(124,58,237,.4); border-radius:30px; }
.cta__title{ font-family:var(--disp); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(27px,3.5vw,46px); line-height:1.18; max-width:none; }
.cta__sub{ color:var(--tx-2); font-size:18px; line-height:1.5; max-width:50ch; margin:22px auto 34px; }
.cta__micro{ font-family:var(--mono); font-size:12.5px; color:var(--tx-3); margin-top:18px; letter-spacing:.04em; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ border-top:1px solid var(--line); }
.foot__bar{ max-width:var(--maxw); margin:0 auto; padding:34px 28px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.foot__brand{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; letter-spacing:.04em; }
.foot__brand img{ height:24px; width:auto; }
.foot__copy{ color:var(--tx-3); font-size:14px; margin-left:auto; }
.foot__links{ display:flex; gap:22px; flex-wrap:wrap; margin-left:auto; }
.foot__links a{ color:var(--tx-3); font-size:13px; font-family:var(--mono); letter-spacing:.02em; transition:color .2s; }
.foot__links a:hover{ color:var(--tx); }
.foot__legal{ color:var(--tx-4); font-size:13px; font-family:var(--mono); }
@media (max-width:620px){ .foot__links{ margin-left:0; width:100%; order:3; } }

/* =========================================================
   PRUEBA SOCIAL — bento bordeado (estilo features-9)
   ========================================================= */
.bento{ max-width:var(--maxw); margin:0 auto; padding:clamp(48px,7vh,90px) 28px; }
.bento__grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, rgba(19,17,31,.55), rgba(10,10,15,.35)); }
.bento__cell{ position:relative; }
.bento__cell--b{ border-left:1px solid var(--line); }
.bento__cell--stat{ grid-column:1 / -1; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(40px,6vw,72px) 24px; text-align:center; }
.bento__cell--chart{ grid-column:1 / -1; }

.bento__txt{ padding:clamp(26px,3vw,46px) clamp(26px,3vw,46px) 0; }
.bento__label{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3); }
.bento__label svg{ width:16px; height:16px; color:var(--violet-light); flex:none; }
.bento__statement{ margin-top:18px; font-family:var(--disp); font-weight:700;
  font-size:clamp(19px,2vw,25px); line-height:1.26; color:var(--tx); max-width:36ch; }
.bento__statement .muted{ color:var(--tx-3); font-weight:500; }

/* mapa */
.bento__map{ position:relative; margin-top:26px; min-height:230px; overflow:hidden; }
.bento__map-img{ width:100%; opacity:.55; filter:drop-shadow(0 0 12px rgba(124,58,237,.4)); }
.bento__map::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 50% 40%, transparent 35%, rgba(10,10,15,.85) 92%); }
.bento__badge{ position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); z-index:2;
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--tx);
  padding:8px 13px; border-radius:11px; background:var(--surface); border:1px solid var(--line-2);
  box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 26px -6px rgba(124,58,237,.7); white-space:nowrap; }

/* chat */
.bento__chat{ display:flex; flex-direction:column; gap:22px; margin-top:18px;
  padding:6px clamp(26px,3vw,46px) clamp(26px,3vw,46px); }
.cmsg__meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--tx-3); margin-bottom:8px; }
.cmsg__dot{ width:17px; height:17px; border-radius:50%; border:1px solid var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; }
.cmsg__dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--violet-bright);
  box-shadow:0 0 8px rgba(139,92,246,.9); }
.cbubble{ font-size:13px; line-height:1.45; padding:11px 14px; border-radius:13px; width:78%; }
.cbubble--in{ background:var(--surface); border:1px solid var(--line); color:var(--tx-2); border-bottom-left-radius:4px; }
.cbubble--out{ margin-left:auto; color:#fff; border-bottom-right-radius:4px;
  background:linear-gradient(180deg, var(--violet-bright), var(--violet)); box-shadow:0 0 26px -8px rgba(124,58,237,.8); }
.cmsg__now{ display:block; text-align:right; font-size:11px; color:var(--tx-4); margin-top:7px; }

/* número gigante */
.bento__bignum{ font-family:var(--disp); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(40px,7vw,84px); line-height:1; color:#fff; text-shadow:0 0 55px rgba(139,92,246,.5); }
.bento__bigsub{ margin-top:14px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--violet-light); }

/* gráfico */
.bento__cell--chart .bento__txt{ max-width:520px; }
.bento__chart{ width:100%; margin-top:6px; }
.bento__chart img{ display:block; width:100%; height:auto; }

/* =========================================================
   MÉTODO v3 — tarjetas "gradient" (marco de líneas en degradado)
   ========================================================= */
.method__grid{ max-width:1080px; margin:clamp(54px,8vh,92px) auto 0; display:grid;
  grid-template-columns:1fr 1fr; gap:clamp(34px,4vw,56px); }
.gcard{ position:relative; }
.gcard--wide{ grid-column:1 / -1; }
/* líneas horizontales (arriba/abajo, con sangría) */
.gcard::before, .gcard::after{ content:""; position:absolute; left:0; right:0; height:1px; z-index:3; pointer-events:none; }
.gcard::before{ top:16px; background:linear-gradient(to right, transparent, rgba(167,139,250,.7), transparent); }
.gcard::after{ bottom:16px; background:linear-gradient(to right, transparent, rgba(124,58,237,.7), transparent); }
.gcard__inner{ position:relative; padding:clamp(40px,4vw,62px); height:100%;
  background:linear-gradient(160deg, rgba(19,17,31,.42), rgba(10,10,15,.1)); border-radius:14px; }
.gcard .claim__tag{ margin-bottom:26px; }
/* líneas verticales (laterales) */
.gcard__inner::before, .gcard__inner::after{ content:""; position:absolute; top:0; bottom:0; width:1px; z-index:3; pointer-events:none; }
.gcard__inner::before{ left:0; background:linear-gradient(to top, transparent, rgba(167,139,250,.6), transparent); }
.gcard__inner::after{ right:0; background:linear-gradient(to top, transparent, rgba(167,139,250,.6), transparent); }

.gcard__title{ font-family:var(--disp); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(23px,2.5vw,33px); line-height:1.15; margin-top:0; }
.gcard__desc{ color:var(--tx-2); font-size:16px; line-height:1.62; margin-top:20px; max-width:46ch; }
.gcard__desc em{ color:var(--violet-light); font-style:normal; }
.gcard__viz{ margin-top:44px; min-height:210px; display:flex; align-items:center; justify-content:center; }

/* visual sin caja propia dentro de la tarjeta */
.gcard__viz .viz{ background:none; border:none; box-shadow:none; padding:0; min-height:auto; width:100%; }
.gcard__viz .viz::before{ display:none; }

/* fila invertida: visual a la izquierda, texto a la derecha */
.gcard--rev .gcard__rowtext{ order:2; }
.gcard--rev .gcard__viz{ order:1; }

/* viz: onda de voz fina y elegante (anti-slop) */
.viz--wave{ gap:22px; }
.wave{ width:100%; max-width:300px; height:90px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wave__svg{ width:200%; height:100%; animation:waveFlow 7s linear infinite; }
@keyframes waveFlow{ to{ transform:translateX(-50%); } }
.wave__line{ fill:none; }
.wave__line--1{ stroke:var(--violet-light); stroke-width:1.5; filter:drop-shadow(0 0 6px rgba(139,92,246,.6)); }
.wave__line--2{ stroke:var(--violet); stroke-width:1.1; opacity:.45; }

/* viz: target de prospección (localiza al cliente ideal entre varios) */
.viz--target{ gap:20px; }
.target{ width:100%; max-width:300px; height:auto; }
.tp{ fill:rgba(255,255,255,.16); }
.tp--hit{ fill:var(--violet-bright); filter:drop-shadow(0 0 11px rgba(139,92,246,.95)); animation:hitPulse 2.6s ease-in-out infinite; }
@keyframes hitPulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
.tline{ stroke:rgba(167,139,250,.6); stroke-width:1.4; stroke-dasharray:5 6; animation:tdash 1.3s linear infinite; }
@keyframes tdash{ to{ stroke-dashoffset:-22; } }
.tret{ stroke:var(--violet-light); stroke-width:1.5; fill:none;
  transform-box:fill-box; transform-origin:center; animation:retSpin 7s linear infinite; }
@keyframes retSpin{ to{ transform:rotate(360deg); } }

/* tarjeta ancha en fila (05 · control) */
.gcard--row .gcard__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,72px);
  align-items:stretch; min-height:clamp(380px,40vw,520px); }
.gcard--row .gcard__rowtext{ display:flex; flex-direction:column; height:100%; justify-content:center; }
.gcard--row .gcard__title{ font-size:clamp(28px,3.4vw,46px); line-height:1.08; }
.gcard--row .gcard__viz{ margin-top:0; height:100%; min-height:auto; }

/* tarjeta Motor 360 */
.gcard--motor .gcard__inner{ display:grid; grid-template-columns:0.82fr 1fr; gap:clamp(24px,3vw,48px); align-items:center; }
.gcard--motor .gcard__desc{ text-wrap:balance; }
.motor__flow{ display:block; white-space:nowrap; font-size:13.5px; color:var(--violet-light); margin-bottom:8px; }
.gcard--motor .gcard__rowtext{ display:flex; flex-direction:column; justify-content:center; }
.gcard--motor .orbital{ margin:0; }
.gcard--motor .motor360__hint{ display:block; margin-top:12px; font-family:var(--mono); font-size:12.5px; color:var(--violet-light); letter-spacing:.02em; }

/* =========================================================
   MÉTODO v2 — números + nuevos vizs
   ========================================================= */
.claim__tag{ display:inline-flex; align-items:center; gap:11px; margin-bottom:16px; }
.claim__num{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--violet-light);
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  border:1px solid var(--line-2); border-radius:9px; background:rgba(124,58,237,.1);
  box-shadow:0 0 16px -4px rgba(124,58,237,.6); }

/* viz: docs (documentos del cliente — fuente del ADN) */
.viz--docs{ gap:24px; }
.doc-stack{ position:relative; width:250px; height:196px; }
.doc{ position:absolute; left:50%; top:50%; width:212px; padding:16px 16px 18px; border-radius:12px;
  background:linear-gradient(160deg, var(--surface-2), var(--bg-2)); border:1px solid var(--line);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.75), 0 0 30px -14px rgba(124,58,237,.5);
  display:flex; flex-direction:column; gap:9px; }
.doc__tag{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--violet-light); margin-bottom:4px; }
.doc__l{ height:7px; border-radius:4px; background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); }
.doc--back{ transform:translate(-50%,-50%) rotate(-9deg) translate(-30px,-8px); opacity:.45; }
.doc--mid{ transform:translate(-50%,-50%) rotate(6deg) translate(26px,2px); opacity:.7; }
.doc--front{ transform:translate(-50%,-50%) rotate(-2deg); z-index:3; animation:docFloat 5.5s ease-in-out infinite; }
.doc--front .doc__tag{ color:var(--violet-soft); }
@keyframes docFloat{ 50%{ transform:translate(-50%,-50%) rotate(-2deg) translateY(-7px); } }

/* viz: display-cards (documentos del cliente apilados en diagonal) */
.viz--dcards{ }
.dcards{ position:relative; width:360px; height:240px; }
.dcard{ position:absolute; top:24px; left:0; width:286px; height:104px; transform:skewY(-7deg);
  border-radius:14px; border:1.5px solid var(--line); background:rgba(19,17,31,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:13px 16px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .5s var(--ease), filter .5s, opacity .5s; }
.dcard::after{ content:""; position:absolute; right:-1px; top:-5%; height:110%; width:56%;
  background:linear-gradient(to left, var(--bg-1), transparent); pointer-events:none; }
.dcard__top{ display:flex; align-items:center; gap:9px; }
.dcard__ic{ width:26px; height:26px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.dcard__ic svg{ width:14px; height:14px; }
.dcard__title{ font-family:var(--disp); font-weight:600; font-size:15px; }
.dcard__desc{ font-size:14px; color:var(--tx); white-space:nowrap; }
.dcard__date{ font-family:var(--mono); font-size:11.5px; color:var(--tx-3); }
.dcard--1{ transform:skewY(-7deg) translate(0,0); filter:grayscale(1); opacity:.5; z-index:1; }
.dcard--2{ transform:skewY(-7deg) translate(36px,42px); filter:grayscale(1); opacity:.68; z-index:2; }
.dcard--3{ transform:skewY(-7deg) translate(72px,84px); z-index:3; }
.dcard--1 .dcard__ic, .dcard--2 .dcard__ic{ background:#2a2540; color:var(--tx-3); }
.dcard--1 .dcard__title, .dcard--2 .dcard__title{ color:var(--tx-3); }
.dcard--3 .dcard__ic{ background:var(--violet); color:#fff; box-shadow:0 0 16px -2px rgba(124,58,237,.85); }
.dcard--3 .dcard__title{ color:var(--violet-light); }

/* viz: brain (cerebro + conectores que se iluminan) */
.viz--brain{ gap:18px; }
.brain{ width:118px; height:118px; color:var(--violet-light);
  filter:drop-shadow(0 0 18px rgba(139,92,246,.7)); animation:brainPulse 3s ease-in-out infinite; }
@keyframes brainPulse{ 50%{ filter:drop-shadow(0 0 30px rgba(139,92,246,1)); } }
.brain__node{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--violet-bright);
  box-shadow:0 0 14px 3px rgba(139,92,246,.95); opacity:.25; animation:nodeBlink 2.6s ease-in-out infinite; }
.brain__node--1{ top:32%; left:27%; animation-delay:0s; }
.brain__node--2{ top:28%; right:29%; animation-delay:.65s; }
.brain__node--3{ bottom:34%; left:31%; animation-delay:1.3s; }
.brain__node--4{ bottom:30%; right:27%; animation-delay:1.95s; }
@keyframes nodeBlink{ 0%,100%{ opacity:.2; transform:scale(.7);} 50%{ opacity:1; transform:scale(1.35);} }

/* viz: radar (detectar señales inbound) */
.viz--signals{ gap:20px; }
.radar{ position:relative; width:168px; height:168px; border-radius:50%; }
.radar__ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(124,58,237,.3); }
.radar__ring--2{ inset:23%; border-color:rgba(124,58,237,.22); }
.radar__ring--3{ inset:46%; border-color:rgba(124,58,237,.16); }
.radar__cross{ position:absolute; background:rgba(124,58,237,.14); }
.radar__cross--h{ left:0; right:0; top:50%; height:1px; }
.radar__cross--v{ top:0; bottom:0; left:50%; width:1px; }
.radar__sweep{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(139,92,246,.55), rgba(139,92,246,.05) 50deg, transparent 80deg);
  animation:sweep 3.4s linear infinite; }
@keyframes sweep{ to{ transform:rotate(360deg);} }
.radar__blip{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--violet-light);
  box-shadow:0 0 14px 3px rgba(139,92,246,.95); opacity:0; animation:blip 3.4s ease-in-out infinite; }
.radar__blip--1{ top:25%; left:63%; animation-delay:.5s; }
.radar__blip--2{ top:59%; left:33%; animation-delay:1.8s; }
.radar__blip--3{ top:68%; left:61%; animation-delay:2.6s; }
@keyframes blip{ 0%,68%,100%{ opacity:0; transform:scale(.5);} 76%{ opacity:1; transform:scale(1.3);} 92%{ opacity:.4; } }

/* viz: reach (prospección outbound) */
.viz--reach{ gap:18px; }
.reach{ width:100%; max-width:300px; height:auto; overflow:visible; }
.reach__src{ fill:var(--violet); stroke:var(--violet-light); stroke-width:2;
  filter:drop-shadow(0 0 13px rgba(139,92,246,.95)); }
.reach__path{ stroke:rgba(167,139,250,.55); stroke-width:1.6; stroke-dasharray:5 7;
  animation:dash 1.4s linear infinite; }
.reach__path--2{ animation-delay:.45s; } .reach__path--3{ animation-delay:.9s; }
@keyframes dash{ to{ stroke-dashoffset:-24; } }
.reach__tgt{ fill:rgba(255,255,255,.07); stroke:var(--line); stroke-width:1.5; }
.reach__tgt--locked{ fill:var(--violet-bright); stroke:transparent;
  filter:drop-shadow(0 0 13px rgba(139,92,246,1)); animation:lockPulse 2s ease-in-out infinite; }
@keyframes lockPulse{ 50%{ filter:drop-shadow(0 0 22px rgba(139,92,246,1)); } }

/* viz: cycle (Motor 360 en círculo) */
.viz--cycle{ gap:0; }
.cycle{ position:relative; width:236px; height:236px; }
.cycle__ring{ position:absolute; inset:24px; border-radius:50%; border:1px dashed rgba(124,58,237,.32); }
.cycle__ring::after{ content:""; position:absolute; inset:-1px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(139,92,246,.7), transparent 110deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation:sweep 6s linear infinite; }
.cycle__center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--disp); font-weight:800; font-size:26px; color:var(--violet-soft);
  text-shadow:0 0 24px rgba(139,92,246,.85); }
.cycle__node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column;
  align-items:center; gap:6px; width:90px; text-align:center; }
.cycle__node i{ width:11px; height:11px; border-radius:50%; background:var(--violet-bright);
  box-shadow:0 0 12px 2px rgba(139,92,246,.85); }
.cycle__node b{ font-family:var(--mono); font-weight:500; font-size:10.5px; color:var(--tx-2); letter-spacing:.01em; }
.cycle__node--1{ top:6.5%;  left:50%; }
.cycle__node--2{ top:36.5%; left:91%; }
.cycle__node--3{ top:85%;   left:75%; }
.cycle__node--4{ top:85%;   left:25%; }
.cycle__node--5{ top:36.5%; left:9%; }
.cycle__node--5 i{ width:13px; height:13px; background:var(--violet-light); box-shadow:0 0 18px 5px rgba(167,139,250,1); }
.cycle__node--5 b{ color:var(--violet-soft); font-weight:600; }

/* =========================================================
   MOTOR 360 — órbita radial interactiva
   ========================================================= */
.motor360{ max-width:var(--maxw); margin:0 auto; padding:clamp(30px,5vh,60px) 28px clamp(50px,8vh,90px); }
.motor360__head{ text-align:center; max-width:720px; margin:0 auto; }
.motor360__head .claim__tag{ justify-content:center; }
.motor360__head .lede{ margin:16px auto 0; }
.motor360__hint{ display:block; margin-top:10px; font-family:var(--mono); font-size:12.5px; color:var(--violet-light); letter-spacing:.02em; }

.orbital{ margin-top:18px; }
.orbital__stage{ position:relative; width:100%; height:400px; display:flex; align-items:center; justify-content:center; }

.orbital__ring{ position:absolute; top:50%; left:50%; width:280px; height:280px; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid var(--line-2);
  box-shadow:inset 0 0 90px -30px rgba(124,58,237,.5); }

.orbital__center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; z-index:10; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--violet-light), var(--violet) 45%, #3b82f6 110%);
  box-shadow:0 0 44px -2px rgba(139,92,246,.85); animation:pulseGlow 2.6s ease-in-out infinite; }
@keyframes pulseGlow{ 50%{ box-shadow:0 0 60px 4px rgba(139,92,246,1); } }
.orbital__core{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.85); }
.orbital__ping{ position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(167,139,250,.55);
  animation:orbitalPing 2.6s cubic-bezier(0,0,.2,1) infinite; }
.orbital__ping--2{ inset:-15px; animation-delay:.7s; }
@keyframes orbitalPing{ 75%,100%{ transform:scale(1.7); opacity:0; } }

.orbital__node{ position:absolute; top:50%; left:50%; width:0; height:0; }
.orbital__dot{ position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line-2); color:var(--violet-light);
  transition:transform .35s var(--ease), background .35s, box-shadow .35s, border-color .35s; }
.orbital__dot svg{ width:19px; height:19px; }
.orbital__node:hover .orbital__dot{ border-color:var(--violet); box-shadow:0 0 22px -2px rgba(139,92,246,.85); }
.orbital__label{ position:absolute; left:0; top:30px; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--tx-3); transition:.3s; pointer-events:none; }
.orbital__node.is-related .orbital__dot{ background:rgba(167,139,250,.22); color:#fff; border-color:var(--violet-light);
  box-shadow:0 0 18px -2px rgba(139,92,246,.7); }
.orbital__node.is-active .orbital__dot{ transform:translate(-50%,-50%) scale(1.45); color:#fff; border-color:var(--violet-light);
  background:linear-gradient(180deg, var(--violet-bright), var(--violet-deep));
  box-shadow:0 0 30px -1px rgba(139,92,246,1); }
.orbital__node.is-active .orbital__label{ color:#fff; font-weight:600; top:40px; }

/* card */
.orbital__card{ position:absolute; left:0; top:60px; transform:translateX(-50%) translateY(-6px);
  width:250px; border-radius:14px; padding:16px 16px 18px; text-align:left;
  background:rgba(10,9,16,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2); box-shadow:0 24px 60px -20px rgba(0,0,0,.8), 0 0 50px -16px rgba(124,58,237,.6);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:5; }
.orbital__node.is-active .orbital__card{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.orbital__card-arrow{ position:absolute; top:-7px; left:50%; width:12px; height:12px; transform:translateX(-50%) rotate(45deg);
  background:rgba(10,9,16,.92); border-left:1px solid var(--line-2); border-top:1px solid var(--line-2); }
.orbital__card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.orbital__badge{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--violet-light); padding:4px 9px; border-radius:999px; border:1px solid var(--line-2); background:rgba(124,58,237,.12); }
.orbital__step{ font-family:var(--mono); font-size:10.5px; color:var(--tx-4); letter-spacing:.08em; }
.orbital__card-title{ font-family:var(--disp); font-weight:700; font-size:16px; margin-bottom:6px; }
.orbital__card-text{ font-size:13px; color:var(--tx-2); line-height:1.5; }
.orbital__energy{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:11.5px; color:var(--tx-3); }
.orbital__energy b{ font-family:var(--mono); color:var(--tx-2); font-weight:500; }
.orbital__bar{ height:4px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:6px; }
.orbital__bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, #3b82f6, var(--violet-bright)); }
.orbital__rel{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.orbital__rel-h{ display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--tx-3); margin-bottom:8px; }
.orbital__rel-btns{ display:flex; flex-wrap:wrap; gap:6px; }
.orbital__relbtn{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:11.5px; color:var(--tx-2);
  padding:4px 9px; border-radius:7px; border:1px solid var(--line); background:transparent; cursor:pointer; transition:.2s; }
.orbital__relbtn:hover{ border-color:var(--line-2); background:rgba(124,58,237,.12); color:#fff; }
.orbital__relarr{ color:var(--violet-light); font-size:11px; }

/* bola de luz que recorre el mismo círculo que los nodos (posición vía JS) */
.orbital__comet{ position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:var(--violet-light); z-index:5; pointer-events:none;
  box-shadow:0 0 18px 6px rgba(167,139,250,1), 0 0 5px #fff; transition:opacity .3s; }
/* cada nodo se ilumina cuando la bola pasa cerca */
.orbital__node.is-lit .orbital__dot{ border-color:var(--violet-light); color:#fff; background:rgba(167,139,250,.22);
  box-shadow:0 0 26px 0 rgba(139,92,246,.95); transform:translate(-50%,-50%) scale(1.18); }
.orbital__node.is-lit .orbital__label{ color:#fff; }

/* panel central al clicar — cabe dentro del anillo, no tapa los nodos */
.orbital__center{ transition:opacity .3s; }
.orbital__panel{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.94); z-index:50;
  width:248px; max-width:64%; padding:20px 22px; border-radius:16px; text-align:center; pointer-events:none;
  background:rgba(8,7,14,.97); border:1px solid var(--line-2);
  box-shadow:0 22px 60px -16px rgba(0,0,0,.85), 0 0 52px -12px rgba(124,58,237,.7);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease); }
.orbital__panel-title{ font-family:var(--disp); font-weight:600; font-size:16px; margin-bottom:8px; color:#fff; }
.orbital__panel-text{ font-size:13px; line-height:1.5; color:var(--tx-2); }
.orbital__stage.is-focused .orbital__panel{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.orbital__stage.is-focused .orbital__center,
.orbital__stage.is-focused .orbital__comet{ opacity:0; }

@media (max-width:560px){
  .orbital__stage{ height:440px; }
  .orbital__ring{ width:268px; height:268px; }
}

/* =========================================================
   PARA QUIÉN ES — 2 columnas (estilo Imagine)
   ========================================================= */
.forwho{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,14vh,170px) 28px; }
.forwho__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.forwho__title{ font-family:var(--disp); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(30px,3.6vw,46px); line-height:1.08; margin:14px 0 20px; }
.forwho__note{ color:var(--tx-2); font-size:17px; max-width:42ch; }
/* lista en rollback continuo (centro enfocado) */
.roll{ position:relative; height:clamp(260px,32vw,380px); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 40%, #000 60%, transparent 100%); }
.roll__track{ display:flex; flex-direction:column; animation:rollUp 16s linear infinite; }
@keyframes rollUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
.roll span{ font-family:var(--disp); font-weight:300; letter-spacing:-.02em; white-space:nowrap;
  font-size:clamp(34px,4.4vw,58px); line-height:1.75; color:#fff; }

/* =========================================================
   CIERRE / CTA dentro de la última sección
   ========================================================= */
.fourth__cta{ position:relative; text-align:center; margin-top:clamp(44px,7vh,72px);
  padding:clamp(50px,8vw,90px) 32px; border-radius:30px; border:1px solid var(--line-2); overflow:hidden;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(124,58,237,.3), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--bg-2)); }
.fourth__cta::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px -20px rgba(124,58,237,.4); border-radius:30px; }

/* =========================================================
   REVEAL animation
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* tarjetas: efecto scroll-tilt (3D) por elemento */
.gcard.reveal, .stat.reveal{ transform:perspective(900px) rotateX(26deg) translateY(64px) scale(.92);
  transform-origin:50% 100%; transition:opacity .95s var(--ease), transform 1s var(--ease); }
.gcard.reveal.in, .stat.reveal.in{ transform:perspective(900px) rotateX(0deg) translateY(0) scale(1); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:inline-flex; flex-direction:column; gap:5px; margin-left:auto;
    width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.03); }
  .nav__toggle span{ width:18px; height:2px; background:var(--tx); border-radius:2px; transition:.3s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav__mobile{ display:flex; flex-direction:column; gap:4px; max-height:0; overflow:hidden;
    padding:0 22px; background:rgba(7,6,12,.94); backdrop-filter:blur(14px);
    transition:max-height .35s var(--ease), padding .35s var(--ease); }
  .nav--open .nav__mobile{ max-height:360px; padding:14px 22px 22px; border-bottom:1px solid var(--line); }
  .nav--open.is-scrolled .nav__bar::before{ border-radius:16px 16px 0 0; }
  .nav__mobile a{ font-size:16px; color:var(--tx-2); padding:11px 4px; }
  .nav__mobile a:last-child{ margin-top:10px; }
  .claim{ grid-template-columns:1fr; gap:28px; }
  .claim:nth-child(even) .claim__text{ order:0; }
  .claim__visual{ min-height:240px; }
  .stats{ grid-template-columns:1fr; }
  .forwho__inner{ grid-template-columns:1fr; gap:28px; }
  .forwho__list{ mask-image:none; -webkit-mask-image:none; }
  .bento__grid{ grid-template-columns:1fr; }
  .bento__cell--b{ border-left:none; border-top:1px solid var(--line); }
  .method__grid{ grid-template-columns:1fr; gap:24px; }
  .gcard--row .gcard__inner{ grid-template-columns:1fr; gap:24px; min-height:auto; }
  .gcard--row .gcard__title{ margin-top:0; }
  .gcard--motor .gcard__inner{ grid-template-columns:1fr; gap:24px; }
  .gcard__inner{ padding:36px 26px; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .promise__cols{ grid-template-columns:1fr; }
  .flow__node:not(:last-child)::after{ content:"↓"; right:50%; top:auto; bottom:-22px; transform:translateX(50%); }
  .hero__actions{ flex-direction:column; }
  .hero__actions .btn{ width:100%; }
}

/* =========================================================
   FIX MÓVIL — desbordamiento horizontal (texto cortado).
   Causa: los items de grid/flex tienen min-width:auto por
   defecto y, al contener diagramas de ancho fijo (.dcards 360px,
   .motor__flow en nowrap…), ensanchaban las tarjetas más que la
   pantalla → el body crecía a ~472px y cortaba el texto.
   ========================================================= */
@media (max-width:860px){
  html, body{ overflow-x:clip; }                       /* red de seguridad: nunca scroll lateral */
  .method__grid, .gcard, .gcard__inner, .gcard__rowtext,
  .gcard__viz, .viz, .motor, .stats, .stats__grid, .stat{ min-width:0; }  /* dejar encoger los tracks */
  .gcard__viz{ overflow:hidden; }                      /* diagramas decorativos no ensanchan la tarjeta */
  .motor__flow{ white-space:normal; }                  /* el flow envuelve en vez de cortarse */
  .dcard__desc{ white-space:normal; }
}
@media (max-width:480px){
  .viz--dcards .dcards{ transform:scale(.74); transform-origin:center; }  /* diagrama fijo: escalar para que quepa */
  .stats__grid{ gap:14px; }
  .stat{ padding:24px 20px; }                          /* que las 2 métricas quepan en pantalla */
}

/* =========================================================
   AJUSTES MÓVIL v2 — feedback de revisión (solo teléfono)
   ========================================================= */
@media (max-width:600px){
  /* Hero: aplanar el "planeta" (en móvil el círculo quedaba más alto
     que ancho = parecía una montaña). Lo hacemos ancho y bajo como en
     escritorio → arco suave. */
  .hero{ padding-bottom:clamp(120px,20vh,180px); }
  .hero__horizon{ width:212%; height:420px; top:calc(100% - 78px);
    background:radial-gradient(closest-side, var(--bg) 76%, rgba(139,92,246,.4) 90%, rgba(196,181,253,.95) 100%); }

  /* Aurora: el canvas de beams (blur en canvas) se ve bugueado en Safari
     móvil → lo ocultamos y dejamos una aurora estática por CSS. */
  .cosmos__beams{ display:none; }
  .cosmos{ background:
    radial-gradient(58% 40% at 80% 14%, rgba(124,58,237,.18), transparent 70%),
    radial-gradient(55% 38% at 16% 46%, rgba(99,102,241,.12), transparent 72%),
    radial-gradient(ellipse at bottom, #141031 0%, #08070f 58%, #050409 100%); }

  /* (Radar 03 y Tu control 05 se ajustan al FINAL del archivo: sus reglas base
     están más abajo y por orden de cascade pisaban a estas. Ver bloque v4.) */

  /* Motor 360: iconos más pequeños y menos espacio vertical */
  .orbital{ margin-top:2px; }
  .orbital__stage{ height:300px; }
  .orbital__dot{ width:36px; height:36px; }
  .orbital__dot svg{ width:15px; height:15px; }
  .orbital__center{ width:52px; height:52px; }
  .orbital__core{ width:24px; height:24px; }
  .orbital__label{ font-size:10px; top:24px; }
  .orbital__node.is-active .orbital__label{ top:32px; }

  /* Roles (Founders/Agencias/Equipos): más grandes */
  .roll{ height:288px; }
  .roll span{ font-size:46px; line-height:1.55; }

  /* CTA final (95%): titular un poco más pequeño */
  .cta__title{ font-size:23px; line-height:1.22; }

  /* Menos padding superior en secciones → al navegar el título no queda
     enterrado y la sección se centra mejor en pantalla. */
  .method, .forwho, .proof, .motor{ padding-top:64px; }
}

/* =========================================================
   Botón de sección (CTA repetido al final de cada sección)
   ========================================================= */
.section-cta{ display:flex; justify-content:center; margin-top:clamp(44px,7vh,80px); }

/* =========================================================
   PRELOADER (pantalla de carga, adaptado a marca)
   ========================================================= */
.preloader{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, #100b24 0%, #07060c 70%);
  transition:opacity .6s var(--ease), visibility .6s var(--ease); }
.preloader--hide{ opacity:0; visibility:hidden; }
.loader-wrapper{ position:relative; display:flex; align-items:center; justify-content:center; gap:1px;
  width:150px; height:150px; font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:.06em; }
.loader-letter{ display:inline-block; color:#fff; opacity:.4; z-index:2;
  animation:loader-letter-anim 2.6s infinite; }
.loader-letter:nth-child(1){ animation-delay:0s; }
.loader-letter:nth-child(2){ animation-delay:.1s; }
.loader-letter:nth-child(3){ animation-delay:.2s; }
.loader-letter:nth-child(4){ animation-delay:.3s; }
.loader-letter:nth-child(5){ animation-delay:.4s; }
.loader-letter:nth-child(6){ animation-delay:.5s; }
.loader-letter:nth-child(7){ animation-delay:.6s; }
.loader-letter:nth-child(8){ animation-delay:.7s; }
.loader-letter:nth-child(9){ animation-delay:.8s; }
.loader{ position:absolute; top:0; left:0; width:150px; height:150px; border-radius:50%; z-index:1;
  animation:loader-rotate 2s linear infinite; }
@keyframes loader-rotate{
  0%{ transform:rotate(90deg); box-shadow:0 10px 20px 0 #fff inset, 0 20px 30px 0 #8b5cf6 inset, 0 60px 60px 0 #471eec inset; }
  50%{ transform:rotate(270deg); box-shadow:0 10px 20px 0 #fff inset, 0 20px 10px 0 #7c3aed inset, 0 40px 60px 0 #311e80 inset; }
  100%{ transform:rotate(450deg); box-shadow:0 10px 20px 0 #fff inset, 0 20px 30px 0 #8b5cf6 inset, 0 60px 60px 0 #471eec inset; }
}
@keyframes loader-letter-anim{
  0%,100%{ opacity:.4; transform:translateY(0); }
  20%{ opacity:1; transform:scale(1.15); }
  40%{ opacity:.7; transform:translateY(0); }
}

/* =========================================================
   VIZ v3 — radar (red ICP), mensaje (prospección), control (UI + cursor)
   ========================================================= */
/* Señales · radar de red con persona en foco */
.viz--radar2{ gap:18px; }
.radar2{ position:relative; width:340px; max-width:100%; }
.radar2__svg{ width:100%; height:auto; display:block; color:var(--violet-light); position:relative; z-index:2; }
.r2-orbit{ stroke:rgba(124,58,237,.20); stroke-width:1; stroke-dasharray:3 7; fill:none; }
.r2-link{ stroke:rgba(167,139,250,.18); stroke-width:1; }
.r2-link--hot{ stroke:rgba(167,139,250,.45); }
.r2-pulse{ fill:#e3d9ff; filter:drop-shadow(0 0 6px rgba(167,139,250,1)); }
.r2-pulse--soft{ fill:#c9b6ff; filter:drop-shadow(0 0 5px rgba(139,92,246,.85)); }
.r2-noden{ fill:rgba(16,14,26,.9); stroke:rgba(255,255,255,.22); stroke-width:1.4; }
/* nodos-perfil (caritas) */
.r2-pnode{ fill:rgba(16,14,26,.92); stroke:rgba(255,255,255,.3); stroke-width:1.4; }
.r2-pnode--hot{ fill:rgba(124,58,237,.16); stroke:var(--violet-bright); stroke-width:1.7; }
.r2-pic{ fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.r2-pic--hot{ stroke:#fff; }
.r2-dot{ fill:rgba(255,255,255,.45); }
.r2-noden--hot{ fill:rgba(124,58,237,.18); stroke:var(--violet-bright); stroke-width:1.6; }
.r2-dot--hot{ fill:#fff; }
.r2-hot{ filter:drop-shadow(0 0 9px rgba(139,92,246,.95)); animation:r2blink 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes r2blink{ 0%,100%{ opacity:.62; } 50%{ opacity:1; } }
.r2-core{ fill:rgba(124,58,237,.16); stroke:var(--violet); stroke-width:1.5; filter:drop-shadow(0 0 14px rgba(124,58,237,.65)); }
.r2-person{ color:#fff; }
.r2-bracket{ stroke:var(--violet-light); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Prospección · tarjeta de mensaje personalizado (Concepto C) */
.viz--msg{ gap:18px; }
.msgcard{ position:relative; width:300px; max-width:100%; padding:20px; border-radius:18px;
  background:linear-gradient(160deg, rgba(19,17,31,.6), rgba(10,10,15,.3)); border:1px solid var(--line-2);
  box-shadow:0 0 44px -16px rgba(124,58,237,.6); }
.msgcard__send{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--violet-bright),var(--violet-deep));
  box-shadow:0 0 16px -2px rgba(139,92,246,.9); animation:sendPulse 2.6s ease-in-out infinite; }
.msgcard__send svg{ width:16px; height:16px; }
@keyframes sendPulse{ 50%{ transform:translateY(-2px); box-shadow:0 0 26px 0 rgba(139,92,246,1); } }
.msgcard__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.msgcard__avatar{ width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); color:var(--violet-light); background:rgba(124,58,237,.1); }
.msgcard__avatar svg{ width:24px; height:24px; }
.msgcard__lines{ display:flex; flex-direction:column; gap:8px; flex:1; }
.ml{ height:8px; border-radius:5px; background:rgba(255,255,255,.12); }
.ml--hot{ background:linear-gradient(90deg, var(--violet-bright), var(--violet)); }
.msgcard__input{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); }
.msgcard__mail{ color:var(--violet-light); display:flex; } .msgcard__mail svg{ width:18px; height:18px; }
.msgcard__typing{ font-size:13.5px; color:var(--tx-2); white-space:nowrap; }
.msgcard__caret{ display:inline-block; width:1.5px; height:14px; background:var(--violet-light); margin-left:1px; vertical-align:middle; animation:caretBlink 1s step-end infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }

/* Control · ventana de software en perspectiva + cursor Apple que aprueba */
.viz--ctrl{ position:relative; gap:18px; perspective:1100px; }
/* fuerza altura (vence a .gcard__viz .viz{min-height:auto}) para que la tarjeta no se corte arriba/abajo */
.gcard__viz .viz--ctrl{ min-height:330px; padding:30px 0; }
/* pila de borradores: la tarjeta del frente define el tamaño; las "ghost" van detrás */
.ctrlstack{ position:relative; width:288px; max-width:100%; }
/* mismo estilo de tarjeta que las display-cards del ADN: borde 1.5px, vidrio, skewY(7deg) */
.ctrlcard{ position:relative; width:288px; max-width:100%; border-radius:14px; overflow:hidden;
  transform:skewY(7deg); transform-origin:center;
  border:1.5px solid var(--line); background:rgba(19,17,31,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.75), 0 0 30px -14px rgba(124,58,237,.5); }
.ctrlcard--front{ z-index:3; }
/* borradores en cola detrás (peek arriba-izquierda) — grises y atenuados */
.ctrlcard--ghost{ position:absolute; inset:0; pointer-events:none;
  box-shadow:0 14px 36px -18px rgba(0,0,0,.7); }
/* como las tarjetas del ADN: translúcidas (se transparenta la de detrás) + grises + un pelín de blur */
.ghost--1{ transform:skewY(7deg) translate(-20px,-24px) scale(.985); opacity:.68; z-index:2; filter:grayscale(1) blur(.6px); }
.ghost--2{ transform:skewY(7deg) translate(-40px,-48px) scale(.97); opacity:.46; z-index:1; filter:grayscale(1) blur(1.1px); }
.ctrlcard__bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03); }
.ctrlcard__bar .tl{ width:9px; height:9px; border-radius:50%; }
.tl--r{ background:#ff5f57; } .tl--y{ background:#febc2e; } .tl--g{ background:#28c840; }
.ctrlcard__title{ margin-left:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--tx-3); }
.ctrlcard__body{ padding:18px; }
.ctrlcard__lines{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.cl{ height:8px; border-radius:5px; background:rgba(255,255,255,.1); }
.ctrlcard__approve{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:600; font-size:13px; color:#fff;
  padding:9px 18px; border-radius:10px; background:linear-gradient(180deg,var(--violet-bright),var(--violet-deep));
  animation:approveFlash 3.4s ease-in-out infinite; }
@keyframes approveFlash{ 0%,60%,100%{ box-shadow:0 0 0 0 rgba(139,92,246,0); } 68%{ box-shadow:0 0 0 7px rgba(139,92,246,.25); } 76%{ box-shadow:0 0 0 0 rgba(139,92,246,0); } }
.ctrl__cursor{ position:absolute; left:32.3%; top:61.3%; z-index:6;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.8)); animation:cursorMove 3.4s ease-in-out infinite; }
.ctrl__cursor svg{ width:25px; height:31px; display:block; }
@keyframes cursorMove{
  0%{ transform:translate(50px,-46px) scale(1); opacity:0; }
  16%{ opacity:1; }
  54%{ transform:translate(0,0) scale(1); opacity:1; }
  68%{ transform:translate(0,2px) scale(.8); }
  78%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(0,0); opacity:1; }
}

/* =========================================================
   Botones · luz que recorre el borde + slide-up al hover
   ========================================================= */
@property --btn-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.btn--solid{ position:relative; overflow:hidden; isolation:isolate; }
.btn--solid::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none; z-index:1;
  background:conic-gradient(from var(--btn-a), transparent 0deg 250deg, rgba(255,255,255,.95) 300deg, transparent 350deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:btnLight 3.4s linear infinite; }
@keyframes btnLight{ to{ --btn-a:360deg; } }
/* glow que sigue el cursor al hacer hover */
.btn--solid > span{ position:relative; z-index:2; }
.btn--solid::after{ content:""; position:absolute; left:var(--mx,50%); top:var(--my,50%); width:190px; height:190px; z-index:0;
  border-radius:50%; transform:translate(-50%,-50%) scale(0); pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.5), transparent 60%);
  opacity:0; transition:opacity .35s var(--ease), transform .45s var(--ease); }
.btn--solid:hover::after{ opacity:.9; transform:translate(-50%,-50%) scale(1); }

/* =========================================================
   Señales · radar clásico "Concepto B" (persona detectada)
   ========================================================= */
.viz--radarb{ gap:18px; }
.radarb{ position:relative; width:240px; height:240px; }
.radarb__ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(124,58,237,.24); }
.radarb__ring--1{ width:100%; height:100%; }
.radarb__ring--2{ width:67%; height:67%; }
.radarb__ring--3{ width:34%; height:34%; }
.radarb__cross{ position:absolute; background:rgba(124,58,237,.14); }
.radarb__cross--h{ left:4%; right:4%; top:50%; height:1px; }
.radarb__cross--v{ top:4%; bottom:4%; left:50%; width:1px; }
.radarb__sweep{ position:absolute; inset:0; border-radius:50%; animation:sweep 4.5s linear infinite;
  background:conic-gradient(from 0deg, rgba(139,92,246,.5), rgba(139,92,246,.05) 45deg, transparent 85deg); }
.radarb__core{ position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:var(--violet-light); box-shadow:0 0 10px rgba(139,92,246,.95); }
/* personitas que aparecen a medida que el radar gira (detección dinámica) */
.radarb__hit{ position:absolute; width:30px; height:30px; border-radius:50%; z-index:2; opacity:0;
  display:flex; align-items:center; justify-content:center; color:#fff; border:1.5px solid var(--violet-light);
  background:rgba(124,58,237,.28); transform:translate(-50%,-50%) scale(.4);
  animation:radarHit 4.5s linear infinite; }
.radarb__hit svg{ width:15px; height:15px; }
/* el "pop" ocurre al 4% del ciclo (mismo periodo 4.5s que el barrido);
   con el delay calculado por ángulo, cada persona aparece justo cuando el haz la cruza */
@keyframes radarHit{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); box-shadow:0 0 0 0 rgba(139,92,246,0); }
  4%{ opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 22px -2px rgba(139,92,246,1); }
  16%{ opacity:.95; transform:translate(-50%,-50%) scale(1); }
  30%{ opacity:0; transform:translate(-50%,-50%) scale(.9); }
  100%{ opacity:0; }
}
/* delay = (ángulo/360)·4.5s − 0.18s, ángulo en sentido horario desde arriba */
.radarb .h1{ top:22%; left:60%; animation-delay:.07s; }  /* ~20°  */
.radarb .h2{ top:40%; left:80%; animation-delay:.72s; }  /* ~72°  */
.radarb .h3{ top:72%; left:66%; animation-delay:1.62s; } /* ~144° */
.radarb .h4{ top:74%; left:34%; animation-delay:2.49s; } /* ~214° */
.radarb .h5{ top:46%; left:20%; animation-delay:3.29s; } /* ~278° */
.radarb .h6{ top:24%; left:40%; animation-delay:4.06s; } /* ~339° */

/* =========================================================
   AJUSTES MÓVIL v4 — overrides que DEBEN ir AQUÍ (tras las reglas
   base de las viz). Estaban antes en el bloque v2 pero, con igual
   especificidad, las reglas base posteriores los pisaban (cascade
   por orden de fuente). Por eso "Tu control" seguía a 288px.
   ========================================================= */
@media (max-width:600px){
  /* Radar (03 · Señales): más pequeño */
  .radarb{ width:166px; height:166px; }
  .radarb__hit{ width:24px; height:24px; }
  .radarb__hit svg{ width:12px; height:12px; }

  /* Tu control (05): MISMO enfoque que las tarjetas del paso 01 (ADN): escalamos
     la PILA como un grupo (no el ancho) → proporciones del diseño intactas. */
  .gcard__viz .viz--ctrl{ min-height:auto; padding:46px 0 10px; transform:none; overflow:visible; }
  .viz--ctrl .ctrlstack{ transform:scale(.78); transform-origin:center; }
  /* cursor visible también en móvil, reposicionado y reducido para la pila escalada */
  .viz--ctrl .ctrl__cursor{ display:block; left:28.9%; top:70.4%; }
  .viz--ctrl .ctrl__cursor svg{ width:20px; height:25px; }
}