/* Chrome del sitio (lo que en el prototipo vivía inline en home.html).
   Depende de tokens.css/system.css. Prefijo mx-. */

/* skip link */
.mx-skip{position:absolute;left:-9999px;top:0;z-index:210;background:var(--ink);color:var(--sup-0);padding:var(--s-3) var(--s-4);border-radius:var(--r-2)}
.mx-skip:focus{left:var(--s-4);top:var(--s-4)}

/* header: burger + menu movil */
.mx-burger{display:none;background:none;border:var(--bw) solid var(--line-2);border-radius:var(--r-1);width:44px;height:40px;align-items:center;justify-content:center;gap:4px;flex-direction:column}
.mx-burger span{width:18px;height:2px;background:var(--ink)}
@media(max-width:860px){.mx-nav,.mx-site .mx-btn.desk{display:none}.mx-burger{display:inline-flex}}
.mx-mnav{position:fixed;inset:64px 0 0;z-index:75;background:var(--sup-0);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);padding:var(--gutter);display:flex;flex-direction:column;gap:var(--s-2)}
.mx-mnav.open{opacity:1;visibility:visible;transform:none}
.mx-mnav a{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);letter-spacing:var(--tr-tight);padding:var(--s-3) 0;border-bottom:var(--bw) solid var(--line);color:var(--ink);text-decoration:none}
@media(min-width:861px){.mx-mnav{display:none}}

/* hero */
.mx-hero{padding-top:clamp(2.5rem,7vw,5.5rem);padding-bottom:var(--s-7)}
.mx-hero__h{font-family:var(--font-display);font-weight:600;font-size:var(--fs-mega);line-height:var(--lh-mega);letter-spacing:-0.03em;margin:var(--s-4) 0 0}
.mx-hero__lead{max-width:52ch;margin-top:var(--s-5)}
.mx-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.mx-hero__rail{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-6);color:var(--ink-3)}
.mx-hero__rail span{font-size:var(--fs-caption)}
.js .mx-hero__h .mx-rvm>i{animation:mx-lineUp var(--dur-3) var(--ease-inout) both}
.js .mx-hero__h .mx-rvm.d1>i{animation-delay:120ms}
.js .mx-hero__h .mx-rvm.d2>i{animation-delay:240ms}
@keyframes mx-lineUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
.mx-scroll-i{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-7);color:var(--ink-3);font-size:var(--fs-caption)}
.mx-scroll-i .line{width:1px;height:34px;background:var(--line-2);position:relative;overflow:hidden}
.mx-scroll-i .line::after{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(-100%);animation:mx-drop 1.8s var(--ease-inout) infinite}
@keyframes mx-drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* franja de imagen a sangre */
.mx-strip{position:relative;height:clamp(220px,38vw,440px);overflow:hidden}
.mx-strip .mx-figure{position:absolute;inset:-8% 0;border-radius:0;height:auto}

/* intro / momento firma */
.mx-intro{position:fixed;inset:0;z-index:200;background:var(--sup-inv);color:var(--ink-inv);display:none;align-items:center;justify-content:center;flex-direction:column;gap:var(--s-5)}
.mx-intro.run{display:flex}
.mx-intro .count{font-family:var(--font-mono);font-size:clamp(3rem,12vw,7rem);font-variant-numeric:tabular-nums}
.mx-intro .lbl{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--acc-inv)}
.mx-intro.done{clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-intro) var(--ease-inout)}

/* cookies posicion */
.mx-cookies{position:fixed;left:var(--s-4);bottom:var(--s-4);z-index:90}
@media(max-width:860px){.mx-cookies{bottom:88px;right:var(--s-4);max-width:none}}

@media (prefers-reduced-motion: reduce){
  .mx-scroll-i .line::after{display:none}
  .js .mx-hero__h .mx-rvm>i{animation:none}
}

/* plantilla de artículo (single.html) — lo que en el prototipo articulo.html vivía inline */
.mx-art-top{padding-block:var(--s-6) var(--s-4)}
.mx-art-crumbs{margin-bottom:var(--s-5)}
.mx-art-kicker{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.mx-art-h1{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-head);letter-spacing:var(--tr-tight);margin:var(--s-4) 0 var(--s-5);max-width:20ch}
.mx-art-meta{display:flex;gap:var(--s-2) var(--s-5);flex-wrap:wrap;align-items:center;color:var(--ink-3);font-size:var(--fs-caption);font-family:var(--font-mono);border-block:var(--bw) solid var(--line);padding-block:var(--s-4)}
.mx-art-meta .who{color:var(--ink);font-weight:500}
.mx-art-hero-fig{margin-top:var(--s-6)}
.mx-art-hero-fig img{width:100%;height:100%;object-fit:cover;display:block}
.mx-sign{display:flex;gap:var(--s-5);align-items:center;border:var(--bw) solid var(--line);border-radius:var(--r-2);padding:var(--s-5);margin-top:var(--s-8)}
.mx-sign .ph{flex:none;width:84px;height:104px}
.mx-sign .who{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4)}
.mx-sign .cole{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);margin-top:var(--s-2)}
.mx-sign .rev{font-size:var(--fs-small);color:var(--ink-2);margin-top:var(--s-3)}
.mx-related{margin-top:var(--s-8)}