/*
Theme Name: Vitalmans
Theme URI: https://vitalmans.cat
Author: Vitalmans
Description: Tema a mida per a Vitalmans — centre de fisioteràpia i benestar a Poblenou, Barcelona. Basat en el disseny original en HTML/CSS/JS, adaptat a WordPress amb contingut editable des de l'escriptori.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vitalmans
*/

/* ------------------------------------------------------------------
 * Alga — tipografia pròpia de l'empresa, servida en local (no és de
 * Google Fonts). Fitxers a /fonts/alga/. Vegeu vitalmans_font_choices()
 * a functions.php, on 'Alga' es marca com a lletra de títols per
 * defecte del tema.
 * ---------------------------------------------------------------- */
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-Extralight.woff2') format('woff2');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-ExtralightItalic.woff2') format('woff2');
  font-weight:200;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-LightItalic.woff2') format('woff2');
  font-weight:300;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-RegularItalic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-MediumItalic.woff2') format('woff2');
  font-weight:500;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-Semibold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-SemiboldItalic.woff2') format('woff2');
  font-weight:600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Alga';
  src:url('fonts/alga/Alga-BoldItalic.woff2') format('woff2');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

  :root{
    --sage: #c9d9a8;
    --sage-deep: #aac07f;
    --mint: #3fb88a;
    --navy: #26364a;
    --navy-deep: #1a2635;
    --cream: #f6f5ef;
    --ink: #26364a;
    /* Tipografia de tota la web (lletra + gruix + estil, un joc de 3
       variables per a cada rol de text): es pot canviar des de
       Aparença > Personalitza > "Tipografia Vitalmans" sense tocar
       aquest fitxer — vegeu vitalmans_font_output() a functions.php.
       'Alga' es la lletra propia de l'empresa (servida en local,
       vegeu els @font-face aqui dalt). */
    --font-h1: 'Alga'; --font-h1-weight: 500; --font-h1-style: normal;
    --font-h2: 'Alga'; --font-h2-weight: 500; --font-h2-style: normal;
    --font-h3: 'Alga'; --font-h3-weight: 500; --font-h3-style: normal;
    --font-h4: 'Jost'; --font-h4-weight: 400; --font-h4-style: normal;
    --font-subtitle: 'Libre Franklin'; --font-subtitle-weight: 400; --font-subtitle-style: normal;
    --font-ui: 'Jost'; --font-ui-weight: 400; --font-ui-style: normal;
    --font-nav-brand: 'Alga'; --font-nav-brand-weight: 400; --font-nav-brand-style: italic;
    /* Tipografia pròpia del títol/subtítol de la capçalera de cada
       pàgina de servei i de classe dirigida (independent de la resta
       del lloc) — editable des de Aparença > Personalitza >
       "Tipografia Vitalmans", vegeu vitalmans_font_output() a
       functions.php. */
    --font-servei-hero-heading: 'Alga'; --font-servei-hero-heading-weight: 400; --font-servei-hero-heading-style: normal;
    --font-servei-hero-subtitle: 'Libre Franklin'; --font-servei-hero-subtitle-weight: 500; --font-servei-hero-subtitle-style: normal;
    --font-classe-hero-heading: 'Alga'; --font-classe-hero-heading-weight: 400; --font-classe-hero-heading-style: normal;
    --font-classe-hero-subtitle: 'Libre Franklin'; --font-classe-hero-subtitle-weight: 500; --font-classe-hero-subtitle-style: normal;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:auto; }

  /* ==================================================================
     Animacions d'entrada (scroll reveal)
     ------------------------------------------------------------------
     Fotos, banners i targetes apareixen amb un lleuger desplaçament
     cap amunt (o un fosc + zoom molt subtil, per a fotos grans que ja
     son visibles en carregar la pagina) en lloc de sortir de cop.
     Aquest bloc es col·loca expressament AQUÍ DALT, abans de tots els
     estils propis de cada component (targetes, banners...), perque
     quan mes avall es defineixen els seus propis ":hover" (per
     exemple ".founder-card:hover" o ".svc-page-card:hover") aquests
     sempre guanyin la cascada i el "hover" seguisca funcionant igual
     que abans, encara que l'element ja s'haja revelat.
     Classes que s'afegeixen soles via JS (vegeu initVmReveal() a
     script.js), no cal escriure-les a mà a cap plantilla:
       .vm-reveal       -> desplaçament cap amunt (targetes, banners)
       .vm-reveal-fade  -> fosc + zoom subtil (fotos grans "hero")
       .is-visible      -> l'afegeix l'IntersectionObserver quan
                            l'element entra al viewport
     --vm-i (variable per element) dona l'escalonat entre targetes
     d'una mateixa graella (la primera surt abans que la segona, etc). */
  .vm-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
    transition-delay:calc(var(--vm-i, 0) * 70ms);
    will-change:opacity, transform;
  }
  .vm-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .vm-reveal-fade{
    opacity:0;
    transform:scale(1.035);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .vm-reveal-fade.is-visible{
    opacity:1;
    transform:scale(1);
  }
  @media (prefers-reduced-motion: reduce){
    .vm-reveal, .vm-reveal-fade{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }

  /* ---------- Titulars que es revelen paraula per paraula ----------
     S'aplica via JS (initVmWordReveal() a script.js) als titulars
     principals de seccions/pàgines (mai al h1/h2 de l'escena del
     hero, que ja té el seu propi ritme lligat a l'scroll). Cada
     paraula queda dins d'una "màscara" (.vm-word-mask, overflow
     amagat) i és la paraula (.vm-word) la que puja des de sota amb
     un petit retard esglaonat (--vm-wi) entre paraules. Es desactiva
     del tot (JS ni tan sols separa les paraules) si l'usuari prefereix
     menys moviment. */
  .vm-word-reveal .vm-word-mask{
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
    padding-bottom:0.12em;
    margin-bottom:-0.12em;
  }
  .vm-word-reveal .vm-word{
    display:inline-block;
    opacity:0;
    transform:translateY(115%);
    transition:transform 0.65s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
    transition-delay:calc(var(--vm-wi, 0) * 65ms);
    will-change:transform, opacity;
  }
  .vm-word-reveal.is-visible .vm-word{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- Comptador numèric animat ----------
     S'aplica manualment a l'HTML amb <span class="vm-counter"
     data-target="70">0</span>: en entrar al viewport, initVmCounters()
     (script.js) compta de 0 fins a data-target. tabular-nums evita que
     l'ample del número "ballagi" mentre compta. */
  .vm-counter{
    font-variant-numeric:tabular-nums;
  }

  /* ---------- Inclinació 3D suau (tilt) a targetes ----------
     initVmTilt() (script.js) aplica un transform inline segons la
     posició del ratolí; nomes en dispositius amb ratolí real (mai
     mòbil/tàctil) i mai amb "reduced motion". La transició ja la
     porten les mateixes targetes (per l'elevació en :hover), així que
     aquí només cal permetre que el navegador optimitzi el transform. */
  .svc-page-card, .founder-card, .findus-card, .mini-banner{
    will-change:transform;
  }

  /* ---------- Efecte "ona" (ripple) als botons principals ---------- */
  .cta-btn, .site-nav .reserve-btn, .svc-reserve-btn{
    position:relative;
    overflow:hidden;
  }
  .vm-ripple{
    position:absolute;
    border-radius:50%;
    background:currentColor;
    pointer-events:none;
    animation:vmRippleAnim 0.6s ease-out forwards;
  }
  @keyframes vmRippleAnim{
    from{ transform:scale(0); opacity:0.35; }
    to{ transform:scale(2.6); opacity:0; }
  }

  /* ---------- Barra de progrés de l'scroll ---------- */
  #vmScrollProgress{
    position:fixed;
    top:0; left:0;
    width:100%;
    height:3px;
    background:var(--sage);
    transform:scaleX(0);
    transform-origin:0 center;
    z-index:300;
    pointer-events:none;
  }

  @media (prefers-reduced-motion: reduce){
    .vm-word-reveal .vm-word{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
    .vm-ripple{ display:none; }
    #vmScrollProgress{ display:none; }
  }

  body{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-weight:var(--font-ui-weight, 400);
    font-style:var(--font-ui-style, normal);
    color:var(--navy);
    background:var(--cream);
    overflow-x:hidden;
  }

  h1{
    font-family:var(--font-h1), 'Alga', serif;
    font-weight:var(--font-h1-weight, 500);
    font-style:var(--font-h1-style, normal);
    font-size:var(--h1-size, 2.4rem);
    letter-spacing:0.01em;
  }
  h2{
    font-family:var(--font-h2), 'Alga', serif;
    font-weight:var(--font-h2-weight, 500);
    font-style:var(--font-h2-style, normal);
    font-size:var(--h2-size, 1.75rem);
    letter-spacing:0.01em;
  }
  h3{
    font-family:var(--font-h3), 'Alga', serif;
    font-weight:var(--font-h3-weight, 500);
    font-style:var(--font-h3-style, normal);
    font-size:var(--h3-size, 1.3rem);
    letter-spacing:0.01em;
  }
  h4{
    font-family:var(--font-h4), 'Jost', sans-serif;
    font-weight:var(--font-h4-weight, 400);
    font-style:var(--font-h4-style, normal);
  }

  a{ color:inherit; text-decoration:none; }


  p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-weight:var(--font-subtitle-weight, 400);
    font-style:var(--font-subtitle-style, normal);
  }

  /* ---------- SCROLL SCENE (3D hero) ---------- */

  #scroll-spacer{
    height:220vh; /* 100vh pin + 120vh de recorregut real: banners (puja+fixa, ara més ràpid) + fos encreuat façana→interior */
    position:relative;
  }

  #scene-stage{
    position:sticky;
    top:0;
    height:100vh;
    width:100%;
    overflow:hidden;
    background:var(--navy-deep);
  }

  .scene-media{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    will-change:opacity, transform, filter;
    /* --- la pròpia fotografia es va desvanent (no només una capa per
       sobre) cap a la part inferior, perquè no quedi mai un tall recte:
       aquí sota es veu directament el fons fosc de #scene-stage
       (var(--navy-deep)), amb el qual es continua l'.stage-bottom-fade
       de sota per acabar de fondre's amb la secció d'Opinions. --- */
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.55) 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.55) 84%, transparent 100%);
  }
  #sceneImgB{ opacity:0; }
  @media (max-width:900px){
    .scene-media{ will-change:opacity, transform; }
  }

  /* --- capa d'emmascarament superior (fixa, no lligada a l'scroll):
     degradat de blau corporatiu cap a transparent per sobre de la
     imatge, perquè el menú i el títol principal siguin sempre
     llegibles sigui quin sigui el contingut de la foto que hi ha
     just a sota — mateix recurs que fa servir summitfisio.com. --- */
  .stage-top-mask{
    position:absolute;
    inset:0 0 auto 0;
    height:44vh;
    pointer-events:none;
    z-index:5;
    background:linear-gradient(to bottom, rgba(26,38,53,0.72) 0%, rgba(26,38,53,0.4) 45%, rgba(26,38,53,0) 100%);
  }

  /* --- escena 1 (home): efecte radial, centre més fosc i voltants transparents --- */
  .stage-vignette-1{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5;
    will-change:transform;
    background: radial-gradient(ellipse 120% 120% at 50% 55%, rgba(38,54,74,0.95) 0%, rgba(38,54,74,0.55) 55%, rgba(38,54,74,0) 90%);
  }

  /* --- escena 2 (punts): degradat de dalt a baix, de transparent
     total a blau corporatiu sòlid (var(--navy)), ocupant tot l'alt
     de la pantalla (100vh, ja que aquesta capa és inset:0 dins
     #scene-stage). En arribar al final ja és 100% sòlid, i es queda
     SEMPRE a la mateixa velocitat que la resta de l'escena (sense
     transform propi ni parallax): és el que permet que continuï
     sense cap costura amb el fons sòlid de .opinions-section, tot
     plegat com un únic overlay continu. Només el contingut
     d'Opinions (.opinions-content, més avall) es mou més ràpid. --- */
  .stage-vignette-2{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5;
    will-change:transform;
    background: linear-gradient(to bottom,
      rgba(38,54,74,0) 0%,
      rgba(38,54,74,0.55) 62%,
      var(--navy) 100%);
  }

  /* --- difuminat final de l'escena cap al blau de la marca: és
     l'ÚNIC degradat que porta a sòlid (var(--navy)) — .opinions-section
     ja no en té cap de propi, només fons pla amb el MATEIX color.
     Ara els punts del degradat estan en vh (no en %) mesurats des de
     dalt d'aquesta capa, que comença exactament a dalt de l'escena
     (top:0) — així "100vh" vol dir, literalment, el 100% de l'alçada
     de la pàgina/escena, tal com es demana: la foto es veu nítida
     gairebé fins al final i només es torna sòlida a l'últim vh,
     coincidint amb on comença .opinions-section (marge:0, sense
     solapament — el sòlid comença quan "acaba la pàgina" i continua
     directament a la següent secció, sense costura). L'alçada total
     (110vh) és més gran que la pantalla perquè, com que aquesta capa
     té el seu propi ritme de parallax (script.js, fins a -8vh), la
     cua sòlida no es quedi mai curta i s'hi vegi el fons cru de
     #scene-stage (var(--navy-deep)) assomant per sota.
     Igual que .stage-vignette-2, la seva opacitat es lliga a
     imgBOpacity des de script.js: així només afecta la Foto 2
     (interior, amb els hotspots) i mai la Foto 1 (exterior/façana),
     que es veu sempre nítida sense aquest degradat per sobre. --- */
  .stage-bottom-fade{
    position:absolute;
    inset:0 0 auto 0;
    height:110vh;
    pointer-events:none;
    z-index:5;
    will-change:transform, opacity; /* script.js hi aplica un ritme de parallax propi, diferent del de la imatge i del text, i vincula l'opacitat a imgBOpacity perquè només afecti la Foto 2 (interior/hotspots) */
    background:linear-gradient(to bottom,
      rgba(38,54,74,0) 0vh,
      rgba(38,54,74,0.08) 60vh,
      rgba(38,54,74,0.35) 82vh,
      rgba(38,54,74,0.75) 93vh,
      var(--navy) 100vh,
      var(--navy) 110vh);
  }

  /* --- scene 1 overlay: brand values + CTA --- */
  .hero-copy{
    position:absolute;
    inset:0;
    z-index:6;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 0 6vw;
    pointer-events:none;
    transition:opacity 0.25s ease;
  }

  .hero-copy .kicker{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.8rem;
    letter-spacing:0.28em;
    color:var(--sage);
    margin-bottom:1.1rem;
  }

  .hero-copy h1{
    color:#fff;
    font-size:clamp(2.1rem, 5vw, 3.6rem);
    line-height:1.18;
    max-width:15ch;
    text-shadow:0 2px 24px rgba(0,0,0,0.35);
    font-family:var(--font-hero-heading), 'Playfair Display', serif;
    font-weight:var(--font-hero-heading-weight, 400);
    font-style:var(--font-hero-heading-style, italic);
  }

  .hero-copy p{
    color:rgba(255,255,255,0.86);
    max-width:46ch;
    margin:1.5rem 0 2.2rem;
    /* Fluid: 3% de l'amplada de pantalla (≈11px a 360px, ≈12,3px a 410px), mai per sota de 0,7rem ni per sobre d'1rem (a partir de ~530px) */
    font-size:clamp(0.7rem, 3vw, 1rem);
    line-height:1.6;
    text-shadow:0 1px 12px rgba(0,0,0,0.3);
  }

  .cta-btn{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    background:var(--sage);
    color:var(--navy-deep);
    padding:1rem 2.1rem;
    border-radius:100px;
    font-size:0.98rem;
    font-weight:500;
    letter-spacing:0.02em;
    box-shadow:0 8px 30px rgba(0,0,0,0.28);
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.25s ease;
  }
  .cta-btn:hover{ background:#fff; transform:translateY(-2px); }
  .cta-btn svg{ width:16px; height:16px; }



  /* --- top nav over the scene --- */
  .site-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2.2rem 5vw;
    pointer-events:none;
    background:transparent;
    transition:background 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease;
  }
  .site-nav.is-solid{
    background:#26364a;
    backdrop-filter:blur(10px);
    padding:1.1rem 5vw;
    box-shadow:0 8px 24px -12px rgba(0,0,0,0.35);
  }
  .site-nav .brand{
    pointer-events:auto;
    font-family:var(--font-nav-brand), 'Alga', serif;
    font-style:var(--font-nav-brand-style, italic);
    font-weight:var(--font-nav-brand-weight, 400);
    font-size:1.3rem;
    color:#fff;
    letter-spacing:0.02em;
    text-shadow:0 2px 14px rgba(0,0,0,0.35);
  }
  .site-nav .brand span{
    display:block;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-style:normal;
    font-size:0.62rem;
    letter-spacing:0.3em;
    color:var(--sage);
    margin-top:0.15rem;
  }
  .site-nav .brand-logo{
    pointer-events:auto;
    display:flex;
    align-items:center;
  }
  .site-nav .brand-logo img{
    max-height:52px;
    width:auto;
    display:block;
  }
  .site-nav .reserve-btn{
    pointer-events:auto;
    color:#fff;
    font-size:0.85rem;
    letter-spacing:0.03em;
    border:1px solid rgba(255,255,255,0.4);
    padding:0.6rem 1.1rem;
    border-radius:100px;
    transition:border-color 0.25s ease, background 0.25s ease;
  }
  .site-nav .reserve-btn:hover,
  .site-nav .reserve-btn:active{
    background:var(--sage-deep);
    border-color:var(--sage-deep);
    color:var(--navy-deep);
  }

  /* --- accions de la dreta: selector d'idioma + botó de reserva --- */
  .site-nav .nav-actions{
    display:flex;
    align-items:center;
    gap:0.9rem;
  }
  .site-nav .nav-lang{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(255,255,255,0.4);
    border-radius:100px;
    padding:0.18rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.08em;
    line-height:1;
  }
  .site-nav .nav-lang a,
  .site-nav .nav-lang span{
    display:block;
    padding:0.42rem 0.62rem;
    border-radius:100px;
    color:rgba(255,255,255,0.85);
    text-shadow:0 1px 8px rgba(0,0,0,0.3);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .site-nav .nav-lang a:hover,
  .site-nav .nav-lang a:focus-visible{
    color:#fff;
    background:rgba(255,255,255,0.16);
  }
  .site-nav .nav-lang .is-current{
    background:var(--sage);
    color:var(--navy-deep);
    font-weight:600;
    text-shadow:none;
  }

  .site-nav .nav-links{
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:2rem;
  }
  .site-nav .nav-links li{
    list-style:none;
    margin:0;
    padding:0;
  }
  .site-nav .nav-links a{
    font-size:0.85rem;
    letter-spacing:0.03em;
    color:rgba(255,255,255,0.88);
    text-shadow:0 1px 10px rgba(0,0,0,0.3);
    position:relative;
    padding-bottom:0.2rem;
    transition:color 0.2s ease;
  }
  .site-nav .nav-links a::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0%;
    height:1px;
    background:var(--sage);
    transition:width 0.25s ease;
  }
  .site-nav .nav-links a:hover{ color:#fff; }
  .site-nav .nav-links a:hover::after{ width:100%; }

  /* ---------- menú desplegable (Serveis > Fisioteràpia, Osteopatia...) ----------
     Les subpàgines es defineixen des de Aparença > Menús: qualsevol
     element de menú arrossegat una mica a la dreta, sota un altre,
     apareix aquí automàticament com a desplegable. Clicar el nom de
     la pàgina hi porta directament; la fletxa (afegida pel walker a
     functions.php) només obre/tanca el desplegable. */
  .nav-caret{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    padding:0.35rem;
    margin-left:0.1rem;
    cursor:pointer;
    color:inherit;
  }
  .nav-caret svg{ display:block; transition:transform 0.2s ease; }

  .site-nav .nav-links li{
    position:relative;
    display:flex;
    align-items:center;
  }
  .site-nav .nav-links li .nav-caret{ color:rgba(255,255,255,0.75); }
  .site-nav .nav-links li:hover .nav-caret,
  .site-nav .nav-links li.open .nav-caret{ color:#fff; }
  .site-nav .nav-links li:hover > .nav-caret svg,
  .site-nav .nav-links li.open > .nav-caret svg{ transform:rotate(180deg); }

  .site-nav .nav-links .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    margin-top:0.6rem;
    padding:0.5rem;
    background:#26364a;
    border-radius:14px;
    box-shadow:0 20px 40px -16px rgba(0,0,0,0.5);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index:210;
  }
  .site-nav .nav-links li:hover > .sub-menu,
  .site-nav .nav-links li.open > .sub-menu,
  .site-nav .nav-links li:focus-within > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  /* pont invisible entre el nom i el desplegable, perquè no es tanqui en baixar el ratolí */
  .site-nav .nav-links .sub-menu::before{
    content:'';
    position:absolute;
    left:0; right:0;
    top:-0.8rem;
    height:0.8rem;
  }
  .site-nav .nav-links li.menu-item-has-children > a{ padding-right:0.1rem; }
  .site-nav .nav-links .nav-caret{
    pointer-events:auto;
    min-width:1.6rem;
    min-height:1.6rem;
    color:rgba(255,255,255,0.9);
    filter:drop-shadow(0 1px 6px rgba(0,0,0,0.4));
  }
  .site-nav .nav-links .sub-menu li{ display:block; width:100%; }
  .site-nav .nav-links .sub-menu a{
    display:block;
    padding:0.65rem 0.9rem;
    border-radius:9px;
    font-size:0.84rem;
    letter-spacing:0.02em;
    color:rgba(255,255,255,0.85);
    text-shadow:none;
    white-space:nowrap;
  }
  .site-nav .nav-links .sub-menu a::after{ display:none; }
  .site-nav .nav-links .sub-menu a:hover{
    color:#fff;
    background:rgba(255,255,255,0.08);
  }

  @media (max-width:900px){
    .site-nav .nav-links{ display:none; }
    .site-nav .reserve-btn{ display:none; }
    /* al mòbil: brand a l'esquerra; selector d'idioma i hamburguesa a la dreta */
    .site-nav .nav-actions{ margin-left:auto; margin-right:1rem; }
  }

  /* ---------- mobile dropdown menu ---------- */

  .nav-toggle{
    display:none;
    pointer-events:auto;
    width:32px;
    height:24px;
    position:relative;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
  }
  .nav-toggle span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:#fff;
    box-shadow:0 1px 6px rgba(0,0,0,0.35);
    transition:transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
  }
  .nav-toggle span:nth-child(1){ top:0; }
  .nav-toggle span:nth-child(2){ top:11px; }
  .nav-toggle span:nth-child(3){ top:22px; }
  .nav-toggle.open span:nth-child(1){ top:11px; transform:rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ top:11px; transform:rotate(-45deg); }

  .mobile-nav-panel{
    position:fixed;
    top:0; left:0; right:0;
    z-index:190;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    padding:6.5rem 6vw 2.5rem;
    background:rgba(26,38,53,0.97);
    backdrop-filter:blur(10px);
    max-height:0;
    opacity:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    pointer-events:none;
    transition:max-height 0.35s ease, opacity 0.3s ease;
  }
  .mobile-nav-panel.open{
    max-height:100vh;
    max-height:100dvh;
    opacity:1;
    pointer-events:auto;
  }
  /* Cada fila del menú és una graella d'una sola cel·la: l'enllaç ocupa
     tota l'amplada amb el text CENTRAT (padding simètric als dos costats)
     i la fletxa del desplegable se superposa a la DRETA de la mateixa
     fila (abans, en fer-se l'enllaç 100% d'ample, la fletxa baixava a una
     línia pròpia). El submenú va a la fila de sota, també centrat. */
  .mobile-nav-panel li{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .mobile-nav-panel li > a{
    grid-column:1 / -1;
    grid-row:1;
    width:auto;
    padding-left:2.75rem;
    padding-right:2.75rem;
  }
  .mobile-nav-panel li > .nav-caret{
    grid-column:2;
    grid-row:1;
    align-self:stretch;
    justify-self:end;
    z-index:1;
    padding:0 0.4rem 0 0.9rem;
    color:rgba(255,255,255,0.7);
  }
  .mobile-nav-panel li.open > .nav-caret svg{ transform:rotate(180deg); }
  .mobile-nav-panel .sub-menu{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    list-style:none;
    margin:0 0 0.4rem;
    padding:0;
    display:none;
  }
  .mobile-nav-panel li.open > .sub-menu{ display:block; }
  .mobile-nav-panel .sub-menu li{ display:block; width:100%; text-align:center; }
  .mobile-nav-panel .sub-menu a{
    /* display:block perquè el text quedi centrat com els enllaços principals
       (dins d'un <li> de bloc, un enllaç en línia es quedava a l'esquerra) */
    display:block;
    text-align:center;
    font-size:0.92rem;
    padding:0.7rem 0;
    color:rgba(255,255,255,0.75);
    border-bottom:1px dashed rgba(255,255,255,0.12);
  }
  .mobile-nav-panel a{
    width:100%;
    flex:0 0 auto;
    text-align:center;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1rem;
    letter-spacing:0.04em;
    color:rgba(255,255,255,0.9);
    padding:0.9rem 0;
    border-bottom:1px solid rgba(255,255,255,0.12);
    transition:color 0.2s ease;
  }
  .mobile-nav-panel a:last-of-type{ border-bottom:none; }
  .mobile-nav-panel a:hover{ color:var(--sage); }
  .mobile-nav-panel .mobile-reserve-btn{
    flex:0 0 auto;
    align-self:center;
    margin-top:1.4rem;
    margin-bottom:0.4rem;
    padding:0.8rem 1.6rem;
    background:var(--sage);
    color:var(--navy-deep);
    font-weight:600;
    border:1px solid var(--sage);
    border-radius:100px;
    text-align:center;
  }
  .mobile-nav-panel .mobile-reserve-btn:hover{ color:var(--navy-deep); background:var(--sage-deep); }

  body.mobile-menu-open{ overflow:hidden; }

  @media (max-width:900px){
    .nav-toggle{ display:block; }
  }
  @media (min-width:901px){
    .mobile-nav-panel{ display:none; }
  }

  /* ---------- IN-PAGE SECTIONS (Serveis, L'equip, Centre, Blog, Contacte) ---------- */

  .site-page{
    display:none;
    position:fixed;
    inset:0;
    z-index:150;
    background:var(--cream);
    overflow-y:auto;
  }
  .site-page.active{ display:block; }

  body.page-open{ overflow:hidden; }

  .site-page-inner{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:9rem 6vw 4rem;
  }
  .site-page-inner .kicker{
    font-size:0.78rem;
    letter-spacing:0.26em;
    color:var(--sage-deep);
    margin-bottom:1rem;
  }
  .site-page-inner h1{
    font-family:var(--font-h1), 'Alga', serif;
    font-weight:var(--font-h1-weight, 400);
    font-style:var(--font-h1-style, normal);
    font-size:clamp(2rem, 4.4vw, 3rem);
    color:var(--navy);
    margin-bottom:1.2rem;
  }
  .site-page-inner p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    color:#5c6b80;
    max-width:46ch;
    line-height:1.7;
    margin-bottom:2rem;
  }
  .page-back-link{
    display:inline-block;
    font-size:0.92rem;
    letter-spacing:0.03em;
    color:var(--navy);
    border-bottom:1px solid var(--sage-deep);
    padding-bottom:0.2rem;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .page-back-link:hover{ color:var(--sage-deep); }

  /* ---------- content page layout (used by "Serveis" for now) ---------- */

  .site-page-content{
    min-height:100vh;
    max-width:1200px;
    margin:0 auto;
    padding:0 6vw 5rem;
  }
  .site-page-intro{
    text-align:center;
    max-width:1200px;
    margin:0 auto 3rem;
  }
  .site-page-intro::before{
    content:none;
  }
  .site-page-intro .kicker{
    font-size:0.78rem;
    letter-spacing:0.26em;
    color:var(--sage-deep);
    margin-bottom:1rem;
  }
  .site-page-intro h1{
    font-family:var(--font-h1), 'Alga', serif;
    font-weight:var(--font-h1-weight, 400);
    font-style:var(--font-h1-style, normal);
    font-size:clamp(2rem, 4.4vw, 3rem);
    color:var(--navy);
    margin-bottom:0.7rem;
  }
  /* Subtítol curt sota cada títol de pàgina (Serveis, Equip, Centre...),
     editable des de Aparença > Personalitza > "Subtítols de pàgines". */
  .site-page-subtitle{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:1.05rem;
    font-weight:500;
    color:var(--sage-deep);
    letter-spacing:0.01em;
    margin-bottom:1.1rem;
  }
  /* Barreta verda decorativa, sota el títol i el subtítol (abans del
     text/contingut) — no a sobre. Es col·loca amb un <div> real al
     HTML de cada plantilla, no amb ::before, perquè així sempre queda
     just després del subtítol. */
  .page-title-bar{
    width:54px;
    height:3px;
    background:var(--sage-deep);
    border-radius:100px;
    margin:0 0 1.5rem;
  }
  .site-page-intro .page-title-bar{
    margin-left:auto;
    margin-right:auto;
  }
  .site-page-intro p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    color:#5c6b80;
    line-height:1.7;
  }

  .svc-page-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    max-width:1000px;
    margin:0 auto 3.5rem;
  }
  .svc-page-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0.8rem;
    background:rgba(201,217,168,0.18);
    border-radius:22px;
    padding:1rem;
    box-shadow:0 10px 30px -24px rgba(38,54,74,0.4);
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.3s ease;
  }
  .svc-page-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 40px -20px rgba(38,54,74,0.35);
    background:rgba(201,217,168,0.28);
  }
  .svc-page-photo{
    aspect-ratio:16/10;
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
  }
  .svc-page-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.5s ease;
  }
  .svc-page-card:hover .svc-page-photo img{
    transform:scale(1.07);
  }
  .svc-page-text{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0.6rem;
    flex:1;
  }
  .svc-page-card h3{
    position:relative;
    display:inline-block;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1.05rem;
    font-weight:600;
    color:var(--navy);
    padding-bottom:0.5rem;
  }
  .svc-page-card h3::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:28px;
    height:2px;
    background:var(--sage-deep);
    border-radius:100px;
    transition:width 0.35s ease;
  }
  .svc-page-card:hover h3::after{ width:48px; }

  /* --- "Equipament" (pagina "El centre"): targetes mes menudes que
     les de Serveis/Classes, amb la foto ocupant menys proporcio del
     banner (nomes afecta ".centre-equipament-grid", vegeu
     page-centre.php — no toca cap altra graella "svc-page-*"). --- */
  .centre-equipament-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:1.1rem;
    max-width:920px;
  }
  .centre-equipament-grid .svc-page-card{
    padding:0.75rem;
    gap:0.5rem;
    border-radius:16px;
  }
  .centre-equipament-grid .svc-page-photo{
    aspect-ratio:16/7;
    border-radius:10px;
  }
  .centre-equipament-grid .svc-page-card h3{
    font-size:0.88rem;
    padding-bottom:0.3rem;
  }
  .centre-equipament-grid .svc-page-card h3::after{ width:20px; }
  .centre-equipament-grid .svc-page-card:hover h3::after{ width:34px; }
  .centre-equipament-grid .svc-page-card p{
    font-size:0.78rem;
    line-height:1.5;
  }
  @media (max-width:700px){
    .centre-equipament-grid{ grid-template-columns:1fr 1fr; gap:0.8rem; }
    .centre-equipament-grid .svc-page-photo{ aspect-ratio:16/9; }
  }
  @media (max-width:480px){
    .centre-equipament-grid{ grid-template-columns:1fr; max-width:320px; }
  }

  /* ---------- "Reserva un espai" (page-centre.php) — caixa senzilla
     amb títol, text i un botó que porta directament al WhatsApp de
     la clínica (número i missatge des de "Dades de contacte
     Vitalmans"). ---------- */
  .reserva-espai{
    max-width:640px;
    margin:4.5rem auto 0;
    text-align:center;
    padding:2.8rem 2rem;
    background:#f4f6f2;
    border-radius:22px;
  }
  .reserva-espai h2{
    font-size:1.6rem;
    color:var(--navy);
    margin-bottom:0.8rem;
  }
  .reserva-espai p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    color:#5c6b80;
    line-height:1.7;
    max-width:46ch;
    margin:0 auto 1.6rem;
  }
  .reserva-espai-btn{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    padding:0.85rem 1.8rem;
    background:#25D366;
    color:#fff;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-weight:600;
    font-size:0.92rem;
    border-radius:100px;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .reserva-espai-btn svg{ width:19px; height:19px; flex-shrink:0; }
  .reserva-espai-btn:hover{ background:#1ea952; transform:translateY(-1px); }
  @media (max-width:600px){
    .reserva-espai{ margin:3.2rem auto 0; padding:2.2rem 1.4rem; border-radius:18px; }
    .reserva-espai h2{ font-size:1.35rem; }
  }

  /* Insígnia "Des de X€" a la targeta de la graella de "Classes
     dirigides" (page-classes-dirigides.php), perquè el preu ja es
     vegi abans d'entrar a la pàgina pròpia de la classe. */
  .classes-price-from{
    display:inline-block;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.82rem;
    color:var(--navy);
    margin:0.2rem 0 0.4rem;
  }
  .classes-price-from strong{ color:var(--sage-deep); }

  .svc-card-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.9rem;
    margin-top:0.4rem;
  }
  .svc-reserve-btn{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    background:var(--navy);
    color:#fff;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:var(--svc-cta-size, 0.82rem);
    font-weight:500;
    letter-spacing:0.02em;
    padding:0.67em 1.34em;
    min-height:40px;
    border-radius:100px;
    transition:background 0.2s ease;
  }
  .svc-reserve-btn:hover{ background:var(--sage-deep); color:var(--navy-deep); }
  .svc-info-link{
    display:none; /* text "+ info" amagat a petició: la foto i el
      títol del banner ja enllacen a la mateixa pàgina, així que
      s'amaga aquest enllaç sense perdre cap funcionalitat. */
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.82rem;
    color:var(--navy);
    border-bottom:1px solid var(--sage-deep);
    padding-bottom:0.15rem;
    transition:color 0.2s ease;
  }
  .svc-info-link:hover{ color:var(--sage-deep); }

  /* "+ info" sempre a la cantonada inferior dreta del banner, tant a
     les targetes de Serveis com a Classes dirigides. */
  .svc-page-card .svc-info-link{
    position:absolute;
    right:1.3rem;
    bottom:1rem;
  }
  /* A les targetes del hub de Serveis, el "+ info" viatja dins la
     fila d'accions (al costat del botó "Reservar cita") en lloc de
     quedar fixat a la cantonada. */
  .svc-card-actions .svc-info-link{
    position:static;
  }

  /* ---------- "Sobre Nosaltres": contingut lliure (editor de blocs) ---------- */
  .about-flexible-content{
    max-width:1200px;
    margin:0 auto 3.5rem;
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:1rem;
    line-height:1.75;
    color:#3f4c60;
  }
  .about-flexible-content h1{
    font-family:var(--font-h1), 'Alga', serif;
    font-weight:var(--font-h1-weight, 400);
    font-style:var(--font-h1-style, normal);
    color:var(--navy);
  }
  .about-flexible-content h2{
    font-family:var(--font-h2), 'Alga', serif;
    font-weight:var(--font-h2-weight, 400);
    font-style:var(--font-h2-style, normal);
    color:var(--navy);
  }
  .about-flexible-content h3{
    font-family:var(--font-h3), 'Alga', serif;
    font-weight:var(--font-h3-weight, 400);
    font-style:var(--font-h3-style, normal);
    color:var(--navy);
    line-height:1.25;
    margin:2rem 0 1rem;
  }
  .about-flexible-content h2{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); }
  .about-flexible-content h3{ font-size:1.15rem; }
  .about-flexible-content p{ margin-bottom:1.2rem; }
  .about-flexible-content img{
    max-width:100%;
    height:auto;
    border-radius:18px;
    display:block;
    margin:1.6rem auto;
  }
  .about-flexible-content figure{ margin:1.6rem 0; }
  .about-flexible-content figcaption{
    text-align:center;
    font-size:0.85rem;
    color:#8892a0;
    margin-top:0.5rem;
  }
  .about-flexible-content .alignwide{
    max-width:1100px;
    width:100%;
    margin-left:calc(50% - 50vw + ((100vw - 100%) / 2));
  }
  .about-flexible-content .alignfull{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .about-flexible-content .alignfull img{ border-radius:0; }
  .about-flexible-content .aligncenter{ margin-left:auto; margin-right:auto; }
  @media (min-width:700px){
    .about-flexible-content .alignleft{ float:left; margin:0.3rem 1.8rem 1rem 0; max-width:45%; }
    .about-flexible-content .alignright{ float:right; margin:0.3rem 0 1rem 1.8rem; max-width:45%; }
  }

  /* ---------- "Sobre Nosaltres": banners petits, tants com calgui,
     en una graella flexible (no fixa a 2 columnes). Targetes
     compactes i AMPLES: la targeta comença directament amb la foto
     (sense cap franja de color per sobre) en format 4:3 — la foto
     ocupa proporcionalment més espai de la targeta que abans (que
     tenia una alçada fixa de 150px sempre baixa) — i, a sota, el
     títol, el subtítol (descripció) i la ubicació; el CTA "Reservar
     cita" és un botó de text ancorat a la cantonada inferior dreta
     del bloc de text — ja no hi ha cap fletxa superposada a la foto.
     ---------- */
  .mini-banners-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1rem;
    margin-bottom:3.5rem;
  }
  .mini-banner{
    display:flex;
    flex-direction:column;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px -24px rgba(38,54,74,0.4);
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
  }
  .mini-banner:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 32px -18px rgba(38,54,74,0.35);
  }
  /* La foto és el primer element de la targeta: cap padding ni franja
     per sobre seu, la imatge toca directament la vora superior
     (arrodonida per .mini-banner, que talla amb overflow:hidden).
     Format 4:3 (proporcional a l'amplada): en fer la targeta més
     ampla, la foto es fa proporcionalment més alta, així ocupa més
     espai de la targeta que abans (que tenia una alçada fixa de
     150px, sempre baixa). */
  .mini-banner-photo{
    position:relative;
    display:block;
    aspect-ratio:3 / 2;
    min-height:140px;
    overflow:hidden;
    background:var(--sage-deep);
  }
  .mini-banner-photo img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:100%;
    min-height:100%;
    object-fit:cover !important;
    display:block;
    transition:transform 0.5s ease;
  }
  .mini-banner:hover .mini-banner-photo img{ transform:scale(1.06); }
  /* Els banners viuen dins de .about-flexible-content (text de l'editor),
     que aplica marges a img / h3 / p (margin:1.6rem auto a les imatges,
     2rem a dalt dels h3...). Com que la foto és absoluta amb inset:0, el
     marge de la imatge la baixava i deixava una franja verda a dalt.
     Aquí es neutralitzen aquests marges heretats perquè la foto ompli
     tot el seu espai i el text quedi enganxat a sota. */
  .mini-banner .mini-banner-photo img{
    margin:0 !important;
    max-width:none !important;
    border-radius:0 !important;
  }
  .mini-banner .mini-banner-info h3{ margin:0 0 0.15rem; }
  .mini-banner .mini-banner-desc{ margin:0 0 0.2rem; }
  .mini-banner .mini-banner-location{ margin:0; }
  .mini-banner-body{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:0.3rem;
    padding:0.7rem 0.9rem 0.8rem;
  }
  .mini-banner-info{ text-decoration:none; }
  .mini-banner-info h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.92rem;
    font-weight:600;
    color:var(--navy);
    margin-bottom:0.15rem;
  }
  .mini-banner-desc{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.78rem;
    color:#5c6b80;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:0.2rem;
  }
  .mini-banner-location{
    display:flex;
    align-items:center;
    gap:0.3rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.7rem;
    color:var(--navy);
    opacity:0.7;
  }
  .mini-banner-location svg{ width:11px; height:11px; flex-shrink:0; }
  .mini-banner-cta{
    align-self:flex-end;
    margin-top:0.5rem;
    padding:0.42rem 0.9rem;
    border-radius:100px;
    background:var(--navy);
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.72rem;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
    transition:background 0.25s ease, transform 0.25s ease;
  }
  .mini-banner-cta:hover{ background:var(--sage-deep); transform:translateY(-1px); }
  @media (max-width:560px){
    .mini-banners-grid{ grid-template-columns:1fr 1fr; gap:0.6rem; }
    .mini-banner-photo{ aspect-ratio:3 / 2; }
    .mini-banner-body{ padding:0.5rem 0.6rem 0.6rem; gap:0.2rem; }
    .mini-banner-info h3{ font-size:0.78rem; line-height:1.25; }
    .mini-banner-desc{ font-size:0.66rem; line-height:1.3; -webkit-line-clamp:2; }
    .mini-banner-location{ font-size:0.58rem; gap:0.2rem; }
    .mini-banner-location svg{ width:9px; height:9px; }
    /* Botó una mica més gran i més separat del text de sobre, perquè
       al mòbil no quedi tan enganxat a la descripció/adreça i sigui
       més difícil tocar-lo per error en lloc de llegir el text. */
    .mini-banner-cta{ font-size:0.66rem; padding:0.42rem 0.75rem; margin-top:0.55rem; min-height:32px; }
  }

  /* Enllaç "Tornar a Sobre nosaltres" al peu de la subpàgina d'un
     banner (single-vm_banner_sobre.php). */
  .banner-back-link{
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    margin-top:2rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.85rem;
    font-weight:600;
    color:var(--navy);
    border-bottom:1px solid var(--sage-deep);
    padding-bottom:0.15rem;
    transition:color 0.2s ease;
  }
  .banner-back-link:hover{ color:var(--sage-deep); }
  .banner-back-link svg{ width:16px; height:16px; }

  /* Botons dins de les targetes petites dels popups de la portada */
  .svc-overlay .svc-card-actions{
    justify-content:center;
    margin-top:0.6rem;
  }
  .svc-overlay .svc-reserve-btn{ background:#fff; color:var(--navy-deep); }
  .svc-overlay .svc-reserve-btn:hover{ background:var(--sage); }
  .svc-overlay .svc-info-link{ color:#fff; border-color:rgba(255,255,255,0.6); }
  .svc-overlay .svc-info-link:hover{ color:var(--sage); }

  /* ---------- CLASSES DIRIGIDES page (banners) ---------- */

  .classes-banners{
    display:flex;
    flex-direction:column;
    gap:3.2rem;
    margin-bottom:3.5rem;
  }
  .classes-banner{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:2.6rem;
    align-items:center;
  }
  .classes-banner.reverse{
    grid-template-columns:1fr 1.1fr;
  }
  .classes-banner.reverse .classes-banner-photo{ order:2; }
  .classes-banner.reverse .classes-banner-text{ order:1; }
  .classes-banner-photo{
    border-radius:28px;
    overflow:hidden;
    aspect-ratio:4/3;
    background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
    box-shadow:0 20px 40px -24px rgba(38,54,74,0.4);
  }
  .classes-banner-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .classes-banner-text{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
    position:relative;
    padding-bottom:2.6rem;
    padding-top:2.4rem;
  }
  /* Llista de preus sempre visible (sense desplegable ni clic): un
     petit títol "Preus" i les tarifes com a pastilles en fila, que
     fan wrap si no hi caben totes. */
  .classes-price{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.6rem;
  }
  .classes-price-title{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--sage-deep);
    flex-shrink:0;
  }
  .classes-price-chips{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
  }
  .classes-price-chips li{
    display:flex;
    align-items:baseline;
    gap:0.4rem;
    background:#fff;
    border:1px solid rgba(38,54,74,0.14);
    border-radius:100px;
    padding:0.4rem 0.9rem;
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.84rem;
    color:var(--navy);
    box-shadow:0 8px 18px -14px rgba(38,54,74,0.3);
  }
  .classes-price-label{ color:#5c6b80; }
  .classes-price-value{ font-weight:600; white-space:nowrap; }
  @media (max-width:760px){
    .classes-price{ align-items:flex-start; }
  }

  /* ---------- Calculadora "Preus per dies a la setmana"
     ([vitalmans_preus_dies_classe]): tries dies/setmana i
     Mensual/Trimestral amb pastilles i el preu es recalcula sol
     (vegeu initVmPreusDies() a script.js). ---------- */
  .preus-dies{
    /* caixa horitzontal, centrada a la pàgina:
       [ Mensual / Trimestral ]  [ 1 dia  2 dies  3 dies ]  [ preu ] */
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "titol     titol   titol"
      "periodes  dies    resultat";
    align-items:center;
    column-gap:clamp(1rem, 3vw, 2.5rem);
    row-gap:0.8rem;
    box-sizing:border-box;
    width:min(100%, 860px);
    margin:1.5rem auto;
    padding:1.2rem clamp(1.1rem, 3vw, 2rem) 1.4rem;
    background:#fff;
    border:1px solid rgba(38,54,74,0.14);
    border-radius:24px;
    box-shadow:0 8px 18px -14px rgba(38,54,74,0.3);
  }
  .preus-dies-title{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--sage-deep);
  }
  .preus-dies-row{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
  }
  .preus-dies-chip{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.84rem;
    color:var(--navy);
    background:var(--cream);
    border:1px solid rgba(38,54,74,0.14);
    border-radius:100px;
    padding:0.4rem 1rem;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .preus-dies-chip:hover{ border-color:var(--sage-deep); }
  .preus-dies-chip.is-active{
    background:var(--sage);
    border-color:var(--sage);
    color:var(--navy-deep);
    font-weight:600;
  }
  .preus-dies-title{ grid-area:titol; }
  .preus-dies-periodes{
    grid-area:periodes;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .preus-dies-periodes .preus-dies-chip{ text-align:center; }
  .preus-dies-opcions{
    grid-area:dies;
    justify-content:center;
    gap:0.75rem;
  }
  .preus-dies-opcions .preus-dies-chip{
    font-size:0.9rem;
    padding:0.55rem 1.35rem;
  }
  .preus-dies-resultat{
    grid-area:resultat;
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-left:clamp(1rem, 3vw, 2rem);
    border-left:1px dashed rgba(38,54,74,0.18);
  }
  .preus-dies-import{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight:700;
    color:var(--navy);
    white-space:nowrap;
  }
  @media (max-width:680px){
    /* pantalles petites: tot apilat, però amb la mateixa lògica */
    .preus-dies{
      grid-template-columns:1fr;
      grid-template-areas:"titol" "periodes" "dies" "resultat";
    }
    .preus-dies-periodes{ flex-direction:row; flex-wrap:wrap; align-items:center; }
    .preus-dies-opcions{ justify-content:flex-start; }
    .preus-dies-opcions .preus-dies-chip{ padding:0.45rem 1.05rem; }
    .preus-dies-resultat{
      align-self:auto;
      justify-content:flex-start;
      padding:0.7rem 0 0;
      border-left:0;
      border-top:1px dashed rgba(38,54,74,0.18);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .preus-dies-chip{ transition:none; }
  }
  .classes-banner-text h2{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:clamp(1.5rem, 2.6vw, 2rem);
    color:var(--navy);
  }
  .classes-banner-schedule{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    width:fit-content;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--sage-deep);
    background:rgba(201,217,168,0.22);
    padding:0.4rem 0.9rem;
    border-radius:100px;
  }
  .classes-banner-text p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.98rem;
    line-height:1.75;
    color:#5c6b80;
  }
  .classes-banner-text .svc-info-link{
    position:absolute;
    right:0;
    bottom:0;
  }
  @media (max-width:760px){
    .classes-banner, .classes-banner.reverse{
      grid-template-columns:1fr;
    }
    .classes-banner.reverse .classes-banner-photo,
    .classes-banner.reverse .classes-banner-text{ order:initial; }
  }

  /* ---------- CENTRE page (gallery + equipment) ---------- */

  /* Intro (text) i galeria a mitges: cadascun ocupa la meitat de
     l'ample en escriptori/tauleta; en mòbil es col·loquen un a sota
     de l'altre (primer el text, despres la galeria). */
  .centre-intro-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
    margin-bottom:3.8rem;
  }
  /* Sense "min-width:0" els elements de graella no es poden encongir
     per sota del seu contingut — i les miniatures de la galeria (amb
     amplada fixa cadascuna) feien que la seva columna es mengés molt
     més de la meitat, deixant el text esclafat en una franja estreta.
     Amb això, les dues columnes es reparteixen sempre el 50/50 real, i
     si les miniatures no hi caben, es desplacen amb scroll horitzontal
     (.centre-gallery-thumbs, més avall) en lloc d'eixamplar la columna. */
  .centre-intro-split > *{ min-width:0; }
  .centre-intro-split .site-page-intro{
    text-align:left;
    max-width:none;
    margin:0;
  }
  .centre-intro-split .site-page-intro p{
    max-width:none;
  }
  /* Text escrit a l'editor de la pàgina "Centre": títols, llistes i negreta */
  .centre-intro-split .site-page-intro p + p{ margin-top:1rem; }
  .centre-intro-split .site-page-intro h2,
  .centre-intro-split .site-page-intro h3{
    font-family:var(--font-h1), 'Alga', serif;
    color:var(--navy);
    line-height:1.25;
    margin:1.6rem 0 0.6rem;
  }
  .centre-intro-split .site-page-intro h2{ font-size:1.6rem; }
  .centre-intro-split .site-page-intro h3{ font-size:1.25rem; }
  .centre-intro-split .site-page-intro > :first-child{ margin-top:0; }
  .centre-intro-split .site-page-intro strong{ color:var(--navy); font-weight:700; }
  .centre-intro-split .site-page-intro ul,
  .centre-intro-split .site-page-intro ol{
    max-width:none;
    margin:0.8rem 0 0.8rem 1.2rem;
    padding:0;
    color:#5c6b80;
    line-height:1.7;
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
  }
  .centre-intro-split .site-page-intro li{ margin-bottom:0.3rem; }
  .centre-intro-split .site-page-intro a{ color:var(--sage-deep); text-decoration:underline; }
  .centre-intro-split .centre-gallery{
    margin-bottom:0;
  }
  /* Mode shortcode: text a tot l'ample amb la galeria col·locada entre
     paràgrafs amb [vitalmans_galeria_centre] */
  .site-page-intro.centre-content{
    text-align:left;
    max-width:none;
    margin:0 0 3.8rem;
  }
  .centre-content p{ max-width:none; }
  .centre-content p + p{ margin-top:1rem; }
  .centre-content h2,
  .centre-content h3{
    font-family:var(--font-h1), 'Alga', serif;
    color:var(--navy);
    line-height:1.25;
    margin:2rem 0 0.7rem;
  }
  .centre-content h2{ font-size:1.7rem; }
  .centre-content h3{ font-size:1.3rem; }
  .centre-content > :first-child{ margin-top:0; }
  .centre-content strong{ color:var(--navy); font-weight:700; }
  .centre-content ul,
  .centre-content ol{
    margin:0.8rem 0 0.8rem 1.3rem;
    padding:0;
    color:#5c6b80;
    line-height:1.7;
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
  }
  .centre-content li{ margin-bottom:0.3rem; }
  .centre-content a{ color:var(--sage-deep); text-decoration:underline; }
  @media (max-width:900px){
    .centre-intro-split{ grid-template-columns:1fr; gap:2.2rem; margin-bottom:3rem; }
    .centre-intro-split .site-page-intro{ text-align:center; }
    .centre-intro-split .site-page-intro p{ max-width:none; margin:0 auto; }
    .centre-intro-split .site-page-intro ul,
    .centre-intro-split .site-page-intro ol{ max-width:none; text-align:left; display:inline-block; }
  }

  /* Foto gran, amb "slides" que ocupen tot l'ample i es desplacen amb
     scroll natiu (permet lliscar/swipe amb el dit a mobil sense JS
     extra) i "scroll-snap" perquè cada foto quedi ben encaixada. */
  .centre-gallery{ margin-bottom:3.8rem; }
  .centre-gallery-main{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 14px 34px -22px rgba(38,54,74,0.45);
  }
  .centre-gallery-track{
    display:flex;
    width:100%;
    aspect-ratio:16/9;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .centre-gallery-track::-webkit-scrollbar{ display:none; }
  .centre-gallery-slide{
    position:relative;
    flex:0 0 100%;
    width:100%;
    height:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .centre-gallery-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .centre-gallery-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:2rem 1.4rem 1rem;
    background:linear-gradient(to top, rgba(26,38,53,0.82) 0%, rgba(26,38,53,0.35) 60%, rgba(26,38,53,0) 100%);
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.95rem;
    font-weight:500;
    letter-spacing:0.01em;
    color:#fff;
    line-height:1.3;
  }
  .centre-gallery-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(26,38,53,0.55);
    color:#fff;
    font-size:1.6rem;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s ease;
  }
  .centre-gallery-arrow:hover{ background:var(--sage-deep); color:var(--navy-deep); }
  .centre-gallery-prev{ left:0.9rem; }
  .centre-gallery-next{ right:0.9rem; }

  .centre-gallery-thumbs{
    display:flex;
    gap:0.9rem;
    margin-top:0.9rem;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:0.2rem;
  }
  .centre-gallery-thumbs::-webkit-scrollbar{ display:none; }
  .centre-gallery-thumb{
    flex:0 0 auto;
    width:110px;
    aspect-ratio:4/3;
    border-radius:12px;
    overflow:hidden;
    opacity:0.55;
    border:2px solid transparent;
    transition:opacity 0.2s ease, border-color 0.2s ease;
  }
  .centre-gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .centre-gallery-thumb.active,
  .centre-gallery-thumb:hover{
    opacity:1;
    border-color:var(--sage-deep);
  }
  @media (max-width:560px){
    .centre-gallery-track{ aspect-ratio:4/3; }
    .centre-gallery-arrow{ width:36px; height:36px; font-size:1.3rem; }
    .centre-gallery-thumb{ width:78px; }
    .centre-gallery-thumbs{ gap:0.6rem; }
  }
  .svc-page-card p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.88rem;
    line-height:1.6;
    color:#5c6b80;
  }
  /* A pantalles petites, una sola targeta per fila i la foto tal
     com es veia abans del disseny de 2 columnes (més baixa i ampla). */
  @media (max-width:700px){
    .svc-page-grid{ grid-template-columns:1fr; }
    .svc-page-photo{ aspect-ratio:16/9; }
  }

  /* ---------- "Sobre Nosaltres" page: mini banners ---------- */

  .about-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.4rem;
  }
  .about-mini-card{
    display:flex;
    flex-direction:column;
    background:rgba(201,217,168,0.18);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px -24px rgba(38,54,74,0.4);
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.3s ease;
  }
  .about-mini-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 40px -20px rgba(38,54,74,0.35);
    background:rgba(201,217,168,0.28);
  }
  .about-mini-photo{
    aspect-ratio:4/3;
    overflow:hidden;
  }
  .about-mini-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .about-mini-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.5rem;
    padding:1.1rem 1.1rem 1.3rem;
  }
  .about-mini-text h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1rem;
    font-weight:600;
    color:var(--navy);
  }
  .about-mini-text p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.88rem;
    line-height:1.55;
    color:#5c6b80;
  }
  .about-mini-text .svc-reserve-btn{
    margin-top:0.3rem;
    font-size:0.76rem;
    padding:0.5rem 1rem;
  }
  @media (max-width:560px){
    .about-mini-text{ padding:0.9rem 0.9rem 1.1rem; }
    .about-mini-text h3{ font-size:0.9rem; }
    .about-mini-text p{ font-size:0.82rem; }
  }
  .site-page-content .page-back-link{
    display:block;
    text-align:center;
    width:fit-content;
    margin:0 auto;
  }

  /* ---------- BLOG (llistat + entrada completa) ---------- */

  .blog-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
    margin-bottom:3rem;
    text-align:left;
  }
  .blog-card{
    display:flex;
    flex-direction:column;
    cursor:pointer;
  }
  .blog-card-photo{
    width:100%;
    aspect-ratio:4/3;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
    margin-bottom:1rem;
  }
  .blog-card-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease;
  }
  .blog-card:hover .blog-card-photo img{ transform:scale(1.05); }
  .blog-card-meta{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--sage-deep);
    margin-bottom:0.5rem;
  }
  .blog-card h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1.1rem;
    font-weight:600;
    color:var(--navy);
    margin-bottom:0.5rem;
    line-height:1.35;
  }
  .blog-card p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.88rem;
    line-height:1.6;
    color:#5c6b80;
    margin-bottom:0.7rem;
  }
  .blog-card-link{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.82rem;
    letter-spacing:0.03em;
    color:var(--navy);
    border-bottom:1px solid var(--sage-deep);
    padding-bottom:0.15rem;
    align-self:flex-start;
    transition:color 0.2s ease;
  }
  .blog-card:hover .blog-card-link{ color:var(--sage-deep); }

  @media (max-width:900px){
    .blog-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px){
    .blog-grid{ grid-template-columns:1fr; max-width:340px; margin-left:auto; margin-right:auto; }
  }

  /* --- blog preview banner (home hotspot) --- */
  .blog-modal-grid{ gap:1.6rem; margin-bottom:1.8rem; }
  .blog-modal-card{ display:flex; flex-direction:column; text-align:left; }
  .blog-modal-card > a{ display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }
  .blog-modal-card .blog-card-photo{ margin-bottom:0.8rem; }
  .blog-modal-card .blog-card-meta{ margin-bottom:0.4rem; }
  .blog-modal-card h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.98rem;
    font-weight:600;
    color:var(--navy);
    line-height:1.35;
  }
  @media (max-width:700px){
    .blog-modal-grid{ grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto; }
  }

  .blog-post-view{ display:none; }
  .blog-post-view.active{ display:block; }
  .site-page-content.blog-list-view.hidden{ display:none; }

  .blog-post{ display:none; max-width:70ch; margin:0 auto; text-align:left; }
  .blog-post.active{ display:block; }

  .blog-back-link{
    display:inline-block;
    font-size:0.88rem;
    letter-spacing:0.03em;
    color:var(--navy);
    border-bottom:1px solid var(--sage-deep);
    padding-bottom:0.2rem;
    margin-bottom:2rem;
    transition:color 0.2s ease;
  }
  .blog-back-link:hover{ color:var(--sage-deep); }

  .blog-post-meta{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--sage-deep);
    margin-bottom:0.8rem;
  }
  .blog-post h1{
    font-family:var(--font-h1), 'Alga', serif;
    font-weight:var(--font-h1-weight, 400);
    font-style:var(--font-h1-style, normal);
    font-size:clamp(1.7rem, 3.6vw, 2.5rem);
    color:var(--navy);
    margin-bottom:1.4rem;
    line-height:1.25;
  }
  .blog-post-image{
    width:100%;
    aspect-ratio:16/9;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:1.8rem;
    background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
  }
  .blog-post-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .blog-post-body{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.98rem;
    line-height:1.8;
    color:#3f4c60;
  }
  .blog-post-body p{ margin-bottom:1.2rem; }
  .blog-post-body h2{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1.15rem;
    font-weight:600;
    color:var(--navy);
    margin:1.8rem 0 0.8rem;
  }
  .blog-post .page-back-link{ margin-top:2rem; }

  /* ---------- SERVEI single page (subpàgina d'un tractament) ---------- */
  /* Disseny propi, deliberadament diferent del Blog: bretxa +
     capçalera amb foto i títol costat a costat + cos amb columna
     lateral de contacte — en lloc de l'article de text centrat que
     s'usa per a les entrades del Blog. */

  .servei-breadcrumb{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.82rem;
    letter-spacing:0.02em;
    color:#5c6b80;
    text-align:left;
    margin-bottom:1.8rem;
  }
  .servei-breadcrumb a{ color:var(--navy); border-bottom:1px solid var(--sage-deep); padding-bottom:0.1rem; transition:color 0.2s ease; }
  .servei-breadcrumb a:hover{ color:var(--sage-deep); }
  .servei-breadcrumb span{ margin:0 0.5rem; }
  .servei-breadcrumb span:last-child{ margin-right:0; color:var(--navy); font-weight:600; }

  /* La pàgina de cada servei no necessita l'espai superior estàndard
     de les pàgines interiors: la foto de portada (.servei-hero-full)
     ja arriba fins a tocar la barra de navegació. La resta del
     contingut (.servei-page) recupera un marge superior propi, més
     ajustat, ara que ja no li cal "baixar" la foto. */
  #page-servei.site-page,
  #page-classe.site-page,
  #page-serveis.site-page,
  #page-classes.site-page,
  #page-equip.site-page,
  #page-centre.site-page,
  #page-sobre-nosaltres.site-page{ padding-top:0; }
  .servei-page{ padding-top:2.6rem; }

  /* ---------- Portada del servei: a tota amplada, enganxada a la
     navbar, amb el breadcrumb i el títol/subtítol superposats a
     sobre de la foto. La foto és un fons absolut que ocupa tot el
     bloc; l'alçada del bloc la marca el text (breadcrumb + títol +
     subtítol) en flux normal, així la foto s'ajusta sola al text en
     lloc de tenir una alçada fixa. ---------- */
  .servei-hero-full{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--navy);
  }
  .servei-hero-full .servei-hero-photo{
    min-height:280px;
    background:var(--sage-deep);
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin-bottom:0;
    border-radius:0;
    box-shadow:none;
  }
  .servei-hero-full .servei-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .servei-hero-full::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(38,54,74,0.68) 0%, rgba(38,54,74,0.4) 45%, rgba(38,54,74,0.66) 100%);
    pointer-events:none;
    z-index:1;
  }

  /* Contingut superposat (breadcrumb + títol/subtítol), en flux
     normal per sobre de la foto (que és absoluta i de fons) — és el
     que determina l'alçada real del bloc. */
  .servei-hero-overlay{
    position:relative;
    z-index:2;
    padding:1.6rem 6vw 2.6rem;
    min-height:340px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* Títol i subtítol del servei: independents del banner de la
     pàgina "Serveis" — text propi (títol/extracte del servei, o els
     camps "Títol destacat" / "Subtítol destacat" si s'omplen) i
     tipografia pròpia (--font-servei-hero-heading/subtitle), editable
     des de Aparença > Personalitza > "Capçalera de servei" sense
     afectar la resta del lloc. Ara van superposats a la foto, per
     això el mateix blanc que la resta del text de la capçalera. */
  .servei-hero-text{
    max-width:1100px;
    margin:0 auto;
    text-align:center;
    padding-top:1.6rem;
  }
  .servei-hero-text h1{
    font-family:var(--font-servei-hero-heading), 'Alga', serif;
    font-weight:var(--font-servei-hero-heading-weight, 400);
    font-style:var(--font-servei-hero-heading-style, normal);
    font-size:clamp(2.3rem, 4.6vw, 3.4rem);
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,0.4);
    line-height:1.2;
    margin-bottom:0.8rem;
  }
  .servei-hero-lead{
    font-family:var(--font-servei-hero-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.94rem;
    font-weight:var(--font-servei-hero-subtitle-weight, 500);
    font-style:var(--font-servei-hero-subtitle-style, normal);
    line-height:1.6;
    color:rgba(255,255,255,0.85);
    text-shadow:0 1px 10px rgba(0,0,0,0.4);
  }
  .servei-hero-location{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.35rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.8rem;
    color:rgba(255,255,255,0.85);
    text-shadow:0 1px 8px rgba(0,0,0,0.4);
    margin-bottom:0.5rem;
  }
  .servei-hero-location svg{ width:13px; height:13px; flex-shrink:0; }

  /* Capçalera de les classes dirigides: independent de la capçalera
     de servei, amb els mateixos valors per defecte (Aparença >
     Personalitza > "Tipografia Vitalmans"). */
  #page-classe .servei-hero-text h1{
    font-family:var(--font-classe-hero-heading), 'Alga', serif;
    font-weight:var(--font-classe-hero-heading-weight, 400);
    font-style:var(--font-classe-hero-heading-style, normal);
  }
  #page-classe .servei-hero-lead{
    font-family:var(--font-classe-hero-subtitle), 'Libre Franklin', sans-serif;
    font-weight:var(--font-classe-hero-subtitle-weight, 500);
    font-style:var(--font-classe-hero-subtitle-style, normal);
  }

  /* Horari i preu superposats a la foto de portada d'una classe
     dirigida, sota el subtítol, centrats com la resta de la capçalera. */
  .servei-hero-info{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:0.8rem;
    margin-top:1.1rem;
  }
  .classes-price--hero{
    justify-content:center;
  }

  /* CTA "Reservar cita" dins la portada (mateix destí que el del banner final) */
  .servei-hero-cta{
    margin-top:2.2rem;
    display:flex;
    justify-content:center;
  }
  .servei-hero-cta .cta-btn{
    padding:0.65rem 1.4rem;
    font-size:0.85rem;
    gap:0.45rem;
  }
  .servei-hero-cta .cta-btn svg{ width:14px; height:14px; }

  /* Llista de preus just sota la foto de portada, arran de la dreta
     (no superposada ni centrada com l'horari) — viu fora de
     .servei-page perquè no li afecti el padding-top d'aquell
     contenidor. */
  .servei-hero-price-row{
    max-width:1200px;
    margin:0 auto;
    padding:0 6vw 1.2rem;
    display:flex;
    justify-content:flex-end;
  }
  .classes-price--below{}

  /* Si el servei no té imatge destacada, no hi ha foto on superposar
     res: el títol/subtítol es mostren en el flux normal (sota el
     breadcrumb), amb els colors habituals de text (no blancs). */
  .servei-page > .servei-hero-text{
    padding-top:0.4rem;
  }
  .servei-page > .servei-hero-text h1{ color:var(--navy); text-shadow:none; }
  .servei-page > .servei-hero-text .servei-hero-lead{ color:#3f4c60; text-shadow:none; }
  .servei-page > .servei-hero-text .servei-hero-location{ color:#3f4c60; text-shadow:none; }

  .servei-body-wrap{
    max-width:1200px;
    margin:0 auto 2.5rem;
  }
  /* Bloc d'horari/preus a la pàgina pròpia d'una classe dirigida
     (single-vm_classe_dirigida.php) — reutilitza l'estil de
     .classes-banner-text però fora del context del banner amb foto,
     així que no calen els mateixos marges pensats per l'info-link
     absolut de sota. */
  .classes-banner-text-standalone{
    max-width:74ch;
    margin:0 auto 0.4rem;
    padding-bottom:0.6rem;
    align-items:flex-start;
  }
  .classes-banner-text-standalone .svc-info-link{ position:static; }
  .servei-body{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.98rem;
    line-height:1.8;
    color:#3f4c60;
  }
  .servei-body p{ margin-bottom:1.2rem; }
  .servei-body h2{
    font-family:var(--font-h2), 'Alga', serif;
    font-weight:var(--font-h2-weight, 400);
    font-style:var(--font-h2-style, normal);
    font-size:clamp(1.4rem, 2.6vw, 1.9rem);
    color:var(--navy);
    margin:1.8rem 0 0.8rem;
  }

  /* ---------- Especialitats dins d'un servei (fotos circulars) ---------- */
  .servei-especialitats{
    margin:0 auto 3rem;
    max-width:1000px;
    text-align:center;
  }
  .servei-especialitats-title{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage-deep);
    margin-bottom:1.6rem;
  }
  .especialitat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:2rem;
  }
  .especialitat-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .especialitat-photo{
    width:140px;
    height:140px;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
    box-shadow:0 14px 30px -18px rgba(38,54,74,0.45);
    margin-bottom:1rem;
  }
  .especialitat-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .especialitat-card h4{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1rem;
    font-weight:600;
    color:var(--navy);
    margin-bottom:0.4rem;
  }
  .especialitat-card p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.86rem;
    line-height:1.55;
    color:#5c6b80;
  }

  /* ---------- Vídeo opcional d'un servei ----------
     Camp ACF "video_fitxer" (Serveis → Editar servei → "Fitxer de
     vídeo"): un fitxer pujat directament a WordPress, NO l'embed
     d'Instagram. El contenidor omple tot l'espai reservat només amb
     el vídeo (relació 9:16, com un Reel), sense títol ni cap text
     ni marge en blanc al voltant — el vídeo talla (object-fit:cover)
     per no deixar franges buides. */
  .servei-video-full{
    max-width:540px;
    aspect-ratio:9/16;
    margin:0 auto 3rem;
    border-radius:18px;
    overflow:hidden;
    background:#000;
  }
  .servei-video-full video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* ---------- Banner "Reservar cita" al final de la pàgina de servei ---------- */
  .servei-cta-banner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    background:rgba(201,217,168,0.22);
    border-radius:26px;
    padding:2.2rem 2.4rem;
    margin-bottom:3rem;
  }
  .servei-cta-banner-text h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1.15rem;
    font-weight:600;
    color:var(--navy);
    margin-bottom:0.4rem;
  }
  .servei-cta-banner-text p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.92rem;
    line-height:1.6;
    color:#5c6b80;
  }
  .servei-cta-banner .cta-btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    flex:0 0 auto;
    background:var(--navy);
    color:#fff;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.9rem;
    letter-spacing:0.03em;
    padding:0.85rem 1.8rem;
    border-radius:100px;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .servei-cta-banner .cta-btn:hover{ background:var(--sage-deep); color:var(--navy-deep); }
  @media (max-width:600px){
    .servei-cta-banner{ flex-direction:column; text-align:center; padding:1.8rem; }
    .servei-cta-banner .cta-btn{ width:100%; justify-content:center; }
  }

  .servei-related-title{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage-deep);
    margin-bottom:1.2rem;
  }
  .servei-related{ margin-top:1rem; }

  /* Targetes de "Altres serveis" més petites que les del hub
     /serveis/, perquè no competeixin visualment amb el contingut
     principal de la subpàgina. */
  .servei-related .svc-page-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.2rem;
    margin-bottom:0;
  }
  .servei-related .svc-page-card{
    flex-direction:column;
    padding:0.9rem 0.9rem 2.2rem;
  }
  .servei-related .svc-page-photo{
    flex:0 0 auto;
    width:100%;
    min-height:0;
    aspect-ratio:4/3;
  }
  .servei-related .svc-page-card h3{ font-size:0.92rem; padding-bottom:0.35rem; }
  .servei-related .svc-page-card p{
    font-size:0.82rem;
    -webkit-line-clamp:2;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .servei-related .svc-page-card .svc-info-link{ right:0.9rem; bottom:0.8rem; font-size:0.78rem; }
  @media (max-width:760px){
    .servei-related .svc-page-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:500px){
    .servei-related .svc-page-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Portada de les subpàgines (servei / classe dirigida) a MÒBIL ----------
     - La foto és més alta (proporcional a l'alçada de la pantalla) en lloc
       d'encongir-se al voltant del text.
     - El text queda centrat verticalment a la foto, i un padding superior
       fix (alçada de la barra de navegació, ~103px) evita que el menú es
       barregi amb el títol o el subtítol.
     - Tota la tipografia va en proporció a l'amplada de la pantalla
       (vw, amb mínim i màxim) perquè no quedi enorme en pantalles petites. */
  @media (max-width:860px){
    .servei-hero-overlay{
      min-height:56vh;
      min-height:56svh;
      padding:calc(7.5rem + env(safe-area-inset-top, 0px)) 6vw 2.6rem;
      justify-content:center;
    }
    .servei-hero-text{ padding-top:0; }
    .servei-hero-text h1{
      font-size:clamp(1.65rem, 7.2vw, 2.3rem);
      line-height:1.18;
      margin-bottom:0.6rem;
    }
    .servei-hero-lead{
      font-size:clamp(0.76rem, 3.3vw, 0.9rem);
      line-height:1.5;
      max-width:34em;
      margin-left:auto;
      margin-right:auto;
    }
    .servei-hero-location{
      font-size:clamp(0.68rem, 3vw, 0.78rem);
      margin-bottom:0.4rem;
    }
    .servei-hero-info{ margin-top:0.9rem; gap:0.6rem; }
    .servei-hero-cta{ margin-top:1.8rem; }
    .servei-hero-cta .cta-btn{ padding:0.55rem 1.2rem; font-size:0.78rem; gap:0.4rem; }
    .servei-hero-cta .cta-btn svg{ width:12px; height:12px; }
  }

  /* ---------- CONTACTE (mapa i caixa costat a costat en escriptori) ---------- */

  .contact-block{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    align-items:stretch;
    gap:1.8rem;
  }
  .contact-map-col{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
  }
  .contact-map-top{
    flex:1;
    width:100%;
    min-height:340px;
    border-radius:28px;
    overflow:hidden;
    background:rgba(201,217,168,0.25);
  }
  .contact-map-top iframe{
    width:100%;
    height:100%;
    min-height:340px;
    border:0;
    display:block;
  }
  .contact-map-link{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    align-self:flex-start;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.88rem;
    font-weight:500;
    color:var(--navy);
    border-bottom:1px solid var(--sage-deep);
    padding-bottom:0.15rem;
    transition:color 0.2s ease;
  }
  .contact-map-link svg{ width:17px; height:17px; flex-shrink:0; color:var(--sage-deep); }
  .contact-map-link:hover{ color:var(--sage-deep); }
  .contact-map-link:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; border-radius:2px; }

  .contact-box{
    display:flex;
    flex-direction:column;
    background:var(--navy);
    border-radius:28px;
    padding:2.8rem 2.8rem 2.4rem;
    color:#fff;
    text-align:left;
  }
  .contact-box-text{ max-width:60ch; margin-bottom:1.6rem; }
  .contact-box-text h2{
    font-size:clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight:400;
    line-height:1.35;
    color:#fff;
    margin-bottom:0.8rem;
  }
  .contact-box-text p{
    color:rgba(255,255,255,0.78);
    line-height:1.75;
  }

  .contact-box-info{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
    margin-bottom:1.8rem;
    list-style:none;
  }
  .info-row{
    display:flex;
    align-items:flex-start;
    gap:0.9rem;
    border-bottom:1px solid rgba(255,255,255,0.14);
    padding-bottom:1.1rem;
  }
  .info-row-icon{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(201,217,168,0.16);
    color:var(--sage);
  }
  .info-row-icon svg{ width:19px; height:19px; }
  .info-row-text{ display:flex; flex-direction:column; gap:0.3rem; padding-top:0.15rem; }
  .info-row-label{
    color:var(--sage);
    font-size:0.74rem;
    text-transform:uppercase;
    letter-spacing:0.16em;
  }
  .info-row-value{
    font-size:0.98rem;
    line-height:1.55;
    color:#fff;
  }
  .info-row-value a{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,0.4); }
  .info-row-value a:hover{ color:var(--sage); text-decoration-color:var(--sage); }

  .contact-box .contact-main-cta{ margin-top:auto; }

  @media (max-width:900px){
    .contact-block{ grid-template-columns:1fr; }
    .contact-map-top, .contact-map-top iframe{ min-height:300px; }
  }
  @media (max-width:600px){
    .contact-box{ padding:2.2rem 1.7rem 2rem; border-radius:20px; }
    .contact-map-top, .contact-map-top iframe{ min-height:260px; }
  }

  /* ---------- CONTACTE page (obsolet, mantingut per compatibilitat) ---------- */

  .contact-page-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:start;
    text-align:left;
  }
  .contact-info-card{
    background:var(--navy);
    border-radius:28px;
    padding:3rem 2.6rem;
    color:#fff;
  }
  .contact-info-card .info-list{ margin-bottom:2.2rem; }
  .contact-info-card .info-row a{ color:#fff; }
  .contact-info-card .info-row a:hover{ color:var(--sage); }

  .contact-col{
    display:flex;
    flex-direction:column;
    gap:1.6rem;
  }
  .contact-main-cta{ width:100%; justify-content:center; margin-bottom:1.4rem; }

  .contact-actions{
    display:flex;
    flex-wrap:wrap;
    gap:0.8rem;
  }
  .contact-action-btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    flex:1 1 auto;
    justify-content:center;
    padding:0.75rem 1.1rem;
    border:1px solid rgba(255,255,255,0.35);
    border-radius:100px;
    color:#fff;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.84rem;
    letter-spacing:0.02em;
    transition:background 0.2s ease, border-color 0.2s ease;
  }
  .contact-action-btn svg{ width:16px; height:16px; flex-shrink:0; }
  .contact-action-btn:hover{ background:rgba(255,255,255,0.12); border-color:#fff; }
  .contact-action-btn:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
  .contact-action-btn.whatsapp{ border-color:#3fbf6f; }
  .contact-action-btn.whatsapp:hover{ background:#25D366; border-color:#25D366; }
  .contact-action-btn.instagram{ border-color:#e1306c; }
  .contact-action-btn.instagram:hover{ background:#e1306c; border-color:#e1306c; }

  .contact-map{
    width:100%;
    min-height:420px;
    border-radius:28px;
    overflow:hidden;
    background:rgba(201,217,168,0.25);
  }
  .contact-map iframe{
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
    display:block;
  }

  @media (max-width:860px){
    .contact-page-grid{ grid-template-columns:1fr; }
    .contact-map{ min-height:320px; order:-1; }
    .contact-map iframe{ min-height:320px; }
  }

  .blog-post-cta{
    margin:3rem 0 2.5rem;
    padding:2rem 1.8rem;
    background:rgba(201,217,168,0.18);
    border-radius:24px;
    text-align:center;
  }
  .blog-post-cta h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1.1rem;
    font-weight:600;
    color:var(--navy);
    margin-bottom:0.6rem;
  }
  .blog-post-cta p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.92rem;
    line-height:1.6;
    color:#5c6b80;
    max-width:46ch;
    margin:0 auto 1.3rem;
  }
  .blog-post-cta .cta-btn{
    display:inline-block;
    background:var(--navy);
    color:#fff;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.88rem;
    letter-spacing:0.03em;
    padding:0.75rem 1.7rem;
    border-radius:100px;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .blog-post-cta .cta-btn:hover{ background:var(--sage-deep); color:var(--navy-deep); }

  .blog-related{ margin-top:2.5rem; }
  .blog-related-title{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage-deep);
    margin-bottom:1.2rem;
  }
  .blog-related-track{
    display:flex;
    gap:1.4rem;
    overflow-x:auto;
    padding:0.2rem 0.2rem 0.8rem;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .blog-related-track::-webkit-scrollbar{ display:none; }
  .blog-related-track .blog-card{
    flex:0 0 210px;
    scroll-snap-align:start;
  }
  .blog-related-track .blog-card-photo{
    aspect-ratio:4/3;
    margin-bottom:0.7rem;
  }
  .blog-related-track .blog-card h3{
    font-size:0.92rem;
    margin-bottom:0.35rem;
  }
  .blog-related-track .blog-card p{
    font-size:0.8rem;
    -webkit-line-clamp:2;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* --- scene 2 overlay: hotspots on the interior photo --- */
  .hotspot-layer{
    position:absolute;
    inset:0;
    z-index:6;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s ease;
    will-change:transform; /* script.js hi aplica el parallax de sortida cap a Opinions */
  }
  .hotspot-layer.active{
    opacity:1;
    pointer-events:auto;
  }

  .hotspot{
    position:absolute;
    top:var(--hs-top);
    left:var(--hs-left);
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    gap:0.7rem;
  }

  /* Mateix punt de tall que la foto mòbil del hero: per sota, cada
     hotspot fa servir la seva posició "mòbil" en lloc de la
     d'escriptori, ja que la foto es veu retallada de forma diferent. */
  @media (max-width:900px){
    .hotspot{
      top:var(--hs-top-m);
      left:var(--hs-left-m);
    }
  }

  .hotspot .dot{
    width:14px; height:14px;
    border-radius:50%;
    background:var(--sage);
    box-shadow:0 0 0 0 rgba(201,217,168,0.55);
    animation: dot-pulse 2.6s ease-in-out infinite;
    flex-shrink:0;
  }
  @keyframes dot-pulse{
    0%{ box-shadow:0 0 0 0 rgba(201,217,168,0.55); }
    70%{ box-shadow:0 0 0 16px rgba(201,217,168,0); }
    100%{ box-shadow:0 0 0 0 rgba(201,217,168,0); }
  }

  .hotspot .label{
    background:rgba(38,54,74,0.82);
    backdrop-filter:blur(6px);
    color:var(--sage);
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.75rem;
    letter-spacing:0.15em;
    padding:0.55rem 1rem;
    border-radius:100px;
    white-space:nowrap;
    /* Visible des del primer moment (com ja passava a mòbil), en
       comptes de dependre de fer hover per llegir-lo. */
    opacity:1;
  }
  .hotspot:hover .label,
  .hotspot:focus-visible .label{
    background:rgba(38,54,74,0.95);
  }
  .hotspot:hover .dot,
  .hotspot:focus-visible .dot{
    background:#fff;
  }

  .scene2-caption{
    position:absolute;
    top:14vh;
    left:6vw;
    z-index:6;
    max-width:26ch;
    opacity:0;
    transition:opacity 0.5s ease;
    will-change:transform; /* script.js hi aplica el parallax de sortida cap a Opinions */
  }
  .scene2-caption.active{ opacity:1; }
  .scene2-caption .kicker{
    font-size:0.75rem;
    letter-spacing:0.26em;
    color:var(--sage);
    margin-bottom:0.8rem;
  }
  .scene2-caption h2{
    color:#fff;
    font-size:clamp(1.6rem, 3.4vw, 2.2rem);
    font-style:italic;
    font-weight:400;
    line-height:1.3;
    text-shadow:0 2px 20px rgba(0,0,0,0.35);
  }

  /* ---------- CONTENT SECTIONS ---------- */

  main{ position:relative; z-index:10; background:var(--cream); }

  .section{
    padding:7.5rem 6vw;
    max-width:1180px;
    margin:0 auto;
  }

  /* La secció de contacte (#contacte) ve just després de la secció
     d'Opinions, que ja acaba justa al peu de les targetes de
     ressenyes (sense marge propi) — sense aquest ajust, la separació
     entre totes dues quedava massa gran (el padding-top genèric de
     .section és pensat per a seccions que no van precedides d'un
     bloc que ja acaba just al ras). */
  #contacte.section{
    padding-top:2rem;
  }

  .section-head{
    text-align:center;
    max-width:52ch;
    margin:0 auto 4rem;
  }
  .section-head .kicker{
    font-size:0.78rem;
    letter-spacing:0.26em;
    color:var(--sage-deep);
    margin-bottom:1rem;
  }
  .section-head h2{
    font-size:clamp(1.8rem, 3.6vw, 2.6rem);
    line-height:1.3;
  }
  .section-head p{
    margin-top:1.2rem;
    color:#54637a;
    line-height:1.75;
    font-size:1rem;
  }

  /* services grid */
  .services{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:1px;
    background:rgba(38,54,74,0.1);
    border:1px solid rgba(38,54,74,0.1);
  }
  .service-card{
    background:var(--cream);
    padding:2.6rem 2rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
    transition:background 0.3s ease;
  }
  .service-card:hover{ background:#fff; }
  .service-card .num{
    font-family:var(--font-h1), 'Alga', serif;
    font-style:italic;
    font-size:1.6rem;
    color:var(--sage-deep);
  }
  .service-card h3{
    font-size:1.15rem;
    font-weight:600;
    font-family:var(--font-ui), 'Jost', sans-serif;
  }
  .service-card p{
    font-size:0.92rem;
    color:#5c6b80;
    line-height:1.65;
  }

  /* hours / contact split */
  .split{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:4rem;
    align-items:center;
    background:var(--navy);
    border-radius:28px;
    padding:4.5rem 5vw;
    color:#fff;
  }
  .split h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    font-weight:400;
    line-height:1.35;
    color:#fff;
    margin-bottom:1.6rem;
  }
  .split p{
    color:rgba(255,255,255,0.78);
    line-height:1.75;
    max-width:44ch;
  }
  .info-list{
    display:flex;
    flex-direction:column;
    gap:1.6rem;
  }
  .info-list .info-row{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.14);
    padding-bottom:1.2rem;
    font-size:0.98rem;
  }
  .info-list .info-row span:first-child{ color:var(--sage); letter-spacing:0.04em; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.18em; }
  .info-list .info-row span:last-child{ text-align:right; }

  .final-cta{
    text-align:center;
    padding-top:6rem;
  }
  .final-cta h2{
    font-size:clamp(2rem, 4.4vw, 3rem);
    font-weight:400;
    max-width:16ch;
    margin:0 auto 2rem;
  }

  /* ==================================================================
     PEU DE PÀGINA (footer.php) — comú a totes les pàgines. Fons blau
     fosc corporatiu (var(--navy-deep)), el mateix que altres blocs
     foscos del lloc (per exemple .team-modal). Contingut editable des
     de Aparença > Personalitza: "Peu de pàgina" (foto de
     col·laboracions) i "Dades de contacte Vitalmans" (ubicació,
     horari...); els Serveis del peu surten sols del tipus de
     contingut "Serveis" i "Pàgines" del menú (Aparença > Menús).
     ================================================================== */
  .site-footer{
    background:var(--navy-deep);
    color:rgba(255,255,255,0.78);
    padding:5rem 6vw 0;
  }
  .site-footer-inner{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:2.5rem;
    max-width:1200px;
    margin:0 auto;
    padding-bottom:3.5rem;
    border-bottom:1px solid rgba(255,255,255,0.12);
    text-align:center;
  }
  .footer-col h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage);
    margin-bottom:1.1rem;
  }
  .footer-address{
    font-size:0.92rem;
    line-height:1.6;
    margin-bottom:1.4rem;
  }
  .footer-social{
    display:flex;
    justify-content:center;
    gap:0.7rem;
  }
  .footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    color:#fff;
    transition:background 0.2s ease, border-color 0.2s ease;
  }
  .footer-social a svg{ width:17px; height:17px; }
  .footer-social a:hover{
    background:var(--sage);
    border-color:var(--sage);
    color:var(--navy-deep);
  }
  .footer-nav-links{
    list-style:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.75rem;
  }
  .footer-nav-links a{
    color:rgba(255,255,255,0.78);
    font-size:0.92rem;
    transition:color 0.2s ease;
  }
  .footer-nav-links a:hover{ color:var(--sage); }
  .footer-nav-links .footer-nav-more{
    color:var(--sage);
    font-weight:500;
  }

  /* --- "En col·laboració amb" — logos dels col·laboradors (CPT
     "Col·laboradors"). Sense fons ni requadre: si el logo es puja en
     PNG amb el fons transparent, es veu així de net sobre el peu de
     pàgina (no s'hi afegeix cap caixa blanca al darrere). --- */
  .footer-collab-logos{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:1.8rem 2.2rem;
  }
  .footer-collab-logo{
    display:inline-flex;
    max-width:100%;
  }
  .footer-collab-logo img{
    display:block;
    max-height:110px;
    max-width:260px;
    width:auto;
    height:auto;
    object-fit:contain;
  }
  a.footer-collab-logo{
    opacity:0.9;
    transition:opacity 0.2s ease;
  }
  a.footer-collab-logo:hover{ opacity:1; }

  .footer-bottom{
    max-width:1200px;
    margin:0 auto;
    padding:2rem 0 2.5rem;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.82rem;
    color:rgba(255,255,255,0.55);
    border-top:1px solid rgba(255,255,255,0.12);
    text-align:center;
  }
  .footer-bottom .brand{
    font-family:var(--font-nav-brand), 'Alga', serif;
    font-style:var(--font-nav-brand-style, italic);
    font-weight:var(--font-nav-brand-weight, 400);
    color:#fff;
  }
  .footer-legal-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:0.5rem 0.9rem;
    list-style:none;
    margin:0;
    padding:0;
  }
  .footer-legal-links li{ display:flex; align-items:center; gap:0.9rem; }
  .footer-legal-links li + li::before{
    content:"";
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(255,255,255,0.35);
    display:block;
  }
  .footer-legal-links a{
    color:rgba(255,255,255,0.55);
    transition:color 0.2s ease;
  }
  .footer-legal-links a:hover{ color:#fff; }

  @media (max-width:900px){
    .site-footer{ padding-top:4rem; }
    .site-footer-inner{
      grid-template-columns:1fr 1fr;
      gap:2.5rem 1.5rem;
    }
    .footer-col-contacte{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    .site-footer-inner{ grid-template-columns:1fr; gap:2.2rem; }
    .footer-bottom{ justify-content:center; text-align:center; }

    /* Mòbil: ordre Serveis (Pàgines) → Col·laboradors → Contacte, i
       el llistat de pàgines/serveis en fila horitzontal (amb salt de
       línia si cal) en lloc de llista vertical. L'ordre de sortida a
       l'HTML no canvia (Contacte primer, per a lectors de pantalla i
       cerca), només l'ordre visual amb "order". */
    .footer-col-links{ order:1; text-align:center; }
    .footer-col-collab{ order:2; }
    .footer-col-contacte{ order:3; }
    .footer-col-links .footer-nav-links{
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      gap:0.5rem 1.1rem;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .footer-social a, a.footer-collab-logo{ transition:none; }
  }


  @media (max-width:820px){
    .split{ grid-template-columns:1fr; border-radius:20px; padding:3rem 6vw; }
    .section{ padding:5rem 6vw; }
    .hotspot .label{
      font-size:0.7rem;
      padding:0.4rem 0.7rem;
    }
    .hotspot .dot{ width:10px; height:10px; }
    .site-nav{ padding:1.6rem 6vw; }
    .site-nav.is-solid{ padding:1rem 6vw; }
  }

  @media (prefers-reduced-motion: reduce){
    .hotspot .dot{ animation:none; }
  }

  /* ---------- TEAM MODAL (banner "Coneix l'equip") ---------- */

  .team-modal-overlay{
    position:fixed;
    inset:0;
    z-index:500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5vh 5vw;
    opacity:0;
    pointer-events:none;
    /* visibility:hidden treu del tot el modal tancat: ni es pot clicar,
       ni seleccionar, ni s'hi arriba amb el tabulador. Abans, els botons
       .cta-btn de dins (pointer-events:auto propi) seguien sent clicables
       encara que el modal fos invisible. */
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .team-modal-overlay:not(.active),
  .team-modal-overlay:not(.active) *{
    pointer-events:none !important;
  }
  .team-modal-overlay.active{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transition:opacity 0.3s ease, visibility 0s linear 0s;
  }
  /* El fons fosc + desenfocat va en una capa pròpia (::before) DARRERE del
     modal, en lloc de a l'overlay. Amb backdrop-filter a l'overlay (pare del
     modal, que té transform:scale i scroll propi), Chrome Android pintava
     part del modal per SOTA del fons fosc: es veia grisós i difuminat, amb
     només alguns trossos nítids. A mòbil, a més, es treu el desenfocament
     (només queda el to fosc), que és el que dóna problemes de rendiment. */
  .team-modal-overlay::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(26,38,53,0.68);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
  @media (max-width:900px){
    .team-modal-overlay::before{
      background:rgba(26,38,53,0.78);
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }
  }

  .team-modal{
    position:relative;
    z-index:1;
    background:var(--cream);
    border-radius:28px;
    max-width:860px;
    width:100%;
    max-height:92vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2rem 3rem 1.8rem;
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.45);
    transform:scale(0.7);
    transition:transform 0.5s cubic-bezier(.16,.8,.24,1);
    text-align:center;
  }
  .team-modal-overlay.active .team-modal{
    transform:scale(1);
  }

  /* --- foto de fons dels banners amb ubicació + zoom personalitzables
     (Coneix l'equip, Serveis, Blog) — capa separada del contingut,
     amb z-index negatiu, perquè el zoom (transform:scale, triat a
     Aparença > Personalitza > "Imatges dels banners") i el degradat
     fosc de llegibilitat només afectin la foto, mai el text ni els
     botons de sobre. .banner-bg-wrap talla en sec a les vores del
     quadre (mateixes cantonades arrodonides) perquè el zoom mai
     desborde ni obligui a fer scroll horitzontal. --- */
  .banner-bg-wrap{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:inherit;
    z-index:-1;
  }
  .banner-bg{
    position:absolute;
    inset:-10px;
    background-image:var(--banner-bg-image);
    background-size:cover;
    background-position:var(--banner-bg-position, 50% 50%);
    background-repeat:no-repeat;
    transform:scale(var(--banner-bg-scale, 1));
  }
  .banner-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(26,38,53,0.82), rgba(26,38,53,0.9));
  }

  /* --- zoom d'aproximació: cada modal creix des del punt on és el seu botó --- */
  #teamModalOverlay .team-modal{ transform-origin:24% 40%; }
  #centreModalOverlay .team-modal{ transform-origin:40% 72%; }
  #servicesModalOverlay .team-modal{ transform-origin:52% 33%; }
  #blogModalOverlay .team-modal{ transform-origin:15% 20%; }
  #sobreModalOverlay .team-modal{ transform-origin:80% 45%; }

  /* --- finestra "Reservar cita — tria el centre" --- */
  .reserve-centre-modal{ max-width:460px; }
  .reserve-centre-options{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
    margin-top:1.4rem;
  }
  .reserve-centre-options .cta-btn{
    width:100%;
    justify-content:center;
  }
  .reserve-centre-logo{
    width:26px;
    height:26px;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
    flex-shrink:0;
  }

  .team-modal-close{
    position:absolute;
    top:1.4rem;
    right:1.4rem;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(38,54,74,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s ease;
  }
  .team-modal-close:hover{ background:rgba(38,54,74,0.14); }
  .team-modal-close svg{ width:16px; height:16px; }

  .team-modal .kicker{
    font-size:0.78rem;
    letter-spacing:0.26em;
    color:var(--sage-deep);
    margin-bottom:0.6rem;
  }
  .team-modal h2{
    font-size:clamp(1.6rem, 3.2vw, 2.1rem);
    line-height:1.3;
    margin-bottom:0.6rem;
  }
  .team-modal > p.intro{
    color:#54637a;
    line-height:1.6;
    max-width:46ch;
    margin:0 auto 1.8rem;
    font-size:0.94rem;
  }

  .founders-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.8rem;
    max-width:560px;
    margin:0 auto 1.8rem;
  }
  .founder-card{
    text-align:center;
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1);
  }
  .founder-card:hover{ transform:translateY(-5px); }
  .founder-photo{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    border-radius:20px;
    overflow:hidden;
    background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
    margin:0 auto 1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 12px 30px -20px rgba(38,54,74,0.45);
    /* El contingut del popover (nom, especialitat, descripcio...) es
       dimensiona amb "cqw" (unitats relatives a l'amplada d'AQUESTA
       capsa) perque sigui sempre proporcional a la mida real de la
       targeta -- tant si hi ha 2 com 3 columnes, tant a mobil com a
       escriptori -- en lloc de dependre de punts de ruptura fixos. */
    container-type:inline-size;
    container-name:founder-card;
  }
  .founder-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease, filter 0.4s ease;
  }
  .founder-photo:hover img,
  .founder-photo.active img{
    transform:scale(1.06);
    filter:brightness(0.5);
  }

  /* --- social-style profile popover, revealed on hover/tap --- */
  .founder-profile{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    --fit:1; /* script.js baixa aquest valor fins que tot el text hi cap */
    font-size:calc(clamp(8px, 5.5cqw, 12px) * var(--fit));
    padding:calc(clamp(0.55rem, 7cqw, 1.2rem) * var(--fit)) calc(clamp(0.5rem, 6cqw, 1rem) * var(--fit));
    background:linear-gradient(180deg, rgba(26,38,53,0.35) 0%, rgba(26,38,53,0.86) 45%, rgba(26,38,53,0.94) 100%);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity 0.3s ease, transform 0.3s ease;
    overflow-y:auto;
    scrollbar-width:none;
  }
  .founder-profile::-webkit-scrollbar{ display:none; }
  .founder-photo:hover .founder-profile,
  .founder-photo.active .founder-profile{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .founder-profile .avatar{
    width:min(calc(20cqw * var(--fit)), 58px);
    height:min(calc(20cqw * var(--fit)), 58px);
    border-radius:50%;
    overflow:hidden;
    border:2px solid var(--sage);
    margin-bottom:0.65em;
    box-shadow:0 4px 18px rgba(0,0,0,0.35);
    flex-shrink:0;
  }
  .founder-profile .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:none;
    transform:none;
  }
  .founder-profile .p-name{
    font-family:var(--font-ui), 'Jost', sans-serif;
    color:#fff;
    font-size:1.36em;
    font-weight:600;
    line-height:1.25;
    margin-bottom:0.33em;
  }
  .founder-profile .p-specialty{
    display:inline-block;
    font-size:0.9em;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--navy-deep);
    background:var(--sage);
    padding:0.3em 0.75em;
    border-radius:100px;
    margin-bottom:0.55em;
  }
  .founder-profile .p-colegiat{
    font-size:0.92em;
    letter-spacing:0.03em;
    color:rgba(255,255,255,0.65);
    margin-bottom:0.65em;
  }
  .founder-profile .p-desc{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:1em;
    line-height:1.4;
    color:rgba(255,255,255,0.92);
    width:100%;
  }

  .founder-card h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:0.3rem;
  }
  .founder-card .role{
    display:inline-block;
    font-size:0.72rem;
    letter-spacing:0.08em;
    color:var(--navy);
    background:rgba(201,217,168,0.4);
    padding:0.28rem 0.8rem;
    border-radius:100px;
    text-transform:uppercase;
    margin-top:0.15rem;
  }

  /* --- botó "Saber més": ara viu dins la mateixa "founder-profile"
     (el popover fosc que es veu en fer hover/tap a la foto), just
     sota la descripció. Obre el banner ampliat #memberDetailOverlay
     (vegeu page-equip.php i el bloc "member-detail" mes avall). --- */
  .founder-profile .saber-mes-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.3rem;
    margin:0.8em auto 0;
    flex-shrink:0;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.88em;
    letter-spacing:0.03em;
    color:#fff;
    background:transparent;
    border:1px solid var(--sage);
    padding:0.4em 0.95em;
    border-radius:100px;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .saber-mes-btn svg{ width:1em; height:1em; transition:transform 0.2s ease; }
  .founder-profile .saber-mes-btn:hover{
    background:var(--sage);
    color:var(--navy-deep);
  }
  .saber-mes-btn:hover svg{ transform:translateX(2px); }

  .team-modal .rest-link{
    display:inline-block;
    margin-top:0.4rem;
    font-size:0.92rem;
    letter-spacing:0.03em;
    color:var(--navy);
    border-bottom:1px solid var(--sage-deep);
    padding-bottom:0.2rem;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .team-modal .rest-link:hover{
    color:var(--sage-deep);
  }

  /* --- Banners dels hotspots (Equip, Serveis, Blog, Sobre Nosaltres): mateix aspecte clar que
     "El centre" — fons blanc/crema (el .team-modal base), text blau marí, sense foto ni degradat de fons. --- */
  #servicesModalOverlay .svc-card-actions{ display:none; }

  body.modal-open{ overflow:hidden; }

  /* ---------- L'EQUIP page (bosses + rest of specialists) ---------- */


  .team-section-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.1rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.82rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--sage-deep);
    text-align:center;
    margin:0 0 1.8rem;
  }
  .team-section-title::before,
  .team-section-title::after{
    content:'';
    height:1px;
    width:36px;
    background:rgba(38,54,74,0.18);
  }
  .team-page-founders{ margin-bottom:3.5rem; }

  /* --- banner "Saber més" (#memberDetailOverlay): mateixa fitxa de
     persona (avatar, especialitat, colegiat, descripció) que el
     "founder-profile" de la targeta, pero mes gran i sempre visible,
     amb un apartat extra "Eines i especialitats" a sota. Es un unic
     modal compartit per totes les persones: page-equip.php hi passa
     les dades via atributs "data-*" al botó "Saber més" i script.js
     els bolca aqui dins en fer clic (vegeu "memberDetailOverlay"). --- */
  .member-detail-modal{
    max-width:480px;
    padding-left:1.7rem;
    padding-right:1.7rem;
  }
  @media (min-width:901px){
    /* Banner "Saber més" mes ample nomes a la versio d'escriptori */
    .member-detail-modal{ max-width:660px; padding-left:2.2rem; padding-right:2.2rem; }
    .member-detail-desc{ max-width:none; }
    .member-detail-tools p,
    .member-detail-tools ul,
    .member-detail-tools ol{ max-width:none; }
  }
  .member-detail-photo{
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    margin:0.4rem auto 1.1rem;
    border:3px solid var(--sage);
    box-shadow:0 10px 26px -14px rgba(38,54,74,0.5);
  }
  .member-detail-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .member-detail-modal h2{
    font-size:clamp(1.3rem, 2.6vw, 1.6rem);
    margin-bottom:0.5rem;
  }
  .member-detail-modal .role{
    margin:0 auto 0.6rem;
  }
  .member-detail-modal .p-specialty{
    display:inline-block;
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--navy-deep);
    background:var(--sage);
    padding:0.3rem 0.8rem;
    border-radius:100px;
    margin:0 0.3rem 0.7rem;
  }
  .member-detail-modal .p-colegiat{
    display:block;
    font-size:0.78rem;
    letter-spacing:0.03em;
    color:#54637a;
    margin-bottom:1rem;
  }
  .member-detail-desc{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.88rem;
    line-height:1.6;
    color:#3d4a5c;
    max-width:none;
    margin:0 auto;
  }
  .member-detail-tools{
    margin-top:1.6rem;
    padding-top:1.4rem;
    border-top:1px solid rgba(38,54,74,0.12);
  }
  .member-detail-tools-title{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.82rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--sage);
    margin-bottom:0.6rem;
  }
  /* El contingut ve de l'editor visual de WordPress (ACF wysiwyg), per
     tant pot portar negreta, llistes amb punts o numerades, etc. */
  .member-detail-tools p,
  .member-detail-tools ul,
  .member-detail-tools ol{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.86rem;
    line-height:1.6;
    color:#3d4a5c;
    max-width:none;
    margin:0 auto 0.6rem;
    text-align:left;
  }
  .member-detail-tools p:last-child,
  .member-detail-tools ul:last-child,
  .member-detail-tools ol:last-child{ margin-bottom:0; }
  .member-detail-tools strong,
  .member-detail-tools b{ color:var(--navy); font-weight:600; }
  .member-detail-tools ul,
  .member-detail-tools ol{ padding-left:1.2rem; }
  .member-detail-tools ul{ list-style:disc; }
  .member-detail-tools ol{ list-style:decimal; }
  .member-detail-tools li{ margin-bottom:0.3rem; }
  .member-detail-tools li:last-child{ margin-bottom:0; }
  .member-detail-tools:empty,
  .member-detail-tools.is-empty{ display:none; }

  @media (max-width: 640px){
    .member-detail-photo{ width:96px; height:96px; }
  }

  /* --- targetes de Serveis amb foto de fons (títol + CTA "Reservar cita"): vegeu vitalmans_render_serveis_pills()
     a functions.php. Es fan servir a "El centre" i, via shortcode, a
     qualsevol contingut de "Sobre Nosaltres" (p. ex. "Can Felipa"). --- */
  .serveis-pills-block{ margin:0 0 3.4rem; }
  .serveis-pills-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.1rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.9rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--sage-deep);
    text-align:center;
    margin:0 0 0.5rem;
  }
  .serveis-pills-title::before,
  .serveis-pills-title::after{
    content:'';
    height:1px;
    width:36px;
    background:rgba(38,54,74,0.18);
  }
  .serveis-pills-subtitle{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.98rem;
    color:var(--navy);
    opacity:0.75;
    text-align:center;
    max-width:540px;
    margin:0 auto 1.7rem;
    line-height:1.55;
  }
  .serveis-pills{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1rem;
  }
  /* Caixa rectangular de cantonades arrodonides amb la foto del
     servei com a fons a tota la caixa (no només a dalt) i un degradat
     fosc per sota per llegir el text — títol a l'esquerra, CTA
     "Reservar cita" a la dreta (mateixa fila) i, a sota, una petita
     descripció. Graella de posicionament (grid-template-areas) en
     lloc de columnes flex perquè el títol i el CTA no es xoquin mai,
     encara que el nom del servei sigui llarg. */
  .servei-pill{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"title cta";
    align-items:end;
    align-content:end; /* títol + CTA a la part de baix de la foto */
    column-gap:0.7rem;
    min-height:150px;
    padding:1rem 1.1rem 1rem;
    border-radius:18px;
    overflow:hidden;
    isolation:isolate; /* nou context d'apilament: .servei-pill-scrim i la foto queden per darrere de tot sense fer-ho servir a fora */
  }
  .servei-pill-photo{
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  /* Degradat fosc de baix a dalt (i una mica per tota la caixa) perquè
     el títol, el CTA i la descripció es llegeixin bé sobre qualsevol
     foto, sense amagar-la del tot. */
  .servei-pill-scrim{
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg, rgba(20,30,44,0.55) 0%, rgba(20,30,44,0.25) 38%, rgba(20,30,44,0.55) 100%);
  }
  .servei-pill-title{
    grid-area:title;
    align-self:center;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1.05rem;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    text-shadow:0 2px 10px rgba(0,0,0,0.35);
  }
  .servei-pill-title:hover{ text-decoration:underline; }
  .servei-pill-cta{
    grid-area:cta;
    align-self:center;
    justify-self:end;
    padding:0.5rem 1rem;
    border-radius:100px;
    background:#fff;
    color:var(--navy);
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.78rem;
    font-weight:600;
    white-space:nowrap;
    text-decoration:none;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .servei-pill-cta:hover{
    background:var(--sage);
    transform:translateY(-1px);
  }

  @media (max-width:640px){
    .serveis-pills-subtitle{ font-size:0.88rem; }
    .serveis-pills{ grid-template-columns:1fr; }
    .servei-pill{ min-height:130px; padding:0.85rem 0.9rem; }
    .servei-pill-title{ font-size:0.95rem; }
    .servei-pill-cta{ font-size:0.72rem; padding:0.42rem 0.85rem; }
  }

  /* --- "Com treballem": línia del temps horitzontal amb 4 passos
     (icona verda + títol + descripció) — [vitalmans_com_treballem],
     vegeu vitalmans_render_com_treballem() a functions.php. En
     escriptori/tauleta, els 4 passos van en fila amb una línia fina
     que travessa les icones (l'efecte "línia del temps"); en mòbil
     s'apilen en vertical amb la línia girada a vertical, connectant
     una icona amb la següent. --- */
  .com-treballem-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.6rem;
    margin:0 0 3rem;
  }
  .com-treballem-step{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:0.2rem;
  }
  .com-treballem-icon{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--sage);
    color:var(--navy);
    margin-bottom:1.1rem;
    box-shadow:0 10px 24px -14px rgba(38,54,74,0.45);
  }
  .com-treballem-icon svg{ width:28px; height:28px; }
  /* La línia que uneix les icones: un únic traç per sota de tota la
     graella (no per targeta), tallat perquè només es vegi entre
     icones consecutives, no abans de la primera ni després de
     l'última. */
  .com-treballem-grid::before{
    content:'';
    position:absolute;
    top:calc(0.2rem + 32px);
    left:calc(12.5% + 32px);
    right:calc(12.5% + 32px);
    height:2px;
    background:repeating-linear-gradient(90deg, rgba(38,54,74,0.18) 0 8px, transparent 8px 16px);
    z-index:0;
  }
  .com-treballem-grid{ position:relative; }
  .com-treballem-step h3{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:0.35rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1rem;
    font-weight:600;
    color:var(--navy);
    margin-bottom:0.5rem;
  }
  .com-treballem-num{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.85rem;
    font-weight:600;
    color:var(--sage-deep);
  }
  .com-treballem-step p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.85rem;
    line-height:1.55;
    color:#5c6b80;
    max-width:26ch;
  }
  @media (max-width:900px){
    .com-treballem-grid{ grid-template-columns:repeat(2, 1fr); gap:2.2rem 1.4rem; }
    .com-treballem-grid::before{ display:none; }
  }
  @media (max-width:520px){
    .com-treballem-grid{ grid-template-columns:1fr; gap:0; }
    .com-treballem-step{ padding:0 0 1.8rem 0; }
    /* En una sola columna, la línia passa a vertical entre una icona
       i la següent (curta, centrada sota cada icona menys la
       darrera). */
    .com-treballem-step:not(:last-child)::after{
      content:'';
      position:absolute;
      top:64px;
      bottom:-1.4rem;
      left:50%;
      width:2px;
      transform:translateX(-50%);
      background:repeating-linear-gradient(180deg, rgba(38,54,74,0.18) 0 8px, transparent 8px 16px);
    }
    .com-treballem-step p{ max-width:34ch; }
  }

  /* --- "Passos amb foto": mateix disseny que "Com treballem" pero
     sense la linia discontinua i amb una foto/avatar rodó en lloc
     d'icona — [vitalmans_passos_avatar], totalment editable des de
     l'editor de la pagina (vegeu vitalmans_shortcode_passos_avatar()
     a functions.php). El nombre de columnes s'ajusta sol al nombre
     de passos que s'hagin omplert (2, 3, 4...). --- */
  .passos-avatar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:2rem 1.6rem;
    margin:0 0 3rem;
  }
  .passos-avatar-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .passos-avatar-photo{
    display:block;
    width:72px;
    height:72px;
    flex:0 0 auto;
    border-radius:50%;
    overflow:hidden;
    margin-bottom:1.1rem;
    border:2px solid var(--sage);
    box-shadow:0 10px 24px -14px rgba(38,54,74,0.45);
  }
  .passos-avatar-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .passos-avatar-step h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1rem;
    font-weight:600;
    color:var(--navy);
    margin-bottom:0.5rem;
  }
  .passos-avatar-step p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.85rem;
    line-height:1.55;
    color:#5c6b80;
    max-width:26ch;
  }
  @media (max-width:520px){
    .passos-avatar-grid{ grid-template-columns:1fr; gap:1.8rem; }
    .passos-avatar-step p{ max-width:34ch; }
  }

  .team-page-founders .founders-grid{ margin-bottom:0; }

  .specialists-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.8rem 1.6rem;
    max-width:900px;
    margin:0 auto;
  }
  .specialists-grid .founder-photo{ max-height:none; }

  /* Targetes de l'equip una mica mes grans nomes a la pagina
     "L'equip" (no afecta el popup "Coneix l'equip" de la portada);
     el text del popover ja s'ajusta sol a la mida de cada targeta
     (vegeu .founder-photo container-type / .founder-profile cqw),
     aixi que aqui nomes cal ajustar el nom i el carrec de sota la
     foto (que no formen part del popover). */
  .team-page-founders .founders-grid{
    max-width:800px;
  }
  .team-page-specialists .specialists-grid{
    max-width:1080px;
  }
  .team-page-founders .founder-card h3,
  .team-page-specialists .founder-card h3{
    font-size:0.95rem;
  }
  .team-page-founders .founder-card .role,
  .team-page-specialists .founder-card .role{
    font-size:0.66rem;
  }

  @media (max-width:760px){
    .specialists-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:480px){
    .specialists-grid{ grid-template-columns:1fr 1fr; max-width:100%; gap:0.8rem 0.7rem; }
  }

  @media (max-width:560px){
    .founders-grid{ grid-template-columns:1fr; }
    .team-modal{ padding:2.6rem 1.6rem 2.2rem; border-radius:22px; }

    /* A la pagina "L'equip" (no al popup "Coneix l'equip" de la
       portada) volem que sempre hi capiguen 2 targetes per fila,
       tant a "Fundadores" com a "Especialistes", el mes grans
       possible dins l'ample disponible. El text del popover (nom,
       especialitat, colegiat, descripcio, boto) ja s'encongeix sol
       en proporcio a l'ample real de la targeta gracies al "cqw";
       overflow-y:auto fa de xarxa de seguretat si mai sobra text. */
    .team-page-founders .founders-grid{
      grid-template-columns:1fr 1fr;
      gap:0.8rem 0.7rem;
      max-width:100%;
    }
    .team-page-founders .founder-photo,
    .team-page-specialists .founder-photo{
      border-radius:14px;
    }
    .team-page-founders .founder-card h3,
    .team-page-specialists .founder-card h3{
      font-size:0.82rem;
      margin-bottom:0.2rem;
    }
    .team-page-founders .founder-card .role,
    .team-page-specialists .founder-card .role{
      font-size:0.58rem;
      padding:0.22rem 0.6rem;
    }
  }

  /* ---------- "Ens trobaràs a...": ara és una capa independent més
     dins de l'ÚNICA escena (#scene-stage, com .hero-copy), no un
     tram sticky a part. Puja des de sota (translateY, script.js) i
     es queda fixa un cop centrada; quan comença el fos encreuat
     façana→interior desapareix JUNT amb la foto exterior (mateixa
     opacitat que imgA, script.js), mai pujant. ---------- */
  .findus-content{
    position:absolute;
    inset:0;
    z-index:6;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:4vh 6vw;
    pointer-events:auto;
    will-change:transform, opacity;
  }
  .findus-content .opinions-intro .kicker{
    color:var(--sage);
    text-shadow:0 1px 10px rgba(0,0,0,0.3);
  }
  .findus-content .opinions-intro h2{
    color:#fff;
    text-shadow:0 2px 20px rgba(0,0,0,0.35);
  }
  .findus-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.4rem;
    max-width:900px;
    margin:1.6rem auto 0;
  }
  /* targetes clares (com .review-card) perquè es llegeixin bé sobre la foto */
  .findus-card{
    display:flex;
    flex-direction:column;
    width:300px;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-align:left;
    text-decoration:none;
    box-shadow:0 20px 40px -20px rgba(15,22,32,0.35);
    transition:transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
  }
  .findus-card:hover{
    transform:translateY(-5px);
    box-shadow:0 26px 44px -20px rgba(15,22,32,0.4);
  }
  .findus-card-photo{
    position:relative;
    display:block;
    aspect-ratio:16/10;
    min-height:180px;
    overflow:hidden;
    background:var(--sage-deep);
  }
  .findus-card-photo img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:100%;
    min-height:100%;
    object-fit:cover !important;
    display:block;
    transition:transform 0.5s ease;
  }
  .findus-card:hover .findus-card-photo img{ transform:scale(1.07); }
  .findus-card-text{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    padding:1rem 1.1rem 1.2rem;
  }
  .findus-card-text h3{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.98rem;
    font-weight:600;
    color:var(--navy);
  }
  .findus-card-text p{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.82rem;
    color:#5c6b80;
    line-height:1.5;
  }
  .findus-card-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.4rem;
    align-self:flex-start;
    margin-top:0.5rem;
    padding:0.55rem 1rem;
    border-radius:100px;
    background:var(--navy);
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.78rem;
    font-weight:600;
    color:#fff;
    transition:background 0.25s ease, transform 0.25s ease;
  }
  .findus-card-link svg{
    width:14px;
    height:14px;
    transition:transform 0.25s ease;
  }
  .findus-card-link:hover{ background:var(--sage-deep); transform:translateX(2px); }

  @media (max-width:900px){
    .findus-content{ padding-top:5vh; padding-bottom:7vh; }
  }
  @media (max-width:640px){
    .findus-content{ padding:4vh 5vw 5.5vh; }
    /* Mòbil: els dos banners ("Vitalmans" i "Can Felipa") un al
       costat de l'altre en lloc d'apilats, i una mica més petits
       perquè hi càpiguen còmodament els dos junts. min-height:0 a
       la foto és clau: sense això, els 180px fixos del min-height
       de escriptori guanyaven a l'aspect-ratio i feien la targeta
       molt més alta del que tocava en tenir la meitat d'ample. */
    .findus-grid{ flex-wrap:nowrap; gap:0.5rem; }
    .findus-card{ width:calc(50% - 0.25rem); max-width:none; border-radius:12px; }
    .findus-card-photo{ min-height:0; }
    .findus-card-text{ padding:0.5rem 0.5rem 0.65rem; gap:0.2rem; }
    .findus-card-text h3{ font-size:0.7rem; line-height:1.2; }
    .findus-card-text p{ font-size:0.6rem; line-height:1.3; }
    .findus-card-link{ font-size:0.66rem; padding:0.4rem 0.7rem; margin-top:0.4rem; gap:0.25rem; min-height:30px; }
    .findus-card-link svg{ width:9px; height:9px; }
    /* En mòbil, amb les targetes apilades, el contingut pot ser més
       alt que la pantalla: es deixa fer scroll intern dins la pròpia
       capa (que segueix ocupant exactament l'escena, inset:0) en
       lloc de tallar-lo — la foto de fons continua sense moure's,
       ja que és independent d'aquest overflow intern. */
    .findus-content{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  }
  @media (max-width:380px){
    /* Telèfons molt estrets: s'amaga la descripció per no saturar
       la targeta i es deixa només foto + títol + botó. */
    .findus-card-text p{ display:none; }
  }

  /* ---------- REVIEWS MODAL (banner "Opinió dels nostres clients") ---------- */

  /* ---------- Secció "Opinió dels nostres clients": les targetes
     de ressenyes floten (targetes clares, .review-card més avall)
     solapades sobre la part inferior de la foto de l'escena interior
     — la secció es "puja" amb marge negatiu just sota #scroll-spacer
     perquè comenci dins la cua fosca de la foto (.stage-bottom-fade)
     i acabi sobre el fons clar de la pàgina, seguint la composició
     de "Contenido destacado" de summitfisio.com amb els colors de
     Vitalmans. Reutilitza el mateix carrusel (.reviews-track,
     .review-card, .reviews-dots...) que ja hi havia al modal.

     IMPORTANT: <main> té fons var(--cream) (vegeu més avall), i com
     que aquesta secció es puja amb marge negatiu per sobre seu,
     abans hi apareixia un tall recte i pla de color crema tallant
     la foto encara fosca. Per evitar-ho, .opinions-section porta el
     seu propi fons en degradat blau→crema: continua exactament el
     to del final de .stage-bottom-fade i acaba en var(--cream), el
     mateix color de <main>, així la transició queda contínua. ---------- */
  .opinions-section{
    position:relative;
    z-index:10;
    margin-top:0;
    /* padding-bottom (9vh): marge fix de fons blau sota les targetes,
       abans que comenci #contacte. És independent del translateY/
       marginBottom dinàmics que aplica script.js a #opinionsContent
       (aquests continuen encongint la secció exactament igual, en
       temps real, amb l'scroll) — aquest padding només hi suma una
       distància extra constant, tant en el fons blau com en l'espai
       fins a la informació de contacte. */
    padding:6vh 6vw 9vh;
    text-align:center;
    /* display:flow-root — CRUCIAL: crea el seu propi block formatting
       context. Sense això, el margin-bottom NEGATIU que script.js
       aplica a #opinionsContent (per "encongir" la secció al mateix
       ritme que el translateY visual) travessava aquesta secció
       (margin collapsing): el fons blau es quedava sempre a la
       mateixa alçada i #contacte pujava per sobre seu igualment,
       acabant tapat pel fons sòlid. Amb flow-root, aquest marge
       negatiu queda "contingut" dins la secció i de veritat
       n'encongeix l'alçada — el fons s'ajusta en temps real exactament
       igual que puja el contingut. (flow-root, a diferència
       d'overflow:hidden, no retalla el contingut que volgudament
       sobresurt per la part de dalt — el títol "endinsant-se" a la
       foto de l'escena — així que aquest efecte es manté intacte.) */
    display:flow-root;
    /* Fons pla, del mateix color exacte on .stage-bottom-fade ja s'ha
       tornat sòlid (vegeu més amunt): un únic degradat continu entre
       les dues capes, en lloc de dos degradats independents que es
       puguin desincronitzar entre ells. Sense marge negatiu: el
       sòlid ja arriba pel seu compte (a 99vh) abans que s'acabi
       l'escena, així que aquesta secció pot començar exactament on
       acaba la pàgina anterior, sense solapar-la. */
    background:var(--navy);
  }

  /* Embolcall del contingut (títol + targetes) que es mou amb el seu
     propi parallax (script.js), més ràpid que el degradat de sortida
     de l'escena, mentre el fons blau de .opinions-section es manté
     enganxat a la velocitat normal de l'scroll — així el contingut
     s'acaba solapant una mica més amunt, sobre la foto del hero. */
  .opinions-content{
    will-change:transform;
  }
  .opinions-intro .kicker{
    font-size:0.78rem;
    letter-spacing:0.26em;
    color:var(--sage);
    margin-bottom:0.5rem;
    text-shadow:0 1px 10px rgba(0,0,0,0.25);
  }
  .opinions-intro h2{
    font-size:clamp(1.5rem, 2.6vw, 2rem);
    line-height:1.25;
    color:#fff;
    margin-bottom:0.5rem;
    text-shadow:0 2px 20px rgba(0,0,0,0.35);
  }
  .opinions-intro p.intro{
    color:rgba(255,255,255,0.92);
    line-height:1.5;
    max-width:46ch;
    margin:0 auto;
    font-size:0.88rem;
    text-shadow:0 1px 10px rgba(0,0,0,0.3);
  }
  .opinions-section .reviews-carousel-wrap{
    max-width:1100px;
    margin:1.6rem auto 0;
  }
  /* fletxes sempre llegibles tant si cauen sobre la cua fosca de la
     foto com sobre el fons clar de la pàgina (targeta pròpia, no
     depenen del que hi hagi al darrere). */
  .opinions-section .reviews-arrow{
    background:#fff;
    color:var(--navy);
    box-shadow:0 8px 20px -10px rgba(26,38,53,0.4);
  }
  .opinions-section .reviews-arrow:hover{ background:var(--sage); }

  /* punts del carrusel: dins d'aquesta secció el fons és fosc a dalt
     i clar a baix, així que els punts porten sempre un contorn clar
     perquè es vegin sobre qualsevol dels dos. */
  .opinions-section .reviews-dot{
    background:rgba(255,255,255,0.4);
    box-shadow:0 0 0 1px rgba(38,54,74,0.12);
  }
  .opinions-section .reviews-dot.active{ background:var(--sage-deep); }

  @media (max-width:900px){
    .opinions-section{ padding-top:5vh; padding-bottom:7vh; }
  }
  @media (max-width:640px){
    .opinions-section{ padding:4vh 6vw 5.5vh; }
  }

  .reviews-modal{ max-width:1100px; }

  .reviews-carousel-wrap{
    position:relative;
    display:flex;
    align-items:center;
    gap:0.6rem;
    margin-top:1.6rem;
  }

  .reviews-track{
    flex:1;
    display:flex;
    gap:1.1rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:0.4rem 0.2rem 0.5rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .reviews-track::-webkit-scrollbar{ display:none; }

  /* --- targetes d'opinió: fons blanc sòlid i text en negre perquè
     es llegeixin com a targetes clares sobre el fons blau de
     .opinions-section (estrelles i autor es mantenen en verd/sage). --- */
  .review-card{
    scroll-snap-align:center;
    flex:0 0 auto;
    width:380px;
    min-height:150px;
    background:#fff;
    border:1px solid rgba(38,54,74,0.08);
    border-radius:20px;
    padding:1.3rem 1.5rem;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    text-align:left;
    box-shadow:0 20px 40px -20px rgba(15,22,32,0.35);
  }
  .review-card .review-stars{
    color:var(--sage-deep);
    font-size:0.85rem;
    letter-spacing:0.14em;
  }
  .review-card .review-text{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.78rem;
    line-height:1.55;
    color:#111;
    flex:1;
  }
  .review-card .review-author{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.76rem;
    font-weight:500;
    color:var(--sage-deep);
  }

  /* --- última targeta del carrusel: "+" per deixar una ressenya --- */
  .review-card--add{
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:0.45rem;
    text-decoration:none;
    background:rgba(255,255,255,0.92);
    border:2px dashed var(--sage-deep);
    box-shadow:0 20px 40px -20px rgba(15,22,32,0.35);
    cursor:pointer;
    transition:transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  }
  .review-card--add:hover,
  .review-card--add:focus-visible{
    background:#fff;
    transform:translateY(-4px);
    box-shadow:0 26px 44px -18px rgba(15,22,32,0.45);
  }
  .review-card--add:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
  .review-card--add .review-add-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--sage-deep);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    line-height:1;
    font-weight:300;
    transition:transform 0.25s ease;
  }
  .review-card--add:hover .review-add-icon{ transform:rotate(90deg) scale(1.06); }
  .review-card--add .review-add-title{
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:0.95rem;
    font-weight:500;
    color:var(--navy);
    line-height:1.3;
  }
  .review-card--add .review-add-sub{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.74rem;
    color:#444;
  }

  .reviews-arrow{
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(38,54,74,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    color:var(--navy);
    transition:background 0.2s ease;
  }
  .reviews-arrow:hover{ background:rgba(38,54,74,0.14); }

  .reviews-dots{
    display:none;
    justify-content:center;
    gap:0.5rem;
    margin-top:0;
  }
  .reviews-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(38,54,74,0.18);
    cursor:pointer;
    transition:background 0.25s ease, transform 0.25s ease;
  }
  .reviews-dot.active{
    background:var(--sage-deep);
    transform:scale(1.35);
  }

  @media (max-width:560px){
    .review-card{ width:80vw; }
    .reviews-arrow{ display:none; }
    .reviews-dots{ display:flex; }
  }

  /* ---------- CENTRE MODAL (banner "El centre") ---------- */

  .centre-modal{ max-width:680px; }

  .centre-modal-image{
    width:100%;
    aspect-ratio:16/10;
    border-radius:20px;
    overflow:hidden;
    margin:1.3rem 0 1.4rem;
  }
  .centre-modal-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .centre-modal p.intro{ margin-bottom:0; }

  /* ---------- SERVEIS MODAL (banner "Serveis") i banner "Classes
     dirigides" (mateix format): graella normal de 3 columnes en
     escriptori/tauleta (igual que sempre) i, NOMÉS en mòbil, un
     carrusel "Coverflow" navegable amb scroll horitzontal — la
     targeta central es veu de front i les laterals es giren
     lleugerament en 3D i es fan més petites, com les portades d'un
     Coverflow. L'efecte de gir es calcula a script.js
     (setupSvcCoverflow) segons la posició de scroll, i només
     s'aplica quan l'amplada de pantalla és de mòbil. ---------- */
  .svc-modal{ max-width:820px; }

  .svc-carousel-wrap{
    position:relative;
    display:flex;
    align-items:center;
    gap:0.6rem;
    margin-top:1.6rem;
  }

  .svc-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.4rem;
  }

  .svc-card{ text-align:center; }

  /* Les fletxes només tenen sentit amb el carrusel de mòbil (a sota
     hi ha punts + swipe); en escriptori, amb graella fixa, no cal
     navegar-hi enlloc. */
  .svc-carousel-arrow{ display:none; }

  .svc-photo{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
  }
  .svc-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease, filter 0.4s ease;
  }
  .svc-photo:hover img,
  .svc-photo.active img{
    transform:scale(1.06);
    filter:brightness(0.5);
  }

  .svc-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:1rem;
    background:linear-gradient(180deg, rgba(26,38,53,0.2) 0%, rgba(26,38,53,0.82) 55%, rgba(26,38,53,0.92) 100%);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity 0.3s ease, transform 0.3s ease;
  }
  .svc-photo:hover .svc-overlay,
  .svc-photo.active .svc-overlay{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .svc-overlay .svc-desc{
    font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
    font-size:0.82rem;
    line-height:1.55;
    color:rgba(255,255,255,0.94);
  }

  .svc-card h3{
    margin-top:0.9rem;
    font-family:var(--font-ui), 'Jost', sans-serif;
    font-size:1rem;
    font-weight:600;
  }

  @media (max-width:560px){
    .svc-grid{
      display:flex;
      gap:0;
      overflow-x:auto;
      overflow-y:visible;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      padding:1.4rem calc(50% - 100px) 1.6rem;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      perspective:1200px;
    }
    .svc-grid::-webkit-scrollbar{ display:none; }
    .svc-card{
      scroll-snap-align:center;
      flex:0 0 auto;
      width:200px;
      margin:0 auto;
      will-change:transform, opacity;
      transition:transform 0.25s ease, opacity 0.25s ease;
    }
    .svc-carousel-dots{ display:flex; justify-content:center; gap:0.5rem; margin-top:0.9rem; }
  }

/* ---------- Foto de capçalera de les pàgines principals (Serveis,
   Classes dirigides, L'equip, Centre, Sobre Nosaltres, Contacte).
   Ocupa la meitat de l'alçada de pantalla que es veu en carregar la
   pàgina (--page-header-height), a tota l'amplada, i en lloc d'una
   vora inferior recta té un petit "pico" central que simula una
   fletxa cap avall (--page-header-notch / --page-header-notch-width
   controlen la mida del pico). Imatge editable des de Aparença >
   Personalitza > "Foto de capçalera de les pàgines". ---------- */
:root{
  --page-header-height: 50vh;
  --page-header-notch: 34px;
  --page-header-notch-width: 64px;
}
.page-header-banner{
  position:relative;
  width:100%;
  height:calc(var(--page-header-height) + var(--page-header-notch));
  background-color:var(--navy);
  overflow:hidden;
  clip-path:polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--page-header-notch)),
    calc(50% + (var(--page-header-notch-width) / 2)) calc(100% - var(--page-header-notch)),
    50% 100%,
    calc(50% - (var(--page-header-notch-width) / 2)) calc(100% - var(--page-header-notch)),
    0 calc(100% - var(--page-header-notch))
  );
}
/* Capa amb la foto pròpiament dita, separada del contenidor perquè
   l'escala (zoom) i el desenfocament triats a Aparença > Personalitza
   només afectin la imatge — mai el títol, el subtítol ni el botó que
   hi ha a sobre. inset negatiu + overflow:hidden al pare eviten que
   es vegin vores buides quan hi ha desenfocament o zoom aplicats. */
