/* =================================================================
   Lo Maset — MODE NADAL
   -----------------------------------------------------------------
   PER ENCENDRE'L:  a index.html, <html lang="ca" class="nadal">
   PER APAGAR-LO:   treu la paraula  nadal  d'aquesta mateixa línia.

   Tot penja de  html.nadal : sense la classe, la web torna exactament
   a com era i aquest full no canvia absolutament res.

   CRITERI: paper crema com la resta de la web, vermell de la marca i
   un daurat fosc. Res de fons negre, i res de vermell + verd + daurat
   alhora, que és el que converteix qualsevol cosa en clipart.
   Icones: Tabler Icons (MIT) i Lucide (ISC), traçades, no dibuixades.
   ================================================================= */

.xmas { display: none; }
/* OJO: el display de cada peça es declara a la seva pròpia regla de sota.
   Una regla genèrica 'html.nadal .xmas { display: block }' tindria MÉS
   especificitat que '.xmas-hero { display: grid }' i li menjaria el centrat.
   Va passar: tot el bloc quedava arrambat a l'esquerra. */

html.nadal {
  --xm-paper:   #FDFAF6;
  --xm-paper-2: #F4EADC;
  --xm-ink:     #4d0f13;
  --xm-red:     #C1272D;
  --xm-gold:    #a9761a;
  --xm-gold-lt: #c99a35;
}

/* ---------- 1. Neu i llums ----------
   La neu la pinta la llibreria Snowflakes (MIT) a js/vendor/. Aquí
   només li posem el llistó de profunditat. */
html.nadal .snowflakes { pointer-events: none; }

/* Garlanda de bombetes penjada a dalt de tot, a tota la web.
   El cable és el gradient de fons; les bombetes les pinta js/nadal.js. */
.xmas-lights {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 30px;
  z-index: 101;                 /* per sobre de la capçalera */
  display: none;
  justify-content: space-between;
  align-items: flex-start;
  padding-inline: 8px;
  pointer-events: none;
}
html.nadal .xmas-lights { display: flex; }
/* El cable */
.xmas-lights::before {
  content: "";
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4a2f17, #6b4522 50%, #4a2f17);
  opacity: 0.75;
}
/* Cada bombeta: casquet + vidre encès */
.xmas-lights i {
  position: relative;
  width: 9px;
  height: 14px;
  margin-top: 5px;
  border-radius: 50% 50% 55% 55% / 42% 42% 58% 58%;
  background: var(--c);
  box-shadow: 0 0 9px 2px color-mix(in srgb, var(--c) 65%, transparent),
              inset 0 -2px 3px rgba(255, 255, 255, 0.55);
  animation: xmas-bulb 2.6s ease-in-out infinite;
  animation-delay: var(--d);
}
.xmas-lights i::before {           /* casquet metàl·lic */
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 4px;
  border-radius: 1px;
  background: linear-gradient(#8d7a5e, #5c4c37);
}
@keyframes xmas-bulb {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.38; }
}
/* La capçalera baixa una mica perquè no li caiguin les bombetes a sobre */
html.nadal .site-header .nav { padding-top: 16px; }

/* ---------- 2. Capçalera ----------
   La web original posa el menú en BLANC mentre no has fet scroll, perquè
   a sota hi ha el hero fosc. Amb la secció de Nadal en clar aquell blanc
   seria invisible: aquí el tornem al vermell de sempre. */
