/* Finestra: les tres plantilles (aparador, obrador, despatx). L'estructura és fixa; la pell entra per variables.
   Cada plantilla té una superfície gran per a un material (.k-material) i dues parelles de lletra (data-lletra a/b). */

/* ---------- lletres ---------- */
[data-plantilla=aparador][data-lletra=a]{--f-titol:"Young Serif",Georgia,serif;--f-text:"Newsreader",Georgia,serif;--f-boto:"Newsreader",Georgia,serif;--f-cita:"Newsreader",Georgia,serif;--cita-estil:italic}
[data-plantilla=aparador][data-lletra=b]{--f-titol:"Cormorant Garamond",Georgia,serif;--titol-pes:500;--titol-mida:1.14;--titol-track:-.005em;--f-text:"Jost","Helvetica Neue",Arial,sans-serif;--f-boto:"Jost","Helvetica Neue",Arial,sans-serif;--f-cita:"Cormorant Garamond",Georgia,serif;--cita-estil:italic;--cita-mida:1.5rem}
[data-plantilla=obrador][data-lletra=a]{--f-titol:"Jost","Helvetica Neue",Arial,sans-serif;--titol-pes:500;--titol-case:uppercase;--titol-track:.005em;--titol-mida:.9;--f-text:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;--f-boto:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif}
[data-plantilla=obrador][data-lletra=b]{--f-titol:"Young Serif",Georgia,serif;--f-text:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;--f-boto:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif}
[data-plantilla=despatx][data-lletra=a]{--f-titol:"Newsreader",Georgia,serif;--titol-pes:500;--titol-track:-.02em;--f-text:"Jost","Helvetica Neue",Arial,sans-serif;--f-boto:"Jost","Helvetica Neue",Arial,sans-serif;--radi-boto:999px}
[data-plantilla=despatx][data-lletra=b]{--f-titol:"Cormorant Garamond",Georgia,serif;--titol-pes:600;--titol-mida:1.1;--titol-track:-.005em;--f-text:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;--f-boto:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif}
[data-lletra=b][data-plantilla=aparador] body,[data-plantilla=despatx][data-lletra=a] body{font-size:1.06rem;line-height:1.65}

/* preus visibles o no */
[data-preus=no] .f-preu,[data-preus=no] .f-visita-preu{display:none}

/* ---------- comú ---------- */
.f-s{padding-block:clamp(56px,8vw,104px)}
.f-cap-seccio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.f-cap-seccio p{color:var(--tinta-2);max-width:46ch}
@media (max-width:760px){.f-cap-seccio{grid-template-columns:1fr}}
.f-gran{font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.45}
.f-botons{display:flex;flex-wrap:wrap;gap:10px}
.f-preu{font-family:var(--f-boto);font-weight:500;font-size:.98rem;color:var(--marca);white-space:nowrap;font-variant-numeric:tabular-nums}
.f-nota{font-family:var(--f-boto);font-size:.9rem;color:var(--tinta-2);margin-top:16px}
.f-correu{margin-top:18px;font-family:var(--f-boto);font-size:.95rem;color:var(--tinta-2)}
.f-contacte-gr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:start}
.f-contacte-txt{display:grid;gap:18px;justify-items:start}
.f-contacte-txt>p{color:var(--tinta-2);max-width:42ch}
.f-contacte-txt h3{margin-top:18px;font-size:1.15rem}
.f-contacte-txt .k-horari,.f-contacte-txt .k-mapa{width:100%;max-width:440px}
@media (max-width:860px){.f-contacte-gr{grid-template-columns:1fr}}
/* full de paper: on va el que s'ha de llegir amb calma (serveis, primera visita) */
.f-full{background:color-mix(in srgb,var(--fons) 55%,#fff);border:1px solid var(--linia);border-radius:var(--radi);padding:clamp(22px,4vw,48px);box-shadow:0 22px 50px -34px rgba(0,0,0,.35)}
.f-full-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px clamp(24px,5vw,64px);align-items:end;margin-bottom:clamp(20px,3vw,32px)}
.f-full-cap p{color:var(--tinta-2)}
@media (max-width:760px){.f-full-cap{grid-template-columns:1fr}}
/* material amb un vel del seu color, perquè el text s'hi llegeixi sense amagar la textura */
.k-material::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--mat-color,var(--fons-2)) var(--mat-vel,45%),transparent);pointer-events:none}
.k-material>.k-mur{position:relative;z-index:1}

