/*
Theme Name: Paula Terra Studio
Author: Paula Terra Studio
Description: Tema personalitzat per a Paula Terra Studio
Version: 1.3
*/

@font-face {
    font-family: 'General Sans';
    src: url('Assets/Fonts/GeneralSans-Variable.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('Assets/Fonts/GeneralSans-VariableItalic.woff2') format('woff2');
    font-weight: 200 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PP Editorial New';
    src: url('Assets/Fonts/PPEditorialNew-UltralightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg: #1D1A16;
    --paper: #F1F1F1;
    --white: #FFFFFF;
    --grey: #696969;
    --margin: clamp(24px, 5.208vw, 75px);
    --gutter: 20px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background: var(--bg);
    color: var(--white);
    font-family: 'General Sans', Arial, sans-serif;
    font-synthesis: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}


.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.menu-toggle,
.mobile-menu {
    display: none;
}

.shell {
    width: 100%;
    padding-left: var(--margin);
    padding-right: var(--margin);
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
}

/* HEADER */
.site-header {
    position: absolute;
    z-index: 20;
    top: clamp(52px, 4.3vw, 62px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
}

.site-header__brand { grid-column: 1 / span 3; }
.site-header__description { grid-column: 4 / span 3; }
.site-header__nav--global { grid-column: 8 / 13; }

.site-header__brand a {
    font-size: clamp(20px, 1.944vw, 28px);
    line-height: 1;
}

.site-header__brand em {
    font-family: 'PP Editorial New', Georgia, serif;
    font-style: italic;
    font-weight: 200;
}

.site-header__description,
.site-header__nav {
    font-size: clamp(11px, .972vw, 14px);
    line-height: 1.32;
}

.site-header__description em {
    font-style: italic;
}

.site-header__nav {
    display: block;
}

.site-header__menu,
.mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__menu {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    justify-content: space-between;
    column-gap: clamp(38px, 4.8vw, 70px);
    row-gap: 2px;
    margin-left: clamp(10px, .85vw, 14px);
}

.site-header__menu a {
    display: inline-block;
}

/* HERO */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.hero__media,
.hero__shade {
    position: absolute;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero__slide.is-active {
    opacity: 1;
}

.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__shade {
    background: rgba(10,10,10,.68);
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding-top: clamp(260px, 34vh, 360px);
}

.hero h1 {
    margin: 0;
    max-width: 1126px;
    font-size: clamp(64px, 6.944vw, 100px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
}

.hero h1 span,
.hero h1 em {
    display: block;
}

.hero h1 em {
    font-family: 'PP Editorial New', Georgia, serif;
    font-style: italic;
    font-weight: 200;
}

/* INTRO */
.intro {
    padding-top: clamp(90px, 8.403vw, 121px);
    padding-bottom: clamp(70px, 6vw, 90px);
}

.intro__label {
    grid-column: 1 / span 3;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
}

.intro__content {
    grid-column: 5 / 13;
}

.intro__statement {
    margin: 0;
    max-width: 853px;
    font-size: clamp(28px, 2.5vw, 36px);
    line-height: 1.277;
    letter-spacing: -0.025em;
}

.intro__statement strong {
    font-weight: 600;
}

.intro__statement span {
    color: var(--grey);
    font-weight: 400;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 45px;
}

.stat {
    min-height: 105px;
    padding-left: 23px;
    border-left: 1px solid rgba(255,255,255,.2);
}

.stat__number {
    font-size: clamp(42px, 3.819vw, 55px);
    line-height: .84;
    font-weight: 400;
}

.stat__text {
    margin-top: 22px;
    max-width: 185px;
    font-size: 16px;
    line-height: 1.2;
    color: rgba(255,255,255,.5);
}

/* MARQUEE */
.marquee {
    overflow: hidden;
    padding: 0 0 40px;
    margin-bottom: 40px;
}

.marquee__track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    color: rgba(255,255,255,.5);
    font-size: clamp(62px, 6.944vw, 100px);
    line-height: 1.1;
    animation: marquee 34s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(-5%); }
    to { transform: translateX(-55%); }
}

/* PROJECTS */
.projects {
    padding-bottom: 105px;
}

.projects__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.project-card {
    aspect-ratio: 635 / 409;
    overflow: hidden;
    border-radius: 5px;
    background: #222;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

.project-card:hover img {
    transform: scale(1.035);
}

.section-cta {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* CTA */
.pill {
    display: inline-flex;
    align-items: center;
    min-height: 49px;
    padding: 0 14px 0 49px;
    border: .75px solid currentColor;
    border-radius: 53.24px;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    position: relative;
}

.pill__arrow {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    font-size: 17px;
    line-height: 1;
    font-weight: 300;
}

.pill--dark {
    color: var(--bg);
}

/* SERVICES */
.services {
    padding-bottom: 106px;
}

.services__label {
    margin-bottom: 22px;
    font-size: 16px;
    text-transform: uppercase;
}

.services__list {
    border-top: 1px solid rgba(255,255,255,.45);
}

.service-row {
    display: grid;
    grid-template-columns: 10% 34% 1fr 54px;
    column-gap: 20px;
    align-items: center;
    min-height: 115px;
    border-bottom: 1px solid rgba(255,255,255,.45);
}

.service-row__number,
.service-row__title {
    font-size: clamp(28px, 2.5vw, 36px);
    line-height: 1.27;
}

.service-row__desc {
    max-width: 526px;
    font-size: 16px;
    line-height: 20px;
}

.service-row__arrow {
    width: 48px;
    height: 48px;
    border: .75px solid #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    justify-self: end;
    font-size: 24px;
}

/* LIGHT BLOCK */
.light-block {
    background: var(--paper);
    color: var(--bg);
    padding-top: clamp(100px, 8.194vw, 118px);
    padding-bottom: 92px;
}

.claim {
    margin: 0;
    max-width: 1198px;
    font-size: clamp(64px, 6.25vw, 90px);
    line-height: 1.178;
    letter-spacing: -0.025em;
}

.claim em {
    display: block;
    font-family: 'PP Editorial New', Georgia, serif;
    font-style: italic;
    font-weight: 200;
}

.about {
    margin-top: 105px;
}

.about h2 {
    grid-column: 1 / span 5;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(29,26,22,.45);
    font-size: clamp(42px, 3.819vw, 55px);
    line-height: 1.073;
    font-weight: 600;
}

.about__copy {
    grid-column: 6 / 12;
    padding-top: 30px;
    border-top: 1px solid rgba(29,26,22,.45);
    font-size: 16px;
    line-height: 1.32;
}

.about__copy p {
    margin: 0 0 16px;
}

.about__copy .pill {
    margin-top: 8px;
}

/* FOOTER */
.site-footer {
    min-height: 223px;
    padding-top: 56px;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr 1fr;
    gap: 40px;
    font-size: 14px;
    line-height: 24px;
}

/* LARGE SCREENS */
@media (min-width: 1600px) {
    :root {
        --margin: clamp(75px, 5.2vw, 110px);
    }

    .hero h1 {
        max-width: 1250px;
    }

    .intro__statement {
        max-width: 920px;
    }
}

/* LAPTOP */
@media (max-width: 1180px) {
    :root {
        --margin: 40px;
    }

    .site-header__description { grid-column: 4 / span 4; }
    .site-header__nav--global { grid-column: 8 / 13; }

    .intro__content { grid-column: 4 / 13; }

    .service-row {
        grid-template-columns: 9% 31% 1fr 54px;
    }

    .service-row__desc {
        font-size: 14px;
    }
}

/* TABLET */
@media (max-width: 900px) {
    :root {
        --margin: 28px;
    }

    .site-header {
        top: 28px;
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
    }

    .site-header__brand,
    .site-header__description {
        grid-column: auto;
    }

    .site-header__description {
        text-align: right;
    }

    .site-header__nav--global {
        display: none;
    }

    .hero {
        min-height: 76svh;
        max-height: 780px;
    }

    .hero__inner {
        padding-top: clamp(200px, 24vh, 265px);
    }

    .intro {
        display: block;
    }

    .intro__label {
        margin-bottom: 48px;
    }

    .stats {
        gap: 0;
    }

    .projects__grid {
        grid-template-columns: 1fr;
    }

    .service-row {
        grid-template-columns: 58px minmax(0, 1fr) 44px;
        column-gap: 14px;
        row-gap: 10px;
        min-height: 112px;
        padding: 14px 0;
        align-items: start;
    }

    .service-row__number {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .service-row__title {
        grid-column: 2;
        grid-row: 1;
    }

    .service-row__desc {
        display: block;
        grid-column: 2;
        grid-row: 2;
        max-width: 100%;
        font-size: 13px;
        line-height: 1.35;
        color: rgba(255,255,255,.65);
    }

    .service-row__arrow {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .about {
        display: block;
    }

    .about h2 {
        margin-bottom: 54px;
    }

    .about__copy {
        max-width: 680px;
    }
}

/* MOBILE */
@media (max-width: 620px) {
    :root {
        --margin: 20px;
    }

    .desktop-only {
        display: none;
    }

    .site-header {
        top: 24px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
    }

    .site-header__brand {
        grid-column: 1;
    }

    .site-header__brand a {
        font-size: 22px;
    }

    .site-header__description,
    .site-header__nav {
        display: none;
    }

    .menu-toggle {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 34px;
        height: 22px;
        padding: 0;
        margin: 2px 0 0;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
        z-index: 30;
    }

    .menu-toggle span:not(.screen-reader-text) {
        display: block;
        width: 100%;
        height: 1px;
        background: currentColor;
        transition: transform .25s ease, opacity .25s ease;
    }

    .menu-toggle.is-open span:nth-child(1) {
        transform: translateY(10.5px) rotate(45deg);
    }

    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-10.5px) rotate(-45deg);
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 25;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 110px 20px 38px;
        background: #1D1A16;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-menu a {
        padding: 12px 0;
        border-top: 1px solid rgba(255,255,255,.22);
        font-size: clamp(28px, 8.5vw, 42px);
        line-height: 1.05;
    }

    .mobile-menu a:last-child {
        border-bottom: 1px solid rgba(255,255,255,.22);
    }

    body.menu-open {
        overflow: hidden;
    }

    .hero {
        min-height: 62svh;
        max-height: 680px;
    }

    .hero__inner {
        padding-top: clamp(165px, 21svh, 215px);
        padding-bottom: 42px;
    }

    .hero h1 {
        max-width: 92%;
        font-size: clamp(46px, 12.8vw, 62px);
        line-height: 1.01;
    }

    .hero__media img {
        object-position: center center;
    }

    .intro {
        padding-top: 70px;
        padding-bottom: 60px;
    }

    .intro__statement {
        font-size: 27px;
        line-height: 1.2;
    }

    .stats {
        grid-template-columns: 1fr;
        margin-top: 48px;
    }

    .stat {
        min-height: auto;
        padding: 20px 0 20px 20px;
    }

    .stat__text {
        margin-top: 12px;
    }

    .marquee__track {
        font-size: 48px;
    }

    .projects {
        padding-bottom: 80px;
    }

    .service-row {
        grid-template-columns: 42px minmax(0, 1fr) 38px;
        column-gap: 10px;
        row-gap: 8px;
        min-height: 118px;
        padding: 15px 0;
    }

    .service-row__number {
        font-size: 20px;
    }

    .service-row__title {
        font-size: 22px;
        line-height: 1.08;
    }

    .service-row__desc {
        display: block;
        font-size: 12px;
        line-height: 1.35;
        color: rgba(255,255,255,.62);
    }

    .service-row__arrow {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .pill {
        min-height: 46px;
        padding-left: 45px;
        font-size: 13px;
    }

    .pill__arrow {
        left: 14px;
        font-size: 15px;
    }

    .claim {
        font-size: clamp(46px, 12.5vw, 62px);
        line-height: 1.03;
    }

    .about {
        margin-top: 75px;
    }

    .about h2 {
        font-size: 38px;
    }

    .about__copy {
        font-size: 15px;
    }

    .site-footer {
        grid-template-columns: 1fr 1fr;
        gap: 30px 18px;
        font-size: 12px;
        line-height: 1.4;
    }
}


/* ==================================================
   MICROINTERACCIONS
================================================== */

.service-row__arrow {
    transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.service-row:hover .service-row__arrow {
    background: #fff;
    color: #1D1A16;
    border-color: #fff;
}

.pill {
    transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.pill:hover {
    background: #fff;
    color: #1D1A16;
    border-color: #fff;
}

.pill--dark:hover {
    background: #1D1A16;
    color: #F1F1F1;
    border-color: #1D1A16;
}

/* No forcem hover tàctil en dispositius sense cursor */
@media (hover: none) {
    .service-row:hover .service-row__arrow,
    .pill:hover,
    .pill--dark:hover {
        background: transparent;
        color: inherit;
        border-color: currentColor;
    }
}

/* Respecta usuaris que prefereixen menys moviment */
@media (prefers-reduced-motion: reduce) {
    .hero__slide,
    .service-row__arrow,
    .pill {
        transition: none;
    }
}


/* ==================================================
   MOVIMENT — SERVEIS
================================================== */

/* Aparició progressiva en scroll */
.service-row {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .6s cubic-bezier(.22,.61,.36,1),
        transform .6s cubic-bezier(.22,.61,.36,1),
        background-color .25s ease;
    will-change: transform, opacity;
}

.service-row.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* "Blup" subtil al hover */
@media (hover: hover) and (pointer: fine) {
    .service-row.is-visible:hover {
        transform: translateY(0) scale(1.018);
        z-index: 2;
    }

    .service-row.is-visible:hover .service-row__title {
        transform: translateX(6px);
    }

    .service-row__title {
        transition: transform .25s cubic-bezier(.22,.61,.36,1);
    }
}

/* No animar si l'usuari ho ha desactivat al sistema */
@media (prefers-reduced-motion: reduce) {
    .service-row {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .service-row.is-visible:hover {
        transform: none;
    }
}


/* ==================================================
   ENTRADA INICIAL DEL HERO
   Subtil: només en carregar la pàgina
================================================== */

html.hero-intro-ready .hero h1 span,
html.hero-intro-ready .hero h1 em {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
}

html.hero-intro-ready.hero-intro-play .hero h1 span,
html.hero-intro-ready.hero-intro-play .hero h1 em {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hero h1 span {
    transition:
        opacity .75s cubic-bezier(.22,.61,.36,1),
        transform .75s cubic-bezier(.22,.61,.36,1);
}

.hero h1 em {
    transition:
        opacity .82s cubic-bezier(.22,.61,.36,1) .18s,
        transform .82s cubic-bezier(.22,.61,.36,1) .18s;
}

/* Un respir molt lleu a la foto inicial; no depèn de l'scroll */
html.hero-intro-ready .hero__slide.is-active img {
    transform: scale(1.018);
}

html.hero-intro-ready.hero-intro-play .hero__slide.is-active img {
    transform: scale(1);
}

.hero__slide img {
    transition:
        transform 2.2s cubic-bezier(.22,.61,.36,1),
        opacity 1.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    html.hero-intro-ready .hero h1 span,
    html.hero-intro-ready .hero h1 em,
    html.hero-intro-ready .hero__slide.is-active img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==================================================
   HEADER — ESTATS I INTERACCIÓ
================================================== */

.site-header__nav a {
    transition: opacity .22s ease, font-weight .22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .site-header__nav a:hover {
        opacity: .48;
    }
}

.site-header__nav a.is-active {
    font-weight: 600;
    opacity: 1;
}

/* ==================================================
   APARICIÓ SUBTIL DE CONTINGUT EN SCROLL
================================================== */

.reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==================================================
   FOOTER — TIPOGRAFIA I INTERACCIONS
================================================== */

.site-footer {
    font-size: 14px;
}

.site-footer .footer-studio {
    font-family: 'PP Editorial New', Georgia, serif;
    font-style: italic;
    font-weight: 200;
}

.site-footer a {
    transition: opacity .22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .site-footer a:hover {
        opacity: .48;
    }
}


/* ==================================================
   ACCESSIBILITAT + SEO
================================================== */

.seo-heading,
.screen-reader-text {
    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;
}

a:focus-visible,
button:focus-visible,
.menu-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

/* Salt de línia intencionat del titular final en desktop */
.about__title span {
    display: block;
}

@media (max-width: 900px) {
    .about__title span {
        display: inline;
    }

    .about__title span + span::before {
        content: " ";
    }
}

/* Els headings semàntics hereten el mateix aspecte visual */
.intro__statement,
.services__label,
.about__title {
    margin-top: 0;
}

/* Evitem animació al footer */
.site-footer,
.site-footer > div {
    opacity: 1 !important;
    transform: none !important;
}

/* Millor comportament tàctil */
a,
button {
    -webkit-tap-highlight-color: transparent;
}

/* Respecta reducció de moviment de manera global */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Text destacat final: semibold, no bold */
.about__copy p strong {
    font-weight: 600;
}


/* Barcelona al footer — General Sans Italic */
.site-footer .footer-city-italic {
    font-family: 'General Sans', Arial, sans-serif;
    font-style: italic;
    font-weight: inherit;
}


/* ==================================================
   MENÚ GLOBAL NATIU DE WORDPRESS
================================================== */

.site-header__menu li,
.mobile-menu__list li {
    margin: 0;
    padding: 0;
}

.site-header__menu a,
.mobile-menu__list a,
.mobile-menu__home {
    transition: opacity .22s ease, font-weight .22s ease;
}

.site-header__menu .current-menu-item > a,
.site-header__menu .current-menu-ancestor > a,
.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current-menu-ancestor > a,
.mobile-menu__home.is-active {
    font-weight: 600;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .site-header__menu a:hover,
    .mobile-menu__list a:hover,
    .mobile-menu__home:hover {
        opacity: .48;
    }
}

.mobile-menu__list {
    width: 100%;
}

.mobile-menu__list a,
.mobile-menu__home {
    display: block;
}

/* Si algun dia afegeixes “Home” també al menú principal,
   l'amaguem a mòbil perquè ja existeix el botó Home independent. */
.mobile-menu__list .menu-item-home {
    display: none;
}

@media (max-width: 620px) {
    .mobile-menu__home,
    .mobile-menu__list a {
        padding: 12px 0;
        border-top: 1px solid rgba(255,255,255,.22);
        font-size: clamp(28px, 8.5vw, 42px);
        line-height: 1.05;
    }

    .mobile-menu__list li:last-child a {
        border-bottom: 1px solid rgba(255,255,255,.22);
    }
}


/* Ajust fi de les tres columnes del menú desktop */
@media (min-width: 1181px) {
    .site-header__nav--global {
        grid-column: 8 / 13;
        padding-left: clamp(8px, .7vw, 12px);
    }
}


/* ==================================================
   HERO MÒBIL — COMPOSICIÓ MÉS EDITORIAL
================================================== */
@media (max-width: 620px) {
    .intro {
        padding-top: 58px;
    }
}


/* ==================================================
   PÀGINA PROJECTES — FIGMA 4045:1059
================================================== */

.projects-page {
    background: #1D1A16;
    color: #fff;
    min-height: 100vh;
    padding-top: 146px;
}

.project-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 54px;
}

.project-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 16px;
    border: .75px solid #F1F1F1;
    border-radius: 53px;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    transition: background-color .22s ease, color .22s ease, opacity .22s ease;
}

.project-filter.is-active {
    background: #fff;
    color: #1D1A16;
}

@media (hover:hover) and (pointer:fine) {
    .project-filter:not(.is-active):hover {
        background: #fff;
        color: #1D1A16;
    }
}

.projects-archive-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-bottom: 110px;
}

.archive-project-card {
    margin: 0;
}

.archive-project-card--cols-4  { grid-column: span 4; }
.archive-project-card--cols-5  { grid-column: span 5; }
.archive-project-card--cols-6  { grid-column: span 6; }
.archive-project-card--cols-7  { grid-column: span 7; }
.archive-project-card--cols-8  { grid-column: span 8; }
.archive-project-card--cols-12 { grid-column: span 12; }

.archive-project-card__image {
    display: block;
    width: 100%;
    height: 440px;
    overflow: hidden;
    border-radius: 5px;
    background: #D9D9D9;
}

.archive-project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

.archive-project-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #D9D9D9;
}

@media (hover:hover) and (pointer:fine) {
    .archive-project-card__image:hover img {
        transform: scale(1.035);
    }
}

.archive-project-card__meta {
    min-height: 79px;
    padding-top: 14px;
    font-size: 16px;
    line-height: 24px;
}

.archive-project-card__title,
.archive-project-card__disciplines {
    margin: 0;
}

.archive-project-card__title strong {
    font-weight: 700;
}

.archive-project-card__disciplines {
    color: #696969;
    font-style: italic;
    font-weight: 500;
}

.projects-empty {
    grid-column: 1 / -1;
    margin: 60px 0 140px;
    font-size: 18px;
    color: #696969;
}

/* Desktop molt ample: conserva proporció del Figma però aprofita l'espai. */
@media (min-width: 1600px) {
    .archive-project-card__image {
        height: clamp(440px, 30.55vw, 543px);
    }
}

/* Portàtil */
@media (max-width: 1180px) {
    .projects-page {
        padding-top: 138px;
    }

    .archive-project-card__image {
        height: 347px;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .projects-page {
        padding-top: 122px;
    }

    .project-filters {
        margin-bottom: 40px;
        gap: 8px;
    }

    .project-filter {
        font-size: 13px;
        padding-inline: 13px;
    }

    .projects-archive-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 26px 16px;
    }

    .archive-project-card {
        grid-column: auto !important;
    }

    .archive-project-card__image {
        height: auto;
        aspect-ratio: 1 / 1.03;
    }
}

/* Mòbil */
@media (max-width: 620px) {
    .projects-page {
        padding-top: 96px;
    }

    .project-filters {
        gap: 8px 7px;
        margin-bottom: 32px;
    }

    .project-filter {
        min-height: 27px;
        padding: 1px 11px;
        font-size: 11px;
        line-height: 1;
    }

    .projects-archive-grid {
        grid-template-columns: 1fr;
        row-gap: 34px;
    }

    .archive-project-card__image {
        aspect-ratio: 1.28 / 1;
        height: auto;
    }

    .archive-project-card__meta {
        min-height: 0;
        padding-top: 10px;
        font-size: 13px;
        line-height: 18px;
    }
}


/* ==================================================
   PÀGINA PREMIS — FIGMA 4001:702
================================================== */

.awards-page {
    background: #1D1A16;
    color: #fff;
}

.awards-hero {
    padding-top: 218px;
    padding-bottom: 205px;
}

.awards-hero__label {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #F1F1F1;
}

.awards-hero__title {
    max-width: 1169px;
    margin: 0;
    font-size: clamp(72px, 6.95vw, 100px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -.04em;
}

.awards-hero__title em,
.awards-claim h2 em {
    font-family: "PP Editorial New", serif;
    font-style: italic;
    font-weight: 300;
}

.awards-list {
    padding-bottom: 86px;
}

.awards-row {
    display: grid;
    grid-template-columns: 90px minmax(0, calc(33.333333% - 125px)) minmax(0, 1fr) 58px;
    column-gap: 35px;
    padding: 21px 0 23px;
    border-top: 0;
    font-size: 16px;
    line-height: 24px;
}

.awards-row__award,
.awards-row__result {
    display: flex;
    flex-direction: column;
}

.awards-row strong {
    font-weight: 600;
}

.awards-row__result strong {
    font-weight: 700;
}

.awards-claim {
    background: #F1F1F1;
    color: #1D1A16;
    padding: 96px 0 116px;
}

.awards-claim__inner {
    text-align: center;
}

.awards-claim h2 {
    margin: 0 auto 28px;
    font-size: 55px;
    line-height: 65px;
    font-weight: 500;
}

.awards-claim p {
    max-width: 586px;
    margin: 0 auto 28px;
    font-size: 16px;
    line-height: 20px;
}

.pill-cta {
    display: inline-flex;
    align-items: center;
    min-height: 49px;
    padding-right: 15px;
    border: .75px solid currentColor;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    transition: background .22s ease, color .22s ease;
}

.pill-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    font-size: 24px;
}

.pill-cta--dark {
    color: #1D1A16;
}

@media (hover:hover) and (pointer:fine) {
    .pill-cta--dark:hover {
        background: #1D1A16;
        color: #fff;
    }
}

@media (max-width: 900px) {
    .awards-hero {
        padding-top: 180px;
        padding-bottom: 140px;
    }

    .awards-row {
        grid-template-columns: 54px minmax(0, calc(33.333333% - 78px)) minmax(0, 1fr) 52px;
        column-gap: 24px;
    }
}

@media (max-width: 620px) {
    .awards-hero {
        padding-top: 138px;
        padding-bottom: 92px;
    }

    .awards-hero__label {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .awards-hero__title {
        font-size: clamp(50px, 14vw, 66px);
        line-height: .99;
    }

    .awards-list {
        padding-bottom: 58px;
    }

    .awards-row {
        grid-template-columns: 36px 1fr;
        row-gap: 7px;
        column-gap: 12px;
        padding: 16px 0 18px;
        font-size: 13px;
        line-height: 18px;
    }

    .awards-row__number {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .awards-row__award,
    .awards-row__result {
        grid-column: 2;
    }

    .awards-claim {
        padding: 70px 0 80px;
    }

    .awards-claim h2 {
        margin-bottom: 22px;
        font-size: 38px;
        line-height: 44px;
    }

    .awards-claim p {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 24px;
    }

    .pill-cta {
        min-height: 42px;
        font-size: 12px;
    }

    .pill-cta__icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}


/* V7.2 — ajustos visuals Premis */
.awards-row {
    position: relative;
}

/* Dues línies separades seguint la retícula: aprox. 4 + 8 columnes */
.awards-row::before,
.awards-row::after {
    content: "";
    position: absolute;
    top: 0;
    height: .75px;
    background: rgba(241,241,241,.55);
}

.awards-row::before {
    left: 0;
    width: calc(33.333333% - 17.5px);
}

.awards-row::after {
    left: calc(33.333333% + 17.5px);
    right: 0;
    width: auto;
}

.awards-row__result strong {
    font-weight: 600;
}

@media (max-width: 620px) {
    .awards-row::before {
        width: calc(33.333333% - 6px);
    }

    .awards-row::after {
        width: calc(66.666667% - 6px);
    }
}


/* V7.3 — el contingut de la dreta comença exactament on comença
   el segon tram del separador (retícula 4/8 del Figma). */
@media (max-width: 620px) {
    .awards-row::before {
        left: 0;
        width: 100%;
    }

    .awards-row::after {
        display: none;
    }
}


/* ==================================================
   PREMIS — MOVIMENT ROBUST
================================================== */

/* Hero: animació CSS directa, sense dependre de JS */
@keyframes ptsAwardsHeroIn {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.awards-hero__label {
    animation: ptsAwardsHeroIn .65s cubic-bezier(.22,.61,.36,1) both;
}

.awards-hero__title {
    animation: ptsAwardsHeroIn .82s cubic-bezier(.22,.61,.36,1) .12s both;
}

/* Les files són VISIBLES per defecte.
   JS només aplica l'estat ocult a les que encara no han entrat. */
.awards-row.pts-award-will-reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity .58s cubic-bezier(.22,.61,.36,1),
        transform .58s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}

.awards-row.pts-award-will-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.awards-row__result {
    transition: transform .24s cubic-bezier(.22,.61,.36,1);
}

@media (hover: hover) and (pointer: fine) {
    .awards-row.is-visible:hover {
        transform: scale(1.012);
        position: relative;
        z-index: 2;
    }

    .awards-row.is-visible:hover .awards-row__result {
        transform: translateX(5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .awards-hero__label,
    .awards-hero__title {
        animation: none !important;
    }

    .awards-row,
    .awards-row.pts-award-will-reveal,
    .awards-row.pts-award-will-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==================================================
   V7.7 — PREMIS: MATEIX MOVIMENT QUE SERVEIS HOME
================================================== */

.awards-row.pts-award-motion {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .6s cubic-bezier(.22,.61,.36,1),
        transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}

.awards-row.pts-award-motion.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* El blup funciona SEMPRE en desktop, sense dependre de cap classe JS */
@media (hover: hover) and (pointer: fine) {
    .awards-row:hover {
        transform: scale(1.018) !important;
        transform-origin: center center;
        position: relative;
        z-index: 3;
    }

    .awards-row__number,
    .awards-row__award,
    .awards-row__result {
        transition: transform .25s cubic-bezier(.22,.61,.36,1);
    }

    .awards-row:hover .awards-row__number,
    .awards-row:hover .awards-row__award,
    .awards-row:hover .awards-row__result {
        transform: translateX(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .awards-row.pts-award-motion {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .awards-row:hover {
        transform: none !important;
    }
}


/* ==================================================
   V7.8 — BLOC FINAL PREMIS + ADMIN
================================================== */

.awards-claim {
    padding-top: 105px;
    padding-bottom: 112px;
}

.awards-claim h2 {
    max-width: 1290px;
    margin: 0 auto 24px;
    font-size: 55px;
    line-height: 65px;
    font-weight: 500;
    text-align: center;
}

.awards-claim__text {
    max-width: 586px;
    margin: 0 auto 31px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

.awards-claim__text strong {
    font-weight: 600;
}

/* Fem servir exactament el component .pill/.pill--dark de la Home */
.awards-claim .pill {
    margin-inline: auto;
}

@media (max-width: 620px) {
    .awards-claim__text {
        max-width: 100%;
        font-size: 13px;
        line-height: 18px;
    }
}


/* ==================================================
   V7.9 — BLOC FINAL PREMIS: MATEIXA LÒGICA QUE HOME
================================================== */

.awards-claim h2.reveal-on-scroll {
    transition-delay: 0ms;
}

.awards-claim__text.reveal-on-scroll {
    transition-delay: 90ms;
}

.awards-claim .pill.reveal-on-scroll {
    transition-delay: 170ms;
}

@media (prefers-reduced-motion: reduce) {
    .awards-claim h2.reveal-on-scroll,
    .awards-claim__text.reveal-on-scroll,
    .awards-claim .pill.reveal-on-scroll {
        transition-delay: 0ms;
    }
}


/* ==================================================
   V7.11 — PREMIS · REDISSENY MÒBIL
   Composició pròpia per a pantalles petites.
   Desktop/tablet no es modifica.
================================================== */
@media (max-width: 620px) {

    /* Aprofitem millor l'amplada real del mòbil */
    .awards-page .shell {
        width: auto;
        margin-left: 18px;
        margin-right: 18px;
    }

    /* HERO — més curt, contundent i menys “desktop reduït” */
    .awards-hero {
        min-height: auto;
        padding-top: 118px;
        padding-bottom: 70px;
    }

    .awards-hero__label {
        margin: 0 0 18px;
        font-size: 11px;
        line-height: 1;
        letter-spacing: .035em;
    }

    .awards-hero__title {
        max-width: none;
        margin: 0;
        font-size: clamp(48px, 14vw, 61px);
        line-height: .96;
        letter-spacing: -.052em;
    }

    .awards-hero__title em {
        display: inline-block;
        margin-top: 4px;
    }

    /* LLISTA — cada premi funciona com una petita peça editorial */
    .awards-list {
        padding-bottom: 66px;
    }

    .awards-row {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 12px;
        min-height: 0;
        padding: 18px 0 22px;
        font-size: 13px;
        line-height: 17px;
        transform-origin: center;
    }

    /* En mòbil abandonem la divisió 4/8: una línia neta per peça */
    .awards-row::before {
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        opacity: .72;
    }

    .awards-row::after {
        display: none;
    }

    .awards-row__number {
        grid-column: 1;
        grid-row: 1 / 3;
        padding-top: 1px;
        font-size: 12px;
        line-height: 17px;
        opacity: .68;
    }

    .awards-row__award {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 12px;
        margin: 0;
    }

    .awards-row__award strong {
        font-size: 15px;
        line-height: 18px;
        font-weight: 600;
    }

    .awards-row__award span {
        font-size: 12px;
        line-height: 17px;
        white-space: nowrap;
        opacity: .68;
    }

    .awards-row__result {
        grid-column: 2;
        grid-row: 2;
        display: block;
        padding-right: 8px;
    }

    .awards-row__result strong,
    .awards-row__result span {
        display: block;
    }

    .awards-row__result strong {
        margin-bottom: 2px;
        font-size: 13px;
        line-height: 17px;
        font-weight: 600;
    }

    .awards-row__result span {
        font-size: 12px;
        line-height: 17px;
        opacity: .78;
    }

    /* No simulem hover en una interfície tàctil */
    .awards-row:hover,
    .awards-row:hover .awards-row__number,
    .awards-row:hover .awards-row__award,
    .awards-row:hover .awards-row__result {
        transform: none !important;
    }

    /* BLOC FINAL — més editorial, menys estret i amb jerarquia clara */
    .awards-claim {
        padding: 68px 0 76px;
    }

    .awards-claim__inner {
        text-align: left;
    }

    .awards-claim h2 {
        max-width: none;
        margin: 0 0 25px;
        font-size: clamp(38px, 10.7vw, 47px);
        line-height: 1.02;
        letter-spacing: -.035em;
        text-align: left;
    }

    .awards-claim__text {
        max-width: none;
        margin: 0 0 29px;
        font-size: 14px;
        line-height: 19px;
        text-align: left;
    }

    .awards-claim__text strong {
        font-weight: 600;
    }

    /* CTA alineat amb el contingut, no flotant al centre */
    .awards-claim .pill {
        margin: 0;
        min-height: 44px;
        font-size: 11px;
        line-height: 1;
    }

    .awards-claim .pill__arrow {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    /* El reveal continua sent el mateix, però recorre menys distància */
    .awards-claim h2.reveal-on-scroll,
    .awards-claim__text.reveal-on-scroll,
    .awards-claim .pill.reveal-on-scroll {
        transform: translateY(14px);
    }

    .awards-claim h2.reveal-on-scroll.is-visible,
    .awards-claim__text.reveal-on-scroll.is-visible,
    .awards-claim .pill.reveal-on-scroll.is-visible {
        transform: translateY(0);
    }
}

/* Mòbils especialment estrets */
@media (max-width: 390px) {
    .awards-page .shell {
        margin-left: 16px;
        margin-right: 16px;
    }

    .awards-hero__title {
        font-size: clamp(45px, 13.5vw, 53px);
    }

    .awards-row {
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 11px;
    }

    .awards-row__award {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .awards-row__award span {
        white-space: normal;
    }

    .awards-claim h2 {
        font-size: clamp(36px, 10.4vw, 42px);
    }
}


/* ==================================================
   V7.12 — ENLLAÇ OPCIONAL ALS PREMIS
================================================== */

.awards-row__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-top: 1px;
    margin-left: auto;
    border: .75px solid #fff;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    transition:
        background-color .22s ease,
        color .22s ease,
        transform .22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .awards-row__link:hover {
        background: #fff;
        color: #1D1A16;
        transform: scale(1.04);
    }
}

@media (max-width: 620px) {
    .awards-row {
        grid-template-columns: 42px minmax(0, 1fr) 40px;
    }

    .awards-row__number {
        grid-column: 1;
    }

    .awards-row__award,
    .awards-row__result {
        grid-column: 2;
    }

    .awards-row__link {
        grid-column: 3;
        grid-row: 1;
        width: 36px;
        height: 36px;
        margin: 0 0 0 auto;
        font-size: 17px;
    }
}

@media (max-width: 390px) {
    .awards-row {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        column-gap: 10px;
    }

    .awards-row__link {
        width: 34px;
        height: 34px;
    }
}


/* ==================================================
   V7.13 — PREMIS MÒBIL · ESPAI CONSISTENT AMB/SENSE ENLLAÇ
================================================== */
@media (max-width: 620px) {
    /* Totes les files mantenen exactament la mateixa retícula.
       La fletxa no ocupa una columna pròpia: flota a la dreta. */
    .awards-row {
        position: relative;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        padding-right: 48px;
    }

    .awards-row__number {
        grid-column: 1;
    }

    .awards-row__award,
    .awards-row__result {
        grid-column: 2;
    }

    .awards-row__link {
        position: absolute;
        top: 16px;
        right: 0;
        width: 36px;
        height: 36px;
        margin: 0;
        font-size: 17px;
    }
}

@media (max-width: 390px) {
    .awards-row {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        column-gap: 10px;
        padding-right: 44px;
    }

    .awards-row__link {
        top: 16px;
        width: 34px;
        height: 34px;
    }
}


/* ==================================================
   V7.14 — PREMIS MÒBIL · ANY + FLETXA
================================================== */
@media (max-width: 620px) {
    /* Retícula fixa perquè any i fletxa quedin sempre alineats,
       tant si el premi té enllaç com si no. */
    .awards-row {
        grid-template-columns: 42px minmax(0, 1fr) 46px 36px !important;
        column-gap: 10px;
        padding-right: 0;
    }

    .awards-row__number {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    /* Convertim el contenidor del premi en "transparent" a la retícula
       per poder alinear títol i any de manera independent. */
    .awards-row__award {
        display: contents;
    }

    .awards-row__award strong {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .awards-row__award span {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        padding-top: 0;
        white-space: nowrap;
        opacity: .72;
    }

    .awards-row__result {
        grid-column: 2 / 5;
        grid-row: 2;
        padding-right: 0;
    }

    .awards-row__link {
        position: static;
        grid-column: 4;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        width: 36px;
        height: 36px;
        margin: -3px 0 0;
        font-size: 17px;
    }
}

@media (max-width: 390px) {
    .awards-row {
        grid-template-columns: 36px minmax(0, 1fr) 42px 34px !important;
        column-gap: 8px;
        padding-right: 0;
    }

    .awards-row__link {
        width: 34px;
        height: 34px;
        margin-top: -2px;
    }
}


/* ==================================================
   V7.15 — PREMIS MÒBIL · ESPAI CONSISTENT DEFINITIU
================================================== */
@media (max-width: 620px) {
    /* Mateixa estructura per TOTES les files, hi hagi fletxa o no */
    .awards-row {
        grid-template-columns: 42px minmax(0, 1fr) 52px 36px !important;
        column-gap: 10px;
        padding-right: 0;
    }

    .awards-row__number {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .awards-row__award {
        display: contents;
    }

    .awards-row__award strong {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
    }

    .awards-row__award span {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        white-space: nowrap;
        opacity: .72;
    }

    .awards-row__result {
        grid-column: 2 / 5;
        grid-row: 2;
        padding-right: 0;
    }

    /* La fletxa ocupa la mateixa columna quan existeix */
    .awards-row__link {
        position: static;
        grid-column: 4;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        width: 36px;
        height: 36px;
        margin: -3px 0 0;
        font-size: 17px;
    }

    /* Quan NO hi ha enllaç, reservem visualment el mateix espai
       perquè l'any i la resta no es moguin. */
    .awards-row:not(:has(.awards-row__link))::after {
        content: "";
        display: block;
        grid-column: 4;
        grid-row: 1;
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 390px) {
    .awards-row {
        grid-template-columns: 36px minmax(0, 1fr) 46px 34px !important;
        column-gap: 8px;
    }

    .awards-row__link,
    .awards-row:not(:has(.awards-row__link))::after {
        width: 34px;
        height: 34px;
    }
}


/* ==================================================
   V7.16 — FIX QUADRAT GRIS MÒBIL
================================================== */
@media (max-width: 620px) {
    /* La 4a columna ja reserva l'espai de la fletxa encara que no hi hagi link.
       No cal cap element fals. */
    .awards-row:not(:has(.awards-row__link))::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* Manté sempre el separador secundari desktop desactivat en mòbil */
    .awards-row::after {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .awards-row:not(:has(.awards-row__link))::after {
        content: none !important;
        display: none !important;
    }
}


/* ==================================================
   V7.17 — PREMIS MÒBIL · ALÇADA IDÈNTICA AMB/SENSE FLETXA
================================================== */
@media (max-width: 620px) {
    /*
     * El problema no era l'amplada: la fletxa de 36px feia més alta
     * la primera fila només als premis que tenien enllaç.
     * Ara la primera fila reserva SEMPRE 36px d'alçada.
     */
    .awards-row {
        grid-template-columns: 42px minmax(0, 1fr) 52px 36px !important;
        grid-template-rows: 36px auto !important;
        column-gap: 10px;
        row-gap: 8px;
        padding: 18px 0 20px;
    }

    .awards-row__number {
        grid-column: 1;
        grid-row: 1 / 3;
        padding-top: 0;
    }

    .awards-row__award {
        display: contents;
    }

    .awards-row__award strong {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        padding-top: 0;
    }

    .awards-row__award span {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        padding-top: 0;
        white-space: nowrap;
    }

    .awards-row__result {
        grid-column: 2 / 5;
        grid-row: 2;
        align-self: start;
        padding: 0;
        margin: 0;
    }

    .awards-row__link {
        position: static;
        grid-column: 4;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        width: 36px;
        height: 36px;
        margin: 0;
    }

    /* Cap placeholder: la columna + l'alçada de grid ja reserven l'espai. */
    .awards-row:not(:has(.awards-row__link))::after,
    .awards-row::after {
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 390px) {
    .awards-row {
        grid-template-columns: 36px minmax(0, 1fr) 46px 34px !important;
        grid-template-rows: 34px auto !important;
        column-gap: 8px;
        row-gap: 8px;
    }

    .awards-row__link {
        width: 34px;
        height: 34px;
    }
}


/* ==================================================
   V7.18 — PREMIS MÒBIL · TIPOGRAFIA UNIFICADA
================================================== */
@media (max-width: 620px) {
    /* Tots els textos informatius del premi tenen exactament
       la mateixa mida i interlineat. La jerarquia es fa només
       amb pes/opacitat, no reduint cossos. */
    .awards-row__number,
    .awards-row__award strong,
    .awards-row__award span,
    .awards-row__result strong,
    .awards-row__result span {
        font-size: 13px !important;
        line-height: 17px !important;
    }

    .awards-row__award strong,
    .awards-row__result strong {
        font-weight: 600;
    }

    .awards-row__award span,
    .awards-row__result span {
        font-weight: 400;
    }
}


/* ==================================================
   V7.19 — PREMIS MÒBIL · LLEGIBILITAT 14/18
================================================== */
@media (max-width: 620px) {
    .awards-row__number,
    .awards-row__award strong,
    .awards-row__award span,
    .awards-row__result strong,
    .awards-row__result span {
        font-size: 14px !important;
        line-height: 18px !important;
    }
}


/* ==================================================
   V7.20 — PREMIS MÒBIL · TIPOGRAFIA GLOBAL
   Mateixa escala de contingut que la resta de la web.
================================================== */
@media (max-width: 620px) {
    .awards-row__number,
    .awards-row__award strong,
    .awards-row__award span,
    .awards-row__result strong,
    .awards-row__result span {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .awards-row__award strong,
    .awards-row__result strong {
        font-weight: 600;
    }

    .awards-row__award span,
    .awards-row__result span,
    .awards-row__number {
        font-weight: 400;
    }
}


/* ==================================================
   V7.21 — ESCALA TIPOGRÀFICA GLOBAL
   Textos petits de contingut: 16px a desktop i mòbil.
   No afecta menú, footer, etiquetes ni botons.
================================================== */

:root {
    --pts-body-copy-size: 16px;
    --pts-body-copy-line-height: 20px;
}

/* HOME */
.intro__label,
.about__copy p,
.service-row__desc,

/* PROJECTES */
.archive-project-card__meta,
.archive-project-card__title,
.archive-project-card__disciplines,

/* PREMIS */
.awards-row,
.awards-row__number,
.awards-row__award strong,
.awards-row__award span,
.awards-row__result strong,
.awards-row__result span,
.awards-claim__text {
    font-size: var(--pts-body-copy-size) !important;
}

/* Text corrent: mateixa lògica d'interlineat a tota la web */
.about__copy p,
.service-row__desc,
.archive-project-card__meta,
.archive-project-card__title,
.archive-project-card__disciplines,
.awards-row,
.awards-row__number,
.awards-row__award strong,
.awards-row__award span,
.awards-row__result strong,
.awards-row__result span,
.awards-claim__text {
    line-height: var(--pts-body-copy-line-height) !important;
}

/* Mòbil: NO reduïm el cos de text. Es manté 16px. */
@media (max-width: 620px) {
    :root {
        --pts-body-copy-size: 16px;
        --pts-body-copy-line-height: 20px;
    }

    .intro__label,
    .about__copy p,
    .service-row__desc,
    .archive-project-card__meta,
    .archive-project-card__title,
    .archive-project-card__disciplines,
    .awards-row,
    .awards-row__number,
    .awards-row__award strong,
    .awards-row__award span,
    .awards-row__result strong,
    .awards-row__result span,
    .awards-claim__text {
        font-size: 16px !important;
        line-height: 20px !important;
    }
}


/* ==================================================
   PÀGINA EXPOSICIONS — FIGMA 4050:29
================================================== */

.exhibitions-page {
    background: #1D1A16;
    color: #fff;
}

.exhibitions-hero {
    padding-top: 218px;
    padding-bottom: 245px;
}

.exhibitions-hero__label {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.2;
    color: #F1F1F1;
    text-transform: uppercase;
}

.exhibitions-hero__title {
    max-width: 1169px;
    margin: 0;
    font-size: clamp(72px, 6.95vw, 100px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -.04em;
}

.exhibitions-hero__title em {
    font-family: "PP Editorial New", serif;
    font-style: italic;
    font-weight: 300;
}

.exhibitions-list {
    padding-bottom: 86px;
}

.exhibitions-row {
    position: relative;
    display: grid;
    grid-template-columns: calc(33.333333% - 17.5px) minmax(0, 1fr) 58px;
    column-gap: 35px;
    min-height: 101px;
    padding: 21px 0 23px;
    font-size: 16px;
    line-height: 24px;
    transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s cubic-bezier(.22,.61,.36,1);
}

.exhibitions-row::before,
.exhibitions-row::after {
    content: "";
    position: absolute;
    top: 0;
    height: .75px;
    background: rgba(241,241,241,.55);
}

.exhibitions-row::before {
    left: 0;
    width: calc(33.333333% - 17.5px);
}

.exhibitions-row::after {
    left: calc(33.333333% + 17.5px);
    right: 0;
}

.exhibitions-row__left,
.exhibitions-row__right {
    display: flex;
    flex-direction: column;
}

.exhibitions-row strong {
    font-weight: 600;
}

.exhibitions-row__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-left: auto;
    border: .75px solid #fff;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    transition: background-color .22s ease, color .22s ease, transform .22s ease;
}

@media (hover:hover) and (pointer:fine) {
    .exhibitions-row:hover {
        transform: scale(1.018);
        z-index: 2;
    }

    .exhibitions-row__link:hover {
        background: #fff;
        color: #1D1A16;
        transform: scale(1.04);
    }
}

.exhibitions-claim {
    background: #F1F1F1;
    color: #1D1A16;
    padding: 104px 0 105px;
}

.exhibitions-claim__inner {
    text-align: center;
}

.exhibitions-claim h2 {
    margin: 0 auto 28px;
    font-size: 55px;
    line-height: 65px;
    font-weight: 500;
}

.exhibitions-claim p {
    max-width: 586px;
    margin: 0 auto 29px;
    font-size: var(--pts-body-copy-size);
    line-height: var(--pts-body-copy-line-height);
}

@media (max-width: 900px) {
    .exhibitions-hero {
        padding-top: 180px;
        padding-bottom: 150px;
    }

    .exhibitions-row {
        grid-template-columns: calc(40% - 12px) minmax(0, 1fr) 52px;
        column-gap: 24px;
    }

    .exhibitions-row::before {
        width: calc(40% - 12px);
    }

    .exhibitions-row::after {
        left: calc(40% + 12px);
    }
}

@media (max-width: 620px) {
    .exhibitions-page .shell {
        width: auto;
        margin-left: 18px;
        margin-right: 18px;
    }

    .exhibitions-hero {
        padding-top: 118px;
        padding-bottom: 70px;
    }

    .exhibitions-hero__label {
        margin-bottom: 18px;
        font-size: 11px;
        line-height: 1;
        letter-spacing: .035em;
    }

    .exhibitions-hero__title {
        max-width: none;
        font-size: clamp(46px, 13.5vw, 60px);
        line-height: .98;
        letter-spacing: -.05em;
    }

    .exhibitions-list {
        padding-bottom: 66px;
    }

    .exhibitions-row {
        grid-template-columns: minmax(0, 1fr) 42px;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 10px;
        min-height: 0;
        padding: 18px 0 22px;
        font-size: 16px;
        line-height: 20px;
    }

    .exhibitions-row::before {
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }

    .exhibitions-row::after {
        display: none;
    }

    .exhibitions-row__left {
        grid-column: 1;
        grid-row: 1;
    }

    .exhibitions-row__right {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .exhibitions-row__link {
        grid-column: 2;
        grid-row: 1;
        width: 36px;
        height: 36px;
        margin: 0 0 0 auto;
        font-size: 17px;
    }

    .exhibitions-row:hover {
        transform: none !important;
    }

    .exhibitions-claim {
        padding: 68px 0 76px;
    }

    .exhibitions-claim__inner {
        text-align: left;
    }

    .exhibitions-claim h2 {
        margin: 0 0 24px;
        font-size: clamp(38px, 10.7vw, 47px);
        line-height: 1.03;
        text-align: left;
    }

    .exhibitions-claim p {
        max-width: none;
        margin: 0 0 29px;
        font-size: 16px;
        line-height: 20px;
        text-align: left;
    }

    .exhibitions-claim .pill {
        margin: 0;
    }
}


/* V8.1 — EXPOSICIONS · LLOCS MULTILÍNIA */
.exhibitions-row__locations {
    display: block;
    white-space: normal;
    font-size: 16px;
    line-height: 24px;
}

@media (max-width: 620px) {
    .exhibitions-row__locations {
        font-size: 16px;
        line-height: 20px;
    }
}


/* ==================================================
   V8.2 — EXPOSICIONS · MOVIMENT COM PREMIS
================================================== */

/* Hero */
html.exhibitions-intro-ready .exhibitions-hero__label,
html.exhibitions-intro-ready .exhibitions-hero__title {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
}

html.exhibitions-intro-ready.exhibitions-intro-play .exhibitions-hero__label,
html.exhibitions-intro-ready.exhibitions-intro-play .exhibitions-hero__title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.exhibitions-hero__label {
    transition:
        opacity .65s cubic-bezier(.22,.61,.36,1),
        transform .65s cubic-bezier(.22,.61,.36,1);
}

.exhibitions-hero__title {
    transition:
        opacity .82s cubic-bezier(.22,.61,.36,1) .12s,
        transform .82s cubic-bezier(.22,.61,.36,1) .12s;
}

/* Items */
.exhibitions-row.pts-exhibition-motion {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .6s cubic-bezier(.22,.61,.36,1),
        transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}

.exhibitions-row.pts-exhibition-motion.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .exhibitions-row.pts-exhibition-motion.is-visible:hover {
        transform: translateY(0) scale(1.018);
        z-index: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.exhibitions-intro-ready .exhibitions-hero__label,
    html.exhibitions-intro-ready .exhibitions-hero__title,
    .exhibitions-row.pts-exhibition-motion {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==================================================
   V8.3 — EXPOSICIONS · HERO EXACTE COM PREMIS
================================================== */

@keyframes ptsExhibitionsHeroIn {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.exhibitions-hero__label {
    animation: ptsExhibitionsHeroIn .65s cubic-bezier(.22,.61,.36,1) both;
}

.exhibitions-hero__title {
    animation: ptsExhibitionsHeroIn .82s cubic-bezier(.22,.61,.36,1) .12s both;
}

/* Anul·lem les regles antigues del sistema JS perquè no interfereixin */
html.exhibitions-intro-ready .exhibitions-hero__label,
html.exhibitions-intro-ready .exhibitions-hero__title,
html.exhibitions-intro-ready.exhibitions-intro-play .exhibitions-hero__label,
html.exhibitions-intro-ready.exhibitions-intro-play .exhibitions-hero__title {
    opacity: initial;
    transform: initial;
}

@media (prefers-reduced-motion: reduce) {
    .exhibitions-hero__label,
    .exhibitions-hero__title {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==================================================
   V9.3 NOSALTRES — POSICIONAMENT FIGMA 1440
================================================== */

.n93{background:#1D1A16;color:#F1F1F1}
.n93-dark{background:#1D1A16;color:#F1F1F1}
.n93-light{background:#F1F1F1;color:#1D1A16}
.n93 em{font-family:"PP Editorial New",serif;font-style:italic;font-weight:300}
.n93-body{font-size:16px;line-height:24px}
.n93-body strong{font-weight:600}

/* HERO: coordinates from Figma */
.n93-hero{position:relative;height:806px}
.n93-hero-label{position:absolute;left:75px;top:224px;margin:0;font-size:16px;line-height:22px;text-transform:uppercase}
.n93-hero h1{position:absolute;left:75px;top:273px;width:1169px;height:333px;margin:0;font-size:100px;line-height:110px;font-weight:400;letter-spacing:-.04em}

/* INTRO y806 -> y1365 */
.n93-intro{position:relative;height:559px}
.n93-line{position:absolute;left:75px;top:0;width:1290px;height:.75px;background:rgba(241,241,241,.55)}
.n93-intro-label{position:absolute;left:75px;top:46px;width:274px;font-size:16px;line-height:normal;text-transform:uppercase}
.n93-intro-label i{font-style:italic}
.n93-intro-main{position:absolute;left:512px;top:40px;width:853px}
.n93-intro-main h2{margin:0;width:635px;font-size:36px;line-height:46px;font-weight:400}
.n93-intro-main h2 strong{font-weight:600}
.n93-intro-copy{width:526px;margin-top:7px}

/* First 01/02/03 fixed positions */
.n93-three{position:relative;height:196px;margin-top:36px}
.n93-three-item{position:absolute;top:0;width:285px;height:105px;border-left:1px solid rgba(241,241,241,.55);padding-left:28px}
.n93-three-item:nth-child(1){left:0}
.n93-three-item:nth-child(2){left:285px}
.n93-three-item:nth-child(3){left:570px}
.n93-num{display:block;font-size:55px;line-height:46px;font-weight:500}
.n93-three-item p{margin:15px 0 0 4px;width:227px;font-size:16px;line-height:normal}
.n93-three-dark p{color:rgba(255,255,255,.5)}

/* MANTRA y1365 -> 1892 */
.n93-mantra-wrap{height:527px;position:relative}
.n93-mantra{position:absolute;left:75px;top:133px;width:1290px;height:338px;text-align:center;font-size:55px;line-height:65px;font-weight:400}
.n93-mantra .keep{font-weight:500}
.n93-mantra .strike{text-decoration-line:line-through;text-decoration-thickness:2px;text-decoration-skip-ink:none}

/* BIO y1892 -> 2620 */
.n93-bio{position:relative;height:728px}
.n93-bio-copy{position:absolute;left:75px;top:106px;width:535px}
.n93-bio-copy h2{margin:0 0 22px;font-size:36px;line-height:46px;font-weight:400}
.n93-bio-copy h2 strong{font-weight:600}
.n93-bio-image{position:absolute;left:689px;top:0;width:751px;height:728px;overflow:hidden}
.n93-bio-image img{width:100%;height:100%;object-fit:cover;display:block}

/* ERGO y2620 -> 2896 */
.n93-ergo{height:276px;display:flex;align-items:center;overflow:hidden;font-size:100px;line-height:110px;white-space:nowrap;text-indent:-152px}

/* TEAM y2896 -> 3543 */
.n93-team{position:relative;height:647px}
.n93-team .n93-line{top:0;background:rgba(29,26,22,.55)}
.n93-team-label{position:absolute;left:75px;top:46px;width:274px;font-size:16px;line-height:normal;text-transform:uppercase}
.n93-team-main{position:absolute;left:512px;top:36px;width:853px}
.n93-team-main h2{margin:0;font-size:36px;line-height:46px;font-weight:400}
.n93-team-main h2 strong{font-weight:600}
.n93-team-copy{width:592px;margin-top:12px}
.n93-three-light{margin-top:38px}
.n93-three-light .n93-three-item{border-color:rgba(29,26,22,.5)}
.n93-three-light p{color:#1D1A16}

/* COORDS y3543 -> 5143 */
.n93-coords{position:relative;height:1600px}
.n93-coords>h2{position:absolute;left:75px;top:137px;width:1198px;height:237px;margin:0;font-size:90px;line-height:106px;font-weight:400}
.n93-split{position:absolute;left:75px;top:439px;width:1290px;border-top:.75px solid rgba(241,241,241,.55);display:grid;grid-template-columns:526px 744px;column-gap:20px;padding-top:21px}
.n93-split-title{font-size:55px;line-height:59px;font-weight:600}
.n93-split-copy{width:635px}
.n93-split-kollen{top:763px}
.n93-kollen-image{width:743px;height:432px;margin-top:22px;overflow:hidden}
.n93-kollen-image img{width:100%;height:100%;object-fit:cover;display:block}
.n93-kollen-ctas{display:flex;gap:18px;margin-top:38px}

/* FINAL y5143 -> 5677 */
.n93-final{position:relative;height:534px;text-align:center}
.n93-final h2{position:absolute;left:75px;top:132px;width:1290px;height:192px;margin:0;font-size:55px;line-height:65px;font-weight:500}
.n93-final>.pill{position:absolute;left:50%;top:371px;transform:translateX(-50%)}

/* Hero/reveal motion */
@keyframes n93HeroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.n93-hero-label{animation:n93HeroIn .65s cubic-bezier(.22,.61,.36,1) both}
.n93-hero h1{animation:n93HeroIn .82s cubic-bezier(.22,.61,.36,1) .12s both}
.n93-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.n93-reveal.is-visible{opacity:1;transform:none}

/* MOBILE — separate composition, same 16px body */
@media(max-width:620px){
  .n93-hero{height:auto;padding:118px 18px 78px}
  .n93-hero-label,.n93-hero h1{position:static;width:auto;height:auto}
  .n93-hero-label{font-size:11px;margin-bottom:18px}
  .n93-hero h1{font-size:clamp(46px,13.5vw,60px);line-height:.98}
  .n93-intro,.n93-mantra-wrap,.n93-bio,.n93-team,.n93-coords,.n93-final{height:auto;position:relative}
  .n93-intro{padding:0 18px 58px}
  .n93-line{position:static;width:100%;margin-bottom:24px}
  .n93-intro-label,.n93-intro-main,.n93-team-label,.n93-team-main,.n93-bio-copy,.n93-bio-image,.n93-coords>h2,.n93-split,.n93-final h2,.n93-final>.pill{position:static;width:auto;height:auto}
  .n93-intro-label,.n93-team-label{font-size:12px;line-height:16px;margin-bottom:28px}
  .n93-intro-main h2,.n93-team-main h2,.n93-bio-copy h2{font-size:30px;line-height:37px}
  .n93-body,.n93-body strong,.n93-three-item p{font-size:16px!important;line-height:20px!important}
  .n93-three{height:auto;margin-top:34px}
  .n93-three-item{position:static;width:auto;height:auto;min-height:0;padding:18px 0;border-left:0;border-top:1px solid currentColor;display:grid;grid-template-columns:68px 1fr;gap:12px}
  .n93-three-item:last-child{border-bottom:1px solid currentColor}
  .n93-num{font-size:38px;line-height:1}
  .n93-three-item p{width:auto;margin:0}
  .n93-mantra-wrap{padding:68px 18px}
  .n93-mantra{position:static;width:auto;height:auto;text-align:left;font-size:36px;line-height:43px}
  .n93-bio-copy{padding:64px 18px 38px}
  .n93-bio-image{height:460px}
  .n93-ergo{height:128px;font-size:54px;line-height:60px;text-indent:-90px}
  .n93-team{padding:68px 18px 58px}
  .n93-team .n93-line{margin-bottom:24px}
  .n93-team-copy{width:auto}
  .n93-coords{padding:72px 18px 64px}
  .n93-coords>h2{font-size:52px;line-height:57px;margin:0 0 52px}
  .n93-split{display:block;border-top:.75px solid rgba(241,241,241,.55);padding:24px 0 46px;margin:0}
  .n93-split-kollen{margin-top:0}
  .n93-split-title{font-size:36px;line-height:40px;margin-bottom:24px}
  .n93-split-copy{width:auto}
  .n93-kollen-image{width:100%;height:auto;aspect-ratio:743/432;margin-top:24px}
  .n93-kollen-ctas{flex-direction:column;align-items:flex-start;margin-top:26px}
  .n93-final{padding:70px 18px 78px;text-align:left}
  .n93-final h2{font-size:38px;line-height:44px;text-align:left;margin:0 0 30px}
  .n93-final>.pill{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .n93-hero-label,.n93-hero h1{animation:none!important}
}


/* ==================================================
   V9.4 — NOSALTRES · RETÍCULA GLOBAL DE LA WEB
   Correcció: cap marge desktop queda fixat a 75px.
   A 1440px continua coincidint amb Figma (75px), però
   a la resta d'amples segueix exactament --margin.
================================================== */

.n93 {
    --n93-left: var(--margin);
    --n93-right: var(--margin);
    --n93-inner: calc(100% - (2 * var(--margin)));
}

/* Límits generals */
.n93-hero-label,
.n93-hero h1,
.n93-intro .n93-line,
.n93-intro-label,
.n93-team .n93-line,
.n93-team-label,
.n93-coords > h2,
.n93-split,
.n93-final h2 {
    left: var(--n93-left);
}

/* Amplades que al Figma són 1290px dins 1440px */
.n93-intro .n93-line,
.n93-team .n93-line,
.n93-split,
.n93-final h2 {
    width: var(--n93-inner);
}

/* Hero: 1169px a 1440, però adaptat a la mateixa retícula global */
.n93-hero h1 {
    width: min(1169px, calc(100% - var(--n93-left) - var(--n93-right)));
}

/* Columnes: recuperem les coordenades relatives originals del Figma */
.n93-intro-main,
.n93-team-main {
    left: calc(33.333333% + 32px);
}

.n93-bio-copy {
    left: var(--n93-left);
}

.n93-bio-image {
    left: calc(41.666667% + 89px);
    width: calc(100% - (41.666667% + 89px));
}

/* "El bon disseny..." */
.n93-coords > h2 {
    width: min(1198px, var(--n93-inner));
}

/* Retícula 5/7 del bloc Arrels / Köllen */
.n93-split {
    grid-template-columns:
        calc(41.666667% - var(--n93-left) + 1px)
        minmax(0, 1fr);
    column-gap: 20px;
}

.n93-split-copy {
    width: min(635px, 100%);
}

.n93-kollen-image {
    width: 100%;
    max-width: 743px;
}

/* 01 / 02 / 03:
   els eixos verticals tornen als punts exactes del Figma */
.n93-intro-main .n93-three,
.n93-team-main .n93-three {
    width: calc(100vw - (33.333333% + 32px) - var(--n93-right));
}

.n93-three-item:nth-child(1) {
    left: 0;
}

.n93-three-item:nth-child(2) {
    left: calc(25vw - 75px);
}

.n93-three-item:nth-child(3) {
    left: calc(41.666667vw - 188px);
}

/* A 1440px:
   1r eix = 512
   2n eix = 797
   3r eix = 1082
   exactament com el Figma. */
@media (min-width: 901px) and (max-width: 1600px) {
    .n93-three-item:nth-child(2) {
        left: 285px;
    }

    .n93-three-item:nth-child(3) {
        left: 570px;
    }
}

/* El final ha de respectar el mateix marge exterior que totes les pàgines */
.n93-final {
    padding-left: 0;
    padding-right: 0;
}

/* Mobile continua amb els marges globals que ja usa la resta de la web */
@media (max-width: 620px) {
    .n93 {
        --n93-left: 18px;
        --n93-right: 18px;
        --n93-inner: calc(100% - 36px);
    }

    .n93-hero-label,
    .n93-hero h1,
    .n93-intro .n93-line,
    .n93-intro-label,
    .n93-team .n93-line,
    .n93-team-label,
    .n93-coords > h2,
    .n93-split,
    .n93-final h2 {
        left: auto;
        width: auto;
    }

    .n93-intro-main,
    .n93-team-main,
    .n93-bio-copy,
    .n93-bio-image {
        left: auto;
    }

    .n93-split {
        grid-template-columns: 1fr;
    }

    .n93-intro-main .n93-three,
    .n93-team-main .n93-three {
        width: auto;
    }

    .n93-three-item:nth-child(1),
    .n93-three-item:nth-child(2),
    .n93-three-item:nth-child(3) {
        left: auto;
    }
}


/* ==================================================
   V9.5 — NOSALTRES · NUMERACIÓ + MANTRA + ERGO
================================================== */

/* --------------------------------------------------
   01 / 02 / 03
   Eixos exactes del Figma a 1440:
   512 / 797 / 1082
-------------------------------------------------- */
@media (min-width: 621px) {
    .n93-intro-main .n93-three,
    .n93-team-main .n93-three {
        display: grid;
        grid-template-columns: repeat(3, 285px);
        width: 855px;
        height: 196px;
        position: relative;
    }

    .n93-intro-main .n93-three-item,
    .n93-team-main .n93-three-item {
        position: relative !important;
        left: auto !important;
        top: auto;
        width: 285px;
        height: 105px;
        box-sizing: border-box;
    }

    /* El text no comença exactament a la mateixa distància
       de cada eix al Figma. Respectem les tres coordenades. */
    .n93-three-item:nth-child(1) {
        padding-left: 28px;
    }

    .n93-three-item:nth-child(2) {
        padding-left: 35px;
    }

    .n93-three-item:nth-child(3) {
        padding-left: 32px;
    }

    .n93-three-item:nth-child(1) p {
        width: 253px;
    }

    .n93-three-item:nth-child(2) p,
    .n93-three-item:nth-child(3) p {
        width: 227px;
    }
}

/* --------------------------------------------------
   MANTRA
   Tot el bloc ha de quedar REALMENT centrat, inclosos
   els mots ratllats. Cap span pot crear desplaçament.
-------------------------------------------------- */
.n93-mantra {
    left: 50%;
    transform: translateX(-50%);
    width: min(1290px, calc(100% - (2 * var(--margin))));
    text-align: center;
    text-indent: 0;
    word-spacing: normal;
    letter-spacing: normal;
}

.n93-mantra span,
.n93-mantra .keep,
.n93-mantra .strike {
    display: inline;
    position: static;
    margin: 0;
    padding: 0;
    transform: none;
    vertical-align: baseline;
}

.n93-mantra .strike {
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: none;
}

/* --------------------------------------------------
   DESIGN, ERGO SUM
   Mateix moviment continu que el marquee de la Home.
-------------------------------------------------- */
.n93-ergo {
    display: block;
    overflow: hidden;
    height: 276px;
    padding: 0;
    text-indent: 0;
}

.n93-ergo-track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    white-space: nowrap;
    font-size: 100px;
    line-height: 110px;
    animation: marquee 34s linear infinite;
    will-change: transform;
}

/* Mobile */
@media (max-width: 620px) {
    .n93-mantra {
        left: auto;
        transform: none;
        width: auto;
        text-align: left;
    }

    .n93-ergo {
        height: 128px;
    }

    .n93-ergo-track {
        font-size: 54px;
        line-height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .n93-ergo-track {
        animation: none !important;
        transform: translateX(-5%);
    }
}


/* ==================================================
   V9.6 — NOSALTRES · INTERACCIONS I ANIMACIONS
================================================== */

/* Textos: mateixa lògica de reveal que la Home */
.n93-text-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .62s cubic-bezier(.22,.61,.36,1),
        transform .62s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}

.n93-text-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 01 / 02 / 03 — “bup” en hover */
@media (hover: hover) and (pointer: fine) {
    .n93-three-item {
        transition: transform .24s cubic-bezier(.22,.61,.36,1);
        transform-origin: left center;
    }

    .n93-three-item:hover {
        transform: scale(1.035);
    }
}

/* Paraules ratllades: la ratlla apareix quan el bloc entra */
.n93-strike {
    position: relative;
    text-decoration: none !important;
    display: inline-block;
}

.n93-strike::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .48s cubic-bezier(.22,.61,.36,1);
}

.n93-strike.is-struck::after {
    transform: scaleX(1);
}

/* Imatges: zoom suau com projectes Home */
.n93-hover-image {
    overflow: hidden;
}

.n93-hover-image img {
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .n93-hover-image:hover img {
        transform: scale(1.035);
    }
}

/* Els dos botons Köllen sempre mantenen el mateix comportament visual */
.n93-kollen-ctas .pill {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .n93-text-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .n93-strike::after {
        transform: scaleX(1) !important;
        transition: none !important;
    }

    .n93-hover-image img,
    .n93-three-item {
        transition: none !important;
    }
}


/* ==================================================
   V9.7 — NOSALTRES · ANIMACIÓ HOME + SEQÜÈNCIA
================================================== */

/* Els textos utilitzen directament .reveal-on-scroll global:
   20px / .7s / mateix easing que la Home. */
.n93 .reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0,20px,0);
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.n93 .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}

/* 01 / 02 / 03 apareixen un darrere l'altre */
.n97-step-reveal {
    opacity: 0;
    transform: translate3d(0,20px,0);
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.n97-step-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    .n97-step-reveal.is-visible:hover {
        transform: scale(1.035);
    }
}

@media (prefers-reduced-motion: reduce) {
    .n93 .reveal-on-scroll,
    .n97-step-reveal {
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }
}


/* ==================================================
   V9.8 — FIX DEFINITIU ANIMACIONS NOSALTRES
   Classes pròpies per evitar conflictes amb animacions anteriors.
================================================== */

/* TEXT REVEAL — mateix moviment petit de la Home */
.n93 .n98-reveal {
    opacity: 0 !important;
    transform: translate3d(0,20px,0) !important;
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1) !important;
    will-change: opacity, transform;
}
.n93 .n98-reveal.n98-in {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
}

/* 01 / 02 / 03 — aparició ordenada */
.n93 .n98-step {
    opacity: 0 !important;
    transform: translate3d(0,20px,0) !important;
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1) !important;
    will-change: opacity, transform;
}
.n93 .n98-step.n98-step-in {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
}
@media (hover:hover) and (pointer:fine) {
    .n93 .n98-step.n98-step-in:hover {
        transform: scale(1.035) !important;
    }
}

/* PARAULES RATLLADES
   IMPORTANT: anul·lem qualsevol text-decoration antic i dibuixem nosaltres
   la línia, que sempre queda visible quan acaba l'animació. */
.n93 .n93-mantra .n93-strike {
    position: relative !important;
    display: inline-block !important;
    text-decoration: none !important;
}
.n93 .n93-mantra .n93-strike::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    left: -1px !important;
    width: calc(100% + 2px) !important;
    top: 51% !important;
    height: 2px !important;
    background: currentColor !important;
    opacity: 1 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .52s cubic-bezier(.22,.61,.36,1) !important;
    pointer-events: none !important;
}
.n93 .n93-mantra .n93-strike.n98-struck::after {
    transform: scaleX(1) !important;
}

/* El zoom d'imatges queda separat del reveal del contenidor */
@media (hover:hover) and (pointer:fine) {
    .n93 .n93-hover-image img {
        transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;
    }
    .n93 .n93-hover-image:hover img {
        transform: scale(1.035) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .n93 .n98-reveal,
    .n93 .n98-step {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .n93 .n93-mantra .n93-strike::after {
        transform: scaleX(1) !important;
        transition: none !important;
    }
}


/* ==================================================
   V9.9 — ANIMACIONS DIRECTES A LA PLANTILLA
   La base mai amaga contingut. Només s'anima si JS està actiu.
================================================== */

/* PER DEFECTE: tot visible. Així no pot desaparèixer res si JS falla. */
.n93 .n99-reveal,
.n93 .n99-step {
    opacity: 1;
    transform: none;
}

/* Només quan el propi template confirma que JS funciona,
   preparem l'estat inicial per a l'animació. */
html.n99-js .n93 .n99-reveal {
    opacity: 0;
    transform: translate3d(0,20px,0);
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
html.n99-js .n93 .n99-reveal.n99-in {
    opacity: 1;
    transform: translate3d(0,0,0);
}

html.n99-js .n93 .n99-step {
    opacity: 0;
    transform: translate3d(0,20px,0);
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
html.n99-js .n93 .n99-step.n99-step-in {
    opacity: 1;
    transform: translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    html.n99-js .n93 .n99-step.n99-step-in:hover {
        transform: scale(1.035);
    }
}

/* RATLLATS:
   per defecte són visibles com al Figma.
   Només si JS funciona amaguem la ratlla inicial i la dibuixem. */
.n93 .n93-mantra .n93-strike {
    position: relative !important;
    display: inline-block !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 2px !important;
    text-decoration-skip-ink: none !important;
}

.n93 .n93-mantra .n93-strike::after {
    content: none;
}

html.n99-js .n93 .n93-mantra .n93-strike {
    text-decoration: none !important;
}

html.n99-js .n93 .n93-mantra .n93-strike::after {
    content: "" !important;
    position: absolute !important;
    left: -1px !important;
    width: calc(100% + 2px) !important;
    top: 51% !important;
    height: 2px !important;
    background: currentColor !important;
    z-index: 5 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;
    pointer-events: none !important;
}

html.n99-js .n93 .n93-mantra .n93-strike.n99-struck::after {
    transform: scaleX(1) !important;
}

/* Desactivem els estats antics de v9.6/v9.7/v9.8 perquè no interfereixin. */
.n93 .n93-text-reveal,
.n93 .n97-step-reveal,
.n93 .n98-reveal,
.n93 .n98-step {
    opacity: inherit !important;
    transform: none !important;
}

/* Imatges: hover intacte */
@media (hover:hover) and (pointer:fine) {
    .n93 .n93-hover-image img {
        transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;
    }
    .n93 .n93-hover-image:hover img {
        transform: scale(1.035) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.n99-js .n93 .n99-reveal,
    html.n99-js .n93 .n99-step {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html.n99-js .n93 .n93-mantra .n93-strike::after {
        transform: scaleX(1) !important;
        transition: none !important;
    }
}


/* V9.11 — Centrat botó final Nosaltres */
@media (min-width: 621px) {
    .n93-final > .pill {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* V9.12 — Imatge taula Köllen */
.n93-kollen-image {
    border-radius: 5px !important;
}
.n93-kollen-image img {
    border-radius: 5px !important;
}


/* V9.13 — Foto Paula completa en mòbil */
@media (max-width: 620px) {
    .n93-bio-image {
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: hidden;
    }

    .n93-bio-image img {
        display: block;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* ==================================================
   V9.14 — FOTO PAULA · RESPONSIVE REAL
   El breakpoint anterior (620px) era massa baix.
   En amplades tipus mòbil/tablet del navegador, la foto
   encara heretava la columna desktop de 41.67%.
================================================== */
@media (max-width: 900px) {
    .n93-bio {
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
    }

    .n93-bio-copy {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
    }

    .n93-bio-image {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .n93-bio-image img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform-origin: center center;
    }
}






/* ==================================================
   V9.17 — MARGES EXACTAMENT IGUALS QUE LA HOME
   La Home és la referència: .shell = padding var(--margin).
   NO toca header, menú ni footer.
================================================== */

/* Projectes, Premis i Exposicions:
   anul·lem els marges mòbil específics (18px / 16px) i fem
   servir exactament el sistema original de la Home. */
.projects-page > .shell,
.awards-page > .shell,
.exhibitions-page > .shell,
.awards-page .awards-claim__inner.shell,
.exhibitions-page .exhibitions-claim__inner.shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--margin) !important;
    padding-right: var(--margin) !important;
    box-sizing: border-box;
}

/* NOSALTRES — desktop:
   usa la mateixa variable global que la Home. */
.n93 {
    --n93-left: var(--margin) !important;
    --n93-right: var(--margin) !important;
    --n93-inner: calc(100% - (2 * var(--margin))) !important;
}

.n93-hero-label,
.n93-hero h1,
.n93-intro .n93-line,
.n93-intro-label,
.n93-team .n93-line,
.n93-team-label,
.n93-coords > h2,
.n93-split,
.n93-final h2 {
    left: var(--margin) !important;
}

.n93-intro .n93-line,
.n93-team .n93-line,
.n93-split,
.n93-final h2 {
    width: calc(100% - (2 * var(--margin))) !important;
}

.n93-bio-copy {
    left: var(--margin) !important;
}

/* MÒBIL
   La Home ja defineix --margin:20px.
   Per tant NO inventem 18px ni 16px: tot usa var(--margin). */
@media (max-width: 620px) {

    .projects-page > .shell,
    .awards-page > .shell,
    .exhibitions-page > .shell,
    .awards-page .awards-claim__inner.shell,
    .exhibitions-page .exhibitions-claim__inner.shell {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }

    /* Nosaltres: seccions que no fan servir .shell */
    .n93-hero,
    .n93-intro,
    .n93-team,
    .n93-coords,
    .n93-final {
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }

    .n93-mantra-wrap {
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }

    .n93-bio-copy {
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }

    /* En mòbil ja no treballem amb coordenades absolutes. */
    .n93-hero-label,
    .n93-hero h1,
    .n93-intro .n93-line,
    .n93-intro-label,
    .n93-intro-main,
    .n93-team .n93-line,
    .n93-team-label,
    .n93-team-main,
    .n93-bio-copy,
    .n93-coords > h2,
    .n93-split,
    .n93-final h2,
    .n93-final > .pill {
        left: auto !important;
        right: auto !important;
        width: auto !important;
    }

    .n93-intro .n93-line,
    .n93-team .n93-line {
        width: 100% !important;
    }

    /* El mantra havia tingut 18px propis: passa al marge Home. */
    .n93-mantra {
        width: auto !important;
        left: auto !important;
        transform: none !important;
    }
}

/* IMPORTANT:
   existia una excepció de Premis a <=390px que baixava a 16px.
   La neutralitzem: també aquí s'utilitza el marge de la Home (20px). */
@media (max-width: 390px) {
    .projects-page > .shell,
    .awards-page > .shell,
    .exhibitions-page > .shell,
    .awards-page .awards-claim__inner.shell,
    .exhibitions-page .exhibitions-claim__inner.shell {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }

    .n93-hero,
    .n93-intro,
    .n93-team,
    .n93-coords,
    .n93-final,
    .n93-mantra-wrap,
    .n93-bio-copy {
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }
}


/* ==================================================
   V9.18 — NOSALTRES · POLIT MOBILE
================================================== */

/* 01 / 02 / 03:
   centrem verticalment el text respecte al número */
@media (max-width: 620px) {
    .n93 .n93-three-item {
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .n93 .n93-three-item .n93-num {
        align-self: center !important;
        margin: 0 !important;
    }

    .n93 .n93-three-item p {
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Köllen: els dos CTA es mantenen de costat en mòbil */
    .n93 .n93-kollen-ctas {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
    }

    .n93 .n93-kollen-ctas .pill {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        white-space: normal !important;
    }

    .n93 .n93-kollen-ctas .pill > span:last-child {
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    .n93 .n93-kollen-ctas .pill__arrow {
        flex: 0 0 auto !important;
    }
}

/* En mòbils molt estrets encara caben costat per costat;
   reduïm només el gap i el padding interior, no el cos del text. */
@media (max-width: 390px) {
    .n93 .n93-kollen-ctas {
        gap: 8px !important;
    }

    .n93 .n93-kollen-ctas .pill {
        padding-right: 8px !important;
    }
}


/* ==================================================
   V10.2 — CONTACTE · Figma 4048:4
   Rebuild sobre base V9.18
================================================== */
.c102-page{background:#1D1A16;color:#fff}
.c102-main{
    background:#1D1A16;
    min-height:882px;
    padding-top:124px;
}
.c102-shell{
    width:100%;
    padding-left:var(--margin);
    padding-right:var(--margin);
    box-sizing:border-box;
}
.c102-eyebrow{
    margin:0;
    font-size:16px;
    line-height:1.25;
    font-weight:400;
    color:#F1F1F1;
    text-transform:uppercase;
}
.c102-email{
    display:block;
    margin-top:27px;
    font-size:clamp(72px,6.944vw,100px);
    line-height:1.1;
    letter-spacing:-.045em;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}
.c102-contacts{
    display:grid;
    grid-template-columns:308fr 414fr 526fr;
    column-gap:22px;
    margin-top:25px;
}
.c102-contact{
    position:relative;
    min-height:140px;
    padding-top:25px;
    box-sizing:border-box;
}
.c102-rule{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:rgba(241,241,241,.48);
}
.c102-rule--bottom{top:auto;bottom:0}
.c102-contact a,
.c102-value{
    display:block;
    margin-top:15px;
    font-size:36px;
    line-height:46px;
    font-weight:400;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}
.c102-claim{
    margin-top:74px;
}
.c102-claim h1{
    margin:0;
    max-width:1198px;
    font-size:90px;
    line-height:106px;
    letter-spacing:-.035em;
    font-weight:400;
}
.c102-claim em{
    font-family:"PP Editorial New",serif;
    font-style:italic;
    font-weight:300;
}
@media(hover:hover) and (pointer:fine){
    .c102-email:hover,.c102-contact a:hover{opacity:.62}
}
.c102-reveal,.c102-contact{opacity:1;transform:none}
html.c102-js .c102-reveal,
html.c102-js .c102-contact{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
html.c102-js .c102-reveal.is-in,
html.c102-js .c102-contact.is-in{opacity:1;transform:none}

@media(max-width:1100px) and (min-width:621px){
    .c102-email{white-space:normal;overflow-wrap:anywhere}
    .c102-contacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
    .c102-contact a,.c102-value{font-size:27px;line-height:35px;white-space:normal}
    .c102-claim h1{font-size:68px;line-height:78px}
}

@media(max-width:620px){
    .c102-main{
        min-height:0;
        padding-top:118px;
        padding-bottom:72px;
    }
    .c102-shell{
        padding-left:var(--margin);
        padding-right:var(--margin);
    }
    .c102-eyebrow{
        font-size:11px;
        line-height:1;
        letter-spacing:.035em;
    }
    .c102-email{
        margin-top:18px;
        font-size:clamp(38px,10.4vw,50px);
        line-height:1.02;
        letter-spacing:-.045em;
        white-space:normal;
        overflow-wrap:anywhere;
    }
    .c102-contacts{
        grid-template-columns:1fr;
        gap:0;
        margin-top:44px;
    }
    .c102-contact{
        min-height:0;
        padding:18px 0 22px;
    }
    .c102-rule--bottom{display:none}
    .c102-contact--li .c102-rule--bottom{display:block}
    .c102-contact a,.c102-value{
        margin-top:12px;
        font-size:16px;
        line-height:20px;
        white-space:normal;
    }
    .c102-claim{margin-top:64px}
    .c102-claim h1{
        font-size:52px;
        line-height:57px;
        letter-spacing:-.045em;
    }
}
@media(prefers-reduced-motion:reduce){
    html.c102-js .c102-reveal,
    html.c102-js .c102-contact{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }
}


/* ==================================================
   V10.3 — CONTACTE · MÉS AIRE COM AL FIGMA
================================================== */

/* El bloc MAIL baixa lleugerament */
.c102-main {
    padding-top: 148px !important;
}

/* Més aire entre l'email gran i el bloc
   WhatsApp / Instagram / LinkedIn */
.c102-contacts {
    margin-top: 50px !important;
}

/* Mobile: mateix criteri, però una mica més contingut */
@media (max-width: 620px) {
    .c102-main {
        padding-top: 128px !important;
    }

    .c102-contacts {
        margin-top: 50px !important;
    }
}


/* ==================================================
   V10.4 — CONTACTE · ALINEACIÓ VERTICAL GLOBAL
   MAIL ocupa la mateixa posició del petit títol de
   Premis / Exposicions. Baixem el contingut posterior.
================================================== */

/* Recuperem la posició superior comuna de les pàgines interiors */
.c102-main {
    padding-top: 124px !important;
}

/* El MAIL queda ancorat al mateix nivell que
   PREMIS / EXPOSICIONS. No el baixem independentment. */
.c102-mail {
    margin-top: 0 !important;
}

/* L'aire extra passa DESPRÉS del bloc de mail */
.c102-contacts {
    margin-top: 58px !important;
}

/* Mòbil: mateixa lògica.
   Etiqueta MAIL alineada amb els petits títols de les altres pàgines. */
@media (max-width: 620px) {
    .c102-main {
        padding-top: 118px !important;
    }

    .c102-mail {
        margin-top: 0 !important;
    }

    .c102-contacts {
        margin-top: 56px !important;
    }
}


/* ==================================================
   V10.5 — CONTACTE
   MAIL es queda fix. Baixem REALMENT la resta del contingut.
================================================== */

/* El bloc MAIL conserva la posició comuna amb Premis / Exposicions */
.c102-main {
    padding-top: 124px !important;
}

/* Fem que l'espai sigui explícit després de l'email,
   no dependent del margin collapsing ni de la grid. */
.c102-mail {
    margin-bottom: 0 !important;
}

.c102-contacts {
    margin-top: 0 !important;
    transform: translateY(42px);
}

/* Com que movem el bloc de contactes visualment,
   també desplacem el claim perquè mantingui la mateixa distància */
.c102-claim {
    margin-top: 116px !important;
}

/* Mòbil */
@media (max-width: 620px) {
    .c102-main {
        padding-top: 118px !important;
    }

    .c102-contacts {
        margin-top: 0 !important;
        transform: translateY(34px);
    }

    .c102-claim {
        margin-top: 98px !important;
    }
}


/* ==================================================
   V10.6 — CONTACTE · MAIL FIX, RESTA REALMENT MÉS AVALL
   El text petit "MAIL" es manté al mateix nivell que PREMIS/EXPOSICIONS.
   A partir d'aquí baixem l'email, els contactes i el claim.
================================================== */

/* MAIL petit: no es toca */
.c102-main {
    padding-top: 124px !important;
}

/* Baixem l'adreça gran respecte del petit MAIL */
.c102-email {
    margin-top: 48px !important;
}

/* Baixem també WhatsApp / Instagram / LinkedIn */
.c102-contacts {
    position: relative !important;
    top: 34px !important;
    margin-top: 25px !important;
    transform: none !important;
}

/* I mantenim aire abans del claim final */
.c102-claim {
    margin-top: 118px !important;
}

/* Mòbil: mateix criteri */
@media (max-width: 620px) {
    .c102-main {
        padding-top: 118px !important;
    }

    .c102-email {
        margin-top: 30px !important;
    }

    .c102-contacts {
        top: 28px !important;
        margin-top: 44px !important;
        transform: none !important;
    }

    .c102-claim {
        margin-top: 104px !important;
    }
}


/* ==================================================
   V10.7 — CONTACTE · MATEIX EIX VERTICAL QUE PREMIS/EXPOSICIONS
   La causa era aquesta: Premis/Exposicions comencen a 218px
   en desktop, mentre Contacte havia quedat a 124px.
================================================== */

/* Desktop: MAIL exactament al mateix nivell que PREMIS / EXPOSICIONS */
.c102-main {
    padding-top: 218px !important;
}

/* Figma: MAIL -> email gran */
.c102-email {
    margin-top: 27px !important;
}

/* Figma: més aire abans de WhatsApp / Instagram / LinkedIn */
.c102-contacts {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin-top: 50px !important;
}

/* Figma: línia inferior contactes y565 -> claim y647 = 82px */
.c102-claim {
    margin-top: 82px !important;
}

/* Mòbil: ja coincidia amb Premis/Exposicions a 118px */
@media (max-width: 620px) {
    .c102-main {
        padding-top: 118px !important;
    }

    .c102-email {
        margin-top: 18px !important;
    }

    .c102-contacts {
        position: static !important;
        top: auto !important;
        transform: none !important;
        margin-top: 44px !important;
    }

    .c102-claim {
        margin-top: 64px !important;
    }
}


/* ==================================================
   V10.9 — CONTACTE · ESPAI SIMÈTRIC AL CLAIM FINAL
   Mateix aire entre filet → claim i claim → footer.
================================================== */

/* El filet inferior dels contactes queda separat del claim 82px.
   Afegim el mateix aire després del claim abans del footer. */
.c102-main {
    padding-bottom: 82px !important;
}

@media (max-width: 620px) {
    /* En mòbil el claim està separat 64px del filet;
       repetim aquest mateix espai abans del footer. */
    .c102-main {
        padding-bottom: 64px !important;
    }
}


/* ==================================================
   V10.10 — CONTACTE · MAIL MOBILE SENSE TALLAR
================================================== */
@media (max-width: 620px) {
    .c102-email {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: none !important;
        font-size: clamp(30px, 8.7vw, 42px) !important;
        line-height: 1.02 !important;
        letter-spacing: -.04em !important;
    }
}

@media (max-width: 390px) {
    .c102-email {
        font-size: clamp(28px, 8.4vw, 36px) !important;
    }
}


/* ==================================================
   V10.11 — CONTACTE · MAIL FLUID EN MÒBIL
   Sempre en una sola línia; es redueix progressivament
   segons l'amplada disponible i mai es talla.
================================================== */
@media (max-width: 620px) {
    .c102-email {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;

        /* 38px aprox. a 390px; baixa proporcionalment en pantalles petites */
        font-size: clamp(25px, 9.7vw, 42px) !important;
        line-height: 1.02 !important;
        letter-spacing: -.045em !important;
    }
}

/* Pantalles especialment estretes */
@media (max-width: 360px) {
    .c102-email {
        font-size: 9.45vw !important;
        letter-spacing: -.05em !important;
    }
}


/* ==================================================
   V10.12 — EXPOSICIONS · PRIMER ITEM AL MATEIX NIVELL QUE PREMIS
================================================== */

/* Desktop:
   Premis és la referència visual. Reduïm només l'espai inferior del hero
   d'Exposicions perquè la primera línia del llistat caigui al mateix punt. */
@media (min-width: 621px) {
    .exhibitions-hero {
        padding-bottom: 190px !important;
    }
}

/* Mobile:
   mateixa lògica: que el primer item entri a la mateixa alçada visual
   que el primer premi. */
@media (max-width: 620px) {
    .exhibitions-hero {
        padding-bottom: 54px !important;
    }
}


/* ==================================================
   V10.13 — EXPOSICIONS · POSICIÓ EXACTA DEL PRIMER ITEM
   Copiem els valors verticals de PREMIS, no els aproximem.
================================================== */

/* Desktop >900:
   Premis: hero 218px / 205px */
@media (min-width: 901px) {
    .exhibitions-hero {
        padding-top: 218px !important;
        padding-bottom: 205px !important;
    }
}

/* Tablet 621–900:
   Premis: hero 180px / 140px */
@media (min-width: 621px) and (max-width: 900px) {
    .exhibitions-hero {
        padding-top: 180px !important;
        padding-bottom: 140px !important;
    }
}

/* Mobile <=620:
   Premis: hero 138px / 92px
   També igualem etiqueta i títol perquè l'alçada total del hero sigui la mateixa. */
@media (max-width: 620px) {
    .exhibitions-hero {
        padding-top: 138px !important;
        padding-bottom: 92px !important;
    }

    .exhibitions-hero__label {
        margin-bottom: 18px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .exhibitions-hero__title {
        font-size: clamp(50px, 14vw, 66px) !important;
        line-height: .99 !important;
    }
}


/* ==================================================
   V10.15 — MENÚ · PÀGINA ACTIVA EN SEMIBOLD/BOLD
   WordPress afegeix automàticament current-menu-item.
================================================== */
.site-header .menu .current-menu-item > a,
.site-header .menu .current_page_item > a,
.site-header .menu .current-menu-ancestor > a {
    font-weight: 600 !important;
}

/* També al menú mòbil */
.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a,
.mobile-menu .current-menu-ancestor > a {
    font-weight: 600 !important;
}


/* ==================================================
   V10.16 — MENÚ ACTIU · FIX
   El menú real utilitza .site-header__menu, no .menu.
================================================== */
.site-header__menu > .current-menu-item > a,
.site-header__menu > .current_page_item > a,
.site-header__menu > .current-menu-ancestor > a,
.site-header__menu > .is-active > a {
    font-weight: 600 !important;
}

.mobile-menu__list > .current-menu-item > a,
.mobile-menu__list > .current_page_item > a,
.mobile-menu__list > .current-menu-ancestor > a,
.mobile-menu__list > .is-active > a {
    font-weight: 600 !important;
}


/* ==================================================
   V10.17 — CONTACTE · HOVER “BLUP”
   Mail, WhatsApp, Instagram i LinkedIn
================================================== */

@media (hover:hover) and (pointer:fine) {
    .c102-email,
    .c102-contact a,
    .c102-contact .c102-value {
        display: inline-block;
        transform-origin: left center;
        transition:
            transform .24s cubic-bezier(.22,.61,.36,1),
            opacity .24s ease;
    }

    .c102-email:hover,
    .c102-contact a:hover,
    .c102-contact .c102-value:hover {
        transform: scale(1.025);
        opacity: 1 !important;
    }
}






/* ==================================================
   V10.26 — CURSOR NATIU + PUNT/CERCLE VISIBLE
   La fletxa es manté. El cercle és clarament visible.
================================================== */

.pts-cursor-dot {
    display: none;
}

@media (hover:hover) and (pointer:fine) {
    .pts-cursor-dot {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2147483647;
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #fff;
        mix-blend-mode: difference;
        pointer-events: none;
        opacity: 0;
        transform: translate3d(-100px,-100px,0);
        transition:
            width .22s cubic-bezier(.22,.61,.36,1),
            height .22s cubic-bezier(.22,.61,.36,1),
            opacity .15s ease;
        will-change: transform, width, height;
    }

    .pts-cursor-dot.is-visible {
        opacity: 1;
    }

    .pts-cursor-dot.is-hovering {
        width: 28px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pts-cursor-dot {
        display: none !important;
    }
}


/* ==================================================
   V10.27 — CURSOR · PUNT DAVANT DE LA FLETXA
================================================== */
@media (hover:hover) and (pointer:fine) {
    .pts-cursor-dot {
        width: 9px !important;
        height: 9px !important;
        transform-origin: center center;
    }

    .pts-cursor-dot.is-hovering {
        width: 30px !important;
        height: 30px !important;
    }
}


/* V10.28 — cercle hover una mica més gran */
@media (hover:hover) and (pointer:fine) {
    .pts-cursor-dot.is-hovering {
        width: 36px !important;
        height: 36px !important;
    }
}


/* V10.29 — cercle hover 60px */
@media (hover:hover) and (pointer:fine) {
    .pts-cursor-dot.is-hovering {
        width: 60px !important;
        height: 60px !important;
    }
}


/* ==================================================
   V10.31 — KÖLLEN SLIDER
================================================== */
.n93-kollen-slider {
    position: relative;
    overflow: hidden;
}

.n93-kollen-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .85s cubic-bezier(.22,.61,.36,1),
        visibility .85s linear;
}

.n93-kollen-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.n93-kollen-slide:first-child {
    position: relative;
}

.n93-kollen-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

/* Manté el zoom que ja teníem, aplicat a la diapositiva activa */
@media (hover:hover) and (pointer:fine) {
    .n93-kollen-slider:hover .n93-kollen-slide.is-active img {
        transform: scale(1.035);
    }
}

/* Mobile conserva exactament el mateix ratio del bloc actual */
@media (max-width: 620px) {
    .n93-kollen-slider {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 743 / 432;
    }

    .n93-kollen-slide:first-child {
        position: absolute;
    }
}


/* ==================================================
   V11 — SERVEIS
================================================== */
.srv-page{background:#1D1A16;color:#fff}
.srv-shell{width:100%;padding-left:var(--margin);padding-right:var(--margin);box-sizing:border-box}

.srv-hero{
    position:relative;
    min-height:798px;
    padding-top:224px;
    background:#1D1A16;
    overflow:hidden;
}
.srv-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--srv-hero-bg);
    background-size:cover;
    background-position:center;
    opacity:.10;
    pointer-events:none;
}
.srv-hero .srv-shell{position:relative;z-index:1}
.srv-eyebrow{font-size:16px;line-height:1.2;text-transform:uppercase;margin:0 0 24px}
.srv-hero-title{
    margin:0;
    max-width:1169px;
    font-size:100px;
    line-height:110px;
    letter-spacing:-.045em;
    font-weight:400;
}
.srv-hero-title em,
.srv-strategy-big em,
.srv-final-title em{
    font-family:"PP Editorial New",serif;
    font-style:italic;
    font-weight:300;
}

.srv-list{background:#1D1A16;padding-bottom:120px}
.srv-item{border-top:.75px solid rgba(255,255,255,.7)}
.srv-head{
    width:100%;
    min-height:150px;
    display:grid;
    grid-template-columns:120px 365px minmax(0,526px) 1fr;
    align-items:start;
    column-gap:20px;
    padding:15px 0 16px;
    border:0;
    background:none;
    color:#fff;
    text-align:left;
    cursor:pointer;
}
.srv-num,.srv-title{font-size:36px;line-height:46px;font-weight:400}
.srv-short{font-size:16px;line-height:20px;padding-top:11px;max-width:526px}
.srv-toggle{justify-self:end;position:relative;width:49px;height:49px;margin-top:12px}
.srv-toggle-circle{
    position:absolute;inset:1px;border:1px solid rgba(255,255,255,.8);border-radius:50%;
}
.srv-toggle-arrow{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:28px;line-height:1;transform:rotate(90deg);transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.srv-item.is-open .srv-toggle-arrow{transform:rotate(0deg)}
.srv-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1)}
.srv-panel-inner{overflow:hidden}
.srv-item.is-open .srv-panel{grid-template-rows:1fr}
.srv-expanded-copy{
    width:526px;
    margin-left:calc(50% + 10px);
    font-size:16px;
    line-height:20px;
    padding:0 0 26px;
}
.srv-expanded-copy p{margin:0 0 20px}
.srv-expanded-copy strong{font-weight:600}
.srv-image{
    margin-left:calc(16.67% + 57px);
    width:calc(83.33% - 57px);
    aspect-ratio:1068/472;
    margin-bottom:74px;
    border-radius:5px;
    overflow:hidden;
}
.srv-image img{
    width:100%;height:100%;display:block;object-fit:cover;
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
@media(hover:hover) and (pointer:fine){
    .srv-item:hover .srv-title{transform:translateX(6px)}
    .srv-title{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
    .srv-image:hover img{transform:scale(1.035)}
}
.srv-projects-cta{display:flex;justify-content:center;padding-top:40px}

.srv-strategy{background:#F1F1F1;color:#1D1A16;padding:118px 0 120px}
.srv-strategy-big{
    max-width:1198px;margin:0 0 82px;font-size:90px;line-height:106px;font-weight:400;letter-spacing:-.035em
}
.srv-strategy-big strong{font-weight:500}
.srv-strategy-grid{
    display:grid;
    grid-template-columns:526px 635px;
    gap:74px;
    align-items:start;
}
.srv-strategy-grid h3{
    border-top:1px solid #1D1A16;
    margin:0;padding-top:22px;
    font-size:55px;line-height:59px;font-weight:600;
}
.srv-strategy-copy{
    border-top:1px solid #1D1A16;
    padding-top:22px;
    font-size:16px;line-height:22px;
}
.srv-strategy-copy .pill{margin-top:20px}

.srv-two-cols{background:#1D1A16;color:#fff;padding:104px 0 110px}
.srv-two-cols-grid{display:grid;grid-template-columns:1fr 1fr;gap:84px}
.srv-two-col{border-left:1px solid rgba(255,255,255,.7);padding-left:35px;min-height:233px}
.srv-two-col h3{margin:0 0 20px;font-size:36px;line-height:46px;font-weight:400}
.srv-two-col p{font-size:16px;line-height:20px;max-width:526px;margin:0}

.srv-final{background:#F1F1F1;color:#1D1A16;text-align:center;padding:104px 0 100px}
.srv-final-title{
    margin:0 auto;
    max-width:1290px;
    font-size:55px;line-height:65px;font-weight:500;
}
.srv-final-cta{margin-top:36px}

/* reveal */
.srv-reveal{opacity:1;transform:none}
html.srv-js .srv-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.srv-js .srv-reveal.is-in{opacity:1;transform:none}

/* Tablet */
@media(max-width:1100px) and (min-width:621px){
    .srv-hero-title{font-size:74px;line-height:82px}
    .srv-head{grid-template-columns:80px 250px minmax(0,1fr) 50px}
    .srv-num,.srv-title{font-size:30px;line-height:38px}
    .srv-expanded-copy{width:auto;margin-left:calc(40% + 20px);margin-right:70px}
    .srv-image{margin-left:20%;width:80%}
    .srv-strategy-big{font-size:68px;line-height:78px}
    .srv-strategy-grid{grid-template-columns:1fr 1.2fr;gap:40px}
    .srv-strategy-grid h3{font-size:44px;line-height:49px}
}

/* Mobile — mateix marge que Home */
@media(max-width:620px){
    .srv-hero{
        min-height:560px;
        padding-top:138px;
        display:flex;
        align-items:flex-start;
    }
    .srv-eyebrow{font-size:12px;margin-bottom:18px}
    .srv-hero-title{
        font-size:clamp(52px,14vw,66px);
        line-height:.99;
        letter-spacing:-.045em;
    }
    .srv-list{padding-bottom:76px}
    .srv-head{
        min-height:0;
        grid-template-columns:46px minmax(0,1fr) 42px;
        grid-template-areas:
            "num title toggle"
            ". short toggle";
        gap:7px 10px;
        padding:18px 0 20px;
        align-items:start;
    }
    .srv-num{grid-area:num}
    .srv-title{grid-area:title}
    .srv-short{grid-area:short}
    .srv-toggle{grid-area:toggle}
    .srv-num,.srv-title{font-size:24px;line-height:30px}
    .srv-short{font-size:16px;line-height:20px;padding-top:3px}
    .srv-toggle{width:38px;height:38px;margin-top:0}
    .srv-toggle-arrow{font-size:22px}
    .srv-expanded-copy{
        width:auto;
        margin:0 0 24px 56px;
        font-size:16px;
        line-height:20px;
    }
    .srv-image{
        margin:0 0 44px 56px;
        width:calc(100% - 56px);
        aspect-ratio:1.6;
    }
    .srv-projects-cta{padding-top:34px}
    .srv-strategy{padding:76px 0 78px}
    .srv-strategy-big{
        font-size:50px;
        line-height:55px;
        margin-bottom:56px;
    }
    .srv-strategy-grid{grid-template-columns:1fr;gap:42px}
    .srv-strategy-grid h3{font-size:42px;line-height:46px}
    .srv-two-cols{padding:72px 0}
    .srv-two-cols-grid{grid-template-columns:1fr;gap:50px}
    .srv-two-col{padding-left:20px;min-height:0}
    .srv-two-col h3{font-size:30px;line-height:36px}
    .srv-final{padding:74px 0 72px}
    .srv-final-title{font-size:40px;line-height:46px}
}

@media(prefers-reduced-motion:reduce){
    .srv-panel,.srv-toggle-arrow,.srv-reveal{transition:none!important}
    html.srv-js .srv-reveal{opacity:1!important;transform:none!important}
}


/* ==================================================
   V11.1 — SERVEIS · FIX ACORDIÓ + FLETXA + ESTRATÈGIA
================================================== */

/* -------- Acordió natiu: funciona encara que JS falli -------- */
.srv-item {
    border-top: .75px solid rgba(255,255,255,.7);
}

.srv-head {
    list-style: none;
    cursor: pointer;
}

.srv-head::-webkit-details-marker {
    display: none;
}

.srv-head::marker {
    content: "";
}

/* El panel depèn de <details open>, no de classes JS */
.srv-panel {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height .72s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease;
}

.srv-item[open] .srv-panel {
    max-height: 900px;
    opacity: 1;
}

/* -------- Cercle/fletxa: mateix llenguatge que Premis -------- */
.srv-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 47px !important;
    height: 47px !important;
    margin-top: 12px !important;
    border: .75px solid #fff;
    border-radius: 50%;
    font-size: 22px !important;
    line-height: 1;
    color: #fff;
    transform: rotate(90deg);
    transition:
        background-color .22s ease,
        color .22s ease,
        transform .32s cubic-bezier(.22,.61,.36,1);
}

.srv-toggle-circle,
.srv-toggle-arrow {
    display: none !important;
}

.srv-item[open] .srv-toggle {
    transform: rotate(0deg);
}

@media (hover:hover) and (pointer:fine) {
    .srv-head:hover .srv-toggle {
        background: #fff;
        color: #1D1A16;
    }
}

/* -------- Bloc ESTRATÈGIA: coordenades del Figma 4056:186 --------
   secció: y2197–3129 = 932px
   titular gran: y2315
   filets: y2728
   títol esquerra: y2750
   text dreta: y2762
   CTA: y2929
----------------------------------------------------------------- */
@media (min-width: 1101px) {
    .srv-strategy {
        height: 932px !important;
        min-height: 932px;
        padding: 0 !important;
        position: relative;
        box-sizing: border-box;
    }

    .srv-strategy > .srv-shell {
        position: relative;
        height: 100%;
    }

    .srv-strategy-big {
        position: absolute;
        top: 118px;
        left: 0;
        width: min(1198px, 100%);
        max-width: 1198px;
        margin: 0 !important;
        font-size: 90px !important;
        line-height: 106px !important;
        letter-spacing: -.035em;
        font-weight: 400;
    }

    .srv-strategy-grid {
        position: absolute;
        top: 531px;
        left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 526px 635px !important;
        column-gap: 74px !important;
        align-items: start;
    }

    .srv-strategy-grid h3 {
        width: 526px;
        margin: 0;
        padding-top: 21px !important;
        border-top: 1px solid #1D1A16;
        font-size: 55px !important;
        line-height: 59px !important;
        font-weight: 600;
    }

    .srv-strategy-copy {
        width: 635px;
        padding-top: 30px !important;
        border-top: 1px solid #1D1A16;
        font-size: 16px;
        line-height: normal;
    }

    .srv-strategy-copy p {
        margin-top: 0;
    }

    .srv-strategy-copy .pill {
        margin-top: 18px !important;
    }
}

/* Mobile: mateix cercle que Premis, adaptat a mida mòbil */
@media (max-width: 620px) {
    .srv-toggle {
        width: 36px !important;
        height: 36px !important;
        margin-top: 0 !important;
        font-size: 17px !important;
    }

    .srv-item[open] .srv-panel {
        max-height: 1200px;
    }
}


/* ==================================================
   V11.2 — ESTRATÈGIA · AJUST EXACTE FIGMA 4056:186
   Referències del frame 1440:
   secció y=2197 h=932
   titular x=75 y=2315 w=1198
   filet esquerra x=75 y=2728 w=526
   filet dreta x=621 y=2728 w=635
   títol esquerra x=75 y=2750
   text dreta x=621 y=2762
   CTA x=621 y=2929
================================================== */

@media (min-width: 1101px) {
    .srv-strategy {
        position: relative !important;
        height: 932px !important;
        min-height: 932px !important;
        padding: 0 !important;
        overflow: hidden;
    }

    .srv-strategy > .srv-shell {
        position: relative !important;
        height: 932px !important;
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }

    .srv-strategy-big {
        position: absolute !important;
        top: 118px !important;
        left: var(--margin) !important;
        width: 1198px !important;
        max-width: 1198px !important;
        height: 440px !important;
        margin: 0 !important;
        font-size: 90px !important;
        line-height: 106px !important;
        letter-spacing: -.035em !important;
        font-weight: 400 !important;
    }

    .srv-strategy-big > span {
        display: block;
        white-space: nowrap;
    }

    .srv-strategy-grid {
        position: absolute !important;
        top: 531px !important;
        left: var(--margin) !important;
        width: 1181px !important;
        display: grid !important;
        grid-template-columns: 526px 635px !important;
        column-gap: 20px !important;
        align-items: start !important;
    }

    .srv-strategy-grid h3 {
        width: 526px !important;
        margin: 0 !important;
        padding-top: 21px !important;
        border-top: 1px solid #1D1A16 !important;
        font-size: 55px !important;
        line-height: 59px !important;
        font-weight: 600 !important;
        box-sizing: border-box;
    }

    .srv-strategy-copy {
        position: relative !important;
        width: 635px !important;
        min-height: 250px;
        margin: 0 !important;
        padding-top: 30px !important;
        border-top: 1px solid #1D1A16 !important;
        font-size: 16px !important;
        line-height: normal !important;
        box-sizing: border-box;
    }

    .srv-strategy-copy > p {
        margin: 0 !important;
        max-width: 635px;
    }

    .srv-strategy-copy .pill {
        position: absolute !important;
        top: 200px !important;
        left: 0 !important;
        margin: 0 !important;
    }
}

/* En pantalles on 1198px ja no hi caben, recuperem el responsive. */
@media (max-width: 1320px) and (min-width: 1101px) {
    .srv-strategy-big {
        width: calc(100% - (2 * var(--margin))) !important;
        max-width: none !important;
        font-size: clamp(72px, 6.8vw, 90px) !important;
        line-height: 1.15 !important;
    }

    .srv-strategy-big > span {
        white-space: normal;
    }

    .srv-strategy-grid {
        width: calc(100% - (2 * var(--margin))) !important;
        grid-template-columns: minmax(0, 526px) minmax(0, 635px) !important;
    }
}


/* ==================================================
   V11.3 — DOS BLOCS FINALS · EXACTES AL FIGMA 4056:186

   Frame 1440:
   secció fosca: y3129 → y3563 = 434px
   línia vertical esquerra: x75, y3238, h233
   línia vertical central: x694, y3238, h233
   títol esquerra: x111, y3238, w517
   text esquerra: x111, y3348, w526
   títol dreta: x730, y3238, w517
   text dreta: x730, y3348, w526
================================================== */

@media (min-width: 1101px) {
    .srv-two-cols {
        position: relative !important;
        height: 434px !important;
        min-height: 434px !important;
        padding: 0 !important;
        overflow: hidden;
    }

    .srv-two-cols > .srv-shell {
        position: relative !important;
        height: 434px !important;
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }

    .srv-two-cols-grid {
        display: block !important;
    }

    .srv-two-col {
        position: absolute !important;
        top: 109px !important;
        width: 562px !important;
        min-height: 233px !important;
        padding-left: 35px !important;
        border-left: 1px solid rgba(255,255,255,.7) !important;
        box-sizing: border-box;
    }

    .srv-two-col:first-child {
        left: var(--margin) !important; /* x75 */
    }

    .srv-two-col:last-child {
        left: calc(var(--margin) + 619px) !important; /* x694 */
    }

    .srv-two-col h3 {
        width: 517px !important;
        height: auto !important;
        margin: 0 0 19px !important;
        font-size: 36px !important;
        line-height: 46px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    .srv-two-col p {
        width: 526px !important;
        max-width: 526px !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 400 !important;
    }
}

/* Responsive: conserva la lògica anterior fora del frame desktop de referència */
@media (max-width: 1100px) and (min-width: 621px) {
    .srv-two-cols {
        height: auto !important;
        min-height: 0 !important;
        padding: 90px 0 !important;
    }

    .srv-two-cols-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 50px !important;
    }

    .srv-two-col {
        position: static !important;
        width: auto !important;
        min-height: 0 !important;
        padding-left: 28px !important;
    }

    .srv-two-col h3,
    .srv-two-col p {
        width: auto !important;
        max-width: none !important;
    }
}


/* ==================================================
   V11.4 — BLOC CLAR · CORRECCIÓ REAL DE COORDENADES
   El problema era doble marge: .srv-shell ja tenia padding
   i a sobre els elements absoluts tornaven a sumar var(--margin).
   Ara les coordenades del Figma parteixen REALMENT del viewport.
================================================== */

@media (min-width: 1101px) {

    /* La secció clara ocupa exactament 932px com al Figma */
    .srv-strategy {
        position: relative !important;
        height: 932px !important;
        min-height: 932px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #F1F1F1 !important;
    }

    /* IMPORTANT: eliminem el padding del shell només en aquest bloc
       per poder treballar amb les coordenades exactes del frame 1440. */
    .srv-strategy > .srv-shell {
        position: relative !important;
        width: 100% !important;
        height: 932px !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    /* FIGMA: x75 / y2315 respecte secció y2197 = top 118 */
    .srv-strategy-big {
        position: absolute !important;
        top: 118px !important;
        left: 75px !important;
        width: 1198px !important;
        height: 440px !important;
        margin: 0 !important;
        padding: 0 !important;

        font-family: "General Sans", sans-serif !important;
        font-size: 90px !important;
        line-height: 106px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        color: #000 !important;
    }

    .srv-strategy-big > span {
        display: block !important;
        white-space: nowrap !important;
    }

    .srv-strategy-big strong {
        font-weight: 500 !important;
    }

    .srv-strategy-big em {
        font-family: "PP Editorial New", serif !important;
        font-style: italic !important;
        font-weight: 300 !important;
    }

    /* FIGMA:
       filet esquerra x75 w526
       filet dreta x621 w635
       tots dos y2728 => top 531
    */
    .srv-strategy-grid {
        position: absolute !important;
        top: 531px !important;
        left: 75px !important;
        width: 1181px !important;
        display: grid !important;
        grid-template-columns: 526px 635px !important;
        column-gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* FIGMA: x75 / y2750 */
    .srv-strategy-grid h3 {
        position: relative !important;
        width: 526px !important;
        margin: 0 !important;
        padding: 21px 0 0 !important;
        border-top: 1px solid #1D1A16 !important;

        font-family: "General Sans", sans-serif !important;
        font-size: 55px !important;
        line-height: 59px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        color: #1D1A16 !important;
    }

    /* FIGMA: x621 / y2762 */
    .srv-strategy-copy {
        position: relative !important;
        width: 635px !important;
        min-height: 260px !important;
        margin: 0 !important;
        padding: 30px 0 0 !important;
        border-top: 1px solid #1D1A16 !important;

        font-family: "General Sans", sans-serif !important;
        font-size: 16px !important;
        line-height: normal !important;
        font-weight: 400 !important;
        color: #1D1A16 !important;
    }

    .srv-strategy-copy > p {
        width: 635px !important;
        max-width: 635px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* FIGMA: CTA x621 / y2929
       respecte grid y2728 => top 201 */
    .srv-strategy-copy .pill {
        position: absolute !important;
        top: 200px !important;
        left: 0 !important;
        margin: 0 !important;
    }
}

/* Per sota del frame desktop de referència recuperem responsive,
   sense coordenades absolutes rígides. */
@media (max-width: 1100px) {
    .srv-strategy > .srv-shell {
        padding-left: var(--margin) !important;
        padding-right: var(--margin) !important;
    }
}


/* ==================================================
   V11.5 — BLOC CLAR · MICROAJUSTOS FIGMA
================================================== */
@media (min-width: 1101px) {

    /* Figma: línies a y2728; títol esquerre a y2750 = +22 */
    .srv-strategy-grid h3 {
        padding-top: 22px !important;
    }

    /* Figma: text dret a y2762 = +34 respecte el filet */
    .srv-strategy-copy {
        padding-top: 34px !important;
        min-height: 260px !important;
    }

    .srv-strategy-copy > p {
        width: 635px !important;
        max-width: 635px !important;
        font-size: 16px !important;
        line-height: normal !important;
        margin: 0 !important;
    }

    .srv-strategy-copy strong {
        font-weight: 600 !important;
    }

    /* Figma: CTA y2929 => +201 des del filet y2728 */
    .srv-strategy-copy .pill {
        top: 201px !important;
    }

    /* Assegurem les mides exactes del bloc principal */
    .srv-strategy-big {
        top: 118px !important;
        left: 75px !important;
        width: 1198px !important;
        max-width: 1198px !important;
        font-size: 90px !important;
        line-height: 106px !important;
        letter-spacing: 0 !important;
    }

    .srv-strategy-grid {
        top: 531px !important;
        left: 75px !important;
        width: 1181px !important;
        grid-template-columns: 526px 635px !important;
        column-gap: 20px !important;
    }
}


/* ==================================================
   V11.7 — SERVEIS · RETÍCULA REAL 12 COLUMNES
   Bloc clar: 5 columnes + 1 columna buida + 6 columnes.
   Blocs foscos inferiors: mateixa retícula i alineacions del Figma.
================================================== */
@media (min-width:1101px){

  /* BLOC CLAR */
  .srv-strategy > .srv-shell{
    padding-left:var(--margin)!important;
    padding-right:var(--margin)!important;
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    column-gap:20px!important;
    align-content:start!important;
  }

  .srv-strategy-big{
    position:static!important;
    grid-column:1 / 13!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    margin-top:118px!important;
  }

  .srv-strategy-grid{
    position:static!important;
    grid-column:1 / 13!important;
    width:auto!important;
    margin-top:94px!important;
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    column-gap:20px!important;
  }

  .srv-strategy-grid h3{
    grid-column:1 / 6!important; /* 5 columnes */
    width:auto!important;
    max-width:none!important;
  }

  .srv-strategy-copy{
    grid-column:7 / 13!important; /* 6 columnes, 1 columna de respir */
    width:auto!important;
    max-width:none!important;
    min-height:260px!important;
  }

  .srv-strategy-copy > p{
    width:auto!important;
    max-width:none!important;
  }

  /* BLOCS FOSCOS DE SOTA */
  .srv-two-cols{
    height:auto!important;
    min-height:434px!important;
    padding:109px 0 92px!important;
    overflow:visible!important;
  }

  .srv-two-cols > .srv-shell{
    height:auto!important;
    padding-left:var(--margin)!important;
    padding-right:var(--margin)!important;
  }

  .srv-two-cols-grid{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    column-gap:20px!important;
  }

  .srv-two-col{
    position:static!important;
    top:auto!important;
    left:auto!important;
    width:auto!important;
    min-height:233px!important;
    padding-left:35px!important;
    border-left:1px solid rgba(255,255,255,.7)!important;
  }

  .srv-two-col:first-child{
    grid-column:1 / 6!important; /* 5 cols */
  }

  .srv-two-col:last-child{
    grid-column:7 / 13!important; /* 6 cols */
  }

  .srv-two-col h3{
    width:auto!important;
    max-width:none!important;
    margin:0 0 19px!important;
    font-size:36px!important;
    line-height:46px!important;
  }

  .srv-two-col p{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    font-size:16px!important;
    line-height:20px!important;
  }
}


/* ==================================================
   V11.8 — ESTRATÈGIA · TEXT UNA COLUMNA CAP A L'ESQUERRA
================================================== */
@media (min-width:1101px){
  .srv-strategy-copy{
    grid-column:6 / 12 !important;
  }
}


/* ==================================================
   V11.10 — TEXT ESTRATÈGIA · AJUST VISUAL REAL FIGMA
   Canvi real respecte V11.8:
   - inici a columna 6
   - amplada exacta de 6 columnes = 635px al frame 1440
   - mateixa caixa vertical que el Figma
   - interlineat/weight ajustats perquè els salts quadrin
================================================== */
@media (min-width:1101px){

  .srv-strategy-copy{
    grid-column:6 / 12 !important;
    width:635px !important;
    max-width:635px !important;
    min-width:0 !important;
    padding-top:34px !important;
    align-self:start !important;
  }

  .srv-strategy-copy > p{
    width:635px !important;
    max-width:635px !important;
    margin:0 !important;
    padding:0 !important;
    font-family:"General Sans", sans-serif !important;
    font-size:16px !important;
    line-height:19px !important;
    font-weight:400 !important;
    letter-spacing:-0.01em !important;
  }

  .srv-strategy-copy strong{
    font-weight:600 !important;
  }

  /* A la captura el botó queda una mica més amunt que a V11.8 */
  .srv-strategy-copy .pill{
    top:184px !important;
  }

  /* Els dos blocs de sota: títol i paràgraf més compactes com al Figma */
  .srv-two-col h3{
    margin-bottom:17px !important;
    font-size:36px !important;
    line-height:43px !important;
    font-weight:400 !important;
    letter-spacing:-0.02em !important;
  }

  .srv-two-col p{
    font-size:16px !important;
    line-height:19px !important;
    letter-spacing:-0.01em !important;
  }
}


/* ==================================================
   V11.11 — CORRECCIÓ: FILET ESQUERRE = 5 COLUMNES
   Recupera exactament l'estructura anterior del bloc
   "El disseny comença abans de donar-li forma".
================================================== */
@media (min-width:1101px){

  .srv-strategy-grid h3{
    grid-column:1 / 6 !important;   /* exactament 5 columnes */
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  /* El border-top pertany al mateix h3, per tant ara també
     ocupa exactament aquestes 5 columnes. */
}


/* ==================================================
   V11.14 — ÚNIC CANVI:
   interlineat 16/22 als textos petits de contingut de SERVEIS.
   No modifica absolutament res de la Home ni de la resta de la web.
================================================== */
.srv-strategy-copy > p,
.srv-two-col p,
.srv-expanded-copy p {
    font-size: 16px !important;
    line-height: 22px !important;
}


/* ==================================================
   V11.15 — ACORDIÓ SERVEIS · FIX FUNCIONAL
================================================== */

/* El summary és tota la fila clicable. */
.srv-item > .srv-head{
    cursor:pointer !important;
    user-select:none;
    -webkit-user-select:none;
}

/* Eliminem el marcador natiu. */
.srv-item > .srv-head::-webkit-details-marker{display:none!important;}
.srv-item > .srv-head::marker{content:""!important;}

/* IMPORTANT:
   abans hi havia regles .is-open i max-height que podien entrar
   en conflicte amb <details>. Ara l'estat depèn exclusivament
   de l'atribut natiu [open]. */
.srv-item > .srv-panel{
    display:none !important;
    max-height:none !important;
    opacity:1 !important;
    overflow:visible !important;
}

.srv-item[open] > .srv-panel{
    display:block !important;
}

/* Fletxa com Premis */
.srv-item > .srv-head .srv-toggle{
    transform:rotate(90deg) !important;
}

.srv-item[open] > .srv-head .srv-toggle{
    transform:rotate(0deg) !important;
}

/* Una mica d'entrada visual, sense afectar el funcionament. */
.srv-item[open] > .srv-panel .srv-expanded-copy,
.srv-item[open] > .srv-panel .srv-image{
    animation:ptsSrvPanelIn .34s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes ptsSrvPanelIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
}

/* Si encara no hi ha text ni imatge, la fila segueix obrint-se;
   no inventem contingut. */


/* ==================================================
   V11.16 — ACORDIÓ SERVEIS AÏLLAT DE LA HOME
   Només afecta .srv-page. La Home no té cap desplegable.
================================================== */
.srv-page .srv-item > .srv-panel[hidden]{
    display:none !important;
}

.srv-page .srv-item.is-open > .srv-panel{
    display:block !important;
}

.srv-page .srv-item > .srv-head{
    width:100%;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.srv-page .srv-item > .srv-head .srv-toggle{
    transform:rotate(90deg) !important;
}

.srv-page .srv-item.is-open > .srv-head .srv-toggle{
    transform:rotate(0deg) !important;
}

.srv-page .srv-item.is-open > .srv-panel .srv-expanded-copy,
.srv-page .srv-item.is-open > .srv-panel .srv-image{
    animation:ptsSrvPanelIn .34s cubic-bezier(.22,.61,.36,1) both;
}


/* ==================================================
   V11.17 — SERVEIS DESPLEGATS · POSICIÓ + COLOR
   Només afecta el contingut que apareix en obrir un servei.
================================================== */

.srv-page .srv-item .srv-panel{
    color:#fff !important;
}

/* Text desplegat: alineat amb la columna de descripció de la fila */
.srv-page .srv-expanded-copy{
    color:#fff !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
}

.srv-page .srv-expanded-copy,
.srv-page .srv-expanded-copy p,
.srv-page .srv-expanded-copy strong,
.srv-page .srv-expanded-copy em,
.srv-page .srv-expanded-copy a{
    color:#fff !important;
}

@media (min-width:1101px){

    .srv-page .srv-panel{
        display:grid !important;
        grid-template-columns:repeat(12,minmax(0,1fr)) !important;
        column-gap:20px !important;
        padding-top:0 !important;
    }

    /* El text comença a la mateixa zona visual que la descripció curta */
    .srv-page .srv-expanded-copy{
        grid-column:6 / 11 !important;
        width:auto !important;
        margin:0 0 30px !important;
        padding:0 !important;
        font-size:16px !important;
        line-height:22px !important;
    }

    /* Imatge gran del desplegable: deixa aire a l'esquerra com al Figma */
    .srv-page .srv-image{
        grid-column:3 / 13 !important;
        width:auto !important;
        margin:0 0 74px !important;
        aspect-ratio:1068 / 472 !important;
        border-radius:5px !important;
        overflow:hidden !important;
    }

    .srv-page .srv-image img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }
}

@media (max-width:1100px) and (min-width:621px){
    .srv-page .srv-expanded-copy{
        margin:0 70px 28px 40% !important;
        width:auto !important;
    }

    .srv-page .srv-image{
        margin:0 0 58px 20% !important;
        width:80% !important;
    }
}

@media (max-width:620px){
    .srv-page .srv-expanded-copy{
        margin:0 0 24px 56px !important;
        width:calc(100% - 56px) !important;
        color:#fff !important;
    }

    .srv-page .srv-image{
        margin:0 0 44px 56px !important;
        width:calc(100% - 56px) !important;
        aspect-ratio:1.6 !important;
    }
}


/* ==================================================
   V11.18 — SERVEIS DESPLEGATS
   Text + imatge comencen EXACTAMENT on comença la descripció curta
   ("cartelleria, material corporatiu, fullets...")
================================================== */

.srv-page .srv-expanded-copy,
.srv-page .srv-expanded-copy * {
    color: #fff !important;
}

/* També neutralitzem possibles colors inline del WYSIWYG */
.srv-page .srv-expanded-copy [style*="color"] {
    color: #fff !important;
}

@media (min-width:1101px){

    /* Mateixa retícula horitzontal que la capçalera del servei:
       120px número + 365px títol + 526px descripció + resta */
    .srv-page .srv-panel{
        display:grid !important;
        grid-template-columns:120px 365px 526px minmax(0,1fr) !important;
        column-gap:20px !important;
        width:100% !important;
        padding:0 !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    /* Comença exactament a la columna de la descripció curta */
    .srv-page .srv-expanded-copy{
        grid-column:3 / 4 !important;
        width:526px !important;
        max-width:526px !important;
        margin:0 0 30px !important;
        padding:0 !important;
        font-size:16px !important;
        line-height:22px !important;
    }

    /* La imatge comença al mateix punt, però pot arribar fins al marge dret */
    .srv-page .srv-image{
        grid-column:3 / 5 !important;
        width:100% !important;
        max-width:none !important;
        margin:0 0 74px !important;
        padding:0 !important;
        aspect-ratio:1068 / 472 !important;
        border-radius:5px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .srv-page .srv-image img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }
}

@media (max-width:1100px) and (min-width:621px){
    .srv-page .srv-panel{
        display:grid !important;
        grid-template-columns:80px 250px minmax(0,1fr) 50px !important;
        column-gap:20px !important;
    }

    .srv-page .srv-expanded-copy{
        grid-column:3 / 4 !important;
        width:auto !important;
        max-width:none !important;
        margin:0 0 28px !important;
    }

    .srv-page .srv-image{
        grid-column:3 / 5 !important;
        width:100% !important;
        margin:0 0 58px !important;
    }
}

@media (max-width:620px){
    /* En mòbil, mateix inici que la descripció curta: després del número */
    .srv-page .srv-expanded-copy,
    .srv-page .srv-image{
        margin-left:56px !important;
        width:calc(100% - 56px) !important;
    }
}


/* ==================================================
   V11.19 — SERVEIS DESPLEGATS · RETÍCULA CORRECTA
   Text i imatge comencen EXACTAMENT on comença .srv-short.
   La imatge NO pot ocupar tota la pantalla.
================================================== */

@media (min-width:1101px){

    /* La fila plegada ja defineix la referència:
       120px + 20px + 365px + 20px = inici de la descripció curta.
       Per tant el desplegat ha de començar a 525px des de l'esquerra
       del contenidor, exactament al mateix eix. */
    .srv-page .srv-item > .srv-panel{
        position:relative !important;
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .srv-page .srv-item > .srv-panel > .srv-expanded-copy{
        position:relative !important;
        display:block !important;
        width:526px !important;
        max-width:526px !important;
        margin:0 0 30px 525px !important;
        padding:0 !important;
        box-sizing:border-box !important;
        color:#fff !important;
    }

    .srv-page .srv-item > .srv-panel > .srv-expanded-copy,
    .srv-page .srv-item > .srv-panel > .srv-expanded-copy *{
        color:#fff !important;
    }

    /* Mateix punt d'inici que el text petit de la fila.
       Amplada: des d'aquest punt fins al marge dret del contenidor,
       no fins al viewport. */
    .srv-page .srv-item > .srv-panel > .srv-image{
        position:relative !important;
        display:block !important;
        width:calc(100% - 525px) !important;
        max-width:calc(100% - 525px) !important;
        min-width:0 !important;
        margin:0 0 74px 525px !important;
        padding:0 !important;
        aspect-ratio:1068 / 472 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
        border-radius:5px !important;
    }

    .srv-page .srv-item > .srv-panel > .srv-image img{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        margin:0 !important;
    }
}

@media (max-width:1100px) and (min-width:621px){
    .srv-page .srv-item > .srv-panel{
        display:block !important;
        overflow:hidden !important;
    }

    .srv-page .srv-item > .srv-panel > .srv-expanded-copy{
        width:calc(100% - 370px) !important;
        max-width:none !important;
        margin:0 0 28px 370px !important;
    }

    .srv-page .srv-item > .srv-panel > .srv-image{
        width:calc(100% - 370px) !important;
        max-width:none !important;
        margin:0 0 58px 370px !important;
    }
}

@media (max-width:620px){
    .srv-page .srv-item > .srv-panel{
        display:block !important;
        overflow:hidden !important;
    }

    .srv-page .srv-item > .srv-panel > .srv-expanded-copy,
    .srv-page .srv-item > .srv-panel > .srv-image{
        width:calc(100% - 56px) !important;
        max-width:calc(100% - 56px) !important;
        margin-left:56px !important;
        margin-right:0 !important;
    }
}


/* ==================================================
   V11.20 — SERVEIS · MENYS ESPAI ABANS DEL DESPLEGAT
   Només redueix la distància vertical entre .srv-short
   i el contingut que apareix en obrir el servei.
================================================== */
@media (min-width:1101px){
    .srv-page .srv-item.is-open > .srv-panel{
        margin-top:-28px !important;
    }
}

@media (max-width:1100px){
    .srv-page .srv-item.is-open > .srv-panel{
        margin-top:-16px !important;
    }
}


/* ==================================================
   V11.21 — SERVEIS · SLIDER D'IMATGES
   Manté exactament la mida i posició de .srv-image.
================================================== */

.srv-page .srv-image-slider{
    position:relative !important;
}

.srv-page .srv-image-slide{
    position:absolute;
    inset:0;
    margin:0;
    opacity:0;
    visibility:hidden;
    transition:
        opacity .85s cubic-bezier(.22,.61,.36,1),
        visibility .85s linear;
}

.srv-page .srv-image-slide.is-active{
    opacity:1;
    visibility:visible;
    z-index:2;
}

.srv-page .srv-image-slide:first-child{
    position:relative;
}

.srv-page .srv-image-slide img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
}

@media (hover:hover) and (pointer:fine){
    .srv-page .srv-image-slider:hover .srv-image-slide.is-active img{
        transform:scale(1.035);
    }
}

@media (prefers-reduced-motion:reduce){
    .srv-page .srv-image-slide{
        transition:none !important;
    }
}


/* ==================================================
   V11.22 — ENQUADRAMENT EDITABLE DES DE WORDPRESS
================================================== */
.srv-page .srv-image-slide img{
    object-position:var(--focus-x, 50%) var(--focus-y, 50%) !important;
}


/* ==================================================
   V11.26 — FOCUS FRONTEND · FIX DEFINITIU
   El focus guardat s'aplica directament al <img>.
================================================== */
.srv-page .srv-image-slider .srv-image-slide img{
    object-fit:cover !important;
}


/* ==================================================
   V11.28 — FOCUS: EL PROBLEMA REAL ERA EL CROP
   El primer slide quedava en position:relative i prenia l'alçada
   natural de la foto. Això feia que object-position gairebé no
   tingués cap efecte visual. Ara TOTS els slides omplen exactament
   el marc 1068/472 i la imatge es retalla amb object-fit:cover.
================================================== */

.srv-page .srv-image-slider{
    position:relative !important;
    aspect-ratio:1068 / 472 !important;
    overflow:hidden !important;
}

.srv-page .srv-image-slider .srv-image-slide,
.srv-page .srv-image-slider .srv-image-slide:first-child{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
}

.srv-page .srv-image-slider .srv-image-slide img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}

/* Eliminem l'object-position antic basat en variable.
   El valor inline guardat a cada <img> és el que mana. */
.srv-page .srv-image-slide img{
    object-position:initial;
}


/* ==================================================
   V11.29 — SERVEIS · ANIMACIONS
================================================== */

html.srv-js .srv-reveal-row{
    opacity:0;
    transform:translateY(18px);
    transition:
        opacity .62s cubic-bezier(.22,.61,.36,1) var(--srv-delay,0ms),
        transform .62s cubic-bezier(.22,.61,.36,1) var(--srv-delay,0ms);
}
html.srv-js .srv-reveal-row.is-in{
    opacity:1;
    transform:none;
}

.srv-page .srv-num,
.srv-page .srv-toggle{
    transition:
        transform .24s cubic-bezier(.22,.61,.36,1),
        background-color .2s ease,
        color .2s ease;
    transform-origin:center;
}

@media (hover:hover) and (pointer:fine){
    .srv-page .srv-head:hover .srv-num{
        transform:scale(1.045);
    }

    .srv-page .srv-head:hover .srv-toggle{
        transform:rotate(90deg) scale(1.06) !important;
    }

    .srv-page .srv-item.is-open > .srv-head:hover .srv-toggle{
        transform:rotate(0deg) scale(1.06) !important;
    }
}

.srv-page .srv-item.is-open > .srv-panel > .srv-expanded-copy{
    animation:srvCopyIn .42s cubic-bezier(.22,.61,.36,1) both;
}

.srv-page .srv-item.is-open > .srv-panel > .srv-image{
    animation:srvImageIn .52s cubic-bezier(.22,.61,.36,1) .06s both;
}

@keyframes srvCopyIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:none}
}

@keyframes srvImageIn{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
}

.srv-page .srv-image-slide{
    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        visibility .9s linear !important;
}

@media (hover:hover) and (pointer:fine){
    .srv-page .srv-image-slide.is-active img{
        transition:transform .55s cubic-bezier(.22,.61,.36,1);
    }
    .srv-page .srv-image-slider:hover .srv-image-slide.is-active img{
        transform:scale(1.035);
    }
}

@media (prefers-reduced-motion:reduce){
    html.srv-js .srv-reveal-row,
    .srv-page .srv-item.is-open > .srv-panel > .srv-expanded-copy,
    .srv-page .srv-item.is-open > .srv-panel > .srv-image,
    .srv-page .srv-num,
    .srv-page .srv-toggle{
        animation:none !important;
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}


/* ==================================================
   V11.30 — HOVER SERVEIS = HOVER HOME
   Reprodueix la mateixa lògica de .service-row de la Home:
   fila scale(1.018), títol +6px i cercle de fletxa invertit.
   Només afecta la pàgina Serveis.
================================================== */

.srv-page .srv-item{
    transition:
        transform .28s cubic-bezier(.22,.61,.36,1),
        opacity .62s cubic-bezier(.22,.61,.36,1) var(--srv-delay,0ms);
    transform-origin:center;
}

.srv-page .srv-title{
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
}

.srv-page .srv-toggle{
    transition:
        transform .28s cubic-bezier(.22,.61,.36,1),
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

@media (hover:hover) and (pointer:fine){
    /* Exactament la mateixa resposta visual que .service-row.is-visible:hover */
    .srv-page .srv-item.is-in:hover{
        transform:translateY(0) scale(1.018);
        z-index:2;
    }

    .srv-page .srv-item.is-in:hover .srv-title{
        transform:translateX(6px);
    }

    /* Mateixa inversió del cercle de la fletxa de Home */
    .srv-page .srv-item.is-in:hover .srv-toggle{
        background:#fff !important;
        color:#1D1A16 !important;
        border-color:#fff !important;
    }

    /* Conserva l'orientació pròpia de desplegar/plegar */
    .srv-page .srv-item:not(.is-open).is-in:hover .srv-toggle{
        transform:rotate(90deg) !important;
    }

    .srv-page .srv-item.is-open.is-in:hover .srv-toggle{
        transform:rotate(0deg) !important;
    }

    /* Anul·la el blup del número de V11.29: a Home no existeix */
    .srv-page .srv-head:hover .srv-num{
        transform:none !important;
    }
}


/* ==================================================
   V11.31 — SERVEIS · ALINEACIÓ TEXT DESPLEGABLE
   Evita que un <p> generat pel WYSIWYG afegeixi marge superior.
================================================== */
.srv-page .srv-expanded-copy > :first-child{
    margin-top:0 !important;
}

.srv-page .srv-expanded-copy > :last-child{
    margin-bottom:0 !important;
}

.srv-page .srv-expanded-copy p:first-child{
    margin-top:0 !important;
}


/* ==================================================
   V11.32 — ALINEACIÓ REAL DELS DESPLEGABLES
   El problema no era el marge del <p>: la capçalera d'un servei
   podia créixer segons la quantitat de text curt i desplaçava
   el contingut desplegat cap avall.
================================================== */
@media (min-width:1101px){
    .srv-page .srv-head{
        height:150px !important;
        min-height:150px !important;
        box-sizing:border-box !important;
    }

    .srv-page .srv-item.is-open > .srv-panel{
        margin-top:-28px !important;
    }
}


/* ==================================================
   V11.33 — ÚLTIM SERVEI · ALINEACIÓ
   Només afecta l'últim servei. La resta queda intacta.
================================================== */
@media (min-width:1101px){
    .srv-page .srv-list .srv-item:last-of-type.is-open > .srv-panel{
        margin-top:-52px !important;
    }
}

@media (max-width:1100px){
    .srv-page .srv-list .srv-item:last-of-type.is-open > .srv-panel{
        margin-top:-28px !important;
    }
}


/* ==================================================
   V11.34 — ÚLTIM SERVEI · FIX REAL
   :last-of-type no funcionava perquè després dels serveis hi ha
   un altre <div> (el CTA). Ara l'últim servei porta .is-last.
================================================== */
@media (min-width:1101px){
    .srv-page .srv-item.is-last.is-open > .srv-panel{
        margin-top:-72px !important;
    }
}

@media (max-width:1100px){
    .srv-page .srv-item.is-last.is-open > .srv-panel{
        margin-top:-36px !important;
    }
}


/* ==================================================
   V11.35 — ÚLTIM SERVEI · MATEIX ESPAI VISUAL
   A la captura es veu que el 07 té una línia menys de text curt.
   Per això, amb una capçalera fixa de 150px, queda més aire abans
   del text desplegat. Reduïm només l'alçada del 07 una línia (22px).
================================================== */
@media (min-width:1101px){
    .srv-page .srv-item.is-last > .srv-head{
        height:128px !important;
        min-height:128px !important;
    }

    /* Recupera el mateix marge del desplegable que la resta */
    .srv-page .srv-item.is-last.is-open > .srv-panel{
        margin-top:-28px !important;
    }
}

@media (max-width:1100px){
    .srv-page .srv-item.is-last.is-open > .srv-panel{
        margin-top:-16px !important;
    }
}


/* ==================================================
   V11.36 — MÒBIL · MÉS AIRE ALS DESPLEGABLES
   En mòbil tots els continguts desplegats quedaven massa enganxats
   al text curt. No afecta desktop ni tablet.
================================================== */
@media (max-width:620px){
    .srv-page .srv-item.is-open > .srv-panel,
    .srv-page .srv-item.is-last.is-open > .srv-panel{
        margin-top:12px !important;
    }
}


/* ==================================================
   V11.37 — PROJECTES · RETÍCULA HÍBRIDA AUTOMÀTICA
================================================== */
.projects-archive-grid.is-auto-grid .archive-project-card__image img{
    object-fit:cover;
}


/* ==================================================
   V11.43 — PROJECTE INTERIOR
================================================== */

.single-projecte-page{
    background:#1D1A16;
    color:#F1F1F1;
    padding:72px 0 28px;
}

.single-projecte-page .shell{
    width:min(100% - 48px, 1360px);
    margin-inline:auto;
}

.single-projecte-hero{
    margin-bottom:38px;
}

.single-projecte-nav--top{
    display:grid;
    grid-template-columns:80px 1fr 80px;
    align-items:center;
}

.single-projecte-heading{
    text-align:center;
}

.single-projecte-heading h1{
    margin:0;
    font-size:clamp(28px,2.4vw,46px);
    line-height:1.02;
    font-weight:600;
    letter-spacing:-.035em;
}

.single-projecte-heading h1 em{
    font-family:"PP Editorial New", serif;
    font-weight:400;
    margin-left:.12em;
}

.single-projecte-heading p{
    margin:10px 0 0;
    font-size:13px;
    line-height:1.35;
    opacity:.78;
}

.single-projecte-nav a,
.single-projecte-bottom-nav a{
    color:inherit;
    text-decoration:none;
    font-size:34px;
    line-height:1;
    transition:transform .25s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
    display:inline-block;
}

.single-projecte-nav__right{
    text-align:right;
}

.single-projecte-gallery{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:18px 18px;
}

.single-projecte-gallery__item{
    margin:0;
    overflow:hidden;
    background:#d9d9d9;
    border-radius:2px;
}

.single-projecte-gallery__item--12{
    grid-column:span 12;
}

.single-projecte-gallery__item--6{
    grid-column:span 6;
}

.single-projecte-gallery__item img{
    width:100%;
    height:auto;
    display:block;
}

.single-projecte-bottom-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:24px;
}

@media (hover:hover) and (pointer:fine){
    .single-projecte-nav a:hover,
    .single-projecte-bottom-nav a:hover{
        transform:translateX(-4px);
    }

    .single-projecte-nav__right a:hover,
    .single-projecte-bottom-nav > div:last-child a:hover{
        transform:translateX(4px);
    }
}

@media (max-width:700px){
    .single-projecte-page{
        padding-top:42px;
    }

    .single-projecte-page .shell{
        width:min(100% - 28px, 1360px);
    }

    .single-projecte-nav--top{
        grid-template-columns:42px 1fr 42px;
    }

    .single-projecte-heading h1{
        font-size:28px;
    }

    .single-projecte-heading p{
        font-size:11px;
    }

    .single-projecte-gallery{
        gap:10px;
    }

    .single-projecte-gallery__item--6{
        grid-column:span 12;
    }

    .single-projecte-nav a,
    .single-projecte-bottom-nav a{
        font-size:28px;
    }
}


/* ==================================================
   V11.45 — PROJECTE INTERIOR · RETÍCULA REAL DEL WEB
================================================== */

.single-projecte-page{
    background:var(--bg);
    color:var(--paper);
    padding:165px 0 24px;
}

.single-projecte-page .shell{
    width:100%;
    padding-left:var(--margin);
    padding-right:var(--margin);
    margin:0;
}

.single-projecte-hero{
    margin-bottom:36px;
}

.single-projecte-nav--top{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gutter);
    align-items:center;
}

.single-projecte-nav--top > div:first-child{
    grid-column:1 / span 1;
}

.single-projecte-heading{
    grid-column:3 / 11;
    text-align:center;
}

.single-projecte-nav__right{
    grid-column:12 / span 1;
    text-align:right;
}

.single-projecte-heading h1{
    margin:0;
    font-size:clamp(24px,2.08vw,30px);
    line-height:1.04;
    font-weight:600;
    letter-spacing:-.025em;
}

.single-projecte-heading h1 em{
    font-family:'PP Editorial New',Georgia,serif;
    font-style:italic;
    font-weight:200;
    margin-left:.12em;
}

.single-projecte-heading p{
    margin:7px 0 0;
    font-size:11px;
    line-height:1.3;
    font-weight:400;
    opacity:.78;
}

.single-projecte-nav a,
.single-projecte-bottom-nav a{
    display:inline-block;
    color:inherit;
    text-decoration:none;
    font-size:22px;
    line-height:1;
    font-weight:300;
}

.single-projecte-gallery{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gutter);
    row-gap:18px;
}

.single-projecte-gallery__item{
    margin:0;
    overflow:hidden;
    background:#d9d9d9;
    border-radius:2px;
}

.single-projecte-gallery__item--12{
    grid-column:span 12;
    aspect-ratio:1290 / 690;
}

.single-projecte-gallery__item--6{
    grid-column:span 6;
    aspect-ratio:635 / 690;
}

.single-projecte-gallery__item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.single-projecte-bottom-nav{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gutter);
    align-items:center;
    margin-top:24px;
}

.single-projecte-bottom-nav > div:first-child{
    grid-column:1 / span 1;
}

.single-projecte-bottom-nav > div:last-child{
    grid-column:12 / span 1;
    text-align:right;
}

@media (hover:hover) and (pointer:fine){
    .single-projecte-nav a,
    .single-projecte-bottom-nav a{
        transition:transform .25s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
    }
    .single-projecte-nav--top > div:first-child a:hover,
    .single-projecte-bottom-nav > div:first-child a:hover{
        transform:translateX(-4px);
    }
    .single-projecte-nav__right a:hover,
    .single-projecte-bottom-nav > div:last-child a:hover{
        transform:translateX(4px);
    }
}

@media (max-width:700px){
    .single-projecte-page{
        padding-top:118px;
    }

    .single-projecte-hero{
        margin-bottom:22px;
    }

    .single-projecte-nav--top{
        grid-template-columns:32px minmax(0,1fr) 32px;
        column-gap:8px;
    }

    .single-projecte-nav--top > div:first-child,
    .single-projecte-heading,
    .single-projecte-nav__right{
        grid-column:auto;
    }

    .single-projecte-heading h1{
        font-size:23px;
    }

    .single-projecte-heading p{
        font-size:10px;
        margin-top:6px;
    }

    .single-projecte-gallery{
        row-gap:10px;
    }

    .single-projecte-gallery__item--6{
        grid-column:span 12;
    }

    .single-projecte-gallery__item--12,
    .single-projecte-gallery__item--6{
        aspect-ratio:1.55 / 1;
    }

    .single-projecte-bottom-nav{
        margin-top:16px;
    }
}


/* ==================================================
   PROJECTE INTERIOR — CORRECCIÓ PRECISA NOMÉS MÒBIL
   Desktop no es modifica.
================================================== */
@media (max-width:700px){

    /* Descripció petita: 16 px reals */
    .single-projecte-page .single-projecte-heading p{
        font-size:16px !important;
        line-height:22px !important;
        margin-top:10px !important;
    }

    /* Més espai real entre el text i la primera imatge */
    .single-projecte-page .single-projecte-hero{
        margin-bottom:46px !important;
    }

    /* Assegurem que les dues fletxes ocupin els extrems del grid */
    .single-projecte-page .single-projecte-nav--top{
        grid-template-columns:36px minmax(0,1fr) 36px !important;
        column-gap:10px !important;
    }

    .single-projecte-page .single-projecte-nav--top > div:first-child{
        grid-column:1 !important;
        justify-self:start !important;
    }

    .single-projecte-page .single-projecte-heading{
        grid-column:2 !important;
    }

    .single-projecte-page .single-projecte-nav__right{
        grid-column:3 !important;
        justify-self:end !important;
        text-align:right !important;
    }
}


/* ==================================================
   PROJECTE INTERIOR — FIX FINAL MÒBIL + CACHE
================================================== */
@media screen and (max-width:700px){
    body.single-projecte .single-projecte-page .single-projecte-heading > p{
        font-size:16px !important;
        line-height:22px !important;
        margin-top:10px !important;
    }

    body.single-projecte .single-projecte-page .single-projecte-hero{
        margin-bottom:60px !important;
    }
}


/* ==================================================
   PROJECTE INTERIOR — PROPORCIONS DE GALERIA
================================================== */

/* 12 columnes: mai retallem. Conserva la proporció original de cada fotografia. */
.single-projecte-gallery__item--12{
    aspect-ratio:auto !important;
    height:auto !important;
}
.single-projecte-gallery__item--12 img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
}

/* 6 columnes: tres formats seleccionables des de WordPress. */
.single-projecte-gallery__item--6.single-projecte-gallery__item--horizontal{
    aspect-ratio:4 / 3 !important;
}
.single-projecte-gallery__item--6.single-projecte-gallery__item--rectangular{
    aspect-ratio:3 / 2 !important;
}
.single-projecte-gallery__item--6.single-projecte-gallery__item--vertical{
    aspect-ratio:3 / 4 !important;
}
.single-projecte-gallery__item--6 img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

/* En mòbil les peces de 6 segueixen el format triat. */
@media (max-width:700px){
    .single-projecte-gallery__item--12{
        aspect-ratio:auto !important;
    }
    .single-projecte-gallery__item--6.single-projecte-gallery__item--horizontal{
        aspect-ratio:4 / 3 !important;
    }
    .single-projecte-gallery__item--6.single-projecte-gallery__item--rectangular{
        aspect-ratio:3 / 2 !important;
    }
    .single-projecte-gallery__item--6.single-projecte-gallery__item--vertical{
        aspect-ratio:3 / 4 !important;
    }
}


/* ==================================================
   HEADER RESPONSIVE — HAMBURGUESA DES DE TABLET
   Quan desapareix el menú global, mostrem hamburguesa.
================================================== */
@media (max-width:900px){

    .site-header{
        grid-template-columns:1fr auto !important;
        align-items:start !important;
    }

    .site-header__brand{
        grid-column:1 !important;
    }

    .site-header__description,
    .site-header__nav--global{
        display:none !important;
    }

    .menu-toggle{
        grid-column:2 !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:space-between !important;
        width:34px !important;
        height:22px !important;
        padding:0 !important;
        margin:2px 0 0 !important;
        border:0 !important;
        background:transparent !important;
        color:#fff !important;
        cursor:pointer !important;
        z-index:30 !important;
    }

    .menu-toggle span:not(.screen-reader-text){
        display:block !important;
        width:100% !important;
        height:1px !important;
        background:currentColor !important;
    }

    .mobile-menu{
        position:fixed !important;
        inset:0 !important;
        z-index:25 !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-end !important;
        padding:110px 28px 38px !important;
        background:#1D1A16 !important;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

    .mobile-menu.is-open{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    .mobile-menu__home,
    .mobile-menu__list a{
        padding:12px 0 !important;
        border-top:1px solid rgba(255,255,255,.22) !important;
        font-size:clamp(28px,5vw,42px) !important;
        line-height:1.05 !important;
    }

    .mobile-menu__list li:last-child a{
        border-bottom:1px solid rgba(255,255,255,.22) !important;
    }
}


/* ==================================================
   PROJECTE INTERIOR — ENQUADRAMENT 6 COLS · FIX
================================================== */
.single-projecte-gallery__item--6 img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:var(--pts-pos-x, 50%) var(--pts-pos-y, 50%) !important;
}


/* ==================================================
   PROJECTE INTERIOR — ZOOM SUAU A LES IMATGES
================================================== */
.single-projecte-gallery__item{
    overflow:hidden;
}

.single-projecte-gallery__item img{
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
    transform:scale(1);
    will-change:transform;
}

@media (hover:hover) and (pointer:fine){
    .single-projecte-gallery__item:hover img{
        transform:scale(1.035);
    }
}

@media (prefers-reduced-motion:reduce){
    .single-projecte-gallery__item img{
        transition:none !important;
    }

    .single-projecte-gallery__item:hover img{
        transform:none !important;
    }
}


/* ==================================================
   TEXTOS LEGALS
================================================== */
.legal-page{
    padding:0 var(--site-gutter, 40px) 120px;
}

.legal-page__hero{
    padding:90px 0 105px;
}

.legal-page__hero h1{
    margin:0;
    font-size:clamp(58px,8vw,128px);
    line-height:.9;
    font-weight:400;
    letter-spacing:-.045em;
}

.legal-page__content{
    width:min(100%, 760px);
    margin-left:auto;
    margin-right:8.333333%;
}

.legal-page__content section{
    padding:0 0 56px;
    margin:0 0 56px;
    border-bottom:1px solid rgba(0,0,0,.18);
}

.legal-page__content section:last-child{
    margin-bottom:0;
}

.legal-page__content h2{
    margin:0 0 24px;
    font-size:22px;
    line-height:1.2;
    font-weight:500;
}

.legal-page__content p{
    margin:0 0 18px;
    font-size:16px;
    line-height:1.55;
}

.legal-page__content p:last-child{
    margin-bottom:0;
}

.legal-page__content a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:3px;
}

.legal-page__data{
    margin:28px 0;
}

@media(max-width:900px){
    .legal-page{
        padding-left:24px;
        padding-right:24px;
        padding-bottom:80px;
    }

    .legal-page__hero{
        padding:70px 0 75px;
    }

    .legal-page__content{
        width:100%;
        margin:0;
    }
}

@media(max-width:700px){
    .legal-page{
        padding-left:18px;
        padding-right:18px;
        padding-bottom:64px;
    }

    .legal-page__hero{
        padding:48px 0 60px;
    }

    .legal-page__hero h1{
        font-size:54px;
    }

    .legal-page__content section{
        padding-bottom:38px;
        margin-bottom:38px;
    }

    .legal-page__content h2{
        font-size:19px;
        margin-bottom:18px;
    }

    .legal-page__content p{
        font-size:16px;
        line-height:1.5;
    }
}


/* ==================================================
   AVÍS LEGAL — AJUST DE COMPOSICIÓ
================================================== */
.legal-page{
    padding-left:0 !important;
    padding-right:0 !important;
}

.legal-page__hero,
.legal-page__content{
    width:auto !important;
    max-width:none !important;
    margin-left:var(--shell-x, 40px) !important;
    margin-right:var(--shell-x, 40px) !important;
}

.legal-page__hero{
    padding-top:72px !important;
    padding-bottom:110px !important;
}

.legal-page__hero h1{
    margin:0 !important;
}

.legal-page__content{
    width:min(760px, calc(100% - (var(--shell-x, 40px) * 2))) !important;
    margin-left:auto !important;
    margin-right:var(--shell-x, 40px) !important;
}

/* Tablet */
@media(max-width:900px){
    .legal-page__hero,
    .legal-page__content{
        margin-left:24px !important;
        margin-right:24px !important;
    }

    .legal-page__hero{
        padding-top:58px !important;
        padding-bottom:78px !important;
    }

    .legal-page__content{
        width:auto !important;
    }
}

/* Mòbil */
@media(max-width:700px){
    .legal-page__hero,
    .legal-page__content{
        margin-left:18px !important;
        margin-right:18px !important;
    }

    .legal-page__hero{
        padding-top:42px !important;
        padding-bottom:58px !important;
    }
}


/* ==================================================
   AVÍS LEGAL — ALINEACIÓ EXACTA AMB HEADER
================================================== */
.legal-page{
    padding-left:var(--margin) !important;
    padding-right:var(--margin) !important;
}

.legal-page__hero,
.legal-page__content{
    margin-left:0 !important;
    margin-right:0 !important;
    width:auto !important;
    max-width:none !important;
}

.legal-page__hero{
    padding-top:150px !important;
    padding-bottom:72px !important;
}

.legal-page__hero h1{
    margin:0 !important;
}

.legal-page__content{
    width:min(100%, 760px) !important;
    margin-left:0 !important;
}

@media(max-width:900px){
    .legal-page{
        padding-left:var(--margin) !important;
        padding-right:var(--margin) !important;
    }

    .legal-page__hero{
        padding-top:120px !important;
        padding-bottom:56px !important;
    }

    .legal-page__content{
        width:100% !important;
    }
}

@media(max-width:620px){
    .legal-page__hero{
        padding-top:105px !important;
        padding-bottom:44px !important;
    }
}


/* AVÍS LEGAL — filets blancs */
.legal-page__content section{
    border-bottom-color:#fff !important;
}

/* ==================================================
   SEO / NAVEGACIÓ PER ÀNCORES — 2026
   No altera el disseny; només evita que un servei quedi sota la capçalera
   quan s'hi arriba des de la Home amb #slug.
================================================== */
.srv-item[id] {
    scroll-margin-top: 32px;
}

/* ==================================================
   V11.44 — HOME · SERVEIS DESPLEGABLES
   Manté EXACTAMENT la fila tancada de la Home i afegeix el contingut
   administrable del servei sota la mateixa fila, sense navegar fora.
================================================== */
.home .home-service-item{
    border-bottom:1px solid rgba(255,255,255,.45);
}

/* La fila era un <a>; ara és un <button>. Neutralitzem els estils natius
   perquè visualment continuï sent exactament la mateixa fila. */
.home .home-service-item > .service-row{
    width:100%;
    margin:0;
    padding-inline:0;
    color:inherit;
    background:transparent;
    border:0;
    border-radius:0;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

/* El separador ara pertany al contenidor, no al botó. */
.home .home-service-item > .service-row{
    border-bottom:0;
}

.home .home-service-item.is-open > .service-row .service-row__arrow{
    transform:rotate(90deg);
}

.home .service-row__arrow{
    transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}

.home .home-service-panel[hidden]{
    display:none !important;
}

.home .home-service-panel{
    display:grid;
    grid-template-columns:10% 34% 1fr 54px;
    column-gap:20px;
    padding:0 0 58px;
    color:#fff;
    animation:ptsHomeServiceIn .3s cubic-bezier(.22,.61,.36,1) both;
}

.home .home-service-panel__copy{
    grid-column:3 / 4;
    width:100%;
    max-width:526px;
    margin:0 0 30px;
    font-size:16px;
    line-height:22px;
    color:#fff;
}

.home .home-service-panel__copy,
.home .home-service-panel__copy *{
    color:#fff !important;
}

.home .home-service-panel__copy p{
    margin:0 0 20px;
}
.home .home-service-panel__copy p:last-child{
    margin-bottom:0;
}
.home .home-service-panel__copy strong{
    font-weight:600;
}

.home .home-service-panel__image{
    position:relative;
    grid-column:3 / 5;
    width:100%;
    aspect-ratio:1068 / 472;
    overflow:hidden;
    border-radius:5px;
}

.home .home-service-panel__slide{
    position:absolute;
    inset:0;
    margin:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .7s ease;
}
.home .home-service-panel__slide.is-active{
    opacity:1;
    pointer-events:auto;
}
.home .home-service-panel__slide:first-child:last-child{
    opacity:1;
}
.home .home-service-panel__slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

@keyframes ptsHomeServiceIn{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:translateY(0)}
}

@media (max-width:1180px){
    .home .home-service-panel{
        grid-template-columns:9% 31% 1fr 54px;
    }
}

@media (max-width:900px){
    .home .home-service-panel{
        grid-template-columns:58px minmax(0,1fr) 44px;
        column-gap:14px;
        padding-bottom:48px;
    }
    .home .home-service-panel__copy,
    .home .home-service-panel__image{
        grid-column:2 / 4;
        max-width:none;
        width:100%;
    }
    .home .home-service-panel__copy{
        margin-bottom:24px;
    }
    .home .home-service-panel__image{
        aspect-ratio:1.7;
    }
}

@media (max-width:620px){
    .home .home-service-panel{
        grid-template-columns:42px minmax(0,1fr) 38px;
        column-gap:10px;
        padding-bottom:40px;
    }
    .home .home-service-panel__copy,
    .home .home-service-panel__image{
        grid-column:2 / 4;
    }
    .home .home-service-panel__copy{
        font-size:16px;
        line-height:20px;
        margin-bottom:22px;
    }
    .home .home-service-panel__image{
        aspect-ratio:1.6;
    }
}

@media (prefers-reduced-motion:reduce){
    .home .home-service-panel,
    .home .home-service-panel__slide,
    .home .service-row__arrow{
        animation:none!important;
        transition:none!important;
    }
}


/* V8 — Filtres de Projectes: desktop subtil + mòbil en scroll horitzontal */
body.post-type-archive-projecte .project-filters,
body.post-type-archive-projecte .projects-filters,
body.post-type-archive-projecte .filters,
body.page-template-page-projectes .project-filters,
body.page-template-page-projectes .projects-filters,
body.page-template-page-projectes .filters {
  justify-content: center;
  text-align: center;
}

body.post-type-archive-projecte .project-filters a,
body.post-type-archive-projecte .projects-filters a,
body.post-type-archive-projecte .filters a,
body.page-template-page-projectes .project-filters a,
body.page-template-page-projectes .projects-filters a,
body.page-template-page-projectes .filters a {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

@media (max-width: 767px) {
  body.post-type-archive-projecte .project-filters,
  body.post-type-archive-projecte .projects-filters,
  body.post-type-archive-projecte .filters,
  body.page-template-page-projectes .project-filters,
  body.page-template-page-projectes .projects-filters,
  body.page-template-page-projectes .filters {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    gap: 18px;
    text-align: left;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  body.post-type-archive-projecte .project-filters::-webkit-scrollbar,
  body.post-type-archive-projecte .projects-filters::-webkit-scrollbar,
  body.post-type-archive-projecte .filters::-webkit-scrollbar,
  body.page-template-page-projectes .project-filters::-webkit-scrollbar,
  body.page-template-page-projectes .projects-filters::-webkit-scrollbar,
  body.page-template-page-projectes .filters::-webkit-scrollbar {
    display: none;
  }

  body.post-type-archive-projecte .project-filters > *,
  body.post-type-archive-projecte .projects-filters > *,
  body.post-type-archive-projecte .filters > *,
  body.page-template-page-projectes .project-filters > *,
  body.page-template-page-projectes .projects-filters > *,
  body.page-template-page-projectes .filters > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Projectes destacats home: mateixes metadades que a l'arxiu de Projectes. */
.home-project-card { min-width: 0; }
.home-project-card .project-card { display: block; width: 100%; }
.home-project-card .archive-project-card__meta { min-height: 79px; }


/* Avís editorial temporal: integrat amb el tema */
.pts-popup[hidden] { display: none !important; }
.pts-popup { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; padding:24px; opacity:0; transition:opacity .32s ease; }
.pts-popup.is-visible { opacity:1; }
.pts-popup__scrim { position:absolute; inset:0; background:rgba(0,0,0,.66); }
.pts-popup__panel { position:relative; width:min(100%, 660px); max-height:min(90vh,800px); overflow-y:auto; background:var(--bg, #1D1A16); color:var(--paper, #F1F1F1); border:1px solid rgba(241,241,241,.24); padding:clamp(26px,4.2vw,54px); font-family:'General Sans',sans-serif; box-shadow:0 18px 70px rgba(0,0,0,.18); transform:translateY(12px); transition:transform .32s ease; }
.pts-popup.is-visible .pts-popup__panel { transform:translateY(0); }
.pts-popup__top, .pts-popup__bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.pts-popup__top { font-size:11px; letter-spacing:.11em; }
.pts-popup__close { border:0; background:transparent; color:inherit; font:300 30px/1 'General Sans',sans-serif; padding:0; cursor:pointer; }
.pts-popup__heading { margin:clamp(40px,6vw,70px) 0 28px; font:400 clamp(36px,5vw,62px)/1.08 'General Sans',sans-serif; letter-spacing:-.055em; max-width:550px; }
.pts-popup__description { font-size:clamp(14px,1.2vw,16px); line-height:1.65; max-width:455px; margin:0 0 clamp(36px,5vw,64px); }
.pts-popup__bottom { border-top:1px solid rgba(241,241,241,.4); padding-top:19px; font-size:13px; }
.pts-popup__bottom a, .pts-popup__bottom button { font:inherit; color:inherit; text-decoration:none; background:none; border:0; padding:0; cursor:pointer; }
.pts-popup__bottom a:hover, .pts-popup__bottom button:hover { text-decoration:underline; }
.pts-popup__bottom span { margin-left:8px; }
body.pts-popup-open { overflow:hidden; }
@media (max-width:600px) { .pts-popup { padding:16px; } .pts-popup__panel { padding:28px 24px; } .pts-popup__heading { margin:50px 0 24px; } .pts-popup__bottom { align-items:flex-start; gap:16px; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .pts-popup, .pts-popup__panel { transition:none; } }

/* Ajustos editorials del pop-up temporal */
.pts-popup__top > span { line-height:1.55; }
.pts-popup__top-divider { margin:0 .4em; opacity:.55; }
.pts-popup__heading em { font-family:'PP Editorial New', Georgia, serif; font-style:italic; font-weight:200; letter-spacing:-.045em; }

/* Avís temporal: creu sense caixa ni estils globals de botó */
.pts-popup .pts-popup__top button.pts-popup__close,
.pts-popup .pts-popup__top button.pts-popup__close:hover,
.pts-popup .pts-popup__top button.pts-popup__close:active {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  font: 300 30px/1 'General Sans', sans-serif;
  text-decoration: none;
  transform: none;
  cursor: pointer;
}
.pts-popup .pts-popup__close::before,
.pts-popup .pts-popup__close::after { content: none !important; display: none !important; }
.pts-popup .pts-popup__close:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* El panell rep el focus inicial sense cap requadre visible. */
.pts-popup .pts-popup__panel:focus, .pts-popup .pts-popup__panel:focus-visible { outline: none !important; }

/* Ajust fi de les metadades dels projectes (arxiu i home). */
.archive-project-card__title strong {
    font-weight: 500;
}
.archive-project-card__disciplines {
    margin-top: 4px;
}

/* Separador llarg entre client i nom de projecte (home i arxiu). */
.archive-project-card__title .pts-project-separator { display: inline-block; margin: 0 .46em; transform: scaleX(1.55); transform-origin: center; font-weight: 400; }


/* PTS: recuperació de les files d'alçada uniforme dins de cada projecte.
   Retícula original: 1290 × 690 per peces de 12, 635 × 690 per peces de 6.
   Les classes de format segueixen disponibles per a l'enquadrament,
   però no alteren l'alçada de les peces ni de la fila. */
@media (min-width: 701px) {
  .single-projecte-page .single-projecte-gallery__item--12,
  .single-projecte-page .single-projecte-gallery__item--12.single-projecte-gallery__item--horizontal,
  .single-projecte-page .single-projecte-gallery__item--12.single-projecte-gallery__item--rectangular,
  .single-projecte-page .single-projecte-gallery__item--12.single-projecte-gallery__item--vertical {
    aspect-ratio: 1290 / 690 !important;
    height: auto !important;
  }
  .single-projecte-page .single-projecte-gallery__item--6,
  .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--horizontal,
  .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--rectangular,
  .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--vertical {
    aspect-ratio: 635 / 690 !important;
    height: auto !important;
  }
  .single-projecte-page .single-projecte-gallery__item--12 img,
  .single-projecte-page .single-projecte-gallery__item--6 img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* PTS — Galeria interior: les imatges a amplada completa (12 columnes)
   conserven SEMPRE la proporció original, tant en desktop com en mòbil.
   No modifica les peces de 6 columnes ni la graella d'arxiu/home. */
body.single-projecte .single-projecte-page .single-projecte-gallery__item--12 {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
}
body.single-projecte .single-projecte-page .single-projecte-gallery__item--12 img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* PTS — Correcció galeria interior: 2 fotografies per fila (6+6)
   mantenen format fotogràfic horitzontal 3:2; no altera cap altra graella. */
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6,
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--horizontal,
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--rectangular,
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--vertical {
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
}
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6 img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* PTS 2026-10: formats independents per a les fotografies a 6 columnes.
   Substitueix la regla antiga que imposava 3:2 a tots els formats. */
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--horizontal,
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--rectangular {
    aspect-ratio: 3 / 2 !important;
}
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--quadrat {
    aspect-ratio: 1 / 1 !important;
}
body.single-projecte .single-projecte-page .single-projecte-gallery__item--6.single-projecte-gallery__item--vertical {
    aspect-ratio: 3 / 4 !important;
}

/* FLETXA ↗ EN SVG (substitueix el caràcter Unicode, que iOS pintava com a emoji)
-------------------------------------------------- */
.pts-arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.12em;
    overflow: visible;
}

.pill__arrow .pts-arrow,
.service-row__arrow .pts-arrow,
.srv-toggle .pts-arrow,
.awards-row__link .pts-arrow,
.exhibitions-row__link .pts-arrow {
    display: block;
}