/* Gemy Studio — documentos legales. Paleta Gema, la misma de la tienda. */
@font-face{font-family:Rubik; src:url(/web/fuentes/rubik.woff2) format("woff2"); font-weight:300 900; font-display:swap}
:root{
  --bg:#0a0812; --bg2:#0f0c19; --box:#16121f; --box2:#1d1829;
  --text:#ece9f5; --sub:#a59fba; --muted:#6f6886; --lilac:#c4b5fd; --primary:#8b5cf6;
  --radius:14px; --font:Rubik, ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:90px}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased}
a{color:var(--lilac); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}

.topbar{position:sticky; top:0; z-index:20; background:rgba(10,8,18,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.brand img{height:26px; width:auto; display:block}
.btn{display:inline-block; background:var(--primary); color:#fff; font-weight:500; font-size:.9rem; padding:8px 16px; border-radius:9px; white-space:nowrap}
.btn:hover{text-decoration:none; background:#9b72f8}

.hero{padding:56px 0 32px; background:var(--bg2)}
.hero h1{margin:0 0 10px; font-size:2.4rem; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.hero p{margin:0; color:var(--sub)}
.updated{display:inline-block; margin-top:14px; font-size:.82rem; color:var(--muted); background:var(--box); border-radius:999px; padding:4px 12px}
.docnav{display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0}
.docnav a{font-size:.9rem; color:var(--sub); background:var(--box); border-radius:999px; padding:6px 14px}
.docnav a:hover{color:var(--text); text-decoration:none}
.docnav a[aria-current="page"]{background:var(--primary); color:#fff}

.layout{display:grid; grid-template-columns:240px 1fr; gap:40px; padding:40px 0 64px; align-items:start}
.toc{position:sticky; top:88px; font-size:.88rem}
.toc strong{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc li{counter-increment:toc; margin-bottom:6px}
.toc a{color:var(--sub); display:block; padding:3px 0 3px 26px; position:relative}
.toc a::before{content:counter(toc); position:absolute; left:0; color:var(--muted); font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--text); text-decoration:none}

main section{background:var(--box); border-radius:var(--radius); padding:24px 28px; margin-bottom:12px}
main h2{margin:0 0 12px; font-size:1.15rem; font-weight:700; letter-spacing:-.01em}
main h2 .num{color:var(--muted); margin-right:8px}
main p{margin:0 0 12px; color:#ddd9e8}
main p:last-child, main ul:last-child{margin-bottom:0}
main ul{margin:0 0 12px; padding-left:20px; color:#ddd9e8}
main li{margin-bottom:6px}
main li::marker{color:var(--muted)}
main strong{color:#fff}
code{background:var(--box2); border-radius:6px; padding:1px 6px; font-size:.88em}
.callout{border-left:3px solid var(--primary); background:var(--box2); border-radius:8px; padding:14px 18px; color:var(--sub); font-size:.92rem}

footer{background:var(--bg2); padding:28px 0 48px; color:var(--muted); font-size:.88rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between}
footer nav{display:flex; flex-wrap:wrap; gap:18px}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}

@media (max-width:860px){
  .layout{grid-template-columns:1fr; gap:24px; padding-top:28px}
  .toc{position:static; background:var(--box); border-radius:var(--radius); padding:16px 18px}
  .hero{padding-top:36px}
  .hero h1{font-size:1.8rem}
  main section{padding:20px}
}