/* ==========================================================================
   IA Trader — «Broadsheet duel»
   Papel de periódico, tinta negra, grotesca de ancho variable (Archivo),
   serif de lectura (Newsreader) y mono para datos (JetBrains Mono).
   Colores de agente fijos: Fundamental = cian/teal, WSB = violeta, SPY = ámbar.
   ========================================================================== */

:root {
  color-scheme: light;
  /* Papel y tinta */
  --bg: #f2eee3;
  --surface: #faf7f0;
  --surface-2: #ebe5d7;
  --surface-3: #e0d8c6;
  --ink: #16140f;
  --ink-2: #4a453c;
  --ink-3: #6b6458;
  --line: rgba(22, 20, 15, 0.14);
  --line-strong: rgba(22, 20, 15, 0.34);
  --rule: #16140f;

  /* Agentes (UI / texto) y marcas de gráfico validadas sobre el papel */
  --fund: #00788d;  --fund-mark: #00879f;  --fund-tint: #d5ebec;
  --wsb: #5f36c4;   --wsb-mark: #6a3fd0;   --wsb-tint: #e5dcf6;
  --spy: #8f5600;   --spy-mark: #b86e00;   --spy-tint: #f3e3c3;
  --gain: #0b7a40;  --gain-mark: #0e8a4a;
  --loss: #b42a26;  --loss-mark: #d0352f;
  --warn: #b86e00;

  /* Gráficos */
  --grid: rgba(22, 20, 15, 0.08);
  --axis: rgba(22, 20, 15, 0.38);
  --band: rgba(22, 20, 15, 0.055);

  /* Tipografía */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala */
  --radius-s: 4px;
  --radius: 8px;
  --radius-l: 12px;
  --gutter: 16px;
  --maxw: 1280px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-press: cubic-bezier(.65, 0, .35, 1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

/* Bandas en tinta: mismos componentes, tokens invertidos */
.band-ink {
  color-scheme: dark;
  --bg: #16140f;
  --surface: #211e18;
  --surface-2: #2a261f;
  --surface-3: #363128;
  --ink: #f2eee3;
  --ink-2: #cbc4b4;
  --ink-3: #a19a8b;
  --line: rgba(242, 238, 227, 0.14);
  --line-strong: rgba(242, 238, 227, 0.32);
  --rule: #f2eee3;
  --fund: #45c3c7;  --fund-mark: #1fa3a8;  --fund-tint: #13383a;
  --wsb: #a990f5;   --wsb-mark: #8e70ee;   --wsb-tint: #2c2449;
  --spy: #e0a845;   --spy-mark: #c4860f;   --spy-tint: #3a2c12;
  --gain: #55cc8e;  --gain-mark: #2fae6b;
  --loss: #f27a72;  --loss-mark: #e5534b;
  --grid: rgba(242, 238, 227, 0.08);
  --axis: rgba(242, 238, 227, 0.38);
  --band: rgba(242, 238, 227, 0.06);
  background: var(--bg);
  color: var(--ink);
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  /* grano de papel: ruido estático muy tenue */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 1200px) { body { font-size: 18px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p, li, dd, td, th, blockquote { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
strong { font-weight: 700; }
small { font-size: .82em; color: var(--ink-3); }
code { font-family: var(--font-mono); font-size: .86em; background: var(--surface-2); padding: .08em .38em; border-radius: 3px; color: var(--ink); }
abbr[title] { text-decoration: underline dotted; text-decoration-color: var(--ink-3); text-underline-offset: 3px; cursor: help; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.no-js [data-js-only] { display: none !important; }
.t-up { color: var(--gain); } .t-down { color: var(--loss); } .t-mute { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- Barra superior */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter); background: color-mix(in oklab, #f2eee3 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid #16140f; color: #16140f;
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; text-decoration: none; font-size: 16px; white-space: nowrap; text-transform: uppercase; }
.brand-mark { width: 14px; height: 14px; background: linear-gradient(90deg, var(--fund-mark) 50%, var(--wsb-mark) 50%); display: inline-block; }
.brand-mark.has-img { background: none; width: 22px; height: 22px; }
.chapter-now { margin: 0 auto 0 6px; display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; color: #4a453c; }
.chapter-now .cn-num { font-family: var(--font-mono); font-size: 12px; color: #6b6458; }
.chapter-now .cn-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
@media (max-width: 420px) { .chapter-now .cn-title { max-width: 36vw; } }
.progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--fund-mark), var(--wsb-mark)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.chapter-menu { position: relative; }
.chapter-menu summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; padding: 8px 14px; border: 2px solid #16140f; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: #faf7f0; min-height: 40px; }
.chapter-menu summary::-webkit-details-marker { display: none; }
.chapter-menu summary .bars { width: 13px; height: 9px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.chapter-menu summary .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 1.5px; border-top: 2px solid currentColor; }
.chapter-menu[open] summary { background: #16140f; color: #f2eee3; }
.chapter-menu ol { position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, calc(100vw - 32px)); max-height: min(72vh, 600px); overflow: auto; margin: 0; padding: 8px; list-style: none; background: #faf7f0; border: 2px solid #16140f; box-shadow: 8px 8px 0 #16140f; }
.chapter-menu li a { display: grid; grid-template-columns: 32px 1fr; gap: 6px; padding: 10px; text-decoration: none; color: #16140f; font-size: 16px; font-weight: 600; }
.chapter-menu li a span { font-family: var(--font-mono); font-size: 12px; color: #6b6458; padding-top: 3px; }
.chapter-menu li a:hover, .chapter-menu li a.is-active { background: #16140f; color: #f2eee3; }
.chapter-menu li a:hover span, .chapter-menu li a.is-active span { color: #cbc4b4; }
.rail { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1380px) { .rail { display: flex; } }
.rail a { display: block; width: 10px; height: 10px; border: 2px solid #16140f; background: #f2eee3; position: relative; transition: background .2s, transform .2s var(--ease); }
.rail a.is-done { background: #8c8577; border-color: #8c8577; }
.rail a.is-active { background: #16140f; transform: scale(1.3); }
.rail a span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; color: #f2eee3; background: #16140f; padding: 4px 8px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.rail a:hover span { opacity: 1; }

/* ---------------------------------------------------------------- Capítulos */
.section { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 9vw, 128px) var(--gutter); position: relative; }
.chapter { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 56px; }
.chapter > * { width: 100%; }
.band-ink { max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.section-head { max-width: 980px; margin-bottom: clamp(32px, 4.5vw, 56px); position: relative; }
.ch-mark { display: flex; align-items: flex-end; gap: 16px; padding-top: 14px; border-top: 6px solid var(--rule); margin-bottom: 18px; }
.ch-num { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(64px, 9vw, 132px); line-height: .78; letter-spacing: -.02em; color: var(--ink); }
.ch-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 4px; }
h2 { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.0; letter-spacing: -.025em; }
.plain { font-family: var(--font-serif); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.42; color: var(--ink); margin: 16px 0 0; max-width: 62ch; }
.section-head .plain + .section-lead { margin-top: 10px; }
.section-lead { font-size: clamp(15.5px, 1.1vw, 17px); color: var(--ink-2); margin: 12px 0 0; max-width: 72ch; }
.sub-head { font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; margin: 0 0 18px; line-height: 1.1; }
.card-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.card-sub { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; }
.card-note { color: var(--ink-3); font-size: 14px; margin: 14px 0 0; line-height: 1.45; }
.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.grid-2, .grid-3, .grid-2-1, .grid-1-2 { display: grid; gap: 20px; }
.grid-2 > *, .grid-3 > *, .grid-2-1 > *, .grid-1-2 > * { min-width: 0; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2-1 { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; }
  .grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

/* ---------------------------------------------------------------- Botones y controles */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--bg); background: var(--ink); border: 2px solid var(--ink); padding: 10px 20px; border-radius: 999px; cursor: pointer; text-decoration: none; min-height: 46px; transition: transform .15s var(--ease), box-shadow .15s var(--ease); white-space: nowrap; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--fund-mark); }
.btn:active { transform: none; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn .ico { display: inline-block; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.btn .ico.pause { width: 10px; height: 13px; border: 0; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; padding: 2px; background: var(--surface); }
.seg-btn { appearance: none; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active { background: var(--ink); color: var(--bg); }
.field { display: grid; gap: 5px; min-width: 0; }
.field > span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field select, .field input { width: 100%; min-width: 0; font: inherit; font-size: 15.5px; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-s); padding: 8px 10px; min-height: 44px; }
.field input::placeholder { color: var(--ink-3); }

/* ---------------------------------------------------------------- Portada: cartel del duelo */
.portada { justify-content: flex-start; padding-top: 0; }
.ticker { overflow: hidden; margin: 0 calc(-1 * var(--gutter)); background: #16140f; color: #f2eee3; border-bottom: 2px solid #16140f; }
@media (min-width: 1280px) { .ticker { margin-inline: calc((100vw - var(--maxw)) / -2 - var(--gutter)); } }
.ticker-track { display: flex; width: max-content; gap: 0; padding: 9px 0; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .04em; white-space: nowrap; }
.ticker-track span { padding: 0 22px; border-right: 1px solid rgba(242,238,227,.25); }
.ticker-track b { font-weight: 600; }
.ticker-track i { font-style: normal; }
.ticker-track .up { color: #55cc8e; } .ticker-track .dn { color: #f27a72; }
html.js.motion .ticker-track { animation: tape 48s linear infinite; }
@keyframes tape { to { transform: translateX(-50%); } }
.masthead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 14px 0 12px; margin: clamp(24px, 4vw, 48px) 0 clamp(22px, 3vw, 36px); border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.masthead span:first-child { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; letter-spacing: -.01em; font-size: 15px; color: var(--ink); }
.portada h1 { font-family: var(--font-display); font-weight: 850; font-stretch: 82%; font-size: clamp(44px, 6.6vw, 104px); line-height: .94; letter-spacing: -.03em; max-width: 17ch; }
.portada h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--spy-tint) 62%); }
.portada h1 .w { display: inline-block; }
html.js.motion .portada h1 .w { animation: press-in .8s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
@keyframes press-in { from { opacity: 0; transform: translateY(.3em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.lead { font-family: var(--font-serif); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; color: var(--ink-2); max-width: 54ch; margin: 22px 0 0; }
.kpis-caption { margin: clamp(36px, 5vw, 64px) 0 12px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.kpis-caption strong { color: var(--ink); }
.bout { display: grid; gap: 0; border: 2px solid var(--rule); background: var(--surface); }
@media (min-width: 900px) { .bout { grid-template-columns: 1fr auto 1fr; } }
.corner { min-width: 0; padding: clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; position: relative; }
.corner-f { background: linear-gradient(180deg, var(--fund-tint), transparent 70%); }
.corner-w { background: linear-gradient(180deg, var(--wsb-tint), transparent 70%); }
.corner p { margin: 0; }
.corner-head { display: flex; align-items: center; gap: 14px; }
.agent-name { font-weight: 800; font-size: 19px; font-stretch: 105%; }
.agent-alias { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-top: 2px !important; }
.corner-f { --c: var(--fund); } .corner-w { --c: var(--wsb); }
.corner .kpi-value { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: clamp(72px, 9.2vw, 148px); line-height: .86; letter-spacing: -.035em; margin-top: 8px !important; }
.kpi-value.up { color: var(--gain); } .kpi-value.down { color: var(--loss); }
.kpi-sub { font-size: 17px; color: var(--ink-2); }
.kpi-sub strong { color: var(--ink); font-size: 1.15em; }
.agent-spark { display: block; width: 100%; height: 44px; margin: 4px 0; }
.agent-spark polyline { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.agent-spark .conn { stroke-width: 1.2; stroke-dasharray: 1 4; }
.agent-spark .base { stroke: var(--line-strong); stroke-width: 1; }
.agent-spark .cband { fill: var(--band); }
.agent-line { font-family: var(--font-serif); font-size: 17px; color: var(--ink-2); }
.kpi-note { font-size: 13.5px; color: var(--ink-3); }
.kpi-after { padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 14px; color: var(--ink-2); }
.kpi-after strong { font-variant-numeric: tabular-nums; }
.vs { display: grid; place-items: center; border-block: 2px solid var(--rule); background: var(--ink); color: var(--bg); padding: 8px; }
@media (min-width: 900px) { .vs { border-block: 0; border-inline: 2px solid var(--rule); padding: 0 14px; } }
.vs span { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(28px, 3vw, 44px); letter-spacing: .02em; }
@media (min-width: 900px) { .vs span { writing-mode: vertical-rl; transform: rotate(180deg); } }
.referee { display: grid; gap: 4px 24px; align-items: center; padding: 16px clamp(18px, 2.4vw, 32px); border: 2px solid var(--rule); border-top: 0; background: linear-gradient(90deg, var(--spy-tint), transparent 60%); --c: var(--spy); }
@media (min-width: 900px) { .referee { grid-template-columns: auto auto 1fr auto; } }
.referee p { margin: 0; }
.kpi-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.key { width: 22px; height: 4px; background: var(--c, var(--ink)); display: inline-block; }
.referee .kpi-value { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: clamp(40px, 4vw, 60px); line-height: 1; letter-spacing: -.03em; }
.ref-text { font-size: 15px; color: var(--ink-2); }
.referee .kpi-after { border-top: 0; padding-top: 0; }
.status { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 14px 18px; border-left: 6px solid var(--ink); background: var(--surface-2); font-size: 16px; color: var(--ink-2); }
.status p { margin: 0; }
.status strong { color: var(--ink); }
.status-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 4px); border: 1.5px solid var(--ink); }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; font-weight: 600; align-self: flex-start; }
.scroll-cue i { width: 11px; height: 11px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
html.js.motion .scroll-cue i { animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(5px) rotate(45deg); } }

/* Avatares (ranura lista para los logos de marca) */
.avatar { --c: var(--ink); width: 64px; height: 64px; flex: none; display: grid; place-items: center; border: 2.5px solid var(--ink); background: var(--surface); position: relative; overflow: hidden; }
.avatar.fund { --c: var(--fund); background: var(--fund-tint); }
.avatar.wsb { --c: var(--wsb); background: var(--wsb-tint); border-radius: 50%; }
.avatar .mono-f { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: 40px; line-height: 1; color: var(--c); }
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.avatar.has-img { background: transparent; border: 0; border-radius: 0; }
.avatar.sm { width: 34px; height: 34px; border-width: 2px; }
.avatar.sm .mono-f { font-size: 22px; }
.avatar.xs { width: 20px; height: 20px; border-width: 1.5px; }
.avatar.xs .mono-f { font-size: 13px; }

/* ---------------------------------------------------------------- ¿Qué es WSB? */
.slang { display: grid; gap: 0; border: 2px solid var(--rule); background: var(--surface); }
@media (min-width: 640px) { .slang { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .slang { grid-template-columns: repeat(4, 1fr); } }
.slang-card { padding: 18px 20px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); min-width: 0; transition: background .2s; }
.slang-card:hover { background: var(--wsb-tint); }
.slang-card p { margin: 0; }
.slang-term { font-family: var(--font-display); font-weight: 900; font-stretch: 75%; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -.02em; color: var(--wsb); }
.slang-term .emo { font-size: .7em; }
.slang-def { margin-top: 8px !important; font-family: var(--font-serif); font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.apewisdom { margin: 18px 0 clamp(40px, 5vw, 64px); font-family: var(--font-serif); font-size: clamp(18px, 1.4vw, 21px); max-width: 70ch; }
.compare { border: 2px solid var(--rule); background: var(--surface); font-size: 15.5px; }
.cmp-row { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line-strong); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row > span { padding: 12px 16px; min-width: 0; }
.cmp-row > span[role=rowheader] { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 0; }
@media (min-width: 820px) {
  .cmp-row { grid-template-columns: 170px 1fr 1fr; }
  .cmp-row > span { padding: 14px 18px; }
  .cmp-row > span + span { border-left: 1px solid var(--line); }
  .cmp-row > span[role=rowheader] { padding-bottom: 14px; }
  .cmp-row .span2 { grid-column: 2 / -1; }
}
@media (max-width: 819px) {
  .cmp-row > span[role=cell]::before { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
  .cmp-row > span[role=cell]:nth-child(2)::before { content: "Fundamental"; color: var(--fund); }
  .cmp-row > span[role=cell]:nth-child(3)::before { content: "WSB"; color: var(--wsb); }
  .cmp-row.cmp-same > span[role=cell]::before { content: none; }
  .cmp-head > span:first-child { display: none; }
  .cmp-head { grid-template-columns: 1fr 1fr; }
}
.cmp-head { background: var(--ink); color: var(--bg); }
.cmp-agent { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.cmp-head .avatar { border-color: var(--bg); }
.cmp-same { background: var(--surface-2); font-weight: 600; }

/* ---------------------------------------------------------------- Cómo leer */
.primer { display: grid; gap: 0; border: 2px solid var(--rule); }
@media (min-width: 900px) { .primer { grid-template-columns: 1fr 1fr; } }
.primer-card { padding: 24px; background: var(--surface); border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); min-width: 0; }
.primer-card p { margin: 0; }
.primer-term { font-family: var(--font-display); font-weight: 900; font-stretch: 75%; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; letter-spacing: -.025em; }
.primer-def { margin-top: 10px !important; font-family: var(--font-serif); font-size: 19px; line-height: 1.42; color: var(--ink-2); }
.primer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }

/* ---------------------------------------------------------------- Tarjetas de gráfico y leyendas */
.chart-card, .diagram-card { margin: 0; background: var(--surface); border: 2px solid var(--rule); padding: 18px; min-width: 0; }
@media (min-width: 720px) { .chart-card, .diagram-card { padding: 22px 24px; } }
.chart-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 12px; }
.legend-stack { display: grid; gap: 8px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--ink-2); font-weight: 600; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend-keys { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.swatch { display: inline-block; flex: none; }
.swatch.line { width: 20px; height: 3px; }
.swatch.rect { width: 13px; height: 13px; }
.swatch.fund { background: var(--fund-mark); } .swatch.wsb { background: var(--wsb-mark); } .swatch.spy { background: var(--spy-mark); }
.swatch.band { width: 16px; height: 14px; background: repeating-linear-gradient(135deg, var(--band) 0 3px, rgba(22,20,15,.13) 3px 4px); border: 1px solid var(--line-strong); }
.swatch.brk { font-size: 15px; line-height: 1; color: var(--ink); width: 16px; text-align: center; }
.swatch.line.dotted { height: 0; background: none; border-top: 2px dotted var(--ink-2); }
.swatch.rect.hatch { background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 5px); border: 1px solid var(--ink-3); }
.chart { position: relative; width: 100%; }
.chart canvas { display: block; width: 100% !important; }
.chart-tall { height: 380px; } .chart-mid { height: 300px; } .chart-bars { height: 380px; }
@media (min-width: 900px) { .chart-tall { height: 500px; } .chart-mid { height: 340px; } .chart-bars { height: 400px; } }
@media (min-width: 1200px) { .chart-tall { height: 560px; } }
.chart-foot { margin-top: 12px; }
details summary { cursor: pointer; color: var(--ink-2); font-size: 14.5px; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
details summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
details[open] > summary::before { transform: rotate(45deg); }
.chapter-menu summary::before { content: none; }
.viz-tip { position: absolute; pointer-events: none; z-index: 5; background: #16140f; color: #cbc4b4; border-radius: 4px; padding: 10px 12px; min-width: 160px; font-size: 13px; box-shadow: 4px 4px 0 rgba(22,20,15,.25); opacity: 0; transition: opacity .12s; left: 0; top: 0; }
.viz-tip.is-on { opacity: 1; }
.viz-tip .tip-title { font-family: var(--font-mono); font-size: 11.5px; color: #a19a8b; margin-bottom: 6px; }
.viz-tip .tip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 0; }
.viz-tip .tip-key { display: inline-flex; align-items: center; gap: 7px; }
.viz-tip .tip-key i { width: 12px; height: 3px; display: inline-block; }
.viz-tip .tip-val { color: #f2eee3; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La carrera */
.race-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 10px; }
.race-controls .scrub { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.race-controls input[type=range] { flex: 1; min-width: 0; accent-color: #16140f; height: 30px; }
.race-date { font-family: var(--font-mono); font-size: 13px; color: var(--ink); min-width: 92px; text-align: right; font-weight: 600; }
.race-caption { margin: 0 0 8px; min-height: 3.3em; padding: 9px 14px; border-left: 6px solid var(--line-strong); background: var(--surface-2); font-family: var(--font-serif); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.4; color: var(--ink-3); display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.race-caption.is-on { color: var(--ink); border-left-color: var(--ink); }
html.js.motion .race-caption.flash { animation: cap-in .35s var(--ease); }
@keyframes cap-in { from { opacity: .2; transform: translateX(-6px); } }
.race-caption time { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; font-weight: 600; }

/* ---------------------------------------------------------------- Tablas */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid var(--rule); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot td { border-top: 2px solid var(--rule); font-weight: 700; }
table.data.compact { font-size: 14px; } table.data.compact th, table.data.compact td { padding: 8px 10px; }
table.data td.sym { font-weight: 700; font-family: var(--font-mono); }
table.data tr.is-official td { font-weight: 700; background: var(--spy-tint); }
.lev .bar { position: relative; height: 6px; background: var(--surface-3); min-width: 90px; margin-top: 7px; }
.lev .bar i { position: absolute; inset: 0 auto 0 0; }
.lev .bar.fund i { background: var(--fund-mark); } .lev .bar.wsb i { background: var(--wsb-mark); }
.lev .bar::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: var(--one, 25%); width: 2px; background: var(--ink); }
.lev .lev-cell { display: grid; gap: 2px; }
.lev .lev-cell b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lev .lev-cell b.hi { color: var(--loss); }
table.positions { min-width: 600px; }
table.positions td, table.positions th { padding: 10px; }
table.positions th.sep, table.positions td.sep { border-left: 1px solid var(--line); }
table.positions thead tr.group th { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; color: var(--ink); border-bottom: 0; padding-bottom: 0; }
table.positions small.sub { display: block; font-size: 12px; color: inherit; opacity: .85; }
table.cost { min-width: 640px; }
table.cost td small { display: block; }
table.cost tr.subtotal td { font-weight: 700; background: var(--surface-2); }
table.cost tr.total td { font-size: 19px; font-weight: 800; padding-top: 14px; }
@media (max-width: 719px) {
  table.cost { min-width: 0; }
  table.cost thead { display: none; }
  table.cost tbody, table.cost tfoot { display: block; }
  table.cost tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.cost td { display: block; border: 0; padding: 0; }
  table.cost td:nth-child(2) { grid-column: 1 / -1; order: 3; color: var(--ink-3); font-size: 13.5px; }
  table.cost td:nth-child(2):empty { display: none; }
  table.cost td.num { text-align: right; white-space: normal; }
  table.cost tr.subtotal { padding-inline: 10px; }
  table.cost tr.total { border-top: 2px solid var(--rule); border-bottom: 0; }
}

/* ---------------------------------------------------------------- Cronología */
.timeline-block { margin-top: clamp(40px, 5vw, 64px); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; border-top: 2px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 1fr; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline time { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.timeline p { margin: 0; color: var(--ink-2); font-size: 16px; }
.timeline li.is-pause, .timeline li.is-stop { background: linear-gradient(90deg, var(--surface-2), transparent); }
.timeline li.is-pause p, .timeline li.is-stop p { color: var(--ink); }
@media (min-width: 760px) { .timeline li { grid-template-columns: 150px 1fr; padding: 14px 12px; } }

/* ---------------------------------------------------------------- Después del 20-oct (banda en tinta) */
.drift-grid { display: grid; gap: 0; border: 2px solid var(--rule); }
@media (min-width: 760px) { .drift-grid { grid-template-columns: repeat(3, 1fr); } }
.drift { min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.drift p { margin: 0; }
.drift-fund { --c: var(--fund); } .drift-wsb { --c: var(--wsb); } .drift-spy { --c: var(--spy); }
.drift-value { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: clamp(64px, 7vw, 112px); line-height: .88; letter-spacing: -.035em; color: var(--loss); }
.drift-meter { height: 10px; background: var(--surface-3); position: relative; }
.drift-meter i { position: absolute; inset: 0 auto 0 0; background: var(--loss-mark); }
.drift-path { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 17px; }
.drift-text { font-family: var(--font-serif); color: var(--ink-2); font-size: 17px; }
.drift-scale { margin: 10px 0 0; color: var(--ink-3); font-size: 13px; }
.drift-why { margin: 28px 0 0; max-width: 72ch; font-family: var(--font-serif); color: var(--ink-2); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; padding-left: 20px; border-left: 6px solid var(--loss-mark); }
.drift-why strong { color: var(--ink); font-family: var(--font-sans); }
.pos-head { margin-top: clamp(48px, 6vw, 80px); }
.band-ink .chart-card { background: var(--surface); border-color: var(--line-strong); }
.agent-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; }
.agent-head.tight { margin-bottom: 14px; }
.agent-tagline { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.agent-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; color: var(--bg); background: var(--c); }
.agent-chip.fund { --c: var(--fund); } .agent-chip.wsb { --c: var(--wsb); }
.agent-chip::before { content: none; }

/* ---------------------------------------------------------------- Duelo */
.duel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; }
.duel-grid { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 700px) { .duel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .duel-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.flip { perspective: 1200px; min-width: 0; height: 100%; }
.flip-btn { appearance: none; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.flip-inner { display: grid; height: 100%; transition: transform .7s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; transition-delay: var(--d, 0ms); }
.flip-face { grid-area: 1 / 1; min-height: 196px; padding: 18px; background: var(--surface); border: 2px solid var(--rule); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; gap: 6px; }
.flip-face.back { transform: rotateY(180deg); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face.f { --c: var(--fund); box-shadow: inset 0 8px 0 var(--fund-mark); background: linear-gradient(180deg, var(--fund-tint), var(--surface) 55%); }
.flip-face.w { --c: var(--wsb); box-shadow: inset 0 8px 0 var(--wsb-mark); background: linear-gradient(180deg, var(--wsb-tint), var(--surface) 55%); }
.flip-btn:hover .flip-face { transform: translateZ(0); }
.flip-btn:hover .flip-inner:not(:hover) { }
.fx-label { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; margin-top: 6px; }
.fx-who { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.fx-who i { width: 8px; height: 8px; background: var(--c); }
.fx-value { font-family: var(--font-display); font-weight: 900; font-stretch: 72%; font-size: clamp(38px, 3.4vw, 54px); line-height: .95; letter-spacing: -.03em; margin-top: 6px; }
.fx-sub { color: var(--ink-2); font-size: 14px; }
.fx-vs { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--ink-3); }
.fx-vs b { color: var(--ink); font-weight: 700; }
.fx-hint { font-size: 13px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; transform: none !important; }
  .flip-face.back { transform: none; visibility: hidden; }
  .flip.is-flipped .flip-face.front { visibility: hidden; }
  .flip.is-flipped .flip-face.back { visibility: visible; }
}

/* ---------------------------------------------------------------- Decisiones */
.agent-block { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 4vw, 44px); border-top: 2px solid var(--rule); }
.agent-block:first-of-type { border-top: 0; padding-top: 0; }
.cards { display: grid; gap: 14px; }
@media (min-width: 1100px) { .cards { grid-template-columns: 1fr 1fr; } }
.decision { background: var(--surface); border: 2px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.decision:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--c, var(--ink)); }
.agent-fund .decision { --c: var(--fund-mark); } .agent-wsb .decision { --c: var(--wsb-mark); }
.decision header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; }
.decision time { font-family: var(--font-mono); color: var(--ink-3); }
.action { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; padding: 3px 8px; border: 1.5px solid currentColor; }
.action.buy { color: var(--gain); } .action.sell { color: var(--loss); }
.decision .sym { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.decision .px { color: var(--ink-2); }
.decision blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; color: var(--ink); }
.decision .outcome { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pill { display: inline-block; font-weight: 800; font-size: 14px; padding: 2px 8px; margin-right: 8px; font-variant-numeric: tabular-nums; color: var(--bg); }
.pill.up { background: var(--gain); } .pill.down { background: var(--loss); }
.decision .plain, .aside-quote .plain, .chart-card .plain { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--ink-3); padding-top: 10px; border-top: 1px dashed var(--line-strong); max-width: none; }
.aside-quote .plain { margin-bottom: 12px; border-top: 0; padding-top: 0; }
.chart-card .plain { border-top: 0; padding-top: 0; margin: -6px 0 14px; }
.aside-quote { margin-top: 22px; padding: 18px 20px; background: var(--surface-2); border-left: 6px solid var(--ink); }
.aside-label { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.aside-quote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aside-quote li { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.aside-quote li time { font-family: var(--font-mono); color: var(--ink-3); font-size: 12.5px; margin-right: 6px; }
.aside-quote li.is-last { color: var(--ink); padding-top: 10px; border-top: 1px dashed var(--line-strong); }

/* ---------------------------------------------------------------- Explorador */
.explorer { background: var(--surface); border: 2px solid var(--rule); padding: 18px; }
@media (min-width: 720px) { .explorer { padding: 22px 24px; } }
.ex-controls { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: end; }
@media (min-width: 900px) { .ex-controls { grid-template-columns: auto 150px 150px minmax(140px, 1fr) 150px 150px auto; } }
.ex-controls .seg { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .ex-controls .seg { grid-column: auto; } }
.field.grow { grid-column: 1 / -1; }
@media (min-width: 900px) { .field.grow { grid-column: auto; } }
.ex-controls .btn { justify-self: start; }
.ex-count { margin: 20px 0 10px; font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-2); }
.ex-count b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-strip { position: relative; height: 116px; background: var(--bg); border: 2px solid var(--rule); touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.ex-strip canvas { display: block; width: 100%; height: 100%; }
.ex-brush { position: absolute; top: 0; bottom: 0; background: rgba(22, 20, 15, .1); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); pointer-events: none; }
.ex-strip-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.ex-strip-foot ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.ex-strip-foot li { display: inline-flex; align-items: center; gap: 6px; }
.ex-strip-foot li i { width: 10px; height: 10px; display: inline-block; }
.act-buy { --a: var(--gain-mark); } .act-sell { --a: var(--loss-mark); } .act-cancel { --a: #8c8577; } .act-other { --a: var(--ink); }
.ex-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 12px; }
.ex-spot { margin: 0 0 18px; padding: 20px 22px; background: var(--surface-2); border: 2px solid var(--rule); border-left-width: 10px; }
html.js.motion .ex-spot.pop { animation: pop .45s var(--ease); }
@keyframes pop { from { transform: translateX(-8px); opacity: .3; } }
.ex-spot blockquote { margin: 10px 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; }
.ex-list { display: grid; gap: 10px; }
.dcard { border: 1.5px solid var(--line-strong); padding: 12px 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; border-left: 5px solid var(--ag, var(--ink-3)); }
.dcard:hover { border-color: var(--ink); background: var(--bg); }
.dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-3); }
.dmeta time { font-family: var(--font-mono); font-size: 12px; }
.dmeta .who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.dmeta .who i { width: 9px; height: 9px; display: inline-block; }
.chip { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 2px 7px; border: 1.5px solid var(--a, var(--ink-3)); color: var(--ink); background: color-mix(in oklab, var(--a, transparent) 14%, transparent); }
.dmeta .sym { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: 14px; }
.st { font-size: 12.5px; font-weight: 700; }
.st-EXECUTED { color: var(--gain); } .st-SKIPPED { color: var(--ink-3); } .st-ERROR { color: var(--loss); }
.dwhy { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.dr { margin: 8px 0 0; font-family: var(--font-serif); color: var(--ink); font-size: 16.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dcard.is-open .dr { -webkit-line-clamp: unset; display: block; }
.dcard .more { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ex-empty { padding: 24px; text-align: center; color: var(--ink-3); border: 1.5px dashed var(--line-strong); margin: 0; }
#exMore { margin: 16px auto 0; display: flex; }
.ex-summary-head { margin: clamp(48px, 6vw, 72px) 0 18px; }
.stats-grid { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card { background: var(--surface); border: 2px solid var(--rule); padding: 20px 22px; min-width: 0; }
.stat-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.stat-rows { display: grid; gap: 16px; }
.stat-row { display: grid; gap: 6px; }
.stat-row .row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink-2); }
.stat-row .row-head b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-row .row-head .who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.stat-row .row-head .who i { width: 10px; height: 10px; display: inline-block; }
.segbar { display: flex; height: 28px; gap: 2px; }
.segbar span { position: relative; display: flex; align-items: center; padding-left: 8px; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; min-width: 0; }
.segbar span.thin { font-size: 0; padding: 0; }
.seg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin: 10px 0 0; list-style: none; padding: 0; }
.seg-legend li { display: inline-flex; align-items: center; gap: 7px; }
.seg-legend i { width: 10px; height: 10px; display: inline-block; }
.cat-buy { background: var(--gain-mark); } .cat-sell { background: var(--loss-mark); } .cat-cancel { background: #8c8577; } .cat-reduce { background: #5d574c; } .cat-other { background: #b5ad9c; }
.cat-exec { background: var(--gain-mark); } .cat-skip { background: #8c8577; } .cat-err { background: var(--loss-mark); }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; color: var(--ink-2); align-items: end; }
.rank .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .val { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank .track { grid-column: 1 / -1; height: 8px; background: var(--surface-3); position: relative; }
.rank .track i { position: absolute; inset: 0 auto 0 0; background: #8c8577; }
.rank li:first-child .track i { background: var(--loss-mark); }
.fact { background: var(--surface); border: 2px solid var(--rule); padding: 22px; min-width: 0; }
.fact p { margin: 0; }
.fact-value { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: clamp(54px, 5.6vw, 84px); line-height: .9; letter-spacing: -.03em; }
.fact-label { margin-top: 10px !important; font-weight: 800; font-size: 16.5px; }
.fact-text { margin-top: 8px !important; color: var(--ink-2); font-size: 15px; }
.facts-2, .mood-facts { margin-top: 16px; }

/* ---------------------------------------------------------------- Humor */
.mood { background: var(--surface); border: 2px solid var(--rule); padding: 18px; }
@media (min-width: 720px) { .mood { padding: 22px 24px; } }
.mood-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.mood-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mood-legend i { width: 12px; height: 12px; }
.mood-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.mood-chart { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9px, 1fr); align-items: stretch; min-width: 760px; padding-left: 96px; }
.mood-chart::before, .mood-chart::after { content: ""; position: absolute; left: 96px; right: 0; height: 2px; background: var(--ink); pointer-events: none; }
.mood-chart::before { top: 63px; } .mood-chart::after { top: 209px; }
.mood-rowlab { position: absolute; left: 0; width: 90px; font-size: 13px; color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.mood-rowlab i { width: 10px; height: 10px; flex: none; }
.mday { appearance: none; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; position: relative; display: grid; grid-template-rows: 64px 64px 18px 64px 64px 22px; }
.mday:hover, .mday.is-sel { background: rgba(22, 20, 15, .07); }
.mday.is-sel { box-shadow: inset 0 0 0 2px var(--ink); }
.mday.mar { background: rgba(208, 53, 47, .07); }
.mday.mar.is-sel, .mday.mar:hover { background: rgba(208, 53, 47, .15); }
.mbar { width: 64%; justify-self: center; }
.mbar.up { align-self: end; background: var(--gain-mark); }
.mbar.dn { align-self: start; background: var(--loss-mark); }
.mlab { grid-row: 6; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; align-self: end; justify-self: start; font-weight: 600; }
.mgap { display: grid; place-items: center; min-width: 52px; margin: 0 4px; background: repeating-linear-gradient(135deg, var(--band) 0 4px, rgba(22,20,15,.12) 4px 5px); border-inline: 2px solid var(--ink); position: relative; }
.mgap::before, .mgap::after { content: "⫽"; position: absolute; left: 50%; transform: translateX(-50%); font-size: 16px; line-height: 1; background: var(--surface); padding: 0 2px; }
.mgap::before { top: 56px; } .mgap::after { top: 201px; }
.mgap span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; background: var(--surface); padding: 6px 2px; }
.mood-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
@media (min-width: 900px) { .mood-hint { display: none; } }
.mood-note { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }
.mood-detail { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 900px) { .mood-detail { grid-template-columns: 1fr 1fr; } }
.md-card { padding: 16px 18px; background: var(--surface-2); border-top: 6px solid var(--c, var(--ink)); }
.md-card p { margin: 0; }
.md-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.md-head b { color: var(--ink); }
.md-text { margin-top: 8px !important; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; }

/* ---------------------------------------------------------------- Arquitectura interactiva */
.arch { display: grid; gap: 16px; border: 2px solid var(--rule); background: var(--surface); }
@media (min-width: 1100px) { .arch { grid-template-columns: minmax(0, 1fr) 320px; } }
.arch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px; }
.arch-svg { display: block; width: 100%; min-width: 900px; height: auto; font-family: var(--font-sans); }
.arch-frame rect { fill: var(--surface-2); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }
.arch-frame text { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; fill: var(--ink-2); font-weight: 600; }
.anode { cursor: pointer; outline: none; }
.anode rect.box { fill: var(--surface); stroke: var(--ink); stroke-width: 2; transition: fill .15s; }
.anode rect.accent { fill: var(--c, var(--ink)); }
.anode .t1 { font-size: 17px; font-weight: 800; fill: var(--ink); }
.anode .t2 { font-size: 13px; fill: var(--ink-2); }
.anode .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.anode .shadow { fill: var(--ink); opacity: 0; transition: opacity .15s; }
.anode:hover .shadow, .anode:focus-visible .shadow, .anode.is-sel .shadow { opacity: 1; }
.anode:hover rect.box, .anode:focus-visible rect.box { fill: var(--bg); }
.anode.is-sel rect.box { fill: var(--spy-tint); }
.anode.fund { --c: var(--fund-mark); } .anode.wsb { --c: var(--wsb-mark); } .anode.ext { --c: var(--spy-mark); } .anode.store { --c: var(--ink-3); } .anode.fail { --c: var(--loss-mark); }
.aedge { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.aedge.fund { stroke: var(--fund-mark); } .aedge.wsb { stroke: var(--wsb-mark); } .aedge.fail { stroke: var(--loss-mark); stroke-dasharray: 5 5; }
.aflow { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1.5 26; opacity: 0; }
html.js.motion .arch.is-live .aflow { opacity: .85; animation: flow 1.6s linear infinite; }
html.js.motion .arch.is-live .aflow.fund { stroke: var(--fund-mark); } html.js.motion .arch.is-live .aflow.wsb { stroke: var(--wsb-mark); }
@keyframes flow { to { stroke-dashoffset: -27.5; } }
.aedge-label { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.arch-panel { padding: 20px; border-top: 2px solid var(--rule); min-height: 220px; }
@media (min-width: 1100px) { .arch-panel { border-top: 0; border-left: 2px solid var(--rule); } }
.arch-panel h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 80%; font-size: 30px; line-height: 1; letter-spacing: -.02em; margin-bottom: 10px; }
.arch-panel dl { margin: 0; display: grid; gap: 12px; }
.arch-panel dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.arch-panel dd { margin: 3px 0 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.45; }
.arch-hint { margin: 0; font-family: var(--font-serif); font-size: 18px; color: var(--ink-2); }
.arch-kicker { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin: 0 0 6px; }
.zoom-cards { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 760px) { .zoom-cards { grid-template-columns: 2fr 1fr; } }
.zoom-card { appearance: none; display: grid; grid-template-rows: 180px auto; padding: 0; text-align: left; font: inherit; color: var(--ink); background: #0b1220; border: 2px solid var(--rule); cursor: zoom-in; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.zoom-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.zoom-card img { width: 100%; height: 180px; object-fit: cover; object-position: center top; }
.zoom-card span { display: block; padding: 12px 14px; background: var(--surface); font-size: 14px; color: var(--ink-2); border-top: 2px solid var(--rule); }
.zoom-card b { display: block; font-size: 16px; color: var(--ink); }
.how-tech { margin-top: clamp(40px, 5vw, 64px); }
.how-p { color: var(--ink-2); margin: 0; font-size: 16px; }
.how-text .sub-head { margin-top: 28px; }
.how-text .sub-head:first-child { margin-top: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--font-mono); font-size: 13px; padding: 6px 10px; border: 1.5px solid var(--ink); background: var(--surface); }
.infra { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 2px solid var(--rule); }
@media (min-width: 720px) { .infra { grid-template-columns: repeat(4, 1fr); } }
.infra div { padding: 14px 16px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: var(--surface); min-width: 0; }
.infra dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.infra dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 900; font-stretch: 75%; font-size: 30px; letter-spacing: -.02em; }
.infra dd small { display: block; font-family: var(--font-sans); font-size: 12.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }

/* Visor con zoom */
dialog.zoom-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b1220; color: #f2eee3; display: none; }
dialog.zoom-viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
dialog.zoom-viewer::backdrop { background: rgba(0,0,0,.6); }
.zv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; background: #16140f; border-bottom: 2px solid #f2eee3; }
.zv-bar p { margin: 0; font-weight: 800; font-size: 16px; }
.zv-tools { display: flex; gap: 6px; }
.zv-btn { appearance: none; min-width: 44px; height: 44px; padding: 0 12px; font: inherit; font-size: 20px; font-weight: 800; color: #16140f; background: #f2eee3; border: 0; cursor: pointer; }
.zv-btn.wide { font-size: 14.5px; }
.zv-btn:hover { background: #fff; }
.zv-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.zv-stage.is-drag { cursor: grabbing; }
.zv-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; }
.zv-help { margin: 0; padding: 8px 14px; font-size: 13px; color: #a19a8b; background: #16140f; text-align: center; }

/* ---------------------------------------------------------------- Lecciones (banda en tinta) */
.lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 2px solid var(--rule); }
@media (min-width: 900px) { .lessons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .lessons { grid-template-columns: repeat(4, 1fr); } }
.lesson { padding: 22px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); min-width: 0; }
.lesson .num { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: 44px; line-height: .8; color: var(--ink-3); }
.lesson h3 { font-size: 19px; font-weight: 800; line-height: 1.2; }
.lesson p { margin: 0; color: var(--ink-2); font-size: 15px; }
.lesson-hero { background: var(--surface); }
@media (min-width: 900px) { .lesson-hero { grid-column: span 2; } }
.lesson-hero .num { color: var(--spy); font-size: 64px; }
.lesson-hero h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 85%; font-size: clamp(30px, 2.8vw, 44px); line-height: 1; letter-spacing: -.02em; }
.lesson-hero p { font-family: var(--font-serif); font-size: 18px; line-height: 1.5; }
.lesson-hero p strong { color: var(--ink); font-family: var(--font-sans); }
.lesson pre { margin: 4px 0; padding: 16px 18px; background: #0b0a08; border: 1.5px solid var(--line-strong); overflow-x: auto; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.55; color: #f2eee3; }
.lesson pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }
.c-var { color: #45c3c7; } .c-com { color: #8f887a; }
@media (max-width: 719px) { .lesson pre { white-space: pre-wrap; overflow-wrap: anywhere; } }
.big-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-family: var(--font-display); font-weight: 900; font-stretch: 72%; letter-spacing: -.02em; }
.big-fig .from { font-size: clamp(30px, 2.8vw, 42px); color: var(--ink-2); }
.big-fig .to { font-size: clamp(44px, 4.2vw, 64px); color: var(--gain); }
.big-fig .arrow { color: var(--ink-3); font-size: 30px; }
.big-fig .when { width: 100%; font-family: var(--font-sans); font-weight: 400; font-stretch: 100%; font-size: 14px; color: var(--ink-3); letter-spacing: 0; }

/* ---------------------------------------------------------------- Coste */
.cost-layout { display: grid; gap: 24px; }
@media (min-width: 1000px) { .cost-layout { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } }
.cost-hero { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--ink); color: var(--bg); }
.cost-fig { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: clamp(64px, 6.4vw, 96px); line-height: .9; letter-spacing: -.035em; white-space: nowrap; }
.cost-cap { font-size: 15px; opacity: .85; }
.cost-next { margin: 18px 0 0; font-family: var(--font-serif); font-size: 18px; color: var(--ink-2); }

/* ---------------------------------------------------------------- Glosario */
.glossary { margin: 0; display: grid; gap: 0; border: 2px solid var(--rule); }
@media (min-width: 900px) { .glossary { grid-template-columns: 1fr 1fr; } }
.glossary div { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.glossary dt { font-weight: 800; font-size: 17px; }
.glossary dd { margin: 6px 0 0; font-family: var(--font-serif); color: var(--ink-2); font-size: 17px; line-height: 1.45; }
dialog.glossary-dialog { width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 900px); padding: 0; border: 2px solid var(--rule); background: var(--bg); color: var(--ink); box-shadow: 10px 10px 0 #16140f; }
dialog.glossary-dialog::backdrop { background: rgba(22, 20, 15, .55); }
.gd-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg); border-bottom: 2px solid var(--rule); }
.gd-head h2 { font-size: 32px; }
.gd-body { padding: 16px 18px 22px; }
.gd-body .glossary { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- Pie */
.footer { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--gutter) 64px; border-top: 6px solid var(--rule); display: grid; gap: 12px; color: var(--ink-3); font-size: 14.5px; }
.footer p { margin: 0; max-width: 80ch; }
.disclaimer { color: var(--ink-2); padding: 16px 18px; border: 2px solid var(--rule); background: var(--surface); font-size: 15px; }
.disclaimer strong { color: var(--ink); }
.sources { font-family: var(--font-mono); font-size: 12.5px; }
.author { font-weight: 700; color: var(--ink); }
.load-error { margin: 16px var(--gutter); padding: 14px 16px; border: 2px solid var(--loss); background: var(--surface); color: var(--ink); }

/* ---------------------------------------------------------------- Movimiento «imprenta» */
html.js.motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--rd, 0ms); }
html.js.motion .rv.is-in { opacity: 1; transform: none; }
html.js.motion .section-head.rv { opacity: 1; transform: none; }
html.js.motion .section-head.rv .ch-mark { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease-press); }
html.js.motion .section-head.rv h2 { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-press) .12s; }
html.js.motion .section-head.rv.is-in .ch-mark, html.js.motion .section-head.rv.is-in h2 { clip-path: inset(0 0 0 0); }
html.js.motion .section-head.rv .plain, html.js.motion .section-head.rv .section-lead { opacity: 0; transition: opacity .6s var(--ease) .35s; }
html.js.motion .section-head.rv.is-in .plain, html.js.motion .section-head.rv.is-in .section-lead { opacity: 1; }
@media print {
  html.js.motion .rv, html.js.motion .section-head.rv *, html.js.motion .portada h1 .w { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .rail, .topbar, .ticker, .zoom-viewer { display: none !important; }
  .chapter { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .decision:hover, .zoom-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- Marcas */
.brand img { height: 30px; width: auto; }
.mh-logo img { height: 34px; width: auto; }
.corner .avatar.has-img { width: 76px; height: 76px; }
.corner .avatar.has-img img { width: 76px; height: 76px; }
.ch-mascot { position: absolute; right: 0; top: 0; width: clamp(96px, 12vw, 168px); height: auto; transform: rotate(-6deg); }
@media (max-width: 719px) { .ch-mascot { width: 72px; top: -6px; } .section-head:has(.ch-mascot) h2 { padding-right: 70px; } }
@media (min-width: 720px) { .section-head:has(.ch-mascot) { padding-right: 190px; } }
.lg-mark { width: 18px; height: 18px; margin-left: -2px; }
.kpi-label .lg-mark { width: 26px; height: 26px; }
.av { width: 34px; height: 34px; border-radius: 50%; }
.agent-chip img { width: 22px; height: 22px; border-radius: 50%; margin-left: -4px; box-shadow: 0 0 0 2px var(--bg); }
.agent-chip { border-radius: 999px; padding: 4px 12px 4px 6px; }
.fx-who img { width: 20px; height: 20px; }
.dmeta .who img, .stat-row .row-head .who img, .md-head .who img { width: 18px; height: 18px; border-radius: 50%; }
.md-head .who { display: inline-flex; align-items: center; gap: 7px; }
.mood-rowlab img { width: 22px; height: 22px; border-radius: 50%; flex: none; }

/* ---------------------------------------------------------------- Ajustes tras revisión */
.slang { margin-bottom: clamp(40px, 5vw, 64px); }
.slang-ape { background: var(--ink); color: var(--bg); }
.slang-ape .slang-term { color: var(--bg); }
.slang-ape .slang-def { color: #cbc4b4; }
.slang-ape:hover { background: var(--ink); }
/* Arquitectura: diagrama a todo el ancho, ficha debajo */
.arch { grid-template-columns: 1fr !important; }
.arch-panel { border-left: 0 !important; border-top: 2px solid var(--rule) !important; min-height: 0; }
@media (min-width: 900px) {
  .arch-panel dl { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .arch-panel { display: grid; grid-template-columns: 260px 1fr; gap: 8px 28px; align-items: start; padding: 22px 24px; }
  .arch-panel .arch-kicker, .arch-panel h3 { grid-column: 1; }
  .arch-panel dl { grid-column: 2; grid-row: 1 / span 2; }
  .arch-panel .arch-hint { grid-column: 1 / -1; }
}
.arch-svg { min-width: 980px; }
/* Posiciones: una tabla por fila (no caben dos de 7 columnas) */
#despues .grid-2 { grid-template-columns: 1fr; }
/* Humor: más sitio para la etiqueta de fila */
.mood-chart { padding-left: 128px; grid-auto-columns: auto; }
.mood-chart::before, .mood-chart::after { left: 128px; }
.mood-rowlab { width: 124px; }
.mgap { min-width: 0; margin: 0 6px; }
.arch-swipe { margin: 0; padding: 10px 14px 0; font-size: 13px; color: var(--ink-3); }
@media (min-width: 1000px) { .arch-swipe { display: none; } }