/* WordShot — un sol full, cap petició externa.
   Paper d'imprimir fred (gris-verd), tinta blava-negra, indi per marcar i la
   mostassa com a FARCIMENT, mai com a text petit. Els hexadecimals són els de
   l'app (`src/theme/tokens.ts`, brief § 3) i les parelles de text i fons són
   totes a `scripts/lib/contrast.mjs`: el guardià les comprova a 4,5:1 en clar i
   en fosc. Si en canvies un, canvia també la taula.

   Bandes a tota amplada, alternades: paper · pedra · INDI PLE · paper · pedra ·
   paper · pedra · paper · pedra · paper · MOSTASSA PLENA. L'última és l'única
   que es veu igual en clar i en fosc, i sobre la mostassa sempre hi va tinta.

   LA PELL SEGUEIX EL SISTEMA, i prou: no hi ha cap selector ni cap línia de
   JavaScript en tot el lloc. `:root` és la clara i
   `@media (prefers-color-scheme: dark)` la fosca, amb els valors de la pell
   fosca de l'app. L'única animació és la baralla de la portada, de CSS. */

@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/nunito-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/nunito-900.woff2") format("woff2"); }

:root {
  /* paper i tinta */
  --paper: #F6F7F3;
  --stone: #E8EBE4;
  --surface: #FFFFFF;
  --ink: #141A1F;
  --body: #3C464F;
  --muted: #4E5862;
  --hairline: #E3E7E0;
  --hairline-2: #D6DCD3;
  --rule: #141A1F;
  --on-ink: #F6F7F3;

  /* l'indi: el color de la marca */
  --indigo: #3A3FA0;
  --indigo-soft: #EDEEFA;
  --band-indigo: #3A3FA0;
  --band-indigo-2: #23276E;
  --on-indigo: #FFFFFF;
  --on-indigo-soft: #E2E3F7;

  /* la mostassa: FARCIMENT, i un to propi per a text petit */
  --mustard: #E3B23C;
  --mustard-soft: #FBF1D8;
  --mustard-ink: #7A5510;
  --on-mustard: #141A1F;

  /* els dos gestos de la carta */
  --knew: #1B5335;
  --new: #AC3C2E;

  /* LES DOTZE FAMÍLIES: el llom de la carta. Sota text, només les tres de les
     cartes de la portada (sentiments, societat i cultura local), amb blanc. */
  --f-feelings: #C0392B;
  --f-nature: #2E7D52;
  --f-body: #B4653A;
  --f-science: #2F5FA8;
  --f-arts: #6A3FA0;
  --f-society: #8A6D1F;
  --f-time: #4E6B7A;
  --f-character: #A03A6B;
  --f-objects: #5C6B3A;
  --f-motion: #B4820F;
  --f-senses: #1F7D7A;
  --f-local: #7A4A2A;
  --on-spine: #FFFFFF;

  /* els radis */
  --r-tile: 10px;
  --r-chip: 14px;
  --r-btn: 16px;
  --r-card: 22px;
  --r-sheet: 28px;
  --r-round: 999px;

  --pad: clamp(48px, 7vw, 96px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
}

/* ── la pell fosca: la de l'app, tinta freda i no negre pur ─────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12171A;
    --stone: #0C1013;
    --surface: #1A2024;
    --ink: #EDF1EC;
    --body: #C6CEC8;
    --muted: #9CA6A0;
    --hairline: #2A3237;
    --hairline-2: #333C41;
    --rule: #EDF1EC;
    --on-ink: #12171A;
    --indigo: #A3A8F5;
    --indigo-soft: #1B1E3A;
    --band-indigo: #2E3280;
    --band-indigo-2: #1B1E52;
    --on-indigo: #EDF1EC;
    --on-indigo-soft: #CFD2FF;
    --mustard-soft: #33280E;
    --mustard-ink: #EFC96F;
    --knew: #5FD292;
    --new: #FF9C8B;
    --f-feelings: #FF9C8B;
    --f-nature: #6FDCA0;
    --f-body: #E0A276;
    --f-science: #8FB4F2;
    --f-arts: #BCA3F5;
    --f-society: #DEC069;
    --f-time: #A4C0CF;
    --f-character: #F09BC2;
    --f-objects: #ADBF84;
    --f-motion: #EFC96F;
    --f-senses: #6FD8D2;
    --f-local: #D3A282;
    --on-spine: #10151A;
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 700 16px/1.45 "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure, details { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.band-indigo :focus-visible, .band-mustard :focus-visible { outline-color: currentColor; }
/* El salt d'una àncora no ha de deixar el títol sota la capçalera enganxada. */
[id] { scroll-margin-top: 88px; }
@media (min-width: 960px) { [id] { scroll-margin-top: 116px; } }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 40; padding: 12px 18px;
  background: var(--ink); color: var(--on-ink); border-radius: var(--r-btn); font-weight: 900;
}
.skip:focus { left: 16px; }

