/* Cortazo · sistema visual (17-oct-2026)
   Blanc amb línies fines (Attio), imatges en ASCII (Wafer), un sol accent blau (el del pricing).
   Tot en Geist: titulars en bold i molt ajustats (palo seco, com vol en Martí), text normal. Xifres amb tabular-nums.
   Ni monoespaiada ni tipus de display amb personalitat: Martí no en vol.
   CSP estricta: cap estil en línia. */

@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-wght-normal.a147f99cd533.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-ext-wght-normal.4841e590e2a9.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --fons: #ffffff;
  --fons-2: #f6f6f7;
  --fons-3: #eeeef0;
  --tinta: #0b0b0d;
  --tinta-2: #5b5b64;
  --tinta-3: #8b8b94;
  --linia: #e9e9ec;
  --linia-forta: #d5d5db;
  --accent: #206ce8;
  --accent-fort: #1a57c4;
  --accent-suau: #eaf1fe;
  --ok: #157347;
  --ok-suau: #e8f5ee;
  --alerta: #a35a00;
  --alerta-suau: #fdf3e2;
  --error: #c0331a;
  --error-suau: #fdecea;
  --ombra: 0 1px 2px rgba(11, 11, 13, 0.04), 0 12px 32px -12px rgba(11, 11, 13, 0.12);
  --ombra-forta: 0 2px 4px rgba(11, 11, 13, 0.05), 0 24px 60px -20px rgba(11, 11, 13, 0.22);
  --f-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: var(--f-text);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ample: 1200px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-d: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--fons); color: var(--tinta); font-family: var(--f-text); font-size: 16px; line-height: 1.55;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01" 0; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-suau); }
.visualment-ocult { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sentinella { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.salta { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.salta:focus { top: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.suau { color: var(--tinta-2); }
.tenue { color: var(--tinta-3); }

/* ---------- marc de pàgina: dues línies verticals que ordenen tot (Attio) ---------- */
.rails { width: 100%; max-width: var(--ample); margin-inline: auto; border-inline: 1px solid var(--linia); position: relative; }
.dins { padding-left: calc(var(--gutter) + 16px); padding-right: calc(var(--gutter-d) + 16px); }
.franja { border-top: 1px solid var(--linia); }
.franja.gris { background: var(--fons-2); }
@media (max-width: 1240px) { .rails { border-inline: 0; } }
@media (max-width: 640px) { .dins { padding-left: var(--gutter); padding-right: var(--gutter-d); } }

/* ---------- tipus ---------- */
.eti { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--accent); }
.xip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border: 1px solid var(--linia-forta); border-radius: 999px;
       background: var(--fons); font-size: 14px; font-weight: 500; color: var(--tinta); }
.xip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-suau); }
.titol-gran { font-size: clamp(44px, 7.2vw, 92px); line-height: 0.96; letter-spacing: -0.058em; font-weight: 700; }
.titol { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.04; letter-spacing: -0.04em; }
.titol-petit { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.03em; }
.entrada { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; color: var(--tinta-2); max-width: 46ch; text-wrap: pretty; }
.marcada { display: inline-block; border: 1.5px dashed var(--accent); background: var(--accent-suau); border-radius: 12px; padding: 0 0.18em 0.04em; }

/* ---------- botons ---------- */
.boto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px;
        border: 1px solid var(--tinta); background: var(--tinta); color: #fff; font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: none;
        cursor: pointer; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.boto:active { transform: scale(0.97); }
.boto.buit { background: var(--fons); color: var(--tinta); border-color: var(--linia-forta); }
.boto.blau { background: linear-gradient(to top, #2f7bf0, var(--accent-fort)); border-color: #4a8cf2; color: #fff;
             box-shadow: 0 10px 22px -12px rgba(32, 108, 232, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.boto.perill { background: var(--error); border-color: var(--error); }
.boto.gran { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.boto.petit { min-height: 34px; padding: 6px 14px; font-size: 14px; }
.boto.ample { width: 100%; }
.boto[disabled], .boto[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .boto:hover { background: #26262c; border-color: #26262c; }
  .boto.buit:hover { background: var(--fons-2); border-color: var(--tinta-3); }
  .boto.blau:hover { background: linear-gradient(to top, #3a84f2, #1e5fd3); }
  .boto.perill:hover { background: #a62b15; }
}
.fletxa { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .boto:hover .fletxa, .enllac:hover .fletxa { transform: translateX(3px); } }
.enllac { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linia-forta); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .enllac:hover { text-decoration-color: currentColor; } }
.enllac-boto { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linia-forta); text-underline-offset: 3px; }
.accions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.accions.centre { justify-content: center; }

/* ---------- capçalera ---------- */
.cap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid transparent;
       -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: border-color 200ms ease; }
.cap.amb-vora { border-bottom-color: var(--linia); }
@media (prefers-reduced-transparency: reduce) { .cap { background: var(--fons); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.cap-dins { height: 64px; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tinta); font-weight: 650; font-size: 19px; letter-spacing: -0.045em; }
.logo svg { height: 22px; width: auto; flex: none; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--tinta-2); font-size: 15px; transition: color 150ms ease, background-color 150ms ease; }
.nav a[aria-current="page"] { color: var(--tinta); background: var(--fons-2); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--tinta); } }
.cap-accions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) { .nav.publica { display: none; } .cap-dins { gap: 12px; } }
@media (max-width: 480px) { .cap .amaga-mobil { display: none; } }

/* l'usuari que ha entrat: avatar amb inicials + nom; el menú és un <details> (funciona sense JS) */
.usuari { position: relative; }
.usuari > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 12px 3px 3px; border: 1px solid var(--linia-forta);
                    border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; user-select: none; transition: background-color 150ms ease, border-color 150ms ease; }
.usuari > summary::-webkit-details-marker { display: none; }
.usuari > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 2px 0 2px; border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(45deg); }
.usuari[open] > summary { background: var(--fons-2); }
@media (hover: hover) and (pointer: fine) { .usuari > summary:hover { border-color: var(--tinta-3); } }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.usuari-nom { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuari-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 250px; display: grid; padding: 6px; background: var(--fons);
               border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--ombra-forta); transform-origin: top right; }
