body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: none;
}
:focus-visible {
  outline: 2px solid var(--color-primari-text);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .marc-full { animation: none; } }
:root {

  --color-primari: #2456E6;
  --color-primari-text: #2456E6;
  
  --text-sobre-primari: #FFFFFF;
  --color-secundari: #B87E00;
  --color-secundari-text: #8F5F00;
  --color-terciari: #C22417;
  --fons: #EEF2F7;
  --fons-elevat: #FFFFFF;
  --fons-suau: #FBFCFD;
  
  --esquelet: #D3D8E0;
  
  --fons-fila-hover: #E4EAF3;
  --text: #17202B;
  --text-suau: #5C6572;
  --text-micro: #616B77;
  --vora: #D7DEE8;
  --vora-suau: #F0F3F6;
  
  --ombra-sobre-imatge: 0 0 0 1px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.30);
  
  --vel-retall: rgb(0 0 0 / 0.55);
  --semafor-verd: #1F8A4C;
  
  --semafor-groc: #CB5800;
  --semafor-vermell: #C22417;

  

  --semafor-verd-camp: #22C55E;
  --semafor-verd-tinta: #04220F;    
  --semafor-verd-vora: #15803D;     
  
  --semafor-groc-camp: #FB923C;
  --semafor-groc-tinta: #1A1400;    
  --semafor-groc-vora: #B05200;     
  --semafor-vermell-camp: #DC2626;
  --semafor-vermell-tinta: #FFFFFF; 
  --semafor-vermell-vora: #9A1C11;  

  
  
  --avis-taronja-camp: var(--semafor-groc-camp);
  --avis-taronja-tinta: var(--semafor-groc-tinta);
  
  --alerta-camp: #FFDD57;
  --alerta-tinta: var(--semafor-groc-tinta);
  --resplandor: none;
  --fons-marca: #06122D;
  --text-sobre-marca: #FFFFFF;
  
  --fons-plafo-clar: #FFFFFF;
  
  --text-sobre-plafo-clar: #17202B;
  --marca-daurat: #FEC403;
  
  --color-terciari-boto: #C22417;
  
  
  --cat-turquesa: #037187;
  --cat-cian: #015584;
  --cat-cel: #0055C7;
  --cat-blau: #0248FD;
  --cat-indigo: #0B02D5;
  --cat-lavanda: #5A03E8;
  --cat-violeta: #8401AC;
  --cat-orquidia: #940079;
  --cat-magenta: #790152;
  --cat-rosa: #BD006F;
  
  --cat-verd: #067906;
  --cat-groc: #505F04;
  --cat-taronja: #693F04;
  
  --cat-llima: #053D00;
  
  --cat-sobre: #FFFFFF;
  
  --jornada-tinta: #06122D;
  --tanca-vora-activa: #06122D;
  
  color-scheme: light;
  
  --elevacio-carta: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.07);
  
  --glow-tram: 0%;

}
@media (prefers-color-scheme: dark) {
:root {

  --color-primari: #2456E6;
  --color-primari-text: #4D8DFF;
  
  --text-sobre-primari: #FFFFFF;
  --color-secundari: #FEC403;
  --color-secundari-text: #FEC403;
  --color-terciari: #E85D50;
  
  --fons: #03060E;
  --fons-elevat: #0F1627;
  --fons-suau: #0F1729;
  --esquelet: #213050;
  --fons-fila-hover: #1A2540;
  --text: #E6EAF0;
  --text-suau: #7E8A9B;
  --text-micro: #7C8798;
  --vora: #26314A;
  --vora-suau: #1E2740;
  
  --ombra-sobre-imatge: 0 0 0 1px rgb(255 255 255 / 0.28), 0 1px 3px rgb(0 0 0 / 0.60);
  --vel-retall: rgb(0 0 0 / 0.55);
  --semafor-verd: #34C173;
  
  --semafor-groc: #FB923C;
  --semafor-vermell: #E85D50;

  
  --semafor-verd-camp: #34C173;
  --semafor-verd-tinta: #04220F;    
  --semafor-verd-vora: #34C173;     
  --semafor-groc-camp: #FB923C;
  --semafor-groc-tinta: #1A1400;    
  --semafor-groc-vora: #FB923C;     
  --semafor-vermell-camp: #E85D50;
  --semafor-vermell-tinta: #2A0500; 
  --semafor-vermell-vora: #E85D50;  
  
  
  --avis-taronja-camp: var(--semafor-groc-camp);
  --avis-taronja-tinta: var(--semafor-groc-tinta);
  
  --alerta-camp: #FFDD57;
  --alerta-tinta: var(--semafor-groc-tinta);
  
  --resplandor: 0 0 10px rgba(77, 141, 255, 1);
  --fons-marca: #06122D;
  --text-sobre-marca: #FFFFFF;
  
  --fons-plafo-clar: #FFFFFF;
  
  --text-sobre-plafo-clar: #17202B;
  --marca-daurat: #FEC403;
  --color-terciari-boto: #C22417;
  
  
  
  --cat-llima: #14C903;
  --cat-turquesa: #29D4FF;
  --cat-cian: #02A8FD;
  --cat-cel: #86B5FE;
  --cat-blau: #7594E0;
  --cat-indigo: #7176FE;
  --cat-lavanda: #8E78BF;
  --cat-violeta: #D976FE;
  --cat-orquidia: #FE4ED9;
  --cat-magenta: #FD02A7;
  --cat-rosa: #FE71B8;
  
  --cat-verd: #0AF50A;
  --cat-groc: #F7F734;
  --cat-taronja: #F5970A;
  --cat-sobre: #050810;
  
  --jornada-tinta: #FEC403;
  --tanca-vora-activa: #FEC403;
  color-scheme: dark;
  
  --elevacio-carta: 0 0 #0000;
  
  --glow-tram: 55%;

--trama-fons: rgba(201, 214, 236, 0.05);
--vora-sobre-fons: #5A6A8A;
}
}


