/**
 * Vocabulari de CONTINGUT compartit per totes les plantilles token-first.
 *
 * Les plantilles (templates/<slug>/) posen l'estructura del web: capçalera,
 * banda de títol, columna de contingut i peu. Aquest fitxer posa el que el
 * CONTINGUT d'una pàgina necessita per maquetar-se sense CSS propi del client:
 * hero, crides a l'acció, seccions, targetes, xifres, testimonis i figures.
 * És el vocabulari que fa servir la migració assistida de pàgines cap a
 * plantilla i el que genera lib/starter-pages.php als webs nous.
 *
 * Regles de la casa:
 *   - Tot escopat a body.wsf-tpl .wsf-main: mai s'escapa cap a l'editor
 *     ni cap al camí "custom" del client.
 *   - Token-first: només variables --wsf-* (les injecta wsf_theme_head()).
 *   - Responsive per DUPLICAT @media + @container device, com les plantilles.
 *
 * PER QUÈ LA COMPOSICIÓ MANA I EL COLOR NO
 * Aquests blocs han de quedar bé amb TOTS els estils alhora: el vermell
 * geomètric de Modernist, l'or serif de Classical, el violeta fosc de
 * Nocturne... Per això aquí no s'hi decideix cap color ni cap tipografia: es
 * decideix l'ESCALA, el RITME i l'ASIMETRIA, i la pell la posa el tema. Res de
 * degradats ni d'ombres decoratives, que es barallarien amb la meitat dels
 * temes.
 *
 * EL FILET
 * El gest que cus tota la pàgina: una línia fina que travessa el bloc amb una
 * etiqueta petita en versaletes a sobre. És l'únic ornament del sistema, i
 * canvia de caràcter sol segons el tema (contundent amb radius 0 i pes 800,
 * editorial amb serifes). Tota la resta va callada.
 *
 * 06/08/2026 — ampliació: hero, CTAs, xifres, passos, testimonis i banda d'acció.
 */

/* ==================================================================== *
 * 1. ESCALA I RITME
 * ==================================================================== */

body.wsf-tpl .wsf-main {
    /* Escala fluida pròpia del contingut. No toca la de les plantilles. */
    --wsf-c-display: clamp(2.4rem, 1.1rem + 4.6vw, 4.6rem);
    --wsf-c-titol:   clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
    --wsf-c-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
    --wsf-c-petit:   0.78rem;
    /* Mesures de lectura: la columna de text mai s'estira tot l'ample. */
    --wsf-c-mesura:  62ch;
}

/* ---------- Seccions: ritme vertical entre blocs de pàgina ---------- */
body.wsf-tpl .wsf-main .wsf-seccio { margin: calc(var(--wsf-sp) * 3) 0; }
body.wsf-tpl .wsf-main .wsf-seccio:first-child { margin-top: 0; }

/* Bloc de text centrat, de mesura estreta (intros, conclusions) */
body.wsf-tpl .wsf-main .wsf-centrat {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ==================================================================== *
 * 2. EL FILET — etiqueta + línia que introdueix cada bloc
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-filet {
    display: flex;
    align-items: center;
    gap: var(--wsf-sp);
    margin: 0 0 calc(var(--wsf-sp) * 1.5);
}
body.wsf-tpl .wsf-main .wsf-filet::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: 0.22;
}
body.wsf-tpl .wsf-main .wsf-etiqueta {
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: var(--wsf-c-petit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--wsf-accent);
    white-space: nowrap;
}

/* ==================================================================== *
 * 3. HERO — asimètric, amb eix a l'esquerra
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-bloc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: calc(var(--wsf-sp) * 3);
    align-items: center;
    margin: 0 0 calc(var(--wsf-sp) * 4);
}
/* Sense mitjà, el hero no s'estira tot l'ample: manté l'eix i respira.
   La mesura es posa a CADA peça, mai al bloc que les conté: `ch` es resol amb
   la font de l'element, i 24ch al contenidor valien 24 caràcters de text de
   cos (~200px) i escanyaven títol, entrada i botons alhora. Al titular, els
   mateixos 24ch es resolen amb el cos display i donen la línia curta que es
   volia. 07/08/2026 */
body.wsf-tpl .wsf-main .wsf-bloc-hero.wsf-sol { grid-template-columns: minmax(0, 1fr); }
body.wsf-tpl .wsf-main .wsf-bloc-hero.wsf-sol .wsf-hero-titol-gran { max-width: 24ch; }
body.wsf-tpl .wsf-main .wsf-bloc-hero.wsf-sol .wsf-hero-lead { max-width: 52ch; }

