/*
 * pagines.css — el vestit de les pàgines de WPBakery del mockup de Quei15
 *
 * Germà de `botiga.css`, i amb la mateixa regla: aquí NOMÉS hi ha el que no
 * es pot dir amb una opció de The7 ni amb els Design Options de la fila.
 * Els paddings, els fons de banda i els filets van al `css=` de cada fila,
 * que és on els posaria una persona des de l'editor; això d'aquí és el
 * sistema de text del mockup —les classes `fila__*`, `artista__*`,
 * `etiqueta`— que WordPress no coneix de res.
 *
 * Els selectors surten del HTML SERVIT per /mockup/index.php/tallers/:
 *
 *   .vc_row.q15-fila                 la targeta de llista
 *     .vc_col-sm-1                   columna de data
 *     .vc_col-sm-3                   columna d'imatge
 *       .shortcode-single-image-wrap el marc de dt_fancy_image (amb width en línia)
 *         .fancy-media-wrap > img
 *     .vc_col-sm-8                   columna de text
 *   .vc_row.q15-artistes             graella de quatre retrats
 *   .vc_row.q15-exposar              banda amb imatge de fons
 *   .vc_row.q15-franja               banda de color
 *
 * ⚠ Especificitat. Els estils de titular de The7 surten de Theme Options i
 * pesen: `.fila__titol` sol es queda a 52px (mesurat) perquè el que mana és
 * la regla del tema per a `h2`. Per això els selectors porten sempre la
 * fila al davant, i on cal es diu `!important` a posta i no per si de cas.
 */

.q15-fila,
.q15-artistes,
.q15-exposar,
.q15-franja,
.q15-barra {
  --q15-blanc: #FFFFFF;
  --q15-negre: #141414;
  --q15-gris-text: #565656;
  --q15-gris-mig: #8A8A8A;
  --q15-gris-linia: #E6E6E3;
  --q15-gris-fons: #F6F6F4;
  --q15-gris-tint: #EFEFEC;
  --q15-accent: #00A29C;
  --q15-gir: -1.4deg;
  --q15-titols: 'Archivo', system-ui, sans-serif;
  --q15-cos: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

/* Els blocs de text de WPBakery porten un marge inferior de sèrie que
 * separa cada paràgraf com si fos una secció. Al mockup, la fitxa és
 * compacta i la separació la fan els marges de cada peça. */
.q15-fila .wpb_text_column,
.q15-artistes .wpb_text_column,
.q15-exposar .wpb_text_column,
.q15-franja .wpb_text_column,
.q15-barra .wpb_text_column {
  margin-bottom: 0;
}

/* ═══════════════════════ targeta de llista (.fila) ══════════════════════ */

/* — columna de data — */
.q15-fila .fila__data {
  font-family: var(--q15-titols);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--q15-negre);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Petició del client (08-2026): la columna de data justificada a la
 * dreta, tant a projectes com a tallers — la data arrima a la imatge.
 * El mockup ho porta igual (`.fila__data` de styles.css). Només mentre la
 * data és columna: apilada al mòbil, a la dreta quedaria penjada. */
@media (min-width: 768px) {
  .q15-fila .fila__data {
    text-align: right;
  }
}

/*
 * ⚠ LES DUES FORMES, I NO ÉS PER GUST (T-74). El segon renglonet de la columna
 * de data penjava d'un `<small>` PELAT, i l'editor de WPBakery s'empassa les
 * etiquetes en línia sense cap atribut: el dia que algú obrís la pàgina al
 * constructor i desés, la seu se n'aniria a la mateixa línia que la data i
 * ningú no sabria per què. Ara el sembrador hi posa una classe i el full
 * vesteix les dues coses: el marcatge nou i el que ja hi ha al lloc.
 */
.q15-fila .fila__data .fila__seu,
.q15-fila .fila__data small {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--q15-gris-text);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* — imatge —
 * `dt_fancy_image` escriu `width:300px` a l'estil en línia del marc, que és
 * el que li hem demanat. Dins de la columna, el mockup vol que ompli
 * l'amplada i que la retallada sigui 4/3. */
.q15-fila .shortcode-single-image-wrap {
  width: 100% !important;
  max-width: 100%;
}

.q15-fila .fancy-media-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--q15-gris-fons);
}

.q15-fila .fancy-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.q15-fila:hover .fancy-media-wrap img {
  transform: scale(1.03);
}

/* — les files de la llista d'exposicions —
 *
 * ⚠ AQUÍ NO HI VA CAP EXCEPCIÓ, I ÉS UNA DECISIÓ. La banda 3:1 d'aquesta
 * llista la va demanar la Sandra («la proporció de les miniatures de la web
 * vella») i es queda: la fila ensenya la BANDA que el client hi posa i el
 * cartell vertical sencer surt en entrar a la fitxa, secció per secció com ho
 * té ell. (Albert, 17-08-2026, davant de l'alternativa de fer créixer la fila
 * fins als 420px.) Set de les vint tenen banda pròpia; a les altres tretze hi
 * va el cartell, i el marc 3:1 el retalla.
 *
 * Es va provar d'ensenyar-ne el CAPDAMUNT en comptes del mig, pensant que és
 * on van els títols, i **llegeix pitjor**: aquests cartells posen el títol al
 * centre i a dalt hi tenen la capçalera de la galeria o marge blanc. Amb el
 * retall centrat, de «Vachement obstinée» i de «Sintonías» se'n llegeix el nom;
 * pel capdamunt, no. I la fila ja porta el títol, l'artista i el resum escrits
 * al costat: la imatge identifica, no informa.
 */

