/* mktn.es · Artículo (plantilla v2, direcciones G26 y G27 de Claude Design, variante 26a "notas al margen")
   Una sola hoja para los 18 artículos. Raíl izquierdo (índice, autor, tarjeta), columna de lectura de 616 px y, desde 1368 px,
   un margen derecho de 312 px para la lectura relacionada. Por debajo de 984 px el índice pasa a barra fija.
   Puntos de cambio (min-width): 600 tablet, 984 raíl, 1064 columna 616, 1368 margen derecho.                       */

.art {
  --px: 20px; --fs: 17px; --h1: 36px; --h2: 26px; --h3: 20px; --q: 22px; --h2m: 48px; --h3m: 32px;
  --cap: 14px; --faqQ: 18px; --clH: 34px; --inFs: 18px; --tFs: 15px; --tm: 180px; --clP: 64px; --hdh: 56px;
  --wR: 0px; --coP: 18px; --soft: #3E3D3A;
  font-size: var(--fs); line-height: 1.6; color: var(--tx);
}
@media (min-width: 600px) {
  .art { --px: 40px; --fs: 18px; --h1: 44px; --h2: 30px; --h3: 21px; --q: 24px; --h2m: 56px; --h3m: 36px; --cap: 15px; --faqQ: 19px;
         --clH: 40px; --inFs: 19px; --tm: 150px; --clP: 72px; --coP: 22px 24px; }
}
@media (min-width: 984px) {
  .art { --px: 64px; --h1: 52px; --h2: 32px; --q: 26px; --clH: 46px; --inFs: 20px; --tFs: 15px; --tm: 0px; --clP: 80px; --wR: 0px; }
}
@media (min-width: 1064px) {
  .art { --fs: 19px; --h1: 60px; --h2: 36px; --h3: 22px; --q: 30px; --h2m: 64px; --h3m: 40px; --faqQ: 20px; --clH: 52px; --inFs: 21px;
         --tFs: 16px; --clP: 88px; --ex: max(0px, calc(100cqw - 936px)); --wR: calc(-1 * var(--ex)); }
}
@media (min-width: 1368px) { .art { --h1: 64px; --clH: 56px; --clP: 96px; } }