body.wsf-tpl .wsf-main .wsf-hero-titol-gran {
    font-family: var(--wsf-font-heading), sans-serif;
    font-weight: var(--wsf-heading-weight, 700);
    font-size: var(--wsf-c-display);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0 0 calc(var(--wsf-sp) * 1.5);
    text-wrap: balance;
}
body.wsf-tpl .wsf-main .wsf-hero-lead {
    font-size: var(--wsf-c-lead);
    line-height: 1.55;
    max-width: 46ch;
    opacity: 0.82;
    margin: 0 0 calc(var(--wsf-sp) * 2);
}
body.wsf-tpl .wsf-main .wsf-hero-mitja img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wsf-radius);
}

/* ==================================================================== *
 * 4. ACCIONS — els botons de crida a l'acció
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-accions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wsf-sp);
    align-items: center;
    margin: calc(var(--wsf-sp) * 1.5) 0 0;
}
body.wsf-tpl .wsf-main .wsf-btn,
body.wsf-tpl .wsf-main .wsf-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    padding: 0.95em 1.6em;
    border-radius: var(--wsf-radius);
    border: 1px solid transparent;
    transition: transform .16s ease, opacity .16s ease, background-color .16s ease, color .16s ease;
}
body.wsf-tpl .wsf-main .wsf-btn {
    background: var(--wsf-accent);
    color: var(--wsf-bg);
}
body.wsf-tpl .wsf-main .wsf-btn:hover { opacity: 0.9; transform: translateY(-1px); }
body.wsf-tpl .wsf-main .wsf-btn-alt {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    opacity: 0.85;
}
body.wsf-tpl .wsf-main .wsf-btn-alt:hover { opacity: 1; transform: translateY(-1px); }
body.wsf-tpl .wsf-main .wsf-btn:focus-visible,
body.wsf-tpl .wsf-main .wsf-btn-alt:focus-visible {
    outline: 2px solid var(--wsf-accent);
    outline-offset: 3px;
}

/* ==================================================================== *
 * 5. COLUMNES, TARGETES I PRESTACIONS
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-cols-2,
body.wsf-tpl .wsf-main .wsf-cols-3 {
    display: grid;
    gap: calc(var(--wsf-sp) * 2);
    align-items: center;
}
body.wsf-tpl .wsf-main .wsf-cols-2 { grid-template-columns: 1fr 1fr; }
body.wsf-tpl .wsf-main .wsf-cols-3 { grid-template-columns: 1fr 1fr 1fr; align-items: start; }

body.wsf-tpl .wsf-main .wsf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: calc(var(--wsf-sp) * 1.5);
    align-items: stretch;
}
body.wsf-tpl .wsf-main .wsf-card {
    background: var(--wsf-surface);
    border-radius: var(--wsf-radius);
    padding: calc(var(--wsf-sp) * 1.5);
}
body.wsf-tpl .wsf-main .wsf-card > :first-child { margin-top: 0; }
body.wsf-tpl .wsf-main .wsf-card > :last-child { margin-bottom: 0; }
body.wsf-tpl .wsf-main .wsf-card img {
    border-radius: calc(var(--wsf-radius) * 0.6);
    margin-bottom: var(--wsf-sp);
}

/* Prestacions: com les targetes, però sense caixa — el filet superior de cada
   columna fa de separador i manté la pàgina lleugera. */
body.wsf-tpl .wsf-main .wsf-prestacions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(var(--wsf-sp) * 2.5);
}
body.wsf-tpl .wsf-main .wsf-prestacio { border-top: 2px solid var(--wsf-accent); padding-top: var(--wsf-sp); }
body.wsf-tpl .wsf-main .wsf-prestacio h3 {
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: 1.12rem;
    margin: 0 0 calc(var(--wsf-sp) * 0.5);
}
body.wsf-tpl .wsf-main .wsf-prestacio p { margin: 0; opacity: 0.8; line-height: 1.6; }

