/* Kit de Portalada. Peces comunes de totes les webs: base, botons, capçalera amb idiomes, buits d'imatge,
   horari obert/tancat, ressenyes, mapa, formulari Netlify, barra de trucar al mòbil, legal i marca d'exemple.
   Els colors i les lletres de cada client entren per variables (--fons, --tinta, --marca, --f-titol, --f-text). */

@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/young-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/familjen-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/familjen-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}

:root{
  --fons:#fbf8f2;--fons-2:#efe9de;--tinta:#22201d;--marca:#3b5b4a;--sobre-marca:#fff;--marca-2:var(--marca);
  --tinta-2:color-mix(in srgb,var(--tinta) 74%,var(--fons));
  --linia:color-mix(in srgb,var(--tinta) 16%,transparent);
  --f-titol:Georgia,"Times New Roman",serif;--f-text:Georgia,"Times New Roman",serif;--f-boto:var(--f-text);
  --titol-pes:400;--titol-case:none;--titol-track:-.01em;--titol-mida:1;
  --radi:4px;--ample:1120px;--facil:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* en pantalla gran, tot un 10 % més gran, com la web de Portalada */
@media (min-width:1060px){html{zoom:1.1}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--fons);color:var(--tinta);font-family:var(--f-text);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
p{margin:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--marca);outline-offset:3px}
h1,h2,h3{font-family:var(--f-titol);font-weight:var(--titol-pes);text-transform:var(--titol-case);letter-spacing:var(--titol-track);line-height:1.06;margin:0;text-wrap:balance;color:var(--tinta)}
h1{font-size:calc(clamp(2.4rem,6.4vw,4.6rem)*var(--titol-mida))}
h2{font-size:calc(clamp(1.9rem,4.2vw,3rem)*var(--titol-mida))}
h3{font-size:calc(1.35rem*var(--titol-mida));line-height:1.18}
.k-mur{max-width:var(--ample);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.k-ocult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* botons: el que es pot tocar va en el color de marca, ple */
.k-boto{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-boto);font-weight:500;font-size:1rem;line-height:1.2;
  text-decoration:none;padding:.9em 1.5em;border-radius:var(--radi-boto,var(--radi));border:1.5px solid var(--marca);background:var(--marca);color:var(--sobre-marca);cursor:pointer;
  transition:transform .25s var(--facil),background-color .25s ease,color .25s ease}
.k-boto:hover{transform:translateY(-2px)}
.k-boto:active{transform:none}
.k-boto.buit{background:transparent;color:var(--tinta);border-color:color-mix(in srgb,var(--tinta) 40%,transparent)}
.k-boto.buit:hover{border-color:var(--marca)}
.k-boto[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.k-boto svg{width:1.15em;height:1.15em;flex:none}
.k-fletxa{font-family:var(--f-boto);font-weight:500;text-decoration:none;color:var(--marca);display:inline-flex;gap:.4em;align-items:center}
.k-fletxa:hover{text-decoration:underline}

/* capçalera: logo o nom, idiomes i l'acció principal */
.k-cap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.k-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta);font-family:var(--f-titol);font-size:1.3rem;line-height:1.1;text-transform:var(--titol-case);letter-spacing:var(--titol-track)}
.k-logo img{height:44px;width:auto}
.k-logo b{display:block;font-weight:inherit}
.k-logo small{display:block;font-family:var(--f-text);font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--tinta-2)}
.k-cap-dreta{display:flex;align-items:center;gap:14px}
.k-idiomes{display:flex;gap:2px;font-family:var(--f-boto);font-size:.88rem}
.k-idiomes a{text-decoration:none;padding:.3em .55em;border-radius:var(--radi);color:var(--tinta-2)}
.k-idiomes a[aria-current="true"]{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--marca)}
.k-cap .k-boto{padding:.7em 1.2em;font-size:.95rem}
@media (max-width:760px){.k-cap .k-boto{display:none}}

/* buit d'imatge: mentre no hi ha la foto, el lloc queda marcat amb el nom del fitxer */
.k-img{position:relative;margin:0;overflow:hidden;border-radius:var(--radi);aspect-ratio:var(--prop,4/3);background:var(--fons-2)}
.k-img img{width:100%;height:100%;object-fit:cover}
.k-buit{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:16px 18px;
  background:color-mix(in srgb,var(--marca) 7%,var(--fons-2));
  outline:1.5px dashed color-mix(in srgb,var(--tinta) 32%,transparent);outline-offset:-10px;color:var(--tinta-2)}
.k-buit b{font-family:var(--f-boto);font-weight:500;font-size:.95rem;color:var(--tinta);line-height:1.3}
.k-buit span{font-family:var(--f-boto);font-size:.8rem;line-height:1.35}
.k-buit.k-retrat{justify-content:center;align-items:center;text-align:center}
.k-buit.k-retrat b{font-size:1.1rem}
.k-buit.k-retrat svg{width:46px;height:46px;margin-bottom:8px;opacity:.5}

/* material: la superfície gran que porta textura. Sense el fitxer, es veu el color i una etiqueta */
.k-material{position:relative;background-color:var(--mat-color,var(--fons-2));background-size:cover;background-position:center}
.k-material-falta{position:absolute;right:12px;bottom:10px;font-family:var(--f-boto);font-size:.75rem;padding:.25em .6em;border:1px dashed currentColor;border-radius:var(--radi);opacity:.7;color:var(--sobre-mat,var(--tinta));z-index:1}

