/* ============================================================
   Markos amb K — escena amb objectes clicables
   Cada objecte de la foto és un botó: ordinador → YouTube,
   Markos → qui és, cascos i micro → shows, càmera → imatges.
   ============================================================ */

:root{
  --rosa:   #F3D9D5;
  --crema:  #F3EFE3;
  --tinta:  #2C1A16;
  /* La mida del logo del capçal. D'aquí en surt tota la resta: el
     desplaçament de la K el calcula el JS i el carril lliure de sota, també. */
  --logo-w: clamp(216px, 17.9vw, 322px);
  /* On acaba la K quan el logo s'ha arronsat: coixí de la barra + l'amplada
     de la K, que és ~18% del logo. */
  --k-fi: calc(clamp(16px, 4vw, 48px) + var(--logo-w) * .18);
  --aire: 74px;            /* el buit net que ha de quedar a la dreta de la K */
  --carril-k: calc(var(--k-fi) + var(--aire));
  /* Geometria de la imatge de la portada. Viu aquí i no a .scene perquè el
     subsòl també l'ha de poder llegir per saber quant de rosa pla li queda a
     la foto per sota de la terra. */
  /* Les dues proporcions de landing-v2.jpg. La portada són els primers 1070
     píxels dels 1638: el tall cau a la gespa, força abans del cantell de
     terra, i deixa els objectes folgats dins la franja que es veu en una
     pantalla ampla. Si es canvia la foto, torna a passar retalla-objectes.py
     i posa aquí el que imprimeixi (i el mateix a FRAME_AR, a js/main.js). */
  --frame-ar: 1.15327;                 /* la portada: 1234 / 1070 */
  --full-ar: 0.75336;                  /* la imatge sencera: 1234 / 1638 */
  --cover-w: max(100vw, calc(100svh * var(--frame-ar)));
  --frame-h: calc(var(--cover-w) / var(--frame-ar));
  --full-h:  calc(var(--cover-w) / var(--full-ar));
  --crop-y:  min(0px, calc((100svh - var(--frame-h)) / 2));
  /* el logo és 2172/724, o sigui exactament 3:1 */
  --logo-h: calc(var(--logo-w) / 3);
  /* a quina alçada queda el mig del logo: el capçal té 18px de coixí a dalt */
  /* Sota el notch del mòbil: la pàgina s'estén fins a dalt de tot
     (viewport-fit=cover, a l'HTML) perquè la foto de la portada passi per
     sota de la barra d'estat i no hi quedi una franja rosa; a canvi, el
     capçal i tot el que hi va alineat baixen el que la barra ocupa. A
     l'ordinador això val 0. */
  --sa-dalt: env(safe-area-inset-top, 0px);
  --capcal-mig: calc(18px + var(--logo-h) / 2 + var(--sa-dalt));
  --taronja:#C4501F;
  --dibuix: #F9C0AB;   /* els traços que assenyalen els objectes */
}

*{ box-sizing: border-box; }

/* sense barra de desplaçament: la pàgina es mou igual, però no es veu */
/* ---------------- el menú del capçal ----------------
   Hi és sempre, també a dalt de tot amb el logo sencer i centrat: és l'única
   manera d'anar a qualsevol lloc i no pot dependre de si has fet scroll.

   Tot viu dins del capçal, i per ordre: primer la cortina, després el logo i
   a sobre el botó. Així la cortina baixa per darrere de la K i del botó, que
   es queden visibles i clicables. El botó va en absolut i no com a segon fill
   del flex: el JS calcula on ha d'anar la K donant per fet que el logo està
   centrat, i un segon element en flux el desquadraria. */
.navmenu{
  /* Sempre a la cantonada de baix a la dreta, a totes les pàgines i amb
     qualsevol capa oberta (03/10/2026): a mà, i a dalt hi queda lloc per a
     la creu de tornar. Entra pujant una mica. */
  position: fixed;
  top: auto;
  bottom: calc(clamp(18px, 3.2vh, 34px) + env(safe-area-inset-bottom, 0px));
  right: clamp(16px, 4vw, 48px);
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.65,0,.35,1),
              transform .45s cubic-bezier(.65,0,.35,1),
              visibility 0s linear .45s;
}
/* Hi és sempre, des que la pàgina ha acabat d'entrar. Abans només sortia
   quan el logo s'havia arronsat a la K (body.is-scrolled), i a dalt de tot
   et quedaves sense cap manera d'anar enlloc si no feies scroll primer.
   Qui la posa és menuSempre() (js/main.js), dos fotogrames després del
   primer dibuix, i així el botó entra amb la seva animació en comptes
   d'aparèixer de cop. «is-scrolled» es queda de xarxa: si aquell codi no
   s'arribava a executar, l'scroll encara el faria sortir. */
body.menu-a-la-vista .navmenu,
body.is-scrolled .navmenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .45s cubic-bezier(.65,0,.35,1),
              transform .45s cubic-bezier(.65,0,.35,1),
              visibility 0s linear 0s;
}
/* A la portada, el botó no surt fins que s'acaba l'entrada del logo
   (body.is-ready), i llavors entra amb el mateix retard que les xarxes de
   l'altra cantonada (04/10/2026; abans hi era des del primer instant, a
   sobre de la cortina de l'entrada). */
body.landing:not(.is-ready) .navmenu{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}
body.landing.is-ready.menu-a-la-vista .navmenu{
  transition: opacity .45s cubic-bezier(.65,0,.35,1) .6s,
              transform .45s cubic-bezier(.65,0,.35,1) .6s,
              visibility 0s linear .6s;
}

/* (Amb la galeria oberta o el quadre penjat el botó es queda a la vista,
   també al mòbil, 03/10/2026; allà les fletxes de la foto gran pugen per
   sobre seu, al bloc mòbil de la galeria.) */

/* La creu que torna a la portada des de les pàgines (Dates): la mateixa que
   la de la galeria i la de «Qui soc», al mateix lloc. Per sobre del capçal:
   per sota, la franja rosa de Dates (.shows-page .nav::before) la tapava i
   no es veia. Amb el menú obert s'esvaeix, que la cortina hi passa per sota. */
.tanca-pagina{
  position: fixed;
  top: var(--capcal-mig); right: clamp(16px, 4vw, 48px);
  z-index: 125;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tinta); color: var(--rosa);
  display: grid; place-items: center;
  transform: translateY(-50%);
  transition: transform .3s cubic-bezier(.65,0,.35,1), background-color .3s cubic-bezier(.65,0,.35,1);
}
@media (hover: hover){ .tanca-pagina:hover{ transform: translateY(-50%) rotate(90deg); background: var(--taronja); } }
.tanca-pagina{ transition: transform .3s cubic-bezier(.65,0,.35,1), background-color .3s cubic-bezier(.65,0,.35,1), opacity .35s cubic-bezier(.65,0,.35,1); }
body.menu-obert .tanca-pagina{ opacity: 0; pointer-events: none; }

/* Els :hover amb moviment van dins de @media (hover: hover): en tàctil l'iOS
   deixa el :hover enganxat a l'últim punt tocat, i com que el burger i la
   creu de la galeria seuen al mateix racó, en obrir la galeria la creu
   naixia ja girada i borrosa (26/09/2026). */
/* el botó, a dins d'una pastilla rodona com les de la galeria */
.navmenu__boto{
  display: grid;
  place-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tinta);
  cursor: pointer;
  transition: background-color .25s cubic-bezier(.65,0,.35,1);
}
@media (hover: hover){ .navmenu__boto:hover{ background: var(--taronja); } }

.navmenu__ratlla{
  display: block;
  width: 20px;
  height: 2px;
  background: var(--rosa);
  border-radius: 2px;
  transition: transform .45s cubic-bezier(.65,0,.35,1),
              opacity .25s cubic-bezier(.65,0,.35,1);
}
/* obert: les tres ratlles es tanquen en creu */
body.menu-obert .navmenu__ratlla:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-obert .navmenu__ratlla:nth-child(2){ opacity: 0; transform: scaleX(.4); }
body.menu-obert .navmenu__ratlla:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- la cortina ---- */
.navmenu__cortina{
  /* la mida del sticker viu aquí perquè la bafarada la pugui fer servir per
     saber on cau el cap, en comptes d'endevinar-ho amb una alçada de finestra */
  --sticker-w: clamp(221px, 32.3vw, 544px);
  /* i quant baixa del mig: la bafarada li va al damunt i, si no baixava amb
     ell, anava a petar contra la K del capçal */
  --sticker-baixa: clamp(26px, 4.4vh, 58px);
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(clamp(90px, 14vh, 150px) + var(--sa-dalt)) clamp(20px, 7vw, 120px) clamp(40px, 8vh, 90px);
  /* la llista se'n va a la dreta: a l'esquerra hi va el sticker */
  padding-left: clamp(20px, 40vw, 620px);
  background: var(--tinta);
  pointer-events: none;
  /* baixa de dalt, com una cortina de debò */
  transform: translateY(-100%);
  transition: transform .72s cubic-bezier(.65, 0, .35, 1);
}
body.menu-obert .navmenu__cortina{
  transform: none;
  pointer-events: auto;
}
body.menu-obert{ overflow: hidden; }