.usuari[open] .usuari-menu { animation: menu-obre 160ms var(--ease-out); }
@keyframes menu-obre { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.usuari-cap { display: grid; gap: 1px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linia); }
.usuari-cap b { font-size: 14px; font-weight: 600; }
.usuari-cap span { font-size: 13px; color: var(--tinta-2); overflow-wrap: anywhere; }
.usuari-menu a, .usuari-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta);
                                      font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .usuari-menu a:hover, .usuari-menu button:hover { background: var(--fons-2); } }
.usuari-menu form { margin: 0; }

/* ---------- avisos (missatges) ---------- */
.missatges { display: grid; gap: 8px; padding-block: 16px 0; }
.avis { border: 1px solid var(--linia); background: var(--fons-2); border-radius: 12px; padding: 12px 16px; font-size: 15px; color: var(--tinta); }
.avis.ok, .avis.success { background: var(--ok-suau); border-color: #cbe8d7; }
.avis.error { background: var(--error-suau); border-color: #f5cdc5; }
.avis.alerta, .avis.warning { background: var(--alerta-suau); border-color: #f1ddb7; }
.avis.info { background: var(--accent-suau); border-color: #cfe0fc; }
.avis p + p { margin-top: 6px; }

/* ---------- formularis ---------- */
.formulari { display: grid; gap: 16px; }
.camp { display: grid; gap: 7px; }
.camp > label, .camp > .etiqueta, legend { font-size: 14px; font-weight: 500; color: var(--tinta); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--linia-forta); border-radius: 12px; background: var(--fons);
  font-size: 16px; transition: border-color 150ms ease, box-shadow 150ms ease; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-suau); }
input::placeholder { color: var(--tinta-3); }
.ajuda { font-size: 13px; color: var(--tinta-2); }
.errorlist { list-style: none; color: var(--error); font-size: 14px; }
.errors-form { background: var(--error-suau); border: 1px solid #f5cdc5; color: var(--tinta); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.dos-camps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* les regles de la contrasenya, que es marquen mentre s'escriu (static/js/contrasenya.js) */
.regles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; margin-top: 2px; font-size: 13px; color: var(--tinta-2); }
.regles li { display: flex; align-items: center; gap: 8px; transition: color 150ms ease; }
.regles li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--linia-forta); display: grid; place-items: center;
                     font-size: 9px; font-weight: 700; line-height: 1; color: #fff; transition: background-color 150ms ease, border-color 150ms ease; }
.regles li.ok { color: var(--tinta); }
.regles li.ok::before { content: "✓"; background: var(--ok); border-color: var(--ok); }
@media (max-width: 420px) { .regles { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dos-camps { grid-template-columns: 1fr; } }
/* opcions en pastilla: casella o ràdio de veritat (accessible), amb l'aspecte d'un botó */
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 16px; border: 1px solid var(--linia-forta);
            border-radius: 999px; background: var(--fons); cursor: pointer; font-size: 15px; user-select: none; transition: border-color 150ms ease, background-color 150ms ease, transform 160ms var(--ease-out); }
.pastilla input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastilla::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--linia-forta); flex: none; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.pastilla:has(input:checked) { border-color: var(--tinta); background: var(--fons-2); }
.pastilla:has(input:checked)::before { border-color: var(--tinta); background: var(--tinta); box-shadow: inset 0 0 0 3px #fff; }
.pastilla:has(input[type="checkbox"])::before { border-radius: 4px; }
.pastilla:has(input[type="checkbox"]:checked)::before { box-shadow: inset 0 0 0 2.5px #fff; }
.pastilla:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pastilla:active { transform: scale(0.98); }

/* ---------- panells ---------- */
.panell { border: 1px solid var(--linia); border-radius: 18px; background: var(--fons); padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; align-content: start; }
.panell.ombra { box-shadow: var(--ombra); }
.panell + .panell { margin-top: 16px; }
.estret { max-width: 560px; }
.capitol { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; padding-block: 40px 24px; }
.capitol p { margin-top: 8px; }

/* ---------- PORTADA ---------- */
/* ASCII: el canvas tapa la font quan el JavaScript arrenca; sense JS es veu el vídeo, aclarit */
[data-ascii] { position: absolute; inset: 0; }
[data-ascii] > video, [data-ascii] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
[data-ascii].ascii-actiu > video, [data-ascii].ascii-actiu > img { opacity: 0; }
.ascii-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* hero a sang (Wafer): el partit d'exemple en ASCII de fons, el titular a sobre i la línia de les jugades a baix */
.hero { position: relative; overflow: hidden; min-height: min(860px, calc(100dvh - 64px)); display: grid; }
.hero-fons { position: absolute; inset: 0; }
/* només un halo blanc darrere del text i el fos a blanc de baix: la resta del partit es veu */
.hero-fons::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 50% at 50% 52%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 52%, rgba(255, 255, 255, 0) 100%),
              linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 84%, #fff 100%); }
.hero-cos { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 22px; text-align: center; padding-block: clamp(56px, 9vw, 112px); }
.hero-cos .entrada { margin-inline: auto; color: var(--tinta); }
.hero-cos .accions { justify-content: center; margin-top: 4px; }
.hero-nota { font-size: 14px; color: var(--tinta-2); text-wrap: balance; }
/* la línia més llarga («Recibe cada defensa.») ha de cabre en una sola línia, també al mòbil */
.hero .titol-gran { font-size: clamp(30px, 9.4vw, 92px); }
/* la segona línia del titular canvia: «Recibe el scout», «Recibe cada ataque», «Recibe cada defensa» */
.rota { display: grid; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.rota > span { grid-area: 1 / 1; white-space: nowrap; }
.rota > span + span { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .rota > span { visibility: visible; opacity: 0; transform: translateY(100%); filter: blur(4px); animation: rota-paraula 9s var(--ease-out) infinite; }
  .js .rota > span:nth-child(2) { animation-delay: 3s; }
  .js .rota > span:nth-child(3) { animation-delay: 6s; }
}
@keyframes rota-paraula {
  0% { opacity: 0; transform: translateY(100%); filter: blur(4px); }
  8%, 33.33% { opacity: 1; transform: none; filter: none; }
  41%, 100% { opacity: 0; transform: translateY(-100%); filter: blur(4px); }
}
@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero-fons::after { background: radial-gradient(ellipse 90% 46% at 50% 50%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.2) 100%),
                                  linear-gradient(to bottom, rgba(255, 255, 255, 0) 84%, #fff 100%); }
}
.d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .d6 { --d: 6; } .d7 { --d: 7; } .d8 { --d: 8; } .d9 { --d: 9; }

/* què fa: cada funció és un títol i una frase, en una graella amb línies fines (sense caixes) */
.que-fa { padding-block: clamp(64px, 9vw, 112px); display: grid; gap: clamp(36px, 5vw, 56px); }
.que-fa-cap { display: grid; gap: 12px; max-width: 640px; }
.funcions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); margin: 0; }
.funcions > div { border-top: 1px solid var(--linia-forta); padding: 20px 0 36px; display: grid; gap: 6px; align-content: start; }
.funcions dt { font-size: 19px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.25; }
.funcions dd { margin: 0; color: var(--tinta-2); font-size: 16px; max-width: 34ch; text-wrap: pretty; }
.proximament { color: var(--tinta-2); font-size: 15px; }
.proximament b { color: var(--tinta); font-weight: 600; }
@media (max-width: 860px) { .funcions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .funcions { grid-template-columns: 1fr; } .funcions > div { padding-bottom: 24px; } }