/* ==================================================================== *
 * 6. PASSOS — numerats NOMÉS perquè l'ordre és informació real
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(var(--wsf-sp) * 2.5);
    counter-reset: wsf-pas;
}
body.wsf-tpl .wsf-main .wsf-pas { counter-increment: wsf-pas; }
body.wsf-tpl .wsf-main .wsf-pas::before {
    content: counter(wsf-pas, decimal-leading-zero);
    display: block;
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: 2.4rem;
    font-weight: var(--wsf-heading-weight, 700);
    line-height: 1;
    color: var(--wsf-accent);
    opacity: 0.35;
    margin-bottom: calc(var(--wsf-sp) * 0.5);
}
body.wsf-tpl .wsf-main .wsf-pas h3 { font-size: 1.1rem; margin: 0 0 calc(var(--wsf-sp) * 0.4); }
body.wsf-tpl .wsf-main .wsf-pas p { margin: 0; opacity: 0.8; line-height: 1.6; }

/* ==================================================================== *
 * 7. XIFRES
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-xifres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: calc(var(--wsf-sp) * 2);
}
body.wsf-tpl .wsf-main .wsf-xifra strong {
    display: block;
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: var(--wsf-heading-weight, 700);
    line-height: 1;
    letter-spacing: -0.02em;
}
body.wsf-tpl .wsf-main .wsf-xifra span {
    display: block;
    margin-top: calc(var(--wsf-sp) * 0.5);
    font-size: var(--wsf-c-petit);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.65;
}

/* ==================================================================== *
 * 8. TESTIMONI — citació gran, sense cometes decoratives
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-testimoni {
    border-left: 2px solid var(--wsf-accent);
    padding-left: calc(var(--wsf-sp) * 2);
    max-width: var(--wsf-c-mesura);
}
body.wsf-tpl .wsf-main .wsf-testimoni blockquote {
    margin: 0 0 var(--wsf-sp);
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
    line-height: 1.35;
    text-wrap: balance;
}
body.wsf-tpl .wsf-main .wsf-testimoni cite {
    font-style: normal;
    font-size: var(--wsf-c-petit);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.65;
}

/* ==================================================================== *
 * 9. BANDA D'ACCIÓ — el tancament de la pàgina
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-cta {
    background: var(--wsf-surface);
    border-radius: var(--wsf-radius);
    padding: calc(var(--wsf-sp) * 3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--wsf-sp) * 2);
    margin: calc(var(--wsf-sp) * 4) 0 0;
}
body.wsf-tpl .wsf-main .wsf-cta-text { max-width: 46ch; }
body.wsf-tpl .wsf-main .wsf-cta-text h2 {
    font-size: var(--wsf-c-titol);
    margin: 0 0 calc(var(--wsf-sp) * 0.5);
    text-wrap: balance;
}
body.wsf-tpl .wsf-main .wsf-cta-text p { margin: 0; opacity: 0.8; }
body.wsf-tpl .wsf-main .wsf-cta .wsf-accions { margin: 0; }

/* ==================================================================== *
 * 10. CONTACTE
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-contacte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--wsf-sp) * 3);
    align-items: start;
}
body.wsf-tpl .wsf-main .wsf-dades { list-style: none; margin: 0; padding: 0; }
body.wsf-tpl .wsf-main .wsf-dades li {
    padding: var(--wsf-sp) 0;
    border-bottom: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 18%, transparent);
}
body.wsf-tpl .wsf-main .wsf-dades li:first-child { padding-top: 0; }
body.wsf-tpl .wsf-main .wsf-dades strong {
    display: block;
    font-size: var(--wsf-c-petit);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 0.2em;
}

/* ---------- Destacat: banda que trenca el ritme de lectura ---------- */
body.wsf-tpl .wsf-main .wsf-destacat {
    background: var(--wsf-surface);
    border-left: 3px solid var(--wsf-accent);
    border-radius: calc(var(--wsf-radius) * 0.5);
    padding: calc(var(--wsf-sp) * 1.5) calc(var(--wsf-sp) * 2);
    margin: calc(var(--wsf-sp) * 2) 0;
}
body.wsf-tpl .wsf-main .wsf-destacat > :first-child { margin-top: 0; }
body.wsf-tpl .wsf-main .wsf-destacat > :last-child { margin-bottom: 0; }

/* ---------- Figures: imatge amb peu ---------- */
body.wsf-tpl .wsf-main figure.wsf-figura {
    margin: calc(var(--wsf-sp) * 2) 0;
}
body.wsf-tpl .wsf-main figure.wsf-figura img {
    display: block;
    width: 100%;
    border-radius: var(--wsf-radius);
}
body.wsf-tpl .wsf-main figure.wsf-figura figcaption {
    font-size: 14px;
    opacity: 0.7;
    margin-top: calc(var(--wsf-sp) * 0.5);
}

/* Text de lectura llarga: mesura acotada perquè no faci línies quilomètriques */
body.wsf-tpl .wsf-main .wsf-text { max-width: var(--wsf-c-mesura); }