/* — etiqueta (el xip inclinat) — */
.q15-fila .etiqueta,
.q15-artistes .etiqueta {
  display: inline-block;
  font-family: var(--q15-titols);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 14px 7px;
  margin: 0 0 18px;
  transform: rotate(var(--q15-gir));
}

.q15-fila .etiqueta--turquesa {
  color: var(--q15-negre);
  background: var(--q15-gris-tint);
  box-shadow: inset 4px 0 0 var(--q15-negre);
}

.q15-fila .etiqueta--magenta,
.q15-fila .etiqueta--blava {
  color: var(--q15-blanc);
  background: var(--q15-negre);
}

.q15-fila .etiqueta--passada {
  color: var(--q15-gris-text);
  background: #F1F1EE;
  box-shadow: inset 4px 0 0 var(--q15-gris-mig);
}

/* — les tres tries del catàleg (Albert, 21-08-2026) —
   El color de l'etiqueta es tria a SE7 Catàleg (meta _q15_etiqueta_color) i
   q15-marc.php §6/§6b posa aquestes classes. Els noms porten «tria-» a
   posta: «etiqueta--magenta» ja vol dir NEGRE (herència del mockup v2,
   congelada per fidelitat) i reutilitzar-lo hauria mentit. El negre i el
   gris calquen les dues variants que ja es veuen a la llista; el magenta és
   el de la casa, el mateix que l'etiqueta del popup. */
.q15-fila .etiqueta--tria-negre {
  color: var(--q15-blanc);
  background: var(--q15-negre);
}

.q15-fila .etiqueta--tria-gris {
  color: var(--q15-negre);
  background: var(--q15-gris-tint);
  box-shadow: inset 4px 0 0 var(--q15-negre);
}

/* El magenta es queda com a recurs per a exposicions (retorn del client,
   07-09-2026): és l'únic lloc de la v2 on el color vell segueix viu, i
   per això va escrit a pèl i no per la variable d'accent. */
.q15-fila .etiqueta--tria-magenta {
  color: var(--q15-blanc);
  background: #E6007E;
}

/* L'accent de la casa a la v2: verd amb text NEGRE. El blanc sobre el verd
   fa 3,2:1 i no passa la WCAG AA per a text; el negre hi fa 6,6:1. */
.q15-fila .etiqueta--tria-verd {
  color: var(--q15-negre);
  background: var(--q15-accent);
}

/* — text —
 * El titular ha de baixar de 52px (mida h2 de Theme Options) a la del
 * mockup. És l'únic lloc d'aquest full on el `!important` no és una
 * comoditat: la regla del tema té la mateixa especificitat i va després. */
.q15-fila .fila__titol,
.q15-fila h2.fila__titol {
  font-family: var(--q15-titols);
  font-size: clamp(24px, 2.3vw, 32px) !important;
  font-weight: 700;
  line-height: 1.1;
  color: var(--q15-negre);
  margin: 0 0 6px;
  text-transform: none;
  letter-spacing: -0.01em;
}

.q15-fila .fila__titol a {
  color: inherit;
}

.q15-fila .fila__artista {
  font-family: var(--q15-titols);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--q15-negre);
  margin: 0 0 12px;
}

.q15-fila .fila__text {
  color: var(--q15-gris-text);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
}

/* Els dos botons, un al costat de l'altre amb la separació del mockup. */
.q15-fila .dt-btn + .dt-btn {
  margin-left: 12px;
}

/* ═══════════════════════ graella d'artistes ════════════════════════════ */

.q15-artistes .shortcode-single-image-wrap {
  width: 100% !important;
  max-width: 100%;
}

.q15-artistes .fancy-media-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--q15-gris-fons);
  margin-bottom: 14px;
  position: relative;
}

.q15-artistes .fancy-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.q15-artistes .vc_column_container:hover .fancy-media-wrap img {
  transform: scale(1.04);
}

/* El filet magenta que puja en passar-hi per damunt. */
.q15-artistes .fancy-media-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--q15-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}

.q15-artistes .vc_column_container:hover .fancy-media-wrap::after {
  transform: scaleX(1);
}

.q15-artistes .artista__nom {
  font-family: var(--q15-titols);
  font-size: 19px;
  font-weight: 700;
  color: var(--q15-negre);
  line-height: 1.15;
  margin: 0;
}

.q15-artistes .artista__rol {
  font-size: 15px;
  line-height: 1.6;
  color: var(--q15-gris-text);
  margin: 0 0 12px;
}

.q15-artistes .dt-btn + .dt-btn {
  margin-left: 8px;
}

/* ═════════════════════════ barra de recompte ═══════════════════════════ */

.q15-barra .botiga__compte {
  font-family: var(--q15-cos);
  font-size: 16px;
  color: var(--q15-gris-text);
  margin: 0;
  display: inline-block;
}

.q15-barra .botiga__compte + .botiga__compte {
  margin-left: 28px;
}

.q15-barra .botiga__compte strong {
  color: var(--q15-negre);
  font-weight: 700;
}

/* ═══════════════════════ bandes: exposar i franja ══════════════════════ */

.q15-exposar .exposar__titol {
  font-family: var(--q15-titols);
  font-size: clamp(32px, 4.4vw, 60px) !important;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--q15-blanc);
  margin: 0 0 16px;
  text-transform: none;
}

.q15-exposar .exposar__text {
  font-size: clamp(17px, 1.7vw, 21px);
  color: rgba(255, 255, 255, .9);
  max-width: 560px;
  margin: 0;
}

.q15-franja .franja__text {
  font-family: var(--q15-titols);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--q15-negre);
  max-width: 900px;
  margin: 0;
}

