/* ====================================================================
 * Barcelona Studios — estil propi damunt la plantilla "estudi"
 * ====================================================================
 * La plantilla i l'estil (modernist) posen l'estructura i la tipografia.
 * Aquest full nomes fa dues coses:
 *
 *   1. Porta la paleta del web historic de barcelonastudios.net: fons blanc,
 *      text gairebe negre i el taronja de la casa. Els valors surten de la
 *      pagina real: #f87e29 als requadres de seccio, #393939 i #232323 als
 *      grisos, blanc de fons.
 *   2. Fa el hero de portada a pantalla completa, amb les fotos dels platos
 *      passant en fos encadenat.
 *
 * Es carrega des de les plantilles (templates/<nom>/template.php) just despres
 * de wsf_theme_head(), o sigui que pot afinar els tokens del tema sense
 * reescriure'ls tots.
 * ==================================================================== */

:root {
    --wsf-bg:      #ffffff;
    --wsf-surface: #f2f2f2;
    --wsf-text:    #232323;
    --wsf-accent:  #f87e29;
    --wsf-accent2: #393939;
    --wsf-line:    rgba(35, 35, 35, 0.16);
    --wsf-radius:  0px;
}

/* El text damunt del taronja de la casa ha de ser negre, no blanc: amb blanc
   el contrast es de 2,4:1 i no arriba ni a AA. */
:root { --wsf-on-accent: #232323; }

/* ---------------------------------------------------------------- HERO */

.bs-hero {
    position: relative;
    /* Trenca el maxim de 1440 px i el marge de la plantilla: el hero es de
       vora a vora. margin-top negatiu per menjar-se el padding superior de
       .wsf-main i arrencar just sota la barra. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-top: calc(var(--wsf-r3, 48px) * -1);
    margin-bottom: calc(var(--wsf-sp) * 4);
    height: calc(100svh - var(--wsf-barra, 72px));
    min-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
}

.bs-hero-slides { position: absolute; inset: 0; z-index: -2; background: #101010; }

/* Dues coses obliguen a un selector tan llarg:
   1. base.css declara `body.wsf-tpl img { max-width:100%; height:auto }`, que
      te mes pes que una classe sola i deixava cada foto amb la seva alcada
      natural: les cinc apilades i l'object-fit sense efecte.
   2. js/img-autoscale.js INJECTA a l'inici un <style> amb
      `.wsf-img-js #device-wrapper img.wsf-img-carregada { opacity: 1 }` per
      fer aparèixer les imatges quan acaben de carregar. Te la mateixa
      especificitat porta un ID (#device-wrapper), i un ID guanya a qualsevol
      nombre de classes: totes les diapositives quedaven visibles alhora i
      nomes es veia l'ultima. Per aixo la regla es duplica amb #device-wrapper
      al davant (guanya alla on el JS actua) i sense (per si algun dia el
      contenidor no hi es).
   El selector original deia: base.css declara
   `body.wsf-tpl img { max-width:100%; height:auto }`, que te mes pes que una
   classe sola i deixava cada foto amb la seva alcada natural. Resultat: les
   cinc apilades i l'object-fit sense efecte. */
#device-wrapper .bs-hero .bs-hero-slides img.bs-hero-slide,
body.wsf-tpl .bs-hero .bs-hero-slides img.bs-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    /* L'acostament va per TRANSICIO i no per @keyframes, i dura exactament el
       mateix que el torn de cada foto (4 s).
       Amb una animacio, en treure la classe .is-actiu l'animacio desapareixia i
       el transform tornava de cop a l'escala de sortida: la foto que s'estava
       esvaint pegava una estrebada cap enrere ben lletja. Amb una transicio,
       la que surt torna a l'escala inicial amb la mateixa lentitud, o sigui
       que durant el segon que dura el fos gairebe no es mou.
       I com que l'acostament dura el mateix que el torn, s'acaba just quan
       entra la imatge seguent. */
    transition: opacity 1.2s ease-in-out, transform 4s linear;
    transform: scale(1.02);
    transform-origin: center;
    will-change: transform, opacity;
}
#device-wrapper .bs-hero .bs-hero-slides img.bs-hero-slide.is-actiu,
body.wsf-tpl .bs-hero .bs-hero-slides img.bs-hero-slide.is-actiu {
    opacity: 1;
    transform: scale(1.10);
}

/* Vel fosc a la part baixa. Les fotos dels platos son molt clares i el text
   no s'hi llegeix; sense vel, el titular blanc desapareix damunt d'una paret
   blanca il.luminada. */
.bs-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.80) 26%, rgba(0,0,0,0.50) 50%,
        rgba(0,0,0,0.22) 72%, rgba(0,0,0,0.10) 100%);
}

.bs-hero-text {
    position: relative;
    width: 100%;
    max-width: var(--wsf-ample, 1440px);
    margin: 0 auto;
    padding: 0 var(--wsf-marge, 54px) calc(var(--wsf-sp) * 5);
    color: #fff;
}

/* Els colors van amb el selector llarg a posta: la plantilla declara les seves
   regles com a `body.wsf-tpl-estudi .wsf-main <cosa>`, que EMPATA amb
   `body.wsf-tpl .bs-hero <cosa>`; en cas d'empat mana l'ordre del document i
   les dues bandes es barallaven segons la propietat. Amb `.wsf-main` al mig
   som una classe per damunt i no depen de l'ordre. La plantilla declara
   `body.wsf-tpl-estudi .wsf-main h1 {...}` i `... p {...}`, que tenen mes pes
   que una classe sola. Amb `.bs-hero-text h1` el titular sortia del color del
   text normal —gairebe negre— damunt de la foto. */
body.wsf-tpl .wsf-main .bs-hero .bs-hero-text .bs-hero-etq {
    margin: 0 0 0.7em;
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wsf-accent);
}
body.wsf-tpl .wsf-main .bs-hero .bs-hero-text h1 {
    margin: 0 0 0.3em;
    color: #fff;
    font-size: clamp(2.4rem, 1rem + 5vw, 5rem);
    line-height: 1.03;
    max-width: 17ch;
    text-wrap: balance;
}
body.wsf-tpl .wsf-main .bs-hero .bs-hero-text .bs-hero-lead {
    margin: 0 0 1.7em;
    max-width: 60ch;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255,255,255,0.94);
}
/* Els botons del hero van damunt de foto: el ple ha de ser blanc i el
   secundari, de contorn blanc. */
