/* ======================================== */
/* ============  MY VARIABLES  ============ */
/* ======================================== */

:root {

  /* Escala de grisos */
  --gris-50: #FBFBFB;
  --gris-100: #F7F7F7;
  --gris-150: #F2F2F2;
  --gris-200: #ECECEC;
  --gris-300: #D6D6D6;
  --gris-400: #B5B5B5;
  --gris-500: #919191;
  --gris-600: #656565;
  --gris-700: #464646;
  --gris-800: #303030;
  --gris-900: #1C1C1C;
  --gris-1000: #111111;
 
  /* Blanc i negre */
  --blanc: #ffffff;
  --negre: #000000;

  /* BLAUS TeamViewers */
  --blau-teamViewer: #0071E3;
  --blau-teamViewer-hover: #0060C2;

  /* Vora subtil per a components (pills, botons) */
  --vora-subtil: #BABABA;

  /* Gris de la part superior de img/background_reparacio.jpg: omple el fons
     quan la secció és més alta que la imatge, sense que es vegi la unió */
  --gris-fons-reparacio: #C2BDB9;

}


/* ======================================== */
/* ============ @ FONT FACE  ============== */
/* ======================================== */







/* ======================================== */
/* ==========  ESTILS TIPOGRÀFICS  ======== */
/* ======================================== */



.text_categories h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  /* font-size: 4.5rem;
  line-height: 1.1; */
  /* font-size: clamp(2.25rem, 1.46rem + 3.38vw, 4.5rem);
  line-height: 1.1; */
  font-size: clamp(1.75rem, 0.61rem + 4.88vw, 5rem);
  line-height: 1.15;
  color: var(--gris-900);
  margin: 0;
  text-align: center;
}



p.subtitol {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  /* font-size: 1.875rem;
  line-height: 1.4; */
  font-size: clamp(1.1rem, 1.03rem + 0.94vw, 1.75rem);
  line-height: 1.2;
  color: var(--gris-900);
  margin: 0;
  text-align: center;
  /* max-width: 800px; */
}





/* ======================================== */
/* ============ CSS PROPIS  =============== */
/* ======================================== */

html, body {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Scroll suau cap a les seccions enllaçades des del nav */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Marge perquè el header fix no tapi la part superior de la secció en fer l'scroll */
#venda,
#reparacio,
#assessorament,
#contacta {
  scroll-margin-top: 150px;
}

mark { background-color: transparent; }

body {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
  	font-smoothing: antialiased;
  	text-rendering: optimizeLegibility;
}

body.overflow-hidden {
  overflow: hidden;
}


/* ================================== */ 
/* =========  ACCESIBILITY  ========= */
/* ================================== */ 











/* ================================= */ 
/* ===== TRANSITIONS DE PAGINA ===== */
/* ================================= */ 

.animated {
  animation-duration: 0.75s;
    -webkit-animation-duration: 0.75s;
  animation-fill-mode: both;  
    -webkit-animation-fill-mode: both;
}

.fadeIn { animation-name: fadeIn; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}






/* ================================= */ 
/* =====    HEADER DESKTOP    =====  */
/* ================================= */

/* El <header> només agrupa (semàntica): no té posició ni z-index, perquè no
   creï un context d'apilament. Si en creés, el logo es barrejaria només amb
   el header i no amb la pàgina. Els fills (logo i .header_content) són fixos.
   Sense fons: el logo s'ha de barrejar amb la pàgina, no amb una barra */
header.header_desktop {
  /* background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gris-200);
  transition: background-color 0.3s ease, border-color 0.3s ease; */
}

/* Logo: capa fixa pròpia amb mix-blend-mode: difference. El logo és blanc i el
   navegador el pinta com l'invers del que té a sota, píxel a píxel: negre sobre
   fons clar, clar sobre fons fosc. Funciona igual en mode clar i en mode fosc,
   sense JS. Important: no canviar-li mai el color (ha de ser sempre blanc) */
.header_desktop__logo {
  position: fixed;
  top: 0;
  left: 3.25%;        /* (100% - 93.5% de .header_content) / 2: alineat amb el menú */
  z-index: 11;        /* per sobre de .header_content */
  height: 100px;      /* la mateixa alçada que .header_content: centrat vertical */
  display: flex;
  align-items: center;
  mix-blend-mode: difference;
}

.header_desktop__logo img {
  display: block;
  width: 131px;
  height: auto;
  filter: brightness(0) invert(1); /* l'SVG és negre: es pinta blanc */
}