/* Amb el menú obert, del logo només en queda la K, i al seu lloc de sempre
   (l'esquerra del capçal), sigui quin sigui l'estat de la pàgina a sota. La
   cortina tapa tota la resta —el que hi hagi de logo inclòs— i la K i el
   botó són les dues úniques coses que hi queden al damunt. */
body.menu-obert .nav__logo{ transform: translateX(var(--k-shift, 0px)); }
body.menu-obert .nav__logo .logo__mar.is-on,
body.menu-obert .nav__logo .logo__os.is-on{ opacity: 0; }

/* El sticker de la cantonada: decoració i prou, no intercepta cap clic.
   Va una mica fora de camp per les dues vores, com si l'haguessin enganxat
   de qualsevol manera, i entra amb la cortina ja baixada. */
.navmenu__sticker{
  position: absolute;
  /* per damunt de les files: porta el seu propi contorn blanc i queda com
     una enganxina de debò. No es menja cap clic perquè no n'intercepta. */
  z-index: 2;
  /* Com a la referència: gros, arrambat a l'esquerra i sortint per la vora i
     per baix, gairebé dret. No és una enganxina centrada al buit, és una cara
     que entra a la pantalla. */
  /* La cara hi cap sencera: el PNG porta un marge transparent d'un 11% a
     l'esquerra i un 7% a baix, i aquestes xifres estan posades perquè el que
     es veu de debò no toqui cap vora. */
  left: clamp(-56px, -4vw, -16px);
  top: 50%;
  width: var(--sticker-w);
  pointer-events: none;
  opacity: 0;
  /* centrat a mitja alçada i tombat cap a la dreta */
  transform: translateY(calc(-50% + var(--sticker-baixa) + 34px)) rotate(9deg) scale(.96);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .34));
  transition: opacity .45s cubic-bezier(.65,0,.35,1),
              transform .7s cubic-bezier(.65,0,.35,1);
}
body.menu-obert .navmenu__sticker{
  opacity: 1;
  transform: translateY(calc(-50% + var(--sticker-baixa))) rotate(9deg);
  transition-delay: .28s;
}

/* Les xarxes, al raó de sota. Van amb el mateix rodó que la fletxa de les
   files —vora fina, i en passar-hi per sobre s'omple de rosa— perquè la
   cortina no tingui dos llenguatges de botó diferents. Entren les últimes
   de tot, quan les sis files ja hi són. */
.navmenu__xarxes{
  position: absolute;
  z-index: 4;                /* per damunt del sticker, que els passa a prop */
  left: clamp(20px, 7vw, 120px);
  bottom: clamp(22px, 4vh, 48px);
  display: flex;
  gap: clamp(10px, 1vw, 16px);
}
.navmenu__xarxes a{
  display: grid;
  place-items: center;
  width: clamp(38px, 3.4vw, 48px);
  aspect-ratio: 1;
  border: 1px solid rgba(243, 239, 227, .3);
  border-radius: 50%;
  color: var(--crema);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s cubic-bezier(.65,0,.35,1),
              transform .5s cubic-bezier(.65,0,.35,1),
              background-color .3s cubic-bezier(.65,0,.35,1),
              border-color .3s cubic-bezier(.65,0,.35,1),
              color .3s cubic-bezier(.65,0,.35,1);
}
.navmenu__xarxes svg{ width: 46%; height: 46%; }
.navmenu__xarxes a:hover,
.navmenu__xarxes a:focus-visible{
  background: var(--rosa);
  border-color: var(--rosa);
  color: var(--tinta);
  outline: none;
}
body.menu-obert .navmenu__xarxes a{
  opacity: 1;
  transform: none;
  transition-delay: calc(.76s + var(--i) * .07s);
}

/* El que diu el sticker. Va damunt del cap, amb la cua apuntant-li avall,
   i entra un pèl després que ell: primer arriba la cara i després parla. */
.navmenu__bafarada{
  position: absolute;
  z-index: 3;
  left: clamp(20px, 6vw, 130px);
  /* just per sobre del cap: el sticker és quadrat i centrat, i el que es veu
     de la cara comença a un 43% de la seva mida per damunt del centre */
  bottom: calc(50% + var(--sticker-w) * .43 + 48px - var(--sticker-baixa));
  max-width: min(420px, 40vw);
  margin: 0;
  padding: 19px 27px;
  border-radius: 30px;
  background: var(--crema);
  color: var(--tinta);
  font-family: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.85vw, 27px);
  line-height: 1.25;
  letter-spacing: -.01em;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
  pointer-events: none;
  opacity: 0;
  transform: rotate(-2deg) scale(.6);
  transform-origin: 70% 130%;
  transition: opacity .3s cubic-bezier(.65,0,.35,1),
              transform .5s cubic-bezier(.22,1,.36,1);
}
/* la cua, un quadrat girat que surt per sota */
.navmenu__bafarada::after{
  content: '';
  position: absolute;
  right: 24%;
  bottom: -9px;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--crema);
  transform: rotate(45deg);
}
body.menu-obert .navmenu__bafarada{
  opacity: 1;
  transform: rotate(-2deg) scale(1);
  transition-delay: .52s;
}

.navmenu__llista{ display: flex; flex-direction: column; position: relative; z-index: 1; }
/* Files i no enllaços: n'hi ha dues que encara no porten enlloc i van en
   «span». Tot el que fa que una fila sigui una fila és aquí; només el que
   demana un clic (el ratolí a sobre, la fletxa) es queda per als «a». */
.navmenu__fila{
  display: grid;
  grid-template-columns: clamp(42px, 6vw, 86px) 1fr auto;
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(8px, 1.5vh, 20px) 0;
  border-top: 1px solid rgba(243, 239, 227, .17);
  color: var(--crema);
  /* entren una darrere l'altra, quan la cortina ja ha baixat */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s cubic-bezier(.65,0,.35,1),
              transform .5s cubic-bezier(.65,0,.35,1),
              color .3s cubic-bezier(.65,0,.35,1);
}
.navmenu__fila:last-child{ border-bottom: 1px solid rgba(243, 239, 227, .17); }
/* les que encara no porten enlloc: apagades i sense fletxa, que es vegi que
   hi són però encara no s'hi pot anar */