/* horari: la taula es veu sempre; l'estat (obert/tancat) el calcula el navegador en hora de Catalunya */
.k-horari table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.k-horari th,.k-horari td{text-align:left;font-weight:400;padding:.5em 0;border-bottom:1px solid var(--linia);vertical-align:top}
.k-horari td{text-align:right}
.k-horari tr.avui th,.k-horari tr.avui td{font-weight:500;color:var(--tinta)}
.k-horari tr.avui th::after{content:attr(data-avui);margin-left:.5em;font-size:.75em;font-weight:400;padding:.1em .45em;border-radius:var(--radi);background:var(--marca);color:var(--sobre-marca)}
.k-horari .tancat{color:var(--tinta-2)}
.k-estat{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-boto);font-weight:500;font-size:.95rem}
.k-estat i{width:9px;height:9px;border-radius:50%;background:#b8483a;box-shadow:0 0 0 4px color-mix(in srgb,#b8483a 22%,transparent)}
.k-estat.obert i{background:#3f9a5a;box-shadow:0 0 0 4px color-mix(in srgb,#3f9a5a 22%,transparent)}
.k-estat[hidden]{display:none}

/* ressenyes: el text, qui ho diu i on ho ha dit */
.k-ressenyes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(20px,3vw,36px);margin:0;padding:0;list-style:none}
.k-ressenya blockquote{margin:0;font-size:1.12rem;line-height:1.55}
.k-ressenya figcaption{margin-top:14px;font-family:var(--f-boto);font-size:.88rem;color:var(--tinta-2)}
.k-ressenya figcaption b{font-weight:500;color:var(--tinta)}

/* mapa: no es carrega Google Maps fins que la persona ho demana (així no hi ha cookies de tercers d'entrada) */
.k-mapa{display:grid;gap:14px}
.k-mapa address{font-style:normal}
.k-mapa-marc{position:relative;aspect-ratio:4/3;border-radius:var(--radi);overflow:hidden}
.k-mapa-marc iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.k-mapa-avis{font-family:var(--f-boto);font-size:.82rem;color:var(--tinta-2)}
.k-mapa-carrega{font:inherit;font-family:var(--f-boto);font-size:.95rem;background:none;border:0;padding:0;color:var(--marca);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.k-mapa-carrega[hidden]{display:none}

/* formulari Netlify */
.k-form{display:grid;gap:16px}
.k-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.k-fila{grid-template-columns:1fr}}
.k-camp{display:grid;gap:6px}
.k-camp label{font-family:var(--f-boto);font-size:.9rem;font-weight:500}
.k-camp input,.k-camp select,.k-camp textarea{font:inherit;font-size:1rem;color:var(--tinta);background:color-mix(in srgb,var(--tinta) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--tinta) 24%,transparent);border-radius:var(--radi);padding:.75em .85em;width:100%}
.k-camp input:focus,.k-camp select:focus,.k-camp textarea:focus{outline:2px solid var(--marca);outline-offset:0;border-color:transparent}
.k-camp input[type=file]{padding:.55em}
.k-trampa{position:absolute;left:-9999px}
.k-privacitat{font-family:var(--f-boto);font-size:.85rem;color:var(--tinta-2)}
.k-resposta{font-family:var(--f-boto);font-size:.95rem;min-height:1.4em}
.k-resposta.ok{color:#2f7a47}
.k-resposta.err{color:#a8402f}
.k-form-exemple{font-family:var(--f-boto);font-size:.88rem;padding:.7em .9em;border:1px dashed var(--linia);border-radius:var(--radi);color:var(--tinta-2)}

/* barra del mòbil: trucar sempre a mà */
.k-barra{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .k-barra{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--fons) 92%,transparent);border-top:1px solid var(--linia);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .k-barra .k-boto{flex:1;padding:.8em .6em}
}

/* peu i pàgina legal */
.k-peu{padding-block:36px 40px;border-top:1px solid var(--linia);font-family:var(--f-boto);font-size:.9rem;color:var(--tinta-2);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.k-peu nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.k-peu a{color:var(--tinta-2)}
.k-legal{max-width:720px;padding-block:24px 72px}
.k-legal h1{font-size:calc(clamp(2rem,5vw,3rem)*var(--titol-mida));margin-bottom:24px}
.k-legal h2{font-size:calc(1.5rem*var(--titol-mida));margin:40px 0 12px}
.k-legal h3{font-size:1.1rem;font-family:var(--f-boto);font-weight:500;text-transform:none;letter-spacing:0;margin:22px 0 6px}
.k-legal p+p{margin-top:.8em}
.k-pendent{background:color-mix(in srgb,#e0a020 25%,transparent);padding:0 .2em}

/* marca d'exemple: discreta, però sempre visible */
.k-exemple{position:fixed;left:14px;bottom:14px;z-index:40;font-family:var(--f-boto);font-size:.78rem;line-height:1.2;padding:.45em .8em;border-radius:999px;
  background:color-mix(in srgb,var(--tinta) 86%,transparent);color:var(--fons);pointer-events:none}
@media (max-width:760px){.k-exemple{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:10px}}
/* Idioma: interruptor CA / ES amb els colors de cada web */
.k-sw{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-boto);font-size:.82rem;letter-spacing:.02em;color:var(--tinta-2);-webkit-tap-highlight-color:transparent}
.k-sw-l{transition:color .2s ease}
.k-sw-l.actiu{color:var(--tinta);font-weight:600}
.k-sw-pista{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:var(--marca);box-shadow:inset 0 1px 2px rgba(0,0,0,.22);transition:filter .2s ease}
.k-sw-pista::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.k-sw.es .k-sw-pista::after{transform:translateX(16px)}
.k-sw:hover .k-sw-pista{filter:brightness(1.08)}
.k-sw:hover .k-sw-pista::after{transform:translateX(4px)}
.k-sw.es:hover .k-sw-pista::after{transform:translateX(12px)}
.k-sw:focus-visible{outline:2px solid var(--marca);outline-offset:4px;border-radius:999px}