/* Menú + botons: la barra fixa del header. La primera columna queda buida:
   hi va a sobre el logo (.header_desktop__logo) */
.header_content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 93.5%;
  height: 100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  padding: 0;
}


/* Navegació */
.header_content__nav {
  grid-column: 2;
  justify-self: center;
}

.header_content__nav ul {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: var(--blanc);
  border: 0.5px solid var(--vora-subtil);
  border-radius: 48px;
}

/* Indicador lliscant: un únic element que es desplaça i redimensiona
   fins a l'enllaç actiu (JS: navScrollSpy.js), en lloc de fons
   independents per enllaç que "salten" d'un a l'altre */
.header_content__nav-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  background-color: var(--gris-900);
  border-radius: 100px;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform, width;
}

.header_content__nav a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 11px 16px;   /* 4 + 11 + 18 + 11 + 4 = 48px: mateixa alçada que TeamViewer i el switch */
  border-radius: 100px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.125rem; /* 18px (abans 1.5rem / 24px) */
  line-height: 1;
  color: var(--gris-900);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header_content__nav a:hover:not([aria-current="page"]) {
  background-color: var(--gris-150);
}

.header_content__nav a:focus-visible {
  outline: 2px solid var(--gris-900);
  outline-offset: 2px;
}

.header_content__nav a[aria-current="page"] {
  color: var(--blanc);
}

/* CTAs */
.header_content__ctas {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* TeamViewer */
.btn-teamviewer {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 48px;
  padding: 8px 4px 8px 24px;
  background-color: var(--blau-teamViewer);
  border-radius: 40px;
  color: var(--blanc);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.btn-teamviewer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--negre);
  flex-shrink: 0;
}

.btn-teamviewer__icon img {
  display: block;
  width: 33px;
  height: 33px;
}

/* Hover */
.btn-teamviewer:hover {
  background-color: var(--blau-teamViewer-hover);
}

/* Accessibilitat */
.btn-teamviewer:focus-visible {
  outline: 2px solid var(--gris-900);
  outline-offset: 2px;
}

/* SWITCH light/dark (js/themeSwitch.js)
   Mode clar: el botó rodó (knob) és a l'esquerra amb el sol.
   Mode fosc (aria-checked="true"): llisca a la dreta i el sol es transforma en la lluna */
.theme-switch {
  display: inline-flex;
  align-items: center;
  width: 91px;
  height: 48px;
  padding: 4px;
  background-color: var(--blanc);
  border: 0.5px solid var(--gris-600);
  border-radius: 100px;
  cursor: pointer;
}

.theme-switch:focus-visible {
  outline: 2px solid var(--gris-900);
  outline-offset: 2px;
}

.theme-switch__knob {
  position: relative;
  width: 40px;
  height: 40px;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); /* arrencada i frenada suaus */
}

/* 91px - 8px de padding - 1px de vora = 82px d'interior; 82 - 40 del knob = 42px de recorregut */
.theme-switch[aria-checked="true"] .theme-switch__knob {
  transform: translateX(42px);
}

/* Les dues icones, una a sobre de l'altra dins del knob: mentre llisca,
   el sol gira i s'esvaeix i la lluna entra girant */
.theme-switch__icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 40px;
  height: 40px;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1), transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.theme-switch__icon--dark {
  opacity: 0;
  transform: rotate(-90deg);
}

.theme-switch[aria-checked="true"] .theme-switch__icon--light {
  opacity: 0;
  transform: rotate(90deg);
}

.theme-switch[aria-checked="true"] .theme-switch__icon--dark {
  opacity: 1;
  transform: rotate(0deg);
}

/* Moviment reduït: el canvi és instantani */
@media (prefers-reduced-motion: reduce) {
  .theme-switch__knob,
  .theme-switch__icon {
    transition: none;
  }
}

/* HEADER DESKTOP COMPACTE (891–1100px)
   Logo + menú + botons necessiten ~973px i no hi caben: el logo s'encongia
   fins a desaparèixer. Aquí el TeamViewer queda només amb la icona i els
   enllaços del menú tenen menys espai lateral (total ~820px). Per sota de
   890px ja es fa servir el header mobile */
@media (max-width: 1100px) {

  .header_content__nav a {
    padding: 11px 12px;
  }

  .btn-teamviewer {
    justify-content: center;
    width: 48px;
    padding: 4px;
  }

  /* Text amagat només visualment: els lectors de pantalla el continuen llegint */
  .btn-teamviewer__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}