/* ═══════════════════════════ responsiu ═════════════════════════════════ */

/*
 * WPBakery apila les columnes per sota de 768px tot sol (`vc_col-sm-*`).
 * Per sobre, el mockup passa la targeta a dues línies a 900px: la data
 * s'amaga i la imatge s'eixampla. Aquí només cal que la columna de data no
 * es quedi amb una amplada ridícula quan la fila encara no s'ha apilat.
 */
@media (max-width: 991px) {
  .q15-fila .fila__data {
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * LA PORTADA — els detalls en rosa i en moviment
 *
 * El magenta (#00A29C) del sistema v3 és «molt restringit»: ho diu el
 * propi CSS del mockup, i surt exactament a cinc llocs — el filet sota els
 * titulars de secció, el rombe de la cinta, la barra de progrés del
 * slider, el subratllat del titular enllaçat i el filet que puja sota les
 * imatges en passar-hi per damunt.
 *
 * El moviment són tres coses: la cinta que llisca, les caixes d'accés que
 * s'aixequen i es posen rectes, i els filets que creixen de zero. Totes
 * tres es paren amb `prefers-reduced-motion`, que el mockup no fa i que
 * aquí sí: una animació infinita sense manera d'aturar-la és un problema
 * d'accessibilitat, no un detall.
 * ═══════════════════════════════════════════════════════════════════════ */

.q15-ticker,
.q15-portes,
.q15-intro-galeria,
.q15-cards,
.q15-cap-seccio,
.q15-tambe,
.q15-tambe-cap,
.q15-productes-home {
  --q15-blanc: #FFFFFF;
  --q15-negre: #141414;
  --q15-gris-text: #565656;
  --q15-gris-mig: #8A8A8A;
  --q15-gris-linia: #E6E6E3;
  --q15-gris-fons: #F6F6F4;
  --q15-gris-tint: #EFEFEC;
  --q15-accent: #00A29C;
  --q15-gir: -1.4deg;
  --q15-titols: 'Archivo', system-ui, sans-serif;
  --q15-cos: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

.q15-cap-seccio .wpb_text_column,
.q15-cards .wpb_text_column,
.q15-portes .wpb_text_column,
.q15-tambe .wpb_text_column,
.q15-tambe-cap .wpb_text_column,
.q15-ticker .wpb_text_column,
.q15-intro-galeria .wpb_text_column {
  margin-bottom: 0;
}

/*
 * Al mockup la cinta TOCA el slider (només la separa el seu border-top).
 * El buit de 50px era el coixí de contingut de TOT el lloc
 * (`general-page_content_margin` → `#main { padding: 50px 0 ... }` al CSS
 * dinàmic): l'opció no es toca perquè la resta de pàgines el volen — a la
 * portada, que obre amb el hero, se li treu el de dalt i prou.
 */
.home #main {
  padding-top: 0;
}

/* ──────────────── titular de secció amb el filet magenta ─────────────── */

.q15-cap-seccio .titol-seccio,
.q15-tambe-cap .titol-seccio {
  font-family: var(--q15-titols);
  font-size: clamp(32px, 3.6vw, 52px) !important;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--q15-negre);
  margin: 0;
  text-transform: none;
}

/*
 * V2 (retorn del client, 07-09-2026): fora el guió inclinat de damunt dels
 * títols. En lloc seu, UN FILET FI QUE CREIX fins a l'ample de la secció
 * quan entra a la vista, com la barra de progrés del hero. El moviment el
 * dispara marc.js posant `.q15-vist` (IntersectionObserver); sense
 * JavaScript o amb moviment reduït, el filet ja hi és sencer.
 */
.q15-cap-seccio .titol-seccio--filet,
.q15-tambe-cap .titol-seccio--filet {
  position: relative;
  padding-top: 22px;
}

.q15-cap-seccio .titol-seccio--filet::before,
.q15-tambe-cap .titol-seccio--filet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--q15-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.q15-vist .titol-seccio--filet::before,
.titol-seccio--filet.q15-vist::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .q15-cap-seccio .titol-seccio--filet::before,
  .q15-tambe-cap .titol-seccio--filet::before {
    transform: scaleX(1);
    transition: none;
  }
}

.q15-cap-seccio .titol-enllac {
  color: inherit;
}

.q15-cap-seccio .titol-enllac:hover {
  color: var(--q15-negre);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--q15-accent);
}

.q15-cap-seccio .num-seccio {
  font-family: var(--q15-titols);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--q15-gris-text);
  display: block;
  margin-bottom: 10px;
}

/* ───────────────────────── la cinta que es mou ───────────────────────── */

/*
 * ⚠ Això NO és cap element de l'stack, i no per mandra. No és un carrusel:
 * és una cinta contínua sense diapositives, que a més s'ha d'aturar quan
 * el ratolí hi passa per sobre. Cap carrusel de The7 ni d'Ultimate fa
 * això; el que sí que ho fa són set línies de CSS.
 */
.q15-ticker .ticker {
  background: var(--q15-blanc);
  color: var(--q15-negre);
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--q15-gris-linia);
  border-bottom: 1px solid var(--q15-gris-linia);
}

