@import url('/css/fonts.css');   /* Poppins autoallotjada (fonts/poppins, copiada de Mottai) */
/* ====================================================================
 * Mas el Negre — estil propi damunt la plantilla «estudi» (24/09/2026)
 * ====================================================================
 * Rèplica d'elnegre.cat (Squarespace 7.1, Fluid Engine). Aquest full fa:
 *   1. Tokens del tema: Poppins 300/500, blanc/negre, accent daurat.
 *   2. Tipografia amb les MATEIXES fórmules de mida que Squarespace.
 *   3. Els temes de secció (white, white-bold, bright, black...) del web.
 *   4. La graella Fluid Engine: 8 columnes fins a 767 px, 24 a partir de
 *      768, amb la mateixa aritmètica de gutter i alçada de fila.
 *   5. Els blocs (text, imatge, botó, vídeo, carta, mapa, llista, galeria).
 *   6. La capçalera i el peu com els de l'original.
 * Es carrega després de wsf_theme_head(), o sigui que pot afinar els tokens.
 * Font: elnegre/src/custom.css al repo; es puja tal qual amb desplega.sh.
 * Responsive: cada @container device va duplicada amb @media, com mana la
 * casa (la previsualització de mòbil de l'editor canvia el contenidor).
 * ==================================================================== */

