:root{
  --ink:#050807;--surface:#0C1210;--surface2:#111917;--line:#1B2522;
  --text:#EAF0EC;--muted:#7B8A82;--accent:#D1FF00;--wa:#25D366;--cyan:#53BDEB;--rose:#FF7A85;--red:#FF5C5C;
  --fd:'Bricolage Grotesque','Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;--fb:'Instrument Sans',sans-serif;--fm:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);--pad:clamp(20px,4vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:CLIP (no 'hidden'): 'hidden' en el body lo convierte en contenedor de scroll
   y ROMPE position:sticky en iOS Safari — los bloques "ahogando"/manifiesto dejaban de
   fijarse y "bajaban de corrido". 'clip' contiene el scroll horizontal SIN crear contenedor
   de scroll, así el sticky sigue funcionando en iPhone. */
html{overflow-x:clip}
body{background:var(--ink);color:var(--text);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--accent);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
section{position:relative;padding:clamp(88px,11vw,150px) var(--pad)}
h2{font-family:var(--fd);font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:1.03;letter-spacing:-.03em}
.dim{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:7px 14px;background:rgba(255,255,255,.02)}
.hero .eyebrow{display:table;margin-left:auto;margin-right:auto}   /* no-ES: el pill compartía línea con el título y lo empujaba a la derecha */
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);font-style:normal}
.lead{color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:52ch}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.mini{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rv{opacity:0;transform:translateY(24px)}
.btn{display:inline-block;font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  padding:14px 26px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.3s var(--ease);text-align:center}
.btn-1{background:var(--accent);color:var(--ink)}
.btn-1:hover{box-shadow:0 0 30px -6px var(--accent)}
.btn-2{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--text);backdrop-filter:blur(8px)}
.btn-2:hover{border-color:var(--muted)}
.final{padding-bottom:clamp(110px,14vw,180px)}

/* ═══ BORDER BEAM ═══ */
@property --ang{syntax:'<angle>';initial-value:0turn;inherits:false}
.beam{position:relative;overflow:hidden}
.beam::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang), transparent 0turn, transparent .78turn, var(--accent) .88turn, var(--cyan) .95turn, transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spinAng 6s linear infinite;pointer-events:none}
@keyframes spinAng{to{--ang:1turn}}

/* ═══ NAV ═══ */
nav{position:fixed;top:0;left:0;right:0;z-index:60;height:66px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);backdrop-filter:blur(18px);background:rgba(5,8,7,.72);border-bottom:1px solid transparent;transition:.4s}
nav.on{border-bottom-color:var(--line)}
/* CELULAR: fondo casi sólido — el blur puede no renderizar en móvil y el
   contenido se leía DETRÁS del logo en 6 páginas (hallazgo crítico de auditoría). */
@media(max-width:960px){nav{background:rgba(5,8,7,.97)}}
@media(max-width:640px){.nav-entrar{display:none}}   /* en celular 'Entrar' vive en el menú de 3 puntos, evita choque con el logo */
.logo{font-family:var(--fd);font-weight:800;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.logo .tk{display:inline-flex;color:var(--cyan)}.logo svg{width:15px;height:15px}.logo svg:last-child{margin-left:-8px}
.nlinks{display:flex;gap:24px}
.nlinks a{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nlinks a:hover{color:var(--accent)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:4px;padding:6px}
.burger span{width:20px;height:2px;background:var(--text);display:block}
@media(max-width:960px){.nlinks{display:none}.burger{display:flex}}
.mmenu{position:fixed;inset:0;z-index:59;background:var(--ink);padding:90px var(--pad) 40px;transform:translateY(-102%);
  transition:transform .5s var(--ease);overflow-y:auto}
.mmenu.open{transform:translateY(0)}
.mmenu a{display:block;font-family:var(--fd);font-weight:600;font-size:23px;padding:15px 0;border-bottom:1px solid var(--line)}
.mmenu a small{display:block;font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}

/* ═══ HERO ═══ */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:100px var(--pad) 60px;position:relative;overflow:hidden}
#dots{position:absolute;inset:0;z-index:0}
.shape{position:absolute;border-radius:999px;filter:blur(2px);opacity:.42;border:1px solid rgba(255,255,255,.14);
  animation:drift 12s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-22px) rotate(var(--r))}}
.hero-in{position:relative;z-index:3;max-width:940px}
h1{font-family:var(--fd);font-weight:800;font-size:clamp(44px,7.6vw,104px);line-height:.94;letter-spacing:-.045em;margin:26px 0 0}
h1 .g{background:linear-gradient(100deg,var(--accent),var(--wa) 50%,var(--cyan));-webkit-background-clip:text;background-clip:text;
  color:transparent;background-size:200% auto;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200% center}}
.hero .lead{margin:26px auto 0;max-width:46ch}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap}
/* glow de marca detrás del titular (z-index 1: sobre el canvas, bajo el texto) */
.hero::after{content:'';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(760px,90vw);height:min(760px,90vw);background:radial-gradient(circle,rgba(209,255,0,.09),transparent 62%);filter:blur(20px);z-index:1;pointer-events:none}
/* chip "bot activo" bajo los CTA */
.hero-live{position:relative;z-index:3;margin-top:22px;display:inline-flex;gap:9px;align-items:center;font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:8px 15px;background:rgba(209,255,0,.03)}
.hl-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(209,255,0,.5);animation:hlPulse 2s infinite}
@keyframes hlPulse{0%{box-shadow:0 0 0 0 rgba(209,255,0,.5)}70%{box-shadow:0 0 0 8px rgba(209,255,0,0)}100%{box-shadow:0 0 0 0 rgba(209,255,0,0)}}
.avs{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:38px}
.av-row{display:flex}
.av{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);margin-left:-10px;object-fit:cover}
.av:first-child{margin-left:0}
.av.more{display:grid;place-items:center;background:var(--surface2);color:var(--accent);font-family:var(--fm);font-size:10px;font-weight:700}
.avs p{font-family:var(--fm);font-size:11px;color:var(--muted);letter-spacing:.05em;text-align:left}
.avs p b{color:var(--accent);font-weight:500}

/* ═══ MARQUEE ═══ */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;position:relative;background:var(--ink)}
.mq::before,.mq::after{content:'';position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
/* SIN animación CSS: la mueve JS (rAF). En iOS con Bajo Consumo las
   animaciones CSS se congelan; las de JS sí corren. will-change para que
   el navegador la componga aparte y no parpadee. */
.mq-in{display:flex;gap:16px;width:max-content;will-change:transform}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-in .pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:11px 18px;
  background:var(--surface);white-space:nowrap;font-size:13px;color:var(--muted)}
.mq-in .pill b{color:var(--text);font-weight:600}

/* ═══ PANEL INTERACTIVO ═══ */
.cs{perspective:1200px}
.cs-card{transform-style:preserve-3d;transform:rotateX(22deg) scale(.92);transition:transform .1s linear;
  max-width:1020px;margin:44px auto 0;border-radius:22px;border:1px solid var(--line);background:var(--surface);
  padding:10px;box-shadow:0 50px 100px -30px rgba(0,0,0,.9)}