/* ============================================= */
/* =========== MOBILE: HEADER + MENÚ =========== */
/* ============================================= */
/* Per sota de 890px (breakpoint de tot el projecte) el header desktop
   desapareix i el substitueix el header mobile. Mai es veuen tots dos */

header.mobile-header,
.menu_mobile {
  display: none;
}

@media (max-width: 890px) {

  header.header_desktop {
    display: none;
  }

  /* --- Header --- */
  header.mobile-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gris-200);
    z-index: 1000;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.6, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.6, 1);
  }

  /* Menú obert: el header es fon amb el panell (fons opac i sense línia), com a apple.com */
  body.menu-mobile-open header.mobile-header {
    background-color: var(--blanc);
    border-bottom-color: transparent;
  }

  .header-inner {
    width: 93.5%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-header__logo {
    display: inline-flex;
    align-items: center;
  }

  .mobile-header__logo img {
    display: block;
    width: 110px;
    height: auto;
  }

  .mobile-header__logo:focus-visible,
  .menu-toggle:focus-visible {
    outline: 2px solid var(--gris-900);
    outline-offset: 4px;
  }

  /* --- Botó del menú: dues ratlles que es converteixen en una X --- */
  .menu-toggle {
    position: relative;
    width: 44px;   /* àrea tàctil mínima recomanada */
    height: 44px;
    margin-right: -10px; /* la icona queda alineada amb el marge dret; l'àrea tàctil sobresurt */
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  .menu-toggle__line {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--gris-900);
    /* Icona en dues fases, com la d'apple.com (0.24s en total):
       per TANCAR el menú (X → ratlles), primer es desfà el gir i després les ratlles se separen */
    transition:
      transform 0.12s cubic-bezier(0.42, 0, 1, 1) 0s,
      top 0.12s cubic-bezier(0, 0, 0.58, 1) 0.12s;
  }

  .menu-toggle__line:nth-child(1) { top: 17px; }
  .menu-toggle__line:nth-child(2) { top: 25px; }

  /* Menú obert: les dues ratlles es creuen al centre (X).
     Per OBRIR (ratlles → X), primer s'ajunten al centre i després giren */
  .menu-toggle[aria-expanded="true"] .menu-toggle__line {
    transition:
      top 0.12s cubic-bezier(0.42, 0, 1, 1) 0s,
      transform 0.12s cubic-bezier(0, 0, 0.58, 1) 0.12s;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2) {
    top: 21px;
    transform: rotate(-45deg);
  }

  /* --- Panell del menú (pantalla completa, sota el header) --- */
  .menu_mobile {
    display: block;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999; /* per sota del header: el botó per tancar sempre és visible */
    overflow-y: auto;
    overscroll-behavior: contain; /* en arribar al final del panell, la pàgina de sota no es mou (iOS) */
    background-color: var(--blanc);
    padding: clamp(40px, 10vw, 72px) 3.25% clamp(24px, 6vw, 40px);
  }

  /* L'atribut hidden ha de guanyar el display: block de sobre */
  .menu_mobile[hidden] {
    display: none;
  }

  /* Menú obert: la pàgina de sota no fa scroll. Dins la media query a propòsit:
     si la pantalla passa a desktop amb el menú obert, la pàgina mai queda bloquejada */
  body.menu-mobile-open {
    overflow: hidden;
  }

  .menu-list_mobile {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu-list_mobile li a {
    display: block;
    padding: 10px 0;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(1.65rem, 7vw, 3rem);
    line-height: 1.15;
    color: var(--gris-900);
    text-decoration: none;
  }

  .menu-list_mobile li a:focus-visible {
    outline: 2px solid var(--gris-900);
    outline-offset: 2px;
  }

  /* Marge perquè el header mobile (70px) no tapi l'inici de la secció en anar-hi des del menú */
  #venda,
  #reparacio,
  #assessorament,
  #contacta {
    scroll-margin-top: 90px;
  }
}

@media (max-width: 890px) and (prefers-reduced-motion: reduce) {
  .menu-toggle__line,
  .menu-toggle[aria-expanded="true"] .menu-toggle__line,
  header.mobile-header {
    transition: none;
  }
}

/* Hover dels enllaços del menú: només amb punter real (ratolí/trackpad).
   En tàctil el tap deixaria el color "enganxat" fins al toc següent */