/* ================= APARADOR ================= */
[data-plantilla=aparador]{--prop-portada:21/9}
@media (max-width:760px){[data-plantilla=aparador]{--prop-portada:4/3}}
/* a l'aparador el nom ja és al rètol: a la capçalera només hi queda què és i on */
[data-plantilla=aparador] .k-logo b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-plantilla=aparador] .k-logo small{font-size:.95rem}
.f-aparador-s1{padding-top:8px;padding-bottom:clamp(48px,7vw,88px)}
/* el rètol de sobre l'aparador: el nom del negoci on aniria a la façana */
.f-retol{background:var(--marca);color:var(--sobre-marca);padding:clamp(18px,3vw,30px) clamp(20px,4vw,44px);border-radius:var(--radi) var(--radi) 0 0}
.f-retol h1{color:inherit;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;font-size:inherit}
.f-retol-nom{font-size:calc(clamp(2.1rem,5.6vw,4.3rem)*var(--titol-mida));line-height:1}
.f-retol-sub{font-family:var(--f-boto);font-size:clamp(.95rem,1.6vw,1.1rem);letter-spacing:0;text-transform:none;opacity:.88}
.f-vidre{border:clamp(6px,1vw,10px) solid var(--marca);border-top:0;border-radius:0 0 var(--radi) var(--radi);overflow:hidden}
.f-vidre .k-img{border-radius:0}
.f-entrada{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px clamp(24px,5vw,72px);align-items:start;margin-top:clamp(24px,3vw,36px)}
.f-entrada-dreta{display:grid;gap:16px;justify-items:start}
@media (max-width:760px){.f-entrada{grid-template-columns:1fr}}
.f-trobaras{background:var(--fons-2)}
.f-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.f-item{display:grid;gap:16px;align-content:start}
.f-item-txt{display:grid;gap:6px}
.f-item-txt h3{display:inline}
.f-item-txt p{color:var(--tinta-2);font-size:1rem}
@media (max-width:760px){
  .f-items{grid-template-columns:1fr;gap:22px}
  .f-item{grid-template-columns:118px minmax(0,1fr);align-items:start}
}
.f-arribar{--mat-vel:30%}
.f-arribar-gr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,3vw,28px);align-items:start}
@media (max-width:860px){.f-arribar-gr{grid-template-columns:1fr}}
.f-placa{background:color-mix(in srgb,var(--fons) 95%,transparent);padding:clamp(22px,3.4vw,40px);border-radius:var(--radi);box-shadow:0 24px 50px -30px rgba(0,0,0,.55);display:grid;gap:18px;align-content:start}
.f-placa h3{font-size:1.25rem}
.f-placa-on p{color:var(--tinta-2);font-size:1rem}
.f-ressenyes h2{margin-bottom:clamp(28px,4vw,48px);max-width:16ch}
.f-ressenyes .k-ressenya blockquote{font-family:var(--f-cita,var(--f-text));font-style:var(--cita-estil,normal);font-size:var(--cita-mida,1.25rem);line-height:1.45;color:var(--tinta)}
.f-ressenyes .k-ressenya{margin:0;padding-top:20px;border-top:2px solid var(--marca)}
.f-contacte{background:var(--fons-2)}

/* ================= OBRADOR ================= */
.f-obrador-s1{padding-top:clamp(8px,2vw,24px)}
.f-obrador-cap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,64px);align-items:center;margin-bottom:clamp(40px,6vw,72px)}
.f-obrador-txt{display:grid;gap:18px;justify-items:start}
.f-obrador-txt .f-gran{color:var(--tinta-2);max-width:34ch}
/* el telèfon és el titular: és el que ha de fer qui entra */
.f-telefon{font-family:var(--f-titol);font-weight:var(--titol-pes);font-size:clamp(2.3rem,6.4vw,4.4rem);line-height:1;letter-spacing:-.01em;color:var(--marca);text-decoration:none;font-variant-numeric:tabular-nums;
  background:linear-gradient(var(--marca-2),var(--marca-2)) 0 92%/100% .16em no-repeat;padding-bottom:.08em}
