/* ============================================================
   BLOG · plantilla de ARTÍCULO  (#articulo)  — prefijo ar-
   «La página impresa»: mancheta con logotipo dorado, título en Fraunces,
   portada que pasa de duotono a color, columna de 68ch con capitular,
   índice lateral pegajoso + VELA DE LECTURA (tubo de vidrio que se llena
   de oro líquido), barra inferior en celular, CTA del tomo en superficie
   que destila oro, «Te puede interesar» y banda «Seguir leyendo».
   Generada por tools/blog_gen.py → blog/<slug>.html (es/en/pt).
   ============================================================ */
#articulo{position:relative;background:var(--ink);color:var(--cream);isolation:isolate;
  --ar-measure:68ch;--ar-fs:clamp(1.0625rem,.96rem + .28vw,1.1875rem);--ar-text:#DED4C4}
#articulo .ar-sprite{position:absolute;width:0;height:0;overflow:hidden}
#articulo .ar-glyph{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#articulo .ar-sep{display:inline-block;width:14px;height:1px;background:currentColor;opacity:.45;flex:none}

/* ---------------------------------------------------------------- cabecera */
#articulo .ar-hero{position:relative;padding-top:calc(var(--nav-h) + clamp(14px,2.4vw,34px));overflow:hidden;overflow:clip}
#articulo .ar-hero:before{content:"";position:absolute;inset:-20% -10% auto;height:90%;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 52% at 50% 18%,rgba(216,166,70,.13) 0%,rgba(216,166,70,.04) 45%,rgba(5,9,15,0) 72%)}
#articulo .ar-mast{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;
  padding-block:10px;border-bottom:1px solid var(--line)}
#articulo .ar-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-right:10px;
  font:700 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);transition:color .3s}
#articulo .ar-back:hover,#articulo .ar-back:focus-visible{color:var(--gold-2)}
#articulo .ar-mast__brand{display:flex;align-items:center;gap:14px}
#articulo .ar-rule{display:block;width:clamp(26px,5vw,84px);height:1px;background:linear-gradient(90deg,rgba(216,166,70,0),var(--gold))}
#articulo .ar-mast__brand .ar-rule:last-child{background:linear-gradient(270deg,rgba(216,166,70,0),var(--gold))}
#articulo .ar-logo{height:20px;width:auto}
#articulo .ar-mast__blog{font:italic 500 1.08rem/1 var(--serif);color:var(--gold-2);letter-spacing:.01em}
#articulo .ar-folio{justify-self:end;font-size:.78rem;letter-spacing:.14em;color:var(--gold-2);white-space:nowrap}
#articulo .ar-folio__of{color:var(--mute)}

#articulo .ar-hero__in{max-width:1180px;margin-inline:auto;padding-top:clamp(44px,7vw,104px);text-align:center}
#articulo .ar-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin:0;
  font:700 max(12px,.74rem)/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
#articulo .ar-cat{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--hair);border-radius:999px;
  background:rgba(216,166,70,.05);transition:border-color .4s,background-color .4s}
#articulo .ar-cat:hover,#articulo .ar-cat:focus-visible{border-color:var(--gold);background:rgba(216,166,70,.1)}
#articulo .ar-cat__rom{color:var(--cream)}
#articulo .ar-time{color:var(--cream-2)}
#articulo .ar-time b{color:var(--cream);font-size:1.15em;letter-spacing:0}
#articulo .ar-title{margin:clamp(22px,2.6vw,34px) auto 0;max-width:21ch;font:500 clamp(2.15rem,4.9vw,5.1rem)/1.03 var(--serif);
  letter-spacing:-.028em;color:var(--cream);text-wrap:balance}
#articulo .ar-title .tn-line{padding-bottom:.06em}
#articulo .ar-lead{max-width:60ch;margin:clamp(20px,2.4vw,30px) auto 0;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.65;color:var(--cream-2);text-wrap:pretty}

#articulo .ar-cover{max-width:var(--max);margin:clamp(40px,6vw,88px) auto 0;padding-inline:var(--gut)}
#articulo .ar-cover__frame{position:relative;aspect-ratio:21/9;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(70% 90% at 72% 28%,rgba(216,166,70,.34),rgba(216,166,70,.06) 48%,rgba(5,9,15,0) 75%),linear-gradient(135deg,#0B1825 0%,#05090F 55%,#2A1E0B 100%);
  border:1px solid var(--hair);box-shadow:0 70px 120px -50px rgba(0,0,0,.85),0 0 0 6px rgba(216,166,70,.035)}
/* Estado final «color cálido controlado»: nunca color pleno (bancos de imágenes con lilas, magentas, naranjas):
   saturación contenida + velo de oro en luz suave. Es el estado sin JS, con ?reduce y tras el revelado. */
