/* Circ Perillós — arxiu 1981/1996
   Full d'estil del disseny nou. Fet per llegir-se bé al mòbil i per
   funcionar amb fotografies de resolució modesta. */

:root {
  color-scheme: light;

  --tinta:      #17120f;
  --tinta-suau: #6b625a;
  --paper:      #f7f3ec;
  --paper-alt:  #efe9df;
  --accent:     #b3271f;
  --accent-fosc:#8c1d17;
  --vora:       #ded4c6;

  --mesura: 68ch;          /* amplada de lectura */
  --ample:  min(1180px, 100% - 2.5rem);

  --display: "Oswald", system-ui, sans-serif;
  --cos: "Spectral", Georgia, serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinta);
  font: 400 1.0625rem/1.7 var(--cos);   /* 17px */
  text-rendering: optimizeLegibility;
}

@media (min-width: 48rem) { body { font-size: 1.125rem; } }  /* 18px */

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-fosc); }

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

.cap {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vora);
}
.cap__int {
  width: var(--ample); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.75rem;
}
.marca {
  font: 500 1.1875rem/1 var(--display);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
.marca span { color: var(--accent); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  font: 400 .9375rem/1 var(--display);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none;
  padding: .55rem .55rem; border-radius: 3px;
}
.nav a:hover, .nav a[aria-current] { background: var(--paper-alt); color: var(--accent); }

.idiomes { display: flex; gap: .1rem; margin-left: .75rem; padding-left: .75rem;
           border-left: 1px solid var(--vora); }
.idiomes a {
  font: 400 .75rem/1 var(--display); letter-spacing: .06em;
  text-transform: uppercase; padding: .5rem .4rem; text-decoration: none;
  color: var(--tinta-suau);
}
.idiomes a[aria-current] { color: var(--accent); font-weight: 600; }

.obre-nav { display: none; }

@media (max-width: 48rem) {
  .obre-nav {
    display: block; margin-left: auto; background: none; border: 0;
    font: 400 .8125rem/1 var(--display); letter-spacing: .08em;
    text-transform: uppercase; color: var(--tinta); cursor: pointer;
    padding: .6rem .2rem;
  }
  .nav {
    position: fixed; inset: 3.75rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--vora);
    padding: .5rem 1.25rem 1.25rem; margin: 0;
    max-height: calc(100dvh - 3.75rem); overflow-y: auto;
  }
  .nav:not([data-obert]) { display: none; }
  .nav a { padding: .8rem .2rem; border-bottom: 1px solid var(--vora); }
  .idiomes { margin: .75rem 0 0; padding: .75rem 0 0;
             border-left: 0; border-top: 1px solid var(--vora); }
}

/* ---------- estructura --------------------------------------------- */

main { width: var(--ample); margin: 0 auto; padding: 2.5rem 0 4rem; }
.prosa { max-width: var(--mesura); }

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 500;
  line-height: 1.15; letter-spacing: .01em;
  margin: 2.25rem 0 .75rem; text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); text-transform: uppercase;
     letter-spacing: .02em; margin-top: 0; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
h3 { font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; }

p { margin: 0 0 1.15rem; }          /* sense justificar, a posta */
strong { font-weight: 600; }

