/* La portada, calcada de la referència del circ que va triar l'Albert (../../referencies/circ-v3-portada.png, 1.024 ×
   1.536). Cada número és un píxel de la referència, mesurat amb les sondes de referencia-visual §7.7, i es multiplica
   per --u (estil.css), o sigui que a qualsevol amplada la portada és la referència escalada. Després de la referència
   hi ha les bandes que va demanar el 30-10 al vespre (l'explosionat, la flota i els clients), amb el mateix collage. */

.portada { --paper2: #F4EAD6; }

/* --- El collage: retalls de diari i de paper de colors, a la vora --- */
.collage { position: absolute; z-index: 0; pointer-events: none; max-width: none; height: auto; }
/* els estrips de paper entre seccions: més prims que la làmina, perquè només se'n vegi la vora esquinçada */
.collage.estrip { height: calc(66 * var(--u)); object-fit: fill; }

/* --- El capçal (ref.: logo 45,8 i 212 d'ample; menú a y 44; gavina 910-1010 amb la mostassa al darrere) --- */
.portada .capcal { height: calc(85 * var(--u)); }

/* --- El heroi (ref.: foto 318-1024 × 85-480 amb la vora esquinçada; títol 40,150 en tres línies de 75; botó 48-357 ×
   378-440; la dona del nivell 800-1024 × 165-490 amb el cercle vermell) --- */
.p-heroi { position: relative; height: calc(400 * var(--u)); }
.p-heroi .foto { position: absolute; left: calc(318 * var(--u)); top: 0; width: calc(706 * var(--u));
  height: calc(395 * var(--u)); object-fit: cover; object-position: 50% 40%; z-index: 1;
  -webkit-mask: url("../img/vora-foto.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-foto.svg") 0 0 / 100% 100% no-repeat; }
.p-heroi .text { position: absolute; left: calc(40 * var(--u)); top: calc(62 * var(--u)); z-index: 3; }
/* ref.: tres línies de 75 px de pas, a x 40 i y 150, 228 i 300, d'uns 388 px d'ample */
.p-heroi h1 { font-size: calc(84 * var(--u)); line-height: 0.8; margin: 0; }
.p-heroi h1 span { display: inline-block; background: var(--newsprint); padding: calc(1 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u));
  margin: 0 0 calc(3 * var(--u)) calc(-10 * var(--u)); padding-top: calc(2 * var(--u)); padding-bottom: calc(4 * var(--u));
  clip-path: polygon(0 5%, 3% 0, 97% 4%, 100% 0, 99% 95%, 96% 100%, 2% 96%, 0 100%); }
.p-heroi .boto { display: block; width: calc(309 * var(--u)); margin: calc(4 * var(--u)) 0 0 calc(8 * var(--u));
  font-size: calc(26 * var(--u)); padding: calc(14 * var(--u)) 0 calc(16 * var(--u)); text-align: center; transform: rotate(-2deg); }
.p-heroi .resposta { display: block; margin: calc(4 * var(--u)) 0 0 calc(80 * var(--u)); font-size: calc(15 * var(--t));
  background: none; padding: 0; }
.p-heroi .cercle { position: absolute; left: calc(830 * var(--u)); top: calc(90 * var(--u)); width: calc(162 * var(--u));
  height: calc(162 * var(--u)); border-radius: 50%; background: var(--accent); z-index: 2; }
/* la dona del nivell, amb el seu cercle vermell i els retalls blau i mostassa (ref.: x 800-1024, y 165-490) */
.p-heroi .personatge { position: absolute; left: calc(744 * var(--u)); top: calc(66 * var(--u)); width: calc(300 * var(--u));
  height: auto; z-index: 3; }

/* --- Els títols de secció amb el seu pinzell (ref.: Proyectos 34,488, 72 d'alt; Servicios 40,975; Cómo trabajamos
   26,1200) --- */
.p-seccio { position: relative; padding: 0 calc(36 * var(--u)); }
.p-seccio > h2 { font-size: calc(76 * var(--u)); display: inline-block; position: relative; z-index: 1; margin: 0; line-height: 0.95; }
.p-seccio > h2::after { content: ""; position: absolute; z-index: -1; left: 46%; right: -18%; bottom: calc(10 * var(--u));
  height: calc(14 * var(--u)); background: url("../img/pinzell-vermell.svg") center / 100% 100% no-repeat; }
#t-servicios { font-size: calc(73 * var(--u)); }
.p-serveis { margin-top: calc(10 * var(--u)); }
.p-seccio > h2.blau::after { background-image: url("../img/pinzell-blau.svg"); left: 52%; right: -34%; bottom: calc(26 * var(--u)); }
.p-seccio > h2.a-la-dreta::after { left: auto; right: calc(-128 * var(--u)); width: calc(118 * var(--u)); bottom: calc(36 * var(--u)); }

/* --- Proyectos (ref.: títol a y 488; fotos 36-351, 364-667 i 680-992; files 553-726 i 760-937; peu a 15 px) --- */
.p-projectes { padding-top: calc(3 * var(--u)); }
.p-graella { display: grid; grid-template-columns: 315fr 303fr 312fr; column-gap: calc(13 * var(--u)); row-gap: calc(10 * var(--u));
  margin-top: calc(-7 * var(--u)); position: relative; z-index: 1; }
.p-graella figure { margin: 0; }
.p-graella a { display: block; text-decoration: none; }
.p-graella img { width: 100%; height: calc(175 * var(--u)); object-fit: cover; display: block;
  -webkit-mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; }
.p-graella figcaption { font-size: calc(15 * var(--t)); font-weight: 600; margin-top: calc(6 * var(--u)); line-height: 1.25; }
.p-graella a:hover figcaption { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.p-graella a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* l'enllaç a tots els projectes no ocupa alçada: va a la dreta del títol, com un peu de premsa */
.p-mes { position: absolute; z-index: 1; right: calc(36 * var(--u)); top: calc(44 * var(--u)); margin: 0; font-weight: 700;
  font-size: calc(15 * var(--t)); }
.p-mes a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* --- Les franges esquinçades entre seccions --- */
.p-estrip { display: block; width: 100%; height: calc(46 * var(--u)); object-fit: fill; position: relative; z-index: 1; margin: calc(-6 * var(--u)) 0; }

/* --- Servicios (ref.: títol a y 975; gravats 1035-1150; rètols 1160-1185; filets entre cel·les) --- */
.p-serveis ul { display: grid; grid-template-columns: repeat(6, 1fr); margin: calc(-10 * var(--u)) 0 0; padding: 0; list-style: none;
  position: relative; z-index: 1; }
.p-serveis li { text-align: center; border-right: 1.5px solid var(--linia); padding: 0 calc(6 * var(--u)); }
.p-serveis li:last-child { border-right: 0; }
.p-serveis a { text-decoration: none; display: block; }
.p-serveis a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.p-serveis img { height: calc(116 * var(--u)); width: auto; max-width: 100%; object-fit: contain; margin: 0 auto calc(8 * var(--u)); }
.p-serveis span { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(23 * var(--u)); line-height: 1; }

/* --- Cómo trabajamos (ref.: títol a y 1200 amb el pinzell vermell a la dreta; passos 1262-1340) --- */
.p-proces ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: calc(4 * var(--u)) 0 0; padding: 0; list-style: none;
  position: relative; z-index: 1; }
.p-proces li { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u));
  border-left: 1.5px solid var(--linia); min-height: calc(118 * var(--u)); }
.p-proces li:first-child { border-left: 0; padding-left: calc(24 * var(--u)); }
.p-proces .num { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; color: var(--accent-text);
  font-size: calc(36 * var(--u)); display: block; line-height: 1; }
.p-proces strong { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900;
  font-size: calc(24 * var(--u)); display: block; line-height: 1.05; }
.p-proces img { width: auto; height: calc(118 * var(--u)); max-width: 55%; object-fit: contain; margin-left: auto; }

/* --- Les bandes noves: peça a peça, la flota i els clients --- */
.p-peca { margin-top: calc(40 * var(--u)); }
.p-peca .parell { display: grid; grid-template-columns: 590fr 362fr; gap: calc(20 * var(--u)); align-items: center; margin-top: calc(6 * var(--u));
  position: relative; z-index: 1; }
.p-peca .parell img { width: 100%; height: auto; }
.p-peca figure { margin: 0; }
.p-peca figure img { height: calc(250 * var(--u)); object-fit: cover;
  -webkit-mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; }
.p-peca figcaption, .p-flota figcaption { font-size: calc(14 * var(--t)); color: var(--tinta-suau); margin-top: calc(6 * var(--u)); }

