/* ─────────────────────────────────────────────────────────────
   Estilos compartidos de /notas/
   Mismos tokens que la home. Un solo archivo para todas las notas:
   si cambia la identidad, se cambia acá y no en cada artículo.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:#0E1F2B;
  --ink-2:#16303F;
  --paper:#EEF0EC;
  --paper-2:#F7F8F6;
  --slate:#5A6B72;
  --signal:#E8A33D;
  --ok:#2F8F6B;
  --alert:#C4453A;
  --line:#D3D8D2;

  --display:'Archivo',system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.measure{max-width:680px;margin:0 auto;padding:0 24px}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);display:block;margin-bottom:20px;
}

/* ── nav ──────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(238,240,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.nav-name{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;text-decoration:none}
.nav-name span{color:var(--slate);font-weight:500}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-family:var(--display);font-size:14px;font-weight:500;text-decoration:none;color:var(--slate)}
.nav-links a:hover{color:var(--ink)}
.nav-links .nav-cta{background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:2px}
.nav-links .nav-cta:hover{background:var(--ink-2);color:var(--paper)}
@media(max-width:720px){.nav-links a:not(.nav-cta){display:none}}

/* ── migas ────────────────────────────────────── */
.crumbs{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);padding-top:38px;
}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{padding:0 8px;opacity:.55}

/* ── encabezado del artículo ──────────────────── */
.art-head{padding:26px 0 8px}
.art-head h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,5vw,50px);
  line-height:1.06;letter-spacing:-.03em;
}
.standfirst{
  margin-top:22px;font-size:21px;line-height:1.55;color:var(--ink-2);
}
.art-meta{
  margin-top:28px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--slate);
  display:flex;flex-wrap:wrap;gap:20px;
}

/* ── cuerpo ───────────────────────────────────── */
.art-body{padding:44px 0 8px}
.art-body h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(23px,3vw,29px);letter-spacing:-.022em;line-height:1.18;
  margin:52px 0 16px;
}
.art-body h3{
  font-family:var(--display);font-weight:600;
  font-size:19px;letter-spacing:-.012em;margin:34px 0 10px;
}
.art-body p{margin-bottom:20px}
.art-body ul,.art-body ol{margin:0 0 22px 0;padding-left:0;list-style:none}
.art-body ol{counter-reset:li}
.art-body li{position:relative;padding-left:26px;margin-bottom:11px}
.art-body ul>li::before{
  content:"";position:absolute;left:4px;top:12px;
  width:7px;height:7px;border-radius:50%;background:var(--ok);
}
.art-body ol>li{counter-increment:li}
.art-body ol>li::before{
  content:counter(li);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:12.5px;color:var(--signal);
}
.art-body strong{font-weight:600}
.art-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--slate)}
.art-body a:hover{text-decoration-color:var(--ink)}
.art-body code{
  font-family:var(--mono);font-size:.86em;
  background:rgba(14,31,43,.07);padding:2px 5px;border-radius:2px;
}
.art-body pre{
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:13.5px;line-height:1.6;
  padding:20px 22px;border-radius:3px;overflow-x:auto;margin-bottom:24px;
}
.art-body pre code{background:none;padding:0;font-size:inherit;color:inherit}

blockquote{
  border-left:2px solid var(--signal);
  padding-left:22px;margin:30px 0;
  font-size:19.5px;color:var(--ink-2);
}

/* panel oscuro: mismo elemento firma que la home */
.datos{
  background:var(--ink);color:var(--paper);
  border-radius:3px;overflow:hidden;margin:38px 0;
  box-shadow:0 18px 44px -22px rgba(14,31,43,.55);
}
.datos-head{
  padding:16px 22px;border-bottom:1px solid rgba(238,240,236,.16);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8FA3AC;
}
.datos-row{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:13px 22px;font-family:var(--mono);font-size:13.5px;
  border-bottom:1px solid rgba(238,240,236,.07);
}
.datos-row:last-child{border-bottom:0}
.datos-row .k{color:#B7C6CC}
.datos-row .v{color:var(--paper);white-space:nowrap}
.datos-row .v.warn{color:var(--signal)}
.datos-row .v.bad{color:#E8776D}
@media(max-width:600px){
  .datos-row{grid-template-columns:1fr;gap:2px}
  .datos-row .v{text-align:left}
}

/* aviso lateral */
.nota{
  background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:3px;padding:20px 22px;margin:32px 0;font-size:17px;color:var(--ink-2);
}
.nota strong{color:var(--ink)}

/* ── cierre / CTA ─────────────────────────────── */
.cierre{
  background:var(--ink);color:var(--paper);
  border-radius:3px;padding:38px 34px;margin:56px 0 0;
}
.cierre h2{
  font-family:var(--display);font-weight:700;font-size:26px;
  letter-spacing:-.022em;line-height:1.15;margin:0 0 14px;color:var(--paper);
}
.cierre p{color:#B7C6CC;font-size:17.5px;margin-bottom:24px}
.cierre .btn{
  font-family:var(--display);font-weight:600;font-size:15px;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--paper);
  padding:13px 24px;border-radius:2px;text-decoration:none;display:inline-block;
}
.cierre .btn:hover{background:#fff}
.cierre .btn.sec{background:transparent;color:var(--paper);margin-left:10px}
.cierre .btn.sec:hover{background:rgba(238,240,236,.12)}
@media(max-width:520px){
  .cierre{padding:30px 24px}
  .cierre .btn{display:block;text-align:center}
  .cierre .btn.sec{margin:10px 0 0}
}

/* ── otras notas ──────────────────────────────── */
.otras{padding:60px 0 20px;border-top:1px solid var(--line);margin-top:60px}
.otras h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.015em;margin-bottom:22px}
.otras a{
  display:block;text-decoration:none;padding:18px 0;border-top:1px solid var(--line);
}
.otras a:last-child{border-bottom:1px solid var(--line)}
.otras .t{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.01em}
.otras .d{font-size:16px;color:var(--slate);margin-top:4px}
.otras a:hover .t{color:var(--ink-2)}

footer{background:var(--ink);color:#8FA3AC;padding:30px 0 44px;font-family:var(--mono);font-size:12px;margin-top:70px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(238,240,236,.14);padding-top:26px}
footer a{color:#B7C6CC;text-decoration:none;margin-left:18px}
footer a:first-child{margin-left:0}
footer a:hover{color:var(--paper)}

a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}