.page-header-bg{
  position:absolute;
  inset:-20px;
  background-image:var(--page-header-bg-image);
  background-size:cover;
  background-position:var(--page-header-bg-position, 50% 50%);
  background-repeat:no-repeat;
  transform:scale(var(--page-header-bg-scale, 1));
  filter:blur(var(--page-header-bg-blur, 0px));
}
/* Overlay de color (mateix to que --navy, #26364a) a sobre de la
   foto perque el titol i subtitol es puguin llegir sempre, siguin
   quins siguin els colors de la foto de fons. El clip-path del
   contenidor pare ja retalla aquest overlay amb el mateix pico. */
.page-header-overlay{
  position:absolute;
  inset:0;
  background:rgba(38,54,74,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 6vw calc(2rem + var(--page-header-notch));
}
.page-header-text{
  max-width:900px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
}
.page-header-text h1{
  font-family:var(--font-page-header-heading), 'Alga', serif;
  font-weight:var(--font-page-header-heading-weight, 400);
  font-style:var(--font-page-header-heading-style, normal);
  font-size:var(--page-header-title-size, clamp(2rem, 4.4vw, 3rem));
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,0.35);
  margin-bottom:0.7rem;
}
.page-header-subtitle{
  font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
  font-size:var(--page-header-subtitle-size, 1.05rem);
  font-weight:500;
  color:#fff;
  letter-spacing:0.01em;
  text-shadow:0 1px 10px rgba(0,0,0,0.35);
  margin-bottom:1.1rem;
}
.page-header-text .page-title-bar{
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0;
  background:var(--sage-deep);
}
.page-header-cta{
  margin-top:var(--page-header-cta-margin-top, 1.6rem);
  align-self:var(--page-header-cta-align, center);
  transform:scale(var(--page-header-cta-scale, 1));
}
/* Espai net sota el pico abans que comenci la resta del contingut de
   la pagina; nomes s'aplica quan la banner es realment davant. */
