/* ==========================================================================
   Ferma · Web 2026 · demo
   Sistema: tinta #173e56 · taronja #e3aa63 · crema #f8f5ee · Syne + Manrope
   ========================================================================== */

@font-face { font-family: "Syne"; src: url("../fonts/syne-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; src: url("../fonts/syne-600-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
	--tinta: #173e56;
	--tinta-90: #1d4a66;
	--taronja: #e3aa63;
	--taronja-fosc: #d4964b;
	--crema: #f8f5ee;
	--crema2: #f7f3ed;
	--sorra: #e9ded1;
	--boira: #e9f0f4;
	--taupe: #c6bdb8;
	--blau: #6690bb;
	--apagat: #446173;
	--linia: #c8d5dc;
	--blanc: #ffffff;
	--pad: clamp(20px, 5.56vw, 80px);
	--max: 1280px;
	--ease: cubic-bezier(.2, .7, .1, 1);
	--ease-io: cubic-bezier(.7, 0, .2, 1);
	--seccio: clamp(64px, 7.2vw, 104px);
	--syne: "Syne", "Helvetica Neue", Arial, sans-serif;
	--manrope: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sortida .35s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-entrada .55s var(--ease) both; }
@keyframes vt-sortida { to { opacity: 0; } }
@keyframes vt-entrada { from { opacity: 0; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--manrope); font-size: 18px; line-height: 1.556; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--taronja); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--tinta); color: var(--crema); border-radius: 8px; transform: translateY(-150%); transition: transform .2s; }
.salta:focus { transform: none; }

.contenidor { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.blanc { color: var(--blanc); }
.nomes-gran { display: none; }
@media (min-width: 1100px) { .nomes-gran { display: inline; } }

/* ---------- Tipografia ---------- */
.display { font-family: var(--syne); font-weight: 600; font-size: clamp(50px, 6.25vw, 90px); line-height: 1.033; letter-spacing: -.01em; }
.h1 { font-family: var(--syne); font-weight: 600; font-size: clamp(38px, 5vw, 72px); line-height: 1.11; letter-spacing: -.015em; }
.h2 { font-family: var(--syne); font-weight: 600; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.143; letter-spacing: -.02em; }
.h2--50 { font-size: clamp(30px, 3.47vw, 50px); line-height: 1.28; }
.h3 { font-family: var(--syne); font-weight: 600; font-size: clamp(21px, 1.95vw, 28px); line-height: 1.286; letter-spacing: -.02em; }
.lead { font-size: clamp(18px, 1.53vw, 22px); line-height: 1.545; }
.cos-gran { font-size: clamp(17px, 1.39vw, 20px); line-height: 1.5; font-weight: 500; }
.cos { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.556; }
.petit { font-size: 16px; line-height: 22px; font-weight: 700; }
.enllac-fort { font-weight: 800; font-size: 16px; line-height: 24px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); }
.enllac-fort:hover { background-size: 100% 1.5px; }

/* Línies de titular (les genera el JS) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .1em; margin: -.12em -.02em -.1em; }
.w > span { display: inline-block; transform: translateY(108%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--l, 0) * 110ms + var(--d0, 0ms)); }
.is-in .w > span, .is-in.w > span, [data-linies].is-in .w > span, .es-carregat [data-linies-inici] .w > span { transform: none; }
.display .linia { display: block; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.display .linia > span { display: inline-block; transform: translateY(110%); transition: transform 1.25s var(--ease); }
.display .linia:nth-child(2) > span { transition-delay: .12s; }
.display .linia:nth-child(3) > span { transition-delay: .24s; }
.es-carregat .display .linia > span { transform: none; }

/* ---------- Botons ---------- */
.boto { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 14px 30px; border-radius: 999px; font-family: var(--manrope); font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), transform .35s var(--ease); }
.boto::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.boto:hover::before { transform: none; }
.boto:active { transform: scale(.98); }
.boto__fletxa { width: 20px; height: 20px; transition: transform .45s var(--ease); flex: none; }
.boto:hover .boto__fletxa { transform: translateX(4px); }
.boto--taronja { background: var(--taronja); color: var(--blanc); }
.boto--taronja::before { background: var(--taronja-fosc); }
.boto--tinta { background: var(--tinta); color: var(--crema); }
.boto--tinta::before { background: var(--tinta-90); }
.boto--crema { background: var(--crema); color: var(--tinta); }