.cs-shot{border-radius:15px;overflow:hidden;background:var(--ink);min-height:440px;display:flex;flex-direction:column;text-align:left}
.cs-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.cs-bar i{width:9px;height:9px;border-radius:50%;background:#31403a;font-style:normal}
.cs-bar span{margin-left:10px;font-family:var(--fm);font-size:10px;color:var(--muted)}
.cs-body{flex:1;display:grid;grid-template-columns:190px 1fr;gap:1px;background:var(--line)}
.cs-side{background:var(--ink);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.cs-side b{font-family:var(--fm);font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;padding-left:9px}
.cs-side button{background:none;border:none;text-align:left;font-family:var(--fb);font-size:12.5px;color:var(--muted);
  padding:9px 10px;border-radius:8px;cursor:pointer;transition:.2s}
.cs-side button:hover{background:rgba(255,255,255,.04);color:var(--text)}
.cs-side button.act{background:rgba(209,255,0,.11);color:var(--accent);font-weight:600}
.cs-main{background:var(--ink);padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start}
.kpi{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface)}
.kpi u{display:block;text-decoration:none;font-family:var(--fm);font-size:9px;color:var(--muted);letter-spacing:.1em}
.kpi s{display:block;text-decoration:none;font-family:var(--fd);font-weight:800;font-size:26px;margin-top:5px;color:var(--accent)}
.chart{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface);height:150px;display:flex;align-items:flex-end;gap:7px}
.chart i{flex:1;background:linear-gradient(180deg,var(--accent),rgba(209,255,0,.15));border-radius:4px 4px 0 0;font-style:normal;
  animation:grow .8s var(--ease) backwards}
@keyframes grow{from{height:0!important}}
.tbl{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.tbl .r{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);
  font-size:12.5px;align-items:center;animation:fadeIn .5s var(--ease) backwards}
@keyframes fadeIn{from{opacity:0;transform:translateX(-12px)}}
.tbl .r:last-child{border:0}
.tbl .r .who{display:flex;align-items:center;gap:9px}
.tbl .r img{width:26px;height:26px;border-radius:50%}
.tbl .r .tag{font-family:var(--fm);font-size:9px;padding:3px 8px;border-radius:99px;letter-spacing:.06em}
.tag.g{background:rgba(37,211,102,.14);color:var(--wa)}
.tag.y{background:rgba(209,255,0,.14);color:var(--accent)}
.tag.b{background:rgba(83,189,235,.14);color:var(--cyan)}
.tbl .r .amt{font-family:var(--fm);font-size:12px;color:var(--muted)}
@media(max-width:760px){.cs-body{grid-template-columns:1fr}.cs-side{flex-direction:row;overflow-x:auto;gap:6px}
  .cs-side b{display:none}.cs-side button{white-space:nowrap}.cs-main{grid-template-columns:repeat(2,1fr)}}

/* ═══ ANIMATED BEAM ═══ */
.beam-wrap{max-width:900px;margin:56px auto 0;position:relative;height:340px}
.beam-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.bp{fill:none;stroke:var(--line);stroke-width:1.6}
.bf{fill:none;stroke:url(#bg1);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:70 260;animation:flow 3s linear infinite}
@keyframes flow{to{stroke-dashoffset:-330}}
.node{position:absolute;width:64px;height:64px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font-size:26px;z-index:2;box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
.node.hub{width:84px;height:84px;border-color:var(--accent);box-shadow:0 0 44px -8px rgba(209,255,0,.4);animation:hubBreathe 3.2s var(--ease) infinite}
@keyframes hubBreathe{0%,100%{box-shadow:0 0 34px -10px rgba(209,255,0,.42)}50%{box-shadow:0 0 66px -4px rgba(209,255,0,.68)}}
.node small{position:absolute;bottom:-24px;font-family:var(--fm);font-size:9px;color:var(--muted);letter-spacing:.08em;white-space:nowrap}
@media(max-width:760px){.beam-wrap{height:420px}.node{width:52px;height:52px;font-size:21px}.node.hub{width:66px;height:66px}}

/* ═══ ORBITING CIRCLES ═══ */
.orb{position:relative;width:min(440px,90vw);aspect-ratio:1;margin:52px auto 0;display:grid;place-items:center}
.orb .ring{position:absolute;border:1px dashed rgba(255,255,255,.08);border-radius:50%}
.orb-core{padding:22px 26px;border-radius:22px;background:var(--surface);border:1px solid var(--accent);white-space:nowrap;
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--accent);
  box-shadow:0 0 60px -10px rgba(209,255,0,.45);z-index:3}
.orb .sat{position:absolute;top:50%;left:50%;width:0;height:0}
.orb .sat i{position:absolute;width:46px;height:46px;margin:-23px;border-radius:13px;background:var(--surface2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:20px;font-style:normal}
@keyframes orbit{from{transform:rotate(0) translateX(var(--rad)) rotate(0)}to{transform:rotate(360deg) translateX(var(--rad)) rotate(-360deg)}}
@keyframes orbitR{from{transform:rotate(360deg) translateX(var(--rad)) rotate(-360deg)}to{transform:rotate(0) translateX(var(--rad)) rotate(0)}}

/* ═══ GLOBO 3D ═══ */
.globe-wrap{width:min(600px,90vw);aspect-ratio:1;margin:36px auto 0;position:relative;cursor:grab;
  display:grid;place-items:center}
.globe-wrap:active{cursor:grabbing}
#globe{display:block;max-width:100%;max-height:100%}

/* ═══ SCROLL VELOCITY ═══ */
.vel{overflow:hidden;padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.vel-in{display:flex;gap:34px;width:max-content;white-space:nowrap}
/* Antes el contorno era var(--line) (#1B2522, casi negro) -> invisible.
   Ahora un contorno claro que SÍ se ve sobre fondo oscuro. */
.vel-in span{font-family:var(--fd);font-weight:800;font-size:clamp(34px,5.4vw,74px);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px rgba(234,240,236,.55)}
.vel-in span:nth-child(even){color:var(--accent);-webkit-text-stroke:0}

/* ═══ 10 SERVICIOS + LENS ═══ */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:54px}
.svc{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;position:relative;
  transition:.35s var(--ease);cursor:pointer;display:block}
.svc:hover{border-color:rgba(209,255,0,.4);transform:translateY(-4px)}
.svc-img{height:132px;position:relative;overflow:hidden;background:var(--surface2)}
.svc-img img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .6s var(--ease),opacity .35s}
.svc:hover .svc-img img{transform:scale(1.12);opacity:.75}
.svc-img .no{position:absolute;top:12px;left:12px;font-family:var(--fm);font-size:10px;color:var(--accent);
  background:rgba(5,8,7,.75);padding:4px 9px;border-radius:7px;backdrop-filter:blur(4px)}
.svc-img .ic{position:absolute;bottom:-16px;right:14px;width:44px;height:44px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;font-size:20px}
.svc-b{padding:22px 20px 20px}
.svc-b h3{font-family:var(--fd);font-weight:600;font-size:17px;margin-bottom:8px}
.svc-b p{font-size:12.5px;color:var(--muted);line-height:1.55;min-height:56px}
.svc-b .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.svc-b .tags span{font-family:var(--fm);font-size:9px;color:var(--muted);border:1px solid var(--line);padding:3px 8px;border-radius:6px}
/* LENS (magicui) — lupa al pasar */
.lens{position:absolute;width:130px;height:130px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;
  opacity:0;transition:opacity .25s;z-index:4;background-repeat:no-repeat;box-shadow:0 0 34px -6px rgba(209,255,0,.5)}
.svc:hover .lens{opacity:1}

/* ═══ HERO PARALLAX ═══ */
.px-sec{overflow:hidden;padding-bottom:clamp(60px,8vw,110px)}
.px-head{max-width:640px}
.px-rows{margin-top:44px;display:flex;flex-direction:column;gap:16px;transform:rotateX(11deg) rotateZ(-3deg);transform-origin:center}
.px-row{display:flex;gap:16px;width:max-content}
.px-card{width:270px;height:170px;border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;flex-shrink:0;
  transition:transform .4s var(--ease)}
.px-card:hover{transform:translateY(-10px)}
.px-card img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .35s}
.px-card:hover img{opacity:.85}
.px-card b{position:absolute;left:14px;bottom:12px;font-family:var(--fd);font-weight:600;font-size:15px;z-index:2}
.px-card::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(5,8,7,.9))}