.page-header-banner + .site-page-content{
  padding-top:1.8rem;
}
@media (max-width:640px){
  :root{
    --page-header-height: 42vh;
    --page-header-notch: 20px;
    --page-header-notch-width: 42px;
  }
  .page-header-banner + .site-page-content{
    padding-top:1.4rem;
  }
  /* Al mòbil el títol de la capçalera de pàgina puja de mida (el
     clamp() del disseny d'escriptori el deixava petit en pantalles
     estretes) i el subtítol baixa una mica, per equilibrar millor la
     jerarquia visual en un espai més reduït. Si es canvia la mida des
     d'Aparença > Personalitza > "Mida de textos", el mòbil segueix
     respectant-la com a límit màxim / referència. */
  .page-header-text h1{
    font-size:clamp(2.3rem, 9vw, var(--page-header-title-size, 3rem));
  }
  .page-header-subtitle{
    font-size:calc(var(--page-header-subtitle-size, 1.05rem) * 0.82);
  }
}

/* ---------- Afegits per a la versio WordPress multi-pagina ---------- */

/* A les pagines interiors sense foto de capçalera (el blog, o una
   fitxa de servei/classe dirigida sense imatge destacada) no hi ha
   cap escena transparent a sota, aixi que el menu superior es mostra
   sempre amb fons solid. A les que si que en tenen (.has-hero-photo)
   es deixa el comportament per defecte de .site-nav (transparent, i
   solid en fer scroll gracies a la classe .is-solid afegida per
   script.js) — exactament com a la home. */
