/* Les pàgines de dins: Proyectos, Estands, Diseño, Taller CNC, Carpintería, Metal, Contacto i Privacidad.
   Fan servir estil.css i hi afegeixen el que cal. Les mides de les de servei surten de la referència d'Estands
   (../../referencies/circ-v3-estands.png) i les del contacte, de la seva (circ-v3-contacto.png). */

.titol-fila { display: flex; align-items: baseline; gap: calc(18 * var(--u)); flex-wrap: wrap; margin: calc(26 * var(--u)) 0 calc(22 * var(--u)); }
.titol-fila h1 { font-size: calc(70 * var(--u)); }

/* --- El capçal de les pàgines de servei: el de la portada, amb una etiqueta vermella i l'entradeta --- */
/* el bloc de text va dins del flux i mana l'alçada: un títol llarg o una entradeta llarga fan créixer el capçal, no se'n surten */
.heroi-servei { height: auto; min-height: calc(440 * var(--u)); padding: calc(60 * var(--u)) 0 calc(34 * var(--u)) calc(40 * var(--u)); }
.heroi-servei .foto { left: calc(236 * var(--u)); width: calc(100% - calc(236 * var(--u))); height: 100%; }
.heroi-servei .text { position: relative; left: auto; top: auto; width: calc(380 * var(--u)); }
.heroi-servei.heroi-cas h1 { font-size: calc(56 * var(--u)); }
.heroi-servei h1 { font-size: calc(76 * var(--u)); line-height: 0.98; }
/* el paper de cada línia comença una mica més avall, perquè no tapi el descendent de la línia de sobre (la «y») */
.heroi-servei h1 span { display: inline; clip-path: none; padding: 0 calc(12 * var(--u)) calc(4 * var(--u)); margin: 0 0 0 calc(-12 * var(--u));
  background: linear-gradient(var(--newsprint), var(--newsprint)) 0 100% / 100% calc(100% - 0.18em) no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.etiqueta { display: inline-block; margin: calc(10 * var(--u)) 0 0 calc(-6 * var(--u)); background: var(--accent); color: #fff; font-family: var(--titols);
  font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(26 * var(--u)); line-height: 1.05; padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u));
  transform: rotate(-3deg); clip-path: polygon(0 6%, 4% 0, 100% 4%, 98% 94%, 95% 100%, 1% 96%); }
.entradeta { margin: calc(16 * var(--u)) 0 0; padding: calc(12 * var(--u)) calc(14 * var(--u)); background: var(--newsprint); font-size: calc(16 * var(--t)); line-height: 1.45; max-width: calc(330 * var(--u));
  clip-path: polygon(0 2%, 3% 0, 98% 2%, 100% 0, 99% 97%, 96% 100%, 2% 98%, 0 100%); }
.heroi-servei .personatge { right: calc(26 * var(--u)); top: auto; bottom: calc(-26 * var(--u)); width: calc(170 * var(--u)); }
.heroi-servei::after { display: none; }
.heroi-curt { min-height: calc(300 * var(--u)); padding-top: calc(96 * var(--u)); }
.heroi-curt h1 { font-size: calc(96 * var(--u)); }
.heroi-curt .personatge { left: auto; right: calc(22 * var(--u)); bottom: calc(-30 * var(--u)); width: calc(150 * var(--u)); }

/* --- Qué incluye: sis caselles amb la icona sobre un retall de color --- */
.inclou { display: grid; grid-template-columns: repeat(6, 1fr); margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none; }
.inclou li { padding: 0 calc(12 * var(--u)) calc(10 * var(--u)); border-left: 1.5px solid var(--linia); }
.inclou li:first-child { border-left: 0; padding-left: 0; }
.inclou div { height: calc(112 * var(--u)); display: flex; align-items: center; justify-content: center; position: relative; }
.inclou img { max-height: calc(108 * var(--u)); width: auto; max-width: 100%; position: relative; }
.amb-retall::before { content: ""; position: absolute; inset: calc(8 * var(--u)) calc(4 * var(--u)); background: center / 100% 100% no-repeat; }
.amb-retall.blau::before { background-image: url("../img/retall-blau.svg"); }
.amb-retall.mostassa::before { background-image: url("../img/retall-mostassa.svg"); }
.amb-retall.vermell::before { background-image: url("../img/retall-vermell.svg"); }
.inclou h3 { font-size: calc(21 * var(--u)); line-height: 1.02; margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); }
.inclou p { margin: 0; font-size: calc(14 * var(--t)); line-height: 1.35; }

/* --- Cómo trabajamos, a Estands: sis passos amb el dibuix, i la corda al costat del títol --- */
.seccio h2.corda::after { left: auto; right: calc(-520 * var(--u)); width: calc(500 * var(--u)); height: calc(10 * var(--u)); bottom: calc(46 * var(--u));
  background: repeating-linear-gradient(-55deg, var(--ink) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(6 * var(--u))); border-radius: calc(5 * var(--u)); }
.passos { display: grid; grid-template-columns: repeat(6, 1fr); margin: calc(12 * var(--u)) 0 0; padding: 0; list-style: none; counter-reset: pas; }
.passos li { counter-increment: pas; padding: 0 calc(10 * var(--u)); position: relative; }
.passos li + li::before { content: ""; position: absolute; left: calc(-7 * var(--u)); top: calc(96 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u));
  border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.passos h3 { font-size: calc(21 * var(--u)); line-height: 1.05; min-height: 2.1em; }
.passos h3::before { content: "0" counter(pas); display: block; font-size: calc(30 * var(--u)); color: var(--accent); margin-bottom: 2px; }
.passos img { height: calc(104 * var(--u)); width: auto; max-width: 100%; margin: calc(6 * var(--u)) 0; object-fit: contain; }
.passos p { margin: 0; font-size: calc(14 * var(--t)); line-height: 1.35; }

/* --- Proyectos relacionados --- */
.relacionats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(13 * var(--u)); margin-top: calc(12 * var(--u)); }
.relacionats figure, .graella-projectes figure { margin: 0; }
.relacionats img { width: 100%; height: calc(170 * var(--u)); object-fit: cover; }
.relacionats figcaption, .graella-projectes figcaption { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144;
  font-weight: 900; font-size: calc(19 * var(--t)); line-height: 1.1; margin-top: calc(7 * var(--u)); }
.graella-projectes small { display: block; font-family: var(--text); font-weight: 500; font-size: calc(13 * var(--t)); color: var(--tinta-suau); margin-top: 2px; }

/* --- La crida del final: l'emblema, la pregunta i el botó, i la caixa a l'altra banda --- */
.crida-banda { position: relative; display: grid; grid-template-columns: calc(330 * var(--u)) 1fr calc(160 * var(--u)); align-items: center; gap: calc(24 * var(--u));
  padding: calc(26 * var(--u)) calc(46 * var(--u)) calc(30 * var(--u)); margin-top: calc(26 * var(--u)); }
