@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/lato-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lato-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/lato-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/libre-baskerville-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Poiret One";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poiret-one-latin-400-normal.woff2") format("woff2")}

/* =====================================================================
   VARIABLES — valors presos de la web de referència + marca Meridià
   ===================================================================== */
:root{
  --verde:#59643C;          /* títols, text                          */
  --teja:#9A2F0F;           /* enllaços i errors                     */
  --amarillo:#C78A37;       /* marca Meridià: logo, lema, botons     */
  --amarillo-hover:#AE7426; /* botons en passar-hi el ratolí         */
  --arena:#E9E2DC;          /* capçalera, peu, vores                 */
  --fondo:#F9F7F6;          /* fons de pàgina                        */
  --negro:#000000;          /* enllaços legals del peu               */
  --blanco:#FFFFFF;

  --font-texto:"Lato", Arial, sans-serif;
  --font-titulos:"Libre Baskerville", Georgia, serif;
  --font-marca:"Poiret One", "Lato", Arial, sans-serif;

  --texto-size:19px;
  --texto-lh:1.9em;
  --h1-size:37px;
  --h2-size:30px;
  --h3-size:23px;

  --ancho-contenido:999px;
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background-color:var(--fondo);
  color:var(--verde);
  font-family:var(--font-texto);
  font-size:var(--texto-size);
  font-weight:400;
  line-height:var(--texto-lh);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teja);text-decoration:none;background-color:transparent}
a:hover{color:var(--verde)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--teja);outline-offset:2px}
p{margin-top:0;margin-bottom:.9rem}
strong{font-weight:bolder}
h1,h2,h3{color:var(--verde);font-family:var(--font-titulos);font-weight:600;margin-bottom:1rem;margin-top:.5rem}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:10px;top:10px;z-index:999;background:var(--blanco);padding:8px 14px}

/* Nom de la marca dins dels textos: groc com el logo */
.brand-ref,a.brand-ref{color:var(--amarillo)}
a.brand-ref:hover{color:var(--verde)}

/* =====================================================================
   CAPÇALERA (sense menú) — logo Meridià
   ===================================================================== */
