/* ============ Tokens ============ */
:root {
  --bg: #F1F5F3;
  --surface: #FFFFFF;
  --surface-2: #E6EDEA;
  --ink: #1D2742;
  --ink-2: #4A5570;
  --line: #CCD6D2;
  --dopa: #E59A2B;
  --syn: #8B4C7E;
  --heal: #2C8C7F;
  --warn: #C9472F;
  --neuron: #9DB7D9;
  --pE: #E59A2B;
  --pM: #3B5BA9;
  --pS: #2C8C7F;
  --pA: #D2668A;
  --focus: #3B5BA9;
  --shadow: 0 1px 2px rgba(29, 39, 66, .06), 0 6px 18px rgba(29, 39, 66, .06);
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 8px;
  --f-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-head: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111827; --surface: #1A2233; --surface-2: #232D42; --ink: #E9EDF5; --ink-2: #A9B3C8; --line: #33405A;
    --neuron: #5E7BA8; --pM: #7C97DA; --pA: #E48AA8; --focus: #9DB4F0; --syn: #C37BB4;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111827; --surface: #1A2233; --surface-2: #232D42; --ink: #E9EDF5; --ink-2: #A9B3C8; --line: #33405A;
  --neuron: #5E7BA8; --pM: #7C97DA; --pA: #E48AA8; --focus: #9DB4F0; --syn: #C37BB4;
  color-scheme: dark;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 18px/1.6 var(--f-body);
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--f-head); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--pM); text-underline-offset: 3px; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
section { padding: 56px 0; }
.sec-head { margin-bottom: 28px; }
.sec-head p { color: var(--ink-2); }