/* ---------- Capçalera ---------- */
.barra { position: absolute; inset: 0 0 auto 0; z-index: 40; padding-top: clamp(16px, 4.2vw, 61px); transition: transform .5s var(--ease), background-color .4s, padding .4s var(--ease), box-shadow .4s; }
.barra__int { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: calc(1264px + 2 * var(--pad)); margin-inline: auto; padding-inline: clamp(20px, 6.1vw, 88px); }
.barra__menu { justify-self: start; width: 56px; height: 44px; display: grid; place-items: center start; }
.hamburguesa { display: grid; gap: 9px; width: 51px; }
.hamburguesa span { display: block; height: 2px; background: var(--tinta); border-radius: 2px; transform-origin: left; transition: transform .45s var(--ease), width .45s var(--ease); }
.hamburguesa span:nth-child(2) { width: 78%; }
.barra__menu:hover .hamburguesa span:nth-child(2) { width: 100%; }
.barra__menu:hover .hamburguesa span:nth-child(3) { transform: scaleX(.78); }
.barra__logo { justify-self: center; width: clamp(70px, 7.15vw, 103px); color: var(--tinta); }
.barra__logo .logo { width: 100%; height: auto; }
.boto--barra { justify-self: end; min-height: 56px; padding-inline: clamp(18px, 3vw, 44px); font-size: clamp(14px, 1.39vw, 20px); }
.barra.es-fixa { position: fixed; padding-block: 12px; background: rgb(248 245 238 / .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgb(23 62 86 / .08); animation: barra-entra .55s var(--ease); }
.barra.es-fixa .barra__logo { width: 64px; }
.barra.es-fixa .boto--barra { min-height: 46px; font-size: 15px; }
.barra.s-amaga { transform: translateY(-110%); }
@keyframes barra-entra { from { transform: translateY(-100%); } }
@media (max-width: 719px) {
	.boto--barra span { font-size: 0; }
	.boto--barra span::after { content: "Diagnosi"; font-size: 14px; }
	.boto--barra { min-height: 42px; padding-inline: 18px; }
	.hamburguesa { width: 36px; gap: 7px; }
}

/* ---------- Menú ---------- */
.menu { position: fixed; inset: 0; z-index: 60; color: var(--crema); display: grid; grid-template-rows: auto 1fr auto; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__fons { position: fixed; inset: 0; background: var(--tinta); clip-path: inset(0 0 100% 0); transition: clip-path .75s var(--ease-io); z-index: -1; }
.menu.obert .menu__fons { clip-path: inset(0 0 0 0); }
.menu__cap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: calc(1264px + 2 * var(--pad)); margin-inline: auto; padding: clamp(16px, 4.2vw, 61px) clamp(20px, 6.1vw, 88px) 0; }
.menu__tanca { width: 48px; height: 48px; display: grid; place-items: center; }
.creu { position: relative; width: 44px; height: 44px; display: block; }
.creu span { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: var(--crema); border-radius: 2px; transform: rotate(45deg) scaleX(0); transition: transform .6s var(--ease) .25s; }
.creu span + span { transform: rotate(-45deg) scaleX(0); }
.menu.obert .creu span { transform: rotate(45deg) scaleX(1); }
.menu.obert .creu span + span { transform: rotate(-45deg) scaleX(1); }
.menu__tanca:hover .creu { transform: rotate(90deg); transition: transform .5s var(--ease); }
.menu__logo { justify-self: center; width: clamp(70px, 7.15vw, 103px); color: var(--crema); opacity: 0; transition: opacity .6s .35s; }
.menu.obert .menu__logo { opacity: 1; }
.menu__cos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 384px); gap: 40px clamp(32px, 8vw, 120px); align-content: center; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding: clamp(32px, 6vw, 80px) var(--pad); }
.menu__principal li, .menu__context li, .menu__cta, .menu__peu { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(.28s + var(--i, 0) * 55ms); }
.menu.obert .menu__principal li, .menu.obert .menu__context li, .menu.obert .menu__cta, .menu.obert .menu__peu { opacity: 1; transform: none; }
.menu__principal a { display: inline-flex; align-items: center; gap: 18px; font-family: var(--syne); font-weight: 600; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.286; letter-spacing: -.02em; transition: transform .45s var(--ease), color .3s; }
.menu__principal a::before { content: ""; width: 0; height: 2px; background: var(--taronja); transition: width .45s var(--ease); }
.menu__principal a:hover, .menu__principal a[aria-current="page"] { transform: translateX(6px); }
.menu__principal a:hover::before, .menu__principal a[aria-current="page"]::before { width: 34px; }
.menu__context { display: grid; align-content: start; gap: 34px; padding-top: 10px; }
.menu__context ul { display: grid; gap: 22px; }
.menu__context ul a { font-size: clamp(18px, 1.53vw, 22px); line-height: 1.5; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.menu__context ul a:hover { background-size: 100% 1px; }
.menu__clients a { font-size: 18px; opacity: .85; }
.menu__peu { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding: 0 var(--pad) clamp(24px, 4vw, 60px); }
.menu__linia { display: block; height: 1px; background: var(--linia); opacity: .5; margin-bottom: 24px; }
.menu__peu p { font-size: 18px; }
.menu__peu a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.menu-obert { overflow: hidden; }
@media (max-width: 899px) { .menu__cos { grid-template-columns: 1fr; align-content: start; } }

/* ---------- Seccions ---------- */
.seccio { position: relative; padding-block: var(--seccio); }
.seccio--sense-dalt { padding-top: 0; }
.seccio--sorra { background: var(--sorra); }
.seccio--crema { background: var(--crema); }
.seccio--crema2 { background: var(--crema2); }
.seccio--taronja { background: var(--taronja); }
.seccio--boira { background: var(--boira); }
.seccio--taupe { background: var(--taupe); }
.seccio--blau { background: var(--blau); }
.seccio--tinta { background: var(--tinta); color: var(--crema); }
.seccio--carrusel { background: var(--blanc); }

.editorial { display: grid; grid-template-columns: minmax(0, 672fr) minmax(0, 480fr); gap: 40px clamp(40px, 8.9vw, 128px); align-items: start; }
.editorial__lectura { display: grid; gap: 32px; justify-items: start; }
.cap-dual { display: grid; grid-template-columns: minmax(0, 672fr) minmax(0, 480fr); gap: 24px clamp(40px, 8.9vw, 128px); align-items: start; margin-bottom: clamp(32px, 3.4vw, 48px); }
.sub { margin-top: clamp(20px, 3.9vw, 56px); margin-bottom: clamp(24px, 2.8vw, 40px); }
@media (max-width: 899px) { .editorial, .cap-dual { grid-template-columns: 1fr; } }

/* ---------- Revelats ---------- */
[data-reveal], [data-entra] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal].is-in, .es-carregat [data-entra] { opacity: 1; transform: none; }
.es-carregat [data-entra] { transition-delay: calc(.35s + var(--d, 0) * 110ms); }
[data-linies] { opacity: 1; transform: none; }
.sense-js [data-reveal], .sense-js [data-entra] { opacity: 1; transform: none; }
.sense-js .w > span, .sense-js .display .linia > span { transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.12); transition: transform 2.6s var(--ease); will-change: transform; }
.es-carregat .hero__img { transform: scale(var(--zoom, 1)) translateY(var(--py, 0px)); transition: transform 2.6s var(--ease); }
.es-carregat .hero__img.sense-transicio { transition: none; }
.hero__continuitat { position: absolute; inset: auto 0 0 0; height: 24%; background: linear-gradient(180deg, rgb(248 245 238 / 0) 0%, rgb(248 245 238 / .12) 35%, rgb(248 245 238 / .68) 76%, var(--crema2) 100%); }
.hero__continuitat--sorra { background: linear-gradient(180deg, rgb(233 222 209 / 0) 0%, rgb(233 222 209 / .12) 35%, rgb(233 222 209 / .68) 76%, var(--sorra) 100%); }
.hero__continuitat--taupe { height: 14%; background: linear-gradient(180deg, rgb(198 189 184 / 0) 0%, rgb(198 189 184 / .6) 60%, var(--taupe) 100%); }

