:root{

    /* ── DESIGN CORE (T13 · BLOC 1 2026-08-25) ──────────────────────────────────────────
       Materialització CANÒNICA dels tokens dc_* del panell (pestanya Design core).
       Abans s'injectaven inline com a <style id="design-core-override"> des de principal.php:
       phplib Template(…,"remove") esborrava el bloc {…} sencer (sense espais i no-JSON), i a més
       _iailayer-base.css els redefinia a :root MÉS AVALL de la cascada. Aquí queden en UNA sola
       materialització, derivada de `properties` per iailayer_style_regenerate_css().

       Semàntica del buit PRESERVADA EXACTAMENT (principal.php feia `if (trim($val)==="") continue;`):
       valor buit → NO s'emet la variable → el consumidor cau al default de main.min.css o al
       fallback del punt de consum. Es compara amb ''|trim, mai per truthiness.
       --bs-primary viu al bloc `html:root` de sota (vegeu-ne el comentari). */
    --bs-dark: #000000;    --ial-c-surface: #FFFFFF;    --ial-c-surface-muted: #F3F3F3;        --ial-c-border: #D9D9D9;    --ial-c-text-3: #6F6F6F;    --ial-c-text-inverse: #FFFFFF;            --container-max-width: 1430px;    --cgv2-content-max: var(--container-max-width);
    /* CONTENT */
    --content-p-font-size: clamp(16px, 15.125px + 0.273vw, 19px);
    --content-p-font-weight: 400;
    --content-heading-color: #000000;
    --content-heading-font-weight: 700;
    --content-p-color: #1A1A1A;
    --content-h1-font-size: clamp(54px, 41.892px + 3.784vw, 96px);
    --content-h2-font-size: clamp(44px, 35.928px + 2.523vw, 72px);
    --content-h3-font-size: clamp(34px, 28.811px + 1.622vw, 52px);
    --content-h4-font-size: clamp(28px, 24.541px + 1.081vw, 40px);
    --content-h5-font-size: clamp(22px, 19.694px + 0.721vw, 30px);
    --content-h6-font-size: clamp(18px, 16.270px + 0.541vw, 24px);
    --content-a-color: #000000;
    --content-a-hover-color: #555555;
    --content-strong-color: #000000;
    --content-p-line-height: 28px;
    --content-heading-line-height: 56px;
    --content-li-line-height: 26px;
    --content-p-letter-spacing: 0;
    --content-heading-letter-spacing: -0.02em;
    --content-li-letter-spacing: 0;


    /* FOOTER */
    --footer-bg-color: #000000;
    --footer-logo-height: 58px;
    --footer-p-font-size: clamp(14px, 13.422px + 0.180vw, 16px);
    --footer-p-font-weight: 400;
    --footer-p-color: #BDBDBD;
    --footer-li-font-size: clamp(14px, 13.422px + 0.180vw, 16px);
    --footer-li-font-weight: 400;
    --footer-li-color: #BDBDBD;
    --footer-a-color: #FFFFFF;
    --footer-a-hover-color: #BDBDBD;

    /* FOOTER BUTTON */
    --footer-button-color: #000000;
    --footer-button-color-hover: #FFFFFF;
    --footer-button-bg-color: #FFFFFF;
    --footer-button-bg-color-hover: #000000;
    --footer-button-border-radius: 0px;
    --footer-button-border-color: #FFFFFF;
    --footer-button-border-color-hover: #FFFFFF;
    --footer-button-font-size: clamp(13px, 12.423px + 0.180vw, 15px);
    --footer-button-padding-left: 26px;
    --footer-button-padding-right: 26px;
    --footer-button-padding-bottom: 13px;
    --footer-button-padding-top: 13px;

    /* HEADER */
    --header-p-color: #000000;
    --header-p-font-size: clamp(14px, 13.423px + 0.180vw, 16px);
    --header-p-font-weight: 400;
    --header-li-color: #000000;
    --header-li-font-size: clamp(14px, 13.423px + 0.180vw, 16px);
    --header-li-font-weight: 600;
    --header-a-color: #000000;
    --header-a-hover-color: #555555;
    --header-menu-font-size: clamp(14px, 13.423px + 0.180vw, 16px);
    --header-menu-color: #000000;
    --header-menu-color-hover: #555555;
    --header-dropdown-color: #000000;
    --header-dropdown-font-size: clamp(14px, 13.423px + 0.180vw, 16px);
    --header-dropdown-bg-color: #FFFFFF;
        
    
    
        --header-navbar-logo-height: 42px;    --header-shrink-navbar-logo-height: 34px;    --header-bg-color: #FFFFFF;    --header-shrink-bg-color: rgba(255,255,255,0.96);    --main-top-spacing: 0;

        --header-height: 84px;
    --header-height-scrolled: 68px;

            --header-transition: 200ms;
    
            --header-scrolled-shadow: none;
    --header-scrolled-border-width: 1px;
    
        --ia-header-h: var(--header-height);

    --header-menu-item-margin-top: 0;
    --header-menu-item-margin-bottom: 0;
    --header-menu-item-margin-left: 16px;
    --header-menu-item-margin-right: 16px;
    --header-menu-item-padding-top: 8px;
    --header-menu-item-padding-bottom: 8px;
    --header-menu-item-padding-left: 0;
    --header-menu-item-padding-right: 0;
    --header-menu-item-font-weight: 600;
    --header-menu-item-letter-spacing: 0.04em;
    --header-menu-item-line-height: 20px;
    --header-menu-item-text-transform: uppercase;

    /* HEADER ACTIVE */
    --header-menu-active-bg-color: #F2F2F2;
    --hv2-active-bg-explicit: #F2F2F2;

    /* HEADER BUTTON */
    --header-button-color: #FFFFFF;
    --header-button-color-hover: #000000;
    --header-button-bg-color: #000000;
    --header-button-bg-color-hover: #FFFFFF;
    --header-button-border-radius: 0px;
    --header-button-border-color: #000000;
    --header-button-border-color-hover: #000000;
    --header-button-font-size: clamp(13px, 12.423px + 0.180vw, 15px);
    --header-button-padding-left: 24px;
    --header-button-padding-right: 24px;
    --header-button-padding-bottom: 12px;
    --header-button-padding-top: 12px;

    /* CONTAINER */
    --container-margin-bottom: 80px;
    --container-margin-top: 80px;
    --container-margin-left: auto;
    --container-margin-right: auto;
    --container-padding-bottom: 0;
    --container-padding-top: 0;
    --container-padding-left: 28px; --page-pad-l: 28px;
    --container-padding-right: 28px; --page-pad-r: 28px;

    /* FULLWIDTH CONTAINER */
    --fullwidth-container-margin-bottom: 80px;
    --fullwidth-container-margin-top: 0;
    --fullwidth-container-margin-left: auto;
    --fullwidth-container-margin-right: auto;
    --fullwidth-container-padding-bottom: 0;
    --fullwidth-container-padding-top: 0;
    --fullwidth-container-padding-left: 0;
    --fullwidth-container-padding-right: 0;

    /* BACKGROUND COLORS */
    --background1-bg-color: #FFFFFF;
    --background1-color: #000000;
    --background2-bg-color: #000000;
    --background2-color: #FFFFFF;
    --background3-bg-color: #F3F3F3;
    --background3-color: #000000;
    --background4-bg-color: #E7E7E7;
    --background4-color: #000000;
    --background5-bg-color: #2A2A2A;
    --background5-color: #FFFFFF;
    --background6-bg-color: #D8D8D8;
    --background6-color: #000000;
    --background7-bg-color: #111111;
    --background7-color: #FFFFFF;
    --background8-bg-color: #FAFAFA;
    --background8-color: #000000;
    --background9-bg-color: #BEBEBE;
    --background9-color: #000000;
    --background10-bg-color: #343434;
    --background10-color: #FFFFFF;

    /* [FONDOS DEGRADADOS 2026-09-24] 6 degradats de fons (Estils › Fondos). El valor ja arriba
       normalitzat per iailayer_style_gradient_normalize() (desat i render). */
    --background-gradient1: linear-gradient(135deg, #d8ff00 0%, #000000 100%);
    --background-gradient1-color: #000000;
    
    --background-gradient2-color: #FFFFFF;
    
    --background-gradient3-color: #000000;
    
    --background-gradient4-color: #FFFFFF;
    
    --background-gradient5-color: #000000;
    
    --background-gradient6-color: #FFFFFF;

    /* BACKGROUND IMAGES */
    --background-image1-bg-image: url( );
    --background-image1-color: #000000;
    --background-image2-bg-image: url( );
    --background-image2-color: #FFFFFF;

    /* [FONDOS CON VÍDEO 2026-09-24] 2 fons amb vídeo (Estils › Fondos). Cap var buida: cada una només
       si té valor. El vídeo i el pòster ja arriben validats (iailayer_style_video_src_normalize() i
       iailayer_style_media_image_path(), al desat i al render). El vídeo va ENTRE COMETES: el motor
       (js/iaLayer_bg_video.js) el llegeix de :root, el torna a validar i el posa a <video src>; CAP
       regla CSS el consumeix com a imatge. --background-videoN-bg-layer és el fons SENSE JS del slot: la
       capa de color (si n'hi ha) damunt del pòster, en una sola var perquè cap consumidor no hagi de compondre
       vars opcionals ni fer servir fallbacks (test_system_css_no_empty_decls.php). */
    
    
    
    --background-video1-color: #FFFFFF;
    --background-video1-overlay-color: rgba(0,0,0,0.35);
    
    
    
    --background-video2-color: #FFFFFF;
    --background-video2-overlay-color: rgba(0,0,0,0.55);

    /* BODY */
    --body-bg-color: #FFFFFF;
    
    --body-bg-size: 0;
    --body-bg-repeat: no-repeat;
    --body-bg-position: center center;
    --body-bg-attachment: scroll;

    /* BUTTON ELEMENTS */
    --button-color: #FFFFFF;
    --button-color-hover: #000000;
    --button-bg-color: #000000;
    --button-bg-color-hover: #FFFFFF;
    --button-font-size: clamp(13px, 12.423px + 0.180vw, 15px);
    --button-border-type: solid;
    --button-border-color: #000000;
    --button-border-color-hover: #000000;
    --button-border-radius: 0px;
    --button-padding-left: 28px;
    --button-padding-right: 28px;
    --button-padding-top: 14px;
    --button-padding-bottom: 14px;
    --button-border-size: 1px;
    --button-font-weight: 600;
    --button-text-transform: uppercase;
    --button-letter-spacing: 0.06em;
    --button-transition: all 0.25s ease;
    --button-shadow: none;
    --button-shadow-hover: none;
    /* [UNITAT 2 · 2026-10-02] Botó SECUNDARI dels mòduls IA (Estils › Botones › «Botón secundario»): només s'emet el que té valor; els tokens
       --ia-button-secondary-* (iailayer_button_secondary_vars) hi apunten i, buits, valen el d'abans. */
    
    
    
    
    
    
    
    

    /* [Interaction Finish Pack · tokens globals d'interacció 2026-09-08 · ítem 2] Alies PURS cap
       a les 5 custom properties de dalt (família de botó BASE, la "per defecte") — NO és una
       segona font de veritat, és el MATEIX valor ja resolt pel contracte de Fase A/B/C, exposat
       amb un nom neutre perquè qualsevol mòdul IA (no només botons) el pugui consumir sense
       conèixer el vocabulari intern de botons. Zero PHP nou, zero camp nou, zero migració: els
       26 camps existents del Finish Pack ja alimenten això.
       Reduced-motion GRATIS: --button-transition es sobreescriu a 'none' sota
       prefers-reduced-motion (vegeu bloc @media més avall) — com que --ia-interaction-transition
       és un var() cap a --button-transition, el navegador resol la cadena en fer-se servir, no en
       declarar-se: qualsevol mòdul que consumeixi --ia-interaction-transition hereta la protecció
       automàticament, sense cap codi addicional.
       Focus: NO calen alies — --ia-color-focus-ring (Fase A) ja és global, es consumeix igual. */
    /* [B2 2026-10-01] Els àlies de hover que ja llegeixen 15 CTA apunten ara al contracte semàntic de botó
       (--ia-button-*, definit al bloc de la paleta --ia-color-*): el hover de Style Options arriba als mòduls. */
    --ia-interaction-bg-hover: var(--ia-button-primary-bg-hover);
    --ia-interaction-text-hover: var(--ia-button-primary-text-hover);
    --ia-interaction-border-hover: var(--ia-button-primary-border-hover);
    --ia-interaction-shadow-hover: var(--button-shadow-hover);
    --ia-interaction-transition: var(--button-transition);

    /* BUTTON VARIANTS */
    --button-v2-bg-color: #FFFFFF;
    --button-v2-bg-color-hover: #000000;
    --button-v2-color: #000000;
    --button-v2-color-hover: #FFFFFF;
    --button-v2-border-size: 1px;
    --button-v2-border-type: solid;
    --button-v2-border-color: #000000;
    --button-v2-border-color-hover: #000000;
    --button-v2-border-radius: 0px;
    --button-v2-padding-top: 14px;
    --button-v2-padding-right: 28px;
    --button-v2-padding-bottom: 14px;
    --button-v2-padding-left: 28px;
    --button-v2-font-size: clamp(13px, 12.423px + 0.180vw, 15px);
    --button-v2-font-weight: 600;
    --button-v2-text-transform: uppercase;
    --button-v2-letter-spacing: 0.06em;
    --button-v2-transition: all 0.25s ease;
    --button-v2-shadow: none;
    --button-v2-shadow-hover: none;

    --button-v3-bg-color: rgba(255,255,255,0);
    --button-v3-bg-color-hover: #F2F2F2;
    --button-v3-color: #000000;
    --button-v3-color-hover: #000000;
    --button-v3-border-size: 1px;
    --button-v3-border-type: solid;
    --button-v3-border-color: #D9D9D9;
    --button-v3-border-color-hover: #000000;
    --button-v3-border-radius: 0px;
    --button-v3-padding-top: 12px;
    --button-v3-padding-right: 22px;
    --button-v3-padding-bottom: 12px;
    --button-v3-padding-left: 22px;
    --button-v3-font-size: clamp(13px, 12.423px + 0.180vw, 15px);
    --button-v3-font-weight: 600;
    --button-v3-text-transform: uppercase;
    --button-v3-letter-spacing: 0.06em;
    --button-v3-transition: all 0.25s ease;
    --button-v3-shadow: none;
    --button-v3-shadow-hover: none;

    --button-v4-bg-color: #D8FF00;
    --button-v4-bg-color-hover: #000000;
    --button-v4-color: #000000;
    --button-v4-color-hover: #FFFFFF;
    --button-v4-border-size: 1px;
    --button-v4-border-type: solid;
    --button-v4-border-color: #D8FF00;
    --button-v4-border-color-hover: #000000;
    --button-v4-border-radius: 0px;
    --button-v4-padding-top: 14px;
    --button-v4-padding-right: 28px;
    --button-v4-padding-bottom: 14px;
    --button-v4-padding-left: 28px;
    --button-v4-font-size: clamp(13px, 12.423px + 0.180vw, 15px);
    --button-v4-font-weight: 600;
    --button-v4-text-transform: uppercase;
    --button-v4-letter-spacing: 0.06em;
    --button-v4-transition: all 0.25s ease;
    --button-v4-shadow: none;
    --button-v4-shadow-hover: none;

    /* BUTTON SIZES */
    --button-sm-font-size: clamp(11px, 10.423px + 0.180vw, 13px);
    --button-sm-padding-top: 10px;
    --button-sm-padding-right: 18px;
    --button-sm-padding-bottom: 10px;
    --button-sm-padding-left: 18px;
    --button-lg-font-size: clamp(15px, 14.423px + 0.180vw, 17px);
    --button-lg-padding-top: 16px;
    --button-lg-padding-right: 34px;
    --button-lg-padding-bottom: 16px;
    --button-lg-padding-left: 34px;

    /* FORM ELEMENTS */
    --form-input-height: 54px;
    --form-textarea-height: 160px;
    --form-input-border-radius: 0px;
        --form-input-border-size: 1px;
    --form-input-border-color: #BDBDBD;
    --form-input-border-type: solid;
    --form-input-bg: #FFFFFF;
    --form-input-font-size: clamp(15px, 14.423px + 0.180vw, 17px);
    --form-input-placeholder-font-size: clamp(15px, 14.423px + 0.180vw, 17px);
    --form-input-color: #000000;
    --form-input-placeholder-color: #777777;
    --form-input-margin-right: 0;
    --form-input-margin-left: 0;
    --form-input-margin-top: 0;
    --form-input-margin-bottom: 18px;
    --form-input-padding-right: 16px;
    --form-input-padding-left: 16px;
    --form-input-padding-top: 12px;
    --form-input-padding-bottom: 12px;
    --form-input-bg-focus: #FFFFFF;
    --form-input-border-color-focus: #000000;
    --form-label-font-size: clamp(14px, 13.423px + 0.180vw, 16px);
    --form-label-color: #000000;

    /* ICONS */
    --icon-font-size: 32px;
    --icon-color: #000000;
        --ial-c-icon: #000000;
    --icon-plus-font-size: clamp(16px, 14.847px + 0.360vw, 20px);

    /* MENU FONT FAMILY */
    --heading-font-family: "barlow-condensed", sans-serif;
    --general-text-font-family: "barlow", sans-serif;
    --menu-font-family: "barlow-condensed", sans-serif;

    /* COLOR PALETTE */
    --main-color-1: #000000;
    --main-color-2: #FFFFFF;
    --main-color-3: #F2F2F2;
    --main-color-4: #D6D6D6;
    --main-color-5: #A7A7A7;
    --main-color-6: #6B6B6B;
    --main-color-7: #343434;
    --main-color-8: #1A1A1A;
    --main-color-9: #D8FF00;
    --main-color-10: #C5E900;

    /* PREDEFINED CLASES */
    --margin-top-xs: 12px;
    --margin-top-s: 24px;
    --margin-top-m: 48px;
    --margin-top-l: 80px;
    --margin-top-xl: 120px;
    --margin-bottom-xs: 12px;
    --margin-bottom-s: 24px;
    --margin-bottom-m: 48px;
    --margin-bottom-l: 80px;
    --margin-bottom-xl: 120px;
    --margin-left-xs: 12px;
    --margin-left-s: 24px;
    --margin-left-m: 48px;
    --margin-left-l: 80px;
    --margin-left-xl: 120px;
    --margin-right-xs: 12px;
    --margin-right-s: 24px;
    --margin-right-m: 48px;
    --margin-right-l: 80px;
    --margin-right-xl: 120px;

    --padding-top-xs: 12px;
    --padding-top-s: 24px;
    --padding-top-m: 48px;
    --padding-top-l: 80px;
    --padding-top-xl: 120px;
    --padding-bottom-xs: 12px;
    --padding-bottom-s: 24px;
    --padding-bottom-m: 48px;
    --padding-bottom-l: 80px;
    --padding-bottom-xl: 120px;
    --padding-left-xs: 12px;
    --padding-left-s: 24px;
    --padding-left-m: 48px;
    --padding-left-l: 80px;
    --padding-left-xl: 120px;
    --padding-right-xs: 12px;
    --padding-right-s: 24px;
    --padding-right-m: 48px;
    --padding-right-l: 80px;
    --padding-right-xl: 120px;
        

    --radius-s: var(--ial-r-sm, 6px);
    --radius-m: var(--ial-r-md, 8px);
    --radius-l: var(--ial-r-lg, 12px);
    --radius-xl: var(--ial-r-xl, 16px);
    --shadow-s: var(--ial-shadow-xs, 0 1px 3px rgba(0,0,0,0.05));
    --shadow-m: var(--ial-shadow-sm, 0 2px 12px rgba(0,0,0,0.07));
    --shadow-l: var(--ial-shadow-md, 0 8px 32px rgba(0,0,0,0.13));
    --border-thin: 1px;
    --border-thick: 3px;
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(255, 255, 255, 0.6);

    
    
    
    
    
    --text-light-font-weight: 200;
    --text-normal-font-weight: 400;
    --text-bold-font-weight: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* POPUPS */
    --popup-max-width: clamp(320px, 204.685px + 36.036vw, 720px);
    --popup-box-shadow: 0 18px 60px rgba(0,0,0,0.18);
    --popup-border-radius: 0px;
    --popup-border-color: #000000;
    --popup-border-size: 1px;
    --popup-border-type: solid;
    --popup-padding-top: 36px;
    --popup-padding-right: 36px;
    --popup-padding-bottom: 36px;
    --popup-padding-left: 36px;
    --popup-bg: #FFFFFF;
    --popup-color: #000000;

    /* ESPACIADOS */

    /* LISTADOS */
    --content-li-color: #1A1A1A;
    --content-li-font-size: clamp(16px, 15.133px + 0.270vw, 19px);
    --content-li-font-weight: 400;
    --content-li-margin-left: 0;
    --content-li-margin-right: 0;
    --content-li-margin-bottom: 10px;
    --content-li-margin-top: 0;
    --content-li-padding-left: 18px;
    --content-li-padding-right: 0;
    --content-li-padding-bottom: 0;
    --content-li-padding-top: 0;

    /* TITULOS */
    --content-title-margin-bottom: 28px;
    /* TEXTOS */
    --content-p-margin-bottom: 20px;
}

/* ── PRIMARY DE BOOTSTRAP [FRONT STYLE FIXES 2026-09-23] ──────────────────────────────────────
   Abans NOMÉS s'emetia amb dc_primary omplert: buit (el cas habitual) → cap --bs-primary propi i
   guanyava el `:root{--bs-primary:#0d6efd}` de themes/irtheme/css/bootstrap.min.css — el primary del
   tema no arribava mai als seus consumidors (:focus-visible i enllaços per defecte de main.css,
   accent del header hv2, bandes cgv2-*).
   Valor: el rol semàntic "primary" — dc_primary si té valor; si no, el primary EFECTIU de la paleta
   (iailayer_theme_palette(): dc_primary ?: main_color_2 ?: #4f46e5, el mateix que --ia-color-primary).
   `html:root` (0,1,1) i no `:root` (0,1,0): el <head> carrega aquest system.css ABANS que
   bootstrap.min.css i, amb la mateixa especificitat, Bootstrap el trepitjaria; avui només guanyava
   perquè el tema torna a carregar system.css més avall (llista de CSS del tema) — dependència
   d'ordre fràgil que així desapareix, sense !important.
   Bootstrap 5.0.2 no fa servir --bs-primary-rgb enlloc, així que no s'emet. */
html:root{
    --bs-primary: #000000;
        --bs-primary-shade-10: color-mix(in srgb, var(--bs-primary) 90%, #000);
    --bs-primary-shade-15: color-mix(in srgb, var(--bs-primary) 85%, #000);
    --bs-primary-shade-20: color-mix(in srgb, var(--bs-primary) 80%, #000);
    --bs-primary-shade-25: color-mix(in srgb, var(--bs-primary) 75%, #000);
    --bs-primary-shade-40: color-mix(in srgb, var(--bs-primary) 60%, #000);
    --bs-primary-tint-50: color-mix(in srgb, var(--bs-primary) 50%, #fff);
    --bs-primary-tint-70: color-mix(in srgb, var(--bs-primary) 30%, #fff);
    --bs-primary-tint-80: color-mix(in srgb, var(--bs-primary) 20%, #fff);
    --bs-primary-tint-90: color-mix(in srgb, var(--bs-primary) 10%, #fff);
    --bs-primary-ring-25: color-mix(in srgb, var(--bs-primary) 25%, transparent);
    --bs-primary-ring-50: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    --bs-primary-btn-ring: color-mix(in srgb, color-mix(in srgb, var(--bs-primary) 85%, #fff) 50%, transparent);
}

/* ── COMPONENTS PRIMARY DE BOOTSTRAP [PRIMARY LINKS & BUTTONS 2026-09-23] ─────────────────────────
   themes/irtheme/css/bootstrap.min.css (5.0.2) escriu #0d6efd i els seus tons LITERALS a cada
   component: redefinir --bs-primary no els canviava. Aquí es remapegen a var(--bs-primary-*).
   Especificitat: el MATEIX selector de Bootstrap amb `html ` davant (+0,0,1) → guanya
   bootstrap.min.css sigui quin sigui l'ordre de càrrega (system.css es carrega abans I després de
   Bootstrap), sense !important. Les úniques excepcions són les utilitats que Bootstrap ja declara
   amb !important (.text-/.bg-/.border-primary): cal !important per igualar-les.
   Botons: `:where(:not(.btn), .no-style-btn, .no-style-btn *)` (especificitat 0) exclou els botons
   PROPIS del tema — `.btn` fora de `.no-style-btn`, pintats per button_bg_color & cia. més amunt
   (`.btn:not(.no-style-btn *):not(.no-style-btn)`). Aquests NO canvien, ni tan sols el seu anell de
   focus: el remapeig només arriba als .btn-* que es pinten amb l'estil de Bootstrap.
   Aquest bloc va ABANS de `header .nav-link` i de la resta de regles de secció (mateixa
   especificitat 0,1,1): dins el mateix fitxer, les de més avall continuen guanyant.
   L'enllaç per defecte (`a`) no és aquí sinó a custom_override.css, al lloc on hi havia el #0461c5.
   `.form-control:focus` només rep l'anell: la vora de focus és de Style Options
   (--form-input-border-color-focus, més avall) i una regla més específica la trepitjaria.
   L'anell genèric `.btn:focus` NO es remapeja (només el de .btn-link, que no en té de propi): amb
   `html` davant passaria per sobre de l'anell propi de .btn-secondary/.btn-success/… (0,2,0).
   No cobert (SVG en data: URI, no admeten var()): la fletxa de .accordion-button oberta i el
   polze de .form-switch amb focus. Tampoc .table-primary (fons propis per fila, no pas primary).
   Només es remapegen els colors que Bootstrap pinta amb el blau primary: el text blanc (#fff) dels
   botons/estats actius ja el posa Bootstrap i no es redeclara, perquè la cascada del text (p. ex.
   `.no-style-btn.btn{color:…}` de custom_override.css) quedi exactament com avui. */
html .btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-primary.disabled:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-primary:disabled:where(:not(.btn), .no-style-btn, .no-style-btn *){ background-color: var(--bs-primary); border-color: var(--bs-primary); }
html .btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):hover{ background-color: var(--bs-primary-shade-15); border-color: var(--bs-primary-shade-20); }
html .btn-check:focus+.btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):focus{ background-color: var(--bs-primary-shade-15); border-color: var(--bs-primary-shade-20); box-shadow: 0 0 0 .25rem var(--bs-primary-btn-ring); }
html .btn-check:active+.btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-check:checked+.btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-primary.active:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):active,
html .show>.btn-primary.dropdown-toggle:where(:not(.btn), .no-style-btn, .no-style-btn *){ background-color: var(--bs-primary-shade-20); border-color: var(--bs-primary-shade-25); }
html .btn-check:active+.btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-check:checked+.btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-primary.active:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):active:focus,
html .show>.btn-primary.dropdown-toggle:where(:not(.btn), .no-style-btn, .no-style-btn *):focus{ box-shadow: 0 0 0 .25rem var(--bs-primary-btn-ring); }

html .btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *){ color: var(--bs-primary); border-color: var(--bs-primary); }
html .btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):hover,
html .btn-check:active+.btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-check:checked+.btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-outline-primary.active:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-outline-primary.dropdown-toggle.show:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):active{ background-color: var(--bs-primary); border-color: var(--bs-primary); }
html .btn-check:focus+.btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-check:active+.btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-check:checked+.btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-outline-primary.active:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-outline-primary.dropdown-toggle.show:where(:not(.btn), .no-style-btn, .no-style-btn *):focus,
html .btn-outline-primary:where(:not(.btn), .no-style-btn, .no-style-btn *):active:focus{ box-shadow: 0 0 0 .25rem var(--bs-primary-ring-50); }
html .btn-outline-primary.disabled:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-outline-primary:disabled:where(:not(.btn), .no-style-btn, .no-style-btn *){ color: var(--bs-primary); background-color: transparent; }

html .btn-link:where(:not(.btn)){ color: var(--bs-primary); }
html .btn-link:where(:not(.btn)):hover{ color: var(--bs-primary-shade-20); }
html .btn-check:focus+.btn-link:where(:not(.btn), .no-style-btn, .no-style-btn *),
html .btn-link:where(:not(.btn), .no-style-btn, .no-style-btn *):focus{ box-shadow: 0 0 0 .25rem var(--bs-primary-ring-25); }

html .link-primary{ color: var(--bs-primary); }
html .link-primary:focus,
html .link-primary:hover{ color: var(--bs-primary-shade-20); }
html .text-primary{ color: var(--bs-primary) !important; }
html .bg-primary{ background-color: var(--bs-primary) !important; }
html .border-primary{ border-color: var(--bs-primary) !important; }

html .nav-link:not(:where(.menu *)){ color: var(--bs-primary); }
html .nav-link:not(:where(.menu *)):focus,
html .nav-link:not(:where(.menu *)):hover{ color: var(--bs-primary-shade-20); }
html .nav-pills .nav-link.active,
html .nav-pills .show>.nav-link{ background-color: var(--bs-primary); }
html .dropdown-item.active:not(:where(.menu *)),
html .dropdown-item:active:not(:where(.menu *)),
html .dropdown-menu-dark .dropdown-item.active:not(:where(.menu *)),
html .dropdown-menu-dark .dropdown-item:active:not(:where(.menu *)){ background-color: var(--bs-primary); }

html .page-link{ color: var(--bs-primary); }
html .page-link:hover{ color: var(--bs-primary-shade-20); }
html .page-link:focus{ color: var(--bs-primary-shade-20); box-shadow: 0 0 0 .25rem var(--bs-primary-ring-25); }
html .page-item.active .page-link{ background-color: var(--bs-primary); border-color: var(--bs-primary); }

html .form-control:focus{ box-shadow: 0 0 0 .25rem var(--bs-primary-ring-25); }
html .form-select:focus,
html .form-check-input:focus{ border-color: var(--bs-primary-tint-50); box-shadow: 0 0 0 .25rem var(--bs-primary-ring-25); }
html .form-check-input:checked,
html .form-check-input[type=checkbox]:indeterminate{ background-color: var(--bs-primary); border-color: var(--bs-primary); }
html .form-range:focus::-webkit-slider-thumb{ box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--bs-primary-ring-25); }
html .form-range:focus::-moz-range-thumb{ box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--bs-primary-ring-25); }
html .form-range::-webkit-slider-thumb{ background-color: var(--bs-primary); }
html .form-range::-moz-range-thumb{ background-color: var(--bs-primary); }
html .form-range::-webkit-slider-thumb:active{ background-color: var(--bs-primary-tint-70); }
html .form-range::-moz-range-thumb:active{ background-color: var(--bs-primary-tint-70); }

html .accordion-button:not(.collapsed){ color: var(--bs-primary-shade-10); background-color: var(--bs-primary-tint-90); }
html .accordion-button:focus{ border-color: var(--bs-primary-tint-50); box-shadow: 0 0 0 .25rem var(--bs-primary-ring-25); }
html .btn-close:focus{ box-shadow: 0 0 0 .25rem var(--bs-primary-ring-25); }

html .progress-bar{ background-color: var(--bs-primary); }
html .list-group-item.active{ background-color: var(--bs-primary); border-color: var(--bs-primary); }
html .alert-primary{ color: var(--bs-primary-shade-40); background-color: var(--bs-primary-tint-80); border-color: var(--bs-primary-tint-70); }
html .list-group-item-primary{ color: var(--bs-primary-shade-40); background-color: var(--bs-primary-tint-80); }
html .list-group-item-primary.list-group-item-action:focus,
html .list-group-item-primary.list-group-item-action:hover{ color: var(--bs-primary-shade-40); background-color: color-mix(in srgb, var(--bs-primary-tint-80) 90%, #000); }
html .list-group-item-primary.list-group-item-action.active{ background-color: var(--bs-primary-shade-40); border-color: var(--bs-primary-shade-40); }

/* ICONOS */
.icon{color: var(--icon-color); font-size: var(--icon-font-size);}

/* CONTENEDORES */
main > div {padding-top: var(--main-top-spacing);}
main .container{ margin-top: var(--container-margin-top); margin-bottom: var(--container-margin-bottom); margin-left: var(--container-margin-left); margin-right: var(--container-margin-right); padding-top: var(--container-padding-top); padding-bottom: var(--container-padding-bottom); padding-left: var(--page-pad-l); padding-right: var(--page-pad-r); }
footer#footer > .container{ padding-left: var(--page-pad-l); padding-right: var(--page-pad-r); }

.lock-container, .container, .container-lg, .container-md, .container-sm, .container-xl{max-width: var(--container-max-width);}

/* CONTENEDORES ANCHO ENTERO */
main .fullwidth{ margin-top: var(--fullwidth-container-margin-top); margin-bottom: var(--fullwidth-container-margin-bottom); margin-left: var(--fullwidth-container-margin-left); margin-right: var(--fullwidth-container-margin-right); padding-top: var(--fullwidth-container-padding-top); padding-bottom: var(--fullwidth-container-padding-bottom); padding-left: var(--fullwidth-container-padding-left); padding-right: var(--fullwidth-container-padding-right); }

/* ELEMENTOS */
/* [Interaction Finish Pack · Fase A 2026-09-08] :focus-visible reutilitza EXACTAMENT
   els mateixos custom properties de :hover (mai var() nous) + outline amb --ia-color-primary
   (contrast verificat: >=3:1 contra bg-hover i contra el fons de pàgina a la paleta real).
   :active ja comparteix selector amb :hover a tot aquest fitxer -- cap canvi addicional. */
/* BOTON */
.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-bg-color); color: var(--button-color); font-size: var(--button-font-size); border: var(--button-border-size) var(--button-border-type) var(--button-border-color); box-shadow: var(--button-shadow); transition: var(--button-transition); }
.btn:not(.no-style-btn *):not(.no-style-btn){ border-radius: var(--button-border-radius); }.btn:not(.no-style-btn *):not(.no-style-btn){ padding-top: var(--button-padding-top); }.btn:not(.no-style-btn *):not(.no-style-btn){ padding-bottom: var(--button-padding-bottom); }.btn:not(.no-style-btn *):not(.no-style-btn){ padding-left: var(--button-padding-left); }.btn:not(.no-style-btn *):not(.no-style-btn){ padding-right: var(--button-padding-right); }.btn:not(.no-style-btn *):not(.no-style-btn){ font-weight: var(--button-font-weight); }.btn:not(.no-style-btn *):not(.no-style-btn){ text-transform: var(--button-text-transform); }.btn:not(.no-style-btn *):not(.no-style-btn){ letter-spacing: var(--button-letter-spacing); }.btn:not(.no-style-btn *):not(.no-style-btn).active,
.btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--button-bg-color-hover); color: var(--button-color-hover); border-color: var(--button-border-color-hover); box-shadow: var(--button-shadow-hover); }
.btn:not(.no-style-btn *):not(.no-style-btn):focus-visible{ background: var(--button-bg-color-hover); color: var(--button-color-hover); border-color: var(--button-border-color-hover); box-shadow: var(--button-shadow-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
.btn-invert .btn:not(.no-style-btn *):not(.no-style-btn),
.btn-invert.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-bg-color-hover); color: var(--button-color-hover); font-size: var(--button-font-size); border-radius: var(--button-border-radius); border: var(--button-border-size) var(--button-border-type) var(--button-border-color-hover); padding-top: var(--button-padding-top); padding-bottom: var(--button-padding-bottom); padding-left: var(--button-padding-left); padding-right: var(--button-padding-right);}
.btn-invert .btn:not(.no-style-btn *):not(.no-style-btn).active,
.btn-invert.btn:not(.no-style-btn *):not(.no-style-btn).active,
.btn-invert .btn:not(.no-style-btn *):not(.no-style-btn):hover,
.btn-invert.btn:not(.no-style-btn *):not(.no-style-btn):hover{  border-color: var(--button-border-color);  background: var(--button-bg-color); color: var(--button-color); }

/* BUTTON VARIANTS */
.btn-variant-1:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-bg-color); color: var(--button-color); font-size: var(--button-font-size); font-weight: var(--button-font-weight); text-transform: var(--button-text-transform); letter-spacing: var(--button-letter-spacing); border-radius: var(--button-border-radius); border: var(--button-border-size) var(--button-border-type) var(--button-border-color); padding-top: var(--button-padding-top); padding-bottom: var(--button-padding-bottom); padding-left: var(--button-padding-left); padding-right: var(--button-padding-right); box-shadow: var(--button-shadow); transition: var(--button-transition); }
.btn-variant-1:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-1:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-bg-color-hover); color: var(--button-color-hover); border-color: var(--button-border-color-hover); box-shadow: var(--button-shadow-hover); }
.btn-variant-1:not(.no-style-btn *):not(.no-style-btn):focus-visible{ background: var(--button-bg-color-hover); color: var(--button-color-hover); border-color: var(--button-border-color-hover); box-shadow: var(--button-shadow-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
.btn-variant-2:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-v2-bg-color); color: var(--button-v2-color); font-size: var(--button-v2-font-size); font-weight: var(--button-v2-font-weight); text-transform: var(--button-v2-text-transform); letter-spacing: var(--button-v2-letter-spacing); border-radius: var(--button-v2-border-radius); border: var(--button-v2-border-size) var(--button-v2-border-type) var(--button-v2-border-color); padding-top: var(--button-v2-padding-top); padding-bottom: var(--button-v2-padding-bottom); padding-left: var(--button-v2-padding-left); padding-right: var(--button-v2-padding-right); box-shadow: var(--button-v2-shadow); transition: var(--button-v2-transition); }
.btn-variant-2:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-2:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-v2-bg-color-hover); color: var(--button-v2-color-hover); border-color: var(--button-v2-border-color-hover); box-shadow: var(--button-v2-shadow-hover); }
.btn-variant-2:not(.no-style-btn *):not(.no-style-btn):focus-visible{ background: var(--button-v2-bg-color-hover); color: var(--button-v2-color-hover); border-color: var(--button-v2-border-color-hover); box-shadow: var(--button-v2-shadow-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
.btn-variant-3:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-v3-bg-color); color: var(--button-v3-color); font-size: var(--button-v3-font-size); font-weight: var(--button-v3-font-weight); text-transform: var(--button-v3-text-transform); letter-spacing: var(--button-v3-letter-spacing); border-radius: var(--button-v3-border-radius); border: var(--button-v3-border-size) var(--button-v3-border-type) var(--button-v3-border-color); padding-top: var(--button-v3-padding-top); padding-bottom: var(--button-v3-padding-bottom); padding-left: var(--button-v3-padding-left); padding-right: var(--button-v3-padding-right); box-shadow: var(--button-v3-shadow); transition: var(--button-v3-transition); }
.btn-variant-3:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-3:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-v3-bg-color-hover); color: var(--button-v3-color-hover); border-color: var(--button-v3-border-color-hover); box-shadow: var(--button-v3-shadow-hover); }
.btn-variant-3:not(.no-style-btn *):not(.no-style-btn):focus-visible{ background: var(--button-v3-bg-color-hover); color: var(--button-v3-color-hover); border-color: var(--button-v3-border-color-hover); box-shadow: var(--button-v3-shadow-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
.btn-variant-4:not(.no-style-btn *):not(.no-style-btn){ background: var(--button-v4-bg-color); color: var(--button-v4-color); font-size: var(--button-v4-font-size); font-weight: var(--button-v4-font-weight); text-transform: var(--button-v4-text-transform); letter-spacing: var(--button-v4-letter-spacing); border-radius: var(--button-v4-border-radius); border: var(--button-v4-border-size) var(--button-v4-border-type) var(--button-v4-border-color); padding-top: var(--button-v4-padding-top); padding-bottom: var(--button-v4-padding-bottom); padding-left: var(--button-v4-padding-left); padding-right: var(--button-v4-padding-right); box-shadow: var(--button-v4-shadow); transition: var(--button-v4-transition); }
.btn-variant-4:not(.no-style-btn *):not(.no-style-btn):hover,.btn-variant-4:not(.no-style-btn *):not(.no-style-btn).active{ background: var(--button-v4-bg-color-hover); color: var(--button-v4-color-hover); border-color: var(--button-v4-border-color-hover); box-shadow: var(--button-v4-shadow-hover); }
.btn-variant-4:not(.no-style-btn *):not(.no-style-btn):focus-visible{ background: var(--button-v4-bg-color-hover); color: var(--button-v4-color-hover); border-color: var(--button-v4-border-color-hover); box-shadow: var(--button-v4-shadow-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
/* BUTTON SIZES */
.btn.btn-sm:not(.no-style-btn *):not(.no-style-btn){ font-size: var(--button-sm-font-size); }.btn.btn-sm:not(.no-style-btn *):not(.no-style-btn){ padding-top: var(--button-sm-padding-top); }.btn.btn-sm:not(.no-style-btn *):not(.no-style-btn){ padding-bottom: var(--button-sm-padding-bottom); }.btn.btn-sm:not(.no-style-btn *):not(.no-style-btn){ padding-left: var(--button-sm-padding-left); }.btn.btn-sm:not(.no-style-btn *):not(.no-style-btn){ padding-right: var(--button-sm-padding-right); }.btn.btn-lg:not(.no-style-btn *):not(.no-style-btn){ font-size: var(--button-lg-font-size); }.btn.btn-lg:not(.no-style-btn *):not(.no-style-btn){ padding-top: var(--button-lg-padding-top); }.btn.btn-lg:not(.no-style-btn *):not(.no-style-btn){ padding-bottom: var(--button-lg-padding-bottom); }.btn.btn-lg:not(.no-style-btn *):not(.no-style-btn){ padding-left: var(--button-lg-padding-left); }.btn.btn-lg:not(.no-style-btn *):not(.no-style-btn){ padding-right: var(--button-lg-padding-right); }/* BUTTON WIDTH */
.btn-fluid:not(.no-style-btn *):not(.no-style-btn){ width: 100%; }

/* FORMULARIOS */
.form-control{ height: var(--form-input-height); }.form-control{ border-radius: var(--form-input-border-radius); }.form-control{ border-width: var(--form-input-border-size); border-style: var(--form-input-border-type); border-color: var(--form-input-border-color); }.form-control{ background: var(--form-input-bg); }.form-control{ color: var(--form-input-color); }.form-control{ font-size: var(--form-input-font-size); }.form-control{ margin-top: var(--form-input-margin-top); }.form-control{ margin-bottom: var(--form-input-margin-bottom); }.form-control{ margin-left: var(--form-input-margin-left); }.form-control{ margin-right: var(--form-input-margin-right); }.form-control{ padding-top: var(--form-input-padding-top); }.form-control{ padding-bottom: var(--form-input-padding-bottom); }.form-control{ padding-left: var(--form-input-padding-left); }.form-control:not(:where(.buscador-list-item *)){ padding-right: var(--form-input-padding-right); }
.form-control::placeholder{ color: var(--form-input-placeholder-color); font-size: var(--form-input-placeholder-font-size);}
.form-control:focus{ background: var(--form-input-bg-focus); border-color: var(--form-input-border-color-focus); }
label:not(.no-style-btn *):not(.form-check-label){ color: var(--form-label-color); font-size: var(--form-label-font-size); }

textarea.form-control{ height: var(--form-textarea-height); }
/* HEADER */
header p{font-size: var(--header-p-font-size); color: var(--header-p-color); font-weight: var(--header-p-font-weight);}

header li p,
header li{font-size: var(--header-li-font-size); color: var(--header-li-color); font-weight: var(--header-li-font-weight);}

header a{color: var(--header-a-color);}
header a:hover{ color: var(--header-a-hover-color);}
header a:focus-visible{ color: var(--header-a-hover-color); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }

header .btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--header-button-bg-color); color: var(--header-button-color); font-size: var(--header-button-font-size); border-radius: var(--header-button-border-radius); padding-top: var(--header-button-padding-top); padding-bottom: var(--header-button-padding-bottom); padding-left: var(--header-button-padding-left); padding-right: var(--header-button-padding-right);  border-color: var(--header-button-border-color);}
header .btn:not(.no-style-btn *):not(.no-style-btn).active,
header .btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--header-button-bg-color-hover); color: var(--header-button-color-hover); border-color: var(--header-button-border-color-hover); }
header .btn:not(.no-style-btn *):not(.no-style-btn):focus-visible{ background: var(--header-button-bg-color-hover); color: var(--header-button-color-hover); border-color: var(--header-button-border-color-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
header .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn),
header .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--header-button-bg-color-hover); color: var(--header-button-color-hover); font-size: var(--header-button-font-size); border-radius: var(--header-button-border-radius); padding-top: var(--header-button-padding-top); padding-bottom: var(--header-button-padding-bottom); padding-left: var(--header-button-padding-left); padding-right: var(--header-button-padding-right);  border-color: var(--header-button-border-color-hover);}
header .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn).active,
header .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn).active,
header .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn):hover,
header .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--header-button-bg-color); color: var(--header-button-color); border-color: var(--header-button-border-color); }