.site-header{
  background-color:var(--arena);
  padding:10px 30px 50px 30px;
}
.site-header__inner{max-width:959px;margin:0 auto;display:flex;justify-content:center}
.brand{
  display:flex;align-items:center;justify-content:center;
  width:430px;max-width:100%;
  height:192px;
  color:var(--verde);text-decoration:none;
}
.brand:hover{color:var(--verde)}
.brand__text{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.logo-mark{display:block;width:78px;height:78px;margin-bottom:2px}
.logo-mark__trazo{fill:var(--verde)}
.logo-mark__puntos{fill:var(--amarillo)}
.brand__name{
  font-family:var(--font-marca);
  font-weight:400;
  font-size:50px;
  line-height:1;
  letter-spacing:.12em;
  margin-right:-.12em;
  text-transform:lowercase;
}
.brand__tagline{
  font-family:var(--font-texto);
  font-weight:400;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.3em;
  margin-right:-.3em;
  text-transform:uppercase;
  color:var(--amarillo);
}

/* =====================================================================
   CONTINGUT PRINCIPAL
   ===================================================================== */
.post{margin:20px 0 50px 0;padding-block:0;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.post__inner{max-width:var(--ancho-contenido);margin:0 auto;padding:10px 0}
.post h1{font-size:var(--h1-size);line-height:1.5em;text-align:center;margin:0}
.entry{margin-top:20px}
.entry h2{font-size:var(--h2-size);line-height:1.4em;margin:40px 0 10px}
.entry h3{font-size:var(--h3-size);line-height:1.5em;margin:30px 0 10px}
.entry ul{margin:0;padding:0 0 15px 40px;list-style:disc}
.entry li{margin:0}

/* Botons CTA: grocs, alçada ajustada */
.buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:.5em}
.btn{
  display:inline-block;
  background-color:var(--amarillo);
  color:var(--blanco);
  border:0;
  border-radius:9999px;
  padding:9px calc(1.333em + 2px);
  font-family:var(--font-texto);
  font-size:var(--texto-size);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.01em;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover,.btn:focus{background-color:var(--amarillo-hover);color:var(--blanco)}
.btn[disabled]{opacity:.6;cursor:default}

/* Imatges */
.img-slot{margin:0 auto;width:100%}
.img-slot--1{max-width:800px;margin-top:20px}
.img-slot--2{max-width:900px;margin-bottom:19px}
.img-slot img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:3/2}
.spacer{height:40px}

/* =====================================================================
   FORMULARI DE CONTACTE
   ===================================================================== */
.contact{margin-top:40px}
.contact h2{margin-top:40px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.form__field{display:flex;flex-direction:column;min-width:0}
.form__field--full{grid-column:1 / -1}
.form label{color:var(--verde);font-family:var(--font-texto);font-size:14px;line-height:1.4em;margin-bottom:6px}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea{
  width:100%;
  font-family:var(--font-texto);
  font-size:var(--texto-size);
  font-weight:400;
  line-height:var(--texto-lh);
  color:var(--verde);
  background-color:var(--blanco);
  border:1px solid var(--arena);
  border-radius:5pt;
  padding:.5rem 1rem;
  min-height:48px;
  -webkit-appearance:none;appearance:none;
}
.form textarea{min-height:160px;resize:vertical}
.form input[type="text"]:focus,.form input[type="email"]:focus,.form input[type="tel"]:focus,.form textarea:focus{border-color:var(--amarillo);outline:none;box-shadow:0 0 0 3px rgba(199,138,55,.18)}
.form [aria-invalid="true"]{border-color:var(--teja)}
.form__check{display:flex;align-items:flex-start;gap:10px}
.form__check input{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--verde)}
.form__check label{margin:0;font-size:14px}
.form__check label a{color:var(--amarillo);font-weight:700}
.form__check label a:hover{color:var(--verde)}
.form__error{color:var(--teja);font-size:14px;line-height:1.4em;margin-top:4px}
.form__error:empty{display:none}
.form__actions{grid-column:1 / -1;display:flex;justify-content:center}
.form__status{grid-column:1 / -1;text-align:center;font-size:16px;line-height:1.5em;margin:0}
.form__status:empty{display:none}
.form__status--error{color:var(--teja)}
.form__legal{grid-column:1 / -1;font-size:12.5px;line-height:1.55;margin:0;padding:14px 16px;border:1px solid var(--arena);background:var(--blanco)}
.form__legal p{margin:0}
.form__legal a{color:var(--verde);text-decoration:underline}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* =====================================================================
   PEU
   ===================================================================== */
.site-footer{
  background-color:var(--arena);
  min-height:400px;
  display:flex;align-items:center;justify-content:center;
  padding:40px 10px;
  text-align:center;
}
.site-footer__inner{width:100%;max-width:1260px}
.footer-brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  height:150px;margin:0 auto 20px;
  font-family:var(--font-marca);font-weight:400;font-size:40px;line-height:1;
  letter-spacing:.12em;text-transform:lowercase;padding-left:.12em;
  color:var(--verde);
}
.footer-brand .logo-mark{width:80px;height:80px;margin:0;margin-left:-.12em}
.footer-tagline{
  font-family:var(--font-texto);
  font-size:18px;font-weight:400;
  text-transform:uppercase;letter-spacing:5px;
  line-height:1.3;
  color:var(--amarillo);
  margin:0 0 20px;
}
.footer-divider{padding:15px 0;margin-bottom:20px}
.footer-divider span{display:block;width:50%;margin:0 auto;border-top:1px solid var(--verde)}
.footer-contact{font-style:normal;font-size:15px;line-height:1.8;margin:0 0 14px}
.footer-contact a{color:var(--verde)}
.footer-contact a:hover{color:var(--teja)}
.footer-text{font-family:var(--font-texto);font-size:13px;color:var(--verde);line-height:var(--texto-lh);margin:0}
.footer-text a{color:var(--negro)}
.footer-text a:hover{color:var(--verde)}

/* =====================================================================
   TEXTOS LEGALS (finestres dins de la mateixa pàgina)
   ===================================================================== */
.legal{
  width:min(760px, calc(100% - 24px));
  max-height:calc(100% - 40px);
  padding:0;
  border:0;
  background:var(--fondo);
  color:var(--verde);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.legal::backdrop{background:rgba(26,26,26,.55)}
.legal__head{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--arena);
  padding:14px 24px;
}
.legal__head h2{font-size:22px;line-height:1.3;margin:0}
.legal__close{
  flex:0 0 auto;
  border:1px solid var(--verde);border-radius:9999px;background:transparent;color:var(--verde);
  font:700 14px/1 var(--font-texto);padding:9px 16px;cursor:pointer;
}
.legal__close:hover{background:var(--verde);color:var(--blanco)}
.legal__body{padding:20px 24px 28px;font-size:15.5px;line-height:1.7}
.legal__body h3{font-size:17px;line-height:1.4;margin:22px 0 6px}
.legal__body p,.legal__body ul{margin:0 0 10px}
.legal__body ul{padding-left:22px}
.legal__body .updated{font-size:13px;opacity:.85;margin-top:18px}

/* =====================================================================
   RESPONSIVE — punts de tall de la referència (1024 px i 736 px)
   ===================================================================== */