.hero--inici { min-height: clamp(620px, 62.3vw, 1000px); display: flex; align-items: flex-start; }
.hero--inici .hero__img { inset: -6.13% auto auto -5.56%; width: 116.89%; height: 117.28%; }
.hero--inici .hero__text { padding-top: clamp(150px, 19.4vw, 280px); padding-bottom: 80px; }
.hero--inici .display { max-width: 9.6em; }
.hero__entradeta { margin-top: clamp(14px, 1vw, 16px); font-weight: 700; font-size: clamp(17px, 1.67vw, 24px); line-height: 1.25; max-width: 32em; }
@media (max-width: 719px) {
	.hero--inici { min-height: 100svh; }
	.hero--inici .hero__img { inset: 0; width: 100%; height: 100%; object-position: 72% 60%; }
	.hero--inici .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(248 245 238 / .92) 0%, rgb(248 245 238 / .55) 46%, rgb(248 245 238 / 0) 70%); }
	.hero--inici .hero__text { padding-top: 120px; }
}

.hero--interior { min-height: clamp(640px, 65.3vw, 940px); display: grid; align-content: start; }
.hero__text--interior { padding-top: clamp(130px, 12.1vw, 174px); display: grid; gap: 28px; justify-items: start; }
.hero__text--interior .h1 { max-width: 784px; }
.hero__text--interior .lead { max-width: 528px; }
.hero__peu { align-self: end; padding-bottom: clamp(32px, 4.6vw, 66px); margin-top: auto; }
.hero--programa { grid-template-rows: auto 1fr; }
.hero--programa .hero__img { object-position: 50% 100%; }
.molla { font-weight: 700; font-size: 16px; line-height: 22px; color: var(--apagat); }
.molla a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
@media (max-width: 719px) {
	.hero--interior .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(248 245 238 / .9) 0%, rgb(248 245 238 / .5) 50%, rgb(248 245 238 / 0) 75%); }
	.hero--programa .hero__media::after { background: linear-gradient(180deg, rgb(248 245 238 / .92) 0%, rgb(248 245 238 / .6) 55%, rgb(248 245 238 / 0) 70%); }
}

