/* =========================================================
   La Piñol — GLOBAL (compartit per totes les pàgines)
   Tokens, reset, utilitats, header i footer.
   ⚠️ Fitxer compartit: editar només per canvis globals,
   no per polir una pàgina concreta.
   Tokens extrets del Figma · Font: Montserrat
   ========================================================= */
:root{
  /* Colors de marca */
  --c-green:   #3c7756;
  --c-orange:  #e5763e;
  --c-gold:    #eab56e;
  --c-lilac:   #7b83c9;
  --c-ink:     #333333;
  --c-gray:    #666666;
  --c-white:   #ffffff;

  /* Fons de secció */
  --bg-mint:   #e4efe8;
  --bg-lilac:  #f0f0ff;
  --bg-yellow: #fff7dd;
  --bg-peach:  #fff0e9;

  /* Tints de pastilles */
  --tint-yellow: #fff7dd;
  --tint-lilac:  #f0f0ff;
  --tint-orange: #fff0e9;

  /* Layout */
  --maxw: 1440px;
  --gutter: 184px;
  --radius-pill: 59px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0;
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:300;
  color:var(--c-gray);
  background:var(--c-white);
  line-height:1.45;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; color:var(--c-ink); font-weight:800; }

/* ---------- Utilitats ---------- */
.t-green{ color:var(--c-green); }
.t-orange{ color:var(--c-orange); }
.t-gold{ color:var(--c-gold); }
.t-lilac{ color:var(--c-lilac); }

.lp-container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

.lp-section-title{
  font-size:26px;
  line-height:1.15;
  color:var(--c-ink);
}

/* ---------- Fletxa (icona) ---------- */
.lp-arrow{
  display:inline-block;
  width:17px; height:11px;
  margin-left:6px;
  background:currentColor;
  vertical-align:middle;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16 1l6 5-6 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16 1l6 5-6 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Botons ---------- */
.lp-btn{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:400;
  border-radius:var(--radius-pill);
  padding:8px 18px;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.lp-btn .lp-arrow{ transition:transform .2s ease, width .2s ease; }
/* Variante2 (hover): s'inverteix a fons blanc + verd amb ombra, fletxa cap a la dreta */
.lp-btn--primary{ background:var(--c-green); color:var(--c-white); }
.lp-btn--primary:hover{
  background:var(--c-white);
  color:var(--c-green);
  box-shadow:0 0 10px rgba(0,0,0,.10);
}
.lp-btn--primary:hover .lp-arrow{ transform:translateX(5px); }

/* ---------- Logo ---------- */
.lp-logo{
  display:inline-flex;
  align-items:center;
  line-height:1;
  white-space:nowrap;
}
.lp-header .lp-logo__img{
  display:block;
  height:52px;
  width:auto;
}

/* =========================================================
   HEADER
   ========================================================= */
.lp-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--c-white);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.lp-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:62px;
}
.lp-nav__list{
  display:flex;
  align-items:center;
  gap:34px;
}
.lp-nav__link{
  font-size:12px;
  font-weight:700;
  color:var(--c-gray);
  transition:color .15s ease;
}
.lp-nav__link:hover{ color:var(--c-green); }
.lp-nav__link.is-active{ color:var(--c-green); }
.lp-nav__link--parent{ cursor:default; -webkit-user-select:none; user-select:none; }

.lp-nav__item--has-children{ position:relative; }
.lp-nav__submenu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--c-white);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  padding:10px;
  min-width:255px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.lp-nav__submenu li a{
  display:block;
  font-size:12px;
  font-weight:300;
  color:var(--c-ink);
  text-align:center;
  padding:8px 12px;
  border-radius:8px;
}
.lp-nav__submenu li a:hover{ background:var(--bg-mint); }
.lp-nav__item--has-children:hover .lp-nav__submenu,
.lp-nav__item--has-children:focus-within .lp-nav__submenu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* Hamburguesa (mòbil) */
.lp-burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:34px; height:30px;
  background:none; border:0; cursor:pointer;
  padding:6px 4px;
}
.lp-burger span{
  display:block; height:2.5px; border-radius:2px;
  background:var(--c-green); transition:.25s;
}

/* =========================================================
   FOOTER — Parlem?
   ========================================================= */
.lp-footer{ background:var(--c-white); padding:60px 0 70px; }
.lp-footer__inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.lp-footer__col--intro{
  max-width:360px;
  display:flex; flex-direction:column; align-items:flex-start;
}
/* El botó s'ancora al fons de la columna, a la baseline de les xarxes */
.lp-footer__col--intro .lp-btn{ margin-top:auto; }
.lp-footer__title{ font-size:26px; margin-bottom:16px; }
.lp-footer__text{ font-size:12px; line-height:20px; color:var(--c-gray); margin:0 0 22px; }

