/* ============================================================
   MOTION — capa d'animació de la pàgina d'inici
   Només s'aplica a index.html. No modifica cap contingut.
   ============================================================ */

/* ---- RITME VERTICAL I COSTURES ----
   Abans totes les seccions tenien la mateixa pausa (52 px) i cap element creuava
   cap vora: per això la pàgina es llegia com sis caixes apilades. */

/* Serveis i Sectors continuen el discurs (què fem → per a qui): s'ajunten.
   Contacte obre tema nou: respira. */
#serveis   .section-inner { padding-bottom: 62px; }
#sectors   .section-inner { padding-top: 74px; padding-bottom: 78px; }
#novetats  .section-inner { padding-top: 66px; padding-bottom: 84px; }
#contactar .section-inner { padding-top: 104px; }

/* El dibuix tècnic ja no s'atura a la vora: una línia de construcció travessa
   la costura i canvia de clar a fosc exactament on canvia el fons. */
#novetats { position: relative; }
#sectors::before,
#novetats::before {
  content: '';
  position: absolute;
  left: max(2rem, calc((100% - 1200px) / 2));
  width: 1px;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 16px, transparent 16px 25px);
          mask-image: repeating-linear-gradient(to bottom, #000 0 16px, transparent 16px 25px);
}
#sectors::before {
  top: -130px; height: 300px;
  background: linear-gradient(to bottom, rgba(255,255,255,.32) 0 43.3%, rgba(26,26,26,.20) 43.3% 100%);
}
#novetats::before {
  top: -120px; height: 280px;
  background: linear-gradient(to bottom, rgba(26,26,26,.20) 0 42.8%, rgba(255,255,255,.26) 42.8% 100%);
}

@media (max-width: 900px) {
  #sectors  .section-inner { padding-top: 62px; padding-bottom: 58px; }
  #novetats .section-inner { padding-top: 52px; }
  #sectors::before, #novetats::before { display: none; }
}

/* ============================================================
   PÀGINES DE SERVEI
   Portaven el motor antic i cap dels dibuixos. Aquest bloc les posa al
   mateix nivell que la portada sense tocar-ne el contingut.
   ============================================================ */

/* ---- Capçalera amb el plànol del servei ---- */
.page-hero { padding: 86px 0 74px !important; }
.svc-plan {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease .15s;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.4) 44%, transparent 78%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.4) 44%, transparent 78%);
}
.svc-plan.is-in { opacity: 1; }
.svc-plan svg { width: 100%; height: 100%; display: block; }
.svc-plan svg .ink   { fill: none; stroke: #FFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .22; }
.svc-plan svg .ink-2 { fill: none; stroke: #FFF; stroke-width: 1.2; opacity: .12; }
.svc-plan svg .acc   { fill: none; stroke: var(--red-light); stroke-width: 2.2; opacity: .38; }
.svc-plan svg .tx, .svc-plan svg .ar, .svc-plan svg .ax, .svc-plan svg .hx { display: none; }
/* El plànol de la capçalera va quiet: darrere del títol el moviment distreu */
.svc-plan svg [class*="an-"] { animation: none !important; }
.page-hero-inner { z-index: 2 !important; }

/* ---- Moment B: relat, dades i galeria ----
   El relat va sobre blanc (com la resta de la pàgina) i les dades tenen el
   seu propi plafó gris amb xamfrans propis: colors diferents, com abans de
   fondre'ls en un de sol. Perquè no torni a llegir-se com un segon apartat
   despenjat, el plafó es queda a la mateixa columna i amplada que el text
   (mai a tota l'amplada de la secció) i s'hi enganxa amb un marge curt. */
.svc-main { padding: 84px 2rem 78px !important; }
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: 58px;
  row-gap: 0;
  align-items: start;
}
.svc-txt {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  padding: 0 0 4px;
}
.svc-txt .desc-intro {
  border-left: 3px solid var(--red);
  padding-left: 20px;
  font-size: 21px; line-height: 1.65; color: var(--gray-dark);
}
.svc-txt .desc-body  { margin-bottom: 2.2rem; }
.svc-gallery { grid-column: 2; grid-row: 1 / span 2; }

/* Visor únic amb el mateix marc que Novetats: xamfrà, marques i escala */
.svc-stage { position: relative; }
.svc-frame {
  --ch: 24px;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(26,26,26,.16);
  touch-action: pan-y;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.svc-frame:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.svc-shift {
  position: absolute;
  inset: 1px;
  background: #0F0F0F;
  clip-path: polygon(23px 0, 100% 0, 100% calc(100% - 23px),
                     calc(100% - 23px) 100%, 0 100%, 0 23px);
}
.svc-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.07);
  clip-path: inset(0 0 0 100%);
  transition: opacity .45s cubic-bezier(0,0,.3,1),
              transform 1s cubic-bezier(.16,1,.3,1),
              clip-path .75s cubic-bezier(.16,1,.3,1);
}
.svc-img.is-on  { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
.svc-img.is-out { opacity: 0; transform: scale(1.03); clip-path: inset(0 0 0 0); transition: opacity .5s cubic-bezier(.7,0,1,1); }
.svc-img.is-drag { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition: none; z-index: 2; }

.svc-marks { position: absolute; inset: -10px; pointer-events: none; }
.svc-marks i { position: absolute; width: 15px; height: 15px; }
.svc-marks i::before, .svc-marks i::after { content: ''; position: absolute; background: rgba(26,26,26,.26); }
.svc-marks i::before { left: 0; top: 50%; width: 15px; height: 1px; }
.svc-marks i::after  { top: 0; left: 50%; width: 1px; height: 15px; }
.svc-marks i:nth-child(1), .svc-marks i:nth-child(4) { display: none; }
.svc-marks i:nth-child(2) { top: -7px; right: -7px; }
.svc-marks i:nth-child(3) { bottom: -7px; left: -7px; }

.svc-rule {
  position: absolute;
  left: 1px; right: 1px; top: 1px;
  height: 11px;
  z-index: 3;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.16);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 12px);
  background-size: 100% 11px, 100% 6px;
  background-repeat: repeat-x;
}

/* auto-fit perquè les pàgines amb poques fotos (4-8) no deixin les
   miniatures apinyades a l'esquerra amb un buit a la dreta */
.svc-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 7px;
  margin-top: 11px;
}
.svc-thumb {
  --ch: 6px;
  position: relative;
  height: 46px;
  padding: 0;
  border: none;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: .4;
  filter: grayscale(.7);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  transition: opacity .3s ease, filter .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.svc-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--red) 0 9px, transparent 9px),
    linear-gradient(315deg, var(--red) 0 9px, transparent 9px);
  opacity: 0;
  transition: opacity .3s ease;
}
.svc-thumb:hover { opacity: .82; filter: grayscale(.2); transform: translateY(-2px); }
.svc-thumb.is-on { opacity: 1; filter: none; }
.svc-thumb.is-on::after { opacity: 1; }
.svc-thumb:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* La miniatura que s'està previsualitzant: escaires buides, no plenes,
   perquè es distingeixi de la que està realment seleccionada */
