/* =========================================================
   El meu show — la línia de la companya (versió «skills», 04/10/2026)
   Tret de css/linia.css de la seva versió, NOMÉS el que fa servir aquesta
   pàgina (el vídeo, la tira, el cartell, la nota, el tancament, el títol, el
   cap que s'obre, el paper i els clips). Sense els canvis de color ni de
   lletra de tot el lloc ni el botó «Contracta'm»: d'això, de moment, res.
   Els seus colors propis viuen aquí, a .show-page, i la tinta és la nostra.
   ========================================================= */
.show-page,
.contracta-page,
.premsa-page {
  --crema-p: #fff7f4;            /* el paper: bafarades, tiquets, nota */
  /* el retolador de les cites de Premsa (sense, el subratllat sortia del
     color del text i semblava que les cites estiguessin ratllades) */
  --rosa-marca: color-mix(in srgb, #d6427f 22%, transparent);
  --tinta-p: var(--tinta);
  --ombra-p: 0 18px 40px -18px rgba(96, 44, 72, .38);   /* ombres tenyides */
  --molla: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================== 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 ---------- */
/* El triangle del play, al mig del rodó: el dibuix ja porta la correcció
   òptica (va desplaçat cap a la dreta dins del seu quadre) i el marge que hi
   afegia show.css la duplicava; es veia tirat a la dreta (04/10/2026). */
.peli__play svg { margin-left: 0; }
.peli__marc {
  overflow: visible;                         /* la mà surt fora del marc */
  box-shadow: var(--ombra-p);
}
.peli__facana { border-radius: inherit; overflow: hidden; }
.peli__nom { border-radius: 0 0 clamp(16px, 2vw, 30px) clamp(16px, 2vw, 30px); }
.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);
}
.peli__marc:hover .peli__ma { transform: rotate(-2deg) translate(10px, -10px); }
/* quan ja hi ha el reproductor, la mà s'aparta */
.peli__marc:has(iframe) .peli__ma { opacity: 0; transition: opacity .3s; }
@media (max-width: 760px) { .peli__ma { display: none; } }

/* ---------- 3. La tira: com fotos enganxades ---------- */
.clip { box-shadow: var(--ombra-p); transition: transform .55s var(--molla); }
.clip:nth-child(odd):hover  { transform: translateY(-8px) rotate(-1.6deg); }
.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. */
.cartell {
  position: relative;
  max-width: min(1040px, 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 150px) 0 clamp(90px, 14vh, 150px);
}
.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;
}
.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 */
.enganxa { white-space: nowrap; }
.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);
}
.enganxa__img--cap { transform: rotate(-8deg); height: 1.3em; }
.enganxa__img--cal { height: .82em; transform: rotate(8deg); vertical-align: -0.08em; margin-left: .14em; }
.enganxa__img--mic { transform: rotate(28deg); height: 1.15em; margin-left: .05em; margin-right: .08em; }
.cartell:hover .enganxa__img--cap { transform: rotate(6deg) scale(1.06); }
.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à */
.cartell__veus { list-style: none; margin: 0; padding: 0; }
.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));
}
.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;
}
.veu::after {                       /* la cua */
  content: ""; position: absolute; width: 14px; height: 12px; background: inherit;
}
.veu--1 { top: 4%;  left: -1%;  --r: -5deg; }
.veu--2 { top: 11%; right: -3%; --r: 4deg; }
.veu--3 { bottom: 9%; left: 6%; --r: 3deg; }
.veu--4 { bottom: 37%; right: -8%; --r: -3deg; background: var(--pink); color: #fff; }
.veu--4::before { color: #fff; }
.veu--1::after { left: 22%;  bottom: -8px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.veu--2::after { right: 22%; bottom: -8px; clip-path: polygon(0 0, 100% 0, 70% 100%); }
.veu--3::after { left: 26%;  top: -8px;    clip-path: polygon(30% 0, 100% 100%, 0 100%); }
.veu--4::after { left: 18%; top: -8px;     clip-path: polygon(30% 0, 100% 100%, 0 100%); }

/* la nota del programa */
.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;
}
.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 */
.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) {
  .cartell { padding-top: 56px; padding-bottom: 40px; }
  .cartell__veus { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; margin-top: 28px; }
  .veu { position: relative; inset: auto; white-space: normal; }
  .veu::after { display: none; }
  .nota-wrap { justify-content: center; margin-top: 30px; }
  .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. */
.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;
}
.crida__text {
  grid-column: 1; grid-row: 1 / span 2; align-self: end;
  margin: 0; max-width: 11em;
  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);
}
.crida__text em { font-style: normal; color: var(--pink); }
.crida__boto {
  grid-column: 2; grid-row: 2;
  position: relative;
  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 */
.crida__boto::before {
  content: ""; position: absolute; inset: 6px 18px;
  border: 1.5px dashed rgba(255, 255, 255, .55); border-radius: 3px;
  pointer-events: none;
}
.crida__fletxa { display: inline-grid; }
.crida__fletxa svg { width: 1em; height: 1em; transition: transform .45s var(--molla); }
.crida__boto:hover { transform: rotate(0deg) translateY(-4px); background: var(--pink-deep); }
.crida__boto:hover .crida__fletxa svg { transform: translate(3px, -3px); }
.crida__boto:active { transform: rotate(0deg) scale(.97); }
.crida__boto:focus-visible { outline: 3px solid var(--tinta-p); outline-offset: 6px; }

@media (max-width: 640px) {
  /* al mòbil, el tancament centrat: la pregunta i el tiquet, al mig */
  .crida { grid-template-columns: 1fr; row-gap: 1.4em; justify-items: center; text-align: center; }
  .crida__text { grid-column: 1; grid-row: 1; margin-inline: auto; }
  .crida__boto { grid-column: 1; grid-row: 2; justify-self: center; }
}


/* =========================== 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. */
.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;
}
.titol__h {
  position: relative;
  margin: 0 auto; max-width: 16em;
  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;
}
.titol__h em { font-style: normal; color: var(--pink); }

