/* ============================================================
   theaimotor design system v1.0
   Fuente de verdad: brand/tokens.json. Extraído de la landing en vivo.
   Un solo archivo para las tres superficies:
     data-theme="screen" (default) - web, deck, pantalla
     data-theme="paper"            - documentos, PDF, impresión
   Uso: <link rel="stylesheet" href="aimotor.css">  +  fuentes de Google.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
[data-theme="screen"] {
  --bg:#0E1116;  --surface:#161B22;  --surface-accent:#121A15;
  --border:#232A34; --border-accent:#2E5240;
  --text:#F2F4F7; --muted:#8B95A5; --faint:#3D4654;
  --accent:#7EE2A8; --accent-fill:#7EE2A8; --on-accent:#0E1116;
  --glow:rgba(126,226,168,.28);

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --r-pill:999px; --r-card:16px; --r-panel:24px;
  --container:1200px; --prose:680px; --prose-wide:760px;
  --section-y:130px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Papel: mismo sistema, tinta invertida. El verde claro no lee sobre blanco,
   así que el acento de texto se oscurece y el verde original queda para rellenos. */
[data-theme="paper"] {
  --bg:#FFFFFF;  --surface:#F4F6F5;  --surface-accent:#EAF7F0;
  --border:#DFE3E8; --border-accent:#9BD9BA;
  --text:#0E1116; --muted:#5C6675; --faint:#9AA3B0;
  --accent:#116B45; --accent-fill:#7EE2A8; --on-accent:#0E1116;
  --glow:transparent;
  --section-y:64px;
}

* { box-sizing:border-box; }
html { overflow-x:hidden; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--text); text-decoration:none; }
a:hover { color:var(--accent); }

/* ---------- Layout ---------- */
.container { max-width:var(--container); margin:0 auto; padding:0 24px; }
.prose { max-width:var(--prose); }
.prose-wide { max-width:var(--prose-wide); }
.section { padding:var(--section-y) 24px; border-top:1px solid var(--border); }
.section:first-of-type { border-top:none; }
.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-tight { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

/* ---------- Tipografía ---------- */
h1, .h1 {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(44px,6.6vw,92px); line-height:1.02; letter-spacing:-.03em;
  margin:0 0 28px; text-wrap:balance;
}
h2, .h2 {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,4vw,52px); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 32px; text-wrap:balance;
}
h3, .h3 {
  font-family:var(--font-display); font-weight:700;
  font-size:24px; line-height:1.25; letter-spacing:-.02em; margin:0 0 14px;
}
p { margin:0 0 24px; }
.lead { font-size:20px; line-height:1.55; color:var(--muted); }
.small { font-size:15px; line-height:1.6; }
.fine  { font-size:14px; line-height:1.6; color:var(--muted); }
.muted { color:var(--muted); }
strong { font-weight:500; color:var(--text); }

/* Etiqueta de sección: // 03 · quién  */
.label {
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); margin-bottom:32px; display:block;
}
.label .n { color:var(--accent); }
/* Prompt de terminal: ~/empresa $ siguiente_paso */
.eyebrow { font-family:var(--font-mono); font-size:13px; color:var(--accent); margin-bottom:24px; }
/* Anotación humana en minúsculas: // todo remoto. */
.note { font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.price { font-family:var(--font-mono); font-size:28px; margin:auto 0 0; }
.price-accent { color:var(--accent); }

/* ---------- Botón ---------- */
.btn {
  display:inline-block; font-family:var(--font-mono); font-size:13px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em;
  background:var(--accent-fill); color:var(--on-accent);
  padding:16px 28px; border-radius:var(--r-pill); border:none;
  transition:box-shadow .25s ease, transform .25s var(--ease);
}
.btn:hover { color:var(--on-accent); box-shadow:0 0 32px var(--glow); }
.btn-sm { padding:11px 20px; font-size:12px; }

/* ---------- Tarjeta ---------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:36px;
  transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.card-tight { padding:28px; }
.card:hover { transform:translateY(-4px); border-color:var(--border-accent); }
[data-theme="paper"] .card:hover { transform:none; }
.card-accent { background:var(--surface-accent); border-color:var(--border-accent); }
.card-accent .label { color:var(--accent); }

/* ---------- Lista numerada (qué cambia para ti) ---------- */
.numbered > div {
  border-top:1px solid var(--border); padding:24px 0;
  display:grid; grid-template-columns:56px 1fr; gap:20px;
}
.numbered > div:last-child { border-bottom:1px solid var(--border); }
.numbered .n { font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.numbered p { margin:0; color:var(--muted); font-size:17px; }

/* ---------- Terminal (el motivo de marca) ---------- */
.terminal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-panel); padding:28px;
  font-family:var(--font-mono); font-size:13px; line-height:1.9;
  color:var(--muted); overflow-wrap:anywhere;
}
.terminal .dots { display:flex; gap:6px; margin-bottom:16px; }
.terminal .dots span { width:10px; height:10px; border-radius:50%; background:var(--border); }
.terminal .dots span:last-child { background:var(--accent-fill); }
.terminal .you    { color:var(--accent); }
.terminal .claude { color:var(--text); }
.terminal .cmt    { color:var(--faint); }

/* ---------- Tabla ---------- */
table { width:100%; border-collapse:collapse; font-size:15px; }
th {
  text-align:left; font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  padding:10px 12px; border-bottom:1px solid var(--border);
}
td { padding:12px; border-bottom:1px solid var(--border); vertical-align:top; }
th:first-child, td:first-child { padding-left:0; }
th:last-child,  td:last-child  { padding-right:0; }

/* ---------- Reveal opcional (progressive enhancement) ---------- */
.reveal { opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

@media (max-width:820px) {
  :root { --section-y:80px; }
  .terminal { padding:20px; font-size:12px; border-radius:var(--r-card); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  .card, .btn { transition:none; }
  .card:hover { transform:none; }
}
@media print {
  .section { padding:24px 0; break-inside:avoid; }
  .card:hover { transform:none; box-shadow:none; }
  a { color:var(--text); }
}