/* ═══ CODEFORGE ═══ */
.code{max-width:940px;margin:48px auto 0;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:#0A0E0D;text-align:left}
.code-top{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--line)}
.code-top i{width:10px;height:10px;border-radius:50%;font-style:normal}
.code-top i:nth-child(1){background:#FF5F57}.code-top i:nth-child(2){background:#FEBC2E}.code-top i:nth-child(3){background:#28C840}
.code-top span{margin-left:12px;font-family:var(--fm);font-size:11px;color:var(--muted)}
.code pre{margin:0;padding:22px 20px;font-family:var(--fm);font-size:12.5px;line-height:1.85;overflow-x:auto;color:#8FA69B;text-align:left}
.code .k{color:#FF7A85}.code .s{color:var(--accent)}.code .c{color:#4A5C54;font-style:italic}.code .f{color:var(--cyan)}.code .n{color:#C792EA}
.cursor{display:inline-block;width:7px;height:15px;background:var(--accent);vertical-align:middle;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ═══ CIRCULAR PROGRESS ═══ */
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;max-width:900px;margin:52px auto 0}
.ring-c{position:relative;display:grid;place-items:center}
.ring-c svg{width:126px;height:126px;transform:rotate(-90deg)}
.ring-c .bgc{fill:none;stroke:var(--line);stroke-width:7}
.ring-c .fgc{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:326;stroke-dashoffset:326;
  transition:stroke-dashoffset 2.4s var(--ease)}   /* chill: acompaña al conteo de 2.4s */
.ring-c .val{position:absolute;top:50px;font-family:var(--fd);font-weight:800;font-size:25px}
.ring-c p{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px;text-align:center}

/* ═══ ROI ═══ */
.roi{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;margin-top:52px}
.roi>div{background:var(--ink);padding:clamp(26px,3.4vw,42px)}
.sl{margin-bottom:26px}
.sl label{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-bottom:11px}
.sl label b{font-family:var(--fm);color:var(--accent);font-weight:500}
.sl input[type=range]{width:100%;-webkit-appearance:none;height:2px;background:var(--line);outline:none;border-radius:2px}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer}
.sl input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}
.roi-out .big{font-family:var(--fd);font-weight:800;font-size:clamp(34px,4.4vw,56px);color:var(--accent);letter-spacing:-.03em;margin:12px 0 8px;line-height:1}
.roi-out .sv{border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:26px;font-size:13.5px;color:var(--muted);line-height:1.95;background:var(--surface)}
.roi-out .sv b{color:var(--accent);font-family:var(--fd);font-size:17px}
@media(max-width:860px){.roi{grid-template-columns:1fr}}

/* ═══ CARRUSEL 3D RESEÑAS ═══ */
/* cursor:grab + touch-action:pan-y -> se puede ARRASTRAR de lado con el dedo
   sin bloquear el scroll vertical de la página. */
.car3d{margin-top:56px;perspective:1600px;height:390px;position:relative;overflow:hidden;
  cursor:grab;touch-action:pan-y;user-select:none}
.car3d:active{cursor:grabbing}
.car3d-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.rev3d{position:absolute;top:0;left:50%;width:320px;margin-left:-160px;height:340px;border-radius:20px;border:1px solid var(--line);
  background:var(--surface);padding:26px 24px;backface-visibility:hidden;display:flex;flex-direction:column;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.85)}
.rev3d .st{color:var(--accent);font-size:11px;letter-spacing:2px;margin-bottom:14px}
.rev3d .top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.rev3d img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.rev3d .n{font-size:14px;font-weight:600}.rev3d .c{font-size:11px;color:var(--muted);line-height:1.4}
.rev3d p{font-size:13px;line-height:1.6;color:var(--muted);flex:1}
.rev3d .res{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-family:var(--fm);font-size:11px;color:var(--muted)}
.rev3d .res b{color:var(--accent);font-size:15px;font-weight:500}
.car-nav{display:flex;justify-content:center;gap:12px;margin-top:26px}
.car-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-size:17px;cursor:pointer;transition:.25s}
.car-nav button:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:640px){.car3d{height:400px}.rev3d{width:270px;margin-left:-135px;height:350px}}

/* ═══ COMPARATIVA ═══ */
.tw{overflow-x:auto;margin-top:52px}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.cmp th{font-family:var(--fm);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;
  padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp th.b{color:var(--red);text-align:center}.cmp th.g{color:var(--accent);text-align:center}
.cmp td{padding:16px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.cmp td.b{color:color-mix(in srgb,var(--red) 85%,var(--text));text-align:center}
.cmp td.g{color:var(--accent);text-align:center;font-weight:600}
.cmp tr:hover td{background:var(--surface)}

/* ═══ PRICING ═══ */
.tog{display:flex;justify-content:center;margin:32px 0 44px}
.tog-in{display:flex;flex-wrap:wrap;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px}
.tog-in button{font-family:var(--fm);font-size:11px;letter-spacing:.08em;padding:9px 22px;border:none;border-radius:9px;
  background:transparent;color:var(--muted);cursor:pointer;transition:.25s}
.tog-in button.on{background:var(--accent);color:var(--ink);font-weight:600}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px;align-items:center}
.plan{border:1px solid var(--line);border-radius:20px;padding:28px 24px;background:var(--surface);display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan.hot{border-color:var(--accent);background:linear-gradient(180deg,rgba(209,255,0,.05),var(--surface));transform:scale(1.045);z-index:2;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 60px -14px rgba(209,255,0,.32)}
.plan.hot:hover{transform:scale(1.06)}
@media(max-width:900px){.plan.hot{transform:none}.plan.hot:hover{transform:none}}
.badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--ink);
  font-family:var(--fm);font-size:9px;letter-spacing:.12em;padding:5px 12px;border-radius:99px;font-weight:700;white-space:nowrap}
.plan .t{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.plan .p{font-family:var(--fd);font-weight:800;font-size:38px;letter-spacing:-.03em;margin:14px 0 2px}
.plan .p small{font-family:var(--fm);font-size:11px;font-weight:400;color:var(--muted)}
.plan .su{font-family:var(--fm);font-size:10px;color:var(--muted)}
.plan .d{font-size:12.5px;color:var(--muted);line-height:1.55;margin:16px 0 20px;min-height:52px}
.plan ul{list-style:none;font-size:13px;line-height:2.1;flex:1;margin-bottom:24px}
.plan li::before{content:'✓';color:var(--accent);margin-right:8px;font-weight:700}
.plan li.no{color:var(--muted);opacity:.5}.plan li.no::before{content:'✗';color:var(--muted)}

/* ═══ FAQ ═══ */
.faq{max-width:840px;margin:52px auto 0;border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq button{width:100%;background:none;border:none;color:var(--text);font-family:var(--fb);font-size:15.5px;text-align:left;
  padding:23px 44px 23px 0;cursor:pointer;position:relative;transition:color .3s}
.fq button:hover{color:var(--accent)}
.fq button::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--fm);
  font-size:19px;color:var(--accent);transition:transform .4s var(--ease)}
