/* ==========================================================================
   INNOVOFOOD · sections.css
   Una secció per bloc, en l'ordre del frame «Final» (376 px). Les
   distàncies verticals són les del frame; quan no coincideixen amb cap
   token es deixen en rem amb el valor en px al comentari.
   Les peces decoratives (corbes, bombolles) es posicionen en px: són
   geometria del dibuix, no text, i no han de créixer amb la lletra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · NAVEGACIÓ · barra de vidre fixa de 48 px
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--nav-height);
  padding: var(--space-8) var(--space-16);
  background: var(--glass-navbar-bg);
  box-shadow: var(--glass-navbar-shadow);
  -webkit-backdrop-filter: blur(var(--glass-navbar-blur));
  backdrop-filter: blur(var(--glass-navbar-blur));
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--neutral-gray-900);
  --icon-tone: #7E7F79;                      /* meitat esquerra del cervell */
}

.site-nav__logo {
  font-family: var(--font-serif);
  font-size: var(--fs-logo);
  font-style: italic;
  line-height: var(--lh-logo);
  letter-spacing: var(--ls-logo);
}

/* Enllaços a la barra: només a escriptori (secció 14) */
.site-nav__links {
  display: none;
}

/* A la dreta: idiomes i menú */
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;                                 /* + 4 de padding de «EN» = 16 visibles */
}

/* La icona fa 24 px però l'àrea tàctil n'ha de fer 44: el marge negatiu
   l'eixampla sense moure la icona */
.site-nav__toggle {
  display: grid;
  place-items: center;
  inline-size: var(--tap-target);
  block-size: var(--tap-target);
  margin: -10px;
  color: var(--neutral-gray-900);
}

/* Idiomes: només tipografia. L'actiu, amb la tinta de la barra (la del
   logotip i la icona) i un subratllat porpra d'accent; l'altre, en el
   secundari. El porpra no serveix com a color de text: fa 4.0:1 sobre
   blanc i el text petit en demana 4.5. */
.lang-switch {
  display: flex;
}

.lang-switch__option {
  position: relative;
  min-block-size: var(--tap-target);
  margin-block: -6px;                        /* 44 de zona tàctil dins dels 32 útils de la barra */
  padding-inline: var(--space-4);            /* 8 visibles entre ES i EN */
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-label);
}

.lang-switch__option[aria-pressed='true'] {
  color: var(--neutral-gray-900);
}

.lang-switch__option[aria-pressed='true']::after {
  content: '';
  position: absolute;
  inset-inline: var(--space-4);
  inset-block-end: 9px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--accent-purple);
}

/* Menú obert (frame «Nav-abierto» d'Assets). Ocupa tota l'alçada de la
   pantalla (100lvh: també quan la barra del navegador s'amaga) per sota de
   la barra de navegació, que queda a sobre i activa. L'overlay NO passa per
   darrere del panell: el vidre del panell desenfoca la pàgina tal com és,
   no enfosquida, i es veu com al Figma.
     · fila 1 (48 px): barra de navegació (a sobre) | overlay als laterals
     · fila 2: overlay | panell | overlay   (laterals si l'ample > 430)
     · fila 3: overlay a tot l'ample
   La pàgina de sota es pot continuar desplaçant: l'overlay és fix i no
   intercepta el scroll. */
.site-menu {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100lvh;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--page-max)) 1fr;
  grid-template-rows: var(--nav-height) auto 1fr;
}

.site-menu[hidden] {
  display: none;
}

.site-menu::before,
.site-menu::after,
.site-menu__scrim {
  content: '';
  background: var(--scrim);
}

.site-menu::before { grid-area: 1 / 1 / 3 / 2; }
.site-menu::after { grid-area: 1 / 3 / 3 / 4; }
.site-menu__scrim { grid-area: 3 / 1 / 4 / 4; }

/* Panell: el Figma el pinta al 60 %; aquí és al 64 %, el mínim perquè el
   rosa (text gran, 3:1) es llegeixi encara que a sota hi hagi una secció
   blanca. Cantonades de baix de 6; les de dalt, rectes contra la barra. */
.site-menu__panel {
  grid-area: 2 / 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-56);                      /* posicions reals del frame (l'autolayout diu 72) */
  max-block-size: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  padding: var(--space-32) var(--gutter);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-block-start: 0;
  border-radius: 0 0 6px 6px;
  background: rgba(49, 49, 46, 0.64);
  -webkit-backdrop-filter: blur(75px);
  backdrop-filter: blur(75px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-menu__panel { background: rgba(49, 49, 46, 0.97); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-menu__panel { background: #31312E; }
}


.site-menu__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.site-menu__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

/* Separador: rosa clar al 72 % dins d'una capa al 20 %. Doble classe per
   guanyar al reset de llistes (ul[role=list] { padding: 0 }). */
.site-menu .site-menu__social {
  position: relative;
  padding-block-start: calc(var(--space-40) + 1px);
}

.site-menu__social::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: rgba(243, 235, 235, 0.144);
}

.site-menu__cta {
  inline-size: 100%;
}

/* Les seccions on porten els enllaços (barra, fletxes) queden just sota la
   barra, sense una franja de la secció anterior (scroll-padding-top ja
   deixa l'alçada de la barra + 16) */
main > section {
  scroll-margin-top: calc(var(--space-16) * -1);
}

/* --------------------------------------------------------------------------
   02 · HERO
   -------------------------------------------------------------------------- */
.hero__media {
  position: relative;
  aspect-ratio: 376 / 378;
  overflow: hidden;
  background: var(--neutral-gray-200);
}

/* El vídeo va damunt del pòster: fins que no pinta el primer fotograma
   és transparent i es veu la imatge de sota */
.hero__poster,
.hero__video,
.hero__poster img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24) var(--gutter) 0;
}

/* La fletxa de l'hero queda centrada entre el botó i el final de la
   secció: l'aire que hi havia sota el botó (16 + 56) es reparteix a parts
   iguals, 36 a dalt i 36 a baix. El 16 de dalt ja el posa el gap. */
.hero .scroll-cue {
  --cue-space: calc((var(--space-16) + var(--scroll-cue-after)) / 2);
  margin-block: calc(var(--cue-space) - var(--space-16)) var(--cue-space);
}

.hero__title {
  max-inline-size: 13.5625rem;               /* 217 */
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}

/* El de l'hero és Body/XSmall (2 %), no la variant en majúscules (6 %) */
.hero .eyebrow {
  letter-spacing: var(--ls-label);
}

/* --------------------------------------------------------------------------
   03 · EL RETO · fons fosc, capçalera, decoració i tres reptes
   -------------------------------------------------------------------------- */
.reto {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 100%;
  background: var(--grad-dark);
}

/* Espaiador quadrat (alt = ample = 376 unitats del frame) a la mateixa cel·la
   que la capçalera: la llista comença on acaba el més alt dels dos. Així
   queda sempre a la mateixa alçada relativa que la decoració, encara que
   el títol ocupi dues línies en pantalles estretes. */
.reto::before {
  content: '';
  grid-area: 1 / 1;
  aspect-ratio: 1;
}

/* Capçalera + decoració: a mòbil i tauleta no és cap caixa (els fills
   segueixen a la graella de .reto); a escriptori és la columna fixa */
.reto__intro {
  display: contents;
}

/* Coordenades del frame, relatives a la cantonada de la secció. La bola
   metàl·lica és just al centre de la bombolla gran. */
.reto__decor {
  --decor-h: 360;
  z-index: -1;
}

.reto__ball {
  --x: 285.63;
  --y: 283.53;
  --d: 21.68;
}