body.inner-page:not(.has-hero-photo) .site-nav{
  position: sticky;
  background: var(--navy);
  backdrop-filter: blur(10px);
  padding: 1.1rem 5vw;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35);
}

/* Separacio superior per al contingut de les pagines interiors sense
   foto de capçalera, ja que no compten amb cap escena a sota del menu.
   Les pagines amb foto de capçalera (.has-hero-photo) no en necessiten:
   la foto arrenca a dalt de tot, sota el menu transparent, com a la home. */
body.inner-page:not(.has-hero-photo) .site-page{
  display: block;
  position: static;
  z-index: auto;
  overflow-y: visible;
  padding-top: 3.2rem;
}
body.inner-page.has-hero-photo .site-page{
  display: block;
  position: static;
  z-index: auto;
  overflow-y: visible;
}

/* L'entrada individual del blog (single.php) i el llistat (home.php) ja
   no depenen del JS de la SPA per mostrar-se — es mostren sempre. */
body.inner-page .blog-post{
  display: block;
}

/* ---------- Botó flotant de WhatsApp (footer.php) ----------
   Sempre visible, a sota-dreta, a totes les pàgines. z-index per
   sota del "team-modal-overlay" (500) perquè un modal el tapi, i
   per sobre de la resta de contingut i del menú (200). */
