/* ============================================================
   FUNDACIÓ AVE MARIA · Maqueta de disseny
   Editorial · minimalista · monocrom càlid · Montserrat
   Imatges = marcs blancs (placeholder B/N)
   ============================================================ */

:root{
  /* Paleta: blancs i grisos (freda) */
  --ink:#202020;        /* text fosc (mai negre pur) */
  --ink-soft:#333333;   /* Dark Gray */
  --muted:#646464;      /* Gray */
  --muted-2:#a7a7a7;    /* Light Gray */
  --line:#e4e4e4;       /* línies fines */
  --line-soft:#eeeeee;
  --paper:#f9f9f9;      /* White (fons predominant) */
  --paper-2:#f1f1f1;
  --paper-3:#e9e9e9;
  --white:#ffffff;
  --black:#202020;
  --surface-dark:#161616;  /* bandes de màxim contrast */
  --surface-dark-2:#1f1f1f;
  /* Acents de marca (libro de estilo) — ús mínim, notes de color */
  --taronja:#e8863a;
  --coral:#e85d75;
  --groc:#f2c14e;
  --blau:#5dade2;
  --verd:#2d936c;
  --rosa:#d4859a;   /* Rosa Suau */

  /* Compatibilitat amb classes/estils del wireframe (remapejats) */
  --negro:var(--ink);
  --gris-oscuro:var(--ink-soft);
  --gris:var(--muted);
  --gris-claro:var(--muted-2);
  --gris-muy-claro:var(--line-soft);
  --fondo:var(--paper-2);
  --blanco:var(--white);
  --acento:var(--ink);

  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --fs-mega:clamp(3rem,11vw,10.5rem);
  --fs-hero:clamp(2.6rem,8vw,7rem);
  --fs-h2:clamp(2rem,4.6vw,4rem);
  --fs-h3:clamp(1.3rem,1.8vw,1.7rem);
  --fs-lede:clamp(1.05rem,1.6vw,1.4rem);

  --maxw:1320px;
  --pad:clamp(22px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-weight:400;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* gra/textura subtil */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
strong,b{font-weight:600;color:var(--ink)}

.container,.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(48px,6vw,90px) 0}

/* labels / eyebrows — sempre amb dues ratlles (a esquerra i dreta) per coherència */
.eyebrow{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.28em;
  color:var(--muted);display:inline-flex;align-items:center;gap:.85em;
}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:2px;background:var(--acc,var(--muted-2));border-radius:2px;flex-shrink:0}
/* Excepció: dins de .sec-head (header amb h2 lateral) només ratlla esquerra perquè queda alineat amb el títol */
.sec-head .eyebrow::after{display:none}

/* ===================== CURSOR ===================== */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink);
  pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .25s;mix-blend-mode:difference}
.cursor.big{width:64px;height:64px;background:#fff}
@media (hover:none){.cursor{display:none}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:10001;transition:width .1s linear}

/* ===================== HEADER ===================== */
header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:clamp(14px,2vw,22px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(249,249,249,.88);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
  transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease);
}
header.scrolled{background:rgba(249,249,249,.96);box-shadow:0 6px 24px -16px rgba(0,0,0,.25);padding-top:12px;padding-bottom:12px}
/* Fallback per navegadors sense backdrop-filter */
@supports not (backdrop-filter:blur(1px)){
  header{background:rgba(249,249,249,.98)}
}
/* Quan s'obre el submenú, el header pren fons per crear una barra continua */
header.sub-open,header:has(.nav-item:hover),header:has(.nav-item:focus-within),header:has(.subnav:hover){background:rgba(249,249,249,.96);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:14px;z-index:902}
.brand-logo{height:46px;width:auto;display:block;transition:height .4s var(--ease)}
header.scrolled .brand-logo{height:40px}
@media (max-width:760px){.brand-logo{height:38px}}
.brand .mark{
  width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font-weight:600;font-size:.62rem;letter-spacing:.06em;
  transition:background .3s,color .3s;
}
.brand:hover .mark{background:var(--ink);color:var(--paper)}
.brand .name{font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.15}
.brand .name span{display:block;font-weight:400;font-size:.62rem;letter-spacing:.24em;color:var(--muted)}

nav.main{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
nav.main a.navlink{
  position:relative;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:4px 0;transition:color .3s;
}
nav.main a.navlink::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--verd);transition:width .35s var(--ease)}
nav.main a.navlink:hover,.nav-item:hover>.navlink{color:var(--ink);cursor:pointer}
nav.main a.navlink:hover::after,nav.main a.navlink.current::after,.nav-item:hover>.navlink::after{width:100%}

/* ----- submenús: barra horitzontal a tot l'ample ----- */
.nav-item{position:static;display:flex;align-items:center}
.nav-item .navlink{display:inline-flex;align-items:center;gap:.5em;position:relative;z-index:52}
.caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease);opacity:.6;pointer-events:none}
.nav-item:hover .caret{transform:rotate(225deg) translateY(-1px);opacity:1}
.subnav{position:absolute;left:0;right:0;top:calc(100% - 44px);padding-top:44px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .4s var(--ease),visibility .35s;pointer-events:none;z-index:40}
.nav-item:hover .subnav,.nav-item:focus-within .subnav,.subnav:hover{opacity:1;visibility:visible;transform:none;pointer-events:auto}
body.nav-clicked .subnav{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.subnav-panel{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 50px -42px rgba(32,32,32,.45);padding:18px var(--pad);display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,52px);flex-wrap:wrap}
.subnav-panel a{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap;padding:6px 0;transition:color .25s}
.subnav-panel a::before{content:"";width:6px;height:6px;background:var(--acc,var(--muted-2));border-radius:50%;flex:0 0 auto;transform:scale(0);transition:transform .3s var(--ease)}
.subnav-panel a:hover{color:var(--ink)}
.subnav-panel a:hover::before{transform:scale(1)}

.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:30px;padding:3px}
.lang button{
  background:none;border:none;font-family:inherit;cursor:pointer;font-size:.66rem;font-weight:600;letter-spacing:.1em;
  color:var(--muted);padding:5px 11px;border-radius:30px;transition:.25s;
}
.lang button.active{background:var(--ink);color:var(--paper)}

.btn-dona{
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper)!important;padding:13px 26px;border-radius:40px;
  transition:transform .3s var(--ease),background .3s;
}
.btn-dona:hover{background:var(--ink-soft);transform:translateY(-2px)}

.burger{display:none;flex-direction:column;gap:5px;width:30px;height:24px;justify-content:center;cursor:pointer;z-index:902;background:none;border:none}
.burger span{display:block;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile overlay menu */
.mobile-menu{position:fixed;inset:0;z-index:850;background:var(--paper);transform:translateY(-100%);transition:transform .6s var(--ease);
  display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--pad) + 76px) var(--pad) var(--pad);gap:4px;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.menu-open .mobile-menu{transform:translateY(0)}
.mobile-menu a{font-size:clamp(1.8rem,8vw,3rem);font-weight:300;letter-spacing:-.01em;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease)}
.mobile-menu a:hover{padding-left:18px}
.mobile-menu .mm-sub{display:flex;flex-direction:column;margin:2px 0 6px}
.mobile-menu .mm-sub a{font-size:1.05rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);padding:9px 0 9px 18px;border-bottom:1px solid var(--line-soft)}
.mobile-menu .mm-sub a::before{content:"";display:inline-block;width:14px;height:1px;background:var(--acc,var(--muted-2));margin-right:12px;vertical-align:middle}
.mobile-menu .mm-sub a:hover{padding-left:26px;color:var(--ink)}

