/* =====================================================================================
   articulo.css · piel editorial de las páginas estáticas (public/*.html y public/en/*.html).
   Espejo del sistema editorial de src/index.css (Guía de marca v2, 22-sep-2026): papel, tinta,
   reglas finas, Fraunces siempre a 360 para títulos, Source Serif 4 para texto y JetBrains Mono
   solo para datos, fechas, folios y rótulos. Sin radios, sin sombras, sin vidrio, sin flechas.
   El esmeralda se retiró el 24-sep (decisión de Jorge): el botón lleva el degradado verde de AVA (el sello del pie lo pone
   scripts/nav-render.mjs, que también trae el CSS de header y pie).
   Lo enlaza scripts/redisenio/restyle-static.mjs en cada página. No editar las páginas a mano
   para cambiar su piel: se cambia aquí.
   ===================================================================================== */

/* === Fuentes self-host (mismos archivos y rangos que src/index.css, licencia OFL en /fonts/licenses) === */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 360; font-display: swap; src: url('/fonts/fraunces-360-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 360; font-display: swap; src: url('/fonts/fraunces-360-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 360; font-display: swap; src: url('/fonts/fraunces-360italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 360; font-display: swap; src: url('/fonts/fraunces-360italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/source-serif-4-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/source-serif-4-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/source-serif-4-400italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/source-serif-4-400italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-serif-4-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-serif-4-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* === Tokens (los mismos valores de src/index.css) === */
:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --platino: #EEF5F1;   /* tinte verde muy claro (Jorge retiró el gris platino el 24-sep) */
  --pie: #FFFFFF;
  --tinta: #0B0F16;
  --tenue: #6B7686;       /* solo sobre papel (4.60:1); sobre platino y pie se usa #5B6472 */
  --pie-text: #5B6472;
  --esmeralda: #0B5C3E;   /* retirado: el botón lleva el degradado del campo de AVA */
  --grad-verde: linear-gradient(135deg, #17855D 0%, #0E6B49 40%, #0B5C3E 68%, #094A33 100%);
  --verde: #0B5C3E;
  --regla: #D8DEE6;
  --liga: rgba(11, 15, 22, .32);
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ancho: 1240px;       /* el mismo contenedor del header y del pie */
  --columna: 680px;       /* columna del artículo, alineada al borde izquierdo del header */
  --medida: 68ch;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Transición entre documentos, la misma de las rutas React (src/index.css): el header comparte nombre
   con .ed-header para quedarse quieto al pasar de una guía a la home y de vuelta. Solo sin movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 160ms ease-out both ed-vt-out; }
  ::view-transition-new(root) { animation: 360ms var(--ease) both ed-vt-in; }
}
@keyframes ed-vt-out { to { opacity: 0; } }
@keyframes ed-vt-in { from { opacity: 0; transform: translateY(8px); } }
.tk-nav { view-transition-name: ed-header; }

/* === Base === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  font-optical-sizing: auto;
  overflow-x: clip;
}
::selection { background: #CCE3D7; color: var(--tinta); }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Capas decorativas del tema anterior (degradados y retícula de fondo): se retiran */
.bg, .grid-bg { display: none; }

/* === Columna de lectura ===
   .wrap y .tk-rel usan la misma caja que el header y el pie (1240 px con gutter de 20 a 80 px), así que
   el artículo arranca en el mismo borde izquierdo que el wordmark. Dentro, una columna de 680 px y el
   texto corrido a 68 caracteres. */
.wrap, .tk-rel { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.wrap { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 96px); overflow-wrap: break-word; }
:where(.wrap, .tk-rel) > * { max-width: var(--columna); }
:where(.wrap) > :is(ul, ol, blockquote), :where(.wrap) p { max-width: min(var(--medida), var(--columna)); }

/* === Tipografía === */
:where(.wrap) :is(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 360;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
}
:where(.wrap) h1 { font-size: clamp(2.1rem, 3.1vw, 2.75rem); line-height: 1.08; margin: 0 0 18px; }
:where(.wrap) h2 { font-size: clamp(1.6rem, 2.6vw, 1.9rem); line-height: 1.15; letter-spacing: -0.015em; margin: 60px 0 14px; }
:where(.wrap) h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; margin: 34px 0 8px; }
:where(.wrap) h4 { font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; margin: 26px 0 6px; }
:where(.wrap) h2 + h3 { margin-top: 20px; }
:where(.wrap) :is(h1, h2, h3, h4) :is(b, strong) { font-weight: 360; }
:where(.wrap) h1 b { font-style: italic; }
:where(.wrap) p { margin: 0 0 1.05em; text-wrap: pretty; }
:where(.wrap) :is(ul, ol) { margin: 0 0 1.25em; padding-left: 1.3em; }
:where(.wrap) li { margin: 0 0 .5em; text-wrap: pretty; }
:where(.wrap) li::marker { color: var(--tenue); }
:where(.wrap) :is(strong, b) { font-weight: 600; }
:where(.wrap) em { font-style: italic; }
:where(.wrap) img { display: block; max-width: 100%; height: auto; }
:where(.wrap) hr { border: 0; border-top: 1px solid var(--regla); margin: 40px 0; }