html.nadal .site-header:not(.is-scrolled) .brand,
html.nadal .site-header:not(.is-scrolled) .brand span,
html.nadal .site-header:not(.is-scrolled) .nav-links a { color: var(--red-800); }
html.nadal .site-header:not(.is-scrolled) .nav-links a::after { background: var(--red); }
html.nadal .site-header:not(.is-scrolled) .lang-switch { border-color: var(--red-22); }
html.nadal .site-header:not(.is-scrolled) .lang-btn { color: var(--red-700); }
html.nadal .site-header:not(.is-scrolled) .lang-btn.is-active { background: var(--red); color: #fff; }
html.nadal .site-header:not(.is-scrolled) .nav-toggle {
  border-color: var(--red-22);
  background: var(--red-06);
}
html.nadal .site-header:not(.is-scrolled) .nav-toggle span { background: var(--red); }

/* ---------- 3. LA SECCIÓ DEL LOT ---------- */
html.nadal .xmas-hero { display: grid; }
.xmas-hero {
  position: relative;
  z-index: 5;                /* si no, el hero de sota tapa la congesta */
  min-height: min(92vh, 820px);
  place-items: center;
  overflow: visible;        /* les congestes han de poder sortir */
  text-align: center;
  color: var(--xm-ink);
  background: linear-gradient(180deg,
    #DCE6F0 0%,      /* cel fred de dalt */
    #EDE6E8 26%,
    #F8E6DC 52%,     /* escalfor a prop de l'horitzó */
    #F4E4DE 72%,
    #EDEDEC 100%);
  isolation: isolate;
}

/* Teixit de flocs de neu, molt tènue, en el vermell de la marca */
.xmas-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: var(--xm-red);
  opacity: 0.07;
  pointer-events: none;
}
/* Llum càlida que aixeca el centre del paper */
.xmas-hero__light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(34% 26% at 72% 62%, rgba(255, 238, 206, 0.92), rgba(255, 238, 206, 0) 70%),  /* sol baix */
    radial-gradient(58% 46% at 50% 36%, rgba(255, 255, 255, 0.70), transparent 72%),
    radial-gradient(80% 44% at 50% 0%, rgba(150, 175, 205, 0.16), transparent 72%);
}

/* Boles de Nadal penjades del sostre de la secció.
   Fetes amb CSS (esfera amb reflex + casquet), no amb emojis: els
   emojis plans abaratien la marca i a sobre obliguen a atribució. */
