@import url('../fonts/fonts.css');

/* ============================================================
   Lluís Cecchini — full d'estil
   Direcció "Clínic precís": Archivo + Source Serif 4,
   blau de marca + verd quirúrgic. Densitat compacta.
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root {
  /* Color */
  --blau-marca:  #2F5FBF;   /* primari · 6.0:1 sobre blanc  */
  --blau-tinta:  #1B3D6B;   /* hover / pressed              */
  --blau-fosc:   #10243F;   /* titulars, superfícies fosques */
  --verd:        #17756A;   /* accent en text · 5.6:1        */
  --verd-graf:   #1F8A7A;   /* només farciments gràfics      */
  --paper:       #F7F9FC;
  --card:        #FFFFFF;
  --linia:       #DCE4EF;
  --linia-forta: #C3D0E2;
  --gris:        #4A5A70;   /* text secundari · 7.1:1        */
  --roig:        #B3261E;   /* només senyal d'error · 6.3:1  */

  /* Tipografia */
  --tip-titol: 'Archivo', system-ui, -apple-system, sans-serif;
  --tip-text:  'Source Serif 4', Georgia, serif;

  /* Ritme — compacte a consciència */
  --pas: clamp(2.5rem, 5vw, 4rem);   /* separació entre seccions */
  --ample: 1180px;
  --marge: clamp(1rem, 4vw, 2rem);

  --r: 6px;
  --ombra: 0 1px 2px rgba(16, 36, 63, .04), 0 1px 3px rgba(16, 36, 63, .06);
  --ombra-alt: 0 2px 4px rgba(16, 36, 63, .06), 0 8px 20px rgba(16, 36, 63, .09);

  /* Corbes: les natives de CSS són massa fluixes i les animacions
     queden sense intenció. Mai ease-in en UI — arrenca lent justament
     quan l'usuari mira. */
  --surt:    cubic-bezier(.23, 1, .32, 1);      /* entrades i sortides */
  --recorre: cubic-bezier(.77, 0, .175, 1);     /* moviment en pantalla */

  --transicio: 200ms var(--surt);
  --premuda: 140ms var(--surt);
}

/* --- Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--blau-fosc);
  font: 400 16px/1.6 var(--tip-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--tip-titol);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 .85em; }
p:last-child { margin-bottom: 0; }

/* El navegador dona a figure un marge de 40px per costat que
   s'endú l'amplada de la columna sencera. */
figure { margin: 0; }

a { color: var(--blau-marca); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blau-tinta); }

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