.shell { width: min(100% - 32px, 1080px); margin-inline: auto; }
@media (min-width: 640px) { .shell { width: min(100% - 48px, 1080px); } }
.narrow { max-width: 760px; }
.center { text-align: center; }
.center .copy, .center .lead, .center .note { margin-inline: auto; }

/* -------------------------------------------------------------- tipus */

.eyebrow, .label {
  font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--indigo);
}
.eyebrow-on-indigo { color: var(--on-indigo-soft); }
.eyebrow-on-mustard { color: var(--on-mustard); }
.h1 { font-size: clamp(40px, 7.4vw, 72px); font-weight: 900; line-height: 1.02; letter-spacing: -0.045em; margin-top: 14px; text-wrap: balance; }
.h1-small { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.03em; }
.h2 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 900; line-height: 1.08; letter-spacing: -0.035em; margin-top: 10px; text-wrap: balance; max-width: 26ch; }
.h3 { font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.lead { font-size: 17px; font-weight: 700; color: var(--body); margin-top: 16px; max-width: 58ch; text-wrap: pretty; }
.lead-big { font-size: clamp(18px, 2.4vw, 21px); line-height: 1.4; }
.copy { color: var(--body); margin-top: 10px; max-width: 62ch; text-wrap: pretty; }
.copy-on-indigo { color: var(--on-indigo-soft); }
.copy-on-mustard { color: var(--on-mustard); }
.note { font-size: 14px; font-weight: 800; color: var(--muted); margin-top: 14px; max-width: 62ch; }
.fine { font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 26px; max-width: 76ch; }
.claim {
  margin-top: 30px; padding: 14px 18px; border: 2px solid var(--on-indigo-soft); border-radius: var(--r-chip);
  color: var(--on-indigo); font-weight: 900; font-size: 15px; max-width: 70ch;
}
.notice {
  margin-top: 28px; padding: 16px 20px; border: 2px solid var(--hairline-2); border-radius: var(--r-chip);
  background: var(--mustard-soft); color: var(--mustard-ink); font-size: 15px; font-weight: 800; max-width: 76ch;
}
.notice a { font-weight: 900; }
.notice-icon { display: flex; gap: 14px; align-items: flex-start; }
.notice-fig { flex: none; }
.fig { width: 30px; height: 30px; }
.fig-small { width: 26px; height: 26px; }

/* ------------------------------------------------------------- bandes */

.band { padding: var(--pad) 0; border-top: 2px solid var(--hairline); }
.band-first { border-top: 0; padding-top: clamp(24px, 4vw, 48px); }
.band-stone { background: var(--stone); border-top-color: var(--hairline-2); }
/* L'indi va de dalt a baix com els panells de l'app (el blanc passa a 4,5:1
   amb tots dos extrems, i el guardià ho comprova). */
.band-indigo {
  background: linear-gradient(180deg, var(--band-indigo), var(--band-indigo-2));
  color: var(--on-indigo); border-top-color: var(--band-indigo);
}
.band-indigo .h2 { color: var(--on-indigo); }
.band-mustard { background: var(--mustard); color: var(--on-mustard); border-top-color: var(--mustard); }
.band-mustard .h2 { color: var(--on-mustard); }
.band-last { border-bottom: 0; }
.band-clip { overflow: hidden; }

.band-head { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 40px); }
.band-head > div:first-child { flex: 1 1 340px; min-width: 0; }

/* ------------------------------------------------------------- botons */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 22px; border-radius: var(--r-btn);
  font-weight: 900; font-size: 16px; text-decoration: none; border: 2px solid transparent;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.button-small { min-height: 42px; padding: 8px 16px; font-size: 14px; }
