:root {
    color-scheme: light;
    /* ==========================================
       CONFIGURACIÓ DE PARÀMETRES DE ZOOM I ROTACIÓ (Variables CSS)
       ========================================== */
    --zoom-scale: 1.35;                               /* Factor d'escala moderat a les subpàgines */
    --zoom-duration: 900ms;                           /* Durada de la transició progressiva (800ms - 1000ms) */
    --zoom-easing: cubic-bezier(0.16, 1, 0.3, 1);     /* Corba d'acceleració d'alta precisió (ease-out suau) */

    /* Rotació individual de les creus de fons (Nivell 3 - Subpàgines de projectes) */
    --rotation-angle: 45deg;
    --rotation-duration: 900ms;
    --rotation-easing: cubic-bezier(0.16, 1, 0.3, 1);

    --bg-color: #f0f1f3;
    --text-color: #000000;
    --ui-muted: #58585d;
    --page-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.18);
    --shadow-intensa: rgba(0, 0, 0, 0.22);
    --progress-bg: #c5c7c9;
    --progress-fill: #000000;
    --plec-color: rgba(0, 0, 0, 0.06);
    --grid-color: rgba(0, 0, 0, 0.065);

    /* Transitions.dev — Icon swap */
    --icon-swap-dur: 450ms;
    --icon-swap-blur: 3px;
    --icon-swap-start-scale: 0.25;
    --icon-swap-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Safari WebKit: Assegurar fons sòlid a l'arrel html per evitar franges blanques en overscroll/rebot */