.whatsapp-float{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  bottom:calc(1.4rem + env(safe-area-inset-bottom, 0px));
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,0.4);
  z-index:400;
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float svg{ width:30px; height:30px; }
.whatsapp-float:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 24px -6px rgba(0,0,0,0.45);
}
@media (max-width:600px){
  .whatsapp-float{
    width:52px;
    height:52px;
    right:1rem;
    bottom:1rem;
    bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .whatsapp-float svg{ width:26px; height:26px; }
}



/* Visor a pantalla completa de la galeria del Centre (vegeu script.js) */
.vm-lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(14,22,32,0.94);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease, visibility 0.25s;
}
.vm-lightbox.active{ opacity:1; visibility:visible; }
.vm-lightbox-figure{
  margin:0;
  max-width:92vw;
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8rem;
}
.vm-lightbox-figure img{
  max-width:92vw;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
}
.vm-lightbox-figure figcaption{
  color:#fff;
  font-family:var(--font-subtitle), 'Libre Franklin', sans-serif;
  font-size:0.95rem;
  text-align:center;
}
.vm-lightbox-close,
.vm-lightbox-arrow{
  position:absolute;
  background:rgba(255,255,255,0.14);
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  line-height:1;
  transition:background 0.2s ease;
}
.vm-lightbox-close:hover,
.vm-lightbox-arrow:hover{ background:rgba(255,255,255,0.28); }
.vm-lightbox-close{ top:1.2rem; right:1.2rem; width:44px; height:44px; font-size:1.9rem; }
.vm-lightbox-arrow{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:2rem; padding-bottom:4px; }
.vm-lightbox-prev{ left:1.2rem; }
.vm-lightbox-next{ right:1.2rem; }
.vm-lightbox.single .vm-lightbox-arrow{ display:none; }
.vm-lightbox-count{
  position:absolute;
  bottom:1.2rem;
  left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,0.75);
  font-size:0.85rem;
  letter-spacing:0.08em;
}
@media (max-width:560px){
  .vm-lightbox-arrow{ width:40px; height:40px; }
  .vm-lightbox-prev{ left:0.5rem; }
  .vm-lightbox-next{ right:0.5rem; }
}

