/* ===== subeya-polish ===== */

:root{ --pol-ease:cubic-bezier(.22,1,.36,1); }

/* ---------- 1. entrada al hacer scroll ----------
   (los valores de .rv viven en la capa v35, al final del archivo:
   acá se quitó una versión más corta que quedaba pisada igual) */

/* ---------- 2. flujo / proceso: escalonado de 120 ms ---------- */
.js .flow.in .fl-step:nth-child(1){animation-delay:.02s}
.js .flow.in .fl-step:nth-child(2){animation-delay:.14s}
.js .flow.in .fl-step:nth-child(3){animation-delay:.26s}
.js .flow.in .fl-step:nth-child(4){animation-delay:.38s}
.js .flow.in .fl-step:nth-child(5){animation-delay:.50s}

/* los conectores aparecen después de su paso, nunca antes */
.js .flow .fl-step::after{opacity:0; transition:opacity .55s var(--pol-ease)}
.js .flow.in .fl-step::after{opacity:1}
.js .flow.in .fl-step:nth-child(1)::after{transition-delay:.30s}
.js .flow.in .fl-step:nth-child(2)::after{transition-delay:.42s}
.js .flow.in .fl-step:nth-child(3)::after{transition-delay:.54s}
.js .flow.in .fl-step:nth-child(4)::after{transition-delay:.66s}

/* el mismo escalonado para los pasos numerados del proceso */
.js .steps .step.in{transition-delay:0s}

/* ---------- 3. previews: secuencia discreta, una sola vez ---------- */
.js .show-stage > .rv:nth-child(2){transition-delay:.20s}

/* la barra del navegador se enciende sola, como si cargara */
.js .brw .brw-dots i,
.js .brw .brw-url{opacity:0; transition:opacity .45s var(--pol-ease)}
.js .brw.in .brw-dots i,
.js .brw.in .brw-url{opacity:1}
.js .brw.in .brw-dots i:nth-child(1){transition-delay:.22s}
.js .brw.in .brw-dots i:nth-child(2){transition-delay:.32s}
.js .brw.in .brw-dots i:nth-child(3){transition-delay:.42s}
.js .brw.in .brw-url{transition-delay:.54s}

/* el pie del panel del asistente entra al final de la secuencia */
.js .show-panel figcaption{opacity:0; transition:opacity .5s var(--pol-ease) .62s}
.js .show-panel.in figcaption{opacity:1}

/* ---------- 4. hover y foco ---------- */
:where(.btn,.work-card,.buy-card,.case-card,.rev-card,.plan,.q,.ig-pill,.step,.fl-step,.pack-head,.offer-list div){
  transition:transform .22s var(--pol-ease), box-shadow .22s var(--pol-ease),
             border-color .22s var(--pol-ease), background .22s var(--pol-ease);
}
.btn:hover{transform:translateY(-2px)}
:where(.work-card,.buy-card,.case-card,.rev-card):hover{
  transform:translateY(-3px);
  border-color:var(--violet-line);
  box-shadow:0 24px 52px -26px rgba(124,58,237,.38);
}
.plan:hover{box-shadow:0 26px 58px -28px rgba(124,58,237,.34)}
.step:hover .rn{color:var(--violet)}
.fl-step:hover{background:rgba(124,58,237,.05)}
.system .fl-step:hover{background:rgba(255,255,255,.05)}

/* foco de teclado visible en todo lo interactivo */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:8px;
}
.system a:focus-visible,.system button:focus-visible,
.final a:focus-visible,.final button:focus-visible,
.works-sec a:focus-visible,.works-sec button:focus-visible,
.brw-view:focus-visible{outline-color:#C9B3FF}

/* el :active tiene que seguir ganándole al :hover nuevo */
.btn:active{transform:translateY(1px) scale(.994)}

/* ---------- 5. profundidad: auras lentas, casi imperceptibles ---------- */
.final::after,
.system::after{
  content:''; position:absolute; inset:-18% -12%; z-index:0;
  pointer-events:none; will-change:transform;
  animation:polAura 38s ease-in-out infinite alternate;
}
.final::after,
.system::after{
  background:
    radial-gradient(34% 38% at 78% 18%, rgba(167,139,250,.10), transparent 70%),
    radial-gradient(30% 34% at 14% 84%, rgba(236,72,153,.07), transparent 72%);
  animation-duration:46s;
}
.final > .wrap{position:relative; z-index:1}
.hero .hero-in{position:relative; z-index:1}
@keyframes polAura{
  from{transform:translate3d(-1.4%,-1%,0) scale(1)}
  to  {transform:translate3d(1.4%,1.6%,0) scale(1.06)}
}

/* ---------- 6. pulso del launcher de IA (solo con el chat cerrado) ---------- */
.ai-float-btn::before{
  content:''; position:absolute; inset:-15px; border-radius:50%;
  pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(124,58,237,0) 54%,
    rgba(167,139,250,.42) 72%,
    rgba(124,58,237,0) 100%);
  opacity:0;
  animation:polAiHalo 4.6s ease-in-out infinite;
}
body.chat-open .ai-float-btn::before{animation:none; opacity:0}
@keyframes polAiHalo{
  0%,100%{opacity:0; transform:scale(.9)}
  45%    {opacity:1; transform:scale(1.04)}
}

/* ---------- 7. tipografía editorial del título principal ---------- */
h1.display{
  font-family:'Fraunces','DM Serif Display',var(--serif);
  font-optical-sizing:auto;
  font-variation-settings:'SOFT' 0,'WONK' 0;
  letter-spacing:-.028em;
}
h1.display em{font-family:inherit}

/* ---------- accesibilidad de movimiento ---------- */
@media(prefers-reduced-motion:reduce){
.final::after,
.system::after,
.ai-float-btn::before{animation:none !important}
  .ai-float-btn::before{opacity:0}
  .js .rv{opacity:1; transform:none}
  .js .brw .brw-dots i,.js .brw .brw-url,
  .js .show-panel figcaption{opacity:1; transition:none}
  .js .flow .fl-step::after{opacity:1; transition:none}
}


/* ===== subeya-atmos ===== */


/* ===================== 1. RED DIGITAL DEL HERO ===================== */
.hero{
  background:
    radial-gradient(80% 60% at 84% 6%,  rgba(236,72,153,.10), transparent 66%),
    radial-gradient(70% 66% at 6% 26%,  rgba(124,58,237,.13), transparent 70%),
    radial-gradient(90% 60% at 50% 106%, rgba(167,139,250,.16), transparent 70%),
    linear-gradient(178deg,#FBFAFF 0%, #F4F0FE 46%, #FCFAFF 100%);
}
.sbnet{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  contain:paint;
}
.sbnet-svg{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
  animation:sbDrift 24s ease-in-out infinite alternate;
  will-change:transform;
}

/* conexiones finas y largas */
.sbnet-links path{
  stroke-width:1.7;
  opacity:.72;
}
.sbnet-links path:nth-child(even){stroke-width:1.25; opacity:.52}

/* destellos: un guion corto que recorre cada trazo */
.sbnet-flow .sbf{
  stroke-width:3;
  stroke-dasharray:42 1400;
  stroke-dashoffset:1442;
  opacity:.95;
  filter:drop-shadow(0 0 10px rgba(167,139,250,1));
  animation:sbSpark 18s linear infinite;
}
.sbf-1{animation-duration:17s; animation-delay:0s}
.sbf-2{animation-duration:21s; animation-delay:-4s}
.sbf-3{animation-duration:15s; animation-delay:-8s; stroke:#F0ABFC}
.sbf-4{animation-duration:23s; animation-delay:-2s}
.sbf-5{animation-duration:19s; animation-delay:-11s; stroke:#DDD6FE}
.sbf-6{animation-duration:25s; animation-delay:-6s; stroke:#F0ABFC}
@keyframes sbSpark{
  0%   {stroke-dashoffset:1442; opacity:0}
  6%   {opacity:.9}
  92%  {opacity:.9}
  100% {stroke-dashoffset:0; opacity:0}
}

/* nodos con pulso desfasado */
.sbnet-nodes .sbn{
  opacity:.8;
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 7px rgba(124,58,237,.55));
  animation:sbPulse 14s ease-in-out infinite;
}
.sbn-a{animation-delay:-0s}    .sbn-b{animation-delay:-1.4s}
.sbn-c{animation-delay:-2.8s}  .sbn-d{animation-delay:-4.1s}
.sbn-e{animation-delay:-5.5s}  .sbn-f{animation-delay:-6.9s}
.sbn-g{animation-delay:-8.2s}  .sbn-h{animation-delay:-9.6s}
.sbn-i{animation-delay:-11s}   .sbn-j{animation-delay:-12.3s}
.sbn-k{animation-delay:-3.4s}  .sbn-l{animation-delay:-7.6s}
@keyframes sbPulse{
  0%,100%{opacity:.5;  transform:scale(.85)}
  50%    {opacity:1;   transform:scale(1.35)}
}

/* hubs con halo */
.sbnet-hubs .sbh{
  opacity:.5;
  transform-box:fill-box; transform-origin:center;
  animation:sbHub 16s ease-in-out infinite;
}
.sbh-2{animation-delay:-5.3s} .sbh-3{animation-delay:-10.6s}
@keyframes sbHub{
  0%,100%{opacity:.3;  transform:scale(.9)}
  50%    {opacity:.72; transform:scale(1.22)}
}

/* deriva ambiental, casi imperceptible */
@keyframes sbDrift{
  from{transform:translate3d(-1.2%,-.8%,0) scale(1.04)}
  to  {transform:translate3d(1.2%,1%,0)    scale(1.09)}
}

/* ===================== 2. CAPAS Y PROFUNDIDAD ===================== */
.sbnet-halo{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(52px); will-change:transform;
}
.sbnet-halo--a{
  width:44vw; height:44vw; max-width:640px; max-height:640px;
  left:-8vw; top:2vw;
  background:radial-gradient(closest-side, rgba(124,58,237,.46), rgba(124,58,237,0) 74%);
  animation:sbFloat 22s ease-in-out infinite alternate;
}
.sbnet-halo--b{
  width:38vw; height:38vw; max-width:560px; max-height:560px;
  right:-6vw; top:-6vw;
  background:radial-gradient(closest-side, rgba(236,72,153,.38), rgba(236,72,153,0) 72%);
  animation:sbFloat 26s ease-in-out infinite alternate-reverse;
}
.sbnet-halo--c{
  width:46vw; height:34vw; max-width:700px; max-height:520px;
  right:2vw; bottom:-12vw;
  background:radial-gradient(closest-side, rgba(167,139,250,.44), rgba(167,139,250,0) 74%);
  animation:sbFloat 30s ease-in-out infinite alternate;
}
@keyframes sbFloat{
  from{transform:translate3d(-2%,-2.5%,0)}
  to  {transform:translate3d(2.5%,2%,0)}
}

/* velo: le devuelve contraste a la columna de texto sin apagar la red */
.sbnet-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 62% at 20% 44%, rgba(252,251,255,.80) 0%, rgba(252,251,255,.40) 46%, rgba(252,251,255,0) 80%),
    linear-gradient(180deg, rgba(252,251,255,.62) 0%, rgba(252,251,255,0) 20%),
    linear-gradient(0deg,  rgba(252,251,255,.86) 0%, rgba(252,251,255,0) 26%);
}

/* grano fino, estático */
.sbnet-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* el contenido del hero siempre por encima de la atmósfera */
.hero-ghost{z-index:0; color:#EDE8FA; opacity:.32; mix-blend-mode:multiply}
.hero .hero-in{position:relative; z-index:2}

/* el aura vieja del hero ya no hace falta: la reemplaza la red */

/* la tarjeta del mock gana cuerpo sobre el fondo con capas */
.mock{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,246,251,.88));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 40px 90px -46px rgba(76,29,149,.42);
}

/* ===================== 5. ECOS EN EL RESTO ===================== */
/* nada de red completa fuera del hero: solo halos y glow */
.works-sec,.system,.final{position:relative}

.plans::after,
#proceso::after,
.reviews::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(30% 34% at 88% 8%,  rgba(124,58,237,.07), transparent 70%),
    radial-gradient(26% 30% at 6% 92%, rgba(236,72,153,.05), transparent 72%);
}
.plans > .wrap,#proceso > .wrap,.reviews > .wrap{position:relative; z-index:1}
.plans,#proceso,.reviews{position:relative}

/* glow suave en previews y tarjetas clave */
.brw,.show-panel{box-shadow:0 46px 96px -40px rgba(76,29,149,.55)}
.showcase:hover .show-panel{box-shadow:0 46px 96px -34px rgba(124,58,237,.72)}
.work:hover .work-card{box-shadow:0 34px 70px -30px rgba(124,58,237,.42)}
.btn-primary{box-shadow:0 14px 34px -14px rgba(124,58,237,.62)}
.btn-primary:hover{box-shadow:0 20px 44px -14px rgba(124,58,237,.78)}

/* ===================== 4. TIPOGRAFÍA EDITORIAL ===================== */
h1.display,
.works-sec h2.display{
  font-family:'Fraunces','DM Serif Display',var(--serif);
  font-optical-sizing:auto;
  font-variation-settings:'SOFT' 0,'WONK' 0;
  letter-spacing:-.028em;
}
h1.display em,.works-sec h2.display em{font-family:inherit}

/* nombres de las empresas del carrusel: fuera la serif en caja alta */
.work-meta h3{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:.075em;
  line-height:1.3;
}

