/* Gemy Studio — web de la tienda. Paleta Gema, la misma del theme. Planos de fondo en vez de bordes. */
@font-face{font-family:Rubik; src:url(fuentes/rubik.woff2) format("woff2"); font-weight:300 900; font-display:swap}
@font-face{font-family:"JetBrains Mono"; src:url(fuentes/jetbrains-mono.woff2) format("woff2"); font-weight:100 800; font-display:swap}
:root{
  --bg:#0a0812; --bg2:#0f0c19; --bg3:#110d1c; --box:#16121f; --box2:#1d1829; --box3:#262036;
  --text:#ece9f5; --sub:#a59fba; --muted:#6f6886;
  --primary:#8b5cf6; --primary-h:#9b72f8; --deep:#7c3aed; --accent:#d946ef; --lilac:#c4b5fd;
  --ok:#34d399; --warn:#fbbf24;
  --r:14px; --r-in:9px;
  --font:Rubik, ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--lilac)}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{color:#fff; line-height:1.15; letter-spacing:-.02em; margin:0}
code{font-family:var(--mono); font-size:.86em; background:var(--box2); color:var(--lilac); padding:2px 7px; border-radius:6px}
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}
.wrap.narrow{max-width:940px}
.i{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--primary); color:#fff; text-decoration:none; font-weight:500; font-size:.97rem; padding:12px 22px; border-radius:var(--r-in); border:0; transition:background .15s, transform .15s}
.btn:hover{background:var(--primary-h); transform:translateY(-1px)}
.btn .i{width:18px; height:18px}
.btn.ghost{background:var(--box2); color:var(--text)}
.btn.ghost:hover{background:var(--box3)}
.btn.sm{padding:8px 16px; font-size:.9rem}
.btn.lg{padding:14px 26px; font-size:1.02rem}
.btn.white{background:#fff; color:var(--deep)}
.btn.white:hover{background:#f3efff}

/* barra de apertura */
.promo{display:flex; align-items:center; justify-content:center; gap:8px 10px; flex-wrap:wrap; background:var(--deep); color:#fff; font-size:.88rem; padding:8px 16px; text-align:center}
.promo a{color:#fff; font-weight:600; text-underline-offset:3px}
.promo code{background:rgba(255,255,255,.16); color:#fff}
.promo .i{width:17px; height:17px}

/* cabecera */
.top{position:sticky; top:0; z-index:50; background:rgba(10,8,18,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.top .wrap{display:flex; align-items:center; gap:16px; height:68px}
.brand{display:flex; align-items:flex-end; gap:8px; text-decoration:none}
.brand img{height:28px; width:auto}
.brand small{color:var(--muted); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1; padding-bottom:3px}
.top nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.top nav a:not(.btn){white-space:nowrap; color:var(--sub); text-decoration:none; font-weight:500; font-size:.95rem; padding:8px 12px; border-radius:var(--r-in); transition:color .15s}
.top nav a:not(.btn):hover{color:#fff}
.top nav .btn{margin-left:8px}
.menu-btn{display:none; margin-left:auto; background:var(--box2); border:0; color:#fff; border-radius:var(--r-in); padding:8px; cursor:pointer}

/* portada */
.hero{padding:76px 0 84px; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center}
.eyebrow{display:inline-block; color:var(--lilac); background:var(--box); border-radius:999px; padding:6px 14px; font-size:.85rem; font-weight:500; margin-bottom:22px}
.hero h1{font-size:clamp(2.2rem,4.8vw,3.5rem); font-weight:700; margin-bottom:20px}
.grad{background:linear-gradient(90deg,var(--lilac),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{font-size:1.13rem; color:var(--sub); max-width:54ch; margin:0 0 30px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.price-hint{margin:18px 0 0; color:var(--muted); font-size:.92rem}
.price-hint s{margin-right:4px}

/* capturas */
.shot{margin:0; border-radius:var(--r); overflow:hidden; background:var(--box); box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.shots{position:relative; padding-bottom:40px}
.shots .desk{width:118%; max-width:none}
.shots .phone{position:absolute; left:-44px; bottom:0; width:25%; min-width:120px; border-radius:22px; box-shadow:0 0 0 6px var(--bg), 0 24px 50px -16px rgba(0,0,0,.9)}

/* números */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; background:var(--bg2); border-radius:var(--r); padding:6px}
.stats div{background:var(--bg3); border-radius:10px; padding:20px 16px; text-align:center}
.stats strong{display:block; color:#fff; font-size:1.55rem; font-weight:700; letter-spacing:-.02em}
.stats span{color:var(--muted); font-size:.9rem}

/* secciones */
section{padding:92px 0}
section.alt{background:var(--bg2)}
.head{text-align:center; max-width:680px; margin:0 auto 44px}
.kicker{display:inline-block; color:var(--accent); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px}
.head h2, .row h2{font-size:clamp(1.7rem,3.4vw,2.45rem); font-weight:700; margin-bottom:12px}
.head p{color:var(--sub); font-size:1.05rem; margin:0}

/* layouts */
.tabs{display:flex; justify-content:center; flex-wrap:wrap; gap:4px; width:max-content; max-width:100%; margin:0 auto 28px; background:var(--box); border-radius:999px; padding:5px}
.tabs button{font:inherit; font-size:.92rem; font-weight:500; color:var(--sub); background:none; border:0; border-radius:999px; padding:9px 18px; cursor:pointer; transition:color .15s, background .15s}
.tabs button:hover{color:#fff}
.tabs button[aria-selected=true]{background:var(--primary); color:#fff}
.gallery img{transition:opacity .2s}

/* filas de función */
.row{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; margin-bottom:96px}
.row.flip > div{order:2}
.row p{color:var(--sub); margin:0 0 20px}
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.ticks li{display:flex; align-items:center; gap:10px}
.ticks .i{width:18px; height:18px; color:var(--ok)}

/* funciones chicas: sin cajas, rejilla de texto */
.feats{display:grid; grid-template-columns:repeat(4,1fr); gap:40px 32px}
.feats .i{width:24px; height:24px; color:var(--lilac); margin-bottom:14px}
.feats h3{font-size:1.02rem; font-weight:600; margin-bottom:6px}
.feats p{margin:0; color:var(--muted); font-size:.93rem}

/* precio */
.offer{display:grid; grid-template-columns:1fr 1fr; background:var(--box); border-radius:18px; overflow:hidden}
.offer-l{padding:36px}
.offer-l h3{font-size:1.4rem}
.for{color:var(--muted); margin:4px 0 22px}
.price{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px}
.price s{flex-basis:100%; color:var(--muted); font-size:1rem}
.price .amt{font-size:3.1rem; font-weight:700; letter-spacing:-.03em; line-height:1.05; color:#fff}
.off{font-size:.8rem; font-weight:700; color:var(--bg); background:var(--ok); border-radius:6px; padding:3px 8px}
.bill{color:var(--muted); font-size:.9rem; margin:10px 0 26px}
.offer-l .btn{width:100%}
.offer-r{list-style:none; margin:0; padding:36px; background:var(--box2); display:grid; gap:14px; align-content:center}
.offer-r li{display:flex; align-items:center; gap:12px}
.offer-r .i{width:18px; height:18px; color:var(--lilac)}
.offer-r b{color:#fff; font-weight:600}
.note{text-align:center; color:var(--muted); font-size:.9rem; margin:26px auto 0; max-width:70ch}

/* pasos */
.steps{list-style:none; counter-reset:paso; padding:0; margin:0; display:grid; gap:12px}
.steps li{counter-increment:paso; position:relative; min-width:0; background:var(--box); border-radius:var(--r); padding:24px 26px 24px 78px}
.steps li::before{content:counter(paso); position:absolute; left:26px; top:22px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--box3); color:var(--lilac); font-weight:700}
.steps h3{font-size:1.08rem; margin-bottom:4px}
.steps p{margin:0; color:var(--sub)}
.steps pre{position:relative; margin:12px 0 0; background:var(--bg); border-radius:10px; padding:14px 52px 14px 16px; overflow-x:auto}
.steps pre code{background:none; padding:0; font-size:.92rem; color:var(--text)}
.copy{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:var(--box2); color:var(--sub); border:0; border-radius:8px; padding:7px; cursor:pointer}
.copy:hover, .copy.ok{color:#fff}
.copy .i{width:16px; height:16px}

/* preguntas */
.faq{max-width:800px; margin:0 auto; display:grid; gap:8px}
details{background:var(--box); border-radius:var(--r); transition:background .2s}
details[open]{background:var(--box2)}
summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:18px 22px; font-weight:500; color:#fff}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--lilac); font-size:1.4rem; line-height:1; transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0; padding:0 22px 20px; color:var(--sub)}

/* llamado final */
.band{border-radius:20px; padding:60px 32px; text-align:center; background:linear-gradient(135deg,var(--deep),#a13ee0)}
.band h2{font-size:clamp(1.6rem,3.4vw,2.35rem); margin-bottom:12px}
.band p{color:#efe9ff; max-width:58ch; margin:0 auto 28px}
.band .cta{justify-content:center}
.band .btn.ghost{background:rgba(255,255,255,.14); color:#fff}
.band .btn.ghost:hover{background:rgba(255,255,255,.22)}

/* pie */
footer{background:var(--bg2); padding:64px 0 28px; color:var(--muted); font-size:.93rem}
.fgrid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px}
footer .brand{margin-bottom:16px}
footer h4{font-size:.95rem; font-weight:600; margin-bottom:14px}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:#fff}
footer p{margin:0 0 10px; max-width:38ch}
.fbottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:48px; padding-top:24px; font-size:.85rem; box-shadow:inset 0 1px 0 var(--box)}

/* aparición al hacer scroll */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1; transform:none; transition:none}
}

@media (max-width:1000px){
  .menu-btn{display:inline-flex}
  .top nav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--bg2); padding:12px 20px 20px}
  .nav-open .top nav{display:flex}
  .top nav a:not(.btn){padding:12px}
  .top nav .btn{margin:8px 0 0}
  .hero .wrap, .row{grid-template-columns:1fr; gap:44px}
  .row.flip > div{order:0}
  .shots{max-width:640px; width:100%; margin:0 auto}
  .shots .desk{width:100%}
  .shots .phone{left:-10px}
  .feats{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding:48px 0 56px}
  section{padding:64px 0}
  .row{margin-bottom:64px}
  .stats{grid-template-columns:1fr 1fr}
  .feats{grid-template-columns:1fr; gap:28px}
  .offer{grid-template-columns:1fr}
  .offer-l, .offer-r{padding:26px}
  .tabs{border-radius:14px}
  .tabs button{padding:8px 12px}
  .steps li{padding:20px 18px 20px 64px}
  .steps li::before{left:18px; top:18px}
  .band{padding:44px 20px}
  .fgrid{grid-template-columns:1fr}
}