/* així funciona: escena fixa i centrada; el text i la maqueta canvien mentre es baixa i s'apaga en marxar (Attio) */
.fun { position: relative; border-top: 1px solid var(--linia); view-timeline-name: --fun; }
.fun-escena { display: grid; justify-items: center; align-content: center; gap: 32px; padding: 48px 24px; text-align: center; }
.fun-cap { display: grid; justify-items: center; gap: 12px; }
.fun-punts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.fun-punts a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linia); font-size: 14px; color: var(--tinta-2); text-decoration: none;
               transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease; }
.fun-punts a span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fons-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 250ms ease, color 250ms ease; }
.fun-punts a[aria-current="step"] { color: var(--tinta); border-color: var(--tinta); }
.fun-punts a[aria-current="step"] span { background: var(--accent); color: #fff; }
.fun-cos { width: 100%; max-width: 1000px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-align: left; }
.fun-textos, .fun-maquetes { display: grid; }
.fun-text { grid-area: 1 / 1; display: grid; gap: 10px; align-content: center; }
.fun-text h3 { font-size: clamp(28px, 3.4vw, 40px); }
.fun-text p { color: var(--tinta-2); font-size: 17px; max-width: 34ch; }
.fun-text .eti { color: var(--accent); }
.fun-pas { grid-area: 1 / 1; align-self: center; }
.fun-disparadors { display: none; }
@media (min-width: 900px) {
  .fun-escena { position: sticky; top: 64px; height: calc(100dvh - 64px); padding-block: 24px; }
  .fun-disparadors { display: block; margin-top: calc(-100dvh + 64px); }
  .fun-disparadors div { height: 90dvh; }
  .fun-disparadors div:last-child { height: 130dvh; }        /* el pas 3 també té temps de llegir-se abans que l'escena marxi */
  .js .fun-text, .js .fun-pas { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 450ms ease, transform 600ms var(--ease-out); }
  .js .fun-text.actiu, .js .fun-pas.actiu { opacity: 1; transform: none; pointer-events: auto; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .fun-escena { animation: fun-entra linear both, fun-surt linear both; animation-timeline: --fun, --fun; animation-range: entry 0% entry 40%, exit 15% exit 75%; }
    }
  }
}
@keyframes fun-entra { from { opacity: 0.25; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fun-surt { from { opacity: 1; } to { opacity: 0.15; } }
@media (max-width: 899px) {
  .fun-cos { grid-template-columns: 1fr; text-align: left; }
  .fun-textos, .fun-maquetes { display: contents; }
  .fun-text, .fun-pas { grid-area: auto; }
  .fun-text[data-pas="1"] { grid-row: 1; } .fun-pas[data-pas="1"] { grid-row: 2; }
  .fun-text[data-pas="2"] { grid-row: 3; margin-top: 24px; } .fun-pas[data-pas="2"] { grid-row: 4; }
  .fun-text[data-pas="3"] { grid-row: 5; margin-top: 24px; } .fun-pas[data-pas="3"] { grid-row: 6; }
  .fun-punts { display: none; }
}
.maqueta { border: 1px solid var(--linia); border-radius: 18px; background: var(--fons-2); padding: clamp(14px, 3vw, 28px); }
.maqueta .panell { box-shadow: var(--ombra); }
.toast-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--accent-suau); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.mq-pujada { display: grid; gap: 14px; }
.mq-fitxer { display: flex; align-items: center; gap: 12px; }
.mq-fitxer b { display: block; font-size: 15px; }
.mq-fitxer span { font-size: 13px; color: var(--tinta-2); }
.barra { height: 6px; border-radius: 999px; background: var(--fons-3); overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 600ms var(--ease-out); }
.mq-barra { --p: 1; }
.mq-xifres { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.mq-rebut { display: flex; gap: 8px; flex-wrap: wrap; }
.mq-opcions { display: grid; gap: 18px; }
.mq-opcions .pastilla { pointer-events: none; }
.mq-boto { justify-self: start; pointer-events: none; }
.mq-talls { display: grid; gap: 8px; list-style: none; }
.mq-talls li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--linia); border-radius: 12px; background: var(--fons); }
.mq-talls img { width: 88px; height: 50px; object-fit: cover; border-radius: 8px; background: var(--fons-3); }
.mq-talls b { display: block; font-size: 14px; font-weight: 600; }
.mq-talls span { font-size: 13px; color: var(--tinta-2); }
.mq-talls .mono { font-size: 13px; color: var(--tinta-2); }
@media (prefers-reduced-motion: no-preference) {
  /* 1 · la pujada s'omple, arriba i comença l'anàlisi */
  .js .mq-barra { transform: scaleX(0); transition: transform 2200ms cubic-bezier(0.4, 0, 0.2, 1); }
  .js .fun-pas.actiu .mq-barra { transform: scaleX(1); }
  .js .mq-rebut .estat { opacity: 0; transform: translateY(6px); transition: opacity 300ms ease-out, transform 400ms var(--ease-out); }
  .js .fun-pas.actiu .mq-rebut .estat { opacity: 1; transform: none; }
  .js .fun-pas.actiu .mq-rebut .estat:first-child { transition-delay: 2300ms; }
  .js .fun-pas.actiu .mq-rebut .estat:last-child { transition-delay: 2700ms; }
  /* 2 · les opcions es marquen una rere l'altra i es prem el botó */
  .js .fun-pas.actiu .mq-o1, .js .fun-pas.actiu .mq-o2, .js .fun-pas.actiu .mq-o3 { border-color: var(--tinta); background: var(--fons-2); }
  .js .fun-pas.actiu .mq-o1::before, .js .fun-pas.actiu .mq-o2::before, .js .fun-pas.actiu .mq-o3::before { border-color: var(--tinta); background: var(--tinta); box-shadow: inset 0 0 0 2.5px #fff; }
  .js .mq-o1, .js .mq-o1::before { transition-delay: 300ms; } .js .mq-o2, .js .mq-o2::before { transition-delay: 700ms; } .js .mq-o3, .js .mq-o3::before { transition-delay: 1100ms; }
  .js .fun-pas.actiu .mq-boto { animation: premut 260ms var(--ease-out) 1500ms both; }
  /* 3 · les jugades entren una a una i la primera es reprodueix */
  .js .mq-t { opacity: 0; transform: translateX(14px);
    transition: opacity 400ms ease-out calc(var(--d, 0) * 110ms + 150ms), transform 500ms var(--ease-out) calc(var(--d, 0) * 110ms + 150ms), background-color 300ms ease 1200ms; }
  .js .fun-pas.actiu .mq-t { opacity: 1; transform: none; }
  .js .fun-pas.actiu .mq-t.d0 { background: var(--accent-suau); }
}
@keyframes premut { 0% { transform: scale(1); } 45% { transform: scale(0.95); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mq-o1, .mq-o2, .mq-o3 { border-color: var(--tinta); background: var(--fons-2); }
  .mq-barra { transform: scaleX(1); }
}

/* ---------- PREUS (el component de 21st.dev que va triar en Martí, portat sense React) ---------- */
.preus { position: relative; overflow: hidden; background: var(--fons); padding-block: clamp(56px, 8vw, 96px); }
.preus::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                 background: radial-gradient(ellipse 38% 46% at 50% 56%, rgba(32, 108, 232, 0.14), rgba(32, 108, 232, 0.05) 55%, rgba(32, 108, 232, 0) 78%); }
.preus > .dins { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; }
.preus .titol { max-width: 18ch; }
.preus .entrada { margin-inline: auto; }
.commuta { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--fons); border: 1px solid var(--linia); }
.commuta button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; min-height: 40px; padding: 8px 20px; border-radius: 999px;
                  font-weight: 500; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 8px; transition: color 200ms ease; }
