/* ==========================================================================
   Catàleg d'estades lingüístiques · Viatges Viñolas
   Full d'estil únic i compartit per totes les pàgines i tots els idiomes.
   Escrit mòbil primer: el bloc base val per a tot, i les mides grans
   només afegeixen.
   ========================================================================== */

/* --- 1. Paleta i mesures ------------------------------------------------ */

:root {
  --verd:        #184D40;
  --verd-fosc:   #0F332B;
  --sage:        #8BA99E;
  --mostassa:    #C49A22;
  --indi:        #343A6B;   /* nit: l'únic color que no és de la família */
  --bordeus:     #6E2A32;   /* preu i creus de «no inclòs» */
  --crema:       #F5F0E2;
  --paper:       #FBFAF6;
  --text:        #1F1D18;
  --text-suau:   #5C5040;
  --linia:       rgba(24, 77, 64, .14);

  --radi:        12px;
  --ample:       1180px;
  --tipus:       'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* --- 2. Base ------------------------------------------------------------ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--tipus);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--verd); }

h1, h2, h3 { line-height: 1.2; font-weight: 600; margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

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

.contenidor {
  max-width: var(--ample);
  margin: 0 auto;
  padding: 0 18px;
}

:focus-visible {
  outline: 3px solid var(--mostassa);
  outline-offset: 2px;
}

/* --- 3. Capçalera ------------------------------------------------------- */

.capcalera {
  background: var(--verd-fosc);
  color: #fff;
  padding: 14px 0;
  border-bottom: 1px solid rgba(139, 169, 158, .45);   /* sàlvia al 45% */
}

.capcalera .contenidor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.marca img {
  /* 54px per petició: el logo nou és més rabassut (proporció 3,24:1) i a
     40px es veia petit. Passa dels 44px de la zona clicable mínima, de
     manera que la capçalera queda una mica més alta a posta. */
  height: 54px;
  width: auto;
  display: block;
}

.eines { display: flex; align-items: center; gap: 4px; }

.a-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--sage);
}
/* La mida i el color de totes les icones són al bloc 13. */
.a-index .ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
}


.idiomes { display: flex; gap: 4px; }
.idiomes a {
  color: var(--sage);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.idiomes a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.12); }

/* --- 4. Portada: entrada ------------------------------------------------ */

.entrada {
  background: var(--verd-fosc);
  color: #fff;
  padding: 32px 0 44px;
}
.entrada h1 { font-size: 30px; }
.entrada p {
  color: var(--sage);
  font-size: 17px;
  max-width: 68ch;
  margin-top: 14px;
}

/* --- 5. Graella de targetes --------------------------------------------- */

.seccio { padding: 40px 0; }

.peu-seccio { color: var(--text-suau); font-size: 15px; margin-bottom: 26px; }