/* ==================================================================== *
 * 12. IMATGES — requadres que l'usuari omple des de l'editor
 * ==================================================================== *
 * Han de ser <img> de veritat: l'editor enganxa a img[data-key] i, en
 * clicar-hi, obre el gestor de mitjans. Mentre no s'hi posa res, el src
 * apunta al marcador neutre i el requadre ja te la forma i la proporcio
 * finals, o sigui que la pagina no balla quan s'hi posa la imatge bona. */

body.wsf-tpl .wsf-main .wsf-imatge {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: var(--wsf-radius);
    background: var(--wsf-surface);
    aspect-ratio: 16 / 10;
}
body.wsf-tpl .wsf-main .wsf-imatge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}
body.wsf-tpl .wsf-main .wsf-imatge.wsf-quadrat  { aspect-ratio: 1 / 1; }
body.wsf-tpl .wsf-main .wsf-imatge.wsf-vertical { aspect-ratio: 3 / 4; }
body.wsf-tpl .wsf-main .wsf-imatge.wsf-panoramica { aspect-ratio: 21 / 9; }

/* La nota nomes es veu mentre hi ha el marcador: quan l'editor canvia el
   src per la imatge del client, el selector deixa de casar i desapareix. */
body.wsf-tpl .wsf-main .wsf-imatge-nota {
    position: absolute;
    left: 50%;
    bottom: calc(var(--wsf-sp) * 1.2);
    transform: translateX(-50%);
    display: none;
    padding: 0.4em 0.9em;
    border-radius: 999px;
    background: var(--wsf-bg);
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: var(--wsf-c-petit);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.72;
    pointer-events: none;
    white-space: nowrap;
}
body.wsf-tpl .wsf-main .wsf-imatge:has(img[src*="wsf-imatge.svg"]) .wsf-imatge-nota { display: block; }

/* Galeria: tira d'imatges que s'adapta sola */
body.wsf-tpl .wsf-main .wsf-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wsf-sp);
}

/* ==================================================================== *
 * 13. MITJA + TEXT — el bloc que alterna imatge i explicacio
 * ==================================================================== */

body.wsf-tpl .wsf-main .wsf-mitja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--wsf-sp) * 3);
    align-items: center;
}
/* Invers: la imatge passa a la dreta sense tocar l'ordre del document, que
   es el que llegeix un lector de pantalla i el que veu el mobil. */
body.wsf-tpl .wsf-main .wsf-mitja.wsf-invers > :first-child { order: 2; }

/* ==================================================================== *
 * 14. BANDES A TOTA AMPLADA
 * ==================================================================== *
 * .wsf-main es una columna centrada (900px a Essencial, 720 a Revista):
 * sense trencar-la, una pagina llarga es un sol bloc de text i no te ritme.
 * Aquestes bandes en surten i tornen a inserir el contingut a l'ample de la
 * columna, o sigui que el text no s'estira mai. */

/* La banda no ha de fer barra horitzontal, i el peu ha de quedar SEMPRE a baix
   de tot: amb poc contingut, sense aixo el peu pujava a mitja pantalla i es
   veia el fons per sota. Cadena de flex body > #device-wrapper > .wsf-main. */
body.wsf-tpl {
    overflow-x: clip;
    min-height: 100vh;
    min-height: 100svh;      /* al mobil, sense comptar les barres del navegador */
    display: flex;
    flex-direction: column;
}
body.wsf-tpl > #device-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
}
body.wsf-tpl #device-wrapper > .wsf-main { flex: 1 0 auto; }

body.wsf-tpl .wsf-main .wsf-banda {
    margin-inline: calc(50% - 50vw);
    padding-block: calc(var(--wsf-sp) * 4);
    padding-inline: calc(50vw - 50% + var(--wsf-sp));
    margin-block: calc(var(--wsf-sp) * 4);
}
body.wsf-tpl .wsf-main .wsf-banda > * { max-width: 100%; }
body.wsf-tpl .wsf-main .wsf-banda-suau { background: var(--wsf-surface); }
body.wsf-tpl .wsf-main .wsf-banda-forta {
    background: var(--wsf-accent);
    color: var(--wsf-bg);
}
body.wsf-tpl .wsf-main .wsf-banda-forta .wsf-etiqueta { color: inherit; opacity: 0.75; }
body.wsf-tpl .wsf-main .wsf-banda-forta .wsf-btn {
    background: var(--wsf-bg);
    color: var(--wsf-accent);
}
body.wsf-tpl .wsf-main .wsf-banda-forta .wsf-btn-alt { border-color: currentColor; color: inherit; }
body.wsf-tpl .wsf-main .wsf-banda-forta .wsf-pas::before { color: inherit; opacity: 0.45; }
body.wsf-tpl .wsf-main .wsf-banda-forta .wsf-prestacio { border-top-color: currentColor; }