/* ===================== BUTTONS ===================== */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:1em;cursor:pointer;border:none;font-family:inherit;
  font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:17px 36px;border-radius:40px;transition:transform .35s var(--ease),color .35s,border-color .35s;
  line-height:1;
}
.btn>*{position:relative;z-index:1}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover .arr{transform:translateX(6px)}
.btn::before{content:"";position:absolute;inset:0;z-index:0;transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease)}
.btn:hover::before{transform:scaleY(1)}
.btn-primary,.btn-dark{background:var(--ink);color:var(--paper)}
.btn-primary::before,.btn-dark::before{background:var(--surface-dark)}
.btn-secondary,.btn-ghost{background:var(--acc,var(--ink));color:#fff;border:2px solid var(--acc,var(--ink));font-weight:700}
.btn-secondary::before,.btn-ghost::before{background:var(--paper)}
.btn-secondary:hover,.btn-ghost:hover{color:var(--acc,var(--ink));border-color:var(--acc,var(--ink))}
/* light buttons over dark context: wipe to light gray so text stays readable */
.cta-donacio .btn-primary::before,.is-dark .btn-primary::before,.page-header .btn-primary::before,.sidebar-box .btn-primary::before{background:var(--paper-3)}
/* dark sections invert */
.is-dark .btn-primary{background:var(--paper);color:var(--ink)}
.is-dark .btn-primary:hover{background:#fff}
.is-dark .btn-secondary{border-color:rgba(255,255,255,.4);color:#fff}
.is-dark .btn-secondary:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ===================== IMAGE PLACEHOLDERS (B/N) ===================== */
.servei-img,.noticia-img,.galeria-item,.mapa-placeholder,.ph{
  position:relative;background:var(--white);border:1px solid var(--line);
  overflow:hidden;color:transparent;font-size:0;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
}
/* recover descriptor text */
.servei-img,.noticia-img,.galeria-item,.mapa-placeholder{
  color:var(--muted);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:18px;
}
/* sense marcs ni badge — imatges netes */
.servei-img::before,.noticia-img::before,.galeria-item::before,.ph::before,
.servei-img::after,.noticia-img::after,.galeria-item::after,.ph::after{display:none}
.servei-img,.noticia-img,.galeria-item,.ph{background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(1);transition:filter .5s var(--ease)}
.servei-card:hover .servei-img,.noticia-card:hover .noticia-img,.galeria-item:hover,.ph:hover,.sr-img:hover{filter:grayscale(0)}
.servei-row:hover .sr-img{filter:grayscale(0)}
.servei-img .ph-label{display:none}
/* small camera glyph behind the label */
.ph .ph-label{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ph .ph-label svg{width:30px;height:30px;stroke:var(--muted-2);fill:none;stroke-width:1.2}
.ph{aspect-ratio:4/3}

/* ===================== HERO ===================== */
.hero{position:relative;min-height:100vh;padding:0}
.hero-left{width:43%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,3vh,40px);padding:clamp(160px,20vh,220px) clamp(30px,3.5vw,60px) clamp(40px,5vh,70px) var(--pad);position:relative;z-index:2}
.hero-eyebrow{margin-bottom:clamp(22px,4vh,44px)}
.hero h1{font-size:clamp(2.8rem,6.4vw,6rem);font-weight:200;line-height:.95;letter-spacing:-.03em;overflow-wrap:break-word}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l .l-in{display:block;transform:translateY(108%);animation:rise 1.1s var(--ease) .15s forwards}
.hero h1 .l:nth-child(2) .l-in{animation-delay:.27s}
.hero h1 .l.bk .l-in{font-weight:900;letter-spacing:-.045em}
@keyframes rise{to{transform:translateY(0)}}
.hero .tag-strong{font-size:var(--fs-lede);font-weight:400;color:var(--ink);margin-top:clamp(18px,3vh,28px);max-width:30ch;line-height:1.45}
.hero .tag-long{font-size:.94rem;color:var(--ink-soft);margin-top:15px;max-width:42ch;line-height:1.7}
/* info bar (a baix esquerra) */
.hero-bar{display:flex;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.hero-bar>*{padding:3px clamp(14px,1.5vw,22px);border-left:1px solid var(--line)}
.hero-bar>*:first-child{padding-left:0;border-left:none}
.hb-item{font-size:.76rem;color:var(--ink-soft);line-height:1.45}
.hb-item strong{display:block;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;margin-bottom:3px}
.hb-link{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--taronja);display:inline-flex;align-items:center;gap:.5em;transition:gap .3s var(--ease)}
.hb-link:hover{gap:1em}
/* Botó pill outline a la barra del hero */
.hb-btn{padding:13px 26px;font-size:.7rem}
/* imatge dreta + diagonal */
.hero-right{position:absolute;top:0;right:0;bottom:0;width:57%;overflow:hidden;clip-path:polygon(15% 0,100% 0,100% 100%,0% 100%)}
.hero-img{position:absolute;top:-15%;left:0;right:0;bottom:-15%;background:#0d0c0b url('../img/imatges/fachada/fachada-4.jpg') center center/cover no-repeat;will-change:transform;transform-origin:center center}
.hero-left{will-change:transform,opacity}
/* targeta promo flotant */
.hero-card{position:absolute;right:clamp(0px,2vw,40px);bottom:clamp(26px,5vh,64px);width:min(330px,44%);background:var(--white);border:1px solid var(--line);box-shadow:0 50px 90px -55px rgba(32,32,32,.55);padding:clamp(24px,2vw,32px)}
.hero-card .hc-text{font-size:1.05rem;line-height:1.4;color:var(--ink);margin-bottom:22px;font-weight:400}
.hero-card-btn{width:100%;background:var(--taronja);color:#fff;padding:17px 28px;letter-spacing:.12em}
.hero-card-btn::before{background:#c9692a}
@media (max-width:900px){
  .hero{min-height:auto}
  .hero-left{width:auto;min-height:auto;padding:clamp(110px,18vh,150px) var(--pad) 36px;gap:30px}
  .hero-right{position:static;width:auto;height:62vh;min-height:360px}
  .hero-img{clip-path:none}
  .hero-img .ph-label{transform:none}
  .hero-card{position:static;width:auto;margin:18px var(--pad) 0;box-shadow:none}
  .hero-bar{gap:6px;flex-direction:column;align-items:flex-start}
  .hero-bar>*{border-left:none;padding:2px 0}
}

/* ===================== REVEAL ===================== */
[data-reveal]{opacity:0;transform:translateY(40px);filter:blur(7px);transition:opacity .9s var(--ease),transform 1.05s var(--ease),filter .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none;filter:blur(0)}
[data-reveal-d="1"]{transition-delay:.08s}
[data-reveal-d="2"]{transition-delay:.16s}
[data-reveal-d="3"]{transition-delay:.24s}
[data-reveal-d="4"]{transition-delay:.32s}
[data-reveal-d="5"]{transition-delay:.4s}

/* ===================== SECTION HEADERS ===================== */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(40px,5vw,72px);flex-wrap:wrap}
.sec-head .sh-l{max-width:62%}
.sec-head h2{font-size:var(--fs-h2);font-weight:900;line-height:1;letter-spacing:-.035em;margin-top:18px}
.sec-head p{color:var(--muted);max-width:48ch;margin-top:14px;font-size:1rem}
.section-header{text-align:center;max-width:680px;margin:0 auto clamp(26px,3vw,46px);position:relative}
.section-header h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.035em;line-height:1.02;position:relative;display:inline-block}
.section-header h2::after{content:"";display:block;width:64px;height:4px;background:var(--acc,var(--taronja));margin:18px auto 0;border-radius:3px;opacity:.9}
.section-header p{color:var(--muted);margin-top:16px;font-size:1.02rem}
/* Sec-head (header amb h2 a esquerra + boto a dreta) */
.sec-head h2{position:relative}
.sec-head h2::after{content:"";display:block;width:48px;height:4px;background:var(--acc,var(--taronja));margin-top:14px;border-radius:3px;opacity:.9}
/* Idx (números enormes decoratius de fons): rep un tint del color de la secció */
.sec-head .idx{background:linear-gradient(180deg,color-mix(in srgb,var(--acc,var(--taronja)) 18%,transparent),transparent);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* CTA ghost dins de seccions sense estil inline hereda automàticament */
section .btn-ghost:not([style*="--acc"]){--acc:inherit}

/* ===================== STATS ===================== */
.impacte{background:var(--surface-dark);color:var(--paper)}
.impacte .eyebrow{color:rgba(255,255,255,.5)}
.impacte .eyebrow::before,.impacte .eyebrow::after{background:var(--acc,rgba(255,255,255,.3))}
.impacte .sec-head h2{color:#fff}
.impacte .sec-head .idx{color:rgba(255,255,255,.06)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14)}
.stat-item{padding:clamp(30px,4vw,52px) 28px;border-bottom:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);position:relative;transition:background .4s var(--ease)}
.stat-item:nth-child(3n){border-right:none}
.stat-item::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--acc-line,var(--taronja));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:2}
/* Línia inicial visible permanent (opacitat reduïda) */
.stat-item::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--acc-line,var(--taronja));opacity:.5;transition:opacity .4s var(--ease);z-index:1}
.stat-item:nth-child(1){--acc-line:var(--taronja)}
.stat-item:nth-child(2){--acc-line:var(--verd)}
.stat-item:nth-child(3){--acc-line:var(--blau)}
.stat-item:nth-child(4){--acc-line:var(--groc)}
.stat-item:nth-child(5){--acc-line:var(--rosa)}
.stat-item:nth-child(6){--acc-line:var(--coral,var(--rosa))}
.stat-item:hover{background:rgba(255,255,255,.04)}
.stat-item:hover::after{transform:scaleX(1)}
.stat-item:hover::before{opacity:0}
.stat-number{font-size:clamp(2.8rem,6vw,5.4rem);font-weight:200;line-height:1;letter-spacing:-.03em;color:#fff;transition:transform .5s var(--ease)}
.stat-item:hover .stat-number{transform:translateX(8px)}
.stat-label{font-size:.72rem;color:rgba(255,255,255,.55);margin-top:16px;text-transform:uppercase;letter-spacing:.16em;font-weight:500}

/* ===================== SERVEIS (editorial cards) ===================== */
.serveis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,34px)}
/* Variant scroller horitzontal */
.scroller-wrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.serveis-grid.is-scroller{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;gap:clamp(30px,3.5vw,56px);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:14px var(--pad) 18px;cursor:grab}
.serveis-grid.is-scroller::-webkit-scrollbar{display:none}
.serveis-grid.is-scroller.drag{cursor:grabbing;scroll-snap-type:none}
.serveis-grid.is-scroller.drag *{user-select:none;pointer-events:none}
.serveis-grid.is-scroller .servei-card{flex:0 0 clamp(280px,28vw,400px);scroll-snap-align:start;transform:translateZ(0);transition:transform .4s var(--ease)}
.serveis-grid.is-scroller .servei-card:hover{transform:translateY(-4px)}
.serveis-grid.is-scroller .servei-img{aspect-ratio:4/3}
/* Fletxes navegació */
.scroller-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none;padding:0 clamp(10px,1.5vw,24px);z-index:5}
.scroller-arrow{pointer-events:auto;width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);border-radius:50%;background:var(--ink);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:1.2rem;font-weight:600;transition:opacity .3s,background .3s,transform .3s var(--ease);box-shadow:0 14px 30px -16px rgba(0,0,0,.4)}
.scroller-arrow:hover{background:var(--ink-soft);transform:scale(1.06)}
.scroller-arrow:disabled,.scroller-arrow.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.scroller-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.servei-card{background:transparent;display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.servei-card .servei-img{aspect-ratio:4/3;height:auto;margin-bottom:22px;position:relative}
.servei-card .servei-img::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--card-acc,var(--taronja));opacity:0;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.servei-card:hover .servei-img::after{opacity:1;transform:scaleX(1)}
.servei-card:hover{transform:translateY(-6px)}
.servei-card:nth-child(1){--card-acc:var(--taronja)}
.servei-card:nth-child(2){--card-acc:var(--verd)}
.servei-card:nth-child(3){--card-acc:var(--blau)}
.servei-card:nth-child(4){--card-acc:var(--groc)}
.servei-card:nth-child(5){--card-acc:var(--rosa)}
.servei-card:nth-child(6){--card-acc:var(--coral)}
.servei-num{font-size:.72rem;font-weight:600;letter-spacing:.2em;color:var(--card-acc,var(--muted));display:inline-block;transition:transform .5s var(--ease),color .4s}
.servei-card:hover .servei-num{transform:translateX(8px)}
.servei-content{padding:0}
.servei-content h3{font-size:var(--fs-h3);font-weight:500;margin:10px 0 12px;letter-spacing:-.01em;line-height:1.15}
.servei-content p{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px;line-height:1.7}
.servei-content a{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;border-bottom:1px solid var(--line);padding-bottom:5px;transition:gap .3s,border-color .3s}
.servei-content a:hover{gap:1.1em;border-color:var(--ink)}