.fq.open button::after{transform:translateY(-50%) rotate(45deg)}
.fq .a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.fq .a p{font-size:13.5px;color:var(--muted);line-height:1.75;padding:0 44px 24px 0}

/* ═══ FOOTER ═══ */
footer{border-top:1px solid var(--line);padding:clamp(50px,7vw,80px) var(--pad) 32px;background:var(--surface)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;max-width:1200px;margin:0 auto}
.f-logo{font-family:var(--fd);font-weight:800;font-size:26px;letter-spacing:-.02em}
.f-sub{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.f-txt{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:18px;max-width:34ch}
.f-col b{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.f-col a{display:block;font-size:13.5px;color:var(--text);padding:6px 0;transition:color .25s}
.f-col a:hover{color:var(--accent)}
.f-bot{max-width:1200px;margin:48px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--fm);font-size:10px;letter-spacing:.08em;color:var(--muted)}
.f-bot b{color:var(--accent);font-weight:500}
.live{animation:blink 2s infinite}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}.f-bot{flex-direction:column;text-align:center}}

#conf{position:fixed;inset:0;pointer-events:none;z-index:99}
/* ═══════════════════════════════════════════════════════════════════════
   OJO — ESTO TENÍA LA PÁGINA MUERTA EN EL CELULAR DE NICO.
   iOS reporta 'prefers-reduced-motion: reduce' también cuando está el
   MODO DE BAJO CONSUMO (no solo con la opción de accesibilidad).
   La regla anterior era `*{animation:none!important;transition:none!important}`
   -> apagaba TODAS las animaciones: la marquesina de apps se congelaba,
   el neón del cerebro no corría, los border-beam no giraban y las órbitas
   se APILABAN en el centro (solo se colocaban gracias a la animación).
   Ahora los reveals ANIMAN igual (fade suave al bajar) aunque iOS reporte
   reduced-motion por el Modo Bajo Consumo — el observador de v5.js los revela
   solo al entrar en pantalla, así que nunca quedan invisibles. Los bucles
   decorativos (suaves, no marean) siguen corriendo. */
/* (quitado el override que dejaba .rv quieto en reduced-motion → ahora el texto
    "se lee solo" al bajar también con batería baja) */

/* ═══════════ TÍTULO CON VIDEO (magicui video-text) ═══════════ */
.vt-wrap{position:relative;display:inline-block;margin:26px 0 0}
.vt-wrap h1{margin:0}
.vt-vid{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.vt-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.vt-wrap h1{position:relative;z-index:1}
.vt-wrap.on h1{color:transparent}          /* el texto lo pinta el canvas */
/* Idiomas no-ES: el título traducido es más largo (ej. "Your business responds on its own") -> reducir y permitir salto para que no se salga del borde */
html:not([lang="es"]) .vt-wrap h1{font-size:clamp(30px,4.6vw,58px);line-height:1.05;overflow-wrap:break-word}
html[lang="de"] .vt-wrap h1{font-size:clamp(25px,3.5vw,44px)}   /* alemán largo: no choca con la tarjeta -10% en desktop */
.vt-wrap.on h1 .g{color:transparent;-webkit-text-fill-color:transparent;background:none;animation:none}

/* ═══════════ ÍCONOS FLOTANTES QUE HUYEN DEL MOUSE ═══════════ */
.floaters{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.flo{position:absolute;width:56px;height:56px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.85);transition:transform .5s cubic-bezier(.2,.9,.25,1);will-change:transform}
.flo svg{width:24px;height:24px}
.flo.a{color:var(--accent);border-color:rgba(209,255,0,.28)}
.flo.w{color:var(--wa);border-color:rgba(37,211,102,.28)}
.flo.c{color:var(--cyan);border-color:rgba(83,189,235,.28)}
@media(max-width:900px){.flo{width:44px;height:44px;border-radius:12px}.flo svg{width:19px;height:19px}}

/* ═══════════ GLOBO: info + leyenda ═══════════ */
.globe-stage{position:relative;display:grid;place-items:center;margin-top:30px}
.globe-info{position:absolute;top:12%;right:2%;width:min(250px,44vw);border:1px solid var(--line);border-radius:16px;
  background:rgba(12,18,16,.92);backdrop-filter:blur(10px);padding:16px 18px;text-align:left;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9);opacity:0;transform:translateY(10px);
  transition:.45s var(--ease);pointer-events:none;z-index:5}
