/* Stira — tipografia elàstica: os, pissarra, corall, mostassa i lila */
:root{
  --bone:#f1ede4;
  --slate:#4a5d7a;
  --coral:#ff5a4e;
  --mustard:#f2c230;
  --lilac:#d8a8f0;
  --teal:#1aa3b8;
  --ink:#1d1f24;
  --mute:#6c6e74;
  --f-cond:'League Gothic',Impact,sans-serif;
  --f-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --pad:clamp(18px,4vw,64px);
  --ease:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bone);color:var(--ink);font-family:var(--f-sans);font-size:clamp(15.5px,1.03vw,17.5px);line-height:1.6;overflow-x:hidden}
main{overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%}
.kicker{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--slate)}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.95em 1.6em;background:var(--ink);color:var(--bone);text-decoration:none;font-weight:800;border-radius:6px;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-3px) scaleY(1.06);background:var(--coral)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{color:#fff}
.stretch-h{font-family:var(--f-cond);font-weight:400;font-size:clamp(3rem,8vw,7rem);line-height:.85;letter-spacing:.01em;text-transform:uppercase;display:inline-block;transform-origin:bottom left}
.stretch-h .ch{display:inline-block;transform-origin:bottom;transition:transform .5s var(--ease)}
.stretch-h .ch:hover{transform:scaleY(1.35)}

.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:1rem var(--pad);background:rgba(241,237,228,.85);backdrop-filter:blur(8px)}
.nav__logo{font-family:var(--f-cond);font-size:2rem;line-height:1;text-decoration:none;text-transform:uppercase}
.nav__logo span{font-family:var(--f-sans);font-size:.7rem;letter-spacing:.2em;margin-left:.6rem;color:var(--slate)}
.nav__cta{padding:.5em 1.1em;background:var(--coral);color:#fff;text-decoration:none;font-weight:800;border-radius:6px}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 3rem;overflow:hidden}
.stretch{font-family:var(--f-cond);font-weight:400;font-size:clamp(9rem,34vw,30rem);line-height:.78;letter-spacing:.01em;display:flex;cursor:ns-resize;user-select:none;touch-action:none;margin-left:-.04em}
.stretch .ch{display:inline-block;transform-origin:50% 100%;will-change:transform}
.stretch .ch:nth-child(1){color:var(--coral)}.stretch .ch:nth-child(2){color:var(--slate)}.stretch .ch:nth-child(3){color:var(--mustard)}.stretch .ch:nth-child(4){color:var(--teal)}.stretch .ch:nth-child(5){color:var(--lilac)}
.hero__tag{font-weight:800;letter-spacing:.3em;text-transform:uppercase;margin-top:1rem}
.hero__lead{max-width:36rem;color:var(--mute);font-size:1.1rem;margin-top:.6rem}
.hero__row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.6rem}
.badge{padding:.5rem .9rem;border-radius:6px;background:var(--mustard);font-weight:800;font-size:.85rem}
.hero__hint{margin-top:1.4rem;font-size:.85rem;color:var(--slate);font-weight:600}

/* ---------- mapa ---------- */
.body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(80px,12vw,150px) var(--pad);background:var(--slate);color:var(--bone)}
.body .kicker{color:var(--mustard)}
.body__map{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}
#bodySvg{width:min(100%,340px);height:auto}
.silhouette circle,.silhouette path{fill:#e9e2d4}
.zone path{fill:rgba(255,90,78,0);stroke:rgba(241,237,228,.0);stroke-width:2;cursor:pointer;transition:fill .3s}
.zone:hover path,.zone:focus path{fill:rgba(255,90,78,.45);outline:none}
.zone.is-on path{fill:rgba(255,90,78,.8)}
.zone:focus{outline:none}
.whole{padding:.6em 1.2em;border-radius:6px;border:2px solid var(--bone);background:transparent;color:var(--bone);font:800 .9rem var(--f-sans);cursor:pointer}
.whole.is-on,.whole:hover{background:var(--coral);border-color:var(--coral)}
.body__card{padding:clamp(22px,3vw,40px);background:var(--bone);color:var(--ink);border-radius:10px;box-shadow:12px 12px 0 var(--coral)}
.body__card .kicker{color:var(--coral)}
.body__card .stretch-h{font-size:clamp(2.6rem,6vw,5rem);margin:.4rem 0 .8rem}
.body__card>p{color:var(--mute)}
.prices{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem}
.prices td{padding:.6rem 0;border-bottom:2px dashed #d7d1c4;font-weight:600}
.prices td:last-child{text-align:right;font-family:var(--f-cond);font-size:1.6rem;font-weight:400;color:var(--coral)}

/* ---------- exercicis ---------- */
.ex{padding:clamp(80px,12vw,150px) var(--pad)}
.head{margin-bottom:2rem}
.ex__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.ex__grid img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;transition:transform .5s var(--ease)}
.ex__grid img:hover{transform:scaleY(1.06) translateY(-6px)}

.methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:0 var(--pad) clamp(80px,12vw,140px)}
.m{padding:2rem 1.6rem;border-radius:10px;transform-origin:bottom;transition:transform .5s var(--ease)}
.m:hover{transform:scaleY(1.05)}
.m h3{font-family:var(--f-cond);font-weight:400;font-size:3rem;line-height:.9;text-transform:uppercase}
.m p{margin-top:.6rem;font-weight:600}
.m--coral{background:var(--coral);color:#fff}.m--mustard{background:var(--mustard)}.m--lilac{background:var(--lilac)}

.train{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);padding:0 var(--pad) clamp(80px,12vw,140px);align-items:start}
.train ul{list-style:none}
.train li{padding:.8rem 0;border-top:2px solid var(--ink);font-weight:600}
.rev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:clamp(60px,8vw,110px) var(--pad);background:var(--ink);color:var(--bone)}
.rev blockquote{padding:1.4rem;border-left:6px solid var(--mustard);background:rgba(241,237,228,.06)}
.rev blockquote:nth-child(2){border-color:var(--lilac)}.rev blockquote:nth-child(3){border-color:var(--teal)}
cite{display:block;margin-top:.8rem;font-style:normal;font-weight:800;color:var(--mustard)}
.rev__rate{grid-column:1/-1;font-family:var(--f-cond);font-size:2.4rem;text-transform:uppercase}
.contact{padding:clamp(80px,12vw,140px) var(--pad);text-align:center}
.contact__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:900px;margin:2rem auto}
.contact__grid>div{padding:1.2rem;border-radius:10px;background:#fff}
.lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--coral)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.foot{padding:1.6rem;text-align:center;color:var(--mute);font-size:.85rem}

@media (max-width:860px){
  .body,.train{grid-template-columns:minmax(0,1fr)}
  .ex__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .methods,.rev,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .nav__logo span{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.w{display:inline-block;white-space:nowrap}