.p-flota { display: grid; grid-template-columns: 560fr 392fr; gap: calc(26 * var(--u)); align-items: center; margin-top: calc(46 * var(--u)); }
.p-flota figure { margin: 0; position: relative; z-index: 1; }
.p-flota figure img { width: 100%; height: calc(320 * var(--u)); object-fit: cover;
  -webkit-mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; }
.p-flota .text { position: relative; z-index: 1; }
.p-flota h2 { font-size: calc(62 * var(--u)); line-height: 0.95; margin: 0 0 calc(14 * var(--u)); }
.p-flota p { font-size: calc(18 * var(--t)); margin: 0 0 calc(14 * var(--u)); max-width: 34ch; }
.p-flota .llocs { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(8 * var(--u)); font-size: calc(16 * var(--t)); font-weight: 700; }
.p-flota .llocs a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.p-clients { margin: calc(46 * var(--u)) 0 calc(34 * var(--u)); text-align: center; position: relative; z-index: 1; }
.p-clients h2::after { display: none; }
.p-clients h2 { font-family: var(--text); font-variation-settings: normal; font-weight: 700; font-size: calc(15 * var(--t)); letter-spacing: 0;
  margin: 0 0 calc(12 * var(--u)); }
.p-clients ul { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)) calc(40 * var(--u)); margin: 0; padding: 0;
  list-style: none; }
.p-clients li { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(30 * var(--u));
  line-height: 1; }

/* --- La banda negra (ref.: de y 1330 al final, vora esquinçada a dalt; títol blanc 55,1365 en dues línies de 62;
   «Contacto» 395-540 × 1440-1490; l'emblema 560-1024) --- */
.p-banda { position: relative; z-index: 5; background: var(--ink); color: #fff; min-height: calc(206 * var(--u));
  padding: calc(34 * var(--u)) calc(470 * var(--u)) calc(30 * var(--u)) calc(55 * var(--u));
  -webkit-mask: url("../img/vora-dalt.svg") top / 100% calc(22 * var(--u)) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - calc(21 * var(--u))) no-repeat;
  mask: url("../img/vora-dalt.svg") top / 100% calc(22 * var(--u)) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - calc(21 * var(--u))) no-repeat; }
