/* VISUAL.CSS - Capa visual: targetes de color, fluxos, línies de temps, degradats i moviment.
   Se sobreposa a projecte.css sense canviar-ne la base. */
:root { --card-b: 1px solid var(--sep); --lift: 0 8px 24px rgba(20, 30, 80, .10); }
@media (prefers-color-scheme: dark) { :root { --lift: 0 10px 30px rgba(0, 0, 0, .5); } }

/* Un sol color d'accent (el blau dels botons); la resta, grisos. Verd i vermell només per a bo / dolent. */
.bar-cta { background: none; color: var(--tint); border: 1px solid var(--tint); min-height: 32px; padding: 0 14px; font-size: .875rem; }
.bar-cta:hover { background: var(--tint-weak); filter: none; }
.progress { background: var(--tint); height: 2px; }

/* Portada */
.hero { position: relative; padding: 48px 0 0; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); }
.hero h1 em { color: inherit; text-decoration: underline; text-decoration-color: var(--tint); text-decoration-thickness: .07em; text-underline-offset: .14em; }
.hero-fig { border: var(--card-b); box-shadow: var(--lift); position: relative; overflow: hidden; }
.hero-fig .b90 { animation: pulso 5s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .7; } }
.btn.solid { background: var(--btn); border: 0; }
.btn { transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }

/* Capçalera de pàgina amb il·lustració */
.doc-head { background: var(--card); border-radius: 16px; padding: 28px 32px; border: var(--card-b); }
.doc-head .art { width: clamp(120px, 20vw, 190px); }

/* Xifres clau → targetes en quadrícula, sense decoració: amb la xifra gran n'hi ha prou.
   El color només va a la fletxa de tendència (▲ puja · ▼ baixa; vermell = dolent, verd = bo, taronja = atenció). */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; background: none; box-shadow: none; overflow: visible; }
.fig { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 20px 18px 18px; background: var(--card); border: var(--card-b); border-radius: 14px; box-shadow: var(--shadow); }
.fig:first-child { border-top: var(--card-b); }
.fig .v { order: 1; text-align: left; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; color: var(--label); }
.fig .l { order: 2; font-weight: 600; font-size: 1rem; color: var(--label); }
.fig .s { order: 3; color: var(--label-2); }
.fig.up .v::after, .fig.down .v::after { font-family: var(--font); font-size: .4em; font-weight: 700; margin-left: .45em; vertical-align: .55em; }
.fig.up .v::after { content: "▲" / "en alça"; }
.fig.down .v::after { content: "▼" / "a la baixa"; }
.fig.good .v::after { color: var(--good); } .fig.warn .v::after { color: var(--warn); } .fig.bad .v::after { color: var(--bad); }

/* Barres */
.cbars { border: var(--card-b); border-radius: 16px; }
.cb .t { height: 14px; border-radius: 99px; overflow: hidden; }
.cb .f { border-radius: 99px; background: var(--tint); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.cb .f.warn { background: var(--warn); }
.cb .f.dim { background: var(--label-2); opacity: .5; }

/* Passos → flux amb fletxes */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; background: none; box-shadow: none; overflow: visible; }
.steps > div { padding: 58px 16px 18px; background: var(--card); border: var(--card-b); border-radius: 16px; box-shadow: var(--shadow); transition: transform .25s; }
.steps > div:hover { transform: translateY(-4px); box-shadow: var(--lift); }
.steps > div::before { left: 16px; top: 14px; width: 34px; height: 34px; font-size: 1rem; color: #fff; background: var(--tint); }
.steps > div:not(:last-child)::after { content: "➜"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); color: var(--tint); font-size: 1.3rem; z-index: 2; }
@media (max-width: 700px) { .steps > div:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); } }

/* Línia de temps horitzontal */
.hline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; background: none; box-shadow: none; overflow: visible; position: relative; padding-top: 24px; }
.hline::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 4px; background: var(--sep); }
.hline > div { background: var(--card); border: var(--card-b); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; }
.hline > div:first-child { border: var(--card-b); }
.hline > div::before { display: block; content: ""; position: absolute; top: -24px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 4px solid var(--tint); }
.hline > div.up::before { border-color: var(--bad); }
.hline time { font-weight: 700; color: var(--tint); }

/* Índex → llista vertical numerada, tipus sumari de llibre */
.toc2 { display: block; background: none; box-shadow: none; overflow: visible; counter-reset: toc; border-top: 1px solid var(--label); }
.toc2 a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 14px 4px; background: none; border: 0; border-bottom: 1px solid var(--sep); border-radius: 0; box-shadow: none; min-height: 0; text-decoration: none; position: relative; }
.toc2 a:first-child { border-top: 0; }
.toc2 a:hover { background: var(--fill); transform: none; box-shadow: none; }
.toc2 a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--label-2); }
.toc2 a::after { content: "→"; grid-column: 3; grid-row: 1 / span 2; align-self: center; position: static; font-size: 1.2rem; color: var(--tint); opacity: .5; transition: opacity .15s; }
.toc2 a:hover::after { opacity: 1; }
.toc2 .ico, .toc2 .n { display: none; }
.toc2 h3 { grid-column: 2; margin: 0; font-size: 1.25rem; color: var(--label); }
.toc2 p { grid-column: 2; margin: 2px 0 0; color: var(--label-2); font-size: .9688rem; }

