/* Cruzial v8 · Marketing Digital «impresionante»: tipografía grande y cinética, cinta de servicios, demostraciones animadas
   por servicio (logo SVG que se construye, web que hace scroll sola, feed social, panel de app, tienda online), proceso y CTA.
   Todas las demos son genéricas y ficticias. Solo transform/opacity en las animaciones. Movimiento reducido: todo estático. */
.md8{background:#050b1c;color:#e9eefb}
.md8 main{overflow:clip}
.md8 section{padding:0}
.md8 h1,.md8 h2,.md8 h3{color:#fff}
.md-wrap{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.md-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9cc3ff}
.md-dot{width:8px;height:8px;border-radius:50%;background:#5B9BFF;box-shadow:0 0 0 4px #5b9bff33;animation:mdPulse 2.4s ease-in-out infinite}
@keyframes mdPulse{50%{box-shadow:0 0 0 9px #5b9bff00}}
.md-h2{font-size:clamp(40px,6vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:650;margin:0 0 28px}
.md8 h2 em,.md8 h1 em,.md-h2 em{font-style:normal;background:linear-gradient(90deg,#d6e4ff,#5B9BFF 60%,#3d84ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.md-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#c3cde3;max-width:560px;margin:0}
.md-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:550;text-decoration:none;border-bottom:1px solid #ffffff59;padding:6px 0;min-height:44px;box-sizing:border-box}
.md-link:hover{border-bottom-color:#fff}
.md-link:focus-visible,.md-btn:focus-visible,.md-mq-pause:focus-visible,.md8 summary:focus-visible{outline:2px solid #9cc3ff;outline-offset:4px;border-radius:6px}
.md-btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 30px;border-radius:999px;font:600 16px/1 var(--sans);color:#0a1a4a;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),#fff;border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 18px 40px -16px rgba(91,155,255,.7);transition:box-shadow .3s,background .3s}
.md-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.md-btn:hover svg{transform:translateX(4px)}
.md-btn:hover{box-shadow:inset 0 1px 0 #fff,0 22px 50px -14px rgba(91,155,255,.9)}
.md-mag{transform:translate3d(var(--mgx,0),var(--mgy,0),0);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.md-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}

/* ---------- Hero ---------- */
.md-hero{position:relative;min-height:calc(100svh - 110px);display:flex;align-items:flex-end;padding:clamp(90px,14vh,160px) 0 clamp(56px,9vh,100px)!important;isolation:isolate}
.md-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(80% 60% at 70% 20%,#0d2a6b 0%,#071334 55%,#050b1c 100%)}
.md-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;will-change:transform}
.md-blob.b1{width:46vw;height:46vw;left:48%;top:-14%;background:radial-gradient(circle,#2e6fe0,#2e6fe000 70%);animation:mdBlob1 16s ease-in-out infinite alternate}
.md-blob.b2{width:34vw;height:34vw;left:-6%;top:30%;background:radial-gradient(circle,#0069d1cc,#0069d100 70%);animation:mdBlob2 19s ease-in-out infinite alternate}
.md-blob.b3{width:26vw;height:26vw;left:66%;top:52%;background:radial-gradient(circle,#7fb2ff99,#7fb2ff00 70%);animation:mdBlob1 22s ease-in-out infinite alternate-reverse}
@keyframes mdBlob1{to{transform:translate3d(-8vw,10vh,0) scale(1.15)}}
@keyframes mdBlob2{to{transform:translate3d(10vw,-6vh,0) scale(.9)}}
.md-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000,#0000);mask-image:radial-gradient(70% 70% at 60% 40%,#000,#0000)}
.md-spot{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px;border-radius:50%;background:radial-gradient(circle,#9cc3ff26,#9cc3ff00 65%);transform:translate3d(var(--sx,60vw),var(--sy,30vh),0);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.md-hero-in{width:100%}
.md-h1{font-size:clamp(44px,10.4vw,176px)!important;line-height:.92!important;letter-spacing:-.055em!important;font-weight:700!important;margin:0 0 clamp(30px,5vh,56px)!important;color:#fff}
.md-line{display:block;overflow:hidden;padding-bottom:.06em}
.md-split{display:inline-block}
.md-split .w{display:inline-block;transform:translate3d(0,105%,0) rotate(4deg);transform-origin:0 100%;transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*70ms + 120ms)}
.is-ready .md-split .w{transform:none}
.md-rot{display:block;height:1.02em;overflow:hidden;vertical-align:bottom;position:relative}
.md-rot-in{display:flex;flex-direction:column;animation:mdRot 10s cubic-bezier(.76,0,.24,1) infinite}
.md-rot-in span{display:block;height:1.02em;line-height:1.02em;background:linear-gradient(90deg,#d6e4ff,#5B9BFF 55%,#3d84ff);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;padding-right:.06em}
@keyframes mdRot{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-1.02em)}50%,68%{transform:translateY(-2.04em)}75%,93%{transform:translateY(-3.06em)}100%{transform:translateY(-4.08em)}}
.md-hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 60px}
.md-scroll{position:absolute;left:50%;bottom:18px;margin:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8fa2c8}
.md-scroll i{width:1px;height:34px;background:linear-gradient(#9cc3ff,#9cc3ff00);animation:mdScroll 2.2s cubic-bezier(.65,0,.35,1) infinite;transform-origin:top}
@keyframes mdScroll{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- Cinta de servicios ---------- */
.md-marquee{position:relative;overflow:hidden;padding:26px 0;border-block:1px solid #ffffff1f;background:#060e24}
.md-mq-track{display:flex;width:max-content;animation:mdMq 38s linear infinite}
.md-marquee.is-paused .md-mq-track{animation-play-state:paused}
.md-mq-group{display:flex;gap:0;margin:0;padding:0;list-style:none}
.md-mq-group li{font:700 clamp(30px,4.6vw,68px)/1.1 var(--sans);letter-spacing:-.04em;color:#fff;padding:0 .5em;white-space:nowrap;display:flex;align-items:center;gap:.5em}
.md-mq-group li::after{content:"✦";font-size:.42em;color:#5B9BFF}
.md-mq-group li.o{color:transparent;-webkit-text-stroke:1.4px #9cc3ff}
@keyframes mdMq{to{transform:translateX(-50%)}}
.md-mq-pause{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;color:#fff;cursor:pointer;background:rgba(12,20,44,.8);border:1px solid #ffffff47;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.md-mq-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.md-mq-pause .i-play{display:none;fill:currentColor;stroke:none}
.md-mq-pause[aria-pressed=true] .i-pause{display:none}.md-mq-pause[aria-pressed=true] .i-play{display:block}

/* ---------- Manifiesto: las palabras se encienden con el scroll ---------- */
.md-manifest{padding:clamp(100px,16vh,200px) 0!important}
.md-big-read{margin:0;font-size:clamp(30px,4.4vw,66px);line-height:1.14;letter-spacing:-.035em;font-weight:600;color:#fff;max-width:1180px}
.js .md-big-read .w{opacity:.42;transition:opacity .35s linear}
.js .md-big-read .w.on{opacity:1}

/* ---------- Servicios ---------- */
.md-services{padding:clamp(40px,8vh,90px) 0 clamp(60px,10vh,120px)!important;background:linear-gradient(180deg,#050b1c,#07122e 40%,#050b1c)}
.md-sec-head{margin-bottom:clamp(40px,8vh,90px)}
.md-sv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:center;padding:clamp(50px,9vh,110px) 0;border-top:1px solid #ffffff1a}
.md-sv-alt .md-sv-txt{order:2}
.md-num{margin:0 0 14px;font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#5B9BFF;letter-spacing:.1em}
.md-sv h3{font-size:clamp(32px,3.6vw,56px);line-height:1;letter-spacing:-.04em;margin:0 0 20px;font-weight:650}
.md-sv p{color:#c3cde3;font-size:clamp(16px,1.2vw,18px);line-height:1.6;margin:0 0 22px;max-width:520px}
.md-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.md-tags li{padding:8px 14px;border-radius:999px;font-size:13px;color:#dfe8fb;background:#ffffff0d;border:1px solid #ffffff26}
.md-demo{position:relative;margin:0;border-radius:28px;aspect-ratio:5/4;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 70% 20%,#1c4aa866,#1c4aa800),linear-gradient(160deg,#0d1d45,#081331);border:1px solid #ffffff21;box-shadow:inset 0 1px 0 #ffffff1f,0 40px 80px -40px #000}
.md-demo-stage{position:relative;width:88%}
.md-demo-cap{position:absolute;left:16px;bottom:14px;margin:0;padding:6px 12px;border-radius:999px;font-size:12px;color:#dfe8fb;background:#050b1ccc;border:1px solid #ffffff26}
/* 01 · logo que se construye */
.md-logo-svg{display:block;width:100%;height:auto;overflow:visible}
.lg-guides{opacity:0}
.lg-p1,.lg-p2{stroke-dasharray:1;stroke-dashoffset:1}
.lg-fill{transform-origin:110px 120px;transform:scale(0)}
.lg-word{opacity:0;transform:translateX(-14px)}
.lg-kit{display:flex;align-items:center;gap:10px;margin:8px 0 0 4%}
.lg-kit span{width:34px;height:34px;border-radius:10px;background:var(--c);border:1px solid #ffffff33;transform:translateY(12px);opacity:0}
.lg-kit b{margin-left:10px;font-size:34px;color:#fff;font-weight:700;letter-spacing:-.04em;opacity:0}
.is-live .lg-guides{animation:lgGuides 7s ease infinite}
.is-live .lg-p1{animation:lgDraw 7s cubic-bezier(.65,0,.35,1) infinite}
.is-live .lg-p2{animation:lgDraw2 7s cubic-bezier(.65,0,.35,1) infinite}
.is-live .lg-fill{animation:lgPop 7s cubic-bezier(.34,1.56,.64,1) infinite}
.is-live .lg-word{animation:lgWord 7s cubic-bezier(.16,1,.3,1) infinite}
.is-live .lg-kit span,.is-live .lg-kit b{animation:lgKit 7s cubic-bezier(.16,1,.3,1) infinite;animation-delay:calc(var(--k,0)*90ms)}
.lg-kit span:nth-child(2){--k:1}.lg-kit span:nth-child(3){--k:2}.lg-kit span:nth-child(4){--k:3}.lg-kit b{--k:4}
@keyframes lgGuides{0%{opacity:0}8%,30%{opacity:.5}45%,100%{opacity:0}}
@keyframes lgDraw{0%,8%{stroke-dashoffset:1}32%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lgDraw2{0%,22%{stroke-dashoffset:1}40%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lgPop{0%,40%{transform:scale(0)}48%,92%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
@keyframes lgWord{0%,46%{opacity:0;transform:translateX(-14px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lgKit{0%,58%{opacity:0;transform:translateY(12px)}66%,92%{opacity:1;transform:none}100%{opacity:0}}
/* 02 · web que hace scroll sola */
.md-laptop{width:86%;transform:perspective(1400px) rotateX(8deg) rotateY(-10deg);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.md-demo-web:hover .md-laptop{transform:perspective(1400px) rotateX(2deg) rotateY(-2deg)}
.md-screen{border-radius:14px 14px 4px 4px;background:#0b0f1a;border:6px solid #1c2233;overflow:hidden;box-shadow:0 30px 60px -20px #000}
.md-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#1c2233}
.md-bar i{width:7px;height:7px;border-radius:50%;background:#ffffff40}
.md-bar span{margin-left:10px;padding:2px 12px;border-radius:6px;background:#0b0f1a;color:#9aa6c2;font-size:10px}
.md-site{height:clamp(180px,22vw,300px);overflow:hidden;background:#f5f7fc}
.md-site-in{animation:none}
.is-live .md-site-in{animation:wsScroll 12s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wsScroll{0%,10%{transform:translateY(0)}45%,55%{transform:translateY(-52%)}90%,100%{transform:translateY(0)}}
.ws-hero{position:relative;height:clamp(150px,18vw,240px);padding:14px 18px;box-sizing:border-box;background:linear-gradient(120deg,#0b1a40,#1a4d94 60%,#5B9BFF);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:12px}
.ws-hero b{font-size:clamp(16px,2vw,26px);line-height:1.05;letter-spacing:-.03em}
.ws-nav{position:absolute;top:12px;left:18px;right:18px;height:8px;border-radius:4px;background:linear-gradient(90deg,#fff 0 18%,transparent 18% 60%,#ffffff80 60% 68%,transparent 68% 72%,#ffffff80 72% 80%,transparent 80% 84%,#ffffff80 84%)}
.ws-btn{width:84px;height:20px;border-radius:999px;background:#fff}
.ws-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 18px}
.ws-row span{height:50px;border-radius:10px;background:#dfe6f5}
.ws-cards span{height:80px;background:linear-gradient(180deg,#c8d6f2,#e9eefb)}
.ws-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:10px 18px}
.ws-split.rev .ws-img{order:2}
.ws-img{height:100px;border-radius:12px;background:linear-gradient(135deg,#1a4d94,#5B9BFF)}
.ws-img.b{background:linear-gradient(135deg,#0b1a40,#0069D1)}
.ws-lines{display:flex;flex-direction:column;gap:8px;justify-content:center}
.ws-lines i{height:8px;border-radius:4px;background:#cbd5e8}.ws-lines i:first-child{height:14px;width:70%;background:#0b1a40}.ws-lines i:last-child{width:55%}
.ws-band{padding:16px 18px;color:#0b1a40;font-size:15px;letter-spacing:-.02em}
.ws-foot{height:60px;margin-top:10px;background:#0b1a40}
.md-base{height:12px;margin:0 -7%;border-radius:0 0 14px 14px;background:linear-gradient(#2a3145,#151a28);box-shadow:0 20px 30px -10px #000}
/* 03 · feed social */
.md-phone{position:relative;width:min(250px,56%);aspect-ratio:9/18.5;border-radius:34px;background:#0b0f1a;border:7px solid #1c2233;overflow:hidden;box-shadow:0 40px 70px -24px #000;transform:rotate(-4deg)}
.md-notch{position:absolute;left:50%;top:6px;width:34%;height:16px;margin-left:-17%;border-radius:10px;background:#1c2233;z-index:3}
.ph-head{display:flex;align-items:center;gap:8px;padding:30px 12px 8px;color:#fff;font-size:12px}
.ph-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#5B9BFF,#0069D1);box-shadow:0 0 0 2px #0b0f1a,0 0 0 3.5px #9cc3ff}
.ph-stories{display:flex;gap:8px;padding:4px 12px 10px}
.ph-stories span{flex:none;width:34px;height:34px;border-radius:50%;background:#1d2840;box-shadow:0 0 0 2px #0b0f1a,0 0 0 3.5px #5B9BFF}
.is-live .ph-stories span{animation:phStory 3s ease-in-out infinite;animation-delay:calc(var(--k,0)*.25s)}
.ph-stories span:nth-child(2){--k:1}.ph-stories span:nth-child(3){--k:2}.ph-stories span:nth-child(4){--k:3}.ph-stories span:nth-child(5){--k:4}
@keyframes phStory{50%{box-shadow:0 0 0 2px #0b0f1a,0 0 0 3.5px #d6e4ff}}
.ph-feed{height:100%;overflow:hidden}
.is-live .ph-feed-in{animation:phFeed 12s cubic-bezier(.65,0,.35,1) infinite}
@keyframes phFeed{0%,20%{transform:translateY(0)}30%,50%{transform:translateY(-25%)}60%,80%{transform:translateY(-50%)}90%,100%{transform:translateY(-75%)}}
.ph-post{padding:0 0 12px}
.ph-img{display:grid;place-items:center;aspect-ratio:1;background:linear-gradient(135deg,#1a4d94,#5B9BFF);color:#fff;text-align:center}
.ph-img em{font-style:normal;font-weight:700;font-size:20px;line-height:1.05;letter-spacing:-.03em}
.p2 .ph-img{background:linear-gradient(135deg,#0b1a40,#0069D1)}
.p3 .ph-img{background:linear-gradient(135deg,#f5f7fc,#9cc3ff);color:#0b1a40}
.ph-acts{display:flex;gap:10px;padding:8px 12px}
.ph-acts i{width:16px;height:16px;border-radius:5px;border:1.6px solid #c3cde3}
.ph-acts i.h{border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.ph-txt{display:block;height:7px;margin:0 12px;width:60%;border-radius:4px;background:#ffffff33}
.ph-heart{position:absolute;left:50%;top:44%;width:56px;height:56px;margin:-28px;opacity:0;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.1 0 3.6 1.2 4.3 2.4.7-1.2 2.2-2.4 4.3-2.4 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21Z'/%3E%3C/svg%3E");filter:drop-shadow(0 6px 14px #0008)}
.is-live .ph-heart{animation:phHeart 4s cubic-bezier(.34,1.56,.64,1) infinite 1s}
@keyframes phHeart{0%,8%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(1.15)}22%{opacity:1;transform:scale(1)}34%,100%{opacity:0;transform:scale(1.3)}}
/* 04 · panel de app */
.md-dash{position:relative;width:88%;display:grid;grid-template-columns:44px 1fr;border-radius:18px;overflow:hidden;background:#f5f7fc;box-shadow:0 30px 60px -24px #000;color:#0b1a40}
.ds-side{display:flex;flex-direction:column;gap:10px;padding:14px 10px;background:#0b1a40}
.ds-side span{height:24px;border-radius:8px;background:#ffffff1f}.ds-side span.on{background:#5B9BFF}
.ds-main{padding:14px 16px 16px}
.ds-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px}
.ds-pill{padding:5px 10px;border-radius:999px;background:#1a4d94;color:#fff;font-size:11px}
.ds-cal{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto repeat(5,22px);gap:5px;margin-bottom:14px}
.ds-cal span{font-size:10px;color:#5a6684;text-align:center}
.ds-cal i{grid-column:var(--c);grid-row:calc(var(--r) + 1)/span var(--h);border-radius:6px;background:#c8d6f2}
.ds-cal i.b{background:#9cc3ff}
.ds-cal i.new{background:#1a4d94;transform:scale(0);transform-origin:50% 50%}
.is-live .ds-cal i.new{animation:dsNew 6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes dsNew{0%,20%{transform:scale(0)}30%,90%{transform:scale(1)}100%{transform:scale(0)}}
.ds-bars{display:flex;align-items:flex-end;gap:8px;height:60px;padding-top:6px;border-top:1px solid #dfe6f5}
.ds-bars i{flex:1;height:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(#5B9BFF,#1a4d94);transform-origin:bottom;transform:scaleY(var(--v))}
.is-live .ds-bars i{animation:dsBar 6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes dsBar{0%{transform:scaleY(.1)}25%,100%{transform:scaleY(var(--v))}}
.ds-toast{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:#0b1a40;color:#fff;font-size:12px;box-shadow:0 12px 30px -10px #000;opacity:0;transform:translateY(12px)}
.ds-toast .ok{width:14px;height:14px;border-radius:50%;background:#3ecf8e}
.is-live .ds-toast{animation:dsToast 6s cubic-bezier(.16,1,.3,1) infinite}
@keyframes dsToast{0%,45%{opacity:0;transform:translateY(12px)}52%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
/* 05 · tienda online */
.md-shop{position:relative;width:88%;border-radius:18px;background:#fff;color:#0b1a40;padding:14px 16px 16px;box-sizing:border-box;box-shadow:0 30px 60px -24px #000}
.sh-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px}
.sh-cart{position:relative;width:30px;height:30px}
.sh-cart svg{width:100%;height:100%;fill:none;stroke:#0b1a40;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sh-cart em{position:absolute;right:-4px;top:-4px;min-width:16px;height:16px;border-radius:8px;background:#1a4d94;color:#fff;font:700 10px/16px var(--sans);text-align:center;font-style:normal;transform:scale(0)}
.is-live .sh-cart em{animation:shBadge 6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes shBadge{0%,48%{transform:scale(0)}55%{transform:scale(1.35)}62%,92%{transform:scale(1)}100%{transform:scale(0)}}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh-item{position:relative;display:flex;flex-direction:column;gap:6px;font-size:12px}
.sh-item i{height:6px;width:50%;border-radius:3px;background:#dfe6f5}
.sh-pic{aspect-ratio:1;border-radius:12px;background:#f0f3fa center/58% no-repeat}
.sh-pic.t1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231a4d94' d='M8 3 3 6l2 4 2-1v12h10V9l2 1 2-4-5-3c-.5 1.5-2 2.5-4 2.5S8.5 4.5 8 3Z'/%3E%3C/svg%3E")}
.sh-pic.t2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b1a40' d='M8 3 3 6v15h4v-9 9h10v-9 9h4V6l-5-3c-.5 1.5-2 3-4 3S8.5 4.5 8 3Z'/%3E%3C/svg%3E")}
.sh-pic.t3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235B9BFF' d='M4 15c0-5 3.6-9 8-9s8 4 8 9H4Zm-2 1h20v2H2Z'/%3E%3C/svg%3E")}
.sh-item.hot .sh-pic{box-shadow:0 0 0 2px #5B9BFF}
.sh-add{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.8);padding:6px 12px;border-radius:999px;background:#1a4d94;color:#fff;font-size:11px;opacity:0}
.is-live .sh-add{animation:shAdd 6s cubic-bezier(.16,1,.3,1) infinite}
@keyframes shAdd{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%,34%{opacity:1;transform:translate(-50%,-50%) scale(1)}38%{transform:translate(-50%,-50%) scale(.92)}44%,100%{opacity:0}}
.sh-fly{position:absolute;left:50%;top:40%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#1a4d94;opacity:0}
.is-live .sh-fly{animation:shFly 6s cubic-bezier(.55,0,.25,1) infinite}
@keyframes shFly{0%,38%{opacity:0;transform:translate(0,0) scale(1)}40%{opacity:1}50%{opacity:1;transform:translate(calc(44% * 3.4),-150px) scale(.5)}52%,100%{opacity:0;transform:translate(calc(44% * 3.4),-150px) scale(.5)}}
.sh-steps{display:flex;gap:6px;margin-top:14px}
.sh-steps span{flex:1;padding:6px 0;text-align:center;border-radius:8px;font-size:11px;background:#f0f3fa;color:#5a6684}
.sh-steps span.on{background:#0b1a40;color:#fff}

/* ---------- Proceso ---------- */
.md-process{padding:clamp(80px,14vh,160px) 0!important}
.md-steps-wrap{position:relative}
.md-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin:0;padding:0;list-style:none;counter-reset:none}
.md-steps-line{position:absolute;left:0;right:0;top:22px;height:2px;background:#ffffff1a;border-radius:2px;overflow:hidden}
.md-steps-line i{position:absolute;inset:0;background:linear-gradient(90deg,#5B9BFF,#d6e4ff);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.md-steps li{position:relative;padding-top:64px}
.md-step-n{position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 ui-monospace,monospace;color:#fff;background:#0b1a40;border:1px solid #5B9BFF;box-shadow:0 0 0 6px #050b1c}
.md-steps strong{display:block;font-size:22px;letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.md-steps p{margin:0;color:#b4c0da;font-size:15px;line-height:1.5}

/* ---------- Por qué ---------- */
.md-why{padding:clamp(70px,12vh,140px) 0!important;background:#f5f7fc;color:#0b1a40}
.md-why .md-h2{color:#0b1a40}
.md-why h2 em{background:linear-gradient(90deg,#1a4d94,#0069D1);-webkit-background-clip:text;background-clip:text;color:transparent}
.md-why-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);align-items:start}
.md-why-list{margin:0;padding:0;list-style:none}
.md-why-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;padding:28px 0;border-top:1px solid #0b1a401f}
.md-why-list b{font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;line-height:1.1}
.md-why-list span{color:#3a4560;line-height:1.55}

/* ---------- FAQ ---------- */
.md-faq{padding:clamp(70px,12vh,140px) 0!important}
.md8 .md-faq details{border-bottom:1px solid #ffffff26;padding:22px 0;max-width:900px}
.md8 .md-faq summary{color:#fff;font-size:clamp(18px,1.6vw,22px);font-weight:550;letter-spacing:-.01em}
.md8 .md-faq details p{color:#c3cde3;margin:14px 0 0;font-size:16px}

/* ---------- CTA ---------- */
.md-cta{position:relative;isolation:isolate;padding:clamp(100px,18vh,220px) 0!important;text-align:center;overflow:hidden}
.md-cta .md-hero-bg{background:radial-gradient(70% 70% at 50% 100%,#1a4d94 0%,#071334 60%,#050b1c 100%)}
.md-cta-in{display:flex;flex-direction:column;align-items:center}
.md-giant{font-size:clamp(70px,17vw,280px)!important;line-height:.86!important;letter-spacing:-.06em!important;font-weight:750!important;margin:0 0 30px!important;background:linear-gradient(180deg,#fff 30%,#9cc3ff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.md-cta .md-lead{margin:0 auto 36px;text-align:center}
.md-cta .md-ctas{justify-content:center}
.md-wa{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),#1faa53;border-color:#ffffff59;color:#fff;box-shadow:inset 0 1px 0 #ffffff59,0 18px 40px -16px #1faa53}
.md-wa:hover{box-shadow:inset 0 1px 0 #ffffff59,0 22px 50px -14px #1faa53}
.md-note{margin:40px 0 0;font-size:13px;color:#8fa2c8}

/* ---------- Revelado ---------- */
.js .md-r{opacity:0;transform:translate3d(0,40px,0);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.js .md-r.is-in{opacity:1;transform:none}
.js .md-steps li.md-r{transition-delay:calc(var(--i,0)*110ms)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .md-sv{grid-template-columns:1fr}
  .md-sv-alt .md-sv-txt{order:0}
  .md-steps{grid-template-columns:1fr;gap:0}
  .md-steps-line{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .md-steps-line i{transform-origin:50% 0;transform:scaleY(var(--p,0))}
  .md-steps li{padding:0 0 34px 72px}
  .md-why-in,.md-why-list li{grid-template-columns:1fr}
  .md-why-list li{gap:8px}
}
@media(max-width:640px){
  .md-hero{min-height:calc(100svh - 100px)}
  .md-demo{aspect-ratio:1/1;border-radius:22px}
  .md-mq-pause{width:36px;height:36px;right:8px}
  .md-site{height:150px}
  .md-big-read{font-size:clamp(26px,7.4vw,36px)}
  .md-rot{display:block}
}
@media(prefers-reduced-motion:reduce){
  .md8 *,.md8 *::before,.md8 *::after{animation:none!important;transition:none!important}
  .md-split .w{transform:none}
  .js .md-r{opacity:1;transform:none}
  .js .md-big-read .w{opacity:1}
  .md-rot{height:auto}.md-rot-in span:not(:first-child){display:none}
  .lg-guides{opacity:0}.lg-p1,.lg-p2{stroke-dashoffset:0}.lg-fill{transform:none}.lg-word,.lg-kit span,.lg-kit b{opacity:1;transform:none}
  .sh-cart em,.ds-cal i.new{transform:none}.ds-toast{opacity:1;transform:none}
  .md-mq-track{flex-wrap:wrap;width:auto}.md-mq-group[aria-hidden=true]{display:none}.md-mq-group{flex-wrap:wrap}.md-mq-pause{display:none}
  .md-steps-line i{transform:none}
  .md-mag{transform:none}
}
@media(prefers-reduced-transparency:reduce){.md-mq-pause,.md-demo-cap{background:#0c142c;-webkit-backdrop-filter:none;backdrop-filter:none}}
.md-rot{transform:translate3d(0,105%,0);transition:transform 1.1s cubic-bezier(.16,1,.3,1) .45s}
.is-ready .md-rot{transform:none}
@media(prefers-reduced-motion:reduce){.md-rot{transform:none}}
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}.md-marquee{overflow-x:clip}}