.commuta button[aria-pressed="true"] { color: #fff; }
.commuta button[aria-pressed="true"] .regal { background: rgba(255, 255, 255, 0.2); color: #fff; }
.commuta-pastilla { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(to top, #2f7bf0, var(--accent-fort));
                    box-shadow: 0 2px 10px -2px rgba(32, 108, 232, 0.55); transition: transform 320ms var(--ease-out), width 320ms var(--ease-out); }
.regal { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-suau); color: var(--tinta); white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.targeta-preu { width: min(100%, 460px); text-align: left; background: var(--fons); border-radius: 18px; padding: 28px; display: grid; gap: 18px;
                box-shadow: 0 0 0 2px var(--accent), 0 24px 48px -28px rgba(32, 108, 232, 0.55); }
.targeta-preu-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.targeta-preu-cap b { font-size: 26px; letter-spacing: -0.035em; }
.etiqueta-blava { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; }
.import { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.import-xifra { font-family: var(--f-display); font-size: 56px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; display: inline-flex; font-variant-numeric: tabular-nums; }
.import-periode { color: var(--tinta-2); }
.import-nota { width: 100%; font-size: 13px; color: var(--tinta-2); }
/* xifres que roden (com NumberFlow): cada dígit és una columna 0-9 que es desplaça */
.digits { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; }
.digit { display: inline-block; width: 0.6em; height: 1em; overflow: hidden; transition: width 320ms var(--ease-out); }
.digit.buida { width: 0; }
.digit > span { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 520ms var(--ease-out); }
.digit > span > span { height: 1em; line-height: 1; }
.inclou { list-style: none; display: grid; gap: 11px; padding-top: 18px; border-top: 1px solid var(--linia); }
.inclou li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--tinta-2); font-size: 15px; }
.inclou svg { width: 22px; height: 22px; color: var(--accent); }
.preus-peu { font-size: 13px; color: var(--tinta-2); max-width: 60ch; }

/* tancament: blanc amb un degradat blau molt suau i gra (com paper); la «c» del logo es dibuixa quan apareix */
.final { position: relative; overflow: hidden; border-top: 1px solid var(--linia);
         background: radial-gradient(70% 95% at 88% 110%, rgba(32, 108, 232, 0.2) 0%, rgba(32, 108, 232, 0.06) 55%, rgba(32, 108, 232, 0) 80%),
                     radial-gradient(45% 60% at 0% 0%, rgba(32, 108, 232, 0.05), rgba(32, 108, 232, 0) 70%), var(--fons); }
.final::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.13; mix-blend-mode: multiply;
                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px; }
.final-dins { position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: center; gap: 32px; padding-block: clamp(72px, 10vw, 128px); }
.final-text { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; }
.final-text .titol { font-size: clamp(32px, 4.8vw, 62px); line-height: 1; letter-spacing: -0.055em; }
.final-text .accions span { font-size: 14px; color: var(--tinta-2); }
.final-marca { justify-self: end; width: min(280px, 100%); aspect-ratio: 1; }
.final-marca svg { width: 100%; height: 100%; overflow: visible; }
.final-marca .c1 { stop-color: #5d9df5; } .final-marca .c2 { stop-color: var(--accent-fort); }
/* la «c» es dibuixa d'esquerra a dreta, com el traç d'un retolador, quan apareix */
.final-marca svg { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-out) 300ms; }
.js .final-marca:not(.es-veu) svg { clip-path: inset(0 100% 0 0); }
@media (max-width: 760px) { .final-dins { grid-template-columns: 1fr; } .final-marca { position: absolute; right: -40px; bottom: -40px; width: 200px; } .final-marca svg { opacity: 0.16; } }

/* peu */
.peu { border-top: 1px solid var(--linia); }
.peu-dins { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 48px 28px; }
.peu h2 { font-size: 14px; font-weight: 600; color: var(--tinta); margin-bottom: 12px; }
.peu ul { list-style: none; display: grid; gap: 8px; }
.peu a { color: var(--tinta-2); text-decoration: none; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .peu a:hover { color: var(--tinta); } }
.peu-marca p { color: var(--tinta-2); font-size: 15px; margin-top: 12px; max-width: 30ch; }
.peu-baix { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 18px 28px; border-top: 1px solid var(--linia); font-size: 13px; color: var(--tinta-3); }
@media (max-width: 800px) { .peu-dins { grid-template-columns: 1fr 1fr; } .peu-marca { grid-column: 1 / -1; } }

/* revelat en entrar a la pantalla (sempre des d'un estat visible si no hi ha JS) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela] { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 600ms ease-out, transform 600ms var(--ease-out), filter 600ms ease-out; }
  .js [data-revela].es-veu { opacity: 1; transform: none; filter: none; }
  .js [data-revela="2"] { transition-delay: 90ms; } .js [data-revela="3"] { transition-delay: 180ms; } .js [data-revela="4"] { transition-delay: 270ms; }
}

/* ---------- ENTRAR / CREAR CUENTA: una jugada d'exemple en ASCII de fons i la targeta blanca a sobre (Wafer) ---------- */
.pantalla-entrada { min-height: 100dvh; background: var(--fons-2); }
.entrada-marc { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); }
.entrada-fons { position: relative; overflow: hidden; border-right: 1px solid var(--linia); }
.entrada-fons::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.entrada-logo { position: absolute; z-index: 3; top: 24px; left: 28px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--linia); border-radius: 999px; padding: 7px 14px; }
.entrada-lema { position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 10px; }
.entrada-lema p:first-child { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.02; max-width: 9em; }
.entrada-lema p + p { color: var(--tinta-2); max-width: 46ch; }
.etiquetes-video { position: absolute; z-index: 3; top: 24px; right: 24px; display: grid; justify-items: end; gap: 8px; }
.etiq-video { font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: 12px; background: var(--fons); border: 1px solid var(--linia); border-radius: 8px; padding: 5px 9px; box-shadow: var(--ombra);
              opacity: 0; transform: translateY(4px); transition: opacity 200ms ease-out, transform 200ms var(--ease-out); }
