:root { color-scheme: light; --ink:#17243a; --muted:#59677c; --line:#dce4ee; --blue:#1455a5; --blue-dark:#103a70; --paper:#fff; --wash:#f5f8fc; --mint:#d9f7eb; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background:var(--wash); line-height:1.62; }
a { color:var(--blue); }
a:hover { color:var(--blue-dark); }
a:focus-visible, button:focus-visible { outline:3px solid #31a0dd; outline-offset:3px; }
.skip { position:absolute; left:-9999px; top:8px; z-index:5; background:white; padding:.5rem; }
.skip:focus { left:8px; }
.top { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.top-inner { max-width:1240px; margin:auto; padding:.7rem 1.4rem; display:flex; align-items:center; gap:2rem; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none; font-weight:750; letter-spacing:-.02em; white-space:nowrap; }
.brand img { width:94px; height:auto; }
.brand span { padding-left:.7rem; border-left:1px solid var(--line); }
.nav { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; }
.nav a { display:inline-block; text-decoration:none; color:#354761; font-weight:600; padding:.45rem .7rem; border-radius:.55rem; }
.nav a:hover, .nav a[aria-current="page"] { background:#e9f1fb; color:var(--blue-dark); }
main { min-height:calc(100vh - 180px); }
.container { max-width:1080px; padding:0 1.4rem; margin:auto; }
.article { max-width:900px; padding-top:3.5rem; padding-bottom:5rem; }
.hero { background:linear-gradient(120deg,#0e3060 0%,#185dac 65%,#168d9c 100%); color:white; padding:5.5rem 0 5rem; }
.hero h1 { font-size:clamp(2.2rem,5vw,4.3rem); line-height:1.12; max-width:790px; margin:.25rem 0 1.25rem; letter-spacing:-.05em; }
.hero p { font-size:1.2rem; max-width:650px; color:#dceaff; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:800; color:#a9d9ff; }
.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }
.button { display:inline-block; padding:.7rem 1.05rem; border-radius:.6rem; font-weight:700; text-decoration:none; border:1px solid transparent; }
.button.primary { color:#0e3060; background:#fff; }
.button.secondary { color:#fff; border-color:#91c7ee; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.1rem; margin:2.4rem 0; }
.card { background:#fff; border:1px solid var(--line); border-radius:1rem; padding:1.55rem; box-shadow:0 12px 35px rgba(21,62,109,.045); }
.card h2, .card h3 { margin:.1rem 0 .5rem; font-size:1.25rem; line-height:1.3; }
.card p { color:var(--muted); margin:.3rem 0 1rem; }
.card a { font-weight:700; }
.article h1 { font-size:clamp(2.1rem,4vw,3rem); line-height:1.2; letter-spacing:-.035em; margin:.2rem 0 1rem; }
.article h2 { line-height:1.3; font-size:1.5rem; margin:2.7rem 0 .75rem; }
.article h3 { line-height:1.3; font-size:1.14rem; margin:1.7rem 0 .5rem; }
.lead { font-size:1.15rem; color:#40516a; max-width:760px; }
.article p, .article li { max-width:78ch; }
.article li { margin:.3rem 0; }
.note { border-left:4px solid #2e90c5; background:#eaf5fc; padding:.9rem 1.1rem; margin:1.6rem 0; border-radius:0 .55rem .55rem 0; }
.status { display:inline-block; font-size:.78rem; font-weight:750; padding:.2rem .6rem; border-radius:999px; color:#114c3a; background:var(--mint); margin-bottom:.6rem; }
.status.pending { color:#705016; background:#fff0cb; }
.code { background:#13233c; color:#f4f8ff; border-radius:.65rem; padding:1rem 1.2rem; overflow:auto; font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre; }
code { background:#e9eef5; padding:.1rem .3rem; border-radius:.2rem; font-size:.9em; }
pre code { background:none; padding:0; color:inherit; font-size:inherit; }
.table-wrap { overflow-x:auto; margin:1rem 0 2rem; }
table { border-collapse:collapse; width:100%; background:#fff; font-size:.94rem; }
th,td { border-bottom:1px solid var(--line); padding:.65rem .75rem; text-align:left; vertical-align:top; }
th { color:#334f73; background:#eef4fa; font-size:.86rem; }
td code { white-space:nowrap; }
.tool { background:white; border:1px solid var(--line); border-radius:.8rem; padding:1.2rem 1.4rem; margin:1.2rem 0; }
.tool h3 { margin:0 0 .2rem; }
.tool p { margin:.3rem 0 .8rem; }
.tool summary { cursor:pointer; font-weight:700; color:var(--blue); }
.tool details { margin-top:.7rem; }
.tool .table-wrap { margin:.7rem 0; }
.tool .table-wrap table { font-size:.88rem; }
.small { color:var(--muted); font-size:.9rem; }
.footer { border-top:1px solid var(--line); background:#fff; color:#617084; padding:2rem 0; font-size:.9rem; }
.footer .container { display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap; }
.api-shell { background:white; }
.api-intro { padding:2rem 1.4rem 1rem; max-width:1140px; margin:auto; }
.api-intro h1 { margin:.3rem 0; font-size:2.1rem; }
#scalar { min-height:70vh; }
/* Respaldo visual para ocultar promociones de Scalar si cambia su interfaz. */
#scalar .explore-scalar, #scalar .generate-sdk-button { display:none !important; }
@media(max-width:680px) { .top-inner { align-items:flex-start; flex-direction:column; gap:.5rem; padding:.6rem 1rem; } .brand img { width:82px; } .nav { width:100%; overflow-x:auto; flex-wrap:nowrap; } .nav a { white-space:nowrap; font-size:.9rem; } .hero { padding:3.5rem 0; } .article { padding-top:2rem; } .container { padding:0 1rem; } .tool { padding:1rem; } }