@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/web/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/web/fonts/barlow-condensed-700.woff2') format('woff2');
}
:root {
  color-scheme: light dark;
  --familia-marcador-web: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  
  --vora-sobre-navy: #586E99;
  --vora-sobre-or: #5A490A;
  
  --vora-sobre-fons: #7C8798;
  
  --marca-text-suau: #C9D6EC;
  --marca-text-micro: #93A6C6;
  --daurat-text-suau: #4A3B04;
  
  --marca-franja: #040C1E;
  
  --trama-fons: rgba(6, 18, 45, 0.055);
  
  --navy-linia: #17284A;
  
  --marca-enllac: #4D8DFF;
}
* { box-sizing: border-box; }

body { margin: 0; background: var(--fons); color: var(--text);
  font-size: 1rem; line-height: 1.6; }
.embolcall { max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }


.descarrega .entradeta { color: var(--text-suau); max-width: 34rem; }

.insignies { display: grid; gap: .75rem; margin: 1.5rem 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); max-width: 32rem; }
.insignia { display: inline-flex; align-items: center; gap: .75rem;
  min-width: 13.5rem; padding: .6875rem 1.125rem; border-radius: 8px;
  background: var(--fons-marca); color: var(--text-sobre-marca);
  border: 1px solid var(--vora-sobre-navy); text-decoration: none; }

.insignia-viva:hover { border-color: var(--marca-daurat); }
.insignia-viva img { display: block; height: 2.75rem; width: auto; }
.insignia-text { display: grid; line-height: 1.15; }
.insignia-sobre { font-size: .75rem; color: var(--marca-text-suau); }
.insignia-nom { font-family: var(--familia-marcador-web); font-size: 1.375rem;
  font-weight: 600; letter-spacing: .01em; }


.insignia-apagada { background: var(--fons-elevat); color: var(--text);
  border-style: dashed; border-width: 2px; border-color: var(--vora-sobre-fons); }
