/* Veriko landing — Desarrolladores. Hereda base/shell/.hero/.sec/.steps/.caps/.cta de home.css.
   Propio: el bloque de código vivo (M3, tema oscuro tipo terminal), tabs y la sección de webhooks. */

/* Ritmo vertical más compacto (mismo criterio que soluciones: el padding inferior del
   hero y el superior de las secciones se sumaban y dejaban demasiado aire). */
.dev-page .hero{padding:44px 0 40px}
.dev-page .sec{padding:40px 0}
@media(min-width:768px){.dev-page .hero{padding:56px 0 48px}.dev-page .sec{padding:52px 0}}
@media(min-width:1100px){.dev-page .hero{padding:64px 0 56px}.dev-page .sec{padding:60px 0}}

/* ── Hero oscuro (estética de desarrollador): degradado desde la esquina superior izq. ── */
.dev-page .hero{background:radial-gradient(140% 140% at 0% 0%,#1d2c50 0%,#0f1730 50%,#0a0f1f 100%)}
.dev-page .hero .eyebrow{color:#8ea4cb}
.dev-page .hero .d1{color:#f4f7fc}
.dev-page .hero .hero-lead{color:#aeb9cf}
.dev-page .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.dev-page .hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
/* el code-card resalta sobre el hero oscuro con un sutil aro claro */
.dev-page .hero .code-card{box-shadow:0 10px 44px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05)}

/* ── M3: code card (tema oscuro propio del componente) ── */
.code-card{
  --code-bg:#0f1729;--code-fg:#e6edf6;--code-dim:#8b98ad;--code-edge:#23304a;--code-tab:#5b86d6;
  background:var(--code-bg);border:1px solid var(--code-edge);border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-lg);width:100%
}
.code-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--code-edge)}
.code-dots{display:inline-flex;gap:5px;flex:none}
.code-dots i{width:9px;height:9px;border-radius:50%;background:var(--code-edge);display:inline-block}
.code-route{font-family:var(--font-family-mono);font-size:12.5px;color:var(--code-dim);letter-spacing:.01em}

.code-tabbar{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--code-edge);overflow-x:auto;scrollbar-width:thin}
.code-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--code-dim);font:inherit;font-size:13px;font-weight:600;padding:8px 12px;cursor:pointer;white-space:nowrap;border-radius:6px 6px 0 0;transition:color .12s ease}
.code-tab:hover{color:var(--code-fg)}
.code-tab[aria-selected="true"]{color:var(--code-fg);border-bottom-color:var(--code-tab)}

.code-panel{margin:0;padding:18px 20px;overflow-x:auto}
.code-panel code{font-family:var(--font-family-mono);font-size:12.5px;line-height:1.65;color:var(--code-fg);white-space:pre;display:block}

/* Resaltado de sintaxis — paleta VS Code Dark+ (aplicada por developers.js). */
.code-panel .t-cm{color:#6a9955}            /* comentario   */
.code-panel .t-st{color:#ce9178}            /* string       */
.code-panel .t-nu{color:#b5cea8}            /* número       */
.code-panel .t-kw{color:#569cd6}            /* storage kw   */
.code-panel .t-cf{color:#c586c0}            /* control kw   */
.code-panel .t-bo{color:#569cd6}            /* constante    */
.code-panel .t-ty{color:#4ec9b0}            /* tipo         */
.code-panel .t-fn{color:#dcdcaa}            /* función      */
.code-panel .t-pr{color:#9cdcfe}            /* propiedad    */

.code-result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--code-edge);background:rgba(255,255,255,.025)}
.cr-status{font-family:var(--font-family-mono);font-size:11.5px;color:var(--code-dim)}
.cr-json{font-family:var(--font-family-mono);font-size:12px;color:var(--code-fg)}
.cr-verdict{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;font-weight:600;color:#34d399}
.cr-verdict .ic{width:15px;height:15px;color:#34d399;stroke-width:2.5}

.code-card-plain{max-width:540px}

/* foco visible sobre tabs y panels scrollables (hereda outline global) */
.code-tab:focus-visible,.code-panel:focus-visible{outline:2px solid var(--code-tab);outline-offset:-2px;border-radius:6px}

/* ── Documentación: banner simple (título + subtítulo + CTA), el texto hace el trabajo ── */
.doc-banner{max-width:720px;margin:0 auto;text-align:center;padding:44px 28px;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:linear-gradient(180deg,var(--color-primary-light),var(--color-surface) 80%)}
.doc-banner-sub{margin:12px auto 24px;max-width:48ch;color:var(--color-text-secondary);font-size:var(--font-size-lg);line-height:1.55}

/* ── Showcase OCR (reutilizable): comprobante + sello "Validado" | code-card OCR ── */
.ocr-show .sec-lead{margin-top:12px;color:var(--color-text-secondary);max-width:60ch}
.ocr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center}
@media(min-width:900px){.ocr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}}
.ocr-code{min-width:0}

.ocr-visual{display:flex;justify-content:center;padding:18px 14px 4px}
.receipt-mock{position:relative;width:100%;max-width:340px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:22px 22px 18px}
.rcpt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rcpt-bank{font-weight:650;font-size:14px;color:var(--color-text-primary)}
.rcpt-tag{font-family:var(--font-family-mono);font-size:11px;font-weight:600;color:var(--color-text-secondary);background:var(--color-surface-sunken);border:1px solid var(--color-border);padding:2px 8px;border-radius:999px}
.rcpt-amount{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--color-text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.rcpt-sub{font-size:13px;color:var(--color-text-tertiary);margin-top:2px}
.rcpt-rows{margin:16px 0 0;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--color-border);padding-top:15px}
.rcpt-rows>div{display:flex;align-items:center;justify-content:space-between;gap:14px}
.rcpt-rows dt{margin:0;font-size:12.5px;color:var(--color-text-tertiary)}
.rcpt-rows dd{margin:0;font-family:var(--font-family-mono);font-size:12.5px;color:var(--color-text-primary)}

/* Sello "Validado" (círculo + check) sobre el comprobante */
.ocr-seal{position:absolute;top:-22px;right:-14px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px}
.ocr-seal-circle{width:64px;height:64px;border-radius:50%;background:var(--color-success-text);border:4px solid var(--color-surface);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}
.ocr-seal-circle .ic{width:34px;height:34px;color:#fff;stroke-width:2.5}
.ocr-seal-label{font-size:12px;font-weight:700;color:var(--color-success-text);background:var(--color-surface);border:1px solid var(--color-border);padding:2px 10px;border-radius:999px;box-shadow:var(--shadow-md)}

/* ── CTA con doble botón centrado (banda oscura) ── */
.cta-center{justify-content:center;margin-top:8px}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}

@media(prefers-reduced-motion:reduce){.code-tab{transition:none}}