.etiq-video.visible { opacity: 1; transform: none; }
.etiq-video.destacada { background: var(--accent); border-color: var(--accent); color: #fff; }
.entrada-costat { display: grid; align-content: center; padding: 40px clamp(20px, 4vw, 48px); background: var(--fons); }
.targeta-entrada { display: grid; gap: 22px; width: 100%; max-width: 400px; margin-inline: auto; }
.targeta-entrada h1 { font-size: 30px; letter-spacing: -0.04em; }
.targeta-entrada header p { color: var(--tinta-2); margin-top: 6px; }
.targeta-peu { font-size: 14px; color: var(--tinta-2); text-align: center; }
.separador { display: flex; align-items: center; gap: 12px; color: var(--tinta-3); font-size: 13px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linia); }
.camp-amb-enllac { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.camp-amb-enllac a { font-size: 13px; }
@media (max-width: 900px) {
  .entrada-marc { grid-template-columns: 1fr; grid-template-rows: 38vh auto; }
  .entrada-fons { border-right: 0; border-bottom: 1px solid var(--linia); }
  .entrada-lema p + p, .etiquetes-video { display: none; }
  .entrada-lema p:first-child { font-size: 26px; }
}

/* ---------- APP ---------- */
.pagina-app main { min-height: calc(100dvh - 64px - 70px); display: flex; flex-direction: column; }
.pagina-app main > .rails { flex: 1; padding-bottom: 64px; }
.pagina-app .peu-dins { display: none; }
.pagina-app .peu-baix { border-top: 0; }
.llista-partits { list-style: none; border: 1px solid var(--linia); border-radius: 18px; overflow: hidden; background: var(--fons); }
.llista-partits li + li { border-top: 1px solid var(--linia); }
.fila-partit { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px 20px; text-decoration: none; color: inherit; transition: background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .fila-partit:hover { background: var(--fons-2); } }
.fila-partit b { display: block; font-weight: 600; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-partit span.suau { display: block; font-size: 14px; }
.fila-data { font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-3); }
@media (max-width: 560px) { .fila-partit { grid-template-columns: minmax(0, 1fr) auto; } .fila-data { display: none; } }
.estat { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 4px 10px 4px 9px; border-radius: 999px; background: var(--fons-2); border: 1px solid var(--linia); white-space: nowrap; }
.estat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); }
.estat.llest { background: var(--ok-suau); border-color: #cbe8d7; } .estat.llest::before { background: var(--ok); }
.estat.processant::before, .estat.en_cua::before, .estat.pujant::before { background: var(--accent); }
.estat.processant, .estat.en_cua { background: var(--accent-suau); border-color: #cfe0fc; }
.estat.error { background: var(--error-suau); border-color: #f5cdc5; } .estat.error::before { background: var(--error); }
@media (prefers-reduced-motion: no-preference) { .estat.processant::before { animation: batec 1.4s ease-in-out infinite; } }
@keyframes batec { 50% { opacity: 0.35; } }
.buit-llista { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 56px 24px; border: 1px dashed var(--linia-forta); border-radius: 18px; background: var(--fons-2); }
.buit-llista p { color: var(--tinta-2); max-width: 44ch; }

/* nou partit */
.form-partit { display: grid; gap: 28px; }
.form-partit .panell { display: grid; gap: 18px; }
.passos-nou { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.passos-nou li { font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-3); }
.passos-nou li[aria-current="step"] { color: var(--tinta); }

/* pujada */
.zona-fitxer { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; padding: clamp(32px, 6vw, 56px) 20px; border: 1.5px dashed var(--linia-forta);
               border-radius: 18px; background: var(--fons-2); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.zona-fitxer input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-fitxer strong { font-size: 18px; letter-spacing: -0.02em; }
.zona-fitxer.sobre, .zona-fitxer:has(input:focus-visible) { border-color: var(--accent); background: var(--accent-suau); }
.limits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.limits span { font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-2); border: 1px solid var(--linia); background: var(--fons); border-radius: 999px; padding: 3px 9px; }
.progres { display: grid; gap: 10px; }
.progres-dades { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.progres-dades b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.progres-barra { height: 8px; border-radius: 999px; background: var(--fons-3); overflow: hidden; }
.progres-barra i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 300ms linear; }

/* analitzant */
.analitzant { display: grid; gap: 18px; }
.analitzant-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.analitzant-cap .mono { font-size: 28px; letter-spacing: -0.03em; }
.fases { list-style: none; display: grid; gap: 10px; }
.fases li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; color: var(--tinta-3); font-size: 15px; }
.fases li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--linia-forta); justify-self: center; }
.fases li.feta { color: var(--tinta-2); } .fases li.feta::before { background: var(--ok); border-color: var(--ok); }
.fases li.ara { color: var(--tinta); } .fases li.ara::before { border-color: var(--accent); background: var(--accent-suau); }

