/* ---------- tipografia ---------- */
  @font-face{font-family:"Alegreya";src:url("fonts/alegreya-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Alegreya";src:url("fonts/alegreya-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Alegreya";src:url("fonts/alegreya-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Alegreya";src:url("fonts/alegreya-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:"Alegreya Sans";src:url("fonts/alegreya-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Alegreya Sans";src:url("fonts/alegreya-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Alegreya Sans";src:url("fonts/alegreya-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Alegreya Sans";src:url("fonts/alegreya-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  :root{
    --font-title:"Alegreya",Georgia,serif;
    --font-text:"Alegreya Sans","Helvetica Neue",Arial,sans-serif;
  }
  :root{
    --ground:#E9E6DC;
    --surface:#F5F4EC;
    --surface-2:#D9DECD;
    --ink:#1F2A22;
    --ink-2:#5D6959;
    --sage:#8FA089;
    --sage-deep:#43563F;
    --clay:#AE5E41;
    --line:rgba(31,42,34,.15);
    --line-soft:rgba(31,42,34,.08);
    --skel:rgba(67,86,63,.15);
    --skel-2:rgba(67,86,63,.24);
    --shadow:0 18px 40px -28px rgba(31,42,34,.55);
    --r-arch:180px 180px 10px 10px;
    --step:clamp(4.5rem,7vw,7.5rem);
    color-scheme:light;
  }
  :root[data-theme="dark"]{color-scheme:dark}
  /* El mode fosc NOMÉS s'activa amb el botó de la capçalera:
     així la maqueta es veu sempre en clar encara que el Mac estigui en fosc. */
  @media (prefers-color-scheme: dark){
    :root[data-theme="dark"]{
      --ground:#151915;
      --surface:#1D231D;
      --surface-2:#252C24;
      --ink:#E7E6DD;
      --ink-2:#9CA797;
      --sage:#8FA089;
      --sage-deep:#B6C5AE;
      --clay:#D08462;
      --line:rgba(231,230,221,.16);
      --line-soft:rgba(231,230,221,.08);
      --skel:rgba(231,230,221,.12);
      --skel-2:rgba(231,230,221,.2);
      --shadow:0 18px 40px -28px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --ground:#151915;
    --surface:#1D231D;
    --surface-2:#252C24;
    --ink:#E7E6DD;
    --ink-2:#9CA797;
    --sage:#8FA089;
    --sage-deep:#B6C5AE;
    --clay:#D08462;
    --line:rgba(231,230,221,.16);
    --line-soft:rgba(231,230,221,.08);
    --skel:rgba(231,230,221,.12);
    --skel-2:rgba(231,230,221,.2);
    --shadow:0 18px 40px -28px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--font-text);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1220px;margin-inline:auto;padding-inline:clamp(18px,5vw,68px)}
  section{padding-block:var(--step)}

  /* ---------- placeholder system ---------- */
  .b{display:block;height:.62em;border-radius:2px;background:var(--skel)}
  .b.s{background:var(--skel-2)}
  .lines{display:grid;gap:.62rem}
  .lines.tight{gap:.5rem}
  .hbar{display:block;border-radius:3px;background:var(--skel-2);height:clamp(26px,4.4vw,52px)}
  .hbar+.hbar{margin-top:.42em}
  .hbar.thin{background:var(--skel)}
  .pill{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;padding:.85rem 1.5rem;border:1px solid var(--line)}
  .pill .b{width:74px;height:.6em}
  .pill.solid{background:var(--sage-deep);border-color:transparent}
  .pill.solid .b{background:rgba(255,255,255,.5)}
  :root[data-theme="dark"] .pill.solid{background:var(--sage-deep)}
  :root[data-theme="dark"] .pill.solid .b{background:rgba(21,25,21,.5)}

  .eyebrow{
    font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
    font-weight:500;color:var(--ink-2);
  }
  .eyebrow .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--clay);margin-right:.6rem;vertical-align:.15em}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:0;z-index:40;
    background:color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .bar{display:flex;align-items:center;gap:1.5rem;padding-block:.9rem}
  .mark{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit;flex:0 0 auto}
  .mark svg{width:30px;height:34px;display:block}
  .mark .name{
    font-family:var(--font-title);font-weight:600;
    font-size:1.02rem;letter-spacing:.02em;line-height:1.05;
  }
  .mark .sub{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
  nav.top{margin-left:auto;display:flex;gap:1.6rem;align-items:center}
  nav.top a{
    color:var(--ink-2);text-decoration:none;font-size:.8rem;letter-spacing:.1em;
    text-transform:uppercase;font-weight:500;padding-block:.3rem;
    border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  }
  nav.top a:hover{color:var(--ink);border-color:var(--clay)}
  .tel{
    font-family:var(--font-title);font-size:.95rem;color:var(--ink);
    text-decoration:none;border:1px solid var(--line);border-radius:999px;
    padding:.5rem 1.05rem;white-space:nowrap;transition:background .2s,border-color .2s;
  }
  .tel:hover{background:var(--surface);border-color:var(--sage)}
  .demo-tag{
    font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
    border:1px dashed color-mix(in srgb,var(--clay) 55%,transparent);
    border-radius:999px;padding:.2rem .55rem;
  }
  .theme-btn{
    width:32px;height:32px;flex:0 0 auto;border-radius:50%;
    border:1px solid var(--line);background:transparent;color:var(--ink-2);
    display:grid;place-items:center;cursor:pointer;padding:0;
    transition:color .2s,border-color .2s,background .2s;
  }
  .theme-btn:hover{color:var(--clay);border-color:var(--clay)}
  .theme-btn svg{width:16px;height:16px;display:block}
  .theme-btn .moon{display:none}
  :root[data-theme="dark"] .theme-btn .moon{display:block}
  :root[data-theme="dark"] .theme-btn .sun{display:none}
  @media(max-width:900px){nav.top{display:none}}
  @media(max-width:520px){.tel{display:none}}

  /* ---------- hero ---------- */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:end;padding-block:clamp(3rem,6vw,5.5rem) var(--step)}
  .hero-copy{display:grid;gap:2rem}
  .hero .hbar:nth-child(1){width:88%}
  .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
  .frame{
    position:relative;border-radius:var(--r-arch);overflow:hidden;
    background:
      radial-gradient(115% 85% at 28% 10%, color-mix(in srgb,var(--sage) 78%, transparent), transparent 66%),
      linear-gradient(168deg, var(--surface), var(--surface-2));
    border:1px solid var(--line-soft);
    box-shadow:var(--shadow);
    aspect-ratio:4/5;
    display:grid;place-items:center;
  }
  .frame .ph{width:34%;max-width:130px;min-width:46px;opacity:.55;color:var(--sage-deep)}
  .frame.wide{aspect-ratio:16/10;border-radius:10px}
  .frame.soft{border-radius:10px 10px 120px 120px}
  .frame.square{aspect-ratio:1/1;border-radius:10px}
  .hero-side{display:grid;gap:1rem}
  .stat-row{display:flex;gap:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
  .stat{flex:1;display:grid;gap:.5rem}
  .stat .n{font-family:var(--font-title);font-size:1.6rem;line-height:1;color:var(--sage-deep)}
  @media(max-width:860px){.hero{grid-template-columns:1fr;align-items:start}.frame{aspect-ratio:5/4;border-radius:140px 140px 10px 10px}}

  /* ---------- generic section head ---------- */
  .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(1.5rem,4vw,4rem);align-items:start;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
  .head .title .hbar{width:min(100%,320px)}
  .head .title .hbar+.hbar{width:min(100%,220px)}
  @media(max-width:760px){.head{grid-template-columns:1fr}}

  /* ---------- about ---------- */
  .about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
  .quote{border-left:2px solid var(--clay);padding-left:1.4rem;display:grid;gap:.7rem;margin-block:.4rem}
  .quote .b{background:var(--skel-2)}
  @media(max-width:820px){.about{grid-template-columns:1fr}}

  /* ---------- serveis ---------- */
  #serveis{padding-top:var(--step)}
  .sec-title{font-family:var(--font-title);font-weight:500;font-size:clamp(2.2rem,4vw,3.3rem);line-height:1.02;margin:0;color:var(--ink)}
  .head-text{font-size:1.1rem;line-height:1.7;max-width:52ch;margin:0;padding-top:2.1rem;color:var(--ink)}
  /* Què oferim: el quadre de síntesi en targetes (2 columnes a l'ordinador, 1 al mòbil) */
  .svc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
  .svc-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:clamp(1.3rem,2.6vw,2rem);display:grid;gap:1.1rem;align-content:start}
  .svc-top{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.2rem .9rem;align-items:start;padding-bottom:1.05rem;border-bottom:1px solid var(--line)}
  .svc-card .ico{color:var(--clay);padding-top:.25rem}
  .svc-card .ico svg{width:26px;height:26px;display:block}
  .svc-card h3{font-family:var(--font-title);font-weight:500;font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.15;margin:0;color:var(--ink)}
  .svc-card .who{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:.5rem 0 0}
  .svc-card ul{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;font-size:1.03rem;line-height:1.55;color:var(--ink)}
  .svc-card li::marker{color:var(--clay)}
  @media(max-width:820px){.svc-grid{grid-template-columns:1fr}}
  @media(max-width:760px){.head-text{padding-top:0}}

  /* Història: text a l'esquerra i carrusel de fotos dels inicis a la dreta */
  .hist{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-top:calc(var(--step)*.4)}
  .hist-text{font-size:1.08rem;line-height:1.7;margin:1.1rem 0 0;max-width:58ch}
  .hist-fites{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
  .hist-fites li{display:grid;gap:.3rem;padding:1rem 1rem 0 0}
  .hist-fites li+li{padding-left:1rem;border-left:1px solid var(--line)}
  .hist-fites .any{font-family:var(--font-title);font-size:1.7rem;line-height:1;color:var(--sage-deep)}
  .hist-fites .t{font-size:.92rem;line-height:1.45;color:var(--ink-2)}
  .hist-gal .pgal-stage{aspect-ratio:4/5;max-height:78vh;margin-inline:auto}
  @media(max-width:820px){
    .hist{grid-template-columns:1fr}
    .hist-gal .pgal-stage{max-height:70dvh}
  }
  /* ---------- equip ---------- */
  .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);list-style:none;margin:0;padding:0}
  .member{position:relative;display:grid;gap:1.2rem;align-content:start}
  .portrait{
    aspect-ratio:3/4;border-radius:var(--r-arch);overflow:hidden;position:relative;
    background:var(--surface-2);border:1px solid var(--line-soft);
  }
  /* foto sencera (contain) amb la mateixa foto desenfocada al fons: no es retalla la persona */
  .portrait img,.pgal-slide img{position:absolute;inset:0;width:100%;height:100%;display:block}
  .portrait .bg,.pgal-slide .bg{object-fit:cover;filter:blur(22px) saturate(1.05);transform:scale(1.2);opacity:.85}
  .portrait .fg,.pgal-slide .fg{object-fit:contain}
  .portrait .fg{transition:transform .6s ease}
  .member:hover .portrait .fg{transform:scale(1.02)}
  .member .meta{display:grid;gap:.55rem}
  .m-role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin:0}
  .member h3{margin:0;font-family:var(--font-title);font-weight:500;font-size:clamp(1.4rem,2vw,1.65rem);line-height:1.1}
  .member-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
  .member-btn::after{content:"";position:absolute;inset:0;border-radius:14px}   /* tota la targeta és clicable */
  .member-btn:focus-visible{outline:none}
  .member-btn:focus-visible::after{outline:2px solid var(--clay);outline-offset:6px}
  .m-sum{margin:0;font-size:1rem;line-height:1.55;color:var(--ink)}
  .colegiat{display:flex;align-items:baseline;gap:.6rem;border-top:1px solid var(--line-soft);padding-top:.8rem;margin:.3rem 0 0}
  .colegiat .k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
  .colegiat .v{font-family:var(--font-title);font-size:1.05rem;color:var(--ink)}
  .m-more{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;font-size:.95rem;color:var(--sage-deep)}
  .m-more svg{width:16px;height:16px;transition:transform .25s}
  .member:hover .m-more svg{transform:translateX(4px)}
  @media(max-width:860px){.team{grid-template-columns:1fr;gap:2.8rem}.portrait{aspect-ratio:4/5;border-radius:150px 150px 10px 10px}}

  /* ---------- fitxa superposada (dialog) ---------- */
  html.modal-open{overflow:hidden}
  .perfil{border:0;padding:0;background:transparent;color:var(--ink);width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px)}
  .perfil::backdrop{background:rgba(18,24,18,.55);backdrop-filter:blur(3px)}
  .perfil-box{position:relative;background:var(--surface);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5);max-height:calc(100dvh - 32px);overflow:auto;display:flex;flex-direction:column}
  .perfil-item{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,3.5vw,3rem);padding:clamp(1.25rem,3vw,2.2rem);flex:1}
  .perfil-item.entra-dreta{animation:entraDreta .35s ease both}
  .perfil-item.entra-esq{animation:entraEsq .35s ease both}
  @keyframes entraDreta{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  @keyframes entraEsq{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
  /* galeria de fotos dins la fitxa */
  .pgal{position:relative;align-self:start}
  .pgal-stage{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--surface-2)}
  .pgal-slide{position:absolute;inset:0;margin:0}
  .pgal-slide.entra{animation:pgalFade .35s ease both}
  @keyframes pgalFade{from{opacity:0}to{opacity:1}}
  .pgal-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.4);transition:background .2s}
  .pgal-btn:hover{background:var(--surface)}
  .pgal-btn svg{width:20px;height:20px}
  .pgal-prev{left:10px}.pgal-next{right:10px}
  .pgal-dots{display:flex;justify-content:center;gap:.45rem;margin-top:.8rem}
  .pgal-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .2s,transform .2s}
  .pgal-dot[aria-current="true"]{background:var(--sage-deep);transform:scale(1.25)}
  .perfil-text{display:grid;gap:1.1rem;align-content:start;padding-top:1.4rem}
  .perfil-text h3{margin:0;font-family:var(--font-title);font-weight:500;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.02}
  .perfil-intro{margin:0;font-size:1.08rem;line-height:1.6}
  .perfil-text ul{margin:0;padding-left:1.15rem;display:grid;gap:.55rem;font-size:1.04rem;line-height:1.55}
  .perfil-text li::marker{color:var(--clay)}
  .perfil-text p{margin:0}
  .perfil-close{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
  .perfil-close:hover{border-color:var(--clay);color:var(--clay)}
  .perfil-close svg{width:18px;height:18px}
  .perfil-nav{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem clamp(1.25rem,3vw,2.2rem);border-top:1px solid var(--line);background:var(--surface)}
  .perfil-nav button{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:500;font-size:.95rem;padding:.6rem 1.05rem;cursor:pointer;transition:border-color .2s,background .2s}
  .perfil-nav button:hover{border-color:var(--sage-deep);background:var(--ground)}
  .perfil-nav svg{width:17px;height:17px}
  .perfil-count{font-size:.78rem;letter-spacing:.14em;color:var(--ink-2)}
  .perfil :focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  @media(max-width:720px){
    .perfil{width:100vw;height:100dvh;max-height:none;margin:0}
    .perfil-box{border-radius:0;height:100%;max-height:none}
    .perfil-item{grid-template-columns:1fr;gap:1.2rem;padding:1rem 1rem 1.6rem}
    .pgal-stage{aspect-ratio:4/5;max-height:62dvh;margin-inline:auto}
    .perfil-text{padding-top:0}
    .perfil-nav{padding:.7rem 1rem}
    .perfil-nav .nom{display:none}
  }

  /* ---------- espai ---------- */
  /* Files "justificades": cada foto ocupa l'amplada segons la seva proporció, així es veuen senceres */
  .espai-grid{display:flex;flex-wrap:wrap;gap:clamp(.6rem,1.4vw,1rem)}
  .espai-item{margin:0;flex:calc(var(--r)*100) 1 calc(var(--r)*230px);max-width:calc(var(--r)*440px);display:grid;gap:.5rem}
  .espai-btn{display:block;width:100%;padding:0;border:0;background:var(--surface-2);border-radius:10px;overflow:hidden;cursor:zoom-in}
  .espai-btn img{display:block;width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;transition:transform .5s ease}
  .espai-btn:hover img{transform:scale(1.03)}
  .espai-btn:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  .espai-item figcaption{font-size:.82rem;color:var(--ink-2)}
  @media(max-width:600px){.espai-item{flex-basis:calc(var(--r)*150px)}}

  /* visor de fotos a pantalla completa */
  .visor{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(14,18,14,.94);color:#f1f0ea}
  .visor::backdrop{background:transparent}
  .visor-box{position:relative;width:100%;height:100%;display:grid;grid-template-rows:1fr auto;padding:clamp(3.5rem,6vw,4.5rem) clamp(.8rem,5vw,5rem) 1rem}
  .visor-img{width:100%;height:100%;object-fit:contain;display:block;min-height:0}
  .visor-img.entra{animation:galFade2 .3s ease both}
  @keyframes galFade2{from{opacity:0}to{opacity:1}}
  .visor-peu{display:flex;justify-content:center;gap:1rem;align-items:baseline;padding-top:.8rem;font-size:.95rem}
  .visor-count{font-size:.78rem;letter-spacing:.14em;opacity:.7}
  .visor button{position:absolute;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;transition:background .2s}
  .visor button:hover{background:rgba(255,255,255,.18)}
  .visor button svg{width:20px;height:20px}
  .visor-close{top:14px;right:14px}
  .visor-prev{left:14px;top:50%;transform:translateY(-50%)}
  .visor-next{right:14px;top:50%;transform:translateY(-50%)}
  .visor :focus-visible{outline:2px solid #fff;outline-offset:3px}
  @media(max-width:600px){.visor-prev,.visor-next{top:auto;bottom:10px;transform:none}}

  /* ---------- contacte (bloc final de la portada) ---------- */
  .contact{background:var(--surface);border-block:1px solid var(--line)}
  .cta{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:end}
  .cta .head-text{padding-top:1rem}
  .cta .head-text a{color:inherit}
  .cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
  @media(max-width:820px){.cta{grid-template-columns:1fr}.cta-actions{justify-content:flex-start}}

  /* files de dades (pàgina de contacte) */
  .info{display:grid;gap:1.3rem}
  .row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:baseline;border-bottom:1px solid var(--line-soft);padding-bottom:1.1rem}
  .row .k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
  .row .v{font-family:var(--font-title);font-size:1.1rem;line-height:1.5}
  .row .v a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s,color .2s}
  .row .v a:hover{color:var(--clay);border-color:var(--clay)}
  .row .v small{display:block;font-family:var(--font-text);font-size:.9rem;color:var(--ink-2)}

  /* ---------- pàgina de contacte ---------- */
  .ct-hero{padding-block:clamp(3rem,6vw,5rem) clamp(1.5rem,3vw,2.5rem);display:grid;gap:1.2rem}
  .ct-title{font-size:clamp(2.8rem,6vw,4.6rem)}
  .ct-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-top:0}
  .ct-main{display:grid;gap:.5rem;padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}
  .ct-main .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin:0}
  .ct-phone{font-family:var(--font-title);font-weight:500;font-size:clamp(2.3rem,4.4vw,3.2rem);line-height:1;color:var(--ink);text-decoration:none}
  .ct-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.8rem}
  .ct-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1.05rem;position:relative}
  .ct-form h2{font-family:var(--font-title);font-weight:500;font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.1;margin:0}
  .fld{display:grid;gap:.4rem}
  .fld label{font-size:.9rem;font-weight:500}
  .fld input,.fld textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:.75rem .9rem;width:100%}
  .fld textarea{min-height:140px;resize:vertical}
  .fld input:focus,.fld textarea:focus{outline:2px solid var(--sage-deep);outline-offset:0;border-color:transparent}
  .fld-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .ct-note{font-size:.9rem;color:var(--ink-2);margin:0;line-height:1.5}
  .ct-check{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;line-height:1.45;cursor:pointer}
  .ct-check input{margin:.15rem 0 0;width:18px;height:18px;accent-color:var(--sage-deep);flex:0 0 auto}
  .ct-form .btn{justify-self:start}
  .ct-status{margin:0;font-size:.95rem;min-height:1.4em}
  .ct-status.ok{color:var(--sage-deep)}
  .ct-status.err{color:var(--clay)}
  .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
  .ct-mapa-wrap{padding-top:clamp(2.5rem,5vw,4rem)}
  .ct-mapa{position:relative;aspect-ratio:16/7;border-radius:16px;overflow:hidden;border:1px solid var(--line);display:grid;place-items:center;align-content:center;gap:.7rem;text-align:center;padding:1rem;
    background:repeating-linear-gradient(90deg,transparent 0 46px,var(--line-soft) 46px 47px),repeating-linear-gradient(0deg,transparent 0 46px,var(--line-soft) 46px 47px),linear-gradient(140deg,var(--surface-2),var(--surface))}
  .ct-mapa p{margin:0;font-size:.88rem;color:var(--ink-2);max-width:40ch}
  .ct-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  @media(max-width:820px){.ct-grid{grid-template-columns:1fr}.ct-mapa{aspect-ratio:4/3}.fld-2{grid-template-columns:1fr}.row{grid-template-columns:1fr;gap:.3rem}}

  /* ---------- botó de contacte (capçalera) ---------- */
  .btn-contacte{flex:0 0 auto;display:inline-flex;align-items:center;border-radius:999px;background:var(--sage-deep);color:var(--surface);text-decoration:none;font-weight:500;font-size:.98rem;padding:.65rem 1.3rem;transition:background .2s}
  .btn-contacte:hover,.btn-contacte[aria-current="page"]{background:var(--ink)}
  @media(max-width:520px){.btn-contacte{padding:.5rem .95rem;font-size:.9rem}.mark .sub{display:none}}
  @media(max-width:400px){.theme-btn{display:none}}
  button.btn{font-family:inherit;cursor:pointer}

  /* ---------- botó flotant de WhatsApp ---------- */
  .wa-float{position:fixed;left:16px;bottom:16px;z-index:50;display:inline-flex;align-items:center;gap:0;background:var(--sage-deep);color:var(--surface);text-decoration:none;border-radius:999px;padding:.8rem;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);transition:gap .3s,padding .3s,background .2s}
  .wa-float svg{width:26px;height:26px;display:block;flex:0 0 auto}
  .wa-float .wa-txt{max-width:0;overflow:hidden;white-space:nowrap;font-weight:500;font-size:.95rem;transition:max-width .3s}
  .wa-float:hover,.wa-float:focus-visible{gap:.55rem;padding-right:1.15rem;background:var(--ink)}
  .wa-float:hover .wa-txt,.wa-float:focus-visible .wa-txt{max-width:140px}
  .wa-float:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

  .foot-desc{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55;max-width:34ch}
  .legal a{color:inherit}

  /* ---------- footer ---------- */
  footer.site{padding-block:clamp(3rem,5vw,4.5rem) 2.5rem}
  .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .foot .col{display:grid;gap:.85rem}
  .foot a{color:var(--ink-2);text-decoration:none;font-size:.92rem;transition:color .2s}
  .foot a:hover{color:var(--clay)}
  .foot .ck{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.2rem}
  .legal{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:3rem;padding-top:1.4rem;font-size:.74rem;color:var(--ink-2)}
  .legal .b{width:120px}
  @media(max-width:760px){.foot{grid-template-columns:1fr;gap:2.4rem}}

  /* ---------- idioma (CA / ES) ----------
     Cada text va dues vegades: <span lang="ca"> i <span lang="es">. Es mostra el de l'idioma actiu.
     (Per a la web publicada és millor fer dues pàgines, /ca/ i /es/, pel SEO.) */
  :root[data-lang="ca"] body [lang="es"],
  :root[data-lang="es"] body [lang="ca"]{display:none!important}
  .lang-btn{display:inline-flex;flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:2px;background:transparent;cursor:pointer;font:inherit}
  .lang-btn span{font-size:.7rem;letter-spacing:.12em;font-weight:500;color:var(--ink-2);padding:.28rem .55rem;border-radius:999px;transition:background .2s,color .2s}
  :root[data-lang="ca"] .lang-btn [data-l="ca"],
  :root[data-lang="es"] .lang-btn [data-l="es"]{background:var(--sage-deep);color:var(--surface)}
  .lang-btn:hover{border-color:var(--sage)}

  /* ---------- introducció (hero) amb text real ---------- */
  .hero{align-items:center}
  .hero-copy{gap:1.7rem}
  .hero-title{font-family:var(--font-title);font-weight:500;font-size:clamp(3rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.01em;margin:0;color:var(--ink)}
  .hero-sub{font-family:var(--font-title);font-style:italic;font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--sage-deep);margin:.5rem 0 0}
  .hero-text{font-size:clamp(1.05rem,1.35vw,1.16rem);line-height:1.72;max-width:52ch;margin:0;color:var(--ink)}
  .hero-text .cita{font-family:var(--font-title);font-style:italic;color:var(--sage-deep);white-space:normal}
  .btn{display:inline-flex;align-items:center;border-radius:999px;padding:.8rem 1.45rem;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem;transition:background .2s,border-color .2s,color .2s}
  .btn:hover{border-color:var(--sage-deep)}
  .btn.solid{background:var(--sage-deep);border-color:transparent;color:var(--surface)}
  .btn.solid:hover{background:var(--ink)}
  .stat .k{font-size:.86rem;line-height:1.35;color:var(--ink-2)}
  .stat{align-content:start}
  /* mòbil: amb el botó d'idioma la capçalera no hi cabia */
  @media(max-width:520px){.bar{gap:.7rem}.demo-tag{display:none}}

  /* tres fotos juntes */
  .duo{position:relative;margin:0;padding-bottom:34%}
  .duo-main{place-items:stretch}
  .duo-main img{width:100%;height:100%;object-fit:cover;object-position:14% 50%;display:block}
  .duo-card{position:absolute;width:40%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:6px solid var(--ground);box-shadow:var(--shadow);background:var(--surface-2)}
  .duo-card img{width:100%;height:100%;object-fit:cover;display:block}
  .duo-a{left:-10%;bottom:6%}
  .duo-b{right:-3%;bottom:0}
  @media(max-width:860px){
    .duo{padding-bottom:40%}
    .duo-card{width:44%}
    .duo-a{left:0}
    .duo-b{right:0}
  }

  a:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* ---------- logo (imatge original del centre, sense retocar) ---------- */
