/* ==========================================================================
   Maria & Dídac · 26.06.2027
   Reproducció del disseny de Canva (pàgina de 1366 px d'amplada).

   Totes les mides es donen en "unitats de disseny" (--u): 1 unitat = 1 px
   del disseny original. A escriptori la pàgina escala amb l'amplada de la
   finestra, igual que Canva; en mòbil i tauleta --u té un mínim perquè el
   text es llegeixi bé i la columna central ompli la pantalla.
   ========================================================================== */

:root {
  --vermell: #9f0d09;
  --crema: #f6eedf;
  --blanc: #ffffff;
  /* Fons de les seccions clares i del peu (Canva) */
  --fons-clar: #faf9f5;

  --font-titol: 'Beth Ellen', cursive;
  /* El disseny fa servir "The Seasons" (font comercial). Gilda Display és
     l'alternativa lliure més semblant; si teniu llicència web de The Seasons
     (p. ex. Adobe Fonts), només cal canviar-la aquí. */
  --font-text: 'Gilda Display', 'Times New Roman', serif;
  --font-compte: 'Courier New', Courier, monospace;

  --u: clamp(min(0.05rem, (100vw - 3rem) / 370), 100vw / 1366, 0.0875rem);
  --marge: 1rem;
  --mida-titol: calc(48 * var(--u));
  /* Amplada de les columnes de text a escriptori (uns 60 caràcters/línia) */
  --columna-escriptori: calc(680 * var(--u));
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fons-clar);
  color: var(--vermell);
  font-family: var(--font-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

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

a {
  color: inherit;
}

a:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.1875rem;
  border-radius: 0.125rem;
}

.visualment-amagat {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Elements comuns ------------------------------------------------------ */

.titol {
  font-family: var(--font-titol);
  font-size: calc(40 * var(--u));
  line-height: calc(56 * var(--u));
  text-align: center;
}

/* "Maria & Dídac" i els títols de totes les seccions: mateixa mida. */
.titol--gran {
  font-size: var(--mida-titol);
  line-height: 1.4;
}

.seccio {
  text-align: center;
}

.seccio--vermella {
  background: var(--vermell);
  color: var(--crema);
}

/* Dues seccions vermelles seguides: tapa la línia clara que el navegador pot
   deixar entre elles quan la vora cau en una fracció de píxel */
.seccio--vermella + .seccio--vermella {
  box-shadow: 0 -0.125rem 0 var(--vermell);
}

/* --- Menú ----------------------------------------------------------------- */

/* Mòbil: dues files (com al disseny). Escriptori: una sola fila. */
/* Mòbil: amb 7 seccions, l'espai de 24 u encara deixa dues files a partir
   de 375 px; en pantalles més estretes, la fila pot partir-se. */
.menu {
  --menu-espai: calc(24 * var(--u));
  padding: calc(62 * var(--u)) 0 calc(21 * var(--u));
}

.menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--marge);
  row-gap: calc(32 * var(--u));
}

.menu__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 * var(--u)) var(--menu-espai);
  list-style: none;
  font-family: var(--font-titol);
  font-size: calc(21.3 * var(--u));
  line-height: calc(29 * var(--u));
}

@media (min-width: 48em) {
  .menu {
    --menu-espai: calc(56 * var(--u));
  }

  .menu nav {
    flex-direction: row;
    justify-content: center;
    column-gap: var(--menu-espai);
  }
}

