/* ══════════════════════════════════════════════════════════
   Qui sóc jo?
   Ve de la companya (markos-web-2026-09-19). El seu CSS va tal com el va
   escriure; l'únic que s'ha fet és tancar-li les variables i els botons dins
   de .jo-zona, perquè els noms que fa servir (--bg, --ink, --pink, .btn…)
   xoquen amb els nostres i es menjarien la paleta de la portada.
   Les fotos són a assets/jo/; els stickers els comparteix amb els shows.
   ══════════════════════════════════════════════════════════ */

.jo-zona, .punter {
  --bg: #f3d9d5;          /* rosa palo */
  --bg-2: #ecc6c1;
  --ink: #2b1b33;
  --pink: #d6427f;
  --pink-deep: #b32d66;
  --pink-clar: #ff8ab8;      /* el rosa que es llegeix sobre fons fosc */
  --muted: #a8899b;
  --line: rgba(43, 27, 51, 0.16);
  --pill: #ffffff;
  --pill-ink: #2b1b33;
  --radius: 999px;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.25, 1, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.24, 1);   /* sortides suaus */
  --spring: cubic-bezier(0.34, 1.32, 0.42, 1);     /* arribada amb rebot curt */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}


.jo-zona .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px;
  border-radius: var(--radius);
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  transition: transform .25s var(--ease), background .25s, color .25s;
  white-space: nowrap;
}
.jo-zona .btn:hover { transform: translateY(-2px); }
.jo-zona .btn--cream { background: var(--pill); color: var(--pill-ink); }
.jo-zona .btn--pink  { background: var(--pink); color: var(--pill-ink); }
.jo-zona .btn--ghost { background: var(--pill); color: var(--muted); cursor: default; }
.jo-zona .btn--ghost:hover { transform: none; }
.jo-zona .btn--icon { width: 50px; padding: 0; background: var(--pill); color: var(--pill-ink); }

/* el botó i el menú de la seva capçalera no hi són: la navegació és la
   nostra, amb el seu propi botó i la seva cortina */

/* =========================================================
   Markos amb K — Qui sóc? (necessita css/base.css carregat abans)
   ========================================================= */

/* ---------- Relleu amb la landing ----------
   La landing acaba amb la cara omplint la pantalla. Aquí el sticker hi entra a
   la mateixa mida (--jo: 0) i, a mesura que es baixa, s'encongeix i puja cap a
   un costat mentre el títol apareix (--jo: 1). El JS només mou aquesta variable. */
.jo {
  --jo: 0;
  position: relative;
  height: 180vh;               /* el recorregut d'scroll que dura la transició */
}
.jo__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.jo__sticker {
  position: absolute;
  width: min(128vh, 150vw);    /* de sortida omple la pantalla, com a la landing */
  max-width: none;
  /* Acaba recolzat a baix a l'esquerra i sortint una mica per fora. Una imatge
     ancorada a un caire omple la pantalla; una que sura enmig deixa buit a
     dalt i a baix alhora, que és el que passava abans. */
  transform:
    translate(calc(var(--jo) * -38vw), calc(var(--jo) * 24vh))
    scale(calc(1 - var(--jo) * 0.38))
    rotate(calc(var(--jo) * -8deg));
  transform-origin: 50% 45%;
  filter: drop-shadow(0 30px 50px rgba(96, 44, 72, calc(.10 + var(--jo) * .22)));
  will-change: transform;
}
/* El bloc de text: apareix quan el sticker ja s'ha apartat */
.jo__bloc {
  position: absolute;
  right: clamp(16px, 5vw, 80px);
  top: 45%;
  width: min(56vw, 760px);
  text-align: right;
  opacity: clamp(0, calc(var(--jo) * 2.2 - 1.1), 1);
  transform: translateY(calc(-50% + (1 - var(--jo)) * 40px));
}
.jo__title {
  margin: 0;
  font-size: max(2.8rem, min(12.5vw, 11rem, 21vh));
  font-weight: 800; letter-spacing: -0.05em; line-height: .84;
}
.jo__line { display: block; }
.jo__line--pink { color: var(--pink); }
.jo__fitxa {
  margin: clamp(20px, 2.6vw, 34px) 0 0 auto;
  max-width: 36ch;
  font-size: clamp(.95rem, 1.35vw, 1.2rem); line-height: 1.55;
  opacity: .72;
}
.jo__fitxa b { font-weight: 800; color: var(--pink-deep); }
.jo__fitxa i { font-style: italic; }