.hero--diagnosi { min-height: clamp(620px, 58.3vw, 840px); display: grid; align-items: center; align-content: center; }
.hero--diagnosi .hero__img { height: 112%; object-position: 50% 0; }
.hero__text--dreta { display: grid; gap: 28px; justify-items: start; padding-top: 120px; padding-bottom: 80px; }
.hero__text--dreta > * { margin-left: clamp(0px, 50.6vw - 80px, 724px); max-width: 552px; }
.hero__text--dreta .lead { max-width: 512px; }
@media (max-width: 899px) {
	.hero__text--dreta > * { margin-left: 0; }
	.hero--diagnosi .hero__img { object-position: 30% 0; }
	.hero--diagnosi .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(198 189 184 / .95) 0%, rgb(198 189 184 / .65) 50%, rgb(198 189 184 / .1) 100%); }
	.hero--diagnosi { align-items: end; align-content: end; }
}

.hero--editorial { background: var(--crema); min-height: clamp(560px, 44.4vw, 640px); display: grid; align-items: end; }
.hero__text--editorial { display: grid; gap: 28px; justify-items: start; padding-top: 170px; padding-bottom: clamp(40px, 3.1vw, 45px); }
.hero__text--editorial .h1 { max-width: 1080px; }
.hero__text--editorial .lead { max-width: 720px; }
.hero__xifra { position: absolute; right: var(--pad); bottom: -0.16em; z-index: -1; font-family: var(--syne); font-weight: 600; font-size: clamp(180px, 30vw, 440px); line-height: 1; letter-spacing: -.04em; color: var(--boira); pointer-events: none; user-select: none; }
.hero__accions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero--preparacio { min-height: 80svh; }