body.wsf-tpl .wsf-main .bs-hero .wsf-btn {
    background: #fff;
    color: var(--wsf-text);
}
body.wsf-tpl .wsf-main .bs-hero .wsf-btn:hover {
    background: var(--wsf-accent);
    color: var(--wsf-on-accent);
}
body.wsf-tpl .wsf-main .bs-hero .wsf-btn-alt {
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}
body.wsf-tpl .wsf-main .bs-hero .wsf-btn-alt:hover { background: #fff; color: var(--wsf-text); }

/* Fletxa d'avall, com al web historic. */
.bs-hero-avall {
    position: absolute;
    left: 50%;
    bottom: calc(var(--wsf-sp) * 1.2);
    transform: translateX(-50%);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
    animation: bs-bota 2.4s ease-in-out infinite;
}
.bs-hero-avall:hover { opacity: 1; }
@keyframes bs-bota { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (prefers-reduced-motion: reduce) {
    .bs-hero-avall { animation: none; }
    body.wsf-tpl .bs-hero .bs-hero-slides img.bs-hero-slide { transition: none; transform: none; }
    #device-wrapper .bs-hero .bs-hero-slides img.bs-hero-slide.is-actiu,
    body.wsf-tpl .bs-hero .bs-hero-slides img.bs-hero-slide.is-actiu { transform: none; }
}

@media (max-width: 760px) {
    .bs-hero { height: calc(100svh - var(--wsf-barra, 64px)); min-height: 440px; }
    .bs-hero-text h1 { max-width: none; }
}

/* --------------------------------------------- imatges amples de contingut */
/* Les figures penjades directament de <main> es limiten a l'amplada de
   lectura (regla de contingut.css: main > figure { max-width: mesura }).
   Per a les bandes amples cal treure-les d'aquesta regla. */
body.wsf-tpl .wsf-main > figure.bs-ampla { max-width: none; }

/* ------------------------------------------------------------ retocs */
/* Etiquetes de seccio en taronja: es el gest que cus el web historic. */
.wsf-etiqueta { color: var(--wsf-accent); }

/* ------------------------------------------------------------- LA MARCA */
/* El logo del web es el logotip horitzontal de barcelonastudios.net
   (212 x 36 px). La plantilla el cap a 34 px d'alt, que amb el logotip
   VERTICAL de la intranet (120 x 190) el deixava en una tira de 21 px
   d'ample: no es llegia. Amb l'horitzontal i una mica mes d'alcada, si.
   El selector porta .wsf-brand perque la plantilla ja declara
   `body.wsf-tpl-estudi .wsf-brand img`. */
body.wsf-tpl-estudi .wsf-header .wsf-brand img { max-height: 42px; }
body.wsf-tpl-estudi .wsf-footer .wsf-brand-peu img { max-height: 30px; }

/* El peu ja duu el nom de la casa dues vegades: dins del logotip i al
   copyright de baix. El paragraf que la plantilla posa al costat del
   logotip el diu una tercera. Nomes s'amaga (no es treu del HTML) perque
   el marcatge el genera la plantilla global, compartida amb tots els
   clients. */
body.wsf-tpl-estudi .wsf-footer .wsf-footer-org { display: none; }

/* --------------------------------------------- banda d'accio en taronja */
/* contingut.css pinta el text de la banda forta amb --wsf-bg, que aqui es
   BLANC: sobre el taronja de la casa el contrast queda en 2,1:1 i no es
   llegeix. El text hi va gairebe negre, com al web historic. */
body.wsf-tpl .wsf-main .wsf-banda-forta { color: var(--wsf-on-accent); }
body.wsf-tpl .wsf-main .wsf-banda-forta .wsf-btn {
    background: var(--wsf-text);
    color: #fff;
}
body.wsf-tpl .wsf-main .wsf-banda-forta .wsf-btn:hover { background: #fff; color: var(--wsf-text); }

/* ------------------------------------------------- families del cataleg */
/* Quinze families en una llista vertical deixaven mitja portada buida al
   costat de la foto. En graella, cada una es una fitxa clicable sencera amb
   la seva miniatura. La miniatura va al costat i no a sobre: amb quinze
   fitxes, posar-la a sobre triplicava l'alcada del bloc. */
body.wsf-tpl .wsf-main a.bs-familia {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--wsf-sp) * 1.2);
    padding: calc(var(--wsf-sp) * 0.9);
    background: var(--wsf-surface);
    border-left: 3px solid transparent;
    color: var(--wsf-text);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}
body.wsf-tpl .wsf-main a.bs-familia:hover {
    border-left-color: var(--wsf-accent);
    background: #ededed;
}
body.wsf-tpl .wsf-main a.bs-familia .bs-familia-foto {
    display: block;
    aspect-ratio: 4 / 3;
    background: #fff;
    overflow: hidden;
}
body.wsf-tpl .wsf-main a.bs-familia .bs-familia-foto img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}
body.wsf-tpl .wsf-main a.bs-familia .bs-familia-text {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}
body.wsf-tpl .wsf-main a.bs-familia .bs-familia-nom {
    font-family: var(--wsf-font-heading), sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
body.wsf-tpl .wsf-main a.bs-familia .bs-familia-n {
    font-size: 0.82rem;
    color: var(--wsf-accent);
}

/* ------------------------------------------------------------- CLIENTS */
/* Reixa de logos, com a www.barcelonastudios.net/clientes. Els PNG venen amb
   fons blanc i mides diferents; el requadre els iguala i el filtre els deixa
   en gris fins que s'hi passa per sobre, que es el gest del web historic. */
body.wsf-tpl .wsf-main .bs-clients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1px;
    background: var(--wsf-line);
    border: 1px solid var(--wsf-line);
    margin: calc(var(--wsf-sp) * 2) 0;
}
body.wsf-tpl .wsf-main .bs-client {
    display: grid;
    place-items: center;
    background: #fff;
    padding: calc(var(--wsf-sp) * 1.6);
    aspect-ratio: 5 / 3;
}
body.wsf-tpl .wsf-main .bs-client img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter .2s ease, opacity .2s ease;
}
body.wsf-tpl .wsf-main .bs-client:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    body.wsf-tpl .wsf-main .bs-client img { transition: none; }
}

/* -------------------------------------------------------- MENU BILINGUE */
/* "Platós / Studios": el castella mana i l'angles acompanya, com al web
   historic. Qui parteix el text es js/bs-menu.js; aqui nomes es vesteix. */
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link .bs-nav-es {
    font-weight: 700;
    font-style: normal;
}
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link .bs-nav-en {
    font-weight: 400;
    font-style: italic;
}

/* Telefon i correu al capcal, al lloc que ocupava "Contacto". */
body.wsf-tpl-estudi .wsf-nav .bs-contacte {
    display: inline-flex;
    align-items: center;
    gap: var(--wsf-r3, 22px);
    flex-wrap: wrap;
}
body.wsf-tpl-estudi .wsf-nav .bs-contacte-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    white-space: nowrap;
}
body.wsf-tpl-estudi .wsf-nav .bs-contacte-link svg { color: var(--wsf-accent); flex: 0 0 auto; }
body.wsf-tpl-estudi .wsf-nav .bs-contacte-link:hover { color: var(--wsf-accent); }

