/* ═══════════════════════════════════════════════════════════════
   API Facturación Perú — Estilos principales
   CODEIN & JNC E.I.R.L.
═══════════════════════════════════════════════════════════════ */

:root {
  --purple:     #7c3aed;
  --purple2:    #6d28d9;
  --purple-lt:  #ede9fe;
  --teal:       #0891b2;
  --teal-lt:    #e0f2fe;
  --dark:       #0f172a;
  --dark2:      #1e293b;
  --dark3:      #334155;
  --text:       #e2e8f0;
  --text2:      #94a3b8;
  --text3:      #64748b;
  --green:      #10b981;
  --amber:      #f59e0b;
  --red:        #ef4444;
  --border:     rgba(255,255,255,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--dark);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── TIPOGRAFÍA ──────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.3; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: 'Consolas','Courier New',monospace; font-size:.9em; background:rgba(124,58,237,.15); color:#c4b5fd; padding:2px 6px; border-radius:4px; }
pre { background:#0a0a18; border:1px solid var(--border); border-radius:8px; padding:16px; overflow-x:auto; font-size:13px; line-height:1.7; color:#e2e8f0; }
pre code { background:none; color:inherit; padding:0; }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container { max-width:1140px; margin:0 auto; padding:0 20px; }
.section { padding:80px 0; }
.section-sm { padding:50px 0; }

/* ── NAVBAR ──────────────────────────────────────────────────── */
.navbar {
  background:rgba(15,23,42,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1000;
  padding:0;
}
.navbar-inner {
  display:flex; align-items:center; gap:16px;
  height:64px; max-width:1140px; margin:0 auto; padding:0 20px;
}
.navbar-brand {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.navbar-brand img { height:36px; }
.brand-text { font-size:18px; font-weight:700; color:#fff; }
.brand-text span { color:var(--purple); }
.navbar-nav {
  display:flex; align-items:center; gap:4px; list-style:none; margin-left:auto;
}
.navbar-nav a {
  color:var(--text2); font-size:14px; font-weight:500;
  padding:8px 14px; border-radius:6px; transition:all .15s;
}
.navbar-nav a:hover { color:#fff; background:rgba(255,255,255,.06); text-decoration:none; }
.btn-token {
  background:var(--purple); color:#fff !important;
  border-radius:6px; padding:8px 18px !important;
}
.btn-token:hover { background:var(--purple2) !important; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  padding:100px 0 80px;
  background:radial-gradient(ellipse 80% 60% at 50% -20%, rgba(124,58,237,.18) 0%, transparent 70%);
  text-align:center;
  position:relative;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Ccircle cx='30' cy='30' r='.5' fill='rgba(124,58,237,.15)'/%3E%3C/svg%3E");
  opacity:.4;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3);
  color:#c4b5fd; font-size:13px; font-weight:500;
  padding:6px 14px; border-radius:20px; margin-bottom:24px;
}
.hero h1 { font-size:clamp(2rem,5vw,3.2rem); color:#fff; margin-bottom:20px; }
.hero h1 span { color:var(--purple); }
.hero p { font-size:18px; color:var(--text2); max-width:600px; margin:0 auto 36px; }
.hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── BOTONES ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:8px; font-size:14px; font-weight:600;
  cursor:pointer; border:none; transition:all .15s; text-decoration:none !important;
  white-space:nowrap;
}
.btn-primary { background:var(--purple); color:#fff; }
.btn-primary:hover { background:var(--purple2); transform:translateY(-1px); }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover { border-color:var(--purple); color:var(--purple); }
.btn-sm { padding:8px 16px; font-size:13px; }

/* ── TARJETAS API ────────────────────────────────────────────── */
.api-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.api-card {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:12px; padding:28px; position:relative; overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.api-card:hover { border-color:rgba(124,58,237,.5); transform:translateY(-3px); }
.api-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--purple),var(--teal));
}
.card-icon {
  width:48px; height:48px; border-radius:10px;
  background:rgba(124,58,237,.15); display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:16px;
}
.api-card h3 { font-size:16px; color:#fff; margin-bottom:8px; }
.api-card p { font-size:13px; color:var(--text2); margin-bottom:16px; line-height:1.7; }
.card-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.badge {
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600;
  letter-spacing:.3px;
}
.badge-purple { background:rgba(124,58,237,.2); color:#c4b5fd; border:1px solid rgba(124,58,237,.3); }
.badge-teal   { background:rgba(8,145,178,.2);  color:#7dd3fc; border:1px solid rgba(8,145,178,.3); }
.badge-green  { background:rgba(16,185,129,.2); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.card-precio {
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; background:rgba(124,58,237,.1); border-radius:8px;
  margin-top:16px;
}
.precio-num { font-size:22px; font-weight:700; color:var(--purple); }
.precio-txt { font-size:12px; color:var(--text2); }

/* ── DEMO DE CONSULTA ────────────────────────────────────────── */
.demo-box {
  background:var(--dark2); border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.demo-tabs {
  display:flex; border-bottom:1px solid var(--border);
}
.demo-tab {
  padding:14px 20px; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--text2); border-bottom:2px solid transparent; transition:all .15s;
  background:none; border-top:none; border-left:none; border-right:none;
}
.demo-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.demo-panel { display:none; padding:24px; }
.demo-panel.active { display:block; }
.demo-form { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.demo-input {
  flex:1; min-width:180px; background:var(--dark3); border:1px solid var(--border);
  border-radius:6px; padding:10px 14px; color:var(--text); font-size:14px; outline:none;
  transition:border-color .15s;
}
.demo-input:focus { border-color:var(--purple); }
.demo-result {
  background:var(--dark); border:1px solid var(--border); border-radius:8px;
  padding:16px; min-height:80px; font-family:'Consolas',monospace; font-size:13px;
  color:var(--text2); line-height:1.7; display:none;
}
.demo-result.visible { display:block; }
.json-key   { color:#7dd3fc; }
.json-str   { color:#6ee7b7; }
.json-num   { color:#fbbf24; }
.json-bool  { color:#fb923c; }
.status-ok  { color:var(--green); font-weight:600; }
.status-err { color:var(--red); font-weight:600; }

/* ── TIPO DE CAMBIO ──────────────────────────────────────────── */
.tc-widget {
  background:var(--dark2); border:1px solid var(--border); border-radius:12px;
  padding:24px; text-align:center;
}
.tc-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.tc-card {
  background:var(--dark3); border-radius:8px; padding:16px;
}
.tc-label { font-size:11px; color:var(--text2); letter-spacing:.8px; text-transform:uppercase; }
.tc-value { font-size:28px; font-weight:700; color:#fff; margin-top:4px; }
.tc-sub   { font-size:11px; color:var(--text3); }

/* ── PRECIOS ─────────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.pricing-card {
  background:var(--dark2); border:1px solid var(--border); border-radius:12px; padding:28px;
}
.pricing-card.featured { border-color:rgba(124,58,237,.6); position:relative; }
.pricing-card.featured::before {
  content:'MÁS POPULAR'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--purple); color:#fff; font-size:10px; font-weight:700; letter-spacing:1px;
  padding:4px 14px; border-radius:20px;
}
.price-amount { font-size:42px; font-weight:700; color:#fff; }
.price-amount sup { font-size:20px; vertical-align:super; }
.price-amount span { font-size:14px; color:var(--text2); }
.price-features { list-style:none; margin:20px 0; }
.price-features li { padding:8px 0; font-size:13px; color:var(--text2); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.price-features li::before { content:'✓'; color:var(--green); font-weight:700; }

/* ── CÓDIGO ──────────────────────────────────────────────────── */
.code-tabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.code-tab {
  padding:6px 14px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer;
  background:var(--dark3); color:var(--text2); border:none; transition:all .15s;
}
.code-tab.active { background:var(--purple); color:#fff; }
.code-block { display:none; }
.code-block.active { display:block; }

/* ── ENDPOINT TABLE ──────────────────────────────────────────── */
.endpoints-table { width:100%; border-collapse:collapse; font-size:13px; }
.endpoints-table th {
  background:var(--dark3); padding:12px 16px; text-align:left;
  font-size:11px; color:var(--text2); letter-spacing:.8px; text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.endpoints-table td { padding:12px 16px; border-bottom:1px solid var(--border); color:var(--text2); }
.endpoints-table tr:hover td { background:rgba(255,255,255,.02); }
.method-post { background:rgba(124,58,237,.2); color:#c4b5fd; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.method-get  { background:rgba(16,185,129,.2); color:#6ee7b7; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.7); z-index:9999;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.visible { display:flex; }
.modal {
  background:var(--dark2); border:1px solid var(--border); border-radius:16px;
  padding:32px; max-width:500px; width:100%; position:relative;
}
.modal h3 { font-size:18px; color:#fff; margin-bottom:6px; }
.modal p  { font-size:13px; color:var(--text2); margin-bottom:20px; }
.modal-close { position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text2); font-size:20px; cursor:pointer; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:12px; color:var(--text2); margin-bottom:6px; }
.form-group input, .form-group textarea {
  width:100%; background:var(--dark3); border:1px solid var(--border);
  border-radius:6px; padding:10px 14px; color:var(--text); font-size:14px; outline:none;
}
.form-group input:focus, .form-group textarea:focus { border-color:var(--purple); }
.token-result {
  background:var(--dark); border:1px solid rgba(124,58,237,.4); border-radius:8px;
  padding:16px; margin-top:16px; font-family:monospace; font-size:13px; word-break:break-all;
  color:#c4b5fd; display:none;
}
.yape-box { text-align:center; padding:20px 0; }
.yape-num { font-size:22px; font-weight:700; color:var(--purple); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background:var(--dark2); border-top:1px solid var(--border);
  padding:50px 0 24px;
}
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; margin-bottom:40px; }
.footer h4 { font-size:13px; font-weight:600; color:#fff; margin-bottom:14px; letter-spacing:.3px; }
.footer ul { list-style:none; }
.footer ul li { margin-bottom:8px; }
.footer ul a { font-size:13px; color:var(--text2); transition:color .15s; }
.footer ul a:hover { color:#fff; text-decoration:none; }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--text3);
}

/* ── ALERTA ──────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:8px; font-size:13px; margin-top:12px; }
.alert-success { background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.alert-error   { background:rgba(239,68,68,.15);  color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.alert-info    { background:rgba(124,58,237,.15); color:#c4b5fd; border:1px solid rgba(124,58,237,.3); }

/* ── ANIMACIONES ─────────────────────────────────────────────── */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .5s,transform .5s; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding:70px 0 50px; }
  .hero h1 { font-size:2rem; }
  .navbar-nav { display:none; }
  .section { padding:50px 0; }
  .tc-grid { grid-template-columns:1fr 1fr; }
  pre { font-size:11px; }
  .hero-btns { flex-direction:column; align-items:center; }
}

/* ── LOADING SPINNER ─────────────────────────────────────────── */
.spinner {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── HIGHLIGHT JS ────────────────────────────────────────────── */
.hljs { background:transparent !important; }