/* =========================================================
   La portada, part de sota: el disseny de la Neus (04/10/2026)
   És la seva css/linia.css SENCERA, però amb cada selector tancat dins de
   .landing-cos (convertida per un script): així vesteix només el bloc nou
   de sota la foto i no toca ni el capçal, ni el menú, ni la resta del lloc
   (els seus canvis de color i de lletra no s'apliquen enlloc més). Dels
   seus tokens se n'han tret els que canviaven els nostres colors (tinta,
   taronja, rosa i fons): aquí dins la tinta és la nostra. Sense els blocs
   de «reduir moviment». Si la Neus en fa una versió nova, es torna a
   convertir; no s'hi toca a mà.
   ========================================================= */
.landing-cos {
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.25, 1, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.32, 0.42, 1);
  --tinta-p: var(--tinta);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   MARKOS AMB K — LA LÍNIA
   Una sola capa per sobre dels fulls de sempre (main, shows, show, jo,
   pagina...). Hi ha tot el que fa que la web sigui una sola cosa:

     · UNA tinta (lila fosca) i UN accent (el rosa de festa). Fora el
       marró i el taronja que tenia la meitat de la web.
     · UNA lletra: l'Archivo. Els titulars, una mica més amples
       (font-stretch), que és el que els dona aire de cartell de festa major.
     · Les peces de la marca: el títol en dos colors amb el cap d'ell a
       sobre, el tiquet («Contracta'm», «Escriu-me»), els adhesius, la cinta,
       el paper (retalls, entrades, esquinçat).

   Guia escrita: LINEA-DE-DISENO.md
   ===================================================================== */
/* ============================ Els tokens ============================ */
.landing-cos {
  --tinta-p: #2b1b33;
  --pink: #d6427f;               /* l'únic color fort */
  --pink-deep: #b32d66;
  --muted: #8f7086;
  --crema-p: #fff7f4;            /* el paper: bafarades, tiquets, retalls */
  --rosa-marca: color-mix(in srgb, #d6427f 22%, transparent);
  --ombra-p: 0 18px 40px -18px rgba(96, 44, 72, .38);   /* ombres tenyides, mai negres */
  --molla: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);   /* el marge dels costats, a totes les pàgines */
}
/* ====================== Una sola lletra a tot arreu ====================== */
.landing-cos,
.landing-cos .navmenu__nom,
.landing-cos .navmenu__bafarada,
.landing-cos .label text,
.landing-cos .expo__lead,
.landing-cos .subsol__text,
.landing-cos .pagina,
.landing-cos .legal {
  font-family: var(--font);
}
.landing-cos .navmenu__nom { font-stretch: 100%; font-weight: 700; letter-spacing: -0.04em; }
/* on ets: la fila del menú de la pàgina actual, en rosa */
.landing-cos .navmenu__fila[aria-current="page"] .navmenu__nom { color: var(--pink); }
/* el focus de teclat, igual a tot arreu i visible */
.landing-cos a:focus-visible,
.landing-cos button:focus-visible,
.landing-cos select:focus-visible,
.landing-cos input:focus-visible {
  outline: 3px solid var(--pink); outline-offset: 3px;
}
/* ==================== Portada: Qui soc, xifres i cinta ==================== */
.landing-cos .xifres__title { font-family: var(--font); font-weight: 600; letter-spacing: -0.04em; color: var(--tinta); }
/* les xifres, cadascuna en una nota de paper enganxada amb cinta, totes
   una mica tortes: com retalls enganxats a la paret del camerino */
.landing-cos .jo-zona .xifres__list { gap: clamp(16px, 2.4vw, 32px); }
.landing-cos .jo-zona .xifres__list li {
  position: relative;
  border: 0 !important;
  padding: 1.6em 1.2em 1.3em;
  background: var(--crema-p);
  box-shadow: var(--ombra-p);
}
.landing-cos .jo-zona .xifres__list li::before {
  content: ""; position: absolute; top: -11px; left: 50%;
  width: 74px; height: 22px;
  transform: translateX(-50%) rotate(-4deg);
  background: color-mix(in srgb, var(--pink) 28%, rgba(255, 255, 255, .55));
}
.landing-cos .jo-zona .xifres__list li:nth-child(1) { transform: rotate(-2deg); }
.landing-cos .jo-zona .xifres__list li:nth-child(2) { transform: rotate(1.5deg) translateY(8px); }
.landing-cos .jo-zona .xifres__list li:nth-child(3) { transform: rotate(-1deg); }
.landing-cos .jo-zona .xifres__list li:nth-child(4) { transform: rotate(2deg) translateY(6px); }
.landing-cos .jo-zona .xifres__list b { font-weight: 700; letter-spacing: -0.04em; }
/* els tres botons de la portada al mòbil: tiquets de paper, no píndoles */
.landing-cos .menu { gap: 12px; }
.landing-cos .menu a {
  padding: 12px 18px;
  border: 0; border-radius: 6px;
  background: var(--crema-p); color: var(--tinta);
  box-shadow: var(--ombra-p);
  font-family: var(--font); font-stretch: 100%; font-weight: 700;
  font-size: 15px; letter-spacing: -0.02em;
  text-transform: lowercase;
  transition: transform .4s var(--molla);
}
.landing-cos .menu a::first-letter { text-transform: uppercase; }
.landing-cos .menu a:nth-child(1) { transform: rotate(-2deg); }
.landing-cos .menu a:nth-child(2) { transform: rotate(1.5deg); }
.landing-cos .menu a:nth-child(3) { transform: rotate(-1deg); }
.landing-cos .menu a:active { background: var(--pink); color: #fff; }
/* ===================== Pàgines de text (legals) =====================
   La mateixa columna de 980 px que la resta (abans anaven arrambades a
   l'esquerra amb un marge propi), el text a una amplada de lectura i la tinta
   de sempre en lloc del marró. Fora el rètol petit de dalt («markos amb k»):
   no diu res que el logo no digui. */
.landing-cos .pagina .full {
  max-width: min(980px, 100% - var(--gutter, 32px) * 2);
  margin: 0 auto;
  padding-left: 0; padding-right: 0;
}
.landing-cos .legal > * { max-width: 64ch; }
.landing-cos .legal .full__eyebrow { display: none; }
.landing-cos .pagina h1,
.landing-cos .legal h1,
.landing-cos .legal h2 {
  font-family: var(--font); font-stretch: 100%;
  letter-spacing: -0.045em; color: var(--tinta);
}
.landing-cos .legal h2 { font-weight: 600; }
.landing-cos .legal__title { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; font-stretch: 100%; line-height: 1.02; }
.landing-cos .legal p,
.landing-cos .legal__fitxa li,
.landing-cos .full__text { color: color-mix(in srgb, var(--tinta) 82%, transparent); }
.landing-cos .legal__data { color: color-mix(in srgb, var(--tinta) 55%, transparent); }
.landing-cos .legal a { color: var(--pink-deep); }
.landing-cos .legal__pendent { background: var(--pink); border-radius: 3px; }
.landing-cos .full__back { border-radius: 6px; background: var(--tinta); }
.landing-cos .full__back:hover { background: var(--pink); }
/* ================== El meu show, Contractació, Premsa ================== */
/* La lletra dels titulars: la mateixa Archivo, una mica més ampla. És el que
   la fa semblar un cartell de festa major sense canviar de família. */
/* ---------- 2. El vídeo: més presència i la mà que assenyala ---------- */
.landing-cos .peli__marc {
  overflow: visible;                         /* la mà surt fora del marc */
  box-shadow: var(--ombra-p);
}
.landing-cos .peli__facana { border-radius: inherit; overflow: hidden; }
.landing-cos .peli__nom { border-radius: 0 0 clamp(16px, 2vw, 30px) clamp(16px, 2vw, 30px); }
.landing-cos .peli__ma {
  position: absolute; z-index: 2;
  left: -7%; bottom: -10%;
  width: clamp(90px, 13vw, 190px); height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 14px 20px rgba(96, 44, 72, .25));
  pointer-events: none;
  transition: transform .6s var(--molla);
}
.landing-cos .peli__marc:hover .peli__ma { transform: rotate(-2deg) translate(10px, -10px); }
/* quan ja hi ha el reproductor, la mà s'aparta */
.landing-cos .peli__marc:has(iframe) .peli__ma { opacity: 0; transition: opacity .3s; }
@media (max-width: 760px) {
.landing-cos .peli__ma { display: none; }
}
/* ---------- 3. La tira: com fotos enganxades ---------- */
.landing-cos .clip { box-shadow: var(--ombra-p); transition: transform .55s var(--molla); }
.landing-cos .clip:nth-child(odd):hover { transform: translateY(-8px) rotate(-1.6deg); }
.landing-cos .clip:nth-child(even):hover { transform: translateY(-8px) rotate(1.6deg); }
/* ---------- 4. Què és el show: un cartell, no una plantilla ----------
   Tres idees de les skills (design-taste / high-end / redesign):
     · tipografia i imatge barrejades: els adhesius d'ell van DINS la frase,
       com en un cartell o un jeroglífic;
     · retícula trencada: les quatre veus del públic s'enganxen a les vores
       de la frase i la sobrepassen, cadascuna a la seva;
     · el material de la marca: el peu és una nota de programa de festa
       major, de paper i amb cinta adhesiva. */
.landing-cos .cartell {
  position: relative;
  max-width: min(1040px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 150px) 0 clamp(90px, 14vh, 150px);
}
.landing-cos .cartell__frase {
  position: relative; z-index: 1;
  margin: 0 auto; max-width: 17.5em;
  font-family: var(--font);
  font-size: clamp(1.8rem, 4.6vw, 3.9rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.16;
  color: var(--tinta);
  text-align: center; text-wrap: balance;
}
.landing-cos .cartell__frase em { font-style: normal; color: var(--pink); }
/* els adhesius dins del text: de la mida de la lletra, una mica torts, amb
   la vora blanca, i trepitjant les paraules del costat */
.landing-cos .enganxa { white-space: nowrap; }
.landing-cos .enganxa__img {
  display: inline-block;
  height: 1.25em; width: auto;
  vertical-align: -0.28em;
  margin: 0 -.06em 0 .12em;
  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 8px 12px rgba(96, 44, 72, .25));
  transition: transform .5s var(--molla);
}
.landing-cos .enganxa__img--cap { transform: rotate(-8deg); height: 1.3em; }
.landing-cos .enganxa__img--cal { height: .82em; transform: rotate(8deg); vertical-align: -0.08em; margin-left: .14em; }
.landing-cos .enganxa__img--mic { transform: rotate(28deg); height: 1.15em; margin-left: .05em; margin-right: .08em; }
.landing-cos .cartell:hover .enganxa__img--cap { transform: rotate(6deg) scale(1.06); }
.landing-cos .cartell:hover .enganxa__img--mic { transform: rotate(10deg) scale(1.06); }
/* les veus: bafarades petites que s'enganxen a les cantonades i a les vores,
   per fora del bloc de text i a diferents altures, com posades a mà */
.landing-cos .cartell__veus { list-style: none; margin: 0; padding: 0; }
.landing-cos .veu {
  position: absolute; z-index: 2;
  padding: .55em 1em .6em;
  border-radius: 1em;
  background: var(--crema-p); color: var(--tinta);
  font-family: var(--font); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(.86rem, 1.2vw, 1rem);
  white-space: nowrap;
  box-shadow: var(--ombra-p);
  transform: rotate(var(--r));
}
.landing-cos .veu::before {                      /* les cometes, en rosa i grans */
  content: "“"; margin-right: .15em;
  color: var(--pink); font-weight: 700; font-size: 1.4em; line-height: 0; vertical-align: -.28em;
}
.landing-cos .veu::after {                       /* la cua */
  content: ""; position: absolute; width: 14px; height: 12px; background: inherit;
}
.landing-cos .veu--1 { top: 4%;  left: -1%;  --r: -5deg; }
.landing-cos .veu--2 { top: 11%; right: -3%; --r: 4deg; }
.landing-cos .veu--3 { bottom: 9%; left: 6%; --r: 3deg; }
.landing-cos .veu--4 { bottom: 37%; right: -8%; --r: -3deg; background: var(--pink); color: #fff; }
.landing-cos .veu--4::before { color: #fff; }
.landing-cos .veu--1::after { left: 22%;  bottom: -8px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.landing-cos .veu--2::after { right: 22%; bottom: -8px; clip-path: polygon(0 0, 100% 0, 70% 100%); }
.landing-cos .veu--3::after { left: 26%;  top: -8px;    clip-path: polygon(30% 0, 100% 100%, 0 100%); }
.landing-cos .veu--4::after { left: 18%; top: -8px;     clip-path: polygon(30% 0, 100% 100%, 0 100%); }
/* la nota del programa */
.landing-cos .nota-wrap {
  max-width: min(980px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  margin-top: clamp(-40px, -4vh, -16px);
  padding: 0 0 clamp(40px, 7vh, 80px);
  display: flex; justify-content: flex-end;
}
.landing-cos .nota {
  position: relative;
  margin: 0 4% 0 0; max-width: 25em;
  padding: 1.5em 1.6em 1.4em;
  background: var(--crema-p);
  color: color-mix(in srgb, var(--tinta) 85%, transparent);
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6;
  box-shadow: var(--ombra-p);
  transform: rotate(1.6deg);
}
/* el tros de cinta adhesiva que l'aguanta */
.landing-cos .nota::before {
  content: ""; position: absolute; top: -13px; left: 50%;
  width: 92px; height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  background: color-mix(in srgb, var(--pink) 28%, rgba(255, 255, 255, .55));
  box-shadow: 0 1px 2px rgba(96, 44, 72, .15);
}
@media (max-width: 760px) {
.landing-cos .cartell { padding-top: 56px; padding-bottom: 40px; }
.landing-cos .cartell__veus { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; margin-top: 28px; }
.landing-cos .veu { position: relative; inset: auto; white-space: normal; }
.landing-cos .veu::after { display: none; }
.landing-cos .nota-wrap { justify-content: center; margin-top: 30px; }
.landing-cos .nota { margin: 0; }
}
/* ---------- 5. El tancament: un cartell i un tiquet ----------
   La pregunta, gran i a l'esquerra; a la dreta, el botó fet com el tiquet
   d'una rifa de festa major (les mitges llunes als costats i la ratlla de
   punts). Ell, de reüll, mirant la pregunta des de dalt. */
.landing-cos .crida {
  position: relative;
  max-width: min(980px, 110vh); margin: 0 auto;
  padding: 2vh var(--gutter) 16vh;
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; column-gap: clamp(24px, 5vw, 72px);
  text-align: left;
}
.landing-cos .crida__text {
  grid-column: 1; grid-row: 1 / span 2; align-self: end;
  margin: 0; max-width: 13em;
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1.1;
  color: var(--tinta-p);
}
.landing-cos .crida__text em { font-style: normal; color: var(--pink); }
.landing-cos .crida__boto {
  grid-column: 2; grid-row: 2;
  position: relative;
  display: inline-flex; align-items: center; justify-self: start;
  background: var(--pink); color: #fff; text-decoration: none;
  gap: .7em;
  padding: 1em 1.9em;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  border-radius: 6px;
  font-stretch: 100%; font-weight: 700; letter-spacing: -0.01em;
  /* les dues mitges llunes del tiquet */
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
  transform: rotate(-3deg);
  transition: transform .5s var(--molla), background .3s;
}
/* la ratlla de punts de dins */
.landing-cos .crida__boto::before {
  content: ""; position: absolute; inset: 6px 18px;
  border: 1.5px dashed rgba(255, 255, 255, .55); border-radius: 3px;
  pointer-events: none;
}
.landing-cos .crida__fletxa { display: inline-grid; }
.landing-cos .crida__fletxa svg { width: 1em; height: 1em; transition: transform .45s var(--molla); }
.landing-cos .crida__boto:hover { transform: rotate(0deg) translateY(-4px); background: var(--pink-deep); }
.landing-cos .crida__boto:hover .crida__fletxa svg { transform: translate(3px, -3px); }
.landing-cos .crida__boto:active { transform: rotate(0deg) scale(.97); }
.landing-cos .crida__boto:focus-visible { outline: 3px solid var(--tinta-p); outline-offset: 6px; }
@media (max-width: 640px) {
.landing-cos .crida { grid-template-columns: 1fr; row-gap: 1.4em; }
.landing-cos .crida__text { grid-column: 1; grid-row: 1; }
.landing-cos .crida__boto { grid-column: 1; grid-row: 2; justify-self: start; }
}
/* =====================================================================
   CONTRACTACIÓ — la bafarada i dues entrades de festa major
   ===================================================================== */
.landing-cos .contracta {
  max-width: min(980px, 100% - var(--gutter) * 2);
  text-align: left;
}
/* el «Parlem!» ja no és una nota petita: és la resposta, gran i en rosa,
   dins la mateixa bafarada */
.landing-cos .contracta-page .contracta__segona {
  display: block;
  margin-top: .25em;
  color: var(--pink);
  font-size: 1.45em;
  letter-spacing: -0.05em;
}
.landing-cos .entrades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  justify-content: stretch;
  list-style: none; margin: 0; padding: 0;
}
.landing-cos .entrada {
  --forat: 14px;
  position: relative;
  display: grid !important;
  grid-template-columns: 38% 1fr;
  align-items: center; justify-items: start;
  min-height: clamp(150px, 16vw, 190px);
  background: var(--crema-p) !important;
  border-radius: 10px !important;
  box-shadow: var(--ombra-p) !important;
  /* les mitges llunes a dalt i a baix, on es talla la matriu */
  -webkit-mask:
    radial-gradient(circle at 38% 0, transparent var(--forat), #000 calc(var(--forat) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 38% 100%, transparent var(--forat), #000 calc(var(--forat) + .5px)) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle at 38% 0, transparent var(--forat), #000 calc(var(--forat) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 38% 100%, transparent var(--forat), #000 calc(var(--forat) + .5px)) bottom / 100% 51% no-repeat;
  transition: transform .5s var(--molla);
}
.landing-cos .entrada:nth-child(1) { transform: rotate(-1.4deg); }
.landing-cos .entrada:nth-child(2) { transform: rotate(1.1deg) translateY(14px); }
.landing-cos .entrada:hover { transform: rotate(0) translateY(-4px); }
/* la ratlla de punts entre la matriu i la resta */
.landing-cos .entrada::before {
  content: ""; position: absolute; top: 18px; bottom: 18px; left: 38%;
  border-left: 2px dashed color-mix(in srgb, var(--pink) 45%, transparent);
}
.landing-cos .entrada__matriu.agencia__logo {
  width: 100%; height: 100%; margin: 0;
  padding: 18% 16%;
  display: grid; place-items: center;
}
.landing-cos .entrada__matriu a { width: 100%; height: clamp(54px, 6vw, 80px); }
.landing-cos .entrada__cos { padding: 0 clamp(16px, 2.4vw, 32px); min-width: 0; }
.landing-cos .entrada .agencia__nom {
  font-stretch: 100%;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: -0.045em; line-height: 1;
  margin-bottom: .35em; color: var(--tinta-p);
}
.landing-cos .entrada .agencia__correu {
  font-size: clamp(.86rem, 1.25vw, 1rem);
  overflow-wrap: anywhere;
  border-bottom: 2px solid color-mix(in srgb, var(--pink) 35%, transparent);
}
.landing-cos .entrada .agencia__correu:hover { border-bottom-color: var(--pink); }
.landing-cos .contracta-page .contracta__peu {
  position: relative;
  width: fit-content; max-width: 100%;
  margin: clamp(64px, 10vh, 110px) 0 0 auto;
  padding: 1.1em 1.4em;
  background: var(--crema-p);
  box-shadow: var(--ombra-p);
  transform: rotate(-1.5deg);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: color-mix(in srgb, var(--tinta-p) 82%, transparent);
}
.landing-cos .contracta-page .contracta__peu::before {
  content: ""; position: absolute; top: -11px; left: 50%;
  width: 74px; height: 22px;
  transform: translateX(-50%) rotate(3deg);
  background: color-mix(in srgb, var(--pink) 28%, rgba(255, 255, 255, .55));
}
@media (max-width: 700px) {
.landing-cos .entrades { grid-template-columns: 1fr; }
.landing-cos .entrada:nth-child(2) { transform: rotate(1.1deg); }
}
/* =====================================================================
   PREMSA — retalls de diari de debò, enganxats al suro
   Abans era una taula amb una ratlla sota cada fila (és el que fan totes
   les plantilles). Ara cada notícia és un retall de paper, una mica tort,
   amb la mateixa lletra que la resta del lloc.
   ===================================================================== */
/* la mateixa columna que «El meu show» i «Contractació»: 980 px */
.landing-cos .premsa-page .premsa { max-width: min(980px, 100% - var(--gutter) * 2); }
.landing-cos .premsa-page .retalls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px) clamp(22px, 3vw, 40px);
  align-items: start;
}
.landing-cos .premsa-page .retall,
.landing-cos .premsa-page .retall:last-child { border: 0; }
.landing-cos .premsa-page .retall > a {
  display: flex; flex-direction: column; gap: .9em;
  height: 100%;
  padding: clamp(22px, 2.6vw, 34px);
  padding-top: calc(clamp(22px, 2.6vw, 34px) + 6px);
  padding-bottom: calc(clamp(22px, 2.6vw, 34px) + 6px);
  background: var(--crema-p);
  color: var(--tinta-p);
  /* les vores de dalt i de baix, estripades: un retall, no una targeta */
  clip-path: polygon(
    0 5px, 4% 1px, 9% 4px, 15% 0, 21% 5px, 27% 2px, 33% 6px, 40% 1px, 46% 4px, 53% 0, 59% 5px, 66% 2px, 72% 6px, 79% 1px, 85% 4px, 91% 0, 96% 5px, 100% 2px,
    100% calc(100% - 4px), 95% 100%, 89% calc(100% - 5px), 83% calc(100% - 1px), 77% calc(100% - 6px), 70% calc(100% - 2px), 64% 100%, 57% calc(100% - 5px), 50% calc(100% - 1px), 44% calc(100% - 6px), 37% calc(100% - 2px), 30% 100%, 24% calc(100% - 4px), 17% calc(100% - 1px), 11% calc(100% - 6px), 5% calc(100% - 2px), 0 100%);
  transition: transform .5s var(--molla);
}
/* amb el retall, l'ombra va a la «li» (si no, el clip-path se la menjaria) */
.landing-cos .premsa-page .retall { filter: drop-shadow(0 14px 18px rgba(96, 44, 72, .22)); }
/* cadascun tort a la seva manera, com enganxats a mà */
.landing-cos .premsa-page .retall:nth-child(4n+1) > a { transform: rotate(-.9deg); }
.landing-cos .premsa-page .retall:nth-child(4n+2) > a { transform: rotate(.7deg) translateY(18px); }
.landing-cos .premsa-page .retall:nth-child(4n+3) > a { transform: rotate(.5deg); }
.landing-cos .premsa-page .retall:nth-child(4n+4) > a { transform: rotate(-.6deg) translateY(18px); }
.landing-cos .premsa-page .retall > a:hover { transform: rotate(0) translateY(-6px); }
.landing-cos .premsa-page .retall__meta { display: flex; gap: 1em; align-items: baseline; flex-wrap: wrap; padding: 0; }
.landing-cos .premsa-page .retall__mitja,
.landing-cos .premsa-page .retall__data,
.landing-cos .premsa-page .retall__anar,
.landing-cos .premsa-page .passa__compte { font-family: "Archivo", system-ui, sans-serif; }
.landing-cos .premsa-page .retall__mitja {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: var(--pink);
  padding: .3em .55em .25em; border-radius: 2px;
}
.landing-cos .premsa-page .retall__data { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: color-mix(in srgb, var(--tinta-p) 60%, transparent); }
.landing-cos .premsa-page .retall__titular {
  font-family: "Archivo", system-ui, sans-serif; font-stretch: 100%;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.12;
}
.landing-cos .premsa-page .retall > a:hover .retall__titular { text-decoration: none; }
/* la cita, subratllada amb retolador en lloc de la barra lateral */
.landing-cos .premsa-page .retall__frase {
  margin: .7em 0 0; padding: 0; border: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-style: normal; font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.5;
}
.landing-cos .premsa-page .retall__frase {
  text-decoration: underline;
  text-decoration-color: var(--rosa-marca);
  text-decoration-thickness: .42em;
  text-underline-offset: -.26em;
  text-decoration-skip-ink: none;
}
.landing-cos .premsa-page .retall__anar {
  margin-top: auto; justify-self: start; align-self: flex-start;
  display: inline-flex; gap: .45em; align-items: center;
  padding: 0 0 .2em; border-bottom: 2px solid currentColor;
  font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.landing-cos .premsa-page .retall__anar svg { width: 14px; height: 14px; }
.landing-cos .premsa-page .passa { margin-top: clamp(48px, 8vh, 90px); }
@media (max-width: 760px) {
.landing-cos .premsa-page .retalls { grid-template-columns: 1fr; }
.landing-cos .premsa-page .retall:nth-child(n) > a { transform: rotate(0); }
}
/* ---------- Menys moviment, si ho demana el sistema ---------- */
/* ======================= Les peces de la V2 ======================= */
/* el rosa també al passar per sobre del menú (abans hi havia un taronja) */
.landing-cos .navmenu__boto:hover { background: var(--pink); }
/* =========================== A. Els títols ===========================
   El mateix llenguatge que el cartell de «Què és el show»: lletra gran d'un
   pes mitjà, aire entre ratlles, UNA part en rosa, i el cap d'ell enganxat
   DINS de la frase (no a sobre). El nom de la secció, si cal, és una
   bafarada petita enganxada a la cantonada del títol. */
.landing-cos .titol {
  position: relative;
  max-width: min(1100px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(110px, 16vh, 170px) 0 clamp(40px, 7vh, 72px);
  text-align: center;
}
.landing-cos .titol__h {
  position: relative;
  margin: 0 auto; max-width: 16em;
  width: fit-content;            /* el títol s'ajusta al text: la bafarada queda enganxada a la primera paraula */
  font-family: var(--font);
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  font-weight: 600; font-stretch: 100%;
  letter-spacing: -0.04em; line-height: 1.1;
  color: var(--tinta);
  text-wrap: balance;
}
.landing-cos .titol__h em { font-style: normal; color: var(--pink); }
/* la bafarada-etiqueta: dins del títol, enganxada a la cantonada */
.landing-cos .veu--etiqueta {
  top: -1.45em; left: 2%;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  --r: -6deg;
  background: var(--pink); color: #fff;
}
.landing-cos .veu--etiqueta::before { content: none; }
.landing-cos .veu--etiqueta::after { left: 24%; bottom: -8px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
/* a Premsa i Contractació el títol ja fa el que feia la bafarada */
.landing-cos .contracta-page .contracta { padding-top: 0; }
/* a Premsa el títol viu dins el contenidor, que ja porta el coixí de dalt */
.landing-cos .titol--premsa { padding-top: clamp(16px, 3vh, 32px); max-width: none; }
/* ======================= D. El cap que s'obre ======================= */
.landing-cos .show-page .peli { padding-top: 0; }
.landing-cos .cap-obert {
  position: relative;
  width: clamp(120px, 13vw, 190px);
  margin: 0 auto -.4em;
  z-index: 1;
}
.landing-cos .cap-obert__cap {
  position: relative; z-index: 2;
  display: block; width: 100%; height: auto;
  transform: rotate(-5deg);
  filter:
    drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff)
    drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff)
    drop-shadow(0 14px 22px rgba(96, 44, 72, .28));
  animation: capBot .5s var(--molla) .15s both;
}
/* les coses surten de dins del cap, en ventall, i es queden surant */
.landing-cos .cap-obert__obj {
  position: absolute; z-index: 1;
  left: 50%; top: 40%;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(96, 44, 72, .25));
  opacity: 0;
  animation:
    surt .9s var(--molla) var(--d) forwards,
    sura 4s ease-in-out calc(var(--d) + .9s) infinite;
}
.landing-cos .cap-obert__obj--mic { --x: -120%; --y: -78%;  --r: -28deg; --d: .55s; width: 34%; }
.landing-cos .cap-obert__obj--cascos { --x: -175%; --y: -8%;   --r: -14deg; --d: .7s;  width: 66%; }
.landing-cos .cap-obert__obj--k { --x: 40%;   --y: -110%; --r: 16deg;  --d: .85s; width: 34%; }
.landing-cos .cap-obert__obj--cal { --x: 95%;   --y: -22%;  --r: 12deg;  --d: 1s;   width: 48%; }
@keyframes capBot {
  0%   { transform: rotate(-5deg) scale(.6); opacity: 0; }
  100% { transform: rotate(-5deg) scale(1);  opacity: 1; }
}
@keyframes surt {
  0%   { opacity: 0; transform: translate(-50%, 0) rotate(0) scale(.3); }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
@keyframes sura {
  0%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  50%      { transform: translate(var(--x), calc(var(--y) - 8%)) rotate(calc(var(--r) * .6)); }
}
/* ===================== E. L'esquinçat de paper ===================== */
.landing-cos .paper {
  position: relative;
  margin-top: 46px;
  background: var(--crema-p);
}
.landing-cos .paper::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 46px;
  background: var(--crema-p);
  clip-path: polygon(0 100%, 0 62%, 3% 48%, 6% 66%, 10% 40%, 14% 58%, 17% 30%, 21% 52%, 25% 36%, 29% 60%, 33% 28%, 37% 46%, 41% 22%, 45% 50%, 49% 34%, 53% 56%, 57% 26%, 61% 44%, 65% 18%, 69% 40%, 73% 24%, 77% 48%, 81% 20%, 85% 42%, 89% 14%, 93% 38%, 97% 10%, 100% 30%, 100% 100%);
}
/* la vora del paper, una mica més fosca: la fibra de l'estripada */
.landing-cos .paper::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: calc(100% - 2px);
  height: 46px;
  background: color-mix(in srgb, var(--crema-p) 80%, var(--pink) 20%);
  clip-path: polygon(0 66%, 3% 52%, 6% 70%, 10% 44%, 14% 62%, 17% 34%, 21% 56%, 25% 40%, 29% 64%, 33% 32%, 37% 50%, 41% 26%, 45% 54%, 49% 38%, 53% 60%, 57% 30%, 61% 48%, 65% 22%, 69% 44%, 73% 28%, 77% 52%, 81% 24%, 85% 46%, 89% 18%, 93% 42%, 97% 14%, 100% 34%, 100% 30%, 97% 10%, 93% 38%, 89% 14%, 85% 42%, 81% 20%, 77% 48%, 73% 24%, 69% 40%, 65% 18%, 61% 44%, 57% 26%, 53% 56%, 49% 34%, 45% 50%, 41% 22%, 37% 46%, 33% 28%, 29% 60%, 25% 36%, 21% 52%, 17% 30%, 14% 58%, 10% 40%, 6% 66%, 3% 48%, 0 62%);
  z-index: -1;
}
.landing-cos .paper .crida { padding-top: clamp(56px, 10vh, 110px); padding-bottom: clamp(72px, 12vh, 130px); }
/* sobre paper el cap ja no necessita la vora gruixuda per destacar */
.landing-cos .paper + .peu,
.landing-cos .show-page .peu { background: var(--crema-p); }
/* ================= F. Els clips, com adhesius enganxats ================= */
.landing-cos .clip { overflow: hidden; }
/* aire a dalt i a baix perquè els torts no quedin retallats per la tira */
.landing-cos .tira__llista { padding-top: 18px; padding-bottom: 26px; }
.landing-cos .clip:nth-child(3n+1) { transform: rotate(-1.4deg); }
.landing-cos .clip:nth-child(3n+2) { transform: rotate(1deg) translateY(10px); }
.landing-cos .clip:nth-child(3n+3) { transform: rotate(-.5deg); }
/* la punta de dalt a la dreta, doblegada */
.landing-cos .clip::after {
  content: "";
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--bg) 50%, #f7ece9 50%, #e4cfcb 100%);
  box-shadow: -3px 3px 6px rgba(96, 44, 72, .25);
  border-bottom-left-radius: 6px;
  pointer-events: none;
}
/* ===================== B. «Contracta'm», sempre a mà ===================== */
.landing-cos .nav__contracta {
  position: absolute;
  top: 18px;
  right: calc(clamp(16px, 4vw, 48px) + 46px + 10px);
  z-index: 2;
  display: inline-flex; align-items: center;
  height: 46px; padding: 0 1.25em;
  border-radius: 6px;
  background: var(--pink); color: #fff;
  font-family: "Archivo", system-ui, sans-serif; font-stretch: 100%;
  font-weight: 700; font-size: .98rem; letter-spacing: -0.01em;
  text-decoration: none;
  pointer-events: auto;
  /* el mateix tiquet que el botó del tancament, en petit */
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
  transform: rotate(-2deg);
  transition: transform .45s var(--molla), background .25s, opacity .3s;
}
.landing-cos .nav__contracta:hover { transform: rotate(0) translateY(-2px); background: var(--pink-deep); }
.landing-cos .nav__contracta:focus-visible { outline: 3px solid var(--tinta-p); outline-offset: 4px; }
/* a la mateixa pàgina de contractació, i amb el menú obert, no cal */
.landing-cos .nav__contracta[aria-current="page"],
.landing-cos .nav:has(.navmenu__boto[aria-expanded="true"]) .nav__contracta,
.landing-cos .nav__contracta,
.landing-cos .nav__contracta { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
.landing-cos .nav__contracta { height: 40px; top: 21px; font-size: .86rem; padding: 0 1em; }
/* al mòbil, a dalt de tot, el logo sencer ocupa el mig: el botó surt
     quan el logo ja s'ha arronsat a la K */
.landing-cos body:not(.is-scrolled) .nav__contracta { opacity: 0; pointer-events: none; transform: translateY(-8px) rotate(-2deg); }
}
/* =========================== C. Dates =========================== */
.landing-cos .dates-page .gira__head { padding-top: clamp(24px, 4vh, 48px); }
.landing-cos .dates-page .gira__title.titol__h { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.05; }
.landing-cos .dates-page .gira__head { padding-top: clamp(40px, 7vh, 80px); }
.landing-cos .dates-page .veu--etiqueta { top: -.9em; left: 18%; }
.landing-cos .premsa-page .veu--etiqueta { left: 14%; }
.landing-cos .dates-page .shows { max-width: min(980px, 100% - var(--gutter) * 2); margin-left: auto; margin-right: auto; }
/* fora pastilles: una fila, una ratlla fina a sota i prou */
.landing-cos .dates-page .show {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta-p) 14%, transparent);
  padding-left: 0 !important; padding-right: 0 !important;
}
/* les fetes ja no porten píndola grisa; en passar-hi, un full de paper */
.landing-cos .dates-page .show.is-off::after { display: none; }
.landing-cos .dates-page .show::before { border-radius: 6px; background: var(--crema-p); inset: 0 -18px; }
.landing-cos .dates-page .show__date {
  color: var(--pink);
  font-family: "Archivo", system-ui, sans-serif; font-stretch: 100%;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 700; letter-spacing: -0.04em;
}
.landing-cos .dates-page .show__venue {
  color: var(--tinta-p);
  font-family: "Archivo", system-ui, sans-serif; font-stretch: 100%;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; letter-spacing: -0.03em;
}
.landing-cos .dates-page .show__map { background: none !important; color: var(--pink); }
/* el botó, un tiquet; el «Finalitzat», un segell de goma */
.landing-cos .dates-page .show .btn {
  border-radius: 5px;
  font-family: "Archivo", system-ui, sans-serif; font-weight: 700;
}
.landing-cos .dates-page .show .btn--cream { background: var(--pink); color: #fff; }
.landing-cos .dates-page .show.is-off { opacity: .55; }
.landing-cos .dates-page .show.is-off .btn {
  background: none; color: var(--pink-deep);
  border: 2px solid currentColor; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
  transform: rotate(-6deg);
}
.landing-cos .dates-page .show.is-off .show__date { color: color-mix(in srgb, var(--tinta-p) 70%, transparent); }
/* el peu propi de Dates repetia el © que ja porta el peu de tot el lloc */
.landing-cos .dates-page .foot { display: none; }
/* la barra de filtres: paper, no vidre */
.landing-cos .dates-page .filters {
  background: var(--crema-p) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: var(--ombra-p) !important;
  border-radius: 10px !important;
}
.landing-cos .dates-page .chip { background: transparent !important; }
.landing-cos .dates-page .chip--search { background: var(--pink) !important; color: #fff; border-radius: 6px !important; }
/* cada segell, picat a mà: cap d'igual */
.landing-cos .dates-page .show.is-off:nth-child(3n+2) .btn { transform: rotate(4deg); }
.landing-cos .dates-page .show.is-off:nth-child(3n+3) .btn { transform: rotate(-2deg); }
/* ===================== Menys moviment ===================== */
/* al mòbil, la bafarada-etiqueta va a sobre del títol (no a sobre de la
   primera paraula), i «Festour 2026» cap en una ratlla */
@media (max-width: 640px) {
.landing-cos .veu--etiqueta,
.landing-cos .dates-page .veu--etiqueta,
.landing-cos .premsa-page .veu--etiqueta {
    position: relative; top: auto; left: auto;
    display: table; margin: 0 auto .7em;
  }
.landing-cos .dates-page .gira__title.titol__h { font-size: 2.35rem; white-space: nowrap; }
}
/* =====================================================================
   PORTADA: tot el que hi ha a sota de la foto
   Mateix llenguatge de cartell. Ritme après de la web de referència:
   manifest > el directe > (paper) qui és i on és > cita gran > música >
   xifres > crida > adeu amb el cap.
   ===================================================================== */
.landing-cos { position: relative; z-index: 1; background: var(--rosa); }
/* peça genèrica: el tiquet petit per als «Mira...» */
.landing-cos .tiquet {
  position: relative;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.6em;
  border-radius: 6px;
  background: var(--pink); color: #fff;
  font-family: var(--font); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.12rem);
  text-decoration: none;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  transform: rotate(-2deg);
  transition: transform .45s var(--molla), background .25s;
}
.landing-cos .tiquet::before {
  content: ""; position: absolute; inset: 5px 15px;
  border: 1.5px dashed rgba(255, 255, 255, .55); border-radius: 3px;
}
.landing-cos .tiquet::after { content: "\2197"; font-size: .95em; }
.landing-cos .tiquet:hover { transform: rotate(0) translateY(-3px); background: var(--pink-deep); }
/* ---------- 1. El manifest ---------- */
.landing-cos .cartell--portada .veu { white-space: normal; max-width: 14.5em; line-height: 1.3; }
.landing-cos .veu small {
  display: block; margin-top: .3em;
  font-size: .78em; font-weight: 700; letter-spacing: .02em;
  color: var(--pink);
}
.landing-cos .veu--4 small { color: #fff; opacity: .85; }
.landing-cos .cartell--portada .veu--1 { top: 3%; left: 1%; }
.landing-cos .cartell--portada .veu--2 { top: 6%; right: 1%; }
.landing-cos .cartell--portada .veu--3 { bottom: 4%; left: 3%; }
.landing-cos .cartell--portada .veu--4 { bottom: 2%; right: 2%; }
/* ---------- 2. El directe ---------- */
.landing-cos .titol--seccio { padding-top: clamp(30px, 6vh, 70px); padding-bottom: clamp(24px, 4vh, 48px); }
.landing-cos .titol--seccio .titol__h { font-size: clamp(1.9rem, 4.4vw, 3.6rem); }
.landing-cos .directe { padding-bottom: clamp(40px, 8vh, 90px); }
.landing-cos .directe__fotos {
  position: relative;
  max-width: min(1000px, 100% - var(--gutter) * 2);
  height: clamp(300px, 33vw, 430px);
  margin: 0 auto;
}
/* cada foto, una còpia de paper amb vora blanca i la punta doblegada */
.landing-cos .foto {
  position: absolute;
  display: block;
  padding: 8px 8px 0;
  background: #fff;
  box-shadow: var(--ombra-p);
  color: var(--tinta); text-decoration: none;
  transition: transform .5s var(--molla);
}
.landing-cos .foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.landing-cos .foto span { display: block; padding: .55em .2em .7em; font-weight: 700; font-size: clamp(.85rem, 1.15vw, 1rem); }
.landing-cos .foto::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 30px; height: 30px;
  background: linear-gradient(225deg, var(--rosa) 50%, #f4ebe9 50%, #ddc9c5 100%);
  box-shadow: -3px 3px 5px rgba(96, 44, 72, .2);
}
.landing-cos .foto--1 { left: 1%;  top: 14%; width: 23%; transform: rotate(-6deg); }
.landing-cos .foto--2 { left: 25%; top: 0;   width: 27%; transform: rotate(2.5deg); z-index: 2; }
.landing-cos .foto--3 { left: 52%; top: 16%; width: 22%; transform: rotate(-3deg); }
.landing-cos .foto--4 { right: 1%; top: 3%;  width: 21%; transform: rotate(5deg); }
.landing-cos .foto:hover { transform: rotate(0) translateY(-8px) scale(1.03); z-index: 3; }
.landing-cos .directe__obj {
  position: absolute; z-index: 4; height: auto;
  filter: drop-shadow(0 10px 14px rgba(96, 44, 72, .28));
  pointer-events: none;
  animation: suraObj 5s ease-in-out infinite;
}
.landing-cos .directe__obj--mic { width: clamp(46px, 5vw, 70px); left: 22%; top: -6%; --r: -24deg; }
.landing-cos .directe__obj--cascos { width: clamp(110px, 12vw, 170px); right: 22%; bottom: -2%; --r: 10deg; animation-delay: -2s; }
@keyframes suraObj {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50%      { transform: rotate(var(--r)) translateY(-10px); }
}
.landing-cos .directe__peu,
.landing-cos .qui__peu,
.landing-cos .on__peu { text-align: center; margin: clamp(28px, 5vh, 48px) 0 0; }
/* ---------- 3. Sobre paper: qui és i on és ---------- */
.landing-cos .paper--portada { margin-top: 60px; padding-bottom: clamp(60px, 10vh, 110px); }
/* l'esquinçat de sota, per tornar al rosa */
.landing-cos .paper--portada::after {
  bottom: auto; top: 100%; z-index: 1;
  background: var(--crema-p);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 96% 62%, 92% 30%, 87% 70%, 82% 38%, 77% 64%, 72% 26%, 67% 58%, 62% 34%, 57% 72%, 52% 40%, 47% 66%, 42% 30%, 37% 60%, 32% 36%, 27% 70%, 22% 42%, 17% 62%, 12% 28%, 7% 56%, 3% 36%, 0 60%);
}
.landing-cos .paper .nota { background: #fff; }
.landing-cos .qui {
  max-width: min(980px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding-top: clamp(64px, 10vh, 120px);
  display: grid; grid-template-columns: auto 1fr;
  column-gap: clamp(28px, 5vw, 72px); row-gap: 1.6em;
  align-items: center;
}
.landing-cos .qui__cap { grid-row: 1 / span 2; position: relative; }
.landing-cos .qui__cap img {
  display: block; width: clamp(170px, 20vw, 260px); height: auto;
  transform: rotate(-4deg);
  filter:
    drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff)
    drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff)
    drop-shadow(0 18px 26px rgba(96, 44, 72, .28));
}
.landing-cos .qui__bafarada {
  position: absolute; top: -8%; right: -18%;
  margin: 0; padding: .55em 1em;
  border-radius: 1em;
  background: var(--pink); color: #fff;
  font-weight: 700; font-size: clamp(.95rem, 1.3vw, 1.1rem); white-space: nowrap;
  transform: rotate(6deg);
  box-shadow: 0 12px 24px -12px rgba(179, 45, 102, .6);
}
.landing-cos .qui__bafarada::after {
  content: ""; position: absolute; left: 22%; bottom: -8px;
  width: 14px; height: 12px; background: inherit;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
}
.landing-cos .qui .titol__h { margin: 0; text-align: left; font-size: clamp(2rem, 4.6vw, 3.8rem); }
.landing-cos .qui__titol .veu--etiqueta { left: 0; top: -1.6em; }
.landing-cos .qui__nota { margin: 0; justify-self: start; transform: rotate(-1.2deg); max-width: 28em; }
/* l'àlbum de la història: fotos de paper amb cinta, cadascuna torta */
.landing-cos .album {
  list-style: none;
  max-width: min(1080px, 100% - var(--gutter) * 2);
  margin: clamp(56px, 9vh, 100px) auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 2.4vw, 30px) clamp(10px, 1.6vw, 22px);
}
.landing-cos .polaroid { width: clamp(120px, 12.6vw, 158px); }
.landing-cos .polaroid a {
  position: relative; display: block;
  padding: 8px 8px 0; background: #fff;
  box-shadow: var(--ombra-p);
  color: var(--tinta); text-decoration: none;
  transition: transform .45s var(--molla);
}
.landing-cos .polaroid a::before {
  content: ""; position: absolute; top: -10px; left: 50%; z-index: 1;
  width: 62px; height: 20px; transform: translateX(-50%) rotate(-5deg);
  background: color-mix(in srgb, var(--pink) 28%, rgba(255, 255, 255, .55));
}
.landing-cos .polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.landing-cos .polaroid span { display: block; padding: .5em .1em .65em; font-weight: 700; font-size: .95rem; text-align: center; }
.landing-cos .polaroid:nth-child(odd) a { transform: rotate(-3deg); }
.landing-cos .polaroid:nth-child(even) a { transform: rotate(2.5deg) translateY(10px); }
.landing-cos .polaroid:nth-child(3n) a { transform: rotate(-1deg) translateY(-6px); }
.landing-cos .polaroid a:hover { transform: rotate(0) translateY(-6px) scale(1.04); }
/* on és: les properes dates */
.landing-cos .on {
  max-width: min(980px, 100% - var(--gutter) * 2);
  margin: clamp(80px, 13vh, 140px) auto 0;
  text-align: center;
}
.landing-cos .on .titol__h { font-size: clamp(2rem, 4.8vw, 4rem); }
.landing-cos .properes {
  list-style: none; margin: clamp(30px, 5vh, 52px) auto 0; padding: 0;
  max-width: 820px; text-align: left;
}
.landing-cos .propera {
  display: grid; grid-template-columns: 9em 1fr 1.3fr; align-items: baseline;
  column-gap: 1.2em;
  padding: 1.05em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.landing-cos .propera p { margin: 0; }
.landing-cos .propera__dia { color: var(--pink); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.landing-cos .propera__dia b { font-size: 1.5em; font-weight: 700; letter-spacing: -0.03em; }
.landing-cos .propera__lloc { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--tinta); }
.landing-cos .propera__que { color: color-mix(in srgb, var(--tinta) 70%, transparent); }
.landing-cos .propera--buida { display: block; text-align: center; }
/* ---------- 4. La cita gran ---------- */
.landing-cos .cita {
  max-width: min(980px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(110px, 17vh, 180px) 0 clamp(60px, 10vh, 110px);
  text-align: center;
}
.landing-cos .cita__cometes {
  display: block; height: .55em;
  font-family: var(--font); font-weight: 700;
  font-size: clamp(6rem, 12vw, 10rem); line-height: 1;
  color: var(--pink);
  transform: rotate(-8deg);
}
.landing-cos .cita__text {
  margin: 0 auto; max-width: 15em;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(1.9rem, 4.8vw, 4rem); letter-spacing: -0.04em; line-height: 1.1;
  color: var(--tinta); text-wrap: balance;
}
.landing-cos .cita__text em { font-style: normal; color: var(--pink); }
.landing-cos .cita__qui {
  margin: 1.4em 0 0; font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: color-mix(in srgb, var(--tinta) 70%, transparent);
}
.landing-cos .cita__qui b { display: block; color: var(--pink); font-style: italic; font-size: 1.15em; }
/* ---------- 5. La música ---------- */
.landing .landing-cos .subsol { display: block; height: auto; margin-top: 0; padding: 0; }
/* main.css li posava height: 0 al mòbil */
.landing-cos .cancons {
  max-width: min(980px, 100% - var(--gutter) * 2);
  margin: 0 auto; padding: clamp(40px, 7vh, 80px) 0 clamp(60px, 10vh, 110px);
  text-align: center;
}
.landing-cos .cancons .titol__h { font-size: clamp(2rem, 4.8vw, 4rem); }
.landing-cos .enganxa__img--cascos { height: .95em; transform: rotate(-10deg); vertical-align: -0.12em; margin-left: .18em; }
/* el reproductor, com una foto més: marc blanc, tort i amb cinta */
.landing-cos .cancons .spoti {
  position: relative;
  max-width: 728px; margin: clamp(30px, 5vh, 52px) auto 0;
  padding: 12px; background: #fff;
  border-radius: 4px; overflow: visible;
  box-shadow: var(--ombra-p);
  transform: rotate(-1deg);
}
.landing-cos .cancons .spoti::before {
  content: ""; position: absolute; top: -12px; left: 50%; z-index: 1;
  width: 90px; height: 24px; transform: translateX(-50%) rotate(3deg);
  background: color-mix(in srgb, var(--pink) 28%, rgba(255, 255, 255, .55));
}
.landing-cos .cancons .spoti iframe { border-radius: 10px; height: 352px; }
/* ---------- 7. La crida ---------- */
.landing-cos .crida--portada { padding-top: clamp(56px, 10vh, 110px); padding-bottom: clamp(72px, 12vh, 130px); }
/* ---------- 8. L'adeu ---------- */
.landing-cos .adeu {
  position: relative;
  padding: clamp(70px, 12vh, 130px) 0 clamp(30px, 5vh, 60px);
  text-align: center;
}
.landing-cos .adeu__bafarada {
  position: relative;
  display: inline-block; margin: 0 0 1em; padding: .6em 1.2em;
  border-radius: 1em; background: var(--crema-p); color: var(--tinta);
  font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  box-shadow: var(--ombra-p);
  transform: rotate(-5deg) translateX(-30%);
}
.landing-cos .adeu__bafarada::after {
  content: ""; position: absolute; right: 22%; bottom: -10px;
  width: 16px; height: 14px; background: inherit;
  clip-path: polygon(0 0, 100% 0, 70% 100%);
}
.landing-cos .adeu__cap {
  display: block; margin: 0 auto;
  width: clamp(190px, 22vw, 300px); height: auto;
  filter:
    drop-shadow(6px 0 0 #fff) drop-shadow(-6px 0 0 #fff)
    drop-shadow(0 6px 0 #fff) drop-shadow(0 -6px 0 #fff)
    drop-shadow(0 20px 30px rgba(96, 44, 72, .3));
}
/* ---------- Al mòbil ---------- */
@media (max-width: 760px) {
.landing-cos .directe__fotos { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; }
.landing-cos .foto { position: relative; inset: auto; width: auto; }
.landing-cos .directe__obj--mic { left: 44%; top: -24px; }
.landing-cos .directe__obj--cascos { right: 2%; bottom: -30px; }
.landing-cos .qui { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.landing-cos .qui__cap { grid-row: auto; }
.landing-cos .qui .titol__h { text-align: center; }
.landing-cos .qui__nota { justify-self: center; }
.landing-cos .qui__bafarada { right: -12%; }
.landing-cos .propera { grid-template-columns: 1fr; row-gap: .2em; }
.landing-cos .adeu__bafarada { transform: rotate(-5deg); }
}
/* =====================================================================
   PORTADA, segona passada (pre-flight de les skills)
     · un sol botó ple a tota la portada («Contracta'm»); la resta,
       enllaços amb el traç de retolador del lloc (.ralla)
     · cap llista amb una ratlla sota cada fila: les dates són matrius
       d'entrada, de paper, cadascuna torta
     · no tot centrat: «On és el Markos?» arrambat a l'esquerra i
       «Cançons» a dues columnes
   ===================================================================== */
/* l'enllaç amb traç de retolador */
.landing-cos .enllac {
  display: inline-flex; align-items: baseline; gap: .4em;
  font-family: var(--font); font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -0.02em;
  color: var(--tinta); text-decoration: none;
  transition: color .25s;
}
.landing-cos .enllac::after { content: "\2197"; color: var(--pink); transition: transform .4s var(--molla); }
.landing-cos .enllac:hover { color: var(--pink-deep); }
.landing-cos .enllac:hover::after { transform: translate(3px, -3px); }
/* ---------- On és el Markos: arrambat a l'esquerra ---------- */
.landing-cos .on { text-align: left; }
.landing-cos .on .titol__h { margin: 0; text-align: left; }
.landing-cos .on__peu { text-align: left; }
/* les properes dates: matrius d'entrada, una al costat de l'altra */
.landing-cos .properes {
  max-width: none; margin: clamp(32px, 5vh, 56px) 0 0;
  display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 34px);
}
.landing-cos .propera {
  --forat: 10px;
  position: relative;
  display: grid; grid-template-columns: 1fr; row-gap: .25em;
  width: clamp(200px, 26%, 270px);
  padding: 1.3em 1.4em 1.4em;
  border: 0;
  background: #fff;
  box-shadow: var(--ombra-p);
  /* les dues mitges llunes dels costats, on es talla la matriu */
  -webkit-mask:
    radial-gradient(circle at 0 62%, transparent var(--forat), #000 calc(var(--forat) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 62%, transparent var(--forat), #000 calc(var(--forat) + .5px)) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 62%, transparent var(--forat), #000 calc(var(--forat) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 62%, transparent var(--forat), #000 calc(var(--forat) + .5px)) right / 51% 100% no-repeat;
}
/* la ratlla de punts del tall */
.landing-cos .propera::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 62%;
  border-top: 2px dashed color-mix(in srgb, var(--pink) 40%, transparent);
}
.landing-cos .propera:nth-child(1) { transform: rotate(-2.5deg); }
.landing-cos .propera:nth-child(2) { transform: rotate(1.5deg) translateY(12px); }
.landing-cos .propera:nth-child(3) { transform: rotate(-1deg) translateY(-4px); }
.landing-cos .propera__dia { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.landing-cos .propera__dia b { font-size: 2.1em; line-height: 1; }
.landing-cos .propera__lloc { margin-top: 1.4em !important; }
.landing-cos .propera__que { font-size: .95rem; }
.landing-cos .propera--buida { width: auto; transform: none !important; -webkit-mask: none; mask: none; }
/* ---------- Cançons: dues columnes ---------- */
.landing-cos .cancons {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap: clamp(32px, 5vw, 72px); align-items: center;
  text-align: left;
}
.landing-cos .cancons .titol__h { margin: 0; text-align: left; }
.landing-cos .cancons .spoti { margin: 0; transform: rotate(1.5deg); }
@media (max-width: 760px) {
.landing-cos .propera { width: 100%; }
.landing-cos .propera:nth-child(n) { transform: rotate(-1deg); }
.landing-cos .cancons { grid-template-columns: 1fr; row-gap: 32px; }
}
/* ---------- Textos bons del Markos (versió final) ---------- */
/* el manifest: «Sóc en Markos. Amb K.» molt gran, i la seva idea a sota */
.landing-cos .cartell__frase--gran { font-size: clamp(2.6rem, 7.4vw, 6.4rem); line-height: 1.02; letter-spacing: -0.045em; }
.landing-cos .cartell__sub {
  position: relative; z-index: 1;
  margin: .9em auto 0; max-width: 24em;
  font-family: var(--font); font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.35; letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--tinta) 82%, transparent);
  text-align: center; text-wrap: balance;
}
/* «Vull ser el rei de la festa catalana.» és més llarga: pot partir-se */
.landing-cos .qui__bafarada { white-space: normal; max-width: 13em; right: -30%; line-height: 1.25; text-align: center; }
/* la cita, que ara és una frase llarga d'ell */
.landing-cos .cita__text { max-width: 20em; font-size: clamp(1.7rem, 3.7vw, 3.1rem); line-height: 1.14; }
@media (max-width: 760px) {
.landing-cos .qui__bafarada { right: -14%; max-width: 11em; }
}
/* ---------- FATXENDA: la novetat, amb tot el pes ----------
   A l'esquerra, les fotos de la sessió com a còpies de paper i el segell de
   goma amb la data (el mateix segell que Dates). A la dreta, la paraula
   «Fatxenda» enorme, la frase d'ell i el titular de premsa en retall. */
.landing-cos .fatx {
  max-width: min(1120px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) 0 clamp(70px, 12vh, 130px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(36px, 6vw, 90px); align-items: center;
}
.landing-cos .fatx__fotos { position: relative; min-height: clamp(420px, 46vw, 600px); }
.landing-cos .fatx__foto {
  position: absolute; display: block; height: auto;
  background: #fff; padding: 10px 10px 34px;
  box-shadow: var(--ombra-p);
  object-fit: cover;
}
.landing-cos .fatx__foto--gran { width: 74%; aspect-ratio: 4 / 5; left: 0; top: 0; transform: rotate(-4deg); }
.landing-cos .fatx__foto--petita { width: 46%; aspect-ratio: 1; right: 0; bottom: 0; transform: rotate(5deg); z-index: 1; }
/* el segell de goma: rosa, tort, amb la vora gruixuda */
.landing-cos .fatx__segell {
  position: absolute; z-index: 2; right: 6%; top: 6%;
  margin: 0; padding: .5em .9em .55em;
  border: 3px solid var(--pink-deep); border-radius: 6px;
  color: var(--pink-deep); background: color-mix(in srgb, var(--crema-p) 70%, transparent);
  font-family: var(--font); font-weight: 700; font-size: clamp(.9rem, 1.3vw, 1.05rem);
  letter-spacing: .06em; text-align: center; line-height: 1.15;
  transform: rotate(9deg);
}
.landing-cos .fatx__segell b { display: block; font-size: 1.9em; letter-spacing: .04em; text-transform: uppercase; }
.landing-cos .fatx__titol {
  margin: 0;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(3.4rem, 9.6vw, 8.6rem); line-height: .92; letter-spacing: -0.055em;
  color: var(--pink);
}
.landing-cos .fatx__frase {
  margin: .7em 0 0; max-width: 24em;
  font-family: var(--font); font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; letter-spacing: -0.015em;
  color: var(--tinta);
}
.landing-cos .fatx__frase em { font-style: normal; color: var(--pink); }
/* el titular, com un retall de diari estripat (com a Premsa) */
.landing-cos .fatx__retall {
  position: relative;
  margin: 1.8em 0 0; max-width: 26em;
  padding: 1.1em 1.3em 1.2em;
  background: #fff;
  font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.3; letter-spacing: -0.02em;
  color: var(--tinta);
  transform: rotate(-1.5deg);
  clip-path: polygon(0 4px, 6% 0, 13% 4px, 21% 1px, 29% 5px, 38% 0, 47% 4px, 56% 1px, 64% 5px, 73% 0, 82% 4px, 91% 1px, 100% 4px,
                     100% calc(100% - 3px), 92% 100%, 84% calc(100% - 4px), 75% 100%, 66% calc(100% - 4px), 57% 100%, 48% calc(100% - 3px), 39% 100%, 30% calc(100% - 4px), 21% 100%, 12% calc(100% - 4px), 4% 100%, 0 calc(100% - 3px));
  filter: drop-shadow(0 10px 14px rgba(96, 44, 72, .2));
}
.landing-cos .fatx__retall small {
  display: inline-block; margin-top: .5em;
  padding: .2em .5em; border-radius: 2px;
  background: var(--pink); color: #fff;
  font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.landing-cos .fatx__peu { margin: 1.8em 0 0; }
@media (max-width: 860px) {
.landing-cos .fatx { grid-template-columns: 1fr; row-gap: 40px; }
.landing-cos .fatx__fotos { min-height: 0; aspect-ratio: 1 / 1.05; }
}
/* =====================================================================
   PORTADA: ORDRE FINAL
   Elegant i endreçada, amb la gràcia del Markos als detalls:
     · una sola columna (1040 px) i tots els blocs arrenquen del mateix
       cantell esquerre;
     · el mateix aire entre blocs, sempre;
     · una sola mida per als títols de secció (Fatxenda és l'excepció: és
       la novetat i mana);
     · els girs, suaus: el paper es nota tort, però no balla.
   ===================================================================== */
.landing-cos {
  --col: min(1040px, 100% - var(--gutter) * 2);
  --aire: clamp(84px, 13vh, 150px);
}
.landing-cos > section,
.landing-cos > .subsol > section,
.landing-cos > .paper > section {
  max-width: var(--col);
  margin-left: auto; margin-right: auto;
}
/* 1. el manifest: centrat, és l'obertura; molt aire a sota */
.landing-cos .cartell--portada { padding: var(--aire) 0 calc(var(--aire) * .8); }
.landing-cos .cartell--portada .cartell__frase { margin: 0 auto; }
/* 2. Fatxenda */
.landing-cos .fatx { padding: calc(var(--aire) * .6) 0 var(--aire); column-gap: clamp(40px, 6vw, 96px); }
.landing-cos .fatx__foto--gran { transform: rotate(-2.5deg); }
.landing-cos .fatx__foto--petita { transform: rotate(3deg); }
.landing-cos .fatx__segell { transform: rotate(7deg); }
.landing-cos .fatx__retall { transform: rotate(-.8deg); }
/* els títols de secció, una sola mida i arrambats a l'esquerra */
.landing-cos .on .titol__h,
.landing-cos .cancons .titol__h { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.06; }
/* 3. On és el Markos */
.landing-cos .on { margin-top: 0; padding: 0 0 var(--aire); }
.landing-cos .properes { gap: clamp(18px, 2.4vw, 30px); }
.landing-cos .propera { width: calc((100% - 2 * clamp(18px, 2.4vw, 30px)) / 3); min-width: 0; }
.landing-cos .propera:nth-child(1) { transform: rotate(-1.2deg); }
.landing-cos .propera:nth-child(2) { transform: rotate(.8deg); }
.landing-cos .propera:nth-child(3) { transform: rotate(-.6deg); }
.landing-cos .on__peu { margin-top: 2.2em; }
/* 4. Cançons: dues columnes, alineades amb la resta */
.landing-cos .cancons { padding: 0 0 var(--aire); }
.landing-cos .cancons .spoti { transform: rotate(.8deg); }
/* 5. La crida */
.landing-cos .crida--portada { padding: var(--aire) 0; }
/* 6. L'adeu: més petit i tranquil, és una picada d'ullet */
.landing-cos .adeu { padding: calc(var(--aire) * .8) 0 calc(var(--aire) * .45); }
.landing-cos .adeu__cap { width: clamp(150px, 15vw, 210px); }
.landing-cos .adeu__bafarada { font-size: clamp(1rem, 1.5vw, 1.2rem); }
@media (max-width: 760px) {
.landing-cos { --aire: 72px; }
.landing-cos .propera { width: 100%; }
.landing-cos .propera:nth-child(n) { transform: rotate(-.6deg); }
}
/* l'obertura, en dues ratlles decidides: «Sóc en Markos. [cap]» / «Amb K.» */
.landing-cos .cartell__frase--gran { max-width: none; text-wrap: nowrap; }
.landing-cos .cartell__linia { display: block; }
.landing-cos .paper--portada .crida--portada { padding-bottom: calc(var(--aire) * .9); }
@media (max-width: 760px) {
.landing-cos .cartell__frase--gran { text-wrap: balance; font-size: 2.5rem; }
}
/* la crida: el tiquet i, a sota, l'enllaç al show (el que mira un programador abans d'escriure) */
.landing-cos .crida__show { grid-column: 2; grid-row: 3; justify-self: center; margin-top: 1.3em; position: relative; }
.landing-cos .paper--portada:has(.crida--portada) { padding-bottom: 0; }
@media (max-width: 640px) {
.landing-cos .crida__show { grid-column: 1; grid-row: 3; justify-self: start; }
}
/* =====================================================================
   PASSADA ANTI-IA (final)
     · fora les fletxetes a cada enllaç i botó: el tic de plantilla;
     · ombres de paper de debò: curtes i enganxades, no núvols que suren;
     · Fatxenda: la foto de grup mana (apaïsada), el Markos sol al costat.
   ===================================================================== */
.landing-cos { --ombra-p: 0 1px 1px rgba(96, 44, 72, .10), 0 8px 14px -8px rgba(96, 44, 72, .30); }
.landing-cos .enllac::after,
.landing-cos .tiquet::after { content: none; }
.landing-cos .crida__fletxa,
.landing-cos .retall__anar svg { display: none; }
.landing-cos .crida__boto { padding-left: 2.1em; padding-right: 2.1em; }
.landing-cos .fatx { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); }
.landing-cos .fatx__fotos { min-height: clamp(380px, 40vw, 520px); }
.landing-cos .fatx__foto--gran { width: 92%; aspect-ratio: 3 / 2; left: 0; top: 0; }
.landing-cos .fatx__foto--petita { width: 36%; aspect-ratio: 4 / 5; right: 0; bottom: 0; }
.landing-cos .fatx__segell { right: auto; left: 4%; top: auto; bottom: 10%; transform: rotate(-6deg); }
.landing-cos .fatx__titol { font-size: clamp(3rem, 7.6vw, 6.8rem); }
@media (max-width: 860px) {
.landing-cos .fatx__fotos { aspect-ratio: 1 / .92; min-height: 0; }
.landing-cos .fatx__foto--gran { width: 100%; }
.landing-cos .fatx__foto--petita { width: 44%; }
}
/* l'etiqueta de Dates, per sobre del títol i no damunt de la paraula */
.landing-cos .dates-page .veu--etiqueta { top: -1.6em; left: 4%; }
@media (max-width: 860px) {
.landing-cos .fatx { grid-template-columns: 1fr; row-gap: 36px; }
}
/* «On és el Markos?»: el format de la pàgina de Dates (files), no tiquets */
.landing-cos .properes { display: block; margin: clamp(28px, 4vh, 44px) 0 0; max-width: none; }
.landing-cos .propera,
.landing-cos .propera:nth-child(n) {
  width: auto; transform: none;
  display: grid; grid-template-columns: 11em minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline; column-gap: 1.5em;
  padding: 1.15em 0;
  background: none; box-shadow: none;
  -webkit-mask: none; mask: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.landing-cos .propera::before { content: none; }
.landing-cos .propera__dia { color: var(--pink); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.55rem); letter-spacing: -0.03em; }
.landing-cos .propera__que { color: var(--tinta); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.02em; }
.landing-cos .propera__lloc { margin: 0 !important; color: color-mix(in srgb, var(--tinta) 75%, transparent); font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.15rem); }
@media (max-width: 760px) {
.landing-cos .propera,
.landing-cos .propera:nth-child(n) { grid-template-columns: 1fr; row-gap: .25em; }
}
/* com a Dates: data · lloc · pin + població (i província) · botó */
.landing-cos .propera,
.landing-cos .propera:nth-child(n) { grid-template-columns: 11em minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; }
.landing-cos .propera__dia small { display: block; margin-top: 2px; font-size: .55em; font-weight: 600; color: color-mix(in srgb, var(--tinta) 55%, transparent); letter-spacing: 0; }
.landing-cos .propera__lloc { display: flex; align-items: center; gap: 10px; color: var(--tinta) !important; }
.landing-cos .propera__lloc small { display: block; font-size: .8em; font-weight: 500; opacity: .65; }
.landing-cos .propera__mapa { display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--pink); }
.landing-cos .propera__mapa svg { width: 18px; height: 18px; }
.landing-cos .propera__boto {
  justify-self: end;
  padding: .7em 1.4em; border-radius: 5px;
  background: var(--pink); color: #fff; text-decoration: none;
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  transition: background .25s, transform .3s var(--molla);
}
.landing-cos .propera__boto:hover { background: var(--pink-deep); transform: translateY(-2px); }
@media (max-width: 760px) {
.landing-cos .propera,
.landing-cos .propera:nth-child(n) { grid-template-columns: 1fr auto; row-gap: .35em; }
.landing-cos .propera__dia,
.landing-cos .propera__que,
.landing-cos .propera__lloc { grid-column: 1; }
.landing-cos .propera__boto { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
/* ---------- Cançons: els noms sonen ---------- */
.landing-cos .cancons__text { position: relative; }
.landing-cos .tema {
  font: inherit; color: inherit; letter-spacing: inherit;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  /* el traç de retolador del lloc, amagat fins que passes per sobre */
  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: 0 .22em;
  transition: background-size .45s var(--ease, ease), color .25s;
}
.landing-cos .tema:hover,
.landing-cos .tema:focus-visible { background-size: 100% .22em; }
.landing-cos .tema.is-on { color: var(--pink); background-size: 100% .22em; }
.landing-cos .cancons__pista {
  margin: 1.1em 0 0;
  font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: color-mix(in srgb, var(--tinta) 60%, transparent);
}
/* el cap del Markos: apareix enganxat a la cançó triada i balla si sona */
.landing-cos .cancons__cap {
  position: absolute; left: 0; top: 0;
  width: clamp(58px, 6vw, 82px); height: auto;
  transform: translate(calc(var(--x, 0px) - 18%), calc(var(--y, 0px) - 70%)) rotate(-8deg) scale(.4);
  opacity: 0; pointer-events: none;
  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 6px 8px rgba(96, 44, 72, .25));
  transition: transform .5s var(--molla), opacity .25s;
}
.landing-cos .te-cap .cancons__cap { opacity: 1; transform: translate(calc(var(--x, 0px) - 18%), calc(var(--y, 0px) - 70%)) rotate(-8deg) scale(1); }
.landing-cos .sona .cancons__cap { animation: capBalla .48s ease-in-out infinite alternate; }
@keyframes capBalla {
  from { transform: translate(calc(var(--x, 0px) - 18%), calc(var(--y, 0px) - 70%)) rotate(-12deg); }
  to   { transform: translate(calc(var(--x, 0px) - 18%), calc(var(--y, 0px) - 78%)) rotate(6deg); }
}
/* el cap, al costat de la cançó que sona (no a sobre de la ratlla de dalt) */
.landing-cos .cancons__cap { width: clamp(46px, 4.6vw, 64px); transform: translate(calc(var(--x, 0px) + 16px), calc(var(--y, 0px) - 4%)) rotate(-8deg) scale(.4); }
.landing-cos .te-cap .cancons__cap { transform: translate(calc(var(--x, 0px) + 16px), calc(var(--y, 0px) - 4%)) rotate(-8deg) scale(1); }
@keyframes capBalla {
  from { transform: translate(calc(var(--x, 0px) + 16px), calc(var(--y, 0px) - 4%)) rotate(-12deg); }
  to   { transform: translate(calc(var(--x, 0px) + 16px), calc(var(--y, 0px) - 16%)) rotate(8deg); }
}
/* el cap, a sobre de la cançó que sona, centrat (no tapa la paraula del costat) */
.landing-cos .cancons__cap { transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 92%)) rotate(-6deg) scale(.4); }
.landing-cos .te-cap .cancons__cap { transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 92%)) rotate(-6deg) scale(1); }
@keyframes capBalla {
  from { transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 92%)) rotate(-10deg); }
  to   { transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 104%)) rotate(8deg); }
}
/* aire entre les ratlles del títol perquè el cap hi càpiga a sobre de qualsevol cançó */
.landing-cos .cancons__titol { line-height: 1.55; padding-top: .55em; }
.landing-cos .cancons__cap { width: clamp(40px, 3.8vw, 54px); }
.landing-cos .cancons .cancons__titol { line-height: 1.6; padding-top: .6em; }
/* ---------- Transició de la foto al manifest ----------
   La foto acaba en terra. El cap del Markos en surt, just al tall, i el
   «Sóc en Markos» arrenca a sota, sense el buit d'abans. */