.globe-info.on{opacity:1;transform:translateY(0)}
.globe-info::before{content:'';position:absolute;left:-9px;top:26px;width:9px;height:1px;background:var(--accent)}
.gi-dot{position:absolute;left:-13px;top:23px;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--accent)}
.gi-city{font-family:var(--fd);font-weight:800;font-size:17px;letter-spacing:-.02em}
.gi-sub{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:3px}
.gi-stats{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);display:grid;gap:6px}
.gi-stats div{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.gi-stats b{color:var(--text);font-weight:600}
.globe-legend{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.globe-legend button{font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);padding:8px 14px;border-radius:99px;cursor:pointer;transition:.25s}
.globe-legend button:hover,.globe-legend button.on{border-color:var(--accent);color:var(--accent)}
@media(max-width:860px){.globe-info{position:relative;right:auto;top:auto;width:100%;max-width:340px;margin-top:18px}
  .globe-info::before,.gi-dot{display:none}}

/* ═══════════ EL PROBLEMA — cintas ═══════════ */
.prob{overflow:hidden}
.prow{overflow:hidden;padding:6px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ptrack{display:flex;gap:10px;width:max-content;animation:slide 46s linear infinite}
.ptrack.rev{animation-direction:reverse}
.ptag{font-family:var(--fm);font-size:11px;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:9px 16px;white-space:nowrap;display:flex;align-items:center;gap:8px;background:var(--surface)}
.ptag i{width:15px;height:15px;border-radius:50%;background:rgba(255,92,92,.15);color:var(--red);
  display:grid;place-items:center;font-style:normal;font-size:9px;flex-shrink:0}

/* nodos e íconos: ahora SVG */
.node svg,.orb .sat i svg,.mq-in .pill svg,.cs-side svg{width:1em;height:1em}
.node{font-size:0}
.node svg{width:26px;height:26px;color:var(--muted)}
.node.hub svg{width:34px;height:34px;color:var(--accent)}
.orb .sat i svg{width:20px;height:20px;color:var(--muted)}
.mq-in .pill svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.cs-side button svg{width:14px;height:14px;margin-right:7px;vertical-align:-2px}
.cs-side button{display:flex;align-items:center}
.tbl .r .who svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.svc-img .ic svg{width:20px;height:20px;color:var(--accent)}
.chip svg{width:26px;height:26px;color:var(--accent)}

/* ═══════════ GALAXY — el canvas va DETRÁS de todo ═══════════ */
#galaxyCv{position:fixed;inset:0;z-index:0;pointer-events:none}
/* OJO: 'nav' NO va aquí. Esta regla le pisaba el position:fixed (misma
   especificidad, más abajo) y el nav dejaba de ser fijo: ocupaba 66px en
   el flujo y empujaba la apertura de edicion.html hacia abajo. */
main,section,header,footer,.mq,.vel{position:relative;z-index:1}
.mq,.vel{background:color-mix(in srgb,var(--ink) 88%,transparent)}
footer{background:color-mix(in srgb,var(--surface) 92%,transparent)}
.light{background:var(--paper,#F3F5F1)}

/* ═══════════ BEAM: los flotantes NO deben tapar los nodos ═══════════ */
.floaters{z-index:0}
.beam-wrap{z-index:2}
.beam-wrap .node{background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(4px)}
.flo{opacity:.55}
.flo:hover{opacity:1}

/* ═══════════ MENÚ 3 PUNTOS + FLOWING MENU ═══════════ */
/* El botón se ve en TODAS las pantallas (antes solo PC). En celular queda
   a la izquierda del botón ENTRAR y sirve de menú (las páginas internas no
   tenían menú móvil). */
/* Los 3 puntos ahora VIVEN en el flujo del nav (flowmenu.js los inserta antes de "Agendar gratis"),
   así se posicionan solos y no chocan con "Entrar" en ningún idioma. */
.dots{position:relative;flex:0 0 auto;margin:0 8px;z-index:70;width:38px;height:38px;border-radius:11px;
  background:rgba(12,18,16,.5);backdrop-filter:blur(8px);border:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:.25s}
.dots:hover{border-color:var(--accent)}
.dots i{width:3.5px;height:3.5px;border-radius:50%;background:var(--muted);font-style:normal;transition:.25s}
.dots:hover i{background:var(--accent)}
@media(max-width:960px){
  #nav{justify-content:flex-start}       /* logo a la IZQUIERDA, todo lo demás agrupado a la DERECHA (antes el CTA verde flotaba al medio) */
  #nav .logo{margin-right:auto}
  .dots{margin:0 0 0 8px}                /* pegado al grupo derecho, sin empujar */
  .burger{display:none!important}        /* el 3-puntos reemplaza la hamburguesa */
}
.flow{position:fixed;inset:0;z-index:80;background:var(--ink);opacity:0;visibility:hidden;
  transition:.5s var(--ease);display:flex;flex-direction:column;justify-content:flex-start;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.flow.on{opacity:1;visibility:visible}
.flow-x{position:fixed;top:22px;right:var(--pad);width:44px;height:44px;border-radius:50%;background:transparent;
  border:1px solid var(--line);color:var(--text);font-size:16px;cursor:pointer;transition:.25s}
.flow-x:hover{border-color:var(--accent);color:var(--accent)}
/* margin-block:auto → centra el menú si es corto, y deja SCROLLEAR si es largo (18 items) */
.flow-list{border-top:1px solid var(--line);width:100%;margin-block:auto}
/* espacio al final para que el último ítem (STUDIO) no quede debajo del selector de idioma (fixed, abajo-izq) */
@media(max-width:640px){.flow-list{padding-bottom:84px}}
.fitem{position:relative;border-bottom:1px solid var(--line);overflow:hidden;cursor:pointer;display:block}
.fitem-t{font-family:var(--fd);font-weight:800;font-size:clamp(30px,5.4vw,64px);letter-spacing:-.03em;
  padding:22px var(--pad);color:var(--text);transition:color .3s;position:relative;z-index:2}
.fmar{position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .55s var(--ease);z-index:3;
  display:flex;align-items:center;overflow:hidden}
/* CELULAR: cuando el ítem está 'open' (1er toque) se revela igual que en hover */
.fitem.open .fmar{transform:translateY(0)}
.fitem.open .fitem-t{color:transparent}
/* el hover (barra amarilla) SOLO donde hay mouse: en táctil se PEGABA y cubría 2-3 ítems
   a la vez. En celular manda el tap (.open). */
@media(hover:hover){
  .fitem:hover .fitem-t{color:transparent}
  .fitem:hover .fmar{transform:translateY(0)}
}
/* chip "Entrar →" que aparece al revelar en celular (2º toque = entra) */
.fitem-go{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:6;
  font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  background:var(--ink);border:1px solid var(--ink);border-radius:99px;padding:10px 18px;white-space:nowrap;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.65);opacity:0;pointer-events:none;transition:opacity .3s}
.fitem.open .fitem-go{opacity:1}
/* ── STUDIO en el menú: verde en reposo, BLANCO al señalar (con la foto girando) ── */
.fitem-st{background:linear-gradient(90deg,rgba(0,229,138,.15),rgba(0,229,138,.04));border-bottom-color:rgba(0,229,138,.32)}
.fitem-st .fitem-t{color:#00E58A}
.fitem-st .fmar{background:#fff}
.fitem-st .fmar-in span{color:#04140d}
.fitem-st .fitem-go{color:#04140d;background:rgba(4,20,13,.14);border-color:rgba(4,20,13,.35)}
.fitem-st .badge-new{position:absolute;top:50%;right:calc(var(--pad) + 108px);transform:translateY(-50%);z-index:7;
  font-family:var(--fm);font-size:9px;letter-spacing:.14em;color:#04140d;background:#00E58A;
  padding:4px 9px;border-radius:99px;transition:opacity .3s}
.fitem-st:hover .badge-new,.fitem-st.open .badge-new{opacity:0}
/* CELULAR: el badge 'NUEVO' se pegaba encima del texto largo 'STUDIO · Páginas web'.
   Lo pego a la orilla derecha, más chico, y achico ese texto para que NO se toquen. */
@media(max-width:640px){
  .fitem-st .badge-new{right:12px;font-size:8px;padding:3px 6px;letter-spacing:.08em}
  .fitem-st .fitem-t{font-size:22px}
}
/* SIN animación CSS: la mueve flowmenu.js con rAF (iOS Bajo Consumo) */
.fmar-in{display:flex;align-items:center;gap:22px;width:max-content;will-change:transform}
.fmar-in span{font-family:var(--fd);font-weight:800;font-size:clamp(28px,4.8vw,58px);color:var(--ink);white-space:nowrap;letter-spacing:-.03em}
/* imágenes más grandes en la franja (antes 70x44 -> se veían diminutas) */
.fmar-in img{width:clamp(88px,7vw,124px);height:clamp(56px,4.4vw,78px);object-fit:cover;
  border-radius:10px;flex-shrink:0;box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}

/* ═══════════ CHAT BOT (cáscara) ═══════════ */
.chat-fab{position:fixed;right:26px;bottom:26px;z-index:75;width:58px;height:58px;border-radius:50%;
  background:var(--accent);color:var(--ink);border:none;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 14px 38px -10px rgba(209,255,0,.55);transition:transform .3s var(--ease)}
.chat-fab:hover{transform:scale(1.08)}
.chat-fab svg{width:25px;height:25px}
.chat-badge{position:absolute;top:-3px;right:-3px;width:20px;height:20px;border-radius:50%;background:var(--red);
  color:#fff;font-family:var(--fm);font-size:10px;display:grid;place-items:center;border:2px solid var(--ink)}
.chat-box{position:fixed;right:26px;bottom:96px;z-index:75;width:min(350px,calc(100vw - 40px));height:460px;
  border-radius:20px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.95);opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);
  transition:.4s var(--ease)}
.chat-box.on{opacity:1;visibility:visible;transform:none}
.chat-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface2)}
.chat-av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;font-size:14px}
.chat-nm{font-size:13px;font-weight:600}.chat-st{font-size:10px;color:var(--wa);font-family:var(--fm)}
.chat-cl{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px}
.chat-cl:hover{color:var(--text)}
.chat-bd{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  background-image:radial-gradient(rgba(255,255,255,.03) .6px,transparent .6px);background-size:15px 15px}
.cm{max-width:84%;padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.5;opacity:0;
  animation:pop .45s var(--ease) forwards}
@keyframes pop{to{opacity:1}}
.cm.b{background:var(--surface2);align-self:flex-start;border-bottom-left-radius:4px}
.cm.u{background:#0d5c3c;align-self:flex-end;border-bottom-right-radius:4px}
.chat-ft{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface2)}
.chat-ft input{flex:1;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  color:var(--text);font-family:var(--fb);font-size:13px;outline:none}
.chat-ft input:focus{border-color:var(--accent)}
.chat-ft button{width:40px;border-radius:10px;background:var(--accent);color:var(--ink);border:none;cursor:pointer;display:grid;place-items:center}
.chat-ft button svg{width:16px;height:16px}
@media(max-width:640px){.chat-box{right:12px;bottom:88px;height:420px}.chat-fab{right:16px;bottom:16px}}

/* ═══════════ MANIFIESTO ═══════════ */
.mani{text-align:center;padding-top:0}
.mani-txt{max-width:24ch;margin:0 auto;font-size:clamp(28px,4.6vw,62px);line-height:1.14}
.mani-txt .mw{color:rgba(123,138,130,.24);transition:color .35s var(--ease)}
.mani-txt .mw.on{color:var(--text)}
.mani-txt .mw.lm.on{color:var(--accent)}

/* ═══════════ PROFILE CARD — brillo + inclinación en reseñas ═══════════ */
.rev3d{transition:transform .18s ease-out, box-shadow .3s;will-change:transform}
.rev3d::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),
    rgba(209,255,0,.16), rgba(83,189,235,.08) 40%, transparent 62%);
  opacity:0;transition:opacity .35s}
.rev3d.shine::after{opacity:1}
.rev3d.shine{box-shadow:0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(209,255,0,.28)}
.kpi em{display:block;font-style:normal;font-family:var(--fm);font-size:9px;color:var(--muted);margin-top:5px;letter-spacing:.04em}
.kpi em.up{color:var(--wa)}
.tbl .rh{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:var(--fm);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--surface2)}