.insignia-apagada .insignia-sobre { color: var(--text-suau); }
.insignia-aviat { margin-left: auto; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-suau); white-space: nowrap; }
.insignia:focus-visible { outline: 3px solid var(--color-primari); outline-offset: 3px; }
.descarrega .ja-la-tens { margin: 1.5rem 0 .75rem; color: var(--text-suau); }

.entrada { margin-bottom: 1.75rem; }
.entrada h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .2rem; }
.entrada .meta, .meta { color: var(--text-suau); font-size: .8125rem; }
nav.idiomes { display: flex; gap: 1rem; justify-content: flex-end; padding: 1rem 1.25rem 0; }
footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--vora);
  font-size: .9rem; color: var(--text-suau); }
footer a { margin-right: 1rem; }

.logo-peu { border-radius: 7px; vertical-align: middle; display: block; }

.placa-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fons-marca); border-radius: 9px; padding: 5px;
  margin-right: .75rem; vertical-align: middle;
}
label { display: block; margin-bottom: .9rem; }
label span { display: block; margin-bottom: .25rem; font-size: .9rem; }

a { color: var(--color-primari-text); }

input, textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--text-micro);
  border-radius: 7px; background: var(--fons-elevat); color: var(--text); font: inherit; }

button { border: 1px solid var(--vora); font: inherit; cursor: pointer; }


.numero { font-family: ui-monospace, monospace; font-weight: 500; }
.esquer { position: absolute !important; opacity: 0 !important; height: 0 !important;
  width: 0 !important; overflow: hidden !important; z-index: -1 !important; pointer-events: none; }
.avis { margin: .5rem 0 0; color: var(--text-suau); }



h1 { font-family: var(--familia-marcador-web); font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.1; margin: 0 0 .625rem; }

h2 { margin: .875rem 0 1.25rem; font-weight: 600; color: var(--text);
  font-family: var(--familia-marcador-web); text-transform: uppercase;
  font-size: clamp(25px, 3vw, 36px); line-height: 1.15; letter-spacing: .03em; }
.regla { width: 3rem; height: 3px; background: var(--marca-daurat); border: 0; margin: 0; }
.micro { font-family: ui-monospace, monospace; font-weight: 500; font-size: 11px;
  line-height: 1; letter-spacing: .16em; text-transform: uppercase; margin: 0;
  color: var(--text-micro); }
.eix { max-width: 68rem; margin: 0 auto; padding: 0 2.5rem; }

body { background-image: radial-gradient(var(--trama-fons) 1px, transparent 1.4px); background-size: 22px 22px; }
@media (max-width: 30rem) { .eix { padding: 0 1.25rem; } }



.marca { background:
  radial-gradient(58rem 30rem at 82% 8%, rgba(254, 196, 3, 0.09), transparent 62%),
  radial-gradient(46rem 26rem at 8% 92%, rgba(36, 86, 230, 0.12), transparent 58%),
  radial-gradient(rgba(201, 214, 236, 0.05) 1px, transparent 1.4px),
  var(--fons-marca);
  background-size: auto, auto, 22px 22px;
  color: var(--marca-text-suau); }

.marca .micro { color: var(--marca-text-micro); }
.dalt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; }
.signatura { font-family: ui-monospace, monospace; font-weight: 600; font-size: 13px;
  line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--text-sobre-marca); }
.signatura b { color: var(--marca-daurat); font-weight: 600; }
.marca-logo { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none;
  border-radius: 4px; padding: 2px; }
.marca-logo img { border-radius: 7px; display: block; }
.marca-logo:focus-visible { outline: 3px solid var(--marca-daurat); outline-offset: 3px; }

.dalt nav { display: flex; gap: .5rem; align-items: center; font-family: ui-monospace, monospace;
  font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .14em; }
.dalt nav a { color: var(--marca-text-micro); text-decoration: none; padding: .5rem .3rem; border-radius: 2px; }
.dalt nav a:hover { color: var(--text-sobre-marca); }

.dalt nav [aria-current] { color: var(--marca-daurat); }
.dalt .app { color: var(--text-sobre-marca); border: 1px solid var(--vora-sobre-navy);
  padding: .55rem .875rem; margin-left: .5rem; }