html {
    background-color: var(--bg-color, #f0f1f3);
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    transition: background-color 0.4s ease;
}

html.mode-fosc,
html.dark,
html[data-theme="dark"] {
    background-color: #161718;
    color-scheme: dark;
}

/* ==========================================
   ACCESSIBILITAT WCAG 2.1 / 2.2 AA (Punts 2 i 5)
   ========================================== */
:focus-visible {
    outline: 2px solid var(--text-color) !important;
    outline-offset: 3px !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
.filter-btn:focus-visible,
.nav-item:focus-visible,
.gallery-placeholder-box:focus-visible,
.ctrl-btn:focus-visible,
.btn-zoom-ctrl:focus-visible,
.theme-toggle-btn:focus-visible,
.lang-btn:focus-visible,
.nav-btn:focus-visible,
.utility-link:focus-visible,
.hint-link:focus-visible,
.version-pill:focus-visible,
.mobile-share-btn:focus-visible {
    outline: 2px solid var(--text-color) !important;
    outline-offset: 2px !important;
}

/* Skip link per a navegació ràpida per teclat (WCAG 2.4.1) */
.skip-link {
    position: fixed;
    top: -100px;
    left: 24px;
    z-index: 9999;
    padding: 10px 18px;
    background: var(--text-color);
    color: var(--bg-color) !important;
    font-family: monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 2px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 20px;
    outline: 2px solid var(--text-color) !important;
    outline-offset: 3px !important;
}

/* Ocultació accessible per a lectors de pantalla (WCAG 1.3.1) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    .grid-canvas,
    .cad-cross,
    .full-girant,
    .custom-cursor {
        transition: none !important;
        animation: none !important;
    }
}

body {
    background-color: transparent !important;
    color: var(--text-color);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    transition: color 0.4s ease, opacity 0.18s ease-in-out;
    opacity: 1;
    position: relative;
}

/* ==========================================
   TRAMA DE FONS TÈCNICA I TRANSICIÓ ESPACIAL (Hardware-Accelerated)
   Patró SVG: Creus de 10×10px i espaiat equilibrat de 26px (Patró de 36×36px)
   ========================================== */
.grid-canvas {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 13v10M13 18h10' stroke='%23000000' stroke-opacity='.065' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 36px 36px;
    background-position: center center;
    background-repeat: repeat;
    transform-origin: center center;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transition: transform var(--zoom-duration, 900ms) var(--zoom-easing, cubic-bezier(0.16, 1, 0.3, 1));
    opacity: 1;
}

body.mode-fosc .grid-canvas,
body.dark .grid-canvas,
html.mode-fosc .grid-canvas,
html.dark .grid-canvas,
[data-theme="dark"] .grid-canvas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 13v10M13 18h10' stroke='%23ffffff' stroke-opacity='.10' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Estat a les 4 subpàgines (Portafolis, Projectes, Arxiu, Perfil): retícula ampliada a 1.35x */
body:not([data-page="inici"]):not(.is-home) .grid-canvas,
body.is-zoomed .grid-canvas {
    transform: translate3d(0, 0, 0) scale3d(var(--zoom-scale, 1.35), var(--zoom-scale, 1.35), 1);
}

/* 1. Seqüència de Sortida d'Inici: Zoom-In progressiu cap a la Subpàgina (1.0x -> 1.35x) */
body.navigating-zoom-in .grid-canvas {
    transform: translate3d(0, 0, 0) scale3d(var(--zoom-scale, 1.35), var(--zoom-scale, 1.35), 1) !important;
}

body.navigating-zoom-in .nav-item:not(.active-target) {
    opacity: 0 !important;
    transform: scale(0.9) !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.35s ease !important;
}

body.navigating-zoom-in .nav-item.active-target {
    transform: scale(1.15) !important;
    opacity: 1 !important;
    transition: transform calc(var(--zoom-duration, 900ms) * 0.8) var(--zoom-easing, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}

body.navigating-zoom-in .nav-description {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

/* 2. Seqüència de Retorn cap a l'Inici: Zoom-Out progressiu (1.8x -> 1.0x) */
body.navigating-zoom-out .grid-canvas {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
    transition: transform var(--zoom-duration, 900ms) var(--zoom-easing, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}

/* ==========================================
   3. ROTACIÓ PROGRESSIVA INDIVIDUAL DE LES CREUS SVG (NIVELL 3 - SUBPÀGINES DE PROJECTES)
   Cada creu gira 45° sobre el seu propi eix (cx: 18px, cy: 18px), mentre el zoom es manté estàtic
   ========================================== */
@keyframes cross-rotation {
    from {
        transform: rotate(0deg);
        opacity: 1;
    }
    to {
        transform: rotate(var(--rotation-angle, 45deg));
        opacity: 1;
    }
}

@keyframes cross-rotation-reverse {
    from {
        transform: rotate(var(--rotation-angle, 45deg));
        opacity: 1;
    }
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

.cad-cross,
.cross,
.grid-cross {
    transform-origin: 18px 18px;
    transform-box: fill-box;
    will-change: transform;
    animation-delay: 0s;
    transform: rotate(0deg);
    animation-fill-mode: forwards;
    opacity: 1;
    transition: transform var(--rotation-duration, 900ms) var(--rotation-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

.cad-cross.cross-rotate,
.cross-rotate .cad-cross,
.cross.cross-rotate,
.cross-rotate .cross,
.grid-cross.cross-rotate,
.cross-rotate .grid-cross,
body.is-level-3 .cad-cross,
body.is-level-3 .cross,
body.is-level-3 .grid-cross,
body[data-project-page="true"] .cad-cross,
body[data-project-page="true"] .cross,
body[data-project-page="true"] .grid-cross,
body.submenu-active .cad-cross,
body.submenu-active .cross,
body.submenu-active .grid-cross {
    will-change: transform;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation: cross-rotation var(--rotation-duration, 900ms) var(--rotation-easing, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
    transform: rotate(var(--rotation-angle, 45deg));
    opacity: 1;
}

.cad-cross.cross-rotate-reverse,
.cross-rotate-reverse .cad-cross,
.cross.cross-rotate-reverse,
.cross-rotate-reverse .cross,
.grid-cross.cross-rotate-reverse,
.cross-rotate-reverse .grid-cross,
body.is-returning-to-projects .cad-cross,
body.is-returning-to-projects .cross,
body.is-returning-to-projects .grid-cross {
    will-change: transform;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation: cross-rotation-reverse var(--rotation-duration, 900ms) var(--rotation-easing, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
    transform: rotate(0deg);
    opacity: 1;
}

/* Estat de creus girades 45° sobre el seu propi eix (Nivell 3 & modal de projecte a projectes.html) */
body.cross-rotate .grid-canvas,
body.submenu-active .grid-canvas,
body.tab-cv-active .grid-canvas,
body.is-level-3 .grid-canvas,
body[data-project-page="true"] .grid-canvas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath transform='rotate(45 18 18)' d='M18 13v10M13 18h10' stroke='%23000000' stroke-opacity='.065' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.mode-fosc.cross-rotate .grid-canvas,
body.mode-fosc.submenu-active .grid-canvas,
body.mode-fosc.tab-cv-active .grid-canvas,
body.mode-fosc.is-level-3 .grid-canvas,
body.mode-fosc[data-project-page="true"] .grid-canvas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath transform='rotate(45 18 18)' d='M18 13v10M13 18h10' stroke='%23ffffff' stroke-opacity='.10' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Entrada dinàmica dels elements canviants a les subpàgines */
@keyframes dynamicContentIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

main:not(.home-main),
.wrapper-mestre,
.arxiu-wrapper,
.perfil-container,
.projects-container,
.error-page,
.split-home-wrapper {
    position: relative;
    z-index: 10;
    animation: dynamicContentIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
}

body.page-exiting main:not(.home-main),
body.page-exiting .wrapper-mestre,
body.page-exiting .arxiu-wrapper,
body.page-exiting .perfil-container,
body.page-exiting .projects-container,
body.page-exiting .error-page {
    opacity: 0;
    transform: scale(0.97) translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ==========================================
   VIEW TRANSITIONS API (Transicions de pàgina fluides)
   ========================================== */
@view-transition {
    navigation: auto;
}

/* Configuració de la trama espacial aïllada: SENSE PARPALLEJOS */
::view-transition-group(spatial-grid) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(spatial-grid),
::view-transition-new(spatial-grid) {
    animation: none;
    mix-blend-mode: normal;
}

/* Desactivar transicions brusques del fons complet */
::view-transition-group(root) {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Efecte d'esvaïment creuat (Cross-Fade) suau */
::view-transition-old(root) {
    animation: 0.18s cubic-bezier(0.4, 0, 1, 1) both fadeOut;
}

::view-transition-new(root) {
    animation: 0.25s cubic-bezier(0, 0, 0.2, 1) 0.03s both fadeIn;
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.985); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(1.015); }
    to { opacity: 1; transform: scale(1); }
}

/* Continuïtat d'elements compartits (Shared Element Transitions) */
.ui-top-left {
    view-transition-name: main-brand;
}

.top-utility-bar {
    view-transition-name: main-utility;
}

.page-socials,
.ui-bottom-right {
    view-transition-name: main-socials;
}

.version-pill {
    view-transition-name: main-version;
}

@media (max-width: 768px) {
    .version-pill:not(.is-visible) {
        display: none !important;
    }
    .version-pill.is-visible {
        display: block !important;
        opacity: 0.85 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        left: 16px !important;
        bottom: 16px !important;
        z-index: 1000 !important;
    }
    .top-utility-bar,
    .ui-top-right {
        view-transition-name: none !important;
    }
}

:root.mode-fosc,
html.mode-fosc,
body.mode-fosc,
html.mode-fosc body,
:root.dark,
html.dark,
body.dark,
html.dark body,
:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
html[data-theme="dark"] body {
    color-scheme: dark;
    --bg-color: #161718;
    --text-color: #f5f5f7;
    --ui-muted: #a6a6b5;
    --page-bg: #222222;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-intensa: rgba(0, 0, 0, 0.5);
    --progress-bg: #3a3a3c;
    --progress-fill: #f5f5f7;
    --plec-color: rgba(0, 0, 0, 0.15);
    --grid-color: rgba(255, 255, 255, 0.10);
    --bg: #161718;
    --text: #f5f5f7;
    --muted: #9e9eaf;
    --line: #3a3a3c;
    --accent: #222;
}

/* Suport natiu del sistema per a Safari (si l'usuari té mode fosc activat a macOS/iOS) */
@media (prefers-color-scheme: dark) {
    :root:not(.mode-clar):not([data-theme="light"]) {
        color-scheme: dark;
        --bg-color: #161718;
        --text-color: #f5f5f7;
        --ui-muted: #a6a6b5;
        --page-bg: #222222;
        --shadow-color: rgba(0, 0, 0, 0.3);
        --shadow-intensa: rgba(0, 0, 0, 0.5);
        --progress-bg: #3a3a3c;
        --progress-fill: #f5f5f7;
        --plec-color: rgba(0, 0, 0, 0.15);
        --grid-color: rgba(255, 255, 255, 0.10);
        --bg: #161718;
        --text: #f5f5f7;
        --muted: #9e9eaf;
        --line: #3a3a3c;
        --accent: #222;
    }
    html:not(.mode-clar):not([data-theme="light"]) {
        background-color: #161718;
        color-scheme: dark;
    }
}

/* Cobertura total i explícita dels elements de la pàgina principal en mode fosc */
html.mode-fosc,
html.dark,
html[data-theme="dark"],
body.mode-fosc,
body.dark,
html.mode-fosc body,
html.dark body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

body.mode-fosc .nav-principal .nav-item,
body.dark .nav-principal .nav-item,
html.mode-fosc .nav-principal .nav-item,
html.dark .nav-principal .nav-item {
    color: var(--text-color) !important;
}

body.mode-fosc .nav-principal .nav-text,
body.dark .nav-principal .nav-text,
html.mode-fosc .nav-principal .nav-text,
html.dark .nav-principal .nav-text {
    color: var(--text-color) !important;
}

body.mode-fosc .nav-principal .nav-num,
body.dark .nav-principal .nav-num,
html.mode-fosc .nav-principal .nav-num,
html.dark .nav-principal .nav-num {
    color: var(--ui-muted) !important;
}

body.mode-fosc .nav-principal .nav-svg-icon,
body.dark .nav-principal .nav-svg-icon,
html.mode-fosc .nav-principal .nav-svg-icon,
html.dark .nav-principal .nav-svg-icon {
    stroke: var(--text-color) !important;
    color: var(--text-color) !important;
}

body.mode-fosc #txt-titol,
body.dark #txt-titol,
html.mode-fosc #txt-titol,
html.dark #txt-titol,
body.mode-fosc #txt-canviable,
body.dark #txt-canviable,
html.mode-fosc #txt-canviable,
html.dark #txt-canviable {
    color: var(--text-color) !important;
}

body.mode-fosc .nav-description,
body.dark .nav-description,
html.mode-fosc .nav-description,
html.dark .nav-description {
    color: var(--ui-muted) !important;
}

body.mode-fosc .theme-toggle-btn,
body.dark .theme-toggle-btn,
html.mode-fosc .theme-toggle-btn,
html.dark .theme-toggle-btn,
body.mode-fosc .theme-toggle-btn .btn-icon-label,
body.dark .theme-toggle-btn .btn-icon-label,
html.mode-fosc .theme-toggle-btn .btn-icon-label,
html.dark .theme-toggle-btn .btn-icon-label {
    color: var(--text-color) !important;
}

body.mode-fosc .lang-trigger,
body.dark .lang-trigger,
html.mode-fosc .lang-trigger,
html.dark .lang-trigger,
body.mode-fosc .lang-trigger .lang-current,
body.dark .lang-trigger .lang-current,
html.mode-fosc .lang-trigger .lang-current,
html.dark .lang-trigger .lang-current {
    color: var(--text-color) !important;
}

body.mode-fosc .mobile-share-btn,
body.dark .mobile-share-btn,
html.mode-fosc .mobile-share-btn,
html.dark .mobile-share-btn,
body.mode-fosc .mobile-social-toggle,
body.dark .mobile-social-toggle,
html.mode-fosc .mobile-social-toggle,
html.dark .mobile-social-toggle,
body.mode-fosc .mobile-social-item,
body.dark .mobile-social-item,
html.mode-fosc .mobile-social-item,
html.dark .mobile-social-item {
    color: var(--text-color) !important;
}

body.mode-fosc .mobile-social-popup,
body.dark .mobile-social-popup,
html.mode-fosc .mobile-social-popup,
html.dark .mobile-social-popup {
    border-bottom-color: var(--text-color) !important;
}

body.mode-fosc .xarxes-links a,
body.dark .xarxes-links a,
html.mode-fosc .xarxes-links a,
html.dark .xarxes-links a {
    color: var(--text-color) !important;
}

body.mode-fosc .version-pill,
body.dark .version-pill,
html.mode-fosc .version-pill,
html.dark .version-pill {
    color: var(--text-color) !important;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================
   MENÚ SUPERIOR ESQUERRA UNIFICAT
   ========================================== */
.ui-element, .ui-element a, .ui-element span, .ui-element div, .ui-element button, .ui-element p {
    font-size: 11px; font-weight: 400; color: var(--text-color);
    letter-spacing: 0.8px; text-transform: uppercase; transition: color 0.4s ease;
}

.ui-element { position: absolute; z-index: 100; }

.ui-top-left {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ui-top-left strong { font-weight: 700; color: inherit; }
.ui-top-left .title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}
.ui-top-left .title-group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 8px;
    margin-bottom: -8px;
}

#txt-titol {
    cursor: pointer;
    display: inline-block;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
}
#txt-titol strong, .nav-slash, #txt-titol .nav-slash {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.55px;
}
#txt-titol:hover { color: var(--ui-muted); }
#txt-canviable {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    text-transform: none !important;
    font-kerning: normal;
}
#txt-canviable *,
#txt-canviable a,
#txt-canviable span,
.active-project-crumb,
.project-crumb-prefix,
.project-crumb-prefix a {
    text-transform: none !important;
}
#txt-hint, .hints-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 6px;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 310;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--text-color) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.4s ease;
    transform: translateY(2px);
}

/* Invisible hover bridge to ensure seamless cursor movement */
#txt-hint::before, .hints-dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -10px;
    right: -10px;
    bottom: -6px;
    z-index: -1;
}

.title-group:hover #txt-hint,
.title-group:hover .hints-dropdown,
.title-group.menu-obert #txt-hint,
.title-group.menu-obert .hints-dropdown,
#txt-titol:hover + #txt-hint,
#txt-hint:hover,
#txt-hint:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.hint-link, .hint-text {
    display: inline-block;
    font-size: 11px;
    color: var(--ui-muted);
    opacity: 0.88;
    letter-spacing: 0.6px;
    text-transform: capitalize !important;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1.3;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.hint-link:hover,
.hint-link:focus-visible,
.hint-text:hover,
.hint-text:focus-visible {
    color: var(--text-color);
    opacity: 1;
}

.hint-link::after,
a#txt-hint::after {
    content: ' ↗';
    font-size: 10px;
    opacity: 0.8;
}

.accions-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    transition: opacity 0.3s ease;
    align-self: flex-start;
    margin-top: 0;
    line-height: 1.25;
}

.pdf-status {
    font-size: 10px !important; color: var(--ui-muted) !important;
    min-width: 260px; display: inline-block; letter-spacing: 0.6px;
    text-transform: none !important;
}

.logo-placeholder {
    width: 58px; height: 58px; border: 1px dashed var(--text-color); border-radius: 2px;
    display: flex; align-items: center; justify-content: center; font-size: 11px; opacity: 0.5;
}
.logo-img, .shared-logo {
    height: 52px; width: auto; max-width: 160px; display: block; object-fit: contain;
    cursor: pointer; flex-shrink: 0;
    transition: opacity 0.25s ease;
}
.ui-top-left a:hover .logo-img,
.ui-top-left a:hover .shared-logo,
.logo-img:hover,
.shared-logo:hover {
    opacity: 0.68;
}

.hint-text {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ui-muted);
    opacity: 0.95;
    letter-spacing: 0.6px;
    text-transform: capitalize !important;
    min-height: 14px;
    transition: opacity 0.15s ease;
    font-weight: 700;
}

.btn-text, .ui-element .btn-text, .shared-theme {
    background: none; border: none; font-family: inherit; font-size: 11px;
    font-weight: 500; letter-spacing: 0.8px; cursor: pointer; color: var(--text-color);
    padding: 0; text-transform: uppercase; text-decoration: none; transition: color 0.2s ease;
}
.btn-text:hover, .ui-element .btn-text:hover, .shared-theme:hover { color: var(--ui-muted); }

/* ==========================================
   MENÚ PRINCIPAL DE NAVEGACIÓ AMB ICONES VECTORIALS
   ========================================== */
.home-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Animació d'entrada neta, suau i fluida per als logos i textos de les 4 seccions */
@keyframes navItemEntrance {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(36px, 6vw, 64px);
}

.nav-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
    padding: 8px 14px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-home .nav-principal .nav-item {
    animation: navItemEntrance 1.4s cubic-bezier(0.12, 1, 0.25, 1) both;
}

body.is-home .nav-principal .nav-item:nth-child(1) { animation-delay: 0.10s; }
body.is-home .nav-principal .nav-item:nth-child(2) { animation-delay: 0.22s; }
body.is-home .nav-principal .nav-item:nth-child(3) { animation-delay: 0.34s; }
body.is-home .nav-principal .nav-item:nth-child(4) { animation-delay: 0.46s; }

.nav-item:hover,
.nav-item:focus-visible,
.nav-item.active {
    opacity: 0.85;
}

.nav-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    text-align: center;
}