/* la bafarada-etiqueta: dins del títol, enganxada a la cantonada */
.veu--etiqueta {
  top: -1.1em; 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;
}
.veu--etiqueta::before { content: none; }
.veu--etiqueta::after { left: 24%; bottom: -8px; clip-path: polygon(0 0, 100% 0, 30% 100%); }



/* ======================= D. El cap que s'obre ======================= */
.show-page .peli { padding-top: 0; }
.cap-obert {
  position: relative;
  width: clamp(120px, 13vw, 190px);
  margin: 0 auto -.4em;
  z-index: 1;
}
.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 */
.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;
}
.cap-obert__obj--mic    { --x: -120%; --y: -78%;  --r: -28deg; --d: .55s; width: 34%; }
/* (04/10/2026) els cascos a la dreta i el calendari a l'esquerra, i tots
   dos, com el micro i la K, sobresurten només en part: l'altra queda
   amagada darrere del cap */
.cap-obert__obj--cascos { --x: 30%;   --y: -26%;  --r: 12deg;  --d: .7s;  width: 66%; }
.cap-obert__obj--k      { --x: 40%;   --y: -110%; --r: 16deg;  --d: .85s; width: 34%; }
.cap-obert__obj--cal    { --x: -130%; --y: -34%;  --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 ===================== */
.paper {
  position: relative;
  margin-top: 46px;
  background: var(--crema-p);
}
.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 */
.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;
}
.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 */
.paper + .peu, .show-page .peu { background: var(--crema-p); }


/* ================= F. Els clips, com adhesius enganxats ================= */
.clip { overflow: hidden; }
/* aire a dalt i a baix perquè els torts no quedin retallats per la tira */
.tira__llista { padding-top: 18px; padding-bottom: 26px; }
.clip:nth-child(3n+1) { transform: rotate(-1.4deg); }
.clip:nth-child(3n+2) { transform: rotate(1deg) translateY(10px); }
.clip:nth-child(3n+3) { transform: rotate(-.5deg); }
/* la punta de dalt a la dreta, doblegada */
.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;
}