/* resultats: pregunta, descans, visor */
.resultats { display: grid; gap: 16px; }
.franja-info { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 14px; color: var(--tinta-2); }
.franja-info .mono { color: var(--tinta); }
.fiab { display: inline-flex; align-items: center; gap: 6px; }
.fiab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.fiab.mitjana::before { background: var(--alerta); } .fiab.baixa::before { background: var(--error); }
.pregunta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.pregunta .video-caixa { border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-width: 100%; }
.pregunta video { width: 100%; height: 100%; object-fit: contain; }
.pregunta-text { display: grid; gap: 14px; }
.pregunta-text .accions .boto { flex: 1 1 160px; }
@media (max-width: 800px) { .pregunta { grid-template-columns: 1fr; } }
.descans-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between; }
.visor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.reproductor { position: sticky; top: 80px; display: grid; gap: 10px; }
.reproductor .video-caixa { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-width: 100%; }
.reproductor video { width: 100%; height: 100%; object-fit: contain; }
.reproductor-info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 14px; }
.reproductor-info b { font-weight: 600; }
.tecles { font-size: 12px; color: var(--tinta-3); }
@media (hover: none) { .tecles { display: none; } }
.tecles kbd { font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: 11px; border: 1px solid var(--linia-forta); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--tinta-2); background: var(--fons); }
.columna-talls { border: 1px solid var(--linia); border-radius: 16px; background: var(--fons); overflow: hidden; display: grid; }
.pestanyes { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--linia); }
.pestanyes button { flex: none; border: 1px solid transparent; background: none; cursor: pointer; border-radius: 999px; padding: 7px 12px; font-size: 14px; color: var(--tinta-2); white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.pestanyes button[aria-selected="true"] { background: var(--tinta); color: #fff; }
.pestanyes button .mono { font-size: 12px; opacity: 0.7; margin-left: 4px; }
.talls-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--linia); font-size: 13px; color: var(--tinta-2); }
.talls-cap > span:first-child { white-space: nowrap; }
.talls-cap .accions { gap: 6px; flex-wrap: nowrap; }
.talls { list-style: none; max-height: min(70vh, 720px); overflow-y: auto; overscroll-behavior: contain; }
.tall { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linia); }
.tall:last-child { border-bottom: 0; }
.tall-play { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 0; border: 0; background: none;
             text-align: left; cursor: pointer; border-radius: 10px; }