/* ---------- Modal "Coneix l'equip" (portada), pantalles petites ----------
   Les dues targetes han de cabre senceres dins la pantalla, sense scroll
   i el més grans possible. Mida = el menor entre l'ample disponible i
   l'alçada que queda un cop descomptat el "cromat" del modal (títol,
   introducció, noms i enllaç). Tot va en vh/dvh i en %, així que s'adapta
   a qualsevol mòbil. --eq-chrome és l'alçada estimada de tot el que NO són
   les fotos; si algun dia sobra o falta espai, només cal tocar aquest valor. */
@media (max-width:560px){
  #teamModalOverlay{ padding:2vh 4vw; padding:2dvh 4vw; }
  #teamModalOverlay .team-modal{
    --eq-chrome:23rem;
    max-height:96vh;
    max-height:96dvh;
    padding:2.4rem 1.2rem 1rem;
  }
  #teamModalOverlay .kicker{ margin-bottom:0.4rem; }
  #teamModalOverlay h2{ margin-bottom:0.4rem; }
  #teamModalOverlay > .team-modal > p.intro{
    font-size:0.8rem;
    line-height:1.45;
    margin-bottom:0.9rem;
  }
  #teamModalOverlay .founders-grid{
    grid-template-columns:1fr;
    justify-items:center;
    gap:0.9rem;
    max-width:none;
    margin:0 auto 0.9rem;
  }
  #teamModalOverlay .founder-card{
    width:min(100%, calc((96vh - var(--eq-chrome)) / 2));
    width:min(100%, calc((96dvh - var(--eq-chrome)) / 2));
  }
  #teamModalOverlay .founder-photo{ margin-bottom:0.5rem; border-radius:16px; }
  #teamModalOverlay .founder-card h3{ font-size:0.9rem; line-height:1.25; margin-bottom:0.2rem; }
  #teamModalOverlay .founder-card .role{ font-size:0.6rem; line-height:1.4; padding:0.2rem 0.6rem; }
  #teamModalOverlay .rest-link{ font-size:0.82rem; margin-top:0; }
}