/* Segell «Diagnosi ferma» */
.segell { display: inline-flex; align-items: flex-end; gap: .14em; font-family: var(--syne); font-weight: 600; font-size: clamp(42px, 4.3vw, 62px); line-height: 1; letter-spacing: -.02em; }
.segell__marca { width: 2.15em; height: auto; margin-bottom: .02em; }
.segell--blanc { color: var(--blanc); }
.segell--crema { color: var(--crema); }
.segell--gran { font-size: clamp(44px, 3.9vw, 56px); }
.segell--centre { justify-content: center; }
.segell-titol { margin-block: 0; }

/* ---------- Inici · visió ---------- */
.visio { padding-block: clamp(56px, 4.6vw, 66px) clamp(64px, 6.1vw, 88px); }

/* ---------- Inici · programa (taronja) ---------- */
.programa { padding-top: clamp(64px, 6vw, 86px); padding-bottom: clamp(72px, 7.3vw, 105px); }
.programa__cap { display: grid; justify-items: center; text-align: center; gap: 4px; }
.programa__t { margin-top: 6px; }
.programa__intro { margin-top: clamp(14px, 1.4vw, 20px); max-width: 800px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.4; }
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 2.8vw, 40px); }
.passos--grans { margin-top: clamp(48px, 7.3vw, 105px); gap: 40px clamp(24px, 3.2vw, 46px); }
.passos--tres { grid-template-columns: repeat(3, minmax(0, 290px)); margin-top: clamp(48px, 8.3vw, 116px); }
.pas { position: relative; padding-top: 25px; display: grid; align-content: start; gap: 0; }
.pas__linia { position: absolute; inset: 0 0 auto 0; height: 1px; background: currentColor; opacity: .9; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(var(--d, 0) * 120ms + .1s); }
.programa .pas__linia { background: var(--blanc); opacity: 1; }
.passos--tres .pas__linia, .seccio--taupe .pas__linia { background: var(--linia); opacity: 1; }
.pas.is-in .pas__linia { transform: none; }
.pas__num { font-weight: 500; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; color: var(--blanc); margin: 6px 0 22px; letter-spacing: -.02em; }
.pas .h3 { margin-bottom: clamp(14px, 2vw, 28px); min-height: 2.57em; }
.programa .pas .h3 { min-height: 2.57em; }
.pas__ordre { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 16px; line-height: 22px; margin-bottom: 24px; }
.pas__ordre .ico { width: 36px; height: 36px; }
.passos--icona.blanc { color: var(--blanc); }
.passos--icona .h3 { min-height: 0; margin-bottom: 24px; }
@media (max-width: 1099px) { .passos, .passos--grans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .passos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .passos, .passos--grans, .passos--tres { grid-template-columns: 1fr; } .pas .h3 { min-height: 0; } }

/* ---------- Inici · centres ---------- */
.centres { padding-top: clamp(56px, 5.6vw, 81px); }
.centres__t { text-align: center; max-width: 12.5em; margin: 0 auto clamp(40px, 13.4vw, 195px - 80px); }
.centres__grid { display: grid; grid-template-columns: minmax(0, 525px) minmax(0, 368px); justify-content: center; gap: 40px clamp(32px, 4.4vw, 63px); align-items: start; }
.centres__llista li a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 11px; font-family: var(--syne); font-weight: 600; font-size: clamp(18px, 1.6vw, 23px); line-height: 36px; letter-spacing: -.02em; text-transform: uppercase; border-bottom: 1px solid var(--taronja); transition: padding .45s var(--ease), color .3s; }
.centres__llista li:first-child a { padding-top: 0; margin-bottom: 14px; }
.centres__llista a .ico { width: 22px; height: 22px; opacity: 0; transform: translateX(-12px); transition: opacity .35s, transform .45s var(--ease); flex: none; }
.centres__llista a:hover { padding-left: 10px; }
.centres__llista a:hover .ico { opacity: 1; transform: none; }
.centres__llista li[data-reveal] { transform: translateX(-20px); }
.centres__llista li.is-in { transform: none; }
.centres__figura { margin: 0; display: grid; gap: 39px; }
.centres__img { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 368 / 404; }
.centres__img img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 30%; transform: translateY(var(--py, 0px)); }
@media (max-width: 899px) { .centres__grid { grid-template-columns: 1fr; } .centres__figura { max-width: 420px; } }