.navmenu__fila--aviat{ color: rgba(243, 239, 227, .34); cursor: default; }
body.menu-obert .navmenu__fila{
  opacity: 1;
  transform: none;
  transition-delay: calc(.34s + var(--i) * .07s);
}
.navmenu__num{
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(243, 239, 227, .42);
  font-variant-numeric: tabular-nums;
  transition: color .3s cubic-bezier(.65,0,.35,1);
}
.navmenu__nom{
  font-family: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  /* Va amb l'alçada i amb l'amplada: amb sis files, només amb vw la llista
     se sortia per baix de la cortina en pantalles amples i baixes. */
  font-size: clamp(1.5rem, min(5.4vw, 7vh), 3.7rem);
  line-height: 1;
  letter-spacing: -.02em;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
/* la fletxa només surt a la fila que tens a sobre */
.navmenu__fletxa{
  display: grid;
  place-items: center;
  width: clamp(38px, 4vw, 56px);
  aspect-ratio: 1;
  border: 1px solid rgba(243, 239, 227, .3);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s cubic-bezier(.65,0,.35,1),
              transform .4s cubic-bezier(.65,0,.35,1),
              background-color .3s cubic-bezier(.65,0,.35,1);
}
.navmenu__fletxa svg{ width: 40%; height: 40%; }
a.navmenu__fila:hover,
a.navmenu__fila:focus-visible{ color: var(--rosa); outline: none; }
a.navmenu__fila:hover .navmenu__nom,
a.navmenu__fila:focus-visible .navmenu__nom{ transform: translateX(clamp(6px, 1vw, 16px)); }
a.navmenu__fila:hover .navmenu__num,
a.navmenu__fila:focus-visible .navmenu__num{ color: var(--rosa); }
a.navmenu__fila:hover .navmenu__fletxa,
a.navmenu__fila:focus-visible .navmenu__fletxa{
  opacity: 1;
  transform: none;
  background: var(--rosa);
  color: var(--tinta);
}

/* En pantalles estretes no hi caben de costat: la llista recupera l'amplada
   i el sticker se'n va a la cantonada, per darrere i més discret. */
@media (max-width: 900px), (orientation: portrait){
  /* La llista, a baix, a tocar del polze: just per sobre de la fila de les
     xarxes i la creu (03/10/2026; abans començava a dalt, sota el capçal). */
  .navmenu__cortina{
    padding-left: clamp(20px, 7vw, 120px);
    justify-content: flex-end;
    padding-top: calc(112px + var(--sa-dalt));
    padding-bottom: calc(18px + 46px + 30px + env(safe-area-inset-bottom, 0px));
  }
  /* la cara, a dalt a la dreta (on abans hi havia la llista) i per darrere
     de tot: «top» propi, que el «top: 50%» de l'ample no la posi al mig */
  .navmenu__sticker{
    z-index: 0;
    left: auto;
    /* gran i tirada cap al mig (04/10/2026): se surt una mica per la dreta i
       pot trepitjar el començament de la llista, que li passa per sobre */
    right: -2vw;
    top: calc(36px + var(--sa-dalt));
    bottom: auto;
    width: clamp(250px, 82vw, 440px);
    opacity: 0;
    transform: rotate(-9deg) translateY(-24px) scale(.94);   /* ara baixa des de dalt */
  }
  body.menu-obert .navmenu__sticker{ opacity: 1; transform: rotate(-9deg); }
  /* Amb set files (Premsa, 04/10/2026), als mòbils baixos (iPhone SE) la
     llista arribava a la cara: files més justes i la cara més petita. */
  @media (max-height: 720px){
    .navmenu__fila{ padding: 5px 0; }
    .navmenu__sticker{ width: clamp(180px, 56vw, 270px); }
  }
  /* allà el sticker és un fons esvaït a la cantonada: no té sentit que parli */
  .navmenu__bafarada{ display: none; }
  .navmenu{ bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* La cortina del menú s'anima també amb «reduir moviment»: abans aquí hi
   havia una regla que ho aturava tot i al mòbil del client, que té l'ajust
   activat, el menú apareixia de cop. És un moviment curt i d'una sola
   direcció, i el client el vol sempre (26/09/2026). */

html{ scrollbar-width: none; }
html::-webkit-scrollbar{ display: none; }

body{
  margin: 0;
  min-height: 100vh;
  background: var(--rosa);
  color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }

/* ---------------- el logo ---------------- */

/* Un sol bloc, fet servir dues vegades: gran al mig durant l'entrada i
   petit al capçal després. Les peces són retalls dels renders del client
   (2172×724) col·locats en % del quadre, així que encaixen entre elles i
   el vol d'una mida a l'altra és només una escala. */
.logo{
  position: relative;
  display: block;
  aspect-ratio: 2172 / 724;
}
.logo img{
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  max-width: none;
}
/* de cada estampat n'hi ha tres peces; només les del triat es veuen.
   Són retalls del mateix render, i per això el logo final ÉS el render. */
.logo__mar, .logo__os, .logo__k{ opacity: 0; }
.logo__mar.is-on, .logo__os.is-on, .logo__k.is-on{ opacity: 1; }
.logo__k{
  z-index: 2;                            /* per sobre de "mar" i "os" */
  transform-origin: 50% 90%;
}

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

.nav{
  position: fixed;
  inset: 0 0 auto 0;
  /* per sobre de tot: la cortina (100), el flaix (60), la captura (55) i la
     galeria (30). Durant l'entrada el logo del capçal ja s'amaga sol amb
     l'opacitat, així que aquí no hi ha doble logo. */
  z-index: 120;
  display: flex;
  justify-content: center;
  padding: calc(18px + var(--sa-dalt)) clamp(16px, 4vw, 48px) 18px;
  pointer-events: none;
}
.nav__logo{
  pointer-events: auto;
  width: var(--logo-w);
  filter: drop-shadow(0 2px 14px rgba(20,10,5,.3));
}
/* sobre la foto, les lletres negres es perden entre els arbres: al capçal
   van en blanc (les peces són negres; invertir-les és exacte i no cal cap
   fitxer més). També en vertical: allà la foto també passa per sota. */
.nav__logo .logo__mar,
.nav__logo .logo__os{ filter: invert(1); }
/* fora de la portada el capçal seu sobre el rosa: les lletres, negres */
body:not(.landing) .nav__logo .logo__mar,
body:not(.landing) .nav__logo .logo__os{ filter: none; }
/* i el mateix amb el quadre penjat: allà el fons torna a ser el rosa i unes
   lletres blanques s'hi perdien */
body.landing.is-marc .nav__logo .logo__mar,
body.landing.is-marc .nav__logo .logo__os{ filter: none; }
.nav__logo .logo__mar,
.nav__logo .logo__os{ transition: filter .5s cubic-bezier(.65, 0, .35, 1); }
/* (Al mòbil les lletres van ser negres mentre la portada portava el
   degradat rosa de dalt; amb el degradat fora, tornen a ser blanques com a
   l'ample, 04/10/2026.) */

/* En fer scroll el logo es queda en la K: "mar" i "os" s'esvaeixen i el
   bloc llisca cap a l'esquerra just el que cal perquè la K acabi al marge
   (--k-shift, que calcula el JS de la geometria). Tornant a dalt, desfà el
   camí. Mateixa corba d'anada i tornada, entrada i sortida suaus. */
.nav__logo{ transition: transform .75s cubic-bezier(.65,0,.35,1); }
.nav__logo .logo__mar,
.nav__logo .logo__os{ transition: opacity .55s cubic-bezier(.65,0,.35,1); }
body.is-scrolled .nav__logo{ transform: translateX(var(--k-shift, 0px)); }
body.is-scrolled .nav__logo .logo__mar.is-on,
body.is-scrolled .nav__logo .logo__os.is-on{ opacity: 0; }
/* amb la galeria oberta el logo hi és sencer, sigui on sigui la pàgina */
body.is-galeria .nav__logo{ transform: none; }
body.is-galeria .nav__logo .logo__mar.is-on,
body.is-galeria .nav__logo .logo__os.is-on{ opacity: 1; }
/* al capçal es queda la K decorada: la plana no hi surt mai */
.nav__logo .logo__kflat{ display: none; }
.nav__logo .logo__k.is-on{ opacity: 1; }

/* I va canviant d'estampat, amb la mateixa coreografia de l'entrada però
   a escala: la que hi ha tremola (is-canvi), esclata (is-vell), la nova
   entra amb rebot (is-nou) i una ona s'obre des del centre de la K. */
.nav__logo{ overflow: visible; container-type: inline-size; }
.nav__logo .logo__k{ transform-origin: 50% 62%; }
.nav__logo.is-canvi .logo__k.is-on{ animation: tremolar-nav .6s linear forwards; }
.nav__logo .logo__k.is-vell{ animation: esclatar-k .22s ease-out forwards; }
.nav__logo .logo__k.is-nou{ animation: molla .7s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes tremolar-nav{
  0%   { transform: rotate(0deg); }
  15%  { transform: translate(.5px, 0)    rotate(-1.5deg); }
  30%  { transform: translate(-.7px, 0)   rotate(2deg); }
  45%  { transform: translate(.8px, .3px) rotate(-2.8deg); }
  60%  { transform: translate(-1px, 0)    rotate(3.4deg); }
  75%  { transform: translate(1px, -.3px) rotate(-3.6deg); }
  90%  { transform: translate(-.6px, 0)   rotate(2.4deg); }
  100% { transform: scale(.9, .86); }
}
.nav__wave{
  position: absolute;
  left: var(--kx);
  top: var(--ky);
  width: 18cqw; height: 18cqw;
  margin: -9cqw 0 0 -9cqw;
  border-radius: 50%;
  border: .5cqw solid var(--dibuix);
  opacity: 0;
  pointer-events: none;
}
.nav__logo.is-pop .nav__wave{ animation: ona .7s cubic-bezier(.16,.8,.3,1) forwards; }
/* només a la portada s'amaga fins que el logo hi ha arribat volant */
body.landing .nav__logo{ opacity: 0; }
body.landing.is-ready .nav__logo{ opacity: 1; }

/* ---------------- entrada ---------------- */

/* Set passos, un per classe al body:
   is-k      la k plana sola, centrada a la pantalla
   is-shake  tremola, cada cop més, i s'encongeix un instant (anticipació)
   is-swap   la plana esclata i la K de coixí entra de cop amb rebot de
             molla; ona expansiva, espurnes i un destell al fons
   is-out    "mar" i "os" surten de darrere de la K, i el logo es centra
   is-flying vola al capçal
   is-open   surt la foto
   is-ready  s'ha acabat */
/* ---- Pas d'una pàgina a l'altra ----
   Totes les pàgines tenen el mateix fons rosa, així que el salt es fa a
   través d'un vel d'aquest color: la que marxa s'hi fon i la que arriba en
   surt. Pel mig no hi ha ni tall ni el blanc del navegador.
   L'anada va amb transició i la tornada amb animació: així la d'arribada ja
   comença tapada al primer fotograma i no cal esperar cap JS. */
.fosa{
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--rosa);
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s cubic-bezier(.65,0,.35,1);
}
body.is-leaving .fosa{ opacity: 1; }
.fosa--entrada{ animation: fosaObre .52s cubic-bezier(.65,0,.35,1) both; }
@keyframes fosaObre{ from{ opacity: 1; } to{ opacity: 0; } }
/* el vel es fa sempre, també amb «reduir moviment»: és el que fa que el
   canvi de pàgina no sigui un tall sec (03/10/2026) */

.curtain{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--rosa);
  transition: background-color .8s cubic-bezier(.65,0,.35,1), visibility 0s linear .8s;
}
/* el destell del fons en el moment del canvi */
.curtain::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,250,240,.75), rgba(255,250,240,0) 38%);
  opacity: 0;
}
body.is-swap .curtain::after{ animation: destell .7s ease-out; }
@keyframes destell{
  0%   { opacity: 0; transform: scale(.6); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* mentre la K està sola, el bloc va desplaçat perquè sigui ella qui quedi
   al centre de la pantalla (--shift, el JS el calcula de la geometria) */
.curtain__logo{
  width: clamp(260px, 56vw, 980px);
  container-type: inline-size;
  transform: translateX(calc(-1 * var(--shift)));
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform .95s cubic-bezier(.62,0,.16,1);
}
body.is-out .curtain__logo{ transform: none; }

/* la k plana: apareix, tremola cada cop més fort, s'encongeix i esclata */
.curtain__logo .logo__kflat{
  opacity: 0;
  transform-origin: 50% 60%;
  transition: opacity .4s cubic-bezier(.65,0,.35,1);
}
body.is-k     .curtain__logo .logo__kflat{ opacity: 1; }
body.is-shake .curtain__logo .logo__kflat{ animation: tremolar-k .8s linear forwards; }
body.is-swap  .curtain__logo .logo__kflat{ animation: esclatar-k .22s ease-out forwards; }

@keyframes tremolar-k{
  0%   { transform: translate(0, 0)        rotate(0deg); }
  6%   { transform: translate(1px, -1px)   rotate(.5deg); }
  12%  { transform: translate(-1px, 1px)   rotate(-.6deg); }
  18%  { transform: translate(2px, 0)      rotate(.9deg); }
  24%  { transform: translate(-2px, 1px)   rotate(-1.1deg); }
  30%  { transform: translate(3px, -1px)   rotate(1.5deg); }
  36%  { transform: translate(-3px, 2px)   rotate(-1.8deg); }
  42%  { transform: translate(3px, 1px)    rotate(2.2deg); }
  48%  { transform: translate(-4px, -1px)  rotate(-2.6deg); }
  54%  { transform: translate(4px, 2px)    rotate(3deg); }
  60%  { transform: translate(-4px, -2px)  rotate(-3.2deg); }
  66%  { transform: translate(5px, 1px)    rotate(3.4deg); }
  72%  { transform: translate(-5px, -1px)  rotate(-3.4deg); }
  78%  { transform: translate(4px, 2px)    rotate(2.8deg); }
  84%  { transform: translate(-3px, 0)     rotate(-2deg); }
  /* i just abans d'esclatar, s'encongeix: anticipació */
  100% { transform: translate(0, 2px) scale(.9, .86); }
}
@keyframes esclatar-k{
  0%   { opacity: 1; transform: scale(.9, .86); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* la K de coixí: entra de cop, sense fos, i rebota com una molla.
   Amb ombra només aquí, a la cortina, per assentar-la sobre el rosa. */
.curtain__logo .logo__k{ transform-origin: 50% 62%; }
.curtain__logo .logo__k.is-on{
  opacity: 0;
  filter: drop-shadow(0 1.2cqw 2.4cqw rgba(60,30,20,.22));
}
body.is-swap .curtain__logo .logo__k.is-on{
  opacity: 1;
  animation: molla .75s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes molla{
  0%   { transform: scale(.5)  rotate(-5deg); }
  38%  { transform: scale(1.16) rotate(2.5deg); }
  62%  { transform: scale(.95) rotate(-1deg); }
  82%  { transform: scale(1.03) rotate(.4deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* l'esclat: ona i espurnes, ancorades al centre de la K */
.burst{
  position: absolute;
  left: var(--kx);
  top: var(--ky);
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  color: var(--dibuix);
}
.burst__wave{
  position: absolute;
  left: -9cqw; top: -9cqw;
  width: 18cqw; height: 18cqw;
  border-radius: 50%;
  border: .45cqw solid currentColor;
  opacity: 0;
}
body.is-swap .burst__wave{ animation: ona .8s cubic-bezier(.16,.8,.3,1) forwards; }
body.is-swap .burst__wave--2{ animation-delay: .1s; animation-duration: .95s; }
@keyframes ona{
  0%   { opacity: .9; transform: scale(.45); }
  100% { opacity: 0;  transform: scale(2.6); }
}
.burst__spark{
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--s) * 1cqw);
  height: calc(var(--s) * 1cqw);
  margin: calc(var(--s) * -.5cqw);
  overflow: visible;
  opacity: 0;
  transform-origin: 50% 50%;
}
.burst__spark use{
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.is-swap .burst__spark{ animation: espurna .85s cubic-bezier(.2,.8,.3,1) var(--d) forwards; }
@keyframes espurna{
  0%   { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0deg); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot)); }
}

/* "mar" i "os": comencen darrere de la K, retallades a res, i surten cap
   al seu lloc mentre es descobreixen des del costat que toca la K */
.curtain__logo .logo__mar.is-on,
.curtain__logo .logo__os.is-on{
  transition: transform .85s cubic-bezier(.22,1,.36,1), clip-path .85s cubic-bezier(.22,1,.36,1),
              filter .55s cubic-bezier(.65,0,.35,1);
}
/* pel camí cap al capçal les lletres passen a blanc, per arribar-hi iguals
   que les que hi ha */
body.is-flying .curtain__logo .logo__mar.is-on,
body.is-flying .curtain__logo .logo__os.is-on{ filter: invert(1); }
.curtain__logo .logo__mar.is-on{ transform: translateX(var(--dx-mar)); clip-path: inset(0 0 0 100%); }
.curtain__logo .logo__os.is-on { transform: translateX(var(--dx-os));  clip-path: inset(0 100% 0 0); }
body.is-out .curtain__logo .logo__mar.is-on,
body.is-out .curtain__logo .logo__os.is-on{ transform: none; clip-path: inset(0 0 0 0); }

body.is-open  .curtain{ background-color: transparent; }
/* Fora del tot, i sense esperar-se. Abans això era «visibility: hidden», que
   amb el retard de 0,8 s de la transició de dalt es feia esperar: durant
   aquell temps la cortina encara hi era —i tapava els clics— i just llavors
   el JS tornava el logo a la seva mida gran del centre. Això era el
   llampec que es veia en acabar l'entrada. */
body.is-ready .curtain{ display: none; }
/* si no hi ha entrada, la cortina no ha d'existir ni un instant */
body.is-quick .curtain{ display: none; }
body.is-quick .scene__bg{ transition: filter .45s cubic-bezier(.65,0,.35,1); }
body.is-ready .curtain__logo{ opacity: 0; transition: opacity .01s; }

/* ---------------- escena ---------------- */

/* La imatge de la portada porta un subsòl a sota: la part de dalt (--frame-ar,
   la portada de sempre) ocupa la pantalla com abans, i el que sobra queda per
   sota, a l'abast del scroll. Acaba en el mateix rosa de la web.
     --cover-w  amplada a què es dibuixa la imatge perquè la part de dalt
                cobreixi la pantalla (el mateix que feia object-fit: cover)
     --crop-y   quant queda tallat per dalt (0 o negatiu) */
.scene{
  position: relative;
  height: calc(var(--full-h) + var(--crop-y));
  overflow: hidden;
  background: var(--rosa);
}

.scene__bg{
  position: absolute;
  left: 50%;
  top: var(--crop-y);
  width: var(--cover-w);
  max-width: none;            /* el max-width:100% general la deixaria curta */
  height: auto;
  margin-left: calc(var(--cover-w) / -2);
  opacity: 0;
  transform: scale(1.06);
  transform-origin: 50% calc(var(--frame-h) / 2 + var(--crop-y) * -1);
  transition: filter .3s cubic-bezier(.65,0,.35,1),
              opacity 1s cubic-bezier(.65,0,.35,1),
              transform 1.4s cubic-bezier(.65,0,.35,1);
}
/* el rosa de la imatge i el de la web no són idèntics: un degradat a l'últim
   tram tapa la costura */
/* I, de passada, tapa bona part del subsòl: el client volia veure'n menys.
   El degradat comença al 74% de la imatge (el cantell de terra és al 72%),
   puja de pressa —al 80% ja és rosa en tres quartes parts— i al 87% és rosa
   del tot. Del subsòl en queda una franja prima sota la gespa i prou. */
.scene::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--full-h) * .26);
  background: linear-gradient(rgba(243,217,213,0) 0%, rgba(243,217,213,.78) 24%, var(--rosa) 50%);
  pointer-events: none;
}
/* i una mica de rosa després, perquè el subsòl acabi de baixar amb calma.
   Aquí hi viu l'iPod: la resta de la seva disposició és a css/ipod.css */
/* Ja no ha d'omplir una pantalla sencera: a sota hi ha el «Qui sóc jo?» i
   aquell buit de rosa quedava mort entre el reproductor i la bio. */
.subsol{ background: var(--rosa); }
body.is-open .scene__bg{ opacity: 1; transform: none; }
body[data-active] .scene__bg{
  /* just el suficient per fer un pas enrere: sense desenfocar, que és el que
     s'emportava l'escena per davant */
  filter: brightness(.76) saturate(.92);
}

/* capa alineada amb la part de dalt de la imatge (la posa el JS) */
.map{
  position: absolute;
  left: 0; top: 0;
}

/* ---------------- la fletxa de baixar ----------------
   Rosa com el fons de la web, a baix a l'esquerra, i balancejant-se a poc a
   poc: diu que la pàgina continua. Només té sentit a dalt de tot de la
   portada, quan l'entrada ja ha acabat i no hi ha res obert al damunt; en
   fer scroll se'n va, que ja s'ha entès. L'ombra és l'única cosa que la
   separa de la gespa, com passa amb els rètols. */
.baixa{
  /* al mig, a la fila de baix: a l'esquerra hi ha les xarxes i a la dreta
     el botó del menú (03/10/2026) */
  position: fixed;
  left: 50%;
  translate: -50% 0;
  bottom: calc(clamp(18px, 3.2vh, 34px) + 10px);
  z-index: 30;
  width: clamp(20px, 2.1vw, 32px);
  color: var(--rosa);
  filter: drop-shadow(0 4px 14px rgba(20, 10, 5, .45));
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.65,0,.35,1), color .3s cubic-bezier(.65,0,.35,1);
}
.baixa svg{
  display: block;
  width: 100%;
  height: auto;
  animation: baixa-crida 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
.baixa:hover,
.baixa:focus-visible{ color: var(--crema); outline: none; }
body.landing.is-ready:not(.is-scrolled):not(.menu-obert):not(.is-galeria):not(.is-marc) .baixa{
  opacity: 1;
  pointer-events: auto;
  transition-delay: .6s;               /* que el logo acabi d'arribar abans */
}
@keyframes baixa-crida{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(5px); }
}