/* ═══════════════════════════════════════════════════════
   RÉPLICA EXACTA de la animación de provennce.co
   (problem-scroll: sticky 550vh, 3 fases, fondo que cambia)
   ═══════════════════════════════════════════════════════ */
:root{--sand:#F4F4E8; --sand2:#FFFFED; --lime2:#C5F000; --blk:#080808;}
.ps{position:relative;height:550vh;background:var(--sand);padding:0;z-index:2}
.ps-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.ps-phase{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;transition:opacity .4s ease}

/* FASE 1 — claro */
.ps-p1{background:var(--sand);z-index:1;padding:40px;opacity:1}
.ps-head{font-family:var(--fd);font-size:clamp(36px,6vw,90px);font-weight:800;line-height:.93;
  letter-spacing:-.03em;text-transform:uppercase;text-align:center;color:var(--blk);max-width:none}
.ps-head em{font-style:normal}

/* FASE 2 — NEGRO + cintas */
/* padding-top:78px -> la cinta de ARRIBA quedaba tapada detrás del nav fijo (66px)
   y solo se veían las de abajo. Ahora las 4 se ven. */
.ps-p2{background:var(--blk);z-index:2;opacity:0;pointer-events:none;
  flex-direction:column;justify-content:space-between;padding:78px 0 22px;gap:0}
.ps-center{text-align:center;padding:0 40px;flex:1;display:flex;align-items:center;justify-content:center;order:3}
.ps-center h2{font-family:var(--fd);font-size:clamp(28px,5vw,72px);font-weight:800;line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;color:#fff;text-align:center;max-width:none}
.ps-row{width:100%;overflow:hidden;padding:14px 0;transform:translateX(0) rotate(0);
  transition:transform 1s cubic-bezier(.16,1,.3,1), opacity .8s ease;will-change:transform,opacity}
.ps-row.t1{order:1}.ps-row.t2{order:2}.ps-row.b1{order:4}.ps-row.b2{order:5}
/* ENTRADA: las cintas VUELAN desde los lados, cada una desde un lado distinto y
   con una leve inclinación que se endereza. Antes solo daban un saltito de 80px
   y parecía que "salían de la nada". El .ps-sticky tiene overflow:hidden, así que
   deslizarlas por fuera NO desborda la página. */
.ps-row.t1.ps-hidden{transform:translateX(-106%) rotate(-2.5deg);opacity:0}
.ps-row.t2.ps-hidden{transform:translateX(106%)  rotate(2deg);opacity:0}
.ps-row.b1.ps-hidden{transform:translateX(106%)  rotate(2deg);opacity:0}
.ps-row.b2.ps-hidden{transform:translateX(-106%) rotate(-2.5deg);opacity:0}
/* SIN animación CSS: las mueve JS (rAF) para que corran en iOS Bajo Consumo */
.mt{display:flex;gap:0;white-space:nowrap;width:max-content;will-change:transform}
@keyframes mqL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes mqR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.mtg{display:inline-flex;align-items:center;gap:12px;font-family:var(--fm);font-size:11px;letter-spacing:.08em;
  padding:10px 22px;border:1px solid rgba(255,255,255,.1);margin-right:8px;white-space:nowrap;color:rgba(255,255,255,.55)}
.mtg i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--accent);
  color:var(--blk);font-size:10px;font-weight:700;border-radius:50%;flex-shrink:0;font-style:normal}