@media (max-width: 1200px) {
    /* A partir d'aqui el correu sencer ja no hi cap al costat del menu. */
    body.wsf-tpl-estudi .wsf-nav .bs-contacte-link[href^="mailto:"] { display: none; }
}

/* El menu, negre i sense vel.
   La plantilla pinta els enllacos del menu amb opacity 0.65 sobre el color de
   text: sobre fons blanc queden grisos i costa de llegir-los. Al web historic
   el menu es negre i pesa. Aqui es treu el vel i es forca el negre, tambe a
   les icones del telefon i el correu, que anaven en taronja. */
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link,
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link.actiu {
    color: #000;
    opacity: 1;
}
/* Les icones no hereten el negre del bloc: van a part, mes avall. */
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link:hover { color: var(--wsf-accent); opacity: 1; }
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link:hover .bs-nav-es,
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link:hover .bs-nav-en { color: inherit; }

/* Les icones del telefon i el correu, en taronja: son l'unica taca de color
   del capcal i separen aquest bloc del menu, que va tot negre. El text es
   queda negre i nomes s'hi posa quan s'hi passa per sobre. */
body.wsf-tpl-estudi .wsf-nav .bs-contacte-link svg { color: var(--wsf-accent); }
body.wsf-tpl-estudi .wsf-nav .bs-contacte-link:hover,
body.wsf-tpl-estudi .wsf-nav .bs-contacte-link:hover svg { color: var(--wsf-accent); }

/* El punt de la pagina activa, en taronja: es l'unic senyal de color del
   capcal i amb el menu tot negre es el que diu on ets. */
body.wsf-tpl-estudi .wsf-nav .wsf-nav-link.actiu::after { background: var(--wsf-accent); }

/* ==================================================================== *
 * PLATOS — pestanyes, panorama, fitxa i esquemes
 * ==================================================================== *
 * Mateix plantejament que al web historic —els quatre platos triables, amb
 * el seu panorama de 360°, la seva fitxa i els seus esquemes.
 *
 * Disposicio: pestanyes en fila a dalt, el panorama a TOTA AMPLADA i, a sota,
 * les tres coses que l'expliquen en tres columnes: caracteristiques, tarifes
 * i esquemes. La imatge mana i el text no fa una columna interminable.
 * Amb les pestanyes en columna i tot apilat el bloc feia 1.090 px.
 * Qui ho mou es js/bs-platos.js.
 */
body.wsf-tpl .wsf-main .bs-platos {
    border: 1px solid var(--wsf-line);
    margin: calc(var(--wsf-sp) * 2) 0;
}

/* Pestanyes: quatre en fila, totes iguals. */
body.wsf-tpl .wsf-main .bs-platos-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--wsf-line);
    background: var(--wsf-surface);
}
body.wsf-tpl .wsf-main .bs-plato-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--wsf-line);
    border-radius: 0;
    padding: calc(var(--wsf-sp) * 1.1) calc(var(--wsf-sp) * 1.2);
    min-height: 0;
    font-family: var(--wsf-font-heading), sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    color: #000;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
body.wsf-tpl .wsf-main .bs-plato-tab:last-child { border-right: 0; }
body.wsf-tpl .wsf-main .bs-plato-tab:hover { background: #ededed; color: #000; }
body.wsf-tpl .wsf-main .bs-plato-tab.is-actiu,
body.wsf-tpl .wsf-main .bs-plato-tab[aria-selected="true"] {
    background: var(--wsf-accent);
    color: var(--wsf-on-accent);
}

/* El panorama, de vora a vora del bloc. L'alcada va acotada en comptes de
   sortir d'una proporcio: a tota amplada, un 21/9 se n'anava a 520 px i un
   4/3 a mes de 900. */
body.wsf-tpl .wsf-main .bs-plato-pano { line-height: 0; background: #101010; }
body.wsf-tpl .wsf-main .bs-plato-pano iframe {
    display: block;
    width: 100%;
    height: clamp(300px, 34vh, 400px);
    border: 0;
}

body.wsf-tpl .wsf-main .bs-plato-cos { padding: calc(var(--wsf-sp) * 1.8); }
body.wsf-tpl .wsf-main .bs-plato-cos > h3 { margin: 0 0 0.7em; font-size: 1.6rem; }

/* Caracteristiques, tarifes i esquemes, un al costat de l'altre. */
body.wsf-tpl .wsf-main .bs-plato-graella {
    display: grid;
    /* Els esquemes s'enduen la columna mes ampla: son plans acotats i a 340 px
       les mides no es llegien. Les tarifes, en canvi, ara ocupen molt poc. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 1.32fr);
    gap: calc(var(--wsf-sp) * 2);
    align-items: start;
}

/* La fitxa: text una mica mes petit i molt mes atapeit. */
body.wsf-tpl .wsf-main .bs-plato-dades,
body.wsf-tpl .wsf-main .bs-plato-preus { font-size: 0.92rem; }
body.wsf-tpl .wsf-main .bs-plato-dades h4,
body.wsf-tpl .wsf-main .bs-plato-preus h4 {
    margin: 0 0 0.5em;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wsf-accent);
}
body.wsf-tpl .wsf-main .bs-plato-unitat {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--wsf-text);
    opacity: 0.55;
}
body.wsf-tpl .wsf-main .bs-plato-llista {
    margin: 0;
    padding-left: 1.05em;
    line-height: 1.42;
}
body.wsf-tpl .wsf-main .bs-plato-llista li { margin: 0 0 0.15em; }

/* Una fila per tarifa: concepte a l'esquerra, import a la dreta. */
body.wsf-tpl .wsf-main .bs-tarifes { list-style: none; margin: 0; padding: 0; }
body.wsf-tpl .wsf-main .bs-tarifes li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8em;
    padding: 0.1em 0;
    font-size: 0.86rem;
    line-height: 1.35;
}
/* Filet de punts entre concepte i preu: lliga els dos costats sense haver de
   posar una vora a cada fila, que era el que feia la llista tan alta. */
body.wsf-tpl .wsf-main .bs-tarifes li::before {
    content: "";
    order: 1;
    flex: 1 1 auto;
    align-self: center;
    height: 0;
    border-bottom: 1px dotted var(--wsf-line);
}
body.wsf-tpl .wsf-main .bs-tarifes span { order: 0; opacity: 0.85; }
body.wsf-tpl .wsf-main .bs-tarifes strong { order: 2; white-space: nowrap; }

body.wsf-tpl .wsf-main .bs-plato-nota {
    margin: 0.8em 0 0.7em;
    font-size: 0.78rem;
    line-height: 1.4;
    opacity: 0.68;
}
body.wsf-tpl .wsf-main .bs-plato-fitxes { margin: 0; font-size: 0.85rem; font-weight: 700; }
body.wsf-tpl .wsf-main .bs-plato-fitxes a { color: var(--wsf-accent); }