.graella {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.targeta {
  background: var(--crema);
  transition: border-color .18s ease, background-color .18s ease;
  border: 1px solid var(--linia);
  border-radius: var(--radi);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.targeta .foto {
  position: relative;
  height: 170px;
  background: var(--sage);
  overflow: hidden;
}
.bandera {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  background: #012169;
}
.bandera img { width: 100%; height: 100%; display: block; }
.targeta .foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Distintiu sobre la foto: verd fosc perquè es llegeixi damunt de qualsevol
   imatge. Només hi és a les estades amb sortida i data tancades. */
.distintiu {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  background: var(--verd);
  color: var(--crema);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.targeta .cos { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.targeta h2 { font-size: 21px; }
.targeta .dades {
  list-style: none;
  padding: 0;
  margin: 12px 0 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.targeta .dades li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--verd);
  min-width: 0;
}
.targeta .resum { color: var(--text-suau); font-size: 15px; flex: 1; }

.fals-boto {
  display: inline-block;
  transition: background-color .18s ease;
  margin-top: 16px;
  background: var(--mostassa);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radi);
  align-self: flex-start;
}

/* Botó i preu comparteixen fila. El preu és un botó bordeus perquè
   contrasti amb la mostassa de l'acció; no és mostassa, que com a text
   estaria prohibida. Només hi és quan l'estada té preu tancat. */
.accions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.accions .fals-boto { margin-top: 0; align-self: auto; }
.accions .preu { flex: 1; }    /* omple l'espai lliure fins a la vora dreta */
.preu {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  background: var(--bordeus);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--radi);
  white-space: nowrap;
}
.preu small { font-size: 11px; font-weight: 500; opacity: .85; }

/* --- 6. Fitxa d'estada -------------------------------------------------- */

.portada-fitxa {
  background: var(--verd-fosc);
  color: #fff;
  padding: 28px 0 32px;
}
.portada-fitxa .contingut {
  display: flex;
  align-items: center;
  gap: 16px;
}
.portada-fitxa .bandera {
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 46px; height: 46px;
}
.portada-fitxa .titols { min-width: 0; }
.portada-fitxa h1 { font-size: 32px; margin-bottom: 6px; }
.portada-fitxa .lloc { color: var(--sage); font-size: 17px; }

.imatge-fitxa {
  height: 280px;
  background: var(--sage);
  overflow: hidden;
}
.imatge-fitxa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tira-claus {
  background: var(--crema);
  border-bottom: 1px solid var(--linia);
}
.claus {
  /* Dues columnes que s'ajusten al text més llarg; el sobrant, als
     laterals. A partir de 900px passa a una sola fila.            */
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-evenly;   /* mateix aire als laterals i entremig */
  margin: 0;
  row-gap: 16px;
  column-gap: 32px;
  padding: 20px 0;
}
.clau {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.clau dt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.clau dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--verd);
  line-height: 1.3;
}

/* Segona fila de la tira: el que varia d'una estada a l'altra —quan surt i
   quant costa— surt dels claus i viu aquí, de manera que els claus són
   sempre els mateixos cinc. La majoria de fitxes no tindran aquesta fila, i
   llavors la tira queda igual que la d'Atenes. El preu reutilitza la
   píndola bordeus de la targeta perquè es reconegui d'una pàgina a l'altra.
   Per sota de 900px la data i el preu no hi caben de costat: s'apilen i es
   centren. A 900px passen a fila —data a l'esquerra, preu a la dreta—, el
   mateix salt on la resta de la tira canvia d'estat, de manera que la tira
   en té dos i no tres. */
.sortida {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--linia);
}
.sortida p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--verd);
}

/* La data té dues versions escrites a l'HTML i se n'amaga una. Amb
   «display: none» el lector de pantalla només llegeix la visible: no es diu
   dues vegades. El text va embolcallat en un span perquè el «gap» de la
   fila separi la icona del text i no el text de la data.                  */
.sortida .llarg { display: none; }

/* Al mòbil tot va apilat i aquest buit és l'únic que separa una secció de
   la següent: per això no pot ser més petit que el d'escriptori.       */
.bloc { padding: 56px 0; }

.franja { background: var(--crema); }
.bloc h2 { margin-bottom: 14px; }

.llista { list-style: none; padding: 0; margin: 0; }
.llista li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: 15px;
  break-inside: avoid;
}
.llista li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 18px; height: 18px;
  /* Tic d'«Inclòs» en sàlvia: una afirmació sí que es pot llegir en verd. La
     creu de «No inclòs» va en bordeus. Abans anaven al revés, i una negació
     en verd no tenia sentit.                                             */
  background: var(--sage);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
/* Llistes descriptives: un punt que no afirma res. El check es reserva per
   a «Inclòs», on la creu de «No inclòs» li fa de contrari; en una llista
   com «Punts importants» diria que està inclòs allò que justament costa
   un suplement o que l'alumne s'ha de portar.                          */