.svc-thumb.is-peek { opacity: 1; filter: none; transform: translateY(-3px); }
.svc-thumb.is-peek::after {
  opacity: 1;
  background:
    linear-gradient(135deg, var(--red) 0 2px, transparent 2px),
    linear-gradient(315deg, var(--red) 0 2px, transparent 2px);
}
/* Mentre es previsualitza, el peu de foto i el comptador s'apaguen una mica:
   avisen que allò que es veu encara no és la selecció */
.svc-gallery.is-preview .svc-caps,
.svc-gallery.is-preview .svc-count { opacity: .42; }
.svc-gallery .svc-caps,
.svc-gallery .svc-count { transition: opacity .3s ease; }

.svc-nav { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
/* Compte enrere del pas automàtic */
.svc-prog {
  flex: 1;
  height: 2px;
  background: var(--gray-line);
  overflow: hidden;
}
.svc-prog i { display: block; height: 100%; width: 0; background: var(--red); }
.svc-btn {
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--gray-line);
  color: var(--gray-steel);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.svc-btn:hover { background: var(--red); border-color: var(--red); color: #FFF; transform: translateY(-2px); }
.svc-count {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--gray-light);
}
.svc-count b { color: var(--red); font-weight: 800; }
.svc-caps { margin-top: 10px; min-height: 34px; }
.svc-caps .carousel-caption { display: none; margin-top: 0; }
.svc-caps .carousel-caption.is-on { display: block; }

/* ---- Dades tècniques ----
   Plafó propi, gris, xamfrà a dalt i a baix — es distingeix del relat pel
   color, com abans. El que l'integra ara no és compartir fons, sinó quedar-se
   exactament sota el text, amb la mateixa amplada i un marge curt, en lloc
   d'estirar-se a tota l'amplada de la secció com una banda apart. */
.svc-data {
  --ch: 26px;
  grid-column: 1;
  grid-row: 2;
  margin-top: 34px;
  padding: 34px 44px 42px;
  background: var(--gray-bg);
  position: relative;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.svc-data::before {
  content: '';
  position: absolute;
  left: var(--ch); top: 0;
  width: 150px; height: 3px;
  background: var(--red);
}
.svc-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.svc-data .dim-block {
  display: block;
}
/* El bloc de dimensions passa de caixa grisa a cotes de plànol */
.svc-data .dim-block {
  background: none;
  border-left: none;
  padding: 0;
  margin-bottom: 0;
}
.svc-data .dim-block h3,
.svc-data .materials-block h3 {
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--red);
  margin-bottom: 26px;
}
.svc-data .dim-row {
  display: block;
  padding: 0 0 30px;
  border-bottom: none;
}
.svc-data .dim-label {
  width: auto;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gray-steel);
  margin-bottom: 14px;
}
.dim-bar { position: relative; height: 12px; margin: 0 2px 12px; }
.dim-bar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 1px;
  background: var(--gray-steel);
  opacity: .5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.16,1,.3,1) .1s;
}
.rv-in .dim-bar::before, .dim-block.rv-in .dim-bar::before { transform: scaleX(1); }
.dim-tick { position: absolute; top: 0; width: 1px; height: 12px; background: var(--gray-steel); opacity: .5; }
.dim-tick:first-child { left: 0; }
.dim-tick:last-child  { right: 0; }
.dim-tick::after {
  content: '';
  position: absolute;
  top: 1px;
  border: 5px solid transparent;
}
.dim-tick:first-child::after { left: 1px; border-right-color: var(--gray-steel); opacity: .55; }
.dim-tick:last-child::after  { right: 1px; border-left-color: var(--gray-steel); opacity: .55; }
/* Valor normal: una frase (Rectificat, Reparació...). Cota real (Mecanitzat,
   Equilibrat): number curt, centrat sota les marques com en un plànol —
   motion.js hi afegeix .is-measure només quan injecta la barra de cota. */
.svc-data .dim-val {
  font-size: 15px;
  line-height: 1.55;
  color: var(--gray-steel);
}
.svc-data .dim-row.is-measure .dim-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gray-dark);
  text-align: center;
}
.svc-data .material-tag { background: none; color: var(--gray-dark); border: 1px solid var(--gray-line); }
/* Capacitats en llista (ul li), quan la pàgina no fa servir etiquetes */
.svc-data .materials-block ul { gap: 0; }
.svc-data .materials-block ul li { font-size: 14px; padding: 9px 0 9px 18px; }
/* Distintiu de certificació: si es mou dins el plafó gris, el requadre clar
   ha de contrastar-hi (abans es confonia amb el mateix fons) */
.svc-data .cert-row .cert-note { background: var(--white) !important; }

@media (max-width: 900px) {
  .page-hero { padding: 54px 0 46px !important; }
  .svc-main { padding: 52px 1.5rem 48px !important; }
  /* En una sola columna: relat, imatges i, per últim, el plafó de dades */
  .svc-grid { grid-template-columns: 1fr; gap: 0; }
  .svc-txt     { grid-column: 1; grid-row: 1; }
  .svc-gallery { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .svc-data    { grid-column: 1; grid-row: 3; padding: 30px 26px 34px; }
  .svc-data-grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .svc-thumbs { grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); }
  .svc-thumb { height: 38px; }
  .svc-txt .desc-intro { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-img { transition: opacity .3s ease; transform: none; clip-path: none; }
  .dim-bar::before { transform: scaleX(1); transition: none; }
}

/* ---- ÍNDEX LATERAL ----
   Marge numerat que recorre tota la pàgina, com el d'un plànol: fa que les
   seccions es llegeixin com un sol document i no com sis blocs apilats. */
/* És un <nav>, així que hereta els estils de la barra de navegació del lloc:
   fons blanc, vora vermella i ombra. Cal desfer-ho tot. */
.pg-index {
  background: none;
  border: none;
  box-shadow: none;
  height: auto;
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: rgba(26,26,26,.45);
  transition: color .5s ease;
}
.pg-index.on-dark { color: rgba(255,255,255,.42); }
.pg-index a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
}
.pg-index i {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  width: 15px;
  transition: color .3s ease;
}
.pg-index b {
  display: block;
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transition: width .4s cubic-bezier(.16,1,.3,1), background .3s ease, opacity .3s ease;
}
/* Fora del flux: si l'etiqueta ocupés espai, l'índex faria 114 px i envairia
   la columna de contingut en pantalles de 1.280-1.440 */
