/* ==========================================================================
   Josep Morán — REDISSENY front-end (metàl·lic neutre + lima plana)
   Font de veritat: docs-disseny/josepmoran-referencia.html
   - Tokens: DARK per defecte a :root (compatible amb el toggle existent, que
     en fosc NO posa cap atribut); mode CLAR sobreescriu a [data-theme="light"].
   - Zero gradients de color. Únic degradat: el metàl·lic neutre (grisos).
   - Lima (#D5FF02) sempre plana, com a únic èmfasi. Violeta eliminat.
   ========================================================================== */

/* ---- Tipografia autoallotjada (Archivo display + Inter cos) ---- */
/* Archivo 400/500/700/800/900 · latin + latin-ext (cobreix el català) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/archivo-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/archivo-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-700-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/archivo-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/archivo-800-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/archivo-900.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/archivo-900-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Inter 400/500/600 · latin + latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   TOKENS — font única de color (CSS variables)
   Comuns + DARK per defecte a :root; CLAR sobreescriu a [data-theme="light"].
   (Adaptació del bloc [data-theme="dark"] del build: es porta a :root perquè
   el toggle existent, en fosc, NO afegeix cap atribut data-theme.)
   ========================================================================== */
:root{
  --lima:var(--wp--preset--color--accent-1); --olive:#5A6B00; --radius-btn:var(--wp--custom--radius-btn); --radius-card:var(--wp--custom--radius-card);
  --font-display:var(--wp--preset--font-family--archivo); --font-body:var(--wp--preset--font-family--inter);
  --mx:50%; --my:26%; --maxw:var(--wp--custom--maxw); --pad:var(--wp--custom--pad); --numcol:var(--wp--custom--numcol); --logo-h:var(--wp--custom--logo-h);
  /* Fons del quadre de l'icona del logo: transparent en FOSC (es fon amb el metàl·lic
     perquè la lima ressalti); fosc en CLAR (quadre visible). Vegeu [data-theme="light"]. */
  --logo-chip-bg:transparent;
  /* DARK (per defecte) */
  --text:var(--wp--preset--color--contrast); --muted:var(--wp--preset--color--muted); --line:var(--wp--preset--color--line); --line-strong:var(--wp--preset--color--line-strong);
  --frost:var(--wp--preset--color--frost); --btn-ghost-border:var(--wp--preset--color--btn-ghost-border); --hover-ink:var(--lima);
  --bg-metal:linear-gradient(160deg,#3A3A40 0%,#26262A 32%,#191919 62%,#0F0F10 100%);
  --sheen:radial-gradient(740px circle at var(--mx) var(--my), rgba(220,224,230,.20), rgba(220,224,230,.0625) 30%, rgba(0,0,0,0) 55%);
  --band-light:var(--wp--preset--color--band-light); --band-dark:var(--wp--preset--color--band-dark); --ribbon:var(--wp--preset--color--contrast-fixed); --foot:var(--wp--preset--color--ribbon-foot); --tile:var(--wp--preset--color--tile);
}
/* Explícit dark (per si el toggle o un futur canvi posa data-theme="dark") */
[data-theme="dark"]{
  --text:var(--wp--preset--color--contrast); --muted:var(--wp--preset--color--muted); --line:var(--wp--preset--color--line); --line-strong:var(--wp--preset--color--line-strong);
  --frost:var(--wp--preset--color--frost); --btn-ghost-border:var(--wp--preset--color--btn-ghost-border); --hover-ink:var(--lima);
  --bg-metal:linear-gradient(160deg,#3A3A40 0%,#26262A 32%,#191919 62%,#0F0F10 100%);
  --sheen:radial-gradient(740px circle at var(--mx) var(--my), rgba(220,224,230,.20), rgba(220,224,230,.0625) 30%, rgba(0,0,0,0) 55%);
  --band-light:var(--wp--preset--color--band-light); --band-dark:var(--wp--preset--color--band-dark); --ribbon:var(--wp--preset--color--contrast-fixed); --foot:var(--wp--preset--color--ribbon-foot); --tile:var(--wp--preset--color--tile);
}
[data-theme="light"]{
  --text:#1A1A1A; --muted:#4C4C48; --line:rgba(0,0,0,.13); --line-strong:rgba(0,0,0,.24);
  --frost:rgba(238,238,240,.74); --btn-ghost-border:rgba(0,0,0,.30); --hover-ink:var(--olive);
  --bg-metal:linear-gradient(160deg,#EEEEF0 0%,#DEE0E4 34%,#CFD1D6 64%,#C2C4C9 100%);
  --sheen:radial-gradient(740px circle at var(--mx) var(--my), rgba(249,255,217,.6875), rgba(249,255,217,.225) 30%, rgba(249,255,217,0) 55%);
  --band-light:#F4F4F1; --band-dark:#161616; --ribbon:#F2F2F0; --foot:#0A0A0A; --tile:#1A1A1A;
  --logo-chip-bg:#1A1A1A;
}

/* ==========================================================================
   BASE (fons metàl·lic + reflex que segueix el cursor)
   ========================================================================== */
html{scroll-behavior:smooth}
body{background:var(--bg-metal); background-attachment:fixed; color:var(--text);
  font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; transition:color .4s}
#sheen{position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--sheen); transition:background .08s linear}
/* Tot el contingut (header/main/section/footer) per sobre del #sheen (z-index:0),
   perquè el resplendor mai "sagni" sobre seccions amb fons opac (pòdcast, marquee,
   temes, footer): en ser opaques, el seu propi fons ja tapa el #sheen fixed que hi ha
   per sota, sense necessitat de cap lògica JS de mostrar/amagar per scroll (aquesta
   lògica es va provar i fallava: creava una "zona morta" quan una secció opaca i una
   de transparent eren visibles alhora dins el viewport). Sense aquest apilament, en
   quedar #sheen (fixed) i les seccions (static) al mateix context arrel, el fixed
   pintava per damunt del contingut estàtic.

   .wp-site-blocks embolcalla TOT el que pinta WordPress (capçalera, contingut i
   peu), així que puja d'una sola vegada qualsevol pàgina, tingui o no <main>/
   <section>. Feia falta: pàgines com /contacte/ pengen de
   .wp-site-blocks > .entry-content, sense cap dels elements de la llista de sota,
   i el resplendor els queia A SOBRE (rentava el text i les targetes opaques del
   formulari i del descarregable). Com que .wp-site-blocks no té fons, el
   resplendor se segueix veient per tot arreu on el contingut és transparent:
   il·lumina el metàl·lic, però ja no es pinta damunt de res. */
.wp-site-blocks{position:relative; z-index:1}
.site-inner, header, main, section, .ribbon, footer{position:relative; z-index:1}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--hover-ink); outline-offset:3px; border-radius:2px}

/* HEADER */
/* WordPress embolcalla la template-part en <header class="wp-block-template-part">,
   que és tan alt com el header i atrapa el position:sticky (el header s'escapava en fer
   scroll). display:contents fa que el wrapper no creï caixa, així el .site-header queda
   sticky respecte a tot el document i es manté fix a dalt. Només el wrapper de capçalera. */
header.wp-block-template-part{display:contents}
.site-header{position:sticky; top:0; z-index:50; border-bottom:1px solid transparent;
  transition:background .35s,backdrop-filter .35s,border-color .35s}
.site-header.scrolled{background:var(--frost); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line)}
.site-header .nav{display:flex; align-items:center; justify-content:space-between; height:80px; transition:height .35s}
.site-header.scrolled .nav{height:62px}
/* Logo oficial (SVG inline). Bimodal via currentColor: text+icona segueixen --text
   (clar en fosc / fosc en clar); les barres lima (.st0) es mantenen. Enllaça a inici.
   Mida ajustable amb --logo-h. */
