/* ============================================================
   json.com.pe — Estilos principales
   Tema: #0a0a1a bg | #ffffff texto | #00e5ff cyan | #7c4dff purple
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --bg-dark:        #0a0a1a;
  --bg-card:        #111128;
  --bg-section:     #0d0d22;
  --bg-nav:         rgba(10,10,26,.95);
  --color-cyan:     #00e5ff;
  --color-purple:   #7c4dff;
  --color-text:     #ffffff;
  --color-muted:    #9fa3b1;
  --color-border:   rgba(255,255,255,.08);
  --gradient:       linear-gradient(135deg, var(--color-cyan), var(--color-purple));
  --gradient-glow:  linear-gradient(135deg, rgba(0,229,255,.15), rgba(124,77,255,.15));
  --font:           'Inter', system-ui, -apple-system, sans-serif;
  --radius:         12px;
  --radius-lg:      18px;
  --shadow:         0 8px 32px rgba(0,0,0,.35);
  --shadow-cyan:    0 0 24px rgba(0,229,255,.2);
}

/* ── Reset / Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box }

html { scroll-behavior:smooth }

body {
  font-family:    var(--font);
  background:     var(--bg-dark);
  color:          var(--color-text);
  line-height:    1.6;
  overflow-x:     hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar personalizada ─────────────────────────────────── */
::-webkit-scrollbar          { width:6px; height:6px }
::-webkit-scrollbar-track    { background: var(--bg-dark) }
::-webkit-scrollbar-thumb    { background: var(--color-purple); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background: var(--color-cyan) }

/* ── Utilidades ──────────────────────────────────────────────── */
.text-cyan   { color: var(--color-cyan)   !important }
.text-purple { color: var(--color-purple) !important }
.x-small     { font-size: .7rem }

/* ── Gradiente animado en texto ──────────────────────────────── */
@keyframes gradient-flow {
  0%   { background-position: 0%   50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0%   50% }
}

.gradient-text {
  background:              linear-gradient(135deg, #00e5ff 0%, #7c4dff 50%, #00e5ff 100%);
  background-size:         200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  animation:               gradient-flow 4s ease infinite;
}

/* ── Logo ────────────────────────────────────────────────────── */
.logo-text {
  font-weight: 800;
  font-size:   1.4rem;
  letter-spacing: -0.5px;
  color: #fff;
  text-decoration: none;
}
.logo-dot { color: var(--color-cyan) }

/* ── Botones ─────────────────────────────────────────────────── */
.btn-cyan {
  background:   var(--color-cyan);
  color:        #0a0a1a;
  font-weight:  600;
  border:       none;
  border-radius: var(--radius);
  transition:   all .25s ease;
}
.btn-cyan:hover, .btn-cyan:focus {
  background:   #00ccee;
  color:        #0a0a1a;
  box-shadow:   var(--shadow-cyan);
  transform:    translateY(-1px);
}

.btn-outline-cyan {
  border:      1px solid var(--color-cyan);
  color:       var(--color-cyan);
  background:  transparent;
  font-weight: 600;
  border-radius: var(--radius);
  transition:  all .25s ease;
}
.btn-outline-cyan:hover, .btn-outline-cyan:focus {
  background: rgba(0,229,255,.12);
  color:      var(--color-cyan);
  box-shadow: var(--shadow-cyan);
}

/* ── Navbar ──────────────────────────────────────────────────── */
#mainNav {
  background:     var(--bg-nav);
  backdrop-filter: blur(12px);
  border-bottom:  1px solid var(--color-border);
  transition:     background .3s;
  padding:        .75rem 0;
}
#mainNav .nav-link {
  color:          var(--color-muted);
  font-size:      .9rem;
  font-weight:    500;
  padding:        .4rem .75rem;
  border-radius:  8px;
  transition:     color .2s, background .2s;
}
#mainNav .nav-link:hover,
#mainNav .nav-link.active {
  color:      var(--color-cyan);
  background: rgba(0,229,255,.08);
}