/* ===== La sala de projecció (04/10/2026) =====
   Copiada tal qual de css/expo.css (la de «Qui soc»): el play de la Mercè
   obre aquí el vídeo, gran i amb so. Si es toca allà, cal tocar-la aquí. */
/* ---- la sala de projecció ----
   El videoclip amb so i amb els controls de YouTube, sobre una cortina
   fosca. Entra i surt amb fos; l'iframe es posa en obrir i es treu en
   tancar, que és el que para el so de debò. */
.cine{
  position: fixed;
  inset: 0;
  z-index: 130;                  /* per sobre del capçal (120) i del quadre (115) */
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 80px);
  background: rgba(44, 26, 22, .94);
  opacity: 0;
  transition: opacity .45s cubic-bezier(.65,0,.35,1);
}
.cine[hidden]{ display: none; }
.cine.is-obert{ opacity: 1; }
.cine__pantalla{
  width: min(100%, calc((100svh - 2 * clamp(16px, 5vw, 80px)) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.96);
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.cine.is-obert .cine__pantalla{ transform: none; }
.cine__pantalla iframe{ display: block; width: 100%; height: 100%; border: 0; }
.cine__tanca{
  position: absolute;
  top: calc(30px + var(--sa-dalt, 0px)); right: clamp(16px, 4vw, 48px);
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  padding: 0; -webkit-appearance: none; appearance: none;
  background: var(--rosa); color: var(--tinta);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s cubic-bezier(.65,0,.35,1);
}
@media (hover: hover){ .cine__tanca:hover{ transform: rotate(90deg); background: var(--taronja); } }

/* ===== El visor de clips: la línia de temps i el play (04/10/2026) =====
   La barra que hi havia feia 3 px a la vora de baix de tota la pantalla i no
   es veia. Ara va a sota del vídeo mateix (amb el seu ample: el vídeo és
   vertical, 9:16, i a l'ample queda al mig), més gruixuda i arrodonida, i el
   nom puja per sobre seu. */
.short__barra {
  left: max(16px, calc(50% - 100svh * 9 / 32 + 16px));
  right: max(16px, calc(50% - 100svh * 9 / 32 + 16px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  /* nítida sobre qualsevol vídeo: el carril blanc ben visible i un contorn
     fosc fi que la separa del fons (abans es fonia amb el degradat) */
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .35);
}
/* el rosa ocupa tot el carril i s'estira des de l'esquerra (scaleX, el posa
   el JS a cada fotograma): continu, sense salts */
.short__barra i {
  width: 100% !important;
  border-radius: inherit;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.short__nom { padding-bottom: calc(2.2em + env(safe-area-inset-bottom, 0px)); }

/* El play del mig: només quan s'ha aturat a mà (js/show.js, .es-pausat).
   El mateix rodó rosa que el del vídeo de la Mercè; apareix creixent. */
.short__play {
  position: absolute; z-index: 1;
  left: 50%; top: 50%;
  display: grid; place-items: center;
  width: clamp(68px, 7vw, 96px); aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--pink); color: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.7);
  transition: opacity .3s cubic-bezier(.65,0,.35,1), transform .35s cubic-bezier(.65,0,.35,1), background-color .25s;
}
.short__play svg { width: 42%; height: auto; }
.short.es-pausat .short__play {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: hover){ .short.es-pausat .short__play:hover{ background: var(--pink-deep); } }

/* ===== Els clips: la punta doblegada de debò i l'ombra sencera (04/10/2026) =====
   1) La punta doblegada es pintava amb el rosa del fons a sobre del vídeo,
      i allà on el fons no era exactament aquell rosa (l'ombra del clip del
      costat, el gir de cada clip) se'n veia el contorn. Ara la cantonada es
      talla de debò (clip-path a .clip__cos, que és on hi ha el vídeo) i la
      solapa es dibuixa a sobre, sense fons fals.
   2) L'ombra del clip no pot anar al .clip__cos (el clip-path se la menjaria)
      ni a la mateixa .clip (que ja no retalla): va en un ::before al darrere.
   3) La pista talla en vertical (és un scroll horitzontal) i l'ombra hi
      quedava escapçada en sec: la llista porta més coixí a baix, i la pista
      el mateix de marge negatiu perquè res no es mogui de lloc. */
.clip {
  overflow: visible;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.clip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: clamp(14px, 1.6vw, 24px);
  box-shadow: var(--ombra-p);
}
.clip__cos {
  --punta: 30px;
  position: relative;
  height: 100%;
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  background: var(--bg-2);
  clip-path: polygon(0 0, calc(100% - var(--punta)) 0, 100% var(--punta), 100% 100%, 0 100%);
}
.clip::after {
  width: 30px; height: 30px;
  background: linear-gradient(225deg, #fbf3f0 0%, #f1e2de 55%, #e2cbc6 100%);
  box-shadow: none;
  border-radius: 0 0 0 5px;
  /* la solapa: el triangle de sota la diagonal, doblegat cap a dins */
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  filter: drop-shadow(-2px 2px 3px rgba(96, 44, 72, .3));
}
.tira__llista { padding-bottom: 72px; }
.tira__pista { margin-bottom: -46px; }

/* ===== Més aire entre les parts de dalt (04/10/2026) =====
   el logo, la cara amb els objectes, la pregunta i el vídeo respiraven poc */
.show-page .titol { padding-top: clamp(128px, 19vh, 200px); padding-bottom: clamp(60px, 10vh, 112px); }
.show-page .cap-obert { margin-bottom: clamp(22px, 3.6vh, 44px); }

/* ===== El visor de clips, amb scroll de debò (04/10/2026) =====
   La pista ja no es mou amb un transform (el dit no l'arrossegava i en
   aixecar-lo saltava): és un scroll vertical amb encaix d'un vídeo en un, i
   «scroll-snap-stop: always» perquè una passada forta no se'n salti cap.
   Les mides en % de la pista (i no en svh) perquè a l'iPhone, amb les barres
   de Safari, cada vídeo faci exactament el que es veu. */
.shorts__pista {
  position: absolute; inset: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transform: none;
  transition: none;
  will-change: auto;
}
.shorts__pista::-webkit-scrollbar { display: none; }
.short {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;                /* el fons difuminat no ha de vessar al veí */
}

/* ===== Contractació (de la versió «skills», 04/10/2026) =====
   Tret de la seva linia.css tal qual: cada agència és una entrada de festa
   major (la matriu amb el logo, mitges llunes i ratlla de punts), el
   «Parlem!» gran i la nota de paper del peu. El títol de cartell (.titol)
   ja és més amunt, a la part d'«El meu show». */
.contracta-page .contracta { padding-top: 0; }
/* =====================================================================
   CONTRACTACIÓ — la bafarada i dues entrades de festa major
   ===================================================================== */
.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 */
.contracta-page .contracta__segona {
  display: block;
  margin-top: .25em;
  color: var(--pink);
  font-size: 1.45em;
  letter-spacing: -0.05em;
}

.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;
}
.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);
}
.entrada:nth-child(1) { transform: rotate(-1.4deg); }
.entrada:nth-child(2) { transform: rotate(1.1deg) translateY(14px); }
.entrada:hover { transform: rotate(0) translateY(-4px); }
/* la ratlla de punts entre la matriu i la resta */
.entrada::before {
  content: ""; position: absolute; top: 18px; bottom: 18px; left: 38%;
  border-left: 2px dashed color-mix(in srgb, var(--pink) 45%, transparent);
}
.entrada__matriu.agencia__logo {
  width: 100%; height: 100%; margin: 0;
  padding: 18% 16%;
  display: grid; place-items: center;
}
.entrada__matriu a { width: 100%; height: clamp(54px, 6vw, 80px); }
.entrada__cos { padding: 0 clamp(16px, 2.4vw, 32px); min-width: 0; }
.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);
}
.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);
}
.entrada .agencia__correu:hover { border-bottom-color: var(--pink); }