@media (max-width:1024px){
  :root{--h1-size:33px;--h2-size:36px;--h3-size:32px}
  .site-header{padding:0 25px}
  .site-header__inner{max-width:none;justify-content:flex-start}
  .brand{width:275px;height:142px}
  .brand__text{align-items:flex-start;gap:9px}
  .logo-mark{width:54px;height:54px;margin-left:-6px}
  .brand__name{font-size:40px}
  .brand__tagline{font-size:10px}
}
@media (max-width:736px){
  :root{--texto-size:18px;--h1-size:29px;--h2-size:35px}
  .site-header{padding:0 3px}
  .brand{width:auto;min-width:180px;height:auto;padding:16px 12px}
  .logo-mark{width:44px;height:44px}
  .brand__name{font-size:clamp(30px,9vw,36px);letter-spacing:.1em}
  .brand__tagline{font-size:clamp(7.5px,2.2vw,9px);letter-spacing:.2em}
  .entry ul{padding-left:28px}
  .form{grid-template-columns:1fr}
  .footer-tagline{font-size:15px;letter-spacing:3px;margin-bottom:25px}
  .btn{max-width:100%}
  .legal__head{padding:12px 16px}
  .legal__head h2{font-size:18px}
  .legal__body{padding:16px 16px 24px;font-size:15px}
}

/* =====================================================================
   AFEGITS
   ===================================================================== */
/* Dada pendent de completar al panell (titular, NIF) */
mark.pendent{background:#ffe58a;color:#5c4400;padding:0 4px;font-weight:700}
/* Missatge correcte del formulari */
.form__status--ok{color:var(--verde);font-weight:700}


/* =====================================================================
   v2 · ESTÈTICA I ANIMACIONS (mateix concepte: colors, tipografies i textos originals)
   Còpia de la versió anterior: _backup-v1/ (i al servidor /root/shiatsu-backup-v1-…tgz)
   ===================================================================== */
:root{
  --amarillo-btn:#A86F22;        /* botons: el mateix groc, una mica més fosc (contrast del text blanc ≥ 4:1) */
  --amarillo-btn-hover:#8F5C16;
  --amarillo-text:#956118;       /* "Meridià" dins dels textos (contrast 4.9:1 sobre el fons) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --sombra:0 22px 45px -28px rgba(70,79,40,.55);
  --lectura:46rem;               /* amplada còmoda de lectura (~70 caràcters) */
}
::selection{background:rgba(199,138,55,.28);color:var(--verde)}

/* --- Lectura: columna de text més estreta; títol i imatges conserven l'amplada --- */
.entry > :not(figure):not(.buttons):not(.spacer),
.contact > h2,
.form{max-width:var(--lectura);margin-left:auto;margin-right:auto}
.entry ul{padding-left:1.4em}
.entry li{margin:.15em 0;padding-left:.25em}
.entry li::marker{color:var(--amarillo);font-size:1.15em}
.entry li strong{color:var(--verde)}

/* --- Títols de secció: motiu de tres punts com el logo --- */
.entry h2:not(#contacte-titol)::before,
#contacte-titol::before{
  content:"";display:block;width:46px;height:10px;margin:0 0 14px;
  background:
    radial-gradient(circle,var(--amarillo) 4.4px,transparent 5px) 0 50%/12px 10px no-repeat,
    radial-gradient(circle,var(--amarillo) 3.4px,transparent 4px) 17px 50%/10px 10px no-repeat,
    radial-gradient(circle,var(--amarillo) 2.5px,transparent 3px) 31px 50%/8px 10px no-repeat,
    radial-gradient(circle,var(--amarillo) 1.8px,transparent 2.2px) 42px 50%/6px 10px no-repeat;
  opacity:.9;
}
.entry h2{margin-top:64px}

/* --- "Meridià" dins del text --- */
.brand-ref,a.brand-ref{color:var(--amarillo-text)}
a.brand-ref{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease),color .2s}
a.brand-ref:hover{background-size:100% 1px}

