/* Muntat per web/demo/munta.mjs a partir de parts/estil.css, parts/lloc.css i parts/app.css. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lletres/schibsted-grotesk-400.437cd97c80.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../lletres/schibsted-grotesk-500.83c497a1c0.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lletres/schibsted-grotesk-700.d656a2dcc2.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("../lletres/schibsted-grotesk-800.46876fbd58.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lletres/ibm-plex-mono-400.08949f728d.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../lletres/ibm-plex-mono-500.01d2854474.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lletres/ibm-plex-mono-600.0d1f0b8d07.woff2") format("woff2"); }
/* Tauler d'operacions: capçalera amb el temps, el plànol a l'esquerra i, a la dreta, els indicadors i el registre del motor. */
:root {
  --fons: #edf3f7;
  --superficie: #ffffff;
  --tinta: #121212;
  --secundari: #3a3f44;
  --apagat: #6e6e73;
  --linia: #dce0e4;
  --cami: #c3cbd2;
  --edifici: #e4e9ed;
  --aigua: #d4e5f3;
  --verd: #e3eee4;
  --via: #d6dbe0;
  --suau: #8a9096;
  --fisica: #c9473d;
  --virtual: #2f6fd6;
  --express: #c47510;
  --buits: #7a5bd1;
  --sense-app: #169c8c;
  --neutre: #6e6e73;
  --boto: #121212;
  --boto-text: #ffffff;
  --lletra: "Schibsted Grotesk", "Avenir Next", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Menlo, ui-monospace, monospace;
  --radi: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fons: #0f1214; --superficie: #171b1e; --tinta: #eef1f3; --secundari: #c3c9ce; --apagat: #959ca2; --linia: #2a3035;
    --cami: #3b434a; --edifici: #22282c; --aigua: #1a2a36; --verd: #1a251d; --via: #2d3439; --suau: #8c949b;
    --fisica: #e36b5f; --virtual: #5e93ee; --express: #c27d25; --buits: #9378de; --sense-app: #21a796; --neutre: #9aa0a6;
    --boto: #eef1f3; --boto-text: #121212; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fons: #0f1214; --superficie: #171b1e; --tinta: #eef1f3; --secundari: #c3c9ce; --apagat: #959ca2; --linia: #2a3035;
  --cami: #3b434a; --edifici: #22282c; --aigua: #1a2a36; --verd: #1a251d; --via: #2d3439; --suau: #8c949b;
  --fisica: #e36b5f; --virtual: #5e93ee; --express: #c27d25; --buits: #9378de; --sense-app: #21a796; --neutre: #9aa0a6;
  --boto: #eef1f3; --boto-text: #121212; color-scheme: dark;
}
html, body { height: 100%; }
body {
  background: var(--fons);
  color: var(--tinta);
  font-family: var(--lletra);
  font-size: 15px;
  line-height: 1.45;
  padding-inline: 16px;
}
.pagina { max-width: 1440px; margin: 0 auto; padding-block: 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.cap { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; }
.cella { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagat); }
h1 { margin: 4px 0 0; font-size: clamp(24px, 2.4vw + 10px, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.segment { display: inline-flex; border: 1px solid var(--linia); border-radius: 999px; background: var(--superficie); padding: 3px; gap: 2px; }
.segment button {
  font: 500 14px var(--lletra); color: var(--secundari); background: transparent; border: 0; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; min-height: 36px;
}
.segment button[aria-pressed="true"] { background: var(--boto); color: var(--boto-text); }
.segment button:hover:not([aria-pressed="true"]) { color: var(--tinta); background: var(--fons); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--virtual); outline-offset: 2px; }
.temps { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--linia); border-radius: 999px; padding: 4px 14px 4px 4px; }
#play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--boto); color: var(--boto-text); cursor: pointer; display: grid; place-items: center; }
#play:disabled { opacity: 0.4; cursor: progress; }
#play .pausa { display: none; }
#play[aria-pressed="true"] .pausa { display: block; }
#play[aria-pressed="true"] .reprodueix { display: none; }
#rellotge { font: 600 22px var(--mono); font-variant-numeric: tabular-nums; min-width: 4ch; }
.velocitats button { padding: 5px 10px; min-height: 30px; font-family: var(--mono); font-size: 13px; }
.lliscant { display: flex; align-items: center; gap: 10px; color: var(--apagat); font: 12px var(--mono); }
.lliscant input { width: min(100%, 520px); accent-color: var(--tinta); }
.cos { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mapes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); position: relative; min-width: 0; }
.mapes[data-vista="costat"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marc { margin: 0; background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.marc figcaption { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 15px; }
.marc figcaption span { font: 12px var(--mono); color: var(--apagat); font-weight: 400; }
.marc canvas { width: 100%; aspect-ratio: 761 / 1014; max-height: 78vh; display: block; }
.estat { position: absolute; inset: 40% 10% auto; text-align: center; background: var(--superficie); border: 1px solid var(--linia); border-radius: var(--radi); padding: 14px 18px; color: var(--secundari); }
.panell { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bloc { background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bloc h2 { margin: 0; font-size: 12px; font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagat); }
.xifres { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: baseline; }
.xifres[data-columnes="1"] { grid-template-columns: minmax(0, 1fr) auto; }
.xifres .etiqueta { color: var(--secundari); font-size: 14px; }
.xifres .valor { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.xifres .cap-col { font: 11px var(--mono); color: var(--apagat); text-align: right; text-transform: uppercase; letter-spacing: 0.06em; }
.xifres [data-col="avui"].valor { color: var(--fisica); }
.xifres [data-col="sistema"].valor { color: var(--virtual); }
.camp { display: flex; flex-direction: column; gap: 4px; }
.camp label { font-size: 13px; color: var(--secundari); }
.camp select { font: 15px var(--lletra); color: var(--tinta); background: var(--fons); border: 1px solid var(--linia); border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.nota { margin: 0; font-size: 12.5px; color: var(--apagat); line-height: 1.45; }
.interruptor { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--secundari); cursor: pointer; }
.interruptor input { margin-top: 3px; accent-color: var(--tinta); width: 16px; height: 16px; flex: none; }
#registre { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-height: 9.5em; }
#registre li { display: grid; grid-template-columns: 3.4em 7em minmax(0, 1fr); gap: 6px; align-items: baseline; }
.r-hora { font: 12px var(--mono); color: var(--apagat); font-variant-numeric: tabular-nums; }
.r-tipus { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--virtual); }
.r-tipus[data-tipus="caducada"], .r-tipus[data-tipus="rebutjada"], .r-tipus[data-tipus="aturada"], .r-tipus[data-tipus="tancada"] { color: var(--fisica); }
.r-tipus[data-tipus="express"] { color: var(--express); }
.r-tipus[data-tipus="sense_hora"], .r-tipus[data-tipus="reoberta"] { color: var(--tinta); }
.r-tipus[data-tipus="buits"] { color: var(--buits); }
.r-tipus[data-tipus="onada"], .r-tipus[data-tipus="franja"] { color: var(--secundari); }
.r-text { color: var(--secundari); overflow-wrap: anywhere; }
.llegenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--secundari); }
.llegenda li { display: flex; align-items: center; gap: 10px; }
.mostra { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.m-fisica { background: var(--fisica); }
.m-virtual { background: var(--virtual); }
.m-express { background: var(--express); }
.m-buits { border: 2px solid var(--buits); box-sizing: border-box; }
.m-sense { background: var(--sense-app); border-radius: 1px; width: 10px; height: 10px; transform: rotate(45deg); margin-inline: 1px; }
.m-neutre { background: var(--neutre); opacity: 0.6; }
.peu { font-size: 12.5px; color: var(--apagat); display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 1080px) {
  .cos { grid-template-columns: minmax(0, 1fr); }
  .mapes[data-vista="costat"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mapes[data-vista="costat"] { grid-template-columns: minmax(0, 1fr); }
  .temps { flex-wrap: wrap; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}
.sim { display: flex; flex-direction: column; gap: 14px; }
.sim-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
/* De costat: els dos plànols a tota l'amplada i el panell, en una graella a sota. */
.cos[data-vista="costat"] { grid-template-columns: minmax(0, 1fr); }
.cos[data-vista="costat"] .panell { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.cos[data-vista="costat"] .marc canvas { max-height: 86vh; }

/* El web: la barra de dalt, el peu, la proposta, la pàgina de la simulació i la dels números. Fa servir els colors i
   les lletres de estil.css. */

/* La base que abans posava l'esquelet de l'Artifact. */
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- La navegació i el peu ---------- */
body.lloc { padding-inline: 0; }
.amplada { max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }
.navegacio {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--fons) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--linia) 70%, transparent);
}
.navegacio .amplada { display: flex; align-items: center; gap: 12px 28px; min-height: 60px; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; margin-right: auto; }
.marca svg { flex: none; }
.marca .nom { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.marca .de { font: 12px var(--mono); color: var(--apagat); }
.navegacio nav { display: flex; gap: 4px; flex-wrap: wrap; }
.navegacio nav a, .idiomes a {
  color: var(--secundari); text-decoration: none; font-weight: 600; font-size: 14.5px;
  padding: 8px 12px; border-radius: 999px; min-height: 36px; display: inline-flex; align-items: center;
  transition: background-color 150ms ease, color 150ms ease;
}
.navegacio nav a:hover, .idiomes a:hover { color: var(--tinta); background: var(--superficie); }
.navegacio nav a[aria-current="page"] { color: var(--boto-text); background: var(--boto); }
.idiomes { display: inline-flex; border: 1px solid var(--linia); border-radius: 999px; padding: 2px; background: var(--superficie); }
.idiomes a { font: 600 12px var(--mono); letter-spacing: 0.06em; padding: 6px 10px; min-height: 30px; }
.idiomes a[aria-current="true"] { color: var(--tinta); background: var(--fons); }
/* Les eines de dalt a la dreta: l'idioma i sortir (la sessió de l'entrada, a /surt). */
.eines { display: inline-flex; align-items: center; gap: 8px; }
.surt {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 999px;
  border: 1px solid var(--linia); background: var(--superficie); color: var(--secundari);
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.surt:hover { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 35%, var(--linia)); }
.surt:hover svg { transform: translateX(1px); }
.surt:active { transform: scale(0.96); }
.surt:focus-visible { outline: 3px solid var(--virtual); outline-offset: 2px; }
.surt svg { transition: transform 0.15s; }
a:focus-visible { outline: 2px solid var(--virtual); outline-offset: 2px; }
.peu-lloc { border-top: 1px solid var(--linia); margin-top: 24px; }
.peu-lloc .amplada { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 40px; padding-block: 28px 40px; }
.peu-lloc .fonts { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--apagat); }
.peu-lloc .qui { display: flex; flex-direction: column; gap: 4px; justify-self: end; text-align: right; font-size: 13px; color: var(--secundari); }
.peu-lloc .qui strong { color: var(--tinta); }
.seguent { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 2px solid var(--tinta); padding-top: 18px; }
.seguent .cap-seguent { display: flex; flex-direction: column; gap: 4px; }
.seguent strong { font-size: clamp(20px, 1vw + 14px, 26px); letter-spacing: -0.01em; }

/* ---------- Comú a les pàgines ---------- */
.proposta, .plana { padding-block: 28px 40px; display: flex; flex-direction: column; gap: clamp(48px, 5vw, 80px); }
.text { max-width: 68ch; }
.text-col { display: flex; flex-direction: column; gap: 14px; }
.boto {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 1px solid var(--tinta); transition: transform 150ms ease, opacity 150ms ease;
}
.boto.ple { background: var(--boto); color: var(--boto-text); border-color: var(--boto); }
.boto.buit { color: var(--tinta); background: transparent; }
.boto:hover { opacity: 0.9; transform: translateY(-1px); }
.boto:active { transform: translateY(0); }
.seccio { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 80px; }
.seccio > h2 { margin: 0; font-size: clamp(24px, 1.6vw + 14px, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; max-width: 30ch; }
.seccio p { margin: 0; line-height: 1.55; }
.dues { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.taula { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.taula th, .taula td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--linia); vertical-align: top; }
.taula th { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--apagat); }
.taula td.num, .taula th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.taula tfoot td { color: var(--apagat); border-bottom: 0; font-size: 13px; }
.taula .apagat { color: var(--apagat); }
.marc-taula { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 6px 12px; }
.targeta { background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.targeta h3 { margin: 0; font-size: 17px; }
.targeta p { font-size: 14.5px; color: var(--secundari); }

/* L'aparició en arribar-hi: només si el navegador no demana menys moviment. */
@media (prefers-reduced-motion: no-preference) {
  .js .revela { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
  .js .revela.vista { opacity: 1; transform: none; }
}

/* ---------- La proposta ---------- */
.hero { position: relative; display: flex; flex-direction: column; gap: 20px; padding-block: clamp(12px, 3vw, 40px) 4px; isolation: isolate; }
/* Una trama de punts, com la gent al plànol, que s'esvaeix cap a l'esquerra. */
.hero::before {
  content: ""; position: absolute; inset: -28px calc(-1 * clamp(16px, 3vw, 40px)) 0 45%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--virtual) 34%, transparent) 1.6px, transparent 2.2px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.hero h1 { font-size: clamp(34px, 4.4vw + 12px, 68px); max-width: 17ch; margin: 0; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--fisica); }
.hero .entrada { font-size: clamp(17px, 0.6vw + 14px, 21px); line-height: 1.5; color: var(--secundari); max-width: 58ch; margin: 0; }
.accions { display: flex; flex-wrap: wrap; gap: 10px; }
.xifres-grans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.xifra { border-top: 2px solid var(--tinta); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.xifra .gran { font: 600 clamp(30px, 2.4vw + 14px, 48px) var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.xifra .que { color: var(--secundari); font-size: 15px; max-width: 32ch; }
.grafic { background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.grafic .llegenda-g { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--secundari); }
.grafic .llegenda-g span { display: inline-flex; align-items: center; gap: 6px; }
.grafic .mostra.m-fisica { border-radius: 3px; }
.grafic .mostra.clara { opacity: 0.3; }
.barres { display: flex; flex-direction: column; gap: 9px; }
.barra { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 7.5em; gap: 10px; align-items: center; font-size: 14px; }
.barra .pista { position: relative; height: 14px; }
.barra .mitjana { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fisica); border-radius: 0 4px 4px 0; }
.barra .maxima { position: absolute; top: 3px; bottom: 3px; background: var(--fisica); opacity: 0.28; border-radius: 0 4px 4px 0; }
.barra .valors { font: 13px var(--mono); color: var(--secundari); text-align: right; font-variant-numeric: tabular-nums; }
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: pas; }
.pas { background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.pas .n { font: 600 13px var(--mono); color: var(--virtual); }
.pas h3 { margin: 0; font-size: 18px; }
.pas p { font-size: 14.5px; color: var(--secundari); }
details.detall { background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 14px 18px; }
details.detall summary { cursor: pointer; font-weight: 700; }
details.detall .paper { background: #f5f5f5; border-radius: 10px; padding: 8px; margin-top: 12px; overflow-x: auto; }
details.detall .paper img { display: block; width: 100%; min-width: 640px; height: auto; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.calc .bloc { padding: 18px; }
.control { display: flex; flex-direction: column; gap: 6px; }
.control label { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--secundari); }
.control label output { font: 600 14px var(--mono); color: var(--tinta); }
.control input[type="range"], .ctl input[type="range"] { width: 100%; accent-color: var(--tinta); }
.resultat-gran { font: 600 clamp(40px, 3vw + 20px, 64px) var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.bloc .titolet { font-size: 12px; font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagat); margin: 0; }
.pont { border-left: 3px solid var(--virtual); padding-left: 14px; display: flex; flex-direction: column; gap: 6px; }
.contacte { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; border-top: 2px solid var(--tinta); padding-top: 16px; }
.contacte .nom { font-size: 22px; font-weight: 800; }
.contacte .dades { font: 15px var(--mono); color: var(--secundari); user-select: all; }
.sim-seccio .sim { gap: 12px; }

/* ---------- La pàgina de la simulació ---------- */
.capcalera { display: flex; flex-direction: column; gap: 14px; }
.capcalera h1 { font-size: clamp(30px, 3vw + 14px, 52px); max-width: 22ch; margin: 0; line-height: 1.05; }
.capcalera .entrada { font-size: clamp(16px, 0.5vw + 14px, 19px); color: var(--secundari); max-width: 62ch; margin: 0; line-height: 1.5; }
.llegir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.llegir li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; color: var(--secundari); }
.llegir li strong { color: var(--tinta); display: block; }
.llegir .n { width: 26px; height: 26px; border-radius: 50%; background: var(--boto); color: var(--boto-text); display: grid; place-items: center; font: 600 12px var(--mono); }
.any .num.avui { color: var(--fisica); }
.any .num.sistema { color: var(--virtual); }
.any tr.total td { font-weight: 700; border-top: 2px solid var(--tinta); }

/* ---------- La pàgina dels números ---------- */
.numeros-cap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; }
.resposta { display: flex; flex-direction: column; gap: 8px; }
.resposta .gran { font: 600 clamp(48px, 5vw + 20px, 96px) var(--mono); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.resposta .rang { color: var(--secundari); margin: 0; }
.avis { background: color-mix(in srgb, var(--fisica) 12%, var(--superficie)); border: 1px solid var(--fisica); border-radius: 10px; padding: 10px 12px; margin: 0; font-size: 14px; }
.repartiment { background: var(--superficie); border: 1px solid var(--linia); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.repartiment .fila { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--secundari); }
.repartiment .fila strong { font: 600 17px var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }
.repartiment .fila.total { border-top: 2px solid var(--tinta); padding-top: 8px; color: var(--tinta); font-weight: 700; }
.repartiment .fila.total strong { font-size: 22px; }
.repartiment .negatiu { color: var(--fisica); }
.repartiment p { margin: 0; font-size: 13.5px; color: var(--apagat); }
.model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.hipotesis { display: flex; flex-direction: column; gap: 16px; }
.hipotesis fieldset { margin: 0; border: 1px solid var(--linia); border-radius: 14px; background: var(--superficie); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hipotesis legend { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagat); padding: 0 6px; }
.ctl { display: flex; flex-direction: column; gap: 5px; }
.ctl-cap { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ctl-cap label { font-size: 14.5px; color: var(--tinta); font-weight: 500; }
.ctl-cap output { font: 600 14px var(--mono); white-space: nowrap; }
.ctl small { font-size: 12.5px; color: var(--apagat); line-height: 1.4; }
.resultats { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.kv dt { color: var(--secundari); }
.kv dd { margin: 0; font: 600 14.5px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.tornado { display: flex; flex-direction: column; gap: 12px; }
.tor-fila { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; }
.tor-nom { color: var(--secundari); }
.tor-pista { position: relative; height: 22px; margin-inline: 2.4em; }
.tor-barra { position: absolute; top: 5px; height: 12px; background: var(--virtual); border-radius: 4px; }
.tor-ara { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tinta); }
.tor-valor { position: absolute; top: 3px; font: 11.5px var(--mono); color: var(--apagat); font-variant-numeric: tabular-nums; }
.tor-valor.baix { transform: translateX(calc(-100% - 6px)); }
.tor-valor.alt { transform: translateX(6px); }
.tor-eix { display: flex; justify-content: space-between; font: 11.5px var(--mono); color: var(--apagat); padding-left: calc(11em + 10px); }
.atraccions td.nom span { display: block; font-weight: 600; }
.atraccions td.nom small { color: var(--apagat); font-size: 12px; }
.atraccions .espera { font-weight: 600; color: var(--fisica); }
.barreta { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; width: 100%; }
.barreta i { display: block; height: 6px; max-width: 5rem; min-width: 2px; background: var(--fisica); border-radius: 2px; opacity: 0.8; flex: 0 1 auto; }
.metode { display: grid; gap: 14px; counter-reset: metode; margin: 0; padding: 0; list-style: none; max-width: 70ch; }
.metode li { counter-increment: metode; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; }
.metode li::before { content: counter(metode); font: 600 18px var(--mono); color: var(--virtual); line-height: 1.4; }
.llista { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; font-size: 14.5px; color: var(--secundari); }
.llista li::marker { color: var(--virtual); }
.llista a { color: var(--tinta); }

/* ---------- La pàgina de l'app: el circuit del dia, les pantalles en petit i el diàleg que les amplia ----------
   Les pantalles (.ap-…) porten el seu sistema visual, a app.css; aquí només la mida en petit i on van. */
.familia { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font: 13.5px var(--mono); color: var(--secundari); }
.familia strong { color: var(--tinta); font-weight: 600; }
.toca { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--secundari); }
.toca svg { flex: none; color: var(--virtual); }
.circuit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.pas-app { display: grid; grid-template-columns: 5em 376px minmax(0, 1fr); gap: 16px 24px; align-items: start; border-top: 1px solid var(--linia); padding-top: 22px; }
.pas-app .hora { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta); padding-top: 6px; }
.pantalles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mini { display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; border-radius: 24px; transition: transform 200ms ease; }
.mini:hover { transform: translateY(-3px); }
.mini:focus-visible { outline: 3px solid var(--virtual); outline-offset: 4px; }
.mini .ap-iphone { zoom: 0.39; }
.fletxa { font: 600 24px var(--mono); color: var(--virtual); }
.pas-text { display: flex; flex-direction: column; gap: 6px; max-width: 52ch; padding-top: 4px; }
.pas-text h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; }
.pas-text p { font-size: 15px; color: var(--secundari); }
.posa { font-size: 15px; }
.posa strong { color: var(--tinta); }
/* El diàleg: la pantalla a mida gran (el zoom el posa el JS perquè càpiga a l'alçada), el text del pas i els botons. */
.ampliada { border: 0; padding: 0; background: transparent; color: var(--tinta); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; }
.ampliada::backdrop { background: rgba(8, 10, 12, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.amp-cos { position: relative; display: grid; grid-template-columns: auto minmax(240px, 360px); gap: 28px; align-items: center; background: var(--superficie); border: 1px solid var(--linia); border-radius: 20px; padding: 24px 28px; }
.amp-marc { display: flex; justify-content: center; }
.amp-text { display: flex; flex-direction: column; gap: 10px; padding-right: 36px; }
.amp-text h2 { margin: 0; font-size: clamp(22px, 1.2vw + 14px, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.amp-text p { margin: 0; line-height: 1.5; color: var(--secundari); }
.amp-compte { font: 13px var(--mono); color: var(--apagat); font-variant-numeric: tabular-nums; }
.amp-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.amp-nav .boto { font-family: inherit; font-size: 15px; cursor: pointer; }
.amp-nav .boto:disabled { opacity: 0.35; cursor: default; transform: none; }
.amp-tanca { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linia); background: var(--fons); color: var(--tinta); display: grid; place-items: center; cursor: pointer; padding: 0; }
.amp-tanca:hover { background: var(--linia); }
@media (prefers-reduced-motion: no-preference) {
  .ampliada[open] .amp-cos { animation: amp-entra 240ms cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes amp-entra { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
}

/* ---------- Mides ---------- */
@media (max-width: 1080px) {
  .dues, .calc, .model, .numeros-cap { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultats { position: static; }
  .peu-lloc .amplada { grid-template-columns: minmax(0, 1fr); }
  .peu-lloc .qui { justify-self: start; text-align: left; }
}
@media (max-width: 900px) {
  /* L'hora a l'esquerra; les pantalles i el text, a sota l'un de l'altre a la dreta. */
  .pas-app { grid-template-columns: 5em minmax(0, 1fr); }
  .pas-app .pas-text { grid-column: 2; }
}
@media (max-width: 720px) {
  .llegir { grid-template-columns: minmax(0, 1fr); }
  .marca .de { display: none; }
  /* L'idioma i sortir, sempre a dalt a la dreta; les seccions, a la línia de sota. */
  .eines { order: 2; }
  .navegacio nav { order: 3; flex-basis: 100%; }
  .amp-cos { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px 20px; }
  .amp-text { padding-right: 0; }
  .amp-tanca { top: 10px; right: 10px; }
}
@media (max-width: 640px) {
  .xifres-grans, .passos { grid-template-columns: minmax(0, 1fr); }
  .barra { grid-template-columns: 7.5em minmax(0, 1fr); }
  .barra .valors { grid-column: 2; text-align: left; }
  .tor-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tor-eix { padding-left: 0; }
  .navegacio nav a { padding: 8px 10px; }
  /* El circuit en una columna: l'hora, les pantalles (dues per fila) i el text. */
  .pas-app { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pas-app .pas-text { grid-column: 1; }
  .mini .ap-iphone { zoom: 0.36; }
}
@media (max-width: 380px) { .mini .ap-iphone { zoom: 0.32; } }
@media (max-width: 340px) { .mini .ap-iphone { zoom: 0.29; } }

/* L'enllaç per saltar la navegació: només es veu amb el teclat. */
.salta { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--boto); color: var(--boto-text); padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.salta:focus { top: 10px; }
.marca img { display: block; }

/* Les pantalles de l'app del visitant al web (la pàgina «L'app»). Surt del CSS de disseny/app-visitant/maquetes.html, les
   maquetes aprovades: les mateixes regles, amb les classes prefixades amb ap- perquè no xoquin amb les del web (.seccio,
   .fila, .peu, .boto…), i els atributs style de les maquetes convertits en classes (al final). Les pantalles conserven el
   seu sistema visual (tokens .app-clar i .app-fosc); la pàgina que les ensenya fa servir el del web (lloc.css). */

/* El marc no hereta el box-sizing del web: les mides de les maquetes són amb border-box. */
.ap-iphone, .ap-iphone * { box-sizing: border-box; }
.ap-iphone { --ap-bisell: #1B1B1E; --ap-ombra: 0 12px 32px rgba(30, 25, 15, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap-iphone { --ap-bisell: #2A2A2E; --ap-ombra: 0 12px 32px rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] .ap-iphone { --ap-bisell: #2A2A2E; --ap-ombra: 0 12px 32px rgba(0, 0, 0, .5); }

/* ---------- Tokens dels marcs (no canvien amb el tema del web) ---------- */
.app-clar{ --fons:#F6F3EC; --superficie:#FFFFFF; --text:#1C1B1A; --text-2:#5C5956; --linia:#E2DDD2; --marca:#2D4BD6; --sobre-marca:#FFFFFF; --marca-tenue:#E3E8FB; --marca-text:#2D4BD6; --a-punt:#176F36; --a-punt-tenue:#E6F6EA; --falta-poc:#8A5A00; --falta-poc-tenue:#FFF0CC; --falta-poc-ple:#F2B33D; --aturada:#B42318; --aturada-tenue:#FEE4E2; --gris:#6B6762; --gris-tenue:#ECE9E2; --ombra:0 2px 8px rgba(0,0,0,.08); --vora-targ:transparent; color-scheme:light }
.app-fosc{ --fons:#161513; --superficie:#211F1C; --text:#F3F0E9; --text-2:#B3AEA5; --linia:#363330; --marca:#4659E3; --sobre-marca:#FFFFFF; --marca-tenue:#2A3160; --marca-text:#A3B1FF; --a-punt:#5FD38A; --a-punt-tenue:#17352A; --falta-poc:#F5C14B; --falta-poc-tenue:#3D2E0A; --falta-poc-ple:#F5C14B; --aturada:#FF8A80; --aturada-tenue:#4A1C18; --gris:#9B968E; --gris-tenue:#2B2926; --ombra:none; --vora-targ:#363330; --bloq-fons:#0E0F13; --bloq-targeta:#2B2C33; --bloq-text:#FFFFFF; color-scheme:dark }

/* ---------- El marc d'iPhone ---------- */
.ap-iphone{ position:relative; width:410px; height:864px; background:var(--ap-bisell); border-radius:58px; padding:10px; box-shadow:var(--ap-ombra) }
.ap-pantalla{ position:relative; width:390px; height:844px; border-radius:48px; overflow:hidden; background:var(--fons); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Roboto,system-ui,sans-serif; font-size:17px; line-height:22px; -webkit-font-smoothing:antialiased }
.ap-illa{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:124px; height:36px; border-radius:20px; background:#000; z-index:6; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:#fff; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums }
.ap-illa.ap-ampla{ width:172px }
.ap-estat{ position:absolute; top:0; left:0; right:0; height:54px; display:flex; justify-content:space-between; align-items:center; padding:12px 28px 0 34px; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; z-index:5 }
.ap-estat .ap-ic-estat{ width:72px; height:14px }
.ap-inici{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:3px; background:var(--text); z-index:6 }
.ap-cos{ position:absolute; top:54px; left:0; right:0; bottom:0; overflow:hidden }
.ap-cos.ap-amb-tabs{ bottom:83px }
.ap-ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em; flex:none }
.ap-ic.ap-ple{ fill:currentColor; stroke:none }
.ap-tab{ font-variant-numeric:tabular-nums }

/* ---------- Components del kit ---------- */
.ap-kit-cap{ display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 16px; gap:8px }
.ap-kit-cap .ap-titol{ font-size:17px; font-weight:600; text-align:center; flex:1 }
.ap-logo{ width:32px; height:32px; border-radius:50%; background:var(--marca); color:var(--sobre-marca); display:flex; align-items:center; justify-content:center; flex:none }
.ap-logo .ap-ic{ width:18px; height:18px; stroke-width:2 }
.ap-logo.ap-gran{ width:56px; height:56px } .ap-logo.ap-gran .ap-ic{ width:30px; height:30px }
.ap-logo.ap-petit{ width:24px; height:24px } .ap-logo.ap-petit .ap-ic{ width:14px; height:14px }
.ap-enrere{ width:32px; height:32px; border-radius:50%; background:var(--superficie); border:1px solid var(--linia); display:flex; align-items:center; justify-content:center; flex:none }
.ap-enrere .ap-ic{ width:20px; height:20px }
.ap-buit32{ width:32px; flex:none }
.ap-avatars{ display:flex; flex:none }
.ap-avatars .ap-av{ width:28px; height:28px; font-size:12px; border:2px solid var(--fons) }
.ap-avatars .ap-av + .ap-av{ margin-left:-8px }
.ap-av{ width:32px; height:32px; border-radius:50%; background:var(--marca-tenue); color:var(--marca-text); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none }
.ap-tabs{ position:absolute; left:0; right:0; bottom:0; height:83px; background:var(--superficie); border-top:1px solid var(--linia); display:flex; justify-content:space-around; padding:8px 12px 0; z-index:4 }
.ap-tabs .ap-t{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:500; color:var(--text-2); width:90px; position:relative }
.ap-tabs .ap-t .ap-ic{ width:26px; height:26px }
.ap-tabs .ap-t.ap-activa{ color:var(--marca-text) }
.ap-tabs .ap-t .ap-badge{ position:absolute; top:-4px; left:calc(50% + 6px); min-width:18px; height:18px; border-radius:9px; background:var(--aturada); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px }
.ap-sub{ font-size:15px; line-height:20px; color:var(--text-2); text-align:center; padding:2px 16px 10px }
.ap-context{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 16px 8px; font-size:12px; line-height:16px; color:var(--text-2); white-space:nowrap }
.ap-pill{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:999px; background:var(--marca-tenue); color:var(--marca-text); font-size:12px; font-weight:600; white-space:nowrap }
.ap-pill.ap-gris{ background:var(--gris-tenue); color:var(--gris) }
.ap-filtres{ display:flex; gap:6px; padding:2px 16px 8px; overflow:hidden; white-space:nowrap }
.ap-filtre{ height:30px; padding:0 10px; border-radius:999px; border:1px solid var(--linia); background:var(--superficie); font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:5px; flex:none }
.ap-filtre.ap-on{ background:var(--marca); color:var(--sobre-marca); border-color:var(--marca) }
.ap-seccio{ padding:10px 16px 4px; font-size:12px; line-height:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2) }
.ap-zona{ padding:8px 16px 4px; font-size:12px; line-height:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2) }
.ap-targ{ margin:0 16px; background:var(--superficie); border-radius:16px; box-shadow:var(--ombra); border:1px solid var(--vora-targ) }
.ap-xip{ display:inline-flex; align-items:center; gap:4px; height:18px; padding:0 6px; border-radius:999px; font-size:11.5px; line-height:1; font-weight:600; background:var(--gris-tenue); color:var(--gris); white-space:nowrap; vertical-align:middle }
.ap-xip .ap-ic{ width:12px; height:12px; stroke-width:2 }
.ap-xip.ap-marca{ background:var(--marca-tenue); color:var(--marca-text) }
.ap-xip.ap-verd{ background:var(--a-punt-tenue); color:var(--a-punt) }
.ap-xip.ap-ambre{ background:var(--falta-poc-tenue); color:var(--falta-poc) }
.ap-xip.ap-vermell{ background:var(--aturada-tenue); color:var(--aturada) }
.ap-xip.ap-gran{ height:24px; font-size:12px; padding:0 9px } .ap-xip.ap-gran .ap-ic{ width:14px; height:14px }
.ap-xips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px }
.ap-fila-atr{ display:flex; align-items:center; gap:10px; padding:5px 16px; background:var(--superficie); border-top:1px solid var(--linia) }
.ap-fila-atr:first-child{ border-top:0 }
.ap-fila-atr .ap-esq{ flex:1; min-width:0 }
.ap-fila-atr .ap-nom{ font-size:17px; line-height:22px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ap-fila-atr .ap-dre{ text-align:right; flex:none }
.ap-fila-atr .ap-hora{ font-size:22px; line-height:26px; font-weight:600; font-variant-numeric:tabular-nums }
.ap-fila-atr .ap-quan{ font-size:12px; line-height:14px; color:var(--text-2) }
.ap-fila-atr .ap-hora.ap-gris{ color:var(--gris) }
.ap-llista .ap-item{ display:flex; align-items:center; gap:12px; padding:0 16px; height:50px; border-top:1px solid var(--linia) }
.ap-llista .ap-item:first-child{ border-top:0 }
.ap-item .ap-nom{ font-weight:600 } .ap-item .ap-det{ font-size:13px; line-height:16px; color:var(--text-2) }
.ap-item .ap-dreta{ margin-left:auto; font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:2px; white-space:nowrap }
.ap-item .ap-dreta .ap-ic{ width:18px; height:18px }
.ap-item.ap-fora .ap-nom,.ap-item.ap-fora .ap-det{ color:var(--gris) } .ap-item.ap-fora .ap-av{ background:var(--gris-tenue); color:var(--gris) }
.ap-boto{ display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border-radius:12px; font-weight:600; font-size:17px; margin:0 16px }
.ap-boto .ap-ic{ width:20px; height:20px }
.ap-boto.ap-ple{ background:var(--marca); color:var(--sobre-marca) }
.ap-boto.ap-buit{ border:1.5px solid var(--linia); color:var(--text); background:var(--superficie) }
.ap-boto.ap-inactiu{ background:var(--gris-tenue); color:var(--gris) }
.ap-boto.ap-vermell{ color:var(--aturada); height:44px }
.ap-boto.ap-petit{ height:40px; font-size:15px; margin:0 }
.ap-fix{ position:absolute; left:0; right:0; bottom:0; padding:10px 0 30px; background:var(--fons); border-top:1px solid var(--linia); z-index:3 }
.ap-fix .ap-peuet{ font-size:12px; line-height:16px; color:var(--text-2); text-align:center; padding:6px 16px 0 }
.ap-foto{ height:64px; background:var(--marca-tenue); position:relative; overflow:hidden }
.ap-foto > .ap-ic{ position:absolute; right:14px; top:4px; width:60px; height:60px; color:var(--marca-text); opacity:.25; stroke-width:1 }
.ap-foto .ap-enrere{ position:absolute; left:16px; top:8px }
.ap-foto .ap-etiq{ position:absolute; left:60px; top:14px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--marca-text); opacity:.8 }
.ap-fitxa-cap{ padding:8px 16px 6px }
.ap-fitxa-cap .ap-nom{ font-size:24px; line-height:26px; font-weight:700 }
.ap-fitxa-cap .ap-nom small{ font-size:15px; font-weight:400; color:var(--text-2) }
.ap-fitxa-cap .ap-linia{ font-size:13px; line-height:18px; color:var(--text-2); margin-top:4px }
.ap-rows .ap-r{ display:flex; align-items:center; gap:12px; height:34px; padding:0 14px; border-top:1px solid var(--linia); font-size:16px }
.ap-rows .ap-r:first-child{ border-top:0 }
.ap-rows .ap-r .ap-det{ margin-left:auto; font-size:12px; color:var(--text-2); white-space:nowrap }
.ap-rows .ap-r.ap-off{ color:var(--gris) }
.ap-check{ width:24px; height:24px; border-radius:7px; background:var(--marca); color:#fff; display:flex; align-items:center; justify-content:center; flex:none }
.ap-check .ap-ic{ width:16px; height:16px; stroke-width:2.5 }
.ap-check.ap-off{ background:transparent; border:1.5px solid var(--linia) }
.ap-toggle{ width:46px; height:28px; border-radius:14px; background:var(--marca); position:relative; flex:none; margin-left:auto }
.ap-toggle::after{ content:""; position:absolute; top:2px; right:2px; width:24px; height:24px; border-radius:50%; background:#fff }
.ap-targ-text{ padding:8px 14px }
.ap-targ-text .ap-cap{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:16px }
.ap-targ-text .ap-cap .ap-ic{ width:20px; height:20px; color:var(--marca-text) }
.ap-targ-text p{ margin:4px 0 0; font-size:13px; line-height:17px; color:var(--text-2) }
.ap-targ-text p.ap-forta{ color:var(--text); font-weight:600 }
.ap-segment{ display:flex; gap:8px; margin:0 16px }
.ap-segment .ap-op{ flex:1; border:1.5px solid var(--linia); border-radius:12px; padding:5px 10px; background:var(--superficie) }
.ap-segment .ap-op.ap-on{ border-color:var(--marca); background:var(--marca-tenue) }
.ap-segment .ap-op .ap-q{ font-size:12px; line-height:14px; color:var(--text-2) }
.ap-segment .ap-op .ap-h{ font-size:20px; line-height:24px; font-weight:700; font-variant-numeric:tabular-nums }
.ap-segment .ap-op .ap-h small{ display:block; font-size:12px; line-height:14px; font-weight:500; color:var(--text-2) }
.ap-segment .ap-op.ap-on .ap-q,.ap-segment .ap-op.ap-on .ap-h small{ color:var(--marca-text) }
.ap-linia-petita{ font-size:12px; line-height:16px; color:var(--text-2); padding:2px 16px 0 }
.ap-resultat{ margin:6px 16px 0; background:var(--marca-tenue); border-radius:12px; padding:6px 12px }
.ap-resultat .ap-l{ display:flex; align-items:baseline; gap:8px; font-size:15px; line-height:20px }
.ap-resultat .ap-l b{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; min-width:62px }
.ap-resultat .ap-n{ font-size:12px; line-height:16px; color:var(--marca-text); margin-top:2px }
.ap-avis-gris{ margin:8px 16px 0; background:var(--gris-tenue); border-radius:12px; padding:10px 12px; display:flex; gap:10px; font-size:14px; line-height:19px; color:var(--text) }
.ap-avis-gris .ap-ic{ width:22px; height:22px; color:var(--gris); margin-top:1px }
.ap-opcions{ display:flex; flex-direction:column; gap:8px; padding:8px 14px 12px }
.ap-opcions .ap-op{ border:1.5px solid var(--linia); border-radius:12px; padding:8px 12px; display:flex; align-items:center; gap:10px }
.ap-opcions .ap-op.ap-on{ border-color:var(--marca); background:var(--marca-tenue) }
.ap-opcions .ap-radio{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--linia); flex:none }
.ap-opcions .ap-op.ap-on .ap-radio{ border:7px solid var(--marca); background:#fff }
.ap-opcions .ap-t{ font-weight:600; font-size:16px } .ap-opcions .ap-d{ font-size:13px; color:var(--text-2); line-height:16px }
.ap-banner{ margin:8px 16px 0; background:var(--a-punt-tenue); color:var(--a-punt); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px }
.ap-banner .ap-ic{ width:20px; height:20px; stroke-width:2 }
.ap-toast{ position:absolute; left:16px; right:16px; bottom:96px; background:var(--text); color:var(--fons); border-radius:12px; padding:12px 14px; font-size:15px; display:flex; justify-content:space-between; align-items:center; z-index:5 }
.ap-toast b{ color:#A3B1FF; font-weight:600 }
.ap-sortir{ position:absolute; left:0; right:0; bottom:100px; text-align:center; font-size:13px; color:var(--aturada); display:flex; justify-content:center; align-items:center; gap:4px }
.ap-peu-app{ font-size:12px; line-height:16px; color:var(--text-2); text-align:center; padding:10px 24px 0 }
.ap-text-app{ font-size:15px; line-height:20px; padding:12px 16px 0 }
.ap-text-app.ap-sec{ color:var(--text-2) }
/* Tiquet */
.ap-tiquet{ position:relative; margin:12px 16px 0; background:var(--superficie); border-radius:16px; box-shadow:var(--ombra); border:1px solid var(--vora-targ) }
.ap-tiquet .ap-dalt{ padding:14px 16px 12px; display:flex; justify-content:space-between; gap:8px }
.ap-tiquet .ap-dalt .ap-num{ font-size:12px; color:var(--text-2); white-space:nowrap; padding-top:4px }
.ap-hora-gran{ font-size:34px; line-height:41px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.ap-tiquet .ap-qui{ font-size:15px; line-height:20px; margin:2px 0 6px }
.ap-tiquet .ap-extra{ font-size:13px; line-height:18px; color:var(--text-2); padding:0 16px 10px; display:flex; align-items:center; gap:6px }
.ap-tiquet .ap-extra .ap-ic{ width:16px; height:16px }
.ap-tiquet .ap-extra.ap-ok{ color:var(--a-punt) }
.ap-perf{ position:relative; height:0; border-top:2px dashed var(--linia); margin:0 14px }
.ap-perf::before,.ap-perf::after{ content:""; position:absolute; top:-9px; width:16px; height:16px; border-radius:50%; background:var(--fons); border:1px solid var(--vora-targ) }
.ap-perf::before{ left:-23px } .ap-perf::after{ right:-23px }
.ap-zona-qr{ padding:14px 16px 14px; text-align:center }
.ap-zona-qr .ap-caixa{ width:220px; height:200px; margin:0 auto; border-radius:12px; background:var(--gris-tenue); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--gris) }
.ap-zona-qr .ap-caixa .ap-ic{ width:28px; height:28px }
.ap-zona-qr .ap-caixa.ap-alerta{ color:var(--aturada); background:var(--aturada-tenue) }
.ap-zona-qr .ap-caixa.ap-alerta .ap-ic{ width:36px; height:36px }
.ap-zona-qr .ap-caixa .ap-t{ font-size:15px; font-weight:600; line-height:20px; color:inherit }
.ap-anell{ position:relative; width:96px; height:96px }
.ap-anell svg{ width:96px; height:96px; transform:rotate(-90deg) }
.ap-anell .ap-c{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums }
.ap-qr{ width:240px; height:240px; margin:0 auto; background:#fff; border:1px solid var(--linia); border-radius:12px; padding:12px }
.ap-qr svg{ width:100%; height:100%; display:block; fill:#000 }
.ap-gran-qui{ font-size:22px; line-height:28px; font-weight:600; margin-bottom:8px }
.ap-canvia{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--text-2); margin-top:8px }
.ap-punt{ width:8px; height:8px; border-radius:50%; background:var(--a-punt); animation:parpelleig 1s steps(2,start) infinite }
@keyframes parpelleig{ to{ opacity:.25 } }
@media (prefers-reduced-motion: reduce){ .ap-punt{ animation:none } }
.ap-zona-qr .ap-n1{ font-size:15px; line-height:20px; font-weight:600; margin-top:10px }
.ap-zona-qr .ap-n2{ font-size:13px; line-height:18px; color:var(--text-2) }
.ap-zona-qr .ap-n3{ font-size:12px; line-height:16px; color:var(--text-2); margin-top:8px }
.ap-botons{ display:flex; flex-direction:column; gap:6px; margin-top:12px }
.ap-mini-parc{ margin:12px 16px 0; background:var(--superficie); border-radius:16px; box-shadow:var(--ombra); border:1px solid var(--vora-targ); padding:10px 14px; display:flex; align-items:center; gap:10px }
.ap-mini-parc .ap-q{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); line-height:14px }
.ap-mini-parc .ap-t{ font-size:14px; line-height:18px; font-weight:500 }
.ap-mini-parc .ap-veure{ margin-left:auto; color:var(--marca-text); font-weight:600; font-size:15px }
/* Missatge del parc */
.ap-parc-cap{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 16px 8px; position:relative }
.ap-parc-cap .ap-q{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2) }
.ap-parc-cap .ap-tanca{ position:absolute; right:16px; top:8px }
.ap-parc-titol{ font-size:28px; line-height:34px; font-weight:700; letter-spacing:-.01em; padding:4px 16px 12px }
.ap-oferta{ margin:0 16px 12px; background:var(--superficie); border-radius:16px; box-shadow:var(--ombra); border:1px solid var(--vora-targ); padding:14px 16px }
.ap-oferta .ap-cap{ display:flex; align-items:center; gap:12px }
.ap-oferta .ap-ico{ width:44px; height:44px; border-radius:50%; background:var(--marca-tenue); color:var(--marca-text); display:flex; align-items:center; justify-content:center; flex:none }
.ap-oferta .ap-ico .ap-ic{ width:24px; height:24px }
.ap-oferta .ap-t{ font-size:17px; line-height:22px; font-weight:600 }
.ap-oferta .ap-m{ font-size:14px; line-height:18px; color:var(--text-2) }
.ap-oferta p{ margin:8px 0 10px; font-size:15px; line-height:20px }
.ap-bloc-parc{ margin:0 16px; background:var(--superficie); border-radius:16px; box-shadow:var(--ombra); border:1px solid var(--vora-targ); padding:10px 14px }
.ap-bloc-parc .ap-l{ display:flex; align-items:center; gap:10px; font-size:15px; line-height:20px }
.ap-bloc-parc .ap-l + .ap-l{ margin-top:6px; padding-top:6px; border-top:1px solid var(--linia); color:var(--marca-text); font-weight:600; font-size:14px }
.ap-bloc-parc .ap-proc{ font-size:11px; line-height:14px; color:var(--text-2); margin-top:6px }
/* Bloc gris d'esgotades */
.ap-bloc-estat{ margin:8px 16px 0; background:var(--gris-tenue); border-radius:16px; padding:12px 14px }
.ap-bloc-estat .ap-cap{ display:flex; align-items:center; gap:8px; font-size:17px; line-height:22px; font-weight:600 }
.ap-bloc-estat .ap-cap .ap-ic{ width:22px; height:22px; color:var(--gris) }
.ap-bloc-estat p{ margin:4px 0 0; font-size:13px; line-height:18px; color:var(--text-2) }
.ap-bloc-estat .ap-onada{ display:flex; align-items:baseline; gap:10px; margin-top:6px }
.ap-bloc-estat .ap-onada .ap-q{ font-size:13px; color:var(--text-2) }
.ap-bloc-estat .ap-onada .ap-h{ font-size:34px; line-height:40px; font-weight:700; font-variant-numeric:tabular-nums }
.ap-bloc-estat .ap-onada .ap-d{ font-size:13px; color:var(--text-2) }
.ap-fila-toggle{ display:flex; align-items:center; gap:10px; margin:8px 16px 0; background:var(--superficie); border-radius:12px; padding:0 14px; height:46px; font-size:16px; font-weight:500; box-shadow:var(--ombra); border:1px solid var(--vora-targ) }
.ap-fila-toggle .ap-ic{ width:20px; height:20px; color:var(--marca-text) }
.ap-prop{ display:flex; align-items:center; gap:10px; padding:0 14px; height:48px; border-top:1px solid var(--linia); font-size:16px; font-weight:600 }
.ap-prop:first-child{ border-top:0 }
.ap-prop .ap-d{ margin-left:auto; text-align:right; font-weight:400 }
.ap-prop .ap-d b{ font-size:18px; font-weight:600; font-variant-numeric:tabular-nums }
.ap-prop .ap-d small{ display:block; font-size:12px; line-height:14px; color:var(--text-2) }
/* Línia de temps de les reserves */
.ap-linia-temps{ padding:4px 16px 0 }
.ap-pas{ display:flex; gap:12px }
.ap-pas .ap-fil{ width:16px; display:flex; flex-direction:column; align-items:center; flex:none }
.ap-pas .ap-fil .ap-dot{ width:12px; height:12px; border-radius:50%; background:var(--marca); margin-top:16px; flex:none }
.ap-pas .ap-fil .ap-ln{ width:2px; flex:1; background:var(--linia) }
.ap-pas .ap-cont{ flex:1; min-width:0 }
.ap-res-card{ background:var(--superficie); border-radius:16px; box-shadow:var(--ombra); border:1px solid var(--vora-targ); padding:10px 14px; display:flex; gap:12px; margin-bottom:0 }
.ap-res-card .ap-h{ font-size:26px; line-height:30px; font-weight:700; font-variant-numeric:tabular-nums; width:78px; flex:none }
.ap-res-card .ap-nom{ font-size:17px; line-height:22px; font-weight:600 }
.ap-res-card .ap-qui{ font-size:14px; line-height:18px; color:var(--text-2); display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.ap-res-card .ap-num{ margin-left:auto; font-size:12px; color:var(--text-2); white-space:nowrap }
.ap-res-card .ap-segon{ margin-top:6px; padding-top:6px; border-top:1px solid var(--linia); font-size:13px; line-height:17px; color:var(--text-2) }
.ap-res-card .ap-segon b{ color:var(--text); font-variant-numeric:tabular-nums }
.ap-connector{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); height:28px; padding-left:0 }
.ap-connector .ap-ic{ width:16px; height:16px }
/* Full modal */
.ap-vel{ position:absolute; inset:0; background:rgba(20,16,10,.42); z-index:7 }
.ap-full{ position:absolute; left:0; right:0; bottom:0; background:var(--superficie); border-radius:24px 24px 0 0; padding:10px 20px 44px; z-index:8; color:var(--text) }
.ap-full .ap-grab{ width:36px; height:5px; border-radius:3px; background:var(--linia); margin:0 auto 14px }
.ap-full .ap-t{ font-size:22px; line-height:28px; font-weight:600 }
.ap-full .ap-q{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin-top:12px }
.ap-full .ap-h{ font-size:44px; line-height:48px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.ap-full .ap-h small{ font-size:15px; font-weight:400; color:var(--text-2); text-decoration:line-through; letter-spacing:0; margin-left:8px }
.ap-full .ap-m{ font-size:15px; line-height:20px; margin-top:2px }
.ap-full .ap-m.ap-sec{ color:var(--text-2) }
.ap-full .ap-compte{ display:flex; align-items:baseline; gap:10px; margin:14px 0 }
.ap-full .ap-compte b{ font-size:44px; line-height:48px; font-weight:700; color:var(--falta-poc); font-variant-numeric:tabular-nums }
.ap-full .ap-compte span{ font-size:13px; color:var(--text-2) }
.ap-full .ap-boto{ margin:0 }
.ap-full .ap-boto + .ap-boto{ margin-top:8px }
.ap-full .ap-nota-f{ font-size:12px; line-height:16px; color:var(--text-2); text-align:center; margin-top:10px }
/* Pantalla de bloqueig */
.ap-bloq{ background:var(--bloq-fons) radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 1.6px) 0 0/14px 14px; color:var(--bloq-text) }
.ap-bloq .ap-estat{ justify-content:flex-end; color:#fff }
.ap-bloq .ap-inici{ background:#fff }
.ap-bloq .ap-data{ position:absolute; top:88px; left:0; right:0; text-align:center; font-size:20px; line-height:24px; font-weight:500; opacity:.9 }
.ap-bloq .ap-hora{ position:absolute; top:112px; left:0; right:0; text-align:center; font-size:80px; line-height:92px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.ap-notif{ position:absolute; left:14px; right:14px; top:250px; background:var(--bloq-targeta); border-radius:22px; padding:12px 14px; display:flex; gap:12px }
.ap-notif .ap-icona{ width:38px; height:38px; border-radius:10px; background:var(--marca); color:#fff; display:flex; align-items:center; justify-content:center; flex:none }
.ap-notif .ap-icona .ap-ic{ width:22px; height:22px; stroke-width:2 }
.ap-notif .ap-c{ flex:1; min-width:0 }
.ap-notif .ap-app{ display:flex; justify-content:space-between; font-size:13px; line-height:16px; opacity:.72; margin-bottom:2px }
.ap-notif .ap-tt{ font-size:15px; line-height:20px; font-weight:600 }
.ap-notif .ap-bb{ font-size:15px; line-height:20px; opacity:.92 }
.ap-accions{ position:absolute; left:14px; right:14px; display:flex; flex-direction:column; gap:8px }
.ap-accions .ap-a{ height:46px; border-radius:16px; background:var(--bloq-targeta); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:500 }
.ap-accions .ap-a.ap-destr{ color:#FF8A80 }
.ap-bloq .ap-cercles{ position:absolute; bottom:40px; left:0; right:0; display:flex; justify-content:space-between; padding:0 44px }
.ap-bloq .ap-cercles span{ width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center }
.ap-bloq .ap-cercles .ap-ic{ width:24px; height:24px; color:#fff }
.ap-live{ position:absolute; left:14px; right:14px; bottom:118px; background:var(--bloq-targeta); border-radius:24px; padding:14px 16px; display:flex; align-items:center; gap:14px }
.ap-live .ap-c{ flex:1; min-width:0 }
.ap-live .ap-tt{ font-size:17px; line-height:22px; font-weight:600 }
.ap-live .ap-bb{ font-size:15px; line-height:20px; opacity:.85; font-variant-numeric:tabular-nums }
.ap-live .ap-anell{ width:64px; height:64px } .ap-live .ap-anell svg{ width:64px; height:64px }
.ap-live .ap-anell .ap-c{ font-size:13px; font-weight:700; color:#fff; line-height:14px; text-align:center }
.ap-live .ap-sota{ font-size:11px; opacity:.8; text-align:center; margin-top:4px; white-space:nowrap }

/* ---------- Els atributs style de les maquetes, com a classes ---------- */
.ap-targ.ap-targ-qr{ padding:12px 12px 10px; text-align:center }
.ap-qr.ap-qr-grup{ width:200px; height:200px; padding:8px; border:0 }
.ap-qr-text{ font-size:13px; line-height:17px; color:var(--text-2); padding:6px 8px 0 }
.ap-alcada{ font-size:14px; color:var(--text-2) }
.ap-r.ap-off .ap-alcada{ color:inherit }
.ap-titol-sub{ font-size:12px; font-weight:400; color:var(--text-2); line-height:14px }
.ap-enllac{ color:var(--marca-text); font-weight:600 }
.ap-ic.ap-ic18{ width:18px; height:18px; stroke-width:2 }
.ap-caixa.ap-baixa{ height:150px }
.ap-hora-gran.ap-gris{ color:var(--gris) }
.ap-context.ap-centrat{ justify-content:center; gap:8px }
.ap-flex1{ flex:1; min-width:0 }
.ap-res-card.ap-wrap{ flex-wrap:wrap }
.ap-res-card .ap-segon{ flex-basis:100% }
.ap-opcions.ap-px0{ padding-left:0; padding-right:0 }
.ap-accions.ap-top376{ top:376px }
.ap-accions.ap-top356{ top:356px }
.ap-mt8{ margin-top:8px } .ap-mt10{ margin-top:10px } .ap-mb14{ margin-bottom:14px }
.ap-pt4{ padding-top:4px } .ap-pt10{ padding-top:10px } .ap-pt12{ padding-top:12px } .ap-pt16{ padding-top:16px } .ap-pb0{ padding-bottom:0 }

.ap-simbols{ position:absolute; width:0; height:0 }