/* ============ Header ============ */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 1.15rem var(--f-head); letter-spacing: -.01em; }
.brand svg { width: 30px; height: 30px; }
.nav { display: none; gap: 4px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: .95rem; }
.nav a:hover { background: var(--surface-2); }
.lang { display: flex; margin-left: auto; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.lang button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .9rem; min-width: 44px; min-height: 36px; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (min-width: 900px) { .nav { display: flex; } .lang { margin-left: 8px; } }

/* ============ Hero ============ */
.hero { padding: 40px 0 32px; }
.hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: 48px; } }
.lead { font-size: 1.12rem; color: var(--ink-2); }
.update-box { margin-top: 24px; padding: 16px 18px; border-left: 4px solid var(--dopa); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; box-shadow: var(--shadow); }
.upd { margin: 0 0 4px; font-size: .95rem; }
.upd-sum { font-size: .98rem; color: var(--ink-2); margin-bottom: 12px; }
.upd-sum:empty { display: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-weight: 700; cursor: pointer; min-height: 44px; }
.btn:hover { filter: brightness(1.15); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-note { display: block; margin-top: 8px; font-size: .9rem; color: var(--ink-2); min-height: 1.2em; }

.hero-fig { margin: 0; }
.brain-stage { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 10px 10px 4px; }
.brain-stage svg { width: 100%; height: auto; display: block; }
.brain-stage .striatum { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.brain-stage .lbl { font: 600 13px var(--f-body); fill: var(--ink-2); }
.brain-stage .receptors circle { fill: none; stroke: var(--pM); stroke-width: 2; stroke-dasharray: 4 3; opacity: .55; }
.brain-stage .axon { fill: none; stroke: var(--neuron); stroke-width: 5; stroke-linecap: round; transition: opacity .8s, stroke .8s; }
.brain-stage .dend { fill: none; stroke: var(--neuron); stroke-width: 4; stroke-linecap: round; transition: opacity .8s; }
.brain-stage .soma { stroke: var(--neuron); stroke-width: 2; transition: opacity .8s, transform .8s; transform-box: fill-box; transform-origin: center; }
.brain-stage .nucleus { fill: var(--ink); opacity: .55; }
.brain-stage .dopa circle { fill: var(--dopa); transition: opacity .8s; }
.brain-stage .clumps circle { fill: var(--syn); opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .9s, transform .9s; }
.brain-stage .shield circle { fill: none; stroke: var(--heal); stroke-width: 3; stroke-dasharray: 6 6; opacity: 0; transition: opacity .8s; }
.brain-stage[data-state="1"] .clumps circle { opacity: 1; transform: scale(1); }
.brain-stage[data-state="1"] .n2 { opacity: .35; }
.brain-stage[data-state="1"] .dopa .d2 { opacity: 0; }
.brain-stage[data-state="1"] .dopa circle:not(.d2):nth-child(2) { opacity: 0; }
.brain-stage[data-state="2"] .clumps circle { opacity: .25; transform: scale(.5); }
.brain-stage[data-state="2"] .shield circle { opacity: .9; animation: spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.brain-cap { padding: 6px 10px 10px; font-size: 1rem; color: var(--ink); min-height: 4.8em; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.seg button { flex: 1 1 auto; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 14px; cursor: pointer; font-weight: 700; font-size: .95rem; min-height: 44px; }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 14px 4px 0; border-top: 3px solid var(--ink); }
.stat b { display: block; font: 800 2.4rem/1 var(--f-head); letter-spacing: -.03em; }
.stat span { font-size: .95rem; color: var(--ink-2); }
.stat.st-ok { border-color: var(--heal); }
.stat.st-ap b { color: var(--heal); }
.stat.st-stop { border-color: var(--warn); }

/* ============ Llegenda flor ============ */
.legend-sec { padding: 40px 0; background: var(--surface); }
.legend-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .legend-grid { grid-template-columns: 260px 1fr; gap: 40px; } }
.legend-glyph { max-width: 240px; margin: 0 auto; }
.legend-glyph svg { width: 100%; height: auto; }
.petal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 620px) { .petal-list { grid-template-columns: 1fr 1fr; } }
.petal-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.petal-list i { width: 14px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; margin-top: 4px; }
.petal-list b { display: block; }
.petal-list span { color: var(--ink-2); font-size: .95rem; }

/* ============ Glyph ============ */
.glyph .ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.glyph .core { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.glyph text { font: 800 11.5px var(--f-head); fill: var(--ink); }
.glyph .pE { fill: var(--pE); } .glyph .pM { fill: var(--pM); } .glyph .pS { fill: var(--pS); } .glyph .pA { fill: var(--pA); }
.glyph.stopped .pE, .glyph.stopped .pM, .glyph.stopped .pS, .glyph.stopped .pA { fill: var(--line); }

/* ============ Filtres i llista ============ */
.filters { display: grid; gap: 14px; margin-bottom: 18px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: .95rem; min-height: 44px; white-space: nowrap; }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink)); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.filters-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.sel { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.sel select { border: 1.5px solid var(--line); background: var(--surface); padding: 8px 10px; border-radius: var(--r-sm); min-height: 44px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; min-height: 44px; }
.chk input { width: 20px; height: 20px; accent-color: var(--ink); }

.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rank; }
.trow { counter-increment: rank; }
.trow > button {
  width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: 14px; display: grid; grid-template-columns: 76px 1fr; gap: 6px 14px; align-items: center; cursor: pointer;
  border-left: 6px solid var(--mc, var(--ink));
}
.trow > button:hover { border-color: var(--ink-2); border-left-color: var(--mc); }
.trow .glyph { width: 76px; height: 76px; grid-row: span 2; }
.trow .tname { font: 700 1.15rem/1.25 var(--f-head); }
.trow .tname::before { content: counter(rank) ". "; color: var(--ink-2); font-weight: 500; }
.trow .tsub { color: var(--ink-2); font-size: .92rem; display: block; margin-top: 2px; }
.trow .tmeta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .92rem; }
@media (min-width: 760px) {
  .trow > button { grid-template-columns: 84px minmax(0, 1.4fr) minmax(0, 1fr) 120px; padding: 16px 20px; }
  .trow .glyph { width: 84px; height: 84px; grid-row: auto; }
  .trow .tmeta { grid-column: auto; }
}
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); }
.badge.mech i { width: 9px; height: 9px; border-radius: 50%; background: var(--mc); }
.badge.st-approved { background: color-mix(in srgb, var(--heal) 18%, var(--surface)); color: var(--heal); }
.badge.st-recruiting, .badge.st-active { background: color-mix(in srgb, var(--pM) 14%, var(--surface)); color: var(--pM); }
.badge.st-stopped { background: color-mix(in srgb, var(--warn) 15%, var(--surface)); color: var(--warn); }
.badge.new { background: var(--dopa); color: #1D2742; }
.pipe { display: flex; align-items: center; gap: 0; }
.pipe span { position: relative; font-size: .78rem; font-weight: 700; color: var(--ink-2); padding: 0 8px; }
.pipe span::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); margin: 0 auto 2px; }
.pipe span.done::before { background: var(--mc); border-color: var(--mc); }
.pipe span.cur::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mc) 30%, transparent); }
.pipe span.cur { color: var(--ink); }
.pipe.stopped span.cur::before { background: var(--warn); border-color: var(--warn); box-shadow: none; }
.prob { text-align: right; }
.prob b { font: 800 1.7rem/1 var(--f-head); letter-spacing: -.02em; display: block; }
.prob small { font-size: .8rem; color: var(--ink-2); }
@media (max-width: 759px) { .prob { text-align: left; display: flex; align-items: baseline; gap: 6px; } .prob b { font-size: 1.15rem; display: inline; } }
.empty { padding: 28px; text-align: center; color: var(--ink-2); }