/* Quick Login dropdown */
.dropdown-login {
  background:  var(--bg-card);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:  var(--shadow);
}
.dropdown-login .dropdown-header { color: var(--color-muted); font-size:.75rem }

/* ── Hero ────────────────────────────────────────────────────── */
.hero-section {
  position:   relative;
  min-height: 90vh;
  display:    flex;
  align-items: center;
  overflow:   hidden;
  padding-top: 2rem;
}

.min-vh-hero { min-height: 80vh }

.hero-particles {
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 30% 40%, rgba(0,229,255,.06) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 60%, rgba(124,77,255,.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-title {
  font-size:   clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
}

.hero-subtitle {
  font-size:  1.1rem;
  color:      var(--color-muted);
  max-width:  520px;
}

.hero-badges { gap: .5rem }
.hero-badge {
  display:     inline-flex;
  align-items: center;
  gap:         .4rem;
  font-size:   .8rem;
  color:       var(--color-muted);
}

.badge-pill {
  display:        inline-flex;
  align-items:    center;
  background:     rgba(0,229,255,.12);
  color:          var(--color-cyan);
  border:         1px solid rgba(0,229,255,.25);
  border-radius:  50px;
  padding:        .35rem 1rem;
  font-size:      .8rem;
  font-weight:    600;
}

/* Code preview card */
.code-preview-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow);
}
.code-preview-header {
  background:  rgba(255,255,255,.04);
  padding:     .6rem 1rem;
  display:     flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:5px }