.brand{display:inline-flex; align-items:center; text-decoration:none; color:var(--text); flex-shrink:0}
.brand svg{height:var(--logo-h,44px); width:auto; display:block}
/* Quadre de l'icona: es fon amb el metàl·lic en fosc (transparent), fosc en clar.
   El text i les barres lima no s'hi veuen afectats (segueixen currentColor / .st0). */
.brand svg .logo-chip{fill:var(--logo-chip-bg); transition:fill .4s}
/* (Resta .brand .name del placeholder anterior: ja no s'usa) */
.brand .name{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--text)}

/* Toggle fosc/clar dins el header (sempre visible pel header sticky). Icona ◐ estàtica. */
.site-header .toggle,
.site-header .menu-toggle{width:44px; height:44px; flex-shrink:0; padding:0; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent; color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s, transform .2s, color .2s; -webkit-appearance:none; appearance:none}
.site-header .toggle:hover,
.site-header .menu-toggle:hover{border-color:var(--lima); transform:scale(1.06)}
.site-header .toggle:focus-visible,
.site-header .menu-toggle:focus-visible{outline:2px solid var(--hover-ink); outline-offset:2px}
.site-header .toggle svg,
.site-header .menu-toggle svg{display:block}
/* Botó hamburguesa: només visible per sota de 860px (vegeu media query). Dues icones
   (obrir/tancar) es commuten per CSS segons aria-expanded, sense tocar el DOM. */
