/* 1. VARIABLES */
:root{
--ink:#0b2421;
--ink-2:#12322d;
--paper:#f6f7f1;
--soft:#e7ece1;
--lime:#e9ff9d;
--green:#16a34a;
--green-dark:#0f7a38;
--teal:#2bb5a0;
--muted:#4d5c59;
--line:#d3d9d2;
--card:#ffffff;
--radius:18px;
}
/* 2. RESET Y BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
/* 3. LAYOUT */
.wrap{width:min(1220px,calc(100% - 48px));margin:auto}
/* 4. TIPOGRAFIA */
h1,h2,h3{letter-spacing:-.05em;line-height:.96;margin-top:0;font-weight:900}
h1{font-size:clamp(3.4rem,6vw,5.5rem);max-width:560px;margin-bottom:20px}
h2{font-size:clamp(2.2rem,4.2vw,3.6rem);max-width:720px}
h1 em,h2 em{font-family:inherit;font-style:normal;font-weight:900}
h2 em{font-family:Georgia,serif;font-weight:400;font-style:italic}
.intro{max-width:620px;color:#33433f;font-size:1.06rem}
.eyebrow{font:800 .7rem/1.4 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--green-dark);display:flex;align-items:center;gap:14px}
.eyebrow::after{content:"";width:72px;height:2px;background:linear-gradient(90deg,var(--green),var(--teal));border-radius:2px}
.eyebrow.lime{color:var(--lime)}.eyebrow.lime::after{background:var(--lime)}
.skip{position:absolute;top:-60px;left:15px;z-index:20;background:var(--lime);color:var(--ink);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* 5. HEADER */
.site-header{position:sticky;top:0;z-index:10;background:rgba(246,247,241,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:800;letter-spacing:-.05em;text-decoration:none}
.brand-mark{display:inline-flex;align-items:end;gap:3px}
.brand-mark i{display:block;width:6px;border-radius:3px;background:var(--green)}
.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:18px}.brand-mark i:nth-child(3){height:24px;background:var(--ink)}
.brand-mark.sm i{width:5px}.brand-mark.sm i:nth-child(1){height:9px}.brand-mark.sm i:nth-child(2){height:13px}.brand-mark.sm i:nth-child(3){height:17px}
header nav{display:flex;align-items:center;gap:26px;font-size:.86rem;font-weight:600}
header nav a{text-decoration:none;padding:10px 2px}
.navcta{background:var(--ink);color:#fff!important;padding:12px 20px!important;border-radius:999px;font-weight:700}
.navcta:hover{background:var(--ink-2)}
.menu{display:none;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff}
.menu-lines{display:grid;gap:6px;place-items:center}
.menu-lines b{width:22px;height:2px;background:var(--ink);display:block}
/* 6. HERO */
.hero{padding:42px 0 26px;overflow:hidden;background:radial-gradient(820px 460px at 58% 28%,#dff2cf 0%,#eef7e6 42%,transparent 72%),radial-gradient(500px 300px at 85% 10%,#ffffff 0%,transparent 70%),var(--paper)}
.hero-layout{display:grid;grid-template-columns:minmax(300px,.88fr) minmax(480px,1.45fr) minmax(220px,.52fr);gap:26px;align-items:start}
.hero-copy .actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:26px 0 18px;font-weight:700}
.button{display:inline-flex;align-items:center;gap:8px;padding:16px 22px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;border-radius:999px;border:1px solid var(--ink)}
.button:hover{background:var(--green-dark);border-color:var(--green-dark)}
.secondary{font-weight:700}
.micro{max-width:440px;border-left:3px solid var(--green);padding-left:14px;color:var(--muted);font-size:.88rem}
.assurances{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;padding:16px;margin:24px 0 0;background:linear-gradient(180deg,#ffffffc9,#eef4e4);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:16px;font-size:.82rem;box-shadow:0 14px 28px #0b24210d}
.assurances li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.assurances li b{display:block;font-size:.84rem}
.a-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:800}
.a-icon svg{width:16px;height:16px}
.step-icon svg{width:24px;height:24px}
/* embudo */
.funnel-wrap{min-width:0}
.funnel-stage{position:relative;min-height:845px;background:transparent;border:0;box-shadow:none;overflow:hidden;isolation:isolate}
.funnel-stage::before{content:"";position:absolute;left:16%;right:16%;top:70px;height:340px;background:linear-gradient(180deg,#00e0ff8c 0%,#2dffd27e 30%,#4dff8878 55%,#c8ff3d66 78%,transparent 100%),radial-gradient(38% 30% at 32% 22%,#67e8f9b3,transparent 72%),radial-gradient(40% 32% at 68% 30%,#5eead8b3,transparent 72%),radial-gradient(46% 30% at 50% 62%,#4ade808c,transparent 74%);filter:blur(26px);pointer-events:none;z-index:0;animation:cloud 16s ease-in-out infinite;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%)}
.funnel-stage::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:50px;width:72%;height:52px;background:radial-gradient(closest-side,#67e8f955,#a3e63555 55%,transparent 75%);filter:blur(6px);pointer-events:none;z-index:6}
@keyframes cloud{0%,100%{opacity:.7;transform:translateY(0) scaleX(1)}30%{opacity:.9;transform:translateY(-8px) scaleX(1.03)}60%{opacity:.8;transform:translateY(6px) scaleX(.98)}80%{opacity:.95;transform:translateY(-4px) scaleX(1.02)}}
.source-cloud{position:absolute;inset:0 0 auto;height:272px;z-index:6}
.source{position:absolute;display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:8px 13px 8px 8px;border-radius:16px;background:var(--card);border:1px solid #e0e7de;box-shadow:0 16px 30px #0b24211a,0 2px 0 #ffffff inset;font:800 .76rem Arial,sans-serif;animation:journey 11s ease-in-out infinite}
@keyframes journey{0%,52%{transform:translate(0,0) scale(1);opacity:1}64%{transform:translate(var(--tx,0px),var(--ty,120px)) scale(.72);opacity:1}72%{transform:translate(var(--tx,0px),calc(var(--ty,120px) + 26px)) scale(.55);opacity:0}73%,86%{transform:translate(0,0) scale(1);opacity:0}90%,100%{transform:translate(0,0) scale(1);opacity:1}}
.sic{display:grid;place-items:center;min-width:30px;height:30px;padding:0 4px;border-radius:9px;color:#fff;font-size:.74rem;font-style:normal}
.source img{width:30px;height:30px;border-radius:8px;flex:0 0 30px}
.flow-field{position:absolute;left:2%;right:2%;top:110px;height:170px;pointer-events:none;z-index:2;-webkit-mask-image:radial-gradient(72% 92% at 50% 42%,#000 58%,transparent 100%);mask-image:radial-gradient(72% 92% at 50% 42%,#000 58%,transparent 100%)}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.flow-svg path{animation:fil 9s linear infinite}
.flow-svg .f1{stroke-dasharray:90 210;animation-duration:11s;--o:.9}
.flow-svg .f2{stroke-dasharray:60 180;animation-duration:8s;animation-delay:-3s;--o:.7}
.flow-svg .f3{stroke-dasharray:50 160;animation-duration:7s;animation-delay:-5.5s;--o:.75}
.flow-svg .f4{stroke-dasharray:80 200;animation-duration:10s;animation-delay:-1.5s;--o:.9}
.flow-svg .f5{stroke-dasharray:70 190;animation-duration:9s;animation-delay:-7s;--o:.8}
.flow-svg .f6{stroke-dasharray:40 140;animation-duration:6.5s;animation-delay:-2s;--o:.55}
.flow-svg .f7{stroke-dasharray:40 140;animation-duration:7.5s;animation-delay:-4.5s;--o:.55}
.flow-svg .f8{stroke-dasharray:30 120;animation-duration:6s;animation-delay:-.8s;--o:.5}
.flow-svg .f9{stroke-dasharray:30 120;animation-duration:6.8s;animation-delay:-6s;--o:.5}
.flow-svg .f10{stroke-dasharray:50 170;animation-duration:12s;animation-delay:-9s;--o:.45}
@keyframes fil{0%{stroke-dashoffset:320;opacity:0}12%{opacity:var(--o,.7)}72%{opacity:var(--o,.7)}100%{stroke-dashoffset:-320;opacity:0}}
.streams{position:absolute;inset:0;z-index:1}
.stream{position:absolute;height:16px;border-radius:999px;--c:#00e0ff;background:linear-gradient(90deg,transparent 0%,var(--c) 72%,#fff 100%);box-shadow:0 0 18px var(--c);filter:blur(2px);overflow:hidden;opacity:.7;animation:breathe 4.2s ease-in-out infinite}
.stream.r{background:linear-gradient(270deg,transparent 0%,var(--c) 72%,#fff 100%)}
.stream::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 5px,rgba(255,255,255,0) 5px 23px);animation:slide 1.5s linear infinite}
.stream.r::after{animation-name:slideR}
.stream.s1{left:3%;top:6%;width:44%;transform:rotate(30deg);transform-origin:left center;--c:#00e0ff}
.stream.s2{left:1%;top:32%;width:46%;transform:rotate(22deg);transform-origin:left center;--c:#2dd4bf;animation-delay:-1.4s}
.stream.s2::after{animation-duration:1.1s}
.stream.s3{left:5%;top:58%;width:40%;height:14px;transform:rotate(14deg);transform-origin:left center;--c:#4dff88;animation-delay:-2.6s}
.stream.s3::after{animation-duration:1.9s}
.stream.s4{right:3%;top:6%;width:44%;transform:rotate(-30deg);transform-origin:right center;--c:#00e0ff;animation-delay:-.7s}
.stream.s4::after{animation-duration:1.2s}
.stream.s5{right:1%;top:32%;width:46%;transform:rotate(-22deg);transform-origin:right center;--c:#2dd4bf;animation-delay:-3.1s}
.stream.s5::after{animation-duration:1.7s}
.stream.s6{right:5%;top:58%;width:40%;height:14px;transform:rotate(-14deg);transform-origin:right center;--c:#c8ff3d;animation-delay:-2s}
.stream.s6::after{animation-duration:2.1s}
.stream.s7{left:17%;top:-4%;width:34%;transform:rotate(48deg);transform-origin:left center;--c:#00e0ff;animation-delay:-3.7s}
.stream.s7::after{animation-duration:1s}
.stream.s8{left:0%;top:72%;width:42%;height:13px;transform:rotate(9deg);transform-origin:left center;--c:#4dff88;animation-delay:-1s}
.stream.s8::after{animation-duration:2.3s}
.stream.s9{right:17%;top:-4%;width:34%;transform:rotate(-48deg);transform-origin:right center;--c:#00e0ff;animation-delay:-2.4s}
.stream.s9::after{animation-duration:1.3s}
.stream.s10{right:0%;top:72%;width:42%;height:13px;transform:rotate(-9deg);transform-origin:right center;--c:#c8ff3d;animation-delay:-4.4s}
.stream.s10::after{animation-duration:1.8s}
@keyframes slide{to{transform:translateX(23px)}}
@keyframes slideR{to{transform:translateX(-23px)}}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:.85}}
.aura{position:absolute;border-radius:50%;filter:blur(42px);opacity:.85;animation:aura 12s ease-in-out infinite;z-index:0}
.aura.a1{left:-6%;top:-64px;width:60%;height:180px;background:radial-gradient(closest-side,#00e0ffcc,#22d3ee88 45%,#2dd4bf55 68%,transparent 78%);animation-duration:15s}
.aura.a2{right:-6%;top:-44px;width:56%;height:190px;background:radial-gradient(closest-side,#7df9ffc9,#4ade8090 50%,#22d3ee55 72%,transparent 78%);animation-delay:-4s;animation-duration:18s}
.aura.a3{left:24%;top:14px;width:52%;height:140px;background:radial-gradient(closest-side,#2dffd2a6,#4dff8880 55%,#a3e63555 74%,transparent 80%);animation-delay:-6s;animation-duration:12s}
.aura.a4{left:6%;top:60px;width:40%;height:104px;background:radial-gradient(closest-side,#4dff88a6,#00e0ff80 60%,transparent 78%);animation-delay:-2s;animation-duration:19s}
.aura.a5{right:4%;top:56px;width:42%;height:110px;background:radial-gradient(closest-side,#c8ff3da6,#2dd4bf80 58%,transparent 78%);animation-delay:-8s;animation-duration:16s}
@keyframes aura{0%,100%{transform:translate(0,0) scale(1);opacity:.6;border-radius:48% 52% 55% 45%/52% 46% 54% 48%}25%{transform:translate(14px,-6px) scale(1.06,.98);opacity:.88;border-radius:56% 44% 46% 54%/44% 56% 44% 56%}55%{transform:translate(-12px,5px) scale(.96,1.05);opacity:.7;border-radius:44% 56% 58% 42%/58% 42% 56% 44%}80%{transform:translate(6px,8px) scale(1.03);opacity:.8;border-radius:52% 48% 44% 56%/48% 54% 46% 52%}}
.vessel g rect{transform-box:fill-box;transform-origin:50% 100%;animation:bar 2.8s ease-in-out infinite}
.vessel g rect:nth-child(1){animation-delay:-.3s;animation-duration:2.2s}
.vessel g rect:nth-child(2){animation-delay:-1.1s;animation-duration:3.1s}
.vessel g rect:nth-child(3){animation-delay:-2s;animation-duration:2.5s}
.vessel g rect:nth-child(4){animation-delay:-.7s;animation-duration:3.3s}
.vessel g rect:nth-child(5){animation-delay:-1.8s;animation-duration:2.4s}
.vessel g rect:nth-child(6){animation-delay:-2.6s;animation-duration:3s}
.vessel g rect:nth-child(7){animation-delay:-.1s;animation-duration:2.7s}
.vessel g rect:nth-child(8){animation-delay:-1.5s;animation-duration:2.1s}
.vessel g rect:nth-child(9){animation-delay:-2.9s;animation-duration:3.4s}
.vessel g rect:nth-child(10){animation-delay:-.9s;animation-duration:2.6s}
.vessel g rect:nth-child(11){animation-delay:-2.2s;animation-duration:3.2s}
.vessel g rect:nth-child(12){animation-delay:-1.3s;animation-duration:2.9s}
@keyframes bar{0%,100%{transform:scaleY(.45);opacity:.35}50%{transform:scaleY(1);opacity:1}}
.funnel-rim{display:none}
.funnel-core{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:64%;height:32px;border-radius:50%;background:radial-gradient(closest-side,#f0fdf4,#4ade80d9 45%,#22d3ee77 68%,transparent 80%);opacity:.95;animation:core 4.6s ease-in-out infinite}
@keyframes core{0%,100%{opacity:.6;transform:translateX(-50%) scaleX(1)}50%{opacity:.95;transform:translateX(-50%) scaleX(1.08)}}
.funnel-stream{position:absolute;bottom:10px;left:46%;right:46%;height:64px;background:repeating-linear-gradient(180deg,#d9fbffee 0 3px,#4ade80cc 3px 6px,transparent 6px 12px);opacity:.45;border-radius:8px;animation:stream 2.8s linear infinite}
@keyframes stream{to{transform:translateY(8px)}}
.throat{position:absolute;top:424px;left:50%;transform:translateX(-50%);width:140px;height:40px;z-index:7}
.throat .collar{position:absolute;left:50%;transform:translateX(-50%);top:-4px;width:92px;height:20px;border-radius:50%;background:linear-gradient(90deg,#0e3a3a,#1a4238 40%,#071716 75%);box-shadow:0 0 0 2px #67e8f655,-8px 0 14px #22d3ee44,8px 0 14px #4ade8044,0 8px 18px #0b242155}
.throat .nucleus{position:absolute;left:50%;top:0;width:40px;height:10px;transform:translateX(-50%);border-radius:50%;background:#ecfeff;box-shadow:0 0 16px #67e8f6,0 0 8px #e9ff9d}
.throat .beam{position:absolute;left:50%;transform:translateX(-50%);top:8px;width:64px;height:40px;background:linear-gradient(180deg,#4ade80b8,transparent);filter:blur(5px);z-index:0}
.throat .pulse{position:absolute;left:50%;top:10px;width:54px;height:14px;transform:translateX(-50%);border-radius:50%;background:#e9ff9d;opacity:.9;animation:throat 4.6s ease-in-out infinite;z-index:1}
@keyframes throat{0%,100%{transform:translateX(-50%) scaleX(.8);opacity:.4}25%{transform:translateX(-50%) scaleX(1.1);opacity:.95}60%{transform:translateX(-50%) scaleX(1);opacity:.8}}
.exit-stem{position:absolute;top:460px;left:50%;transform:translateX(-50%);width:4px;height:30px;border-radius:4px;background:linear-gradient(180deg,#4ade80,transparent);z-index:7}
.exit-fan{position:absolute;top:486px;left:50%;transform:translateX(-50%);width:min(360px,80%);height:42px;z-index:7}
.exit-trails{position:absolute;top:524px;left:50%;transform:translateX(-50%);display:flex;gap:190px;z-index:7}
.exit-trails i{display:block;width:3px;height:34px;border-radius:3px;background:linear-gradient(180deg,#4ade80,transparent);opacity:.8;animation:trail 4.6s linear infinite}
.exit-trails i:nth-child(2){animation-delay:-1.5s;height:44px}
.exit-trails i:nth-child(3){animation-delay:-3s}
@keyframes trail{0%,55%{opacity:0;transform:translateY(-6px)}70%{opacity:.9}100%{opacity:0;transform:translateY(8px)}}
.outflow{position:absolute;top:458px;left:0;right:0;height:118px;z-index:7}
.ostem{position:absolute;left:50%;top:0;width:4px;height:26px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(180deg,#fff,#4ade80 60%,transparent);box-shadow:0 0 12px #4ade80}
.oribbon{position:absolute;top:22px;height:12px;border-radius:999px;filter:blur(1.5px);overflow:hidden;opacity:.75;animation:breathe 4.2s ease-in-out infinite}
.oribbon::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 5px,rgba(255,255,255,0) 5px 23px);animation:slide 1.5s linear infinite}
.oribbon.o1{right:50%;width:32%;transform:rotate(-26deg);transform-origin:top right;background:linear-gradient(270deg,#fff 0%,#2dd4bf 35%,transparent 100%);box-shadow:0 0 16px #2dd4bf}
.oribbon.o1::after{animation-name:slideR;animation-duration:1.2s}
.oribbon.o2{left:50%;top:20px;width:12px;height:92px;transform:translateX(-50%);border-radius:999px;background:linear-gradient(180deg,#fff,#4ade80 45%,transparent);box-shadow:0 0 16px #4ade80;filter:blur(1px);animation-delay:-1.4s}
.oribbon.o2::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.6) 0 4px,rgba(255,255,255,0) 4px 18px);animation:dropY 1.3s linear infinite}
.oribbon.o3{left:50%;width:32%;transform:rotate(26deg);transform-origin:top left;background:linear-gradient(90deg,#fff 0%,#a3e635 35%,transparent 100%);box-shadow:0 0 16px #a3e635;animation-delay:-2.6s}
.oribbon.o3::after{animation-duration:1.8s}
@keyframes dropY{to{transform:translateY(18px)}}
.mote{position:absolute;left:50%;top:4px;width:10px;height:10px;margin-left:-5px;border-radius:3px;z-index:8}
.mote.m1{background:#22d3ee;box-shadow:0 0 10px #22d3ee;animation:moteL 3s linear infinite}
.mote.m2{background:#4ade80;box-shadow:0 0 10px #4ade80;animation:moteC 3.4s linear infinite;animation-delay:-1.1s}
.mote.m3{background:#c8ff3d;box-shadow:0 0 10px #c8ff3d;animation:moteR 2.7s linear infinite;animation-delay:-2s}
@keyframes moteL{0%{transform:translate(0,0);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translate(-190px,102px);opacity:0}}
@keyframes moteC{0%{transform:translate(0,0);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translate(0,106px);opacity:0}}
@keyframes moteR{0%{transform:translate(0,0);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translate(190px,102px);opacity:0}}
.chart small{display:block;margin-top:8px;font-size:.68rem;color:var(--green-dark);font-weight:700}
.data-output{position:absolute;top:560px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,126px);gap:12px;justify-content:center;z-index:9}
.data-output .chart{width:auto;min-width:0}
.demo-note{grid-column:1/-1;text-align:center;font-size:.68rem;color:var(--muted);margin:0}
.kpi strong{display:block;font-size:1.55rem;letter-spacing:-.03em;margin:2px 0 4px}
.kpi strong small{font-size:.68rem;color:var(--green-dark);font-weight:800}
.spark{width:100%;height:26px}
.rank{list-style:none;margin:8px 0 4px;padding:0}
.rank li{display:grid;grid-template-columns:44px 1fr;gap:6px;align-items:center;margin:7px 0;font-size:.64rem;color:var(--muted);font-weight:700}
.rank i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--green));width:var(--w,50%)}
.rank li:nth-child(2) i{background:linear-gradient(90deg,#67e8f6,var(--teal))}
.rank li:nth-child(3) i{background:linear-gradient(90deg,#bbf7d0,var(--teal))}
.donut{display:flex;gap:10px;align-items:center;margin-top:8px}
.donut svg{width:58px;height:58px;flex:0 0 58px}
.dleg{list-style:none;margin:0;padding:0;font-size:.62rem;color:var(--muted);font-weight:700}
.dleg li{margin:4px 0;padding-left:12px;position:relative}
.dleg li::before{content:"";position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%}
.dleg .l1::before{background:var(--green)}.dleg .l2::before{background:var(--teal)}.dleg .l3::before{background:var(--ink)}
.data-output::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-18px;width:112%;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),transparent 72%);border:0;box-shadow:none;z-index:-1}
.data-output .chart{animation:produce 4.6s ease-in-out infinite;border-top:3px solid var(--green)}
.data-output .chart:nth-child(2){animation-delay:-1.5s}
.data-output .chart:nth-child(3){animation-delay:-3s}
@keyframes produce{0%,52%{transform:translateY(10px);opacity:.55}68%{transform:translateY(-3px);opacity:1}82%,100%{transform:translateY(0);opacity:1}}
.sic-excel,.sic-sheets{background:#1a7f37}.sic-csv,.sic-txt{background:#334155}.sic-sql,.sic-pg,.sic-ora,.sic-mssql{background:#2456a6}.sic-api,.sic-crm{background:#2563eb}.sic-erp{background:#7c3aed}.sic-json{background:#6d28d9}.sic-file,.sic-more{background:#0f766e}
.source:nth-child(1){left:0%;top:20%;--tx:150px;--ty:120px;animation-duration:11s;animation-delay:0s}
.source:nth-child(2){left:14%;top:7%;--tx:90px;--ty:150px;animation-duration:13.5s;animation-delay:-4.2s}
.source:nth-child(3){left:31%;top:12%;--tx:40px;--ty:150px;animation-duration:12s;animation-delay:-7.8s}
.source:nth-child(4){left:48%;top:3%;--tx:5px;--ty:170px;animation-duration:10.5s;animation-delay:-2.6s}
.source:nth-child(5){left:64%;top:9%;--tx:-60px;--ty:155px;animation-duration:14s;animation-delay:-9.1s}
.source:nth-child(6){right:19%;top:6%;--tx:-95px;--ty:155px;animation-duration:11.8s;animation-delay:-5.5s}
.source:nth-child(7){right:6%;top:15%;--tx:-150px;--ty:130px;animation-duration:12.6s;animation-delay:-1.3s}
.source:nth-child(8){right:0%;top:33%;--tx:-165px;--ty:90px;animation-duration:10.8s;animation-delay:-8.4s}
.source:nth-child(9){left:2%;top:37%;--tx:150px;--ty:85px;animation-duration:13.2s;animation-delay:-3.4s}
.source:nth-child(10){left:18%;top:33%;--tx:95px;--ty:95px;animation-duration:11.4s;animation-delay:-6.7s}
.source:nth-child(11){left:37%;top:31%;--tx:35px;--ty:105px;animation-duration:12.2s;animation-delay:-10.2s}
.source:nth-child(12){left:56%;top:31%;--tx:-35px;--ty:105px;animation-duration:10.2s;animation-delay:-4.9s}
.source:nth-child(13){right:18%;top:35%;--tx:-100px;--ty:95px;animation-duration:13.8s;animation-delay:-7.1s}
.source:nth-child(14){right:6%;top:49%;--tx:-140px;--ty:60px;animation-duration:11.1s;animation-delay:-2.1s}
.funnel{position:absolute;top:244px;left:50%;transform:translateX(-50%);width:min(380px,82%);min-height:210px;display:grid;place-content:center;gap:4px;text-align:center;color:#fff;background:transparent;padding:58px 36px 44px;filter:drop-shadow(0 22px 26px #0b24214d);z-index:8}
.vessel{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.funnel strong,.funnel em,.funnel-bars{position:relative;z-index:3}
.funnel::after{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,0);width:82%;height:52%;background:radial-gradient(closest-side,rgba(2,12,10,.78),rgba(2,12,10,.35) 60%,transparent 78%);z-index:1;pointer-events:none}
.funnel strong{font-size:2rem;font-weight:900;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.funnel-bars{display:flex;align-items:end;gap:6px;justify-content:center;margin-bottom:8px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.funnel-bars i{width:10px;border-radius:3px;background:var(--lime)}
.funnel-bars i:nth-child(1){height:20px}.funnel-bars i:nth-child(2){height:32px;background:var(--green)}.funnel-bars i:nth-child(3){height:44px;background:#fff}
.funnel em{display:block;margin-top:8px;font-size:.8rem;font-weight:600;color:#d7f7e8;text-shadow:0 1px 8px rgba(0,0,0,.9);font-style:normal;max-width:190px;justify-self:center}
.chart{background:#fffffff2;border:1px solid #d5e2da;border-radius:16px;box-shadow:0 18px 32px #0b24211a;padding:12px 14px;width:140px;text-align:left}
.chart b{display:block;font-size:.7rem;margin-bottom:8px}
.bars{display:flex;align-items:end;gap:5px;height:48px}
.bars i{width:15px;border-radius:4px;background:var(--teal)}
.bars i:nth-child(1){height:16px}.bars i:nth-child(2){height:28px;background:var(--green)}.bars i:nth-child(3){height:38px}.bars i:nth-child(4){height:24px;background:#0b2421}
.pie{width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--green) 0 45%,var(--ink) 45% 70%,var(--teal) 70% 100%);display:block}
.flow-caption{text-align:center;margin:800px auto 0;max-width:620px;padding-top:16px;border-top:1px solid var(--line);color:#22332f;font-size:.86rem;font-weight:800;letter-spacing:.01em;position:relative;z-index:10}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* panel mejora */
.continuous-panel{border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--green),#d6ead2) 1;padding-left:22px;position:sticky;top:100px;align-self:start}
.panel-head{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.refresh{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;font-size:1.25rem;box-shadow:0 10px 20px #16a34a44}
.panel-title{font-size:1.3rem;font-weight:900;letter-spacing:-.03em}
.continuous-panel p{color:var(--muted);font-size:.9rem;margin:8px 0}
.continuous-panel ul{list-style:none;padding:0;margin:18px 0 0}
.continuous-panel li{position:relative;padding-left:30px;margin:13px 0;font-size:.84rem;font-weight:700}
.continuous-panel li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:.72rem}
.hero-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;list-style:none;width:min(1220px,calc(100% - 48px));margin:34px auto 0;padding:28px 0 10px}
.hero-flow::before{content:"";position:absolute;top:72px;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent,var(--teal) 15%,var(--green) 50%,var(--teal) 85%,transparent);opacity:.7}
.hero-flow li{position:relative;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 12px 24px #0b24210d}
.hero-flow li:nth-child(2){background:var(--ink);border-color:var(--ink);color:#fff}
.hero-flow li:nth-child(2) strong{color:#fff}
.hero-flow li:nth-child(2) span{color:#c3cfca}
.hero-flow li:nth-child(2) .step-icon{background:var(--lime);color:var(--ink)}
.hero-flow li:nth-child(4) .step-icon{outline:2px dashed var(--green);outline-offset:3px}
.step-icon{display:grid;place-items:center;width:56px;height:56px;flex:0 0 56px;border-radius:16px;background:var(--ink);color:#fff;font-size:1.35rem;box-shadow:0 12px 22px #0b242126}
.step-icon.green{background:linear-gradient(135deg,var(--green),var(--green-dark))}.step-icon.dark{background:linear-gradient(135deg,var(--ink),#050f0e)}
.hero-flow strong{display:block;font-size:.92rem}
.hero-flow span{color:var(--muted);font-size:.78rem}
.step-arrow{color:var(--green-dark);font-weight:900;margin-top:14px;font-size:1.1rem}
/* 7. SECCIONES */
.section{padding:88px 0}
.section.soft{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:start}
.copy>p:first-child{font-size:1.06rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.tags span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font:.7rem Arial,sans-serif}
.quote{max-width:480px;border-top:2px solid var(--ink);padding-top:18px;font-size:1.25rem;font-weight:800;line-height:1.35}
.quote a{color:var(--green-dark)}
.dark{background:var(--ink);color:#fff}
.dark .intro{color:#c3cfca}
.lime,.statement{color:var(--lime)}
.statement{margin-top:28px;font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
.principle{margin-top:32px;padding-top:16px;border-top:1px solid #3a4d49;font-weight:700}
/* 8. ENFOQUE */
.steps{padding:0;margin:56px 0 0;border-top:1px solid var(--line);list-style:none}
.steps li{display:grid;grid-template-columns:90px 1fr auto;gap:18px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.steps li>span:first-child{font:.8rem Arial,sans-serif;color:var(--muted)}
.steps-arrow{color:var(--green-dark);font-size:1.3rem}
h3{font-size:1.5rem;margin:0 0 6px}
.steps p{margin:0;color:var(--muted)}
/* 9. CAPACIDADES */
.soft{background:var(--soft)}
.capabilities{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border:1px solid var(--ink);background:#fff}
.capabilities span{display:grid;gap:6px;align-content:end;min-height:150px;padding:20px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.capabilities b{font-size:1.1rem}
.capabilities small{color:var(--muted);font-size:.84rem}
.note{max-width:460px;margin:24px auto 0;text-align:center;color:var(--muted);font-size:.88rem}
.industries{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:2px solid var(--ink);margin-top:18px}
.industries span{padding:13px 0;border-bottom:1px solid var(--line);font-weight:700}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;padding:0;margin:48px 0 0;border-top:1px solid #3a4d49;list-style:none}
.benefits li{padding:16px 0;border-bottom:1px solid #3a4d49;font-weight:700}
.benefits li::before{content:"+";margin-right:10px;color:var(--lime)}
.ink{color:var(--ink)}
/* 10. FINAL + FOOTER */
.final{padding:88px 0 150px;background:linear-gradient(180deg,var(--paper) 0%,#eef4cf 18%,var(--lime) 55%)}
.final-grid{max-width:820px}
.final p{max-width:560px}
.trust-line{font-weight:800;font-size:1.1rem}
.final .button{margin:18px 0 12px}
.final small{display:block;color:#3d4f3d}
.footer-curve{height:88px;background:var(--lime);border-bottom-left-radius:50% 100%;border-bottom-right-radius:50% 100%;margin-bottom:-2px;box-shadow:0 1px 0 var(--ink) inset}
footer{background:radial-gradient(600px 200px at 50% 0%,#14382f,transparent 70%),var(--ink);color:#c6d0cb;padding:26px 0 36px;border-top:1px solid #1d3a34}
.formula{display:flex;align-items:center;gap:12px;justify-content:center;text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:800;color:var(--lime);border-bottom:1px solid #2c423d;padding-bottom:20px;margin:0 0 20px;text-align:center}
.foot-grid{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.foot-grid .brand{color:#fff;font-size:1.2rem}
footer nav{display:flex;gap:18px;justify-content:center;font-size:.82rem}
footer nav a{text-decoration:none;padding:10px 4px}
.foot-grid p{margin:0;font-size:.78rem}
/* 11. TABLET */
@media(max-width:1080px){
.hero-layout{grid-template-columns:1fr 1fr;gap:26px}
.hero-copy{grid-column:1/-1;max-width:740px}
.hero-copy h1{max-width:640px}
.funnel-wrap{grid-column:1}
.flow-caption{margin-top:950px}
.data-output{top:545px;grid-template-columns:repeat(2,minmax(150px,175px))}
.funnel-stage{min-height:930px}
.continuous-panel{position:static;align-self:start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);padding:20px}
.hero-flow{grid-template-columns:1fr 1fr;gap:20px}
.hero-flow::before{display:none}
.cols{grid-template-columns:1fr;gap:20px}
.capabilities{grid-template-columns:1fr 1fr}
.benefits{grid-template-columns:1fr 1fr}
.foot-grid{grid-template-columns:1fr;text-align:center}
footer nav{flex-wrap:wrap}
}
@media(max-width:1080px){.mote{display:none}.oribbon.o1,.oribbon.o3{display:none}.exit-trails{display:none}}
/* 12. MOVIL */
@media(max-width:700px){
.wrap{width:min(100% - 32px,1220px)}
header nav{position:absolute;top:68px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 20px 40px #0b242122}
header nav.open{display:flex}
header nav a{padding:13px 12px;min-height:44px;display:flex;align-items:center}
.menu{display:grid;place-items:center}
.hero{padding-top:32px}
.hero-layout{grid-template-columns:1fr}
.funnel-stage{min-height:940px}
.source.extra{display:none}
.source{font-size:.68rem;min-height:42px}
.source:nth-child(n+9){top:46%}
.funnel{width:min(280px,74%);top:262px}
.data-output{top:545px;grid-template-columns:repeat(2,1fr);gap:10px;width:min(100% - 32px,360px)}
.throat{top:424px}
.exit-stem{top:460px;height:26px}
.exit-fan{top:484px;width:min(280px,84%)}
.exit-trails{top:520px;gap:60px}
.flow-svg .f8,.flow-svg .f9,.flow-svg .f10{display:none}
.stream.s3,.stream.s6,.stream.s7,.stream.s8,.stream.s9,.stream.s10{display:none}
.aura{opacity:.3}
.chart{width:112px}
.flow-caption{margin-top:955px;white-space:normal}
.hero-flow{grid-template-columns:1fr;width:min(100% - 32px,1220px)}
.assurances{grid-template-columns:1fr}
.section{padding:68px 0}
.capabilities{grid-template-columns:1fr}
.benefits{grid-template-columns:1fr}
.industries{grid-template-columns:1fr}
.steps li{grid-template-columns:52px 1fr}
.steps-arrow{display:none}
.hero-flow .step-arrow{display:none}
}
/* 13. REVEAL PROGRESIVO + MOVIMIENTO */
.reveal{opacity:1;transform:none}
.js.no-motion .reveal,.js .reveal{opacity:1}
@media(prefers-reduced-motion:no-preference){
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.visible{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
.source,.aura,.funnel-core,.funnel-stream,.throat .pulse,.data-output .chart,.exit-trails i,.flow-svg path,.funnel-stage::before,.stream,.stream::after,.vessel g rect,.oribbon,.oribbon::after,.mote{animation:none}
.mote{opacity:0}
.flow-svg path{opacity:.35}
html{scroll-behavior:auto}
}
:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;border-radius:6px}
.final :focus-visible{outline-color:var(--ink)}
/* 14. CONTACT WORKSPACE */
body.lock{overflow:hidden}
.ws-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;overflow-y:auto;overflow-x:clip;background:#0b2421b8;backdrop-filter:blur(6px);animation:wsIn .28s ease}
.ws-overlay[hidden]{display:none}
@keyframes wsIn{from{opacity:0}to{opacity:1}}
.ws{position:relative;width:min(960px,100%);min-width:0;max-height:min(90dvh,820px);margin:auto;overflow-y:auto;overflow-x:clip;background:var(--paper);border-radius:24px;border:1px solid var(--line);box-shadow:0 40px 90px #00000055;animation:wsPop .32s ease}
@keyframes wsPop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.ws-close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer}
.ws-close svg{width:16px;height:16px}
.ws-close:hover{background:var(--lime)}
.ws-grid{display:grid;grid-template-columns:minmax(280px,.9fr) 1.4fr}
.ws-grid>*{min-width:0}
.ws-side{padding:44px 32px;background:linear-gradient(180deg,#e7f3da,#dcefdc);border-right:1px solid var(--line)}
.ws-side h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:12px 0}
.ws-lead{color:#33433f}
.ws-points{list-style:none;padding:0;margin:24px 0;display:grid;gap:10px}
.ws-points li{position:relative;padding-left:30px;font-weight:700;font-size:.88rem}
.ws-points li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:.72rem}
.ws-flow{margin-top:28px;padding-top:16px;border-top:1px solid #b9c9b4;color:var(--green-dark);font-size:.78rem;font-weight:700;letter-spacing:.02em}
.ws-main{padding:44px 36px}
.ws-field{border:0;padding:0;margin:0 0 18px;min-width:0}
.ws-field legend,.ws-field label{display:block;font-weight:800;font-size:.86rem;margin-bottom:8px}
.ws-field b{color:var(--green-dark)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.82rem;font-weight:700;cursor:pointer}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--green-dark);outline-offset:2px}
.ws-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ws-row>*{min-width:0}
.ws-field input,.ws-field textarea{width:100%;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:.92rem;color:var(--ink)}
.ws-field input:focus,.ws-field textarea:focus{outline:3px solid var(--green-dark);outline-offset:1px;border-color:var(--green-dark)}
.ws-field [aria-invalid="true"]{border-color:#b3261e}
.err{margin:6px 0 0;color:#8f1d17;font-size:.78rem;font-weight:700}
.err[hidden]{display:none}
.ws-count{margin:6px 0 0;text-align:right;font-size:.74rem;color:var(--muted)}
.ws-send{width:100%;justify-content:center;min-height:52px}
.ws-send[disabled]{opacity:.6;cursor:wait}
.ws-success{padding:72px 40px;text-align:center}
.ws-success h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.ws-note{margin:12px auto 26px;max-width:420px;font-size:.8rem;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:10px 14px}
.ws-ref{margin:14px 0 0;font-size:.9rem}
.ws-ref b{display:inline-block;background:var(--ink);color:var(--lime);border-radius:8px;padding:4px 12px;letter-spacing:.08em}
.ws-formerr{margin:0 0 14px;padding:10px 14px;border:1px solid #8f1d17;border-radius:12px;background:#fdecea}
.ws-formerr[hidden]{display:none}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.anon{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px}
.anon[hidden]{display:none}
.anon label{display:flex;gap:10px;align-items:flex-start;font-weight:800;font-size:.88rem;cursor:pointer;margin:0}
.anon input{width:20px;height:20px;min-width:20px;margin-top:1px;accent-color:var(--green-dark)}
.anon small{display:block;margin:6px 0 0 30px;color:var(--muted);font-size:.78rem}
.ws-field.is-optional label b{display:none}
.ws-field.is-optional input{opacity:.55;background:#eef0ea}
@media(max-width:860px){
.ws-overlay{padding:0}
.ws{width:100%;max-height:100dvh;height:100dvh;border-radius:0}
.ws-grid{grid-template-columns:1fr}
.ws-side{padding:72px 24px 24px;border-right:0;border-bottom:1px solid var(--line)}
.ws-side h2{font-size:1.5rem}
.ws-points{grid-template-columns:1fr 1fr}
.ws-flow{margin-top:16px}
.ws-main{padding:28px 20px 40px}
.ws-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.ws-overlay,.ws{animation:none}
}