.p-banda h2 { font-size: calc(64 * var(--u)); color: #fff; line-height: 0.98; margin: 0; display: inline; }
.p-banda .boto { margin-left: calc(14 * var(--u)); vertical-align: calc(8 * var(--u)); font-size: calc(22 * var(--u));
  padding: calc(12 * var(--u)) calc(34 * var(--u)); }
.p-banda .emblema { position: absolute; right: calc(10 * var(--u)); bottom: calc(6 * var(--u)); width: calc(430 * var(--u)); height: auto; }

/* --- El moviment: un sol moment, el capçal que s'enganxa (moviment §4: transform i opacity, ≤ 1,2 s, esglaonat de
   60 ms, i res sense prefers-reduced-motion) --- */
@media (prefers-reduced-motion: no-preference) {
  .p-heroi h1 span, .p-heroi .boto, .p-heroi .resposta { animation: enganxa 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .p-heroi h1 span:nth-of-type(2) { animation-delay: 60ms; }
  .p-heroi h1 span:nth-of-type(3) { animation-delay: 120ms; }
  .p-heroi .boto { animation-delay: 220ms; --gir: -2deg; }
  .p-heroi .resposta { animation-delay: 280ms; }
  .p-heroi .personatge { animation: entra-dreta 700ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both; }
  @keyframes enganxa { from { opacity: 0; transform: translateY(calc(14 * var(--u))) rotate(var(--gir, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--gir, 0deg)); } }
  @keyframes entra-dreta { from { opacity: 0; transform: translateX(calc(24 * var(--u))); } to { opacity: 1; transform: none; } }
}

/* --- Mòbil --- */
@media (max-width: 700px) {
  .collage { display: none; }
  .portada .capcal { height: auto; }
  .p-heroi { height: auto; padding-bottom: 24px; }
  .p-heroi .foto { position: static; width: 100%; height: 300px; -webkit-mask: none; mask: none; }
  .p-heroi .text { position: relative; left: auto; top: auto; margin: -70px 16px 0; }
  .p-heroi h1 { font-size: 52px; }
  .p-heroi .boto { width: 100%; font-size: 21px; margin-left: 0; }
  .p-heroi .resposta { margin-left: 0; text-align: center; font-size: 14px; }
  .p-heroi .cercle { left: auto; right: 6px; top: 190px; width: 104px; height: 104px; }
  .p-heroi .personatge { left: auto; right: 0; top: 160px; width: 120px; }
  .p-seccio { padding: 0 16px; }
  .p-seccio > h2 { font-size: 48px; }
  .p-seccio > h2.a-la-dreta::after { display: none; }
  .p-graella { grid-template-columns: 1fr; row-gap: 22px; margin-top: 10px; }
  .p-graella img { height: 210px; }
  .p-graella figcaption, .p-mes { font-size: 15px; }
  .p-mes { position: static; margin-top: 14px; text-align: right; }
  .p-serveis ul { grid-template-columns: repeat(2, 1fr); row-gap: 18px; margin-top: 10px; }
  .p-serveis li { border-right: 0; }
  .p-serveis img { height: 96px; }
  .p-serveis span { font-size: 21px; }
  .p-proces ol { grid-template-columns: 1fr; gap: 14px; }
  .p-proces li, .p-proces li:first-child { border-left: 0; padding: 0; }
  .p-proces img { width: 140px; height: 80px; }
  .p-peca .parell, .p-flota { grid-template-columns: 1fr; }
  .p-peca figure img, .p-flota figure img { height: 220px; }
  .p-flota h2 { font-size: 44px; }
  .p-flota p, .p-flota .llocs { font-size: 16px; }
  .p-clients li { font-size: 22px; }
  .p-clients ul { gap: 8px 22px; }
  .p-clients h2 { font-size: 15px; }
  .p-banda { padding: 40px 16px 0; min-height: 0; }
  .p-banda h2 { display: block; font-size: 40px; }
  .p-banda .boto { margin: 16px 0 0; font-size: 18px; }
  .p-banda .emblema { position: static; width: 100%; margin-top: 10px; }
}

/* --- Versió 3 amb el copy de SR. LOBO: el titular de quatre línies, els clients sota el capçal, els serveis amb la
   seva línia, la tecnologia, els quatre passos i la caixa de la banda negra --- */
.p-heroi h1 { font-size: calc(62 * var(--u)); }
.p-heroi .text { top: calc(64 * var(--u)); }
.p-clients { margin: calc(26 * var(--u)) 0 calc(28 * var(--u)); }
.p-clients li { font-size: calc(26 * var(--u)); }
.p-serveis { margin-top: calc(44 * var(--u)); }
.p-proces { margin-top: calc(40 * var(--u)); }
.p-proces img { height: calc(120 * var(--u)); }
.p-graella .cas img { height: calc(175 * var(--u)); }
.p-graella figcaption { margin-top: calc(6 * var(--u)); }
.p-graella .cas-titol { font-size: calc(20 * var(--u)); }
.p-graella small { font-size: calc(13 * var(--t)); }
.p-graella .estat { top: calc(8 * var(--u)); font-size: calc(12 * var(--t)); }
.p-serveis ul { grid-template-columns: repeat(4, 1fr); }
.p-serveis small { display: block; font-size: calc(14 * var(--t)); line-height: 1.35; margin-top: calc(8 * var(--u)); color: var(--tinta);
  padding: 0 calc(10 * var(--u)); }
.p-tecnologia { display: grid; grid-template-columns: 560fr 392fr; gap: calc(30 * var(--u)); align-items: center; margin-top: calc(44 * var(--u)); }
.p-tecnologia figure { margin: 0; position: relative; z-index: 1; }
.p-tecnologia figure img { width: 100%; height: calc(320 * var(--u)); object-fit: cover;
  -webkit-mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; }
.p-tecnologia .text { position: relative; z-index: 1; }
.p-tecnologia h2 { font-size: calc(62 * var(--u)); margin: 0 0 calc(14 * var(--u)); }
.p-tecnologia ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(10 * var(--u)); }
.p-tecnologia a { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(25 * var(--u));
  line-height: 1.1; text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 3px;
  background-position: 0 100%; background-repeat: no-repeat; }
.p-tecnologia a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.p-proces ol { grid-template-columns: repeat(4, 1fr); }
.p-proces li { flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); padding: 0 calc(12 * var(--u)); }
.p-proces li:first-child { padding-left: calc(12 * var(--u)); border-left: 0; }
.p-proces small { display: block; font-size: calc(14 * var(--t)); line-height: 1.35; margin-top: calc(4 * var(--u)); }
.p-proces img { margin-left: 0; height: calc(96 * var(--u)); max-width: 100%; }
.p-banda { display: block; }
.p-banda .banda-cos { position: relative; z-index: 1; max-width: calc(470 * var(--u)); }
.p-banda h2 { display: block; margin-bottom: calc(14 * var(--u)); }
.banda-form textarea { width: 100%; min-height: calc(70 * var(--u)); resize: vertical; background: transparent; color: #fff;
  border: 1.5px solid #fff; padding: calc(8 * var(--u)) calc(10 * var(--u)); font: inherit; font-size: calc(16 * var(--t)); }
.banda-form textarea::placeholder { color: #c9c4ba; }
.banda-form textarea:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.p-banda .crida-linia { margin-top: calc(12 * var(--u)); }
.p-banda .boto { margin-left: 0; vertical-align: 0; font-size: calc(19 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u)); }
.p-banda .resposta { color: #fff; font-size: calc(14 * var(--t)); }
.p-flota figure figcaption, .p-peca figcaption { font-size: calc(13 * var(--t)); }
@media (max-width: 700px) {
  .p-heroi h1 { font-size: 46px; }
  .p-heroi .text { top: auto; }
  .p-clients { margin: 28px 0 22px; }
  .p-graella .cas img, .p-graella .cas-paper { height: 210px; }
  .p-graella .cas-titol { font-size: 21px; }
  .p-serveis ul { grid-template-columns: 1fr 1fr; }
  .p-serveis small { font-size: 13px; padding: 0 4px; }
  .p-tecnologia { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .p-tecnologia figure img { height: 220px; }
  .p-tecnologia h2 { font-size: 44px; }
  .p-tecnologia a { font-size: 22px; }
  .p-proces ol { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .p-proces li, .p-proces li:first-child { padding: 0 8px; }
  .p-proces img { height: 80px; }
  .p-proces small { font-size: 13px; }
  .p-banda .banda-cos { max-width: none; }
  .banda-form textarea { min-height: 80px; font-size: 16px; }
  .p-banda .boto { font-size: 17px; padding: 11px 20px; }
}

/* --- Versió 4 (31-10-2026): el capçal a pantalla sencera. L'Albert, amb l'Expomon de mostra: «van amb imatges a tota
   plana», «full width i que no hi hagi container ni marges», «no respira». La foto omple la pantalla de vora a vora i la
   capçalera hi queda a sobre, en una tira de paper estripat. --- */
.portada .capcal { position: absolute; top: 0; left: 0; right: 0; height: var(--capcal-h); z-index: 10;
  background: var(--fons) url("../img/paper.jpg") center / 640px auto;
  -webkit-mask: url("../img/vora-capcal.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-capcal.svg") 0 0 / 100% 100% no-repeat; }

.h-slider { position: relative; height: 100vh; height: 100svh; min-height: calc(560 * var(--u)); overflow: hidden; background: #1c1a17; }
.h-diapos, .h-diapo { position: absolute; inset: 0; margin: 0; }
.h-diapo { opacity: 0; visibility: hidden; }
.h-diapo.es-activa { opacity: 1; visibility: visible; z-index: 1; }
.h-diapo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 48%; }
.h-slider::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 12, 10, 0.78) 0%, rgba(14, 12, 10, 0.5) 34%, rgba(14, 12, 10, 0.12) 62%, rgba(14, 12, 10, 0) 76%),
              linear-gradient(to right, rgba(14, 12, 10, 0.5) 0%, rgba(14, 12, 10, 0.22) 38%, rgba(14, 12, 10, 0) 60%); }
.h-nota { position: absolute; right: calc(46 * var(--u)); bottom: calc(22 * var(--u)); z-index: 4; margin: 0;
  font-size: calc(13 * var(--t)); color: rgba(255, 255, 255, 0.86); letter-spacing: 0.01em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.h-textos { position: absolute; left: calc(46 * var(--u)); bottom: calc(92 * var(--u)); z-index: 5; width: calc(560 * var(--u)); }
.h-text { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; color: #fff; }
.h-text.es-activa { position: relative; opacity: 1; visibility: visible; }
.h-titol { margin: 0; font-family: var(--titols); font-variation-settings: "wdth" 78, "wght" 760, "opsz" 144; font-weight: 760;
  font-size: calc(68 * var(--u)); line-height: 0.98; letter-spacing: -0.005em; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.28); }
.h-text h2.h-titol::after { display: none; }
.h-sub { margin: calc(14 * var(--u)) 0 0; font-size: calc(19 * var(--t)); font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.h-accio { display: flex; align-items: center; gap: calc(20 * var(--u)); margin-top: calc(26 * var(--u)); }
.h-accio .boto { margin: 0; }
.h-resposta { font-size: calc(15 * var(--t)); font-weight: 600; color: #fff; }
.h-boto { display: inline-block; padding: calc(14 * var(--u)) calc(26 * var(--u)); background: #fff; color: var(--tinta);
  font-weight: 700; font-size: calc(17 * var(--t)); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.h-boto:hover { background: var(--accent); color: #fff; }
.h-boto:focus-visible, .h-fletxa:focus-visible, .h-punts button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.h-controls { position: absolute; left: calc(46 * var(--u)); right: calc(46 * var(--u)); bottom: calc(30 * var(--u)); z-index: 5; display: flex;
  align-items: center; gap: calc(10 * var(--u)); }
.h-fletxa { display: grid; place-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); padding: 0; border: 0;
  background: none; color: #fff; cursor: pointer; }
.h-ant svg { transform: scaleX(-1); }
.h-fletxa:hover { color: var(--accent); }
.h-punts { order: -1; display: flex; gap: calc(8 * var(--u)); margin: 0 auto 0 0; padding: 0; list-style: none; }
.h-punts button { position: relative; width: calc(46 * var(--u)); height: calc(28 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
.h-punts button::before, .h-punts span { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.h-punts button::before { background: rgba(255, 255, 255, 0.36); }
.h-punts span { background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.h-punts [aria-current="true"] span { transform: scaleX(1); }
.portada main > .p-clients { margin-top: calc(56 * var(--u)); }
@media (max-width: 700px) {
  .portada .capcal { position: relative; height: auto; -webkit-mask: none; mask: none; background: none; }
  .portada .capcal .logo { width: 150px; }
  .portada .menu { right: auto; }
  .portada .gavina { width: 64px; }
  .h-slider { height: 82vh; height: 82svh; min-height: 520px; }
  .h-textos { left: 16px; right: 16px; bottom: 92px; width: auto; }
  .h-titol { font-size: 40px; }
  .h-sub { font-size: 16px; }
  .h-accio { flex-wrap: wrap; gap: 12px; margin-top: 18px; }
  .h-controls { left: 8px; right: auto; bottom: 22px; }
  .h-fletxa { width: 44px; height: 44px; }
  .h-punts button { width: 34px; height: 44px; }
  .h-nota { right: 16px; bottom: auto; top: 14px; font-size: 12px; }
  .portada main > .p-clients { margin-top: 36px; }
}

/* La variant B del capçal (referencies/v7/v7-heroi/ref-2.png): el titular sobre un tros de paper estripat a l'esquerra i
   la foto a la resta. Es veu amb ?capcal=paper, perquè l'Albert les compari a la mateixa adreça i triï. */
.h-slider.amb-paper::after { background: linear-gradient(to top, rgba(14, 12, 10, 0.5) 0%, rgba(14, 12, 10, 0) 26%); }
.h-slider.amb-paper .h-diapos { left: calc(400 * var(--u)); }
.h-slider.amb-paper .h-textos { left: 0; top: 0; bottom: 0; width: calc(470 * var(--u)); display: flex; align-items: center;
  padding: calc(150 * var(--u)) calc(74 * var(--u)) calc(90 * var(--u)) calc(46 * var(--u));
  background: var(--fons) url("../img/paper.jpg") center / 640px auto;
  -webkit-mask: url("../img/vora-paper.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-paper.svg") 0 0 / 100% 100% no-repeat; }
.h-slider.amb-paper .h-text { color: var(--tinta); }
.h-slider.amb-paper .h-titol { color: var(--tinta); text-shadow: none; font-size: calc(58 * var(--u)); }
.h-slider.amb-paper .h-accio { flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); }
.h-slider.amb-paper .h-sub, .h-slider.amb-paper .h-resposta { color: var(--tinta); }
.h-slider.amb-paper .h-boto { background: var(--tinta); color: #fff; }
.h-slider.amb-paper .h-boto:hover { background: var(--accent); }
.h-slider.amb-paper .h-boto:focus-visible { outline-color: var(--accent); }
.h-slider.amb-paper .h-controls { left: calc(480 * var(--u)); }
@media (max-width: 700px) {
  .h-slider.amb-paper .h-diapos { left: 0; }
  .h-slider.amb-paper .h-textos { top: auto; left: 0; right: 0; bottom: 0; width: auto; display: block; padding: 34px 16px 84px;
    -webkit-mask: none; mask: none; }
  .h-slider.amb-paper .h-titol { font-size: 38px; }
  .h-slider.amb-paper .h-controls { left: 8px; }
  .h-slider.amb-paper .h-punts button::before { background: rgba(29, 27, 24, 0.25); }
  .h-slider.amb-paper .h-punts span { background: var(--tinta); }
  .h-slider.amb-paper .h-fletxa { color: var(--tinta); }
}

/* Els clients, en una sola franja que passa d'una vora a l'altra (31-10-2026). Abans eren dues files centrades i
   atapeïdes. Amb moviment reduït, quiets i en una línia que es parteix. */
.portada main > .p-clients { margin: 0; padding: calc(44 * var(--u)) 0 calc(48 * var(--u)); overflow: hidden; text-align: left; }
.p-clients h2 { margin: 0 0 calc(18 * var(--u)) calc(46 * var(--u)); text-align: left; }
.p-clients .cinta { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.p-clients:hover .cinta { animation-play-state: paused; }
.p-clients .cinta ul { flex: none; display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.p-clients .cinta li { position: relative; padding: 0 calc(38 * var(--u)); white-space: nowrap; font-size: calc(46 * var(--u)); line-height: 1.1; }
.p-clients .cinta li::after { content: ""; position: absolute; right: calc(-5 * var(--u)); top: 50%; width: calc(10 * var(--u)); height: calc(10 * var(--u));
  margin-top: calc(-5 * var(--u)); background: var(--accent); transform: rotate(45deg); }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .p-clients .cinta { animation: none; width: auto; flex-wrap: wrap; padding: 0 calc(46 * var(--u)); }
  .p-clients .cinta ul { flex-wrap: wrap; row-gap: calc(8 * var(--u)); }
  .p-clients .cinta ul[aria-hidden="true"] { display: none; }
}
@media (max-width: 700px) {
  .portada main > .p-clients { padding: 30px 0 34px; }
  .p-clients h2 { margin-left: 16px; }
  .p-clients .cinta li { font-size: 28px; padding: 0 22px; }
  .p-clients .cinta li::after { width: 8px; height: 8px; margin-top: -4px; right: -4px; }
}

/* El mosaic de Proyectos (31-10-2026), calcat de referencies/v7/v7-projectes/ref-1.png: de vora a vora i sense marge;
   el Butterfly Garden a mitja pantalla i dues files a la dreta (dues caselles a dalt, tres a baix). El nom va en un tros
   de paper estripat i l'estat, en una etiqueta del seu color. */
.m-seccio { padding: calc(64 * var(--u)) 0 0; }
.m-cap { display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u));
  padding: 0 calc(46 * var(--u)); margin-bottom: calc(22 * var(--u)); }
.m-cap h2 { margin: 0; font-size: calc(112 * var(--u)); line-height: 0.86; }
.m-cap h2::after { display: none; }
.m-tots { display: inline-block; padding: calc(12 * var(--u)) calc(24 * var(--u)); background: var(--accent); color: #fff;
  font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(24 * var(--u));
  text-decoration: none; transform: rotate(-1.5deg);
  -webkit-mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; }
.m-tots:hover { background: #b3221a; }
.m-tots:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.m-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: calc(262 * var(--u)); gap: calc(6 * var(--u)); }
.m-tessela { position: relative; display: block; overflow: hidden; grid-column: span 2; color: var(--tinta); text-decoration: none; background: #1c1a17; }
.m-gran { grid-column: span 6; grid-row: span 2; }
.m-mig { grid-column: span 3; }
.m-tessela img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.m-tessela:hover img { transform: scale(1.045); }
.m-etiqueta { position: absolute; left: calc(14 * var(--u)); bottom: calc(26 * var(--u)); z-index: 2; max-width: calc(100% - 44 * var(--u)); }
.m-text { position: relative; display: block; padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); background: var(--fons) url("../img/paper.jpg") center / 400px auto;
  -webkit-mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-targeta.svg") 0 0 / 100% 100% no-repeat; }
.m-nom { display: block; font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900;
  font-size: calc(22 * var(--u)); line-height: 0.98; }
.m-gran .m-nom { font-size: calc(72 * var(--u)); line-height: 0.88; }
.m-gran .m-etiqueta { left: 0; bottom: calc(56 * var(--u)); }
.m-gran .m-text { width: min-content; padding: calc(16 * var(--u)) calc(34 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); }
.m-estat { position: absolute; z-index: 3; right: calc(-14 * var(--u)); bottom: calc(-16 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u));
  white-space: nowrap;
  font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(17 * var(--u));
  background: var(--mustard); color: var(--tinta); transform: rotate(-3deg); }
.m-gran .m-estat { right: calc(-30 * var(--u)); bottom: calc(-22 * var(--u)); font-size: calc(26 * var(--u)); }
.m-estat.es-hecho { background: var(--accent); color: #fff; }
.m-estat.es-prototipo { background: var(--sky); }
.m-estat.es-en-produccion { background: var(--fons); }
.m-nota { position: absolute; top: calc(14 * var(--u)); right: calc(16 * var(--u)); z-index: 2; font-size: calc(12 * var(--t));
  color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); }
.m-paper { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(20 * var(--u));
  background: var(--accent); color: #fff; text-align: center; }
.m-paper .m-etiqueta { position: static; max-width: none; display: flex; flex-direction: column; align-items: center; }
.m-paper .m-text { padding: 0; background: none; -webkit-mask: none; mask: none; }
.m-paper .m-nom { font-size: calc(34 * var(--u)); line-height: 0.95; }
.m-paper .m-estat { position: static; margin-top: calc(18 * var(--u)); }
.m-paper:hover { background: #b3221a; }
.m-tessela:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (max-width: 700px) {
  .m-seccio { padding-top: 64px; }
  .m-cap { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 16px; margin-bottom: 18px; }
  .m-cap h2 { font-size: 60px; }
  .m-tots { font-size: 20px; padding: 10px 18px; }
  .m-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 52vw; gap: 4px; }
  .m-tessela, .m-mig { grid-column: span 1; }
  .m-gran { grid-column: 1 / -1; grid-row: span 2; }
  .m-gran .m-nom { font-size: 40px; }
  .m-gran .m-etiqueta { bottom: 34px; }
  .m-gran .m-text { padding: 10px 18px 12px 16px; }
  .m-gran .m-estat { right: -16px; bottom: -14px; font-size: 18px; }
  .m-nom, .m-paper .m-nom { font-size: 20px; }
  .m-etiqueta { left: 8px; bottom: 18px; max-width: calc(100% - 26px); }
  .m-text { padding: 6px 10px 7px; }
  .m-estat { font-size: 14px; right: -8px; bottom: -12px; }
  .m-mosaic > .m-tessela:last-child { grid-column: 1 / -1; }
  .m-etiqueta { bottom: 24px; }
  .m-estat { bottom: -18px; }
}

/* La Tecnología a sang (31-10-2026): la foto dels visitants del Butterfly Garden toca la vora esquerra i ocupa sis
   desenes de l'ample; la llista, a la dreta i amb aire. */
.portada .p-tecnologia { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 0; align-items: stretch; margin-top: calc(120 * var(--u)); padding: 0; }
.portada .p-tecnologia figure { margin: 0; overflow: hidden; min-height: calc(540 * var(--u)); }
.portada .p-tecnologia figure img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: none; mask: none; }
.portada .p-tecnologia .text { display: flex; flex-direction: column; justify-content: center;
  padding: calc(56 * var(--u)) calc(46 * var(--u)) calc(56 * var(--u)) calc(64 * var(--u)); }
.portada .p-tecnologia h2 { font-size: calc(80 * var(--u)); margin: 0 0 calc(26 * var(--u)); }
.portada .p-tecnologia ul { gap: calc(18 * var(--u)); }
.portada .p-tecnologia a { font-size: calc(28 * var(--u)); }
@media (max-width: 700px) {
  .portada .p-tecnologia { grid-template-columns: 1fr; margin-top: 64px; }
  .portada .p-tecnologia figure { min-height: 0; height: 64vw; }
  .portada .p-tecnologia .text { padding: 28px 16px 0; }
  .portada .p-tecnologia h2 { font-size: 52px; margin-bottom: 18px; }
  .portada .p-tecnologia a { font-size: 22px; }
}

/* Servicios (31-10-2026), calcat de referencies/v7/v7-serveis/ref-1.png: una franja del taller de vora a vora, amb la vora
   de baix estripada, i a sota les quatre il·lustracions amb el nom gran i el pinzell vermell. Sense filets entre columnes. */
.s-seccio { margin-top: calc(96 * var(--u)); }
/* la vora de baix fa 100 d'alt, com la de la capçalera: estirada a tota la franja feia dents de serra de 40 */
.s-banda { margin: 0; height: calc(330 * var(--u)); overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 90 * var(--u)) no-repeat, url("../img/vora-capcal.svg") bottom / 100% calc(100 * var(--u)) no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 90 * var(--u)) no-repeat, url("../img/vora-capcal.svg") bottom / 100% calc(100 * var(--u)) no-repeat; }
.s-banda img { width: 100%; height: 100%; object-fit: cover; }
.portada .s-llista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40 * var(--u));
  margin: calc(46 * var(--u)) 0 0; padding: 0 calc(46 * var(--u)); list-style: none; }
.portada .s-llista li { border: 0; padding: 0; text-align: left; }
.portada .s-llista a { display: block; text-decoration: none; color: var(--tinta); }
.portada .s-llista img { display: block; height: calc(150 * var(--u)); width: auto; max-width: 100%; object-fit: contain; margin: 0 0 calc(18 * var(--u)); }
.portada .s-llista .s-nom { display: inline-block; position: relative; font-family: var(--titols); font-variation-settings: var(--titols-variacio);
  font-weight: 900; font-size: calc(58 * var(--u)); line-height: 0.95; padding-bottom: calc(14 * var(--u)); }
.portada .s-llista .s-nom::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(110 * var(--u)); height: calc(12 * var(--u));
  background: url("../img/pinzell-vermell.svg") 0 50% / 100% 100% no-repeat; }
.portada .s-llista small { display: block; margin-top: calc(14 * var(--u)); padding: 0; font-size: calc(18 * var(--t)); line-height: 1.45; max-width: 26ch; }
.portada .s-llista a:hover .s-nom { color: var(--accent-text); }
@media (max-width: 700px) {
  .s-seccio { margin-top: 64px; }
  .s-banda { height: 180px; }
  .portada .s-llista { grid-template-columns: 1fr 1fr; gap: 30px 18px; margin-top: 26px; padding: 0 16px; }
  .portada .s-llista img { height: 96px; margin-bottom: 10px; }
  .portada .s-llista .s-nom { font-size: 34px; padding-bottom: 10px; }
  .portada .s-llista .s-nom::after { width: 70px; height: 9px; }
  .portada .s-llista small { font-size: 15px; }
}

/* Pieza a pieza (31-10-2026): una pantalla sencera. Quieta, és el gravat de l'estand desmuntat, gran, i el render del
   mateix estand muntat a la cantonada de baix a la dreta, tocant les vores. Amb moviment, l'escena es queda fixa mentre
   baixes i el render s'obre des de la cantonada fins a omplir-la (js/scroll.js, data-munta). */
.pk-seccio { margin-top: calc(120 * var(--u)); }
.pk-escena { position: relative; height: 100vh; height: 100svh; min-height: calc(560 * var(--u)); overflow: hidden; }
.pk-escena h2 { position: absolute; top: calc(30 * var(--u)); left: calc(46 * var(--u)); z-index: 1; margin: 0; font-size: calc(104 * var(--u)); line-height: 0.9; }
.pk-gravat { position: absolute; left: 0; right: 40%; top: calc(140 * var(--u)); bottom: calc(30 * var(--u)); margin: 0; display: grid; place-items: center; }
.pk-gravat img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pk-render { position: absolute; inset: 0; margin: 0; z-index: 2; clip-path: inset(36% 0% 0% 58%); }
.pk-render img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: none; mask: none; }
.pk-render figcaption { position: absolute; right: calc(46 * var(--u)); bottom: calc(22 * var(--u)); margin: 0; z-index: 3; color: #fff;
  font-size: calc(14 * var(--t)); padding: calc(4 * var(--u)) calc(10 * var(--u)); background: rgba(14, 12, 10, 0.55); }
@media (max-width: 700px) {
  .pk-seccio { margin-top: 64px; }
  .pk-escena { height: auto; min-height: 0; overflow: visible; padding: 0 0 0; }
  .pk-escena h2 { position: static; margin: 0 16px 14px; font-size: 52px; }
  .pk-gravat { position: static; display: block; padding: 0 16px; }
  .pk-gravat img { width: 100%; }
  .pk-render { position: relative; clip-path: none; margin-top: 18px; height: 62vw; }
  .pk-render figcaption { right: 16px; bottom: 12px; }
}

/* Del taller al recinto (31-10-2026): el camió i la furgoneta a sang, gairebé una pantalla, amb el títol en blanc a baix a
   l'esquerra. A sota, la franja negra amb més aire. */
.fl-seccio { position: relative; margin-top: calc(96 * var(--u)); height: 80vh; height: 80svh; min-height: calc(520 * var(--u)); overflow: hidden; color: #fff; }
.fl-foto { position: absolute; inset: 0; margin: 0; }
.fl-foto img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: none; mask: none; }
.fl-foto figcaption { position: absolute; right: calc(46 * var(--u)); bottom: calc(22 * var(--u)); z-index: 3; margin: 0;
  font-size: calc(13 * var(--t)); color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.fl-seccio::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 12, 10, 0.72) 0%, rgba(14, 12, 10, 0.3) 38%, rgba(14, 12, 10, 0) 62%),
              linear-gradient(to right, rgba(14, 12, 10, 0.42) 0%, rgba(14, 12, 10, 0) 55%); }
.fl-text { position: absolute; left: calc(46 * var(--u)); bottom: calc(60 * var(--u)); z-index: 3; }
.fl-text h2 { margin: 0 0 calc(14 * var(--u)); font-size: calc(104 * var(--u)); line-height: 0.9; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.28); }
.fl-text p { margin: 0 0 calc(18 * var(--u)); font-size: calc(22 * var(--t)); font-weight: 600; }
.fl-text .llocs { display: flex; gap: calc(26 * var(--u)); margin: 0; padding: 0; list-style: none; }
.fl-text .llocs a { color: #fff; font-weight: 700; font-size: calc(18 * var(--t)); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 3px; text-underline-offset: 6px; }
.fl-text .llocs a:hover { color: var(--mustard); }
.fl-text .llocs a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.portada .p-banda { padding: calc(84 * var(--u)) calc(46 * var(--u)) calc(90 * var(--u)); min-height: calc(420 * var(--u)); }
.portada .p-banda h2 { font-size: calc(96 * var(--u)); }
.portada .p-banda .banda-cos { max-width: calc(510 * var(--u)); }
.portada .p-banda h2 { white-space: nowrap; font-size: calc(74 * var(--u)) !important; }
.portada .p-banda .emblema { right: calc(30 * var(--u)); bottom: calc(30 * var(--u)); width: calc(470 * var(--u)); }
@media (max-width: 700px) {
  .fl-seccio { margin-top: 64px; height: 76vh; height: 76svh; min-height: 460px; }
  .fl-text { left: 16px; right: 16px; bottom: 44px; }
  .fl-text h2 { font-size: 50px; }
  .fl-text p { font-size: 17px; }
  .fl-text .llocs { flex-direction: column; gap: 10px; }
  .fl-foto figcaption { right: 16px; bottom: 12px; }
  .portada .p-banda { padding: 48px 16px 260px; }
  .portada .p-banda h2 { font-size: 48px; }
  .portada .p-banda .emblema { position: absolute; width: 300px; left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; margin: 0; }
}

/* Cómo trabajamos (31-10-2026): els quatre passos de vora a vora amb el número gros en vermell, el gravat, el nom i una
   línia. Una ratlla vermella uneix els números i es dibuixa mentre baixes (js/scroll.js, data-linia). */
.pr-seccio { margin-top: calc(96 * var(--u)); padding: 0 calc(46 * var(--u)); }
.pr-seccio h2 { margin: 0 0 calc(40 * var(--u)); font-size: calc(104 * var(--u)); line-height: 0.9; }
.pr-cos { position: relative; }
.pr-linia { position: absolute; left: 0; right: calc(-46 * var(--u)); top: calc(104 * var(--u)); height: 3px; background: var(--accent); transform-origin: 0 50%; }
.pr-llista { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(40 * var(--u)); margin: 0; padding: 0; list-style: none; }
.pr-num { position: relative; z-index: 1; display: inline-block;
  font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(96 * var(--u)); line-height: 1.05; color: var(--accent-text); }
.pr-llista img { display: block; height: calc(150 * var(--u)); width: auto; max-width: 100%; object-fit: contain; margin: calc(20 * var(--u)) 0 calc(18 * var(--u)); }
.pr-llista strong { display: block; font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(40 * var(--u)); line-height: 0.95; }
.pr-llista small { display: block; margin-top: calc(12 * var(--u)); font-size: calc(18 * var(--t)); line-height: 1.45; max-width: 28ch; }
@media (max-width: 700px) {
  .pr-seccio { margin-top: 64px; padding: 0 16px; }
  .pr-seccio h2 { font-size: 52px; margin-bottom: 22px; }
  .pr-linia { display: none; }
  .pr-llista { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .pr-num { font-size: 56px; }
  .pr-llista img { height: 96px; margin: 10px 0 12px; }
  .pr-llista strong { font-size: 28px; }
  .pr-llista small { font-size: 15px; }
}

/* ===== Versió 4, segona tanda (31-10-2026, 01:0x): les quatre seccions calcades de les referències v7 ===== */

/* El pinzell vermell sota un títol, com a les referències (sense subratllar cap paraula sola) */
.amb-pinzell { position: relative; padding-bottom: calc(22 * var(--u)); }
.amb-pinzell::after { content: ""; position: absolute; left: calc(-6 * var(--u)); bottom: 0; width: min(100%, calc(420 * var(--u)));
  height: calc(16 * var(--u)); background: url("../img/pinzell-vermell.svg") 0 50% / 100% 100% no-repeat; }

/* Tecnología (v7-tecnologia/ref-1): la foto a sang fins al 62 % i un paper estripat que la tapa per la dreta, amb el títol,
   el pinzell i cada línia amb la seva icona gravada sobre un pegat vermell. */
.t-seccio { position: relative; display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); margin-top: calc(130 * var(--u));
  min-height: calc(600 * var(--u)); }
.t-foto { margin: 0; overflow: hidden; }
.t-foto img { width: 100%; height: 100%; object-fit: cover; }
.t-paper { position: relative; z-index: 2; margin-left: calc(-46 * var(--u)); display: flex; flex-direction: column; justify-content: center;
  padding: calc(50 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u)) calc(66 * var(--u));
  background: var(--fons) url("../img/paper.jpg") center / 640px auto;
  -webkit-mask: linear-gradient(#000 0 0) right top / calc(100% - 130 * var(--u)) 100% no-repeat, url("../img/vora-esquerra.svg") left top / calc(140 * var(--u)) 100% no-repeat;
  mask: linear-gradient(#000 0 0) right top / calc(100% - 130 * var(--u)) 100% no-repeat, url("../img/vora-esquerra.svg") left top / calc(140 * var(--u)) 100% no-repeat; }
.t-paper h2 { margin: 0 0 calc(30 * var(--u)); font-size: calc(62 * var(--u)); line-height: 0.92; }
.t-llista { display: grid; gap: calc(16 * var(--u)); margin: 0; padding: 0; list-style: none; }
.t-llista a { display: grid; grid-template-columns: calc(86 * var(--u)) 1fr; align-items: center; gap: calc(16 * var(--u));
  color: var(--tinta); text-decoration: none; }
.t-ico { width: 100%; height: auto; }
.t-llista span { font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900;
  font-size: calc(24 * var(--u)); line-height: 1.02; }
.t-llista a:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.t-llista a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Cómo trabajamos (v7-proces/ref-1): quatre columnes centrades, el número gros en vermell a l'esquerra del gravat i el
   pegat de color al darrere; el primer pas, que no en porta, hi té el mostassa. */
.pr-seccio h2 { margin-bottom: calc(46 * var(--u)); }
.pr-llista { gap: calc(30 * var(--u)); }
.pr-llista li { text-align: center; }
.pr-figura { position: relative; display: flex; justify-content: center; align-items: flex-end; height: calc(190 * var(--u)); }
.pr-figura img { position: relative; z-index: 1; height: calc(170 * var(--u)); margin: 0; }
.pr-pas-1 .pr-figura::before { content: ""; position: absolute; z-index: 0; left: 50%; top: calc(8 * var(--u)); width: calc(150 * var(--u));
  height: calc(120 * var(--u)); background: url("../img/pegat-mostassa-1.webp") center / contain no-repeat; }
.pr-num { position: absolute; left: 0; top: calc(-6 * var(--u)); z-index: 2; font-size: calc(124 * var(--u)); line-height: 0.9; }
.pr-llista strong { margin-top: calc(22 * var(--u)); font-size: calc(36 * var(--u)); white-space: nowrap; }
.pr-llista small { margin-left: auto; margin-right: auto; }

/* Pieza a pieza (v7-peca/ref-1): el títol en dues línies, el gravat a l'esquerra i el render a sang a la dreta, amb la vora
   estripada; quan baixes, el render s'obre cap a l'esquerra fins a omplir la pantalla (js/scroll.js, --tall). */
.pk-escena { --tall: 52%; }
.pk-escena h2 { font-size: calc(124 * var(--u)); line-height: 0.86; }
.pk-gravat { right: calc(48% + 40 * var(--u)); top: calc(250 * var(--u)); }
.pk-render { clip-path: inset(0% 0% 0% var(--tall)); }
.pk-vora { position: absolute; top: 0; bottom: 0; z-index: 3; left: calc(var(--tall) - 30 * var(--u)); width: calc(48 * var(--u));
  background: var(--fons) url("../img/paper.jpg") center / 640px auto;
  -webkit-mask: url("../img/vora-paper.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/vora-paper.svg") 0 0 / 100% 100% no-repeat; }
.pk-peu { position: absolute; right: calc(46 * var(--u)); bottom: calc(30 * var(--u)); z-index: 4; margin: 0;
  padding: calc(6 * var(--u)) calc(14 * var(--u)); background: var(--mustard); color: var(--tinta);
  font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(17 * var(--u)); transform: rotate(-1.5deg); }

/* El final (v7-final/ref-1): el paper estripat a l'esquerra amb el títol negre, el pinzell i la línia, i el camió a sang a la
   dreta; a sota, la franja negra amb la caixa de text clara i la tripulació gran. */
.fl-seccio::after { display: none; }
.fl-foto { left: 32%; }
.fl-text { left: 0; top: 0; bottom: 0; width: 42%; display: flex; flex-direction: column; justify-content: center;
  padding: calc(40 * var(--u)) calc(70 * var(--u)) calc(40 * var(--u)) calc(46 * var(--u)); color: var(--tinta);
  background: var(--fons) url("../img/paper.jpg") center / 640px auto;
  -webkit-mask: linear-gradient(#000 0 0) left top / calc(100% - 130 * var(--u)) 100% no-repeat, url("../img/vora-paper.svg") right top / calc(140 * var(--u)) 100% no-repeat;
  mask: linear-gradient(#000 0 0) left top / calc(100% - 130 * var(--u)) 100% no-repeat, url("../img/vora-paper.svg") right top / calc(140 * var(--u)) 100% no-repeat; }
.fl-text h2 { color: var(--tinta); text-shadow: none; font-size: calc(74 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.fl-text p { font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(28 * var(--u));
  line-height: 1.05; margin-bottom: calc(22 * var(--u)); }
.fl-text .llocs { flex-wrap: wrap; gap: calc(10 * var(--u)) calc(22 * var(--u)); }
.fl-text .llocs a { color: var(--tinta); font-size: calc(16 * var(--t)); }
.fl-text .llocs a:hover { color: var(--accent-text); }
.fl-text .llocs a:focus-visible { outline-color: var(--accent); }
.fl-foto figcaption { padding: calc(4 * var(--u)) calc(10 * var(--u)); background: rgba(14, 12, 10, 0.55); text-shadow: none; }
.portada .p-banda h2 { color: var(--fons); }
.portada .banda-form textarea { background: var(--fons); color: var(--tinta); border: 0; padding: calc(16 * var(--u)) calc(18 * var(--u));
  font-size: calc(18 * var(--t)); min-height: calc(76 * var(--u)); }
.portada .banda-form textarea::placeholder { color: #6f6a61; }
.portada .p-banda .emblema { width: calc(430 * var(--u)); right: calc(46 * var(--u)); bottom: 50%; transform: translateY(50%); }

@media (max-width: 700px) {
  .amb-pinzell { padding-bottom: 14px; }
  .amb-pinzell::after { height: 11px; }
  .t-seccio { grid-template-columns: 1fr; margin-top: 64px; min-height: 0; }
  .t-foto { height: 64vw; }
  .t-paper { margin: -26px 0 0; padding: 40px 16px 8px; -webkit-mask: url("../img/vora-capcal.svg") 0 0 / 100% 100% no-repeat;
    mask: none; }
  .t-paper h2 { font-size: 52px; margin-bottom: 20px; }
  .t-llista a { grid-template-columns: 64px 1fr; gap: 12px; }
  .t-llista span { font-size: 21px; }
  .pr-figura { height: 140px; }
  .pr-figura img { height: 118px; }
  .pr-pas-1 .pr-figura::before { width: 104px; height: 84px; }
  .pr-num { font-size: 64px; }
  .pr-llista strong { font-size: 28px; margin-top: 14px; }
  .pk-escena h2 { font-size: 56px; }
  .pk-vora { display: none; }
  .pk-render { clip-path: none; }
  .pk-peu { position: static; display: inline-block; margin: 10px 16px 0; font-size: 15px; }
  .fl-seccio { height: auto; min-height: 0; overflow: visible; }
  .fl-foto { position: relative; left: 0; height: 64vw; }
  .fl-text { position: relative; width: auto; padding: 30px 16px 8px; -webkit-mask: none; mask: none; }
  .fl-text h2 { font-size: 50px; }
  .fl-text p { font-size: 24px; }
  .fl-text .llocs { flex-direction: column; gap: 10px; }
  .portada .banda-form textarea { font-size: 16px; }
  .portada .p-banda .emblema { width: 300px; left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); }
  .portada .p-banda h2 { white-space: normal; font-size: 46px !important; }
}

/* ===== La revisió de la porta (31-10-2026, wf_5eac0aa8-389). Les mides d'escriptori van dins de min-width: 701px perquè
   no trepitgin les del mòbil, que fan servir píxels. ===== */
@media (min-width: 701px) {
  /* el capçal: el titular més petit i més avall, sota el cap de la noia agenollada (rebuig 4 de la porta), i els guions a
     la dreta amb les fletxes, perquè no toquin el botó */
  .h-titol { font-size: calc(57 * var(--u)); }
  .h-textos { bottom: calc(56 * var(--u)); width: calc(520 * var(--u)); }
  .h-controls { left: auto; }
  .h-punts { order: 0; margin: 0 calc(6 * var(--u)); }

  /* el mosaic ocupa una pantalla, amb els noms més petits; el segell, més avall que la línia de base */
  .m-seccio { padding-top: calc(64 * var(--u)); }
  .m-mosaic { grid-auto-rows: calc(317 * var(--u)); }
  .m-nom { font-size: calc(19 * var(--u)); }
  .m-gran .m-nom { font-size: calc(44 * var(--u)); }
  .m-etiqueta { bottom: calc(36 * var(--u)); }
  .m-estat, .m-gran .m-estat { bottom: calc(-26 * var(--u)); }

  /* un sol títol gegant, el de Pieza a pieza; Proyectos i Cómo trabajamos com Del taller al recinto */
  .m-cap h2, .pr-seccio h2 { font-size: calc(74 * var(--u)); }

  /* Servicios: el títol en blanc sobre la franja, amb el degradat; l'etiqueta legal a dalt a la dreta */
  .s-cap { position: relative; }
  .s-banda { position: relative; }
  .s-banda::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right, rgba(14, 12, 10, 0.6) 0%, rgba(14, 12, 10, 0.18) 40%, rgba(14, 12, 10, 0) 60%); }
  .s-titol { position: absolute; left: calc(46 * var(--u)); bottom: calc(86 * var(--u)); z-index: 2; margin: 0; color: #fff;
    font-size: calc(84 * var(--u)); line-height: 0.9; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3); }
  .s-nota { position: absolute; right: calc(46 * var(--u)); top: calc(18 * var(--u)); z-index: 2; margin: 0; font-size: calc(13 * var(--t));
    color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); }
  .s-retall { position: absolute; z-index: 3; pointer-events: none; }
  .s-retall-1 { left: calc(-34 * var(--u)); top: calc(-26 * var(--u)); width: calc(150 * var(--u)); transform: rotate(-8deg); }
  .s-retall-2 { right: calc(-40 * var(--u)); top: 42%; width: calc(130 * var(--u)); transform: rotate(6deg); }
  .s-seccio { overflow-x: clip; }

  /* el pegat vermell darrere del gravat d'Stands, que a més es fa un 15 % més gran perquè pesi com els altres. El gravat té
     el paper a dins i el tapa: el pegat surt per l'esquerra, com el mostassa de Diseño (abans només en sortia un fil) */
  .portada .s-llista li:first-child a { position: relative; }
  .portada .s-llista li:first-child a::before { content: ""; position: absolute; z-index: 0; left: calc(-40 * var(--u)); top: calc(26 * var(--u));
    width: calc(170 * var(--u)); height: calc(130 * var(--u)); background: url("../img/pegat-vermell-2.webp") center / contain no-repeat; }
  .portada .s-llista li:first-child img { position: relative; z-index: 1; transform: scale(1.15); transform-origin: 0 100%; }

  /* Tecnología: la foto a sang de vora a vora, i el paper a sobre a partir del 60 % */
  .t-seccio { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); margin-top: calc(40 * var(--u)); }
  .t-foto { grid-column: 1 / -1; grid-row: 1; }
  .t-foto img { object-position: 0% 50%; }
  .t-paper { grid-column: 2; grid-row: 1; margin-left: 0; }

  /* Cómo trabajamos: a l'esquerra com Servicios i esglaonat, perquè es llegeixi com una seqüència */
  .pr-seccio { position: relative; padding-bottom: calc(130 * var(--u)); overflow-x: clip; }
  .pr-llista li { text-align: left; }
  .pr-llista li:nth-child(2) { margin-top: calc(34 * var(--u)); }
  .pr-llista li:nth-child(3) { margin-top: calc(68 * var(--u)); }
  .pr-llista li:nth-child(4) { margin-top: calc(102 * var(--u)); }
  .pr-figura { justify-content: flex-start; padding-left: calc(64 * var(--u)); }
  .pr-pas-1 .pr-figura::before { left: calc(64 * var(--u)); }
  .pr-llista small { margin-left: 0; }
  .pr-retall { position: absolute; z-index: 0; pointer-events: none; }
  .pr-retall-1 { left: calc(-30 * var(--u)); bottom: calc(-38 * var(--u)); width: calc(200 * var(--u)); transform: rotate(-4deg); }
  .pr-retall-2 { right: calc(-36 * var(--u)); bottom: calc(-52 * var(--u)); width: calc(220 * var(--u)); transform: rotate(3deg); }

  /* Pieza a pieza: el gravat comença a l'eix del text, sense cap peça tallada, i la gavina va al racó buit */
  .pk-seccio { margin-top: calc(170 * var(--u)); }
  .pk-gravat { left: calc(46 * var(--u)); }
  .pk-retall { position: absolute; z-index: 2; pointer-events: none; }
  .pk-blau { left: calc(340 * var(--u)); top: calc(34 * var(--u)); width: calc(130 * var(--u)); transform: rotate(-6deg); }
  .pk-gavina { left: calc(372 * var(--u)); top: calc(18 * var(--u)); width: calc(96 * var(--u)); }

  /* la franja negra: la tripulació a l'esquerra empenyent cap al formulari, que va a la dreta */
  .portada .p-banda .banda-cos { margin-left: auto; }
  .portada .p-banda .emblema { left: calc(46 * var(--u)); right: auto; }

  /* el botó del capçal, una mica més gran que la resta */
  .h-accio .boto { font-size: calc(24 * var(--u)); }
}

@media (max-width: 700px) {
  /* el mosaic, en una columna: cada casella a 4:3 i el nom en una o dues línies */
  .m-mosaic { grid-template-columns: 1fr; grid-auto-rows: 75vw; }
  .m-gran, .m-tessela, .m-mig, .m-mosaic > .m-tessela:last-child { grid-column: auto; grid-row: span 1; }
  .m-nom, .m-paper .m-nom { font-size: 20px; }
  .m-gran .m-nom { font-size: 28px; }
  .s-cap { position: relative; }
  .s-titol { margin: 22px 16px 0; font-size: 52px; }
  .s-nota { position: absolute; right: 16px; top: 10px; margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); }
  .s-banda { position: relative; }
  .s-banda img { object-position: 0% 50%; }
  .s-retall, .pr-retall, .pk-retall { display: none; }
  .portada .capcal .logo { width: 100px; }
}

/* la casella de CONAMA: un gravat de la casa sobre el vermell en lloc del bloc buit */
.m-paper .m-gravat { width: 74%; height: auto; margin-bottom: calc(14 * var(--u)); object-fit: contain; }

/* els clients amb moviment reduït: les dues files senceres, començant a l'eix del text */
@media (prefers-reduced-motion: reduce) {
  .p-clients .cinta ul { flex: 1 1 auto; }
  .p-clients .cinta li { padding: 0 calc(52 * var(--u)) 0 0; }
}

/* Els retocs de després de la revisió (31-10-2026): al mòbil, el segell al costat del nom i no a sobre de la seva última
   línia; el titular del capçal, sota el cap de la noia agenollada; menys buit després de Cómo trabajamos; i els clients,
   sense moviment, alineats a l'esquerra. */
@media (max-width: 700px) {
  .m-etiqueta { display: flex; align-items: flex-end; gap: 6px; bottom: 16px; }
  .m-estat, .m-gran .m-estat { position: static; flex: none; margin-bottom: -4px; }
}
@media (min-width: 701px) {
  .h-textos { bottom: calc(44 * var(--u)); }
  .pr-seccio { padding-bottom: calc(48 * var(--u)); }
  .pk-seccio { margin-top: calc(84 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .p-clients .cinta ul { justify-content: flex-start; }
}
@media (min-width: 701px) { .m-gran .m-estat { bottom: calc(-34 * var(--u)); } }
/* l'etiqueta legal de la franja cau sobre la paret clara del taller: va sobre un fons fosc, com el peu del camió */
.s-nota { padding: 3px 8px; background: rgba(14, 12, 10, 0.6); text-shadow: none; }

/* La passada al Chrome de l'Albert (31-10-2026, a 3.206 × 1.334) */
/* les etiquetes legals de les fotos, totes sobre fons fosc: «Recreación» i «Render» quedaven blanques sobre el sostre clar */
.h-nota, .m-nota { padding: 3px 8px; background: rgba(14, 12, 10, 0.6); text-shadow: none; }
/* Pieza a pieza: una còpia blanca del títol dins del render, retallada amb ell, perquè quan la vora passa per sobre del
   títol la part del paper es quedi negra i la de la foto ja sigui blanca (abans es tornava gris i la vora el tallava) */
.pk-escena .pk-titol { position: absolute; top: calc(30 * var(--u)); left: calc(46 * var(--u)); margin: 0;
  font-size: calc(124 * var(--u)); line-height: 0.86; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3); }
@media (min-width: 701px) {
  .portada .p-banda { margin-top: calc(-22 * var(--u)); }
}
@media (max-width: 700px) {
  .pk-escena .pk-titol { display: none; }
}
/* el degradat del capçal va dins de cada diapositiva, per sota de la seva etiqueta legal: posat a sobre de totes, la
   tapava, perquè l'etiqueta viu dins de la diapositiva i el JS hi posa un z-index */
.h-slider::after { content: none; }
.h-diapo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 12, 10, 0.78) 0%, rgba(14, 12, 10, 0.5) 34%, rgba(14, 12, 10, 0.12) 62%, rgba(14, 12, 10, 0) 76%),
              linear-gradient(to right, rgba(14, 12, 10, 0.5) 0%, rgba(14, 12, 10, 0.22) 38%, rgba(14, 12, 10, 0) 60%); }