/* [HEADER V1 2026-09-23] Retirades les regles de `.navbar-brand` i `.cbp-af-header*`: aquell
   marcatge ja no existeix (principal.html + menuheader_v2.html). --header-bg-color,
   --header-shrink-bg-color i les dues alçades de logo continuen generant-se a dalt i ara les
   consumeix de veritat la capçalera hv2 (themes/irtheme/css/main.css). */

header .dropdown-menu{background: var(--header-dropdown-bg-color); color: var(--header-dropdown-color); font-size: var(--header-dropdown-font-size);}
header .dropdown-menu *{color: var(--header-dropdown-color); font-size: var(--header-dropdown-font-size);}

header .nav-item {
    margin-top: var(--header-menu-item-margin-top);
    margin-bottom: var(--header-menu-item-margin-bottom);
    margin-left: var(--header-menu-item-margin-left);
    margin-right: var(--header-menu-item-margin-right);
    padding-top: var(--header-menu-item-padding-top);
    padding-bottom: var(--header-menu-item-padding-bottom);
    padding-left: var(--header-menu-item-padding-left);
    padding-right: var(--header-menu-item-padding-right);
    font-weight: var(--header-menu-item-font-weight);
    letter-spacing: var(--header-menu-item-letter-spacing);
    line-height: var(--header-menu-item-line-height);
    text-transform: var(--header-menu-item-text-transform);
}
header .nav-item:hover {color: var(--header-menu-color-hover);}