.button-ink { background: var(--ink); color: var(--on-ink); }
.button-line { border-color: var(--rule); color: var(--ink); margin-top: 22px; }
.button-line:hover, .button-ink:hover { background: var(--mustard); color: var(--on-mustard); border-color: var(--mustard); }
button.button { font: inherit; font-weight: 900; cursor: pointer; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.cta-center { justify-content: center; }
.badge { display: inline-block; border-radius: var(--r-tile); }
.badge img { width: 150px; height: 50px; }
.badge-soon {
  display: inline-block; padding: 13px 22px; border: 2px solid var(--rule);
  border-radius: var(--r-btn); font-weight: 900;
}

/* ------------------------------------------------------- la capçalera */

.masthead {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 2px solid var(--hairline); background: var(--paper);
}
.masthead-row { display: flex; align-items: center; gap: 10px; min-height: 66px; }
@media (min-width: 560px) { .masthead-row { gap: 14px; } }
.brand { text-decoration: none; margin-right: auto; }

/* La marca: la icona de l'app (quadrada, la retallem amb el radi d'iOS) i el
   nom tot junt. */
.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark-logo { width: 34px; height: 34px; flex: none; border-radius: 22%; }
.mark-name { font-size: 21px; font-weight: 900; letter-spacing: -0.04em; white-space: nowrap; }
.mark-big .mark-logo { width: 44px; height: 44px; }
.mark-big .mark-name { font-size: 26px; }

/* LA CAPÇALERA, AMPLADA PER AMPLADA.
     < 640 px   marca · menú · llengua (el botó és el badge de quatre dits avall)
     ≥ 640 px   + el botó
     ≥ 960 px   el menú passa a ser una tira en línia, en una segona fila */
.masthead-row > .button { display: none; }
@media (min-width: 640px) { .masthead-row > .button { display: inline-flex; } }
@media (max-width: 479px) {
  .masthead-row { gap: 8px; }
  .masthead-row .mark-name { font-size: 19px; }
  .masthead-row .mark-logo { width: 31px; height: 31px; }
  .menu-word { display: none; }
}

/* ----------------------------------- els selectors: llengua i menú
   El mateix moble: un `<details>` natiu que obre, tanca i es recorre amb
   teclat, sense ni una línia de JavaScript. */

.picker { position: relative; flex: none; }
.picker > summary { list-style: none; cursor: pointer; }
.picker > summary::-webkit-details-marker { display: none; }
.picker-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 2px solid var(--hairline-2); border-radius: var(--r-round);
  font-size: 13px; font-weight: 900; letter-spacing: 0.06em;
  transition: border-color 160ms var(--ease);
}
.picker-pill:hover { border-color: var(--rule); }
@media (min-width: 400px) { .picker-pill { padding: 8px 14px; } }
.picker-icon { width: 16px; height: 16px; flex: none; }
.picker-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 190px;
  padding: 6px; background: var(--surface); border: 2px solid var(--rule); border-radius: var(--r-chip);
}
.picker-menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border-radius: var(--r-tile); font-weight: 800; font-size: 15px; text-decoration: none;
  transition: background-color 140ms var(--ease);
}
.picker-menu a:hover { background: var(--stone); }
.lang-code { font-size: 12px; font-weight: 900; color: var(--muted); min-width: 22px; }
.lang-here { color: var(--indigo); }
.tick { width: 16px; height: 16px; margin-left: auto; flex: none; }

/* El menú de seccions: per sota de 960 px, un `<details>` amb l'hamburguesa; a
   partir de 960, una tira en línia a la segona fila. El que no toca va amb
   `display: none`, que també el treu de l'arbre d'accessibilitat. */
.nav-inline { display: none; }
.menu-list { min-width: 220px; }

@media (min-width: 960px) {
  .masthead-row { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: 12px; }
  .masthead-row > .menu { display: none; }
  .nav-inline { display: block; order: 9; flex: 1 0 100%; margin-top: 10px; border-top: 2px solid var(--hairline); }
  .nav-inline ul { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.2vw, 32px); padding: 9px 0; }
  .nav-inline a {
    display: block; padding: 3px 0; font-size: 14px; font-weight: 900; color: var(--muted);
    text-decoration: none; border-bottom: 2px solid transparent;
    transition: color 160ms var(--ease), border-color 160ms var(--ease);
  }
  .nav-inline a:hover { color: var(--ink); border-bottom-color: var(--mustard); }
}

