/* =========================================================
   La Piñol — PÀGINA DE SERVEIS (serveis.html, plantilla reutilitzable)
   Depèn de global.css (tokens, reset, header, footer).
   ✅ Treballa aquí lliurement: no afecta home.css.

   El color principal es defineix per tema -> només cal
   canviar la classe del <body>:
     .svc-lila | .svc-green | .svc-gold | .svc-orange
   --svc        : color principal (títols, accents)
   --svc-strong : fons del subheader
   --svc-soft   : blobs de fons de secció
   ========================================================= */
.svc-lila  { --svc:#7b83c9; --svc-strong:#6f76c4; --svc-soft:#eef0fc; --svc-soft2:#d9dbf4; }
.svc-green { --svc:#3c7756; --svc-strong:#3c7756; --svc-soft:#e4efe8; --svc-soft2:#cfe1d6; }
.svc-gold  { --svc:#eab56e; --svc-strong:#d79a40; --svc-soft:#fff7dd; --svc-soft2:#fae7b6; }
.svc-orange{ --svc:#e5763e; --svc-strong:#e5763e; --svc-soft:#fff0e9; --svc-soft2:#ffd9c6; }

/* ---- Subheader ---- */
.svc-hero{ position:relative; background:var(--svc-strong); overflow:hidden; }
.svc-hero__inner{ position:relative; z-index:2; min-height:266px; padding-block:64px; }
.svc-hero__text{ max-width:470px; }
.svc-hero__title{ color:#fff; font-size:26px; line-height:1.3; margin:0 0 14px; }
.svc-hero__lead{ color:rgba(255,255,255,.92); font-size:16px; line-height:1.5; margin:0 0 24px; max-width:430px; }
.svc-hero__media{ position:absolute; top:0; right:0; width:46%; max-width:680px; height:100%; z-index:1; }
.svc-hero__media img{ width:100%; height:100%; object-fit:cover; border-radius:9999px 0 0 9999px; }

/* Botó blanc del subheader (s'inverteix al color del servei en hover) */
.svc-btn{ background:#fff; color:var(--svc); }
.svc-btn:hover{ background:var(--svc); color:#fff; box-shadow:0 0 10px rgba(0,0,0,.12); }
.svc-btn:hover .lp-arrow{ transform:translateX(5px); }

/* ---- Seccions alternades ---- */
.svc-section{ position:relative; background:#fff; overflow:hidden; }
.svc-section__inner{
  position:relative; z-index:2;
  display:flex; align-items:center;
  min-height:300px; padding-block:54px;
}
.svc-section--left  .svc-section__inner{ justify-content:flex-end; }   /* text a la dreta */
.svc-section--right .svc-section__inner{ justify-content:flex-start; } /* text a l'esquerra */
.svc-section__text{ width:50%; max-width:460px; }
.svc-section__title{ color:var(--svc); font-size:26px; font-weight:800; margin:0 0 14px; }
.svc-section__subtitle{ color:var(--c-ink); font-size:20px; font-weight:400; line-height:1.3; margin:0 0 16px; }
.svc-section__body{ color:var(--c-gray); font-size:12px; font-weight:300; line-height:20px; margin:0; }

/* Blob de color que entra des del lateral (vora arrodonida cap al centre) */
.svc-section::before{
  content:""; position:absolute; top:0; height:100%; width:52%;
  background:var(--svc-soft); z-index:0;
}
.svc-section--left::before{  left:0;  border-radius:0 9999px 9999px 0; }
.svc-section--right::before{ right:0; border-radius:9999px 0 0 9999px; }
/* Pastilletes decoratives (blanca sobre el blob; lila al costat oposat).
   La llargada varia per secció via --w (es marca a l'HTML) per donar dinamisme. */
.svc-pill{
  position:absolute; z-index:1;
  top:var(--t,36%);
  width:var(--w,360px); height:80px;
  border-radius:9999px;
  transform:translateX(var(--from,0));
}
.svc-pill--white{ background:#fff; }
.svc-pill--lila{ background:var(--svc-soft2); height:74px; }
/* blanca -> mateix costat que el blob */
.svc-section--left  .svc-pill--white{ left:-44px; }
.svc-section--right .svc-pill--white{ right:-44px; }
/* lila -> costat oposat al blob */
.svc-section--left  .svc-pill--lila{ right:-30px; }
.svc-section--right .svc-pill--lila{ left:-30px; }

@media (prefers-reduced-motion: no-preference){
  /* El reveal de .svc-section l'activa el mateix observer global (global.js) */
  .svc-section--left::before{  transform:translateX(-130px); transition:transform 1s cubic-bezier(.22,.61,.36,1); }
  .svc-section--left.is-in::before{  transform:none; }
  .svc-section--right::before{ transform:translateX(130px);  transition:transform 1s cubic-bezier(.22,.61,.36,1); }
  .svc-section--right.is-in::before{ transform:none; }

  /* Pastilletes: entren des del seu costat, una mica després del blob */
  .svc-pill--white{ transition:transform .95s cubic-bezier(.22,.61,.36,1) .08s; }
  .svc-pill--lila{  transition:transform .95s cubic-bezier(.22,.61,.36,1) .20s; }
  .svc-section--left  .svc-pill--white{ --from:-150px; }
  .svc-section--right .svc-pill--white{ --from:150px; }
  .svc-section--left  .svc-pill--lila{ --from:150px; }
  .svc-section--right .svc-pill--lila{ --from:-150px; }
  .svc-section.is-in .svc-pill{ --from:0px; }

  /* Pastilletes "respiren": creixen/s'encongeixen molt poc, lent i desincronitzat.
     Fem servir 'scale' (independent del transform del reveal) amb l'origen a la
     vora on neix la pastilleta, perquè sembli que s'allarga/escurça lleugerament. */
  @keyframes svc-pill-breathe{
    0%,100%{ scale:1 1; }
    50%    { scale:1.15 1; }
  }
  .svc-pill{ animation:svc-pill-breathe 7.5s ease-in-out infinite; }
  .svc-pill--lila{ animation-duration:9s; }
  /* origen de l'escala a la vora on neix la pastilleta */
  .svc-section--left  .svc-pill--white{ transform-origin:left center; }
  .svc-section--right .svc-pill--white{ transform-origin:right center; }
  .svc-section--left  .svc-pill--lila{ transform-origin:right center; }
  .svc-section--right .svc-pill--lila{ transform-origin:left center; }
  /* esglaonat: cada secció comença en un moment diferent (svc-hero és la section 1) */
  .svc-section:nth-of-type(2) .svc-pill{ animation-delay:-0.4s; }
  .svc-section:nth-of-type(3) .svc-pill{ animation-delay:-1.8s; }
  .svc-section:nth-of-type(4) .svc-pill{ animation-delay:-3.2s; }
  .svc-section:nth-of-type(5) .svc-pill{ animation-delay:-4.6s; }
  .svc-section:nth-of-type(6) .svc-pill{ animation-delay:-6.0s; }
  .svc-section:nth-of-type(7) .svc-pill{ animation-delay:-7.4s; }
}

/* Banda de portàtil (1025–1360px): amb el gutter gran el text del
   subheader arribava a tocar la foto. */
@media (min-width:1025px) and (max-width:1360px){
  .svc-hero__media{ width:44%; }
  .svc-hero__text{ max-width:430px; }
}

/* Subheader: apila la foto a sota abans (evita solapament a tauleta) */
@media (max-width:1024px){
  .svc-hero__inner{ padding-top:36px; padding-bottom:300px; }
  .svc-hero__text{ max-width:none; }
  .svc-hero__media{ width:90%; max-width:520px; height:280px; top:auto; bottom:0; }
}

@media (max-width:900px){
  .svc-section__inner{ flex-direction:column; align-items:flex-start; min-height:0; }
  .svc-section__text{ width:100%; max-width:none; }
  .svc-section::before{ width:100%; border-radius:0; opacity:.55; }
  .svc-pill{ display:none; }
}

/* Filet superior del footer (només pàgines de servei), en el to lila de les pastilles */
.svc-page .lp-footer{ border-top:2px solid var(--svc-soft2); }