.reto__bubble--lg {
  --x: 255.68;
  --y: 251.67;
  --d: 83.34;
}

.reto__bubble--sm {
  --x: 53.13;
  --y: 231.13;
  --d: 33.74;
}

.reto__head {
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--section-pad) var(--space-40);
  padding-inline: 36px;
  text-align: center;
}

.reto__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

.reto__subtitle {
  margin-block-start: -3px;                  /* 1 px sota el títol, no 4 */
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.reto__list {
  grid-area: 2 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-72);
}

.reto-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--gutter);
  text-align: center;
}

.reto-item__eyebrow {
  display: inline-flex;
  align-items: center;
  block-size: 24px;
  padding-inline: var(--space-12);
  color: var(--accent-rose);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.reto-item__title {
  max-inline-size: 14.375rem;                /* 230 */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.reto-item__text {
  max-inline-size: 16.8125rem;               /* 269 */
  margin-block-start: var(--space-8);
  line-height: var(--lh-body);
}

.reto-item .scroll-cue {
  margin-block-start: var(--space-72);
  --cue-color: var(--neutral-gray-300);      /* sobre fosc, el gris del frame ja fa 10:1 */
  --cue-hover: var(--neutral-white);         /* i en passar-hi s'aclareix */
}

/* Les fletxes porten al repte següent: queda amb aire sota la barra */
.reto-item {
  scroll-margin-top: var(--space-40);
}

/* Separador metàl·lic a tot l'ample, sota cada repte */
.reto-item::after {
  content: '';
  align-self: stretch;
  block-size: 1px;
  margin-block-start: var(--space-72);
  margin-inline: calc(var(--gutter) * -1);
  background: var(--grad-metal);
  box-shadow: var(--shadow-metal);
}

/* --------------------------------------------------------------------------
   04 · MANIFIESTO · cita sobre crema
   -------------------------------------------------------------------------- */
.manifesto {
  display: grid;
  align-content: center;
  /* Tota la pantalla, perquè la frase respiri. svh = alçada visible amb la
     barra del navegador mòbil desplegada: la frase no queda mai tapada.
     Mai per sota dels 622 del frame. */
  min-block-size: 38.875rem;
  min-block-size: max(38.875rem, 100svh);
  padding: var(--space-16) var(--gutter) var(--space-32);
  background: var(--bg-cream);
}

.manifesto__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.manifesto__quote {
  max-inline-size: 18.5rem;                  /* 296 */
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
}

.manifesto__quote p {
  letter-spacing: var(--ls-heading);
}

.manifesto__text {
  max-inline-size: 17.125rem;                /* 274 */
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   05 · SERVICIOS · capçalera i acordió de targetes amb foto
   -------------------------------------------------------------------------- */
.servicios {
  position: relative;
  padding-block: var(--section-pad) var(--scroll-cue-after);
}

/* La corba i la bombolla comencen 240 unitats per sobre (damunt de la
   cita); la bombolla queda a cavall de les dues seccions */
.servicios__decor {
  --decor-h: 400;
  --decor-y: -240;
}

.servicios__bubble {
  --x: 252.67;
  --y: 188.67;
  --d: 96.46;
}

.servicios .section-head,
.servicios .services,
.servicios .scroll-cue {
  position: relative;                        /* per sobre de la decoració */
}

.services {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-block-start: 2.125rem;              /* 34 */
  padding-inline: var(--gutter);
}

.servicios > .scroll-cue {
  margin-block-start: var(--space-40);
}

/* Targeta. La foto ocupa tota la targeta: un cop desenfocada fa de marc
   de 8 px, i a dins hi ha la mateixa foto nítida amb un vel fosc. */
.service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--neutral-gray-900);
}

.service__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'icon .'
    'heading toggle';
  row-gap: var(--space-12);
  padding: 81px 15px 15px var(--space-16);
  list-style: none;
  cursor: pointer;
}

.service__summary::-webkit-details-marker {
  display: none;
}

.service[open] .service__summary {
  padding-block: 176px 0;
}

/* Obertes fan sempre 442 (Figma) amb el contingut a baix: si el text és
   curt, l'espai sobrant queda a dalt, sobre la foto. On <details> encara no
   admet flex, la targeta simplement queda una mica més baixa. */
.service[open] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 442px;
}

/* El contorn de focus del summary quedaria retallat per l'overflow: es
   pinta a la targeta sencera. */
.service__summary:focus-visible {
  outline: none;
}

.service:has(.service__summary:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.service__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.service__frame,
.service__photo {
  position: absolute;
  display: block;
  overflow: hidden;
}

.service__frame {
  inset: 0;
}

.service__photo {
  inset: var(--space-8);
  border-radius: var(--radius-lg);
}

.service__frame img,
.service__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.service__frame img {
  scale: 1.1;
  filter: blur(9px);
}

.service__frame::after,
.service__photo::before,
.service__photo::after {
  content: '';
  position: absolute;
  inset: 0;
}

.service__frame::after {
  background: var(--grad-service-frame), rgba(41, 51, 41, 0.23);
}

/* Dos vels, tancat i obert, que es fonen l'un en l'altre: un gradient no
   es pot transicionar, l'opacitat sí. Mentre la targeta es tanca
   (.is-collapsing) ja es mostra l'estat tancat. */
.service__photo::after {
  background: var(--grad-photo-card);
  transition: opacity var(--dur-slow) var(--ease-out);
}

.service__photo::before {
  background: var(--grad-photo-card-open);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.service[open]:not(.is-collapsing) .service__photo::before {
  opacity: 1;
}

.service[open]:not(.is-collapsing) .service__photo::after {
  opacity: 0;
}

/* Obert, el xebró apunta amunt */
.service[open]:not(.is-collapsing) .service__toggle svg {
  rotate: 180deg;
}

.service__summary .icon-tile {
  grid-area: icon;
}

.service__heading {
  grid-area: heading;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  filter: var(--shadow-title-glow);
}

.service__lead {
  font-size: var(--fs-small);
  line-height: var(--lh-serif-small);
  letter-spacing: var(--ls-small);
}

.service__toggle {
  grid-area: toggle;
  align-self: end;
}

.service__body {
  padding: 11px 15px var(--space-24) var(--space-16);
}

.service__body::before {
  content: '';
  display: block;
  block-size: 1px;
  background: var(--grad-metal);
  box-shadow: var(--shadow-metal);
}

.service__quote {
  max-inline-size: 18.9375rem;               /* 303 */
  margin-block-start: var(--space-12);
  line-height: var(--lh-body);
}

.service__body .tags {
  margin-block-start: 15px;
}

/* --------------------------------------------------------------------------
   06 · PROCESO · cinc passos sobre una línia metàl·lica vertical
   -------------------------------------------------------------------------- */
.proceso {
  padding-block: var(--section-pad);
  background: var(--grad-process-bg);
}

.steps {
  --steps-gap: 3.6875rem;                    /* 59 */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--steps-gap);
  inline-size: min(100% - 2 * var(--gutter), 17.5625rem); /* 281 */
  margin: 4.1875rem auto 0;                  /* 67 */
}

/* La línia va del centre del primer orbe al centre de l'últim. Amb
   anchor positioning s'hi enganxa encara que els textos canviïn d'alçada;
   sense, queda amb les mesures del frame. */
.steps::before {
  content: '';
  position: absolute;
  inset-block: 8.3125rem 8.125rem;           /* 133 / 130 */
  inset-inline-start: calc(76.58px / 2 - 2.5px); /* centrada als orbes */
  inline-size: 5px;
  background: var(--grad-metal-v);
  box-shadow: var(--shadow-metal);
}

@supports (anchor-name: --a) {
  .step:first-child .orb { anchor-name: --orb-first; }
  .step:last-child .orb { anchor-name: --orb-last; }

  .steps::before {
    inset-block-start: anchor(--orb-first center);
    inset-block-end: anchor(--orb-last center);
  }
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.step__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  inline-size: 11.25rem;                     /* 180 */
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--neutral-white);
}