.xmas-bauble {
  position: absolute;
  top: 0;
  z-index: 1;
  width: var(--s, 46px);
  transform-origin: 50% -40px;
  animation: xmas-sway 5.5s ease-in-out infinite;
  will-change: transform;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
.xmas-bauble::before {            /* el fil */
  content: "";
  display: block;
  width: 1px;
  height: var(--len, 90px);
  margin: 0 auto;
  background: linear-gradient(rgba(140, 26, 32, 0), rgba(140, 26, 32, 0.45));
}
.xmas-bauble::after {             /* l'esfera */
  content: "";
  display: block;
  width: var(--s, 46px);
  height: var(--s, 46px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.75), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 60% 72%, rgba(0,0,0,0.25), rgba(0,0,0,0) 55%),
    var(--c, #C1272D);
  box-shadow: 0 10px 22px -12px rgba(77, 15, 19, 0.6);
}
@keyframes xmas-sway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}
.xmas-bauble--1 { left: 4%;   --s: 56px; --len: 110px; --c: #C1272D; --d: 0s;   }
.xmas-bauble--2 { left: 13%;  --s: 34px; --len: 205px; --c: #a9761a; --d: .9s;  }
.xmas-bauble--3 { left: 22%;  --s: 44px; --len: 145px; --c: #2f7d52; --d: 1.6s; }
.xmas-bauble--4 { left: 31%;  --s: 26px; --len: 86px;  --c: #C1272D; --d: .35s; }
.xmas-bauble--5 { left: 48%;  --s: 30px; --len: 62px;  --c: #a9761a; --d: 2.1s; }
.xmas-bauble--6 { right: 30%; --s: 28px; --len: 92px;  --c: #2f7d52; --d: 1.1s; }
.xmas-bauble--7 { right: 20%; --s: 48px; --len: 168px; --c: #C1272D; --d: .6s;  }
.xmas-bauble--8 { right: 11%; --s: 32px; --len: 118px; --c: #a9761a; --d: 1.9s; }
.xmas-bauble--9 { right: 3%;  --s: 52px; --len: 134px; --c: #2f7d52; --d: .2s;  }
@media (max-width: 900px) {
  .xmas-bauble--2, .xmas-bauble--4, .xmas-bauble--5,
  .xmas-bauble--6, .xmas-bauble--8 { display: none; }
}

/* Compte enrere */
.xmas-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.42rem 1.1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--red-800);
  background: rgba(193, 39, 45, 0.07);
  border: 1px solid var(--red-14);
  /* Xifres de la mateixa amplada: si no, el comptador balla cada segon perquè
     el '1' és més estret que el '8' i la pastilla s'encongeix i s'eixampla. */
  font-variant-numeric: tabular-nums;
}
.xmas-countdown svg { width: 15px; height: 15px; color: var(--xm-red); flex: none; }

.xmas-hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: clamp(6.5rem, 15vh, 9rem) clamp(1.25rem, 5vw, 2.5rem) clamp(13rem, 30vh, 19rem);
  max-width: 54rem;
}

.xmas-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-indent: 0.4em;      /* compensa l'espaiat de l'última lletra */
  color: #8a5f12;          /* daurat fosc: el clar no es llegia sobre crema */
  margin: 0 0 1rem;
}

.xmas-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;          /* a aquesta mida el bold embruta */
  font-size: clamp(2.9rem, 1rem + 8vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0;
  /* Un SOL vermell. Abans n'hi havia dos (granat fosc + vermell marca) i
     es barallaven. La jerarquia la fa la cursiva, no el color. */
  color: var(--xm-red);
}
.xmas-title em {
  display: block;
  font-style: italic;
  font-weight: 600;
}

/* El pes, entre dos filets daurats */
.xmas-weight {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.8rem);
  width: min(100%, 26rem);
  margin: clamp(1rem, 2.6vh, 1.5rem) 0 0;
}
.xmas-weight::before,
.xmas-weight::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 118, 26, 0.55));
}
.xmas-weight::after { background: linear-gradient(90deg, rgba(169, 118, 26, 0.55), transparent); }
.xmas-weight i {
  font-style: normal;
  margin: 0 0.5em;
  opacity: 0.45;
}
.xmas-weight span {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 600;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem);
  line-height: 1;
  color: var(--xm-gold);
  white-space: nowrap;
}

/* Preu per quilo, sota el total */
.xmas-preu {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a5f12;
}

.xmas-lead {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  line-height: 1.7;
  max-width: 40ch;
  color: var(--red-700);
  margin: 1.1rem 0 0;
}

.xmas-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem clamp(1.2rem, 4vw, 2.4rem);
}
.xmas-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--red-700);
}
.xmas-list svg { width: 16px; height: 16px; flex: none; color: var(--xm-gold); }

.xmas-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.7rem;
}
.xmas-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease),
              border-color 0.3s var(--ease), color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.xmas-btn--main {
  background: var(--xm-red);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.xmas-btn--main:hover { background: var(--red-600); transform: translateY(-2px); }
.xmas-btn--ghost {
  color: var(--red-800);
  border-color: var(--red-22);
}
.xmas-btn--ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.xmas-btn svg { flex: none; }

.xmas-note {
  margin-top: 1.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(140, 26, 32, 0.55);
}

/* Fila d'ornaments: icones reals de Tabler a mida petita, com el colofó
   gravat d'una etiqueta. Decoració amb mesura. */
.xmas-ornaments {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.6rem);
  width: min(100%, 24rem);
  margin: 1.6rem 0 0;
  color: var(--xm-gold);
}
.xmas-ornaments::before,
.xmas-ornaments::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 118, 26, 0.45));
}
.xmas-ornaments::after { background: linear-gradient(90deg, rgba(169, 118, 26, 0.45), transparent); }
.xmas-ornaments div { display: flex; gap: 0.75rem; align-items: center; }
.xmas-ornaments svg { width: 17px; height: 17px; opacity: 0.9; }
.xmas-ornaments svg:nth-child(2),
.xmas-ornaments svg:nth-child(4) { width: 14px; height: 14px; opacity: 0.6; }

