:root{
    --cream:#F7EFE1;
    --cream-deep:#EEE0C4;
    --paper-line:#DCC7A0;
    --paper-line-soft:#E7D6B4;
    --ink:#2A2420;
    --ink-soft:#5C5045;
    --pine:#1F3D2B;
    --pine-deep:#132A1C;
    --pine-mid:#2A4E38;
    --terracotta:#C1502E;
    --terracotta-deep:#9C3D22;
    --terracotta-tint:#F3DCCC;
    --blue:#1E76A0;
    --blue-tint:#D9E9F1;
    --mustard:#C98A1E;
    --mustard-tint:#F2E2BE;
    --olive:#5C7A29;
    --olive-tint:#E3E9CD;
    --radius-s:10px;
    --radius-m:18px;
    --radius-l:30px;
    --shadow-card:0 1px 0 rgba(42,36,32,.06), 0 14px 30px -18px rgba(19,42,28,.45);
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Karla',ui-sans-serif,system-ui,-apple-system,sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    padding-inline:clamp(18px,4vw,48px);
  }
  h1,h2,h3,h4{
    font-family:'Fraunces',Georgia,serif;
    color:var(--pine-deep);
    margin:0 0 .4em;
    font-weight:600;
    text-wrap:balance;
    letter-spacing:-.01em;
  }
  p{margin:0 0 1em; color:var(--ink-soft); max-width:62ch;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin-inline:auto;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:'Karla',sans-serif; font-weight:800; font-size:.72rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-deep);
    margin-bottom:.9em;
  }
  .eyebrow svg{width:16px; height:16px; flex:none;}
  .tag-sost{
    display:inline-flex; align-items:center; gap:.4em;
    background:var(--olive); color:var(--cream);
    font-family:'Karla',sans-serif; font-weight:700; font-size:.72rem;
    letter-spacing:.06em; text-transform:uppercase;
    padding:.45em .9em; border-radius:999px;
  }
  .tag-sost svg{width:13px; height:13px;}
  .btn{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:'Karla',sans-serif; font-weight:700; font-size:.95rem;
    padding:.85em 1.5em; border-radius:999px; text-decoration:none;
    border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--terracotta); color:var(--cream); box-shadow:0 10px 22px -10px rgba(193,80,46,.55);}
  .btn-primary:hover{background:var(--terracotta-deep);}
  .btn-ghost{background:transparent; border-color:var(--pine-deep); color:var(--pine-deep);}
  .btn-ghost:hover{background:var(--pine-deep); color:var(--cream);}
  .btn-light{background:var(--cream); color:var(--pine-deep);}
  .btn-light:hover{background:#fff;}
  .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible{
    outline:3px solid var(--blue); outline-offset:2px;
  }

  .nav-cta[data-nav-estat]{
    flex-direction:column; gap:0; text-align:center; line-height:1.15;
    padding:.5em 1.2em; font-size:.85rem;
  }
  .nav-estat-etiqueta{display:block; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85;}
  .nav-user{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:32px; height:32px; border-radius:50%; border:1.5px solid var(--pine-deep);
    color:var(--pine-deep); text-decoration:none; margin-left:.4em;
  }
  .nav-user svg{width:16px; height:16px;}
  .nav-user:hover{background:var(--pine-deep); color:var(--cream);}

  /* ---------- franja d'anunci ---------- */
  .announce-bar{
    background:var(--olive); overflow:hidden; white-space:nowrap;
  }
  .announce-track{
    display:inline-block; padding-left:100%;
    animation:announce-scroll var(--marquesina-dur, 38s) linear infinite;
  }
  .announce-track span{
    display:inline-block; padding:.5em 0; color:#fff; font-size:.9rem; font-weight:500;
    letter-spacing:.02em;
  }
  .announce-track span.avis--vermell{color:#FF6B4A; font-weight:800;}
  .announce-track span.avis-sep{opacity:.7; padding-inline:.6em;}
  @keyframes announce-scroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-100%);}
  }
  @media (prefers-reduced-motion:reduce){
    .announce-track{animation:none; padding-left:0;}
    .announce-bar{text-align:center;}
  }

  /* ---------- banderoles decoratives (sota la franja d'anunci) ----------
     Corda que cau (com una garlanda penjada de debò, veure DISSENYS/
     BANDEROLES-01.png) amb les banderes penjant en vertical als punts baixos
     de la corba. Es repeteix en trams (cada tram és un "penjat" independent,
     com si hi hagués un clau a cada unió). Sense filter/transform: han de
     quedar sempre darrere els desplegables del menú (.dropdown, z-index:50)
     i el menú mòbil (nav.primary, z-index:39). */
  .announce-bunting{
    height:78px; position:relative; z-index:1; pointer-events:none;
    background-repeat:repeat-x; background-position:top center; background-size:300px 78px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='78'%3E%3Cpath d='M0,10 Q150,45 300,10' fill='none' stroke='%235C5045' stroke-width='2'/%3E%3Cpolygon points='24.5,17.7 50.5,17.7 37.5,62.7' fill='%23C1502E'/%3E%3Cpolygon points='99.5,26.4 125.5,26.4 112.5,71.4' fill='%23C98A1E'/%3E%3Cpolygon points='174.5,26.4 200.5,26.4 187.5,71.4' fill='%231E76A0'/%3E%3Cpolygon points='249.5,17.7 275.5,17.7 262.5,62.7' fill='%235C7A29'/%3E%3C/svg%3E");
  }
  @media (max-width:600px){
    .announce-bunting{height:55px; background-size:210px 55px;}
  }

  /* ---------- header / nav ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    border-bottom:1px solid var(--paper-line);
    margin-inline:calc(-1*clamp(18px,4vw,48px));
    padding-inline:clamp(18px,4vw,48px);
  }
  /* El difuminat viu en una capa pròpia (i no directament a header.site) perquè
     `backdrop-filter` crea un "containing block" pels descendants amb
     position:fixed — si el porta el header, el menú mòbil (nav.primary, fixed)
     queda encaixat dins l'alçada del header en lloc de cobrir tota la pantalla. */
  header.site::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:rgba(247,239,225,.92); backdrop-filter:blur(8px);
  }
  .navbar{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    max-width:var(--maxw); margin-inline:auto; padding-block:.6em;
  }
  .brand{display:flex; align-items:center; gap:.7em; text-decoration:none;}
  .brand img{height:64px; width:auto; object-fit:contain;}
  .brand-name{font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; color:var(--pine-deep); line-height:1.1;}
  .brand-name small{display:block; font-family:'Karla',sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.12em; color:var(--terracotta-deep); text-transform:uppercase; margin-top:.15em;}
  nav.primary{display:flex; align-items:center; gap:.2em;}
  .navgroup{position:relative;}
  .navgroup>button{
    font-family:'Karla',sans-serif; font-weight:700; font-size:.86rem; color:var(--pine-deep);
    background:none; border:none; padding:.7em .55em; cursor:pointer;
    display:flex; align-items:center; gap:.25em; border-radius:999px; white-space:nowrap;
  }
  .navgroup>a{
    font-family:'Karla',sans-serif; font-weight:700; font-size:.86rem; color:var(--pine-deep);
    text-decoration:none; padding:.7em .55em; display:block; border-radius:999px; white-space:nowrap;
  }
  .navgroup>button:hover, .navgroup>a:hover{background:var(--cream-deep);}
  .navgroup svg.chev{width:11px; height:11px; transition:transform .15s ease;}
  .navgroup[data-open="true"] svg.chev{transform:rotate(180deg);}
  .dropdown{
    position:absolute; top:100%; left:0; margin-top:.4em; z-index:50;
    background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-s);
    box-shadow:var(--shadow-card); padding:.4em; min-width:220px;
    display:none; flex-direction:column;
  }
  .navgroup[data-open="true"] .dropdown{display:flex;}
  .dropdown a{
    text-decoration:none; color:var(--ink); font-size:.88rem; font-weight:600;
    padding:.6em .7em; border-radius:8px;
  }
  .dropdown a:hover{background:var(--cream);}
  .nav-cta{margin-left:.4em; cursor:default;}
  .menu-toggle{display:none; background:none; border:2px solid var(--pine-deep); border-radius:10px; width:42px; height:38px; align-items:center; justify-content:center; cursor:pointer;}
  .menu-toggle svg{width:20px; height:20px;}

  @media (max-width:1100px){
    nav.primary{
      position:fixed; top:var(--header-h,64px); right:0; bottom:0; left:0; background:var(--cream); border-top:1px solid var(--paper-line);
      flex-direction:column; align-items:stretch; padding:1.2em; gap:.3em; overflow-y:auto;
      transform:translateX(100%); transition:transform .2s ease; z-index:39;
    }
    body[data-menu="open"] nav.primary{transform:translateX(0);}
    .navgroup>button, .navgroup>a{width:100%; justify-content:space-between; font-size:1.05rem; padding:.85em .6em; border-bottom:1px solid var(--paper-line-soft); border-radius:0;}
    .dropdown{position:static; box-shadow:none; border:none; margin-top:0; padding-left:1em;}
    .navgroup[data-open="true"] .dropdown{display:flex;}
    .nav-cta{margin:.6em 0 0;}
    .menu-toggle{display:flex;}
  }

  /* ---------- sections / bands ---------- */
  section{padding-block:clamp(3.2em,7vw,5.5em);}
  .band-deep{
    background:var(--cream-deep);
    margin-inline:calc(-1*clamp(18px,4vw,48px));
    padding-inline:clamp(18px,4vw,48px);
    border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  }
  .band-dark{
    background:linear-gradient(180deg,var(--pine-deep),#0F2216);
    color:var(--cream);
    margin-inline:calc(-1*clamp(18px,4vw,48px));
    padding-inline:clamp(18px,4vw,48px);
  }
  .band-dark h2, .band-dark h3, .band-dark .eyebrow{color:var(--cream);}
  .band-dark p{color:#CBD9CE;}
  .band-terra{
    background:linear-gradient(180deg,var(--terracotta-tint),var(--cream-deep));
    margin-inline:calc(-1*clamp(18px,4vw,48px));
    padding-inline:clamp(18px,4vw,48px);
    border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  }
  .section-head{max-width:640px; margin-bottom:2.2em;}
  .section-head--ample{max-width:none;} /* pàgines de festa: la descripció ocupa tot l'ample */
  .section-head--ample p{max-width:none;}
  .section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);}
  .section-head-top{display:flex; align-items:center; gap:.9em; flex-wrap:wrap; margin-bottom:.9em;}
  .section-head-top .eyebrow{margin-bottom:0;}
  .programa-festa-dates{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; color:var(--pine-deep); margin:.2em 0 0;}

  /* ---------- hero ---------- */
  .hero{padding-top:clamp(2.6em,6vw,4em);}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:3em; align-items:center;}
  .hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.05;}
  .hero .lede{font-size:1.08rem; max-width:52ch;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:.8em; margin-top:1.4em;}
  .stat-row{display:flex; gap:1.8em; margin-top:2.4em; flex-wrap:wrap;}
  .stat b{display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--terracotta-deep);}
  .stat span{font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; font-weight:700;}
  .eco-claim{margin-top:2.2em;}
  .eco-claim b{
    display:block; font-family:'Fraunces',serif; font-weight:600; line-height:1.15;
    font-size:clamp(1.7rem,3.4vw,2.3rem); color:var(--olive);
  }
  .eco-claim span{display:block; margin-top:.5em; font-size:.85rem; color:var(--ink-soft); font-weight:600;}
  .hero-festes-resum{margin-top:1.8em; display:flex; flex-direction:column; gap:1.1em;}
  .hero-festes-resum-titol{font-size:1.2rem !important; color:var(--terracotta-deep) !important;}
  .hero-festes-resum b{display:block; font-family:'Fraunces',serif; font-size:1rem; color:var(--pine-deep); margin-bottom:.25em;}
  .hero-festes-resum p{margin:0; font-size:.85rem; color:var(--ink-soft);}
  .hero-card{
    background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-l);
    padding:1.8em; box-shadow:var(--shadow-card); position:relative;
  }
  .hero-card .date-chip{
    background:var(--pine-deep); color:var(--cream); border-radius:14px; padding:.9em 1em;
    display:flex; gap:1em; align-items:center; margin-bottom:1em;
  }
  .date-chip .num{font-family:'Fraunces',serif; font-size:1.9rem; line-height:1;}
  .date-chip .mon{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; opacity:.85;}
  .hero-card ul{list-style:none; margin:0 0 1.2em; padding:0; display:flex; flex-direction:column; gap:.55em;}
  .hero-card li{display:flex; align-items:center; gap:.6em; font-size:.92rem; font-weight:600;}
  .hero-card li svg{width:16px; height:16px; color:var(--terracotta); flex:none;}
  @media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}

  /* ---------- cartell del programa (a la home) ---------- */
  .program-card{position:relative; max-width:370px; margin-inline:auto;}
  .program-status{
    position:absolute; top:1em; right:1em; z-index:2;
    font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    padding:.4em .8em; border-radius:999px; color:#fff; background:var(--terracotta);
    box-shadow:0 6px 14px -6px rgba(0,0,0,.35);
  }
  .program-status[data-status="passada"]{background:var(--ink-soft);}
  .program-card .program-img{
    display:block; width:100%; border-radius:var(--radius-m); margin-bottom:1.2em;
    box-shadow:var(--shadow-card);
  }
  .program-card.program-missing .program-img{display:none;}
  .program-missing-msg{
    display:none; flex-direction:column; align-items:center; gap:.6em; text-align:center;
    padding:2.4em 1em; border:1.5px dashed var(--paper-line); border-radius:var(--radius-m);
    color:var(--ink-soft); margin-bottom:1.2em;
  }
  .program-missing-msg svg{width:28px; height:28px; opacity:.5;}
  .program-missing-msg p{margin:0; font-size:.9rem;}
  .program-card.program-missing .program-missing-msg{display:flex;}

  /* ---------- cards / grids ---------- */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em;}
  .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6em;}
  @media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;}}
  @media (max-width:600px){.grid-3{grid-template-columns:1fr;}}

  .card{
    background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m);
    padding:1.5em; box-shadow:var(--shadow-card);
  }
  .activity-card .icon-wrap{
    width:46px; height:46px; border-radius:12px; background:var(--mustard-tint);
    display:flex; align-items:center; justify-content:center; margin-bottom:.9em;
  }
  .activity-card .icon-wrap svg{width:24px; height:24px; color:var(--terracotta-deep);}
  .activity-card h4{font-size:1.12rem; margin-bottom:.3em;}
  .activity-card .meta{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:.5em; display:flex; gap:.6em; flex-wrap:wrap;}
  .activity-card p{font-size:.92rem; margin-bottom:0;}

  /* ---------- programa d'una festa (festa-estiu.html / festes-hivern.html) ----------
     La capçalera (títol + resum) surt a .section-head i la omple l'script
     amb les dades de l'activitat "mestra" (l'edició sencera). A sota, el
     cartell de la mestra a l'esquerra i les subactivitats apilades una
     sota l'altra a la dreta (una columna, no graella). Cada targeta,
     plegada per defecte, es desplega per veure tot el detall. */
  .programa-festa-cols{display:grid; grid-template-columns:1fr 1.4fr; gap:2em; align-items:start;}
  @media (max-width:800px){.programa-festa-cols{grid-template-columns:1fr;}}
  .programa-festa-cartell-col{position:sticky; top:1.5em;}
  .programa-festa-cartell-col img{display:block; width:100%; border-radius:var(--radius-m); box-shadow:var(--shadow-card);}
  @media (max-width:800px){.programa-festa-cartell-col{position:static; max-width:340px; margin:0 auto;}}

  /* ---------- logos de patrocinadors/organitzadors/col·laboradors/a càrrec
     de, tots junts sense diferenciar per grup, sota una imatge (cartell
     destacat de la portada o cartell de la mestra al programa d'una
     festa) — desplaçament horitzontal si no caben en una fila. */
  .entitats-fila{
    display:flex; gap:.35em; align-items:center; justify-content:flex-start;
    overflow-x:auto; margin-top:.9em; padding-bottom:.3em; scrollbar-width:thin;
  }
  .entitats-fila img{
    width:52px; height:52px; flex:none; object-fit:contain;
    background:#fff; border:1px solid var(--paper-line); border-radius:6px;
    padding:.25em; box-sizing:border-box;
  }
  .programa-festa-activitats-col{display:flex; flex-direction:column; gap:1.2em;}
  .programa-festa-col-titol{margin:0;}
  .programa-festa-titol-gran{font-size:clamp(1.6rem,3vw,2.3rem); margin:0 0 .6em;}
  .programa-quadre{cursor:default;}
  .programa-quadre-cap{display:flex; align-items:center; justify-content:space-between; gap:1.2em;}
  .programa-quadre-text{flex:1; min-width:0;}
  .programa-quadre-mini{flex:none; width:140px; height:140px; object-fit:cover; border-radius:var(--radius-s); cursor:zoom-in;}
  @media (max-width:520px){.programa-quadre-mini{width:96px; height:96px;}}
  .programa-quadre-titol-fila{display:block;}
  .programa-quadre-titol-fila h4{margin:0;}
  .programa-quadre-data{display:block; margin-top:.15em; font-size:.82rem; color:var(--ink-soft); font-style:italic;}
  .programa-quadre-toggle{margin-top:.9em; width:auto; padding:.5em 1.1em; font-size:.8rem;}
  .programa-quadre-detall{margin-top:1em; padding-top:1em; border-top:1px dashed var(--paper-line);}
  .programa-quadre-cartell{display:block; width:100%; max-width:300px; height:auto; margin:1em auto; border-radius:var(--radius-s); box-shadow:var(--shadow-card);} /* cartell tal com és el disseny, centrat i una mica reduït */
  .activitat-galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.4em; margin:.8em 0;}
  .activitat-galeria img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; cursor:zoom-in;}
  .programa-quadre-cartell{cursor:zoom-in;}
  .programa-quadre-fitxa{display:grid; grid-template-columns:1fr 1fr; gap:.4em .8em; background:var(--cream-deep); border-radius:var(--radius-s); padding:.8em 1em; margin:1em 0;}
  .programa-quadre-fitxa p{margin:0; font-size:.85rem; color:var(--ink);}
  .programa-quadre-fitxa b{color:var(--ink-soft);}
  .programa-quadre-inscripcio{margin-top:1em; padding-top:1em; border-top:1px dashed var(--paper-line);}
  .programa-quadre-entitats{margin-top:1em; padding-top:1em; border-top:1px dashed var(--paper-line); display:flex; flex-direction:column; gap:.8em;}
  .programa-quadre-entitats-grup{display:flex; flex-direction:column; gap:.5em;}
  .programa-quadre-entitats-etiqueta{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
  .programa-quadre-entitats-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.35em;}
  .programa-quadre-entitats-logos img{
    width:52px; height:52px; flex:none; object-fit:contain;
    background:#fff; border:1px solid var(--paper-line); border-radius:6px;
    padding:.25em; box-sizing:border-box; cursor:pointer;
  }
  .programa-festa-buida{color:var(--ink-soft); font-size:.92rem;}
  .tag-info{
    display:inline-flex; align-items:center; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; padding:.35em .7em; border-radius:999px;
    margin:.2em .4em .2em 0;
  }
  .tag-info--gratuit{background:var(--olive); color:#fff;}
  .tag-info--pagament{background:var(--mustard); color:#fff;}
  .tag-info--inscripcio{background:var(--blue); color:#fff;}
  .tag-info--popular{background:var(--pine); color:#fff;}

  /* ---------- photo grid / lightbox ---------- */
  .photo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.5em;}
  @media (max-width:700px){.photo-grid{grid-template-columns:repeat(3,1fr);}}
  .photo-grid--scroll{
    grid-auto-rows:170px; max-height:calc(170px*3 + .5em*2); overflow-y:auto;
    padding-right:.4em; scrollbar-width:thin;
  }
  .photo-grid--scroll .photo-tile{aspect-ratio:auto;}
  @media (max-width:700px){.photo-grid--scroll{grid-auto-rows:120px; max-height:calc(120px*3 + .5em*2);}}
  .photo-tile{
    aspect-ratio:1/1; border-radius:10px; position:relative; overflow:hidden; cursor:pointer;
    border:1px solid var(--paper-line); background:var(--cream-deep);
    display:flex; align-items:flex-end;
  }
  .photo-tile:nth-child(4n+1){background:linear-gradient(135deg,var(--terracotta-tint),var(--cream-deep));}
  .photo-tile:nth-child(4n+2){background:linear-gradient(135deg,var(--blue-tint),var(--cream-deep));}
  .photo-tile:nth-child(4n+3){background:linear-gradient(135deg,var(--olive-tint),var(--cream-deep));}
  .photo-tile:nth-child(4n){background:linear-gradient(135deg,var(--mustard-tint),var(--cream-deep));}
  .photo-tile .cam{position:absolute; top:8px; right:8px; opacity:.5;}
  .photo-tile .cam svg{width:16px; height:16px; color:var(--pine-deep);}
  .photo-tile span{
    font-size:.68rem; font-weight:700; color:var(--pine-deep); background:rgba(255,255,255,.75);
    padding:.35em .6em; margin:.4em; border-radius:999px;
  }
  .lightbox{
    position:fixed; inset:0; background:rgba(19,42,28,.86); z-index:60;
    display:none; align-items:center; justify-content:center; padding:2em;
  }
  .lightbox[data-open="true"]{display:flex;}
  .lightbox-inner{
    background:var(--cream); border-radius:var(--radius-m); max-width:520px; width:100%;
    padding:2em; text-align:center; position:relative;
  }
  .lightbox-inner .big-tile{
    aspect-ratio:4/3; border-radius:12px; background:linear-gradient(135deg,var(--terracotta-tint),var(--mustard-tint));
    display:flex; align-items:center; justify-content:center; margin-bottom:1em;
  }
  .lightbox-inner .big-tile svg{width:44px; height:44px; color:var(--pine-deep); opacity:.6;}
  .lightbox-close{position:absolute; top:.7em; right:.7em; background:none; border:none; cursor:pointer; padding:.4em;}
  .lightbox-close svg{width:22px; height:22px;}

  .gallery-empty{
    grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:.6em;
    padding:2.4em 1em; border:1.5px dashed var(--paper-line); border-radius:var(--radius-m);
    color:var(--ink-soft); text-align:center;
  }
  .gallery-empty svg{width:28px; height:28px; opacity:.5;}
  .gallery-empty p{margin:0; font-size:.9rem; max-width:32ch;}

  /* ---------- carrusel de fotos (mateixa mida, scroll horitzontal) ---------- */
  .carousel{
    display:flex; gap:.8em; overflow-x:auto; padding-bottom:.8em;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .carousel .photo-tile{flex:0 0 220px; width:220px; scroll-snap-align:start;}
  @media (max-width:600px){.carousel .photo-tile{flex-basis:170px; width:170px;}}
  .carousel::-webkit-scrollbar{height:8px;}
  .carousel::-webkit-scrollbar-track{background:transparent;}
  .carousel::-webkit-scrollbar-thumb{background:var(--paper-line); border-radius:999px;}

  /* ---------- year timeline ---------- */
  .year-card{display:grid; grid-template-columns:140px 1fr; gap:1.6em; padding:1.6em 0; border-top:1px solid var(--paper-line);}
  .year-card:last-child{border-bottom:1px solid var(--paper-line);}
  .year-card .yr{font-family:'Fraunces',serif; font-size:2rem; color:var(--terracotta-deep);}
  .year-card .yr small{display:block; font-family:'Karla',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
  @media (max-width:640px){.year-card{grid-template-columns:1fr;}}

  /* ---------- forms ---------- */
  .form-card{background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:1.7em; box-shadow:var(--shadow-card);}
  .form-card h3{font-size:1.2rem;}
  .field{margin-bottom:1em;}
  .field label{display:block; font-size:.82rem; font-weight:700; color:var(--pine-deep); margin-bottom:.35em;}
  .field input[type=text], .field input[type=tel], .field input[type=email], .field select, .field textarea{
    width:100%; padding:.7em .85em; border:1.5px solid var(--paper-line); border-radius:9px;
    font-family:'Karla',sans-serif; font-size:.94rem; background:var(--cream); color:var(--ink);
  }
  .qty-stepper{display:flex; align-items:stretch; border:1.5px solid var(--paper-line); border-radius:9px; background:var(--cream); overflow:hidden;}
  .qty-stepper button{flex:none; width:2.4em; border:0; background:transparent; color:var(--pine-deep); font-size:1.1rem; font-weight:800; cursor:pointer; font-family:'Karla',sans-serif;}
  .qty-stepper button:hover{background:var(--olive-tint);}
  .qty-stepper button:disabled{opacity:.4; cursor:default; background:transparent;}
  .qty-stepper input[type=number]{
    flex:1; min-width:0; width:100%; border:0; background:transparent; text-align:center;
    font-family:'Karla',sans-serif; font-size:.94rem; color:var(--ink); padding:.7em 0;
    -moz-appearance:textfield;
  }
  .qty-stepper input[type=number]::-webkit-outer-spin-button,
  .qty-stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  .checkrow{display:flex; align-items:center; gap:.5em; font-size:.9rem; font-weight:600;}
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:1em;}
  @media (max-width:520px){.row-2{grid-template-columns:1fr;}}
  .tech-note{
    border:1.5px dashed var(--blue); background:var(--blue-tint); border-radius:var(--radius-s);
    padding:1em 1.2em; font-size:.85rem; color:var(--pine-deep); display:flex; gap:.7em; margin-top:1.4em;
  }
  .tech-note svg{width:18px; height:18px; flex:none; color:var(--blue); margin-top:.1em;}
  .tech-note b{color:var(--terracotta-deep);}
  .form-card .msg{min-height:1.2em;}
  .msg[data-kind="ok"]{color:var(--olive);}
  .msg[data-kind="error"]{color:var(--terracotta-deep);}

  /* ---------- org chart ---------- */
  .org-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1em;}
  @media (max-width:800px){.org-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.org-grid{grid-template-columns:1fr;}}
  .org-card{background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-s); padding:1.1em; text-align:center;}
  .org-card .avatar{width:104px; height:104px; border-radius:50%; background:var(--olive-tint); margin:0 auto .6em; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .org-card .avatar img{width:100%; height:100%; object-fit:cover; object-position:center 12%;}
  .org-card .avatar svg{width:44px; height:44px; color:var(--pine-deep);}
  .org-card .avatar svg.avatar-fallback{display:none;}
  .org-card .role{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--terracotta-deep); margin-bottom:.2em;}
  .org-card .name{font-weight:700; font-size:.92rem;}

  /* ---------- transparency chart ---------- */
  .fin-legend{display:flex; flex-wrap:wrap; gap:1.2em; margin:1.4em 0 .6em;}
  .fin-legend .item{display:flex; align-items:center; gap:.5em; font-size:.85rem; font-weight:700;}
  .fin-legend .dot{width:11px; height:11px; border-radius:3px; flex:none;}
  .stackbar{display:flex; width:100%; height:34px; border-radius:8px; overflow:hidden; border:1px solid var(--paper-line);}
  .stackbar .seg{display:flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem; font-weight:800;}
  .fin-table{width:100%; border-collapse:collapse; margin-top:1.6em; font-size:.9rem;}
  .fin-table th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding-bottom:.5em; border-bottom:1px solid var(--paper-line);}
  .fin-table td{padding:.65em 0; border-bottom:1px solid var(--paper-line-soft);}
  .fin-table td:last-child, .fin-table th:last-child{text-align:right; font-variant-numeric:tabular-nums;}
  .fin-festa{
    display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    color:var(--pine-deep); background:var(--olive-tint); border-radius:999px; padding:.15em .6em; margin-right:.5em;
  }
  .fin-table .fin-total td{border-top:2px solid var(--paper-line); border-bottom:none; padding-top:.8em; font-weight:800; color:var(--pine-deep);}

  .fin-balanc{
    display:flex; align-items:center; justify-content:space-between; gap:1em;
    margin-top:1.6em; padding:1em 1.3em; border-radius:var(--radius-s);
    background:var(--cream-deep); font-weight:800; font-size:.95rem;
  }
  .fin-balanc b{font-size:1.3rem; font-variant-numeric:tabular-nums;}
  .fin-balanc b[data-positiu="1"]{color:var(--olive);}
  .fin-balanc b[data-positiu="0"]{color:var(--terracotta-deep);}

  .map-plan{
    display:block; width:100%; height:auto; margin-top:2em; border-radius:var(--radius-m);
    box-shadow:var(--shadow-card); border:1px solid var(--paper-line);
  }

  /* Slider manual (fletxes, sense autoplay ni punts) de la franja "Ens
     ajudes a fer créixer les festes?" a la portada — mostra TOTS els
     productes comprables de la botiga (18-09-2026, abans només els
     marcats "destacat" en una graella fixa de 3). */
  .merch-slider{position:relative; display:flex; align-items:center; gap:.7em;}
  .merch-slider-track{
    flex:1; min-width:0;
    display:flex; gap:1em; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; padding:.3em 0; scrollbar-width:none;
  }
  .merch-slider-track::-webkit-scrollbar{display:none;}
  .merch-slide{position:relative; flex:0 0 calc((100% - 2em) / 3); scroll-snap-align:start; text-decoration:none; display:block;}
  .merch-slide img{
    width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-m);
    box-shadow:var(--shadow-card); transition:transform .15s;
  }
  .merch-slide:hover img{transform:translateY(-3px);}
  .merch-slider-btn{
    flex:none; width:2.4em; height:2.4em; border-radius:50%; border:1.5px solid var(--pine-deep);
    background:#fff; color:var(--pine-deep); font-size:1.3rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .merch-slider-btn:hover{background:var(--pine-deep); color:var(--cream);}
  @media (max-width:600px){.merch-slide{flex-basis:100%;}}

  .merch-img{
    display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
    border-radius:var(--radius-s); margin-bottom:1em;
  }
  .merch-img-wrap{position:relative;}
  .merch-etiqueta{
    position:absolute; top:.7em; left:.7em; z-index:2;
    font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    padding:.35em .75em; border-radius:999px; color:#fff; background:var(--mustard);
    box-shadow:0 6px 14px -6px rgba(0,0,0,.35);
  }
  .merch-etiqueta[data-etiqueta="nou"]{background:var(--olive);}
  .merch-etiqueta[data-etiqueta="esgotat"]{background:var(--terracotta-deep);}
  .merch-etiqueta[data-etiqueta="nodisponible"]{background:#6B6B6B;}

  /* Botó "El vull" (i el seu equivalent desactivat de "Nou"/"Esgotat"):
     fons sempre blanc, independentment de l'estat del producte (18-09-2026,
     es va provar del color del cartellet i es va desfer). -webkit-appearance
     evita que un <button disabled> agafi l'aparença nativa del navegador
     (grisa) per damunt del blanc que volem, sobretot a Safari/mòbil. */
  .merch-btn-etiqueta{-webkit-appearance:none; appearance:none; background:#fff !important; color:var(--pine-deep) !important; border-color:var(--pine-deep) !important;}
  .merch-btn-etiqueta:hover{background:var(--pine-deep) !important; color:var(--cream) !important;}
  .merch-btn-etiqueta[disabled]{opacity:.55; cursor:default; transform:none;}
  .merch-btn-etiqueta[disabled]:hover{background:#fff !important; color:var(--pine-deep) !important;}

  /* Descripció del producte: alçada fixa (5 línies) perquè totes les
     fitxes quedin igual d'altes encara que un producte no tingui
     descripció; si el text és més llarg, es plega amb un "Llegir més"
     enlloc de fer scroll (17-09-2026). */
  .merch-desc-wrap{margin:.2em 0 0; text-align:left;}
  .merch-desc{
    font-size:.78rem; line-height:1.45; margin:0;
    min-height:calc(1.45em * 5); max-height:calc(1.45em * 5); overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  }
  .merch-desc.is-expanded{max-height:none; -webkit-line-clamp:unset; overflow:visible;}
  .merch-desc-toggle{
    display:inline-block; margin-top:.3em; border:0; background:none; padding:0; cursor:pointer;
    font-family:'Karla',sans-serif; font-size:.75rem; font-weight:800; color:var(--terracotta-deep);
  }
  .merch-desc-toggle:hover{text-decoration:underline;}
  .merch-desc-toggle[hidden]{display:none;}

  .sustain-poster{
    display:block; width:100%; max-width:320px; margin-inline:auto; border-radius:var(--radius-m);
    box-shadow:var(--shadow-card);
  }
  @media (max-width:900px){.sustain-poster{margin-top:1.6em;}}

  .bar-poster{
    display:block; width:100%; margin-top:2.4em; border-radius:var(--radius-m);
    box-shadow:var(--shadow-card);
  }

  /* ---------- bar schedule ---------- */
  .hours-table{width:100%; border-collapse:collapse; margin-top:1em;}
  .hours-table td{padding:.7em 0; border-bottom:1px solid var(--paper-line-soft); font-size:.95rem;}
  .hours-table td:first-child{font-weight:700; color:var(--pine-deep); width:40%;}

  /* ---------- footer ---------- */
  footer{
    background:var(--pine-deep); color:#CBD9CE;
    margin-inline:calc(-1*clamp(18px,4vw,48px)); margin-top:4em;
    padding:3.4em clamp(18px,4vw,48px) 2em;
  }
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2em; max-width:var(--maxw); margin-inline:auto;}
  @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
  .footer-grid h5{color:var(--cream); font-family:'Karla',sans-serif; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1em;}
  .footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6em;}
  .footer-grid a{color:#CBD9CE; text-decoration:none; font-size:.92rem;}
  .footer-grid a:hover{color:var(--cream);}
  .foot-brand{display:flex; align-items:center; gap:.7em; margin-bottom:1em;}
  .foot-brand img{
    height:60px; width:auto; object-fit:contain;
    background:#fff; padding:.4em .6em; border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
  }
  .foot-brand span{font-family:'Fraunces',serif; color:var(--cream); font-weight:600;}
  .foot-bottom{max-width:var(--maxw); margin:2.6em auto 0; padding-top:1.6em; border-top:1px solid rgba(203,217,206,.18); font-size:.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6em;}

  .footer-insta{max-width:var(--maxw); margin:2.4em auto 0; text-align:center;}
  .footer-insta a{color:#CBD9CE; text-decoration:none; font-size:.95rem; font-weight:700;}
  .footer-insta a:hover{color:var(--cream);}

  /* ---------- logos d'organitzadors/col·laboradors al peu ---------- */
  .footer-logos{
    max-width:var(--maxw); margin:2.6em auto 0; padding-top:2em;
    border-top:1px solid rgba(203,217,206,.18);
    display:flex; flex-wrap:wrap; gap:2.4em;
  }
  .footer-logos-group{display:flex; flex-direction:column; gap:.9em;}
  .footer-logos-label{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#9DB2A2;}
  .footer-logos-row{display:flex; flex-wrap:wrap; align-items:center; gap:1.2em;}
  .year-logos-row{display:flex; flex-wrap:wrap; align-items:center; gap:.8em; margin-top:.6em;}
  .year-logos-row img{
    height:44px; width:auto; max-width:110px; object-fit:contain;
    background:#fff; padding:.4em .6em; border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.12); border:1px solid var(--paper-line);
    cursor:pointer;
  }
  .footer-logos-row img{
    height:72px; width:auto; max-width:200px; object-fit:contain;
    background:#fff; padding:.6em 1em; border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    transition:transform .15s;
    cursor:pointer;
  }
  .footer-logos-row img:hover{transform:translateY(-2px);}

  .doc-card{display:grid; grid-template-columns:280px 1fr; gap:2em; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(203,217,206,.25); border-radius:var(--radius-m); padding:1.6em;}
  @media (max-width:760px){.doc-card{grid-template-columns:1fr;}}
  .doc-thumb{aspect-ratio:16/9; border-radius:12px; background:linear-gradient(135deg,#2A4E38,#0F2216); display:flex; align-items:center; justify-content:center; position:relative; border:1px solid rgba(203,217,206,.25);}
  .doc-thumb .play{width:56px; height:56px; border-radius:50%; background:var(--terracotta); display:flex; align-items:center; justify-content:center;}
  .doc-thumb .play svg{width:22px; height:22px; color:#fff; margin-left:3px;}

  .sponsor-strip{display:flex; flex-wrap:wrap; gap:.9em; margin-top:1.4em;}
  .sponsor-chip{background:#fff; border:1px solid var(--paper-line); border-radius:999px; padding:.6em 1.2em; font-size:.82rem; font-weight:700; color:var(--pine-deep);}

  .old-photo{aspect-ratio:3/4; border-radius:10px; background:repeating-linear-gradient(135deg, rgba(203,217,206,.10) 0 10px, rgba(203,217,206,.04) 10px 20px); border:1px solid rgba(203,217,206,.3); display:flex; align-items:center; justify-content:center;}
  .old-photo svg{width:26px; height:26px; color:#9DB2A2;}
  .old-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:.6em;}
  @media (max-width:760px){.old-grid{grid-template-columns:repeat(3,1fr);}}

  .divider-illus{height:18px; background-image:repeating-linear-gradient(90deg, var(--terracotta) 0 22px, var(--mustard) 22px 44px, var(--blue) 44px 66px, var(--olive) 66px 88px); opacity:.35; clip-path:polygon(0 0,100% 0,100% 40%,0 100%);}

  /* ---------- propostes / votacions ---------- */
  .proposta-tabs{display:flex; gap:.5em; flex-wrap:wrap; margin-bottom:1.4em;}
  .proposta-tab{
    padding:.5em 1.1em; border-radius:999px; border:1.5px solid var(--paper-line);
    background:#fff; font-family:'Karla',sans-serif; font-weight:700; font-size:.85rem;
    color:var(--ink-soft); cursor:pointer;
  }
  .proposta-tab[data-active="true"]{background:var(--pine-deep); border-color:var(--pine-deep); color:var(--cream);}
  .proposta-list{display:flex; flex-direction:column; gap:.8em;}
  .proposta-list--scroll{max-height:520px; overflow-y:auto; padding-right:.5em; scrollbar-width:thin;}
  .proposta-card{
    background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-m);
    padding:1.1em 1.3em; display:flex; align-items:center; justify-content:space-between; gap:1em;
  }
  .proposta-body b{display:block; font-size:.95rem;}
  .proposta-body p{margin:.3em 0 0; font-size:.85rem; color:var(--ink-soft);}
  .proposta-festa{
    display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
    padding:.25em .6em; border-radius:999px; margin-bottom:.4em;
  }
  .proposta-festa--estiu{background:var(--mustard-tint); color:var(--mustard);}
  .proposta-festa--hivern{background:var(--blue-tint); color:var(--blue);}
  .proposta-festa--totes{background:var(--olive-tint); color:var(--olive);}
  .vote-btn{
    flex:none; display:flex; flex-direction:column; align-items:center; gap:.2em;
    background:none; border:1.5px solid var(--paper-line); border-radius:14px; padding:.55em .8em;
    cursor:pointer; color:var(--terracotta);
  }
  .vote-btn svg{width:20px; height:20px;}
  .vote-btn .vote-count{font-size:.78rem; font-weight:800; color:var(--ink);}
  .vote-btn:disabled{cursor:default; opacity:.9; border-color:var(--terracotta);}
  .vote-btn:not(:disabled):hover{border-color:var(--terracotta);}
  .propostes-empty{font-size:.9rem; color:var(--ink-soft);}