/* ── Cabecera ─────────────────────────────────────────────── */
.art-hero { padding: 96px var(--px) 32px; }
.art-hero-in { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.art-crumb { font-size: 15px; }
.art-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.art-crumb li { display: flex; gap: 10px; align-items: center; }
.art-crumb a { display: inline-block; padding: 12px 0; }
.art-crumb [aria-current] { color: var(--sc); }
.art-crumb li > span { color: var(--sc); }
.art-h1 { margin-top: 16px; font-size: var(--h1); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.art-intro { margin-top: 24px; font-size: var(--inFs); line-height: 1.5; text-wrap: pretty; max-width: 34em; }
.art-meta { margin-top: 24px; display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 1.4; color: var(--sc); }
.art-meta img { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.art-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.art-meta a { font-weight: 600; text-decoration: none; align-self: flex-start; color: var(--tx); }
.art-meta a:hover { text-decoration: underline; }
.art-dates { display: flex; flex-wrap: wrap; gap: 0 8px; }
.art-date { display: flex; gap: 8px; }
html:not(.js) .art-date { display: none; }

/* ── Retícula: columna de lectura y raíl ──────────────────── */
.art-wrap { padding: 0 var(--px); }
.art-grid { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; container-type: inline-size; }
.art-body { grid-column: 1; grid-row: 1; padding-top: 84px; min-width: 0; display: flow-root; font-size: var(--fs); }
@media (min-width: 600px) { .art-grid { padding-bottom: 96px; } .art-hero { padding-bottom: 56px; } .art-body > * { max-width: 616px; } .art-body > .art-table, .art-body > .art-fig.wide { max-width: none; } }
.art-aside { display: contents; }
.art-toc-wrap { grid-column: 1; grid-row: 1; align-self: stretch; pointer-events: none; z-index: 5; min-width: 0; display: flex; flex-direction: column; }
.art-au { grid-column: 1; grid-row: 2; margin-top: 56px; }
.art-card { grid-column: 1; grid-row: 3; margin-top: 56px; }

@media (min-width: 984px) {
  .art-hero { padding-top: 112px; }
  .art-hero-in { grid-template-columns: 232px minmax(0, 600px); column-gap: 64px; justify-content: start; }
  .art-crumb, .art-h1 { grid-column: 2; }
  .art-intro { grid-column: 2; grid-row: 3; align-self: end; }
  .art-meta { grid-column: 1; grid-row: 3; margin-top: 30px; align-self: start; }
  .art-meta > div { gap: 2px; }
  .art-dates { flex-direction: column; }
  .art-date .sep { display: none; }
  .art-grid { grid-template-columns: 232px minmax(0, 600px); column-gap: 64px; justify-content: start; padding-top: 56px; }
  .art-body { grid-column: 2; padding-top: 0; }
  .art-aside { display: flex; flex-direction: column; gap: 56px; grid-column: 1; grid-row: 1; min-width: 0; }
  .art-toc-wrap { flex: 1; grid-column: auto; grid-row: auto; }
  .art-au, .art-card { grid-column: auto; grid-row: auto; margin-top: 0; }
}
@media (min-width: 1064px) {
  .art-hero-in { grid-template-columns: 256px 616px; }
  .art-grid { grid-template-columns: 256px 616px; }
}
@media (min-width: 1368px) {
  .art-hero-in { grid-template-columns: 256px 616px minmax(240px, 312px); }
  .art-crumb, .art-h1 { grid-column: 2 / 4; }
  .art-grid { grid-template-columns: 256px 616px minmax(240px, 312px); }
  .art-body { grid-column: 2; }
}

/* ── Texto del cuerpo ─────────────────────────────────────── */
.art-body > h2, .art-qnum { margin: var(--h2m) 0 0; padding-top: 18px; border-top: 2px solid var(--tx); font-size: var(--h2); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; scroll-margin-top: calc(var(--hdh) + 80px); }
.art-body > h2 + p, .art-body > h2 + *, .art-body > .art-qnum + * { margin-top: 18px; }
.art-body > :first-child { margin-top: 0; }
.art-body > h3 { margin: var(--h3m) 0 12px; font-size: var(--h3); line-height: 1.3; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; scroll-margin-top: calc(var(--hdh) + 80px); }
.art-body > p { margin: 0 0 20px; text-wrap: pretty; }
.art-body a { text-decoration-thickness: 1px; }
.art-body a:hover { color: #1F3A30; text-decoration-thickness: 2px; }
.art-body strong { font-weight: 600; }
.art-body hr { border: 0; border-top: 1px solid var(--ln); margin: 40px 0 0; }
.art-body ul { margin: 0 0 24px; padding-left: 1.15em; list-style: square; display: flex; flex-direction: column; gap: 12px; }
.art-body ol { margin: 0 0 24px; padding-left: 1.5em; display: flex; flex-direction: column; gap: 14px; font-variant-numeric: tabular-nums; }
.art-body li { padding-left: 6px; text-wrap: pretty; }
.art-body li > ul, .art-body li > ol { margin: 12px 0 0; }
.art-body code { font-size: .9em; background: #E9E7E1; padding: 1px 5px; border-radius: 3px; }

/* aviso */
.art-callout { display: flex; gap: 14px; align-items: flex-start; padding: var(--coP); background: #E9E7E1; border-radius: var(--r-img); margin: 0 0 8px; }
.art-callout svg { flex: none; margin-top: 3px; }
.art-callout > div { min-width: 0; font-size: 17px; line-height: 1.55; }
.art-callout p { margin: 0 0 10px; text-wrap: pretty; }
.art-callout p:last-child { margin-bottom: 0; }
.art-callout.is-contact { background: #D7EDE8; }

/* lectura relacionada (enlaces con aspecto de botón): sin caja, con filetes */
.art-rel { margin: 4px 0 28px; border-bottom: 1px solid var(--ln); display: flex; flex-direction: column; }
.art-rel a { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; margin: 0 -12px; border-top: 1px solid var(--ln); text-decoration: none; transition: background-color .35s cubic-bezier(.25, .8, .25, 1); }
.art-rel a:hover { background: #E9E7E1; color: var(--tx); }
.art-rel a:focus-visible { outline: 2px solid var(--tx); outline-offset: -2px; }
.art-rel .t { font-size: 15px; line-height: 1.5; color: var(--sc); text-wrap: pretty; }
.art-rel .b { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--tx); }
@media (min-width: 1368px) { .art-rel { float: right; width: calc(var(--ex) - 64px); margin: 4px calc(-1 * var(--ex)) 28px 0; clear: right; } }

/* nota de acción: frase corta con enlace, como lectura relacionada */
.art-note { margin: 28px 0 28px; padding: 16px 0 0; border-top: 1px solid var(--ln); font-size: 17px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.art-body > p.art-note { margin: 28px 0; }

/* cita del autor */
.art-quote { margin: 36px 0 40px; display: flex; flex-direction: column; gap: 18px; clear: right; }
.art-quote .rule { display: block; width: 48px; height: 3px; background: #1F3A30; }
.art-quote p { margin: 0; font-size: var(--q); line-height: 1.25; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.art-quote .who { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.art-quote .who img { order: -1; width: 32px; height: 32px; border-radius: 50%; }

/* figuras */
.art-fig { margin: 32px 0 36px; }
.art-fig.wide { margin: 28px var(--wR) 32px 0; clear: right; }
.art-body > .art-fig.wide.cap { max-width: calc(720px * var(--ar)); }
.art-phase .art-fig.wide, .art-crit .art-fig.wide { margin-right: var(--wR); }
.art-fig img { width: 100%; height: auto; display: block; border-radius: var(--r-img); outline: 1px solid var(--ln); outline-offset: -1px; }
.art-fig figcaption { margin-top: 12px; font-size: var(--cap); line-height: 1.5; color: var(--sc); max-width: 40em; text-wrap: pretty; }
.art-fig.yt-embed { position: relative; }
.art-fig.yt-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-img); }
.art-fig.yt-embed .yt-play { position: absolute; top: calc(50% - 6px); left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--tx); color: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .4s cubic-bezier(.25, .8, .25, 1); }
.art-fig.yt-embed .yt-play:hover { background: #1F3A30; }
.art-fig.yt-embed .yt-play:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; }
.art-fig.yt-embed .yt-play svg { fill: currentColor; margin-left: 3px; }
.art-fig.yt-embed.yt-playing .yt-play { display: none; }
.yt-notice { color: var(--sc); }

/* tablas (región con scroll horizontal accesible) */
.art-table { --tbg: #E9E7E1; --tln: #C9C6BE; overflow-x: auto; overflow-y: hidden; margin: 28px var(--wR) 32px 0; clear: right; scrollbar-width: thin; scrollbar-color: #5E5D58 #E9E7E1; background: var(--tbg); border: 1px solid var(--ln); border-radius: var(--r-img); }
.art-table:focus-visible { outline: 2px solid var(--tx); outline-offset: 4px; }
.art-table table { width: 100%; min-width: calc(var(--tm) * var(--cols, 1)); border-collapse: separate; border-spacing: 0; font-size: var(--tFs); }
.art-table th { text-align: left; vertical-align: bottom; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--sc); padding: 16px 16px 12px; border-bottom: 2px solid var(--tx); }
.art-table td { vertical-align: top; padding: 18px 16px; line-height: 1.45; border-bottom: 1px solid var(--tln); background: var(--tbg); }
.art-table tbody tr:last-child td { border-bottom-color: transparent; }
.art-table th:first-child, .art-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--tbg); }
.art-table td:first-child { font-weight: 600; min-width: 9em; }
.art-table td .ck { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #1F3A30; color: #D7EDE8; font-size: 12px; line-height: 1; font-weight: 700; vertical-align: -4px; }
.art-table td:has(> .ck) { background: #D7EDE8; color: var(--tx); font-weight: 600; }
.art-table tr.win td .ck { background: #D7EDE8; color: #1F3A30; }
.art-table tr.win td { background: #1F3A30; color: var(--bg); border-bottom-color: #1F3A30; font-weight: 600; }
.art-table tr.win td:first-child { background: #1F3A30; }
.art-table td:not(:first-child) { font-weight: 400; }
.art-table tr.win td:not(:first-child) { font-weight: 600; }
.art-table td.has-bar { white-space: nowrap; min-width: 8.5em; }
.art-table .bar { display: block; position: relative; height: 6px; margin-top: 10px; border-bottom: 1px solid #5E5D58; }
.art-table .bar::before { content: ""; position: absolute; top: 0; height: 6px; left: var(--a); width: var(--w); background: var(--tx); }
.art-table tr.win .bar { border-bottom-color: #D7EDE8; }
.art-table tr.win .bar::before { background: #F8E5AB; }
.art-table .tag { display: inline-block; padding: 3px 8px; border-radius: var(--r-tag); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid var(--tx); background: transparent; color: var(--tx); }
.art-table tr.win .tag { background: #F8E5AB; color: var(--tx); border-color: #F8E5AB; }
.art-table table.is-feat th:nth-child(3) { background: var(--tx); color: var(--bg); border-bottom-color: var(--tx); padding-top: 10px; }
.art-table table.is-feat th:nth-child(3) img { display: inline-block; vertical-align: middle; border-radius: 50%; margin-right: 8px; }
.art-table table.is-feat tr:not(.win) td:nth-child(3) { background: var(--bg); }

/* caja del autor: petición de contacto conversacional, con aguamarina de menor peso */
.art-author { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: #D7EDE8; border-radius: var(--r-img); margin: 32px 0 0; clear: right; }
.art-author img { width: 40px; height: 40px; border-radius: 50%; }
.art-author > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.art-author p { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.art-author a { font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* fases numeradas y criterios */
.art-phase { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 0 12px; padding: 22px 0 8px; border-top: 1px solid var(--tx); margin: 0; }
.art-phase.is-label { grid-template-columns: minmax(0, 1fr); }
.art-phase.is-label .n { padding: 0 0 8px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.art-phase .n { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1F3A30; padding-top: 4px; }
.art-phase .t { margin: 0 0 12px; font-size: var(--h3); line-height: 1.3; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.art-phase p { margin: 0 0 18px; text-wrap: pretty; }
.art-body > .art-phase:last-of-type { border-bottom: 1px solid var(--ln); }
.art-crit { border-top: 1px solid var(--tx); margin: var(--h3m) 0 0; padding-top: 16px; }
.art-crit .lb { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc); }
.art-crit h3 { margin: 0 0 12px; font-size: var(--h3); line-height: 1.3; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.art-crit p { margin: 0 0 20px; text-wrap: pretty; }
.art-crit + .art-crit { margin-top: 28px; }

/* herramientas (tool-card): ficha con veredicto y a favor / en contra */
.art-tool { border-top: 1px solid var(--tx); margin: 28px 0 0; padding-top: 18px; }
.art-tool .hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.art-tool .nm { font-size: var(--h3); line-height: 1.3; font-weight: 600; letter-spacing: -.012em; }
.art-tool .pr { font-size: 15px; color: var(--sc); font-variant-numeric: tabular-nums; }
.art-tool .vd { margin: 10px 0 18px; text-wrap: pretty; }
.art-tool .pc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; margin-bottom: 8px; }
@media (min-width: 600px) { .art-tool .pc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-tool .lb { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc); }
.art-tool ul { margin: 0; padding-left: 1.15em; list-style: square; display: flex; flex-direction: column; gap: 8px; font-size: .94em; }
.art-tool li { padding-left: 4px; }

/* numeral de pregunta (h2 con etiqueta numérica) */
.art-qnum { padding-top: 18px; border-top: 2px solid var(--tx); display: block; }
.art-qnum .n { display: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1F3A30; }
.art-qnum h2 { margin: 0; padding: 0; border: 0; font-size: var(--h2); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; scroll-margin-top: calc(var(--hdh) + 80px); }

/* bloque de prototipo: lectura relacionada con imagen */
.art-proto { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 20px 0; margin: 32px 0; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); align-items: center; }
.art-proto img { width: 100%; height: auto; border-radius: var(--r-img); outline: 1px solid var(--ln); outline-offset: -1px; }
.art-proto > div { display: flex; flex-direction: column; gap: 8px; }
.art-proto strong { font-size: 18px; line-height: 1.3; font-weight: 600; }
.art-proto span { color: var(--soft); font-size: 16px; line-height: 1.5; }
.art-proto a { font-weight: 600; font-size: 16px; }
@media (min-width: 600px) { .art-proto { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; } }

/* FAQ con details y summary */
.art-faq { border-bottom: 1px solid var(--ln); margin: 18px 0 0; }
.art-faq details { border-top: 1px solid var(--ln); }
.art-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 16px 0; cursor: pointer; font-size: var(--faqQ); line-height: 1.3; font-weight: 600; list-style: none; text-wrap: balance; }
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }
.art-faq summary h3 { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; }
.art-faq .ico { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--tx); display: flex; align-items: center; justify-content: center; transition: background-color .35s cubic-bezier(.25, .8, .25, 1), color .35s cubic-bezier(.25, .8, .25, 1); }
.art-faq .ico svg { transition: transform .45s cubic-bezier(.25, .8, .25, 1); }
.art-faq details[open]:not(.is-closing) .ico svg { transform: rotate(45deg); }
.art-faq summary { transition: color .35s cubic-bezier(.25, .8, .25, 1); }
.art-faq details[open]:not(.is-closing) .ico { background: var(--tx); color: var(--bg); }
@media (hover: hover) { .art-faq summary:hover .ico { background: var(--tx); color: var(--bg); } .art-faq summary:hover { color: var(--sc); } }
.art-faq .ans { padding: 0 56px 22px 0; box-sizing: border-box; }
.art-faq .ans p { margin: 0 0 14px; text-wrap: pretty; }
.art-faq .ans p:last-child { margin-bottom: 0; }

/* ── Índice (raíl en escritorio, barra fija por debajo de 984 px) ── */
.art-toc { display: none; pointer-events: auto; position: sticky; top: var(--hdh); background: #E9E7E1; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); padding: 0 var(--px); margin: 0 calc(-1 * var(--px)); }
html.js .art-toc, .art-toc.is-static { display: block; }
.art-toc-head { max-width: 1312px; margin: 0 auto; display: flex; align-items: center; gap: 16px; min-height: 60px; }
.art-toc-lab { margin: 0; flex: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc); display: none; }
.art-toc-cur { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; text-decoration: none; padding: 12px 0; }
.art-toc-btn { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #E9E7E1; color: var(--tx); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .35s cubic-bezier(.25, .8, .25, 1), color .35s cubic-bezier(.25, .8, .25, 1); }
.art-toc .art-toc-btn { background: var(--bg); }
.art-toc .art-toc-btn:hover { background: var(--tx); }
.art-toc-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
html:not(.js) .art-toc-btn { display: none; }
.art-toc-btn:hover { background: var(--tx); color: var(--bg); }
.art-toc-btn:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }
.art-toc-btn svg { width: 16px; height: 16px; transition: transform .4s cubic-bezier(.25, .8, .25, 1); }
.art-toc.is-open .art-toc-btn svg { transform: rotate(180deg); }
.art-toc-list { list-style: none; margin: 0 auto; padding: 8px 0 20px; max-width: 1312px; max-height: calc(100vh - 160px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-top: 1px solid var(--ln); }
html.js .art-toc:not(.is-open) .art-toc-list { display: none; }
.art-toc-list a { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--tx); text-decoration: none; text-wrap: pretty; }
.art-toc-list a:hover { text-decoration: underline; }
.art-toc-list a:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }
.art-toc-list li.h3 a { padding: 9px 0 9px 16px; font-size: 14px; font-weight: 400; color: var(--sc); }
.art-toc-list a.is-on { font-weight: 600; color: var(--tx); }
.art-toc-list .mk { flex: none; width: 6px; height: 6px; align-self: center; background: transparent; }
.art-toc-list a.is-on .mk { background: #1F3A30; }
.art-toc-list li.h3 .mk { margin-left: -16px; margin-right: 10px; }
.art-toc-list li.is-hid { display: none; }
@media (min-width: 600px) { .art-toc-lab { display: block; } .art-toc-head, .art-toc-list { max-width: 616px; margin-left: 0; margin-right: auto; } }
@media (min-width: 984px) {
  .art-toc { top: calc(var(--hdh) + 24px); background: var(--bg); border: 0; border-top: 2px solid var(--tx); padding: 12px 0 0; margin: 0; }
  .art-toc .art-toc-btn { background: #E9E7E1; }
  .art-toc .art-toc-btn:hover { background: var(--tx); }
  .art-toc-head { min-height: 0; justify-content: space-between; max-width: none; }
  .art-toc-cur { display: none; }
  .art-toc-lab { display: block; }
  .art-toc-list { margin: 6px 0 0; padding: 0; max-width: none; border-top: 0; max-height: none; }
  html.js .art-toc:not(.is-open) .art-toc-list { display: block; }
  .art-toc.is-open .art-toc-list { max-height: calc(100vh - 240px); border-bottom: 1px solid var(--ln); }
}

/* ── Autor y tarjeta en el raíl ───────────────────────────── */
.art-au { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; border-top: 1px solid var(--ln); padding-top: 16px; min-width: 0; }
.art-au .lab { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc); }
.art-au .who { display: flex; gap: 14px; align-items: center; }
.art-au .who img { width: 48px; height: 48px; border-radius: 50%; }
.art-au .who > div, .art-au .who > a > span { display: flex; flex-direction: column; gap: 2px; }
.art-au .nm { font-size: 17px; font-weight: 600; text-decoration: none; }
.art-au .nm:hover { text-decoration: underline; }
.art-au .rl { font-size: 15px; color: var(--sc); }
.art-au .bio { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.art-au .more { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.art-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 24px; background: #D7EDE8; border-radius: var(--r-img); min-width: 0; }
.art-card .lab { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.art-card .tt { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.art-card p.ds { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.art-card a { margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 22px; background: var(--tx); color: var(--bg); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .4s cubic-bezier(.25, .8, .25, 1); }
.art-card a:hover { background: #1F3A30; color: var(--bg); }
.art-card a:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; }

/* ── Cierre del artículo (aguamarina, manda sobre las demás peticiones) ── */
.art-close { background: #D7EDE8; padding: var(--clP) var(--px); }
.art-close-in { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.art-close h2 { font-size: var(--clH); line-height: 1; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; }
.art-close-r { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.art-close-r p { font-size: 19px; line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.art-act { display: flex; flex-wrap: wrap; gap: 12px; }
.art-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 24px; background: var(--tx); color: var(--bg); font-weight: 600; text-decoration: none; transition: background-color .4s cubic-bezier(.25, .8, .25, 1), color .4s cubic-bezier(.25, .8, .25, 1); }
.art-btn:hover { background: #1F3A30; color: var(--bg); }
.art-btn.ghost { background: transparent; color: var(--tx); border: 1.5px solid var(--tx); }
.art-btn.ghost:hover { background: var(--tx); color: var(--bg); }
.art-btn:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; }
@media (min-width: 984px) {
  .art-close-in { grid-template-columns: 232px minmax(0, 600px); column-gap: 64px; justify-content: start; }
  .art-close h2, .art-close-r { grid-column: 2; }
}
@media (min-width: 1064px) { .art-close-in { grid-template-columns: 256px 616px; } }
@media (min-width: 1368px) { .art-close-in { grid-template-columns: 256px 616px minmax(240px, 312px); } .art-close h2 { grid-column: 2 / 4; } }

@media (prefers-reduced-motion: reduce) { .art * { transition: none !important; } }