/* LogicGlow — un sol full. Tokens del disseny 5a «Clar Studio» (brief § 3).
   Fons blanc, blocs de color a tota amplada, vores de 2 px, CAP ombra, CAP
   degradat (fora de les dues taques del fons fosc), Nunito 700/800/900. */

@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 {
  --surface: #FFFFFF;
  --ink: #1A1714;
  --on-ink-solid: #FFFFFF;
  --on-ink: #C9C1B4;
  --ink-body: #4A443C;
  --ink-muted: #5C574F;
  --hairline: #ECE7DF;
  --stone: #F2EEE7;
  --lilac: #5E45D6;
  --lilac-ink: #2E2170;
  --lilac-mid: #4A35A8;
  --lilac-soft: #F4F1FF;
  --yellow: #FFC43D;
  --on-yellow: #1A1714;
  --amber-soft: #FDF3D9;
  --amber-ink: #8A5B00;
  --teal-panel: #06655D;
  --coral-panel: #A8342B;
  --coral-on-light: #B03A2E;
  --on-panel: #FFFFFF;
  --card: #FFFFFF;
  --glow-a: transparent;
  --glow-b: transparent;
  --r-small: 12px; --r-pill: 14px; --r-panel: 18px; --r-cover: 22px; --r-hero: 26px; --r-round: 999px;
  --pad: clamp(40px, 7vw, 88px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0B0A09;
    --ink: #FFF4EC;
    --on-ink-solid: #0B0A09;
    --on-ink: #B4ADA2;
    --ink-body: #B4ADA2;
    --ink-muted: #B4ADA2;
    --hairline: #2A2420;
    --stone: #1E1A17;
    --lilac-ink: #A992FF;
    --lilac-mid: #A992FF;
    --lilac-soft: #241C4A;
    --amber-soft: #3A2E14;
    --amber-ink: #FFC43D;
    --teal-panel: #0B968A;
    --coral-panel: #D94F4F;
    --coral-on-light: #FF9C9C;
    --card: #0B0A09;
    --glow-a: #7B61FF;
    --glow-b: #FF6B6B;
  }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 700 16px/1.45 "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
  position: relative;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :focus-visible { outline-color: #A992FF; } }

/* Les dues taques del fons fosc: estàtiques, darrere de tot. */
.glow { position: absolute; border-radius: var(--r-round); filter: blur(70px); opacity: 0.22; pointer-events: none; z-index: -1; }
.glow-a { width: 300px; height: 300px; left: -80px; top: 120px; background: var(--glow-a); }
.glow-b { width: 260px; height: 260px; right: -70px; bottom: 180px; background: var(--glow-b); }

.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10; padding: 12px 16px;
  background: var(--ink); color: var(--on-ink-solid); border-radius: var(--r-small); font-weight: 900;
}
.skip:focus { left: 16px; }

.shell { width: min(100% - 40px, 1080px); margin-inline: auto; }

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

.eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); }
.h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; margin-top: 12px; }
.h1-small { font-size: clamp(32px, 5vw, 48px); }
.h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin-top: 8px; }
.h3 { font-size: 22px; font-weight: 900; line-height: 1.15; }
.lead { font-size: 18px; font-weight: 800; color: var(--ink-body); margin-top: 12px; max-width: 60ch; }
.lead-big { font-size: clamp(20px, 2.6vw, 26px); color: var(--ink); line-height: 1.25; }
.copy { color: var(--ink-body); margin-top: 8px; max-width: 62ch; }
.note { font-size: 14px; font-weight: 800; color: var(--ink-muted); margin-top: 12px; }
.fine { font-size: 14px; font-weight: 700; color: var(--ink-muted); margin-top: 20px; max-width: 70ch; }
.label { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lilac-mid); }
.notice {
  margin-top: 28px; padding: 16px 20px; border: 2px solid var(--hairline); border-radius: var(--r-panel);
  background: var(--amber-soft); color: var(--amber-ink); font-size: 15px; font-weight: 800; max-width: none;
}
.notice-onpanel { background: transparent; border-color: var(--on-panel); color: var(--on-panel); }

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

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px;
  border: 2px solid var(--ink); border-radius: var(--r-panel); background: var(--ink); color: var(--on-ink-solid);
  font: 900 18px/1 "Nunito", system-ui, sans-serif; letter-spacing: 0.03em; text-decoration: none; cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.button:hover { background: var(--lilac); border-color: var(--lilac); color: #FFFFFF; }
.button-accent { background: var(--lilac); border-color: var(--lilac); color: #FFFFFF; }
.button-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink-solid); }
.button-small { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.anchor { display: inline-block; margin-top: 20px; font-weight: 900; color: var(--lilac-mid); text-decoration: none; }
.anchor:hover { text-decoration: underline; }

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

.masthead { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 2px solid var(--hairline); }
.masthead-row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding-block: 8px; }
@media (max-width: 400px) { .masthead-row .button-small { padding-inline: 12px; font-size: 14px; } .lang-pill { padding-inline: 10px; } }
.brand { text-decoration: none; margin-right: auto; }
.menu { display: none; gap: 20px; font-size: 14px; font-weight: 900; }
.menu a { text-decoration: none; color: var(--ink-body); padding: 8px 0; }
.menu a:hover { color: var(--lilac-mid); }
@media (min-width: 900px) { .menu { display: flex; } }
/* Selector d'idioma: píndola amb globus, i un `details` natiu que obre la
   llista. Cap ombra, vores de 2 px, radi complet, fons de la pàgina. */