#articulo .ar-cover__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 45%;
  filter:saturate(.5) sepia(.34) contrast(1.04) brightness(.96);transition:filter 2.4s var(--ease),transform 2.8s var(--ease)}
#articulo .ar-cover__warm{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#F4D58A 0%,#D8A646 55%,#8A6424 100%);
  mix-blend-mode:soft-light;opacity:.36}
#articulo .ar-cover__tone{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#C9A050 0%,#8A6424 100%);
  mix-blend-mode:color;opacity:0;transition:opacity 2.4s var(--ease)}
#articulo .ar-cover__edge{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,15,0) 55%,rgba(5,9,15,.55) 100%),linear-gradient(90deg,rgba(5,9,15,.25),rgba(5,9,15,0) 18%,rgba(5,9,15,0) 82%,rgba(5,9,15,.25))}
/* «Revelado»: con JS la portada llega en duotono tinta-oro y pasa a color al entrar en pantalla */
html.js #articulo.ar--js .ar-cover__img{filter:grayscale(1) sepia(.35) contrast(1.05) brightness(.8);transform:scale(1.04)}
html.js #articulo.ar--js .ar-cover__tone{opacity:.55}
html.js #articulo.ar--js .ar-cover.is-color .ar-cover__img{filter:saturate(.5) sepia(.34) contrast(1.04) brightness(.96);transform:none}
html.js #articulo.ar--js .ar-cover.is-color .ar-cover__tone{opacity:0}

/* ---------------------------------------------------------------- lectura */
#articulo .ar-read{position:relative;padding-block:clamp(56px,7vw,112px) clamp(56px,7vw,112px)}
#articulo .ar-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
#articulo .ar-toc,#articulo .ar-vela{display:none}

#articulo .ar-body{width:100%;max-width:var(--ar-measure);font-size:var(--ar-fs);line-height:1.78;color:var(--ar-text);counter-reset:arh;
  overflow-wrap:break-word;hyphens:manual}
#articulo .ar-body>*:first-child{margin-top:0}
#articulo .ar-body p{margin:0 0 1.2em}
#articulo .ar-body strong{color:var(--cream);font-weight:700}
#articulo .ar-body em{font-style:italic}
#articulo .ar-body a{color:var(--gold-2);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:.22em}
#articulo .ar-body a:hover{text-decoration-color:var(--gold-2)}
#articulo .ar-body .ar-cap::first-letter{float:left;margin:.08em .12em 0 -.02em;font:600 4.9em/.8 var(--serif);color:var(--gold-2);
  text-shadow:0 0 28px rgba(216,166,70,.35)}
#articulo .ar-body .ar-cap{font-size:1.06em;color:var(--cream)}
#articulo .ar-body .ar-h2{position:relative;counter-increment:arh;margin:2.3em 0 .75em;padding-top:1.1em;border-top:1px solid var(--line);
  font:500 clamp(1.62rem,1.2rem + 1.1vw,2.3rem)/1.14 var(--serif);letter-spacing:-.016em;color:var(--cream);
  scroll-margin-top:calc(var(--nav-h) + 28px);text-wrap:balance}
#articulo .ar-body .ar-h2:before{content:counter(arh,decimal-leading-zero);display:block;margin-bottom:.85em;
  font:800 max(12px,.72rem)/1 var(--sans);letter-spacing:.22em;color:var(--gold);font-variant-numeric:tabular-nums}
#articulo .ar-body .ar-h2:after{content:"";position:absolute;left:0;top:-1px;width:56px;height:1px;background:var(--gold-grad)}
#articulo .ar-body h3{margin:1.9em 0 .55em;font:700 1.12em/1.35 var(--sans);letter-spacing:-.005em;color:var(--cream)}
#articulo .ar-body h4{margin:1.6em 0 .5em;font:700 .8em/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
#articulo .ar-body ul,#articulo .ar-body ol{margin:0 0 1.4em;padding:0;list-style:none}
#articulo .ar-body li{position:relative;padding-left:1.6em;margin:.45em 0}
#articulo .ar-body ul>li:before{content:"";position:absolute;left:.3em;top:.72em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
#articulo .ar-body ol{counter-reset:arol}
#articulo .ar-body ol>li{counter-increment:arol;padding-left:2.1em}
#articulo .ar-body ol>li:before{content:counter(arol,decimal-leading-zero);position:absolute;left:0;top:.18em;
  font:800 .78em/1.6 var(--sans);color:var(--gold-2);font-variant-numeric:tabular-nums}
