/* CEEC — el CSS de la web («La paret»).
   El sistema del model principal (The Studio by Julie Granger) amb els materials del CEEC:
   el blanc de la paret sota el fluorescent, el negre dels pilars, el vermell del logo només al
   logo, a l'acció i a la signatura. Newsreader per a titulars i cos; Martian Mono per a horaris,
   etiquetes, xips i botons (la lletra dels rellotges LED de les seves parets).
   Primer el sistema i les peces comunes; després, secció per secció; les esmenes d'escriptori i
   de mòbil van al FINAL (trampa 2 de create-web: a igual especificitat guanya l'última). */
:root{
  --paret:#F2F1EE;
  --paret-2:#E7E5E0;
  --blanc:#FBFAF8;
  --pilar:#151417;
  --pilar-2:#222125;
  --pilar-3:#2C2B30;
  --tinta:#1B1A1D;
  --grafit:#55565B;
  --crema:#F4F2EC;
  --crema-2:#CFCDC7;
  --vermell:#E3343F;      /* el logo */
  --accio:#C8252F;        /* el botó: el blanc a sobre passa AA (4,99:1) */
  --accio-2:#A81E27;
  --obert:#3DBE72;
  --tancat:#9A9AA0;
  --foc:#E0552C; --aigua:#1B97AB; --terra:#8A7A3C; --aire:#8E7BCB;   /* els colors de les Sèries, als seus cartells */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px;
  --rb:6px;
  --marge:clamp(1rem,3vw,2.6rem);
  --ample:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  color:var(--tinta);background:var(--paret);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1{font-weight:400;letter-spacing:-.022em;line-height:1.02;text-wrap:balance;font-variation-settings:"opsz" 72}
h2,h3{font-weight:400;text-wrap:balance}
em{font-style:italic;font-weight:300}
[id]{scroll-margin-top:84px}
[hidden]{display:none!important}
/* Les caselles d'«afegir» de /contenido: només es veuen a /revisar/<token> (revisar.css les aixeca) */
[data-contenido$="afegir"][hidden]{display:none!important}
/* A /revisar/<token>, els botons de dia obren el panell de text en comptes de canviar de dia: s'hi
   ensenyen els set dies seguits, perquè el client pugui veure i corregir totes les classes (el
   data-rv-fase només el posa la capa de revisió: a la web pública això no fa res) */
body[data-rv-fase="1"] .panell-dia[hidden]{display:grid!important;margin-top:1.4rem}
/* A /revisar/<token>, l'escena del vídeo de presentació sense el retall que la fa créixer: retallaria els recuadres */
body[data-rv-fase] .video-a__escena{clip-path:none}
/* Acabat: el focus, la selecció i els controls, amb els colors del sistema */
:focus-visible{outline:2px solid var(--accio);outline-offset:3px}
::selection{background:var(--accio);color:var(--blanc)}
input,select,textarea{accent-color:var(--accio);caret-color:var(--accio)}
p,li,dd,blockquote,figcaption{text-wrap:pretty}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Etiquetes amb la lletra del rellotge: estreta perquè hi càpiga, ampla quan és l'hora */
.mono{
  font-family:var(--mono);font-weight:400;font-stretch:87.5%;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
}
.mono--baix{text-transform:none;letter-spacing:.01em}
.ini{color:var(--accio)}
.fosc .ini{color:#FF6B73}

/* La marca, vectoritzada del JPEG del logo (⚠ demanar l'original) */
.marca{display:inline-flex;align-items:center;gap:.7rem;color:var(--vermell)}
.marca svg{display:block;height:26px;width:auto}
.marca__nom{font-family:var(--mono);font-stretch:87.5%;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:currentColor}
.fosc .marca__nom,.barra .marca__nom{color:var(--crema)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:48px;padding:0 1.3rem;border-radius:var(--rb);
  background:var(--accio);color:var(--crema);
  font-family:var(--mono);font-stretch:87.5%;font-weight:500;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;transition:background .2s ease,transform .15s ease,box-shadow .2s ease;
}
.btn:hover{background:var(--accio-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.toc:focus-visible{outline:2px solid var(--crema);outline-offset:3px}
.clar .btn:focus-visible,.clar .toc:focus-visible,.seccio--paret :focus-visible,.seccio--blanc :focus-visible,.panell :focus-visible,.onsom-a :focus-visible{outline-color:var(--tinta)}
.dades-a :focus-visible{outline-color:var(--crema)}
.btn--buit{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--buit:hover{background:rgba(255,255,255,.1)}
.clar .btn--buit:hover,.seccio--paret .btn--buit:hover{background:rgba(21,20,23,.06)}
.btn .wa{width:1.05em;height:1.05em;flex:none}

.enllac{position:relative}
.enllac::after{content:"";position:absolute;left:0;right:0;bottom:.55em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.enllac:hover::after{transform:scaleX(1)}
.toc{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.subratllat{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.subratllat:hover{text-decoration-thickness:2px}

/* Capçalera de l'hero (dins l'hero, absoluta) */
.cap{
  position:absolute;left:0;right:0;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:.9rem var(--marge);
}
.cap nav{display:flex;gap:clamp(.9rem,2vw,1.8rem)}
.cap nav a{white-space:nowrap}
.cap__dreta{display:flex;align-items:center;gap:.8rem}
.cap .btn{min-height:44px;padding:0 1rem}

/* El xip d'estat: calculat amb l'horari del centre (estat) */
.xip{
  display:inline-flex;align-items:center;gap:.55em;min-height:34px;padding:0 .8rem;border-radius:999px;
  background:rgba(21,20,23,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--crema);font-family:var(--mono);font-stretch:87.5%;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
.clar .xip,.xip--clar{background:rgba(21,20,23,.07);color:var(--tinta)}
.xip .punt{width:.55em;height:.55em;border-radius:50%;background:var(--tancat);flex:none}
.xip.obert .punt{background:var(--obert);box-shadow:0 0 0 3px rgba(61,190,114,.22)}

/* Foto a sang: vel, gra, zoom lent */
.fons{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kb{animation:kb 24s cubic-bezier(.2,.6,.2,1) both;will-change:transform}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
.gra::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
.gra--fosc::after{opacity:.09;mix-blend-mode:multiply;filter:invert(1)}

/* ── La barra fixa: apareix quan l'hero ja ha passat (mecànica de Beli's, vestida amb el sistema).
   No toca l'hero: és un altre element. ── */
.barra{
  position:fixed;left:0;right:0;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem var(--marge);background:rgba(21,20,23,.92);color:var(--crema);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(244,242,236,.08);
  transform:translateY(-110%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.barra.visible{transform:none}
.barra .marca svg{height:22px}
.barra nav{display:flex;gap:clamp(.8rem,1.8vw,1.6rem)}
.barra__dreta{display:flex;align-items:center;gap:.7rem}
.barra .btn{min-height:44px;padding:0 1rem}
.barra__menu{display:none}

/* ── El selector d'idioma (CA · ES): a la capçalera de l'hero, a la barra fixa i al menú. El contingut l'escriu
   tools/idiomes.mjs a cada idioma; aquí només l'aspecte. La llengua d'ara, subratllada; l'altra, enllaç. ── */
.idiomes{display:flex;align-items:center;flex:none;font-stretch:87.5%;font-size:.68rem;letter-spacing:.08em}
.idiomes a,.idiomes__jo{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.idiomes a{opacity:.62;transition:opacity .18s ease}
.idiomes a:hover{opacity:1}
.idiomes__jo{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.45em}
.menu__cap .idiomes{margin-left:auto;margin-right:.6rem}
/* És un <nav> dins de la capçalera i de la barra: sense això n'heretaria l'espai entre enllaços i, al mòbil, el
   display:none que amaga el menú de seccions. El selector es veu sempre. */
.cap nav.idiomes,.barra nav.idiomes{display:flex;gap:0}

/* ── El menú a pantalla completa (mecànica de Cal Vidal) ── */
.menu{
  position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto 1fr auto;
  background:var(--pilar);color:var(--crema);padding:1rem var(--marge) calc(1.2rem + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;
}
.menu.obert{opacity:1;visibility:visible;transition:opacity .25s ease}
.menu__cap{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.menu__tanca{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--rb);box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.35)}
.menu ol{list-style:none;display:grid;align-content:center;gap:min(.25rem,.6vh)}
.menu ol a{display:flex;align-items:baseline;gap:.9rem;min-height:44px;font-size:min(clamp(1.7rem,7vw,2.6rem),5.4vh);line-height:1.15;letter-spacing:-.015em}
.menu ol a span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--crema-2);min-width:2.2em}
.menu__peu{display:grid;gap:.6rem}
.menu__peu .btn{width:100%}

/* ── La barra mòbil d'accions (mecànica de Beli's): apareix després de l'hero ── */
.peu-mobil{display:none}

/* ── Seccions ── */
.seccio{position:relative;padding:clamp(4.2rem,11vh,7.5rem) var(--marge)}
.seccio--paret{background:var(--paret);color:var(--tinta)}
.seccio--blanc{background:var(--blanc);color:var(--tinta)}
.seccio--pilar{background:var(--pilar);color:var(--crema)}
.seccio--pilar-2{background:var(--pilar-2);color:var(--crema)}
.dins-ample{max-width:var(--ample);margin:0 auto}
.cap-seccio{display:grid;gap:.75rem;margin-bottom:clamp(2rem,5vh,3.4rem);max-width:62rem}
.etiq{display:flex;align-items:center;gap:.6rem;color:var(--grafit)}
.seccio--pilar .etiq,.seccio--pilar-2 .etiq{color:var(--crema-2)}
.etiq::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--vermell);flex:none}
.titol{font-size:clamp(2.5rem,min(5.6vw,9vh),5rem);line-height:.98;letter-spacing:-.028em;font-variation-settings:"opsz" 72}
.titol em{opacity:.78}
.entrada{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.5;max-width:46ch;font-variation-settings:"opsz" 20}
.entrada em{opacity:.85}
.nota{font-size:.95rem;line-height:1.5;max-width:60ch;opacity:.86}

/* ── El formulari de prova (a la demo, per WhatsApp; el de correu torna amb el servei forms) ── */
.form{display:grid;gap:1.1rem}
.form__fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.camp{display:grid;gap:.4rem}
.camp label{font-family:var(--mono);font-stretch:87.5%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.camp label .opc{text-transform:none;letter-spacing:0;opacity:.7}
.camp input,.camp select,.camp textarea{
  width:100%;min-height:48px;padding:.7rem .85rem;border-radius:var(--rb);
  font:inherit;font-size:1.02rem;color:var(--tinta);background:#fff;
  border:1.5px solid rgba(21,20,23,.22);transition:border-color .2s ease,box-shadow .2s ease;
}
.camp textarea{min-height:96px;resize:vertical}
.camp select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231B1A1D' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.camp input:focus,.camp select:focus,.camp textarea:focus{outline:none;border-color:var(--tinta);box-shadow:0 0 0 3px rgba(21,20,23,.12)}
.form__botons{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.avis-dades{font-size:.86rem;line-height:1.45;opacity:.85;max-width:52ch}
.avis{padding:.8rem 1rem;border-radius:var(--rb);background:#E8F6EE;color:#14532D;font-size:.98rem}
.avis.error{background:#FDE8EA;color:#7F1D1D}
.form--fosc .camp input,.form--fosc .camp select,.form--fosc .camp textarea{background:#fff}

/* ── Les fotos que encara no tenim (les de l'equip i la del despatx): un quadre negre amb la mida de la foto, fins
   que arribi (→ /fotos). El contorn tènue és perquè es vegi també sobre el negre dels pilars. ── */
.foto-pendent{background:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(244,242,236,.12)}

/* ── Les ressenyes: el comú (estrelles i cita); la composició va a cada web ── */
.estrelles{color:var(--accio);letter-spacing:.12em;font-size:.95rem}
.cita{font-style:italic;font-weight:300;font-variation-settings:"opsz" 24}
.autor{display:block;margin-top:.8rem}

/* ── El peu: torna a la paret de l'hero (fons clar, i la llum ara ve de baix) i tanca amb el logo gegant tallat pel marge,
   com el nom que tanca la pàgina a Phive (awwwards) i a Capitolium (onepagelove). No repeteix «On som», que és just a sobre. ── */
.peu{
  position:relative;overflow:hidden;isolation:isolate;color:var(--tinta);
  padding:clamp(3.6rem,10vh,6rem) var(--marge) 0;
  background:
    radial-gradient(110% 62% at 50% 112%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%),
    radial-gradient(90% 50% at 50% -10%,rgba(160,158,152,.2),rgba(160,158,152,0) 70%),
    var(--paret);
}
.peu__dins{position:relative;z-index:1;max-width:var(--ample);margin:0 auto}
.peu__tanca{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.6rem 2rem}
.peu__tanca .etiq{margin-bottom:.8rem}
.peu__frase{font-size:clamp(2.6rem,min(6vw,10vh),5.4rem);line-height:.98;letter-spacing:-.03em;font-variation-settings:"opsz" 72}
.peu__frase em{opacity:.78}
.peu__accions{display:flex;flex-wrap:wrap;gap:.6rem;padding-bottom:.4rem}
.peu__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 2.4rem;margin-top:clamp(2.4rem,6vh,3.6rem);padding-top:.6rem;border-top:1px solid rgba(21,20,23,.14)}
.peu__web{display:flex;flex-wrap:wrap;gap:0 1.5rem}
.peu__web a{display:inline-flex;align-items:center;min-height:44px}
.xarxes-llista.peu__xarxes{display:flex;flex-wrap:wrap;gap:0 1.6rem}
.peu__xarxes span{font-family:var(--mono);font-stretch:87.5%;font-size:.72rem;letter-spacing:.02em}
.peu__baix{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1.6rem;padding-top:.3rem;border-top:1px solid rgba(21,20,23,.14);color:var(--grafit)}
.peu__baix p{display:flex;align-items:center;min-height:44px}
.peu__baix a{display:inline-flex;align-items:center;min-height:44px}
/* El logo, a l'ample del contingut i tallat pel marge de baix: el marge negatiu (sobre l'ample) amaga una quarta part de l'alçada */
.peu__logo{position:relative;z-index:1;width:min(100%,var(--ample));aspect-ratio:768/308;margin:clamp(1.4rem,4vh,2.6rem) auto -8.5%;color:var(--vermell)}
.peu__logo svg{display:block;width:100%;height:100%}

/* ── La firma de l'agència: sota la fila de baix, centrada i el més petit del peu. El logo és un neó (llum sobre negre):
   sobre la paret clara s'apagaria, així que va dins una pastilla fosca, com el seu original. ── */
.firma{display:flex;justify-content:center;padding-top:.4rem}
.firma__a{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;padding:.4rem .6rem;text-decoration:none;color:var(--grafit)}
.firma__que{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.firma__logo{display:block;background:#0B0B0C;border-radius:6px;padding:3px 10px}
.firma__logo img{display:block;height:34px;width:auto;transition:filter .3s ease}
.firma__a:hover img,.firma__a:focus-visible img{filter:brightness(1.25)}

/* ── 404 ── */
.p404{min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem var(--marge);background:var(--pilar);color:var(--crema)}
.p404 .marca svg{height:40px}
.p404 h1{font-size:clamp(2.6rem,7vw,5rem);margin:1.4rem 0 .8rem}
.p404 p{max-width:40ch;margin:0 auto 1.6rem;opacity:.88}
.p404 .accions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.p404 .btn--buit{color:var(--crema)}

/* ── Mòbil (comú). Les esmenes de cada web van al final del seu fitxer. ── */
@media (max-width:760px){
  .cap{padding:.7rem 1rem;gap:.6rem}
  .cap nav,.cap .btn{display:none}
  .marca__nom{display:none}
  .xip{font-size:.56rem;padding:0 .65rem;min-height:30px}
  .barra{padding:.45rem 1rem}
  .barra nav,.barra .btn,.barra .xip{display:none}
  .barra__menu{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;gap:.5rem;padding:0 .8rem;border-radius:var(--rb);box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.35);font-family:var(--mono);font-stretch:87.5%;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
  .peu-mobil{
    position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:auto 1fr 1fr;gap:.5rem;
    padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));background:rgba(21,20,23,.95);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -1px 0 rgba(244,242,236,.1);
    transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .peu-mobil.visible{transform:none}
  .peu-mobil .btn{min-height:48px;padding:0 .7rem;font-size:.66rem}
  .peu-mobil .btn--buit{color:var(--crema)}
  .peu-mobil__menu{min-width:48px;min-height:48px;border-radius:var(--rb);color:var(--crema);box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.35);font-family:var(--mono);font-stretch:87.5%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:0 .8rem}
  .seccio{padding:3.6rem 1rem}
  .titol{font-size:clamp(2.3rem,11vw,3.2rem)}
  .form__fila{grid-template-columns:1fr}
  .form__botons .btn{flex:1 1 auto}
  /* Al mòbil, la barra d'accions tapa els darrers 68 px: el peu els guarda a dins (abans ho feia el body) i el logo s'hi veu
     sencer, sense tallar */
  .peu{padding:3.2rem 1rem calc(68px + 1.4rem + env(safe-area-inset-bottom))}
  .peu__frase{font-size:clamp(2.4rem,12vw,3.4rem)}
  .peu__accions{width:100%}
  .peu__accions .btn{flex:1 1 100%}
  .peu__web{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
  .xarxes-llista.peu__xarxes{display:grid;gap:0}
  .peu__baix{display:grid}
  .peu__logo{margin:1.6rem auto 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .video-a{height:100svh}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .kb{transform:none}
}

/* ═════════════════════════════════════════════════════════════════════════════
   LES SECCIONS — «La paret». L'hero ve de boceto/a-la-paret.html.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Hero A. Moviment: Urban Climb (Pinterest → BP&O): el nom ocupa tot l'ample de la primera
   pantalla i la foto va a sota, en targeta. Aquí no és tipografia: és el seu logo tal com està
   pintat a la paret blanca de la sala de musculació, i la pàgina és aquesta paret. */
body{background:var(--paret)}
.hero{
  --targeta:clamp(230px,38svh,400px);
  position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(.7rem,2vh,1.3rem);
  padding:76px var(--marge) var(--marge);
  background:
    radial-gradient(120% 70% at 50% -8%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%),
    radial-gradient(90% 60% at 50% 115%,rgba(160,158,152,.22),rgba(160,158,152,0) 70%),
    var(--paret);
}
.paret{display:grid;place-items:center;align-content:center;gap:clamp(.5rem,1.6vh,1rem);min-height:0}
.paret .logo{color:var(--vermell);height:clamp(96px,calc(100svh - 76px - var(--targeta) - 8.2rem),470px);width:min(94vw,1300px)}
.paret .logo svg{width:100%;height:100%;display:block}
.hero .nom{text-align:center;color:var(--grafit);font-size:clamp(.62rem,.9vw,.78rem);letter-spacing:.2em}
.targeta{
  position:relative;height:var(--targeta);border-radius:var(--r);overflow:hidden;isolation:isolate;
  color:var(--crema);background:var(--pilar);
  box-shadow:0 30px 60px -30px rgba(21,20,23,.45);
}
.targeta .fons{object-position:50% 58%;filter:saturate(.92) contrast(1.04)}
.targeta .vel{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(21,20,23,.86) 0%,rgba(21,20,23,.6) 38%,rgba(21,20,23,.12) 70%,rgba(21,20,23,.35) 100%),
             linear-gradient(0deg,rgba(21,20,23,.8) 0%,rgba(21,20,23,.42) 24%,rgba(21,20,23,0) 52%)}
.targeta .dins{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end;gap:1.5rem;padding:clamp(1.1rem,3vh,2rem) clamp(1.1rem,2.6vw,2.2rem)}
.hero h1{font-size:clamp(2rem,min(4.1vw,6.8vh),4.3rem);max-width:15ch;font-weight:400}
.hero h1 em{opacity:.88}
.hero .que{margin-top:.7rem;opacity:.85}
.hero .dreta{display:grid;justify-items:end;gap:.7rem;text-align:right}
.hero .accions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.hero .accions .btn--buit{color:var(--crema);background:rgba(21,20,23,.4)}
.hero .wa-linia{color:rgba(244,242,236,.82)}
.hero__contacte{display:flex;align-items:center;justify-content:flex-end;gap:.2rem .7rem;flex-wrap:wrap}
.xarxes-icones{display:flex;gap:.1rem;margin-right:-.5rem}
.xarxes-icones a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:transform .2s ease,background .2s ease}
.xarxes-icones a:hover{transform:translateY(-1px);background:rgba(244,242,236,.12)}
.xarxes-icones svg{width:26px;height:26px}

/* ── 1 · PRESENTACIÓ. El reproductor de presentació d'ilurodigital.com (vist des del Chromium de lab-01): en baixar,
   l'escena creix de targeta a pantalla completa i queda fixada; a sobre, una portada fosca amb la marca, l'ona i
   «Activa el so», i en tocar-la el vídeo sona allà mateix. El JS posa --p (de 0 a 1) segons el scroll i només
   aleshores la secció és més alta que la pantalla; sense JS, o amb moviment reduït, l'escena ja és sencera i no es fixa.
   El reel és vertical: a l'escriptori va sencer al mig, amb la mateixa imatge desenfocada omplint els costats. ── */
.video-a{position:relative;height:100svh;background:var(--pilar)}
.js .video-a{height:175svh}
.video-a__fixa{position:sticky;top:0;height:100svh;overflow:hidden}
.video-a__escena{--p:1;position:relative;height:100%;overflow:hidden;isolation:isolate;background:#000;color:var(--crema);
  clip-path:inset(calc((1 - var(--p)) * 9svh) calc((1 - var(--p)) * 12vw) round calc((1 - var(--p)) * 18px))}
.video-a__fons{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;z-index:-2;filter:blur(40px) saturate(.85) brightness(.45)}
.video-a__video{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;object-fit:contain}
.video-a__portada{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;
  background:radial-gradient(60% 70% at 50% 50%,rgba(21,20,23,.3),rgba(21,20,23,.8));transition:opacity .45s ease,visibility 0s linear .45s}
.video-a__portada::before{content:"";position:absolute;left:50%;top:50%;width:min(66svh,620px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(244,242,236,.16);box-shadow:0 0 0 34px rgba(244,242,236,.035),0 0 0 72px rgba(244,242,236,.02);pointer-events:none}
.video-a--so .video-a__portada{opacity:0;visibility:hidden;pointer-events:none}
.video-a__portada:focus-visible{outline:2px solid var(--crema);outline-offset:-12px}
.video-a__marca{display:flex;align-items:center;gap:.6rem;color:var(--crema-2);letter-spacing:.2em}
.video-a__marca svg{height:15px;width:auto;color:var(--vermell)}
.video-a__ona{display:flex;align-items:center;gap:5px;height:44px;color:var(--crema)}
.video-a__ona i{display:block;width:2px;height:30%;border-radius:2px;background:currentColor;animation:ona 1.2s ease-in-out infinite}
.video-a__ona i:nth-child(2){animation-delay:-.35s}
.video-a__ona i:nth-child(3){animation-delay:-.7s}
.video-a__ona i:nth-child(4){animation-delay:-.15s}
.video-a__ona i:nth-child(5){animation-delay:-.55s}
.video-a__ona i:nth-child(6){animation-delay:-.9s}
.video-a__ona i:nth-child(7){animation-delay:-.25s}
.video-a__ona i:nth-child(8){animation-delay:-.65s}
.video-a__ona i:nth-child(9){animation-delay:-.45s}
@keyframes ona{0%,100%{height:22%}50%{height:100%}}
.video-a__crida{display:inline-flex;align-items:center;gap:.9rem;font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.01em}
.video-a__fletxa{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accio);color:var(--crema);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s ease}
.video-a__portada:hover .video-a__fletxa{transform:rotate(45deg);background:var(--accio-2)}
.video-a__pista{color:var(--crema-2)}
/* A l'escriptori la portada omple una pantalla sencera: la composició, a la seva escala */
@media (min-width:761px){
  .video-a__portada{gap:1.3rem}
  .video-a__portada::before{width:min(82svh,780px)}
  .video-a__marca{font-size:.82rem}
  .video-a__marca svg{height:20px}
  .video-a__ona{height:70px;gap:7px}
  .video-a__ona i{width:3px}
  .video-a__crida{gap:1.2rem;font-size:clamp(1.8rem,2.8vw,2.6rem)}
  .video-a__fletxa{width:60px;height:60px}
  .video-a__fletxa svg{width:18px;height:18px}
  .video-a__pista{font-size:.84rem}
}

/* ── 2 · LES XIFRES. El que fa diferent el CEEC en tres números, amb la lletra del rellotge de l'horari (Martian
   Mono fina i ampla), sobre el negre dels pilars. Cada xifra porta a la seva secció. ── */
.xifres{background:var(--pilar);color:var(--crema);padding:clamp(2.4rem,7vh,4rem) var(--marge)}
.xifres__llista{list-style:none;max-width:var(--ample);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,3rem)}
.xifres a{display:grid;gap:.7rem;align-content:start;padding-top:1.1rem;border-top:1px solid rgba(244,242,236,.2);transition:border-color .25s ease}
.xifres a:hover{border-top-color:var(--vermell)}
.xifra{font-family:var(--mono);font-weight:200;font-stretch:112.5%;letter-spacing:-.05em;line-height:.9;font-size:clamp(3.6rem,min(8vw,13vh),7rem);font-variant-numeric:tabular-nums}
.xifres__text{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.4;max-width:30ch;opacity:.9}

/* ── 1 · HORARI. Watch Party (onepagelove): el programa com a blocs apilats a tocar, l'hora gegant
   i la classe petita a sota. Aquí és «què hi ha avui»: pestanyes de dia i l'avui obert. ── */
.hor-a .dins-ample{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.hor-a__cap{position:sticky;top:96px;display:grid;gap:1.4rem}
.hor-a__cap .cap-seccio{margin-bottom:0}
.dies{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem}
.dia-tab{
  position:relative;display:grid;place-items:center;min-height:48px;border-radius:var(--rb);
  font-family:var(--mono);font-stretch:87.5%;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--crema);box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.22);transition:background .2s ease,color .2s ease;
}
.dia-tab:hover{background:rgba(244,242,236,.08)}
.dia-tab[aria-selected="true"]{background:var(--crema);color:var(--tinta);box-shadow:none}
.dia-tab.avui::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--vermell)}
.centre{display:grid;gap:.35rem;padding:1.1rem 1.2rem;border-radius:var(--r);background:var(--pilar-2);color:var(--crema)}
.centre p{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.centre .h{font-family:var(--mono);font-weight:300;font-stretch:112.5%;letter-spacing:-.02em;white-space:nowrap}
.centre .xip{display:inline-flex;align-items:center;justify-content:flex-start;justify-self:start;margin-top:.4rem;background:rgba(244,242,236,.08)}
.panell-dia{display:grid;gap:0}
.panell-dia h3{font-family:var(--mono);font-stretch:87.5%;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--crema-2);padding:.2rem 0 .8rem}
.panell-dia ol{list-style:none;display:grid}
.bloc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end;gap:.4rem 1.4rem;
  padding:clamp(1rem,2.6vh,1.6rem) clamp(1rem,2vw,1.6rem);background:var(--blanc);color:var(--tinta);
}
.bloc:nth-child(even){background:var(--pilar-2);color:var(--crema)}
.bloc:first-child{border-radius:var(--r) var(--r) 0 0}
.bloc:last-child{border-radius:0 0 var(--r) var(--r)}
.bloc:only-child{border-radius:var(--r)}
.bloc__hora{font-family:var(--mono);font-weight:200;font-stretch:112.5%;letter-spacing:-.05em;line-height:.9;font-size:clamp(2.8rem,min(5.4vw,9vh),5.6rem);font-variant-numeric:tabular-nums}
.bloc__nom{font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.15;letter-spacing:-.01em}
.bloc__det{grid-column:2;margin-top:-.1rem;opacity:.8}
.bloc--buit{grid-template-columns:1fr;align-items:start;gap:.6rem}
.bloc--buit .bloc__nom{font-style:italic;font-weight:300}
.centre .centre__nota{display:block;font-size:.9rem;line-height:1.4;opacity:.75;margin-top:.35rem}

/* ── 2 · CLASSES. Andre Wolf Boxing (awwwards): teselles de disciplina, foto en blanc i negre a
   sang i el nom a sobre. ── */
.cls-a .graella{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.tessella{
  position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;isolation:isolate;color:var(--crema);background:var(--pilar);
  display:flex;flex-direction:column;justify-content:space-between;padding:1.1rem 1.1rem 1rem;
}
.tessella img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) contrast(1.12) brightness(.82);transition:filter .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.tessella::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,20,23,.6) 0%,rgba(21,20,23,.08) 34%,rgba(21,20,23,.15) 55%,rgba(21,20,23,.88) 100%)}
.tessella:hover img{filter:grayscale(.15) contrast(1.05) brightness(.85);transform:scale(1.03)}
.tessella h3{font-size:clamp(1.4rem,1.9vw,1.85rem);line-height:1.05;letter-spacing:-.015em}
.tessella h3 em{display:block}
.tessella__peu{display:grid;gap:.5rem}
.tessella__peu p{font-size:.98rem;line-height:1.35;opacity:.92}
.tessella__peu a{justify-self:start;display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-family:var(--mono);font-stretch:87.5%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.tessella__peu a:hover{text-decoration:underline;text-underline-offset:.25em}
.tessella--text{background:var(--pilar);aspect-ratio:auto;justify-content:flex-start;gap:.9rem}
.tessella--text::before{display:none}
.tessella--text .tessella__peu{margin-top:auto}
.tessella--text ul{list-style:none;display:grid;gap:.2rem;font-size:1.1rem}
.tessella--text li::before{content:"· ";color:var(--vermell)}
.cls-a .tessella--text{grid-column:1 / -1}
.cls-a .tessella--text ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.4rem}

/* ── 3 · QUINA SÈRIE ET VA? Julie Granger («Si vous vous reconnaissez»): targetes de persona amb
   foto i frase; cadascuna acaba en la seva Sèrie. ── */
.qs-a .graella{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.persona{display:grid;gap:.9rem;align-content:start}
.persona__foto{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;isolation:isolate;color:var(--crema)}
.persona__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.persona__foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,20,23,0) 40%,rgba(21,20,23,.85) 100%)}
.persona__foto p{position:absolute;left:1rem;right:1rem;bottom:1rem;font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.12;letter-spacing:-.01em}
.persona h3{font-size:1.35rem;line-height:1.1}
.persona .frase{font-style:italic;font-weight:300;opacity:.86;line-height:1.35}
.persona .quan{color:var(--grafit)}
.persona a{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-stretch:87.5%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid currentColor}

/* ── 7 · ELS ESPAIS. Tres espais i no vuit sales (ho van dir ells el 24-10-2026): un plànol de línia amb el dojo a
   part —separat i amb la vora a traços—, i a sota cada espai. La sala conserva la fila horitzontal que s'arrossega
   (Urban Climb, «Locations»). ── */
.planol{list-style:none;display:grid;grid-template-columns:2.4fr 1.5fr 1.5fr;margin-bottom:clamp(2.6rem,6vh,3.8rem);min-height:clamp(120px,18vh,170px)}
.planol li{display:flex}
.planol a{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;padding:.9rem 1rem;border:1.5px solid rgba(244,242,236,.38);font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.1;letter-spacing:-.01em;transition:background .2s ease}
.planol a:hover{background:rgba(244,242,236,.06)}
.planol .mono{color:var(--crema-2);letter-spacing:.08em}
/* La sala, i a part (fora del gimnàs, a tocar) el despatx i el dojo: cadascun amb la seva línia discontínua */
.planol__sala a{border-radius:var(--rb)}
.planol__despatx,.planol__dojo{position:relative;margin-left:clamp(1.4rem,4vw,3.4rem)}
.planol__despatx a,.planol__dojo a{border-style:dashed;border-radius:var(--rb)}
.planol__despatx::before,.planol__dojo::before{content:"";position:absolute;right:100%;top:50%;width:clamp(1.4rem,4vw,3.4rem);border-top:1.5px dashed rgba(244,242,236,.38)}
.espai{display:grid;gap:1.2rem;align-content:start;padding-top:1.4rem;border-top:1px solid rgba(244,242,236,.16)}
.espai__fila-cap{display:flex;align-items:end;justify-content:space-between;gap:2rem}
.espai__cap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1.1rem;align-items:baseline;max-width:52rem}
.espai__n{color:var(--crema-2);font-weight:300;font-stretch:112.5%;font-size:.95rem}
.espai h3{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;letter-spacing:-.02em}
.espai__cap p:not(.espai__n){grid-column:2;opacity:.85;line-height:1.45;max-width:54ch}
.espais-a__dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(2.6rem,6vh,3.6rem)}
.espai__foto{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden}
.espai__foto img{width:100%;height:100%;object-fit:cover}
.espais-a > .dins-ample > .nota{margin-top:1.6rem}
.fletxes{display:flex;gap:.5rem}
.fletxa{min-width:48px;min-height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.35);display:grid;place-items:center;font-family:var(--mono);font-size:1rem;transition:background .2s ease}
.fletxa:hover{background:rgba(244,242,236,.1)}
.fila{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,31vw,430px);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;
  padding-bottom:1rem;margin-inline:calc(-1 * var(--marge));padding-inline:var(--marge);scroll-padding-inline:var(--marge);
}
.fila{scrollbar-width:thin;scrollbar-color:rgba(244,242,236,.3) transparent}
.sala{scroll-snap-align:start;display:grid;gap:.75rem;align-content:start}
.sala img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.sala h4{font-size:1.5rem;font-weight:400;line-height:1.1;letter-spacing:-.01em}
.sala p{opacity:.82;line-height:1.4}

