/* Biketionary — web pública v3
 * Identitat de la v1 (llibre d'estil v1) + el producte real.
 * Sense dependències: HTML, CSS i JS. */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-latin.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:100 900;font-display:swap;src:url('fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0303,U+0305-0307,U+0309-0328,U+032A-036F,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}

:root{
  --bg:#07111D; --bg-2:#0B1726; --bg-3:#0D1B2A; --card:#101C2B; --card-2:#1C2433;
  --fg:#DCE4EE; --fg-strong:#F4F7FA; --muted:#A9B8C9; --dim:#7488A0; --line:#ffffff1f; --line-2:#ffffff30;
  --teal:#00E6C4; --blue:#15B8FF; --violet:#8A5CFF; --violet-l:#B798FF; --warn:#FFB547; --danger:#FF5C7A;
  --grad:linear-gradient(120deg,#00E6C4 0%,#15B8FF 100%);
  --pad:clamp(16px,5.5vw,88px); --max:1480px; --r:20px; --r-s:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,figure{margin:0}
h2,h3{text-wrap:balance}p{text-wrap:pretty}ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg{display:block}
::selection{background:var(--teal);color:var(--bg)}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.ico{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.teal{color:var(--teal)} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dimmed{color:var(--dim)}

/* ── Tipografia de secció ─────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.eyebrow::before{content:'';width:28px;height:2px;background:currentColor}
.section-label{display:flex;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.section-label b{color:var(--teal);font-weight:600}
.h2{font-size:clamp(2.6rem,6.2vw,6.4rem);font-weight:600;letter-spacing:-.06em;line-height:1.01;color:var(--fg-strong)}
.h2 .soft{color:#7690A8}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;letter-spacing:-.01em;color:var(--fg)}
.body{color:var(--muted);line-height:1.7}
.section{padding:clamp(80px,11vw,150px) 0;position:relative}

/* ── Botons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:600;border-radius:16px;padding:15px 20px;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn .ico{font-size:18px;transition:transform .25s var(--ease)}
.btn:hover .ico{transform:translate(2px,-2px)}
.btn-primary{background:var(--teal);color:var(--bg)}
.btn-primary:hover{background:#fff;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.text-link{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:1px solid currentColor;transition:color .2s}
.text-link:hover{color:var(--teal)}

/* ── Barra de progrés, skip, navegació ───────────────── */
.progress{position:fixed;z-index:200;inset:0 0 auto;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left}
.skip{position:fixed;z-index:300;top:-80px;left:16px;padding:12px 16px;background:var(--teal);color:var(--bg);border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.nav{position:fixed;z-index:100;inset:0 0 auto;height:84px;display:flex;align-items:center;transition:background .35s,height .35s,border-color .35s;border-bottom:1px solid transparent;background:linear-gradient(#07111Dcc,#07111D00)}
.nav.solid{background:#07111Dea;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);height:70px;border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none;padding:0 clamp(16px,3.5vw,56px)}
.logo{display:inline-flex;align-items:center;gap:12px}
.logo img{width:46px;height:37px;object-fit:contain}
.logo span{display:flex;flex-direction:column;font-size:22px;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.logo small{font-size:10px;letter-spacing:.06em;color:var(--teal);font-weight:600;margin-top:3px}
.nav-links{display:flex;gap:30px;font-size:14px}
.nav-links a{position:relative;padding:10px 0;color:var(--fg)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:4px;height:1px;width:0;background:var(--teal);transition:width .3s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-cta{padding:12px 16px;font-size:14px}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;place-items:center}
.menu-btn .ico{font-size:20px}

/* ── Hero ────────────────────────────────────────────── */
.hero{position:relative;min-height:max(760px,100svh);isolation:isolate;overflow:hidden;display:flex;flex-direction:column}
.hero-photo{position:absolute;inset:-6% 0 0;z-index:-3;transform:translate3d(0,var(--hy,0),0) scale(1.04)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#07111Df0 0%,#07111D99 38%,#07111D22 75%),linear-gradient(0deg,#07111D 2%,transparent 35%,#07111D66 100%)}
.hero-route{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-route .trail{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 6px #00E6C4aa);stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 3.2s .6s var(--ease) forwards}
.hero-route .trail-glow{fill:none;stroke:#00E6C433;stroke-width:12;stroke-linecap:round;stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 3.2s .6s var(--ease) forwards}
.hero-route .rider{fill:#fff;filter:drop-shadow(0 0 8px var(--teal))}
.hero-route .pin{fill:var(--bg);stroke:var(--teal);stroke-width:2;opacity:0;animation:fade .5s forwards}
.hero-inner{flex:1;display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:40px;padding-top:clamp(140px,20vh,220px);padding-bottom:120px}
.hero-eyebrow{color:var(--fg);margin-bottom:30px}
.hero-eyebrow::before{background:var(--teal)}
.hero h1{font-size:clamp(4.2rem,10.4vw,11.5rem);font-weight:700;letter-spacing:-.06em;line-height:.9;color:var(--fg-strong)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .line>span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero-sub{display:flex;align-items:center;gap:clamp(24px,5vw,80px);margin-top:38px;flex-wrap:wrap}
.hero-sub p{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.45;letter-spacing:-.015em;max-width:480px}
.hero-sub p b{color:var(--teal);font-weight:600}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-foot{position:absolute;left:0;right:0;bottom:28px}
.hero-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--muted)}
.scroll-cue{display:flex;align-items:center;gap:10px}
.scroll-cue i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite}

/* Targeta de salut flotant */
.health{justify-self:end;width:min(360px,100%);border:1px solid #ffffff2a;border-radius:24px;padding:20px;background:linear-gradient(160deg,#0D1B2Acc,#07111Dcc);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px #0008;opacity:0;transform:translateY(30px);animation:enter 1s 1.1s var(--ease) forwards}
.health-top{display:flex;align-items:center;gap:16px}
.ring{--v:0;width:76px;height:76px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:conic-gradient(var(--teal) calc(var(--v)*1%),#ffffff14 0);position:relative}
.ring::before{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--bg-3)}
.ring b{position:relative;font-size:20px;font-weight:700;letter-spacing:-.04em}
.ring b small{font-size:11px;color:var(--muted);font-weight:500}
.health-top .ht{color:var(--fg);margin-top:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.health-top p{font-size:12px;color:var(--muted);margin-top:3px}
.health ul{margin-top:16px;display:grid;gap:10px}
.health li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:13px;align-items:center}
.health li .bar{grid-column:1/-1;height:5px;border-radius:9px;background:#ffffff12;overflow:hidden}
.health li .bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c,var(--teal));transform-origin:left;transform:scaleX(0);animation:grow 1.4s 1.6s var(--ease) forwards}
.health li em{font-style:normal;font-size:12px;color:var(--muted)}
.health li em.bad{color:var(--danger)} .health li em.warn{color:var(--warn)}
.health-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px;border-radius:14px;background:#00E6C414;color:var(--fg);font-size:13px;line-height:1.45}
.health-note .ico{color:var(--teal);font-size:18px;margin-top:1px}
.tag-illus{display:block;margin-top:12px;font-size:11px;color:var(--dim);text-align:right}

/* ── Cinta ───────────────────────────────────────────── */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);padding:22px 0}
.ticker-track{display:flex;gap:48px;width:max-content;animation:ticker 38s linear infinite}
.ticker span{display:flex;align-items:center;gap:48px;font-size:clamp(1.8rem,3.4vw,3.2rem);font-weight:700;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px #DCE4EE55;white-space:nowrap}
.ticker span::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--teal)}
.ticker span:nth-child(3n+1){color:var(--fg-strong);-webkit-text-stroke:0}

/* ── Visió: les eines que convergeixen ───────────────── */
.vision{background:var(--bg-3);overflow-x:clip}
.vision-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:6%;padding-top:70px;align-items:center}
.vision-copy .lead{margin-top:36px;max-width:520px}
.vision-copy .body{margin-top:22px;max-width:480px}
.vision-copy .text-link{margin-top:34px}
.converge{--p:0;position:relative;aspect-ratio:1;max-width:560px;width:100%;justify-self:center}
.converge::before,.converge::after{content:'';position:absolute;inset:8%;border-radius:50%;border:1px dashed #15B8FF30;transform:scale(calc(1 - var(--p)*.35));transition:transform .2s linear}
.converge::after{inset:24%;border-style:solid;border-color:#00E6C425}
.converge .core{position:absolute;z-index:2;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.55 + var(--p)*.45));border-radius:32%;background:radial-gradient(circle at 50% 40%,#0F2A3A,#07111D);border:1px solid #00E6C455;display:grid;place-items:center;box-shadow:0 0 calc(var(--p)*120px) #00E6C440}
.converge .core img{width:72%;opacity:calc(.35 + var(--p)*.65)}
.chip{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);font-size:14px;font-weight:500;white-space:nowrap;
  transform:translate(-50%,-50%) translate(calc(var(--x)*var(--k,1)*(1 - var(--p))),calc(var(--y)*var(--k,1)*(1 - var(--p)))) scale(calc(1 - var(--p)*.6));opacity:calc(1.3 - var(--p)*1.3)}
.chip .ico{color:var(--teal);font-size:17px}
.converge-caption{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:12px;letter-spacing:.12em;color:var(--muted);opacity:var(--p)}

/* ── Dos atletes (simulador) ─────────────────────────── */
.duo{background:var(--bg)}
.duo-head{display:grid;grid-template-columns:1.2fr .8fr;gap:6%;align-items:end;margin:60px 0 50px}
.duo-head .body{max-width:440px}
.rides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ride{position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--card);transition:border-color .25s,background .25s,transform .25s var(--ease)}
.ride:hover{transform:translateY(-3px);border-color:#ffffff45}
.ride[aria-pressed="true"]{border-color:var(--teal);background:linear-gradient(160deg,#00E6C418,#101C2B 60%)}
.ride .kind{font-size:11px;letter-spacing:.12em;color:var(--teal);font-weight:600}
.ride h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:8px 0 14px}
.ride dl{display:flex;gap:18px;margin:0;font-size:13px;color:var(--muted)}
.ride dd{margin:0;color:var(--fg);font-weight:600;font-size:15px}
.ride svg.mini{width:100%;height:36px;margin-top:14px}
.ride svg.mini path{fill:none;stroke:#15B8FF;stroke-width:1.6}
.duo-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:22px 0 26px;flex-wrap:wrap}
.toggle{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
.toggle input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:99px;background:#ffffff1c;position:relative;cursor:pointer;transition:background .25s;margin:0}
.toggle input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.toggle input:checked{background:var(--blue)}
.toggle input:checked::after{transform:translateX(20px)}
.toggle .ico{font-size:18px}
.duo-actions{display:flex;gap:12px;flex-wrap:wrap}
.duo-board{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px}
.panel{border:1px solid var(--line);border-radius:24px;background:var(--card);padding:clamp(20px,2.5vw,32px);position:relative;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.panel-head h3{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.12em;font-weight:600;color:var(--muted)}
.panel-head h3 .ico{font-size:20px;color:var(--teal)}
.panel-head span{font-size:12px;color:var(--dim)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
.stat small{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em}
.stat b{display:block;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;letter-spacing:-.05em;color:var(--fg-strong);margin-top:4px;font-variant-numeric:tabular-nums}
.stat b sub{font-size:.45em;color:var(--muted);vertical-align:baseline;margin-left:4px;letter-spacing:0;font-weight:500}
.rider-season{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.6}
.rider-season b{color:var(--fg)}
.parts{display:grid;gap:18px}
.part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center}
.part-name{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.coin{font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 8px;border-radius:99px;background:#15B8FF1c;color:#7FD6FF;white-space:nowrap}
.coin.wet{background:#8A5CFF26;color:var(--violet-l)}
.part-val{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.part-val b{color:var(--fg);font-weight:600}
.track{grid-column:1/-1;position:relative;height:10px;border-radius:99px;background:#ffffff10;overflow:hidden}
.track .used{position:absolute;inset:0 auto 0 0;width:var(--u);background:linear-gradient(90deg,#00E6C4,#15B8FF);border-radius:inherit;transition:width 1s var(--ease),background .4s}
.track .add{position:absolute;top:0;bottom:0;left:var(--u);width:var(--a);background:repeating-linear-gradient(-45deg,#FFB547,#FFB547 4px,#FFB547aa 4px,#FFB547aa 8px);border-radius:0 99px 99px 0;transition:left 1s var(--ease),width 1s var(--ease)}
.part.warn .used{background:linear-gradient(90deg,#00E6C4,#FFB547)}
.part.bad .used{background:linear-gradient(90deg,#FFB547,#FF5C7A)}
.part.bad .part-name::after{content:'Canvia-la';font-size:11px;font-weight:600;color:var(--danger);border:1px solid #FF5C7A66;padding:2px 8px;border-radius:99px}
.part.bad.fem .part-name::after{content:'Canvia-les'}
.part.bad.svc .part-name::after{content:'Revisió'}
.verdict{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:16px 18px;border-radius:16px;background:#ffffff08;border:1px solid var(--line);font-size:15px;line-height:1.5;min-height:76px}
.verdict .ico{font-size:22px;color:var(--teal);margin-top:1px}
.verdict.bad{background:#FF5C7A12;border-color:#FF5C7A44}.verdict.bad .ico{color:var(--danger)}
.verdict.warn{background:#FFB54712;border-color:#FFB54744}.verdict.warn .ico{color:var(--warn)}
.footnote{margin-top:18px;font-size:12px;color:var(--dim)}

/* ── Univers: el telèfon que canvia ──────────────────── */
.journey{height:950vh;position:relative;background:var(--bg-2)}
.journey-sticky{position:sticky;top:0;height:100svh;min-height:640px;display:flex;flex-direction:column;justify-content:center;padding:80px 0 26px;overflow:hidden}
.journey-sticky .wrap{display:flex;flex-direction:column;height:100%;justify-content:center}
.journey-main{display:grid;grid-template-columns:1fr auto;grid-template-rows:minmax(0,1fr);gap:5%;align-items:center;flex:1;min-height:0}
.j-copy{position:relative;min-height:560px}
.j-ch{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease);pointer-events:none}
.j-ch.on{opacity:1;transform:none;pointer-events:auto}
.j-ch .j-word{margin:0;max-width:none;white-space:nowrap;font-size:clamp(3rem,6.4vw,6.8rem);font-weight:700;letter-spacing:-.065em;line-height:.9;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.j-ch[data-c="community"] .j-word{color:transparent;background:linear-gradient(120deg,#B798FF,#15B8FF);-webkit-background-clip:text;background-clip:text}
.j-num{font-size:13px;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:12px}
.j-ch h3{font-size:clamp(1.5rem,2.6vw,2.5rem);letter-spacing:-.04em;line-height:1.1;font-weight:600;margin-top:22px;color:var(--fg-strong);max-width:560px}
.j-ch p{color:var(--muted);margin-top:14px;max-width:520px;line-height:1.65}
.j-ch .j-num{margin:0 0 12px}
.j-ch ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:560px}
.j-ch li{font-size:13px;padding:7px 12px;border-radius:99px;border:1px solid var(--line-2);color:var(--fg)}
.j-stage{position:relative;display:grid;place-items:center;padding:0 40px;align-self:stretch;min-height:0}
.j-stage .orbit{position:absolute;border-radius:50%;border:1px solid #15B8FF26;left:50%;top:50%;transform:translate(-50%,-50%)}
.j-stage .o1{width:440px;height:440px}.j-stage .o2{width:620px;height:620px;border-style:dashed;border-color:#00E6C41c}
.phone-box{position:relative;width:calc(300px*var(--ps,1));height:calc(640px*var(--ps,1))}
.phone{position:absolute;left:0;top:0;width:300px;height:640px;transform:scale(var(--ps,1));transform-origin:0 0;border-radius:46px;padding:10px;background:linear-gradient(160deg,#2A3546,#0A0F17 40%);box-shadow:0 50px 100px #000a,inset 0 0 0 1px #ffffff20}
.phone-screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:#08121E}
.phone-screen::before{content:'';position:absolute;z-index:5;top:9px;left:50%;transform:translateX(-50%);width:86px;height:24px;border-radius:20px;background:#000}
.statusbar{position:absolute;z-index:4;top:0;left:0;right:0;height:42px;display:flex;justify-content:space-between;align-items:center;padding:6px 26px 0;font-size:12px;font-weight:600}
.scr{position:absolute;inset:0;padding:50px 16px 16px;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s,transform .55s var(--ease);display:flex;flex-direction:column;gap:10px}
.scr.on{opacity:1;transform:none}
.scr-title{font-size:20px;font-weight:700;letter-spacing:-.04em;margin:4px 2px 2px}
.scr-sub{font-size:11px;color:var(--muted);margin:0 2px}
.ui-card{border-radius:16px;background:#111E2E;border:1px solid #ffffff12;padding:12px}
.ui-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.ui-row b{font-weight:600}
.ui-mut{color:var(--muted);font-size:11px}
.ui-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:5px 9px;border-radius:99px;background:#00E6C41f;color:var(--teal);white-space:nowrap;flex-shrink:0;line-height:1.2}
.ui-pill .ico{stroke-width:2.4}
.ui-who{display:flex;align-items:center;gap:8px;min-width:0}
.ui-who .ui-mut{white-space:nowrap}
.ui-pill.warn{background:#FFB5471f;color:var(--warn)}.ui-pill.bad{background:#FF5C7A1f;color:var(--danger)}.ui-pill.v{background:#8A5CFF26;color:var(--violet-l)}
.ui-bar{height:6px;border-radius:9px;background:#ffffff12;overflow:hidden;margin-top:7px}
.ui-bar i{display:block;height:100%;width:var(--w);background:var(--c,var(--teal));border-radius:inherit}
.ui-map{position:relative;height:230px;border-radius:16px;overflow:hidden;background:#0B1A27}
.ui-map svg{width:100%;height:100%}
.ui-map .chip-on{position:absolute;left:10px;bottom:10px;right:10px;display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border-radius:12px;background:#07111De6;border:1px solid #ffffff1a;font-size:11px}
.bubble{max-width:86%;padding:10px 12px;border-radius:16px;font-size:12px;line-height:1.45}
.bubble.me{align-self:flex-end;background:var(--teal);color:var(--bg);border-bottom-right-radius:5px;font-weight:500}
.bubble.bt{align-self:flex-start;background:#152335;border:1px solid #ffffff12;border-bottom-left-radius:5px}
.bubble.bt b{color:var(--teal);font-weight:600}
.ctx{display:flex;gap:6px;flex-wrap:wrap}
.typing{display:flex;gap:4px;padding:12px 14px;align-self:flex-start;background:#152335;border-radius:16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.ui-input{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;background:#111E2E;border:1px solid #ffffff14;font-size:12px;color:var(--dim)}
.ui-input .ico{color:var(--teal);font-size:16px}
.big-num{font-size:44px;font-weight:700;letter-spacing:-.06em;line-height:1}
.spark{width:100%;height:70px}
.avatars{display:flex}
.avatars i{width:20px;height:20px;border-radius:50%;border:2px solid #111E2E;margin-left:-8px;background:var(--c)}
.avatars i:first-child{margin-left:0}
.tabbar{display:flex;justify-content:space-around;padding:10px 4px 2px;border-top:1px solid #ffffff12;margin-top:auto;color:var(--dim)}
.tabbar .ico{font-size:19px}.tabbar .on{color:var(--teal)}
.j-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:#0D1B2Af0;border:1px solid #ffffff22;box-shadow:0 20px 40px #0007;font-size:13px;white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .5s .2s,transform .6s .2s var(--ease)}
.j-float.on{opacity:1;transform:none}
.j-float .ico{font-size:18px;color:var(--teal)}
.j-float.f1{right:calc(100% - 46px);top:21%}.j-float.f2{right:calc(100% - 46px);bottom:21%}
.j-nav{display:flex;position:relative;margin-top:24px}
.j-nav::before{content:'';position:absolute;top:0;left:0;width:var(--jp,0%);height:2px;background:var(--grad)}
.j-nav button{flex:1;display:flex;align-items:center;gap:14px;padding:18px 12px;border-top:1px solid var(--line-2);color:var(--muted);font-size:13px;font-weight:500;text-align:left;transition:color .25s}
.j-nav button span:first-child{font-size:12px;color:var(--dim)}
.j-nav button.on{color:var(--teal)}
.j-nav button:hover{color:var(--fg)}

/* ── Ruta: et cabrà a la bici? ───────────────────────── */
.route{background:var(--bg)}
.route-head{display:grid;grid-template-columns:1.1fr .9fr;gap:6%;align-items:end;margin:60px 0 46px}
.route-head blockquote{margin:0;font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;letter-spacing:-.015em;padding-left:24px;border-left:2px solid var(--teal)}
.route-head blockquote cite{display:block;margin-top:14px;font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.route-board{display:grid;grid-template-columns:1.45fr .55fr;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--card)}
.profile{position:relative;padding:28px 28px 22px;border-right:1px solid var(--line);min-width:0}
.profile-meta{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline}
.profile-meta h3{font-size:22px;font-weight:600;letter-spacing:-.03em;margin-right:auto}
.profile-meta span{font-size:13px;color:var(--muted)}
.profile-meta span b{color:var(--fg);font-size:17px;font-weight:600;margin-left:4px}
.profile svg{width:100%;height:auto;margin-top:26px;overflow:visible}
.profile .elev{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 2.6s var(--ease)}
.profile .area{fill:url(#elevFill);opacity:0;transition:opacity 1.2s .9s}
.profile .desc{fill:#FF5C7A22;opacity:0;transition:opacity .8s 1.6s}
.profile .mk{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease)}
.route.in .elev{stroke-dashoffset:0}.route.in .area,.route.in .desc{opacity:1}
.route.in .mk{opacity:1;transform:none}
.route.in .mk.m1{transition-delay:1.2s}.route.in .mk.m2{transition-delay:1.6s}.route.in .mk.m3{transition-delay:2s}
.profile text{font-family:var(--font);font-size:12px;fill:var(--muted);paint-order:stroke;stroke:var(--card);stroke-width:5px;stroke-linejoin:round}
.profile .mk text.t{fill:var(--fg);font-weight:600}
.profile-foot{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--dim);letter-spacing:.06em}
.checklist{padding:28px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#0E1A28,#101C2B)}
.checklist h4{font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.ck{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ck .ico{font-size:18px;margin-top:2px;color:var(--teal);grid-row:span 2}
.ck small{color:var(--muted);font-size:12px;line-height:1.45}
.ck.bad .ico{color:var(--danger)}
.ck.bad b{color:#FF9DB0}
.go{margin-top:auto;padding:16px;border-radius:16px;background:#00E6C414;border:1px solid #00E6C440;font-size:14px;line-height:1.5}
.go b{color:var(--teal)}

/* ── Disciplines (v1) ────────────────────────────────── */
.terrain{background:var(--bg-2)}
.terrain-title{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin:60px 0 44px}
.terrain-title p{font-size:18px;color:var(--muted);line-height:1.5}
.tabs{display:flex;background:var(--card-2);border-radius:18px;padding:6px;gap:6px}
.tab{flex:1;display:flex;justify-content:center;align-items:center;padding:18px 20px;border-radius:13px;color:var(--muted);font-size:17px;font-weight:500;transition:background .25s,color .25s}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{background:var(--teal);color:var(--bg)}
.tab .ico{font-size:18px}
.t-panel{display:grid;grid-template-columns:1fr 1.15fr;gap:8%;padding-top:50px;animation:enter .5s var(--ease) both}
.t-panel[hidden]{display:none}
.t-panel .eyebrow{font-size:11px}
.t-panel h3{font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:600;letter-spacing:-.045em;line-height:1.1;margin:20px 0 14px;max-width:420px;color:var(--fg-strong)}
.t-panel p{color:var(--muted);line-height:1.6;max-width:400px}
.t-smart{margin-top:28px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--card);max-width:440px}
.t-smart b{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;color:var(--teal);font-weight:600}
.t-smart p{color:var(--fg);margin-top:8px;font-size:15px}
.elevation{align-self:center}
.elevation-meta,.elevation-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.elevation-meta span:first-child{display:flex;gap:8px;align-items:center;color:var(--teal)}
.elevation>svg{width:100%;margin:24px 0 10px}
.elevation .line{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.7s var(--ease) forwards}

/* ── Taller ──────────────────────────────────────────── */
.workshop{background:var(--bg-3);overflow:hidden}
.ws-head{display:grid;grid-template-columns:1.2fr .8fr;gap:6%;align-items:end;margin:60px 0 60px}
.flow{--fp:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow::before{content:'';position:absolute;z-index:0;left:29px;width:calc(75% + 12px);top:28px;height:2px;background:var(--line-2)}
.flow::after{content:'';position:absolute;z-index:0;left:29px;top:28px;height:2px;width:calc((75% + 12px)*var(--fp));background:var(--grad);box-shadow:0 0 12px #00E6C4aa}
.step{position:relative;z-index:1;padding-top:80px}
.step .dot{position:absolute;top:0;left:0;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--bg-3);border:1px solid var(--line-2);color:var(--muted);font-size:22px;transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.step.lit .dot{background:var(--teal);border-color:var(--teal);color:var(--bg);box-shadow:0 0 0 8px #00E6C41a}
.step small{font-size:12px;letter-spacing:.1em;color:var(--teal);font-weight:600}
.step h3{font-size:21px;font-weight:600;letter-spacing:-.03em;margin:8px 0 10px;color:var(--fg-strong)}
.step p{color:var(--muted);font-size:15px;line-height:1.6}
.step .who{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.08em;padding:5px 10px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.ws-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:70px;padding:30px 34px;border-radius:24px;background:linear-gradient(110deg,#00E6C41a,#15B8FF0f 55%,transparent);border:1px solid #00E6C433;flex-wrap:wrap}
.ws-cta h3{font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.04em;font-weight:600}
.ws-cta p{color:var(--muted);margin-top:6px}

/* ── Comunitat (bento) ───────────────────────────────── */
.community{background:var(--bg)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:14px;margin-top:60px}
.tile{--mx:50%;--my:50%;position:relative;border:1px solid var(--line);border-radius:24px;padding:26px;background:radial-gradient(500px circle at var(--mx) var(--my),#00E6C412,transparent 45%),var(--card);overflow:hidden;display:flex;flex-direction:column;gap:12px;transition:border-color .3s}
.tile:hover{border-color:#ffffff38}
.tile .k{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.12em;font-weight:600;color:var(--teal)}
.tile .k .ico{font-size:17px}
.tile h3{font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:600;letter-spacing:-.035em;line-height:1.15;color:var(--fg-strong)}
.tile p{color:var(--muted);font-size:15px;line-height:1.6}
.t-a{grid-column:span 3;grid-row:span 2}.t-b{grid-column:span 3}.t-c{grid-column:span 3}.t-d{grid-column:span 2}.t-e{grid-column:span 2}.t-f{grid-column:span 2}
.listing{display:grid;grid-template-columns:110px 1fr;gap:16px;margin-top:auto;padding:14px;border-radius:18px;background:#0B1624;border:1px solid #ffffff12}
.listing .ph{border-radius:12px;background:linear-gradient(140deg,#15B8FF33,#00E6C411),#132235;display:grid;place-items:center;color:#ffffff60;min-height:96px}
.listing .ph .ico{font-size:46px;stroke-width:1.2}
.listing h4{font-size:15px;font-weight:600}
.listing .lprice{font-size:22px;font-weight:700;letter-spacing:-.04em;color:var(--fg-strong);margin-top:4px}
.listing ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 8px;border-radius:99px;background:#00E6C41f;color:var(--teal)}
.groupride{margin-top:auto;display:grid;gap:10px}
.groupride .ui-card{padding:14px 16px}
.attach{margin-top:auto;display:grid;gap:8px}
.attach div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#0B1624;border:1px solid #ffffff10;font-size:13px}
.attach div span{display:flex;align-items:center;gap:8px}
.attach .ico{color:var(--blue)}
.warn-pins{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.warn-pins span{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:7px 11px;border-radius:99px;background:#FFB54714;color:#FFD08A;border:1px solid #FFB54733}
.beacon{margin-top:auto;display:flex;align-items:center;gap:16px}
.beacon .pulse{position:relative;margin-left:6px;width:46px;height:46px;border-radius:50%;background:var(--teal);display:grid;place-items:center;color:var(--bg);flex-shrink:0}
.beacon .pulse::before,.beacon .pulse::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--teal);animation:ping 2.2s infinite}
.beacon .pulse::after{animation-delay:1.1s}
.beacon small{color:var(--muted);font-size:13px;line-height:1.5}
.priv{margin-top:auto;position:relative;height:90px;border-radius:14px;background:#0B1624;overflow:hidden}
.priv svg{width:100%;height:100%}

/* ── Principis ───────────────────────────────────────── */
.principles{background:var(--bg-2)}
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;border-top:1px solid var(--line)}
.pr{padding:30px 26px 10px 0;border-right:1px solid var(--line);margin-right:26px}
.pr:last-child{border-right:0;margin-right:0}
.pr span{font-size:13px;color:var(--teal);font-weight:600}
.pr h3{font-size:clamp(1.25rem,1.7vw,1.6rem);font-weight:600;letter-spacing:-.035em;line-height:1.2;margin:16px 0 12px;color:var(--fg-strong)}
.pr p{color:var(--muted);font-size:15px;line-height:1.65}

/* ── Preu ────────────────────────────────────────────── */
.pricing{background:var(--bg)}
.price-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-top:60px}
.price{border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,40px);background:var(--card);display:flex;flex-direction:column;gap:18px}
.price.main{background:linear-gradient(150deg,#00E6C41f,#101C2B 55%);border-color:#00E6C455}
.price .who{font-size:12px;letter-spacing:.12em;font-weight:600;color:var(--muted)}
.price .amount{font-size:clamp(3.4rem,7vw,6rem);font-weight:700;letter-spacing:-.07em;line-height:.95;color:var(--fg-strong)}
.price .amount small{font-size:.24em;letter-spacing:-.01em;color:var(--muted);font-weight:500;margin-left:6px}
.price ul{display:grid;gap:10px}
.price li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.price li .ico{color:var(--teal);font-size:18px;margin-top:2px}
.price .why{color:var(--muted);font-size:14px;line-height:1.65;padding-top:18px;border-top:1px solid var(--line);margin-top:auto}

/* ── Manifest (v1) ───────────────────────────────────── */
.manifesto{background:var(--bg-3)}
.manifesto-text{font-size:clamp(2.3rem,5.4vw,5.8rem);line-height:1.12;font-weight:600;letter-spacing:-.055em;margin:60px 0 60px;max-width:1300px}
.mw{color:#3A4A5E;transition:color .45s}
.mw.lit{color:var(--fg-strong)}
.mw.acc.lit{color:var(--teal)}
.manifesto-foot{display:flex;align-items:center;gap:20px}
.manifesto-foot img{width:58px;height:48px;object-fit:contain}
.manifesto-foot p{color:var(--muted);line-height:1.5}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%}
.faq-intro h2{font-size:clamp(2.4rem,4.2vw,4.2rem);margin:24px 0 18px}
.faq-intro p{color:var(--muted);line-height:1.7}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:500}
.faq-item button{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:24px 0;text-align:left;transition:color .2s}
.faq-item button:hover{color:var(--teal)}
.faq-item button .ico{font-size:20px;transition:transform .35s var(--ease)}
.faq-item button[aria-expanded="true"] .ico{transform:rotate(45deg);color:var(--teal)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{color:var(--muted);line-height:1.75;padding:0 40px 26px 0}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* ── Accés ───────────────────────────────────────────── */
.access{background:radial-gradient(900px 500px at 85% 20%,#15B8FF1f,transparent 60%),radial-gradient(800px 500px at 10% 90%,#00E6C41a,transparent 60%),var(--bg-2);border-top:1px solid var(--line)}
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.access h2{margin-top:24px}
.access .lead{margin-top:26px;max-width:480px;color:var(--muted)}
.form{display:grid;gap:14px;padding:clamp(22px,3vw,36px);border-radius:28px;background:#0B1624e6;border:1px solid var(--line-2)}
.field{display:grid;gap:8px}
.field label,.field legend{font-size:13px;color:var(--muted);font-weight:500;padding:0}
.field input,.field select{width:100%;padding:15px 16px;border-radius:14px;background:#07111D;border:1px solid var(--line-2);font-size:16px;transition:border-color .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--teal)}
fieldset.field{border:0;margin:0;padding:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--line-2);cursor:pointer;color:var(--fg);font-size:15px;transition:border-color .2s,background .2s}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){border-color:var(--teal);background:#00E6C414;color:var(--teal)}
.seg label:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
.form .btn{justify-content:center;margin-top:6px}
.form-note{font-size:12px;color:var(--dim);line-height:1.5}
.form-msg{font-size:14px;line-height:1.5;padding:14px 16px;border-radius:14px;background:#ffffff0a;border:1px solid var(--line-2)}
.form-msg[hidden]{display:none}
.form-msg.ok{background:#00E6C414;border-color:#00E6C455}

/* ── Tancament i peu ─────────────────────────────────── */
.closing{padding:80px 0 30px;background:var(--bg-3);border-top:1px solid var(--line)}
.closing-link{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:34px}
.closing-link>span:first-child{font-size:clamp(3.6rem,10.4vw,11rem);font-weight:700;line-height:.92;letter-spacing:-.06em;color:var(--fg-strong)}
.closing-arrow{width:clamp(70px,10vw,150px);height:clamp(70px,10vw,150px);border-radius:50%;background:var(--teal);color:var(--bg);display:grid;place-items:center;flex-shrink:0;transition:transform .45s var(--ease),background .4s}
.closing-arrow .ico{width:50%;height:50%;stroke-width:1.2}
.closing-link:hover .closing-arrow{transform:rotate(45deg);background:var(--blue)}
.closing-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.footer{padding:44px 0 34px;background:var(--bg)}
.footer-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-top p{color:var(--muted);font-size:14px;margin-top:14px;max-width:320px}
.footer nav{display:grid;grid-template-columns:repeat(2,auto);gap:12px 50px;font-size:14px}
.footer nav a{color:var(--muted);transition:color .2s}.footer nav a:hover{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);flex-wrap:wrap}
.footer-bottom .ctrl{display:flex;gap:16px;align-items:center}
.footer-bottom button{font-size:12px;color:var(--muted);padding:8px 0}
.footer-bottom button:hover{color:var(--teal)}
.footer-bottom .top{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center}

/* ── Revelat en fer scroll ───────────────────────────── */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@keyframes rise{to{transform:none}}
@keyframes enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes blink{50%{opacity:.25}}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}

/* ── Moviment reduït ─────────────────────────────────── */
.still *,.still *::before,.still *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
.still .ticker-track{animation:none!important}
.still .hero-photo{transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1100px){
  .nav-links{gap:20px}
  .hero-inner{grid-template-columns:1fr;align-items:start}
  .health{justify-self:start}
  .duo-board,.route-board{grid-template-columns:1fr}
  .profile{border-right:0;border-bottom:1px solid var(--line)}
  .pr-grid{grid-template-columns:1fr 1fr}
  .pr:nth-child(2){border-right:0;margin-right:0}
  .pr:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:30px}
  .t-a,.t-b,.t-c{grid-column:span 6}.t-a{grid-row:auto}
  .t-d,.t-e,.t-f{grid-column:span 3}.t-f{grid-column:span 6}
  .j-stage{padding:0}
  .j-stage .o2{display:none}
  .j-float{display:none}
}
@media (max-width:860px){
  html{scroll-padding-top:76px}
  .nav{height:72px}.nav.solid{height:64px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:10px var(--pad) 22px;background:#07111Df7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);font-size:18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  .nav-cta{display:none}
  .menu-btn{display:grid}
  .logo span{font-size:20px}.logo img{width:40px;height:32px}
  .hero-inner{padding-top:150px;padding-bottom:110px;gap:36px}
  .hero-foot .wrap>span:last-child{display:none}
  .section-label span:last-child{display:none}
  .vision-grid,.duo-head,.route-head,.ws-head,.access-grid,.faq,.price-grid{grid-template-columns:1fr;gap:40px}
  .converge{max-width:420px;--k:.62}
  .chip{font-size:13px;padding:9px 12px}
  .rides{grid-template-columns:1fr}
  .ride svg.mini{display:none}
  .journey{height:950svh}
  .journey-sticky{padding:72px 0 14px;min-height:0}
  .journey-main{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:12px;align-content:center}
  .j-copy{min-height:178px}
  .j-steps{margin-top:10px}.j-steps li:not(.cur){display:none}.j-steps li{font-size:14px;padding:0}
  .j-ch .j-word{margin:0;font-size:clamp(2.4rem,11vw,4rem)}
  .j-ch h3{font-size:1.25rem;margin-top:10px}
  .j-ch p:not(.j-word),.j-ch ul,.j-ch .j-incl{display:none}
  .profile .mk text{display:none}
  .j-stage .o1{width:300px;height:300px}
  .j-nav{margin-top:12px}
  .j-nav button{justify-content:center;padding:14px 4px}
  .j-nav button span:last-child{display:none}
  .j-nav button span:first-child{font-size:14px;color:inherit}
  .flow{grid-template-columns:1fr;gap:34px}
  .flow::before,.flow::after{left:28px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .flow::after{height:calc((100% - 56px)*var(--fp));bottom:auto}
  .step{padding:0 0 0 84px;min-height:58px}
  .tabs{flex-wrap:wrap}
  .tab{flex:1 1 40%;font-size:15px;padding:14px}
  .tab .ico{display:none}
  .t-panel{grid-template-columns:1fr;gap:34px;padding-top:34px}
  .terrain-title{display:block}.terrain-title p{margin-top:20px}
  .t-d,.t-e,.t-f{grid-column:span 6}
  .pr-grid{grid-template-columns:1fr}
  .pr{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-bottom:30px}
  .pr:last-child{border-bottom:0}
  .closing-bottom{flex-direction:column}
  .footer nav{grid-template-columns:1fr 1fr;gap:12px 30px}
}
@media (max-width:520px){
  .hero h1{font-size:clamp(3.4rem,17vw,5rem)}
  .hero-ctas .btn{flex:1;justify-content:space-between}
  .stats{gap:20px 12px}
  .listing{grid-template-columns:1fr}
  .listing .ph{min-height:80px}
  .profile,.checklist{padding:20px}
  .profile-meta h3{width:100%}
  .duo-actions{width:100%}.duo-actions .btn{flex:1;justify-content:center}
  .ws-cta{padding:24px}
  .seg{grid-template-columns:1fr}
}
@media (max-height:820px) and (min-width:861px){
  .j-ch h3{font-size:1.7rem}.j-ch p:not(.j-word):not(.j-num){display:none}.j-copy{min-height:420px}
  .journey-sticky{padding-top:76px}
}

/* ═══ Pàgina de tallers ═══════════════════════════════ */
.ws-hero{position:relative;min-height:max(720px,100svh);display:flex;align-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(900px 600px at 80% 30%,#15B8FF22,transparent 60%),radial-gradient(700px 500px at 10% 80%,#00E6C41a,transparent 60%),var(--bg)}
.ws-hero::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%)}
.ws-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:5%;align-items:center;padding-top:130px;padding-bottom:90px}
.ws-hero h1{font-size:clamp(2.6rem,5.4vw,6.2rem);text-wrap:balance;font-weight:700;letter-spacing:-.06em;line-height:.95;color:var(--fg-strong);margin-top:28px}
.ws-hero h1 .line{display:block;overflow:hidden;padding-bottom:.05em}
.ws-hero h1 .line>span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.ws-hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.ws-hero .lead{margin-top:30px;max-width:520px;color:var(--muted)}
.ws-hero .hero-ctas{margin-top:36px}
.board{border-radius:26px;background:#0B1624ee;border:1px solid var(--line-2);box-shadow:0 40px 100px #0009;padding:18px;opacity:0;transform:translateY(30px);animation:enter 1s .5s var(--ease) forwards}
.board-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 4px 16px;border-bottom:1px solid var(--line)}
.board-top b{font-size:15px;letter-spacing:-.02em}
.board-top span{font-size:12px;color:var(--muted)}
.board-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.bcol .lbl4{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:10px}
.bcol .lbl4 i{font-style:normal;color:var(--fg)}
.wo{border-radius:14px;background:#111E2E;border:1px solid #ffffff12;padding:12px;margin-bottom:10px;font-size:12px;opacity:0;animation:enter .6s var(--ease) forwards}
.wo b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.wo .ui-mut{display:block;margin-top:2px}
.wo .ui-row{margin-top:10px}
.wo.hl{border-color:#00E6C466;background:linear-gradient(150deg,#00E6C41a,#111E2E)}
.age{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.age .ico{font-size:12px}
.age.late{color:var(--warn)}

.thesis{background:var(--bg-2);text-align:left}
.thesis-text{font-size:clamp(1.9rem,4.2vw,4.4rem);font-weight:600;letter-spacing:-.05em;line-height:1.12;max-width:1200px;margin-top:60px;color:var(--dim)}
.thesis-text strong{color:var(--fg-strong);font-weight:600}
.thesis-text em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.day{margin-top:60px;border-top:1px solid var(--line)}
.day-row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.2fr) 170px;gap:30px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:background .3s}
.day-row:hover{background:linear-gradient(90deg,transparent,#00E6C40a,transparent)}
.day-row time{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;letter-spacing:-.04em;color:var(--teal);font-variant-numeric:tabular-nums}
.day-row h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-.03em;color:var(--fg-strong)}
.day-row p{color:var(--muted);line-height:1.6}
.day-row .ui-pill{white-space:nowrap;justify-self:end}

.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}
.feat{--mx:50%;--my:50%;border:1px solid var(--line);border-radius:22px;padding:24px;background:radial-gradient(400px circle at var(--mx) var(--my),#00E6C412,transparent 45%),var(--card);display:flex;flex-direction:column;gap:10px;min-height:220px;transition:border-color .3s,transform .3s var(--ease)}
.feat:hover{border-color:#ffffff38;transform:translateY(-3px)}
.feat .fi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#00E6C414;color:var(--teal);font-size:22px;margin-bottom:8px}
.feat h3{font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--fg-strong)}
.feat p{color:var(--muted);font-size:14.5px;line-height:1.6}

.apply{background:var(--bg-3)}
.apply-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:6%;align-items:center;margin-top:60px}
.apply-grid .lead{margin-top:26px;color:var(--muted);max-width:480px}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.ba .panel{padding:22px}
.ba .panel .lbl4{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:16px}
.ba .arrow{width:52px;height:52px;border-radius:50%;background:var(--teal);color:var(--bg);display:grid;place-items:center;font-size:22px}
.ba .ui-row{margin-top:12px;font-size:13px}
.ba .ui-row:first-of-type{margin-top:0}
.ba .archived{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);font-size:12px;color:var(--muted)}

.plans{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:60px}

@media (max-width:1100px){
  .ws-hero-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .apply-grid{grid-template-columns:1fr;gap:40px}
  .day-row{grid-template-columns:100px 1fr auto}
  .day-row p{grid-column:2/-1}
}
@media (max-width:860px){
  .ws-hero-grid{padding-top:120px;gap:44px}
  .board-cols{grid-template-columns:1fr 1fr}
  .board-cols .bcol:last-child{display:none}
  .plans{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .ba .arrow{justify-self:center;transform:rotate(90deg)}
}
@media (max-width:520px){
  .feat-grid{grid-template-columns:1fr}
  .feat{min-height:0}
  .day-row{grid-template-columns:1fr auto;gap:8px 16px}
  .day-row h3{grid-column:1/-1;order:2}
  .day-row p{grid-column:1/-1;order:3}
  .board-cols{grid-template-columns:1fr}
  .board-cols .bcol:nth-child(2){display:none}
}

/* ═══ v3.1 ════════════════════════════════════════════ */

/* Títols que pugen línia a línia */
.js .h2.split{opacity:1;transform:none}
.split .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.split .ln>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease)}
.split.in .ln>span{transform:none}
.split .ln:nth-child(2)>span{transition-delay:.09s}.split .ln:nth-child(3)>span{transition-delay:.18s}

/* Pantalles del telèfon: avancen amb l'scroll */
.scr [data-at],.j-float[data-at]{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .35s,transform .45s var(--ease)}
.scr [data-at].seen,.j-float[data-at].seen.on{opacity:1;transform:none}
.j-float[data-at]{transition:opacity .35s,transform .45s var(--ease)}
.scr [data-until]:not([data-at]).gone{display:none}
.scr .typing[data-at]{display:none}
.scr .typing[data-at].seen{display:flex}
.scr .ui-pill[data-at]:not(.seen),.scr .ui-mut[data-until].gone{display:none}
.scr .avatars i[data-at]:not(.seen){display:none}
.scr .inl[data-at]{display:inline-block}
.scr svg [data-at]{transform:none;transform-origin:center;transform-box:fill-box}
.scr svg .pop[data-at]{transform:scale(.4)}
.scr svg .pop[data-at].seen{transform:none}
.ui-bar i{transition:width .15s linear}
.ui-bar i.full{background:var(--danger)}
.ui-verdict{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:14px;background:#FF5C7A14;border:1px solid #FF5C7A40;font-size:12px;line-height:1.45}
.ui-verdict .ico{font-size:16px;color:var(--danger);margin-top:1px}
.ui-verdict b{color:#FF9DB0}
.ui-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:12px;background:var(--teal);color:var(--bg);font-size:13px;font-weight:600}
.ui-cta .ico{font-size:16px}
.ui-sync{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#15B8FF1a;border:1px solid #15B8FF44;font-size:11.5px;line-height:1.4}
.ui-sync .ico{font-size:16px;color:var(--blue);margin-top:2px}
.ui-pill.solid{background:var(--teal);color:var(--bg)}
.avatars i.me{box-shadow:0 0 0 2px var(--teal)}
.j-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px;counter-reset:js;max-width:520px}
.j-steps li{display:flex;align-items:center;gap:14px;padding:7px 0;border:0;border-radius:0;color:var(--dim);font-size:15px;transition:color .3s}
.j-steps li::before{content:attr(data-n);flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:600;transition:background .3s,border-color .3s,color .3s}
.j-steps li.seen{color:var(--muted)}
.j-steps li.seen::before{border-color:#00E6C466;color:var(--teal);background:#00E6C414}
.j-steps li.cur{color:var(--fg-strong);font-weight:500}
.j-steps li.cur::before{background:var(--teal);border-color:var(--teal);color:var(--bg);box-shadow:0 0 0 6px #00E6C41a}
.j-ch .j-incl{font-size:13px;color:var(--dim);margin-top:18px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ── Copilot interactiu ─────────────────────────────── */
.copilot{background:var(--bg-2);overflow:hidden}
.cp-head{display:grid;grid-template-columns:1.1fr .9fr;gap:6%;align-items:end;margin:60px 0 50px}
.cp-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;align-items:stretch}
.cp-qs{display:flex;flex-direction:column;gap:10px}
.cp-qs>p{font-size:12px;letter-spacing:.12em;font-weight:600;color:var(--muted);margin-bottom:6px}
.cp-q{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--card);font-size:16px;font-weight:500;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.cp-q small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px}
.cp-q .ico{font-size:18px;color:var(--dim);transition:color .25s,transform .25s var(--ease)}
.cp-q:hover{border-color:#ffffff45;transform:translateX(4px)}
.cp-q:hover .ico{color:var(--teal)}
.cp-q[aria-pressed="true"]{border-color:var(--teal);background:linear-gradient(120deg,#00E6C418,var(--card) 70%)}
.cp-q[aria-pressed="true"] .ico{color:var(--teal)}
.chat{display:flex;flex-direction:column;border-radius:28px;border:1px solid var(--line-2);background:linear-gradient(180deg,#0E1A28,#0B1624);min-height:560px;overflow:hidden;box-shadow:0 40px 90px #0007}
.chat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.chat-top b{display:flex;align-items:center;gap:10px;font-size:15px}
.chat-top b .ico{color:var(--teal);font-size:20px}
.chat-top .ctx{gap:6px}
.chat-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:24px 22px;overflow:hidden}
.cmsg{max-width:82%;padding:13px 16px;border-radius:20px;font-size:15px;line-height:1.5;animation:pop .4s var(--ease) both}
.cmsg.me{align-self:flex-end;background:var(--teal);color:var(--bg);font-weight:500;border-bottom-right-radius:6px}
.cmsg.bt{align-self:flex-start;background:#152335;border:1px solid #ffffff14;border-bottom-left-radius:6px}
.cmsg.bt b{color:var(--teal);font-weight:600}
.ccard{align-self:flex-start;width:min(440px,92%);border-radius:18px;border:1px solid #ffffff1c;background:#0B1624;overflow:hidden;animation:pop .45s .1s var(--ease) both}
.ccard-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:#00E6C40f;border-bottom:1px solid #ffffff12;font-size:12px;letter-spacing:.08em;font-weight:600;color:var(--teal)}
.ccard-h span:last-child{color:var(--dim);letter-spacing:0;font-weight:500}
.ccard-r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid #ffffff0d;font-size:14px}
.ccard-r:last-child{border-bottom:0}
.ccard-r em{font-style:normal;font-weight:600}
.ccard-r em.bad{color:var(--danger)}.ccard-r em.warn{color:var(--warn)}.ccard-r em.ok{color:var(--teal)}
.ccard-f{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:11px 16px;font-size:12px;color:var(--muted);background:#ffffff05}
.ccard-f span:last-child{display:inline-flex;align-items:center;gap:6px;color:var(--teal)}
.copts{display:flex;flex-wrap:wrap;gap:8px;animation:pop .4s .15s var(--ease) both}
.copts button{padding:10px 14px;border-radius:99px;border:1px solid #15B8FF66;color:#8FDCFF;font-size:14px;transition:background .2s}
.copts button:hover{background:#15B8FF1f}
.chat-typing{align-self:flex-start;display:flex;gap:5px;padding:15px 16px;border-radius:18px;background:#152335}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite}
.chat-typing i:nth-child(2){animation-delay:.18s}.chat-typing i:nth-child(3){animation-delay:.36s}
.chat-in{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 18px 18px;padding:14px 16px;border-radius:16px;border:1px solid var(--line-2);background:#07111D;color:var(--dim);font-size:15px}
.chat-in .ico{color:var(--teal);font-size:18px}
.cp-note{margin-top:18px;font-size:12px;color:var(--dim)}

/* ── Comença en tres passos ─────────────────────────── */
.start{background:var(--bg-3)}
.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:60px;counter-reset:st}
.st{position:relative;border:1px solid var(--line);border-radius:26px;padding:30px;background:var(--card);overflow:hidden;min-height:330px;display:flex;flex-direction:column}
.st::before{counter-increment:st;content:counter(st);position:absolute;right:-6px;top:-38px;font-size:190px;font-weight:700;letter-spacing:-.08em;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff14}
.st h3{font-size:clamp(1.35rem,1.9vw,1.75rem);font-weight:600;letter-spacing:-.035em;margin-top:22px;color:var(--fg-strong)}
.st p{color:var(--muted);margin-top:10px;line-height:1.6;font-size:15px}
.st .fi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:var(--bg);font-size:24px}
.st-demo{margin-top:auto;padding-top:24px}
.st-demo .ui-card{background:#0B1624}
.drop{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1.5px dashed #15B8FF66;color:#8FDCFF;font-size:13px}
.drop .ico{font-size:20px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid var(--line);border-radius:26px;overflow:hidden}
.fact{padding:28px 30px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact b{display:block;font-size:clamp(2.2rem,4vw,3.6rem);font-weight:700;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}

/* ── Manifest sobre la foto ─────────────────────────── */
.manifesto{position:relative;isolation:isolate;overflow:hidden}
.manifesto::before{content:'';position:absolute;inset:-10% 0;z-index:-2;background:url('img/cycling-hero.webp') center 30%/cover;transform:translate3d(0,var(--my,0),0);opacity:.7}
.manifesto::after{content:'';position:absolute;inset:-2px 0;z-index:-1;background:linear-gradient(180deg,#0D1B2A 0%,#0D1B2Acc 28%,#07111Dc4 70%,#07111D 100%)}
.manifesto .mw{color:#4A5B70}
.manifesto .mw.lit{color:var(--fg-strong)}
.manifesto .mw.acc.lit{color:var(--teal)}

/* ── Barra d'accés al mòbil ─────────────────────────── */
.mcta{position:fixed;z-index:90;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:18px;background:#0D1B2Af2;border:1px solid var(--line-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px #000a;transform:translateY(140%);transition:transform .45s var(--ease)}
.mcta.show{transform:none}
.mcta span{font-size:14px;font-weight:500}
.mcta .btn{padding:12px 16px;font-size:14px}

/* ── Escaneig QR (tallers) ──────────────────────────── */
.scan{background:var(--bg-3)}
.scan-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:6%;align-items:center;margin-top:60px}
.scan-grid .lead{margin-top:26px;color:var(--muted);max-width:480px}
.scan-grid .btn{margin-top:32px}
.scanner{position:relative;display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.qr{position:relative;aspect-ratio:1;border-radius:22px;background:#fff;padding:18px;overflow:hidden;box-shadow:0 30px 70px #0008}
.qr svg{width:100%;height:100%}
.qr .beam{position:absolute;left:0;right:0;top:0;height:3px;background:var(--teal);box-shadow:0 0 18px 4px #00E6C4aa;opacity:0}
.scanner.scanning .qr .beam{animation:beam 1.2s var(--ease) 2;opacity:1}
.qr-cap{margin-top:12px;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.06em}
.brief{border-radius:24px;border:1px solid var(--line-2);background:#0B1624;padding:20px;min-height:360px;position:relative}
.brief-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--dim);font-size:14px;padding:30px;transition:opacity .3s}
.brief-empty .ico{font-size:36px;margin:0 auto 12px;color:#ffffff30}
.brief-body{opacity:0;transition:opacity .3s}
.scanner.done .brief-empty{opacity:0;pointer-events:none}
.scanner.done .brief-body{opacity:1}
.scanner.done .brief-body>*{animation:enter .5s var(--ease) both}
.scanner.done .brief-body>*:nth-child(2){animation-delay:.08s}.scanner.done .brief-body>*:nth-child(3){animation-delay:.16s}.scanner.done .brief-body>*:nth-child(4){animation-delay:.24s}.scanner.done .brief-body>*:nth-child(5){animation-delay:.32s}
.brief-h{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.brief-h .lbl4{color:var(--fg);margin-top:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.brief-h p{font-size:12px;color:var(--muted);margin-top:2px}
.brief-sec{padding-top:14px}
.brief-sec>small{display:block;font-size:11px;letter-spacing:.1em;font-weight:600;color:var(--muted);margin-bottom:8px}
.brief-sec .ui-row{padding:6px 0;font-size:13px}
.say{margin-top:14px;padding:12px 14px;border-radius:14px;background:#8A5CFF1a;border:1px solid #8A5CFF40;font-size:13px;line-height:1.5}
.say b{color:var(--violet-l)}
@keyframes beam{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}

@media (max-width:1100px){
  .cp-head,.cp-grid,.scan-grid{grid-template-columns:1fr;gap:30px}
  .start-grid{grid-template-columns:1fr}
  .st{min-height:0}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  .mcta{display:flex}
  .chat{min-height:520px}
  .cmsg{font-size:14px;max-width:90%}
  .scanner{grid-template-columns:1fr}
  .qr{width:180px;margin:0 auto}
}
@media (max-width:520px){
  .fact{padding:22px 18px}
  .fact span{font-size:13px}
  .cp-q{padding:15px 16px;font-size:15px}
  .chat-top .ctx{display:none}
}
.still .split .ln>span{transform:none}

/* ── Disciplines: de l'asfalt a la gravetat ─────────── */
.terra{position:relative;margin-top:50px;height:clamp(560px,74vh,700px);border-radius:32px;overflow:hidden;border:1px solid var(--line);isolation:isolate}
.terra-svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.terra::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,#07111De0 0%,#07111D99 32%,transparent 60%)}
.terra-copy,.terra-stats{z-index:1}
.terra-copy{position:absolute;left:clamp(22px,4vw,56px);top:clamp(26px,5vh,52px);max-width:560px}
.terra-copy>*{opacity:0;transform:translateY(14px)}
.terra-copy.in>*{animation:enter .7s var(--ease) forwards}
.terra-copy.in>*:nth-child(2){animation-delay:.06s}.terra-copy.in>*:nth-child(3){animation-delay:.14s}.terra-copy.in>*:nth-child(4){animation-delay:.22s}
.terra-copy .eyebrow{font-size:11px}
.terra-word{font-size:clamp(3.6rem,9vw,8.4rem);font-weight:700;letter-spacing:-.065em;line-height:.9;margin-top:14px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.terra-copy h3{font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.04em;line-height:1.12;margin-top:16px;color:var(--fg-strong)}
.terra-copy p:last-child{color:#B9C7D6;margin-top:12px;line-height:1.6;max-width:480px}
.terra-stats{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(0deg,#07111Df2,#07111Db0 70%,transparent);padding:44px clamp(22px,4vw,56px) 26px;gap:24px}
.terra-stats div{border-left:1px solid #ffffff22;padding-left:18px}
.terra-stats small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.terra-stats b{display:block;margin-top:8px;font-size:clamp(1.05rem,1.6vw,1.45rem);font-weight:600;letter-spacing:-.02em;color:var(--fg-strong);font-variant-numeric:tabular-nums}
.terra.in2 .terra-stats b{animation:enter .6s var(--ease) both}
.tbar{display:block;height:5px;border-radius:9px;background:#ffffff14;margin-top:10px;overflow:hidden;max-width:220px}
.tbar i{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .9s var(--ease)}
.terra-scale{margin-top:26px}
.ts-ends{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--dim)}
.ts-ends span:nth-child(2){color:var(--muted)}
.ts-track{--tp:0%;position:relative;display:flex;justify-content:space-between;margin-top:16px;padding:0 6px}
.ts-track::before{content:'';position:absolute;left:18px;right:18px;top:11px;height:2px;background:var(--line-2)}
.ts-fill{position:absolute;left:18px;top:11px;height:2px;width:calc((100% - 36px) * var(--tpn, 0));background:var(--grad);box-shadow:0 0 10px #00E6C4aa;transition:width .9s var(--ease)}
.ts-stop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--muted);min-width:24px;transition:color .25s}
.ts-stop i{width:24px;height:24px;border-radius:50%;background:var(--bg-2);border:2px solid var(--line-2);transition:background .3s,border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.ts-stop.past i{border-color:#00E6C488;background:#0E2A33}
.ts-stop[aria-selected="true"]{color:var(--teal)}
.ts-stop[aria-selected="true"] i{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 7px #00E6C41f;transform:scale(1.1)}
.ts-stop:hover{color:var(--fg)}
.terra-note{margin-top:34px;max-width:760px;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:var(--muted)}
.terra-note b{color:var(--fg);font-weight:600}
@media (max-width:860px){
  .terra{height:auto;border-radius:24px;display:grid;grid-template-rows:auto 230px auto}
  .terra-svg{position:relative;grid-area:1/1/3/2;width:100%;height:100%}
  .terra-copy{position:relative;grid-area:1/1/2/2;left:auto;top:auto;padding:26px 22px 0}
  .terra-stats{position:relative;grid-area:3/1/4/2;grid-template-columns:1fr 1fr;gap:16px;padding:20px 22px 22px;background:#07111D;border-top:1px solid var(--line)}
  .terra-stats div{padding-left:12px}
  .terra-copy p:last-child{font-size:15px}
  .ts-track{overflow-x:auto;gap:22px;justify-content:flex-start;padding-bottom:6px;scrollbar-width:none}
  .ts-track::-webkit-scrollbar{display:none}
  .ts-stop{flex:0 0 auto}
  .ts-track::before,.ts-fill{display:none}
  .ts-ends span:nth-child(1),.ts-ends span:nth-child(3){display:none}
}

/* Desplegable del formulari amb fletxa pròpia */
.field select{appearance:none;-webkit-appearance:none;padding-right:52px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B8C9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:18px}
.field select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E6C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.field select option{background:#0B1624;color:var(--fg)}

.closing-link.closing-sm>span:first-child{font-size:clamp(2.6rem,6.6vw,7rem);line-height:.95}

/* ═══ Mòbil: ajustos d'usabilitat ═══════════════════════ */
@media (max-width:860px){
  /* 03 · univers: text a dalt sense trepitjar el títol, telèfon a l'espai que queda */
  .journey-main{grid-template-rows:auto minmax(0,1fr)}
  .j-copy{min-height:0;height:172px}
  .j-ch{justify-content:flex-start}
  .j-ch h3{font-size:1.12rem;line-height:1.25}
  .j-stage .o1{width:260px;height:260px}
  /* 07 · taller: la línia acaba al centre de l'últim punt */
  .flow::before{bottom:auto;height:calc(var(--fl,100%) - 28px)}
  .flow::after{height:calc((var(--fl,100%) - 28px) * var(--fp))}
  /* 06 · paisatge: escala a dalt, tot visible d'un cop */
  .terrain .wrap{display:flex;flex-direction:column}
  .terrain .terra{order:3;margin-top:16px}
  .terrain .terra-note{order:4}
  .terra-scale{margin-top:30px}
  .ts-track{overflow:visible;justify-content:space-between;gap:0;padding:6px 0 4px}
  .ts-stop{font-size:12px;gap:9px;min-width:0}
  .ts-stop i{width:20px;height:20px}
  .ts-stop[aria-selected="true"] i{box-shadow:0 0 0 5px #00E6C41f}
  .terra{grid-template-rows:auto 170px auto}
  .terra-copy{padding:22px 20px 0}
  .terra-word{font-size:3.4rem}
  .terra-copy h3{font-size:1.25rem;margin-top:10px}
  .terra-copy p:last-child{font-size:14px;margin-top:8px}
  .terra-stats{padding:16px 20px 18px;gap:12px 14px}
  .terra-stats small{font-size:10px}
  .terra-stats b{font-size:15px;margin-top:5px}
  .tbar{margin-top:7px}
  /* 02 · simulador: sortides en carrusel, la bici just a sota dels botons */
  .rides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);gap:10px;margin:-6px calc(-1 * var(--pad)) 0;padding:8px var(--pad) 8px;scrollbar-width:none}
  .ride:hover{transform:none}
  .rides::-webkit-scrollbar{display:none}
  .ride{flex:0 0 74%;scroll-snap-align:start;padding:14px 16px}
  .ride h3{font-size:16px;margin:4px 0 8px}
  .ride dl{gap:14px;font-size:12px}
  .ride dd{font-size:14px}
  .duo-controls{margin:14px 0 16px;gap:12px}
  .duo-actions .btn{padding:12px 14px;font-size:14px}
  .duo-board{display:flex;flex-direction:column}
  .duo-board .panel:last-child{order:-1}
  .panel{padding:18px}
  .panel-head{margin-bottom:16px}
  .parts{gap:14px}
  .verdict{margin-top:18px;min-height:0;padding:13px 14px;font-size:14px}
  .stats{grid-template-columns:repeat(4,1fr);gap:10px}
  .stat small{font-size:11px}
  .stat b{font-size:1.25rem}
  .rider-season{margin-top:16px;padding-top:14px;font-size:13px}
  /* 05 · copilot: preguntes en una fila lliscant, el xat just a sota */
  .cp-qs{flex-direction:row;overflow-x:auto;scroll-padding-inline:var(--pad);gap:8px;margin:-4px calc(-1 * var(--pad)) 0;padding:6px var(--pad) 6px;scrollbar-width:none}
  .cp-qs::-webkit-scrollbar{display:none}
  .cp-qs>p{display:none}
  .cp-q{flex:0 0 auto;padding:11px 15px;font-size:14px;border-radius:99px}
  .cp-q small,.cp-q .ico{display:none}
  .cp-q:hover{transform:none}
  .cp-grid{gap:12px}
  .chat{min-height:440px}
}

@media (hover:none){.ride:hover,.cp-q:hover,.feat:hover{transform:none}}

/* ═══ v3.2 ════════════════════════════════════════════ */

/* Simulador: el nom de la peça no es parteix; la moneda baixa si no hi cap */
.part-name{flex-wrap:wrap;row-gap:4px}
.part-name .pn{white-space:nowrap}
.ride-log{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.ride-log h4{font-size:11px;letter-spacing:.12em;font-weight:600;color:var(--muted);margin-bottom:10px}
.ride-log ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ride-log li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;background:#0B1624;border:1px solid #ffffff10;font-size:13px}
.ride-log li span{display:flex;flex-direction:column;min-width:0;flex:1}
.ride-log li b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ride-log li small{font-size:11.5px;color:var(--muted);margin-top:2px}
.ride-log li em{font-style:normal;font-size:12.5px;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums}
.ride-log li.new{border-color:#00E6C455;background:linear-gradient(120deg,#00E6C414,#0B1624 70%);animation:pop .45s var(--ease) both}

/* Perfil de ruta: llegenda i el que gasta */
.profile-foot{align-items:center;gap:12px}
.profile-foot .legend{display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em;color:var(--muted)}
.profile-foot .legend i{width:14px;height:10px;border-radius:3px;background:#FF5C7A33;border:1px solid #FF5C7A66}
.route-cost{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.route-cost h4{font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.rc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.rc-grid div{padding:14px 16px;border-radius:16px;background:#0B1624;border:1px solid #ffffff10}
.rc-grid small{display:block;font-size:12px;color:var(--muted)}
.rc-grid b{display:block;margin-top:6px;font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:600;letter-spacing:-.03em;color:var(--fg-strong);font-variant-numeric:tabular-nums}
.rc-grid span{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.rc-grid div:first-child{border-color:#FF5C7A44;background:linear-gradient(150deg,#FF5C7A12,#0B1624 70%)}
.rc-grid div:first-child b{color:#FF9DB0}

/* Copilot: la caixa d'entrada és real; la conversació es desplaça a dins */
.chat-body{max-height:600px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff22 transparent}
.chat-body>*{flex-shrink:0}
.chat-in{padding:6px 6px 6px 16px}
.chat-in input{flex:1;min-width:0;background:none;border:0;padding:8px 0;font-size:16px;color:var(--fg)}
.chat-in input::placeholder{color:var(--dim)}
.chat-in input:focus{outline:none}
.chat-in:focus-within{border-color:var(--teal)}
.chat-in button{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--teal);transition:background .2s}
.chat-in button:hover{background:#00E6C41a}
.copts button[data-q]{border-color:#ffffff30;color:var(--fg)}

/* Comunitat: sortida en grup amb contingut */
.t-b .groupride .ui-card{background:#0B1624}
.t-b .groupride .ui-row b{font-size:14px}

/* Tallers: tancar l'ordre */
.ba .ui-bar i{transition:width .9s var(--ease),background .5s}
.ba .after{transition:opacity .5s,box-shadow .5s,border-color .5s}
.ba:not(.open) .when-open,.ba.open .when-done{display:none}
.ba.open .after{opacity:.55}
.ba.open .after .ui-bar i{width:100%;background:var(--danger)}
.ba.open .after b.teal{color:var(--fg)}
.ba.done .after{border-color:#00E6C455;box-shadow:0 20px 60px #00E6C41a}
.ba.done .arrow{animation:ping-once .7s var(--ease)}
.apply-grid .btn{margin-top:32px}
@keyframes ping-once{50%{scale:1.18}}

/* Peu: objectius tàctils més grans */
.footer nav a{display:inline-block;padding:6px 0}

/* Telèfon en horitzontal i pantalles baixes: text a l'esquerra, telèfon a la dreta */
@media (max-height:540px) and (orientation:landscape){
  .journey-sticky{min-height:0;padding:62px 0 6px}
  .journey .section-label{display:none}
  .journey-main{grid-template-columns:1fr auto;grid-template-rows:minmax(0,1fr);gap:24px}
  .j-copy{height:auto;min-height:0;align-self:stretch}
  .j-ch{justify-content:center}
  .j-ch .j-word{font-size:clamp(2rem,9vh,3.4rem)}
  .j-ch h3{font-size:1.05rem;margin-top:8px}
  .j-ch p:not(.j-word):not(.j-num),.j-ch .j-incl{display:none}
  .j-steps{margin-top:10px}.j-steps li:not(.cur){display:none}.j-steps li{font-size:14px;padding:0}
  .j-stage{padding:0}.j-stage .orbit,.j-float{display:none}
  .j-nav{margin-top:4px}.j-nav button{padding:8px 4px;justify-content:center}
  .j-nav button span:last-child{display:none}.j-nav button span:first-child{font-size:13px;color:inherit}
  .hero{min-height:auto}
  .hero-inner{padding-top:110px;padding-bottom:90px}
}

@media (max-width:1100px){
  .rc-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .rc-grid{grid-template-columns:1fr 1fr;gap:8px}
  .rc-grid div{padding:12px 14px}
  .profile-foot{flex-wrap:wrap}
  .profile-foot .legend{order:3;flex-basis:100%;margin-top:4px}
  .ride-log{margin-top:16px;padding-top:14px}
  .chat-in{margin:0 12px 12px}
  .chat-body{max-height:min(560px,62svh);padding:18px 16px}
}
@media (max-width:520px){
  .profile-foot{font-size:11px}
}
@media (max-width:420px){
  .converge{--k:.52}
  .stats{grid-template-columns:1fr 1fr;gap:14px 12px}
  .stat b{font-size:1.5rem}
  .ride-log li{flex-direction:column;align-items:flex-start;gap:4px}
  .ride-log li span{width:100%}
  .chip{font-size:12px;padding:8px 11px;gap:7px}
}
@media (max-width:380px){
  .mcta{padding:8px}
  .mcta span{display:none}
  .mcta .btn{flex:1;justify-content:center}
}