.mark .logo{width:42px;height:42px;display:block;mix-blend-mode:multiply;flex:0 0 auto}
:root[data-theme="dark"] .mark .logo{mix-blend-mode:normal;background:#fff;border-radius:50%;padding:3px}
/* mapa a la portada, al costat de les dades */
.ct-mapa-alt{aspect-ratio:auto;height:100%;min-height:420px}
.contact .head-text a{color:inherit}
@media(max-width:820px){.ct-mapa-alt{min-height:0;aspect-ratio:4/3}}

/* ---------- introducció: que es vegi més la foto del centre ---------- */
@media(min-width:861px){.hero{grid-template-columns:1fr 1.05fr}.hero-title{font-size:clamp(3rem,5.2vw,4.8rem)}}
.duo{padding-bottom:24%}
.duo-main{aspect-ratio:5/4}
.duo-main img{object-position:35% 50%}
.duo-card{width:29%}
.duo-a{left:-6%;bottom:2%}
.duo-b{right:-2%;bottom:0}
@media(max-width:860px){.duo{padding-bottom:28%}.duo-card{width:34%}.duo-a{left:0}.duo-b{right:0}}

/* anar a una secció des del menú o l'avís sense que la tapi la capçalera */
section[id]{scroll-margin-top:90px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- pròximes xerrades i tallers ---------- */
.xr-llista{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.xr{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding-bottom:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--line)}
.xr:last-child{border-bottom:0;padding-bottom:0}
.xr-cartell{display:block;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2)}
.xr-cartell img{display:block;width:100%;height:auto;transition:transform .5s ease}
.xr-cartell:hover img{transform:scale(1.03)}
.xr-cartell:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.xr-info{display:grid;gap:.95rem;align-content:start;padding-top:.3rem}
.xr-data{display:flex;align-items:center;gap:1rem;margin:0}
.xr-dia{font-family:var(--font-title);font-weight:500;font-size:3.4rem;line-height:.85;color:var(--sage-deep)}
.xr-quan{display:grid;gap:.15rem;font-size:1rem;line-height:1.3}
.xr-setm{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.xr-public{margin:0;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.xr h3{margin:0;font-family:var(--font-title);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.08}
.xr-text{margin:0;font-size:1.05rem;line-height:1.68;max-width:60ch}
.xr-lloc{margin:0;display:flex;gap:.5rem;align-items:center;font-size:.95rem;color:var(--ink-2)}
.xr-lloc svg{width:18px;height:18px;color:var(--clay);flex:0 0 auto}
.xr-accions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.3rem}
.xr-buit{font-size:1.05rem;color:var(--ink-2)}
.xr-buit a{color:inherit}
@media(max-width:700px){.xr{grid-template-columns:1fr}.xr-cartell{max-width:340px}}

/* ---------- avís de novetats (dalt de tot) ---------- */
.avis{position:relative;background:var(--sage-deep);color:var(--surface);font-size:.95rem}
.avis-link{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.35rem .8rem;padding:.65rem 3.2rem;color:inherit;text-decoration:none;text-align:center}
.avis-tag{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:.12rem .55rem}
.avis-mes{text-decoration:underline;text-underline-offset:3px}
.avis-link:hover .avis-mes{text-decoration-thickness:2px}
.avis-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center}
.avis-x:hover{background:rgba(255,255,255,.14)}
.avis-x svg{width:16px;height:16px}
.avis :focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:600px){.avis-mes{display:none}.avis-link{justify-content:flex-start;text-align:left;padding:.6rem 3rem .6rem 1rem}}