/* ---------------- les xarxes de la portada ----------------
   A baix a l'esquerra, fixes com el botó del menú (que és a la cantonada
   de l'altra banda, a la mateixa fila) i amb el mateix aspecte: rodones
   fosques. Entren igual que ell, pujant una mica, quan la portada ja hi és.
   Per sota del capçal (120): amb el menú obert la cortina les tapa, que ja
   porta les seves xarxes al mateix racó. */
.xarxes-portada{
  position: fixed;
  left: clamp(16px, 4vw, 48px);
  bottom: calc(clamp(18px, 3.2vh, 34px) + env(safe-area-inset-bottom, 0px));
  z-index: 119;
  display: flex;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.65,0,.35,1),
              transform .45s cubic-bezier(.65,0,.35,1),
              visibility 0s linear .45s;
}
body.landing.is-ready .xarxes-portada{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s cubic-bezier(.65,0,.35,1) .6s,
              transform .45s cubic-bezier(.65,0,.35,1) .6s,
              visibility 0s linear .6s;
}
.xarxes-portada a{
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--rosa);
  transition: background-color .25s cubic-bezier(.65,0,.35,1), color .25s cubic-bezier(.65,0,.35,1);
}
.xarxes-portada svg{ width: 46%; height: 46%; }
@media (hover: hover){ .xarxes-portada a:hover{ background: var(--taronja); color: var(--crema); } }
/* amb la galeria o «Qui soc» oberts, se'n van (s'esvaeixen baixant una mica)
   i tornen en tancar-los */