header .nav-link {color: var(--header-menu-color); font-size: var(--header-menu-font-size); font-family: var(--menu-font-family);}
header .nav-link.active, 
header .nav-link:hover {color: var(--header-menu-color-hover);}
header .nav-link:focus-visible {color: var(--header-menu-color-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px;}

header .nav-link:not(.dropdown-item):hover::before,
header .nav-link.active:not(.dropdown-item)::before { background-color: var(--header-menu-active-bg-color); }

/* [IRIDIAN AI LAYER 2026-06-11] MENU v2 (.hv2-*): el header gaia_v2 usa el markup
   nou .hv2-header/.hv2-link/.hv2-dropdown (no .nav-link). Apliquem la config del
   menú (style_options) als selectors nous. Additiu — es mantenen els .nav-* per al
   header antic (child_gaia). NOMÉS tipografia/color/dropdown: s'ometen logo-height
   i marges/paddings d'ítem perquè el layout flex del v2 els gestiona (els trencarien). */
header .hv2-link {
    color: var(--header-menu-color);
    font-size: var(--header-menu-font-size);
    font-family: var(--menu-font-family);
    font-weight: var(--header-menu-item-font-weight);
    letter-spacing: var(--header-menu-item-letter-spacing);
    text-transform: var(--header-menu-item-text-transform);
    line-height: var(--header-menu-item-line-height, 1);
}
header .hv2-link.is-active,
header .hv2-link:hover { color: var(--header-menu-color-hover); }
header .hv2-link:focus-visible { color: var(--header-menu-color-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
header .hv2-dropdown { background: var(--hv2-surface); }
header .hv2-dropdown-link { color: var(--header-dropdown-color); font-size: var(--header-dropdown-font-size); }

/* CONTENT */

.title, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--content-heading-color); font-family: var(--heading-font-family); font-weight: var(--content-heading-font-weight); margin-bottom: var(--content-title-margin-bottom); line-height: var(--content-heading-line-height); letter-spacing: var(--content-heading-letter-spacing); }
h1, .h1{ font-size: var(--content-h1-font-size); }
h2, .h2{ font-size: var(--content-h2-font-size); }
h3, .h3{ font-size: var(--content-h3-font-size); }
h4, .h4{ font-size: var(--content-h4-font-size); }
h5, .h5{ font-size: var(--content-h5-font-size); }
h6, .h6{ font-size: var(--content-h6-font-size); }

body { font-size: var(--content-p-font-size); font-family: var(--general-text-font-family); color: var(--content-p-color); line-height: var(--content-p-line-height); letter-spacing: var(--content-p-letter-spacing); background-color: var(--body-bg-color); background-image: var(--body-bg-image); background-size: var(--body-bg-size); background-repeat: var(--body-bg-repeat); background-position: var(--body-bg-position); background-attachment: var(--body-bg-attachment);}
.p, main p{font-size: var(--content-p-font-size); color: var(--content-p-color); font-family: var(--general-text-font-family); font-weight: var(--content-p-font-weight); margin-bottom: var(--content-p-margin-bottom); line-height: var(--content-p-line-height); letter-spacing: var(--content-p-letter-spacing);}

main a{ color: var(--content-a-color);}
main a:hover{ color: var(--content-a-hover-color);}
main a:focus-visible{ color: var(--content-a-hover-color); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }

main li,
main li p{color: var(--content-li-color); font-size: var(--content-li-font-size); font-weight: var(--content-li-font-weight); margin-top: var(--content-li-margin-top); margin-bottom: var(--content-li-margin-bottom); margin-left: var(--content-li-margin-left); margin-right: var(--content-li-margin-right); padding-top: var(--content-li-padding-top); padding-bottom: var(--content-li-padding-bottom); padding-left: var(--content-li-padding-left); padding-right: var(--content-li-padding-right);  line-height: var(--content-li-line-height); letter-spacing: var(--content-li-letter-spacing); }

strong{color: var(--content-strong-color);}

/* FOOTER */
footer{background: var(--footer-bg-color);}
footer#footer{padding-top: var(--footer-padding-top); padding-bottom: var(--footer-padding-bottom);}

footer .footer-logo img,
footer:not(:has(.footer-logo)) > :first-child .bloque:first-child [role="figure"]:first-child img{height: var(--footer-logo-height); width: auto; max-width: 100%;}

footer, footer p{font-size: var(--footer-p-font-size); color: var(--footer-p-color); font-weight: var(--footer-p-font-weight);}

footer a{ color: var(--footer-a-color); text-decoration: var(--footer-a-decoration);}
footer a:hover{ color: var(--footer-a-hover-color); text-decoration: var(--footer-a-decoration-hover);}
footer a:focus-visible{ color: var(--footer-a-hover-color); text-decoration: var(--footer-a-decoration-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }

footer li p,
footer li{color: var(--footer-li-color); font-size: var(--footer-li-font-size); font-weight: var(--footer-li-font-weight);}

footer .btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--footer-button-bg-color); color: var(--footer-button-color); font-size: var(--footer-button-font-size); border-radius: var(--footer-button-border-radius); padding-top: var(--footer-button-padding-top); padding-bottom: var(--footer-button-padding-bottom); padding-left: var(--footer-button-padding-left); padding-right: var(--footer-button-padding-right); border-color: var(--footer-button-border-color);}
footer .btn:not(.no-style-btn *):not(.no-style-btn).active,
footer .btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--footer-button-bg-color-hover); color: var(--footer-button-color-hover); border-color: var(--footer-button-border-color-hover); }
footer .btn:not(.no-style-btn *):not(.no-style-btn):focus-visible{ background: var(--footer-button-bg-color-hover); color: var(--footer-button-color-hover); border-color: var(--footer-button-border-color-hover); outline: 2px solid var(--ia-color-focus-ring); outline-offset: 2px; }
footer .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn),
footer .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn){ background: var(--footer-button-bg-color-hover); color: var(--footer-button-color-hover); font-size: var(--footer-button-font-size); border-radius: var(--footer-button-border-radius); padding-top: var(--footer-button-padding-top); padding-bottom: var(--footer-button-padding-bottom); padding-left: var(--footer-button-padding-left); padding-right: var(--footer-button-padding-right); border-color: var(--footer-button-border-color-hover);}
footer .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn).active,
footer .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn).active,
footer .btn-invert .btn:not(.no-style-btn *):not(.no-style-btn):hover,
footer .btn-invert.btn:not(.no-style-btn *):not(.no-style-btn):hover{ background: var(--footer-button-bg-color); color: var(--footer-button-color); border-color: var(--footer-button-border-color); }