/* ===================== TIMELINE (home) ===================== */
.miles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,30px)}
.mile{background:var(--white);border:1px solid var(--line);padding:clamp(28px,3vw,42px);transition:transform .5s var(--ease),box-shadow .5s}
.mile:hover{transform:translateY(-5px);box-shadow:0 30px 60px -40px rgba(32,32,32,.22)}
.mile .yr{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:200;letter-spacing:-.02em;line-height:1;margin-bottom:22px}
.mile h3{font-size:1.05rem;font-weight:600;margin-bottom:12px;line-height:1.3}
.mile p{color:var(--muted);font-size:.92rem;line-height:1.65}

/* ===================== QUOTE BLOCK ===================== */
.lead-quote{max-width:900px;margin:0 auto;text-align:center}
.lead-quote .q{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:300;line-height:1.32;letter-spacing:-.01em}
.lead-quote .q .mk{color:var(--muted-2)}
.lead-quote .auth{margin-top:34px;font-weight:600;letter-spacing:.04em}
.lead-quote .role{color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.16em;margin-top:4px}

/* ===================== CTA DARK ===================== */
.is-dark{background:var(--surface-dark);color:var(--paper-2)}
.cta-donacio{background:var(--surface-dark);color:var(--paper);text-align:center}
.cta-donacio .container{max-width:840px}
.cta-donacio h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.035em;line-height:1.02;margin-bottom:24px;color:#fff}
.cta-donacio p{color:rgba(255,255,255,.72);font-size:1.08rem;margin-bottom:36px}
.cta-donacio .nota{margin-top:24px;font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.5)}

/* ===================== TESTIMONIS ===================== */
.testimonis{background:var(--paper-2)}
/* Carrusel de testimonis: tarjetes horitzontals amb peek lateral i loop infinit */
.testimoni-carousel{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:30px 0 10px}
.tc-viewport{overflow:hidden;width:100%;cursor:grab}
.tc-viewport.dragging{cursor:grabbing}
.tc-track{display:flex;gap:clamp(20px,2.5vw,38px);transition:transform .65s cubic-bezier(.25,.46,.45,.94);will-change:transform;padding:0 calc(50vw - clamp(280px,28vw,440px))}
.tc-card{flex:0 0 clamp(560px,56vw,880px);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:clamp(36px,4.5vw,64px);position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(280px,32vw,400px);transition:transform .6s var(--ease),box-shadow .6s var(--ease),opacity .6s var(--ease),border-color .4s;opacity:.35;transform:scale(.94);overflow:hidden}
.tc-card.is-active{opacity:1;transform:scale(1);box-shadow:0 30px 70px -36px rgba(0,0,0,.28);border-color:transparent}
.tc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--card-acc,var(--coral));opacity:.5;transform:scaleY(.5);transform-origin:top;transition:transform .6s var(--ease),opacity .4s}
.tc-card.is-active::before{opacity:1;transform:scaleY(1)}
.tc-mark{position:absolute;top:clamp(14px,1.6vw,24px);right:clamp(24px,2.5vw,40px);font-size:clamp(5rem,9vw,9rem);font-weight:200;line-height:.65;color:var(--card-acc,var(--coral));opacity:.18;font-family:Georgia,serif;pointer-events:none}
.tc-text{font-size:clamp(1.05rem,1.6vw,1.4rem);font-weight:300;line-height:1.55;letter-spacing:-.005em;color:var(--ink);margin:0 0 clamp(28px,3vw,40px);position:relative;z-index:1}
.tc-foot{display:flex;flex-direction:column;gap:6px;position:relative;padding-top:18px;border-top:1px solid var(--line)}
.tc-author{font-weight:600;font-size:1rem;margin:0;letter-spacing:-.005em}
.tc-role{color:var(--card-acc,var(--coral));font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;margin:0}
/* Fletxes */
.tc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:clamp(48px,4.5vw,60px);height:clamp(48px,4.5vw,60px);border-radius:50%;background:var(--ink);color:#fff;border:none;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .3s,transform .3s var(--ease);box-shadow:0 14px 30px -16px rgba(0,0,0,.4)}
.tc-arrow:hover{background:var(--ink-soft);transform:translateY(-50%) scale(1.06)}
.tc-prev{left:clamp(12px,2vw,32px)}
.tc-next{right:clamp(12px,2vw,32px)}
.tc-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
/* Dots */
.tc-dots{display:flex;gap:10px;justify-content:center;margin-top:36px}
.tc-dots button{width:9px;height:9px;border-radius:50%;border:1px solid var(--muted);background:none;cursor:pointer;padding:0;transition:.3s}
.tc-dots button.is-active{background:var(--coral);border-color:var(--coral);transform:scale(1.3);width:24px;border-radius:5px}
@media (max-width:760px){
  .tc-card{flex-basis:82vw;padding:30px 26px}
  .tc-track{padding:0 9vw}
  .tc-arrow{display:none}
}

/* ===================== NOTÍCIES ===================== */
.noticies-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,34px)}
.noticia-card{background:transparent;display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.noticia-card:hover{transform:translateY(-4px)}
.noticia-card:nth-child(1){--card-acc:var(--verd)}
.noticia-card:nth-child(2){--card-acc:var(--blau)}
.noticia-card:nth-child(3){--card-acc:var(--coral)}
.noticia-img{aspect-ratio:3/2;height:auto;margin-bottom:20px;position:relative}
.noticia-img::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--card-acc,var(--verd));opacity:.65;transition:opacity .35s,transform .5s var(--ease);transform:scaleX(.4);transform-origin:left}
.noticia-card:hover .noticia-img::after{opacity:1;transform:scaleX(1)}
.noticia-content{padding:0}
.noticia-content .noticia-date,p.noticia-date{font-size:.7rem;color:var(--card-acc,var(--muted));text-transform:uppercase;letter-spacing:.16em;font-weight:700;margin-bottom:12px}
.noticia-content h3{font-size:1.12rem;font-weight:500;line-height:1.35;margin-bottom:10px}
.noticia-content h3 a{transition:opacity .3s}
.noticia-content h3 a:hover{opacity:.55}
.noticia-content p{color:var(--muted);font-size:.9rem}