/* ── 2 · L'EQUIP. El que fa diferent el CEEC. Mario, amb el retrat i la credencial com a declaració gran (Essor
   Fitness, awwwards); a sota, les fitxes de l'equip clavades a la paret i girades com les ressenyes (Trait). ── */
.equip-a__mario{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.equip-a__retrat{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1}
.equip-a__retrat img{width:100%;height:100%;object-fit:cover;object-position:52% 40%}
.fitxes{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;align-items:start;margin-top:clamp(3rem,8vh,5rem);padding-bottom:1.4rem}
.fitxa{display:grid;gap:.9rem;align-content:start;background:var(--blanc);border-radius:var(--r);padding:.8rem .8rem 1.4rem;box-shadow:0 22px 40px -28px rgba(21,20,23,.45),0 1px 0 rgba(21,20,23,.06)}
.fitxa:nth-child(1){transform:rotate(-1.6deg)}
.fitxa:nth-child(2){transform:rotate(1.2deg) translateY(1.4rem)}
.fitxa:nth-child(3){transform:rotate(-.6deg) translateY(.4rem)}
.fitxa:nth-child(4){transform:rotate(1deg) translateY(1rem)}
.fitxa__foto{aspect-ratio:4/5;border-radius:calc(var(--r) - 5px);overflow:hidden}
.fitxa__foto img{width:100%;height:100%;object-fit:cover}
.fitxa__text{display:grid;gap:.45rem;padding:0 .5rem}
.fitxa__rol{color:var(--grafit)}
.fitxa h3{font-size:clamp(1.55rem,2.1vw,1.95rem);line-height:1.05;letter-spacing:-.015em}
.fitxa__punts{list-style:none;display:grid;gap:.3rem;margin-top:.15rem}
.fitxa__punts li{position:relative;padding-left:1.05rem;line-height:1.35}
.fitxa__punts li::before{content:"";position:absolute;left:0;top:.52em;width:.42rem;height:.42rem;border-radius:50%;background:var(--vermell)}
.equip-a__segell{margin-top:clamp(2.4rem,6vh,3.4rem);font-style:italic;font-weight:300;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.35;max-width:44ch}
.declaracio{font-size:clamp(1.55rem,2.5vw,2.45rem);line-height:1.18;letter-spacing:-.015em;font-weight:350;font-variation-settings:"opsz" 48;margin-top:.4rem}
.declaracio em{font-weight:300}
.palmares{list-style:none;display:grid;margin-top:1.8rem;border-top:1px solid rgba(21,20,23,.14)}
.palmares li{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(21,20,23,.14);align-items:baseline}
.palmares .any{font-family:var(--mono);font-weight:300;font-stretch:112.5%;font-size:1.05rem;letter-spacing:-.02em}
.fonts{margin-top:1.2rem;color:var(--grafit)}
.fonts a{display:inline-flex;align-items:center;min-height:44px}
.ig-persona{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;justify-self:start;font-family:var(--mono);font-stretch:87.5%;font-size:.72rem;letter-spacing:.02em}
.ig-persona svg{width:24px;height:24px;flex:none;transition:transform .2s ease}
.ig-persona:hover svg{transform:scale(1.08)}
.ig-persona:hover span{text-decoration:underline;text-underline-offset:.2em}
.equip-a__mario .ig-persona{margin-top:.4rem}

/* ── 3 · ENTRENAMENT I NUTRICIÓ. Dues columnes, una per espai (la sala i el despatx), i el cicle de seguiment
   numerat amb el vermell de l'acció, com «El que has de saber». Sense preus (Víctor, 24-10-2026). ── */
.entr-a__graella{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.4rem);align-items:start}
.servei{display:grid;gap:.75rem;align-content:start;background:var(--paret);border-radius:var(--r);padding:clamp(.8rem,1.6vw,1.1rem) clamp(.8rem,1.6vw,1.1rem) clamp(1.4rem,3vw,2rem)}
.servei > :not(.servei__foto){margin-inline:clamp(.2rem,1vw,.6rem)}
.servei__foto{aspect-ratio:16/9;border-radius:calc(var(--r) - 5px);overflow:hidden;margin-bottom:.6rem}
.servei__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.servei h3{font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.02;letter-spacing:-.02em}
.servei__qui{font-size:1.08rem;line-height:1.45;max-width:46ch}
.servei__llistes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:.5rem}
.servei__cap{color:var(--grafit);margin-bottom:.5rem}
.servei__llistes ul{list-style:none;display:grid;border-top:1px solid rgba(21,20,23,.14)}
.servei__llistes li{padding:.55rem 0;border-bottom:1px solid rgba(21,20,23,.14);line-height:1.35}
.cicle{list-style:none;counter-reset:pas;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:.5rem;background:rgba(21,20,23,.14);border:1px solid rgba(21,20,23,.14);border-radius:calc(var(--r) - 5px);overflow:hidden}
.cicle li{counter-increment:pas;display:grid;gap:.3rem;align-content:start;background:var(--blanc);padding:1rem 1.05rem 1.15rem}
.cicle li::before{content:counter(pas,decimal-leading-zero);font-family:var(--mono);font-weight:300;font-stretch:112.5%;font-size:1.45rem;letter-spacing:-.03em;line-height:1.1;color:var(--accio);margin-bottom:.25rem}
.cicle h4{font-size:1.22rem;font-weight:400;line-height:1.15;letter-spacing:-.01em}
.cicle p{font-size:.96rem;line-height:1.4;opacity:.85}
.servei__nota{line-height:1.45;margin-top:.3rem;max-width:52ch}
.servei__nota.mono{color:var(--grafit);margin-top:0}
.entr-a__peu{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.6rem,4vh,2.4rem)}

