/* =========================================================
   La Piñol — HOME (index.html)
   Hero, About/Stats, Serveis, Passos.
   Depèn de global.css (tokens, reset, header, footer).
   ✅ Treballa aquí lliurement: no afecta serveis.css.
   ========================================================= */

/* =========================================================
   HERO — Educació, lleure i benestar
   ========================================================= */
.lp-hero{
  position:relative;
  background:var(--bg-mint);
  overflow:hidden;
}
.lp-hero__inner{
  position:relative;
  z-index:2;
  padding-top:74px;
  padding-bottom:74px;
  min-height:374px;
}
.lp-hero__text{ max-width:470px; }
.lp-hero__title{
  font-size:26px;
  line-height:1.35;
  margin-bottom:18px;
}
.lp-hero__lead{
  font-size:12px;
  line-height:20px;
  color:var(--c-gray);
  margin:0 0 26px;
  max-width:440px;
}
.lp-hero__actions{ display:flex; gap:18px; flex-wrap:wrap; }

.lp-hero__media{
  position:absolute;
  top:0;
  right:0;
  width:48%;
  max-width:700px;
  height:100%;
  z-index:1;
}
.lp-hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:9999px 0 0 9999px;
}

/* =========================================================
   LA PIÑOL — about + estadístiques
   ========================================================= */
.lp-about{
  position:relative;
  background:var(--c-white);
  overflow:hidden;
}
.lp-about__inner{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:374px;
  padding-top:50px;
  padding-bottom:50px;
}
.lp-about__media{
  position:absolute;
  left:0;
  top:0;
  width:46%;
  max-width:664px;
  height:100%;
}
.lp-about__media img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0 9999px 9999px 0;
}
.lp-about__text{ width:50%; max-width:480px; }
.lp-about__lead{
  font-size:12px;
  line-height:20px;
  color:var(--c-gray);
  margin:14px 0 26px;
}

.lp-stats{ display:flex; gap:26px; flex-wrap:wrap; }
.lp-stat{
  width:135px; height:80px;
  border-radius:var(--radius-pill);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
}
.lp-stat__num{ font-size:26px; font-weight:800; line-height:1; }
.lp-stat__label{ font-size:12px; font-weight:800; line-height:1.15; margin-top:4px; }
.lp-stat--yellow{ background:var(--tint-yellow); color:var(--c-gold); }
.lp-stat--lilac{ background:var(--tint-lilac); color:var(--c-lilac); }
.lp-stat--orange{ background:var(--tint-orange); color:var(--c-orange); }

/* =========================================================
   SERVEIS — Quatre àmbits
   ========================================================= */
.lp-serveis{
  position:relative;
  background:var(--bg-lilac);
  overflow:hidden;
  padding:60px 0 70px;
}
.lp-serveis::before{   /* taca groga decorativa */
  content:"";
  position:absolute;
  top:0; right:0;
  width:60%; height:100%;
  background:var(--bg-yellow);
  border-radius:9999px 0 0 9999px;
  z-index:0;
}
.lp-serveis__title{ position:relative; z-index:2; margin-bottom:30px; }