.step__num {
  color: var(--accent-warm-brown);
  font-size: var(--fs-serif-display);
  line-height: var(--lh-serif-display);
  letter-spacing: var(--ls-heading);
}

.step__title {
  max-inline-size: 8.3125rem;                /* 133 */
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.step__text {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

/* --------------------------------------------------------------------------
   07 · CASOS · dues targetes fosques
   -------------------------------------------------------------------------- */
.casos {
  padding-block: var(--section-pad) var(--space-40);
}

.cases {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-block-start: 2.625rem;              /* 42 */
  padding-inline: var(--gutter);
}

.case {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--grad-dark);
}

.case__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding-inline-start: var(--space-8);
}

.case__icon {
  flex: none;
  color: var(--neutral-white);
}

.case__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.case__subtitle {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

/* La foto sobresurt del padding: 339 px dins d'una targeta de 344 */
.case__media {
  display: block;
  max-inline-size: none;
  margin-inline: -13px -14px;
}

.case__media img {
  inline-size: 100%;
  aspect-ratio: 339 / 306;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Dues columnes de 138 repartides en 296 (312 − 8 − 8): la dels valors
   comença a 166, igual que al frame */
.case__meta,
.case__objective {
  display: grid;
  grid-template-columns: 8.625rem 8.625rem;  /* 138 */
  justify-content: space-between;
  row-gap: var(--space-16);
  padding-inline: var(--space-8);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

/* Etiquetes: Body/XSmall/Uppercase */
.case__meta dt,
.case__label {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ----- Contingut de «Leer más» (frame «Assets») ----- */
.case__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.case__details[hidden] {
  display: none;
}

/* Cada bloc porta el separador metàl·lic a dalt, com el peu */
.case__details > *,
.case__foot {
  position: relative;
  padding-block-start: var(--space-16);
}

.case__details > *::before,
.case__foot::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--grad-metal);
  box-shadow: var(--shadow-metal);
}

.case__qr {
  color: var(--neutral-white);
}

/* «Objetivo» a dalt i el text a baix de la columna, a l'alçada del QR */
.case__objective-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  min-block-size: 92px;
}

.case__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-inline: var(--space-8);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.case__block--results {
  gap: var(--space-16);
}

.results {
  display: flex;
  gap: var(--space-16);
}

/* La xifra va a dalt però a l'HTML l'etiqueta (dt) ha d'anar primer */
.result {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
}

.result dd {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.case__foot {
  display: flex;
  justify-content: flex-end;
}

.case__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.case__more[hidden] {
  display: none;
}

/* Obert, el xebró apunta amunt (al Figma el botó està girat 180°) */
.case__more[aria-expanded='true'] .round-btn svg {
  rotate: 180deg;
}

/* --------------------------------------------------------------------------
   08 · CIFRAS · foto a sang amb targeta de vidre
   -------------------------------------------------------------------------- */
.cifras {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  aspect-ratio: 376 / 812;
  padding: 0 var(--gutter) 23px;
}

.cifras__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
}

.cifras__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.cifras__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-photo-band);
}

.cifras__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  border: 1px solid var(--neutral-white);
  border-radius: var(--radius-lg);
  background: var(--veil-figures);
  -webkit-backdrop-filter: blur(var(--glass-content-blur));
  backdrop-filter: blur(var(--glass-content-blur));
}

.cifras__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cifras__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cifras__value {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading);
}

/* Sagnat de 15 px: el text queda alineat amb el pal de l'«1» */
.cifras__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: -6px;                  /* trepitja la caixa del «1M+», com al frame */
  padding-inline-start: 15px;
  color: var(--accent-rose);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.cifras__arrow {
  flex: none;
  inline-size: 10px;
  block-size: 8px;
}

/* Separador rosa (sense ombres, a diferència dels metàl·lics) */
.stats {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block-start: var(--space-16);
}

.stats::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--grad-rose);
}

/* El número va a dalt però a l'HTML l'etiqueta (dt) ha d'anar primer */
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.stat:nth-child(1) { inline-size: 4.75rem; }  /* 76 */
.stat:nth-child(2) { inline-size: 4rem; }     /* 64 */
.stat:nth-child(3) { inline-size: 2.625rem; } /* 42 */

.stat__value {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

/* Xifres que compten (animations.js): el valor final, invisible, fixa
   l'amplada; el número que compta va a la mateixa cel·la, a sobre, i no
   ocupa amplada (inline-size: 0). Així la caixa no es mou encara que un
   valor intermedi sigui més ample: Switzer no té xifres tabulars i «20»
   fa més que «50». */
[data-count] {
  font-variant-numeric: tabular-nums;
}

.is-counting {
  display: inline-grid;
  justify-items: start;
}

.count__ghost,
.count__live {
  grid-area: 1 / 1;
}

.count__ghost {
  visibility: hidden;
}

.count__live {
  inline-size: 0;
  white-space: nowrap;
}

.stat__label {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-label);
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   09 · CONTACTO · capçalera i formulari
   -------------------------------------------------------------------------- */
.contacto {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--section-pad) var(--gutter) var(--space-40);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* La categoria va al mateix grup que els altres camps curts (a tauleta i
   escriptori formen una graella), però a mòbil queda a 40 del telèfon,
   com al frame: 8 de gap + 32 */
.field--category {
  margin-block-start: var(--space-32);
}

/* --------------------------------------------------------------------------
   10 · PEU
   -------------------------------------------------------------------------- */
/* A baix, el mateix aire que hi ha entre el separador i els enllaços
   legals (40), més la zona segura dels mòbils amb barra inferior */
.site-footer {
  padding: var(--section-pad) var(--gutter) calc(var(--space-40) + env(safe-area-inset-bottom, 0px));
  background: var(--grad-dark);
  color: var(--neutral-white);
}

.site-footer__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-96);
}

/* Enllaços i, a sota, les xarxes */
.site-footer__primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

.site-footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-inline-size: 9.875rem;                 /* 158 */
  font-style: normal;
  line-height: var(--lh-body);
}

.site-footer__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__label {
  color: var(--neutral-gray-300);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.social {
  display: flex;
  gap: var(--space-8);
}

/* Hover i focus: cercle negre i glif blanc, amb una transició suau. Les
   dues variables es registren com a colors perquè es puguin transicionar
   (i les hereten les icones del sprite). */
@property --social-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #FEFFFC;
}

@property --social-fg {
  syntax: '<color>';
  inherits: true;
  initial-value: #090909;
}

.social__link {
  display: block;
  border-radius: 50%;
  --social-bg: var(--accent-natural-white);
  --social-fg: var(--neutral-black);
  transition:
    --social-bg var(--dur-base) var(--ease-out),
    --social-fg var(--dur-base) var(--ease-out);
}

.social__link:focus-visible {
  --social-bg: var(--neutral-black);
  --social-fg: var(--neutral-white);
}

@media (hover: hover) {
  .social__link:hover {
    --social-bg: var(--neutral-black);
    --social-fg: var(--neutral-white);
  }
}

.social__link svg {
  inline-size: 32px;
  block-size: 32px;
}

/* Sobre el separador hi ha el mateix aire que a dalt del peu: el
   contingut queda centrat en alçada */