/* Ligas: tinta con subrayado fino, nunca de color */
:where(.wrap) a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--liga); transition: text-decoration-color .18s; }
:where(.wrap) a:hover { text-decoration-color: var(--tinta); }

/* Código en línea */
:where(.wrap) code { font-family: var(--font-mono); font-size: .84em; letter-spacing: 0; background: var(--platino); color: var(--tinta); padding: .12em .38em; border-radius: 0; overflow-wrap: anywhere; }

/* Cita: Fraunces itálica con regla de tinta */
:where(.wrap) blockquote {
  margin: 34px 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--tinta);
  font-family: var(--font-display);
  font-weight: 360;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--tinta);
}
:where(.wrap) blockquote p { margin: 0 0 10px; max-width: none; }
:where(.wrap) blockquote cite { display: block; margin-top: 12px; font-family: var(--font-body); font-style: normal; font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--tenue); }
:where(.wrap) blockquote cite em { font-style: italic; }

/* === Cabeza de página === */
.eyebrow, .code {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tenue);
  margin: 0 0 18px;
}
.updated {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--tenue);
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--regla);
  max-width: var(--columna);
}
.lead, .lede { font-size: clamp(1.14rem, 1.5vw, 1.28rem); line-height: 1.5; margin: 0 0 1em; }
.lede + .lede { font-size: 1.05rem; }
.lede.en { font-size: 16px; line-height: 1.55; color: var(--tenue); margin-bottom: 34px; }

/* Firma de autor (guía de adopción) */
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 15px; line-height: 1.5; color: var(--tenue);
  padding-bottom: 22px; margin: 0 0 30px;
  border-bottom: 1px solid var(--regla);
}
.byline .who { color: var(--tinta); }
.cred { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); padding: 3px 7px; box-shadow: inset 0 0 0 1px var(--tinta); }

/* Ruta de navegación (índices) */
.crumbs { font-size: 15px; line-height: 1.5; color: var(--tenue); margin: 0 0 30px; }
.crumbs a { color: var(--tinta); }
.crumbs span[aria-hidden] { margin: 0 4px; }
.crumbs [aria-current] { color: var(--tinta); }

/* Índice de la guía */
.toc { margin: 36px 0 8px; padding: 16px 0 14px; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--regla); }
.toc p { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 1.5em; }
.toc li { margin: 0 0 6px; }
.toc a { text-decoration-color: transparent; }
.toc a:hover { text-decoration-color: var(--tinta); }

/* Numeración de secciones (guía de adopción) */
:where(.wrap) h2:has(> .n) { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--regla); }
.n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; font-style: normal; color: var(--tenue); margin-right: 14px; position: relative; top: -.5em; }

/* === Tablas como documento === */
.tk-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 28px 0; }
.tk-tablewrap > table { margin: 0; }
.tk-tablewrap > table:has(tr > :nth-child(4)) { min-width: 560px; }   /* 4 o 5 columnas: se deslizan en móvil */
:where(.wrap) table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--tinta); margin: 28px 0; font-size: 16px; line-height: 1.5; }
:where(.wrap) :is(th, td) { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--regla); }
:where(.wrap) :is(th, td):last-child { padding-right: 0; }
:where(.wrap) th {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tenue);
  vertical-align: bottom;
  padding-top: 12px;
  padding-bottom: 10px;
}
:where(.wrap) td:first-child { width: 30%; }

/* Respuesta directa (AEO): la frase que contesta, en seminegrita; un párrafo de respuesta queda normal */
.answer { font-weight: 600; }
p.answer, div.answer { font-weight: 400; }

/* === Preguntas frecuentes: pregunta en Fraunces, respuesta en serif, separadas por regla fina === */
:where(.wrap) :is(.faq h3, h2.faq ~ h3) { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--regla); }

