/* Página de documentación de la API — estilo del landing (mismas variables). */
.api-wrap { max-width: 840px; margin: 0 auto; padding: 24px 24px 90px; }

.api-head { text-align: center; padding: 48px 0 20px; }
.api-head .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 14px;
}
.api-head h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1; margin: 0 0 16px; color: var(--ink);
}
.api-head h1 em { font-style: italic; }
.api-head p {
  color: var(--ink-3); font-size: 18px; max-width: 620px; margin: 0 auto; line-height: 1.55;
}

.api-section { margin: 48px 0; }
.api-section > h2 {
  font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 18px; color: var(--ink);
}
.api-section h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin: 26px 0 8px;
}

.api-steps { padding-left: 22px; line-height: 1.7; color: var(--ink-2); }
.api-steps li { margin-bottom: 10px; }

pre {
  background: var(--ink); color: #f2f2ec; border-radius: 12px; padding: 16px 18px;
  overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; margin: 0 0 4px;
}
pre code { font-family: inherit; background: none; padding: 0; color: inherit; }
code {
  font-family: var(--mono); font-size: .88em; background: var(--paper-2);
  padding: 2px 6px; border-radius: 5px; color: var(--ink);
}

.api-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.api-table th, .api-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.api-table th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.api-table td.res { color: var(--ink); }
.api-table td.verb { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.api-table code { background: none; padding: 0; font-size: 13px; color: var(--ink-2); }

.api-prod { list-style: none; padding: 0; margin: 0; }
.api-prod li { padding: 12px 0 12px 28px; position: relative; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.5; }
.api-prod li::before { content: '✓'; position: absolute; left: 2px; color: #b0a157; font-weight: 600; }

.api-note {
  background: var(--paper-2); border-radius: 12px; padding: 14px 18px; font-size: 14px;
  color: var(--ink-3); line-height: 1.55; margin-top: 16px;
}

.api-cta { text-align: center; margin-top: 60px; }
.api-cta p { color: var(--ink-3); margin-bottom: 20px; }
.api-cta .cta { display: inline-block; }