#articulo .ar-body blockquote{position:relative;margin:2em 0;padding:.3em 0 .3em 1.5em;font:italic 400 1.22em/1.55 var(--serif);color:var(--cream)}
#articulo .ar-body blockquote:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold) 55%,rgba(167,121,39,.2))}
#articulo .ar-body blockquote p:last-child{margin-bottom:0}
#articulo .ar-tblbox{position:relative;margin:2em 0}
#articulo .ar-body .ar-tbl{position:relative;margin:0;background:rgba(8,18,28,.55);max-height:min(72vh,640px);overflow:auto;overscroll-behavior-x:contain}
#articulo .ar-body .ar-tbl:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
#articulo .ar-body .tbl{font-size:.88em;line-height:1.5;min-width:520px;border-collapse:separate;border-spacing:0}
#articulo .ar-body .tbl th{white-space:nowrap;font-size:max(12px,.74rem);position:sticky;top:0;z-index:2;background:#0B1825;box-shadow:inset 0 -1px 0 var(--hair)}
#articulo .ar-body .tbl td:first-child,#articulo .ar-body .tbl th:first-child{position:sticky;left:0;z-index:1;background:#0A1622;box-shadow:inset -1px 0 0 var(--line)}
#articulo .ar-body .tbl th:first-child{z-index:3;background:#0B1825;box-shadow:inset -1px 0 0 var(--line),inset 0 -1px 0 var(--hair)}
/* Borde derecho que avisa que hay más columnas + pista «Desliza para ver más» (se desvanece tras el primer scroll) */
#articulo .ar-tblbox:after{content:"";position:absolute;top:1px;bottom:1px;right:1px;width:44px;z-index:4;pointer-events:none;border-radius:0 var(--r) var(--r) 0;
  background:linear-gradient(270deg,rgba(5,9,15,.92),rgba(5,9,15,0));opacity:0;transition:opacity .5s}
#articulo .ar-tblbox.is-wide:after{opacity:1}
#articulo .ar-tblbox.is-wide.is-end:after{opacity:0}
#articulo .ar-tbl__hint{display:none;align-items:center;gap:10px;margin-top:10px;font:700 max(12px,.72rem)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);transition:opacity .8s}
#articulo .ar-tbl__hint i{position:relative;width:34px;height:1px;background:var(--line-2);overflow:hidden}
#articulo .ar-tbl__hint i:after{content:"";position:absolute;inset:0;background:var(--gold-2);animation:ar-hint 1.8s var(--ease) infinite}
#articulo .ar-tblbox.is-wide .ar-tbl__hint{display:inline-flex}
#articulo .ar-tblbox.is-used .ar-tbl__hint{opacity:0}
/* Separador ornamental (artículos sin imagen interna) */
#articulo .ar-orn{display:flex;align-items:center;gap:16px;margin:2.6em auto;max-width:420px;color:var(--gold)}
#articulo .ar-orn i{flex:1;height:1px;background:linear-gradient(90deg,rgba(216,166,70,0),var(--gold))}
#articulo .ar-orn i:last-child{background:linear-gradient(270deg,rgba(216,166,70,0),var(--gold))}
#articulo .ar-orn svg{width:40px;height:16px;fill:none;stroke:var(--gold-2);stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(216,166,70,.45))}
#articulo .ar-orn svg path:first-child{fill:rgba(216,166,70,.22)}
#articulo .ar-body .tbl td{color:var(--cream-2)}
#articulo .ar-body .tbl tr:last-child td{border-bottom:0}
#articulo .ar-fig{margin:2.4em 0}
#articulo .ar-fig__frame{position:relative;display:block;padding:10px;border:1px solid var(--hair);border-radius:calc(var(--r) - 2px);
  background:linear-gradient(160deg,rgba(216,166,70,.07),rgba(216,166,70,0) 40%,rgba(216,166,70,.05))}
#articulo .ar-fig__frame:before{content:"";position:absolute;inset:4px;border:1px solid rgba(216,166,70,.12);border-radius:calc(var(--r) - 6px);pointer-events:none}
#articulo .ar-fig img{width:100%;height:auto;border-radius:calc(var(--r) - 12px);filter:grayscale(.65) sepia(.32) contrast(1.06) brightness(.92)}
/* Grado de oro permanente: las imágenes de banco llegan con colores ajenos (azules, rojos) */
#articulo .ar-fig__frame:after{content:"";position:absolute;inset:10px;border-radius:calc(var(--r) - 12px);pointer-events:none;
  background:linear-gradient(120deg,#C9A050,#8A6424);mix-blend-mode:color;opacity:.38}

/* ---------------------------------------------------------------- escritorio: índice + vela */
@media (min-width:1100px){
  #articulo .ar-grid{grid-template-columns:minmax(190px,250px) minmax(0,var(--ar-measure)) minmax(72px,110px);justify-content:center;
    justify-items:stretch;align-items:start;column-gap:clamp(40px,4.6vw,92px)}
  #articulo .ar-toc{display:block;position:sticky;top:112px;max-height:calc(100vh - 150px);padding-top:6px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
  #articulo .ar-toc::-webkit-scrollbar{display:none}
  #articulo .ar-vela{display:block;position:sticky;top:calc(50vh - 200px)}
  #articulo .ar-fig{margin-inline:-36px}
}
#articulo .ar-toc__k{margin:0 0 12px;padding-top:2px;font:700 max(12px,.72rem)/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
#articulo .ar-toc__list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
#articulo .ar-toc__list a{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:baseline;
  min-height:40px;padding:8px 0 8px 16px;font:500 .84rem/1.4 var(--sans);color:var(--mute);transition:color .35s}