@media (max-width: 890px) and (hover: hover) {
  .menu-list_mobile li a {
    transition: color 0.25s ease;
  }

  .menu-list_mobile li a:hover {
    color: var(--gris-600);
  }
}


















/* ================================= */ 
/* ===========    HERO    =========  */
/* ================================= */ 
 
.hero_container {
  width: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: radial-gradient(210.26% 113.7% at 50% 44.54%, #FFF 0%, rgba(206, 208, 234, 0.50) 100%); */
  background:
    radial-gradient(40% 50% at 15% 85%, rgba(71, 145, 126, 0.18) 0%, transparent 100%),
    radial-gradient(40% 50% at 85% 15%, rgba(178, 118, 222, 0.16) 0%, transparent 100%), /* violeta (dalt a la dreta): 0.16, una mica més suau que el verd perquè sobre el fons lilós es nota més */
    radial-gradient(120% 90% at 50% 45%, #FFFFFF 0%, #D4D8F0 100%);
}
 
.hero__content {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
}


/* ===== DISPOSITIUS DEL HERO — inici ===========================================
   Dispositius Apple dispersos pel hero (index.html + js/heroDevices.js).
   Posicions i mides en % del hero, preses del mockup (2000 × 1008 px).
   Tres capes per dispositiu, perquè cada moviment vagi per separat:
     .hero__device        → posició + parallax del cursor (GSAP)
     .hero__device-inner  → entrada (GSAP)
     img                  → flotació contínua (CSS)
   Per treure l'efecte: esborrar aquest bloc, el bloc de l'HTML,
   js/heroDevices.js i la carpeta img/hero-devices */

/* Els textos per sobre dels dispositius */
.hero__content {
  position: relative;
  z-index: 1;
}

.hero__devices {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__device {
  position: absolute;
  will-change: transform;
}

.hero__device img {
  display: block;
  width: 100%;
  height: auto;
}

/*                                  left       top       width */
.hero__device--macmini-top     { left: 21.15%; top: 13.9%; width: 6.4%;  }
.hero__device--macmini-front   { left: 73.95%; top: 17.1%; width: 7.25%; }
.hero__device--macbook         { left: -5.35%; top: 40.7%; width: 17.2%; } /* surt una mica per l'esquerra, com al mockup */
.hero__device--ipad            { left: 90.8%;  top: 34%;   width: 7%;    }
.hero__device--macstudio-front { left: 13.75%; top: 82.1%; width: 12%;   }
.hero__device--imac            { left: 75.75%; top: 67.2%; width: 15%;   }

/* Per sota de 1600px el claim gran ocupa gairebé tota l'amplada (11vw) i el
   MacBook, a mitja alçada, quedaria sota el text: baixa a la zona lliure de sota */
@media (max-width: 1599px) {
  .hero__device--macbook { top: 68%; width: 15%; }
}

@media (prefers-reduced-motion: no-preference) {

  /* Amagats fins a l'entrada (mateix sistema que els claims: classe "js") */
  .js .hero__device-inner {
    opacity: 0;
  }

  /* Flotació: puja i baixa uns píxels, sense parar. Cada dispositiu amb el
     seu ritme perquè no es moguin tots alhora */
  .hero__device img {
    animation: heroDeviceFloat var(--float-durada, 6s) ease-in-out var(--float-retard, 0s) infinite alternate;
  }

  .hero__device--macmini-top img     { --float-durada: 5.5s; --float-retard: -1s;   }
  .hero__device--macmini-front img   { --float-durada: 6.5s; --float-retard: -3s;   }
  .hero__device--macbook img         { --float-durada: 7s;   --float-retard: -2s;   }
  .hero__device--ipad img            { --float-durada: 6s;   --float-retard: -4s;   }
  .hero__device--macstudio-front img { --float-durada: 7.5s; --float-retard: -0.5s; }
  .hero__device--imac img            { --float-durada: 8s;   --float-retard: -2.5s; }
}

@keyframes heroDeviceFloat {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

/* Mòbil i tauleta vertical: sense dispositius (i, com que les imatges són
   loading="lazy", ni es descarreguen) */
@media (max-width: 890px) {
  .hero__devices {
    display: none;
  }
}
/* ===== DISPOSITIUS DEL HERO — final ========================================= */


/* Capçalera del hero (<hgroup>): claims + h1, apilats i centrats
   amb el mateix espai que .hero__content (8px) */
hgroup.hero__capcalera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* Claims del hero (<p>): conté els dos claims (claim petit + claim gran).
   Els apila i els centra amb el mateix espai de sempre (8px) */
.hero__claims {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
}
 
.claimPetit {
  display: block; 
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.85rem, 1.5rem + 2vw, 3.5rem);
  line-height: 1.2;
  text-align: center;
  color: var(--gris-900);
  /* margin-bottom: 32px;  */
}

/* Línies del claim petit (animació Slide Up Reveal, js/reveals.js).
   Cada línia és un bloc: fa el salt de línia (substitueix el <br>) */
.claimPetit__mask {
  display: block;
  overflow: hidden;       /* amaga la línia mentre és per sota */
  padding-bottom: 0.1em;  /* una mica més d'alçada perquè no retalli la cua de la "p" de "Saps"... */
  margin-bottom: -0.1em;  /* ...compensada amb el marge negatiu: la maquetació no canvia */
}

.claimPetit__line {
  display: block; /* necessari perquè la línia es pugui desplaçar amb transform */
}


/* Estat inicial de les animacions del hero, aplicat pel CSS des del primer instant
   (classe "js" posada al <head>): així els claims no es pinten abans que arribi
   GSAP. Amb moviment reduït no s'amaguen (no hi ha animació) */
@media (prefers-reduced-motion: no-preference) {
  .js .claimPetit__line {
    transform: translateY(115%);          /* per sota de la seva màscara */
  }

  .js .claimGran__line {
    clip-path: inset(0% 100% 0% 0%);      /* tapada del tot */
  }

  .js .hero__titol {
    opacity: 0;                           /* invisible fins que arriba el Cross Fade */
    transform: scale(0.95);
  }
}
 
.claimGran {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(4.5rem, 11vw, 10rem);
  line-height: 1.1;
  text-align: center;
  background: linear-gradient(90deg, #47917E 0%, #F7BF27 25.48%, #F2523F 49.04%, #B276DE 70.19%, #3863D7 100%);
  background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Línies del claim gran (animació Reveal Wipe, js/reveals.js).
   El contenidor les apila (flex en columna) i les centra; cada línia és tan ample com el
   seu text: així el "destapat" comença i acaba exactament als extrems de les lletres.
   (Amb flex, els marges negatius de les línies no es fusionen entre si) */
.claimGran {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.claimGran__line {
  margin: -0.1em 0;   /* compensa el padding: la maquetació no canvia */
  padding: 0.1em 0;   /* més alçada perquè el degradat i el destapat no retallin la cua de la "q" de "qui" */
}

/* Quan l'animació està activa, cada línia pinta el seu tros de degradat (js/reveals.js)
   i el contenidor deixa de pintar-lo: amb clip-path a les línies, el degradat del contenidor no s'hi veuria */
.claimGran.is-lines {
  background: none;
}

.claimGran.is-lines .claimGran__line {
  background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  /* Ombra extremadament subtil. Amb drop-shadow i no text-shadow: amb el text
     transparent (background-clip: text), el text-shadow es veuria a través de
     les lletres i embrutaria el degradat; drop-shadow només pinta per fora */
  filter: drop-shadow(0 1px 2px rgba(28, 28, 28, 0.08));
}


h1 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25;
  text-align: center;
  color: var(--gris-900);
  /* margin-top: clamp(24px, 3vw, 48px) */
}







/* ================================= */ 
/* =======    DESCRIPCIÓ    =======  */
/* ================================= */ 

.description_container {
  position: relative;
  z-index: 2;
  margin-top: 100dvh; /* reserva l'alçada del hero perquè es vegi sencer abans de ser tapat */
  background-color: var(--blanc); /* opac: imprescindible perquè cobreixi visualment el hero */
  width: 100%;
}

.description__content {
  width: 93.5%;
  height: auto;
  margin: 0 auto;
  padding: 5% 0 10%;
  display: flex;
  flex-direction: column;
  /* Espai entre paràgrafs: creix i s'encongeix amb el text (com el font-size de sota).
     Es llegeix: "5% de l'amplada de la pantalla, però mai menys de 20px ni més de 64px".
     ▶ Per ajustar-lo a mòbil, canvia el 20px; a escriptori, el 64px. */
  gap: clamp(20px, 5vw, 64px);
}

.description__content p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.5rem, 5.5vw, 4.5rem);
  line-height: 1.15;
  color: var(--gris-900);
  max-width: 1100PX;
  margin: 0 auto;
}







/* ================================== */ 
/* ======  OFICINES  ====== */
/* ================================== */

.oficines {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  padding-bottom: 5%;
  background-color: var(--blanc);
}

/* Títol: mateixa columna que .description__content (93.5% d'ample, màxim 1100px, centrada) */
.oficines__titol {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.25rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--gris-900);
  width: 93.5%;
  max-width: 1100px;
  margin: 0 auto 48px;
}


/* Contenidor amb scroll horitzontal: ocupa tota l'amplada i les fotos
   sobresurten pel costat dret fins a la vora de la pantalla.

   MARGE ESQUERRE (es repeteix a .oficines__track): fa que la primera foto comenci
   alineada amb el títol. Es llegeix així: "el més gran entre 3.25% de la pantalla
   (marge en pantalles petites) i el que sobra a cada costat d'una columna de 1100px". */
.oficines__slider {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(3.25%, (100% - 1100px) / 2); /* on s'atura cada foto en fer snap */
  scroll-padding-right: 3.25%;                          /* on s'atura l'última foto (marge dret del header) */
  scrollbar-width: none;
  cursor: grab;
}

.oficines__slider::-webkit-scrollbar {
  display: none;
}

.oficines__slider:focus-visible {
  outline: 2px solid var(--gris-900);
  outline-offset: 4px;
}

/* Mentre s'arrossega amb el ratolí (js/oficinesSlider.js): sense snap perquè
   el desplaçament segueixi el cursor, i sense seleccionar text */
.oficines__slider.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.oficines__track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-left: max(3.25%, (100% - 1100px) / 2);  /* mateix marge que el títol */
  padding-right: 3.25%;  /* l'última foto acaba al marge dret del header (.header_content: 93.5% centrat = 3.25% per costat) */
  margin: 0;
  list-style: none;
}

/* FOTOS: totes tenen la mateixa ALÇADA; l'amplada la posa cada imatge segons la seva
   pròpia proporció (una foto vertical queda estreta, una horitzontal queda ampla).

   ▶ PER CANVIAR LA MIDA DE TOTES LES FOTOS, canvia només aquest height.
     Es llegeix: "720px, però mai més del 55% de l'amplada ni del 80% de l'alçada de
     la pantalla" (així en un portàtil baix la foto no ocupa tota la pantalla). */
.oficines__slide {
  flex-shrink: 0;
  height: min(720px, 55vw, 80vh);
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--gris-300); /* es veu mentre la imatge carrega */
  scroll-snap-align: start;
}

