/* ═══════════════════════════════════════════════════════════════════
   CIA. BOSC ESCÈNIC · El MARC: capçalera, peu i banda del Kit Digital
   ───────────────────────────────────────────────────────────────────
   Va a banda de p4.css a posta: p4.css és el SISTEMA VISUAL (el vestit de
   les seccions) i aquest full és la COSTURA amb el marcatge que genera
   The7. Es carrega després, o sigui que guanya la cascada sense
   «!important» gratuït.

   ⚠ Les classes del mockup (.topbar__…, .cap__…, .peu__…) NO existeixen
   a WordPress: allà la capçalera i el peu els pinta The7. El que hi ha
   aquí està escrit contra el SEU marcatge, no copiat del mockup. Les
   regles del mockup que sí que sobreviuen són les que vesteixen blocs
   NOSTRES dins d'un widget del peu.

   MARCATGE REAL (mesurat a la v2, mateix stack i mateixes opcions):

     footer#footer.footer.solid-bg.full-width
       > .wf-wrap > .wf-container-footer > .wf-container
         > section.widget.wf-cell.wf-1-1

   Amb «footer-layout = 1/1» cada widget és una fila sencera.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1 · La graella del peu, a una fila per widget ─── */
#footer .wf-container-footer .wf-container { display: block; margin: 0; }
#footer .wf-container-footer .wf-cell { width: 100%; float: none; padding: 0; margin: 0; }
#footer .wf-container-footer .widget { margin: 0; padding: 0; border: 0; }

/* El peu del mockup entra SENCER dins d'un sol widget, embolcallat amb
   <div class="peu">. Així les regles del mockup valen tal qual i no cal
   traduir cap selector: només s'ha de buidar el contenidor del The7.
   El preu és que el peu s'edita com un bloc de HTML i no widget a
   widget; a canvi, el que el client aprova és exactament el que es veu. */
#footer.footer { padding: 0; border-top: 0; background: transparent; }
#footer .wf-wrap { max-width: none; width: 100%; padding: 0; }
#footer .wf-container-footer { padding: 0; }
#footer .widget_block > div { margin: 0; }

/* ─── 2 · El peu del mockup (verbatim): el marcatge el fem nosaltres
   dins dels widgets, o sigui que aquestes classes SÍ que existeixen. ─── */
/* ── peu (patró Setdedisseny) + Kit Digital ─────────────────── */
.peu {
  position: relative; overflow: hidden;
  background: var(--bosc); color: var(--paper);
  padding: clamp(3.5rem, 6vw, 5.5rem) var(--vora) 2rem;
}
.peu__fulla { position: absolute; right: -6%; top: -14%; width: min(38vw, 460px); opacity: .12; pointer-events: none; }
.peu > *:not(.peu__fulla) { position: relative; }
.peu__marca { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.peu__segell { width: clamp(120px, 12vw, 168px); margin: 0 auto 1.4rem; }
.peu__nom { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 440; line-height: 1.1; }
.peu__claim { color: rgba(243,238,228,.88); margin-top: .5rem; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.peu__dades {
  max-width: var(--ample); margin: 0 auto 1.8rem;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center;
}
.peu__lloc { display: flex; align-items: center; gap: .8rem; }
.peu__lloc svg { width: 26px; height: 26px; flex: none; color: var(--paper); }
.peu__xarxes { display: flex; gap: 1.4rem; justify-content: center; }
.peu__xarxes a {
  display: grid; place-items: center; width: 48px; height: 48px; color: var(--paper);
  transition: color .25s, transform .25s;
}
.peu__xarxes a:hover { color: var(--focus); transform: translateY(-3px); }
.peu__xarxes svg { width: 30px; height: 30px; }
.peu__contacte { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
.peu__fila { display: flex; align-items: center; gap: 1rem; text-align: right; }
.peu__tels { display: flex; flex-direction: column; }
.peu__contacte a { text-decoration: none; padding: .2rem 0; }
.peu__contacte a:hover { color: var(--focus); }
.peu__ico { display: grid; place-items: center; width: 30px; flex: none; }
.peu__ico svg { width: 26px; height: 26px; }
.peu__desde {
  text-align: center; color: rgba(243,238,228,.72);
  font-size: .92rem; margin-bottom: 2.4rem;
}
.peu__separador { border: 0; border-top: 1px solid rgba(243,238,228,.22); max-width: var(--ample); margin: 0 auto 1.6rem; }
.peu__baix {
  max-width: var(--ample); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.peu__signatura { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: rgba(243,238,228,.75); flex-wrap: wrap; }
.peu__setde { height: 22px; width: auto; display: block; }
.peu__legals { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.peu__legals a, .peu__legals span { font-size: .88rem; padding: .5rem 0; }
.peu__legals a { color: rgba(243,238,228,.85); text-underline-offset: 4px; }
.peu__legals a:hover { color: var(--focus); }
.peu__legals span { color: rgba(243,238,228,.45); cursor: default; }
.kit {
  background: #fff; padding: 1.4rem var(--vora);
  display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 8vw, 8rem); flex-wrap: wrap;
}
.kit img { height: 46px; width: auto; }
.kit__nota { font-size: .78rem; color: rgba(22,32,29,.55); max-width: 220px; line-height: 1.35; }



/* ─── 3 · Objectius tàctils i contrast del marc (auditoria 25-08-2026) ─── */
.peu__contacte a { padding: .55rem 0; display: inline-block; }
.peu__legals a, .peu__legals span { padding: .7rem 0; display: inline-block; }
.peu__legals span { color: rgba(243,238,228,.75); }   /* era .45 → 3,02:1 */
.kit__nota { color: rgba(22,32,29,.78); }             /* era .55 → 3,79:1 */

/* ─── 4 · El marc a mòbil ─── */
@media (max-width: 820px) {

}

/* ═══════════════════════════════════════════════════════════════════
   5 · LA CAPÇALERA
   Escrit contra el marcatge REAL del The7, mesurat a la pàgina servida
   (no copiat del mockup, on la capçalera era nostra):

     .masthead.inline-header.right.full-width      ← absolute, z-index 500
       > .top-bar                                   ← a 0px fins que hi
       > header.header-bar                            hagi SE7 Translate
           > .branding > a.same-logo > img          ← 191×58 (fitxer 1x/2x)
           > ul#primary-menu.main-nav > li > a
               > .menu-item-text > .menu-text

   El que ja ho fan les Theme Options i AQUÍ NO ES TORNA A DIR:
   l'alçada (96px), el logo a l'esquerra i el menú a la dreta, el filet
   de sota, els colors del menú i LA CAPÇALERA ENGANXADA en fer scroll
   («floating navigation», que és el `position: sticky` del mockup fet
   amb una opció nativa).
   ═══════════════════════════════════════════════════════════════════ */

/* El menú, amb la canya que demanava el retorn de l'Albert: quatre
   entrades i prou, o sigui que es poden servir grosses. The7 el deixa a
   17px/400; el mockup el vol a 1.2rem/600. */
#primary-menu > li > a .menu-text,
#mobile-menu > li > a .menu-text {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .03em;
  /* The7 el serveix en versaletes; el mockup el vol en caixa baixa. */
  text-transform: none;
}

/* El subratllat gruixut del mockup. The7 posa la seva pròpia decoració
   a `.menu-item-text::before`: es desactiva i es fa amb una vora, que
   és el que es pot mesurar. */
/* Subratllat del menú */
#primary-menu > li > a .menu-item-text::before {
    content: none !important;
}

#primary-menu > li > a {
    position: relative;
    border-bottom: 0;
    transition: color .25s;
}

#primary-menu > li > a::after {
    content: "";
    position: absolute;

    width: 120px; /* ← LLARGADA DE LA RATLLA */
    height: 3px;

    left: 50%;
    bottom: 0;

    background: var(--focus);
    transform: translateX(-50%);

    opacity: 0;
    transition: opacity .25s;
}