/* ===================== 7. MOVIMIENTO REDUCIDO ===================== */
@media(prefers-reduced-motion:reduce){
  .sbnet-svg,.sbnet-halo,
  .sbnet-nodes .sbn,.sbnet-hubs .sbh{animation:none !important}
  .sbnet-svg{transform:scale(1.04)}
  /* versión estática linda: los destellos quedan posados sobre las líneas */
  .sbnet-flow .sbf{
    animation:none !important;
    stroke-dasharray:60 1400;
    stroke-dashoffset:900;
    opacity:.7;
  }
  .sbnet-nodes .sbn{opacity:.6}
  .sbnet-hubs .sbh{opacity:.32}
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:980px){
  /* en pantallas angostas el hero es de una columna: el velo se centra */
  .sbnet-scrim{
    background:
      radial-gradient(66% 46% at 50% 32%, rgba(252,251,255,.84) 0%, rgba(252,251,255,.46) 48%, rgba(252,251,255,0) 82%),
      linear-gradient(180deg, rgba(252,251,255,.68) 0%, rgba(252,251,255,0) 20%),
      linear-gradient(0deg,  rgba(252,251,255,.9) 0%, rgba(252,251,255,0) 24%);
  }
  .sbnet-links path{stroke-width:1.3; opacity:.36}
  .sbnet-halo{filter:blur(46px)}
}
@media(max-width:640px){
  /* menos capas en móvil = menos trabajo de composición */
  .sbnet-grain{display:none}
  .sbnet-halo--b{display:none}
  .sbnet-flow .sbf{stroke-width:2.6}
  .sbnet-svg{animation-duration:30s}
}


/* ===== subeya-v20 ===== */


/* ============ 1. TIPOGRAFÍA ORIGINAL DE SUBEYA ============
   Se anula el override de Fraunces: vuelve la serif de alto
   contraste + itálica violeta que ya tenía la marca.          */
h1.display,
.works-sec h2.display{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-variation-settings:normal;
  letter-spacing:-.02em;
}
h1.display em,.works-sec h2.display em{font-family:var(--serif); font-style:italic}

/* ============ 3. RED BLANCA DEL SISTEMA ============ */
.sysnet{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden; contain:paint;
}
.sysnet-svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  animation:syDrift 28s ease-in-out infinite alternate;
  will-change:transform;
}

/* capa lejana desenfocada = profundidad */
.sysnet-far{
  stroke-width:3; opacity:.26;
  filter:blur(3.5px);
}
.sysnet-far circle{fill:#FFFFFF; stroke:none; opacity:.5}

/* capa cercana nítida */
.sysnet-near path{stroke-width:1.25; opacity:.5}
.sysnet-near path:nth-child(even){stroke-width:1; opacity:.34}

/* nodos pequeños con pulso desfasado */
.sysnet-nodes .syn{
  opacity:.85; transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 7px rgba(186,230,253,1));
  animation:syPulse 16s ease-in-out infinite;
}
.syn-1{animation-delay:-0s}    .syn-2{animation-delay:-1.7s}
.syn-3{animation-delay:-3.3s}  .syn-4{animation-delay:-5s}
.syn-5{animation-delay:-6.6s}  .syn-6{animation-delay:-8.3s}
.syn-7{animation-delay:-10s}   .syn-8{animation-delay:-11.6s}
.syn-9{animation-delay:-13.3s} .syn-10{animation-delay:-14.9s}
@keyframes syPulse{
  0%,100%{opacity:.5; transform:scale(.8)}
  50%    {opacity:1;  transform:scale(1.45)}
}

/* halos celestes */
.sysnet-halos .syh{
  opacity:.3; transform-box:fill-box; transform-origin:center;
  animation:syHalo 22s ease-in-out infinite;
}
.syh-2{animation-delay:-7.3s} .syh-3{animation-delay:-14.6s}
@keyframes syHalo{
  0%,100%{opacity:.14; transform:scale(.85)}
  50%    {opacity:.42; transform:scale(1.15)}
}

/* destellos */
.sysnet-flow .syf{
  stroke-width:2.4;
  stroke-dasharray:36 1600;
  stroke-dashoffset:1636;
  opacity:.95;
  filter:drop-shadow(0 0 8px rgba(224,242,254,.95));
  animation:sySpark 20s linear infinite;
}
.syf-1{animation-duration:19s; animation-delay:-2s}
.syf-2{animation-duration:24s; animation-delay:-9s}
.syf-3{animation-duration:17s; animation-delay:-14s}
.syf-4{animation-duration:22s; animation-delay:-5s}
@keyframes sySpark{
  0%  {stroke-dashoffset:1636; opacity:0}
  7%  {opacity:.85}
  90% {opacity:.85}
  100%{stroke-dashoffset:0; opacity:0}
}

@keyframes syDrift{
  from{transform:translate3d(-1%,-.7%,0) scale(1.03)}
  to  {transform:translate3d(1%,.9%,0)   scale(1.07)}
}

/* el contenido del sistema siempre por encima de la red */
.system > .wrap{position:relative; z-index:1}

/* ============ 4. GLASS PREMIUM (solo previews y bloques visuales) ============ */
.showcase{
  background:linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 62%);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 50px 100px -46px rgba(0,0,0,.72),
    0 0 0 1px rgba(167,139,250,.10) inset,
    0 1px 0 rgba(255,255,255,.16) inset;
}
.brw{
  border:1px solid rgba(255,255,255,.17);
  box-shadow:
    0 48px 96px -40px rgba(8,4,24,.86),
    0 0 0 1px rgba(167,139,250,.16) inset,
    0 1px 0 rgba(255,255,255,.2) inset;
}
.brw-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.11);
}
.show-panel{
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 46px 92px -34px rgba(8,4,24,.92),
    0 0 34px -6px rgba(124,58,237,.36),
    0 1px 0 rgba(255,255,255,.24) inset;
}
.show-panel figcaption{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
/* el mock del hero, sobre fondo claro */
.mock{
  background:linear-gradient(168deg, rgba(255,255,255,.72), rgba(250,248,255,.52));
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1.5px dashed rgba(167,139,250,.34);
  box-shadow:
    0 44px 92px -46px rgba(76,29,149,.5),
    0 1px 0 rgba(255,255,255,.9) inset;
}
/* el bloque de prueba dentro del sistema */
.tryit{
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 84px -44px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.14) inset;
}

/* ============ 5. PARALLAX SUAVE (solo desktop, puntero fino) ============
   Se usa la propiedad `translate`, independiente de `transform`,
   para no pisar las animaciones de deriva ya existentes.        */
.sbnet-svg{
  translate:calc(var(--sbx,0) * 13px) calc(var(--sby,0) * 9px);
  transition:translate .7s cubic-bezier(.22,1,.36,1);
}
.sbnet-halo--a{translate:calc(var(--sbx,0) * 26px) calc(var(--sby,0) * 19px)}
.sbnet-halo--b{translate:calc(var(--sbx,0) * -20px) calc(var(--sby,0) * -14px)}
.sbnet-halo--c{translate:calc(var(--sbx,0) * 22px) calc(var(--sby,0) * -16px)}
.sbnet-halo{transition:translate .9s cubic-bezier(.22,1,.36,1)}

@media(max-width:980px), (pointer:coarse){
  .sbnet-svg,.sbnet-halo{translate:none !important}
}

/* ============ 6. LÍNEA FILTRADA EN PLANES: FUERA DE RAÍZ ============
   Causa real: dos sombras violetas EXTERIORES sobre la tarjeta
   destacada — `.plan--feat{box-shadow:0 34px 80px -30px}` y
   `.glow-in.in::after{box-shadow:0 0 60px -18px}` — irradiaban
   hacia los costados. La canaleta del grid mide 22 px, así que
   ambos glows la saturaban y, encerrados entre dos tarjetas
   opacas, se leían como una línea vertical de borde a borde.
   Lo mismo pasaba del lado de la tercera tarjeta.
   Solución: el glow se conserva, pero se reordena para que no
   tenga alcance lateral (spread negativo > blur/2) y el halo
   de la destacada pasa a ser interior.                          */
.plan{box-shadow:0 34px 60px -38px rgba(12,10,30,.62)}
.plan--feat{
  box-shadow:
    0 38px 44px -40px rgba(124,58,237,.65),
    0 0 0 1px rgba(167,139,250,.30) inset;
}
.plan--feat.glow-in::after{box-shadow:none}
.plan--feat.glow-in.in::after{
  box-shadow:0 0 46px -14px rgba(124,58,237,.5) inset;
}
/* las capas decorativas de la sección no pintan en las canaletas */
.plans::before{background:radial-gradient(760px 380px at 50% -14%, rgba(124,58,237,.13), transparent 62%)}
.plans::after{content:none}
.plans-grid{position:relative; z-index:1}

/* refuerzo: ninguna capa decorativa puede escaparse de su sección */
.hero,.system,.plans,.works-sec,.final,#proceso,.reviews{overflow:hidden}
.sbnet,.sysnet{border-radius:inherit}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media(prefers-reduced-motion:reduce){
  .sysnet-svg,.sysnet-nodes .syn,.sysnet-halos .syh{animation:none !important}
  .sysnet-svg{transform:scale(1.03)}
  .sysnet-flow .syf{
    animation:none !important;
    stroke-dasharray:90 1600; stroke-dashoffset:1000; opacity:.6;
  }
  .sysnet-nodes .syn{opacity:.6}
  .sysnet-halos .syh{opacity:.18}
  .sbnet-svg,.sbnet-halo{translate:none !important; transition:none}
}

/* ============ RESPONSIVE DE LA RED DEL SISTEMA ============ */
@media(max-width:980px){
  .sysnet-near path{stroke-width:1.4; opacity:.42}
  .sysnet-far{opacity:.2}
}
@media(max-width:640px){
  .sysnet-far{display:none}
  .sysnet-flow .syf{stroke-width:2.8}
  .sysnet-svg{animation-duration:34s}
}


/* ===== subeya-v21 ===== */


/* ===== 1. BARRA VERTICAL EN EL BLOQUE BLANCO «WEB INTELIGENTE» =====
   Causa: `.glow-in.in::after{box-shadow:0 0 60px -18px}`. Un halo
   exterior con blur enorme y spread muy negativo sobre un
   pseudo-elemento a `inset:-2px` con `border-radius:inherit`.
   Chromium rasteriza ese caso con bandas: acá salía como una barra
   violeta recta colgando del ribbon RECOMENDADO y atravesando la
   tarjeta. Mismo origen que la línea de los planes.
   Solución: el resplandor pasa a ser interior — no puede generar
   bandas fuera de la caja — más una caída suave sin alcance lateral. */
.glow-in::after{content:none}
.glow-in{transition:box-shadow 1.1s var(--ease)}
.buy-card--hot.glow-in.in{
  box-shadow:
    0 26px 44px -30px rgba(124,58,237,.5),
    0 0 0 1px rgba(167,139,250,.3);
}
.tryit.glow-in.in{
  box-shadow:
    0 34px 56px -40px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.14) inset;
}

/* ===== 2. LA RED BLANCA DENTRO DEL GLOW DEL SHOWCASE =====
   El cristal tapaba la red. Se afina el desenfoque y se aclara el
   relleno para que las líneas y los destellos se lean a través,
   y se agrega un glow azul propio detrás de las previews.        */
.showcase{
  background:linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 62%);
  backdrop-filter:blur(7px) saturate(1.18);
  -webkit-backdrop-filter:blur(7px) saturate(1.18);
}
.show-bg{z-index:-2}
.show-bg::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(62% 66% at 74% 14%, rgba(56,132,255,.46), transparent 70%),
    radial-gradient(56% 60% at 14% 90%, rgba(124,58,237,.40), transparent 72%),
    radial-gradient(46% 50% at 50% 50%, rgba(37,99,235,.18), transparent 74%);
}
/* la red gana cuerpo justo en la franja donde viven las previews */
.sysnet-near path{stroke-width:1.45; opacity:.62}
.sysnet-near path:nth-child(even){stroke-width:1.15; opacity:.44}
.sysnet-far{opacity:.3}
.sysnet-nodes .syn{opacity:.95}
.sysnet-halos .syh{opacity:.38}

/* ===== RENDIMIENTO =====
   Animar la red por detrás de un `backdrop-filter` obliga a
   recalcular el desenfoque en cada cuadro. En pantallas chicas el
   cristal pasa a ser un relleno plano: la red sigue viéndose y el
   compositor deja de trabajar de más.                            */
@media(max-width:900px){
  .showcase{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 62%);
  }
  .brw-bar{backdrop-filter:none; -webkit-backdrop-filter:none}
  .show-panel figcaption{backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  .show-bg::before{animation:none}
}


/* ===== subeya-perf ===== */

/* ============================================================
   RENDIMIENTO DE LAS DOS REDES
   Medido con un muestreo de requestAnimationFrame: el hero venía
   a ~500 ms por cuadro y la sección de sistema a ~145 ms.
   Tres causas, todas del mismo tipo — filtros recalculados en
   cada cuadro:
   1) `filter:drop-shadow()` sobre nodos y destellos animados
      (18 desenfoques gaussianos por cuadro en el hero);
   2) `filter:blur(52px)` sobre los halos, que además se animan;
   3) la deriva aplicada al SVG entero, que obliga a re-rasterizar
      la capa desenfocada de la red del sistema.
   Se reemplaza cada filtro por geometría equivalente.
   ============================================================ */

/* 1. el resplandor de nodos y destellos deja de ser un filtro */
.sbnet-nodes .sbn,
.sysnet-nodes .syn,
.sbnet-flow .sbf,
.sysnet-flow .syf{filter:none}
.sbnet-hubs .sbh{filter:none}
/* se compensa con trazo y opacidad, que no cuestan nada */
.sbnet-flow .sbf{stroke-width:3.4; opacity:1}
.sysnet-flow .syf{stroke-width:2.8; opacity:1}
.sbnet-nodes .sbn{opacity:.9}
.sysnet-nodes .syn{opacity:1}
/* los hubs pasan a ser el halo: gradiente radial, sin blur */
.sbnet-hubs .sbh{opacity:.6}