/* Mòbil en horitzontal (poca alçada): 2 targetes una al costat de l'altra,
   mida limitada per l'alçada de la pantalla. */
@media (max-height:520px){
  #teamModalOverlay{ padding:2vh 3vw; padding:2dvh 3vw; }
  #teamModalOverlay .team-modal{
    --eq-chrome:12rem;
    max-height:96vh;
    max-height:96dvh;
    padding:1.6rem 1.6rem 0.8rem;
  }
  #teamModalOverlay .kicker{ display:none; }
  #teamModalOverlay h2{ font-size:1.25rem; margin-bottom:0.3rem; }
  #teamModalOverlay > .team-modal > p.intro{ display:none; }
  #teamModalOverlay .founders-grid{
    grid-template-columns:1fr 1fr;
    justify-items:center;
    gap:1rem;
    max-width:none;
    margin:0 auto 0.5rem;
  }
  #teamModalOverlay .founder-card{
    width:min(100%, calc(96vh - var(--eq-chrome)));
    width:min(100%, calc(96dvh - var(--eq-chrome)));
  }
  #teamModalOverlay .founder-photo{ margin-bottom:0.4rem; }
  #teamModalOverlay .founder-card h3{ font-size:0.85rem; line-height:1.25; margin-bottom:0.15rem; }
  #teamModalOverlay .rest-link{ font-size:0.78rem; margin-top:0; }
}