.pg-index span {
  position: absolute;
  left: 34px;
  top: 50%;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
/* Les etiquetes només surten en passar per sobre de l'índex: en repòs ocupa
   30 px i no envaeix el contingut ni en pantalles de 1.280 */
.pg-index:hover span { opacity: .75; transform: translateY(-50%); }
.pg-index a.is-on i { color: var(--red); }
.pg-index a.is-on b { width: 26px; background: var(--red); opacity: 1; }
.pg-index a:hover b { opacity: .9; }
.pg-index a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

@media (max-width: 1279px) { .pg-index { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pg-index, .pg-index b, .pg-index span, .pg-index i { transition: none; }
}

/* ---- BARRA DE PROGRÉS DE SCROLL ---- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--red);
  z-index: 1500;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ---- NAV COMPACTA EN SCROLL ---- */
nav, .nav-inner, .nav-links a, .logo-mark, .logo-main {
  transition: height 0.3s cubic-bezier(.16,1,.3,1),
              line-height 0.3s cubic-bezier(.16,1,.3,1),
              width 0.3s cubic-bezier(.16,1,.3,1),
              font-size 0.3s cubic-bezier(.16,1,.3,1),
              box-shadow 0.3s ease;
}
body.is-scrolled .nav-inner   { height: 56px; }
body.is-scrolled .nav-links a { height: 56px; line-height: 56px; }
body.is-scrolled .logo-mark   { width: 34px; height: 34px; }
body.is-scrolled .logo-mark svg { width: 21px; height: 21px; }
body.is-scrolled .logo-main   { font-size: 19px; }
body.is-scrolled nav          { box-shadow: 0 4px 28px rgba(0,0,0,0.14); }

/* ---- SISTEMA DE REVELAT ---- */
.rv {
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(.16,1,.3,1),
              transform 0.85s cubic-bezier(.16,1,.3,1),
              clip-path 1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.rv-up    { transform: translateY(36px); }
.rv-left  { transform: translateX(-30px); }
.rv-right { transform: translateX(30px); }
.rv-zoom  { transform: scale(.94); }
.rv-tilt  { transform: translateY(40px) rotateX(9deg); }
.rv.rv-in { opacity: 1; transform: none; }

/* Revelat per línies (títols) */
/* El padding compensa que els títols tenen line-height < 1: sense ell,
   overflow:hidden retallaria les majúscules accentuades. */
.rv-ln   { display: block; overflow: hidden; padding: 0.22em 0; margin: -0.22em 0; }
.rv-ln-i {
  display: block;
  transform: translateY(145%);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
}
.rv-lines.rv-in .rv-ln-i { transform: none; }
.rv-lines .rv-ln:nth-child(2) .rv-ln-i { transition-delay: calc(var(--d, 0s) + .1s); }
.rv-lines .rv-ln:nth-child(3) .rv-ln-i { transition-delay: calc(var(--d, 0s) + .2s); }

/* La ratlleta del section-tag creix */
.section-tag::before { width: 0; transition: width .7s cubic-bezier(.16,1,.3,1) .25s; }
.section-tag.rv-in::before { width: 24px; }

/* ---- HERO ---- */
.hero-badge, .hero-title, .hero-desc, .hero-actions { animation: none !important; }

.hero-badge::before { animation: pulseDot 2.4s ease-in-out infinite; }
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,53,64,.55); }
  60%      { box-shadow: 0 0 0 7px rgba(229,53,64,0); }
}

.hero-content { will-change: transform, opacity; }

.btn-primary, .btn-secondary {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s;
}
.btn-primary::before, .btn-secondary::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transition: left .65s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover::before, .btn-secondary:hover::before { left: 130%; }

.stat { transition: background .3s; }
.stat:hover { background: rgba(255,255,255,.05); }
.stat-num { display: inline-block; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.stat:hover .stat-num { transform: translateY(-3px); }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  animation: heroScrollIn .8s 1.1s ease forwards;
}
.hero-scroll span {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.hero-scroll i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,.45), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll i::after {
  content: '';
  position: absolute;
  top: -42px; left: 0;
  width: 1px; height: 42px;
  background: var(--red-light);
  animation: scrollTrail 2.1s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes heroScrollIn { to { opacity: 1; } }
@keyframes scrollTrail  { 0% { top: -42px; } 60%, 100% { top: 42px; } }

/* ---- EMPRESA EN DOS MOMENTS ----
   Abans era un sol bloc de 1.804 px, una quarta part de tota la pàgina.
   Ara: la història amb la foto sortint per la vora dreta, i després la
   cronologia i els valors a tota amplada. */
/* Títol i text en dues columnes: baixa molt l'alçada i llegeix com a editorial */
.emp-head {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: start;
  padding-top: 62px !important;
  padding-bottom: 34px !important;
}
.emp-head-r .section-body { max-width: none; }

/* Banda panoràmica a tota amplada. La imatge fa 1500×537 (ratio 2,79):
   en mitja columna se n'havia de retallar més de la meitat. */
.emp-band { position: relative; width: 100%; }
#empresa .empresa-visual { position: relative; }
#empresa .empresa-img-main {
  width: 100%;
  aspect-ratio: 1500 / 537;
  max-height: 360px;
  background: var(--gray-dark);
  overflow: hidden;
}
#empresa .empresa-img-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* La caixa dels anys penja per sota de la banda i creua cap al bloc següent */
#empresa .empresa-accent-box {
  position: absolute;
  left: max(2rem, calc((100% - 1200px) / 2));
  bottom: -30px;
  right: auto;
  z-index: 2;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}

.emp-more { padding-top: 58px !important; padding-bottom: 66px !important; }

/* Cronologia horitzontal */
.tl-h {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  position: relative;
  padding-top: 42px;
  border-top: 2px solid var(--gray-line);
}
.tl-h .tl-line {
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(to right, var(--red) 0%, var(--gray-line) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(.16,1,.3,1) .15s;
}
.tl-h.rv-in .tl-line { transform: scaleX(1); }
.tl-h .tl-item { position: relative; }
.tl-h .tl-dot {
  position: absolute;
  left: 0; top: -50px;
  width: 14px; height: 14px;
  background: var(--red);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--red);
  border-radius: 50%;
}
.tl-h .tl-dot.is-grey { background: var(--gray-steel); box-shadow: 0 0 0 2px var(--gray-steel); }
.tl-year {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--red);
}
.tl-year.is-grey { color: var(--gray-steel); }
.tl-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-dark);
  margin: 6px 0 5px;
}
.tl-desc { font-size: 14px; color: var(--gray-light); line-height: 1.55; }

/* Valors en fila de quatre */
.emp-more .valores-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2.1rem; }

@media (max-width: 900px) {
  .emp-head { grid-template-columns: 1fr; gap: 22px; padding-top: 58px !important; padding-bottom: 32px !important; }
  #empresa .empresa-img-main { max-height: 240px; }
  #empresa .empresa-accent-box { left: auto; right: 1.5rem; bottom: -20px; }
  .emp-more { padding-top: 62px !important; padding-bottom: 62px !important; }
  .tl-h { grid-template-columns: 1fr; gap: 34px; padding-top: 34px; }
  .tl-h .tl-dot { top: -42px; }
  .emp-more .valores-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .emp-more .valores-grid { grid-template-columns: 1fr; }
}

/* ---- EMPRESA: PUNTS DE LA CRONOLOGIA ---- */
.tl-dot {
  transform: scale(0);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1);
  transition-delay: var(--d, 0s);
}
.tl.rv-in .tl-dot { transform: scale(1); }