/* L'última foto s'atura pel costat dret, alineada amb el marge dret del header */
.oficines__slide:last-child {
  scroll-snap-align: end;
}

.oficines__slide img {
  display: block;
  height: 100%;  /* ocupa tota l'alçada de la diapositiva... */
  width: auto;   /* ...i l'amplada surt de la proporció de la imatge (sense retallar-la) */
  pointer-events: none;
}

/* Mòbil: alçada relativa a l'amplada de la pantalla (55vw: la primera foto,
   la més apaïsada, hi cap sencera amb el marge a cada costat) */
@media (max-width: 890px) {
  .oficines__slide {
    height: 55vw;
    border-radius: 12px;
  }

  .oficines__titol {
    margin-bottom: 32px;
  }

  .oficines__track {
    gap: 16px;
  }
}










/* ================================== */
/* ===  Categories (estructura comuna) === */
/* ================================== */
/* Venda, Reparació i Assessorament comparteixen contenidor, icona i text.
   Cada secció només declara el que la diferencia (fons, alçada) a la seva classe pròpia. */
section.categoria_container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}

.categoria_content {
  width: 93.5%;
  height: auto;
  padding: 7.5% 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
  overflow: hidden;
}

/* Icon */
.icon_categoria {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background-color: var(--gris-900);
  flex-shrink: 0;
  margin: 0 auto;
}