#articulo .ar-toc__list a:before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;background:var(--gold-grad);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
#articulo .ar-toc__n{font-size:max(12px,.68rem);letter-spacing:.08em;color:var(--mute);transition:color .35s}
#articulo .ar-toc__list a:hover{color:var(--cream)}
#articulo .ar-toc__list a.is-active{color:var(--gold-2)}
#articulo .ar-toc__list a.is-active .ar-toc__n{color:var(--gold)}
#articulo .ar-toc__list a.is-active:before{transform:scaleY(1)}
#articulo .ar-toc__list a.is-done{color:var(--cream-2)}

#articulo .ar-vela__in{display:flex;flex-direction:column;align-items:center;gap:12px}
#articulo .ar-vela__svg{width:44px;height:min(300px,44vh);overflow:visible;filter:drop-shadow(0 0 14px rgba(216,166,70,.22))}
#articulo .ar-vela__glass{fill:rgba(243,234,219,.035)}
#articulo .ar-vela__rim{fill:none;stroke:rgba(244,213,138,.5);stroke-width:1}
#articulo .ar-vela__shine{fill:rgba(255,255,255,.1)}
#articulo .ar-vela__wave{animation:ar-wave 2.6s linear infinite}
@keyframes ar-wave{to{transform:translateX(22px)}}
#articulo .ar-vela__p{margin:0;font-size:1.25rem;line-height:1;color:var(--cream)}
#articulo .ar-vela__p span{font-size:.62em;color:var(--gold-2);margin-left:1px}
#articulo .ar-vela__l{margin:0;font:700 max(12px,.66rem)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* ---------------------------------------------------------------- celular: barra inferior + hoja */
#articulo .ar-dock{display:none}
@media (max-width:1099px){
  #articulo.ar--js .ar-dock{position:fixed;left:0;right:0;bottom:0;z-index:850;display:flex;align-items:center;justify-content:space-between;gap:8px;
    height:calc(56px + env(safe-area-inset-bottom,0px));padding:0 max(10px,calc(var(--gut) - 8px)) env(safe-area-inset-bottom,0px);
    background:rgba(5,9,15,.9);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
    border-top:1px solid var(--line);transform:translateY(calc(100% + 4px));transition:transform .6s var(--ease);visibility:hidden}
  #articulo.ar--js .ar-dock.is-on{transform:none;visibility:visible}
  #articulo.ar--js .ar-read{padding-bottom:calc(clamp(56px,7vw,112px) + 40px)}
}
#articulo .ar-dock__bar{position:absolute;left:0;right:0;top:-1px;height:3px;background:rgba(243,234,219,.08);overflow:hidden}
#articulo .ar-dock__bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--ar-p,0));
  background:var(--gold-grad);background-size:220% 100%;animation:ar-flow 3.2s linear infinite;box-shadow:0 0 12px rgba(216,166,70,.6)}
@keyframes ar-flow{to{background-position:-220% 0}}
#articulo .ar-dock__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(243,234,219,.04);font:700 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream);cursor:pointer;transition:border-color .3s,color .3s}
#articulo .ar-dock__btn:hover,#articulo .ar-dock__btn:focus-visible{border-color:var(--gold);color:var(--gold-2)}
#articulo .ar-dock__btn svg{width:18px;height:18px;fill:none;stroke:var(--gold-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#articulo .ar-dock__pct{font-size:.95rem;color:var(--gold-2)}
#articulo .ar-dock__pct b{color:var(--cream)}

#articulo .ar-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:min(80vh,680px);padding:0;border:0;
  border-top:1px solid var(--hair);border-radius:22px 22px 0 0;background:var(--ink-2);color:var(--cream);box-shadow:0 -30px 80px rgba(0,0,0,.6)}
