.capability-section{width:min(1380px,calc(100% - 64px));height:100svh;min-height:640px;margin:0 auto;padding:38px 0 28px;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(14px,2vh,22px);scroll-margin-top:0;overflow:visible}
.capability-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.capability-heading{overflow:visible}.capability-heading .eyebrow{font-size:10px;letter-spacing:.13em;overflow:visible}.capability-heading .eyebrow b{flex:0 0 7px}
.capability-heading h2{margin:0;color:var(--navy);font:700 clamp(25px,3vw,36px)/1.05 var(--display);letter-spacing:-.055em}
.capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.capability-card{--card-tint:#fff;min-width:0;min-height:288px;padding:14px;border:1px solid rgba(106,157,190,.24);border-radius:19px;background:#E7EEF4;box-shadow:0 9px 26px rgba(30,47,77,.055);transition:transform .35s cubic-bezier(.2,.75,.25,1),background .35s,border-color .35s,box-shadow .35s;overflow:hidden}
.capability-card-build,.capability-card-flow,.capability-card-data,.capability-card-app{--card-tint:#fff;background:#E7EEF4}
.capability-card:hover,.capability-card:focus-within{transform:translateY(-6px);background:var(--card-tint);border-color:#8eb9d4;box-shadow:0 20px 42px rgba(72,132,171,.22)}
.capability-mockup{height:145px;padding:12px 12px 10px;border-radius:13px;background:linear-gradient(145deg,#EAF3F8,#F5F9FC);position:relative;overflow:visible;transition:transform .4s cubic-bezier(.2,.75,.25,1),background .35s;transform-origin:center}
.mockup-flow,.mockup-data,.mockup-app{background:linear-gradient(145deg,#EAF3F8,#F5F9FC)}.capability-card:hover .capability-mockup,.capability-card:focus-within .capability-mockup{transform:translateY(-2px) scale(1.015);background:#fff}
.mockup-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.mockup-window{display:flex;gap:3px}.mockup-window i{width:5px;height:5px;border-radius:50%;background:#c6b9a6}.mockup-window i:nth-child(2){background:#d6c5a9}.mockup-window i:nth-child(3){background:#afc4ce}
.mockup-tag{font-size:7px;letter-spacing:.11em;color:#8d9aa4;font-weight:700}
.capability-mockup h3{margin:0 0 12px;color:#263650;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:-.015em}
.build-preview{position:relative;height:100%;display:flex;align-items:flex-start;padding-top:4px}.build-status{position:absolute;left:2px;top:8px;width:58%;min-height:78px;padding:10px 11px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 10px 22px rgba(30,47,77,.09);z-index:1}.build-status h3{margin:0 0 8px;color:#263650;font-size:10px;line-height:1.2;font-weight:700}.build-day{display:flex;align-items:center;gap:7px;color:#748394}.build-day>span{color:#bd8050;font-size:14px}.build-day b,.build-day small{display:block}.build-day b{font-size:8px;color:#34485a}.build-day small{font-size:7px;color:#8995a2;line-height:1.3}.build-phone{position:absolute;right:13px;top:0;width:59px;height:112px;padding:4px;border:2px solid #253143;border-radius:14px;background:#111923;box-shadow:0 9px 15px rgba(31,47,67,.24);z-index:2;transform:rotate(6deg);animation:phoneFloat 4.6s ease-in-out infinite}.phone-speaker{position:absolute;z-index:3;top:5px;left:50%;width:19px;height:4px;border-radius:5px;background:#111923;transform:translateX(-50%)}.phone-screen{height:100%;padding:10px 5px 5px;border-radius:9px;background:#fff;overflow:hidden}.phone-status{display:flex;justify-content:space-between;color:#8794a0;font-size:4px}.phone-status b{color:#355c7d}.phone-screen-title{display:flex;align-items:center;gap:4px;margin:8px 0 7px;font-size:7px;font-weight:700;color:#34485a}.phone-screen-title i{width:11px;height:11px;display:grid;place-items:center;border-radius:4px;background:#e7eef4;color:#416e8d;font-size:6px;font-style:normal}.phone-task{display:flex;align-items:center;gap:4px;margin:4px 0;padding:4px 3px;border-radius:4px;background:#f3f7fa}.phone-task i{width:5px;height:5px;border-radius:50%;background:#d39816}.phone-task span{height:3px;flex:1;border-radius:3px;background:#d9e3eb}.phone-button{margin-top:6px;padding:4px;border-radius:7px;background:#bd8050;color:white;text-align:center;font-size:5px;font-weight:700}.build-note{left:8px;right:auto;bottom:7px;width:60%;max-width:60%;font-size:7px}.flow-nodes.flow-logos{margin:2px 8px 12px;gap:5px}.flow-logo-node{width:29px!important;height:29px!important;flex:0 0 29px;display:grid;place-items:center;border-radius:9px;background:#fff!important;box-shadow:0 5px 14px rgba(35,61,82,.08);animation:nodeFloat 3s ease-in-out infinite}.flow-logo-node img{width:20px;height:20px;object-fit:contain}.flow-logo-node:nth-of-type(2){animation-delay:.35s}.flow-logo-node:nth-of-type(3){animation-delay:.7s}.flow-connector{position:relative;color:#9aabb8!important;font-style:normal;font-size:11px;animation:connectorPulse 1.6s ease-in-out infinite}.flow-connector:nth-of-type(2){animation-delay:.35s}.build-timeline{display:flex;align-items:center;gap:5px;margin:0 0 12px;font-size:7px;color:#87939e}.build-timeline span{padding:5px 6px;border-radius:6px;background:rgba(255,255,255,.75);white-space:nowrap}.build-timeline i{height:1px;flex:1;background:#cbd7dc}.build-timeline .timeline-done{color:#426d85}.build-timeline .timeline-current{background:#355c7d;color:white}
.mockup-note{min-height:31px;max-width:92%;position:absolute;right:8px;bottom:7px;z-index:2;display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.96);box-shadow:0 8px 18px rgba(30,47,77,.11);color:#53677a;font-size:8px;line-height:1.35;animation:floatNote 4.8s ease-in-out infinite}
.mockup-check,.mockup-pulse{flex:0 0 16px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#eaf0f5;color:#355c7d;font-size:9px;font-weight:700}.mockup-pulse{position:relative;background:#e5edf3}.mockup-pulse:before{content:"";width:6px;height:6px;border-radius:50%;background:#4f83a2;box-shadow:0 0 0 3px rgba(79,131,162,.12);animation:stackPulse 1.8s ease-in-out infinite}
.flow-nodes{display:flex;align-items:center;justify-content:space-between;margin:-1px 8px 12px;color:#92a1ae}.flow-nodes span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#fff;color:#416e8d;font-size:13px;box-shadow:0 4px 12px rgba(35,61,82,.07);animation:nodeFloat 3s ease-in-out infinite}.flow-nodes span:nth-of-type(2){animation-delay:.3s}.flow-nodes span:nth-of-type(3){animation-delay:.6s}.flow-nodes i{font-size:11px;font-style:normal;color:#b0a186}
.data-rows{display:grid;gap:5px;margin:-1px 0 9px}.data-rows span{display:flex;align-items:center;gap:7px;min-height:24px;padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.75);font-size:8px;color:#657381}.data-rows b{color:#355c7d;font-size:11px}.data-rows em{margin-left:auto;color:#5c8db8;font-size:7px;font-style:normal}
.app-preview{height:40px;margin:-1px 0 10px;padding:6px 8px;display:flex;align-items:center;gap:7px;border-radius:8px;background:rgba(255,255,255,.82)}.app-preview-mark{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:#416e8d;color:#fff;font-weight:800;font-size:10px}.app-preview b,.app-preview small{display:block}.app-preview b{font-size:8px;color:#34485a}.app-preview small{margin-top:2px;font-size:7px;color:#8a98a4}.app-preview-arrow{margin-left:auto;color:#d39816;font-size:12px}
.capability-result{padding:14px 3px 0}.capability-result strong{display:block;color:#243754;font-size:clamp(34px,3.5vw,42px);line-height:1;letter-spacing:-.075em;font-weight:600}.capability-result strong small{font-size:.48em;letter-spacing:-.035em;font-weight:500;color:#355c7d}.capability-result p{margin:9px 0 0;color:#596c7d;font-size:11px;line-height:1.5}
.stack-band>p{margin:0 0 12px;text-align:center;color:#71808e;font-size:10px;letter-spacing:.04em}
.stack-viewport{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.stack-track{display:flex;width:max-content;animation:stackSlide 62s linear infinite}.stack-viewport:hover .stack-track{animation-play-state:paused}
.stack-group{display:flex;align-items:center;gap:10px;margin:0;padding:3px 10px 7px 0;list-style:none}
.stack-group li{height:43px;display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid #e8e9e7;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 4px 12px rgba(30,47,77,.035);white-space:nowrap;color:#465360;font-size:10px;font-weight:600;transition:transform .25s,border-color .25s,box-shadow .25s}
.stack-group li:hover{transform:translateY(-3px);border-color:#cbd8df;box-shadow:0 8px 18px rgba(30,47,77,.09)}.stack-group li.stack-google{gap:0}.stack-group li.stack-google .stack-mark{width:114px;height:29px;flex:0 0 114px;padding:0;background:transparent;border-radius:0}.stack-group li.stack-google .stack-mark img{width:100%;height:100%;object-fit:contain;object-position:center}
.stack-mark{position:relative;width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border-radius:7px;background:#eef2f4;color:#49677c;font-size:11px;font-weight:700;font-style:normal}.mark-openai,.mark-node{background:#e9f0ed;color:#527967}.mark-automate,.mark-apps,.mark-sharepoint{background:#edf1f8;color:#526fa1}.mark-bi,.mark-looker{background:#fff4dd;color:#bb820e}.mark-google,.mark-supabase{background:#edf4ed;color:#518765}.mark-appsheet,.mark-postgres{background:#eef1f6;color:#536d90}.mark-python{background:#f4f1e5;color:#907d39}.mark-n8n,.mark-whatsapp{background:#e9f4ef;color:#398263}.mark-zapier,.mark-make{background:#fff1e8;color:#be7551}.mark-react{background:#e9f4f6;color:#438b9f}.mark-notion{background:#f1f1ef;color:#383d42}.mark-chatgpt{background:#f1f4f2;color:#1e3932}.mark-claude{background:#fff0e8;color:#c86f4e}.mark-gemini{background:#f1efff;color:#6557c5}
.stack-mark img{width:18px;height:18px;object-fit:contain}.stack-mark i{font-style:normal}@keyframes stackSlide{to{transform:translateX(-50%)}}@keyframes phoneFloat{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-5px) rotate(3deg)}}@keyframes connectorPulse{0%,100%{opacity:.45;transform:translateX(-1px)}50%{opacity:1;transform:translateX(2px)}}@keyframes floatNote{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-4px) rotate(.5deg)}}@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes stackPulse{0%,100%{box-shadow:0 0 0 2px rgba(79,131,162,.1)}50%{box-shadow:0 0 0 5px rgba(79,131,162,.17)}}
@media(max-width:1000px) and (min-width:681px){.capability-section{width:calc(100% - 44px);padding-top:34px;gap:14px}.capability-grid{gap:10px}.capability-card{padding:11px;min-height:250px}.capability-mockup{height:128px;padding:10px 9px}.capability-result p{font-size:10px}}
@media(max-width:680px){.capability-section{width:100%;height:auto;min-height:100svh;padding:78px 20px 42px;gap:20px;overflow:visible}.capability-heading{display:block}.capability-grid{grid-template-columns:1fr;gap:12px}.capability-card{min-height:0;padding:13px;border-radius:15px}.capability-mockup{height:145px;padding:11px 12px}.mockup-top{margin-bottom:9px}.capability-mockup h3{margin-bottom:9px}.build-timeline{margin-bottom:8px}.mockup-note{font-size:8px}.capability-result{padding:12px 2px 2px}.capability-result strong{font-size:35px}.capability-result p{font-size:11px;line-height:1.5;margin-top:7px}.stack-band{margin-top:3px}.stack-group li{height:39px;padding:0 11px;font-size:9px}.stack-mark{width:22px;height:22px;flex-basis:22px}.stack-group{gap:8px}}
@media(prefers-reduced-motion:reduce){.stack-track,.flow-nodes span,.mockup-pulse:before,.mockup-note,.build-phone,.flow-connector{animation:none!important}.capability-card,.capability-mockup,.stack-group li{transition:none!important}}

@media(min-width:681px){.hero{height:calc(100svh - 110px);min-height:620px}.capability-section{height:auto;min-height:0;margin-top:-48px;padding-top:38px}}

/* Mockups de producto para las tarjetas de CONSBI */
.build-preview{padding-top:0}
.build-laptop{position:absolute;left:1px;top:0;width:70%;height:94px;z-index:1;animation:laptopFloat 5s ease-in-out infinite}
.laptop-screen{height:79px;padding:5px 6px;border:2px solid #34465a;border-bottom-width:4px;border-radius:7px 7px 3px 3px;background:#fff;box-shadow:0 7px 13px rgba(31,47,67,.12)}
.laptop-bar{height:7px;display:flex;align-items:center;gap:3px}.laptop-bar i{width:4px;height:4px;border-radius:50%;background:#d4c2a4}.laptop-bar span{margin-left:auto;color:#8d9aa4;font-size:4px;letter-spacing:.04em}
.laptop-content{padding:5px 5px}.laptop-content b,.laptop-content>span{display:block}.laptop-content b{color:#34485a;font-size:7px;line-height:1.2}.laptop-content>span{margin-top:3px;color:#82909c;font-size:5px}
.laptop-progress{height:4px;margin:5px 0;background:#e8eef2;border-radius:4px;overflow:hidden}.laptop-progress i{display:block;width:72%;height:100%;border-radius:4px;background:#d99a14;animation:progressGrow 3.8s ease-in-out infinite alternate}
.laptop-lines{display:grid;gap:3px}.laptop-lines i{height:3px;border-radius:3px;background:#eaf0f4}.laptop-lines i:nth-child(2){width:76%}.laptop-lines i:nth-child(3){width:55%}
.laptop-base{position:absolute;left:-5%;bottom:8px;width:110%;height:7px;border-radius:1px 1px 7px 7px;background:linear-gradient(90deg,#bcc9d1,#f2f5f6 48%,#b8c4cc);clip-path:polygon(3% 0,97% 0,100% 65%,92% 100%,8% 100%,0 65%)}
.build-phone{right:10px;top:3px;width:56px;height:106px}
.flow-nodes.flow-logos{justify-content:space-between;gap:0;margin:0 0 12px;padding:0 1px}
.flow-logo-node{width:35px!important;height:39px!important;flex:0 0 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:8px;background:#fff!important;box-shadow:0 5px 12px rgba(35,61,82,.08);animation:nodeFloat 3s ease-in-out infinite}
.flow-logo-node img{width:18px;height:18px;object-fit:contain}.flow-logo-node small{color:#637689;font-size:5px;line-height:1;white-space:nowrap}.flow-logo-node.flow-excel b{width:17px;height:17px;display:grid;place-items:center;border-radius:4px;background:#e8f2ed;color:#18784a;font-size:13px;line-height:1;font-weight:800}
.flow-logo-node:nth-of-type(2){animation-delay:.25s}.flow-logo-node:nth-of-type(3){animation-delay:.5s}.flow-logo-node:nth-of-type(4){animation-delay:.75s}.flow-logo-node:nth-of-type(5){animation-delay:1s}
.flow-connector{font-size:8px;line-height:1;flex:0 0 8px}
.customizer-preview{display:grid;gap:5px;margin:-1px 0 10px}
.customizer-tools{height:22px;padding:3px 6px;display:flex;align-items:center;gap:5px;border-radius:7px;background:rgba(255,255,255,.88);box-shadow:0 3px 9px rgba(35,61,82,.04)}
.customizer-logo{width:14px;height:14px;flex:0 0 14px;display:grid;place-items:center;border-radius:4px;background:#416e8d;color:#fff;font-size:7px;font-weight:800;animation:brandShift 3.2s ease-in-out infinite}
.customizer-palette{display:flex;gap:2px}.customizer-palette i{width:8px;height:8px;border:1px solid rgba(38,54,80,.12);border-radius:50%;background:#d39816;animation:swatchGlow 2.4s ease-in-out infinite}.customizer-palette i:nth-child(2){background:#416e8d;animation-delay:.2s}.customizer-palette i:nth-child(3){background:#4d987b;animation-delay:.4s}.customizer-palette i:nth-child(4){background:#bd8050;animation-delay:.6s}
.customizer-tools small{color:#71808e;font-size:6px;white-space:nowrap}.customizer-edit{margin-left:auto;color:#d39816;font-size:11px;animation:editPulse 2.2s ease-in-out infinite}
.customizer-preview .app-preview{margin:0}
@keyframes laptopFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes progressGrow{from{width:55%}to{width:82%}}
@keyframes brandShift{0%,100%{background:#416e8d;transform:rotate(0)}50%{background:#d39816;transform:rotate(-7deg)}}
@keyframes swatchGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes editPulse{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@media(max-width:1000px) and (min-width:681px){.flow-logo-node{width:29px!important;flex-basis:29px}.flow-logo-node small{font-size:4.5px}.flow-connector{font-size:7px;flex-basis:7px}.build-laptop{width:68%}.build-phone{right:7px;width:52px;height:101px}}
@media(max-width:680px){.flow-logo-node{width:35px!important;flex-basis:35px}.flow-logo-node small{font-size:5px}}
@media(prefers-reduced-motion:reduce){.build-laptop,.build-phone,.flow-logo-node,.laptop-progress i,.customizer-logo,.customizer-palette i,.customizer-edit{animation:none!important}}
.build-phone{padding:1px;border-width:2px;background:#34465a}
.build-note{bottom:2px}
.flow-logo-node.flow-excel img{width:18px;height:18px;object-fit:contain}
.capability-card-build .build-note{bottom:-6px}
.capability-card-data .mockup-note,.capability-card-app .mockup-note{bottom:-1px}