/* ---------- barra legal del peu ---------- */
.legal-links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.legal-links a,.legal-links button{color:inherit;font:inherit;font-size:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.legal-links a:hover,.legal-links button:hover{color:var(--clay)}

/* ---------- pàgines legals ---------- */
.legal-doc{max-width:800px;padding-block:clamp(3rem,6vw,5rem);display:grid;gap:2.4rem}
.legal-cap{display:grid;gap:1rem}
.legal-cap .hero-title{font-size:clamp(2.4rem,5vw,3.6rem)}
.legal-data{margin:0;color:var(--ink-2);font-size:.95rem}
.legal-doc section{display:grid;gap:.9rem;padding:0}
.legal-doc h2{margin:0;font-family:var(--font-title);font-weight:500;font-size:clamp(1.35rem,2.2vw,1.6rem);line-height:1.2}
.legal-doc p,.legal-doc li{margin:0;font-size:1.04rem;line-height:1.7}
.legal-doc ul{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.legal-doc li::marker{color:var(--clay)}
.legal-doc a{color:inherit}
.legal-dades{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.55rem 1.2rem;margin:0;padding:1.1rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.legal-dades dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:.3rem}
.legal-dades dd{margin:0;line-height:1.55}
.legal-taula{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.legal-taula table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:560px}
.legal-taula th,.legal-taula td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.45}
.legal-taula th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:var(--surface);font-weight:500}
.legal-taula tr:last-child td{border-bottom:0}
.pendent{background:#fbe7a1;color:#4d3d00;border-radius:3px;padding:0 .3em;font-weight:500}
@media(max-width:600px){.legal-dades{grid-template-columns:1fr;gap:.15rem}.legal-dades dd{margin-bottom:.6rem}}

/* ---------- mapa: només es carrega amb permís ---------- */
.mapa-av{position:relative;display:grid;justify-items:center;gap:.8rem;max-width:36ch;text-align:center}
.mapa-av p{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.5}
.mapa-av a{font-size:.9rem;color:var(--ink-2)}

/* ---------- avís de cookies ---------- */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;margin-inline:auto;max-width:760px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -24px rgba(0,0,0,.45);padding:1.2rem 1.4rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 1.6rem;align-items:center}
.cookies p{margin:0;font-size:.95rem;line-height:1.55}
.cookies p a{color:inherit}
.cookies-botons{display:flex;gap:.6rem}
.cookies-botons .btn{padding:.65rem 1.25rem}
@media(max-width:640px){.cookies{grid-template-columns:1fr}.cookies-botons .btn{flex:1;justify-content:center}}

