/* Blog en la misma línea que la tarjeta: tinta sobre papel, una sola tipografía y una mono para etiquetas. */
:root{--papel:#F5F4F0;--blanco:#FFFFFE;--tinta:#111110;--ink2:#55534E;--gris:#8E8B84;--linea:#D9D6CE;
  --sans:"Instrument Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--pad:clamp(24px,7vw,120px)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--papel);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.mono{font:500 12px/18px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--gris)}
a.mono{text-decoration:none}a.mono:hover{color:var(--tinta)}

.barra{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px var(--pad)}
.firma{text-decoration:none;font-weight:500;font-size:15px;letter-spacing:-.01em}
.firma span{color:var(--gris);font-weight:400;margin-left:8px;font-variant-numeric:tabular-nums}

main{padding:0 var(--pad)}
.cabeza{max-width:860px;padding:clamp(40px,10vh,110px) 0 clamp(36px,6vh,64px)}
.cabeza h1{margin-top:18px;font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.cabeza h1.grande{font-size:clamp(64px,11vw,168px);line-height:1;letter-spacing:-.045em}
.cabeza .dek{margin-top:22px;max-width:640px;font-size:clamp(18px,1.8vw,21px);line-height:1.5;color:var(--ink2)}

/* artículo */
.nota{max-width:calc(860px + 2*var(--pad))}
.prosa{max-width:680px;border-top:1px solid var(--tinta);padding-top:clamp(28px,5vh,48px)}
.prosa>*+*{margin-top:20px}
.prosa p,.prosa li{font-size:18px;line-height:1.7;color:#2A2925}
.prosa h2{margin-top:48px;font-weight:500;font-size:clamp(24px,2.4vw,30px);line-height:1.2;letter-spacing:-.025em}
.prosa h3{margin-top:32px;font-weight:500;font-size:21px;line-height:1.3;letter-spacing:-.015em}
.prosa ul,.prosa ol{padding-left:0;list-style:none;counter-reset:n}
.prosa li{position:relative;padding-left:30px}
.prosa li+li{margin-top:12px}
.prosa ul>li::before{content:"";position:absolute;left:4px;top:.78em;width:10px;height:1px;background:var(--tinta)}
.prosa ol>li{counter-increment:n}
.prosa ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.35em;font:500 12px/1 var(--mono);color:var(--gris)}
.prosa strong{font-weight:600;color:var(--tinta)}
.prosa a{text-underline-offset:4px;text-decoration-thickness:1px}
figure.fig{margin:36px 0 12px;background:var(--blanco);padding:12px 12px 18px;box-shadow:0 1px 1px rgba(0,0,0,.07),0 18px 36px -22px rgba(0,0,0,.35);transform:rotate(-.5deg)}
figure.fig:nth-of-type(even){transform:rotate(.5deg)}
figure.fig svg{display:block;width:100%;height:auto}
figure.fig figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink2)}

.ayuda{max-width:680px;margin-top:clamp(56px,9vh,96px);background:var(--tinta);color:var(--papel);padding:clamp(28px,4vw,44px)}
.ayuda .mono{color:#A9A69E}
.ayuda h2{margin-top:14px;font-weight:500;font-size:clamp(26px,2.8vw,34px);line-height:1.15;letter-spacing:-.03em}
.ayuda ul{list-style:none;margin-top:22px}
.ayuda li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;color:#D9D6CE}
.ayuda li+li{margin-top:10px}
.ayuda li::before{content:"";position:absolute;left:2px;top:.8em;width:10px;height:1px;background:var(--papel)}
.acciones{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--papel);color:var(--tinta);text-decoration:none;font-weight:500;font-size:15px;padding:14px 22px;border-radius:999px}
.btn:hover{background:#fff}
.link{font-size:15px;text-underline-offset:4px;text-decoration-thickness:1px}

.mas{margin-top:clamp(56px,9vh,96px)}
.mas>.mono{margin-bottom:18px}

/* listas de notas */
.lista{border-top:1px solid var(--tinta)}
.fila{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:32px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--linea);text-decoration:none}
.fila h2,.fila h3{font-weight:500;font-size:clamp(19px,1.9vw,25px);line-height:1.3;letter-spacing:-.015em;max-width:760px}
.fila .d{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink2);max-width:640px}
.fila:hover h2,.fila:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.fila .ir{transition:transform .2s}
.fila:hover .ir{color:var(--tinta);transform:translateX(4px)}
.fila[hidden]{display:none}

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filtros button{background:none;border:1px solid var(--linea);border-radius:999px;padding:7px 14px;cursor:pointer}
.filtros button:hover{color:var(--tinta);border-color:var(--tinta)}
.filtros button.on{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}

.pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(72px,12vh,140px);padding:28px var(--pad) 40px;border-top:1px solid var(--linea)}
.pie a{text-decoration:none}.pie a:hover{color:var(--tinta)}

canvas.px{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
html.armar [data-px]{visibility:hidden}

@media (max-width:760px){
  .barra{padding:20px var(--pad)}
  .firma span{display:none}
  .fila{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
  .fila>.mono:first-child{grid-column:1/-1}
  .prosa p,.prosa li{font-size:17px}
}
html.saliendo .barra,html.saliendo main,html.saliendo .pie{opacity:0;transition:opacity .18s}