#primary-menu > li:hover > a::after,
#primary-menu > li.current-menu-item > a::after,
#primary-menu > li.current_page_item > a::after {
    opacity: 1;
}

#primary-menu > li.current-menu-item > a .menu-text,
#primary-menu > li.current_page_item > a .menu-text {
    color: var(--focus);
}

/* El botó groc «pròxims bolos». És un ítem de menú amb la classe
   `menu-bolos` (Aparença → Menús), no un giny a part: així surt també
   al menú de mòbil i el client el pot moure o treure. */
#primary-menu > li.menu-bolos > a,
#mobile-menu > li.menu-bolos > a {
  background: var(--focus);
  color: var(--foscor);
  padding: .7rem 1.2rem;
  border-bottom: 0;
}
#primary-menu > li.menu-bolos > a .menu-text,
#mobile-menu > li.menu-bolos > a .menu-text {
  color: var(--foscor);
  letter-spacing: .05em;
}
#primary-menu > li.menu-bolos:hover > a { background: var(--paper); }
#primary-menu > li.menu-bolos > a::after { content: " ⟶"; }

/* El menú de mòbil del The7, vestit com el tauler a pantalla sencera
   del mockup. */
.dt-mobile-header { background: var(--negre); }
#mobile-menu > li > a { padding: 1rem var(--vora); }

/* La fulla, filigrana quieta de fons. Al mockup era un <img> injectat
   per mockup.js; aquí la posa el tema al `wp_body_open`. La regla que
   la col·loca és la del sistema (.fulla-fons, a p4.css). */

/* ═══ 6 · L'ENLLAÇ DE SALT ═══
   The7 ja en posa un (a.skip-link → #content). No n'hi posem un segon:
   dos enllaços de salt seguits són soroll per a qui navega amb teclat.
   El seu només necessitava vestit i idioma (l'idioma el posa un filtre
   al functions.php). */
.skip-link.screen-reader-text:focus {
  position: absolute; left: var(--vora); top: .5rem; z-index: 1000;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: var(--focus); color: var(--foscor);
  padding: .9rem 1.4rem; font-weight: 600; text-decoration: none;
}

/* ═══ 8 · OBJECTIUS TÀCTILS DEL QUE PINTA THE7 ═══
   Mesurat a 390px: la hamburguesa feia 42×36, el seu botó de tancar 30×30
   i l'enllaç de salt 47×30. Cap d'aquests és un incompliment —la WCAG 2.1
   AA no ho demana (el criteri de 44px és 2.5.5, AAA) i la 2.2 AA en demana
   24—, però el mockup els va fer de 44 i és el que el client ha aprovat.
   No es toca la mida del dibuix: només la zona que es pot prémer. */