/* ═══════════════════════════════════════════ LA CARTA DE L'APP

   Targeta blanca amb vora de tinta, el LLOM del color de la família a
   l'esquerra amb el nom en vertical i en majúscules, la categoria a dalt, la
   paraula gran i el número de fons en marca d'aigua. El color de la família
   ve de `.fam-<slug>`. */

.fam-feelings { --fam: var(--f-feelings); }
.fam-nature { --fam: var(--f-nature); }
.fam-body { --fam: var(--f-body); }
.fam-science { --fam: var(--f-science); }
.fam-arts { --fam: var(--f-arts); }
.fam-society { --fam: var(--f-society); }
.fam-time { --fam: var(--f-time); }
.fam-character { --fam: var(--f-character); }
.fam-objects { --fam: var(--f-objects); }
.fam-motion { --fam: var(--f-motion); }
.fam-senses { --fam: var(--f-senses); }
.fam-local { --fam: var(--f-local); }

.card {
  position: relative; display: grid; grid-template-columns: 38px 1fr;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--rule); border-radius: var(--r-card); overflow: hidden;
}
.spine { background: var(--fam); color: var(--on-spine); display: flex; align-items: center; justify-content: center; }
.spine-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
}
.card-body { position: relative; padding: 22px 22px 20px; min-width: 0; }
.card-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.card-word {
  position: relative; margin-top: 8px; font-size: clamp(38px, 6vw, 50px); font-weight: 900;
  line-height: 1; letter-spacing: -0.035em; overflow-wrap: anywhere;
}
.card-word-open { font-size: clamp(30px, 3.2vw, 36px); }
/* El número de fons: decoratiu, darrere de tot i en el to del filet. Va en un
   pseudoelement a posta: no és text de la pàgina i no ha de fer 4,5:1. */
.card-ghost {
  position: absolute; right: 10px; bottom: -34px; font-size: 180px; font-weight: 900;
  line-height: 1; letter-spacing: -0.06em; color: var(--hairline); pointer-events: none; user-select: none;
}
.card-ghost::after { content: attr(data-n); }
.card-hint { position: relative; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 900; color: var(--muted); }
.dash { display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: var(--fam); }
.card-def { margin-top: 12px; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.card-line { margin-top: 10px; font-size: 15px; color: var(--body); }
.card-line i { font-style: italic; }
.card-label { font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.card-source {
  display: inline-block; margin-top: 16px; padding: 7px 12px; border-radius: var(--r-round);
  background: var(--indigo-soft); color: var(--indigo); font-size: 14px; font-weight: 900;
}

/* ═══════════════════════════════════════════ LA PORTADA I LA BARALLA */

.hero { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; padding-block: clamp(18px, 3vw, 40px); }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 0.95fr; } }

.deck { position: relative; width: min(100%, 340px); margin-inline: auto; }
.deck-head { margin-bottom: 16px; }
.deck-stack { position: relative; display: grid; }
.deck-back, .deck-cards { grid-area: 1 / 1; }
.deck-back {
  border: 2px solid var(--rule); border-radius: var(--r-card); background: var(--stone);
}
.deck-back-1 { transform: rotate(3.5deg) translate(8px, 6px); background: var(--surface); }
.deck-back-2 { transform: rotate(-4deg) translate(-6px, 10px); }
.deck-cards { display: grid; }
.deck-cards .card { grid-area: 1 / 1; min-height: clamp(360px, 52vh, 430px); opacity: 0; }
.deck-cards .card:first-child { opacity: 1; }
.deck-cards .card-body { display: flex; flex-direction: column; }
.deck-cards .card-word { margin-top: 18px; font-size: clamp(40px, 9vw, 54px); }
.deck-cards .card-hint { margin-top: auto; padding-top: 28px; }

/* La baralla es mou sola, amb CSS i prou: cada carta entra de sota, s'està
   quieta i marxa cap a la dreta com si l'arrosseguessis («Ja la sabia»). Una
   sola carta a la vista cada vegada: la que surt ja és invisible quan entra la
   següent. Amb el moviment reduït no hi ha animació i es veu la primera. */
@media (prefers-reduced-motion: no-preference) {
  .deck-cards .card { animation: deal 12s var(--ease) infinite; }
  .deck-cards .card:nth-child(2) { animation-delay: 4s; }
  .deck-cards .card:nth-child(3) { animation-delay: 8s; }
}
@keyframes deal {
  0% { opacity: 0; transform: translateY(18px) scale(0.97); }
  5% { opacity: 1; transform: none; }
  28% { opacity: 1; transform: none; }
  33.33% { opacity: 0; transform: translateX(42%) rotate(8deg); }
  100% { opacity: 0; transform: translateX(42%) rotate(8deg); }
}