.ulls {
  font: 400 .8125rem/1.4 var(--display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .6rem;
}
.entradeta { font-size: 1.15em; color: var(--tinta-suau); max-width: var(--mesura); }

hr { border: 0; border-top: 1px solid var(--vora); margin: 3rem 0; }

/* ---------- figures ------------------------------------------------- */

figure { margin: 2rem 0; }
figure img { width: 100%; background: var(--paper-alt); }
figcaption {
  font: 400 .875rem/1.5 var(--cos); font-style: italic;
  color: var(--tinta-suau); margin-top: .5rem; max-width: var(--mesura);
}

/* ---------- graella de seccions ------------------------------------- */

.seccions { list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; gap: 1px; background: var(--vora);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  border: 1px solid var(--vora); }
.seccions a {
  display: block; background: var(--paper); padding: 1.4rem 1.25rem;
  text-decoration: none; color: var(--tinta); height: 100%;
}
.seccions a:hover { background: var(--paper-alt); }
.seccions strong { display: block; font: 500 1.05rem/1.2 var(--display);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.seccions span { font-size: .9rem; color: var(--tinta-suau); }

/* ---------- galeria -------------------------------------------------- */

.galeria { display: grid; gap: 1.5rem 1.25rem; margin: 2rem 0 0;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.galeria figure { margin: 0; }
.galeria button {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--paper-alt);
}
.galeria img { width: 100%; }

dialog.visor {
  padding: 0; border: 0; background: #000000ee; max-width: 100vw;
  max-height: 100dvh; width: 100vw; height: 100dvh;
}
dialog.visor::backdrop { background: #000000d0; }
dialog.visor img { max-width: 94vw; max-height: 82dvh; width: auto;
  margin: 0 auto; object-fit: contain; }
dialog.visor figcaption { color: #ddd; text-align: center; padding: .9rem 1.25rem;
  max-width: 60ch; margin-inline: auto; }
dialog.visor form { position: absolute; top: .5rem; right: .5rem; }
dialog.visor button {
  background: #ffffff1a; color: #fff; border: 0; font: 400 .8125rem/1 var(--display);
  letter-spacing: .08em; text-transform: uppercase; padding: .7rem 1rem; cursor: pointer;
}
dialog.visor .centre { height: 100%; display: grid; align-content: center; gap: 0; }

/* ---------- documents ------------------------------------------------ */

.docs { display: grid; gap: 1.25rem; margin: 2rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.doc { border: 1px solid var(--vora); background: #fff; padding: 1.4rem 1.35rem;
  display: flex; flex-direction: column; gap: .5rem; }
.doc__pais { font: 400 .75rem/1 var(--display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); }
.doc h3 { margin: 0; font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
.doc p { margin: 0; font-size: .925rem; color: var(--tinta-suau); font-style: italic; }
.doc__accions { margin-top: auto; padding-top: .9rem; display: flex; gap: .5rem;
  flex-wrap: wrap; }
.boto {
  font: 400 .8125rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
  padding: .7rem 1rem; border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; background: none; cursor: pointer;
}
.boto:hover { background: var(--accent); color: #fff; }
.boto--suau { border-color: var(--vora); color: var(--tinta-suau); }
.boto--suau:hover { background: var(--paper-alt); color: var(--tinta); border-color: var(--vora); }

.previsualitza { margin-top: 1rem; border: 1px solid var(--vora); }
.previsualitza iframe { display: block; width: 100%; height: 78vh; border: 0; }

/* ---------- representacions ------------------------------------------ */

.anys { margin: 2rem 0 0; }
.any { margin-bottom: 2.5rem; }
.any > h2 { margin: 0 0 .75rem; font-size: 1.6rem; color: var(--accent); }
.repres { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--vora); }
.repres li { display: grid; gap: .15rem .9rem; padding: .85rem .25rem;
  border-bottom: 1px solid var(--vora); }
@media (min-width: 40rem) {
  .repres li { grid-template-columns: 8.5rem 1fr auto; align-items: baseline; }
}
.repres .pais { font: 400 .75rem/1.4 var(--display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-suau); }
.repres .lloc { font-weight: 500; }
.repres .data { font-size: .9rem; color: var(--tinta-suau); white-space: nowrap; }

/* ---------- peu -------------------------------------------------------- */

.peu { border-top: 1px solid var(--vora); margin-top: 4rem;
  background: var(--paper-alt); }
.peu__int { width: var(--ample); margin-inline: auto; padding: 2.5rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  font-size: .9rem; color: var(--tinta-suau); }
.peu a { color: var(--tinta-suau); }

/* ---------- accessibilitat --------------------------------------------- */

.salta {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #fff; padding: .8rem 1.2rem; z-index: 50; text-decoration: none;
}
.salta:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* produccions encara no refetes */
.nav-pendent {
  font: 400 .8125rem/1 var(--display);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-suau); opacity: .4;
  padding: .55rem .6rem; cursor: default; white-space: nowrap;
}
@media (max-width: 48rem) {
  .nav-pendent { padding: .8rem .2rem; border-bottom: 1px solid var(--vora); }
}
/* figures: centrades i mai ampliades per sobre de la seva resolucio */
.prosa figure { margin-inline: auto; }
.prosa figure img { border: 1px solid var(--vora); }

/* ===================================================================
   PORTADA DE PRODUCCIÓ — dossier, no columna de text
   =================================================================== */

.hero {
  position: relative; isolation: isolate;
  margin-bottom: 0; padding: clamp(3.5rem, 9vw, 8rem) 0;
  background: #140f0d;
  overflow: hidden;
}
/* el fons surt del mateix cartell: ampliat i desenfocat, que la baixa
   resolució no es noti i la franja ompli de debò */
.hero__fons {
  position: absolute; inset: -10%; z-index: -2;
  background-size: cover; background-position: center 35%;
  filter: saturate(1.05) brightness(.95);
  transform: scale(1.1);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #140f0d38;
}
.hero__int {
  width: var(--ample); margin-inline: auto;
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .hero__int { grid-template-columns: minmax(20rem, 38rem) 1fr; }
}
.hero__cartell {
  width: 100%; height: auto; display: block;
  box-shadow: 0 2rem 4rem #0009, 0 0 0 1px #ffffff1a;
}
.hero__text { color: #fffdfa; }
.hero__ulls {
  font: 400 .8125rem/1.4 var(--display); letter-spacing: .18em;
  text-transform: uppercase; color: #f3c9c4; margin: 0 0 .9rem;
}
.hero h1 {
  margin: 0; color: #fff;
  font-size: clamp(1.95rem, 4.6vw, 4rem); line-height: 1.04;
  text-transform: uppercase; letter-spacing: .01em;
}
.hero__anys {
  font: 400 1.05rem/1 var(--display); letter-spacing: .22em;
  color: #e8e1d7; margin: .9rem 0 0;
}
.hero__reclam {
  margin: 1.6rem 0 0; max-width: 34ch;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.55;
  color: #fdfbf7;
}

/* ---- navegació de seccions, just sota la portada ------------------- */

.navsec { background: var(--paper-alt); border-bottom: 1px solid var(--vora); }
.navsec ul {
  width: var(--ample); margin-inline: auto; padding: 0; list-style: none;
  display: grid; gap: 1px; background: var(--vora);
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}
.navsec a {
  display: flex; flex-direction: column; gap: .2rem; height: 100%;
  background: var(--paper-alt); padding: 1.15rem 1rem 1.25rem;
  text-decoration: none; color: var(--tinta);
}
.navsec a:hover { background: #fff; }
.navsec strong {
  font: 500 .95rem/1.2 var(--display); text-transform: uppercase;
  letter-spacing: .06em;
}
.navsec span { font-size: .85rem; color: var(--tinta-suau); }

/* ---- blocs de concepte en columnes --------------------------------- */

.concepte {
  display: grid; gap: 2.5rem 2.5rem; margin: 3.5rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.concepte h2 {
  margin: 0 0 .9rem; font-size: 1rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: .6rem; border-bottom: 2px solid var(--accent);
}
.concepte ul { margin: 0; padding: 0; list-style: none; }
.concepte li {
  position: relative; padding-left: 1.1rem; margin-bottom: .85rem;
  font-size: .975rem; line-height: 1.6;
}
.concepte li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent); opacity: .55;
}

/* ---- fitxa tècnica -------------------------------------------------- */

.fitxa { margin: 3.5rem 0 0; display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 52rem) { .fitxa { grid-template-columns: 1fr 1fr; } }
.credits { margin: 0; display: grid; grid-template-columns: auto 1fr;
           gap: .55rem 1.5rem; align-items: baseline; }
.credits dt {
  font: 400 .75rem/1.5 var(--display); letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-suau); white-space: nowrap;
}
.credits dd { margin: 0; font-size: 1rem; }
.fitxa__imatges { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.fitxa__imatges figure { margin: 0; }
.fitxa__imatges img { border: 1px solid var(--vora); width: 100%; }

/* ---- crida final ---------------------------------------------------- */

.crida {
  margin: 3.5rem 0 0; padding: 2rem 1.75rem;
  border: 1px solid var(--vora); background: #fff;
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.crida p { margin: 0; }
.crida strong { font: 500 1.1rem/1.2 var(--display); text-transform: uppercase;
                letter-spacing: .05em; display: block; margin-bottom: .2rem; }

/* la portada de producció ocupa tota l'amplada: el <main> no la limita */
main.ample { width: 100%; padding-top: 0; }
main.ample > .contingut { width: var(--ample); margin-inline: auto; padding-bottom: 1rem; }

/* els flyers: una fila de tres, aprofitant les columnes de sobre */
.flyers { display: grid; gap: 1.5rem; margin: 2.5rem 0 0;
          grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.flyers figure { margin: 0; max-width: none !important; }
.flyers img { width: 100%; border: 1px solid var(--vora); background: #fff; }
.fitxa { display: block; margin: 3.5rem 0 0; }
.fitxa .credits { max-width: 46rem; }
/* representacions, desplegades dins de la portada */
.repres-seccio { margin: 4rem 0 0;
  scroll-margin-top: calc(var(--alt-cap, 4.5rem) + 1rem); }
@media (min-width: 48rem) {
  /* el submenú hi flota per damunt: també se'n descompta l'alçada */
  .repres-seccio { scroll-margin-top:
    calc(var(--alt-cap, 4.5rem) + var(--alt-navsec, 0px) + 1rem); }
}
.repres-seccio > h2 { margin: 0 0 .25rem; }
.repres-seccio .entradeta { margin-bottom: 1.5rem; }

/* La foto es queda neta: l'enfosquiment va a les lletres, no a la imatge.
   Aixi la llegibilitat no depen de quina part de la foto hi caigui a sota. */
.hero__text { text-shadow: 0 1px 2px #000000b3, 0 2px 20px #000000e0; }
.hero h1 { text-shadow: 0 2px 4px #000000b3, 0 3px 28px #000000e6; }

/* --- submenú: secció actual i primer element (portada) ----------------- */
.navsec a[aria-current] { background: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.navsec li:first-child a strong::before { content: "\2190\00a0"; color: var(--accent); }
.navsec li:first-child a { background: var(--paper); }

/* --- documents incrustats, un sota l'altre i a tota amplada ------------- */
.doc-bloc { margin: 2.5rem 0 0; border: 1px solid var(--vora); background: #fff; }
.doc-bloc > header { padding: 1.5rem 1.5rem 1.4rem; }
.doc-bloc h3 { margin: .15rem 0 .4rem; font-size: 1.15rem;
               text-transform: none; letter-spacing: 0; }
.doc-bloc header > p { margin: 0 0 1rem; font-size: .95rem;
                       color: var(--tinta-suau); font-style: italic; }
.doc-bloc .doc__accions { margin: 0; padding: 0; }
.doc-bloc .previsualitza { margin: 0; border: 0; border-top: 1px solid var(--vora); }
.doc-bloc iframe { display: block; width: 100%; height: 82vh; min-height: 32rem;
                   border: 0; background: var(--paper-alt); }
.nomes-mobil { display: none; }
@media (max-width: 48rem) {
  /* Comprovat al simulador amb agent d'usuari de mòbil: el PDF incrustat
     surt com una caixa grisa buida. Per això al telèfon s'amaga i el botó
     l'obre a pantalla completa, que és on de debò es llegeix.
     Per tornar-lo a mostrar, canviar el display per block. */
  .doc-bloc .previsualitza { display: none; }
  .nomes-mobil { display: block; margin: .9rem 0 0 !important;
                 font-size: .85rem; font-style: normal !important; }
}

@media (max-width: 48rem) {
  /* al telèfon el submenú ha d'ocupar poc: fora les descripcions */
  .navsec span { display: none; }
  .navsec a { padding: .8rem 1rem; flex-direction: row; align-items: baseline; }
  .navsec ul { grid-template-columns: 1fr 1fr; }
  .navsec li:first-child { grid-column: 1 / -1; }
}

/* ====== GALERIA COM A CÒMIC ==========================================
   Els peus de foto segueixen el diàleg de l'espectacle en ordre, així que
   l'ordre de lectura ha de ser evident i les imatges prou grans. */

.pista { max-width: var(--mesura); color: var(--tinta-suau);
         font-style: italic; margin: -.4rem 0 1.25rem; }

/* UNA SOLA COLUMNA: això no és una galeria per escanejar, és una història
   per llegir. L'ordre avall és inequívoc i les imatges són el doble de grans. */
.galeria {
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 56rem; margin-inline: auto;
}
/* la figura pren l'amplada de la imatge perquè el peu hi caigui just a sota */
.galeria figure { width: fit-content; max-width: 100%; margin-inline: auto; }
.galeria button { display: block; width: auto; max-width: 100%; }
.galeria img { width: auto; max-width: 100%; max-height: 78vh; }
.galeria figcaption {
  max-width: 100%; margin-top: .9rem;
  font-size: 1.02rem; line-height: 1.6;
}

.galeria button { position: relative; }
.galeria .num {
  position: absolute; left: 0; top: 0;
  font: 500 .8125rem/1 var(--display); letter-spacing: .08em;
  background: var(--accent); color: #fff; padding: .4rem .55rem;
}
.galeria figcaption { font-style: normal; font-size: .95rem; }
.peu-num {
  display: inline-block; min-width: 1.4rem;
  font: 500 .8125rem/1.5 var(--display); color: var(--accent);
}

/* ---- visor ------------------------------------------------------------ */
dialog.visor .visor__fig { margin: 0; height: 100dvh;
  display: grid; grid-template-rows: 1fr auto; align-items: center;
  padding: 3.25rem 3.5rem 0; }
dialog.visor img { max-width: min(92vw, 1200px); max-height: 76dvh;
  width: auto; margin: 0 auto; object-fit: contain; }
dialog.visor figcaption { color: #e9e4dc; text-align: center;
  padding: 1rem 1.25rem 2rem; max-width: 62ch; margin-inline: auto;
  font-size: 1.05rem; line-height: 1.55; }
.visor__n { color: #b3271f; font: 500 .9rem/1 var(--display);
  letter-spacing: .1em; display: block; margin-bottom: .5rem; }

.visor__x, .visor__fl {
  position: absolute; z-index: 2; background: #ffffff1a; color: #fff;
  border: 0; cursor: pointer; font-family: var(--display);
}
.visor__x { top: .6rem; right: .6rem; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase; padding: .7rem 1rem; }
.visor__fl { top: 50%; transform: translateY(-50%); font-size: 2.4rem;
  line-height: 1; padding: 1.1rem 1.3rem; }
.visor__fl--ant { left: .4rem; }
.visor__fl--seg { right: .4rem; }
.visor__x:hover, .visor__fl:hover { background: #ffffff33; }

@media (max-width: 40rem) {
  dialog.visor .visor__fig { padding: 3.25rem .75rem 0; }
  .visor__fl { top: auto; bottom: .6rem; transform: none;
    font-size: 1.9rem; padding: .8rem 1.4rem; }
}

/* ====== TÍTOL DE SUBPÀGINA ===========================================
   El nom de l'espectacle mana; la secció el matisa. */
.capsa-titol { margin-bottom: 1.75rem; }
.capsa-titol h1 { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.capsa-titol .obra {
  font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.02;
  text-transform: uppercase; letter-spacing: .01em;
}
.capsa-titol .sec {
  font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); font-weight: 400;
}
.capsa-titol .entradeta { margin: .6rem 0 0; }

/* ====== VISOR: fletxes al costat de la foto ========================== */
dialog.visor .visor__fila {
  height: 100dvh; display: flex; align-items: center; justify-content: center;
  gap: clamp(.35rem, 1.6vw, 1.5rem); padding: 3.5rem .5rem 0;
}
dialog.visor .visor__fig { height: auto; padding: 0; display: block; flex: 0 1 auto;
  min-width: 0; }
dialog.visor img { max-width: min(78vw, 1100px); max-height: 74dvh; }

.visor__fl {
  position: static; transform: none; flex: 0 0 auto;
  width: clamp(3rem, 5vw, 4.25rem); height: clamp(3rem, 5vw, 4.25rem);
  display: grid; place-items: center; border-radius: 50%;
  font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 0; padding: 0 0 .22em;
  background: #ffffff26; color: #fff; border: 1px solid #ffffff2e;
}
.visor__fl:hover { background: #ffffff45; }

.visor__x {
  /* en pantalles grans s'acosta a la vora de la foto en comptes de quedar-se
     perdut a la cantonada de la finestra */
  top: clamp(.75rem, 2vh, 1.75rem);
  right: max(1rem, calc(50% - 39rem));
  width: 3.1rem; height: 3.1rem; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 1.1rem; letter-spacing: 0; background: #ffffff26;
  border: 1px solid #ffffff2e;
}

@media (max-width: 40rem) {
  dialog.visor .visor__fila { padding: 3.25rem .4rem 0; gap: .25rem; }
  dialog.visor img { max-width: calc(100vw - 7.5rem); max-height: 66dvh; }
  .visor__fl { width: 2.9rem; height: 2.9rem; font-size: 1.9rem; }
  .visor__x { top: .6rem; right: .6rem; width: 2.6rem; height: 2.6rem; }
}

/* ====== PORTADA DEL LLOC: les cinc produccions ======================= */
.obres { list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.obres a { display: block; text-decoration: none; color: var(--tinta); }
.obres img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--paper-alt); filter: saturate(.95); transition: filter .2s; }
.obres a:hover img { filter: saturate(1.1) brightness(1.04); }
.obres .obra-nom { display: block; margin-top: .85rem;
  font: 500 1.2rem/1.2 var(--display); text-transform: uppercase;
  letter-spacing: .03em; }
.obres .obra-anys { display: block; font-size: .9rem; color: var(--accent);
  font-family: var(--display); letter-spacing: .12em; text-transform: uppercase;
  margin-top: .15rem; }

/* ====== PÀGINES GENERALS ============================================= */
.nav-gen { opacity: .72; }
.nav-gen:first-of-type { margin-left: .5rem; padding-left: .85rem;
  border-left: 1px solid var(--vora); }
@media (max-width: 48rem) { .nav-gen:first-of-type { margin: 0; padding-left: .2rem;
  border-left: 0; border-top: 1px solid var(--vora); } }

.presentacio { margin-bottom: 3rem; }
.titol-obres { font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); padding-bottom: .6rem; border-bottom: 2px solid var(--accent);
  max-width: none; }

.video { margin: 3rem 0 0; }
.video__marc { position: relative; aspect-ratio: 16 / 9; background: #000;
  max-width: 56rem; }
.video__marc iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; }
.video__text { max-width: var(--mesura); margin-top: 1.25rem; }
.video__text h2, .video__text h3, .video__text h4 { margin-top: .5rem; }

.contacte-correu { font: 400 clamp(1.2rem, 3vw, 1.9rem)/1.3 var(--display);
  letter-spacing: .02em; }

/* els noms del menú no s'han de partir en dues línies */
.nav a, .nav-pendent { white-space: nowrap; }
@media (min-width: 48rem) { .nav a { padding: .45rem .34rem; } }

/* ====== TRAJECTÒRIA: una cronologia, no una columna =================== */
.cronologia { margin-top: 1rem; }
.capitol { display: grid; gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
  padding: clamp(2.25rem, 5vw, 4rem) 0; border-top: 1px solid var(--vora); }
.capitol:first-child { border-top: 0; padding-top: 1rem; }
@media (min-width: 50rem) {
  .capitol { grid-template-columns: 1fr 1fr; }
  .capitol--inv .capitol__img { order: 2; }
}
.capitol__img figure { margin: 0; max-width: none !important; }
.capitol__img img { width: 100%; }
.capitol__text { max-width: 36rem; }
.capitol__any {
  display: block; font: 500 clamp(1.75rem, 3.8vw, 2.8rem)/1 var(--display);
  white-space: nowrap;
  color: var(--accent); opacity: .3; letter-spacing: .02em; margin-bottom: .2rem;
}
.capitol__text h2 { margin: 0 0 .9rem; font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  text-transform: none; letter-spacing: 0; }
.capitol__text p { margin: 0 0 1rem; }

/* ====== VÍDEOS: fitxa per espectacle ================================= */
.videos { margin-top: 1rem; }
.video { padding: clamp(2.25rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--vora); }
.video:first-child { border-top: 0; padding-top: .5rem; }
.video__titol { margin: 0; font-size: clamp(1.3rem, 3vw, 2rem);
  text-transform: uppercase; letter-spacing: .02em; }
.video__genere { margin: .2rem 0 1.25rem; font: 400 .8125rem/1.4 var(--display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.video__peu { display: grid; gap: 1rem 2.5rem; margin-top: 1.5rem; }
@media (min-width: 52rem) { .video__peu { grid-template-columns: 1.3fr 1fr; } }
.video__peu p { margin: 0 0 .9rem; }
.video__peu .credits { margin: 0; }

/* ====== MIR CARAVAN ================================================== */
.avis {
  display: inline-block; margin: 0 0 1.5rem;
  font: 400 .8125rem/1.4 var(--display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); padding: .6rem 1rem;
}

/* ====== CONTACTE ===================================================== */
.targeta-contacte {
  border: 1px solid var(--vora); background: #fff;
  padding: clamp(2rem, 6vw, 4rem); text-align: center;
  max-width: 34rem; margin: 2rem auto 0;
}
.targeta-contacte__et { margin: 0 0 1rem; font: 400 .8125rem/1 var(--display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suau); }
.targeta-contacte .contacte-correu { margin: 0; }
.targeta-contacte__peu { margin: 1.5rem 0 0; font-size: .85rem;
  color: var(--tinta-suau); font-family: var(--display); letter-spacing: .1em; }

/* ====== PRESENTACIÓ ================================================== */
.presentacio { margin-top: 1.5rem; }
.presentacio > p { max-width: var(--mesura); }
.presentacio > p:first-of-type { font-size: 1.15em; }

.sec-pres {
  margin: 3.5rem 0 1.25rem; font-size: 1.05rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: .6rem; border-bottom: 2px solid var(--accent);
}

/* El collage ve amb fons blanc pur. Multiplicant-lo, el blanc desapareix
   i les polaroids queden flotant sobre el crema amb les seves ombres. */
.presentacio figure.collage { margin: 2.5rem auto 3rem; max-width: 62rem; }
.presentacio figure.collage img {
  width: 100%; mix-blend-mode: multiply;
}
.presentacio figure.banda { margin: 0 0 2.5rem; max-width: none; }
.presentacio figure.banda img { width: 100%; }

.epoques { list-style: none; margin: 1.25rem 0 2rem; padding: 0;
  max-width: var(--mesura); }
.epoques li { position: relative; padding-left: 1.2rem; margin-bottom: .6rem; }
.epoques li::before { content: ""; position: absolute; left: 0; top: .72em;
  width: .5rem; height: 1px; background: var(--accent); }

/* llista d'espectacles i membres */
.elenc { list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--vora);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  border: 1px solid var(--vora); }
.elenc li { background: var(--paper); padding: 1.5rem 1.4rem; }
.elenc h3 { margin: 0 0 .6rem; font-size: 1rem; letter-spacing: .05em; }
.elenc h3 a { text-decoration: none; }
.elenc h3 a:hover { text-decoration: underline; }
.elenc p { margin: 0 0 .4rem; font-size: .925rem; color: var(--tinta-suau); }

.epoques .amb { display: block; margin-top: .25rem;
  font: 400 .78rem/1.5 var(--display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-suau); }
.epoques li > a:first-child { font-weight: 600; }

/* ====== MIR CARAVAN ================================================== */
.mir-hero { position: relative; isolation: isolate; overflow: hidden;
  background: #140f0d; padding: clamp(5rem, 16vw, 11rem) 0 clamp(3rem, 8vw, 6rem); }
.mir__fons { position: absolute; inset: -5%; z-index: -2;
  background-size: cover; background-position: center 42%;
  filter: saturate(1.05) brightness(.62); }
.mir-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #140f0d26 0%, #140f0d33 40%, #140f0de8 100%); }
.mir-hero__int { width: var(--ample); margin-inline: auto; color: #fff;
  text-shadow: 0 2px 4px #000000b3, 0 3px 26px #000000e6; }
.mir-hero h1 { margin: 0; color: #fff; text-transform: uppercase;
  font-size: clamp(2.4rem, 9vw, 6rem); line-height: .98; letter-spacing: .01em; }
.mir-hero .hero__ulls { color: #e8b4ae; font-size: 1rem; letter-spacing: .3em; }
.mir-hero__entrada { margin: 1.5rem 0 0; max-width: 42ch;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.55; color: #f2ece3; }

.mir-xifres { list-style: none; margin: 0; padding: 2.5rem 0 0;
  display: grid; gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.mir-xifres li { display: grid; gap: .2rem; }
.mir-xifres .xifra { font: 500 clamp(2.2rem, 5vw, 3.4rem)/1 var(--display);
  color: var(--accent); }
.mir-xifres li span + span { font-size: .9rem; color: var(--tinta-suau);
  line-height: 1.4; }

.mir-ruta { margin: 3rem 0 0; padding: 1.5rem 0; border-top: 1px solid var(--vora);
  border-bottom: 1px solid var(--vora); }
.mir-ruta ol { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: .4rem 0; align-items: center; }
.mir-ruta li { font: 400 .8125rem/1.4 var(--display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta); }
.mir-ruta li + li::before { content: "\2192"; margin: 0 .7rem;
  color: var(--accent); opacity: .65; }

.mir-sec { margin: 3.5rem 0 0; }
.mir-sec h2 { margin: 0 0 1.25rem; font-size: 1.05rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: .6rem; border-bottom: 2px solid var(--accent); }
.cita { margin: 0 0 2rem; padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--accent); max-width: 44ch; }
.cita p { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45;
  font-style: italic; }
.cita cite { display: block; margin-top: .75rem; font-style: normal;
  font: 400 .8125rem/1 var(--display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-suau); }

.mir-nota { margin: 3.5rem 0 0; padding: 1.75rem; border: 1px solid var(--vora);
  background: var(--paper-alt); }
.mir-nota p:last-child { margin: 0; font-size: .95rem; }

/* --- la portada de producció, una mica més baixa ---------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero__cartell { width: auto; max-width: 100%; max-height: 62vh;
  margin-inline: auto; }

/* --- el submenú va enganxat sota el menú principal -------------------- */
main.ample > .navsec:first-child { margin-top: 0; border-top: 0; }

/* --- tornar a dalt ---------------------------------------------------- */
.amunt { width: var(--ample); margin: 0 auto; padding: 2.5rem 0 0; text-align: right; }
.amunt a {
  display: inline-block; text-decoration: none;
  font: 400 .8125rem/1 var(--display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-suau);
  border: 1px solid var(--vora); padding: .75rem 1.1rem; background: var(--paper);
}
.amunt a::before { content: "↑"; margin-right: .55rem; color: var(--accent); }
.amunt a:hover { color: var(--tinta); border-color: var(--tinta-suau); }

/* el menú té deu entrades: que pugui passar a dues línies en comptes de
   sortir-se per la dreta */
.cap__int { flex-wrap: wrap; padding-block: .35rem; }
.nav { flex-wrap: wrap; justify-content: flex-end; row-gap: .1rem; }

html, body { overflow-x: clip; }

/* Capçalera en dues files: marca i idiomes a dalt, menú a sota.
   Amb deu entrades i lletra gran no caben en una sola línia. */
@media (min-width: 48rem) {
  .cap__int { flex-wrap: wrap; align-items: center; row-gap: .1rem;
              padding-block: .25rem; min-height: 0; }
  .idiomes { margin-left: auto; padding-left: 0; border-left: 0; }
  /* si no hi caben en una línia, passen a dues: mai es tallen */
  .nav { flex-basis: 100%; width: 100%; margin-left: -.34rem;
         justify-content: flex-start; flex-wrap: wrap;
         row-gap: 0; padding-bottom: .2rem; }
  .nav-gen:first-of-type { margin-left: .6rem; padding-left: .9rem;
                           border-left: 1px solid var(--vora); }
}

@media (min-width: 48rem) {
  /* capçalera compacta: dues files curtes, no un bloc */
  .cap__int { min-height: 0; padding-block: .2rem; }
  .marca { font-size: 1.125rem; }
  .nav { padding-bottom: .15rem; }
  .idiomes a { padding: .35rem .35rem; }
}

/* ====== AJUSTOS DE CAPÇALERA I PORTADA =============================== */

/* 1. El menú va a l'amplada del contingut, per quadrar-hi. Hi cap en una
      línia des que la capçalera no hereta la graella dels capítols. */
@media (min-width: 48rem) {
  .cap__int { width: var(--ample); margin-inline: auto; }
  .nav a, .nav-pendent { padding: .5rem .7rem; }
  .nav { margin-left: -.7rem; column-gap: .15rem; }
}

/* 2. El submenú s'enganxa just sota el menú i no es perd en baixar. */
/* El submenú només s'enganxa on cap en una franja estreta: al mòbil
   són tres files i ens menjaria un terç de la pantalla. */
@media (min-width: 48rem) {
  .navsec { position: sticky; top: var(--alt-cap, 4.5rem); z-index: 15; }
}
main.ample > .navsec:first-child { border-top: 0; }

/* 3. La franja de portada, més baixa: ha de fer de capçalera, no de pàgina.
      El cartell es limita en alçada perquè se'n vegi el final. */
.hero { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.hero__cartell { max-height: 48vh; }
@media (min-width: 52rem) { .hero__cartell { max-height: 52vh; } }

/* El menú té deu entrades. A partir de 1200 px hi caben totes en una línia
   amb la lletra gran; entre 768 i 1200 s'estreny una mica per no apilar-se. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .nav a, .nav-pendent { font-size: .8125rem; padding: .45rem .45rem; }
  .nav { margin-left: -.45rem; }
  .marca { font-size: 1.0625rem; }
}
@media (min-width: 75rem) {
  .nav a, .nav-pendent { font-size: .9375rem; padding: .5rem .72rem; }
  .nav { margin-left: -.72rem; }
}

/* la capçalera ocupa tota l'amplada i el seu contingut es limita a 1560,
   independentment de l'amplada de lectura del text (1180) */
.cap { width: 100%; }
/* el menú va a l'amplada del contingut: .cap__int ja fa var(--ample) */


/* --- quan una pàgina no existeix en aquest idioma -------------------- */
.sense-idioma {
  margin: 1.5rem 0 0; padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--accent); background: var(--paper-alt);
  max-width: 46ch;
}
.sense-idioma p { margin: 0; font-size: .95rem; color: var(--tinta-suau); }
.sense-idioma__ops { margin-top: .7rem !important; display: flex;
  flex-wrap: wrap; gap: .5rem; }
.sense-idioma__ops a {
  font: 400 .8125rem/1 var(--display); letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--tinta);
  border: 1px solid var(--vora); background: var(--paper);
  padding: .55rem .9rem;
}
.sense-idioma__ops a:hover { border-color: var(--accent); color: var(--accent); }

/* --- recordatori que hi ha fotos de la producció --------------------- */
.cap-a-fotos { margin: 3.5rem 0 0; }
.cap-a-fotos a {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  text-decoration: none; border: 1px solid var(--vora);
  background: var(--paper-alt); padding: 1.4rem 1.6rem;
}
.cap-a-fotos strong {
  font: 500 clamp(1.05rem, 2.2vw, 1.4rem)/1 var(--display);
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta);
}
.cap-a-fotos span { font-size: .9rem; color: var(--tinta-suau); }
.cap-a-fotos a::after {
  content: "→"; margin-left: auto; color: var(--accent);
  font-size: 1.35rem; line-height: 1;
}
.cap-a-fotos a:hover { border-color: var(--accent); background: var(--paper); }
.cap-a-fotos a:hover strong { color: var(--accent); }

/* ====== LA GALERIA, AMB LA MATEIXA MAQUETA QUE LA CRONOLOGIA =========
   La foto a un costat i la veu a l'altre, alternant. El peu deixa de ser
   una nota al peu i passa a ser el text. */
.galeria { grid-template-columns: 1fr; gap: 0; max-width: none; }
.galeria figure {
  width: auto; max-width: none; margin: 0;
  display: grid; gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem) 0;
  border-top: 1px solid var(--vora);
}
.galeria figure:first-child { border-top: 0; padding-top: .5rem; }
@media (min-width: 50rem) {
  .galeria figure { grid-template-columns: 1fr 1fr; }
  /* alternen: la parella porta la foto a la dreta */
  .galeria figure:nth-child(even) button { order: 2; }
}
.galeria button { width: 100%; max-width: none; }
.galeria img { width: 100%; max-width: 100%; max-height: none; }

/* el numero gran i esvaït fa d'ordre de lectura, com l'any a la
   cronologia; per això el rètol damunt de la foto ja no cal */
.galeria .num { display: none; }
.galeria figcaption { margin: 0; max-width: 34rem; }
.galeria .peu-num {
  display: block; min-width: 0; margin-bottom: .4rem;
  font: 500 clamp(1.5rem, 3vw, 2.3rem)/1 var(--display);
  color: var(--accent); opacity: .32; letter-spacing: .02em;
}
.galeria .peu-text { display: block; font-size: 1rem; line-height: 1.6; }
/* nomes es posa en gran el que es una veu */
.galeria figure.veu .peu-text {
  font: italic 400 clamp(1.15rem, 2.3vw, 1.65rem)/1.45 var(--cos);
  color: var(--tinta);
}
.galeria .peu-credit {
  display: block; margin-top: 1rem;
  font: 400 .75rem/1.4 var(--display); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suau);
}