.lang { position: relative; flex: none; }
.lang-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
  border: 2px solid var(--hairline); border-radius: var(--r-round); background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 900; letter-spacing: 0.04em; cursor: pointer; list-style: none; user-select: none;
}
.lang-pill::-webkit-details-marker { display: none; }
.lang-pill:hover, .lang[open] .lang-pill { border-color: var(--lilac); color: var(--lilac-mid); }
.lang-globe { width: 16px; height: 16px; flex: none; }
.lang-menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; min-width: 196px; padding: 6px;
  border: 2px solid var(--hairline); border-radius: var(--r-panel); background: var(--surface); display: grid; gap: 2px;
}
.lang-up .lang-menu { top: auto; bottom: calc(100% + 8px); }
.lang-foot .lang-menu { right: auto; left: 0; }
.lang-foot { margin-top: 16px; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-small);
  color: var(--ink-body); text-decoration: none; font-size: 15px; font-weight: 800;
}
.lang-menu a:hover { background: var(--lilac-soft); color: var(--lilac-ink); }
.lang-menu .lang-here { color: var(--ink); font-weight: 900; }
.lang-code { width: 26px; flex: none; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; color: var(--ink-muted); }
.lang-name { flex: 1; }
.lang-tick { width: 16px; height: 16px; flex: none; color: var(--lilac-mid); }

/* El logotip «logic glow.»: PNG transparent, tinta negra o blanca segons el
   mode. Sense fons ni vora: la imatge ja hi posa tot. */
.logo { display: inline-block; line-height: 0; }
.logo img { display: block; width: auto; height: 44px; }
.logo-small img { height: 56px; }

/* ----------------------------------------------------------- seccions */