.site-header .menu-toggle{display:none}
.site-header .menu-toggle .icon-close{display:none}
.site-header .menu-toggle[aria-expanded="true"] .icon-open{display:none}
.site-header .menu-toggle[aria-expanded="true"] .icon-close{display:block}
.nav-main ul{display:flex; gap:36px; list-style:none; margin:0; padding:0}
.nav-main a{text-decoration:none; font-size:14px; font-weight:500; letter-spacing:.02em; color:var(--text); padding:6px 2px; transition:color .2s}
.nav-main a:hover{color:var(--hover-ink)}
[data-theme="light"] .nav-main a:hover{color:var(--text); text-decoration:underline; text-decoration-color:var(--lima); text-underline-offset:6px; text-decoration-thickness:3px}

/* BOTONS (nou sistema, plans) */
.btn{font-family:var(--font-body); font-size:14px; font-weight:600; padding:14px 28px; border-radius:var(--radius-btn);
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s,background .2s,color .2s,border-color .2s; border:1px solid transparent}
.btn-primary{background:var(--lima); color:#121212}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--btn-ghost-border)}
.btn-ghost:hover{background:var(--lima); color:#121212; border-color:var(--lima)}

/* HERO + MANIFEST */
.hero{padding:92px 0 96px; min-height:80vh; display:flex; flex-direction:column; justify-content:center}
.hero h1{font-family:var(--font-display); font-weight:900; font-size:clamp(46px,7.2vw,100px); line-height:.96; letter-spacing:-.03em; max-width:16ch}
.hero .lead{margin-top:30px; font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.3vw,28px); line-height:1.25; letter-spacing:-.01em; max-width:30ch}
.hero .actions{margin-top:40px; display:flex; gap:14px; flex-wrap:wrap}
/* Botons NATIUS (editables des de Gutenberg) amb el sistema pla del rediseño.
   GLOBAL (no lligat a .hero ni .content-block) perquè es puguin fer servir a
   qualsevol pàgina, també des del patró "JM: Botons". Sobreescriu l'anell neó
   global del tema. */
.hero .wp-block-buttons{margin-top:40px; gap:14px}
.wp-block-button__link{font-family:var(--font-body); font-size:14px; font-weight:600; padding:14px 28px; border-radius:var(--radius-btn); line-height:1; border:1px solid transparent; box-shadow:none; transition:transform .2s,background .2s,color .2s,border-color .2s}
.wp-block-button__link::before{display:none !important}
.reveal .w{opacity:.16; transition:opacity .5s}
.reveal.in .w{opacity:1}
.manifesto{padding:80px 0}
.manifesto p{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4vw,52px); line-height:1.12; letter-spacing:-.02em; max-width:24ch}

/* INTRO (línia curta abans del manifest, sobre el metàl·lic, sense reveal) */
.intro{padding:0 0 48px}
.intro p{font-family:var(--font-body); font-weight:500; font-size:clamp(18px,2vw,22px); line-height:1.6; color:var(--muted); max-width:58ch}

/* PARAGRAFS DE LECTURA (tota la web, fora de la Home): mateixa mida que
   .content-block, perque tot el cos de text (pagines i entrades) es vegi
   igual d'accessible. S'exclouen paragrafs amb una mida explicita ja triada
   a l'editor (has-*-font-size) per no trepitjar decisions deliberades. */
.entry-content p:not([class*="-font-size"]){font-size:1.5rem; line-height:1.6}

/* CONTENT BLOCK (seccions de contingut real: "Un pont...", "Contingut en català").
   Sobre el mateix fons metàl·lic continu que hero/manifest, sense bandes de color noves. */