/* ── 7 · QUÈ EN DIUEN. Trait («LÄUFT bei uns»): targetes de ressenya soltes i girades, amb la nota
   de Google en una pastilla. ── */
.ress-a .cap-fila{display:flex;align-items:end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.4rem,6vh,4rem)}
.ress-a .cap-seccio{margin-bottom:0}
.pastilla-google{display:inline-flex;align-items:center;gap:.7rem;min-height:48px;padding:0 1.1rem;border-radius:999px;background:var(--pilar);color:var(--crema)}
.pastilla-google .nota-g{font-family:var(--mono);font-weight:300;font-stretch:112.5%;font-size:1.25rem;letter-spacing:-.02em}
.pastilla-google .estrelles{color:#FF6B73}
.solts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;align-items:start;padding-bottom:1.5rem}
.ressenya{background:var(--blanc);border-radius:var(--r);padding:1.5rem 1.5rem 1.3rem;box-shadow:0 22px 40px -28px rgba(21,20,23,.45),0 1px 0 rgba(21,20,23,.06);display:grid;gap:.8rem}
.ressenya:nth-child(1){transform:rotate(-2.2deg)}
.ressenya:nth-child(2){transform:rotate(1.6deg) translateY(2.2rem)}
.ressenya:nth-child(3){transform:rotate(-.8deg) translateY(.6rem)}
.ressenya .cita{font-size:1.18rem;line-height:1.42}
.ressenya .autor{color:var(--grafit);margin-top:0}