/* ===================== COL·LABORADORS (marquee) ===================== */
.collaboradors{overflow:hidden}
.marquee{display:flex;gap:0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
.marquee-track{display:flex;align-items:center;gap:0;animation:scrollx 28s linear infinite;flex-shrink:0}
.collaboradors:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.logo-item{flex:0 0 auto;min-width:230px;height:120px;display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-right:1px solid var(--line);transition:color .3s,background .3s}
.logo-item:hover{color:var(--ink);background:var(--white)}
.logo-item-img{padding:18px 28px;background:var(--paper);min-width:210px}
.logo-item-img img{display:block;max-width:150px;max-height:72px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.82;transition:filter .3s,opacity .3s,transform .3s}
.logo-item-img:hover img{filter:grayscale(0);opacity:1;transform:scale(1.03)}
.marquee-track.rev{animation-direction:reverse}
.marquee+.marquee{border-top:none}

/* ticker strip */
.ticker{background:var(--surface-dark);color:#fff;overflow:hidden;padding:24px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.ticker-track{display:inline-flex;white-space:nowrap;animation:scrollx 30s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{font-size:clamp(1.3rem,3vw,2.4rem);font-weight:300;letter-spacing:-.005em;padding:0 26px;display:inline-flex;align-items:center}
.ticker-track .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;opacity:.45;margin:0 8px}
.ticker-track em{font-style:italic;color:rgba(255,255,255,.55)}

/* dark manifesto quote band */
.manifesto{background:var(--surface-dark);color:var(--paper)}
.manifesto .lead-quote .q{color:#fff}
.manifesto .lead-quote .q .mk{color:rgba(255,255,255,.3)}
.manifesto .lead-quote .auth{color:#fff}
.manifesto .lead-quote .role{color:rgba(255,255,255,.55)}
.manifesto .btn-ghost{background:var(--acc,#fff);color:#fff;border-color:var(--acc,#fff)}
.manifesto .btn-ghost::before{background:var(--surface-dark)}
.manifesto .btn-ghost:hover{color:var(--acc,#fff);border-color:var(--acc,#fff)}
/* logos in static grids (empreses page) */
.logos-grid{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border:1px solid var(--line)}
.logos-grid .logo-item{min-width:180px;border-bottom:1px solid var(--line)}

/* ===================== PAGE SYSTEM ===================== */
#avemaria-app main>.page{display:none}
#avemaria-app main>.page.active{display:block;animation:pagein .7s var(--ease)}
@keyframes pagein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.page-header{padding:clamp(90px,9vw,120px) 0 0;position:relative}
.page-header .container{max-width:var(--maxw)}
p.breadcrumb,.breadcrumb,.page-header h1,.page-header .subtitle{display:none!important}

/* sub-nav */
.page-nav{position:sticky;top:0;z-index:800;background:rgba(249,249,249,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.page-nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;gap:clamp(18px,2vw,34px);overflow-x:auto}
.page-nav a{white-space:nowrap;font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:20px 0;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.page-nav a:hover,.page-nav a.active{color:var(--ink);border-bottom-color:var(--verd)}

/* content */
.content-section{padding:clamp(38px,4.5vw,72px) 0}

/* ===================== QUI SOM (Presentació) ===================== */
.qs-intro-text{max-width:880px;margin:0 auto;text-align:center}
.qs-intro-text .eyebrow{justify-content:center;display:flex;width:fit-content;margin:0 auto 18px}
/* Eyebrow dins de bloques centrats sempre en línia pròpia */
.section-header .eyebrow,.section-header > .eyebrow.center{display:flex;width:fit-content;margin:0 auto 14px;justify-content:center}
.qs-intro-text h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin-bottom:28px;position:relative;display:inline-block}
.qs-intro-text h2::after{content:"";display:block;width:64px;height:4px;background:var(--acc,var(--blau));margin:18px auto 0;border-radius:3px;opacity:.9}
.qs-intro-text .qs-lede{font-size:var(--fs-lede);color:var(--ink);font-weight:300;line-height:1.55;margin-bottom:24px}
.qs-intro-text p{color:var(--ink-soft);line-height:1.7;margin-bottom:18px;max-width:760px;margin-left:auto;margin-right:auto}
.qs-dades .stats-grid{grid-template-columns:repeat(3,1fr)}
.qs-dades .stat-number{font-size:clamp(2.2rem,4.4vw,3.8rem)}
@media (max-width:760px){
  .qs-dades .stats-grid{grid-template-columns:1fr}
}

/* MVV: Missió, Visió, Valors */
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.mvv-card{background:var(--paper);border:1px solid var(--line);padding:clamp(28px,3vw,40px);position:relative;border-radius:6px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.mvv-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--card-acc,var(--verd));transform:scaleX(.4);transform-origin:left;transition:transform .5s var(--ease)}
.mvv-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 22px 50px -30px rgba(0,0,0,.18)}
.mvv-card:hover::before{transform:scaleX(1)}
.mvv-num{font-size:.74rem;font-weight:700;letter-spacing:.2em;color:var(--card-acc,var(--verd));display:inline-block}
.mvv-card h3{font-size:1.6rem;font-weight:500;letter-spacing:-.01em;margin:0 0 4px;line-height:1.15}
.mvv-card p{color:var(--ink-soft);font-size:1rem;line-height:1.7;margin:0}
.mvv-list{margin:0;padding:0;list-style:none;color:var(--ink-soft)}
.mvv-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.55}
.mvv-list li:last-child{border-bottom:none}
.mvv-list li strong{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .mvv-grid{grid-template-columns:1fr}
}

/* Documents */
.docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);max-width:1080px;margin:0 auto}
.doc-card{display:flex;align-items:center;gap:18px;padding:22px 26px;background:var(--paper);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;position:relative;overflow:hidden}
.doc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--card-acc,var(--coral));transform:scaleY(.4);transform-origin:top;transition:transform .5s var(--ease)}
.doc-card:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 22px 50px -30px rgba(0,0,0,.18)}
.doc-card:hover::before{transform:scaleY(1)}
.doc-icon{width:28px;height:28px;stroke:var(--card-acc,var(--coral));flex-shrink:0}
.doc-text{display:flex;flex-direction:column;gap:2px;flex:1}
.doc-name{font-size:.98rem;font-weight:600;letter-spacing:-.005em}
.doc-meta{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.doc-arrow{font-size:1.2rem;color:var(--muted);transition:transform .3s var(--ease),color .3s}
.doc-card:hover .doc-arrow{transform:translateY(3px);color:var(--card-acc,var(--coral))}
@media (max-width:760px){
  .docs-grid{grid-template-columns:1fr}
}

/* ===================== ARTICLE (Detall de notícia) ===================== */
.article-hero{width:100vw;margin-left:calc(50% - 50vw);height:clamp(320px,50vh,560px);background:#e4e4e4 center center/cover no-repeat;filter:grayscale(1);transition:filter .5s var(--ease);position:relative}
.article-hero:hover{filter:grayscale(0)}
.article-back-bar{position:relative;width:100%;padding:clamp(28px,3vw,44px) var(--pad) 0}
.article-back-bar a{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .3s,gap .3s var(--ease)}
.article-back-bar a:hover{color:var(--acc,var(--verd));gap:14px}
.article-container{max-width:760px;margin:0 auto;padding:clamp(30px,4vw,60px) var(--pad)}
.article-meta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-bottom:22px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--acc,var(--verd))}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5}
.article-meta .a-cat{color:var(--muted)}
.article-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.08;margin:0 0 30px;color:var(--ink)}
.article-title::after{content:"";display:block;width:64px;height:5px;background:var(--acc,var(--verd));margin-top:26px;border-radius:3px;opacity:.9}
.article-lede{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:300;line-height:1.5;color:var(--ink);margin:0 0 40px}
.article-body p{font-size:1.05rem;line-height:1.75;color:var(--ink-soft);margin:0 0 22px}
.article-body p strong{color:var(--ink);font-weight:600}
.article-body h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:44px 0 20px;color:var(--ink);position:relative;padding-left:18px}
.article-body h3::before{content:"";position:absolute;left:0;top:.28em;width:4px;height:calc(100% - .5em);background:var(--acc,var(--verd));border-radius:2px}
.article-quote{margin:40px 0;padding:26px 34px;border-left:4px solid var(--acc,var(--verd));background:var(--paper-2);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:300;line-height:1.45;color:var(--ink);font-style:normal;border-radius:0 6px 6px 0;position:relative}
.article-quote::before{content:"\201C";position:absolute;left:14px;top:26px;font-size:2.6rem;line-height:0;color:var(--acc,var(--verd));opacity:.4;font-family:Georgia,serif}
.article-quote p{margin:0}
.article-quote cite{display:block;margin-top:16px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted);font-style:normal}
.article-body ul{margin:0 0 22px;padding-left:22px;color:var(--ink-soft);line-height:1.7}
.article-body ul li{margin-bottom:8px}
/* Bloc de notícies relacionades */
.article-related{background:var(--paper-2);padding:clamp(50px,6vw,80px) var(--pad);width:100vw;margin-left:calc(50% - 50vw)}
.article-related-inner{max-width:1180px;margin:0 auto}
.article-related-inner .noticies-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .article-related-inner .noticies-grid{grid-template-columns:1fr}
}