/* ------------------------------------------------------------ 1. TOKENS */
:root {
    /* Els colors els mana l'Edició d'estil > Colors de l'editor (08/10/2026): les
       variables --background-color, --accent-color... són a la secció «/* Colors *\/»
       del final d'aquest fitxer, que és la que llegeix i desa el panell. Aquí només
       s'hi connecten els tokens; el segon valor és el de reserva (la paleta de
       Squarespace: blanc, negre, daurat, crema i verd). */
    --wsf-bg:      var(--background-color, #ffffff);
    --wsf-surface: #f4f4f4;
    --wsf-text:    var(--text-color, #000000);
    --wsf-accent:  var(--accent-color, #fcc464);
    --wsf-accent2: var(--accent-color-secondary, #74a15e);
    --en-crema:    var(--background-color-secondary, #ebeadf);
    --wsf-on-accent: #000000;
    --wsf-line:    rgba(0, 0, 0, 0.12);
    --wsf-radius:  6.4px;
    --wsf-font-heading: 'Poppins', system-ui, sans-serif;
    --wsf-font-body:    'Poppins', system-ui, sans-serif;
    --wsf-heading-weight: 500;

    /* La paleta de Squarespace, amb els mateixos noms: els blocs de text amb
       fons porten el valor literal (hsla(var(--accent-hsl), 1)). */
    --white-hsl: 0, 0%, 100%;
    --black-hsl: 0, 0%, 0%;
    --accent-hsl: 37.89473684, 96.20253165%, 69.01960784%;
    --lightAccent-hsl: 55, 23.07692308%, 89.80392157%;
    --darkAccent-hsl: 100.29850746, 26.2745098%, 50%;
    --en-verd: hsl(100.25, 43.6%, 64.5%);

    /* Marc de pàgina de Squarespace. */
    --en-max: 1800px;
    --en-gutter: 3vw;
    --en-gutter-m: 6vw;
    --en-fila-min: 24px;
}

/* ------------------------------------------------------- 2. TIPOGRAFIA */
/* Squarespace: h1 4, h2 2, h3 1.2, h4 1.2, paràgraf 1.25, gran .8, petit
   1.05; fórmula min(calc((V-1)*1.2vw + 1rem), max(calc((V-1)*0.012*1800px
   + 1rem), calc(V*1rem))) a partir de 768 px i calc((V-1)*0.012*min(100vh,
   900px) + 1rem) per sota. Amb cqw en lloc de vw perquè segueixi el marc
   de previsualització de l'editor. */
body.wsf-tpl .en-seccio,
body.wsf-tpl .en-peu {
    font-family: var(--wsf-font-body);
    font-weight: 300;
    line-height: 1.8;
    font-size: min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem));
}
body.wsf-tpl .en-seccio h1, body.wsf-tpl .en-seccio h2, body.wsf-tpl .en-seccio h3, body.wsf-tpl .en-seccio h4,
body.wsf-tpl .en-peu h1, body.wsf-tpl .en-peu h2, body.wsf-tpl .en-peu h3, body.wsf-tpl .en-peu h4 {
    font-family: var(--wsf-font-heading);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin: 2rem 0;
    color: inherit;
    max-width: none;
}
body.wsf-tpl .en-seccio h1, body.wsf-tpl .en-peu h1 { font-size: min(calc(3 * 1.2cqw + 1rem), max(calc(3 * 0.012 * 1800px + 1rem), 4rem)); line-height: calc(1.4 * (1 + (1 - 4) / 25)); }
body.wsf-tpl .en-seccio h2, body.wsf-tpl .en-peu h2 { font-size: min(calc(1 * 1.2cqw + 1rem), max(calc(1 * 0.012 * 1800px + 1rem), 2rem)); line-height: calc(1.4 * (1 + (1 - 2) / 25)); }
body.wsf-tpl .en-seccio h3, body.wsf-tpl .en-peu h3 { font-size: min(calc(0.2 * 1.2cqw + 1rem), max(calc(0.2 * 0.012 * 1800px + 1rem), 1.2rem)); line-height: calc(1.4 * (1 + (1 - 1.2) / 25)); }
/* Títol 4 un 10 % més petit que el 3 (29/10/2026, en Jordi; a Squarespace eren iguals) */
body.wsf-tpl .en-seccio h4, body.wsf-tpl .en-peu h4 { font-size: min(calc(0.1 * 1.2cqw + 1rem), max(calc(0.1 * 0.012 * 1800px + 1rem), 1.1rem)); line-height: calc(1.4 * (1 + (1 - 1.1) / 25)); }
body.wsf-tpl .en-seccio p, body.wsf-tpl .en-peu p { margin: 1rem 0; max-width: none; }
body.wsf-tpl .en-seccio .en-gran, body.wsf-tpl .en-peu .en-gran { font-size: min(calc(-0.2 * 1.2cqw + 1rem), max(calc(-0.2 * 0.012 * 1800px + 1rem), 0.8rem)); }
body.wsf-tpl .en-seccio .en-petit, body.wsf-tpl .en-peu .en-petit { font-size: min(calc(0.05 * 1.2cqw + 1rem), max(calc(0.05 * 0.012 * 1800px + 1rem), 1.05rem)); }
/* Paràgraf 2, 3 i 4 de la barra de text (classes p2, p3, p4; 29/10/2026): les mides que el web ja fa servir (2 = «petit»,
   3 = «gran», que de fet és la més petita) i una de més petita encara. Sense això, sortien iguals que el paràgraf normal. */
body.wsf-tpl .en-seccio .p2, body.wsf-tpl .en-peu .p2 { font-size: min(calc(0.05 * 1.2cqw + 1rem), max(calc(0.05 * 0.012 * 1800px + 1rem), 1.05rem)); }
body.wsf-tpl .en-seccio .p3, body.wsf-tpl .en-peu .p3 { font-size: min(calc(-0.2 * 1.2cqw + 1rem), max(calc(-0.2 * 0.012 * 1800px + 1rem), 0.8rem)); }
body.wsf-tpl .en-seccio .p4, body.wsf-tpl .en-peu .p4 { font-size: min(calc(-0.35 * 1.2cqw + 1rem), max(calc(-0.35 * 0.012 * 1800px + 1rem), 0.65rem)); }
body.wsf-tpl .en-seccio ul, body.wsf-tpl .en-seccio ol { margin: 1rem 0; padding-left: 1.5em; }
body.wsf-tpl .en-seccio li { margin: 0; }
body.wsf-tpl .en-seccio li::marker { color: inherit; }
body.wsf-tpl .en-centrat { text-align: center; }
body.wsf-tpl .en-dreta { text-align: right; }
body.wsf-tpl .en-esquerra { text-align: left; }
body.wsf-tpl .en-justificat { text-align: justify; }
body.wsf-tpl .en-color-white { color: #fff; }
body.wsf-tpl .en-color-black { color: #000; }
body.wsf-tpl .en-seccio a, body.wsf-tpl .en-peu a { color: var(--en-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
body.wsf-tpl .en-seccio a:hover, body.wsf-tpl .en-peu a:hover { color: var(--en-link); opacity: 0.75; }
body.wsf-tpl .en-seccio strong, body.wsf-tpl .en-seccio b, body.wsf-tpl .en-peu strong { font-weight: 700; }   /* Squarespace: b,strong{font-weight:700} */
@media (max-width: 767px) {
    body.wsf-tpl .en-seccio, body.wsf-tpl .en-peu { font-size: calc(0.25 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h1, body.wsf-tpl .en-peu h1 { font-size: calc(3 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h2, body.wsf-tpl .en-peu h2 { font-size: calc(1 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h3, body.wsf-tpl .en-peu h3 { font-size: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h4, body.wsf-tpl .en-peu h4 { font-size: calc(0.1 * 0.012 * min(100vh, 900px) + 1rem); }
    /* paràgrafs petit i gran al mòbil, com .sqsrte-small/-large de Squarespace (02/11/2026: abans feien servir la fórmula d'escriptori) */
    body.wsf-tpl .en-seccio .en-petit, body.wsf-tpl .en-peu .en-petit, body.wsf-tpl .en-seccio .p2, body.wsf-tpl .en-peu .p2 { font-size: calc(0.05 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio .en-gran, body.wsf-tpl .en-peu .en-gran, body.wsf-tpl .en-seccio .p3, body.wsf-tpl .en-peu .p3 { font-size: calc(-0.2 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio .p4, body.wsf-tpl .en-peu .p4 { font-size: calc(-0.35 * 0.012 * min(100vh, 900px) + 1rem); }
}
@container device (max-width: 767px) {
    body.wsf-tpl .en-seccio, body.wsf-tpl .en-peu { font-size: calc(0.25 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h1, body.wsf-tpl .en-peu h1 { font-size: calc(3 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h2, body.wsf-tpl .en-peu h2 { font-size: calc(1 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h3, body.wsf-tpl .en-peu h3 { font-size: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio h4, body.wsf-tpl .en-peu h4 { font-size: calc(0.1 * 0.012 * min(100vh, 900px) + 1rem); }
    /* paràgrafs petit i gran al mòbil, com .sqsrte-small/-large de Squarespace (02/11/2026: abans feien servir la fórmula d'escriptori) */
    body.wsf-tpl .en-seccio .en-petit, body.wsf-tpl .en-peu .en-petit, body.wsf-tpl .en-seccio .p2, body.wsf-tpl .en-peu .p2 { font-size: calc(0.05 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio .en-gran, body.wsf-tpl .en-peu .en-gran, body.wsf-tpl .en-seccio .p3, body.wsf-tpl .en-peu .p3 { font-size: calc(-0.2 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-seccio .p4, body.wsf-tpl .en-peu .p4 { font-size: calc(-0.35 * 0.012 * min(100vh, 900px) + 1rem); }
}

/* --------------------------------------------------- 3. TEMES DE SECCIÓ */
/* Valors de site.css de Squarespace ([data-section-theme=...]). Sense tema
   («default») Squarespace fa servir el :root: fons lightAccent. */
body.wsf-tpl .en-seccio, body.wsf-tpl .en-peu {
    --en-bg: var(--en-crema); --en-text: #000; --en-titol: #000;
    --en-btn-bg: var(--btn-primary-bg-color, #000); --en-btn-text: var(--btn-primary-text-color, #fff); --en-link: #000;
    --en-btn2-bg: var(--btn-secondary-bg-color, transparent); --en-btn2-text: var(--btn-secondary-text-color, #000); --en-btn2-vora: var(--btn-secondary-border-color, #000);
}
body.wsf-tpl .en-tema-white      { --en-bg: #fff; --en-text: #000; --en-titol: #000; --en-btn-bg: var(--btn-primary-bg-color, #000); --en-btn-text: var(--btn-primary-text-color, #fff); --en-btn2-bg: var(--btn-secondary-bg-color, transparent); --en-btn2-text: var(--btn-secondary-text-color, #000); --en-btn2-vora: var(--btn-secondary-border-color, #000); --en-link: #000; }
body.wsf-tpl .en-tema-white-bold { --en-bg: #fff; --en-text: #000; --en-titol: #000; --en-btn-bg: var(--btn-primary-bg-color, #000); --en-btn-text: var(--btn-primary-text-color, #fff); --en-btn2-bg: var(--btn-secondary-bg-color, transparent); --en-btn2-text: var(--btn-secondary-text-color, #000); --en-btn2-vora: var(--btn-secondary-border-color, #000); --en-link: #000; }
body.wsf-tpl .en-tema-light      { --en-bg: var(--en-crema); --en-text: #000; --en-titol: #000; --en-btn-bg: var(--btn-primary-bg-color, #000); --en-btn-text: var(--btn-primary-text-color, #fff); --en-btn2-bg: var(--btn-secondary-bg-color, transparent); --en-btn2-text: var(--btn-secondary-text-color, #000); --en-btn2-vora: var(--btn-secondary-border-color, #000); --en-link: #000; }
body.wsf-tpl .en-tema-light-bold { --en-bg: var(--en-crema); --en-text: #000; --en-titol: #000; --en-btn-bg: var(--btn-primary-bg-color, #000); --en-btn-text: var(--btn-primary-text-color, #fff); --en-btn2-bg: var(--btn-secondary-bg-color, transparent); --en-btn2-text: var(--btn-secondary-text-color, #000); --en-btn2-vora: var(--btn-secondary-border-color, #000); --en-link: #000; }
body.wsf-tpl .en-tema-bright     { --en-bg: var(--wsf-accent); --en-text: #000; --en-titol: #000; --en-btn-bg: #000; --en-btn-text: var(--wsf-accent); --en-link: #000; }
body.wsf-tpl .en-tema-bright-inverse { --en-bg: #000; --en-text: var(--wsf-accent); --en-titol: var(--wsf-accent); --en-btn-bg: var(--wsf-accent); --en-btn-text: #000; --en-link: var(--wsf-accent); }
body.wsf-tpl .en-tema-black      { --en-bg: #000; --en-text: #fff; --en-titol: #fff; --en-btn-bg: var(--wsf-accent); --en-btn-text: #000; --en-link: var(--wsf-accent); }
body.wsf-tpl .en-tema-black-bold { --en-bg: #000; --en-text: #fff; --en-titol: var(--wsf-accent); --en-btn-bg: var(--wsf-accent); --en-btn-text: #000; --en-link: var(--wsf-accent); }
body.wsf-tpl .en-tema-dark       { --en-bg: var(--en-verd); --en-text: #fff; --en-titol: #fff; --en-btn-bg: var(--wsf-accent); --en-btn-text: #000; --en-link: var(--wsf-accent); }
body.wsf-tpl .en-tema-dark-bold  { --en-bg: var(--wsf-accent2); --en-text: #fff; --en-titol: #000; --en-btn-bg: var(--wsf-accent); --en-btn-text: #000; --en-link: var(--wsf-accent); }
body.wsf-tpl .en-seccio h1, body.wsf-tpl .en-seccio h2, body.wsf-tpl .en-seccio h3, body.wsf-tpl .en-seccio h4 { color: var(--en-titol); }

/* ------------------------------------------------------------ 4. SECCIÓ */
body.wsf-tpl-estudi .wsf-main,
body.wsf-tpl-estudi.wsf-portada .wsf-main { max-width: none; padding: 0; margin: 0; width: 100%; }
/* La plantilla posa padding-top a la portada (.wsf-portada .wsf-main): aquí
   el hero arrenca a dalt de tot, sota la barra transparent. */
body.wsf-tpl .en-seccio {
    position: relative;
    background: var(--en-bg);
    color: var(--en-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
}
/* Squarespace: min-height a la secció (border-box), amb els paddings a dins. */
body.wsf-tpl .en-alcada-small  { min-height: 33vh; }
body.wsf-tpl .en-alcada-medium { min-height: 66vh; }
body.wsf-tpl .en-alcada-large  { min-height: 100vh; }
body.wsf-tpl .en-alcada-custom { min-height: var(--alc, 0px); }   /* sense --alc = alçada 0 a Squarespace: la del contingut (30/10/2026) */
/* Primera secció amb foto de fons no plena (retirs, on-som…): la barra
   transparent hi va damunt i la secció creix l'alçada de la barra. */
body.wsf-tpl-estudi .wsf-main > .en-seccio:first-child.en-amb-fons.en-alcada-small  { min-height: calc(33vh + var(--en-cap-alt)); }
body.wsf-tpl-estudi .wsf-main > .en-seccio:first-child.en-amb-fons.en-alcada-medium { min-height: calc(66vh + var(--en-cap-alt)); }
/* /ca/reservar (25/09/2026, demanat pel client): el hero de la foto més baix, perquè
   el motor de reserves quedi a la vista sense haver de baixar tant. */
body.wsf-tpl-estudi .wsf-main > #s-655f2110de202c207a83c5f2.en-seccio:first-child { min-height: calc(28vh + var(--en-cap-alt)); }
body.wsf-tpl #s-655f2110de202c207a83c5f2.en-v-top.en-alcada-medium > .en-contingut { padding-bottom: 4vmax; }
body.wsf-tpl .en-llista, body.wsf-tpl .en-galeria { min-height: 0; }
body.wsf-tpl .en-v-top    { justify-content: flex-start; }
body.wsf-tpl .en-v-bottom { justify-content: flex-end; }
body.wsf-tpl .en-fons { position: absolute; inset: 0; overflow: hidden; }
body.wsf-tpl .en-fons-img,
#device-wrapper .en-fons .en-fons-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
body.wsf-tpl .en-fons-vel { position: absolute; inset: 0; background: #000; pointer-events: none; }
body.wsf-tpl .en-contingut { position: relative; width: 100%; box-sizing: border-box; }
/* Padding vertical de secció de Squarespace (site.css, .content-wrapper):
   depèn de l'alçada i de l'alineació. Amb alçada «custom» no n'hi ha. */
body.wsf-tpl .en-v-middle.en-alcada-small  > .en-contingut { padding-top: 3.3vmax;  padding-bottom: 3.3vmax; }
body.wsf-tpl .en-v-middle.en-alcada-medium > .en-contingut { padding-top: 6.6vmax;  padding-bottom: 6.6vmax; }
body.wsf-tpl .en-v-middle.en-alcada-large  > .en-contingut { padding-top: 10vmax;   padding-bottom: 10vmax; }
body.wsf-tpl .en-v-top.en-alcada-small     > .en-contingut { padding-top: var(--en-gutter); padding-bottom: 6.6vmax; }
body.wsf-tpl .en-v-top.en-alcada-medium    > .en-contingut { padding-top: var(--en-gutter); padding-bottom: 13.2vmax; }
body.wsf-tpl .en-v-top.en-alcada-large     > .en-contingut { padding-top: var(--en-gutter); padding-bottom: 20vmax; }
body.wsf-tpl .en-v-bottom.en-alcada-small  > .en-contingut { padding-top: 6.6vmax;  padding-bottom: var(--en-gutter); }
body.wsf-tpl .en-v-bottom.en-alcada-medium > .en-contingut { padding-top: 13.2vmax; padding-bottom: var(--en-gutter); }
body.wsf-tpl .en-v-bottom.en-alcada-large  > .en-contingut { padding-top: 20vmax;   padding-bottom: var(--en-gutter); }
body.wsf-tpl .en-classic > .en-contingut { padding-left: var(--en-gutter); padding-right: var(--en-gutter); }
body.wsf-tpl .en-llista > .en-contingut, body.wsf-tpl .en-galeria > .en-contingut { padding-top: 0; padding-bottom: 0; }
body.wsf-tpl .en-ample-medium .en-contingut, body.wsf-tpl .en-ample-narrow .en-contingut { width: 100%; }

/* ------------------------------------------------ 5. GRAELLA FLUID ENGINE */
/* Còpia de la de Squarespace. Mòbil: 8 columnes, files de 24px mínim;
   escriptori: 24 columnes, files de (amplada del marc × 0,0215). */
body.wsf-tpl .en-graella {
    --gg: calc(var(--en-gutter-m) - 11px);
    --cw: calc((var(--en-max) - 11px * 7) / 8);
    display: grid;
    position: relative;
    grid-template-rows: repeat(var(--fm, 1), minmax(var(--en-fila-min), auto));
    grid-template-columns: minmax(var(--gg), 1fr) repeat(8, minmax(0, var(--cw))) minmax(var(--gg), 1fr);
    row-gap: 11px;
    column-gap: 11px;
    overflow-x: clip;
}
body.wsf-tpl .en-bloc {
    grid-area: var(--m);
    z-index: var(--z, 0);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: var(--jm, flex-start);
    min-width: 0;
    box-sizing: border-box;
}
body.wsf-tpl .en-bloc > * { flex: 0 0 auto; }
@media (min-width: 768px) {
    body.wsf-tpl .en-graella {
        --gg: calc(var(--en-gutter) - 11px);
        --cw: calc((var(--en-max) - 11px * 23) / 24);
        --ampl: min(var(--en-max), calc(100cqw - var(--en-gutter) * 2));
        grid-template-rows: repeat(var(--fd, 1), minmax(calc(var(--ampl) * 0.0215), auto));
        grid-template-columns: minmax(var(--gg), 1fr) repeat(24, minmax(0, var(--cw))) minmax(var(--gg), 1fr);
    }
    body.wsf-tpl .en-bloc { grid-area: var(--d); justify-content: var(--jd, flex-start); }
    body.wsf-tpl .en-ample-medium .en-graella { width: 75%; margin: 0 auto; }
    body.wsf-tpl .en-ample-narrow .en-graella { width: 50%; margin: 0 auto; }
}
@container device (min-width: 768px) {
    body.wsf-tpl .en-graella {
        --gg: calc(var(--en-gutter) - 11px);
        --cw: calc((var(--en-max) - 11px * 23) / 24);
        --ampl: min(var(--en-max), calc(100cqw - var(--en-gutter) * 2));
        grid-template-rows: repeat(var(--fd, 1), minmax(calc(var(--ampl) * 0.0215), auto));
        grid-template-columns: minmax(var(--gg), 1fr) repeat(24, minmax(0, var(--cw))) minmax(var(--gg), 1fr);
    }
    body.wsf-tpl .en-bloc { grid-area: var(--d); justify-content: var(--jd, flex-start); }
    body.wsf-tpl .en-ample-medium .en-graella { width: 75%; margin: 0 auto; }
    body.wsf-tpl .en-ample-narrow .en-graella { width: 50%; margin: 0 auto; }
}
@container device (max-width: 767px) {
    body.wsf-tpl .en-graella {
        --gg: calc(var(--en-gutter-m) - 11px);
        --cw: calc((var(--en-max) - 11px * 7) / 8);
        grid-template-rows: repeat(var(--fm, 1), minmax(var(--en-fila-min), auto));
        grid-template-columns: minmax(var(--gg), 1fr) repeat(8, minmax(0, var(--cw))) minmax(var(--gg), 1fr);
    }
    body.wsf-tpl .en-bloc { grid-area: var(--m); justify-content: var(--jm, flex-start); }
    body.wsf-tpl .en-ample-medium .en-graella, body.wsf-tpl .en-ample-narrow .en-graella { width: 100%; }
}

/* Motor clàssic (12 columnes en flux): 4 seccions. */
body.wsf-tpl .en-flux { max-width: var(--en-max); margin: 0 auto; }
body.wsf-tpl .en-fila { display: flex; flex-wrap: wrap; gap: 0 17px; }
body.wsf-tpl .en-col { flex: 1 1 calc(var(--span, 12) / 12 * 100% - 17px); min-width: 0; }
body.wsf-tpl .en-col > .en-bloc { padding: 17px; }
body.wsf-tpl .en-ample-medium .en-flux { width: 75%; }
body.wsf-tpl .en-ample-narrow .en-flux { width: 50%; }

/* ------------------------------------------------------------- 6. BLOCS */
body.wsf-tpl .en-text {
    background: var(--bg, transparent);
    padding: var(--pad, 0);
    box-sizing: border-box;
}
body.wsf-tpl .en-text.en-ple { height: 100%; }
body.wsf-tpl .en-text-cos { display: block; width: 100%; }
body.wsf-tpl .en-text-cos > :first-child { margin-top: 0; }
body.wsf-tpl .en-text-cos > :last-child { margin-bottom: 0; }
/* Fons de bloc de text «del tema» (sqs-background-enabled sense color): el de
   --tweak-text-block-background-color de site.css per a cada tema; el text
   damunt del fons, del color que li toca. */
body.wsf-tpl .en-seccio, body.wsf-tpl .en-peu { --en-bloc-fons: #fff; --en-bloc-text: #000; }
body.wsf-tpl .en-tema-white, body.wsf-tpl .en-tema-white-bold { --en-bloc-fons: var(--en-crema); }
body.wsf-tpl .en-tema-bright { --en-bloc-fons: #000; --en-bloc-text: #fff; }
body.wsf-tpl .en-tema-bright-inverse { --en-bloc-fons: var(--wsf-accent); --en-bloc-text: #000; }
body.wsf-tpl .en-text[style*="--bg"] { color: var(--en-bloc-text, #000); --en-link: var(--en-bloc-text, #000); }
body.wsf-tpl .en-text[style*="--bg"] h1, body.wsf-tpl .en-text[style*="--bg"] h2, body.wsf-tpl .en-text[style*="--bg"] h3, body.wsf-tpl .en-text[style*="--bg"] h4 { color: var(--en-bloc-text, #000); }

/* Com a Squarespace, la imatge va ABSOLUTA dins de la seva cel·la: així no
   fa créixer les files (auto) i és la graella qui mana la mida: 24 px per fila
   al mòbil, 2,15 % de l'amplada a escriptori. Sense això una icona de 700 px
   en una cel·la de dues files sortia a mida natural i ocupava mitja pantalla. */
body.wsf-tpl .en-imatge { margin: 0; width: 100%; height: 100%; overflow: hidden; position: relative; }
body.wsf-tpl .en-imatge img,
#device-wrapper .en-imatge img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-position: var(--focal, 50% 50%); }
body.wsf-tpl .en-fit-cover img,   #device-wrapper .en-fit-cover img   { object-fit: cover; }
body.wsf-tpl .en-fit-contain img, #device-wrapper .en-fit-contain img { object-fit: contain; }
body.wsf-tpl .en-bloc.en-image { justify-content: stretch; }
body.wsf-tpl .en-bloc.en-image > .en-imatge { flex: 1 1 auto; min-height: 100%; }
body.wsf-tpl .en-imatge a { position: absolute; inset: 0; display: block; }
/* Al motor clàssic (flux) les imatges van a la seva alçada natural. */
body.wsf-tpl .en-col .en-imatge { height: auto; }
body.wsf-tpl .en-col .en-imatge a { position: static; }
body.wsf-tpl .en-col .en-imatge img, #device-wrapper .en-col .en-imatge img { position: static; height: auto; }

body.wsf-tpl .en-boto { display: flex; width: 100%; }
body.wsf-tpl .en-boto-center { justify-content: center; }
body.wsf-tpl .en-boto-left { justify-content: flex-start; }
body.wsf-tpl .en-boto-right { justify-content: flex-end; }
/* Botó «estirat» de Squarespace (sqs-stretched): omple tota la cel·la. */
body.wsf-tpl .en-bloc.en-button > .en-boto-estirat { flex: 1 1 auto; height: 100%; }
body.wsf-tpl .en-boto-estirat .en-btn, body.wsf-tpl .en-seccio .en-boto-estirat .en-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; }
body.wsf-tpl .en-seccio .en-btn, body.wsf-tpl .en-peu .en-btn {
    display: inline-block;
    font-family: var(--wsf-font-body);
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    padding: 1.2em 2.004em;   /* Squarespace: .sqs-block-button-element--medium */
    border-radius: var(--btn-primary-border-radius, 0);   /* Edició d'estil > Botons (29/10/2026); sense res desat, com a Squarespace */
    border: 0;
    box-shadow: inset 0 0 0 var(--btn-primary-border-width, 0px) var(--btn-primary-border-color, transparent);
    background: var(--en-btn-bg);
    color: var(--en-btn-text);
    font-size: min(calc(0 * 1.2cqw + 1rem), max(calc(0 * 0.012 * 1800px + 1rem), 1rem));
    transition: opacity .16s ease;
    opacity: 1;
}
body.wsf-tpl .en-seccio .en-btn:hover, body.wsf-tpl .en-peu .en-btn:hover { opacity: 0.8; color: var(--en-btn-text); }
body.wsf-tpl .en-seccio .en-btn-small { font-size: min(calc(-0.1 * 1.2cqw + 1rem), max(calc(-0.1 * 0.012 * 1800px + 1rem), 0.9rem)); padding: 0.8em 1.336em; }
body.wsf-tpl .en-seccio .en-btn-large { font-size: min(calc(0.1 * 1.2cqw + 1rem), max(calc(0.1 * 0.012 * 1800px + 1rem), 1.1rem)); padding: 1.6em 2.672em; }
body.wsf-tpl .en-seccio .en-btn-secundari { font-size: min(calc(0.1 * 1.2cqw + 1rem), max(calc(0.1 * 0.012 * 1800px + 1rem), 1.1rem)); }
body.wsf-tpl .en-seccio .en-btn-terciari { font-size: min(calc(-0.1 * 1.2cqw + 1rem), max(calc(-0.1 * 0.012 * 1800px + 1rem), 0.9rem)); }
/* Estils de botó que es trien a l'editor (28/10/2026, barra de botó de 25-text-toolbar.js): «Contorn» i
   «Només text». Els colors surten del tema de la secció, com els del botó ple. */
body.wsf-tpl .en-seccio .en-btn.en-btn-contorn, body.wsf-tpl .en-peu .en-btn.en-btn-contorn {
    /* a les seccions clares, Edició d'estil > Botons > Secondary (--en-btn2-*); a les fosques, el color del botó del tema */
    background: var(--en-btn2-bg, transparent); color: var(--en-btn2-text, var(--en-btn-bg));
    box-shadow: inset 0 0 0 var(--btn-secondary-border-width, 2px) var(--en-btn2-vora, var(--en-btn-bg));
    border-radius: var(--btn-secondary-border-radius, var(--btn-primary-border-radius, 0));
    transition: background-color .16s ease, color .16s ease;
}
body.wsf-tpl .en-seccio .en-btn.en-btn-contorn:hover, body.wsf-tpl .en-peu .en-btn.en-btn-contorn:hover {
    opacity: 1; background: var(--en-btn-bg); color: var(--en-btn-text);
}
body.wsf-tpl .en-seccio .en-btn.en-btn-enllac, body.wsf-tpl .en-peu .en-btn.en-btn-enllac {
    background: transparent; color: var(--en-link, var(--en-btn-bg)); padding-left: 0; padding-right: 0;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
body.wsf-tpl .en-seccio .en-btn.en-btn-enllac:hover, body.wsf-tpl .en-peu .en-btn.en-btn-enllac:hover {
    opacity: .7; color: var(--en-link, var(--en-btn-bg));
}

body.wsf-tpl .en-video { position: relative; width: 100%; aspect-ratio: var(--ar, 16/9); background: #000; }
body.wsf-tpl .en-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Amb el component Vídeo de Websfera (02/11/2026) la caixa 16:9 la fa .ws-video: el bloc no porta fons ni proporció (si no,
   el marge de 24 px del component quedava com dues franges negres a dalt i a baix, 03/11/2026) */
body.wsf-tpl .en-video:has(> .ws-video) { aspect-ratio: auto; background: none; }
body.wsf-tpl .en-video > .ws-video { margin: 0 !important; }

body.wsf-tpl .en-codi { width: 100%; }
body.wsf-tpl .en-codi .ibe { min-height: 480px; }

body.wsf-tpl .en-carta { width: 100%; }
/* Cada plat és una graella (28/10/2026): títol i preu a la mateixa línia de base (el preu a la dreta, sense partir-se)
   i la descripció a sota, de banda a banda, fins al mateix marge dret que el preu. Abans el preu flotava damunt del
   títol: quedava més avall que el títol i, en mode edició, el títol el tapava. */
body.wsf-tpl .en-carta .en-plat { margin: 0 0 1.6em; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5em; align-items: baseline; }
/* `.en-seccio .en-carta` perquè guanyin a les regles generals dels títols i paràgrafs de secció (marges de 32 i 16 px) */
body.wsf-tpl .en-seccio .en-carta .en-plat-titol { grid-column: 1; grid-row: 1; font-size: 1em; line-height: 1.35; margin: 0; letter-spacing: 0.02em; }
body.wsf-tpl .en-seccio .en-carta .en-preu { grid-column: 2; grid-row: 1; font-size: 1em; line-height: 1.35; font-weight: 500; white-space: nowrap; text-align: right; }
body.wsf-tpl .en-seccio .en-carta .en-plat-desc { grid-column: 1 / -1; grid-row: 2; margin: 0.45em 0 0; font-size: 0.9em; }
body.wsf-tpl .en-carta .en-plat-titol:empty { display: none; }

body.wsf-tpl .en-mapa { width: 100%; height: 100%; min-height: 360px; display: flex; flex-direction: column; }
body.wsf-tpl .en-mapa iframe { flex: 1 1 auto; width: 100%; min-height: 560px; border: 0; }   /* més alt (en Jordi, 02/11/2026; abans 320 px) */
@media (max-width: 767px) { body.wsf-tpl .en-mapa iframe { min-height: 420px; } }
@container device (max-width: 767px) { body.wsf-tpl .en-mapa iframe { min-height: 420px; } }
body.wsf-tpl .en-mapa-peu { display: flex; justify-content: space-between; gap: 1em; font-size: 0.8em; margin: 0.4em 0 0; }

body.wsf-tpl .en-social { display: flex; justify-content: center; gap: 12px; width: 100%; }
body.wsf-tpl .en-social a { display: inline-flex; color: inherit; }
body.wsf-tpl .en-instagram { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; font-weight: 500; }
/* Bloc d'Instagram de Squarespace: graella de 5 miniatures quadrades per fila
   (padding 50 px entre elles a l'original: 2,5 %), el text en passar-hi. */
body.wsf-tpl .en-ig { display: grid; grid-template-columns: repeat(var(--per-fila, 5), minmax(0, 1fr)); gap: 2%; width: 100%; }
body.wsf-tpl .en-ig-item { margin: 0; position: relative; aspect-ratio: 1; overflow: hidden; background: #eee; }
body.wsf-tpl .en-ig-item a { display: block; width: 100%; height: 100%; cursor: pointer; }
body.wsf-tpl .en-ig-item img, #device-wrapper .en-ig-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* En passar per sobre no fa res; el clic obre la publicació amb el text sencer (components/instagram/instagram.js,
   02/11/2026). El peu de foto només el llegeix la finestra. */
body.wsf-tpl .en-ig-item figcaption { display: none; }
body.wsf-tpl .en-ig-peu { text-align: center; margin: 1.2em 0 0; }
@media (max-width: 767px) { body.wsf-tpl .en-ig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3%; } }
@container device (max-width: 767px) { body.wsf-tpl .en-ig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3%; } }
body.wsf-tpl .en-espai { width: 100%; min-height: 24px; }
body.wsf-tpl .en-audio { margin: 0; width: 100%; }
body.wsf-tpl .en-audio audio { width: 100%; }

/* Llistes (secció «auto layout» de Squarespace: targetes en columnes). */
body.wsf-tpl .en-llista .en-llista-cos { padding: var(--pad-dalt, 6.6vmax) var(--en-gutter) var(--pad-baix, 6.6vmax); max-width: var(--en-max); margin: 0 auto; box-sizing: border-box; }
/* Títol de la secció de llista: font de títol a mida heading-2 (Squarespace:
   --list-section-title-text-font-*); les negretes del text es conserven. */
body.wsf-tpl .en-llista-titol { text-align: center; margin: 0 0 var(--esp-titol-seccio, 40px); font-family: var(--wsf-font-heading); font-weight: 500; line-height: 1.4; font-size: min(calc(1 * 1.2cqw + 1rem), max(calc(1 * 0.012 * 1800px + 1rem), 2rem)); }
/* Preguntes freqüents (02/11/2026, en Jordi): el títol de la llista a l'esquerra */
body.wsf-tpl #s-6269053e578f7166e91d19c7 .en-llista-titol { text-align: left; }
body.wsf-tpl .en-llista-titol p { margin: 0; }
body.wsf-tpl .en-llista-titol strong { font-weight: 700; }
/* Opcions de la secció de Squarespace (options del JSON): amplada del text
   dins l'ítem, espais i mides tipogràfiques (heading-N / paragraph-N / custom). */
body.wsf-tpl .en-llista-text { width: var(--ample-cos, 100%); margin: 0 auto; }
/* «Què és el Negre per a tu?» (llista compartida que-es-el-negre): el text una mica més ample que a Squarespace (75 % → 85 %),
   petició del 30/10/2026. A totes les pàgines on surt la llista. */
body.wsf-tpl .en-seccio.en-llista:has(.ws-llista[data-key="que-es-el-negre"]) { --ample-cos: 85% !important; }
body.wsf-tpl .en-llista-imatge { width: var(--ample-media, 100%); margin-left: auto; margin-right: auto; margin-bottom: var(--esp-media, 1em); }
body.wsf-tpl .en-llista-item-titol { margin-bottom: var(--esp-titol, 0.5em); }
body.wsf-tpl .en-llista-desc { margin-bottom: var(--esp-cos, 0); }
body.wsf-tpl .en-llista-titol-heading-1 .en-llista-item-titol { font-size: min(calc(3 * 1.2cqw + 1rem), max(calc(3 * 0.012 * 1800px + 1rem), 4rem)); }
body.wsf-tpl .en-llista-titol-heading-2 .en-llista-item-titol { font-size: min(calc(1 * 1.2cqw + 1rem), max(calc(1 * 0.012 * 1800px + 1rem), 2rem)); }
body.wsf-tpl .en-llista-titol-heading-3 .en-llista-item-titol, body.wsf-tpl .en-llista-titol-heading-4 .en-llista-item-titol { font-size: min(calc(0.2 * 1.2cqw + 1rem), max(calc(0.2 * 0.012 * 1800px + 1rem), 1.2rem)); }
body.wsf-tpl .en-llista-cos-paragraph-1 .en-llista-desc { font-size: min(calc(-0.2 * 1.2cqw + 1rem), max(calc(-0.2 * 0.012 * 1800px + 1rem), 0.8rem)); }
body.wsf-tpl .en-llista-cos-paragraph-2 .en-llista-desc { font-size: inherit; }
body.wsf-tpl .en-llista-cos-paragraph-3 .en-llista-desc { font-size: min(calc(0.05 * 1.2cqw + 1rem), max(calc(0.05 * 0.012 * 1800px + 1rem), 1.05rem)); }
body.wsf-tpl .en-llista-titol-custom .en-llista-item-titol { font-size: var(--t-titol, 1.6rem); }
body.wsf-tpl .en-llista-cos-custom .en-llista-desc { font-size: var(--t-desc, 1rem); }
body.wsf-tpl .en-llista-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap, 60px); }
body.wsf-tpl .en-llista-item { display: flex; flex-direction: column; }
body.wsf-tpl .en-llista-imatge { margin: 0 0 1em; aspect-ratio: var(--ar, 1); overflow: hidden; }
body.wsf-tpl .en-llista-imatge img, #device-wrapper .en-llista-imatge img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.wsf-tpl .en-llista-item-titol { font-size: var(--t-titol, 1.6rem); margin: 0 0 0.5em; }
body.wsf-tpl .en-llista-desc { font-size: var(--t-desc, 1rem); }
body.wsf-tpl .en-llista-desc > :first-child { margin-top: 0; }
body.wsf-tpl .en-llista-item .en-boto { margin-top: auto; padding-top: 1em; justify-content: flex-start; }
body.wsf-tpl .en-llista-item .en-btn { font-size: var(--t-boto, 0.9rem); }
/* Llistes: marges com a Squarespace (29/10/2026). Les regles generals de secció (.en-seccio h3 { margin: 2rem 0 },
   .en-seccio p { margin: 1rem 0 }, .en-seccio ul { padding-left: 1.5em }) són més específiques que les de la llista i
   hi guanyaven: cada element tenia ~80 px de més i la llista anava 30 px cap endins. */
body.wsf-tpl .en-seccio .en-llista-items { margin: 0; padding: 0; }
body.wsf-tpl .en-seccio .en-llista-item-titol { margin: 0 0 var(--esp-titol, 0.5em); line-height: calc(1.4 * 0.96); text-wrap: wrap; }   /* Squarespace: 1,344 i sense equilibrar */
body.wsf-tpl .en-seccio .en-llista-desc p { margin: 0 0 1em; }
body.wsf-tpl .en-seccio .en-llista-desc > :last-child { margin-bottom: 0; }

/* Llistes a mòbil (29/10/2026): a menys de 768 px Squarespace fa servir la fórmula de mòbil, calc((V-1)*0.012*min(100vh,900px)+1rem),
   i les mides de les llistes (--t-titol/--t-desc/--t-boto, en línia a cada llista) només portaven la d'escriptori: a 390 px
   els títols sortien a 16,9 px en lloc de 18,2. Es reconeix el valor V de l'atribut style (cal !important per guanyar-li).
   Si el conversor en genera un de nou, cal afegir-lo aquí (bin/render.py, estils de llista). */
@media (max-width: 767px) {
    [style*="--t-titol:min(calc(0.1 * 1.2cqw"] { --t-titol: calc(0.1 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-titol:min(calc(0.2 * 1.2cqw"] { --t-titol: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-titol:min(calc(0.6 * 1.2cqw"] { --t-titol: calc(0.6 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-titol:min(calc(1.2 * 1.2cqw"] { --t-titol: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-desc:min(calc(-0.1 * 1.2cqw"] { --t-desc: calc(-0.1 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-desc:min(calc(0 * 1.2cqw"] { --t-desc: calc(0 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-desc:min(calc(0.2 * 1.2cqw"] { --t-desc: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-boto:min(calc(-0.2 * 1.2cqw"] { --t-boto: calc(-0.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-boto:min(calc(-0.1 * 1.2cqw"] { --t-boto: calc(-0.1 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-boto:min(calc(0 * 1.2cqw"] { --t-boto: calc(0 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    body.wsf-tpl .en-llista-titol, body.wsf-tpl .en-llista-titol-heading-2 .en-llista-item-titol { font-size: calc(1 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-llista-titol-heading-1 .en-llista-item-titol { font-size: calc(3 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-llista-titol-heading-3 .en-llista-item-titol, body.wsf-tpl .en-llista-titol-heading-4 .en-llista-item-titol { font-size: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem); }
}
@container device (max-width: 767px) {
    [style*="--t-titol:min(calc(0.1 * 1.2cqw"] { --t-titol: calc(0.1 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-titol:min(calc(0.2 * 1.2cqw"] { --t-titol: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-titol:min(calc(0.6 * 1.2cqw"] { --t-titol: calc(0.6 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-titol:min(calc(1.2 * 1.2cqw"] { --t-titol: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-desc:min(calc(-0.1 * 1.2cqw"] { --t-desc: calc(-0.1 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-desc:min(calc(0 * 1.2cqw"] { --t-desc: calc(0 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-desc:min(calc(0.2 * 1.2cqw"] { --t-desc: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-boto:min(calc(-0.2 * 1.2cqw"] { --t-boto: calc(-0.2 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-boto:min(calc(-0.1 * 1.2cqw"] { --t-boto: calc(-0.1 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    [style*="--t-boto:min(calc(0 * 1.2cqw"] { --t-boto: calc(0 * 0.012 * min(100vh, 900px) + 1rem) !important; }
    body.wsf-tpl .en-llista-titol, body.wsf-tpl .en-llista-titol-heading-2 .en-llista-item-titol { font-size: calc(1 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-llista-titol-heading-1 .en-llista-item-titol { font-size: calc(3 * 0.012 * min(100vh, 900px) + 1rem); }
    body.wsf-tpl .en-llista-titol-heading-3 .en-llista-item-titol, body.wsf-tpl .en-llista-titol-heading-4 .en-llista-item-titol { font-size: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem); }
}

body.wsf-tpl .en-titol-align-center .en-llista-item-titol, body.wsf-tpl .en-cos-align-center .en-llista-desc { text-align: center; }
body.wsf-tpl .en-boto-align-center .en-llista-item .en-boto { justify-content: center; }
body.wsf-tpl .en-llista-cards .en-llista-item { background: rgba(255, 255, 255, 0.5); padding: 24px; }
@media (max-width: 767px) {
    body.wsf-tpl .en-llista-items { grid-template-columns: 1fr; gap: var(--gap, 40px); }   /* Squarespace manté l'espai de la llista a mòbil (29/10/2026) */
    body.wsf-tpl .en-llista .en-llista-cos { padding: var(--pad-dalt, 6.6vmax) 3vw var(--pad-baix, 6.6vmax); }   /* Squarespace a mòbil: 12 px als costats i el marge propi de la llista (29/10/2026) */
}
@container device (max-width: 767px) {
    body.wsf-tpl .en-llista-items { grid-template-columns: 1fr; gap: var(--gap, 40px); }   /* Squarespace manté l'espai de la llista a mòbil (29/10/2026) */
    body.wsf-tpl .en-llista .en-llista-cos { padding: var(--pad-dalt, 6.6vmax) 3vw var(--pad-baix, 6.6vmax); }   /* Squarespace a mòbil: 12 px als costats i el marge propi de la llista (29/10/2026) */
}

/* Galeries (masonry de 3 columnes). */
body.wsf-tpl .en-galeria .en-contingut { padding: 3.3vmax var(--en-gutter); box-sizing: border-box; }
body.wsf-tpl .en-galeria-items { columns: var(--cols, 3); column-gap: var(--gap, 20px); }
body.wsf-tpl .en-galeria-item { margin: 0 0 var(--gap, 20px); break-inside: avoid; }
body.wsf-tpl .en-galeria-item img, #device-wrapper .en-galeria-item img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { body.wsf-tpl .en-galeria-items { columns: 2; } }
@container device (max-width: 767px) { body.wsf-tpl .en-galeria-items { columns: 2; } }

/* Formularis (lib/elnegre-form.php), amb l'estil dels de Squarespace
   (site.css: .form-wrapper .field-list .field .field-element): camps a tota
   amplada, fons #fafafa, vora #ccc d'1 px, cantonades de 2 px, padding 12 px;
   cada camp amb 24 px a sota; etiqueta a la mida petita del cos. */
body.wsf-tpl .en-form { width: 100%; }
body.wsf-tpl .en-form-camp { margin: 0 0 20px; position: relative; }
/* Squarespace: títol del camp i text del camp a la mida normal (1,25); caselles, descripcions i ajudes a la petita (1,05); tot amb la font del cos a pes 300. */
body.wsf-tpl .en-form label, body.wsf-tpl .wsf-main .en-form label { display: block; font-family: var(--wsf-font-body); font-weight: 300; text-transform: none; letter-spacing: 0; opacity: 1; color: inherit; margin-bottom: 0; font-size: min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem)); line-height: 1.8; }
/* Els formularis d'aquest web son els nous de Squarespace (useFormsJs), que
   prenen els colors de les variables del tema (--tweak-form-block-field-*):
   fons del camp lightAccent (crema) a les seccions white-bold i blanc a la
   resta, sense vora visible, cantonades de 5 px, padding 5/10 px, 20 px sota. */
body.wsf-tpl .en-seccio { --en-camp-fons: #fff; }
body.wsf-tpl .en-tema-white-bold { --en-camp-fons: var(--en-crema); }
body.wsf-tpl :is(.en-tema-white, .en-tema-default) { --en-camp-fons: #f1f0ea; }   /* sobre blanc, els camps blancs no es veien (30/10/2026) */
body.wsf-tpl .en-text[style*="--bg"] { --en-camp-fons: #fff; }
body.wsf-tpl .en-form input[type="text"], body.wsf-tpl .en-form input[type="email"], body.wsf-tpl .en-form input[type="number"],
body.wsf-tpl .en-form select, body.wsf-tpl .en-form textarea {
    display: block; width: 100%; box-sizing: border-box; padding: 5px 10px; margin: 6px 0 0;
    border: 0; border-radius: 5px; background: var(--en-camp-fons, #fff); color: #000;
    font-family: var(--wsf-font-body); font-weight: 300; line-height: normal;
    font-size: max(16px, min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem)));
    transition: background .1s ease-in;
}
body.wsf-tpl .en-form input:focus, body.wsf-tpl .en-form textarea:focus, body.wsf-tpl .en-form select:focus { outline: 1px solid #000; outline-offset: 0; }
body.wsf-tpl .en-form textarea { min-height: 100px; resize: vertical; }
body.wsf-tpl .en-form-check, body.wsf-tpl .wsf-main .en-form-check, body.wsf-tpl .wsf-main .en-form label.en-form-check { text-transform: none; letter-spacing: 0; display: flex; align-items: flex-start; gap: 11px; font-size: min(calc(0.05 * 1.2cqw + 1rem), max(calc(0.05 * 0.012 * 1800px + 1rem), 1.05rem)); margin: 6px 0 4px; line-height: 1.6; }
body.wsf-tpl .en-form-check input { margin: 0.35em 0 0; width: 15px; height: 15px; flex: 0 0 auto; accent-color: #000; border-radius: 5px; }
body.wsf-tpl .en-form-grup-titol { margin: 0 0 4px; font-size: min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem)); }
body.wsf-tpl .en-form-req { color: inherit; opacity: 0.7; }
body.wsf-tpl .en-form-ajuda { margin: 4px 0 0; font-size: min(calc(0.05 * 1.2cqw + 1rem), max(calc(0.05 * 0.012 * 1800px + 1rem), 1.05rem)); opacity: 0.85; }
body.wsf-tpl .en-form-error { border: 1px solid #bd0000; color: #bd0000; padding: 0.7em 1em; margin: 0 0 24px; border-radius: 2px; }
body.wsf-tpl .en-form-exit { padding: 1.5em; text-align: center; font-weight: 500; }
body.wsf-tpl .en-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.wsf-tpl .en-form-enviar { margin: 8px 0 0; }
body.wsf-tpl .en-form .en-btn { cursor: pointer; font-family: var(--wsf-font-body); }
/* Formularis de Websfera (bloc Formulari, components/form/form.js; 20/10/2026): el mateix aspecte que els
   d'aquí dalt, a través de les variables del component, i a tota l'amplada del bloc (el component es posa
   560 px i marges propis; l'espaiat de l'editor, en línia amb !important, continua manant). */
body.wsf-tpl .en-bloc .ws-form {
    max-width: none !important; margin: 0 !important; font-family: var(--wsf-font-body);
    --ws-form-camp-fons: var(--en-camp-fons, #fff); --ws-form-camp-padding: 5px 10px; --ws-form-accent: #000;
    --ws-form-etiqueta: min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem));
    --ws-form-camp-mida: max(16px, min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem)));
    --ws-form-opcio: min(calc(0.05 * 1.2cqw + 1rem), max(calc(0.05 * 0.012 * 1800px + 1rem), 1.05rem));
    --ws-form-ajuda: var(--ws-form-opcio);
}
/* Títol d'un text intercalat (el del butlleti): com els h2 de les seccions, que és com sortia amb elnegre-form.php;
   i la caixa del missatge, amb l'alçada mínima d'abans */
body.wsf-tpl .en-bloc .ws-form .ws-form-info-titol {
    font-size: min(calc(1 * 1.2cqw + 1rem), max(calc(1 * 0.012 * 1800px + 1rem), 2rem)); line-height: calc(1.4 * (1 + (1 - 2) / 25));
    font-weight: 500 !important; margin: 0 0 32px !important;
}
body.wsf-tpl .en-bloc .ws-form textarea { min-height: 100px; }
@media (max-width: 767px) {
    body.wsf-tpl .en-bloc .ws-form .ws-form-info-titol { font-size: calc(1 * 0.012 * min(100vh, 900px) + 1rem); }
}
@container device (max-width: 767px) {
    body.wsf-tpl .en-bloc .ws-form .ws-form-info-titol { font-size: calc(1 * 0.012 * min(100vh, 900px) + 1rem); }
}

/* ------------------------------------------------------- 7. CAPÇALERA */
/* Squarespace «dynamic»: la barra va damunt de la primera secció, sense
   fons, i pren el color del tema de sota (blanc sobre les seccions negres).
   Cada pàgina diu de quin color va amb un <style> (render.pagina_php). */
body.wsf-tpl-estudi .wsf-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 40;
    background: transparent;
    color: var(--en-cap, #fff);
}
body.wsf-tpl-estudi .wsf-header-inner {
    max-width: none;
    padding: 1.8vw 3vw;
    gap: 2.5vw;
    min-height: 0;
    align-items: center;
}
body.wsf-tpl-estudi .wsf-brand { color: inherit; }
body.wsf-tpl-estudi .wsf-brand:hover { color: inherit; opacity: 0.85; }
body.wsf-tpl-estudi .wsf-brand img, #device-wrapper .wsf-header .wsf-brand img { display: block; max-height: 59px; width: auto; filter: var(--en-logo-filtre, none); }
/* Com a Squarespace: la barra transparent només se superposa a les seccions
   amb imatge de fons. Si la primera secció no en té, el contingut baixa
   l'alçada de la barra (logo 59 px + 2 × 1.8vw; al mòbil 33 px + 2 × 6vw). */
body.wsf-tpl-estudi #device-wrapper { --en-cap-alt: calc(59px + 3.6vw); }
/* Squarespace: la primera secció porta padding-top = alçada de la capçalera
   (main .sections:first-child .page-section:first-child { padding-top:
   var(--header-height) }), amb foto o sense: la barra transparent hi va
   damunt i el contingut comença a sota. */
body.wsf-tpl-estudi .wsf-main > .en-seccio:first-child { padding-top: var(--en-cap-alt); }
body.wsf-tpl-estudi .wsf-header .wsf-logo-negre { display: none; }
body.wsf-tpl-estudi.en-cap-fosca .wsf-header { --en-cap: #000; }
body.wsf-tpl-estudi .wsf-nav { margin-left: 0; margin-right: auto; gap: 1.8vw; flex-wrap: nowrap; }
/* Squarespace: el menú va amb la font de navegació = la del cos (Poppins 300)
   a la mida del paràgraf (valor 1,25), sense espaiat. */
body.wsf-tpl-estudi .wsf-nav-link,
body.wsf-tpl-estudi .wsf-nav-link.actiu {
    font-family: var(--wsf-font-body);
    font-weight: 300;
    font-size: min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem));
    line-height: 1.8;
    color: inherit;
    opacity: 1;
    padding: 0.1em 0;   /* com Squarespace (0,1em): el subratllat de l'opció activa va a aquesta distància del text (02/11/2026; abans 0,2em) */
    letter-spacing: 0;
}
body.wsf-tpl-estudi .wsf-nav-link:hover { color: inherit; opacity: 0.7; }
body.wsf-tpl-estudi .wsf-nav-link.actiu::after { display: none; }
body.wsf-tpl-estudi .wsf-nav-carpeta-titol .wsf-nav-fletxa { display: none; }
/* Desplegable com el de Squarespace: caixa absoluta a left:-1em amb padding
   .5em 1em, mínim 200 px, SENSE vora ni ombra, amb el fons del tema de la
   capçalera (negre sobre les seccions fosques, blanc sobre les clares:
   --en-cap-bg l'emet la pàgina) i el text del color del menú; els ítems a la
   mateixa mida que el menú, línia 1,3; l'actiu subratllat d'1 px. */
body.wsf-tpl-estudi .wsf-subnav { background: var(--en-cap-bg, #000); color: inherit; border: 0; border-radius: 0; box-shadow: none; padding: 0.5em 1em; min-width: 200px; left: -1em; top: 100%; }
/* Submenús (29/10/2026, en Jordi): la mida de Squarespace (la de les opcions del menú; abans s'heretava i feia 16 px) i
   més interlineat que a Squarespace (pas d'uns 39 px en lloc de 30). Al calaix del mòbil, la mida i el farciment els posen les regles de sota. */
body.wsf-tpl-estudi .wsf-subnav-link { display: inline-block; color: inherit; padding: 0.2em 0; font-size: min(calc(0.25 * 1.2cqw + 1rem), max(calc(0.25 * 0.012 * 1800px + 1rem), 1.25rem)); font-weight: 300; line-height: 1.3; white-space: nowrap; }
body.wsf-tpl-estudi .wsf-subnav li { line-height: 1.3; padding: 0.15em 0; }
body.wsf-tpl-estudi .wsf-subnav-link:hover { color: inherit; opacity: 0.7; }
body.wsf-tpl-estudi .wsf-subnav-link.actiu, body.wsf-tpl-estudi .wsf-nav-link.actiu:not(.wsf-nav-cta) {
    color: inherit; opacity: 1;
    background-image: linear-gradient(currentColor, currentColor); background-repeat: repeat-x; background-size: 1px 1px; background-position: 0 100%;
}
/* L'opció activa del menú: la línia 0,1em per sobre de la vora del text, com Squarespace (background-position: 0 calc(100% - 0.1em)
   sobre l'span del text); aquí l'enllaç té 0,1em de farciment a sota, per això 0,2em (02/11/2026) */
body.wsf-tpl-estudi .wsf-nav-link.actiu:not(.wsf-nav-cta) { background-position: 0 calc(100% - 0.2em); }
body.wsf-tpl-estudi .wsf-nav-carpeta-titol.actiu { background-image: none; }
body.wsf-tpl-estudi .wsf-nav-carpeta { padding-bottom: 0.2em; margin-bottom: -0.2em; }   /* pont fins al desplegable */
body.wsf-tpl-estudi .wsf-nav-carpeta:hover > .wsf-subnav, body.wsf-tpl-estudi .wsf-nav-carpeta:focus-within > .wsf-subnav { display: block; }
/* El botó «Reservar» i l'Instagram, a la dreta. */
body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta,
body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta.actiu {
    order: 2;
    margin-left: auto;
    background: var(--wsf-accent);
    color: #000;
    border: 0;
    border-radius: 0;
    padding: 1em 2.2em;   /* més aire lateral, com el botó de la capçalera de Squarespace */
    font-weight: 500;
    font-size: min(calc(-0.1 * 1.2cqw + 1rem), max(calc(-0.1 * 0.012 * 1800px + 1rem), 0.9rem));
}
body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta:hover { color: #000; opacity: 0.85; }
body.wsf-tpl-estudi .wsf-social { order: 1; color: inherit; margin-left: 2vw; }
body.wsf-tpl-estudi .wsf-social-link { color: inherit; }
body.wsf-tpl-estudi .wsf-social-link:hover { color: inherit; opacity: 0.7; }
body.wsf-tpl-estudi .wsf-nav-toggle { border: 0; color: inherit; width: 44px; height: 44px; }
/* La nav queda dins de .wsf-header-inner després de la marca; el CTA va dins
   del nav: el margin-left:auto del CTA empeny la resta d'enllaços a l'esquerra
   (layout navLeft de Squarespace: logo · menú ......... instagram · botó). */
body.wsf-tpl-estudi .wsf-nav { flex: 1 1 auto; }
body.wsf-tpl-estudi .wsf-nav .wsf-social { display: none; }

@media (max-width: 900px) {
    body.wsf-tpl-estudi #device-wrapper { --en-cap-alt: calc(33px + 12vw); }
    body.wsf-tpl-estudi .wsf-header-inner { padding: 6vw 6vw; gap: 4vw; }
    body.wsf-tpl-estudi .wsf-brand img, #device-wrapper .wsf-header .wsf-brand img { max-height: 33px; }
    body.wsf-tpl-estudi .wsf-nav { flex: 0 0 auto; }
    body.wsf-tpl-estudi .wsf-nav-toggle { margin-left: auto; }
    /* Calaix a pantalla sencera, blanc, com l'overlay «bright» de Squarespace. */
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-nav {
        position: fixed; inset: 0; z-index: 39;
        display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
        background: #fff; color: #000;
        padding: 26vw 6vw 6vw; overflow: auto; box-sizing: border-box;
        gap: 0;
    }
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-nav-toggle { position: relative; z-index: 41; color: #000; }
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-header { color: #000; }
    body.wsf-tpl-estudi .wsf-nav-link, body.wsf-tpl-estudi .wsf-nav-link.actiu {
        font-family: var(--wsf-font-body); font-weight: 400; font-size: 6vmin; letter-spacing: 0; padding: 0.25em 0; color: #000; line-height: 1.4;
    }
    body.wsf-tpl-estudi .wsf-nav-carpeta { width: 100%; }
    body.wsf-tpl-estudi .wsf-subnav { box-shadow: none; background: none; padding: 0 0 0.6em 1em; }
    body.wsf-tpl-estudi .wsf-subnav-link { font-size: 4.5vmin; padding: 0.25em 0; }
    body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta, body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta.actiu { order: 0; margin: 1em 0 0; align-self: flex-start; padding: 0.9em 1.5em; font-size: 4vmin; color: #000; }
    body.wsf-tpl-estudi .wsf-social { display: none; }
}
@container device (max-width: 900px) {
    body.wsf-tpl-estudi #device-wrapper { --en-cap-alt: calc(33px + 12cqw); }
    body.wsf-tpl-estudi .wsf-header-inner { padding: 6cqw 6cqw; gap: 4cqw; }
    body.wsf-tpl-estudi .wsf-brand img, #device-wrapper .wsf-header .wsf-brand img { max-height: 33px; }
    body.wsf-tpl-estudi .wsf-nav { flex: 0 0 auto; }
    body.wsf-tpl-estudi .wsf-nav-toggle { margin-left: auto; }
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-nav {
        position: absolute; top: 0; left: 0; right: 0; min-height: 100svh; z-index: 39;
        display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
        background: #fff; color: #000;
        padding: 26cqw 6cqw 6cqw; overflow: auto; box-sizing: border-box;
        gap: 0;
    }
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-nav-toggle { position: relative; z-index: 41; color: #000; }
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-header { color: #000; }
    body.wsf-tpl-estudi .wsf-nav-link, body.wsf-tpl-estudi .wsf-nav-link.actiu {
        font-family: var(--wsf-font-body); font-weight: 400; font-size: 6cqw; letter-spacing: 0; padding: 0.25em 0; color: #000; line-height: 1.4;
    }
    body.wsf-tpl-estudi .wsf-nav-carpeta { width: 100%; }
    body.wsf-tpl-estudi .wsf-subnav { box-shadow: none; background: none; padding: 0 0 0.6em 1em; }
    body.wsf-tpl-estudi .wsf-subnav-link { font-size: 4.5cqw; padding: 0.25em 0; }
    body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta, body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta.actiu { order: 0; margin: 1em 0 0; align-self: flex-start; padding: 0.9em 1.5em; font-size: 4cqw; color: #000; }
    body.wsf-tpl-estudi .wsf-social { display: none; }
}

/* ------------------------------------------------------------- 8. PEU */
body.wsf-tpl .en-peu { display: block; width: 100%; margin-top: auto; }
body.wsf-tpl .en-peu .en-seccio { min-height: 0; }
/* El peu de Squarespace no te tema: fons crema (lightAccent), com les altres seccions sense tema. */

/* L'editor no ha de veure els «Afegiu el logo» i companyia damunt del hero. */
body.wsf-tpl .wsf-titol-gran { display: none; }

/* ------------------------------------- 9. ANIMACIONS I MARQUES DE TEXT */
/* Les «animacions globals» de Squarespace (fos + lliscament, ease, 0,6 s):
   js/en-anima.js posa .en-vist quan el bloc entra a la finestra i un retard
   escalonat per bloc. Només s'amaga res amb <html class="en-js"> (el posa el
   JS) i mai amb prefers-reduced-motion. A l'editor tot es veu de seguida. */
html.en-js body.wsf-tpl .en-anima { opacity: 0; transform: translate3d(0, 2.4rem, 0); }
html.en-js body.wsf-tpl .en-anima.en-vist { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
html.en-js body.wsf-tpl .wsf-header-inner > * { opacity: 0; transition: opacity 0.6s ease 0.2s; }
html.en-js body.wsf-tpl .wsf-header-inner.en-vist > * { opacity: 1; }
html.en-js body.wsf-tpl.edit-mode .en-anima, html.en-js body.wsf-tpl.edit-mode .wsf-header-inner > * { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
    html.en-js body.wsf-tpl .en-anima, html.en-js body.wsf-tpl .wsf-header-inner > * { opacity: 1; transform: none; transition: none; }
}
/* El calaix del mòbil apareix en fos (menuOverlayAnimation: fade). */
@keyframes en-fos { from { opacity: 0; } to { opacity: 1; } }
body.wsf-tpl-estudi.wsf-nav-obert .wsf-nav { animation: en-fos 0.3s ease; }
body.wsf-tpl-estudi .wsf-subnav { animation: en-fos 0.18s ease; }

/* Marques de text de Squarespace (sqsrte-text-highlight): subratllat, subratllat
   corb, marcador i cercle, dibuixats amb SVG de fons. --marca ve del span
   (color de la paleta o el del tema: --en-marca-tema per tema de secció). */
/* El color «del tema» de Squarespace (--text-highlight-color de site.css): als temes clars (white, white-bold, light,
   light-bold i sense tema) és el safeDarkAccent = negre; als foscos, el safeLightAccent = daurat (02/11/2026; abans daurat a tot arreu). */
body.wsf-tpl .en-seccio, body.wsf-tpl .en-peu { --en-marca-tema: #000; }
body.wsf-tpl .en-tema-bright { --en-marca-tema: #000; }
body.wsf-tpl .en-tema-bright-inverse, body.wsf-tpl .en-tema-black, body.wsf-tpl .en-tema-black-bold,
body.wsf-tpl .en-tema-dark, body.wsf-tpl .en-tema-dark-bold { --en-marca-tema: var(--wsf-accent); }
body.wsf-tpl .en-marca { --marca-gruix: 0.1em; position: relative; white-space: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
body.wsf-tpl .en-marca-underline {
    background-image: linear-gradient(var(--marca), var(--marca));
    background-repeat: no-repeat; background-size: 100% var(--marca-gruix); background-position: 0 100%;
    padding-bottom: 0.05em;
}
body.wsf-tpl .en-marca-underlineCurve { padding-bottom: 0.12em; }
body.wsf-tpl .en-marca-underlineCurve::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 0.34em;
    background: var(--marca);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1 6 C 25 1, 55 8, 99 3%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27square%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1 6 C 25 1, 55 8, 99 3%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27square%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none; z-index: -1;
}
body.wsf-tpl .en-marca-marker {
    background-image: linear-gradient(transparent 12%, color-mix(in srgb, var(--marca) 55%, transparent) 12%, color-mix(in srgb, var(--marca) 55%, transparent) 92%, transparent 92%);
    padding: 0 0.15em; margin: 0 -0.15em;
}
body.wsf-tpl .en-marca-circle { padding: 0.05em 0.35em; margin: 0 -0.1em; }
body.wsf-tpl .en-marca-circle::before {
    content: ""; position: absolute; inset: -0.15em -0.25em; z-index: -1; pointer-events: none;
    background: var(--marca);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M50 4 C 80 3, 98 12, 96 22 C 94 33, 68 38, 46 37 C 22 36, 3 30, 4 19 C 5 8, 30 3, 58 4%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M50 4 C 80 3, 98 12, 96 22 C 94 33, 68 38, 46 37 C 22 36, 3 30, 4 19 C 5 8, 30 3, 58 4%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ------------------------------------------------ 10. BÀNER DE GALETES */
/* El global (tpl/cookie-consent.php) porta el CSS inline: cal !important.
   Com l'original de Squarespace: barra a baix de tot, a tota amplada, amb els
   colors de la casa (fons crema de la paleta, text negre en Poppins, botó
   d'acceptar daurat, el de rebutjar de contorn negre). */
#wsf-cookie-consent, #wsf-cookie-consent.wsf-cookie-light, #wsf-cookie-consent.wsf-cookie-dark {
    left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important;
    border-radius: 0 !important; padding: 20px 3vw !important;
    background: var(--en-crema) !important; color: #000 !important;
    font-family: 'Poppins', system-ui, sans-serif !important; font-weight: 300 !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08) !important;
    display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "cap accions" "missatge accions" "enllac accions"; column-gap: 3vw; align-items: center;
    animation: none !important;
}
/* El JS del baner l'amaga amb style="display:none": aquesta guarda mana. */
#wsf-cookie-consent[style*="display: none"], #wsf-cookie-consent[style*="display:none"] { display: none !important; }
#wsf-cookie-consent .wsf-cookie-header { grid-area: cap; margin: 0 0 4px !important; }
#wsf-cookie-consent .wsf-cookie-title { font-weight: 500 !important; font-size: 15px !important; letter-spacing: 0.02em; }
#wsf-cookie-consent .wsf-cookie-icon { color: var(--wsf-accent) !important; font-size: 18px !important; }
#wsf-cookie-consent .wsf-cookie-icon::before {
    content: '' !important; display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%2523fbc26a%27 d=%27M12 2a10 10 0 1 0 10 10 3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 15 5 3 3 0 0 1 12 2z%27/%3E%3Ccircle cx=%278.5%27 cy=%279.5%27 r=%271.3%27 fill=%27%2523000%27/%3E%3Ccircle cx=%279%27 cy=%2715%27 r=%271.3%27 fill=%27%2523000%27/%3E%3Ccircle cx=%2714.5%27 cy=%2714%27 r=%271.3%27 fill=%27%2523000%27/%3E%3C/svg%3E") center/contain no-repeat;
}
#wsf-cookie-consent .wsf-cookie-message { grid-area: missatge; margin: 0 !important; color: #000 !important; font-size: 14px !important; line-height: 1.6 !important; max-width: 70ch; }
#wsf-cookie-consent .wsf-cookie-link { grid-area: enllac; color: #000 !important; text-decoration: underline !important; text-underline-offset: 0.15em; font-size: 13px !important; margin-top: 4px; }
#wsf-cookie-consent .wsf-cookie-link:hover { color: #000 !important; opacity: 0.7; filter: none !important; }
#wsf-cookie-consent .wsf-cookie-actions { grid-area: accions; margin: 0 !important; gap: 12px !important; }
#wsf-cookie-consent .wsf-cookie-btn {
    flex: 0 0 auto !important; padding: 0.9em 1.6em !important; border-radius: 0 !important;
    font-family: 'Poppins', system-ui, sans-serif !important; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0.02em;
    transition: opacity .16s ease !important; transform: none !important;
}
#wsf-cookie-consent .wsf-cookie-btn.wsf-cookie-accept { background: var(--wsf-accent) !important; color: #000 !important; border: 1px solid var(--wsf-accent) !important; filter: none !important; }
#wsf-cookie-consent .wsf-cookie-btn.wsf-cookie-accept:hover { background: var(--wsf-accent) !important; color: #000 !important; opacity: 0.85; filter: none !important; }
#wsf-cookie-consent .wsf-cookie-btn.wsf-cookie-reject { background: transparent !important; color: #000 !important; border: 1px solid #000 !important; }
#wsf-cookie-consent .wsf-cookie-btn.wsf-cookie-reject:hover { background: #000 !important; color: #fff !important; }
@media (max-width: 640px) {
    #wsf-cookie-consent, #wsf-cookie-consent.wsf-cookie-light { grid-template-columns: 1fr; grid-template-areas: "cap" "missatge" "enllac" "accions"; padding: 18px 6vw !important; row-gap: 8px; }
    #wsf-cookie-consent .wsf-cookie-actions { width: 100%; }
    #wsf-cookie-consent .wsf-cookie-btn { flex: 1 1 auto !important; }
}
/* Dins de l'editor (barra lateral) no cal. */
body.edit-sidebar-active #wsf-cookie-consent { display: none !important; }

/* ---------------------------------- 11. ORDRE DE LA CAPÇALERA (escriptori) */
/* Squarespace (navLeft): logo · menú ......... Instagram · botó «Reservar».
   El botó viu dins del <nav>; a partir de 901 px el nav es desfà
   (display: contents) i els seus fills passen a ser fills de la barra, que
   és qui els ordena: enllaços, xarxes i el botó a l'extrem dret. Per sota
   (calaix), el nav torna a ser una caixa. */
/* (29/10/2026) a l'editor, la vista de tauleta i de mòbil és una finestra estreta dins d'una pantalla ampla: aquesta regla
   no s'hi ha d'aplicar, o el calaix del menú surt obert i sense fons damunt de la portada */
@media (min-width: 901px) {
    body.wsf-tpl-estudi:not(.device-tablet):not(.device-mobile) .wsf-nav { display: contents; }
    body.wsf-tpl-estudi:not(.device-tablet):not(.device-mobile) .wsf-header-inner { gap: 1.8vw; }
    body.wsf-tpl-estudi:not(.device-tablet):not(.device-mobile) .wsf-brand { margin-right: 0.7vw; }
    body.wsf-tpl-estudi:not(.device-tablet):not(.device-mobile) .wsf-social { order: 2; margin-left: auto; }
    body.wsf-tpl-estudi:not(.device-tablet):not(.device-mobile) .wsf-nav-link.wsf-nav-cta, body.wsf-tpl-estudi:not(.device-tablet):not(.device-mobile) .wsf-nav-link.wsf-nav-cta.actiu { order: 3; margin-left: 0; }
}
@container device (min-width: 901px) {
    body.wsf-tpl-estudi .wsf-nav { display: contents; }
    body.wsf-tpl-estudi .wsf-header-inner { gap: 1.8cqw; }
    body.wsf-tpl-estudi .wsf-brand { margin-right: 0.7cqw; }
    body.wsf-tpl-estudi .wsf-social { order: 2; margin-left: auto; }
    body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta, body.wsf-tpl-estudi .wsf-nav-link.wsf-nav-cta.actiu { order: 3; margin-left: 0; }
}
#wsf-cookie-consent .wsf-cookie-message a { color: #000 !important; text-decoration: underline !important; text-underline-offset: 0.15em; }
/* L'enllaç a la política ja va dins del text, com a l'original: el «Més informació» sobra. */
#wsf-cookie-consent .wsf-cookie-link { display: none !important; }
/* El títol del hero de la portada (alineat a baix) puja una mica perquè el
   bàner de galetes no el tapi (24/09/2026, petició d'en Jordi). */
body.wsf-tpl-estudi.wsf-portada .wsf-main > .en-seccio:first-child.en-v-bottom > .en-contingut { padding-bottom: 16vh; }
@media (max-width: 767px) { body.wsf-tpl-estudi.wsf-portada .wsf-main > .en-seccio:first-child.en-v-bottom > .en-contingut { padding-bottom: 12vh; } }
@container device (max-width: 767px) { body.wsf-tpl-estudi.wsf-portada .wsf-main > .en-seccio:first-child.en-v-bottom > .en-contingut { padding-bottom: 12vh; } }
/* Subratllat corb més gruixut (com a l'original, ~0,16 em de traç) i sense el
   subratllat de l'enllaç a sota (Squarespace: .sqsrte-text-highlight a{text-decoration:none}). */
body.wsf-tpl .en-marca a, body.wsf-tpl .en-marca a:hover { text-decoration: none !important; }

body.wsf-tpl .en-marca-underlineCurve::after {
    bottom: -0.1em; height: 0.5em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1 5.5 C 25 1.5, 55 7.5, 99 3%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27square%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1 5.5 C 25 1.5, 55 7.5, 99 3%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27square%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
body.wsf-tpl .en-marca-underline { background-size: 100% 0.16em; }
/* Dins d'un bloc de text amb fons de color (targetes daurades), la marca «del
   tema» seria del mateix daurat que el fons: hi va en negre. */
body.wsf-tpl .en-text[style*="--bg"] { --en-marca-tema: #000; }

/* ---- Marques de text, versió per fons (funciona amb marques que ocupen més d'una línia) */
:root {
    --svg-curve-black: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 99 C 15 93, 32 88, 50 88 C 68 88, 88 88, 100 89 C 100 90, 99.4 91.2, 98 92%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.2%27 stroke-linecap=%27square%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-circle-black: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-10%20-2%20162%2034%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M46,27.3%20C%2078.64,28.796%20150,26.96%20150,12.68%20C%20150,0.61%20102.96,0%2069.36,0%20S%20-8.4,0.61%20-8.4,12.272%20S%2028.56,30.326%20108.4,28.796%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.6%27%20stroke-linecap=%27square%27%20stroke-linejoin=%27bevel%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-curve-white: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 99 C 15 93, 32 88, 50 88 C 68 88, 88 88, 100 89 C 100 90, 99.4 91.2, 98 92%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.2%27 stroke-linecap=%27square%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-circle-white: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-10%20-2%20162%2034%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M46,27.3%20C%2078.64,28.796%20150,26.96%20150,12.68%20C%20150,0.61%20102.96,0%2069.36,0%20S%20-8.4,0.61%20-8.4,12.272%20S%2028.56,30.326%20108.4,28.796%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-width=%271.6%27%20stroke-linecap=%27square%27%20stroke-linejoin=%27bevel%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-curve-accent: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 99 C 15 93, 32 88, 50 88 C 68 88, 88 88, 100 89 C 100 90, 99.4 91.2, 98 92%27 fill=%27none%27 stroke=%27%23fbc26a%27 stroke-width=%272.2%27 stroke-linecap=%27square%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-circle-accent: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-10%20-2%20162%2034%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M46,27.3%20C%2078.64,28.796%20150,26.96%20150,12.68%20C%20150,0.61%20102.96,0%2069.36,0%20S%20-8.4,0.61%20-8.4,12.272%20S%2028.56,30.326%20108.4,28.796%27%20fill=%27none%27%20stroke=%27%23fcc464%27%20stroke-width=%271.6%27%20stroke-linecap=%27square%27%20stroke-linejoin=%27bevel%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-curve-lightAccent: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 99 C 15 93, 32 88, 50 88 C 68 88, 88 88, 100 89 C 100 90, 99.4 91.2, 98 92%27 fill=%27none%27 stroke=%27%23eae9db%27 stroke-width=%272.2%27 stroke-linecap=%27square%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-circle-lightAccent: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-10%20-2%20162%2034%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M46,27.3%20C%2078.64,28.796%20150,26.96%20150,12.68%20C%20150,0.61%20102.96,0%2069.36,0%20S%20-8.4,0.61%20-8.4,12.272%20S%2028.56,30.326%20108.4,28.796%27%20fill=%27none%27%20stroke=%27%23eae9db%27%20stroke-width=%271.6%27%20stroke-linecap=%27square%27%20stroke-linejoin=%27bevel%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-curve-darkAccent: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 99 C 15 93, 32 88, 50 88 C 68 88, 88 88, 100 89 C 100 90, 99.4 91.2, 98 92%27 fill=%27none%27 stroke=%27%236da15e%27 stroke-width=%272.2%27 stroke-linecap=%27square%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
    --svg-circle-darkAccent: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-10%20-2%20162%2034%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M46,27.3%20C%2078.64,28.796%20150,26.96%20150,12.68%20C%20150,0.61%20102.96,0%2069.36,0%20S%20-8.4,0.61%20-8.4,12.272%20S%2028.56,30.326%20108.4,28.796%27%20fill=%27none%27%20stroke=%27%236da15e%27%20stroke-width=%271.6%27%20stroke-linecap=%27square%27%20stroke-linejoin=%27bevel%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
}
body.wsf-tpl .en-seccio, body.wsf-tpl .en-peu { --marca-img-tema: var(--svg-curve-black); --cercle-img-tema: var(--svg-circle-black); }
body.wsf-tpl .en-tema-bright-inverse, body.wsf-tpl .en-tema-black, body.wsf-tpl .en-tema-black-bold,
body.wsf-tpl .en-tema-dark, body.wsf-tpl .en-tema-dark-bold { --marca-img-tema: var(--svg-curve-accent); --cercle-img-tema: var(--svg-circle-accent); }
body.wsf-tpl .en-tema-bright { --marca-img-tema: var(--svg-curve-black); --cercle-img-tema: var(--svg-circle-black); }
body.wsf-tpl .en-text[style*="--bg"] { --marca-img-tema: var(--svg-curve-black); --cercle-img-tema: var(--svg-circle-black); }
body.wsf-tpl .en-marca-underlineCurve::after { content: none; }
body.wsf-tpl .en-marca-underlineCurve {
    padding-bottom: 0.06em;
    background-image: var(--marca-img, var(--marca-img-tema));
    background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* El cercle es dibuixa en un ::before absolut (02/11/2026): com a Squarespace, no ocupa lloc i el text es parteix igual que a
   l'original (amb padding empenyia les paraules). Sobresurt del text per tenir aire, darrere de les lletres. */
body.wsf-tpl .en-marca-circle {
    white-space: nowrap;   /* les paraules encerclades van juntes: un sol cercle */
    position: relative; z-index: auto; background: none; padding: 0; margin: 0;   /* sense context propi: el traç (z -1) queda sota de tot el text del paràgraf, també de les paraules del costat */
}
/* El traç (z -1) va sota del text però no sota del fons de la secció: el bloc de text és el seu propi context (isolation) */
body.wsf-tpl .en-text-cos:has(.en-marca-circle), body.wsf-tpl .en-llista-text:has(.en-marca-circle) { isolation: isolate; }
body.wsf-tpl .en-marca-circle::before {
    content: ''; position: absolute; top: -8.33%; right: -8.57%; bottom: -33.33%; left: -7.14%; z-index: -1; pointer-events: none;   /* el viewBox del traç de Squarespace (-10 -2 162 34) sobre la caixa del text (140×24) */
    -webkit-mask: none; mask: none; background-color: transparent;
    background-image: var(--cercle-img, var(--cercle-img-tema));
    background-repeat: no-repeat; background-size: 100% 100%; background-position: center;
}

/* ------------------------------------- 12. CAPÇALERA FIXA EN FER SCROLL */
/* body.en-cap-fixa la posa js/en-anima.js passat el hero. La barra passa a
   fixa amb el fons del tema de la capçalera, com a Squarespace: negra amb logo i menú blancs, i a les pàgines que
   comencen clares (ESTIL_CAP_FOSCA/SOLIDA de render.py: --en-cap-bg blanc) blanca amb logo i menú negres (30/10/2026;
   abans sempre negra). Baixa amb un petit lliscament. */
body.wsf-tpl-estudi.en-cap-fixa .wsf-header {
    position: fixed; top: 0;
    background: var(--en-cap-bg, #000); color: var(--en-cap, #fff);
    box-shadow: none;   /* sense ombra (en Jordi, 02/11/2026) */
    animation: en-cap-baixa 0.28s ease;
}
@keyframes en-cap-baixa { from { transform: translateY(-100%); } to { transform: none; } }
body.wsf-tpl-estudi.en-cap-fixa .wsf-header-inner { padding-top: 1.2vw; padding-bottom: 1.2vw; }
body.wsf-tpl-estudi.en-cap-fixa .wsf-brand img, #device-wrapper body.en-cap-fixa .wsf-header .wsf-brand img { max-height: 44px; }
/* La previsualització de l'editor és dins d'un marc que es desplaça (no la finestra): fixed hi queda malament. Hi va en
   absolut i en-anima.js li posa top = el desplaçament del marc (html.en-cap-marc, 30/10/2026). */
body.wsf-tpl-estudi.edit-mode.en-cap-fixa .wsf-header,
html.en-cap-marc body.wsf-tpl-estudi.en-cap-fixa .wsf-header { position: absolute; animation: none; }
@media (max-width: 900px) {
    body.wsf-tpl-estudi.en-cap-fixa .wsf-header-inner { padding-top: 3vw; padding-bottom: 3vw; }
    body.wsf-tpl-estudi.en-cap-fixa .wsf-brand img, #device-wrapper body.en-cap-fixa .wsf-header .wsf-brand img { max-height: 30px; }
    body.wsf-tpl-estudi.en-cap-fixa.wsf-nav-obert .wsf-header { color: #000; }
}
@container device (max-width: 900px) {
    body.wsf-tpl-estudi.en-cap-fixa .wsf-header-inner { padding-top: 3cqw; padding-bottom: 3cqw; }
    body.wsf-tpl-estudi.en-cap-fixa .wsf-brand img, #device-wrapper body.en-cap-fixa .wsf-header .wsf-brand img { max-height: 30px; }
    body.wsf-tpl-estudi.en-cap-fixa.wsf-nav-obert .wsf-header { color: #000; }
}

/* ---------------------------- 12b. FORMULARIS MIGRATS DE GOOGLE FORMS */
/* (30/10/2026, bin/google_forms.py) el bloc Formulari de Websfera al final de les pàgines que enllaçaven un Google Form */
body.wsf-tpl .en-formulari-web > .en-contingut { max-width: 760px; margin: 0 auto; padding: 4vmax 6vw 6vmax; }
body.wsf-tpl .en-formulari-web .ws-form { max-width: none !important; }
body.wsf-tpl .en-formulari-web { scroll-margin-top: 90px; }
/* (30/10/2026) el formulari ocupa el lloc del botó «Formulari d'inscripció», dins de la graella de la secció */
body.wsf-tpl .en-formulari-bloc { width: 100%; max-width: 720px; text-align: left; scroll-margin-top: 90px; }   /* «menys ample» (30/10/2026) */
body.wsf-tpl .en-formulari-bloc .ws-form { max-width: none !important; margin: 0 !important; }
body.wsf-tpl .en-formulari-bloc .en-inscripcio { background: transparent; padding: 0; }
/* els camps per escriure, d'una amplada normal de formulari; els textos i les opcions, amb l'amplada del bloc (30/10/2026) */
body.wsf-tpl .en-formulari-bloc .ws-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { max-width: 560px; }

/* ------------------------------------------- 13. DIVISORS DE SECCIÓ */
/* Squarespace: la secció amb divisor guanya padding-bottom = alçada del
   divisor i es retalla (clip-path) amb la forma; la següent puja la mateixa
   alçada i queda a sota. slanted = diagonal (per defecte puja d'esquerra a
   dreta; fx la inverteix; fy la torna a invertir), pointed = punta al mig. */
body.wsf-tpl .en-seccio.en-div { padding-bottom: var(--div-alt, 6vw); position: relative; z-index: 2; }
/* La seccio de darrere puja sota la diagonal i, com a Squarespace, no perd
   alcada: guanya l'alcada del divisor (una part queda sota la diagonal). */
body.wsf-tpl .en-seccio.en-rere-div { margin-top: calc(-1 * var(--div-prev, 6vw)); padding-top: calc(2 * var(--div-prev, 6vw)); z-index: 1; }
body.wsf-tpl .en-seccio.en-div-slanted { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--div-alt, 6vw)), 0 100%); }
body.wsf-tpl .en-seccio.en-div-slanted.en-div-fx,
body.wsf-tpl .en-seccio.en-div-slanted.en-div-fy { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--div-alt, 6vw))); }
body.wsf-tpl .en-seccio.en-div-slanted.en-div-fx.en-div-fy { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--div-alt, 6vw)), 0 100%); }
body.wsf-tpl .en-seccio.en-div-pointed { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--div-alt, 8vw)), 50% 100%, 0 calc(100% - var(--div-alt, 8vw))); }
body.wsf-tpl .en-seccio.en-div-pointed.en-div-fy { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--div-alt, 8vw)), 0 100%); }
/* Camp d'import (moneda): més curt que els de text, com a l'original. */
body.wsf-tpl .en-form-camp-currency input { max-width: 11em; }

/* Bloc enganxós de Squarespace (sqs-position-sticky): es queda a la vista
   mentre la seva cel·la de la graella hi és. */
body.wsf-tpl .en-bloc.en-enganxos { position: sticky; top: calc(var(--en-cap-alt, 100px) + 16px); align-self: start; }

/* Motor de reserves de Websfera a /ca/reservar (24/09/2026): secció pròpia,
   sense graella; l'estil del motor és a /kms/websfera/css/reserves.css. */
body.wsf-tpl .en-reserves-seccio { padding: 4vw 3vw 6vw; }
body.wsf-tpl .en-reserves-cos { width: 100%; max-width: 1240px; margin: 0 auto; }
/* Inscripció a una activitat (09/10/2026): el bloc del mòdul Activitats (section.wsf-act, una
   targeta de 820 px amb el seu propi CSS) que render.inscripcio_activitat posa al final de la pàgina
   quan l'activitat és oberta. Només el marc: fons blanc i marges laterals perquè al mòbil no toqui
   les vores. */
body.wsf-tpl .en-inscripcio { background: #fff; padding: 3vw 16px 6vw; }

/* Pàgines amb el text a la BD (08/10/2026): les polítiques (avis-legal, politica-privacitat,
   galetes) s'editen des de Lloc web > Polítiques i el text arriba sol dins de .wsf-main, sense cap
   .en-seccio (totes les pàgines generades en comencen amb una). Columna de lectura sota la barra, i
   la barra fosca (com ESTIL_CAP_FOSCA de render.py), que sobre fons clar la blanca no es veuria. */
/* Pàgines noves de l'editor (19/10/2026): tampoc porten cap .en-seccio, però no són de lectura. Fan servir
   l'amplada i els marges de la plantilla (--wsf-ample, --wsf-marge, Edició d'estil) i comencen sota la barra
   (--en-cap-alt, que ja canvia al mòbil). La columna de 820 px de sota és NOMÉS de les tres polítiques. */
body.wsf-tpl-estudi .wsf-main:not(:has(> .en-seccio)) { max-width: var(--wsf-ample); width: 100%; margin: 0 auto; padding: calc(var(--en-cap-alt, 59px + 3.6vw) + var(--wsf-r5)) var(--wsf-marge) calc(var(--wsf-r5) * 1.4); }
body.wsf-tpl-estudi:is(.avis-legal, .politica-privacitat, .galetes) .wsf-main:not(:has(> .en-seccio)) { max-width: 820px; width: auto; margin: 0 auto; padding: calc(59px + 3.6vw + 48px) 24px 96px; line-height: 1.7; }
body.wsf-tpl-estudi:is(.avis-legal, .politica-privacitat, .galetes) .wsf-main:not(:has(> .en-seccio)) h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: 0 0 .8em; }
body.wsf-tpl-estudi:is(.avis-legal, .politica-privacitat, .galetes) .wsf-main:not(:has(> .en-seccio)) h2, body.wsf-tpl-estudi:is(.avis-legal, .politica-privacitat, .galetes) .wsf-main:not(:has(> .en-seccio)) h3 { font-size: 1.25rem; line-height: 1.3; margin: 2.2em 0 .7em; }
body.wsf-tpl-estudi:is(.avis-legal, .politica-privacitat, .galetes) .wsf-main:not(:has(> .en-seccio)) p, body.wsf-tpl-estudi:is(.avis-legal, .politica-privacitat, .galetes) .wsf-main:not(:has(> .en-seccio)) li { margin: 0 0 1em; }
/* (un :has() no pot anar dins d'un altre :has(): per això :not(:has(...)) i no :has(... :not(:has())) ) */
body.wsf-tpl-estudi:not(:has(.wsf-main > .en-seccio)) .wsf-header { --en-cap: #000; --en-cap-bg: #fff; --en-logo-filtre: invert(1); }
@media (max-width: 767px) {
    body.wsf-tpl-estudi:is(.avis-legal, .politica-privacitat, .galetes) .wsf-main:not(:has(> .en-seccio)) { padding-top: calc(33px + 12vw + 32px); }
}

/* Plantilles de pàgina (19/10/2026, bin/plantilles.py): on la pàgina model tenia un formulari, la
   plantilla porta aquesta nota perquè s'hi afegeixi el bloc Formulari des de l'editor. */
body.wsf-tpl .en-plantilla-nota { border: 2px dashed currentColor; opacity: .7; padding: 16px 20px; margin: 24px 0; font-size: .95rem; text-align: center; }
/* només a l'editor: el visitant no l'ha de veure mai (revisió del 19/10/2026) */
body:not(.edit-sidebar-active) .en-plantilla-nota { display: none; }

/* ---------------------------------- Subscripció al butlletí al peu (28/10/2026; des del 29/10/2026, el bloc de la portada)
   A dalt del peu de totes les pàgines (render.PEU_BUTLLETI): el mateix que era la secció «Vols estar al corrent…» de la
   portada (que ja no hi és): fons groc (en-tema-bright), la pregunta centrada i el formulari estret a sota, amb el correu
   i el botó en una línia. Substitueix la franja crema que hi havia abans. */
body.wsf-tpl .en-peu-subscripcio { padding: 80px 0 88px; text-align: center; }   /* amb graella des del 30/10/2026: els marges laterals són els de la graella */
body.wsf-tpl .en-peu-subscripcio-cos { width: 100%; max-width: 760px; margin: 0 auto; }
body.wsf-tpl .en-peu .en-peu-subscripcio h2 { margin: 0; color: var(--en-titol); }   /* l'espai fins al formulari és una fila buida de la graella */
body.wsf-tpl .en-butlleti-form { --ws-form-camp-fons: #fff; --ws-form-accent: #000; color: #000; max-width: 530px; margin: 0 auto; text-align: left; }
body.wsf-tpl .en-butlleti-form .ws-form { max-width: none !important; margin: 0 !important; width: 100%; }
body.wsf-tpl .en-butlleti-form .ws-form-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 0 !important; align-items: stretch; }
body.wsf-tpl .en-butlleti-form .ws-form-camp-email { grid-column: 1; grid-row: 1; }
/* L'etiqueta del correu només per als lectors de pantalla: el camp ja diu què cal (placeholder) */
body.wsf-tpl .en-butlleti-form .ws-form-camp-email label { position: absolute !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
body.wsf-tpl .en-butlleti-form .ws-form-camp-email input {
    height: 54px; padding: 0 18px !important; border-radius: 0 !important; color: #000 !important; font-weight: 300 !important;
}
body.wsf-tpl .en-butlleti-form .ws-form-camp-email input::placeholder { color: rgba(0, 0, 0, .45); }
body.wsf-tpl .en-butlleti-form .ws-form-inner > button {
    grid-column: 2; grid-row: 1; align-self: stretch !important; margin: 0; height: 54px; padding: 0 28px !important;
    display: inline-flex; align-items: center; border-radius: 0 !important;
    background: #000 !important; border-color: #000 !important; color: #fff !important; font-weight: 500 !important;
}
body.wsf-tpl .en-butlleti-form .ws-form-inner > button:hover, body.wsf-tpl .en-butlleti-form .ws-form-inner > button:focus-visible {
    background: #333 !important; border-color: #333 !important;
}
body.wsf-tpl .en-butlleti-form .ws-form-butlleti, body.wsf-tpl .en-butlleti-form .ws-form-status { grid-column: 1 / -1; }
body.wsf-tpl .en-butlleti-form .ws-form-butlleti label { font-size: .8em !important; line-height: 1.5 !important; color: rgba(0, 0, 0, .78) !important; }
body.wsf-tpl .en-butlleti-form .ws-form-status { color: #000; }
body.wsf-tpl .en-amagat { display: none !important; }
@container device (max-width: 899px) {
    body.wsf-tpl .en-peu-subscripcio { padding: 56px 0 60px; }
}
@media (max-width: 899px) {
    body.wsf-tpl .en-peu-subscripcio { padding: 56px 0 60px; }
}
@container device (max-width: 480px) {
    body.wsf-tpl .en-butlleti-form .ws-form-inner { grid-template-columns: minmax(0, 1fr); }
    body.wsf-tpl .en-butlleti-form .ws-form-inner > button { grid-column: 1; grid-row: auto; justify-content: center; }
}
@media (max-width: 480px) {
    body.wsf-tpl .en-butlleti-form .ws-form-inner { grid-template-columns: minmax(0, 1fr); }
    body.wsf-tpl .en-butlleti-form .ws-form-inner > button { grid-column: 1; grid-row: auto; justify-content: center; }
}

/* Colors */
:root, #device-wrapper {
    --background-color: #ffffff;
    --text-color: #000000;
    --accent-color: #fcc464;
    --background-color-secondary: #ebeadf;
    --text-color-secondary: #555555;
    --accent-color-secondary: #74a15e;
    /* Alias: l'editor exposa l'opcio "secondary background" com a
       var(--bg-color-secondary), pero la canonica al :root es
       --background-color-secondary. Definim l'alias perque resolgui. */
    --bg-color-secondary: #ebeadf;
}

/* Typography */


/* Buttons */


/* Layout */


/* Custom */


/* Spacing */