/* =========================================================
   Worky · Hero v1 — CSS para HubSpot
   Todo vive dentro de .wk-root: no toca el resto del tema.
   ========================================================= */

#worky-hero{
  --wk-navy:#17375C;
  --wk-bg:#06111F;
  --wk-bg-2:#0A1A2E;
  --wk-surface:#0E2139;
  --wk-surface-2:#132A47;
  --wk-line:rgba(160,190,225,.14);
  --wk-line-2:rgba(160,190,225,.24);
  --wk-text:#F2F6FB;
  --wk-text-2:#A9B8CC;
  --wk-text-3:#73849C;
  --wk-teal:#00ADDE;
  --wk-blue:#0093FF;
  --wk-green:#00AA80;
  --wk-orange:#FF7300;
  --wk-magenta:#E91E63;
  --wk-violet:#681CDB;
  --wk-red:#FF5151;
  --wk-sans:"Geist",system-ui,-apple-system,sans-serif;
  --wk-mono:"Geist Mono",ui-monospace,monospace;
  --wk-gutter:clamp(16px,4vw,56px);
  --wk-max:clamp(1280px,92vw,1680px);
  --wk-ease:cubic-bezier(.2,.7,.2,1);

  /* Ocupa todo el ancho aunque el módulo esté dentro de un contenedor del tema */
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  background:var(--wk-bg);color:var(--wk-text);font-family:var(--wk-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;text-align:left
}

/* Reset acotado (el tema de HubSpot no se mete aquí) */
#worky-hero *,#worky-hero *::before,#worky-hero *::after{box-sizing:border-box}
#worky-hero h1,#worky-hero h2,#worky-hero p,#worky-hero ul,#worky-hero li,#worky-hero figure{margin:0;padding:0;list-style:none;background:none;border:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
#worky-hero a{color:inherit;text-decoration:none}
#worky-hero a:hover{color:inherit;text-decoration:none}
#worky-hero img,#worky-hero svg{display:block;max-width:100%}
#worky-hero button{font:inherit;color:inherit}

/* ---------- Botones ---------- */
#worky-hero .wk-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;line-height:1;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s var(--wk-ease)}
#worky-hero .wk-btn:active{transform:scale(.98)}
#worky-hero .wk-btn--primario{background:var(--wk-teal);color:#04121F}
#worky-hero .wk-btn--primario:hover{background:#2BBFEA;color:#04121F}
#worky-hero .wk-btn--sec{border:1px solid var(--wk-line-2);color:var(--wk-text)}
#worky-hero .wk-btn--sec:hover{border-color:rgba(160,190,225,.5);background:rgba(255,255,255,.03)}
#worky-hero .wk-btn--chico{height:40px;padding:0 18px;font-size:14px}
#worky-hero .wk-btn small{font-family:var(--wk-mono);font-size:11px;font-weight:400;opacity:.7;letter-spacing:.02em}
#worky-hero .wk-btn__flecha{transition:transform .3s var(--wk-ease)}
#worky-hero .wk-btn:hover .wk-btn__flecha{transform:translateX(3px)}
#worky-hero a:focus-visible,#worky-hero button:focus-visible{outline:2px solid var(--wk-teal);outline-offset:3px}

/* ---------- Hero ---------- */
#worky-hero .wk-hero{position:relative;isolation:isolate}
#worky-hero .wk-hero::before{ /* retícula fina */
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--wk-line) 1px,transparent 1px),linear-gradient(90deg,var(--wk-line) 1px,transparent 1px);
  background-size:72px 72px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 10%,transparent 75%);
  opacity:.45}
#worky-hero .wk-hero__txt{max-width:var(--wk-max);margin:0 auto;padding:clamp(40px,5.5vw,80px) var(--wk-gutter) 0;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,80px);align-items:end}
#worky-hero .wk-h1{font-size:clamp(40px,6.2vw,84px);line-height:1;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
#worky-hero .wk-h1 em{font-style:normal;color:var(--wk-teal)}
#worky-hero .wk-lead{font-size:clamp(16px,1.35vw,18px);color:var(--wk-text-2);max-width:46ch;text-wrap:pretty}
#worky-hero .wk-lead strong{color:var(--wk-text);font-weight:500}
#worky-hero .wk-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Datos de confianza: la cifra es el diseño */
#worky-hero .wk-confianza{max-width:var(--wk-max);margin:clamp(40px,4.5vw,56px) auto 0;padding:0 var(--wk-gutter);display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,3vw,40px)}
#worky-hero .wk-dato{position:relative;padding-top:20px}
#worky-hero .wk-dato::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--wk-line-2);transform-origin:left}
#worky-hero .wk-dato__cifra{display:block;font-size:clamp(28px,2.8vw,40px);font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--wk-text)}
#worky-hero .wk-dato__txt{display:block;font-size:15px;color:var(--wk-text-2);margin-top:10px;max-width:32ch;text-wrap:pretty}