.nav-num {
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.2px;
    color: var(--text-color);
    opacity: 0.85;
}

.nav-text {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

.nav-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-svg-icon {
    display: block;
    width: 60px;
    height: 60px;
    stroke: currentColor;
    stroke-width: 0.8;
    overflow: visible;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    image-rendering: -webkit-optimize-contrast;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: stroke 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-svg-icon * {
    shape-rendering: geometricPrecision;
}

/* Micro-animacions interactives per als 4 apartats */
.nav-principal:hover .nav-item:not(:hover) {
    opacity: 0.45;
    transition: opacity 0.35s ease;
}

.nav-item {
    transition: opacity 0.35s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-item:active {
    transform: scale(0.96);
}

/* 1. PORTAFOLIS: S'amplia des del centre mantenint les línies superior i inferior 100% contínues */
.svg-portafolis {
    overflow: visible;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.book-frame,
.book-spine {
    transform-origin: 12px 12px;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.nav-item:hover .book-frame,
.nav-item:focus-visible .book-frame,
.nav-item:active .book-frame {
    transform: scaleX(1.42);
}

/* 2. PROJECTES: 4 quadrants amb transició 100% fluida on totes les línies estan del principi al final */
.proj-grid-wrap {
    transform-origin: 12px 12px;
    will-change: transform;
}
.proj-quad {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.nav-item:hover .quad-tl,
.nav-item:focus-visible .quad-tl,
.nav-item:active .quad-tl {
    transform: translate(-1.6px, -1.6px);
}
.nav-item:hover .quad-tr,
.nav-item:focus-visible .quad-tr,
.nav-item:active .quad-tr {
    transform: translate(1.6px, -1.6px);
}
.nav-item:hover .quad-bl,
.nav-item:focus-visible .quad-bl,
.nav-item:active .quad-bl {
    transform: translate(-1.6px, 1.6px);
}
.nav-item:hover .quad-br,
.nav-item:focus-visible .quad-br,
.nav-item:active .quad-br {
    transform: translate(1.6px, 1.6px);
}

/* 3. ARXIU: Desplaçament suau i elegant cap als dos costats */
.archive-line {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.nav-item:hover .line-1,
.nav-item:focus-visible .line-1,
.nav-item:active .line-1 {
    transform: translateX(6px);
}
.nav-item:hover .line-2,
.nav-item:focus-visible .line-2,
.nav-item:active .line-2 {
    transform: translateX(-6px);
}
.nav-item:hover .line-3,
.nav-item:focus-visible .line-3,
.nav-item:active .line-3 {
    transform: translateX(6px);
}

/* 4. PERFIL: Rotació 45° i expansió continguda */
.profile-inner {
    transform-origin: 12px 12px;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.nav-item:hover .profile-inner,
.nav-item:focus-visible .profile-inner,
.nav-item:active .profile-inner {
    transform: rotate(45deg) scale(1.14);
}

.nav-description {
    position: absolute;
    top: calc(100% + 38px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(520px, 90vw);
    font-family: inherit;
    font-size: 12px;
    color: var(--ui-muted);
    letter-spacing: 0.4px;
    text-transform: none;
    text-align: center;
    line-height: 1.5;
    pointer-events: none;
    user-select: none;
    font-weight: 400;
    opacity: 0;
    min-height: 20px;
    transition: opacity 0.25s ease-out;
    will-change: opacity;
    z-index: 50;
}

.nav-description.visible,
.nav-description.is-visible {
    opacity: 0.95 !important;
}

/* ==========================================
   SEQÜÈNCIA DE SORTIDA D'INICI (INDEX EXIT ANIMATION)
   ========================================== */
body.navigating-zoom-in .nav-item:not(.active-target) {
    opacity: 0 !important;
    transform: translateY(14px) scale(0.92) !important;
    pointer-events: none !important;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.navigating-zoom-in .nav-description,
body.navigating-zoom-in .page-socials,
body.navigating-zoom-in .version-pill {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, transform 0.4s ease !important;
}

body.navigating-zoom-in .nav-item.active-target {
    pointer-events: none !important;
    opacity: 1 !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.navigating-zoom-in .nav-item:not(.active-target),
    body.navigating-zoom-in .nav-description,
    body.navigating-zoom-in .page-socials,
    body.navigating-zoom-in .version-pill {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================
   BOTONS ADAPTATIUS AMB ICONES SVG PER A MÒBIL
   ========================================== */
/* ESCRIPTORI (> 768px): text sempre visible, icones SVG ocultes */
.btn-icon-label { display: none !important; }
.btn-text-label { display: inline-block !important; }

.mobile-social-actions,
.mobile-social-toggle,
.mobile-share-btn,
.mobile-social-popup,
.mobile-toast {
    display: none !important;
}

/* Enllaços socials per a peu de pàgina */
.page-socials {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.page-socials .xarxes-links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.page-socials .xarxes-links a {
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease, opacity .2s ease;
    cursor: pointer;
}

.page-socials .xarxes-links a:hover,
.page-socials .xarxes-links a:focus-visible {
    color: var(--ui-muted);
    border-bottom: 1px solid var(--text-color);
    opacity: 0.9;
}

.xarxes-indicador,
.ui-element .xarxes-indicador,
.page-socials .xarxes-indicador,
.ui-bottom-right .xarxes-indicador {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: var(--ui-muted) !important;
    min-height: 14px !important;
    letter-spacing: 0.6px !important;
    text-transform: none !important;
    transition: color .2s ease !important;
    user-select: none !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .home-main {
        gap: 48px !important;
        width: 100% !important;
        align-items: center !important;
    }
    .nav-principal {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 36px 48px !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        align-items: start !important;
        justify-items: center !important;
        place-self: center !important;
    }
    .nav-item {
        display: flex !important;
        font-size: 13px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        color: var(--text-color) !important;
        width: 100% !important;
        text-align: center !important;
    }
    .nav-icon-wrap {
        width: 60px !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .nav-label {
        text-align: center !important;
        white-space: nowrap !important;
        gap: 6px !important;
        flex-direction: column !important;
    }
    .nav-num {
        font-size: 18px !important;
        font-weight: 500 !important;
        letter-spacing: 1.2px !important;
        opacity: 0.7 !important;
        color: var(--ui-muted) !important;
        display: block !important;
        margin-bottom: 2px !important;
    }
    .nav-text {
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 1.4px !important;
    }
    .nav-svg-icon {
        width: 60px !important;
        height: 60px !important;
        stroke-width: 0.75 !important;
    }
    .nav-description {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        max-width: 290px !important;
        min-height: 28px !important;
        line-height: 1.5 !important;
        margin-top: 24px !important;
        text-align: center !important;
        opacity: 0;
        transition: opacity 0.25s ease-out !important;
    }
    .nav-description.visible,
    .nav-description.is-visible {
        opacity: 0.95 !important;
    }

    /* Menú superior esquerra adaptatiu per a mòbil */
    .ui-top-left {
        top: 14px !important;
        left: 14px !important;
        max-width: calc(100% - 28px) !important;
        gap: 12px !important;
        z-index: 1000 !important;
    }
    
    .ui-top-left .shared-logo {
        height: 52px !important;
        width: auto !important;
        max-width: 160px !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .ui-top-left .title-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        flex: 1 !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    .ui-top-left .title-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 2px !important;
        order: 1 !important;
        min-width: 0 !important;
        margin-right: 0 !important;
    }

    #txt-titol {
        font-size: 11px !important;
        text-align: left !important;
        line-height: 1.25 !important;
        color: var(--text-color) !important;
    }

    #txt-titol strong, .nav-slash, #txt-titol .nav-slash {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
    }

    #txt-canviable {
        display: block !important;
        margin-top: 3px !important;
        font-size: 13px !important;
        font-kerning: normal !important;
    }

    #txt-hint, .hints-dropdown {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        background: transparent !important;
        padding: 6px 0 0 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid var(--text-color) !important;
        min-width: 100px !important;
        gap: 4px !important;
        z-index: 1100 !important;
    }

    body.mode-fosc #txt-hint,
    body.mode-fosc .hints-dropdown {
        background: transparent !important;
        border-top: 1px solid var(--text-color) !important;
        box-shadow: none !important;
    }

    .hint-link {
        font-size: 11px !important;
        padding: 3px 0 !important;
        opacity: 0.7 !important;
        line-height: 1.3 !important;
    }

    .hint-link:active {
        opacity: 1 !important;
        color: var(--text-color) !important;
    }

    /* Botons fosc i baixa just a la dreta del títol */
    .accions-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2px !important;
        order: 2 !important;
        margin: 0 !important;
        padding-top: 2px !important;
        flex-shrink: 0 !important;
    }

    /* Ocultar text i mostrar icones SVG */
    .btn-text-label { display: none !important; }
    
    .btn-icon-label {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--text-color);
        transition: color 0.3s ease;
    }

    .btn-icon-mobile {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 61px !important;
        height: 61px !important;
        min-width: 61px !important;
        min-height: 61px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color 0.2s ease, transform 0.15s ease !important;
    }

    .btn-icon-mobile:active {
        transform: scale(0.92);
        background: rgba(0, 0, 0, 0.06) !important;
    }

    body.mode-fosc .btn-icon-mobile:active {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* Estat de Lluna / Sol (elements legacy sense .t-icon) */
    body:not(.mode-fosc):not(.dark) .icon-theme.icon-moon:not(.t-icon) { display: block !important; }
    body:not(.mode-fosc):not(.dark) .icon-theme.icon-sun:not(.t-icon) { display: none !important; }
    body.mode-fosc .icon-theme.icon-moon:not(.t-icon),
    body.dark .icon-theme.icon-moon:not(.t-icon),
    html.mode-fosc .icon-theme.icon-moon:not(.t-icon),
    html.dark .icon-theme.icon-moon:not(.t-icon) { display: none !important; }
    body.mode-fosc .icon-theme.icon-sun:not(.t-icon),
    body.dark .icon-theme.icon-sun:not(.t-icon),
    html.mode-fosc .icon-theme.icon-sun:not(.t-icon),
    html.dark .icon-theme.icon-sun:not(.t-icon) { display: block !important; }

    .pdf-status { display: none !important; }

    /* ==========================================
       MENÚ COL·LAPSABLE DE XARXES I COMPARTIR (SENSE OMBRA NI CERCLE)
       ========================================== */
    .page-socials,
    .ui-bottom-right {
        right: 14px !important;
        bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
        position: fixed !important;
        z-index: 250 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
    }

    /* Ocultar enllaços de text a mòbil */
    .page-socials .xarxes-links,
    .ui-bottom-right .xarxes-links,
    .xarxes-indicador {
        display: none !important;
    }
    /* Contenidor dels botons d'acció inferiors */
    .mobile-social-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    /* Botó d'obertura del menú desplegable i botó de compartir web (mida tàctil 44x44px) */
    .mobile-social-toggle,
    .mobile-share-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: transparent !important;
        border: none !important;
        outline: none;
        color: var(--text-color) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease, color 0.4s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-social-toggle:focus-visible,
    .mobile-share-btn:focus-visible {
        outline: 2px solid var(--text-color) !important;
        outline-offset: 2px !important;
    }

    .mobile-share-btn:active,
    .mobile-social-toggle:active {
        transform: scale(0.9) !important;
        opacity: 0.5 !important;
        background: transparent !important;
    }

    body.mode-fosc .mobile-share-btn:active,
    body.mode-fosc .mobile-social-toggle:active {
        background: transparent !important;
        opacity: 0.5 !important;
    }

    .mobile-social-toggle.is-open {
        transform: rotate(45deg);
        background: transparent !important;
        color: var(--text-color) !important;
    }

    /* SVG dins dels botons mòbil: mida generosa i clara */
    .mobile-social-toggle svg,
    .mobile-share-btn svg,
    .mobile-social-item svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.2 !important;
    }

    /* Animació pop en clicar el botó de compartir */
    @keyframes sharePop {
        0% { transform: scale(1); }
        35% { transform: scale(0.8) rotate(-12deg); }
        70% { transform: scale(1.24) rotate(6deg); }
        100% { transform: scale(1) rotate(0deg); }
    }

    .mobile-share-btn.animate-pop {
        animation: sharePop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    /* Submenú desplegable flotant (sense fons, només línia inferior) */
    .mobile-social-popup {
        position: absolute !important;
        bottom: calc(100% + 10px) !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 0 6px 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--text-color) !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(0.92) !important;
        transform-origin: bottom right !important;
        pointer-events: none !important;
        z-index: 260 !important;
        transition: opacity 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0.22s ease, border-color 0.4s ease !important;
    }

    .mobile-social-popup.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }

    .mobile-social-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 61px !important;
        height: 61px !important;
        min-width: 61px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        text-decoration: none !important;
        padding: 0 !important;
        transition: background-color 0.2s ease, transform 0.15s ease, color 0.3s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-social-item:active {
        transform: scale(0.9);
        background: rgba(0, 0, 0, 0.08) !important;
    }

    body.mode-fosc .mobile-social-item:active {
        background: rgba(255, 255, 255, 0.12) !important;
    }

    /* Toast de feedback al copiar correu o enllaç a mòbil */
    .mobile-toast {
        position: absolute !important;
        bottom: calc(100% + 56px) !important;
        right: 0 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
        padding: 5px 10px !important;
        border-radius: 4px !important;
        background: var(--text-color) !important;
        color: var(--bg-color) !important;
        box-shadow: 0 4px 12px var(--shadow-color) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(4px) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    .mobile-toast.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* ==========================================
   BARRA D'UTILITATS SUPERIOR DRETA (IDIOMA · PDF · TEMA)
   ========================================== */
.top-utility-bar,
.ui-top-right {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 300;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.lang-nav,
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    position: relative;
}

.lang-trigger {
    display: none !important;
}

.lang-trigger,
.lang-trigger .lang-current,
.ui-element .lang-trigger,
.ui-element .lang-trigger .lang-current {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.lang-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.lang-btn {
    background: transparent;
    border: none;
    padding: 4px 4px;
    margin: -4px 0;
    position: relative;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-color);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    line-height: inherit;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hitbox ampliada per poder clicar amb facilitat a escriptori */
.lang-btn::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -6px;
    right: -6px;
    z-index: 1;
}

.lang-btn:hover,
.lang-btn:focus-visible {
    color: var(--ui-muted);
    border-bottom: 1px solid var(--text-color);
}

.lang-btn.active {
    font-weight: 700;
    color: var(--text-color);
    border-bottom: 1px solid var(--text-color);
}

.lang-sep {
    color: var(--text-color);
    font-size: 11px;
    letter-spacing: 0.8px;
    user-select: none;
    padding: 0 1px;
}

.utility-divider {
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: var(--text-color);
    opacity: 0.3;
    vertical-align: middle;
    flex-shrink: 0;
    font-size: 0;
    color: transparent;
    margin: 0 1px;
    user-select: none;
}

.utility-link {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    line-height: inherit;
    display: inline-flex;
    align-items: center;
}

.utility-link:hover,
.utility-link:focus-visible {
    color: var(--ui-muted);
    border-bottom: 1px solid var(--text-color);
}

.theme-toggle-btn {
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-color);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    line-height: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
    color: var(--ui-muted);
    border-bottom: 1px solid var(--text-color);
}

.theme-toggle-btn .btn-icon-label {
    display: none;
}

.theme-toggle-btn .btn-text-label {
    display: inline;
}

/* ==========================================
   TRANSITIONS.DEV — ICON SWAP
   ========================================== */
.t-icon-swap {
    position: relative;
    display: inline-grid;
}

.t-icon-swap .t-icon {
    grid-area: 1 / 1;
    transition:
        opacity   var(--icon-swap-dur, 450ms) var(--icon-swap-ease, ease-in-out),
        filter    var(--icon-swap-dur, 450ms) var(--icon-swap-ease, ease-in-out),
        transform var(--icon-swap-dur, 450ms) var(--icon-swap-ease, ease-in-out);
    will-change: opacity, filter, transform;
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"],
body:not(.mode-fosc):not(.dark) .theme-toggle-btn .t-icon[data-icon="a"],
body.mode-fosc .theme-toggle-btn .t-icon[data-icon="b"],
body.dark .theme-toggle-btn .t-icon[data-icon="b"],
html.mode-fosc .theme-toggle-btn .t-icon[data-icon="b"],
html.dark .theme-toggle-btn .t-icon[data-icon="b"] {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1) !important;
    pointer-events: auto;
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"],
body:not(.mode-fosc):not(.dark) .theme-toggle-btn .t-icon[data-icon="b"],
body.mode-fosc .theme-toggle-btn .t-icon[data-icon="a"],
body.dark .theme-toggle-btn .t-icon[data-icon="a"],
html.mode-fosc .theme-toggle-btn .t-icon[data-icon="a"],
html.dark .theme-toggle-btn .t-icon[data-icon="a"] {
    opacity: 0 !important;
    filter: blur(var(--icon-swap-blur, 3px)) !important;
    transform: scale(var(--icon-swap-start-scale, 0.25)) !important;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .t-icon-swap .t-icon {
        transition: none !important;
    }
}

/* ==========================================
   ADAPTACIONS MÒBIL PER A LA BARRA D'UTILITATS
   ========================================== */
@media (max-width: 768px) {
    .top-utility-bar,
    .ui-top-right {
        top: 14px !important;
        right: 14px !important;
        gap: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        z-index: 1001 !important;
    }

    .ui-top-right .top-utility-bar {
        position: static !important;
        top: auto !important;
        right: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 6px !important;
    }

    .top-utility-bar .utility-divider,
    .ui-top-right .utility-divider {
        display: none !important;
    }

    /* Ocultar indicador de text de les pàgines a mòbil */
    .info-box,
    #info-box-general,
    .info-paginas,
    .info-projecte,
    .progress-feedback-text {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .btn-galeria,
    .theme-toggle-btn,
    .utility-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    .btn-galeria .btn-text-label,
    .theme-toggle-btn .btn-text-label,
    .utility-link .btn-text-label {
        display: none !important;
    }
    .btn-galeria .btn-icon-label,
    .theme-toggle-btn .btn-icon-label,
    .utility-link .btn-icon-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .btn-galeria::after {
        display: none !important;
    }

    .btn-galeria svg,
    .theme-toggle-btn svg,
    .utility-link svg,
    .icon-download {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.2 !important;
    }

    /* Galeria dropdown a mòbil ancorat a la dreta */
    .galeria-dropdown {
        left: auto !important;
        right: 0 !important;
        text-align: right !important;
        align-items: flex-end !important;
    }
    .galeria-dropdown-item {
        justify-content: flex-end !important;
    }

    /* Selector d'idiomes a mòbil: desplegable amb animació que sempre s'obre cap abaix */
    .lang-nav,
    .lang-switcher {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        height: 38px !important;
        min-height: 38px !important;
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        z-index: 350;
    }

    .lang-trigger,
    .ui-element .lang-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 38px !important;
        width: 44px !important;
        min-width: 44px !important;
        padding: 0 4px !important;
        background: transparent !important;
        border: none !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        gap: 3px !important;
        user-select: none !important;
        box-sizing: border-box !important;
        transition: color 0.3s ease !important;
    }

    .lang-trigger .lang-current,
    .ui-element .lang-trigger .lang-current {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: inherit !important;
    }

    .lang-trigger:focus-visible {
        outline: 2px solid var(--text-color) !important;
        outline-offset: 2px !important;
    }

    .lang-trigger .lang-arrow {
        font-size: 11px !important;
        line-height: 1 !important;
        opacity: 0.85 !important;
        display: inline-block !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transform-origin: center !important;
    }

    .lang-nav.is-open .lang-trigger .lang-arrow,
    .lang-switcher.is-open .lang-trigger .lang-arrow {
        transform: rotate(180deg) !important;
    }

    /* Menú desplegable d'idiomes sempre cap abaix amb animació suau i línia separadora */
    .lang-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 44px !important;
        min-width: 44px !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.2)) !important;
        padding: 4px 0 0 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-6px) !important;
        transform-origin: top center !important;
        transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.22s !important;
        z-index: 360 !important;
        gap: 2px !important;
    }

    body.mode-fosc .lang-dropdown {
        border-top-color: rgba(255, 255, 255, 0.25) !important;
    }

    .lang-nav.is-open .lang-dropdown,
    .lang-switcher.is-open .lang-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .lang-dropdown .lang-sep {
        display: none !important;
    }

    .lang-dropdown .lang-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        height: 32px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        color: var(--ui-muted, #888888) !important;
        opacity: 0.75 !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color 0.15s ease, opacity 0.15s ease !important;
    }

    .lang-dropdown .lang-btn:hover {
        color: var(--text-color) !important;
        opacity: 1 !important;
        background: transparent !important;
    }

    .lang-dropdown .lang-btn:focus-visible {
        color: var(--text-color) !important;
        opacity: 1 !important;
        background: transparent !important;
        outline: 2px solid var(--text-color) !important;
        outline-offset: 2px !important;
    }

    /* L'idioma actualment seleccionat no es mostra al desplegable de mòbil, només les altres 2 opcions */
    .lang-dropdown .lang-btn.active {
        display: none !important;
    }

    /* Botó de tema i botó de descàrrega: àrea de toc tàctil de 44x44px en mòbil (WCAG 2.5.5) */
    .theme-toggle-btn,
    .utility-link,
    .lang-trigger {
        padding: 0;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-bottom: none !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .theme-toggle-btn .btn-text-label,
    .utility-link .btn-text-label {
        display: none !important;
    }

    .theme-toggle-btn .btn-icon-label,
    .utility-link .btn-icon-label {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        display: inline-grid !important;
        place-items: center;
        width: 28px;
        height: 28px;
        color: var(--text-color);
        position: relative;
    }

    .theme-toggle-btn .btn-icon-label svg,
    .utility-link .btn-icon-label svg,
    .utility-link .icon-download {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.2 !important;
    }

    .theme-toggle-btn .btn-icon-label .icon-theme,
    .theme-toggle-btn .t-icon-swap .t-icon {
        display: block !important;
        grid-area: 1 / 1;
    }
}

/* ==========================================
   UNIFICACIÓ DE GRUIX DE TRAÇAT (ICONES SUPERIORS I INFERIORS)
   ========================================== */
.theme-toggle-btn svg,
.utility-link svg,
.icon-download,
.btn-galeria svg,
.top-gallery-btn svg,
.icon-close-gallery,
.mobile-social-toggle svg,
.mobile-share-btn svg,
.mobile-social-item svg {
    stroke-width: 1.2 !important;
}

.perfil-container.wip-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 520px;
    width: 90%;
    margin: auto;
    gap: 20px;
    padding: 32px 16px;
    animation: fadeInWip 0.4s ease forwards;
}

@keyframes fadeInWip {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.wip-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--grid-color, rgba(0, 0, 0, 0.16));
    border-radius: 2px;
    background: rgba(128, 128, 128, 0.05);
    font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ui-muted);
    user-select: none;
}

.wip-icon {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-color);
}

.mono-code {
    font-family: inherit;
    font-size: 10px;
    opacity: 0.9;
}

.wip-title {
    font-size: clamp(20px, 4.5vw, 28px);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.2;
}

.wip-desc.mono-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--ui-muted);
    max-width: 440px;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.4px;
    font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
}