/* captcha del formulari */
.ct-captcha{min-height:65px}

/* =========================================================
   MÒBIL: menú desplegable i ajustos de lectura i de tacte
   ========================================================= */
.menu-btn{display:none;flex:0 0 auto;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:18px;height:1.6px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
/* el menú va dins la capçalera (no és una capa fixa), així funciona bé amb la capçalera enganxada */
.menu-mobil{display:grid;border-top:1px solid var(--line-soft);padding:.4rem clamp(18px,5vw,68px) 1.4rem;max-height:calc(100dvh - 80px);overflow-y:auto}
.menu-mobil a{display:block;padding:.9rem 0;border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none;font-family:var(--font-title);font-weight:500;font-size:1.3rem}
.menu-mobil a.btn{justify-self:start;margin-top:1.1rem;border-bottom:0;padding:.8rem 1.5rem;font-family:var(--font-text);font-size:1rem;color:var(--surface)}
@media(min-width:901px){.menu-mobil{display:none!important}}
@media(max-width:900px){.menu-btn{display:inline-flex}.lang-btn{margin-left:auto}}
@media(max-width:520px){
  .bar .btn-contacte{display:none}           /* ja és dins el menú, al peu i al botó de WhatsApp */
  .eyebrow{letter-spacing:.14em;font-size:.74rem}
  .row .k,.colegiat .k,.xr-setm,.xr-public,.m-role,.svc-row .who,.foot .ck,.avis-tag{font-size:.72rem}
  .lang-btn span{font-size:.75rem;padding:.35rem .6rem}
  .foot a{padding-block:.4rem}
  .foot .col{gap:.35rem}
  .legal-links{gap:.2rem 1.2rem}
  .legal-links a,.legal-links button{padding-block:.45rem}
  footer.site{padding-bottom:6rem}          /* que el botó de WhatsApp no tapi el final */
  .xr-accions .btn{flex:1 1 100%;justify-content:center}
  .wa-float{padding:.72rem}
  .wa-float svg{width:24px;height:24px}
}

.ct-check a{color:inherit}
/* el botó flotant de WhatsApp s'amaga mentre el formulari és a la pantalla (si no, tapa el botó d'enviar) */
.wa-float{transition:gap .3s,padding .3s,background .2s,opacity .25s}
.wa-float.amagat{opacity:0;pointer-events:none}

/* ---------- preguntes freqüents ---------- */
/* Preguntes freqüents: acordió (clic a la pregunta = es desplega) */
.faq{display:grid;grid-template-columns:minmax(0,1fr);max-width:860px;border-bottom:1px solid var(--line)}
.faq-item{border-top:1px solid var(--line);interpolate-size:allow-keywords}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.3rem .2rem;border-radius:6px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.faq-item h3{margin:0;font-family:var(--font-title);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.25;transition:color .2s}
.faq-item summary:hover h3{color:var(--sage-deep)}
.faq-ico{flex:none;width:34px;height:34px;padding:8px;border:1px solid var(--line);border-radius:50%;color:var(--clay);transition:transform .3s ease,border-color .2s}
.faq-ico .v{transition:opacity .25s}
.faq-item[open] .faq-ico{transform:rotate(180deg);border-color:var(--clay)}
.faq-item[open] .faq-ico .v{opacity:0}
.faq-item p{margin:0;padding:0 3.5rem 1.4rem .2rem;font-size:1.04rem;line-height:1.65;max-width:75ch}
.faq-item a{color:inherit}
.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
@media(max-width:760px){.faq-item p{padding-right:.2rem}}

/* ---------- selector d'idioma com a enllaços ---------- */
.lang-btn a{font-size:.7rem;letter-spacing:.12em;font-weight:500;color:var(--ink-2);padding:.28rem .55rem;border-radius:999px;text-decoration:none;transition:background .2s,color .2s}
@media(max-width:520px){.lang-btn a{font-size:.75rem;padding:.35rem .6rem}}