/* =====================================================================================
   BLOQUES GRÁFICOS DE ARTÍCULO (.ar-bk)  ·  MAKERSWED · lujo silencioso
   Cuadros que acompañan la lectura de los artículos largos (es/ y en/ light-x-*).
   Se cargan tras site.css (mismas variables: --gold, --gold-ink, --olive-ink, --ink, --cream, --stone, --tf, --sans, --out).
   Sin colores nuevos ni sombras. Un filete fino dorado, serif Cormorant para la cifra o la frase, Inter pequeña para el rótulo.
   Componentes:  .ar-callout  nota destacada («En pocas palabras»)        .ar-facts    rejilla de 3-4 datos
                 .ar-steps     pasos o línea de tiempo (.is-time = horas)   .ar-quote    frase del propio texto
                 .ar-checklist lista de comprobación                       .ar-compare  2-3 columnas «antes/después», «ciudad/isla»
                 .ar-sun       mini-diagrama SVG de horas (líneas que se dibujan)
   Movimiento: blocks.js añade .is-in cuando el bloque entra en pantalla (IntersectionObserver); solo opacidad y transform (60 fps, sin saltos de layout).
   Con prefers-reduced-motion todo queda estático y visible; sin JS tampoco se oculta nada.
   ===================================================================================== */
.ar-body .ar-bk{position:relative;margin:48px 0}
.ar-body .ar-bk .ar-k{font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-ink);margin:0 0 14px}
.ar-body .ar-bk ul,.ar-body .ar-bk ol,.ar-body .ar-bk dl{margin:0;list-style:none}

/* ---- nota destacada: filete lateral dorado ---- */
.ar-body .ar-callout{padding:20px 0 20px 28px;background:linear-gradient(90deg,rgba(229,226,218,.55),rgba(229,226,218,0) 78%)}
.ar-body .ar-callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);transform-origin:top}
.ar-body .ar-callout .ar-t{font-family:var(--tf);font-weight:500;font-size:clamp(22px,2vw,27px);line-height:1.28;margin:0;text-wrap:pretty}

/* ---- datos clave: cifra grande + etiqueta ---- */
.ar-body .ar-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:4px 24px;padding-top:24px}
.ar-body .ar-facts::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);transform-origin:left}
.ar-body .ar-facts>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0;padding:0 0 22px}
.ar-body .ar-facts dd{font-family:var(--tf);font-weight:500;font-size:clamp(30px,3vw,38px);line-height:1;letter-spacing:-.01em;margin:0 0 10px;white-space:nowrap}
.ar-body .ar-facts dt{font-size:14px;line-height:20px;color:var(--olive-ink)}

/* ---- pasos numerados / línea de tiempo vertical ---- */
.ar-body .ar-steps{counter-reset:ars;padding:2px 0}
.ar-body .ar-steps::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:1px;background:var(--gold);transform-origin:top}
.ar-body .ar-steps li,.ar-body .ar-steps li:last-child{position:relative;counter-increment:ars;border:0;padding:10px 0 12px 56px;min-height:44px;font-size:17px;line-height:25px}
.ar-body .ar-steps li::before{content:counter(ars);position:absolute;left:0;top:8px;width:31px;height:31px;border:1px solid var(--gold);border-radius:50%;background:var(--cream);font:500 17px/29px var(--tf);font-variant-numeric:lining-nums;text-align:center;color:var(--gold-ink)}
.ar-body .ar-steps b{display:block;font-family:var(--tf);font-weight:500;font-size:clamp(20px,1.7vw,23px);line-height:1.2;margin-bottom:3px}
.ar-body .ar-steps span{display:block;color:var(--olive-ink)}
/* con horas: la hora a la izquierda, el punto sobre la línea */
.ar-body .ar-steps.is-time::before{left:77px}
.ar-body .ar-steps.is-time li,.ar-body .ar-steps.is-time li:last-child{padding-left:100px}
.ar-body .ar-steps.is-time li::before{content:attr(data-n);left:0;top:9px;width:62px;height:auto;border:0;border-radius:0;background:none;font:500 22px/27px var(--tf);text-align:right;color:var(--ink)}
.ar-body .ar-steps.is-time li::after{content:"";position:absolute;left:73px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--gold-ink);outline:4px solid var(--cream)}

/* ---- frase destacada ---- */
.ar-body .ar-quote{margin:56px 0;padding-top:26px}
.ar-body .ar-quote::before{content:"";position:absolute;left:0;top:0;width:48px;height:1px;background:var(--gold);transform-origin:left}
.ar-body .ar-quote p{font-family:var(--tf);font-style:italic;font-weight:500;font-size:clamp(26px,2.9vw,36px);line-height:1.2;margin:0;text-wrap:balance}

/* ---- lista de comprobación ---- */
.ar-body .ar-checklist li{position:relative;min-height:44px;padding:12px 0 11px 38px;font-size:17px;line-height:25px}
.ar-body .ar-checklist li::before{content:"";position:absolute;left:0;top:15px;width:20px;height:20px;border:1px solid var(--gold);border-radius:50%}
.ar-body .ar-checklist li::after{content:"";position:absolute;left:7px;top:18px;width:5px;height:9px;border:solid var(--gold-ink);border-width:0 1.5px 1.5px 0;transform:rotate(40deg)}

/* ---- comparación: 2 o 3 columnas separadas por un filete ---- */
.ar-body .ar-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--gold)}
.ar-body .ar-compare>div{position:relative;padding:22px 24px 8px 0}
.ar-body .ar-compare>div+div{padding-left:24px}
.ar-body .ar-compare>div+div::before{content:"";position:absolute;left:0;top:22px;bottom:12px;width:1px;background:rgba(201,166,107,.55)}
.ar-body .ar-compare .ar-k{color:var(--gold-ink)}
.ar-body .ar-compare .ar-c{font-size:17px;line-height:25px;margin:0 0 14px}
.ar-body .ar-compare .ar-c strong{font-family:var(--tf);font-weight:500;font-size:1.12em}