.content-block{padding:80px 0}
.content-block .wrap{display:flex; gap:56px; align-items:flex-start; flex-wrap:wrap}
.content-block .wrap > *{flex:1 1 320px; min-width:0}
.content-block-single .wrap{display:block}
.content-block h2{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.6vw,44px); line-height:1.1; letter-spacing:-.02em; max-width:20ch; margin:0}
.content-block p{font-family:var(--font-body); font-size:1.5rem; line-height:1.6; color:var(--text); max-width:60ch; margin-top:18px}
.content-block p + p{margin-top:14px}
.content-block .wp-block-buttons{margin-top:32px}

/* ZONES / BANDES */
.is-style-band-light{background:var(--band-light)}
.is-style-band-dark{background:var(--band-dark); --text:var(--wp--preset--color--contrast-fixed); --muted:var(--wp--preset--color--muted); --line:var(--wp--preset--color--line); --line-strong:var(--wp--preset--color--line-strong); --hover-ink:var(--wp--preset--color--accent-1); color:var(--text)}
.zonehead{padding:64px 0 22px}
.zonehead .is-style-kicker{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.zonehead .is-style-kicker .star{color:var(--hover-ink)}
.zonehead h2{font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em; max-width:22ch}

/* SISTEMA DE PESTANYES (full-bleed, contingut alineat a reixa) */
.tabs{border-top:1px solid var(--line)}
.rin{max-width:var(--maxw); margin:0 auto; width:100%; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:24px}
.row{display:flex; align-items:center; width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text);
  text-decoration:none; text-align:left; font-family:inherit; min-height:112px; cursor:pointer;
  opacity:0; transform:translateY(46px); transition:opacity .6s,transform .6s,color .2s}
.row.in{opacity:1; transform:none}
.row:hover{color:var(--hover-ink)}
.row:focus-visible{outline:2px solid var(--hover-ink); outline-offset:-4px}
.rtitle{font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.5vw,30px); letter-spacing:-.01em; display:flex; align-items:baseline; line-height:1.1}
.rnum{display:inline-block; min-width:var(--numcol); font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.04em; transition:color .2s}
.row:hover .rnum{color:var(--hover-ink)}
.rmeta{display:flex; align-items:center; gap:22px; flex-shrink:0}
.rhint{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:color .2s}
.row:hover .rhint{color:var(--hover-ink)}
.plus{font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1; transition:transform .3s}
.row[aria-expanded="true"] .plus{transform:rotate(45deg)}
.detail{max-height:0; overflow:hidden; transition:max-height .4s}
.detail .rin{padding-top:0; padding-bottom:0; display:block}
.detail.open{max-height:240px}
.detail .body{max-width:62ch; padding:4px 0 30px; font-family:var(--font-body); font-size:16px; color:var(--text); opacity:.92; border-bottom:1px solid var(--line)}
.placeholder{color:var(--muted); font-style:italic}
.tabfoot{padding:26px 0 4px}
.tablink{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); text-decoration:none; display:inline-flex; gap:8px; align-items:center}
.tablink:hover{color:var(--hover-ink)}
/* Pie de zona: alinea el tablink a la reixa (dins .rin), sense doble padding */
.tabfoot .rin{justify-content:flex-start}
.tabfoot .rin .tablink{max-width:none; margin:0; padding:0}

/* Ajust fi WPpodcast (#pod): kicker sense asterisc i amb el to blanc del text,
   files (.rin) amb box-sizing correcte perquè la numeració quedi alineada amb
   la reixa de la pàgina (el .rin dels blocs dinàmics no hereta el border-box
   dels wp-block-group), i enllaç final centrat verticalment dins .tabfoot. */
#pod .is-style-kicker{color:var(--text)}
#pod .rin{box-sizing:border-box}
#pod .tabfoot{padding:15px 0}

/* Mateix ajust fi per a Explora per temes (#temes): kicker sense asterisc,
   numeració alineada amb la reixa i enllaç final centrat. A més, el "+" de
   l'acordeó queda òpticament més avall que "Llegeix més" per mètrica de
   la família tipogràfica (line-height:1 al glif "+"): es corregeix amb un
   petit translateY. Cal repetir el translateY combinat amb el rotate(45deg)
   perquè, en tenir #temes un ID, qualsevol regla d'aquí sempre guanyaria
   per especificitat a la regla global de rotació si no s'inclou aquí mateix. */
