/* Identidad visual alineada con rockingdata.ai: fondo negro, cian #00D1FF, Archivo + Inter */
@font-face { font-family:"Archivo"; src:url("/fonts/archivo.woff2") format("woff2"); font-weight:500 800; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/fonts/inter.woff2") format("woff2"); font-weight:400 600; font-display:swap; }

:root {
  --bg:#000; --surface:#0b0d10; --line:rgba(255,255,255,.1);
  --fg:#fff; --muted:rgba(255,255,255,.65);
  --primary:#00D1FF; --secondary:#819CFF; --accent:#B478FB;
  --grad:linear-gradient(90deg,#00D1FF,#819CFF 55%,#B478FB);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:16px/1.65 "Inter",system-ui,sans-serif; color:var(--muted); background:var(--bg); }
h1,h2,h3 { font-family:"Archivo",system-ui,sans-serif; color:var(--fg); line-height:1.15; letter-spacing:-.02em; }
a { color:var(--primary); }
a:hover { color:#fff; }
strong { color:var(--fg); }

/* Header */
header { border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); z-index:10; }
nav { max-width:1120px; margin:0 auto; padding:.9rem 1.25rem; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1.5rem; }
nav .logo { display:flex; align-items:center; gap:.7rem; margin-right:auto; text-decoration:none; color:var(--fg); font:800 1.15rem "Archivo",sans-serif; }
nav .logo img { height:26px; width:auto; }
nav .logo span { border-left:1px solid var(--line); padding-left:.7rem; }
nav a:not(.logo) { color:var(--muted); text-decoration:none; font-weight:500; font-size:.92rem; }
nav a:not(.logo):hover { color:var(--primary); }

/* Páginas legales */
main { max-width:820px; margin:2.5rem auto; padding:2.25rem 1.75rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
main h1 { margin-top:0; font-size:2.2rem; }
main h2 { margin-top:2rem; font-size:1.3rem; color:var(--primary); }
.updated { font-size:.9rem; }
li { margin:.35rem 0; }
code { background:rgba(255,255,255,.08); color:var(--fg); padding:.1rem .4rem; border-radius:4px; }

/* Landing */
.hero { max-width:1120px; margin:0 auto; padding:5.5rem 1.25rem 3rem; }
.eyebrow { display:inline-block; font:600 .8rem "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); margin-bottom:1rem; }
.hero h1 { font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; margin:0 0 1.25rem; max-width:860px; }
.hero h1 em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:1.2rem; max-width:680px; }
.btn { display:inline-block; background:var(--primary); color:#000; padding:.85rem 1.7rem; border-radius:999px; text-decoration:none; font-weight:600; margin:.5rem .75rem 0 0; transition:transform .15s,box-shadow .15s; }
.btn:hover { color:#000; transform:translateY(-1px); box-shadow:0 0 24px rgba(0,209,255,.45); }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); }
.btn.ghost:hover { color:var(--primary); border-color:var(--primary); box-shadow:none; }

.wrap { max-width:1120px; margin:0 auto; padding:0 1.25rem 1rem; }
.wrap h2 { font-size:clamp(1.7rem,3.5vw,2.4rem); margin:4rem 0 .5rem; }
.lead { max-width:640px; margin:0 0 1.5rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin-top:1.25rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem; transition:border-color .2s,transform .2s; }
.card:hover { border-color:var(--primary); transform:translateY(-2px); }
.card .tag { display:inline-block; font:600 .72rem "Inter",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--secondary); margin-bottom:.6rem; }
.card h3 { margin:0 0 .5rem; font-size:1.25rem; }
.card p { margin:0; font-size:.95rem; }

.steps { list-style:none; counter-reset:s; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.steps li { counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem; margin:0; }
.steps li::before { content:"0" counter(s); display:block; font:800 2rem "Archivo",sans-serif; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.4rem; }

.tags span { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:.3rem 1rem; margin:.25rem .35rem .25rem 0; font-size:.9rem; color:var(--fg); }

.cta { margin:4rem 0 2rem; padding:3rem 1.75rem; border:1px solid var(--line); border-radius:24px; text-align:center; background:radial-gradient(ellipse at top,rgba(129,156,255,.18),transparent 70%),var(--surface); }
.cta h2 { margin-top:0; }
.cta p { max-width:560px; margin:0 auto 1.25rem; }

/* Footer */
footer { max-width:1120px; margin:3rem auto 0; padding:1.5rem 1.25rem 2.5rem; border-top:1px solid var(--line); font-size:.85rem; text-align:center; }
footer a { color:var(--muted); margin:0 .6rem; text-decoration:none; }
footer a:hover { color:var(--primary); }