/* ==========================================================================
   Cuantico — Servicios
   Composiciones conceptuales (sin capturas del producto), ecosistema y
   ocho soluciones con fondos alternados.
   ========================================================================== */

.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs a { transition: color .25s; } .crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: var(--brand-bright); }
.fine { margin-top: 18px; max-width: 76ch; font-size: .88rem; color: #55667f; }
.fine--dark { color: #9fb6d3; }
.vcap { margin-top: 14px; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #8193ad; }
.pills { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { padding: 8px 16px; border-radius: 999px; font-size: .86rem; font-weight: 500; color: var(--navy); background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .1); transition: transform .35s var(--ease-spring), background .3s, color .3s; }
.pills li:hover { transform: translateY(-3px); background: var(--blue); color: #fff; }
.pills--dark li { color: #eaf2fc; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pills--dark li:hover { background: #fff; color: var(--navy); }
.sv__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sv--erp .btn--ghost, .sv--micro .btn--ghost, .sv--web .btn--ghost { color: var(--navy); box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .3); }
.sv--erp .btn--ghost:hover { background: var(--navy); color: #fff; box-shadow: none; }

/* ---------- Hero ---------- */
.shero {
  position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 64px) 0 clamp(72px, 9vw, 120px);
  background: radial-gradient(50% 60% at 80% 40%, rgba(27, 79, 156, .55), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(59, 154, 225, .16), transparent 70%), var(--navy);
}
.shero__glow { position: absolute; z-index: -1; left: 58%; top: 45%; width: 52vw; height: 52vw; max-width: 820px; max-height: 820px; transform: translate(-30%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(59, 154, 225, .24), transparent 62%); pointer-events: none; }
.shero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.shero__eyebrow { margin-top: 22px; color: #bfe6ff; }
.shero__title { margin: 22px 0 24px; font-size: clamp(2.5rem, 5.2vw, 5.4rem); line-height: .96; letter-spacing: -.055em; font-weight: 500; }
.shero__title .split-line { padding-bottom: .12em; margin-bottom: -.12em; }
.shero__title .serif-i { font-size: 1.08em; letter-spacing: -.03em; padding-right: .1em; }
.shero__lead { max-width: 54ch; color: #c3d2e5; }
.shero__sub { margin-top: 14px; max-width: 54ch; color: #9fb6d3; font-size: .98rem; }
.shero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.shero [data-hero-in] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out); transition-delay: var(--d, 0s); }
.shero.is-ready [data-hero-in] { opacity: 1; transform: none; }
.shero .split-line > span { transition-duration: 1.4s; }
.shero.is-ready .split-line > span { transform: none; }

/* composición conceptual del hero */
.stage { --px: 0; --py: 0; position: relative; width: 100%; aspect-ratio: 1.12; min-height: 340px; }
.stage__grid { position: absolute; inset: 4% 0; border-radius: 28px; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.sc { position: absolute; border-radius: 18px; background: linear-gradient(160deg, rgba(27, 79, 156, .8), rgba(11, 31, 58, .92)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 40px 80px -30px rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translate3d(calc(var(--px) * var(--dep, 10) * 1px), calc(var(--py) * var(--dep, 10) * 1px), 0); transition: transform .4s var(--ease-out); }
.sc__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sc__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .sc__bar i:first-child { background: #ff7a6b; } .sc__bar i:nth-child(2) { background: #ffb547; } .sc__bar i:nth-child(3) { background: #4fe3a8; }
.sc__t { margin-left: 8px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; color: #9fb6d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc--main { left: 0; top: 8%; width: 70%; animation: scFloat 8s ease-in-out infinite; }
.sc__body { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px; }
.sc__rail { display: grid; gap: 8px; align-content: start; } .sc__rail i { height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .1); } .sc__rail i.on { background: var(--sky); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.kpi small { font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; color: #bfe6ff; font-family: var(--font-mono); }
.kpi b { display: block; height: 10px; width: 70%; border-radius: 4px; background: rgba(255, 255, 255, .5); } .kpi em { display: block; height: 5px; width: 45%; border-radius: 4px; background: #4fe3a8; }
.chart { position: relative; margin-top: 10px; height: 96px; border-radius: 12px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.bars { position: absolute; inset: 10px 10px 8px; display: flex; align-items: flex-end; gap: 8px; } .bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #6ccbff, #1B4F9C); transform-origin: bottom; animation: grow 1.6s var(--ease-out) both; }
.bars i:nth-child(2) { animation-delay: .08s; } .bars i:nth-child(3) { animation-delay: .16s; } .bars i:nth-child(4) { animation-delay: .24s; } .bars i:nth-child(5) { animation-delay: .32s; } .bars i:nth-child(6) { animation-delay: .4s; } .bars i:nth-child(7) { animation-delay: .48s; }
.chart svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); } .chart svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; animation: draw 2.4s var(--ease-out) .5s both; }
@keyframes grow { from { transform: scaleY(0); } } @keyframes draw { from { stroke-dashoffset: 300; } }
@keyframes scFloat { 50% { margin-top: -10px; } }
.sc--phone { right: 4%; top: 0; width: 24%; min-width: 96px; aspect-ratio: .5; padding: 8px; border-radius: 22px; animation: scFloat 7s ease-in-out -2s infinite; }
.phone { height: 100%; border-radius: 16px; padding: 10px 8px; background: rgba(11, 31, 58, .8); display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.phone__n { display: block; width: 28%; height: 5px; margin: 0 auto; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.phone__rows { display: grid; gap: 8px; align-content: start; } .phone__rows span { height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .12); } .phone__rows .w { width: 70%; background: rgba(59, 154, 225, .55); }
.phone__btn { height: 18px; border-radius: 9px; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.sc--app { left: 12%; bottom: 0; width: 42%; animation: scFloat 9s ease-in-out -4s infinite; }
.app { display: grid; gap: 8px; padding: 12px; } .app p { display: flex; align-items: center; gap: 8px; margin: 0; } .app span { height: 8px; width: 80%; border-radius: 4px; background: rgba(255, 255, 255, .25); } .app span.w { width: 55%; }
.ck { flex: none; width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); } .ck.on { background: #4fe3a8; box-shadow: none; }
.app__btn { height: 18px; width: 50%; border-radius: 9px; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.chipf { position: absolute; padding: 7px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, rgba(59, 154, 225, .7), rgba(27, 79, 156, .85)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 12px 28px -10px rgba(59, 154, 225, .7); transform: translate3d(calc(var(--px) * var(--dep, 10) * 1px), calc(var(--py) * var(--dep, 10) * 1px), 0); transition: transform .4s var(--ease-out); animation: scFloat 6s ease-in-out infinite; }
.chipf--1 { left: 2%; top: 2%; } .chipf--2 { right: 30%; top: 50%; animation-delay: -1.5s; } .chipf--3 { right: 0; bottom: 14%; animation-delay: -3s; } .chipf--4 { left: 56%; bottom: 0; animation-delay: -4s; }
.stage__cap { position: absolute; right: 0; bottom: -4px; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #8193ad; }
@media (max-width: 980px) { .shero__grid { grid-template-columns: 1fr; } .stage { max-width: 560px; margin-inline: auto; } }

/* ---------- Necesidad ---------- */
.needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.need { position: relative; display: grid; align-content: start; gap: 10px; height: 100%; min-height: 280px; padding: 26px 24px 30px; border-radius: 24px; color: #23364f; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); overflow: hidden; transition: transform .5s var(--ease-out), background .4s, box-shadow .4s; }
.need::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.need:hover { transform: translateY(-8px); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .45), 0 36px 60px -36px rgba(27, 79, 156, .6); }
.need:hover::after { transform: none; }
.need__n { font-size: .7rem; letter-spacing: .14em; color: var(--blue); }
.need strong { font-size: 1.3rem; font-weight: 550; letter-spacing: -.03em; line-height: 1.12; color: var(--navy); }
.need span:not(.need__n) { font-size: .95rem; }
.need em { margin-top: auto; font-style: normal; font-weight: 550; color: var(--blue); }
.need em b { display: inline-block; font-weight: 500; transition: transform .35s var(--ease-spring); } .need:hover em b { transform: translateX(6px); }
@media (max-width: 1100px) { .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .needs { grid-template-columns: minmax(0, 1fr); } .need { min-height: 0; } }

/* ---------- Ecosistema ---------- */
.eco { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(18px, 3vw, 34px); border-radius: var(--radius-lg); background: rgba(11, 31, 58, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 50px 90px -50px rgba(0, 0, 0, .7); }
.eco__map { position: relative; aspect-ratio: 100 / 62; }
.eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.eco__lines path { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: .35; stroke-dasharray: 1.4 1.4; vector-effect: non-scaling-stroke; stroke-width: 1.4; transition: stroke .3s; animation: ecoDash 3s linear infinite; }
.eco__lines path.is-on { stroke: #fff; stroke-dasharray: none; }
@keyframes ecoDash { to { stroke-dashoffset: -12; } }
.pk { fill: #fff; filter: drop-shadow(0 0 2px #bfe6ff); }
.eno { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; color: #fff; transition: transform .4s var(--ease-spring); }
.eno__i { display: grid; place-items: center; width: clamp(48px, 7vw, 72px); height: clamp(48px, 7vw, 72px); border-radius: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 16px 30px -14px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s, box-shadow .3s, color .3s; }
.eno__i svg { width: 46%; height: 46%; } .eno__i img { width: 54%; height: auto; }
.eno b { font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.eno--hub .eno__i { width: clamp(64px, 10vw, 104px); height: clamp(64px, 10vw, 104px); border-radius: 30px; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .15), 0 0 70px 6px rgba(59, 154, 225, .6); }
.eno:hover { transform: translate(-50%, -50%) scale(1.08); }
.eno.is-on .eno__i { background: #fff; color: var(--navy); box-shadow: 0 0 0 6px rgba(255, 255, 255, .22), 0 0 40px 4px rgba(255, 255, 255, .35); }
.eco__info { display: grid; gap: 10px; align-content: center; }
.eco__k { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #bfe6ff; }
.eco__info h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; color: #fff; }
.eco__info p:not(.eco__k) { color: #e4eefb; }
.eco__info .link-arrow { color: #fff; margin-top: 6px; }
.eco__info.is-pop { animation: svPop .5s var(--ease-out); }
@keyframes svPop { from { opacity: .3; transform: translateY(8px); } }
@media (max-width: 900px) { .eco { grid-template-columns: 1fr; } .eno b { font-size: .56rem; } }

/* ---------- Índice de soluciones ---------- */
.svintro { padding-block: clamp(64px, 9vw, 120px) clamp(24px, 4vw, 48px); background: #fff; color: var(--fg); }
.svintro__t { margin: 22px 0 16px; max-width: 22ch; }
.svnav { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.svnav a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-weight: 550; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .2); transition: background .3s, color .3s, transform .35s var(--ease-spring), box-shadow .3s; }
.svnav a b { font-size: .68rem; color: var(--blue); font-weight: 500; transition: color .3s; }
.svnav a:hover { background: var(--navy); color: #fff; box-shadow: none; transform: translateY(-3px); } .svnav a:hover b { color: #8fc9f2; }

/* ---------- Estructura común de cada solución ---------- */
.sv { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 140px); scroll-margin-top: calc(var(--header-h)); background: var(--bg); color: var(--fg); }
.sv__glow { position: absolute; right: -15%; top: 10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 154, 225, .22), transparent 62%); pointer-events: none; }
.sv.theme-dark:not(.bg-blue) { background: var(--navy); }
.sv .container { position: relative; }
.sv__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.sv__grid--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sv__head { max-width: 980px; margin-bottom: clamp(32px, 5vw, 56px); }
.svh { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; }
.svh__n { font-size: .8rem; letter-spacing: .1em; color: #fff; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.svh__k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.sv.theme-dark .svh__k { color: #8fc9f2; }
.sv__t { margin-bottom: 20px; }
.sv .lead { max-width: 62ch; }
@media (max-width: 960px) { .sv__grid, .sv__grid--flip { grid-template-columns: minmax(0, 1fr); } .sv__grid--flip .sv__vis { order: 2; } }

/* marco de imagen */
.sv__vis { position: relative; }
.frame { position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: #eef4fb; box-shadow: 0 0 0 1px rgba(11, 31, 58, .1), 0 50px 90px -40px rgba(11, 31, 58, .55); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame figcaption { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(11, 31, 58, .7); }
.frame--tall { aspect-ratio: .8; } .frame--tall img { object-position: 50% 38%; }
.frame--dash { aspect-ratio: .92; background: #0B1F3A; }

/* 01 ERP */
.sv--erp .sv__vis { max-width: 520px; margin-inline: auto; width: 100%; }
.fl { position: absolute; padding: 9px 18px; border-radius: 999px; font-size: .84rem; font-weight: 550; color: var(--navy); background: #fff; box-shadow: 0 16px 34px -14px rgba(11, 31, 58, .5), inset 0 0 0 1px rgba(11, 31, 58, .08); animation: scFloat 6s ease-in-out infinite; }
.fl--1 { right: -4%; top: 14%; } .fl--2 { left: -5%; top: 46%; animation-delay: -2s; } .fl--3 { right: -3%; bottom: 14%; animation-delay: -4s; }
.perks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.perks li { display: grid; gap: 2px; padding: 16px 20px; border-radius: 18px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); transition: transform .5s var(--ease-out), background .3s, box-shadow .3s; }
.perks li:hover { transform: translateX(8px); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 20px 40px -28px rgba(27, 79, 156, .6); }
.perks strong { color: var(--navy); font-size: 1.04rem; font-weight: 600; letter-spacing: -.02em; } .perks span { font-size: .93rem; color: #23364f; }

/* 02 comercios */
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.cap { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; text-align: left; font-size: .9rem; font-weight: 500; color: #dbe8f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background .3s, color .3s, transform .35s var(--ease-spring), box-shadow .3s; }
.cap svg { flex: none; width: 20px; height: 20px; color: #8fc9f2; }
.cap:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff; }
.cap[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6); } .cap[aria-selected="true"] svg { color: var(--blue); }
.sc--shop { position: relative; border-radius: 22px; animation: none; transform: none; }
.shopbody { position: relative; display: grid; grid-template-columns: 1fr 140px; gap: 14px; padding: 16px; min-height: 260px; }
.shopbody > * { display: none; }
.sc--shop[data-layout="rows"] .shopbody__rows, .sc--shop[data-layout="cards"] .shopbody__cards, .sc--shop[data-layout="bars"] .shopbody__bars, .sc--shop[data-layout="table"] .shopbody__table { display: grid; animation: svPop .5s var(--ease-out); }
.shopbody__total { display: grid !important; gap: 10px; align-content: start; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.shopbody__total small { height: 6px; width: 60%; border-radius: 4px; background: rgba(255, 255, 255, .3); } .shopbody__total strong { height: 18px; width: 90%; border-radius: 6px; background: rgba(255, 255, 255, .6); } .btnk { height: 28px; border-radius: 9px; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); margin-top: 22px; }
.shopbody__rows { gap: 8px; align-content: start; } .shopbody__rows p { display: grid; grid-template-columns: 22px 1fr 44px; align-items: center; gap: 10px; margin: 0; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.shopbody__rows i { height: 16px; border-radius: 5px; background: rgba(59, 154, 225, .6); } .shopbody__rows span { height: 7px; width: 85%; border-radius: 4px; background: rgba(255, 255, 255, .3); } .shopbody__rows span.w { width: 55%; } .shopbody__rows b { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.shopbody__cards { grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; } .shopbody__cards div { height: 74px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .shopbody__cards div:first-child { background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.shopbody__bars { align-items: end; grid-auto-flow: column; gap: 10px; } .shopbody__bars i { height: calc(var(--h) * 200px); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #6ccbff, #1B4F9C); animation: grow 1.2s var(--ease-out) both; }
.shopbody__table { gap: 8px; align-content: start; } .shopbody__table p { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 0; padding: 12px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); } .shopbody__table span { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .3); } .shopbody__table p:first-child span { background: rgba(59, 154, 225, .7); }
.shopdesc { margin-top: 16px; min-height: 3.2em; color: #dbe8f8; }
.pricebox { margin-top: 18px; padding: 22px 24px; border-radius: 22px; background: linear-gradient(135deg, rgba(59, 154, 225, .28), rgba(27, 79, 156, .35)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.pricebox__k { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #bfe6ff; }
.pricebox h3 { margin: 6px 0 12px; font-size: 1.25rem; font-weight: 550; letter-spacing: -.02em; color: #fff; }
.pricebox ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: .88rem; color: #eaf2fc; }
.pricebox li { display: flex; gap: 8px; align-items: baseline; } .pricebox li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); transform: translateY(-1px); }
@media (max-width: 560px) { .caps, .pricebox ul { grid-template-columns: minmax(0, 1fr); } .shopbody { grid-template-columns: 1fr; } .shopbody__total { display: none !important; } }

/* 03 micro apps */
.sv--micro { background: var(--paper); }
.pain { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pain li { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 16px; font-weight: 550; color: var(--navy); background: #fff; box-shadow: 0 0 0 1px rgba(11, 31, 58, .08), 0 14px 30px -22px rgba(11, 31, 58, .5); transition: transform .4s var(--ease-spring); }
.pain li:hover { transform: translateY(-4px) rotate(-1deg); }
.pain b { font-size: .68rem; color: #c24a3d; }
.evo { padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-lg); background: linear-gradient(170deg, #fff, #f8fafc); box-shadow: 0 0 0 1px rgba(11, 31, 58, .1), 0 40px 80px -50px rgba(11, 31, 58, .5); }
.evo__ctrl { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: #e8edf4; }
.evo__o { padding: 11px 20px; border-radius: 999px; font-size: .9rem; font-weight: 550; color: #23364f; transition: background .3s, color .3s; }
.evo__o.is-on { background: var(--navy); color: #fff; }
.evo__flow { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: e; }
.evo__flow li { position: relative; counter-increment: e; }
.evo__flow li::before { content: ""; position: absolute; left: 50%; right: -50%; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, #c24a3d 0 6px, transparent 6px 12px); transition: background .5s; }
.evo__flow li:last-child::before { display: none; }
.evo__b { position: relative; display: grid; place-items: center; min-height: 86px; padding: 40px 10px 12px; border-radius: 16px; text-align: center; font-size: .9rem; font-weight: 550; line-height: 1.2; color: #7a2b22; background: #fdecea; box-shadow: inset 0 0 0 1px rgba(194, 74, 61, .25); transition: background .5s, color .5s, box-shadow .5s, transform .5s var(--ease-spring); }
.evo__b::before { content: counter(e, decimal-leading-zero); position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--font-mono); font-size: .66rem; color: #fff; background: #c24a3d; transition: background .5s; }
.evo.is-micro .evo__b { color: var(--navy); background: #e6f1fc; box-shadow: inset 0 0 0 1px rgba(27, 79, 156, .3); }
.evo.is-micro .evo__b::before { background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.evo.is-micro .evo__flow li::before { background: linear-gradient(90deg, var(--blue), var(--sky)); }
.evo__flow li:hover .evo__b { transform: translateY(-5px); }
.evo__note { margin-top: 22px; color: #55667f; }
.micro__bottom { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 72px); margin-top: clamp(36px, 5vw, 64px); }
.micro__uses h3, .micro__int h3 { font-size: 1.35rem; font-weight: 550; letter-spacing: -.03em; color: var(--navy); margin-bottom: 4px; }
.micro__int p { margin-top: 10px; color: #23364f; }
@media (max-width: 960px) { .evo__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .evo__flow li::before { display: none; } .micro__bottom { grid-template-columns: 1fr; } }

/* 04 móviles */
.apps { display: grid; gap: 8px; margin-top: 26px; }
.app-t { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; border-radius: 16px; text-align: left; font-weight: 550; color: #eaf2fc; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); transition: background .3s, color .3s, transform .4s var(--ease-out), box-shadow .3s; }
.app-t span { font-size: .7rem; color: #bfe6ff; }
.app-t:hover { transform: translateX(6px); box-shadow: inset 0 0 0 1px #fff; }
.app-t[aria-selected="true"] { background: #fff; color: var(--navy); transform: translateX(10px); } .app-t[aria-selected="true"] span { color: var(--blue); }
.sv--mob .sv__vis { display: grid; justify-items: center; }
.phone3d { position: relative; width: min(100%, 280px); aspect-ratio: .5; perspective: 1200px; }
.phone3d__body { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 18px 16px 20px; border-radius: 40px; background: linear-gradient(170deg, #0f2a4d, #081730); box-shadow: 0 0 0 6px #16365f, 0 0 0 7px rgba(255, 255, 255, .3), 0 60px 90px -30px rgba(0, 0, 0, .8); transform: rotateY(-14deg) rotateX(4deg) rotateZ(2deg); transition: transform .8s var(--ease-out); animation: scFloat 7s ease-in-out infinite; }
.phone3d:hover .phone3d__body { transform: rotateY(-4deg) rotateX(1deg) rotateZ(0); }
.phone3d__top i { display: block; width: 34%; height: 8px; margin: 0 auto; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.phone3d__head { display: flex; align-items: center; justify-content: space-between; color: #fff; font-weight: 600; letter-spacing: -.02em; } .phone3d__head i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.phone3d__list { display: grid; gap: 10px; align-content: start; } .phone3d__list p { display: grid; grid-template-columns: 26px 1fr 28px; align-items: center; gap: 10px; margin: 0; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.phone3d__list i { height: 22px; border-radius: 8px; background: rgba(59, 154, 225, .6); } .phone3d__list span { height: 7px; width: 85%; border-radius: 4px; background: rgba(255, 255, 255, .3); } .phone3d__list span.w { width: 55%; } .phone3d__list b { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.phone3d__btn { height: 40px; border-radius: 14px; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.phone3d__ring { position: absolute; left: -30%; right: -30%; top: 55%; height: 40%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); transform: rotateX(72deg); z-index: -1; }
.phone3d.is-swap .phone3d__list p { animation: svPop .5s var(--ease-out) both; } .phone3d.is-swap .phone3d__list p:nth-child(2) { animation-delay: .06s; } .phone3d.is-swap .phone3d__list p:nth-child(3) { animation-delay: .12s; } .phone3d.is-swap .phone3d__list p:nth-child(4) { animation-delay: .18s; }
.mobdesc { margin-top: 26px; max-width: 40ch; text-align: center; color: #e4eefb; min-height: 4.8em; }
.sv--mob .vcap { color: #cfe3fa; }
.theme-light .vcap { color: #55667f; }

/* 05 BI + IA */
.sv--bi .sv__vis { max-width: 560px; margin-inline: auto; width: 100%; }
.kfl { position: absolute; display: grid; gap: 6px; padding: 12px 14px; min-width: 96px; border-radius: 16px; color: var(--navy); background: #fff; box-shadow: 0 20px 40px -16px rgba(11, 31, 58, .55), inset 0 0 0 1px rgba(11, 31, 58, .08); animation: scFloat 6s ease-in-out infinite; }
.kfl small { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #55667f; }
.kfl--1 { left: -6%; top: 12%; display: flex; align-items: flex-end; gap: 4px; height: 76px; } .kfl--1 small { position: absolute; left: 12px; top: 8px; } .kfl--1 i { width: 10px; height: calc(var(--h) * 40px); border-radius: 3px; background: linear-gradient(180deg, #3B9AE1, #1B4F9C); }
.kfl--2 { right: -5%; top: 28%; animation-delay: -2s; } .kfl--2 svg { width: 80px; height: 30px; } .kfl--2 path { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kfl--3 { left: -4%; bottom: 20%; animation-delay: -3s; } .ring { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--blue) 0 68%, #dce8f6 0); -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%); animation: spin2 6s linear infinite; }
.kfl--4 { right: -3%; bottom: 8%; animation-delay: -4s; } .mini { display: grid; gap: 5px; } .mini u { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #3B9AE1, #1B4F9C); } .mini u:nth-child(1) { width: 70px; } .mini u:nth-child(2) { width: 50px; } .mini u:nth-child(3) { width: 60px; }
@keyframes spin2 { to { transform: rotate(360deg); } }
.dsteps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.dsteps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 14px 18px; border-radius: 16px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); transition: transform .5s var(--ease-out), background .3s, box-shadow .3s; }
.dsteps li:hover { transform: translateX(8px); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .4); }
.dsteps b { align-self: start; font-size: .72rem; color: #fff; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
.dsteps strong { display: block; color: var(--navy); } .dsteps span { font-size: .92rem; color: #23364f; }
.bi360 { margin-top: clamp(48px, 7vw, 88px); padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-lg); background: linear-gradient(165deg, #0B1F3A, #16365f); color: #fff; }
.bi360__t { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.035em; }
.bi360__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bt { padding: 10px 18px; border-radius: 999px; font-weight: 500; color: #dbe8f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.bt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff; } .bt[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: none; }
.bi360__d { margin-top: 20px; max-width: 64ch; min-height: 3.2em; font-size: 1.08rem; color: #e4eefb; }
.biflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; margin-top: clamp(32px, 5vw, 56px); }
.biflow__col { padding: 20px 22px; border-radius: 20px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); }
.biflow__col p { margin-bottom: 8px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.biflow__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--navy); font-weight: 500; }
.biflow__col--mid { text-align: center; color: #fff; background: linear-gradient(135deg, #153f80, #1f63b8); } .biflow__col--mid p { color: #dbeeff; } .biflow__col--mid strong { color: #fff; font-weight: 550; }
.biflow__arrow { width: 56px; height: 2px; position: relative; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px); animation: ecoDash 3s linear infinite; background-size: 12px 2px; }
.biflow__arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 8px solid var(--blue); border-block: 5px solid transparent; }
.iaimgs { margin-top: clamp(48px, 7vw, 88px); }
.iaimgs__t { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.035em; color: var(--navy); }
.iaimgs__grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.iaimgs__grid figure { margin: 0; display: grid; gap: 10px; padding: 12px; border-radius: 22px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); transition: transform .5s var(--ease-out), box-shadow .4s, background .3s; }
.iaimgs__grid figure:hover { transform: translateY(-8px); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 30px 50px -34px rgba(27, 79, 156, .6); }
.iaimgs__grid img { width: 100%; height: auto; border-radius: 14px; mix-blend-mode: multiply; }
.iaimgs__grid figcaption { font-size: .92rem; font-weight: 550; color: var(--navy); padding: 0 6px 6px; line-height: 1.25; }
@media (max-width: 1000px) { .iaimgs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .biflow { grid-template-columns: 1fr; } .biflow__arrow { width: 2px; height: 36px; margin-inline: auto; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px); } .biflow__arrow::after { right: auto; left: -4px; top: auto; bottom: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--blue); border-bottom: 0; } }
@media (max-width: 520px) { .iaimgs__grid { grid-template-columns: minmax(0, 1fr); } .kfl { transform: scale(.85); } }

/* 06 a medida */
.arch { list-style: none; margin: 0 0 clamp(32px, 5vw, 56px); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: a; }
.arch li { position: relative; display: grid; gap: 4px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background .3s, transform .4s var(--ease-spring); }
.arch li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 2px; background: var(--sky); box-shadow: 0 0 10px var(--sky); }
.arch li:hover { background: rgba(59, 154, 225, .25); transform: translateY(-4px); }
.arch b { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #8fc9f2; font-weight: 500; } .arch span { color: #fff; font-weight: 550; }
.scen__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sct { padding: 12px 20px; border-radius: 999px; font-weight: 550; color: #dbe8f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.sct:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff; } .sct[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: none; }
.scen__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: 18px; padding: clamp(22px, 3.5vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(27, 79, 156, .5), rgba(11, 31, 58, .6)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.scen__copy { display: grid; gap: 10px; } .scen__copy .mono { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #8fc9f2; } .scen__copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -.04em; color: #fff; line-height: 1.08; } .scen__copy p:not(.mono) { color: #dbe8f8; }
.scen__panel.is-pop .scen__copy, .scen__panel.is-pop .blocks { animation: svPop .5s var(--ease-out); }
.blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.blocks i { aspect-ratio: 1.4; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background .6s, transform .6s var(--ease-spring), opacity .6s; }
.scen__panel[data-p="new"] .blocks i { animation: blockIn .7s var(--ease-out) both; } .scen__panel[data-p="new"] .blocks i:nth-child(n) { animation-delay: calc(var(--n, 0) * .07s); }
.blocks i:nth-child(1) { --n: 0; } .blocks i:nth-child(2) { --n: 1; } .blocks i:nth-child(3) { --n: 2; } .blocks i:nth-child(4) { --n: 3; } .blocks i:nth-child(5) { --n: 4; } .blocks i:nth-child(6) { --n: 5; }
@keyframes blockIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.scen__panel[data-p="extend"] .blocks i:nth-child(-n+3) { background: rgba(255, 255, 255, .16); } .scen__panel[data-p="extend"] .blocks i:nth-child(n+4) { background: linear-gradient(135deg, #3B9AE1, #1B4F9C); box-shadow: 0 0 0 1px #bfe6ff; transform: translateY(-4px); }
.scen__panel[data-p="modern"] .blocks i { background: rgba(255, 255, 255, .16); } .scen__panel[data-p="modern"] .blocks i:nth-child(even) { background: linear-gradient(135deg, #3B9AE1, #1B4F9C); box-shadow: 0 0 0 1px #bfe6ff; }
.devb__t { margin-top: clamp(40px, 6vw, 72px); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.035em; color: #fff; }
.devb { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.devb li { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: transform .5s var(--ease-out), background .3s; }
.devb li:hover { transform: translateY(-6px); background: rgba(59, 154, 225, .2); }
.devb b { font-size: .68rem; letter-spacing: .12em; color: #8fc9f2; font-weight: 500; } .devb strong { color: #fff; font-size: 1.04rem; font-weight: 600; letter-spacing: -.02em; } .devb span { font-size: .9rem; color: #c9dcf4; }
@media (max-width: 1000px) { .arch { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arch li::after { display: none; } .devb { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scen__panel { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .devb { grid-template-columns: minmax(0, 1fr); } }

/* 07 web */
.sv--web { background: var(--paper); }
.browser { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(11, 31, 58, .12), 0 50px 90px -40px rgba(11, 31, 58, .6); transform: perspective(1400px) rotateY(8deg) rotateX(2deg); transition: transform .8s var(--ease-out); }
.browser:hover { transform: perspective(1400px) rotateY(2deg) rotateX(0); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #e8edf4; }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9d4e3; } .browser__bar i:first-child { background: #ff7a6b; } .browser__bar i:nth-child(2) { background: #ffb547; } .browser__bar i:nth-child(3) { background: #4fe3a8; }
.browser__url { flex: 1; margin-left: 10px; padding: 5px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: .66rem; color: #55667f; background: #fff; }
.browser__body { position: relative; min-height: 300px; padding: 18px; }
.bw { display: none; gap: 14px; animation: svPop .5s var(--ease-out); }
.browser[data-k="0"] .bw--0, .browser[data-k="1"] .bw--1, .browser[data-k="2"] .bw--2, .browser[data-k="3"] .bw--3 { display: grid; }
.bw--0 { gap: 14px; } .bw--0 .hero { display: grid; gap: 10px; padding: 26px; border-radius: 14px; background: linear-gradient(135deg, #1B4F9C, #0B1F3A); } .bw--0 .hero span { height: 12px; width: 70%; border-radius: 6px; background: rgba(255, 255, 255, .8); } .bw--0 .hero span.w { width: 45%; background: rgba(255, 255, 255, .4); } .bw--0 .hero b { height: 26px; width: 110px; border-radius: 13px; background: #3B9AE1; margin-top: 8px; }
.bw--0 .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .bw--0 .cols i { height: 70px; border-radius: 12px; background: #eef4fb; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); }
.bw--1 { grid-template-columns: 56px 1fr; } .bw--1 .side { display: grid; gap: 10px; align-content: start; } .bw--1 .side i { height: 28px; border-radius: 9px; background: #e3edf8; } .bw--1 .side i:first-child { background: #3B9AE1; }
.bw--1 .work { display: grid; gap: 10px; align-content: start; } .bw--1 .work p { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; margin: 0; padding: 10px; border-radius: 12px; background: #f3f5f8; } .bw--1 .work i { height: 18px; border-radius: 6px; background: #3B9AE1; } .bw--1 .work span { height: 8px; width: 85%; border-radius: 4px; background: #c9d4e3; } .bw--1 .work span.w { width: 55%; } .bw--1 .btnk { width: 120px; }
.bw--2 { place-items: center; min-height: 260px; } .login { display: grid; gap: 12px; width: min(100%, 260px); padding: 22px; border-radius: 18px; background: #f3f5f8; box-shadow: 0 20px 40px -24px rgba(11, 31, 58, .5); } .login i { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); } .login span { height: 14px; border-radius: 7px; background: #dbe5f1; } .login b { height: 28px; border-radius: 9px; background: #1B4F9C; }
.bw--3 { place-items: center; min-height: 260px; } .nodes { position: relative; width: 240px; height: 200px; } .nodes i { position: absolute; width: 54px; height: 54px; border-radius: 16px; background: #eef4fb; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .12); } .nodes i:nth-child(1) { left: 0; top: 0; } .nodes i:nth-child(2) { right: 0; top: 0; } .nodes i:nth-child(3) { left: 0; bottom: 0; } .nodes u { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%, -50%); border-radius: 22px; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); box-shadow: 0 0 0 8px rgba(59, 154, 225, .18); animation: scFloat 4s ease-in-out infinite; }
.webs { display: grid; gap: 8px; margin-top: 24px; }
.wt { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; text-align: left; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .1); transition: background .3s, color .3s, transform .4s var(--ease-out), box-shadow .3s; }
.wt strong { color: var(--navy); } .wt span { font-size: .9rem; color: #23364f; }
.wt:hover { transform: translateX(6px); }
.wt[aria-selected="true"] { background: var(--navy); box-shadow: 0 20px 40px -22px rgba(11, 31, 58, .7); transform: translateX(10px); } .wt[aria-selected="true"] strong { color: #fff; } .wt[aria-selected="true"] span { color: #c9dcf4; }

/* 08 consultoría */
.cons__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cons__when h3, .cons__areas h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -.03em; color: var(--navy); margin-bottom: 16px; }
.cons__when ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cons__when li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); transition: transform .5s var(--ease-out), background .3s; }
.cons__when li:hover { transform: translateX(8px); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .35); }
.cons__when b { font-size: .7rem; color: #c24a3d; padding-top: 4px; } .cons__when strong { display: block; color: var(--navy); } .cons__when span { font-size: .92rem; color: #23364f; }
.area { border-radius: 18px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); margin-bottom: 10px; transition: background .3s, box-shadow .3s; }
.area[open] { background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 24px 44px -32px rgba(27, 79, 156, .5); }
.area summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; letter-spacing: -.02em; color: var(--navy); }
.area summary::-webkit-details-marker { display: none; }
.area summary b { font-size: .7rem; color: var(--blue); font-weight: 500; }
.area summary i { margin-left: auto; position: relative; width: 22px; height: 22px; flex: none; } .area summary i::before, .area summary i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; background: var(--blue); transition: transform .35s var(--ease-out); } .area summary i::after { transform: rotate(90deg); } .area[open] summary i::after { transform: rotate(0); }
.area > div { padding: 0 20px 20px 54px; display: grid; gap: 10px; color: #23364f; } .area .tags { font-size: .84rem; letter-spacing: .02em; color: var(--blue); font-weight: 550; }
.cstages { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cstages li { position: relative; display: grid; gap: 6px; padding: 22px 20px; border-radius: 20px; background: linear-gradient(170deg, #0B1F3A, #16365f); color: #c9dcf4; transition: transform .5s var(--ease-out), box-shadow .4s; }
.cstages li:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(11, 31, 58, .8); }
.cstages b { font-size: .72rem; color: #8fc9f2; font-weight: 500; letter-spacing: .1em; } .cstages strong { color: #fff; font-size: 1.15rem; font-weight: 550; letter-spacing: -.02em; }
@media (max-width: 960px) { .cons__grid { grid-template-columns: 1fr; } .cstages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cstages { grid-template-columns: minmax(0, 1fr); } .area > div { padding-left: 20px; } }

/* ---------- Conectadas ---------- */
.sconn { position: relative; overflow: hidden; background: var(--navy); }
.sconn__glow { position: absolute; left: -15%; bottom: -10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 154, 225, .24), transparent 62%); pointer-events: none; }
.sconn .container { position: relative; }
.conn { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "ctrl viz" "txt viz"; gap: 22px clamp(24px, 5vw, 72px); align-items: start; }
.conn__ctrl { grid-area: ctrl; display: flex; flex-wrap: wrap; gap: 8px; }
.cn { padding: 12px 20px; border-radius: 999px; font-weight: 550; color: #dbe8f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.cn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff; } .cn.is-on { background: #fff; color: var(--navy); box-shadow: none; }
.conn__txt { grid-area: txt; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(27, 79, 156, .5), rgba(11, 31, 58, .6)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.conn__txt h3 { font-size: 1.6rem; font-weight: 500; letter-spacing: -.04em; color: #fff; } .conn__txt p { margin-top: 8px; color: #dbe8f8; }
.conn__txt.is-pop { animation: svPop .5s var(--ease-out); }
.conn__viz { grid-area: viz; position: relative; aspect-ratio: 1.3; border-radius: var(--radius-lg); background: radial-gradient(60% 60% at 50% 50%, rgba(59, 154, 225, .2), transparent 70%), rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); overflow: hidden; }
.conn__viz::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .25); animation: spin2 40s linear infinite; }
.cnode { position: absolute; transform: translate(-50%, -50%) scale(.82); padding: 10px 18px; border-radius: 999px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8fa9c8; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); opacity: .5; transition: opacity .5s, transform .6s var(--ease-spring), background .5s, color .5s, box-shadow .5s; }
.cnode.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); color: #fff; background: linear-gradient(135deg, #2468b8, #1B4F9C); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 16px 34px -12px rgba(59, 154, 225, .8); }
.cnode[data-n="erp"] { left: 50%; top: 50%; font-size: .9rem; padding: 16px 28px; } .cnode[data-n="mobile"] { left: 22%; top: 22%; } .cnode[data-n="bi"] { left: 78%; top: 22%; } .cnode[data-n="micro"] { left: 20%; top: 78%; } .cnode[data-n="integ"] { left: 80%; top: 78%; } .cnode[data-n="web"] { left: 50%; top: 14%; }
@media (max-width: 900px) { .conn { grid-template-columns: 1fr; grid-template-areas: "ctrl" "viz" "txt"; } }

/* ---------- Metodología ---------- */
.meth { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; }
.mth { position: relative; display: grid; gap: 10px; align-content: start; padding: 30px 26px 32px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 31, 58, .08), 0 30px 50px -40px rgba(11, 31, 58, .5); transition: transform .5s var(--ease-out), box-shadow .4s; overflow: hidden; }
.mth:nth-child(2) { margin-top: 28px; } .mth:nth-child(3) { margin-top: 56px; }
.mth:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px rgba(27, 79, 156, .45), 0 40px 64px -36px rgba(27, 79, 156, .6); }
.mth__n { position: absolute; right: 22px; top: 14px; font-size: 4rem; font-weight: 500; letter-spacing: -.06em; line-height: 1; color: rgba(27, 79, 156, .1); }
.mth__i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); box-shadow: 0 16px 28px -12px rgba(27, 79, 156, .8); transition: transform .5s var(--ease-spring); } .mth:hover .mth__i { transform: rotate(-8deg) scale(1.1); } .mth__i svg { width: 26px; height: 26px; }
.mth h3 { font-size: 1.4rem; font-weight: 550; letter-spacing: -.03em; color: var(--navy); } .mth p { color: #23364f; }
@media (max-width: 860px) { .meth { grid-template-columns: 1fr; } .mth:nth-child(n) { margin-top: 0; } }

/* ---------- Cierre ---------- */
.send__in { display: grid; gap: 22px; justify-items: start; max-width: 940px; }
.send .lead { color: #dbe8f8; }
.send__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .sc, .chipf, .fl, .kfl, .phone3d__body, .nodes u, .ring, .eco__lines path, .biflow__arrow, .conn__viz::before, .bars i, .chart svg path, .shopbody__bars i, .blocks i { animation: none !important; }
  .stage .sc, .stage .chipf { transform: none; }
}
/* móvil: selectores en una sola fila deslizable (evita listas verticales largas) */
@media (max-width: 760px) {
  .caps, .apps { display: flex; gap: 8px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .caps::-webkit-scrollbar, .apps::-webkit-scrollbar { display: none; }
  .cap, .app-t { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .app-t[aria-selected="true"], .app-t:hover { transform: none; }
}
/* 04 · material real de las aplicaciones móviles */
.mobv { display: grid; gap: 14px; justify-items: stretch; }
.mobv__stage { position: relative; }
.mobv__mon { background: #0B1F3A; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .7); }
.mobv__mon .mon__bar { background: linear-gradient(180deg, #eef2f8, #dde5f0); }
.mobv__mon img, .mobv__mon video { display: block; width: 100%; height: auto; background: #fff; }
.mobv__mon video { background: #081730; aspect-ratio: 16 / 9; }
.mobv__mon img { max-height: 460px; object-fit: contain; object-position: top; }
.mobv__phone { display: none; }
.sv--mob.is-video .mobv__phone, .sv--mob.is-concept .mobv__phone { display: none; }
.mobv .vcap, .mobv .mobdesc { text-align: left; max-width: none; min-height: 0; }
.mobv .mobdesc { margin-top: 6px; }
.mobv__thumbs { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.mthumb { padding: 8px 16px; border-radius: 999px; font-size: .84rem; font-weight: 550; color: #eaf2fc; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.mthumb:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff; }
.mthumb[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: none; }
.mobv__mon.is-pop { animation: svPop .5s var(--ease-out); }
@media (max-width: 760px) { .mobv__phone { display: none; } }