/*
 * ⚠ LA TIPOGRAFIA VA A LA FILA, NO NOMÉS ALS `span`.
 *
 * L'editor de WPBakery es menja els `<span>` sense estil propi en desar la
 * pàgina. Va passar el 17-08-2026: algú va tocar els textos de les targetes
 * i, de retruc, els setze `<span>` del prompter van desaparèixer. Sense
 * ells el text perdia majúscules, espaiat i coixins, la fila queia de
 * 3.831px a 1.844 —menys del doble del contenidor— i el bucle deixava mig
 * pam de blanc a cada volta.
 *
 * Ara els estils viuen a la FILA (les hereten tant els `span` com el text
 * pelat) i la separació la donen els rombes. Amb `span` o sense, es veu
 * igual: si l'editor els torna a escombrar, no es nota.
 */
.q15-ticker .ticker__row {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: q15-ticker 46s linear infinite;
  font-family: var(--q15-titols);
  line-height: 1.6;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.q15-ticker .ticker:hover .ticker__row {
  animation-play-state: paused;
}

/* Els `span`, si hi són, ja hereten la tipografia de la fila: aquí no cal
 * repetir-la. I el coixí de 26px NO va aquí sinó al rombe, perquè la
 * separació existeixi tant si hi ha `span` com si l'editor se'ls ha menjat.
 * El resultat és idèntic: entre dos textos, 26px, el rombe, i 26px més. */
.q15-ticker .ticker__row span {
  padding: 0;
}

/*
 * El rombe va en Source Sans 3 A POSTA. Space Grotesk no porta el glif ◆ i
 * el navegador l'aniria a buscar a una font del sistema, que després surt
 * al PDF i embruta la llista de tipografies a Illustrator. És una nota del
 * mockup, i es conserva perquè el motiu segueix sent cert.
 */
.q15-ticker .ticker__row i {
  font-family: var(--q15-cos);
  color: var(--q15-accent);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 26px;
}

/*
 * TRES còpies del text, i el bucle avança UNA (−33,333%).
 *
 * El mockup en porta dues i avança −50%, i això només és sense costura
 * mentre una còpia sigui més ampla que la finestra. Mesurat: una còpia fa
 * 1.915px, o sigui que a 1920px de pantalla quedava un forat de 5px a cada
 * volta. Amb tres còpies el marge arriba fins a 3.830px d'amplada.
 *
 * ⚠ El nombre de còpies del CONTINGUT i el percentatge d'aquí han d'anar
 * sempre lligats: dues còpies → −50%, tres → −33.3333%. Si algú toca l'un
 * sense l'altre, el prompter salta i no ho diu ningú.
 */
@keyframes q15-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

@media (prefers-reduced-motion: reduce) {
  .q15-ticker .ticker__row { animation: none; }
}

/* ──────────────────────── les tres caixes d'accés ────────────────────── */

/*
 * El fons a tot l'ample de la finestra, les targetes on ja eren.
 *
 * Al mockup és un `<section>` de bloc (ample per naturalesa) amb un
 * `<div class="contenidor">` a dins que centra la graella. Aquí la fila
 * viu dins del `.wf-wrap` de The7 i les tres columnes són flexibles
 * (`vc_row-flex`): estirar la FILA a 100vw les hauria estirat també a
 * elles. En comptes d'això, el fons el pinta un `::before` que s'estén
 * per darrere sense moure res del que hi ha a sobre — ni la fila ni les
 * columnes canvien d'amplada.
 *
 * `#page` i `<body>` porten `overflow-x: hidden` a tot el lloc (és el
 * truc habitual del tema per no obrir barra de desplaçament horitzontal),
 * i són exactament a l'amplada de la finestra: el 100vw del pseudoelement
 * no desborda mai per sobre d'aquell límit.
 */
/*
 * ⚠ AQUÍ HI VA HAVER UN `::before` amb `z-index: -1` i va durar poc.
 * Mesurava perfecte —fons de 1440px, targetes al seu lloc— i tot i així hi
 * havia qui no veia el gris. Un pseudoelement amb z-index negatiu es pinta
 * per sota del context d'apilament que el conté: n'hi ha prou que un
 * ancestre guanyi un fons (l'editor de WPBakery, una plantilla amb fons de
 * pàgina, un plugin) perquè desaparegui SENSE CAP ERROR i sense que es
 * pugui reproduir des d'aquí.
 *
 * Ara el fons és de l'element mateix —o sigui que es pinta sempre— i el
 * sagnat es fa amb marges negatius compensats amb coixins iguals: la CAIXA
 * DE CONTINGUT queda exactament igual d'ampla que abans, per tant les tres
 * columnes flexibles no es mouen ni un píxel. És la tècnica de sagnat
 * complet de tota la vida i no depèn de l'ordre de pintat de ningú.
 *
 * El 100vw no obre barra horitzontal perquè `#page` i `<body>` porten
 * `overflow-x: hidden` a tot el lloc.
 */
.q15-portes {
  background: var(--q15-gris-fons);
  border-bottom: 1px solid var(--q15-gris-linia);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /*
   * Els −15px són els que `vc_row-fluid` dona de sèrie a totes les files de
   * WPBakery (mesurat: fila a x=95 dins d'un pare a x=110). En posar-hi
   * marges propis es perdien, i les targetes saltaven de x=108 a x=123 —
   * desalineades de tot el text de la pàgina. Es tornen al coixí.
   */
  padding-left: calc(50vw - 50% - 15px);
  padding-right: calc(50vw - 50% - 15px);
}

.q15-portes .porta {
  position: relative;
  display: block;
  height: 100%;
  background: var(--q15-blanc);
  border: 2px solid var(--q15-negre);
  padding: 34px 30px 28px;
  color: var(--q15-negre);
  transition: transform .22s ease, background-color .22s, border-color .22s;
}

/* La diagonal del sistema: cada caixa girada una mica diferent. */
.q15-portes .porta--1 { transform: rotate(-1.4deg); }
.q15-portes .porta--2 { transform: rotate(0.7deg); }
.q15-portes .porta--3 { transform: rotate(-0.6deg); }

.q15-portes .porta:hover {
  transform: rotate(0deg) translateY(-6px);
  text-decoration: none;
  background: var(--q15-negre);
}

.q15-portes .porta:hover .porta__titol,
.q15-portes .porta:hover .porta__desc,
.q15-portes .porta:hover .porta__go {
  color: var(--q15-blanc);
}

.q15-portes .porta > span { display: block; }

.q15-portes .porta__titol {
  /*
   * ⚠ Cotejat: el títol de porta va amb la font del COS, no amb la de
   * titulars. El mockup no li declara família i un <span> hereta del body;
   * és Source Sans 3 en negreta, i és a posta (els h1-h4 sí que van en
   * Space Grotesk). La primera versió d'aquest full ho «corregia» cap a
   * la font de titols, i el comparador ho va enxampar.
   */
  font-family: var(--q15-cos);
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 700;
  line-height: 1.02;
  margin-bottom: 10px;
  transition: color .22s;
}

.q15-portes .porta__desc {
  font-size: 16.5px;
  color: var(--q15-gris-text);
  margin-bottom: 20px;
  transition: color .22s;
}

.q15-portes .porta__go {
  font-family: var(--q15-titols);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--q15-negre);
  display: flex !important;
  align-items: center;
  gap: 8px;
  transition: color .22s, gap .22s;
}