.swipes { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.swipe {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 2px solid var(--hairline-2); border-radius: var(--r-round); background: var(--surface);
  font-size: 14px; font-weight: 900;
}
.swipe-left { color: var(--new); }
.swipe-right { color: var(--knew); }
.deck-caption { margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--muted); text-align: center; }

/* ═══════════════════════════════════════════════════ COM FUNCIONA */

.steps { display: grid; gap: 18px; margin-top: 34px; counter-reset: none; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 24px; background: var(--surface); border: 2px solid var(--hairline-2); border-radius: var(--r-card); }
.step-n {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: var(--r-round); background: var(--mustard); color: var(--on-mustard);
  font-size: 18px; font-weight: 900;
}

/* Les cinc caixes de repàs: com més a la dreta, més triga a tornar la
   paraula. La barra de sota de cada caixa creix amb el temps, i és decorativa:
   el text de dins ja ho diu. */
.boxes-wrap { margin-top: 40px; }
.boxes { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 560px) { .boxes { grid-template-columns: repeat(5, 1fr); } }
.box {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px;
  background: var(--surface); border: 2px solid var(--rule); border-radius: var(--r-chip);
}
.box-n { font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--indigo); }
.box-when { font-size: 16px; font-weight: 900; line-height: 1.2; }
.box::after { content: ""; display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--mustard); }
.box-1::after { width: 12%; }
.box-2::after { width: 30%; }
.box-3::after { width: 52%; }
.box-4::after { width: 76%; }
.box-5::after { width: 100%; }