/* FASE 3 — claro + zoom */
.ps-p3{background:var(--sand);z-index:3;opacity:0;pointer-events:none;flex-direction:column;gap:20px;padding:40px;text-align:center}
.ps-lbl{font-family:var(--fm);font-size:11px;letter-spacing:.12em;color:#7a7a6a}
.ps-concl{font-family:var(--fd);font-size:clamp(40px,7vw,100px);font-weight:800;line-height:.9;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--blk);transform:scale(.92);transition:transform .8s var(--ease);max-width:none}
.ps-concl em{font-style:normal;color:#4d6600}
.ps-p3.visible .ps-concl{transform:scale(1)}

/* MANIFIESTO — sticky 400vh */
.mani-outer{position:relative;height:400vh;background:var(--sand);padding:0;z-index:2}
.mani-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:0 var(--pad);max-width:1280px;margin:0 auto;overflow:hidden}
.mani-lbl{font-family:var(--fm);font-size:11px;letter-spacing:.12em;color:#7a7a6a;margin-bottom:32px}
.mani-text{font-family:var(--fd);font-size:clamp(32px,5.5vw,84px);font-weight:800;line-height:1.05;letter-spacing:-.03em;
  text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.2em .25em;max-width:none}
.mwd{color:rgba(0,0,0,.12);transition:color .3s ease;display:inline-block}
.mwd.active[data-c="dark"]{color:var(--blk)}
.mwd.active[data-c="lime"]{color:#4d6600}

/* ═══ ARREGLOS ═══ */
/* 1. ÍCONOS de los nodos: centrados de verdad */
.node{display:flex!important;align-items:center;justify-content:center;position:absolute!important}
.node svg{width:26px;height:26px;color:var(--muted);display:block}
.node.hub svg{width:34px;height:34px;color:var(--accent)}
.node small{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%)}
.orb .sat i{display:flex;align-items:center;justify-content:center}
.mq-in .pill{align-items:center}
/* 2. La X del menú SIEMPRE visible y encima */
.flow-x{z-index:90;background:rgba(12,18,16,.9);backdrop-filter:blur(8px)}
.flow.on .flow-x{display:grid;place-items:center}
/* 3. Los 3 puntos siguen visibles en todas las páginas */
.dots{z-index:71}

/* ═══ ÍCONOS: centrado A PRUEBA DE BALAS ═══ */
.node svg{position:absolute!important;top:50%!important;left:50%!important;
  transform:translate(-50%,-50%)!important;margin:0!important}
.orb .sat i svg,.mq-in .pill svg,.flo svg,.svc-img .ic svg{position:static!important;transform:none!important}
.orb .sat i{display:grid!important;place-items:center!important}
.flo{display:grid!important;place-items:center!important}

/* ═══════════ FERRARI 3D ═══════════ */
.ferr{background:var(--ink);position:relative;z-index:2}
.ferr-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4vw,60px);align-items:center;max-width:1240px;margin:0 auto}
.ferr-txt h2{margin-top:20px}
.race{margin-top:36px;display:grid;gap:22px}
.lane-h{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);margin-bottom:9px}
.lane-h b{font-family:var(--fd);font-size:22px;color:var(--text)}
.bar{height:9px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;border-radius:99px;font-style:normal;transition:width 1.4s var(--ease)}
.bar i.f{background:linear-gradient(90deg,#FF3B30,#FF7A85)}
.bar i.p{background:linear-gradient(90deg,var(--accent),var(--wa))}
/* La barra = TIEMPO que tarda. Más larga = peor.
   Humano 4h -> llena (rojo). Bot 5s -> casi nada (lima). Ahora sí es coherente. */
.race.on .bar i.f{width:100%}
.race.on .bar i.p{width:5%;box-shadow:0 0 14px 2px var(--accent)}
.lane small{display:block;margin-top:7px;font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:.04em}
.race-w{margin-top:6px;display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;background:linear-gradient(90deg,rgba(209,255,0,.06),transparent)}
.rw-n{font-family:var(--fd);font-weight:800;font-size:38px;color:var(--accent);letter-spacing:-.03em;line-height:1}
.rw-t{font-size:13px;color:var(--muted);line-height:1.55}
.rw-t b{color:var(--text)}
.ferr-3d{position:relative;aspect-ratio:16/11;border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 70%, rgba(209,255,0,.07), transparent 62%);cursor:grab}
.ferr-3d:active{cursor:grabbing}
.ferr-3d canvas{width:100%;height:100%;display:block}
.ferr-load{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fm);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:opacity .7s}
.ferr-load.gone{opacity:0;pointer-events:none}
.ferr-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-family:var(--fm);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.6}
@media(max-width:900px){.ferr-in{grid-template-columns:1fr}.ferr-3d{order:-1}}

/* ═══════════ LANYARD colgante ═══════════ */
/* top:70px -> cuelga DEBAJO del nav. Antes (top:0) el cordón cruzaba por encima
   del botón de los 3 puntos y se veía todo bugueado. */
/* z-index 55 (< nav 60): el cordón ya no cruza el nav. La opacidad la maneja
   v5.js: se DESVANECE al salir del hero — antes tapaba la marquesina, las
   fotos de industrias y el CTA final (hallazgo crítico de auditoría). */
.lany{position:fixed;top:70px;right:clamp(24px,7vw,110px);z-index:55;width:190px;height:400px;pointer-events:none;
  transform-origin:50% 0;transition:opacity .4s ease}
