/* ============================================================
   Capçalera i menú de Futerri sobre el tema Rhye.
   Aquest full NO va tancat dins de .fut-block: toca la capçalera del tema a
   posta. Tot són afegits per sobre; no s'ha modificat cap fitxer de Rhye.
   ============================================================ */

/* ---------- LOGO animat (substitueix el GIF) ---------- */
#page-header .logo__wrapper-img img { display: none !important; }
#page-header .logo { display: inline-flex; align-items: center; }

.fut-logo {
  /* Les mides van en variables perquè el mòbil en té unes altres i hi ha estats
     (menú obert) que han de TORNAR a la mida de repòs. Si les repetíem a mà, el
     menú obert deixava el logo a la mida d'escriptori dins d'un mòbil: el
     símbol es desenganxava de la paraula i tot el que hi havia a la dreta
     —inclosa la creu de tancar— es desplaçava fora de pantalla. */
  --logo-w: 108.8px; --logo-sx: 84.6px;
  position: relative; display: inline-block; height: 22px; width: var(--logo-w);
  --logo-ink: #0e0e14; --logo-pos: 0px; --logo-op: 0;
  animation: logo-cycle 20s ease-in-out infinite;
  transition: width .55s cubic-bezier(.2,.7,.2,1);
}
.fut-logo-letters, .fut-logo-symbol {
  position: absolute; bottom: 0; overflow: hidden;
  background-color: var(--logo-ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  transition: opacity .4s ease, left .55s cubic-bezier(.2,.7,.2,1);
}
/* la capa de degradat: s'encén i s'apaga amb el cicle del logo, en bucle (sense costura) */
.fut-logo-letters::after, .fut-logo-symbol::after {
  content: ""; position: absolute; inset: 0; opacity: var(--logo-op);
  background-image: linear-gradient(96deg,#8CE39B,#F6D06B,#FFB27A,#FF8FA0,#E79BE0,#B9A0F5,#8E9BFF,
                    #B9A0F5,#E79BE0,#FF8FA0,#FFB27A,#F6D06B,#8CE39B);
  background-size: 760px 100%; background-repeat: repeat-x; pointer-events: none;
}
.fut-logo-letters::after { background-position-x: var(--logo-pos); }
/* el degradat ha de continuar del text al símbol: el desplaçament és la mateixa
   distància a què està el símbol, que al mòbil no és la mateixa */
.fut-logo-symbol::after  { background-position-x: calc(var(--logo-pos) - var(--logo-sx)); }
.fut-logo-letters { left: 0; height: 22px; width: 81.4px;
  -webkit-mask-image: url(../img/futerri-letters.svg); mask-image: url(../img/futerri-letters.svg); }
.fut-logo-symbol  { left: var(--logo-sx); height: 14.9px; width: 24.2px;
  -webkit-mask-image: url(../img/futerri-symbol.svg); mask-image: url(../img/futerri-symbol.svg); }

/* Quan Rhye diu que toca text clar (portades fosques de projecte, per exemple),
   TOTS els elements de la capçalera han d'anar en blanc, no només el logo. */
#page-header[data-arts-theme-text="light"]:not(.fut-menu-obert) .fut-sound,
#page-header[data-arts-theme-text="light"]:not(.fut-menu-obert) .fut-contact {
  color: #f4f5f7 !important;
}
#page-header[data-arts-theme-text="light"]:not(.fut-menu-obert) .fut-contact:hover {
  background: #f4f5f7; 
}
#page-header[data-arts-theme-text="light"]:not(.fut-menu-obert) .fut-contact:hover span {
  color: #0e0e14; mix-blend-mode: normal;
}
#page-header[data-arts-theme-text="light"]:not(.fut-menu-obert) #js-burger .header__burger-line {
  background: #f4f5f7;
}
#page-header[data-arts-theme-text="light"]:not(.fut-menu-obert) .wpml-ls a {
  color: #f4f5f7;
}

/* sobre fons foscos el logo va en blanc (Rhye ja ens diu quin to toca) */
#page-header[data-arts-theme-text="light"] .fut-logo,
#page-header.fut-menu-obert .fut-logo { --logo-ink: #0e0e14; }
#page-header[data-arts-theme-text="light"]:not(.fut-menu-obert) .fut-logo { --logo-ink: #f4f5f7; }

/* la línia de base: apareix al costat del símbol quan el logo es recull */
.fut-logo-baseline {
  position: absolute; left: 33px; bottom: 2px; white-space: nowrap;
  font-size: 8px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--logo-ink); opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity .45s ease .05s, transform .45s cubic-bezier(.2,.7,.2,1) .05s, color .4s;
}

/* en fer scroll: s'amaguen les lletres, el símbol passa a l'esquerra i surt
   "Agència Creativa"; en passar-hi el cursor a dalt de tot, fa el mateix */
#page-header.fut-scrollat .fut-logo { width: 148px; }
#page-header.fut-scrollat .fut-logo-baseline,
#page-header:not(.fut-scrollat) .logo:hover .fut-logo-baseline { opacity: .62; transform: none; }
#page-header:not(.fut-scrollat) .logo:hover .fut-logo { width: 148px; }
#page-header:not(.fut-scrollat) .logo:hover .fut-logo-letters { opacity: 0; }
#page-header:not(.fut-scrollat) .logo:hover .fut-logo-symbol { left: 0; }
#page-header.fut-scrollat .fut-logo-letters { opacity: 0; }
#page-header.fut-scrollat .fut-logo-symbol { left: 0; }
/* amb el menú obert el logo torna sencer, a la mida que toqui a cada pantalla */
#page-header.fut-menu-obert .fut-logo-letters { opacity: 1; }
#page-header.fut-menu-obert .fut-logo { width: var(--logo-w); }
#page-header.fut-menu-obert .fut-logo-symbol { left: var(--logo-sx); }
#page-header.fut-menu-obert .fut-logo-baseline { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fut-logo { animation: none; } }

/* ---------- BOTONS de la capçalera (so i contacte) ---------- */
/* els botons van DINS de la columna de la hamburguesa, per no tocar la graella del tema */
#page-header .fut-col { display: flex; align-items: center; gap: 16px; }
/* El #page-header de Rhye va amb pointer-events:none perquè no tapi la pàgina, i
   el tema el torna a activar element per element. Els nostres botons també ho
   necessiten o NO ES PODEN CLICAR (un clic per codi sí que hi arriba, però el
   cursor no). El z-index els manté per sobre de l'overlay del menú quan és obert. */
#page-header .fut-actions,
#page-header .fut-sound,
#page-header .fut-contact,
#page-header .logo {
  pointer-events: auto;
}
/* Amb el menú obert, el tema hi posa a sobre el seu contenidor i el logo
   quedava tapat: es veia però no s'hi podia clicar per tornar a l'inici. */
#page-header.fut-menu-obert .logo { position: relative; z-index: 520; }
.fut-actions {
  display: inline-flex; align-items: center; gap: 14px;
  position: relative; z-index: 2;
}
.fut-sound {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  background: none; color: inherit; cursor: pointer; padding: 0;
  transition: opacity .3s, border-color .3s, background .3s;
}
.fut-sound i {
  display: block; width: 2px; height: 7px; background: currentColor; border-radius: 1px;
  transition: height .3s ease, opacity .3s;
}
/* SO ACTIVAT: l'equalitzador es mou i el botó va a plena opacitat */
.fut-sound[aria-pressed="true"] { opacity: 1; }
.fut-sound[aria-pressed="true"] i { animation: fut-eq .9s ease-in-out infinite alternate; }
.fut-sound[aria-pressed="true"] i:nth-child(2) { animation-delay: .15s; }
.fut-sound[aria-pressed="true"] i:nth-child(3) { animation-delay: .3s; }
/* SO APAGAT: les barres queden planes i curtes i hi passa una ratlla per sobre */
.fut-sound[aria-pressed="false"] { opacity: .45; }
.fut-sound[aria-pressed="false"] i { height: 3px; animation: none; }
.fut-sound[aria-pressed="false"]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 1.5px; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.fut-sound:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