/* La fletxa s'allunya: el moviment petit del mockup. */
.q15-portes .porta:hover .porta__go { gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .q15-portes .porta,
  .q15-portes .porta__go { transition: none; }
  .q15-portes .porta:hover { transform: rotate(0deg); }
}

/* ────────────────── el bloc de text ample de la galeria ──────────────── */

.q15-intro-galeria .intro-galeria__text {
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.5;
  color: var(--q15-negre);
  max-width: 1000px;
  margin: 0;
}

.q15-intro-galeria .intro-galeria__text strong {
  font-family: var(--q15-titols);
  font-weight: 700;
}

.q15-intro-galeria .intro-galeria__text em {
  font-style: italic;
  color: var(--q15-gris-text);
}

/* ─────────────── targetes: el filet magenta que creix de zero ────────── */

.q15-cards .shortcode-single-image-wrap,
.q15-tambe .shortcode-single-image-wrap {
  width: 100% !important;
  max-width: 100%;
}

.q15-cards .fancy-media-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--q15-gris-fons);
  margin-bottom: 18px;
  position: relative;
}

.q15-tambe .fancy-media-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--q15-gris-fons);
  margin-bottom: 22px;
  position: relative;
}

.q15-cards .fancy-media-wrap img,
.q15-tambe .fancy-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.q15-tambe .fancy-media-wrap img { object-position: 50% 25%; }

.q15-cards .fancy-media-wrap::after,
.q15-tambe .fancy-media-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--q15-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.q15-cards .vc_column_container:hover .fancy-media-wrap::after,
.q15-tambe .vc_column_container:hover .fancy-media-wrap::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .q15-cards .fancy-media-wrap::after,
  .q15-tambe .fancy-media-wrap::after { transition: none; }
}

/*
 * ⚠ Cotejat i corregit: a la secció «Exposicions» de la portada el que va
 * GRAN és l'ARTISTA (Space Grotesk 30px), i el títol de l'obra va petit i
 * en cursiva. La secció destaca l'artista —ho diu el comentari del propi
 * mockup— i la primera versió d'aquest full ho tenia al revés.
 */
.q15-cards .card__artista {
  display: block;
  font-family: var(--q15-titols);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--q15-negre);
  margin-bottom: 4px;
}

/* V2: la segona línia sense cursiva i dos punts més gran (client, 07-09). */
.q15-cards .card__titol-obra {
  display: block;
  font-family: var(--q15-cos);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--q15-gris-text);
  margin-bottom: 16px;
}

/* Cap veladura de color damunt de l'obra: el rollover de The7 (l'`a.rollover`
   que embolcalla la imatge enllaçada) pinta una capa d'accent en passar-hi.
   Aquí la imatge es queda neta i el filet de sota fa tota la feina. */
.q15-cards .rollover::before,
.q15-cards .rollover::after,
.q15-cards .rollover .rollover-content,
.q15-tambe .rollover::before,
.q15-tambe .rollover::after,
.q15-tambe .rollover .rollover-content {
  display: none !important;
}


/*
 * ⚠ QUAN LA IMATGE PORTA ENLLAÇ, HI HA UN «a» ENTREMIG.
 *
 * Amb `onclick="custom_link"`, The7 embolcalla la imatge amb un
 * `a.rollover` DINS de `.fancy-media-wrap`. El marc té la proporció,
 * l'enllaç no, i la imatge se'n va a la seva mida natural: les targetes
 * sortien a 387x268, 387x263 i 387x290 —cadascuna la seva— quan totes tres
 * han de fer 4/3, i el bloc de «Quei15 també és…» a 595x842 amb el marc
 * a 595x372.
 *
 * Mesurat comparant el mockup i l'stack imatge a imatge; al HTML servit
 * això no es veu de cap manera. Les files de `.q15-fila` no hi queien
 * perquè el seu enllaç és «#» i llavors no hi ha cap `a`: la mateixa regla
 * val amb enllaç i sense.
 */
.q15-fila .fancy-media-wrap > a,
.q15-artistes .fancy-media-wrap > a,
.q15-cards .fancy-media-wrap > a,
.q15-tambe .fancy-media-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* ──────────────────────── «Quei15 també és…» ─────────────────────────── */

