* { margin:0; padding:0; box-sizing:border-box; }
:root { --bg:#0b0f14; --surface:#131a24; --surface-2:#1a2230; --lime:#BEFF46; --text:#e6edf3; --text-muted:#8b98a9; --border:#232d3d; --radius:14px; }
body { font-family:"Inter",system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }

/* Navbar */
.navbar { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(11,15,20,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:90%; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.nav-logo { width:38px; height:38px; border-radius:10px; object-fit:contain; }
.nav-title { font-weight:700; font-size:1.15rem; letter-spacing:-0.3px; }
.nav-menu { display:flex; gap:28px; list-style:none; }
.nav-menu a { color:var(--text-muted); text-decoration:none; font-weight:500; font-size:.95rem; transition:color .2s; }
.nav-menu a:hover { color:var(--lime); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle .bar { width:24px; height:2.5px; background:var(--text); border-radius:2px; transition:.2s; }

/* Hero */
.hero { padding:120px 20px 80px; background:radial-gradient(circle at 50% 0%,rgba(190,255,70,.10),transparent 60%); }
.hero-inner { max-width:90%; margin:0 auto; display:flex; align-items:center; gap:60px; flex-wrap:wrap; overflow: hidden; }
.hero-text { flex:1; min-width:300px; }
.badge { background:var(--lime); color:#0b0f14; padding:5px 16px; border-radius:20px; font-size:.78rem; font-weight:700; letter-spacing:.6px; display:inline-block; margin-bottom:20px; }
.hero h1 { font-size:3.2rem; font-weight:800; letter-spacing:-1.5px; background:linear-gradient(135deg,var(--lime),#fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.tagline { color:var(--text-muted); font-size:1.2rem; margin:14px 0 28px; max-width:520px;  height: 3rem;}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.btn { padding:10px 36px; border-radius:30px; font-weight:600; cursor:pointer; border:none; font-size:1rem; text-decoration:none; display:inline-block; transition:transform .2s,box-shadow .2s; }
.btn-primary { background:var(--lime); color:#0b0f14; box-shadow:0 6px 22px rgba(190,255,70,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(190,255,70,.45); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--lime); color:var(--lime); }
.btn-lg { padding:18px 44px; font-size:1.1rem; }
.hero-bullets { list-style:none; display:flex; flex-direction:column; gap:10px; }
.hero-bullets li { color:var(--text-muted); font-size:.98rem; display:flex; align-items:center; gap:10px; }
.hero-bullets i { color:var(--lime); font-size:.85rem; }
.hero-img { flex:1; min-width:90vh; position:relative; }
.hero-img img { width:100%; border-radius:var(--radius);  }


/* Modal */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:300; align-items:center; justify-content:center; padding:20px; }
.modal.active { display:flex; }
.modal-content { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:36px; max-width:500px; width:100%; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.modal-close { position:absolute; top:14px; right:18px; background:none; border:none; color:var(--text-muted); font-size:26px; cursor:pointer; transition:color .2s; }
.modal-close:hover { color:var(--text); }
.modal h2 { margin-bottom:24px; color:var(--lime); font-size:1.5rem; font-weight:700; }
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.platform-card { display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:16px; color:var(--text); text-decoration:none; transition:all .2s; }
.platform-card:hover { border-color:var(--lime); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.platform-card i { font-size:2.4rem; color:var(--lime); }
.platform-card strong { font-size:1rem; font-weight:600; }

/* Sections */
.features { max-width:90%; margin:0 auto; padding:70px 20px; }
.section-title { text-align:center; font-size:2.2rem; font-weight:700; margin-bottom:10px; color:var(--lime); letter-spacing:-0.5px; }
.section-sub { text-align:center; color:var(--text-muted); margin-bottom:40px; font-size:1.05rem; }

/* Mobile scroll infinito */
.mobile-showcase { overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); padding:10px 0; }
.mobile-track { display:flex; width:max-content; animation:scrollX 30s linear infinite; }
.mobile-track:hover { animation-play-state:paused; }
.mobile-group { display:flex; gap:16px; padding:0 8px; }
.mobile-card { width:260px; flex-shrink:0; }
.mobile-card img { width:100%; height:auto; border-radius:14px; display:block; border:1px solid var(--border); }
@keyframes scrollX {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* Func buttons */
.func-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:28px; }
.func-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 10px; background:var(--surface); border:1px solid var(--border); border-radius:16px; color:var(--text-muted); cursor:pointer; transition:all .25s; font-family:inherit; }
.func-btn i { font-size:1.6rem; color:var(--text-muted); transition:color .25s; }
.func-btn span { font-size:.88rem; font-weight:600; }
.func-btn:hover { border-color:var(--lime); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.func-btn:hover i { color:var(--lime); }
.func-btn.active { background:var(--lime); border-color:var(--lime); color:#0b0f14; }
.func-btn.active i { color:#0b0f14; }
.func-panel { display:none; animation:fadeIn .4s ease; }
.func-panel.active { display:block; }
.func-panel-inner { display:flex; gap:32px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:28px; }
.func-img { flex:1; min-width:0; }
.func-img img { width:100%; border-radius:14px; display:block; border:1px solid var(--border); }
.func-text { flex:1; min-width:0; }
.func-text h3 { color:var(--lime); font-size:1.6rem; font-weight:700; margin-bottom:10px; letter-spacing:-0.4px; }
.func-text p { color:var(--text-muted); margin-bottom:16px; font-size:1rem; }
.func-text ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.func-text ul li { color:var(--text-muted); font-size:.94rem; display:flex; align-items:flex-start; gap:10px; }
.func-text ul li i { color:var(--lime); font-size:.85rem; margin-top:4px; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Tecnología */
.tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tech-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; text-align:center; transition:all .25s; }
.tech-card:hover { border-color:var(--lime); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.tech-icon { width:52px; height:52px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:rgba(190,255,70,.12); border-radius:14px; color:var(--lime); font-size:1.4rem; font-weight:800; border:1px solid rgba(190,255,70,.35); }
.tech-card strong { color:var(--text); font-size:1rem; font-weight:700; display:block; margin-bottom:8px; }
.tech-card p { color:var(--text-muted); font-size:.88rem; }
/* Video */
.video-wrap { max-width:70%; margin:0 auto; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:0 18px 50px rgba(0,0,0,.45); background:#000; }
.video-wrap video { width:100%;  }

/* CTA */
.cta-section { text-align:center; padding:70px 20px; background:radial-gradient(circle at 50% 0%,rgba(190,255,70,.08),transparent 60%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-section h2 { font-size:2rem; font-weight:700; margin-bottom:10px; color:var(--lime); }
.cta-section p { color:var(--text-muted); margin-bottom:28px; }

/* Footer */
.footer { text-align:center; padding:36px 20px; color:var(--text-muted); font-size:.88rem; border-top:1px solid var(--border); }

/* WPP */
.wpp-float { position:fixed; bottom:28px; right:28px; width:58px; height:58px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.5); text-decoration:none; z-index:200; transition:transform .2s; }
.wpp-float:hover { transform:scale(1.12); }
.wpp-float i { font-size:26px; }

/* Responsive */
@media (max-width:860px) {
  .hero h1 { font-size:2.4rem; }
  .hero-inner { gap:30px; max-width:100%; }
  .nav-menu { display:none; }
  .nav-toggle { display:flex; }

  .hero-img { flex:1; min-width:100%; position:relative; }

  .func-grid { grid-template-columns:repeat(3,1fr); }
  .func-panel-inner { flex-direction:column; padding:20px; }
  .func-text h3 { font-size:1.35rem; }
  .tech-grid { grid-template-columns:repeat(2,1fr); }

  .mobile-card { width:200px; }
  .features { max-width:100%; margin:0 auto; padding:70px 20px; }
  .mobile-card img { width:15rem; height:30rem;}
  .mobile-card { width:15rem; }
  .nav-inner { max-width:100%; margin:0 auto; padding:0 20px; }
  .tech-grid { display:grid; grid-template-columns:repeat(1,1fr); gap:14px; }
  .func-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 10px; background:var(--surface); border:1px solid var(--border); border-radius:16px; color:var(--text-muted); cursor:pointer; transition:all .25s; font-family:inherit; }
.func-btn i { font-size:13px;  }
.func-btn span { font-size:13px;  }
.video-wrap { max-width:100%; margin:0 auto; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:0 18px 50px rgba(0,0,0,.45); background:#000; }
.video-wrap video { width:100%;  }
}