/* ---- EMPRESA: IMATGE I CAIXA ---- */
/* El revelat s'observa a .empresa-visual: un element amb clip-path a zero
   mai no compta com a visible per a l'IntersectionObserver. */
.empresa-visual .empresa-img-main {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(.16,1,.3,1);
}
.empresa-visual.rv-in .empresa-img-main { clip-path: inset(0 0 0 0); }
.empresa-visual .empresa-img-main img {
  transform: scale(1.16);
  transition: transform 1.6s cubic-bezier(.16,1,.3,1);
}
.empresa-visual.rv-in .empresa-img-main img { transform: scale(1); }

.empresa-visual .empresa-accent-box {
  opacity: 0;
  transform: scale(.7) translateY(14px);
  transition: opacity .5s ease .55s, transform .7s cubic-bezier(.34,1.56,.64,1) .55s;
}
.empresa-visual.rv-in .empresa-accent-box { opacity: 1; transform: none; }

.valor { transition: background .25s, transform .35s cubic-bezier(.16,1,.3,1); }
.valor:hover { background: #FAF9F7; transform: translateX(4px); }
.valor-icon { transition: background .25s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.valor:hover .valor-icon { background: rgba(192,32,42,.09); transform: rotate(-8deg) scale(1.08); }

/* ---- SERVEIS: PESTANYES + PANELL CENTRAL + FONS TEMÀTIC ---- */
/* overflow visible perquè el panell pugui sobresortir cap a Sectors;
   qui retalla el dibuix de fons és la seva pròpia capa, no la secció */
#serveis { position: relative; z-index: 2; }
#serveis .section-inner { position: relative; z-index: 1; }

.serveis-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* El panell central ja és opac, així que el vel només ha de protegir el bloc
   de títol i pestanyes (a dalt a l'esquerra). La resta del dibuix es veu. */
.serveis-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 54% 42% at 24% 22%, rgba(26,26,26,.96) 0%, rgba(26,26,26,.52) 50%, rgba(26,26,26,0) 78%),
    radial-gradient(ellipse 64% 30% at 50% 104%, rgba(26,26,26,.72) 0%, rgba(26,26,26,0) 72%);
}
.serveis-bg .sbg svg .ink   { stroke: #FFFFFF; opacity: .155; }
.serveis-bg .sbg svg .ink-2 { stroke: #FFFFFF; opacity: .085; }
.serveis-bg .sbg svg .acc   { stroke: var(--red-light); opacity: .38; }
.serveis-bg:not(.is-live) * { animation-play-state: paused !important; }

.sbg .an-needle { animation: sbgNeedle 2.9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sbgNeedle { 0%, 100% { transform: rotate(-17deg); } 50% { transform: rotate(17deg); } }

/* Pestanyes */
.srv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2.75rem;
}
.srv-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.62);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.srv-tab i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.28);
  transition: color .25s;
}
.srv-tab:hover { color: #FFF; border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.srv-tab:focus-visible { outline: 2px solid var(--red-light); outline-offset: 3px; }
.srv-tab.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #FFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(192,32,42,.28);
}
.srv-tab.is-on i { color: rgba(255,255,255,.65); }

/* Escenari i panell */
.srv { position: relative; }
.srv-stage {
  position: relative;
  margin-top: 24px;
  min-height: 430px;
  perspective: 1800px;
}
.servei-card.srv-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  padding: 0;
  background: var(--gray-mid);
  border: 1px solid rgba(255,255,255,.09);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* En sortir es plega cap a una línia central; en entrar apareix ja obert,
     perquè qui fa el desplegament visible és el rectangle .srv-ghost. */
  clip-path: inset(50% 0 50% 0);
  transition: opacity .28s ease, clip-path .3s cubic-bezier(.6,0,.35,1), visibility 0s .3s;
}
.servei-card.srv-panel.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  /* La llum a la vora superior i l'ombra fan que la planxa reposi sobre el fons
     en comptes de semblar un forat retallat a la secció. */
  border-top-color: rgba(255,255,255,.16);
  box-shadow: 0 26px 64px rgba(0,0,0,.45);
  transition: opacity .14s ease, clip-path 0s, visibility 0s;
}
.srv-panel::after { transform: scaleX(1); }

/* Rectangle que viatja des de la pestanya i es desplega */
.srv-ghost {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  background: var(--red);
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.srv-ghost.is-settling { border-top-color: rgba(255,255,255,.16); }
.srv-ghost::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--red);
}
.srv-ghost span {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #FFF;
  white-space: nowrap;
  transition: opacity .18s ease;
}

/* Entrada escalonada del contingut, un cop el rectangle ja és obert.
   Revelat per màscara, igual que els títols de secció (.rv-ln), però fet amb
   mask-position perquè no calgui embolcallar res: així setLang() pot continuar
   reescrivint l'innerHTML dels [data-i18n] sense trencar l'efecte. */
.srv-anim .srv-panel .srv-panel-txt > * {
  opacity: 0;
  transform: translateY(16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
          mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.srv-anim .srv-panel .srv-panel-img { opacity: 0; }
.srv-anim .srv-panel.is-in .srv-panel-txt > * {
  animation: srvItemIn .6s cubic-bezier(.16,1,.3,1) forwards;
}
.srv-anim .srv-panel.is-in .srv-panel-txt > *:nth-child(1) { animation-delay: .02s; }
.srv-anim .srv-panel.is-in .srv-panel-txt > *:nth-child(2) { animation-delay: .07s; }
.srv-anim .srv-panel.is-in .srv-panel-txt > *:nth-child(3) { animation-delay: .12s; }
.srv-anim .srv-panel.is-in .srv-panel-txt > *:nth-child(4) { animation-delay: .17s; }
.srv-anim .srv-panel.is-in .srv-panel-txt > *:nth-child(5) { animation-delay: .22s; }
.srv-anim .srv-panel.is-in .srv-panel-img {
  animation: srvImgIn .85s cubic-bezier(.16,1,.3,1) .04s forwards;
}
@keyframes srvItemIn {
  to {
    opacity: 1;
    transform: none;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
@keyframes srvImgIn {
  from { opacity: 0; clip-path: inset(0 0 0 32%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.srv-panel-txt {
  position: relative;
  z-index: 2;
  padding: 46px 46px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.srv-panel .servei-num { font-size: 14px; margin-bottom: 18px; }
.srv-panel h3 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 16px; }
.srv-panel p  { font-size: 16px; max-width: 480px; }
.srv-more {
  align-self: flex-start;
  margin-top: 28px;
  padding-bottom: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-light);
  border-bottom: 2px solid rgba(229,53,64,.35);
  transition: color .25s, border-color .25s, letter-spacing .25s;
}
.srv-panel:hover .srv-more { color: #FFF; border-color: #FFF; letter-spacing: .14em; }

.srv-panel-img { order: 2; position: relative; overflow: hidden; }
.srv-panel-img .card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1 !important;
  transform: scale(1.04);
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .35s ease !important;
}
/* Anul·la la regla de la reixa antiga que abaixava la foto al 32% en hover */
.srv-panel:hover .srv-panel-img .card-bg { opacity: 1 !important; transform: scale(1.11); }
.srv-panel-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gray-mid) 0%, rgba(46,46,46,.42) 30%, rgba(46,46,46,0) 62%);
}
.srv-panel .servei-ghost { right: auto; left: 26px; bottom: -32px; }

@media (max-width: 900px) {
  .srv-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .srv-tabs::-webkit-scrollbar { display: none; }
  .srv-tab { flex: 0 0 auto; }
  .srv-stage { min-height: 486px; }
  .servei-card.srv-panel { grid-template-columns: 1fr; grid-template-rows: 186px 1fr; }
  .srv-panel-img { order: 0; }
  .srv-panel-img::after { background: linear-gradient(180deg, rgba(46,46,46,0) 42%, var(--gray-mid) 100%); }
  .srv-panel-txt { padding: 26px 24px 30px; }
  .srv-panel .servei-ghost { left: 14px; bottom: -26px; }
}
@media (max-width: 600px) {
  .srv-stage { min-height: 528px; }
  .srv-panel p { font-size: 15px; }
}

/* ---- SERVEIS: INCLINACIÓ 3D ---- */
.servei-card {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .25s;
  will-change: transform;
}
.servei-card.is-tilting { transition: transform .12s ease-out, background .25s; }
.servei-card:hover { z-index: 4; }
.servei-card .card-bg {
  transition: opacity .35s ease, transform .8s cubic-bezier(.16,1,.3,1) !important;
}
.servei-card:hover .card-bg { transform: scale(1.1); }

.servei-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  background: radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),
              rgba(255,255,255,.13), rgba(255,255,255,0) 62%);
}
.servei-card:hover .servei-glare { opacity: 1; }

