/* =====================================================
   HERO — layout hero + workflow diagram n8n/ComfyUI style
   ===================================================== */
#hero{min-height:100vh;display:flex;align-items:flex-start;padding-top:72px}
.hi{padding:90px 0 70px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;position:relative}
.hleft{position:sticky;top:120px;height:max-content;padding-bottom:60px}
.hbadge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--as);padding:6px 14px;border:1px solid rgba(91,110,245,.3);border-radius:100px;background:var(--agb);margin-bottom:24px;width:fit-content}
.htitle{font-size:clamp(40px,5vw,64px);font-weight:700;line-height:1.05;margin-bottom:24px;color:var(--t1)}
.hsub{font-family:var(--font-body);font-size:17px;font-weight:300;color:var(--t2);line-height:1.75;margin-bottom:44px;max-width:460px}
.hact{display:flex;gap:14px;flex-wrap:wrap}

/* Intro de sección de agentes (dentro del hero) */
#agentes{padding:110px 0}
.aintro{max-width:680px;margin-bottom:64px}
.aintro h2{font-size:clamp(28px,3.8vw,48px);font-weight:700;margin-bottom:16px}
.aintro p{font-size:15px;color:var(--t2);line-height:1.75}

/* Workflow container */
.hero-workflow-right{display:flex;flex-direction:column;padding-top:20px}
.workflow-container{position:relative;max-width:100%;margin:0 auto;padding:20px 0 60px}
.wf-svg-container{position:absolute;inset:0;z-index:0;pointer-events:none}
#wf-svg{overflow:visible}

/* Paths SVG */
.wf-path{fill:none;stroke:var(--b);stroke-width:1px;stroke-linecap:round;stroke-dasharray:4 6}
.wf-path-active{fill:none;stroke:var(--ap);stroke-width:1.5px;filter:drop-shadow(0 0 5px var(--ap));stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset .8s ease-in-out}
.wf-path-active.flowing{fill:none;stroke-dasharray:6 8;animation:data-flow 4s linear infinite;stroke-dashoffset:0}
@keyframes data-flow{to{stroke-dashoffset:-200}}

/* Animaciones de nodo */
@keyframes pin-pulse{0%{box-shadow:0 0 0 0 rgba(0,229,160,.4)}70%{box-shadow:0 0 0 10px rgba(0,229,160,0)}100%{box-shadow:0 0 0 0 rgba(0,229,160,0)}}
@keyframes pin-pulse-custom{0%{box-shadow:0 0 0 0 rgba(176,110,245,.4)}70%{box-shadow:0 0 0 10px rgba(176,110,245,0)}100%{box-shadow:0 0 0 0 rgba(176,110,245,0)}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes border-glow{0%{border-color:rgba(0,229,160,.28);box-shadow:0 8px 32px rgba(0,229,160,.12)}50%{border-color:rgba(0,229,160,.6);box-shadow:0 8px 48px rgba(0,229,160,.25)}100%{border-color:rgba(0,229,160,.28);box-shadow:0 8px 32px rgba(0,229,160,.12)}}

/* Nodo base */
.wf-node{position:relative;z-index:10;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r-md);width:290px;margin:0 auto 70px;transition:all .5s cubic-bezier(.4,0,.2,1);opacity:.3;filter:grayscale(100%);transform:translateY(20px)}
.wf-node.active{opacity:1;filter:grayscale(0%);transform:translateY(0);animation:border-glow 4s ease-in-out infinite,float 6s ease-in-out infinite;animation-delay:.5s}
.wf-node.wf-custom.active{border-color:rgba(176,110,245,.5);box-shadow:0 8px 32px rgba(176,110,245,.15);animation:float 6s ease-in-out infinite}

/* Master node */
.master-node{width:340px;opacity:1;filter:grayscale(0%);transform:translateY(0);margin-bottom:100px;border-color:var(--ba);box-shadow:0 8px 40px rgba(0,229,160,.15);animation:border-glow 4s ease-in-out infinite,float 6s ease-in-out infinite}
.wf-branch-container{position:relative;display:flex;flex-direction:column;align-items:center}
.child-node{margin-bottom:80px}
.child-node.left-node{margin-right:200px}
.child-node.right-node{margin-left:200px}

/* Partes del nodo */
.wf-node-header{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:var(--r-md) var(--r-md) 0 0}
.wf-node-icon{font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.wf-node-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--t1);letter-spacing:-.01em}
.wf-node-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.wf-node-desc{font-size:13px;color:var(--t2);line-height:1.6}
.wf-node-tags{display:flex;flex-wrap:wrap;gap:6px}
.wft{font-family:var(--font-mono);font-size:9px;color:var(--tm);padding:4px 8px;background:var(--bgc);border:1px solid var(--b);border-radius:4px;text-transform:uppercase;letter-spacing:.05em;transition:all .3s ease}
.wf-node.active .wft{color:var(--t2);border-color:rgba(255,255,255,.15)}
.wf-btn{align-self:flex-start;margin-top:6px;font-family:var(--font-mono);font-size:10px;color:var(--ap);background:var(--ag);border:1px solid var(--ba);border-radius:6px;padding:7px 14px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.wf-btn:hover{background:var(--ap);color:#050810;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,229,160,.3)}

/* Pins de conexión */
.wf-pin-in,.wf-pin-out{position:absolute;width:10px;height:10px;background:var(--bg2);border:1.5px solid var(--t2);border-radius:50%;left:50%;transform:translateX(-50%);z-index:12;transition:all .4s ease}
.wf-pin-in{top:-5px}
.wf-pin-out{bottom:-5px}
.wf-node.active .wf-pin-in{border-color:var(--ap);background:var(--ap);animation:pin-pulse 2s infinite}
.wf-node.active .wf-pin-out{border-color:var(--ap);background:var(--bg2)}
.wf-node.wf-custom.active .wf-pin-in{border-color:var(--at);background:var(--at);animation:pin-pulse-custom 2s infinite}
.master-node .wf-pin-out{border-color:var(--ap);background:var(--ap);box-shadow:0 0 14px var(--ap);width:14px;height:14px;bottom:-7px;animation:pin-pulse 2s infinite}