:focus-visible {
  outline: 2px solid var(--blau-marca);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Utilitats --------------------------------------------- */
.embolcall {
  width: 100%;
  max-width: var(--ample);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.oculta-visualment {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Enllaç de salt */
.salta {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--blau-fosc); color: #fff;
  padding: .6rem 1.1rem; border-radius: 0 0 var(--r) var(--r);
  font: 600 .875rem var(--tip-titol); text-decoration: none;
  transition: transform var(--transicio);
}
.salta:focus { transform: translate(-50%, 0); color: #fff; }

/* El destí del salt és focusable per programa, però no ha de
   dibuixar un anell quan s'hi arriba. */
main:focus { outline: none; }

/* Marcador de secció — anella fina, motiu de trocar */
.ull {
  display: flex; align-items: center; gap: .55rem;
  font: 600 .6875rem/1 var(--tip-titol);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--verd);
  margin-bottom: .6rem;
}
.ull::before {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border: 1.5px solid var(--verd-graf);
  border-radius: 50%;
}

.cap-seccio { margin-bottom: 1.5rem; }
.cap-seccio h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.cap-seccio p {
  color: var(--gris); max-width: 62ch;
  margin-top: .4rem; font-size: .9375rem;
}

section { padding-block: var(--pas); }

/* Seccions alternes: el canvi de fons delimita cada bloc sense
   afegir alçada, que és el que costa la densitat. */
.sec-blanca {
  background: var(--card);
  border-block: 1px solid var(--linia);
}

/* Mesh de fons per a Presentació, Tècniques i Consulta: el mateix
   --paper de sempre, amb dos taques radials molt suaus en blau i
   verd de marca perquè la banda no quedi plana sense trencar el
   to "clínic precís" de la resta del lloc. */
.sec-fons {
  background:
    radial-gradient(ellipse 62% 55% at 12% -6%,  rgba(47, 95, 191, .08), transparent 62%),
    radial-gradient(ellipse 58% 50% at 104% 108%, rgba(23, 117, 106, .07), transparent 65%),
    var(--paper);
}

/* --- Botons ------------------------------------------------ */
.bt {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .6rem 1.15rem;
  border: 1px solid transparent; border-radius: var(--r);
  font: 600 .9375rem/1 var(--tip-titol); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: background var(--transicio), border-color var(--transicio),
              color var(--transicio), transform var(--premuda);
}
.bt svg { width: 16px; height: 16px; flex: none; }
/* Escala en comptes de desplaçar: el botó respon al dit, i el text
   i la icona escalen amb ell. */
.bt:active { transform: scale(.97); }

.bt-ple { background: var(--blau-marca); color: #fff; }
.bt-ple:hover { background: var(--blau-tinta); color: #fff; }

.bt-linia {
  background: transparent; color: var(--blau-fosc);
  border-color: var(--linia-forta);
}
.bt-linia:hover { border-color: var(--blau-marca); color: var(--blau-marca); }

.bt-clar {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-color: rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
}
.bt-clar:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }

/* ============================================================
   CAPÇALERA
   ============================================================ */
.cap {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linia);
}
.cap .embolcall {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 64px;
}

/* Wordmark recreat amb tipografia */
.marca { text-decoration: none; display: block; flex: none; }
.marca b {
  display: block;
  font: 600 1.25rem/1.1 var(--tip-titol);
  letter-spacing: -.025em; color: var(--blau-fosc);
}
.marca span {
  display: block; margin-top: 2px;
  font: 500 .625rem/1 var(--tip-titol);
  letter-spacing: .11em; text-transform: uppercase; color: var(--gris);
}
.marca:hover b { color: var(--blau-marca); }

/* Navegació */
.nav { margin-left: auto; }
.nav > ul {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.nav a, .nav button {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .7rem; border: 0; background: none;
  font: 500 .9375rem/1 var(--tip-titol); color: var(--blau-fosc);
  text-decoration: none; border-radius: var(--r); cursor: pointer;
  transition: background var(--transicio), color var(--transicio);
}
.nav a:hover, .nav button:hover { background: #EDF2FA; color: var(--blau-marca); }
.nav [aria-current="page"] { color: var(--blau-marca); font-weight: 600; }

.nav .fletxa { width: 12px; height: 12px; transition: transform var(--transicio); }
.nav [aria-expanded="true"] .fletxa { transform: rotate(180deg); }
.nav [aria-expanded="true"] { background: #EDF2FA; color: var(--blau-marca); }

.desplega { position: relative; }
.desplega > ul {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 250px; padding: .35rem; margin: 0;
  list-style: none; background: var(--card);
  border: 1px solid var(--linia); border-radius: var(--r);
  box-shadow: var(--ombra-alt);

  /* Escala des del botó que l'obre, no des del centre. */
  transform-origin: top left;
  opacity: 0; visibility: hidden;
  transform: scale(.97) translateY(-4px);
  transition: opacity 170ms var(--surt),
              transform 170ms var(--surt),
              visibility 170ms;
}
.desplega > ul[data-obert] {
  opacity: 1; visibility: visible; transform: none;
}
.desplega > ul a {
  display: block; padding: .55rem .7rem;
  font-size: .875rem; font-weight: 400;
}

/* Bloc de contacte a la dreta */
.cap-accio { display: flex; align-items: center; gap: .85rem; flex: none; }
.cap-tel {
  display: flex; align-items: center; gap: .4rem;
  font: 600 .875rem var(--tip-titol); color: var(--blau-fosc);
  text-decoration: none; white-space: nowrap;
}
.cap-tel svg { width: 15px; height: 15px; color: var(--verd); }
.cap-tel:hover { color: var(--blau-marca); }

/* Botó del menú mòbil */
.hamburguesa {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linia);
  border-radius: var(--r); cursor: pointer; color: var(--blau-fosc);
}
.hamburguesa svg { width: 20px; height: 20px; }
.hamburguesa .tanca, .hamburguesa[aria-expanded="true"] .obre { display: none; }
.hamburguesa[aria-expanded="true"] .tanca { display: block; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(380px, 52vh, 560px);
  padding: 0; overflow: hidden;
  background: var(--blau-fosc);
}
.hero > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(16, 36, 63, .94) 0%, rgba(16, 36, 63, .78) 42%,
                            rgba(16, 36, 63, .30) 72%, rgba(16, 36, 63, .12) 100%),
    linear-gradient(to top, rgba(16, 36, 63, .55), transparent 55%);
}
.hero .embolcall { padding-block: clamp(2rem, 5vw, 3.25rem); }
.hero-cos { max-width: 44rem; color: #fff; }

.hero .ull { color: #8FD4C7; }
.hero .ull::before { border-color: #8FD4C7; }

.hero h1 {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.06;
  color: #fff;
}
.hero h1 em {
  font-style: normal; display: block;
  color: #A9C6F5; font-weight: 500;
}
.hero-entrada {
  margin: 1rem 0 1.5rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55; color: #D6E2F2; max-width: 40rem;
}
.hero-bts { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Entrada del hero — es veu un cop per visita, així que pot durar
   una mica més del límit de 300ms que val per a la UI repetitiva.
   L'escalonat marca la jerarquia: etiqueta, titular, entrada, accions. */
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-cos > * { animation: hero-entra 440ms var(--surt) both; }
.hero-cos > :nth-child(1) { animation-delay:  40ms; }
.hero-cos > :nth-child(2) { animation-delay:  95ms; }
.hero-cos > :nth-child(3) { animation-delay: 150ms; }
.hero-cos > :nth-child(4) { animation-delay: 195ms; }  /* el CTA, el primer que ha d'arribar */

/* La fotografia s'assenta enrere mentre entra el text. Molt subtil:
   only transform, i prou lent perquè no es llegeixi com un efecte. */
@keyframes hero-assenta {
  from { transform: scale(1.03); }
  to   { transform: scale(1); }
}
.hero > img { animation: hero-assenta 1200ms var(--surt) both; }

/* ============================================================
   BARRA DE CREDENCIALS — element signatura
   ============================================================ */
.credencials {
  background: var(--card);
  border-bottom: 1px solid var(--linia);
  padding: 0;
}
.credencials .embolcall {
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  padding-inline: 0;
  scrollbar-width: thin;
}
.credencials > .embolcall > div {
  flex: 1 0 220px;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.6rem);
  border-left: 1px solid var(--linia);
}
.credencials > .embolcall > div:first-child { border-left: 0; }

.credencials b {
  display: block;
  font: 600 1.375rem/1.1 var(--tip-titol);
  letter-spacing: -.02em; color: var(--blau-fosc);
}
.credencials b.curt { font-size: 1.0625rem; line-height: 1.25; }
.credencials span {
  display: block; margin-top: .3rem;
  font-family: var(--tip-titol);
  font-size: .8125rem; line-height: 1.35; color: var(--gris);
}

/* ============================================================
   PRESENTACIÓ
   ============================================================ */
.presenta {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.retrat {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--linia); box-shadow: var(--ombra);
  background: var(--card);
}
.retrat img { width: 100%; aspect-ratio: 491 / 427; object-fit: cover; }
.retrat figcaption {
  padding: .75rem 1rem;
  border-top: 1px solid var(--linia);
  font: 500 .8125rem/1.4 var(--tip-titol); color: var(--gris);
}
.retrat figcaption b {
  display: block; font-size: .9375rem; font-weight: 600;
  color: var(--blau-fosc); margin-bottom: 1px;
}

.presenta-text p { font-size: 1.0625rem; line-height: 1.65; }
.presenta-text .primera {
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.45; font-weight: 600;
  font-family: var(--tip-titol); letter-spacing: -.015em;
  color: var(--blau-fosc); margin-bottom: 1rem;
}
.signatura {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--linia);
  font: 500 .875rem var(--tip-titol); color: var(--gris);
}

/* ============================================================
   TÈCNIQUES — graella compacta
   ============================================================ */
.graella-tec {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tec {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--ombra);
  transition: border-color var(--transicio), box-shadow var(--transicio),
              transform var(--transicio);
}
/* Guarda de tàctil: sense això, tocar la targeta al mòbil dispara el
   :hover i es queda aixecada fins que toques una altra cosa.
   El selector porta el pare perquè .reveal.vist també fixa transform
   amb la mateixa especificitat i, en anar després al fitxer, guanyava. */
@media (hover: hover) and (pointer: fine) {
  .graella-tec .tec:hover {
    border-color: var(--linia-forta);
    box-shadow: var(--ombra-alt);
    transform: translateY(-2px);
    color: inherit;
  }
}
.graella-tec .tec:active { transform: scale(.995); }
.tec-img {
  position: relative; background: #E7EDF6;
  border-bottom: 1px solid var(--linia);
}
.tec-img img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  /* Les il·lustracions anatòmiques venen molt saturades i trenquen la
     paleta; es calmen en repòs i recuperen el color en interactuar. */
  filter: saturate(.86);
  transition: transform 400ms cubic-bezier(.2, .6, .2, 1),
              filter 300ms cubic-bezier(.2, .6, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tec:hover .tec-img img { transform: scale(1.035); filter: saturate(1); }
  .tec:hover .tec-mes svg { transform: translateX(3px); }
}
.tec:focus-visible .tec-img img { transform: scale(1.035); filter: saturate(1); }

.tec-cos { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.tec h3 { font-size: 1rem; margin-bottom: .3rem; }
.tec p {
  font-size: .875rem; line-height: 1.5; color: var(--gris);
  margin-bottom: .75rem;
}
.tec-mes {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .3rem;
  font: 600 .8125rem var(--tip-titol); color: var(--blau-marca);
}
.tec-mes svg { width: 13px; height: 13px; transition: transform var(--transicio); }

/* ============================================================
   GALERIA D'IMATGES — mateix vocabulari que .graella-tec, però
   la targeta obre un visor en comptes de navegar a una pàgina.
   ============================================================ */
.galeria-graella {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.foto {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden;
}
/* Especificitat més alta que ".article a:hover" (que subratlla els
   enllaços en prosa) perquè aquí la targeta sencera és el clicable,
   no una paraula dins d'un paràgraf. */
.galeria-graella .foto:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .foto:hover {
    border-color: var(--linia-forta);
    box-shadow: var(--ombra-alt);
    transform: translateY(-2px);
  }
}
.foto { transition: transform var(--premuda), box-shadow var(--transicio), border-color var(--transicio); }
.foto:active { transform: scale(.995); }
.foto-img { display: block; position: relative; background: #E7EDF6; overflow: hidden; }
.foto-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms var(--recorre); }
@media (hover: hover) and (pointer: fine) {
  .foto:hover .foto-img img { transform: scale(1.035); }
}
.foto-peu {
  display: block;
  padding: .7rem .9rem; font-size: .8125rem; line-height: 1.5; color: var(--gris);
  text-align: center;
}

/* Visor a pantalla completa amb :target — sense JS ni llibreria de
   lightbox, coherent amb la resta del lloc (vanilla). */
.visor {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: rgba(10, 22, 40, .92);
  opacity: 0; visibility: hidden;
  transition: opacity 220ms var(--surt), visibility 220ms;
}
.visor:target { opacity: 1; visibility: visible; }
.visor-cos { max-width: min(92vw, 900px); text-align: center; }
.visor-cos img {
  max-width: 100%; max-height: 78vh; border-radius: var(--r); box-shadow: var(--ombra-alt);
}
.visor-cos figcaption { margin-top: 1rem; color: #EAF0FB; font: 500 .9375rem/1.5 var(--tip-titol); }
.visor-tanca {
  position: absolute; top: 1.1rem; right: 1.25rem;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  transition: background 160ms var(--surt);
}
.visor-tanca:hover { background: rgba(255, 255, 255, .22); }

/* ============================================================
   TRAJECTÒRIA
   ============================================================ */
/* Entradeta de secció: context abans de la graella. */
.tra-intro {
  max-width: 60ch; margin-bottom: 1.5rem;
  font-size: 1rem; line-height: 1.6; color: var(--gris);
}
.tra-intro b { color: var(--blau-fosc); font-weight: 600; }

.enllacos-tra {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.enllac-tra {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .55rem; padding: 1.15rem 1.1rem 1rem;
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--r); text-decoration: none;
  transition: border-color var(--transicio), background var(--transicio),
              transform var(--transicio), box-shadow var(--transicio);
}
@media (hover: hover) and (pointer: fine) {
  .enllacos-tra .enllac-tra:hover {
    border-color: var(--blau-marca); background: #F0F5FE;
    transform: translateY(-2px); box-shadow: var(--ombra-alt);
  }
}
.enllacos-tra .enllac-tra:active { transform: scale(.99); }

/* Icona en anella, mateix motiu de trocar que els eyebrows. */
.tra-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1.5px solid var(--verd-graf); border-radius: 50%;
  color: var(--verd); background: var(--card);
  transition: background var(--transicio), color var(--transicio);
}
.tra-ic svg { width: 18px; height: 18px; }
.enllac-tra:hover .tra-ic { background: var(--verd-graf); color: #fff; }

.enllac-tra b {
  font: 600 .9375rem/1.3 var(--tip-titol); color: var(--blau-fosc);
}
.enllac-tra span {
  font-family: var(--tip-titol);
  font-size: .8125rem; line-height: 1.4; color: var(--gris);
}
.tra-anar {
  margin-top: auto; padding-top: .35rem;
  display: inline-flex; align-items: center; gap: .3rem;
  font: 600 .8125rem var(--tip-titol); color: var(--blau-marca);
}
.tra-anar svg { width: 13px; height: 13px; transition: transform var(--transicio); }
@media (hover: hover) and (pointer: fine) {
  .enllac-tra:hover .tra-anar svg { transform: translateX(3px); }
}

/* ============================================================
   MITJANS
   ============================================================ */
.graella-vid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Sense caixa al voltant: la vora i el coixí feien que el vídeo
   es percebés més petit del que és. */
.vid { margin: 0; }
.vid-marc {
  aspect-ratio: 16 / 9; background: var(--blau-fosc);
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--linia); box-shadow: var(--ombra);
}
.vid-marc iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid figcaption { padding: .7rem .15rem 0; }
.vid figcaption b {
  display: block; font: 600 .9375rem/1.35 var(--tip-titol); color: var(--blau-fosc);
}
.vid figcaption span {
  display: block; margin-top: 2px;
  font-family: var(--tip-titol); font-size: .75rem; color: var(--gris);
  letter-spacing: .04em; text-transform: uppercase;
}

/* ============================================================
   CONTACTE
   ============================================================ */
.graella-cont {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
#mapa {
  /* Alçada acotada: Leaflet no aporta alçada pròpia i un height:100%
     dins d'un grid sense alçada definida es dispara. */
  width: 100%;   /* sense això, min-height + aspect-ratio inflen l'amplada */
  aspect-ratio: 4 / 3;
  min-height: 320px; max-height: 380px;   /* a l'alçada de la fitxa del costat */
  border: 1px solid var(--linia); border-radius: var(--r);
  background: #E7EDF6; z-index: 0;
}
.fitxa { display: flex; flex-direction: column; gap: 1rem; }

.dades {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem;
}
.dades li { display: grid; grid-column: 1 / -1; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; }
/* Consulta i Atenció continuada, un al costat de l'altre: són el
   mateix tipus de dada (telèfon) i caben còmodes en dues columnes. */
.dades li.dades-mitja { grid-column: auto; }
.dades svg { width: 16px; height: 16px; color: var(--verd); margin-top: 3px; }
.dades b {
  display: block; font: 600 .875rem/1.4 var(--tip-titol); color: var(--blau-fosc);
}
.dades span, .dades a {
  display: block; font-size: .875rem; line-height: 1.5; color: var(--gris);
}
.dades a { color: var(--blau-marca); text-decoration: none; }
.dades a:hover { text-decoration: underline; }

/* ============================================================
   FORMULARI DE CONTACTE
   ============================================================ */
.formulari { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.camp-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.camp-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.camp { display: flex; flex-direction: column; gap: .4rem; }
.camp label {
  font: 600 .8125rem var(--tip-titol); color: var(--blau-fosc);
}
.camp input, .camp textarea {
  font: 400 .9375rem/1.5 var(--tip-titol); color: var(--blau-fosc);
  padding: .65rem .85rem;
  border: 1px solid var(--linia); border-radius: var(--r);
  background: var(--card);
  transition: border-color 160ms var(--surt), box-shadow 160ms var(--surt);
}
.camp input:focus, .camp textarea:focus {
  outline: none; border-color: var(--blau-marca);
  box-shadow: 0 0 0 3px rgba(47, 95, 191, .15);
}
.camp textarea { resize: vertical; min-height: 110px; }
.consentiment {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .8125rem; line-height: 1.5; color: var(--gris);
}
.consentiment input { margin-top: .2rem; flex: none; accent-color: var(--blau-marca); }
.consentiment a { color: var(--blau-marca); text-decoration: none; }
.consentiment a:hover { text-decoration: underline; }
.formulari .bt { justify-self: start; }

/* --- Avís d'enviament -----------------------------------------
   Confirmació o error després d'enviar el formulari. Reprèn el
   marcador de 3px del correu que rep el pacient, perquè pantalla
   i safata d'entrada es reconeguin com una mateixa resposta. */
.avis {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-top: 1.5rem; padding: .9rem 1.1rem;
  border: 1px solid var(--linia);
  border-left: 3px solid var(--verd-graf);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--ombra);
  animation: avis-entra 320ms var(--surt) both;
}
.avis svg { flex: none; margin-top: .15rem; color: var(--verd); }
.avis b {
  display: block;
  font: 600 .875rem var(--tip-titol); letter-spacing: -.01em;
  color: var(--blau-fosc);
}
.avis p { margin: .2rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--gris); }
.avis a { color: var(--blau-marca); }
.avis:focus { outline: none; }
.avis:focus-visible { outline: 2px solid var(--blau-marca); outline-offset: 3px; }

.avis-error { border-left-color: var(--roig); }
.avis-error svg { color: var(--roig); }

@keyframes avis-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   FRANJA D'ACREDITACIÓ — tota l'amplada, abans del peu
   ============================================================ */
.acreditacio {
  background: var(--card);
  border-top: 1px solid var(--linia);
  padding-block: 1.5rem;
}
.acreditacio .embolcall {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) minmax(260px, 1.6fr);
  gap: 1rem clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}
.acr-segell { display: block; flex: none; line-height: 0; }
/* Alçada fixa i amplada lliure: el servei valida el Referer i fora del
   domini real torna un GIF d'1x21 px. Acotant l'alçada, el pitjor cas
   és una imatge estreta; acotant l'amplada, es dispararia en vertical. */
.acr-segell img { height: 50px; width: auto; max-width: 90px; }

.acreditacio b {
  display: block; margin-bottom: .15rem;
  font: 600 .875rem/1.3 var(--tip-titol); color: var(--blau-fosc);
}
.acreditacio p {
  margin: 0; font-family: var(--tip-titol);
  font-size: .78125rem; line-height: 1.5; color: var(--gris);
}
.acr-avis {
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 1px solid var(--linia);
}

/* ============================================================
   PEU
   ============================================================ */
.peu {
  background: var(--blau-fosc); color: #A9BAD0;
  padding-block: 1.75rem;
  font-family: var(--tip-titol); font-size: .8125rem;
}
.peu .embolcall {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.peu nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.peu a { color: #D6E2F2; text-decoration: none; }
.peu a:hover { color: #fff; text-decoration: underline; }
.peu :focus-visible { outline-color: #8FD4C7; }

/* --- Informació legal -------------------------------------- */
.pagina-cap { padding-block: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--linia); }
.pagina-cap h1 { max-width: 18ch; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.pagina-cap .pagina-lead { max-width: 48rem; margin-top: .9rem; }
.legal { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.legal-graella { display: grid; grid-template-columns: 210px minmax(0, 760px); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.legal-index { position: sticky; top: calc(64px + 1.5rem); display: flex; flex-direction: column; gap: .15rem; }
.legal-index p { margin-bottom: .55rem; font: 600 .6875rem/1 var(--tip-titol); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.legal-index a { padding: .45rem .65rem; border-left: 2px solid var(--linia); color: var(--gris); font: 500 .8125rem/1.35 var(--tip-titol); text-decoration: none; }
.legal-index a:hover { border-left-color: var(--blau-marca); background: #F0F5FE; color: var(--blau-marca); }
.legal-article { max-width: none; }
.legal-article > .legal-seccio { margin-top: 0; }
.legal-seccio { scroll-margin-top: 90px; padding-block: 1rem; border-top: 0; border-bottom: 1px solid var(--linia); }
.legal-seccio:first-child { padding-top: 0; }
.legal-seccio:last-child { border-bottom: 0; }
.legal-article h2 { margin-top: 0; padding-top: 0; border: 0; }
.legal-seccio h2 { margin-bottom: .5rem; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.legal-seccio p + p { margin-top: .7rem; }
.legal-article ul { margin: .75rem 0 0; padding-left: 1.2rem; }
.legal-article li { margin-top: .3rem; padding-left: .15rem; }
.legal-article li:first-child { margin-top: 0; }
.legal-article code { padding: .12rem .3rem; background: #EDF2FA; border-radius: 3px; font: .85em var(--tip-titol); color: var(--blau-fosc); }
.legal-fitxa { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.25rem 0 0; }
.legal-fitxa div { padding: .85rem 1rem; background: var(--paper); border: 1px solid var(--linia); border-radius: var(--r); }
.legal-fitxa dt { font: 600 .6875rem/1.2 var(--tip-titol); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.legal-fitxa dd { margin: .3rem 0 0; font: 500 .875rem/1.4 var(--tip-titol); color: var(--blau-fosc); }
.legal-taula { display: grid; gap: .5rem; margin: .9rem 0; }
.legal-taula div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .9rem 1rem; background: var(--paper); border: 1px solid var(--linia); border-radius: var(--r); }
.legal-taula b { font: 600 .8125rem/1.4 var(--tip-titol); color: var(--blau-fosc); }
.legal-taula span { font-size: .875rem; line-height: 1.5; color: var(--gris); }
.legal-data { font: 600 .8125rem var(--tip-titol); color: var(--gris); }

/* ============================================================
   Banner de cookies (gestionat per assets/js/lc.js)
   ============================================================ */
.cookiealert {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: 1.25rem; z-index: 150;
  width: min(27rem, calc(100vw - 2rem));
  margin: 0; padding: 1.35rem;
  background: rgba(16, 36, 63, .78); color: #D6E2F2;
  border: 1px solid rgba(255, 255, 255, .24); border-top: 3px solid rgba(143, 212, 199, .9);
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(10, 22, 40, .25), inset 0 1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  font-family: var(--tip-titol); font-size: .8125rem; line-height: 1.5;
  /* La targeta queda fora de pantalla fins que el consentiment és necessari. */
  opacity: 0; visibility: hidden; transform: translateY(calc(100% + 1.5rem));
  transition: opacity 240ms var(--surt), transform 240ms var(--surt), visibility 240ms;
}
.cookiealert.show { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 180ms; }
.cookiealert > div {
  display: block;
}
.cookiealert p { margin: 0 0 1.1rem; color: #D6E2F2; }
.cookiealert p::before {
  content: "Privacitat i cookies";
  display: block; margin-bottom: .35rem;
  color: #fff;
  font: 600 1rem/1.2 var(--tip-titol); letter-spacing: -.015em;
}
.cookiealert a { color: #8FD4C7; font-weight: 600; white-space: nowrap; }
.cookiealert .bts { display: flex; justify-content: flex-start; gap: .5rem; }
.cookiealert .bt { min-height: 40px; padding: .55rem .95rem; font-size: .8125rem; }
.cookiealert :focus-visible { outline-color: var(--verd-graf); }

/* ============================================================
   PÀGINA DE TÈCNICA — capçalera, índex lateral, article, línia
   de temps. Reutilitza els tokens i el .sec-fons de la portada;
   no introdueix cap color ni tipografia nova.
   ============================================================ */

/* --- Camí de navegació -------------------------------------- */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font: 500 .8125rem/1.3 var(--tip-titol); color: var(--gris);
  margin-bottom: 1.1rem;
}
.crumb a { color: var(--gris); text-decoration: none; }
.crumb a:hover { color: var(--blau-marca); }
.crumb span[aria-current] { color: var(--blau-fosc); font-weight: 600; }
.crumb .sep { color: var(--linia-forta); }

/* --- Capçalera de pàgina -------------------------------------
   Variant curta del .hero de la portada: mateixa imatge a sang +
   degradat de marca, però amb menys alçada perquè aquí el titular
   no és el missatge principal del lloc, és el de la pàgina. */
.pagina-hero { min-height: clamp(220px, 34vw, 380px); }
.pagina-hero .hero-cos { max-width: 46rem; }
.pagina-hero .hero-entrada { margin-bottom: 0; }

.crumb-clar { color: rgba(255, 255, 255, .7); margin-bottom: .9rem; }
.crumb-clar a { color: rgba(255, 255, 255, .88); }
.crumb-clar a:hover { color: #fff; }
.crumb-clar span[aria-current] { color: #fff; }
.crumb-clar .sep { color: rgba(255, 255, 255, .4); }

.pagina-lead {
  margin-top: .85rem; max-width: 58ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--gris);
}

/* --- Graella de contingut: índex lateral + article ----------- */
.pagina-cos {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.lateral {
  position: sticky; top: calc(64px + 1.5rem);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.lateral-titol {
  font: 600 .6875rem/1 var(--tip-titol);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .65rem;
}
.lateral-nav ul {
  list-style: none; margin: 0; padding: 0;
  border-left: 2px solid var(--linia);
}
.lateral-nav a {
  display: block; margin-left: -2px; padding: .5rem .9rem;
  border-left: 2px solid transparent;
  font: 500 .875rem/1.3 var(--tip-titol); color: var(--gris);
  text-decoration: none;
  transition: color var(--transicio), border-color var(--transicio), background var(--transicio);
}
.lateral-nav a:hover { color: var(--blau-marca); background: #F0F5FE; }
.lateral-nav a[aria-current="page"] {
  color: var(--blau-marca); font-weight: 600;
  border-left-color: var(--blau-marca); background: #F0F5FE;
}
.lateral-cta {
  padding: 1.1rem; background: var(--paper);
  border: 1px solid var(--linia); border-radius: var(--r);
}
.lateral-cta p { font: 500 .875rem/1.4 var(--tip-titol); color: var(--blau-fosc); margin-bottom: .8rem; }
.lateral-cta .bt { width: 100%; justify-content: center; }

/* --- Cos de l'article ------------------------------------------ */
.article { font-size: 1.0625rem; line-height: 1.7; }
.article > * + * { margin-top: 1.1em; }
.article h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-top: 2.25rem;
}
.article > h2:first-child { margin-top: 0; }
.article .def {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 600; font-family: var(--tip-titol);
  letter-spacing: -.01em; color: var(--blau-fosc);
}
.article p { color: var(--blau-fosc); }
.article p.text-secundari, .article .fita p { color: var(--gris); }
.article a { text-decoration: none; }
.article a:hover { text-decoration: underline; }

/* Nota al marge del cos principal: una precisió que val la pena
   destacar sense que sembli un avís mèdic. */
.article .nota {
  padding: .9rem 1.1rem;
  background: var(--paper);
  border-left: 3px solid var(--verd-graf);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .9375rem; color: var(--gris);
}
.article .nota b { color: var(--verd); font-weight: 600; }

/* Llista neta: punts curts sense el pes visual de les targetes
   .avantatge — per a fets, no per a beneficis. */
.llista-neta { list-style: none; margin: 1.1em 0 0; padding: 0; display: grid; gap: .6rem; }
.llista-neta li {
  position: relative; padding-left: 1.3rem;
  font-size: .9375rem; line-height: 1.6; color: var(--blau-fosc);
}
.llista-neta li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verd-graf);
}

/* Text a dues columnes amb una figura al costat — només per a les
   dues úniques imatges que acompanyen text corregut, no un patró
   que es repeteixi a cada paràgraf. */
.art-costat {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem); align-items: start;
  margin-top: 1.1em;
}
.art-fig { margin: 0; }
.art-fig img {
  width: 100%; border-radius: var(--r);
  border: 1px solid var(--linia); box-shadow: var(--ombra);
}
.art-fig figcaption {
  margin-top: .55rem;
  font: 500 .8125rem/1.4 var(--tip-titol); color: var(--gris);
}

/* --- Graella d'avantatges ----------------------------------------
   Mateix anell d'icona que .tra-ic a la portada: no és un component
   nou, és el mateix vocabulari aplicat a una llista de beneficis. */
.avantatges-graella {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
.avantatge {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.1rem 1.2rem;
  background: var(--paper); border: 1px solid var(--linia); border-radius: var(--r);
}
.avantatge-ic {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--verd-graf); color: var(--verd);
  background: var(--card);
}
.avantatge-ic svg { width: 15px; height: 15px; }
.avantatge h3 { font-size: .9375rem; margin-bottom: .3rem; }
.avantatge p { font-size: .875rem; line-height: 1.55; color: var(--gris); margin: 0; }

/* --- Llista d'aplicacions (terme + definició) --------------------
   Catàleg de procediments: no són "avantatges" (no porten check),
   són entrades d'un glossari, per això és una <dl> a dues columnes
   en comptes de reutilitzar les targetes .avantatge. */
.aplicacions-llista {
  display: grid; gap: 1.1rem 2rem;
  grid-template-columns: 1fr 1fr;
  margin: 1.5rem 0 0; padding: 0;
}
.aplicacio dt { font: 600 .9375rem/1.3 var(--tip-titol); color: var(--blau-fosc); margin-bottom: .25rem; }
.aplicacio dt a { text-decoration: none; }
.aplicacio dt a:hover { text-decoration: underline; }
.aplicacio dd { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--gris); }

/* --- Enllaços externs (societats, associacions) ------------------
   Cadascun porta el seu propi logotip, de mides molt variades, per
   això és una icona quadrada amb "contain" i no l'anella .avantatge-ic. */
.recursos { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.recurs {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--card); border: 1px solid var(--linia); border-radius: var(--r);
}
.recurs-ic {
  flex: none; width: 46px; height: 46px; padding: .4rem;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--linia); border-radius: 10px;
}
.recurs-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.recurs h3 { font-size: .9375rem; margin-bottom: .3rem; }
.recurs h3 a { text-decoration: none; color: var(--blau-fosc); }
.recurs h3 a:hover { text-decoration: underline; }
.recurs p { font-size: .8125rem; line-height: 1.55; color: var(--gris); margin: 0; }

/* --- Línia de temps ---------------------------------------------
   Signatura d'aquesta pàgina: el relat històric és una seqüència
   real amb anys, així que la seqüència es fa visible, a diferència
   de la resta del lloc, que evita marcadors numerats sense sentit. */
.linia-temps { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.fita {
  position: relative;
  padding: 0 0 2.25rem 1.9rem;
  border-left: 2px solid var(--linia-forta);
}
.fita:last-child { border-left-color: transparent; padding-bottom: 0; }
.fita::before {
  content: ""; position: absolute; left: -8px; top: .3rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--verd-graf); border: 3px solid var(--paper);
}
.fita-any {
  display: inline-block; margin-bottom: .5rem;
  font: 700 .75rem/1 var(--tip-titol); letter-spacing: .02em;
  color: var(--blau-marca); background: #EDF2FA;
  padding: .25rem .6rem; border-radius: 999px;
}
.fita h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.fita .art-fig { margin-top: 1rem; max-width: 380px; }
.fita .art-fig figcaption { font-size: .75rem; }
.fita .art-fig--petita { max-width: 160px; }

/* Filtre per any: mateixa pastilla visual que .fita-any però
   interactiva, per navegar línies de temps llargues (ponències,
   cirurgia en directe) sense inventar un component de pestanyes nou. */
.filtre-anys {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.5rem;
}
.fa-pill {
  font: 700 .75rem/1 var(--tip-titol); letter-spacing: .02em;
  color: var(--blau-marca); background: #EDF2FA;
  border: 1px solid transparent; border-radius: 999px;
  padding: .4rem .85rem; cursor: pointer;
  transition: background 160ms var(--surt), color 160ms var(--surt), transform var(--premuda);
}
.fa-pill:hover { background: #E3EBFA; }
.fa-pill:active { transform: scale(.97); }
.fa-pill[aria-selected="true"] { background: var(--blau-marca); color: #fff; }
.linia-temps .fita[hidden] { display: none; }
/* Perquè les fites que apareixen en canviar de filtre no ho facin
   de cop: lc.js hi injecta l'estat de sortida (opacity/transform
   inline) i deixa que aquesta transició les porti a l'estat final. */
.js-motion .linia-temps .fita {
  transition: opacity 220ms var(--surt), transform 220ms var(--surt);
}

/* ============================================================
   Moviment — revelat en scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(10px); }
.js-motion .reveal {
  transition: opacity 380ms var(--surt), transform 380ms var(--surt);
}
.reveal.vist { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hamburguesa { display: inline-flex; }
  .cap .embolcall { gap: .75rem; }
  .cap-accio { display: none; }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border-bottom: 1px solid var(--linia);
    box-shadow: var(--ombra-alt);
    padding: .5rem var(--marge) 1rem;
    max-height: calc(100vh - 64px); overflow-y: auto;
    display: none; margin-left: 0;
  }
  .nav[data-obert] { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-top: 1px solid var(--linia); }
  .nav > ul > li:first-child { border-top: 0; }
  .nav a, .nav button {
    width: 100%; justify-content: space-between;
    padding: .8rem .25rem; font-size: 1rem;
  }
  /* En acordió el submenú no flota: torna a display, sense escala. */
  .desplega > ul {
    position: static; display: none; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 .5rem .9rem;
    background: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .desplega > ul[data-obert] { display: block; }
  .desplega > ul a { padding: .6rem .25rem; font-size: .9375rem; }

  .presenta, .graella-cont, .pagina-cos, .art-costat, .aplicacions-llista, .camp-fila, .dades { grid-template-columns: 1fr; }
  .legal-graella { grid-template-columns: 1fr; gap: 2rem; }
  .legal-index { position: static; flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .legal-index p { width: 100%; }
  .legal-index a { border: 1px solid var(--linia); border-radius: 999px; padding: .45rem .8rem; }
  .legal-index a:hover { border-color: var(--blau-marca); }

  /* L'índex lateral deixa de ser fix i es converteix en una fila
     de pastilles horitzontals; la crida a l'acció ja és accessible
     des de la capçalera, així que aquí només distrauria. */
  .lateral { position: static; flex-direction: row; flex-wrap: wrap; }
  .lateral-titol { width: 100%; }
  .lateral-nav ul { display: flex; flex-wrap: wrap; gap: .4rem; border-left: 0; }
  .lateral-nav a {
    margin-left: 0; border: 1px solid var(--linia); border-radius: 999px;
    padding: .45rem .9rem;
  }
  .lateral-nav a[aria-current="page"] { border-color: var(--blau-marca); }
  .lateral-cta { display: none; }

  /* L'avís passa sota el segell i el text, sense filet vertical. */
  .acreditacio .embolcall { grid-template-columns: auto 1fr; }
  .acr-avis {
    grid-column: 1 / -1;
    padding: .9rem 0 0; border-left: 0;
    border-top: 1px solid var(--linia);
  }
  .retrat { max-width: 320px; }
  #mapa { min-height: 300px; }
}

/* A pantalla estreta el degradat diagonal deixa el text sobre zones clares
   de la foto: el substituïm per un vel vertical prou opac. */
@media (max-width: 760px) {
  .hero::after {
    background: linear-gradient(to top,
      rgba(16, 36, 63, .96) 25%, rgba(16, 36, 63, .82) 65%, rgba(16, 36, 63, .62) 100%);
  }
}

@media (max-width: 560px) {
  /* Targetes en horitzontal: 5 targetes verticals eren massa scroll. */
  .tec { flex-direction: row; }
  .tec-img {
    flex: none; width: 108px;
    border-bottom: 0; border-right: 1px solid var(--linia);
  }
  .tec-img img { height: 100%; aspect-ratio: auto; }
  .tec-cos { padding: .8rem .9rem; }
  .tec p { margin-bottom: .6rem; }

  .hero-bts .bt { flex: 1 1 100%; justify-content: center; }
  .cookiealert {
    right: 0; bottom: 0; width: 100%;
    padding: 1.15rem var(--marge) calc(1.15rem + env(safe-area-inset-bottom));
    border-radius: 10px 10px 0 0;
    transform: translateY(100%);
  }
  .cookiealert.show { transform: translateY(0); }
  .cookiealert .bts { margin-left: 0; width: 100%; }
  .cookiealert .bts .bt { flex: 1; justify-content: center; }
  .legal-fitxa, .legal-taula div { grid-template-columns: 1fr; gap: .3rem; }
}

/* ============================================================
   Preferències de moviment i impressió
   ============================================================ */
/* Moviment reduït no vol dir cap animació: vol dir cap desplaçament.
   Els canvis de color i d'opacitat es conserven perquè ajuden a
   entendre l'estat; el que s'elimina és tot el que es mou de lloc. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;      /* sense això els escalonats deixen buits */
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
  }

  /* Cap transformació enlloc. */
  .hero-cos > *, .hero > img { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .bt:active, .fa-pill:active,
  .graella-tec .tec:active, .graella-tec .tec:hover,
  .galeria-graella .foto:active, .galeria-graella .foto:hover,
  .enllacos-tra .enllac-tra:active, .enllacos-tra .enllac-tra:hover { transform: none; }
  .tec:hover .tec-img img { transform: none; }
  .desplega > ul { transform: none; }
  .desplega > ul[data-obert] { transform: none; }
  .cookiealert { transform: none; }
}

@media print {
  .cap, .cookiealert, .hero-bts, .peu nav { display: none; }
  body { background: #fff; }
}