.dalt .app:hover { filter: brightness(1.4); }


.heroi { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem;
  align-items: center; align-content: center; padding: 4rem 0 4.5rem;
  min-height: min(74svh, 46rem); }
@media (max-width: 48rem) {
  .heroi { grid-template-columns: minmax(0, 1fr) 240px; gap: 2.5rem; padding: 3rem 0 3.5rem; }
}
@media (max-width: 30rem) {
  .heroi { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0 2.75rem; }
}

.heroi:not(:has(img)) { grid-template-columns: 1fr; }
.heroi .rol { color: var(--marca-daurat); margin-bottom: 1.5rem; }

.marca h1 { color: var(--text-sobre-marca); font-size: clamp(36px, 6vw, 68px); line-height: 1.02; }

.heroi .regla { width: 5.5rem; height: 4px; }

.reclam { margin: 0 0 1.5rem; font-weight: 600; color: var(--text-sobre-marca);
  font-size: clamp(20px, 2.6vw, 29px); line-height: 1.3; letter-spacing: -.008em; max-width: 26ch; }

.descripcio { margin: 1.5rem 0 0; font-size: 17px; line-height: 1.65; color: var(--marca-text-suau); max-width: 34rem; }
.descripcio b { color: var(--text-sobre-marca); font-weight: 600; }

.descripcio a { color: var(--marca-enllac); }
.accions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.porta { display: inline-block; padding: .9375rem 1.75rem; border-radius: 4px; font-weight: 600; font-size: 1.0625rem;
  font-size: 15px; text-decoration: none; border: 1px solid transparent; }

.porta-or { background: var(--marca-daurat); color: var(--fons-marca); border-color: var(--fons-marca); }
.porta-or:hover { filter: brightness(1.08); }
.porta-buida { color: var(--text-sobre-marca); border-color: var(--vora-sobre-navy); }
.porta-buida:hover { border-color: var(--text-sobre-marca); }

.porta:focus-visible { outline: 3px solid var(--color-primari); outline-offset: 3px; }


.retrat { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 4px;
  border: 2px solid var(--marca-daurat);
  border-bottom: 3px solid var(--marca-daurat); }
@media (max-width: 30rem) { .retrat { aspect-ratio: 3 / 2; } }



.franja { background: var(--marca-franja); border-top: 1px solid var(--navy-linia);
  display: flex; align-items: center; gap: .75rem; padding: 0 2.5rem; }
@media (max-width: 30rem) { .franja { padding: 0 1.25rem; } }
.pista-cofre { flex: 1; overflow: hidden; padding: .875rem 0; }

@media (prefers-reduced-motion: no-preference) {
  .pista-cofre { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
                 mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%); }
}
.commuta-pista { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.commuta-pista:focus-visible { position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; white-space: normal; outline: 3px solid var(--marca-daurat);
  outline-offset: 2px; }
.pista { display: flex; gap: 2.25rem; white-space: nowrap; width: max-content;
  animation: llisca 44s linear infinite; }
.commuta-pista:checked ~ .pista { animation-play-state: paused; }
.pista span { font-family: ui-monospace, monospace; font-weight: 500; font-size: 12px;
  line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-text-micro); }

.pista span::after { content: '·'; margin-left: 2.25rem; color: var(--marca-text-micro); opacity: .55; }
@keyframes llisca { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.atura { display: inline-block; flex: none; margin-bottom: 0; font-family: ui-monospace, monospace; font-weight: 500;
  font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-sobre-marca); background: transparent; border: 1px solid var(--vora-sobre-navy);
  border-radius: 3px; padding: .4375rem .625rem; cursor: pointer; }
.atura:hover { border-color: var(--text-sobre-marca); }


@media (prefers-reduced-motion: reduce){
  .pista{animation:none;flex-wrap:wrap;white-space:normal;width:auto;gap:8px 24px}
  .pista span.repeticio{display:none}
  .commuta-pista{display:none}
  .atura{display:none}
}