/* ---------- Escena del producto ---------- */
#worky-hero .wk-escena{position:relative;max-width:calc(var(--wk-max) + 80px);margin:clamp(40px,4.5vw,64px) auto 0;padding:0 var(--wk-gutter)}
#worky-hero .wk-halo{position:absolute;z-index:-1;left:50%;top:-28%;width:min(1200px,120%);aspect-ratio:2.2/1;transform:translateX(-50%);
  background:radial-gradient(ellipse 48% 40% at 50% 62%,rgba(0,173,222,.42),rgba(0,147,255,.14) 55%,transparent 78%);filter:blur(12px)}
#worky-hero .wk-arco{position:absolute;z-index:-1;left:50%;top:-2%;width:min(1180px,118%);aspect-ratio:2.4/1;transform:translateX(-50%);
  border-radius:50% 50% 0 0/100% 100% 0 0;border-top:1px solid rgba(0,173,222,.45);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
#worky-hero .wk-app{position:relative;border:1px solid var(--wk-line-2);border-radius:18px 18px 0 0;background:var(--wk-bg-2);overflow:hidden;
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset,0 40px 120px -30px rgba(0,147,255,.35);
  display:grid;grid-template-columns:220px 1fr;height:clamp(520px,46vw,620px);
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
/* Sidebar */
#worky-hero .wk-side{border-right:1px solid var(--wk-line);padding:20px 14px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--wk-text-2)}
#worky-hero .wk-side__logo{display:flex;align-items:center;gap:10px;padding:0 8px 18px;font-weight:500;color:var(--wk-text)}
#worky-hero .wk-side__logo svg{width:22px;height:22px}
#worky-hero .wk-side__grupo{font-family:var(--wk-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--wk-text-3);padding:14px 8px 6px}
#worky-hero .wk-side__item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px}
#worky-hero .wk-side__item i{width:8px;height:8px;border-radius:2px;flex:none}
#worky-hero .wk-side__item.is-on{background:var(--wk-surface-2);color:var(--wk-text)}
/* Principal */
#worky-hero .wk-main{padding:22px 26px;display:flex;flex-direction:column;gap:18px;min-width:0}
#worky-hero .wk-main__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#worky-hero .wk-main__top h2{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
#worky-hero .wk-main__top p{font-family:var(--wk-mono);font-size:11px;color:var(--wk-text-3);margin-top:2px}
#worky-hero .wk-estado{font-family:var(--wk-mono);font-size:11px;color:var(--wk-orange);display:flex;align-items:center;gap:8px}
#worky-hero .wk-estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(255,115,0,.15);animation:wk-pulso 1.6s ease-out 4}
@keyframes wk-pulso{50%{box-shadow:0 0 0 7px rgba(255,115,0,0)}}
/* Flujo */
#worky-hero .wk-flujo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#worky-hero .wk-paso{position:relative;border:1px solid var(--wk-line);border-radius:12px;background:var(--wk-surface);padding:14px;overflow:hidden}
#worky-hero .wk-paso__n{font-family:var(--wk-mono);font-size:10px;color:var(--wk-text-3);letter-spacing:.08em}
#worky-hero .wk-paso__t{font-size:13.5px;font-weight:500;margin-top:6px}
#worky-hero .wk-paso__d{font-size:12px;color:var(--wk-text-2);margin-top:2px}
#worky-hero .wk-paso__barra{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--c,var(--wk-teal))}
#worky-hero .wk-paso.is-listo .wk-paso__barra{width:100%}
#worky-hero .wk-paso.is-activo .wk-paso__barra{width:55%}
#worky-hero .wk-paso__ok{position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:50%;border:1px solid var(--wk-line-2);display:grid;place-items:center;font-size:9px;color:transparent;transition:all .3s}
#worky-hero .wk-paso.is-listo .wk-paso__ok{background:var(--c);border-color:var(--c);color:#04121F}
/* Métricas */
#worky-hero .wk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#worky-hero .wk-kpi{border:1px solid var(--wk-line);border-radius:12px;padding:14px 16px}
#worky-hero .wk-kpi__k{font-size:12px;color:var(--wk-text-2)}
#worky-hero .wk-kpi__v{font-size:26px;font-weight:500;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
#worky-hero .wk-kpi__s{font-family:var(--wk-mono);font-size:10.5px;color:var(--wk-text-3);margin-top:2px}
/* Tabla */
#worky-hero .wk-tabla{border:1px solid var(--wk-line);border-radius:12px;overflow:hidden;font-size:12.5px}
#worky-hero .wk-fila{display:grid;grid-template-columns:1.6fr 1.2fr 1fr .9fr;gap:12px;padding:11px 16px;align-items:center;border-top:1px solid var(--wk-line)}
#worky-hero .wk-fila:first-child{border-top:0;font-family:var(--wk-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--wk-text-3);background:var(--wk-surface)}
#worky-hero .wk-fila span:last-child{text-align:right;font-variant-numeric:tabular-nums}
#worky-hero .wk-tag{font-family:var(--wk-mono);font-size:10.5px;color:var(--c)}