/* Els esquemes. */
body.wsf-tpl .wsf-main .bs-esquemes-marc {
    position: relative;
    aspect-ratio: 768 / 488;
    background: #fff;
    border: 1px solid var(--wsf-line);
    overflow: hidden;
}
body.wsf-tpl .wsf-main img.bs-esquema {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    opacity: 0;
    transition: opacity .3s ease;
}
/* js/img-autoscale.js injecta al <head>, en carregar la pagina,
   `.wsf-img-js #device-wrapper img.wsf-img-carregada { opacity: 1 }`: un id i
   dues classes, el mateix pes que `#device-wrapper .bs-esquemes-marc img...`,
   i com que el seu <style> va DESPRES del nostre full, en cas d'empat guanyava
   ell i els tres esquemes es veien apilats. Amb `.bs-plato` al mig som una
   classe per damunt. */
#device-wrapper .bs-plato .bs-esquemes-marc img.bs-esquema { opacity: 0; }
#device-wrapper .bs-plato .bs-esquemes-marc img.bs-esquema.is-actiu,
body.wsf-tpl .wsf-main img.bs-esquema.is-actiu { opacity: 1; }

body.wsf-tpl .wsf-main .bs-esquema-ant,
body.wsf-tpl .wsf-main .bs-esquema-seg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    min-height: 0;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--wsf-line);
    border-radius: 0;
    color: #000;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
body.wsf-tpl .wsf-main .bs-esquema-ant { left: 0; }
body.wsf-tpl .wsf-main .bs-esquema-seg { right: 0; }
body.wsf-tpl .wsf-main .bs-esquema-ant:hover,
body.wsf-tpl .wsf-main .bs-esquema-seg:hover { background: var(--wsf-accent); color: var(--wsf-on-accent); }

body.wsf-tpl .wsf-main .bs-esquema-punts {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 2px;
}
/* El punt es dibuixa amb ::before i el boto es queda gran: base.css imposa
   `min-height: 44px` a tots els botons —la mida minima d'un objectiu tactil—
   i min-height guanya a height, o sigui que posar-hi `height: 10px` nomes
   aconseguia punts de 10 x 44. */
body.wsf-tpl .wsf-main .bs-esquema-punt {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 26px;
    min-width: 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 0;
}
body.wsf-tpl .wsf-main .bs-esquema-punt::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border: 1px solid #000;
    border-radius: 50%;
    background: transparent;
    transition: background .16s ease, border-color .16s ease;
}
body.wsf-tpl .wsf-main .bs-esquema-punt:hover::before { border-color: var(--wsf-accent); }
body.wsf-tpl .wsf-main .bs-esquema-punt.is-actiu::before {
    background: var(--wsf-accent);
    border-color: var(--wsf-accent);
}

@media (max-width: 1100px) {
    /* Els esquemes passen a sota, ocupant les dues columnes. */
    body.wsf-tpl .wsf-main .bs-plato-graella { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.wsf-tpl .wsf-main .bs-plato-esquemes { grid-column: 1 / -1; max-width: 460px; }
}
@media (max-width: 760px) {
    body.wsf-tpl .wsf-main .bs-platos-tabs { grid-template-columns: repeat(2, 1fr); }
    body.wsf-tpl .wsf-main .bs-plato-tab { font-size: 0.9rem; }
    body.wsf-tpl .wsf-main .bs-plato-tab:nth-child(2) { border-right: 0; }
    body.wsf-tpl .wsf-main .bs-plato-tab:nth-child(-n+2) { border-bottom: 1px solid var(--wsf-line); }
    body.wsf-tpl .wsf-main .bs-plato-graella { grid-template-columns: 1fr; gap: calc(var(--wsf-sp) * 1.6); }
    body.wsf-tpl .wsf-main .bs-plato-esquemes { max-width: none; }
    body.wsf-tpl .wsf-main .bs-plato-pano iframe { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    body.wsf-tpl .wsf-main img.bs-esquema { transition: none; }
}

/* Quan un plato no te panorama de 360°, al seu lloc hi va la foto. Ha
   d'ocupar exactament el mateix que l'iframe perque els quatre panells facin
   la mateixa alcada. */
body.wsf-tpl .wsf-main .bs-plato-pano-foto { height: clamp(300px, 34vh, 400px); overflow: hidden; }
body.wsf-tpl .wsf-main .bs-plato-pano-foto img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 760px) {
    body.wsf-tpl .wsf-main .bs-plato-pano-foto { height: 260px; }
}
/* Fotos de vehicle retallat sobre blanc (la Crafter de la fitxa tecnica): amb
   cover la franja ampla del panell li tallava el sostre i les rodes. Es veu
   sencera i el blanc del fons de la foto continua pel panell. */
body.wsf-tpl .wsf-main .bs-plato-pano-foto.bs-foto-sencera { background: #fff; }
body.wsf-tpl .wsf-main .bs-plato-pano-foto.bs-foto-sencera img { object-fit: contain; }

/* La superficie a la pestanya, sota el nom del plato: es el primer que es
   pregunta qui busca plato i estalvia haver-los d'obrir un per un. */
body.wsf-tpl .wsf-main .bs-plato-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    line-height: 1.2;
}
body.wsf-tpl .wsf-main .bs-plato-tab-nom { font-size: 1rem; }
body.wsf-tpl .wsf-main .bs-plato-tab-m2 {
    font-family: var(--wsf-font-body), sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    opacity: 0.62;
}
/* A la pestanya oberta el fons es taronja: alli el gris no es llegeix. */
body.wsf-tpl .wsf-main .bs-plato-tab.is-actiu .bs-plato-tab-m2,
body.wsf-tpl .wsf-main .bs-plato-tab[aria-selected="true"] .bs-plato-tab-m2 { opacity: 0.82; }

/* Sense vel: el panorama es gira dins de la pagina (18/09/2026). */
body.wsf-tpl .wsf-main .bs-plato-pano { position: relative; }

/* Passi de vistes al lloc del panorama (el Studio 2, que no en te de 360°). */
body.wsf-tpl .wsf-main .bs-plato-pano-slide {
    position: relative;
    height: clamp(300px, 34vh, 400px);
    overflow: hidden;
    background: #101010;
}
body.wsf-tpl .wsf-main img.bs-vista {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
/* Tres classes i l'id: el <style> que injecta js/img-autoscale.js
   (`.wsf-img-js #device-wrapper img.wsf-img-carregada { opacity: 1 }`) pesa un
   id i dues classes i va DESPRES al document, o sigui que amb dues classes
   s'empata i guanya ell: les tres vistes es veien apilades. */
#device-wrapper .bs-plato .bs-plato-pano-slide img.bs-vista { opacity: 0; }
#device-wrapper .bs-plato .bs-plato-pano-slide img.bs-vista.is-actiu,
body.wsf-tpl .wsf-main img.bs-vista.is-actiu { opacity: 1; }

body.wsf-tpl .wsf-main .bs-vista-ant,
body.wsf-tpl .wsf-main .bs-vista-seg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 52px;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0,0,0,0.42);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
body.wsf-tpl .wsf-main .bs-vista-ant { left: 0; }
body.wsf-tpl .wsf-main .bs-vista-seg { right: 0; }
body.wsf-tpl .wsf-main .bs-vista-ant:hover,
body.wsf-tpl .wsf-main .bs-vista-seg:hover { background: var(--wsf-accent); color: var(--wsf-on-accent); }

body.wsf-tpl .wsf-main .bs-vista-punts {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0;
}
body.wsf-tpl .wsf-main .bs-vista-punt {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 26px;
    min-width: 26px;
    min-height: 0;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 0;
}
body.wsf-tpl .wsf-main .bs-vista-punt::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
}
body.wsf-tpl .wsf-main .bs-vista-punt.is-actiu::before { background: var(--wsf-accent); border-color: var(--wsf-accent); }