.q15-tambe-cap .tambe-cap__logo {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 14px;
}

.q15-tambe .bloc__titol {
  font-family: var(--q15-titols);
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 700;
  line-height: 1.08;
  color: var(--q15-negre);
  margin: 0 0 10px;
  text-transform: none;
}

.q15-tambe .bloc__text {
  color: var(--q15-gris-text);
  max-width: 480px;
  margin: 0 0 18px;
}

/* ─────────────────── graella de productes de la portada ──────────────── */

/*
 * ⚠ T-20 · `dt_products_masonry` NO té caixa de Design Options: el seu
 * bridge no declara ni `css_editor` ni `el_class`. Per això aquests estils
 * pengen de la fila que l'embolcalla i no de l'element.
 *
 * La fitxa de producte ja porta el seu vestit de `botiga.css` —autor,
 * títol, dades, preu i botó—: aquí només hi ha el que canvia a la portada.
 */
.q15-productes-home .q15-obra .woocom-list-content {
  text-align: left;
}

.q15-productes-home .text-intro,
.text-intro {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  max-width: 720px;
  color: var(--q15-negre, #141414);
}

/* ──────────────────────── la banda baixa amb lema ────────────────────── */

.q15-exposar--baix .exposar__lema {
  font-family: var(--q15-titols);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  color: #FFFFFF;
  max-width: 900px;
  margin: 0;
}

/* ═══════════════ correccions de la passada de fidelitat ════════════════ */

/*
 * L'entrada de pàgina (el paràgraf sota el títol). És marcatge nostre
 * (patroEntrada) i sortia amb el cos del tema: 15px negre. El mockup:
 * 19px, gris, interlínia 1.6, amplada de lectura.
 */
.pagina-cap__entrada {
  font-size: 19px;
  line-height: 1.6;
  color: #565656;
  max-width: 720px;
  margin: 0;
}

/*
 * V2: els botons van TOTS en majúscules, amb filet prim i fons blanc (retorn
 * del client, 07-09-2026). La regla única és a v2.css; la que hi havia aquí
 * (caixa normal per als botons de fitxa, com el mockup) s'ha retirat.
 */

/*
 * Les columnes de la fila, clavades a la graella del mockup:
 * `grid-template-columns: 130px 300px 1fr`. Les dotzenes de WPBakery
 * (1/12 + 1/4 + 2/3) donaven la imatge a 276px on el mockup en vol 300.
 *
 * ⚠ Els percentatges COMPENSEN el `vc_column-inner`, que posa 15px de
 * coixí a cada costat de cada columna: la columna d'imatge ha de fer
 * 330px perquè la imatge en faci 300. Mesurat: amb el 24.6% «exacte», la
 * imatge sortia a 271.
 */
@media (min-width: 768px) {
  .q15-fila > .wpb_column.vc_col-sm-1 { width: 13.1%; }
  .q15-fila > .wpb_column.vc_col-sm-3 { width: 27%; }
  .q15-fila > .wpb_column.vc_col-sm-8 { width: 59.9%; }
}

/*
 * La interlínia dels botons de la casa. El `size="custom"` del
 * dt_default_button escriu la seva pròpia interlínia en píxels i guanya
 * qualsevol selector raonable; aquí el `!important` és mesurat, no
 * preventiu (sense ell: 16px; el mockup, com que els botons de fitxa són
 * <a>, hereta el cos: 21.6px).
 */
.q15-fila .dt-btn,
.q15-artistes .dt-btn,
.q15-cards .dt-btn,
.q15-tambe .dt-btn,
.q15-exposar .dt-btn,
.q15-intro-galeria .dt-btn {
  line-height: 1.6 !important;
}

/* ═════════════════ el marc, cotejat (menú i títol de pàgina) ═══════════ */

/*
 * La interlínia del menú NO és cap opció: `header-menu-typography` només
 * llegeix família, mida i transformació (`inc/less-vars.php:918-928`,
 * llegit abans d'escriure — T-02). El mockup fa 28px (17.5 × 1.6).
 */
#primary-menu > li > a .menu-text {
  line-height: 1.6;
}

/*
 * L'espaiat del títol de pàgina tampoc: `general-page-title-typography`
 * porta família, mida, interlínia i transformació, i prou. El mockup
 * estreny els titulars grans un -0.02em.
 */
.page-title .hgroup h1 {
  letter-spacing: -0.02em;
}

/* ═══════════════════ la subnav ARTgallery (Exposicions / Artistes / Obres) ══
 *
 * El marcatge el pinta `q15-subnav.php` per ganxo, entre la capçalera i el
 * `<div id="main">`, i és el mateix del mockup tret del contenidor, que és
 * el `.wf-wrap` de The7 en comptes del `.contenidor` del mockup (vegeu-hi el
 * comentari: alinear-la amb el lloc val més que clavar-hi 6px).
 *
 * Els valors NO són del full del mockup copiat a ull: són els COMPUTATS a
 * 1440px, que és el que es pot cotejar. El `clamp(17px, 1.9vw, 24px)` de
 * l'original es conserva tal qual perquè la barra s'estreny igual.
 *
 * ⚠ Especificitat. The7 escriu el color, la mida i la interlínia dels
 * enllaços des de Theme Options amb selectors que pesen més que una classe
 * sola; per això els selectors porten sempre `.subnav` al davant i on cal hi
 * ha `!important` a posta.
 */

.subnav {
  background: #FFFFFF;
  border-bottom: 1px solid #E6E6E3;
}