.site-footer__legal {
  position: relative;
  margin-block-start: var(--section-pad);
  padding-block-start: var(--space-40);
  color: var(--neutral-gray-300);
  text-align: center;
}

.site-footer__legal::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(var(--gutter) * -1);
  block-size: 1px;
  background: var(--grad-metal);
  box-shadow: var(--shadow-metal);
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.site-footer__copy {
  margin-block-start: 2.1875rem;             /* 35 */
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-label);
}

/* --------------------------------------------------------------------------
   11 · PÀGINES LEGALS
   Mateixa barra, menú i peu que la landing. A la barra: tornar a
   l'esquerra, logotip centrat (enllaç a la home) i menú a la dreta.
   -------------------------------------------------------------------------- */
.site-nav--sub {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.site-nav--sub .site-nav__brand {
  grid-column: 2;
}

.site-nav--sub .site-nav__actions {
  grid-column: 3;
  justify-self: end;
}

/* El xebró de les targetes de servei, girat cap a l'esquerra. A 32 px el
   traç fa 1,6, el mateix gruix que la icona de menú. */
.site-nav__back {
  grid-column: 1;
  justify-self: start;
  display: grid;
  place-items: center;
  inline-size: var(--tap-target);
  block-size: var(--tap-target);
  margin: -10px 0 -10px -10px;
  color: var(--neutral-gray-900);
}

.site-nav__back svg {
  inline-size: 32px;
  block-size: 32px;
  rotate: 90deg;
}

/* Fons en blanc neutre (neutral/white). Amb l'off-white de la landing i
   targetes blanques a sobre, el fons es llegia gris: aquí s'inverteix, la
   pàgina en blanc i les targetes en off-white. */
html:has(.legal-page),
.legal-page,
.legal-page .page {
  background-color: var(--bg-primary);
}

.legal-page .legal__toc,
.legal-page .legal__card {
  background: var(--bg-secondary);
}

.legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--section-pad) var(--gutter) var(--space-96);
}

/* Índex + contingut: només fan de columnes a escriptori */
.legal__layout,
.legal__content {
  display: contents;
}

.legal__updated {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

/* Marca de contingut pendent: groc de treball, no del DS */
.pending {
  padding-inline: 0.2em;
  border-radius: 3px;
  background: var(--pending-bg);
  color: var(--pending-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.pending-note {
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--pending-bg);
  color: var(--pending-ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.pending-note strong {
  font-weight: var(--fw-bold);
}

/* Índex: números en serif com als passos del procés */
.legal__toc {
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--neutral-white);
}

.legal__toc-title {
  margin-block-end: var(--space-16);
  color: var(--text-secondary);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.legal__toc ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.legal__toc a {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.legal__toc-num {
  flex: none;
  inline-size: 1.5em;
  color: var(--accent-warm-brown);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-style: italic;
  line-height: 1;
}

.legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block-start: var(--space-48);
  border-block-start: 1px solid var(--neutral-gray-200);
}

.legal__num {
  color: var(--accent-warm-brown);
  font-family: var(--font-serif);
  font-size: var(--fs-serif-display);
  font-style: italic;
  line-height: var(--lh-serif-display);
  letter-spacing: var(--ls-heading);
}

.legal__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* Primer paràgraf més gran: dona ritme a una pàgina que és tota text */
.legal__lead {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.legal__section p,
.legal__section li {
  line-height: var(--lh-body);
}

.legal__section a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.legal__list li {
  position: relative;
  padding-inline-start: var(--space-16);
}

.legal__list li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--grad-dark);
}

/* Fitxa de dades: targeta blanca, etiqueta a sobre i valor a sota */
.legal__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--neutral-white);
}

.legal__card div {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.legal__card dt {
  color: var(--text-secondary);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.legal__card dd {
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

/* Tancament: el correu en gran, com a crida a escriure */
.legal__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block-start: var(--space-48);
  border-block-start: 1px solid var(--neutral-gray-200);
}

.legal__contact-link {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  overflow-wrap: anywhere;
}

/* ----- 404: el missatge centrat a la pantalla, el botó a l'inici i els
   enllaços a les seccions ----- */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  min-block-size: calc(100svh - var(--nav-height));
  padding: var(--section-pad) var(--gutter);
  text-align: center;
}

.not-found__links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-24);
}

.not-found__links a {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-label);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}

.not-found__links a:focus-visible {
  color: var(--neutral-gray-900);
  text-decoration-color: var(--accent-purple);
}

@media (hover: hover) {
  .not-found__links a:hover {
    color: var(--neutral-gray-900);
    text-decoration-color: var(--accent-purple);
  }
}

@media (min-width: 640px) {
  .not-found {
    padding-inline: var(--pad-x);
  }
}

/* --------------------------------------------------------------------------
   12 · MOVIMENT I MICROINTERACCIONS
   Tot el moviment que depèn de JavaScript penja de .js-reveal (l'afegeix
   l'script de la capçalera i el treu si animations.js no arrenca); sense
   JS o amb «reduir moviment», tot queda en l'estat final. Les durades són
   els tokens: base.css les posa a gairebé zero amb «reduir moviment».
   -------------------------------------------------------------------------- */

/* ----- Idiomes: el subratllat porpra llisca de l'un a l'altre ----- */
.lang-switch {
  position: relative;
}

.lang-switch__option {
  transition: color var(--dur-base) var(--ease-out);
}

.lang-switch.is-enhanced .lang-switch__option[aria-pressed='true']::after {
  content: none;
}

.lang-switch.is-enhanced::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 3px;
  inline-size: var(--lang-w, 0);
  block-size: 2px;
  border-radius: 1px;
  background: var(--accent-purple);
  translate: var(--lang-x, 0) 0;
  transition:
    translate var(--dur-base) var(--ease-out),
    inline-size var(--dur-base) var(--ease-out);
}

/* ----- Menú: el panell baixa, l'overlay es fon i els enllaços entren en
   cascada. En tancar, tot torna enrere sense retards. (L'opacitat va al
   panell i a cada tros d'overlay, no al contenidor: un pare amb opacitat
   trencaria el desenfocament del vidre.) ----- */
.site-menu::before,
.site-menu::after,
.site-menu__scrim {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.site-menu__panel {
  opacity: 0;
  translate: 0 -16px;
  transition:
    opacity var(--dur-base) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.site-menu__list li,
.site-menu .site-menu__social,
.site-menu__cta {
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.site-menu.is-open::before,
.site-menu.is-open::after,
.site-menu.is-open .site-menu__scrim,
.site-menu.is-open .site-menu__panel,
.site-menu.is-open .site-menu__list li,
.site-menu.is-open .site-menu__social,
.site-menu.is-open .site-menu__cta {
  opacity: 1;
  translate: none;
}

.site-menu.is-open .site-menu__list li:nth-child(1) { transition-delay: 80ms; }
.site-menu.is-open .site-menu__list li:nth-child(2) { transition-delay: 130ms; }
.site-menu.is-open .site-menu__list li:nth-child(3) { transition-delay: 180ms; }
.site-menu.is-open .site-menu__list li:nth-child(4) { transition-delay: 230ms; }
.site-menu.is-open .site-menu__social { transition-delay: 290ms; }
.site-menu.is-open .site-menu__cta { transition-delay: 340ms; }

/* ----- Botó de pausa del vídeo (WCAG 2.2.2): vidre petit a la cantonada.
   La icona passa de pausa a play deformant dues meitats. ----- */
.hero__video-toggle {
  position: absolute;
  inset-block-end: var(--space-16);
  inset-inline-end: var(--space-16);
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--glass-navbar-bg);
  box-shadow: var(--glass-navbar-shadow);
  color: var(--neutral-gray-900);
  -webkit-backdrop-filter: blur(var(--glass-navbar-blur));
  backdrop-filter: blur(var(--glass-navbar-blur));
  transition: scale var(--dur-fast) var(--ease-out);
}

.hero__video-toggle[hidden] {
  display: none;
}

/* 44 px de zona tàctil al voltant del cercle de 32 */
.hero__video-toggle::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.hero__video-toggle:active {
  scale: 0.92;
}

.hero__video-icon {
  position: relative;
  inline-size: 10px;
  block-size: 12px;
}

.hero__video-icon::before,
.hero__video-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  transition: clip-path var(--dur-base) var(--ease-out);
}

.hero__video-icon::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%); }
.hero__video-icon::after { clip-path: polygon(65% 0, 100% 0, 100% 100%, 65% 100%); }