/* --- Capçalera --- */
.site-header{background:linear-gradient(180deg,var(--arena) 0%,#efe9e3 100%);position:relative}
.site-header::after{content:"";position:absolute;left:50%;bottom:0;width:min(220px,40%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(89,100,60,.35),transparent)}
.logo-mark__puntos circle{transform-box:fill-box;transform-origin:center}

/* --- Imatges: vores suaus i ombra --- */
.img-slot img{border-radius:14px;box-shadow:var(--sombra)}
.img-slot{position:relative}

/* --- Botons --- */
.btn{background-color:var(--amarillo-btn);box-shadow:0 8px 18px -10px rgba(143,92,22,.65);transition:background-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.btn:hover,.btn:focus{background-color:var(--amarillo-btn-hover)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(143,92,22,.75)}
.btn:active{transform:translateY(0) scale(.98)}
.btn[aria-busy="true"]{position:relative;color:transparent!important}
.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.buttons{margin:28px 0 8px}

/* --- Formulari --- */
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form textarea{transition:border-color .2s,box-shadow .2s}
.form input:hover,.form textarea:hover{border-color:#d8cdc2}
.form__status--ok{background:rgba(89,100,60,.08);border-radius:10px;padding:14px 18px;animation:entra .5s var(--ease) both}
.form__status--error{animation:entra .35s var(--ease) both}
.form__legal{border-radius:10px}

/* --- Peu --- */
.footer-divider span{transform-origin:center;transition:transform 1.1s var(--ease) .15s}
.js .site-footer:not(.is-in) .footer-divider span{transform:scaleX(0)}

/* --- Barra de lectura (un "meridià" que es va omplint) --- */
.progres{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--verde),var(--amarillo));transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* --- Botó flotant de reserva (apareix en baixar; s'amaga a la zona de contacte) --- */
.float-cta{position:fixed;z-index:55;right:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:9999px;background:var(--amarillo-btn);color:#fff;font:700 16px/1.2 var(--font-texto);
  box-shadow:0 14px 30px -14px rgba(70,79,40,.7);white-space:nowrap;min-height:46px;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .2s}
.float-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.float-cta[hidden]{display:none}
.float-cta:hover,.float-cta:focus{background:var(--amarillo-btn-hover);color:#fff}
.float-cta svg{width:18px;height:18px;flex:none}
@media (max-width:736px){.float-cta{left:50%;right:auto;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);font-size:15px;padding:11px 18px}.float-cta.is-on{transform:translate(-50%,0)}}

/* --- Textos legals: entrada suau --- */
.legal[open]{animation:entra .35s var(--ease) both}
.legal[open]::backdrop{animation:fosc .3s ease both}
@keyframes fosc{from{opacity:0}}

/* --- Aparició en fer scroll (només si hi ha JavaScript) --- */
@keyframes entra{from{opacity:0;transform:translateY(14px)}}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .img-slot.reveal img{transform:scale(1.035);transition:transform 1.2s var(--ease) var(--d,0s)}
.js .img-slot.reveal.is-in img{transform:none}
/* Xarxa de seguretat: si el JavaScript falla, tot apareix igualment */
.js:not(.js-ok) .reveal{animation:entra .6s var(--ease) 1.2s both}

/* Capçalera i títol en carregar */
.js .brand__text > *{animation:entra .7s var(--ease) both}
.js .brand__name{animation-delay:.08s}
.js .brand__tagline{animation-delay:.16s}
.js .post h1{animation:entra .8s var(--ease) .2s both}
/* Logo: els punts apareixen d'un en un i després "bateguen" (Connecta amb el teu batec) */
.js .site-header .logo-mark__puntos circle{animation:punt .5s var(--ease) both,batec 7s ease-in-out 2.2s infinite}
.js .site-header .logo-mark__puntos circle:nth-child(1){animation-delay:.35s,2.2s}
.js .site-header .logo-mark__puntos circle:nth-child(2){animation-delay:.45s,2.28s}
.js .site-header .logo-mark__puntos circle:nth-child(3){animation-delay:.55s,2.36s}
.js .site-header .logo-mark__puntos circle:nth-child(4){animation-delay:.65s,2.44s}
@keyframes punt{from{transform:scale(0);opacity:0}}
@keyframes batec{0%,14%,28%,100%{transform:scale(1)}7%{transform:scale(1.28)}21%{transform:scale(1.16)}}
.footer-brand:hover .logo-mark__puntos circle{animation:batec 1.4s ease-in-out}

/* Sense moviment si el sistema ho demana */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .img-slot.reveal img{transform:none}
  .js .site-footer:not(.is-in) .footer-divider span{transform:none}
  .progres{display:none}
}

/* =====================================================================
   v2.1 — capçalera en mòbil: logo centrat i en horitzontal
   (marca a l'esquerra, nom i lema apilats a la dreta; capçalera més baixa)
   ===================================================================== */
@media (max-width:1024px){
  .site-header__inner{justify-content:center}
  .brand__text{align-items:center}
  .logo-mark{margin-left:0}
}
@media (max-width:736px){
  .site-header{padding:0 16px}
  .brand{min-width:0;padding:20px 0 24px}
  .brand__text{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:14px;row-gap:7px;align-items:center;text-align:left}
  .brand__text .logo-mark{grid-row:1/3;width:54px;height:54px;margin:0 0 0 -4px}
  .brand__name{align-self:end;font-size:clamp(30px,9.4vw,36px);letter-spacing:.09em;margin-right:0}
  .brand__tagline{align-self:start;font-size:clamp(7.5px,2.15vw,8.5px);letter-spacing:.16em;margin-right:0}
}