/* ============ Mecanismes ============ */
.mech-sec { background: var(--surface); }
.mech-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; }
.mech-tabs button { flex: 0 0 auto; border: 1.5px solid var(--line); background: var(--bg); border-radius: var(--r-md); padding: 10px 14px; text-align: left; cursor: pointer; min-height: 44px; border-top: 4px solid var(--mc); }
.mech-tabs button b { display: block; font-size: .98rem; }
.mech-tabs button span { font-size: .82rem; color: var(--ink-2); }
.mech-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); border-top-color: var(--mc); }
.mech-tabs button[aria-selected="true"] span { color: var(--bg); opacity: .8; }
.mech-panel { display: grid; gap: 22px; }
@media (min-width: 900px) { .mech-panel { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.mech-list h3 { margin-top: 4px; }
.mech-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mech-list li button { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; text-align: left; min-height: 44px; }
.mech-list li button .glyph { width: 40px; height: 40px; flex: 0 0 40px; }

/* Animació */
.ma { background: var(--bg); border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; }
.ma svg { display: block; width: 100%; height: auto; }
.ma-ctrl { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; align-items: start; }
.ma-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ma-steps button { width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: 10px; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); font-size: .98rem; line-height: 1.45; }
.ma-steps .n { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.ma-steps button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.ma-steps button[aria-pressed="true"] .n { background: var(--mc, var(--ink)); border-color: var(--mc, var(--ink)); color: #fff; }
.ma-play { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1rem; }

/* Motor genèric de passos */
.ma .mv {
  --t0: none; --t1: initial; --t2: initial; --o0: 1; --o1: initial; --o2: initial; --f0: initial; --f1: initial; --f2: initial;
  transform: var(--t0); opacity: var(--o0); transform-box: fill-box; transform-origin: center;
  transition: transform 1s cubic-bezier(.5, 0, .2, 1), opacity .8s;
}
.ma .mv.slow { transition-duration: 1.6s, 1.1s; }
.ma[data-step="1"] .mv { transform: var(--t1, var(--t0)); opacity: var(--o1, var(--o0)); }
.ma[data-step="2"] .mv { transform: var(--t2, var(--t1, var(--t0))); opacity: var(--o2, var(--o1, var(--o0))); }
.ma .mv .fillv { fill: var(--f0); transition: fill 1s; }
.ma[data-step="1"] .mv .fillv { fill: var(--f1, var(--f0)); }
.ma[data-step="2"] .mv .fillv { fill: var(--f2, var(--f1, var(--f0))); }
.ma .mv.pivot { transform-box: view-box; transform-origin: 0 0; }

/* Elements de dibuix */
.ma .axon { fill: none; stroke: var(--neuron); stroke-width: 5; stroke-linecap: round; }
.ma .axon.faint { opacity: .35; stroke-dasharray: 6 8; }
.ma .dend { fill: none; stroke: var(--neuron); stroke-width: 4; stroke-linecap: round; }
.ma .soma { fill: var(--neuron); }
.ma .sick .soma, .ma .sick .dend { opacity: .35; }
.ma .nucleus { fill: var(--ink); opacity: .5; }
.ma .nucleus.big { opacity: .18; }
.ma .dopa circle, .ma .dopa-p { fill: var(--dopa); }
.ma .clump circle { fill: var(--syn); }
.ma .ab path { fill: none; stroke: var(--pM); stroke-width: 3.2; stroke-linecap: round; }
.ma .micro { fill: color-mix(in srgb, var(--heal) 70%, var(--surface)); stroke: var(--heal); stroke-width: 1.5; }
.ma .striatum { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.ma .syringe rect, .ma .needle rect { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.ma .syringe path, .ma .needle path { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.ma .bcell circle:first-child { fill: color-mix(in srgb, var(--pM) 30%, var(--surface)); stroke: var(--pM); stroke-width: 2; }
.ma .newcell circle { fill: var(--heal); }
.ma .newcell .nucleus { fill: var(--surface); opacity: .8; }
.ma .lbl { font: 700 11px var(--f-body); fill: var(--ink-2); }
.ma .warn-t { fill: var(--warn); }
.ma .rcp { fill: none; stroke: var(--pM); stroke-width: 2; stroke-dasharray: 4 3; opacity: .55; }
.ma .rcp-on { fill: color-mix(in srgb, var(--dopa) 45%, transparent); stroke: var(--dopa); stroke-width: 2; }
.ma .graft-br { fill: none; stroke: var(--heal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ma[data-step="2"] .graft-br { animation: draw 1.4s .3s forwards; }
.ma .dopa-g { fill: var(--dopa); }
.ma .newcell .dend { stroke: var(--heal); stroke-width: 3; }
.ma .virus path:first-child { fill: color-mix(in srgb, #3E9C4F 25%, var(--surface)); stroke: #3E9C4F; stroke-width: 2.5; }
.ma .virus .dna { fill: none; stroke: #3E9C4F; stroke-width: 2; }
.ma .glow-n { fill: #3E9C4F; opacity: .35; }
.ma .gdnf { fill: #3E9C4F; }
.ma .axon.thin { stroke-width: 3; opacity: .55; }
.ma .gene-br { fill: none; stroke: var(--neuron); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ma[data-step="2"] .gene-br { animation: draw 1.6s .4s forwards; }
.ma .scell { fill: color-mix(in srgb, #5E6B7D 25%, var(--surface)); stroke: #5E6B7D; stroke-width: 1.5; }
.ma .gdnf-t { fill: #3E9C4F; }
.ma .gene-glow { opacity: .55; }
.ma .syn-t { fill: var(--syn); }
.ma .ab-t { fill: var(--pM); }
.ma .dopa-t { fill: #B8741A; }
.ma .heal-t { fill: var(--heal); }
.ma .shield-c { fill: none; stroke: var(--heal); stroke-width: 3; stroke-dasharray: 6 6; }
.ma .active-glow { fill: var(--dopa); opacity: .28; }
.ma .barrier { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 3 6; opacity: .6; }
.ma .jam circle { fill: var(--warn); opacity: .7; }
.ma .rcpt { fill: none; stroke: #3A7CC0; stroke-width: 4; }
.ma .inside.off { fill: color-mix(in srgb, var(--ink-2) 14%, var(--surface)); stroke: color-mix(in srgb, var(--ink-2) 40%, var(--surface)); stroke-dasharray: 8 6; }
.ma .mito.off { fill: color-mix(in srgb, var(--ink-2) 18%, var(--surface)); stroke: color-mix(in srgb, var(--ink-2) 45%, var(--surface)); stroke-width: 3; }
.ma .mito.off-c { stroke: color-mix(in srgb, var(--ink-2) 45%, var(--surface)); }
.ma .bar.low { fill: var(--warn); }
.ma .cell-glow { fill: var(--dopa); opacity: .22; }
.ma .grow2 { stroke: #3E9C4F; stroke-dasharray: 60; stroke-dashoffset: 60; }
.ma[data-step="2"] .grow2 { animation: draw 1.6s forwards; }
.ma .inside { fill: color-mix(in srgb, var(--neuron) 18%, var(--surface)); stroke: var(--neuron); stroke-width: 3; }
.ma .lyso circle { fill: color-mix(in srgb, #D07A2E 30%, var(--surface)); stroke: #D07A2E; stroke-width: 3; }
.ma .lyso .mouth { fill: var(--bg); }
.ma[data-step="2"] .lyso .mouth { animation: chomp .5s ease-in-out infinite alternate; transform-origin: 0 0; }
.ma .enz path { fill: var(--dopa); }
.ma .dial-bg { fill: none; stroke: var(--line); stroke-width: 14; }
.ma .dial-ok { fill: none; stroke: var(--heal); stroke-width: 14; opacity: .7; }
.ma .dial-hi { fill: none; stroke: var(--warn); stroke-width: 14; opacity: .8; }
.ma .needle-d { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.ma .hub { fill: var(--ink); }
.ma .pill rect { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.ma .pill path { stroke: var(--ink); stroke-width: 2; }
.ma .track { fill: none; stroke: var(--neuron); stroke-width: 6; stroke-dasharray: 2 8; stroke-linecap: round; }
.ma .vesicles circle { fill: var(--pA); }
.ma .micro.fillv { stroke: var(--ink); stroke-width: 1; opacity: .9; }
.ma .spark { fill: var(--warn); animation: fly 1.4s linear infinite; }
.ma .spark.s1 { animation-delay: -.45s; } .ma .spark.s2 { animation-delay: -.9s; }
.ma .mito { fill: color-mix(in srgb, #3A7CC0 22%, var(--surface)); stroke: #3A7CC0; stroke-width: 3; }
.ma .cristae { fill: none; stroke: #3A7CC0; stroke-width: 2; }
.ma .bat { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.ma .bat-tip { fill: var(--ink); }
.ma .bar { fill: var(--heal); }
.ma .membrane { stroke: var(--neuron); stroke-width: 8; stroke-dasharray: 10 4; }
.ma .key circle { fill: none; stroke: #3A7CC0; stroke-width: 3; }
.ma .key path { stroke: #3A7CC0; stroke-width: 3; fill: none; }
.ma .bolt { fill: var(--dopa); }
.ma .rna { fill: none; stroke: var(--syn); stroke-width: 4; stroke-linecap: round; }
.ma .ribo ellipse { fill: color-mix(in srgb, #5E6B7D 40%, var(--surface)); stroke: #5E6B7D; stroke-width: 2; }
.ma .aso { fill: none; stroke: var(--heal); stroke-width: 5; stroke-linecap: round; }

/* Moviments continus */
.ma .float { animation: bob 3.4s ease-in-out infinite; }
.ma .float.d1 { animation-delay: -1.1s; } .ma .float.d2 { animation-delay: -2.2s; }
.ma .pulse { animation: pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ma .pulse-o { animation: pulseo 1.2s ease-in-out infinite; }
.ma[data-step="1"] .pulse-o, .ma[data-step="2"] .pulse-o { animation: none; }
.ma .spin { animation: spin 8s linear infinite; transform-box: fill-box; transform-origin: center; }
.ma .dopa-p { animation: emit 2.4s ease-out infinite; }
.ma .dopa-p.q { animation-delay: -1.2s; }
.ma .dopa-p.p1 { animation-name: emit2; } .ma .dopa-p.p2 { animation-name: emit3; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes pulseo { 50% { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes chomp { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes fly { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-100px, -40px); opacity: 0; } }
@keyframes emit { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-22px, -26px); opacity: 0; } }
@keyframes emit2 { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(24px, -22px); opacity: 0; } }
@keyframes emit3 { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-20px, 26px); opacity: 0; } }

/* ============ Gràfiques ============ */
.charts-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .charts-grid { grid-template-columns: 1fr 1fr; } .chart-box.wide { grid-column: 1 / -1; } }
.chart-box { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; min-width: 0; }
.chart-box figcaption { margin-bottom: 12px; }
.chart-box figcaption strong { display: block; font: 700 1.15rem var(--f-head); }
.chart-box figcaption span { font-size: .92rem; color: var(--ink-2); }
.cv { position: relative; height: 280px; }
.cv.tall { height: 420px; }
@media (max-width: 600px) { .cv.tall { height: 360px; } }
.timeline { position: relative; overflow-x: auto; padding-bottom: 8px; }
.tl-in { position: relative; min-width: 720px; }
.tl-axis { display: flex; border-bottom: 2px solid var(--ink); margin-bottom: 10px; }
.tl-axis span { flex: 1; font-size: .85rem; font-weight: 700; padding: 4px 0; border-left: 1px solid var(--line); padding-left: 6px; }
.tl-row { position: relative; height: 34px; }
.tl-row::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); }
.tl-pt { position: absolute; top: 50%; transform: translate(-7px, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .88rem; background: none; border: 0; padding: 0; cursor: pointer; }
.tl-pt i { width: 14px; height: 14px; border-radius: 50%; background: var(--mc); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--mc); flex: 0 0 auto; }
.tl-pt.flip { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.tl-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--dopa); }
.tl-today span { position: absolute; top: -2px; left: 4px; font-size: .78rem; font-weight: 700; color: var(--dopa); background: var(--surface); }

/* ============ IA ============ */
.ai-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.ai-list { display: grid; gap: 14px; }
@media (min-width: 760px) { .ai-list { grid-template-columns: 1fr 1fr; } }
.ai-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ai-item header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-2); }
.ai-item h3 { margin: 0; font-size: 1.12rem; }
.ai-item p { margin: 0; font-size: .98rem; }
.ai-item a { margin-top: auto; font-weight: 700; font-size: .95rem; }
.ai-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); }
.ai-ico svg { width: 20px; height: 20px; }

/* ============ Mètode ============ */
.method-sec { background: var(--ink); color: var(--bg); }
.method-sec a { color: var(--dopa); }
.method-grid { display: grid; gap: 24px; }
@media (min-width: 860px) { .method-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.formula { display: grid; gap: 8px; margin: 14px 0 20px; }
.formula div { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; }
.formula b { font: 800 1.3rem var(--f-head); }
.formula .bar { height: 12px; border-radius: 6px; }
.warn { border-left: 4px solid var(--dopa); padding-left: 14px; }

.foot { padding: 28px 0 40px; font-size: .92rem; color: var(--ink-2); }

/* ============ Detall (dialog) ============ */
.detail { width: min(920px, 100vw); max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.detail::backdrop { background: rgba(17, 24, 39, .55); }
@media (max-width: 640px) { .detail { border-radius: 0; height: 100dvh; } }
.d-in { padding: 20px 16px 32px; }
@media (min-width: 640px) { .d-in { padding: 28px 32px 36px; } }
.d-head { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: start; margin-bottom: 16px; }
.d-head .glyph { width: 80px; height: 80px; }
.d-head h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.d-close { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; font-size: 1.3rem; line-height: 1; }
.d-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.d-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
@media (min-width: 640px) { .d-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi { background: var(--bg); border-radius: var(--r-md); padding: 10px 12px; }
.kpi small { display: block; font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { font: 800 1.5rem var(--f-head); }
.kpi .kbar { height: 6px; border-radius: 3px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.kpi .kbar i { display: block; height: 100%; border-radius: 3px; width: 0; transition: width 1s cubic-bezier(.3, 0, .2, 1); }
.d-grid { display: grid; gap: 22px; }
@media (min-width: 820px) { .d-grid { grid-template-columns: 1.1fr 1fr; } }
.d-sec h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.d-sec p { font-size: 1rem; }
.d-sec ul { padding-left: 1.1em; margin: 0; }
.d-sec li { margin-bottom: 6px; font-size: .95rem; }
.d-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .95rem; margin: 0; }
.d-facts dt { color: var(--ink-2); }
.d-facts dd { margin: 0; }
.evo { position: relative; height: 160px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Limitacions */
.limits { margin-top: 18px; padding: 12px 16px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--dopa) 12%, var(--surface)); border-left: 4px solid var(--dopa); }
.limits h3 { margin: 0 0 6px !important; font-size: 1rem; }
.limits ul { padding-left: 1.1em; margin: 0; }
.limits li { font-size: .95rem; margin-bottom: 6px; }
.limits p { margin: 0; font-size: .95rem; }
.mech-list .limits { margin-top: 16px; }
.hard { margin: 18px 0; }
.hard h3 { font-size: 1.1rem; }
.hard ul { padding-left: 1.1em; margin: 0; }
.hard li { margin-bottom: 8px; }
.d-sec .limits { margin-bottom: 16px; }