/* === Bloques con regla fina (sin radio, sin sombra, sin vidrio) === */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.col { border: 1px solid var(--regla); padding: 20px 22px 6px; }
:where(.wrap) > .col { margin: 28px 0; padding-bottom: 20px; }
.col h3 { margin-top: 2px; }
.col :is(ul, ol) { padding-left: 1.2em; }
.col li { font-size: 16.5px; line-height: 1.55; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--tenue); margin: 0 0 10px; }
.col .tag { display: block; }

.callout { --tenue: #5B6472; background: var(--platino); padding: 22px 24px; margin: 32px 0; }
.callout > :last-child { margin-bottom: 0; }

.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: center; margin: 30px 0; padding: 18px 0; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--regla); }
.big { font-family: var(--font-display); font-weight: 360; font-size: clamp(2.4rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--tinta); }
.lbl { font-size: 16.5px; line-height: 1.45; }

.step { margin: 26px 0; padding-top: 16px; border-top: 1px solid var(--regla); }
.step > :last-child { margin-bottom: 0; }
.k { display: block; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin: 0 0 8px; }

:where(.wrap) ul.clean { padding-left: 1.3em; }
:where(.wrap) ul.clean li { margin-bottom: .6em; }

/* Listas numeradas como cláusulas (mismo gesto que la carta de alcance del sitio) */
ol.steps, ol.q { list-style: none; padding: 0; margin: 28px 0; max-width: var(--columna); }
ol.steps { counter-reset: step; }
ol.q { counter-reset: q; }
ol.steps > li, ol.q > li { position: relative; margin: 0; padding: 18px 0 18px 58px; border-top: 1px solid var(--regla); }
ol.steps > li:first-child, ol.q > li:first-child { border-top: 2px solid var(--tinta); }
ol.steps > li:last-child, ol.q > li:last-child { border-bottom: 1px solid var(--regla); }
ol.steps > li { counter-increment: step; }
ol.q > li { counter-increment: q; padding-top: 22px; padding-bottom: 20px; }
ol.steps > li::before, ol.q > li::before { position: absolute; left: 0; top: 16px; font-family: var(--font-display); font-weight: 360; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--tinta); }
ol.steps > li::before { content: counter(step); }
ol.q > li::before { content: counter(q); top: 20px; }
ol.q h3 { margin: 0 0 8px; }
.why { margin: 0 0 10px; }
.signal { margin: 0; font-size: 16.5px; line-height: 1.55; }
.signal b { color: var(--verde); }

/* === Índices de guías y cursos === */
.hero { margin: 0 0 8px; }
.hero > .lede { max-width: var(--medida); }
.track { margin-top: 64px; }
.track-head { display: flex; align-items: baseline; gap: 16px; padding-top: 18px; margin-bottom: 24px; border-top: 2px solid var(--tinta); }
.track-num { flex: none; min-width: 2ch; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--tenue); }
.track:not(:has(.cards)) .track-num { display: none; }   /* pista de remisión: su marca es una flecha */
:where(.wrap) .track h2 { margin: 0; }
.sub { margin: 6px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--tenue); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card {
  display: block;
  padding: 20px 22px 22px;
  color: var(--tinta);
  text-decoration: none;
  border: 1px solid var(--regla) !important;       /* anula el borde en línea pensado para fondo oscuro */
  background: var(--paper) !important;              /* anula el fondo translúcido en línea */
  transition: border-color .18s var(--ease);
}
.card:hover { border-color: var(--tinta) !important; }
.card h3 { margin: 8px 0; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.card .why { font-size: 16.5px; line-height: 1.55; margin: 0 0 14px; }
.card p { max-width: none; }
.prov { display: block; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.arrow { display: none; }   /* flecha decorativa: el título ya es la liga */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags .tag { margin: 0; padding: 3px 8px; box-shadow: inset 0 0 0 1px var(--regla); }
.tags .tag.free { color: var(--verde); box-shadow: inset 0 0 0 1px rgba(11, 92, 62, .45); }
.tags .tag.es { color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(11, 15, 22, .4); }

/* === Acciones === */
.cta-row { margin: 44px 0 0; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; margin-top: 18px; padding: 14px 20px;
  background: var(--grad-verde); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px -18px rgba(9,74,51,.75);
  font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.3; letter-spacing: .005em;
  text-decoration: none; border: 0; border-radius: 0; box-shadow: none;
  transition: filter .18s var(--ease), transform .12s var(--ease);
}
.cta-row > .cta { margin-top: 0; }
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: translateY(1px); }
.back {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 44px; padding: 10px 16px;
  color: var(--tinta); font-size: 15px; line-height: 1.3; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.back:hover { background: rgba(11, 15, 22, .04); }
.more { margin-top: 24px; }

/* Salidas de la 404: bloques con regla fina */
.exits { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.exit { display: block; padding: 18px 20px; border: 1px solid var(--regla); color: var(--tinta); text-decoration: none; transition: border-color .18s var(--ease); }
.exit:hover { border-color: var(--tinta); }
.exit b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 360; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.exit span { display: block; font-size: 15px; line-height: 1.5; color: var(--tenue); }

/* === Pie del artículo (antes del pie del sitio) === */
:where(.wrap) > footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--regla); font-family: var(--font-mono); font-size: 12px; line-height: 1.75; letter-spacing: .04em; color: var(--tenue); }
:where(.wrap) > footer p { margin: 0; max-width: none; }
.end { margin-top: 64px; }

/* === Sigue leyendo === */
.tk-rel { padding-bottom: clamp(56px, 7vw, 96px); }
.tk-rel h2 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--tenue); }
.tk-rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tk-rel li { margin: 0; }
.tk-rel li a { display: block; height: 100%; padding: 16px 18px 18px; border: 1px solid var(--regla); color: var(--tinta); text-decoration: none; font-family: var(--font-display); font-weight: 360; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; transition: border-color .18s var(--ease); }
.tk-rel li a:hover { border-color: var(--tinta); }

