/* Mataró Basket Academy — full d'estil únic.
   Colors i mides, tots aquí dalt. Presos de la web original el 24-ago-2026. */

:root {
  /* Els noms que fa servir aquest full, lligats a les fitxes de tokens.css.
     La font de veritat és allà: aquí només hi ha traducció. */
  --teal: var(--teal-500);
  --teal-fosc: var(--teal-700);
  --sorra: var(--sorra-500);
  --sorra-titol: var(--sorra-700);
  --llima: var(--llima-500);
  --gris-clar: var(--gris-100);
  --negre-tou: var(--negre-700);
  --text: var(--tinta);
  --text-fosc: var(--tinta-sobre-sorra);

  --titular: var(--lletra-titular);
  --cos: var(--lletra-cos);

  --ample: var(--ample-pagina);

  --buit: clamp(1rem, 2.5vw, 2rem);
  --buit-seccio: clamp(2.5rem, 6vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-left: var(--banda);
  background: var(--fons);
  color: var(--text);
  /* El cos del Jordi es fix a 18px en escriptori: la corba arriba als 18px
     ja als 800px d amplada, no als 1240 (que encongia la lletra en finestres
     mitjanes i es veia tot mes comprimit que l original). */
  font: var(--pes-cos) clamp(1rem, 0.9rem + 0.45vw, 1.125rem)/var(--alcada-cos) var(--cos);
  -webkit-font-smoothing: antialiased;
  /* El Wix pinta el text amb antialias de GRIS (les seves capes compostades)
     i per aixo la seva lletra es veu mes fina; el ClearType subpixel del
     Chrome a Windows la pinta mes gruixuda. Aquesta opacitat imperceptible
     forca el mateix antialias de gris a tota la pagina. Verificat amb zoom
     pixel a pixel el 25-ago-2026: amb aixo els tracos calquen els del Wix. */
  opacity: 0.999;

}

/* La banda de sorra de l'esquerra recorre tota la pàgina, com a l'original:
   amb els patrocinadors a baix. */
.banda {
  position: fixed; inset: 0 auto 0 0; width: var(--banda);
  background: var(--sorra); z-index: 46;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 0 2rem;
}
@media (max-width: 700px) { :root { --banda: 0px; } .banda { display: none; } }

/* Els blocs a sang (metodologia, neix, targetes) poden sobreeixir els ~17px
   de la barra de desplacament: es retallen, mai barra horitzontal. */
html, body { overflow-x: clip; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--titular);
  font-weight: 600; line-height: 1.02;
  text-transform: uppercase; margin: 0;
}

.visualment-amagat {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.salta { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--teal); color: #fff; padding: 0.75rem 1rem; }
.salta:focus { left: var(--banda); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

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

.capcalera {
  /* SEPARACIO DELIBERADA DE L'ORIGINAL (decisio d'Oriol, 24-ago): al Jordi la
     capcalera se'n va en baixar; aqui es queda fixa, com una app.
     La linia neta amb la foto es mante perque la franja es negra opaca i la foto
     ja no porta cap degradat a sobre. Alcada mesurada: 114 px. */
  position: sticky; top: 0; z-index: 45;
  /* La linia de separacio. A l'original la franja negra acaba a 164 i la foto
     comenca a 165, i aquell pixel no el pinta ningu: comprovat element per
     element, a y=164 tot es transparent fins a l'arrel, o sigui que es el blanc
     del navegador.
     SEPARACIO DELIBERADA (Oriol, 24-ago): la fem SORRA, no blanca, perque lligui
     amb la banda de l'esquerra i amb el «by Jordi Ventura». */
  height: calc(var(--alt-capcalera) + 1px);
  border-bottom: 1px solid var(--sorra-500);
  background: var(--negre-capcalera);
  padding: 0 var(--buit);
  display: grid; gap: 0.55rem; justify-items: center; align-content: center;
}

/* En pantalla ampla, les tres pastilles i el menu comparteixen UNA fila
   (decisio d'Oriol, 25-ago). Per sota, tornen a ser dues: no hi caben. */
@media (min-width: 1700px) {
  .capcalera { grid-auto-flow: column; justify-content: center; align-items: center; column-gap: 2.5rem; }
}

.capcalera__pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; list-style: none; margin: 0; padding: 0; }
/* Mesurades: 45 px d'alt, radi 50, Barlow 16 px pes 700, lletratge 4 px, text negre. */
.capcalera__pastilles a {
  display: grid; place-items: center; text-decoration: none;
  height: 45px; padding: 0 1.5rem;
  background: var(--llima); color: var(--negre);
  font-family: var(--lletra-cos); font-weight: var(--pes-boto);
  font-size: 1rem; letter-spacing: 4px;
  border-radius: 50px;
}
.capcalera__pastilles a:hover { background: #cbe97a; }
/* Una pastilla sense destí no es pinta com a enllaç. */
.capcalera__pastilles .pendent { opacity: 0.4; cursor: not-allowed; }

.capcalera__marca { display: none; }

.capcalera__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
/* Mesurades: 39 px d'alt, Barlow 14 px pes 700. L'actiu va en blanc. */
.capcalera__nav a {
  display: grid; place-items: center; text-decoration: none;
  height: 39px; padding: 0 0.85rem;
  font-family: var(--lletra-cos); font-weight: var(--pes-menu);
  font-size: 0.875rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--teal-900);
  background: var(--sorra-500);
}
/* Nomes l'element actiu va en blanc; la resta, sorra. */
.capcalera__nav a:hover { background: var(--sorra-300); }
.capcalera__nav a.actiu { background: var(--blanc); color: var(--negre); }

.capcalera__boto { display: none; }

@media (max-width: 900px) {
  .capcalera { justify-items: stretch; grid-template-columns: 1fr auto; }
  .capcalera__pastilles { grid-column: 1 / -1; }
  .capcalera__marca {
    display: grid; text-decoration: none; align-self: center;
    font-family: var(--titular); text-transform: uppercase; color: var(--crema);
  }
  .capcalera__nom { font-size: 1.2rem; letter-spacing: 0.05em; }
  .capcalera__signatura { font-family: var(--cos); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--sorra); }
  .capcalera__boto {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    background: none; border: 1px solid #2b3038; color: var(--crema); cursor: pointer;
  }
  .capcalera__ratlles, .capcalera__ratlles::before, .capcalera__ratlles::after {
    display: block; width: 20px; height: 2px; background: currentColor; content: "";
  }
  .capcalera__ratlles { position: relative; }
  .capcalera__ratlles::before { position: absolute; top: -6px; }
  .capcalera__ratlles::after { position: absolute; top: 6px; }
  .capcalera__nav { grid-column: 1 / -1; display: none; }
  .capcalera__nav.obert { display: block; }
  .capcalera__nav ul { flex-direction: column; gap: 2px; }
  .capcalera__nav a { padding: 0.7rem 0.9rem; }
}

/* ---------------------------------------------------------------- portades sobre foto */

/* La portada de la home i la franja de títol de les pàgines interiors són la
   mateixa foto: canvia l'alçada i la mida del títol. */
/* La foto va tal qual, sense vel: ja es fosca a l'esquerra i el titol blanc
   s'hi llegeix. El degradat que hi havia fonia la franja negra amb la foto i
   feia desapareixer la linia que les separa. */
.hero, .portada {
  position: relative; background: var(--negre) center/cover no-repeat;
  background-image: url("/img/hero-jugador.png");
}

.portada { min-height: clamp(9rem, 18vw, 12.5rem); display: grid; align-items: center; padding: 1.5rem var(--buit); }
.portada__titol {
  max-width: var(--ample); width: 100%; margin-inline: auto;
  color: var(--sorra);
  font-size: clamp(2.2rem, 1.2rem + 4vw, 3.6rem);
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

/* La portada, amb les mides mesurades a la del Jordi.
   A 1000 px i a 1920 px les alçades no canvien: la franja negra fa 114 i la foto
   855, i tot es col·loca respecte d'una columna de 980 centrada.
     titol   x 83 dins la columna, ample 497 · 65 px · pes 800 · blanc · centrat
     «by Jordi Ventura»                      · 30 px · pes 800 · sorra · centrat
     video   303 x 452, mateix eix que el titol
   El text va centrat DINS d'una columna que no es al mig de la pagina. */
.hero {
  height: var(--alt-portada);
  display: block; padding: 0;
  background-image: url("/img/hero-jugador.png");
}
.hero__text {
  max-width: var(--ample-pagina); width: 100%; margin-inline: auto;
  height: 100%; position: relative;
}
.hero__columna {
  position: absolute; top: 114px; left: 83px; width: 497px;
  text-align: center;
}
.hero__marca {
  font-family: var(--lletra-titular); font-weight: var(--pes-hero);
  font-size: var(--t-hero); line-height: 1.2; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--blanc); margin: 0;
}
.hero__signatura {
  font-family: var(--lletra-titular); font-weight: var(--pes-hero);
  font-size: var(--t-signatura); line-height: 1.2; text-transform: none;
  color: var(--sorra-500); margin: 0.2em 0 0;
}
.hero__video {
  width: 303px; height: 452px; margin: 1.4rem auto 0;
  border: 0; background: #000;
}
.hero__video video { width: 100%; height: 100%; object-fit: cover; }
.hero__lema { display: none; }

/* Per sota de la columna de 980 no hi ha lloc per a mides fixes. */
@media (max-width: 1040px) {
  .hero { height: auto; padding: 3rem 0 3rem; }
  .hero__text { height: auto; padding: 0 var(--buit); }
  .hero__columna { position: static; width: auto; max-width: 497px; margin-inline: auto; }
  .hero__marca { font-size: clamp(2.2rem, 8vw, var(--t-hero)); }
  .hero__signatura { font-size: clamp(1.1rem, 3.7vw, var(--t-signatura)); }
  .hero__video { width: min(303px, 62vw); height: auto; aspect-ratio: 303 / 452; }
}

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

.seccio { padding: var(--buit-seccio) var(--buit); background: var(--fons-alt); }
.seccio > * { max-width: var(--ample); margin-inline: auto; }
.seccio--blanca, .seccio--contacte { background: var(--fons); }
.seccio--intro { background: var(--crema); }

.seccio__titol {
  font-size: clamp(2rem, 1.1rem + 4vw, 3.6rem);
  color: var(--teal); text-align: center; margin-bottom: 1.75rem;
}
.seccio__entrada { font-size: 1.2rem; font-weight: 600; margin: 0 0 1rem; }
.seccio__titol--sorra { color: var(--sorra); }
/* Mesurat al Wix: 20px, pes 600, teal, sense majuscules ni espaiat. */
.seccio__signatura {
  font-family: var(--lletra-cos); text-transform: none; font-size: 1.25rem; font-weight: 600;
  letter-spacing: normal; color: var(--teal); text-align: center; margin: -1.25rem 0 1.75rem;
}
.subtitol { font-size: 1.45rem; color: var(--teal); margin: 2rem 0 0.75rem; }

/* La seccio d'obertura, amb les mides mesurades a la del Jordi (columna de 980):
     lema      tres linies CENTRADES, totes amb el centre a x=184
     paragraf  x 389, ample 484, alineat a l'esquerra
     boto      teal ple, 199 x 45
   El lema es l'UNIC lloc de tota la web on el Jordi fa servir DIN Neuzeit Grotesk.
   Aqui el substitueix Barlow Condensed, que hi coincideix en amplada. */
.seccio--intro > .intro {
  display: grid; gap: 20px;
  grid-template-columns: 369px 484px;
  justify-content: start;
  align-items: start;
  max-width: var(--ample-pagina); margin-inline: auto;
}
.intro__lema {
  font-family: var(--lletra-lema); font-weight: 700;
  /* 47px: amb l'Oswald 700, UN OBJECTIU fa ~248px, com els 253 del DIN; i
     s'estira un 23% en vertical perque les caixes tinguin l'ALCADA del DIN
     (58px d'alt dins el mateix ample). Verificat contra la captura d'Oriol. */
  font-size: min(var(--t-lema), 2.9375rem); line-height: 1.4;
  transform: scaleY(1.23); transform-origin: center;
  text-align: center; text-transform: uppercase;
  /* les linies les manen els <br>: mai partir "UN OBJECTIU" en dues */
  white-space: nowrap;
  color: var(--teal-500); margin: 0;
  /* centrat a l'eix vertical respecte del text del costat (Oriol 25-ago) */
  align-self: center;
  padding-top: 0;   /* la primera linia cau a 132 px de dalt de la seccio */
}
.seccio--intro .prosa { margin-inline: 0; max-width: none; }

@media (max-width: 1040px) {
  .seccio--intro > .intro { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
  .intro__lema { padding-top: 0; font-size: clamp(2rem, 7vw, var(--t-lema)); }
}

/* ---------------------------------------------------------------- prosa */

.prosa { max-width: var(--ample-prosa); margin-inline: auto; }
.prosa p { margin: 0 0 1.2em; }
.prosa strong { font-weight: 700; }   /* la negreta del Jordi es 700, mesurada */
/* Mesurat al Wix: el remat es text pla del cos (18px), sense majuscules. */
.prosa__remat {
  font-family: var(--lletra-cos); text-transform: none;
  font-size: inherit; line-height: 1.4;
  color: var(--teal); margin-top: 2rem;
}

.cita { margin: 0 auto 2.5rem; max-width: 24ch; text-align: center; }
.cita p {
  /* mesurada a la del Jordi: Barlow 56 px, pes 700, cursiva, sorra */
  font-family: var(--titular); font-style: italic; font-weight: 700;
  text-transform: none; line-height: 1.12;
  font-size: clamp(1.7rem, 1.05rem + 2.7vw, 3.5rem);
  color: var(--sorra); margin: 0.75rem 0 0;
  max-width: none;
}
/* la cita del Jordi disposa de ~854 px; encotillar-la a 74ch li canviava els salts */
.cita { max-width: 56rem; }
.cita footer {
  /* mesurat al Wix: Barlow 28 px, pes 600, teal */
  order: -1; font-family: var(--titular); text-transform: none;
  font-weight: 600;
  font-size: clamp(1.2rem, 0.95rem + 0.85vw, 1.75rem); color: var(--teal);
}
.cita { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- llistes */

.marques { list-style: none; margin: 0 0 1rem; padding: 0; }
.marques li { position: relative; padding-left: 1.35rem; margin-bottom: 0.35rem; }
.marques li::before {
  content: "•"; position: absolute; left: 0.15rem; top: 0; color: var(--teal);
}
/* La llista de la metodologia (Programes): els tics ✓ son TEXT del Jordi
   (al verbatim hi son) i les linies respiren; la llista viu dins la columna
   centrada, no al marge esquerre de la seccio. */
.marques--tics { max-width: var(--ample-prosa); margin: 0 auto; }
/* A l'original, el paragraf i els tics arrenquen de la MATEIXA vora esquerra
   que el titol (la de la columna), no d'una columna estreta centrada. */
/* Mesurat al Wix: columna de 822px centrada, que arrenca just al "T" del
   titol centrat (paragraf i tics a x=536, glif del titol a x=537). */
.seccio--metodologia .prosa,
.seccio--metodologia .marques--tics { max-width: 886px; margin-inline: auto; }
.marques--tics li { margin-bottom: 1.55rem; padding-left: 1.6rem; }
.marques--tics li::before { content: "✓"; }
.marques--dues { columns: 2; column-gap: 2.5rem; }
@media (max-width: 620px) { .marques--dues { columns: 1; } }

/* Mesurat al Wix: els pilars son linies planes de cos: "1) Analitzar. text",
   el nom a 600 i el text a 400. Cap requadre ni majuscules. */
.pilars { list-style: none; counter-reset: p; margin: 1rem auto 0; padding: 0; max-width: var(--ample-prosa); }
.pilars li { counter-increment: p; margin: 0; }
.pilars li::before { content: counter(p) ") "; font-weight: 600; color: var(--teal); }
.pilars__nom { font-family: var(--lletra-cos); text-transform: none; font-size: 1.125rem; font-weight: 600; color: var(--teal); }
.pilars__nom::after { content: ". "; }
.pilars__text { font-weight: 400; }

/* Mesurat al Wix: cada valor es UNA linia en cursiva: el nom a 700 i el text
   a 500. Sense files ni ratlles. */
.valors { margin: 1rem auto 0; max-width: var(--ample-prosa); }
.valors > div { display: block; padding: 0.15rem 0; border-bottom: none; }
.valors dt { display: inline; font-family: var(--lletra-cos); text-transform: none;
  font-size: 1.125rem; font-weight: 700; font-style: italic; color: var(--teal); }
.valors dt::after { content: ". "; }
.valors dd { display: inline; margin: 0; font-style: italic; font-weight: 500; }
@media (max-width: 620px) { .valors > div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ---------------------------------------------------------------- targetes */

/* Les targetes de programes de la home: fons sorra, títol teal, botó pastilla. */
.targetes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.targeta {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem 1.5rem; background: var(--sorra); color: var(--text-fosc);
}
.targeta p { margin: 0; }
/* Mesurat al Wix: titol de targeta 30px/800 gris fosc #414141, cos de 16px. */
.targeta__titol { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem); font-weight: 800; color: #414141; text-align: center; }
.targeta__llista { list-style: disc; margin: 0; padding-left: 1.2rem; }
.targeta__llista li { margin-bottom: 0.15rem; }
.targeta .boto { margin-top: auto; align-self: center; font-size: 0.875rem; letter-spacing: normal; }
/* Les targetes de la pàgina de programes: blanques, amb el número dins d'un
   cercle gris i el títol en sorra. */
.targeta--numerada {
  background: var(--blanc); color: var(--text); text-align: center;
  align-items: center; padding: 4.5rem 1.5rem 2rem;
  position: relative; margin-top: 1.75rem; overflow: visible;
}
/* Com al Wix: el cercle numerat CAVALCA la vora superior de la targeta
   (~un terc per fora, dos tercos per dins), no va a dins. */
.targeta--numerada::before {
  content: attr(data-numero);
  display: grid; place-items: center;
  position: absolute; top: -1.7rem; left: 50%; transform: translateX(-50%);
  width: 5.25rem; height: 5.25rem; border-radius: 50%;
  background: var(--gris-clar); color: var(--teal);
  font-family: var(--titular); font-size: 2.4rem; line-height: 1;
}
.targeta--numerada .targeta__titol { color: var(--sorra-titol); text-transform: none; font-size: 1.4rem; }

/* El fons de la secció de programes és una foto: les targetes hi suren a sobre. */
.seccio--programesMBA { background: var(--blanc); }
/* La banda crema del titol ocupa TOTA la pantalla i fa 131px d'alt, amb el
   titol centrat (30px dalt / 34 baix) i un respir de 15px fins al remoli.
   Tot mesurat al Wix el 25-ago. */
.seccio--programesMBA { padding-top: 0; }
.seccio--programesMBA .seccio__titol {
  background: var(--crema); padding: 35px 1rem 39px;
  max-width: none;
  width: calc(100% + 2 * var(--buit));
  margin-left: calc(-1 * var(--buit));
  margin-bottom: 15px;
}
/* I l'aire entre el text d'introduccio i la banda es de 50px, no el farciment
   generos de seccio: a l'original va mes aixafat. */
body.pagina-programes section.seccio:not(.seccio--programesMBA):not(.seccio--metodologia) { padding-bottom: 2rem; }

/* No tots els titulars de la web van en majúscules. */
.seccio__titol--frase { text-transform: none; }

/* La franja fina de foto sota el títol «Els nostres programes», com a l'original. */
.franja {
  height: clamp(48px, 6vw, 76px); margin: 0 0 2.5rem; max-width: none;
  background: var(--negre) center/cover no-repeat; background-image: url("/img/hero-jugador.png");
}

/* Mesurat al Wix: dins d'un bloc tot va tocant (marges 0, interlineat 1.4),
   27px entre blocs i CAP linia divisoria. La linia queda nomes als plecs
   de l'individual, on fa de nansa de la fila clicable. */
.bloc { padding: 0; margin: 0 auto 1.7rem; max-width: var(--ample-prosa); line-height: 1.4; }
.bloc .marques { margin: 0; }
.bloc .marques li { margin-bottom: 0; }
/* Els dos "respirs" de 27px del tram final, mesurats al Wix. */
.bloc .marques--aire { margin-top: 1.7rem; }
.bloc p.respira { margin-top: 1.7rem; }
/* Mesurat al Wix: el titol de cada bloc es cos de 18 px, negreta i CURSIVA,
   sense majuscules (la regla general de h1-h4 les hi posava), i el paragraf
   d'entrada es pes normal, no negreta. */
.bloc__titol {
  font-size: 1.125rem; font-style: italic; font-weight: 600;
  color: var(--teal); text-transform: none; margin-bottom: 0;
}
.bloc__entrada { margin: 0; }
/* El bloc de Situacions d'1x1: al Wix el titol i l'entrada van en cursiva FINA (300). */
.bloc--fi .bloc__titol, .bloc--fi .bloc__entrada { font-weight: 300; font-style: italic; }
/* «Per que entrenar en un grup reduit?»: al Wix es un paragraf en negreta de 18px,
   no un titol de seccio. */
.titolParagraf { font-family: var(--lletra-cos); font-size: 1.125rem; font-weight: 600;
  line-height: 1.4; color: var(--teal); text-align: left; text-transform: none; margin: 0 0 0.35rem; }
.bloc p { margin: 0; }
/* El remat del bloc es rodona a l'original (cap cursiva, pes normal). */
.bloc__remat { font-style: normal; }

.posicions { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1rem 0 1.25rem; }
/* Mesurat al Wix: els 1x1/2x2/3x3 son negreta teal del cos, res mes. */
.posicions h4 { font-family: var(--lletra-cos); font-size: 1.125rem; font-weight: 600;
  color: var(--teal); text-transform: none; margin: 0 0 0.35rem; }

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

.boto {
  display: inline-block; text-decoration: none; text-align: center;
  /* Mesurat al Wix: els botons del Jordi son 700, 15px, espaiat 3.75px, text blanc. */
  font-family: var(--cos); font-weight: 700; font-size: 0.9375rem; letter-spacing: 3.75px;
  padding: 0.75rem 1.75rem; border-radius: var(--radi-pastilla);
  background: var(--teal); color: #fff; border: 2px solid var(--teal);
  transition: background 0.15s, color 0.15s;
}
.boto:hover { background: var(--teal-fosc); border-color: var(--teal-fosc); }
.boto--clar { background: transparent; color: var(--teal); }
.boto--clar:hover { background: var(--teal); color: var(--crema); }
.boto--whatsapp { background: #1f7a44; border-color: #1f7a44; color: #fff; }
.boto--whatsapp:hover { background: #175c34; border-color: #175c34; }
/* Un botó sense destí no enganya ningú: apagat i sense clic. */
.boto--pendent { opacity: 0.4; cursor: not-allowed; }

.centrat { display: flex; justify-content: center; margin-top: 2rem; }
.viesContacte { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2rem; }

/* ---------------------------------------------------------------- esdeveniments */

.seccio--esdeveniments { background: var(--fons); }
.esdeveniments { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); justify-items: center; }
.esdeveniment { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; max-width: 30rem; }
.esdeveniment img { width: 100%; }
.esdeveniment h3 { font-size: 1.5rem; color: var(--teal); }
.esdeveniment p { margin: 0; }
.esdeveniment__quan { font-family: var(--titular); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sorra); font-size: 1.05rem; }

/* ---------------------------------------------------------------- tarifes */

/* Els dos cartells grans que obren la pàgina de preus. */
.cartells { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: var(--ample); margin: 0 auto 3rem; }
.cartells img { width: 100%; }

.tarifes { display: grid; gap: 3rem; max-width: var(--ample); margin-inline: auto; }

/* Cada bloc de tarifa porta un cartell a un costat, alternant. */
.tarifa { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.tarifa--dreta { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.tarifa--esquerra { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
.tarifa--flanquejada { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem); }
.tarifa > img { width: 100%; }
@media (max-width: 860px) {
  .tarifa--dreta, .tarifa--esquerra, .tarifa--flanquejada { grid-template-columns: 1fr; }
  .tarifa > img { max-width: 20rem; margin-inline: auto; }
  .tarifa--esquerra > img { order: 2; }
}

.tarifa__cos { display: grid; gap: 0.9rem; justify-items: center; text-align: center; }
/* Mesurat al Wix: capcaleres de tarifa 28px/600 i TOTES les linies de preu
   i del que inclouen a 20px/600. */
.tarifa__titol { font-size: 1.75rem; font-weight: 600; color: var(--teal); text-transform: none; font-family: var(--lletra-cos); }
.tarifa__subtitol { margin: -0.6rem 0 0; }
/* Cap xifra gran: a l'original els preus van de la mateixa mida que el cos. */
.tarifa__preu, .tarifa__subtitol, .tarifa__inclou li, .tarifa__llista li, .tarifa__alta ul li, .tarifa__altaPreu {
  font-size: 1.25rem; font-weight: 600; }
.tarifa__preu { margin: 0; }
.tarifa__inclou, .tarifa__llista { list-style: none; margin: 0; padding: 0; }
.tarifa__inclou li, .tarifa__llista li { margin-bottom: 0.2rem; }

.tarifa__alta { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 0.75rem; }
.tarifa__alta img { width: 6rem; height: auto; }
.tarifa__altaTitol { display: block; font-family: var(--lletra-cos); font-size: 1.75rem; font-weight: 600; color: var(--teal); text-transform: none; }
.tarifa__altaPreu { display: block; }
.tarifa__alta ul { list-style: none; margin: 0; padding: 0; }

.tarifes__peu { margin: 3rem auto 0; max-width: var(--ample-prosa); text-align: center; }

/* ---------------------------------------------------------------- contacte i peu */

.seccio--contacte > .contacteCos {
  display: grid; gap: clamp(1.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  max-width: var(--ample); margin-inline: auto;
}
.seccio--contacte .seccio__titol { text-align: right; margin: 0; }
/* Mesurat al Wix (inici): el bloc de contacte es 14px, pes 500, espaiat 1.4px,
   totes les linies iguals (la primera NO va en negreta alla). */
.contacte { font-style: normal; display: grid; gap: 1.25rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 1.4px; }
.contacte strong { font-weight: 500; }
.contacte p { margin: 0; }
.instalacio { font-family: var(--lletra-cos); text-transform: none; font-size: 1.875rem; font-weight: 600; color: var(--teal); text-align: center; }
@media (max-width: 800px) {
  .seccio--contacte > .contacteCos { grid-template-columns: 1fr; }
  .seccio--contacte .seccio__titol { text-align: left; }
}

/* La franja de patrocinadors tanca totes les pàgines, com a l'original. */
.peu { background: var(--crema); padding: 2.5rem var(--buit); }
.peu__patrocinadors { max-width: var(--ample); margin-inline: auto; display: flex; flex-wrap: wrap; gap: clamp(2rem, 8vw, 6rem); justify-content: center; align-items: center; }
.peu__patrocinadors img { max-height: 10rem; max-width: 17rem; width: auto; object-fit: contain; }
.peu__nota { max-width: var(--ample); margin: 2rem auto 0; text-align: center; font-size: 0.85rem; opacity: 0.7; }

/* ---------------------------------------------------------------- patrons de secció */

/* El patró de la casa: títol gran a l'esquerra, prosa a la dreta.
   Surt a la portada («Un objectiu / Un pla / Una evolució») i a «Qui som?». */
.dues {
  display: grid; gap: clamp(1.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center; max-width: var(--ample); margin-inline: auto;
}
.dues > .seccio__titol { text-align: right; margin: 0; }
.dues .prosa { margin-inline: 0; }
@media (max-width: 800px) {
  .dues { grid-template-columns: 1fr; }
  .dues > .seccio__titol { text-align: left; }
}

.seccio--sorra { background: var(--sorra); }
.seccio--sorra .seccio__titol { color: var(--teal); }
.seccio--sorra .prosa, .seccio--sorra .valors dd { color: var(--teal); }

/* Text a l'esquerra i una foto alta a la dreta que arriba fins al marge. */
.ambImatge {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  align-items: stretch; max-width: var(--ample); margin-inline: auto;
}
/* La foto acompanya el text de dalt a baix, com a l'original. */
.ambImatge img { width: 100%; height: 100%; object-fit: cover; }
.ambImatge .prosa, .ambImatge .pilars, .ambImatge .valors { margin-inline: 0; max-width: none; }
@media (max-width: 800px) { .ambImatge { grid-template-columns: 1fr; } }

.imatgeAmpla { display: block; width: 100%; max-width: var(--ample); margin: 0 auto; }

.galeria { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: var(--ample); margin-inline: auto; }
.galeria img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 620px) { .galeria { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- pàgines amb fons de foto */

/* Les dues pàgines d'entrenament van sobre una foto de pista.
   El vel fosc no hi és a l'original: sense ell el text teal sobre la foto
   costa de llegir, i el text és el que hi ha vingut a buscar l'usuari. */
/* Com el Jordi: la seva imatge de fons ja es clara i ell NO hi posa cap vel.
   El vel crema del 86% que hi vaig posar ho tornava tot mes tostat, i el fons
   clavat a la finestra (fixed) ensenyava la zona fosca de la imatge. Ara la
   imatge va amb la pagina, de dalt a baix de la seccio, tal qual. */
/* FONS: blanc pla. Punt final a tres voltes de perseguir el fantasma del Wix:
   alla es la foto fosca estirada amb una opacitat que no es pot llegir dels
   seus estils, i cada recreacio meva a ull tirava a gris. El blanc net es
   indistingible de la impressio dominant del seu i no es mou mai mes.
   El parquet es la SEVA imatge i toca el capdamunt de la seccio, com al Wix. */
.seccio--fons {
  position: relative; color: var(--teal);
  background: var(--blanc);
  padding-top: 0;
}
.seccio--fons strong, .seccio--fons b { font-weight: 700; }
.seccio--fons > * { position: relative; }

/* Columna de fotos esglaonades a l'esquerra, text a la dreta. */
.ambColumna {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  align-items: start; max-width: var(--ample); margin-inline: auto;
}
/* A l'original, darrere la columna de fotos hi ha una franja de parquet. */
/* Una sola pista de parquet que engloba tots els mitjans, i els mitjans
   repartits per TOTA l'alcada del text: el primer amb el primer bloc i l'ultim
   amb l'ultim, com al Wix del Jordi. */
.columnaFotos {
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1rem, 3vw, 2.5rem) 0;
  background: center/cover no-repeat url("/img/fons-parquet.jpg");
}
.columnaFotos img, .columnaFotos video { width: 100%; display: block; }
.columnaFotos .videoBanda { width: 100%; display: block; border: 0; aspect-ratio: 592 / 1074; }
/* Esglaonades: les parelles s'alternen, com a l'original. */
.columnaFotos > :nth-child(even) { margin-left: 18%; }
.ambColumna .bloc { max-width: none; margin-inline: 0; }
@media (max-width: 860px) {
  .ambColumna { grid-template-columns: 1fr; }
  .columnaFotos { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .columnaFotos > :nth-child(even) { margin-left: 0; }
}

.franja--programes {
  height: clamp(180px, 34vw, 440px); margin: 0 0 3rem; max-width: none;
  background: var(--negre) center/cover no-repeat; background-image: url("/img/programes-banda.jpg");
}

/* ---------------------------------------------------------------- variants de titular */

.seccio__titol--esquerra { text-align: left; }

/* Els subtítols petits en negreta de la pàgina de contacte i els «Objectius» del campus. */
.subtitol--petit {
  font-family: var(--cos); font-weight: 700; text-transform: none;
  font-size: 1.125rem; margin: 2rem 0 0.2rem;
}
.subtitol--gran { font-size: 1.5rem; }
.subtitol--sorra { color: var(--sorra-titol); font-style: italic; text-transform: none; }

.prosa .marques { margin-bottom: 1.15em; }
.contacteDirecte { line-height: 1.9; }
.contacteDirecte a { text-decoration: none; }
.contacteDirecte a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- banda i menú lateral */

/* Els patrocinadors de la banda: caixetes blanques clicables, a baix.
   Els logos son foscos i sobre el sorra directe no respiraven. */
.banda__patros { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.banda__patro {
  display: grid; place-items: center;
  width: 54px; height: 54px; padding: 6px;
  background: var(--blanc); border-radius: var(--radi-0);
  box-shadow: var(--ombra-1);
  transition: transform var(--transicio), box-shadow var(--transicio);
}
a.banda__patro:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.banda__patro img { max-width: 100%; max-height: 100%; object-fit: contain; }





/* ---------------------------------------------------------------- el document */


/* La finestra que l'obre sense marxar de la pàgina. Només a l'ordinador: al
   Safari de l'iPhone i al WebView d'Android els PDF dins d'un iframe sovint no
   es pinten, i allà val més obrir-lo amb el visor del telèfon. */
.visorPdf { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr; background: rgba(13, 16, 20, 0.88); }
.visorPdf[hidden] { display: none; }
.visorPdf__barra { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; color: var(--crema); }
.visorPdf__titol { font-family: var(--lletra-cos); font-weight: var(--pes-cos); margin-right: auto; }
.visorPdf__marc { border: 0; width: min(900px, 96vw); height: 100%; justify-self: center; background: var(--blanc); }
.visorPdf .boto { padding: 0.5rem 1.1rem; font-size: 0.9rem; }


/* ---------------------------------------------------------------- el full de paper */

/* Acompanya el lema al telèfon, dins de la pàgina. No flota.
   A l'ordinador no hi és: allà el botó de dins del text ja es veu sense esforç. */
.paper { display: none; }

@media (max-width: 1040px) {
  .seccio--intro > .intro { grid-template-columns: minmax(0, 1fr) auto; }
  .intro__lema { grid-column: 1; }
  .seccio--intro .prosa { grid-column: 1 / -1; }

  .paper {
    grid-column: 2; align-self: center; justify-self: end;
    display: grid; justify-items: center; gap: 0.15rem;
    width: 4.5rem; padding: 0.6rem 0.35rem 0.5rem;
    background: var(--teal-500); color: var(--crema);
    text-decoration: none; box-shadow: var(--ombra-2);
    /* Entra per l'esquerra i es queda. */
    opacity: 0; transform: translateX(-2.5rem);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .paper.esVeu { opacity: 1; transform: none; }
  .paper:active { background: var(--teal-700); }

  .paper__full { width: 1.75rem; height: 2.2rem; display: block; }
  .paper__fons { fill: var(--crema); }
  .paper__punta { fill: var(--sorra-500); }
  .paper__ratlles rect { fill: var(--teal-500); }
  .paper__text {
    font-family: var(--lletra-cos); font-weight: var(--pes-boto);
    font-size: 0.5rem; letter-spacing: 0.06em; text-align: center; line-height: 1.15;
  }
}

/* Qui ha demanat menys moviment, el veu ja col·locat. */
@media (prefers-reduced-motion: reduce) {
  .paper { transition: none; opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------- les dues versions */

/* El boto que commuta entre la web del Jordi i la proposta nova. TEMPORAL:
   quan la nova sigui la bona, aquest boto i /nova/ desapareixen. */
.capcalera__nav .canviVersio {
  background: var(--llima); color: var(--negre);
  font-weight: 700;
}
.capcalera__nav .canviVersio:hover { background: var(--llima-700); }

/* Els dos botonets 1/2 (Oriol 25-ago): mateix disseny llima, petits, i
   l'actiu ple; l'inactiu, buit amb vora llima. */
.capcalera__nav .versions { display: flex; gap: 6px; align-items: center; }
.capcalera__nav .canviVersio--num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  background: transparent; color: var(--llima);
  border: 2px solid var(--llima); font-weight: 700;
}
.capcalera__nav .canviVersio--num.esVersioActiva { background: var(--llima); color: var(--negre); }
.capcalera__nav .canviVersio--num:hover { background: var(--llima-700); color: var(--negre); }

/* El desplegable de Programes a la versio nova. */
.capcalera__nav .teFills { position: relative; }
.capcalera__nav .submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50;
  list-style: none; margin: 0; padding: 0; min-width: 15rem;
  box-shadow: var(--ombra-2);
}
.capcalera__nav .teFills:hover .submenu,
.capcalera__nav .teFills:focus-within .submenu { display: block; }
.capcalera__nav .submenu a { justify-content: start; text-align: left; width: 100%; }

@media (max-width: 900px) {
  /* al telefon el desplegable no te sentit: la subllista es veu sempre, sagnada */
  .capcalera__nav .submenu { display: block; position: static; box-shadow: none; }
  .capcalera__nav .submenu a { padding-left: 2rem; }
}

/* El preu, a la targeta: la dada que decideix, alla on es decideix. */
.targeta__preu {
  margin: 0; padding-top: 0.5rem; border-top: 1px solid rgba(20, 22, 26, 0.15);
  font-weight: 600; color: var(--teal-700); font-size: 0.95rem; line-height: 1.5;
}

/* ---------------------------------------------------------------- la barra d'app */

/* Nomes al telefon i nomes a la versio nova. A l'escriptori NO: alla el menu de
   dalt ja es sempre visible, i dues barres fixes fan efecte sandvitx. */
.barraApp { display: none; }

@media (max-width: 900px) {
  body.vNova { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* el menu de dalt es retira: la barra el substitueix */
  body.vNova .capcalera__boto, body.vNova .capcalera__nav { display: none; }

  .barraApp {
    display: block; position: fixed; z-index: 75;
    left: 0; right: 0; bottom: 0;
    background: var(--negre-capcalera);
    border-top: 1px solid var(--sorra-500);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barraApp ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  .barraApp a {
    display: grid; justify-items: center; gap: 3px;
    padding: 9px 2px 7px; text-decoration: none;
    color: var(--sorra-300); opacity: 0.8;
  }
  .barraApp svg { width: 23px; height: 23px; fill: currentColor; }
  .barraApp span {
    font-family: var(--lletra-cos); font-weight: 600;
    font-size: 0.6rem; letter-spacing: 0.04em;
  }
  .barraApp a.actiu { color: var(--llima); opacity: 1; }
}

/* ------------------------------------------- el mobil de la versio nova, net */

/* El chip de canvi de versio nomes viu al mobil; a l'escriptori el commutador
   ja es dins del menu. */
.canviVersio--mobil { display: none; }

@media (max-width: 900px) {
  /* UNA sola navegacio: quan entra la barra de baix, la banda de l'esquerra
     marxa. Abans convivien entre 700 i 900 px i eren tres barres alhora. */
  body.vNova { --banda: 0px; padding-left: 0; }
  body.vNova .banda { display: none; }

  /* La capcalera d'app: TOT en una linia —marca, pastilla, chip—, com sera el
     producte final quan el chip ja no hi sigui. Res d'alcada fixa de 114. */
  body.vNova .capcalera {
    height: auto; padding: 0.55rem 0.9rem;
    grid-template-columns: auto 1fr auto; align-items: center;
    column-gap: 0.6rem; justify-items: stretch;
  }
  body.vNova .capcalera__marca { justify-self: start; }
  body.vNova .capcalera__pastilles { grid-column: 2; grid-row: 1; }
  body.vNova .capcalera__pastilles li { display: contents; }
  body.vNova .capcalera__pastilles a {
    width: 100%; height: 40px;
    letter-spacing: 1px; font-size: 0.9rem; padding: 0 0.75rem;
  }
  /* El chip, rodo i minim: es temporal, i com menys ocupi mes s'assembla al final. */
  body.vNova .canviVersio--mobil {
    grid-column: 3; grid-row: 1;
    display: grid; place-items: center; justify-self: end;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--llima); color: var(--negre);
    font-size: 0.95rem; text-decoration: none;
  }
}

/* ---------------------------------------------------------------- el calendari */

/* Fase A: la vista de l'anonim. Graella mensual a l'ordinador, llista al
   telefon. Els colors dels tipus surten de les fitxes (--event-*): cap color
   inventat. Els dies passats queden apagats; l'avui, encerclat de llima. */


.cal { display: grid; gap: 2.5rem; }
.cal__titol {
  font-size: var(--t-28); color: var(--teal-500);
  text-transform: capitalize; margin-bottom: 0.75rem;
}
.cal__graella {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--vora); border-top: 1px solid var(--vora);
  background: var(--blanc);
}
.cal__nomdia {
  padding: 0.4rem 0.5rem; text-align: right;
  font-family: var(--lletra-cos); font-weight: 700; font-size: var(--t-12);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-fluixa); background: var(--gris-100);
  border-right: 1px solid var(--vora); border-bottom: 1px solid var(--vora);
}
.cal__dia {
  min-height: 88px; padding: 0.35rem;
  border-right: 1px solid var(--vora); border-bottom: 1px solid var(--vora);
  display: grid; gap: 3px; align-content: start;
}
.cal__num {
  justify-self: end;
  font-family: var(--lletra-cos); font-weight: 600; font-size: var(--t-12);
  color: var(--negre-500);
}
.cal__dia--buit { background: var(--gris-100); }
.cal__dia--passat { opacity: 0.4; }
.cal__dia--avui { box-shadow: inset 0 0 0 2px var(--llima-500); }
.cal__dia--avui .cal__num { color: var(--negre); font-weight: 800; }

.cal__xip {
  display: inline-block; padding: 2px 7px;
  font-family: var(--lletra-cos); font-weight: 600; font-size: 0.68rem;
  line-height: 1.35; letter-spacing: 0.02em;
  color: var(--blanc); text-decoration: none; border-radius: 3px;
}
.cal__xip--tecnificacio { background: var(--event-entrenament); }
.cal__xip--campus { background: var(--event-classe); }
.cal__xip--partit { background: var(--event-partit); }
.cal__xip--clinic { background: var(--event-clinic); }
a.cal__xip:hover { filter: brightness(1.15); }

/* la llista del telefon */
.calLlista { display: none; list-style: none; margin: 0; padding: 0; }

@media (max-width: 700px) {
  .cal, .cal__llegenda { display: none; }
  .calLlista { display: grid; gap: 0; }
  .calLlista__dia {
    display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem;
    padding: 0.8rem 0.2rem; border-bottom: 1px solid var(--vora);
    align-items: start;
  }
  .calLlista__data { font-family: var(--lletra-cos); font-size: var(--t-14); color: var(--negre-500); }
  .calLlista__data strong { font-size: var(--t-22); color: var(--teal-500); margin-right: 2px; }
  .calLlista__dia--avui .calLlista__data strong { color: var(--negre); }
  .calLlista__dia--avui { background: var(--sorra-100); }
  .calLlista__que { display: grid; gap: 4px; justify-items: start; }
  .calLlista .cal__xip { font-size: 0.78rem; padding: 4px 9px; }
}

/* ------------------------------------------- el titol de pagina, apromat (nova) */

/* El titol de pagina CAL: es l'h1, l'orientacio de qui entra per enllac directe
   i l'unic titol visible al mobil, on el menu es la barra de baix. Pero no cal
   que sigui una cerimonia: a la versio nova es una capcalera fina —mateixa foto,
   mateix sorra, la meitat d'alcada— i deixa de repetir en gran el que el menu ja
   marca en petit. L'original conserva la seva banda alta, que es del client. */
body.vNova .portada { min-height: 0; padding: clamp(0.9rem, 2.2vw, 1.4rem) var(--buit); }
body.vNova .portada__titol { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem); }

/* La barra del calendari: [buit] [‹ mes ›] [llegenda]. La graella d'1fr auto 1fr
   clava el pager al centre de la graella de sota, pesi el que pesi la llegenda. */
.cal__controls {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; width: 100%; margin: 0 auto 1rem;   /* l'auto centra; un 0 aqui el matava */
}
.cal__pager { grid-column: 2; display: flex; gap: 0.6rem; align-items: center; }
.cal__llegenda {
  grid-column: 3; justify-self: end;
  display: flex; gap: 0.4rem; margin: 0; flex-wrap: wrap; justify-content: flex-end;
}
.cal__fletxa {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--teal-500); color: var(--crema);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
  transition: background var(--transicio);
}
.cal__fletxa:hover { background: var(--teal-700); }
.cal__fletxa:disabled { background: var(--gris-300); cursor: default; }
/* El rotul del mes, entre les fletxes; el titol de dins de l'article s'amaga
   a la graella perque no digui el mateix dues vegades. */
.cal__mesActual {
  min-width: 13rem; text-align: center;
  font-family: var(--lletra-titular); font-weight: var(--pes-titular);
  font-size: var(--t-28); color: var(--teal-500);
  text-transform: capitalize;
}
.cal .cal__titol { display: none; }
.cal__mes[hidden] { display: none; }
@media (max-width: 700px) { .cal__controls { display: none; } }

/* --------------------------------------------- programes: decisio i plecs (nova) */

/* El detall, sencer pero plegat: cada bloc s'obre per la seva ratlla de titol. */
details.bloc { padding: 0; margin-bottom: 0; border-bottom: 1px solid rgba(44,135,160,0.18); }
details.bloc summary {
  list-style: none; cursor: pointer;
  padding: 1.05rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details.bloc summary::-webkit-details-marker { display: none; }
details.bloc summary::after {
  content: '+'; flex: none;
  font-family: var(--lletra-cos); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--sorra-700);
}
details.bloc[open] summary::after { content: '–'; }
details.bloc summary .bloc__titol { margin: 0; }
details.bloc summary:hover .bloc__titol { color: var(--teal-700); }
details.bloc > p:last-of-type, details.bloc > .posicions { padding-bottom: 1.1rem; }

/* El boto d'inscripcio flotant de les pagines de programa: a dalt a la dreta,
   sempre a la vista. Un de sol per pagina: ni preus a dalt ni boto a baix. */
.flotaInscriu {
  /* A baix a la dreta a TOTES les mides: a dalt trepitjava el titol sorra de la
     columna de programes. */
  position: fixed; z-index: 44;
  bottom: 16px;
  right: max(16px, env(safe-area-inset-right));
  display: inline-grid; place-items: center;
  height: 45px; padding: 0 1.5rem;
  background: var(--llima); color: var(--negre);
  font-family: var(--lletra-cos); font-weight: var(--pes-boto);
  font-size: 0.9375rem; letter-spacing: 3.75px; text-decoration: none;
  border-radius: 50px; box-shadow: var(--ombra-2);
  transition: transform var(--transicio), box-shadow var(--transicio);
}
.flotaInscriu:hover { transform: translateY(-2px); box-shadow: var(--ombra-3); background: var(--llima-700); }
@media (max-width: 900px) {
  /* per sobre de la barra d'app */
  .flotaInscriu { bottom: calc(64px + env(safe-area-inset-bottom) + 12px);
    letter-spacing: 1px; font-size: 0.85rem; height: 42px; padding: 0 1.2rem; }
}

/* I a la COPIA original, les fotos esglaonades es queden dins de la seva
   columna: desplacades un 18% pero encongides el mateix 18%, perque a pantalla
   ampla ja no envaeixin el text del costat. */
.columnaFotos > :nth-child(even) { margin-left: 18%; max-width: 82%; }

/* -------------------------- grup reduit: la pista ampla, com al Wix del Jordi */

/* Mesurat a l'original a 1920: la pista es una banda de ~950 px ancorada a
   l'esquerra de la pagina (no de la columna de 980), amb els mitjans de ~300-360
   esglaonats a dins (x ~260 i ~440), i el text en una columna de ~615 a la
   dreta. Aixo es el que es reprodueix aqui. */
@media (min-width: 1041px) {
  .seccio > .ambColumna--pista {
    max-width: none;
    margin-left: calc(-1 * var(--buit));
    /* Mesurat al Wix: la columna de text fa 603px exactes. */
    grid-template-columns: minmax(320px, 950px) minmax(0, 603px);
    gap: clamp(2rem, 6vw, 7rem);
    justify-content: start;
  }
  /* El ritme del Jordi, mesurat peca a peca al Wix: la pila comenca 54px sota
     el capdamunt, aires constants de ~65px, i cada mitja te el seu ample i el
     seu despacament propis (zig-zag). La columna de fotos pot acabar mes avall
     que el text: a l'original tambe ho fa. */
  .ambColumna--pista .columnaFotos {
    justify-content: flex-start;
    gap: 4rem;
    padding: 3.375rem 0 4rem;
  }
  .ambColumna--pista .columnaFotos > :nth-child(1) { width: 35%; margin-left: 26%; }
  .ambColumna--pista .columnaFotos > :nth-child(2) { width: 38%; margin-left: 43%; }
  .ambColumna--pista .columnaFotos > :nth-child(3) { width: 33%; margin-left: 28%; }
  .ambColumna--pista .columnaFotos > :nth-child(4) { width: 29%; margin-left: 51%; }
  .ambColumna--pista .columnaFotos > :nth-child(5) { width: 31%; margin-left: 30%; }
  .ambColumna--pista .columnaFotos > :nth-child(6) { width: 35%; margin-left: 46%; }

  /* La banda FOSCA de l'individual: la mateixa foto del jugador, engrandida,
     fa de fons; la copia nitida va emmarcada a dalt (603/950 = 63.5% d'ample,
     desplacada 208/950 = 21.9%, a 6px del capdamunt). Mesurat al Wix. */
  .ambColumna--pista .columnaFotos--fosca {
    justify-content: flex-start;
    padding: 6px 0 0;
    /* Banda NEGRA neta: cap foto de fons. Dues vegades que Oriol hi veu el
       jugador o el seu terra doblats rere el marc (25-ago); el remolinat del
       Wix no aporta res i el negre pur es com es llegeix l'original. */
    background: #000;
  }
  .ambColumna--pista .columnaFotos--fosca > img:first-child { width: 63.5%; margin-left: 21.9%; }
  /* El video de YouTube del Jordi: 592x1074 a x=212. Al Wix acaba ~180px abans
     que el text; la nostra columna es mes compacta, aixi que puja (Oriol 25-ago)
     i respira 2rem sota la foto. */
  .ambColumna--pista .columnaFotos--fosca > .videoBanda {
    width: 62.3%; margin-left: 22.3%; margin-top: 2rem;
  }
}

/* La capcalera de la columna de programes, calcada de l'original del Jordi
   (mesurat al Wix): titol sorra 38 px pes 700, subtitol teal 24 px pes 700,
   tots dos alineats a l'esquerra. Oriol 25-ago: es restaura la jerarquia
   sencera tal com ell la tenia. */
/* ULL: el Wix declara 700 en aquests titols i serveix el mateix fitxer que
   nosaltres, pero el seu render els pinta visiblement mes fins (verificat
   amb zoom a la mateixa finestra el 25-ago-2026; cap instrument ho explica:
   ni metrica, ni AA, ni ombres, ni transformacions). El nostre 600 es el
   que CALCA el seu render, i l'ull d'Oriol mana sobre la mesura. */
.titolPrograma {
  font-family: var(--lletra-titular); font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.375rem);
  color: var(--sorra-500); text-align: left;
  /* Mesurat al Wix: el titol comenca a 13px del capdamunt de la seccio. */
  text-transform: none; margin: 0.8125rem 0 1.25rem;
}
.subtitolPrograma {
  font-family: var(--lletra-titular); font-weight: 600;
  font-size: 1.5rem; color: var(--teal);
  text-transform: none; margin: 0 0 1.5625rem;
}

/* ------------------------------------------------ estils per pagina (Wix) */
/* En Jordi NO te una escala unica: cada pagina te mides i pesos propis.
   Tot mesurat pagina a pagina al Wix el 25-ago-2026. */

/* INICI: titols de seccio 65px/800/espaiat 1.3; intro 600; cos de targeta negre. */
/* El boto 'Mes informacio' del document, vestit com la pindola LLIMA flotant
   de les pagines de programa (Oriol 25-ago): llima, text negre, pindola. */
body.pagina-index .boto[data-document] {
  background: var(--llima); color: var(--negre); border-color: var(--llima);
  border-radius: 999px; font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 3.75px; padding: 0.8rem 1.5rem;
}
body.pagina-index .boto[data-document]:hover { background: var(--llima); border-color: var(--negre); }
body.pagina-index .seccio__titol { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.0625rem); font-weight: 800; letter-spacing: 1.3px; }
body.pagina-index .seccio--intro .prosa p { font-weight: 600; }
/* Mesurat al Wix: el conjunt lema+text fa 874 centrat, amb el text de 542
   (les linies mes llargues que veia Oriol). */
body.pagina-index .seccio--intro > .intro {
  max-width: 874px; margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 542px);
  gap: 79px;
}
body.pagina-index .targeta { font-size: 1rem; color: #000; }
/* Mesurat al Wix: a l'inici tot va sobre crema MENYS els esdeveniments, blancs. */
body.pagina-index .seccio--esdeveniments { background: var(--blanc); }

/* ACADEMY: cita 36px; titols 60px/700/espaiat 1.2; el de la metodologia 36px/600
   sorra; el "Per que neix" 50px/700 sorra; les seccions .cosMig van a pes 500. */
body.pagina-academy .cita p, body.pagina-programes .cita p { font-size: 2.25rem; letter-spacing: 0.72px; }
body.pagina-academy .seccio__titol { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 3.75rem); font-weight: 700; letter-spacing: 1.2px; }
body.pagina-academy .seccio__titol--sorra { font-size: 2.25rem; font-weight: 600; letter-spacing: normal; }
body.pagina-academy .titolNeix { font-size: 3.125rem; font-weight: 700; letter-spacing: normal; color: var(--sorra); text-transform: none; max-width: 560px; }
.cosMig { font-weight: 500; }
/* Fons de l'Academy, sondats al Wix pixel a pixel (25-ago): tot BLANC menys
   «Qui som?» (crema) i «Per que neix...» (gris clar #e8e6e6). Els fons sorra
   de filosofia i valors eren invent meu: fora. */
body.pagina-academy .seccio, body.pagina-academy .seccio--sorra { background: var(--blanc); }
body.pagina-academy .fons-crema { background: var(--crema); }
/* El marc gris del "Per que neix" fa 60px per DALT i per BAIX: el mateix
   gruix que la franja grisa a la dreta del cartell (Oriol 25-ago). */
body.pagina-academy .fons-gris { background: rgb(232, 230, 230); padding-block: 60px; }

/* ------------------- Academy: la geometria del Jordi, mesurada el 25-ago ---
   intro 901 d'ample; foto de l'entreno 918x383; «Qui som?» banda crema amb el
   titol a l'esquerra (centrat en vertical) i text de 526; filosofia i valors
   son PANELLS SORRA centrats sobre blanc (1277 i 1309); metodologia text a
   l'esquerra + foto 954x795 a sang per la dreta; «Per que neix» es un panell
   blanc sobre gris amb el cartell del talent (583x698) a la dreta. */
body.pagina-academy .intro .prosa { max-width: 901px; }
/* 10px de blanc entre la foto i la banda crema, mesurats al Wix (1399->1409). */
.imatgeAmpla--academy { max-width: 918px; margin-bottom: 10px; }

body.pagina-academy .fons-crema { padding-block: 44px; }
/* El bloc sencer del "Qui som?" fa 860px al Wix (titol 542..862, text 875..1401). */
body.pagina-academy .dues { max-width: 860px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 526px); gap: 13px; align-items: center; }
/* El titol s'arrambla a l'esquerra del bloc i deixa aire fins al text (Oriol). */
body.pagina-academy .dues > .seccio__titol { text-align: left; }

/* Aires mesurats al Wix (25-ago): banda Qui som -> panell filosofia 19px;
   panell -> metodologia 31px; foto metodologia -> panell valors 0px. */
.seccioFilosofia { padding: 19px 0 0; }
.seccioMeto { padding: 31px 0 0; }
/* Extra nostre: el mateix respir de 4px que hi ha entre el panell de dalt i
   la foto, tambe entre la foto i el panell de valors. */
.seccioValors { padding: 4px 0 70px; }
.panellSorra {
  background: var(--sorra); max-width: 1277px; margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
}
/* Dins del panell, el text es una columna de 806px centrada i CENTRAT, i el
   remat va al mateix pes que el cos (mesurat al Wix). */
.panellSorra .prosa { max-width: 806px; margin-inline: auto; text-align: left; }
.panellSorra .prosa__remat { font-weight: 600; text-align: center; }
/* Panell de valors: 1309x~400 al Wix; titol a 42px del capdamunt. */
.panellSorra--valors { max-width: 1309px; padding-top: 42px; padding-bottom: 20px; }
/* Dins del panell de valors TOT va centrat (Oriol 25-ago, com al Wix). */
.panellSorra--valors .valors { max-width: 806px; margin-inline: auto; text-align: center; }

.ambImatge--metodologia {
  max-width: none;
  width: calc(100% + 2 * var(--buit));
  margin-left: calc(-1 * var(--buit));
  grid-template-columns: minmax(0, 1fr) minmax(0, 954px);
  gap: clamp(2rem, 5vw, 7rem);
  align-items: start;
}
/* El text comenca a x=237 i la foto acaba a la vora dreta (1905), com al Wix:
   +32 al farciment esquerre i 32 de tancament a la dreta (mesurat en viu). */
.ambImatge--metodologia { padding-right: 32px; }
.ambImatge--metodologia > div { padding-left: calc(clamp(1rem, 9vw, 173px) + 32px); }
/* Columna de text de 559 com la del Jordi (les linies trenquen on les seves).
   Mateixa especificitat que ".ambImatge .prosa" (que posa max-width none) i
   mes avall al full: guanya aquesta. */
.ambImatge--metodologia .prosa, .ambImatge--metodologia .pilars,
.ambImatge--metodologia .prosa__remat, .ambImatge--metodologia .seccio__titol { max-width: 559px; }
/* El remat va amb la MATEIXA negreta que els noms dels pilars (600), no mes. */
.ambImatge--metodologia .prosa__remat strong { font-weight: 600; }
/* La foto comenca 27px ABANS que el text: a 4px del panell de sobre, com alla. */
.ambImatge--metodologia img { margin-top: -27px; }
/* Els pilars respiren entre ells, com a l'original. */
.pilars li { margin-bottom: 1.4rem; }
.ambImatge--metodologia .seccio__titol { text-align: left; margin-bottom: 1.5rem; }
.ambImatge--metodologia img { height: auto; }

.neixGrid {
  max-width: none;
  width: calc(100% + 2 * var(--buit));
  margin-left: calc(-1 * var(--buit));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 583px);
  /* stretch: el panell blanc fa l'alcada del cartell (698), com al Wix */
  align-items: stretch; gap: 0;
  /* el cartell del Wix acaba a x=1845, 60px abans de la vora */
  padding-right: 60px;
}
.panellBlanc {
  background: var(--blanc);
  /* el text del Jordi comenca a x=386: 322 dins del panell (17vw ~ 322 a 1920) */
  padding: 70px clamp(2rem, 6vw, 6rem) 70px min(322px, 17vw);
}
.panellBlanc .seccio__titol, .panellBlanc .seccio__signatura { text-align: left; margin-left: 0; }
.panellBlanc .seccio__signatura { margin: 0.5rem 0 1.5rem; }
.panellBlanc .prosa { margin-inline: 0; max-width: 618px; }
.cartellTalent { width: 100%; height: auto; }
@media (max-width: 900px) {
  .ambImatge--metodologia, .neixGrid { grid-template-columns: 1fr; }
  .ambImatge--metodologia > div { padding-left: 0; }
}

/* PROGRAMES: titols de seccio 56px (el de PROGRAMES MBA a 800); targetes amb
   titol 20px/700 sorra i cos de 16px. */
/* Mesurat al Wix amb sonda de pixel (25-ago): la pagina de Programes va sobre
   BLANC, amb la banda crema nomes rere el titol PROGRAMES MBA (la posa la regla
   de .seccio--programesMBA .seccio__titol) i el remoli decoratiu del Jordi rere
   les targetes. */
body.pagina-programes .seccio { background: var(--blanc); }
/* La banda del remoli va A SANG d'esquerra a dreta (al Wix: left 0, 1905
   d'ample) amb les tres targetes centrades a sobre, gairebe tocant-se (8px),
   i el text de targeta amb interlineat 1.8: tot mesurat el 25-ago. */
body.pagina-programes .targetes {
  /* trenca la columna centrada de 980 i s'estén de vora a vora del viewport
     (respectant la banda lateral de l'esquerra) */
  max-width: none;
  width: calc(100% + 2 * var(--buit));
  margin-left: calc(-1 * var(--buit));
  /* La imatge es veu SENCERA (cap retall): la banda te la proporcio exacta del
     grafic (1905x709) i les targetes hi seuen com al Wix (83px de dalt, 148 de
     baix, a escala). Aixi el tros blau de sota les targetes queda al seu lloc. */
  aspect-ratio: 1905 / 709;
  background: url("/img/programes-remoli.jpg") center / 100% 100% no-repeat;
  padding: 4.4% clamp(1rem, 3vw, 2.5rem) 7.8%;
  grid-template-columns: repeat(3, minmax(220px, 322px));
  justify-content: center;
  align-content: start;
  gap: 9px;
}
@media (max-width: 800px) {
  body.pagina-programes .targetes { grid-template-columns: minmax(0, 322px); }
}
/* Mides Wix exactes: targeta 320x485, text de 240 d ample (farciment 2.5rem),
   forats de 9px, asseguda a 84px del capdamunt de la banda. */
body.pagina-programes .targeta--numerada {
  line-height: 1.8;
  min-height: 30.3rem;
  padding: 4.5rem 2.5rem 2.25rem;
}
/* El boto de les targetes al Wix es RECTANGULAR (radi 0, 142x40). */
body.pagina-programes .targeta .boto { border-radius: 0; padding: 0.65rem 1.6rem; }
body.pagina-programes .seccio__titol { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.5rem); font-weight: 700; }
body.pagina-programes .seccio--programesMBA .seccio__titol { font-weight: 800; }
body.pagina-programes .targeta { font-size: 1rem; }
body.pagina-programes .targeta__titol { font-size: 1.25rem; font-weight: 700; color: var(--sorra-500); }

/* CAMPUS: el cos sencer a pes 500; titols de campus 38px/700; entradeta 28px/600;
   "Objectius" 28px/600 cursiva TEAL. */
body.pagina-campus main { font-weight: 500; }
/* Cada fila de programa dels preus porta un panell CREMA de 819x~242 centrat
   rere el text, amb el cartell cavalcant un costat (mesurat al Wix 25-ago). */
body.pagina-preus .tarifa--dreta, body.pagina-preus .tarifa--esquerra { position: relative; align-items: center; }
body.pagina-preus .tarifa--dreta::before, body.pagina-preus .tarifa--esquerra::before {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  height: 242px; left: calc((100% - 819px) / 2); width: 819px;
  background: var(--crema);
}
body.pagina-preus .tarifa--dreta > *, body.pagina-preus .tarifa--esquerra > * { position: relative; z-index: 1; }
/* La fila del CAMPUS tambe porta panell, una mica mes alt (819x287 al Wix). */
body.pagina-preus .tarifes > .tarifa:last-child::before { height: 287px; }

/* Preus, mesurat al Wix (25-ago): fons BLANC, cartells de dalt de 431,
   fotos flanquejants de la tarifa de membre de 307. */
body.pagina-preus .seccio { background: var(--blanc); }
body.pagina-preus .cartells img { max-width: 431px; }
/* El bloc de membre al Wix es mes ample que la columna (1149): s'eixampla
   centrat i la graella mante UNA fila: cartell 307 | cos | cartell 307. */
body.pagina-preus .tarifa--flanquejada {
  /* 1149 reals del Wix: la columna del mig fa 535 i la linia de les
     tecnificacions hi cap SENCERA, com a l'original. */
  max-width: none; width: 1149px;
  margin-left: calc((100% - 1149px) / 2); position: relative;
  grid-template-columns: 307px minmax(0, 1fr) 307px; align-items: center;
  gap: 0; /* al Wix els cartells toquen la zona de text: la columna del mig fa 535 */
}
body.pagina-preus .tarifa--flanquejada > img { width: 307px; max-width: 307px; position: relative; z-index: 1; }
@media (max-width: 1200px) {
  body.pagina-preus .tarifa--flanquejada { width: 100%; grid-template-columns: minmax(0,15rem) minmax(0,1fr) minmax(0,15rem); }
  body.pagina-preus .tarifa--flanquejada > img { width: 100%; }
}
/* El panell CREMA del bloc de membre (819x~429 al Wix): embolcalla la
   inscripcio, la samarreta i el boto, i s'esten per sota dels cartells que
   el flanquegen (ells hi seuen a sobre). */
/* TOT el contingut del bloc de membre viu DINS del box crema (Oriol 25-ago,
   com al Wix): el box fa 819 d'ample i 429 d'alt minim, centrat, i els
   cartells que flanquegen hi cavalquen per sobre. */
body.pagina-preus .tarifa__cos--crema { position: relative; min-height: 429px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 36px 0; box-sizing: border-box; }
body.pagina-preus .tarifa__cos--crema::before { content: '';
  position: absolute; top: 0; bottom: 0;
  left: calc((100% - 819px) / 2); width: 819px;
  background: var(--crema); z-index: 0; }
body.pagina-preus .tarifa__cos--crema > * { position: relative; z-index: 1; }
/* La inscripcio amb la SAMARRETA al costat, com al Wix (93px d'ample). */
body.pagina-preus .tarifa__alta { display: flex; align-items: center; justify-content: center; gap: 24px; }
body.pagina-preus .tarifa__alta img { width: 93px; margin: 0; }

/* Contacte, mesurat al Wix: columna de 808 (x=549), cita de 950, llista amb
   sagnia de 32. */
body.pagina-contacte .prosa, body.pagina-contacte .subtitol,
body.pagina-contacte .marques, body.pagina-contacte .contacteDirecte { max-width: 808px; margin-inline: auto; }
body.pagina-contacte .cita { max-width: 950px; }
body.pagina-contacte .marques li { padding-left: 2rem; }

/* Al Wix el campus i el contacte van tot sobre BLANC, no crema (sonda 25-ago). */
body.pagina-campus .seccio, body.pagina-contacte .seccio { background: var(--blanc); }
/* El cartell del campus es mostra RETALLAT, com al Wix: omple la meitat dreta
   a sang, ancorat a dalt, i el tall deixa els preus fora de la vista (son a
   "Mes informacio"; que no es vegin es important, Oriol 25-ago). El truc
   height:0/min-height:100% fa que l'alcada la mani el text, no el cartell. */
body.pagina-campus .ambImatge {
  max-width: none;
  margin-right: calc(-1 * var(--buit));
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
/* El tall del cartell ensenya JUST el que volen ensenyar (Oriol 25-ago): fins
   sota les linies dels torns (pixel ~1010 de 1308) i la franja de preus, que
   comenca al ~1050, queda fora a qualsevol amplada. */
body.pagina-campus .ambImatge > img { height: auto; aspect-ratio: 942 / 1010; object-fit: cover; object-position: top; }
body.pagina-campus .seccio__titol--esquerra { text-align: center; }
body.pagina-campus .ambImatge p:has(> .boto) { text-align: center; }
/* La pagina acaba alla on acaba el cartell: cap farciment sota (Oriol 25-ago). */
body.pagina-campus .seccio--blanca { padding-bottom: 0; }
body.pagina-campus .seccio__titol--sorra { font-size: 2.375rem; font-weight: 700; }
body.pagina-campus .seccio__entrada { font-size: 1.75rem; font-weight: 600; }
body.pagina-campus .subtitol--sorra { font-size: 1.75rem; color: var(--teal); }

/* GRUP REDUIT: l'unic on el cos de les seccions de programa es Barlow LIGHT 300. */
body.pagina-entrenament-grup-reduit .seccio--fons { font-weight: 300; }

/* INDIVIDUAL: el tancament es en cursiva normal (cap titol gegant). */
.fraseCursiva { font-family: var(--lletra-cos); font-size: 1.125rem; font-weight: 400;
  font-style: italic; color: var(--teal); text-transform: none; text-align: left;
  line-height: 1.4; margin: 0 0 0.35rem; }

/* ============================================================== LA VERSIO 3
   La fase creativa (des del 25-ago). Tot el que es nomes seu penja de
   body.vTres o dels components que nomes la v3 genera (fitxaPatro, fitxaVel):
   la 1 i la 2 no ho veuen mai. */

/* --- la banda de l'esquerra no existeix a la v3 (Oriol: eren dues barres de
   patrocinadors). El build ja no la genera; aqui nomes s'allibera l'espai. */
body.vTres { --banda: 0px; }

/* --- l'orientacio al menu fix (Oriol: l'usuari ha de saber tota l'estona on
   navega). La capcalera de la v3 deixa l'alcada fixa de la replica i reserva
   el fons per a la LINIA DE POSICIO: on ets, i als fills el cami sencer. */
@media (min-width: 901px) {
  body.vTres .capcalera {
    height: auto; min-height: calc(var(--alt-capcalera) + 1px);
    padding-top: 0.6rem; padding-bottom: calc(27px + 0.5rem);
  }
  /* la linia de posicio es un BLOC (Oriol, 25-ago): una franja blanca d'ample
     sencer al fons de la capcalera — el mateix llenguatge que la pastilla
     activa del menu, com si el menu s'estengues cap avall dient on ets. */
  body.vTres .capcalera__on {
    position: absolute; left: 0; right: 0; bottom: 0; height: 27px;
    display: flex; gap: 0.55rem; align-items: center; justify-content: center;
    background: var(--blanc);
    font-family: var(--lletra-cos); font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase; line-height: 1;
    color: var(--negre);
  }
  body.vTres .capcalera__on a { color: var(--tinta-fluixa); text-decoration: none; transition: color 0.15s; }
  body.vTres .capcalera__on a:hover { color: var(--negre); }
  body.vTres .capcalera__onSep { color: var(--tinta-fluixa); font-size: 0.9em; }
  body.vTres .capcalera__on strong { color: var(--negre); }
}
@media (max-width: 900px) { .capcalera__on { display: none; } }

/* el subratllat llima que creix en passar el ratoli: el toc de qualitat del
   menu de la v3 (el commutador i la pastilla activa en queden fora) */
body.vTres .capcalera__nav ul > li > a:not(.canviVersio) { position: relative; }
body.vTres .capcalera__nav ul > li > a:not(.canviVersio)::after {
  content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 4px;
  /* currentColor: el subratllat sempre del mateix color que la lletra que
     subratlla (Oriol, 25-ago) */
  height: 3px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.18s ease;
}
body.vTres .capcalera__nav ul > li > a:not(.canviVersio):hover::after { transform: scaleX(1); }
body.vTres .capcalera__nav a.actiu::after { display: none; }

/* el desplegable de la v3: la primera opcio es el pare ("Tots els programes"),
   separada de les tres filles, i l'opcio d'on ets queda marcada */
body.vTres .submenu .submenu__arrel a { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
body.vTres .submenu a.actiu { background: var(--blanc); color: var(--negre); }

/* La metodologia de l'Academy, fluida: el calc del Wix (columna 954 + padding
   de fins a 205) nomes respira en pantalla ampla, i sense la banda el text
   quedava escanyat a una paraula per linia. A la v3 el text te un minim
   llegible i qui cedeix es la foto; per sota de 800 ja era una columna. */
body.vTres .ambImatge--metodologia { grid-template-columns: minmax(360px, 1fr) minmax(0, 954px); }
/* al telefon la sang d'escriptori sobresortia 16px per la dreta: en una
   columna no hi ha sang que valgui */
@media (max-width: 800px) {
  body.vTres .ambImatge--metodologia { width: auto; margin-left: 0; padding-right: 0; }
}
/* a pantalla ampla, 10.7vw arriba al mateix 205 que el calc del Wix: alla
   res no es mou; el clamp nomes salva les finestres mitjanes */
body.vTres .ambImatge--metodologia > div { padding-left: clamp(1.5rem, 10.7vw, 205px); }

/* El campus, com l'original (Oriol 25-ago, amb captura): el text es una
   COLUMNA de lectura centrada a la seva meitat, i LES LINIES TRENQUEN ON LES
   SEVES (el gate d'Oriol es comptar-les). La font original es mes ampla que
   la nostra Barlow substituta, aixi que la Barlow puja de mida per omplir la
   columna igual: cos 20 (era 18), titol 40 (era 38), i el subtitol conserva
   la seva mida pero amb l'amplada efectiva que fa trencar despres de
   "comenci" (finestra mesurada 431-458px). El cartell no es toca: va a sang
   amb el seu retall, que amaga els preus. */
body.vTres.pagina-campus .ambImatge > div:not(.campusCartells) {
  max-width: 540px; margin-inline: auto; padding-inline: 1.25rem;
  font-size: 1.25rem;
}
body.vTres.pagina-campus .seccio__titol--sorra { font-size: 2.5rem; }
body.vTres.pagina-campus .seccio__entrada { max-width: 445px; }
/* els dos cartells del campus, a la mateixa importancia i EN UNA SOLA FILA
   amb el text (Oriol): text a l'esquerra, els dos cartells al costat amb el
   mateix marc 614x764 que compartien a la portada, cover des de dalt (els
   preus del cartell gran queden fora, com fins ara). */
body.vTres.pagina-campus .ambImatge {
  grid-template-columns: minmax(320px, 540px) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  margin-right: 0; width: auto;
}
body.vTres.pagina-campus .campusCartells {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  /* width explicit, no margin auto: en un grid, margin auto encongeix
     l'item al contingut i les imgs amb amplada relativa col-lapsen */
  width: 100%;
}
/* quan la fila no hi cap, es replega: text a dalt (columna centrada) i els
   dos cartells a sota */
@media (max-width: 950px) {
  body.vTres.pagina-campus .ambImatge { grid-template-columns: 1fr; }
  body.vTres.pagina-campus .campusCartells { margin-top: 1.2rem; }
}
body.vTres.pagina-campus .campusCartells img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 614 / 764; object-fit: cover; object-position: top;
  border-radius: 12px; box-shadow: var(--ombra-2);
}
/* el cartell dels entrenadors es molt vertical (910x1600): dins del marc es
   veu SENCER, mes petit, sobre el fons fosc del propi cartell (Oriol: que es
   vegin el Jordi i la Nuria). El de pretemporada segueix retallant per sota:
   alla es on amaga els preus. */
body.vTres.pagina-campus .campusCartells img:first-child {
  object-fit: contain; background: var(--negre-capcalera);
}
@media (max-width: 620px) { body.vTres.pagina-campus .campusCartells { grid-template-columns: 1fr; } }

/* el logo del peu es un BOTO que es nota (Oriol 25-ago): caixa blanca amb
   vora i ombra, i al pas del ratoli s'aixeca i la vora s'encen. En premer,
   s'enfonsa un pel: la ma nota el clic. Obre la fitxa del patrocinador. */
.peu__patro {
  display: grid; place-items: center;
  background: var(--blanc);
  border: 1px solid var(--vora); border-radius: 12px;
  padding: 1.1rem 1.8rem;
  box-shadow: var(--ombra-1);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.peu__patro:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-2);
  border-color: var(--teal);
}
.peu__patro:active { transform: translateY(-1px); box-shadow: var(--ombra-1); }
.peu__patro img { max-height: 7.5rem; }

/* --- la barra d'avisos de la portada: VISUAL (Oriol) — el cartell en
   miniatura, el titol i el xip del temps. Franja crema sota la capcalera;
   cada avis es una targeta-boto del mateix llenguatge que la resta. */
body.vTres { --alarma: #c24141; }
.avisos { background: var(--crema); border-bottom: 1px solid var(--sorra-500); padding: 0.8rem var(--buit); }
.avisos__dins {
  max-width: var(--ample); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center;
}
.avis {
  display: flex; gap: 0.85rem; align-items: center;
  background: var(--blanc); border: 1px solid var(--vora); border-radius: 12px;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  box-shadow: var(--ombra-1);
  text-decoration: none; color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.avis:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); border-color: var(--teal); }
.avis__imatge { height: 58px; width: auto; border-radius: 8px; }
.avis__titol { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.avis__text { display: block; font-size: 0.82rem; color: var(--negre-500); }
.avis__xip {
  background: var(--alarma); color: #fff;
  font-family: var(--cos); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  padding: 0.35rem 0.65rem; border-radius: 999px;
}
.avis__xip--enMarxa { background: var(--teal); }
.avis__xip--nou { background: var(--llima); color: var(--negre); }
.avis__xip:empty { display: none; }

/* al telefon els avisos son UNA fila lliscant (Oriol, 26-ago): dos o mes
   avisos apilats es menjaven mitja pantalla */
@media (max-width: 900px) {
  .avisos { padding-inline: 0.8rem; }
  .avisos__dins {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: 2px;
  }
  .avis { flex: 0 0 auto; max-width: 86vw; scroll-snap-align: start; }
}

/* les files-marquesina es mouen soles: la scrollbar d'escriptori (Windows la
   pinta amb fletxes) nomes feia soroll sota les targetes */
.avisos__dins, body.vTres .peu__patrocinadors { scrollbar-width: none; }
.avisos__dins::-webkit-scrollbar, body.vTres .peu__patrocinadors::-webkit-scrollbar { display: none; }

/* --- els estats al calendari (v3): el xip es un boto que obre la fitxa, i
   l'estat es veu al xip mateix — cancelat ratllat i apagat, canvi d'horari
   amb vora d'alarma, nou amb el puntet llima. El detall, al pop-up. */
body.vTres .cal__xip { border: 0; font-family: inherit; cursor: pointer; text-align: left; }
body.vTres .cal__xip:hover { filter: brightness(1.08); }
body.vTres .cal__xip--cancelat { text-decoration: line-through; opacity: 0.55; box-shadow: inset 0 0 0 1px var(--alarma); }
body.vTres .cal__xip--canvi { box-shadow: inset 0 0 0 2px var(--alarma); }
body.vTres .cal__xip--canvi::before { content: '⚠ '; }
body.vTres .cal__xip--nou::before { content: '● '; color: var(--llima); }

/* --- la fitxa de l'event: el pop-up del calendari amb tot el que cal saber */
.fitxaEvent {
  position: fixed; inset: 0; z-index: 79;
  background: rgba(13, 16, 20, 0.6);
  display: grid; place-items: center; padding: 1rem;
}
.fitxaEvent__targeta {
  width: min(390px, 100%);
  background: var(--blanc); border-radius: 14px;
  padding: 1.4rem 1.5rem 1.3rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  position: relative;
}
.fitxaEvent__tanca {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; border: 0; background: none;
  display: grid; place-items: center;
  color: var(--negre-500);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.fitxaEvent__tanca:hover { color: var(--negre); }
.fitxaEvent__targeta > .cal__xip { cursor: default; }
.fitxaEvent__estat {
  margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 8px;
  background: rgba(194, 65, 65, 0.09); border: 1px solid var(--alarma);
  font-size: 0.9rem; line-height: 1.45;
}
.fitxaEvent__estat strong { color: var(--alarma); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; }
.fitxaEvent__titol { font-size: 1.35rem; margin: 0.8rem 0 0.3rem; }
.fitxaEvent__quan { margin: 0 0 0.2rem; font-weight: 600; }
.fitxaEvent__lloc { margin: 0 0 0.4rem; color: var(--negre-500); font-size: 0.95rem; }
.fitxaEvent__accio { display: inline-block; margin-top: 0.9rem; }

/* la fitxa del DIA: cada event dins de la SEVA CAIXA, amb tot — boto de
   +info inclos (Oriol: hi poden conviure 2, 3 o 4 events per dia) */
.fitxaDia__event {
  padding: 0.85rem 0.95rem; margin-top: 0.8rem;
  background: var(--gris-100); border: 1px solid var(--vora); border-radius: 12px;
}
.fitxaDia__event:first-of-type { margin-top: 0.6rem; }
.fitxaDia__nom { margin: 0.55rem 0 0.15rem; font-weight: 700; font-size: 1.05rem; }
.fitxaDia__hora { margin: 0 0 0.15rem; font-weight: 600; }
.fitxaDia__accio { display: inline-block; margin-top: 0.55rem; }

/* --- el vel de sota la fitxa: transparent a l'ordinador (nomes hi es per
   capturar el clic de fora), fosc al telefon (la fitxa es un full inferior). */
.fitxaVel { position: fixed; inset: 0; z-index: 78; }

/* --- la fitxa del patrocinador. Surt DES del boto: escala des de l'origen
   que el JS li posa (el punt del logo), en ~0.2s. */
.fitxaPatro {
  position: fixed; z-index: 79;
  width: min(350px, calc(100vw - 24px));
  padding: 1.5rem 1.5rem 1.2rem;
  background: var(--blanc); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  text-align: center;
  opacity: 0; transform: scale(0.65); transform-origin: left bottom;
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.12);
}
.fitxaPatro.esVeu { opacity: 1; transform: none; }

.fitxaPatro__tanca {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; border: 0; background: none;
  display: grid; place-items: center;
  color: var(--negre-500);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.fitxaPatro__tanca:hover { color: var(--negre); }

.fitxaPatro__logo { display: grid; place-items: center; height: 110px; margin: 0.9rem 0; }
.fitxaPatro__logo img { max-width: min(250px, 85%); max-height: 100%; object-fit: contain; }
.fitxaPatro__nom { font-size: 1.35rem; margin-bottom: 0.5rem; }
.fitxaPatro__text { font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.15rem; }
.fitxaPatro__web { display: inline-block; }

/* --- el visor del dossier (v3): les pagines del PDF com a imatges, en un
   pop-up dins de la mateixa finestra. A l'ordinador, finestra centrada; al
   telefon, pantalla sencera. El cos fa scroll i cada pagina es una imatge. */
.visorDossier {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(13, 16, 20, 0.78);
  display: grid; place-items: center; padding: 1.2rem;
}
.visorDossier__finestra {
  width: min(860px, 100%); max-height: 100%;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--blanc); border-radius: 12px; overflow: hidden;
}
.visorDossier__barra {
  display: flex; gap: 0.6rem; align-items: center;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--vora);
}
.visorDossier__titol { margin-right: auto; font-weight: 700; }
.visorDossier__cos {
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--gris-100);
  padding: 0.9rem; display: grid; gap: 0.9rem; align-content: start;
}
.visorDossier__cos img { width: 100%; height: auto; box-shadow: var(--ombra-1); }
@media (max-width: 900px) {
  .visorDossier { padding: 0; }
  .visorDossier__finestra { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

/* al telefon la fitxa es un full inferior, per sobre de la barra d'app.
   L'!important guanya el left/top que el JS posa en linia per a l'ordinador. */
@media (max-width: 900px) {
  .fitxaVel { background: rgba(10, 12, 14, 0.55); }
  .fitxaPatro {
    inset: auto 0 0 0 !important;
    width: auto; border-radius: 16px 16px 0 0;
    padding-bottom: calc(1.3rem + env(safe-area-inset-bottom));
    transform: translateY(100%); transform-origin: center bottom !important;
  }
  .fitxaPatro.esVeu { transform: translateY(0); }
}

/* --- la llenca del peu (idea d'Oriol): el peu es identic a tota la web, aixi
   que sempre en treu el cap una pestanya a baix de la finestra. En repos nomes
   es veu el rotol; amb el ratoli (o el focus) puja i ensenya els logos; el
   clic porta al final de la pagina. Quan el peu de veritat ja es veu, la
   llenca s'aparta. Nomes a l'ordinador: al telefon la barra d'app mana.
   Nomes es desplega si el JS es viu (body.teLlenca): sense JS, cap barrera. */
.peuLlenca { display: none; }
body.vTres.teLlenca .peuLlenca {
  position: fixed; left: var(--banda); right: 0; bottom: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.35rem 1rem 0.6rem;
  background: var(--crema); border: 0; border-top: 1px solid var(--sorra-500);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  /* en repos, nomes el rotol (com agradava a Oriol): la pestanya discreta */
  transform: translateY(calc(100% - 27px));
  transition: transform 0.22s ease;
}
/* el creixement per ratoli nomes on hi ha ratoli de veritat: en pantalla
   tactil el :hover queda enganxat despres del toc i la llenca no sap
   tornar-se a encongir. */
@media (hover: hover) {
  body.vTres.teLlenca .peuLlenca:hover { transform: translateY(0); }
}
body.vTres.teLlenca .peuLlenca:focus-visible { transform: translateY(0); }
body.vTres.teLlenca.peuVist .peuLlenca { transform: translateY(105%); }
/* al telefon la llenca RENAIX en versio fina (Oriol, 26-ago): una pestanyeta
   sobre la barra d'app, nomes el rotol — el toc porta al peu (contacte i
   patrocinadors), i quan el peu ja es veu, es fica darrere la barra. */
@media (max-width: 900px) {
  body.vTres.teLlenca .peuLlenca {
    display: flex; left: 0;
    bottom: var(--altBarra, calc(64px + env(safe-area-inset-bottom)));
    /* el mes fina possible (Oriol): nomes la linia del rotol */
    padding: 0.18rem 1rem 0.2rem; gap: 0;
    transform: none; box-shadow: 0 -5px 14px rgba(0, 0, 0, 0.09);
  }
  body.vTres.teLlenca .peuLlenca .peuLlenca__logos { display: none; }
  body.vTres.teLlenca.peuVist .peuLlenca { transform: translateY(130%); }
}

/* el boto de tornar a dalt (mobil): apareix quan el peu es veu, al raco del
   senyal de lliscar (que nomes viu a dalt de tot: mai coincideixen) */
.tornaAmunt { display: none; }
@media (max-width: 900px) {
  /* superdiscreta (Oriol): petita, translucida, a l'extrem esquerre i a la
     mateixa alcada que el flotant PDF de la dreta */
  /* el trocet blanc de sota el peu: el coixi del body comptava 64px quan la
     barra en fa 56 de reals — es retalla a la mida mesurada */
  body.vTres { padding-bottom: var(--altBarra, calc(64px + env(safe-area-inset-bottom))); }

  /* la bola de la familia (blanca, vora, glif teal), a l'alcada del boto
     PDF: en apareixer fa el bot de la casa UN COP i despres es FON amb el
     fons carn — presencia primer, discrecio despres (Oriol) */
  body.vTres .tornaAmunt {
    display: grid; place-items: center;
    position: fixed; z-index: 61;
    bottom: calc(var(--altBarra, 64px) + 42px); left: 12px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--blanc); border: 1px solid var(--vora); color: var(--teal);
    box-shadow: var(--ombra-2);
    cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  body.vTres.peuVist .tornaAmunt {
    opacity: 1; pointer-events: auto;
    animation:
      peuPecaCrida 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.2) 0.25s both,
      fletxaEsFon 0.7s ease 1.7s forwards;
  }
  .tornaAmunt svg { width: 16px; height: 16px; }
  .tornaAmunt:active { transform: scale(0.92); }
}

.peuLlenca__rotol {
  font-family: var(--cos); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tinta-fluixa); line-height: 1.2;
}
/* la fletxa del rotol bota suaument en bucle mentre el peu encara no es veu:
   el senyal de sempre de "clica, que aqui baix hi ha mes". Quan el peu ja
   es a la vista, para. */
@keyframes llencaFletxaBota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.peuLlenca__fletxa {
  display: inline-block; letter-spacing: 0;
  animation: llencaFletxaBota 2.2s ease-in-out infinite;
}
body.peuVist .peuLlenca__fletxa { animation: none; }

/* el ratoli: amagat en repos; en aixecar-se la llenca apareix davant del
   rotol (que segueix dient "Patrocinadors", mateix color) amb el boto
   esquerre pintant-se de verd en intermitencia — l'usuari veu que apretant
   el boto del ratoli passara alguna cosa */
.peuLlenca__ratoli {
  display: none;
  width: 17px; height: 23px;
  vertical-align: -6px; margin-right: 0.45rem;
}
/* el ratoli es concepte d'escriptori: al telefon no surt mai (Oriol) */
@media (min-width: 901px) {
  .peuLlenca:hover .peuLlenca__ratoli,
  .peuLlenca:focus-visible .peuLlenca__ratoli { display: inline-block; }
}
@keyframes ratoliClicVerd {
  0%, 100% { fill: transparent; }
  50% { fill: #2eb050; }
}
.peuLlenca__ratoliBoto { animation: ratoliClicVerd 0.9s ease-in-out infinite; }
.peuLlenca__logos { display: flex; gap: 0.7rem; align-items: center; }
/* les caixetes, prou grans perque les marques es reconeguin (abans eren
   segells de 46px on el logo es veia malament) */
.peuLlenca__caixa {
  display: grid; place-items: center;
  width: 92px; height: 62px; padding: 7px;
  background: var(--blanc); border: 1px solid var(--vora);
  border-radius: var(--radi-0); box-shadow: var(--ombra-1);
}
.peuLlenca__caixa img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* el peu de veritat surt de baix a dalt quan hi arribes; mentre no hi ets,
   espera ajupit. Nomes quan la llenca es viva: sense JS, el peu es normal. */
body.vTres.teLlenca .peu {
  transform: translateY(46px); opacity: 0.35;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.4s ease;
}
body.vTres.teLlenca.peuVist .peu { transform: none; opacity: 1; }

/* el boto flotant d'inscripcio puja per sobre de la pestanya de la llenca */
@media (min-width: 901px) {
  body.vTres.teLlenca .flotaInscriu { bottom: 44px; }
}

/* --- el flotant del dossier (v3): un full de paper GRAN amb "PDF" — es veu
   d'una hora lluny que apretant tens la informacio en paper. Mateix racó que
   el flotant de sempre, per sobre de la pestanya de la llenca. */
.flotaPaper {
  position: fixed; z-index: 44;
  bottom: 44px; right: max(16px, env(safe-area-inset-right));
  display: grid; justify-items: center; gap: 0.15rem;
  width: 74px; padding: 0.6rem 0.4rem 0.5rem;
  background: var(--llima); border-radius: 16px;
  box-shadow: var(--ombra-2); text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.flotaPaper:hover { transform: translateY(-3px); box-shadow: var(--ombra-3); background: var(--llima-700); }
.flotaPaper__full { width: 34px; height: 42px; }
.flotaPaper__fons { fill: var(--blanc); }
.flotaPaper__punta { fill: var(--negre-capcalera); opacity: 0.25; }
.flotaPaper__ratlles rect { fill: var(--teal); }
.flotaPaper__text {
  font-family: var(--cos); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--negre);
}
@media (max-width: 900px) {
  /* per sobre de la pestanyeta de patrocinadors (~20px), amb aire: que no
     hi quedin enganxats — el PDF i el boto de reservar, a la mateixa alcada */
  .flotaPaper { bottom: calc(var(--altBarra, 64px) + 42px); }
  body.vTres .flotaInscriu { bottom: calc(var(--altBarra, 64px) + 42px); }
  .flotaParla { bottom: calc(var(--altBarra, 64px) + 42px); }
  body.vTres .hero__crides { justify-content: center; }
}

/* --- el mobil de la v3, repassat amb Oriol (26-ago) --- */
@media (max-width: 900px) {
  /* la pastilla d'inscripcio era enorme; mes continguda (el redisseny de
     debo del boto queda pendent, tambe en web) */
  body.vTres .capcalera__pastilles a { height: 34px; font-size: 0.8rem; letter-spacing: 0.5px; }

  /* les tres targetes de programes van EN FILA, compactes: nomes el titol i
     la crida de detall; el contingut sencer s'obre al pop-up (v3.js).
     Aspecte de BOTO de la casa (Oriol: no es notava que es podien apretar):
     caixa blanca amb vora i ombra que s'enfonsa en tocar-la. La franja de
     foto que tallava el bloc per la meitat, fora: el titol i els tres botons
     formen una sola peca. */
  body.vTres .seccio--programes .franja { display: none; }
  /* L'ESCENA dels programes (Oriol, 26-ago: "ha de ser brutal"): la seccio
     sencera es una peca fosca amb la foto del jugador de fons; el titol en
     blanc hi viu a dins amb la linia que parla al pare, i els tres botons
     blancs es col-loquen a sobre entrant dels costats (coreografia de sota). */
  body.vTres .seccio--programes {
    background:
      linear-gradient(rgba(13, 16, 20, 0.5), rgba(13, 16, 20, 0.42)),
      url("/img/hero-jugador.png") center 30% / cover no-repeat;
    border-radius: 16px; margin: 0 0.8rem; padding: 1.5rem 0.9rem 1.3rem;
  }
  body.vTres .seccio--programes .seccio__titol { color: var(--blanc); }
  /* a la pagina Programes, el fons de l'escena es la foto que la web
     original te alla (la banda de programes), no la de la portada (Oriol) */
  body.vTres .seccio--programes.seccio--programesMBA {
    background:
      linear-gradient(rgba(13, 16, 20, 0.5), rgba(13, 16, 20, 0.42)),
      url("/img/programes-banda.jpg") center / cover no-repeat;
  }
  body.vTres .seccio--programes .targetes { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  body.vTres .seccio--programes .targetes .targeta:nth-child(3) { grid-column: 1 / -1; min-height: 84px; }

  /* el lema neix del centre (Oriol, 26-ago): el bloc centrat a l'eix — les
     tres linies escalonades a l'esquerra dins seu — i entra creixent des del
     centre. UN COP PER CARREGA: el rearme en aquesta zona (a tocar de la
     vora del viewport) era fragil i Oriol accepta el one-shot com el primer
     dia («torna a deixar-ho com quan era funcional»). */
  body.vTres.pagina-index .intro__lema {
    /* la intro es un grid: el centrat de l'item va per justify-self, no per
       margins auto (la cel-la s'ajusta al contingut i no deixen espai).
       L'alineacio del text es la de la base (center): no es toca. */
    width: fit-content; grid-column: 1 / -1; justify-self: center;
  }
  /* l'animacio COMPOSA amb l'estirament scaleY(1.23) del lema (la proporcio
     del DIN): acabar en "none" l'esborrava i la lletra es veia xata */
  body.vTres.pagina-index .intro__lema.teEntrada {
    opacity: 0; transform: scaleY(1.23) scale(0.55); transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.3, 1.12), opacity 0.45s ease;
  }
  body.vTres.pagina-index .intro__lema.teEntrada.esVeu { opacity: 1; transform: scaleY(1.23); }

  /* la coreografia: el primer boto entra de l'esquerra, el segon de la
     dreta, el tercer puja — i s'assenten sobre la foto amb un puntet de
     rebot. Nomes el primer cop que el bloc entra a la vista (v3.js). */
  body.vTres .seccio--programes .targetes.teEntrada .targeta {
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.2, 0.85, 0.3, 1.14), opacity 0.4s ease;
  }
  body.vTres .seccio--programes .targetes.teEntrada .targeta:nth-child(1) { transform: translateX(-46px); }
  body.vTres .seccio--programes .targetes.teEntrada .targeta:nth-child(2) { transform: translateX(46px); transition-delay: 0.08s; }
  body.vTres .seccio--programes .targetes.teEntrada .targeta:nth-child(3) { transform: translateY(30px); transition-delay: 0.16s; }
  body.vTres .seccio--programes .targetes.teEntrada.esVeu .targeta { opacity: 1; transform: none; }
}
@keyframes targetaBatec {
  0%, 100% { transform: scale(1); box-shadow: var(--ombra-1); }
  10% { transform: scale(1.03); box-shadow: var(--ombra-2); }
  20% { transform: scale(1); box-shadow: var(--ombra-1); }
}
@media (max-width: 900px) {
  body.vTres .seccio--programes .targetes .targeta {
    padding: 0.9rem 0.5rem; gap: 0.45rem; min-height: 104px;
    cursor: pointer; text-align: center; align-items: center; justify-content: center;
    background: var(--blanc); border: 1px solid var(--vora); border-radius: 12px;
    box-shadow: var(--ombra-1);
    transition: transform 0.12s, box-shadow 0.12s;
  }
  body.vTres .seccio--programes .targetes .targeta:active { transform: scale(0.96); box-shadow: none; }
  /* a la compacta nomes sobreviu el titol (les targetes de la portada i les
     de Programes tenen estructures una mica diferents: aixi val per totes);
     els cercles numerats del disseny gran tampoc hi caben (a 104px d'alt
     tapaven mig titol) */
  body.vTres .seccio--programes .targetes .targeta > :not(.targeta__titol) { display: none; }
  /* la bola del numero, petita i a cavall del perimetre superior, centrada
     (Oriol): el cercle gran del disseny d'escriptori tapava mig titol */
  body.vTres .seccio--programes .targetes .targeta--numerada { position: relative; overflow: visible; }
  body.vTres .seccio--programes .targetes .targeta--numerada::before {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--blanc); border: 1px solid var(--vora); box-shadow: var(--ombra-1);
    font-size: 0.78rem; font-weight: 700; color: var(--teal); line-height: 1;
    margin: 0; padding: 0;
  }
  body.vTres .seccio--programesMBA .targetes { gap: 1.2rem; padding-top: 1.4rem; }
  /* el carn va a les medalletes dels numeros; els botons, blancs com la
     familia (Oriol, 26-ago) */
  body.vTres .seccio--programesMBA .targetes .targeta--numerada::before { background: var(--crema); }
  /* el titol de l'escena de Programes, en el blau original: sobre el fons
     clar del remoli el blanc no es veia (Oriol) */
  body.vTres .seccio--programes.seccio--programesMBA .seccio__titol { color: var(--teal); }
  /* el titol de la compacta en TEAL, com el titol de la seccio: l'or sobre
     blanc no contrastava; el blanc de la targeta es queda — es el llenguatge
     de boto de tota la v3 (criteri, 26-ago) */
  body.vTres .seccio--programes .targetes .targeta__titol { font-size: 1.02rem; line-height: 1.25; color: var(--teal); }
  /* el senyal d'apretable es un EFECTE, no un icona (Oriol): els botons
     respiren — un batec suau que recorre els tres en onada. Arrenca quan
     l'entrada coreografiada ja ha acabat, i el toc (active) el talla. */
  body.vTres .seccio--programes .targetes.esVeu .targeta {
    animation: targetaBatec 3.6s ease-in-out infinite;
  }
  body.vTres .seccio--programes .targetes.esVeu .targeta:nth-child(1) { animation-delay: 1s; }
  body.vTres .seccio--programes .targetes.esVeu .targeta:nth-child(2) { animation-delay: 2.2s; }
  body.vTres .seccio--programes .targetes.esVeu .targeta:nth-child(3) { animation-delay: 3.4s; }
  body.vTres .seccio--programes .targetes .targeta:active { animation: none; transform: scale(0.96); box-shadow: none; }

  /* el peu de telefon, repensat (Oriol, 26-ago: "no queda gens be"):
     el rotol PATROCINADORS que dona context, les dues caixes en UNA fila
     compacta i centrada, cap fletxa (al telefon el polze ja puja sol), i
     aire de sota perque ni la barra d'app ni el flotant PDF tapin res */
  body.vTres .peu { padding-bottom: calc(var(--altBarra, 64px) + 90px); }
  body.vTres .peu__patrocinadors { flex-wrap: nowrap; justify-content: center; gap: 0.7rem; }
  body.vTres .peu__patro { padding: 0.55rem 0.85rem; border-radius: 10px; }
  body.vTres .peu__patro img { max-height: 2.9rem; max-width: 34vw; object-fit: contain; }
  body.vTres .peu__fletxes { display: none; }
}

/* el focus d'obertura va al pop-up sencer (tabindex -1), no a la ✕: el
   requadre teal del focus queda per a qui navega amb el teclat de veritat */
[tabindex="-1"]:focus { outline: none; }

/* en obrir-se QUALSEVOL fitxa de la casa, les peces apretables (el boto i
   la ✕) fan el bot que diu "prem-me" — el mateix gest que les peces del peu
   (Oriol, 26-ago) */
.fitxaEvent__targeta .boto, .fitxaPatro .fitxaPatro__web {
  animation: peuPecaCrida 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
  animation-delay: 0.08s;
}
.fitxaEvent__targeta .fitxaEvent__tanca, .fitxaPatro .fitxaPatro__tanca {
  animation: peuPecaCrida 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
  animation-delay: 0.2s;
}

/* el pop-up d'un programa (mobil): la targeta sencera, clonada dins del
   marc de fitxa; aqui la llista, el preu i el boto tornen a veure's.
   El titol deixa lloc a la ✕ (la tapava), i el preu i el boto van centrats
   a l'eix (Oriol, 26-ago). */
.fitxaPrograma { text-align: left; }
.fitxaPrograma .targeta__titol { padding-right: 2.4rem; }
.fitxaPrograma .targeta__llista { margin: 0.7rem 0 0.5rem; padding-left: 1.15rem; }
.fitxaPrograma .targeta__preu { margin-top: 0.7rem; text-align: center; }
.fitxaPrograma .boto { display: block; width: fit-content; margin: 0.9rem auto 0; }

/* el commutador de vistes del calendari es cosa del telefon */
@media (min-width: 901px) { .calVistes { display: none; } }

/* l'event assenyalat des d'un avis: anell d'alarma que fa tres polsos — es
   veu d'una hora lluny quin es, a la llista i a la graella */
@keyframes assenyala {
  0%, 100% { box-shadow: 0 0 0 2px var(--alarma); }
  50% { box-shadow: 0 0 0 6px rgba(194, 65, 65, 0.35), 0 0 0 2px var(--alarma); }
}
.cal__xip--assenyalat { animation: assenyala 0.9s ease-in-out 3; box-shadow: 0 0 0 2px var(--alarma); }
.cal__dia--assenyalat { box-shadow: inset 0 0 0 2px var(--alarma); }

/* el flotant de reserva: text llarg a l'ordinador, curt al telefon */
.flotaInscriu__curt { display: none; }
@media (max-width: 900px) {
  body.vTres .flotaInscriu__llarg { display: none; }
  body.vTres .flotaInscriu__curt { display: inline; }

  /* l'escena del video (individual i grup reduit): fora la foto del nen --
     el video centrat a la banda fosca amb el seu requadre (Oriol, 26-ago) */
  body.vTres .ambColumna--pista .columnaFotos--fosca > img { display: none; }
  /* PREUS al telefon (Oriol, 26-ago): els panells crema del Wix son de
     819px fixos i el bloc de membre de 1149 — a 468 de pantalla desborden i
     deixen taques crema buides. Fora els panells; amples naturals. */
  body.vTres.pagina-preus .tarifa--dreta::before,
  body.vTres.pagina-preus .tarifa--esquerra::before,
  body.vTres.pagina-preus .tarifes > .tarifa:last-child::before { display: none; }
  /* margin-left: 0 es LA clau — el centrat del 1149 del Wix (calc negatiu de
     -340px) empenyia el bloc sencer fora de pantalla per l'esquerra.
     I el grid de 3 columnes del Wix (307+text+307) guanyava el plegat
     generic: aqui es replega de deb0 — LA VENDA PRIMER (el panell crema amb
     quota, inscripcio i boto) i els dos cartells del Jordi despres, costat
     a costat com al campus. */
  body.vTres.pagina-preus .tarifa--flanquejada {
    width: auto; max-width: 100%; margin-left: 0;
    grid-template-columns: 1fr 1fr; gap: 0.7rem;
  }
  body.vTres.pagina-preus .tarifa--flanquejada > .tarifa__cos--crema { grid-column: 1 / -1; order: -1; }
  body.vTres.pagina-preus .tarifa--flanquejada > img {
    width: 100%; max-width: none; order: 1;
    border-radius: 10px; box-shadow: var(--ombra-1);
  }
  /* i el panell crema interior de 819px fixos, fora: el fons crema el porta
     el cos mateix, a la seva mida real */
  body.vTres.pagina-preus .tarifa__cos--crema::before { display: none; }
  body.vTres.pagina-preus .tarifa__cos--crema {
    min-height: 0; background: var(--crema);
    border-radius: 12px; padding: 1.3rem 1rem;
  }

  /* res aqui: l'assenyalament de l'event viu fora del media (val tambe a
     escriptori) — vegeu cal__xip--assenyalat mes avall */
  /* les DUES VISTES del calendari (Oriol, 26-ago): Llista per defecte, i
     Mes — la graella compactada per a dit: caselles baixes i els events com
     a PUNTETS de color que obren la seva fitxa en tocar-los. El pager de
     mesos torna a la vista Mes; la llegenda tambe (alla els xips conserven
     el text: es el diccionari dels puntets). */
  /* l'interruptor de bola de MossosApp (Oriol): etiqueta + switch, a la
     dreta — apagat es la llista, ences la vista de mes */
  .calVistes {
    display: flex; gap: 0.55rem; align-items: center;
    margin: 0.85rem 0.9rem 0.2rem auto; width: fit-content;
  }
  .calVistes__text {
    font-family: var(--lletra-cos); font-weight: 700; font-size: 0.85rem;
    color: var(--negre-500);
  }
  .interruptor {
    position: relative; width: 42px; height: 24px; flex: 0 0 auto;
    border: 0; border-radius: 999px; background: var(--gris-300);
    cursor: pointer; transition: background 0.18s ease; padding: 0;
  }
  .interruptor[aria-checked="true"] { background: var(--teal); }
  .interruptor__bola {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--blanc); box-shadow: var(--ombra-1);
    transition: transform 0.18s ease;
  }
  .interruptor[aria-checked="true"] .interruptor__bola { transform: translateX(18px); }
  body.vTres.vistaMes .cal { display: grid; gap: 1rem; }
  body.vTres.vistaMes .calLlista { display: none; }
  body.vTres.vistaMes .cal__controls { display: grid; margin-top: 0.6rem; }
  body.vTres.vistaMes .cal__llegenda { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; margin: 0.8rem 0 0; }
  body.vTres.vistaMes .cal__dia { min-height: 44px; padding: 3px; gap: 2px; }
  body.vTres.vistaMes .cal__graella .cal__xip {
    font-size: 0; padding: 0; width: 9px; height: 9px; border-radius: 50%;
    display: inline-block; margin: 1px;
  }
  body.vTres.vistaMes .cal__graella .cal__xip::before { content: none; }
  body.vTres.vistaMes .cal__graella .cal__xip--cancelat { text-decoration: none; opacity: 1; }

  /* el "Qui som?" (i qualsevol .dues): al telefon el grid de dues columnes
     es plega — el titol gran desbordava la seva columna i trepitjava el
     text (Oriol, 26-ago) */
  body.vTres .dues { grid-template-columns: 1fr; gap: 0.8rem; }
  body.vTres .dues > .seccio__titol { text-align: left; }

  /* els valors, alineats a l'esquerra al telefon (Oriol): centrats es veien
     desendrecats; a l'ordinador queden com el Jordi els te */
  body.vTres .valors, body.vTres .valors li, body.vTres .valors p { text-align: left; }

  /* la banda de titol de pagina, FIXA sota la capcalera en baixar (Oriol):
     al telefon no hi ha linia de posicio, i aixi sempre saps on ets. Nomes
     les pagines interiors (.portada); la home te el seu hero i no en porta. */
  body.vTres .portada {
    position: sticky; top: var(--altCapMobil, 52px); z-index: 40;
  }
  /* la fletxa de tornada de les filles de Programes, dins de la banda: el
     back d'app de tota la vida, sempre visible perque la banda es sticky */
  body.vTres .portada:has(.portada__enrere) { padding-left: 44px; }
  body.vTres .portada__enrere {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 40px; height: 40px;
    color: var(--blanc); text-decoration: none; font-size: 1.35rem; line-height: 1;
  }
  body.vTres .portada__enrere:active { transform: translateY(-50%) scale(0.9); }

  /* les fotos esglaonades, centrades al telefon (Oriol, grup reduit): amb el
     text a sota, l'esglaonat cap a la dreta quedava estrany — a l'eix */
  body.vTres .columnaFotos > :nth-child(even) { margin-left: 0; max-width: 100%; }

  /* grid-template 100%: sense columna explicita, el 74% del video es
     calculava sobre una cel-la mesurada pel contingut (la circularitat) */
  body.vTres .ambColumna--pista .columnaFotos--fosca { display: grid; grid-template-columns: 100%; place-items: center; padding: 1.4rem 0; }
  body.vTres .ambColumna--pista .columnaFotos--fosca > .videoBanda {
    width: 74% !important; height: auto; aspect-ratio: 592 / 1074; margin: 0;
    border: 3px solid var(--sorra-500); border-radius: 12px;
  }
}

/* --- el senyal de lliscar (mobil, portada): chevron doble que bota a baix a
   l'esquerra mentre ets a dalt de tot; quan comences a baixar, marxa. Fa
   parella amb el flotant PDF de la dreta. */
.llisca { display: none; }
@media (max-width: 900px) {
  body.vTres .llisca {
    display: grid; place-items: center;
    position: fixed; z-index: 44;
    bottom: calc(var(--altBarra, 64px) + 18px); left: 18px;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(13, 16, 20, 0.55); color: var(--blanc);
    opacity: 1; transition: opacity 0.3s ease;
    pointer-events: none;
    animation: lliscaBota 2s ease-in-out infinite;
  }
  body.vTres.haBaixat .llisca { opacity: 0; }
  /* el telefon en trac fi amb el dit verd que llisca amunt: el germa del
     ratoli del clic verd (Oriol: mateix estil, pero indicant lliscar) */
  .llisca { animation: none; }
  .llisca__telefon { width: 22px; height: 31px; }
}
/* el dit llisca de DALT A BAIX (Oriol): la direccio del viatge del lector,
   com la fletxa de la llenca — es el que comunica "ves avall" */
/* el fos de la fletxa cap al fons carn: despres del bot, fantasma */
@keyframes fletxaEsFon {
  to { background: var(--crema); border-color: var(--sorra-500); box-shadow: none; opacity: 0.62; }
}
@keyframes ditLlisca {
  0% { transform: translateY(-11px); opacity: 0; }
  22% { opacity: 1; }
  68% { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}
.llisca__dit { animation: ditLlisca 1.7s ease-in-out infinite; }
.llisca__estela { animation: ditLlisca 1.7s ease-in-out infinite; animation-delay: 0.14s; }

/* la fila de patrocinadors de la v3 es pot tornar marquesina: una sola
   linia, centrada quan cap (safe center) i lliscant en bucle quan no
   (v3.js). La barra de scroll no es pinta. */
body.vTres .peu__zona { max-width: var(--ample); margin-inline: auto; }
body.vTres .peu__patrocinadors {
  flex-wrap: nowrap; justify-content: safe center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.vTres .peu__patrocinadors::-webkit-scrollbar { display: none; }
body.vTres .peu__patrocinadors .peu__patro { flex: 0 0 auto; }

/* el contacte al peu (v3): adreca, correu i telefon a totes les pagines */
.peu__contacte {
  max-width: var(--ample); margin: 1.6rem auto 0;
  display: flex; flex-direction: column; gap: 0.25rem; align-items: center;
  font-style: normal; font-size: 0.9rem; line-height: 1.6;
  color: var(--negre-500); text-align: center;
}
.peu__contacte a { text-decoration: none; font-weight: 600; color: var(--teal); }
.peu__contacte a:hover { text-decoration: underline; }

/* les dues fletxes del peu, a la fila de les caixes: ▾ tanca el peu (tot com
   abans d'obrir-se) i ▴ puja a dalt. Mateix llenguatge de boto que les caixes
   dels patrocinadors: rodones, blanques, amb vora i ombra, i hover que
   s'aixeca — quatre llocs clarament apretables en una sola fila. */
.peu__fletxes { display: flex; gap: 0.7rem; align-items: center; }
/* a l'ordinador cavalquen la frontera del peu (Oriol): el centre de cada bola
   just a la linia — mitja bola sobre el blanc de la pagina, mitja sobre el
   crema del peu — i al CENTRE de la pagina, no a la dreta. Fora del flux:
   mai engreixen la barra. Al telefon, al flux. */
@media (min-width: 901px) {
  body.vTres .peu { position: relative; }
  .peu__fletxes { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
}

/* En obrir-se el peu, cada peca apretable fa un petit bot esglaonat: l'usuari
   veu de seguida que alla es pot clicar. Es repeteix a cada obertura (la
   classe peuVist marxa i torna, i aixo reinicia l'animacio). */
@keyframes peuPecaCrida {
  0% { transform: translateY(16px) scale(0.96); }
  60% { transform: translateY(-7px) scale(1.04); }
  100% { transform: none; }
}
body.vTres.teLlenca.peuVist .peu__patro,
body.vTres.teLlenca.peuVist .peu__fletxa {
  animation: peuPecaCrida 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
body.vTres.teLlenca.peuVist .peu__patro:nth-of-type(2) { animation-delay: 0.08s; }
body.vTres.teLlenca.peuVist .peu__fletxa--tanca { animation-delay: 0.16s; }
body.vTres.teLlenca.peuVist .peu__fletxa--amunt { animation-delay: 0.24s; }
.peu__fletxa {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--blanc); border: 1px solid var(--vora);
  box-shadow: var(--ombra-1);
  font-size: 1.6rem; line-height: 1; color: var(--teal);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.peu__fletxa:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); border-color: var(--teal); }
.peu__fletxa:active { transform: translateY(-1px); box-shadow: var(--ombra-1); }


/* --- FASE A (brief del Jordi, 27-ago): la portada ven el metode i l'accio --- */
body.vTres .hero__metode {
  margin: 0.85rem 0 0; color: var(--crema);
  font-family: var(--cos); font-weight: 600;
  font-size: clamp(0.92rem, 1.4vw, 1.05rem); letter-spacing: 0.045em;
}
body.vTres .hero__crides { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.15rem; }
body.vTres .hero__crida {
  display: inline-block; padding: 0.58rem 1.12rem; border-radius: 999px;
  font-family: var(--titular); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s; box-shadow: var(--ombra-2);
}
body.vTres .hero__crida--sessions { background: var(--llima); color: var(--negre); }
body.vTres .hero__crida--sessions:hover { background: var(--llima-700); transform: translateY(-2px); }
body.vTres .hero__crida--parla { color: var(--blanc); box-shadow: inset 0 0 0 2px var(--blanc); }
body.vTres .hero__crida--parla:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }

/* el dossier, boto secundari dins la prosa: obre el visor com sempre */
body.vTres .botoDossier {
  display: inline-block; padding: 0.5rem 1.1rem; border-radius: 999px;
  font-family: var(--cos); font-weight: 700; font-size: 0.9rem;
  color: var(--teal); text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--teal);
  transition: background 0.15s, color 0.15s;
}
body.vTres .botoDossier:hover { background: var(--teal); color: var(--blanc); }

/* la bafarada de contacte: mateixa geometria que el full PDF que substitueix */
.flotaParla {
  position: fixed; z-index: 44;
  bottom: 44px; right: max(16px, env(safe-area-inset-right));
  display: grid; justify-items: center; gap: 0.15rem;
  width: 74px; padding: 0.6rem 0.4rem 0.5rem;
  background: var(--llima); border-radius: 16px;
  box-shadow: var(--ombra-2); text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.flotaParla:hover { transform: translateY(-3px); box-shadow: var(--ombra-3); background: var(--llima-700); }
.flotaParla__bafa { width: 38px; height: 38px; }
.flotaParla__glob { fill: var(--blanc); }
.flotaParla__punts circle { fill: var(--teal); }
.flotaParla__text {
  font-family: var(--cos); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--negre);
}

/* --- v4: comptes i login (nomes on hi ha body.vQuatre) --- */
body.vQuatre .auth__boto {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 0.45rem 1.05rem; font-family: var(--cos); font-weight: 800;
  font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--llima); color: var(--negre);
  transition: transform 0.15s, background 0.15s;
}
body.vQuatre .auth__boto:hover { background: var(--llima-700); transform: translateY(-1px); }
body.vQuatre .auth__boto.teSessio { background: var(--blanc); box-shadow: inset 0 0 0 2px var(--llima); }
body.vQuatre .auth__boto.esAdmin { box-shadow: inset 0 0 0 2px var(--teal); }

.authFitxa .fitxaEvent__targeta { width: min(430px, calc(100vw - 2rem)); }
.auth__pestanyes { display: flex; gap: 0.4rem; margin: 0.9rem 0 1rem; }
.auth__pestanya {
  flex: 1; border: 0; cursor: pointer; border-radius: 999px;
  padding: 0.5rem 0.6rem; font-family: var(--cos); font-weight: 700; font-size: 0.9rem;
  background: var(--crema); color: var(--negre-500);
}
.auth__pestanya.esActiva { background: var(--teal); color: var(--blanc); }
.auth__form { display: grid; gap: 0.75rem; }
.auth__camp { display: grid; gap: 0.3rem; font-weight: 700; font-size: 0.85rem; color: var(--negre-500); }
.auth__camp input {
  border: 1px solid var(--vora); border-radius: 10px;
  padding: 0.6rem 0.75rem; font: inherit; font-weight: 500; background: var(--blanc);
}
.auth__camp input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.auth__error { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--alarma); }
.auth__envia { justify-self: start; }
.auth__oblit {
  border: 0; background: none; cursor: pointer; justify-self: start;
  padding: 0; font-size: 0.82rem; color: var(--negre-500); text-decoration: underline;
}
.auth__rol { margin: 0.2rem 0 0; }
.auth__potTitol { margin: 1rem 0 0.3rem; font-weight: 800; font-size: 0.9rem; }
.auth__pot { margin: 0 0 1.1rem; padding-left: 1.2rem; display: grid; gap: 0.3rem; font-size: 0.92rem; }
.auth__pot--aviat { color: var(--negre-500); }
.auth__pot--aviat::marker { content: '· '; }
@media (max-width: 900px) {
  /* al menu desplegat del telefon, l'item del compte com els altres */
  body.vQuatre .auth__item { padding: 0.4rem 0; }
}

/* v4: entrada amb Google */
.auth__o { margin: 0.9rem 0 0.55rem; text-align: center; font-size: 0.8rem; color: var(--negre-500); }
.auth__google {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; border: 1px solid var(--vora); border-radius: 999px; cursor: pointer;
  padding: 0.6rem 1rem; background: var(--blanc);
  font-family: var(--cos); font-weight: 700; font-size: 0.92rem; color: var(--negre);
  transition: box-shadow 0.15s, transform 0.15s;
}
.auth__google:hover { box-shadow: var(--ombra-1); transform: translateY(-1px); }
.auth__google svg { width: 18px; height: 18px; }

/* v4: la rodoneta de compte a la capcalera — nomes al telefon (a
   l'escriptori el compte viu com a item del menu) */
body.vQuatre .auth__cap {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--llima); color: var(--negre);
  font-family: var(--cos); font-weight: 800; font-size: 1rem;
  flex: 0 0 auto; margin-right: 0.55rem;
}
body.vQuatre .auth__cap svg { width: 20px; height: 20px; fill: none; stroke: var(--negre); stroke-width: 2; stroke-linecap: round; }
body.vQuatre .auth__cap.esAdmin { box-shadow: 0 0 0 2px var(--teal); }
@media (max-width: 900px) {
  body.vQuatre .auth__cap { display: flex; }
  body.vQuatre .auth__item { display: none; }
}

/* --- v4: el calendari com a eina de reserva --- */
/* EL CALENDARI ES EL PROTAGONISTA (Oriol, 31-ago): tot el que hi ha a fora
   nomes ha de servir per decidir que s'hi mira, i ha d'ocupar el minim.
   Selector segmentat d'una sola fila: es veu el triat sense cap adorn. */
body.vQuatre .calFiltres {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin: 0 auto 0.4rem; max-width: 22rem; padding: 3px;
  background: var(--crema); border-radius: 12px;
  border: 2px solid transparent; transition: background 0.15s, border-color 0.15s;
}
body.vQuatre .calFiltre {
  border: 0; cursor: pointer; border-radius: 9px; padding: 0.42rem 0.3rem;
  font-family: var(--cos); font-weight: 800; font-size: 0.85rem;
  background: transparent; color: var(--negre-500); white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
body.vQuatre .calFiltre.esActiu {
  background: var(--teal); color: var(--blanc);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* amb Grups triat, la fila d'edats i el selector son UNA SOLA PECA
   (Oriol, 31-ago): mateixa amplada, es toquen i comparteixen la vora */
body.vQuatre .calEdats {
  display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap;
  margin: 0 auto; max-width: 22rem; padding: 0.45rem 0.5rem;
  background: var(--crema); border: 2px solid transparent; border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
body.vQuatre .calEdats[hidden] { display: none; }
/* apagada, pero ocupant: el calendari no es mou quan apareixen les edats */
body.vQuatre .calEdats.esApagada { visibility: hidden; }
/* el cos de la peca: el grup de la persona (model del Jordi, 2-set), o el
   que li falta per veure'l (entrar / esperar l'assignacio) */
body.vQuatre .calEdats__cos { width: 100%; text-align: center; font-size: 0.88rem; color: var(--negre-500); }
body.vQuatre .calGrup__espera { margin: 0; font-weight: 700; color: var(--alarma); }
body.vQuatre .calGrup__entra {
  border: 0; cursor: pointer; border-radius: 999px; padding: 0.3rem 0.8rem;
  font-family: var(--cos); font-weight: 800; font-size: 0.82rem;
  background: var(--teal); color: var(--blanc); margin-right: 0.2rem;
}

/* la peca sencera es marca amb la vora teal del filtre que la mana */
body.vQuatre .calEdats:not(.esApagada) {
  background-color: var(--teal-100);
  border-left-color: var(--teal); border-right-color: var(--teal); border-top-color: var(--teal);
}
body.vQuatre .calFiltres.ambEdats {
  background-color: var(--teal-100);
  border-left-color: var(--teal); border-right-color: var(--teal); border-bottom-color: var(--teal);
  border-top-color: transparent; border-radius: 0 0 12px 12px;
}

/* el retol: UNA linia sota el pager */
body.vQuatre .calLlegenda {
  margin: 0 0 0.35rem; text-align: center; min-height: 1.35em;
  font-size: 0.85rem; color: var(--negre-500);
}
body.vQuatre .calLlegenda.esApagada { visibility: hidden; }
body.vQuatre .calLlegenda strong { color: var(--teal); }
body.vQuatre .calLlegenda--cap { color: var(--alarma); font-weight: 700; }
body.vQuatre .calLlegenda__ves {
  border: 0; background: none; cursor: pointer; padding: 0;
  font: inherit; font-weight: 800; color: var(--teal); text-decoration: underline;
}

/* el commutador de vista, a sobre dels filtres i amb aire per separar-los */
body.vQuatre .calVistes { margin-bottom: 0.5rem; }

/* el dia amb disponibilitat: s'ENCEN en llima suau */
body.vQuatre .cal__dia--lliure {
  background: var(--llima-100, #f3f9d2); box-shadow: inset 0 0 0 2px var(--llima);
  border-radius: 10px; cursor: pointer;
}
body.vQuatre .cal__dia--lliure:hover { box-shadow: inset 0 0 0 3px var(--llima-700); }

/* la fitxa de reserva: hores i vies d'apuntar-se */
.reserva__tria { margin: 0.7rem 0 0.4rem; font-weight: 800; font-size: 0.92rem; }
.reserva__hores { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.reserva__hora {
  border: 0; cursor: pointer; border-radius: 10px;
  padding: 0.55rem 0.9rem; font-family: var(--cos); font-weight: 800; font-size: 0.95rem;
  background: var(--crema); color: var(--negre);
  box-shadow: inset 0 0 0 2px var(--sorra-500);
}
.reserva__hora.esActiu { background: var(--llima); box-shadow: none; }
.reserva__places { margin: 0.3rem 0 0.6rem; font-weight: 800; color: var(--teal); }
.reserva__vies { display: grid; gap: 0.45rem; margin-top: 0.9rem; justify-items: start; }
.reserva__wa { background: #25d366; color: #fff; }
.reserva__wa:hover { background: #1fb457; }
.reserva__mail { font-size: 0.85rem; color: var(--negre-500); text-decoration: underline; }
.reserva__final { display: grid; gap: 0.45rem; justify-items: start; margin-top: 0.9rem; }

/* --- v4: els ESTATS de les activitats (obert, ultimes, espera, exhaurit,
   en curs, aviat, acabat) — el color diu l'urgencia --- */
body.vQuatre .avis__xip--obert { background: var(--llima); color: var(--negre); }
body.vQuatre .avis__xip--ultimes { background: var(--alarma); color: #fff; }
body.vQuatre .avis__xip--espera { background: var(--sorra-700, #b98a3c); color: #fff; }
body.vQuatre .avis__xip--exhaurit { background: var(--gris-100); color: var(--negre-500); text-decoration: line-through; }
body.vQuatre .avis__xip--encurs { background: var(--teal); color: #fff; }
body.vQuatre .avis__xip--aviat { background: var(--crema); color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
body.vQuatre .avis__xip--acabat { background: var(--gris-100); color: var(--negre-500); }

/* la targeta d'avis com a boto (la barra ara es automatica) */
body.vQuatre .avis--activitat { text-align: left; font: inherit; border: 1px solid var(--vora); }
body.vQuatre .avis--activitat .avis__cos { display: grid; }

/* la fitxa rica de l'activitat */
.activitatFitxa .fitxaEvent__targeta { width: min(460px, calc(100vw - 2rem)); }
.activitat__imatge {
  width: calc(100% + 2.4rem); margin: -1.2rem -1.2rem 0.8rem; display: block;
  max-height: 170px; object-fit: cover; border-radius: 14px 14px 0 0;
}
.activitat__dades { margin: 0.7rem 0 0; display: grid; gap: 0.35rem; }
.activitat__dades > div { display: flex; gap: 0.5rem; align-items: baseline; }
.activitat__dades dt {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--negre-500); min-width: 6.2rem;
}
.activitat__dades dd { margin: 0; font-weight: 600; }
.activitat__mort { margin: 1rem 0 0.2rem; font-weight: 700; color: var(--negre-500); }

/* amb un filtre de reserva actiu, el mes es un semafor: els dies que NO
   tenen disponibilitat s'apaguen (tambe els seus events, en gris) i nomes
   brillen els dies que SI (Oriol, 31-ago) */
body.vQuatre.reservant .cal__dia:not(.cal__dia--lliure) { opacity: 0.3; filter: grayscale(1); }
/* reservant, el calendari nomes diu ON pots apuntar-te (Oriol, 2-set: «per que
   hi ha un punt negre i un punt blau?»): fora els xips d'activitats dins dels
   dies i fora la llegenda dels tres colors; amb «Tot» tornen */
body.vQuatre.reservant .cal__dia .cal__xip,
body.vQuatre.reservant .cal__llegenda { display: none; }
body.vQuatre.reservant .cal__dia--lliure { opacity: 1; filter: none; }
body.vQuatre.reservant .cal__dia--lliure .cal__num { font-weight: 800; }

/* la barra d'avisos quan viu a sota (calendari v4): la ratlla canvia de canto */
body.vQuatre.pagina-calendari .avisos { border-bottom: 0; border-top: 1px solid var(--sorra-500); margin-top: 1.5rem; }

/* amb l'espai que guanya la botonera retallada, les caselles creixen:
   el calendari es el protagonista i el dit hi encerta millor */
@media (max-width: 900px) {
  body.vQuatre.vistaMes .cal__dia { min-height: 58px; }
}

body.vQuatre .calLlegenda--tria { color: var(--teal); font-weight: 800; }

/* la peça del grup porta el titol a dalt i el cos a sota (el vel i els xips
   d'edat del 31-ago se'n van amb el model del Jordi: el grup no es tria,
   l'assigna ell) */
body.vQuatre .calEdats { flex-direction: column; align-items: center; }
body.vQuatre .calEdats__titol {
  margin: 0 0 0.4rem; text-align: center;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal);
}
/* el commutador de vista, ara sota el calendari */
body.vQuatre .calVistes { margin: 0.5rem 0 0; }

/* amb un filtre actiu, la peca segueix DESTACADA respecte de la resta
   (Oriol, 31-ago): ombra suau, que es vegi que es l'eina que mana */
body.vQuatre.reservant .calFiltres { box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.3); }
body.vQuatre .calEdats:not(.esApagada) { box-shadow: 0 -8px 18px -10px rgba(0, 0, 0, 0.26); }

/* --- v4: GRUPS per nivell (model del Jordi, 2-set-2026): el nom del grup
   sempre amb el puntet del seu color --- */
.grup { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 800; color: var(--negre); }
.grup__punt {
  width: 0.85em; height: 0.85em; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.grup small { font-weight: 600; color: var(--negre-500); }
.grup--gran { font-size: 1.2rem; }
.grup--cap { color: var(--negre-500); font-weight: 600; font-size: 0.85rem; }

/* la fitxa del compte: grup, avisos i reserves */
.compteFitxa .fitxaEvent__targeta,
.adminFitxa .fitxaEvent__targeta { max-height: 88vh; overflow: auto; }
.adminFitxa .fitxaEvent__targeta { width: min(600px, calc(100vw - 2rem)); }
.compte__seccio { margin-top: 1rem; }
.compte__titol {
  margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal);
}
.compte__grup { padding: 0.75rem 0.9rem; background: var(--crema); border-radius: 12px; }
.compte__grupNota { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--negre-500); }
.compte__espera { margin: 0; font-weight: 700; color: var(--alarma); }
.compte__avisos, .compte__reserves, .admin__jugadors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.compte__avis {
  padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.35;
  background: var(--blanc); border: 1px solid var(--vora);
}
.compte__avis.esNou { background: var(--llima-100, #f3f9d2); border-color: var(--llima); }
.compte__avis time { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--negre-500); }
.compte__reserves li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--vora); font-size: 0.9rem;
}
.compte__reserva { display: grid; gap: 0.1rem; }
.compte__reserva small { font-size: 0.78rem; color: var(--negre-500); }
.compte__anulla {
  border: 0; background: none; cursor: pointer; padding: 0; flex: 0 0 auto;
  font: inherit; font-size: 0.8rem; color: var(--alarma); text-decoration: underline;
}
.compte__buit { display: block !important; color: var(--negre-500); font-size: 0.9rem; margin: 0; border: 0 !important; }
.compte__buit a { color: var(--teal); font-weight: 700; }
.compte__ajuda { margin: -0.1rem 0 0.5rem; font-size: 0.82rem; color: var(--negre-500); }
.compte__mes { margin-top: 1rem; font-size: 0.85rem; }
.compte__mes summary { cursor: pointer; font-weight: 800; color: var(--negre-500); }
.compte__mes .auth__pot { margin-top: 0.4rem; }
.auth__surt { margin-top: 1rem; }

/* el panell d'admin: un jugador per fila, el grup a la dreta */
.admin__jugador {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--vora);
}
.admin__jugador.esGuardant { opacity: 0.5; }
.admin__nom { display: block; font-weight: 700; font-size: 0.92rem; }
.admin__correu { display: block; font-size: 0.78rem; color: var(--negre-500); }
.admin__marca { font-size: 0.68rem; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: 0.06em; }
.admin__grup { display: flex; align-items: center; gap: 0.5rem; }
.admin__grup select {
  font: inherit; font-weight: 700; font-size: 0.85rem; padding: 0.35rem 0.5rem;
  border-radius: 8px; border: 1px solid var(--vora); background: var(--blanc);
}

/* avisos nous: punt vermell a la rodoneta i a l'item del menu */
body.vQuatre .auth__boto, body.vQuatre .auth__cap { position: relative; }
body.vQuatre .auth__boto.teAvisos::after, body.vQuatre .auth__cap.teAvisos::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--alarma); box-shadow: 0 0 0 2px var(--blanc);
}

/* la fitxa del dia: el grup, la setmana i el bloc de reserva */
.reserva__setmana { font-size: 0.78rem; font-weight: 700; color: var(--negre-500); }
.reserva__grup { margin: 0.6rem 0 0; display: grid; gap: 0.25rem; }
.reserva__amb { font-size: 0.82rem; font-weight: 600; color: var(--negre-500); }
.reserva__amb .grup { font-size: 0.82rem; }
.reserva__feta { margin: 0.9rem 0 0.3rem; font-weight: 800; color: var(--teal); }
.reserva__anulla, .reserva__fora {
  margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--negre-500);
}
.reserva__anulla { border: 0; background: none; cursor: pointer; padding: 0; font-family: var(--cos); color: var(--alarma); text-decoration: underline; }
.reserva__fora a { color: var(--negre-500); text-decoration: underline; }
.reserva__hora.esReservada { box-shadow: inset 0 0 0 2px var(--teal); }
.reserva__hora.esReservada::after { content: ' ✓'; color: var(--teal); }

/* a la vista d'ocell, el dia ences diu quantes classes queden (Oriol, 2-set) */
body.vQuatre .cal__dia--lliure { position: relative; }
body.vQuatre .cal__lliures {
  position: absolute; left: 0; right: 0; top: 1.4rem; bottom: 2px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; line-height: 1.1; color: var(--teal);
  pointer-events: none;
}

/* la fitxa de LES TEVES RESERVES d'un dia (a «Tot») */
.reserva__llista { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.reserva__llista li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--teal-100);
  box-shadow: inset 0 0 0 2px var(--teal);
}
.reserva__que { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; }
.reserva__que > span { display: grid; gap: 0.1rem; }
.reserva__que small { font-weight: 600; color: var(--negre-500); }
.reserva__que .cal__ninot { width: 1.3rem; height: 1.3rem; fill: #7d848c; flex: 0 0 auto; }
.reserva__que .cal__ninot--grup { width: 1.7rem; }
.reserva__que .grup { font-size: inherit; }
.reserva__llista .reserva__anulla { margin: 0; flex: 0 0 auto; font-weight: 700; }
.reserva__tambe { margin-top: 1rem; }
.reserva__tambeTitol { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negre-500); }
.reserva__tambeXips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.reserva__tambeXips .cal__xip { border: 0; cursor: pointer; font-size: 0.85rem; padding: 0.4rem 0.8rem; color: #fff; }

/* el dia amb reserva feta diu «Apuntat» en vermell, a tots els filtres
   (Oriol, 2-set: «en lloc de checkmark posa apuntat en vermell, que quedi clar») */
/* el dia on tens plaça: destacat en TEAL (el vermell es del grup Vermell —
   Oriol, 2-set), sense cap paraula: les linies del que tens ho diuen */
body.vQuatre .cal__dia--reservat {
  position: relative; border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--teal); background: var(--teal-100);
}
/* reservant, el dia ences segueix en llima pero conserva el marc teal */
body.vQuatre .cal__dia--lliure.cal__dia--reservat { box-shadow: inset 0 0 0 2px var(--teal); }
body.vQuatre .cal__apuntat {
  /* centrat dins la casella (Oriol, 2-set), sota el numero i els xips */
  position: absolute; left: 2px; right: 2px; top: 1.4rem; bottom: 2px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  pointer-events: none;
}
body.vQuatre .cal__meu {
  display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap;
  font-size: 0.7rem; font-weight: 800; line-height: 1; color: var(--negre);
}
body.vQuatre .cal__meu .grup__punt { display: inline-block; width: 0.62rem; height: 0.62rem; flex: 0 0 auto; }
body.vQuatre .cal__meuHora { font-style: normal; }
/* si el grup no cap en una linia (telefon), l'hora baixa a sota */
body.vQuatre .cal__meu--grup { flex-wrap: wrap; row-gap: 1px; }
body.vQuatre .cal__meu .cal__ninot { width: 0.85rem; height: 0.85rem; fill: #7d848c; flex: 0 0 auto; }
body.vQuatre .cal__meu .cal__ninot--grup { width: 1.1rem; }
/* amb xips (o punts) sota el numero, el bloc comença mes avall; reservant
   els xips no es veuen i torna a dalt */
body.vQuatre .cal__dia--reservat:has(.cal__xip) .cal__apuntat { top: 2.5rem; }
@media (max-width: 900px) {
  /* amb pastilles d'una linia, el bloc APUNTAT comença sota l'ultima */

  body.vQuatre.vistaMes .cal__dia--reservat:has(.cal__xip) .cal__apuntat { top: 2.5rem; }
}
body.vQuatre.reservant .cal__dia--reservat .cal__apuntat { top: 1.4rem; }
/* al telefon, els events del mes NO son puntets sino ICONES sobre el color
   del tipus (Oriol, 2-set: «el punt negre no queda clar… he de saber que hi
   ha un partit»): trofeu = partit, tenda = campus, con = tecnificacio. La
   llegenda de sota porta la mateixa icona davant del nom. */
@media (max-width: 900px) {
  /* la casella: el numero a dalt a la dreta i les activitats del dia
     CENTRADES a sota, una pastilla per activitat amb la icona i el retol
     curt (Oriol, 2-set: «a la copa que posi copa i 3x3, perfectament centrat») */
  body.vQuatre.vistaMes .cal__graella .cal__dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; }
  body.vQuatre.vistaMes .cal__graella .cal__num { align-self: flex-end; }
  /* icona i retol en UNA linia (Oriol, 2-set: «que 3x3 i la copa siguin una linia») */
  body.vQuatre.vistaMes .cal__graella .cal__xip {
    width: 100%; height: 17px; box-sizing: border-box; margin: 0; border-radius: 5px; padding: 0 2px 0 14px;
    display: flex; align-items: center; justify-content: center; gap: 0;
    background-repeat: no-repeat; background-position: 2px center; background-size: 11px 11px;
  }
  /* el text centrat de debo a l'eix vertical (Oriol, 2-set: «hi ha menys espai
     a dalt que a baix del 3x3»): la caixa de linia es tota l'alçada de la pastilla */
  body.vQuatre.vistaMes .cal__graella .cal__xip::after {
    content: attr(data-curt); display: block;
    font-size: 0.56rem; font-weight: 800; line-height: 17px; letter-spacing: 0;
    color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  /* «+N»: el lloc que queda quan hi ha mes de 3 coses; en tocar-lo, el dia sencer */
  body.vQuatre.vistaMes .cal__graella .cal__xip--mes { padding-left: 2px; background: var(--gris-100); }
  body.vQuatre.vistaMes .cal__graella .cal__xip--mes::after { color: var(--negre); }
  body.vQuatre.vistaMes .cal__graella .cal__xip--partit,
  body.vQuatre .cal__llegenda .cal__xip--partit::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3'/%3E%3Cpath d='M12 14v3M8 20h8M10 17h4'/%3E%3C/svg%3E");
  }
  body.vQuatre.vistaMes .cal__graella .cal__xip--campus,
  body.vQuatre .cal__llegenda .cal__xip--campus::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20 12 5l9 15H3z'/%3E%3Cpath d='M12 20v-7'/%3E%3C/svg%3E");
  }
  body.vQuatre.vistaMes .cal__graella .cal__xip--tecnificacio,
  body.vQuatre .cal__llegenda .cal__xip--tecnificacio::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4h5l3 14h-11z'/%3E%3Cpath d='M4 20h16M7.6 12.5h8.8M6.7 16h10.6'/%3E%3C/svg%3E");
  }
  /* estel = clinic (Jordi, 10-set: un tipus mes, «Clínic», a la part superior del formulari) */
  body.vQuatre.vistaMes .cal__graella .cal__xip--clinic,
  body.vQuatre .cal__llegenda .cal__xip--clinic::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E");
  }
  body.vQuatre .cal__llegenda .cal__xip::before {
    content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 4px;
    vertical-align: -2px; background-repeat: no-repeat; background-position: center; background-size: contain;
  }
}

/* un ninot = individual, dos = grup (gris: cap color que es confongui amb un grup) */
body.vQuatre .cal__ninot { width: 0.8rem; height: 0.8rem; fill: #7d848c; flex: 0 0 auto; }
body.vQuatre .cal__ninot--grup { width: 1.05rem; }
/* amb el retol de dues linies, la casella del telefon creix una mica */
@media (max-width: 900px) {

  body.vQuatre .cal__apuntat { left: 1px; right: 1px; }
  body.vQuatre .cal__meu { font-size: 0.64rem; gap: 2px; }
  /* al telefon no hi cap el nom del grup: el diuen els ninots i el puntet */
  body.vQuatre .cal__apuntat .cal__grupNom { display: none; }
}
/* --- v4: l'ADMIN mana les activitats des del calendari (Oriol, 2-set) --- */
body.vQuatre .admin__nova {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 auto 0.5rem; 
  border: 0; cursor: pointer; border-radius: 999px; padding: 0.45rem 1rem;
  font-family: var(--cos); font-weight: 800; font-size: 0.85rem;
  background: var(--llima); color: var(--negre); box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.35);
}
body.vQuatre .admin__nova b { font-size: 1.1rem; line-height: 1; }
body.vQuatre .cal__controls + .admin__nova, body.vQuatre .admin__nova + .cal__controls { margin-top: 0; }
.admin__accions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--vora); }
.admin__accio {
  border: 1px solid var(--vora); background: var(--blanc); cursor: pointer; border-radius: 999px;
  padding: 0.4rem 0.85rem; font-family: var(--cos); font-weight: 700; font-size: 0.85rem; color: var(--teal);
}
.admin__accio:hover { background: var(--crema); }
.admin__accio--alerta { color: var(--alarma); }
.admin__desa { margin: 0; }
.admin__novaCompte { margin-top: 0.5rem; }
/* el formulari d'activitat */
.adminFormulari .fitxaEvent__targeta { width: min(560px, calc(100vw - 2rem)); max-height: 90vh; overflow: auto; }
.admin__form { display: grid; gap: 0.8rem; margin-top: 0.6rem; }
.admin__tipus { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin__tipusOpcio { cursor: pointer; }
.admin__tipusOpcio input { position: absolute; opacity: 0; width: 0; height: 0; }
.admin__tipusOpcio .cal__xip { opacity: 0.45; font-size: 0.85rem; padding: 0.35rem 0.8rem; border: 0; transition: opacity 0.15s, box-shadow 0.15s; }
.admin__tipusOpcio input:checked + .cal__xip { opacity: 1; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--llima); }
.admin__camps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.7rem; }
.admin__camp--ample { grid-column: 1 / -1; }
.admin__camps input { min-width: 0; }
.admin__ajuda { margin: 0; font-size: 0.82rem; color: var(--negre-500); }
@media (max-width: 480px) { .admin__camps { grid-template-columns: 1fr; } }
/* la llista d'activitats a la fitxa del compte */
.admin__activitats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.admin__activitat {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--vora); font-size: 0.9rem;
}
.admin__activitat .cal__xip { min-width: 3.2rem; text-align: center; }
.admin__activitatCos { display: grid; gap: 0.1rem; min-width: 0; }
.admin__activitatCos b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin__activitatCos small { font-size: 0.78rem; color: var(--negre-500); }
.admin__activitat.esCancelada b { text-decoration: line-through; color: var(--negre-500); }
/* estats nous: cancel·lada i ajornada */
body.vQuatre .avis__xip--cancelat { background: var(--alarma); color: #fff; text-decoration: line-through; }
body.vQuatre .avis__xip--ajornat { background: var(--alarma-100); color: var(--alarma); box-shadow: inset 0 0 0 2px var(--alarma); margin-left: 0.3rem; }
body.vQuatre .avis--cancelat .avis__titol { text-decoration: line-through; }
.activitat__ajornat { margin: -0.2rem 0 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--alarma); }
.activitat__nota { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--negre-500); }
.activitat__mort--cancelat { color: var(--alarma); }
@media (max-width: 900px) {
  /* al telefon la pastilla cancel·lada queda apagada i ratllada; l'ajornada, amb anell vermell */
  body.vQuatre.vistaMes .cal__graella .cal__xip--cancelat { opacity: 0.45; box-shadow: inset 0 0 0 2px var(--alarma); }
  body.vQuatre.vistaMes .cal__graella .cal__xip--cancelat::after { text-decoration: line-through; }
  body.vQuatre.vistaMes .cal__graella .cal__xip--canvi { box-shadow: inset 0 0 0 2px var(--alarma); }
  body.vQuatre.vistaMes .cal__graella .cal__xip--canvi::before { content: none; }
  body.vQuatre .admin__nova { margin-bottom: 0.3rem; }
}
/* la fitxa d'un dia amb diverses activitats */
.dia__llista { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.dia__activitat {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; width: 100%;
  border: 1px solid var(--vora); background: var(--blanc); border-radius: 12px; padding: 0.55rem 0.7rem;
  font: inherit; text-align: left; cursor: pointer;
}
.dia__activitat:hover { background: var(--crema); }
.dia__activitat .cal__xip { min-width: 3rem; text-align: center; cursor: pointer; }
.dia__cos { display: grid; gap: 0.1rem; min-width: 0; }
.dia__cos b { font-weight: 800; }
.dia__cos small { font-size: 0.8rem; color: var(--negre-500); }
.dia__activitat.esCancelada b { text-decoration: line-through; color: var(--negre-500); }
/* el xip «+N» a l'escriptori: gris, com un boto de "mes" */
body.vQuatre .cal__xip--mes { background: var(--gris-100); color: var(--negre); }

/* --- v4: els ENTRENAMENTS dels diumenges al calendari (correu del Jordi) --- */
body.vQuatre .cal__xip--entreno {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--crema); color: var(--negre); border: 0; cursor: pointer;
}
.entreno__punts { display: inline-flex; gap: 2px; align-items: center; }
.entreno__punts i { display: block; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
@media (max-width: 900px) {
  /* a la graella del telefon: nomes els sis puntets, sense icona ni text */
  body.vQuatre.vistaMes .cal__graella .cal__xip--entreno { padding: 0 2px; background-image: none; background-color: var(--crema); }
  body.vQuatre.vistaMes .cal__graella .cal__xip--entreno::after { content: none; }
  body.vQuatre.vistaMes .cal__graella .cal__xip--entreno .entreno__text { display: none; }
  body.vQuatre.vistaMes .cal__graella .entreno__punts { gap: 1px; }
  body.vQuatre.vistaMes .cal__graella .entreno__punts i { width: 6px; height: 6px; }
}
/* la fitxa de l'horari del dia */
.entreno__llista { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.entreno__llista li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--vora); font-size: 0.92rem;
}
.entreno__llista b { font-weight: 800; color: var(--teal); white-space: nowrap; }
.entreno__qui { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.entreno__qui .cal__ninot { width: 1rem; height: 1rem; fill: #7d848c; margin-right: 0.3rem; }
.entreno__meu { font-size: 0.85rem; font-weight: 800; color: var(--teal); white-space: nowrap; }
.entreno__reserva {
  border: 0; cursor: pointer; border-radius: 999px; padding: 0.35rem 0.8rem;
  font-family: var(--cos); font-weight: 800; font-size: 0.82rem; background: var(--teal); color: var(--blanc);
}
.reserva__horari { margin-top: 1rem; }
.reserva__horari .entreno__llista { margin-top: 0.2rem; }

/* reservant (Individual o Grups) NOMES es veu el del filtre (Oriol, 2-set:
   «si estic a individual només VULL veure els individuals»): cap xip
   d'activitat ni d'entrenaments dins dels dies, a cap mida de pantalla, i
   de les teves reserves nomes les del tipus triat */
body.vQuatre.reservant .cal__graella .cal__dia .cal__xip,
body.vQuatre.reservant.vistaMes .cal__graella .cal__dia .cal__xip { display: none; }
body.vQuatre[data-filtre="individual"] .cal__meu--grup { display: none; }
body.vQuatre[data-filtre="grups"] .cal__meu:not(.cal__meu--grup) { display: none; }
body.vQuatre.reservant .cal__dia--reservat .cal__apuntat { top: 1.4rem; }

/* --- la GUIA del pare a dalt del calendari (Oriol, 2-set: «el calendari mes
   facil del mon per als pares») --- */
body.vQuatre .calEdats__titol .grup { font-size: inherit; color: var(--teal); }
body.vQuatre .calEdats__titol .grup__punt { width: 0.75em; height: 0.75em; }
.guia { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; text-align: left; font-size: 0.86rem; color: var(--negre-500); }
.guia li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.guia li b {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; background: var(--blanc); color: var(--negre-500); box-shadow: inset 0 0 0 1.5px var(--sorra-500);
}
.guia li.esAra { color: var(--negre); font-weight: 700; }
.guia li.esAra b { background: var(--teal); color: var(--blanc); box-shadow: none; }
.guia li.esFet b { background: var(--llima); color: var(--negre); box-shadow: none; }
.guia .calGrup__entra, .guia .calGrup__individual, .calGrup__reserva, .calGrup__mes {
  border: 0; cursor: pointer; border-radius: 999px; padding: 0.25rem 0.7rem;
  font-family: var(--cos); font-weight: 800; font-size: 0.8rem; background: var(--teal); color: var(--blanc);
}
.guia .calGrup__individual, .calGrup__mes { background: var(--blanc); color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }
.guia__propera { margin: 0; font-size: 0.88rem; color: var(--negre); display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; justify-content: center; }
/* el filtre «El meu grup» amb el puntet */
body.vQuatre .calFiltre .grup__punt { display: inline-block; width: 0.65em; height: 0.65em; border-radius: 50%; margin-right: 0.3em; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
/* el diumenge amb el TEU entreno: puntet + hora */
body.vQuatre .cal__xip--entrenoMeu { background: var(--teal-100); font-weight: 800; }
.entreno__hora { font-size: 0.72rem; }
@media (max-width: 900px) {
  body.vQuatre.vistaMes .cal__graella .cal__xip--entrenoMeu { padding-left: 3px; gap: 3px; }
  body.vQuatre.vistaMes .cal__graella .cal__xip--entrenoMeu .entreno__punts i { width: 8px; height: 8px; }
  body.vQuatre.vistaMes .cal__graella .cal__xip--entrenoMeu .entreno__hora { display: block; font-size: 0.6rem; color: var(--negre); }
  body.vQuatre.vistaMes .cal__graella .cal__xip--entreno .entreno__hora { display: block; }
}
/* la fitxa individual per files; la fila que venies a buscar, marcada */
.entreno__llista li.esTriada { background: var(--llima-100, #f3f9d2); border-radius: 8px; padding-left: 0.4rem; padding-right: 0.4rem; }
.entreno__meu .reserva__anulla { margin-left: 0.4rem; font-size: 0.78rem; }
.reserva__mes { margin: 0.9rem 0 0; }
.reserva__totMes {
  border: 0; cursor: pointer; border-radius: 999px; padding: 0.45rem 0.9rem;
  font-family: var(--cos); font-weight: 800; font-size: 0.85rem; background: var(--blanc); color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal);
}

/* a Individual, el dia amb placa diu APUNTAT en vermell i va emmarcat en
   vermell (Oriol, 2-set): alla no hi ha grups i el vermell no confon */
body.vQuatre .cal__apuntatMot { display: none; }
body.vQuatre[data-filtre="individual"] .cal__apuntatMot {
  display: block; text-align: center; font-size: 0.7rem; font-weight: 800; line-height: 1;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--alarma); margin-bottom: 2px;
}
body.vQuatre[data-filtre="individual"] .cal__dia--reservat,
body.vQuatre[data-filtre="individual"] .cal__dia--lliure.cal__dia--reservat {
  box-shadow: inset 0 0 0 2px var(--alarma); background: var(--alarma-100);
}
@media (max-width: 900px) {
  body.vQuatre[data-filtre="individual"] .cal__apuntatMot { font-size: 0.62rem; letter-spacing: 0; }
}
/* el comptador dins del bloc de les teves reserves: una linia mes, a sota */
body.vQuatre .cal__lliures--dins { position: static; display: block; margin-top: 3px; font-size: 0.64rem; }
@media (max-width: 900px) { body.vQuatre .cal__lliures--dins { font-size: 0.58rem; } }
@media (max-width: 900px) { body.vQuatre .lliures__llarg { display: none; } }
/* reservant, els xips son amagats pero segueixen al DOM: el bloc de les
   teves reserves ha de tornar a dalt (sota el numero) i centrar-se al que
   queda — a totes les mides (Oriol, 2-set: «hi ha espai, que quedi centrat») */
body.vQuatre.reservant .cal__dia--reservat .cal__apuntat,
body.vQuatre.reservant.vistaMes .cal__dia--reservat:has(.cal__xip) .cal__apuntat { top: 1.4rem; }

/* la peça de dalt a Individual: verda, com els dies encesos */
body.vQuatre .calEdats.esVerd:not(.esApagada) {
  background-color: var(--llima-100, #f3f9d2);
  border-left-color: var(--llima-700); border-right-color: var(--llima-700); border-top-color: var(--llima-700);
}
body.vQuatre .calFiltres.ambEdats.esVerd {
  background-color: var(--llima-100, #f3f9d2);
  border-left-color: var(--llima-700); border-right-color: var(--llima-700); border-bottom-color: var(--llima-700);
}
body.vQuatre .calEdats.esVerd .calEdats__titol { color: var(--llima-700); }
.guia__nota { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--negre-500); }
/* a Individual, «Apuntat» es diu en vermell a tot arreu, com al calendari
   (Oriol, 2-set: «es confon: al calendari posa APUNTAT i la peça diu tens plaça») */
body.vQuatre[data-filtre="individual"] .entreno__meu,
body.vQuatre[data-filtre="individual"] .reserva__feta,
body.vQuatre .calEdats.esVerd .entreno__meu,
body.vQuatre .calEdats.esVerd .guia__propera.esApuntat { color: var(--alarma); }
body.vQuatre .calEdats.esVerd .guia__propera b { color: var(--negre); }
/* la paraula, com al calendari: majuscules i vermell */
.guia__mot { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--alarma); }

/* reservant, el dia nomes es «teu» si la reserva es DEL FILTRE (Oriol, 2-set:
   a «El meu grup» el dia 6 sortia blau per una reserva individual) */
body.vQuatre[data-filtre="grups"] .cal__dia--reservat:not(.cal__dia--reservatGrup),
body.vQuatre[data-filtre="individual"] .cal__dia--reservat:not(.cal__dia--reservatInd) {
  box-shadow: none; background: transparent;
}
body.vQuatre[data-filtre="grups"] .cal__dia--lliure.cal__dia--reservat:not(.cal__dia--reservatGrup),
body.vQuatre[data-filtre="individual"] .cal__dia--lliure.cal__dia--reservat:not(.cal__dia--reservatInd) {
  background: var(--llima-100, #f3f9d2); box-shadow: inset 0 0 0 2px var(--llima);
}
body.vQuatre[data-filtre="grups"] .cal__dia--reservat:not(.cal__dia--reservatGrup) .cal__apuntat,
body.vQuatre[data-filtre="individual"] .cal__dia--reservat:not(.cal__dia--reservatInd) .cal__apuntat { display: none; }

/* --- «El meu grup» es ROSA (Oriol, 2-set): la peça, el filtre actiu, els
   dies disponibles i el comptador. Verd = individual, blau = tot. El rosa es
   clar i fred perque no es confongui amb el grup Vermell. --- */
:root { --rosa-700: #b8541a; --rosa-500: #e8762b; --rosa-300: #f5b98a; --rosa-100: #fdebdd; } /* «rosa» = el TARONJA de l'individual (Oriol, 2-set): el nom de la variable es historic */
body.vQuatre[data-filtre="grups"] .calEdats:not(.esApagada) {
  background-color: var(--rosa-100);
  border-left-color: var(--rosa-500); border-right-color: var(--rosa-500); border-top-color: var(--rosa-500);
}
body.vQuatre[data-filtre="grups"] .calFiltres.ambEdats {
  background-color: var(--rosa-100);
  border-left-color: var(--rosa-500); border-right-color: var(--rosa-500); border-bottom-color: var(--rosa-500);
}
body.vQuatre[data-filtre="grups"] .calEdats__titol { color: var(--rosa-700); }
body.vQuatre[data-filtre="grups"] .calFiltre.esActiu { background: var(--rosa-500); }
body.vQuatre[data-filtre="grups"] .cal__dia--lliure {
  background: var(--rosa-100); box-shadow: inset 0 0 0 2px var(--rosa-300);
}
body.vQuatre[data-filtre="grups"] .cal__dia--lliure:hover { box-shadow: inset 0 0 0 3px var(--rosa-500); }
/* el dia lliure del grup on nomes tens una reserva INDIVIDUAL: tambe rosa
   (Oriol, 2-set: «per que surt el 6 de setembre verd?» — la regla de dalt
   li posava el llima d'abans del redisseny rosa, i guanyava per pes) */
body.vQuatre[data-filtre="grups"] .cal__dia--lliure.cal__dia--reservat:not(.cal__dia--reservatGrup) {
  background: var(--rosa-100); box-shadow: inset 0 0 0 2px var(--rosa-300);
}
body.vQuatre[data-filtre="grups"] .cal__dia--lliure.cal__dia--reservat:not(.cal__dia--reservatGrup):hover { box-shadow: inset 0 0 0 3px var(--rosa-500); }
body.vQuatre[data-filtre="grups"] .cal__lliures,
body.vQuatre[data-filtre="grups"] .calLlegenda strong { color: var(--rosa-700); }
/* el dia on ja tens la classe del grup: rosa fort */
body.vQuatre[data-filtre="grups"] .cal__dia--lliure.cal__dia--reservatGrup,
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup {
  background: var(--rosa-300); box-shadow: inset 0 0 0 2px var(--rosa-700);
}
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntatMot {
  display: block; text-align: center; font-size: 0.7rem; font-weight: 800; line-height: 1;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--rosa-700); margin-bottom: 2px;
}
body.vQuatre[data-filtre="grups"] .entreno__meu,
body.vQuatre[data-filtre="grups"] .reserva__feta,
body.vQuatre[data-filtre="grups"] .guia__propera .entreno__meu { color: var(--rosa-700); }
@media (max-width: 900px) {
  body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntatMot { font-size: 0.62rem; letter-spacing: 0; }
}

/* --- ELS COLORS DELS MODES (Oriol, 2-set): «El meu grup» del color del grup
   (variables --gc-* que posa reserves.js); Individual ROSA, que no es de cap
   grup; Tot, el blau de la casa. Aquest bloc mana sobre els d'abans. --- */
/* individual: rosa */
body.vQuatre .calEdats.esVerd:not(.esApagada) {
  background-color: var(--rosa-100);
  border-left-color: var(--rosa-500); border-right-color: var(--rosa-500); border-top-color: var(--rosa-500);
}
body.vQuatre .calFiltres.ambEdats.esVerd {
  background-color: var(--rosa-100);
  border-left-color: var(--rosa-500); border-right-color: var(--rosa-500); border-bottom-color: var(--rosa-500);
}
body.vQuatre .calEdats.esVerd .calEdats__titol { color: var(--rosa-700); }
body.vQuatre[data-filtre="individual"] .calFiltre.esActiu { background: var(--rosa-500); }
body.vQuatre[data-filtre="individual"] .cal__dia--lliure { background: var(--rosa-100); box-shadow: inset 0 0 0 2px var(--rosa-300); }
body.vQuatre[data-filtre="individual"] .cal__dia--lliure:hover { box-shadow: inset 0 0 0 3px var(--rosa-500); }
body.vQuatre[data-filtre="individual"] .cal__lliures,
body.vQuatre[data-filtre="individual"] .calLlegenda strong { color: var(--rosa-700); }
/* a individual, el dia amb placa individual: vermell (APUNTAT), com abans */
body.vQuatre[data-filtre="individual"] .cal__dia--lliure.cal__dia--reservatInd { background: var(--alarma-100); box-shadow: inset 0 0 0 2px var(--alarma); }
/* el dia amb NOMES una reserva de l'altre tipus es un dia disponible normal */
body.vQuatre[data-filtre="individual"] .cal__dia--lliure.cal__dia--reservat:not(.cal__dia--reservatInd) { background: var(--rosa-100); box-shadow: inset 0 0 0 2px var(--rosa-300); }

/* el meu grup: el color del grup */
body.vQuatre[data-filtre="grups"] .calEdats:not(.esApagada) {
  background-color: var(--gc-tint, var(--teal-100));
  border-left-color: var(--gc-line, var(--teal)); border-right-color: var(--gc-line, var(--teal)); border-top-color: var(--gc-line, var(--teal));
}
body.vQuatre[data-filtre="grups"] .calFiltres.ambEdats {
  background-color: var(--gc-tint, var(--teal-100));
  border-left-color: var(--gc-line, var(--teal)); border-right-color: var(--gc-line, var(--teal)); border-bottom-color: var(--gc-line, var(--teal));
}
body.vQuatre[data-filtre="grups"] .calEdats__titol { color: var(--negre-500); }
body.vQuatre[data-filtre="grups"] .calFiltre.esActiu { background: var(--gc, var(--teal)); color: var(--gc-ink, #fff); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px var(--gc-line, var(--teal)); }
body.vQuatre[data-filtre="grups"] .calFiltre.esActiu .grup__punt { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6); }
body.vQuatre[data-filtre="grups"] .cal__dia--lliure { background: var(--gc-tint, var(--teal-100)); box-shadow: inset 0 0 0 2px var(--gc-line, var(--teal)); }
body.vQuatre[data-filtre="grups"] .cal__dia--lliure:hover { box-shadow: inset 0 0 0 3px var(--gc-line, var(--teal)); }
body.vQuatre[data-filtre="grups"] .cal__lliures,
body.vQuatre[data-filtre="grups"] .calLlegenda strong { color: var(--negre); }
body.vQuatre[data-filtre="grups"] .cal__dia--lliure.cal__dia--reservat:not(.cal__dia--reservatGrup) { background: var(--gc-tint, var(--teal-100)); box-shadow: inset 0 0 0 2px var(--gc-line, var(--teal)); }
/* el dia on ja tens la classe del grup: el color mes fort i APUNTAT */
body.vQuatre[data-filtre="grups"] .cal__dia--lliure.cal__dia--reservatGrup,
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup { background: var(--gc-fort, var(--teal-100)); box-shadow: inset 0 0 0 3px var(--gc-line, var(--teal)); }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntatMot { color: var(--negre); }
body.vQuatre[data-filtre="grups"] .entreno__meu,
body.vQuatre[data-filtre="grups"] .reserva__feta,
body.vQuatre[data-filtre="grups"] .guia__propera .entreno__meu { color: var(--negre); }
/* el puntet del grup dins del dia disponible (El meu grup) */
body.vQuatre .cal__lliures { flex-direction: column; gap: 3px; }
body.vQuatre .cal__lliuresPunt { display: block; width: 0.95rem; height: 0.95rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28); }
body.vQuatre .cal__lliures--dins .cal__lliuresPunt { display: none; }

/* --- LA PILOTA del grup (Oriol, 2-set): esfera amb llum i ombra, costures
   que giren en arrossegar-la; un toc li dona un cop de gir --- */
.pilota {
  position: relative; display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  flex: 0 0 auto; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 34% 30%, var(--pc-clar) 0%, var(--pc) 42%, var(--pc-fosc) 100%);
  box-shadow: inset -3px -4px 6px rgba(0, 0, 0, 0.35), inset 2px 2px 4px rgba(255, 255, 255, 0.25), 0 2px 5px rgba(0, 0, 0, 0.35);
  vertical-align: middle;
}
.pilota.esAgafada { cursor: grabbing; }
.pilota__costures { position: absolute; inset: -2%; width: 104%; height: 104%; will-change: transform; }
.pilota__brill {
  position: absolute; left: 16%; top: 10%; width: 38%; height: 28%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
}
.pilota--gran { width: 2.4rem; height: 2.4rem; margin-right: 0.35rem; }
.pilota--dia { width: 1.6rem; height: 1.6rem; }
.pilota--mini { width: 0.95rem; height: 0.95rem; }
body.vQuatre .cal__lliures { pointer-events: none; }
body.vQuatre .cal__lliures .pilota { pointer-events: auto; }
body.vQuatre .cal__apuntat .pilota { pointer-events: auto; }
@media (max-width: 900px) {
  .pilota--dia { width: 1.45rem; height: 1.45rem; }
}
/* al grup: pilota + hora, que hi capiga sense engrandir la casella */
body.vQuatre[data-filtre="grups"] .cal__lliures { top: 1.05rem; gap: 1px; }
body.vQuatre[data-filtre="grups"] .pilota--dia { width: 1.35rem; height: 1.35rem; }
body.vQuatre .cal__horaGrup { font-size: 0.72rem; font-weight: 800; line-height: 1; color: var(--negre); }
@media (max-width: 900px) { body.vQuatre .cal__horaGrup { font-size: 0.64rem; } }
/* places lliures / ple / ocupada */
.esPle, .entreno__ple { color: var(--alarma) !important; font-weight: 800; }
.entreno__places { font-size: 0.82rem; font-weight: 700; color: var(--negre-500); white-space: nowrap; }
.reserva__ple { margin: 0.9rem 0 0.2rem; font-weight: 800; color: var(--alarma); }
/* APUNTAT sempre en VERMELL, tambe a El meu grup (Oriol, 2-set) */
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntatMot { color: var(--alarma); }

/* TOTES LES CASELLES IGUALS (Oriol, 2-set: «no es pot alterar l'alçada del
   dia depenent de si estic apuntat»): una alçada per pantalla i per mode,
   la del cas mes ple. A Tot, 3 llocs (pastilles o les teves linies); a
   Individual / El meu grup, APUNTAT + fins a dues linies. */
@media (max-width: 900px) {
  body.vQuatre.vistaMes .cal__graella .cal__dia { min-height: 74px; }
  body.vQuatre.vistaMes.reservant .cal__graella .cal__dia { min-height: 62px; }
}
@media (min-width: 901px) {
  body.vQuatre.vistaMes .cal__graella .cal__dia { min-height: 96px; }
}
/* el dia on ja hi ets, amb el MATEIX contorn que la resta (Oriol, 2-set:
   «queda com doble contorn… tots els dies iguals»): nomes canvia el que hi
   ha dins (APUNTAT en vermell) */
body.vQuatre[data-filtre="grups"] .cal__dia--lliure.cal__dia--reservatGrup,
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup { background: var(--gc-tint, var(--teal-100)); box-shadow: inset 0 0 0 2px var(--gc-line, var(--teal)); }
body.vQuatre[data-filtre="individual"] .cal__dia--lliure.cal__dia--reservatInd { background: var(--rosa-100); box-shadow: inset 0 0 0 2px var(--rosa-300); }
/* els dies encesos i els reservats omplen la casella tal com es: QUADRATS,
   com la graella (un dia arrodonit dins d'una casella quadrada semblava un
   adhesiu) */
body.vQuatre .cal__dia--lliure, body.vQuatre .cal__dia--reservat { border-radius: 0; }
/* la peça de dalt fa SEMPRE la mateixa alçada (la del seu estat mes alt, la
   guia de 3 passos): el calendari no es mou en canviar de mode (Oriol, 2-set) */
body.vQuatre .calEdats { min-height: 120px; box-sizing: border-box; justify-content: center; }
/* a El meu grup, el dia APUNTAT te la MATEIXA composicio que el dia lliure:
   la paraula, la pilota gran (facil d'agafar amb el ratoli: Oriol, 2-set) i
   l'hora a sota; els dos ninots sobren, ja sabem que es grup */
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntat { top: 1rem; gap: 2px; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meu--grup { flex-direction: column; gap: 1px; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meu--grup .cal__ninot--grup { display: none; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meu--grup .pilota--mini { width: 1.25rem; height: 1.25rem; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntatMot { margin-bottom: 0; }
/* que hi capiga sencer a 62 px: paraula, pilota i hora una mica mes compactes */
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntat { top: 0.85rem; gap: 1px; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntatMot { font-size: 0.6rem; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meu--grup .pilota--mini { width: 1.1rem; height: 1.1rem; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meuHora { font-size: 0.66rem; line-height: 1; }
/* APUNTAT al grup: la pilota a l'esquerra i l'hora a la dreta, en una fila
   centrada (Oriol, 2-set: «un sota l'altre es veu malament») */
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meu--grup { flex-direction: row; gap: 4px; align-items: center; justify-content: center; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meu--grup .pilota--mini { width: 1.3rem; height: 1.3rem; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__meuHora { font-size: 0.72rem; }
body.vQuatre[data-filtre="grups"] .cal__dia--reservatGrup .cal__apuntat { top: 1.1rem; gap: 3px; }

/* el MOUSE OVER es veu a tots els dies encesos, tinguin reserva o no i sigui
   quin sigui el color del tema: el marc s'engrosseix i la casella s'aixeca
   amb una ombra (Oriol, 2-set: «al 6 i al 20 no es veu l'efecte») */
body.vQuatre .cal__graella .cal__dia--lliure:hover,
body.vQuatre[data-filtre="grups"] .cal__graella .cal__dia--lliure:hover,
body.vQuatre[data-filtre="grups"] .cal__graella .cal__dia--lliure.cal__dia--reservatGrup:hover,
body.vQuatre[data-filtre="individual"] .cal__graella .cal__dia--lliure:hover,
body.vQuatre[data-filtre="individual"] .cal__graella .cal__dia--lliure.cal__dia--reservatInd:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px var(--gc-line, var(--llima-700)), 0 6px 14px rgba(0, 0, 0, 0.22);
  filter: brightness(1.04); z-index: 2; position: relative;
}
body.vQuatre[data-filtre="individual"] .cal__graella .cal__dia--lliure:hover { box-shadow: inset 0 0 0 3px var(--rosa-500), 0 6px 14px rgba(0, 0, 0, 0.22); }
body.vQuatre[data-filtre="individual"] .cal__graella .cal__dia--lliure.cal__dia--reservatInd:hover { box-shadow: inset 0 0 0 3px var(--alarma), 0 6px 14px rgba(0, 0, 0, 0.22); }
body.vQuatre .cal__graella .cal__dia--lliure { transition: transform 0.12s, box-shadow 0.12s; }

/* --- la fitxa de la classe del grup, al mateix estil que el calendari --- */
.fitxaGrup__cap {
  display: flex; align-items: center; gap: 0.8rem;
  margin: -1.2rem -1.2rem 0.9rem; padding: 0.9rem 1.2rem;
  background: var(--gc-tint, var(--teal-100)); border-bottom: 2px solid var(--gc-line, var(--teal));
  border-radius: 14px 14px 0 0;
}
.pilota--fitxa { width: 3rem; height: 3rem; }
.fitxaGrup__qui { display: grid; gap: 0.1rem; }
.fitxaGrup__qui b { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.fitxaGrup__qui small { font-size: 0.8rem; color: var(--negre-500); }
.fitxaGrup__hora { margin: 0.1rem 0 0.6rem; font-size: 1rem; color: var(--negre-500); }
.fitxaGrup__hora b { font-size: 1.15rem; font-weight: 800; color: var(--teal); }
.reserva__amb { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--negre-500); }
.reserva__amb b { color: var(--negre); }
.reserva__amb .pilota--mini { width: 1.1rem; height: 1.1rem; }
/* l'estat: la paraula com a la casella */
.reserva__mot { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alarma); font-size: 1.05rem; }
.reserva__feta { margin: 0.4rem 0 0.2rem; }
.reserva__places { margin: 0.4rem 0 0.2rem; font-weight: 700; color: var(--negre-500); }
.reserva__placesN { font-weight: 800; color: var(--negre); }
.reserva__mes { margin: 0.8rem 0 0; }

/* --- «EL MEU MBA» (Oriol, 2-set): classes, ranquing i informes --- */
.meu__cap { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; }
.meu__hola { display: flex; align-items: center; gap: 0.9rem; }
.meu__nom { margin: 0; font-size: 1.6rem; }
.meu__grup { margin: 0.1rem 0 0; color: var(--negre-500); }
.meu__entra { text-align: center; padding: 2rem 1rem; }
.meu__seccio { margin: 0 0 2rem; }
.meu__titol { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.meu__buit { color: var(--negre-500); }
.meu__nota { margin: 0.6rem 0 0; font-size: 0.9rem; }
.meu__nota a { color: var(--teal); font-weight: 700; }
.meu__classes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.meu__classe {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--blanc); border: 1px solid var(--vora);
}
.meu__quan { display: grid; } .meu__quan b { font-weight: 800; } .meu__quan small { color: var(--negre-500); }
.meu__que { display: flex; align-items: center; gap: 0.35rem; }
@media (max-width: 600px) { .meu__classe { grid-template-columns: 1fr auto; } .meu__classe .reserva__mot { grid-column: 1; } }
/* la barra Propera classe, sota la capcalera */
.properaBarra {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.45rem 1rem; background: var(--teal-100); color: var(--negre); text-decoration: none;
  font-size: 0.9rem; border-bottom: 1px solid var(--teal-300);
}
.properaBarra__mot { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alarma); font-size: 0.78rem; }
.properaBarra b { font-weight: 800; }
.properaBarra small { color: var(--negre-500); }
.properaBarra__ves { font-weight: 800; color: var(--teal); }
.auth__meu { display: inline-block; margin: 0.6rem 0 0.2rem; }
/* el ranquing, amb l'estil del cartell */
.ranking { display: grid; gap: 1rem; }
.ranking__cartell {
  border-radius: 18px; padding: 1.4rem 1.2rem 1.2rem; color: #fff; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, #2a0d12 0%, #120a0c 55%, #0b0709 100%);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55); position: relative; overflow: hidden;
}
.ranking__cartell::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 55%, rgba(200, 30, 50, 0.35) 56%, transparent 72%); pointer-events: none; }
.ranking__cap { position: relative; }
.ranking__escut { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 8px; background: #7a1020; border: 2px solid #d4a53c; font-weight: 900; letter-spacing: 0.06em; }
.ranking__titol { margin: 0.5rem 0 0; font-size: 2.4rem; line-height: 0.95; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; font-style: italic; }
.ranking__sub { margin: 0; font-size: 2rem; line-height: 1; font-weight: 900; text-transform: uppercase; font-style: italic; color: #c8202f; }
.ranking__reptes { margin: 0.6rem 0 0; color: #e2b95a; font-weight: 800; }
.ranking__academy { margin: 0 0 1rem; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: #ddd; }
.ranking__llista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; position: relative; }
.ranking__fila {
  display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem 0.55rem 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 800; font-style: italic; text-align: left;
}
.ranking__pos { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 2.4rem; border-radius: 9px 0 0 9px; background: rgba(255, 255, 255, 0.12); font-size: 1.4rem; font-weight: 900; }
.ranking__nom { font-size: 1.25rem; }
.ranking__punts { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ranking__fila--1 { background: linear-gradient(90deg, #7a1020, #3a0a12); border-color: #d4a53c; box-shadow: 0 0 0 1px #d4a53c, 0 6px 18px -6px rgba(212, 165, 60, 0.6); }
.ranking__fila--1 .ranking__pos { background: linear-gradient(135deg, #f1d27a, #b8862a); color: #2a1a05; }
.ranking__fila--1 .ranking__punts { color: #f1d27a; }
.ranking__fila--2 .ranking__pos { background: linear-gradient(135deg, #e6e6e6, #9a9a9a); color: #222; }
.ranking__fila--3 .ranking__pos { background: linear-gradient(135deg, #e3a06a, #9a5a2a); color: #2a1a05; }
.ranking__fila.esMeva { outline: 2px solid var(--llima); }
.ranking__corona { font-style: normal; margin-right: 0.3rem; color: #f1d27a; }
.ranking__lema { margin: 1rem 0 0; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: #e2b95a; position: relative; }
/* els informes */
.meu__informes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.informe { padding: 0.9rem 1rem; border-radius: 12px; background: var(--crema); }
.informe__cap { margin-bottom: 0.4rem; } .informe__cap small { color: var(--negre-500); }
.informe__text { margin: 0 0 0.6rem; white-space: pre-line; line-height: 1.45; }
.informe__pdf { display: inline-block; font-weight: 800; color: var(--teal); text-decoration: none; padding: 0.35rem 0.8rem; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--teal); }
.informe__elimina { margin-left: 0.5rem; }
/* els editors de l'admin */
.editor { margin-top: 0.9rem; border: 1px dashed var(--vora); border-radius: 12px; padding: 0.6rem 0.9rem; }
.editor summary { cursor: pointer; font-weight: 800; color: var(--teal); }
.editor__form { display: grid; gap: 0.7rem; margin-top: 0.7rem; }
.editor__form textarea, .editor__form select, .editor__form input[type=file] { border: 1px solid var(--vora); border-radius: 10px; padding: 0.6rem 0.75rem; font: inherit; background: var(--blanc); }
.editor__form .boto { justify-self: start; }

/* --- LA CISTELLA: petita o gran, en el mateix marc (Oriol, 2-set) --- */
.cistella { display: inline-block; width: 2.2rem; height: 2.2rem; vertical-align: middle; flex: 0 0 auto; }
.cistella svg { width: 100%; height: 100%; overflow: visible; }
.cistella__terra { stroke: #b9bec4; stroke-width: 2; stroke-linecap: round; }
.cistella__pal { fill: #6b7076; }
.cistella__tauler { fill: #ffffff; stroke: #1d1f22; stroke-width: 2.2; }
.cistella__quadre { fill: none; stroke: #1d1f22; stroke-width: 1.4; }
.cistella__cercle { fill: none; stroke: #e8762b; stroke-width: 2.6; }
.cistella__xarxa { fill: none; stroke: #8f959c; stroke-width: 1.1; stroke-linecap: round; }
.cistella__bola { fill: #e8762b; stroke: #8a3f10; stroke-width: 0.8; opacity: 0; }
/* en passar-hi el ratoli o tocar-la, la pilota cau per la xarxa */
@keyframes cistellaCau {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translateY(var(--cau)); }
  100% { opacity: 0; transform: translateY(calc(var(--cau) + 8px)); }
}
.cistella:hover .cistella__bola, .cistella:active .cistella__bola, .cistella.esToca .cistella__bola { animation: cistellaCau 0.9s ease-in forwards; }
.cistella:hover .cistella__xarxa, .cistella.esToca .cistella__xarxa { animation: cistellaXarxa 0.9s ease-out 0.35s; transform-origin: 50% 0; }
@keyframes cistellaXarxa { 0% { transform: scaleX(1); } 40% { transform: scaleX(1.18); } 100% { transform: scaleX(1); } }
.cistella--mini { width: 1.5rem; height: 1.5rem; }
.cistella--gran2 { width: 3rem; height: 3rem; }
/* al costat del nom del grup */
.grup .cistella { margin: 0 0.15rem 0 0.35rem; }
/* la cistella, GRAN, amb la mida escrita a sota en petit (Oriol, 2-set) */
.cistella { display: inline-flex; flex-direction: column; align-items: center; width: auto; height: auto; }
.cistella svg { width: 3.2rem; height: 3.2rem; }
.cistella__mida { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negre-500); line-height: 1; margin-top: -2px; }
.cistella--mini svg { width: 2rem; height: 2rem; }
.cistella--peça svg { width: 3.4rem; height: 3.4rem; }
.cistella--fitxa { margin-left: auto; }
.cistella--fitxa svg { width: 3.4rem; height: 3.4rem; }
.cistella--gran2 svg { width: 4.5rem; height: 4.5rem; }
.grup .cistella { margin: 0 0 0 0.6rem; }
.fitxaGrup__cap { align-items: center; }
.cistella--fitxa { margin-right: 1.8rem; }
/* individual = la pilota TARONJA (Oriol, 2-set): a la peça, a la fitxa, als dies */
.pilota--titol { width: 1.5rem; height: 1.5rem; vertical-align: -0.35rem; margin-right: 0.2rem; }
.fitxaGrup__cap--ind { background: var(--rosa-100); border-bottom-color: var(--rosa-500); }
body.vQuatre .cal__meu--ind .pilota--mini { width: 1rem; height: 1rem; }
.entreno__qui .pilota--mini { width: 1.1rem; height: 1.1rem; margin-right: 0.15rem; }
/* a Tot, la llista d'on estas apuntat: en el GRIS del calendari, per ordre,
   amb la pilota del color (Oriol, 2-set) */
body.vQuatre .calEdats.esGris:not(.esApagada) { background-color: #f1f2f4; border-left-color: #c9ced3; border-right-color: #c9ced3; border-top-color: #c9ced3; }
body.vQuatre .calFiltres.ambEdats.esGris { background-color: #f1f2f4; border-left-color: #c9ced3; border-right-color: #c9ced3; border-bottom-color: #c9ced3; }
body.vQuatre .calEdats.esGris .calEdats__titol { color: var(--negre-500); }
.apuntats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; text-align: left; font-size: 0.88rem; }
.apuntats li { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.apuntats li b { font-weight: 800; }
.apuntats li span { color: var(--negre-500); }
.apuntats .pilota--mini { width: 1.1rem; height: 1.1rem; }
.apuntats__mes { display: inline-block; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 800; color: var(--teal); }
.apuntats { gap: 0.1rem; font-size: 0.84rem; }
.apuntats .apuntats__mes { margin: 0; }
.apuntats--tipus { margin-top: 0.15rem; justify-items: center; }
.apuntats--tipus .guia__mot { font-size: 0.72rem; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .grup--gran { margin-bottom: 0.1rem; }
/* que tot capiga als 120 px de la peça: a El meu grup, pilota i cistella
   mes petites quan hi ha la llista; les files APUNTAT compactes */
body.vQuatre[data-filtre="grups"] .calEdats__cos .grup--gran { font-size: 1.05rem; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .grup--gran .pilota--gran { width: 1.9rem; height: 1.9rem; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .cistella--peça svg { width: 2.1rem; height: 2.1rem; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .cistella__mida { font-size: 0.5rem; }
.apuntats { gap: 0; font-size: 0.8rem; line-height: 1.25; }
.apuntats--tipus .guia__mot { font-size: 0.66rem; }
.apuntats .pilota--mini { width: 1rem; height: 1rem; }
body.vQuatre .calEdats { padding-top: 0.35rem; padding-bottom: 0.35rem; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .grup--gran .pilota--gran { width: 1.6rem; height: 1.6rem; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .cistella--peça svg { width: 1.8rem; height: 1.8rem; }
.apuntats__mes { margin-left: 0.3rem; }
/* APUNTAT sempre vermell a les llistes de la peça (una regla de la llista li guanyava) */
.apuntats li .guia__mot { color: var(--alarma); }
/* la llista amb ▲▼ */
.llistaScroll { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.llistaScroll .apuntats { justify-items: start; }
.llistaScroll__botons { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.llistaScroll__botons button {
  width: 1.5rem; height: 1.1rem; border: 1px solid var(--vora); border-radius: 6px; background: var(--blanc);
  font-size: 0.6rem; line-height: 1; cursor: pointer; color: var(--teal); padding: 0;
}
.llistaScroll__botons button:disabled { opacity: 0.3; cursor: default; }
.llistaScroll__on { font-size: 0.6rem; font-weight: 800; color: var(--negre-500); white-space: nowrap; }
/* els botons del filtre que NO estan actius han de semblar botons (Oriol, 2-set) */
body.vQuatre .calFiltre { background: var(--blanc); color: var(--negre); box-shadow: inset 0 0 0 1.5px var(--vora); }
body.vQuatre .calFiltre:hover { box-shadow: inset 0 0 0 1.5px var(--negre-500); }
body.vQuatre .calFiltre.esActiu { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
/* l'alçada comuna de la peça puja a 128 px: hi caben les fletxes de la llista */
body.vQuatre .calEdats { min-height: 128px; }
/* a les caselles: pilota del color + hora, res mes; amb aire */
body.vQuatre .cal__meu { gap: 4px; font-size: 0.74rem; }
body.vQuatre .cal__meu .pilota--mini { width: 1.05rem; height: 1.05rem; }
body.vQuatre .cal__apuntat { gap: 3px; }

/* --- les PASTILLES d'on estas apuntat (Oriol, 3-set) --- */
.xipsRes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; max-height: 4.2rem; overflow: hidden; }
.xipRes {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem 0.2rem 0.3rem;
  border: 1.5px solid var(--vora); border-radius: 999px; background: var(--blanc); cursor: pointer;
  font-family: var(--cos); font-size: 0.78rem; line-height: 1; color: var(--negre); text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.xipRes:hover { border-color: var(--negre-500); transform: translateY(-1px); }
.xipRes b { font-weight: 800; }
.xipRes span { color: var(--negre-500); font-weight: 700; }
.xipRes--mes { padding: 0.2rem 0.6rem; font-weight: 800; color: var(--teal); border-color: var(--teal); }
.pilota--xip { width: 1.15rem; height: 1.15rem; }
.xipsRes__titol { margin: 0 0 0.25rem; text-align: center; }
.xipsRes__titol .guia__mot { font-size: 0.7rem; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .xipsRes__titol { margin-top: 0.15rem; }
.xipRes--sense { padding-left: 0.55rem; }
.xipsRes { max-height: 4.4rem; }

/* --- la llista d'on estas apuntat, per files (Oriol, 3-set) --- */
.apuntatsLlista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; width: 100%; }
.apuntatsFila {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%;
  border: 0; background: rgba(255, 255, 255, 0.6); border-radius: 8px; padding: 0.22rem 0.5rem;
  font-family: var(--cos); font-size: 0.82rem; line-height: 1.15; color: var(--negre); cursor: pointer;
}
.apuntatsFila:hover { background: var(--blanc); }
.apuntatsFila .guia__mot { font-size: 0.66rem; }
.apuntatsFila b { font-weight: 800; }
.apuntatsFila__hora { color: var(--negre-500); }
.apuntatsFila .pilota--xip { width: 1.05rem; height: 1.05rem; }
.apuntats__toggle {
  border: 0; background: none; cursor: pointer; padding: 0.15rem 0.5rem; width: 100%;
  font-family: var(--cos); font-weight: 800; font-size: 0.78rem; color: var(--teal); text-decoration: underline;
}
/* la peça: 140 px fixos als tres modes; nomes creix si l'usuari desplega la llista */
body.vQuatre .calEdats { min-height: 140px; }
body.vQuatre .calEdats.esOberta { min-height: 140px; height: auto; }
body.vQuatre[data-filtre="grups"] .calEdats__cos .grup--gran { margin-bottom: 0.15rem; }
/* l'alçada comuna de la peça: 168 px, la de quatre files i el «+N mes» */
body.vQuatre .calEdats { min-height: 168px; }
body.vQuatre .calEdats.esOberta { min-height: 168px; }
/* LA PEÇA, SEMPRE IGUAL D'ALTA, passi el que passi a dins (Oriol, 11-set: «aquest box es fa més
   gran que els altres dos per la línia d'amagar els entrenaments; com podem fer que sigui sempre
   del mateix tamany?»). L'alçada la mana la peça: 168 px als tres modes. Si algun dia el contingut
   no hi cap, el cos es desplaça per dins en comptes d'estirar la caixa i moure el calendari.
   L'única excepció es queda com estava: quan l'usuari desplega la llista, creix. */
body.vQuatre .calEdats { height: 168px; }
body.vQuatre .calEdats.esOberta { height: auto; }
.reserva__que .pilota--mini { width: 1.5rem; height: 1.5rem; }
/* les fletxes entre els dies on estas apuntat, a baix de la fitxa */
.fitxaNav { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--vora); }
.fitxaNav__boto {
  border: 1.5px solid var(--vora); background: var(--blanc); border-radius: 999px; cursor: pointer;
  padding: 0.35rem 0.8rem; font-family: var(--cos); font-weight: 800; font-size: 0.85rem; color: var(--teal);
}
.fitxaNav__boto span { font-weight: 700; color: var(--negre); }
.fitxaNav__boto:hover { border-color: var(--teal); }
.fitxaNav__boto:disabled { opacity: 0.35; cursor: default; }
.fitxaNav__boto--seg { margin-left: auto; }
.entreno__totMes {
  border: 0; background: none; cursor: pointer; padding: 0 0.2rem; margin-left: 0.2rem;
  font-family: var(--cos); font-size: 0.74rem; font-weight: 800; color: var(--teal); text-decoration: underline; white-space: nowrap;
}
/* l'horari del dia, anivellat per columnes: hora · pilota · nom · accio */
.entreno__llista li { grid-template-columns: 6.4rem 1.6rem 1fr auto; gap: 0.5rem; }
.entreno__llista li > b { text-align: center; }
.entreno__pilota { display: flex; justify-content: center; }
.entreno__pilota .pilota--mini { width: 1.2rem; height: 1.2rem; margin: 0; }
.entreno__nom { color: var(--teal); font-weight: 600; text-align: center; }
.entreno__accio { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.3rem; min-width: 5.5rem; }
.entreno__nom { white-space: nowrap; }
.entreno__qui { display: contents; }
@media (max-width: 480px) { .entreno__llista li { grid-template-columns: 5.6rem 1.4rem 1fr auto; font-size: 0.86rem; } }

/* ===== 3-set: tot el calendari + la peça en una pantalla (Oriol) ===== */
/* el pager, mes petit i del mateix estil que els botons blancs de la web */
body.vQuatre .cal__controls { margin: 0 auto 0.45rem; }
body.vQuatre.vistaMes .cal__controls { margin-top: 0.45rem; }
body.vQuatre .cal__fletxa {
  width: 32px; height: 32px; font-size: 1.15rem; padding-bottom: 2px;
  background: var(--blanc); color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal);
}
body.vQuatre .cal__fletxa:hover { background: var(--teal); color: var(--blanc); }
body.vQuatre .cal__fletxa:disabled { background: var(--blanc); color: var(--gris-300); box-shadow: inset 0 0 0 1.5px var(--gris-300); }
body.vQuatre .cal__mesActual { font-size: 1.35rem; min-width: 9.5rem; }
body.vQuatre .calLlegenda { display: none; }
/* «+ Activitat» de l'admin: a dalt de tot, a la dreta, petit */
body.vQuatre .admin__nova { display: flex; margin: 0 0 0.4rem auto; padding: 0.3rem 0.8rem; font-size: 0.8rem; box-shadow: none; }
body.vQuatre .admin__nova b { font-size: 1rem; }
/* TOTES LES SETMANES IGUAL D'ALTES en tots els modes, amb lloc per APUNTAT
   (a la fila del numero) + 3 linies: hores reservades o activitats */
body.vQuatre .cal__dia { position: relative; }
body.vQuatre .cal__apuntat,
body.vQuatre.reservant .cal__dia--reservat .cal__apuntat,
body.vQuatre .cal__dia--reservat:has(.cal__xip) .cal__apuntat { position: static; display: contents; }
body.vQuatre .cal__apuntatMot { position: absolute; top: 4px; left: 4px; line-height: 1; }
body.vQuatre .cal__meu { pointer-events: none; }
@media (max-width: 900px) {
  body.vQuatre.vistaMes .cal__graella .cal__dia,
  body.vQuatre.vistaMes.reservant .cal__graella .cal__dia { min-height: 80px; }
  body.vQuatre.vistaMes .cal__dia--reservat:has(.cal__xip) .cal__apuntat { position: static; }
  body.vQuatre .cal__apuntatMot { top: 3px; left: 3px; }
}
@media (max-width: 420px) { body.vQuatre .cal__apuntatMot { font-size: 0.56rem; letter-spacing: 0; } }
@media (min-width: 901px) { body.vQuatre.vistaMes .cal__graella .cal__dia { min-height: 96px; } }
/* el diumenge on ja tens hora no porta la pastilla dels entrenos: les teves
   linies ja ho diuen, i aixi hi caben APUNTAT + 3 linies */
body.vQuatre .cal__dia--reservat .cal__xip--entreno { display: none; }
body.vQuatre.vistaMes .cal__graella .cal__dia--reservat .cal__xip--entreno,
body.vQuatre .cal__graella .cal__dia--reservat .cal__xip--entreno { display: none; }
@media (max-width: 420px) { body.vQuatre .cal__apuntatMot { font-size: 0.5rem; left: 2px; } }
/* al telefon estret, APUNTAT no ha de tocar el numero de dos digits */
@media (max-width: 420px) { body.vQuatre[data-filtre] .cal__dia .cal__apuntatMot { font-size: 0.5rem; letter-spacing: 0; left: 2px; } }
/* «+ Activitat» a la barra negra, al costat de la rodona del compte */
body.vQuatre .admin__nova--cap { margin: 0 0.6rem 0 0; padding: 0.3rem 0.7rem; font-size: 0.78rem; background: var(--llima); color: var(--negre); align-self: center; }
@media (max-width: 900px) {
  /* marca · pastilles (buides) · + Activitat · rodona del compte */
  body.vQuatre .capcalera:has(.admin__nova--cap) { grid-template-columns: auto 1fr auto auto; }
  body.vQuatre .admin__nova--cap { justify-self: end; }
}
/* dues classes que solapen horari: no s'hi pot apuntar, i es veu SUPERCLAR (Oriol, 3-set) */
.entreno__solapa { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; color: var(--alarma); font-weight: 800; font-size: 0.82rem; white-space: nowrap; }
.entreno__solapa small { font-size: 0.66rem; font-weight: 700; color: var(--negre-500); }
.entreno__llista li.esSolapada > b, .entreno__llista li.esSolapada .entreno__nom, .entreno__llista li.esSolapada .entreno__pilota { opacity: 0.45; }
.reserva__solapa { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; border: 2px solid var(--alarma); background: var(--alarma-100); color: var(--negre); font-size: 0.92rem; }
.reserva__solapa b { color: var(--alarma); }
/* ===== 3-set: a Tot, cada diumenge diu Individual, Grup (el meu) i altres ===== */
body.vQuatre .cal__dia--entreno { cursor: pointer; }
body.vQuatre .cal__meu--lliure .cal__meuHora { font-weight: 700; color: var(--negre-500); }
body.vQuatre .cal__meu--lliure .cal__meuHora.esPle { color: var(--alarma); }
/* a Tot, el dia on ja tens hora tambe diu APUNTAT (a la fila del numero) */
body.vQuatre:not(.reservant) .cal__dia--reservat .cal__apuntatMot {
  display: block; font-size: 0.7rem; font-weight: 800; line-height: 1;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--alarma);
}
@media (max-width: 900px) { body.vQuatre:not(.reservant) .cal__dia--reservat .cal__apuntatMot { font-size: 0.62rem; letter-spacing: 0; } }
@media (max-width: 420px) { body.vQuatre:not(.reservant) .cal__dia--reservat .cal__apuntatMot { font-size: 0.5rem; } }
/* ordre dins la casella a Tot: numero · linies (grup, individual) · activitats (Oriol, 3-set) */
body.vQuatre .cal__dia > .cal__num { order: 0; }
body.vQuatre .cal__dia .cal__meu { order: 2; }
body.vQuatre .cal__dia > .cal__xip { order: 5; }
/* les linies de places no es parteixen en dues */
body.vQuatre .cal__meu--lliure { flex-wrap: nowrap; }
/* a Tot: «Al calendari: [✓ El meu grup] [✓ Individual]», per treure una linia (Oriol, 3-set) */
.totTries { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--negre-500); }
.totTries__mot { font-weight: 700; margin-right: 0.15rem; }
.totTria {
  display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  border: 1.5px solid var(--vora); border-radius: 999px; background: var(--blanc); padding: 0.18rem 0.6rem;
  font-family: var(--cos); font-size: 0.78rem; font-weight: 700; color: var(--negre-500); text-decoration: line-through; opacity: 0.75;
}
.totTria .grup__punt { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.totTria.esOn { color: var(--negre); text-decoration: none; opacity: 1; border-color: var(--teal); }
.totTria.esOn::before { content: "✓"; color: var(--teal); font-weight: 800; }
/* la capa Activitats treta a Tot: cap xip d'activitat al mes */
body.vQuatre.amagaActivitats.vistaMes .cal__graella .cal__xip:not(.cal__xip--entreno) { display: none; }
/* ===== 3-set: Individual i El meu grup son ENTRENAMENTS; un sol boto per amagar-los a Tot ===== */
body.vQuatre .calFiltres { grid-template-rows: auto auto; align-items: end; }
body.vQuatre .calFiltres__cap {
  grid-column: 2 / 4; grid-row: 1; text-align: center; padding: 1px 0 0;
  font-family: var(--cos); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--negre-500);
}
body.vQuatre .calFiltre { grid-row: 2; }
body.vQuatre .totTries { margin-top: 0.45rem; }
body.vQuatre .totTria, body.vQuatre .totTria.esOn {
  border: 0; background: none; padding: 0.1rem 0.3rem; opacity: 1; text-decoration: underline; text-decoration-color: var(--negre-300, #c9c4bb);
  font-size: 0.76rem; font-weight: 700; color: var(--negre-500);
}
body.vQuatre .totTria::before { content: none; }
/* el mateix color en els dos estats, i BLAU com tot el que es toca a la web
   (Oriol, 3-set: «es nota mes que es apretable»); la lletra ja diu Amaga / Mostra */
body.vQuatre .totTria, body.vQuatre .totTria.esOn { color: var(--teal); text-decoration-color: var(--teal); }

/* ===== 3-set: ELS FILLS d'un compte ===== */
.fills { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.fill { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; background: var(--blanc); border-radius: 10px; border: 1.5px solid var(--vora); }
.fill.esActiu { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.fill__qui { display: grid; line-height: 1.2; }
.fill__qui small { color: var(--negre-500); font-size: 0.78rem; }
.fill__edat { font-weight: 600; color: var(--negre-500); }
.fill__treu { padding: 0.2rem 0.55rem; }
.fills__nou { margin-top: 0.6rem; }
.fills__nou summary { cursor: pointer; font-weight: 800; color: var(--teal); font-size: 0.9rem; }
.fills__form { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.compte__fills.esGuardant { opacity: 0.5; pointer-events: none; }
.admin__jugador.esBuit { opacity: 0.6; }
.grup__punt--cap { background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--negre-500); }
.properaBarra__fill { font-weight: 700; color: var(--negre-500); }
.meu__fill { font-weight: 700; color: var(--negre-500); }
/* «Reserves per a: [● Marc] [○ Anna]» sobre el selector del calendari */
.fillsBarra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin: 0 auto 0.4rem; max-width: 22rem; font-size: 0.8rem; color: var(--negre-500); }
.fillsBarra[hidden] { display: none; }
.fillsBarra__mot { font-weight: 700; margin-right: 0.15rem; }
.fillsBarra__fill {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  border: 1.5px solid var(--vora); border-radius: 999px; background: var(--blanc); padding: 0.22rem 0.7rem;
  font-family: var(--cos); font-size: 0.82rem; font-weight: 800; color: var(--negre);
}
.fillsBarra__fill .grup__punt { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.fillsBarra__fill.esActiu { border-color: var(--teal); background: var(--teal); color: var(--blanc); }
.fillsBarra__fill.esActiu .grup__punt--cap { box-shadow: inset 0 0 0 1.5px var(--blanc); background: transparent; }
/* el popup d'inscripcio del primer jugador: nomes el formulari */
.inscripcioFitxa .compte__fills { margin-top: 0.8rem; }
.fills__nou--directe { margin-top: 0; }
.inscripcio__peu { margin: 1rem 0 0; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; color: var(--negre-500); }
.auth__surtPetit { border: 0; background: none; cursor: pointer; font-family: var(--cos); font-size: 0.8rem; font-weight: 700; color: var(--negre-500); text-decoration: underline; }
/* el text vermell ES el boto: obre el popup d'inscriure el jugador (Oriol, 3-set) */
.calGrup__compte--text { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 800; color: var(--alarma); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.calGrup__compte--text:hover { color: var(--teal); }
/* fora el retol ENTRENAMENTS del selector (Oriol, 3-set: «a un usuari gens experimentat no li queda clar») */
body.vQuatre .calFiltres { grid-template-rows: auto; }
body.vQuatre .calFiltre { grid-row: auto; }
/* la data de naixement i, a la dreta, els anys que fan */
.auth__fila { display: flex; align-items: center; gap: 0.6rem; }
.auth__fila input { flex: 1 1 auto; min-width: 0; }
.fill__anys { flex: 0 0 auto; min-width: 4.2rem; text-align: right; font-weight: 800; color: var(--teal); font-size: 0.95rem; }
.fill__anys.esRar { color: var(--alarma); }
/* la llista d'on estas apuntat: amb mes de dues files, es desplaça dins d'una
   caixa fixa (2 files i mitja, perque es vegi que continua) */
.apuntatsLlista--scroll {
  max-height: 72px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px;
  scrollbar-width: thin; border-radius: 8px;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0.15));
  mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0.15));
}
.apuntatsLlista .apuntatsFila { min-height: 26px; }

/* els correus sortints, a la fitxa de l'admin */
.admin__correu { padding: 0.45rem 0.6rem; background: var(--blanc); border: 1.5px solid var(--vora); border-radius: 10px; margin-bottom: 0.4rem; }
.admin__correu summary { cursor: pointer; }
.admin__correu small { color: var(--negre-500); }
.admin__correuText { margin: 0.5rem 0 0; white-space: pre-wrap; font: 0.82rem/1.45 var(--cos); color: var(--negre); }
/* el jugador NOU (sense grup) a la fitxa de l'admin */
.admin__marca--nou { background: var(--alarma); color: var(--blanc); border-radius: 6px; padding: 0.05rem 0.4rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; }
.admin__jugador.esNou { border-color: var(--alarma); box-shadow: inset 0 0 0 1px var(--alarma); }
.compte__avis--jugador { border-left: 4px solid var(--alarma); }
.compte__avis--jugador .avis__assigna { margin-left: 0.4rem; }
/* la barra de jugadors: A DALT DE TOT, sobre la peça (Oriol, 3-set) */
.fillsBarra { order: -5; flex-direction: column; gap: 0.35rem; margin: 0 auto 0.9rem; max-width: 26rem; padding: 0.7rem 0.8rem 0.6rem; background: var(--blanc); border: 2px solid var(--teal); border-radius: 14px; }
.fillsBarra__mot { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.fillsBarra__tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.fillsBarra__fill { padding: 0.45rem 1rem; font-size: 0.95rem; border-width: 2px; }
.fillsBarra__fill .grup__punt { width: 0.85rem; height: 0.85rem; }
.fillsBarra__ajuda { font-size: 0.72rem; color: var(--negre-500); }
/* pestanyes de jugador: una linia sobria de botons quadrats (Oriol, 3-set) */
.fillsBarra { order: -5; flex-direction: row; gap: 0; margin: 0 auto 0.9rem; max-width: 26rem; padding: 0; background: none; border: 0; border-bottom: 2px solid var(--teal); border-radius: 0; }
.fillsBarra__tries { display: flex; width: 100%; gap: 3px; align-items: flex-end; }
.fillsBarra__fill {
  flex: 1 1 0; justify-content: center; border-radius: 6px 6px 0 0; border: 1.5px solid var(--vora); border-bottom: 0;
  background: var(--crema); color: var(--negre-500); padding: 0.5rem 0.6rem; font-size: 0.92rem; font-weight: 800; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fillsBarra__fill.esActiu { background: var(--teal); color: var(--blanc); border-color: var(--teal); }
.fillsBarra__fill .grup__punt { width: 0.7rem; height: 0.7rem; flex: 0 0 auto; }
/* «Per a Marta» sota el dia, a totes les fitxes on es reserva */
.fitxa__perA { margin: -0.3rem 0 0.7rem; font-size: 0.9rem; color: var(--negre-500); }
.fitxa__perA b { color: var(--teal); }
/* amb pestanyes de jugador, van enganxades sota la foto: el calendari cap en una pantalla (Oriol, 3-set) */
body.vQuatre .seccio:has(> .fillsBarra:not([hidden])) { padding-top: 0.5rem; }
/* el nom del jugador a la peça: desplegable amb fletxa, ben visible que es pot canviar */
.fillTria {
  appearance: none; -webkit-appearance: none; cursor: pointer; display: inline-block; vertical-align: baseline;
  font: inherit; font-weight: 800; color: inherit; letter-spacing: inherit; text-transform: inherit;
  border: 1.5px solid currentColor; border-radius: 999px; padding: 0.05rem 1.35rem 0.05rem 0.55rem; margin-left: 0.1rem;
  background: rgba(255,255,255,0.55) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2 4l4 4 4-4%27 fill=%27none%27 stroke=%27%231d1f22%27 stroke-width=%272%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") no-repeat right 0.45rem center / 0.7rem;
}
.fillTria:hover { background-color: rgba(255,255,255,0.9); }
.fillNom { font-weight: 800; }
/* ===== 4-set: que el calendari capiga en una pantalla de telefon (Oriol) =====
   Es guanya alçada per sobre del calendari, no dins: les caselles segueixen
   a 80 px (APUNTAT + 3 linies). */
@media (max-width: 900px) {
  body.vQuatre.pagina-calendari .portada { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  body.vQuatre.pagina-calendari .seccio--blanca { padding-top: 0.75rem; }
  body.vQuatre.pagina-calendari .cal__controls { margin: 0.25rem 0; }
  body.vQuatre.pagina-calendari .cal__nomdia { padding-top: 4px; padding-bottom: 4px; }
}
/* la vista de mes es l'ULTIMA cosa de la pantalla (Oriol, 4-set): fora
   l'interruptor «Següent event / Vista de mes» (a la v4 sempre es mes) i la
   llegenda de sota la graella */
body.vQuatre.pagina-calendari .calVistes,
body.vQuatre.pagina-calendari .cal__llegenda { display: none !important; }
/* i tampoc la llista d'activitats de sota la graella: a la v4 ja son al
   calendari (xips i fitxa del dia) */
body.vQuatre.pagina-calendari .avisos { display: none !important; }

/* el jugador dins la fitxa del dia: ben visible i d'un sol toc (Oriol, 4-set) */
.fitxa__perA { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin: 0.1rem 0 0.9rem; }
.fitxa__perAMot { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negre-500); }
.perA__fills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.perA__fill {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  border: 1.5px solid var(--vora); border-radius: 999px; background: var(--blanc); padding: 0.28rem 0.75rem;
  font-family: var(--cos); font-size: 0.92rem; font-weight: 800; color: var(--negre-500);
}
.perA__fill .grup__punt { display: inline-block; width: 0.72rem; height: 0.72rem; border-radius: 50%; flex: 0 0 auto; }
.perA__fill.esActiu { background: var(--teal); border-color: var(--teal); color: var(--blanc); cursor: default; }
.perA__fill.esActiu .grup__punt--cap { background: transparent; box-shadow: inset 0 0 0 1.5px var(--blanc); }
.fitxa__perA:not(.fitxa__perA--tria) .perA__fill { cursor: default; }
/* ===== 4-set: el jugador de la fitxa, del COLOR DEL MODE i molt mes destacat =====
   Si reservo un individual de la Marta, la seva pastilla ha de ser TARONJA;
   a El meu grup, del color del seu grup. I qui NO esta triat ha de quedar
   clarament apagat (Oriol: «sembla que he seleccionat a Oriol i no a Marta»). */
.fitxa__perA { gap: 0.4rem 0.5rem; margin: 0.2rem 0 1rem; }
.perA__fill { padding: 0.24rem 0.7rem; font-size: 0.88rem; font-weight: 700; color: var(--negre-500); background: var(--blanc); border-color: var(--vora); }
.perA__fill:hover { border-color: var(--negre-500); }
.perA__fill.esActiu {
  opacity: 1; padding: 0.4rem 1.05rem; font-size: 1.02rem; font-weight: 800;
  background: var(--teal); border-color: var(--teal); color: var(--blanc);
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.45);
}
.perA__fill.esActiu .grup__punt { width: 0.85rem; height: 0.85rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.perA__fill.esActiu::after { content: "✓"; margin-left: 0.15rem; font-weight: 800; }
/* Individual: taronja. El meu grup: el color del grup del jugador triat. */
body.vQuatre[data-filtre="individual"] .perA__fill.esActiu { background: var(--rosa-500); border-color: var(--rosa-500); color: #fff; }
body.vQuatre[data-filtre="grups"] .perA__fill.esActiu { background: var(--gc, var(--teal)); border-color: var(--gc-line, var(--teal)); color: var(--gc-ink, #fff); }
body.vQuatre[data-filtre="grups"] .perA__fill.esActiu .grup__punt { box-shadow: 0 0 0 2px var(--gc-ink, #fff); }

/* ===== 4-set: la FITXA DEL DIA, tota del color del mode =====
   A Individual tot taronja; a El meu grup, del color del grup. A Tot, blau. */
body.vQuatre[data-filtre="individual"] .reservaFitxa .fitxaEvent__titol,
body.vQuatre[data-filtre="individual"] .reservaFitxa .entreno__llista b,
body.vQuatre[data-filtre="individual"] .reservaFitxa .entreno__nom,
body.vQuatre[data-filtre="individual"] .reservaFitxa .fitxaNav__boto,
body.vQuatre[data-filtre="individual"] .reservaFitxa .reserva__que { color: var(--rosa-700); }
/* el BOTO es queda BLAU a tots els modes: es l'unica cosa que s'ha de prémer i
   ha de destacar sobre el color del mode (i el grup Blanc faria un boto blanc
   invisible). El taronja identifica el context, el blau identifica l'accio. */
body.vQuatre[data-filtre="individual"] .reservaFitxa .cal__xip--tecnificacio { background: var(--rosa-500); color: #fff; }
body.vQuatre[data-filtre="individual"] .reservaFitxa .fitxaNav__boto { border-color: var(--rosa-300); }
body.vQuatre[data-filtre="individual"] .reservaFitxa .fitxaNav__boto:hover { border-color: var(--rosa-500); }
body.vQuatre[data-filtre="grups"] .reservaFitxa .fitxaEvent__titol,
body.vQuatre[data-filtre="grups"] .reservaFitxa .entreno__llista b,
body.vQuatre[data-filtre="grups"] .reservaFitxa .entreno__nom,
body.vQuatre[data-filtre="grups"] .reservaFitxa .fitxaNav__boto,
body.vQuatre[data-filtre="grups"] .reservaFitxa .reserva__que { color: var(--gc-text, var(--gc-fort, var(--teal))); }
body.vQuatre[data-filtre="grups"] .reservaFitxa .cal__xip--tecnificacio { background: var(--gc, var(--teal)); color: var(--gc-ink, #fff); box-shadow: inset 0 0 0 1px var(--gc-line, var(--teal)); }
body.vQuatre[data-filtre="grups"] .reservaFitxa .fitxaNav__boto { border-color: var(--gc-line, var(--vora)); background: var(--blanc); }
/* el dia reservat: APUNTAT segueix en vermell, que es el senyal de sempre */
body.vQuatre[data-filtre="individual"] .reservaFitxa .reserva__mot,
body.vQuatre[data-filtre="grups"] .reservaFitxa .reserva__mot { color: var(--alarma); }
/* ===== 4-set: OCUPADA / PLE en gris, no en vermell =====
   El vermell es el senyal fort de l'app: APUNTAT (hi ets) i «✕ No pots» (t'ho
   impedeix una reserva teva). Que una plaça sigui d'un altre no es cap alarma:
   simplement no esta disponible → gris, i la fila apagada. */
.esPle, .entreno__ple { color: #8b9198 !important; font-weight: 700; }
.entreno__llista li:has(.entreno__ple) > b,
.entreno__llista li:has(.entreno__ple) .entreno__nom,
.entreno__llista li:has(.entreno__ple) .entreno__pilota { opacity: 0.5; }

/* ===== 4-set: UN SOL esquema per triar jugador, a la peça i a la fitxa =====
   Una línia que es desplaça: aguanta 2, 3 o 5 jugadors sense créixer mai. */
.perA__fills { display: flex; flex-wrap: nowrap; gap: 0.3rem; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px; margin: -2px; }
.perA__fills::-webkit-scrollbar { display: none; }
.perA__fill { flex: 0 0 auto; white-space: nowrap; }
.perA__fill:disabled { cursor: default; }
/* a la peça de dalt, mes petites: van dins la línia del títol */
.perA__fills--peca { display: inline-flex; vertical-align: middle; max-width: 13rem; }
.perA__fills--peca .perA__fill { padding: 0.16rem 0.55rem; font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.perA__fills--peca .perA__fill.esActiu { padding: 0.2rem 0.7rem; font-size: 0.86rem; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4); }
.perA__fills--peca .perA__fill .grup__punt { width: 0.6rem; height: 0.6rem; }
.perA__fills--peca .perA__fill.esActiu .grup__punt { width: 0.68rem; height: 0.68rem; }
.perA__fills--peca .perA__fill.esActiu::after { content: none; }
/* el color del mode també a la peça */
body.vQuatre[data-filtre="individual"] .perA__fills--peca .perA__fill.esActiu { background: var(--rosa-500); border-color: var(--rosa-500); color: #fff; }
body.vQuatre[data-filtre="grups"] .perA__fills--peca .perA__fill.esActiu { background: var(--gc, var(--teal)); border-color: var(--gc-line, var(--teal)); color: var(--gc-ink, #fff); }
/* amb tres jugadors o mes, la vora dreta s'esvaeix: es veu que la llista continua */
/* (5-set) sense mascara a les vores: el nom del jugador es veu sencer i nitid, tambe a la fila amb scroll (Oriol) */
.perA__fills.esScroll { -webkit-mask-image: none; mask-image: none; }
/* la fila de pastilles no pot eixamplar mai la fitxa: es desplaça per dins */
.fitxa__perA { flex-wrap: nowrap; }
.fitxa__perAMot { flex: 0 0 auto; }
.fitxa__perA .perA__fills { flex: 1 1 0; min-width: 0; }
/* la targeta de qualsevol fitxa mai no pot passar de la pantalla: el que no hi
   cap (la fila de jugadors) es desplaça per dins */
.fitxaEvent__targeta { max-width: calc(100vw - 2rem); min-width: 0; }
/* el retol va SOBRE les pastilles: així la fila té tota l'amplada i el jugador
   triat sempre es veu sencer, tinguis dos fills o quatre */
.fitxa__perA { flex-direction: column; align-items: stretch; gap: 0.3rem; }
.fitxa__perA .perA__fills { flex: 0 0 auto; width: 100%; }
/* ===== 4-set: les pastilles NO es mouen segons qui estigui triat =====
   Totes iguals de mida i de pes; el ✓ té el seu lloc reservat encara que no
   es vegi. Només canvia el color. Així la fila queda clavada al mateix lloc
   tant si tries l'Oriol com la Marta (Oriol: «no poden caure en funció de la
   lletra interior»). */
.perA__fill, .perA__fill.esActiu {
  padding: 0.3rem 0.8rem; font-size: 0.92rem; font-weight: 800; box-shadow: none;
}
.perA__fill::after, .perA__fill.esActiu::after { content: "✓"; margin-left: 0.15rem; visibility: hidden; }
.perA__fill.esActiu::after { visibility: visible; }
.perA__fill .grup__punt, .perA__fill.esActiu .grup__punt { width: 0.78rem; height: 0.78rem; }
.perA__fills--peca .perA__fill, .perA__fills--peca .perA__fill.esActiu {
  padding: 0.18rem 0.6rem; font-size: 0.82rem;
}
.perA__fills--peca .perA__fill::after, .perA__fills--peca .perA__fill.esActiu::after { content: "✓"; visibility: hidden; }
.perA__fills--peca .perA__fill.esActiu::after { visibility: visible; }
.perA__fills--peca .perA__fill .grup__punt, .perA__fills--peca .perA__fill.esActiu .grup__punt { width: 0.62rem; height: 0.62rem; }
/* ===== 4-set: el títol de la peça, sempre al mateix lloc =====
   La peça és un flex centrat verticalment, així que el títol pujava o baixava
   segons el que hi hagués a sota (Oriol: «classes individuals i la línia de
   sota es troben en una posició diferent a l'Oriol que a la Marta»). Ara el
   títol va clavat a dalt i el cos ocupa la resta, centrat dins seu. */
body.vQuatre .calEdats { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; }
body.vQuatre .calEdats__titol { flex: 0 0 auto; margin-bottom: 0.35rem; }
body.vQuatre .calEdats__cos { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; }
/* ===== 4-set: el vermell vol dir UNA sola cosa =====
   APUNTAT (hi ets) es queda vermell: es el senyal que el pare busca a la
   graella. «✕ No pots» passa a gris com «Ocupada»: també és una franja que no
   pots agafar, només que amb el motiu. Així el vermell no fa dues feines. */
.entreno__solapa { color: #8b9198; }
.entreno__solapa small { color: #8b9198; }
.reserva__solapa { border-color: var(--vora); background: var(--gris-100, #f1f2f4); }
.reserva__solapa b { color: var(--negre); }
/* ===== 4-set: la pilota de color és la TEVA =====
   Les pilotes dels dies amb places lliures van esmorteïdes i les del dia on
   estàs apuntat, a tot color. Així, escanejant el mes, el que crida és on hi
   ets, no on hi ha lloc. (No les poso grises: una pilota grisa sembla
   espatllada i «lliure» no és «no disponible».) */
body.vQuatre .cal__lliures .pilota,
body.vQuatre .cal__meu--lliure .pilota { opacity: 0.45; }
body.vQuatre .cal__dia--reservat .cal__apuntat .cal__meu:not(.cal__meu--lliure) .pilota { opacity: 1; }
/* ===== 4-set: el text de les places lliures, en to neutre =====
   L'únic text de color de la graella ha de ser APUNTAT. El dia ja diu que és
   d'individual o del teu grup amb el fons i la vora; el comptador només ha de
   dir quantes en queden. Tres tons: APUNTAT vermell · lliures negre llegible ·
   Ple gris fluix. */
body.vQuatre .cal__lliures,
body.vQuatre[data-filtre="individual"] .cal__lliures,
body.vQuatre[data-filtre="grups"] .cal__lliures,
body.vQuatre .cal__horaGrup { color: var(--negre-500); }
body.vQuatre .cal__lliures .esPle, body.vQuatre .cal__horaGrup.esPle { color: #8b9198; }

/* ===== 4-set: la fila de jugadors, separada del títol de la peça =====
   El títol diu QUÈ estàs mirant; la fila de sota, PER A QUI. Mateixes
   pastilles que a la fitxa del dia, així el control és sempre el mateix. */
body.vQuatre .calEdats__jugadors { display: flex; justify-content: center; margin: 0.1rem 0 0.45rem; }
body.vQuatre .perA__fills--peca { max-width: 100%; }
body.vQuatre .perA__fills--peca .perA__fill,
body.vQuatre .perA__fills--peca .perA__fill.esActiu { padding: 0.26rem 0.75rem; font-size: 0.88rem; }
body.vQuatre .perA__fills--peca .perA__fill .grup__punt,
body.vQuatre .perA__fills--peca .perA__fill.esActiu .grup__punt { width: 0.72rem; height: 0.72rem; }
body.vQuatre .calEdats__titol { margin-bottom: 0.1rem; }

/* ===== 4-set: el COMPTE amb el mateix llenguatge que el calendari ===== */
.auth__contacte { margin: 0.2rem 0 0.4rem; font-size: 0.92rem; color: var(--negre-500); display: flex; align-items: center; gap: 0.4rem; }
.auth__contacte a { color: var(--negre); text-decoration: none; font-weight: 700; }
.auth__senseTel { color: var(--alarma); font-weight: 700; }
.auth__canviaTel { border: 0; background: none; cursor: pointer; font-family: var(--cos); font-size: 0.82rem; font-weight: 800; color: var(--teal); padding: 0.1rem 0.3rem; }
.auth__telForm { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0 0 0.6rem; }
.auth__telForm .auth__camp { flex: 1 1 auto; }
.fill { grid-template-columns: auto 1fr auto auto; padding: 0.5rem 0.65rem; }
.fill__pilota .grup__punt { display: block; width: 0.95rem; height: 0.95rem; border-radius: 50%; }
.fill__pilota .grup__punt--cap { background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--negre-500); }
.fill.esActiu { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--teal-100, #dcebef); }
.fill__tria.perA__fill { padding: 0.24rem 0.7rem; font-size: 0.86rem; }
.fill__tria.perA__fill:disabled { cursor: default; opacity: 1; }
.compte__fill { font-weight: 700; color: var(--teal); }

/* ===== 4-set: EL MEU MBA per jugador ===== */
.meu__qui { display: grid; gap: 0.3rem; min-width: 0; }
.meu__qui .calEdats__jugadors { justify-content: flex-start; margin: 0.35rem 0 0; }
.meu__ajuda { margin: -0.4rem 0 0.7rem; font-size: 0.86rem; color: var(--negre-500); }
.meu__historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.meu__fetaBoto {
  display: grid; grid-template-columns: 6.6rem 1fr auto; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
  padding: 0.5rem 0.7rem; border: 1.5px solid var(--vora); border-radius: 10px; background: var(--blanc); cursor: pointer; font-family: var(--cos);
}
.meu__fetaBoto:hover { border-color: var(--teal); }
.meu__feta.teInforme .meu__fetaBoto { border-color: var(--teal); }
.meu__feta .meu__quan { display: grid; line-height: 1.15; }
.meu__feta .meu__quan b { font-weight: 800; color: var(--negre); }
.meu__feta .meu__quan small { color: var(--negre-500); font-size: 0.78rem; }
.meu__feta .meu__que { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--negre); }
.meu__informeMarca { font-weight: 800; color: var(--teal); white-space: nowrap; }
.meu__informeMarca small { font-weight: 600; color: #8b9198; }
.informe--fitxa { margin-top: 0.8rem; padding: 0.8rem 0.9rem; background: var(--crema); border-radius: 10px; }
.ranking__cap--apagat { opacity: 0.75; }
.ranking__cap--apagat .ranking__sub { font-size: 0.92rem; margin-top: 0.3rem; }
@media (max-width: 480px) { .meu__fetaBoto { grid-template-columns: 5.6rem 1fr auto; padding: 0.45rem 0.55rem; } }
/* el formulari del telefon nomes s'obre amb el llapis: el display:flex tapava l'atribut hidden */
.auth__telForm[hidden] { display: none; }

/* ===== 4-set: EL COMPTE amb els estàndards del calendari =====
   Etiqueta · nom gran · contacte en una línia. Els jugadors són files
   tocables (la triada, plena i amb ✓, com les pastilles). Les reserves són
   les files APUNTAT de la peça del calendari, del jugador triat. */
.compteFitxa .fitxaEvent__titol { margin-top: 0.6rem; }
.auth__contacte { flex-wrap: wrap; row-gap: 0.1rem; margin-bottom: 0.2rem; }
.auth__contacte .auth__correu { color: var(--negre-500); }
.auth__sep { color: var(--negre-300, #c9c4bb); }
.compte__seccio { margin-top: 1.1rem; }
.compte__fills .fills { gap: 0.45rem; }
.fill { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.4rem; padding: 0; background: none; border: 0; }
.fill__cos {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem; width: 100%; text-align: left;
  padding: 0.5rem 0.75rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--blanc); cursor: pointer; font-family: var(--cos);
}
.fill__cos:disabled { cursor: default; }
.fill__cos:hover { border-color: var(--teal); }
.fill.esActiu .fill__cos { background: var(--teal); border-color: var(--teal); color: var(--blanc); }
.fill.esActiu .fill__qui b, .fill.esActiu .fill__qui small { color: var(--blanc); }
.fill.esActiu .fill__qui small { opacity: 0.85; }
.fill__pilota .pilota--mini { width: 1.5rem; height: 1.5rem; }
.fill.senseGrup .fill__pilota .pilota { opacity: 0.45; }
.fill.esActiu .fill__pilota .pilota { opacity: 1; }
.fill__qui b { font-size: 1rem; font-weight: 800; color: var(--negre); }
.fill__marca { font-weight: 800; font-size: 1.05rem; min-width: 1.1rem; text-align: center; }
.fill__treu { border: 1.5px solid var(--vora); background: var(--blanc); border-radius: 50%; width: 2rem; height: 2rem; cursor: pointer; color: var(--alarma); font-weight: 800; font-size: 0.9rem; }
.fill__treu:hover { border-color: var(--alarma); }
.compte__reserves.apuntatsLlista { max-height: none; -webkit-mask-image: none; mask-image: none; overflow: visible; }
.compte__res { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; }
.compte__res .apuntatsFila { text-decoration: none; width: 100%; justify-content: flex-start; }
.compte__res .apuntatsFila small { color: var(--negre-500); font-weight: 600; margin-left: 0.2rem; }
.compte__res .compte__anulla { white-space: nowrap; }
.compte__enllac { display: block; margin: 1.2rem 0 0.4rem; font-weight: 800; color: var(--teal); text-decoration: none; }
.compte__enllac:hover { text-decoration: underline; }
/* ajustos del compte: la data de la reserva en una línia, el llapis enganxat al
   telèfon, i cap fons darrere la ✕ del jugador triat */
.auth__telGrup { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; }
.fill.esActiu { background: none; box-shadow: none; border: 0; }
.compte__res .apuntatsFila { flex-wrap: nowrap; overflow: hidden; }
.compte__res .apuntatsFila b, .compte__res .apuntatsFila small { white-space: nowrap; }
.compte__res .apuntatsFila .guia__mot { flex: 0 0 auto; }
@media (max-width: 420px) { .compte__res .apuntatsFila small { display: none; } .compte__res .apuntatsFila { gap: 0.4rem; } }

/* ===== 4-set: el box del jugador triat es desplega amb les seves reserves ===== */
.fill.esActiu { border: 2px solid var(--teal); border-radius: 14px; background: var(--blanc); padding: 0 0 0.6rem; gap: 0 0.4rem; }
.fill.esActiu .fill__cos { border-radius: 12px 0 0 0; border: 0; }
.fill.esActiu .fill__treu { margin-right: 0.4rem; }
.fill__dins { grid-column: 1 / -1; padding: 0.55rem 0.75rem 0; }
.fill__dinsTitol { margin: 0 0 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.fill__dins .compte__reserves { margin: 0; }
.fill__enllacos { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.6rem 0 0; }
.fill__enllacos a { font-size: 0.86rem; font-weight: 800; color: var(--teal); text-decoration: none; }
.fill__enllacos a:hover { text-decoration: underline; }
.fill__dins .compte__buit { padding: 0.2rem 0; }
/* els avisos, a dalt del compte: compactes, sota el contacte */
.compte__seccio--avisos { margin-top: 0.8rem; }
.compte__seccio--avisos .compte__avis { padding: 0.5rem 0.7rem; font-size: 0.88rem; }
/* ===== 4-set: els avisos, més llegibles (Oriol: «costa llegir-ho») =====
   Fons blau clar amb barra a l'esquerra, lletra negra i una mica més gran. */
.compte__seccio--avisos .compte__avis,
.compte__avis {
  padding: 0.7rem 0.9rem 0.6rem; font-size: 0.98rem; line-height: 1.4; font-weight: 600; color: var(--negre);
  background: var(--teal-100, #dcebef); border: 0; border-left: 5px solid var(--teal); border-radius: 0 10px 10px 0;
}
.compte__avis.esNou { background: var(--llima-100, #f3f9d2); border-left-color: var(--llima-700, #6a8a12); }
.compte__avis time { margin-top: 0.35rem; font-size: 0.74rem; font-weight: 600; color: var(--negre-500); }
.compte__avis--jugador { border-left-color: var(--alarma); }
/* el jugador sense grup: PENDENT DE GRUP en vermell, com l'APUNTAT (Oriol, 4-set) */
.fill__pendent { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alarma); }
.fill.esActiu .fill__pendent { color: #ffd5d5; }

/* el llapis del jugador (nom i data de naixement); esborrar, només el Jordi */
.fill__edita { border: 1.5px solid var(--vora); background: var(--blanc); border-radius: 50%; width: 2rem; height: 2rem; cursor: pointer; color: var(--teal); font-weight: 800; font-size: 0.95rem; }
.fill__edita:hover { border-color: var(--teal); }
.fill.esActiu .fill__edita { margin-right: 0.4rem; }
.fill__form { grid-column: 1 / -1; display: grid; gap: 0.5rem; padding: 0.6rem 0.75rem 0.2rem; }
.fill__form[hidden] { display: none; }
.fill__formBotons { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.fill__formBotons .boto { padding: 0.5rem 1.1rem; }
/* la capçalera del jugador triat, blava d'una vora a l'altra, llapis inclòs (Oriol, 4-set) */
.fill.esActiu { background: var(--teal); padding: 0; overflow: hidden; }
.fill.esActiu .fill__cos { border-radius: 0; }
.fill.esActiu .fill__edita { margin-right: 0.55rem; background: var(--blanc); border-color: var(--blanc); color: var(--teal); }
.fill.esActiu .fill__dins, .fill.esActiu .fill__form { background: var(--blanc); margin: 0; padding: 0.6rem 0.75rem 0.7rem; }
.fill.esActiu .fill__form { padding-bottom: 0.3rem; }
/* tots els boxes iguals: el box es la fila sencera, llapis a dins, mateixa
   amplada obert o tancat (Oriol, 4-set) */
.fill { border: 2px solid var(--vora); border-radius: 14px; background: var(--blanc); overflow: hidden; padding: 0; gap: 0 0.4rem; }
.fill .fill__cos { border: 0; border-radius: 0; background: transparent; }
.fill .fill__cos:hover { border: 0; }
.fill:hover { border-color: var(--teal); }
.fill .fill__edita { margin-right: 0.55rem; }
.fill.esActiu { border-color: var(--teal); }
.fill.esActiu .fill__cos:hover { background: transparent; }
.fills__max { margin: 0.6rem 0 0; font-size: 0.85rem; font-weight: 700; color: var(--negre-500); }

/* ===== 5-set: El meu MBA, historial i informes =====
   El text dels informes es llegeix en negre (el teal de la pagina cansa en
   un text llarg). Les targetes d'informes son compactes (data · profe, dues
   linies) i obren la mateixa fitxa que l'historial. NOU en llima, com els
   avisos nous. La fitxa pren el color del mode: taronja l'individual, el
   color del grup si es de grup. */
.informe__text { color: var(--negre); }
.informe__cap b { color: var(--teal); }
.informe--resum { padding: 0; }
.informe__obre {
  display: grid; gap: 0.25rem; width: 100%; text-align: left; padding: 0.8rem 0.9rem;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer; font-family: var(--cos); font-size: 1rem; color: var(--negre);
}
.informe--resum .informe__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.informe__text--resum {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 0.95rem; line-height: 1.4; white-space: normal;
}
.informe__mes { font-weight: 800; color: var(--teal); font-size: 0.9rem; }
.informe--resum.esNou { box-shadow: inset 0 0 0 2px var(--llima); }
.meu__nou {
  display: inline-block; font-style: normal; font-weight: 800; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--llima); color: var(--negre); margin-right: 0.35rem; vertical-align: middle;
}
.informe__cap .meu__nou { margin: 0 0 0 0.2rem; }
.informe--fitxa .informe__cap b { color: var(--negre); }
/* la fitxa de l'informe, en el color del mode */
.informeFitxa--individual .fitxaEvent__titol { color: var(--rosa-700); }
.informeFitxa--individual .cal__xip--tecnificacio { background: var(--rosa-500); color: #fff; }
.informeFitxa--grup .fitxaEvent__titol { color: var(--gc-fort, var(--teal)); }
.informeFitxa--grup .cal__xip--tecnificacio { background: var(--gc, var(--teal)); color: var(--gc-ink, #fff); box-shadow: inset 0 0 0 1px var(--gc-line, var(--teal)); }

/* ===== 5-set: avisos pendents i avis d'informe tocable =====
   Els avisos llegits s'aparten a «Avisos anteriors». L'avis d'un informe es
   un boto: «Veure l'informe ›»; en tocar-lo el compte vola cap al boto
   Informes de la barra, que s'encen, i s'obre l'informe a El meu MBA. */
.compte__avis--informe { padding: 0; }
.compte__avis--informe .avis__obre {
  display: block; width: 100%; text-align: left; padding: 0.7rem 0.9rem 0.6rem; border: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer; border-radius: 0 10px 10px 0;
}
.compte__avis--informe .avis__obre time { display: block; }
.avis__ves { display: block; margin-top: 0.35rem; font-weight: 800; color: var(--teal); }
.compte__anteriors { margin-top: 0.2rem; }
.compte__anteriors summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--negre-500); padding: 0.2rem 0; }
.compte__anteriors .compte__avisos { margin-top: 0.4rem; }
.compte__anteriors .compte__avis { opacity: 0.8; }
/* el boto Informes de la barra, quan el compte hi vola: encès i bategant */
@keyframes barraBatec { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
.barraApp a.esDesti { color: var(--llima); }
.barraApp a.esDesti svg { animation: barraBatec 0.6s ease-in-out 0.25s 2; }
/* la targeta de l'informe on arribes des de l'avis */
@keyframes informeBatec { 0%, 100% { box-shadow: inset 0 0 0 2px var(--llima); } 50% { box-shadow: inset 0 0 0 4px var(--llima), 0 0 0 6px var(--llima-100, #f3f9d2); } }
.informe--resum.esDestacat { animation: informeBatec 0.9s ease-in-out 3; }
.compte__seccio--avisos .compte__avis--informe, .compte__avis--informe { padding: 0; }

/* 5-set: el jugador plegat tambe diu que te reservat (el pare ho veu tot d'un cop d'ull) */
.fill__resum { display: block; margin-top: 0.15rem; font-size: 0.8rem; color: var(--negre); }
.fill__resum b { font-weight: 800; color: var(--rosa-700); }
.fill__resum--cap { color: var(--negre-500); }
.fill__qui .fill__resum b { font-size: inherit; }

/* 5-set: El meu MBA en dues vistes; la portada diu quina */
.portada__vista { display: block; font-size: 0.55em; font-weight: 600; letter-spacing: 0.04em; opacity: 0.9; margin-top: 0.1em; }
.meu__seccio[hidden] { display: none; }

/* 5-set: una sola llista d'entrenaments fets, amb l'estat a la dreta */
.meu__informeMarca--pendent { color: #8b9198; font-weight: 700; }
.meu__informeMarca--no { color: var(--alarma); }
.meu__feta.noAssistencia .meu__fetaBoto { border-color: var(--vora); background: var(--crema); }
.meu__feta.esDestacat .meu__fetaBoto { animation: informeBatec 0.9s ease-in-out 3; }
.meu__noHiVa { margin: 0.8rem 0 0; font-weight: 800; color: var(--alarma); }

/* 5-set: l'avis de no assistencia, en vermell */
.compte__avis--no { border-left-color: var(--alarma); }
.compte__avis--no.esNou { background: #fbe9e9; border-left-color: var(--alarma); }
.compte__avis--no .avis__ves { color: var(--alarma); }

/* 5-set: informes trimestrals i historial d'entrenaments (fet / no assistencia) */
.meu__resum { margin: -0.4rem 0 0.7rem; font-size: 0.9rem; color: var(--negre); }
.meu__resum b { font-weight: 800; }
.meu__resumNo { color: var(--alarma); font-weight: 800; }
.meu__informeMarca--fet { color: var(--teal); }
.meu__feta.esFet .meu__fetaBoto { border-color: var(--vora); }
.meu__siHiVa { margin: 0.8rem 0 0; font-weight: 800; color: var(--teal); }
.informeFitxa--trimestre .fitxaEvent__titol { color: var(--teal); }

/* 5-set: l'informe es el PDF (Jordi) */
.informe__pdfBoto { display: inline-block; text-decoration: none; margin-top: 0.2rem; }
.informe--fitxa .informe__text + .informe__pdfBoto { margin-top: 0.6rem; }
.informe__text--resum:empty { display: none; }

/* 5-set: l'historial per mesos, cada mes plegable amb el seu resum */
.meu__mes > details { border: 1.5px solid var(--vora); border-radius: 12px; background: var(--blanc); }
.meu__mes > details > summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.65rem 0.9rem; cursor: pointer; list-style: none; }
.meu__mes > details > summary::-webkit-details-marker { display: none; }
.meu__mes > details > summary::after { content: '▾'; margin-left: auto; color: var(--negre-500); font-size: 0.9rem; transition: transform 0.2s; }
.meu__mes > details[open] > summary::after { transform: rotate(180deg); }
.meu__mes > details > summary > b { font-size: 1rem; font-weight: 800; color: var(--teal); }
.meu__mesResum { font-size: 0.86rem; color: var(--negre); }
.meu__historial--mes { padding: 0 0.5rem 0.5rem; gap: 0.35rem; }
.meu__historial--mes .meu__fetaBoto { border-color: var(--vora); border-radius: 8px; }
/* 5-set: el PDF es descarrega des de la fitxa (Oriol: «m'ha saltat a una altra pagina»); el resum del mes, sota el nom */
.informe--fitxa .informe__text + .informe__pdf { margin-top: 0.6rem; }
.meu__mes > details > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 0.6rem; }
.meu__mes > details > summary::after { margin-left: 0; grid-column: 2; grid-row: 1; }
.meu__mesResum { grid-column: 1 / -1; }

/* ===== 5-set: el PDF de l'informe es veu DINS de la fitxa (visor pdf.js) ===== */
.informeFitxa--trimestre .fitxaEvent__targeta { width: min(720px, calc(100vw - 1.2rem)); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; }
.informeFitxa--trimestre .informe--nota { margin-top: 0.6rem; padding: 0.6rem 0.8rem; }
.visor { margin-top: 0.7rem; padding: 8px; background: #4a4f55; border-radius: 10px; min-height: 12rem; max-height: 62vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.visor__pagina { display: block; margin: 0 auto 8px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.visor__pagina:last-child { margin-bottom: 0; }
.visor__estat { margin: 4rem 0; text-align: center; color: #fff; font-weight: 700; }
.visor__marc { width: 100%; height: 58vh; border: 0; background: #fff; }
.visor__accions { margin: 0.7rem 0 0; display: flex; justify-content: flex-end; }
/* 5-set: el xip de la fitxa de l informe no s estira (targeta en columna) */
.informeFitxa--trimestre .fitxaEvent__targeta > .cal__xip { align-self: flex-start; }

/* 5-set: informes trimestrals com a files, estil dels entrenaments */
.meu__feta--informe .meu__fetaBoto { grid-template-columns: 1fr auto; border-color: var(--teal); }
.meu__feta--informe .meu__quan b { font-size: 1rem; }
.meu__feta--informe.esNou .meu__fetaBoto { border-color: var(--llima-700, #6a8a12); background: var(--llima-100, #f3f9d2); }
.meu__feta--informe.esDestacat .meu__fetaBoto { animation: informeBatec 0.9s ease-in-out 3; }
/* 5-set: la llista d informes trimestrals, com la de l historial (sense compartir-ne la classe: pintaHistorial la busca) */
.meu__informes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

/* 5-set: cada grup te el seu ranquing; l'admin el tria amb pastilles; el cartell diu el grup */
.ranking__grups { margin: 0 0 0.8rem; }
.ranking__reptes .grup__punt { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; vertical-align: middle; margin-right: 0.15rem; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.ranking__buit { margin: 1.2rem 0 0.4rem; text-align: center; font-weight: 700; color: rgba(255, 255, 255, 0.85); }

/* 5-set: ranquings globals (fins a 5), un cartell cada un; l'editor de l'admin */
.ranking__buit { margin: 1rem 0 0.4rem; text-align: center; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.editor__botons { display: flex; gap: 0.6rem; align-items: center; margin: 0; }
.ranking__editor .editor + .editor { margin-top: 0.5rem; }

/* ===== 5-set: el cartell del ranquing, integrat en el disseny de la web app =====
   Es conserva el cartell d'en Jordi (escut, RANKING, podi or/plata/bronze)
   pero amb els colors de la web: el negre de la capçalera, la sorra dels
   titols, la llima dels accents. Fora el vermell del poster (aqui el vermell
   es nomes APUNTAT i alarmes). */
.ranking__cartell {
  border-radius: 14px; padding: 1.3rem 1rem 1.1rem;
  background: linear-gradient(180deg, #14181d 0%, #0b0e12 100%);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6); border: 1px solid #262c34;
}
.ranking__cartell::before { background: linear-gradient(115deg, transparent 58%, rgba(231, 216, 186, 0.10) 59%, transparent 74%); }
.ranking__escut { background: transparent; border: 2px solid var(--sorra); color: var(--sorra); border-radius: 8px; }
.ranking__titol { font-family: var(--titular); color: #fff; }
.ranking__sub { font-family: var(--titular); color: var(--sorra); }
.ranking__reptes { color: var(--llima); font-weight: 800; letter-spacing: 0.02em; }
.ranking__academy { color: #aab2bd; }
.ranking__fila { border-color: #2a3139; background: rgba(255, 255, 255, 0.04); }
.ranking__fila--1 { background: linear-gradient(90deg, rgba(231, 216, 186, 0.18), rgba(231, 216, 186, 0.04)); border-color: var(--sorra); box-shadow: 0 0 0 1px var(--sorra); }
.ranking__fila--1 .ranking__punts { color: var(--sorra); }
.ranking__corona { color: var(--sorra); }
.ranking__buit, .ranking__cap--apagat .ranking__sub { color: #d5dae0; font-family: var(--cos); font-style: normal; text-transform: none; font-weight: 600; }
.ranking__cap--apagat { opacity: 1; }
.ranking__cap--apagat .ranking__sub { font-size: 0.95rem; margin-top: 0.5rem; }
/* la tira de prova dels ranquings (nomes localhost o ?debug) */
.debugTira { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.8rem; padding: 0.5rem 0.7rem; border: 1.5px dashed var(--alarma); border-radius: 10px; font-size: 0.8rem; font-weight: 800; color: var(--alarma); }
.debugTira__boto { min-width: 2rem; padding: 0.25rem 0.5rem; border: 1.5px solid var(--alarma); border-radius: 999px; background: var(--blanc); color: var(--alarma); font-weight: 800; cursor: pointer; }
.debugTira__boto.esActiu { background: var(--alarma); color: #fff; }
/* 5-set: a la vista Ranquing no hi ha jugador a triar: la capçalera del jugador s amaga (el display de la classe tapava l atribut hidden) */
.meu__cap[hidden] { display: none; }
/* 5-set: amb mes d un ranquing, pastilles dels titols a sobre del cartell (un sol cartell: cap en una pantalla) */
.ranking__tries { margin: 0 0 0.7rem; }
.ranking__tries .perA__fills--peca { max-width: 100%; }
.ranking__tries .perA__fill::after, .ranking__tries .perA__fill.esActiu::after { content: none; }
/* les pastilles dels ranquings no poden eixamplar la pagina: fila amb scroll dins del seu ample */
.ranking { min-width: 0; }
.ranking__tries { min-width: 0; max-width: 100%; overflow: hidden; }
.ranking__tries .perA__fills--peca { display: flex; width: 100%; max-width: 100%; }

/* ===== 5-set: amb 2 o mes ranquings, tots alhora en graella (podis compactes) ===== */
.ranking__cartell--graella { padding: 1rem 0.7rem 0.8rem; }
.ranking__cap--mini .ranking__escut { font-size: 0.8rem; padding: 0.15rem 0.55rem; }
.ranking__cap--mini .ranking__titol { font-size: 1.6rem; margin-top: 0.3rem; }
.ranking__cap--mini .ranking__reptes { margin: 0.15rem 0 0.8rem; font-size: 0.85rem; }
.ranking__graella { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 720px) { .ranking__graella { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.ranking__podi { min-width: 0; padding: 0.5rem 0.45rem 0.45rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid #2a3139; text-align: left; }
.ranking__podiTitol { margin: 0 0 0.4rem; font-family: var(--titular); font-size: 1.05rem; line-height: 1.1; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--sorra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking__llista--mini { gap: 0.25rem; }
.ranking__llista--mini .ranking__fila { grid-template-columns: 1.5rem 1fr auto; gap: 0.3rem; padding: 0 0.35rem 0 0; border-radius: 6px; }
.ranking__llista--mini .ranking__pos { min-height: 1.6rem; font-size: 0.85rem; border-radius: 5px 0 0 5px; }
.ranking__llista--mini .ranking__nom { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking__llista--mini .ranking__punts { font-size: 0.85rem; }
.ranking__llista--mini .ranking__fila--1 { box-shadow: none; }
.ranking__buit--mini { margin: 0.3rem 0 0.5rem; font-size: 0.8rem; text-align: left; }

/* ===== 5-set: cada ranquing una targeta independent; titol centrat; res de capçalera dins ===== */
.portada__reptes { color: var(--llima); font-weight: 800; }
.ranking__graella { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.ranking__graella--una { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .ranking__graella { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .ranking__graella--una { grid-template-columns: minmax(0, 420px); } }
.ranking__podi {
  position: relative; overflow: hidden; padding: 0.7rem 0.55rem 0.6rem; border-radius: 14px; border: 1px solid #262c34;
  background: linear-gradient(180deg, #14181d 0%, #0b0e12 100%); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6); color: #fff;
}
.ranking__podi::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 58%, rgba(231, 216, 186, 0.10) 59%, transparent 74%); pointer-events: none; }
.ranking__podiTitol { text-align: center; font-size: 1.1rem; margin-bottom: 0.5rem; }
.ranking__llista--mini { position: relative; }
.ranking__graella--una .ranking__podiTitol { font-size: 1.6rem; }
.ranking__graella--una .ranking__llista--mini .ranking__fila { grid-template-columns: 2.6rem 1fr auto; gap: 0.6rem; padding-right: 0.9rem; border-radius: 10px; }
.ranking__graella--una .ranking__llista--mini .ranking__pos { min-height: 2.4rem; font-size: 1.3rem; border-radius: 9px 0 0 9px; }
.ranking__graella--una .ranking__llista--mini .ranking__nom { font-size: 1.2rem; }
.ranking__graella--una .ranking__llista--mini .ranking__punts { font-size: 1.25rem; }
.ranking__graella--una .ranking__llista--mini { gap: 0.45rem; }
/* amb 3 (senar), el darrer podi va centrat a la segona fila (Oriol) */
.ranking__graella--senar .ranking__podi:last-child { grid-column: 1 / -1; width: calc(50% - 0.35rem); justify-self: center; }
@media (min-width: 720px) { .ranking__graella--senar .ranking__podi:last-child { grid-column: auto; width: auto; justify-self: stretch; } }
/* 5-set: la fitxa d un ranquing (toc sobre la targeta): nom, copa i punts en gran */
.ranking__podi { cursor: pointer; }
.ranking__podi:hover { border-color: var(--sorra); }
.podiFitxa .fitxaEvent__targeta { width: min(480px, calc(100vw - 1.2rem)); padding: 0.6rem; background: transparent; box-shadow: none; }
.podiFitxa .fitxaEvent__tanca { color: #fff; z-index: 2; }
.podiFitxa .ranking__podi { cursor: default; padding: 1.2rem 0.9rem 1rem; }
.podiFitxa .ranking__podi:hover { border-color: #262c34; }
.ranking__copa { text-align: center; font-size: 3rem; line-height: 1; margin: 0.2rem 0 0.4rem; filter: drop-shadow(0 4px 10px rgba(231, 216, 186, 0.35)); }
/* 5-set: el toc es sobre cada NOM del ranquing: fitxa de la persona amb la copa de la posicio, el nom i els punts */
.ranking__podi { cursor: default; }
.ranking__podi:hover { border-color: #262c34; }
.ranking__fila[data-pos] { cursor: pointer; }
.ranking__fila[data-pos]:hover { border-color: var(--sorra); }
.ranking__podi--persona { text-align: center; padding: 1.4rem 1rem 1.3rem; }
.ranking__podi--persona .ranking__copa { font-size: 4.2rem; margin: 0 0 0.3rem; }
.persona__posicio { margin: 0; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sorra); }
.persona__nom { margin: 0.2rem 0 0.3rem; font-family: var(--titular); font-size: 2.2rem; line-height: 1; font-weight: 900; font-style: italic; color: #fff; }
.persona__punts { margin: 0; font-size: 1.1rem; color: #d5dae0; }
.persona__punts b { font-size: 2rem; font-weight: 900; font-style: italic; color: var(--llima); font-variant-numeric: tabular-nums; }
.ranking__podi--pos1 { border-color: var(--sorra); box-shadow: 0 0 0 1px var(--sorra), 0 10px 28px -14px rgba(0,0,0,0.6); }
.portada__titol .portada__reptes { display: inline; font-size: 1em; color: var(--llima); }
/* 5-set: mouse over sobre els 5 noms de cada ranquing */
.ranking__fila[data-pos] { transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.ranking__fila[data-pos]:hover, .ranking__fila[data-pos]:focus-visible { background: rgba(231, 216, 186, 0.14); border-color: var(--sorra); transform: translateX(2px); outline: none; }
.ranking__fila[data-pos]:hover .ranking__nom { color: var(--sorra); }

/* 7-set: boto de prova ADMIN a la capçalera (nomes localhost o ?debug) */
.debugAdmin {
  margin-right: 0.5rem; padding: 0.2rem 0.55rem; border: 1.5px dashed var(--alarma); border-radius: 999px;
  background: transparent; color: var(--alarma); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; cursor: pointer;
}
.debugAdmin.esActiu { background: var(--alarma); color: #fff; border-style: solid; }
/* el boto ADMIN de prova no pot trencar la capçalera: fora del flux, a dalt a la dreta, a l esquerra del compte */
.debugAdmin { position: fixed; top: 10px; right: 70px; z-index: 120; margin: 0; padding: 0.15rem 0.45rem; font-size: 0.62rem; }

/* ===== 7-set: l'INICI nou (portes), darrere del boto de prova VERSIÓ ===== */
.portal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 0.9rem 1rem 0.6rem; background: var(--blanc); }
@media (min-width: 720px) { .portal { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--ample); margin-inline: auto; } }
.portal__porta {
  display: grid; grid-template-rows: auto auto 1fr; gap: 0.25rem; min-height: 7.4rem; padding: 0.8rem 0.8rem 0.7rem; border-radius: 14px;
  background: linear-gradient(180deg, #14181d 0%, #0b0e12 100%); border: 1px solid #262c34; color: #fff; text-decoration: none;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6); transition: transform 0.15s, border-color 0.15s;
}
.portal__porta:hover, .portal__porta:focus-visible { transform: translateY(-2px); border-color: var(--llima); outline: none; }
.portal__icona svg { width: 1.9rem; height: 1.9rem; fill: var(--llima); }
.portal__nom { font-family: var(--titular); font-size: 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.portal__linia { align-self: end; font-size: 0.8rem; line-height: 1.25; color: var(--sorra); font-weight: 600; }
.portal__nou { display: inline-block; font-style: normal; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 999px; background: var(--llima); color: var(--negre); }
body.iniciNou .hero { margin-top: 0; }
.debugVersio { right: 132px; }


/* ===== 7-set: CONTACTE facil a tot arreu amb sessio: la bafa verda de la web, amb menu ===== */
.contacteFlotant { position: fixed; z-index: 44; right: max(16px, env(safe-area-inset-right)); bottom: 44px; display: grid; justify-items: end; gap: 0.45rem; }
@media (max-width: 900px) { body.vQuatre .contacteFlotant { bottom: calc(var(--altBarra, 64px) + 42px); } }
.contacteFlotant .flotaParla { position: static; border: 0; cursor: pointer; font: inherit; }
body.teContacte a.flotaParla { display: none; } /* amb sessio, nomes la bafa amb menu */
.contacteFlotant__menu { display: grid; gap: 0.3rem; padding: 0.5rem; border-radius: 12px; background: var(--blanc); border: 1.5px solid var(--vora); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); }
.contacteFlotant__menu[hidden] { display: none; }
.contacteFlotant__menu a { display: block; padding: 0.5rem 0.9rem; border-radius: 8px; text-decoration: none; font-weight: 800; color: var(--teal); background: var(--teal-100, #dcebef); white-space: nowrap; }

/* ===== 7-set: l'Inici nou es NOMES les quatre portes, sense scroll ===== */
/* el peu de veritat es queda a la pagina (la llenca PATROCINADORS necessita que existeixi) pero no es veu: fora de la pantalla */
body.iniciNou .peu { position: fixed; top: 300vh; left: 0; width: 1px; height: 1px; overflow: hidden; } /* fora de pantalla per SOTA: aixi la llenca creu que el peu no es veu i es mostra */
body.iniciNou #principal { display: grid; grid-template-rows: auto 1fr; min-height: calc(100vh - var(--altCap, 60px) - var(--altBarra, 64px) - var(--altPropera, 0px)); }
body.iniciNou .portal { grid-template-rows: 1fr 1fr; align-self: stretch; padding-bottom: 1rem; }
/* l'essencia: la foto del jugador, la marca, la signatura i el metode, en un bloc curt */
.portalHero { position: relative; overflow: hidden; min-height: 150px; padding: 1rem 1rem 0.9rem; color: var(--blanc); background: var(--negre) right center / cover no-repeat; background-image: url("/img/hero-jugador.png"); }
.portalHero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 45%, rgba(0, 0, 0, 0.35) 100%); }
.portalHero__text { position: relative; max-width: 30rem; }
.portalHero__marca { margin: 0; font-family: var(--titular); font-size: 1.7rem; line-height: 0.95; font-weight: 900; text-transform: uppercase; }
.portalHero__signatura { margin: 0.25rem 0 0; font-family: var(--titular); font-size: 1rem; font-weight: 800; color: var(--sorra); }
.portalHero__metode { margin: 0.5rem 0 0; font-size: 0.86rem; line-height: 1.35; font-weight: 700; color: var(--llima); }
@media (min-width: 720px) { .portalHero { min-height: 190px; padding: 1.4rem 2rem; } .portalHero__marca { font-size: 2.4rem; } .portalHero__text { max-width: 720px; margin-inline: auto; } }
body.iniciNou .portal__porta { min-height: 0; }
@media (min-width: 720px) { body.iniciNou .portal { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
/* ===== 7-set: L'Academy, els programes a dalt ===== */
.programesHub { padding-top: 1.2rem; }
.programesHub__titol { margin-bottom: 0.9rem; }
.programesHub__llista { display: grid; gap: 0.8rem; }
@media (min-width: 720px) { .programesHub__llista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.programesHub__targeta {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.7rem; align-items: start; padding: 0.9rem 1rem; border-radius: 14px;
  background: var(--blanc); border: 1.5px solid var(--vora); border-left: 6px solid var(--teal); text-decoration: none; color: var(--negre);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.programesHub__targeta:hover, .programesHub__targeta:focus-visible { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.45); outline: none; }
.programesHub__num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--negre); color: var(--llima); font-family: var(--titular); font-weight: 900; font-size: 1.2rem; }
.programesHub__cos { display: grid; gap: 0.3rem; min-width: 0; }
.programesHub__nom { font-family: var(--titular); font-size: 1.25rem; line-height: 1.05; font-weight: 900; text-transform: uppercase; color: var(--teal); }
.programesHub__text { font-size: 0.95rem; line-height: 1.4; color: var(--negre); }
.programesHub__preu { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sorra-titol, #8a6d2f); }
.programesHub__mes { margin-top: 0.1rem; font-weight: 800; color: var(--teal); }
/* 7-set: a l Inici nou, la llenca PATROCINADORS es queda a baix (Oriol) i el boto de contacte va MOLT ben centrat, damunt la llenca */
body.iniciNou #principal { min-height: calc(100vh - var(--altCap, 60px) - var(--altBarra, 64px) - var(--altPropera, 0px) - 12px); } /* 12px: la llenca PATROCINADORS tapa la resta; --altPropera: la franja APUNTAT (inici.js la mesura) */
body.iniciNou .contacteFlotant { right: auto; left: 50%; transform: translateX(-50%); justify-items: center; bottom: calc(var(--altBarra, 64px) + 52px); }
@media (min-width: 901px) { body.iniciNou .contacteFlotant { bottom: 56px; } }
.contacteFlotant .flotaParla__text { font-size: 0.64rem; letter-spacing: 0.06em; }
/* 7-set: a l Inici nou, el peu (patrocinadors) puja com un full damunt la barra en tocar la llenca; i el contacte torna a la dreta, a l alçada de la llenca */
body.iniciNou.peuObert .peu { position: fixed; top: auto; left: 0; right: 0; width: auto; height: auto; max-height: 72vh; overflow: auto; z-index: 66; bottom: var(--altBarra, 64px); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.45); }
body.iniciNou.peuObert .peuLlenca { display: none !important; }
body.iniciNou .contacteFlotant { right: max(16px, env(safe-area-inset-right)); left: auto; transform: none; justify-items: end; }
/* el full del peu: opac, damunt la barra exacta, i el contacte s aparta mentre es obert */
body.iniciNou.peuObert .peu { opacity: 1 !important; transform: none !important; transition: none !important; padding-bottom: 1.6rem !important; background: var(--crema); bottom: calc(56px + env(safe-area-inset-bottom)); }
body.iniciNou.peuObert .contacteFlotant { z-index: 70; } /* amb els patrocinadors aixecats, el contacte es queda al mateix lloc, per sobre del full (Oriol) */
/* la tira de tancar del full de patrocinadors (nomes quan el full es obert) */
.peuFull__tanca { display: none; }
body.iniciNou.peuObert .peuFull__tanca { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin: -0.6rem 0 0.9rem; padding: 0.5rem 1rem; border: 0; border-bottom: 1px solid var(--vora); background: transparent; color: var(--negre-500); font-family: var(--cos); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; }
body.iniciNou.peuObert .peuFull__tanca b { font-size: 0.9rem; }

/* 7-set: menu de contacte amb icones (telefon, sobre) */
.contacteFlotant__menu a { display: flex; align-items: center; gap: 0.55rem; }
.contacteFlotant__menu a svg { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: 0 0 auto; }

/* ===== 7-set: CONTACTE a la capçalera, sempre visible (Oriol) ===== */
.contacteCap { position: relative; display: inline-flex; margin-right: 0.45rem; }
.contacteCap__boto { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: var(--llima); color: var(--negre); padding: 0; }
.contacteCap__boto svg { width: 22px; height: 22px; fill: var(--negre); }
.contacteCap__punts circle { fill: var(--llima); }
.contacteCap__boto:hover { background: var(--llima-700); }
.contacteCap__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 130; display: grid; gap: 0.3rem; padding: 0.5rem; border-radius: 12px; background: var(--blanc); border: 1.5px solid var(--vora); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); }
.contacteCap__menu[hidden] { display: none; }
.contacteCap__menu a { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; border-radius: 8px; text-decoration: none; font-weight: 800; color: var(--teal); background: var(--teal-100, #dcebef); white-space: nowrap; }
.contacteCap__menu a svg { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: 0 0 auto; }
/* els botons de prova, mes a l'esquerra: el contacte ocupa el seu lloc */
.debugAdmin { right: 116px; }
.debugVersio { right: 178px; }
/* el contacte a la capçalera, fora del flux (no pot trencar la fila): fixat entre ADMIN i el compte */
.contacteCap { position: fixed; top: 12px; right: 70px; z-index: 120; margin: 0; }
.contacteCap__menu { position: fixed; top: 56px; right: 16px; }

/* 7-set: el contacte torna a baix a la dreta (Oriol: «m'agrada mes a baix»); el de la capçalera es retira */
.contacteCap { display: none !important; }

/* 7-set: la navegacio de l'app (vol.js): la pagina que arriba creix des del seu boto; el boto encès */
.barraApp a.esDesti { color: var(--llima); }
.barraApp a.esDesti svg { animation: barraBatec 0.5s ease-in-out 1; }
/* 7-set: transicio de document nativa (Chrome/WebView, Safari 18+): la pagina vella es queda fins que la nova es a punt, sense blanc */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 120ms; }
::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* 7-set: arribar per un altre cami (tipus «porta» de la transicio nativa): la pagina vella s encongeix cap al seu boto, la nova creix des del boto de desti. Molt rapid, pero es veu. */
@keyframes volVell { to { transform: translate(var(--vol-vell-dx, 0px), var(--vol-vell-dy, 0px)) scale(0.04); opacity: 0.15; } }
@keyframes volNou { from { transform: translate(var(--vol-nou-dx, 0px), var(--vol-nou-dy, 0px)) scale(0.04); opacity: 0.15; } }
html:active-view-transition-type(porta)::view-transition-old(root) { animation: volVell 240ms cubic-bezier(0.4, 0, 0.2, 1) forwards; transform-origin: center; mix-blend-mode: normal; }
html:active-view-transition-type(porta)::view-transition-new(root) { animation: volNou 280ms cubic-bezier(0.2, 0.8, 0.3, 1) both; transform-origin: center; mix-blend-mode: normal; }
html:active-view-transition-type(porta)::view-transition-group(root) { animation-duration: 280ms; }
/* 7-set: sense sessio, la barra de baix no porta Ranquing ni Historial (nomes tenen sentit amb jugador); amb sessio, sempre */
body.senseSessio .barraApp li:has(> a[href*="jugador.html"]) { display: none; }
/* 7-set: sense sessio, els tres botons de la barra repartits al mig, no apilats a l esquerra (Oriol) */
body.senseSessio .barraApp ul { grid-template-columns: repeat(3, 1fr); }
/* ===== 7-set: el video d en Jordi a l essencia de l Inici, davant de tot ===== */
.portalHero { background-image: none; padding: 0; display: grid; }
.portalHero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #000; }
.portalHero::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.55) 100%); }
.portalHero__text { position: relative; padding: 1rem 1rem 0.9rem; align-self: start; }
.portalHero__so { position: absolute; right: 0.8rem; top: 0.8rem; z-index: 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.9); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.portalHero__so[aria-pressed="true"] { background: var(--llima); }
@media (min-width: 720px) { .portalHero { padding: 0; } .portalHero__text { padding: 1.4rem 2rem; } }
.portalHero::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.5) 100%); }

/* ===== 7-set: el popup de login amb el disseny de l'app ===== */
.authFitxa .fitxaEvent__targeta { width: min(440px, calc(100vw - 1.6rem)); padding: 1.1rem 1.1rem 1.2rem; }
.authFitxa .fitxaEvent__targeta > .cal__xip { align-self: flex-start; }
.auth__titol { margin: 0.55rem 0 0.15rem; font-size: 1.6rem; line-height: 1.05; }
.auth__sub { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.4; color: var(--negre-500); }
.auth__pestanyes.perA__fills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0 0 1rem; padding: 0; overflow: visible; }
.auth__pestanyes .perA__fill, .auth__pestanyes .perA__fill.esActiu { width: 100%; justify-content: center; padding: 0.55rem 0.8rem; font-size: 0.95rem; }
.auth__pestanyes .perA__fill::after, .auth__pestanyes .perA__fill.esActiu::after { content: none; }
.auth__pestanyes .perA__fill.esActiu { background: var(--teal); border-color: var(--teal); color: var(--blanc); }
.auth__form { gap: 0.85rem; }
.auth__camp { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); }
.auth__camp input { border: 1.5px solid var(--vora); border-radius: 12px; padding: 0.8rem 0.9rem; font-size: 1rem; font-weight: 600; color: var(--negre); background: var(--blanc); }
.auth__camp input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(44, 135, 160, 0.18); }
.auth__envia { justify-self: stretch; width: 100%; padding: 0.85rem 1rem; font-size: 1rem; letter-spacing: 0.06em; }
.auth__oblit { justify-self: center; font-size: 0.88rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.auth__oblit:hover { text-decoration: underline; }
.auth__o { position: relative; margin: 0.9rem 0 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem; }
.auth__o::before, .auth__o::after { content: ''; position: absolute; top: 50%; width: calc(50% - 1.4rem); height: 1px; background: var(--vora); }
.auth__o::before { left: 0; } .auth__o::after { right: 0; }
.auth__google { border: 1.5px solid var(--vora); padding: 0.75rem 1rem; font-size: 0.95rem; }
.auth__google:hover { border-color: var(--negre-500); box-shadow: none; transform: none; }
/* 7-set: el video de presentacio porta la marca de CapCut cravada a dalt a l esquerra; s enquadra mes avall i queda fora del marc */
.portalHero__video { object-position: center 45%; }

/* ===== 7-set: L'ACADEMY, tota la informacio en una pagina facil ===== */
.hubIndex { position: sticky; top: var(--altCap, 60px); z-index: 30; background: var(--blanc); border-bottom: 1px solid var(--vora); }
.hubIndex ul { list-style: none; margin: 0; padding: 0.5rem 0.7rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.hubIndex ul::-webkit-scrollbar { display: none; }
.hubIndex a { display: inline-block; white-space: nowrap; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1.5px solid var(--vora); background: var(--blanc); color: var(--negre); font-weight: 700; font-size: 0.86rem; text-decoration: none; }
.hubIndex a:hover, .hubIndex a.esActiu { background: var(--teal); border-color: var(--teal); color: var(--blanc); }
.hubBloc { scroll-margin-top: calc(var(--altCap, 60px) + 3.4rem); }
.hubBloc__titol { margin: 0; padding: 1.3rem 1rem 0; font-family: var(--titular); font-size: 1.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; color: var(--teal); }
.hubBloc > .seccio { padding-top: 0.6rem; }
.hubBloc > .seccio .portada { display: none; }
#programes, #qui-som, #filosofia, #metodologia, #valors, #instal-lacio { scroll-margin-top: calc(var(--altCap, 60px) + 3.4rem); }

/* 7-set: la navegacio de L'Academy, sencera en una pantalla i fixa a dalt (Oriol) */
.hubIndex a { padding: 0.28rem 0.62rem; font-size: 0.82rem; }
.hubIndex a.esActiu { background: var(--teal); border-color: var(--teal); color: var(--blanc); }
.hubBloc__titol, .hubBloc { display: initial; }
#qui-som, #filosofia, #metodologia, #valors, #instal-lacio { scroll-margin-top: calc(var(--altCap, 60px) + 6.2rem); }

/* ===== 7-set: L'ACADEMY refeta per a l'app (Oriol: «refer l'Academy mantenint tota la
   informacio; treu el boto inscripcio de moment i deixa el contacte»). Mateix text,
   mateixa estructura: nomes canvia la presentacio, amb el llenguatge de l'app
   (targetes, titols teal, numeros en cercle, files). ===== */
body.vQuatre .flotaInscriu { display: none !important; } /* de moment, fora el boto Inscripcio a l'app */

body.vQuatre.pagina-academy #principal > .seccio {
  padding: 1rem 1rem 0.4rem; margin: 0; background: var(--blanc); max-width: 720px; margin-inline: auto;
}
body.vQuatre.pagina-academy .cosMig, body.vQuatre.pagina-academy .dues, body.vQuatre.pagina-academy .panellSorra,
body.vQuatre.pagina-academy .ambImatge, body.vQuatre.pagina-academy .neixGrid, body.vQuatre.pagina-academy .panellBlanc {
  display: block; padding: 0; margin: 0; background: none; box-shadow: none; border: 0; max-width: none; min-height: 0;
}
body.vQuatre.pagina-academy .ambImatge--metodologia { background-image: none; }
body.vQuatre.pagina-academy .fons-gris, body.vQuatre.pagina-academy .fons-crema { background: var(--blanc); padding-block: 0; }
body.vQuatre.pagina-academy .seccioMeto, body.vQuatre.pagina-academy .seccioValors { padding: 1rem 1rem 0.4rem; }

/* titols de bloc: teal, majuscula, a l'esquerra */
body.vQuatre.pagina-academy .seccio__titol {
  margin: 0 0 0.7rem; padding: 0; text-align: left; font-family: var(--titular); font-size: 1.45rem; line-height: 1.05;
  font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; color: var(--teal);
}
body.vQuatre.pagina-academy .seccio__titol--sorra { color: var(--teal); }
body.vQuatre.pagina-academy .seccio__signatura { margin: -0.4rem 0 0.7rem; font-family: var(--titular); font-weight: 800; color: var(--sorra-titol, #8a6d2f); }

/* la cita d'en Jordi: targeta fosca, com les portes de l'Inici */
body.vQuatre.pagina-academy .cita {
  display: grid; gap: 0.5rem; max-width: none; margin: 0 0 1rem; padding: 1rem 1.1rem 1.1rem; text-align: left;
  border-radius: 14px; background: linear-gradient(180deg, #14181d 0%, #0b0e12 100%); border: 1px solid #262c34; color: #fff;
}
body.vQuatre.pagina-academy .cita footer { order: -1; margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--llima); }
body.vQuatre.pagina-academy .cita p { margin: 0; font-family: var(--cos); font-size: 1.05rem; line-height: 1.45; font-weight: 600; font-style: italic; color: var(--sorra); }

/* el text: mida de lectura, dins de targeta */
body.vQuatre.pagina-academy .prosa { max-width: none; margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--negre); }
body.vQuatre.pagina-academy .prosa p { margin: 0 0 0.7rem; }
body.vQuatre.pagina-academy .prosa p:last-child { margin-bottom: 0; }
body.vQuatre.pagina-academy .prosa__remat { padding: 0.7rem 0.9rem; border-left: 5px solid var(--llima); background: var(--crema); border-radius: 0 10px 10px 0; font-weight: 700; }
body.vQuatre.pagina-academy .fons-crema .dues, body.vQuatre.pagina-academy .seccioFilosofia .panellSorra,
body.vQuatre.pagina-academy .fons-gris .panellBlanc {
  padding: 1rem 1.1rem; border-radius: 14px; background: var(--blanc); border: 1.5px solid var(--vora); border-left: 6px solid var(--teal);
}

/* els cinc pilars: files numerades amb el cercle negre */
body.vQuatre.pagina-academy .pilars { max-width: none; margin: 0.6rem 0 0; display: grid; gap: 0.45rem; counter-reset: p; }
body.vQuatre.pagina-academy .pilars li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; align-items: start; margin: 0; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--crema); }
body.vQuatre.pagina-academy .pilars li::before { content: counter(p); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--negre); color: var(--llima); font-family: var(--titular); font-weight: 900; font-size: 1rem; }
body.vQuatre.pagina-academy .pilars__nom { display: block; font-family: var(--titular); font-size: 1.05rem; font-weight: 900; text-transform: uppercase; color: var(--teal); }
body.vQuatre.pagina-academy .pilars__nom::after { content: none; }
body.vQuatre.pagina-academy .pilars__text { display: block; font-size: 0.92rem; line-height: 1.4; }

/* els sis valors: graella de dues columnes */
body.vQuatre.pagina-academy .valors { max-width: none; margin: 0.7rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; text-align: left; }
body.vQuatre.pagina-academy .valors > div { display: grid; gap: 0.15rem; padding: 0.6rem 0.7rem; border-radius: 10px; background: var(--blanc); border: 1.5px solid var(--vora); }
body.vQuatre.pagina-academy .valors dt { display: block; font-family: var(--titular); font-size: 1rem; font-weight: 900; text-transform: uppercase; color: var(--teal); }
body.vQuatre.pagina-academy .valors dt::after { content: none; }
body.vQuatre.pagina-academy .valors dd { display: block; margin: 0; font-size: 0.88rem; line-height: 1.35; font-style: normal; font-weight: 500; }
body.vQuatre.pagina-academy .panellSorra--valors .prosa { text-align: left; }

/* per que neix: el cartell, petit, sota el text */
body.vQuatre.pagina-academy .cartellTalent { display: block; width: 100%; max-width: 420px; margin: 0.9rem auto 0; border-radius: 12px; }

/* instal·lacio: adreça i galeria 2x2 */
body.vQuatre.pagina-academy .instalacio { margin: 0 0 0.7rem; font-family: var(--cos); font-size: 1.05rem; font-weight: 700; color: var(--negre); }
body.vQuatre.pagina-academy .galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; }
body.vQuatre.pagina-academy .galeria img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin: 0; }
body.vQuatre.pagina-academy #principal > .seccio:last-of-type { padding-bottom: 1.4rem; }
/* metodologia: sense la columna d imatge de la web (sagnat) i els pilars ben posats: numero a l esquerra, nom i text a la dreta */
body.vQuatre.pagina-academy .ambImatge--metodologia > div, body.vQuatre.pagina-academy .ambImatge--metodologia > * { padding: 0; margin: 0; max-width: none; width: auto; }
body.vQuatre.pagina-academy .ambImatge--metodologia::before, body.vQuatre.pagina-academy .ambImatge--metodologia::after, body.vQuatre.pagina-academy .ambImatge--metodologia > img, body.vQuatre.pagina-academy .ambImatge--metodologia > picture { display: none; }
body.vQuatre.pagina-academy .pilars li::before { grid-row: 1 / 3; }
body.vQuatre.pagina-academy .pilars__nom, body.vQuatre.pagina-academy .pilars__text { grid-column: 2; }
body.vQuatre.pagina-academy .pilars__text { color: var(--negre); }

/* ===== 7-set: L'ACADEMY, una pantalla amb sis portes i fulls que entren de dreta a esquerra ===== */
body.vQuatre.pagina-academy #principal { display: grid; grid-template-rows: auto 1fr; min-height: calc(100vh - var(--altCap, 60px) - var(--altBarra, 64px) - 12px); }
.portal--academy { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); align-self: stretch; padding: 0.8rem 1rem 1rem; gap: 0.6rem; }
.portal--academy .portal__porta { min-height: 0; padding: 0.7rem 0.8rem 0.65rem; }
.portal--academy .portal__icona svg { width: 1.6rem; height: 1.6rem; fill: var(--llima); }
.portal--academy .portal__nom { font-size: 1.15rem; }
.portal--academy .portal__linia { font-size: 0.78rem; }
@media (min-width: 720px) { .portal--academy { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } }
body.vQuatre.pagina-academy .peu { position: fixed; top: 300vh; left: 0; width: 1px; height: 1px; overflow: hidden; }
body.vQuatre.pagina-academy.peuObert .peu { position: fixed; top: auto; left: 0; right: 0; width: auto; height: auto; max-height: 72vh; overflow: auto; z-index: 66; bottom: calc(56px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; opacity: 1 !important; transform: none !important; transition: none !important; }

/* el full: entra de la dreta, ocupa la pantalla entre la capçalera i la barra, scroll a dins */
.full {
  position: fixed; left: 0; right: 0; top: var(--altCap, 60px); bottom: var(--altBarra, 56px); z-index: 75;
  display: grid; grid-template-rows: auto 1fr; background: var(--blanc);
  transform: translateX(100%); transition: transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1);
  box-shadow: -12px 0 30px -18px rgba(0, 0, 0, 0.5);
}
.full.esObert { transform: none; }
.full__cap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--vora); background: var(--blanc); }
.full__tornar { border: 0; background: transparent; padding: 0.3rem 0.2rem; font-family: var(--cos); font-weight: 800; font-size: 0.95rem; color: var(--teal); cursor: pointer; white-space: nowrap; }
.full__titol { margin: 0; font-family: var(--titular); font-size: 1.3rem; line-height: 1; font-weight: 900; text-transform: uppercase; color: var(--negre); text-align: right; }
.full__dins { overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 1.5rem; }
.full__dins > .seccio, .full__dins > .programesHub__llista { padding: 1rem 1rem 0.4rem; margin: 0; background: var(--blanc); max-width: 720px; margin-inline: auto; }
.full__dins > .programesHub__llista { display: grid; gap: 0.8rem; padding-top: 1rem; }
.full__dins .portada { display: none; }
body.teFull .contacteFlotant { display: none; } /* dins d'un full, el contacte es a «On som» */
@media (prefers-reduced-motion: reduce) { .full { transition: none; } }
/* les pagines de sempre: la tira «‹ L'Academy» per tornar */
.hubIndex--tornar { padding: 0.45rem 1rem; }
.hubIndex--tornar a { display: inline-block; border: 0; padding: 0.2rem 0; font-weight: 800; color: var(--teal); background: transparent; font-size: 0.95rem; }

/* ===== 7-set: el popup de login amb la portada de l'app (el jugador sobre negre, titol en verd) ===== */
.entradaFitxa .fitxaEvent__targeta { padding: 0; overflow: hidden; border-radius: 16px; }
.entradaFitxa .fitxaEvent__tanca { color: #fff; z-index: 2; }
.auth__portada {
  position: relative; padding: 1rem 1.1rem 1rem; min-height: 150px; display: grid; align-content: end; gap: 0.15rem;
  color: #fff; background: var(--negre) right center / cover no-repeat; background-image: url("/img/hero-jugador.png");
}
.auth__portada::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.35) 100%); }
.auth__portada > * { position: relative; }
.auth__marca { margin: 0 0 0.4rem; font-family: var(--titular); font-size: 1rem; letter-spacing: 0.22em; color: #fff; }
.auth__marca small { display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sorra); margin-top: 0.1rem; }
.authFitxa .auth__titol { margin: 0; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.authFitxa .auth__titol .portada__reptes { color: var(--llima); }
.authFitxa .auth__sub { margin: 0.35rem 0 0; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; max-width: 26ch; }
.auth__cos { padding: 1rem 1.1rem 1.2rem; }
.auth__pestanyes.perA__fills { margin-top: 0; }
/* 7-set: a l Historial i al Ranquing, la fila de jugadors no es talla (Oriol: «la Laura queda tallada»): al mobil baixa sota el nom, a tota l amplada, i si cal es parteix en dues linies */
@media (max-width: 600px) {
  .meu__hola { flex-wrap: wrap; row-gap: 0.4rem; }
  .meu__hola .calEdats__jugadors { flex: 1 0 100%; width: 100%; margin-top: 0.2rem; }
  .meu__hola .perA__fills--peca { display: flex; flex-wrap: wrap; overflow: visible; max-width: 100%; width: 100%; }
  .meu__hola .perA__fills.esScroll { -webkit-mask-image: none; mask-image: none; }
}

/* ===== 7-set: la llenca PATROCINADORS sempre a l'app, plegada o desplegada (Oriol) ===== */
body.vQuatre .peu { position: fixed; top: 300vh; left: 0; width: 1px; height: 1px; overflow: hidden; } /* fora de pantalla per sota: la llenca sempre surt */
body.vQuatre.peuObert .peu {
  position: fixed; top: auto; left: 0; right: 0; width: auto; height: auto; max-height: 72vh; overflow: auto; z-index: 66;
  bottom: calc(56px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.45);
  opacity: 1 !important; transform: none !important; transition: none !important; background: var(--crema); padding-bottom: 1.6rem !important;
}
body.vQuatre.peuObert .peuLlenca { display: none !important; }
body.vQuatre.peuObert .peuFull__tanca { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin: -0.6rem 0 0.9rem; padding: 0.5rem 1rem; border: 0; border-bottom: 1px solid var(--vora); background: transparent; color: var(--negre-500); font-family: var(--cos); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; }
body.vQuatre.peuObert .peuFull__tanca b { font-size: 0.9rem; }
body.vQuatre.peuObert .contacteFlotant { z-index: 70; }
body.vQuatre #principal { padding-bottom: 1.4rem; } /* que el final del contingut no quedi sota la llenca */
body.vQuatre.iniciNou #principal, body.vQuatre.pagina-academy #principal { padding-bottom: 0; }
/* 7-set: al mobil, la pilota del jugador a la DRETA del nom; la fila de jugadors, sota, a tota l amplada (Oriol: «guanyes espai posant la bola aqui») */
@media (max-width: 600px) {
  .meu__hola { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom pilota" "grup pilota" "pills pills"; column-gap: 0.8rem; row-gap: 0.15rem; align-items: center; }
  .meu__hola .meu__qui { display: contents; }
  .meu__hola > .pilota--fitxa, .meu__hola > .pilota { grid-area: pilota; width: 64px; height: 64px; }
  .meu__hola .meu__nom { grid-area: nom; margin: 0; }
  .meu__hola .meu__grup { grid-area: grup; margin: 0; }
  .meu__hola .calEdats__jugadors { grid-area: pills; margin-top: 0.45rem; }
}

/* ===== 7-set: l'Inici amb sessio es la teva casa: el bloc personal en lloc del video ===== */
body.iniciNou .portalHero[hidden] { display: none !important; }
body.iniciNou #principal > .portalMeu { display: grid; }
.portalMeu {
  align-content: start; gap: 0.5rem; margin: 0 1rem 0.6rem; padding: 0.8rem 0.9rem 0.9rem; border-radius: 14px;
  background: linear-gradient(180deg, #14181d 0%, #0b0e12 100%); border: 1px solid #262c34; color: #fff;
}
.portalMeu__cap { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.portalMeu__titol { font-family: var(--titular); font-size: 1rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sorra); }
.portalMeu__compte { border: 0; background: transparent; padding: 0; font-family: var(--cos); font-weight: 800; font-size: 0.86rem; color: var(--llima); cursor: pointer; }
.portalMeu__fila { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.06); text-decoration: none; color: #fff; }
.portalMeu__fila .grup__punt { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; }
.portalMeu__fila .grup__punt--cap { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.portalMeu__fila b { font-family: var(--titular); font-size: 1.05rem; font-weight: 900; text-transform: uppercase; }
.portalMeu__fila span { font-size: 0.86rem; color: var(--sorra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portalMeu__fila em { font-style: normal; }
.portalMeu__buit { margin: 0; font-size: 0.9rem; color: #d5dae0; }
body.iniciCasa .portal { padding-bottom: 0.4rem; }

/* ===== 7-set: la casa amb sessio = el compte en blanc dins de l'Inici (Oriol) ===== */
body.iniciNou #principal > .compteInici { display: block; }
body.iniciNou.iniciCasa #principal { min-height: 0; grid-template-rows: auto auto; }
body.iniciNou.iniciCasa .portal { grid-template-rows: auto auto; align-self: start; }
body.iniciNou.iniciCasa .portal__porta { min-height: 6.4rem; }
.compteInici { padding: 0 1rem 1.2rem; }
.compteInici__targeta { position: static; width: auto; max-width: none; margin: 0; padding: 1.1rem 1.1rem 1.2rem; border-radius: 14px; background: var(--blanc); border: 1.5px solid var(--vora); box-shadow: none; display: flex; flex-direction: column; }
.compteInici__targeta > .cal__xip { align-self: flex-start; }
.compteInici .auth__surt { align-self: flex-start; }
/* amb sessio, les portes sobren: ja son a la barra de baix (Oriol). La casa es nomes el compte. */
body.iniciNou.iniciCasa .portal { display: none !important; }
body.iniciNou.iniciCasa #principal { grid-template-rows: auto; }
.compteInici { padding-top: 0.9rem; }

/* ===== 7-set: LA CASA del pare, vista d'ocell en blanc ===== */
body.iniciNou #principal > .casa { display: grid; }
.casa { gap: 0.55rem; align-content: start; padding: 1rem 1rem 1.2rem; background: var(--blanc); }
.casa__hola { margin: 0 0 0.2rem; font-family: var(--titular); font-size: 1.9rem; line-height: 1; font-weight: 900; text-transform: uppercase; color: var(--teal); }
.casa__avisos { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 0.6rem 0.8rem; border: 1.5px solid var(--vora); border-left: 5px solid var(--teal); border-radius: 0 10px 10px 0; background: var(--teal-100, #dcebef); font-family: var(--cos); font-size: 0.92rem; font-weight: 600; color: var(--negre); cursor: pointer; }
.casa__avisos.teNous { background: var(--llima-100, #f3f9d2); border-left-color: var(--llima-700, #6a8a12); }
.casa__avisos span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casa__avisos b { color: var(--teal); font-size: 1.1rem; }
.casa__avisos .portal__nou { flex: 0 0 auto; font-size: 0.66rem; }
.casa__titol { margin: 0.6rem 0 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.casa__fill { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.6rem 0.75rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--blanc); font-family: var(--cos); color: var(--negre); cursor: pointer; }
.casa__fill:hover { border-color: var(--teal); }
.casa__pilota .pilota--mini { width: 2.1rem; height: 2.1rem; }
.casa__qui { display: grid; line-height: 1.15; min-width: 0; }
.casa__qui b { font-size: 1.05rem; font-weight: 800; }
.casa__qui small { font-size: 0.78rem; color: var(--negre-500); }
.casa__qui em { font-style: normal; font-weight: 800; color: var(--alarma); }
.casa__propera { display: grid; text-align: right; line-height: 1.15; }
.casa__propera b { font-size: 0.9rem; font-weight: 800; color: var(--rosa-700); white-space: nowrap; }
.casa__propera small { font-size: 0.72rem; color: var(--negre-500); }
.casa__fletxa { font-style: normal; font-weight: 800; color: var(--negre-500); }
.casa__fill .portal__nou { font-size: 0.64rem; }
.casa__compte { justify-self: start; margin-top: 0.3rem; border: 0; background: transparent; padding: 0.2rem 0; font-family: var(--cos); font-weight: 800; color: var(--teal); cursor: pointer; }
.casa__buit { margin: 0; color: var(--negre-500); }
body.iniciNou.iniciCasa .compteInici { display: none !important; }

/* 7-set: LA regla d'ocultacio de l'Inici nou (les versions anteriors s'han unificat aqui): a l'Inici nou
   nomes es veuen les portes, l'essencia (sense sessio) i la casa (amb sessio) */
body.iniciNou #principal > *:not(.portal):not(.portalHero):not(.casa), body.iniciNou .tornaAmunt { display: none !important; }
body.iniciNou #principal > .casa { display: grid; }

/* 7-set: la casa amb les peces del compte */
.casa .compte__avisos { margin: 0; }
.casa .compte__fills .fills { margin: 0; }
.casa__avisos b { font-size: 0.95rem; }
.casa__avisosLlista[hidden] { display: none; }

/* ===== 7-set: el compte de l'usuari, curt: correu, telefon, (dades bancaries) i sortir ===== */
.compte__dades { display: grid; margin: 0.7rem 0 1rem; border: 1.5px solid var(--vora); border-radius: 12px; overflow: hidden; background: var(--blanc); }
.compte__dada { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 0.6rem; padding: 0.65rem 0.9rem; border-top: 1px solid var(--vora); }
.compte__dada:first-child { border-top: 0; }
.compte__dada small { grid-column: 1; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal); }
.compte__dada > span { grid-column: 1; font-weight: 700; color: var(--negre); overflow-wrap: anywhere; line-height: 1.25; }
.compte__dada > span a { color: var(--negre); text-decoration: none; }
.compte__dada > button { grid-column: 2; grid-row: 1 / span 2; min-width: 2.3rem; height: 2.3rem; padding: 0 0.7rem; border-radius: 999px; border: 1.5px solid var(--vora); background: var(--blanc); font-family: var(--cos); font-size: 0.9rem; font-weight: 800; color: var(--teal); white-space: nowrap; cursor: pointer; }
.compte__dada > button:hover { border-color: var(--teal); }
.compte__dada--aviat > span { color: var(--negre-500); font-weight: 600; }
.compte__dades form { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0; padding: 0.5rem 0.9rem 0.8rem; border-top: 1px solid var(--vora); background: var(--teal-100, #eef5f7); }
.compte__dades form[hidden] { display: none; }
.compte__dades form .auth__camp { flex: 1 1 auto; }
.compte__dades .auth__mailMissatge { margin: 0; padding: 0.5rem 0.9rem 0.7rem; font-size: 0.86rem; line-height: 1.35; color: var(--negre-500); border-top: 1px solid var(--vora); }
.compte__dades .auth__mailMissatge[hidden] { display: none; }
.compteFitxa .auth__surt { align-self: flex-start; }
.auth__cap.esDesti svg { animation: barraBatec 0.5s ease-in-out 1; }
/* 7-set: la barra sense sessio tambe als navegadors sense :has() */
body.senseSessio .barraApp li.nomesSessio { display: none; }

/* ===== 7-set: LA PISTA, l'Inici de l'admin ===== */
.casa--admin .pista__pendents b { font-size: 1.1rem; }
.pista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pista__buit { margin: 0; padding: 0.4rem 0; color: var(--negre-500); }
.pista__sessio { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.7rem; width: 100%; text-align: left; padding: 0.55rem 0.8rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--blanc); font-family: var(--cos); color: var(--negre); cursor: pointer; }
.pista__sessio:hover { border-color: var(--teal); }
.pista__quan { display: grid; line-height: 1.1; min-width: 5.4rem; }
.pista__quan b { font-weight: 800; font-size: 0.98rem; white-space: nowrap; }
.pista__quan small { font-weight: 700; color: var(--teal); font-size: 0.86rem; }
.pista__que { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; min-width: 0; }
.pista__que > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista__quants { display: grid; text-align: center; line-height: 1; }
.pista__quants b { font-family: var(--titular); font-size: 1.4rem; font-weight: 900; color: var(--teal); }
.pista__quants small { font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--negre-500); }
.pista__sessio i { font-style: normal; font-weight: 800; color: var(--negre-500); }
.pistaFitxa .fitxaEvent__targeta { max-height: 88vh; overflow: auto; }
.pistaNous, .pistaQui { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pistaNou { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem; border: 1.5px solid var(--vora); border-radius: 12px; }
.pistaNou.esGuardant { opacity: 0.5; }
.pistaNou.esFet { border-color: var(--llima-700, #6a8a12); background: var(--llima-100, #f3f9d2); }
.pistaNou__qui, .pistaQui__qui { display: grid; line-height: 1.2; min-width: 0; }
.pistaNou__qui b, .pistaQui__qui b { font-size: 1.02rem; font-weight: 800; }
.pistaNou__qui small, .pistaQui__qui small { color: var(--negre-500); font-size: 0.82rem; overflow-wrap: anywhere; }
.pista__tel { color: var(--teal); font-weight: 800; text-decoration: none; }
.pista__senseTel { color: var(--alarma); font-weight: 700; }
.pistaNou__grups { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pistaNou__grup { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem 0.35rem 0.45rem; border: 1.5px solid var(--vora); border-radius: 999px; background: var(--blanc); font-family: var(--cos); font-weight: 800; font-size: 0.86rem; color: var(--negre); cursor: pointer; }
.pistaNou__grup:hover { border-color: var(--grupColor, var(--teal)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--grupColor, var(--teal)) 25%, transparent); }
.pistaNou__fet { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 800; color: var(--llima-700, #6a8a12); }
.pistaQui__fila { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1.5px solid var(--vora); border-radius: 12px; }
.pistaFitxa .compte__enllac { display: inline-block; margin-top: 0.8rem; }
/* 7-set: el boto SEMBRA (proves) sota VERSIO, que a la capcalera no hi cap res mes */
.debugSembra { right: 178px; top: 38px; }

/* 7-set: la pista amb la temporada plena: grups i dies */
.pista__grups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.pista__grup { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.55rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--blanc); font-family: var(--cos); font-weight: 800; font-size: 0.86rem; color: var(--negre); cursor: pointer; }
.pista__grup:hover { border-color: var(--teal); }
.pista__grup > span { flex: 1 1 auto; text-align: left; }
.pista__grup b { font-family: var(--titular); font-size: 1.15rem; font-weight: 900; color: var(--teal); }
.pista__titolGrup { display: flex; align-items: center; gap: 0.5rem; }
.pista__dia { display: flex; align-items: baseline; justify-content: space-between; margin: 0.4rem 0 0; padding: 0 0.2rem; }
.pista__dia:first-child { margin-top: 0; }
.pista__dia b { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--negre); }
.pista__dia small { font-size: 0.74rem; font-weight: 700; color: var(--negre-500); }
.pista__quan { min-width: 5.6rem; }
.pista__quan small { font-size: 0.92rem; }
.pista__mes { justify-self: start; border: 0; background: transparent; padding: 0.3rem 0.2rem; font-family: var(--cos); font-weight: 800; color: var(--teal); cursor: pointer; }
.pista__mes[hidden] { display: none; }
body.iniciNou.iniciCasa #principal > .casa--admin { overflow: auto; }

/* 7-set: la pista a 375 px: res no sobresurt; la pagina es desplaça (la pista es llarga) */
.casa > * { min-width: 0; }
.pista__grups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; }
.pista__grup { min-width: 0; padding: 0.4rem 0.45rem; gap: 0.3rem; font-size: 0.8rem; }
.pista__grup > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista__grup b { font-size: 1.05rem; }
.pista__sessio { min-width: 0; gap: 0.5rem; padding: 0.5rem 0.65rem; }
.pista__quan { min-width: 0; }
.pista__quan small { font-size: 0.88rem; white-space: nowrap; }
.pista__quants small { font-size: 0.6rem; }
body.iniciNou.iniciCasa #principal > .casa--admin { overflow: visible; }

/* 7-set: els dies de la pista es pleguen */
.pista__dia { display: block; margin: 0.35rem 0 0; padding: 0; }
.pista__diaBoto { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left; padding: 0.55rem 0.7rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--teal-100, #eef5f7); font-family: var(--cos); color: var(--negre); cursor: pointer; }
.pista__dia.esObert .pista__diaBoto { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.pista__diaBoto b { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.pista__diaBoto small { font-size: 0.76rem; font-weight: 700; color: var(--negre-500); }
.pista__diaBoto i { font-style: normal; font-weight: 800; color: var(--teal); }
.pista__sessions { list-style: none; margin: 0; padding: 0.45rem 0.45rem 0.5rem; display: grid; gap: 0.4rem; border: 1.5px solid var(--vora); border-top: 0; border-radius: 0 0 12px 12px; }
.pista__sessions[hidden] { display: none; }
/* 7-set: les pilotes de la pista no s aixafen (flex no les encongeix) */
.pista .pilota, .pista__grup .pilota, .pista__que .pilota, .pistaQui__pilota .pilota, .pistaNou__grup .pilota, .pista__titolGrup .pilota { flex: 0 0 auto; }
.pista__grup .pilota, .pista__que .pilota, .pistaQui__pilota .pilota { width: 1.35rem; height: 1.35rem; }

/* ===== 7-set: la pista per dia: pastilles de dies i pilotes del dia ===== */
.pista__dies { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.1rem 0.1rem 0.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pista__dies::-webkit-scrollbar { display: none; }
.pista__diaXip { flex: 0 0 auto; display: grid; justify-items: center; gap: 0.1rem; min-width: 4.6rem; padding: 0.4rem 0.6rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--blanc); font-family: var(--cos); color: var(--negre); cursor: pointer; }
.pista__diaXip b { font-size: 0.86rem; font-weight: 800; white-space: nowrap; }
.pista__diaXip small { font-size: 0.7rem; font-weight: 700; color: var(--negre-500); }
.pista__diaXip.esTriat { background: var(--teal); border-color: var(--teal); color: #fff; }
.pista__diaXip.esTriat small { color: rgba(255, 255, 255, 0.85); }
.pista__pilotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.pista__pilota { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.35rem; min-width: 0; padding: 0.45rem 0.5rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--blanc); font-family: var(--cos); color: var(--negre); text-align: left; cursor: pointer; }
.pista__pilota:hover { border-color: var(--teal); }
.pista__pilota--ampla { grid-column: 1 / -1; }
.pista__pilota .pilota { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; }
.pista__pilotaNom { display: grid; line-height: 1.1; min-width: 0; font-weight: 800; font-size: 0.82rem; }
.pista__pilotaNom small { font-size: 0.64rem; font-weight: 700; color: var(--negre-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pista__pilota--ampla .pista__pilotaNom { font-size: 0.92rem; }
.pista__pilota--ampla .pista__pilotaNom small { font-size: 0.74rem; }
.pista__pilota b { font-family: var(--titular); font-size: 1.25rem; font-weight: 900; color: var(--teal); }
.pista__pilota.esBuida { opacity: 0.55; }
.pistaQui__hora { margin: 0.3rem 0 0; padding: 0 0.2rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); }
@media (max-width: 400px) { .pista__pilotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 7-set: dies buits a la pista */
.pista__diaXip.esBuit { opacity: 0.6; }
/* 7-set: a Jugadors nous, la pastilla triada queda marcada i es pot canviar */
.pistaNou__grup.esTriat { border-color: var(--grupColor, var(--teal)); box-shadow: inset 0 0 0 2px var(--grupColor, var(--teal)); }
.pistaNou__grup.esTriat::after { content: ' ✓'; font-weight: 900; }
.pistaNou.esFet .pistaNou__grup:not(.esTriat) { opacity: 0.55; }

/* 7-set: la vista compacta «Grup X ✓ · Modifica» es un boto que es nota */
.pistaNou__fet { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem 0.4rem 0.5rem; border: 1.5px solid var(--grupColor, var(--teal)); border-radius: 999px; background: var(--blanc); font-family: var(--cos); font-weight: 800; font-size: 0.9rem; color: var(--negre); cursor: pointer; box-shadow: 0 0 0 3px color-mix(in srgb, var(--grupColor, var(--teal)) 22%, transparent); }
.pistaNou__fet small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); padding-left: 0.4rem; border-left: 1.5px solid var(--vora); }
.pistaNou__fet .pilota { flex: 0 0 auto; }
.pistaNou.esFet .pistaNou__grup:not(.esTriat) { opacity: 1; }

/* 7-set: la fitxa «Jugadors amb grup», per color */
.pistaNous__color { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; }
.pistaNous__color .pilota { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; }
.pistaNous__color small { color: var(--negre-500); font-weight: 700; }
.pista__ambGrup { background: var(--blanc); }
/* 7-set: a Jugadors amb grup, nomes els canviats en verd */
.pistaFitxa--grup .pistaNou.esFet:not(.esCanviat) { background: var(--blanc); border-color: var(--vora); }

/* 7-set: «Jugadors amb grup»: colors, jugadors del color i canvi amb confirmacio */
.pistaAmbGrup .pista__grups { margin-top: 0.6rem; }
.pistaAmbGrup__torna { border: 0; background: transparent; padding: 0 0.3rem 0 0; font-family: var(--cos); font-weight: 800; color: var(--teal); cursor: pointer; }
.pistaFitxa--grup .fitxaEvent__lloc { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.pistaFitxa--grup .fitxaEvent__lloc .pilota { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; }
.pistaNou__valida { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%; margin-top: 0.3rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--teal-100, #eef5f7); font-size: 0.9rem; }
.pistaNou__valida[hidden] { display: none; }
.pistaNou__valida span { flex: 1 1 auto; }
.pistaNou__cancela { border: 0; background: transparent; font-family: var(--cos); font-weight: 800; color: var(--negre-500); cursor: pointer; }
.pistaNou__grup.esProposat { border-color: var(--grupColor, var(--teal)); box-shadow: inset 0 0 0 2px var(--grupColor, var(--teal)); }

/* 7-set: les activitats a la pista de l'admin */
.pista__activitats { margin-top: 0.6rem; padding: 0; border: 0; }
.pista__activitats .casa__titol { margin: 0 0 0.2rem; }
.pista__activitats .compte__ajuda { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--negre-500); }
.pista__activitats .admin__activitats { margin: 0 0 0.5rem; }

/* 7-set: la foto de l'activitat es puja des del telefon */
.admin__foto { display: grid; gap: 0.4rem; }
.admin__fotoCaixa { position: relative; min-height: 5.5rem; border: 1.5px dashed var(--vora); border-radius: 12px; overflow: hidden; background: var(--sorra-100, #f6f1e7); display: grid; place-items: center; }
.admin__fotoPrevia { width: 100%; max-height: 14rem; object-fit: cover; display: block; }
.admin__fotoPrevia[hidden], .admin__fotoBuida[hidden], .admin__fotoTreu[hidden] { display: none; }
.admin__fotoBuida { color: var(--negre-500); font-weight: 700; font-size: 0.86rem; }
.admin__fotoAccions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.admin__fotoPuja { cursor: pointer; }
.admin__fotoTreu { border: 0; background: transparent; font-family: var(--cos); font-weight: 800; color: var(--alarma); cursor: pointer; }
.admin__fotoEstat { color: var(--negre-500); font-size: 0.78rem; }

/* 7-set: enquadrar la foto arrossegant-la; la previa te la mateixa alçada que la fitxa (170 px) */
.admin__fotoPrevia { height: 170px; max-height: none; object-fit: cover; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.admin__fotoPrevia:active { cursor: grabbing; }
.admin__fotoPista { color: var(--negre-500); font-size: 0.76rem; }
.admin__fotoPista[hidden] { display: none; }
/* 7-set: eliminar des del formulari */
.admin__eliminaForm { margin-left: auto; }

/* 7-set: les activitats de l'admin per mesos */
.admin__mes { list-style: none; }
.admin__mesBoto { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left; padding: 0.5rem 0.7rem; border: 1.5px solid var(--vora); border-radius: 12px; background: var(--teal-100, #eef5f7); font-family: var(--cos); color: var(--negre); cursor: pointer; }
.admin__mes.esObert .admin__mesBoto { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.admin__mesBoto b { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.admin__mesBoto small { font-size: 0.76rem; font-weight: 700; color: var(--negre-500); }
.admin__mesBoto i { font-style: normal; font-weight: 800; color: var(--teal); }
.admin__mesLlista { list-style: none; margin: 0; padding: 0.45rem 0.45rem 0.5rem; display: grid; gap: 0.35rem; border: 1.5px solid var(--vora); border-top: 0; border-radius: 0 0 12px 12px; }
.admin__mesLlista[hidden] { display: none; }

/* 7-set: l'estat de l'activitat al formulari */
.admin__estat select { border: 1.5px solid var(--vora); border-radius: 12px; padding: 0.75rem 0.9rem; font-size: 1rem; font-weight: 600; font-family: var(--cos); color: var(--negre); background: var(--blanc); }
.admin__estatAra { font-size: 0.76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--negre-500); }

/* ===== 7-set: l'horari editable des de la pista ===== */
.pista__diaXip.esTancat { opacity: 0.6; text-decoration: line-through; }
.pista__accions { grid-column: 1 / -1; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.2rem; }
.pista__tancaDia, .pista__restaura { border: 0; background: transparent; padding: 0.3rem 0.2rem; font-family: var(--cos); font-weight: 800; font-size: 0.86rem; color: var(--alarma); cursor: pointer; }
.pista__tancaDia.esTancat, .pista__restaura { color: var(--teal); }
.pista__form { display: grid; gap: 0.6rem; }
.pista__tipus { display: flex; gap: 0.4rem; }
.pista__tipusOpcio input { position: absolute; opacity: 0; width: 0; height: 0; }
.pista__tipusOpcio span { display: inline-block; padding: 0.45rem 0.9rem; border: 1.5px solid var(--vora); border-radius: 999px; font-weight: 800; cursor: pointer; }
.pista__tipusOpcio input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.pista__formGrups { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pista__formGrups[hidden] { display: none; }
.pista__hores { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pista__sessionsDia { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.pista__sessionsDia li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 10px; background: var(--teal-100, #eef5f7); font-size: 0.9rem; }
.pista__sessionsDia li b { color: var(--teal); }
.pista__treuSessio { border: 0; background: transparent; font-family: var(--cos); font-weight: 800; color: var(--alarma); cursor: pointer; }
/* 7-set: al formulari d entrenament nou, la taronja es Individual */
.pista__formAjuda { margin: 0; font-size: 0.82rem; color: var(--negre-500); }
/* 7-set: el formulari d entrenament nou cap a la pantalla (sense barra horitzontal) */
.pistaFitxa .fitxaEvent__targeta { overflow-x: hidden; }
.pista__form { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.pista__form .auth__camp { min-width: 0; }
.pista__form input { width: 100%; min-width: 0; box-sizing: border-box; }
.pista__hores { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pista__form .admin__accions { flex-wrap: wrap; }
/* 7-set: les accions del dia, a dalt i com a botons */
.pista__accions { margin: 0 0 0.25rem; }
.pista__accions .admin__accio b { font-weight: 900; }
.pista__tancaDia.admin__accio { color: var(--alarma); border-color: var(--alarma); background: var(--blanc); }
.pista__tancaDia.admin__accio.esTancat { color: var(--teal); border-color: var(--teal); }
/* 7-set: el boto d anul·lar es veu com a boto (vora vermella) */
.pista__tancaDia.admin__accio { border-width: 1.5px; border-style: solid; padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.86rem; }
/* 7-set: crear, a dalt de la pista */
.pista__crea { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 0.3rem; }
/* 7-set: els botons de crear, prims (Oriol: «el vull prim») */
.pista__crea .admin__accio { border: 1px solid var(--vora); font-weight: 700; padding: 0.4rem 0.85rem; }

/* 7-set: «Edita» a la sessio (en lloc de «Treu»); eliminar es dins del formulari */
.pista__treuSessio { color: var(--teal); }
.pista__formElimina { margin-left: auto; }

/* ===== 7-set: el dialeg de la web (avisos propis, no els del navegador) ===== */
.dialeg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(13, 16, 20, 0.6); }
.dialeg__caixa { width: min(420px, 100%); padding: 1.1rem 1.1rem 1rem; border-radius: 16px; background: var(--blanc); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5); display: grid; gap: 0.7rem; }
.dialeg__titol { margin: 0; font-family: var(--titular); font-size: 1.35rem; line-height: 1.1; font-weight: 900; text-transform: uppercase; color: var(--teal); }
.dialeg__text { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--negre); }
.dialeg__motiu textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--vora); border-radius: 12px; padding: 0.7rem 0.9rem; font-family: var(--cos); font-size: 1rem; font-weight: 600; color: var(--negre); resize: vertical; }
.dialeg__motiu textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(44, 135, 160, 0.18); }
.dialeg__accions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.dialeg__ok { flex: 1 1 auto; }
.dialeg__ok--perill { background: var(--alarma); border-color: var(--alarma); }
.dialeg__ok:disabled { opacity: 0.45; cursor: not-allowed; }
.dialeg__cancela { border: 0; background: transparent; font-family: var(--cos); font-weight: 800; color: var(--negre-500); cursor: pointer; }

/* 7-set: el compte de l'admin, curt */
.adminFitxa .fitxaEvent__targeta { width: min(440px, calc(100vw - 1.6rem)); }
.adminFitxa .compte__fills[hidden] { display: none; }
.adminFitxa .compte__seccio--avisos { margin-top: 0.6rem; }

/* 7-set: els dos botons de crear, iguals (fora el marge antic de «+ Activitat») */
.pista__crea { align-items: center; }
.pista__crea .admin__accio { margin: 0; }

/* 7-set: el camp que falla al formulari d'entrenament */
.pista__form input.esBuit { border-color: var(--alarma); box-shadow: 0 0 0 3px rgba(194, 65, 65, 0.18); }
.pista__form .auth__error { margin: 0; color: var(--alarma); font-weight: 700; font-size: 0.9rem; }
.pista__form .auth__error[hidden] { display: none; }

/* 7-set: l'admin gestiona el dia des del calendari */
.adminDia__obre { display: block; margin: 0.8rem 0 0; }
.adminDia__crea { margin-top: 0.9rem; }
.pistaFitxa .casa__titol { margin: 0.8rem 0 0.2rem; }
/* 9-set: al calendari, la pilota d una franja LLIURE va plena; nomes s apaga quan es Ple (Oriol) */
body.vQuatre .cal__meu--lliure .pilota { opacity: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
body.vQuatre .cal__meu--lliure:not(.cal__meu--altres):has(.esPle) .pilota { opacity: 0.4; filter: none; } /* a la linia dels altres grups (admin), nomes s apaga la pilota del grup ple */
body.vQuatre .cal__meu--lliure .cal__meuHora { color: var(--negre); }
body.vQuatre .cal__meu--lliure .cal__meuHora.esPle { color: #8b9198; font-weight: 700; }

/* ===== 9-set: pagaments, membre i tiquets ===== */
.pagaFitxa .fitxaEvent__targeta { width: min(440px, calc(100vw - 1.6rem)); }
.paga__que { list-style: none; margin: 0.6rem 0 0.8rem; padding: 0; display: grid; gap: 0.35rem; }
.paga__que li { position: relative; padding-left: 1.4rem; font-weight: 700; line-height: 1.3; }
.paga__que li::before { content: '✓'; position: absolute; left: 0; color: var(--llima-700, #6a8a12); font-weight: 900; }
.paga__que small { display: block; font-weight: 600; color: var(--negre-500); }
.paga__linies { list-style: none; margin: 0.6rem 0 0.4rem; padding: 0; border: 1.5px solid var(--vora); border-radius: 12px; overflow: hidden; }
.paga__linies li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--vora); }
.paga__linies li:first-child { border-top: 0; }
.paga__linies li small { color: var(--negre-500); font-weight: 600; }
.paga__linies li b { font-family: var(--titular); font-size: 1.15rem; font-weight: 900; color: var(--teal); white-space: nowrap; }
.paga__total { background: var(--teal-100, #eef5f7); }
.paga__total b { font-size: 1.35rem; }
.paga__regla { margin: 0.5rem 0 0; padding: 0.55rem 0.8rem; border-left: 4px solid var(--llima-700, #6a8a12); border-radius: 0 10px 10px 0; background: var(--llima-100, #f3f9d2); font-size: 0.86rem; line-height: 1.35; }
.paga__accions { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.paga__accions .boto { width: 100%; }
.paga__cancela { border: 0; background: transparent; padding: 0.3rem; font-family: var(--cos); font-weight: 800; color: var(--negre-500); cursor: pointer; }
.paga__peu { margin: 0.6rem 0 0; text-align: center; font-size: 0.74rem; color: var(--negre-500); }
.paga__simula { border-style: dashed; }
.casa__membre.esMembre { background: var(--llima-100, #f3f9d2); border-left-color: var(--llima-700, #6a8a12); }
.casa__membre span { white-space: normal; line-height: 1.25; }
.casa__membre small { font-weight: 600; color: var(--negre-500); }
.compte__dada--membre > span small { display: block; font-weight: 600; color: var(--negre-500); }
.calGrup__membre { margin-top: 0.3rem; }
.dialeg__text small { display: block; margin-top: 0.3rem; color: var(--negre-500); }
.dialeg__text .paga__regla { margin-top: 0.6rem; }
/* 9-set: tambe a les vistes Individual i El meu grup (.cal__lliures): pilota plena si hi ha lloc, apagada nomes si es Ple */
body.vQuatre .cal__lliures .pilota { opacity: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
body.vQuatre .cal__lliures:has(.esPle) .pilota { opacity: 0.4; filter: none; }

/* 9-set: el color del que es paga (taronja = individual; el del grup als de grup) */
.pagaFitxa--color .fitxaEvent__targeta { border-top: 6px solid var(--tema, var(--teal)); }
.pagaFitxa--color .cal__xip { background: var(--tema, var(--teal)); color: #fff; }
.pagaFitxa--color .fitxaEvent__titol { display: flex; align-items: center; gap: 0.5rem; }
.pagaFitxa--color .fitxaEvent__titol .pilota { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; }
.pagaFitxa--color .paga__total { background: color-mix(in srgb, var(--tema, var(--teal)) 14%, #fff); }
.pagaFitxa--color .paga__linies li b, .pagaFitxa--color .paga__total b { color: var(--temaText, var(--tema, var(--teal))); }
.pagaFitxa--color .paga__targeta { background: var(--tema, var(--teal)); border-color: var(--tema, var(--teal)); color: var(--temaInk, #fff); }
.dialeg__caixa.dialeg--tema { border-top: 6px solid var(--tema, var(--teal)); }
.dialeg--tema .dialeg__titol { display: flex; align-items: center; gap: 0.45rem; color: var(--temaText, var(--tema, var(--teal))); }
.dialeg--tema .dialeg__titol .pilota { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; }
.dialeg--tema .dialeg__ok:not(.dialeg__ok--perill) { background: var(--tema, var(--teal)); border-color: var(--tema, var(--teal)); color: var(--temaInk, #fff); }
/* 9-set: FER-SE MEMBRE amb el color de la samarreta de l MBA (el sorra del Jordi: mesurat a les fotos noves, #C4B5A3–#DAC1AC) */
.membreFitxa .fitxaEvent__targeta { border-top: 6px solid var(--sorra-500); }
.membreFitxa .cal__xip { background: var(--sorra-500); color: var(--negre); }
.membreFitxa .fitxaEvent__titol { color: var(--sorra-700); }
.membreFitxa .paga__linies li b { color: var(--sorra-700); }
.membreFitxa .paga__que li::before { color: var(--sorra-700); }
.membreFitxa .paga__ferMembre { background: var(--sorra-700); border-color: var(--sorra-700); color: #fff; }
.pagaFitxa:not(.pagaFitxa--color) .fitxaEvent__targeta { border-top: 6px solid var(--sorra-500); }
.pagaFitxa:not(.pagaFitxa--color) .paga__total { background: var(--sorra-100); }
.pagaFitxa:not(.pagaFitxa--color) .paga__linies li b, .pagaFitxa:not(.pagaFitxa--color) .paga__total b { color: var(--sorra-700); }
.pagaFitxa:not(.pagaFitxa--color) .paga__targeta { background: var(--sorra-700); border-color: var(--sorra-700); }
.casa__membre.esMembre { background: var(--sorra-100); border-left-color: var(--sorra-700); }
.casa__membre.esMembre b { color: var(--sorra-700); }
/* 9-set: a la fitxa del dia, cada fila diu de que es amb el color: taronja individual, el del grup als de grup */
.entreno__fila--individual > b { color: var(--tema); }
.entreno__fila--individual .entreno__nom { color: var(--tema); font-weight: 800; }
.entreno__fila--individual .entreno__reserva { background: var(--tema); border-color: var(--tema); color: #fff; }
/* els de grup: la pilota ja diu el color; el boto es queda de la marca (el blanc o el groc no aguantarien text) */

/* 9-set: «Fes-te membre» dins del pagament d'un individual (sorra), amb la linia petita a sota */
/* en repos com la barra de dalt: negre amb la lletra sorra; en passar-hi, la foto apareix sobre el negre */
.paga__membre { display: grid; gap: 0.15rem; background: var(--negre); border-color: var(--negre); color: var(--sorra); line-height: 1.15; }
.paga__membre small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 0.92; }

/* 9-set: el boto RESERVAR a la fila del Total (Oriol), en lloc del «Paga amb targeta · N €» de sota */
.paga__linies li.paga__total { align-items: center; } /* la regla de les linies (baseline) guanyava i el boto queia 5 px per sota de la fila */
.paga__total span { display: flex; align-items: baseline; gap: 0.5rem; }
.paga__accions .paga__targeta { display: none; }
.paga__total .paga__targeta { width: auto; padding: 0.55rem 1.1rem; font-size: 0.85rem; letter-spacing: 0.12em; }
/* 9-set: «Fes-te soci de l'MBA» en passar-hi per sobre porta la foto del jugador de la portada (Oriol), no el blau */
.paga__membre:hover, .paga__membre:focus-visible, .paga__membre:active { background: var(--negre) right center / cover no-repeat; background-image: url("/img/hero-jugador.png"); border-color: var(--negre); color: var(--sorra); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }

/* 9-set: hover del «Reservar» (i dels botons amb tema): el mateix color una mica mes fosc */
.pagaFitxa--color .paga__targeta:hover { background: color-mix(in srgb, var(--tema, var(--teal)) 70%, #000); border-color: color-mix(in srgb, var(--tema, var(--teal)) 70%, #000); }
.pagaFitxa:not(.pagaFitxa--color) .paga__targeta:hover { background: color-mix(in srgb, var(--sorra-700) 70%, #000); border-color: color-mix(in srgb, var(--sorra-700) 70%, #000); }
/* 9-set: hover del «Fes-te membre» del popup de soci (Oriol): el sorra una mica mes fosc */
/* el mateix hover que «Fes-te soci»: la foto del jugador (Oriol) */
.paga__ferMembre:hover, .paga__ferMembre:focus-visible, .paga__ferMembre:active { background: var(--negre) right center / cover no-repeat; background-image: url("/img/hero-jugador.png"); border-color: var(--negre); color: var(--sorra); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
/* 9-set: els «Reserva» de la fitxa del dia tambe tenen hover, i salten com els altres (Oriol) */
.entreno__reserva { transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
.entreno__reserva:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); background: var(--teal-fosc); }
.entreno__fila--individual .entreno__reserva:hover { background: color-mix(in srgb, var(--tema) 70%, #000); border-color: color-mix(in srgb, var(--tema) 70%, #000); }
/* 9-set: la fila del GRUP com la de l'individual pero amb el color del grup (Oriol): hora, «Grup» i el boto Reserva.
   Blanc i groc: el text de la fila es queda fosc i el boto porta lletra negra (i el blanc, una vora). */
.entreno__fila--grup:not([data-grup="blanc"]):not([data-grup="groc"]) > b,
.entreno__fila--grup:not([data-grup="blanc"]):not([data-grup="groc"]) .entreno__nom { color: var(--tema); font-weight: 800; }
.entreno__fila--grup .entreno__reserva { background: var(--tema); border: 1.5px solid var(--tema); color: #fff; }
.entreno__fila--grup[data-grup="blanc"] .entreno__reserva, .entreno__fila--grup[data-grup="groc"] .entreno__reserva { color: var(--negre); }
.entreno__fila--grup[data-grup="blanc"] .entreno__reserva { border-color: var(--vora); }
.entreno__fila--grup .entreno__reserva:hover { background: color-mix(in srgb, var(--tema) 70%, #000); border-color: color-mix(in srgb, var(--tema) 70%, #000); }
.entreno__fila--grup[data-grup="blanc"] .entreno__reserva:hover, .entreno__fila--grup[data-grup="groc"] .entreno__reserva:hover { background: color-mix(in srgb, var(--tema) 88%, #000); border-color: color-mix(in srgb, var(--tema) 70%, #000); color: var(--negre); }

/* 9-set: al dialeg de reserva i al popup de pagament, el jugador com a XIP del color del que reserves (fix, amb ✓),
   i els tiquets que tens dits abans de reservar (Oriol) */
.paga__perA { display: flex; align-items: center; gap: 0.45rem; margin: 0.45rem 0 0.2rem; font-size: 0.9rem; color: var(--negre-500); }
.paga__fill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--tema, var(--teal)); background: var(--tema, var(--teal)); color: #fff; font-family: var(--cos); font-size: 1.02rem; font-weight: 800; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.45); }
.paga__fill .grup__punt { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--tema, var(--teal)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.paga__fill b { font-weight: 800; }
.paga__fill--clar { color: var(--negre); border-color: var(--vora); }
.paga__fill--clar .grup__punt { box-shadow: 0 0 0 2px var(--negre); }
/* la caixa dels tiquets, a dalt del dialeg i del popup (Oriol, 9-set): del color del que reserves */
.paga__caixa { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.1rem 0.8rem; margin: 0.2rem 0 0.8rem; padding: 0.55rem 0.9rem; border-left: 4px solid var(--tema, var(--teal)); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--tema, var(--teal)) 10%, #fff); line-height: 1.25; }
.paga__caixaMot { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negre-500); }
.paga__caixaNum { font-family: var(--titular); font-size: 1.9rem; font-weight: 900; color: var(--temaText, var(--tema, var(--teal))); line-height: 1; }
.paga__caixaLinia { grid-column: 1 / -1; font-size: 0.88rem; font-weight: 600; color: var(--negre); }
.paga__tiquets { display: block; margin-top: 0.35rem; }
/* el Reserva del dialeg amb hover, com la resta */
.dialeg--tema .dialeg__ok:not(.dialeg__ok--perill):hover { background: color-mix(in srgb, var(--tema, var(--teal)) 70%, #000); border-color: color-mix(in srgb, var(--tema, var(--teal)) 70%, #000); }
/* els xips del jugador de la fitxa del dia i de la peca de dalt: atenuats si no es poden premer (un sol jugador) */
.perA__fill.esActiu[disabled] { opacity: 0.72; box-shadow: none; }
.paga__fill--fix { opacity: 0.72; box-shadow: none; }

/* 9-set: el dialeg amb la ✕ a dalt (en lloc d'«Ara no»), i els botons apretables fan el bot d'entrada com a les fitxes (Oriol) */
.dialeg__caixa--x { position: relative; padding-top: 1.3rem; }
.dialeg__caixa--x .dialeg__titol { padding-right: 2.4rem; }
.dialeg__caixa .dialeg__ok { animation: peuPecaCrida 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; animation-delay: 0.08s; }
.dialeg__caixa .dialeg__tanca { animation: peuPecaCrida 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; animation-delay: 0.2s; }
/* 9-set: els tiquets de grup del mes, a la dreta del grup al panell «El teu grup» (Oriol) */
.calGrup__fila { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.calGrup__tiquets { display: grid; justify-items: center; gap: 0.05rem; padding: 0.3rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.75); border: 1.5px solid var(--gc-line, var(--vora)); }
.calGrup__tiquets small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negre-500); white-space: nowrap; }
.calGrup__tiquets b { font-family: var(--titular); font-size: 1.5rem; font-weight: 900; line-height: 1; color: var(--gc-text, var(--gc, var(--teal))); }
.calGrup__tiquets--cap b { color: var(--negre-500); }
/* 9-set: tambe a «Classes individuals»: la caixa en taronja, centrada a dalt del cos (Oriol) */
.calGrup__tiquets--ind { width: fit-content; margin: 0 auto 0.5rem; border-color: var(--rosa-500); }
.calGrup__tiquets--ind b { color: var(--rosa-500); }
.calGrup__tiquets--ind.calGrup__tiquets--cap b { color: var(--negre-500); }
/* 9-set: tambe a «Estas apuntat a» (Tot): la caixa centrada, en el color de la marca (Oriol) */
.calGrup__tiquets--tot { width: fit-content; margin: 0 auto 0.5rem; border-color: var(--teal); }
.calGrup__tiquets--tot b { color: var(--teal); }
.calGrup__tiquets--tot.calGrup__tiquets--cap b { color: var(--negre-500); }
/* 9-set: la peca d'El meu grup com la d'Individual: pilota al titol, cistella a sota, tiquets centrats (Oriol) */
/* la cistella fora del flux: a l esquerra, centrada verticalment sobre la linia del titol; aixi «Grup Blau» queda centrat i a la mateixa distancia del xip que a Individual */
body.vQuatre .calEdats__jugadors { position: relative; }
.calEdats__cistella { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); display: inline-flex; }
.calGrup__tiquets--grup { width: fit-content; margin: 0 auto 0.5rem; }
.calEdats__cistella .cistella--peça svg { width: 2rem; height: 2rem; }
.calEdats__cistella .cistella--peça { font-size: 0.6rem; line-height: 1; }

/* 9-set: amb 2 entrenaments o mes a la llista, els tiquets en un xip petit a dalt a la dreta de la peca (Oriol):
   la peca no creix amb els apuntats i la llista guanya les dues linies de la caixa */
body.vQuatre .calEdats { position: relative; }
/* sense caixa, text centrat (Oriol): nomes «TIQUETS 2» a dalt a la dreta */
/* alineats per la TINTA: base comuna i «TIQUETS» pujat 2,5 px (mesurat amb les fonts: el centre de les majuscules de 9,3 px queda 3,5 px sobre la base; el del nombre de 16,8 px, 6 px) */
.calEdats__tiquetsXip { position: absolute; top: 0.55rem; right: 0.7rem; display: inline-flex; align-items: baseline; gap: 0.3rem; }
.calEdats__tiquetsXip small { position: relative; top: -2.5px; line-height: 1; }
.calEdats__tiquetsXip small { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negre-500); }
.calEdats__tiquetsXip b { font-family: var(--titular); font-size: 1.05rem; font-weight: 900; line-height: 1; }
.calEdats__tiquetsXip--ind b { color: var(--rosa-500); }
.calEdats__tiquetsXip--tot b { color: var(--teal); }
.calEdats__tiquetsXip--grup b { color: var(--gc-text, var(--gc, var(--teal))); }
.calEdats__tiquetsXip--cap b { color: var(--negre-500); }
/* amb el xip, la llista te lloc per a 3 files senceres (abans 2 i mitja) sense que la peca passi dels 168 px */
.calEdats__tiquetsXip ~ .apuntatsLlista--scroll { max-height: 82px; }

/* 9-set: la subscripcio dins del popup de membre (Oriol): autorenew → «Cancel·la la subscripcio»; cancel·lada → «Reactiva»; amb codi promocional no es pot tocar */
.membre__sub { display: grid; gap: 0.2rem; margin: 0.2rem 0 0.6rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--sorra-100); border: 1.5px solid var(--sorra-500); font-size: 0.9rem; }
.membre__sub b { color: var(--sorra-700); font-weight: 800; }
.membre__sub span { color: var(--negre-500); font-weight: 600; }
.membre__sub .admin__accio { justify-self: start; margin-top: 0.25rem; }
.membre__sub--cancelada { border-color: var(--vora); background: #f6f4ef; }
.membre__sub--cancelada b { color: var(--negre); }

/* 9-set: les places per grup, dins del color (admin) */
.pista__places { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--negre-500); }
.pista__places input { width: 4.2rem; padding: 0.35rem 0.5rem; border: 1.5px solid var(--vora); border-radius: 10px; font-family: var(--cos); font-size: 1rem; font-weight: 800; color: var(--negre); text-align: center; }
.pista__places small { font-weight: 600; color: var(--llima-700, #6a8a12); }
/* 9-set: a la casella, per a l'admin, les pilotes dels altres grups que entrenen aquell dia */
.cal__meu--altres { display: inline-flex; gap: 1px; }
.cal__meu--altres .pilota--mini { width: 0.95rem; height: 0.95rem; }
.cal__meu--altres { gap: 3px; align-items: flex-start; }
.cal__altre { display: inline-grid; justify-items: center; gap: 0; }
.cal__altre em { font-style: normal; font-size: 0.55rem; font-weight: 800; line-height: 1; color: var(--negre-500); }
body.vQuatre .cal__meu--lliure .cal__altre.esPle .pilota { opacity: 0.4; }
.cal__altre.esPle em { color: var(--alarma); }

/* 9-set: els apuntats de cada entrenament a la fitxa d'admin del dia */
.pista__sessionsDia li .adminDia__qui { grid-column: 1 / -1; font-size: 0.82rem; font-weight: 600; color: var(--negre); line-height: 1.3; }
.pista__sessionsDia li .adminDia__qui--ningu { color: var(--negre-500); font-weight: 500; }

/* 9-set: a la fitxa d'admin del dia, la fila d'un entrenament es pot tocar (apuntats) */
.pista__sessionsDia li.adminDia__fila { cursor: pointer; }
.pista__sessionsDia li.adminDia__fila:hover { background: color-mix(in srgb, var(--teal) 14%, #fff); }

/* 9-set: «Tens un codi de l'MBA?» al popup de fer-se membre */
.membre__codi { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.5rem; align-items: center; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1.5px solid var(--vora); }
.membre__codi span { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 800; color: var(--negre-500); }
.membre__codi input { min-width: 0; padding: 0.5rem 0.7rem; border: 1.5px solid var(--vora); border-radius: 10px; font-family: var(--cos); font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--negre); }
.membre__codi input:focus { outline: none; border-color: var(--sorra-700); }

/* 9-set: assistencia (admin): a la classe ja feta, «Ha vingut» / «No ha vingut» per jugador */
.pistaQui__fila:has(.adminDia__falta) { grid-template-columns: auto 1fr auto; }
.adminDia__falta { border: 1.5px solid var(--vora); border-radius: 999px; background: var(--blanc); padding: 0.35rem 0.7rem; font-family: var(--cos); font-size: 0.8rem; font-weight: 800; color: var(--llima-700, #6a8a12); cursor: pointer; white-space: nowrap; }
.adminDia__falta[aria-pressed="true"] { background: var(--alarma); border-color: var(--alarma); color: #fff; }
.pistaQui__fila.esFalta .pistaQui__qui b { text-decoration: line-through; color: var(--negre-500); }
.pistaQui__fila.esFalta .pistaQui__pilota .pilota { opacity: 0.4; }
.adminDia__nota { margin: 0.3rem 0 0; font-size: 0.85rem; font-weight: 700; color: var(--sorra-700); }
/* 9-set: dies passats (admin): les pilotes dels grups que hi van entrenar, apagades */
body.vQuatre .cal__meu--passat .pilota { opacity: 0.45; filter: grayscale(0.2); }
body.vQuatre .cal__meu--passat { flex-wrap: wrap; max-width: 100%; gap: 1px; }
body.vQuatre .cal__meu--passat .pilota--mini { width: 0.78rem; height: 0.78rem; }

/* 9-set: al passat, «Feta» en lloc d'«Edita» */
.adminDia__feta { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--negre-500); }
/* 10-set: la pastilla «Cap grup» (torna el jugador a pendent) */
.pistaNou__grup--cap { color: var(--negre-500); }
.pistaNou__grup--cap .grup__punt { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px dashed var(--negre-500); background: transparent; }
/* 10-set: la ela geminada (anul·lar, cancel·la) es llegia com «anuḷlar»: la forma catalana «locl» de Barlow
   comprimeix la l·l. Desactivada a tota la web (Oriol: «no ho llegeixo be a la pantalla»). */
*, *::before, *::after { font-feature-settings: "locl" 0; } /* universal: el «font:» abreujat del body (i de qualsevol element) la reiniciaria */
/* 10-set: els botons dels altres dies (‹ dia anterior · dia seguent ›) tambe salten en passar-hi (Oriol) */
.fitxaNav__boto { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s; }
.fitxaNav__boto:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
body.vQuatre[data-filtre="individual"] .reservaFitxa .fitxaNav__boto:hover { background: color-mix(in srgb, var(--rosa-500) 10%, #fff); }
body.vQuatre[data-filtre="grups"] .reservaFitxa .fitxaNav__boto:hover { background: var(--gc-tint, #fff); }
body.vQuatre[data-filtre="tot"] .reservaFitxa .fitxaNav__boto:hover, .reservaFitxa .fitxaNav__boto:hover { background: var(--teal-100, #eef5f7); }

/* 10-set: el jugador com a DESPLEGABLE (Oriol): nomes l'actiu; amb mes d'un, ▾ i la llista en tocar-lo */
.perA__fills--menu { position: relative; overflow: visible; flex-wrap: nowrap; }
.perA__fills--menu .perA__tria { cursor: pointer; }
.perA__fills--menu .perA__tria::after { content: "▾"; margin-left: 0.3rem; font-weight: 800; }
.perA__fills--menu .perA__tria[aria-expanded="true"]::after { content: "▴"; }
.perA__llista { position: absolute; top: calc(100% + 4px); left: 0; z-index: 6; display: grid; gap: 3px; min-width: 100%; padding: 4px; background: var(--blanc); border: 1.5px solid var(--vora); border-radius: 12px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35); }
.perA__llista .perA__fill { width: 100%; justify-content: flex-start; opacity: 1; }
.perA__llista .perA__fill:hover { border-color: var(--teal); background: var(--teal-100, #eef5f7); }
.perA__fills--menu.perA__fills--peca .perA__tria::after { content: "▾"; }
.perA__fills--menu.perA__fills--peca .perA__tria[aria-expanded="true"]::after { content: "▴"; }
.perA__llista[hidden] { display: none; }
/* 10-set: la baixa nomes de l'1 al 15: del 16 a final de mes, l'avis en lloc del boto */
.membre__sub--avis { display: block; margin-top: 0.25rem; font-weight: 700; color: var(--sorra-700); }

/* CONFIRMAR EL CORREU (Oriol, 10-set: «abans l'ha de verificar»): l'avis que
   surt quan un compte de correu i contrasenya encara no ha clicat l'enllac.
   El text va dins el cos blanc de la fitxa, no sobre la portada fosca. */
.authFitxa--verifica .auth__cos { display: grid; gap: 0.65rem; }
.auth__verifica { margin: 0; font-size: 0.95rem; line-height: 1.45; font-weight: 600; color: var(--negre); }
.auth__verifica b { word-break: break-word; }
.auth__verificaNota { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--negre-500); }
.authFitxa--verifica .auth__envia { margin-top: 0.15rem; }

/* UN MBA PER JUGADOR (Jordi, 10-set: «cada nen ha de pagar un MBA»): al compte i a la casa,
   una fila per jugador amb el seu estat i els seus tiquets; cada fila obre el seu MBA. */
.membre__fills { display: grid; gap: 0.4rem; }
.membre__fila {
  display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem; width: 100%; text-align: left;
  border: 1px solid var(--vora, #dcdfe3); border-radius: 12px; background: var(--blanc); cursor: pointer;
  padding: 0.55rem 0.7rem; font-family: var(--cos);
}
.membre__fila:hover { border-color: var(--sorra-700); background: var(--crema); }
.membre__fila.esMembre { border-left: 4px solid var(--sorra-700); }
.membre__filaNom { grid-column: 1; font-weight: 800; font-size: 0.95rem; color: var(--negre); }
.membre__filaEstat { grid-column: 1; font-size: 0.8rem; line-height: 1.3; color: var(--negre-500); }
.membre__filaEstat.esMembre { color: var(--sorra-700); font-weight: 700; }
.membre__filaTiquets { grid-column: 1; font-size: 0.8rem; font-weight: 700; color: var(--teal); }
.membre__filaVes {
  grid-column: 2; grid-row: 1 / -1; align-self: center; white-space: nowrap;
  font-size: 0.75rem; font-weight: 800; color: var(--teal); border: 1.5px solid var(--teal);
  border-radius: 999px; padding: 0.2rem 0.6rem;
}
.membre__fila.esMembre .membre__filaVes { color: var(--sorra-700); border-color: var(--sorra-700); }
.membre__qui { font-weight: 800; color: var(--sorra-700); }

/* EL XIP DE L'MBA, un a cada jugador (Oriol, 11-set: «un control que quedi clar que és membre
   MBA... i el botó de fer-se membre més estètic, ara queda horrible a la vista general»).
   Una pastilla petita sota la fila del jugador, hi sigui triat o no: contorn daurat si encara
   no ho és, plena si ja ho és. Tocant-la s’obre el seu MBA (fer-se’n membre o donar-se de baixa). */
.fill__mbaXip {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 0.7rem 0.55rem 2.9rem; padding: 0.26rem 0.75rem; border-radius: 999px; cursor: pointer;
  font-family: var(--cos); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em;
  background: var(--blanc); color: var(--sorra-700); border: 1.5px solid var(--sorra-700);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.fill__mbaXipPunt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; opacity: 0.5; }
.fill__mbaXip.esMembre { background: var(--sorra-700); border-color: var(--sorra-700); color: var(--blanc); }
.fill__mbaXip.esMembre .fill__mbaXipPunt { opacity: 1; }
.fill__mbaXip:hover, .fill__mbaXip:focus-visible { background: var(--negre); border-color: var(--negre); color: var(--sorra); box-shadow: var(--ombra-1); }
.fill.esActiu .fill__mbaXip { margin-bottom: 0.7rem; }

/* la pastilla quan encara no hi ha cap jugador triat (Oriol, 11-set): la mateixa forma que la del
   jugador, pero sense color de grup i convidant a triar-lo */
.perA__fill--cap { font-style: normal; opacity: 0.9; }
.perA__fill--cap .grup__punt--cap { background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--negre-500); }
/* aquest avis no es cap alarma: nomes diu que triï el jugador a la pastilla de sobre */
body.vQuatre .calGrup__espera--suau { color: var(--negre-500); font-weight: 600; }


/* el boto d’amagar, a la cantonada de dalt a la dreta: no ocupa lloc al cos i «Tot» es veu
   sencer d’un cop, com el taronja (Oriol, 11-set) */
body.vQuatre .calEdats { position: relative; }
body.vQuatre .totTria--cantonada {
  position: absolute; top: 5px; right: 7px; z-index: 2;
  border: 1px solid var(--vora); background: rgba(255, 255, 255, 0.82); border-radius: 7px;
  padding: 0.1rem 0.5rem; cursor: pointer;
  font-family: var(--cos); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--negre-500); text-decoration: none;
  display: grid; text-align: center; line-height: 1.15; padding: 0.18rem 0.5rem;
}
body.vQuatre .totTria--cantonada:hover { border-color: var(--teal); color: var(--teal); }
body.vQuatre .totTria--cantonada span { font-weight: 700; letter-spacing: 0.02em; }
/* EL XIP DE TIQUETS NO POT TAPAR EL TITOL (Oriol, 11-set: «un error, que es tapen els texts»).
   El xip viu absolut a dalt a la dreta; el titol li deixa lloc. I a «Tot», on tambe hi ha el boto
   d'amagar, el xip se'n va a l'esquerra: un a cada cantonada i el titol al mig. */
body.vQuatre .calEdats:has(.calEdats__tiquetsXip) .calEdats__titol { padding-right: 8.4rem; }

/* a «Tot» el xip es posa en dues linies (rotul a sobre, nombre a sota) per ocupar menys ample:
   aixi el titol hi cap en una sola linia entre el xip i el boto */



/* el full d'un dia sense res (Oriol, 11-set: el pop-up ha de sortir igualment) */
.reserva__resDia { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--negre-500); }
.reserva__actes { margin-top: 0.8rem; }
.reserva__actes .dia__llista { margin: 0.3rem 0 0; }

/* EL BOTO D AMAGA, A LA FILA DEL MES (Oriol, 11-set): a la dreta de «Setembre 2026» i nomes a la
   vista «Tot». Mateixa forma que el de la cantonada —petit, dues linies, cantonades quadrades—,
   pero aqui no tapa res. */
body.vQuatre .cal__controls .totTria--mes {
  justify-self: end; display: grid; text-align: center; line-height: 1.15;
  border: 1px solid var(--vora); background: var(--blanc); border-radius: 7px;
  padding: 0.18rem 0.5rem; cursor: pointer;
  font-family: var(--cos); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--negre-500); text-decoration: none;
}
body.vQuatre .cal__controls .totTria--mes:hover { border-color: var(--teal); color: var(--teal); }
body.vQuatre .cal__controls .totTria--mes span { font-weight: 700; letter-spacing: 0.02em; }
/* a Individual i El meu grup el botó no s'usa però ocupa el mateix lloc: el calendari no es mou
   en canviar de pestanya (Oriol, 11-set) */
body.vQuatre .cal__controls .totTria--mes.esApagat { visibility: hidden; pointer-events: none; }
/* la marca (MBA) / (-) al costat del nom del jugador, a les llistes d'admin (Oriol, 11-set) */
.fill__mbaMarca { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; color: var(--negre-500); }
.fill__mbaMarca.esMembre { color: var(--sorra-700); }
/* quins tiquets són: la nota d'extra dins la caixa de tiquets (Oriol, 11-set) */
/* el desglos surt com una etiqueta SOBRE la caixa: no la fa creixer i la peça no es mou */
.calGrup__tiquets.teDesglos { position: relative; }
.calGrup__tiquetsNota {
  display: none; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; z-index: 6; font-style: normal; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4;
  background: var(--negre); color: var(--sorra); padding: 0.1rem 0.5rem; border-radius: 6px;
  box-shadow: var(--ombra-1);
}
.teDesglos { cursor: pointer; }
.teDesglos.esObert .calGrup__tiquetsNota { display: block; }
/* una pista discreta que es pot tocar */
.teDesglos:hover b, .teDesglos:focus-visible b { text-decoration: underline; text-underline-offset: 2px; }