@media (max-width: 760px) {
    body.wsf-tpl .wsf-main .bs-plato-pano-slide { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    body.wsf-tpl .wsf-main img.bs-vista { transition: none; }
}

/* ------------------------------------------------------- TEXT SELECCIONAT */
/* base.css tenyeix la seleccio amb l'accent al 22 % sobre transparent. Amb el
   taronja de la casa aixo es una aigua molt fluixa, i damunt del hero —text
   blanc sobre foto— gairebe no es veia que hi hagues res seleccionat.
   Aqui la seleccio va amb el taronja PLE i lletra negra: 8:1 de contrast, molt
   per sobre del 4,5:1 que demana l'AA. Amb lletra blanca serien 2,6:1 i no
   passaria. */
body.wsf-tpl ::selection {
    background: var(--wsf-accent);
    color: #000;
    text-shadow: none;
}
/* Regla a part i no separada per comes: un selector que el navegador no
   entengui invalida tota la llista, i llavors no funcionaria enlloc. */
body.wsf-tpl ::-moz-selection {
    background: var(--wsf-accent);
    color: #000;
    text-shadow: none;
}

/* Dins de la banda taronja el fons JA es l'accent: alli la seleccio s'ha de
   veure al reves o no es distingiria del fons. */
body.wsf-tpl .wsf-banda-forta ::selection { background: #000; color: #fff; }
body.wsf-tpl .wsf-banda-forta ::-moz-selection { background: #000; color: #fff; }

/* Igual a les pestanyes obertes dels platos, que tambe son taronja. */
body.wsf-tpl .bs-plato-tab[aria-selected="true"] ::selection { background: #000; color: #fff; }
body.wsf-tpl .bs-plato-tab[aria-selected="true"] ::-moz-selection { background: #000; color: #fff; }

/* ==================================================================== *
 * BANDA DE CONTACTE, damunt del peu
 * ==================================================================== *
 * Al web historic el contacte es un bloc de text pla just abans del peu.
 * Aqui va en dues columnes damunt d'una banda fosca que enllaca amb el peu de
 * la plantilla: dades a l'esquerra, mapa a la dreta.
 * Va DINS de <main>, no dins del <footer>: el peu el pinta la plantilla i es
 * de tots els clients. Visualment es continu perque comparteixen fons.
 */
body.wsf-tpl .wsf-main .bs-peu-contacte {
    /* De vora a vora, com les bandes de contingut.css. Sense marge superior:
       la banda ha d'anar enganxada al que ve just abans. */
    margin-inline: calc(50% - 50vw);
    margin-bottom: calc(var(--wsf-r5, 64px) * -1.4);
    padding: calc(var(--wsf-sp) * 4) calc(50vw - 50% + var(--wsf-sp));
    background: var(--wsf-text);
    color: #fff;
}
body.wsf-tpl .wsf-main .bs-peu-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: calc(var(--wsf-sp) * 4);
    align-items: center;
    max-width: var(--wsf-ample, 1440px);
    margin: 0 auto;
}

body.wsf-tpl .wsf-main .bs-peu-etq {
    margin: 0 0 0.9em;
    font-family: var(--wsf-font-heading), sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wsf-accent);
}
body.wsf-tpl .wsf-main .bs-peu-etq em { font-weight: 400; font-style: italic; opacity: 0.85; }

body.wsf-tpl .wsf-main .bs-peu-adreca {
    margin: 0 0 1.1em;
    font-family: var(--wsf-font-heading), sans-serif;
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.9rem);
    font-weight: 700;
    line-height: 1.22;
    color: #fff;
}

/* Les dades: etiqueta a l'esquerra i valor a la dreta, alineats per la base.
   Abans l'etiqueta portava un margin-top propi i les dues columnes anaven
   desencaixades una linia. Amb la reixa i sense marges, cada fila casa sola. */
body.wsf-tpl .wsf-main .bs-peu-llista {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.75em 1.8em;
    margin: 0 0 1.8em;
}
body.wsf-tpl .wsf-main .bs-peu-llista dt {
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    opacity: 0.55;
    white-space: nowrap;
}
body.wsf-tpl .wsf-main .bs-peu-llista dd {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.35;
}
body.wsf-tpl .wsf-main .bs-peu-llista a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
body.wsf-tpl .wsf-main .bs-peu-llista a:hover { color: var(--wsf-accent); border-bottom-color: var(--wsf-accent); }
body.wsf-tpl .wsf-main .bs-peu-accions { margin: 0; }
body.wsf-tpl .wsf-main .bs-peu-contacte .wsf-btn { background: var(--wsf-accent); color: var(--wsf-on-accent); }
body.wsf-tpl .wsf-main .bs-peu-contacte .wsf-btn:hover { background: #fff; color: var(--wsf-text); }

/* El mapa. Vel permanent, com el panorama: dins de l'iframe de Google la roda
   del ratoli fa zoom en comptes de deixar baixar la pagina. */
body.wsf-tpl .wsf-main .bs-peu-mapa {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #101010;
    overflow: hidden;
}
body.wsf-tpl .wsf-main .bs-peu-mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* PROVA: mapa fosc per filtre */
    filter: invert(0.92) hue-rotate(180deg) saturate(0.55) contrast(0.92) brightness(0.95);
}
body.wsf-tpl .wsf-main .bs-peu-mapa-vel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: calc(var(--wsf-sp) * 1.1);
    text-decoration: none;
}
body.wsf-tpl .wsf-main .bs-peu-mapa-vel span {
    padding: 0.55em 1em;
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-family: var(--wsf-font-body), sans-serif;
    font-size: 0.78rem;
    transition: color .18s ease;
}
body.wsf-tpl .wsf-main .bs-peu-mapa-vel:hover span { color: var(--wsf-accent); }

@media (max-width: 900px) {
    body.wsf-tpl .wsf-main .bs-peu-inner { grid-template-columns: 1fr; gap: calc(var(--wsf-sp) * 2.5); }
    body.wsf-tpl .wsf-main .bs-peu-mapa { aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
    body.wsf-tpl .wsf-main .bs-peu-llista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    body.wsf-tpl .wsf-main .bs-peu-mapa-vel span { transition: none; }
}

/* El menu del peu, com el del capcal: castella en negreta i angles en cursiva. */
body.wsf-tpl-estudi .wsf-footer-nav a .bs-nav-es { font-weight: 700; font-style: normal; }
body.wsf-tpl-estudi .wsf-footer-nav a .bs-nav-en { font-weight: 400; font-style: italic; }

/* El senyal del mapa. L'iframe va invertit per sortir fosc i el punt de Google
   s'hi perd; aquest va a sobre, sense filtre, i amb el taronja de la casa. */
body.wsf-tpl .wsf-main .bs-peu-mapa-punt {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: var(--wsf-accent);
    box-shadow: 0 0 0 4px rgba(248,126,41,0.28), 0 0 0 1px rgba(0,0,0,0.5) inset;
    pointer-events: none;
    z-index: 1;
}

/* El credit de l'editor, al costat del copyright. Discret: hi ha de ser, no
   ha de competir amb el nom del client. */
body.wsf-tpl-estudi .wsf-footer-baix { display: flex; flex-wrap: wrap; gap: 0.6em 1.6em; align-items: baseline; }
body.wsf-tpl-estudi .wsf-footer-baix .bs-fet-amb {
    margin: 0;
    margin-left: auto;
    font-size: 0.78rem;
    opacity: 0.6;
}
body.wsf-tpl-estudi .wsf-footer-baix .bs-fet-amb a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
body.wsf-tpl-estudi .wsf-footer-baix .bs-fet-amb a:hover { color: var(--wsf-accent); }
@media (max-width: 520px) {
    body.wsf-tpl-estudi .wsf-footer-baix .bs-fet-amb { margin-left: 0; }
}

/* Etiquetes i titulars bilingues: el castella mana i l'angles acompanya.
   A les etiquetes de seccio el marcatge ja ve fet des del contingut; al
   titular de la pagina el parteix js/bs-menu.js. */
body.wsf-tpl .wsf-main .wsf-etiqueta .bs-es { font-weight: 700; font-style: normal; }
body.wsf-tpl .wsf-main .wsf-etiqueta .bs-en { font-weight: 400; font-style: italic; opacity: 0.75; }
body.wsf-tpl-estudi .wsf-titol-gran h1 .bs-nav-es { font-weight: inherit; font-style: normal; }
body.wsf-tpl-estudi .wsf-titol-gran h1 .bs-nav-en { font-weight: 400; font-style: italic; opacity: 0.8; }

/* La banda d'accio, mes alta: es el punt on es demana el pas seguent i amb el
   coixi de contingut.css quedava massa arran del text. Sense marge inferior:
   el que ve a sota es la banda de contacte del peu i han d'anar enganxades. */
body.wsf-tpl .wsf-main .wsf-banda-forta {
    padding-block: calc(var(--wsf-sp) * 6.5);
    margin-bottom: 0;
}
@media (max-width: 760px) {
    body.wsf-tpl .wsf-main .wsf-banda-forta { padding-block: calc(var(--wsf-sp) * 4.5); }
}

/* El titular que s'escriu la propia pagina del cataleg (show_title=0). */
body.wsf-tpl .wsf-main h1.bs-titol {
    margin: 0 0 0.45em;
    font-size: var(--wsf-c-titol, clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem));
    line-height: 1.1;
}
/* Pagina de familia: el titular a l'esquerra i "Volver al catalogo" a la dreta,
   a la mateixa fila. Al mobil, si no hi cap, el boto baixa a sota. */
body.wsf-tpl .wsf-main .bs-titol-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--wsf-sp) * 1) calc(var(--wsf-sp) * 2);
    margin: 0 0 0.45em;
}
body.wsf-tpl .wsf-main .bs-titol-fila h1.bs-titol { margin: 0; }
body.wsf-tpl .wsf-main .bs-titol-fila .bs-tornar { flex: none; }
body.wsf-tpl .wsf-main h1.bs-titol .bs-es { font-weight: inherit; font-style: normal; }
body.wsf-tpl .wsf-main h1.bs-titol .bs-en { font-weight: 400; font-style: italic; opacity: 0.75; }