@keyframes fut-eq { from { height: 4px; } to { height: 14px; } }
.fut-contact {
  font-size: 14px; letter-spacing: .02em; padding: 9px 20px; border-radius: 100px;
  border: 1px solid currentColor; color: inherit; text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s;
}
.fut-contact:hover { background: currentColor; }
.fut-contact:hover span { color: #fff; mix-blend-mode: difference; }
@media (max-width: 860px) { .fut-contact { display: none; } }

/* ---------- MENÚ: vidre blanc i subratllat de degradat ---------- */
/* Rhye força background:none a l'overlay, per això aquí va amb !important. */
#page-header .header__wrapper-overlay-menu,
#page-header .fut-actions {
  font-family: "Montserrat","Futura","Avenir Next",-apple-system,"Helvetica Neue",Arial,sans-serif;
}
#page-header .header__wrapper-overlay-menu * { font-family: inherit; }
/* El fons del menú és una CORTINA: una capa de vidre que baixa de dalt, recta,
   i que en tancar torna a pujar. Ho fem amb clip-path (la vora es manté plana) i
   amb ANIMATION, no amb transition, perquè el tema passa l'overlay de display:none
   a visible i una transició no s'hi veuria. NO li toquem el display: si el
   deixàvem muntat sempre, el tema hi enganxava el seu scroll propi i els enllaços
   quedaven penjats sobre la pàgina. */
#page-header .header__wrapper-overlay-menu {
  /* el fons el posa .fut-vidre-menu, que viu al cos de la pàgina */
  background: none !important;
  align-items: stretch; text-align: left;
}

/* LA CAPA DE VIDRE del menú: una sola, penjada del cos, que baixa de dalt
   recta i que en tancar torna a pujar. Aquí sí que el desenfoc veu la pàgina. */
.fut-vidre-menu {
  position: fixed; inset: 0; z-index: 499; pointer-events: none;
  opacity: 0; visibility: hidden;
  background: color-mix(in srgb, #ffffff 74%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
body.fut-fosc .fut-vidre-menu { background: color-mix(in srgb, #08080c 78%, transparent); }
/* LA CORTINA. Baixa recta (res de corba: la del tema és un SVG amb la vora
   arrodonida) i, en tancar, torna a pujar. La durada i la corba són les
   MATEIXES que fa servir el tema per a la seva cortina (1,2 s, expo.inOut),
   de manera que el contingut del menú —que l'anima el tema— i el fons van
   junts, igual que a futerri.cat. */
body.fut-menu-obert .fut-vidre-menu {
  opacity: 1; visibility: visible;
  animation: fut-cortina-baixa 1.2s cubic-bezier(.87,0,.13,1) both;
}
/* la sortida ve més avall i per tant guanya sobre l'entrada */
body.fut-menu-tancant .fut-vidre-menu {
  opacity: 1; visibility: visible;
  animation: fut-cortina-puja 1.2s cubic-bezier(.87,0,.13,1) both;
}
/* el contingut que acaba d'arribar es queda amagat fins que la cortina el tapa */
[data-barba="container"].fut-entrant { visibility: hidden !important; }
/* la pàgina que marxa es queda a la vista fins que la cortina la tapa */
[data-barba="container"].fut-queda { visibility: visible !important; opacity: 1 !important; }
/* i quan la cortina se'n va, el contingut entra en comptes de sortir de cop */
/* mentre la pàgina és darrere la cortina, les seves animacions es queden
   congelades al primer fotograma */
[data-barba="container"].fut-atura,
[data-barba="container"].fut-atura * { animation-play-state: paused !important; }
[data-barba="container"].fut-arriba { animation: fut-pagina-entra .4s ease both; }
@keyframes fut-pagina-entra { from { opacity: 0; } to { opacity: 1; } }

/* en canviar de pàgina el vidre no s'ha d'aixecar amb animació: el retirem
   sec, quan la cortina de transició del tema ja tapa la pantalla */
body.fut-sense-anim .fut-vidre-menu { animation: none !important; }
@keyframes fut-cortina-baixa {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes fut-cortina-puja {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}

/* llum de color difuminada a la part baixa */
.fut-vidre-menu::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: none;
  background: linear-gradient(90deg,#8CE39B,#F6D06B,#FFB27A,#FF8FA0,#E79BE0,#B9A0F5,#8E9BFF);
  filter: blur(70px); opacity: .22;
}
body.fut-fosc .fut-vidre-menu::before { opacity: .16; }
/* filet de degradat a baix de tot de l'overlay */
.fut-vidre-menu::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg,#8CE39B,#F6D06B,#FFB27A,#FF8FA0,#E79BE0,#B9A0F5,#8E9BFF);
  opacity: .9;
}
/* el contingut, alineat a l'esquerra dins de l'amplada del lloc */
#page-header .header__wrapper-overlay-menu { padding-left: 0; padding-right: 0; }
#page-header .header__wrapper-overlay-menu .scroll-content { padding: 0; }
#page-header .header__wrapper-menu,
#page-header .header__wrapper-overlay-widgets {
  max-width: 100%; width: 100%; margin-left: auto; margin-right: auto;
  /* --fut-gutter el mesura el chrome.js a partir del logo, perquè el menú
     quedi exactament sota la mateixa vertical que la capçalera */
  padding-left: var(--fut-gutter, clamp(24px,6vw,90px));
  padding-right: var(--fut-gutter, clamp(24px,6vw,90px));
}
#page-header .header__wrapper-menu { text-align: left; }

/* entrades de primer nivell */
#page-header .menu-overlay > li > a {
  position: relative; display: inline-block; color: #0e0e14 !important;
  font-size: clamp(32px,5.5vw,60px); font-weight: 500; line-height: 1.12; letter-spacing: -.01em;
  padding-bottom: 12px;
  transition: transform .5s cubic-bezier(.2,.75,.2,1);
}
#page-header .menu-overlay > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg,#8CE39B,#F6D06B,#FFB27A,#FF8FA0,#E79BE0,#B9A0F5,#8E9BFF);
  box-shadow: 0 0 10px rgba(142,155,255,.85), 0 0 20px rgba(231,155,224,.55), 0 0 30px rgba(255,143,160,.35);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .4s ease;
}
#page-header .menu-overlay > li > a:hover { transform: translate(18px,-6px); }
#page-header .menu-overlay > li > a:hover::after { transform: scaleX(1); opacity: 1; }

/* submenú: en fila, petit i discret, just sota del pare */
/* El submenú de Serveis no és desplegable: es veu sempre que el menú és obert.
   La part ESTRUCTURAL va sense condició, però la visibilitat va lligada a
   .fut-menu-obert; si no, els tres enllaços quedaven penjats sobre la pàgina
   amb el menú tancat i s'hi podia clicar sense veure'ls. */
#page-header .menu-overlay .sub-menu {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px 22px;
  position: static !important;
  margin: 2px 0 10px 46px; padding: 0; width: auto; min-width: 0; height: auto !important;
  background: none; box-shadow: none; z-index: auto !important; transform: none !important;
  opacity: 0; visibility: hidden; pointer-events: none;
}
/* Els tres serveis entren i surten AMB LA RESTA del menú: no tenen animació
   pròpia, els porta la de la seva entrada pare (.menu-overlay > li). Si els en
   posàvem una de pròpia, sortien abans que tot i marxaven després de tot. */
