/* ═══════════════════════════════════════════════════════════════════
   CIA. BOSC ESCÈNIC · Sistema visual «la sala a les fosques · segon acte»
   Port de la PROPOSTA 4 (MOCKUPS V3/proposta-4-segon-acte/estil.css) al
   tema fill del The7. Generat per parteix-css.js: el cos d'aquest full és
   VERBATIM del mockup, per poder-hi fer diff.
   ───────────────────────────────────────────────────────────────────
   QUÈ HI HA AQUÍ I QUÈ NO (vegeu MAPA-STACK.md de la proposta):

   · AQUÍ hi va el SISTEMA: els vels sobre fotografia, les bandes a sang
     amb imatge fixa, el full de sala dels esdeveniments, la cronologia,
     el díptic de qui som, la retícula d'entitats i les aparicions en
     scroll. Cap opció del The7 no ho dona.
   · AQUÍ hi va també el que The7 NO pot expressar encara que la
     tipografia sigui seva: «font-variation-settings» amb els eixos SOFT
     i WONK de la Fraunces. Una Fraunces sense SOFT queda dura i no avisa.
   · NO hi va la capçalera ni el peu: aquell marcatge el fa The7 i el
     vesteix marc.css, que es carrega després.
   · NO hi van els fons de cada banda: Design Options de WPBakery, fila
     a fila, perquè viatgin amb la pàgina i el client els pugui veure.

   ⚠ ELS VELS SÓN ACCESSIBILITAT, NO DECORACIÓ. Mesurat sobre els píxels
   pintats: sense el vel del hero, el títol es queda a 2,51:1 (el mínim
   és 3). Amb el vel, 7,17:1. Qui el toqui, que torni a mesurar.

   MARCATGE REAL sobre el qual s'ha escrit (mesurat a la v2, mateix stack):

     #main > .wf-wrap > .wf-container-main > #content.content
       > .wpb-content-wrapper
         > .vc_row.wpb_row.vc_row-fluid.<el_class>
           > .wpb_column.vc_column_container.vc_col-sm-N
             > .vc_column-inner > .wpb_wrapper > <element>
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1 · VARIABLES ═══
   Les mateixes del mockup i amb els mateixos noms. La paleta també
   s'escriu a Theme Options: aquí NO es torna a aplicar al <body>, que
   seria manar dues vegades sobre la mateixa cosa. */
:root {
  --bosc:   #044B43;
  --paper:  #F3EEE4;
  --argila: #D56B4D;
  --salvia: #B9C9A8;
  --focus:  #EFC75E;
  --foscor: #16201D;
  --negre:  #0D1412;
  --filet:  rgba(243, 238, 228, .18);
  --ample: 1160px;
  --vora: clamp(1.25rem, 3vw, 2.5rem);
}

/* ═══ 2 · BASTIDA: el que cal dir-li a WPBakery i a The7 ═══
   El mockup obria amb «* { margin:0; padding:0 }». Aquí NO: un reset
   universal es menjaria els coixins propis del tema i del maquetador i
   trencaria l'administració. En comptes d'això, es neutralitza NOMÉS
   dins de les nostres seccions. */

/* Les pàgines comencen amb una banda a sang: fora el coixí del contenidor. */
#main:has(.hero), #main:has(.portada-pagina) { padding-top: 0; }
#main:has(.crida) { padding-bottom: 0; }

/* WPBakery posa 35px de coixí superior a la primera columna de tota fila
   amb fons (Design Options). Les nostres bandes ja porten el seu i el
   volen sencer. */
.vc_row-has-fill.quadre > .vc_column_container > .vc_column-inner,
.vc_row-has-fill.banda > .vc_column_container > .vc_column-inner,
.vc_row-has-fill.crida > .vc_column_container > .vc_column-inner,
.vc_row-has-fill.tallers-home > .vc_column_container > .vc_column-inner,
.vc_row-has-fill.portada-obra > .vc_column_container > .vc_column-inner,
.vc_row-has-fill.portada-pagina > .vc_column_container > .vc_column-inner { padding-top: 0; }

/* Dins d'una banda, l'últim element no ha d'arrossegar els 35px de marge
   inferior de WPBakery. */
.quadre .wpb_content_element, .banda .wpb_content_element,
.crida .wpb_content_element, .portada-obra .wpb_content_element,
.portada-pagina .wpb_content_element, .tallers-home .wpb_content_element { margin-bottom: 0; }

/* Els paràgrafs i titulars nostres van amb els marges del SISTEMA, no amb
   els del tema.
   ⚠ Va amb :where() a posta. Escrit com «.quadre p { margin: 0 }» té
   especificitat (0,1,1) i guanya a «.quadre__subt { margin: 0 auto }»
   (0,1,0): les entradetes centrades se n'anaven a l'esquerra. Amb
   :where() la regla baixa a (0,0,1) —només neteja el que el tema posa
   als elements pelats— i qualsevol classe del sistema hi mana per sobre. */