/* ── 10 · INSTAGRAM. La capçalera de «Què en diuen» (el títol a l'esquerra i una pastilla a la dreta), aquí amb la
   d'Instagram i la de Facebook; a sota, la graella del perfil en 4:5. Els logos van en el seu color, mai en
   currentColor (validate-demo, pas 4 ter). El peu de cada foto surt en passar-hi per sobre i al visor. ── */
.ig-a .cap-fila{display:flex;align-items:end;justify-content:space-between;gap:1.6rem 2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vh,3.2rem)}
.ig-a .cap-seccio{margin-bottom:0;flex:1 1 30rem;max-width:46rem}
.xarxes-a{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;padding-bottom:.3rem}
.pastilla-ig{display:inline-flex;align-items:center;gap:.85rem;min-height:64px;padding:.55rem 1.35rem .55rem .6rem;border-radius:999px;background:var(--crema);color:var(--tinta);transition:transform .2s ease,box-shadow .2s ease}
.pastilla-ig svg{width:46px;height:46px;flex:none}
.pastilla-ig b{display:block;font-weight:400;font-size:1.3rem;line-height:1.1;letter-spacing:-.01em}
.pastilla-ig small{display:block;margin-top:.15rem;color:var(--grafit)}
.pastilla-ig .fl{font-family:var(--mono);font-size:1rem;margin-left:auto;padding-left:.15rem;transition:transform .2s ease}
.pastilla-ig:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(0,0,0,.9)}
.pastilla-ig:hover .fl{transform:translate(2px,-2px)}
.pastilla-fb{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.15rem 0 .55rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.35);font-family:var(--mono);font-stretch:87.5%;font-weight:500;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;transition:background .2s ease}
.pastilla-fb svg{width:34px;height:34px;flex:none}
.pastilla-fb:hover{background:rgba(244,242,236,.08)}
.fotos-ig{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}
.miniatura{position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:var(--rb);background:var(--pilar-2);cursor:zoom-in}
.miniatura img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.miniatura__peu{position:absolute;left:0;right:0;bottom:0;padding:2.4rem .8rem .75rem;background:linear-gradient(0deg,rgba(21,20,23,.9),rgba(21,20,23,0));font-size:1rem;line-height:1.25;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.miniatura:hover img,.miniatura:focus-visible img{transform:scale(1.045)}
.miniatura:hover .miniatura__peu,.miniatura:focus-visible .miniatura__peu{opacity:1;transform:none}
.miniatura:focus-visible{outline:2px solid var(--crema);outline-offset:3px}
/* A /revisar/<token>, els peus sempre a la vista: si no, el client no els veu per tocar-los */
body[data-rv-fase] .miniatura__peu{opacity:1;transform:none}
.ig-a__peu{display:flex;justify-content:center;margin-top:clamp(1.6rem,4vh,2.4rem)}
.ig-a__peu .btn{color:var(--crema)}
.ig-a__peu .btn svg{width:22px;height:22px;flex:none}

/* El visor (la peça de la casa, de food-bros): a pantalla completa, sobre el negre dels pilars; la foto sencera, amb el seu peu */
.visor{
  width:100%;height:100%;max-width:none;max-height:none;margin:0;inset:0;
  padding:clamp(60px,9svh,84px) clamp(64px,8vw,120px) clamp(22px,4svh,40px);
  border:0;background:var(--pilar);color:var(--crema);overflow:hidden;
}
.visor::backdrop{background:rgba(0,0,0,.5)}
.visor[open]{display:grid;place-items:center}
.visor__fig{display:grid;justify-items:center;gap:.9rem;min-height:0}
.visor__img{width:auto;height:auto;max-width:min(100%,1120px);max-height:calc(100svh - 190px);object-fit:contain;border-radius:var(--rb);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.visor__peu{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.3rem 1rem;text-align:center;font-style:italic;font-weight:300;font-size:clamp(1.02rem,.3vw + .95rem,1.2rem)}
.visor__peu .mono{font-style:normal;color:var(--crema-2)}
.visor__tanca{position:absolute;top:clamp(8px,2svh,18px);right:var(--marge);min-height:44px;min-width:44px;padding:0 1rem;border-radius:var(--rb);box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.35);font-family:var(--mono);font-stretch:87.5%;font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;transition:background .2s ease}
.visor__tanca:hover{background:rgba(244,242,236,.1)}
.visor__fl{position:absolute;top:50%;translate:0 -50%;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(34,33,37,.6);box-shadow:inset 0 0 0 1.5px rgba(244,242,236,.35);font-family:var(--mono);font-size:1.1rem;transition:background .25s ease,color .25s ease}
.visor__fl:hover{background:var(--crema);color:var(--tinta)}
.visor__fl--ant{left:clamp(8px,2vw,32px)}
.visor__fl--seg{right:clamp(8px,2vw,32px)}
.visor :focus-visible{outline-color:var(--crema)}
@media (prefers-reduced-motion:no-preference){
  .visor[open]{animation:visor-entra .25s ease}
  @keyframes visor-entra{from{opacity:0}}
}

/* ── 8 · PROVA. Urban Climb («First time here?»): la porta oberta en una targeta gran amb la
   pregunta a sobre; a sota, el que has de saber i el formulari. ── */
.porta{position:relative;height:clamp(380px,72vh,680px);border-radius:var(--r);overflow:hidden;isolation:isolate;color:var(--crema);display:grid;place-items:center;text-align:center;padding:2rem}
.porta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:-2}
.porta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 50% 50%,rgba(21,20,23,.68),rgba(21,20,23,.56))}
.porta .etiq{justify-content:center;color:var(--crema)}
.porta h2{font-size:clamp(3rem,min(9vw,14vh),8.4rem);line-height:.95;letter-spacing:-.035em;margin:.6rem 0 1.4rem;font-variation-settings:"opsz" 72}
.porta h2 em{display:block;font-size:.42em;letter-spacing:-.01em;opacity:.92;margin-top:.5rem}
.porta .btn--buit{color:var(--crema)}
.prova-a__baix{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.6rem,7vh,4.5rem);align-items:start}
.saber{list-style:none;counter-reset:pas;display:grid;gap:0;border-top:1px solid rgba(21,20,23,.14)}
.saber li{counter-increment:pas;position:relative;padding:1.1rem 0 1.1rem 2.6rem;border-bottom:1px solid rgba(21,20,23,.14);font-size:1.12rem;line-height:1.45}
.saber li::before{content:counter(pas);position:absolute;left:0;top:1.15rem;font-family:var(--mono);font-weight:300;font-stretch:112.5%;font-size:1.3rem;color:var(--accio);line-height:1.1}
.prova-a__quotes{margin-top:1.4rem;font-size:1rem;line-height:1.45;color:var(--grafit);max-width:40ch}
.formulari-a{background:var(--paret);border-radius:var(--r);padding:clamp(1.3rem,3vw,2.2rem)}
.formulari-a h3{font-size:1.6rem;line-height:1.1;margin-bottom:1.2rem}