.llista.neutra li::before {
  top: 15px;
  left: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mostassa);
  -webkit-mask: none;
          mask: none;
}

/* La creu és l'única negació del catàleg i el bordeus és l'únic color que
   la pot dir. La mostassa que hi havia abans es queda al punt rodó de les
   llistes neutres, que no afirma ni nega res.                          */
.llista.no li::before {
  background: var(--bordeus);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");
}

.dues-llistes { display: grid; grid-template-columns: 1fr; gap: 28px; }

/* --- 7. Programa dia a dia (diapositives) -------------------------------- */
/* Una diapositiva per dia. Comparteix .pista amb la galeria: el motor és el
   mateix, canvien els comandaments. L'alçada la fixa carrusel.js a partir
   del dia més ple de la fitxa, perquè no balli res en canviar de dia.    */

.programa { position: relative; }

.programa .dia {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--crema);
  border-radius: var(--radi);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dia-cap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dia-num {
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--verd-fosc);
}

.moments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.moment {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radi);
  padding: 14px 16px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Totes les etiquetes iguals. El color el porta la barra, no la pastilla:
   una barra no du text a sobre, i per tant la mostassa i l'indi s'hi poden
   fer servir a plena força sense haver de canviar el color de la lletra
   segons la categoria.                                                   */
.moment .quan {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-suau);
}
.moment p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.45; }

/* La barra no diu quina hora és —això ja ho diu l'etiqueta—, diu quina mena
   d'estona és. Al matí i a la tarda el que cal distingir són les classes de
   les activitats; la nit sempre és una altra cosa.                       */
.moment::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--sage);
}
.moment.classe::before    { background: var(--verd-fosc); }
.moment.activitat::before { background: var(--mostassa); }
.moment.nit::before       { background: var(--indi); }

/* Comandaments: els posa carrusel.js */

.comandament { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.fletxa-dia {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radi);
  background: var(--verd-fosc);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .18s ease;
}
.fletxa-dia[disabled] { background: var(--crema); color: var(--text-suau); cursor: default; }

.barra-dies { flex: 1; min-width: 0; }
.rail { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.tick {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tick i {
  display: block;
  width: 100%;
  height: 9px;
  border-radius: var(--radi);
  background: var(--sage);
  transition: height .2s ease;
}
/* Els mateixos colors que les barres dels moments: un dia és del color del
   que s'hi fa. Els dies sense classe queden en mostassa i per això
   ressalten damunt de la tira.                                          */
.tick.classes i    { background: var(--verd-fosc); }
.tick.activitats i { background: var(--mostassa); }

/* El dia actiu només creix. No canvia mai de color: si el pintéssim, el
   marcador de posició taparia la informació del dia.                   */
.tick[aria-current="true"] i { height: 26px; }

.escala { display: flex; gap: 3px; margin-top: 6px; }
.escala span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-suau);
}

.peu-programa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linia);
}
.compte-dies { margin: 0; font-size: 13px; font-weight: 600; color: var(--verd-fosc); }
.compte-dies em { font-style: normal; font-weight: 500; color: var(--text-suau); }

.llegenda { display: flex; gap: 16px; flex-wrap: wrap; }
.llegenda span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; color: var(--text-suau); }
.llegenda i { display: block; width: 16px; height: 9px; border-radius: var(--radi); }
.llegenda .classe    { background: var(--verd-fosc); }
.llegenda .activitat { background: var(--mostassa); }
.llegenda .logistica { background: var(--sage); }

/* --- 8. Contacte -------------------------------------------------------- */