:where(.quadre, .banda, .crida, .portada-obra, .portada-pagina, .tallers-home)
:where(p, h1, h2, h3, h4, ul, ol, li, figure, figcaption, blockquote, dl, dt, dd) {
  margin: 0; padding: 0;
}

/* EL BLOC CONTENIDOR. ⚠ Trampa mesurada, no suposada (08-09-2026).
   WPBakery embolcalla cada element amb
     .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_content_element
   i The7 els dona «position: relative». Això els converteix en el bloc
   contenidor de qualsevol fill ABSOLUT nostre — el vídeo del hero, els
   fons de les portades, els vels — que en comptes d'estirar-se fins a la
   secció s'estiraven fins a l'embolcall. Amb el hero de 846px, el vídeo
   mesurava 35px; el fons d'«El Regne», 356px en comptes de 782.
   No dona cap error enlloc: només surt tot negre. */
/* ⚠ NOMÉS AL HERO. Posar-ho també a «.quadre» va tornar «.fita» a
   position: static, i el quadradet d argila de la cronologia —que és un
   ::before absolut— se n anava a un altre lloc de la pàgina. Aquesta
   regla existeix per al <video> del hero, que és l únic fill absolut que
   ens queda; a la resta de seccions fa mal. */
.hero > .wpb_column, .hero .vc_column-inner, .hero .wpb_wrapper, .hero .wpb_content_element { position: static; }

/* Banda a sang SENSE el JS de WPBakery (blocs de HTML cru). No s'aplica si
   la fila ja va estirada pel maquetador: seria estirar-la dues vegades. */
.a-sang:not([data-vc-full-width]) {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* CAIXA BAIXA. The7 posa «text-transform: uppercase» als titulars des de
   les seves opcions de tipografia; la proposta 4 els vol en caixa baixa
   —és el gest del logotip— i les versaletes queden NOMÉS on el sistema
   les demana (els cues, les etiquetes, els dies del full de sala). */
.hero__frase, .quadre__titol, .quadre__subt, .portada-obra__titol,
.portada-pagina__titol, .crida__frase, .banda__frase, .tallers-home__titol,
.persona__nom, .video-fitxa h3, .pilars h3, .esd__obra, .fita__que,
.espectacle__sinopsi, .prosa h2, .prosa h3 { text-transform: none; }

/* EL COLOR DELS ENLLAÇOS. The7 fa «a, a:hover { color:
   var(--the7-links-color) }» amb la mateixa especificitat que
   l'«a { color: inherit }» del mockup: guanya per ordre d'encuat i
   pintava de groc els títols del full de sala i les targetes de vídeo.
   Es corregeix per la VARIABLE, no per especificitat: així les peces que
   SÍ que volen color (.enllac, .portada-obra__resalt, .esd__hora) no han
   de pujar cap selector. */
.quadre, .banda, .crida, .portada-obra, .portada-pagina, .tallers-home,
.insta__tira, .entitats-flux, .tira-fotos, .videos, .esd {
  --the7-links-color: var(--paper);
  --the7-links-hover-color: var(--paper);
}

/* GRAELLES QUE VAN A LA FILA. ⚠ Mesurat: «.duo-banda» és una graella de
   tres columnes i tenia UN SOL FILL — «div.wpb_column» —, perquè entre el
   contenidor i les nostres peces hi ha quatre embolcalls de WPBakery.
   Resultat: els dos retrats i la citació queien un sota l'altre i el
   díptic desapareixia. «display: contents» treu els embolcalls de la
   CAIXA sense treure'ls del DOM, i els nostres fills tornen a ser fills
   de la graella. Només cal on la graella va a la FILA; quan va a un div
   nostre (.videos, .pilars, .companyia__retrats) no hi ha problema. */
.duo-banda > .wpb_column, .duo-banda .vc_column-inner,
.duo-banda .wpb_wrapper, .duo-banda .wpb_raw_code,
.tira-fotos > .wpb_column, .tira-fotos .vc_column-inner,
.tira-fotos .wpb_wrapper, .tira-fotos .wpb_raw_code { display: contents; }

/* ⚠ I EL CLEARFIX. Amb els embolcalls a «display: contents», la graella
   de «.duo-banda» seguia sortint malament: el primer retrat queia a la
   tercera columna d'una PRIMERA fila i la resta a la segona. La causa no
   era cap fill: The7 posa un clearfix amb «::before» i «::after» a les
   files, i en una graella ELS PSEUDOELEMENTS COMPTEN COM A ÍTEMS. Tres
   peces nostres + dos pseudoelements = cinc caselles. */
.duo-banda::before, .duo-banda::after,
.tira-fotos::before, .tira-fotos::after,
.entitats-envolt::before, .entitats-envolt::after { content: none; }

/* ⚠ I ELS DELS EMBOLCALLS. Un element a «display: contents» desapareix
   de la caixa, però els seus PSEUDOELEMENTS no: segueixen generant caixa i
   ocupant casella. Amb el clearfix de la fila ja tret, encara quedava una
   casella presa i el primer retrat seguia desplaçat una columna. Els
   embolcalls a «display: contents» TAMBE porten clearfix. */
:is(.duo-banda, .tira-fotos, .entitats-envolt) :is(.wpb_column, .vc_column-inner, .wpb_wrapper, .wpb_raw_code)::before,
:is(.duo-banda, .tira-fotos, .entitats-envolt) :is(.wpb_column, .vc_column-inner, .wpb_wrapper, .wpb_raw_code)::after { content: none; }

/* LA CITACIÓ. The7 pinta els <blockquote> amb fons color paper; damunt
   de la banda verda, i amb el text també color paper, la citació sortia
   com un requadre blanc BUIT. No es veia cap error: només un rectangle. */
.duo-banda blockquote.citacio:not(.shortcode-blockquote),
.duo-banda blockquote.citacio:not(.shortcode-blockquote) p {
  background: none; border: 0; padding: 0; margin: 0;
  box-shadow: none; outline: none; quotes: none;
  /* ⚠ The7 fa «blockquote:not(.wp-block-quote):not(.elementor-blockquote)»
     amb la DRECERA «font:», que reescriu familia, cos, estil i pes de cop,
     mes «text-transform: uppercase». Per aixo la citacio sortia en
     versaletes, dreta i a 20px. Aqui es torna a dir sencera. */
  color: var(--paper);
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  max-width: 20ch;
  margin: 0 auto;
}
.duo-banda .citacio::before, .duo-banda .citacio::after { content: none; }

/* LES LLISTES. The7 posa el seu «list-style» a l element <li>, i guanya
   al «list-style: none» que el mockup posa a la <ul>: els punts tornaven
   a sortir a les dades de contacte i a les llistes de la declaracio
   d accessibilitat, que ja porten el seu propi quadradet d argila. */
.llista-dades li, .llista li, .credits li, .premis li { list-style: none; }

/* CAP radi i CAP ombra difusa dins del contingut: és la primera regla del
   sistema (direcció d'art de la casa). Es toca només el que pinta el
   contingut; els cercles propis del tema es deixen estar. */
#content img, #content figure, #content .vc_single_image-wrapper,
#content .wpb_single_image img, #content input, #content textarea,
#content select, #content button, #content .dt-btn, #content .vc_btn3 {
  border-radius: 0 !important; box-shadow: none !important;
}