.tall img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--fons-3); }
.tall-text { display: grid; gap: 2px; min-width: 0; }
.tall-text b { font-size: 14px; font-weight: 600; }
.tall-text .mono { font-size: 12px; color: var(--tinta-2); }
.tall-accions { padding-left: 108px; display: flex; flex-wrap: wrap; gap: 6px; }
.tall-accions button { border: 1px solid var(--linia); background: var(--fons); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--tinta-2); cursor: pointer; transition: border-color 150ms ease, color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .tall-accions button:hover { border-color: var(--tinta-3); color: var(--tinta); } .tall:hover { background: var(--fons-2); } }
.tall[aria-current="true"] { background: var(--accent-suau); }
.tall[aria-current="true"] img { outline: 2px solid var(--accent); outline-offset: 1px; }
.tall.descartat .tall-text, .tall.descartat img { opacity: 0.4; }
.tall.descartat .tall-text b { text-decoration: line-through; }
.dubte { font-size: 11px; color: var(--alerta); font-family: var(--f-text); font-variant-numeric: tabular-nums; }
.talls-buit { padding: 28px 16px; text-align: center; color: var(--tinta-2); font-size: 14px; }
@media (max-width: 960px) { .visor { grid-template-columns: 1fr; } .reproductor { position: static; } .talls { max-height: none; } }

