/* ============================================================
   JCMH · Dirección B · EDITORIAL — tokens y primitivas
   Compartido por: Brand Kit, Deck, Documento, Firma
   ============================================================ */
:root{
  --paper:#f1efe8;--paper-2:#e7e4da;--card:#fbfaf6;
  --ink:#15140f;--ink-2:#3a382f;--dim:#6c6960;
  --acid:#c9f24a;--acid-d:#a8d321;--acid-ink:#5d7a0b;
  --line:#d3cfc2;--line-2:#e2dfd4;
  --fs:"Instrument Serif",Georgia,serif;
  --fb:"Manrope",system-ui,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
img,svg,image-slot{max-width:100%}
a{color:var(--ink);text-decoration:none;transition:color .18s}
a:hover{color:var(--acid-ink)}

/* --- primitivas --- */
.mono{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.chip{display:inline-block;background:var(--acid);color:var(--ink);padding:3px 10px;border-radius:99px;font-weight:500}
.rule{height:1px;background:var(--line);border:0}
.ser{font-family:var(--fs);font-weight:400;letter-spacing:-.025em}
.it{font-style:italic}
.ar{color:var(--acid-d)}

/* --- marquesina --- */
.mq{overflow:hidden;display:flex;background:var(--ink);color:var(--paper)}
.mq .t{display:flex;white-space:nowrap;animation:mq-sl var(--mq-dur,30s) linear infinite;flex:none;will-change:transform}
.mq:hover .t{animation-play-state:paused}
@keyframes mq-sl{to{transform:translateX(-100%)}}
.mq .u{font-family:var(--fs);letter-spacing:-.02em;display:flex;align-items:center;gap:var(--mq-gap,44px);padding-right:var(--mq-gap,44px);font-size:var(--mq-size,clamp(26px,4vw,58px))}
.mq .u i{font-style:italic;color:var(--acid)}
.mq .u b{font-weight:400;color:var(--acid)}

/* --- reveal en scroll (estado final por defecto: nunca oculta contenido si falla) --- */
.rv{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.rv-on .rv:not(.in){opacity:0;transform:translateY(22px)}
@media print{.rv{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){
  html.rv-on .rv:not(.in){opacity:1;transform:none}
  .rv{transition:none}
  .mq .t{animation:none}
}

/* --- image slot --- */
image-slot{--is-radius:14px}

/* ============================================================
   Shell compartido para las páginas de apoyo
   ============================================================ */
.pw{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.tbar{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--paper) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tbar .pw{display:flex;justify-content:space-between;align-items:center;height:60px;gap:16px}
.tbar a.bk{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--acid-ink);white-space:nowrap}
.tbar .ttl{font-family:var(--fs);font-size:18px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar .ttl i{font-style:italic}
.phd{padding:clamp(34px,5vw,64px) 0 clamp(24px,3vw,38px)}
.phd .kk{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acid-ink)}
.phd h1{font-family:var(--fs);font-weight:400;font-size:clamp(34px,6.5vw,80px);letter-spacing:-.03em;line-height:.98;margin-top:12px}
.phd h1 em{font-style:italic}
.phd .ld{color:var(--dim);font-size:15px;margin-top:16px;max-width:56ch;line-height:1.6}
.psec{padding:clamp(34px,4.5vw,58px) 0;border-top:1px solid var(--line)}
.psec > .lb{font-family:var(--fm);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.psec h2{font-family:var(--fs);font-weight:400;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.025em;line-height:1.05;margin-bottom:8px}
.psec h2 em{font-style:italic;color:var(--acid-ink)}
.psec .sd{color:var(--dim);font-size:14px;margin-bottom:24px;max-width:60ch;line-height:1.6}

/* bloque de texto copiable */
.cpy{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;position:relative;break-inside:avoid}
.cpy .ch{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.cpy .cn{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acid-ink)}
.cpy .cw{font-family:var(--fm);font-size:10.5px;color:var(--dim);letter-spacing:.06em}
.cpy .cb{font-size:14.5px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap}
.cpy .cb strong{color:var(--ink);font-weight:600}
.btn{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;border-radius:99px;padding:8px 15px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.btn:hover{background:var(--acid);color:var(--ink)}
.btn.ok{background:var(--acid);color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:16px}
.pfoot{border-top:1px solid var(--line);padding:26px 0 54px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--dim)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:640px){
  .tbar .pw{height:54px}
  .tbar .ttl{font-size:15px}
  .cpy{padding:20px 18px;border-radius:14px}
  .cpy .cb{font-size:13.5px}
  .cpy .ch{gap:10px}
  .psec{padding:30px 0}
  .psec .sd{font-size:13.5px}
  .phd{padding:28px 0 20px}
  .phd .ld{font-size:14px}
}
@media(max-width:420px){
  .tbar .ttl{display:none}
  .btn{padding:7px 12px;font-size:9.5px}
}

/* Hojas A4: se reducen para caber en pantallas pequeñas, sin tocar la
   geometría de impresión (el zoom se anula al imprimir). */
doc-page{--doc-zoom:1;zoom:var(--doc-zoom)}
@media print{doc-page{--doc-zoom:1!important}}