/* ═══ 3 · EL SISTEMA (verbatim del mockup) ═══ */
.hero__frase, .quadre__titol, .portada-obra__titol, .portada-pagina__titol,
.crida__frase, .banda__frase, .pilars h2, .esd__dia, .fita__any,
.persona__nom, .peu__nom, .video-fitxa h3 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── enllaç de salt (primer element enfocable) ──────────────── */
.salta {
  position: absolute; left: -9999px; top: .5rem; z-index: 100;
  background: var(--focus); color: var(--foscor);
  padding: .9rem 1.4rem; font-weight: 600; text-decoration: none;
}
.salta:focus { left: var(--vora); }

/* ── moviment: aparicions en scroll ─────────────────────────── */
[data-js] .rev { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.rev.vist { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
}

/* la fulla com a filigrana quieta de fons: fixa, no es mou amb l'scroll */
.fulla-fons {
  position: fixed; z-index: -1; pointer-events: none;
  right: -10vw; top: 10vh;
  width: min(42vw, 600px); height: auto;
  opacity: .04; /* sense rotació: l'SVG ja porta la inclinació de l'accent del logotip */
}

/* ── hero ───────────────────────────────────────────────────── */
.hero { position: relative; height: min(94vh, 900px); overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.90); }
.hero__vel {
  position: absolute; inset: 0;
  background:
   radial-gradient(ellipse 78% 62% at 50% 45%, rgba(13,20,18,.20) 0%, rgba(13,20,18,.35) 45%, rgba(13,20,18,.65) 100%),
    linear-gradient(to bottom, rgba(13,20,18,.6), transparent 30%);
}
.hero__text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 2rem;
}
.hero__ante { font-size: .82rem; letter-spacing: .34em; color: var(--salvia); margin-bottom: 1.4rem; }
.hero__frase { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; }
.hero__frase em { font-style: italic; color: var(--focus); }
.hero__sub { margin-top: 1.4rem; font-size: 1.05rem; letter-spacing: .12em; color: rgba(243,238,228,.78); }
.hero__avall {
  margin-top: 2.6rem; color: var(--focus); display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
}
.hero__avall svg { width: 11px; height: 42px; transition: transform .25s; }
.hero__avall:hover svg { transform: translateY(6px); }
.hero__pausa {
  position: absolute; right: var(--vora); bottom: 1.5rem; width: 44px; height: 44px;
  background: none; border: 1px solid var(--filet); color: var(--paper);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hero__pausa:hover { border-color: var(--focus); color: var(--focus); }
.hero__pausa svg { width: 15px; height: 15px; }
.hero__pausa .ic-play { display: none; }
.video-aturat .hero__pausa .ic-play { display: block; }
.video-aturat .hero__pausa .ic-pausa { display: none; }

/* ── esquema de seccions ────────────────────────────────────── */
.quadre { max-width: var(--ample); margin: 0 auto; padding: 6rem var(--vora); text-align: center; position: relative; }
.quadre--ample { max-width: none; }
.quadre__cue {
  font-size: .8rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--focus); margin-bottom: 1.4rem;
}
.quadre__cue--argila { color: var(--argila); }
.quadre__cue--salvia { color: var(--salvia); }
.quadre__titol {
  font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 410; line-height: 1.1;
  letter-spacing: -.01em; margin-bottom: 1.2rem;
}
.quadre__titol em { font-style: italic; color: var(--argila); }
.quadre__subt {
  font-size: 1.15rem; color: var(--salvia); max-width: 56ch; margin: 0 auto 2.6rem;
}