/* Imatge a tota amplada: l'ancoratge visual de la portada */
body.wsf-tpl .wsf-main .wsf-imatge.wsf-plena {
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
    aspect-ratio: 21 / 9;
}

/* ==================================================================== *
 * 11. RESPONSIVE (duplicat @media + @container, com les plantilles)
 * ==================================================================== */

@media (max-width: 760px) {
    body.wsf-tpl .wsf-main .wsf-cols-2,
    body.wsf-tpl .wsf-main .wsf-cols-3 { grid-template-columns: 1fr; }
    body.wsf-tpl .wsf-main .wsf-seccio { margin: calc(var(--wsf-sp) * 2) 0; }
    body.wsf-tpl .wsf-main .wsf-bloc-hero,
    body.wsf-tpl .wsf-main .wsf-contacte { grid-template-columns: 1fr; }
    body.wsf-tpl .wsf-main .wsf-bloc-hero { gap: calc(var(--wsf-sp) * 2); margin-bottom: calc(var(--wsf-sp) * 3); }
    body.wsf-tpl .wsf-main .wsf-bloc-hero.wsf-sol .wsf-hero-titol-gran { max-width: none; }
    body.wsf-tpl .wsf-main .wsf-cta { padding: calc(var(--wsf-sp) * 2); }
    body.wsf-tpl .wsf-main .wsf-accions .wsf-btn,
    body.wsf-tpl .wsf-main .wsf-accions .wsf-btn-alt { flex: 1 1 auto; }
    body.wsf-tpl .wsf-main .wsf-mitja { grid-template-columns: 1fr; }
    body.wsf-tpl .wsf-main .wsf-mitja.wsf-invers > :first-child { order: 0; }
    body.wsf-tpl .wsf-main .wsf-banda { padding-block: calc(var(--wsf-sp) * 2.5); margin-block: calc(var(--wsf-sp) * 2.5); }
    body.wsf-tpl .wsf-main .wsf-imatge.wsf-panoramica,
    body.wsf-tpl .wsf-main .wsf-imatge.wsf-plena { aspect-ratio: 16 / 10; }
}
@container device (max-width: 760px) {
    body.wsf-tpl .wsf-main .wsf-cols-2,
    body.wsf-tpl .wsf-main .wsf-cols-3 { grid-template-columns: 1fr; }
    body.wsf-tpl .wsf-main .wsf-seccio { margin: calc(var(--wsf-sp) * 2) 0; }
    body.wsf-tpl .wsf-main .wsf-bloc-hero,
    body.wsf-tpl .wsf-main .wsf-contacte { grid-template-columns: 1fr; }
    body.wsf-tpl .wsf-main .wsf-bloc-hero { gap: calc(var(--wsf-sp) * 2); margin-bottom: calc(var(--wsf-sp) * 3); }
    body.wsf-tpl .wsf-main .wsf-bloc-hero.wsf-sol .wsf-hero-titol-gran { max-width: none; }
    body.wsf-tpl .wsf-main .wsf-cta { padding: calc(var(--wsf-sp) * 2); }
    body.wsf-tpl .wsf-main .wsf-accions .wsf-btn,
    body.wsf-tpl .wsf-main .wsf-accions .wsf-btn-alt { flex: 1 1 auto; }
    body.wsf-tpl .wsf-main .wsf-mitja { grid-template-columns: 1fr; }
    body.wsf-tpl .wsf-main .wsf-mitja.wsf-invers > :first-child { order: 0; }
    body.wsf-tpl .wsf-main .wsf-banda { padding-block: calc(var(--wsf-sp) * 2.5); margin-block: calc(var(--wsf-sp) * 2.5); }
    body.wsf-tpl .wsf-main .wsf-imatge.wsf-panoramica,
    body.wsf-tpl .wsf-main .wsf-imatge.wsf-plena { aspect-ratio: 16 / 10; }
}

/* Qui no vol moviment, no en té: els botons queden igual de clars sense ell. */
@media (prefers-reduced-motion: reduce) {
    body.wsf-tpl .wsf-main .wsf-btn,
    body.wsf-tpl .wsf-main .wsf-btn-alt { transition: none; }
    body.wsf-tpl .wsf-main .wsf-btn:hover,
    body.wsf-tpl .wsf-main .wsf-btn-alt:hover { transform: none; }
}