/* ---- mini-diagrama de horas (SVG) ---- */
.ar-body .ar-sun{margin:48px 0}
.ar-body .ar-sun svg{display:block;width:100%;max-width:470px;height:auto;overflow:visible}
.ar-body .ar-sun figcaption{font-size:13px;line-height:19px;color:var(--olive-ink);margin-top:14px;max-width:470px}
.ar-sun .tk{font:500 10px var(--sans);fill:var(--olive-ink);text-anchor:middle}
.ar-sun .gr{stroke:rgba(201,166,107,.35);stroke-width:.6}
.ar-sun .rl{font:500 11px var(--sans);fill:var(--olive-ink)}
.ar-sun .vl{font:500 11.5px var(--sans);fill:var(--ink);font-variant-numeric:tabular-nums}
.ar-sun .ln{fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round}
.ar-sun .sg{fill:none;stroke:var(--gold-ink);stroke-width:2.2;stroke-linecap:round}
.ar-sun .d1{fill:var(--gold-ink)}
.ar-sun .d0{fill:var(--cream);stroke:var(--gold-ink);stroke-width:1.3}

/* ---- móvil: una columna, zonas de toque de 44 px ---- */
@media (max-width:767px){
  .ar-body .ar-bk{margin:38px 0}
  .ar-body .ar-callout{padding:16px 0 16px 20px}
  .ar-body .ar-compare{grid-template-columns:1fr}
  .ar-body .ar-compare>div,.ar-body .ar-compare>div+div{padding:20px 0 6px}
  .ar-body .ar-compare>div+div{border-top:1px solid rgba(201,166,107,.55)}
  .ar-body .ar-compare>div+div::before{content:none}
  .ar-body .ar-steps li,.ar-body .ar-steps li:last-child{padding-left:50px}
  .ar-body .ar-steps.is-time::before{left:59px}
  .ar-body .ar-steps.is-time li,.ar-body .ar-steps.is-time li:last-child{padding-left:80px}
  .ar-body .ar-steps.is-time li::before{width:50px;font-size:19px}
  .ar-body .ar-steps.is-time li::after{left:55px}
  .ar-body .ar-quote{margin:44px 0}
}

/* ---- entrada: solo con JS, sin reducir movimiento. Estado oculto SOLO hasta .is-in ---- */
@media (prefers-reduced-motion:no-preference){
  .bk-js .ar-bk .ar-t,.bk-js .ar-quote p,.bk-js .ar-bk .ar-k,
  .bk-js .ar-facts>div,.bk-js .ar-steps li,.bk-js .ar-checklist li,.bk-js .ar-compare>div,.bk-js .ar-sun figcaption,.bk-js .ar-sun .it{opacity:0;transform:translateY(12px)}
  .bk-js .ar-bk.is-in .ar-t,.bk-js .ar-bk.is-in .ar-k,.bk-js .ar-quote.is-in p,
  .bk-js .is-in.ar-facts>div,.bk-js .is-in.ar-steps li,.bk-js .is-in.ar-checklist li,.bk-js .is-in.ar-compare>div,.bk-js .is-in.ar-sun figcaption,.bk-js .is-in.ar-sun .it{opacity:1;transform:none;transition:opacity .7s var(--out),transform .7s var(--out);transition-delay:calc(var(--i,0) * 90ms + 120ms)}
  .bk-js .ar-bk.is-in .ar-k{transition-delay:60ms}
  /* filetes que se dibujan */
  .bk-js .ar-callout::before,.bk-js .ar-steps::before{transform:scaleY(0)}
  .bk-js .ar-facts::before,.bk-js .ar-quote::before{transform:scaleX(0)}
  .bk-js .ar-callout.is-in::before,.bk-js .ar-steps.is-in::before{transform:none;transition:transform 1.1s var(--out)}
  .bk-js .ar-facts.is-in::before,.bk-js .ar-quote.is-in::before{transform:none;transition:transform 1s var(--out)}
  .bk-js .ar-steps.is-in::before{transition-duration:1.5s}
  /* marcas de la lista: el círculo se abre y la marca aparece tras el texto */
  .bk-js .ar-checklist li::before{transform:scale(.4);opacity:0}
  .bk-js .ar-checklist li::after{opacity:0}
  .bk-js .is-in.ar-checklist li::before{transform:none;opacity:1;transition:transform .6s var(--out),opacity .4s;transition-delay:calc(var(--i,0) * 90ms + 200ms)}
  .bk-js .is-in.ar-checklist li::after{opacity:1;transition:opacity .4s;transition-delay:calc(var(--i,0) * 90ms + 420ms)}
  /* diagrama: cada línea se dibuja de izquierda a derecha, con el punto y la cifra detrás */
  .bk-js .ar-sun .ln,.bk-js .ar-sun .sg{stroke-dasharray:1;stroke-dashoffset:1}
  .bk-js .is-in.ar-sun .ln,.bk-js .is-in.ar-sun .sg{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--out);transition-delay:calc(var(--i,0) * 90ms + 150ms)}
  .bk-js .ar-sun .it{transform:none}
  .bk-js .is-in.ar-sun .it{transition-delay:calc(var(--i,0) * 90ms + 700ms)}
}
@media (prefers-reduced-motion:reduce){.ar-bk *,.ar-bk *::before,.ar-bk *::after{transition:none!important;animation:none!important}}