/*!
 * [IRTHEME — 2026-09-14] main.css — tokens + system + cms-ui + clases legacy.
 *
 * Generado UNA VEZ desde src/*.scss (sass, sin comprimir) y congelado como
 * CSS plano. Bootstrap ya NO se compila aquí — vive vendorizado directamente en
 * themes/irtheme/css/bootstrap.min.css (tema único, sin symlink a otro tema).
 * Ver themes/irtheme/remove_compiler.md para el proceso completo y el análisis
 * de riesgos.
 *
 * Si necesitas cambiar algo de aquí: edita a mano este fichero directamente
 * (ya no hay src/sass/build que regenerar) — o, si el cambio es grande,
 * reinstala node_modules temporalmente con el package.json del historial git
 * y usa sass sobre las fuentes .scss del mismo commit.
 *
 * Se sirve vía files_css_tema (idTema=5, irtheme — tema único del site),
 * igual que el resto de CSS del tema; no va hardcodeado en principal.html.
 */

/* ============================================================================
 * Overrides de defaults de Bootstrap — antes vivían en tokens/_brand.scss
 * como variables Sass inyectadas ANTES de compilar Bootstrap. Ahora que
 * Bootstrap es vendorizado (stock, sin compilar), eso ya no es posible: las
 * 2 diferencias con impacto real confirmado (ver remove_compiler.md §3.1 y
 * §3.2) se reimplementan aquí como reglas CSS explícitas.
 * ============================================================================ */

/* §3.2 — .container en xl/xxl: 1200px/1400px (vs 1140px/1320px de stock).
   Bootstrap 5.0.2 no expone esto como variable CSS, así que va literal. */
@media (min-width: 1200px) {
  .container, .container-xl, .container-lg, .container-md, .container-sm {
    max-width: var(--container-max-width, 1200px);
  }
}
@media (min-width: 1400px) {
  .container, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    max-width: var(--container-max-width, 1400px);
  }
}

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

img, picture, svg, video {
  max-width: 100%;
  height: auto;
}

section > h1:first-child,
section > h2:first-child,
section > h3:first-child {
  margin-top: 0;
}