body .mt-xl.mt-xl { margin-top: var(--margin-top-xl); }
body .mt-l.mt-l { margin-top: var(--margin-top-l); }
body .mt-m.mt-m { margin-top: var(--margin-top-m); }
body .mt-s.mt-s { margin-top: var(--margin-top-s); }
body .mt-xs.mt-xs { margin-top: var(--margin-top-xs); }

body .mb-xl.mb-xl { margin-bottom: var(--margin-bottom-xl); }
body .mb-l.mb-l { margin-bottom: var(--margin-bottom-l); }
body .mb-m.mb-m { margin-bottom: var(--margin-bottom-m); }
body .mb-s.mb-s { margin-bottom: var(--margin-bottom-s); }
body .mb-xs.mb-xs { margin-bottom: var(--margin-bottom-xs); }

body .mr-xl.mr-xl { margin-right: var(--margin-right-xl); }
body .mr-l.mr-l { margin-right: var(--margin-right-l); }
body .mr-m.mr-m { margin-right: var(--margin-right-m); }
body .mr-s.mr-s { margin-right: var(--margin-right-s); }
body .mr-xs.mr-xs { margin-right: var(--margin-right-xs); }

body .ml-xl.ml-xl { margin-left: var(--margin-left-xl); }
body .ml-l.ml-l { margin-left: var(--margin-left-l); }
body .ml-m.ml-m { margin-left: var(--margin-left-m); }
body .ml-s.ml-s { margin-left: var(--margin-left-s); }
body .ml-xs.ml-xs { margin-left: var(--margin-left-xs); }

body .pt-xl.pt-xl { padding-top: var(--padding-top-xl); }
body .pt-l.pt-l { padding-top: var(--padding-top-l); }
body .pt-m.pt-m { padding-top: var(--padding-top-m); }
body .pt-s.pt-s { padding-top: var(--padding-top-s); }
body .pt-xs.pt-xs { padding-top: var(--padding-top-xs); }

body .pb-xl.pb-xl { padding-bottom: var(--padding-bottom-xl); }
body .pb-l.pb-l { padding-bottom: var(--padding-bottom-l); }
body .pb-m.pb-m { padding-bottom: var(--padding-bottom-m); }
body .pb-s.pb-s { padding-bottom: var(--padding-bottom-s); }
body .pb-xs.pb-xs { padding-bottom: var(--padding-bottom-xs); }

body .pr-xl.pr-xl { padding-right: var(--padding-right-xl); }
body .pr-l.pr-l { padding-right: var(--padding-right-l); }
body .pr-m.pr-m { padding-right: var(--padding-right-m); }
body .pr-s.pr-s { padding-right: var(--padding-right-s); }
body .pr-xs.pr-xs { padding-right: var(--padding-right-xs); }

body .pl-xl.pl-xl { padding-left: var(--padding-left-xl); }
body .pl-l.pl-l { padding-left: var(--padding-left-l); }
body .pl-m.pl-m { padding-left: var(--padding-left-m); }
body .pl-s.pl-s { padding-left: var(--padding-left-s); }
body .pl-xs.pl-xs { padding-left: var(--padding-left-xs); }

/* [U1.3 · TEXT 2026-09-30] Interlineat de l'escala d'Estils (classes noves, sense !important). */
.lh-tight { line-height: var(--ia-line-height-tight); }
.lh-normal { line-height: var(--ia-line-height-normal); }
.lh-relaxed { line-height: var(--ia-line-height-relaxed); }