#articulo .ar-sheet[open]{animation:ar-sheet-in .55s var(--ease)}
@keyframes ar-sheet-in{from{transform:translateY(100%)}to{transform:none}}
#articulo .ar-sheet::backdrop{background:rgba(5,9,15,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#articulo .ar-sheet__in{display:flex;flex-direction:column;max-height:min(80vh,680px);padding:10px var(--gut) calc(14px + env(safe-area-inset-bottom,0px))}
#articulo .ar-sheet__in:before{content:"";align-self:center;width:44px;height:4px;border-radius:4px;background:var(--line-2);margin-bottom:6px}
#articulo .ar-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#articulo .ar-sheet__t{margin:0;font:700 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
#articulo .ar-sheet__x{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:transparent;cursor:pointer}
#articulo .ar-sheet__x svg{width:18px;height:18px;fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round}
#articulo .ar-sheet__list{list-style:none;margin:0;padding:4px 0 0;overflow:auto;overscroll-behavior:contain}
#articulo .ar-sheet__list a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:baseline;min-height:50px;padding:13px 0;
  border-bottom:1px solid var(--line);font:500 1rem/1.4 var(--sans);color:var(--cream-2)}
#articulo .ar-sheet__list a .cifra{font-size:max(12px,.74rem);color:var(--gold)}
#articulo .ar-sheet__list a{position:relative;border-radius:0}
#articulo .ar-sheet__list a:focus{outline:none}
#articulo .ar-sheet__list a:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px;border-radius:8px}
#articulo .ar-sheet__list a:before{content:"";position:absolute;left:-12px;top:12px;bottom:12px;width:2px;background:var(--gold-grad);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
#articulo .ar-sheet__list a.is-active{color:var(--gold-2)}
#articulo .ar-sheet__list a.is-active:before{transform:scaleY(1)}
#articulo .ar-sheet__list{padding-left:12px;margin-left:-12px}

/* ---------------------------------------------------------------- CTA del tomo (superficie que destila oro) */
#articulo .ar-cta{padding-block:clamp(16px,3vw,40px) clamp(64px,8vw,120px)}
#articulo .ar-cta__card{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;max-width:1180px;margin-inline:auto;
  min-height:clamp(400px,44vw,540px);padding:clamp(40px,6vw,92px) clamp(24px,6vw,92px) clamp(32px,5vw,72px);border-radius:clamp(20px,2.4vw,32px);
  border-color:rgba(216,166,70,.38);background:rgba(8,18,28,.6);box-shadow:0 60px 120px -60px rgba(0,0,0,.9),inset 0 1px 0 rgba(244,213,138,.18)}
#articulo .ar-cta__card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(216,166,70,0),#C9A050 12%,#F7E2A8 35%,#E0B661 55%,#F4D58A 75%,rgba(216,166,70,0));background-size:200% 100%;
  animation:ar-flow 6s linear infinite}
#articulo .ar-cta__bg{position:absolute;inset:0;z-index:-1}
#articulo .ar-cta__bg picture{display:contents}
#articulo .ar-cta__bg img,#articulo .ar-cta__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
#articulo .ar-cta__bg img{opacity:.42;object-position:70% 50%}
#articulo .ar-cta__video{opacity:0;transition:opacity 1.6s var(--ease);filter:saturate(.7)}
#articulo .ar-cta__video.is-on{opacity:.3}
#articulo .ar-cta__shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,9,15,.94) 0%,rgba(5,9,15,.8) 42%,rgba(5,9,15,.3) 100%),linear-gradient(0deg,rgba(5,9,15,.75) 0%,rgba(5,9,15,0) 55%)}
#articulo .ar-cta__drips{position:absolute;left:0;right:0;top:0;height:200px;z-index:2;pointer-events:none}
/* Gotas de oro líquido: un hilo que cuelga del filete y engorda en la punta (bulbo), la lágrima se estira,
   se desprende y cae; el hilo se recoge. Bucle lento de 6 s, desfasado por gota. */
#articulo .ar-cta__drips i{position:absolute;top:0;left:var(--x);width:12px;margin-left:-6px;height:calc(var(--h) + 170px);--h:42px}
#articulo .ar-cta__drips i:before{content:"";position:absolute;left:50%;top:-3px;width:14px;height:7px;margin-left:-7px;border-radius:0 0 50% 50%;
  background:radial-gradient(60% 100% at 50% 0%,#F7E2A8,#D8A646 70%,rgba(216,166,70,0))}
#articulo .ar-cta__drips i:after{content:"";position:absolute;left:50%;top:0;width:5px;height:var(--h);margin-left:-2.5px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#A77927,#F4D58A 45%,#D8A646 70%,#8A6424);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);
  transform-origin:top;transform:scaleY(0);animation:ar-stem 6s var(--d) infinite cubic-bezier(.45,0,.3,1)}