.wip-actions {
    margin-top: 8px;
}

.btn-technic {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-color);
    padding: 8px 16px;
    border: 1px solid var(--text-color);
    border-radius: 2px;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-technic:hover,
.btn-technic:focus-visible {
    background-color: var(--text-color);
    color: var(--bg-color);
    transform: translateY(-1px);
}

/* Títol del post en negreta */

/* Títol del post en negreta */
#post-titol {
    font-weight: 700 !important;
}

#txt-canviable {
    text-transform: none !important;
}

/* ==========================================
   INTERACTIVE IMAGE LIGHTBOX (SMOOTH & FULL SCREEN)
   ========================================== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

/* Fons translúcid amb desenfocament suau i progressiu */
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 12, 0.48);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.lightbox-overlay.is-open .lightbox-backdrop {
    opacity: 1;
}

body:not(.mode-fosc) .lightbox-backdrop {
    background: rgba(240, 241, 243, 0.54);
}

body:not(.mode-fosc) .lightbox-overlay.is-open .lightbox-backdrop {
    opacity: 1;
}

/* Barra de control superior */
.lightbox-header {
    position: absolute;
    top: 24px;
    left: 32px;
    right: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    pointer-events: none;
}

.lightbox-overlay.is-open .lightbox-header,
.lightbox-overlay.active .lightbox-header {
    pointer-events: auto;
}