.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);
}
.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) {
  .entrades { grid-template-columns: 1fr; }
  .entrada:nth-child(2) { transform: rotate(1.1deg); }
}

/* ===== Premsa (de la versió «skills», 04/10/2026) =====
   Tret de la seva linia.css tal qual: cada notícia és un retall de diari
   estripat, una mica tort, amb la cita subratllada amb retolador, i el títol
   de cartell amb la bafarada «Premsa». */
.titol--premsa { padding-top: clamp(16px, 3vh, 32px); max-width: none; }
.premsa-page .veu--etiqueta { left: 14%; }
@media (max-width: 640px) {
  /* al mòbil la bafarada va a sobre del títol, no a sobre d'una paraula */
  .premsa-page .veu--etiqueta {
    position: relative; top: auto; left: auto;
    display: table; margin: 0 auto .7em;
  }
}
/* =====================================================================
   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 */
.premsa-page .premsa { max-width: min(980px, 100% - var(--gutter) * 2); }

.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;
}
.premsa-page .retall,
.premsa-page .retall:last-child { border: 0; }
.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) */
.premsa-page .retall { filter: drop-shadow(0 14px 18px rgba(96, 44, 72, .22)); }
/* cadascun tort a la seva manera, com enganxats a mà */
.premsa-page .retall:nth-child(4n+1) > a { transform: rotate(-.9deg); }
.premsa-page .retall:nth-child(4n+2) > a { transform: rotate(.7deg) translateY(18px); }
.premsa-page .retall:nth-child(4n+3) > a { transform: rotate(.5deg); }
.premsa-page .retall:nth-child(4n+4) > a { transform: rotate(-.6deg) translateY(18px); }
.premsa-page .retall > a:hover { transform: rotate(0) translateY(-6px); }