#articulo .ar-cta__drips b{position:absolute;left:50%;top:var(--h);width:11px;height:11px;margin:-7px 0 0 -5.5px;
  border-radius:0 50% 50% 50%;transform-origin:50% 30%;
  background:radial-gradient(circle at 62% 62%,#FFF1C9 0,#F4D58A 22%,#D8A646 55%,#8A6424 100%);
  box-shadow:0 0 10px rgba(244,213,138,.5);opacity:0;animation:ar-drop 6s var(--d) infinite}
#articulo .ar-cta__drips i:nth-child(1){--x:9%;--h:38px;--d:-.4s}
#articulo .ar-cta__drips i:nth-child(2){--x:23%;--h:58px;--d:-2.6s}
#articulo .ar-cta__drips i:nth-child(3){--x:41%;--h:30px;--d:-4.1s}
#articulo .ar-cta__drips i:nth-child(4){--x:62%;--h:66px;--d:-1.3s}
#articulo .ar-cta__drips i:nth-child(5){--x:78%;--h:44px;--d:-3.4s}
#articulo .ar-cta__drips i:nth-child(6){--x:91%;--h:34px;--d:-5.2s}
/* hilo: crece (0–46 %), aguanta mientras engorda la lágrima, se estira al desprenderse y se recoge */
@keyframes ar-stem{0%{transform:scaleY(0)}46%{transform:scaleY(1)}56%{transform:scaleY(1.08)}62%{transform:scaleY(.55)}100%{transform:scaleY(0)}}
/* lágrima (punta arriba): sigue la punta del hilo, engorda, se alarga (scaleY) y cae acelerando */
@keyframes ar-drop{
  0%{opacity:0;transform:translateY(calc(var(--h) * -1)) rotate(45deg) scale(.3)}
  10%{opacity:1}
  46%{opacity:1;transform:translateY(0) rotate(45deg) scale(.75)}
  56%{transform:translateY(5px) rotate(45deg) scale(1) }
  60%{opacity:1;transform:translateY(10px) rotate(45deg) scale(1.1) skew(9deg,9deg);animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  86%{opacity:0;transform:translateY(160px) rotate(45deg) scale(.95) skew(16deg,16deg)}
  100%{opacity:0;transform:translateY(160px) rotate(45deg) scale(.3)}}
#articulo .ar-cta__in{position:relative;z-index:2;max-width:640px}
#articulo .ar-cta__k{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 22px;font:700 max(12px,.72rem)/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
#articulo .ar-cta__k span:last-child{color:var(--cream-2)}
#articulo .ar-cta__t{margin:0;max-width:16ch;font:500 clamp(2.1rem,4.4vw,4rem)/1.02 var(--serif);letter-spacing:-.025em;color:var(--cream);text-wrap:balance}
#articulo .ar-cta__x{margin:18px 0 0;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;color:var(--cream-2)}
#articulo .ar-cta__btn{margin-top:30px;min-height:52px}
#articulo .ar-nota{max-width:72ch;margin:20px auto 0;text-align:center}

/* ---------------------------------------------------------------- Te puede interesar */
#articulo .ar-rel{padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--line);
  background:radial-gradient(70% 60% at 50% 0%,rgba(16,39,58,.55),rgba(5,9,15,0) 70%)}
#articulo .ar-rel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,52px)}
#articulo .ar-rel__k{margin:0 0 14px}
#articulo .ar-rel__t{margin:0;font:500 clamp(2rem,4.2vw,3.6rem)/1 var(--serif);letter-spacing:-.025em;color:var(--cream)}
#articulo .ar-rel__ctrl{display:none;align-items:center;gap:8px}
#articulo .ar-rel__count{font-size:.86rem;letter-spacing:.06em;color:var(--mute);margin-right:4px}
#articulo .ar-rel__count b{color:var(--gold-2)}
#articulo .ar-rel__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:rgba(5,9,15,.5);
  cursor:pointer;transition:border-color .3s,background-color .3s}
#articulo .ar-rel__btn:hover,#articulo .ar-rel__btn:focus-visible{border-color:var(--gold);background:rgba(216,166,70,.12)}
#articulo .ar-rel__btn svg{width:18px;height:18px;fill:none;stroke:var(--gold-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#articulo .ar-rel__pause .i-play{display:none;fill:var(--gold-2);stroke:none}
#articulo .ar-rel__pause[aria-pressed=true] .i-pause{display:none}
#articulo .ar-rel__pause[aria-pressed=true] .i-play{display:block}
#articulo .ar-rel__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
#articulo .ar-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:rgba(13,27,40,.5);transition:border-color .5s var(--ease),transform .7s var(--ease),background-color .5s}
#articulo .ar-card:hover,#articulo .ar-card:focus-visible{border-color:var(--gold);transform:translateY(-4px);background:rgba(16,39,58,.66)}
#articulo .ar-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
#articulo .ar-card__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.35) contrast(1.05) brightness(.8);transform:scale(1.02);
  transition:filter 1.2s var(--ease),transform 1.4s var(--ease)}