/* Text */
.text_categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 790px;
  text-align: center;
  margin: 0 auto;
}

/* Títol de categoria (animació Reveal Wipe, js/reveals.js): la línia és tan
   ampla com el seu text i centrada, perquè el "destapat" comenci i acabi
   exactament als extrems de les lletres (mateix sistema que .claimGran__line) */
.text_categories h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text_categories__line {
  margin: -0.1em 0;   /* compensa el padding: la maquetació no canvia */
  padding: 0.1em 0;   /* més alçada perquè el destapat no retalli la cua de la "p" de "Reparació" */
}





/* ================================== */
/* =============  Venda  ============ */
/* ================================== */
section.venda_container {
  background-color: var(--gris-150);
}

/* Imatges */
.imatgesVenda {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 5.18px + 0.75vw, 16px);
  width: 100%;
  max-width: 1400px;
}
 
.imatgesVenda__hero {
  width: 100%;
  aspect-ratio: 1600 / 940;
  border-radius: clamp(12px, 7.77px + 1.13vw, 24px);
  overflow: hidden;
  background-color: var(--blanc);
}
 
.imatgesVenda__row {
  display: flex;
  gap: 16px;
  width: 100%;
}
 
.imatgesVenda__col {
  flex: 1 1 0;
  aspect-ratio: 792 / 672;
  border-radius: clamp(12px, 7.77px + 1.13vw, 24px);
  overflow: hidden;
  background-color: var(--blanc);
}
 