/* 2. los halos del hero ya son gradientes radiales:
      el blur encima era redundante */
.sbnet-halo{filter:none}
.sbnet-halo--a{background:radial-gradient(closest-side, rgba(124,58,237,.34), rgba(124,58,237,.12) 46%, rgba(124,58,237,0) 78%)}
.sbnet-halo--b{background:radial-gradient(closest-side, rgba(236,72,153,.28), rgba(236,72,153,.10) 46%, rgba(236,72,153,0) 76%)}
.sbnet-halo--c{background:radial-gradient(closest-side, rgba(167,139,250,.34), rgba(167,139,250,.12) 48%, rgba(167,139,250,0) 78%)}

/* 3. la deriva se mueve del SVG a los grupos nítidos,
      así la capa lejana desenfocada se cachea una sola vez */
.sysnet-svg{animation:none; transform:scale(1.05)}
.sysnet-near,.sysnet-flow,.sysnet-nodes,.sysnet-halos{
  transform-box:view-box; transform-origin:center;
  animation:syDrift 28s ease-in-out infinite alternate;
}
.sysnet-far{filter:blur(3px); animation:none}

/* 4. el grano dejaba de estar cacheado por el modo de fusión */
.sbnet-grain{mix-blend-mode:normal; opacity:.32}

@media(prefers-reduced-motion:reduce){
  .sysnet-near,.sysnet-flow,.sysnet-nodes,.sysnet-halos{animation:none !important}
}
@media(max-width:640px){
  /* en móvil alcanza con los destellos y los nodos */
  .sysnet-near,.sysnet-flow,.sysnet-nodes,.sysnet-halos{animation:none}
  .sbnet-svg{animation:none; transform:scale(1.06)}
}


/* ===== subeya-glass2 ===== */

/* ============================================================
   CRISTAL SIN `backdrop-filter`
   Medido: quitarlo baja la sección de sistema de 70.8 a 44.6 ms
   por cuadro y el hero de 62.6 a 56.5. Además desenfocaba la red
   blanca justo donde se pidió que se vea.
   El aspecto de cristal se reconstruye con capas translúcidas,
   borde fino y luz interior: mismo resultado, costo cero.
   ============================================================ */
.showcase,.mock,.brw-bar,.show-panel figcaption,.tryit{
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.showcase{
  background:
    linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 58%),
    linear-gradient(0deg, rgba(10,8,24,.28), rgba(10,8,24,.10));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 50px 100px -46px rgba(0,0,0,.72),
    0 1px 0 rgba(255,255,255,.18) inset;
}
.brw-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.show-panel figcaption{
  background:linear-gradient(180deg, rgba(30,24,58,.86), rgba(18,14,38,.9));
}
.tryit{
  background:
    radial-gradient(620px 420px at 104% -24%, rgba(124,58,237,.40), transparent 70%),
    linear-gradient(168deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.13);
}
.mock{
  background:
    linear-gradient(168deg, rgba(255,255,255,.86), rgba(250,248,255,.66));
  border:1.5px dashed rgba(167,139,250,.34);
  box-shadow:
    0 44px 92px -46px rgba(76,29,149,.5),
    0 1px 0 rgba(255,255,255,.95) inset;
}


/* ===== subeya-v22 ===== */


/* ================= 1. HERO CLARO: SIN LÍNEAS CRUZANDO ================= */
/* La red de curvas se dibujaba a lo ancho de toda la sección y pasaba
   por encima del titular, los párrafos, los botones y la maqueta.
   Se retira del hero claro y se reemplaza por atmósfera: halos
   radiales, una grilla arquitectónica confinada a los bordes y grano. */
.sbnet-svg{display:none}

.sbnet-halo{filter:none}
.sbnet-halo--a{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  left:-14vw; top:-6vw;
  background:radial-gradient(closest-side, rgba(124,58,237,.30), rgba(124,58,237,.10) 44%, rgba(124,58,237,0) 76%);
}
.sbnet-halo--b{
  width:44vw; height:44vw; max-width:640px; max-height:640px;
  right:-12vw; top:-14vw;
  background:radial-gradient(closest-side, rgba(236,72,153,.24), rgba(236,72,153,.08) 46%, rgba(236,72,153,0) 76%);
}
.sbnet-halo--c{
  width:56vw; height:40vw; max-width:820px; max-height:600px;
  right:-10vw; bottom:-20vw;
  background:radial-gradient(closest-side, rgba(167,139,250,.30), rgba(167,139,250,.10) 46%, rgba(167,139,250,0) 76%);
}

/* grilla arquitectónica: sólo respira en los bordes, nunca bajo el copy */
.sbnet::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(109,64,201,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(109,64,201,.045) 1px, transparent 1px);
  background-size:132px 132px;
  -webkit-mask-image:radial-gradient(78% 72% at 42% 52%, transparent 0%, transparent 46%, #000 92%);
          mask-image:radial-gradient(78% 72% at 42% 52%, transparent 0%, transparent 46%, #000 92%);
}

/* el velo ya no tiene que pelear contra líneas: se aliviana */
.sbnet-scrim{
  background:
    radial-gradient(48% 60% at 22% 46%, rgba(252,251,255,.58) 0%, rgba(252,251,255,.22) 50%, rgba(252,251,255,0) 82%),
    linear-gradient(0deg, rgba(252,251,255,.62) 0%, rgba(252,251,255,0) 24%);
}
.sbnet-grain{opacity:.26}
.hero-ghost{opacity:.22}

/* ================= 2. LÍNEAS BLANCAS: DETRÁS, NUNCA SOBRE EL TEXTO ==== */
/* Las líneas quedan en el aire libre de la sección; donde hay copy se
   apagan con una capa oscura que devuelve contraste.                    */
.sysnet-near path{opacity:.4}
.sysnet-near path:nth-child(even){opacity:.28}
.sysnet-far{opacity:.2}

.sysnet::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(44% 26% at 25% 21%, rgba(8,6,20,.92), rgba(8,6,20,0) 74%),
    radial-gradient(44% 22% at 25% 74%, rgba(8,6,20,.9),  rgba(8,6,20,0) 74%),
    radial-gradient(52% 20% at 50% 50%, rgba(8,6,20,.72), rgba(8,6,20,0) 76%),
    linear-gradient(180deg, rgba(8,6,20,.62) 0%, rgba(8,6,20,0) 14%),
    linear-gradient(0deg,   rgba(8,6,20,.66) 0%, rgba(8,6,20,0) 14%);
}

/* ================= 3. SALA DE DEMOSTRACIÓN ================= */
/* Los dos previews dejan de superponerse: cada uno con su marco,
   su proporción real y su propio pie.                            */
.showcase{
  background:
    linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 58%),
    linear-gradient(0deg, rgba(6,5,16,.62), rgba(6,5,16,.34));
  border:1px solid rgba(255,255,255,.12);
}
.show-bg-im{animation:none; display:none}