/* cal !important perquè el tema hi deixa un estil en línia amb opacity:0.
   Sense animació pròpia: l'entrada i la sortida les porta l'entrada pare. */
/* Només el CONTENIDOR. Les línies de dins les fa entrar i sortir el GSAP del
   tema, cridat des del chrome.js amb les mateixes opcions que la resta. */
#page-header.fut-menu-obert .menu-overlay .sub-menu {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
#page-header .menu-overlay .sub-menu li { margin: 0; width: auto; flex: 0 0 auto; }
/* els tres serveis: el mateix to que la resta del menú, no un gris apagat */
#page-header .menu-overlay .sub-menu a {
  position: relative; font-size: 17px; font-weight: 400; color: #0e0e14 !important;
  padding: 0 0 3px; line-height: 1.4; opacity: .78; transition: opacity .3s;
}
#page-header .menu-overlay .sub-menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
#page-header .menu-overlay .sub-menu a:hover { opacity: 1; }
#page-header .menu-overlay .sub-menu a:hover::after { transform: scaleX(1); }

/* peu de l'overlay: àrea de client + dades */
#page-header .header__wrapper-overlay-widgets { margin-top: 44px; }
#page-header .header__wrapper-overlay-widgets__border { display: none; }
#page-header .header__wrapper-overlay-widgets .row {
  position: relative; padding-top: 24px;
  justify-content: flex-start !important; align-items: flex-start; flex-wrap: nowrap !important;
  margin-left: 0; margin-right: 0; gap: 0;
}
/* EL FILET DE DALT. Abans era un border-top pelat i es veia des del primer
   instant en què el tema munta l'overlay, o sigui ABANS que baixi la cortina,
   i encara hi era quan la cortina ja havia marxat. Ara és una línia que es
   dibuixa i es desdibuixa amb el mateix ritme que la resta del menú: la fa el
   tema a t=0,6 s amb power4.out, i en tancar marxa a l'instant en 0,6 s. */
#page-header .header__wrapper-overlay-widgets .row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(14,14,20,.12);
  transform: scaleX(0); transform-origin: left center;
}
#page-header.fut-menu-obert .header__wrapper-overlay-widgets .row::before {
  animation: fut-filet 1.2s cubic-bezier(.165,.84,.44,1) .6s both;
}
/* EL BOTÓ D'ÀREA DE CLIENT. És nostre, el tema no el coneix i per tant no
   l'animava: sortia i marxava sol. Va amb el mateix compàs que les paraules
   del peu del menú. */
#page-header .fut-client-wrap { opacity: 0; }
#page-header.fut-menu-obert .fut-client-wrap {
  animation: fut-peu-entra 1.2s cubic-bezier(.165,.84,.44,1) .6s both;
}
/* el tancament (va després i per tant guanya): tot marxa de seguida, en 0,6 s,
   igual que ho fa el tema amb les seves línies */
#page-header.fut-menu-tancant .header__wrapper-overlay-widgets .row::before {
  animation: fut-filet-surt .6s cubic-bezier(.165,.84,.44,1) both;
}
#page-header.fut-menu-tancant .fut-client-wrap {
  animation: fut-peu-surt .6s cubic-bezier(.165,.84,.44,1) both;
}
@keyframes fut-filet      { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fut-filet-surt { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fut-peu-entra  { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes fut-peu-surt   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(100%); } }
#page-header .header__wrapper-overlay-widgets .header__widget {
  flex: 0 0 auto; width: auto; max-width: none; min-width: 0;
  padding-left: 0; padding-right: clamp(32px,6vw,90px);
}
#page-header .fut-client-wrap { margin-left: auto; flex: 0 0 auto; width: auto; }
#page-header .header__widget,
#page-header .header__widget p,
#page-header .header__widget a { color: #0e0e14 !important; font-size: 14px; font-weight: 400; }
#page-header .header__widget p, #page-header .header__widget a { opacity: .78; }
#page-header .header__widget a { position: relative; padding-bottom: 2px; transition: opacity .3s; }
#page-header .header__widget a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
/* Rhye parteix cada text en línies (.split-text__line) i els posa el color
   BLANC, perquè al seu disseny el menú va sobre fons fosc. Amb el nostre vidre
   blanc quedaven lletres blanques sobre blanc: no es veien. Que heretin el
   color del seu bloc, que ja el posem nosaltres segons si el menú és clar o
   fosc. */
/* El blanc no el posa la línia sinó l'embolcall que hi fa el tema (.overflow),
   o sigui que no n'hi havia prou amb la línia: fem que HEREDIN el color tots
   els embolcalls, i el to el posen els blocs de dalt, que sí que controlem. */
#page-header .header__wrapper-overlay-widgets *:not(.header__widget):not(p):not(a):not(.subheading):not(.fut-client),
#page-header .menu-overlay .split-text,
#page-header .menu-overlay .split-text *,
#page-header .menu-overlay .overflow { color: inherit !important; }
#page-header .header__widget a:hover { opacity: 1; }
#page-header .header__widget a:hover::after { transform: scaleX(1); }
#page-header .header__widget .subheading { color: #0e0e14 !important; opacity: .5; }
/* botó d'àrea de client, injectat pel chrome.js */
.fut-client {
  display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500;
  color: #0e0e14; padding: 12px 24px; border-radius: 100px; border: 1px solid rgba(14,14,20,.22);
  text-decoration: none; transition: background .3s, color .3s, border-color .3s;
}
.fut-client:hover { background: #0e0e14; color: #f4f5f7; border-color: #0e0e14; }
.fut-client span { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fut-client:hover span { transform: translateX(5px); }

/* ---------- HAMBURGUESA que es torna una CREU ---------- */
/* Rhye també anima les seves tres línies (les escurça en horitzontal), o sigui
   que si les giràvem nosaltres els dos moviments es barallaven i es veia un salt
   estrany. Ara, amb el menú obert, les seves línies s'amaguen i la creu la
   dibuixem amb dos pseudoelements del propi botó. */
#page-header #js-burger { position: relative; }
#page-header #js-burger .header__burger-line { transition: opacity .25s ease; }
#page-header.fut-menu-obert #js-burger .header__burger-line { opacity: 0 !important; }
#page-header #js-burger::before,
#page-header #js-burger::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 30px; height: 2px; background: currentColor; border-radius: 2px;
  transform-origin: 50% 50%; pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
#page-header #js-burger::after { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
#page-header.fut-menu-obert #js-burger::before { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
#page-header.fut-menu-obert #js-burger::after  { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); }
/* amb el menú obert el fons és blanc: tot el que hi ha a la capçalera va en fosc */
#page-header.fut-menu-obert { color: #0e0e14; }
#page-header.fut-menu-obert .fut-sound,
#page-header.fut-menu-obert .fut-contact { color: #0e0e14; }

/* ---------- PEU de pàgina ---------- */
/* El disseny original té el peu FIX (la pàgina el va descobrint). Dins de Rhye
   el deixem en flux normal, que és el que encaixa amb el seu model d'scroll. */
#page-footer { background: #000 !important; padding: 0 !important; }
#page-footer .footer__container,
#page-footer .footer__area_upper { padding: 0 !important; max-width: none !important; }
#page-footer .footer__area_upper .row { margin: 0 !important; }
#page-footer .footer__area_upper .row > .col-12 { padding: 0 !important; }
#page-footer .widget { margin: 0 !important; padding: 0 !important; }
#page-footer .footer__area_lower { display: none !important; }
#page-footer .fut-footer-host { width: 100%; }
#page-footer .footer__column, #page-footer .fut-footer-host,
#page-footer .footer-inner { text-align: left; }
#page-footer .footer-cta { text-align: center; }
#page-footer .site-footer {
  position: relative !important; left: auto !important; bottom: auto !important;
  height: auto !important; min-height: min(100vh, 900px); z-index: auto !important;
}
#page-footer .footer-inner { height: auto; min-height: min(100vh, 900px); }
/* EL PEU SEMPRE PER SOBRE DE LES LÍNIES.
   Els trams amb línies porten un llenç enganxat (position:sticky) amb un marge
   inferior negatiu de 100vh perquè el contingut hi passi per sobre. Quan el
   tram s'acaba a prop del peu, la vora de baix d'aquell llenç encara treu el
   nas per dalt de la finestra i es colava damunt del peu: el peu era estàtic i
   un element posicionat, per poc z-index que tingui, sempre li guanya. Amb
   aquestes dues línies el peu passa a davant i allà no s'hi veu cap línia mai.  */
#page-footer,
.fut-footer-host .site-footer { position: relative; z-index: 3; }

/* segells d'associacions: centrats, amb títol i filets com el del copyright */
#page-footer .footer-socia {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(26px,4vh,42px) 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
#page-footer .footer-socia .fs-t {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9a97a8;
  text-shadow: 0 1px 14px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8);
}
#page-footer .footer-badges {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(28px,5vw,72px); margin: 0;
}
/* Al mòbil, en fila seguida quedaven massa petits i escampats: els posem en
   una graella de dos per dos. A pantalla gran es queden com estan. */