.imatgesVenda__hero img,
.imatgesVenda__col img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}







/* ================================== */ 
/* =========  Reparació  ========= */
/* ================================== */
/* Imatge ancorada a la part inferior i ajustada a l'amplada (no es retalla mai pels costats).
   La part superior de la foto és un degradat gris pla que queda darrere del text;
   si la secció és més alta que la imatge, el background-color continua aquest gris. */
section.reparacio_container {
  background-color: var(--gris-fons-reparacio);
  background-image: url("../img/background_reparacio.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  /* Espai sota el text per al motiu de la foto (portàtil + mans): ocupa les 920 px
     inferiors d'una imatge de 1920×1940 px (comença a la punta de l'eina, fila ~1025).
     El % del padding és relatiu a l'amplada, així que la proporció es manté a qualsevol
     mida de pantalla. Si es torna a substituir la imatge, cal recalcular aquest valor.
     El +200 és el marge òptic entre el text i la punta de l'eina (també en unitats de la
     imatge: ~150px a 1440px d'ample, ~40px a mòbil). Per ajustar l'aire, canvia només el 200. */
  padding-bottom: calc(100% * (920 + 150) / 1920);
}

/* Distància entre el text i el motiu de la foto. El motiu comença just on acaba
   .categoria_content, així que el seu padding inferior (140px, compartit amb
   Venda i Assessorament) és l'espai que queda entre tots dos: aquí el reduïm.
   Per ajustar-lo, canvia només aquest valor. */
section.reparacio_container .categoria_content {
  padding-bottom: 0;
}

/* Versió lleugera per a pantalles petites (1200 px d'ample, ~134 KB en lloc de ~233 KB) */
@media (max-width: 890px) {
  section.reparacio_container {
    background-image: url("../img/background_reparacio_mobile.jpg");
  }
}
















/* ================================== */ 
/* =========  Assessorament  ========= */
/* ================================== */
section.assessorament_container {
  height: 1400px;
  background-color: var(--blanc);
}









/* ================================== */ 
/* =========  Contacta  ========= */
/* ================================== */
section.contacta_container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1400px;
  background-color: var(--gris-150);
}

/* Dades de contacte (Figma: frame 'dadesContacta'): tres columnes separades
   160px; cada columna té icona, títol i dades, alineats a l'esquerra */
.dades_contacta {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 200px;
  margin: 5% auto 0;
}

.dades_contacta__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  text-align: left;
}

/* Icona provisional (quadre fosc, com al Figma) */
.dades_contacta__icona {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background-color: var(--gris-900);
}

.dades_contacta__titol {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
  color: var(--gris-900);
}

.dades_contacta__text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35;
  color: var(--gris-900);
}

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

.dades_contacta__text a:hover {
  text-decoration: underline;
}

.dades_contacta__text a:focus-visible {
  outline: 2px solid var(--gris-900);
  outline-offset: 2px;
}

/* Mòbil: les tres columnes s'apilen, centrades */
@media (max-width: 890px) {
  .dades_contacta {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .dades_contacta__item {
    align-items: center;
    text-align: center;
  }
}
























/* ================================== */ 
/* =============  FOOTER  ============= */
/* ================================== */
.footer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  background-color: red;
}

.footer {
  width: 93.5%;
  height: 300px;
  margin: 0 auto;
  padding: 48px 0;
  text-align: center;
  font-size: 0.9rem;
}