.xmas-down {
  position: absolute;
  z-index: 2;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  color: var(--red-22);
  animation: xmas-bob 3s ease-in-out infinite;
}
@keyframes xmas-bob { 50% { transform: translate(-50%, 7px); } }


/* ---------- ESCENARI: bosc d'avets i congestes de neu ----------
   Tot SVG generat, cap fotografia.

   DOS ERRORS QUE HI HAVIA, apuntats perquè no hi torni a caure:
   · 'preserveAspectRatio: slice' escala per COBRIR la caixa i retalla
     el que sobra — i el que sobrava eren les puntes dels avets. Ara
     l'SVG va amb height:auto i la caixa la mana el viewBox.
   · La congesta sortia per sota però el bloc següent, que es pinta
     DESPRÉS, la tapava. Calia pujar la secció amb z-index. */
.xmas-scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
}
/* Camp de neu continu des de la base dels arbres cap avall. Sense això
   quedava una franja beix (el degradat de la secció) entre el bosc i les
   congestes, i es veia com tres bandes horitzontals de colors diferents. */
.xmas-scene__ground {
  position: absolute;
  left: 0; right: 0;
  bottom: -60px;
  height: clamp(140px, 20vh, 210px);
  background: linear-gradient(180deg, #F3EFE8 0%, #FBF8F3 42%, #FFFDFA 100%);
}
.xmas-scene__trees {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: auto;              /* el viewBox mana: res de retallar */
  display: block;
}
/* TRES profunditats, no dues. Cada capa més llunyana va més clara, més
   desenfocada i més amunt: això és perspectiva atmosfèrica, i és el que
   de debò dóna sensació de bosc en comptes de retallable.
   A dins de cada capa, a més, els avets porten tres verds diferents. */
.xmas-scene__trees--far {
  bottom: 96px;
  opacity: 0.55;
  filter: blur(2.2px);
  transform: scale(1.04);
  transform-origin: bottom center;
}
.xmas-scene__trees--mid {
  bottom: 64px;
  opacity: 0.82;
  filter: blur(0.9px);
  transform: scale(1.02);
  transform-origin: bottom center;
}
.xmas-scene__trees--near { bottom: 38px; }

/* Boira freda entre el bosc i el fons: separa les capes i treu el
   tall sec que tenien al peu. */
.xmas-scene__boira {
  position: absolute;
  left: 0; right: 0;
  bottom: 70px;
  height: 120px;
  background: linear-gradient(180deg, rgba(240, 244, 248, 0) 0%, rgba(238, 243, 248, 0.55) 55%, rgba(236, 242, 248, 0.8) 100%);
}

/* Ombra freda del bosc projectada sobre la neu. Sense això els arbres
   semblen retallats i enganxats, no plantats. */
.xmas-scene__shadow {
  position: absolute;
  left: -2%; right: -2%;
  bottom: 34px;
  height: 54px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(92, 108, 132, 0.30), rgba(92, 108, 132, 0) 72%);
  filter: blur(9px);
}