.crida-banda .emblema { width: calc(330 * var(--u)); }
.crida-banda h2 { font-size: calc(46 * var(--u)); line-height: 1; margin-bottom: calc(14 * var(--u)); }
.crida-banda .resposta { display: inline-block; margin-left: calc(12 * var(--u)); transform: rotate(-4deg); }
.crida-banda .caixa { width: calc(150 * var(--u)); justify-self: end; }

/* --- Proyectos: els filtres i la graella --- */
.filtres-projectes { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin: calc(24 * var(--u)) 0 calc(22 * var(--u)); padding: 0; list-style: none; }
.filtres-projectes button { font: inherit; font-weight: 600; font-size: calc(16 * var(--t)); background: transparent; border: 1.5px solid var(--linia);
  border-radius: calc(4 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); cursor: pointer; color: var(--tinta); }
.filtres-projectes button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.filtres-projectes button:focus-visible { outline: calc(3 * var(--u)) solid var(--tinta); outline-offset: 2px; }
.graella-projectes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22 * var(--u)) calc(13 * var(--u)); }
.graella-projectes img { width: 100%; height: calc(212 * var(--u)); object-fit: cover; }
.graella-projectes [hidden] { display: none; }

/* --- Contacto --- */
.contacte-pagina { padding-top: calc(6 * var(--u)); }
.contacte-cos { display: grid; grid-template-columns: 1fr calc(430 * var(--u)); gap: calc(30 * var(--u)); align-items: start; margin-bottom: calc(30 * var(--u)); }
.contacte-titol { position: relative; margin: calc(40 * var(--u)) 0 calc(44 * var(--u)); }
.contacte-titol h1 { font-size: calc(96 * var(--u)); line-height: 0.86; display: inline-block; position: relative; }
.contacte-titol h1::after { content: ""; position: absolute; left: 30%; right: -4%; bottom: calc(-28 * var(--u)); height: calc(16 * var(--u)); z-index: -1;
  background: url("../img/pinzell-vermell.svg") center / 100% 100% no-repeat; }
.contacte-titol .resposta { position: absolute; left: calc(100% - calc(36 * var(--u))); top: calc(96 * var(--u)); transform: rotate(-6deg); font-size: calc(16 * var(--t));
  white-space: nowrap; z-index: 2; }
.formulari { display: grid; gap: calc(18 * var(--u)); background: var(--superficie); padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u));
  clip-path: polygon(0 1%, 2% 0, 98% 1%, 100% 0, 100% 99%, 97% 100%, 3% 99%, 0 100%); }
.camp { display: grid; gap: calc(6 * var(--u)); }
.camp label { font-weight: 700; font-size: calc(16 * var(--t)); }
.camp input[type="text"], .camp input[type="email"], .camp input[type="tel"], .camp input[type="date"], .camp input[type="number"], .camp textarea {
  width: 100%; font: inherit; color: var(--tinta); background: #FBF8F1; border: 1.5px solid #8C8578;
  padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: 2px; }