/* compte */
.compte { display: grid; gap: 16px; max-width: 760px; }
.pla-actual { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.pla-actual b { font-size: 22px; letter-spacing: -0.03em; }
.dues-opcions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opcio-pla { border: 1px solid var(--linia-forta); border-radius: 16px; padding: 20px; display: grid; gap: 10px; background: var(--fons); }
.opcio-pla.destacada { box-shadow: 0 0 0 2px var(--accent); border-color: transparent; }
.opcio-pla .import-xifra { font-size: 36px; }
@media (max-width: 560px) { .dues-opcions { grid-template-columns: 1fr; } }
.xifres-us { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.xifres-us div { border: 1px solid var(--linia); border-radius: 14px; padding: 14px 16px; }
.xifres-us dt { font-size: 13px; color: var(--tinta-2); }
.xifres-us dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .xifres-us { grid-template-columns: 1fr; } }
.espai-us { display: grid; gap: 8px; }
.progres-espai { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--fons-3); overflow: hidden; }
.progres-espai::-webkit-progress-bar { background: var(--fons-3); border-radius: 999px; }
.progres-espai::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.progres-espai::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.casella { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.casella input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.inici-immediat { margin: 16px 0; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.guia-grabar { margin-top: 12px; font-size: 14px; color: var(--tinta-2); }
.guia-grabar summary { cursor: pointer; color: var(--tinta); font-weight: 500; }
.guia-grabar ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.parts-pujada { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; color: var(--tinta-2); }
.parts-pujada li.feta { color: var(--ok); }
.parts-pujada li.feta::after { content: " ✓"; }
.prova-banda { border: 1px dashed var(--alerta); background: var(--alerta-suau); border-radius: 12px; padding: 10px 14px; font-size: 14px; }

/* textos llargs (legal, preguntes) */
.prosa { max-width: 68ch; display: grid; gap: 14px; padding-block: 48px 72px; }
.prosa h1 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.04em; margin-bottom: 8px; }
.prosa h2 { font-size: 20px; letter-spacing: -0.02em; margin-top: 18px; }
.prosa p, .prosa li { color: var(--tinta-2); }
.prosa ul { padding-left: 20px; display: grid; gap: 6px; }
.falta { background: var(--alerta-suau); color: var(--alerta); border-radius: 4px; padding: 0 4px; font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: 0.9em; }
.preguntes { display: grid; border-top: 1px solid var(--linia); }
.preguntes details { border-bottom: 1px solid var(--linia); }
.preguntes summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; letter-spacing: -0.015em; display: flex; justify-content: space-between; gap: 16px; }
.preguntes summary::-webkit-details-marker { display: none; }
.preguntes summary::after { content: "+"; font-family: var(--f-text); font-variant-numeric: tabular-nums; color: var(--tinta-3); transition: transform 200ms var(--ease-out); }
.preguntes details[open] summary::after { transform: rotate(45deg); }
.preguntes details > div { padding: 0 0 18px; color: var(--tinta-2); max-width: 62ch; }

/* error 404/500 */
.pagina-error { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.pagina-error .dins { display: grid; justify-items: center; gap: 16px; }

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