/* ---------- Inici · banda diagnosi ---------- */
.banda-diagnosi { min-height: clamp(560px, 50.4vw, 726px); display: grid; align-items: center; color: var(--blanc); overflow: hidden; isolation: isolate; padding-block: clamp(64px, 5.5vw, 79px); }
.banda-diagnosi__fons { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.banda-diagnosi__fons img { max-width: none; position: absolute; left: -2%; top: -10%; width: 104%; height: 120%; object-fit: cover; object-position: 0% 50%; transform: scaleX(-1) translateY(var(--py, 0px)); }
.banda-diagnosi__fons::after { content: ""; position: absolute; inset: 0; background: rgb(23 62 86 / .68); }
.banda-diagnosi__grid { display: grid; grid-template-columns: minmax(0, 584fr) minmax(0, 607fr); }
.banda-diagnosi__text { grid-column: 2; display: grid; justify-items: start; gap: 0; }
.banda-diagnosi__text .h2 { max-width: 607px; }
.banda-diagnosi__text .cos-gran { margin-top: 22px; max-width: 566px; font-weight: 400; }
.banda-diagnosi__text .segell { margin-top: 44px; }
.banda-diagnosi__text .boto { margin-top: 28px; min-height: 69px; padding-inline: 44px; }
.banda-diagnosi__text .petit { margin-top: 28px; max-width: 350px; font-size: 18px; line-height: 28px; }
@media (max-width: 899px) { .banda-diagnosi__grid { grid-template-columns: 1fr; } .banda-diagnosi__text { grid-column: 1; } }

/* ---------- FAQ ---------- */
.faq__cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.faq__cap .h2 { max-width: 749px; }
.faq__logo { display: none; }
.faq { margin-top: clamp(40px, 4.6vw, 66px); }
.faq__fila { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 736px); gap: 16px 64px; padding: 28px 0 30px; }
.faq__linia { position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--linia); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(var(--d, 0) * 120ms); }
.faq__fila.is-in .faq__linia { transform: none; }
.faq__q { font-family: var(--syne); font-weight: 600; font-size: clamp(21px, 1.95vw, 28px); line-height: 1.286; letter-spacing: -.02em; }
.faq__a { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.556; }
.faq--clara { color: var(--blanc); }
.faq--clara .faq__linia { background: var(--tinta); }
.seccio--crema .faq__linia { background: var(--tinta); opacity: .55; }
@media (max-width: 719px) { .faq__fila { grid-template-columns: 1fr; } }