.menu a {
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --- Portada -------------------------------------------------------------- */

.portada {
  padding-top: calc(45 * var(--u));
}

/* margin-bottom: deixa 49,9 u de la línia base del títol a la il·lustració,
   el mateix ritme que data → "Cal Segudet" → compte enrere. */
.portada__noms {
  margin-bottom: 0.85em;
}

/* Il·lustració a tota l'amplada. En finestres molt amples i baixes no passa
   del 80% de l'alçada visible: hi retalla una mica per dalt i per baix en
   lloc de fer-se enorme. */
.portada__il {
  width: 100%;
  max-width: none;
  max-height: 80svh;
  object-fit: cover;
}

.portada__data {
  margin-top: calc(24 * var(--u));
}

.portada__lloc {
  margin-top: calc(36 * var(--u));
}

/* --- Compte enrere -------------------------------------------------------- */

/* padding-top calculat perquè la distància "Cal Segudet" → números sigui la
   mateixa que data → "Cal Segudet" (49,9 u, de la línia base de cada text al
   punt més alt del següent). */
.compte {
  padding: calc(34.16 * var(--u)) 0 calc(44 * var(--u));
}

.compte__rellotge {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(9 * var(--u));
  font-family: var(--font-compte);
}

.compte__bloc {
  position: relative;
}

.compte__num,
.compte__sep {
  display: block;
  font-size: calc(49 * var(--u));
  line-height: calc(52 * var(--u));
  letter-spacing: calc(-4.8 * var(--u));
}

.compte__etiqueta {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: calc(9 * var(--u));
  transform: translateX(-50%);
  font-size: calc(17 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Reproductor de la cançó ----------------------------------------------
   Minimalista, a l'estil d'un mini reproductor: botó rodó de play/pausa,
   títol i artista, línia de progrés amb els temps (Courier, com el compte
   enrere) i stop. Pastilla crema com els botons de WhatsApp. Mentre sona, tres
   barretes s'animen al costat del títol. */

.reproductor {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  width: calc(440 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  /* Les etiquetes del compte enrere (absolutes) ocupen 26 u sota els números */
  margin: calc(58 * var(--u)) auto 0;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border-radius: 10em;
  background: var(--crema);
  box-shadow: 0 0.125rem 0.75rem rgb(159 13 9 / 0.1);
  color: var(--vermell);
  text-align: left;
}

.reproductor p {
  margin: 0;
}

.reproductor__play,
.reproductor__stop {
  display: grid;
  flex: none;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, scale 0.2s, box-shadow 0.2s;
}

.reproductor__play {
  width: max(2.75rem, calc(54 * var(--u)));
  border: 0;
  background: var(--vermell);
  color: var(--crema);
}

.reproductor__play:hover {
  scale: 1.06;
  box-shadow: 0 0 0 0.375rem rgb(159 13 9 / 0.12);
}

.reproductor__play:active {
  scale: 0.96;
}

.reproductor__play svg {
  width: 46%;
  height: 46%;
  fill: currentColor;
}

/* El triangle del play es veu més centrat desplaçat una mica a la dreta */
.reproductor__icona-play {
  translate: 6% 0;
}

.reproductor__icona-pausa,
.reproductor--sona .reproductor__icona-play {
  display: none;
}

.reproductor--sona .reproductor__icona-pausa {
  display: block;
}

.reproductor__stop {
  width: max(2.75rem, calc(40 * var(--u)));
  border: 0.0625rem solid color-mix(in srgb, var(--vermell) 35%, transparent);
  background: transparent;
  color: var(--vermell);
}

.reproductor__stop:hover {
  border-color: var(--vermell);
  background: var(--vermell);
  color: var(--crema);
}

.reproductor__stop svg {
  width: 38%;
  height: 38%;
  fill: currentColor;
}

.reproductor__play:focus-visible,
.reproductor__stop:focus-visible {
  outline: 0.125rem solid var(--vermell);
  outline-offset: 0.1875rem;
}

.reproductor__info {
  flex: 1;
  min-width: 0;
}

.reproductor__titol {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  overflow: hidden;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  white-space: nowrap;
}

.reproductor__artista {
  overflow: hidden;
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.75;
}

/* Barretes que ballen mentre sona */
.reproductor__ones {
  display: inline-flex;
  flex: none;
  align-items: flex-end;
  gap: calc(2 * var(--u));
  height: calc(12 * var(--u));
  opacity: 0;
  transition: opacity 0.3s;
}

.reproductor__ones i {
  width: calc(3 * var(--u));
  height: 100%;
  border-radius: 1em;
  background: currentColor;
  transform-origin: bottom;
  scale: 1 0.35;
}

.reproductor--sona .reproductor__ones {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reproductor--sona .reproductor__ones i {
    animation: ona 0.9s ease-in-out infinite alternate;
  }

  .reproductor--sona .reproductor__ones i:nth-child(2) { animation-delay: -0.3s; }
  .reproductor--sona .reproductor__ones i:nth-child(3) { animation-delay: -0.6s; }
}

@keyframes ona {
  from { scale: 1 0.3; }
  to   { scale: 1 1; }
}

.reproductor__linia {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(6 * var(--u));
}

.reproductor__temps {
  flex: none;
  min-width: 4ch;
  font-family: var(--font-compte);
  font-size: calc(13 * var(--u));
  font-variant-numeric: tabular-nums;
}

.reproductor__temps:last-child {
  text-align: right;
}

/* Línia de progrés (input range): fina, vermella fins on sona, i el punt
   apareix en passar-hi per sobre (sempre, en pantalles tàctils) */
.reproductor__progres {
  --progres: 0%;
  flex: 1;
  min-width: 0;
  height: 1rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.reproductor__progres::-webkit-slider-runnable-track {
  height: 0.1875rem;
  border-radius: 10em;
  background: linear-gradient(to right,
    var(--vermell) var(--progres),
    color-mix(in srgb, var(--vermell) 22%, transparent) var(--progres));
}

.reproductor__progres::-moz-range-track {
  height: 0.1875rem;
  border-radius: 10em;
  background: color-mix(in srgb, var(--vermell) 22%, transparent);
}

.reproductor__progres::-moz-range-progress {
  height: 0.1875rem;
  border-radius: 10em;
  background: var(--vermell);
}

.reproductor__progres::-webkit-slider-thumb {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.28125rem;
  border: 0;
  border-radius: 50%;
  background: var(--vermell);
  scale: 0;
  transition: scale 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.reproductor__progres::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--vermell);
  scale: 0;
  transition: scale 0.15s;
}

.reproductor__progres:hover::-webkit-slider-thumb,
.reproductor__progres:focus-visible::-webkit-slider-thumb {
  scale: 1;
}

.reproductor__progres:hover::-moz-range-thumb,
.reproductor__progres:focus-visible::-moz-range-thumb {
  scale: 1;
}

@media (hover: none) {
  .reproductor__progres::-webkit-slider-thumb { scale: 1; }
  .reproductor__progres::-moz-range-thumb { scale: 1; }
}

.reproductor__progres:focus-visible {
  outline: 0.125rem solid var(--vermell);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}

/* --- El nostre dia -------------------------------------------------------- */

.nostre-dia {
  padding: calc(49 * var(--u)) 0 calc(60 * var(--u));
}

.nostre-dia__icona {
  width: calc(177 * var(--u));
  margin: calc(29 * var(--u)) auto 0;
}

.nostre-dia__text {
  width: calc(370 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  margin: calc(57 * var(--u)) auto 0;
  font-size: calc(25.3 * var(--u));
  line-height: calc(35 * var(--u));
}

.nostre-dia__text p + p {
  margin-top: calc(35 * var(--u));
}

/* Escriptori: columna més ampla */
@media (min-width: 48em) {
  .nostre-dia__text {
    width: var(--columna-escriptori);
  }
}

/* --- Horari ----------------------------------------------------------------
   La il·lustració és una composició de peces posicionades exactament com a
   Canva. Les coordenades (--x, --y, --w, --h, --cx) són les del grup original,
   que Canva escala a 0,753671.                                               */

.horari {
  --fons-horari: var(--fons-clar);
  padding: calc(51 * var(--u)) 0 calc(44.7 * var(--u));
  background: var(--fons-horari);
}

/* Frase sota el títol: mateix estil que els paràgrafs de "El nostre dia" */
.horari__intro {
  width: calc(370 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  margin: calc(29 * var(--u)) auto 0;
  font-size: calc(25.3 * var(--u));
  line-height: calc(35 * var(--u));
}

.horari__intro a {
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
}

.horari__intro a:hover {
  text-decoration-thickness: 0.12em;
}

@media (min-width: 48em) {
  .horari__intro {
    width: var(--columna-escriptori);
  }
}

.horari__lienzo {
  --g: calc(var(--u) * 0.753671);
  --ox: calc(14.13 * var(--u));
  position: relative;
  width: calc(426 * var(--u));
  height: calc(672.3 * var(--u));
  margin: calc(33 * var(--u)) auto 0;
}

.h-el {
  position: absolute;
  left: calc(var(--ox) + var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  width: calc(var(--w) * var(--g));
  height: calc(var(--h) * var(--g));
  max-width: none;
}

.h-masia     { --x: 38.134;  --y: 0;       --w: 209.546; --h: 129.922; }
.h-anells    { --x: 116.423; --y: 182.455; --w: 137.766; --h: 85.414; }
.h-aperitiu  { --x: 307.989; --y: 258.745; --w: 74.438;  --h: 118.164; }
.h-banquet   { --x: 252.595; --y: 408.633; --w: 122.516; --h: 123.133; }
.h-festa     { --x: 191.984; --y: 559.14;  --w: 126.414; --h: 109.352; }

.h-the-end {
  --x: 221.67; --y: 709.797; --w: 118.695; --h: 109.203;
  transform: rotate(32.913deg);
}

/* La imatge va dins d'un embolcall perquè es pugui gronxar des del punt on
   els cordills toquen la línia, sense perdre el gir de Canva */
.h-the-end img {
  width: 100%;
  height: 100%;
  transform-origin: 47.6% 1%;
}

/* Rectangle del color del fons entre la línia i la icona (com a Canva) */
.h-tapa {
  --w: 73.46; --h: 102.6;
  background: var(--fons-horari);
}

.h-linia-llarga {
  --x: 20.2216; --y: 448.83; --w: 664.734; --h: 220.618;
  transform: rotate(90deg);
  overflow: hidden;
}

.h-linia-llarga img {
  width: 100%;
  height: calc(262.57 * var(--g));
  max-width: none;
}

.h-linia-curta {
  --x: 49.5953; --y: 70.6239; --w: 98.0704; --h: 183.984;
  transform: rotate(-136.94deg);
}

.h-linia-curta__gir {
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}

.h-linia-curta__retall {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.h-linia-curta__retall img {
  position: absolute;
  left: 0;
  top: calc(-2.6955 * var(--g));
  width: calc(513.71 * var(--g));
  height: calc(202.914 * var(--g));
  max-width: none;
}

/* Caixa tan ampla com el text, centrada a --cx (transform, perquè les
   animacions fan servir la propietat translate) */
.h-txt {
  position: absolute;
  left: calc(var(--ox) + var(--cx) * var(--g));
  top: calc(var(--y) * var(--g));
  width: max-content;
  transform: translateX(-50%);
  font-size: calc(32 * var(--g));
  line-height: calc(35 * var(--g));
  text-align: center;
  white-space: nowrap;
}

.h-hora { font-family: var(--font-text); }
.h-nom  { font-family: var(--font-titol); }

/* Horari horitzontal (escriptori) -------------------------------------------
   Sis parades en fila, amb la mateixa distància entre un text i el següent.
   La línia (SVG) passa per l'alçada 70 u, pel centre de cada icona: js/main.js
   la recalcula segons on queden les icones. La tapa de cada icona té la
   silueta del dibuix (clip-path calculat a partir de la transparència del
   PNG) i el color del fons, i va entre la línia i la icona.
   Ordre de capes: "The End" (0) < línia (1) < parades amb tapa (2). */

.horari__fila {
  display: none;
}

@media (min-width: 64em) {
  .horari__lienzo {
    display: none;
  }

  .horari__fila {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: calc(1060 * var(--u));
    margin: calc(40 * var(--u)) auto 0;
  }
}

.hf-linia {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(170 * var(--u));
  overflow: visible;
}

.hf-traç {
  fill: none;
  stroke: var(--vermell);
  stroke-width: 6.5;
  stroke-linecap: round;
}

.hf-fletxa {
  fill: var(--vermell);
}

/* L'amplada de cada parada és la del seu text: les icones (absolutes) no hi
   compten, i així space-between deixa el mateix espai entre textos. */
.hf-parada {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hf-icona {
  position: relative;
  width: 100%;
  height: calc(162 * var(--u));
}

/* Icona i tapa comparteixen caixa, centrada a l'alçada de la línia.
   (Centrades amb left, no amb transform, per poder-les animar amb
   scale/rotate/translate sense que es moguin de lloc.) */
.hf-icona img,
.hf-tapa {
  position: absolute;
  top: calc((70 - var(--h) / 2) * var(--u));
  left: calc(50% - var(--w) * var(--u) / 2);
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  max-width: none;
}

.hf-tapa {
  background: var(--fons-horari);
}

.hf-masia    { --w: 189.4; --h: 117.4; }
.hf-anells   { --w: 124.5; --h: 77.2; }
.hf-aperitiu { --w: 67.3;  --h: 106.8; }
.hf-banquet  { --w: 110.8; --h: 111.3; }
.hf-festa    { --w: 114.3; --h: 98.9; }

.hf-masia .hf-tapa {
  clip-path: polygon(24.8% 0.2%,24.8% 3.8%,23.8% 7.3%,23.8% 10.9%,23.8% 14.3%,23.9% 18%,24% 21.6%,24.3% 25.1%,24.1% 28.7%,23.5% 32.1%,22.9% 35.8%,23% 39.4%,24% 42.8%,24.1% 46.5%,24.3% 50.1%,24.4% 53.5%,14.5% 57.2%,14.4% 60.6%,13.4% 64.2%,10.5% 67.9%,9.1% 71.3%,9.1% 74.9%,9.6% 78.4%,7.9% 82%,7.8% 85.7%,7.5% 89.1%,7% 92.7%,0% 96.2%,0.4% 99.8%,99.5% 99.8%,100% 96.2%,98% 92.7%,96.4% 89.1%,96.1% 85.7%,96% 82%,95.5% 78.4%,93.6% 74.9%,93.8% 71.3%,93.8% 67.9%,93.3% 64.2%,92.3% 60.6%,88.8% 57.2%,88.8% 53.5%,88.6% 50.1%,78.4% 46.5%,78.1% 42.8%,78% 39.4%,79.8% 35.8%,79.1% 32.1%,78% 28.7%,77% 25.1%,76.8% 21.6%,76.6% 18%,76.5% 14.3%,76.3% 10.9%,76% 7.3%,75.9% 3.8%,75.3% 0.2%);
}

.hf-anells .hf-tapa {
  clip-path: polygon(9.9% 0%,8.4% 3.6%,7.3% 7.1%,7% 10.7%,7.1% 14.3%,8.1% 17.8%,9% 21.4%,6.4% 25.1%,4.5% 28.5%,3.1% 32.1%,2.4% 35.6%,2.3% 39.2%,6.1% 42.8%,0.3% 46.3%,0% 49.9%,0% 53.5%,0% 57%,0% 60.6%,0% 64.2%,0.1% 67.7%,0.5% 71.3%,1.1% 74.9%,1.9% 78.4%,2.9% 82%,4.3% 85.5%,6.6% 89.1%,10.1% 92.7%,14.5% 96.2%,21.4% 99.8%,77.8% 99.8%,85.1% 96.2%,88.5% 92.7%,91.1% 89.1%,93.1% 85.5%,94.1% 82%,95.1% 78.4%,96.6% 74.9%,98.1% 71.3%,99.1% 67.7%,99.9% 64.2%,100% 60.6%,99.5% 57%,99.5% 53.5%,99.5% 49.9%,98.9% 46.3%,98.1% 42.8%,97% 39.2%,95.4% 35.6%,93.5% 32.1%,91.4% 28.5%,88.9% 25.1%,86% 21.4%,82.3% 17.8%,78.1% 14.3%,73.9% 10.7%,38.4% 7.1%,38.4% 3.6%,37.4% 0%);
}

.hf-aperitiu .hf-tapa {
  clip-path: polygon(18.7% 0%,3.2% 3.6%,0.4% 7.1%,0% 10.8%,0% 14.3%,0.2% 17.9%,0.8% 21.4%,1.6% 25%,2.6% 28.5%,5.4% 32.1%,12.7% 35.6%,26.6% 39.3%,18.5% 42.8%,17.7% 46.4%,18.1% 50%,20.9% 53.5%,27% 57.1%,38% 60.6%,35% 64.3%,32.6% 67.8%,32.4% 71.4%,45.7% 74.9%,45.3% 78.5%,27.8% 82%,14.9% 85.6%,8.5% 89.1%,7.6% 92.8%,7.8% 96.3%,13.1% 99.9%,75% 99.9%,84.3% 96.3%,86.1% 92.8%,86.1% 89.1%,83.5% 85.6%,74.6% 82%,52.1% 78.5%,51.9% 74.9%,63.6% 71.4%,63.6% 67.8%,62.2% 64.3%,58.8% 60.6%,69.6% 57.1%,76.3% 53.5%,78.9% 50%,78.9% 46.4%,77.1% 42.8%,66% 39.3%,78.5% 35.6%,90.1% 32.1%,97.2% 28.5%,98.8% 25%,99.6% 21.4%,100% 17.9%,100% 14.3%,100% 10.8%,99.4% 7.1%,96.4% 3.6%,83.5% 0%);
}

.hf-banquet .hf-tapa {
  clip-path: polygon(50.4% 0%,50.4% 3.5%,31.5% 7.1%,23.5% 10.6%,23.5% 14.3%,23.4% 17.8%,23.7% 21.4%,24.9% 24.9%,32.8% 28.5%,33.2% 32%,18.1% 35.6%,10.6% 39.1%,7.2% 42.8%,5.8% 46.3%,4.6% 49.9%,3.8% 53.4%,2.9% 56.9%,1.9% 60.5%,0.9% 64%,0.1% 67.6%,0.1% 71.1%,1.9% 74.8%,4.4% 78.3%,4.4% 81.9%,4.5% 85.4%,10.3% 89%,17.1% 92.5%,23.1% 96.1%,39.4% 99.6%,77.8% 99.6%,79.8% 96.1%,84.5% 92.5%,88.3% 89%,95.4% 85.4%,97.7% 81.9%,99.9% 78.3%,100% 74.8%,99.9% 71.1%,99.5% 67.6%,99% 64%,98.6% 60.5%,98.1% 56.9%,97.6% 53.4%,97% 49.9%,94.7% 46.3%,92% 42.8%,83.2% 39.1%,78.5% 35.6%,79.1% 32%,76.9% 28.5%,75.9% 24.9%,72.6% 21.4%,60.1% 17.8%,60.1% 14.3%,60.1% 10.6%,59.9% 7.1%,59.9% 3.5%,59.7% 0%);
}

.hf-festa .hf-tapa {
  clip-path: polygon(16.5% 0%,16.5% 3.6%,17.6% 7.1%,6.5% 10.7%,5.4% 14.2%,4.1% 17.8%,3.4% 21.4%,3.1% 24.9%,2.9% 28.6%,2.6% 32%,2.1% 35.7%,1.5% 39.3%,0.8% 42.8%,0% 46.4%,0% 50%,13.5% 53.5%,13.3% 57.1%,12.8% 60.6%,12.3% 64.2%,11.5% 67.8%,10.5% 71.3%,9.1% 74.9%,6.8% 78.4%,3.8% 82%,1.6% 85.7%,0.5% 89.1%,0.6% 92.8%,14.9% 96.2%,71.6% 99.9%,82.3% 99.9%,82.1% 96.2%,79.8% 92.8%,80.6% 89.1%,81.4% 85.7%,82% 82%,82.3% 78.4%,82.4% 74.9%,82.4% 71.3%,82.1% 67.8%,81.6% 64.2%,80.6% 60.6%,79.6% 57.1%,78.4% 53.5%,100% 50%,100% 46.4%,97.9% 42.8%,94% 39.3%,85.8% 35.7%,81.8% 32%,79.6% 28.6%,77.5% 24.9%,75.3% 21.4%,67.4% 17.8%,66.6% 14.2%,66.9% 10.7%,66.8% 7.1%,65.9% 3.6%,22% 0%);
}

/* "The End" penja de la línia, per sota seu. Es retalla el 4,1% de dalt (on
   els cordills comencen a alçades diferents) i el tall queda just a l'eix de
   la línia, girat segons la seva inclinació (--gir, el calcula main.js). El
   punt d'enganx és el mig dels dos cordills: 47,6% de l'amplada. */
.hf-the-end {
  z-index: 0;
}

.hf-the-end .hf-icona img {
  --w: 96.6; --h: 88.8;
  top: calc((70 - 0.041 * var(--h)) * var(--u));
  left: calc(50% - 0.476 * var(--w) * var(--u));
  clip-path: inset(4.1% 0 0 0);
  transform: rotate(var(--gir, -3deg));
  transform-origin: 47.6% 4.1%;
}

.hf-hora {
  font-family: var(--font-text);
  font-size: calc(24 * var(--u));
  line-height: calc(26.4 * var(--u));
}

.hf-nom {
  margin-top: calc(4 * var(--u));
  font-family: var(--font-titol);
  font-size: calc(28 * var(--u));
  line-height: 1.25;
  white-space: nowrap;
}

/* --- Horari animat -----------------------------------------------------------
   La línia es dibuixa sola i cada parada apareix quan la línia hi arriba:
   icona amb rebot, hora que gira com un rellotge de paletes i nom que surt
   com tinta que s'asseca. Després cada icona fa el seu gest (els anells
   bateguen, la copa brinda, la taula fa un saltet, la parella balla i el
   cartell "The End" es gronxa) i la punta de la fletxa apareix amb un rebot.

   Les animacions estan aturades (paused) a l'estat inicial fins que main.js
   afegeix .horari--anima quan la secció entra a la pantalla. Només amb JS i
   si l'usuari no ha demanat menys moviment; si no, l'horari es veu estàtic.

   Ritme: mòbil → --d (segons) a cada element de l'HTML.
          escriptori → --t (0–1, posició de la parada al llarg de la línia,
          la calcula main.js) dins de --inici + --durada. */

@media (prefers-reduced-motion: no-preference) {
  .js .horari {
    --rebot: cubic-bezier(0.34, 1.56, 0.64, 1);
    --suau: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* !important: el shorthand "animation" de cada element tornaria a posar
     running */
  .js .horari:not(.horari--anima) * {
    animation-play-state: paused !important;
  }

  .js .horari__lienzo,
  .js .hf-parada {
    perspective: calc(600 * var(--u));
  }

  /* Mòbil: retards a partir de --d */
  .js .horari__lienzo {
    --inici-el: calc(var(--d, 0) * 1s);
  }

  .js .horari__lienzo * {
    --inici-el: calc(var(--d, 0) * 1s);
  }

  /* Escriptori: retards a partir de la posició a la línia */
  .js .horari__fila {
    --inici: 0.25s;
    --durada: 2.6s;
  }

  .js .hf-parada {
    --inici-el: calc(var(--inici) + var(--t, 0) * var(--durada) - 0.1s);
  }

  /* 1. La línia es dibuixa */
  .js .hf-traç {
    stroke-dasharray: 1;
    animation: dibuix-linia var(--durada) linear var(--inici) both;
  }

  .js .h-linia-llarga img {
    animation: escombrat 2.3s linear var(--inici-el) both;
  }

  .js .h-linia-curta__retall img {
    animation: escombrat-curt 0.55s linear var(--inici-el) both;
  }

  /* 2. Les icones apareixen amb rebot i després fan el seu gest */
  .js .h-masia,
  .js .hf-masia .hf-icona img {
    animation: aparicio-icona 0.55s var(--rebot) var(--inici-el) both;
  }

  .js .h-anells,
  .js .hf-anells .hf-icona img {
    animation:
      aparicio-icona 0.55s var(--rebot) var(--inici-el) both,
      batec 0.9s ease-in-out calc(var(--inici-el) + 0.6s) forwards;
  }

  .js .h-aperitiu,
  .js .hf-aperitiu .hf-icona img {
    transform-origin: 50% 100%;
    animation:
      aparicio-icona 0.55s var(--rebot) var(--inici-el) both,
      brindis 0.9s ease-in-out calc(var(--inici-el) + 0.6s) forwards;
  }

  .js .h-banquet,
  .js .hf-banquet .hf-icona img {
    animation:
      aparicio-icona 0.55s var(--rebot) var(--inici-el) both,
      saltet 0.7s ease-out calc(var(--inici-el) + 0.6s) forwards;
  }

  .js .h-festa,
  .js .hf-festa .hf-icona img {
    animation:
      aparicio-icona 0.55s var(--rebot) var(--inici-el) both,
      ball 1.1s ease-in-out calc(var(--inici-el) + 0.6s) forwards;
  }

  /* "The End" cau i es gronxa penjat de la línia */
  .js .h-the-end img,
  .js .hf-the-end .hf-icona img {
    animation: gronxet 1.7s var(--suau) var(--inici-el) both;
  }

  /* 3. Hores (rellotge de paletes) i noms (tinta) */
  .js .h-hora,
  .js .hf-hora {
    animation: paleta 0.5s var(--suau) calc(var(--inici-el) + 0.12s) both;
  }

  .js .h-nom,
  .js .hf-nom {
    animation: tinta 0.6s var(--suau) calc(var(--inici-el) + 0.22s) both;
  }

  .js .horari__lienzo .h-hora,
  .js .horari__lienzo .h-nom {
    animation-delay: var(--inici-el);
  }

  /* 4. Punta de fletxa */
  .js .hf-fletxa {
    transform-box: fill-box;
    transform-origin: 89.4% 17.6%;
    animation: punta 0.45s var(--rebot) calc(var(--inici) + var(--durada) - 0.05s) both;
  }
}

@keyframes dibuix-linia {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* La línia de mòbil és una imatge: es destapa d'un extrem a l'altre */
@keyframes escombrat {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Del tros curt només se'n veu el 19,1% esquerre (la resta és retallada) */
@keyframes escombrat-curt {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 80.9% 0 0); }
}

@keyframes aparicio-icona {
  0%   { opacity: 0; scale: 0.35; rotate: -8deg; translate: 0 calc(14 * var(--u)); }
  55%  { opacity: 1; scale: 1.12; rotate: 3deg; translate: 0 calc(-3 * var(--u)); }
  78%  { scale: 0.96; rotate: -1deg; translate: 0 0; }
  100% { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; }
}

@keyframes batec {
  0%, 100% { scale: 1; }
  20%      { scale: 1.14; }
  40%      { scale: 0.97; }
  60%      { scale: 1.08; }
  80%      { scale: 1; }
}

@keyframes brindis {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: -12deg; }
  55%      { rotate: 9deg; }
  80%      { rotate: -3deg; }
}

@keyframes saltet {
  0%, 55%, 100% { translate: 0 0; }
  30%           { translate: 0 calc(-8 * var(--u)); }
  72%           { translate: 0 calc(-3 * var(--u)); }
}

@keyframes ball {
  0%, 40%, 80%, 100% { translate: 0 0; rotate: 0deg; }
  20%                { translate: 0 calc(-9 * var(--u)); rotate: -4deg; }
  60%                { translate: 0 calc(-9 * var(--u)); rotate: 4deg; }
}

@keyframes gronxet {
  0%   { opacity: 0; rotate: -38deg; }
  12%  { opacity: 1; }
  30%  { rotate: 22deg; }
  48%  { rotate: -13deg; }
  64%  { rotate: 7deg; }
  80%  { rotate: -3deg; }
  92%  { rotate: 1deg; }
  100% { opacity: 1; rotate: 0deg; }
}

@keyframes paleta {
  from { opacity: 0; rotate: x 90deg; }
  to   { opacity: 1; rotate: x 0deg; }
}

@keyframes tinta {
  from { opacity: 0; filter: blur(calc(6 * var(--u))); translate: 0 calc(10 * var(--u)); }
  to   { opacity: 1; filter: blur(0); translate: 0 0; }
}

@keyframes punta {
  0%   { opacity: 0; scale: 0.2; }
  60%  { opacity: 1; scale: 1.25; }
  100% { opacity: 1; scale: 1; }
}

/* --- Assistència: text i botó (els fa servir el formulari) ----------------- */

.assistencia__text {
  width: calc(385 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  margin: calc(42 * var(--u)) auto 0;
  font-size: calc(29.4 * var(--u));
  line-height: calc(32 * var(--u));
}

/* Escriptori: mateixa columna que "El nostre dia" */
@media (min-width: 48em) {
  .assistencia__text {
    width: var(--columna-escriptori);
  }
}

.boto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(369 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  height: calc(77 * var(--u));
  margin: calc(40 * var(--u)) auto 0;
  border-radius: 10em;
  background: var(--crema);
  color: var(--vermell);
  font-size: calc(37.1 * var(--u));
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 0.03em;
  text-underline-offset: 0.12em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boto:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.875rem rgb(0 0 0 / 0.18);
}

.boto:focus-visible {
  outline-color: var(--crema);
  outline-offset: 0.25rem;
}

/* --- Dress code -------------------------------------------------------------
   Mòbil i tauleta: títol, carrusel i text un sota l'altre.
   Escriptori (>= 64em): carrusel a l'esquerra i text a la dreta, com a Canva.
   Els 4 collages de Canva van en un carrusel (scroll-snap + js/main.js). */

.dress-code {
  padding: calc(58 * var(--u)) 0 calc(65 * var(--u));
  background: var(--fons-clar);
}

.dress-code__contingut {
  display: grid;
  justify-items: center;
  row-gap: calc(40 * var(--u));
  margin-top: calc(30 * var(--u));
}

.dress-code__text {
  width: calc(370 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  font-size: calc(26 * var(--u));
  line-height: calc(36 * var(--u));
}

.dress-code__text p + p {
  margin-top: calc(36 * var(--u));
}

.dress-code__text strong {
  font-weight: 700;
}

@media (min-width: 48em) {
  .dress-code__text {
    width: var(--columna-escriptori);
  }
}

@media (min-width: 64em) {
  .dress-code__contingut {
    grid-template-columns: calc(470 * var(--u)) calc(573 * var(--u));
    column-gap: calc(70 * var(--u));
    justify-content: center;
    align-items: center;
  }

  .dress-code__text {
    width: 100%;
    max-width: none;
  }
}

/* Carrusel */
.carrusel {
  position: relative;
  width: calc(470 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  container-type: inline-size;
}

.carrusel__pista {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.carrusel__pista:focus-visible {
  outline: 0.125rem solid var(--vermell);
  outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { scroll-behavior: auto; }
}

.carrusel__diapo {
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  margin: 0;
  aspect-ratio: 1.1;
  container-type: size;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Collage: capes posicionades en % de la caixa (--l, --t, --w, --h) */
.collage {
  position: relative;
  width: min(92cqw, calc(92cqh * var(--ratio)));
  aspect-ratio: var(--ratio);
}

.collage > *,
.collage__marc > img {
  position: absolute;
  top: calc(var(--t) * 1%);
  left: calc(var(--l) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  max-width: none;
}

.collage > * {
  transform: rotate(var(--gir, 0deg));
}

.collage__marc {
  overflow: hidden;
}

/* Fletxes: centrades a l'alçada de la diapositiva (amplada / 1,1 / 2) */
.carrusel__boto {
  position: absolute;
  top: calc(50cqw / 1.1);
  display: grid;
  place-items: center;
  width: max(2.75rem, calc(46 * var(--u)));
  aspect-ratio: 1;
  padding: 0;
  border: 0.0625rem solid var(--vermell);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fons-clar) 85%, transparent);
  color: var(--vermell);
  cursor: pointer;
  translate: 0 -50%;
  transition: background 0.2s, color 0.2s;
}

.carrusel__boto--ant { left: 0; }
.carrusel__boto--seg { right: 0; }

.carrusel__boto svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carrusel__boto:hover {
  background: var(--vermell);
  color: var(--fons-clar);
}

.carrusel__boto:focus-visible,
.carrusel__punts button:focus-visible {
  outline: 0.125rem solid var(--vermell);
  outline-offset: 0.1875rem;
}

@media (min-width: 64em) {
  .carrusel {
    max-width: none;
  }

  .carrusel__boto--ant { translate: -50% -50%; }
  .carrusel__boto--seg { translate: 50% -50%; }
}

/* Punts */
.carrusel__punts {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: calc(14 * var(--u));
}

.carrusel__punts button {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.carrusel__punts button::before {
  content: '';
  width: max(0.5rem, calc(9 * var(--u)));
  aspect-ratio: 1;
  border: 0.0625rem solid var(--vermell);
  border-radius: 50%;
  transition: background 0.2s, scale 0.2s;
}

.carrusel__punts button[aria-current="true"]::before {
  background: var(--vermell);
  scale: 1.15;
}

/* --- Regal ---------------------------------------------------------------- */

/* Sense padding inferior: la tira de fotos toca la secció de Contacte */
.regal {
  padding-top: calc(51 * var(--u));
}

.regal__text {
  width: calc(384 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  margin: calc(39 * var(--u)) auto 0;
  font-size: calc(26.7 * var(--u));
  line-height: calc(37 * var(--u));
  text-align: justify;
}

@media (min-width: 48em) {
  .regal__text {
    width: var(--columna-escriptori);
  }
}

.regal__iban {
  margin-top: calc(37 * var(--u));
  font-size: calc(26.7 * var(--u));
  line-height: calc(37 * var(--u));
}

.regal__fotos {
  margin-top: calc(21 * var(--u));
}

/* Tira de fotos: --i és la foto on som (la mou main.js) */
.tira-fotos {
  --visibles: 3;
  overflow: hidden;
  container-type: inline-size;
}

@media (min-width: 48em) {
  .tira-fotos {
    --visibles: 5;
  }
}

.tira-fotos__pista {
  display: flex;
  transform: translateX(calc(var(--i, 0) * -100cqw / var(--visibles)));
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.tira-fotos__pista--quieta {
  transition: none;
}

.tira-fotos__pista img {
  flex: none;
  width: calc(100cqw / var(--visibles));
  max-width: none;
  aspect-ratio: 228.4 / 324.3;
  object-fit: cover;
}

/* --- Contacte -------------------------------------------------------------
   Secció clara (Canva): títol, foto ovalada, text i els dos noms amb la
   icona de WhatsApp, centrats. */

.contacte {
  padding: calc(28 * var(--u)) 0 calc(58 * var(--u));
}

/* El·lipse inscrita en un marc de 475 × 601 (com el retall de Canva) */
.contacte__foto {
  width: calc(164 * var(--u));
  margin: calc(25 * var(--u)) auto 0;
  aspect-ratio: 475.1 / 601.14;
  object-fit: cover;
  border-radius: 50%;
}

.contacte__text {
  width: calc(359 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  margin: calc(30 * var(--u)) auto 0;
  font-size: calc(24 * var(--u));
  line-height: calc(26 * var(--u));
  text-align: justify;
}

@media (min-width: 48em) {
  .contacte__text {
    width: var(--columna-escriptori);
  }
}

.contacte__noms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(16 * var(--u)) calc(28 * var(--u));
  margin-top: calc(36 * var(--u));
  font-size: calc(29.3 * var(--u));
  line-height: calc(32 * var(--u));
}

/* Botons de WhatsApp: pastilla crema; en passar-hi per sobre s'omplen de
   vermell, pugen una mica i la icona "truca". */
.boto-whatsapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(28 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: 10em;
  background: var(--crema);
  color: var(--vermell);
  text-decoration: none;
  box-shadow: 0 0.125rem 0.5rem rgb(159 13 9 / 0.12);
  transition: background 0.25s, color 0.25s, translate 0.25s, box-shadow 0.25s;
}

.boto-whatsapp svg {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  fill: currentColor;
}

.boto-whatsapp:hover,
.boto-whatsapp:focus-visible {
  background: var(--vermell);
  color: var(--crema);
  translate: 0 -0.1875rem;
  box-shadow: 0 0.5rem 1.25rem rgb(159 13 9 / 0.28);
}

.boto-whatsapp:focus-visible {
  outline: 0.125rem solid var(--vermell);
  outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .boto-whatsapp:hover svg,
  .boto-whatsapp:focus-visible svg {
    animation: trucada 0.7s ease-in-out;
  }
}

@keyframes trucada {
  0%, 100% { rotate: 0deg; }
  15%      { rotate: -16deg; }
  30%      { rotate: 14deg; }
  45%      { rotate: -10deg; }
  60%      { rotate: 8deg; }
  75%      { rotate: -4deg; }
}


/* --- Formulari d'assistència ------------------------------------------------
   Preguntes en columna, alineades a l'esquerra (Canva). Camps de text amb
   una línia a sota i opcions com a pastilles. */

.formulari {
  padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
}

.formulari__form {
  width: calc(371 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  margin: calc(38 * var(--u)) auto 0;
  text-align: left;
}

@media (min-width: 48em) {
  .formulari__form {
    width: var(--columna-escriptori);
  }
}

.camp {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.camp + .camp {
  margin-top: calc(34 * var(--u));
}

.camp__pregunta {
  display: block;
  padding: 0;
  font-size: calc(29.3 * var(--u));
  line-height: calc(32 * var(--u));
}

/* Preguntes obligatòries: asterisc darrere la pregunta */
.obligatori {
  margin-left: 0.15em;
  opacity: 0.8;
}

/* Error sota la pregunta: crema (el fons és vermell) amb una icona "!" */
.camp__error {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-top: calc(10 * var(--u));
  font-size: max(0.875rem, calc(19 * var(--u)));
  line-height: 1.3;
}

.camp__error[hidden] {
  display: none;
}

.camp__error::before {
  content: '!';
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: var(--crema);
  color: var(--vermell);
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .camp__error {
    animation: avis 0.35s ease-out;
  }
}

@keyframes avis {
  0%, 100% { translate: 0 0; }
  25%      { translate: -0.25rem 0; }
  50%      { translate: 0.25rem 0; }
  75%      { translate: -0.125rem 0; }
}

/* Camp pendent: línia o vora crema més marcada (sense moure res) */
.camp__text[aria-invalid="true"] {
  border-bottom-color: var(--crema);
  box-shadow: 0 0.0625rem 0 var(--crema);
}

.camp--error .opcio span {
  border-color: var(--crema);
  box-shadow: inset 0 0 0 0.0625rem var(--crema);
}

.camp__parella {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--u));
}

.camp__text {
  display: block;
  width: 100%;
  margin-top: calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border: 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--crema) 70%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--crema);
  font: inherit;
  font-size: calc(24 * var(--u));
  line-height: calc(30 * var(--u));
}

.camp__text::placeholder {
  color: color-mix(in srgb, var(--crema) 55%, transparent);
}

.camp__text:focus {
  outline: none;
  border-bottom-color: var(--crema);
  box-shadow: 0 0.0625rem 0 var(--crema);
}

.camp__text--llarg {
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border: 0.0625rem solid color-mix(in srgb, var(--crema) 70%, transparent);
  border-radius: calc(8 * var(--u));
  resize: vertical;
}

.camp__text--llarg:focus {
  border-color: var(--crema);
  box-shadow: none;
}

/* "Altres": el camp de text només es veu si es tria aquesta opció */
.camp__altres {
  display: none;
}

.camp:has([data-altres]:checked) .camp__altres {
  display: block;
}

.camp__opcions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  margin-top: calc(12 * var(--u));
}

.opcio {
  position: relative;
  cursor: pointer;
}

.opcio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcio span {
  display: inline-block;
  padding: calc(6 * var(--u)) calc(18 * var(--u));
  border: 0.0625rem solid color-mix(in srgb, var(--crema) 70%, transparent);
  border-radius: 10em;
  font-size: calc(22 * var(--u));
  line-height: calc(28 * var(--u));
  transition: background 0.2s, color 0.2s;
}

.opcio:hover span {
  border-color: var(--crema);
}

.opcio input:checked + span {
  background: var(--crema);
  color: var(--vermell);
}

.opcio input:focus-visible + span {
  outline: 0.125rem solid var(--crema);
  outline-offset: 0.1875rem;
}

.formulari__enviar {
  margin-top: calc(44 * var(--u));
  border: 0;
  cursor: pointer;
  font-family: var(--font-text);
}

.formulari__enviar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.formulari__estat {
  margin-top: calc(18 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(30 * var(--u));
  text-align: center;
}

.formulari__estat:empty {
  display: none;
}

.formulari__estat a {
  color: inherit;
}

/* Després d'enviar, de la secció només queden el títol i el missatge de
   gràcies (ni preguntes, ni botó, ni la data límit). main.js hi posa la
   classe i fa que la secció quedi a la vista. */
.formulari--enviat .formulari__form > :not(.formulari__estat),
.formulari--enviat .formulari__nota {
  display: none;
}

.formulari--enviat .formulari__estat {
  margin-top: 0;
  font-size: calc(29.3 * var(--u));
  line-height: calc(36 * var(--u));
}

.formulari__estat:focus {
  outline: none;
}

.formulari__nota {
  margin-top: calc(40 * var(--u));
}

/* --- Les fotos --------------------------------------------------------------
   Text i, a sota, el conjunt "fes clic aquí" + fletxa + polaroid amb les
   posicions de Canva (coordenades en u, des de la cantonada del conjunt).
   Tot el conjunt és l'enllaç; el text no va subratllat perquè el reclam és
   la polaroid. */

.fotos {
  padding: calc(43.7 * var(--u)) 0 calc(44 * var(--u));
}

.fotos__text {
  width: calc(359 * var(--u));
  max-width: calc(100% - 2 * var(--marge));
  margin: calc(44.8 * var(--u)) auto 0;
  font-size: calc(24 * var(--u));
  line-height: calc(26 * var(--u));
  text-align: justify;
}

.fotos__text--segon {
  margin-top: calc(26 * var(--u));
}

/* Escriptori: una mica més ample que la columna habitual (680 u) perquè
   "Us animem a penjar aquí… el gran dia." càpiga en una sola línia (fa 714 u)
   i "dia" no quedi sol. En mòbil, "gran dia" va unit amb un espai fix. */
@media (min-width: 48em) {
  .fotos__text {
    width: calc(730 * var(--u));
  }
}

.fotos__enllac {
  position: relative;
  display: block;
  text-decoration: none;
  width: calc(360 * var(--u));
  height: calc(217 * var(--u));
  margin: calc(53.3 * var(--u)) auto 0;
  color: inherit;
}

.fotos__enllac > * {
  position: absolute;
}

.fotos__clic {
  top: 0;
  left: calc(195.5 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(26 * var(--u));
  white-space: nowrap;
}

.fotos__fletxa {
  top: calc(43.3 * var(--u));
  left: calc(179.4 * var(--u));
  width: calc(81.8 * var(--u));
  height: calc(117.7 * var(--u));
  max-width: none;
  transform: rotate(-171.81deg);
}

.fotos__polaroid {
  top: calc(49.6 * var(--u));
  left: calc(17 * var(--u));
  width: calc(143.1 * var(--u));
  height: calc(167.4 * var(--u));
  max-width: none;
  transition: rotate 0.3s ease, scale 0.3s ease;
}

.fotos__enllac:hover .fotos__polaroid {
  rotate: -4deg;
  scale: 1.05;
}

.fotos__enllac:focus-visible {
  outline: 0.125rem solid var(--crema);
  outline-offset: 0.5rem;
}

/* --- Peu ------------------------------------------------------------------ */

.peu {
  position: relative;
  min-height: calc(704 * var(--u));
  padding-top: calc(111 * var(--u));
  overflow: hidden;
  background: var(--fons-clar);
}

.peu__fons {
  position: absolute;
  top: calc(54.4 * var(--u));
  left: 50%;
  width: calc(943.7 * var(--u));
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.26;
  pointer-events: none;
}

.peu .titol {
  position: relative;
  font-size: calc(38.1 * var(--u));
  line-height: calc(52.9 * var(--u));
}

.peu__data {
  margin-top: calc(40 * var(--u));
}

.peu .peu__frase {
  margin-top: calc(46 * var(--u));
  font-size: calc(34.3 * var(--u));
  line-height: calc(47.9 * var(--u));
}

.peu__monograma {
  position: relative;
  width: calc(104.4 * var(--u));
  height: calc(82.2 * var(--u));
  margin: calc(44.2 * var(--u)) auto 0;
  overflow: hidden;
}

.peu__monograma img {
  position: absolute;
  top: calc(-23.9 * var(--u));
  left: calc(-11.75 * var(--u));
  width: calc(124.4 * var(--u));
  max-width: none;
}