/* enllaç i botons */
.enllac {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .98rem; letter-spacing: .1em; color: var(--paper);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--filet);
  min-height: 44px;
}
.enllac:hover { color: var(--focus); text-decoration-color: var(--focus); }
.enllac span { transition: transform .25s; }
.enllac:hover span { transform: translateX(6px); }
.boto-groc {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--focus); color: var(--foscor);
  padding: .95rem 1.7rem; text-decoration: none; border: none; cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: .08em;
}
.boto-groc:hover { background: var(--paper); }
.boto-groc span { transition: transform .25s; }
.boto-groc:hover span { transform: translateX(6px); }
.boto-vora {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--filet); color: var(--paper); text-decoration: none;
  padding: .9rem 1.6rem; font-size: .98rem; letter-spacing: .08em;
}
.boto-vora:hover { border-color: var(--focus); color: var(--focus); }

/* ── companyia (resum home) ─────────────────────────────────── */
.companyia { background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(4,75,67,.35), transparent 75%); }
.companyia__retrats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 2rem;
  justify-content: center; margin-bottom: 2.4rem;
}
.companyia__retrats img { filter: brightness(.85); transition: filter .35s; aspect-ratio: 4/5; object-fit: cover; }
.companyia__retrats figure:hover img { filter: brightness(1.05); }
.companyia__retrats figcaption { font-size: .8rem; letter-spacing: .18em; color: var(--salvia); padding-top: .8rem; }
.companyia__text { max-width: 62ch; margin: 0 auto 2rem; color: rgba(243,238,228,.82); }

/* ── portades d'obra (home) ─────────────────────────────────── */
.portada-obra { position: relative; min-height: 82vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.portada-obra__fons { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); transition: filter .5s; }
.portada-obra:hover .portada-obra__fons { filter: brightness(.72); }
.portada-obra__vel {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 50%, transparent 25%, rgba(13,20,18,.9) 100%);
}
.portada-obra__cos { position: relative; text-align: center; text-decoration: none; padding: 4rem var(--vora); }
.portada-obra__titol { font-size: clamp(3.4rem, 10vw, 8.5rem); font-weight: 400; line-height: .98; letter-spacing: -.015em; margin-bottom: 1.6rem; }
.portada-obra a:hover .portada-obra__titol { color: var(--focus); transition: color .4s; }
.portada-obra__meta { font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; color: var(--salvia); }
.portada-obra__resalt { color: var(--focus); }

/* ── pròxims esdeveniments (full de sala) ───────────────────── */
.esd { max-width: 880px; margin: 0 auto; text-align: left; }
.esd__fila {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 1.6rem; align-items: center;
  border-top: 1px solid var(--filet); padding: 1.7rem .4rem;
  text-decoration: none;
}
.esd__fila:last-of-type { border-bottom: 1px solid var(--filet); }
.esd__fila:hover { background: rgba(243,238,228,.04); }
.esd__dia { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 420; color: var(--focus); line-height: 1; }
.esd__dia small { display: block; font-size: .5em; letter-spacing: .3em; text-transform: uppercase; margin-top: .3em; color: var(--salvia); font-family: "DM Sans", sans-serif; }
.esd__obra { font-size: 1.3rem; font-weight: 600; margin-bottom: .2rem; }
.esd__lloc { color: rgba(243,238,228,.7); font-size: .98rem; }
.esd__hora { color: var(--salvia); letter-spacing: .1em; font-size: .95rem; text-align: right; }
.esd__fila:hover .esd__obra { color: var(--focus); }
.esd__nota { text-align: center; margin-top: 1.6rem; font-size: .85rem; color: rgba(243,238,228,.55); }