.f-telefon:hover{color:var(--tinta)}
.f-avis{font-family:var(--f-boto);font-size:.95rem;padding-left:14px;border-left:3px solid var(--marca-2)}
.f-objecte{max-width:440px;justify-self:end;width:100%}
@media (max-width:760px){.f-obrador-cap{grid-template-columns:1fr}.f-objecte{order:-1;max-width:none;--prop:16/10!important}}
.f-serveis{list-style:none;margin:0;padding:0}
.f-serveis li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;border-top:1px solid var(--linia)}
.f-serveis li:last-child{border-bottom:1px solid var(--linia)}
.f-serveis p{color:var(--tinta-2);font-size:1rem;margin-top:4px;max-width:60ch}
.f-serveis h3{font-size:calc(1.2rem*var(--titol-mida))}
@media (max-width:560px){.f-serveis li{flex-direction:column;gap:6px}}
.f-treballs{background:var(--fons-2)}
.f-treballs-gr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,44px)}
@media (max-width:760px){.f-treballs-gr{grid-template-columns:1fr}}
.f-treball{margin:0}
.f-parell{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.f-ad{position:relative}
.f-ad>span{position:absolute;left:10px;top:10px;z-index:1;font-family:var(--f-boto);font-size:.8rem;font-weight:500;padding:.25em .65em;border-radius:var(--radi);background:var(--tinta);color:var(--fons)}
.f-ad+.f-ad>span{background:var(--marca);color:var(--sobre-marca)}
.f-treball figcaption{margin-top:14px;font-size:1rem;color:var(--tinta-2)}
.f-treball figcaption b{font-weight:500;color:var(--tinta);font-family:var(--f-boto)}
/* zona: els pobles van escrits sobre el material, com el rètol d'una furgoneta o una fusta marcada */
.f-zona{color:var(--sobre-mat,var(--tinta));--mat-vel:62%}
.f-zona h2{color:inherit}
.f-rotul{padding-block:clamp(8px,2vw,24px);max-width:900px}
.f-pobles{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-wrap:wrap;font-family:var(--f-titol);font-weight:var(--titol-pes);text-transform:var(--titol-case);font-size:calc(clamp(1.45rem,3.4vw,2.5rem)*var(--titol-mida));line-height:1.25}
.f-pobles li:not(:last-child)::after{content:"·";margin:0 .4em;opacity:.55}
.f-zona-nota{font-family:var(--f-boto);font-size:1rem;max-width:56ch;opacity:.92}
.f-zona-nota b{font-weight:500}
.f-passos-curts{margin:0;padding-left:1.2em;display:grid;gap:8px;color:var(--tinta-2)}
.f-passos-curts li::marker{color:var(--marca);font-family:var(--f-boto);font-weight:500}

/* ================= DESPATX ================= */
.f-despatx-s1{padding-top:clamp(8px,2vw,24px)}
.f-despatx-cap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-areas:"retrat txt" "retrat espai";gap:clamp(24px,4vw,56px) clamp(28px,5vw,72px);align-items:start}
.f-retrat{grid-area:retrat}
.f-despatx-txt{grid-area:txt;display:grid;gap:22px;justify-items:start}
.f-espai{grid-area:espai}
.f-despatx-txt h1{font-size:calc(clamp(2.2rem,5vw,3.8rem)*var(--titol-mida))}
/* placa amb el nom i la titulació, com la de la porta del despatx */
.f-placa-nom{width:100%;padding:16px 0;border-block:1px solid var(--linia)}
.f-nom{font-family:var(--f-titol);font-weight:var(--titol-pes);font-size:calc(1.5rem*var(--titol-mida));color:var(--marca);line-height:1.2}
.f-titols{list-style:none;margin:8px 0 0;padding:0;font-family:var(--f-boto);font-size:.95rem;color:var(--tinta-2);display:grid;gap:2px}
.f-bio{max-width:52ch}
@media (max-width:760px){
  .f-despatx-cap{grid-template-columns:1fr;grid-template-areas:"txt" "retrat" "espai"}
  .f-retrat{max-width:420px}
}
.f-dserveis{background:var(--fons-2)}
.f-dserveis-ll{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,64px)}
.f-dserveis-ll li{padding:22px 0;border-top:1px solid var(--linia);display:grid;gap:6px;align-content:start}
.f-dserveis-ll p{color:var(--tinta-2);font-size:1rem}
.f-dserveis-ll .f-dades{display:flex;gap:16px;font-family:var(--f-boto);font-size:.95rem;color:var(--tinta)}
@media (max-width:760px){.f-dserveis-ll{grid-template-columns:1fr}}
.f-visita{--mat-vel:25%}
.f-passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,32px)}
.f-passos li{border-top:2px solid var(--marca);padding-top:16px;display:grid;gap:4px;align-content:start}
.f-passos b{font-family:var(--f-titol);font-weight:var(--titol-pes);font-size:calc(1.3rem*var(--titol-mida));line-height:1.2}
.f-durada{font-family:var(--f-boto);font-size:.88rem;color:var(--marca);font-weight:500}
.f-passos p{font-size:1rem;color:var(--tinta-2);margin-top:6px}
@media (max-width:860px){.f-passos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.f-passos{grid-template-columns:1fr}}
.f-visita-peu{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:clamp(24px,3vw,36px);padding-top:18px;border-top:1px solid var(--linia);font-size:1rem}
.f-visita-peu b{font-family:var(--f-boto);font-weight:500}
.f-visita-preu{font-family:var(--f-boto);font-weight:500;color:var(--marca)}