/* =====================================================================
   EDITORIAL — estilos compartidos por el índice de artículos y cada artículo.
   El mismo atardecer que la oficina: suelo oscuro y cálido (la sombra de la foto de la ventana), tinta casi blanca
   y un solo acento, el ámbar de las oficinas encendidas. Para leer un ensayo largo, el cuerpo pasa a papel claro
   (un gris cálido, no crema) con la tinta de los edificios; ahí el ámbar se oscurece para que se lea como texto.
   Una sola familia: IBM Plex Sans. Sin rayas finas, sombras ni degradados; esquinas rectas.
   ===================================================================== */
@font-face{font-family:"IBM Plex Sans";src:url(../assets/fuentes/ibm-plex-sans.woff2) format("woff2");font-weight:100 700;font-stretch:85% 100%;font-display:swap}
:root{
  --ground:#161513; --surface:#1f1d1a; --raised:#29261f; --ink:#f0eeeb; --muted:#b3aba1; --faint:#958d83;
  --accent:#eea44c; --accent-ink:#1a1208;
  --paper:#efedea; --paper-2:#e4e1dc; --paper-ink:#1d1a17; --paper-body:#2e2a26; --paper-muted:#5f5850; --accent-deep:#9a5a16;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,4vw,64px); --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font:18px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* barra superior: vuelta a la oficina y al índice (opaca, sin cristal) */
.bar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:56px;padding:0 var(--gutter);background:var(--ground);font-size:15px}
.bar a{color:var(--ink);padding:12px 0;text-decoration-color:transparent;text-underline-offset:6px;transition:color .2s,text-decoration-color .2s}
.bar a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.bar b{font-weight:600;letter-spacing:-.01em}
/* progreso de lectura: solo con scroll-driven animations (sin JavaScript); si no hay soporte, no aparece */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .progress{animation:read linear both;animation-timeline:scroll(root)}
    @keyframes read{to{transform:scaleX(1)}}
  }
}

/* entrada del titular y de cada parte */
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .9s var(--ease) both}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(20px)}}
}

/* foto o ilustración, a color y con esquinas rectas */
.plate{position:relative;overflow:hidden;margin:0;background:var(--surface)}
.plate img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion: no-preference){.plate img{animation:drift 36s ease-in-out infinite alternate}@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.08)}}}

.btn{display:inline-block;font:600 15px/1 var(--f-body);text-decoration:none;padding:16px 22px;background:var(--accent);color:var(--accent-ink);transition:transform .15s var(--ease),background .2s}
.btn:hover{background:#f4b468;color:var(--accent-ink)}.btn:active{transform:translateY(1px) scale(.98)}
.btn.ghost{background:var(--raised);color:var(--ink)}
.btn.ghost:hover{background:#353028;color:var(--accent)}

.foot{margin-top:160px;padding:0 var(--gutter) 30px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:baseline;font-size:15px;color:var(--muted)}
.foot>:last-child{justify-self:end;text-align:right}
.foot a{color:var(--ink)}
@media (max-width:760px){.foot{grid-template-columns:1fr;gap:8px}.foot>:last-child{justify-self:start;text-align:left}}