.lp-serveis__grid{
  position:relative;
  z-index:2;
  height:170px;
}
.lp-pastilla{
  position:absolute;
  width:470px;
  max-width:calc(100% - var(--gutter)*2);
  height:70px;
  background:var(--c-white);
  border-radius:var(--radius-pill);
  padding:0 34px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.lp-pastilla:hover{ box-shadow:0 10px 24px rgba(0,0,0,.10); }
.lp-pastilla__title{ font-size:16px; font-weight:800; display:flex; align-items:center; }
.lp-pastilla__sub{ font-size:12px; font-weight:300; color:var(--c-gray); margin-top:3px; }
.lp-pastilla .lp-arrow{ width:15px; height:10px; transition:width .25s ease, transform .25s ease; }
/* hover: la fletxa s'allarga i es desplaça a la dreta */
.lp-pastilla:hover .lp-arrow{ width:32px; transform:translateX(6px); }

/* posicions esglaonades (com al Figma) */
.lp-pos-1{ left:var(--gutter); top:0; }
.lp-pos-2{ left:calc(var(--gutter) + 480px); top:0; }
.lp-pos-3{ left:calc(var(--gutter) + 142px); top:99px; }
.lp-pos-4{ left:calc(var(--gutter) + 622px); top:99px; }

/* =========================================================
   APUNTA'T EN TRES PASSOS
   ========================================================= */
.lp-passos{
  position:relative;
  background:var(--bg-mint);
  overflow:hidden;
  padding:54px 0 60px;
}
.lp-passos::before{  /* pastilla taronja decorativa esquerra */
  content:"";
  position:absolute;
  left:0; top:0;
  width:43%; height:100%;
  background:var(--bg-peach);
  border-radius:0 9999px 9999px 0;
  z-index:0;
}
.lp-passos__inner{ position:relative; z-index:2; }
.lp-passos__head{ margin-bottom:30px; }
.lp-passos__lead{ font-size:12px; line-height:20px; color:var(--c-gray); margin:12px 0 0; max-width:360px; }

.lp-passos__row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.lp-step{ position:relative; display:flex; align-items:center; }
.lp-step__num{
  position:relative;
  z-index:2;
  width:29px; height:29px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-white);
  font-weight:800; font-size:16px;
}
.lp-step__num--lilac{ background:var(--c-lilac); }
.lp-step__num--gold{ background:var(--c-gold); }
.lp-step__num--orange{ background:var(--c-orange); }
.lp-step__pill{
  background:var(--c-white);
  height:29px;
  display:flex; align-items:center;
  border-radius:var(--radius-pill);
  padding:0 26px 0 32px;
  margin-left:-16px;
  font-size:16px; font-weight:800;
  min-width:200px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
/* Els passos 1·2·3 són indicadors, no són clicables: cap efecte hover. */
.lp-step__cta{ margin-left:8px; }
.lp-step__soon{ margin-left:8px; font-size:15px; font-weight:800; color:var(--c-gray); font-style:italic; }

/* =========================================================
   RESPONSIVE — Home
   ========================================================= */
/* L'esglaonament absolut de les pastilles està calculat sobre el
   llenç de ~1440px del Figma; per sota es desbordava (la 4a targeta
   quedava tallada). Per sota de 1360px fem servir graella fluida. */
@media (max-width:1360px){
  .lp-serveis__grid{ position:static; height:auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .lp-pastilla{ position:static; width:100%; max-width:none; }
}

@media (max-width:1200px){
  .lp-hero__media{ width:46%; }
}

/* Banda de portàtil (1025–1360px): amb el gutter gran (184px) el text
   del hero arribava a tocar la foto. Reduïm una mica la foto i el text
   per garantir separació. */
@media (min-width:1025px) and (max-width:1360px){
  .lp-hero__media{ width:46%; }
  .lp-hero__text{ max-width:430px; }
}

/* Hero i About apilats abans (a tauleta el text se solapava amb la
   foto entre ~900 i 1100px). */
@media (max-width:1024px){
  /* En responsiu amaguem la foto del hero (fons blau) */
  .lp-hero__inner{ padding-top:40px; padding-bottom:56px; }
  .lp-hero__text{ max-width:none; }
  .lp-hero__media{ display:none; }

  .lp-about__inner{ flex-direction:column; align-items:stretch; }
  .lp-about__media{ position:static; width:100%; height:280px; margin-bottom:28px; }
  .lp-about__media img{ border-radius:0 9999px 9999px 0; }
  .lp-about__text{ width:100%; max-width:none; }
}

@media (max-width:900px){
  /* Serveis 1 columna */
  .lp-serveis__grid{ grid-template-columns:1fr; }
  .lp-serveis::before{ width:100%; border-radius:0; opacity:.6; }
  .lp-pastilla{ height:auto; padding:18px 28px; }

  /* Passos apilat */
  .lp-passos::before{ width:100%; border-radius:0; opacity:.6; }
  .lp-passos__row{ flex-direction:column; align-items:flex-start; }
  .lp-step__pill{ min-width:240px; }
}

@media (max-width:560px){
  .lp-stats{ gap:14px; }
  .lp-stat{ width:calc(33.333% - 10px); }
  .lp-hero__actions{ gap:12px; }
  .lp-hero__actions .lp-btn{ flex:1 1 auto; justify-content:center; }
}

/* Mòbil molt estret: les 3 estadístiques no caben còmodes en fila */
@media (max-width:400px){
  .lp-stat{ width:calc(50% - 7px); }
}

/* =========================================================
   REVEAL — específic de la Home (formes de color)
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .lp-serveis::before{          /* arrodonit a l'esquerra -> des de la dreta */
    transform:translateX(300px);
    transition:transform 1.05s cubic-bezier(.22,.61,.36,1);
  }
  .lp-serveis.is-in::before{ transform:none; }

  .lp-passos::before{           /* arrodonit a la dreta -> des de l'esquerra */
    transform:translateX(-300px);
    transition:transform 1.05s cubic-bezier(.22,.61,.36,1);
  }
  .lp-passos.is-in::before{ transform:none; }
}