@media only screen and (max-width: 991px){
    body .tablet-mt-xl.tablet-mt-xl { margin-top: var(--margin-top-xl); }
    body .tablet-mt-l.tablet-mt-l { margin-top: var(--margin-top-l); }
    body .tablet-mt-m.tablet-mt-m { margin-top: var(--margin-top-m); }
    body .tablet-mt-s.tablet-mt-s { margin-top: var(--margin-top-s); }
    body .tablet-mt-xs.tablet-mt-xs { margin-top: var(--margin-top-xs); }
    body .tablet-mt-0.tablet-mt-0 { margin-top: 0; }

    body .tablet-mb-xl.tablet-mb-xl { margin-bottom: var(--margin-bottom-xl); }
    body .tablet-mb-l.tablet-mb-l { margin-bottom: var(--margin-bottom-l); }
    body .tablet-mb-m.tablet-mb-m { margin-bottom: var(--margin-bottom-m); }
    body .tablet-mb-s.tablet-mb-s { margin-bottom: var(--margin-bottom-s); }
    body .tablet-mb-xs.tablet-mb-xs { margin-bottom: var(--margin-bottom-xs); }
    body .tablet-mb-0.tablet-mb-0 { margin-bottom: 0; }

    body .tablet-mr-xl.tablet-mr-xl { margin-right: var(--margin-right-xl); }
    body .tablet-mr-l.tablet-mr-l { margin-right: var(--margin-right-l); }
    body .tablet-mr-m.tablet-mr-m { margin-right: var(--margin-right-m); }
    body .tablet-mr-s.tablet-mr-s { margin-right: var(--margin-right-s); }
    body .tablet-mr-xs.tablet-mr-xs { margin-right: var(--margin-right-xs); }
    body .tablet-mr-0.tablet-mr-0 { margin-right: 0; }

    body .tablet-ml-xl.tablet-ml-xl { margin-left: var(--margin-left-xl); }
    body .tablet-ml-l.tablet-ml-l { margin-left: var(--margin-left-l); }
    body .tablet-ml-m.tablet-ml-m { margin-left: var(--margin-left-m); }
    body .tablet-ml-s.tablet-ml-s { margin-left: var(--margin-left-s); }
    body .tablet-ml-xs.tablet-ml-xs { margin-left: var(--margin-left-xs); }
    body .tablet-ml-0.tablet-ml-0 { margin-left: 0; }

    body .tablet-pt-xl.tablet-pt-xl { padding-top: var(--padding-top-xl); }
    body .tablet-pt-l.tablet-pt-l { padding-top: var(--padding-top-l); }
    body .tablet-pt-m.tablet-pt-m { padding-top: var(--padding-top-m); }
    body .tablet-pt-s.tablet-pt-s { padding-top: var(--padding-top-s); }
    body .tablet-pt-xs.tablet-pt-xs { padding-top: var(--padding-top-xs); }
    body .tablet-pt-0.tablet-pt-0 { padding-top: 0; }

    body .tablet-pb-xl.tablet-pb-xl { padding-bottom: var(--padding-bottom-xl); }
    body .tablet-pb-l.tablet-pb-l { padding-bottom: var(--padding-bottom-l); }
    body .tablet-pb-m.tablet-pb-m { padding-bottom: var(--padding-bottom-m); }
    body .tablet-pb-s.tablet-pb-s { padding-bottom: var(--padding-bottom-s); }
    body .tablet-pb-xs.tablet-pb-xs { padding-bottom: var(--padding-bottom-xs); }
    body .tablet-pb-0.tablet-pb-0 { padding-bottom: 0; }

    body .tablet-pr-xl.tablet-pr-xl { padding-right: var(--padding-right-xl); }
    body .tablet-pr-l.tablet-pr-l { padding-right: var(--padding-right-l); }
    body .tablet-pr-m.tablet-pr-m { padding-right: var(--padding-right-m); }
    body .tablet-pr-s.tablet-pr-s { padding-right: var(--padding-right-s); }
    body .tablet-pr-xs.tablet-pr-xs { padding-right: var(--padding-right-xs); }
    body .tablet-pr-0.tablet-pr-0 { padding-right: 0; }

    body .tablet-pl-xl.tablet-pl-xl { padding-left: var(--padding-left-xl); }
    body .tablet-pl-l.tablet-pl-l { padding-left: var(--padding-left-l); }
    body .tablet-pl-m.tablet-pl-m { padding-left: var(--padding-left-m); }
    body .tablet-pl-s.tablet-pl-s { padding-left: var(--padding-left-s); }
    body .tablet-pl-xs.tablet-pl-xs { padding-left: var(--padding-left-xs); }
    body .tablet-pl-0.tablet-pl-0 { padding-left: 0; }
}
@media only screen and (max-width: 576px){
    body .mobile-mt-xl.mobile-mt-xl { margin-top: var(--margin-top-xl); }
    body .mobile-mt-l.mobile-mt-l { margin-top: var(--margin-top-l); }
    body .mobile-mt-m.mobile-mt-m { margin-top: var(--margin-top-m); }
    body .mobile-mt-s.mobile-mt-s { margin-top: var(--margin-top-s); }
    body .mobile-mt-xs.mobile-mt-xs { margin-top: var(--margin-top-xs); }
    body .mobile-mt-0.mobile-mt-0 { margin-top: 0; }

    body .mobile-mb-xl.mobile-mb-xl { margin-bottom: var(--margin-bottom-xl); }
    body .mobile-mb-l.mobile-mb-l { margin-bottom: var(--margin-bottom-l); }
    body .mobile-mb-m.mobile-mb-m { margin-bottom: var(--margin-bottom-m); }
    body .mobile-mb-s.mobile-mb-s { margin-bottom: var(--margin-bottom-s); }
    body .mobile-mb-xs.mobile-mb-xs { margin-bottom: var(--margin-bottom-xs); }
    body .mobile-mb-0.mobile-mb-0 { margin-bottom: 0; }

    body .mobile-mr-xl.mobile-mr-xl { margin-right: var(--margin-right-xl); }
    body .mobile-mr-l.mobile-mr-l { margin-right: var(--margin-right-l); }
    body .mobile-mr-m.mobile-mr-m { margin-right: var(--margin-right-m); }
    body .mobile-mr-s.mobile-mr-s { margin-right: var(--margin-right-s); }
    body .mobile-mr-xs.mobile-mr-xs { margin-right: var(--margin-right-xs); }
    body .mobile-mr-0.mobile-mr-0 { margin-right: 0; }

    body .mobile-ml-xl.mobile-ml-xl { margin-left: var(--margin-left-xl); }
    body .mobile-ml-l.mobile-ml-l { margin-left: var(--margin-left-l); }
    body .mobile-ml-m.mobile-ml-m { margin-left: var(--margin-left-m); }
    body .mobile-ml-s.mobile-ml-s { margin-left: var(--margin-left-s); }
    body .mobile-ml-xs.mobile-ml-xs { margin-left: var(--margin-left-xs); }
    body .mobile-ml-0.mobile-ml-0 { margin-left: 0; }

    body .mobile-pt-xl.mobile-pt-xl { padding-top: var(--padding-top-xl); }
    body .mobile-pt-l.mobile-pt-l { padding-top: var(--padding-top-l); }
    body .mobile-pt-m.mobile-pt-m { padding-top: var(--padding-top-m); }
    body .mobile-pt-s.mobile-pt-s { padding-top: var(--padding-top-s); }
    body .mobile-pt-xs.mobile-pt-xs { padding-top: var(--padding-top-xs); }
    body .mobile-pt-0.mobile-pt-0 { padding-top: 0; }

    body .mobile-pb-xl.mobile-pb-xl { padding-bottom: var(--padding-bottom-xl); }
    body .mobile-pb-l.mobile-pb-l { padding-bottom: var(--padding-bottom-l); }
    body .mobile-pb-m.mobile-pb-m { padding-bottom: var(--padding-bottom-m); }
    body .mobile-pb-s.mobile-pb-s { padding-bottom: var(--padding-bottom-s); }
    body .mobile-pb-xs.mobile-pb-xs { padding-bottom: var(--padding-bottom-xs); }
    body .mobile-pb-0.mobile-pb-0 { padding-bottom: 0; }

    body .mobile-pr-xl.mobile-pr-xl { padding-right: var(--padding-right-xl); }
    body .mobile-pr-l.mobile-pr-l { padding-right: var(--padding-right-l); }
    body .mobile-pr-m.mobile-pr-m { padding-right: var(--padding-right-m); }
    body .mobile-pr-s.mobile-pr-s { padding-right: var(--padding-right-s); }
    body .mobile-pr-xs.mobile-pr-xs { padding-right: var(--padding-right-xs); }
    body .mobile-pr-0.mobile-pr-0 { padding-right: 0; }

    body .mobile-pl-xl.mobile-pl-xl { padding-left: var(--padding-left-xl); }
    body .mobile-pl-l.mobile-pl-l { padding-left: var(--padding-left-l); }
    body .mobile-pl-m.mobile-pl-m { padding-left: var(--padding-left-m); }
    body .mobile-pl-s.mobile-pl-s { padding-left: var(--padding-left-s); }
    body .mobile-pl-xs.mobile-pl-xs { padding-left: var(--padding-left-xs); }
    body .mobile-pl-0.mobile-pl-0 { padding-left: 0; }
}

.popup-modal .modal-content{ border-radius: var(--popup-border-radius); border: var(--popup-border-size) var(--popup-border-type) var(--popup-border-color); box-shadow: var(--popup-box-shadow) }
.popup-modal .modal-content, .popup-modal .modal-dialog{ max-width: var(--popup-max-width); }
.popup-modal .popup-content{ background: var(--popup-bg); color: var(--popup-color); }
.popup-modal .popup-content *{ color: var(--popup-color); }
.popup-modal .popup-content .container, .popup-modal .popup-content .fullwidth{ padding-top: var(--popup-padding-top); padding-right: var(--popup-padding-right); padding-bottom: var(--popup-padding-bottom); padding-left: var(--popup-padding-left); }

/* FONDOS */
.background-type1{background: var(--background1-bg-color); color: var(--background1-color);}
.background-type1 *{ color: var(--background1-color); }

.background-type2{background: var(--background2-bg-color); color: var(--background2-color);}
.background-type2 *{ color: var(--background2-color); }

.background-type3{background: var(--background3-bg-color); color: var(--background3-color);}
.background-type3 *{ color: var(--background3-color); }

.background-type4{background: var(--background4-bg-color); color: var(--background4-color);}
.background-type4 *{ color: var(--background4-color); }
.background-type5{background: var(--background5-bg-color); color: var(--background5-color);}
.background-type5 *{ color: var(--background5-color); }
.background-type6{background: var(--background6-bg-color); color: var(--background6-color);}
.background-type6 *{ color: var(--background6-color); }
.background-type7{background: var(--background7-bg-color); color: var(--background7-color);}
.background-type7 *{ color: var(--background7-color); }
.background-type8{background: var(--background8-bg-color); color: var(--background8-color);}
.background-type8 *{ color: var(--background8-color); }
.background-type9{background: var(--background9-bg-color); color: var(--background9-color);}
.background-type9 *{ color: var(--background9-color); }
.background-type10{background: var(--background10-bg-color); color: var(--background10-color);}
.background-type10 *{ color: var(--background10-color); }

/* [FONDOS DEGRADADOS 2026-09-24] 6 degradats de fons. La regla de color NOMÉS s'emet quan el N té
   color de text definit: si no, `color: var(--background-gradientN-color)` amb la var indefinida
   trencaria la cadena d'herència i esborraria el color dels títols. */
.background-gradient1{background: var(--background-gradient1);}
.background-gradient1{color: var(--background-gradient1-color);}
.background-gradient1 *{ color: var(--background-gradient1-color); }

.background-gradient2{background: var(--background-gradient2);}
.background-gradient2{color: var(--background-gradient2-color);}
.background-gradient2 *{ color: var(--background-gradient2-color); }

.background-gradient3{background: var(--background-gradient3);}
.background-gradient3{color: var(--background-gradient3-color);}
.background-gradient3 *{ color: var(--background-gradient3-color); }

.background-gradient4{background: var(--background-gradient4);}
.background-gradient4{color: var(--background-gradient4-color);}
.background-gradient4 *{ color: var(--background-gradient4-color); }

.background-gradient5{background: var(--background-gradient5);}
.background-gradient5{color: var(--background-gradient5-color);}
.background-gradient5 *{ color: var(--background-gradient5-color); }

.background-gradient6{background: var(--background-gradient6);}
.background-gradient6{color: var(--background-gradient6-color);}
.background-gradient6 *{ color: var(--background-gradient6-color); }


/* FONDOS */
*[class*="background-image"]{background-size: cover; background-repeat: no-repeat;}
.background-image1{background-image: var(--background-image1-bg-image); color: var(--background-image1-color);}
.background-image1 *{ color: var(--background-image1-color); }

.background-image2{background-image: var(--background-image2-bg-image); color: var(--background-image2-color);}
.background-image2 *{ color: var(--background-image2-color); }

/* [FONDOS CON VÍDEO 2026-09-24] 2 fons amb vídeo. La classe declara el SLOT (--ia-bg-video: N, que el
   motor js/iaLayer_bg_video.js llegeix del computed style) i pinta el PÒSTER amb la capa de color al
   damunt: és el que es veu sense JS, amb moviment reduït, amb estalvi de dades, amb 2g i mentre el vídeo
   carrega (var --background-videoN-bg-layer: capa + pòster). Quan el vídeo reprodueix, el motor el posa per
   sobre del pòster (z-index -1 dins d'un context aïllat) i la mateixa capa passa a l'::after de l'embolcall.
   Sense fallbacks: una var no declarada deixa la declaració invàlida → none / transparent, que és el que cal. Una regla del Live Editor fa el mateix
   escrivint --ia-bg-video: N (mai una URL). La regla de color NOMÉS s'emet quan el slot té color de text. */
@property --ia-bg-video{syntax: '<integer>'; inherits: false; initial-value: 0;}
.background-video1{--ia-bg-video: 1; background-image: var(--background-video1-bg-layer); background-size: cover; background-position: center; background-repeat: no-repeat;}
.background-video1{color: var(--background-video1-color);}
.background-video1 *{ color: var(--background-video1-color); }

.ia-bg-video[data-n="1"]::after{background: var(--background-video1-overlay-color);}
.background-video2{--ia-bg-video: 2; background-image: var(--background-video2-bg-layer); background-size: cover; background-position: center; background-repeat: no-repeat;}
.background-video2{color: var(--background-video2-color);}
.background-video2 *{ color: var(--background-video2-color); }

.ia-bg-video[data-n="2"]::after{background: var(--background-video2-overlay-color);}
/* ===================================================================
   [IRIDIAN AI LAYER 2026-06-12 — P0.3 Builder] CAPA D'ÀLIES --ia-*
   Interfície ÚNICA de tokens per als mòduls IA (vegeu docs/design/
   iridian_ia_builder_macro_restructure.md §9.3 — regla de no-duplicació).
   GENERADA des de style_options (theme_color); cap token inventat:
   - colors: paleta canònica via iailayer_theme_palette (criteri COMPARTIT
     amb design_palette.php: dc_* override si hex vàlid, sentinella #000000)
   - resta: àlies var() de tokens ja emesos amunt en aquest mateix fitxer.
   Regla: els mòduls IA nous consumeixen NOMÉS --ia-* (mai --main-color-*,
   --bs-*, --ial-c-* ni propietats directes).
   =================================================================== */
