/* ============================================================
   JAZZSÍ — WordPress integration reset
   ============================================================ */
.wp-block-post-title, .entry-title { display: none !important; }
.wp-block-group.alignfull.app { padding: 0; margin: 0; max-width: none; }
.wp-block-group.app > .wp-block-group.content { min-width: 0; }
.home__subtitle, .home__tagline, p.home__subtitle, p.home__tagline { margin: 0 !important; }
body .wp-site-blocks { padding: 0 !important; min-height: 100vh; display: flex; flex-direction: column; }
body .wp-site-blocks > main { padding: 0 !important; margin: 0 !important; flex: 1 1 auto; display: flex; flex-direction: column; }
body .wp-site-blocks > main > .wp-block-group.alignfull { flex: 1 1 auto; }
.wp-block-post-content, .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; display: flex; flex-direction: column; flex: 1 1 auto; }
.wp-block-post-content > *, .entry-content > * { flex: 1 1 auto; }
.wp-block-template-part { margin: 0 !important; }
.wp-block-group.content { padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; }
/* Kill WP's default 1.2rem margin-block between flow-layout children so our
   .page-head / .programa / .filters / etc. stack flush, without vertical gaps. */
.wp-block-group.content > *,
.wp-block-group.content :where(.is-layout-flow) > *{
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Neutralize WP core .is-layout-constrained max-width on our full-width content */
.is-layout-constrained > .contacte,
.is-layout-constrained > .info,
.is-layout-constrained > .la-sala,
.is-layout-constrained > .soci,
.is-layout-constrained > .projecte-v2,
.is-layout-constrained > .info__intro,
.is-layout-constrained > .info__hours,
.is-layout-constrained > .info__address,
.is-layout-constrained > .home,
.is-layout-constrained > .home-programa,
.is-layout-constrained > .programa,
.is-layout-constrained > .concert,
.is-layout-constrained > .artist-v2,
.is-layout-constrained > .stylehub,
.is-layout-constrained > .soci,
.is-layout-constrained > .page-head,
.is-layout-constrained > .wp-block-group {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body .wp-block-group.alignfull { margin-left: 0 !important; margin-right: 0 !important; }

/* ============================================================
   JAZZSÍ — brutalist minimalist
   Black on white. Warm yellow #FCEA21 for active states & CTAs.
   ============================================================ */

:root{
  --black:#000;
  --white:#fff;
  --yellow:#FFED00;
  --line:#000;
  /* GRUIX DE LÍNIA — referència: Web_jazzsi_Layout_V2.pdf
     L'artboard del PDF és de 1920×1280 i TOTS els traços són de 3 unitats,
     és a dir 3px sobre una amplada de 1920px. Abans aquí hi havia «3pt», que
     el navegador resol a 4px (1pt = 1,333px): d'aquí que les línies del menú,
     del programa i de la resta de seccions sortissin més gruixudes que al PDF.
     Per sota de 1600px baixem a 2px per mantenir la proporció del disseny en
     portàtils (MacBook 13"), tal com demanava l'equip. */
  --line-w:3px;
  --muted:#8a8a8a;
  --paper:#fafafa;
  --menu-w: max(380px, 33.3333vw);

  /* TEXT DE PÀGINA — Projecte / Informació / Espai.
     Spec de l'equip (28/07): «Helvetica Bold 37pt / Interlineat 35pt», i les
     tres pàgines han de tenir la MATEIXA mida. Al PDF de referència la unitat
     coincideix amb el píxel (artboard de 1920), per tant 37px / 35px. */
  --page-text-size: 37px;
  --page-text-lh: 35px;
}

@media (max-width:1599px){
  :root{ --line-w:2px; }
}

/* Tauleta estreta: 37px no hi cap, baixem proporcionalment. */
@media (max-width:1199px) and (min-width:821px){
  :root{ --page-text-size: 30px; --page-text-lh: 29px; }
}
@media (max-width:820px){
  :root{ --page-text-size: clamp(22px, 6vw, 32px); --page-text-lh: 1.1; }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior: smooth; }

html,body{
  margin:0; padding:0;
  background:var(--white);
  color:var(--black);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
}

body{ min-height:100vh; overflow-x:hidden; overflow-y:auto; }

a{ color:inherit; text-decoration:none; }
button{
  font-family:inherit; font-weight:inherit;
  background:transparent; border:none; padding:0; margin:0;
  cursor:pointer; color:inherit;
}

/* ========== APP SHELL ========== */
.app{
  display:grid;
  grid-template-columns: 1fr var(--menu-w);
  min-height:100vh;
}
.content{
  min-width:0;
  position:relative;
}

/* ========== LATERAL MENU ========== */
.menu{
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  position:sticky; top:0; height:100vh;
  background:var(--white);
  border-left: var(--line-w) solid var(--black);
  z-index: 1;
}

.menu__item{
  flex:1 1 0;
  display:flex; align-items:center;
  padding: 0 20px;
  font-size: clamp(48px, 3.8vw, 80px);
  line-height: 1;
  letter-spacing: clamp(0.14em, 0.6vw, 0.22em);
  text-transform:uppercase;
  font-weight:700;
  border-bottom:var(--line-w) solid var(--black);
  text-align:left;
  width:100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.menu__item:last-child{ border-bottom:none; }
.menu__label{ display:block; }
.menu__logo{
  display:none;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:100%;
}
.menu__logo img{
  display:block;
  height: 0.96em;
  width: auto;
  max-width: calc(var(--menu-w) - 56px);
  object-fit: contain;
  transform: translateY(-0.11em);
}
.menu__item.is-active{ background:var(--white); }
.menu__item.is-active .menu__label{ display:none; }
.menu__item.is-active .menu__logo{ display:flex; }
a.menu__item:hover,
a.menu__item:focus,
a.menu__item:focus-visible,
a.menu__item:active{
  background: transparent;
  outline: none;
}
a.menu__item.is-active:hover,
a.menu__item.is-active:focus,
a.menu__item.is-active:focus-visible,
a.menu__item.is-active:active{
  background: var(--yellow);
}
a.menu__item.is-active:hover .menu__label,
a.menu__item.is-active:focus .menu__label,
a.menu__item.is-active:focus-visible .menu__label,
a.menu__item.is-active:active .menu__label{ display:block; }
a.menu__item.is-active:hover .menu__logo,
a.menu__item.is-active:focus .menu__logo,
a.menu__item.is-active:focus-visible .menu__logo,
a.menu__item.is-active:active .menu__logo{ display:none; }

/* ========== HOME — logo centered + rotated -45deg + rombo ========== */
.wp-block-group.home{
  position:relative;
  height: calc(100vh - 2px);
  min-height: 620px;
  overflow: hidden;
}
.home__logo-wrap{
  position:absolute;
  top:50%; left:50%;
  width: 100%;
  transform: translate(-50%, -50%) rotate(-45deg);
  text-align:center;
}
.home__logo{
  font-size: clamp(90px, 12vw, 240px);
  line-height: 1;
  letter-spacing: 0.13em;
  font-weight:500;
  display:inline-flex;
  align-items: baseline;
  white-space:nowrap;
  position:relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.home__dot{
  position:absolute;
  width: 0.14em; height: 0.14em;
  background: var(--yellow);
  top: -0.18em; left: 33%;
  transform: translateX(-50%) rotate(45deg);
}
.home__tagline{
  position:absolute;
  right: 28px; bottom: 22px;
  font-size: 12px;
  text-transform:uppercase;
  letter-spacing: 0.08em;
  font-weight:600;
}
.home__subtitle{
  position:absolute;
  top: 28px; left: 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform:uppercase;
  max-width: 360px;
  line-height: 1.45;
}

/* ========== HOME — logo image variant (PNG centrado y encuadrado) ========== */
/* «JAZZSÍ encara més gran i que ocupi més ample» (petició de l'equip, 30/07).
   El fitxer és un quadrat de 1600×1600 amb la paraula en diagonal i un 7% de
   marge transparent a cada costat (mesurat sobre el PNG: la tinta va de 110 a
   1488 px). Abans la mida la marcava l'ALÇADA, i com que el quadrat ha de
   cabre sencer, la paraula es quedava curta.
   Ara la marca l'AMPLADA i deixem que el quadrat sobresurti per dalt i per
   baix, que és on només hi ha marge buit; .home ja retalla amb overflow:hidden.
   El límit de 112vh és el punt en què l'excés vertical encara cap dins d'aquest
   marge transparent: per sobre començaria a menjar-se les puntes de la J i la Í. */
.home__logo-img-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(6px, 1vw, 20px);
}
.home__logo-img{
  display: block;
  flex: 0 0 auto;
  width: min(100%, 112vh);
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* ========== CUSTOM CURSOR — yellow rhombus ========== */
#jazzsi-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  background: var(--yellow);
  border: none;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%) rotate(45deg);
  will-change: transform, left, top;
  display: none;
}
@media (hover: hover) and (pointer: fine){
  *{ cursor: none !important; }
  #jazzsi-cursor{ display: block; }
}

/* ========== PROGRAMA ========== */
.home-programa{ flex: 0 0 auto; }
.programa{ display:flex; flex-direction:column; margin: 0 !important; padding: 0 !important; }
.programa + .programa{ margin-top: 0 !important; }

/* /programa/ — 6 files que ocupen 100vh igualades amb el menú lateral; el "+" segueix 88×88 centrat amb padding visual */
.programa--upcoming{
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  height: 100vh;
  overflow: visible;
}
.programa--upcoming .programa__row{
  grid-template-columns: 1fr calc(100vh / 6);
  grid-template-rows: 1fr;
  position: relative;
}
.programa--upcoming .programa__plus{
  align-self: end;
  justify-self: end;
  width: 60px;
  height: 60px;
  margin: 0;
}
.programa--upcoming .programa__row .programa__expand{
  position: absolute;
  top: 0;
  left: 0;
  right: calc(60px + 36px + 30px);
  bottom: 0;
  border-top: 0;
  z-index: 4;
  padding: 18px 28px;
  background: #fff;
}
/* Amb 6 files la graella arriba a la vora inferior de la pantalla i no cal línia
   de tancament. Amb 5 o menys, l'última fila conserva la seva línia inferior, que
   coincideix amb la separació del menú lateral (totes dues graelles són 100vh/6). */
.programa--upcoming .programa__row:nth-child(6):last-child{
  border-bottom: 0;
}
.programa--upcoming .programa__title{
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.1;
}
.programa--upcoming .programa__date{
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.2;
  margin-top: 6px;
}
.programa--upcoming .programa__row-main{
  padding: 18px 32px 20px;
}
.programa--upcoming .programa__expand-desc{
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight:300;
  line-height: 1.4;
  margin-bottom: 16px;
}
.programa--upcoming .programa__expand-actions{
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* /arxiu/ — mateix estil que programa, però amb scroll i sense límit de 6 */
.programa--archive{
  /* deixem espai per archive-footer (altura = un item de menú + 2px per pujar la línia) al peu */
  height: calc(100vh - calc(100vh / 6) - 2px);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.programa--archive::-webkit-scrollbar{
  display: none; /* Chrome / Safari / Edge */
}
.archive-footer{
  height: calc(100vh / 6 + 2px);
  border-top: var(--line-w) solid var(--black);
  display: flex;
  flex-direction: column;
}
.archive-footer .page-head--footer{
  border-top: 0;
  border-bottom: 0;
  height: auto;
  padding: 20px 32px 12px;
  flex: 0 0 auto;
}
.archive-footer .filters--footer{
  border-top: 0;
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 8px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.programa--archive .programa__row{
  height: calc(100vh / 6);
  flex-shrink: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  cursor: default;
}
.programa--archive .programa__plus,
.programa--archive .programa__expand{
  display: none !important;
}
.programa--archive .programa__row-main{
  padding: 18px 32px 20px;
}
.programa--archive .programa__title{
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.1;
}
.programa--archive .programa__date{
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.2;
  margin-top: 6px;
}
.programa--archive .programa__row:last-child{
  border-bottom: 0;
}
.programa__row{
  display:grid;
  grid-template-columns: 1fr 88px;
  grid-template-rows: 88px auto;
  align-items:stretch;
  border-bottom:var(--line-w) solid var(--black);
}
/* Every row keeps its bottom border; the natural page-flow between
   .programa blocks and .filters provides consistent dividers. */

/* Neutralize wpautop: stray <p> wrappers become transparent to the grid. */
.programa__row > p,
.programa__row-main > p{
  display: contents;
  margin: 0;
}
/* Adoption-agency can clone an empty .programa__row-main inside the stray <p>;
   hide it so it doesn't take a grid slot. */
.programa__row p .programa__row-main{ display: none; }

.programa__row-main{
  grid-column: 1;
  grid-row: 1;
  padding: 14px 28px 16px;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.programa__title{
  font-size: clamp(18px, 1.65vw, 24px);
  line-height:1.15;
  font-weight:700;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap:anywhere;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.programa__date{
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight:700;
  margin-top:0;
  letter-spacing: 0;
  text-transform: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.programa__plus{
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  z-index: 5;
  background: var(--yellow);
  border: 2px solid transparent;
  border-left-color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
  line-height: 1;
  color: transparent;
  text-decoration: none;
  transition: transform .15s ease;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.programa__plus::before,
.programa__plus::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: #000;
}
/* Geometria del «+» presa del PDF de referència: el braç fa el 38,8% del costat
   de la caixa i el traç el 9,7% (mesurat sobre BOTO_+.png, on la caixa del PDF i
   la de la web sortien exactament a la mateixa mida: braç 40 vs 60 px i traç
   10 vs 6 px). Per tant: més petit i més gruixut («en negreta»). */
.programa__plus::before{
  width: 34px; height: 8px;
  transform: translate(-50%, -50%);
}
.programa__plus::after{
  width: 8px; height: 34px;
  transform: translate(-50%, -50%);
}
/* Caixa de 60px (/programa/ i /arxiu/): mateixes proporcions. */
.programa--upcoming .programa__plus::before,
.programa--archive .programa__plus::before{ width: 23px; height: 6px; }
.programa--upcoming .programa__plus::after,
.programa--archive .programa__plus::after{ width: 6px; height: 23px; }
/* Borda completa sòlida als 4 costats: es manté igual en quadrat i en rombe.
   Tots els costats negres → no hi ha mitra triangular a les cantonades. */
.programa--upcoming .programa__plus,
.programa--archive .programa__plus{
  border: var(--line-w) solid var(--black);
  box-shadow: none;
  top: 2px;
  left: 2px;
}
.programa__row.is-open .programa__plus{
  transform: rotate(45deg);
  z-index: 10;
}

.programa__expand{
  grid-column: 1 / -1;
  border-top:var(--line-w) solid var(--black);
  padding: 18px 28px 22px;
  font-size: 18px;
  font-weight:300;
  line-height:1.5;
  background: transparent;
  display:none;
  grid-template-columns: 1fr auto;
  gap: 20px;
  /* La columna esquerra té dues línies (descripció breu + «+ INFO») i la dreta
     només una (preu). Amb «center» el preu queda a mitja alçada, entre les dues
     línies: descuadrat. Amb «baseline» el preu s'alinea amb la primera línia,
     que és la descripció breu (petició de l'equip, 28/07). */
  align-items:baseline;
}
.programa__row.is-open .programa__expand{ display: grid; }
.programa__expand-price{ font-weight:600; white-space:nowrap; display: inline-flex; align-items: baseline; gap: 8px; }
.programa__expand-price .hl{ background: var(--yellow); padding: 2px 4px; }
.programa__expand-price-base{ color: #666; font-weight:600; }
.programa__expand-buy{
  background: var(--yellow);
  color: #000;
  font-weight:600;
  text-decoration: none;
  padding: 2px 6px;
  display: inline-block;
  line-height: 1.2;
  transition: background .08s linear, color .08s linear;
}
.programa__expand-buy:hover{ background: #000; color: var(--yellow); }
.programa__expand-buy.is-disabled{ opacity: 0.5; pointer-events: none; }
.programa__expand-link{
  text-decoration:underline; text-underline-offset: 3px;
  font-weight:600; text-transform:uppercase; font-size:12px;
  letter-spacing: 0.06em;
}

.programa__row.is-past .programa__title,
.programa__row.is-past .programa__date{ color: #555; }
.past-badge{
  display: inline-block;
  background: #000; color: #fff;
  padding: 1px 6px; font-size: 10px; letter-spacing: 0.1em;
  margin-left: 10px; font-weight:700; vertical-align: 2px;
}
.live-badge{
  display: inline-block;
  background: var(--yellow); color: #000;
  padding: 1px 6px; font-size: 10px; letter-spacing: 0.1em;
  margin-left: 10px; font-weight:700; vertical-align: 2px;
  border: var(--line-w) solid #000;
  animation: jazzsi-live-pulse 1.4s ease-in-out infinite;
}
@keyframes jazzsi-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.programa__row.is-live .programa__plus{
  background: #000; color: var(--yellow);
}

/* ========== CONCERT DETAIL ========== */
.concert{ padding: 0; }
.concert__grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  min-height: 560px;
}
.concert__photo{
  background: transparent;
  position:relative; overflow:hidden;
  min-height:560px;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.concert__photo img{
  position: static;
  width: 100%; height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.concert__photo .ph{
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
}
/* Wrapper que ajusta su altura al contenido (imatge o ph) i serveix de
   contenidor de posicionament per als tags d'estil. Així els tags queden
   sempre dins del cartell, no flotant en el padding del .concert__photo. */
.concert__photo-frame{
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.concert__photo-frame img{
  width: 100%; height: auto; display: block;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.concert__tags{
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.concert__tag{
  background: #000; color: #fff;
  padding: 3px 7px;
  font-size: 10px; font-weight:600; text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none;
}
.concert__tag:hover{ background: var(--yellow); color: #000; }
/* (Aquí hi havia una regla duplicada per a .artist-v2__photo img amb
   position:absolute + object-fit:cover que xocava amb la de la secció
   ARTIST V2. Eliminada: la definitiva és la d'aquella secció.) */
.concert__body{ padding: 44px 48px 48px 56px; min-width:0; }
.concert__name{
  font-size: clamp(36px, 3.4vw, 56px);
  line-height:1.02;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.concert__datetime{
  display:flex; justify-content:space-between; gap:24px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight:700;
  margin-top: 0;
  margin-bottom: 24px;
}
.concert__price{
  margin: 0 0 28px;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight:700;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.concert__price-base{ color: #666; font-weight:600; }
.concert__buy{
  background: var(--yellow);
  color: #000;
  font-weight:600;
  text-decoration: none;
  padding: 2px 6px;
  display: inline-block;
  line-height: 1.2;
  transition: background .08s linear, color .08s linear;
}
.concert__buy:hover{ background: #000; color: var(--yellow); }
.concert__buy.is-disabled{ opacity: 0.5; pointer-events: none; }
/* Esdeveniment passat: amaga preu i botó de compra (no aporten res a un evento ya celebrado) */
.concert--past .concert__price,
.concert--past .concert__buy,
.concert--past .upcoming-cta{ display: none !important; }
.concert__body p{
  font-weight:500; font-size: clamp(17px, 1.35vw, 22px); line-height:1.5;
  margin: 0 0 18px; text-align: justify; hyphens:auto;
}
.concert__artist{
  font-weight:600;
  font-size: clamp(19px, 1.6vw, 26px);
  margin-top: 28px;
  text-align: left !important;
}
.concert__artist a{
  text-decoration: none;
  font-weight:700;
  text-transform: uppercase;
}
.concert__artist-plus{
  display: inline-block;
  background: transparent;
  color: #000;
  font-weight:800;
  line-height: 1;
  padding: 0 2px;
  margin-left: -0.28em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ========== INFO ========== */
.info{
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2px);
  width: 100%;
  flex: 1 1 auto;
}
.info__intro{
  flex: 2 1 0;
  padding: 32px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: var(--page-text-size);
  font-weight:700;
  line-height: var(--page-text-lh);
  letter-spacing: -0.005em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}
.info__intro p,
.info__intro > p{
  margin: 0 0 16px;
  text-align: justify;
  hyphens: auto;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.info__intro p:last-child{ margin-bottom: 0; }
.info__intro .hl{
  color: var(--yellow);
}
.info__newsletter,
.info__telegram,
.info__projectes{
  flex: 0 0 auto;
  padding: 32px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: var(--page-text-size);
  font-weight: 700;
  line-height: var(--page-text-lh);
  letter-spacing: -0.005em;
}
.info__telegram p,
.info__projectes p{ margin: 0 0 16px; }
.info__telegram p:last-child,
.info__projectes p:last-child{ margin-bottom: 0; }
.info__newsletter a,
.info__telegram a,
.info__projectes a{
  color: var(--yellow);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.08em;
  font-weight: 700;
}
.info__newsletter a:hover,
.info__newsletter a:focus-visible,
.info__telegram a:hover,
.info__telegram a:focus-visible,
.info__projectes a:hover,
.info__projectes a:focus-visible{
  background: #000;
  color: var(--yellow);
  outline: 0;
}
.info__hours{
  flex: 3 1 0;
  padding: 32px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: var(--page-text-size);
  line-height: var(--page-text-lh);
  display: block;
}
.info__hours table{
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.info__hours td{
  padding: 4px 0;
  font-weight:700;
  font-variant-numeric: tabular-nums;
  font-size: inherit;
  white-space: nowrap;
  vertical-align: top;
}
.info__hours td:first-child{ width: 33.333%; text-align: left; text-transform: none; }
.info__hours td:nth-child(2){ width: 33.333%; text-align: center; }
.info__hours td:last-child{ width: 33.333%; text-align: right; }
.info__address a{
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.info__address{
  flex: 1 1 0;
  padding: 32px;
  font-size: var(--page-text-size);
  line-height: var(--page-text-lh);
  font-weight:700;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ========== BOTIGA ========== */
.botiga{ display:grid; grid-template-columns: 1fr 1fr; gap:0; }
.botiga__item{
  padding: 28px 28px 26px;
  border-bottom:var(--line-w) solid var(--black);
  border-right:var(--line-w) solid var(--black);
  display:flex; flex-direction:column;
}
.botiga__item:nth-child(2n){ border-right:none; }
.botiga__item:nth-last-child(-n+2){ border-bottom:none; }
.botiga__photo{ aspect-ratio: 4/5; margin-bottom:16px; position:relative; overflow:hidden; }
.botiga__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 12px; margin-bottom: 8px;
}
.botiga__name{
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight:800;
  text-transform:uppercase;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.botiga__price{ font-weight:700; font-size: 22px; }
.botiga__price .hl{ background: var(--yellow); padding: 1px 4px; }
.botiga__desc{ font-weight:300; font-size: 12.5px; line-height:1.45; color:#222; }
.botiga__cta{ margin-top: auto; padding-top: 14px; }
.botiga__btn{
  display:inline-flex;
  border: var(--line-w) solid var(--black);
  padding: 10px 14px;
  font-size: 12px; text-transform:uppercase; letter-spacing:.08em;
  background: var(--white); font-weight:700;
  transition: background .08s;
}
.botiga__btn:hover{ background: var(--yellow); }

/* ========== LA SALA (top 2-col: text + plano) ========== */
.la-sala{ width: 100%; }
.la-sala__top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--line-w) solid var(--black);
}
.la-sala__text{
  padding: 32px;
  border-right: var(--line-w) solid var(--black);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.25;
  font-weight:700;
  letter-spacing: -0.005em;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.la-sala__text p{ margin: 0 0 14px; }
.la-sala__text p:last-child{ margin-bottom: 0; }
.la-sala__text .hl,
.la-sala__text a.hl{
  color: var(--yellow);
  font-weight:700;
  text-decoration: none;
}
.la-sala__plano{
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  min-height: 320px;
}
.la-sala__plano img{
  max-width: 100%;
  max-height: 460px;
  height: auto;
  display: block;
}
.la-sala__plano .plan-placeholder{
  width: 100%;
  max-width: 680px;
  aspect-ratio: 10 / 7;
  border: var(--line-w) solid var(--black);
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* ========== ESPAI ========== */
.espai__intro{
  padding: 26px 32px;
  border-bottom:var(--line-w) solid var(--black);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight:600;
  line-height:1.45;
  max-width: 720px;
}
.espai__intro .hl{ color:var(--yellow);
}
.espai__plan{ padding: 20px 32px 32px; border-bottom:var(--line-w) solid var(--black); }
.plan-svg{
  width:100%; max-width: 620px; height:auto; display:block;
  border:var(--line-w) solid var(--black); background: #fff;
}
.plan-placeholder{
  width: 100%; max-width: 680px;
  aspect-ratio: 10 / 7;
  border: var(--line-w) solid var(--black);
  position: relative; background: #fff; overflow: hidden;
}

.rider-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 32px;
  border-top: var(--line-w) solid var(--black);
  border-bottom: var(--line-w) solid var(--black);
  flex-wrap: wrap;
}
.rider-header__title{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight:800; text-transform: uppercase;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.rider-download-btn{
  background: var(--yellow);
  border: var(--line-w) solid var(--black);
  padding: 12px 18px;
  font-size: 13px; font-weight:800;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: background .08s linear, transform .05s linear;
}
.rider-download-btn:hover{ background: #fff; }
.rider-download-btn:active{ transform: translate(1px, 1px); }
.rider-download-btn.is-disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Specs de la sala ocultes (aforament, superficie, escenari, accessibilitat) */
.espai__specs{ display:none; }
.espai__specs .cell{
  padding: 22px 32px;
  border-right:var(--line-w) solid var(--black);
  border-bottom:var(--line-w) solid var(--black);
}
.espai__specs .cell:nth-child(2n){ border-right:none; }
.espai__specs .cell .k{ text-transform:uppercase; font-size:11px; letter-spacing:.1em; margin-bottom:4px; color:#444; }
.espai__specs .cell .v{ font-size: clamp(20px, 2vw, 28px); font-weight:700; }

/* ========== RIDER ========== */
.rider__table{ width:100%; border-collapse:collapse; font-size: 14px; }
.rider__table th, .rider__table td{
  border-bottom: var(--line-w) solid var(--black);
  padding: 9px 16px;
  text-align:left; font-weight:600;
  vertical-align: middle;
}
.rider__table td.qty{
  width: 60px;
  background: var(--yellow);
  text-align:center;
  border-left: var(--line-w) solid var(--black);
  font-weight:700;
  font-variant-numeric: tabular-nums;
}
.rider__section{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #000; color: #fff;
}
.rider__section td{ padding: 10px 16px; font-weight:700; }

/* ========== CONTACTE ========== */
.contacte{
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  background: var(--yellow);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.contacte__row{
  flex: 1 1 0;
  min-height: 0;
  padding: 18px 32px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.15;
  font-weight:600;
  letter-spacing: -0.005em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.contacte__row .label{ display:block; font-weight:600; }
.contacte__row a{ text-decoration: none; font-weight:600; }
.contacte__row + .contacte__row{ }
.contacte__item + .contacte__item{ margin-top: 6px; }
.contacte__collab{
  flex: 1 1 0;
  min-height: 0;
  padding: 18px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.contacte__collab .label{
  font-size: inherit;
  font-weight:600;
  display:block;
  margin: 0;
}
/* Logos de col·laboradors: sense caixa ni fons, alineats pel centre.
   L'alçada de cada logo és --logo-base * --k, i el PHP calcula --k a partir
   de la forma del fitxer i de l'escala del backoffice, de manera que tots
   pesin visualment igual encara que tinguin proporcions molt diferents. */
.contacte__logos{
  /* Alçada de la tinta. La limiten alhora l'ample (la fila no s'ha de partir
     en dues línies) i l'alçada de la fila del grid de Contacte. */
  --logo-base: clamp(20px, min(2.3vw, 5.5vh), 40px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 44px);
}
/* El marc retalla el marge buit del fitxer: el que es veu és exactament el
   dibuix, així l'alçada de --logo-base és alçada de tinta real i tots els
   logos pesen igual encara que els fitxers vinguin amb més o menys aire. */
.contacte__logo-wrap{
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  /* Ample calculat + alçada derivada de la proporció: si en una pantalla
     estreta el logo no hi cap, encongeix sencer en lloc de deformar-se. */
  width: calc(var(--logo-base) * var(--k, 1) * var(--ar, 1));
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 1);
}
.contacte__logo{
  position: absolute;
  display: block;
  width:  calc(100% / var(--fw, 1));
  height: calc(100% / var(--fh, 1));
  left: calc(var(--fx, 0) * -100% / var(--fw, 1));
  top:  calc(var(--fy, 0) * -100% / var(--fh, 1));
  max-width: none;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.contacte__logo-link{ display: flex; align-items: center; flex: 0 0 auto; }
.contacte__logo-ph{
  flex: 0 0 auto;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .55;
}

/* ========== BREADCRUMB / URL BAR ========== */
.urlbar{
  display:flex; align-items:center; justify-content: space-between; gap: 16px;
  padding: 12px 0 12px 32px;
  border-bottom: var(--line-w) solid var(--black);
  background: transparent;
  font-size: 13px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:600;
}
.urlbar .path{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.urlbar .path b{ color:#000; font-weight:600; text-transform: none; }
.urlbar .path span.slash{ color:#888; margin: 0 8px; font-weight:300; }
.urlbar .path a{ color: inherit; text-decoration: none; }
.urlbar .path a:hover,
.urlbar .path a:focus{ opacity: 1; color: inherit; text-decoration: none; }
.urlbar .path a b{ text-transform: uppercase; font-weight:600; }
.urlbar .back{
  border: 0;
  background: transparent;
  padding: 4px 18px;
  font-size: 28px;
  line-height: 1;
  font-weight:300;
  color: #000;
  text-decoration: none;
  flex: 0 0 auto;
  transition: opacity .08s;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.urlbar .back:hover{ opacity: 0.6; background: transparent; }

/* ========== PAGE HEAD ========== */
.page-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  border-bottom: var(--line-w) solid var(--black);
  gap: 16px;
}
.page-head__title{
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.005em;
  line-height:1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.page-head__sub{
  font-size: 12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  color:#444;
}

/* ========== FES-TE SOCI ========== */
.soci{ padding: 0; }
.soci__hero{
  padding: 34px 32px 30px;
  border-bottom: var(--line-w) solid var(--black);
  background: var(--yellow);
}
.soci__kicker{
  font-size: 12px; font-weight:800; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 14px;
}
.soci__title{
  font-size: clamp(56px, 9vw, 140px);
  font-weight:800; line-height: 0.88; letter-spacing: -0.035em;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 18px;
}
.soci__price{
  font-size: clamp(32px, 4.5vw, 68px);
  font-weight:800; letter-spacing: -0.01em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 6px;
}
.soci__price .hl{ background: #fff; padding: 0 6px; border: var(--line-w) solid var(--black); }
.soci__sub{ font-size: 14px; font-weight:700; text-transform: uppercase; letter-spacing: 0.04em; }
.soci__block{
  padding: 26px 32px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight:600; line-height: 1.3;
  max-width: 720px;
}
.soci__h2{
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight:800; line-height: 1;
  text-transform: uppercase; margin-bottom: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.soci__block p{ margin: 0; font-weight:600; font-size: inherit; }
.soci__block b{ background: var(--yellow); padding: 0 3px; }

.soci__perks{ display: grid; grid-template-columns: 1fr 1fr; }
.soci__perk{
  padding: 24px 28px 26px;
  border-right: var(--line-w) solid var(--black);
  border-bottom: var(--line-w) solid var(--black);
}
.soci__perk:nth-child(2n){ border-right: none; }
.soci__perk-n{
  font-size: clamp(36px, 4vw, 56px);
  font-weight:800; line-height: 1; letter-spacing: -0.02em;
  margin-bottom: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.soci__perk-t{
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight:800; line-height: 1.1;
  text-transform: uppercase; margin-bottom: 8px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.soci__perk-d{ font-size: 14px; font-weight:400; line-height: 1.45; }

.soci__cta-wrap{
  padding: 30px 32px;
  border-bottom: var(--line-w) solid var(--black);
  background: var(--yellow);
}
.soci__cta{
  display: inline-block;
  background: #000; color: #fff;
  border: var(--line-w) solid #000;
  padding: 22px 30px;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight:800; text-transform: uppercase;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.soci__cta:hover{ background: #fff; color: #000; }
.soci__cta.is-disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.soci__finep{ margin-top: 14px; font-size: 12px; font-weight:600; max-width: 620px; line-height: 1.4; }

.soci__faq{ padding: 26px 32px 32px; }
.soci__faq-title{
  font-size: 14px; font-weight:800; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 16px;
  border-bottom: var(--line-w) solid var(--black); padding-bottom: 10px;
}
.soci__faq-row{ padding: 14px 0; border-bottom: var(--line-w) solid var(--black); }
.soci__faq-row:last-child{ border-bottom: none; }
.soci__faq-q{
  font-size: 16px; font-weight:800; text-transform: uppercase;
  margin-bottom: 4px;
}
.soci__faq-a{ font-size: 14px; font-weight:400; line-height: 1.45; }
.soci__faq-a .hl{ background: var(--yellow); padding: 1px 3px; font-weight:700; }

/* ========== FILTERS (Concerts) ========== */
.filters{
  padding: 18px 32px;
  border-bottom: var(--line-w) solid var(--black);
  display: flex; flex-direction: column; gap: 14px;
}
.filters--row{
  flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 22px 28px;
}
.filters__inline{ display: flex; align-items: center; gap: 10px; }
.filters__label{ font-size: 11px; font-weight:800; text-transform: uppercase; letter-spacing: 0.1em; }
.filters__chips{ display: flex; gap: 6px; flex-wrap: wrap; }
.filt-chip{
  border: var(--line-w) solid var(--black); background: #fff;
  padding: 0 12px;
  height: 34px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 12px; font-weight:700; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.filt-chip:hover{ background: #f4f4f4; }
.filt-chip.is-on{ background: var(--yellow); }

.dd{ position: relative; display: inline-flex; align-items: center; }
.dd__btn{
  border: var(--line-w) solid var(--black); background: #fff;
  padding: 0 10px 0 12px;
  height: 34px;
  line-height: 1;
  box-sizing: border-box;
  font-size: 12px; font-weight:700; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 140px;
  justify-content: space-between;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dd__btn:hover{ background: #f4f4f4; }
.dd__btn.is-on{ background: var(--yellow); }
.dd__chev{ font-size: 11px; line-height: 1; transform: translateY(1px); }
.dd.is-open .dd__chev{ transform: translateY(1px) rotate(180deg); }
.dd .dd__menu{ display: none; }
.dd.is-open .dd__menu{ display: block; }
.dd__menu{
  position: absolute; bottom: calc(100% - 2px); left: 0;
  min-width: 100%; max-height: 320px; overflow-y: auto;
  background: #fff;
  border: var(--line-w) solid var(--black);
  list-style: none; margin: 0; padding: 0;
  z-index: 100;
  box-shadow: 4px -4px 0 0 var(--black);
}
.dd__item{
  display: flex; width: 100%;
  align-items: center; justify-content: space-between; gap: 20px;
  text-align: left;
  padding: 8px 14px;
  border: none; background: #fff;
  font-size: 12px; font-weight:700; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: var(--line-w) solid var(--black);
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dd__menu li:last-child .dd__item{ border-bottom: none; }
.dd__item:hover{ background: var(--yellow); }
.dd__go{ font-size: 14px; font-weight:800; }

/* ========== ARTIST V2 ========== */
/* La foto es sortia de la seva columna i tapava el títol i la bio (petició de
   l'equip, 29/07: «de disseny queda la foto per davant de la resta»).
   Causa mesurada en viu: la columna de la foto feia 274px, però l'element
   tenia aspect-ratio:1 + min-height:480px, cosa que li forçava 480px d'amplada;
   com que a més és position:relative, es pintava per damunt del text.
   Solució: tracks amb minmax(0,…) perquè no es puguin desbordar i la foto pren
   l'alçada de la fila en lloc de derivar l'amplada de l'alçada. */
.artist-v2__head{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0;
  min-height: 480px;
}
.artist-v2__photo{
  position: relative; background: transparent; overflow: hidden;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
}
.artist-v2__photo img{
  position: static;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}
.artist-v2__photo .ph{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.artist-v2__tags{
  position: absolute;
  left: 48px; bottom: 48px;
  z-index: 2;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.artist-v2__tag{
  background: #000; color: #fff;
  padding: 3px 7px;
  font-size: 10px; font-weight:600; text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none;
}
.artist-v2__info{ padding: 32px 36px 36px 64px; }
.artist-v2__kicker{
  font-size: 13px; font-weight:600; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 14px;
  background: var(--yellow); display: inline-block; padding: 3px 8px;
}
.artist-v2__name{
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 0.95; font-weight:800;
  text-transform: uppercase; letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.artist-v2__meta{
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight:600; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 22px;
  color: #666;
}
.artist-v2__meta a{
  color: inherit;
  text-decoration: none;
}
.artist-v2__meta a:hover,
.artist-v2__meta a:focus{
  color: inherit;
  text-decoration: none;
  opacity: 1;
}
.artist-v2__quote{
  margin: 0 0 24px;
  padding: 10px 16px;
  border-left: 4px solid var(--yellow);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight:600; font-style: italic;
  line-height: 1.3; max-width: 720px;
}
.artist-v2__bio{
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight:400; line-height: 1.55;
  max-width: 760px; margin-bottom: 26px;
}
.artist-v2__bio p{ margin: 0 0 12px; }
.artist-v2__bio p:last-child{ margin-bottom: 0; }

.artist-v2__facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 36px;
  margin-bottom: 26px;
  max-width: 820px;
}
.artist-v2__facts .fact{
  padding: 0;
}
.fact__k{ font-size: 12px; font-weight:600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; color: #666; }
.fact__v{ font-size: clamp(15px, 1.15vw, 18px); font-weight:600; line-height: 1.4; }
.fact__v .lnk{ font-weight:600; text-transform: uppercase; }
.fact__v .lnk-url{ font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #666; }

.artist-v2__stats{ display: flex; gap: 22px; font-size: clamp(15px, 1.3vw, 18px); font-weight:600; flex-wrap: wrap; }
.artist-v2__stats .hl{ background: var(--yellow); padding: 1px 5px; font-weight:600; }

.artist-v2__section-title{
  padding: 22px 36px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight:800; text-transform: uppercase;
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.artist-v2__section-title .count{
  font-size: 15px; font-weight:800;
  background: var(--yellow); padding: 3px 9px;
}

/* ========== VIDEO GRID ========== */
.video-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: var(--line-w) solid var(--black);
}
.video-card{
  border-right: var(--line-w) solid var(--black);
  border-bottom: var(--line-w) solid var(--black);
  display: flex; flex-direction: column;
}
.video-card:nth-child(2n){ border-right: none; }
.video-card:nth-last-child(-n+2){ border-bottom: none; }
.video-card__thumb{
  position: relative; aspect-ratio: 16/9;
  background: #000; overflow: hidden;
}
.video-card__thumb iframe{ width:100%; height:100%; border:0; }
.video-card__play{
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--yellow);
  border: var(--line-w) solid #000;
  font-size: 26px; font-weight:800;
  display: flex; align-items: center; justify-content: center;
  padding-left: 6px;
}
.video-card__play:hover{ background: #fff; }
.video-card__duration{
  position: absolute; right: 10px; bottom: 10px;
  background: #000; color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight:700;
  padding: 3px 7px;
}
.video-card__body{ padding: 14px 18px 16px; }
.video-card__title{ font-size: 15px; font-weight:800; text-transform: uppercase; line-height: 1.15; margin-bottom: 4px; }
.video-card__source{ font-size: 11px; font-weight:600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; }

.video-note{
  padding: 18px 32px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: 12px; font-weight:600; line-height: 1.4;
  background: #fafafa;
}

/* ========== STYLE HUB ========== */
.stylehub__hero{
  padding: 34px 32px 30px;
  border-bottom: var(--line-w) solid var(--black);
  background: var(--yellow);
}
.stylehub__kicker{
  font-size: 11px; font-weight:800; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 14px;
  background: #000; color: #fff; display: inline-block; padding: 3px 7px;
}
.stylehub__title{
  font-size: clamp(56px, 9vw, 140px);
  font-weight:800; line-height: 0.88; letter-spacing: -0.035em;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 10px;
}
.stylehub__tagline{
  font-size: clamp(18px, 2vw, 28px);
  font-weight:800; font-style: italic;
  letter-spacing: -0.005em;
}
.stylehub__block{
  padding: 26px 32px;
  border-bottom: var(--line-w) solid var(--black);
  max-width: 780px;
}
.stylehub__intro{
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight:800; line-height: 1.3;
  margin: 0 0 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.stylehub__p{ font-size: 15px; font-weight:400; line-height: 1.55; margin: 0 0 12px; }
/* Vinculació JazzSí-estil — bloc al peu amb to editorial (estil la-sala / info) */
.stylehub__vincul{
  padding: 32px;
  border-bottom: var(--line-w) solid var(--black);
  font-size: clamp(20px, 2vw, 28px);
  font-weight:700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.stylehub__vincul-label{
  display: inline-block;
  font-size: 11px;
  font-weight:800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #000;
  color: #fff;
  padding: 3px 8px;
  margin-bottom: 20px;
  line-height: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.stylehub__vincul-intro{
  margin: 0 0 18px;
  font-size: inherit;
  font-weight:800;
  line-height: 1.2;
}
.stylehub__vincul-body{
  font-size: 15px;
  font-weight:400;
  line-height: 1.6;
  max-width: 780px;
}
.stylehub__vincul-body p{ margin: 0 0 12px; font-weight:400; font-size: inherit; }
.stylehub__vincul-body p:last-child{ margin-bottom: 0; }
.stylehub__vincul-body b,
.stylehub__vincul-body strong{ background: var(--yellow); padding: 0 3px; font-weight:700; }

.stylehub__refs{
  padding: 20px 32px;
  border-bottom: var(--line-w) solid var(--black);
}
.stylehub__refs-label{
  font-size: 11px; font-weight:800; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.stylehub__refs-list{ display: flex; gap: 6px; flex-wrap: wrap; }
.stylehub__ref{
  background: #fff; border: var(--line-w) solid #000;
  padding: 4px 10px;
  font-size: 12px; font-weight:700; text-transform: uppercase; letter-spacing: 0.04em;
}
.stylehub__artists{
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: var(--line-w) solid var(--black);
}
.stylehub__artist{
  text-align: left; padding: 18px 22px;
  background: #fff;
  border-right: var(--line-w) solid var(--black);
  border-bottom: var(--line-w) solid var(--black);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.stylehub__artist:hover{ background: var(--yellow); }
.stylehub__artist:nth-child(2n){ border-right: none; }
.stylehub__artist:nth-last-child(-n+2){ border-bottom: none; }
.stylehub__artist-name{
  grid-column: 1; grid-row: 1;
  font-size: clamp(20px, 2vw, 28px); font-weight:800;
  text-transform: uppercase; line-height: 1; letter-spacing: -0.01em;
}
.stylehub__artist-meta{
  grid-column: 1; grid-row: 2;
  font-size: 11px; font-weight:800; text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 6px; color: #333;
}
.stylehub__artist-go{
  grid-column: 2; grid-row: 1 / 3;
  align-self: center;
  font-size: 24px; font-weight:800;
}

/* ========== UPCOMING CTA ========== */
.upcoming-cta{
  background: var(--yellow);
  border: var(--line-w) solid var(--black);
  padding: 8px 14px;
  font-size: 11px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700;
  display: inline-block;
}
.upcoming-cta:hover{ background:#fff; }

/* ========== PLACEHOLDER IMAGES ========== */
.ph{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg,
      #e7e7e7 0 6px,
      #efefef 6px 12px);
  display:flex; align-items:center; justify-content:center;
  color:#555;
  font-family: ui-monospace, Menlo, monospace;
  font-weight:600;
  font-size: 11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding: 10px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 820px){
  .app{ grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .app > .content,
  .content{
    border-right: none;
    border-bottom: var(--line-w) solid var(--black);
    order: 1;
  }
  .app > .wp-block-template-part{
    order: 2;
  }
  .menu{
    position: static; height: auto;
    padding-bottom: 0;
    border-left: 0;
  }
  .menu__item{
    min-height: 72px;
    flex: 0 0 auto;
    padding: 12px 16px 14px;
    font-size: clamp(30px, 8vw, 48px);
    line-height: 1.1;
    letter-spacing: 0.035em;
    justify-content: flex-start;
  }

  .wp-block-group.home{
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .home__logo{ font-size: clamp(72px, 18vw, 160px); }
  .home__subtitle{ left: 18px; right: 18px; max-width: none; }
  .home__tagline{ right: 18px; bottom: 14px; }

  #jazzsi-cursor{ display: none !important; }
  *{ cursor: auto !important; }

  .page-head{ padding: 14px 18px; }
  .programa__row-main{ padding: 12px 18px; }
  .programa__plus{ font-size: 20px; }
  .programa__expand{ padding: 14px 18px; grid-template-columns: 1fr; gap: 10px; }
  /* En desktop, .programa--upcoming .programa__expand està `position:absolute`
     i ocupa la fila sencera (que té alçada fixa de 100vh/6). En mobile la fila
     és `min-height:72px` i el contingut absolut sortia per sobre de la següent.
     Aquí el tornem al flux normal perquè eixampli la fila. */
  .programa--upcoming .programa__row .programa__expand{
    position: static;
    right: auto;
    bottom: auto;
    padding: 14px 18px 16px;
  }

  /* Vista mobile: el programa deixa de ser un grid de 6 files de 100vh
     i passa a ser un llistat flexible (la pantalla mòbil no té prou alt
     per a 6 files completes; abans el `height:100vh` + `overflow:visible`
     feia que el contingut sortís per sota i es superposés amb el menú). */
  .programa--upcoming{
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .programa--upcoming .programa__row{
    grid-template-columns: 1fr 72px;
    grid-template-rows: auto;
    height: auto;
    min-height: 72px;
    align-items: stretch;
  }
  /* En mobile `.content` ja tanca amb el seu border-bottom; si l'última fila hi
     afegís la seva línia es veuria doble. */
  .programa--upcoming .programa__row:last-child{ border-bottom: 0; }
  /* Mateix patró que desktop: + de 60×60 enganxat a la cantonada inferior
     dreta del row, amb `top:2px` per fer que el seu borde inferior solapi
     amb el border-bottom de la fila (sense crear línia doble).
     `left:0` sobreescriu el `left:2px` del desktop perquè en mobile no hi
     ha menú lateral i no volem que el + sobresurti per la dreta. */
  .programa--upcoming .programa__plus{
    width: 60px;
    height: 60px;
    align-self: end;
    justify-self: end;
    top: 2px;
    left: 0;
  }
  .programa--archive{
    height: auto;
    overflow-y: visible;
  }
  .programa--archive .programa__row{
    height: auto;
    min-height: 72px;
    grid-template-rows: auto;
    align-items: stretch;
  }
  /* Tipografia mobile: el clamp de desktop tenia mínim 28px de títol i 20px de data,
     massa grans per a un viewport estret. Aquí els ajustem perquè el contingut càpiga
     dins de cada fila sense desbordar a la següent. */
  .programa--upcoming .programa__title,
  .programa--archive .programa__title{
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.15;
  }
  .programa--upcoming .programa__date,
  .programa--archive .programa__date{
    font-size: clamp(14px, 3.7vw, 18px);
    line-height: 1.25;
    margin-top: 5px;
  }
  .programa--archive .programa__row-main,
  .programa--upcoming .programa__row-main{
    padding: 12px 16px 14px;
  }
  .archive-footer{
    height: auto;
  }

  .concert__grid{ grid-template-columns: 1fr; min-height: 0; }
  /* Mobile: el cartell és aspect 3/4 (vertical). Abans el `.concert__photo`
     forçava aspect 4/3 + min-height 260 i `overflow:hidden` retallava el
     cartell per sota. També tenia `border-bottom` que separava visualment
     el cartell del body. Aquí ho eliminem perquè el cartell creixi sencer
     i flueixi sense barra cap al body. */
  .concert__photo{
    border-right: none;
    border-bottom: none;
    min-height: 0;
    aspect-ratio: auto;
    padding: 18px;
  }
  .concert__body{ padding: 24px 18px 28px; }

  .botiga{ grid-template-columns: 1fr; }
  .botiga__item{ border-right:none; }
  .botiga__item:last-child{ border-bottom: none; }

  .espai__specs{ grid-template-columns: 1fr; }
  .espai__specs .cell{ border-right:none; }

  .info{ min-height: auto; }
  .info__intro, .info__hours, .info__address{ flex: 0 0 auto; }
  /* Contacte mobile: el grid de 6 files 1fr generava files molt altes
     amb el text centrat (semblava que sobrava espai). Passem a files
     `auto` perquè cada una s'ajusti al seu contingut, i augmentem la
     font perquè es llegeixi millor en mòbil. */
  .contacte{
    height: auto;
    grid-template-rows: repeat(6, auto);
  }
  .contacte__row{
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: clamp(16px, 4.2vw, 20px);
  }
  .contacte__collab{
    padding-top: 16px;
    padding-bottom: 16px;
  }
  /* En mòbil les files creixen: base fixa i una mica més gran perquè els
     logos institucionals (amb text petit) es continuïn llegint en embolcallar-se. */
  /* Mòbil: dues columnes fixes (Generalitat + Estrella / Barcelona + Meyer).
     La primera columna s'endú l'espai sobrant, que és on van els logos
     apaïsats amb text; la segona s'ajusta al seu contingut. */
  .contacte__logos{
    --logo-base: 28px;
    display: grid;
    /* Dues files i flux per columnes: institucions a l'esquerra
       (ICEC + Barcelona) i patrocinadors a la dreta (Estrella + Meyer). */
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: auto;
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: clamp(18px, 6vw, 40px);
    row-gap: 16px;
  }
  .info__intro, .info__newsletter, .info__telegram, .info__projectes, .info__hours, .info__address,
  .espai__intro, .espai__plan,
  .la-sala__text, .la-sala__plano,
  .contacte__row, .contacte__collab{
    padding-left: 18px; padding-right: 18px;
  }
  .la-sala__top{ grid-template-columns: 1fr; }
  .la-sala__text{ border-right: none; border-bottom: var(--line-w) solid var(--black); min-height: auto; }
  .la-sala__plano{ min-height: auto; }
  .info__hours td{ padding-right: 14px; font-size: 14px;}
  .rider__table th, .rider__table td{ padding: 8px 10px; font-size: 13px; }

  .artist-v2__head{ grid-template-columns: 1fr; min-height: 0; }
  /* Mobile: la foto d'artista és aspect 1:1 (quadrada). Igual que a concert,
     forçar aspect 4/3 + min-height + overflow:hidden retallava la imatge.
     Eliminem aquestes restriccions i el border-bottom perquè la foto flueixi
     sencera cap al body sense barra. */
  .artist-v2__photo{
    border-right: none;
    border-bottom: none;
    min-height: 0;
    aspect-ratio: auto;
    padding: 18px;
  }
  .artist-v2__info{ padding: 24px 18px 28px; }
  .artist-v2__facts{ grid-template-columns: 1fr; }
  .artist-v2__facts .fact{ border-right: none; }

  .video-grid{ grid-template-columns: 1fr; }
  .video-card{ border-right: none; }

  .stylehub__artists{ grid-template-columns: 1fr; }
  .stylehub__artist{ border-right: none; }
  /* Evitem la doble línia abans del menú: l'últim bloc dins del .stylehub
     ja no necessita border-bottom propi, la separació la fa el .content. */
  .stylehub > *:last-child{ border-bottom: 0; }
  /* Mateix patró per a la resta de wrappers de pàgina, per evitar doble línia
     a /informacio/, /la-sala/, /soci/, /espai/, /contacte/, /artistes/, /programa/, /arxiu/. */
  .info > *:last-child,
  .la-sala > *:last-child,
  .soci > *:last-child,
  .espai__plan:last-child,
  .espai__intro:last-child,
  .espai__specs > *:last-child,
  .botiga > *:last-child,
  .artist-v2 > *:last-child{
    border-bottom: 0;
  }

  .soci__perks{ grid-template-columns: 1fr; }
  .soci__perk{ border-right: none; }

  .filters--row{ flex-direction: column; align-items: flex-start; gap: 12px; }
}

button:focus-visible, a:focus-visible{
  outline: none;
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: #fff; border-left: var(--line-w) solid #000; }
::-webkit-scrollbar-thumb{ background: #000; }

/* ============================================================
   HOME — full-screen on mobile + scroll-down rombo indicator
   ============================================================ */

/* Indicador rombo de scroll-down — centrado bajo el logo */
.home__scroll-indicator{
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 64px);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  padding: 14px 22px;
  margin-bottom: -14px;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.home__diamonds{ display: none; }
.home__diamond{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--yellow);
  opacity: 0;
  transform: translateY(-22px) rotate(45deg);
  animation: jazzsi-scroll-fall 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: filter 0.25s ease;
}
.home__diamond--1{ animation-delay: 0s; }
.home__diamond--2{ animation-delay: 0.25s; }
.home__diamond--3{ animation-delay: 0.5s; }

@keyframes jazzsi-scroll-fall{
  0%   { transform: translateY(-22px) rotate(45deg);  opacity: 0; }
  18%  { opacity: 0.6; }
  50%  { transform: translateY(0)     rotate(225deg); opacity: 1; }
  82%  { opacity: 0.55; }
  100% { transform: translateY(22px)  rotate(405deg); opacity: 0; }
}

.home__scroll-label{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight:600;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  user-select: none;
  opacity: 1;
  animation: none;
}
/* «Substituir "scroll" per fletxa» (petició de l'equip, 28/07).
   La paraula es canvia per una fletxa avall dibuixada amb el mateix gruix de
   línia del disseny, per no dependre de cap glif tipogràfic. */
.home__scroll-arrow{
  display: block;
  width: 26px;
  height: 34px;
  position: relative;
  color: var(--black);
}
.home__scroll-arrow::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--line-w);
  height: 100%;
  background: currentColor;
  transform: translateX(-50%);
}
.home__scroll-arrow::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 15px;
  height: 15px;
  border-left: var(--line-w) solid currentColor;
  border-bottom: var(--line-w) solid currentColor;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: center;
}
.home__scroll-indicator:hover .home__scroll-arrow,
.home__scroll-indicator:focus-visible .home__scroll-arrow{
  transform: translateY(3px);
  transition: transform .18s ease;
}
@keyframes jazzsi-label-fade{
  0%   { opacity: 0; }
  18%  { opacity: 0.6; }
  50%  { opacity: 1; }
  82%  { opacity: 0.55; }
  100% { opacity: 0; }
}

/* Hover/focus: anim mas rapida, label subrayado, brillo */
.home__scroll-indicator:hover .home__diamond,
.home__scroll-indicator:focus-visible .home__diamond{
  animation-duration: 1s;
  filter: brightness(1.08);
}
.home__scroll-indicator:hover .home__scroll-label,
.home__scroll-indicator:focus-visible .home__scroll-label{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mientras el usuario esta scrolleando — disparado desde JS — animacion acelera y gana brillo */
body.is-scrolling .home__diamond{
  animation-duration: 0.8s;
  filter: brightness(1.18);
}

/* Animacion de entrada cuando aterrizas en /programa/ desde la portada */
@keyframes jazzsi-page-rise{
  0%   { transform: translateY(48px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
html.from-home .page-head,
html.from-home .filters{
  animation: jazzsi-page-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.from-home .page-head{ animation-delay: 0s; }
html.from-home .filters{ animation-delay: 0.08s; }

/* Cada concierto entra en cascada, de arriba a abajo, viniendo desde abajo */
html.from-home .programa__row{
  animation: jazzsi-page-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.from-home .programa__row:nth-child(1){ animation-delay: 0.14s; }
html.from-home .programa__row:nth-child(2){ animation-delay: 0.22s; }
html.from-home .programa__row:nth-child(3){ animation-delay: 0.30s; }
html.from-home .programa__row:nth-child(4){ animation-delay: 0.38s; }
html.from-home .programa__row:nth-child(5){ animation-delay: 0.46s; }
html.from-home .programa__row:nth-child(6){ animation-delay: 0.54s; }
html.from-home .programa__row:nth-child(7){ animation-delay: 0.62s; }
html.from-home .programa__row:nth-child(8){ animation-delay: 0.70s; }
html.from-home .programa__row:nth-child(9){ animation-delay: 0.78s; }
html.from-home .programa__row:nth-child(n+10){ animation-delay: 0.86s; }

/* Fade-out cuando salta el redirect a /programa/ */
html.jazzsi-leaving body{
  opacity: 0;
  transition: opacity 0.22s ease-out;
}

/* H1 oculto para SEO/a11y sin afectar visualmente */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile: portada pantalla completa, menu lateral oculto, rombo mas grande */
@media (max-width: 820px){
  body.page-id-10 .home,
  body.home .home{
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    aspect-ratio: auto;
  }
  body.page-id-10 .home__logo-img-wrap,
  body.home .home__logo-img-wrap{
    padding: clamp(20px, 6vmin, 60px);
  }
  body.page-id-10 .home__logo-img,
  body.home .home__logo-img{
    max-width: 100%;
    max-height: 100%;
  }
  body.page-id-10 .wp-block-template-part,
  body.page-id-10 .menu,
  body.home .wp-block-template-part,
  body.home .menu{
    display: none;
  }
  body.page-id-10 .app,
  body.home .app{
    grid-template-rows: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
  }
  body.page-id-10 .home-programa,
  body.home .home-programa,
  body.page-id-10 .home-programa .programa--upcoming,
  body.home .home-programa .programa--upcoming{
    /* Las filas ya no se estiran para llenar la pantalla: cada una toma su altura
     natural (minimo 72px, igual que un item del menu). */
    min-height: 0;
  }
  body.page-id-10 .home-programa .programa--upcoming .programa__row,
  body.home .home-programa .programa--upcoming .programa__row{
    flex: 0 0 auto;
  }
  .home__scroll-indicator{ bottom: 4%; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  /* El rombo de scroll es indicacion esencial: mantenemos la animacion pero
     mas lenta para reducir el motion en pantalla. */
  .home__diamond{ animation-duration: 2.6s; }
  html.jazzsi-leaving body{ transition: none; }
  html.from-home .programa__row,
  html.from-home .page-head,
  html.from-home .filters{ animation: none; }
}
/* ========== CONCERT DETAIL V2 OVERRIDE ========== */
.urlbar--v2{
  min-height: 50px;
  height: 50px;
  padding: 0 24px;
  border-bottom: var(--line-w) solid var(--black);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}
.urlbar--v2 .path{
  display:flex;
  align-items:center;
  gap: 7px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.urlbar--v2 .path a,
.urlbar--v2 .path b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.urlbar--v2 .path a:hover,
.urlbar--v2 .path a:focus-visible{
  background: var(--yellow);
  outline: 0;
}
.urlbar--v2 .slash{
  margin: 0;
  color:#777;
  font-weight:300;
}
.urlbar__close-wrap{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  margin:0;
}
.urlbar__close{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  color:#000;
  font-size: 26px;
  line-height: 1;
  text-decoration:none;
  font-weight:300;
}
.urlbar__close:hover,
.urlbar__close:focus-visible{
  background:#000;
  color:var(--yellow);
  outline:0;
}

/* A la fitxa de concert el breadcrumb baixa al peu: la barra canvia la línia
   de sota per una de sobre i s'enganxa al fons de la columna de contingut. */
.urlbar--bottom{
  border-bottom: 0;
  border-top: var(--line-w) solid var(--black);
  margin-top: auto;
}

.concert--v2{ padding:0; }
/* wpautop insereix <p> buits dins de la sortida del shortcode. El que queda
   just abans de .concert__grid arrossegava un margin-top de 22px i era l'espai
   blanc que apareixia sobre la foto del grup (mesurat en viu: la figura
   començava a y=22 en lloc de y=0). Els neutralitzem. */
.concert--v2 > p,
.concert--v2 .concert__grid > p{
  margin:0 !important;
  padding:0 !important;
}
.concert--v2 > p:empty,
.concert--v2 .concert__grid > p:empty{ display:none !important; }
/* Mateix cas a la fitxa d'artista. */
.artist-v2 > p,
.artist-v2 .artist-v2__head > p{
  margin:0 !important;
  padding:0 !important;
}
.artist-v2 > p:empty,
.artist-v2 .artist-v2__head > p:empty{ display:none !important; }
/* La creu de tancament flota sobre la imatge amb el mateix llenguatge que el
   "+" del programa: FONS BLANC (petició de l'equip, 28/07), aspes negres i
   borda negra completa perquè es llegeixi sobre qualsevol fotografia. */
.concert--v2{ position: relative; }
/* La fitxa d'artista fa servir la mateixa creu: ara la ruta baixa al peu com a
   la pàgina de concert, i el tancament passa a flotar sobre la foto. */
.artist-v2{ position: relative; }
.concert__close,
.artist-v2__close{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: var(--line-w) solid var(--black);
  font-size: 0;
  line-height: 1;
  color: transparent;
  text-decoration: none;
  transition: transform .15s ease;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.concert__close::before,
.concert__close::after,
.artist-v2__close::before,
.artist-v2__close::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: #000;
}
/* Mateixes proporcions que el «+» del programa (caixa de 60px). */
.concert__close::before,
.artist-v2__close::before{
  width: 23px; height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.concert__close::after,
.artist-v2__close::after{
  width: 6px; height: 23px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.concert__close:hover,
.concert__close:focus-visible,
.artist-v2__close:hover,
.artist-v2__close:focus-visible{
  transform: rotate(90deg);
  outline: 0;
}
.concert--v2 .concert__grid{
  display:block;
  min-height:0;
}
.concert--v2 .concert__photo{
  width:100%;
  height: clamp(360px, 48vh, 560px);
  min-height:0;
  padding:0;
  margin:0;
  border-bottom:var(--line-w) solid var(--black);
  background:#f5f5f5;
  display:block;
  overflow:hidden;
}
.concert--v2 .concert__photo-frame{
  width:100%;
  height:100%;
  position:relative;
  display:block;
}
.concert--v2 .concert__photo-frame img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  display:block;
}
.concert--v2 .concert__photo .ph{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f5f5;
}
.concert--v2 .concert__body{
  padding: 18px 32px 34px;
  max-width:none;
  min-width:0;
}
.concert--v2 .concert__name{
  margin:0 0 10px;
  font-size: clamp(34px, 3.4vw, 56px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.concert__artist-title-link{
  color:inherit;
  text-decoration:none;
}
.concert__artist-title-link:hover,
.concert__artist-title-link:focus-visible{
  background:var(--yellow);
  outline:0;
}
.concert--v2 .concert__datetime{
  margin:0 0 20px;
  display:flex;
  flex-direction:column;
  gap: 2px;
  font-size: clamp(22px, 2.05vw, 34px);
  line-height:1.14;
  font-weight:600;
}
.concert--v2 .concert__price{
  margin:0 0 14px;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap: 10px;
  font-size: clamp(21px, 2vw, 32px);
  line-height:1.12;
  font-weight:600;
}
.concert__price-label{
  background:var(--yellow);
  padding:0 3px;
}
.concert--v2 .concert__buy{
  background:transparent;
  color:var(--yellow);
  padding:0;
  text-decoration:none;
  font-weight:600;
}
.concert--v2 .concert__buy:hover,
.concert--v2 .concert__buy:focus-visible{
  background:#000;
  color:var(--yellow);
  outline:0;
}
.concert--v2 .concert__text{
  max-width:none;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height:1.28;
  font-weight:500;
}
/* El text que s'enganxa des d'un processador de textos arriba amb un <div> per
   paragraf (i <div></div> buits pel mig) en comptes de <p>: nomes els <p>
   tenien separacio i per aixo tot sortia encastat, inclosa la linia final
   d'aforament (avis de l'equip, 03/08). */
/* Marge a dalt i a baix, no nomes a baix: entre blocs seguits els marges
   colapsen i la separacio segueix sent de 12px, pero quan el text enganxat
   arriba com un <span> solt (cas «damoridamort») el paragraf seguent —la
   linia d'aforament— tambe se'n separa, cosa que amb nomes margin-bottom
   no passava. */
.concert--v2 .concert__text p,
.concert--v2 .concert__text div{
  margin:12px 0;
  font-size:inherit;
  line-height:inherit;
  font-weight:inherit;
  text-align:justify;
  hyphens:auto;
}
/* Els <div> buits que fa el processador no han de sumar un segon salt. */
.concert--v2 .concert__text div:empty{
  margin:0;
}
.concert--v2 .concert__text > *:first-child{
  margin-top:0;
}
.concert--v2 .concert__text > *:last-child{
  margin-bottom:0;
}
/* MEMBRES i ENLLAÇOS a la fitxa de concert (afegits el 30/07 a petició de
   l'equip). Mateix llenguatge que els «facts» de la fitxa d'artista. */
.concert__members{
  margin-top: 18px;
}
.concert__members-k{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  color: #666;
}
.concert__members-v{
  font-size: clamp(15px, 1.08vw, 18px);
  font-weight: 600;
  line-height: 1.4;
}
.concert__members-v em{ font-style: italic; font-weight: 500; }

/* Concerts amb més d'un grup: cada formació porta el seu títol. */
.concert__formacio + .concert__formacio{ margin-top: 14px; }
.concert__links{
  margin-top: 18px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.concert__link{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}
.concert__link:hover,
.concert__link:focus-visible{
  background: var(--yellow);
  outline: 0;
}
.concert--v2 .concert__style-tags{
  margin-top: 18px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.concert--v2 .concert__style-tags .concert__tag{
  position:static;
  background:#000;
  color:#fff;
  padding:3px 7px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.concert--v2 .concert__style-tags .concert__tag:hover,
.concert--v2 .concert__style-tags .concert__tag:focus-visible{
  background:var(--yellow);
  color:#000;
  outline:0;
}

@media (max-width: 820px){
  .urlbar--v2{
    min-height:48px;
    height:48px;
    padding:0 16px;
    font-size:11px;
  }
  .urlbar__close{
    width:30px;
    height:30px;
    font-size:24px;
  }
  .concert__close,
  .artist-v2__close{
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
  }
  .concert__close::before{ width: 18px; height: 5px; }
  .concert__close::after{ width: 5px; height: 18px; }
  .concert--v2 .concert__photo{
    height:auto;
    aspect-ratio: 4 / 3;
    padding:0;
    border-bottom:var(--line-w) solid var(--black);
  }
  .concert--v2 .concert__body{
    padding:16px 18px 24px;
  }
  .concert--v2 .concert__name{
    font-size: clamp(28px, 8vw, 42px);
  }
  .concert--v2 .concert__datetime,
  .concert--v2 .concert__price{
    font-size: clamp(18px, 5vw, 24px);
  }
}

/* ========== MOBILE STICKY BRAND BAR ========== */
/* La barra només existeix en mobile; l'enllaç que la cobreix, també. */
.brandbar-link{ display:none; }

@media (max-width: 820px){
  /* Capa clicable exactament sobre la barra de marca (que és un pseudo-element
     i per tant no pot ser un enllaç): porta a la portada. */
  .brandbar-link{
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:84px;
    z-index:41;
    -webkit-tap-highlight-color:transparent;
  }
  /* A la portada la barra entra i surt: l'enllaç només és clicable quan es veu. */
  body.page-id-10 .brandbar-link,
  body.home .brandbar-link{
    pointer-events:none;
  }
  body.page-id-10.is-brandbar-on .brandbar-link,
  body.home.is-brandbar-on .brandbar-link{
    pointer-events:auto;
  }
  .app::before{
    content:"";
    order:0;
    position:sticky;
    top:0;
    z-index:40;
    box-sizing:border-box;
    display:block;
    width:100%;
    height:84px;
    min-height:84px;
    padding:0 20px;
    background-color:var(--white);
    background-image:url("../../../uploads/2026/07/jazzsi-logo-menu-cropped-2464x460-1.png");
    background-repeat:no-repeat;
    background-position:left 20px center;
    background-size:auto clamp(40px, 10vw, 52px);
    border-bottom:var(--line-w) solid var(--black);
  }
  .app > .content,
  .content{
    order:1;
  }
  .app > .wp-block-template-part{
    order:2;
  }
  body.page-id-10 .wp-block-template-part,
  body.home .wp-block-template-part{
    display:block;
  }
  body.page-id-10 .menu,
  body.home .menu{
    display:grid;
  }
  /* A mobile l'item actiu mostra l'etiqueta i no el logo; sense fons propi
     quedava igual que la resta i no s'endevinava en quina pagina eres. Es
     marca en groc, el mateix codi d'actiu que ja fa servir el web. */
  .menu__item.is-active{
    background:var(--yellow);
  }
  .menu__item.is-active .menu__label{
    display:block;
  }
  .menu__item.is-active .menu__logo{
    display:none;
  }
  body.page-id-10 .app,
  body.home .app{
    grid-template-rows:auto 1fr;
  }
  #programa,
  .home-programa{
    scroll-margin-top:84px;
  }
  /* Portada movil: el hero ocupa la pantalla entera, asi el primer pantallazo
     es solo logo + Scroll y el programa arranca justo por debajo del fold. */
  body.page-id-10 .wp-block-group.home,
  body.home .wp-block-group.home{
    height:100vh;
    height:100dvh;
    min-height:0;
    aspect-ratio:auto;
    flex:0 0 auto;
  }
  body.page-id-10 .home__logo-img-wrap,
  body.home .home__logo-img-wrap{
    /* Con el hero a pantalla completa el logo queda practicamente centrado:
     solo un poco mas de aire abajo para dejar hueco limpio al indicador Scroll. */
    padding-block:8vh 14vh;
    padding-inline:5%;
  }
  /* La barra de marca (logo horizontal) no debe verse a la vez que el logo en
     diagonal del hero. En portada movil sale del flujo y entra deslizando solo
     cuando el logo del hero ha dejado de verse (clase puesta desde JS). */
  body.page-id-10 .app::before,
  body.home .app::before{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    transform:translateY(-100%);
    transition:transform 0.28s ease;
    will-change:transform;
  }
  body.page-id-10.is-brandbar-on .app::before,
  body.home.is-brandbar-on .app::before{
    transform:translateY(0);
  }
  /* Relevo entre los dos elementos: en cuanto entra la barra de marca, el
     indicador Scroll se apaga con un fade largo (y baja un pelin) para que el
     cambio no se note como un corte. La visibilidad solo cambia al final del
     fade, asi el elemento deja de ser pulsable justo cuando ya no se ve. */
  body.page-id-10 .home__scroll-indicator,
  body.home .home__scroll-indicator{
    transition:opacity 0.8s cubic-bezier(0.33, 0, 0.2, 1),
               transform 0.8s cubic-bezier(0.33, 0, 0.2, 1),
               visibility 0s linear 0s;
  }
  body.page-id-10.is-brandbar-on .home__scroll-indicator,
  body.home.is-brandbar-on .home__scroll-indicator{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(-50%) translateY(8px);
    transition-delay:0s, 0s, 0.8s;
  }
  body.page-id-10 .home__logo-img,
  body.home .home__logo-img{
    max-width:100%;
    max-height:100%;
  }
}

/* ========== PROJECTE V2 ========== */
.projecte-v2{
  width:100%;
  min-height:calc(100vh - 2px);
  display:flex;
  flex-direction:column;
  background:var(--white);
}
.projecte-v2__text{
  padding:18px 32px 16px;
  font-size:var(--page-text-size);
  line-height:var(--page-text-lh);
  font-weight:700;
  letter-spacing:0;
}
.projecte-v2__text p{
  margin:0 0 34px;
  font-size:inherit;
  line-height:inherit;
  font-weight:inherit;
  text-align:justify;
  hyphens:auto;
}
.projecte-v2__text p:last-child{ margin-bottom:0; }
.projecte-v2 .hl{
  color:var(--yellow);
  background:transparent;
  border:0;
  text-shadow:none;
  -webkit-text-stroke:0;
  font-weight:700;
  text-decoration:none;
}
.projecte-v2 a.hl{
  text-decoration:underline;
  text-decoration-thickness:0.06em;
  text-underline-offset:0.08em;
}
.projecte-v2 a.hl:hover,
.projecte-v2 a.hl:focus-visible{
  background:#000;
  color:var(--yellow);
  outline:0;
}
.projecte-v2__date{
  margin-top:10px !important;
}
.projecte-v2__photos{
  flex:1 0 42vh;
  min-height:42vh;
  background:#b8b8bf;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  color:#000;
  font-size:clamp(26px, 2.8vw, 42px);
  line-height:1;
  font-weight:600;
  text-align:center;
}

@media (max-width:820px){
  .projecte-v2{ min-height:auto; }
  .projecte-v2__text{
    padding:16px 18px 18px;
    font-size:var(--page-text-size);
    line-height:var(--page-text-lh);
  }
  .projecte-v2__text p{
    margin-bottom:24px;
    text-align:left;
  }
  .projecte-v2__photos{
    flex-basis:34vh;
    min-height:34vh;
    padding:24px 18px;
  }
}

/* ========== ESPAI V2 ========== */
.la-sala{
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:calc(100vh - 2px);
  background:var(--white);
}
.la-sala__top{ display:contents; }
.la-sala__text{
  order:1;
  padding:18px 32px 4px;
  min-height:0;
  border-right:0;
  border-bottom:0;
  display:block;
  font-size:var(--page-text-size);
  line-height:var(--page-text-lh);
  font-weight:700;
  letter-spacing:0;
}
.la-sala__text p{
  margin:0;
  font-size:inherit;
  line-height:inherit;
  font-weight:inherit;
}
.la-sala__text .hl,
.la-sala__text a.hl{
  color:var(--yellow);
  background:transparent;
  border:0;
  text-decoration:none;
  text-shadow:none;
  -webkit-text-stroke:0;
  font-weight:700;
}
/* Specs ocultes (veure regla base a dalt) */
.espai__specs{
  order:2;
  display:none;
  border-top:0;
  border-bottom:var(--line-w) solid var(--black);
}
.espai__specs .cell{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  width:100%;
  padding:6px 32px 7px;
  border-right:0;
  border-bottom:var(--line-w) solid var(--black);
  font-size:clamp(34px, 3.35vw, 56px);
  line-height:1;
  font-weight:700;
}
.espai__specs .cell:last-child{ border-bottom:0; }
.espai__specs .cell .k,
.espai__specs .cell .v{
  margin:0;
  font-size:inherit;
  line-height:inherit;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}
.espai__specs .cell .v{
  text-align:right;
  white-space:nowrap;
}
.la-sala__plano{
  order:3;
  padding:18px 32px 26px;
  min-height:0;
  border-bottom:var(--line-w) solid var(--black);
  background:var(--white);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.la-sala__plano img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.rider-header{
  order:4;
  padding:28px 32px 26px;
  border-top:0;
  border-bottom:var(--line-w) solid var(--black);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:nowrap;
}
.rider-header__title{
  font-size:clamp(40px, 3.8vw, 64px);
  line-height:1;
  font-weight:700;
  letter-spacing:0;
}
.rider-download-btn,
.rider-download-btn.is-disabled{
  border:0;
  background:transparent;
  color:var(--yellow);
  padding:0;
  opacity:1;
  pointer-events:auto;
  font-size:clamp(36px, 3.4vw, 58px);
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  text-decoration:none;
}
.rider-download-btn:hover,
.rider-download-btn:focus-visible{
  background:#000;
  color:var(--yellow);
  outline:0;
}
.rider__table{
  order:5;
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin:0;
  border-bottom:var(--line-w) solid var(--black);
}
.rider__table th,
.rider__table td{
  padding:17px 14px 17px 32px;
  border:0;
  border-bottom:var(--line-w) solid var(--black);
  font-size:clamp(12px, .9vw, 17px);
  line-height:1.05;
  font-weight:700;
  text-transform:none;
  vertical-align:middle;
}
.rider__table tr:last-child td{ border-bottom:0; }
.rider__table td.qty{
  width:58px;
  padding:0;
  text-align:center;
  background:var(--yellow);
  border-left:var(--line-w) solid var(--black);
  font-weight:700;
}
.rider__section td{
  text-transform:uppercase;
  font-weight:800;
  background:var(--white);
  color:var(--black);
}
.rider__section td.qty{
  background:var(--yellow);
}

@media (max-width:820px){
  .la-sala{ min-height:auto; }
  .la-sala__text{
    padding:16px 18px 8px;
    font-size:clamp(25px, 7vw, 38px);
    line-height:1.05;
  }
  .espai__specs .cell{
    padding:8px 18px 9px;
    gap:14px;
    font-size:clamp(24px, 6.8vw, 36px);
  }
  .la-sala__plano{
    padding:12px 0 16px;
  }
  .rider-header{
    padding:15px 18px 14px;
    gap:16px;
    flex-wrap:wrap;
  }
  .rider-header__title,
  .rider-download-btn,
  .rider-download-btn.is-disabled{
    font-size:clamp(28px, 7.8vw, 42px);
  }
  .rider__table th,
  .rider__table td{
    padding:7px 8px 7px 18px;
    font-size:11px;
    line-height:1.05;
  }
  .rider__table td.qty{
    width:38px;
    padding:0;
  }
}



/* ========== ARXIU V2 ========== */
.archive-controls{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  height:calc(100vh / 6);
  min-height:132px;
  border-bottom:var(--line-w) solid var(--black);
  background:var(--white);
  position:relative;
  z-index:20;
}
.archive-controls .archive-control{
  min-width:0;
}
/* Líneas verticales uniformes entre filtros (Propers | Passats | Artista | Estil).
   :not(:last-child) sube la especificidad a (0,3,0) para vencer el border:0 de
   los botones .archive-control--period, que si no anulaban el separador. */
.archive-controls .archive-control:not(:last-child){
  border-right:var(--line-w) solid var(--black);
}
/* wpautop inserta <p></p> vacíos en la salida del shortcode; como hijos del
   grid rompen las 4 columnas (empujan un filtro a una 2ª fila). Los anulamos. */
.archive-controls p:empty{ display:none; }
.archive-control--period,
.archive-control__btn{
  width:100%;
  height:100%;
  min-width:0;
  border:0;
  background:var(--white);
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  color:var(--black);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:clamp(38px,3.35vw,66px);
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
}
.archive-control--period.filt-chip{
  height:100%;
  padding:0 32px;
  border:0;
  box-sizing:border-box;
}
.archive-control--period:hover,
.archive-control--period:focus-visible,
.archive-control--period.is-on,
.archive-control--dropdown.is-open .archive-control__btn,
.archive-control--dropdown .archive-control__btn:hover,
.archive-control--dropdown .archive-control__btn:focus-visible{
  background:var(--yellow);
  outline:0;
}
.archive-control--dropdown{
  position:relative;
  display:block;
}
.archive-control--dropdown .dd__chev{
  margin-left:auto;
  flex:0 0 auto;
  font-size:.42em;
  line-height:1;
  transform:translateY(.04em);
}
.archive-control--dropdown.is-open .dd__chev{
  transform:translateY(.04em) rotate(180deg);
}
.archive-control--dropdown .dd__menu{
  top:calc(100% - var(--line-w));
  bottom:auto;
  left:0;
  width:100%;
  min-width:100%;
  max-height:calc(100vh - calc(100vh / 6));
  overflow-y:auto;
  overflow-x:hidden;
  border:var(--line-w) solid var(--black);
  border-top:var(--line-w) solid var(--black);
  box-shadow:none;
  background:var(--white);
  z-index:120;
}
.archive-control__menu .dd__item{
  min-height:68px;
  padding:10px 24px;
  font-size:clamp(24px,2.15vw,36px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  /* El componente base .dd__item fuerza white-space:nowrap, lo que hacía
     desbordar los nombres largos y generaba scroll horizontal. Aquí los
     dejamos partir de línea para que nunca haya scroll horizontal. */
  white-space:normal;
  overflow-wrap:anywhere;
}
.archive-empty{
  padding:40px 32px;
  font-size:clamp(24px,2.4vw,40px);
  line-height:1;
  font-weight:700;
}

@media (max-width:820px){
  .archive-controls{
    grid-template-columns:repeat(4,minmax(0,1fr));
    height:64px;
    min-height:64px;
  }
  .archive-controls .archive-control{
    min-height:64px;
    border-right:var(--line-w) solid var(--black);
  }
  .archive-controls .archive-control:last-child{
    border-right:0;
  }
  .archive-control--period,
  .archive-control__btn,
  .archive-control--period.filt-chip{
    padding:0 6px;
    gap:4px;
    justify-content:center;
    font-size:clamp(14px,4.15vw,18px);
    line-height:1;
    white-space:nowrap;
  }
  .archive-control--dropdown .dd__chev{
    margin-left:2px;
    font-size:.62em;
  }
  .archive-control--dropdown .dd__menu{
    width:100vw;
    min-width:100vw;
    max-height:52vh;
  }
  .archive-controls .archive-control:nth-child(3) .dd__menu{
    left:calc(-200% - var(--line-w) - var(--line-w));
  }
  .archive-controls .archive-control:nth-child(4) .dd__menu{
    left:-300%;
  }
  .archive-control--dropdown .dd__menu{
    overflow-x:hidden;
  }
  .archive-control__menu .dd__item{
    min-height:42px;
    padding:6px 10px;
    gap:8px;
    font-size:clamp(12px,3.5vw,15px);
    line-height:1.05;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .archive-control__menu .dd__go{
    flex:0 0 auto;
    font-size:1em;
  }
  .archive-empty{
    padding:28px 18px;
    font-size:clamp(22px,6vw,34px);
  }
}


/* ========== ESPAI — PLANOLS AMB VISOR AMPLIAT ========== */
/* Dos planols (planta baixa + altell) apilats. Cada un es un boto que obre el
   visor gran; el peu porta l'etiqueta i la pista "AMPLIAR". */
.la-sala__plano{
  flex-direction:column;
  align-items:stretch;
  gap:26px;
}
.plano{
  margin:0;
  width:100%;
}
.plano__zoom{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  font:inherit;
  color:inherit;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.plano__zoom:focus-visible{
  outline:var(--line-w) solid var(--yellow);
  outline-offset:3px;
}
.plano__cap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:10px;
  padding-top:8px;
  border-top:var(--line-w) solid var(--black);
  font-size:clamp(16px, 1.5vw, 24px);
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.plano__hint{
  padding:4px 9px 5px;
  background:var(--yellow);
  white-space:nowrap;
}
.plano__zoom:hover + .plano__cap .plano__hint,
.plano__zoom:focus-visible + .plano__cap .plano__hint{
  background:var(--black);
  color:var(--yellow);
}

/* Visor ampliat. z-index per sota del cursor personalitzat (99999) perque el
   rombe groc segueixi visible per sobre. */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  flex-direction:column;
  background:var(--white);
}
.lightbox.is-on{ display:flex; }
body.is-lightbox-on{ overflow:hidden; }
.lightbox__bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 18px 11px;
  border-bottom:var(--line-w) solid var(--black);
  background:var(--white);
  font-size:clamp(16px, 1.5vw, 24px);
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.lightbox__title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lightbox__acts{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
}
.lightbox__dl,
.lightbox__zoom,
.lightbox__close{
  font:inherit;
  font-size:inherit;
  color:var(--black);
  background:var(--white);
  border:var(--line-w) solid var(--black);
  padding:7px 12px 8px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:inherit;
}
.lightbox__dl:hover,
.lightbox__dl:focus-visible,
.lightbox__zoom:hover,
.lightbox__zoom:focus-visible,
.lightbox__close:hover,
.lightbox__close:focus-visible{
  background:var(--yellow);
  outline:none;
}
.lightbox__stage{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.lightbox__stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* "Mida real": la imatge surt a 100% i el visor es fa scrollable per moure-s-hi. */
.lightbox__stage.is-zoom{
  align-items:flex-start;
  justify-content:flex-start;
  overflow:auto;
  overscroll-behavior:contain;
}
.lightbox__stage.is-zoom img{
  max-width:none;
  max-height:none;
  margin:auto;
}

@media (max-width:820px){
  .la-sala__plano{ gap:20px; }
  .plano__cap{
    margin-top:8px;
    padding:8px 18px 0;
    font-size:clamp(15px, 4.2vw, 20px);
  }
  .lightbox__bar{
    gap:10px;
    padding:8px 14px 9px;
    font-size:clamp(14px, 3.9vw, 18px);
  }
  .lightbox__acts{ gap:8px; }
  .lightbox__dl,
  .lightbox__zoom,
  .lightbox__close{ padding:6px 9px 7px; }
  /* Sense padding: a la pagina el planol ja va a sang, aixi que amb marge el
     visor es veuria mes petit que la propia pagina. */
  .lightbox__stage{ padding:0; }
}

/* Mobil estret: el titol i els tres botons no caben a la barra del visor.
   Traiem el titol (l'usuari acaba de tocar el planol, ja sap quin es). */
@media (max-width:520px){
  .lightbox__title{ display:none; }
}