/* Hoja compartida de grivun.com: portada (en/es), privacidad y guías. */
:root { --bg:#0f1117; --card:#171a23; --text:#f3f4f6; --muted:#9ca3af; --line:#262b38; --accent:#6366f1; --accent-2:#818cf8; --code:#1c2030; }
@media (prefers-color-scheme: light) { :root { --bg:#f6f7fb; --card:#fff; --text:#111827; --muted:#6b7280; --line:#e5e7eb; --accent:#4f46e5; --accent-2:#4338ca; --code:#eef0f6; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 760px; }
header { display:flex; justify-content:space-between; align-items:center; padding:18px 0; gap:12px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; text-decoration:none; color:var(--text); }
nav a { margin-left:18px; text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; }
.hero { padding: 56px 0 36px; text-align:center; }
.hero h1 { font-size: clamp(30px, 5vw, 48px); line-height:1.15; margin:0 0 14px; letter-spacing:-0.01em; }
.hero p { font-size: 18px; color:var(--muted); max-width: 640px; margin: 0 auto 26px; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:14px 22px; border-radius:12px; font-weight:700; text-decoration:none; }
.btn:hover { background:var(--accent-2); }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); margin-left:10px; }
.small { font-size:13px; color:var(--muted); }
.muted { color:var(--muted); font-size:14px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin: 30px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; }
.card h3 { margin:0 0 8px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
a.card { color:inherit; text-decoration:none; display:block; }
a.card:hover { border-color:var(--accent); }
section { padding: 30px 0; }
h2 { font-size:26px; margin:0 0 10px; }
.shots { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; align-items:start; }
.shots img { width:100%; height:auto; border-radius:14px; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:15px; }
td, th { padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:13px; }
.price { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.price .card { text-align:center; }
.price b { display:block; font-size:30px; margin:6px 0; }
.tag { display:inline-block; font-size:12px; font-weight:700; background:var(--accent); color:#fff; border-radius:999px; padding:3px 10px; }
details { border-bottom:1px solid var(--line); padding:12px 0; }
summary { cursor:pointer; font-weight:600; }
footer { padding: 30px 0 50px; color:var(--muted); font-size:14px; }
hr { border:0; border-top:1px solid var(--line); margin:40px 0; }
li { margin:4px 0; }

/* Páginas de texto: privacidad y guías */
.article { padding: 10px 0 30px; }
.article .crumbs { font-size:13px; color:var(--muted); margin:0 0 18px; }
.article .crumbs a { color:var(--muted); text-decoration:none; }
.article .crumbs a:hover { color:var(--accent); }
.article h1 { font-size: clamp(28px, 4.2vw, 40px); line-height:1.15; margin:0 0 12px; letter-spacing:-0.01em; }
.article .lead { font-size:19px; color:var(--muted); margin:0 0 8px; }
.article .meta { font-size:13px; color:var(--muted); margin:0 0 30px; }
.article h2 { font-size:23px; margin:36px 0 10px; }
.article h3 { font-size:18px; margin:26px 0 8px; }
.article p, .article li { font-size:16.5px; line-height:1.65; }
.article ul, .article ol { padding-left:22px; }
.article img { width:100%; height:auto; border-radius:14px; border:1px solid var(--line); margin:18px 0; }
.article code { background:var(--code); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:0.92em; }
.article pre { background:var(--code); border:1px solid var(--line); border-radius:12px; padding:14px 16px; overflow-x:auto; }
.article pre code { background:none; border:0; padding:0; }
.article table { margin:14px 0 6px; }
.cta { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; margin:36px 0 10px; text-align:center; }
.cta h2 { margin-top:0; }
.cta p { color:var(--muted); max-width:560px; margin:0 auto 18px; }
.related { margin-top:36px; }
.related h2 { font-size:20px; }
.related .grid { margin-top:12px; }

/* Guías: figuras, rótulos y cajas */
.fig { margin:26px 0; }
.fig svg { width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line); background:var(--card); }
.fig.banner svg { border:0; }
.fig figcaption { font-size:13.5px; color:var(--muted); margin-top:10px; line-height:1.5; }
.fig .ft { fill:var(--text); } .fig .fm { fill:var(--muted); } .fig .fw { fill:#fff; }
.fig .fa { fill:var(--accent); } .fig .fa2 { fill:var(--accent-2); } .fig .fbg { fill:var(--code); }
.fig .fok { fill:#16a34a; } .fig .fwarn { fill:#d97706; } .fig .fbad { fill:#dc2626; }
.fig .fl { stroke:var(--line); } .fig .sa { stroke:var(--accent); } .fig .sm { stroke:var(--muted); } .fig .sok { stroke:#16a34a; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin:22px 0 30px; }
.stat { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; padding:16px 18px; }
.stat b { display:block; font-size:32px; line-height:1.05; color:var(--accent); letter-spacing:-0.02em; margin-bottom:6px; }
.stat span { font-size:13.5px; color:var(--muted); line-height:1.45; display:block; }
.callout { background:var(--code); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:0 14px 14px 0; padding:16px 20px; margin:22px 0; }
.callout.warn { border-left-color:#d97706; } .callout.ok { border-left-color:#16a34a; }
.callout .lbl { display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.callout.warn .lbl { color:#d97706; } .callout.ok .lbl { color:#16a34a; }
.callout p, .callout li { margin:6px 0; font-size:15.5px; }
.callout ul { margin:4px 0 0; padding-left:20px; }
.article ol.steps { list-style:none; padding:0; counter-reset:step; margin:18px 0; }
.article ol.steps li { counter-increment:step; position:relative; padding:4px 0 4px 58px; margin:0 0 14px; min-height:44px; }
.article ol.steps li::before { content:counter(step); position:absolute; left:0; top:2px; width:42px; height:42px; border-radius:12px; background:var(--accent); color:#fff; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; }
.tag.soft { background:var(--code); color:var(--accent); border:1px solid var(--line); margin-bottom:10px; }