.h-slider.amb-paper .h-diapo::after { background: linear-gradient(to top, rgba(14, 12, 10, 0.5) 0%, rgba(14, 12, 10, 0) 26%); }
.h-nota { z-index: 2; }
/* el títol negre de Pieza a pieza, per sobre de la tira de paper però retallat a la vora del render: --tall-n és --tall
   sense unitat i 100cqw és l'ample de l'escena. Abans la tira n'amagava les lletres que tenia a sota */
@media (min-width: 701px) {
  .pk-escena { --tall-n: 0.52; }
  .pk-escena h2 { z-index: 4; clip-path: inset(-30% calc(100% + 46 * var(--u) - var(--tall-n) * 100cqw) -60% -10%); }
}

/* --- 01-11-2026: el mosaic de Proyectos, amb la foto i el render explosionat de cada projecte. L'Albert: «que a
   l'imatge es pugui veure la foto + el render fet». L'Avatar con IA, el primer i a tota l'amplada; els altres sis, de
   dos en dos. La foto a l'esquerra i, al costat, el render sobre el paper, amb la vora estripada que la talla. --- */
.m-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(250 * var(--u)); }
.m-tessela, .m-mig { grid-column: span 1; grid-row: span 1; }
.m-gran { grid-column: 1 / -1; grid-row: span 2; }
.m-tessela.amb-render { display: grid; grid-template-columns: 58fr 42fr; background: var(--fons) url("../img/paper.jpg") center / 400px auto; }
.m-foto { position: relative; display: block; height: 100%; overflow: hidden; background: #1c1a17; }
.m-foto img { width: 100%; height: 100%; object-fit: cover; }
.m-tessela:hover .m-foto img { transform: scale(1.045); }
.m-render { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0;
  margin-left: calc(-14 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u));
  background: var(--fons) url("../img/paper.jpg") center / 400px auto;
  -webkit-mask: url("../img/vora-esquerra-fina.svg") left / calc(16 * var(--u)) 100% no-repeat, linear-gradient(#000 0 0) right / calc(100% - calc(15 * var(--u))) 100% no-repeat;
  mask: url("../img/vora-esquerra-fina.svg") left / calc(16 * var(--u)) 100% no-repeat, linear-gradient(#000 0 0) right / calc(100% - calc(15 * var(--u))) 100% no-repeat; }
.m-tessela .m-render img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 60%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.m-tessela:hover .m-render img { transform: scale(1.06) rotate(-1.2deg); }
.m-render .m-nota { top: auto; right: calc(12 * var(--u)); bottom: calc(10 * var(--u)); padding: 0; background: none; color: var(--tinta-suau); text-shadow: none; }
.m-gran .m-render { padding: calc(30 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u)); }
.m-etiqueta { z-index: 2; }
@media (max-width: 700px) {
  .m-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .m-tessela, .m-mig, .m-gran, .m-mosaic > .m-tessela:last-child { grid-column: auto; grid-row: auto; height: 112vw; }
  .m-tessela.amb-render { grid-template-columns: 1fr; grid-template-rows: 62fr 38fr; }
  .m-render { margin: -12px 0 0; padding: 22px 16px 12px;
    -webkit-mask: url("../img/vora-dalt.svg") top / 100% 14px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 13px) no-repeat;
    mask: url("../img/vora-dalt.svg") top / 100% 14px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 13px) no-repeat; }
  .m-etiqueta { bottom: calc(38% + 18px); }
}