/* ---------- Carrusel ---------- */
.seccio--carrusel { padding-top: clamp(64px, 6.1vw, 88px); padding-bottom: clamp(56px, 6vw, 86px); overflow: hidden; }
.carrusel__sub { margin-top: 11px; }
.carrusel { margin-top: clamp(28px, 2.6vw, 30px); }
.carrusel__pista { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); padding-bottom: 28px; scrollbar-width: none; cursor: grab; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrossega { cursor: grabbing; scroll-snap-type: none; }
.carrusel__pista.arrossega a { pointer-events: none; }
.fitxa { flex: 0 0 clamp(260px, 25.6vw, 368px); scroll-snap-align: start; }
.fitxa a { display: grid; gap: 18px; user-select: none; -webkit-user-drag: none; }
.fitxa__img { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 368 / 460; background: var(--boira); }
.fitxa__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease), filter .6s; }
.fitxa a:hover .fitxa__img img { transform: scale(1.1); }
.fitxa__cap { display: flex; gap: 16px; align-items: flex-start; }
.fitxa__cap .ico { width: 28px; height: 28px; flex: none; margin-top: 4px; color: var(--taronja); }
.fitxa__text { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.556; padding-right: 16px; }
.fitxa__enllac { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; line-height: 24px; color: var(--tinta); }
.fitxa__enllac .ico { width: 18px; height: 18px; color: var(--taronja); transition: transform .45s var(--ease); }
.fitxa a:hover .fitxa__enllac .ico { transform: translateX(5px); }
.carrusel__peu { display: flex; align-items: center; gap: 24px; margin-top: 18px; }
.carrusel__pista-ajuda { font-weight: 700; font-size: 16px; line-height: 22px; color: var(--apagat); margin-left: auto; }
.carrusel__fletxes { display: flex; gap: 12px; }
.fletxa { width: 44px; height: 44px; border-radius: 50%; background: var(--boira); display: grid; place-items: center; transition: background-color .3s, transform .35s var(--ease); }
.fletxa .ico { width: 20px; height: 20px; }
.fletxa:hover { background: var(--taronja); color: var(--blanc); }
.fletxa:disabled { opacity: .4; cursor: default; background: var(--boira); color: var(--tinta); }
@media (max-width: 719px) { .carrusel__pista-ajuda { display: none; } .carrusel__peu { justify-content: space-between; } }

/* ---------- Files i àmbits ---------- */
.files { display: grid; }
.fila a { position: relative; display: grid; grid-template-columns: minmax(0, 448px) minmax(0, 624px) auto; gap: 16px 48px; align-items: start; padding: 25px 0 28px; transition: background-color .3s; }
.fila__linia, .ambit__linia, .informe__linia { position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--linia); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.is-in > a > .fila__linia, .ambit.is-in .ambit__linia, .is-in .informe__linia { transform: none; }
.fila__concepte, .ambit__concepte { display: flex; gap: 16px; align-items: flex-start; }
.fila__concepte .ico, .ambit__concepte .ico { width: 32px; height: 32px; flex: none; margin-top: 2px; transition: transform .5s var(--ease), color .3s; }
.fila__veure { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; line-height: 24px; white-space: nowrap; }
.fila__veure .ico { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.fila a:hover .fila__concepte .ico { transform: translateX(4px); color: var(--taronja); }
.fila a:hover .fila__veure .ico { transform: translateX(5px); }
.fila a:hover .h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ambits { display: grid; }
.ambit { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 736px); gap: 12px 64px; padding: 21px 0 32px; }
@media (max-width: 899px) { .fila a { grid-template-columns: 1fr; } .ambit { grid-template-columns: 1fr; } }

/* ---------- Diagnosi · informe ---------- */
.informe { display: grid; grid-template-columns: minmax(0, 544px) minmax(0, 624px); justify-content: space-between; gap: 48px; align-items: start; }
.informe__targeta { background: var(--crema); border-radius: 4px; padding: clamp(28px, 2.8vw, 40px); box-shadow: 0 30px 60px -40px rgb(23 62 86 / .35); }
.informe__titol { font-family: var(--syne); font-weight: 600; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
.informe__nota { margin-top: 30px; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--apagat); }
.informe__item { position: relative; padding: 31px 0 2px; margin-top: 28px; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(.35s + var(--d, 0) * 220ms); }
.informe__item .cos { margin-top: 30px; }
.informe__item .informe__linia { transition-delay: calc(.25s + var(--d, 0) * 220ms); }
.is-in .informe__item { opacity: 1; transform: none; }
.informe__argument { display: grid; gap: 32px; justify-items: start; }
@media (max-width: 899px) { .informe { grid-template-columns: 1fr; } }