@media (max-width: 760px) {
  #page-footer .footer-badges {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(18px,5vw,34px) clamp(14px,4vw,28px); justify-items: center; align-items: center;
    width: 100%; max-width: 420px; margin: 0 auto;
  }
  #page-footer .footer-badges .fb-item { padding: 6px 0; justify-content: center; }
  #page-footer .footer-badges img { max-width: 100%; height: auto; }
}
/* l'enllaç porta el seu propi coixí: si no, en passar-hi el cursor a prop
   els rectangles es tocaven i el canvi d'opacitat feia pampallugues */
#page-footer .footer-badges .fb-item {
  display: inline-flex; align-items: center; padding: 10px 6px;
  opacity: .55; transition: opacity .3s ease;
}
#page-footer .footer-badges .fb-item:hover { opacity: 1; }
/* el filtre és FIX (no es transiciona): animar-lo és el que provocava el parpelleig */
/* les boles passen per darrere: una ombra pròpia els separa del fons */
#page-footer .footer-badges img {
  height: auto; display: block;
  filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.95)) drop-shadow(0 0 4px rgba(0,0,0,.85));
}/* ---------- FORMULARI de contacte (Contact Form 7 dins d'Elementor) ---------- */
/* la secció del formulari porta l'identificador futctbs, que li posem des del
   muntador de la pàgina (l'Elementor el converteix en .elementor-element-futctbs) */
.elementor-element-futctbs {
  background: #f4f5f7;
  font-family: "Montserrat","Futura","Avenir Next",-apple-system,"Helvetica Neue",Arial,sans-serif;
  padding-bottom: clamp(80px,10vh,140px);
}
.elementor-element-futctbs .elementor-widget {
  max-width: 1680px; margin-left: auto; margin-right: auto;
  padding-left: clamp(20px,7.5vw,120px); padding-right: clamp(20px,7.5vw,120px);
}
.elementor-element-futctbs .wpcf7 { max-width: 820px; margin-top: 26px; }
.elementor-element-futctbs .wpcf7-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; align-items: start;
}
.elementor-element-futctbs .hidden-fields-container,
.elementor-element-futctbs .screen-reader-response { display: none; }
/* el nom i el correu, un al costat de l'altre; la resta, tota l'amplada */
.elementor-element-futctbs .wpcf7-form > * { grid-column: 1 / -1; }
.elementor-element-futctbs .wpcf7-form > label:has([data-name="your-name"]) { grid-column: 1 / 2; }
.elementor-element-futctbs .wpcf7-form > label:has([data-name="your-email"]) { grid-column: 2 / 3; }
.elementor-element-futctbs .wpcf7-form > label {
  display: block; margin: 0;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8a8f9e;
}
.elementor-element-futctbs .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.elementor-element-futctbs input[type="text"],
.elementor-element-futctbs input[type="email"],
.elementor-element-futctbs textarea,
.elementor-element-futctbs select {
  width: 100%; box-sizing: border-box; background: transparent; border: 0;
  border-bottom: 1px solid rgba(14,14,20,.18); border-radius: 0; padding: 8px 0;
  font-family: inherit; font-size: 17px; font-weight: 400; color: #0e0e14;
  letter-spacing: normal; text-transform: none; box-shadow: none;
  height: auto; min-height: 0; line-height: 1.5; margin: 0;
  transition: border-color .3s;
}
/* el desplegable de servei permet triar-ne més d'un: el dibuixem com una
   llista amb marc, que s'entengui que s'hi pot clicar */
