/* ═══════════════════════════════════════════════════════════
   VWT · ARTÍCULO · plantilla única, construida de cero
   Apertura tipográfica sobre papel; la foto como banda ancha;
   lectura en dos columnas con el resumen y el índice fijos a la
   izquierda; cierre en bordó; seguir leyendo como lista.
   Contrato del sitio: Poppins, volanta .82rem bordó, títulos del
   sistema, texto ligero, filetes finos.
   ═══════════════════════════════════════════════════════════ */
.ar{ --pad: clamp(1.4rem,5vw,6rem); --max: calc(1400px * var(--k, 1)); --sec: clamp(3.2rem,calc(7 * var(--1vh)),5.6rem); --t: .9s; --e: cubic-bezier(.22,1,.36,1);
     --acc: #AC3749; --vino: #6B1D2A; --ink: #0B0708; --soft: #3A3436; --mut: #7F6E73; --papel: #FFFFFF; --humo: #F6F2F0; --linea: rgba(11,7,8,.14);
     font-family: 'Poppins', sans-serif; background: var(--papel); color: var(--ink) }
.ar-in{ max-width: var(--max); margin-inline: auto; padding-inline: var(--pad) }
.ar-kick{ display: block; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--acc) }
.ar-kick-light{ color: rgba(255,255,255,.78) }
.ar-h1{ margin: clamp(.9rem,1.8vw,1.3rem) 0 0; font-size: calc(99.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .94; max-width: 20ch }
.ar-h2{ margin: clamp(.9rem,1.8vw,1.3rem) 0 0; font-size: calc(67.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .96; max-width: 20ch; color: #fff }
.ar-lead{ margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 54ch; font-size: calc(21.1px * var(--k, 1)); line-height: 1.55; font-weight: 300; color: var(--soft) }
.ar-miga{ margin: 0 0 1.2rem; font-size: .82rem; color: var(--mut) }
.ar-miga a{ color: var(--mut); text-decoration: none }
.ar-miga a:hover{ color: var(--acc) }
.ar-miga span{ margin: 0 .3rem }
.ar-meta{ margin: clamp(1.4rem,2.6vw,2rem) 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .82rem; color: var(--mut) }
.ar-meta i{ font-style: normal; margin: 0 .5rem; opacity: .6 }

/* ── apertura ── */
.ar-open{ margin-top: var(--nav-h, 62px); padding: var(--sec) 0 0 }
.ar-fig{ margin: clamp(2.4rem,5vw,3.6rem) auto 0; max-width: var(--max); padding-inline: var(--pad) }
.ar-fig img{ width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; border-radius: 22px; background: var(--ink) }

/* ── lectura ── */
.ar-lectura{ padding: var(--sec) 0 }
.ar-grid{ display: grid; grid-template-columns: minmax(0,.32fr) minmax(0,.68fr); gap: calc(80.0px * var(--k, 1)); align-items: start }
.ar-lado-fijo{ position: sticky; top: calc(var(--nav-h, 62px) + 2rem) }
.ar-resumen{ padding: calc(25.6px * var(--k, 1)); border-radius: 18px; background: var(--vino); color: #fff }
.ar-resumen-k{ margin: 0 0 .5rem; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.75) }
.ar-resumen p:last-child{ margin: 0; font-size: 1rem; line-height: 1.6; font-weight: 300 }
.ar-idx-k{ margin: 1.6rem 0 .6rem; font-size: .82rem; font-weight: 600; color: var(--acc) }
.ar-idx{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea) }
.ar-idx li{ border-bottom: 1px solid var(--linea) }
.ar-idx a{ display: block; padding: .6rem 0; font-size: .92rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: color var(--t) var(--e), padding-left var(--t) var(--e) }
.ar-idx a:hover{ color: var(--acc); padding-left: .3rem }
.ar-cuerpo > *:first-child{ margin-top: 0 }
.ar-cuerpo p{ margin: 0 0 1.4rem; max-width: 66ch; font-size: calc(19.5px * var(--k, 1)); line-height: 1.7; font-weight: 300; color: var(--soft) }
.ar-cuerpo p:first-child em{ font-style: normal; font-size: calc(23.2px * var(--k, 1)); font-weight: 300; letter-spacing: -.02em; line-height: 1.45; color: var(--ink) }
.ar-cuerpo h2{ margin: clamp(2.4rem,4vw,3.4rem) 0 1.2rem; padding-top: calc(25.6px * var(--k, 1)); border-top: 1px solid var(--linea); font-size: calc(48.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: 1; max-width: 22ch; scroll-margin-top: calc(var(--nav-h, 62px) + 1rem) }
.ar-cuerpo h3{ margin: 1.8rem 0 .8rem; font-size: calc(24.8px * var(--k, 1)); font-weight: 700; letter-spacing: -.04em }
.ar-cuerpo ul, .ar-cuerpo ol{ margin: 0 0 1.4rem; padding-left: 1.2rem; max-width: 66ch }
.ar-cuerpo li{ margin-bottom: .5rem; font-size: calc(18.6px * var(--k, 1)); line-height: 1.65; font-weight: 300; color: var(--soft) }
.ar-cuerpo li::marker{ color: var(--acc) }
.ar-cuerpo a{ color: var(--acc); text-decoration: underline; text-underline-offset: .18em }
.ar-cuerpo strong{ color: var(--ink); font-weight: 600 }
.ar-cuerpo img{ max-width: 100%; height: auto; border-radius: 16px; margin: 1rem 0 1.6rem }
.ar-cuerpo blockquote{ margin: 2rem 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--acc); font-size: calc(25.6px * var(--k, 1)); font-weight: 300; letter-spacing: -.02em; line-height: 1.35 }
.ar-cuerpo table{ width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: .98rem }
.ar-cuerpo th, .ar-cuerpo td{ text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top }
.ar-cuerpo th{ font-weight: 600 }
.ar-autor{ display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; margin-top: calc(54.4px * var(--k, 1)); padding-top: calc(28.8px * var(--k, 1)); border-top: 1px solid var(--linea) }
.ar-autor-ini{ width: 56px; height: 56px; border-radius: 50%; background: var(--humo); color: var(--acc); display: grid; place-items: center; font-weight: 700 }
.ar-autor-k{ margin: 0; font-size: .78rem; font-weight: 600; color: var(--acc) }
.ar-autor-n{ margin: .1rem 0 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em }
.ar-autor-b{ margin: .3rem 0 0; font-size: .92rem; line-height: 1.5; font-weight: 300; color: var(--soft) }

/* ── cierre en bordó ── */
.ar-cta{ padding: var(--sec) 0; background: var(--vino); color: #fff }
.ar-cta-grid{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: calc(64.0px * var(--k, 1)); align-items: end }
.ar-cta-p{ margin: 1rem 0 0; font-size: 1rem; font-weight: 300; color: rgba(255,255,255,.82) }
.ar-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.1rem; border-radius: 100px; background: #fff !important; color: var(--vino) !important; -webkit-text-fill-color: var(--vino); text-decoration: none; font: inherit; font-size: .88rem; font-weight: 600; transition: background-color var(--t) var(--e), color var(--t) var(--e), transform var(--t) var(--e) }
.ar-btn:hover{ background: var(--acc) !important; color: #fff !important; -webkit-text-fill-color: #fff; transform: translateY(-2px) }

/* ── seguir leyendo ── */
.ar-rel{ padding: var(--sec) 0; background: var(--humo) }
.ar-rel-l{ list-style: none; margin: clamp(1.4rem,2.6vw,2rem) 0 0; padding: 0; border-top: 1px solid var(--linea) }
.ar-rel-l li{ border-bottom: 1px solid var(--linea) }
.ar-rel-l a{ display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k i" "t i"; align-items: center; padding: clamp(1rem,2vw,1.4rem) 0; text-decoration: none; color: inherit }
.ar-rel-k{ grid-area: k; font-size: .82rem; font-weight: 600; color: var(--acc) }
.ar-rel-t{ grid-area: t; margin-top: .2rem; font-size: calc(28.8px * var(--k, 1)); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; transition: color var(--t) var(--e) }
.ar-rel-l i{ grid-area: i; font-style: normal; font-size: 1.6rem; color: var(--acc); transition: transform .6s var(--e) }
.ar-rel-l a:hover .ar-rel-t{ color: var(--acc) }
.ar-rel-l a:hover i{ transform: translateX(4px) }

@media (max-width: 900px){
  .ar-grid{ grid-template-columns: 1fr }
  .ar-lado-fijo{ position: static; margin-bottom: 2rem }
  .ar-cta-grid{ grid-template-columns: 1fr; align-items: start }
  .ar-fig img{ aspect-ratio: 16/10 }
}
html[data-theme="dark"] .ar, body.dark .ar{ --ink: #F7F5F5; --soft: #DCD7D7; --mut: #ADA5A5; --papel: #000; --humo: #0C0A0A; --linea: rgba(255,255,255,.12) }

/* ── piezas dentro del cuerpo: tour relacionado y notas ── */
.ar-tour{ display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k i" "t i" "s i"; align-items: center; gap: 0 1rem; margin: 2rem 0; padding: calc(25.6px * var(--k, 1)); border-radius: 18px; background: var(--humo); text-decoration: none; color: inherit; max-width: 66ch; transition: background-color var(--t) var(--e) }
.ar-tour:hover{ background: var(--vino); color: #fff }
.ar-tour-k{ grid-area: k; font-size: .82rem; font-weight: 600; color: var(--acc) }
.ar-tour:hover .ar-tour-k{ color: rgba(255,255,255,.78) }
.ar-tour-t{ grid-area: t; margin-top: .2rem; font-size: calc(25.6px * var(--k, 1)); font-weight: 700; letter-spacing: -.045em; line-height: 1.05 }
.ar-tour-s{ grid-area: s; margin-top: .3rem; font-size: .95rem; font-weight: 300; color: var(--soft) }
.ar-tour:hover .ar-tour-s{ color: rgba(255,255,255,.82) }
.ar-tour i{ grid-area: i; font-style: normal; font-size: 1.6rem; color: var(--acc); transition: transform .6s var(--e) }
.ar-tour:hover i{ color: #fff; transform: translateX(4px) }
.ar-nota{ margin: 1.6rem 0 !important; padding: 1.2rem 0 1.2rem 1.4rem; border-left: 3px solid var(--acc); font-size: 1rem !important; line-height: 1.6 !important; font-weight: 300; color: var(--soft) }
.ar-nota a{ color: var(--acc) }
.ar-lado{ min-width: 0 }