/* ── bandes fixes ───────────────────────────────────────────── */
.banda {
  position: relative; overflow: hidden; clip-path: inset(0);
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 4rem var(--vora);
}
.banda__fixa { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; filter: brightness(.8); }
.banda__vel { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(13,20,18,.45) 20%, rgba(13,20,18,.8) 100%); }
.banda__frase {
  position: relative; color: var(--paper);
  font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 400; line-height: 1.15;
  letter-spacing: -.01em; font-style: italic; max-width: 24ch;
}
@media (prefers-reduced-motion: reduce) { .banda__fixa { position: absolute; height: 100%; width: 100%; } }

/* ── des de la platea (vídeos) ──────────────────────────────── */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; text-align: left; }
.video-fitxa { display: block; text-decoration: none; }
.video-fitxa figure { position: relative; overflow: hidden; margin-bottom: 1rem; }
.video-fitxa img { aspect-ratio: 16/10; object-fit: cover; filter: brightness(.6); transition: filter .35s, transform .5s; }
.video-fitxa:hover img { filter: brightness(.95); transform: scale(1.03); }
.video-fitxa figure::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border-left: 22px solid var(--paper); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  transition: border-left-color .3s;
}
.video-fitxa:hover figure::after { border-left-color: var(--focus); }
.video-fitxa h3 { font-size: 1.35rem; font-weight: 440; margin-bottom: .2rem; }
.video-fitxa:hover h3 { color: var(--focus); }
.video-fitxa p { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--salvia); }

/* ── tallers (entreacte) ────────────────────────────────────── */
.tallers { background: var(--bosc); text-align: center; padding: 4rem var(--vora); position: relative; overflow: hidden; }
.tallers .quadre__cue { color: var(--salvia); }
.tallers__text { max-width: 58ch; margin: 0 auto 1.6rem; color: rgba(243,238,228,.9); }
.tallers__text strong { color: var(--focus); font-weight: 600; }

/* ── instagram (feed del plugin) ────────────────────────────── */
.insta__compte {
  display: inline-flex; align-items: center; gap: .7rem;
  border: 1px solid var(--filet); padding: .65rem 1.3rem;
  font-size: 1.1rem; letter-spacing: .06em; text-decoration: none;
  transition: border-color .25s, color .25s;
}
.insta__compte:hover { border-color: var(--focus); color: var(--focus); }
.insta__compte svg { width: 22px; height: 22px; }
.insta__tira { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 0 4px; }
.insta__tira a { display: block; }
.insta__tira img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.55); transition: filter .35s; }
.insta__tira a:hover img { filter: brightness(1.05); }
.insta__peu { text-align: center; padding: 1.8rem 0 2.5rem; }

/* ── qui som: cronologia de fites ───────────────────────────── */
.fites { max-width: 760px; margin: 0 auto; text-align: left; position: relative; padding-left: 2px; }
.fita {
  display: grid; grid-template-columns: 140px 1fr; gap: 2rem; align-items: baseline;
  border-left: 1px solid var(--filet); padding: 1.4rem 0 1.4rem 2.2rem; position: relative;
}
.fita::before {
  content: ''; position: absolute; left: -5px; top: 2.35rem;
  width: 9px; height: 9px; background: var(--argila);
}
.fita__any { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 420; color: var(--focus); line-height: 1; }
.fita:nth-child(even) .fita__any { color: var(--argila); }
.fita__que strong { color: var(--paper); }
/* etiqueta de fase de la cronologia (la llavor, germinem, creixem…) */
.fita__fase {
  display: block; font-family: "DM Sans", sans-serif; font-weight: 700;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--salvia); margin-bottom: .35rem;
}
.fita__que { color: rgba(243,238,228,.78); }

/* ── qui som: la banda a sang (retrat · manifest · retrat) ──────
   Tres columnes que ocupen tota l'amplada, sense juntes: els dos
   retrats omplen el seu terç i al mig hi va el manifest sobre verd
   corporatiu, amb el segell rodó.                                  */
.duo-banda { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.duo-banda__foto { margin: 0; overflow: hidden; }
.duo-banda__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 8 / 9;
    filter: brightness(.80);
    transition: transform 1.2s ease, filter .5s ease;
}

.duo-banda__foto:hover img {
    transform: scale(1.03);
    filter: brightness(1);
}
.duo-banda__mig {
  position: relative; overflow: hidden;
  background: var(--bosc); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.2rem, 2.4vw, 2rem); text-align: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.4rem, 3vw, 3rem);
}
.duo-banda__fulla { position: absolute; right: -16%; top: -8%; width: 74%; opacity: .16; pointer-events: none; }
.duo-banda__peu {
  position: relative;
  font-size: clamp(.72rem, 1vw, .82rem); letter-spacing: .22em; text-transform: uppercase;
  color: var(--salvia); line-height: 2;
}
.duo-banda__segell { position: relative; width: clamp(110px, 12vw, 176px); height: auto; }
.citacio, .citacio p {
  position: relative;
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem); font-style: italic; color: var(--paper);
  line-height: 1.3; max-width: 20ch; margin: 0 auto;
}