.camp textarea { resize: vertical; min-height: calc(92 * var(--u)); }
/* el camp de data del Chrome fa 2 px més que els altres pel marge de dins: així els dos de la fila acaben igual */
.camp input[type="date"]::-webkit-datetime-edit { padding: 0; }
.camp input:focus, .camp textarea:focus { outline: calc(3 * var(--u)) solid var(--accent); outline-offset: 1px; }
.ajuda { margin: 0; font-size: calc(14 * var(--t)); color: var(--tinta-suau); }
.deixa { border: 2px dashed #8C8578; padding: calc(16 * var(--u)); background: #FBF8F1; display: grid; gap: calc(8 * var(--u)); }
.llista-fitxers { margin: 0; padding-left: calc(18 * var(--u)); font-size: calc(14 * var(--t)); }
.camps-dos { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(14 * var(--u)); }
.casella { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.casella input { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); accent-color: var(--accent); }
.casella label { font-weight: 500; }
.formulari .boto { justify-self: stretch; text-align: center; font-size: calc(18 * var(--t)); }
.avis { margin: 0; font-weight: 600; min-height: 1.4em; }
.contacte-lateral { position: relative; padding-top: calc(150 * var(--u)); }
.contacte-lateral img { position: relative; width: 100%; }
.contacte-lateral .personatge { width: calc(200 * var(--u)); margin: calc(30 * var(--u)) 0 0 auto; }
.contacte-lateral .catalejo { width: calc(150 * var(--u)); margin: calc(-40 * var(--u)) 0 0 calc(20 * var(--u)); }
.escriu { border-top: 2px solid var(--linia); padding-top: calc(16 * var(--u)); margin-bottom: calc(34 * var(--u)); }
.escriu h2 { font-size: calc(34 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.escriu p { margin: 0 0 calc(4 * var(--u)); font-size: calc(16 * var(--t)); }

/* --- Privacidad --- */
.text-legal { max-width: calc(760 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.text-legal h2 { font-size: calc(30 * var(--u)); margin: calc(26 * var(--u)) 0 calc(8 * var(--u)); }
.text-legal h2::after { display: none; }
.text-legal p { font-size: calc(16 * var(--t)); line-height: 1.55; }
/* les dades del titular de l'avís legal anaven a 16 px fixos, i a la 4K quedaven a la meitat del paràgraf */
.text-legal li { font-size: calc(16 * var(--t)); line-height: 1.55; }

@media (max-width: 700px) {
  .titol-fila h1 { font-size: 50px; }
  .heroi-servei { height: auto; min-height: 0; padding: 0 0 20px; }
  .heroi-servei .foto { width: 100%; height: 280px; }
  .heroi-servei .text { position: static; width: auto; margin: -60px 16px 0; }
  .heroi-servei h1, .heroi-curt h1 { font-size: 52px; }
  .heroi-servei .personatge { display: none; }
  .inclou { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .inclou li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .seccio h2.corda::after { display: none; }
  .passos { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .passos li + li::before { display: none; }
  .relacionats, .graella-projectes { grid-template-columns: 1fr; }
  .crida-banda { grid-template-columns: 1fr; padding: 24px 16px; }
  .crida-banda .emblema { width: 100%; }
  .crida-banda .caixa { display: none; }
  .contacte-cos { grid-template-columns: 1fr; }
  .contacte-titol h1 { font-size: 58px; }
  .contacte-titol .resposta { position: static; display: inline-block; margin-top: 10px; }
  .camps-dos { grid-template-columns: 1fr; }
}

/* --- La versió 2 (30-10-2026, nit): els casos, la confiança, les bandes de la portada, el taller, els llocs i el blog --- */
.confien { margin: calc(22 * var(--u)) 0 calc(8 * var(--u)); }
.confien h2 { font-size: calc(16 * var(--t)); font-family: var(--text); font-variation-settings: normal; font-weight: 700; letter-spacing: 0;
  margin-bottom: calc(8 * var(--u)); }
.confien h2::after { display: none; }
.confien ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; row-gap: calc(8 * var(--u)); margin: 0; padding: 0;
  list-style: none; }
.confien li { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(26 * var(--u));
  line-height: 1; padding: 0 calc(18 * var(--u)); border-left: 2px solid var(--linia); }
.confien li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.banda-flota h2::after { right: 0; }

.casos { display: grid; gap: calc(22 * var(--u)) calc(14 * var(--u)); margin-top: calc(12 * var(--u)); }
.casos-tres { grid-template-columns: repeat(3, 1fr); }
.cas { margin: 0; position: relative; }
.cas a { text-decoration: none; display: block; }
.cas img { width: 100%; height: calc(210 * var(--u)); object-fit: cover; }
.cas a:hover img { filter: contrast(1.05) saturate(1.05); }
.cas a:focus-visible { outline: calc(3 * var(--u)) solid var(--accent); outline-offset: calc(3 * var(--u)); }
.cas figcaption { margin-top: calc(8 * var(--u)); }
.cas-titol { display: block; font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(22 * var(--u)); line-height: 1.05; }
.cas small { display: block; font-size: calc(13 * var(--t)); color: var(--tinta-suau); margin-top: calc(3 * var(--u)); }
.estat { position: absolute; top: calc(10 * var(--u)); left: calc(-6 * var(--u)); font-style: normal; font-weight: 700; font-size: calc(13 * var(--t)); padding: calc(3 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u));
  background: var(--newsprint); border: 1.5px solid var(--linia); transform: rotate(-3deg); }
.estat-hecho { background: var(--mustard); }
.mes { margin: calc(14 * var(--u)) 0 0; text-align: right; font-weight: 700; }
.mes a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: calc(4 * var(--u)); }
.nota-estat { font-size: calc(14 * var(--t)); color: var(--tinta-suau); margin: calc(18 * var(--u)) 0 0; }

.serveis ul.serveis-sis { grid-template-columns: repeat(6, 1fr); }

.banda-explosionat { margin-top: calc(26 * var(--u)); }
.banda-explosionat h2 { margin-bottom: calc(10 * var(--u)); }
.banda-explosionat img { width: 100%; max-width: calc(920 * var(--u)); margin: 0 auto; }
.pieza-fets { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none; counter-reset: pf; }
.pieza-fets li { counter-increment: pf; font-size: calc(16 * var(--t)); line-height: 1.4; border-top: 2px solid var(--linia); padding-top: calc(8 * var(--u)); }
.pieza-fets li::before { content: "0" counter(pf); display: block; font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144;
  font-weight: 900; font-size: calc(26 * var(--u)); color: var(--accent-text); }

.banda-flota { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(28 * var(--u)); align-items: center; margin-top: calc(30 * var(--u)); }
.banda-flota img { width: 100%; }
.banda-flota h2 { margin-bottom: calc(12 * var(--u)); }
.banda-flota p { font-size: calc(18 * var(--t)); margin: 0 0 calc(12 * var(--u)); }
.llocs { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(6 * var(--u)); }
.llocs a { font-weight: 700; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: calc(4 * var(--u)); }

.banda-sostenible { margin-top: calc(30 * var(--u)); }
.banda-sostenible ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); margin: calc(12 * var(--u)) 0 0; padding: 0; list-style: none; }
.banda-sostenible li { border-top: 2px solid var(--linia); padding-top: calc(10 * var(--u)); font-size: calc(16 * var(--t)); line-height: 1.4; }
.banda-sostenible strong { display: block; font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900;
  font-size: calc(24 * var(--u)); line-height: 1.05; margin-bottom: calc(4 * var(--u)); }

/* --- Les pàgines de cas --- */
.cas-cos { display: grid; grid-template-columns: calc(250 * var(--u)) 1fr; gap: calc(36 * var(--u)); margin-top: calc(34 * var(--u)); }
.cas-dades { margin: 0; display: grid; gap: calc(12 * var(--u)); }
.cas-dades div { border-top: 2px solid var(--linia); padding-top: calc(6 * var(--u)); }
.cas-dades dt { font-size: calc(13 * var(--t)); color: var(--tinta-suau); }
.cas-dades dd { margin: 2px 0 0; font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(22 * var(--u)); line-height: 1.05; }
.cas-fet { margin: calc(12 * var(--u)) 0 0; padding-left: calc(20 * var(--u)); font-size: calc(18 * var(--t)); line-height: 1.5; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)); margin-top: calc(30 * var(--u)); }
.galeria-1 { grid-template-columns: 1fr; }
.galeria-2, .galeria-4 { grid-template-columns: repeat(2, 1fr); }
.galeria-1 img, .galeria-2 img, .galeria-4 img { height: calc(360 * var(--u)); }
.cas-resum { font-size: calc(20 * var(--t)); line-height: 1.45; margin: 0 0 calc(18 * var(--u)); max-width: calc(640 * var(--u)); }
.galeria figure { margin: 0; }
.galeria img { width: 100%; height: calc(280 * var(--u)); object-fit: cover; background: #fff; }
.galeria figcaption { font-size: calc(14 * var(--t)); margin-top: calc(6 * var(--u)); color: var(--tinta-suau); }

/* --- Els textos amb fets: sostenibilitat, nosaltres i els llocs --- */
.fets { max-width: calc(780 * var(--u)); margin-top: calc(30 * var(--u)); }
.fets h2 { margin: calc(18 * var(--u)) 0 calc(10 * var(--u)); }
.fets p, .fets li { font-size: calc(18 * var(--t)); line-height: 1.5; }
.fets ul, .fets ol { padding-left: calc(22 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.clients-llista { list-style: none; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: calc(8 * var(--u)) 0; }
.clients-llista li { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(24 * var(--u));
  line-height: 1; padding: 0 calc(14 * var(--u)); border-left: 2px solid var(--linia); }
.clients-llista li:first-child { border-left: 0; padding-left: 0; }

/* --- El taller: quatre oficis --- */
.inclou-quatre { grid-template-columns: repeat(4, 1fr); }
.inclou-quatre a { text-decoration: none; display: block; }
.inclou-quatre a:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); }

/* --- El peu, amb els enllaços --- */
.peu { display: grid; grid-template-columns: 1fr auto; gap: calc(30 * var(--u)); align-items: start; }
.peu-enllacos { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(6 * var(--u)); font-size: calc(14 * var(--t)); }

/* --- Gràcies i el blog --- */
.gracies { max-width: calc(760 * var(--u)); padding-top: calc(40 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.gracies h1 { font-size: calc(96 * var(--u)); }
.gracies img { width: 100%; max-width: calc(520 * var(--u)); margin: calc(20 * var(--u)) 0; }
.entradeta-gran { font-size: calc(20 * var(--t)); line-height: 1.45; max-width: calc(640 * var(--u)); }
.blog-llista { list-style: none; padding: 0; display: grid; gap: calc(22 * var(--u)); }
.blog-llista a { text-decoration: none; display: block; border-top: 2px solid var(--linia); padding-top: calc(10 * var(--u)); }
.blog-llista h2 { font-size: calc(32 * var(--u)); }
.article { max-width: calc(760 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.article h1 { font-size: calc(64 * var(--u)); margin: calc(18 * var(--u)) 0 calc(10 * var(--u)); }
.molles ol { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin: calc(22 * var(--u)) 0 0; padding: 0; list-style: none; font-size: calc(14 * var(--t)); }
.molles li + li::before { content: "/"; margin-right: calc(8 * var(--u)); color: var(--tinta-suau); }
.article-meta { font-size: calc(14 * var(--t)); color: var(--tinta-suau); }
.bibliografia { border-top: 2px solid var(--linia); margin-top: calc(30 * var(--u)); padding-top: calc(10 * var(--u)); font-size: calc(15 * var(--t)); }

@media (max-width: 700px) {
  .galeria, .galeria-2, .galeria-4 { grid-template-columns: 1fr; }
  .galeria img { height: 240px !important; }
  .confien ul { grid-template-columns: repeat(2, auto); }
  .confien li { font-size: 21px; padding: 0 10px; }
  .confien li:nth-child(3n+1) { border-left: 2px solid var(--linia); padding-left: 10px; }
  .confien li:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .casos-tres, .pieza-fets, .banda-sostenible ul, .inclou-quatre { grid-template-columns: 1fr; }
  .serveis ul.serveis-sis { grid-template-columns: repeat(2, 1fr); }
  .banda-flota, .cas-cos, .peu { grid-template-columns: 1fr; }
  .gracies h1 { font-size: 60px; }
  .article h1 { font-size: 44px; }
}
.pieza-parell { display: grid; grid-template-columns: 3fr 2fr; gap: calc(20 * var(--u)); align-items: center; }
.pieza-parell img { width: 100%; }
.pieza-parell figure { margin: 0; }
.pieza-parell figure img { height: calc(300 * var(--u)); object-fit: cover; }
.pieza-parell figcaption { font-size: calc(14 * var(--t)); color: var(--tinta-suau); margin-top: calc(6 * var(--u)); }
@media (max-width: 700px) { .pieza-parell { grid-template-columns: 1fr; } .pieza-parell figure img { height: 220px; } }

/* --- Versió 3 (30-10-2026, nit): les pàgines de dins respiren i tenen el mateix paper que la portada. L'Albert: «la web
   no respira». Es calquen de la referència d'Estands (../../referencies/circ-v3-estands.png): capçal de 475 d'alt amb la
   foto de x 230 a la vora, el títol a sobre i l'etiqueta vermella, i res de text a sobre de la foto. --- */
.heroi-servei { min-height: calc(475 * var(--u)); padding: calc(70 * var(--u)) 0 calc(40 * var(--u)) calc(46 * var(--u)); }
.heroi-servei .foto { left: calc(230 * var(--u)); width: calc(100% - calc(230 * var(--u))); }
.heroi-servei .text { width: calc(420 * var(--u)); }
.heroi-servei h1 { font-size: calc(80 * var(--u)); line-height: 0.92; }
.heroi-servei .entradeta { display: none; }
.intro { position: relative; z-index: 1; max-width: calc(720 * var(--u)); font-size: calc(21 * var(--t)); line-height: 1.5;
  margin: calc(34 * var(--u)) 0 calc(30 * var(--u)); }
main > .seccio + .seccio, main > .heroi-servei + .seccio { margin-top: calc(46 * var(--u)); }
main > .seccio > h2 { margin-bottom: calc(18 * var(--u)); }
.crida-banda { margin-top: calc(56 * var(--u)); }
/* les fotos amb la vora esquinçada, com a la portada */
.relacionats img, .cas img, .galeria img, .graella-projectes img {
  -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; }
.cas img { height: calc(230 * var(--u)); }
.galeria img { height: calc(360 * var(--u)); }
@media (max-width: 700px) {
  .heroi-servei { min-height: 0; padding: 0 0 20px; }
  /* la regla d'escriptori de sobre (x 230) guanyava al mòbil i la foto quedava de 160 px d'ample */
  .heroi-servei .foto { width: 100%; }
  .heroi-servei .text { width: auto; }
  .heroi-servei h1 { font-size: 50px; }
  .intro { font-size: 18px; margin-top: 24px; }
  main > .seccio + .seccio, main > .heroi-servei + .seccio { margin-top: 36px; }
  .cas img, .galeria img { height: 230px; }
}

/* la casella del projecte que ve: paper vermell esquinçat amb la pregunta */
.cas-teu-fons { height: calc(230 * var(--u)); display: flex; align-items: center; justify-content: center; background: var(--accent);
  -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; }
.cas-teu-fons span { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; color: #fff;
  font-size: calc(40 * var(--u)); line-height: 1; text-align: center; padding: 0 calc(20 * var(--u)); }
.cas-teu a:hover .cas-teu-fons { background: #B8231A; }
@media (max-width: 700px) { .cas-teu-fons { height: 200px; } .cas-teu-fons span { font-size: 34px; } }

/* --- Versió 3 amb el copy de SR. LOBO (30-10-2026, nit): les peces noves --- */
.crida-linia { display: flex; align-items: center; gap: calc(14 * var(--u)); flex-wrap: wrap; margin-top: calc(14 * var(--u)); }
.crida-linia .resposta { background: none; padding: 0; }
.entrada { margin-top: calc(30 * var(--u)); }
.intro-cas { margin: 0 0 calc(18 * var(--u)); font-size: calc(21 * var(--t)); }
.nota-imatge { position: absolute; right: calc(16 * var(--u)); bottom: calc(14 * var(--u)); z-index: 3; margin: 0; font-size: calc(13 * var(--t));
  background: var(--newsprint); padding: calc(3 * var(--u)) calc(8 * var(--u)); }
.estat-altre { background: var(--newsprint); }
.casos-dos { grid-template-columns: repeat(2, 1fr); }
.cas-paper { height: calc(230 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(8 * var(--u)); background: var(--sky); color: var(--ink);
  -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; }
.cas-paper span { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(46 * var(--u)); line-height: 1; }
.cas-paper small { font-weight: 700; font-size: calc(15 * var(--t)); }
.p-graella .cas-paper { height: calc(175 * var(--u)); }
.heroi-paper { min-height: calc(440 * var(--u)); }
.paper-gran { position: absolute; left: calc(236 * var(--u)); right: 0; top: 0; bottom: calc(10 * var(--u)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(12 * var(--u)); background: var(--sky); padding-left: calc(200 * var(--u));
  -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; }
.paper-gran span { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(96 * var(--u)); line-height: 1; }
.paper-gran small { font-weight: 700; font-size: calc(18 * var(--t)); max-width: 30ch; text-align: center; }
.inclou-4 { grid-template-columns: repeat(4, 1fr); }
.inclou-5 { grid-template-columns: repeat(5, 1fr); }
.inclou-6 { grid-template-columns: repeat(6, 1fr); }
.inclou h3 { font-size: calc(20 * var(--u)); }
.blocs { display: grid; gap: calc(44 * var(--u)); margin-top: calc(40 * var(--u)); }
.bloc { display: grid; grid-template-columns: 560fr 392fr; gap: calc(34 * var(--u)); align-items: center; }
.bloc-dreta { grid-template-columns: 392fr 560fr; }
.bloc-dreta figure { order: 2; }
.bloc figure { margin: 0; }
.bloc img { width: 100%; height: calc(330 * 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; }
.bloc img[src$=".webp"] { object-fit: contain; -webkit-mask: none; mask: none; }
.bloc figcaption { font-size: calc(13 * var(--t)); color: var(--tinta-suau); margin-top: calc(6 * var(--u)); }
.bloc h2 { font-size: calc(56 * var(--u)); margin: 0 0 calc(12 * var(--u)); }
.bloc h2::after { display: none; }
.bloc p { font-size: calc(19 * var(--t)); line-height: 1.5; margin: 0; max-width: 34ch; }
.llista-fets { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(10 * var(--u)); }
.llista-fets li { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(28 * var(--u));
  line-height: 1.1; padding-left: calc(30 * var(--u)); position: relative; }
.llista-fets li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: calc(16 * var(--u)); height: calc(8 * var(--u));
  background: var(--accent); transform: rotate(-4deg); }
.faq { display: grid; gap: 0; max-width: calc(780 * var(--u)); }
.faq details { border-top: 2px solid var(--linia); padding: calc(14 * var(--u)) 0; }
.faq details:last-child { border-bottom: 2px solid var(--linia); }
.faq summary { cursor: pointer; font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900;
  font-size: calc(26 * var(--u)); line-height: 1.1; list-style: none; position: relative; padding-right: calc(34 * var(--u)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--accent-text); }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.faq p { margin: calc(10 * var(--u)) 0 0; font-size: calc(18 * var(--t)); line-height: 1.5; max-width: 60ch; }
.explosionat { margin: 0; }
.explosionat img { width: 100%; max-width: calc(900 * var(--u)); margin: 0 auto; }
.adreca { margin: calc(40 * var(--u)) 0 0; font-weight: 700; font-size: calc(18 * var(--t)); }
.lateral-dades { margin: calc(10 * var(--u)) 0 0; font-weight: 600; font-size: calc(16 * var(--t)); }
.camps-tres { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: calc(14 * var(--u)); align-items: end; }
.amagat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
  .crida-linia { gap: 10px; margin-top: 14px; }
  .intro-cas { font-size: 18px; }
  .nota-imatge { position: static; display: block; font-size: 13px; padding: 4px 16px 0; background: none; }
  .casos-dos { grid-template-columns: 1fr; }
  .cas-paper, .p-graella .cas-paper { height: 200px; }
  .cas-paper span { font-size: 38px; }
  .heroi-paper { min-height: 0; padding-top: 10px; }
  .paper-gran { position: static; padding: 40px 16px; margin-bottom: 18px; -webkit-mask: none; mask: none; }
  .paper-gran span { font-size: 54px; }
  .inclou-4, .inclou-5, .inclou-6 { grid-template-columns: repeat(2, 1fr); }
  .inclou h3 { font-size: 19px; }
  .blocs { gap: 34px; margin-top: 28px; }
  .bloc, .bloc-dreta { grid-template-columns: 1fr; gap: 14px; }
  .bloc-dreta figure { order: 0; }
  .bloc img { height: 230px; }
  .bloc h2 { font-size: 40px; }
  .bloc p { font-size: 17px; }
  .llista-fets li { font-size: 23px; padding-left: 26px; }
  .llista-fets li::before { width: 14px; height: 7px; }
  .faq summary { font-size: 22px; padding-right: 28px; }
  .faq p { font-size: 16px; }
  .adreca { font-size: 16px; margin-top: 28px; }
  .camps-tres { grid-template-columns: 1fr; }
}

/* el text del paper blau del cas en producció, en tinta: el gris no passa AA sobre el blau */
.cas-paper small, .paper-gran small { color: var(--ink); }

.nota-peu { font-size: 12px; color: var(--tinta-suau); margin-top: 10px; }

/* El camp esquer del formulari (SR. LOBO [dig-2638]): fora de la vista i no amb type=hidden, perquè un robot el vegi
   com un camp de debò i l'ompli. */
.camp-esquer { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- Versió 4 (31-10-2026): el capçal de les pàgines de dins, com el de la portada. L'Albert: «t'havia demanat full width
   i que no hi hagués container ni marges». La foto va de vora a vora sota la tira de paper, i el títol, en blanc a baix a
   l'esquerra. Només a les pàgines que tenen foto al capçal: el cas de CONAMA, sense foto, es queda com era. --- */
@media (min-width: 701px) {
  .pagina:has(.heroi-servei > .foto) .capcal { position: relative; 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; }
  .heroi-servei:has(> .foto) { display: flex; align-items: flex-end; height: 86vh; height: 86svh; min-height: calc(540 * var(--u));
    padding: 0; }
  .heroi-servei > .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: none; mask: none; }
  .heroi-servei:has(> .foto)::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(14, 12, 10, 0.7) 0%, rgba(14, 12, 10, 0.3) 36%, rgba(14, 12, 10, 0) 60%),
                linear-gradient(to right, rgba(14, 12, 10, 0.36) 0%, rgba(14, 12, 10, 0) 50%); }
  .heroi-servei:has(> .foto) .text { position: relative; z-index: 3; width: auto; max-width: calc(780 * var(--u));
    margin: 0 0 calc(64 * var(--u)) calc(46 * var(--u)); }
  .heroi-servei:has(> .foto) h1, .heroi-servei.heroi-cas:has(> .foto) h1 { font-size: calc(96 * var(--u)); line-height: 0.92; color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.28); }
  .heroi-servei:has(> .foto) h1 span { background: none; padding: 0; margin: 0; }
  .heroi-servei:has(> .foto) .etiqueta { margin-top: calc(18 * var(--u)); }
  .heroi-servei:has(> .foto) .personatge { z-index: 3; top: auto; right: calc(46 * var(--u)); bottom: calc(-14 * var(--u)); width: calc(176 * var(--u)); }
  .heroi-servei:has(> .foto) .nota-imatge { z-index: 3; color: rgba(255, 255, 255, 0.88); background: none; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
}

/* --- Versió 4 (31-10-2026): les pàgines de dins, amb l'aire de la portada. Sense filets entre columnes, amb més espai
   entre caselles, i el projecte en producció en vermell, com al mosaic de la portada. --- */
.inclou { gap: calc(34 * var(--u)) calc(30 * var(--u)); margin-top: calc(26 * var(--u)); }
.inclou li, .inclou li:first-child { border-left: 0; padding: 0; }
.inclou div { height: calc(130 * var(--u)); justify-content: flex-start; }
.inclou img { max-height: calc(124 * var(--u)); }
.inclou h3 { font-size: calc(24 * var(--u)); margin-top: calc(14 * var(--u)); }
.inclou p { font-size: calc(15 * var(--t)); }
.cas-paper, .paper-gran { background: var(--accent); color: #fff; }
.cas-paper small, .paper-gran small { color: #fff; }
main > .seccio + .seccio, main > .heroi-servei + .seccio { margin-top: calc(96 * var(--u)); }
@media (max-width: 700px) {
  .inclou { gap: 26px 18px; }
  .inclou li:nth-child(odd) { padding-left: 0; }
  main > .seccio + .seccio, main > .heroi-servei + .seccio { margin-top: 56px; }
}

/* Les caselles dels casos (la pàgina de Proyectos, els projectes de Stands i els relacionats), com el mosaic de la
   portada: la foto més alta, el nom en un tros de paper a sobre i l'estat en una etiqueta del seu color. La graella va
   de vora a vora amb un filet de sis. */
.casos, .graella-projectes { gap: calc(6 * var(--u)); margin-left: calc(-46 * var(--u)); margin-right: calc(-46 * var(--u)); }
.cas { overflow: hidden; background: #1c1a17; }
.cas a { position: relative; height: 100%; }
.cas img, .graella-projectes img { height: calc(330 * var(--u)); -webkit-mask: none; mask: none; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cas a:hover img { transform: scale(1.045); filter: none; }
.cas figcaption { position: absolute; left: calc(14 * var(--u)); bottom: calc(38 * var(--u)); z-index: 2; max-width: calc(100% - 46 * var(--u));
  margin: 0; padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); isolation: isolate; }
.cas figcaption::before { content: ""; position: absolute; inset: 0; z-index: -1; 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; }
.cas figcaption small, .graella-projectes small { display: none; }
.cas .cas-titol { font-size: calc(26 * var(--u)); color: var(--tinta); }
.cas .estat { top: auto; left: auto; right: calc(-14 * var(--u)); bottom: calc(-30 * var(--u)); z-index: 3; padding: calc(4 * var(--u)) calc(12 * var(--u));
  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); white-space: nowrap; }
.cas .estat.es-hecho { background: var(--accent); color: #fff; }
.cas .estat.es-prototipo { background: var(--sky); }
.cas .estat.es-en-produccion { background: var(--fons); }
.cas .cas-paper { height: calc(330 * var(--u)); -webkit-mask: none; mask: none; }
@media (max-width: 700px) {
  .casos, .graella-projectes { margin-left: -16px; margin-right: -16px; gap: 4px; }
  .cas img, .graella-projectes img, .cas .cas-paper { height: 64vw; }
  .cas figcaption { left: 8px; bottom: 30px; padding: 6px 10px 8px; }
  .cas .cas-titol { font-size: 22px; }
  .cas .estat { font-size: 15px; right: -10px; bottom: -24px; }
}
/* la graella de Proyectos, plena: el Butterfly Garden i «¿El tuyo, el próximo?» ocupen dues columnes */
.casos-tres > .cas:first-child, .casos-tres > [data-mena="todos"] { grid-column: span 2; }
@media (max-width: 700px) { .casos-tres > .cas:first-child, .casos-tres > [data-mena="todos"] { grid-column: auto; } }
/* «¿El tuyo, el próximo?»: el vermell omple la casella sencera, com les altres fotos */
.cas-teu a { background: var(--accent); }
.cas .cas-teu-fons { height: calc(330 * var(--u)); }
@media (max-width: 700px) { .cas .cas-teu-fons { height: 64vw; } }

/* La passada al Chrome de l'Albert (31-10-2026): els títols que no porten pinzell no li reserven lloc, i l'etiqueta
   legal de la foto del capçal va sobre un fons fosc, com a la portada */
.bloc h2, .text-legal h2, .confien h2 { padding-bottom: 0; }
@media (min-width: 701px) {
  .heroi-servei:has(> .foto) .nota-imatge { padding: 3px 8px; background: rgba(14, 12, 10, 0.6); text-shadow: none; }
}

/* --- 01-11-2026: els clients de Nosotros, amb els logos --- */
.logos-clients { display: flex; flex-wrap: wrap; align-items: center; gap: calc(30 * var(--u)) calc(56 * var(--u)); margin: calc(26 * var(--u)) 0 0; padding: 0; list-style: none; }
.logos-clients img { height: calc(54 * var(--u)); width: auto; max-width: calc(240 * var(--u)); object-fit: contain; filter: grayscale(1) contrast(1.2);
  mix-blend-mode: multiply; opacity: 0.88; }
.logos-clients .es-escut img { height: calc(78 * var(--u)); }
@media (max-width: 700px) {
  .logos-clients { gap: 22px 34px; }
  .logos-clients img { height: 38px; max-width: 160px; }
  .logos-clients .es-escut img { height: 54px; }
}

/* --- 01-11-2026: la carta de materials. Cada material porta la seva mostra com un tros de paper estripat, una mica
   girat, i al costat què és, la classe de foc i les fitxes per baixar. --- */
.mat-llista { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(46 * var(--u)) calc(56 * var(--u)); margin-top: calc(30 * var(--u)); }
.mat { display: grid; grid-template-columns: calc(170 * var(--u)) 1fr; gap: calc(26 * var(--u)); align-items: start; }
.mat-mostres { position: relative; height: calc(170 * var(--u)); }
.mat-mostra { position: absolute; top: 0; left: 0; width: calc(150 * var(--u)); height: calc(150 * 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;
  transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); }
.mat-mostra:nth-child(2) { top: calc(16 * var(--u)); left: calc(18 * var(--u)); transform: rotate(4deg); }
.mat-mostra:nth-child(3) { top: calc(30 * var(--u)); left: calc(8 * var(--u)); transform: rotate(-7deg); }
.mat-chip { display: grid; place-items: center; width: calc(150 * var(--u)); height: calc(150 * var(--u)); transform: rotate(-3deg);
  background: var(--ink); color: var(--fons); font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900;
  font-size: calc(36 * var(--u)); -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; }
.mat-text h3 { font-size: calc(28 * var(--u)); margin: 0 0 calc(8 * var(--u)); }
.mat-text p { margin: 0 0 calc(10 * var(--u)); font-size: calc(16 * var(--t)); max-width: 46ch; }
.mat-dades { margin: 0 0 calc(10 * var(--u)); display: grid; gap: calc(4 * var(--u)); font-size: calc(15 * var(--t)); }
.mat-dades div { display: grid; grid-template-columns: 1fr; gap: 0; }
.mat-dades dt { font-weight: 700; font-size: 0.86em; }
.mat-dades dd { margin: 0; }
.mat-norma { color: var(--tinta-suau); }
.mat-fet { font-size: calc(15 * var(--t)); color: var(--tinta-suau); }
.mat-fitxes { margin: calc(8 * var(--u)) 0 0; padding: 0; list-style: none; font-size: calc(15 * var(--t)); display: grid; gap: calc(6 * var(--u)); }
.mat-fitxes a { font-weight: 600; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.mat-fitxes small, .mat-general small { color: var(--tinta-suau); }
.mat-general { margin-top: calc(20 * var(--u)); display: flex; align-items: center; gap: calc(16 * var(--u)); flex-wrap: wrap; }
/* la moqueta ocupa tota l'amplada: 33 colors en mostres petites, amb el nom a sota */
.mat-llista > .mat:has(.mat-moquetes) { grid-column: 1 / -1; grid-template-columns: 1fr; }
.mat-moquetes { display: grid; grid-template-columns: repeat(11, 1fr); gap: calc(12 * var(--u)) calc(10 * var(--u)); margin: 0; padding: 0; list-style: none; }
.mat-moquetes li { font-size: calc(12 * var(--t)); line-height: 1.2; }
.mat-moquetes img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: calc(4 * var(--u));
  -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; }
.mat-moquetes li:nth-child(3n) img { transform: rotate(2deg); }
.mat-moquetes li:nth-child(3n + 1) img { transform: rotate(-2deg); }
.mat-grup + .mat-grup { margin-top: calc(96 * var(--u)); }

/* --- Les zones: cada recinte, amb les seves normes, d'on surten i les seves fires --- */
.recintes { display: grid; gap: calc(40 * var(--u)); margin-top: calc(26 * var(--u)); }
.recinte { padding: calc(26 * var(--u)) calc(30 * var(--u)); background: var(--superficie);
  -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; }
.recinte h3 { font-size: calc(32 * var(--u)); margin: 0 0 calc(16 * var(--u)); }
.recinte h3 small { font-family: var(--text); font-variation-settings: normal; font-weight: 600; font-size: calc(15 * var(--t)); color: var(--tinta-suau); margin-left: calc(8 * var(--u)); }
.recinte h4 { font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(22 * var(--u)); margin: calc(20 * var(--u)) 0 calc(8 * var(--u)); }
.rec-normes { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(8 * var(--u)) calc(30 * var(--u)); font-size: calc(15 * var(--t)); }
.rec-normes div { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(10 * var(--u)); padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid rgba(17, 17, 17, 0.18); }
.rec-normes dt { font-weight: 700; }
.rec-normes dd { margin: 0; }
.rec-normes small, .rec-fires small { color: var(--tinta-suau); }
.rec-manual { margin: calc(12 * var(--u)) 0 0; font-size: calc(14 * var(--t)); color: var(--tinta-suau); }
.rec-sense { margin: 0; font-size: calc(15 * var(--t)); }
.rec-fires { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)) calc(24 * var(--u)); font-size: calc(15 * var(--t)); }
.rec-fires span { color: var(--tinta-suau); }
.complim { margin: calc(20 * var(--u)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(12 * var(--u)); font-size: calc(17 * var(--t)); max-width: 70ch; }
.text-curt { max-width: 64ch; font-size: calc(17 * var(--t)); margin: calc(16 * var(--u)) 0 0; }

/* --- La taula de normes (Stands, Sostenibilidad): llisca de costat al mòbil --- */
.taula-normes { margin-top: calc(24 * var(--u)); overflow-x: auto; }
.taula-normes:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.taula-normes table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: calc(15 * var(--t)); }
.taula-normes th, .taula-normes td { text-align: left; vertical-align: top; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-bottom: 1.5px solid var(--linia); }
.taula-normes thead th { font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(19 * var(--u)); }
.taula-normes tbody th { font-weight: 700; }
.taula-normes small { display: block; color: var(--tinta-suau); font-size: 0.86em; margin-top: 2px; }

@media (max-width: 700px) {
  .mat-llista { grid-template-columns: 1fr; gap: 38px; }
  .mat { grid-template-columns: 112px 1fr; gap: 16px; }
  .mat-mostres { height: 124px; }
  .mat-mostra, .mat-chip { width: 100px; height: 100px; }
  .mat-chip { font-size: 26px; }
  .mat-text h3 { font-size: 24px; }
  .mat-dades div { grid-template-columns: 1fr; gap: 0; }
  .mat-moquetes { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
  .mat-grup + .mat-grup { margin-top: 56px; }
  .recinte { padding: 20px 18px; }
  .recinte h3 { font-size: 26px; }
  .rec-normes, .rec-fires { grid-template-columns: 1fr; }
  .rec-normes div { grid-template-columns: 1fr; gap: 2px; }
}

/* la casella «el teu» de les zones ocupa una sola columna */
.casos-tres > .cas-teu-1 { grid-column: auto; }

/* --- 01-11-2026: la casella dels moodboards, amb la mostra del que es rebrà al costat: una peça de paper una mica
   girada, amb tres dissenys segellats com en un tauler de taller --- */
/* la columna del formulari és estreta: la mostra va just a sota de la casella, enganxada com un retall */
.moodboards { display: grid; grid-template-columns: 1fr; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); }
.moodboards-mostra { max-width: calc(440 * var(--u)); margin-left: calc(30 * var(--u)); }
.moodboards-mostra { padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); background: var(--superficie) url("../img/paper.jpg") center / 400px auto;
  transform: rotate(1.2deg); -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; }
.mm-titol { margin: 0 0 calc(10 * var(--u)); font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(24 * var(--u)); }
.mm-peces { display: grid; grid-template-columns: 1.35fr 1fr; gap: calc(8 * var(--u)); }
.mm-peces figure { position: relative; margin: 0; overflow: hidden; background: #fff; }
.mm-peces img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mm-peces .mm-gran { grid-row: span 2; }
.mm-peces .mm-gran img { aspect-ratio: auto; }
.mm-segell { position: absolute; right: calc(6 * var(--u)); bottom: calc(6 * var(--u)); padding: 1px calc(7 * var(--u)) 2px; border: 2px solid currentColor;
  background: rgba(246, 241, 230, 0.9); font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900;
  font-size: calc(13 * var(--u)); line-height: 1.2; transform: rotate(-8deg); }
.mm-segell.es-acceptat { color: var(--accent-text); }
.mm-segell.es-descartat { color: #22609A; }
.mm-colors { display: flex; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
.mm-colors i { display: block; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: var(--ink); }
.mm-colors i:nth-child(2) { background: var(--pillar-box); }
.mm-colors i:nth-child(3) { background: var(--sky); }
.mm-colors i:nth-child(4) { background: var(--mustard); }
.mm-text { margin: calc(10 * var(--u)) 0 0; font-size: calc(14 * var(--t)); line-height: 1.4; color: var(--tinta-suau); }
@media (max-width: 700px) {
  .moodboards { grid-template-columns: 1fr; gap: 14px; }
  .moodboards-mostra { transform: none; padding: 14px; }
  .mm-titol { font-size: 22px; }
  .mm-segell { font-size: 13px; }
  .mm-colors i { width: 18px; height: 18px; }
}

/* les llistes de fets llargs (Sostenibilidad): en lletra de text, amb el guió vermell */
.llista-text { margin: calc(18 * var(--u)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(12 * var(--u)); max-width: 70ch; font-size: calc(17 * var(--t)); }
.llista-text li { position: relative; padding-left: calc(26 * var(--u)); }
.llista-text li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: calc(14 * var(--u)); height: 3px; background: var(--accent); }
@media (max-width: 700px) { .moodboards-mostra { margin-left: 0; } .llista-text { font-size: 16px; } .llista-text li { padding-left: 22px; } .llista-text li::before { width: 12px; } }

/* el capçal a sobre de la foto, amb la tira de paper estripat, només a partir de 1.024 px (vegeu estil.css) */
@media (min-width: 1024px) {
  .pagina:has(.heroi-servei > .foto) .capcal { position: absolute; top: 0; left: 0; right: 0; height: var(--capcal-h); }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .pagina:has(.heroi-servei > .foto) .capcal { height: auto; background: none; -webkit-mask: none; mask: none; }
}

/* Stands, «Cómo lo hacemos»: el títol de cada pas és un h3 dins de la secció (pagines_v3.passos) */
.bloc h3 { font-size: calc(40 * var(--u)); margin: 0 0 calc(10 * var(--u)); }
@media (max-width: 700px) { .bloc h3 { font-size: 30px; } }
/* Materiales, els destacats de dalt: quatre targetes que porten a la fitxa de cada material */
.mat-dest-llista { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); margin-top: calc(28 * var(--u)); }
.mat-dest { display: grid; align-content: start; gap: calc(8 * var(--u)); color: inherit; text-decoration: none; }
.mat-dest-mostra { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  clip-path: polygon(0 2%, 6% 0, 40% 2%, 72% 0, 100% 3%, 98% 40%, 100% 97%, 60% 100%, 28% 98%, 2% 100%, 0 60%); }
.mat-dest .mat-mostres { min-height: 0; }
.mat-dest-nom { font-weight: 700; font-size: calc(19 * var(--t)); line-height: 1.25; }
.mat-dest-foc { font-size: calc(14 * var(--t)); color: var(--tinta-suau); }
.mat-dest:hover .mat-dest-nom, .mat-dest:focus-visible .mat-dest-nom { text-decoration: underline; }
@media (max-width: 700px) { .mat-dest-llista { grid-template-columns: repeat(2, 1fr); } }

/* Els projectes en detall (eines/projectes_detall.py): el plànol amb els espais, les peces i els plànols amb mides.
   Sense JavaScript, els espais es veuen tots i els números del plànol no surten (js/espais.js posa .esp-viu). */
.esp { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(36 * var(--u)); align-items: start; margin-top: calc(30 * var(--u)); }
.esp-pla { position: relative; margin: 0; }
.esp-pla img { width: 100%; height: auto; display: block; }
.esp-punt { display: none; }
.esp-viu .esp-punt { display: grid; place-items: center; position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px;
  border-radius: 50%; border: 2px solid #fff; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); padding: 0; }
.esp-viu .esp-punt[aria-pressed="true"] { background: var(--tinta); transform: translate(-50%, -50%) scale(1.15); }
.esp-punt:focus-visible, .esp-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.esp-tabs { display: none; }
.esp-viu .esp-tabs { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: calc(16 * var(--u)); }
.esp-tab { font: inherit; font-size: calc(15 * var(--t)); background: none; border: 1.5px solid var(--linia); padding: 6px 10px;
  cursor: pointer; color: var(--tinta); border-radius: 2px; }
.esp-tab span { font-weight: 700; margin-right: 4px; }
.esp-tab[aria-pressed="true"] { background: var(--tinta); color: var(--fons); border-color: var(--tinta); }
.esp-panell figure { margin: 0 0 calc(14 * var(--u)); }
.esp-panell img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.esp-panell h3 { font-size: calc(32 * var(--u)); margin: 0; }
.esp-mida { margin: 4px 0 10px; font-weight: 700; color: var(--tinta-suau); }
.esp-panell p { max-width: 52ch; }
.esp-peces { margin: 10px 0 0; padding-left: 1.1em; }
.esp-panell + .esp-panell { margin-top: calc(40 * var(--u)); }
.esp-viu .esp-panell + .esp-panell { margin-top: 0; }
.elem-llista { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28 * var(--u)); margin-top: calc(28 * var(--u)); }
.elem figure { margin: 0 0 12px; }
.elem img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.elem h3 { font-size: calc(24 * var(--u)); margin: 0; }
.elem-mida { margin: 4px 0 6px; font-weight: 700; color: var(--tinta-suau); font-size: calc(14 * var(--t)); }
.elem p { margin: 0; font-size: calc(16 * var(--t)); }
.plans-llista { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(28 * var(--u)); margin-top: calc(28 * var(--u)); }
.plans-llista figure { margin: 0; background: #fff; padding: 12px; }
.plans-llista img { width: 100%; height: auto; display: block; }
.plans-llista figcaption { font-size: calc(14 * var(--t)); color: var(--tinta-suau); margin-top: 8px; }
@media (max-width: 900px) { .esp { grid-template-columns: 1fr; } .elem-llista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .elem-llista, .plans-llista { grid-template-columns: 1fr; } .esp-viu .esp-punt { width: 28px; height: 28px; font-size: 13px; } }

/* Un plànol molt allargat (el Papiol): a tota l'amplada, i l'espai triat a sota, amb la imatge i el text de costat */
.esp-ample { grid-template-columns: 1fr; }
.esp-ample .esp-panell { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 calc(30 * var(--u)); align-items: start; }
.esp-ample .esp-panell figure { grid-row: 1 / span 4; margin: 0; }
.elem-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .esp-ample .esp-panell { grid-template-columns: 1fr; } .esp-ample .esp-panell figure { grid-row: auto; margin-bottom: 12px; } }
/* un espai amagat s'amaga encara que la seva regla li posi display: grid (sense això, a .esp-ample sortien tots) */
.esp .esp-panell[hidden] { display: none; }

/* l'Albert, 01-11-2026: «em surt molt gran la lletra». Els títols i els textos dels projectes en detall, més petits */
.esp-panell h3 { font-size: calc(24 * var(--u)); }
.esp-panell p, .elem p { font-size: calc(15 * var(--t)); }
.elem h3 { font-size: calc(20 * var(--u)); }
.esp-tab { font-size: calc(14 * var(--t)); padding: 5px 9px; }
.esp-ample .esp-panell { grid-template-columns: minmax(0, 340px) 1fr; }
/* un àmbit sense imatge: el títol i la línia, un sota l'altre */
.esp-ample .esp-panell.sense-imatge:not([hidden]) { display: block; }