/* ---------- Tipografia proporcional a la pantalla (MÒBIL) ----------
   Els títols de les pàgines tenien mides mínimes fixes (2rem, 2.3rem...)
   que a pantalles petites es veien massa grans. Aquí escalen amb l'amplada
   (vw), amb un mínim i un màxim. A les mides globals (H1/H2/H3) es respecta
   el valor triat a Aparença > Personalitza > "Mida de textos" com a límit
   màxim. Referència: pantalla de 390px d'amplada. ---------- */
@media (max-width:640px){
  :root{
    --m-h1: clamp(1.5rem, 7vw, 2.3rem);
    --m-h2: clamp(1.25rem, 5.6vw, 1.75rem);
    --m-h3: clamp(1.05rem, 4.6vw, 1.3rem);
  }

  /* Encapçalaments generals (també els de l'editor de blocs) */
  h1{ font-size:min(var(--h1-size, 2.4rem), var(--m-h1)); line-height:1.2; }
  h2{ font-size:min(var(--h2-size, 1.75rem), var(--m-h2)); line-height:1.25; }
  h3{ font-size:min(var(--h3-size, 1.3rem), var(--m-h3)); }

  /* H1 de pàgina amb regla pròpia */
  .site-page-inner h1,
  .site-page-intro h1,
  .blog-post h1{
    font-size:var(--m-h1);
    line-height:1.2;
  }

  /* Portada de les pàgines principals (Serveis, Equip, Centre...) */
  .page-header-text h1{
    font-size:clamp(1.6rem, 7.6vw, var(--page-header-title-size, 3rem));
    line-height:1.15;
  }
  .page-header-subtitle{
    font-size:clamp(0.8rem, 3.5vw, calc(var(--page-header-subtitle-size, 1.05rem) * 0.82));
    line-height:1.45;
  }

  /* Títols de secció (H2) amb regla pròpia */
  .about-flexible-content h2,
  .servei-body h2,
  .reserva-espai h2,
  .centre-intro-split .site-page-intro h2,
  .centre-content h2,
  .classes-banner-text h2,
  .contact-box-text h2,
  .opinions-intro h2,
  .split h2,
  .team-modal h2{
    font-size:var(--m-h2);
    line-height:1.25;
  }
  /* Títols de secció grans */
  .section-head h2,
  .final-cta h2{
    font-size:var(--m-h1);
    line-height:1.2;
  }

  /* Subtítols (H3) amb regla pròpia */
  .about-flexible-content h3,
  .centre-intro-split .site-page-intro h3,
  .centre-content h3{
    font-size:var(--m-h3);
  }

  /* Text de cos: lleugerament fluid, sense baixar mai de ~14.7px */
  .servei-body,
  .about-flexible-content,
  .site-page-intro p{
    font-size:clamp(0.92rem, 3.9vw, 1rem);
  }
}

/* =====================================================================
   Banners dels hotspots (Equip, Serveis, El centre, Sobre Nosaltres, Blog…)
   - Menys marge a les vores perquè el text ocupi més ample.
   - Text més petit a mòbil.
   - Galeria de "Sobre Nosaltres" amb el mateix carrusel que Serveis.
   ===================================================================== */
.team-modal-overlay{ padding:3vh 3vw; }
.team-modal{ padding:1.8rem 1.5rem 1.5rem; }
.team-modal-close{ top:1rem; right:1rem; }
.team-modal > p.intro{ max-width:64ch; }

/* Galeria "Sobre Nosaltres" (fotos triades a Hotspots del hero → Sobre Nosaltres) */
.sobre-carousel{ margin-top:0.4rem; margin-bottom:1.4rem; }
.sobre-carousel .svc-grid{
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:0.9rem;
  max-width:760px;
  margin:0 auto;
}
.sobre-carousel.count-1 .svc-grid{ grid-template-columns:minmax(0, 480px); justify-content:center; }
.sobre-carousel.count-2 .svc-grid{ grid-template-columns:repeat(2, 1fr); }
.sobre-photo{
  width:100%;
  aspect-ratio:4/3;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
}
.sobre-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.sobre-carousel .svc-card h3{
  margin-top:0.5rem;
  font-size:0.82rem;
  font-weight:400;
  line-height:1.4;
  color:#54637a;
}

@media (max-width:560px){
  .team-modal-overlay{ padding:2vh 2.5vw; }
  .team-modal{ padding:2.3rem 0.9rem 1.2rem; }
  .team-modal-close{ top:0.6rem; right:0.6rem; width:32px; height:32px; }
  .team-modal .kicker{ font-size:0.62rem; letter-spacing:0.2em; margin-bottom:0.35rem; }
  .team-modal h2{ font-size:1.2rem; line-height:1.25; margin-bottom:0.4rem; }
  .team-modal > p.intro{ font-size:0.8rem; line-height:1.5; max-width:none; margin-bottom:1rem; }
  .team-modal .rest-link{ font-size:0.8rem; }
  .svc-card h3,
  .blog-modal-card h3{ font-size:0.88rem; margin-top:0.6rem; }
  .founder-card h3{ font-size:0.9rem; }

  .sobre-carousel{ margin-top:0; margin-bottom:0.2rem; }
  .sobre-carousel .svc-grid{ gap:0; max-width:none; margin:0; }
  .sobre-photo{ aspect-ratio:1/1; }
  .sobre-carousel .svc-card h3{ font-size:0.76rem; }
  .svc-carousel-dots.is-single{ display:none; }
}