/* SophIA */
#worky-hero .wk-sophia{position:absolute;right:calc(var(--wk-gutter) - 28px);top:120px;width:310px;border:1px solid rgba(0,147,255,.45);border-radius:16px;background:#0B1C33;padding:18px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.6),0 0 0 6px rgba(0,147,255,.06)}
#worky-hero .wk-sophia__head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
#worky-hero .wk-sophia__head svg{width:22px;height:22px}
#worky-hero .wk-sophia__head span{margin-left:auto;font-family:var(--wk-mono);font-size:10px;font-weight:400;color:var(--wk-blue);letter-spacing:.06em;text-transform:uppercase}
#worky-hero .wk-sophia p{font-size:13.5px;color:var(--wk-text-2);margin-top:12px;line-height:1.5}
#worky-hero .wk-sophia p b{color:var(--wk-text);font-weight:500}
#worky-hero .wk-sophia__acc{display:flex;gap:8px;margin-top:14px}
#worky-hero .wk-sophia__acc span{flex:1;text-align:center;font-size:12.5px;padding:9px 0;border-radius:999px;border:1px solid var(--wk-line-2)}
#worky-hero .wk-sophia__acc span:first-child{background:var(--wk-blue);border-color:var(--wk-blue);color:#fff;font-weight:500}
#worky-hero .wk-sophia .wk-sophia__nota{font-family:var(--wk-mono);font-size:10px;color:var(--wk-text-3);margin-top:12px}
#worky-hero .wk-sophia__escribe{display:none;gap:4px;margin-top:14px;height:8px}
#worky-hero .wk-sophia__escribe i{width:6px;height:6px;border-radius:50%;background:var(--wk-blue);animation:wk-punto 1s ease-in-out infinite}
#worky-hero .wk-sophia__escribe i:nth-child(2){animation-delay:.15s}
#worky-hero .wk-sophia__escribe i:nth-child(3){animation-delay:.3s}
@keyframes wk-punto{50%{opacity:.25;transform:translateY(-2px)}}