#temes .is-style-kicker{color:var(--text)}
#temes .rin{box-sizing:border-box}
#temes .tabfoot{padding:15px 0}
#temes .plus{transform:translateY(-3.5px)}
#temes .row[aria-expanded="true"] .plus{transform:translateY(-3.5px) rotate(45deg)}

/* Buit per defecte de WordPress entre <main> i el peu (block-gap del tema):
   trenca el disseny a banda plena on totes les seccions van a tocar. */
.wp-site-blocks > footer{margin-block-start:0}

/* MARQUEE */
.ribbon{background:var(--ribbon); padding:6px 0; overflow:hidden; color:var(--wp--preset--color--contrast-fixed)}
.ribbon .lbl{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--muted-2); margin:0 var(--pad) 24px}
.marquee{display:flex; overflow:hidden}
.track{display:flex; align-items:center; gap:6px; padding-left:6px; animation:marq 22s linear infinite; will-change:transform}
.marquee:hover .track{animation-duration:55s}
.tile{width:152px; height:152px; flex-shrink:0; background:var(--tile); border-radius:8px; display:flex; align-items:center; justify-content:center}
.tile img{width:78%; height:58%; object-fit:contain; filter:brightness(0) invert(1); opacity:.92}
/* Logo Elsa Tapia a mida doble (a peticio de Josep): el requadre es manté
   igual que la resta (152px); nomes s'escala x2 la imatge del logo. Se
   selecciona per src, no per alt, perque les copies del bucle infinit del
   marquee no porten alt. */
.tile img[src*="Elsa-Tapia-Logo"]{transform:scale(2)}
/* Guanya a la convenció global d'imatges b/n del contingut (grayscale !important),
   també en hover: els logos del marquee sempre en blanc monocrom */
.ribbon .tile img,
.ribbon .tile a:hover img,
.ribbon .tile a:focus img{filter:brightness(0) invert(1) !important}
.tile span{color:var(--wp--preset--color--contrast-fixed); font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.02em; opacity:.92}
/* Distancia del bucle: 5 tiles iguals a 158px (152+6 gap) = 790px, perque
   el bucle infinit segueixi sent perfecte (totes les tiles fan la mateixa mida). */
@keyframes marq{to{transform:translateX(var(--marquee-shift,-790px))}}