.show-stage{
  display:grid; gap:18px; justify-items:stretch; align-content:center;
}
.showcase{
  align-items:center;
  padding:clamp(32px,3.6vw,50px) clamp(24px,3vw,44px);
  gap:clamp(28px,3vw,44px);
}
@media(min-width:981px){
  .showcase{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:980px){
  .showcase{grid-template-columns:1fr; padding:clamp(26px,5vw,38px) clamp(18px,4vw,28px)}
}
.brw{position:relative; width:100%; margin:0}
.show-panel{
  position:relative; right:auto; bottom:auto;
  width:min(262px,66%); justify-self:end; margin:0;
  transition-delay:.16s;
}
/* la captura define la altura: se ve completa, sin recorte ni scroll */
.brw-view{height:auto; max-height:none; overflow:visible}
.brw-view img,.show-panel img{object-fit:contain; width:100%; height:auto}

@media(max-width:980px){
  .show-panel{width:min(300px,86%); justify-self:center}
}
@media(max-width:560px){
  .show-panel{width:100%}
}

/* ================= 4. RITMO VERTICAL ================= */
/* Estaban en 158 px arriba y abajo: 317 px de vacío entre cada par
   de secciones. Se baja a una escala coherente y progresiva.      */
.sec{padding:clamp(60px,7vw,104px) 0}
.sec--tight{padding:clamp(44px,5vw,72px) 0}
.final{padding:clamp(72px,8vw,120px) 0}
.hero{padding:150px 0 clamp(64px,7vw,104px)}
@media(max-width:768px){
  .sec{padding:clamp(52px,8vw,76px) 0}
  .sec--tight{padding:clamp(38px,6vw,56px) 0}
  .final{padding:clamp(58px,9vw,88px) 0}
  .hero{padding:118px 0 clamp(48px,8vw,72px)}
}
@media(max-width:480px){
  .sec{padding:48px 0}
  .sec--tight{padding:34px 0}
  .final{padding:54px 0}
  .hero{padding:104px 0 44px}
}

/* ================= 6. BOTONES DEL HERO ================= */
.hero-cta .btn{position:relative; isolation:isolate}
.hero-cta .btn::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(120deg,
    rgba(255,255,255,.85) 0%,
    rgba(196,181,253,.55) 26%,
    rgba(124,58,237,.15) 52%,
    rgba(236,72,153,.42) 82%,
    rgba(255,255,255,.7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.7; transition:opacity .24s var(--pol-ease);
}
.hero-cta .btn:hover::after{opacity:1}
/* punto de luz en un extremo del CTA principal */
.hero-cta .btn-free--hero::before,
.hero-cta .btn-primary::before{
  content:''; position:absolute; z-index:1; pointer-events:none;
  top:-2px; left:16%; width:34%; height:56%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
}
.hero-cta .btn-ghost{
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 30px -18px rgba(76,29,149,.5);
}
.hero-cta .btn-ghost:hover{background:#fff}
.hero-cta .btn:focus-visible{outline:2px solid var(--violet); outline-offset:3px}

/* ================= 11. FORMULARIO CLARO Y CONFIABLE ================= */
.xp-panel{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAFE 100%);
  border:1px solid #E8E4F2;
  box-shadow:0 44px 96px -40px rgba(46,28,96,.42);
}
.xp-panel::before{display:none}
.xp-close{
  background:#F3F1F9; color:#5B5570; border:1px solid #E5E1F0;
}
.xp-close:hover{background:#EAE6F6; color:#241F33}
.xp-scroll::-webkit-scrollbar-thumb{background:#D9D4EA}

.xp-kicker{color:#6D28D9}
.xp h3{color:#161327}
.xp h3 em{color:var(--violet)}
.xp-intro{color:#57516E}
.xp-sep{background:#ECE8F6; margin:26px 0 24px}

.xp-tags span{
  background:#F5F3FC; border:1px solid #E5E0F3; color:#514B69;
}
.xp-tags span.hot{
  color:#0F7A3D; border-color:#B7E7CB; background:#EAF9F0;
}

.xp-f label,.xp-legend{color:#2A2540}
.xp-f .opt{color:#7C7695}
.xp-f input[type=text],.xp-f input[type=tel],.xp-f select,.xp-f textarea{
  background:#FFFFFF;
  border:1px solid #DEDAEE;
  color:#1E1A2E;
  box-shadow:0 1px 2px rgba(24,18,48,.05);
}
.xp-f input::placeholder,.xp-f textarea::placeholder{color:#9A94B0}
.xp-f input:focus,.xp-f select:focus,.xp-f textarea:focus{
  border-color:#A78BFA;
  box-shadow:0 0 0 4px rgba(167,139,250,.22);
  background:#fff;
}
.xp-f select option{background:#fff; color:#1E1A2E}
.xp-f.err input,.xp-f.err select,.xp-f.err textarea{
  border-color:#E0645A; box-shadow:0 0 0 4px rgba(224,100,90,.14);
}
.xp-msg{color:#C0392B}

.xp-chips label{
  background:#F7F5FD; border:1px solid #E3DEF3; color:#4A4463;
}
.xp-chips label:hover{border-color:#A78BFA; color:#241F33}
.xp-chips input:checked + label{
  background:#F0EAFE; border-color:#7C3AED; color:#4C1D95;
}
.xp-prog i{background:#EBE7F7}

.xp-cta{
  font-size:1rem; letter-spacing:.005em; text-transform:none; font-weight:800;
  box-shadow:0 16px 34px -16px rgba(124,58,237,.55);
}
.xp-legal{color:#6B6588}
.xp-legal b{color:#3D3758}
.xp-back{background:#F3F1F9; color:#4A4463; border:1px solid #E5E1F0}
.xp-back:hover{background:#EAE6F6; color:#241F33}
.xp-done{color:#0F7A3D; background:#EAF9F0; border:1px solid #B7E7CB}

/* refuerzo de confianza junto al botón, con lo que ya es cierto */
.xp-foot .xp-reassure{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px;
  font-size:.82rem; font-weight:600; color:#4A4463; margin-top:-4px;
}
.xp-foot .xp-reassure span{display:inline-flex; align-items:center; gap:7px}
.xp-foot .xp-reassure span::before{
  content:''; width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  background:#EAF9F0 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7A3D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
  box-shadow:inset 0 0 0 1px #B7E7CB;
}

/* ================= 8. RENDIMIENTO ================= */
.brw-view{scroll-behavior:auto}
.work.in .work-shot .im img{animation:none}

/* ================= REGLA MÓVIL: NADA TITILA ================= */
@media(max-width:900px){
  .sbnet-halo,
  .sysnet-svg,.sysnet-near,.sysnet-flow,.sysnet-nodes,.sysnet-halos,
  .sysnet-nodes .syn,.sysnet-halos .syh,.sysnet-flow .syf,
  .system::after,.final::after,
  /* el launcher de IA sí se mueve en celular: su animación se define
     en la capa v35 y es suave (translate + halo), no titila */
  .btn-free::before,
  .btn.is-loading .ar,
  .fab-main::after,
  .eyebrow .dot,
  .ai-teaser .live,
  .xp-kicker::before,
  .marq-in,
  .show-bg-im{
    animation:none !important;
  }
  /* los puntos que sí informan algo se muestran fijos, no parpadeando */
  .typing i,.ai-typing-dots span,.ai-teaser .dots i{animation:none !important; opacity:.75}
  /* el marquesina queda quieta y legible */
  .marq-in{transform:none}
  .marq{overflow-x:auto; scrollbar-width:none}
  .marq::-webkit-scrollbar{display:none}
}

@media(prefers-reduced-motion:reduce){
  .sbnet::after{opacity:.7}
  .sysnet-near,.sysnet-flow,.sysnet-nodes,.sysnet-halos,
  .sbnet-halo,.marq-in{animation:none !important}
  .marq-in{transform:none}
}


/* ===== subeya-v23 ===== */


/* ============ 1. HERO: FONDO NUEVO SOBRE LA SECCIÓN REAL ============
   Las capas decorativas viejas (.sbnet y sus hijos) se desactivan
   enteras para que nada vuelva a dibujar trazos sobre el contenido. */
.hero > .sbnet{display:none !important}

.hero{
  background:
    radial-gradient(1100px 720px at 84% -18%, rgba(236,72,153,.16), transparent 62%),
    radial-gradient(980px 760px at 6% 8%,    rgba(124,58,237,.20), transparent 64%),
    radial-gradient(1200px 620px at 46% 118%, rgba(167,139,250,.24), transparent 66%),
    linear-gradient(176deg,#FCFBFF 0%, #F2EEFD 44%, #FAF7FF 100%);
}

/* malla de puntos + encuadre arquitectónico, apagados bajo el copy */
.hero .hero-in{position:relative; z-index:2}
.hero-ghost{z-index:0; opacity:.2}

/* ============ 2. CARRUSEL DE LANDINGS: OSCURO CON LÍNEAS BLANCAS ====
   El fondo va en la propia <section class="sec works-sec seam">.
   Antes sólo tenía dos radiales violetas y ninguna línea.          */
.works-sec{
  background:
    radial-gradient(820px 560px at 88% -12%, rgba(124,58,237,.30), transparent 66%),
    radial-gradient(700px 520px at -6% 108%, rgba(124,58,237,.18), transparent 68%),
    linear-gradient(180deg,#08070F 0%, #0B0918 52%, #08070F 100%);
}
.works-sec::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20900%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M-60%20190%20C%20250%2090%2C%20470%20260%2C%20760%20170%20S%201180%2040%2C%201500%20150%27%20stroke-width%3D%271.1%27%20opacity%3D%27.30%27%2F%3E%20%3Cpath%20d%3D%27M-60%20700%20C%20260%20780%2C%20520%20620%2C%20790%20700%20S%201200%20830%2C%201500%20720%27%20stroke-width%3D%271.1%27%20opacity%3D%27.26%27%2F%3E%20%3Cpath%20d%3D%27M120%20-60%20C%20230%20240%2C%20430%20350%2C%20520%20640%20S%20640%20900%2C%20700%20960%27%20stroke-width%3D%27.9%27%20opacity%3D%27.20%27%2F%3E%20%3Cpath%20d%3D%27M1240%20-60%20C%201150%20230%2C%20970%20340%2C%20910%20620%20S%20900%20880%2C%20960%20960%27%20stroke-width%3D%27.9%27%20opacity%3D%27.20%27%2F%3E%20%3Cpath%20d%3D%27M-60%20430%20C%20320%20360%2C%20620%20470%2C%20900%20390%20S%201260%20300%2C%201500%20380%27%20stroke-width%3D%27.8%27%20opacity%3D%27.16%27%2F%3E%20%3Cpath%20d%3D%27M60%2060%20C%20380%20260%2C%20640%20140%2C%20900%20340%20S%201240%20540%2C%201500%20430%27%20stroke-width%3D%27.8%27%20opacity%3D%27.14%27%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%27%23ffffff%27%3E%20%3Ccircle%20cx%3D%27760%27%20cy%3D%27170%27%20r%3D%273.2%27%20opacity%3D%27.55%27%2F%3E%3Ccircle%20cx%3D%27790%27%20cy%3D%27700%27%20r%3D%273.4%27%20opacity%3D%27.5%27%2F%3E%20%3Ccircle%20cx%3D%27520%27%20cy%3D%27640%27%20r%3D%272.8%27%20opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%27910%27%20cy%3D%27620%27%20r%3D%273%27%20opacity%3D%27.45%27%2F%3E%20%3Ccircle%20cx%3D%27900%27%20cy%3D%27390%27%20r%3D%272.6%27%20opacity%3D%27.38%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%2790%27%20r%3D%272.4%27%20opacity%3D%27.35%27%2F%3E%20%3Ccircle%20cx%3D%271200%27%20cy%3D%27830%27%20r%3D%272.6%27%20opacity%3D%27.32%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:cover; background-position:center;
  opacity:1;
}
/* la tarjeta era translúcida (.045) y dejaba pasar las líneas por
   debajo del texto: se le pone una base opaca del mismo tono */
.works-sec .work-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    #0C0A16;
}

/* leve respiro detrás de los titulares, sin tapar las líneas */
.works-sec::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 20% at 50% 12%, rgba(6,5,14,.82), rgba(6,5,14,0) 76%),
    linear-gradient(180deg, rgba(6,5,14,.5) 0%, rgba(6,5,14,0) 12%),
    linear-gradient(0deg,  rgba(6,5,14,.5) 0%, rgba(6,5,14,0) 12%);
}
/* todo el contenido del carrusel por encima de las líneas */
.works-sec > .wrap{position:relative; z-index:1}

@media(max-width:768px){
  .works-sec::before{opacity:.8}
}


/* ===== subeya-v24 ===== */


/* ---- 1. FUERA TODO LO QUE PRODUCÍA EL RESPLANDOR --------------------
   El glow no venía de una regla sino de la suma: tres radiales sobre
   .hero, un radial blanco al 72% en .hero::after, los tres halos de
   .sbnet y el .sbnet-scrim. Apilados daban una mancha luminosa sin
   forma. Se retiran todas las capas, no se les baja la opacidad.     */
.hero > .sbnet,
.sbnet-halo,
.sbnet-scrim,
.sbnet-grain,
.sbnet-svg{display:none !important}

.hero-ghost{display:none !important}

/* ---- 2. FONDO NUEVO: UNA BASE + UNA GRILLA ------------------------- */
.hero{
  background:
    linear-gradient(178deg,#F3EFFA 0%, #E9E2F5 54%, #F1EDF9 100%);
}


/* ---- 3. JERARQUÍA ------------------------------------------------- */
.hero{position:relative; overflow:hidden}
.hero .hero-in{position:relative; z-index:1}
.hero .mock{
  box-shadow:0 30px 64px -34px rgba(46,28,96,.28);
  border:1.5px dashed rgba(167,139,250,.4);
  background:linear-gradient(168deg, rgba(255,255,255,.92), rgba(252,250,255,.78));
}

/* en pantallas angostas el copy ocupa todo el ancho: la grilla
   se retira a la franja superior, que es el único espacio libre */
@media(max-width:980px){
}

@media(prefers-reduced-motion:reduce){
}


/* ===== subeya-v25 ===== */

/* .glow-soft::before (buying y proceso), .plans::before y los radiales
   que había sumado en #proceso y .reviews eran manchas violetas sobre
   fondo blanco. Se retiran; las secciones oscuras no se tocan.       */
.glow-soft::before{content:none !important}
.plans::before,
.plans::after{content:none !important}
#proceso::after,
.reviews::after{content:none !important}

/* la banda de prueba gratis: mismo criterio, sin resplandor */
.freeband-in{
  background:linear-gradient(150deg,#FFFFFF 0%, #FCFBFE 62%, #F7F5FC 100%);
  border:1px solid #E9E4F5;
  box-shadow:0 20px 44px -32px rgba(46,28,96,.28);
}
.freeband-in::after{background:linear-gradient(90deg,transparent,rgba(124,58,237,.28),transparent)}

/* Secciones claras sin relleno propio: dejan ver el ambiente global
   de la v35 (blanco con halos casi imperceptibles). Los bordes y las
   costuras entre secciones se mantienen. */
.buying,.plans,#proceso,.reviews,.freeband{background:transparent}

/* las sombras violetas bajo las tarjetas destacadas también leían como
   glow sobre blanco: pasan a sombra neutra + anillo violeta de 1 px,
   que marca la jerarquía sin manchar el fondo */
.buy-card--hot.glow-in.in{
  box-shadow:
    0 24px 40px -30px rgba(24,18,48,.34),
    0 0 0 1px rgba(124,58,237,.34);
}
.plan--feat{
  box-shadow:
    0 34px 44px -40px rgba(12,10,30,.6),
    0 0 0 1px rgba(167,139,250,.34) inset;
}
.plan--feat.glow-in.in::after{box-shadow:none}
.works-sec .work:hover .work-card{box-shadow:0 34px 70px -30px rgba(0,0,0,.6)}
:where(.work-card,.buy-card,.case-card,.rev-card):hover{
  box-shadow:0 22px 44px -28px rgba(24,18,48,.32);
}
.plan:hover{box-shadow:0 24px 46px -30px rgba(24,18,48,.3)}


/* ===== subeya-v26 ===== */


/* ===== 1. FONDO DEL HERO: FUERA LA GRILLA ===========================
   La grilla de 72 px leía como papel milimetrado. Se reemplaza por una
   composición editorial: base marfil-lavanda, un pliegue de luz en
   diagonal y una banda tenue detrás del mockup. Nada de trama.      */
.hero{
  background:
    linear-gradient(176deg,#F7F4FC 0%, #EFEAF7 46%, #F6F3FB 100%);
}
/* sin tramas ni manchas: base editorial + un pliegue de luz en diagonal */
.hero{border-bottom:1px solid rgba(109,64,201,.14)}
@media(max-width:980px){
}
}

/* ===== 2. FUERA LOS ANILLOS VIOLETAS SOBRE BLANCO ===================
   El anillo degradado de los botones del hero se dibujaba con
   mask-composite y en móvil quedaba desalineado del border-radius:
   se veía como un arco rosa suelto alrededor del botón. Igual pasaba
   con los halos del FAB blanco y del launcher.                      */
.hero-cta .btn::after{content:none !important}
.hero-cta .btn-free--hero::before,
.hero-cta .btn-primary::before{content:none !important}
.fab-main::after{content:none !important}
/* El anillo duro del launcher (::after) queda fuera: era el que se
   veía desalineado. El halo suave (::before) se rehace en la v35. */
.ai-float-btn::after{content:none !important}
.btn-free::before{content:none !important}

/* el botón principal se sostiene con color y una sombra limpia */
.hero-cta .btn-free--hero,
.hero-cta .btn-primary{box-shadow:0 14px 30px -16px rgba(76,29,149,.55)}
.hero-cta .btn-ghost{
  background:#fff; border:1px solid #E4DFF2;
  box-shadow:0 10px 24px -18px rgba(46,28,96,.35);
}
.hero-cta .btn-ghost:hover{border-color:#C4B5FD}

/* ===== 3. PALABRAS DEL TITULAR: ANIMACIÓN EN PC Y EN CELU ========== */
.kin i{font-style:inherit; display:inline-block; opacity:0; transform:translateY(24px)}
.kin.in i{animation:kinUp .92s cubic-bezier(.16,1,.3,1) both}
/* el h1 no debe esperar al observador: entra apenas carga */
h1.display.kin i{animation-duration:.95s}
@media(max-width:900px){
  .kin i{opacity:0; transform:translateY(20px)}
  .kin.in i{animation:kinUp .9s cubic-bezier(.16,1,.3,1) both}
}

/* ===== 4. LA MARQUESINA VUELVE A MOVERSE EN CELU ==================== */
@media(max-width:900px){
  .marq-in{animation:marqRun 34s linear infinite !important}
  .marq{overflow:hidden}
}
@media(max-width:640px){
  .marq-in{animation-duration:26s !important}
}

@media(prefers-reduced-motion:reduce){
  .kin i{opacity:1; transform:none; animation:none !important}
  .marq-in{animation:none !important; transform:none}
  .hero .hero-in::before{display:none}
}


/* ===== subeya-v27 ===== */


/* ===== 1. HERO BLANCO, IGUAL QUE EL ENCABEZADO ===== */
.hero{
  background:var(--white) !important;
  border-bottom:0 !important;
}
.hero > .sbnet{display:none !important}

/* ===== 2. LA FRASE PRINCIPAL SE TIENE QUE VER ENTRAR =====
   El h1 llevaba también la clase .rv, que lo mantenía en
   opacity:0 hasta que el observador le ponía .in. La cascada
   de palabras corría por debajo de esa capa y no se veía.
   Acá se neutraliza .rv sólo para este titular.              */
.hero h1.display.kin{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
.hero h1.display.kin i{
  opacity:0;
  transform:translateY(34px) scale(.94);
  transform-origin:0 100%;
}
.hero h1.display.kin.in i{
  animation:sbWordIn .95s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sbWordIn{
  from{opacity:0; transform:translateY(34px) scale(.94)}
  to  {opacity:1; transform:none}
}
@media(max-width:900px){
  .hero h1.display.kin i{transform:translateY(26px) scale(.95)}
  .hero h1.display.kin.in i{animation-duration:.92s}
  @keyframes sbWordIn{
    from{opacity:0; transform:translateY(26px) scale(.95)}
    to  {opacity:1; transform:none}
  }
}
@media(prefers-reduced-motion:reduce){
  .hero h1.display.kin i{opacity:1 !important; transform:none !important; animation:none !important}
}


/* ===== subeya-v28 ===== */


/* ---------- base: blanco luminoso, no plano ---------- */
.hero{
  background:
    radial-gradient(1200px 780px at 88% -14%, rgba(167,139,250,.13), transparent 62%),
    radial-gradient(1000px 820px at -4% 10%, rgba(196,181,253,.14), transparent 64%),
    radial-gradient(1400px 700px at 52% 116%, rgba(221,214,254,.20), transparent 68%),
    linear-gradient(180deg,#FFFFFF 0%, #FCFBFF 46%, #FFFFFF 100%) !important;
  border-bottom:0 !important;
}

/* ---------- grandes formas orgánicas ---------- */
/* onda amplia que cruza el bloque */
/* volumen arquitectónico en la mitad derecha */
@keyframes sbWave{
  from{transform:rotate(-4deg) translate3d(-1.2%,0,0) scale(1)}
  to  {transform:rotate(-2.4deg) translate3d(1.2%,-1.4%,0) scale(1.035)}
}
@keyframes sbWave2{
  from{transform:translate3d(-1.6%,1%,0) scale(1)}
  to  {transform:translate3d(1.6%,-1.6%,0) scale(1.05)}
}

/* ---------- se reactiva la capa decorativa existente ---------- */
.hero > .sbnet{
  display:block !important;
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

/* curvas finas en lila, sin nodos ni destellos */
.sbnet-svg{
  display:block !important;
  position:absolute; inset:0; width:100%; height:100%;
  animation:sbFloatSvg 64s ease-in-out infinite alternate;
  will-change:transform;
}
.sbnet-links path{
  stroke:#C4B5FD !important;
  stroke-width:1.1 !important;
  opacity:.62 !important;
  filter:none !important;
}
.sbnet-links path:nth-child(even){stroke:#DDD6FE !important; stroke-width:1 !important; opacity:.55 !important}
.sbnet-flow,
.sbnet-hubs{display:none !important}
/* los nodos quedan como puntos de luz, quietos */
.sbnet-nodes .sbn{
  fill:#C4B5FD !important;
  opacity:.4 !important;
  animation:none !important;
  transform:none !important;
  filter:none !important;
}
@keyframes sbFloatSvg{
  from{transform:translate3d(-.8%,-.5%,0) scale(1.02)}
  to  {transform:translate3d(.8%,.6%,0)  scale(1.05)}
}

/* ---------- esferas translúcidas ---------- */
.sbnet-halo{
  display:block !important;
  position:absolute; border-radius:50%;
  filter:none !important; pointer-events:none;
  will-change:transform;
}
.sbnet-halo--a{
  width:38vw; height:38vw; max-width:520px; max-height:520px;
  left:-9vw; top:6vw; right:auto; bottom:auto;
  background:
    radial-gradient(closest-side at 32% 26%, rgba(255,255,255,.98), rgba(255,255,255,.5) 26%, rgba(255,255,255,0) 58%),
    radial-gradient(closest-side, rgba(237,233,254,.9), rgba(196,181,253,.30) 62%, rgba(167,139,250,0) 84%);
  box-shadow:0 46px 90px -50px rgba(109,64,201,.28);
  animation:sbOrb 52s ease-in-out infinite alternate;
}
.sbnet-halo--b{
  width:22vw; height:22vw; max-width:300px; max-height:300px;
  right:6vw; top:-5vw; left:auto; bottom:auto;
  background:
    radial-gradient(closest-side at 36% 30%, rgba(255,255,255,.98), rgba(255,255,255,.45) 28%, rgba(255,255,255,0) 60%),
    radial-gradient(closest-side, rgba(243,232,255,.9), rgba(216,180,254,.26) 62%, rgba(216,180,254,0) 84%);
  box-shadow:0 34px 70px -44px rgba(109,64,201,.24);
  animation:sbOrb 44s ease-in-out infinite alternate-reverse;
}
.sbnet-halo--c{
  width:30vw; height:30vw; max-width:420px; max-height:420px;
  right:-6vw; bottom:-12vw; top:auto; left:auto;
  background:
    radial-gradient(closest-side at 30% 24%, rgba(255,255,255,.96), rgba(255,255,255,.4) 30%, rgba(255,255,255,0) 62%),
    radial-gradient(closest-side, rgba(233,229,253,.9), rgba(167,139,250,.24) 64%, rgba(167,139,250,0) 86%);
  box-shadow:0 40px 84px -48px rgba(109,64,201,.26);
  animation:sbOrb 60s ease-in-out infinite alternate;
}
@keyframes sbOrb{
  from{transform:translate3d(-1.8%,-2%,0) scale(1)}
  to  {transform:translate3d(2%,2.2%,0)  scale(1.055)}
}

/* ---------- textura de puntos ---------- */
.sbnet-grain{
  display:block !important;
  position:absolute; inset:0; pointer-events:none;
  opacity:1 !important; mix-blend-mode:normal !important;
  background-image:radial-gradient(rgba(139,92,246,.26) 1.15px, transparent 1.05px) !important;
  background-size:26px 26px !important;
  -webkit-mask-image:radial-gradient(64% 62% at 26% 50%, transparent 0%, transparent 34%, #000 88%);
          mask-image:radial-gradient(64% 62% at 26% 50%, transparent 0%, transparent 34%, #000 88%);
}

/* ---------- velo: el copy siempre gana ---------- */
.sbnet-scrim{
  display:block !important;
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 58% at 24% 48%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.66) 44%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 16%),
    linear-gradient(0deg,  rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 18%);
}

/* ---------- jerarquía ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero .hero-in{position:relative; z-index:2}
.hero-ghost{display:none !important}
/* el mockup flota sobre el fondo, no se funde con él */
.hero .mock{
  background:linear-gradient(168deg, rgba(255,255,255,.94), rgba(253,252,255,.82));
  border:1.5px dashed rgba(167,139,250,.34);
  box-shadow:
    0 60px 120px -58px rgba(76,29,149,.34),
    0 2px 6px -2px rgba(76,29,149,.06),
    0 1px 0 rgba(255,255,255,.95) inset;
}

/* ---------- Día 5 del protocolo: la garantía deja de ser letra chica ----
   Único cambio de presentación fuera del fondo. No toca el texto:
   la prueba gratis es la reducción de riesgo más fuerte que tiene
   SUBEYA y hoy se lee como una nota al pie.                          */
.hero-free{
  margin-top:-4px; padding:11px 18px 11px 20px;
  border-radius:16px;
  background:linear-gradient(140deg, rgba(245,243,255,.92), rgba(255,255,255,.72));
  border:1px solid rgba(167,139,250,.30);
  box-shadow:0 18px 40px -30px rgba(76,29,149,.30);
  backdrop-filter:none;
}
.hero-free::before{left:0; top:0; bottom:0; width:4px; border-radius:16px 0 0 16px}
.hero-free b{font-size:1.02rem}

/* ---------- responsive: mismas formas, otra escala ---------- */
@media(max-width:980px){
  .sbnet-scrim{
    background:
      radial-gradient(70% 52% at 50% 40%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.66) 46%, rgba(255,255,255,0) 80%),
      linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,0) 14%),
      linear-gradient(0deg,  rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 16%);
  }
  .sbnet-grain{
    -webkit-mask-image:radial-gradient(76% 54% at 50% 44%, transparent 0%, transparent 28%, #000 84%);
            mask-image:radial-gradient(76% 54% at 50% 44%, transparent 0%, transparent 28%, #000 84%);
    background-size:22px 22px !important;
  }
  .sbnet-halo--a{width:64vw; height:64vw; left:-26vw; top:-6vw}
  .sbnet-halo--b{width:40vw; height:40vw; right:-14vw; top:auto; bottom:16%}
  .sbnet-halo--c{width:58vw; height:58vw; right:-24vw; bottom:-22vw}
  .sbnet-links path{stroke-width:1.25 !important; opacity:.4 !important}
}
@media(max-width:560px){
  .hero-free{padding:10px 15px 10px 17px; margin-top:-4px}
  .sbnet-halo--b{display:none}
  .sbnet-grain{background-size:20px 20px !important}
}

/* ---------- movimiento reducido: composición completa, quieta ---------- */
@media(prefers-reduced-motion:reduce){
.sbnet-svg,
.sbnet-halo{animation:none !important}
}


/* ===== subeya-v29 ===== */


/* ---------- el encabezado deja de cortar el fondo ----------
   nav era rgba(255,255,255,.72) + blur, así que recortaba el glow
   en una banda dura. Sin scroll ahora es transparente; apenas se
   scrollea vuelve el vidrio, usando la clase .scrolled que el JS
   ya venía poniendo. Cero JavaScript nuevo.                     */
nav:not(.scrolled){
  background:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom-color:transparent !important;
}

/* ---------- lienzo ---------- */
.hero{
  background:
    radial-gradient(1300px 900px at 92% -18%, rgba(196,181,253,.34), transparent 58%),
    radial-gradient(1100px 900px at -8% 4%,  rgba(214,203,254,.30), transparent 60%),
    radial-gradient(1500px 800px at 50% 120%, rgba(203,190,253,.34), transparent 62%),
    linear-gradient(178deg,#FDFCFF 0%, #F8F6FE 40%, #FCFAFF 100%) !important;
  border-bottom:0 !important;
  position:relative; overflow:hidden; isolation:isolate;
}

/* ---------- cintas: volúmenes amplios que cruzan el bloque ---------- */
@keyframes sbRibbon{
  from{transform:rotate(3deg) translate3d(-1.4%,0,0)}
  to  {transform:rotate(1.6deg) translate3d(1.4%,-1.2%,0) scale(1.03)}
}
@keyframes sbRibbon2{
  from{transform:rotate(-5deg) translate3d(1.4%,0,0)}
  to  {transform:rotate(-3.2deg) translate3d(-1.4%,1.4%,0) scale(1.03)}
}

/* ---------- capa decorativa existente, reactivada ---------- */
.hero > .sbnet{
  display:block !important; position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

/* dos hilos violetas finos, largos. El resto del SVG se apaga */
.sbnet-svg{
  display:block !important; position:absolute; inset:0;
  width:100%; height:100%;
  animation:sbThread 70s ease-in-out infinite alternate; will-change:transform;
}
.sbnet-links path{display:none}
.sbnet-links path:nth-child(1),
.sbnet-links path:nth-child(5){
  display:block;
  stroke:#8B5CF6 !important; stroke-width:1 !important;
  opacity:.42 !important; filter:none !important;
}
.sbnet-flow,.sbnet-hubs,.sbnet-nodes{display:none !important}
@keyframes sbThread{
  from{transform:translate3d(-1%,-.6%,0) scale(1.02)}
  to  {transform:translate3d(1%,.8%,0) scale(1.05)}
}

/* ---------- ESFERAS ----------
   Cada halo aporta 3 esferas: el span + sus dos pseudo-elementos.
   Todas con el mismo modelo de luz: brillo especular arriba a la
   izquierda, cuerpo lila, borde más denso abajo a la derecha.   */
.sbnet-halo,
.sbnet-halo::before,
.sbnet-halo::after{
  border-radius:50%; pointer-events:none;
  background:
    radial-gradient(closest-side at 31% 25%, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 13%, rgba(255,255,255,0) 46%),
    radial-gradient(closest-side at 70% 78%, rgba(139,92,246,.44) 0%, rgba(167,139,250,.22) 42%, rgba(255,255,255,0) 74%),
    radial-gradient(closest-side, rgba(248,246,255,.98) 0%, rgba(221,213,253,.86) 62%, rgba(183,163,247,.66) 92%, rgba(167,139,250,.5) 100%);
  box-shadow:
    0 34px 70px -40px rgba(88,44,180,.34),
    0 0 0 1px rgba(167,139,250,.16),
    0 2px 3px rgba(255,255,255,.95) inset;
}
.sbnet-halo{display:block !important; position:absolute; filter:none !important; will-change:transform}
.sbnet-halo::before,
.sbnet-halo::after{content:''; position:absolute; display:block}

/* esfera mayor, arriba a la derecha */
.sbnet-halo--a{
  width:36vw; height:36vw; max-width:520px; max-height:520px;
  right:-7vw; top:-13vw; left:auto; bottom:auto;
  animation:sbOrbA 56s ease-in-out infinite alternate;
}
.sbnet-halo--a::before{width:26%; height:26%; right:-14%; bottom:16%}
.sbnet-halo--a::after {width:9%;  height:9%;  right:12%; bottom:2%}

/* esfera media, izquierda */
.sbnet-halo--b{
  width:15vw; height:15vw; max-width:210px; max-height:210px;
  left:-4vw; top:58%; right:auto; bottom:auto;
  animation:sbOrbB 48s ease-in-out infinite alternate-reverse;
}
.sbnet-halo--b::before{width:26%; height:26%; right:-30%; bottom:-14%}
.sbnet-halo--b::after {display:none}

/* esfera inferior derecha */
.sbnet-halo--c{
  width:26vw; height:26vw; max-width:370px; max-height:370px;
  right:-9vw; bottom:-13vw; top:auto; left:auto;
  animation:sbOrbC 62s ease-in-out infinite alternate;
}
.sbnet-halo--c::before{width:22%; height:22%; left:-16%; top:6%}
.sbnet-halo--c::after {width:8%;  height:8%;  left:6%;  top:-6%}

@keyframes sbOrbA{from{transform:translate3d(-1.6%,-1.4%,0)} to{transform:translate3d(1.6%,2%,0) scale(1.04)}}
@keyframes sbOrbB{from{transform:translate3d(-2%,2%,0)}      to{transform:translate3d(2.4%,-2.4%,0) scale(1.06)}}
@keyframes sbOrbC{from{transform:translate3d(1.6%,1.6%,0)}   to{transform:translate3d(-1.8%,-1.8%,0) scale(1.05)}}

/* ---------- grillas de puntos en dos esquinas ---------- */
.sbnet-grain{
  display:block !important; position:absolute; inset:0; pointer-events:none;
  opacity:1 !important; mix-blend-mode:normal !important;
  background-image:radial-gradient(rgba(139,92,246,.30) 1.3px, transparent 1.3px) !important;
  background-size:24px 24px !important;
  -webkit-mask-image:
     radial-gradient(9% 13% at 7% 20%,  #000 0%, #000 52%, transparent 100%),
     radial-gradient(8% 11% at 88% 80%, #000 0%, #000 52%, transparent 100%);
          mask-image:
     radial-gradient(9% 13% at 7% 20%,  #000 0%, #000 52%, transparent 100%),
     radial-gradient(8% 11% at 88% 80%, #000 0%, #000 52%, transparent 100%);
}

/* ---------- velo: el copy manda ---------- */
.sbnet-scrim{
  display:block !important; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 56% at 25% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.58) 46%, rgba(255,255,255,0) 80%);
}

/* ---------- jerarquía ---------- */
.hero .hero-in{position:relative; z-index:2}
.hero-ghost{display:none !important}
.hero .mock{
  background:linear-gradient(168deg, rgba(255,255,255,.9), rgba(253,252,255,.74));
  border:1.5px dashed rgba(167,139,250,.36);
  box-shadow:0 60px 120px -58px rgba(76,29,149,.32), 0 1px 0 rgba(255,255,255,.95) inset;
}

/* ---------- móvil: mismas piezas, otra escala ---------- */
@media(max-width:980px){
  .sbnet-scrim{background:radial-gradient(72% 46% at 50% 42%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.6) 48%, rgba(255,255,255,0) 82%)}
  .sbnet-halo--a{width:62vw; height:62vw; right:-24vw; top:-22vw}
  .sbnet-halo--b{width:30vw; height:30vw; left:-12vw; top:52%}
  .sbnet-halo--c{width:52vw; height:52vw; right:-24vw; bottom:-24vw}
  .sbnet-grain{
    background-size:20px 20px !important;
    -webkit-mask-image:
       radial-gradient(20% 9% at 12% 12%, #000 0%, #000 52%, transparent 100%),
       radial-gradient(18% 8% at 86% 84%, #000 0%, #000 52%, transparent 100%);
            mask-image:
       radial-gradient(20% 9% at 12% 12%, #000 0%, #000 52%, transparent 100%),
       radial-gradient(18% 8% at 86% 84%, #000 0%, #000 52%, transparent 100%);
  }
  .sbnet-links path:nth-child(1),.sbnet-links path:nth-child(5){stroke-width:1.15 !important; opacity:.34 !important}
}

/* ---------- las esferas también respiran en el celular ----------
   La regla "nada titila en móvil" de la v22 apagaba .sbnet-halo.
   Acá vuelven, pero solo con deriva lenta de transform: nunca
   cambian de opacidad, así que no parpadean.                    */
@media(max-width:900px){
  .sbnet-halo--a{animation:sbOrbA 60s ease-in-out infinite alternate !important}
  .sbnet-halo--b{animation:sbOrbB 52s ease-in-out infinite alternate-reverse !important}
  .sbnet-halo--c{animation:sbOrbC 66s ease-in-out infinite alternate !important}
}

/* ---------- movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
.sbnet-svg,
.sbnet-halo{animation:none !important}
}


/* ===== subeya-v30 ===== */


/* ---------- lienzo: blanco con luz, sin manchas ---------- */
.hero{
  background:
    radial-gradient(1300px 820px at 84% -10%, rgba(196,181,253,.20), transparent 58%),
    radial-gradient(1000px 760px at -6% 22%,  rgba(214,203,254,.16), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, #FBFAFF 52%, #FFFFFF 100%) !important;
}

/* ---------- dos planos de luz, muy abiertos ---------- */
@keyframes sbPlane{
  from{transform:translate3d(-1.6%,0,0)}
  to  {transform:translate3d(1.6%,0,0)}
}

/* ---------- capa técnica ---------- */
.hero > .sbnet{
  display:block !important; position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

/* ARCOS CONCÉNTRICOS: los tres halos pasan a ser anillos vacíos,
   y cada uno aporta dos anillos más con sus pseudo-elementos.
   Nueve círculos finos = diagrama orbital, no burbujas.        */
.sbnet-halo,
.sbnet-halo::before,
.sbnet-halo::after{
  border-radius:50%;
  background:none !important;
  box-shadow:none !important;
  border:1px solid rgba(124,58,237,.20);
  pointer-events:none;
}
.sbnet-halo{display:block !important; position:absolute; filter:none !important; will-change:transform}
.sbnet-halo::before,.sbnet-halo::after{content:''; position:absolute; display:block}

/* sistema mayor, centrado fuera del lienzo a la derecha */
.sbnet-halo--a{
  width:66vw; height:66vw; max-width:940px; max-height:940px;
  right:-24vw; top:-16vw; left:auto; bottom:auto;
  border-color:rgba(124,58,237,.16);
  animation:sbSpin 150s linear infinite;
}
.sbnet-halo--a::before{inset:11%;  border-color:rgba(124,58,237,.15)}
.sbnet-halo--a::after {inset:23%;  border-color:rgba(124,58,237,.22)}

/* sistema menor, abajo a la izquierda */
.sbnet-halo--b{
  width:34vw; height:34vw; max-width:460px; max-height:460px;
  left:-15vw; bottom:-14vw; right:auto; top:auto;
  border-color:rgba(124,58,237,.14);
  animation:sbSpinRev 190s linear infinite;
}
.sbnet-halo--b::before{inset:15%; border-color:rgba(124,58,237,.16)}
.sbnet-halo--b::after {inset:32%; border-color:rgba(124,58,237,.10)}

/* punto de anclaje: un solo círculo relleno, chico y nítido */
.sbnet-halo--c{
  width:14px; height:14px; max-width:14px; max-height:14px;
  right:calc(24vw - 7px); top:calc(17vw - 7px); left:auto; bottom:auto;
  background:#7C3AED !important; border:0;
  box-shadow:0 0 0 7px rgba(124,58,237,.12) !important;
  animation:none;
}
.sbnet-halo--c::before,.sbnet-halo--c::after{display:none}

@keyframes sbSpin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes sbSpinRev{from{transform:rotate(360deg)} to{transform:rotate(0)}}

/* dos trazos finos que cruzan, del SVG que ya existe */
.sbnet-svg{
  display:block !important; position:absolute; inset:0; width:100%; height:100%;
  animation:none !important; transform:none !important;
}
.sbnet-links path{display:none}
.sbnet-links path:nth-child(1),
.sbnet-links path:nth-child(5){
  display:block; stroke:#7C3AED !important;
  stroke-width:1 !important; opacity:.26 !important; filter:none !important;
}
.sbnet-flow,.sbnet-hubs,.sbnet-nodes{display:none !important}

/* retícula de puntos, alineada al sistema de arcos
   (la deriva lenta se la da la v36: acá ya no se bloquea) */
.sbnet-grain{
  display:block !important; position:absolute; inset:0; pointer-events:none;
  opacity:1 !important; mix-blend-mode:normal !important;
  background-image:radial-gradient(rgba(124,58,237,.26) 1.2px, transparent 1.2px) !important;
  background-size:28px 28px !important;
  -webkit-mask-image:
     radial-gradient(11% 15% at 6% 22%,  #000 0%, #000 48%, transparent 100%),
     radial-gradient(10% 13% at 90% 84%, #000 0%, #000 48%, transparent 100%);
          mask-image:
     radial-gradient(11% 15% at 6% 22%,  #000 0%, #000 48%, transparent 100%),
     radial-gradient(10% 13% at 90% 84%, #000 0%, #000 48%, transparent 100%);
}

.sbnet-scrim{
  display:block !important; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(48% 54% at 24% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 80%);
}

.hero .hero-in{position:relative; z-index:2}
.hero-ghost{display:none !important}
.hero .mock{
  background:linear-gradient(168deg, rgba(255,255,255,.95), rgba(253,252,255,.84));
  border:1.5px dashed rgba(167,139,250,.34);
  box-shadow:0 54px 110px -60px rgba(76,29,149,.28), 0 1px 0 rgba(255,255,255,.95) inset;
}

@media(max-width:980px){
  .sbnet-halo--a{width:150vw; height:150vw; right:-64vw; top:-46vw}
  .sbnet-halo--b{width:86vw; height:86vw; left:-40vw; bottom:-30vw}
  .sbnet-halo--c{right:10vw; top:auto; bottom:26vw}
  .sbnet-scrim{background:radial-gradient(72% 46% at 50% 44%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.6) 48%, rgba(255,255,255,0) 82%)}
  .sbnet-grain{background-size:22px 22px !important}
}
@media(prefers-reduced-motion:reduce){
.sbnet-halo{animation:none !important}
}


/* ===== subeya-v31 ===== */


/* ══ ONDAS DEL HERO ══
   Tres cintas anchas que cruzan en diagonal y ondulan. Van POR
   DEBAJO de los arcos y la retícula, así el fondo tiene capas. */
.hero > .sbnet::before,
.hero > .sbnet::after,
.sbnet-scrim::before{
  content:''; position:absolute; pointer-events:none; z-index:-1;
  will-change:transform, border-radius;
}
.hero > .sbnet::before{
  left:-26%; right:-26%; top:-14%; height:64%;
  border-radius:44% 56% 52% 48% / 58% 42% 58% 42%;
  background:linear-gradient(102deg, rgba(196,181,253,.34) 0%, rgba(233,229,254,.20) 44%, rgba(255,255,255,0) 74%);
  animation:sbOnda1 34s ease-in-out infinite alternate;
}
.hero > .sbnet::after{
  left:-30%; right:-18%; bottom:-18%; height:66%;
  border-radius:54% 46% 46% 54% / 42% 58% 42% 58%;
  background:linear-gradient(282deg, rgba(167,139,250,.28) 0%, rgba(221,214,254,.16) 46%, rgba(255,255,255,0) 76%);
  animation:sbOnda2 44s ease-in-out infinite alternate;
}
.sbnet-scrim::before{
  left:-20%; right:-20%; top:22%; height:52%;
  border-radius:48% 52% 56% 44% / 50% 46% 54% 50%;
  background:linear-gradient(58deg, rgba(236,72,153,.11) 0%, rgba(233,229,254,.14) 50%, rgba(255,255,255,0) 80%);
  animation:sbOnda3 54s ease-in-out infinite alternate;
}
@keyframes sbOnda1{
  from{transform:translate3d(-2.5%,0,0) rotate(-2deg) scaleY(1);
        border-radius:44% 56% 52% 48% / 58% 42% 58% 42%}
  to  {transform:translate3d(2.5%,-2.5%,0) rotate(1.5deg) scaleY(1.10);
        border-radius:56% 44% 46% 54% / 44% 58% 42% 56%}
}
@keyframes sbOnda2{
  from{transform:translate3d(2.5%,1.5%,0) rotate(1.5deg) scaleY(1);
        border-radius:54% 46% 46% 54% / 42% 58% 42% 58%}
  to  {transform:translate3d(-2.5%,-1.5%,0) rotate(-2deg) scaleY(1.12);
        border-radius:42% 58% 58% 42% / 56% 44% 56% 44%}
}
@keyframes sbOnda3{
  from{transform:translate3d(-2%,1%,0) scaleY(1);
        border-radius:48% 52% 56% 44% / 50% 46% 54% 50%}
  to  {transform:translate3d(2%,-1.6%,0) scaleY(1.14);
        border-radius:58% 42% 44% 56% / 44% 56% 46% 54%}
}
/* el velo deja pasar más onda y sigue protegiendo el copy */
.sbnet-scrim{
  background:radial-gradient(44% 50% at 24% 50%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.48) 50%, rgba(255,255,255,0) 82%) !important;
}

/* el titular nuevo es más largo: baja un escalón la escala */
.hero h1.display{font-size:clamp(2.5rem,4.9vw,4.35rem); line-height:1.03}
@media(max-width:980px){.hero h1.display{font-size:clamp(2.3rem,8.4vw,3.3rem)}}

/* ══ LAS TRES PATAS ══ */
.hero-tri{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:26px 0 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.hero-tri > div{padding:18px 20px 18px 0; position:relative}
.hero-tri > div + div{padding-left:22px}
.hero-tri > div + div::before{
  content:''; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:var(--line);
}
.hero-tri b{display:block; font-size:1.02rem; font-weight:800; color:var(--ink); letter-spacing:-.01em}
.hero-tri span{display:block; font-size:.86rem; font-weight:600; color:var(--muted); margin-top:5px; line-height:1.34}
@media(max-width:980px){
  .hero-tri{grid-template-columns:1fr; }
  .hero-tri > div{padding:14px 0}
  .hero-tri > div + div{padding-left:0; border-top:1px solid var(--line)}
  .hero-tri > div + div::before{display:none}
}

/* ══ BOTONES EN ORACIÓN ══ */
.btn,.btn *,.cta,.xp-cta,.buy-card,.plan .btn{text-transform:none !important}
.free-tag{text-transform:none !important; letter-spacing:.02em}

/* ══ ORDEN DE PLANES ══
   El a medida va primero y arranca la lectura. La destacada
   conserva su marco pero deja de ser la única con peso.        */
.plan--custom{order:0}
.plan--custom .plan-for{color:#C9B3FF}
.plan--custom .price .now{font-size:2.6rem}
@media(min-width:981px){
  .plans-grid{align-items:stretch}
}

/* ══ movimiento reducido ══ */
@media(prefers-reduced-motion:reduce){
  .hero > .sbnet::before,.hero > .sbnet::after,.sbnet-scrim::before{animation:none !important}
}


/* ===== subeya-v32 ===== */


/* ══ 1 · LA FRASE PRINCIPAL ══
   Sube: menos aire arriba, más peso abajo, y entra palabra por
   palabra con un desplazamiento más largo para que se note.     */
.hero{padding-top:126px}
@media(max-width:980px){.hero{padding-top:104px}}
.hero .eyebrow{margin-bottom:22px}
.hero h1.display{
  margin:0 0 26px;
  font-size:clamp(2.7rem,5.4vw,4.8rem);
  line-height:1.02; letter-spacing:-.032em;
}
@media(max-width:980px){.hero h1.display{font-size:clamp(2.5rem,9.2vw,3.6rem)}}
.hero .lede{max-width:38ch}

/* palabras: entrada más marcada, visible en PC y en celular */
.hero h1.display.kin i{
  opacity:0; transform:translateY(48px) rotate(2.4deg) scale(.92);
  transform-origin:0 100%; filter:blur(6px);
}
.hero h1.display.kin.in i{animation:sbWordUp .95s cubic-bezier(.16,1,.3,1) both}
@keyframes sbWordUp{
  from{opacity:0; transform:translateY(48px) rotate(2.4deg) scale(.92); filter:blur(6px)}
  60% {filter:blur(0)}
  to  {opacity:1; transform:none; filter:blur(0)}
}
@media(max-width:900px){
  .hero h1.display.kin i{transform:translateY(38px) rotate(2deg) scale(.93)}
  .hero h1.display.kin.in i{animation-duration:.82s}
}

/* ══ 2 · LOS TRES BOTONES ══
   Entran escalonados y se ven en los dos. Los blancos con borde. */
.hero-cta{gap:14px; flex-wrap:wrap}
.hero-cta .btn{opacity:0; transform:translateY(26px) scale(.96)}
.hero-cta.in .btn{animation:sbBtnIn .68s cubic-bezier(.16,1,.3,1) both}
.hero-cta.in .btn:nth-child(1){animation-delay:.06s}
.hero-cta.in .btn:nth-child(2){animation-delay:.20s}
.hero-cta.in .btn:nth-child(3){animation-delay:.34s}
@keyframes sbBtnIn{
  from{opacity:0; transform:translateY(26px) scale(.96)}
  to  {opacity:1; transform:none}
}
/* borde de color en los blancos */
.btn-ghost{
  border:1.6px solid #C4B5FD !important;
  background:#fff;
  box-shadow:0 10px 26px -18px rgba(76,29,149,.42);
}
.btn-ghost:hover{
  border-color:var(--violet) !important;
  box-shadow:0 16px 34px -18px rgba(124,58,237,.5);
  transform:translateY(-2px);
}
.btn-ghost--dark{
  border-color:rgba(196,181,253,.5) !important; background:transparent;
}
.ig-pill{border:1.6px solid #C4B5FD !important}
.ig-pill:hover{border-color:var(--violet) !important}

/* ══ 3 · INSTAGRAM, DEBAJO DE LOS TRABAJOS ══ */
.works-social{
  display:flex; justify-content:center;
  margin:44px 0 6px; padding-top:34px;
  border-top:1px solid rgba(255,255,255,.12);
}
.works-sec .ig-pill{
  background:rgba(255,255,255,.06); color:#EFECFA;
  border-color:rgba(196,181,253,.42) !important;
  padding:14px 24px 14px 18px; font-size:.98rem;
}
.works-sec .ig-pill b{color:#C4B5FD}
.works-sec .ig-pill:hover{background:rgba(255,255,255,.11); transform:translateY(-2px)}

/* ══ 4 · BURBUJAS DEL ASISTENTE ══
   Entrada con rebote suave desde el lado que corresponde, y el
   indicador de escritura respira mientras la IA piensa.         */
.ai-message-bubble{
  animation:sbBubIn .46s cubic-bezier(.18,1.3,.4,1) both;
  transform-origin:0 100%;
}
.ai-message-bubble.user{transform-origin:100% 100%}
@keyframes sbBubIn{
  from{opacity:0; transform:translateY(16px) scale(.86)}
  to  {opacity:1; transform:none}
}
.ai-typing-dots span{animation:sbType 1s ease-in-out infinite}
.ai-typing-dots span:nth-child(2){animation-delay:.14s}
.ai-typing-dots span:nth-child(3){animation-delay:.28s}
@keyframes sbType{
  0%,60%,100%{transform:translateY(0); opacity:.45}
  30%        {transform:translateY(-6px); opacity:1}
}
/* chat simulado del hero: entrada más marcada */
.bub.show{animation:sbBubIn .5s cubic-bezier(.18,1.3,.4,1) both}
.bub.out.show{transform-origin:100% 100%}
.wa-chip.show{animation:sbChip .6s cubic-bezier(.16,1,.3,1) both}
@keyframes sbChip{
  from{opacity:0; transform:translateY(18px) scale(.9)}
  to  {opacity:1; transform:none}
}

/* ══ 5 · RESEÑAS CON PESO ══ */
.reviews{position:relative; overflow:hidden}
.reviews::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 44% at 82% 10%, rgba(167,139,250,.20), transparent 68%),
    radial-gradient(40% 40% at 10% 92%, rgba(236,72,153,.13), transparent 70%);
}
.reviews > .wrap{position:relative; z-index:1}
.reviews .rev{
  border:1px solid rgba(167,139,250,.34) !important;
  box-shadow:0 26px 60px -34px rgba(76,29,149,.34), 0 1px 0 rgba(255,255,255,.8) inset;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.reviews .rev:hover{
  transform:translateY(-5px);
  border-color:var(--violet) !important;
  box-shadow:0 36px 78px -32px rgba(124,58,237,.46);
}
.reviews .rev-stars{filter:drop-shadow(0 0 10px rgba(245,158,11,.5))}
.reviews .rev-av{box-shadow:0 0 0 3px rgba(167,139,250,.24)}

/* ══ 6 · ANIMACIONES VISIBLES EN LOS DOS ══
   Los reveals pasan a ser más largos y con más recorrido, y en
   celular ya no se recortan.                                     */
.js .rv{transform:translateY(38px) scale(.985)}
.js .rv.in{transform:none; opacity:1}
.js .rv{transition:opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1)}
@media(max-width:900px){
  /* en celular se acorta apenas el recorrido, NO se desactiva */
  .js .rv{transform:translateY(32px) scale(.988)}
  .js .rv{transition-duration:.95s}
  /* los reveals y las entradas quedan activos en celular */
  .hero-cta.in .btn,
  .hero h1.display.kin.in i,
  .ai-message-bubble,
  .bub.show,.wa-chip.show{animation-play-state:running !important}
  .flow.in .fl-step{animation-play-state:running !important}
  .marq-in{animation:marqRun 26s linear infinite !important}
}

@media(prefers-reduced-motion:reduce){
  .hero h1.display.kin i,.hero-cta .btn{opacity:1 !important; transform:none !important; animation:none !important; filter:none !important}
  .ai-message-bubble,.bub.show,.wa-chip.show{animation:none !important}
  .ai-typing-dots span{animation:none !important}
}


/* ===== subeya-v33 ===== */


/* ══ 1 · BOTONES CLAROS SOBRE FONDO OSCURO ══
   La regla de la v32 puso background:#fff en todo .btn-ghost y
   pisó el fondo transparente de las variantes oscuras: quedaban
   con texto blanco sobre blanco, ilegibles.                     */
.btn-ghost--dark{
  background:transparent !important;
  color:#fff !important;
  border:1.6px solid rgba(196,181,253,.55) !important;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.6) !important;
}
.btn-ghost--dark:hover{
  background:rgba(196,181,253,.12) !important;
  border-color:#C4B5FD !important;
  color:#fff !important;
}
.btn-ghost--dark .ar{color:#C4B5FD}
.plan .btn-ghost{
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
  border:1.6px solid rgba(196,181,253,.42) !important;
}
.plan .btn-ghost:hover{
  background:rgba(255,255,255,.13) !important;
  border-color:#C4B5FD !important;
}
.plan .btn-ghost .mp-mark{filter:none}

/* ══ 2 · LA CAJA DE LA PRUEBA GRATIS, CON AIRE ══ */
.hero-free{
  margin:30px 0 34px !important;
  padding:24px 28px 24px 30px !important;
  border-radius:18px !important;
  line-height:1.5;
}
.hero-free::before{width:5px !important}
.hero-free b{font-size:1.08rem !important; line-height:1.4}
.hero-free span{margin-top:10px !important; font-size:.97rem; line-height:1.55}
@media(max-width:560px){
  .hero-free{padding:20px 20px 20px 22px !important; margin:24px 0 28px !important}
  .hero-free span{margin-top:8px !important}
}


/* ===== subeya-v34 ===== */


/* ══ 1 · BLANCO PURO ══
   Fuera los lavados violetas, las ondas y los halos difusos.
   Queda el dibujo: arcos, retícula de puntos y dos trazos finos. */
/* transparente, no blanco fijo: deja ver el ambiente global de la v35
   (que es blanco en un 97%). El dibujo técnico se mantiene igual. */
.hero{background:transparent !important}
.hero > .sbnet::before,
.hero > .sbnet::after{content:none !important; display:none !important}
/* El scrim quedaba anulado y sin uso. En la v36 se reaprovecha como
   órbita (su ::before es el satélite), sin agregar markup nuevo. */
.hero .glow,.hero .g1,.hero .g2{display:none !important}

/* el dibujo gana definición sobre blanco */
.sbnet-halo,
.sbnet-halo::before,
.sbnet-halo::after{
  background:none !important; box-shadow:none !important;
  border:1.4px solid rgba(124,58,237,.26) !important;
}
/* el velo de contraste del texto lo toma ahora .hero::after (v36) */
.sbnet-halo--a{border-color:rgba(124,58,237,.22) !important}
.sbnet-halo--a::before{border-color:rgba(124,58,237,.20) !important}
.sbnet-halo--a::after {border-color:rgba(124,58,237,.30) !important}
.sbnet-halo--b{border-color:rgba(124,58,237,.20) !important}
.sbnet-halo--b::before{border-color:rgba(124,58,237,.24) !important}
.sbnet-halo--b::after {border-color:rgba(124,58,237,.14) !important}
.sbnet-halo--c{
  background:#7C3AED !important; border:0 !important;
  box-shadow:0 0 0 8px rgba(124,58,237,.14) !important;
}
.sbnet-links path:nth-child(1),
.sbnet-links path:nth-child(5){
  stroke:#7C3AED !important; stroke-width:1.15 !important; opacity:.34 !important;
}
.sbnet-grain{
  background-image:radial-gradient(rgba(124,58,237,.34) 1.3px, transparent 1.3px) !important;
}
.hero .mock{
  background:#fff !important;
  border:1.5px dashed rgba(167,139,250,.42) !important;
  box-shadow:0 34px 80px -52px rgba(46,28,96,.30) !important;
}

/* ══ 2 · ANIMACIONES DEL PRIMER BLOQUE, MÁS VISIBLES EN CELULAR ══ */
@media(max-width:900px){
  /* palabras: más recorrido y más tiempo, para que se lean entrando */
  /* sin !important: una declaración !important le gana a la
     animación y dejaba las palabras en opacidad 0 para siempre */
  .hero h1.display.kin i{
    opacity:0;
    transform:translateY(54px) rotate(3deg) scale(.90);
    filter:blur(7px);
  }
  /* propiedades sueltas: el shorthand con !important reseteaba el
     animation-delay inline que pone el JS y todas las palabras
     entraban juntas */
  .hero h1.display.kin.in i{
    animation-name:sbWordUpM !important;
    animation-duration:1s !important;
    animation-timing-function:cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode:both !important;
  }
  @keyframes sbWordUpM{
    from{opacity:0; transform:translateY(54px) rotate(3deg) scale(.90); filter:blur(7px)}
    55% {filter:blur(0)}
    to  {opacity:1; transform:none; filter:blur(0)}
  }
  /* botones: entran con más desplazamiento y más separados */
  .hero-cta .btn{opacity:0; transform:translateY(34px) scale(.94)}
  .hero-cta.in .btn{
    animation-name:sbBtnInM !important;
    animation-duration:.78s !important;
    animation-timing-function:cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode:both !important;
  }
  .hero-cta.in .btn:nth-child(1){animation-delay:.10s !important}
  .hero-cta.in .btn:nth-child(2){animation-delay:.28s !important}
  .hero-cta.in .btn:nth-child(3){animation-delay:.46s !important}
  @keyframes sbBtnInM{
    from{opacity:0; transform:translateY(34px) scale(.94)}
    to  {opacity:1; transform:none}
  }
  /* el resto del hero acompaña */
  .hero .eyebrow,.hero .lede,.hero-free{transition-duration:.8s !important}
  /* el dibujo también se mueve en celular */
  .sbnet-halo--a{animation:sbSpin 120s linear infinite !important}
  .sbnet-halo--b{animation:sbSpinRev 150s linear infinite !important}
}

/* ══ 3 · BURBUJA DEL ASISTENTE ══
   Entrada con rebote, más recorrido, en PC y en celular.        */
.ai-message-bubble{
  animation:sbBubIn2 .52s cubic-bezier(.18,1.34,.42,1) both !important;
  transform-origin:0 100% !important;
}
.ai-message-bubble.user{transform-origin:100% 100% !important}
@keyframes sbBubIn2{
  from{opacity:0; transform:translateY(22px) scale(.80)}
  70% {opacity:1; transform:translateY(-3px) scale(1.02)}
  to  {opacity:1; transform:none}
}
.ai-message{animation:sbMsgIn .52s cubic-bezier(.18,1.34,.42,1) both}
@keyframes sbMsgIn{from{opacity:0} to{opacity:1}}
.ai-typing-dots span{animation:sbType 1s ease-in-out infinite !important}

@media(prefers-reduced-motion:reduce){
  .ai-message-bubble,.ai-message{animation:none !important; opacity:1 !important; transform:none !important}
  .sbnet-halo{animation:none !important}
  .hero h1.display.kin i,.hero-cta .btn{animation:none !important; opacity:1 !important; transform:none !important; filter:none !important}
}


/* ===== subeya-v35 ===== */


/* ══ 1 · FONDO DE LAS SECCIONES CLARAS ══════════════════════
   Antes esto eran dos capas fijas a pantalla completa (body::before
   y body::after) con halos animados. Medido: costaban ~20 FPS en
   desktop sólo por componerlas detrás de todo el contenido, incluso
   sin animación. Ahora el mismo lavado va como degradado estático
   en cada sección clara: cero costo de compositing, y el movimiento
   queda donde se ve de verdad, que es el hero. */
.buying,#proceso,.reviews,.freeband,#faq{
  background:
    radial-gradient(52% 40% at 84% 8%,  rgba(124,58,237,.045), transparent 70%),
    radial-gradient(48% 38% at 12% 92%, rgba(255,243,228,.75), transparent 72%),
    #FFFFFF;
}
.hero{
  background:
    radial-gradient(40% 34% at 10% 6%, rgba(124,58,237,.05), transparent 72%),
    #FFFFFF !important;
}

/* ══ 2 · BURBUJA FLOTANTE DEL ASISTENTE ═══════════════════════
   Solo el botón que abre el chat. El panel, sus burbujas internas,
   su lógica y su endpoint quedan intactos.
   La flotación usa la propiedad `translate`, no `transform`, así
   no pisa el `transform:scale()` del hover que ya existía: las dos
   se componen y no hay salto de posición. */
.ai-float-btn{
  animation:
    sbAiIn    .8s cubic-bezier(.16,1,.3,1) both,
    sbAiFloat 4.6s ease-in-out .85s infinite;
}
@keyframes sbAiIn{
  from{opacity:0; translate:0 20px}
  to  {opacity:1; translate:0 0}
}
@keyframes sbAiFloat{
  0%,100%{translate:0 0}
  50%    {translate:0 -6px}
}

/* halo violeta suave: perfectamente circular, detrás del ícono y
   sin capturar clics. Reemplaza al anillo duro que se veía suelto. */
.ai-float-btn::before{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(124,58,237,0)    56%,
    rgba(167,139,250,.38) 76%,
    rgba(124,58,237,0)    100%);
  opacity:0;
  animation:sbAiHalo 4.6s ease-in-out .85s infinite;
}
@keyframes sbAiHalo{
  0%,100%{opacity:0;   transform:scale(.9)}
  50%    {opacity:.85; transform:scale(1.06)}
}

/* con mensaje sin leer late más seguido, pero sigue siendo el mismo
   movimiento suave (antes se cambiaba por un escalado que peleaba
   con el hover) */
.ai-float-btn.has-msg{
  animation:
    sbAiIn    .8s cubic-bezier(.16,1,.3,1) both,
    sbAiFloat 2.4s ease-in-out infinite;
}
.ai-float-btn.has-msg::before{animation-duration:2.4s; animation-delay:0s}

/* al pasar el mouse, al enfocar con teclado o con el chat abierto la
   animación se pausa: queda quieta donde está, sin saltos */
.ai-float-btn:hover,
.ai-float-btn:focus-visible,
body.chat-open .ai-float-btn{animation-play-state:paused}
.ai-float-btn:hover::before,
.ai-float-btn:focus-visible::before{animation-play-state:paused}
body.chat-open .ai-float-btn::before{animation:none; opacity:0}

/* ══ 3 · ACCESIBILIDAD DE MOVIMIENTO ══ */
@media(prefers-reduced-motion:reduce){
  .ai-float-btn{animation:none !important; opacity:1 !important; translate:none !important}
  .ai-float-btn::before{animation:none !important; opacity:0 !important}
}


/* ===== subeya-v36 ===== */

/* ══════════════════════════════════════════════════════════════
   HERO + PLANES · RED NEURONAL
   El dibujo anterior del hero (arcos, órbita, trazos, grano) se
   apaga entero y lo reemplaza .nnet, que es markup decorativo
   nuevo: no toca contenido, no captura clics y va detrás de todo.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · fuera el dibujo viejo ── */
.hero > .sbnet{display:none !important}

/* ── 2 · glows de fondo que respiran ── */
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(44% 56% at 76% 26%, rgba(124,58,237,.20), transparent 70%),
    radial-gradient(38% 46% at 26% 84%, rgba(167,139,250,.16), transparent 72%);
  /* sin respiración: animar la opacidad de una capa del tamaño del
     hero la repinta entera en cada frame y costaba 9 FPS. El
     movimiento del bloque ya lo aporta la red. */
}
/* Grano por encima de la red, siempre debajo del contenido.
   Sin mix-blend-mode: medido, el modo multiply sobre una capa del
   tamaño del hero costaba 12 FPS en desktop. Sobre blanco el
   resultado visual es prácticamente el mismo bajando la opacidad. */
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--nnet-grano);
  background-size:160px 160px; opacity:.1;
}
:root{
  --nnet-grano:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── 3 · la red ── */
.nnet{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.nnet svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.nnet-grano{display:none}

/* se apaga detrás de la columna de texto: el copy se lee limpio */
.hero .nnet svg{
  -webkit-mask-image:linear-gradient(90deg, transparent 2%, rgba(0,0,0,.2) 26%, rgba(0,0,0,.8) 48%, #000 64%);
          mask-image:linear-gradient(90deg, transparent 2%, rgba(0,0,0,.2) 26%, rgba(0,0,0,.8) 48%, #000 64%);
}

/* dos profundidades: la lejana es más chica, tenue y lenta (parallax) */
.nnet-lejos{opacity:.45; animation:nnetLejos 34s ease-in-out infinite alternate; transform-origin:70% 50%}
.nnet-cerca{animation:nnetCerca 22s ease-in-out infinite alternate; transform-origin:70% 50%}
@keyframes nnetLejos{
  from{transform:translate3d(-6px,-4px,0) scale(.94)}
  to  {transform:translate3d(8px,5px,0)   scale(.99)}
}
@keyframes nnetCerca{
  from{transform:translate3d(-16px,-10px,0) scale(1)}
  to  {transform:translate3d(18px,12px,0)   scale(1.06)}
}

.nnet-enlace{stroke:rgba(124,58,237,.34); stroke-width:1; fill:none}
.nnet-glow{stroke:rgba(124,58,237,.42); stroke-width:7; fill:none; opacity:.18; stroke-linecap:round}
.nnet-nodo{fill:#7C3AED}
.nnet-halo{fill:url(#nnetHeroG); color:#7C3AED}
.nnet-halo stop{stop-color:currentColor}
.nnet--oscuro .nnet-halo{fill:url(#nnetPlanesG)}
.nnet-aro{fill:none; stroke:rgba(124,58,237,.45); stroke-width:1.2}

.nnet-late{animation:nnetLate 4.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.nnet-late:nth-of-type(2n){animation-delay:-1.6s}
.nnet-late:nth-of-type(3n){animation-delay:-3s}
@keyframes nnetLate{
  0%,100%{opacity:.4; transform:scale(.86)}
  50%    {opacity:1;  transform:scale(1.16)}
}

/* corriente viajando por los enlaces */
.nnet-corriente{
  stroke:#8B5CF6; stroke-width:2.6; stroke-linecap:round; fill:none;
  stroke-dasharray:30 940;
  animation:nnetViaja 7.5s linear infinite;
}
.nnet-corriente.b{animation-duration:10s;   animation-delay:-4s}
.nnet-corriente.c{animation-duration:12.5s; animation-delay:-8s}
.nnet-corriente.d{animation-duration:9s;    animation-delay:-2s}
@keyframes nnetViaja{from{stroke-dashoffset:970} to{stroke-dashoffset:0}}
@keyframes nnetRespira{0%,100%{opacity:.7} 50%{opacity:1}}

/* ── 4 · CELULAR: la red sube, se agranda y sigue moviéndose ── */
@media(max-width:900px){
  /* se reencuadra sobre la zona densa de la red (derecha del lienzo)
     y la máscara ya no la apaga del todo detrás del texto: baja a un
     25%, suficiente para que el movimiento se vea sin robar lectura. */
  /* el encuadre se hace en el contenedor, no en el <svg>: así el
     svg sigue siendo 100% de .nnet y no pelea con inset:0 */
  .hero .nnet{left:-150%; right:auto; width:260%}
  .hero .nnet svg{
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,.25) 38%, rgba(0,0,0,.25) 62%, rgba(0,0,0,.7) 82%, #000 100%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,.25) 38%, rgba(0,0,0,.25) 62%, rgba(0,0,0,.7) 82%, #000 100%);
  }
  /* el recorrido del parallax se agranda para que se note en pantalla chica */
  @keyframes nnetCerca{
    from{transform:translate3d(-20px,-12px,0) scale(1)}
    to  {transform:translate3d(22px,14px,0)   scale(1.08)}
  }
  .nnet-enlace{stroke-width:1.2}
  .nnet-corriente{stroke-width:3}
}

/* ══════════════════════════════════════════════════════════════
   PLANES EN OSCURO — para alternar claro/oscuro a lo largo de la
   landing. Las tarjetas ya eran oscuras: el fondo va más profundo
   que ellas para que sigan despegando.
   ══════════════════════════════════════════════════════════════ */
.plans{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(52% 60% at 74% 16%, rgba(124,58,237,.30), transparent 68%),
    radial-gradient(44% 54% at 18% 90%, rgba(167,139,250,.14), transparent 72%),
    #08060F;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.plans .wrap{position:relative; z-index:2}

/* el texto de la sección se invierte */
.plans .eyebrow{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#C9B3FF;
}
.plans .eyebrow .dot{background:#A78BFA}
.plans h2.display{color:#FFFFFF}
.plans h2.display em{color:#C4A6FF}
.plans .lede{color:#B4AFC4}
.plans .lede b{color:#C9B3FF !important}

/* las tarjetas se separan del fondo con borde y sombra más profunda */
.plans .plan{
  border-color:rgba(255,255,255,.12);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(124,58,237,.12);
}

/* la red en versión oscura: trazos más brillantes sobre el negro */
.nnet--oscuro .nnet-enlace{stroke:rgba(167,139,250,.30)}
.nnet--oscuro .nnet-glow{stroke:rgba(167,139,250,.55); opacity:.22}
.nnet--oscuro .nnet-nodo{fill:#C4A6FF}
.nnet--oscuro .nnet-halo{color:#A78BFA}
.nnet--oscuro .nnet-aro{stroke:rgba(167,139,250,.42)}
.nnet--oscuro .nnet-corriente{stroke:#DDD1FF}
/* acá el contenido está centrado, así que la red se apaga en el medio */
.nnet--oscuro svg{
  -webkit-mask-image:radial-gradient(58% 54% at 50% 46%, transparent 18%, rgba(0,0,0,.55) 58%, #000 100%);
          mask-image:radial-gradient(58% 54% at 50% 46%, transparent 18%, rgba(0,0,0,.55) 58%, #000 100%);
}
@media(max-width:900px){
  .nnet--oscuro{left:-45%; right:auto; width:190%}
}

/* ══ EL RECUADRO DEL COMPROBANTE, EN EL MISMO LENGUAJE QUE LOS PLANES
   Estaba en blanco sobre la sección oscura y desentonaba. Toma el
   mismo fondo, borde, radio y ancho que las tarjetas de plan. ══ */
.plans .proof{
  max-width:none; width:100%; margin:44px 0 0;
  background:
    radial-gradient(420px 300px at 100% -30%, rgba(124,58,237,.34), transparent 70%),
    radial-gradient(360px 260px at -6% 130%, rgba(37,211,102,.14), transparent 70%),
    var(--ink);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(124,58,237,.12);
}
.plans .proof::before{background:linear-gradient(180deg, transparent, rgba(255,255,255,.18))}
.plans .proof::after{background:linear-gradient(90deg, transparent, rgba(167,139,250,.5), transparent)}
.plans .proof-txt h4{color:#FFFFFF}
.plans .proof-txt p{color:#B4AFC4}
.plans .proof-txt .step{color:#C9B3FF}
.plans .guarantee{color:#B4AFC4}

/* ── 5 · la red se congela cuando su sección no está en pantalla ──
   Sin esto seguían corriendo las dos redes (y sus ~100 animaciones)
   mientras el visitante lee cualquier otra parte de la landing. */
.nnet--quieto *{animation-play-state:paused !important}

/* ── 6 · movimiento reducido ── */
@media(prefers-reduced-motion:reduce){
  .hero::before,
  .nnet-lejos,.nnet-cerca,.nnet-late,.nnet-corriente{animation:none !important}
  .nnet-corriente{opacity:0}
}