:root{
    /* Color */
    --ia-color-primary: #000000;
    --ia-color-dark: #000000;
    --ia-color-surface: #FFFFFF;
    --ia-color-surface-soft: #F3F3F3;
    --ia-color-accent: #000000;
    /* [B2 2026-10-01 · decisió de Xavi] CONTRACTE SEMÀNTIC DE BOTÓ: Tema → Style Options → aquests 16 tokens (12 de color + gruix i tipus de vora del principal i del secundari) → mòdul →
       instància/Live Editor. Sempre emesos (valors calculats a iailayer_button_cssvars(), mai buits); els mòduls IA els
       consumeixen NOMÉS a ells, sense fallback (un token absent ha de fer fallar un test, no pintar un color de conveniència).
       primari: bg = «Fondo» base d'Estils (buit → primary), border = el «Borde» d'Estils (button_border_color) si té valor; si no, el mateix fons (unitat 3), text = el d'Estils si arriba a AA contra el fons,
       si no el pol AA; hover = button_*_hover (buit → accent). secundari (Estils no en té: v2/v3/v4 són variants .btn-variant-N):
       outline derivat del text del lloc (o dels camps button_secondary_* d'Estils, unitat 2); el seu hover és el MATEIX farcit que el del primari (el que ja feien 5 de 7). Ombra i
       transició de hover no canvien (--ia-interaction-shadow-hover/-transition). */
    --ia-button-primary-bg: var(--button-bg-color);
    --ia-button-primary-border: var(--button-border-color);
    --ia-button-primary-text: var(--button-color);
    --ia-button-primary-bg-hover: var(--button-bg-color-hover);
    --ia-button-primary-border-hover: var(--button-border-color-hover);
    --ia-button-primary-text-hover: var(--button-color-hover);
    --ia-button-primary-border-size: var(--button-border-size);
    --ia-button-primary-border-type: var(--button-border-type);
    --ia-button-secondary-bg: transparent;
    --ia-button-secondary-bg-hover: var(--ia-button-primary-bg-hover);
    --ia-button-secondary-border-hover: var(--ia-button-primary-border-hover);
    --ia-button-secondary-text-hover: var(--ia-button-primary-text-hover);
    --ia-button-secondary-border-size: 2px;
    --ia-button-secondary-border-type: solid;
    /* [Interaction Finish Pack · Fase A 2026-09-08] Pol de text garantit (≥4.5:1) contra
       --ia-color-accent — usat pels estats hover de botó/header/footer-button que hi pinten el
       fons (v2/v3/v4/header/footer-button color_hover). Mateixa tècnica que la banda de contrast
       de primary, ara també contra accent. */
    --ia-color-accent-contrast-text: #FFFFFF;
        --ia-color-primary-contrast-text: #FFFFFF;    /* [Interaction Finish Pack · Fase A · anell de focus 2026-09-08] Pol computat contra
       --ia-color-page -- garantit >=4.5:1 en QUALSEVOL paleta admesa, per a l'outline dels
       :focus-visible de sota. Limitació disclosed: header/footer sense token de fons propi. */
    --ia-color-focus-ring: #000000;
        --ial-c-focus: #000000;
    --ia-color-success: #F2F2F2;
    /* [P7B.4 2026-07-14] Escala canònica de mòdul completada (rols que faltaven). Derivats a la
       mateixa palette (font única). Buit → fallback = valor d'avui → baseline idèntic sense preset. */
    --ia-color-page: #FFFFFF;
    --ia-color-section: #FFFFFF;
    --ia-color-text: #000000;
    --ia-color-text-soft: #6F6F6F;
    --ia-color-text-inverted: #FFFFFF;
    /* [Colors contextuals 2026-09-07] Text secundari sobre superfície sempre-fosca (hero/CTA): un
       mòdul amb fons fosc redefineix al seu ROOT `--ia-color-text: var(--ia-color-text-inverted)` i
       `--ia-color-text-soft: var(--ia-color-text-inverted-soft)` (mateix contracte de redefinició
       local que .ia-section--contrast) i tot el text interior segueix consumint text/text-soft. */
    --ia-color-text-inverted-soft: rgba(255,255,255,0.82);
    --ia-color-border: #D9D9D9;

    /* Tipografia */
    --ia-font-heading: var(--heading-font-family);
    --ia-font-body: var(--general-text-font-family);

    /* Forma */
    --ia-radius-button: var(--button-border-radius);
        --ia-radius-s: var(--radius-s);
    --ia-radius-m: var(--radius-m);
    --ia-radius-l: var(--radius-l);
    --ia-radius-xl: var(--radius-xl);
    --ia-radius-pill: var(--ial-r-pill, 999px);
    --ia-shadow-s: var(--shadow-s);
    --ia-shadow-m: var(--shadow-m);
    --ia-shadow-l: var(--shadow-l);
    --ia-border-thin: var(--border-thin);
    --ia-border-thick: var(--border-thick);
    --ia-overlay-dark: var(--overlay-dark);
    --ia-overlay-light: var(--overlay-light);
        --ia-font-weight-light: var(--text-light-font-weight);
    --ia-font-weight-normal: var(--text-normal-font-weight);
    --ia-font-weight-bold: var(--text-bold-font-weight);
    --ia-line-height-tight: var(--line-height-tight);
    --ia-line-height-normal: var(--line-height-normal);
    --ia-line-height-relaxed: var(--line-height-relaxed);
        --ia-font-weight-semibold: var(--button-font-weight, 600);
    --ia-heading-1-size: var(--content-h1-font-size, var(--step-5));
    --ia-heading-2-size: var(--content-h2-font-size, var(--step-4));
    --ia-heading-3-size: var(--content-h3-font-size, var(--step-3));
    --ia-heading-4-size: var(--content-h4-font-size, var(--step-2));
    --ia-heading-5-size: var(--content-h5-font-size, var(--step-1));
    --ia-heading-6-size: var(--content-h6-font-size, var(--step-0));
    --ia-title-hero-size: var(--ia-heading-1-size);
    --ia-title-hero-weight: var(--content-heading-font-weight, var(--ia-font-weight-bold));
    --ia-title-hero-lh: var(--ia-line-height-tight);
    --ia-title-section-size: var(--ia-heading-2-size);
    --ia-title-section-weight: var(--content-heading-font-weight, var(--ia-font-weight-bold));
    --ia-title-section-lh: var(--ia-line-height-tight);
    --ia-body-size: var(--content-p-font-size, var(--step-0));
    --ia-body-weight: var(--content-p-font-weight, var(--ia-font-weight-normal));
    --ia-body-lh: var(--ia-line-height-normal);
    --ia-btn-size: var(--button-font-size, var(--step-0));
    --ia-btn-weight: var(--ia-font-weight-semibold);
    --ia-btn-lh: var(--ia-line-height-tight);
    --ia-eyebrow-size: var(--text-xs-font-size, var(--step--1));
    --ia-eyebrow-weight: var(--ia-font-weight-semibold);
    --ia-eyebrow-lh: var(--ia-line-height-normal);
    --ia-eyebrow-tracking: 0.08em;
    --ia-eyebrow-transform: uppercase;

    /* [BIBLIOTECA IA · ÀREA TÀCTIL 2026-09-29] Mida mínima d'un objectiu tàctil (WCAG 2.5.8, 24 px CSS): els
       mòduls la fan servir com a min-height dels enllaços que no en tenen de pròpia (ítem de descàrregues i
       de targetes, font de la valoració, CTA d'avís). Constant: no depèn de Style Options. */
    --ia-touch-target-min: 1.5rem;
    /* [BIBLIOTECA IA · L6 GUTTER 28 2026-09-30, Xavi] Gutter lateral únic de les seccions amb caixa dels mòduls de la
       Biblioteca (superfícies soft i default amb caixes): els mòduls el llegeixen com var(--ia-section-gutter, 28px).
       Constant: no depèn de Style Options. Declarat només aquí; cap mòdul el redefineix. */
    --ia-section-gutter: 28px;
    /* [PEU · ESPAI I ENLLAÇOS 2026-09-30, Xavi] El peu (fora de <main>) no tenia cap espai interior: el contingut tocava la vora
       de la banda de fons i els enllaços sortien subratllats (bootstrap a{underline} guanya a main.css a:where(){none}: mateixa
       especificitat, s'emet després). Espai interior d'escala d'Estils (padding-top-m/s: segueix el tema si el camp és buit);
       enllaços sense subratllat i subratllat a :hover/:focus-visible. Constants: no depenen de camps nous d'Estils; un
       .kit-digital footer a (custom_override.css) continua manant amb el seu subratllat. */
    --footer-padding-top: var(--ia-space-m, 48px);
    --footer-padding-bottom: var(--ia-space-s, 24px);
    --footer-a-decoration: none;
    --footer-a-decoration-hover: underline;

    /* Espaiat de secció (escala XS..XL d'style_options, la mateixa que les classes pt-* i pb-*) */
    --ia-space-xs: var(--padding-top-xs);
    --ia-space-s: var(--padding-top-s);
    --ia-space-m: var(--padding-top-m);
    --ia-space-l: var(--padding-top-l);
    --ia-space-xl: var(--padding-top-xl);
    
    /* [LLISTATS I TARGETES V1 · PART A 2026-09-23] Primitiva `.ia-card` + gap de col·lecció.
       Derivats de `card_*`/`collection_gap` (Style Options > Componentes > «Llistats i targetes»
       — panel/style_options.php), font única compartida amb el mapatge JS del preview (mantenir
       en sincronia manualment: tests/ia_layer/test_listings_cards_v1_contract.php ho comprova).
       Mai una declaració buida: `is not empty`/`default(...,true)` sobreviuen '0' real — Twig
       `empty` NOMÉS considera buides null/false/''/array buit, '0' NO és buit (verificat en
       aquesta branca amb Twig\Environment directe). Els valors per defecte reprodueixen la MIDA
       de .ia-card--flat d'avui (vora 1px, radi 14, padding --ia-space-s) i el gap actual (20px) —
       [m4 2026-09-23, correcció de text, sense canvi visual] el COLOR de la vora NO és idèntic:
       .ia-card--flat usa `var(--ia-color-surface-soft)` (línia més avall), el default de
       `.ia-card` és `var(--ia-color-border)` (--card_border_size default '1' just aquí sota).
       Dues vores properes però NO el mateix token. */
        --ia-card-bg: transparent;
            --ia-card-border: none;
            --ia-card-radius: 0px;
        --ia-card-shadow: none;
            --ia-card-padding: 0;
            --ia-card-hover-shadow: 0 6px 20px rgba(0,0,0,.10);
    --ia-card-hover-transform: none;
                --ia-card-content-inset: var(--ia-space-s);
        --ia-collection-gap: 28px;

    /* [LLISTATS I TARGETES V1 · PART C 2026-09-23] Tipografia de títol + CTA de la card, i
       espaiat/ radi derivats — governen els ROLS interns de `.ia-card` (títol, CTA, media),
       perquè per defecte una card NO depengui de les regles globals `h1..h6` (encàrrec de
       l'usuari: "els llistats prenen estils de text de les declaracions h, no de classes; vull
       que la base dels llistats NO en depengui"). Font única amb el mapatge JS del preview
       (so2_cards_preview.js) i amb iailayer_card_primitive() — mantenir en sincronia manualment,
       tests/ia_layer/test_listings_cards_v1_contract.php ho comprova. */
            --ia-card-title-size: 1.125rem;
            --ia-card-title-weight: 700;
                --ia-card-title-color: var(--ia-color-text);
            --ia-card-text-color: var(--ia-color-text-soft);
            --ia-card-title-lh: 1.15;
            --ia-card-text-lh: 1.5;
                --ia-card-text-size: .9375rem;
                --ia-card-cta-display: inline;
    --ia-card-cta-bg: transparent;
        --ia-card-cta-color: var(--ia-color-accent);
    --ia-card-cta-border: none;
    --ia-card-cta-radius: 0;
    --ia-card-cta-padding: 0;
    --ia-card-cta-decoration: underline;
        /* Ritme vertical ENTRE rols directes de la card (imatge/títol/text/preu/CTA...) — constant,
       no ve de cap `card_*` de Style Options (deliberat: és detall tipogràfic, no identitat). */
    --ia-card-rhythm: .5em;
            --ia-card-media-radius: var(--ia-card-radius, 14px);
    }

/* [B2 2026-10-01] Vora i text del botó SECUNDARI: derivats de --ia-color-text. Es declaren a :root I a cada arrel de mòdul perquè un
   var() es resol a l'element on es declara: a :root quedaria fixat al text del lloc i el secundari no s'adaptaria a les superfícies
   dark/brand que redefineixen --ia-color-text a l'arrel del mòdul (iabannerv1, iactabandv1, iaherosplitv1, iaproductgridv1…). */
:root, [class*="iaLayer-"]{
    --ia-button-secondary-border: var(--ia-color-text);
    --ia-button-secondary-text: var(--ia-color-text);
}



/* =====================================================================
   [IRIDIAN AI LAYER 2026-06-12 — P1.2 Builder] PRESET LAYER v1
   Combinacions amb nom propi sobre els tokens --ia-* (capa per SOTA dels
   overrides del Live Editor: sense !important). Registre canònic =
   iailayer_preset_registry() (panel/ajax/_iridian_ai_layer_helpers.php),
   exposat a ajax/ia_presets.php; el test CLI verifica la sincronia
   classe↔registre. Regla: els presets només consumeixen tokens --ia-*;
   els valors geomètrics propis (radius, ombra) són disseny del preset.
   Els botons mantenen la classe base btn (regla de la casa).
   ===================================================================== */

/* --- Seccions (aplicar a rows/containers) --- */
.ia-section--soft { background-color: var(--ia-color-surface-soft); padding-top: var(--ia-space-m); padding-bottom: var(--ia-space-m); }
.ia-section--contrast {
    background-color: var(--ia-color-primary);
    padding-top: var(--ia-space-m); padding-bottom: var(--ia-space-m);
    /* [F5-FU1 2026-07-14] Redefinició LOCAL de l'escala semàntica dins la banda de contrast: els
       mòduls token-driven segueixen consumint els mateixos tokens i és la SECCIÓ qui en canvia el
       context. Literals derivats en PHP (iailayer_palette_cssvars) amb pol per luminància WCAG del
       primary — evita autoreferències de var() i cobreix presets amb primary clar (dark/cian). */
    --ia-color-text: #FFFFFF;
    --ia-color-text-soft: #c7c7c7;
    --ia-color-accent: #FFFFFF;
    --ia-color-border: rgba(255,255,255,0.32);
    --ia-color-surface: #000000;
}
.ia-section--contrast .title, .ia-section--contrast h1, .ia-section--contrast h2, .ia-section--contrast h3,
.ia-section--contrast h4, .ia-section--contrast h5, .ia-section--contrast h6,
.ia-section--contrast p, .ia-section--contrast li,
.ia-section--contrast strong, .ia-section--contrast b, .ia-section--contrast em,
.ia-section--contrast blockquote, .ia-section--contrast cite { color: var(--ia-color-text); }
/* [N-01 2026-09-25] strong/b/em/blockquote/cite i els enllaços de contingut sense classe
   (:not([class])) prenen el text/accent de contrast perquè no en rebien cap i quedaven
   il·legibles (1:1) sobre --ia-color-primary. :where() manté l'especificitat baixa perquè
   moduls.css segueixi guanyant en enllaços estructurals (banner) i main a en la resta.
   Test: tests/ia_layer/test_ia_section_contrast_inline.php §0/§0b/§0c. */
.ia-section--contrast :where(a:not([class])) { color: var(--ia-color-accent); }
.ia-section--contrast :where(a:not([class])):hover { color: var(--ia-color-accent); text-decoration: underline; }
.ia-section--contrast :where(a:not([class])):focus-visible { color: var(--ia-color-accent); outline: 2px solid currentColor; outline-offset: 2px; }

/* --- [LLISTATS I TARGETES V1 · PART A 2026-09-23] Primitiva `.ia-card` -----------------------
   Baixa especificitat, sense !important: fons/vora/radi/ombra/padding venen dels tokens
   --ia-card-* (derivats de `card_*` més amunt). Transition NOMÉS transform+box-shadow -- cap
   altra propietat, cap blur, cap JS. `:focus-within` perquè una card amb CTA intern (enllaç/
   botó) mostri el mateix feedback de hover en navegar per teclat. */
/* [M4 · LLISTATS I TARGETES V1 2026-09-23] Fallback SEED a cada `var(--ia-card-*, …)`: el bloc
   `:root` d'aquest mateix fitxer sempre els defineix avui, però `.ia-card` és una primitiva
   pensada per consumir-se des de QUALSEVOL Twig/CSS de mòdul — inclòs codi generat per IA que pot
   incrustar la classe sense passar per aquest `:root` (preview aïllat, snippet extret, mòdul
   d'un tema fill que encara no ha heretat el bloc). Sense el 2n argument, un ordre de càrrega on
   `--ia-card-*` no existeix encara deixa `background`/`border`/etc amb "invalid at computed
   value time" → la propietat cau al seu valor inicial (típicament transparent/none), no al que
   sembla un default assenyat. Seeds = mida/color actuals de `.ia-card--flat` (vegeu comentari del
   `:root` més amunt per què el color de vora hi difereix). */
.ia-card {
    background: var(--ia-card-bg, var(--ia-color-surface));
    border: var(--ia-card-border, 1px solid var(--ia-color-border));
    border-radius: var(--ia-card-radius, 14px);
    box-shadow: var(--ia-card-shadow, none);
    padding: var(--ia-card-padding, var(--ia-space-s));
    transition: transform .2s ease, box-shadow .2s ease;
}
.ia-card:hover, .ia-card:focus-within {
    box-shadow: var(--ia-card-hover-shadow, var(--ia-card-shadow, none));
    transform: var(--ia-card-hover-transform, none);
}
.ia-card:focus-within {
    outline: 2px solid var(--ia-color-focus-ring);
    outline-offset: 2px;
}