/* Llistes → etiquetes */
.chips { display: flex; flex-wrap: wrap; gap: 8px; background: none; box-shadow: none; overflow: visible; }
.chips li { border: var(--card-b); border-radius: 99px; background: var(--card); padding: 8px 16px; font-size: .95rem; transition: transform .2s; }
.chips li:first-child { border: var(--card-b); }
.chips li:hover { transform: scale(1.05); }
.cols > div:first-child .chips li::before { content: "✓ "; color: var(--good); font-weight: 800; }
.cols > div:last-child .chips li::before { content: "✕ "; color: var(--bad); font-weight: 800; }
.cols > div:first-child h3 { color: var(--good); }
.cols > div:last-child h3 { color: var(--bad); }

/* Blocs, notes, cites */
.two > div { background: var(--card); border: var(--card-b); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.note { border-left: 5px solid var(--tint); border-radius: 4px 14px 14px 4px; padding-left: 20px; }
.note::before { content: "💡 "; }
.note.warn { border-left-color: var(--warn); }
.note.warn::before { content: "⚠️ "; }
.pull { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.2rem); border-left: 4px solid var(--tint); padding-left: 20px; }
.strip > div { border: var(--card-b); transition: transform .25s; }
.strip > div:hover { transform: translateY(-4px); box-shadow: var(--lift); }

/* Franges de color */
.band.deep > .wrap, .band.forest > .wrap { background: var(--card); border-radius: 18px; padding: 28px clamp(16px, 3vw, 34px); border: var(--card-b); }
.eyebrow, .rail-l .t { display: inline-block; padding: 4px 12px; border-radius: 99px; background: var(--tint-weak); color: var(--tint); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

/* Pestanyes i selector */
.tabs button, .picker-nav button { transition: all .2s; }
.tabs button[aria-selected="true"] { background: var(--btn); color: #fff; }
.picker-nav button[aria-selected="true"] { transform: translateY(-3px); box-shadow: var(--lift); }
.tabpanel { animation: entra .45s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }

/* Eines */
.tool { border: var(--card-b); border-radius: 18px; box-shadow: var(--lift); }
.out .v { font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2rem, 5vw, 3rem); color: var(--label); }
.out .v.good { color: var(--good); }

/* Entrada ràpida (200-300 ms) */
.js .reveal { transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.js .reveal.in { transform: none; }
.js .reveal.in .fig, .js .reveal.in .steps > div, .js .reveal.in .hline > div, .js .reveal.in .chips li, .js .reveal.in .strip > div { animation: pop .3s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .cb .f { transition: none; } .js .reveal { transform: none; } .js .reveal.in * { animation: none !important; } .hero-fig .b90 { animation: none; } }

/* Mapa de ruta */
.route { list-style: none; display: flex; gap: 2px; margin: 0 0 4px; padding: 10px 6px; counter-reset: r; position: relative; }
.route li { flex: 1 1 0; min-width: 0; position: relative; }
.route li:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 55%; width: 90%; height: 3px; background: var(--sep); z-index: 0; border-radius: 3px; }
.route li.done:not(:last-child)::after { background: var(--tint); }
.route a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--label-2); font-size: .72rem; font-weight: 600; text-align: center; min-width: 0; position: relative; z-index: 1; }
.route .ico { width: 30px; height: 30px; border-radius: 50%; opacity: .7; transition: .2s; box-shadow: 0 0 0 4px var(--bg); }
.route .ico svg { width: 17px; height: 17px; }
.route li.done .ico { opacity: 1; }
.route li.now .ico { background: var(--tint); color: #fff; opacity: 1; transform: scale(1.3); box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--tint-weak); }
.route li.now a { color: var(--tint); }
.route a:hover .ico { opacity: 1; }
.route-t { margin: 0 0 14px; font-size: .78rem; color: var(--label-2); text-align: right; }
@media (max-width: 700px) { .route a span { display: none; } .route li.now a span { display: block; } .route a { min-width: 40px; } }

/* Barra de pas numerada (cercles) i xip «Pas N de M» */
.route { background: var(--card); border: var(--card-b); border-radius: 16px; padding: 12px 10px 10px; margin: 8px 0 12px; }
.route .ico { display: none; }
.route li { counter-increment: r; }
.route a::before { content: counter(r); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--fill); color: var(--label-2); border: 2px solid transparent; box-shadow: 0 0 0 4px var(--card); transition: background .2s, color .2s; }
.route li.done a::before { background: var(--btn); color: #fff; }
.route li.now a::before { background: #fff; color: var(--btn); border-color: var(--btn); transform: scale(1.25); box-shadow: 0 0 0 4px var(--card), 0 0 0 7px var(--tint-weak); }
.route li:not(:last-child)::after { top: 26px; }
.route-t { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: var(--tint-weak); color: var(--tint); font-size: .78rem; font-weight: 600; text-align: left; }

/* Marca amb icona */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .ico { width: 30px; height: 30px; border-radius: 9px; background: var(--btn); color: #fff; }
.brand .ico svg { width: 18px; height: 18px; }

/* Paginació amb pas i fletxa */
.pager .pg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
.pager .pg small, .pager .pg strong { grid-column: 1; }
.pager .pg-prev { grid-template-columns: auto minmax(0, 1fr); }
.pager .pg-prev small, .pager .pg-prev strong { grid-column: 2; }
.pager .pg-prev::before, .pager .pg-next::after { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; }
.pager .pg-prev::before { content: "←"; grid-column: 1; background: var(--fill); color: var(--label); }
.pager .pg-next::after { content: "→"; grid-column: 2; background: var(--btn); color: #fff; }
.pager .pg-next { text-align: right; }