#articulo .ar-card__tone{position:absolute;inset:0;background:linear-gradient(120deg,#C9A050,#8A6424);mix-blend-mode:color;opacity:.5;transition:opacity 1.2s var(--ease)}
#articulo .ar-card:hover .ar-card__media img,#articulo .ar-card:focus-visible .ar-card__media img{filter:saturate(.5) sepia(.34) contrast(1.04) brightness(.96);transform:scale(1.06)}
#articulo .ar-card:hover .ar-card__tone,#articulo .ar-card:focus-visible .ar-card__tone{opacity:.18}
/* Celular: la tarjeta centrada se «revela» (duotono más luminoso, sin colores ajenos al oro) */
#articulo .ar-card.is-center .ar-card__media img{filter:grayscale(1) sepia(.3) contrast(1.08) brightness(1);transform:scale(1.05)}
#articulo .ar-card.is-center .ar-card__tone{opacity:.42}
#articulo .ar-card__body{display:flex;flex-direction:column;gap:14px;flex:1;padding:clamp(20px,2vw,28px)}
#articulo .ar-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font:700 max(12px,.72rem)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
#articulo .ar-card__meta .ar-glyph{color:var(--gold-2);width:16px;height:16px}
#articulo .ar-card__meta>.cifra{color:var(--gold-2)}
#articulo .ar-card__of{color:var(--mute)}
#articulo .ar-card__meta b{color:var(--cream-2)}
#articulo .ar-card__t{font:500 clamp(1.25rem,1.5vw,1.45rem)/1.25 var(--serif);letter-spacing:-.01em;color:var(--cream);text-wrap:balance}
#articulo .ar-card__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:24px;font:700 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
#articulo .ar-card__go span{transition:transform .6s var(--ease)}
#articulo .ar-card:hover .ar-card__go span{transform:translateX(5px)}
#articulo .ar-rel__foot{display:none}

