/* Diagrama del hero y marcas ecommerce. Visualización explicativa, no captura del SaaS. */
.hero-art.hero-saas{height:540px;isolation:isolate;margin-right:-10px}
.network-grid{position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 73%);opacity:.8;z-index:-2}
.network-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.network-tracks{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-opacity:.18}
.network-signals{fill:none;stroke:url(#signal-color);stroke-width:2;stroke-linecap:round}
.network-signals path{stroke-dasharray:15 100;stroke-dashoffset:115;opacity:0;animation:network-signal 3.6s var(--signal-delay,0s) linear infinite;animation-play-state:paused}
.hero-saas.is-inview .network-signals path{animation-play-state:running}
.signal-a{--signal-delay:-.7s}.signal-b{--signal-delay:-1.6s}.signal-c{--signal-delay:-2.5s}.signal-d{--signal-delay:-3.4s}.signal-e{--signal-delay:-1.1s}.signal-f{--signal-delay:-2.8s}
.hub-halo{fill:none;stroke:var(--accent);stroke-width:.7;stroke-opacity:.18}.halo-outer{stroke-dasharray:2 6}.halo-inner{stroke-opacity:.12}
.hero-platforms{position:absolute;inset:12px 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hero-platforms .commerce-mark{background:var(--surface);border:1px solid var(--line);border-radius:12px;height:57px;min-width:0;padding:11px;justify-content:center;box-shadow:0 8px 18px -15px #143c3c50}
.commerce-mark{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;font-weight:700;white-space:nowrap}
.commerce-mark img{flex-shrink:0;max-width:100%}.commerce-shopify>span{font-style:italic;letter-spacing:-.04em}.commerce-shopify>img{width:24px;height:28px;object-fit:contain}.commerce-nube>img{width:140px;height:35px;object-fit:contain}.commerce-woo>img{width:116px;height:42px;object-fit:contain}.commerce-vtex>img{width:25px;height:25px;object-fit:contain}.commerce-vtex>span{letter-spacing:.025em}
.hero-platforms .commerce-mark>span{font-size:12px}.hero-platforms .commerce-shopify>img{width:17px;height:23px}.hero-platforms .commerce-nube>img{width:100%;height:auto}.hero-platforms .commerce-woo>img{width:100%;height:28px;object-fit:contain}.hero-platforms .commerce-vtex>img{width:18px;height:18px}
[data-theme=dark] .commerce-nube>img,[data-theme=dark] .commerce-woo>img{filter:brightness(0) invert(1)}
.platform-names .commerce-mark{font-size:22px;color:var(--text)}.platform-names .commerce-vtex{font-size:22px}
.network-hub{position:absolute;top:30.35%;left:50%;transform:translateX(-50%);width:27%;height:11.5%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 15px 30px -20px #153c3c60;z-index:2;padding:13px}
.network-hub img{width:100%;height:auto}.network-node{position:absolute;top:26%;width:28%;height:112px;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 15px 25px -23px #123b3b70}.network-people{left:-1%}.network-mail{right:-1%}
.network-symbol{display:inline-flex;color:var(--accent);width:26px;height:26px;vertical-align:middle}.network-symbol .icon{width:22px;height:22px}.network-node>strong{display:block;font-size:11px;margin-top:4px;letter-spacing:-.02em}.network-node>span:last-child{display:block;font-size:9px;color:var(--muted);margin-top:10px;white-space:nowrap}
.audience-glyphs{display:flex;margin-top:11px;height:24px}.audience-glyphs>i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);background:var(--tint);color:var(--accent);margin-left:-5px}.audience-glyphs>i:first-child{margin-left:0}.audience-glyphs .icon{width:14px;height:14px}.audience-glyphs>i:nth-child(2){background:var(--surface-soft)}
.message-glyph{position:relative;width:90%;height:24px;margin-top:11px;padding-top:3px}.message-glyph>i{display:block;height:4px;width:68%;border-radius:3px;background:var(--line);margin-bottom:5px}.message-glyph>i+i{width:47%}.message-glyph>span{position:absolute;right:0;top:0;background:var(--tint);color:var(--accent);border-radius:50%;padding:3px}.message-glyph .icon{width:15px;height:15px}
.network-engine{position:absolute;display:flex;align-items:center;gap:6px;top:44%;left:50%;transform:translateX(-50%);text-align:center;font-size:9px;color:var(--muted);white-space:nowrap}.network-engine>span{display:flex;width:28px;height:28px;margin:0;background:var(--tint);border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;color:var(--accent)}.network-engine .icon{width:15px;height:15px}
.hero-chart{position:absolute;bottom:0;left:4%;right:4%;background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:20px 22px 13px;box-shadow:0 22px 45px -28px #123c3c60}
.hero-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-chart-heading>div>span{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.hero-chart-heading .hero-chart-label{color:var(--text);font-weight:700;font-size:18px;letter-spacing:-.035em;line-height:1.3}.hero-chart-heading>.icon{color:var(--accent);width:22px;height:22px}
.hero-chart-controls{display:flex;gap:5px;margin-top:14px}.hero-chart-controls button{font-size:10px;padding:5px 9px;border-radius:5px;color:var(--muted);border:1px solid transparent}.hero-chart-controls [aria-pressed=true]{background:var(--tint);color:var(--accent);border-color:var(--line)}
.hero-chart-svg{width:100%;height:99px;overflow:visible;margin-top:14px}.hero-chart-guides{fill:none;stroke:var(--line);stroke-width:.75;stroke-dasharray:3 5}.hero-chart-reference{fill:none;stroke:var(--muted);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:4 5}#hero-chart-area{fill:url(#hero-chart-wash)}#hero-chart-curve{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}.hero-saas.is-inview #hero-chart-curve{animation:chart-enter 1.4s .2s ease-out both}.hero-chart-caption{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:var(--muted);margin-top:8px}.hero-chart-caption>span:first-child{display:flex;align-items:center;gap:5px}.hero-chart-caption .icon{width:12px;height:12px}
@keyframes network-signal{0%{stroke-dashoffset:115;opacity:0}7%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:-15;opacity:0}}@keyframes chart-enter{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(max-width:1200px){.hero-art.hero-saas{height:510px;margin-right:0}.hero-platforms{gap:7px}.hero-platforms .commerce-mark{padding:8px;height:50px}.hero-platforms .commerce-mark>span{font-size:10px}.hero-platforms .commerce-shopify>img{width:15px}.hero-platforms .commerce-vtex>img{width:15px}.network-node{height:112px;padding:12px;width:28%}.network-node>strong{font-size:10px}.network-node>span:last-child{font-size:8px}.hero-chart{padding:17px 18px 12px}.hero-chart-svg{height:90px}.hero-chart-heading .hero-chart-label{font-size:17px}}
@media(max-width:980px) and (min-width:761px){.hero-art.hero-saas{height:490px}.hero-platforms{gap:5px}.hero-platforms .commerce-mark{padding:7px 5px;gap:3px}.hero-platforms .commerce-mark>span{font-size:9px}.network-node{padding:10px 9px;width:29%;height:112px}.network-node>strong{font-size:9px}.network-node>span:last-child{font-size:7px}.hero-chart{left:1%;right:1%;padding:16px}.hero-chart-heading .hero-chart-label{font-size:16px}.hero-chart-controls button{font-size:9px}.hero-chart-caption{font-size:8px}.network-hub{padding:9px}.platform-names .commerce-mark{font-size:19px}.commerce-nube>img{width:116px}.commerce-woo>img{width:102px;height:38px}}
@media(max-width:760px){.hero-art.hero-saas{height:495px;max-width:500px;margin:8px auto 0}.hero-platforms{gap:7px}.hero-platforms .commerce-mark{height:47px;padding:9px 6px;gap:4px}.hero-platforms .commerce-mark>span{font-size:10px}.hero-platforms .commerce-shopify>img{width:14px;height:19px}.hero-platforms .commerce-vtex>img{width:14px;height:16px}.network-hub{padding:9px}.network-node{top:26%;height:112px;padding:12px 10px;width:29%}.network-node>strong{font-size:10px}.network-node>span:last-child{font-size:8px}.hero-chart{left:1%;right:1%;padding:18px 17px 13px}.hero-chart-heading .hero-chart-label{font-size:17px}.hero-chart-svg{height:90px}.hero-chart-heading>div>span{font-size:9px}.hero-chart-controls button{font-size:10px}.platform-names{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;align-items:center;justify-items:center}.platform-names .commerce-mark{font-size:21px}.platform-names .commerce-nube img{width:133px}.platform-names .commerce-woo img{width:125px;height:42px}.platform-names .commerce-vtex img{width:26px;height:26px}.platform-names .commerce-shopify img{width:23px;height:28px}}
@media(max-width:380px){.hero-art.hero-saas{height:465px}.hero-platforms{gap:5px}.hero-platforms .commerce-mark{gap:3px;padding:7px 4px}.hero-platforms .commerce-mark>span{font-size:9px}.hero-platforms .commerce-shopify>img{width:12px}.hero-platforms .commerce-vtex>img{width:12px}.network-node{height:112px;padding:10px 8px}.network-node>strong{font-size:9px}.network-node>span:last-child{font-size:7px;margin-top:5px}.network-engine{font-size:8px;top:44%}.network-hub{padding:7px}.hero-chart{padding:15px 13px 11px}.hero-chart-heading .hero-chart-label{font-size:15px}.hero-chart-svg{height:80px}.hero-chart-caption{font-size:8px}.hero-chart-controls{margin-top:11px}.hero-chart-controls button{font-size:9px}}
/* Equilibrio óptico: los SVG usan su contorno real, sin márgenes desiguales. */
.hero-platforms .commerce-mark{align-items:center;justify-content:center;text-align:center;transition:border-color .25s,box-shadow .25s;gap:6px}
.hero-platforms .commerce-mark:hover{border-color:var(--accent);box-shadow:0 8px 24px -17px var(--accent)}
.hero-platforms .commerce-mark>span{font-size:clamp(10px,1.05vw,15px);line-height:1}
.hero-platforms .commerce-shopify>img{width:clamp(14px,1.4vw,21px);height:24px;object-position:center}
.hero-platforms .commerce-vtex>img{width:clamp(14px,1.4vw,21px);height:22px;object-position:center}
.hero-platforms .commerce-nube>img,.hero-platforms .commerce-woo>img{width:100%;max-width:112px;height:24px;object-fit:contain;object-position:center}
.network-hub{box-shadow:0 2px 4px #123c3c05,0 15px 32px -22px #153c3c70}
.halo-inner{transform-box:fill-box;transform-origin:center;animation:hub-breathe 3.6s ease-in-out infinite;animation-play-state:paused}
.hero-saas.is-inview .halo-inner{animation-play-state:running}
#hero-chart-pulse{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:7 108;stroke-dashoffset:115;animation:chart-flow 4s linear infinite;animation-play-state:paused}
.hero-saas.is-inview #hero-chart-pulse{animation-play-state:running}
.page-hidden .network-signals path,.page-hidden #hero-chart-pulse,.page-hidden .halo-inner{animation-play-state:paused!important}
@keyframes chart-flow{0%{stroke-dashoffset:115;opacity:0}8%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hub-breathe{0%,100%{transform:scale(1);stroke-opacity:.12}50%{transform:scale(1.08);stroke-opacity:.28}}
@media(max-width:980px){.hero-platforms .commerce-mark{gap:4px}.hero-platforms .commerce-nube>img,.hero-platforms .commerce-woo>img{height:20px}.hero-platforms .commerce-shopify>img{height:20px}.hero-platforms .commerce-vtex>img{height:18px}}
@media(prefers-reduced-motion:reduce){.hero-saas.is-inview .network-signals path,.hero-saas.is-inview #hero-chart-curve,.halo-inner,#hero-chart-pulse{animation:none}.network-signals,#hero-chart-pulse{display:none}#hero-chart-curve{stroke-dashoffset:0}}