.servei-ghost {
  position: absolute;
  right: 4px;
  bottom: -34px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 132px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,.035);
  pointer-events: none;
  transition: color .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.servei-card:hover .servei-ghost {
  color: rgba(192,32,42,.20);
  transform: translateY(-10px) translateX(-6px);
}

.servei-icon { transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s; }
.servei-card:hover .servei-icon { transform: rotate(-7deg) scale(1.1); background: rgba(192,32,42,.22); }
.servei-card h3 { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.servei-card:hover h3 { transform: translateX(5px); }

/* ---- SECTORS: FONS ANIMAT PER SECTOR ---- */
#sectors { position: relative; z-index: 1; }
#sectors .section-inner { position: relative; z-index: 1; }

.sectors-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Vel central perquè les targetes blanques sempre quedin llegibles */
.sectors-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 46% at 50% 58%,
              var(--gray-bg) 0%, rgba(244,243,241,.74) 42%, rgba(244,243,241,0) 74%);
}
.sbg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
}
.sbg.is-on { opacity: 1; transform: scale(1); }

.sbg-svg { width: 100%; height: 100%; display: block; }
.sbg svg .ink   { fill: none; stroke: #1A1A1A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .17; }
.sbg svg .ink-2 { fill: none; stroke: #1A1A1A; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .095; }
.sbg svg .acc   { fill: none; stroke: var(--red);  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .34; }

/* Animacions dels fons */
.sbg svg [class*="an-"] { transform-box: fill-box; transform-origin: 50% 50%; }
.sbg .an-spin    { animation: sbgSpin 34s linear infinite; }
.sbg .an-spinf   { animation: sbgSpin 17s linear infinite; }
.sbg .an-spinr   { animation: sbgSpin 26s linear infinite reverse; }
.sbg .an-drift   { animation: sbgDrift 6s linear infinite; }
.sbg .an-driftS  { animation: sbgDriftY 7s linear infinite; }
.sbg .an-flow    { animation: sbgFlow 2.6s linear infinite; }
.sbg .an-bob     { animation: sbgBob 2.4s ease-in-out infinite; }
.sbg .an-bob2    { animation: sbgBob 2.4s ease-in-out infinite -.8s; }
.sbg .an-bob3    { animation: sbgBob 2.4s ease-in-out infinite -1.6s; }
.sbg .an-fall    { animation: sbgFall 4.2s linear infinite; }
.sbg .an-fall2   { animation: sbgFall 4.2s linear infinite -1.4s; }
.sbg .an-fall3   { animation: sbgFall 4.2s linear infinite -2.8s; }
.sbg .an-pulse   { animation: sbgPulse 3.2s ease-in-out infinite; }
.sbg .an-shuttle { animation: sbgShuttle 5s ease-in-out infinite; }
.sbg .an-slide   { animation: sbgSlide 3.6s ease-in-out infinite; }

@keyframes sbgSpin    { to { transform: rotate(360deg); } }
@keyframes sbgDrift   { to { transform: translateX(60px); } }
@keyframes sbgDriftY  { to { transform: translateY(90px); } }
@keyframes sbgFlow    { to { stroke-dashoffset: -60; } }
@keyframes sbgBob     { 0%, 100% { transform: translateY(-24px); } 50% { transform: translateY(24px); } }
@keyframes sbgFall    { 0% { transform: translateY(-40px); opacity: 0; } 18%, 78% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
@keyframes sbgPulse   { 0%, 100% { opacity: .10; } 50% { opacity: .34; } }
@keyframes sbgShuttle { 0%, 100% { transform: translateX(-230px); } 50% { transform: translateX(230px); } }
@keyframes sbgSlide   { 0%, 100% { transform: translateX(-46px); } 50% { transform: translateX(0); } }

/* Només s'anima el fons visible, i només si la secció és a pantalla */
.sbg * { animation-play-state: paused; }
.sbg.is-on * { animation-play-state: running; }

/* ---- FONS v2: tres plans, traçat progressiu i llenguatge de plànol ---- */
.sbg-v2 .pl { will-change: transform; }

/* El plànol es construeix traç a traç: cada línia té el seu propi retard (--dd),
   repartit al llarg de ~3,2 s en l'ordre en què està escrit el dibuix. */
.sbg-v2 .dw { stroke-dasharray: var(--l, 900px); stroke-dashoffset: var(--l, 900px); }
.sbg-v2.is-on .dw,
.sbg-v2.is-fading .dw {
  animation: sbgDraw .5s cubic-bezier(.4,0,.25,1) forwards;
  animation-delay: var(--dd, 0s);
}
@keyframes sbgDraw { to { stroke-dashoffset: 0; } }

/* Traç més suau que la resta de sectors: el dibuix és molt més dens */
.sbg-v2 svg .ink   { opacity: .105; }
.sbg-v2 svg .ink-2 { opacity: .058; }
.sbg-v2 svg .acc   { opacity: .22; }

/* Ratllat de secció, eixos, cotes i textos: apareixen un cop dibuixat */
.sbg-v2 svg .hx { stroke: none; opacity: 0; transition: opacity 1.4s ease .4s; }
.sbg-v2.is-on svg .hx, .sbg-v2.is-fading svg .hx { opacity: 1; }
.sbg-v2 svg .ax { stroke-dasharray: 26 7 4 7; opacity: 0; transition: opacity .8s ease; }
.sbg-v2.is-drawn svg .ax { opacity: .065; }
.sbg-v2 svg .ar { fill: #1A1A1A; stroke: none; opacity: 0; transition: opacity .7s ease; }
.sbg-v2.is-drawn svg .ar { opacity: .095; }
.sbg-v2 svg .tx {
  fill: #1A1A1A;
  stroke: none;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity .8s ease .1s;
}
.sbg-v2.is-drawn svg .tx { opacity: .20; }
.sbg-v2 svg .tx-s { font-size: 13px; letter-spacing: .1em; }

/* El moviment continu arrenca a mig traçat, no cal esperar que acabi del tot */
.sbg-v2:not(.is-moving) [class*="an-"] { animation-play-state: paused; }
.sbg-v2.is-moving [class*="an-"] { animation-play-state: running; }

.sectors-bg:not(.is-live) *,
.sectors-bg:not(.is-live) .sbg-v2 [class*="an-"] { animation-play-state: paused !important; }

/* ---- SECTORS: MODAL ENRIQUIT ----
   S'activa amb .is-rich, que motion.js només posa als sectors de la llista.
   La resta de sectors conserven el modal tal com estava. */
.modal-overlay.is-rich {
  background: rgba(26,26,26,.44);
  -webkit-backdrop-filter: blur(7px) saturate(.88);
          backdrop-filter: blur(7px) saturate(.88);
}
.modal-overlay.is-rich .modal-box {
  /* Més ample = columnes més amples = menys línies partides = menys alçada */
  max-width: min(1080px, 92vw);
  max-height: 88vh;
  box-shadow: 0 44px 96px rgba(0,0,0,.34);
  animation: none;
  will-change: clip-path, opacity;
}
.modal-overlay.is-rich .modal-box:focus { outline: none; }

/* Capçalera amb el plànol del sector */
.modal-overlay.is-rich .modal-header { position: relative; overflow: hidden; padding: 24px 32px 22px; }
.modal-overlay.is-rich .modal-cta { margin-top: 18px; padding-top: 16px; }
.modal-overlay.is-rich .modal-header-left,
.modal-overlay.is-rich .modal-close { position: relative; z-index: 1; }
.mdl-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease .1s;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.35) 46%, transparent 74%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.35) 46%, transparent 74%);
}
.modal-overlay.is-rich.is-in .mdl-art { opacity: 1; }
.mdl-art svg .ink   { fill: none; stroke: #FFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .17; }
.mdl-art svg .ink-2 { fill: none; stroke: #FFF; stroke-width: 1.3; stroke-linecap: round; opacity: .09; }
.mdl-art svg .acc   { fill: none; stroke: var(--red-light); stroke-width: 2.4; opacity: .42; }
.mdl-art svg .tx,
.mdl-art svg .ar,
.mdl-art svg .ax,
.mdl-art svg .hx    { display: none; }

/* Llista numerada, a dues columnes, amb entrada escalonada */
.modal-overlay.is-rich .modal-body { padding: 26px 32px 28px; counter-reset: mdl; }
.modal-overlay.is-rich .modal-body ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
}
.modal-overlay.is-rich .modal-body ul.few { grid-template-columns: 1fr; }
.modal-overlay.is-rich .modal-body ul.few + .modal-cta,
.modal-overlay.is-rich .modal-body ul.few { max-width: 640px; }
.modal-overlay.is-rich .modal-body ul li {
  counter-increment: mdl;
  padding: 11px 0 11px 50px;
  line-height: 1.55;
  border-bottom: 1px solid var(--gray-line);
  opacity: 0;
  transform: translateY(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
          mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 100% 200%;  mask-size: 100% 200%;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.modal-overlay.is-rich .modal-body ul li::before {
  content: counter(mdl, decimal-leading-zero);
  left: 0;
  top: 12px;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--red);
}
.modal-overlay.is-rich .modal-body ul li::after {
  content: '';
  position: absolute;
  left: 33px;
  top: 13px;
  bottom: 13px;
  width: 2px;
  background: var(--red);
  opacity: .3;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.modal-overlay.is-rich.is-in .modal-body ul li {
  animation: mdlItemIn .42s cubic-bezier(.16,1,.3,1) forwards;
}
.modal-overlay.is-rich.is-in .modal-body ul li::after { transform: scaleY(1); }
@keyframes mdlItemIn {
  to { opacity: 1; transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(1) { animation-delay: .04s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(2) { animation-delay: .07s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(3) { animation-delay: .10s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(4) { animation-delay: .13s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(5) { animation-delay: .16s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(6) { animation-delay: .19s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(n+7) { animation-delay: .22s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(1)::after,
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(2)::after { transition-delay: .06s; }
.modal-overlay.is-rich.is-in .modal-body ul li:nth-child(n+3)::after { transition-delay: .12s; }

/* Alguns sectors (farmacèutic, construcció) tenen paràgrafs en lloc de llista */
.modal-overlay.is-rich .modal-body > p {
  max-width: 68ch;
  opacity: 0;
  transform: translateY(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
          mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 100% 200%;  mask-size: 100% 200%;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.modal-overlay.is-rich.is-in .modal-body > p {
  animation: mdlItemIn .42s cubic-bezier(.16,1,.3,1) forwards;
}
.modal-overlay.is-rich.is-in .modal-body > p:nth-of-type(1)    { animation-delay: .04s; }
.modal-overlay.is-rich.is-in .modal-body > p:nth-of-type(2)    { animation-delay: .09s; }
.modal-overlay.is-rich.is-in .modal-body > p:nth-of-type(n+3)  { animation-delay: .14s; }

.modal-overlay.is-rich .modal-cta { opacity: 0; transition: opacity .4s ease .24s; }
.modal-overlay.is-rich.is-in .modal-cta { opacity: 1; }

/* Pantalles baixes (portàtils de 768 px amb la barra del navegador): versió
   compacta perquè els sectors amb més punts continuïn cabent sense scroll */
@media (min-width: 900px) and (max-height: 680px) {
  .modal-overlay.is-rich .modal-header { padding: 18px 30px 16px; }
  .modal-overlay.is-rich .modal-title  { font-size: 22px; }
  .modal-overlay.is-rich .modal-body   { padding: 20px 30px 22px; }
  .modal-overlay.is-rich .modal-body ul li {
    font-size: 14px;
    padding: 8px 0 8px 46px;
  }
  .modal-overlay.is-rich .modal-body ul li::before { top: 9px; }
  .modal-overlay.is-rich .modal-body ul li::after  { top: 10px; bottom: 10px; }
  .modal-overlay.is-rich .modal-cta { margin-top: 14px; padding-top: 12px; }
}

/* En mòbil, full que puja des de baix */
@media (max-width: 700px) {
  .modal-overlay.is-rich { align-items: flex-end; padding: 0; }
  .modal-overlay.is-rich .modal-box { max-height: 88vh; border-radius: 18px 18px 0 0; }
  .modal-overlay.is-rich .modal-header { border-radius: 18px 18px 0 0; padding: 26px 22px 24px; }
  .modal-overlay.is-rich .modal-body { padding: 24px 22px 26px; }
  .modal-overlay.is-rich .modal-body ul { grid-template-columns: 1fr; }
  .modal-overlay.is-rich .modal-box::before {
    content: '';
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.3);
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-rich .modal-body ul li,
  .modal-overlay.is-rich .modal-body > p {
    opacity: 1; transform: none; animation: none !important;
    -webkit-mask-image: none; mask-image: none;
  }
  .modal-overlay.is-rich .modal-body ul li::after { transform: scaleY(1); }
  .modal-overlay.is-rich .modal-cta { opacity: 1; }
}

/* ---- SECTORS: ÒRBITA ---- */
.orbit { position: relative; margin-top: 2.5rem; }
.orbit-frame { position: relative; }
.orbit-stage:focus { outline: none; }

.orbit-stage {
  position: relative;
  height: 370px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.orbit-stage.is-dragging { cursor: grabbing; }

.orbit-dial {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}
.orbit-dial ellipse {
  fill: none;
  stroke: rgba(192,32,42,.22);
  stroke-width: 1;
  stroke-dasharray: 6 10;
  animation: dialFlow 26s linear infinite;
}
.orbit-dial .dial-inner {
  stroke: rgba(26,26,26,.09);
  stroke-dasharray: 2 7;
  animation: dialFlow 40s linear infinite reverse;
}
@keyframes dialFlow { to { stroke-dashoffset: -320; } }

.orb-card {
  position: absolute;
  left: 50%; top: 50%;
  width: 232px;
  min-height: 208px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-line);
  padding: 24px 18px 20px;
  text-align: center;
  font-family: var(--font-body);
  cursor: pointer;
  will-change: transform, opacity;
  transform-origin: center center;
  transition: border-color .35s ease, box-shadow .45s ease;
}
.orb-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.orb-card h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 6px;
  line-height: 1.15;
}
.orb-card p {
  font-size: 13px;
  color: var(--gray-light);
  line-height: 1.5;
  transition: opacity .4s ease;
}
.orb-more {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease .1s, transform .4s cubic-bezier(.16,1,.3,1) .1s;
}
.orb-card.is-front {
  border-color: var(--red);
  box-shadow: 0 22px 60px rgba(192,32,42,.16), 0 4px 14px rgba(0,0,0,.06);
}
.orb-card.is-front .orb-more { opacity: 1; transform: none; }
.orb-card:not(.is-front) p { opacity: .55; }
.orb-card .sector-icon-wrap { flex-shrink: 0; transition: background .3s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.orb-card.is-front .sector-icon-wrap { background: rgba(192,32,42,.08); }
.orb-card.is-front .sector-icon-wrap svg { stroke: var(--red); }
.orb-card.is-front:hover .sector-icon-wrap { transform: rotate(-8deg) scale(1.06); }

.orbit-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  width: 48px; height: 48px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  color: var(--gray-steel);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}
.orbit-arrow:hover { background: var(--red); border-color: var(--red); color: var(--white); transform: translateY(-50%) scale(1.08); }
.orbit-arrow-prev { left: 0; }
.orbit-arrow-next { right: 0; }

.orbit-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}
.orbit-dots { display: flex; gap: 7px; }
.orbit-dot {
  width: 7px; height: 7px;
  border: none;
  padding: 0;
  background: var(--gray-line);
  cursor: pointer;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.orbit-dot:hover { background: var(--gray-light); }
.orbit-dot.active { background: var(--red); width: 26px; }
.orbit-count {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gray-light);
  min-width: 62px;
}
.orbit-count b { color: var(--red); font-weight: 800; }

/* ---- NOVETATS: FITXA DE MÀQUINA ----
   La imatge va emmarcada en 16:10 perquè totes quatre es redueixin en comptes
   d'ampliar-se: a tota amplada dues de les fotos s'estiraven i perdien nitidesa. */
#novetats { position: relative; overflow: hidden; }
.nov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 54px;
  align-items: center;
}

.nov-visual { position: relative; }
.nov-stage  { position: relative; }
/* Xamfrà a dues cantonades oposades: és l'aresta trencada d'una peça mecanitzada.
   Com que les vores no segueixen el retall, el contorn es fa a dues capes —
   el fons del marc és la línia i .nov-shift la tapa deixant-ne 1 px a la vista. */
.nov-frame {
  --ch: 24px;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255,255,255,.16);
  touch-action: pan-y;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.nov-frame:focus-visible { outline: 2px solid var(--red-light); outline-offset: 4px; }
.nov-frame::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0,0,0,.45);
}

.nov-shift {
  position: absolute;
  inset: 1px;
  background: #101010;
  clip-path: polygon(23px 0, 100% 0, 100% calc(100% - 23px),
                     calc(100% - 23px) 100%, 0 100%, 0 23px);
}

.nov-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.07);
  clip-path: inset(0 0 0 100%);
  /* Corbes complementàries: sense això, al mig de l'encreuament hi ha una
     caiguda de lluminositat i la transició es veu tèrbola. */
  transition: opacity .45s cubic-bezier(0,0,.3,1),
              transform 1s cubic-bezier(.16,1,.3,1),
              clip-path .75s cubic-bezier(.16,1,.3,1);
}
.nov-img.is-on  { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
.nov-img.is-out {
  opacity: 0; transform: scale(1.03); clip-path: inset(0 0 0 0);
  transition: opacity .5s cubic-bezier(.7,0,1,1);
}
.nov-img.is-drag { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition: none; z-index: 2; }

/* Marques de registre a les cantonades i escala mil·limetrada */
.nov-marks { position: absolute; inset: -10px; pointer-events: none; }
.nov-marks i { position: absolute; width: 15px; height: 15px; }
.nov-marks i::before,
.nov-marks i::after { content: ''; position: absolute; background: rgba(255,255,255,.30); }
.nov-marks i::before { left: 0; top: 50%; width: 15px; height: 1px; }
.nov-marks i::after  { top: 0; left: 50%; width: 1px; height: 15px; }
/* Només a les dues cantonades que queden rectes: una creu sobre un xamfrà
   queda estranya, i l'asimetria fa el conjunt més interessant */
.nov-marks i:nth-child(1),
.nov-marks i:nth-child(4) { display: none; }
.nov-marks i:nth-child(2) { top: -7px; right: -7px; }
.nov-marks i:nth-child(3) { bottom: -7px; left: -7px; }

.nov-rule {
  position: absolute;
  left: 1px; right: 1px; top: 1px;
  height: 11px;
  z-index: 3;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.18);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 12px);
  background-size: 100% 11px, 100% 6px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
}

/* Miniatures: es veu d'entrada quantes màquines noves hi ha */
.nov-thumbs { display: flex; gap: 10px; margin-top: 12px; }
/* Mateix xamfrà a escala petita: així es llegeix com un sistema i no com un adorn */
.nov-thumb {
  --ch: 8px;
  position: relative;
  flex: 1 1 0;
  height: 62px;
  padding: 0;
  border: none;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: .42;
  filter: grayscale(.7);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  transition: opacity .3s ease, filter .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
/* L'actiu es marca amb vermell al tall, no amb una vora: les vores no segueixen el retall */
.nov-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--red) 0 11px, transparent 11px),
    linear-gradient(315deg, var(--red) 0 11px, transparent 11px);
  opacity: 0;
  transition: opacity .3s ease;
}
.nov-thumb:hover { opacity: .8; filter: grayscale(.2); transform: translateY(-3px); }
.nov-thumb.is-on { opacity: 1; filter: none; }
.nov-thumb.is-on::after { opacity: 1; }
.nov-thumb:focus-visible { outline: 2px solid var(--red-light); outline-offset: 3px; }

/* Panell de text */
.nov-panel { position: relative; }
.nov-body  { position: relative; z-index: 2; }
.nov-plan {
  position: absolute;
  inset: -40px -60px -40px -30px;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 74% 70% at 60% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 74% 70% at 60% 50%, #000 30%, transparent 78%);
}
.nov-plan svg { width: 100%; height: 100%; display: block; }
.nov-plan svg .ink   { fill: none; stroke: #FFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .085; }
.nov-plan svg .ink-2 { fill: none; stroke: #FFF; stroke-width: 1.2; opacity: .05; }
.nov-plan svg .acc   { fill: none; stroke: var(--red-light); stroke-width: 2; opacity: .2; }
.nov-plan svg .tx, .nov-plan svg .ar, .nov-plan svg .ax, .nov-plan svg .hx { display: none; }

/* Odòmetre: només gira la xifra que canvia */
.nov-ghost {
  position: absolute;
  right: 4px;
  top: -46px;
  z-index: 1;
  display: flex;
  font-family: var(--font-display);
  font-size: 190px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.045);
  pointer-events: none;
}
.nov-dg { display: block; height: 1em; overflow: hidden; }
.nov-dg i { display: block; font-style: normal; height: 1em; }
.nov-dg.is-rolling { animation: novRollUp .55s cubic-bezier(.16,1,.3,1); }
@keyframes novRollUp { from { transform: translateY(0); } to { transform: translateY(-1em); } }

/* Mentre previsualitzes una miniatura, el text s'apaga: el que es veu al marc
   encara no és el que està seleccionat */
.nov-panel { transition: opacity .3s ease; }
.nov-panel.is-preview .nov-body { opacity: .42; }
.nov-body { transition: opacity .3s ease; }

.nov-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.nov-desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
  max-width: 46ch;
}
.nov-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
.nov-btn {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.72);
  font-size: 17px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.nov-btn:hover { background: var(--red); border-color: var(--red); color: #FFF; transform: translateY(-2px); }
.nov-count-txt {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.34);
  padding: 0 4px;
}
.nov-count-txt b { color: var(--red-light); font-weight: 800; }
.nov-bar { flex: 1; height: 2px; background: rgba(255,255,255,.10); overflow: hidden; }
.nov-bar-fill { height: 100%; width: 0%; background: var(--red); }

/* Entrada escalonada del text en canviar de màquina */
.nov-panel .rvx {
  opacity: 0;
  transform: translateY(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
          mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 100% 200%;  mask-size: 100% 200%;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.nov-panel.is-in .rvx { animation: novIn .6s cubic-bezier(.16,1,.3,1) forwards; }
.nov-panel.is-in .rvx:nth-child(1) { animation-delay: .02s; }
.nov-panel.is-in .rvx:nth-child(2) { animation-delay: .08s; }
.nov-panel.is-in .rvx:nth-child(3) { animation-delay: .14s; }
.nov-panel.is-in .rvx:nth-child(4) { animation-delay: .20s; }
@keyframes novIn {
  to { opacity: 1; transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@media (max-width: 900px) {
  .nov-grid { grid-template-columns: 1fr; gap: 30px; }
  .nov-ghost { font-size: 130px; top: -34px; }
  .nov-plan { inset: -20px -30px; }
  .nov-thumb { height: 52px; }
}
@media (max-width: 600px) {
  .nov-frame { aspect-ratio: 4 / 3; }
  .nov-desc { font-size: 15px; }
  .nov-ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nov-panel .rvx {
    opacity: 1; transform: none; animation: none !important;
    -webkit-mask-image: none; mask-image: none;
  }
  .nov-img { transition: opacity .3s ease; transform: none; clip-path: none; }
  .nov-img.is-on { transform: none; }
  .nov-dg.is-rolling { animation: none; }
}

/* ---- CONTACTE ---- */
.contact-item { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.contact-item:hover { transform: translateX(5px); }
.contact-item-icon { transition: background .25s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.contact-item:hover .contact-item-icon { background: rgba(192,32,42,.09); transform: rotate(-8deg) scale(1.07); }

.form-group { position: relative; }
.form-group input, .form-group select, .form-group textarea {
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(192,32,42,.10);
}
.form-submit { position: relative; overflow: hidden; transition: background .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.form-submit::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left .7s cubic-bezier(.16,1,.3,1);
}
.form-submit:hover::before { left: 140%; }
.form-submit:active { transform: scale(.985); }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .orbit-stage { height: 340px; }
  .orb-card { width: 180px; min-height: 190px; padding: 20px 14px 17px; }
  .hero-scroll { display: none; }
  body.is-scrolled .nav-inner { height: 68px; }
}
@media (max-width: 600px) {
  .orbit-stage { height: 310px; }
  .orb-card { width: 168px; min-height: 176px; padding: 18px 13px 15px; }
  .orb-card h4 { font-size: 15px; }
  .orb-card p { font-size: 12px; }
  .orb-card .sector-icon-wrap { width: 46px; height: 46px; margin-bottom: 12px; }
  .orbit-arrow { width: 40px; height: 40px; font-size: 16px; }
  .servei-ghost { font-size: 104px; }
}

/* ---- MOVIMENT REDUÏT ---- */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-ln-i, .empresa-img-main, .empresa-img-main img,
  .empresa-accent-box, .tl-line, .tl-dot {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  .orbit-dial ellipse,
  .hero-badge::before,
  .sbg *,
  .hero-scroll i::after { animation: none !important; }
  .sbg { transition: opacity .3s ease; transform: none; }
  .servei-card.srv-panel { transition: opacity .25s ease, visibility 0s .25s; clip-path: none; transform: none; }
  .servei-card.srv-panel.is-on { transition: opacity .25s ease, visibility 0s; }
  .srv-anim .srv-panel .srv-panel-txt > *,
  .srv-anim .srv-panel .srv-panel-img {
    opacity: 1; transform: none; animation: none !important;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-scroll { opacity: 1; animation: none; }
  #scroll-progress { display: none; }
}