.premsa-page .retall__meta { display: flex; gap: 1em; align-items: baseline; flex-wrap: wrap; padding: 0; }
.premsa-page .retall__mitja,
.premsa-page .retall__data,
.premsa-page .retall__anar,
.premsa-page .passa__compte { font-family: "Archivo", system-ui, sans-serif; }
.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;
}
.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); }

.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;
}
.premsa-page .retall > a:hover .retall__titular { text-decoration: none; }
/* la cita, subratllada amb retolador en lloc de la barra lateral */
.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;
}
.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;
}
.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;
}
.premsa-page .retall__anar svg { width: 14px; height: 14px; }
.premsa-page .passa { margin-top: clamp(48px, 8vh, 90px); }

@media (max-width: 760px) {
  .premsa-page .retalls { grid-template-columns: 1fr; }
  .premsa-page .retall:nth-child(n) > a { transform: rotate(0); }
}

/* El títol de Contractació, sempre en quatre ratlles (04/10/2026):
   «Vols el meu show» / [cap] «a la teva» / «festa major?» / «Parlem!».
   Els salts són <br> a l'HTML; aquí només que cap ratlla es parteixi i que
   el cap, a l'inici de la segona, deixi l'aire a la dreta i no a l'esquerra. */
.titol__h--contracta { white-space: nowrap; max-width: none; }
.enganxa--davant .enganxa__img { margin: 0 .14em 0 -.04em; }

/* ===== La crida del final, en una ratlla (05/10/2026) =====
   «Vols festuki tuki al teu poble?» anava en tres ratlles curtes en un racó i
   deixava mitja pantalla buida. Ara la frase va sencera en una ratlla i el
   tiquet al costat, tot centrat. Si no hi cap, com a molt dues ratlles
   equilibrades i el tiquet a sota. */
.crida {
  max-width: min(1240px, 100% - var(--gutter) * 2);
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: .9em;
  text-align: center;
}
.crida__text {
  grid-row: 1; align-self: center;
  max-width: none;
  font-size: clamp(2rem, 3.7vw, 3.6rem);
  text-wrap: balance;
}
.crida__boto { grid-column: 1; grid-row: 2; justify-self: center; }
@media (max-width: 1100px) {
  .crida { grid-template-columns: 1fr; row-gap: 1.2em; justify-items: center; text-align: center; }
  .crida__text { grid-column: 1; grid-row: 1; max-width: 14em; margin-inline: auto; }
  .crida__boto { grid-column: 1; grid-row: 2; justify-self: center; }
}