.elementor-element-futctbs select {
  height: auto; min-height: 118px; padding: 8px 10px;
  border: 1px solid rgba(14,14,20,.18); border-radius: 12px;
}
.elementor-element-futctbs select option { padding: 5px 4px; }
.elementor-element-futctbs textarea { height: 170px; resize: vertical; }
.elementor-element-futctbs input:focus,
.elementor-element-futctbs textarea:focus { outline: none; border-bottom-color: #0e0e14; }
.elementor-element-futctbs select:focus { outline: none; border-color: #0e0e14; }
.elementor-element-futctbs .wpcf7-submit {
  justify-self: start; width: auto; margin-top: 6px;
  font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  padding: 15px 34px; border-radius: 100px; border: 1px solid #0e0e14;
  background: #0e0e14; color: #f4f5f7;
  transition: background .3s, color .3s, transform .3s;
}
.elementor-element-futctbs .wpcf7-submit:hover { background: transparent; color: #0e0e14; }
.elementor-element-futctbs .wpcf7-spinner { margin-left: 12px; }
/* avisos: que es llegeixin i no semblin un error del sistema */
.elementor-element-futctbs .wpcf7-response-output {
  margin: 0; padding: 14px 18px; border: 0; border-radius: 12px;
  font-size: 14px; line-height: 1.5; background: rgba(14,14,20,.06); color: #0e0e14;
}
.elementor-element-futctbs form.sent .wpcf7-response-output { background: rgba(140,227,155,.22); }
.elementor-element-futctbs form.invalid .wpcf7-response-output,
.elementor-element-futctbs form.failed .wpcf7-response-output { background: rgba(255,143,160,.2); }
.elementor-element-futctbs .wpcf7-not-valid-tip {
  margin-top: 6px; font-size: 12px; color: #c6465c; letter-spacing: normal; text-transform: none;
}
@media (max-width: 700px) {
  .elementor-element-futctbs .wpcf7-form { grid-template-columns: 1fr; }
  .elementor-element-futctbs .wpcf7-form > label:has([data-name="your-name"]),
  .elementor-element-futctbs .wpcf7-form > label:has([data-name="your-email"]) { grid-column: 1 / -1; }
}

/* ---------- SCROLL ----------
   El tema posa scroll-behavior:smooth a l'arrel. Amb això, el navegador anima
   ell mateix cada moviment de la roda o del trackpad: engega una animació per
   cada impuls i, si n'arriba un altre abans d'acabar, la reapunta. El resultat
   és que la posició d'scroll avança a tirons, i tot el que va lligat a
   l'scroll —el zoom dels projectes destacats, el carrusel— hereta aquells
   tirons. A la web local no hi era: allà l'arrel va en "auto" i el moviment el
   porta el navegador de manera contínua.
   El tema no el necessita per a res: els seus enllaços d'àncora els anima amb
   GSAP pel seu compte. El desactivem a les nostres pàgines. */
body.fut-disseny,
html:has(body.fut-disseny) { scroll-behavior: auto !important; }

/* ---------- SCROLL: que els blocs fixats (sticky) tornin a funcionar ---------- */
/* Rhye tanca la pàgina amb overflow:hidden al <main>, al #page-wrapper i al
   contenidor de barba. Qualsevol d'aquests crea un CONTENIDOR D'SCROLL i llavors
   el position:sticky dels carrusels i del llenç de les línies s'enganxa a aquell
   contenidor (que no es mou) en lloc de a la finestra: no es fixa mai res. Amb
   overflow-x:clip es continua tallant el desbordament lateral PERÒ sense crear
   contenidor d'scroll.
   El <body> NO s'hi toca: el seu overflow es propaga a la finestra i, amb clip,
   la pàgina deixa de poder fer scroll.
   I només a les pàgines amb disseny nostre (classe fut-disseny, que hi posa el
   futerri.php): a les pàgines pròpies de Rhye, com la graella de projectes,
   tocar-li el model d'scroll li trencava la càrrega de les imatges. */
/* Aquí hi teníem overflow-x:clip. Tallava el desbordament lateral sense crear
   contenidor d'scroll, que era el que calia... però el clip crea contenció de
   pintat, i tot el que va lligat a l'scroll dins d'aquell subarbre se'n
   ressent. A la web local aquests contenidors van en "visible" i prou.
   Comprovat: amb visible no desborda enlloc —sis pàgines, a 1440 i a 390 px,
   recorrent-les senceres— o sigui que el clip no feia cap falta. */
/* I l'última peça: el tema posa overflow-x:hidden al <body>, que es propaga a
   la finestra i li canvia el model d'scroll. A la web local el body va en
   "visible". Comprovat que sense ell no desborda enlloc i la pàgina segueix
   fent scroll igual (sis pàgines, 1440 i 390 px, recorregut sencer). */
body.fut-disseny { overflow: visible !important; }

body.fut-disseny [data-barba="wrapper"],
body.fut-disseny #page-wrapper,
body.fut-disseny .page-wrapper,
body.fut-disseny .page-wrapper__content {
  overflow: visible !important;
}

/* ---------- PORTADA ---------- */
/* El peu de Rhye no és fix, o sigui que el contingut no necessita el marge
   inferior d'una pantalla que demanava el disseny original. */
.fut-block #main { margin-bottom: 0; }
/* L'escena 3D del hero és FIXA i queda al darrere (z-index -1): les capes del
   tema que hi ha a sobre han de ser transparents a la portada, i el contingut
   ha de començar tres pantalles més avall perquè es vegi. */
body.home #page-wrapper,
body.home .page-wrapper__content,
body.home .fut-home > .elementor-element { background: transparent !important; }
.fut-home .fut-home-main { margin-top: 300vh; }
/* ELS PROJECTES DESTACATS, FORA DE #main.
   El #main porta position:relative i z-index:1 (li cal per tapar l'escena fixa
   de la portada, que va al darrere). Això el converteix en un context
   d'apilament, i les targetes 3D dels projectes hi vivien a dins. A la pàgina
   d'Experiències aquesta secció no té cap context d'apilament per sobre, i és
   l'única diferència que quedava entre les dues. Ara la secció és germana de
   #main, no filla, igual que allà. Com que ja no hereta el fons del #main, se
   li dona aquí, i el mateix al tram que ve després. */
.fut-home > .projects-3d,
.fut-home > .fut-home-final { background: var(--bg); }

/* ---------- TO FOSC: capçalera i menú sobre fons fosc ---------- */
/* La classe fut-fosc la posa el chrome.js quan la banda de la capçalera cau
   damunt d'una secció fosca. Aleshores tot va en blanc, i si s'obre el menú,
   la cortina és de vidre NEGRE amb els elements blancs. */
/* la capçalera enganxada, blanca i no grisa com la deixa el tema */
#page-header.header_sticky,
#page-header.bg-light-1 { background-color: #ffffff !important; }
#page-header.header_sticky.fut-fosc,
#page-header.bg-light-1.fut-fosc { background-color: #08080c !important; }
#page-header.fut-menu-obert { background-color: transparent !important; }

#page-header.fut-fosc { color: #f4f5f7; }
#page-header.fut-fosc .fut-logo { --logo-ink: #f4f5f7; }
#page-header.fut-fosc .fut-sound,
#page-header.fut-fosc .fut-contact { color: #f4f5f7; }
#page-header.fut-fosc .fut-contact:hover { background: #f4f5f7; }
#page-header.fut-fosc .fut-contact:hover span { color: #0e0e14; mix-blend-mode: normal; }
#page-header.fut-fosc #js-burger .header__burger-line { background: #f4f5f7; }
#page-header.fut-fosc .wpml-ls a,
#page-header.fut-fosc .lang-switcher a { color: #f4f5f7; }

/* menú obert sobre pàgina fosca */

#page-header.fut-fosc.fut-menu-obert .fut-logo { --logo-ink: #f4f5f7; }
#page-header.fut-fosc.fut-menu-obert { color: #f4f5f7; }
#page-header.fut-fosc.fut-menu-obert .fut-sound,
#page-header.fut-fosc.fut-menu-obert .fut-contact { color: #f4f5f7; }
#page-header.fut-fosc.fut-menu-obert .menu-overlay > li > a { color: #f4f5f7 !important; }
#page-header.fut-fosc.fut-menu-obert .menu-overlay .sub-menu a { color: #f4f5f7 !important; }
#page-header.fut-fosc.fut-menu-obert .header__wrapper-overlay-widgets .row::before { background: rgba(244,245,247,.16); }
#page-header.fut-fosc.fut-menu-obert .header__widget,
#page-header.fut-fosc.fut-menu-obert .header__widget p,
#page-header.fut-fosc.fut-menu-obert .header__widget a,
#page-header.fut-fosc.fut-menu-obert .header__widget .subheading { color: #f4f5f7 !important; }
#page-header.fut-fosc.fut-menu-obert .fut-client { color: #f4f5f7; border-color: rgba(244,245,247,.28); }
#page-header.fut-fosc.fut-menu-obert .fut-client:hover { background: #f4f5f7; color: #0e0e14; border-color: #f4f5f7; }
/* la creu, del to que toqui */
#page-header.fut-menu-obert #js-burger::before,
#page-header.fut-menu-obert #js-burger::after { background: currentColor; }

/* ---------- PÀGINES MUNTADES AMB PECES D'ELEMENTOR ---------- */
/* Aquestes van amb widgets natius (títol, text, codi curt) perquè es puguin
   editar des del constructor; l'estil el posem aquí, no dins d'un bloc tancat. */
.fut-bloc,
.fut-bloc h1, .fut-bloc h2, .fut-bloc h3, .fut-bloc h4,
.fut-bloc p, .fut-bloc span, .fut-bloc a, .fut-bloc li,
.fut-bloc input, .fut-bloc textarea, .fut-bloc select, .fut-bloc button,
.fut-bloc .elementor-widget-text-editor, .fut-bloc .elementor-heading-title {
  /* Rhye posa una serif per defecte als widgets de text */
  font-family: "Montserrat","Futura","Avenir Next",-apple-system,"Helvetica Neue",Arial,sans-serif;
}
.fut-bloc .elementor-widget { margin-bottom: 0; }
.fut-bloc .fut-eyebrow p {
  margin: 0 0 18px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244,245,247,.6);
}
.fut-bloc .fut-hero-titol .elementor-heading-title {
  font-size: clamp(34px,5.4vw,80px); font-weight: 500; line-height: 1.12;
  letter-spacing: -.025em; color: #f4f5f7; margin: 0; padding-bottom: .1em; max-width: 18ch;
}
.fut-bloc .fut-hero-lede p {
  margin: 26px 0 0; max-width: 46ch; font-size: clamp(16px,1.5vw,20px);
  line-height: 1.65; color: rgba(244,245,247,.72);
}
.fut-hero-fosc .elementor-container { max-width: 1680px; }
.fut-hero-fosc .fut-hero-col { padding: 0 clamp(20px,7.5vw,120px); }

/* el bloc partit: canals a l'esquerra, formulari a la dreta */
.fut-contacte-partit { background: #f4f5f7; }
.fut-contacte-partit > .elementor-container { max-width: 1680px; }
.fut-contacte-partit .fut-canals { padding: clamp(60px,8vh,110px) clamp(20px,5vw,90px); }
.fut-contacte-partit .fut-canals-titol .elementor-heading-title {
  font-size: clamp(26px,3vw,44px); font-weight: 500; letter-spacing: -.02em;
  color: #0e0e14; margin: 0 0 clamp(26px,4vh,46px);
}
.fut-contacte-partit .fut-canal { margin-bottom: clamp(22px,3vh,34px); }
.fut-contacte-partit .fut-canal .ct-et {
  margin: 0 0 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8a8f9e;
}
.fut-contacte-partit .fut-canal .ct-val {
  margin: 0; font-size: clamp(17px,1.5vw,21px); line-height: 1.5; color: #0e0e14;
}
.fut-contacte-partit .fut-canal a { color: #0e0e14; text-decoration: none; border-bottom: 1px solid rgba(14,14,20,.25); }
.fut-contacte-partit .fut-canal a:hover { border-bottom-color: #0e0e14; }

/* la caixa de vidre del formulari */
.fut-contacte-partit .fut-vidre > .elementor-widget-wrap {
  margin: clamp(30px,5vh,70px) clamp(20px,4vw,70px);
  padding: clamp(30px,4vw,56px);
  border-radius: 26px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 24px 70px rgba(14,14,20,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.fut-contacte-partit .fut-form-titol .elementor-heading-title {
  font-size: clamp(22px,2.2vw,32px); font-weight: 500; letter-spacing: -.02em; color: #0e0e14; margin: 0;
}
.fut-contacte-partit .fut-form-lede p {
  margin: 10px 0 26px; font-size: 15px; line-height: 1.6; color: #5b6070;
}
@media (max-width: 900px) {
  .fut-contacte-partit > .elementor-container { flex-wrap: wrap; }
  .fut-contacte-partit .fut-canals,
  .fut-contacte-partit .fut-vidre { width: 100% !important; }
}

/* el formulari dins de la caixa de vidre */
.fut-vidre .wpcf7-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; align-items: start;
}
.fut-vidre .hidden-fields-container, .fut-vidre .screen-reader-response { display: none; }
.fut-vidre .wpcf7-form > * { grid-column: 1 / -1; }
.fut-vidre .wpcf7-form > label:has([data-name="your-name"]) { grid-column: 1 / 2; }
.fut-vidre .wpcf7-form > label:has([data-name="your-email"]) { grid-column: 2 / 3; }
.fut-vidre .wpcf7-form > label {
  display: block; margin: 0;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8a8f9e;
}
.fut-vidre .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.fut-vidre input[type="text"], .fut-vidre input[type="email"],
.fut-vidre textarea, .fut-vidre select {
  width: 100%; box-sizing: border-box; background: transparent; border: 0;
  border-bottom: 1px solid rgba(14,14,20,.2); border-radius: 0; padding: 8px 0;
  font-family: inherit; font-size: 16px; font-weight: 400; color: #0e0e14;
  letter-spacing: normal; text-transform: none; box-shadow: none;
  height: auto; min-height: 0; line-height: 1.5; margin: 0; transition: border-color .3s;
}
.fut-vidre select {
  padding: 8px 4px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #0e0e14 50%), linear-gradient(135deg, #0e0e14 50%, transparent 50%);
  background-position: calc(100% - 12px) 18px, calc(100% - 7px) 18px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  -webkit-appearance: none; appearance: none;
}
.fut-vidre textarea { height: 120px; resize: vertical; }
.fut-vidre input:focus, .fut-vidre textarea:focus, .fut-vidre select:focus {
  outline: none; border-bottom-color: #0e0e14;
}
.fut-vidre .wpcf7-submit {
  justify-self: start; width: auto; margin-top: 4px;
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  padding: 14px 32px; border-radius: 100px; border: 1px solid #0e0e14;
  background: #0e0e14; color: #f4f5f7; transition: background .3s, color .3s;
}
.fut-vidre .wpcf7-submit:hover { background: transparent; color: #0e0e14; }
.fut-vidre .wpcf7-response-output {
  margin: 0; padding: 12px 16px; border: 0; border-radius: 12px;
  font-size: 14px; background: rgba(14,14,20,.06); color: #0e0e14;
}
.fut-vidre form.sent .wpcf7-response-output { background: rgba(140,227,155,.3); }
.fut-vidre form.invalid .wpcf7-response-output,
.fut-vidre form.failed .wpcf7-response-output { background: rgba(255,143,160,.25); }
.fut-vidre .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12px; color: #c6465c; letter-spacing: normal; text-transform: none; }
@media (max-width: 700px) {
  .fut-vidre .wpcf7-form { grid-template-columns: 1fr; }
  .fut-vidre .wpcf7-form > label:has([data-name="your-name"]),
  .fut-vidre .wpcf7-form > label:has([data-name="your-email"]) { grid-column: 1 / -1; }
}

/* ---------- ENTRADA dels heros muntats amb peces d'Elementor ---------- */
.fut-bloc .fut-eyebrow,
.fut-bloc .fut-hero-titol,
.fut-bloc .fut-hero-lede { animation: fut-hero-puja .9s cubic-bezier(.2,.7,.2,1) both; }
.fut-bloc .fut-hero-titol { animation-delay: .1s; }
.fut-bloc .fut-hero-lede  { animation-delay: .2s; }
@keyframes fut-hero-puja {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- El ressaltat de degradat, també als blocs d'Elementor ---------- */
/* El CSS del disseny va tancat dins de .fut-block; aquestes pàgines es munten
   amb peces natives d'Elementor i necessiten la seva còpia. */
.fut-bloc .grad-cycle {
  position: relative; display: inline-block; color: inherit;
  animation: logo-cycle 20s ease-in-out infinite;
}
.fut-bloc .grad-cycle::after {
  content: attr(data-text); position: absolute; left: 0; right: 0; top: 0; text-align: inherit;
  background-image: var(--grad-loop); background-size: 2800px 100%; background-repeat: repeat-x;
  background-position-x: calc(var(--logo-pos) * 3.684);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: var(--logo-op); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .fut-bloc .grad-cycle { animation: none; } }

/* ---------- El submenú, VISIBLE de debò ---------- */
/* Rhye anima cada entrada del menú amb el seu "split text" (GSAP): els
   trossos de dins viuen en un contenidor amb overflow:hidden i entren pujant.
   ABANS els forçàvem tots a opacitat 1 i overflow:visible i els animàvem
   nosaltres; això tenia dos problemes: l'entrada no era tan fluida com la de
   futerri.cat i, en tancar, les línies que el tema aparca fora del seu
   contenidor es veien igualment (la ratlla del peu amb el botó d'àrea de
   client tornava a sortir amb el menú ja tancat). Ara la fa tota el tema i
   nosaltres només li canviem la cortina. L'única cosa que hem de resoldre és
   el submenú de Serveis, que el tema no anima mai perquè al seu disseny viu en
   un segon full; el fem entrar i sortir nosaltres amb la seva mateixa crida de
   GSAP, des del chrome.js. */
/* el logo no ha de desaparèixer en obrir el menú */
#page-header.fut-menu-obert .logo,
#page-header.fut-menu-obert .logo__wrapper-img,
#page-header.fut-menu-obert .fut-logo,
#page-header.fut-menu-obert .fut-logo-letters,
#page-header.fut-menu-obert .fut-logo-symbol {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}

/* El tema amaga la COLUMNA sencera del logo en obrir el menú (li posa
   opacity:0 i visibility:hidden en línia). El logo hi ha de ser sempre. */
#page-header.fut-menu-obert .header__col:has(.logo),
#page-header.fut-menu-tancant .header__col:has(.logo) {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
/* les dades del peu del menú, que es llegeixin bé sobre el vidre */
#page-header .header__widget p,
#page-header .header__widget a { opacity: .88; }
#page-header .header__widget .subheading { opacity: .62; }

/* el botó d'àrea de client agafava el gris dels enllaços del tema */
#page-header .header__wrapper-overlay-widgets .fut-client { color: #0e0e14 !important; }
#page-header .header__wrapper-overlay-widgets .fut-client:hover { color: #f4f5f7 !important; }
#page-header.fut-fosc.fut-menu-obert .header__wrapper-overlay-widgets .fut-client { color: #f4f5f7 !important; }
#page-header.fut-fosc.fut-menu-obert .header__wrapper-overlay-widgets .fut-client:hover { color: #0e0e14 !important; }

/* ---------- MÒBIL ---------- */
@media (max-width: 860px) {
  /* la capçalera es partia en dues files: logo i idiomes a dalt, so i
     hamburguesa a sota. Tot en una fila i més compacte. */
  #page-header .header__container > .row { flex-wrap: nowrap !important; align-items: center; }
  #page-header .header__col { flex: 0 0 auto; }
  #page-header .fut-logo { --logo-w: 92px; --logo-sx: 71.8px; width: var(--logo-w); height: 19px; }
  #page-header .fut-logo-letters { width: 69px; height: 19px; }
  #page-header .fut-logo-symbol { width: 20.5px; height: 12.6px; }
  #page-header .fut-logo-baseline { left: 28px; font-size: 7px; letter-spacing: .16em; }
  #page-header.fut-scrollat .fut-logo { width: 126px; }
  #page-header .fut-actions { gap: 10px; }
  #page-header .fut-sound { width: 32px; height: 32px; }
  #page-header .wpml-ls-statics-shortcode_actions,
  #page-header .wpml-ls { font-size: 12px; }
  #page-header .wpml-ls a { padding: 0 5px !important; }
  #page-header #js-burger { transform: scale(.82); transform-origin: right center; }

  /* el menú, amb aire i sense el peu enganxat a les entrades */
  #page-header .menu-overlay > li > a { font-size: clamp(30px,8.5vw,42px); }
  #page-header .menu-overlay .sub-menu { margin-left: 0; gap: 4px 16px; }
  #page-header .menu-overlay .sub-menu a { font-size: 15px; }
  #page-header .header__wrapper-overlay-widgets .row { flex-wrap: wrap !important; gap: 22px 0; }
  #page-header .header__wrapper-overlay-widgets .header__widget { width: 50%; padding-right: 20px; }
  #page-header .fut-client-wrap { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  #page-header .header__wrapper-overlay-widgets .header__widget { width: 100%; }
}

@media (max-width: 860px) {
  /* el bloc partit del contacte, un damunt de l'altre i amb aire */
  .fut-contacte-partit .fut-canals { padding: clamp(70px,10vh,96px) 22px 10px; }
  .fut-contacte-partit .fut-vidre > .elementor-widget-wrap { margin: 10px 18px 60px; padding: 26px 22px; border-radius: 20px; }
  .fut-hero-fosc .fut-hero-col { padding: 0 22px; }
  .fut-bloc .fut-hero-titol .elementor-heading-title { font-size: clamp(30px,8.6vw,44px); max-width: none; }
  .fut-bloc .fut-hero-lede p { font-size: 16px; margin-top: 18px; }
}

@media (max-width: 620px) {
  /* en recollir-se, el logo es quedava massa ample i la hamburguesa sortia
     de la pantalla: en pantalla petita només el símbol */
  #page-header.fut-scrollat .fut-logo { width: 34px; }
  #page-header.fut-scrollat .fut-logo-baseline { display: none; }
  #page-header .wpml-ls a { padding: 0 3px !important; font-size: 11px; }
  #page-header .fut-actions { gap: 8px; }
  #page-header #js-burger { transform: scale(.78); }
}

/* ---------- SELECTOR D'IDIOMA ---------- */
/* més gran i amb més aire entre els idiomes */
#page-header .wpml-ls,
#page-header .wpml-ls-statics-shortcode_actions { font-size: 14px; }
#page-header .wpml-ls ul,
#page-header .wpml-ls-statics-shortcode_actions ul {
  display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none;
}
#page-header .wpml-ls li, #page-header .wpml-ls-item { margin: 0 !important; padding: 0 !important; }
#page-header .wpml-ls a,
#page-header .wpml-ls-statics-shortcode_actions a {
  padding: 4px 2px !important; font-size: 14px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; opacity: .55; transition: opacity .3s; text-decoration: none;
}
#page-header .wpml-ls a:hover { opacity: 1; }
#page-header .wpml-ls-current-language a { opacity: 1; }
#page-header .wpml-ls-current-language a::after {
  content: ""; display: block; height: 1.5px; margin-top: 3px; background: currentColor;
}
@media (max-width: 620px) {
  #page-header .wpml-ls ul,
  #page-header .wpml-ls-statics-shortcode_actions ul { gap: 13px; }
  #page-header .wpml-ls a,
  #page-header .wpml-ls-statics-shortcode_actions a { font-size: 13px; padding: 4px 1px !important; }
}

/* ---------- RÈTOL DE GALETES ---------- */
/* El plugin pinta els botons de groc, blau i verd amb estils EN LÍNIA, per això
   aquí va tot amb !important. Ho passem al llenguatge de la casa: vidre blanc,
   Montserrat, tinta i botons negres que s'inverteixen en passar-hi el cursor. */
.cky-consent-container,
.cky-modal,
.cky-preference-center {
  font-family: "Montserrat","Futura","Avenir Next",-apple-system,"Helvetica Neue",Arial,sans-serif !important;
}
.cky-consent-container { max-width: 460px; }
.cky-consent-bar {
  background: color-mix(in srgb, #ffffff 82%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(14,14,20,.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(14,14,20,.16) !important;
  padding: 26px !important;
}
.cky-title {
  color: #0e0e14 !important;
  font-size: 17px !important; font-weight: 500 !important; letter-spacing: -.01em;
  margin-bottom: 10px !important;
}
.cky-notice-des, .cky-notice-des p, .cky-preference-content-wrapper,
.cky-preference-content-wrapper p, .cky-gpc-wrapper .cky-gpc-desc {
  color: #5b6070 !important; font-size: 13.5px !important; line-height: 1.6 !important;
}
.cky-notice-btn-wrapper { gap: 10px !important; flex-wrap: wrap; padding-top: 18px !important; }
.cky-notice-btn-wrapper .cky-btn-customize,
.cky-notice-btn-wrapper .cky-btn-reject { flex: 1 1 0 !important; min-width: 0 !important; }
.cky-notice-btn-wrapper .cky-btn-accept { flex: 1 1 100% !important; }

/* botons: tots negres, i en passar-hi el cursor s'inverteixen */
.cky-btn, .cky-btn-accept, .cky-btn-reject, .cky-btn-customize,
.cky-btn-preferences, .cky-prefrence-btn-wrapper .cky-btn {
  font-family: inherit !important;
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: .01em;
  padding: 11px 20px !important;
  border-radius: 100px !important;
  background: #0e0e14 !important;
  color: #f4f5f7 !important;
  border: 1px solid #0e0e14 !important;
  transition: background .3s, color .3s, border-color .3s !important;
  text-transform: none !important;
}
.cky-btn:hover, .cky-btn-accept:hover, .cky-btn-reject:hover,
.cky-btn-customize:hover, .cky-btn-preferences:hover {
  background: transparent !important;
  color: #0e0e14 !important;
  border-color: #0e0e14 !important;
}
/* "Personalitzar" és l'opció secundària: només contorn */
.cky-btn-customize {
  background: transparent !important;
  color: #0e0e14 !important;
  border-color: rgba(14,14,20,.28) !important;
}
.cky-btn-customize:hover {
  background: #0e0e14 !important; color: #f4f5f7 !important; border-color: #0e0e14 !important;
}
.cky-btn-revisit-wrapper { background: #0e0e14 !important; }

/* finestra de preferències */
.cky-modal { border-radius: 20px !important; overflow: hidden; }
.cky-preference-center { border-radius: 20px !important; border: 1px solid rgba(14,14,20,.10) !important; }
.cky-preference-title { color: #0e0e14 !important; font-weight: 500 !important; letter-spacing: -.01em; }
.cky-accordion-header-des, .cky-accordion-header-des p { color: #5b6070 !important; font-size: 13px !important; }
.cky-accordion-btn { color: #0e0e14 !important; font-weight: 500 !important; }
.cky-accordion { border-bottom: 1px solid rgba(14,14,20,.08) !important; }
.cky-switch input[type="checkbox"]:checked { background: #0e0e14 !important; }
.cky-switch input[type="checkbox"] { border-color: rgba(14,14,20,.3) !important; }
.cky-footer-wrapper, .cky-prefrence-btn-wrapper { border-top: 1px solid rgba(14,14,20,.08) !important; }
.cky-always-active { color: #5b6070 !important; }
.cky-preference-header .cky-btn-close { filter: grayscale(1); opacity: .6; }
.cky-preference-header .cky-btn-close:hover { opacity: 1; }

/* ---------- LA CORTINA DEL MENÚ DEL TEMA, FORA ---------- */
/* Rhye té tres cortines. La del MENÚ (#js-header-curtain) és un SVG NEGRE que
   escombra la pantalla en obrir el menú: és la "segona capa" que el deixava
   tot opac i gris, perquè es pinta per sota del nostre vidre.
   Les altres dues NO s'han de tocar: són les de la transició entre pàgines i
   les que converteixen la imatge d'un projecte en la portada de la seva fitxa. */
#js-header-curtain,
#js-header-curtain .curtain__wrapper-svg,
#js-header-curtain .curtain-svg {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ---------- PROJECTES: sense filtre de categories al mòbil ----------
   A la graella de projectes, la tira de categories ocupava mitja pantalla
   abans de veure el primer projecte. A pantalla petita la traiem: la graella
   ja surt amb "Tots" posat, o sigui que segueixen sortint-hi tots. */
@media (max-width: 760px) {
  .filter.js-filter { display: none !important; }
}


/* ---------- MENÚ AL MÒBIL: que càpiga en una pantalla ----------
   Amb els tres blocs del peu del menú, el contingut feia 983 px en una
   finestra de 664 i s'havia de fer scroll per arribar a baix. A pantalla
   petita deixem només "Segueix-nos" i l'àrea de client; el correu, el telèfon
   i l'adreça ja són a la pàgina de contacte i al peu del web. A partir de
   tauleta hi surt tot, com fins ara. */
@media (max-width: 760px) {
  /* els fills de la fila són: 0 el filet, 1 Contacte, 2 Estudi, 3 Segueix-nos,
     4 l'àrea de client. Amaguem l'1 i el 2. */
  #page-header .header__wrapper-overlay-widgets .row > *:nth-child(2),
  #page-header .header__wrapper-overlay-widgets .row > *:nth-child(3) { display: none !important; }
  /* i s'estreny una mica tot perquè hi càpiga amb folgança */
  #page-header .header__wrapper-overlay-widgets { padding-bottom: 6px; }
  #page-header .header__wrapper-overlay-widgets .row { padding-top: 14px; }
  /* i s'estreny una mica la llista perquè hi càpiga amb folgança */
  #page-header .menu-overlay > li > a { line-height: 1.08; }
  #page-header .menu-overlay > li { margin-bottom: 2px; }
  #page-header .menu-overlay .sub-menu { margin-top: 0; margin-bottom: 6px; }
}

/* Pantalles curtes (SE i companyia): la llista es mesura amb l'alçada de la
   finestra, no amb l'amplada, perquè hi càpiga igualment sense scroll. */
@media (max-width: 760px) {
  /* "Segueix-nos" i l'àrea de client, a la mateixa fila: així el peu del menú
     ocupa una alçada en comptes de dues i el conjunt cap en una pantalla. */
  #page-header .header__wrapper-overlay-widgets .row { align-items: center; }
  #page-header .header__wrapper-overlay-widgets .row > *:nth-child(4) { width: auto; flex: 1 1 auto; }
  #page-header .fut-client-wrap { width: auto; margin-left: auto; }
}
/* Pantalles curtes (SE i companyia): la llista es mesura amb l'alçada de la
   finestra, no amb l'amplada, perquè hi càpiga igualment sense scroll. */
@media (max-width: 760px) and (max-height: 700px) {
  #page-header .menu-overlay > li > a { font-size: clamp(21px, 4.9vh, 34px); padding-bottom: 5px; }
  #page-header .menu-overlay > li { margin-bottom: 0; }
  #page-header .menu-overlay .sub-menu { gap: 3px 14px; margin: 0 0 5px 34px; }
  #page-header .menu-overlay .sub-menu a { font-size: 14px; }
  #page-header .header__wrapper-overlay-widgets .row { padding-top: 10px; }
  #page-header .header__widget .subheading { font-size: 10px; }
  #page-header .header__widget a, #page-header .header__widget p { font-size: 13px; }
  #page-header .fut-client { padding: 8px 16px; font-size: 12px; }
}