.dt-mobile-menu-icon,
.dt-close-mobile-menu-icon {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.skip-link.screen-reader-text:focus { min-height: 44px; display: inline-flex; align-items: center; }
#footer .peu__baix a { min-height: 44px; display: inline-flex; align-items: center; }
/* Els tres del peu (telèfons i correu) queden a 40px amb el coixí del
   mockup perquè aquí la interlínia del tema és una mica més curta.
   I el «Go to Top» del The7, a 40×40 de sèrie. */
#footer .peu__contacte a { min-height: 44px; display: inline-flex; align-items: center; }
#footer .peu__tels { gap: 0; }
a.scroll-top { min-width: 44px; min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   7 · EL FORMULARI DE CONTACT FORM 7
   ───────────────────────────────────────────────────────────────────
   El mockup vestia «.formulari input»; CF7 pinta els seus camps amb
   classes pròpies i The7 els dona el seu estil clar (fons #FCFCFC i text
   gris #787D85). Mesurat amb axe: 2 falles de contrast.

   Es vesteixen els camps de CF7 amb les mateixes declaracions del
   mockup, amb un selector que hi arriba. NO es fa servir
   `dt_contact_form` del The7 (A-05): pinta divuit camps amb
   `placeholder` i cap <label>.
   ═══════════════════════════════════════════════════════════════════ */

.formulari .wpcf7-form p { margin: 0 0 1.4rem; display: flex; flex-direction: column; }
.formulari .wpcf7-form label {
  font-size: .8rem; letter-spacing: .26em; color: var(--salvia);
  margin-bottom: .4rem; text-transform: uppercase;
}
.formulari .wpcf7-form-control-wrap { display: block; }

.formulari input.wpcf7-form-control,
.formulari textarea.wpcf7-form-control {
  width: 100%;
  background: rgba(243, 238, 228, .06);
  border: 1px solid var(--filet);
  border-radius: 0;
  color: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  padding: .85rem 1rem;
  box-shadow: none;
}
.formulari input.wpcf7-form-control:focus,
.formulari textarea.wpcf7-form-control:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
  background: rgba(243, 238, 228, .09);
}
/* El text de suggeriment ha de complir contrast igual que el text: no és
   decoració, és la pista de què va al camp. */
.formulari input.wpcf7-form-control::placeholder,
.formulari textarea.wpcf7-form-control::placeholder { color: rgba(243, 238, 228, .62); }

.formulari input.wpcf7-submit {
  width: auto; align-self: flex-start;
  background: var(--focus); color: var(--foscor);
  border: 0; padding: .95rem 1.6rem;
  font-weight: 600; letter-spacing: .05em; cursor: pointer;
}
.formulari input.wpcf7-submit:hover { background: var(--paper); }

/* Els avisos de CF7 (camp obligatori, missatge enviat) sobre fons fosc. */
.formulari .wpcf7-not-valid-tip { color: var(--argila); font-size: .85rem; margin-top: .4rem; }
.formulari .wpcf7-response-output {
  border: 1px solid var(--filet); color: var(--paper);
  padding: .9rem 1rem; margin: 1rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   9 · LA FITXA D'UN ACTE (SE7 Events)
   ───────────────────────────────────────────────────────────────────
   És on aterra cada fila del full de sala. El plugin hi posa el quadre
   «Quan · On · Preu · Hi vols anar? · Apunta-t'ho» davant del text
   (SE7E_Single::add_dates) i el tema fill hi afegeix el cap (rètol, h1 i
   l'enllaç de tornada) des del functions.php. El plugin només porta
   estructura; aquí es vesteix amb el sistema de la proposta.

   MARCATGE REAL (mesurat a /events/sindria/):
     body.single-mec-events
       #main > .wf-wrap > .wf-container-main > … .entry-content
         > .acte__cap  (nostre, functions.php)
         > .mec-single-event.se7e.se7e-quan
             > .mec-single-event-date > h3.mec-single-title + p.se7e-quan__data
             > .mec-single-event-location > h3 + p > .mec-event-loc-place + .mec-event-address
             > .mec-single-event-cost > h3 + p.mec-event-cost
             > .mec-single-event-more-info > h3 + p > a.mec-more-info-button
             > .mec-single-event-calendar? > .se7e-apunta > a.se7e-apunta__boto …
         > p (el text de l'acte)
   ═══════════════════════════════════════════════════════════════════ */

/* El contenidor: la fitxa es llegeix com una pàgina de prosa. */
body.single-mec-events #main { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
body.single-mec-events .wf-container-main { max-width: 74ch; margin: 0 auto; }
body.single-mec-events .entry-content { text-align: left; }

/* El cap, nostre. */
.acte__cap { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.acte__cap .quadre__cue { text-align: left; margin-bottom: .8rem; }
.acte__titol {
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 410; line-height: 1.02; letter-spacing: -.01em;
  text-transform: none; color: var(--paper); margin: 0 0 1rem;
}
.acte__tornar { display: inline-block; color: var(--salvia); text-decoration: none; font-size: .95rem; letter-spacing: .06em; padding: .55rem 0; min-height: 44px; }
.acte__tornar:hover { color: var(--focus); }

/* El quadre del plugin: tres columnes damunt d'un filet. */
body.single-mec-events .se7e-quan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.8rem 2.4rem; margin: 0 0 2.4rem; padding: 1.8rem 0 2rem;
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
}
body.single-mec-events .se7e-quan .mec-single-event-more-info,
body.single-mec-events .se7e-quan .mec-single-event-calendar { grid-column: 1 / -1; }

/* Els rètols: The7 els pinta com a h3 grossos en versaletes negres; aquí són
   etiquetes, com els cues del sistema. */
body.single-mec-events .se7e-quan .mec-single-title {
  font-family: "DM Sans", system-ui, sans-serif; font-size: .78rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--salvia);
  margin: 0 0 .6rem; line-height: 1.3; opacity: 1;
}
body.single-mec-events .se7e-quan p { margin: 0; }
body.single-mec-events .se7e-quan__data strong {
  display: block; font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-size: 1.45rem; font-weight: 500; color: var(--paper); line-height: 1.2; text-transform: none;
}
body.single-mec-events .se7e-quan__data .mec-event-time { display: block; margin-top: .35rem; color: var(--salvia); letter-spacing: .06em; font-size: 1rem; opacity: 1; }
body.single-mec-events .se7e-quan .mec-event-loc-place { display: block; font-size: 1.15rem; font-weight: 600; color: var(--paper); }
body.single-mec-events .se7e-quan .mec-event-address { display: block; margin-top: .3rem; color: rgba(243,238,228,.7); font-size: .95rem; opacity: 1; }
body.single-mec-events .se7e-quan .mec-event-cost { font-size: 1.15rem; font-weight: 600; }

/* «Hi vols anar?»: el botó groc del sistema. */
body.single-mec-events .mec-more-info-button.se7e-apunta__boto {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--focus); color: var(--foscor); border: 0; border-radius: 0;
  padding: .95rem 1.6rem; font-size: 1rem; font-weight: 600; letter-spacing: .05em;
  text-decoration: none; min-height: 44px;
}
body.single-mec-events .mec-more-info-button.se7e-apunta__boto:hover,
body.single-mec-events .mec-more-info-button.se7e-apunta__boto:focus-visible { background: var(--paper); text-decoration: none; }
body.single-mec-events .mec-more-info-button.se7e-apunta__boto::after { content: "⟶"; }

/* «Apunta-t'ho»: els botons de vora del sistema. */
body.single-mec-events .se7e-apunta { gap: .6rem; }
body.single-mec-events .se7e-apunta .se7e-apunta__boto {
  border: 1px solid var(--filet); border-radius: 0; color: var(--paper);
  padding: .7rem 1.1rem; font-size: .92rem; letter-spacing: .04em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
body.single-mec-events .se7e-apunta .se7e-apunta__boto:hover { border-color: var(--focus); color: var(--focus); text-decoration: none; }
body.single-mec-events .se7e-apunta__nota { color: rgba(243,238,228,.7); font-size: .9rem; opacity: 1; }
body.single-mec-events .se7e-apunta__nota a { color: var(--focus); }

/* L'anul·lació, en argila i sense pastilla rosa. */
body.single-mec-events .se7e-anullat { background: none; border: 1px solid var(--argila); border-radius: 0; color: var(--argila); }
body.single-mec-events .se7e-anullat-avis { background: rgba(213,107,77,.1); border-left-color: var(--argila); color: var(--paper); }

/* El text de l'acte. */
body.single-mec-events .entry-content > p { color: rgba(243,238,228,.85); max-width: 62ch; margin-bottom: 1.2rem; }

/* ═══════════════════════════════════════════════════════════════════
   10 · ELS FONS VAN A LA FILA, I EL VEL AL TEMA
   ───────────────────────────────────────────────────────────────────
   Les portades i les bandes ja no porten un <img> dins d'un bloc de codi:
   la fotografia és el FONS de la fila (Design Options de WPBakery), o
   sigui que el client la pot canviar des de l'editor sense tocar res.

   ⚠ EL VEL NO ÉS EDITABLE, I ÉS A POSTA. És accessibilitat mesurada
   —sense ell el títol d'una portada es queda per sota del 3:1 sobre la
   foto— i no ha de dependre que ningú l'esborri des de l'editor sense
   saber què fa. Per això viu aquí i no a la fila.

   ⚠ I NO ÉS EL MATEIX VEL QUE AL MOCKUP. Allà la foto anava dins d'un
   <img> amb `filter: brightness(.42)` i el vel a sobre; una imatge de
   fons CSS no es pot filtrar. La foscor que hi posava el filtre l'ha de
   posar el vel, i per això els gradients d'aquí són més tancats que els
   del mockup. Els valors surten de mesurar el contrast sobre els píxels
   pintats, no de calcular-los: qui els toqui, que torni a mesurar.
   ═══════════════════════════════════════════════════════════════════ */

.portada-pagina, .portada-obra, .banda { position: relative; }

.portada-pagina::after,
.portada-obra::after,
.banda::after {
  content: ""; display: block; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* Portada de pàgina: el títol seu a baix, o sigui que la foscor s'acumula
   a baix i la foto respira a dalt. (mockup: brightness .42 + gradient) */
.portada-pagina::after {
  background:
    linear-gradient(to top, rgba(13,20,18,.97) 5%, rgba(13,20,18,.62) 60%, rgba(13,20,18,.5) 100%);
}

/* Portada d'obra: el títol al mig, o sigui vinyeta.
   (mockup: brightness .5 + radial) */
.portada-obra::after {
  background:
    radial-gradient(ellipse 80% 65% at 50% 50%, rgba(13,20,18,.55) 25%, rgba(13,20,18,.94) 100%);
}

/* Banda: la frase al mig. (mockup: brightness .8 + radial) */
.banda::after {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(13,20,18,.6) 20%, rgba(13,20,18,.88) 100%);
}

/* El contingut, per damunt del vel. */
.portada-pagina > .wpb_column,
.portada-obra > .wpb_column,
.banda > .wpb_column { position: relative; z-index: 1; }

/* La imatge fixa: al mockup era un <img> amb position:fixed; a la fila és
   `background-attachment: fixed`, que és el mateix gest i el que WPBakery
   sap fer. Amb moviment reduït es queda quieta amb la fila. */
@media (prefers-reduced-motion: reduce) {
  .banda { background-attachment: scroll !important; }
}

/* Les portades i les bandes són caixes altes: l'alçada la posa el sistema
   (p4.css) i aquí només cal que el contingut s'hi col·loqui, perquè ara
   els fills són columnes de WPBakery i no els <div> del mockup. */
.portada-pagina > .wpb_column > .vc_column-inner,
.portada-obra > .wpb_column > .vc_column-inner,
.banda > .wpb_column > .vc_column-inner { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   11 · LES PECES QUE ARA SÓN ELEMENTS DEL MAQUETADOR
   ───────────────────────────────────────────────────────────────────
   Les graelles que al mockup eren un `display: grid` amb `<figure>` a
   dins ara són COLUMNES de WPBakery, i les fotografies són
   `vc_single_image`. És el que fa que el client les pugui reordenar,
   canviar i ampliar sense tocar codi — la premissa d'aquesta passada.

   El preu és que el marcatge ja no és el del mockup, i les regles del
   sistema que apuntaven a aquell marcatge s'han de tornar a apuntar.
   Aquí hi ha NOMÉS això: cap decisió visual nova. Els valors (les
   proporcions, els filtres, els colors) surten tal qual de p4.css.

   MARCATGE REAL d'una imatge del maquetador:
     .wpb_single_image.<el_class> > figure.wpb_wrapper
       > .vc_single_image-wrapper > img
   i d'un text:
     .wpb_text_column.<el_class> > .wpb_wrapper > <el que hem escrit>
   ═══════════════════════════════════════════════════════════════════ */

/* Tot el que és una imatge del maquetador dins del contingut: sense
   marges propis, que el ritme el posa la fila. */
#content .wpb_single_image figure,
#content .wpb_single_image .vc_single_image-wrapper { margin: 0; display: block; }
#content .wpb_single_image img { width: 100%; height: auto; display: block; }

/* Els enllaços del sistema no van subratllats: el que els marca és el
   color i el gest, com al mockup. */
.portada-obra__titol a, .portada-obra__meta a, .video-fitxa__titol a,
.insta__compte, .companyia__nom a { text-decoration: none; color: inherit; }
.portada-obra__titol a:hover, .video-fitxa__titol a:hover { color: var(--focus); }
.portada-obra__meta a.portada-obra__resalt { color: var(--focus); }

/* ─── Els dos retrats de la home ─── */
.companyia__retrat .wpb_single_image img {
  aspect-ratio: 4 / 5; object-fit: cover;
  filter: brightness(.85); transition: filter .35s;
}
.companyia__retrat:hover .wpb_single_image img { filter: brightness(1.05); }
.companyia__nom {
  font-size: .8rem; letter-spacing: .18em; color: var(--salvia);
  padding-top: .8rem; text-align: center;
}
.quadre__accio { margin-top: 2.4rem; }

/* ─── Les tres targetes de vídeo ─── */
.video-fitxa { text-align: left; }
.video-fitxa .wpb_single_image { position: relative; overflow: hidden; margin-bottom: 1rem; }
.video-fitxa .wpb_single_image img {
  aspect-ratio: 16 / 10; object-fit: cover;
  filter: brightness(.6); transition: filter .35s, transform .5s;
}
.video-fitxa:hover .wpb_single_image img { filter: brightness(.95); transform: scale(1.03); }
/* El triangle de «play»: al mockup penjava del <figure>; aquí, de
   l'embolcall de la imatge, que és l'element que hi ha. */
.video-fitxa .wpb_single_image .vc_single_image-wrapper::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; pointer-events: none;
}
.video-fitxa:hover .wpb_single_image .vc_single_image-wrapper::after { border-left-color: var(--focus); }
.video-fitxa .wpb_single_image .vc_single_image-wrapper { position: relative; display: block; }
.video-fitxa__titol { font-size: 1.35rem; font-weight: 440; margin-bottom: .2rem; }
.video-fitxa__peu { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--salvia); }

/* ─── Els tallers de la home ─── */
.tallers-home__text { text-align: left; }
.tallers-home__gran .wpb_single_image img { aspect-ratio: 16 / 9; object-fit: cover; }
.tallers-home__petita .wpb_single_image img { aspect-ratio: 4 / 3; object-fit: cover; }
.tallers-home .wpb_single_image img { filter: brightness(0.72); transition: filter .35s; }
.tallers-home .wpb_single_image img:hover { filter: brightness(1); }
.tallers-home .vc_row-inner { margin-top: 8px; }
.tallers-home__petita .vc_column-inner { padding: 0 4px; }

/* ⚠ QUAN LA GRAELLA DEL MOCKUP I LES COLUMNES DEL MAQUETADOR ES XOQUEN.
   Mesurat: la tira d Instagram sortia amb imatges de 31px. Al mockup
   «.insta__tira» era un `display: grid` de sis columnes; ara aquella
   classe viu a la FILA i els seus fills son columnes de WPBakery amb
   `width: 16.66%` de Bootstrap. Una amplada del 16,66% DINS d una pista
   de graella de 1fr son 35px: 213 × 0,1666. Cap error, nomes miniatures.
   La regla es simple: si les columnes les fa el maquetador, la graella
   del mockup ha de marxar. */
.insta__tira { display: block; }

/* ─── La tira d'Instagram ─── */
/* Sis columnes del maquetador: el que aquí cal és treure'ls els coixins,
   que la tira va a sang i enganxada. Quan hi hagi Smash Balloon, aquesta
   fila la substitueix el seu bloc i aquestes regles cauen soles. */
.insta__tira > .wpb_column > .vc_column-inner { padding: 0 2px; }
.insta__tira .wpb_single_image img {
  aspect-ratio: 1; object-fit: cover;
  filter: brightness(.55); transition: filter .35s;
}
.insta__tira .wpb_single_image img:hover { filter: brightness(1.05); }
.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;
  transition: border-color .25s, color .25s;
}
.insta__compte:hover { border-color: var(--focus); color: var(--focus); }
.quadre--curt { padding-top: 0; }

/* ─── El hero, ara que la frase va en un bloc de text ─── */
.hero__video {
    filter: brightness(.9) !important;
}
.hero__text { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.hero__text .wpb_wrapper { display: contents; }
.hero__avall-cos { margin-top: 2.6rem; }

/* ─── El full de sala dins del seu bloc de text ─── */
.esd .wpb_wrapper { display: block; }

/* ─── El patró general: `display: contents` a l'embolcall del text ───
   Quan una classe del mockup que és una graella o un flex (.fita, .pilars
   article, .espectacle__accions, .fitxa-tecnica, .llista-dades…) aterra a
   un `vc_column_text`, entre la classe i els seus fills hi queda
   `.wpb_wrapper`: la graella passa a tenir UN sol fill i el disseny cau.
   Amb `display: contents` l'embolcall desapareix de la caixa i les regles
   del mockup valen tal qual — que és el que volem: una peça editable per
   bloc SENSE reescriure el sistema visual. */
.fita > .wpb_wrapper,
.pilars > .wpb_wrapper,
.espectacle__accions > .wpb_wrapper,
.fitxa-tecnica > .wpb_wrapper,
.llista-dades > .wpb_wrapper,
.crida__llum > .wpb_wrapper,
.portada-pagina__cos > .wpb_wrapper,
.portada-obra__cos > .wpb_wrapper,
.tallers-home__text > .wpb_wrapper { display: contents; }

/* Els retrats del díptic de «qui som», ara com a columnes del maquetador. */
.duo-banda__foto .wpb_single_image img { aspect-ratio: 8 / 9; object-fit: cover; width: 100%; }
.duo-banda__foto .wpb_single_image, .duo-banda__foto .vc_column-inner { height: 100%; }

/* Els tretze logotips: imatges de la biblioteca en files centrades.
   ⚠ El CSS només els dona AMPLADA i mai alçada: l'equilibri òptic va cuit
   al fitxer (mitjana geomètrica, llenç 660×260 igual per a tots). */
.entitats-fila > .wpb_column > .vc_column-inner { padding: 0 12px; }
.entitats-fila .wpb_single_image img { width: 100%; max-width: 200px; height: auto; margin: 0 auto; opacity: .85; transition: opacity .3s, transform .3s; }
.entitats-fila .wpb_single_image img:hover { opacity: 1; transform: translateY(-3px); }
.entitats-fila .wpb_single_image { display: flex; align-items: center; justify-content: center; min-height: 96px; }

/* Les tires de fotos a sang (galeries d'obra i de tallers). */
.tira > .wpb_column > .vc_column-inner { padding: 0 2px; }
.tira .wpb_single_image img { aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(.75); transition: filter .4s; }
.tira .wpb_single_image img:hover { filter: brightness(1); }

/* ─── EL MIG DEL DÍPTIC ───
   Al mockup «.duo-banda__mig» era un <div> amb la citació i el segell a
   dins. Aquí és una COLUMNA del maquetador (perquè el segell hi pugui
   viure i el client el pugui canviar), o sigui que el vestit va a
   l'embolcall de la columna i no a la classe. */
.duo-banda__mig > .vc_column-inner { height: 100%; padding: 0; }
.duo-banda__mig > .vc_column-inner > .wpb_wrapper {
  position: relative; overflow: hidden; height: 100%;
  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__mig .wpb_text_column { margin: 0; }
.duo-banda__segell .wpb_single_image img { width: clamp(110px, 12vw, 176px); margin: 0 auto; }
.duo-banda__foto > .vc_column-inner { height: 100%; padding: 0; }
.duo-banda__foto > .vc_column-inner > .wpb_wrapper,
.duo-banda__foto .wpb_single_image { height: 100%; }
.duo-banda__foto .wpb_single_image img { height: 100%; object-fit: cover; aspect-ratio: auto; }
/* El de l'esquerra va GIRAT: el tall queda al marge i tots dos miren cap
   al mig. És una decisió, no un oblit. */
.duo-banda > .wpb_column:first-child .wpb_single_image img { transform: scaleX(-1); }

/* La xifra dels tallers: el sàlvia al 80% sobre el verd queda per sota
   del 4,5:1 (mesurat amb axe). Sàlvia sencer. */
.tallers-home__xifra span { color: var(--salvia); }

/* ─── ELS TRES PILARS, ara com a columnes ───
   Al mockup el titular de cada pilar era un `.pilars h2`; aquí cada pilar
   és la seva columna i el titular un <h3> dins del seu bloc de text, o
   sigui que la regla del sistema no hi arriba i mana la del tema: The7
   els pintava en Fraunces de 36px, versaletes i pes 900. */
.pilar > .vc_column-inner { border-top: 1px solid var(--filet); padding-top: 1.2rem; }
.pilar .wpb_text_column { text-align: left; }
.pilar h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.4rem; font-weight: 500; line-height: 1.25;
  letter-spacing: 0; text-transform: none;
  color: var(--salvia); margin: 0 0 .8rem;
}
.pilar p { color: rgba(243, 238, 228, .8); }

/* ─── LES DUES FITXES DE «QUI SOM», ara com a columnes ───
   El bloc de la dreta va justificat a la dreta: visualment les dues
   columnes es tanquen cap al centre (retorn de l'Albert). */
.duo-fitxes-fila .wpb_text_column { text-align: left; }
.duo-fitxes-fila .persona--dre .wpb_wrapper,
.duo-fitxes-fila .wpb_text_column.persona--dre { text-align: right; }
.duo-fitxes-fila .persona--dre p:last-child { margin-left: auto; }

/* Objectius tàctils dels enllaços que ara viuen dins d'un bloc de text.
   A la home, el «descobreix-lo ⟶» de cada portada d'obra i els enllaços
   del peu de la tira feien 17-27px d'alt a 390px. */
.portada-obra__meta a, .insta__peu a, .companyia__nom a, .video-fitxa__titol a {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ═══ FIDELITAT · el que la comparació amb la maqueta va trobar ═══
   (mesurat amb motor/4-verifica/bosc4-coteja.mjs, 08-09-2026) */

/* 1 · LA INTERLÍNIA. The7 escriu «line-height» en PÍXELS (26,35px) als
   paràgrafs, i el mockup la té com a RAÓ (1,65) heretada del cos. Cada
   text que no en declarava una de pròpia sortia amb la del tema: l'antetítol
   del hero a 26,35 en comptes de 21,6, les entradetes a 26,35 en comptes de
   30,4. És la desviació que es notava a totes les pàgines alhora, perquè
   afecta tot el que és text corregut. Es torna a dir com a raó. */
/* ⚠ Va amb :where() a posta. Escrita com «#content .wpb_text_column p» té
   especificitat (1,1,1) i AIXAFAVA les interlínies que el mockup SÍ que
   declara: la frase d una banda passava de 73,6px a 105,6 i el peu del
   díptic de 25,6 a 21,1. Amb :where() la regla val (0,0,1) —només
   substitueix la del tema— i qualsevol classe del sistema hi mana. */
:where(#content .wpb_text_column),
:where(#content .wpb_text_column) :where(p, li, dd, dt) { line-height: 1.65; }

/* 2 · L'AMPLADA DEL CONTENIDOR. El mockup té «.quadre { max-width: 1160px }»
   i el contenidor del The7 en fa 1200: els titulars sortien 30px més
   estrets del compte perquè el coixí es descompta d'una amplada més gran.
   Es torna a posar l'amplada del sistema a les nostres files. */
.quadre > .wpb_column > .vc_column-inner,
.tallers-home > .wpb_column > .vc_column-inner,
.prosa-llarga > .wpb_column > .vc_column-inner { padding-left: 0; padding-right: 0; }

/* 3 · LA CRONOLOGIA. Al mockup les fites van dins d'un «.fites» de 760px
   centrat; aquí cada fita és el seu bloc i no hi ha embolcall, o sigui que
   la columna del text sortia de 845px en comptes de 550. */
.quadre--fites .fita { max-width: 760px; margin-left: auto; margin-right: auto; }

/* 4 · ELS TITULARS DE LA PROSA LLARGA. The7 pinta els h3 en versaletes i
   amb la seva interlínia; la pàgina d'accessibilitat els vol en caixa
   baixa i amb la del sistema. La regla de caixa baixa del full apuntava a
   «.prosa h3» i la classe és «.prosa-llarga». */
.prosa-llarga h2, .prosa-llarga h3 { text-transform: none; }
/* La interlínia dels h3 de la prosa és la del sistema (1,65 heretat), no
   una de pròpia: posar-hi 1,3 els deixava a 35px en comptes de 44,9. */
.prosa-llarga h3 { line-height: inherit; }

/* 5 · EL BOTÓ D'ENVIAR DEL FORMULARI. És un <input> i The7 el pinta com
   els seus botons: pes 900 i versaletes. El sistema el vol de 600 i en
   caixa baixa, com tots els «boto-groc». */
/* Amb «.formulari input.wpcf7-submit» (0,2,1) no n hi havia prou: The7
   vesteix els botons amb un selector d ID i els selectors d ID guanyen a
   qualsevol nombre de classes. */
#content .formulari input.wpcf7-submit {
  font-weight: 600; text-transform: none; line-height: normal;
  font-family: "DM Sans", system-ui, sans-serif; letter-spacing: .08em;
}

/* 6 · ELS BLOCS QUE A LA MAQUETA ENCONGEIXEN.
   A la maqueta «.banda» i «.duo-banda__mig» són contenidors flex i els seus
   fills són ÍTEMS: encongeixen fins al contingut i el «max-width» només hi
   posa el sostre. Aquí, entremig, hi ha el bloc de text del maquetador i el
   fill torna a ser un bloc que omple l'amplada: la frase d'una banda es
   partia a 949px en comptes de 653 i sortia amb menys línies de les que el
   client ha aprovat. Es torna a fer que encongeixi. */
.banda .wpb_text_column,
.duo-banda__mig .wpb_text_column { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
/* La mateixa família: a la maqueta «.portada-pagina» i «.crida» són flex i
   el seu cos encongeix. Aquí els blocs de text omplien la columna sencera.
   El text hi va alineat igual, o sigui que no es notava gairebé — però el
   dia que un títol de portada sigui llarg, es partiria en un lloc diferent
   del que el client ha aprovat. */
.portada-pagina__cos { width: fit-content; max-width: 100%; }
.crida__llum { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

/* 7 · LA CRONOLOGIA, ALINEADA A L'ESQUERRA.
   «.quadre» va centrat i al mockup el reset el feia l'embolcall «.fites»
   («text-align: left»). Aquí no hi ha embolcall i les fites sortien
   centrades: el text de cada any es llegia des del mig i no des del filet. */
.quadre--fites .fita { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════
   6 · ELS DOS FLOTANTS DE LA CANTONADA
   ═══════════════════════════════════════════════════════════════════

   La maqueta té UN element flotant a baix a la dreta del hero: el botó de
   pausa del vídeo (WCAG 2.2.2). El WordPress n'hi té DOS, perquè el botó de
   WhatsApp del SE7 WhatsApp hi va al mateix racó — i el plugin no existeix a
   la maqueta, o sigui que això no és cap infidelitat sinó costura.

   MESURAT a 1440×900 abans d'aquesta regla: la pausa acabava a 822 px i el
   WhatsApp començava a 824. DOS píxels de separació, i els eixos verticals
   desalineats (vores dretes a 1385 i 1405). No se solapaven, però es veien
   com un accident i qualsevol dit gros hi encertava el que no volia.

   Es mou la PAUSA i no el botó de WhatsApp: la posició del botó és un ajust
   que el client té a la seva pantalla i pot canviar, i la pausa és nostra i
   només existeix a la portada.

   ⚠ ELS DOS NO VIUEN AL MATEIX SISTEMA DE COORDENADES, i això mana com s'ha
   escrit la regla. El botó de WhatsApp és `position: fixed` (mesura contra
   la finestra); la pausa és `absolute` DINS DEL HERO, i el hero acaba per
   sobre del final de la finestra. O sigui que d'aquestes dues xifres només
   una és exacta:

     · right  — SÍ que és aritmètica, i alinea els dos centres exactament:
                20 (marge del plugin) + (56 − 44) / 2 = 26px.
                Mesurat: centres a 1377 i 1377 a l'escriptori, 327 i 327 al
                mòbil. Els números surten de se7-whatsapp.css:14-18, i van
                escrits i no heretats perquè les variables del plugin viuen
                dins de `.se7wa` i des d'aquí no s'hi arriba.

     · bottom — NO pot garantir cap separació fixa, perquè el que hi ha
                entre el final del hero i el final de la finestra depèn de
                l'alçada de la finestra. 88px és l'alçada que ocupa el botó
                de WhatsApp amb el seu marge (20 + 56 + 12 de separació del
                grup): la pausa el deixa enrere sempre, i el que sobra és
                aire. Mesurat: 66px de separació a 1440×900 i 174px a
                375×812. Fer-ho quadrar just no es pot i tampoc no cal.

   En avall no hi ha perill: en fer scroll la pausa se'n va amunt amb el
   hero i el botó es queda, o sigui que s'allunyen, no s'acosten.
   ─────────────────────────────────────────────────────────────── */

.hero__pausa { bottom: 88px; right: 26px; }

/* ── El tauler dels dos contactes ────────────────────────────────────────
   El plugin el pinta amb `background: #fff; color: #111` escrits al full
   (se7-whatsapp.css:92-99): una fitxa blanca sobre la sala a les fosques,
   que és exactament la cara de plugin que no volem. Les variables que
   exposa (`--se7wa-color`, `--se7wa-icona`) només governen el botó i la
   franja del títol, o sigui que el cos del tauler s'ha de dir aquí.

   ⚠ La marca de WhatsApp de cada línia hereta `--se7wa-color`, que en
   aquesta web és Bosc #044B43: sobre Foscor no es veuria. Va en Sàlvia.

   Contrast MESURAT al navegador amb el tauler obert (no calculat):
     · nom, Paper #F3EEE4 sobre Foscor .................... 14,43:1
     · títol, Paper sobre la franja Bosc #044B43 ........... 8,68:1
     · càrrec, Paper amb l'opacitat .7 del plugin, 12px .... 7,67:1
   L'axe no ho veu: el tauler neix amb display:none i les eines
   d'accessibilitat salten el que és amagat. Per això va mesurat a mà.
   ──────────────────────────────────────────────────────────────────── */

.se7wa-tauler {
	background: #16201D;
	color: #F3EEE4;
	border-color: rgba(243, 238, 228, .18);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}

.se7wa-contacte + .se7wa-contacte { border-top-color: rgba(243, 238, 228, .14); }

.se7wa-contacte__marca { color: #B9C9A8; }

@media (hover: hover) {
	.se7wa-contacte__enllac:hover { background: rgba(243, 238, 228, .08); }
}

/* ═══════════════════════════════════════════════════════════════════
   7 · EL COMMUTADOR D'IDIOMES (SE7 Translate), al costat del menú
   ═══════════════════════════════════════════════════════════════════
   Afegit el 01-10-2026 per al Kit Digital (la web en castellà). Mesurat
   abans: el contrast ja passava (CA 16,1:1, ES 9,3:1), però els enllaços
   feien 24×26 i 19×26 px. Aquí només s'eixampla la zona clicable fins als
   44 px de la casa; el que es veu —«CA · ES»— queda igual.
   ─────────────────────────────────────────────────────────────── */
.mini-se7t-lang .se7t-switcher__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
.mini-se7t-lang .se7t-switcher__sep { margin: 0 -10px; }

/* ═══════════════════════════════════════════════════════════════════
   8 · EL LEMA DEL HERO, LLEGIBLE SOBRE QUALSEVOL FOTOGRAMA DEL VÍDEO
   ═══════════════════════════════════════════════════════════════════
   01-10-2026, per al Kit Digital (WCAG 2.1 AA, criteri 1.4.3). Mesurat
   sobre els píxels pintats amb motor/4-verifica/contrast-hero.mjs (8
   fotogrames): amb el vel actual —més clar al centre, que és on hi ha el
   text— el lema «comèdia per obrir melons…» (16,8 px, color a .78) baixava
   a 1,68:1 quan una llum del vídeo li quedava al darrere (a 2,3 s). El
   mínim és 4,5:1.

   NO es toca el vel (és una decisió de disseny de la Núria). S'hi posa un
   halo fosc cenyit a la lletra: la nota de comprensió de la WCAG 1.4.3
   l'admet, i llavors el contrast es compta entre el text i el halo
   (#0D1412 a .95 tocant el traç): uns 12:1. Sobre el fons fosc habitual
   del vídeo, el halo gairebé no es veu.
   ─────────────────────────────────────────────────────────────── */
.hero__sub, .hero__ante {
  text-shadow: 0 0 2px rgba(13,20,18,.95), 0 0 8px rgba(13,20,18,.9), 0 0 18px rgba(13,20,18,.75);
}

/* ═══════════════════════════════════════════════════════════════════
   9 · EL TEXT DEL HERO, PER SOBRE DEL VÍDEO (error nostre del 08-09)
   ═══════════════════════════════════════════════════════════════════
   Trobat el 01-10-2026: a la web en viu NO ES VEIA el text del hero
   («un teatre compromès» i el lema). El contenidor porta dues classes,
   «wpb_content_element hero__text», i la regla de p4.css per al vídeo
   —«.hero .wpb_content_element { position: static }», (0,2,0)— guanya a
   «.hero__text { position: absolute }», (0,1,0). Estàtic, el text queda
   per sota del vídeo i del vel, que sí que són absoluts. Era tapat des de
   la migració de la proposta 4: el mesurador de fidelitat compara caixes
   i axe no mira què hi ha a sobre, i per això no ho va veure ningú.
   Aquí la mateixa especificitat, carregada després, i per sobre del vel.
   ─────────────────────────────────────────────────────────────── */
.hero .hero__text { position: absolute; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   10 · LA CAPÇALERA EN UNA LÍNIA DE 1025 A 1300 px (01-10-2026)
   ═══════════════════════════════════════════════════════════════════
   Mesurat: a 1200 px hi havia 1.144 px de capçalera (logo 184 + menú 587
   amb 30 px de farciment per banda + botó i idiomes 373) en 1.120 de lloc.
   Ja es partia de 1025 a 1138 px ABANS d'avui, i amb el commutador CA · ES
   (secció 7) també de 1160 a 1240. Ho van ensenyar les captures del Kit.
   Per sobre de 1300 px no canvia res: és la capçalera tal com està.
   Comprovat a 1440, 1366, 1300, 1280, 1240, 1200, 1160, 1138, 1100, 1060,
   1040 i 1025: una sola línia a totes. Per sota de 1160 els codis CA i ES
   fan 36×44 (per sobre del mínim de 24 px de la WCAG 2.2).
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1300px) {
  .masthead #primary-menu > li > a { padding-left: 16px !important; padding-right: 16px !important; }
  .masthead .mini-widgets { padding-left: 16px !important; }
}
@media (min-width: 1025px) and (max-width: 1160px) {
  .masthead #primary-menu > li > a { padding-left: 10px !important; padding-right: 10px !important; }
  .masthead .mini-se7t-lang { margin-left: 4px !important; }
  .mini-se7t-lang .se7t-switcher__item { min-width: 36px; }
}
@media (min-width: 1025px) and (max-width: 1059px) {
  .masthead #primary-menu > li > a { padding-left: 7px !important; padding-right: 7px !important; }
  .masthead .mini-widgets { padding-left: 8px !important; padding-right: 20px !important; }
}