/* MONTY ON THE BOUNTY: la web. Els colors i les lletres surten de tokens.css (còpia de ../../marca/tokens.css).
   La referència que mana és la portada del circ v3, amb BOUNTY i els canvis de l'Albert del 30-10-2026
   (../../referencies/circ-v3-portada.png), feta a 1024 px d'ample. Les mides de la portada surten de mesurar-la
   amb les sondes de referencia-visual §7.7; on una mida és de la referència, el comentari diu d'on. */

@font-face {
  font-family: "Roboto Serif";
  src: url("../fonts/titols.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/text.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
/* el paper va a l'arrel i no al body: en una pàgina curta (el blog) el body s'acabava a mitja pantalla i a sota hi
   sortia el color pla */
html { background: var(--fons) url("../img/paper.jpg") repeat; }
body {
  margin: 0;
  color: var(--tinta);
  background: none;
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* A tota pantalla: la pàgina és la referència del circ (1.024 px d'ample) escalada a l'amplada de la finestra.
   --u és un píxel de la referència; --t, el de la lletra petita. Al mòbil valen 1px.
   En una finestra més apaïsada que la referència, --u s'escala amb l'alçada: 570 de la referència omplen la pantalla.
   A la 4K de l'Albert (3.206 × 1.334) el capçal feia 1.745 px d'alt i el botó i les fletxes quedaven sota la vora.
   --t no passa d'1,3 fins que --u passa d'1,8; després creix fins a 1,75, perquè la lletra petita no quedi perduda. */
.pagina { position: relative; overflow-x: clip; container-type: inline-size; --u: 1px; --t: 1px; }
@media (min-width: 701px) {
  .pagina { --u: min(calc(100cqw / 1024), calc(100svh / 570));
    --t: max(0.9px, min(var(--u), 1.3px), min(calc(var(--u) * 0.72), 1.75px)); }
}
.filtres { position: absolute; width: 0; height: 0; }

/* Els títols: lletra de fusta condensada, amb la tinta de la impremta */
.titol, h1, h2, h3 {
  font-family: var(--titols);
  font-weight: 900;
  font-variation-settings: "wdth" 50, "opsz" 144;
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.01em;
}
.tinta { filter: url(#tinta); }

/* --- El capçal: el logo penja per sota de la franja del menú (referència: logo 45-257 x 8-150, menú a y 44) --- */
.capcal { position: relative; z-index: 4; height: calc(85 * var(--u)); }
.capcal .logo { position: absolute; left: calc(45 * var(--u)); top: calc(8 * var(--u)); width: calc(212 * var(--u)); }
.capcal .logo img { width: 100%; }
.menu { position: absolute; left: calc(326 * var(--u)); top: calc(33 * var(--u)); display: flex; margin: 0; padding: 0; list-style: none; }
.menu a { display: block; padding: calc(6 * var(--u)) calc(12 * var(--u)); font-size: calc(15 * var(--t)); font-weight: 600; text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: calc(3 * var(--u)); text-underline-offset: calc(7 * var(--u)); }
.menu a[aria-current="page"] { color: var(--accent-text); }
.menu a:focus-visible { outline: calc(3 * var(--u)) solid var(--accent); outline-offset: 2px; }
.gavina { position: absolute; right: calc(8 * var(--u)); top: 2px; width: calc(106 * var(--u)); }

/* --- El capçal de la portada (referència: foto 318-1024 x 85-480, text 40-420, dona del nivell 830-1024) --- */
.heroi { position: relative; height: calc(400 * var(--u)); }
.heroi .foto { position: absolute; left: calc(318 * var(--u)); top: 0; width: calc(100% - calc(318 * var(--u))); height: calc(395 * var(--u)); object-fit: cover;
  -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; }
.heroi .personatge { position: absolute; right: 0; top: calc(80 * var(--u)); width: calc(196 * var(--u)); z-index: 2; }
.heroi::after { content: ""; position: absolute; right: calc(26 * var(--u)); top: calc(74 * var(--u)); width: calc(168 * var(--u)); height: calc(168 * var(--u)); border-radius: 50%;
  background: var(--accent); z-index: 1; }
.heroi .text { position: absolute; left: calc(40 * var(--u)); top: calc(72 * var(--u)); width: calc(400 * var(--u)); z-index: 3; }
.heroi h1 { font-size: calc(68 * var(--u)); line-height: 0.88; }
.heroi h1 span { display: inline-block; background: var(--newsprint); padding: 2px calc(12 * var(--u)) calc(6 * var(--u)); margin: 0 0 calc(3 * var(--u)) calc(-12 * var(--u));
  clip-path: polygon(0 4%, 3% 0, 97% 3%, 100% 0, 99% 96%, 96% 100%, 2% 97%, 0 100%); }
.heroi .boto { display: block; width: calc(307 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(22 * var(--u)); padding: calc(17 * var(--u)) calc(10 * var(--u)); text-align: center; }
.heroi .resposta { display: block; width: calc(307 * var(--u)); margin-top: calc(6 * var(--u)); text-align: center; background: none; }
.boto { display: inline-block; background: var(--accent); color: #fff; font-family: var(--text); font-weight: 600;
  font-size: calc(17 * var(--t)); padding: calc(13 * var(--u)) calc(26 * var(--u)); text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(0 3%, 4% 0, 100% 2%, 99% 97%, 96% 100%, 0 98%); }
.boto:hover { background: #B8231A; }
.boto:focus-visible { outline: calc(3 * var(--u)) solid var(--tinta); outline-offset: calc(3 * var(--u)); }
.resposta { font-size: calc(14 * var(--t)); font-weight: 600; background: var(--newsprint); padding: 2px calc(8 * var(--u)); }

/* --- Seccions --- */
.seccio { position: relative; padding: 0 calc(46 * var(--u)); }
/* el pinzell va sota el títol, com a la portada (.amb-pinzell): abans començava al 30 %, el blau anava per sobre de la
   base, i ratllaven les paraules («Qué incluye», «Proyectos de stands») i el paràgraf de sota */
.seccio h2 { font-size: calc(58 * var(--u)); display: inline-block; position: relative; z-index: 1; padding-bottom: calc(20 * var(--u)); }
.seccio h2::after { content: ""; position: absolute; z-index: -1; left: calc(-6 * var(--u)); bottom: 0; width: min(100%, calc(420 * var(--u)));
  height: calc(15 * var(--u)); background: url("../img/pinzell-vermell.svg") 0 50% / 100% 100% no-repeat; }
.seccio h2.blau::after { background-image: url("../img/pinzell-blau.svg"); }

/* Proyectos (referència: títol a y 488, fotos 553-726 i 760-937, columnes de 315, 303 i 312 amb 13 de separació) */
.projectes h2 { margin: calc(3 * var(--u)) 0 calc(12 * var(--u)); }
.graella { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)) calc(13 * var(--u)); }
.graella figure { margin: 0; }
.graella img { width: 100%; height: calc(174 * var(--u)); object-fit: cover; }
.graella figcaption { font-size: calc(15 * var(--t)); font-weight: 600; margin-top: calc(7 * var(--u)); }

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

/* Cómo trabajamos (referència: títol a y 1200, el filet vermell al costat del títol, passos 1262-1340) */
.proces h2 { margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); }
.proces h2::after { left: auto; right: calc(-132 * var(--u)); width: calc(118 * var(--u)); bottom: calc(30 * var(--u)); height: calc(18 * var(--u)); }
.proces ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.proces li { display: flex; gap: calc(8 * var(--u)); align-items: flex-end; justify-content: space-between; padding: 0 calc(14 * var(--u));
  border-left: 1.5px solid var(--linia); min-height: calc(82 * var(--u)); }
.proces li:first-child { border-left: 0; padding-left: calc(50 * var(--u)); }
.proces .num { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900;
  color: var(--accent); font-size: calc(34 * var(--u)); display: block; line-height: 1; }
.proces strong { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900;
  font-size: calc(23 * var(--u)); display: block; line-height: 1.05; }
.proces img { height: calc(84 * var(--u)); width: auto; }

/* --- El contacte: la banda negra (referència: y 1345-1536, títol blanc de dues línies, l'emblema a la dreta) --- */
.contacte { position: relative; margin-top: calc(6 * var(--u)); background: var(--ink); color: #fff; padding: calc(34 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u)) calc(55 * var(--u));
  display: grid; grid-template-columns: 1fr calc(450 * var(--u)); gap: calc(10 * var(--u)); align-items: center; min-height: calc(192 * var(--u));
  -webkit-mask: url("../img/vora-dalt.svg") top / 100% 22px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 21px) no-repeat;
  mask: url("../img/vora-dalt.svg") top / 100% 22px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 21px) no-repeat; }
.contacte h2 { font-size: calc(50 * var(--u)); color: #fff; max-width: calc(500 * var(--u)); display: inline; line-height: 1; }
.contacte .boto { margin-left: calc(12 * var(--u)); vertical-align: calc(6 * var(--u)); font-size: calc(18 * var(--t)); padding: calc(12 * var(--u)) calc(30 * var(--u)); }
.contacte .emblema { width: calc(450 * var(--u)); margin: calc(-10 * var(--u)) calc(-20 * var(--u)) calc(-26 * var(--u)) 0; }

/* --- El peu --- */
.peu { padding: calc(22 * var(--u)) calc(36 * var(--u)) calc(34 * var(--u)); }
.peu p { margin: 0 0 calc(4 * var(--u)); font-size: calc(14 * var(--t)); }
.peu .marca { font-family: var(--titols); font-variation-settings: "wdth" 50, "opsz" 144; font-weight: 900; font-size: calc(24 * var(--u)); }

/* --- Mòbil --- */
@media (max-width: 700px) {
  .capcal { height: auto; padding: 10px 16px 0; }
  .capcal .logo { position: static; display: block; width: 150px; }
  .menu { position: static; flex-wrap: wrap; margin: 10px 0 6px -8px; }
  .menu a { padding: 6px 8px; }
  .gavina { width: 64px; right: 10px; }
  .heroi { height: auto; padding-bottom: 20px; }
  .heroi .foto { position: static; width: 100%; height: 300px; }
  .heroi .personatge { width: 110px; top: auto; bottom: 120px; }
  .heroi::after { top: auto; bottom: 190px; right: 6px; width: 104px; height: 104px; }
  .heroi .text { position: static; width: auto; margin: -70px 16px 0; }
  .heroi h1 { font-size: 50px; }
  .heroi .resposta { margin-left: 0; }
  .seccio { padding: 0 16px; }
  .seccio h2 { font-size: 46px; }
  .graella { grid-template-columns: 1fr; }
  .graella img { height: 200px; }
  .serveis ul { grid-template-columns: repeat(2, 1fr); }
  .serveis li { border-right: 0; border-top: 1.5px solid var(--linia); padding-bottom: 12px; }
  .proces h2::after { display: none; }
  .proces ol { grid-template-columns: 1fr; gap: 16px; }
  .proces li, .proces li:first-child { border-left: 0; padding: 0; }
  .contacte { grid-template-columns: 1fr; padding: 40px 16px 0; }
  .contacte h2 { display: block; font-size: 40px; }
  .contacte .boto { margin: 16px 0 0; }
  .contacte .emblema { width: 100%; margin: 10px 0 0; }
  .peu { padding: 24px 16px 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .gavina { animation: gavina 7s ease-in-out infinite; transform-origin: 60% 90%; }
  @keyframes gavina { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
}

/* ===== La revisió de la porta (31-10-2026, wf_5eac0aa8-389) ===== */
/* Un sol model de botó a tota la web, el de «Ver todos los proyectos»: la lletra dels titulars i la vora estripada. La
   vora retalla el contorn de fora, i per això el focus es dibuixa a dins. */
.boto { font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: calc(22 * var(--u));
  letter-spacing: 0.01em; clip-path: none;
  -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; }
.boto:focus-visible { outline: 3px solid var(--tinta); outline-offset: -7px; }
.portada .boto, .crida-linia .boto { transform: rotate(-1.5deg); }
.m-tots:focus-visible { outline-offset: -7px; }
@media (min-width: 701px) {
  /* el peu, a l'eix de la resta de la pàgina */
  .peu { padding-left: calc(46 * var(--u)); padding-right: calc(46 * var(--u)); }
  /* la mateixa capçalera a totes les pàgines: a les que no tenen foto al capçal (el contacte, el blog, els textos
     legals) hi quedava el logo gran de la v3, que penjava per sota de la franja i tapava el títol */
  /* 01-11-2026, l'Albert, mirant-ho al MacBook: «el logo no té aire». La vora estripada del capçal (vora-capcal.svg)
     comença al 80 % de l'alçada, i amb 104 de capçal i el logo de 128 d'ample s'hi menjava 8 unitats. Ara el capçal fa
     126 i el logo 110 (71 d'alt): queden 16 unitats de paper entre el logo i l'estrip. */
}
@media (min-width: 1024px) {
  .pagina { --capcal-h: calc(126 * var(--u)); }
  .capcal { height: var(--capcal-h); }
  .capcal .logo { top: calc(14 * var(--u)); width: calc(110 * var(--u)); }
  /* el menú, compacte: amb set entrades i les paraules del català («Esdeveniments», «Sostenibilitat») no hi cabia */
  .capcal nav { position: absolute; right: calc(108 * var(--u)); top: calc(30 * var(--u)); display: flex; align-items: center;
    gap: calc(12 * var(--u)); }
  .menu { position: static; }
  .menu a { padding: calc(6 * var(--u)) calc(7 * var(--u)); font-size: calc(14 * var(--t)); }
  .gavina { top: calc(8 * var(--u)); width: calc(82 * var(--u)); }
  .boto-capcal { font-size: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); white-space: nowrap;
    transform: rotate(-1.5deg); }
}
/* De 701 a 1.023 px (l'iPad dret, un portàtil petit): el capçal de dues files, com al mòbil però més gran. A dalt el logo,
   el botó, les llengües i la gavina; a sota, el menú sencer. Ja no va a sobre de la foto: la foto comença a sota. */
@media (min-width: 701px) and (max-width: 1023px) {
  .capcal { height: auto; padding: 14px 24px 8px; }
  .capcal .logo { position: static; display: block; width: 112px; }
  .capcal nav { position: static; display: block; }
  .menu { position: static; display: flex; flex-wrap: wrap; margin: 10px 0 0 -8px; }
  .menu a { padding: 6px 8px; font-size: 15px; }
  .boto-capcal { position: absolute; top: 30px; right: 104px; font-size: 17px; padding: 10px 16px; white-space: nowrap;
    transform: rotate(-1.5deg); }
  .capcal .idiomes { position: absolute; top: 4px; right: 104px; }
  .gavina { top: 12px; right: 18px; width: 72px; }
}
@media (max-width: 700px) {
  .boto { font-size: 20px; }
  /* la capçalera del mòbil: el logo més petit i el menú en una sola fila que llisca de costat */
  .capcal .logo { width: 100px; }
  .menu { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; }
  .boto-capcal { position: absolute; top: 22px; right: 84px; font-size: 14px; padding: 8px 10px; white-space: nowrap; }
  .seccio h2 { padding-bottom: 14px; }
  .seccio h2::after { height: 11px; }
}

/* --- La gavina del capçal (01-11-2026): és un botó, i en clicar-la vola (js/gavina.js). La del vol, les plomes i la
   bafarada van fixes a la finestra, per sobre de tot, i no agafen clics. --- */
button.gavina { padding: 0; border: 0; background: none; cursor: pointer; z-index: 5; }
button.gavina img { width: 100%; }
button.gavina:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button.gavina.es-fora img { visibility: hidden; }
.gavina img { transform-origin: 55% 92%; }
.gavina-vol { position: fixed; z-index: 1000; pointer-events: none; object-fit: contain; object-position: 50% 60%; }
.gavina-ploma { position: fixed; z-index: 999; width: 26px; pointer-events: none; }
.gavina-bafarada { position: fixed; z-index: 1001; pointer-events: none; padding: 6px 12px 7px; transform-origin: 100% 60%;
  background: var(--fons) url("../img/paper.jpg") center / 300px auto; border: 2px solid var(--ink);
  font-family: var(--titols); font-variation-settings: var(--titols-variacio); font-weight: 900; font-size: 22px; line-height: 1; color: var(--ink);
  white-space: nowrap; box-shadow: 3px 3px 0 var(--ink); }
.gavina-bafarada::after { content: ""; position: absolute; right: -11px; top: 50%; margin-top: -7px; border: 7px solid transparent;
  border-left: 10px solid var(--ink); border-right: 0; }

/* --- El selector de llengua (01-11-2026): ES, CA i EN, petit, a dalt a la dreta del capçal; la llengua de la pàgina,
   subratllada en vermell. El posa eines/tradueix.py a totes les pàgines. --- */
.idiomes { display: flex; gap: calc(4 * var(--u)); margin: 0; padding: 0; list-style: none; }
.idiomes a { display: block; padding: calc(4 * var(--u)) calc(6 * var(--u)); font-size: calc(13 * var(--t)); font-weight: 700; text-decoration: none;
  letter-spacing: 0.04em; color: var(--tinta-suau); }
.idiomes a:hover, .idiomes a[aria-current="true"] { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.idiomes a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (min-width: 1024px) {
  .capcal .idiomes { position: absolute; right: 0; top: calc(-29 * var(--u)); }
}
@media (max-width: 700px) {
  .capcal .idiomes { position: absolute; top: 2px; right: 86px; }
  .capcal .idiomes a { padding: 2px 5px; font-size: 12px; }
  .boto-capcal { top: 30px; }
}

/* Els ous de Pasqua (js/ous.js): les il·lustracions de gravat es mouen quan les cliques */
.ou { cursor: pointer; }
.ou-bombolla { position: absolute; z-index: 60; padding: 8px 14px; background: #fff; color: var(--tinta); border: 2px solid var(--tinta);
  border-radius: 16px; font-family: var(--titols); font-size: 18px; line-height: 1.2; white-space: nowrap; pointer-events: none;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .18); }
.ou-bombolla::after { content: ""; position: absolute; left: 22px; bottom: -11px; border: 9px solid transparent; border-bottom: 0;
  border-top-color: var(--tinta); }
.ou-volador { position: absolute; z-index: 59; pointer-events: none; height: auto; }