.contacte {
  background: var(--verd);
  color: #fff;
  border-radius: var(--radi);
  padding: 30px 22px;
  margin: 56px 0;
}
.contacte h2 { color: #fff; }
.contacte p { color: var(--sage); font-size: 15px; margin-top: 8px; }

.vies { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.via {
  transition: background-color .18s ease, border-color .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: var(--radi);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.via.principal { background: var(--mostassa); color: var(--text); }
.via.secundaria { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }

/* Barra fixa, només al mòbil */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--verd);
  border-top: 1px solid rgba(255,255,255,.12);
  transition: transform .25s ease;
}
/* La posa carrusel.js quan la secció de contacte entra a pantalla: allà els
   mateixos tres enllaços ja hi són en gran, i la barra només els taparia. */
.barra.amagada { transform: translateY(100%); }
.barra a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.barra .b1 { background: var(--mostassa); color: var(--text); }
.barra .b2 { background: rgba(255,255,255,.12); color: #fff; }

/* --- 9. Peu ------------------------------------------------------------- */

.peu {
  background: var(--verd-fosc);
  color: var(--sage);
  /* El coixí de baix reserva l'espai de la barra flotant. Va aquí i no al
     body perquè, quan la barra s'amaga, el que es vegi sigui verd fosc i
     no una franja de color paper sota el peu.                          */
  padding: 30px 0 106px;
  font-size: 14px;
  text-align: center;
}
.peu a { color: var(--sage); }
.peu p { margin-bottom: .5em; }
/* Sense això, l'última línia arrossega el seu marge i el text queda 7px
   per damunt del centre. La regla general p:last-child no hi arriba:
   .peu p té la mateixa especificitat i va després.                    */
.peu p:last-child { margin-bottom: 0; }

/* --- 10. Instal·lacions amb galeria ------------------------------------- */

.amb-galeria { display: grid; grid-template-columns: 1fr; gap: 26px; }

/* Els punts els injecta carrusel.js segons quantes fotos hi hagi. Sense
   JavaScript queda només la pista, que al mòbil ja es llisca amb el dit.
   No hi ha fletxes: res no se superposa a la fotografia.                */

.galeria { position: relative; }

.pista {
  position: relative;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pista::-webkit-scrollbar { display: none; }
.pista:focus-visible { outline: 3px solid var(--mostassa); outline-offset: 3px; }

/* Les posa carrusel.js. L'encaix es desactiva mentre s'arrossega —si no, el
   navegador torna la tira a lloc a cada píxel— i no es torna a activar fins
   que el lliscament final ha acabat: si es reactiva abans, el navegador
   encaixa de cop i el lliscament suau no s'arriba a veure.              */
.pista.arrossegable { cursor: grab; }
.pista.arrossegant { cursor: grabbing; }
.pista.sense-encaix { scroll-snap-type: none; }
.pista img { -webkit-user-drag: none; user-select: none; }

.galeria .marc {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 3 / 2;
  background: var(--sage);
  border-radius: var(--radi);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--verd);
}
.galeria img { width: 100%; height: 100%; object-fit: cover; }

.punts { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.punt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.punt::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sage);
  transition: background-color .18s ease;
}
.punt.actiu::before { background: var(--mostassa); }

/* --- 11. Pantalles grans ------------------------------------------------ */

@media (min-width: 620px) {
  .graella { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .vies { flex-direction: row; }
  .via { flex: 1; }
}

@media (min-width: 900px) {
  .peu { padding: 30px 0; }
  .barra { display: none; }

  h1 { font-size: 34px; }
  h2 { font-size: 25px; }

  .entrada { padding: 44px 0 60px; }
  .entrada h1 { font-size: 42px; }

  .seccio { padding: 56px 0; }
  .graella { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  .imatge-fitxa { height: 480px; }
  .portada-fitxa { padding: 40px 0 44px; }
  .portada-fitxa .bandera { width: 62px; height: 62px; }
  .portada-fitxa .contingut { gap: 20px; }
  .portada-fitxa h1 { font-size: 42px; }

  .bloc { padding: 76px 0; }
  .dues-llistes { grid-template-columns: 1fr 1fr; gap: 40px; }
  .amb-galeria { grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
  /* Amplada natural i «space-between»: la primera entrada toca la vora
     esquerra i l'última la dreta, i els quatre buits del mig són idèntics.
     Amb «flex: 1 1 0» les columnes eren iguals però, com que els textos no
     ho són, cada una acabava amb un tros de buit diferent. El «gap» es
     queda com a mínim per si algun dia els textos són llargs.           */
  .claus {
    display: flex;
    justify-content: space-between;
    width: auto;
    margin: 0;
    padding: 26px 0;
    gap: 24px;
  }

  /* La data creix al mateix salt en què els claus passen a una sola fila,
     i la fila de la sortida deixa d'apilar-se: així la tira té dos estats i
     no tres.                                                            */
  .sortida { flex-direction: row; justify-content: space-between; }
  .sortida .curt { display: none; }
  .sortida .llarg { display: inline; }

  /* El dia es parteix: número gran a l'esquerra, moments a la dreta */
  .programa .dia {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
    padding: 34px 36px;
  }
  .dia-cap { display: block; }
  .dia-num { display: block; font-size: 76px; margin-bottom: 10px; }
  .moment p { font-size: 20px; line-height: 1.4; }
}

/* --- 12. Impressió ------------------------------------------------------ */

@media print {
  @page { margin: 14mm; }

  body { background: #fff; padding: 0; font-size: 11pt; }

  .capcalera, .barra, .contacte, .fals-boto { display: none; }

  .portada-fitxa { background: none; color: var(--text); padding: 0; }
  .imatge-fitxa { display: none; }
  .portada-fitxa .lloc { color: var(--text-suau); }

  .bloc { padding: 14px 0; break-inside: avoid; }
  .claus { break-inside: avoid; }

  /* Els navegadors no imprimeixen els fons: la píndola del preu quedaria
     blanca sobre blanc. Al paper, el preu és text i prou.               */
  .preu { background: none; color: var(--text); padding: 0; }

  /* Un A4 fa uns 794 px equivalents, per sota del salt de 900: sense això
     el paper es quedaria la data curta i apilada. Al paper, sempre la
     llarga i en fila, com a escriptori.                                */
  .sortida { flex-direction: row; justify-content: space-between; }
  .sortida .curt { display: none; }
  .sortida .llarg { display: inline; }

  /* Un carrusel imprès només ensenyaria la primera foto: al paper, totes. */
  .punts { display: none; }
  .pista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow: visible;
    break-inside: avoid;
  }

  /* El programa no pot sortir imprès amb un sol dia visible: les
     diapositives passen a graella i hi surten tots.                */
  .comandament, .peu-programa { display: none; }
  .programa .pista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4mm;
    height: auto !important;
    overflow: visible;
  }
  .programa .dia {
    display: block;
    height: auto !important;
    padding: 3.5mm;
    break-inside: avoid;
  }
  .dia-num { font-size: 13pt; margin-bottom: 1mm; }
  .moments { gap: 1.5mm; margin-top: 2mm; }
  .moment { padding: 2mm 2.5mm 2mm 3.5mm; gap: 1mm; }
  .moment::before { width: 1.2mm; }
  .moment .quan { font-size: 6pt; }
  .moment p { font-size: 8pt; line-height: 1.35; }

  .peu { background: none; color: var(--text-suau); border-top: 1px solid #ccc; }
}



/* --- 13. Icones (Lucide, incrustades com a màscara) ---------------------- */
/* Per afegir-ne una de nova: enganxa el contingut intern de l'SVG de Lucide
   dins d'un url("...") amb el mateix embolcall que les altres.              */

.ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background: var(--sage);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* Mides i color. Els 17px de la base són els de les targetes de la portada;
   la resta són excepcions i van agrupades aquí perquè el mateix patró no
   s'hagi de repetir a cada bloc del full.                                */
.clau .ico,
.sortida .ico,
.a-index .ico    { width: 20px; height: 20px; flex: 0 0 20px; }
.fletxa-dia .ico,
.via .ico        { width: 18px; height: 18px; flex: 0 0 18px; }

.clau .ico,
.sortida .ico    { background: var(--verd); }
.a-index .ico,
.fletxa-dia .ico,
.via .ico        { background: currentColor; }

.ico.pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.ico.edat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
.ico.dies { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico.durada { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14%22%2F%3E%3Cpath%20d%3D%22M5%202h14%22%2F%3E%3Cpath%20d%3D%22M17%2022v-4.172a2%202%200%200%200-.586-1.414L12%2012l-4.414%204.414A2%202%200%200%200%207%2017.828V22%22%2F%3E%3Cpath%20d%3D%22M7%202v4.172a2%202%200%200%200%20.586%201.414L12%2012l4.414-4.414A2%202%200%200%200%2017%206.172V2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14%22%2F%3E%3Cpath%20d%3D%22M5%202h14%22%2F%3E%3Cpath%20d%3D%22M17%2022v-4.172a2%202%200%200%200-.586-1.414L12%2012l-4.414%204.414A2%202%200%200%200%207%2017.828V22%22%2F%3E%3Cpath%20d%3D%22M7%202v4.172a2%202%200%200%200%20.586%201.414L12%2012l4.414-4.414A2%202%200%200%200%2017%206.172V2%22%2F%3E%3C%2Fsvg%3E"); }
.ico.llit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020v-8a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v8%22%2F%3E%3Cpath%20d%3D%22M4%2010V6a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v4%22%2F%3E%3Cpath%20d%3D%22M12%204v6%22%2F%3E%3Cpath%20d%3D%22M2%2018h20%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020v-8a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v8%22%2F%3E%3Cpath%20d%3D%22M4%2010V6a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v4%22%2F%3E%3Cpath%20d%3D%22M12%204v6%22%2F%3E%3Cpath%20d%3D%22M2%2018h20%22%2F%3E%3C%2Fsvg%3E"); }
.ico.casa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3C%2Fsvg%3E"); }

.ico.hora { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E"); }
.ico.dates { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22m9%2016%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22m9%2016%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }

.ico.ant { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E"); }
.ico.seg { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E"); }


/* Icones de contacte. WhatsApp és una silueta monocroma, no el logo verd. */
.ico.whatsapp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.71.306%201.263.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.71.306%201.263.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z%22%2F%3E%3C%2Fsvg%3E"); }
.ico.tel { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
.ico.mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E"); }
.ico.classes { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fsvg%3E"); }

/* --- 14. Estats d'interacció -------------------------------------------- */
/* Només en dispositius amb punter de veritat: al mòbil el hover es queda
   enganxat després de tocar.                                               */

@media (hover: hover) {
  .targeta:hover { border-color: var(--verd); background: #F1EBD8; }
  .targeta:hover .foto img { transform: scale(1.03); }
  .targeta:hover .fals-boto { background: #AD8619; }

  .fals-boto:hover, .via.principal:hover { background: #AD8619; }
  .via.secundaria:hover { background: rgba(255,255,255,.1); border-color: #fff; }

  .idiomes a:hover, .a-index:hover { background: rgba(255,255,255,.12); color: #fff; }
  .barra a:hover { filter: brightness(1.06); }
  .peu a:hover { color: #fff; }

  .punt:hover::before { background: var(--verd); }

  .fletxa-dia:not([disabled]):hover { background: var(--verd); }
  .tick:hover i { height: 18px; }
  .tick[aria-current="true"]:hover i { height: 26px; }
}

.targeta .foto img { transition: transform .35s ease; }
.via, .fals-boto, .idiomes a { -webkit-tap-highlight-color: transparent; }

.fals-boto:active, .via:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* El JS ja fa els salts sense animar; aixo cobreix els enllacos interns. */
  html { scroll-behavior: auto; }
  .targeta:hover .foto img { transform: none; }
}