/* les dues fitxes, sota la banda */
.duo-fitxes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); text-align: left; }
.persona__nom { margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 430; line-height: 1;
  letter-spacing: -.015em; color: var(--paper);
}
.persona__nom em { font-style: italic; color: var(--focus); }
.persona--dre .persona__nom em { color: var(--argila); }
.persona__on {
  font-size: .82rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--salvia); margin: .8rem 0 1rem;
}
.persona p:last-child { color: rgba(243,238,228,.8); max-width: 46ch; }

/* ── espectacles (pàgina) ───────────────────────────────────── */
.espectacle__sinopsi { max-width: 60ch; margin: 0 auto 1.4rem; font-size: 1.15rem; color: rgba(243,238,228,.88); }
.espectacle__sinopsi em { font-style: italic; color: var(--focus); }
.espectacle__reconeixements { max-width: 60ch; margin: 0 auto 1.8rem; font-size: .85rem; letter-spacing: .04em; color: rgba(243,238,228,.6); }
.espectacle__accions { display: flex; align-items: center; justify-content: center; gap: 1.3rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.fitxa-tecnica {
  display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.4rem; text-align: left;
  max-width: 560px; margin: 0 auto; border: 1px solid var(--filet); padding: 1.6rem 1.8rem; font-size: .95rem;
}
.fitxa-tecnica dt { color: var(--salvia); letter-spacing: .06em; font-size: .82rem; padding-top: .15rem; }
.fitxa-tecnica dd { margin: 0; }
.tira-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 4px; }
.tira-fotos img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: brightness(.55); transition: filter .35s; }
.tira-fotos img:hover { filter: brightness(1.05); }

/* ── portades de pàgina ─────────────────────────────────────── */
.portada-pagina { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; }
.portada-pagina__fons { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42); }
.portada-pagina__vel { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,20,18,.95) 5%, rgba(13,20,18,.25) 60%); }
.portada-pagina__cos { position: relative; padding: 0 var(--vora) 3rem; }
.portada-pagina__titol { font-size: clamp(3rem, 9vw, 7rem); font-weight: 400; line-height: .98; letter-spacing: -.015em; }
.portada-pagina__sub { color: var(--salvia); letter-spacing: .1em; margin-top: .6rem; font-size: 1.1rem; }

/* ── tallers (pàgina): pilars ───────────────────────────────── */
.pilars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; text-align: left; }
.pilars article { border-top: 1px solid var(--filet); padding-top: 1.2rem; }
.pilars h2 { font-size: 1.4rem; font-weight: 440; margin-bottom: .8rem; line-height: 1.25; color: var(--salvia); }
.pilars p { color: rgba(243,238,228,.8); }

/* ── les entitats: sense requadres, files centrades ─────────── */
.entitats-flux { display: flex; flex-direction: column; gap: clamp(.4rem, 1.4vw, 1.1rem); padding: 1rem var(--vora) 0; }
.entitats-flux__fila {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.4rem, 1.6vw, 1.4rem); flex-wrap: wrap;
}
.entitats-flux a { display: block; }
/* tots els fitxers surten amb el MATEIX llenç (660×260) i l'equilibri òptic
   ja ve cuit a dins: el CSS només ha de donar-los una amplada igual. */
.entitats-flux img {
  width: clamp(132px, 15vw, 200px); height: auto;
  opacity: .85; transition: opacity .3s, transform .3s;
}
.entitats-flux a:hover img, .entitats-flux a:focus-visible img { opacity: 1; transform: translateY(-4px); }
/* arribada esglaonada (el JS posa .vist a la fila) */
[data-js] .entitats-flux__fila a { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.entitats-flux__fila.vist a { opacity: 1; transform: none; }
.entitats-flux__fila.vist a:nth-child(2) { transition-delay: .08s; }
.entitats-flux__fila.vist a:nth-child(3) { transition-delay: .16s; }
.entitats-flux__fila.vist a:nth-child(4) { transition-delay: .24s; }
.entitats-flux__fila.vist a:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .entitats-flux__fila a { opacity: 1; transform: none; transition: none; }
}