/* ---------- Motion (solo si el sistema no pide reducirlo) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Titular: cada palabra entra desenfocada y se enfoca */
  #worky-hero.wk-js .wk-w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.18em);transition:opacity .8s var(--wk-ease),filter .8s var(--wk-ease),transform .8s var(--wk-ease);transition-delay:var(--d)}
  #worky-hero.wk-js.is-listo .wk-w{opacity:1;filter:none;transform:none}
  /* Texto, botones y cifras en cascada */
  #worky-hero.wk-js .wk-lead,#worky-hero.wk-js .wk-ctas,#worky-hero.wk-js .wk-dato{opacity:0;transform:translateY(20px);transition:opacity .8s var(--wk-ease),transform .8s var(--wk-ease)}
  #worky-hero.wk-js .wk-lead{transition-delay:.35s}
  #worky-hero.wk-js .wk-ctas{transition-delay:.43s}
  #worky-hero.wk-js .wk-dato:nth-child(1){transition-delay:.55s}
  #worky-hero.wk-js .wk-dato:nth-child(2){transition-delay:.63s}
  #worky-hero.wk-js .wk-dato:nth-child(3){transition-delay:.71s}
  #worky-hero.wk-js.is-listo .wk-lead,#worky-hero.wk-js.is-listo .wk-ctas,#worky-hero.wk-js.is-listo .wk-dato{opacity:1;transform:none}
  #worky-hero.wk-js .wk-dato::before{transform:scaleX(0);transition:transform 1.1s var(--wk-ease) .6s}
  #worky-hero.wk-js.is-listo .wk-dato::before{transform:scaleX(1)}
  /* La plataforma sube y se abre */
  #worky-hero.wk-js .wk-escena{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--wk-ease) .25s,transform 1.1s var(--wk-ease) .25s}
  #worky-hero.wk-js.is-listo .wk-escena{opacity:1;transform:none}
  #worky-hero.wk-js .wk-app{clip-path:inset(10% 8% 0 8% round 18px 18px 0 0);transition:clip-path 1.3s var(--wk-ease) .35s}
  #worky-hero.wk-js.is-listo .wk-app{clip-path:inset(0 0 0 0 round 18px 18px 0 0)}
  #worky-hero.wk-js .wk-tabla .wk-fila{opacity:0;transform:translateY(10px);transition:opacity .5s var(--wk-ease),transform .5s var(--wk-ease)}
  #worky-hero.wk-js.is-listo .wk-tabla .wk-fila{opacity:1;transform:none}
  #worky-hero.wk-js .wk-tabla .wk-fila:nth-child(1){transition-delay:1s}
  #worky-hero.wk-js .wk-tabla .wk-fila:nth-child(2){transition-delay:1.07s}
  #worky-hero.wk-js .wk-tabla .wk-fila:nth-child(3){transition-delay:1.14s}
  #worky-hero.wk-js .wk-tabla .wk-fila:nth-child(4){transition-delay:1.21s}
  #worky-hero.wk-js .wk-tabla .wk-fila:nth-child(5){transition-delay:1.28s}
  #worky-hero.wk-js .wk-tabla .wk-fila:nth-child(6){transition-delay:1.35s}
  #worky-hero .wk-paso__barra{transition:width .9s var(--wk-ease)}
  /* SophIA: aparece, escribe y luego habla */
  #worky-hero.wk-js .wk-sophia{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s var(--wk-ease),transform .6s var(--wk-ease)}
  #worky-hero.wk-js .wk-sophia.is-visible{opacity:1;transform:none}
  #worky-hero.wk-js .wk-sophia:not(.is-dicho) .wk-sophia__escribe{display:flex}
  #worky-hero.wk-js .wk-sophia:not(.is-dicho) .wk-sophia__msg{display:none}
  #worky-hero .wk-sophia__msg{animation:wk-aparece .5s var(--wk-ease)}
  @keyframes wk-aparece{from{opacity:0;transform:translateY(6px)}}
  /* Halo que respira dos veces y se queda quieto */
  #worky-hero .wk-halo{animation:wk-respira 6s ease-in-out 2 alternate}
  @keyframes wk-respira{to{opacity:.7;transform:translateX(-50%) scale(1.04)}}
  /* Al hacer scroll la plataforma se endereza */
  @supports (animation-timeline:view()){
    #worky-hero .wk-inclina{animation:wk-inclina linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes wk-inclina{from{transform:perspective(1800px) rotateX(12deg) scale(.96)}to{transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){
  #worky-hero .wk-estado::before{animation:none}
}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  #worky-hero .wk-sophia{right:var(--wk-gutter);top:auto;bottom:60px}
}
@media (max-width:960px){
  #worky-hero .wk-hero__txt{grid-template-columns:1fr;align-items:start}
  #worky-hero .wk-app{grid-template-columns:1fr}
  #worky-hero .wk-side{display:none}
}
@media (max-width:720px){
  #worky-hero .wk-confianza{grid-template-columns:1fr;row-gap:24px}
  #worky-hero .wk-ctas .wk-btn{flex:1 1 100%;justify-content:center}
  #worky-hero .wk-app{height:auto;-webkit-mask-image:none;mask-image:none;border-radius:16px}
  #worky-hero.wk-js .wk-app{clip-path:inset(6% 6% 0 6% round 16px)}
  #worky-hero.wk-js.is-listo .wk-app{clip-path:inset(0 round 16px)}
  #worky-hero .wk-main{padding:16px}
  #worky-hero .wk-flujo{grid-template-columns:1fr 1fr}
  #worky-hero .wk-kpis{grid-template-columns:1fr 1fr}
  #worky-hero .wk-kpi:last-child{display:none}
  #worky-hero .wk-fila{grid-template-columns:1.4fr 1fr .9fr}
  #worky-hero .wk-fila span:nth-child(2){display:none}
  #worky-hero .wk-tabla .wk-fila:nth-child(n+5){display:none}
  #worky-hero .wk-sophia{position:relative;inset:auto;width:auto;margin:-40px 12px 0}
}