.how-foot { margin-top: 18px; }
.tile {
  padding: 24px; background: var(--surface); border: 2px solid var(--hairline-2); border-radius: var(--r-card);
}
.tile .h3 { margin-top: 0; }
.quiz-strip { display: flex; gap: 8px; margin-top: 14px; }
.quiz-strip i {
  display: block; width: 44px; height: 30px; border: 2px solid var(--hairline-2); border-radius: 8px; background: var(--paper);
}
.quiz-strip i.ok { border-color: var(--knew); background: var(--surface); box-shadow: inset 0 -5px 0 var(--knew); }
.tile-streak { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.tile-streak > div { flex: 1 1 170px; min-width: 0; }
.streak-art { width: 96px; height: 96px; flex: none; }
.meter { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.meter i { display: block; width: 16px; height: 16px; border-radius: var(--r-round); background: var(--mustard); }

.grid { display: grid; gap: 18px; margin-top: 30px; }
.grid > * { min-width: 0; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ═════════════════════════════════════════ AMB FONT, SEMPRE (banda d'indi) */

.source-head .h2 { max-width: 20ch; }
.opens { display: grid; gap: 18px; margin-top: 36px; align-items: stretch; }
/* Les tres cartes obertes fan la mateixa alçada, i el xip de la font va
   sempre a baix de tot, alineat a les tres. */
.card-open .card-body { display: flex; flex-direction: column; align-items: flex-start; }
.card-open .card-source { margin-top: auto; }
.card-open .card-line:last-of-type { margin-bottom: 16px; }
@media (min-width: 900px) { .opens { grid-template-columns: repeat(3, 1fr); } }
.band-indigo .card { border-color: var(--band-indigo-2); }

/* ═════════════════════════════════════════════════ LES DOTZE FAMÍLIES
   Cada família és una fitxa amb la peça de l'app i el nom, i el color de la
   família en un filet gruixut a l'esquerra, com el llom de la carta. El color
   no va mai sota text. */

.families {
  display: grid; gap: 12px; margin-top: 34px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
}
.family {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px;
  background: var(--surface); border: 2px solid var(--hairline-2); border-left: 10px solid var(--fam);
  border-radius: var(--r-chip);
}
.family-art { width: 44px; height: 44px; flex: none; }
/* Al mòbil, la peça a sobre i el nom a sota: «Sentimientos» no cap al costat. */
@media (max-width: 479px) {
  .families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (min-width: 640px) { .family-art { width: 52px; height: 52px; } }
.family-name { font-size: 15px; font-weight: 900; line-height: 1.15; min-width: 0; }

/* ═══════════════════════════════════════════════════ JUGAR AMB ALGÚ */

.play-art { width: min(200px, 40vw); height: auto; flex: none; }
.piece { border-color: var(--rule); }
.piece .h3::before {
  content: ""; display: block; width: 34px; height: 6px; margin-bottom: 14px; border-radius: 3px; background: var(--indigo);
}

/* ═════════════════════════════════════════ ESCOLTA-LA I LA RESTA */

.extras { display: grid; gap: 26px; margin-top: 34px; }
@media (min-width: 620px) { .extras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .extras { grid-template-columns: repeat(4, 1fr); } }
.extra-fig {
  display: inline-flex; padding: 12px; margin-bottom: 14px; border-radius: var(--r-chip);
  background: var(--indigo-soft); color: var(--indigo);
}
.notice-ai { background: var(--indigo-soft); color: var(--indigo); border-color: var(--indigo-soft); }

/* ------------------------------------------------- privadesa, en curt */

.privacy-grid { display: grid; gap: 26px; margin-top: 32px; }
@media (min-width: 740px) { .privacy-grid { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.privacy-item { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 740px) {
  .privacy-item { padding-inline: 26px; border-left: 2px solid var(--hairline-2); }
  .privacy-item:first-child { padding-left: 0; border-left: 0; }
  .privacy-item:last-child { padding-right: 0; }
}
.privacy-fig {
  display: inline-flex; padding: 12px; border: 2px solid var(--rule); border-radius: var(--r-chip);
  align-self: flex-start; background: var(--surface);
}
.privacy-item .copy { margin-top: 0; font-size: 16px; }

/* ---------------------------------------------------------- els plans */

.plans { align-items: stretch; }
.plan { position: relative; padding: 26px; border: 2px solid var(--hairline-2); border-radius: var(--r-card); background: var(--surface); }
.plan-premium { border-color: var(--rule); }
.plan-premium .h3 { color: var(--indigo); padding-right: 84px; }
/* La corona surt per la cantonada de la targeta, mig a dins i mig a fora. */
.plan-art { position: absolute; top: -26px; right: -10px; width: 88px; height: 88px; }
@media (min-width: 420px) { .plan-art { width: 104px; height: 104px; } .plan-premium .h3 { padding-right: 96px; } }

.bullets { display: grid; gap: 10px; margin-top: 16px; }
.bullet { position: relative; padding-left: 22px; color: var(--body); }
.bullet::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 9px; height: 9px;
  border-radius: var(--r-round); background: var(--ink);
}
.bullet-mustard::before { background: var(--mustard); box-shadow: 0 0 0 2px var(--rule); }

/* ------------------------------------------------------- les preguntes */

.qas { margin-top: 30px; border-top: 2px solid var(--hairline-2); }
.qa { border-bottom: 2px solid var(--hairline-2); }
.qa-q {
  list-style: none; cursor: pointer; padding: 18px 46px 18px 0; position: relative;
  font-size: 17px; font-weight: 900; letter-spacing: -0.02em;
}
.qa-q::-webkit-details-marker { display: none; }
.qa-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--hairline-2); border-radius: var(--r-round);
  font-size: 19px; font-weight: 900; color: var(--indigo);
  transition: border-color 160ms var(--ease);
}
.qa-q:hover::after { border-color: var(--indigo); }
.qa[open] .qa-q::after { content: "−"; border-color: var(--indigo); }
.qa .copy { margin-top: 0; padding-bottom: 20px; }
.qa .copy a { font-weight: 900; text-underline-offset: 3px; }

/* ═════════════════════════════ EL SUPORT I EL SEU FORMULARI
   L'entrega Netlify Forms des del HTML publicat, sense JavaScript. ⚠ CAP
   `placeholder`: un text gris dins d'un camp no arriba mai a 4,5:1. */

.support { display: grid; gap: clamp(28px, 4vw, 46px); align-items: start; }
@media (min-width: 860px) { .support { grid-template-columns: 0.92fr 1.08fr; } }
.support-text .copy + .copy { margin-top: 14px; }
.plain { font-weight: 900; text-underline-offset: 3px; }

.form {
  padding: clamp(20px, 3vw, 28px); border: 2px solid var(--rule);
  border-radius: var(--r-sheet); background: var(--surface);
}
.shell.narrow > .form { margin-top: 26px; }
.field { display: grid; gap: 8px; margin-top: 18px; }
.field:first-of-type { margin-top: 0; }
.field label { font-size: 13px; font-weight: 900; letter-spacing: 0.06em; }
.field input, .field textarea {
  width: 100%; min-width: 0; padding: 12px 14px;
  font: inherit; font-weight: 700; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--hairline-2); border-radius: var(--r-chip);
  transition: border-color 160ms var(--ease);
}
.field textarea { resize: vertical; line-height: 1.45; }
.field input:hover, .field textarea:hover { border-color: var(--rule); }
.form-send { margin-top: 24px; }
.form-note { margin-top: 18px; }
.form-note a { font-weight: 900; }
/* El camp trampa del honeypot: fora de la vista, del tabulador i de l'arbre
   d'accessibilitat. Qui l'omple és un robot. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.thanks-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.thanks-links .button-line { margin-top: 0; }

/* --------------------------------------- /match, /challenge i el 404

   El bloc de la invitació surt del HTML estàtic AMAGAT (`data-invite hidden`)
   i l'omple la funció de vora. ⚠ `[hidden]` va amb `!important` perquè cap
   `display` d'aquest full no el destapi. */

[hidden] { display: none !important; }

.invite-page { max-width: 64ch; }
.invite {
  margin-top: 30px; padding: 26px; border: 2px solid var(--rule);
  border-radius: var(--r-card); background: var(--surface);
}
.invite-code {
  margin-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(30px, 6vw, 42px); font-weight: 700; letter-spacing: 0.08em;
  word-break: break-all;
}
.invite-who { font-size: 15px; font-weight: 800; color: var(--muted); margin-bottom: 14px; }
.invite-rounds { margin-top: 10px; font-size: 15px; font-weight: 800; color: var(--muted); }
.invite .cta-row { margin-top: 22px; }
.button-big { min-height: 54px; padding: 14px 26px; font-size: 17px; }
.h2-quiet { margin-top: 44px; font-size: clamp(22px, 3vw, 26px); }

.shared { display: grid; gap: 34px; }
.shared-art { width: 128px; height: 128px; margin-inline: auto; }
@media (min-width: 560px) { .shared-art { width: 156px; height: 156px; } }
.shared-block { padding-bottom: 34px; border-bottom: 2px solid var(--hairline); text-align: center; }
.shared-block:last-child { padding-bottom: 0; border-bottom: 0; }
.shared-block .lead { margin-inline: auto; }

/* -------------------------------------------------- els documents legals */

.prose { max-width: 74ch; }
.prose h2 { font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -0.03em; margin-top: 38px; }
.prose h3 { font-size: 19px; font-weight: 900; margin-top: 26px; }
.prose p { color: var(--body); margin-top: 14px; }
.prose ul, .prose ol { margin-top: 14px; display: grid; gap: 8px; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { color: var(--body); }
.prose li::marker { color: var(--indigo); }
.prose a { font-weight: 900; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }
.table-scroll { overflow-x: auto; margin-top: 20px; border: 2px solid var(--hairline-2); border-radius: var(--r-chip); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--hairline); vertical-align: top; }
.prose th { font-weight: 900; }
.prose td { color: var(--body); }
.prose tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- el peu
   ⚠ Les dades del RESPONSABLE no són al peu (contracte de la casa): viuen a
   l'apartat de responsable dels quinze documents legals i de suport. */

.foot { border-top: 2px solid var(--rule); padding: var(--pad) 0 34px; background: var(--stone); }
.foot-grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot-tagline { margin-top: 14px; font-size: 15px; font-weight: 800; color: var(--muted); max-width: 28ch; }
.foot-head { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.foot-links { margin-top: 14px; display: grid; gap: 10px; font-weight: 800; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-contact { margin-top: 14px; font-weight: 800; }
.foot-contact a { text-underline-offset: 3px; }
.foot-legal { margin-top: 34px; padding-top: 22px; border-top: 2px solid var(--hairline-2); }
.foot-legal .fine { margin-top: 0; }

/* El selector del peu: CA · ES · EN, tres enllaços sempre a la vista. */
.lang-row ul { display: flex; gap: 8px; margin-top: 20px; }
.lang-row a {
  display: inline-grid; place-items: center; min-width: 48px; min-height: 40px; padding: 6px 12px;
  border: 2px solid var(--hairline-2); border-radius: var(--r-round);
  font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-decoration: none;
}
.lang-row a:hover { border-color: var(--rule); }
.lang-row a[aria-current] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}