/* ---------- Formulari ---------- */
.sollicitud { display: grid; grid-template-columns: minmax(0, 496px) minmax(0, 672px); justify-content: space-between; gap: 48px; align-items: start; }
.sollicitud__context { display: grid; gap: 32px; }
.sollicitud__context a:hover { text-decoration: underline; text-underline-offset: 4px; }
.formulari { display: grid; gap: 24px; }
.camp { display: grid; gap: 8px; }
.camp label { font-weight: 800; font-size: 16px; line-height: 24px; }
.camp input, .camp textarea { width: 100%; min-height: 58px; padding: 14px 17px; border: 1px solid var(--linia); border-radius: 8px; background: var(--blanc); font: inherit; font-size: 18px; line-height: 28px; color: var(--tinta); transition: border-color .25s, box-shadow .25s; }
.camp textarea { resize: vertical; min-height: 58px; }
.camp input::placeholder, .camp textarea::placeholder { color: var(--apagat); opacity: 1; }
.camp input:focus, .camp textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgb(227 170 99 / .45); }
.camp.error input { border-color: #b4472a; }
.consentiment { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 28px; cursor: pointer; }
.consentiment input { width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--tinta); flex: none; }
.formulari .boto { justify-self: start; }
.nota { color: var(--apagat); }
.formulari__ok[hidden] { display: none; }
.formulari__ok { padding: 24px; border-radius: 8px; background: var(--boira); display: grid; gap: 8px; animation: ok-entra .7s var(--ease); }
@keyframes ok-entra { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 899px) { .sollicitud { grid-template-columns: 1fr; } }

/* ---------- Tancament ---------- */
.tancament { background: var(--tinta); color: var(--crema); padding-block: clamp(72px, 6.7vw, 96px); }
.tancament__grid { display: grid; grid-template-columns: minmax(0, 736px) minmax(0, 432px); justify-content: space-between; gap: 40px; align-items: start; }
.tancament__accio { display: grid; gap: 28px; justify-items: start; }
.tancament__accio .lead { color: var(--crema); }
@media (max-width: 899px) { .tancament__grid { grid-template-columns: 1fr; } }

/* ---------- Peu ---------- */
.peu { background: var(--crema); padding-top: clamp(48px, 4.8vw, 69px); padding-bottom: 40px; border-top: 1px solid rgb(23 62 86 / .06); }
.peu__dalt { display: grid; grid-template-columns: minmax(0, 641fr) minmax(0, 640fr); gap: 32px; }
.peu__logo { display: inline-block; width: clamp(80px, 7.4vw, 106px); color: var(--tinta); }
.peu__marca p { margin-top: 34px; font-size: 18px; line-height: 1.4; }
.peu__contacte { display: grid; gap: 12px; align-content: start; padding-top: 16px; font-size: 18px; line-height: 28px; }
.peu__tel { font-family: var(--syne); font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -.02em; }
.peu__contacte a:hover { text-decoration: underline; text-underline-offset: 4px; }
.peu__mapa { display: grid; grid-template-columns: 260fr 300fr 340fr 260fr; gap: 40px; margin-top: clamp(48px, 5vw, 72px); }
.peu__cap { font-weight: 800; font-size: 16px; line-height: 24px; margin-bottom: 5px; }
.peu__mapa ul { display: grid; gap: 5px; }
.peu__mapa a { font-size: 18px; line-height: 28px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.peu__mapa a:hover { background-size: 100% 1px; }
.peu__baix { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: clamp(40px, 3.4vw, 50px); padding-top: 27px; }
.peu__linia { position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--tinta); opacity: .5; }
.peu__registre { font-weight: 700; font-size: 14px; line-height: 22px; color: var(--apagat); }
.peu__legals { display: flex; flex-wrap: wrap; gap: 0; font-size: 16px; line-height: 22px; color: var(--apagat); }
.peu__legals a + a::before { content: "|"; margin: 0 14px; opacity: .7; }
.peu__legals a:hover { color: var(--tinta); }
@media (max-width: 1099px) { .peu__mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .peu__dalt, .peu__mapa { grid-template-columns: 1fr; } }

/* ---------- Moviment reduït ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	[data-reveal], [data-entra], .w > span, .display .linia > span, .informe__item { opacity: 1 !important; transform: none !important; }
	.pas__linia, .faq__linia, .fila__linia, .ambit__linia, .informe__linia { transform: none !important; }
	.hero__img { transform: none !important; }
}