.hero__video-toggle.is-paused .hero__video-icon {
  translate: 1px 0;                          /* el triangle es veu centrat */
}

.hero__video-toggle.is-paused .hero__video-icon::before {
  clip-path: polygon(0 0, 50% 25%, 50% 75%, 0 100%);
}

.hero__video-toggle.is-paused .hero__video-icon::after {
  clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
}

/* ----- Moviment ambiental: fletxes i esferes que suren sense parar.
   És moviment de més de 5 s: el botó del vídeo l'atura (WCAG 2.2.2) amb
   .motion-paused, i «reduir moviment» el treu del tot. Va amb translate,
   que no xoca amb el gir ni amb l'escala de les esferes. ----- */
@keyframes cue-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}

@keyframes sphere-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 2px -7px; }
}

.scroll-cue svg {
  animation: cue-float 2.6s var(--ease-in-out) infinite;
}

.decor .glass-bubble,
.decor .metal-dot {
  animation: sphere-float var(--float-time, 7s) var(--ease-in-out) var(--float-delay, 0s) infinite;
}

/* Cada esfera amb el seu ritme; la bola va amb la bombolla gran (és a
   dins), una mica desfasada, com si flotés en l'aigua */
.reto__bubble--sm { --float-time: 6.2s; --float-delay: -2.4s; }
.reto__bubble--lg { --float-time: 7.6s; }
.reto__ball { --float-time: 7.6s; --float-delay: -0.5s; }
.servicios__bubble { --float-time: 8.4s; --float-delay: -3.1s; }

.motion-paused .scroll-cue svg,
.motion-paused .decor .glass-bubble,
.motion-paused .decor .metal-dot {
  animation-play-state: paused;
}

/* ----- Corbes metàl·liques: es dibuixen soles quan entren; després hi
   apareixen les bombolles i la bola. pathLength="1" fa que el traç es
   pugui amagar sencer amb un sol valor. ----- */
.js-reveal .curve__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-in-out);
}

.js-reveal .decor.is-drawn .curve__path {
  stroke-dashoffset: 0;
}

.js-reveal .decor .glass-bubble,
.js-reveal .decor .metal-dot {
  opacity: 0;
  scale: 0.6;
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--pop-delay, 0ms),
    scale var(--dur-slow) var(--ease-spring) var(--pop-delay, 0ms);
}

.js-reveal .decor.is-drawn .glass-bubble,
.js-reveal .decor.is-drawn .metal-dot {
  opacity: 1;
  scale: 1;
}

.reto__bubble--sm { --pop-delay: 450ms; }
.reto__bubble--lg { --pop-delay: 950ms; }
.reto__ball { --pop-delay: 1150ms; }
.servicios__bubble { --pop-delay: 900ms; }

/* ----- Procés: la línia creix i cada orbe s'encén quan hi arriba.
   On el navegador té animacions lligades al scroll (sense JS ni scroll
   listeners), la línia avança amb el dit: es va omplint fins al centre de
   la pantalla i cada orbe s'encén en passar-hi. On no, la línia creix sola
   en entrar i cada orbe s'encén amb el seu pas. ----- */
.js-reveal .steps::before {
  transform-origin: top center;
  scale: 1 0;
  transition: scale 2.4s var(--ease-in-out) 200ms;
}

.js-reveal .steps.is-drawn::before {
  scale: 1 1;
}

.js-reveal .orb {
  opacity: 0.3;
  scale: 0.7;
  filter: grayscale(1);
  transition:
    opacity var(--dur-slow) var(--ease-out) 250ms,
    scale var(--dur-slow) var(--ease-spring) 250ms,
    filter var(--dur-slow) var(--ease-out) 250ms;
}

.js-reveal .step.is-revealed .orb {
  opacity: 1;
  scale: 1;
  filter: none;
}

@keyframes steps-line {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@keyframes orb-on {
  from { opacity: 0.3; scale: 0.7; filter: grayscale(1); }
  to { opacity: 1; scale: 1; filter: none; }
}

/* Cada targeta apareix quan la línia arriba al seu orbe */
@keyframes step-card-in {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: none; }
}

@supports (animation-timeline: view()) {
  .js-reveal .steps {
    view-timeline-name: --steps;
  }

  .js-reveal .steps::before {
    transition: none;
    animation: steps-line linear both;
    animation-timeline: --steps;
    animation-range: cover calc(50vh + 133px) cover calc(100% - 50vh - 130px);
  }

  .js-reveal .orb {
    transition: none;
    animation: orb-on linear both;
    animation-timeline: view();
    animation-range: cover calc(50vh - 10px) cover calc(50vh + 70px);
  }

  /* La targeta segueix la línia de temps del seu orbe (timeline-scope la
     fa visible a tot el pas): apareix exactament quan l'orbe s'encén */
  .js-reveal .step {
    timeline-scope: --orb;
  }

  .js-reveal .orb {
    view-timeline-name: --orb;
  }

  .js-reveal .step__card {
    animation: step-card-in linear both;
    animation-timeline: --orb;
    animation-range: cover calc(50vh - 10px) cover calc(50vh + 70px);
  }
}