/* Títol de la imatge: entrada suau esglaonada */
.lightbox-title {
    display: inline-flex;
    align-items: center;
    padding: 4px 4px;
    margin: 0;
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: 15px;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: var(--text-color, #ffffff);
    user-select: none;
    text-transform: none;
    max-width: calc(100% - 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1), transform 0.22s cubic-bezier(0.4, 0, 1, 1);
}

.lightbox-overlay.is-open .lightbox-title,
.lightbox-overlay.active .lightbox-title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.48s 0.12s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Eines de zoom i botó de tancament: entrada suau esglaonada */
.lightbox-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1), transform 0.22s cubic-bezier(0.4, 0, 1, 1);
}

.lightbox-overlay.is-open .lightbox-tools,
.lightbox-overlay.active .lightbox-tools {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.48s 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-tools .ctrl-btn {
    background: transparent;
    border: none;
    padding: 4px 4px;
    font-family: monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-color, #ffffff);
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.lightbox-tools .ctrl-btn:hover {
    color: var(--ui-muted, #6e6e73);
    transform: translateY(-1px);
}

.lightbox-tools .ctrl-btn:focus-visible {
    color: var(--ui-muted, #6e6e73);
    outline: 2px solid var(--text-color) !important;
    outline-offset: 2px !important;
}

.lightbox-tools .ctrl-divider {
    color: var(--ui-muted, #6e6e73);
    font-size: 11px;
    user-select: none;
    opacity: 0.5;
    margin: 0 2px;
}

/* Àrea de la imatge gran a tota la pantalla (sense marge inferior) */
.lightbox-stage {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-overlay.is-open .lightbox-stage {
    opacity: 1;
    transform: scale(1);
}

#lightbox-img {
    max-width: 72vw;
    max-height: 70vh;
    width: auto;
    height: auto;
    margin: 0;
    object-fit: contain;
    transform-origin: center center;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    filter: none !important;
    -webkit-filter: none !important;
}

#lightbox-img.is-zoomed {
    cursor: grab;
}

#lightbox-img.is-dragging {
    transition: none !important;
}

/* Cursor interactiu a les fotos dels articles i galeries */
.post-image, .publication-img, .project-gallery-img {
    cursor: zoom-in;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.post-image:hover, .publication-img:hover {
    opacity: 0.92;
}

@media (max-width: 768px) {
    /* Capçalera del visor a mòbil: neta, amb espai segur i títol destacat */
    .lightbox-header {
        top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        left: 16px !important;
        right: 16px !important;
        padding: 0 !important;
    }

    /* Títol de les imatges ajustat i proporcionat a mòbil */
    .lightbox-title {
        font-size: clamp(15px, 4vw, 16.5px) !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.25 !important;
        max-width: calc(100vw - 64px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        padding: 2px 0 !important;
    }

    /* Ocultar botons d'escala i zoom a mòbil */
    #lightbox-zoom-out,
    #lightbox-zoom-reset,
    #lightbox-zoom-in,
    .lightbox-tools .ctrl-divider {
        display: none !important;
    }

    .lightbox-tools {
        gap: 0 !important;
    }

    #lightbox-close {
        font-size: 15px !important;
        padding: 6px 8px !important;
    }

    /* Eliminar fletxes de navegació a mòbil */
    .lightbox-overlay .nav-btn,
    .lightbox-overlay .nav-prev,
    .lightbox-overlay .nav-next,
    #lightbox-prev,
    #lightbox-next,
    .lightbox-overlay .nav-arrow-left,
    .lightbox-overlay .nav-arrow-right {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Visor de fotos sense marge als costats (edge-to-edge) a mòbil */
    .lightbox-stage {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #lightbox-img {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100dvh - 120px) !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 auto !important;
    }
}

/* ==========================================
   CURSOR PERSONALITZAT CAD CROSSHAIR
   ========================================== */
.has-custom-cursor,
.has-custom-cursor * {
    cursor: none !important;
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    /* centrat sobre el punt exacte del cursor */
    margin-left: -6px;
    margin-top: -6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.custom-cursor.cursor-visible {
    opacity: 1;
}

.cursor-crosshair {
    display: block;
    overflow: visible;
    fill: none;
    stroke: var(--text-color, #000);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.4s ease, transform 0.12s ease;
}

/* Per defecte: creueta (+) — sempre visible */
.cursor-shape-cross { opacity: 1; transition: opacity 0.12s ease; }
/* Fletxa dreta (>) */
.cursor-shape-next  { opacity: 0; transition: opacity 0.12s ease; }
/* Fletxa esquerra (<) */
.cursor-shape-prev  { opacity: 0; transition: opacity 0.12s ease; }
/* Lupa + zoom in */
.cursor-shape-zoom-in  { opacity: 0; transition: opacity 0.12s ease; }
/* Lupa - zoom out */
.cursor-shape-zoom-out { opacity: 0; transition: opacity 0.12s ease; }
/* Mà de desplaçament */
.cursor-shape-grab  { opacity: 0; transition: opacity 0.12s ease; }

/* === ESTAT: Navegació cap endavant (>) === */
.custom-cursor.cursor-turn-next .cursor-shape-cross { opacity: 0; }
.custom-cursor.cursor-turn-next .cursor-shape-next  { opacity: 1; }

/* === ESTAT: Navegació cap enrere (<) === */
.custom-cursor.cursor-turn-prev .cursor-shape-cross { opacity: 0; }
.custom-cursor.cursor-turn-prev .cursor-shape-prev  { opacity: 1; }

/* Mode fletxa: 10% més gran (scale 1.1) */
.custom-cursor.cursor-turn-next .cursor-crosshair,
.custom-cursor.cursor-turn-prev .cursor-crosshair {
    transform: scale(1.1);
    transform-origin: center;
}

/* === ESTAT: Zoom in (lupa amb +) === */
.custom-cursor.cursor-zoom-in .cursor-shape-cross    { opacity: 0; }
.custom-cursor.cursor-zoom-in .cursor-shape-zoom-in  { opacity: 1; }

/* === ESTAT: Zoom out (lupa amb —) === */
.custom-cursor.cursor-zoom-out .cursor-shape-cross    { opacity: 0; }
.custom-cursor.cursor-zoom-out .cursor-shape-zoom-out { opacity: 1; }

/* === ESTAT: Grab (mà) === */
.custom-cursor.cursor-grab .cursor-shape-cross { opacity: 0; }
.custom-cursor.cursor-grab .cursor-shape-grab  { opacity: 1; }

/* === ESTAT: Hover sobre element interactiu (mateix comportament sòlid i net que la fletxa) === */
.custom-cursor.cursor-hover .cursor-shape-cross {
    opacity: 1;
}

.custom-cursor.cursor-hover .cursor-crosshair {
    stroke-width: 1.2;
    transform: rotate(45deg) scale(1.15);
    transform-origin: center;
}

/* === Click actiu: subtil feedback === */
.custom-cursor.cursor-active .cursor-crosshair {
    transform: scale(0.85);
    transform-origin: center;
}

.custom-cursor.cursor-hover.cursor-active .cursor-crosshair {
    transform: rotate(45deg) scale(0.98);
}

.custom-cursor.cursor-turn-next.cursor-active .cursor-crosshair,
.custom-cursor.cursor-turn-prev.cursor-active .cursor-crosshair {
    transform: scale(0.95);
    transform-origin: center;
}

/* ==========================================
   SUPRESSIÓ DE CURSOR PERSONALITZAT EN MÒBIL / PANTALLES TÀCTILS (WCAG 2.5.1)
   ========================================== */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .custom-cursor,
    #custom-cursor {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .has-custom-cursor,
    .has-custom-cursor * {
        cursor: auto !important;
    }
}

/* ==========================================================================
   IMAGE NAVIGATOR & LIGHTBOX PUBLICATION ARROWS (Estil Arxiu / Portafolis)
   ========================================================================== */

/* Contenidor component autònom del navegador d'imatges */
.image-navigator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* Àrea central de visualització de la imatge */
.image-viewport {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 320px;
}

.image-viewport img,
.navigator-image {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 1px;
    will-change: opacity, transform, filter;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animació de transició d'imatge estil Arxiu (fade + subtil escalat & desenfocament) */
@keyframes aparicioImatgeNavigator {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(12px) scale(0.98);
    }
    50% {
        opacity: 0.85;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

.image-anim-enter {
    animation: aparicioImatgeNavigator 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.image-anim-slide-next {
    animation: slideInFromRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.image-anim-slide-prev {
    animation: slideInFromLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideInFromRight {
    0% {
        opacity: 0.3;
        transform: translate3d(24px, 0, 0) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0.3;
        transform: translate3d(-24px, 0, 0) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Botons de navegació lateral (fletxes '<' i '>') - Calcat exacte de l'Arxiu */
.nav-btn {
    position: absolute;
    top: 50%;
    background: none;
    border: none;
    font-size: 34px;
    font-family: monospace, Courier, 'Courier New', monospace;
    font-weight: 300;
    cursor: pointer;
    padding: 20px;
    color: var(--text-color, #ffffff);
    opacity: 0.35;
    z-index: 25;
    transition: opacity 0.35s ease, color 0.4s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay .nav-prev,
.lightbox-overlay .nav-arrow-left {
    left: 16px;
    transform: translateY(-50%) translateX(-12px);
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1), transform 0.22s cubic-bezier(0.4, 0, 1, 1), color 0.4s ease;
}

.lightbox-overlay .nav-next,
.lightbox-overlay .nav-arrow-right {
    right: 16px;
    transform: translateY(-50%) translateX(12px);
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1), transform 0.22s cubic-bezier(0.4, 0, 1, 1), color 0.4s ease;
}

.lightbox-overlay.is-open .nav-prev:not(.ocult):not(:disabled):not([aria-disabled="true"]),
.lightbox-overlay.active .nav-prev:not(.ocult):not(:disabled):not([aria-disabled="true"]) {
    opacity: 0.35;
    transform: translateY(-50%) translateX(0);
    transition: opacity 0.48s 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}

.lightbox-overlay.is-open .nav-next:not(.ocult):not(:disabled):not([aria-disabled="true"]),
.lightbox-overlay.active .nav-next:not(.ocult):not(:disabled):not([aria-disabled="true"]) {
    opacity: 0.35;
    transform: translateY(-50%) translateX(0);
    transition: opacity 0.48s 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}

.nav-arrow-left {
    left: 16px;
}

.nav-arrow-right {
    right: 16px;
}

/* Feedback d'interacció: Hover i Active per a Lightbox */
.lightbox-overlay .nav-btn:hover:not(:disabled):not(.ocult):not([aria-disabled="true"]) {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.lightbox-overlay .nav-btn:active:not(:disabled):not(.ocult):not([aria-disabled="true"]) {
    transform: translateY(-50%) scale(0.92) !important;
}

/* Accessibilitat per teclat estricta segons WCAG 2.1 / 2.2 AA (AGENTS.md) */
.nav-btn:focus-visible {
    opacity: 1;
    outline: 2px solid var(--text-color, #ffffff) !important;
    outline-offset: 2px !important;
}

/* Estat desactivat / límit de galeria (boundary state) */
.nav-btn.ocult,
.nav-btn:disabled,
.nav-btn[aria-disabled="true"] {
    opacity: 0 !important;
    pointer-events: none !important;
    cursor: default !important;
}

.lightbox-overlay .nav-prev.ocult,
.lightbox-overlay .nav-prev:disabled,
.lightbox-overlay .nav-prev[aria-disabled="true"] {
    transform: translateY(-50%) translateX(-14px) !important;
}

.lightbox-overlay .nav-next.ocult,
.lightbox-overlay .nav-next:disabled,
.lightbox-overlay .nav-next[aria-disabled="true"] {
    transform: translateY(-50%) translateX(14px) !important;
}

/* Zones de clic expandides (Hotspots als extrems laterals) */
.nav-hotspot {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(90px, 22vw, 260px);
    z-index: 20;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.25s ease;
}

.nav-hotspot-left {
    left: 0;
}

.nav-hotspot-right {
    right: 0;
}

.nav-hotspot.ocult,
.nav-hotspot:disabled,
.nav-hotspot[aria-disabled="true"] {
    pointer-events: none !important;
    cursor: default !important;
}

/* Subtil retroalimentació en passar per sobre de la zona de clic */
@media (hover: hover) and (pointer: fine) {
    .nav-hotspot-left:hover ~ .nav-prev:not(.ocult):not(:disabled),
    .nav-hotspot-right:hover ~ .nav-next:not(.ocult):not(:disabled) {
        opacity: 0.85;
    }
}

/* Indicador de posició (Comptador "5 de 6" / "5 of 6") - Mida augmentada */
.image-counter-container {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 10px);
    z-index: 22;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1), transform 0.22s cubic-bezier(0.4, 0, 1, 1);
}

.lightbox-overlay.is-open .image-counter-container,
.lightbox-overlay.active .image-counter-container {
    opacity: 1;
    transform: translate(-50%, 0);
    transition: opacity 0.48s 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.48s 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-counter {
    display: inline-block;
    font-family: monospace, Courier, 'Courier New', monospace;
    font-size: 13.5px;
    letter-spacing: 0.8px;
    font-weight: 500;
    color: var(--text-color, #ffffff);
    opacity: 0.88;
    background: rgba(0, 0, 0, 0.42);
    padding: 5px 15px;
    border-radius: 2px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body:not(.mode-fosc) .image-counter {
    background: rgba(255, 255, 255, 0.75);
    color: var(--text-color, #111111);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Adaptacions responsive per a tauletes i dispositius mòbils */
@media (max-width: 768px) {
    .nav-btn {
        font-size: 28px;
        padding: 12px;
    }
    .nav-prev,
    .nav-arrow-left {
        left: 4px;
    }
    .nav-next,
    .nav-arrow-right {
        right: 4px;
    }
    .nav-hotspot {
        width: clamp(50px, 20vw, 100px);
    }
    .image-counter-container {
        bottom: 16px;
    }
    .image-counter {
        font-size: 12px;
        padding: 4px 12px;
    }
}

/* Respectar preferències de moviment reduït (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .image-viewport img,
    .navigator-image,
    .image-anim-enter,
    .image-anim-slide-next,
    .image-anim-slide-prev,
    .lightbox-title,
    .lightbox-tools,
    .image-counter-container,
    .lightbox-overlay .nav-btn {
        animation: none !important;
        transition: none !important;
    }
    .image-counter-container {
        transform: translateX(-50%) !important;
    }
    .lightbox-overlay .nav-btn {
        transform: translateY(-50%) !important;
    }
    .lightbox-title,
    .lightbox-tools {
        transform: none !important;
    }
    .nav-btn {
        transition: none !important;
    }
}