.xmas-scene__drift {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: clamp(74px, 12vh, 112px);
}
.xmas-scene__drift path { fill: currentColor; }
.xmas-scene__drift--back { bottom: 30px; color: #DFE3E6; }
.xmas-scene__drift--mid  { bottom: -6px; color: #EFF1F1; }
/* Una mica de blau a la base de cada congesta: la neu a l'ombra no és
   grisa, és blava, i és el que li dóna volum. */
.xmas-scene__drift--back path,
.xmas-scene__drift--mid path { filter: drop-shadow(0 -3px 5px rgba(120, 140, 170, 0.28)); }
/* La de davant baixa per sota del límit de la secció i es posa damunt
   del bloc següent: la neu hi reposa a sobre en comptes de tallar-se. */
.xmas-scene__drift--front {
  bottom: -52px;            /* reposa damunt del bloc de sota */
  height: clamp(100px, 16vh, 150px);
  color: #FFFDFA;
  filter: drop-shadow(0 -8px 16px rgba(77, 15, 19, 0.12));
}
@media (max-width: 620px) {
  .xmas-scene__drift--front { bottom: -34px; }
  .xmas-scene__trees--far { display: none; }
}

/* ---------- Els pollastres amb corona ----------
   Model de Quaternius (CC0), pintat amb l'OGL que la web ja porta.
   El carrega js/nadal.js només a escriptori i quan la secció s'acosta.
   Si falla, no es veu res i avall. */
.xmas-chicken {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: clamp(34px, 7vh, 76px);     /* la vora de baix del llenç és la línia de neu */
  height: clamp(250px, 34vh, 400px);
  pointer-events: none;
}
.xmas-chicken canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .xmas-chicken { height: 150px; bottom: 34px; }
}

/* ---------- 4. La parada queda amagada durant les festes ---------- */
html.nadal .order { display: none; }

/* ---------- 5. Cinta de lemes: la vermella de sempre, amb daurat ---------- */
.marquee--xmas { display: none; }
html.nadal .marquee--normal { display: none; }
html.nadal .marquee--xmas { display: block; background: var(--red); color: #fff; }
html.nadal .marquee--xmas .marquee__sep { color: var(--xm-gold-lt); }

/* ---------- 6. Mòbil ---------- */
@media (max-width: 620px) {
  .xmas-hero { min-height: 88vh; }
  .xmas-list { gap: 0.6rem 1.3rem; }
  .xmas-btn { width: 100%; justify-content: center; }
}

/* ---------- 7. Menys moviment ---------- */
@media (prefers-reduced-motion: reduce) {
  .xmas-down { animation: none; }
  .xmas-snow { display: none !important; }
}


/* =================================================================
   DECORACIÓ DE NADAL A TOTA LA PÀGINA
   -----------------------------------------------------------------
   AQUÍ NO ES TOCA RES DEL DISSENY. Tot són pseudo-elements nous
   penjats de html.nadal. Treus la classe i no en queda ni rastre.
   (Comprovat abans: cap d'aquests ::before/::after estava ocupat pel
   full principal. Els dos que sí ho estaven, esquivats.)

   OJO AMB LES COMETES: els SVG van amb cometes SIMPLES i el url()
   amb dobles. Barrejant-les, la cadena del CSS es talla a la primera
   cometa de dins i la regla sencera queda invàlida. Va passar: no es
   veia cap decoració.
   ================================================================= */

/* --- Boles penjades a cada capçalera de secció --- */
html.nadal .section-head,
html.nadal .order__head { position: relative; }
html.nadal .section-head::before,
html.nadal .order__head::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -58px;
  width: min(100%, 720px);
  height: 64px;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64'><line x1='26' y1='0' x2='26' y2='14' stroke='%238c1a20' stroke-opacity='0.45' stroke-width='1'/><rect x='23.6' y='14' width='4.8' height='4' rx='1' fill='%23b98b2e'/><circle cx='26' cy='27' r='9' fill='%23C1272D'/><circle cx='23.03' cy='23.85' r='2.34' fill='%23ffffff' fill-opacity='0.55'/><line x1='70' y1='0' x2='70' y2='30' stroke='%238c1a20' stroke-opacity='0.45' stroke-width='1'/><rect x='67.6' y='30' width='4.8' height='4' rx='1' fill='%23b98b2e'/><circle cx='70' cy='40.5' r='6.5' fill='%23b98b2e'/><circle cx='67.855' cy='38.225' r='1.69' fill='%23ffffff' fill-opacity='0.55'/><line x1='116' y1='0' x2='116' y2='9' stroke='%238c1a20' stroke-opacity='0.45' stroke-width='1'/><rect x='113.6' y='9' width='4.8' height='4' rx='1' fill='%23b98b2e'/><circle cx='116' cy='20.5' r='7.5' fill='%232f7d52'/><circle cx='113.525' cy='17.875' r='1.9500000000000002' fill='%23ffffff' fill-opacity='0.55'/><line x1='160' y1='0' x2='160' y2='24' stroke='%238c1a20' stroke-opacity='0.45' stroke-width='1'/><rect x='157.6' y='24' width='4.8' height='4' rx='1' fill='%23b98b2e'/><circle cx='160' cy='34' r='6' fill='%23C1272D'/><circle cx='158.02' cy='31.9' r='1.56' fill='%23ffffff' fill-opacity='0.55'/><line x1='206' y1='0' x2='206' y2='17' stroke='%238c1a20' stroke-opacity='0.45' stroke-width='1'/><rect x='203.6' y='17' width='4.8' height='4' rx='1' fill='%23b98b2e'/><circle cx='206' cy='29.5' r='8.5' fill='%23b98b2e'/><circle cx='203.195' cy='26.525' r='2.21' fill='%23ffffff' fill-opacity='0.55'/></svg>");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 240px 64px;
}

/* --- Neu acumulada damunt de les targetes --- */
html.nadal .value-card,
html.nadal .step-card,
html.nadal .testimonial,
html.nadal .faq-item,
html.nadal .recipe-card { position: relative; }

html.nadal .value-card::before,
html.nadal .step-card::after,
html.nadal .testimonial::before,
html.nadal .faq-item::before,
html.nadal .recipe-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 15px;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 15'><path fill='%23ffffff' d='M0,0 H120 V7 C110,12.5 100,4.5 88,9 C76,13 68,5.5 56,8 C44,10.5 36,4 26,8 C16,12 8,5 0,9 Z'/></svg>");
  background-repeat: repeat-x;
  background-size: 120px 15px;
  filter: drop-shadow(0 1px 1px rgba(77, 15, 19, 0.10));
}
/* Les preguntes freqüents tenen poc coixí a dalt (1,1rem): menys gruix
   de neu o tocaria el text. */