/* ── contacte ───────────────────────────────────────────────── */
.llista-dades { list-style: none; display: inline-block; text-align: center; margin-bottom: 3rem; }
.llista-dades a { display: block; padding: .7rem 1rem; text-decoration: none; font-size: 1.15rem; letter-spacing: .04em; }
.llista-dades a:hover { color: var(--focus); }
.llista-dades span { font-size: .85rem; color: var(--salvia); }
.formulari {
  max-width: 560px; margin: 0 auto; text-align: left;
  border: 1px solid var(--filet); padding: 2rem; display: flex; flex-direction: column;
}
.formulari label { font-size: .8rem; letter-spacing: .26em; color: var(--salvia); margin-bottom: .4rem; text-transform: uppercase; }
.formulari input, .formulari textarea {
  font-family: inherit; font-size: 1rem; color: var(--paper);
  background: rgba(243,238,228,.05); border: 1px solid var(--filet);
  padding: .7rem .9rem; margin-bottom: 1.3rem;
}
.formulari input:focus, .formulari textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.formulari .boto-groc { align-self: flex-start; }
.formulari__nota { font-size: .8rem; color: rgba(243,238,228,.5); margin-top: 1rem; }

/* ── crida final ────────────────────────────────────────────── */
.crida {
  padding: 8rem var(--vora); display: flex; justify-content: center; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 55% 65% at 50% 55%, rgba(239,199,94,.16), transparent 70%);
}
.crida__llum { text-align: center; }
.crida__frase { font-size: clamp(2.8rem, 7vw, 5.4rem); font-weight: 400; line-height: 1.02; letter-spacing: -.012em; margin-bottom: 2.6rem; }
.crida__frase em { font-style: italic; color: var(--focus); }

/* ── pàgines de prosa llarga (accessibilitat, legals) ───────── */
.portada-pagina--curta { min-height: 42vh; background: var(--foscor); }
.prosa-llarga { text-align: left; max-width: 74ch; }
.prosa-llarga .quadre__titol { text-align: left; margin-bottom: 2rem; }
.prosa-llarga p { color: rgba(243,238,228,.85); margin-bottom: 1.2rem; }
.prosa-llarga h3 {
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 440; color: var(--salvia);
  margin: 2.6rem 0 .9rem;
}
.prosa-llarga strong { color: var(--paper); }
.prosa-llarga code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em;
  background: rgba(243,238,228,.08); padding: .1em .4em;
}
.llista { list-style: none; margin-bottom: 1.2rem; }
.llista li {
  position: relative; padding-left: 1.5rem; margin-bottom: .7rem;
  color: rgba(243,238,228,.85);
}
.llista li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--argila);
}
.nota-mockup {
  border-left: 3px solid var(--focus); padding: .9rem 1.2rem; margin-top: 2.4rem;
  background: rgba(239,199,94,.07); font-size: .95rem;
}


/* ── correccions d'accessibilitat (auditoria 25-08-2026) ────────
   Contrast mínim 4,5:1 al text petit i objectius tàctils de 44 px
   a tot el que es pot clicar fora d'un paràgraf.                 */
.entitats-flux a { min-height: 46px; min-width: 46px; display: grid; place-items: center; }

/* ── mòbil (390) ────────────────────────────────────────────── */
@media (max-width: 820px) {
  .hero { height: 80vh; }
  .quadre { padding: 4rem 1.25rem; }
  .companyia__retrats { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .portada-obra { min-height: 68vh; }
  .portada-pagina { min-height: 46vh; }
  .banda { min-height: 46vh; }
  .esd__fila { grid-template-columns: 96px 1fr; }
  .esd__hora { grid-column: 2; text-align: left; }
  .videos { grid-template-columns: 1fr; gap: 2.2rem; }
  .fita { grid-template-columns: 84px 1fr; gap: 1.2rem; padding-left: 1.4rem; }
  .duo-banda { grid-template-columns: 1fr; }
  .duo-banda__mig { min-height: 0; padding: 3rem 1.5rem; order: 0; }
  .duo-banda__foto img { aspect-ratio: 8 / 9; }
  .duo-fitxes { grid-template-columns: 1fr; gap: 2.5rem; }
  .pilars { grid-template-columns: 1fr; }
  .insta__tira { grid-template-columns: repeat(3, 1fr); }
  .tira-fotos { grid-template-columns: repeat(2, 1fr); }
  .entitats-flux img { height: 34px; max-width: 150px; }
  .crida { padding: 5rem 1.25rem; }
}

/* ── qui som: la fitxa de la dreta fa de mirall ─────────────────
   Tot el bloc alineat a la dreta perquè les dues columnes es
   tanquin cap al centre.                                        */
.persona--dre { text-align: right; }
.persona--dre p:last-child { margin-left: auto; }
@media (max-width: 820px) {
  .persona--dre { text-align: left; }
  .persona--dre p:last-child { margin-left: 0; }
}

/* ── tallers a la home: secció amb pes propi ────────────────────
   Abans era una tira fina que es perdia. Ara és una banda verda a
   sang amb text i una graella de quatre fotos, al nivell de les
   portades d'obra.                                               */
.tallers-home {
  position: relative; overflow: hidden;
  background: var(--bosc); color: var(--paper);
  padding: clamp(3.5rem, 7vw, 6rem) var(--vora);
}
.tallers-home__fulla { position: absolute; left: -8%; bottom: -30%; width: min(34vw, 420px); opacity: .13; pointer-events: none; }
.tallers-home__dins {
  position: relative; max-width: var(--ample); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.tallers-home__text { text-align: left; }
.tallers-home__titol {
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 410; line-height: 1.05;
  letter-spacing: -.01em; margin-bottom: 1.2rem;
}
.tallers-home__titol em { font-style: italic; color: var(--focus); }
.tallers-home__entrada { color: rgba(243,238,228,.9); max-width: 46ch; margin-bottom: 1.4rem; }
.tallers-home__xifra {
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--salvia);
  border-top: 1px solid rgba(243,238,228,.25); padding-top: 1.1rem; margin-bottom: 1.8rem;
}
.tallers-home__xifra span {
  display: block; letter-spacing: .12em; font-size: .95em;
  color: rgba(185,201,168,.8); margin-top: .35rem;
}
.tallers-home__xifra strong {
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-size: 1.9rem; font-weight: 430; color: var(--focus); letter-spacing: 0;
  vertical-align: -.15em; margin-right: .2em;
}
.tallers-home__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tallers-home__fotos img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: brightness(.88); transition: filter .35s, transform .6s;
}
.tallers-home__fotos img:hover { filter: brightness(1.05); transform: scale(1.02); }
@media (max-width: 820px) {
  .tallers-home__dins { grid-template-columns: 1fr; gap: 2.2rem; }
  .tallers-home__fotos { gap: .35rem; }
}

