/* Web personal — minimalista y profesional. Claro por defecto, modo oscuro, un acento.
   Monocromo + verde, Inter + JetBrains Mono, sin gradientes ni sombras. */
:root {
  --bg:#ffffff; --bg2:#f6f7f8; --fg:#111312; --muted:#5a625e;
  --border:#e3e6e3; --card:#ffffff; --accent:#15803d; --accent-soft:rgba(21,128,61,.09);
  --btn-bg:#111312; --btn-fg:#ffffff; --radius:8px; --radius-lg:12px; --maxw:1060px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
html[data-theme='dark'] {
  --bg:#0d0f0e; --bg2:#161917; --fg:#ecefec; --muted:#9aa39d; --border:#262b28; --card:#141715;
  --accent:#4ade80; --accent-soft:rgba(74,222,128,.12); --btn-bg:#ecefec; --btn-fg:#0d0f0e;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); color:var(--fg); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.15; letter-spacing:-.02em; margin:0; font-weight:600; }
.container { max-width:var(--maxw); margin:0 auto; padding-inline:22px; }

/* ---------- cabecera ---------- */
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.head { display:flex; align-items:center; gap:20px; padding:14px 22px; }
.brand { font-weight:700; font-size:17px; color:var(--fg); letter-spacing:-.02em; }
.brand span { color:var(--accent); }
.menu { display:flex; gap:20px; margin-left:auto; }
.menu a { color:var(--muted); font-size:14px; }
.menu a:hover { color:var(--fg); text-decoration:none; }
.head-actions { display:flex; align-items:center; gap:8px; }
@media (max-width:720px) {
  .head { flex-wrap:wrap; row-gap:2px; }
  .menu { order:3; width:100%; margin-left:0; gap:16px; overflow-x:auto; padding:4px 0 2px; }
}

.btn { display:inline-block; font:inherit; font-weight:600; font-size:14px; cursor:pointer; border:1px solid var(--btn-bg); background:var(--btn-bg); color:var(--btn-fg); border-radius:var(--radius); padding:10px 16px; }
.btn:hover { opacity:.9; text-decoration:none; }
.btn.ghost { background:transparent; border-color:var(--border); color:var(--fg); }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn.sm { padding:7px 13px; font-size:13.5px; }
.icon-btn { background:transparent; border:1px solid var(--border); color:var(--fg); width:36px; height:36px; border-radius:var(--radius); display:grid; place-items:center; cursor:pointer; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ---------- hero ---------- */
.hero { padding:84px 22px 60px; max-width:860px; }
.eyebrow { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 20px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.hero h1 { font-size:clamp(32px,5.6vw,58px); letter-spacing:-.03em; max-width:15ch; }
.hero h1 .hl { color:var(--accent); }
.sub { color:var(--muted); font-size:clamp(15px,2vw,17.5px); max-width:60ch; margin:20px 0 0; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0; }
.meta { list-style:none; display:flex; flex-wrap:wrap; gap:10px 18px; padding:0; margin:34px 0 0; }
.meta li { font-family:var(--mono); font-size:12px; color:var(--muted); }

/* ---------- secciones ---------- */
section { padding:56px 0; }
.section-head { margin-bottom:26px; }
.section-head h2 { font-size:clamp(22px,3vw,28px); }
.section-head .sub { margin-top:8px; font-size:15.5px; }

.grid-3 { display:grid; gap:16px; }
@media (min-width:760px) { .grid-3 { grid-template-columns:repeat(3,1fr); } }

.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; }
.card h3 { font-size:16.5px; margin-bottom:8px; }
.card p { color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; }
.ico { width:26px; height:26px; color:var(--accent); margin-bottom:16px; }
.price { font-family:var(--mono); font-size:14px; color:var(--fg) !important; margin-top:16px !important; }
.price span { color:var(--muted); font-size:12.5px; }

/* demos */
.demo { display:block; color:inherit; transition:border-color .18s ease, transform .18s ease; }
.demo:hover { text-decoration:none; border-color:var(--accent); transform:translateY(-2px); }
.thumb { height:120px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg2); display:grid; place-items:center; margin-bottom:16px; }
.thumb svg { width:38px; height:38px; color:var(--muted); }
.demo .link { color:var(--accent); font-weight:600; margin-top:14px; }

/* proceso */
.steps { list-style:none; counter-reset:s; padding:0; margin:0; display:grid; gap:18px; }
@media (min-width:760px) { .steps { grid-template-columns:repeat(4,1fr); } }
.steps li { counter-increment:s; border-left:2px solid var(--accent); padding-left:16px; }
.steps li::before { content:counter(s,decimal-leading-zero); display:block; font-family:var(--mono); font-size:12px; color:var(--accent); margin-bottom:6px; }
.steps b { display:block; margin-bottom:4px; }
.steps span { color:var(--muted); font-size:14px; }

/* precios */
.table-card { padding:8px 24px; overflow-x:auto; }
.table-card table { width:100%; min-width:max-content; border-collapse:collapse; }
.table-card th, .table-card td { text-align:left; padding:15px 10px; border-bottom:1px solid var(--border); font-size:14.5px; vertical-align:top; }
.table-card tr:last-child td { border-bottom:0; }
.table-card th { font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:500; }
.table-card td:last-child { font-family:var(--mono); }
.nowrap { white-space:nowrap; }

/* contacto */
.contact { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--accent-soft); padding:40px 32px; text-align:center; }
.contact h2 { font-size:clamp(22px,3vw,30px); }
.contact .sub { margin:10px auto 0; }
.contact .cta-row { justify-content:center; }
.contact .muted { margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.muted { color:var(--muted); }

/* pie */
footer { border-top:1px solid var(--border); margin-top:30px; padding:26px 22px; }
.foot { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.foot span { color:var(--muted); font-size:13px; }
.foot-links { display:flex; gap:16px; }
.foot-links a { font-size:13px; }

/* accesibilidad: foco visible y movimiento reducido */
a:focus-visible, .btn:focus-visible, .icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius); }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .demo { transition:none; }
}