html.nadal .faq-item::before { height: 11px; background-size: 120px 11px; }

/* --- Caramells de gel sota la capçalera --- */
html.nadal .site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -24px;
  height: 26px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'><path fill='%23ffffff' fill-opacity='0.92' d='M0,0 H120 V4 L116,4 113,17 110,4 101,4 98,11 95,4 84,4 80,22 76,4 64,4 61,13 58,4 47,4 44,20 41,4 31,4 28,10 25,4 15,4 12,16 9,4 3,4 1,9 0,4 Z'/></svg>");
  background-repeat: repeat-x;
  background-size: 120px 26px;
  filter: drop-shadow(0 2px 2px rgba(77, 15, 19, 0.12));
}

/* El barret de Pare Noel damunt del logo s'ha tret. Estava dibuixat per a un
   segell rodó de 42 px i, des que el logo és un quadrat arrodonit amb el text
   "LO MASET" a sobre, la vora li queia damunt de les lletres. */

/* --- Congesta damunt del peu de pàgina --- */
html.nadal .site-footer { position: relative; }
html.nadal .site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 22px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 15'><path fill='%23ffffff' d='M0,0 H120 V7 C110,12.5 100,4.5 88,9 C76,13 68,5.5 56,8 C44,10.5 36,4 26,8 C16,12 8,5 0,9 Z'/></svg>");
  background-repeat: repeat-x;
  background-size: 160px 22px;
}

@media (max-width: 620px) {
  html.nadal .site-header::before { display: none; }
  html.nadal .section-head::before,
  html.nadal .order__head::before { top: -44px; height: 48px; background-size: 180px 48px; }
}