.lany-cord{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.lany-pin{position:absolute;top:0;left:50%;transform:translateX(-50%);width:50px;height:10px;z-index:3;
  border-radius:0 0 8px 8px;background:linear-gradient(#39443F,#1B2522);border:1px solid #45514C;border-top:none;
  box-shadow:0 3px 10px rgba(0,0,0,.55)}
.lany-pin::after{content:'';position:absolute;top:3.5px;left:50%;transform:translateX(-50%);width:18px;height:3px;
  border-radius:2px;background:rgba(209,255,0,.55)}
.lc-ring{position:absolute;top:-19px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;
  border:2.5px solid #9AA800;background:#0A0F0D;z-index:2;box-shadow:0 0 8px -2px rgba(209,255,0,.5)}
.lany-card{position:absolute;top:186px;left:50%;width:132px;margin-left:-66px;border-radius:14px;
  background:linear-gradient(160deg,#121A17,#0A0F0D);border:1px solid var(--line);padding:26px 14px 16px;
  text-align:center;box-shadow:0 24px 50px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(209,255,0,.14);
  transform-origin:50% -22px;pointer-events:auto;cursor:grab;user-select:none}
.lany-card:active{cursor:grabbing}
.lc-clip{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:34px;height:14px;border-radius:5px;
  background:#2A3531;border:1px solid #3A4541}
.lc-top{font-family:var(--fd);font-weight:800;font-size:9px;letter-spacing:.1em;color:var(--muted)}
.lc-big{font-family:var(--fd);font-weight:800;font-size:36px;color:var(--accent);letter-spacing:-.03em;line-height:1;margin:6px 0 2px}
.lc-sub{font-family:var(--fm);font-size:8.5px;letter-spacing:.14em;color:var(--text)}
.lc-foot{font-size:9px;color:var(--muted);line-height:1.5;margin-top:10px}
.lc-bar{margin-top:12px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 4px);opacity:.35}
/* Móvil/tablet: el lanyard −10% SÍ se muestra (antes estaba oculto), pero ESCALADO y
   pegado a la esquina superior derecha para no tapar el título ni el CTA. */
@media(max-width:1100px){ .lany{ transform:scale(.72); transform-origin:100% 0; right:4px; top:58px } }
@media(max-width:560px){ .lany{ transform:scale(.56); right:-4px; top:54px } .hero .eyebrow{max-width:calc(100vw - 178px);font-size:9.5px} }

/* ═══ PANTALLA DE CARGA ═══ */
#loader{position:fixed;inset:0;z-index:100000;background:radial-gradient(120% 120% at 50% 40%,#0A100E 0%,#050807 70%);
  display:grid;place-items:center;transition:opacity .6s ease,visibility .6s;overflow:hidden}
#loader::before{content:'';position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 45%,rgba(209,255,0,.10),transparent 70%);animation:ldpulse 2.6s ease-in-out infinite}
@keyframes ldpulse{0%,100%{opacity:.5}50%{opacity:1}}
#loader.gone{opacity:0;visibility:hidden;pointer-events:none}
.ld-in{position:relative;z-index:2;width:min(340px,80vw);text-align:center}
.ld-logo{font-family:var(--fd);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:26px}
.ld-tk{display:inline-flex;color:var(--cyan)}
.ld-tk svg{width:19px;height:19px}.ld-tk svg:last-child{margin-left:-11px}
.ld-bar{height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--wa));box-shadow:0 0 16px -2px var(--accent);transition:width .12s linear}
.ld-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.ld-tag{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ld-pct{font-family:var(--fm);font-size:12px;color:var(--accent);font-weight:500}
@media(prefers-reduced-motion:reduce){#loader::before{animation:none}}

/* ═══ NODOS DEL FLUJO: ahora son ENLACES clickeables ═══ */
.node{cursor:pointer;text-decoration:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.node:hover{border-color:var(--accent);box-shadow:0 0 26px -6px var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.node:hover svg{color:var(--accent)!important}
.node:hover small{color:var(--accent)}
.node.hub:hover{box-shadow:0 0 54px -6px var(--accent)}

/* ═══ TABLA "Manual vs PROVENNCE" EN CELULAR ═══
   Antes tenía min-width:640px -> tocaba hacer scroll de lado.
   Ahora cada fila se convierte en una TARJETA apilada que sí cabe. */
@media(max-width:760px){
  .tw{overflow:visible;margin-top:36px}
  .cmp{min-width:0;width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp tr{border:1px solid var(--line);border-radius:14px;background:var(--surface);
    padding:15px 16px;margin-bottom:12px}
  .cmp tr:hover td{background:transparent}
  .cmp td{border:none;padding:7px 0;text-align:left!important}
  .cmp td:first-child{font-family:var(--fd);font-weight:600;font-size:15px;color:var(--text);
    padding:0 0 11px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .cmp td.b,.cmp td.g{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px}
  .cmp td.b::before,.cmp td.g::before{content:attr(data-l);font-family:var(--fm);font-size:9.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
}

/* ═══════════════════════════════════════════════════════════════
   ÓRBITAS VISIBLES
   Antes: fondo #111917 + borde #1B2522 + icono gris sobre fondo NEGRO
   con estrellas -> los iconos giraban pero eran INVISIBLES.
   Ahora: fondo más claro, borde marcado, halo y colores de marca.
   ═══════════════════════════════════════════════════════════════ */
.orb .ring{border:1px dashed rgba(209,255,0,.16)!important}
.orb .sat i{
  width:54px!important;height:54px!important;margin:-27px!important;border-radius:16px!important;
  background:linear-gradient(155deg,#22302B,#0F1917)!important;
  border:1px solid #35463F!important;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.9),
             inset 0 1px 0 rgba(255,255,255,.07),
             0 0 26px -8px rgba(209,255,0,.45)!important;
  backdrop-filter:blur(4px);
}
.orb .sat i svg{width:25px!important;height:25px!important;color:#E4EDE8!important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
/* colores de marca: se reconocen de una */
.orb .sat[data-ic="whatsapp"] i{border-color:rgba(37,211,102,.5)!important;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.9), 0 0 28px -6px rgba(37,211,102,.6)!important}
.orb .sat[data-ic="whatsapp"] i svg{color:#25D366!important}
.orb .sat[data-ic="instagram"] i{border-color:rgba(225,48,108,.5)!important;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.9), 0 0 28px -6px rgba(225,48,108,.55)!important}
.orb .sat[data-ic="instagram"] i svg{color:#E1306C!important}
.orb .sat[data-ic="card"] i svg,.orb .sat[data-ic="chart"] i svg{color:#D1FF00!important}
.orb .sat[data-ic="calendar"] i svg,.orb .sat[data-ic="mail"] i svg{color:#53BDEB!important}

/* ═══════════════════════════════════════════════════════════════
   ÓRBITAS — logos REALES de las apps + posición a prueba de balas
   ═══════════════════════════════════════════════════════════════ */
/* POSICIÓN BASE: si la animación se apaga (iOS en Modo de Bajo Consumo),
   este transform los deja igual repartidos en el anillo.
   Antes NO existía y los 9 se apilaban en el centro -> invisibles. */
.orb .sat{
  transform:rotate(var(--a,0deg)) translateX(var(--rad,0px)) rotate(calc(-1 * var(--a,0deg)));
}
.orb .sat i{
  width:56px!important;height:56px!important;margin:-28px!important;border-radius:17px!important;
  background:linear-gradient(155deg,#242F2B,#101A18)!important;
  border:1px solid color-mix(in srgb, var(--c,#D1FF00) 45%, #35463F)!important;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.9),
             inset 0 1px 0 rgba(255,255,255,.08),
             0 0 26px -7px var(--c,#D1FF00)!important;
  display:grid!important;place-items:center!important;
}
.orb .sat i img{
  width:27px!important;height:27px!important;display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));
}

/* ═══════════════════════════════════════════════════════════════
   ICONOS DE APPS (.aico) — mismo estilo que las órbitas,
   en la MARQUESINA y en los NODOS del flujo. PC y celular.
   ═══════════════════════════════════════════════════════════════ */
/* Tamaño FIJO: si el logo no tuviera medidas, al cargar cambiaría el ancho
   de la marquesina, se rompería el bucle y "desaparecería". */
.aico{width:18px;height:18px;flex-shrink:0;display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.aico.gen{display:inline-flex;align-items:center;justify-content:center}
.aico.gen svg{width:18px;height:18px;color:inherit}

/* MARQUESINA: píldoras con el logo real, ya no todas verdes */
.mq-in .pill{gap:10px}
.mq-in .pill .aico{width:19px;height:19px}
.mq-in .pill .aico.gen svg{width:19px;height:19px;color:inherit!important}

/* NODOS DEL FLUJO: WhatsApp e Instagram con su logo y su color */
.node .aico{position:absolute!important;top:50%!important;left:50%!important;
  transform:translate(-50%,-50%)!important;width:27px!important;height:27px!important}
.node .aico.gen svg{width:27px!important;height:27px!important;position:static!important;transform:none!important}
.node[data-ic="whatsapp"],.node[data-ic="instagram"]{
  border-color:color-mix(in srgb, var(--c,#D1FF00) 45%, var(--line))!important;
  box-shadow:0 0 22px -8px var(--c,#D1FF00)}
.node[data-ic="whatsapp"]:hover,.node[data-ic="instagram"]:hover{
  border-color:var(--c,#D1FF00)!important;box-shadow:0 0 28px -6px var(--c,#D1FF00)}

/* floaters con LOGO real de app (img) — mismo tamaño que los svg */
.flo .aico{width:24px!important;height:24px!important}
.flo .aico.gen svg{width:24px!important;height:24px!important;color:inherit!important}
.flo{opacity:.7}                       /* background, no compite con los nodos */                       /* antes .55: casi no se veían */
.flo[style*="--c"]{border-color:color-mix(in srgb, var(--c) 40%, var(--line))}
@media(max-width:900px){.flo .aico{width:19px!important;height:19px!important}}

/* ═══ AUDITORÍA — CRÍTICO: vacío gigante en móvil tras "LO ELIMINA TODO" ═══
   Las secciones sticky (550vh/400vh) dejaban >1 pantalla de crema muerta en
   celular. Se acortan (las fases van en % del total, se comprimen solas) y
   los titulares bajan para no quedar detrás del nav fijo. */
@media(max-width:760px){
  .ps{height:380vh}
  .mani-outer{height:260vh}
  .ps-phase{padding-top:70px}
  .mani-sticky{padding-top:70px}
}