.main { display: block; }
.band { padding-block: var(--pad); }
.band-tight { padding-block: 0 var(--pad); }
.band-first { padding-top: clamp(28px, 5vw, 56px); }
.band-soft { background: var(--lilac-soft); }
.band-soft .eyebrow { color: var(--lilac-mid); }
.band-soft .h2, .band-soft .h3 { color: var(--lilac-ink); }
.band-ink { background: var(--ink); color: var(--on-ink-solid); }
.band-ink .eyebrow, .band-ink .lead, .band-ink .copy, .band-ink .note, .band-ink .phone-cap { color: var(--on-ink); }
.band-lilac { background: var(--lilac); color: #FFFFFF; }
.band-lilac .eyebrow, .band-lilac .lead, .band-lilac .copy, .band-lilac .h2, .band-lilac .h3 { color: #FFFFFF; }
.band-yellow { background: var(--yellow); color: var(--on-yellow); }
.band-yellow .eyebrow, .band-yellow .lead, .band-yellow .copy, .band-yellow .note, .band-yellow .h2 { color: var(--on-yellow); }

.card { padding: 24px; border: 2px solid var(--hairline); border-radius: var(--r-panel); background: var(--card); }
.card-soft { border-color: var(--lilac-soft); }
@media (prefers-color-scheme: dark) { .card-soft { border-color: var(--hairline); } }

.two, .three, .four, .promises { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 640px) { .two, .four, .promises { grid-template-columns: repeat(2, 1fr); } .three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .four, .promises { grid-template-columns: repeat(4, 1fr); } }
.band-lilac .four { gap: 28px; }
.band-lilac .four li { padding-top: 16px; border-top: 2px solid #FFFFFF; }

/* ---------------------------------------------------------------- hero */

.hero { padding-block: clamp(40px, 6vw, 88px) var(--pad); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; } }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; }
.badge { display: inline-block; }
.badge[aria-disabled="true"] { opacity: 0.55; }
.badge-img { width: 156px; height: auto; }
.hero-stage { display: flex; justify-content: center; }

/* Marc de telèfon: rectangle de 2 px i radi 26 px que reté la captura. */
.phone { width: 100%; max-width: 260px; }
.phone-hero { max-width: 220px; }
.phone-screen {
  aspect-ratio: 9 / 19.5; border: 2px solid var(--hairline); border-radius: var(--r-hero);
  background: var(--stone); overflow: hidden;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-cap { font-size: 14px; font-weight: 800; color: var(--ink-muted); margin-top: 12px; }
.band-ink .phone-screen { background: var(--ink); border-color: var(--hairline); }
.shots { display: grid; gap: 20px; margin-top: 28px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .shots { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .shots { grid-template-columns: repeat(6, 1fr); } }
.shots .phone { max-width: none; }
/* L'iPad: el mateix marc, més ample, en una fila per a ell sol. */
.tablet { grid-column: 1 / -1; margin-top: 8px; }
.tablet .phone-screen { aspect-ratio: 2064 / 2752; }

/* ---------------------------------------------------------------- passos */

.steps { display: grid; gap: 16px; margin-top: 28px; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: 24px; border: 2px solid var(--hairline); border-radius: var(--r-panel); background: var(--lilac-soft); color: var(--lilac-ink); }
.step .h3 { color: var(--lilac-ink); }
.step .copy { color: var(--lilac-mid); }
.step-art { display: block; width: 72px; color: var(--lilac); }
@media (prefers-color-scheme: dark) { .step-art { color: #A992FF; } }
.step-num { font-size: 52px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin-top: 12px; color: var(--lilac); }
@media (prefers-color-scheme: dark) { .step-num { color: #8B74FF; } }
.step .h3 { margin-top: 8px; }
.art { width: 100%; height: auto; }

/* ---------------------------------------------------------------- jocs */

.cats { display: grid; gap: 20px; margin-top: 28px; }
.cat { padding: 24px; border-radius: var(--r-cover); color: var(--cat-on); background: var(--cat-face); }
.cat-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-art { width: 44px; flex: none; }
.cat-name { flex: 1; min-width: 12ch; font-size: 26px; }
.cat-count { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); }
.cat-note { margin-top: 12px; font-weight: 800; max-width: 60ch; }
.games { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 640px) { .games { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .games { grid-template-columns: repeat(5, 1fr); } .cat-arcade .games { grid-template-columns: repeat(4, 1fr); } }
.game { padding: 16px; border-radius: var(--r-panel); background: var(--card); color: var(--ink); border: 2px solid var(--hairline); }
.game-name { font-size: 16px; font-weight: 900; line-height: 1.2; }
.game-note { font-size: 14px; font-weight: 700; color: var(--ink-body); margin-top: 6px; }
.cat-memory { --cat-face: #0B968A; --cat-on: #FFFFFF; }
.cat-attention { --cat-face: #5E45D6; --cat-on: #FFFFFF; }
.cat-speed { --cat-face: #FF6A00; --cat-on: #1A1714; }
.cat-reasoning { --cat-face: #1667C8; --cat-on: #FFFFFF; }
.cat-math { --cat-face: #D94F4F; --cat-on: #FFFFFF; }
.cat-language { --cat-face: #FFC43D; --cat-on: #1A1714; }
.cat-arcade { --cat-face: #1A1714; --cat-on: #FFFFFF; }
@media (prefers-color-scheme: dark) { .cat-arcade { --cat-face: #1E1A17; } .cat-arcade .game { border-color: var(--hairline); } }

/* ---------------------------------------------------------------- tests */

.tgroups { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 720px) { .tgroups { grid-template-columns: 5fr 5fr 3fr; } }
.tgroup { padding: 20px 24px; border: 2px solid var(--hairline); border-radius: var(--r-panel); background: var(--card); }
.tgroup .note { margin-top: 6px; }
.tlist { margin-top: 12px; display: grid; gap: 10px; }
.tlist li { font-size: 14px; font-weight: 700; color: var(--ink-body); line-height: 1.35; }
.tlist strong { display: block; font-weight: 900; color: var(--ink); font-size: 16px; }

/* ---------------------------------------------------------------- preus */

.plan-limit { margin-top: 16px; padding: 8px 14px; display: inline-block; border-radius: var(--r-pill); background: var(--stone); font-size: 14px; font-weight: 900; }
.plan-ink { background: var(--ink); color: var(--on-ink-solid); border-color: var(--ink); }
.plan-ink .copy { color: var(--on-ink); }
.plan-ink .plan-limit { background: var(--surface); color: var(--ink); }

/* ------------------------------------------------------------------ faq */

.faq { margin-top: 28px; display: grid; gap: 12px; }
.qa { border: 2px solid var(--hairline); border-radius: var(--r-panel); background: var(--card); color: var(--ink); }
.qa summary { cursor: pointer; padding: 18px 24px; font-size: 18px; font-weight: 900; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 28px; height: 28px; border: 2px solid var(--hairline); border-radius: var(--r-round); display: grid; place-items: center; font-size: 18px; color: var(--lilac-mid); }
.qa[open] summary::after { content: "–"; }
.qa summary:hover { color: var(--lilac-mid); }
.qa .copy { padding: 0 24px 20px; max-width: none; }

/* ------------------------------------------------------------ formulari */

.form { margin-top: 28px; max-width: 560px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 800; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--hairline); border-radius: var(--r-small); background: var(--surface); color: var(--ink);
  font: 700 16px/1.4 "Nunito", system-ui, sans-serif; min-height: 48px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--lilac); outline: none; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--coral-on-light); }
.field-check { grid-template-columns: 24px 1fr; align-items: start; gap: 12px; }
.field-check input { width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0; accent-color: var(--lilac); }
.field-check label { font-size: 14px; font-weight: 700; color: var(--ink-body); }

/* ------------------------------------------------------------------ peu */

.foot { border-top: 2px solid var(--hairline); padding-block: 40px 28px; }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.foot-tagline { margin-top: 12px; font-weight: 800; color: var(--ink-body); }
.foot-head { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); }
.foot-links { margin-top: 12px; display: grid; gap: 8px; font-size: 14px; font-weight: 800; }
.foot-links a { text-decoration: none; color: var(--ink-body); padding: 4px 0; display: inline-block; }
.foot-links a:hover { color: var(--lilac-mid); }
.foot-manage {
  padding: 4px 0; border: 0; background: none; color: var(--ink-body); cursor: pointer; text-align: left;
  font: 800 14px/1.45 "Nunito", system-ui, sans-serif;
}
.foot-manage:hover { color: var(--lilac-mid); }
/* Sense JavaScript el botó és `hidden`: que no deixi el forat de la graella. */
.foot-links li:has([hidden]) { display: none; }
.foot-legal { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--hairline); }
.foot-legal .fine { margin-top: 8px; }

/* --------------------------------------------------------------- legals */

.prose { max-width: 72ch; }
.prose h2 { font-size: 24px; font-weight: 900; margin-top: 40px; }
.prose h3 { font-size: 18px; font-weight: 900; margin-top: 28px; }
.prose p, .prose ul, .prose ol { margin-top: 12px; color: var(--ink-body); }
.prose ul { list-style: disc; padding-left: 20px; }
.prose ol { list-style: decimal; padding-left: 20px; }
.prose a { color: var(--lilac-mid); }
.table-scroll { overflow-x: auto; margin-top: 16px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border: 2px solid var(--hairline); vertical-align: top; }
.prose th { font-weight: 900; }

/* ------------------------------------------------------ avís de galetes */
/* Va a sota de tot i només surt si `assets/js/consent.js` el mostra. Els dos
   botons són EXACTAMENT iguals de grans: cap dels dos crida més que l'altre. */

.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 2px solid var(--ink); padding-block: 16px;
}
.consent[hidden] { display: none; }
.consent-row { display: grid; gap: 16px; align-items: center; }
@media (min-width: 760px) { .consent-row { grid-template-columns: 1fr auto; } }
.consent-text { font-size: 14px; font-weight: 800; color: var(--ink-body); max-width: 68ch; }
.consent-text a { color: var(--lilac-mid); }
.consent-buttons { display: flex; gap: 12px; }
.consent-button { flex: 1 1 0; min-width: 132px; }
.consent-ghost { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.consent-ghost:hover { background: var(--ink); color: var(--on-ink-solid); border-color: var(--ink); }

/* ------------------------------------------------------------ moviment */

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