/* === Estilos en línea heredados del tema oscuro ===
   Algunas páginas traen color en el atributo style (platino, gris azulado o esmeralda sobre obsidiana).
   Sobre papel esos colores son ilegibles o prohibidos (esmeralda como texto), así que aquí se reencauzan
   a tinta o tenue. Es la única razón de los !important de esta hoja. */
:where(.wrap) :is([style*="color:#F0F4F8" i], [style*="color: #F0F4F8" i], [style*="color:#A9B6C8" i], [style*="color: #A9B6C8" i], [style*="color:#10B981" i], [style*="color: #10B981" i]) { color: var(--tinta) !important; }
:where(.wrap) :is([style*="color:rgba(240,244,248" i], [style*="color: rgba(240, 244, 248" i], [style*="color:rgba(240, 244, 248" i]):not(.card) { color: var(--tenue) !important; }
:where(.wrap) a:is([style*="color:#10B981" i], [style*="color: #10B981" i]) { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; text-decoration-color: var(--liga) !important; }
/* Párrafo usado como cita con regla izquierda en línea: mismo gesto que blockquote */
:where(.wrap) p:is([style*="border-left:2px solid rgba(240,244,248" i], [style*="border-left: 2px solid rgba(240, 244, 248" i]) {
  border-left-color: var(--tinta) !important;
  padding-left: 22px !important;
  font-family: var(--font-display);
  font-weight: 360;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.42;
  letter-spacing: -0.005em;
}

/* Pista para tablas que desbordan: solo aparece si el contenedor tiene scroll horizontal real (la línea
   de tiempo de scroll queda inactiva cuando la tabla cabe) y se desvanece al deslizar. Sin flechas. */
@supports (animation-timeline: scroll()) {
  .tk-tablewrap { animation: tk-marco linear both; animation-timeline: scroll(self inline); }
  .tk-tablewrap::before {
    content: 'Desliza para ver toda la tabla';
    content: 'Desliza para ver toda la tabla' / '';
    display: block; height: 0; overflow: hidden; visibility: hidden; white-space: nowrap;
    font-family: var(--font-mono); font-size: 11px; line-height: 28px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue);
    animation: tk-pista linear both;
    animation-timeline: scroll(nearest inline);
  }
  :lang(en) .tk-tablewrap::before { content: 'Swipe to see the full table'; content: 'Swipe to see the full table' / ''; }
}
@keyframes tk-marco { from, to { box-shadow: inset -1px 0 0 var(--regla); } }
@keyframes tk-pista { 0% { height: 28px; visibility: visible; opacity: 1; } 45% { opacity: 0; } 100% { height: 28px; visibility: visible; opacity: 0; } }

/* === Pantallas angostas === */
@media (max-width: 720px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  :where(.wrap) h2 { margin-top: 48px; }
  :where(.wrap) h2:has(> .n) { margin-top: 52px; }
  :where(.wrap) table { font-size: 15px; }
  :where(.wrap) :is(th, td) { padding-right: 12px; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  .col, .card { padding-left: 18px; padding-right: 18px; }
  .callout { padding: 20px 18px; }
  ol.steps > li, ol.q > li { padding-left: 44px; }
  ol.steps > li::before, ol.q > li::before { font-size: 24px; }
}
@media (min-width: 620px) {
  .exits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .tk-rel ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}