body.landing.is-ready.is-galeria .xarxes-portada,
body.landing.is-ready.is-marc .xarxes-portada{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.65,0,.35,1),
              transform .45s cubic-bezier(.65,0,.35,1),
              visibility 0s linear .45s;
}
@media (max-width: 900px), (orientation: portrait){
  /* la mateixa alçada i el mateix marge que el botó del menú al mòbil */
  .xarxes-portada{
    left: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------- zones clicables ---------------- */

.hot{
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  z-index: 20;                 /* per sobre dels retalls: han de rebre el clic */
  border-radius: 50%;          /* el·lipse: no s'engega des dels cantons buits */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hot:focus{ outline: none; }

/* ---------------- els dibuixets ---------------- */

/* Uns traços que brollen de darrere de cada objecte i es planten al costat:
   "aquí passa alguna cosa". Salten quan l'objecte vibra: mateix cicle i
   mateix retard que el retall (--d), amb un pèl de cascada entre ells. Van per sota del retall (z-index), així que el
   principi del viatge queda tapat per l'objecte i semblen sortir-ne.
   --fx,--fy: on acaben (centre, en % de la foto). --ox,--oy: d'on surten.
   --mw,--mh: mida de la capa en px, les posa el JS, per passar de % a px. */
.sprites{ position: absolute; width: 0; height: 0; overflow: hidden; }

.doodle{
  position: absolute;
  left: calc(var(--fx) * 1%);
  top:  calc(var(--fy) * 1%);
  width: var(--w);
  height: auto;
  aspect-ratio: 1;
  margin: calc(var(--w) / -2);           /* --fx,--fy són el centre */
  z-index: 8;                            /* darrere del retall (10) */
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  color: var(--dibuix);
  --dx: calc(var(--mw, 0px) * (var(--ox) - var(--fx)) / 100);
  --dy: calc(var(--mh, 0px) * (var(--oy) - var(--fy)) / 100);
  transform: translate(var(--dx), var(--dy)) scale(.2);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  filter: drop-shadow(0 1px 6px rgba(20,10,5,.45));
}
.doodle use{
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* L'animació es crea en el mateix instant que la vibració del retall
   (totes dues en arribar is-ready, i totes dues es tornen a crear en
   sortir d'un hover), amb el mateix retard: així van a l'una per
   construcció, sense dependre de com pausa el navegador un retard. */
body.is-ready .doodle{ animation: brollar 8s cubic-bezier(.22,1,.36,1) var(--d, 0s) infinite; }

@keyframes brollar{
  /* mateix cicle de 8 s que la vibració: la ràfega ocupa el primer 6,8% i
     els dibuixets brollen dins d'aquesta finestra, com si la sacsejada els
     fes saltar (visibles a 0,1 s, plantats a 0,4 s) */
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2) rotate(-30deg); }
  1.2% { opacity: 1; }
  5%   { transform: translate(0, 0) scale(1.14) rotate(7deg); }
  7.5% { transform: translate(0, 0) scale(1) rotate(0deg); }
  22%  { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  29%  { opacity: 0; transform: translate(0, 0) scale(.55) rotate(12deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2) rotate(-30deg); }
}

/* mentre n'hi ha un d'encès, els dibuixets callen. L'aturada de
   l'animació (i el reinici en sortir) és a UNA sola regla compartida amb
   el retall, més avall: així no poden divergir. */
body[data-active] .doodle{
  opacity: 0;
  transition: opacity .25s cubic-bezier(.65,0,.35,1);
}

/* ---------------- etiqueta ---------------- */

/* Text sol, sense pastilla, corbat sobre un arc. Cada etiqueta es col·loca
   pel seu compte (--l, --t és el punt on recolza, centrat i per sobre),
   perquè cap tapi l'objecte que anomena. L'amplada va en % de la foto: així
   les lletres creixen i minven amb ella i sempre es veuen igual de grans. */
.label{
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: auto;
  z-index: 25;
  overflow: visible;
  transform: translate(-50%, calc(-100% + 10px));
  opacity: 0;
  pointer-events: none;
  /* sense pastilla, l'ombra és l'única cosa que el separa de la foto */
  filter: drop-shadow(0 2px 16px rgba(20,10,5,.65))
          drop-shadow(0 1px 3px rgba(20,10,5,.5));
  transition: opacity .3s cubic-bezier(.65,0,.35,1), transform .3s cubic-bezier(.65,0,.35,1);
}
.label text{
  fill: var(--crema);
  /* geomètrica i grassa, com el logo (Jost és una Futura lliure) */
  font-family: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 74px;          /* en unitats del viewBox, no de pantalla */
  font-weight: 700;
  letter-spacing: 0;
}
.label.is-on{
  opacity: 1;
  transform: translate(-50%, -100%);
}

/* ---------------- retalls dels objectes ---------------- */

.obj{
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  z-index: 10;
  object-fit: fill;            /* el retall ja ve amb la mida exacta */
  opacity: 0;
  pointer-events: none;
  /* Sempre el centre, també per al tremolor. Abans el tremolor girava des de
     la base (50% 96%) i en encendre's l'origen es desplaçava al centre amb
     transició; però mentre l'origen viatja, el creixement comença ancorat a
     baix i acaba ancorat al mig, i en el Markos, que fa 400 px d'alt, es veia
     com pujava primer i creixia després. Als cascos i a la càmera, petits, no
     es notava. Amb l'origen fix al centre no hi ha res que viatgi. */
  transform-origin: 50% 50%;
  /* El creixement i l'ombra van junts i amb la mateixa corba d'entrada i
     sortida suaus. Abans el creixement anava amb la corba «orgànica»
     (arrencada ràpida i frenada llarga) i es notava el cop de sortida. La
     corba és la general del lloc i dura 0,3 s, anada i tornada: es va provar
     a 0,9 i a 0,65 s i, un cop la transició va córrer de debò (vegeu el
     tremolor), anava massa lenta. */
  transition: opacity .3s cubic-bezier(.65,0,.35,1), transform .3s cubic-bezier(.65,0,.35,1),
              filter .3s cubic-bezier(.65,0,.35,1);
}
/* Vibració de mòbil: una ràfega curta i ràpida (mig segon, ~14 sacsejades)
   i després quiet una bona estona. El cicle és llarg (8 s) i els tres
   objectes van repartits dins del cicle (--d a 0, 2,6 i 5,3 s), així que a
   tota l'escena hi ha una ràfega cada dos segons i mig, mai dues de seguides.
   El retall és el mateix tros de foto que hi ha a sota, així que pot estar
   sempre a la vista: només se'n nota el moviment. Com que és un gir, el
   Markos es mou més que la càmera — que és el que toca. */
body.is-ready .obj{
  opacity: 1;
  animation: tremolor 8s linear var(--d, 0s) infinite;
}
/* El tremolor va amb les propietats soltes «translate» i «rotate», i no amb
   «transform». No és cosmètic: mentre una animació CSS té agafada una
   propietat, el navegador no hi deixa córrer cap transició —ni en treure
   l'animació en el mateix instant—, i el creixement del hover, que va per
   «transform», sortia de cop. Es notava sobretot al Markos: amb --d a 0 s la
   seva animació està sempre en marxa; als altres dos, el retard de 2,6 i
   5,3 s deixava una finestra en què la transició sí que corria, i per això
   semblava que a ells sí i a ell no. Amb el tremolor en propietats a part,
   «transform» queda lliure per a la transició, sempre. */
/* El rètol del mòbil: puja amb la ràfega del tremolor (que acaba al 6,8%),
   s'hi està fins al 26% (uns 2 s) i se'n va abans del 32%, que és quan el
   següent objecte comença a tremolar (els retards van a 0, 2,6 i 5,3 s). */
@keyframes tremolor{
  0%    { translate: 0 0;            rotate: 0deg; }
  .9%   { translate: 1.4px -.6px;    rotate: .28deg; }
  1.8%  { translate: -1.3px .5px;    rotate: -.28deg; }
  2.7%  { translate: 1.4px .4px;     rotate: .24deg; }
  3.6%  { translate: -1.2px -.5px;   rotate: -.24deg; }
  4.5%  { translate: 1.1px .3px;     rotate: .18deg; }
  5.4%  { translate: -.8px -.3px;    rotate: -.14deg; }
  6.3%  { translate: .4px .1px;      rotate: .06deg; }
  6.8%, 100% { translate: 0 0;      rotate: 0deg; }
}
/* en encendre'n un, la resta desapareixen amb la foto i s'atura el tremolor.
   Vibració i dibuixets s'aturen a la MATEIXA regla i es tornen a crear en el
   mateix instant en sortir: si una s'atura, l'altra també. */
body[data-active] :is(.obj, .doodle){ animation: none; }
body[data-active] .obj{ opacity: 0; }
/* En encendre's creix una mica, i des del centre. Abans pujava 4 px i creixia
   des de la base: el retall se separava de la foto de sota i per les vores
   de baix es veia l'objecte doblat, com un fantasma. Creixent des del
   centre el retall tapa sempre el tros que li correspon. */
body[data-active] .obj.is-on{
  opacity: 1;
  animation: none;
  transform: scale(1.03);
  filter: drop-shadow(0 12px 20px rgba(20,10,5,.3))
          drop-shadow(0 0 18px rgba(255,214,168,.3))
          brightness(1.03);
}

/* ---------------- la captura i la galeria ---------------- */

/* el flaix: blanc de cop i s'apaga */
.flaix{
  position: fixed; inset: 0;
  z-index: 60;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
/* El flaix de la càmera, suau: puja i baixa amb la corba de tot el lloc i
   no arriba al blanc ple. Abans saltava a blanc en 40 ms, i al mòbil (on s'hi
   entra pel menú) es veia com un tall (03/10/2026). */
body.is-capture .flaix{ animation: flaix .7s cubic-bezier(.65,0,.35,1); }
@keyframes flaix{
  0%   { opacity: 0; }
  35%  { opacity: .55; }
  100% { opacity: 0; }
}

/* la captura: la mateixa foto de fons, retallada com a pantalla, que
   s'encongeix fins al seu lloc a la galeria mentre li creix un marge blanc */
.snap{
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 55;
  padding: 0;
  background: #fff;
  box-shadow: 0 0 0 rgba(20,10,5,0);
  opacity: 0;
  pointer-events: none;
  will-change: left, top, width, height;
}
.snap img{ width: 100%; height: 100%; object-fit: cover; }
/* el <picture> no ha de fer de capsa: la imatge es mesura contra la cel·la */
.snap picture, .gitem picture{ display: contents; }
body.is-capture .snap{ opacity: 1; }
.snap.is-flying{
  /* entrada i sortida suaus, com el vol del quadre de «Qui soc» */
  transition: left .85s cubic-bezier(.65,0,.35,1), top .85s cubic-bezier(.65,0,.35,1),
              width .85s cubic-bezier(.65,0,.35,1), height .85s cubic-bezier(.65,0,.35,1),
              padding .85s cubic-bezier(.65,0,.35,1), box-shadow .85s cubic-bezier(.65,0,.35,1), opacity .3s cubic-bezier(.65,0,.35,1);
  padding: .7vh;
  box-shadow: 0 18px 40px rgba(20,10,5,.28);
}
.snap.is-done{ opacity: 0; }

/* la galeria: tot l'ample, scroll horitzontal, columnes de mides diferents */
.galeria{
  position: fixed; inset: 0;
  z-index: 30;
  background: var(--rosa);
  /* les fotos comencen per sota del logo i amb un bon coixí: abans el
     capçal les trepitjava (el logo acabava a 90px i elles començaven a 84) */
  padding-top: calc(var(--capcal-mig) + var(--logo-h) / 2 + 31px);
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.65,0,.35,1), visibility 0s linear .5s;
}
.galeria.is-measure{ visibility: hidden; opacity: 0; }   /* muntada però no visible: per mesurar */
.galeria.is-open{ visibility: visible; opacity: 1; transition: opacity .5s cubic-bezier(.65,0,.35,1); }

.galeria__track{
  height: 100%;
  display: flex;
  gap: 1.6vh;
  padding: 0 6vw 3vh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;       /* el suavitzat el decideix el JS segons la roda */
}
.galeria__track::-webkit-scrollbar{ display: none; }
/* Totes les fotos són 3:2 i es respecta: cada peça té aquesta proporció
   exacta, i la varietat surt de l'alçada (--h, % de la pista). Les columnes
   són tan amples com la peça més ampla; en una parella, la petita s'alinea
   a un costat o a l'altre (--al) per donar ritme. */
.gcol{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6vh;
  min-width: 0;
}
.gitem{
  height: calc(var(--h) * 1%);
  aspect-ratio: 3 / 2;
  align-self: var(--al, start);
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  background: #e8cfca;
  opacity: 0;
  transform: translateY(18px) scale(.98);
  /* en tancar, s'esvaeixen amb el fons i no desapareixen de cop */
  transition: opacity .4s cubic-bezier(.65,0,.35,1), transform .4s cubic-bezier(.65,0,.35,1);
}
.gitem img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gitem--snap{ padding: .7vh; background: #fff; box-shadow: 0 10px 28px rgba(20,10,5,.18); }
/* la cel·la de la captura no porta el desplaçament d'entrada de les altres:
   és el destí del vol, i s'ha de mesurar allà on quedarà de veritat */
.gitem--snap{ transform: none; }
/* entren una darrere l'altra, d'esquerra a dreta */
.galeria.is-in .gitem{
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.65,0,.35,1) calc(var(--i) * 60ms), transform .7s cubic-bezier(.65,0,.35,1) calc(var(--i) * 60ms);
}
/* la primera és la captura que acaba d'aterrar: hi és de cop, i l'overlay
   s'esvaeix a sobre d'una imatge idèntica */
.galeria.is-in .gitem--snap{ transition-duration: 0s; transition-delay: 0s; }

/* Els dos botons van centrats amb el logo del capçal: --capcal-mig surt de
   la mida del logo, així que si aquella canvia, tots dos el segueixen.
   El translateY(-50%) els centra sense haver de saber-ne l'alçada. */
.galeria__close{
  position: absolute;
  top: var(--capcal-mig); right: clamp(16px, 4vw, 48px);
  z-index: 2;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--tinta); color: var(--rosa);
  display: grid; place-items: center;
  padding: 0; -webkit-appearance: none; appearance: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .3s cubic-bezier(.65,0,.35,1);
}
@media (hover: hover){ .galeria__close:hover{ transform: translateY(-50%) rotate(90deg); background: var(--taronja); } }

/* descarregar-les totes: a dalt a l'esquerra, a l'alçada de la creu de
   tancar (és de tota la galeria, no d'una foto); s'amaga mentre n'hi ha
   una de gran, que allà només hi ha de manar la foto */
.galeria__all{
  position: absolute;
  left: clamp(16px, 4vw, 48px); top: var(--capcal-mig);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  transform: translateY(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--tinta); color: var(--rosa);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s cubic-bezier(.65,0,.35,1), opacity .25s cubic-bezier(.65,0,.35,1);
}
@media (hover: hover){ .galeria__all:hover{ transform: translateY(calc(-50% - 2px)); background: var(--taronja); color: var(--crema); } }

.galeria.has-big .galeria__all{ opacity: 0; pointer-events: none; }
/* Amb una foto gran, la tira no es mou: ni amb la roda, ni arrossegant, ni
   amb el dit. Per canviar de foto hi ha les fletxes, les tecles i les fotos
   del costat. El JS sí que la pot moure (ha de centrar la que es fa gran):
   overflow amagat atura l'usuari, no el codi. */
.galeria.has-big .galeria__track{ overflow-x: hidden; }

/* amb la galeria oberta: el logo en fosc (seu sobre el rosa) i l'escena de
   sota, quieta */
body.is-galeria .nav__logo .logo__mar,
body.is-galeria .nav__logo .logo__os{ filter: none; }
body.is-galeria :is(.obj, .doodle){ animation-play-state: paused; }
body.is-galeria{ overflow: hidden; }

/* ---------------- la foto triada ---------------- */

/* Clic en una foto: creix al seu lloc fins al 96% de la pista (la
   companya de columna, si en té, es plega), les columnes del voltant
   s'aparten soles perquè l'amplada surt de l'alçada (3:2), i la pista
   llisca fins a deixar-la al centre. Tot amb la mateixa corba, entrada i
   sortida suaus. */
.gitem{ cursor: default; }
.gitem:focus-visible{ outline: 3px solid var(--taronja); outline-offset: 3px; }

/* Mode "foto gran": la pista s'alinea a baix, cada columna passa a ser una
   fila (les parelles apilades queden una al costat de l'altra), totes les
   fotos són miniatures de la mateixa alçada i la triada és gran. El canvi
   de lloc i de mida l'anima el JS amb FLIP: aquí només hi ha la disposició
   final i la corba. */
/* les columnes segueixen ocupant tota l'alçada (si no, els % de les fotos
   es perden); l'alineació a baix es fa dins de cada columna */
.galeria.has-big .gcol{ flex-direction: row; align-items: flex-end; }
.galeria.has-big .gitem{ height: 22%; align-self: flex-end; }
.galeria.has-big .gitem.is-big{ height: 96%; z-index: 2; }
/* la corba única de tot el moviment (el FLIP la fa servir per a transform) */
.galeria.is-settled .gitem{
  transition: transform .8s cubic-bezier(.65,0,.35,1), opacity .45s cubic-bezier(.65,0,.35,1);
}

/* els controls: només quan n'hi ha una de gran. Creu, descàrrega i
   comptador van a les cantonades de la foto gran: el JS publica el seu
   rectangle final (--bx, --by, --bw, --bh) i el CSS els hi enganxa.
   Apareixen quan la foto ha aterrat (retard = durada del viatge). */
/* apareixen quan la foto ha acabat de créixer i s'amaguen de seguida en
   canviar de foto: el moment el decideix el JS, aquí només el fos */
.visor{
  position: fixed; inset: 0;
  z-index: 35;
  pointer-events: none;
}
/* les fletxes es queden fixes mentre hi ha una foto gran (is-nav); els
   controls de les cantonades van i venen amb cada foto (is-open) */
.visor__prev, .visor__next{ opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(.65,0,.35,1); }
.visor.is-nav .visor__prev, .visor.is-nav .visor__next{ opacity: 1; pointer-events: auto; }
.visor__close, .visor__dl, .visor__bar{ opacity: 0; pointer-events: none; transition: opacity .15s cubic-bezier(.65,0,.35,1); }
.visor.is-open .visor__close, .visor.is-open .visor__dl, .visor.is-open .visor__bar{ opacity: 1; transition: opacity .3s cubic-bezier(.65,0,.35,1); }
.visor.is-open .visor__close, .visor.is-open .visor__dl{ pointer-events: auto; }
/* creu a dalt a l'esquerra, descàrrega a baix a la dreta, a 14 px de la
   vora de la foto (dues classes: han de guanyar al top: 50% de les fletxes) */
.visor__btn.visor__close{
  left: calc(var(--bx) + 14px);
  top:  calc(var(--by) + 14px);
  margin-top: 0;
}
@media (hover: hover){ .visor__btn.visor__close:hover{ transform: rotate(90deg); } }

.visor__btn.visor__dl{
  left: calc(var(--bx) + var(--bw) - 46px - 14px);
  top:  calc(var(--by) + var(--bh) - 46px - 14px);
  margin-top: 0;
}
@media (hover: hover){ .visor__btn.visor__dl:hover{ transform: translateY(-2px); } }

.visor__btn{
  position: absolute;
  top: 50%; margin-top: -23px;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: var(--tinta); color: var(--rosa);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .25s cubic-bezier(.65,0,.35,1), transform .3s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover){ .visor__btn:hover{ background: var(--taronja); } }

.visor__prev{ left: clamp(12px, 2.5vw, 36px); }
.visor__next{ right: clamp(12px, 2.5vw, 36px); }
@media (hover: hover){ .visor__prev:hover{ transform: translateX(-3px); } }

@media (hover: hover){ .visor__next:hover{ transform: translateX(3px); } }

/* el comptador, a baix a l'esquerra */
.visor__bar{
  position: absolute;
  left: calc(var(--bx) + 14px);
  top:  calc(var(--by) + var(--bh) - 14px);
  transform: translateY(-100%);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  pointer-events: none;
}
.visor__count{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(44,26,22,.55); color: var(--crema);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}

/* el camí de tornada: la captura creix des de la seva cel·la fins a omplir
   la pantalla, i a sota ja hi ha la portada */
.snap.is-back{ opacity: 1; }
/* la tornada arrenca suau i frena suau: entrada i sortida, no només sortida
   com l'anada (que vol semblar un disparador) */
.snap.is-back.is-flying{
  transition: left .95s cubic-bezier(.65,0,.35,1), top .95s cubic-bezier(.65,0,.35,1),
              width .95s cubic-bezier(.65,0,.35,1), height .95s cubic-bezier(.65,0,.35,1),
              padding .95s cubic-bezier(.65,0,.35,1), box-shadow .95s cubic-bezier(.65,0,.35,1), opacity .3s cubic-bezier(.65,0,.35,1);
}

/* ---------------- pantalles estretes ---------------- */

/* En vertical la foto es veu sencera (si no, els objectes queden fora)
   i a sota hi ha la mateixa llista en forma de botons. */
@media (max-width: 900px), (orientation: portrait){
  /* En vertical la foto és una altra: assets/landing-mobil.jpg, un retall
     2:3 de DSC01576 amb el Markos a la cadira i prou (el <picture> de
     l'HTML la tria amb aquest mateix tall). Va d'una vora a l'altra, sense
     subsòl: on s'acaba la gespa, el degradat la cus amb el rosa i el
     reproductor ve arran. Les proporcions es tornen a declarar aquí perquè
     les de :root són les de landing-v2 (i una propietat personalitzada es
     resol allà on es declara). */
  .scene{
    /* Omple la primera pantalla sencera, com fa la portada a l'ample: la
       foto es dibuixa tan ampla com calgui perquè la seva alçada sigui la
       de la pantalla, i el que sobra pels costats es retalla. En un mòbil
       de 390×844 són 563 px d'ample: se'n veu el 69%. */
    --cover-w: max(100vw, calc(100svh * 0.66667));
    --crop-y: 0px;
    /* La foto fa 1200×2016: els primers 1800 són la foto de debò (2:3, la
       que omple la pantalla) i els 216 de sota, un 12%, són gespa afegida
       (retalla-objectes no hi té res a veure: és un reflex de les últimes
       files, desenfocat). És la franja on el degradat rosa s'ho menja tot:
       així la primera pantalla és foto fins a baix i el degradat comença
       JUST després, no dins. */
    --full-ar: 0.59524;                 /* 1200 / 2016 */
    --frame-ar: 0.66667;                /* la part de foto: 1200 / 1800 */
    --frame-h: calc(var(--cover-w) / var(--frame-ar));   /* = la pantalla */
    --full-h:  calc(var(--cover-w) / var(--full-ar));    /* = pantalla + 12% */
    height: var(--full-h);
  }
  /* El retall no és centrat: la finestra s'ancora al 42% de la foto, que és
     on el Markos queda sencer del respatller a la cama i l'altra cadira ja
     no hi entra. El clamp fa que, si la foto no cal eixamplar-la (mòbils
     baixos), quedi simplement centrada i mai no deixi vora buida. */
  .scene__bg{
    margin-left: clamp(calc(50vw - var(--cover-w)), calc(var(--cover-w) * -.42), -50vw);
  }
  /* els objectes, apagats: al mòbil a les pàgines s'hi va pel menú. Ni
     zones, ni rètols, ni dibuixets, ni tremolor; la foto i prou */
  .hot, .label, .doodle, .obj{ display: none; }
  /* (Aquí hi havia un degradat rosa fix a dalt de la portada, per fondre-la
     amb la barra de Safari; fora el 03/10/2026, a petició del client.) */
  /* el degradat, només sobre la franja afegida: comença on s'acaba la
     pantalla (--frame-h) i és rosa ple al final de la foto */
  .scene::after{
    top: var(--frame-h);
    height: calc(var(--full-h) - var(--frame-h));
    background: linear-gradient(rgba(243,217,213,0), var(--rosa) 92%);
  }
  /* I els objectes, apagats: al mòbil a les pàgines s'hi va pel menú. Ni
     zones, ni rètols, ni dibuixets, ni tremolor; la foto i prou. */
  .hot, .label, .doodle{ display: none; }
  body.is-ready .obj{ animation: none; }
  /* i el degradat que cus la foto amb el rosa segueix la vora de la foto,
     no la de l'escena, que ara és més llarga */
  .scene::after{ bottom: auto; }
  .baixa{ display: none; }
  /* ---- la galeria, en vertical ----
     A l'ample és una tira horitzontal de columnes; al mòbil passa a ser un
     feed: les columnes s'apilen, cada foto ocupa tota l'amplada i l'alçada
     surt del 3:2. Es baixa amb el dit. La foto gran no creix (ja és tan
     ampla com pot): en tocar-ne una, les altres s'apaguen i la tira es
     queda quieta amb ella al mig; les fletxes de baix passen a la següent.
     El JS ho sap perquè mira la direcció de la tira (centerNow). */
  .galeria{ padding-top: 112px; }     /* el logo acaba a 90: que no el trepitgin */
  .galeria__track{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 16px 24px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .gcol{ flex-direction: column; justify-content: flex-start; gap: 12px; }
  .gitem,
  .galeria.has-big .gitem,
  .galeria.has-big .gitem.is-big{ height: auto; width: 100%; align-self: auto; }
  .galeria.has-big .gcol{ flex-direction: column; align-items: stretch; }
  /* La primera foto i la captura, al mòbil, són la foto vertical de la
     portada. A la cel·la 3:2 se'n veu la franja del Markos (cap a cadira);
     en tornar a la portada, mentre la captura creix, l'enquadrament puja
     fins a dalt de tot, que és com la portada la mostra: en aterrar
     coincideix píxel a píxel amb la foto de sota. */
  .gitem--snap img, .snap img{ object-position: 50% 42%; }
  .snap.is-back.is-flying img{
    object-position: 50% 0%;
    transition: object-position .95s cubic-bezier(.65,0,.35,1);
  }
  /* amb una foto gran, la tira porta mitja pantalla de buit a baix: així
     fins i tot l'última es pot posar al mig (abans quedava enganxada a baix
     i els seus controls trepitjaven les fletxes) */
  .galeria.has-big .galeria__track{ overflow-y: hidden; padding-bottom: 50svh; }
  .galeria.has-big .gitem:not(.is-big){ opacity: .35; }
  /* «Descarrega-les totes» només amb la icona: amb el text xocava amb el
     logo, que al mòbil ocupa gairebé tot el capçal */
  .galeria__all{
    width: 30px; height: 30px;
    padding: 0; gap: 0;
    justify-content: center;
    font-size: 0;
  }
  /* les fletxes de la foto gran, per sobre del botó del menú (que és a
     baix a la dreta): a la mateixa vora, una fila més amunt */
  .visor__prev, .visor__next{ top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
}

/* la llista de botons de la portada (a l'apartat de shows, .menu és una
   altra cosa: per això aquesta va lligada a la portada) */
body.landing .menu{
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 16px;
}
/* Al mòbil tampoc: a les pàgines s'hi va pel menú (26/09/2026). El bloc
   es queda a l'HTML per si es torna a voler. */
.menu a{
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(44,26,22,.2);
  font-size: 14px;
  font-weight: 700;
}
.menu a:active{ background: var(--tinta); color: var(--rosa); }

/* Aquí hi havia un bloc de «reduir moviment» que aturava la fletxa, les
   anelles i el creixement dels objectes. Fora (03/10/2026): el client vol
   tota l'animació també amb l'ajust activat, que el seu iPhone el porta. */

/* ══════════════════════════════════════════════════════════
   El peu
   Una sola ratlla al final del document, amb el que la llei demana tenir a
   mà. Ha d'ocupar poc i no destorbar: tipografia petita, color apagat i una
   línia fina a sobre. No va fix: es queda al final i només el veu qui hi
   arriba. Les capes que tapen la pantalla —la galeria i el quadre de «Qui
   soc»— van en «fixed» i li passen per damunt sense tocar-lo.
   ══════════════════════════════════════════════════════════ */
.peu{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px clamp(16px, 3vw, 40px);
  padding: 16px clamp(16px, 4vw, 48px);
  /* a baix hi deixa lloc al botó del menú, que no tapi els enllaços */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(44, 26, 22, .13);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(44, 26, 22, .5);
}
.peu p{ margin: 0; }
.peu nav{ display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 2vw, 26px); }
.peu a{
  color: inherit;
  transition: color .25s cubic-bezier(.65,0,.35,1);
}
.peu a:hover{ color: var(--taronja); }

/* ══════════════════════════════════════════════════════════
   La part de sota de la portada (la de la Neus, 04/10/2026): on encaixa.
   El seu CSS és a css/portada-sota.css (convertit, no s'hi toca a mà);
   això és nostre. A l'ample, la imatge de la portada acaba amb un tros de
   rosa pla (l'últim 13%): el bloc hi puja l'11%, com feia el reproductor
   d'abans, perquè el cap del Markos tregui el cap just on s'acaba la terra
   i no quedi un buit rosa al mig. Al mòbil la foto és una altra i acaba
   fosa amb el rosa: allà n'hi ha prou amb un pèl d'aire.
   ══════════════════════════════════════════════════════════ */
.landing-cos{ margin-top: calc(clamp(46px, 6svh, 72px) - var(--full-h) * .11); }
@media (max-width: 900px), (orientation: portrait){
  .landing-cos{ margin-top: 0; }
}

/* Els noms de les cançons són botons, i el Safari de l'iPhone deixa partir
   la ratlla entre un botó i la coma o el punt que el segueix: la coma se
   n'anava sola a una ratlla. El botó i la seva puntuació van junts. */
.landing-cos .tema-i{ white-space: nowrap; }

/* ══════════ «By QZ Estudi» al peu ══════════
   Qui ha fet la web. En clicar-hi surt una bafarada petita, com els globus
   de les dates, amb el correu de l'estudi. */
.peu__sep{ margin: 0 .35em; }
.peu__qz{ position: relative; display: inline-block; }
.peu__qz-boto{
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(44, 26, 22, .25); text-underline-offset: 3px;
  transition: color .25s cubic-bezier(.65,0,.35,1);
}
.peu__qz-boto:hover, .peu__qz-boto[aria-expanded="true"]{ color: #d6427f; text-decoration-color: currentColor; }
.peu__qz-globus{
  position: absolute; left: -14px; bottom: calc(100% + 14px); z-index: 40;
  width: max-content; max-width: min(290px, 80vw);
  padding: 12px 16px;
  background: #fff; color: #2C1A16;
  border-radius: 16px;
  font: 700 14px/1.35 "Archivo", "Inter", system-ui, sans-serif; letter-spacing: -0.01em;
  text-align: left;
  box-shadow: 0 16px 30px rgba(96, 44, 72, .26);
  transform-origin: 18% 130%;
  animation: qzIn .45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.peu__qz-globus[hidden]{ display: none; }
.peu__qz-globus::after{        /* la cua */
  content: ""; position: absolute; left: 26px; bottom: -6px;
  width: 16px; height: 16px; border-radius: 3px;
  background: #fff; transform: rotate(45deg);
}
.peu__qz-globus a{ color: #d6427f; text-decoration: underline; text-underline-offset: 3px; }
.peu__qz-globus a:hover{ color: #b32d66; }
@keyframes qzIn{
  0%  { opacity: 0; transform: scale(.55) rotate(-6deg); }
  100%{ opacity: 1; transform: scale(1) rotate(-2deg); }
}