/* ==================================================================== *
 * CATALEG: columna lateral, cercador i fitxes
 * ==================================================================== */
body.wsf-tpl .wsf-main .bs-rental {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: calc(var(--wsf-sp) * 3);
    align-items: start;
    margin: calc(var(--wsf-sp) * 2) 0;
}

/* La columna lateral segueix el scroll: amb 161 articles, haver de pujar fins
   dalt per canviar de subcategoria era absurd. */
body.wsf-tpl .wsf-main .bs-rental-aside {
    position: sticky;
    top: calc(var(--wsf-barra, 64px) + var(--wsf-sp));
    max-height: calc(100vh - var(--wsf-barra, 64px) - var(--wsf-sp) * 2);
    overflow-y: auto;
}

body.wsf-tpl .wsf-main .bs-cerca { margin: 0 0 calc(var(--wsf-sp) * 2); }
body.wsf-tpl .wsf-main .bs-cerca-etq {
    display: block;
    margin-bottom: 0.4em;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    opacity: 0.6;
}
body.wsf-tpl .wsf-main .bs-cerca input { width: 100%; }

body.wsf-tpl .wsf-main .bs-subs ul,
body.wsf-tpl .wsf-main .bs-altres ul { list-style: none; margin: 0; padding: 0; }
body.wsf-tpl .wsf-main .bs-subs li { margin: 0; }
body.wsf-tpl .wsf-main .bs-sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8em;
    width: 100%;
    min-height: 0;
    padding: 0.55em 0.7em;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--wsf-text);
    font-family: var(--wsf-font-body), sans-serif;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
body.wsf-tpl .wsf-main .bs-sub:hover { background: var(--wsf-surface); color: var(--wsf-text); }
body.wsf-tpl .wsf-main .bs-sub.is-actiu {
    background: var(--wsf-surface);
    border-left-color: var(--wsf-accent);
    font-weight: 700;
}
body.wsf-tpl .wsf-main .bs-sub-n { font-size: 0.78rem; opacity: 0.55; }
body.wsf-tpl .wsf-main .bs-sub.is-actiu .bs-sub-n { color: var(--wsf-accent); opacity: 1; }