.landing-cos .cartell--portada { position: relative; padding-top: clamp(30px, 5vh, 56px); }
.landing-cos .cartell__treu {
  display: block; position: relative; z-index: 2;
  width: clamp(120px, 12vw, 170px); height: auto;
  margin: calc(-1 * clamp(110px, 11vw, 150px)) auto clamp(14px, 2vh, 24px);
  transform: rotate(-6deg);
  filter:
    drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff)
    drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff)
    drop-shadow(0 10px 14px rgba(96, 44, 72, .25));
}
/* en aparèixer, puja de dins la terra */
.reveal-on .landing-cos .cartell--portada .cartell__treu { transform: translateY(40px) rotate(-6deg); opacity: 0; transition: transform .8s var(--molla), opacity .4s; }
.reveal-on .landing-cos .cartell--portada.is-in .cartell__treu { transform: rotate(-6deg); opacity: 1; }
/* al mòbil, a sota dels tres botons de la portada (no a sobre) */
@media (max-width: 900px), (orientation: portrait) {
.landing-cos .cartell__treu { margin-top: 8px; width: 110px; }
}
/* Fatxenda: el reproductor petit, com una foto més (marc blanc i cinta) */
.landing-cos .fatx__so {
  position: relative;
  margin: 1.8em 0 0; max-width: 26em;
  padding: 8px; background: #fff;
  box-shadow: var(--ombra-p);
  transform: rotate(.8deg);
}
.landing-cos .fatx__so::before {
  content: ""; position: absolute; top: -11px; left: 50%; z-index: 1;
  width: 74px; height: 22px; transform: translateX(-50%) rotate(-4deg);
  background: color-mix(in srgb, var(--pink) 28%, rgba(255, 255, 255, .55));
}
.landing-cos .fatx__so iframe { display: block; border: 0; border-radius: 8px; height: 80px; }
/* ---------- Cançons: les mans del Markos ----------
   La mà que assenyala les cançons (toc-toc) i, quan una sona, el seu gest
   enganxat a la cantonada del reproductor. Tot són les seves mans. */