@media (max-width:899px){
  #articulo.ar--js .ar-rel__ctrl{display:flex}
  #articulo .ar-rel__head{align-items:flex-start;flex-direction:column;gap:18px}
  #articulo .ar-rel__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    margin-inline:calc(-1 * var(--gut));padding:4px var(--gut) 6px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #articulo .ar-rel__track::-webkit-scrollbar{display:none}
  #articulo .ar-card{flex:0 0 min(76vw,400px);scroll-snap-align:start}
  #articulo .ar-card:hover{transform:none}
  #articulo.ar--js .ar-rel__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
}
#articulo .ar-rel__dots{display:flex;align-items:center}
#articulo .ar-rel__dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
#articulo .ar-rel__dot i{display:block;width:8px;height:8px;border-radius:8px;background:var(--line-2);transition:width .5s var(--ease),background-color .4s}
#articulo .ar-rel__dot[aria-current=true] i{width:24px;background:var(--gold-2)}
#articulo .ar-rel__hint{display:inline-flex;align-items:center;gap:10px;font:700 max(12px,.72rem)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:opacity .8s}
#articulo .ar-rel__hint i{position:relative;width:34px;height:1px;background:var(--line-2);overflow:hidden}
#articulo .ar-rel__hint i:after{content:"";position:absolute;inset:0;background:var(--gold-2);animation:ar-hint 1.8s var(--ease) infinite}
@keyframes ar-hint{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
#articulo .ar-rel.is-used .ar-rel__hint{opacity:0}

/* ---------------------------------------------------------------- Seguir leyendo */
#articulo .ar-end{position:relative;display:grid;align-items:center;min-height:clamp(440px,52vw,640px);overflow:hidden;isolation:isolate;border-top:1px solid var(--hair)}
#articulo .ar-end__bg{position:absolute;inset:0;z-index:-1}
#articulo .ar-end__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:.62}
#articulo .ar-end__bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,9,15,.95) 0%,rgba(5,9,15,.78) 40%,rgba(5,9,15,.15) 100%),linear-gradient(180deg,var(--ink) 0%,rgba(5,9,15,0) 22%,rgba(5,9,15,0) 75%,var(--ink) 100%)}
#articulo .ar-end__in{padding-block:clamp(72px,9vw,140px)}
#articulo .ar-end__t{margin:18px 0 0;max-width:13ch;font:500 clamp(2.3rem,5.2vw,4.8rem)/1 var(--serif);letter-spacing:-.03em;color:var(--cream)}
#articulo .ar-end__l{margin:20px 0 0;max-width:42ch;color:var(--cream-2);font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.6}
#articulo .ar-end__btn{margin-top:32px;min-height:52px}

/* ---------------------------------------------------------------- celular */
@media (max-width:899px){
  #articulo .ar-hero__in{text-align:left}
  #articulo .ar-meta{justify-content:flex-start}
  #articulo .ar-cover__frame{aspect-ratio:16/10;border-radius:18px}
  #articulo .ar-cta__card{min-height:0;padding:56px 22px 30px;align-items:stretch}
  #articulo .ar-cta__bg img{opacity:.34;object-position:50% 50%}
  #articulo .ar-cta__shade{background:linear-gradient(180deg,rgba(5,9,15,.6) 0%,rgba(5,9,15,.86) 45%,rgba(5,9,15,.95) 100%)}
  #articulo .ar-cta__btn{width:100%;white-space:normal;text-align:center}
  #articulo .ar-cta__k .ar-sep{display:none}
  #articulo .ar-cta__k span:last-child{flex-basis:100%}
  #articulo .ar-end{align-items:end}
  #articulo .ar-end__bg img{object-position:62% 30%;opacity:.5}
  #articulo .ar-end__bg:after{background:linear-gradient(180deg,var(--ink) 0%,rgba(5,9,15,.25) 30%,rgba(5,9,15,.82) 62%,var(--ink) 100%)}
  #articulo .ar-end__in{padding-top:clamp(180px,48vw,260px);padding-bottom:64px}
  #articulo .ar-end__btn{width:100%}
}
@media (max-width:899px){
  /* Celular: una sola línea «← Volver al blog · Nº 24 / 36» (sin el segundo logotipo); título y portada en el primer pantallazo;
     la entradilla pasa debajo de la portada */
  #articulo .ar-hero{display:flex;flex-direction:column;padding-top:calc(var(--nav-h) + 4px)}
  #articulo .ar-mast{grid-template-columns:minmax(0,1fr) auto;padding-block:0}
  #articulo .ar-mast__brand{display:none}
  #articulo .ar-hero__in{display:contents}
  #articulo .ar-meta,#articulo .ar-title,#articulo .ar-lead{width:100%;max-width:var(--max);padding-inline:var(--gut);margin-inline:auto}
  #articulo .ar-meta{order:2;margin-top:18px;gap:8px 14px}
  #articulo .ar-title{order:3;margin-top:14px;font-size:clamp(1.8rem,7.4vw,3rem);line-height:1.07}
  #articulo .ar-cover{order:4;margin-top:24px;width:100%}
  #articulo .ar-lead{order:5;margin-top:24px}
  #articulo .ar-cat{min-height:40px;padding:0 14px}
}
@media (max-width:640px){
  #articulo .ar-back{letter-spacing:.12em}
  #articulo .ar-body .ar-cap::first-letter{font-size:4.2em}
  #articulo .ar-body li{padding-left:1.4em}
}

/* ---------------------------------------------------------------- respaldos */
/* Sin JS / sin el JS de la sección: controles que no funcionarían, fuera; el carril queda con scroll nativo */
#articulo:not(.ar--js) .ar-rel__ctrl,#articulo:not(.ar--js) .ar-rel__foot{display:none!important}
/* Gama baja: sin desenfoques ni gotas; superficies opacas */
#articulo.ar--low .ar-cta__card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,18,28,.94)}
#articulo.ar--low .ar-dock{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,9,15,.98)}
#articulo.ar--low .ar-cta__drips,#articulo.ar--low .ar-vela__svg{filter:none}
#articulo.ar--low .ar-cta__drips i:nth-child(n+4){display:none}
/* Movimiento reducido: sin gotas ni ondas; la vela es una barra que se llena; portada a color */
html.reduce #articulo .ar-cta__drips,html.reduce #articulo .ar-vela__wave,html.reduce #articulo .ar-vela__shine,html.reduce #articulo .ar-rel__hint i:after,html.reduce #articulo .ar-tbl__hint i:after{display:none}
html.reduce #articulo .ar-cta__card:before,html.reduce #articulo .ar-dock__bar i{animation:none}
html.reduce #articulo .ar-cover__img{filter:saturate(.5) sepia(.34) contrast(1.04) brightness(.96)!important;transform:none!important;transition:none}
html.reduce #articulo .ar-cover__tone{opacity:0!important}
html.reduce #articulo .ar-card__media img{filter:saturate(.5) sepia(.34) contrast(1.04) brightness(.96);transform:none}
html.reduce #articulo .ar-card__tone{opacity:.18}
html.reduce #articulo .ar-dock,html.reduce #articulo .ar-sheet[open]{transition:none;animation:none}
@media (prefers-reduced-motion:reduce){
  #articulo .ar-cta__drips,#articulo .ar-vela__wave{display:none}
}