/* SistemaNegocios - Web Oficial */
:root{
  --blue:#159fea;--blue-2:#4dc4ff;--blue-dark:#0c7fc0;--ink:#07111f;--ink-2:#0b1726;
  --text:#102033;--muted:#67778a;--line:#e5edf4;--soft:#f4f8fb;--white:#fff;
  --container:1180px;--radius:22px;--shadow:0 24px 70px rgba(13,38,61,.12);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff;line-height:1.6;overflow-x:hidden}
body.menu-open{overflow:hidden}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}
button{cursor:pointer}.container{width:min(calc(100% - 40px),var(--container));margin:auto}.section{padding:108px 0;position:relative}
.soft-section{background:var(--soft)}.centered{text-align:center;margin-inline:auto}.skip-link{position:fixed;left:16px;top:-60px;z-index:9999;background:#fff;padding:12px 16px;border-radius:10px}.skip-link:focus{top:16px}
.site-header{height:76px;position:fixed;z-index:1000;inset:0 0 auto;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(229,237,244,.85);transition:.25s}
.site-header.scrolled{height:68px;box-shadow:0 12px 35px rgba(9,27,44,.08);background:rgba(255,255,255,.95)}
.header-inner{height:100%;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:10px;font-size:1.06rem;font-weight:780;letter-spacing:-.035em;white-space:nowrap}.brand img{width:42px;height:42px;border-radius:12px}.brand strong{color:var(--blue)}
.desktop-nav{display:flex;align-items:center;gap:27px;margin-left:auto}.desktop-nav a{font-size:.91rem;font-weight:650;color:#435267;position:relative}.desktop-nav a:after{content:"";position:absolute;height:2px;background:var(--blue);left:0;right:0;bottom:-8px;transform:scaleX(0);transition:.2s}.desktop-nav a:hover{color:var(--blue)}.desktop-nav a:hover:after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:13px;padding:12px 20px;font-weight:760;line-height:1;transition:.22s}.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue),#34b8ff);box-shadow:0 12px 28px rgba(21,159,234,.28)}.btn-primary:hover{box-shadow:0 16px 34px rgba(21,159,234,.36)}
.btn-ghost{background:rgba(255,255,255,.72);border-color:var(--line);color:var(--text);backdrop-filter:blur(10px)}.btn-light{background:#fff;color:var(--ink);box-shadow:0 16px 34px rgba(0,0,0,.18)}.btn-lg{min-height:55px;padding:15px 25px}.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;padding:10px}.menu-btn span{display:block;height:2px;background:var(--ink);margin:5px 0;border-radius:9px;transition:.25s}.menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-btn.active span:nth-child(2){opacity:0}.menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-menu{display:none}
.hero{min-height:820px;padding:155px 0 0;position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f4f9fd 100%)}.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(21,159,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(21,159,234,.055) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(18px)}.glow-a{right:-170px;top:-160px;background:radial-gradient(circle,rgba(21,159,234,.23),transparent 68%)}.glow-b{left:-220px;bottom:0;background:radial-gradient(circle,rgba(77,196,255,.13),transparent 68%)}
.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:64px;padding-bottom:92px}.pill,.mini-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;background:rgba(21,159,234,.08);border:1px solid rgba(21,159,234,.15);color:#0d78b5;font-size:.78rem;font-weight:780}.pill span{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(21,159,234,.1)}
.hero h1{font-size:clamp(3.3rem,6.7vw,5.9rem);line-height:.98;letter-spacing:-.066em;margin:24px 0;color:var(--ink);font-weight:860}.hero h1 em{font-style:normal;color:var(--blue)}.hero-copy>p{font-size:1.15rem;color:var(--muted);max-width:620px;margin-bottom:30px}.hero-actions{display:flex;gap:13px;flex-wrap:wrap}.hero-badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;color:#4b5c70;font-size:.83rem;font-weight:650}
.hero-visual{min-height:510px;position:relative}.mockup-wrap{position:absolute;inset:30px 0 0}.desktop-mockup{position:absolute;width:92%;right:-35px;top:35px;border-radius:24px;box-shadow:0 38px 90px rgba(8,27,44,.2);transform:perspective(1100px) rotateY(-5deg) rotateX(2deg)}.phone-mockup{position:absolute;width:31%;left:0;bottom:-10px;filter:drop-shadow(0 28px 32px rgba(7,17,31,.25));transform:rotate(-4deg)}
.floating-card{position:absolute;z-index:6;display:flex;align-items:center;gap:11px;padding:12px 14px;background:rgba(255,255,255,.94);border:1px solid rgba(223,233,241,.9);border-radius:14px;box-shadow:0 18px 42px rgba(9,31,49,.12);backdrop-filter:blur(12px)}.floating-card div:last-child{display:flex;flex-direction:column}.floating-card strong{font-size:.68rem}.floating-card small{font-size:.54rem;color:#8795a7}.order-card{right:0;top:0}.online-card{right:-5px;bottom:36px}.floating-icon{width:31px;height:31px;border-radius:9px;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:900}.online-dot{width:10px;height:10px;background:#22c55e;border-radius:50%;box-shadow:0 0 0 5px rgba(34,197,94,.11)}
.trusted-strip{border-top:1px solid var(--line);background:rgba(255,255,255,.7)}.trusted-strip .container{height:78px;display:flex;align-items:center;justify-content:center;gap:22px;color:#76879b;font-size:.82rem;font-weight:700}.trusted-strip i{width:4px;height:4px;border-radius:50%;background:#c2ced8}
.section-head{max-width:760px;margin-bottom:58px}.section-head h2,.showcase-copy h2{font-size:clamp(2.1rem,4.4vw,3.55rem);letter-spacing:-.048em;line-height:1.08;margin:10px 0 17px;color:var(--ink)}.section-head p,.showcase-copy>p{color:var(--muted);font-size:1.05rem;margin:0}.eyebrow{font-size:.79rem;font-weight:850;letter-spacing:.09em;color:var(--blue);text-transform:uppercase}.eyebrow.light{color:#7dd4ff}
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.glass-card,.feature-card,.business-card{position:relative;padding:29px;background:#fff;border:1px solid var(--line);border-radius:19px;transition:.28s}.glass-card:hover,.feature-card:hover,.business-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(21,159,234,.25)}.card-num{position:absolute;right:22px;top:17px;color:#e5edf4;font-size:2.7rem;font-weight:900}.icon-box{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;color:var(--blue);font-weight:900;background:linear-gradient(135deg,rgba(21,159,234,.12),rgba(77,196,255,.08));border:1px solid rgba(21,159,234,.12)}.glass-card h3,.feature-card h3,.business-card h3{margin:0 0 9px;font-size:1.12rem}.glass-card p,.feature-card p,.business-card p{margin:0;color:var(--muted);font-size:.92rem}
.dark-section{background:radial-gradient(circle at 20% 0%,rgba(21,159,234,.18),transparent 34%),var(--ink);color:#fff}.dark-section .section-head h2{color:#fff}.dark-section .section-head p{color:rgba(255,255,255,.62)}
.flow{display:grid;grid-template-columns:1fr 50px 1fr 50px 1fr 50px 1fr;align-items:center}.flow-step{min-height:235px;padding:24px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);border-radius:17px;position:relative}.flow-step>span{position:absolute;right:17px;top:13px;font-size:1.55rem;font-weight:900;color:rgba(255,255,255,.14)}.flow-step>b{display:grid;place-items:center;width:44px;height:44px;background:rgba(21,159,234,.13);border:1px solid rgba(77,196,255,.2);border-radius:12px;color:#94dcff;margin-bottom:20px}.flow-step h3{margin:0 0 9px}.flow-step p{color:rgba(255,255,255,.58);font-size:.88rem;margin:0}.flow-line{height:2px;background:rgba(255,255,255,.08);overflow:hidden}.flow-line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,transparent,var(--blue-2),transparent);animation:flow 2.8s linear infinite}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.feature-card{min-height:222px}.showcase-section{background:linear-gradient(180deg,#fbfdff,#fff)}.showcase-layout{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:78px}.showcase-copy>p{margin-bottom:27px}.check-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}.check-list li{display:flex;gap:10px;align-items:center;color:#4a5c70;font-weight:620}.check-list span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:rgba(21,159,234,.1);font-size:.73rem;font-weight:900}.showcase-device img{border-radius:24px;box-shadow:var(--shadow);transform:perspective(1100px) rotateY(-4deg) rotateX(2deg)}
.business-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.business-card>div{width:52px;height:52px;display:grid;place-items:center;background:#eaf6fd;border-radius:15px;margin-bottom:20px;font-size:1.5rem}
.benefits-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:88px}.benefit-list{border-top:1px solid var(--line)}.benefit{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}.benefit>span{color:var(--blue);font-weight:850;font-size:.8rem}.benefit h3{margin:0 0 7px}.benefit p{margin:0;color:var(--muted)}
.pricing-card{max-width:780px;margin:auto;text-align:center;padding:52px;background:radial-gradient(circle at 50% 0%,rgba(21,159,234,.13),transparent 42%),#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 24px 70px rgba(13,38,61,.08)}.pricing-card>img{margin:0 auto 14px;border-radius:20px}.pricing-card h3{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;letter-spacing:-.04em;margin:18px 0 13px}.pricing-card>p{max-width:580px;margin:0 auto 24px;color:var(--muted)}.pricing-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left;max-width:520px;margin:0 auto 28px;color:#435267}.pricing-features span{padding:10px 12px;background:#f7fbfe;border-radius:10px}
.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:76px}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item button{border:0;background:transparent;width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:22px 0;font-weight:760;color:var(--text)}.faq-item button b{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:rgba(21,159,234,.09);color:var(--blue);transition:.25s}.faq-answer{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .34s ease}.faq-answer p{min-height:0;margin:0;padding:0 45px 20px 0;color:var(--muted)}.faq-item.active .faq-answer{grid-template-rows:1fr}.faq-item.active button b{transform:rotate(45deg);background:var(--blue);color:#fff}
.contact-section{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:110px 0}.contact-glow{position:absolute;width:760px;height:760px;left:20%;top:-400px;background:radial-gradient(circle,rgba(21,159,234,.28),transparent 65%)}.contact-layout{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.contact-copy>img{border-radius:22px;margin-bottom:18px}.contact-copy h2{font-size:clamp(2.5rem,5vw,4.2rem);line-height:1.03;letter-spacing:-.055em;margin:13px 0 18px}.contact-copy p{color:rgba(255,255,255,.65);max-width:590px}.contact-form{padding:30px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);border-radius:22px;backdrop-filter:blur(12px);display:grid;gap:15px}.contact-form label{display:grid;gap:7px;font-size:.83rem;font-weight:700;color:#d9e5ee}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:#fff;border-radius:11px;padding:12px 13px;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue)}.contact-form textarea{resize:vertical}.form-status{margin:0;font-size:.82rem;color:#9adfff}
.site-footer{background:#040a12;color:#8d9bae;padding:65px 0 24px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:44px}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:10px}.footer-grid strong{color:#fff;font-size:.89rem}.footer-grid a{font-size:.85rem}.footer-grid a:hover{color:#fff}.footer-brand p{max-width:340px}.footer-logo span{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:21px;display:flex;justify-content:space-between;font-size:.78rem}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1)}.reveal[data-reveal="left"]{transform:translateX(-36px)}.reveal[data-reveal="right"]{transform:translateX(36px)}.reveal.visible{opacity:1;transform:translate(0)}
@keyframes floaty{50%{transform:translateY(-9px)}}@keyframes flow{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:no-preference){.floating-card{animation:floaty 4.5s ease-in-out infinite}.online-card{animation-delay:-2s}}
@media(max-width:1080px){.desktop-nav{gap:17px}.header-cta{display:none}.features-grid,.business-grid{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:repeat(2,1fr);gap:18px}.flow-line{display:none}.hero-layout{grid-template-columns:1fr 1fr;gap:30px}.desktop-mockup{right:-80px}}
@media(max-width:820px){.container{width:min(calc(100% - 30px),var(--container))}.section{padding:78px 0}.site-header,.site-header.scrolled{height:68px}.desktop-nav{display:none}.menu-btn{display:block;margin-left:auto}.mobile-menu{position:fixed;top:68px;left:0;right:0;display:flex;flex-direction:column;background:rgba(255,255,255,.98);padding:0 15px;max-height:0;opacity:0;overflow:hidden;pointer-events:none;border-bottom:1px solid var(--line);transition:.32s}.mobile-menu.active{max-height:480px;opacity:1;pointer-events:auto;padding-top:10px;padding-bottom:18px}.mobile-menu>a:not(.btn){padding:12px 8px;border-bottom:1px solid #edf2f6;font-weight:650}.mobile-menu .btn{margin-top:10px}.hero{padding-top:120px;min-height:auto}.hero-layout{grid-template-columns:1fr;gap:50px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.hero-badges{justify-content:center}.hero-visual{width:min(100%,650px);margin:auto;min-height:460px}.desktop-mockup{right:-20px;width:88%}.phone-mockup{width:28%}.three-grid{grid-template-columns:1fr}.showcase-layout,.benefits-layout,.faq-layout,.contact-layout{grid-template-columns:1fr;gap:50px}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:600px){.container{width:min(calc(100% - 26px),var(--container))}.section{padding:66px 0}.hero h1{font-size:clamp(2.9rem,14vw,4rem)}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-badges{display:grid;gap:8px}.hero-visual{min-height:350px}.desktop-mockup{right:-75px;width:115%;top:45px}.phone-mockup{width:34%;left:-4px}.online-card{display:none}.floating-card{padding:9px 10px}.trusted-strip .container{overflow:auto;justify-content:flex-start}.features-grid,.business-grid,.flow{grid-template-columns:1fr}.pricing-card{padding:36px 20px}.pricing-features{grid-template-columns:1fr}.contact-form{padding:22px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}}
@media(max-width:380px){.brand span{font-size:.92rem}.hero-visual{min-height:320px}.desktop-mockup{right:-90px;width:125%}.phone-mockup{width:38%}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1!important;transform:none!important}}

/* Precio Fundador */
.founder-card{position:relative;overflow:hidden}
.founder-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,var(--blue),var(--blue-2))}
.founder-price{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:6px 0 18px}
.founder-price strong{font-size:clamp(2.8rem,7vw,4.6rem);line-height:1;letter-spacing:-.06em;color:var(--ink)}
.founder-price span{padding-bottom:7px;color:var(--muted);font-weight:750}
.founder-extras{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 28px}
.founder-extras span{padding:9px 12px;border:1px solid rgba(21,159,234,.18);background:rgba(21,159,234,.07);border-radius:999px;color:#31536b;font-size:.79rem}
.founder-note{display:block;margin-top:14px;color:var(--muted)}
@media(max-width:600px){.founder-price{align-items:center;flex-direction:column;gap:3px}.founder-price span{padding-bottom:0}.founder-extras{display:grid}}


/* =========================================================
   WEB OFICIAL 002 — DESCARGAS + FUTURO
   ========================================================= */
.downloads-section{
  position:relative;
  background:
    radial-gradient(circle at 15% 20%,rgba(21,159,234,.08),transparent 28rem),
    linear-gradient(180deg,#fff 0%,#f6fbff 100%);
}
.downloads-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  max-width:1040px;
  margin:38px auto 0;
}
.download-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:500px;
  padding:32px;
  overflow:hidden;
  border:1px solid rgba(10,40,65,.10);
  border-radius:28px;
  background:rgba(255,255,255,.88);
  box-shadow:0 24px 70px rgba(6,25,45,.08);
  backdrop-filter:blur(14px);
}
.download-card:before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-95px;
  top:-105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(77,196,255,.22),rgba(77,196,255,0) 68%);
  pointer-events:none;
}
.download-platform-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border:1px solid rgba(21,159,234,.20);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(21,159,234,.15),rgba(77,196,255,.05));
  color:var(--blue);
  font-size:2rem;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.download-label{
  color:var(--blue);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
}
.download-card h3{
  margin:8px 0 12px;
  font-size:clamp(1.55rem,3vw,2rem);
}
.download-card>p{
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.7;
}
.download-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.download-meta span{
  padding:7px 10px;
  border:1px solid rgba(10,40,65,.09);
  border-radius:999px;
  background:#f7fafc;
  color:#53697b;
  font-size:.76rem;
  font-weight:750;
}
.download-card .download-disabled{
  width:100%;
  margin-top:auto;
  opacity:.62;
  cursor:not-allowed;
}
.download-card>small{
  display:block;
  margin-top:12px;
  color:var(--muted);
  line-height:1.5;
}
.playstore-coming{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(21,159,234,.18);
  border-radius:16px;
  background:rgba(21,159,234,.055);
}
.playstore-dot{
  width:10px;
  height:10px;
  flex:0 0 10px;
  margin-top:5px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 6px rgba(21,159,234,.10);
}
.playstore-coming strong{display:block;color:#163c56;font-size:.9rem}
.playstore-coming small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
.official-download-note{
  max-width:1040px;
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin:20px auto 0;
  padding:15px 18px;
  border-radius:16px;
  color:#53697b;
  font-size:.82rem;
  text-align:center;
}
.official-download-note strong{color:#183b53}

/* Future / roadmap */
.future-section{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,#07111f 0%,#081827 50%,#06101c 100%);
  color:#fff;
}
.future-container{position:relative;z-index:2}
.future-section .section-head h2{color:#fff}
.future-section .section-head p{color:#a9bed0}
.future-eyebrow{color:#72d0ff!important}
.future-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  opacity:.65;
  pointer-events:none;
}
.future-glow-one{
  width:480px;height:480px;left:-220px;top:-150px;
  background:radial-gradient(circle,rgba(21,159,234,.23),transparent 68%);
}
.future-glow-two{
  width:520px;height:520px;right:-230px;bottom:-230px;
  background:radial-gradient(circle,rgba(77,196,255,.16),transparent 68%);
}
.future-roadmap{
  max-width:1080px;
  display:grid;
  grid-template-columns:1fr 120px 1fr 120px 1fr;
  align-items:center;
  margin:48px auto 40px;
}
.future-step{
  min-height:178px;
  padding:24px 20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.future-step.active{
  border-color:rgba(77,196,255,.30);
  background:linear-gradient(145deg,rgba(21,159,234,.15),rgba(255,255,255,.035));
}
.future-step span{
  display:block;
  margin-bottom:13px;
  color:#6fcfff;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.13em;
}
.future-step strong{
  display:block;
  margin-bottom:9px;
  color:#fff;
  font-size:1.15rem;
}
.future-step small{color:#94aabd;line-height:1.55}
.future-line{
  position:relative;
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
}
.future-line i{
  position:absolute;
  inset:0;
  width:45%;
  background:linear-gradient(90deg,transparent,#4dc4ff,transparent);
  animation:futureFlow 2.8s linear infinite;
}
@keyframes futureFlow{
  from{transform:translateX(-120%)}
  to{transform:translateX(330%)}
}
.future-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:1080px;
  margin:0 auto;
}
.future-card{
  position:relative;
  min-height:210px;
  padding:25px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:rgba(255,255,255,.035);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.future-card:hover{
  transform:translateY(-5px);
  border-color:rgba(77,196,255,.24);
  background:rgba(255,255,255,.055);
}
.future-card-number{
  display:block;
  margin-bottom:32px;
  color:#4dc4ff;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.16em;
}
.future-card h3{margin:0 0 10px;color:#fff}
.future-card p{margin:0;color:#94aabd;line-height:1.65}
.future-statement{
  max-width:800px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin:42px auto 0;
  padding:20px 24px;
  border:1px solid rgba(77,196,255,.15);
  border-radius:18px;
  background:rgba(21,159,234,.065);
}
.future-statement p{margin:0;color:#a9bed0;line-height:1.6}
.future-statement strong{color:#fff}
.future-pulse{
  width:11px;height:11px;flex:0 0 11px;border-radius:50%;
  background:#4dc4ff;
  box-shadow:0 0 0 0 rgba(77,196,255,.42);
  animation:futurePulse 2s infinite;
}
@keyframes futurePulse{
  0%{box-shadow:0 0 0 0 rgba(77,196,255,.42)}
  70%{box-shadow:0 0 0 12px rgba(77,196,255,0)}
  100%{box-shadow:0 0 0 0 rgba(77,196,255,0)}
}
@media(max-width:900px){
  .downloads-grid{grid-template-columns:1fr;max-width:620px}
  .future-roadmap{grid-template-columns:1fr;gap:10px;max-width:620px}
  .future-line{width:2px;height:36px;margin:auto}
  .future-line i{width:100%;height:45%;animation:futureFlowVertical 2.4s linear infinite}
  @keyframes futureFlowVertical{
    from{transform:translateY(-120%)}
    to{transform:translateY(330%)}
  }
  .future-cards{grid-template-columns:1fr;max-width:620px}
}
@media(max-width:600px){
  .download-card{min-height:auto;padding:24px;border-radius:22px}
  .download-card .download-disabled{margin-top:18px}
  .future-step{min-height:auto}
  .future-statement{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .future-line i,.future-pulse{animation:none!important}
  .future-card:hover{transform:none}
}


/* =========================================================
   WEB OFICIAL 003 — PANTALLAZO ECOSISTEMA / APPS
   ========================================================= */
.ecosystem-showcase{
  position:relative;
  min-height:760px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  overflow:hidden;
  padding:105px 0 55px;
  background:
    radial-gradient(circle at 72% 45%,rgba(21,159,234,.13),transparent 30rem),
    linear-gradient(135deg,#050c16 0%,#071321 48%,#081827 100%);
  color:#fff;
}
.ecosystem-showcase:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.13;
  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:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent);
}
.ecosystem-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
}
.ecosystem-orb-left{
  width:440px;height:440px;left:-260px;top:80px;
  background:radial-gradient(circle,rgba(21,159,234,.15),transparent 70%);
}
.ecosystem-orb-right{
  width:520px;height:520px;right:-180px;bottom:-210px;
  background:radial-gradient(circle,rgba(77,196,255,.12),transparent 70%);
}
.ecosystem-inner{
  position:relative;
  z-index:2;
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.ecosystem-copy{max-width:570px;min-width:0}
.ecosystem-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  color:#77d2ff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.15em;
}
.ecosystem-kicker i{
  width:8px;height:8px;border-radius:50%;background:#4dc4ff;
  box-shadow:0 0 0 6px rgba(77,196,255,.09),0 0 24px rgba(77,196,255,.55);
}
.ecosystem-copy h2{
  margin:0;
  color:#fff;
  font-size:clamp(3rem,6.4vw,5.9rem);
  line-height:.93;
  letter-spacing:-.065em;
}
.ecosystem-copy h2 span{
  background:linear-gradient(90deg,#4dc4ff,#159fea 60%,#78d8ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ecosystem-copy>p{
  max-width:560px;
  margin:25px 0 28px;
  color:#a7bbcb;
  font-size:1.03rem;
  line-height:1.75;
}
.ecosystem-platforms{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.ecosystem-platform{
  display:flex;align-items:center;gap:11px;
  min-width:160px;
  padding:11px 15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:rgba(255,255,255,.045);
}
.ecosystem-platform-icon{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:10px;background:rgba(21,159,234,.13);color:#63ccff;font-size:1.2rem;
}
.ecosystem-platform small{display:block;color:#6e8da3;font-size:.58rem;font-weight:900;letter-spacing:.12em}
.ecosystem-platform strong{display:block;margin-top:2px;color:#fff;font-size:.9rem}
.ecosystem-actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap}
.ecosystem-download-btn{box-shadow:0 14px 45px rgba(21,159,234,.25)}
.ecosystem-play-note{
  display:inline-flex;align-items:center;gap:8px;
  color:#91a9ba;font-size:.76rem;font-weight:700;
}
.ecosystem-play-note i{width:7px;height:7px;border-radius:50%;background:#4dc4ff;box-shadow:0 0 12px #4dc4ff}

/* Device composition */
.ecosystem-visual{
  position:relative;
  width:100%;
  min-width:0;
  min-height:500px;
  perspective:1200px;
}
.ecosystem-screen{
  position:absolute;
  width:min(610px,100%);
  height:385px;
  right:0;
  top:40px;
  overflow:hidden;
  border:1px solid rgba(130,211,255,.22);
  border-radius:20px;
  background:#0b1825;
  box-shadow:0 42px 90px rgba(0,0,0,.45),0 0 90px rgba(21,159,234,.09);
  transform:rotateY(-4deg) rotateX(1deg);
}
.ecosystem-screen-top{
  height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.07);background:#0a1420;
}
.ecosystem-screen-top>span{width:7px;height:7px;border-radius:50%;background:#314759}
.ecosystem-screen-top small{margin-left:8px;color:#627c8f;font-size:.6rem}
.ecosystem-screen-body{height:calc(100% - 38px);display:flex}
.ecosystem-screen-body aside{
  width:66px;padding:18px 13px;border-right:1px solid rgba(255,255,255,.06);background:#08131e;
}
.ecosystem-screen-body aside b{
  width:34px;height:34px;display:grid;place-items:center;margin:0 auto 25px;border-radius:10px;
  background:linear-gradient(145deg,#159fea,#4dc4ff);color:#fff;font-size:.7rem;
}
.ecosystem-screen-body aside i{display:block;width:30px;height:6px;margin:18px auto;border-radius:5px;background:#213747}
.ecosystem-dashboard{flex:1;padding:25px}
.eco-dashboard-title{display:flex;align-items:center;justify-content:space-between}
.eco-dashboard-title small{display:block;color:#587285;font-size:.58rem}
.eco-dashboard-title strong{display:block;margin-top:4px;color:#dceaf3;font-size:1rem}
.eco-dashboard-title>span{
  padding:6px 9px;border:1px solid rgba(59,214,144,.18);border-radius:999px;background:rgba(59,214,144,.08);color:#6fe0a8;font-size:.53rem;font-weight:900;
}
.eco-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.eco-stats i{height:70px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:linear-gradient(145deg,#102232,#0c1b28)}
.eco-orders{padding:14px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:#0b1a27}
.eco-orders div{height:34px;margin:7px 0;border-radius:8px;background:linear-gradient(90deg,#132b3d 0 25%,#102433 25% 70%,#0e202d 70%)}

/* Phone */
.ecosystem-phone{
  position:absolute;
  width:185px;height:375px;
  left:-20px;bottom:4px;
  padding:8px;
  border:1px solid rgba(151,220,255,.27);
  border-radius:31px;
  background:#07111b;
  box-shadow:0 34px 70px rgba(0,0,0,.55),0 0 45px rgba(21,159,234,.12);
  transform:rotate(-3deg);
}
.ecosystem-phone-speaker{
  position:absolute;z-index:2;top:14px;left:50%;width:48px;height:5px;transform:translateX(-50%);
  border-radius:5px;background:#142838;
}
.ecosystem-phone-ui{
  height:100%;padding:33px 13px 13px;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,#0c1d2b,#091722);
}
.eco-phone-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.eco-phone-head b{color:#54c6ff;font-size:.75rem}
.eco-phone-head span{color:#4be19a;font-size:.6rem}
.ecosystem-phone-ui>small{display:block;color:#59778b;font-size:.55rem}
.ecosystem-phone-ui>strong{display:block;margin:5px 0 17px;color:#eef8ff;font-size:1.2rem}
.eco-phone-order{
  display:flex;align-items:center;gap:9px;margin:9px 0;padding:10px 8px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:rgba(255,255,255,.025);
}
.eco-phone-order i{width:27px;height:27px;flex:0 0 27px;border-radius:8px;background:rgba(21,159,234,.14)}
.eco-phone-order b{display:block;color:#bcd1df;font-size:.57rem}
.eco-phone-order span{display:block;margin-top:3px;color:#587185;font-size:.48rem}
.eco-phone-nav{
  position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-around;padding:9px;border-radius:12px;background:#0e2231;
}
.eco-phone-nav i{width:16px;height:4px;border-radius:5px;background:#2d4c60}
.eco-phone-nav i:first-child{background:#159fea}

/* Floating status cards */
.ecosystem-floating-card{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(10,27,40,.84);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
  animation:ecoFloat 4s ease-in-out infinite;
}
.ecosystem-floating-card>span{
  width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:rgba(21,159,234,.14);color:#61ccff;font-weight:900;
}
.ecosystem-floating-card small{display:block;color:#58788e;font-size:.48rem;font-weight:900;letter-spacing:.1em}
.ecosystem-floating-card strong{display:block;margin-top:2px;color:#dceaf2;font-size:.67rem}
.eco-float-order{right:-10px;top:5px}
.eco-float-sync{right:20px;bottom:12px;animation-delay:-2s}
@keyframes ecoFloat{50%{transform:translateY(-8px)}}

.ecosystem-bottom{
  position:relative;z-index:2;
  width:min(1120px,calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  margin-top:50px;
  color:#58788e;font-size:.62rem;font-weight:900;letter-spacing:.13em;
}
.ecosystem-bottom i{width:4px;height:4px;border-radius:50%;background:#159fea}

@media(max-width:1050px){
  .ecosystem-inner{grid-template-columns:1fr;gap:45px}
  .ecosystem-copy{max-width:720px;text-align:center;margin:auto}
  .ecosystem-copy>p{margin-left:auto;margin-right:auto}
  .ecosystem-platforms,.ecosystem-actions{justify-content:center}
  .ecosystem-visual{width:min(720px,100%);margin:auto}
  .ecosystem-phone{left:0}
}
@media(max-width:650px){
  .ecosystem-showcase{min-height:auto;padding:72px 0 40px}
  .ecosystem-showcase .container{width:min(100% - 28px,1120px)}
  .ecosystem-inner{grid-template-columns:minmax(0,1fr);gap:34px;width:100%}
  .ecosystem-copy{width:100%;max-width:100%;text-align:center}
  .ecosystem-kicker{justify-content:center;margin-bottom:16px}
  .ecosystem-copy h2{font-size:clamp(2.25rem,11vw,3.45rem);line-height:.98;letter-spacing:-.05em;overflow-wrap:normal;word-break:normal}
  .ecosystem-copy>p{max-width:34rem;margin:20px auto 24px;font-size:.93rem;line-height:1.65}
  .ecosystem-platforms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%;margin-bottom:24px}
  .ecosystem-platform{min-width:0;width:100%;padding:10px 11px;text-align:left}
  .ecosystem-platform-icon{width:31px;height:31px;flex:0 0 31px}
  .ecosystem-platform strong{font-size:.78rem}
  .ecosystem-actions{flex-direction:column;width:100%}
  .ecosystem-download-btn{width:100%;justify-content:center}
  .ecosystem-visual{width:100%;max-width:520px;min-height:350px;margin:0 auto;overflow:visible}
  .ecosystem-screen{width:88%;height:250px;top:34px;right:0;transform:none}
  .ecosystem-screen-body aside{width:48px;padding:13px 8px}
  .ecosystem-screen-body aside b{width:28px;height:28px;margin-bottom:16px}
  .ecosystem-screen-body aside i{width:23px;margin:14px auto}
  .ecosystem-dashboard{padding:12px}
  .eco-stats{gap:5px;margin:12px 0}
  .eco-stats i{height:42px}
  .eco-orders{padding:7px}
  .eco-orders div{height:22px;margin:4px 0}
  .ecosystem-phone{width:126px;height:258px;left:0;bottom:0;padding:6px;border-radius:24px;transform:rotate(-2deg)}
  .ecosystem-phone-ui{padding:28px 9px 9px;border-radius:19px}
  .eco-phone-head{margin-bottom:18px}
  .ecosystem-phone-ui>strong{font-size:.9rem;margin-bottom:10px}
  .eco-phone-order{gap:6px;padding:6px 4px;margin:6px 0}
  .eco-phone-order i{width:21px;height:21px;flex-basis:21px}
  .eco-phone-nav{left:14px;right:14px;bottom:13px;padding:7px}
  .eco-float-order{right:0;top:0}
  .eco-float-sync{right:0;bottom:0}
  .ecosystem-floating-card{padding:7px 8px;gap:7px;max-width:145px}
  .ecosystem-floating-card>span{width:26px;height:26px}
  .ecosystem-floating-card strong{font-size:.56rem}
  .ecosystem-floating-card small{font-size:.42rem}
  .ecosystem-bottom{display:grid;grid-template-columns:1fr 1fr;width:min(100% - 28px,420px);margin:28px auto 0;gap:10px 14px;text-align:center;font-size:.55rem;line-height:1.35}
  .ecosystem-bottom i{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ecosystem-floating-card{animation:none!important}
}

/* =========================================================
   WEB OFICIAL 004 — AJUSTES FINALES DE RESPONSIVE
   ========================================================= */
@media(max-width:820px){
  .mobile-menu{overflow-y:auto;max-height:0}
  .mobile-menu.active{max-height:calc(100vh - 68px)}
  .ecosystem-actions{justify-content:center}
  .ecosystem-play-note{text-align:center}
}
@media(max-width:600px){
  .btn-lg{min-height:52px;padding:14px 18px}
  .ecosystem-download-btn{width:100%}
  .ecosystem-bottom{gap:10px;justify-content:center;text-align:center}
  .ecosystem-bottom i{display:none}
  .contact-copy h2{overflow-wrap:anywhere}
  .footer-grid a{overflow-wrap:anywhere}
}


/* =========================================================
   WEB OFICIAL 007 — ECOSISTEMA REHECHO
   - elimina las etiquetas inferiores
   - centra mejor la composición
   - móvil más parecido a desktop, compacto y premium
   ========================================================= */

.ecosystem-bottom{
  display:none !important;
}

.ecosystem-showcase{
  min-height:720px;
  padding:92px 0 78px;
}

.ecosystem-inner{
  max-width:1120px;
  margin-inline:auto;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:56px;
}

.ecosystem-copy{
  max-width:520px;
}

.ecosystem-copy h2{
  font-size:clamp(3.2rem,5.8vw,5.25rem);
}

.ecosystem-visual{
  width:100%;
  max-width:610px;
  min-height:470px;
  margin-inline:auto;
}

@media(max-width:1050px){
  .ecosystem-showcase{
    padding:82px 0 62px;
  }

  .ecosystem-inner{
    max-width:820px;
    grid-template-columns:1fr;
    gap:34px;
  }

  .ecosystem-copy{
    max-width:640px;
    margin-inline:auto;
    text-align:center;
  }

  .ecosystem-kicker,
  .ecosystem-platforms{
    justify-content:center;
  }

  .ecosystem-copy>p{
    margin-left:auto;
    margin-right:auto;
  }

  .ecosystem-visual{
    max-width:680px;
    min-height:430px;
  }
}

@media(max-width:650px){
  .ecosystem-showcase{
    padding:58px 0 44px;
  }

  .ecosystem-showcase > .container{
    width:min(calc(100% - 30px),var(--container));
  }

  .ecosystem-inner{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
  }

  .ecosystem-copy{
    max-width:360px;
    margin-inline:auto;
    text-align:center;
  }

  .ecosystem-kicker{
    width:auto;
    justify-content:center;
    margin:0 auto 14px;
    font-size:.58rem;
    letter-spacing:.11em;
    line-height:1.45;
  }

  .ecosystem-copy h2{
    max-width:350px;
    margin-inline:auto;
    font-size:clamp(2.55rem,11.8vw,3.45rem);
    line-height:.95;
    letter-spacing:-.055em;
  }

  .ecosystem-copy>p{
    max-width:350px;
    margin:18px auto 20px;
    font-size:.90rem;
    line-height:1.62;
  }

  .ecosystem-platforms{
    width:min(100%,340px);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .ecosystem-platform{
    min-width:0;
    width:100%;
    padding:9px 10px;
    border-radius:12px;
  }

  .ecosystem-platform-icon{
    width:28px;
    height:28px;
    font-size:1rem;
    border-radius:8px;
  }

  .ecosystem-platform small{
    font-size:.48rem;
  }

  .ecosystem-platform strong{
    font-size:.78rem;
  }

  .ecosystem-visual{
    width:min(100%,390px);
    max-width:390px;
    min-height:300px;
    margin:0 auto;
    perspective:none;
  }

  .ecosystem-screen{
    width:88%;
    height:235px;
    right:0;
    left:auto;
    top:26px;
    transform:none;
    border-radius:16px;
  }

  .ecosystem-screen-top{
    height:29px;
    padding:0 10px;
  }

  .ecosystem-screen-top small{
    font-size:.48rem;
  }

  .ecosystem-screen-body{
    height:calc(100% - 29px);
  }

  .ecosystem-screen-body aside{
    width:45px;
    padding:10px 7px;
  }

  .ecosystem-screen-body aside b{
    width:27px;
    height:27px;
    margin-bottom:14px;
    font-size:.55rem;
  }

  .ecosystem-screen-body aside i{
    width:20px;
    height:4px;
    margin:12px auto;
  }

  .ecosystem-dashboard{
    padding:11px;
  }

  .eco-dashboard-title strong{
    font-size:.72rem;
  }

  .eco-dashboard-title small{
    font-size:.45rem;
  }

  .eco-dashboard-title>span{
    padding:4px 6px;
    font-size:.40rem;
  }

  .eco-stats{
    gap:5px;
    margin:10px 0;
  }

  .eco-stats i{
    height:38px;
    border-radius:8px;
  }

  .eco-orders{
    padding:6px;
  }

  .eco-orders div{
    height:18px;
    margin:4px 0;
    border-radius:6px;
  }

  .ecosystem-phone{
    width:104px;
    height:215px;
    left:0;
    bottom:0;
    padding:5px;
    border-radius:23px;
    transform:rotate(-2deg);
  }

  .ecosystem-phone-speaker{
    top:9px;
    width:32px;
    height:4px;
  }

  .ecosystem-phone-ui{
    padding:23px 8px 8px;
    border-radius:18px;
  }

  .eco-phone-head{
    margin-bottom:14px;
  }

  .eco-phone-head b{
    font-size:.58rem;
  }

  .ecosystem-phone-ui>small{
    font-size:.42rem;
  }

  .ecosystem-phone-ui>strong{
    margin:3px 0 10px;
    font-size:.82rem;
  }

  .eco-phone-order{
    gap:5px;
    margin:6px 0;
    padding:5px;
  }

  .eco-phone-order i{
    width:19px;
    height:19px;
    flex-basis:19px;
  }

  .eco-phone-order b{
    font-size:.42rem;
  }

  .eco-phone-order span{
    font-size:.36rem;
  }

  .eco-phone-nav{
    left:12px;
    right:12px;
    bottom:11px;
    padding:6px;
  }

  .eco-phone-nav i{
    width:11px;
    height:3px;
  }

  .ecosystem-floating-card{
    max-width:132px;
    gap:6px;
    padding:6px 7px;
    border-radius:10px;
  }

  .ecosystem-floating-card>span{
    width:23px;
    height:23px;
    font-size:.72rem;
  }

  .ecosystem-floating-card small{
    font-size:.34rem;
  }

  .ecosystem-floating-card strong{
    font-size:.49rem;
  }

  .eco-float-order{
    right:1px;
    top:2px;
  }

  .eco-float-sync{
    right:0;
    bottom:4px;
  }
}

@media(max-width:390px){
  .ecosystem-showcase{
    padding-top:54px;
  }

  .ecosystem-copy{
    max-width:330px;
  }

  .ecosystem-copy h2{
    max-width:320px;
    font-size:clamp(2.35rem,11.6vw,3.1rem);
  }

  .ecosystem-copy>p{
    max-width:320px;
    font-size:.86rem;
  }

  .ecosystem-platforms{
    width:min(100%,310px);
  }

  .ecosystem-visual{
    width:min(100%,350px);
    min-height:275px;
  }

  .ecosystem-screen{
    height:215px;
  }

  .ecosystem-phone{
    width:96px;
    height:198px;
  }
}


/* =========================================================
   WEB OFICIAL 008 — ECOSISTEMA PREMIUM + ANIMACIONES
   ========================================================= */
.ecosystem-showcase{
  min-height:700px;
  padding:96px 0 80px;
  isolation:isolate;
  background:
    radial-gradient(circle at 76% 38%,rgba(21,159,234,.16),transparent 26rem),
    radial-gradient(circle at 18% 70%,rgba(77,196,255,.08),transparent 24rem),
    linear-gradient(135deg,#040b13 0%,#07131f 46%,#081a29 100%);
}

.ecosystem-showcase:after{
  content:"";
  position:absolute;
  z-index:0;
  width:560px;
  height:560px;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(77,196,255,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 70px rgba(77,196,255,.018),
    0 0 0 140px rgba(77,196,255,.012);
  pointer-events:none;
  animation:ecoOrbit 14s linear infinite;
}

.ecosystem-inner{
  max-width:1120px;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:64px;
  align-items:center;
}

.ecosystem-copy{
  max-width:535px;
}

.ecosystem-kicker{
  margin-bottom:18px;
}

.ecosystem-copy h2{
  max-width:540px;
  font-size:clamp(3rem,5.5vw,5rem);
  line-height:.96;
  letter-spacing:-.058em;
}

.ecosystem-copy h2 span{
  display:inline-block;
  padding-bottom:.06em;
}

.ecosystem-copy>p{
  max-width:500px;
  margin:23px 0 22px;
  font-size:1rem;
  line-height:1.72;
}

.ecosystem-points{
  display:flex;
  flex-wrap:wrap;
  gap:9px 16px;
  margin:0 0 24px;
  color:#9bb2c3;
  font-size:.78rem;
  font-weight:720;
}

.ecosystem-points span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.ecosystem-points i{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(77,196,255,.1);
  border:1px solid rgba(77,196,255,.18);
  color:#68d1ff;
  font-style:normal;
  font-size:.58rem;
}

.ecosystem-platforms{
  margin-bottom:0;
}

.ecosystem-platform{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.ecosystem-platform:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.08) 48%,transparent 76%);
  transform:translateX(-130%);
  animation:ecoSheen 6s ease-in-out infinite;
}

.ecosystem-platform:nth-child(2):before{
  animation-delay:-3s;
}

.ecosystem-platform:hover{
  transform:translateY(-3px);
  border-color:rgba(77,196,255,.26);
  background:rgba(255,255,255,.065);
}

.ecosystem-visual{
  max-width:620px;
  min-height:470px;
  transform-style:preserve-3d;
}

.ecosystem-screen{
  width:min(600px,100%);
  height:375px;
  right:0;
  top:48px;
  transform:perspective(1200px) rotateY(-4deg) rotateX(1deg);
  transition:transform .18s ease-out;
}

.ecosystem-screen:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-30%;
  height:90px;
  background:linear-gradient(to bottom,transparent,rgba(77,196,255,.045),transparent);
  pointer-events:none;
  animation:ecoScan 6s linear infinite;
}

.ecosystem-phone{
  left:-14px;
  bottom:2px;
  transition:transform .18s ease-out;
}

.ecosystem-floating-card{
  animation:ecoFloat 4.5s ease-in-out infinite;
}

.eco-float-order{
  animation-delay:-.8s;
}

.eco-float-sync{
  animation-delay:-2.7s;
}

.ecosystem-kicker i{
  animation:ecoDot 2.2s ease-in-out infinite;
}

@keyframes ecoOrbit{
  to{transform:translateY(-50%) rotate(360deg)}
}

@keyframes ecoSheen{
  0%,55%{transform:translateX(-130%)}
  72%,100%{transform:translateX(130%)}
}

@keyframes ecoScan{
  0%{transform:translateY(-120%);opacity:0}
  12%{opacity:1}
  75%{opacity:.6}
  100%{transform:translateY(520%);opacity:0}
}

@keyframes ecoDot{
  50%{box-shadow:0 0 0 8px rgba(77,196,255,.05),0 0 30px rgba(77,196,255,.65)}
}

/* Tablet: centra el mensaje, pero conserva una composición amplia */
@media(max-width:1050px){
  .ecosystem-showcase{
    padding:82px 0 62px;
  }

  .ecosystem-showcase:after{
    width:470px;
    height:470px;
    right:50%;
    top:69%;
    transform:translate(50%,-50%);
  }

  .ecosystem-inner{
    max-width:780px;
    grid-template-columns:1fr;
    gap:36px;
  }

  .ecosystem-copy{
    max-width:650px;
    text-align:center;
    margin-inline:auto;
  }

  .ecosystem-copy h2,
  .ecosystem-copy>p{
    margin-left:auto;
    margin-right:auto;
  }

  .ecosystem-points,
  .ecosystem-platforms,
  .ecosystem-kicker{
    justify-content:center;
  }

  .ecosystem-visual{
    width:min(100%,680px);
    margin-inline:auto;
  }
}

/* Celular: compacto, con aire y estética tipo desktop */
@media(max-width:650px){
  .ecosystem-showcase{
    min-height:auto;
    padding:62px 0 42px;
  }

  .ecosystem-showcase:before{
    background-size:36px 36px;
    opacity:.09;
  }

  .ecosystem-showcase:after{
    width:330px;
    height:330px;
    right:50%;
    top:73%;
    transform:translate(50%,-50%);
    box-shadow:
      0 0 0 42px rgba(77,196,255,.015),
      0 0 0 84px rgba(77,196,255,.01);
  }

  .ecosystem-showcase > .container{
    width:min(calc(100% - 30px),var(--container));
  }

  .ecosystem-inner{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
  }

  .ecosystem-copy{
    max-width:390px;
    text-align:center;
    margin-inline:auto;
  }

  .ecosystem-kicker{
    width:auto;
    margin:0 auto 14px;
    font-size:.57rem;
    letter-spacing:.105em;
  }

  .ecosystem-copy h2{
    max-width:390px;
    margin-inline:auto;
    font-size:clamp(2.18rem,9.4vw,3.05rem);
    line-height:1;
    letter-spacing:-.048em;
  }

  .ecosystem-copy h2 br{
    display:none;
  }

  .ecosystem-copy h2 span{
    display:block;
    margin-top:2px;
  }

  .ecosystem-copy>p{
    max-width:360px;
    margin:16px auto 16px;
    font-size:.86rem;
    line-height:1.58;
  }

  .ecosystem-points{
    max-width:360px;
    margin:0 auto 18px;
    justify-content:center;
    gap:7px 13px;
    font-size:.68rem;
  }

  .ecosystem-platforms{
    width:min(100%,330px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:0 auto;
  }

  .ecosystem-platform{
    min-width:0;
    width:100%;
    padding:9px 10px;
    border-radius:12px;
  }

  .ecosystem-platform-icon{
    width:28px;
    height:28px;
    font-size:.95rem;
    border-radius:8px;
  }

  .ecosystem-platform small{font-size:.46rem}
  .ecosystem-platform strong{font-size:.76rem}

  .ecosystem-visual{
    width:min(100%,390px);
    max-width:390px;
    min-height:300px;
    margin:0 auto;
    perspective:none;
  }

  .ecosystem-screen{
    width:88%;
    height:228px;
    right:0;
    top:30px;
    transform:none;
    border-radius:15px;
  }

  .ecosystem-screen-top{
    height:29px;
    padding:0 10px;
  }

  .ecosystem-screen-top small{font-size:.47rem}
  .ecosystem-screen-body{height:calc(100% - 29px)}

  .ecosystem-screen-body aside{
    width:44px;
    padding:10px 7px;
  }

  .ecosystem-screen-body aside b{
    width:27px;
    height:27px;
    margin-bottom:14px;
    font-size:.54rem;
  }

  .ecosystem-screen-body aside i{
    width:20px;
    height:4px;
    margin:12px auto;
  }

  .ecosystem-dashboard{padding:11px}
  .eco-dashboard-title strong{font-size:.72rem}
  .eco-dashboard-title small{font-size:.44rem}
  .eco-dashboard-title>span{padding:4px 6px;font-size:.39rem}
  .eco-stats{gap:5px;margin:10px 0}
  .eco-stats i{height:37px;border-radius:8px}
  .eco-orders{padding:6px}
  .eco-orders div{height:18px;margin:4px 0;border-radius:6px}

  .ecosystem-phone{
    width:102px;
    height:210px;
    left:0;
    bottom:0;
    padding:5px;
    border-radius:22px;
    transform:rotate(-2deg);
  }

  .ecosystem-phone-speaker{top:9px;width:31px;height:4px}
  .ecosystem-phone-ui{padding:23px 8px 8px;border-radius:17px}
  .eco-phone-head{margin-bottom:13px}
  .eco-phone-head b{font-size:.56rem}
  .ecosystem-phone-ui>small{font-size:.40rem}
  .ecosystem-phone-ui>strong{margin:3px 0 9px;font-size:.80rem}
  .eco-phone-order{gap:5px;margin:5px 0;padding:5px}
  .eco-phone-order i{width:18px;height:18px;flex-basis:18px}
  .eco-phone-order b{font-size:.40rem}
  .eco-phone-order span{font-size:.34rem}
  .eco-phone-nav{left:12px;right:12px;bottom:10px;padding:6px}
  .eco-phone-nav i{width:11px;height:3px}

  .ecosystem-floating-card{
    max-width:128px;
    gap:6px;
    padding:6px 7px;
    border-radius:10px;
  }

  .ecosystem-floating-card>span{width:22px;height:22px;font-size:.70rem}
  .ecosystem-floating-card small{font-size:.33rem}
  .ecosystem-floating-card strong{font-size:.47rem}
  .eco-float-order{right:1px;top:3px}
  .eco-float-sync{right:0;bottom:4px}
}

@media(max-width:390px){
  .ecosystem-showcase{padding-top:56px}
  .ecosystem-copy{max-width:340px}
  .ecosystem-copy h2{max-width:335px;font-size:clamp(2rem,9.5vw,2.65rem)}
  .ecosystem-copy>p{max-width:330px;font-size:.82rem}
  .ecosystem-points{max-width:330px;font-size:.64rem}
  .ecosystem-platforms{width:min(100%,310px)}
  .ecosystem-visual{width:min(100%,350px);min-height:275px}
  .ecosystem-screen{height:212px}
  .ecosystem-phone{width:94px;height:194px}
}

@media(prefers-reduced-motion:reduce){
  .ecosystem-showcase:after,
  .ecosystem-platform:before,
  .ecosystem-screen:after,
  .ecosystem-kicker i{
    animation:none!important;
  }
}