/* ===================== EQUIP ===================== */
.equip-lede{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(28px,4vw,60px);max-width:1080px;margin:0 auto}
.equip-bignum{font-size:clamp(5rem,12vw,10rem);font-weight:200;line-height:.9;letter-spacing:-.04em;color:var(--acc,var(--groc));font-family:'Montserrat',sans-serif}
.equip-lede-text p{font-size:var(--fs-lede);color:var(--ink-soft);font-weight:300;margin-top:14px;line-height:1.45}
@media (max-width:760px){
  .equip-lede{grid-template-columns:1fr;text-align:center}
}

/* Patronat */
.patronat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.patronat-card{text-align:center;background:var(--paper);padding:clamp(22px,2.5vw,34px) 18px;border:1px solid var(--line);border-radius:8px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;position:relative;overflow:hidden}
.patronat-card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc,var(--verd));transform:scaleX(.3);transform-origin:left;transition:transform .5s var(--ease)}
.patronat-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 22px 50px -28px rgba(0,0,0,.18)}
.patronat-card:hover::before{transform:scaleX(1)}
.team-photo{aspect-ratio:1;border-radius:50%;background:var(--paper-2);border:2px dashed color-mix(in srgb,var(--acc,var(--verd)) 50%,var(--line));display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto clamp(14px,1.6vw,22px);color:var(--muted);max-width:160px;transition:border-color .4s,background .4s}
.patronat-card:hover .team-photo{border-color:var(--acc,var(--verd));background:#fff}
.team-photo svg{width:30px;height:30px;opacity:.5;margin-bottom:6px;stroke:var(--acc,var(--verd))}
.team-photo span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.patronat-card h4{font-size:1.05rem;font-weight:600;margin-bottom:4px;letter-spacing:-.005em}
.patronat-rol{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;margin:0}

/* Equip professional */
.pros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.pros-card{background:var(--paper);border:1px solid var(--line);padding:clamp(28px,3vw,40px);position:relative;border-radius:6px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.pros-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--card-acc,var(--blau));transform:scaleY(.4);transform-origin:top;transition:transform .5s var(--ease)}
.pros-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 22px 50px -30px rgba(0,0,0,.18)}
.pros-card:hover::before{transform:scaleY(1)}
.pros-num{font-size:.74rem;font-weight:700;letter-spacing:.2em;color:var(--card-acc,var(--blau));display:inline-block}
.pros-card h3{font-size:1.35rem;font-weight:500;letter-spacing:-.01em;margin:0;line-height:1.2}
.pros-card ul{margin:6px 0 0;padding-left:0;list-style:none;color:var(--ink-soft)}
.pros-card ul li{padding:6px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.pros-card ul li:last-child{border-bottom:none}
.pros-card p{color:var(--ink-soft);font-size:1rem;line-height:1.65;margin:0}
.pros-card-wide{grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:clamp(20px,3vw,40px)}
.pros-card-wide .pros-num{flex:0 0 auto;margin-top:6px}
.pros-card-wide>div{flex:1}
@media (max-width:900px){
  .patronat-grid{grid-template-columns:repeat(2,1fr)}
  .pros-grid{grid-template-columns:1fr}
  .pros-card-wide{flex-direction:column}
}
.content-section:nth-child(even){background:var(--paper-2)}
.content-grid{display:grid;grid-template-columns:1.7fr .9fr;gap:clamp(40px,6vw,90px);align-items:start;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.content-section>.container{max-width:var(--maxw)}
.content-main h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:300;letter-spacing:-.02em;margin-bottom:24px;line-height:1.12}
.content-main h3{font-size:1.35rem;font-weight:600;margin:46px 0 16px;letter-spacing:-.01em}
.content-main h4{font-size:1.05rem;font-weight:600;margin:26px 0 10px}
.content-main p{margin-bottom:16px;color:var(--ink-soft);line-height:1.8;max-width:64ch}
.content-main ul,.content-main ol{margin:18px 0 24px 22px}
.content-main li{margin-bottom:11px;color:var(--ink-soft);line-height:1.7}
.content-main table{width:100%;border-collapse:collapse;margin:18px 0}
.content-main table td{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top}

/* sidebar */
.sidebar{position:sticky;top:96px}
.sidebar-box{background:var(--white);border:1px solid var(--line);padding:30px;margin-bottom:20px}
.sidebar-box h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:22px;font-weight:600}
.sidebar-item{display:flex;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.sidebar-item:last-child{border-bottom:none}
.sidebar-icon{font-size:1.1em;filter:grayscale(1);opacity:.7}
.sidebar-text{font-size:.92rem}
.sidebar-text strong{display:block;margin-bottom:2px}
.sidebar-text span{color:var(--muted);font-size:.88rem}
.sidebar-text a{border-bottom:1px solid var(--line);transition:border-color .3s}
.sidebar-text a:hover{border-color:var(--ink)}

/* quote box */
.quote-box{position:relative;background:transparent;border:none;padding:4px 0 4px 52px;margin:42px 0;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:300;font-style:normal;line-height:1.45;color:var(--ink);max-width:60ch;border-left:3px solid var(--acc,var(--verd))}
.quote-box{padding-left:32px}
.quote-box::before{content:"\201C";position:absolute;left:18px;top:14px;font-size:3.4rem;line-height:0;color:var(--acc,var(--verd))}
.quote-box .quote-author{display:block;margin-top:14px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted);font-style:normal}
.quote-author{margin-top:18px;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600}

/* features */
.features-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:36px 0}
.feature-item{text-align:center;padding:28px 16px;background:var(--white);border:1px solid var(--line)}
.feature-icon{font-size:1.7em;margin-bottom:14px;filter:grayscale(1)}
.feature-item h4{font-size:.86rem;margin-bottom:6px;font-weight:600}
.feature-item p{font-size:.76rem;color:var(--muted)}

/* faq */
.faq-list{max-width:840px}
.faq-item{border-bottom:1px solid var(--line);padding:0}
.faq-question{font-weight:500;font-size:1.08rem;padding:26px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .3s}
.faq-question:hover{color:var(--ink-soft)}
.faq-question::after{content:"+";font-size:1.5em;font-weight:200;transition:transform .35s var(--ease)}
.faq-item.open .faq-question::after{transform:rotate(45deg)}
.faq-answer{color:var(--muted);line-height:1.75;max-height:0;overflow:hidden;transition:max-height .45s var(--ease),padding .45s var(--ease)}
.faq-item.open .faq-answer{max-height:340px;padding-bottom:26px}

/* forms */
.form-section{background:var(--surface-dark);color:var(--paper);padding:clamp(40px,5vw,64px);margin:40px 0}
.form-section h3{text-align:center;margin-bottom:30px;font-weight:300;font-size:1.6rem;color:#fff}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:840px;margin:0 auto}
.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:.72rem;margin-bottom:9px;text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.form-group input,.form-group textarea,.form-group select{
  padding:14px 16px;border:1px solid rgba(255,255,255,.22);border-radius:0;background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:.95rem;transition:border-color .3s,background .3s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.12)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.42)}
.form-group textarea{min-height:110px;resize:vertical}
.form-group select option{color:#000}
.form-submit{text-align:center;margin-top:32px}

/* donació page */
.donacio-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.donacio-form-box{background:var(--white);border:1px solid var(--line);padding:clamp(30px,4vw,44px);position:sticky;top:96px}
.donacio-form-box h3{font-size:1.4rem;margin-bottom:28px;font-weight:500}
.amount-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px}
.amount-option{padding:20px 12px;border:1px solid var(--line);text-align:center;cursor:pointer;transition:.25s}
.amount-option:hover,.amount-option.active{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.amount-option .amount{font-size:1.35rem;font-weight:500}
.amount-option .period{font-size:.78rem;opacity:.65}
.type-selector{display:flex;gap:10px;margin-bottom:28px}
.type-option{flex:1;padding:15px;border:1px solid var(--line);text-align:center;cursor:pointer;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;transition:.25s}
.type-option:hover{border-color:var(--muted)}
.type-option.active{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.impacte-box{background:var(--paper-2);border:1px solid var(--line);padding:22px;margin:28px 0}
.impacte-box h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px;font-weight:600}
.impacte-box p{font-size:.96rem;margin:0;line-height:1.6}
.donacio-form-box .form-group label{color:var(--muted);opacity:1}
.donacio-form-box .form-group input{background:var(--white);border-color:var(--line);color:var(--ink)}
.donacio-form-box .form-group input:focus{border-color:var(--ink)}

/* collabora cards */
.collabora-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.collabora-card{background:var(--white);border:1px solid var(--line);padding:clamp(30px,3vw,40px);text-align:center;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;position:relative;overflow:hidden;border-radius:6px}
.collabora-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--card-acc,var(--taronja));transform:scaleX(.35);transform-origin:left;transition:transform .5s var(--ease)}
.collabora-card:hover::before{transform:scaleX(1)}
.collabora-card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -42px rgba(32,32,32,.22)}
.collabora-card:nth-child(1){--card-acc:var(--taronja)}
.collabora-card:nth-child(2){--card-acc:var(--verd)}
.collabora-card:nth-child(3){--card-acc:var(--blau)}
.collabora-card:nth-child(4){--card-acc:var(--groc)}
.collabora-card:nth-child(5){--card-acc:var(--rosa)}
.collabora-card:nth-child(6){--card-acc:var(--coral)}
.collabora-icon{font-size:2em;margin-bottom:20px;color:var(--card-acc,var(--taronja));filter:none;transition:transform .4s var(--ease)}
.collabora-card:hover .collabora-icon{transform:scale(1.1)}
.collabora-card h3{font-size:1.2rem;margin-bottom:14px;font-weight:600}
.collabora-card p{color:var(--muted);font-size:.92rem;margin-bottom:22px;line-height:1.65}
.collabora-card .btn{--acc:var(--card-acc,var(--taronja))}