/* FOOTER (redisseny) */
.site-footer{background:var(--foot); color:#F2F2F0; padding:64px 0 40px; --text:#F2F2F0; --muted:#9A9A97; --line:rgba(242,242,240,.14); --hover-ink:var(--lima)}
.site-footer .foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; padding-bottom:44px; border-bottom:1px solid var(--line)}
.site-footer .foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.site-footer .foot-logo{display:flex; width:44px; height:44px; flex-shrink:0}
.site-footer .foot-logo img{width:100%; height:100%; display:block}
.site-footer .foot-tag{color:#B3B3B0; font-size:15px; max-width:26ch}
.site-footer .foot-col h3{font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#B3B3B0; margin-bottom:16px}
.site-footer .foot-col ul{list-style:none; margin:0; padding:0}
.site-footer .foot-col li{margin-bottom:3px}
.site-footer .foot-col a{display:inline-block; padding:8px 0; color:#F2F2F0; text-decoration:none; font-size:15px; transition:color .2s}
.site-footer .foot-col a:hover{color:var(--lima)}
.site-footer .foot-mid{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:26px 0; border-bottom:1px solid var(--line)}
.site-footer .carbon{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#B3B3B0}
.site-footer .carbon .badge{color:var(--lima); font-weight:700}
.site-footer .carbon a{color:#B3B3B0; text-decoration:underline; text-underline-offset:2px}
.site-footer .carbon a:hover{color:var(--lima)}
.site-footer .copy{font-size:13px; color:#B3B3B0}
.site-footer .legal{margin-top:24px; font-size:12px; line-height:1.7; color:#7C7C79}
/* Les dues columnes d'enllaços són blocs natius (grup + encapçalament + llista) per
   poder reescriure-les des de l'editor. El grup natiu arrossega el layout "flow" de
   WordPress (:where(.is-layout-flow) > * + * { margin-block-start: var(--wp--style--block-gap) }),
   que separaria el títol de la llista amb 24px; aquí es neutralitza i es recuperen
   els marges originals del disseny. */
.site-footer .foot-col{margin:0}
.site-footer .foot-col > *{margin-top:0}
.site-footer .foot-col > h3{margin-bottom:16px}
.site-footer .foot-col > ul{margin-bottom:0}
/* Coordenades de Canet de Mar, sota l'eslògan de la marca. El cor sempre vermell,
   també en hover (no canvia mai de color). */
.site-footer .foot-coords{margin-top:12px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8F8F8C}
.site-footer .foot-coords .heart,
.site-footer .foot-coords:hover .heart{color:#E5484D}
/* Batec: dos cops seguits (sístole i diàstole) i pausa, com un cor de debò. Cal
   display:inline-block perquè un element en línia ignora transform. */
@keyframes jm-heartbeat{
  0%{transform:scale(1)} 8%{transform:scale(1.25)} 16%{transform:scale(1)}
  24%{transform:scale(1.18)} 34%{transform:scale(1)} 100%{transform:scale(1)}
}
.site-footer .foot-coords .heart{display:inline-block; transform-origin:center; animation:jm-heartbeat 1.6s ease-in-out infinite}
/* Patrocini d'allotjament: ocupa tota l'amplada de la graella .foot-top, per sota de
   les columnes i per damunt de la seva línia inferior. */
.site-footer .foot-sponsor{grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:12px; font-size:14px; color:#B3B3B0}
.site-footer .foot-sponsor-logo{display:inline-flex; flex-shrink:0; transition:opacity .2s}
.site-footer .foot-sponsor-logo img{display:block; width:24px; height:24px}
.site-footer .foot-sponsor-logo:hover{opacity:.75}

/* GUIA D'ESTIL (pàgina de referència, no forma part del disseny públic) */
.sg-section{padding:56px 0; border-bottom:1px solid var(--line)}
.sg-section .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.sg-section h2{font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.6vw,32px); margin-bottom:8px}
.sg-section .sg-desc{color:var(--muted); font-family:var(--font-body); margin-bottom:28px; max-width:60ch}
.sg-swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px}
.sg-swatch{border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--line)}
.sg-swatch .sw{height:72px}
.sg-swatch .lbl{padding:10px 12px; font-family:var(--font-body); font-size:13px; background:var(--band-dark); color:#F2F2F0}
.sg-swatch .lbl code{display:block; font-size:11px; color:#9A9A97; margin-top:2px}
.sg-type-row{display:flex; align-items:baseline; gap:20px; padding:14px 0; border-top:1px solid var(--line)}
.sg-type-row:first-child{border-top:0}
.sg-type-row .tag{font-family:var(--font-body); font-size:12px; color:var(--muted); min-width:110px; text-transform:uppercase; letter-spacing:.08em}
.sg-type-row .sample{font-family:var(--font-display); color:var(--text)}
.sg-h1{font-weight:900; font-size:clamp(32px,5vw,64px); letter-spacing:-.03em; line-height:.98}
.sg-h2{font-weight:800; font-size:clamp(24px,3vw,40px); letter-spacing:-.02em}
.sg-h3{font-weight:700; font-size:clamp(19px,2.2vw,28px); letter-spacing:-.01em}
.sg-body{font-family:var(--font-body); font-size:16px; color:var(--text); max-width:60ch}

@media(max-width:860px){
  /* Menú hamburguesa: el toggle fosc/clar ja hi era, però no hi havia manera
     d'obrir .nav-main sota 860px (es feia display:none sense alternativa) —
     per això el menú no apareixia mai en mòbil, en cap orientació. */
  .site-header .menu-toggle{display:inline-flex}
  .nav-main{position:absolute; top:100%; left:0; right:0; display:none;
    /* Fons opac (no frost/blur): amb blur, el contingut de darrere (titulars
       grans i en negreta) es transparentava sota els enllaços i els feia
       il·legibles en fer scroll amb el menú obert. */
    background:rgba(20,20,22,.98);
    border-bottom:1px solid var(--line)}
  [data-theme="light"] .nav-main{background:rgba(238,238,240,.98)}
  .nav-main.open{display:block}
  .nav-main ul{display:flex; flex-direction:column; gap:0; padding:8px var(--pad) 16px}
  .nav-main a{display:block; padding:14px 2px; border-bottom:1px solid var(--line)}
  .nav-main li:last-child a{border-bottom:0}
  .hero{min-height:auto; padding:60px 0 72px}
  .site-footer .foot-top{grid-template-columns:1fr 1fr; gap:28px}
  .site-footer .foot-brand-col{grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){
  .track{animation:none} .row{opacity:1; transform:none} .reveal .w{opacity:1} #sheen{display:none}
  .site-footer .foot-coords .heart{animation:none}
}

/* === Ajustos d'edició (2026-07-25) === */
/* Centra els logos dins de cada requadre de la cinta de confiança: l'ancla <a>
   es "desembolica" del layout (display:contents) perquè la imatge sigui
   l'element flex directe de .tile i herevi el centrat ja definit ahi. */
.ribbon .tile a{display:contents}

/* Marge net del enllaç del peu de zona (evita dependre d'un style inline al
   bloc de paràgraf, que Gutenberg no sap validar i acaba duplicant el <p>). */
.tabfoot .rin p{margin:0}

/* Les files (.row) de pòdcast/temes neixen amb opacity:0 i esperen l'scroll-reveal
   de redesign.js, que només s'executa al front-end. Dins l'editor de blocs
   aquest JS mai s'arriba a carregar, així que sense això es veuen buides. */
.editor-styles-wrapper .row{opacity:1; transform:none}

/* === Migrado desde Estilos Globales (post 8) el 2026-07-26 === */
/* 1) Blanco y negro por defecto (contenido general) */
.wp-block-post-content img,
.entry-content img,
.wp-block-post-content figure img,
.entry-content figure img{
  -webkit-filter: grayscale(1) !important;
  filter: grayscale(1) !important;
  transition: filter .25s ease, -webkit-filter .25s ease !important;
}

/* 2) Vuelve a color al hover (contenido general) */
.wp-block-post-content img:hover,
.entry-content img:hover,
.wp-block-post-content a:hover img,
.entry-content a:hover img,
.wp-block-post-content figure:hover img,
.entry-content figure:hover img,
.wp-block-post-content a:focus img,
.entry-content a:focus img{
  -webkit-filter: grayscale(0) !important;
  filter: grayscale(0) !important;
}

/* 3) Excepcion: Cover siempre en color */
.wp-block-cover,
.wp-block-cover *,
.wp-block-cover img,
.wp-block-cover__image-background,
.wp-block-cover__background,
.wp-block-cover__video-background,
.wp-block-cover__background::before,
.wp-block-cover__background::after {
  -webkit-filter: none !important;
  filter: none !important;
}
.wp-block-cover :is(img, svg, video, figure, picture) {
  -webkit-filter: none !important;
  filter: none !important;
}

/* 4) Repintado a blanco del logo negro (pagina Contacte) */
.wp-block-image img.wp-image-1018 {
  filter: brightness(0) invert(1) !important;
}

/* 4b) Excepcion: logo de Wetopi (pagina Sobre mi) siempre en color, sin
   pasar por blanco y negro ni depender del hover */
.wp-block-image img.wp-image-470 {
  -webkit-filter: none !important;
  filter: none !important;
}

/* 4c) Excepcion: portada del descargable (bloque josepmoran/lead-magnet).
   Es un reclamo comercial, no una imagen de contenido: debe leerse en color
   siempre, sin depender de que el visitante pase el raton por encima. */
.jm-lm__cover img {
  -webkit-filter: none !important;
  filter: none !important;
}

/* 5) WPForms: etiquetas y descripciones en blanco (formularios activos) */
.wpforms-field-label,
.wpforms-field-sublabel,
.wpforms-field-description,
.wpforms-field-label-inline {
  color: var(--wp--preset--color--contrast) !important;
}
/* Asterisc de camp obligatori: el vermell pur (#f00) de WPForms no arriba a
   4.5:1 sobre el fons clar de la targeta del formulari (ratio 3.64:1). */
.wpforms-required-label {
  color: #B91C1C !important;
}

/* 6) Centrado vertical de la barra legal de Lawwwing (footer, inyectado por su script externo) */
#lw-footer .lw-footer-wrapper{
  align-items: center !important;
}
#lw-footer .lw-footer-wrapper > div{
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
}