@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");

:root{
  --bg:#0b0a12; --ink:#f1e9ff; --muted:#b8a8dc;
  --brand:#9b5cff; --brand2:#6d28d9; --brand3:#c084fc;
  --panel:rgba(204,191,255,.06); --stroke:rgba(204,191,255,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.grid2,.grid3,.grid4{display:grid;gap:24px}
@media(min-width:768px){.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.grid4{grid-template-columns:repeat(4,1fr)}}

@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

.nav{position:sticky;top:0;z-index:20;background:rgba(25,10,36,.6);backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke)}
.nav__wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:.5px;color:var(--ink)}
.nav__links{display:flex;align-items:center;gap:20px}
.nav__links a{opacity:.9;transition:.2s}
.nav__links a:hover{opacity:1}
.nav__toggle{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;position:relative}
.nav__toggle span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav__toggle span:nth-child(1){top:12px}.nav__toggle span:nth-child(2){top:19px}.nav__toggle span:nth-child(3){top:26px}
@media(max-width:920px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:auto 0 0 0;top:64px;background:#120a1f;border-top:1px solid var(--stroke);padding:16px 20px;display:grid;gap:14px;transform:translateY(100%);transition:transform .25s ease}
  .nav__links.is-open{transform:translateY(0)}
}

.btn{display:inline-block;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#120a1f;padding:14px 22px;border-radius:999px;font-weight:700;box-shadow:0 10px 30px rgba(155,92,255,.25);transition:transform .2s,filter .2s,box-shadow .3s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:0 0 0 2px #ffffff20,0 18px 40px rgba(155,92,255,.35)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--stroke)}
.btn--sm{padding:10px 16px}.btn--lg{padding:16px 26px}.btn--xl{padding:16px 28px;font-size:1.02rem}.btn--block{display:block;text-align:center;width:100%}
.glow{position:relative}
.glow::after{content:"";position:absolute;inset:-2px;border-radius:999px;z-index:-1;background:radial-gradient(120px 60px at 30% 20%,#ffffff44,transparent 60%),radial-gradient(160px 80px at 80% 50%,rgba(155,92,255,.5),transparent 60%);filter:blur(16px);opacity:.55;transition:opacity .25s}
.glow:hover::after{opacity:.9}

.hero{position:relative;overflow:hidden;padding:100px 0 120px;background:radial-gradient(1200px 500px at 15% -10%,rgba(155,92,255,.28),transparent 60%),radial-gradient(900px 500px at 85% -20%,rgba(109,40,217,.28),transparent 60%),linear-gradient(135deg,#120a1f,#1d1230,#120a1f);background-size:200% 200%;animation:gradientShift 12s ease infinite;border-bottom:1px solid var(--stroke)}
.hero__grid{display:grid;gap:40px;align-items:center}
@media(min-width:992px){.hero__grid{grid-template-columns:1.1fr .9fr}}
.hero h1{font-size:40px;line-height:1.25;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 20px}
.hero__cta .btn{margin-right:12px}
.badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.badges li{background:var(--panel);border:1px solid var(--stroke);padding:8px 12px;border-radius:999px;color:var(--muted);font-size:14px}

.orb{position:absolute;border-radius:999px;filter:blur(40px);opacity:.5;pointer-events:none}
.orb--1{width:300px;height:300px;left:-60px;top:-40px;background:#7c3aed55;animation:float 8s ease-in-out infinite}
.orb--2{width:260px;height:260px;right:-40px;top:-60px;background:#c084fc44;animation:float 7s ease-in-out -1s infinite}
.orb--3{width:300px;height:300px;left:50%;transform:translateX(-50%);bottom:-120px;background:#a855f755;filter:blur(60px)}

.wm{position:absolute;opacity:.06;filter:blur(0.3px) drop-shadow(0 8px 25px rgba(155,92,255,.25));width:120px;height:auto;pointer-events:none}
.wm--left{left:-10px;top:-8px}
.wm--right{right:-18px;top:-14px;transform:rotate(-10deg)}
@media(max-width:680px){.wm{display:none}}

.device{position:relative;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;padding:22px;box-shadow:0 40px 120px #9b5cff22,0 10px 30px #00000040}
.device__bar{height:10px;background:#ffffff22;border-radius:999px;margin-bottom:16px}
.device__card{background:#1a0f2c;border:1px solid var(--stroke);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.device__card h4{margin:4px 0 6px}
.device__card p{margin:0;color:#cabbed}
.tag{display:inline-block;background:rgba(155,92,255,.18);color:#e9d5ff;border:1px solid rgba(155,92,255,.35);padding:4px 10px;border-radius:999px;font-size:12px}
.tag--green{background:rgba(16,185,129,.18);color:#d1fae5;border-color:rgba(16,185,129,.35)}

.bar{border-bottom:1px solid var(--stroke);background:#120a1f}
.bar__wrap{display:flex;gap:18px;justify-content:center;align-items:center;padding:16px 0;color:var(--muted)}
.bar__wrap span{opacity:.35}

.section{padding:84px 0}
.section--soft{background:linear-gradient(180deg,rgba(155,92,255,.06),transparent)}
h2{font-size:32px;margin:0 0 6px}
.sub{color:#d8caf3;opacity:.9;margin-bottom:26px}

.card,.plan,.step,.faq>div{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.hover-rise:hover{transform:translateY(-6px);box-shadow:0 20px 50px #9b5cff1f}
.hover-border:hover{border-color:#d6bcfa55}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:6px 0}
.step__num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,#e9d5ff,#a78bfa);color:#1b1130;font-weight:800;margin-bottom:10px}

.plan{text-align:left;position:relative}
.plan .price{font-size:28px;font-weight:800;margin:6px 0 12px}
.plan .flag{position:absolute;top:-12px;right:16px;background:linear-gradient(135deg,#e9d5ff,#a78bfa);color:#1b1130;font-weight:800;padding:6px 10px;border-radius:10px}
.plan--pro{transform:translateY(-6px);box-shadow:0 20px 50px rgba(155,92,255,.12)}

.cta{position:relative;overflow:hidden;padding:90px 0;text-align:center;border-top:1px solid var(--stroke);background:radial-gradient(800px 320px at 50% -10%,rgba(192,132,252,.22),transparent 60%),var(--bg)}
.footer{border-top:1px solid var(--stroke);padding:24px 0;background:#0d0818}
.footer__wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer__links a{color:var(--muted);margin-left:16px;transition:.2s}
.footer__links a:hover{color:#fff}

.brand-strip{border-bottom:1px solid var(--stroke);background:#0f0a1a}
.brand-strip__wrap{display:flex;gap:14px;align-items:center;justify-content:center;padding:14px 0;color:#d6c9f5}
.brand-strip__wrap img{height:26px;width:auto;filter:drop-shadow(0 4px 10px rgba(155,92,255,.25))}
.brand-strip__wrap .dot{opacity:.35;margin:0 4px}

@media(max-width:1024px){.hero{padding:90px 0 108px}.hero h1{font-size:36px}}
@media(max-width:820px){.hero__grid{grid-template-columns:1fr;gap:28px}.hero__art{order:-1}}
@media(max-width:640px){
  .section{padding:64px 0}
  .hero{padding:80px 0 96px}
  .hero h1{font-size:30px}
  h2{font-size:26px}
  .btn--xl{padding:14px 22px;font-size:1rem}
  .badges{gap:10px}
  .bar__wrap{flex-direction:column;gap:6px}
}

/* Animaciones scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform}
.reveal.show{opacity:1;transform:none}
.fade-left{transform:translateX(-24px)} .fade-left.show{transform:none}
.fade-right{transform:translateX(24px)}  .fade-right.show{transform:none}
.fade-up{transform:translateY(18px)}      .fade-up.show{transform:none}
.scale-in{transform:scale(.96)}           .scale-in.show{transform:scale(1)}


/* ===== Stack (integraciones) ===== */
.stack{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:#0f0a1a}
.stack__wrap{display:grid;gap:14px;justify-items:center;padding:26px 0}
.stack__title{color:#d8caf3;opacity:.95;margin:0;font-weight:700}
.stack__logos{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:center}
.stack__logos img{height:40px;width:auto;opacity:.9;transition:.2s filter}
.stack__logos img:hover{filter:drop-shadow(0 6px 18px rgba(155,92,255,.35));opacity:1}

/* ===== Work (mini gallery) ===== */
.work__grid{align-items:stretch}
.work__item{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--stroke);background:var(--panel);box-shadow:0 12px 40px #00000033;transition:transform .25s, box-shadow .25s}
.work__item img{display:block;width:100%;height:auto;object-fit:cover;transform:scale(1.01);transition:transform .35s ease}
.work__item:hover{transform:translateY(-6px);box-shadow:0 24px 70px #9b5cff22}
.work__item:hover img{transform:scale(1.04)}
.work__cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(180deg,transparent,rgba(17,10,28,.85));color:#f2eaff}
.work__cap span{background:rgba(155,92,255,.25);border:1px solid rgba(155,92,255,.45);padding:6px 10px;border-radius:999px}


/* ===== Demo Laptop ===== */
.demo__wrap{display:grid;gap:32px;align-items:center}
@media(min-width:992px){.demo__wrap{grid-template-columns:1fr 1.1fr}}
.demo .sub{max-width:560px}
.demo__laptop{perspective:1200px;display:grid;place-items:center}
.laptop{position:relative;width:100%;max-width:780px;aspect-ratio:16/10}
.laptop__base{position:absolute;left:0;right:0;bottom:0;height:22%;background:#140d22;border:1px solid var(--stroke);border-radius:0 0 16px 16px;box-shadow:0 20px 60px #00000066}
.laptop__lid{position:absolute;left:3%;right:3%;bottom:18%;height:76%;transform-origin:bottom center;transform:rotateX(92deg);border-radius:14px;border:1px solid var(--stroke);background:#0f0a1a;box-shadow:inset 0 0 0 2px #ffffff10, 0 12px 40px #00000055;animation:lidOpen 2.2s cubic-bezier(.15,.9,.18,1) 0.2s forwards}
.laptop__screen{position:absolute;inset:10px;border-radius:10px;overflow:hidden;background:#0b0a12}
.laptop__screen img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);filter:contrast(1.05) saturate(1.02)}
@keyframes lidOpen{
  0%{transform:rotateX(92deg)}
  60%{transform:rotateX(-6deg)}
  85%{transform:rotateX(3deg)}
  100%{transform:rotateX(0deg)}
}


/* ===== Parallax suave dentro de la pantalla del portátil ===== */
.laptop__screen{overflow:hidden}
.parallax-img{width:105%; height:100%; object-fit:cover; transform:translateY(8px) scale(1.035); will-change:transform; filter:contrast(1.04) saturate(1.03)}
.reveal.show .parallax-img{animation:parallaxPan 12s ease-in-out 0.8s infinite alternate}
@keyframes parallaxPan{
  0%{ transform:translateY(10px) scale(1.035) }
  100%{ transform:translateY(-12px) scale(1.035) }
}
@media (prefers-reduced-motion: reduce){
  .parallax-img{animation:none !important; transform:none !important}

}
/* === FIX VISIBILIDAD Y CAPAS EN MÓVIL === */
.nav { 
  z-index: 50; /* Asegura que el nav quede por encima de todo */
}

@media(max-width:920px){
  body.menu-open {
    overflow: hidden; /* Evita que el contenido del hero se desplace por debajo */
  }

  .nav__links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15,10,25,0.96); /* más oscuro y opaco */
    z-index: 49; /* justo debajo del navbar */
    display: grid;
    gap: 18px;
    padding: 24px;
    transform: translateY(100%);
    transition: transform .25s ease;
  }

  .nav__links.is-open {
    transform: translateY(0);
  }
}