/* --------------------------------------------------------------------------
   13 · TAULETA (≥ 640 px)
   La pàgina deixa de ser una columna de 430: ocupa tot l'ample i el
   contingut queda dins de --container amb el marge --pad-x. Cada secció
   conserva la composició del mòbil, més gran i amb més aire, excepte on
   l'ample ajuda a entendre el contingut: el procés en ziga-zaga al voltant
   de la línia, els dos casos de costat i els camps curts del formulari en
   una fila.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  /* ----- Barra i menú ----- */
  .site-nav {
    padding-inline: var(--pad-x);
  }

  /* El menú cau sota la icona, a la dreta, en comptes de quedar centrat.
     La barra ja ocupa tot l'ample: l'overlay comença a sota (si no, es
     veuria a través del vidre i l'enfosquiria pels costats). */
  .site-menu {
    grid-template-columns: 1fr minmax(0, 26rem) var(--pad-x);
  }

  .site-menu::before { grid-area: 2 / 1 / 3 / 2; }
  .site-menu::after { grid-area: 2 / 3 / 3 / 4; }

  .site-menu__panel {
    padding-inline: var(--space-32);
  }

  /* ----- Capçaleres de secció: més amples ----- */
  .section-head {
    max-inline-size: 36rem;
  }

  /* ----- Hero: el vídeo s'apaïsa i el titular creix ----- */
  .hero__media {
    aspect-ratio: 16 / 10;
  }

  .hero__body {
    padding: var(--space-40) var(--pad-x) 0;
  }

  /* Cada paraula a la seva línia, en qualsevol idioma */
  .hero__title {
    max-inline-size: min-content;
  }

  .hero .section-head__lead {
    max-inline-size: 28rem;
  }

  /* ----- El reto: mateixa composició, amb la decoració a 560 ----- */
  .reto {
    --reto-w: min(100%, 35rem);
  }

  .reto::before {
    inline-size: var(--reto-w);
    justify-self: center;
  }

  .reto__decor {
    inline-size: var(--reto-w);
    margin-inline: auto;
  }

  .reto-item__title {
    max-inline-size: 22rem;
  }

  .reto-item__text {
    max-inline-size: 30rem;
  }

  /* ----- Manifiesto: la cita guanya cos ----- */
  .manifesto {
    padding-inline: var(--pad-x);
  }

  .manifesto__quote {
    max-inline-size: 11.5em;                 /* ~3 línies a escriptori */
  }

  .manifesto__text {
    max-inline-size: 26rem;
  }

  /* ----- Servicios ----- */
  .servicios {
    padding-inline: var(--pad-x);
  }

  /* La corba ja no travessa tota la pantalla: queda ancorada a la dreta i
     neix fosa des de l'esquerra (a mida doble el tub es faria massa gruixut).
     Més amunt que a mòbil: amb la capçalera centrada i més ampla, la cua
     travessava el títol; ara acaba per sobre de l'eyebrow i la bombolla
     queda a la part baixa del manifest. */
  .servicios__decor {
    --decor-y: -340;
    inset-inline: auto 0;
    inline-size: min(100%, 36rem);
  }

  .servicios__decor .decor__art {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
  }

  .services {
    max-inline-size: 44rem;
    margin-inline: auto;
    padding-inline: 0;
  }

  .service__quote {
    max-inline-size: 30rem;
  }

  /* ----- Proceso: ziga-zaga al voltant de la línia ----- */
  .proceso {
    padding-inline: var(--pad-x);
  }

  .steps {
    --steps-gap: 0px;
    inline-size: min(100%, 44rem);
  }

  .step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76.58px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-24);
  }

  /* Les targetes de costats oposats s'encavalquen una mica: el recorregut
     es llegeix com una sola línia */
  .step + .step {
    margin-block-start: calc(var(--space-24) * -1);
  }

  .step .orb {
    grid-area: 1 / 2;
  }

  .step__card {
    grid-row: 1;
    inline-size: auto;
  }

  .step:nth-child(odd) .step__card { grid-column: 3; }
  .step:nth-child(even) .step__card { grid-column: 1; }

  .step__title {
    max-inline-size: none;
  }

  .steps::before {
    inset-inline-start: calc(50% - 2.5px);
  }

  @supports not (anchor-name: --a) {
    .steps::before {
      inset-block: 5.5rem;
    }
  }

  /* ----- Casos: de dos en dos ----- */
  .casos {
    padding-inline: var(--pad-x);
  }

  .cases {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
    padding-inline: 0;
  }

  .case {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .case__meta,
  .case__objective {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-16);
  }

  /* ----- Cifras: com l'hero. La foto, a dalt i a sang (apaïsada); les
     xifres, a sota sobre el fons fosc, sense la targeta de vidre (ja no
     van damunt de la foto) ----- */
  .cifras {
    align-content: start;
    aspect-ratio: auto;
    padding: 0 0 var(--section-pad);
    background: var(--grad-dark);
  }

  .cifras__bg {
    position: relative;
    inset: auto;
    z-index: auto;
    aspect-ratio: 16 / 10;
  }

  .cifras__bg::after {
    content: none;
  }

  .cifras__card {
    inline-size: min(100% - 2 * var(--pad-x), 36rem);
    margin: var(--space-40) auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .stats {
    justify-content: flex-start;
    gap: clamp(2rem, 6vw, 4rem);
  }

  .stat:nth-child(n) {
    inline-size: auto;
  }

  /* ----- Contacto: els quatre camps curts en una graella de 2 × 2 ----- */
  .contacto {
    padding-inline: var(--pad-x);
  }

  .contact-form {
    inline-size: min(100%, 44rem);
    margin-inline: auto;
  }

  .contact-form__group:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-24) var(--space-16);
  }

  .field--category {
    margin-block-start: 0;
  }

  /* ----- Peu ----- */
  .site-footer {
    padding-inline: var(--pad-x);
  }

  .site-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-48);
    align-items: start;
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    text-align: start;
  }

  /* El separador va d'un cantó a l'altre de la pantalla */
  .site-footer__legal::before {
    inset-inline: calc(50% - 50vw);
  }

  .site-footer__copy {
    margin: 0;
  }

  /* ----- Pàgines legals: una columna de lectura centrada ----- */
  .legal {
    padding-inline: max(var(--pad-x), (100% - 46rem) / 2);
  }
}

/* --------------------------------------------------------------------------
   14 · ESCRIPTORI (≥ 1024 px)
   Una graella de dues columnes asimètriques que es repeteix i dona ritme:
     · hero, reto i contacte: text a l'esquerra (fix mentre es llegeix la
       dreta) i el contingut que l'explica a la dreta;
     · serveis, procés i casos: capçalera partida (titular a l'esquerra,
       entradeta a la dreta) i el contingut a tot l'ample, en horitzontal.
   La barra porta els enllaços i deixa de tenir menú desplegable.
   -------------------------------------------------------------------------- */