body.wsf-tpl .wsf-main .bs-altres { margin-top: calc(var(--wsf-sp) * 2.4); border-top: 1px solid var(--wsf-line); padding-top: calc(var(--wsf-sp) * 1.4); }
body.wsf-tpl .wsf-main .bs-altres-titol {
    margin: 0 0 0.6em;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    opacity: 0.6;
}
body.wsf-tpl .wsf-main .bs-altres li { margin: 0 0 0.35em; }
body.wsf-tpl .wsf-main .bs-altres a { font-size: 0.85rem; color: var(--wsf-text); text-decoration: none; opacity: 0.8; }
body.wsf-tpl .wsf-main .bs-altres a:hover { color: var(--wsf-accent); opacity: 1; }

body.wsf-tpl .wsf-main .bs-resultats {
    margin: 0 0 calc(var(--wsf-sp) * 1.4);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}
body.wsf-tpl .wsf-main .bs-cap-resultat { opacity: 0.7; }
body.wsf-tpl .wsf-main .bs-grup { margin: 0 0 calc(var(--wsf-sp) * 3); }

/* Les fitxes: nom mes petit i preu arran de baix, perque totes les targetes
   d'una fila acabin igual encara que el nom faci una linia o tres. */
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card { display: flex; flex-direction: column; }
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card h3 {
    font-size: 1.05rem;
    line-height: 1.25;
    /* Una mica d'aire entre la foto i el nom: enganxats, la targeta semblava
       que el titol formes part de la imatge. */
    margin: 0 0 0.35em;
    padding-top: calc(var(--wsf-sp) * 0.9);
}
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card p { font-size: 0.82rem; line-height: 1.4; }
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card .wsf-dades {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: calc(var(--wsf-sp) * 0.8);
}
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card .wsf-dades li { padding: 0; border: 0; }

@media (max-width: 900px) {
    body.wsf-tpl .wsf-main .bs-rental { grid-template-columns: 1fr; }
    body.wsf-tpl .wsf-main .bs-rental-aside { position: static; max-height: none; }
    body.wsf-tpl .wsf-main .bs-subs ul { display: flex; flex-wrap: wrap; gap: 0.3em; }
    body.wsf-tpl .wsf-main .bs-sub { width: auto; border-left: 0; border-bottom: 3px solid transparent; }
    body.wsf-tpl .wsf-main .bs-sub.is-actiu { border-left: 0; border-bottom-color: var(--wsf-accent); }
    body.wsf-tpl .wsf-main .bs-altres ul { display: flex; flex-wrap: wrap; gap: 0.3em 1.2em; }
}

/* Les fotos de producte, senceres.
   contingut.css les posa amb object-fit: cover, que omple el requadre pero
   escapca: als productes es menjava els extrems dels tripodes, els fons i els
   objectius. Amb contain es veuen enteres; el requadre va blanc perque les
   franges que queden a banda i banda no semblin un error. */
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card .wsf-imatge { background: #fff; }
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card .wsf-imatge img {
    object-fit: contain;
    padding: calc(var(--wsf-sp) * 0.6);
}

/* El camp de cerca del cataleg, en caixa.
   Amb l'estil de la plantilla es un filet de sota, i a sobre base.css hi posa
   un `outline` de 2 px a 3 px de distancia quan te el focus: com que el camp
   nomes te vora inferior, l'outline dibuixa el rectangle sencer i quedaven
   dues ratlles a baix i una a dalt. Aqui el camp es una caixa de debo i el
   focus es la vora en taronja amb un halo suau: un sol senyal, ben visible,
   sense doble subratllat. */
body.wsf-tpl-estudi .wsf-main .bs-cerca input[type="search"] {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--wsf-line);
    border-radius: 0;
    padding: 0.62em 0.75em;
    font-size: 0.9rem;
}
body.wsf-tpl-estudi .wsf-main .bs-cerca input[type="search"]:hover {
    border-color: color-mix(in srgb, var(--wsf-text) 40%, transparent);
}
body.wsf-tpl-estudi .wsf-main .bs-cerca input[type="search"]:focus,
body.wsf-tpl-estudi .wsf-main .bs-cerca input[type="search"]:focus-visible {
    outline: none;
    border-color: var(--wsf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsf-accent) 28%, transparent);
}

/* Les fitxes amagades pel cercador, amagades de debo.
   Aquestes targetes son `display: flex` per poder posar el preu arran de baix,
   i display guanya al `display: none` que el navegador dona a [hidden]: el
   filtre marcava les fitxes pero es veien totes igual. */
body.wsf-tpl .wsf-main .bs-rental-cos .wsf-card[hidden] { display: none; }
body.wsf-tpl .wsf-main .bs-grup[hidden] { display: none; }

/* El titular de pagina, a l'esquerra i sense filet.
   La plantilla el centra i li posa una ratlla fina a sota. Aqui el web va tot
   alineat a l'esquerra —el hero, les seccions, el cataleg— i el titular
   centrat trencava la columna; el filet, a mes, repetia la funcio del filet
   taronja de la seccio que ve just a sota. */
body.wsf-tpl-estudi .wsf-titol-gran {
    display: block;
    text-align: left;
    /* El contenidor del titular es un element FLEX del llenc, i com a tal
       s'encongia fins a l'ample del text; el `margin: 0 auto` de la plantilla
       el centrava. Amb width 100% ocupa la fila i el titular arrenca a la
       mateixa vertical que la resta del contingut. */
    width: 100%;
    max-width: var(--wsf-ample, 1440px);
    margin-inline: auto;
}
body.wsf-tpl-estudi .wsf-titol-gran h1 {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}
body.wsf-tpl-estudi .wsf-titol-gran::after { content: none; display: none; }

/* Transporte: dues pestanyes en comptes de quatre. */
body.wsf-tpl .wsf-main .bs-platos-tabs.bs-tabs-2 { grid-template-columns: repeat(2, 1fr); }

/* Transporte amb tres furgonetes (18/09/2026): tres columnes tambe al mobil,
   que en dues la tercera quedava sola a sota. Desfa les vores de la graella 2x2
   que el bloc de 760px posa a les pestanyes dels platos. */
body.wsf-tpl .wsf-main .bs-platos-tabs.bs-tabs-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
    body.wsf-tpl .wsf-main .bs-platos-tabs.bs-tabs-3 { grid-template-columns: repeat(3, 1fr); }
    body.wsf-tpl .wsf-main .bs-tabs-3 .bs-plato-tab {
        border-bottom: 0;
        padding-inline: calc(var(--wsf-sp) * 0.5);
        font-size: 0.8rem;
    }
    body.wsf-tpl .wsf-main .bs-tabs-3 .bs-plato-tab:nth-child(2) { border-right: 1px solid var(--wsf-line); }
}