/* [LLISTATS I TARGETES V1 · PART C 2026-09-23] Estils per DEFECTE dels ROLS interns d'una
   `.ia-card` (títol, subtítol, text, preu, data, badge, CTA, media, camp custom) — perquè una
   card surti "perfecta" de Style Options SENSE dependre de les regles globals `h1..h6`/`.p` del
   contingut, i sense que la presentació hagi d'escriure res. Especificitat (0,1,0) via `:where`:
   mai guanya al CSS propi de la presentació (`.iaLayer-card-pN__title` etc., que es carrega
   DESPRÉS de system.css — vegeu comentari de càrrega més amunt) ni afegeix `!important`.
   Selectors DOBLES a propòsit: la classe CANÒNICA `.ia-card__x` (afegida pel Card Spec builder
   NOMÉS quan `cardPrimitive===true`, panel/ajax/_iridian_card_spec.php) + el fallback
   `[class$="__x"]` (frags legacy/raw o generats abans d'aquest canvi, que no porten la classe
   canònica però SÍ el sufix `__x` de sempre). h1..h6/.title cobreixen el títol encara que el
   slot no tingui classe. */
/* [Encàrrec orquestrador 2026-09-23] `.ia-card :where(...)` té especificitat (0,1,0) — EXACTAMENT
   la mateixa que la regla global `.title, h1, .h1, h2, ...` de dalt de tot d'aquest fitxer (secció
   CONTENT). Un empat de especificitat el desempata l'ORDRE de CÀRREGA: dins d'AQUEST MATEIX
   fitxer, la regla global és ANTERIOR (secció CONTENT, més amunt) i aquesta és POSTERIOR -> LA
   CARD GUANYA SEMPRE per ordre de cascada, sense pujar l'especificitat (una especificitat més
   alta, p.ex. doblant la classe, faria perdre la card CONTRA el CSS propi de la presentació
   `.iaLayer-card-pN__title`, que TAMBÉ és (0,1,0) i necessita continuar guanyant — vegeu el punt
   següent). tests/ia_layer/test_listings_cards_v1_contract.php verifica l'ordre real al fitxer.
   Totes les propietats de la regla global (color/font-family/font-weight/margin-bottom/
   line-height/letter-spacing) es refixen aquí EXPLÍCITAMENT, + font-size (que la global fa per
   nivell h1..h6 via --content-hN-font-size): és la manera de garantir independència real. */
.ia-card :where(h1, h2, h3, h4, h5, h6, .title, .ia-card__title, [class$="__title"]) {
    font-family: var(--ia-font-heading);
    font-size: min(var(--ia-card-title-size, 1.125rem), 1.5rem); /* [CARD 2026-09-30] mai per sobre de 1,5rem: el títol d'una targeta és sota l'h2 de la secció */
    font-weight: var(--ia-card-title-weight, 600);
    line-height: var(--ia-card-title-lh, 1.3);
    letter-spacing: normal;
    color: var(--ia-card-title-color, var(--ia-color-text));
    margin: 0;
}
/* [CARD 2026-09-30, encàrrec de Xavi] Targetes de col·lecció SENSE l'opt-in `ia-card` (camí legacy, p.ex. el blog
   de la demo `.iaLayer-card-l55`): el títol era un h3 amb la mida global de h3 (--content-h3-font-size), més gran que
   l'h2 de la secció. Mateixa jerarquia que les altres targetes (--ia-card-title-*, ≤1,5rem). Especificitat (0,1,0)
   —l'atribut; el :not va dins :where— perquè el CSS propi d'una presentation (`.iaLayer-card-pN__title`, (0,1,0),
   emès després) continuï guanyant per ordre, i aquesta guanyi la regla global `.title, h1…h6` (anterior). */
[class^="iaLayer-card-"]:where(:not([class*="__"])) :where(h1, h2, h3, h4, h5, h6, .title, [class$="__title"]) {
    font-size: min(var(--ia-card-title-size, 1.125rem), 1.5rem);
    font-weight: var(--ia-card-title-weight, 600);
    line-height: var(--ia-card-title-lh, 1.3);
}
/* Extracte/resum/subtítol: 2 línies com a màxim; i data/extracte buits no ocupen lloc (camí monolític, on el
   Twig pot pintar l'element encara que l'ítem no en tingui). */
:where(.ia-card, [class^="iaLayer-card-"]:not([class*="__"])) :where([class$="__subtitle"], [class$="__excerpt"], [class$="__summary"]) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
:where(.ia-card, [class^="iaLayer-card-"]:not([class*="__"])) :where([class$="__date"], [class$="__subtitle"], [class$="__excerpt"], [class$="__summary"]):empty {
    display: none;
}
.ia-card :where(.ia-card__media, [class$="__media"], [class$="__image"]) {
    display: block;
    overflow: hidden;
    border-radius: var(--ia-card-media-radius, calc(var(--ia-card-radius, 14px) - 4px));
}
.ia-card :where(.ia-card__media img, [class$="__media"] img, [class$="__image"] img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* [LLISTATS I TARGETES V1 · PART D 2026-09-23] Subtítol/text/resum/p: `--ia-card-text-size`, MAI
   `--content-p-font-size` (encàrrec de l'usuari: els estils base d'una card no han de dependre de
   cap declaració global) — mateix principi que el títol (PART C). Sufixos `__summary`/`__excerpt`/
   `__desc`/`__description` inclosos perquè els frags propis (912, etc.) del rol 'text' no en surten
   sempre amb `__text` literal (vegeu iailayer_card_frag_add_role_class(), rol 'text'). */
/* [LLISTATS I TARGETES V1 · PART E 2026-09-23] Color + interlineat: `--ia-card-text-color`/
   `--ia-card-text-lh`, MAI un color/line-height fix — mateix principi que `--ia-card-text-size`
   (PART D). Fallback = exactament el que hi havia abans d'aquesta Part (text-soft/1.5). */
.ia-card :where(.ia-card__subtitle, [class$="__subtitle"], .ia-card__text, [class$="__text"], [class$="__summary"], [class$="__excerpt"], [class$="__desc"], [class$="__description"], p) {
    font-family: var(--ia-font-body);
    font-size: var(--ia-card-text-size, .9375rem);
    line-height: var(--ia-card-text-lh, 1.5);
    color: var(--ia-card-text-color, var(--ia-color-text-soft));
    margin: 0;
}
/* Preu: manté SEMPRE `--ia-color-text` (color "fort", no el `card_text_color` triable) — un preu
   és informació de negoci, no text de cos, i ha de destacar per sobre de la resta encara que
   `card_text_color` es posi a `text_soft` (comportament d'avui, deliberadament no tocat). */
.ia-card :where(.ia-card__price, [class$="__price"]) {
    font-size: var(--ia-card-text-size, .9375rem);
    font-weight: 700;
    color: var(--ia-color-text);
}
/* Data/badge: escalen PROPORCIONALMENT a --ia-card-text-size (mai una mida fixa pròpia) i
   SEGUEIXEN `--ia-card-text-color` (mai un color fix propi) perquè mantinguin sempre la relació
   visual amb la resta de text de la card. */
.ia-card :where(.ia-card__date, [class$="__date"], .ia-card__badge, [class$="__badge"]) {
    font-size: calc(var(--ia-card-text-size, .9375rem) * .87);
    color: var(--ia-card-text-color, var(--ia-color-text-soft));
}
.ia-card :where(.ia-card__field, [class$="__field"]) {
    font-family: var(--ia-font-body);
    font-size: var(--ia-card-text-size, .9375rem);
    line-height: 1.5;
    color: var(--ia-color-text);
}
/* CTA: `card_cta` decideix si sembla un enllaç (per defecte, aspecte d'avui) o el botó del tema
   (--button-*), SENSE que el Twig hagi de portar la classe `btn`. `.ia-lp-card__cta` cobreix el
   CTA de la landing 911 (fora del Card Spec builder) amb el mateix contracte. El text del CTA
   també consumeix `--ia-card-text-size` (PART D), mai `--content-p-font-size`. */
.ia-card :where(.ia-card__btn, [class$="__btn"], [class$="__cta"], .ia-lp-card__cta) {
    font-size: var(--ia-card-text-size, .9375rem);
    display: var(--ia-card-cta-display, inline);
    background: var(--ia-card-cta-bg, transparent);
    color: var(--ia-card-cta-color, var(--ia-color-primary));
    border: var(--ia-card-cta-border, none);
    border-radius: var(--ia-card-cta-radius, 0);
    padding: var(--ia-card-cta-padding, 0);
    text-decoration: var(--ia-card-cta-decoration, underline);
}
/* Ritme vertical entre rols directes de la card (mai en el primer fill). */
.ia-card > :where(* + *) {
    margin-top: var(--ia-card-rhythm, .5em);
}
/* [2026-09-23 verificació al navegador] Ritme també dins un wrapper de cos (`…__body`, frags propis
   com la 912), on títol/text/CTA no són fills directes de la card. */
.ia-card :where([class$="__body"] > * + *) {
    margin-top: var(--ia-card-rhythm, .5em);
}
/* Imatge de vora a vora quan és el PRIMER element de la card: surt del padding (marges negatius) i
   agafa el radi superior de la card. Especificitat (0,1,0): el CSS propi de la presentació guanya.
   Amb padding 0 el calc no és una longitud vàlida i la declaració s'ignora (marge 0): correcte. */
.ia-card > :where(.ia-card__media:first-child, [class$="__media"]:first-child, [class$="__image"]:first-child) {
    margin: calc(var(--ia-card-padding, var(--ia-space-s)) * -1) calc(var(--ia-card-padding, var(--ia-space-s)) * -1) 0;
    border-radius: var(--ia-card-radius, 14px) var(--ia-card-radius, 14px) 0 0;
}
/* Mateixa alçada per a totes les targetes d'una fila de la graella de col·lecció (els ítems ja
   s'estiren; la targeta n'ha d'omplir l'alçada). Només graella, mai carrusel. */
/* [TARGETA CLICABLE 2026-09-24] Tota la targeta porta a la fitxa: l'enllaç del títol
   (`.ia-card__link`, emès pel Card Spec builder quan l'ítem té `Link`) s'estén amb un ::after que
   cobreix la targeta. Un sol enllaç per targeta: un sol focus i un sol nom accessible (el títol).
   Val també per a les presentacions sense `.ia-card` (arrel `iaLayer-card-*`). Els altres enllaços i
   botons de dins (CTA) queden per sobre de la capa amb z-index. Especificitat baixa (:where), excepte
   el color/focus de l'enllaç (vegeu REVISIÓ 2026-09-24 més avall). */
:where(.ia-card, [class^="iaLayer-card-"]:not([class*="__"])):has(.ia-card__link, [class^="iaLayer-card-"][class$="__link"]) {
    position: relative;
    cursor: pointer;
}
/* [REVISIÓ 2026-09-24 · P1] L'enllaç del títol ha de lluir com el TÍTOL (color heretat, sense
   subratllat). Amb `:where()` (0,0,0) perdia contra `main a` (0,0,2), `main a:hover` /
   `main a:focus-visible` (0,1,2), el `a` de Bootstrap i el `a` del custom_override del fill, i sortia
   subratllat i del color d'enllaç. Especificitat MÍNIMA que guanya aquestes regles globals, sense
   !important: (0,1,0) en repòs i (0,2,0) en :hover/:focus-visible. Una regla de la presentació
   (`.iaLayer-card-xx__link`, (0,1,0), carregada després) hi empata i guanya per ordre. */
.ia-card__link,
[class^="iaLayer-card-"]:where([class$="__link"]) {
    color: inherit;
    text-decoration: none;
}
.ia-card__link:hover,
[class^="iaLayer-card-"]:where([class$="__link"]):hover {
    color: inherit;
    text-decoration: none;
}
:where(.ia-card__link, [class^="iaLayer-card-"][class$="__link"])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
/* Un sol anell de focus: el de la targeta (regla següent). Sense aquesta especificitat,
   `main a:focus-visible` hi afegia el seu a l'enllaç (doble anell). */
.ia-card__link:focus-visible,
[class^="iaLayer-card-"]:where([class$="__link"]):focus-visible {
    color: inherit;
    text-decoration: none;
    outline: none;
}
:where(.ia-card, [class^="iaLayer-card-"]:not([class*="__"])):has(.ia-card__link:focus-visible, [class^="iaLayer-card-"][class$="__link"]:focus-visible) {
    outline: 2px solid var(--ia-color-focus-ring);
    outline-offset: 2px;
}
/* Tot el que és interactiu dins la targeta queda per sobre de la capa ::after (z-index 1), perquè
   rebi el clic/tacte ell i no l'enllaç de la targeta. */
:where(.ia-card, [class^="iaLayer-card-"]:not([class*="__"])) :where(a:not(.ia-card__link):not([class$="__link"]), button, input, select, textarea, video, iframe, label, [tabindex]:not(.ia-card__link):not([class$="__link"]), .ia-card__btn, [class$="__btn"]) {
    position: relative;
    z-index: 2;
}
/* [REVISIÓ 2026-09-24 · P1] Live Editor: amb l'editor obert (o el selector actiu) el shell posa
   `data-ia-live-editor` a <html> (panel/js/ai_css_studio_shell.js; el picker de l'iframe
   ?ai_studio=1 també, panel/js/ai_css_studio_picker.js). La capa ::after deixa de capturar el
   punter: el selector ha de poder triar la imatge, el text o el CTA, no sempre l'enllaç del títol. */
html[data-ia-live-editor] :where(.ia-card__link, [class^="iaLayer-card-"][class$="__link"])::after {
    pointer-events: none;
}
:where(.iaLayer-coll__grid > .iaLayer-coll__item) > .ia-card {
    height: 100%;
}
/* [LLISTATS 2026-09-30] Targetes de COL·LECCIÓ: el contingut (tot fill que no sigui la imatge) pren
   --ia-card-content-inset (≠0 només si la card té padding 0 però un marc visible: fons, vora, ombra o ombra de
   hover). La imatge continua a sang. Una sola regla per a totes les línies; només cards de col·lecció (arrel
   `iaLayer-card-*`, l'única que emeten els motors de targeta, també a la vista prèvia d'Estils), perquè les cards
   dels mòduls IA ja porten el seu padding propi (iacontactinfov1, iapricingv1…). MARGE, no padding: el padding
   propi dels rols (el CTA botó porta --ia-card-cta-padding, mateixa especificitat) no es trepitja mai; títol i text
   ja porten `margin: 0` (regles de rol, més amunt). */
:where([class^="iaLayer-card-"]).ia-card > :where(:not(.ia-card__media, [class$="__media"], [class$="__image"])) {
    margin-inline: var(--ia-card-content-inset, 0);
}
/* Espai inferior: un separador buit al final de la card, NO padding al darrer fill — el resum/subtítol porta
   line-clamp + overflow:hidden, que retalla a la vora del PADDING: amb padding-bottom la 3a línia retallada
   es veia dins l'espai (mesurat a 390). */
:where([class^="iaLayer-card-"]).ia-card::after {
    content: "";
    display: block;
    height: var(--ia-card-content-inset, 0);
}
/* [LLISTATS 2026-09-30 · decisió P2-1] Amb l'inset actiu, l'espai imatge→títol puja al mateix inset (el marc queda
   igual pels 4 costats del text); sense inset (0px) max() torna el ritme de sempre. Mateixa especificitat que la regla
   de ritme (.ia-card > :where(* + *)) i posterior: la substitueix només per al primer fill després de la imatge. */
:where([class^="iaLayer-card-"]).ia-card > :where(.ia-card__media, [class$="__media"], [class$="__image"]) + * {
    margin-top: max(var(--ia-card-rhythm, .5em), var(--ia-card-content-inset, 0px));
}

/* --- Cards (aplicar a wrappers de targeta) --- */
.ia-card--flat { background-color: var(--ia-color-surface); border: 1px solid var(--ia-color-surface-soft); border-radius: var(--ia-card-radius, 14px); padding: var(--ia-space-s); }
.ia-card--elevated { background-color: var(--ia-color-surface); border-radius: var(--ia-card-radius, 14px); box-shadow: 0 10px 28px rgba(0,0,0,.09); padding: var(--ia-space-s); }

/* --- Botons (sempre amb .btn base) --- */
.btn.ia-btn--ghost { background-color: transparent; border: 1px solid var(--ia-color-primary); color: var(--ia-color-primary); }
.btn.ia-btn--ghost:hover { background-color: var(--ia-color-primary); color: var(--ia-color-surface); }
.btn.ia-btn--link { background-color: transparent; border: 0; padding-left: 0; padding-right: 0; color: var(--ia-color-primary); text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.btn.ia-btn--link:hover { opacity: .75; }

/* --- [Peça 4 · 2026-06-25] Presets de botó: cascada COLORS-ONLY cap als CTA del bloc (.content-button) ---
   El preset s'escriu al wrapper (blocs.classeElement); aquí arriba al CTA fill marcat .content-button.
   Pilot colors-only: NOMÉS background/color/-webkit-text-fill-color/border + hover. MAI padding/radius/font/geometria.
   Especificitat (0,5,0) [+ :not(.btn) de marge] > Bootstrap a:not(...) (0,3,1) → guanya SENSE !important.
   Exclou .no-style-btn i .btn (els .btn ja entren al sistema de botons del tema). */
.btn-variant-2 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:var(--button-v2-bg-color); color:var(--button-v2-color); -webkit-text-fill-color:var(--button-v2-color); border:var(--button-v2-border-size) var(--button-v2-border-type) var(--button-v2-border-color); }
.btn-variant-2 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover,.btn-variant-2 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn).active{ background:var(--button-v2-bg-color-hover); color:var(--button-v2-color-hover); -webkit-text-fill-color:var(--button-v2-color-hover); border-color:var(--button-v2-border-color-hover); }
.btn-variant-3 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:var(--button-v3-bg-color); color:var(--button-v3-color); -webkit-text-fill-color:var(--button-v3-color); border:var(--button-v3-border-size) var(--button-v3-border-type) var(--button-v3-border-color); }
.btn-variant-3 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover,.btn-variant-3 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn).active{ background:var(--button-v3-bg-color-hover); color:var(--button-v3-color-hover); -webkit-text-fill-color:var(--button-v3-color-hover); border-color:var(--button-v3-border-color-hover); }
.btn-variant-4 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:var(--button-v4-bg-color); color:var(--button-v4-color); -webkit-text-fill-color:var(--button-v4-color); border:var(--button-v4-border-size) var(--button-v4-border-type) var(--button-v4-border-color); }
.btn-variant-4 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover,.btn-variant-4 .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn).active{ background:var(--button-v4-bg-color-hover); color:var(--button-v4-color-hover); -webkit-text-fill-color:var(--button-v4-color-hover); border-color:var(--button-v4-border-color-hover); }
.ia-btn--ghost .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:transparent; border:1px solid var(--ia-color-primary); color:var(--ia-color-primary); -webkit-text-fill-color:var(--ia-color-primary); }
.ia-btn--ghost .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover{ background:var(--ia-color-primary); color:var(--ia-color-surface); -webkit-text-fill-color:var(--ia-color-surface); }
.ia-btn--link .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn){ background:transparent; border:0; color:var(--ia-color-primary); -webkit-text-fill-color:var(--ia-color-primary); text-decoration:underline; text-underline-offset:3px; }
.ia-btn--link .content-button:not(.no-style-btn *):not(.no-style-btn):not(.btn):hover{ opacity:.75; }