@keyframes steps-line-x {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@media (min-width: 1024px) {
  /* ----- Barra: logotip · enllaços al centre · idiomes ----- */
  .site-nav:not(.site-nav--sub) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .site-nav:not(.site-nav--sub) .site-nav__actions {
    justify-self: end;
  }

  .site-nav:not(.site-nav--sub) .site-nav__toggle {
    display: none;
  }

  .site-nav__links {
    display: block;
  }

  .site-nav__links ul {
    display: flex;
    gap: var(--space-32);
  }

  /* Mateix llenguatge que els idiomes: secundari en repòs; tinta i
     subratllat porpra a la secció on és l'usuari (main.js) i en passar-hi */
  .site-nav__links a {
    position: relative;
    display: block;
    padding-block: var(--space-12);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: var(--ls-label);
    transition: color var(--dur-base) var(--ease-out);
  }

  .site-nav__links a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 6px;
    block-size: 2px;
    border-radius: 1px;
    background: var(--accent-purple);
    scale: 0 1;
    transform-origin: left center;
    transition: scale var(--dur-base) var(--ease-out);
  }

  .site-nav__links a[aria-current='true'] {
    color: var(--neutral-gray-900);
  }

  .site-nav__links a[aria-current='true']::after,
  .site-nav__links a:focus-visible::after {
    scale: 1 1;
  }

  /* ----- Hero: titular a l'esquerra, vídeo a la dreta. No ocupa tota la
     pantalla: el vídeo fa el 70 % de l'alçada i sota l'hero s'entreveu el
     reto, que ja indica que hi ha més contingut (per això aquí no hi ha
     fletxa d'scroll) ----- */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    padding: var(--space-24) var(--pad-x) var(--space-56);
  }

  .hero__media {
    grid-column: 2;
    grid-row: 1 / 5;
    aspect-ratio: auto;
    block-size: clamp(28rem, 70svh, 40rem);
    border-radius: var(--radius-lg);
  }

  /* El cos deixa de ser una caixa: el text i el botó es col·loquen a la
     graella de l'hero */
  .hero__body {
    display: contents;
  }

  /* El text i el botó, centrats en alçada respecte del vídeo */
  .hero__content {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    gap: var(--space-16);
    max-inline-size: none;
    margin: 0;
    text-align: start;
  }

  .hero__body > .btn {
    grid-column: 1;
    grid-row: 3;
    margin: var(--space-32) 0 0;
  }

  .hero .scroll-cue {
    display: none;
  }

  /* ----- El reto: el problema queda fix a l'esquerra, els reptes passen a
     la dreta ----- */
  .reto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 8vw, 8rem);
    padding: var(--section-pad) var(--pad-x);
  }

  .reto::before {
    display: none;
  }

  .reto__intro {
    grid-area: 1 / 1;
    position: sticky;
    inset-block-start: var(--sticky-top);
    align-self: start;
    display: flex;
    flex-direction: column;
  }

  .reto__head {
    order: -1;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    text-align: start;
  }

  /* La decoració entra a la columna, sota el títol. En pantalles baixes
     s'encongeix perquè la columna fixa hi càpiga sencera. Les puntes de la
     corba es fonen: la columna ja no acaba a la vora de la pantalla. */
  .reto__decor {
    position: relative;
    inset: auto;
    z-index: auto;
    inline-size: min(100%, (100svh - var(--sticky-top) - 16rem) * 1.04);
    margin: -12% 0 0;                        /* el terç de dalt del llenç és buit */
  }

  .reto__decor .decor__art {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 86%, transparent);
  }

  .reto__list {
    grid-area: 1 / 2;
    gap: 0;
  }

  .reto-item {
    align-items: flex-start;
    padding: 0;
    text-align: start;
  }

  /* Mateix ritme vertical que el frame (72): la llista és prou llarga
     perquè la columna de l'esquerra acompanyi la lectura */
  .reto-item + .reto-item {
    margin-block-start: var(--space-72);
  }

  .reto-item__eyebrow {
    padding-inline: 0;
  }

  .reto-item__title {
    max-inline-size: 18em;
  }

  .reto-item__text {
    max-inline-size: 34rem;
    margin-block-start: var(--space-16);
  }

  .reto-item .scroll-cue {
    margin: var(--space-56) 0 0;
  }

  .reto-item::after {
    margin: var(--space-72) 0 0;
  }

  /* ----- Capçalera partida: titular a l'esquerra, entradeta a la dreta,
     alineats per baix ----- */
  :is(.servicios, .proceso, .casos) .section-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    justify-items: start;
    gap: var(--space-16) clamp(2rem, 6vw, 6rem);
    max-inline-size: none;
    margin-inline: 0;
    text-align: start;
  }

  :is(.servicios, .proceso, .casos) .section-head .eyebrow {
    grid-column: 1 / -1;
  }

  :is(.servicios, .proceso, .casos) .section-head__lead {
    grid-column: 2;
    max-inline-size: 24rem;
    padding-block-end: 0.4em;
  }

  /* ----- Servicios: acordió horitzontal de tres panells alts ----- */
  /* Una mica més amunt que a mòbil: la cua de la corba no toca
     l'entradeta, i la bombolla continua a cavall de les dues seccions */
  .servicios__decor {
    --decor-y: -280;
    inline-size: min(46vw, 40rem);
  }

  /* Cap text canvia mentre els panells s'obren i es tanquen:
     · el títol i l'entradeta tenen sempre l'amplada d'un panell tancat,
       oberts o no: es veuen igual en tots dos estats;
     · el contingut de l'obert (cita i etiquetes) té ja l'amplada final i
       creix des de sota (main.js n'anima l'alçada): el títol hi puja
       suaument i el panell el destapa a mesura que s'eixampla;
     · les fotos fan l'amplada del panell obert i no es reescalen: el
       panell en mostra un tros, com una finestra. */
  .services {
    --panel-open: calc((100cqi - 2 * var(--space-8)) * 2.4 / 4.4);
    --panel-closed: calc((100cqi - 2 * var(--space-8)) / 4.4);
    container-type: inline-size;
    flex-direction: row;
    block-size: clamp(32rem, 42vw, 38rem);
    max-inline-size: none;
    margin-block-start: var(--space-56);
  }

  .service {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-inline-size: 0;
    transition: flex-grow var(--dur-slow) var(--ease-in-out);
  }

  /* La targeta també entra en fer scroll: les dues transicions es sumen
     (la de base.css, més específica, substituiria la de l'amplada) */
  .js-reveal .service[data-reveal] {
    transition:
      flex-grow var(--dur-slow) var(--ease-in-out),
      opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
      translate var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
  }

  /* Mentre es tanca (.is-collapsing) ja s'estreny */
  .service[open]:not(.is-collapsing) {
    flex-grow: 2.4;
  }

  .service[open] {
    min-block-size: 0;
  }

  .service__frame img,
  .service__photo img {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    max-inline-size: none;
    translate: -50% 0;
  }

  .service__frame img { inline-size: var(--panel-open); }
  .service__photo img { inline-size: calc(var(--panel-open) - 2 * var(--space-8)); }

  /* Amb la foto posicionada, el vel d'obert (::before) quedaria a sota.
     A dalt s'hi afegeix una ombra suau: la icona i el botó hi són ara i,
     sobre una foto clara (el gel), el botó no es veuria. */
  .service__photo::before,
  .service__photo::after {
    z-index: 1;
  }

  .service__photo::after {
    background: linear-gradient(180deg, rgba(6, 6, 6, 0.38) 0%, rgba(6, 6, 6, 0) 24%), var(--grad-photo-card);
  }

  .service__photo::before {
    background: linear-gradient(180deg, rgba(6, 6, 6, 0.38) 0%, rgba(6, 6, 6, 0) 24%), var(--grad-photo-card-open);
  }

  /* En passar per sobre d'un tancat, la foto s'acosta una mica (l'amplada
     no canvia: no mou res més) */
  .service__photo img {
    transition: scale var(--dur-slow) var(--ease-out);
  }

  @media (hover: hover) {
    .service:not([open]):hover .service__photo img {
      scale: 1.05;
    }
  }

  /* Icona a dalt a l'esquerra, botó a dalt a la dreta, títol a baix */
  .service__summary,
  .service[open] .service__summary {
    flex: 1;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      'icon toggle'
      'heading heading';
    padding: var(--space-24);
  }

  .service__summary .icon-tile,
  .service__toggle {
    align-self: start;
  }

  .service__heading {
    inline-size: calc(var(--panel-closed) - 2 * var(--space-24));
  }

  .service__body {
    flex: none;
    inline-size: var(--panel-open);
    padding: 0 var(--space-24) var(--space-24);
  }

  .servicios > .scroll-cue {
    margin-block-start: var(--space-56);
  }

  /* ----- Proceso: línia horitzontal, orbes a sobre i targetes a sota ----- */
  .steps {
    --steps-gap: var(--space-16);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    inline-size: auto;
    margin: var(--space-72) 0 0;
  }

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
  }

  .step + .step {
    margin-block-start: 0;
  }

  .step__card {
    flex: 1;
    align-self: stretch;
  }

  /* Del centre del primer orbe al de l'últim: les columnes són iguals, el
     centre de la primera és a una desena part de l'ample (menys el gap) */
  .steps::before {
    inset-block: calc(76.58px / 2 - 2.5px) auto;
    inset-inline: calc((100% - 4 * var(--steps-gap)) / 10);
    inline-size: auto;
    block-size: 5px;
    background: var(--grad-metal);
  }

  /* La línia creix d'esquerra a dreta i cada orbe s'encén quan hi arriba */
  .js-reveal .steps::before {
    transform-origin: left center;
    scale: 0 1;
  }

  .js-reveal .steps.is-drawn::before {
    scale: 1 1;
  }

  .js-reveal .step:nth-child(1) .orb { transition-delay: 200ms; }
  .js-reveal .step:nth-child(2) .orb { transition-delay: 800ms; }
  .js-reveal .step:nth-child(3) .orb { transition-delay: 1400ms; }
  .js-reveal .step:nth-child(4) .orb { transition-delay: 2000ms; }
  .js-reveal .step:nth-child(5) .orb { transition-delay: 2600ms; }

  @supports (animation-timeline: view()) {
    .js-reveal .steps::before {
      animation-name: steps-line-x;
      animation-range: cover 25% cover 45%;
    }

    .js-reveal .step .orb {
      animation-timeline: --steps;
    }

    .js-reveal .step:nth-child(1) .orb { animation-range: cover 24% cover 27%; }
    .js-reveal .step:nth-child(2) .orb { animation-range: cover 29% cover 32%; }
    .js-reveal .step:nth-child(3) .orb { animation-range: cover 34% cover 37%; }
    .js-reveal .step:nth-child(4) .orb { animation-range: cover 39% cover 42%; }
    .js-reveal .step:nth-child(5) .orb { animation-range: cover 44% cover 47%; }

    .js-reveal .step .step__card {
      animation-timeline: --steps;
    }

    .js-reveal .step:nth-child(1) .step__card { animation-range: cover 25% cover 30%; }
    .js-reveal .step:nth-child(2) .step__card { animation-range: cover 30% cover 35%; }
    .js-reveal .step:nth-child(3) .step__card { animation-range: cover 35% cover 40%; }
    .js-reveal .step:nth-child(4) .step__card { animation-range: cover 40% cover 45%; }
    .js-reveal .step:nth-child(5) .step__card { animation-range: cover 45% cover 50%; }
  }

  /* ----- Secció fixa (.is-pinned). La posa animations.js si la secció
     cap sencera a la pantalla; funciona a tots els navegadors (no depèn
     de les animacions lligades al scroll).
     La secció fa l'alçada de la pantalla més --proceso-track de
     recorregut. Mentre dura, .proceso__stage es queda enganxat sota la
     barra: el scroll no porta a cap altra secció, només fa avançar el
     procés. Cinc marques invisibles repartides pel recorregut (cada 20 %)
     diuen quants passos s'han revelat (.is-on i --steps-on); la línia
     creix fins a l'orbe següent, l'orbe s'encén quan hi arriba i la
     targeta apareix just després. L'últim pas surt al 80 %: queda un tros
     per veure el procés sencer abans de continuar. ----- */
  .js-reveal .proceso.is-pinned {
    --proceso-track: 180svh;
    --step-line: 700ms;
    position: relative;
    block-size: calc(100svh - var(--nav-height) + var(--proceso-track));
    padding-block: 0;
  }

  .js-reveal .proceso.is-pinned .proceso__stage {
    position: sticky;
    inset-block-start: var(--nav-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    block-size: calc(100svh - var(--nav-height));
    padding-block: var(--space-16);
  }

  .js-reveal .proceso.is-pinned .steps {
    margin-block-start: var(--space-32);
  }

  .js-reveal .proceso.is-pinned .step {
    gap: var(--space-16);
  }

  .proceso__marker {
    position: absolute;
    inset-inline: 0;
    inset-block: calc(var(--at) * var(--proceso-track) + 50svh - var(--nav-height)) 0;
    visibility: hidden;
    pointer-events: none;
  }

  .js-reveal .proceso.is-pinned .steps::before {
    animation: none;
    scale: calc(max(var(--steps-on, 0) - 1, 0) / 4) 1;
    transition: scale var(--step-line) var(--ease-in-out);
  }

  .js-reveal .proceso.is-pinned .step .orb {
    animation: none;
    opacity: 0.3;
    scale: 0.7;
    filter: grayscale(1);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      scale var(--dur-slow) var(--ease-spring),
      filter var(--dur-slow) var(--ease-out);
  }

  .js-reveal .proceso.is-pinned .step .step__card {
    animation: none;
    opacity: 0;
    translate: 0 24px;
    transition:
      opacity var(--dur-slow) var(--ease-out),
      translate var(--dur-slow) var(--ease-out);
  }

  /* En revelar-se: l'orbe quan la línia hi arriba, la targeta just
     després. En amagar-se (scroll amunt), sense esperes. */
  .js-reveal .proceso.is-pinned .step.is-on .orb {
    opacity: 1;
    scale: 1;
    filter: none;
    transition-delay: calc(var(--step-line) - 100ms);
  }

  .js-reveal .proceso.is-pinned .step.is-on .step__card {
    opacity: 1;
    translate: none;
    transition-delay: var(--step-line);
  }

  /* El primer pas no espera cap línia */
  .js-reveal .proceso.is-pinned .step.is-on:first-child .orb { transition-delay: 0ms; }
  .js-reveal .proceso.is-pinned .step.is-on:first-child .step__card { transition-delay: 120ms; }

  /* ----- Casos: dues columnes, com a tauleta. La foto, més apaïsada
     (4:3): amb l'ample d'escriptori la del frame allargava massa la
     targeta. ----- */
  .cases {
    gap: var(--space-24);
  }

  .case__media img {
    aspect-ratio: 4 / 3;
  }

  .results {
    gap: var(--space-40);
  }

  /* ----- Cifras: com l'hero, les xifres a l'esquerra i la foto a la
     dreta en un quadre vertical, centrades en alçada ----- */
  .cifras {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5rem);
    padding: var(--section-pad) var(--pad-x);
  }

  .cifras__bg {
    grid-area: 1 / 2;
    aspect-ratio: 4 / 5;
    max-block-size: calc(100svh - var(--nav-height) - 2 * var(--space-24));
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

  .cifras__card {
    grid-area: 1 / 1;
    inline-size: auto;
    margin: 0;
  }

  /* ----- Contacto: la invitació fixa a l'esquerra, el formulari a la
     dreta ----- */
  .contacto {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: 0 clamp(3rem, 7vw, 8rem);
  }

  .contacto .section-head {
    position: sticky;
    inset-block-start: var(--sticky-top);
    align-items: flex-start;
    margin: 0;
    text-align: start;
  }

  .contact-form {
    inline-size: auto;
    margin: 0;
  }

  .contact-form__submit {
    margin-inline: 0;
  }

  /* ----- Peu: enllaços, dades i xarxes en una fila ----- */
  .site-footer__main {
    column-gap: clamp(3rem, 8vw, 8rem);
  }

  .site-footer__info {
    flex-direction: row;
    gap: var(--space-48);
    max-inline-size: none;
  }

  .site-footer__block {
    min-inline-size: 10rem;
  }

  /* ----- Pàgines legals: índex fix a l'esquerra, text a la dreta ----- */
  .legal {
    padding-inline: var(--pad-x);
  }

  .legal > .section-head {
    align-items: flex-start;
    max-inline-size: 48rem;
    margin: 0;
    text-align: start;
  }

  .legal__layout {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 46rem);
    align-items: start;
    column-gap: clamp(3rem, 7vw, 8rem);
  }

  .legal__toc {
    position: sticky;
    inset-block-start: var(--sticky-top);
    max-block-size: calc(100svh - var(--sticky-top) - var(--space-24));
    overflow-y: auto;
  }

  /* L'apartat que s'està llegint, amb el subratllat porpra de la barra */
  .legal__toc a > span:last-child {
    text-decoration: underline 2px transparent;
    text-underline-offset: 0.3em;
    transition: text-decoration-color var(--dur-base) var(--ease-out);
  }

  .legal__toc a[aria-current='true'] {
    color: var(--neutral-gray-900);
  }

  .legal__toc a[aria-current='true'] > span:last-child {
    text-decoration-color: var(--accent-purple);
  }

  .legal__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
  }
}