/* ── 9 · ON SOM. Des Climbing (onepagelove): el mapa com a banda clara amb l'adreça gran al
   centre, i a sota el bloc de dades. ── */
.onsom-a{padding:0;background:var(--paret)}
.onsom-a .cap-seccio{box-sizing:content-box;padding:clamp(4.2rem,11vh,7.5rem) var(--marge) 0;margin:0 auto clamp(1.6rem,4vh,2.4rem);max-width:var(--ample)}
.mapa-a{position:relative;height:clamp(340px,56vh,560px);overflow:hidden;isolation:isolate;display:grid;place-items:center}
.mapa-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.mapa-a__adreca{transform:translateY(-4.4rem);text-align:center;font-size:clamp(1.8rem,3.6vw,3.3rem);line-height:1.08;letter-spacing:-.02em;padding:.5rem 1.1rem;border-radius:var(--r);background:rgba(242,241,238,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mapa-a__adreca em{color:var(--accio);font-style:normal;font-weight:400}
.mapa-a__credit{position:absolute;right:var(--marge);bottom:.7rem;color:var(--grafit)}
.dades-a{background:var(--pilar);color:var(--crema);padding:clamp(2.6rem,7vh,4rem) var(--marge)}
.dades-a__graella{max-width:var(--ample);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.dades-a h3{font-family:var(--mono);font-stretch:87.5%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--crema-2);margin-bottom:.7rem}
.dades-a p{line-height:1.5}
.dades-a p a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
.dades-a .h{font-family:var(--mono);font-weight:300;font-stretch:112.5%;letter-spacing:-.02em}
.dades-a a.btn{margin-top:.9rem}
.dades-a .xip{margin-top:.8rem;background:rgba(244,242,236,.08)}
.xarxes-llista{list-style:none;display:grid;gap:.15rem}
.xarxes-llista a{display:inline-flex;align-items:center;gap:.75rem;min-height:44px}
.xarxes-llista svg{width:30px;height:30px;flex:none;transition:transform .2s ease}
.xarxes-llista a:hover svg{transform:scale(1.06)}
.xarxes-llista a:hover span,.xarxes-llista a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ═══ Esmenes d'escriptori i de mòbil: al final del fitxer, perquè guanyin (trampa 2 de create-web) ═══ */
@media (max-width:1100px){
  /* A la tauleta les capçaleres no hi caben senceres. Al hero, l'adreça es partia en cinc línies i, a 768, empenyia «Prova una classe»
     fora de la pantalla (ja surt a «On som» i al peu). A la barra fixa, amb «Tancat · obrim demà a les 10:00» el botó també en sortia (l'estat ja és al hero) */
  .hero .cap > p.mono,.barra .xip{display:none}
  .cls-a .graella{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qs-a .graella{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dades-a__graella{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fotos-ig{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fitxes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hor-a .dins-ample,.equip-a__mario,.entr-a__graella,.prova-a__baix{grid-template-columns:1fr}
  .fitxes{gap:1rem}
  .hor-a__cap{position:static}
  .solts{grid-template-columns:1fr;gap:1.2rem}
  .ressenya:nth-child(n){transform:rotate(-.8deg)}
  .ressenya:nth-child(2){transform:rotate(.9deg)}
}
@media (max-width:760px){
  .hero{--targeta:auto;min-height:0;grid-template-rows:auto minmax(0,1fr);padding:64px 1rem calc(1rem + env(safe-area-inset-bottom))}
  .hero .cap{justify-content:flex-end}
  .hero .cap > p.mono{display:none}
  .paret .logo{height:auto;width:92vw;aspect-ratio:768/308}
  .hero .nom{font-size:.56rem;letter-spacing:.14em}
  .targeta{height:auto;min-height:0}
  .targeta .vel{background:linear-gradient(180deg,rgba(21,20,23,.3) 0%,rgba(21,20,23,.12) 26%,rgba(21,20,23,.72) 50%,rgba(21,20,23,.9) 68%,rgba(21,20,23,.95) 100%)}
  .targeta .dins{grid-template-columns:1fr;align-content:end;gap:.9rem;padding:1.1rem}
  .hero h1{font-size:clamp(2rem,9.4vw,2.9rem)}
  .hero .dreta{justify-items:stretch;text-align:left}
  .hero .accions{justify-content:stretch}
  .hero .accions .btn{flex:1 1 auto}
  .dies{grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem}
  .dia-tab{font-size:.58rem;min-height:44px}
  .bloc{grid-template-columns:1fr;gap:.3rem}
  .bloc__det{grid-column:1}
  .bloc__hora{font-size:clamp(2.6rem,14vw,3.6rem)}
  .cls-a .graella{grid-template-columns:1fr 1fr;gap:.5rem}
  .tessella{aspect-ratio:3/4;padding:.85rem}
  .tessella h3{font-size:1.2rem}
  .tessella__peu p{font-size:.86rem}
  .tessella--ample{grid-column:1 / -1;aspect-ratio:16/10}
  .tessella--text{grid-column:1 / -1;aspect-ratio:auto}
  .qs-a .graella{grid-template-columns:1fr 1fr;gap:.7rem}
  .persona__foto p{font-size:1.1rem;left:.75rem;right:.75rem;bottom:.75rem}
  .persona h3{font-size:1.1rem}
  .persona .frase{font-size:.92rem}
  .js .video-a{height:160svh}
  .video-a__escena{clip-path:inset(calc((1 - var(--p)) * 7svh) calc((1 - var(--p)) * 6vw) round calc((1 - var(--p)) * 14px))}
  .video-a__video{object-fit:cover}
  .video-a__fons{display:none}
  .video-a__portada{justify-content:flex-end;padding:0 1rem calc(6rem + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(21,20,23,.15) 0%,rgba(21,20,23,.05) 40%,rgba(21,20,23,.75) 78%,rgba(21,20,23,.9) 100%)}
  .video-a__portada::before{display:none}
  .video-a__crida{font-size:1.3rem}
  .xifres{padding:2rem 1rem}
  .xifres__llista{grid-template-columns:1fr;gap:1rem}
  .xifres a{grid-template-columns:5.8rem minmax(0,1fr);align-items:center;gap:1rem;padding-top:.9rem}
  .xifra{font-size:3rem}
  .xifres__text{font-size:1rem}
  .fitxes{grid-template-columns:1fr;gap:1.1rem;margin-top:2.6rem}
  .fitxa{grid-template-columns:38% minmax(0,1fr);align-items:center;gap:.9rem;padding:.6rem}
  .fitxa:nth-child(n){transform:rotate(-.6deg)}
  .fitxa:nth-child(2){transform:rotate(.7deg)}
  .fitxa__text{padding:0 .2rem}
  .fitxa h3{font-size:1.4rem}
  .fitxa__punts li{font-size:.93rem}
  .servei__llistes{grid-template-columns:1fr;gap:1.1rem}
  .cicle{grid-template-columns:1fr}
  .cls-a .tessella--text ul{grid-template-columns:1fr}
  .planol{grid-template-columns:1fr;min-height:0}
  .planol a{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:.9rem;min-height:60px;padding:.8rem 1rem;font-size:1.25rem}
  .planol__sala a{border-radius:var(--rb)}
  .planol__despatx,.planol__dojo{margin:1.4rem 0 0}
  .planol__despatx::before,.planol__dojo::before{right:auto;left:1.6rem;top:auto;bottom:100%;width:0;height:1.4rem;border-top:0;border-left:1.5px dashed rgba(244,242,236,.38)}
  .espai__fila-cap{display:grid;gap:1rem}
  .espai__cap{grid-template-columns:1fr}
  .espai__cap p:not(.espai__n){grid-column:1}
  .espais-a__dos{grid-template-columns:1fr}
  .fletxes{display:none}
  .fila{grid-auto-columns:82vw;margin-inline:-1rem;padding-inline:1rem;scroll-padding-inline:1rem}
  .porta{height:clamp(360px,64vh,560px)}
  .porta h2{font-size:clamp(2.6rem,13vw,3.8rem)}
  .mapa-a__adreca{font-size:1.5rem;transform:translateY(-3.6rem)}
  .dades-a__graella{grid-template-columns:1fr;gap:1.6rem}
  .hero__contacte{justify-content:space-between}
  .xarxes-a{width:100%}
  .pastilla-ig{flex:1 1 100%}
  .fotos-ig{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .miniatura{border-radius:4px}
  /* a la revisió, el peu sencer dins de miniatures de 114 px */
  body[data-rv-fase] .miniatura__peu{padding:1.2rem .45rem .45rem;font-size:.78rem;line-height:1.2}
  .ig-a__peu .btn{width:100%}
  .visor{padding:64px 12px 24px}
  .visor__img{max-height:calc(100svh - 200px)}
  .visor__fl{top:auto;bottom:18px;translate:none}
  .visor__fl--ant{left:12px}
  .visor__fl--seg{right:12px}
  .visor__peu{padding:0 56px}
}
@media (max-height:640px) and (min-width:761px){
  .hero .que{display:none}
  .hero .wa-linia{display:none}
}

/* ── La pàgina legal (avis-legal.html, 27-10-2026): la mateixa lletra i colors que la web, una columna de lectura ── */
.legal-cap{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:46rem;margin:0 auto;padding:1.2rem var(--marge) 0}
.legal-cap .marca svg{display:block;height:34px;width:auto;color:var(--vermell)}
.legal{max-width:46rem;margin:0 auto;padding:clamp(2rem,6vh,3.4rem) var(--marge) 4rem;color:var(--tinta)}
.legal h1{font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;letter-spacing:-.025em}
.legal h1 em{opacity:.75}
.legal__data{margin-top:.9rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grafit)}
.legal h2{margin-top:2.6rem;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em}
.legal h3{margin-top:1.6rem;font-size:1.1rem;font-weight:600}
.legal p{margin-top:.75rem;line-height:1.6}
.legal a:not(.btn){text-decoration:underline;text-underline-offset:.18em}
.legal__dades{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.45rem 1.2rem;margin-top:1rem}
.legal__dades dt{font-family:var(--mono);font-stretch:87.5%;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grafit);padding-top:.2em}
.legal__tornar{margin-top:2.6rem}
@media (max-width:560px){.legal__dades{grid-template-columns:1fr;gap:.1rem}.legal__dades dd{margin-bottom:.6rem}}