/* Missió + Visió: imatge gran + dues targetes superposades dins de la imatge */
#missio .content-section{padding-top:0;padding-bottom:0}
.mv-wrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.mv-hero{position:relative;height:clamp(560px,80vh,820px);overflow:hidden;isolation:isolate;background:#222}
.mv-hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.10)),url('../img/imatges/fachada/fachada-4.jpg') center center/cover no-repeat;filter:grayscale(1)}
.mv-title{position:absolute;top:clamp(40px,5vw,80px);left:clamp(30px,5vw,80px);z-index:2;font-size:clamp(1.8rem,3.4vw,3rem);font-weight:900;letter-spacing:-.02em;line-height:1;color:#fff;max-width:22ch;text-transform:uppercase}
.mv-cards{position:absolute;right:clamp(20px,4vw,80px);bottom:clamp(30px,4vw,60px);width:min(820px,60%);display:grid;grid-template-columns:1fr 1fr;gap:0;z-index:2;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.mv-card{padding:clamp(30px,2.8vw,44px);color:#fff;display:flex;flex-direction:column;justify-content:flex-start;min-height:clamp(260px,28vw,340px)}
.mv-card.is-verd{background:var(--verd)}
.mv-card.is-blau{background:#3a7da6}
.mv-card .mv-label{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.85;margin-bottom:clamp(18px,2.2vw,28px)}
.mv-card .mv-text{font-size:clamp(.94rem,1.05vw,1.08rem);line-height:1.6;color:#fff;font-weight:400}
@media (max-width:900px){
  .mv-hero{height:auto;min-height:clamp(280px,42vw,420px)}
  .mv-hero::before{position:relative;width:100%;height:clamp(280px,42vw,420px);inset:auto}
  .mv-title{position:relative;top:auto;left:auto;padding:clamp(40px,6vw,60px) var(--pad);background:var(--ink)}
  .mv-cards{position:static;width:auto;right:auto;bottom:auto;margin:0;box-shadow:none}
}
@media (max-width:600px){
  .mv-cards{grid-template-columns:1fr}
}

/* Història: anul·la el padding entre seccions */
#historia .content-section:first-of-type{padding-bottom:0}
#historia .tl-section{padding-top:clamp(28px,3vw,48px)}

/* Origen: tres columnes amb línies fines verticals */
.origen-block{position:relative;width:100%;padding:clamp(30px,3.5vw,56px) var(--pad);background:var(--paper)}
.origen-inner{max-width:1280px;margin:0 auto}
.origen-title{font-size:clamp(1.6rem,2.6vw,2.2rem)!important;font-weight:300!important;letter-spacing:-.01em!important;margin:0 0 clamp(34px,4vw,54px)!important;color:var(--ink);line-height:1.1}
.origen-eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.origen-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;position:relative}
.origen-col{padding:clamp(8px,1vw,14px) clamp(28px,3vw,42px);position:relative}
.origen-col:first-child{padding-left:0}
.origen-col:last-child{padding-right:0}
.origen-col+.origen-col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.origen-col .col-n{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;display:block}
.origen-col p{font-size:1rem;line-height:1.7;color:var(--ink-soft);margin:0;font-weight:400}
.origen-col p strong{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .origen-cols{grid-template-columns:1fr;gap:0}
  .origen-col{padding:24px 0}
  .origen-col+.origen-col::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
}

/* Cita destacada: fons negre, text blanc gran centrat */
.feature-quote{position:relative;width:100%;background:#161616;color:#fff;padding:clamp(50px,7vw,100px) var(--pad);display:flex;justify-content:center;align-items:center;text-align:center}
.feature-quote p{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:300;line-height:1.35;letter-spacing:-.015em;color:#fff;max-width:24ch;margin:0;font-style:normal}
.feature-quote .fq-mk{color:rgba(255,255,255,.35);font-size:1.2em;line-height:0;display:inline-block;vertical-align:middle}

/* Valors: bandes de color expandibles (estil "Mont-Royal") */
.mv-wrap+.vals-section{margin-top:-1px}
.vals-section{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:0;padding:0;display:block}
h2.vals-title,.vals-title{font-size:clamp(.78rem,1vw,.95rem)!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase;padding:clamp(22px,2.5vw,32px) var(--pad);background:#161616;color:#fff;margin:0;line-height:1}
.vals-bands{display:flex;width:100%;min-height:clamp(440px,55vw,620px);overflow:hidden;background:#161616}
.vb{position:relative;overflow:hidden;background:var(--c,#333);color:#fff;flex:1;transition:flex .7s cubic-bezier(.65,.05,.36,1);cursor:pointer;border-right:1px solid rgba(0,0,0,.08)}
.vb:last-child{border-right:none}
.vb.is-open{flex:5}
/* spine (banda contreta): nom + número vertical */
.vb-spine{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(28px,3vw,40px) 0;transition:opacity .35s ease;pointer-events:none}
.vb-spine-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(1.4rem,1.8vw,1.7rem);font-weight:700;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.vb-spine-num{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:700;letter-spacing:.05em;color:#fff;opacity:.95}
.vb.is-open .vb-spine{opacity:0}
/* content (banda expandida) */
.vb-content{position:absolute;inset:0;padding:clamp(40px,4.5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;opacity:0;transition:opacity .4s ease .15s;pointer-events:none}
.vb.is-open .vb-content{opacity:1;pointer-events:auto}
.vb-content .vb-num-big{font-size:clamp(.86rem,1vw,1rem);font-weight:700;letter-spacing:.16em;opacity:.85}
.vb-content h3{font-size:clamp(2.4rem,4.5vw,4.6rem);font-weight:900;letter-spacing:-.02em;line-height:.95;text-transform:uppercase;color:#fff;margin:auto 0}
.vb-content p{font-size:clamp(1rem,1.15vw,1.18rem);line-height:1.55;color:#fff;font-weight:400;max-width:50ch}
@media (max-width:760px){
  .vals-bands{flex-direction:column;min-height:auto}
  .vb{min-height:80px}
  .vb.is-open{flex:1;min-height:360px}
  .vb-spine{flex-direction:row;padding:0 24px;justify-content:space-between}
  .vb-spine-name{writing-mode:horizontal-tb;transform:none}
  .vb-content{padding:30px 24px}
  .vb-content h3{font-size:2.2rem}
}

/* desgravació */
.desgravacio-box{background:var(--white);border:1px solid var(--line);padding:clamp(30px,4vw,44px);margin:36px 0;border-radius:8px;position:relative;overflow:hidden}
.desgravacio-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc,var(--verd))}
.desgravacio-box h3{margin-bottom:18px;font-weight:600;color:var(--ink);position:relative;display:inline-block}
.desgravacio-box h3::after{content:"";display:block;width:48px;height:3px;background:var(--acc,var(--verd));margin-top:10px;border-radius:2px;opacity:.85}

/* ===================== COL·LABORA — Look & Feel coherent ===================== */
/* Sidebar-box: petit toc de color del page */
#collabora .sidebar-box,#donar .sidebar-box,#voluntariat .sidebar-box,#empreses .sidebar-box,#llegats .sidebar-box,#art .sidebar-box,#botiga .sidebar-box{position:relative;border-radius:6px;overflow:hidden}
#collabora .sidebar-box::before,#donar .sidebar-box::before,#voluntariat .sidebar-box::before,#empreses .sidebar-box::before,#llegats .sidebar-box::before,#art .sidebar-box::before,#botiga .sidebar-box::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--acc,var(--taronja));opacity:.7}
#collabora .sidebar-box.is-dark::before,#voluntariat .sidebar-box[style*="background:var(--ink)"]::before{opacity:1}
#collabora .sidebar-icon,#donar .sidebar-icon,#voluntariat .sidebar-icon,#empreses .sidebar-icon,#llegats .sidebar-icon,#art .sidebar-icon,#botiga .sidebar-icon{color:var(--acc,var(--taronja))}
/* Botons primary i dark dins de col·labora hereden el color de pàgina */
#collabora .btn-primary,#donar .btn-primary,#voluntariat .btn-primary,#empreses .btn-primary,#llegats .btn-primary,#art .btn-primary,#botiga .btn-primary{--acc:inherit}
#collabora .btn-dark,#donar .btn-dark,#voluntariat .btn-dark,#empreses .btn-dark,#llegats .btn-dark,#art .btn-dark,#botiga .btn-dark{background:var(--acc,var(--ink));border-color:var(--acc,var(--ink))}
#collabora .btn-dark:hover,#donar .btn-dark:hover,#voluntariat .btn-dark:hover,#empreses .btn-dark:hover,#llegats .btn-dark:hover,#art .btn-dark:hover,#botiga .btn-dark:hover{filter:brightness(.92)}
/* h3 amb ratlla decorativa dins .content-main de Col·labora */
#collabora .content-main h3,#donar .content-main h3,#voluntariat .content-main h3,#empreses .content-main h3,#llegats .content-main h3,#art .content-main h3,#botiga .content-main h3{position:relative;padding-top:8px;margin-top:42px}
#collabora .content-main h3::before,#donar .content-main h3::before,#voluntariat .content-main h3::before,#empreses .content-main h3::before,#llegats .content-main h3::before,#art .content-main h3::before,#botiga .content-main h3::before{content:"";display:block;width:42px;height:3px;background:var(--acc,var(--taronja));margin-bottom:14px;border-radius:2px;opacity:.85}
/* Section-header de col·labora amb la mateixa ratlla horitzontal sota h2 */
#collabora .section-header h2::after,#empreses .section-header h2::after{background:var(--acc,var(--taronja))}
/* Donació: type-option i amount-option actives amb color */
#donar .type-option.active,#donar .amount-option.active{border-color:var(--acc,var(--verd));color:var(--acc,var(--verd))}
#donar .amount-option.active .amount{color:var(--acc,var(--verd))}
/* Quote-box pren el color de la pàgina */
#collabora .quote-box,#donar .quote-box,#voluntariat .quote-box,#empreses .quote-box,#llegats .quote-box,#art .quote-box,#botiga .quote-box{border-left-color:var(--acc,var(--verd))}
#collabora .quote-box::before,#donar .quote-box::before,#voluntariat .quote-box::before,#empreses .quote-box::before,#llegats .quote-box::before,#art .quote-box::before,#botiga .quote-box::before{color:var(--acc,var(--verd))}
.desgravacio-table{width:100%;margin:20px 0}
.desgravacio-table td{padding:14px 0;border-bottom:1px solid var(--line)}
.desgravacio-table td:last-child{text-align:right;font-weight:600;font-size:1.2em;color:var(--verd)}

/* contacte */
.contacte-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,70px)}
.contacte-info h3{font-size:1.2rem;margin:32px 0 16px;font-weight:600}
.contacte-info h3:first-child{margin-top:0}
.contacte-item{display:flex;gap:15px;padding:14px 0}
.contacte-icon{font-size:1.1em;filter:grayscale(1);opacity:.7}
.mapa-placeholder{height:300px;margin-top:30px;aspect-ratio:auto}
.social-links{display:flex;gap:12px;margin-top:18px}
.social-link{width:46px;height:46px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;letter-spacing:.04em;transition:.3s}
.social-link:hover{background:var(--ink);color:var(--paper)}

/* galeria */
.galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:46px}
.galeria-item{aspect-ratio:4/3;height:auto}
.galeria-item.large{grid-column:span 2;grid-row:span 2}

/* badge */
.badge{display:inline-block;padding:5px 13px;background:var(--ink);color:var(--paper);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;border-radius:30px;margin-bottom:14px}

/* ===================== PÀGINES INTERNES DE SERVEIS (estil Halston) ===================== */
.svc-hero{position:relative;height:80vh;min-height:520px;background:#222 center center/cover no-repeat;color:#fff;display:flex;align-items:flex-end;padding:0 var(--pad) clamp(40px,5vh,70px);overflow:hidden}
.svc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,.05) 60%);pointer-events:none}
.svc-hero h1{position:relative;z-index:2;font-size:clamp(2.4rem,7vw,5.5rem);font-weight:900;letter-spacing:-.02em;line-height:.92;color:#fff;text-transform:uppercase;max-width:18ch}

/* Intro: sumari + galeria — fons BLANC */
.svc-intro{background:var(--white);padding:clamp(60px,8vw,120px) 0}
.svc-intro-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(40px,5vw,80px);align-items:start}
.svc-summary{font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:500;line-height:1.32;color:var(--ink);letter-spacing:-.01em}
.svc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.svc-gallery .ph{aspect-ratio:3/2;background:#e4e4e4 center/cover no-repeat;border:1px solid var(--line);filter:grayscale(1)}

/* Detalls: taula LABEL | VALOR — fons NEGRE per màxim contrast */
.svc-details{background:var(--surface-dark);padding:clamp(60px,8vw,120px) 0;color:#fff}
.svc-detail-table{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.svc-detail-row{display:grid;grid-template-columns:1fr 2.2fr;gap:clamp(30px,5vw,80px);align-items:start;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.svc-detail-row:first-child{border-top:1px solid rgba(255,255,255,.16)}
.svc-detail-row .label{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);padding-top:4px}
.svc-detail-row .value{font-size:1.05rem;color:#fff;font-weight:500;line-height:1.4}
.svc-detail-row .value.title{font-size:clamp(1.3rem,2vw,1.65rem);font-weight:700;letter-spacing:-.01em;text-transform:none}

/* Cos descriptiu després de la taula — fons BLANC */
.svc-body{background:var(--white);padding:clamp(60px,8vw,120px) 0}
.svc-body-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 2.2fr;gap:clamp(30px,5vw,80px);align-items:start}
.svc-body-inner h3{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:600;margin:0 0 12px;color:var(--ink)}
.svc-body-inner h3:not(:first-child){margin-top:36px}
.svc-body-inner .col-r p{font-size:1.04rem;line-height:1.7;color:var(--ink-soft);margin-bottom:16px}
.svc-body-inner .col-l-label{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);padding-top:6px}

/* Cards estil Halston — animació de fade-in pur escalonat (sense translate ni blur) */
.svc-stat-card[data-reveal],.svc-stat-imgs[data-reveal]>.ph{opacity:0;transform:none;filter:none;transition:opacity 1.2s var(--ease)}
.svc-stat-card[data-reveal].in,.svc-stat-imgs[data-reveal].in>.ph{opacity:1}
/* stagger entre cards i imatges */
.svc-stats-block .svc-stat-card[data-reveal]:nth-child(1){transition-delay:0s}
.svc-stats-block .svc-stat-card[data-reveal]:nth-child(2){transition-delay:.12s}
.svc-stats-block .svc-stat-card[data-reveal]:nth-child(3){transition-delay:.24s}
.svc-stats-block .svc-stat-card[data-reveal]:nth-child(4){transition-delay:.36s}
.svc-stats-block .svc-stat-card[data-reveal]:nth-child(5){transition-delay:.48s}
.svc-stat-imgs[data-reveal]>.ph:nth-child(1){transition-delay:.18s}
.svc-stat-imgs[data-reveal]>.ph:nth-child(2){transition-delay:.42s}

/* Cards estil Halston (stats / serveis amb número gran + imatges al costat) */
.svc-stats{background:var(--white);padding:clamp(60px,8vw,120px) 0}
.svc-stats-block{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.svc-stats-block+.svc-stats-block{margin-top:clamp(50px,7vw,90px)}
.svc-stats-title{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:clamp(24px,3vw,40px)}
.svc-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2vw,28px);align-items:stretch}
.svc-stat-cards{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.svc-stat-card{background:var(--paper-2);padding:clamp(28px,3vw,40px);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:14px 24px;border-bottom:2px solid var(--ink);flex:1;min-height:clamp(180px,22vw,260px)}
.svc-stat-card .card-num{grid-column:2;grid-row:1/3;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em;text-align:right;align-self:start}
.svc-stat-card .card-desc{grid-column:1;grid-row:1;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1.55;max-width:30ch}
.svc-stat-card .card-label{grid-column:1/-1;grid-row:3;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:auto;padding-top:18px;border-top:1px solid rgba(20,20,20,.18)}
.svc-stat-imgs{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.svc-stat-imgs .ph{flex:1;aspect-ratio:5/4;background:#e4e4e4 center/cover no-repeat;border:1px solid var(--line);filter:grayscale(1)}
@media (max-width:900px){
  .svc-stats-grid{grid-template-columns:1fr}
  .svc-stat-imgs{flex-direction:row}
  .svc-stat-imgs .ph{aspect-ratio:4/3}
}

/* Llista amb checks */
.svc-checks{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:14px}
.svc-checks li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.svc-checks li::before{content:"";flex:0 0 auto;width:22px;height:22px;border:1.5px solid var(--ink-soft);border-radius:50%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.4'><polyline points='5 13 10 18 19 8'/></svg>") center/13px no-repeat;margin-top:2px}

@media (max-width:900px){
  .svc-hero{height:60vh;min-height:380px}
  .svc-intro-inner,.svc-body-inner{grid-template-columns:1fr;gap:30px}
  .svc-detail-row{grid-template-columns:1fr;gap:8px}
  .svc-detail-row .label{padding-top:0}
}

/* ===================== SERVEIS — tabs apilables a dalt ===================== */
:root{--sr-tab-h:46px;--sr-hdr-off:100px}
.sr-tab{position:sticky;top:0;z-index:25;height:var(--sr-tab-h);background:var(--acc,rgba(20,20,20,.92));color:#fff;display:flex;align-items:center;gap:clamp(18px,3vw,46px);padding:0 var(--pad);border-bottom:1px solid rgba(255,255,255,.18);cursor:pointer;font-family:inherit;transition:filter .3s}
.sr-tab:hover{filter:brightness(1.08)}
.sr-tab .srt-n{font-size:.96rem;font-weight:700;letter-spacing:.14em;color:#fff;min-width:36px}
.sr-tab .srt-t{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff}
/* taps apilades — cada tab té un top progressiu (relatiu a la posició del scroll) */
.sr-tab[data-target="sr-1"]{top:calc(var(--sr-hdr-off))}
.sr-tab[data-target="sr-2"]{top:calc(var(--sr-hdr-off) + var(--sr-tab-h) * 1)}
.sr-tab[data-target="sr-3"]{top:calc(var(--sr-hdr-off) + var(--sr-tab-h) * 2)}
.sr-tab[data-target="sr-4"]{top:calc(var(--sr-hdr-off) + var(--sr-tab-h) * 3)}
.sr-tab[data-target="sr-5"]{top:calc(var(--sr-hdr-off) + var(--sr-tab-h) * 4)}
.sr-tab[data-target="sr-6"]{top:calc(var(--sr-hdr-off) + var(--sr-tab-h) * 5)}
@media (max-width:760px){
  :root{--sr-tab-h:42px}
  .sr-tab .srt-t{font-size:.7rem;letter-spacing:.12em}
}

/* ===================== SERVEIS — files alternades (estil Halston) ===================== */
.serveis-rows{background:var(--paper-3);padding:0!important}
.servei-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;min-height:78vh}
.servei-row .sr-text{padding:clamp(50px,8vw,110px) clamp(30px,5vw,90px);max-width:620px;justify-self:start;align-self:center}
.servei-row.flip .sr-text{justify-self:end}
.servei-row .sr-img{position:relative;background:#dcdcdc center center/cover no-repeat;overflow:hidden;height:100%;min-height:78vh;align-self:stretch;filter:grayscale(1)}
.servei-row .sr-img::after{content:"B/N";position:absolute;top:24px;right:24px;font-size:.6rem;font-weight:600;letter-spacing:.18em;color:#fff;background:rgba(20,20,20,.4);backdrop-filter:blur(6px);padding:5px 11px;border-radius:20px}
.servei-row.flip .sr-img{order:-1}
.servei-row .sr-num{font-size:.74rem;font-weight:600;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;display:inline-flex;align-items:center;gap:.7em;margin-bottom:24px}
.servei-row .sr-num::before{content:"";width:30px;height:2px;background:var(--acc,var(--muted-2));border-radius:2px}
.servei-row .sr-title{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-bottom:22px;color:var(--ink)}
.servei-row .sr-desc{font-size:1.02rem;line-height:1.75;color:var(--ink-soft);margin-bottom:32px}
.servei-row .sr-cta{margin-top:4px}
.servei-row .sr-badge{display:inline-block;padding:5px 13px;background:var(--ink);color:var(--paper);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;border-radius:30px;margin-bottom:18px}
@media (max-width:900px){
  .servei-row{grid-template-columns:1fr;min-height:auto}
  .servei-row .sr-img{min-height:54vh;order:-1!important}
  .servei-row .sr-text{padding:50px var(--pad);max-width:none;justify-self:auto!important}
}

/* ===================== TIMELINE (carrusel horitzontal) ===================== */
.tl-section{overflow:hidden}
.tl-title{font-size:1.35rem;font-weight:600;margin-bottom:34px}
.timeline-wrap{position:relative}
.timeline{overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.timeline::-webkit-scrollbar{height:0;display:none}
.timeline.drag{cursor:grabbing;scroll-snap-type:none}
.timeline.drag *{user-select:none}
.timeline-track{display:flex;width:max-content;padding:0 var(--pad)}
.tl-item{flex:0 0 clamp(258px,27vw,360px);scroll-snap-align:start;display:flex;flex-direction:column}
.tl-head{padding-right:36px;min-height:152px}
.tl-year{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:300;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px;line-height:1}
.tl-desc{font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;line-height:1.55;color:var(--ink-soft);margin:0}
.tl-rail{position:relative;height:1px;background:var(--ink);margin:6px 0 26px}
.tl-dot{position:absolute;left:0;top:50%;width:10px;height:10px;background:var(--paper);border:1.5px solid var(--ink);transform:translateY(-50%);transition:background .3s,border-color .3s}
.tl-item:hover .tl-dot{background:var(--verd);border-color:var(--verd)}
.tl-item.current .tl-dot{background:var(--ink)}
.tl-media{padding-right:36px}
.tl-media .tl-img{aspect-ratio:4/5;height:auto}
.tl-hint{margin-top:26px;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
@media (max-width:760px){.tl-item{flex-basis:76vw}.tl-head{min-height:130px}}

/* ===================== FOOTER ===================== */
footer{background:var(--surface-dark);color:var(--paper-2);padding:clamp(35px,4vw,60px) 0 44px}
.footer-top{display:grid;grid-template-columns:1.6fr .8fr .8fr .8fr;gap:clamp(34px,4vw,60px);max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.footer-brand .fb-mark{font-size:clamp(2rem,4vw,3.2rem);font-weight:200;letter-spacing:-.02em;line-height:1.05;color:#fff;margin-bottom:24px}
.footer-col h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:24px;color:rgba(255,255,255,.5);font-weight:600}
.footer-col p{color:rgba(255,255,255,.62);font-size:.92rem;line-height:1.8}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:13px}
.footer-col a{color:rgba(255,255,255,.78);font-size:.92rem;transition:color .3s,padding-left .3s}
.footer-col a:hover{color:#fff;padding-left:6px}
.footer-bottom{max-width:var(--maxw);margin:clamp(50px,6vw,80px) auto 0;padding:30px var(--pad) 0;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.78rem;color:rgba(255,255,255,.5);flex-wrap:wrap}
.footer-bottom a{color:rgba(255,255,255,.6);margin-left:24px;transition:color .3s}
.footer-bottom a:hover{color:#fff}

/* ===================== LANGUAGE TOGGLE ===================== */
[data-lang-es]{display:none}
[data-lang-ca]{display:inline}
body.lang-es [data-lang-es]{display:inline}
body.lang-es [data-lang-ca]{display:none}
div[data-lang-es],p[data-lang-es],section[data-lang-es],li[data-lang-es],h1[data-lang-es],h2[data-lang-es],h3[data-lang-es],h4[data-lang-es],td[data-lang-es]{display:none}
div[data-lang-ca],p[data-lang-ca],section[data-lang-ca],li[data-lang-ca],h1[data-lang-ca],h2[data-lang-ca],h3[data-lang-ca],h4[data-lang-ca],td[data-lang-ca]{display:block}
body.lang-es div[data-lang-es],body.lang-es p[data-lang-es],body.lang-es section[data-lang-es],body.lang-es li[data-lang-es],body.lang-es h1[data-lang-es],body.lang-es h2[data-lang-es],body.lang-es h3[data-lang-es],body.lang-es h4[data-lang-es],body.lang-es td[data-lang-es]{display:block}
body.lang-es div[data-lang-ca],body.lang-es p[data-lang-ca],body.lang-es section[data-lang-ca],body.lang-es li[data-lang-ca],body.lang-es h1[data-lang-ca],body.lang-es h2[data-lang-ca],body.lang-es h3[data-lang-ca],body.lang-es h4[data-lang-ca],body.lang-es td[data-lang-ca]{display:none}
span[data-lang-ca],a[data-lang-ca]{display:inline}
body.lang-es span[data-lang-es],body.lang-es a[data-lang-es]{display:inline}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-item:nth-child(3n){border-right:1px solid var(--line)}
  .stat-item:nth-child(2n){border-right:none}
  .serveis-grid,.noticies-grid,.miles,.collabora-grid{grid-template-columns:repeat(2,1fr)}
  .content-grid,.donacio-grid,.contacte-grid{grid-template-columns:1fr}
  .sidebar,.donacio-form-box{position:static}
  .features-grid{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  nav.main{display:none}
  .burger{display:flex}
  .lang{margin-right:0}
  header nav.main{display:none}
  .stats-grid{grid-template-columns:1fr}
  .stat-item{border-right:none!important}
  .serveis-grid,.noticies-grid,.miles,.collabora-grid,.form-grid,.amount-selector,.galeria-grid{grid-template-columns:1fr}
  .galeria-item.large{grid-column:span 1;grid-row:span 1}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-bottom a{margin:0 12px}
  .sec-head .sh-l{max-width:100%}
  .cursor{display:none}
}