/* ── tres fotos: una gran a dalt i dues a sota ── */
.tallers-home__fotos {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "gran gran" "a b";
}

.tallers-home__gran {
  grid-area: gran;
  aspect-ratio: 16 / 9 !important;
}

/* FOTO GRAN: només s'aclareix, NO fa zoom */
.tallers-home__fotos .tallers-home__gran:hover img {
  filter: brightness(1.05) !important;
  transform: none !important;
}

.tallers-home__fotos .tallers-home__gran img {
  transform: none !important;
}

.tira-fotos--tres {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 820px) {
  .tira-fotos--tres {
    grid-template-columns: 1fr;
  }
}

/* ═══ 4 · EL FULL DE SALA, PINTAT PER SE7 EVENTS ═══
   La vista «programa» (SE7 Events 0.19.0) porta classes pròpies. Aquestes
   regles són les .esd* del mockup GENERADES amb un mapa de noms
   (alias-programa.js): si canvia el mockup, canvien soles. Prefixades amb
   «.esd» —el contenidor— per guanyar al CSS estructural del plugin. */
.esd .se7e-programa__fila { display: grid; grid-template-columns: 150px 1fr auto; gap: 1.6rem; align-items: center; border-top: 1px solid var(--filet); padding: 1.7rem .4rem; text-decoration: none; }
.esd .se7e-programa__fila:last-of-type { border-bottom: 1px solid var(--filet); }
.esd .se7e-programa__fila:hover { background: rgba(243,238,228,.04); }
.esd .se7e-programa__dia { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 420; color: var(--focus); line-height: 1; }
.esd .se7e-programa__mes { display: block; font-size: .5em; letter-spacing: .3em; text-transform: uppercase; margin-top: .3em; color: var(--salvia); font-family: "DM Sans", sans-serif; }
.esd .se7e-programa__titol { font-size: 1.3rem; font-weight: 600; margin-bottom: .2rem; }
.esd .se7e-programa__lloc { color: rgba(243,238,228,.7); font-size: .98rem; }
.esd .se7e-programa__hora { color: var(--salvia); letter-spacing: .1em; font-size: .95rem; text-align: right; }
.esd .se7e-programa__fila:hover .se7e-programa__titol { color: var(--focus); }
/* El que el plugin afegeix i el mockup no tenia: el número del dia és un
   span a part, i la crida («places ⟶») és text dins de l'enllaç. */
.esd .se7e-programa__num { display: block; font-size: 1em; font-weight: inherit; }
.esd .se7e-programa__que { min-width: 0; }
.esd .se7e-programa__accio { color: var(--salvia); }
.esd .se7e-programa__fila:hover .se7e-programa__accio { color: var(--focus); }
.esd .se7e-programa__fila.mec-past-event { opacity: .6; }
.esd .se7e-programa__estat .se7e-anullat { color: var(--argila); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.esd .se7e-buit .se7e-cap { text-align: center; color: rgba(243,238,228,.7); padding: 2rem 0; }
@media (max-width: 820px) {
  .esd .se7e-programa__fila { grid-template-columns: 96px 1fr; }
  .esd .se7e-programa__hora { grid-column: 2; text-align: left; }
}