/* La fitxa del vehicle: caracteristiques, serveis opcionals, que inclou i
   tarifes, en quatre columnes. */
body.wsf-tpl .wsf-main .bs-veh-graella {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--wsf-sp) * 2);
    align-items: start;
}
body.wsf-tpl .wsf-main .bs-veh-bloc h4 {
    margin: 0 0 0.5em;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wsf-accent);
}
body.wsf-tpl .wsf-main .bs-veh-bloc .bs-plato-llista { font-size: 0.9rem; }
body.wsf-tpl .wsf-main .bs-plato-cos .bs-plato-fitxes { margin-top: calc(var(--wsf-sp) * 2); }

@media (max-width: 1100px) {
    body.wsf-tpl .wsf-main .bs-veh-graella { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    body.wsf-tpl .wsf-main .bs-veh-graella { grid-template-columns: 1fr; }
}

/* Les furgonetes de les pestanyes de Transporte. Van amb currentColor, o sigui
   que a la pestanya oberta es pinten del mateix negre que el nom damunt del
   taronja. */
body.wsf-tpl .wsf-main .bs-veh-icona {
    display: block;
    width: 62px;
    height: auto;
    margin: 0 auto 0.15em;
    color: currentColor;
    opacity: 0.85;
}
body.wsf-tpl .wsf-main .bs-plato-tab.is-actiu .bs-veh-icona,
body.wsf-tpl .wsf-main .bs-plato-tab[aria-selected="true"] .bs-veh-icona { opacity: 1; }
@media (max-width: 620px) {
    body.wsf-tpl .wsf-main .bs-veh-icona { width: 48px; }
}

/* El punt que separa els dos credits del peu. */
body.wsf-tpl-estudi .wsf-footer-baix .bs-fet-amb-sep { margin: 0 0.55em; opacity: 0.5; }

/* La planta de cada plato, a la pestanya. Igual que les furgonetes: vector,
   currentColor i mida discreta perque acompanyi el nom sense competir-hi. */
body.wsf-tpl .wsf-main .bs-plato-icona {
    display: block;
    width: 52px;
    height: auto;
    margin: 0 auto 0.2em;
    opacity: 0.8;
}
body.wsf-tpl .wsf-main .bs-plato-tab.is-actiu .bs-plato-icona,
body.wsf-tpl .wsf-main .bs-plato-tab[aria-selected="true"] .bs-plato-icona { opacity: 1; }
@media (max-width: 620px) {
    body.wsf-tpl .wsf-main .bs-plato-icona { width: 40px; }
}

/* Una mica d'aire entre el titol de la seccio i la tira de fotos. */
body.wsf-tpl .wsf-main .wsf-galeria { margin-top: calc(var(--wsf-sp) * 2.2); }

/* Les fletxes dels passis, quietes en passar-hi per sobre.
   La plantilla fa `transform: translateY(-1px)` a TOT boto en hover, com a
   petit gest d'aixecar-se. Aquestes fletxes ja fan servir el transform per
   centrar-se verticalment (translateY(-50%)), i el de la plantilla el
   substituia: en passar-hi el ratoli baixaven de cop mig botó. */
body.wsf-tpl .wsf-main .bs-esquema-ant:hover,
body.wsf-tpl .wsf-main .bs-esquema-seg:hover,
body.wsf-tpl .wsf-main .bs-esquema-ant:focus-visible,
body.wsf-tpl .wsf-main .bs-esquema-seg:focus-visible,
body.wsf-tpl .wsf-main .bs-vista-ant:hover,
body.wsf-tpl .wsf-main .bs-vista-seg:hover,
body.wsf-tpl .wsf-main .bs-vista-ant:focus-visible,
body.wsf-tpl .wsf-main .bs-vista-seg:focus-visible {
    transform: translateY(-50%);
}

/* El Studio 4 es el gran de la casa —550 m2 ampliables a 700, mes el
   parking— i el seu dibuix ha de dir-ho. La resta comparteixen amplada. */
body.wsf-tpl .wsf-main #tab-studio-4 .bs-plato-icona { width: 74px; }
@media (max-width: 620px) {
    body.wsf-tpl .wsf-main #tab-studio-4 .bs-plato-icona { width: 56px; }
}

/* Les fitxes de familia de /es/rental.
   El nom, mes petit, i el bloc de baix —referencies, filet i boto— arran de
   la vora inferior: aixi totes les targetes d'una fila acaben igual encara
   que la llista de subfamilies faci una linia o quatre. */
body.wsf-tpl .wsf-main .bs-familia-card { display: flex; flex-direction: column; }
body.wsf-tpl .wsf-main .bs-familia-card h3 {
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0 0 0.4em;
    padding-top: calc(var(--wsf-sp) * 0.8);
}
body.wsf-tpl .wsf-main .bs-familia-card p { font-size: 0.85rem; line-height: 1.45; }
body.wsf-tpl .wsf-main .bs-familia-card .wsf-dades {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: calc(var(--wsf-sp) * 1.2);
}
body.wsf-tpl .wsf-main .bs-familia-card .wsf-accions { margin-top: calc(var(--wsf-sp) * 1.1); }

/* Pagines legals (18/09/2026): data d'actualitzacio i taula de galetes. */
body.wsf-tpl .wsf-main .bs-legal-data { font-size: 0.85rem; opacity: 0.6; margin-bottom: 1.5em; }
body.wsf-tpl .wsf-main .bs-legal-taula { overflow-x: auto; margin: 0 0 1.5em; }
body.wsf-tpl .wsf-main .bs-legal-taula table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
body.wsf-tpl .wsf-main .bs-legal-taula th,
body.wsf-tpl .wsf-main .bs-legal-taula td { text-align: left; vertical-align: top; padding: 0.55em 0.8em; border-bottom: 1px solid var(--wsf-line); }
body.wsf-tpl .wsf-main .bs-legal-taula th { font-weight: 700; }
body.wsf-tpl .wsf-main .bs-legal h2 { font-size: 1.35rem; line-height: 1.25; margin: 1.8em 0 0.6em; }
body.wsf-tpl .wsf-main .bs-legal h3 { font-size: 1.05rem; margin: 1.4em 0 0.4em; }

/* Banner de galetes de Websfera amb el color corporatiu (18/09/2026). El banner
   llegeix --accent-color, que aquest web no defineix: sense aixo el boto sortia
   verd. Text fosc sobre el taronja, com els altres botons del web. */
#wsf-cookie-consent { --accent-color: var(--wsf-accent); }
body #wsf-cookie-consent .wsf-cookie-accept { color: var(--wsf-on-accent); font-weight: 700; }
body #wsf-cookie-consent .wsf-cookie-icon { color: var(--wsf-accent); }