/* --- Cards adicionals --- */
.ia-card--strong { background-color: var(--ia-color-surface); border-radius: var(--ia-card-radius, 14px); box-shadow: 0 20px 50px rgba(0,0,0,.18); padding: var(--ia-space-s); }

/* --- Forma — radius cascada limitada a botons i cards fills del wrapper --- */
.ia-radius--pill .btn, .ia-radius--pill button:not(.no-style-btn):not(.no-style-btn *),
.ia-radius--pill .ia-card--flat, .ia-radius--pill .ia-card--elevated, .ia-radius--pill .ia-card--strong { border-radius: 999px; }
.ia-radius--sharp .btn, .ia-radius--sharp button:not(.no-style-btn):not(.no-style-btn *),
.ia-radius--sharp .ia-card--flat, .ia-radius--sharp .ia-card--elevated, .ia-radius--sharp .ia-card--strong { border-radius: 0; }

/* --- Band colors (fons de secció — sobreescriu preset bg via source order) --- */
.cgv2-band-surface { background-color: var(--ia-color-surface); }
.cgv2-band-soft { background-color: var(--ia-color-surface-soft); }
.cgv2-band-primary { background-color: var(--ia-color-primary); color: var(--ia-color-surface); }
.cgv2-band-accent { background-color: var(--ia-color-accent); }
.cgv2-band-success { background-color: var(--ia-color-success); color: var(--ia-color-surface); }
.cgv2-band-dark { background-color: var(--ia-color-dark); color: var(--ia-color-surface); }
/* [COLORS I FONS DEL SISTEMA D'ESTIL 2026-09-24] «Paleta de colores» com a fons de secció/columna
   (Grid Inspector): els 10 colors de main_color_1..10 (--main-color-N, definides més amunt), NO
   la paleta de marca (--ia-color-*) de les .cgv2-band-* de sobre. Cap color de text aparellat
   (aquí no n'hi ha cap contracte, a diferència de .background-typeN). */
.cgv2-bg-c1 { background-color: var(--main-color-1); }
.cgv2-bg-c2 { background-color: var(--main-color-2); }
.cgv2-bg-c3 { background-color: var(--main-color-3); }
.cgv2-bg-c4 { background-color: var(--main-color-4); }
.cgv2-bg-c5 { background-color: var(--main-color-5); }
.cgv2-bg-c6 { background-color: var(--main-color-6); }
.cgv2-bg-c7 { background-color: var(--main-color-7); }
.cgv2-bg-c8 { background-color: var(--main-color-8); }
.cgv2-bg-c9 { background-color: var(--main-color-9); }
.cgv2-bg-c10 { background-color: var(--main-color-10); }
.cgv2-grad-primary { background: linear-gradient(135deg, var(--ia-color-primary), var(--ia-color-dark)); color: var(--ia-color-surface); }
.cgv2-grad-subtle { background: linear-gradient(135deg, var(--ia-color-surface), var(--ia-color-surface-soft)); }
.cgv2-grad-dark { background: linear-gradient(135deg, var(--ia-color-dark), #000); color: var(--ia-color-surface); }
.cgv2-text-light { --ia-color-text: var(--ia-color-text-inverted); --ia-color-text-soft: var(--ia-color-text-inverted-soft); color: var(--ia-color-text-inverted) !important; }
/* [VINC U3.3] «Color de texto» de la fila: el color arriba també a p/li/strong/títols (tenen color propi via --content-*) */
.cgv2-text-light :is(p, li, strong, .p, .title, h1, h2, h3, h4, h5, h6) { color: inherit; }

.cgv2-text-dark { color: var(--ia-color-text) !important; }
.cgv2-text-dark :is(p, li, strong, .p, .title, h1, h2, h3, h4, h5, h6) { color: inherit; }

/* [EFFECTS V1 · fase 16 · U1 2026-09-28] CSS del core dels efectes visuals.
 * Font: coordinacio-def/motion-effects/DISSENY_FINAL_EFFECTS.md §1.1 (contracte, NO reinterpretar)
 * i U1_RUNTIME.md §1. Els 4 tokens de moviment DERIVEN de `effects_level` via
 * iailayer_effect_levels() (panel/ajax/_ia_effects.php, U0) — mai a mà aquí: els valors numèrics
 * arriben com a variables Twig ja calculades per `iailayer_style_render_css_from_vars()`
 * (panel/ajax/_iridian_style.php), mateix patró que `card_hover` i la resta. `--ia-effects-enabled`
 * (on|off) és un ident de NOMÉS LECTURA que el runtime (themes/ext_irtheme/js/iaLayer_effects.js)
 * llegeix amb `getComputedStyle` (Pas 1, 29/09: ja no hi ha nivell ni entrada global que gatejar).
 * Moviment reduït: el bloc ÚNIC `@media (prefers-reduced-motion: reduce)` de més avall (~L1761),
 * DESPRÉS d'aquest `:root` a posta (REVISIO_TRANSVERSAL P1-1 2026-09-28): `@media` no afegeix
 * especificitat — amb la mateixa especificitat (0,0,1), guanya l'ordre al fitxer, i el bloc de
 * moviment reduït ha d'anar SEMPRE després de qualsevol `:root` que redeclari els mateixos tokens.
 */
:root {
    --ia-motion-duration: 600ms;
    --ia-motion-distance: 32px;
    --ia-motion-scale: 0.94;
    --ia-motion-ease: cubic-bezier(.22,.61,.36,1);
    --ia-effects-enabled: on;
    --ia-effect-step: 80ms;
    /* Consumides NOMÉS pels hovers `.ia-effect--lift`/`.ia-effect--image-zoom` (més avall); el
       bloc de moviment reduït de més avall les neutralitza (lift: 0px: cap desplaçament; zoom:
       1: `scale(1)` és una identitat, cap transform visible). -3px és literal de l'espec (§1),
       no deriva del registre (que només guarda un RANG per al validador X4, no un valor canònic). */
    --ia-effect-lift-distance: -3px;
    --ia-effect-zoom-scale: 1.04;
}

/* [Interaction Finish Pack · Fase B 2026-09-08] Les ÚNIQUES 4 propietats de transició que el
   Finish Pack sap escriure (button/v2/v3/v4_transition — header/footer-button NO en tenen camp,
   confirmat B0) es consumeixen SEMPRE via aquestes 4 custom properties, mai directament. Sota
   preferència de moviment reduït es neutralitzen aquí, en un ÚNIC punt — sense tocar cap altra
   propietat, sense fotogrames clau, sense introduir cap sistema de moviment nou (Motion Pack
   segueix fora d'abast total).
   [REVISIO_TRANSVERSAL P1-1 2026-09-28] Aquest bloc ha d'anar DESPRÉS de qualsevol `:root` que
   redeclari `--ia-motion-*`/`--ia-effect-lift-distance`/`--ia-effect-zoom-scale` (avui el `:root`
   d'EFFECTS V1 de més amunt): mateixa especificitat, guanya el darrer en ordre de font. Abans hi
   anava PRIMER i el `:root` d'EFFECTS V1 el sobreescrivia en silenci — `lift`/`image-zoom` es
   movien igual amb `prefers-reduced-motion: reduce`. Vegeu tests/ia_layer/test_effects_css_cascade.php. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --button-transition: none;
        --button-v2-transition: none;
        --button-v3-transition: none;
        --button-v4-transition: none;
        /* [HEADER V1 2026-09-23] --header-transition és una DURADA pròpia (no deriva de
           --button-transition): necessita la seva entrada aquí. 0s i no 'none', perquè es
           consumeix com a durada (`height var(--header-transition) ease`). */
        --header-transition: 0s;
        /* [LLISTATS I TARGETES V1 · PART A 2026-09-23] Neutralitza NOMÉS el moviment (translateY)
           de l'estat hover/focus-within de `.ia-card`; l'ombra de hover es manté (no és moviment). */
        --ia-card-hover-transform: none;
        /* [EFFECTS V1 · fase 16 · U1 2026-09-28] Mateix bloc ÚNIC (U1_RUNTIME.md §1: "no en creïs
           un altre"). Neutralitza el moviment real de les entrades; el runtime JS també consulta
           `matchMedia('(prefers-reduced-motion: reduce)')` i no marca res com a `pending` — aquesta
           neutralització és la xarxa de seguretat CSS si el JS falla o no arriba a temps. Els
           hovers de `.ia-effect--lift`/`.ia-effect--image-zoom` (més avall) neutralitzen el SEU
           propi moviment via `--ia-effect-lift-distance`/`--ia-effect-zoom-scale`, definides aquí. */
        --ia-motion-duration: 0s;
        --ia-motion-distance: 0px;
        --ia-motion-scale: 1;
        --ia-effect-lift-distance: 0px;
        --ia-effect-zoom-scale: 1;
    }
}

/* [EFFECTS CORE V1 · Pas 1 · 2026-09-29] Les regles d'entrada viuen NOMÉS a
   themes/ext_irtheme/css/iaLayer_effects.css (CSS core compartit amb les miniatures del panell). Aquí
   només queden els tokens de moviment (:root de dalt) i els hovers congelats. */

/* Hovers per classe d'instància (`ia-effect--<id>` a `blocs.classeElement`/Grid). NOMÉS dispositius
   amb hover real: mai un :hover fantasma en tàctil. `:focus-within` perquè un CTA dins la targeta
   navegable per teclat també disparí l'efecte. */
@media (hover: hover) {
    .ia-effect--lift .ia-card:hover,
    .ia-effect--lift .ia-card:focus-within {
        transform: translateY(var(--ia-effect-lift-distance));
        box-shadow: var(--ia-card-hover-shadow);
    }
    .ia-effect--shadow .ia-card:hover,
    .ia-effect--shadow .ia-card:focus-within {
        box-shadow: var(--ia-card-hover-shadow);
    }
    /* Reutilitza els selectors de mitjà existents (~L1553-1558 d'aquest fitxer). */
    .ia-effect--image-zoom .ia-card :where(.ia-card__media, [class$="__media"], [class$="__image"]) {
        overflow: hidden;
    }
    .ia-effect--image-zoom .ia-card:hover :where(.ia-card__media, [class$="__media"], [class$="__image"]) img,
    .ia-effect--image-zoom .ia-card:focus-within :where(.ia-card__media, [class$="__media"], [class$="__image"]) img {
        transform: scale(var(--ia-effect-zoom-scale));
        transition: transform var(--ia-motion-duration) var(--ia-motion-ease);
    }
    /* Anul·la el `card_hover` global (transform/ombra de repòs) quan la instància diu "Cap" explícit. */
    .ia-effect--none .ia-card:hover,
    .ia-effect--none .ia-card:focus-within {
        transform: none;
        box-shadow: var(--ia-card-shadow);
    }
}