/*
 * ⚠ `.wf-wrap` només porta l'amplada sota `#main`, `.page-title`,
 * `.fancy-header` i `#footer` (`custom.css:872-875, 1278-1281`). Aquí és
 * germà de tots ells i es quedava a amplada lliure: la llista sortia a x=44
 * i el `<h1>` de la barra de títol, just a sota, a x=110.
 *
 * Els valors venen del `style=` que escriu `q15-subnav.php` amb
 * `general-content_width` i `general-page_content_margin` de Theme Options,
 * que és d'on The7 compila els seus. Els de reserva són els de sèrie del
 * tema, per si el full es carrega sense el ganxo.
 */
.subnav > .wf-wrap {
  width: var(--q15-subnav-amplada, 1320px);
  max-width: 100%;
  margin: 0 auto;
  padding-right: var(--q15-subnav-coixi-dreta, 50px);
  padding-left: var(--q15-subnav-coixi-esquerra, 50px);
  box-sizing: border-box;
}

.subnav .subnav__list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.subnav .subnav__list a,
.subnav .subnav__list .subnav__mort {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #565656;
  padding: 16px 18px;
  border: 0;
  text-decoration: none;
}

.subnav .subnav__list a:hover,
.subnav .subnav__list a:focus {
  color: #3A3A3A;
  text-decoration: none;
}

/* El filet d'accent de sota l'actiu: `inset` perquè creix cap a dins i no
 * desplaça res, que és com el fa el mockup. */
.subnav .subnav__list a.is-active {
  color: #141414;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #00A29C;
}

.subnav .subnav__sep {
  color: #E6E6E3;
  font-size: 22px;
  line-height: 1.6;
}

/* Un ítem sense destí es pinta com a text: ni el color de l'actiu ni el
 * cursor de l'enllaç. */
.subnav .subnav__list .subnav__mort {
  cursor: default;
}

/* El mockup, a 860px, la passa a scroll horitzontal perquè no es talli mai. */
@media (max-width: 860px) {
  .subnav .subnav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .subnav .subnav__list::-webkit-scrollbar { display: none; }
  .subnav .subnav__list a,
  .subnav .subnav__list .subnav__mort {
    font-size: 16px;
    padding: 12px 10px;
    white-space: nowrap;
  }
}

/* ═══════════════════ el blog: la barra lateral (08-2026) ═══════════════════
 *
 * Els widgets els sembra `vesteix-blog.php` (Cerca · Entrades recents amb
 * miniatura i data · Arxiu). El blog no és al mockup: l'estètica és la del
 * sistema v3 aplicada — titulars Space Grotesk amb el filet magenta
 * inclinat, botó negre ple, res d'arrodonit.
 *
 * ⚠ L'àmbit exclou la botiga a posta: la seva barra (`sidebar_3`, filtres)
 * té el seu vestit a botiga.css i comparteix el mateix `#sidebar`.
 */

:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar {
  --q15-blanc: #FFFFFF;
  --q15-negre: #141414;
  --q15-gris-text: #565656;
  --q15-gris-linia: #E6E6E3;
  --q15-gris-fons: #F6F6F4;
  --q15-gris-tint: #EFEFEC;
  --q15-accent: #00A29C;
  --q15-gir: -1.4deg;
  --q15-titols: 'Archivo', system-ui, sans-serif;
  --q15-cos: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .widget {
  margin-bottom: 44px;
}

/* — el titular de widget, com els caps de secció del mockup — */
:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-heading {
  font-family: var(--q15-titols);
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.15;
  color: var(--q15-negre);
  text-transform: none;
  letter-spacing: -0.01em;
  position: relative;
  padding-top: 16px;
  margin: 0 0 18px;
}

/* V2: el mateix filet que creix dels caps de secció. */
:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--q15-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-heading.q15-vist::before {
  transform: scaleX(1);
}

/* — la cerca, a la barra de títol —
 *
 * Retorn de l'Albert (12-08): el botó de cerca en MAGENTA, a la mateixa
 * alçada que el títol «Actualitat» i alineat a la dreta. El formulari
 * l'afegeix q15-marc.php pel filtre `presscore_page_title`, o sigui que és
 * GERMÀ del .page-title-head dins del .wf-wrap: la fila es fa aquí amb
 * flex, només a la pàgina del blog. */
.blog .page-title .wf-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.q15-cerca-titol {
  display: flex;
  gap: 8px;
  margin: 0;
}

.q15-cerca-titol input[type="search"] {
  width: min(260px, 60vw);
  font-family: var(--q15-cos, 'Source Sans 3', sans-serif);
  font-size: 15.5px;
  color: #141414;
  background: #FFFFFF;
  border: 1px solid #E6E6E3;
  border-radius: 0;
  padding: 11px 13px;
}

.q15-cerca-titol input[type="search"]:focus {
  border-color: #141414;
  outline: none;
}

.q15-cerca-titol button {
  font-family: var(--q15-titols, 'Archivo', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #00A29C;
  border: 2px solid #00A29C;
  border-radius: 0;
  padding: 11px 20px;
  margin: 0;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.q15-cerca-titol button:hover {
  background: #007F7A;
  border-color: #007F7A;
}

/* — entrades recents: només els títols, sense filets, espai aprofitat —
 * (retorn de l'Albert, 12-08: la v1 amb miniatures i línies no convencia) */
:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-latest-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-latest-posts > li {
  padding: 5px 0;
  margin: 0;
}

:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-latest-posts__post-title {
  font-family: var(--q15-titols);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--q15-negre);
  text-decoration: none;
}

:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-latest-posts__post-title:hover {
  color: var(--q15-negre);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--q15-accent);
}

/* — la fitxa de la llista: només la data —
 *
 * ⚠ T-60: la pàgina d'entrades nativa (`is_home`) NO llegeix cap opció de
 * meta de The7: sense `post_id` cau a `populate_archive_vars()` i allà els
 * camps van clavats a `true` (`template-config.php:122-126`). Les metes
 * `_dt_blog_options_*` només valen per al template «Blog» del tema. Per a
 * l'entrada SOLA sí que manen les `general-blog_meta_*` (les posa
 * vesteix-blog.php); això d'aquí retalla la LLISTA, que no té cap clau. */
:is(.blog, .archive):not(.woocommerce-page) .entry-meta .category-link,
:is(.blog, .archive):not(.woocommerce-page) .entry-meta a.author,
:is(.blog, .archive):not(.woocommerce-page) .entry-meta .comment-link {
  display: none;
}

/* — l'arxiu desplegable — */
:is(.blog, .archive, .single-post):not(.woocommerce-page) #sidebar .wp-block-archives-dropdown select {
  width: 100%;
  font-family: var(--q15-cos);
  font-size: 15.5px;
  color: var(--q15-negre);
  background: var(--q15-blanc);
  border: 1px solid var(--q15-gris-linia);
  border-radius: 0;
  padding: 11px 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   RETORN DE LA SANDRA
   ═══════════════════════════════════════════════════════════════════ */

/* 1 · PROJECTES: la data i la imatge, la MEITAT de l'amplada.
   La composició reparteix 1/12 per a la data, 3/12 per a la imatge i
   8/12 per al text: data+imatge feien un terç escàs. Es reparteix
   6/12 i 6/12 sense tocar el contingut de cap fila. */
@media (min-width: 768px) {
  .vc_row.q15-fila > .vc_col-sm-1 { width: 13%; }
  .vc_row.q15-fila > .vc_col-sm-3 { width: 37%; }
  .vc_row.q15-fila > .vc_col-sm-8 { width: 50%; }
}

/* La foto, més gran i APAÏSADA (abans sortia vertical i petita). */
.q15-fila .fancy-media-wrap img,
.q15-fila .shortcode-single-image-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* 2 · EL BANNER, QUE RESPIRI.
   El títol, el text i el botó anaven encavalcats. */
.q15-exposar .exposar__titol {
  margin: 0 0 22px;
  line-height: 1.06;
}
.q15-exposar .exposar__text {
  margin: 0 0 12px;
  max-width: 46ch;
  line-height: 1.6;
}
.q15-exposar .wpb_text_column { margin-bottom: 0; }
.q15-exposar .dt-btn,
.q15-exposar .dt_default_button { margin-top: 14px; }

/* 3 · PORTADA · «Quei15 també és…»: els dos botons anaven enganxats
   al text de sobre. */
.q15-tambe .bloc__text { margin-bottom: 0; }
.q15-tambe .wpb_text_column { margin-bottom: 26px; }
.q15-tambe .dt-btn,
.q15-tambe .dt_default_button { margin-top: 10px; }

/* 1b · La foto no omplia la columna i li quedava una franja buida a sota.
   `dt_fancy_image` escriu width:300px a l'estil EN LÍNIA de
   .shortcode-single-image-wrap (mesurat: columna 463px, marc 300px, i el
   marc de mitjans 225px d'alt contra 188px d'imatge). Cal guanyar-li
   l'estil en línia i deixar que el marc s'ajusti a la imatge. */
.q15-fila .shortcode-single-image-wrap {
  width: 100% !important;
  max-width: 100% !important;
}
.q15-fila .fancy-media-wrap {
  width: 100%;
  height: auto;
  padding: 0;
}
.q15-fila .fancy-media-wrap > a,
.q15-fila .fancy-media-wrap > img { display: block; width: 100%; }

/* 1c · El marc conservava la proporció original (4:3, de 300x225 escalat)
   mentre la imatge ja anava a 16:10 → 54px de marc buit a sota.
   El marc pren la mateixa proporció que la foto. */
.q15-fila .fancy-media-wrap,
.q15-fila .shortcode-single-image-wrap {
  aspect-ratio: 16 / 10;
  height: auto !important;
  overflow: hidden;
  line-height: 0;
}
.q15-fila .fancy-media-wrap img { height: 100%; }

/* 1d · Segona passada de la Sandra: la foto, una mica més gran encara.
   La data s'estreny i la imatge s'eixampla; el text cedeix 4 punts.
   I la proporció passa a la de les miniatures recuperades de la web
   vella (~1166x393, gairebé 3:1), que és el format que el client ja
   feia servir. */
@media (min-width: 768px) {
  .vc_row.q15-fila > .vc_col-sm-1 { width: 11%; }
  .vc_row.q15-fila > .vc_col-sm-3 { width: 43%; }
  .vc_row.q15-fila > .vc_col-sm-8 { width: 46%; }
}
.q15-fila .fancy-media-wrap,
.q15-fila .shortcode-single-image-wrap { aspect-ratio: 3 / 1; }
.q15-fila .fancy-media-wrap img,
.q15-fila .shortcode-single-image-wrap img { aspect-ratio: 3 / 1; }

/* 1e · La Carrossa 2025 no té miniatura a la web vella (és posterior) i
   el seu cartell és vertical: dins d'un marc 3:1 quedava tallat pel mig.
   Se n'ensenya la part de dalt, que és on hi ha el títol. */
.q15-fila--destacada .fancy-media-wrap img,
.q15-fila--destacada .shortcode-single-image-wrap img { object-position: 50% 18%; }