.dot.red    { background:#ff5f57 }
.dot.yellow { background:#febc2e }
.dot.green  { background:#28c840 }
.code-preview-title { font-size:.75rem }
.code-preview-body {
  padding:    1.25rem;
  margin:     0;
  font-size:  .8rem;
  line-height: 1.6;
  overflow-x: auto;
  color:      #c9d1d9;
}
.text-green { color: #7ee787 }

/* ── Sections ────────────────────────────────────────────────── */
.section-tag {
  display:     inline-block;
  font-size:   .7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:       var(--color-cyan);
  border:      1px solid rgba(0,229,255,.3);
  border-radius: 4px;
  padding:     .2rem .6rem;
}

.section-title {
  font-size:   clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.section-subtitle {
  font-size:  1rem;
  color:      var(--color-muted);
  max-width:  600px;
  margin:     0 auto;
}

.bg-section { background: var(--bg-section) }

/* ── API Cards ───────────────────────────────────────────────── */
.api-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.25rem;
  display:       flex;
  flex-direction: column;
  transition:    border-color .25s, box-shadow .25s, transform .25s;
}
.api-card:hover {
  border-color: var(--color-cyan);
  box-shadow:   0 4px 24px rgba(0,229,255,.12);
  transform:    translateY(-3px);
}
.api-card-header {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}
.api-source-badge {
  font-size:   .65rem;
  font-weight: 700;
  letter-spacing: 1px;
  color:       var(--color-purple);
  background:  rgba(124,77,255,.12);
  border:      1px solid rgba(124,77,255,.25);
  border-radius: 4px;
  padding:     .15rem .5rem;
  text-transform: uppercase;
}
.api-credit-badge {
  font-size:  .75rem;
  color:      var(--color-muted);
  display:    flex;
  align-items: center;
}
.api-card-title { font-weight: 700; font-size:.95rem; color:#fff }
.api-card-desc  { font-size:.82rem; line-height:1.5 }

.api-card-featured {
  background:    linear-gradient(135deg, rgba(0,229,255,.05), rgba(124,77,255,.08));
  border:        1px solid rgba(0,229,255,.2);
  border-radius: var(--radius-lg);
}
.api-icon-lg {
  font-size: 2.5rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Clients slider ──────────────────────────────────────────── */
.clients-slider {
  overflow: hidden;
  position: relative;
}
.clients-slider::before,
.clients-slider::after {
  content:  '';
  position: absolute;
  top:      0;
  bottom:   0;
  width:    80px;
  z-index:  1;
}
.clients-slider::before { left:0;  background: linear-gradient(to right, var(--bg-dark), transparent) }
.clients-slider::after  { right:0; background: linear-gradient(to left,  var(--bg-dark), transparent) }

@keyframes slide-loop { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.clients-track {
  display:   flex;
  width:     max-content;
  animation: slide-loop 30s linear infinite;
}
.client-logo-item {
  flex-shrink: 0;
  padding:     0 2rem;
  display:     flex;
  align-items: center;
}
.client-name {
  font-size:   .9rem;
  font-weight: 600;
  color:       var(--color-muted);
  white-space: nowrap;
  transition:  color .2s;
}
.clients-track:hover { animation-play-state: paused }
.client-logo-item:hover .client-name { color: var(--color-cyan) }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item {
  background:    transparent;
  border-bottom: 1px solid var(--color-border) !important;
  border:        none;
}
.faq-item .accordion-button {
  background:  transparent;
  color:       #fff;
  font-weight: 600;
  font-size:   .95rem;
  box-shadow:  none;
  padding:     1rem 0;
}
.faq-item .accordion-button::after {
  filter: invert(1);
  opacity: .6;
}
.faq-item .accordion-button:not(.collapsed) {
  color:      var(--color-cyan);
  background: transparent;
}
.faq-item .accordion-body { padding: .5rem 0 1.25rem; color: var(--color-muted) }

/* ── Resource cards ──────────────────────────────────────────── */
.resource-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.5rem;
  transition:    border-color .25s;
}
.resource-card:hover { border-color: var(--color-cyan) }
.resource-icon {
  font-size:  2rem;
  color:      var(--color-cyan);
  margin-bottom: .75rem;
}

/* ── CTA card ────────────────────────────────────────────────── */
.cta-card {
  background:    linear-gradient(135deg, rgba(0,229,255,.06), rgba(124,77,255,.1));
  border:        1px solid rgba(0,229,255,.2);
  border-radius: var(--radius-lg);
}
.cta-title {
  font-size:   clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer-dark {
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--color-border);
}
.footer-heading {
  font-size:     .7rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:         var(--color-muted);
  margin-bottom: .75rem;
}
.footer-links {
  list-style: none;
  padding:    0;
  margin:     0;
}
.footer-links li { margin-bottom:.4rem }
.footer-links a {
  color:       var(--color-muted);
  text-decoration: none;
  font-size:   .875rem;
  transition:  color .2s;
}
.footer-links a:hover { color: var(--color-cyan) }

/* ── WhatsApp Floating Button ────────────────────────────────── */
.whatsapp-float {
  position:      fixed;
  bottom:        2rem;
  right:         2rem;
  width:         58px;
  height:        58px;
  background:    #25d366;
  color:         #fff;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.6rem;
  box-shadow:    0 4px 20px rgba(37,211,102,.45);
  z-index:       9999;
  text-decoration: none;
  transition:    transform .3s, box-shadow .3s;
}
.whatsapp-float:hover {
  transform:  scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,.6);
  color:      #fff;
}
.wa-tooltip {
  position:   absolute;
  right:      70px;
  background: var(--bg-card);
  color:      #fff;
  font-size:  .8rem;
  font-weight: 600;
  padding:    .35rem .75rem;
  border-radius: 8px;
  white-space: nowrap;
  opacity:    0;
  pointer-events: none;
  transition: opacity .3s;
  border:     1px solid var(--color-border);
}
.whatsapp-float:hover .wa-tooltip { opacity: 1 }

/* ── Precios / Plans ─────────────────────────────────────────── */
.plan-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       1.75rem;
  display:       flex;
  flex-direction: column;
  position:      relative;
  transition:    border-color .25s, transform .25s;
}
.plan-card:hover { border-color: rgba(0,229,255,.3); transform: translateY(-4px) }
.plan-card--featured {
  border-color:  var(--color-cyan);
  background:    linear-gradient(160deg, rgba(0,229,255,.05) 0%, rgba(124,77,255,.08) 100%);
  box-shadow:    0 0 40px rgba(0,229,255,.12);
}
.plan-card__badge {
  position:      absolute;
  top:           -12px;
  right:         1.25rem;
  background:    var(--gradient);
  color:         #fff;
  font-size:     .7rem;
  font-weight:   700;
  padding:       .25rem .75rem;
  border-radius: 50px;
  letter-spacing: .5px;
}
.plan-card__header { margin-bottom:1rem }
.price-amount {
  font-size:   2.4rem;
  font-weight: 900;
  color:       var(--color-cyan);
}
.price-currency { font-size:1.2rem; font-weight:700; vertical-align:super }
.price-period   { font-size:.85rem; color: var(--color-muted) }
.price-usd      { font-size:.8rem; margin-top:.15rem }
.plan-credits   { font-size:.9rem; color: var(--color-muted) }
.plan-features li { font-size:.875rem; margin-bottom:.5rem; color: var(--color-muted) }
.plan-card__footer { border-top: 1px solid var(--color-border); padding-top:1rem }

.billing-toggle .btn-toggle {
  background:    transparent;
  border:        1px solid var(--color-border);
  color:         var(--color-muted);
  border-radius: 8px;
  padding:       .4rem 1.25rem;
  font-size:     .9rem;
  transition:    all .2s;
}
.billing-toggle .btn-toggle.active {
  background: var(--color-cyan);
  color:      #0a0a1a;
  border-color: var(--color-cyan);
  font-weight: 700;
}

/* ── API Detail page ─────────────────────────────────────────── */
.page-hero-sm { border-bottom: 1px solid var(--color-border) }
.breadcrumb-dark { --bs-breadcrumb-divider-color: var(--color-muted) }
.breadcrumb-dark .breadcrumb-item a  { color: var(--color-muted) }
.breadcrumb-dark .breadcrumb-item.active { color: var(--color-text) }

.source-badge-lg {
  font-size:   .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:       var(--color-purple);
  background:  rgba(124,77,255,.12);
  border:      1px solid rgba(124,77,255,.3);
  border-radius: 6px;
  padding:     .3rem .75rem;
}
.free-plan-badge {
  font-size:   .75rem;
  color:       #28c840;
  background:  rgba(40,200,64,.1);
  border:      1px solid rgba(40,200,64,.3);
  border-radius: 6px;
  padding:     .3rem .75rem;
}

.api-hero-title   { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:900 }
.api-hero-subtitle { color: var(--color-muted); font-size:1rem }

.feature-pill-sm {
  display:     inline-flex;
  align-items: center;
  font-size:   .78rem;
  background:  rgba(255,255,255,.04);
  border:      1px solid var(--color-border);
  border-radius: 50px;
  padding:     .25rem .75rem;
  color:       var(--color-muted);
}

.endpoint-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.25rem;
}
.endpoint-header {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
}
.method-badge {
  background:  rgba(0,229,255,.15);
  color:       var(--color-cyan);
  font-weight: 700;
  font-size:   .75rem;
  padding:     .2rem .6rem;
  border-radius: 5px;
  border:      1px solid rgba(0,229,255,.25);
}
.endpoint-url { font-family:monospace; font-size:.8rem; color: var(--color-muted); word-break:break-all }

.step-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.5rem 1rem;
}
.step-number {
  width:         36px;
  height:        36px;
  background:    var(--gradient);
  border-radius: 50%;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  font-weight:   800;
  font-size:     1rem;
  color:         #fff;
  margin:        0 auto;
}
.data-list { list-style:none; padding:0 }
.data-list li { padding:.35rem 0; border-bottom:1px solid var(--color-border); font-size:.875rem }
.data-list li:last-child { border-bottom:none }

.related-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1rem;
  transition:    border-color .25s;
  color:         var(--color-text);
}
.related-card:hover { border-color: var(--color-cyan) }

/* ── Code tabs ───────────────────────────────────────────────── */
.code-tabs-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.code-tabs-header {
  background:  rgba(255,255,255,.04);
  padding:     .6rem 1rem;
  font-size:   .85rem;
  color:       var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}
.code-tabs-body { padding: 1.25rem }
.code-nav { border-bottom: 1px solid var(--color-border); margin-bottom:.5rem }
.code-nav .nav-link {
  color:       var(--color-muted);
  font-size:   .8rem;
  padding:     .35rem .75rem;
  border:      none;
  background:  transparent;
  border-radius: 6px 6px 0 0;
}
.code-nav .nav-link.active {
  background:  rgba(0,229,255,.12);
  color:       var(--color-cyan);
  border-bottom: 2px solid var(--color-cyan);
}
.code-tabs-body pre {
  background:   #0d1117;
  border-radius: 8px;
  padding:      1rem 1.25rem;
  font-size:    .8rem;
  overflow-x:   auto;
  margin:       0;
  border:       1px solid rgba(255,255,255,.06);
}
.copy-btn { font-size:.75rem }

/* ── Auth pages ──────────────────────────────────────────────── */
.auth-page {
  background: radial-gradient(ellipse at 30% 20%, rgba(0,229,255,.06) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(124,77,255,.08) 0%, transparent 50%),
              var(--bg-dark);
  min-height: 100vh;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    1rem;
}
.auth-wrapper { width:100%; display:flex; justify-content:center }
.auth-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       2rem;
  width:         100%;
  max-width:     420px;
  box-shadow:    var(--shadow);
}
.auth-card--wide { max-width: 520px }
.auth-title  { font-size:1.2rem; font-weight:700; color:#fff }
.auth-icon-lg { font-size:2.5rem; color: var(--color-cyan) }
.auth-link   { color: var(--color-cyan); text-decoration:none }
.auth-link:hover { text-decoration:underline }
.auth-divider { border-color: var(--color-border) }
.btn-auth     { font-weight:700; padding:.6rem }

/* Form overrides for dark */
.form-control, .form-select {
  background:   var(--bg-dark);
  border-color: var(--color-border);
  color:        #fff;
}
.form-control:focus, .form-select:focus {
  background:   var(--bg-dark);
  border-color: var(--color-cyan);
  color:        #fff;
  box-shadow:   0 0 0 .2rem rgba(0,229,255,.15);
}
.form-control::placeholder { color: var(--color-muted) }
.input-group-text {
  background:   rgba(255,255,255,.05);
  border-color: var(--color-border);
  color:        var(--color-muted);
}

/* ── Precios — API detail card ───────────────────────────────── */
.api-detail-card {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.25rem;
  display:       flex;
  flex-direction: column;
  transition:    border-color .2s;
}
.api-detail-card:hover { border-color: rgba(0,229,255,.3) }
.source-tag {
  font-size: .65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color: var(--color-purple); background: rgba(124,77,255,.1); border-radius:4px; padding:.1rem .5rem;
}
.credit-tag {
  font-size:.75rem; color: var(--color-muted); display:flex; align-items:center; gap:.25rem
}
.credit-tag-sm { font-size:.7rem; color: var(--color-muted) }

/* Feature pills */
.feature-pill {
  display:     inline-flex;
  align-items: center;
  font-size:   .78rem;
  background:  rgba(255,255,255,.04);
  border:      1px solid var(--color-border);
  border-radius: 50px;
  padding:     .3rem 1rem;
  color:       var(--color-muted);
}
.feature-card-hero {
  background:    var(--bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       2rem;
}
.security-box {
  background:   rgba(255,255,255,.03);
  border-radius: 8px;
}

/* ── Page hero ───────────────────────────────────────────────── */
.page-hero {
  background: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.05), transparent 60%);
  border-bottom: 1px solid var(--color-border);
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-title    { font-size:2rem }
  .section-title { font-size:1.6rem }
  .whatsapp-float { bottom:1.25rem; right:1.25rem; width:52px; height:52px; font-size:1.4rem }
  .plan-card { padding:1.25rem }
}

@media (max-width: 576px) {
  .auth-card { padding:1.5rem 1.25rem }
  .code-preview-body { font-size:.72rem }
}

/* ── Misc public page tweaks ─────────────────────────────────── */
.section-about p, .section-about strong { max-width: 780px; margin-left:auto; margin-right:auto; display:block }