/* La xapa de la gira, enganxada de gairell entre el cap i el títol */
.jo__xapa {
  position: absolute;
  left: clamp(20px, 27vw, 450px);
  top: 33%;
  display: grid; gap: 1px;
  padding: 15px 26px 16px;
  background: #fff; color: var(--ink);
  border-radius: 999px;
  text-decoration: none; text-align: center; white-space: nowrap;
  box-shadow: 0 18px 34px rgba(96, 44, 72, .22);
  opacity: clamp(0, calc(var(--jo) * 2.6 - 1.7), 1);
  animation: xapa 6.5s var(--ease) infinite;
}
.jo__xapa b { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; }
.jo__xapa span {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink);
}
@keyframes xapa {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-8px); }
}
.jo__xapa:hover { animation-play-state: paused; }

/* Indicació per baixar: petita, però treu la sensació de pantalla acabada */
.jo__avall {
  position: absolute; right: clamp(16px, 5vw, 80px); bottom: clamp(16px, 4vh, 42px);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  opacity: clamp(0, calc(var(--jo) * 2.6 - 1.6), .55);
  transition: opacity .3s;
}
.jo__avall:hover { opacity: .9; }
.jo__avall i { font-style: normal; display: inline-block; animation: baixa 1.9s var(--ease) infinite; }
@keyframes baixa {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---------- Recursos compartits ---------- */

/* Quan s'arriba per un enllaç intern, que el títol no quedi sota la barra */
#bio, #musica, #any { scroll-margin-top: 96px; }

/* Subratllat que es dibuixa sol quan el bloc entra a pantalla.
   No és una barra recta sinó un traç de retolador: una ratlla perfecta es
   llegeix com a corporativa, i aquesta té la mà d'algú. És un fons que creix
   d'amplada, així que en aparèixer no mou res de lloc. */
.ralla {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M5 14C55 6 92 17 143 10c48-6 85 6 152-1' stroke='%23d6427f' stroke-width='11' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% .34em;      /* sense JS, el traç ja hi és */
  transition: background-size 1s var(--ease-out) .5s;
  padding-bottom: .08em;
}
.reveal-on .ralla { background-size: 0 .34em; }
.reveal-on .is-in .ralla, .reveal-on [data-reveal].is-in .ralla { background-size: 100% .34em; }

/* Entrada dels blocs. L'estat amagat el posa el JS, mai el CSS de sortida:
   si el JS no arrenca, tot es veu igualment. */
.reveal-on [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* Els titulars grans no entren de cop: hi entren línia a línia.
   El JS embolica cada paraula en un .mot i li posa el retard segons a quina
   línia ha caigut. Si no s'executa, el text es queda tal qual. */
.mot { display: inline-block; }
.linies-on .mot {
  opacity: 0;
  transform: translateY(.55em) rotate(2deg);
  transition: opacity .55s var(--ease-out), transform .75s var(--spring);
}
.linies-on.is-in .mot { opacity: 1; transform: none; }

/* ---------- La història, quadre a quadre ----------
   Una escena per fita, llegida cap enrere. El marc va alternant de costat i es
   va fent petit: com més amunt a la pàgina, més a prop d'avui i més gran.
   La mida i la inclinació de cada escena van a l'HTML (--mida i --gir), que és
   on es veuen d'un cop d'ull i on es toquen si se n'afegeix o se'n treu una. */
.historia {
  max-width: 1240px; margin: 0 auto;
  padding: 7vh var(--gutter) 6vh;
}
.historia__llista { list-style: none; margin: 0; padding: 0; }

.escena {
  --par: 0;                              /* parallax de la foto, el mou el JS */
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
  margin-bottom: clamp(56px, 11vh, 130px);
}
.escena:last-child { margin-bottom: 0; }

/* Els senars, quadre a l'esquerra; els parells, a la dreta. Com que el quadre
   va encongint, arrambar-lo sempre al caire de fora és el que dibuixa l'essa. */
.escena__quadre { display: flex; justify-content: flex-start; }
.escena:nth-child(even) .escena__quadre { order: 2; justify-content: flex-end; }
.escena:nth-child(even) .escena__text  { order: 1; }

.escena__text { max-width: 46ch; }
.escena:nth-child(even) .escena__text { justify-self: end; }
.escena__quan {
  display: block; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink);
}
.escena__titol {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  font-size: max(1.4rem, min(3.1vw, 2.5rem, 5vh));
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
  text-wrap: balance;
}
.escena__titol em { font-style: italic; }
.escena__text p {
  margin: 0 0 .9em;
  font-size: clamp(.95rem, 1.15vw, 1.08rem); line-height: 1.6;
}
.escena__text p:last-child { margin-bottom: 0; }
.escena__text strong { font-weight: 800; }
.escena__text em { font-style: italic; }

/* ---------- El marc ----------
   (Acotat a .jo-zona el 03/10/2026: sense acotar, aquestes regles .quadre
   s'aplicaven també als quadres de l'exposició de «Qui soc», que fan servir
   el mateix nom, i al mòbil els encongien al 92% i els desquadraven.) */
/* ---------- El marc ----------
   Tres capes: fusta fosca a fora, motllura daurada al mig i passe-partout de
   paper a dins. Tot són degradats, cap imatge: així es pot fer gran o petit
   sense que es pixeli i no pesa res. */
.jo-zona .quadre {
  margin: 0;
  width: calc(var(--mida, 1) * 100%);
}
/* el gir va al marc, no a tot el bloc: així el peu de foto queda recte */
.jo-zona .quadre__or {
  transform: rotate(var(--gir, 0deg));
  transition: transform .6s var(--ease);
}
.escena:hover .quadre__or { transform: rotate(0deg) translateY(-6px); }

.jo-zona .quadre__or {
  padding: 2%;
  background:
    linear-gradient(135deg, #7a5a22 0%, #e7c979 18%, #b9922f 34%, #f2e0a8 52%,
                            #a8811f 70%, #dcbc6d 86%, #6f5220 100%);
  box-shadow:
    /* la fusta fosca de fora */
    0 0 0 clamp(9px, 1.1vw, 18px) #3b2417,
    0 0 0 calc(clamp(9px, 1.1vw, 18px) + 2px) #1d1009,
    /* i l'ombra de penjat a la paret */
    0 28px 46px rgba(76, 38, 56, .34);
}
.jo-zona .quadre__passe {
  padding: 5%;              /* el passe-partout, ample com als quadres de debò */
  background: linear-gradient(160deg, #f6efd9, #e8dcbd);
  box-shadow:
    inset 0 0 0 1px rgba(120, 96, 40, .45),
    inset 0 2px 5px rgba(90, 70, 25, .18);
}
.jo-zona .quadre__foto {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  /* es mou una mica dins del marc mentre es baixa: el marc queda quiet */
  transform: translateY(calc(var(--par) * -14px)) scale(1.07);
  will-change: transform;
}
/* prou avall per no quedar sota la motllura, que sobresurt amb box-shadow */
.jo-zona .quadre__peu {
  margin-top: calc(clamp(9px, 1.1vw, 18px) + 20px);
  font-size: 12px; font-weight: 600; opacity: .5;
}
.jo-zona .quadre__peu span { color: var(--pink-deep); }

/* La frase que tanca, quan ja s'ha arribat als inicis */
.historia__final {
  margin: clamp(40px, 8vh, 96px) auto 0;
  max-width: 20ch;
  font-size: max(1.6rem, min(5.2vw, 4.1rem, 7.6vh));
  font-weight: 800; letter-spacing: -0.045em; line-height: 1.02;
  text-align: center; text-wrap: balance;
}

/* ---------- Les cançons ----------
   Llista, no targetes: aquí el que importa és poder repassar-ho tot d'un cop
   d'ull, que és el que fa qui ha d'escriure una peça. */
.cancons {
  max-width: 1100px; margin: 0 auto;
  padding: 4vh var(--gutter) 11vh;
}
.cancons__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px;
  margin-bottom: clamp(22px, 4vh, 44px);
}
.cancons__title {
  margin: 0;
  font-size: max(1.8rem, min(4.6vw, 3.4rem, 6.6vh));
  font-weight: 800; letter-spacing: -0.04em;
}
.cancons__sub { margin: 0; font-size: 15px; opacity: .6; }
.cancons__sub strong { font-weight: 800; opacity: 1; }

.cancons__list { list-style: none; margin: 0; padding: 0; }
.canco {
  display: grid; align-items: baseline;
  grid-template-columns: 120px minmax(9ch, 1fr) 1.5fr;
  gap: 6px 24px;
  padding: clamp(12px, 1.7vh, 20px) 10px clamp(12px, 1.7vh, 20px) 4px;
  border-top: 1px solid var(--line);
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.cancons__list .canco:last-child { border-bottom: 1px solid var(--line); }
.canco:hover { background: rgba(255, 255, 255, .5); padding-left: 16px; }
.canco__any {
  font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.canco__nom {
  margin: 0;
  font-size: max(1.1rem, min(2.4vw, 1.75rem, 3.4vh));
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
}
.canco__nom i { font-style: normal; font-weight: 600; opacity: .45; }
.canco__nota { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: .72; }
.canco__nota b { font-weight: 800; color: var(--pink-deep); opacity: 1; }

/* La que encara no ha sortit mana: any en rosa i un punt que batega */
.canco--nova .canco__any { color: var(--pink); }
.canco--nova .canco__any::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; margin-right: 7px; border-radius: 50%;
  background: var(--pink);
  animation: bateg 2s ease-in-out infinite;
}
@keyframes bateg {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
.cancons__peu { margin-top: clamp(20px, 3.4vh, 40px); }

/* ---------- Cinta rodant ----------
   Dos jocs idèntics de paraules: quan el primer ha recorregut la meitat,
   el segon ja n'ocupa el lloc i el bucle no es nota. El sentit el gira el JS
   segons cap a on es fa scroll. */
.cinta {
  overflow: hidden;
  padding: 26px 0;
  background: var(--ink); color: var(--bg);
  user-select: none;
}
.cinta--fi { background: var(--pink); color: #fff; }
/* L'empenta: quan es fa scroll de pressa, la cinta pega una estrebada i
   s'inclina, com si l'arrossegués el moviment. Ho posa el JS a --empenta. */
.cinta__empenta {
  --empenta: 0;
  transform: translate3d(calc(var(--empenta) * 1px), 0, 0)
             skewX(calc(var(--empenta) * -0.06deg));
  will-change: transform;
}
.cinta__via {
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  animation: rodar 26s linear infinite;
}
.cinta__via span {
  font-size: clamp(1.6rem, 3.6vw, 3.2rem); font-weight: 800;
  letter-spacing: -0.03em; white-space: nowrap;
}
.cinta__via i { font-style: normal; opacity: .45; font-size: clamp(1.2rem, 2.4vw, 2rem); }
@keyframes rodar { to { transform: translateX(-50%); } }
.scroll-amunt .cinta__via { animation-direction: reverse; }
.cinta:hover .cinta__via { animation-play-state: paused; }

/* El cap, apuntalat al caire de dalt de la cinta.
   És el mateix acudit que a la pàgina de shows i és el que treu la pàgina del
   "web d'agència": tot està ben posat i, de sobte, hi ha algú allà darrere. */
.tall { position: relative; }
.tall .cinta { position: relative; z-index: 1; }   /* la cinta el talla */
.tall__cap {
  position: absolute; z-index: 0;
  left: clamp(18px, 7vw, 120px);
  bottom: 100%;
  width: clamp(140px, 15vw, 230px);
  /* baixa per darrere de la cinta fins amagar-hi la barbeta */
  transform: translateY(33%) rotate(-5deg);
  transform-origin: 50% 100%;
  /* contorn blanc: és un adhesiu, no una foto retallada */
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 14px 20px rgba(96, 44, 72, .22));
  animation: treuelcap 7s var(--ease) infinite;
}
/* respira, però molt poc: ha de semblar viu, no un gif */
@keyframes treuelcap {
  0%, 100% { transform: translateY(33%) rotate(-5deg); }
  50%      { transform: translateY(27%) rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tall__cap { animation: none; }
}

/* ---------- El 2026 en titulars ---------- */
/* Franja fosca: el canvi de color a mitja pàgina és el que li dona ritme,
   i les targetes blanques hi guanyen molt. */
.any {
  background: var(--ink); color: var(--bg);
  padding: 11vh 0 12vh;
}
.any__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.any__head { text-align: center; margin-bottom: 7vh; }
.any__title {
  margin: 0 0 12px;
  font-size: max(1.9rem, min(6vw, 4.4rem, 8vh)); font-weight: 800; letter-spacing: -0.045em;
}
.any__sub { margin: 0; font-size: clamp(1rem, 1.6vw, 1.25rem); opacity: .65; }
.any__sub em { font-style: italic; }

.fites {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
.fita { position: relative; }
/* tota la targeta és l'enllaç a la notícia */
.fita__link {
  display: flex; flex-direction: column; height: 100%;
  overflow: hidden;
  /* el color s'ha de fixar: la franja és fosca i el text l'heretaria clar */
  background: #fff; color: var(--ink); border-radius: 26px;
  box-shadow: 0 16px 30px rgba(96, 44, 72, .13);
  transition: transform .4s var(--ease), box-shadow .4s;
}
/* el mig grau de gir és el que fa que no sembli una fitxa de catàleg */
a.fita__link:hover {
  transform: translateY(-9px) rotate(-.5deg);
  box-shadow: 0 26px 44px rgba(96, 44, 72, .22);
}
.fita__link--mut { cursor: default; }     /* la que no porta enlloc */

.fita__img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .7s var(--ease);
}
a.fita__link:hover .fita__img { transform: scale(1.06); }
.fita__cos { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.fita__data {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pink);
}
.fita__titol {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.08;
}
.fita__text { margin: 0; font-size: 15px; line-height: 1.5; opacity: .78; }
.fita__cita {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; line-height: 1.35;
  letter-spacing: -0.015em;
}
/* la font, sempre a baix del tot i alineada entre targetes */
.fita__font {
  display: block; margin-top: auto; padding-top: 16px;
  font-size: 12.5px; font-weight: 700; color: var(--pink-deep);
}
a.fita__link .fita__font::after { content: " ↗"; }

/* La del Camp Nou: doble d'ample, foto a un costat i fons rosa */
.fita--gran { grid-column: span 2; }
.fita--gran .fita__link { flex-direction: row; background: var(--pink); color: #fff; }
.fita--gran .fita__img { width: 40%; aspect-ratio: auto; align-self: stretch; flex: none; }
.fita--gran .fita__cos { padding: 32px 112px 32px 34px; justify-content: center; }
.fita--gran .fita__data { color: #fff; opacity: .8; }
.fita--gran .fita__titol { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.fita--gran .fita__text { opacity: .95; font-size: clamp(15px, 1.2vw, 17px); }
.fita--gran .fita__font { color: #fff; opacity: .85; }

/* L'última: tota l'amplada, amb la citació a cos gran fent de punt final */
.fita--ample { grid-column: 1 / -1; }
.fita--ample .fita__link { flex-direction: row; align-items: stretch; }
.fita--ample .fita__img { width: 34%; aspect-ratio: auto; flex: none; }
.fita--ample .fita__cos { padding: 40px clamp(28px, 5vw, 64px); justify-content: center; }
.fita--ample .fita__cita {
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.16;
  max-width: 24ch;
}
.fita--ample .fita__font { margin-top: 22px; padding-top: 0; }

.fita__sticker {
  position: absolute; right: 4px; bottom: -12px;
  width: 128px;
  transform: rotate(18deg);
  filter: drop-shadow(0 16px 24px rgba(96, 44, 72, .35));
  animation: micGronxa 6.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes micGronxa {
  0%, 100% { transform: rotate(18deg) translateY(0); }
  50%      { transform: rotate(13deg) translateY(-12px); }
}
/* el mateix traç, en blanc, per sobre del fons rosa */
.ralla--clara {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M5 14C55 6 92 17 143 10c48-6 85 6 152-1' stroke='%23ffffff' stroke-width='11' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* ---------- Tira de mitjans i dades per a premsa ---------- */
.mes-mitjans {
  margin-bottom: 18px; padding: 24px 28px;
  background: rgba(255, 255, 255, .07); border-radius: 22px;
  text-align: center;
}
.mes-mitjans h3 {
  margin: 0 0 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pink-clar);
}
.mes-mitjans p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.7; opacity: .8; }
.mes-mitjans i { font-style: italic; font-weight: 500; opacity: .85; }

.permitjans {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px;
  padding: 30px 32px;
  background: rgba(255, 255, 255, .07); border-radius: 22px;
}
.permitjans h3 {
  margin: 0 0 18px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pink-clar);
}
.fitxa { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 14.5px; }
.fitxa dt { font-weight: 500; opacity: .55; }
.fitxa dd { margin: 0; font-weight: 700; }
.permitjans__cta { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.permitjans__cta p { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: .75; }

/* ---------- Xifres ---------- */
/* Més ample que la resta de la secció: són quatre columnes de xifres
   grosses i a 1200 px anaven escanyades. */
.xifres { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter) 12vh; text-align: center; }
.xifres__title {
  margin: 0 0 5vh;
  font-size: max(1.5rem, min(3.4vw, 2.6rem, 5.4vh)); font-weight: 800; letter-spacing: -0.035em;
}
/* Sense caixes: els números són la tipografia. Separats per una ratlla fina,
   que és tot el que cal per llegir-los com una taula. */
/* «minmax(0, 1fr)» i no «1fr» a seques: el mínim d'un «1fr» és el contingut,
   i les columnes sortien de quatre amplades diferents (269, 193, 313, 313).
   Amb el mínim a zero es reparteixen de debò i la filera queda quadrada. */
.xifres__list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xifres__list li { padding: 10px 18px; border-left: 1px solid var(--line); }
.xifres__list li:first-child { border-left: 0; }
.xifres__list b {
  display: block;
  font-size: max(1.9rem, min(4.7vw, 4.6rem, 8.4vh)); font-weight: 800;
  letter-spacing: -0.055em; line-height: 1;
  font-variant-numeric: tabular-nums;     /* no ballen mentre compten */
  /* Una xifra no es parteix mai. El «+1 M» porta un espai pel mig i, com que
     totes quatre columnes fan la mateixa amplada i la seva és la més curta
     de contingut, en pantalla ampla se li trencava: el «M» queia a la línia
     de sota, aquella casella es feia el doble d'alta i tota la filera de
     peus deixava d'estar a la mateixa alçada. */
  white-space: nowrap;
  color: var(--pink);
}
.xifres__list span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.4; opacity: .72; }
.xifres__list i { font-style: italic; }
.xifres__nota { margin: 0; font-size: 12.5px; opacity: .5; }

/* ---------- La píndola que segueix el cursor ----------
   Només amb ratolí: en tàctil no hi ha cursor i seria una nosa. */
.punter {
  position: fixed; left: 0; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  padding: 11px 18px;
  background: var(--pink); color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 10px 22px rgba(96, 44, 72, .3);
  pointer-events: none;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.4);
  transition: opacity .2s var(--ease-out), transform .3s var(--spring);
}
.punter.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
@media (hover: none) { .punter { display: none; } }

/* ---------- Peu ---------- */
.foot {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) 90px;
  display: flex; justify-content: space-between; font-size: 14px; color: var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* a una columna l'essa no es pot fer; els quadres s'alternen igualment de
     costat i segueixen encongint, que és el que explica la història */
  .escena { grid-template-columns: 1fr; gap: 22px; }
  .escena:nth-child(even) .escena__quadre { order: 0; }
  .escena:nth-child(even) .escena__text { order: 0; justify-self: start; }
  .escena__quadre { justify-content: flex-start; }
  .escena:nth-child(even) .escena__quadre { justify-content: flex-end; }
  /* el topall és 92% i no 100%: la motllura de fusta va per box-shadow i
     sobresurt de la caixa, així que si el quadre omplís tot es tallaria */
  .jo-zona .quadre { width: calc((.6 + var(--mida, 1) * .32) * 100%); }
  .escena__text { max-width: none; }
  .fites { grid-template-columns: repeat(2, 1fr); }
  .fita--gran .fita__link { flex-direction: column; }
  .fita--gran .fita__img { width: 100%; aspect-ratio: 3/2; }
  .fita--gran .fita__cos { padding: 26px 140px 26px 26px; }
  .canco { grid-template-columns: 96px 1fr; }
  .canco__nota { grid-column: 2; }
  .xifres__list { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .xifres__list li:nth-child(2n+1) { border-left: 0; }
  .permitjans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .jo { height: 165vh; }
  .jo__sticker { width: min(105vh, 155vw); }
  .jo__bloc {
    left: 0; right: 0; width: auto;
    top: 38%;
    padding: 0 var(--gutter);
    text-align: center;
  }
  .jo__title { font-size: clamp(3rem, 16vw, 6rem); }
  .jo__fitxa { margin-left: auto; margin-right: auto; }
  /* a mòbil el títol va centrat: la xapa se'n va a la dreta, per sota */
  .jo__xapa { left: auto; right: 6vw; top: 61%; }
  .fites { grid-template-columns: 1fr; }
  .fita--gran { grid-column: span 1; }
  .fita--gran .fita__cos { padding: 24px 86px 28px 24px; }
  .fita--ample .fita__link { flex-direction: column; }
  .fita--ample .fita__img { width: 100%; aspect-ratio: 3/2; }
  .fita--ample .fita__cos { padding: 24px; }
  .fita--ample .fita__cita { max-width: none; }
  .fita__sticker { width: 100px; right: 12px; bottom: -8px; }
  .foot { flex-direction: column; gap: 8px; }
}

/* Sense animacions: el sticker es queda petit i el títol visible des del principi */
@media (prefers-reduced-motion: reduce) {
  .jo { height: auto; }
  .jo__sticky { height: auto; padding: 14vh 0 6vh; }
  .jo__sticker { position: static; width: min(340px, 70vw); transform: rotate(-4deg); }
  .jo__bloc {
    position: static; opacity: 1; transform: none;
    width: auto; max-width: 42ch; margin: 22px auto 0; text-align: center;
  }
  .jo__avall { display: none; }
  .jo__fitxa { margin-left: auto; margin-right: auto; }
  .jo__xapa {
    position: static; opacity: 1; animation: none;
    justify-items: center; width: max-content; margin: 26px auto 0;
    transform: rotate(-3deg);
  }
}