.lp-footer__col--contact{ display:flex; flex-direction:column; gap:18px; }
.lp-footer__block h3{ font-size:16px; font-weight:800; color:var(--c-ink); margin:0 0 4px; }
.lp-footer__block p{ font-size:12px; font-weight:300; color:var(--c-gray); margin:0; }

.lp-social{ display:flex; align-items:center; gap:9px; margin-top:8px; }
.lp-social__dot{
  width:19px; height:19px; border-radius:50%;
  background:#cfcfcf; transition:background .15s ease;
}
.lp-social__dot:hover{ background:var(--c-green); }
.lp-social__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px;
  color:var(--c-gray); transition:color .15s ease, background .15s ease;
}
.lp-social__link svg{ width:20px; height:20px; display:block; }
.lp-social__link:hover{ color:var(--c-green); }
.lp-social__handle{
  font-size:12px; font-weight:300; color:var(--c-gray);
  transition:color .15s ease;
}
.lp-social__handle:hover{ color:var(--c-green); }

.lp-footer__col--news{
  display:flex; flex-direction:column;
  align-items:flex-end; justify-content:flex-end;
  gap:20px;
}
.lp-logo--footer .lp-logo__img{ height:120px; width:auto; }

/* =========================================================
   BLOC CLIENTS (home + qui som)
   ========================================================= */