.sec { padding: 4.5rem 0; border-bottom: 1px solid var(--vora); }
@media (max-width: 30rem) { .sec { padding: 3rem 0; } }
.sec .regla { margin-bottom: 2.75rem; }




.metode { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem; }
.blocm { background: var(--fons-elevat); padding: 1.75rem;
  border: 1px solid var(--vora); border-radius: 10px; }
.blocm::before { content: ""; display: block; width: 2.25rem; height: 3px;
  background: var(--marca-daurat); margin-bottom: 1rem; }

.blocm { transition: border-color 180ms ease; }
.blocm:hover { border-color: var(--text-suau); }
@media (prefers-reduced-motion: no-preference) {
  .blocm { transition: border-color 180ms ease, transform 180ms ease; }
  .blocm::before { transition: width 180ms ease; }
  .blocm:hover { transform: translateY(-3px); }
  .blocm:hover::before { width: 3.5rem; }
}
.blocm h3 { margin: 0 0 .625rem; font-family: var(--familia-marcador-web);
  font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); line-height: 1.25; }
.blocm p { margin: 0; font-size: 15px; color: var(--text-suau); }

.blocm ul { margin: 0; padding-left: 1.15rem; }
.blocm li { font-size: 15px; color: var(--text-suau); margin-bottom: .35rem; }
.blocm li:last-child { margin-bottom: 0; }

.blocm > p + ul { margin-top: .75rem; }

.crida { margin: 1.75rem 0 0; }

.fila { display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.15fr); gap: .375rem 2rem;
  align-items: start; padding: 1.625rem 0; border-bottom: 1px solid var(--vora-suau); }
@media (max-width: 48rem) { .fila { grid-template-columns: 1fr; gap: .25rem; } }
.fila:first-of-type { border-top: 1px solid var(--vora-suau); }

.anys { font-family: var(--familia-marcador-web); font-weight: 700; font-size: 14px; line-height: 1.8;
  letter-spacing: .06em; color: var(--jornada-tinta); }
.fila h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.35; }
.fila .on { margin: .125rem 0 0; font-size: 14px; color: var(--text-micro); }
.fila .detall { margin: 0; font-size: 15px; color: var(--text-suau); }
@media (max-width: 48rem) { .fila .detall { margin-top: .5rem; } }


.bloc-clubs ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.bloc-clubs li { border: 1px solid var(--text-micro); border-radius: 999px; padding: .35rem .85rem; font-size: .9rem; }


.tanca { background: var(--marca-daurat); color: var(--fons-marca); padding: 4.5rem 0; }

.tanca h2 { color: var(--fons-marca); font-size: clamp(22px, 2.6vw, 30px); }
.tanca .regla { background: var(--fons-marca); margin-bottom: 1.75rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; max-width: 42rem; }
@media (max-width: 30rem) { .form { grid-template-columns: 1fr; } }
.camp { display: block; }
.camp.ample { grid-column: 1 / -1; }
.camp span { display: block; font-family: ui-monospace, monospace; font-weight: 500; font-size: 11px;
  line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--daurat-text-suau);
  margin-bottom: .5rem; }
.camp input, .camp textarea { width: 100%; font: inherit; font-size: 16px; color: var(--fons-marca);
  background: transparent; border: 0; border-bottom: 2px solid var(--vora-sobre-or); padding: .625rem .125rem; }
.camp input:focus-visible, .camp textarea:focus-visible { outline: 0; border-bottom-color: var(--fons-marca);
  border-bottom-width: 3px; }
.camp textarea { resize: vertical; }
.porta-navy { background: var(--fons-marca); color: var(--marca-daurat); }
.porta-navy:hover { filter: brightness(1.3); }
.porta-navy:focus-visible { outline: 3px solid var(--fons-marca); outline-offset: 3px; }
.tanca .avis { font-size: 13px; color: var(--daurat-text-suau); max-width: 34rem; margin: 1.5rem 0 0; }
.tanca .avis a { color: var(--fons-marca); }