:focus-visible {
  /* [MODULS-B · S3 2026-09-28] S-14: era `var(--bs-primary, …)` directe (dos colors d'anell
     possibles a la mateixa pàgina si Estils ponteja `--ia-color-focus-ring` diferent de
     `--bs-primary`). Ara passa pel token únic `--ial-c-focus` (= `var(--bs-primary)` per
     defecte, pontejable des d'Estils). */
  outline: 2px solid var(--ial-c-focus, #4f46e5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--ial-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

body {
  color: var(--ial-c-text-1);
  background-color: var(--ial-c-surface);
}

.lead {
  font-size: 1.125rem;
  color: var(--ial-c-text-2);
}

/* [2026-09-18] :where() = especificitat (0,0,1): és el color PER DEFECTE dels enllaços. Amb els
   :not() a pel (0,3,1) passava per sobre de `header a` / `main a` / `footer a` de system.css i
   Opcions d'estil no podia canviar el color dels enllaços de cap secció. */
a:where(:not(.btn):not(.iaLayer-bd-btn-primary):not(.iaLayer-bd-btn-secondary)) {
  color: var(--bs-primary);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--ial-t-fast);
}

a:where(:not(.btn)):hover {
  text-decoration: underline;
}

.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-wrap > main {
  flex: 1;
}

section {
  padding-top: var(--ial-sp-7, 48px);
  padding-bottom: var(--ial-sp-7, 48px);
}

@media (max-width: 767px) {
  section {
    padding-top: var(--ial-sp-6, 32px);
    padding-bottom: var(--ial-sp-6, 32px);
  }
}
.row.contenidor {
  margin-left: 0;
  margin-right: 0;
}

/* [2026-09-18] Default de ÚLTIM recurs: system.css (posterior a la cascada) emet --cgv2-content-max
   des de `mida_estandar` (panel/pagina_propietats.php) o `dc_content_max` (Design Core). */
:root {
  --cgv2-content-max: 1200px;
  --cgv2-gutter: var(--ial-sp-4, 16px);
}

.fullwidth {
  width: 100%;
}

.fullwidth > .lock-container,
.lock-container {
  width: 100%;
  max-width: var(--cgv2-content-max);
  margin-inline: auto;
}

.cgv2-gap-0 > .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.cgv2-gap-s > .row {
  --bs-gutter-x: var(--space-s);
  --bs-gutter-y: var(--space-s);
}

.cgv2-gap-m > .row {
  --bs-gutter-x: var(--space-m);
  --bs-gutter-y: var(--space-m);
}

.cgv2-gap-l > .row {
  --bs-gutter-x: var(--space-l);
  --bs-gutter-y: var(--space-l);
}

.cgv2-gap-xl > .row {
  --bs-gutter-x: var(--ia-gap-xl, var(--space-xl));
  --bs-gutter-y: var(--ia-gap-xl, var(--space-xl));
}

.valign-start > .row {
  align-items: flex-start;
}

.valign-center > .row {
  align-items: center;
}

.valign-end > .row {
  align-items: flex-end;
}

.cgv2-minh-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cgv2-band-surface {
  background-color: var(--ial-c-surface, #fff);
}

.cgv2-band-soft {
  background-color: var(--ial-c-surface-muted, #f5f5f7);
}

.cgv2-band-primary {
  background-color: var(--bs-primary, #4f46e5);
  color: #fff;
}

.cgv2-band-dark {
  background-color: var(--bs-dark, #1a1a2e);
  color: #fff;
}

@media (max-width: 575.98px) {
  .cgv2-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .cgv2-hide-tablet {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .cgv2-hide-desktop {
    display: none !important;
  }
}
/* [U1.2a · FORMA 2026-09-29] Rewire a l'escala de Style Options (Estils › Avanzado, camps
   radius_, shadow_ i border_ (prefixos)): var(--ia-*, <literal ACTUAL d'aquesta mateixa regla>) — buit = el
   valor d'avui, cap canvi visible. --ia-radius-, --ia-shadow- i --ia-border- (prefixos) els declara sempre
   (classe B) el :root de themes/ext_irtheme/css/system-twig.css; el literal d'aquí és només
   defensiu (full carregat sense system.css). Contracte: tests/ia_layer/fixtures/style_scales_contract.json
   (escales radius/shadow/border), test: tests/ia_layer/test_style_shape_scales.php. */
.cgv2-radius-sm {
  border-radius: var(--ia-radius-s, 6px);
}

.cgv2-radius-md {
  border-radius: var(--ia-radius-m, 8px);
}

.cgv2-radius-lg {
  border-radius: var(--ia-radius-l, 12px);
}

.cgv2-radius-xl {
  border-radius: var(--ia-radius-xl, 16px);
}

.cgv2-radius-pill {
  border-radius: var(--ia-radius-pill, 999px);
}

[class*=cgv2-radius-] {
  overflow: hidden;
}

.cgv2-shadow-xs {
  box-shadow: var(--ia-shadow-s, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.cgv2-shadow-sm {
  box-shadow: var(--ia-shadow-m, 0 2px 12px rgba(0, 0, 0, 0.07));
}

.cgv2-shadow-md {
  box-shadow: var(--ia-shadow-l, 0 8px 32px rgba(0, 0, 0, 0.13));
}

.cgv2-border-thin {
  border: var(--ia-border-thin, 1px) solid var(--ial-c-border, #e0e0e0);
}

.cgv2-border-thick {
  border: var(--ia-border-thick, 3px) solid var(--ial-c-border, #e0e0e0);
}

.cgv2-text-light {
  color: var(--ial-c-text-inverse, #fff);
}

.cgv2-text-dark {
  color: var(--ial-c-text-1, #1a1a2e);
}

.cgv2-grad-primary {
  background-image: linear-gradient(135deg, var(--bs-primary, #4f46e5), var(--bs-dark, #1a1a2e));
  color: #fff;
}

.cgv2-grad-subtle {
  background-image: linear-gradient(135deg, var(--ial-c-surface, #fff), var(--ial-c-surface-muted, #f5f5f7));
}

.cgv2-grad-dark {
  background-image: linear-gradient(135deg, var(--bs-dark, #1a1a2e), #000);
  color: #fff;
}

.cgv2-bg-image > .row {
  background-image: var(--cgv2-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* [U1.2a · FORMA 2026-09-29] Rewire a l'escala d'overlay de Style Options (camps
   overlay_dark/overlay_light): var(--ia-overlay-*, <literal ACTUAL d'aquesta mateixa regla>) — buit =
   el valor d'avui. --ia-overlay-* el declara sempre (classe B) el :root de system-twig.css; el
   literal d'aquí és només defensiu. */
.cgv2-bg-image.cgv2-overlay-dark > .row {
  background-image: linear-gradient(var(--ia-overlay-dark, rgba(0, 0, 0, 0.5)), var(--ia-overlay-dark, rgba(0, 0, 0, 0.5))), var(--cgv2-bg);
}

.cgv2-bg-image.cgv2-overlay-light > .row {
  background-image: linear-gradient(var(--ia-overlay-light, rgba(255, 255, 255, 0.6)), var(--ia-overlay-light, rgba(255, 255, 255, 0.6))), var(--cgv2-bg);
}

.cgv2-self-start {
  align-self: flex-start;
}

.cgv2-self-center {
  align-self: center;
}

.cgv2-self-end {
  align-self: flex-end;
}

@media (max-width: 575.98px) {
  .cgv2-order-mobile-first {
    order: -1;
  }
  .cgv2-order-mobile-last {
    order: 99;
  }
}
.ml-0 {
  margin-left: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

@media (min-width: 576px) {
  .ml-sm-0 {
    margin-left: 0 !important;
  }
}

@media (min-width: 576px) {
  .mr-sm-0 {
    margin-right: 0 !important;
  }
}

@media (min-width: 768px) {
  .ml-md-0 {
    margin-left: 0 !important;
  }
}

@media (min-width: 768px) {
  .mr-md-0 {
    margin-right: 0 !important;
  }
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

@media (min-width: 576px) {
  .ml-sm-1 {
    margin-left: 0.25rem !important;
  }
}

@media (min-width: 576px) {
  .mr-sm-1 {
    margin-right: 0.25rem !important;
  }
}

@media (min-width: 768px) {
  .ml-md-1 {
    margin-left: 0.25rem !important;
  }
}

@media (min-width: 768px) {
  .mr-md-1 {
    margin-right: 0.25rem !important;
  }
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

@media (min-width: 576px) {
  .ml-sm-2 {
    margin-left: 0.5rem !important;
  }
}

@media (min-width: 576px) {
  .mr-sm-2 {
    margin-right: 0.5rem !important;
  }
}

@media (min-width: 768px) {
  .ml-md-2 {
    margin-left: 0.5rem !important;
  }
}

@media (min-width: 768px) {
  .mr-md-2 {
    margin-right: 0.5rem !important;
  }
}

.ml-3 {
  margin-left: 1rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

@media (min-width: 576px) {
  .ml-sm-3 {
    margin-left: 1rem !important;
  }
}

@media (min-width: 576px) {
  .mr-sm-3 {
    margin-right: 1rem !important;
  }
}

@media (min-width: 768px) {
  .ml-md-3 {
    margin-left: 1rem !important;
  }
}

@media (min-width: 768px) {
  .mr-md-3 {
    margin-right: 1rem !important;
  }
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

@media (min-width: 576px) {
  .ml-sm-4 {
    margin-left: 1.5rem !important;
  }
}

@media (min-width: 576px) {
  .mr-sm-4 {
    margin-right: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  .ml-md-4 {
    margin-left: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  .mr-md-4 {
    margin-right: 1.5rem !important;
  }
}

.ml-5 {
  margin-left: 3rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.pl-5 {
  padding-left: 3rem !important;
}

.pr-5 {
  padding-right: 3rem !important;
}

@media (min-width: 576px) {
  .ml-sm-5 {
    margin-left: 3rem !important;
  }
}

@media (min-width: 576px) {
  .mr-sm-5 {
    margin-right: 3rem !important;
  }
}

@media (min-width: 768px) {
  .ml-md-5 {
    margin-left: 3rem !important;
  }
}

@media (min-width: 768px) {
  .mr-md-5 {
    margin-right: 3rem !important;
  }
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.row.no-gutters {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.row.no-gutters > * {
  padding-right: 0;
  padding-left: 0;
}

.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-control-label {
  margin-bottom: 0.5rem;
}

.fa, [class^=fa-], [class*=" fa-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-style: normal;
  text-align: center;
  vertical-align: middle;
}

:root {
  --ial-c-white: #ffffff;
  --ial-c-surface: #ffffff;
  --ial-c-surface-soft: #faf7f4;
  --ial-c-surface-muted: #f5f5f7;
  --ial-c-text-1: #1a1a2e;
  --ial-c-text-2: #4a4a5a;
  --ial-c-text-3: #6c757d;
  --ial-c-text-soft: #9a9aaa;
  --ial-c-text-faint: #b0b0bb;
  --ial-c-text-inverse: #ffffff;
  --ial-c-border: #e0e0e0;
  --ial-c-border-soft: #f0f0f0;
  --ial-c-border-faint: #ddd;
  /* [MODULS-B · S3 2026-09-28] Ponts nous del core (PLA_FASE_2B.md §1.2, taula de tokens):
     --ial-c-focus resol S-14 (anell de focus únic, pontejable des d'Estils via
     `ia_color_focus_ring`); --ial-c-icon resol S-15 (reserva d'icona pontejable des
     d'`icon_color`, en lloc de `currentColor` en dur als consumidors de moduls.css). */
  --ial-c-focus: var(--bs-primary);
  --ial-c-icon: currentColor;
  --ial-shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --ial-shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
  --ial-shadow-md: 0 8px 32px rgba(0,0,0,0.13);
  --ial-shadow-lg: 0 12px 48px rgba(0,0,0,0.20);
  --ial-r-sm: 6px;
  --ial-r-md: 8px;
  --ial-r-lg: 12px;
  --ial-r-xl: 16px;
  --ial-r-pill: 999px;
  --ial-sp-1: 4px;
  --ial-sp-2: 8px;
  --ial-sp-3: 12px;
  --ial-sp-4: 16px;
  --ial-sp-5: 24px;
  --ial-sp-6: 32px;
  --ial-sp-7: 48px;
  --ial-sp-8: 64px;
  --ial-t-fast: 0.15s ease;
  --ial-t-base: 0.25s ease;
  --ial-t-slow: 0.4s ease;
  --ial-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ial-font-display: 'Oswald', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

:root {
  --space-3xs: 0.25rem;
  --space-2xs: clamp(0.5rem, 0.41rem + 0.43vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.66rem + 0.43vw, 1rem);
  --space-s: clamp(1rem, 0.83rem + 0.87vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.33rem + 0.87vw, 2rem);
  --space-l: clamp(2rem, 1.65rem + 1.74vw, 3rem);
  --space-xl: clamp(3rem, 2.48rem + 2.61vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.30rem + 3.48vw, 6rem);
  --space-3xl: clamp(6rem, 4.96rem + 5.22vw, 9rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.10rem + 0.43vw, 1.4375rem);
  --step-2: clamp(1.4375rem, 1.31rem + 0.65vw, 1.8125rem);
  --step-3: clamp(1.75rem, 1.58rem + 0.87vw, 2.25rem);
  --step-4: clamp(2.0625rem, 1.80rem + 1.30vw, 2.8125rem);
  --step-5: clamp(2.5rem, 2.15rem + 1.74vw, 3.5rem);
}

/* [MODULS-B · G0b 2026-09-25 · P2+P3] P2: les 64 regles `.tablet-*`/`.mobile-*` d'aquest bloc
   passen a viure dins de `@media (max-width: 991.98px)` / `(max-width: 575.98px)` (abans
   s'aplicaven a qualsevol amplada). P3: `!important` tret de les 72 utilitats S/M/L (només les
   -0 el conserven), autoritzat pel coordinador el 2026-09-25 un cop aplicat R1 al DEF (variant c:
   NOMÉS els 12 marges S/M/L d'Estils buits; els 12 paddings continuen a 15/30/45 i `--ia-space-*`
   intactes — `themes/ext_irtheme/css/system-twig.css` NO es toca aquí; ho garanteix MB-00-R1 a
   tests/ia_layer/test_moduls_b_css.php). SPEC_MODULS_B.md §4 P2/P3. */
.mt-l {
  margin-top: var(--margin-top-l, var(--space-l));
}

.pt-l {
  padding-top: var(--padding-top-l, var(--space-l));
}

@media (max-width: 991.98px) {
  .tablet-mt-l {
    margin-top: var(--margin-top-l, var(--space-l));
  }
}

@media (max-width: 991.98px) {
  .tablet-pt-l {
    padding-top: var(--padding-top-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-mt-l {
    margin-top: var(--margin-top-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-pt-l {
    padding-top: var(--padding-top-l, var(--space-l));
  }
}

.mr-l {
  margin-right: var(--margin-right-l, var(--space-l));
}

.pr-l {
  padding-right: var(--padding-right-l, var(--space-l));
}

@media (max-width: 991.98px) {
  .tablet-mr-l {
    margin-right: var(--margin-right-l, var(--space-l));
  }
}

@media (max-width: 991.98px) {
  .tablet-pr-l {
    padding-right: var(--padding-right-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-mr-l {
    margin-right: var(--margin-right-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-pr-l {
    padding-right: var(--padding-right-l, var(--space-l));
  }
}

.mb-l {
  margin-bottom: var(--margin-bottom-l, var(--space-l));
}

.pb-l {
  padding-bottom: var(--padding-bottom-l, var(--space-l));
}

@media (max-width: 991.98px) {
  .tablet-mb-l {
    margin-bottom: var(--margin-bottom-l, var(--space-l));
  }
}

@media (max-width: 991.98px) {
  .tablet-pb-l {
    padding-bottom: var(--padding-bottom-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-mb-l {
    margin-bottom: var(--margin-bottom-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-pb-l {
    padding-bottom: var(--padding-bottom-l, var(--space-l));
  }
}

.ml-l {
  margin-left: var(--margin-left-l, var(--space-l));
}

.pl-l {
  padding-left: var(--padding-left-l, var(--space-l));
}

@media (max-width: 991.98px) {
  .tablet-ml-l {
    margin-left: var(--margin-left-l, var(--space-l));
  }
}

@media (max-width: 991.98px) {
  .tablet-pl-l {
    padding-left: var(--padding-left-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-ml-l {
    margin-left: var(--margin-left-l, var(--space-l));
  }
}

@media (max-width: 575.98px) {
  .mobile-pl-l {
    padding-left: var(--padding-left-l, var(--space-l));
  }
}

.mt-m {
  margin-top: var(--margin-top-m, var(--space-m));
}

.pt-m {
  padding-top: var(--padding-top-m, var(--space-m));
}

@media (max-width: 991.98px) {
  .tablet-mt-m {
    margin-top: var(--margin-top-m, var(--space-m));
  }
}

@media (max-width: 991.98px) {
  .tablet-pt-m {
    padding-top: var(--padding-top-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-mt-m {
    margin-top: var(--margin-top-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-pt-m {
    padding-top: var(--padding-top-m, var(--space-m));
  }
}

.mr-m {
  margin-right: var(--margin-right-m, var(--space-m));
}

.pr-m {
  padding-right: var(--padding-right-m, var(--space-m));
}

@media (max-width: 991.98px) {
  .tablet-mr-m {
    margin-right: var(--margin-right-m, var(--space-m));
  }
}

@media (max-width: 991.98px) {
  .tablet-pr-m {
    padding-right: var(--padding-right-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-mr-m {
    margin-right: var(--margin-right-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-pr-m {
    padding-right: var(--padding-right-m, var(--space-m));
  }
}

.mb-m {
  margin-bottom: var(--margin-bottom-m, var(--space-m));
}

.pb-m {
  padding-bottom: var(--padding-bottom-m, var(--space-m));
}

@media (max-width: 991.98px) {
  .tablet-mb-m {
    margin-bottom: var(--margin-bottom-m, var(--space-m));
  }
}

@media (max-width: 991.98px) {
  .tablet-pb-m {
    padding-bottom: var(--padding-bottom-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-mb-m {
    margin-bottom: var(--margin-bottom-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-pb-m {
    padding-bottom: var(--padding-bottom-m, var(--space-m));
  }
}

.ml-m {
  margin-left: var(--margin-left-m, var(--space-m));
}

.pl-m {
  padding-left: var(--padding-left-m, var(--space-m));
}

@media (max-width: 991.98px) {
  .tablet-ml-m {
    margin-left: var(--margin-left-m, var(--space-m));
  }
}

@media (max-width: 991.98px) {
  .tablet-pl-m {
    padding-left: var(--padding-left-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-ml-m {
    margin-left: var(--margin-left-m, var(--space-m));
  }
}

@media (max-width: 575.98px) {
  .mobile-pl-m {
    padding-left: var(--padding-left-m, var(--space-m));
  }
}

.mt-s {
  margin-top: var(--margin-top-s, var(--space-s));
}

.pt-s {
  padding-top: var(--padding-top-s, var(--space-s));
}

@media (max-width: 991.98px) {
  .tablet-mt-s {
    margin-top: var(--margin-top-s, var(--space-s));
  }
}

@media (max-width: 991.98px) {
  .tablet-pt-s {
    padding-top: var(--padding-top-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-mt-s {
    margin-top: var(--margin-top-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-pt-s {
    padding-top: var(--padding-top-s, var(--space-s));
  }
}

.mr-s {
  margin-right: var(--margin-right-s, var(--space-s));
}

.pr-s {
  padding-right: var(--padding-right-s, var(--space-s));
}

@media (max-width: 991.98px) {
  .tablet-mr-s {
    margin-right: var(--margin-right-s, var(--space-s));
  }
}

@media (max-width: 991.98px) {
  .tablet-pr-s {
    padding-right: var(--padding-right-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-mr-s {
    margin-right: var(--margin-right-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-pr-s {
    padding-right: var(--padding-right-s, var(--space-s));
  }
}

.mb-s {
  margin-bottom: var(--margin-bottom-s, var(--space-s));
}

.pb-s {
  padding-bottom: var(--padding-bottom-s, var(--space-s));
}

@media (max-width: 991.98px) {
  .tablet-mb-s {
    margin-bottom: var(--margin-bottom-s, var(--space-s));
  }
}

@media (max-width: 991.98px) {
  .tablet-pb-s {
    padding-bottom: var(--padding-bottom-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-mb-s {
    margin-bottom: var(--margin-bottom-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-pb-s {
    padding-bottom: var(--padding-bottom-s, var(--space-s));
  }
}

.ml-s {
  margin-left: var(--margin-left-s, var(--space-s));
}

.pl-s {
  padding-left: var(--padding-left-s, var(--space-s));
}

@media (max-width: 991.98px) {
  .tablet-ml-s {
    margin-left: var(--margin-left-s, var(--space-s));
  }
}

@media (max-width: 991.98px) {
  .tablet-pl-s {
    padding-left: var(--padding-left-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-ml-s {
    margin-left: var(--margin-left-s, var(--space-s));
  }
}

@media (max-width: 575.98px) {
  .mobile-pl-s {
    padding-left: var(--padding-left-s, var(--space-s));
  }
}

.mt-0 {
  margin-top: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

@media (max-width: 991.98px) {
  .tablet-mt-0 {
    margin-top: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .tablet-pt-0 {
    padding-top: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-mt-0 {
    margin-top: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-pt-0 {
    padding-top: 0 !important;
  }
}

.mr-0 {
  margin-right: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

@media (max-width: 991.98px) {
  .tablet-mr-0 {
    margin-right: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .tablet-pr-0 {
    padding-right: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-mr-0 {
    margin-right: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-pr-0 {
    padding-right: 0 !important;
  }
}

.mb-0 {
  margin-bottom: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

@media (max-width: 991.98px) {
  .tablet-mb-0 {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .tablet-pb-0 {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-mb-0 {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-pb-0 {
    padding-bottom: 0 !important;
  }
}

.ml-0 {
  margin-left: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

@media (max-width: 991.98px) {
  .tablet-ml-0 {
    margin-left: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .tablet-pl-0 {
    padding-left: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-ml-0 {
    margin-left: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-pl-0 {
    padding-left: 0 !important;
  }
}

/* [MODULS-B · G0b 2026-09-25 · P6 · NO FET] Es va provar d'afegir aquí les utilitats core
   `.mt-xs/.pt-xs/.mt-xl/.pt-xl…` (SPEC_MODULS_B.md §1.9 T4 / §4 P6, marcat opcional). Es reverteix:
   `test_style_scales_parity.php --quiet` (C3) exigeix que un consumidor de classe «A» d'Estils
   llegeixi `var(--padding-top-xs)`/`--ia-space-xs`, no un token del core en cru; una utilitat aquí
   amb `var(--space-xs)` directe crea 80 violacions C3 noves i el §7 del brief exigeix que aquest
   test «quedi igual». P6 queda descartat (no és prerequisit d'altres unitats). */

/* [U1.3 · TEXT 2026-09-30] Escala de text d'Estils (camps text_*_font_size, classe A): buit = el mateix
   --step-* d'avui. Contracte: tests/ia_layer/fixtures/style_scales_contract.json (escala text). */
.text-xs, .list-xs {
  font-size: var(--text-xs-font-size, var(--step--1));
}

.text-s, .list-s {
  font-size: var(--text-s-font-size, var(--step-0));
}

.text-m, .list-m {
  font-size: var(--text-m-font-size, var(--step-1));
}

.text-l, .list-l {
  font-size: var(--text-l-font-size, var(--step-2));
}

.text-xl, .list-xl {
  font-size: var(--text-xl-font-size, var(--step-3));
}

.titlexs {
  font-size: var(--step-1);
}

.titles {
  font-size: var(--step-2);
}

.titlem {
  font-size: var(--step-3);
}

.titlel {
  font-size: var(--step-4);
}

.titlexl {
  font-size: var(--step-5);
}

:root {
  /* [HEADER V1 2026-09-23] --header-height / --header-height-scrolled / --header-bg-color /
     --header-shrink-bg-color / --header-transition / --header-scrolled-shadow /
     --header-scrolled-border-width es generen des de style_options (pestanya "Cabecera") a
     themes/ext_irtheme/css/system-twig.css -> child_<tema>/css/system.css. Els valors literals
     d'aquí són NOMÉS el fallback d'un system.css encara no regenerat amb aquests camps.
     Mòbil: DERIVAT (x0,875, la proporció 64/56 que ja feia servir hv2), amb un mínim tàctil —
     cap control d'alçada separat per a mòbil. */
  --hv2-h: var(--header-height, 64px);
  --hv2-h-scrolled: min(var(--hv2-h), var(--header-height-scrolled, 56px));
  --hv2-h-mobile: max(48px, calc(var(--hv2-h) * 0.875));
  --hv2-h-scrolled-mobile: min(var(--hv2-h-mobile), max(44px, calc(var(--hv2-h-scrolled) * 0.875)));
  --hv2-pad-x: clamp(16px, 4vw, 48px);
  /* [PILOT2 · alineació lateral] Font ÚNICA del marge lateral de capçalera, contingut i peu. Defecte del
     tema: --hv2-pad-x. system-twig.css la SOBREESCRIU (mateixa especificitat, carrega després) només si
     Estils té container_padding_left/right: aquest mana. */
  --page-pad-l: var(--hv2-pad-x);
  --page-pad-r: var(--hv2-pad-x);
  --hv2-bg: var(--header-bg-color, rgba(255, 255, 255, 0.85));
  --hv2-bg-solid: var(--header-shrink-bg-color, rgba(255, 255, 255, 0.98));
  /* [VINC U5.1 · fase 8b] Text i superfícies de la capçalera: surten d'Estils › Cabecera. El color del
     menú mana; la resta (tènue, vora, fons de hover) se'n DERIVA, així una capçalera fosca amb text
     clar no deixa burger, idiomes ni «Login» invisibles. Sense Estils: el mateix que abans. */
  --hv2-menu-text: var(--header-menu-color, var(--ial-c-text-1, #1a1a2e));
  --hv2-text: var(--hv2-menu-text);
  --hv2-surface: var(--header-dropdown-bg-color, var(--ia-color-surface, #fff));
  --hv2-ground: var(--hv2-bg-solid);
  --hv2-on-accent: var(--ia-color-text-inverted, #fff);
  /* [HEADER V1 2026-09-23] --bs-primary NOMÉS es defineix quan dc_primary té valor
     (system-twig.css: {% if dc_primary ... %}); en un lloc sense configurar, el fallback
     hardcoded era #4f46e5 (indigo arbitrari) — en promoure hv2 del child al tema BASE això es
     convertiria en un segon accent per defecte a tot arreu, contra DESIGN_SYSTEM.md:45 (mai
     múltiples accents). Fallback corregit a la decisió congelada (2026-09-10): near-black.
     [FRONT STYLE FIXES 2026-09-23] A la pràctica aquest fallback no s'aplicava mai: bootstrap.min.css
     sempre defineix --bs-primary:#0d6efd. Ara system.css l'emet sempre amb `html:root`
     (dc_primary ?: primary efectiu de la paleta), així que l'accent és el primary del tema. */
  --hv2-accent: var(--bs-primary, #0a0a0a);
  /* [P2 30/09] El camp buit hereta primary (contracte C) i el text de l'ítem actiu també és primary: fons=text, ítem
     invisible. Només un fons EXPLÍCIT (--hv2-active-bg-explicit, l'emet system-twig.css) mana; sinó es deriva del text. */
  --hv2-active-bg: var(--hv2-active-bg-explicit, color-mix(in srgb, var(--hv2-accent) 8%, transparent));
  --hv2-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* [VINC U5.1] Derivats del text de cada superfície. El desplegable i el panell mòbil són superfícies
   pròpies (fons i text del «Desplegable» d'Estils): hi redefinim text i fons i els derivats es recalculen. */
:root,
.hv2-dropdown,
.hv2-mobile-panel {
  --hv2-text-muted: color-mix(in srgb, var(--hv2-text) 62%, transparent);
  --hv2-border: color-mix(in srgb, var(--hv2-text) 6%, transparent);
  --hv2-hover-bg: color-mix(in srgb, var(--hv2-text) 4%, transparent);
  --hv2-on-text: var(--hv2-ground);
}
.hv2-dropdown,
.hv2-mobile-panel {
  --hv2-text: var(--header-dropdown-color, var(--hv2-menu-text));
  --hv2-ground: var(--hv2-surface);
}

/* ============================================================================
   SITE HEADER — shell sticky ÚNIC (themes/irtheme/principal.html). Controlat per
   initSiteHeader() (themes/irtheme/js/main.js). Contracte:
   - El shell reserva l'alçada NATURAL (--site-header-h, mesurada per ResizeObserver) i mai fa
     scroll ni CLS: en fer scroll només s'encongeix la BARRA de dins (.hv2-inner), mai el shell.
   - L'espai que queda lliure entre la barra encongida i el final del shell és transparent i NO
     bloqueja clics (pointer-events:none al shell, :auto al contingut real).
   ============================================================================ */
.site-header {
  position: relative;
  /* 1030: just sota .modal-backdrop de Bootstrap (1040) i mai igual que .search-dropdown/.a2hs
     (1000). NO és el sostre real del tema: .cookie-policy-container (10000000000) i
     .fotorama--fullscreen (2147483647) hi queden per damunt DELIBERADAMENT, i és correcte que
     hi quedin — un banner de cookies o una galeria a pantalla completa han de tapar el header.
     Tampoc xoca amb la capa de l'Editor en viu (ai_css_studio_shell.js, 2147483001+): aquella
     viu molt per sobre de qualsevol xrome del lloc a propòsit. No existeix cap escala --ia-z-*
     canònica al projecte; si mai cal que el header superi un d'aquests casos, és una decisió
     de disseny explícita, no un número més gran triat de passada. */
  z-index: 1030;
}
.site-header[data-sticky="1"] {
  position: sticky;
  top: 0;
  min-height: var(--site-header-h, auto);
  pointer-events: none;
}
.site-header-bar {
  pointer-events: auto;
}
/* Sentinella de 16px a dalt del document, fora del flux (absolute): mentre se'n veu un píxel,
   la pàgina no ha passat del llindar; quan desapareix (scroll >= 16px) el controlador marca
   l'estat "scrolled". Sense rootMargin: un sentinella d'alçada 0 amb marge negatiu ja queda
   fora de l'arrel en carregar i la capçalera sortiria encongida des del primer moment. */
.site-header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 16px;
  pointer-events: none;
}
/* Que un enllaç d'ancoratge o el focus de teclat no quedin tapats sota la barra sticky
   (WCAG 2.4.11). Fem servir --ia-header-h (l'alçada SENSE encongir: cota superior segura,
   perquè encongit el shell ja ocupa menys). */
html:has(.site-header[data-sticky="1"]) {
  scroll-padding-top: var(--ia-header-h, var(--hv2-h, 64px));
}

/* [HEADER V1 2026-09-23] El fons i el backdrop-filter viuen a ::before, NO al .hv2-header: un
   backdrop-filter converteix el seu element en el contenidor dels fills `position: fixed`, i el
   panell del menú mòbil (fixed, fill de .hv2-header) quedava tancat dins d'una caixa de 64px en
   lloc d'ocupar la pantalla (bug que ja existia abans de Header V1). */
.hv2-header {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid transparent;
  transition: border-color var(--header-transition, 200ms) ease,
    box-shadow var(--header-transition, 200ms) ease;
}
.hv2-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hv2-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: background var(--header-transition, 200ms) ease;
  pointer-events: none;
}
.site-header[data-scrolled] .hv2-header::before {
  background: var(--hv2-bg-solid);
}
.site-header[data-scrolled] .hv2-header {
  border-bottom-color: var(--hv2-border);
  box-shadow: var(--header-scrolled-shadow, var(--hv2-shadow));
  border-bottom-width: var(--header-scrolled-border-width, 1px);
}

.hv2-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--hv2-h);
  padding-left: var(--hv2-pad-x);
  padding-right: var(--hv2-pad-x);
  max-width: var(--container-max-width, 1440px);
  margin: 0 auto;
  transition: height var(--header-transition, 200ms) ease;
}

/* [PILOT2 · alineació lateral] Escriptori: la barra arrenca a la mateixa x que el contingut i el peu.
   El .hv2-header viu dins d'una col del Grid (padding = mig gutter): es cancel·la amb el mateix gutter,
   heretat del .row, perquè el marge lateral el mani només --page-pad-*. Mòbil (<=991px) no es toca. */
@media (min-width: 992px) {
  .hv2-header {
    margin-left: calc(var(--bs-gutter-x, 0px) * -.5);
    margin-right: calc(var(--bs-gutter-x, 0px) * -.5);
  }
  .hv2-inner {
    padding-left: var(--page-pad-l);
    padding-right: var(--page-pad-r);
  }
}
.site-header[data-scrolled] .hv2-inner {
  height: var(--hv2-h-scrolled);
}
@media (max-width: 991px) {
  .hv2-inner {
    height: var(--hv2-h-mobile);
    gap: 12px;
  }
  .site-header[data-scrolled] .hv2-inner {
    height: var(--hv2-h-scrolled-mobile);
  }
}
/* [HEADER V1 2026-09-23] Moviment reduït: system-twig.css ja posa --header-transition a 0s al
   seu bloc @media (mateix punt que --button-transition). Aquesta còpia cobreix l'interval entre
   el desplegament i la regeneració de system.css: sense ella, el fallback de 200ms dels
   consumidors animaria la capçalera també amb moviment reduït. */
@media (prefers-reduced-motion: reduce) {
  :root { --header-transition: 0s; }
}

.hv2-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* [HEADER V1 2026-09-23] L'alçada del logo de style_options (header_navbar_logo_height /
   header_shrink_navbar_logo_height) arriba ara de veritat a hv2 — abans apuntava a
   `.navbar-brand`, que ja no existeix. Sempre LIMITADA per l'alçada de la barra (16px de marge
   dalt i baix) perquè un valor gran mai la desbordi: amb la barra per defecte (64px) el
   resultat és 32px, exactament el que es pintava fins ara. */
.hv2-logo img {
  height: min(var(--header-navbar-logo-height, 32px), calc(var(--hv2-h) - 32px));
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  transition: height var(--header-transition, 200ms) ease;
}
.site-header[data-scrolled] .hv2-logo img {
  height: min(var(--header-shrink-navbar-logo-height, 24px), calc(var(--hv2-h-scrolled) - 32px));
}
.hv2-logo:hover {
  opacity: 0.7;
}
@media (max-width: 991px) {
  .hv2-logo {
    order: 1;
    margin: 0 auto;
  }
  .hv2-logo img {
    height: min(var(--header-navbar-logo-height, 28px), calc(var(--hv2-h-mobile) - 28px));
  }
  .site-header[data-scrolled] .hv2-logo img {
    height: min(var(--header-shrink-navbar-logo-height, 24px), calc(var(--hv2-h-scrolled-mobile) - 24px));
  }
}

.hv2-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
@media (max-width: 991px) {
  .hv2-nav {
    display: none;
  }
}

.hv2-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hv2-item {
  position: relative;
}
.hv2-item.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 12px;
}
.hv2-item.has-dropdown:hover .hv2-dropdown, .hv2-item.has-dropdown:focus-within .hv2-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.hv2-item.has-dropdown:hover .hv2-chevron, .hv2-item.has-dropdown:focus-within .hv2-chevron {
  transform: rotate(180deg);
}

.hv2-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  color: var(--hv2-text);
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}
.hv2-link:hover {
  background: var(--hv2-hover-bg);
  color: var(--hv2-text);
  text-decoration: none;
}
.hv2-link.is-active {
  color: var(--hv2-accent);
  background: var(--hv2-active-bg);
}

.hv2-chevron {
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.hv2-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  background: var(--hv2-surface);
  border: 1px solid var(--hv2-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hv2-dropdown::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--hv2-surface);
  border-left: 1px solid var(--hv2-border);
  border-top: 1px solid var(--hv2-border);
}

.hv2-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hv2-dropdown-item {
  position: relative;
}
.hv2-dropdown-item.has-sub::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 8px;
  bottom: 0;
}
.hv2-dropdown-item.has-sub:hover > .hv2-dropdown-sub, .hv2-dropdown-item.has-sub:focus-within > .hv2-dropdown-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.hv2-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--hv2-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.hv2-dropdown-link:hover {
  background: var(--hv2-hover-bg);
  color: var(--hv2-accent);
  text-decoration: none;
}
.hv2-dropdown-link.is-active {
  color: var(--hv2-accent);
  background: var(--hv2-active-bg);
}

.hv2-dropdown-sub {
  position: absolute;
  top: -8px;
  left: 100%;
  margin-left: 4px;
  min-width: 200px;
  background: var(--hv2-surface);
  border: 1px solid var(--hv2-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hv2-utilities {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 991px) {
  .hv2-utilities {
    display: none;
  }
}

.hv2-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--hv2-hover-bg);
  border-radius: 8px;
}

.hv2-lang-link {
  display: inline-block;
  padding: 4px 10px;
  font-size: calc(var(--header-menu-font-size, 14px) * 0.86);
  font-weight: 600;
  /* [CAPÇALERA V2 · camps propis 2026-10-03] Estils › Cabecera › «Idiomas» (header_lang_color → --header-lang-color, system-twig.css).
     Buit = el derivat del menú d'abans (tènue en repòs, el del menú en passar). L'idioma actiu continua sent l'accent. */
  color: var(--header-lang-color, var(--hv2-text-muted));
  text-decoration: none;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
}
.hv2-lang-link:hover {
  color: var(--header-lang-color, var(--hv2-text));
  background: color-mix(in srgb, var(--hv2-ground) 60%, transparent);
}
.hv2-lang-link.active {
  color: var(--hv2-on-accent);
  background: var(--hv2-accent);
}

.hv2-login {
  /* [CAPÇALERA V2 · camps propis 2026-10-03] Estils › Cabecera › «Acceso» (header_login_color → --header-login-color, system-twig.css): el
     text del login i el que se'n deriva (vora tènue, farcit del hover) surten d'aquest color. Buit = el del menú, exactament com abans
     (--hv2-menu-text és el mateix valor que --hv2-text a :root; no es pot fer servir --hv2-text com a fallback d'ell mateix). */
  --hv2-text: var(--header-login-color, var(--hv2-menu-text));
  --hv2-border: color-mix(in srgb, var(--hv2-text) 6%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  color: var(--hv2-text);
  font-size: var(--header-button-font-size, 14px);
  font-weight: 500;
  border: 1px solid var(--hv2-border);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hv2-login:hover {
  background: var(--hv2-text);
  color: var(--hv2-on-text);
  border-color: var(--hv2-text);
}
.hv2-login.is-logged {
  background: var(--hv2-accent);
  color: var(--hv2-on-accent);
  border-color: var(--hv2-accent);
}
.hv2-login.is-logged:hover {
  background: var(--hv2-text);
  border-color: var(--hv2-text);
}
@media (max-width: 1200px) {
  /* visually-hidden (NO display:none): el text visible és el nom accessible del botó/enllaç quan la icona és aria-hidden (WCAG 2.5.3 / 4.1.2) */
  .hv2-login .hv2-login-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.hv2-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 1002;
  transition: background 0.15s ease;
}
.hv2-burger:hover {
  background: var(--hv2-hover-bg);
}
@media (max-width: 991px) {
  .hv2-burger {
    display: flex;
    order: 0;
  }
}
.hv2-burger .hv2-burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--hv2-text);
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
}
.hv2-burger.is-open .hv2-burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hv2-burger.is-open .hv2-burger-bar:nth-child(2) {
  opacity: 0;
}
.hv2-burger.is-open .hv2-burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hv2-mobile-panel {
  position: fixed;
  top: var(--hv2-h-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--hv2-surface);
  padding: 32px var(--hv2-pad-x);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
/* [HEADER V1 2026-09-23] Amb la barra encongida, el panell ha de començar just a sota de
   l'alçada ENCONGIDA, no de la normal — si no, queda una franja de pàgina entre barra i panell. */
.site-header[data-scrolled] .hv2-mobile-panel {
  top: var(--hv2-h-scrolled-mobile);
}
@media (min-width: 992px) {
  .hv2-mobile-panel {
    display: none;
  }
}
.hv2-mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hv2-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hv2-mobile-item {
  border-bottom: 1px solid var(--hv2-border);
}

.hv2-mobile-link {
  display: block;
  padding: 14px 0;
  color: var(--hv2-text);
  font-size: calc(var(--header-menu-font-size, 14px) * 1.2);
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.hv2-mobile-link.is-active {
  color: var(--hv2-accent);
}

.hv2-mobile-dropdown {
  padding: 0 0 14px 14px;
}
.hv2-mobile-dropdown a, .hv2-mobile-dropdown button {
  display: block;
  padding: 8px 0;
  color: var(--hv2-text-muted);
  font-size: var(--header-dropdown-font-size, 15px);
  text-decoration: none;
}
.hv2-mobile-dropdown a:hover, .hv2-mobile-dropdown button:hover {
  color: var(--hv2-accent);
}
.hv2-mobile-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hv2-mobile-dropdown .hv2-dropdown-list {
  gap: 0;
}
.hv2-mobile-dropdown .hv2-dropdown-link {
  padding: 8px 0;
  background: transparent !important;
  font-size: var(--header-dropdown-font-size, 15px);
  color: var(--hv2-text-muted);
  white-space: normal;
}
.hv2-mobile-dropdown .hv2-dropdown-link svg {
  display: none;
}
.hv2-mobile-dropdown .hv2-dropdown-link:hover {
  color: var(--hv2-accent);
  background: transparent !important;
}
.hv2-mobile-dropdown .hv2-dropdown-sub {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  box-shadow: none;
  border: none;
  padding: 0 0 0 12px;
  margin: 0;
  min-width: 0;
}

.hv2-mobile-langs {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hv2-border);
}

.hv2-mobile-lang {
  display: inline-block;
  padding: 8px 16px;
  color: var(--hv2-text-muted);
  font-size: var(--header-menu-font-size, 14px);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--hv2-border);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.hv2-mobile-lang:hover {
  background: var(--hv2-text);
  color: var(--hv2-on-text);
  border-color: var(--hv2-text);
}
.hv2-mobile-lang.active {
  background: var(--hv2-accent);
  color: var(--hv2-on-accent);
  border-color: var(--hv2-accent);
}

/* [FINE-E5 · D1/D2/D4 2026-09-25] `.hv2-dropdown` (desktop) i `.hv2-mobile-dropdown` (panell
   mòbil) embolcallen `menu_dropdown.html` — el `.dropdown-menu` de Bootstrap que hi ha a dins
   porta `display:none` (bootstrap.min.css). El que obre/tanca el desplegable és el contenidor
   hv2 (`.hv2-item.has-dropdown:hover/:focus-within .hv2-dropdown`, més amunt en aquest fitxer, i
   `.hv2-mobile-dropdown` sempre desplegat dins del panell), no Bootstrap: sense aquesta regla el
   `.dropdown-menu` de dins es queda `display:none` encara que la caixa que l'envolta ja s'hagi
   fet visible, i el desplegable surt buit (D1) i el panell mòbil no ensenya el fill (D2). Calen
   DUES classes (0,2,0): aquest full es carrega ABANS que bootstrap.min.css, així que amb
   `:where()` (0,0,0) l'empat el guanyaria Bootstrap; (0,2,0) > (0,1,0) de `.dropdown-menu` sol,
   per tant guanya en qualsevol ordre de càrrega. */
.hv2-dropdown .dropdown-menu,
.hv2-mobile-dropdown .dropdown-menu {
  display: block;
  position: static;
  float: none;
  inset: auto;
  transform: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
/* D4: `menu_dropdown.html` posa `<ul class="sub p-0 m-0">` — les utilitats `p-0`/`m-0` de
   Bootstrap ja treuen padding/margin, però no el `list-style`, i sense això surt un pic (○)
   davant de cada ítem del desplegable desktop un cop es fa visible amb la regla d'aquí sobre.
   El panell mòbil ja el treu (`.hv2-mobile-dropdown ul`, més amunt), per això aquí només cal per
   a `.hv2-dropdown`. */
.hv2-dropdown .dropdown-menu ul {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .hv2-header,
  .hv2-link,
  .hv2-dropdown,
  .hv2-burger-bar,
  .hv2-mobile-panel,
  .hv2-chevron {
    transition: none !important;
  }
}
/* [HEADER V1 2026-09-23] El pont amb el wrapper legacy `.navigation-wrap.cbp-af-header`
   desapareix: aquell wrapper ja no existeix a principal.html (substituït per `.site-header`). */

.filter {
  font-size: 0.95rem;
}
.filter .filters-list.collapse {
  display: block;
}
.filter .filter-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--c-text, #1f2937);
}
.filter .filter-title i {
  transition: transform 0.3s ease;
}
.filter .filter-field {
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
  padding: 0.5rem 0;
}
.filter .filter-field > .btn,
.filter .filter-field > button {
  width: 100%;
  text-align: left;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0;
  padding-right: 0;
}
.filter .filter-field > .btn i,
.filter .filter-field > button i {
  transition: transform 0.3s ease;
}
.filter .filter-field .filter-field-content {
  padding-top: 0.5rem;
}
.filter .form-check {
  margin-bottom: 0.35rem;
}
.filter .form-check-label {
  cursor: pointer;
}
.filter .cat-filter-title {
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}
.filter .cat-filter-content {
  padding-left: 0.75rem;
}
.filter .cat-fields,
.filter .cols-fields {
  margin-top: 0.5rem;
}
.filter .filter-buttons {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-box {
  padding-right: 1rem;
}

@media (max-width: 991.98px) {
  .filter-box {
    padding-right: 0;
    margin-bottom: 1.5rem;
  }
}
/* ============================================================================
 * Modal d'accés d'usuaris (#acceso_usuarios) — [LOGIN MODAL 2026-10-04]
 * Mateix disseny que la pàgina de login de la intranet (intranet/login.html: títol, camps, botó
 * primari, enllaços «he oblidat la contrasenya» / «registrar-se»), però només amb tokens d'Estils:
 *   · tipografia per ROL: el títol és un h2 amb el rol .h3 (mida de Estils); etiquetes i camps
 *     (.form-label / .form-control) i el botó (.btn, botó primari de Estils) hereten el seu rol del
 *     sistema — aquí NO es fixa cap mida de text, color ni vora de camp ni de botó;
 *   · espaiat de COMPONENT en rem fixos (els --ia-space-* són espais de SECCIÓ: 48/80/120 px, deixaven els camps en 78 px); radis amb --ia-radius-*, superfície/vora/ombra amb --ia-color-* /
 *     --ia-shadow-*; cap color literal i cap !important.
 * Marcatge a themes/irtheme/principal.html; el flux d'autenticació (form[name=frm_login], .uname/.pword,
 * .togglepw[data-target] → initPasswordToggle) NO canvia.
 * FALLBACKS: cada token porta un valor de reserva (colors del sistema, rem): amb ?capes=core o sense system.css el modal no queda transparent ni sense espais.
 * ORDRE DE CÀRREGA: main.css es serveix ABANS de bootstrap.min.css (vegeu <head>): per guanyar-li
 * sense !important cada regla porta com a mínim dues classes (.login-modal + la pròpia).
 * ============================================================================ */
.login-modal .modal-dialog {
  max-width: 26rem;
}
.login-modal .modal-content.login-modal__card {
  position: relative;
  padding: 2rem 2rem 1.5rem;
  background: var(--ia-color-surface, Canvas);
  color: var(--ia-color-text, CanvasText);
  border: 1px solid var(--ia-color-border, ButtonBorder);
  border-radius: var(--ia-radius-l, .75rem);
  box-shadow: var(--ia-shadow-l, 0 .5rem 1.5rem color-mix(in srgb, CanvasText 18%, transparent));
}
.login-modal .login-modal__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: .75rem;           /* àrea de toc 2.75rem (44px) */
  z-index: 2;
}
.login-modal .login-modal__title {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: var(--ia-font-heading, inherit);
}
.login-modal .login-modal__field {
  margin-bottom: 1rem;
}
.login-modal .form-label {
  display: block;
  margin-bottom: .25rem;
}
.login-modal .form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
}
.login-modal .login-modal__control {
  position: relative;
}
.login-modal .login-modal__control .form-control {
  padding-right: 3.25rem;     /* el text no queda sota el botó d'ull */
}
.login-modal .togglepw {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.75rem;             /* àrea de toc >= 44px, de l'alçada exacta del camp */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: var(--ia-color-text-soft, GrayText);
  cursor: pointer;
  border-radius: 0 var(--ia-radius-m, .5rem) var(--ia-radius-m, .5rem) 0;
}
.login-modal .togglepw:hover {
  color: var(--ia-color-text, CanvasText);
}
.login-modal .togglepw:focus-visible {
  outline: 2px solid var(--ia-color-focus-ring, Highlight);
  outline-offset: -2px;       /* dins del camp: l'anell no en sobresurt */
}
.login-modal .togglepw svg {
  width: 1.25rem;
  height: 1.25rem;
}
.login-modal .login-modal__submit {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
}
.login-modal .login-modal__forgot,
.login-modal .login-modal__register {
  margin: 1rem 0 0;
  text-align: center;
  color: var(--ia-color-text-soft, GrayText);
}
.login-modal .login-modal__forgot + .login-modal__register {
  margin-top: .25rem;
}
.login-modal .login-modal__forgot a,
.login-modal .login-modal__register a {
  text-decoration: underline;
}
/* Línies equilibrades: l'enllaç («registrarse», «aquí») no queda sol a la segona línia (cap &nbsp; als diccionaris: val per a totes les llengües) */
.login-modal .login-modal__forgot,
.login-modal .login-modal__register {
  text-wrap: balance;
}
/* HOVER/FOCUS del botó d'enviar: .btn-invert torna al parell BASE (text blanc sobre el color de marca: 1,67:1 amb #a2da03). Al modal i a /login es manté el parell de repòs de .btn-invert
   (--button-*-hover), que Estils defineix com a parell llegible; l'especificitat (6 classes) guanya al :hover de system-twig.css (5) sense !important. */
.login-modal .login-modal__submit.btn.btn-invert:not(.no-style-btn):hover,
.login-modal .login-modal__submit.btn.btn-invert:not(.no-style-btn):focus-visible,
.login-modal .login-modal__submit.btn.btn-invert:not(.no-style-btn).active {
  background: var(--button-bg-color-hover);
  color: var(--button-color-hover);
  border-color: var(--button-border-color-hover);
  /* canvi visible sense tocar el contrast text/fons: vora interior de 2px del color del text */
  box-shadow: inset 0 0 0 .125rem var(--button-color-hover);
}
/* Obrir el modal no mou la pàgina. html{overflow-x:hidden} (custom_override.css:8) fa que el scroll sigui d'html i la barra NO desapareix quan Bootstrap posa overflow:hidden al body; tot i així
   Bootstrap hi suma l'amplada de la barra com a padding-right inline (salt de ~7 px). Com que la barra es queda, no cal compensar-la: s'anul·la aquest padding. NO es toca el contenidor de scroll
   (un html{overflow:hidden} traeria la capçalera sticky i faria perdre el scroll en tancar). L'!important és l'únic que guanya a l'estil inline de Bootstrap.
   overflow:visible: amb html{overflow-x:hidden} el viewport ja pren l'overflow d'html, així que l'overflow:hidden que Bootstrap posa al body NO bloqueja res; només converteix el body en un contenidor
   de scroll, i la capçalera sticky (que és dins el body) deixa d'enganxar-se al viewport (top −800 amb el modal obert). El body torna a no ser un contenidor de scroll. */
body.modal-open {
  padding-right: 0 !important;
  overflow: visible !important;
}
@media (max-width: 640px) {
  .login-modal .modal-content.login-modal__card {
    padding: 1.5rem 1rem 1rem;
  }
  .login-modal .login-modal__title {
    margin-bottom: 1rem;
    padding-inline: 2.75rem;   /* deixa lloc al botó de tancar (només la X) */
  }
}