.lp-clients{ position:relative; overflow:hidden; padding:64px 0 84px; background:#fff7dd; }
/* A Qui som, fons verd clar */
.page-template-template-quisom .lp-clients{ background:#e4efe8; }
.lp-clients__title{ text-align:center; margin:0 0 34px; }
.lp-clients__list{
  position:relative; z-index:1;
  max-width:1040px; margin:0 auto; padding:0;
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.lp-clients__list > li{ flex:0 0 calc(25% - 9px); max-width:calc(25% - 9px); display:flex; }
.lp-clients__chip{
  width:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--c-white);
  border-radius:var(--radius-pill);
  padding:12px 18px;
  font-size:13px; font-weight:700; color:var(--c-ink);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
@media (max-width:760px){
  .lp-clients__list > li{ flex-basis:calc(50% - 6px); max-width:calc(50% - 6px); }
}
@media (max-width:460px){
  .lp-clients__list > li{ flex-basis:100%; max-width:100%; }
}
.lp-clients__pill{
  position:absolute; z-index:0; top:var(--t,40%);
  width:var(--w,240px); height:78px; border-radius:9999px;
  left:-60px; background:#e3e4f7;
}
.lp-clients__pill--2{ left:auto; right:-60px; background:#f7c9a9; }
@media (max-width:760px){ .lp-clients__pill{ display:none; } }

/* =========================================================
   REVEAL — primitives genèriques reutilitzables
   (les variants específiques de cada pàgina viuen al seu CSS)
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  /* Pastilles decoratives del bloc Clients */
  @keyframes lp-clients-breathe{ 0%,100%{ scale:1 1; } 50%{ scale:1.12 1; } }
  .lp-clients__pill{ animation:lp-clients-breathe 8s ease-in-out infinite; transform-origin:left center; }
  .lp-clients__pill--2{ animation-duration:9.5s; animation-delay:-3s; transform-origin:right center; }

  /* Blocs amb foto */
  .lp-reveal{
    opacity:0;
    transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .7s ease;
    will-change:transform, opacity;
  }
  .lp-reveal--from-right{ transform:translateX(220px); }
  .lp-reveal--from-left{  transform:translateX(-220px); }
  .lp-reveal.is-in{ opacity:1; transform:none; }

  /* ---- Entrada esglaonada de grups (stats, serveis, passos) ---- */
  .lp-stagger > *{
    opacity:0;
    transform:translateY(54px);
    transition:transform .7s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
    will-change:transform, opacity;
  }
  .lp-stagger.is-in > *{ opacity:1; transform:none; }
  .lp-stagger.is-in > *:nth-child(1){ transition-delay:.05s; }
  .lp-stagger.is-in > *:nth-child(2){ transition-delay:.18s; }
  .lp-stagger.is-in > *:nth-child(3){ transition-delay:.31s; }
  .lp-stagger.is-in > *:nth-child(4){ transition-delay:.44s; }
  .lp-stagger.is-in > *:nth-child(5){ transition-delay:.57s; }
}

/* =========================================================
   RESPONSIVE — global (header/nav, footer, gutter)
   ========================================================= */
@media (max-width:1200px){
  :root{ --gutter:64px; }
}

@media (max-width:900px){
  .lp-nav{
    position:fixed; inset:62px 0 auto 0;
    background:var(--c-white);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    transform:translateY(-120%);
    transition:transform .3s ease;
    padding:18px 0;
  }
  .lp-nav.is-open{ transform:translateY(0); }
  .lp-nav__list{ flex-direction:column; align-items:center; gap:6px; }
  .lp-nav__link{ display:block; padding:12px 24px; font-size:14px; text-align:center; }

  /* Submenú "Serveis": ocult d'entrada, es desplega cap avall en clicar
     (el toggle .is-expanded el posa global.js). Tot centrat. */
  .lp-nav__item--has-children{ width:100%; text-align:center; }
  .lp-nav__link--parent{ display:inline-flex; align-items:center; justify-content:center; }
  /* Fletxa indicadora que gira en obrir */
  .lp-nav__link--parent::after{
    content:""; width:8px; height:8px; margin-left:9px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s ease;
  }
  .lp-nav__item--has-children.is-expanded .lp-nav__link--parent::after{
    transform:rotate(-135deg) translate(-2px,-2px);
  }
  .lp-nav__submenu{
    position:static; transform:none; box-shadow:none; min-width:0;
    text-align:center; padding:0; margin:0 auto;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .2s ease, visibility .3s;
  }
  /* Anul·la l'obertura per hover/focus de l'escriptori quan som al mòbil */
  .lp-nav__item--has-children:hover .lp-nav__submenu,
  .lp-nav__item--has-children:focus-within .lp-nav__submenu{
    transform:none; opacity:0; visibility:hidden;
  }
  .lp-nav__item--has-children.is-expanded .lp-nav__submenu{
    max-height:340px; opacity:1; visibility:visible; padding:4px 0 10px;
  }
  .lp-burger{ display:flex; }

  /* Footer apilat */
  .lp-footer__inner{ flex-direction:column; }
  .lp-footer__col--news{ align-items:flex-start; }
}

@media (max-width:560px){
  :root{ --gutter:22px; }
}

/* ============================================================
 * Newsletter — popup (modal) amb formulari Mailchimp
 * ============================================================ */
.lp-news[hidden]{ display:none; }
.lp-news{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
}
.lp-news__overlay{
  position:absolute; inset:0;
  background:rgba(51,51,51,.55);
  opacity:0; transition:opacity .25s ease;
}
.lp-news__dialog{
  position:relative;
  width:100%; max-width:460px;
  background:var(--c-white);
  border-radius:28px;
  padding:40px 38px 34px;
  box-shadow:0 24px 70px rgba(51,51,51,.28);
  transform:translateY(14px) scale(.98);
  opacity:0; transition:transform .25s ease, opacity .25s ease;
}
.lp-news.is-open .lp-news__overlay{ opacity:1; }
.lp-news.is-open .lp-news__dialog{ transform:none; opacity:1; }

.lp-news__close{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-mint); color:var(--c-green);
  border:0; border-radius:50%; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lp-news__close:hover{ background:var(--c-green); color:var(--c-white); }
.lp-news__close svg{ width:20px; height:20px; }

.lp-news__title{ font-size:1.6rem; line-height:1.15; margin-bottom:8px; }
.lp-news__text{ color:var(--c-gray); margin:0 0 22px; }

.lp-news__form{ display:flex; flex-direction:column; }
.lp-news__label{
  font-size:.82rem; font-weight:700; color:var(--c-ink);
  margin:0 0 6px 4px;
}
.lp-news__input{
  font:inherit; color:var(--c-ink);
  padding:13px 18px; margin-bottom:16px;
  border:1.5px solid #e0e0e0; border-radius:var(--radius-pill);
  background:var(--c-white);
  transition:border-color .2s ease;
}
.lp-news__input:focus{ outline:none; border-color:var(--c-green); }
.lp-news__submit{ align-self:flex-start; margin-top:4px; border:0; cursor:pointer; }
.lp-news__submit[disabled]{ opacity:.6; cursor:default; }

.lp-news__feedback{ margin:14px 0 0; font-size:.9rem; min-height:1.2em; }
.lp-news__feedback.is-ok{ color:var(--c-green); }
.lp-news__feedback.is-error{ color:var(--c-orange); }

@media (max-width:560px){
  .lp-news__dialog{ padding:34px 22px 28px; border-radius:22px; }
  .lp-news__title{ font-size:1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  .lp-news__overlay, .lp-news__dialog{ transition:none; }
}