/* --- 01-11-2026: la cinta de clients, amb els logos (l'Albert: «vull els logos dels clients, no els noms»). En gris de
   tinta i multiplicats sobre el paper, perquè no siguin set marques de set colors. --- */
.p-clients .cinta li.logo-client { display: flex; align-items: center; padding: 0 calc(46 * var(--u)); }
.p-clients .cinta li.logo-client img { height: calc(50 * var(--u)); width: auto; max-width: calc(230 * var(--u)); object-fit: contain;
  filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; opacity: 0.88; }
.p-clients .cinta li.es-escut img { height: calc(74 * var(--u)); }
@media (max-width: 700px) {
  .p-clients .cinta li.logo-client { padding: 6px 18px; }
  .p-clients .cinta li.logo-client img { height: 34px; max-width: 150px; }
  .p-clients .cinta li.es-escut img { height: 50px; }
}

/* --- 01-11-2026: les fires de cada zona, a «Del taller al recinto»: una zona sota l'altra, i les fires en una línia,
   separades per comes, perquè el paper és estret --- */
.fires-zones { display: grid; gap: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); max-width: calc(380 * var(--u)); }
.fires-zones ul { display: block; margin: calc(4 * var(--u)) 0 0; padding: 0; list-style: none; font-size: calc(14 * var(--t)); line-height: 1.4; }
.fires-zones li { display: inline; }
.fires-zones li:not(:last-child)::after { content: ", "; }
.fz-titol { color: var(--tinta); font-weight: 700; font-size: calc(16 * var(--t)); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fz-titol:hover { color: var(--accent-text); }
@media (max-width: 700px) { .fires-zones { max-width: none; gap: 14px; } .fires-zones ul { font-size: 15px; } .fz-titol { font-size: 16px; } }

/* la portada, igual: de 701 a 1.023 px el capçal va sobre el paper, a sobre del carrusel i no a dins */
@media (min-width: 701px) and (max-width: 1023px) {
  .portada .capcal { position: relative; height: auto; background: none; -webkit-mask: none; mask: none; }
}