.landing-cos .cancons__pista { display: flex; align-items: center; gap: .6em; margin-top: .6em; }
.landing-cos .cancons__dit {
  width: clamp(54px, 5vw, 72px); height: auto; flex: none;
  transform: rotate(-24deg);
  transform-origin: 30% 90%;
  animation: ditToc 1.6s ease-in-out infinite;
}
@keyframes ditToc {
  0%, 60%, 100% { transform: rotate(-24deg) translate(0, 0); }
  70% { transform: rotate(-24deg) translate(4px, -7px); }
  80% { transform: rotate(-24deg) translate(0, 0); }
  88% { transform: rotate(-24deg) translate(4px, -7px); }
}
.landing-cos .cancons .spoti { position: relative; }
.landing-cos .cancons__gest {
  position: absolute; z-index: 3;
  left: -38px; bottom: -34px;
  width: clamp(80px, 8vw, 112px); height: auto;
  opacity: 0; transform: rotate(-14deg) scale(.4);
  pointer-events: none;
  transition: opacity .2s, transform .45s var(--molla);
}
.landing-cos .te-gest .cancons__gest { opacity: 1; transform: rotate(-14deg) scale(1); animation: gestPop .5s var(--molla); }
@keyframes gestPop {
  0%   { opacity: 0; transform: rotate(-30deg) scale(.3); }
  100% { opacity: 1; transform: rotate(-14deg) scale(1); }
}
@media (max-width: 760px) {
.landing-cos .cancons__gest { left: -10px; bottom: -40px; }
}