/* ───────────────────────────────────────────────────────────────
   seny · web N°01
   Concepte: la web és una nit. Comença a les fosques (Grafit),
   clareja amb el scroll (Calç) i torna a fer-se de nit al final.
   Títols i xifres: Archivo Expanded · Text: Instrument Sans ·
   Dades: JetBrains Mono. L'Alba només on cal atenció.
   ─────────────────────────────────────────────────────────────── */

@font-face{font-family:"Archivo Expanded";src:url("../fonts/archivo-expanded.woff2?v=31026b39") format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans.woff2?v=5f61273d") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-italic.woff2?v=e24d2717") format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2?v=c7a75c75") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  /* color */
  --grafit:#141414; --grafit-2:#1b1a19; --grafit-3:#262523; --line-d:#353330;
  --calc:#F1EFEA; --calc-2:#E7E3DB; --pedra:#C9C4BA; --pedra-2:#A19C93;
  --ink-2:#3A3833; --ink-3:#5E5B55; --soft-d:#D3CFC7;
  --alba:#FF5B1A; --alba-soft:#FF8A5C;
  /* tipus */
  --f-display:"Archivo Expanded","Arial Black","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-hero:clamp(2.6rem,8.1vw,10rem);
  --fs-d1:clamp(2.35rem,5.9vw,6.4rem);
  --fs-d2:clamp(2rem,4.1vw,4.4rem);
  --fs-d3:clamp(1.3rem,1.9vw,1.9rem);
  --fs-lead:clamp(1.08rem,1.25vw,1.36rem);
  --fs-mono:.75rem;
  /* espai */
  --pad:clamp(16px,3.4vw,56px);
  --hdr:76px;
  --sec:clamp(96px,12.5vw,200px);
  /* moviment */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.77,0,.18,1);
  --intro:1.5s;
}
html.intro-seen{--intro:.5s}

[data-theme=dark]{--bg:var(--grafit);--fg:var(--calc);--muted:var(--pedra-2);--soft:var(--soft-d);--line:var(--line-d);background:var(--bg);color:var(--fg);color-scheme:dark}
[data-theme=light]{--bg:var(--calc);--fg:var(--grafit);--muted:var(--ink-3);--soft:var(--ink-2);--line:var(--pedra);background:var(--bg);color:var(--fg);color-scheme:light}
[data-theme=pedra]{--bg:var(--pedra);--fg:var(--grafit);--muted:var(--ink-2);--soft:var(--ink-2);--line:#A9A397;background:var(--bg);color:var(--fg);color-scheme:light}

/* ─────────────── base ─────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--hdr);scrollbar-width:thin;scrollbar-color:#6b6760 transparent}
body{margin:0;background:var(--grafit);color:var(--calc);font:400 1.0625rem/1.55 var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
.site{position:relative;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
p,h1,h2,h3,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
b,strong{font-weight:700}
:focus-visible{outline:2px solid var(--alba);outline-offset:3px}
::selection{background:var(--alba);color:var(--grafit)}
main:focus{outline:none}
[hidden]{display:none!important}
.nw{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.skip{position:fixed;z-index:300;left:16px;top:12px;transform:translateY(-220%);background:var(--calc);color:var(--grafit);padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .3s var(--e-out)}
.skip:focus{transform:none}

/* ─────────────── tipografia ─────────────── */
.eyebrow{display:flex;align-items:center;gap:.9em;font:500 var(--fs-mono)/1.25 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(18px,2vw,28px)}
.eyebrow::before{content:"";flex:none;width:2.4em;height:1px;background:currentColor;opacity:.7}
.eyebrow--alba{color:var(--alba)}
.mono{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.d1,.d2,.d3{font-family:var(--f-display);font-weight:700;text-wrap:balance}
.d1{font-size:var(--fs-d1);line-height:.93;letter-spacing:-.05em}
.d2{font-size:var(--fs-d2);line-height:.95;letter-spacing:-.045em}
.d3{font-size:var(--fs-d3);line-height:1.05;letter-spacing:-.035em}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--soft);max-width:34em;text-wrap:pretty}
.lead b{color:var(--fg)}
.d1+.lead,.d2+.lead{margin-top:clamp(20px,2.2vw,32px)}

/* ─────────────── símbol: el punt volat ─────────────── */
.mark{--x:5px;display:inline-flex;align-items:center;gap:calc(var(--x)*1.2);flex:none;vertical-align:middle}
.mark i{display:block;width:var(--x);height:calc(var(--x)*7);background:currentColor}
.mark b{display:block;width:calc(var(--x)*1.2);height:calc(var(--x)*1.2);border-radius:50%;background:var(--alba)}
.mark--hdr{--x:4px}
.mark--app{--x:2px}
.mark--loader{--x:clamp(10px,1.3vw,15px)}
.mark--curtain{--x:7px}
.mark--marquee{--x:clamp(4px,.52vw,9px);margin-inline:.28em}
.mark--about{--x:clamp(12px,2.3vw,32px)}
.mark--giant{--x:clamp(16px,3.6vw,56px)}
.mark--foot{--x:.122em}
.mark--nf{--x:clamp(10px,2vw,26px);margin-inline:.12em}

/* ─────────────── botons i píndoles ─────────────── */
.btn{--btn-fill:var(--calc);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:0 1.75em;border-radius:999px;font:600 1rem/1 var(--f-text);text-decoration:none;white-space:nowrap;isolation:isolate;overflow:hidden;transition:color .5s var(--e-out),border-color .5s var(--e-out),transform .6s var(--e-out)}
.btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6em}
.btn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--btn-fill);transform:translateY(102%);transition:transform .6s var(--e-out)}
.btn:hover::after{transform:none}
.btn--alba{background:var(--alba);color:var(--grafit)}
[data-theme=light] .btn--alba,[data-theme=pedra] .btn--alba,.hdr[data-on=light] .btn--alba,.hdr[data-on=pedra] .btn--alba{--btn-fill:var(--grafit)}
[data-theme=light] .btn--alba:hover,[data-theme=pedra] .btn--alba:hover,.hdr[data-on=light] .btn--alba:hover,.hdr[data-on=pedra] .btn--alba:hover{color:var(--calc)}
.btn--ghost{border:1.5px solid currentColor;--btn-fill:var(--fg)}
.btn--ghost:hover{color:var(--bg)}
.btn--line{border:1px solid var(--line);--btn-fill:var(--calc)}
.btn--line:hover{color:var(--grafit);border-color:var(--calc)}
.btn--sm{min-height:44px;padding:0 1.25em;font-size:.9375rem}
.btn--lg{min-height:62px;padding:0 2.3em;font-size:1.0625rem}
.btn[disabled]{opacity:.6;pointer-events:none}

.pill{display:inline-flex;align-items:center;gap:.75em;width:max-content;max-width:100%;padding:.62em 1.05em;border:1px solid var(--line);border-radius:999px;font:500 var(--fs-mono)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.pill__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--alba);animation:pulse 2.6s ease-out infinite}
.pill--dark{background:var(--grafit);border-color:var(--grafit);color:var(--calc)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,91,26,.55)}70%,100%{box-shadow:0 0 0 10px rgba(255,91,26,0)}}

.link-arrow{display:inline-flex;align-items:center;gap:.55em;width:max-content;font-weight:600;font-size:1.0625rem;text-decoration:none;padding:6px 0;background:linear-gradient(var(--alba),var(--alba)) 0 100%/100% 2px no-repeat;transition:background-size .6s var(--e-out)}
.link-arrow:hover{background-size:0 2px;background-position:100% 100%}
.link-arrow__ico{display:inline-block;transition:transform .6s var(--e-out)}
.link-arrow:hover .link-arrow__ico,a:hover .link-arrow .link-arrow__ico{transform:translateX(6px)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 var(--fs-mono)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.8em 1.1em;border:1px solid var(--line);border-radius:999px}

/* ─────────────── loader i cortina ─────────────── */
.loader{display:none}
html.js:not(.intro-seen):not(.rm) .loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--grafit);color:var(--calc);clip-path:inset(0);animation:loaderOut 1s var(--e-io) 1.45s forwards}
.loader .mark i{transform:scaleY(0);transform-origin:50% 100%;animation:barUp .8s var(--e-out) .12s forwards}
.loader .mark i:last-child{animation-delay:.22s}
.loader .mark b{opacity:0;animation:dotDrop .85s linear .5s forwards}
.loader__time{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;color:var(--pedra-2);letter-spacing:.14em}
.loader__time span{grid-area:1/1}
.loader__time .t2{opacity:0;color:var(--calc);animation:show 0s linear 1s forwards}
.loader__time .t1{animation:hide 0s linear 1s forwards}
@keyframes loaderOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes barUp{to{transform:scaleY(1)}}
@keyframes dotDrop{0%{opacity:0;transform:translateY(-30vh)}12%{opacity:1}55%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}70%{transform:translateY(-16px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}84%{transform:translateY(0)}92%{transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}}
@keyframes show{to{opacity:1}}
@keyframes hide{to{opacity:0}}

.curtain{position:fixed;inset:0;z-index:95;display:none;place-items:center;background:var(--grafit);color:var(--calc);transform:translateY(102%);pointer-events:none;visibility:hidden}
html.js .curtain{display:grid}
html.js.intro-seen:not(.rm) .curtain{visibility:visible;transform:translateY(0);animation:curtainOut .85s var(--e-io) .06s forwards}
html.js .curtain.is-in{visibility:visible;animation:curtainIn .6s var(--e-io) forwards;pointer-events:auto}
@keyframes curtainOut{to{transform:translateY(-102%);visibility:hidden}}
@keyframes curtainIn{from{transform:translateY(102%)}to{transform:translateY(0)}}

/* ─────────────── capçalera ─────────────── */
.hdr{position:fixed;z-index:60;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);color:var(--calc);transition:transform .8s var(--e-out),color .4s ease}
.hdr::before{content:"";position:absolute;inset:0;background:var(--hdr-bg,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);opacity:0;transition:opacity .5s ease,background-color .4s ease}
.hdr.is-scrolled::before{opacity:1}
.hdr[data-on=dark]{color:var(--calc);--hdr-bg:rgba(20,20,20,.66);--fg:var(--calc);--bg:var(--grafit)}
.hdr[data-on=light]{color:var(--grafit);--hdr-bg:rgba(241,239,234,.74);--fg:var(--grafit);--bg:var(--calc)}
.hdr[data-on=pedra]{color:var(--grafit);--hdr-bg:rgba(201,196,186,.74);--fg:var(--grafit);--bg:var(--pedra)}
.hdr.is-hidden{transform:translateY(-105%)}
.hdr__in{position:relative;height:var(--hdr);display:flex;align-items:center;gap:clamp(16px,3vw,48px);padding-inline:max(var(--pad),env(safe-area-inset-left,0px)) max(var(--pad),env(safe-area-inset-right,0px))}
.hdr__logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none;min-height:44px}
.hdr__word{font:700 29px/.74 var(--f-display);letter-spacing:-.05em;transform:translateY(-1px)}
.hdr__nav{display:flex;gap:clamp(18px,2.3vw,36px);margin-left:auto}
.hdr__link{position:relative;font:500 var(--fs-mono)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:14px 0}
.hdr__link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--e-out)}
.hdr__link:hover::after,.hdr__link[aria-current]::after,.hdr__link.is-current::after{transform:scaleX(1);transform-origin:left}
.hdr__end{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px)}
.lang{display:flex;gap:2px;font:500 var(--fs-mono)/1 var(--f-mono);letter-spacing:.08em}
.lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;text-decoration:none;opacity:.55;transition:opacity .3s}
.lang a:hover,.lang a[aria-current]{opacity:1}
.lang a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.hdr__burger{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 2px;font:500 var(--fs-mono)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.hdr__burger-lines{display:grid;gap:6px;width:22px}
.hdr__burger-lines i{display:block;height:1.5px;background:currentColor;transition:transform .5s var(--e-out)}
.hdr__burger[aria-expanded=true] .hdr__burger-lines i:first-child{transform:translateY(3.75px) rotate(45deg)}
.hdr__burger[aria-expanded=true] .hdr__burger-lines i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 20px);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--e-io);overflow-y:auto}
.menu.is-open{clip-path:inset(0)}
.menu__list{border-top:1px solid var(--line)}
.menu__list li{opacity:0;transform:translateY(28px);transition:opacity .5s ease,transform .8s var(--e-out);transition-delay:calc(.18s + var(--i)*.05s)}
.menu.is-open .menu__list li{opacity:1;transform:none}
.menu__list a{display:flex;align-items:baseline;gap:14px;padding:.32em 0;border-bottom:1px solid var(--line);font:700 clamp(2rem,8.4vw,4.2rem)/1 var(--f-display);letter-spacing:-.05em;text-decoration:none}
.menu__list .mono{color:var(--muted);transform:translateY(-1.2em)}
.menu__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;color:var(--muted)}
.lang--big a{font-size:.95rem;padding:0 10px;color:var(--calc)}

/* ─────────────── hero (nit) ─────────────── */
.hero{position:relative;min-height:max(640px,100svh);display:flex;overflow:hidden}
.hero__media{position:absolute;top:0;right:0;bottom:0;width:50vw;overflow:hidden;background:#0b0a09}
.hero__img{width:100%;height:100%;object-fit:cover;transform:translate3d(calc(var(--hmx,0)*-16px),calc(var(--hp,0)*9vh + var(--hmy,0)*-12px),0) scale(calc(1.05 + var(--hp,0)*.07));transform-origin:50% 72%;will-change:transform}
.hero__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--grafit) 0%,rgba(20,20,20,.55) 16%,rgba(20,20,20,0) 44%),linear-gradient(0deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,0) 28%)}
.hero__glow{position:absolute;z-index:2;left:54%;top:71%;width:110%;aspect-ratio:1;transform:translate(-50%,-50%);translate:calc(var(--hmx,0)*26px) calc(var(--hmy,0)*18px);border-radius:50%;background:radial-gradient(closest-side,rgba(255,176,96,.30),rgba(255,140,64,.11) 46%,rgba(255,120,40,0) 72%);mix-blend-mode:screen;pointer-events:none;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.62;transform:translate(-50%,-50%) scale(.93)}}
.hero__content{position:relative;z-index:3;flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(20px,3.4vh,44px);padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(16px,4.5vh,60px));padding-bottom:clamp(28px,6vh,64px);transform:translate3d(0,calc(var(--hp,0)*-11vh),0);opacity:calc(1 - var(--hp,0)*1.15)}
.hero__title{align-self:center;font:700 var(--fs-hero)/.88 var(--f-display);letter-spacing:-.055em}
.hero__title .line,.shero__title .line{display:block;overflow:hidden;padding:0 .04em .07em 0;margin-bottom:-.07em}
.hero__title .line>span,.shero__title .line>span{display:inline-block}
.hero__foot{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:min(44vw,620px)}
.hero__lead{font-size:var(--fs-lead);line-height:1.45;color:var(--soft-d);max-width:27em;text-wrap:pretty}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__cue{position:absolute;right:max(var(--pad),env(safe-area-inset-right,0px));bottom:clamp(28px,6vh,64px);display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;color:var(--calc)}
.hero__cue i{display:block;width:1px;height:52px;background:rgba(241,239,234,.25);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--calc);animation:cue 2.4s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

html.js:not(.rm) .hero__title .line>span,html.js:not(.rm) .shero__title .line>span{transform:translateY(108%);animation:rise 1.15s var(--e-out) forwards;animation-delay:calc(var(--intro) + var(--i)*.09s)}
html.js:not(.rm) .hero__img{animation:sunrise 2.8s var(--e-out) both;animation-delay:calc(var(--intro) - .35s)}
html.js:not(.rm) .hero__glow{opacity:0;animation:fadeIn 2.6s ease forwards,breathe 7s ease-in-out infinite;animation-delay:calc(var(--intro) + .4s),calc(var(--intro) + 3s)}
html.js:not(.rm) .hero__pill,html.js:not(.rm) .hero__foot,html.js:not(.rm) .hero__cue{opacity:0;animation:fadeUp 1s var(--e-out) forwards;animation-delay:calc(var(--intro) + .45s)}
html.js:not(.rm) .hero__pill{animation-delay:calc(var(--intro) + .1s)}
@keyframes rise{to{transform:translateY(0)}}
@keyframes sunrise{from{filter:brightness(.16) saturate(.55)}to{filter:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ─────────────── cinta ─────────────── */
.marquee{position:relative;overflow:hidden;padding-block:clamp(22px,2.8vw,44px);border-block:1px solid var(--line-d)}
.marquee__track{display:flex;width:max-content;transform:translate3d(var(--mx,0px),0,0);will-change:transform}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__item{font:700 clamp(2.1rem,6.2vw,6.6rem)/1.02 var(--f-display);letter-spacing:-.05em;white-space:nowrap;padding-inline:.28em}

/* ─────────────── la idea: la foto s'explica sola ─────────────── */
.idea{position:relative}
.idea__frame{--ih:max(640px,104svh);position:relative;height:var(--ih);overflow:hidden}
.idea__pic{position:absolute;inset:0;overflow:hidden;background:#0b0a09}
.idea__plane{--fx:60%;position:absolute;left:var(--fx);top:50%;width:max(100%,calc(var(--ih)*1.7914));aspect-ratio:2576/1438;transform:translate3d(calc(var(--fx)*-1),calc(-50% + var(--iy,0px)),0) scale(var(--is,1));transform-origin:var(--fx) 50%;will-change:transform}
.idea__img{display:block;width:100%;height:100%}
.idea__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,20,20,.84) 0%,rgba(20,20,20,.38) 30%,rgba(20,20,20,0) 50%,rgba(20,20,20,0) 68%,rgba(20,20,20,.8) 100%),linear-gradient(90deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,0) 46%)}
.idea__text{position:absolute;z-index:3;left:0;right:0;top:calc(var(--hdr) + clamp(24px,6vh,72px))}
.idea__title{font:700 var(--fs-d1)/.95 var(--f-display);letter-spacing:-.05em;max-width:11em;text-wrap:balance}
.idea__lead{position:absolute;z-index:3;left:0;right:0;bottom:clamp(28px,7vh,80px)}
.idea__lead span{display:block;max-width:31em;font-size:var(--fs-lead);line-height:1.5;color:var(--calc);text-wrap:pretty}
.spot{position:absolute;z-index:2;left:var(--x);top:var(--y);width:0;height:0}
.spot__dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--alba);animation:pulse 2.6s ease-out infinite}
.spot__label{position:absolute;top:50%;display:inline-flex;align-items:center;white-space:nowrap;padding:.75em 1.1em;border-radius:999px;background:rgba(241,239,234,.95);color:var(--grafit);transform:translateY(-50%)}
.spot__label::before{content:"";position:absolute;top:50%;width:16px;height:1px;background:rgba(241,239,234,.95)}
.spot--son .spot__label{right:26px}
.spot--son .spot__label::before{left:100%}
.spot--phone .spot__label{left:26px}
.spot--phone .spot__label::before{right:100%}
html.js:not(.rm) [data-reveal=spots] .spot{opacity:0;transform:scale(.6);transition:opacity .7s var(--e-out),transform .9s var(--e-out)}
html.js:not(.rm) [data-reveal=spots] .spot--son{transition-delay:.3s}
html.js:not(.rm) [data-reveal=spots] .spot--phone{transition-delay:.65s}
html.js:not(.rm) [data-reveal=spots].is-in .spot{opacity:1;transform:none}

/* ─────────────── com funciona (horitzontal, una nit) ─────────────── */
.story{position:relative;height:450svh}
.story__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,2.2vh,28px);padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(0px,1vh,14px));padding-bottom:clamp(14px,3vh,34px);background:var(--grafit);color:var(--fg);transition:color .7s var(--e-out)}
.story.is-day{--fg:var(--grafit);--muted:var(--ink-3);--soft:var(--ink-2);--line:var(--pedra)}
.story__day{position:absolute;inset:0;background:var(--calc);opacity:var(--day,0);pointer-events:none}
.story__head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.story__heading .eyebrow{margin-bottom:12px;white-space:nowrap}
.story__h2{font:700 var(--fs-d3)/1 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.story__clock{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.clock{display:grid;justify-items:end;font:700 clamp(2.9rem,8vw,8.6rem)/.8 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.clock>span{grid-area:1/1;transition:opacity .6s ease,transform .8s var(--e-out)}
.clock__hello{font-size:.56em;align-self:end;white-space:nowrap;opacity:0;transform:translateY(30%)}
.story.is-hello .clock__time{opacity:0;transform:translateY(-30%)}
.story.is-hello .clock__hello{opacity:1;transform:none}
.story__viewport{position:relative;min-height:0;min-width:0}
.story__track{--gap:clamp(24px,6vw,110px);display:flex;gap:var(--gap);height:100%;padding-left:max(var(--pad),env(safe-area-inset-left,0px));transform:translate3d(var(--tx,0px),0,0);will-change:transform}
.panel{--w:min(84vw,1340px);flex:0 0 var(--w);height:100%;display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;opacity:.32;transition:opacity .8s var(--e-out)}
.panel.is-active{opacity:1}
.panel__media{position:relative;width:100%;aspect-ratio:4/3;max-height:100%;overflow:hidden;border-radius:6px;background:var(--grafit-2)}
.panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate3d(calc(var(--off,0)*-7%),0,0) scale(1.12)}
.panel__text{display:grid;gap:clamp(12px,1.7vw,22px);align-content:center;max-width:30em}
.panel__when{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--muted)}
.panel__when time{padding:.35em .7em;border:1px solid var(--line);border-radius:999px;color:var(--fg)}
.panel__num{color:var(--fg)}
.panel__title{font:700 var(--fs-d2)/.95 var(--f-display);letter-spacing:-.045em;text-wrap:balance}
.panel__body{font-size:var(--fs-lead);line-height:1.5;color:var(--soft);text-wrap:pretty}

/* panell 1: l'app */
.panel__media--app{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,#26231f,#161514 70%)}
.rosassa{position:absolute;display:block;aspect-ratio:1;border-radius:50%}
.rosassa i{position:absolute;left:50%;top:0;width:var(--rw,2px);height:50%;margin-left:calc(var(--rw,2px)/-2);transform:rotate(calc(var(--i)*30deg));transform-origin:50% 100%}
.rosassa i::before{content:"";position:absolute;left:0;top:0;width:100%;height:var(--rl,18%);background:currentColor;opacity:var(--ro,.22)}
.rosassa i.on::before{background:var(--alba);opacity:1}
.rosassa--bg{left:50%;top:50%;width:min(86%,560px);transform:translate(-50%,-50%);color:var(--calc);--rw:3px;--rl:13%;--ro:.18}
.app{position:relative;z-index:1;width:clamp(210px,40%,300px);aspect-ratio:9/16.5;border-radius:30px;background:#0d0d0c;border:1px solid #33312e;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 0 0 6px #191817;padding:26px 20px 20px;display:flex;flex-direction:column;gap:12px;color:var(--calc);font-size:.8rem;transform:scale(var(--app-s,1))}
.app__bar{display:flex;align-items:center;gap:7px;font:700 15px/.74 var(--f-display);letter-spacing:-.05em}
.app__status{margin-left:auto;width:22px;height:9px;border-radius:3px;border:1px solid #5a5650}
.app__label{color:var(--pedra-2);margin-top:6px;font-size:.62rem}
.app__time{font:700 clamp(2.4rem,4.4vw,3.6rem)/.85 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.app__days{display:flex;justify-content:space-between;font:500 .6rem/1 var(--f-mono);color:#6d6963}
.app__days .on{color:var(--calc)}
.app__rows{display:grid;margin-top:4px;border-top:1px solid #2c2a27}
.app__rows li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #2c2a27;font-size:.72rem;color:#c7c2b9}
.app__rows b{font:500 .62rem/1 var(--f-mono);letter-spacing:.04em;color:var(--calc);white-space:nowrap}
.app__switch{width:28px;height:16px;border-radius:999px;background:var(--calc);position:relative}
.app__switch::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--grafit)}
.app__btn{margin-top:auto;display:grid;place-items:center;min-height:38px;border-radius:999px;background:var(--calc);color:var(--grafit);font-weight:600;font-size:.78rem}

/* panell 2: l'alba */
.pm-a{filter:brightness(var(--dawn,1)) saturate(calc(.6 + var(--dawn,1)*.4));transition:filter .2s linear}
.pm-b{opacity:0;transition:opacity .9s var(--e-out)}
.story.is-tap .pm-b{opacity:1}
.resso{position:absolute;left:52.8%;top:63%;width:0;height:0;opacity:0;transition:opacity .4s}
.story.is-ring .resso{opacity:1}
.resso__l,.resso__r{position:absolute;top:0;display:flex;align-items:center;gap:clamp(6px,1vw,14px);transform:translateY(-50%)}
.resso__l{right:clamp(110px,15vw,230px);flex-direction:row-reverse}
.resso__r{left:clamp(110px,15vw,230px)}
.resso i{display:block;width:calc(5px - var(--i)*1px);height:clamp(40px,7vw,104px);background:var(--calc);border-radius:2px;opacity:0;animation:echo 1.1s ease-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes echo{0%{opacity:0;transform:scaleY(.4)}30%{opacity:.95;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.7)}}
.panel__tag{position:absolute;z-index:2;left:clamp(12px,1.6vw,22px);top:clamp(12px,1.6vw,22px);display:grid}
.tag{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;width:max-content;padding:.7em 1em;border-radius:999px;background:rgba(241,239,234,.92);color:var(--grafit);opacity:0;transform:translateY(-6px);transition:opacity .5s ease,transform .6s var(--e-out)}
.tag b{width:7px;height:7px;border-radius:50%;background:var(--alba);animation:pulse 1.1s ease-out infinite}
.story.is-ring .tag--ring,.story.is-tap .tag--snooze,.story.is-off .tag--off{opacity:1;transform:none}
.story.is-tap .tag--ring{opacity:0}
.alba{display:flex;align-items:flex-end;gap:clamp(6px,.8vw,10px);height:64px;margin-top:6px}
.alba i{position:relative;display:block;width:3px;height:100%;background:var(--line)}
.alba b{position:absolute;left:50%;bottom:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--alba);
  --arc:calc(1 - (var(--i) - (var(--n) - 1)/2)*(var(--i) - (var(--n) - 1)/2)/((var(--n) - 1)/2*(var(--n) - 1)/2));
  transform:translateY(calc(var(--sun,1)*var(--arc)*-54px));opacity:calc(.25 + var(--sun,1)*.75)}

/* panell 3: «Dot» */
.press{position:absolute;left:52.3%;top:41%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;opacity:0}
.story.is-off .press{animation:press 1.6s ease-out .1s 2}
@keyframes press{0%{opacity:.9;box-shadow:0 0 0 0 rgba(255,91,26,.7)}100%{opacity:0;box-shadow:0 0 0 70px rgba(255,91,26,0)}}

.story__rail{position:relative}
.story__hint{position:absolute;right:max(var(--pad),env(safe-area-inset-right,0px));bottom:calc(100% + 8px);display:flex;align-items:center;gap:10px;color:var(--muted);opacity:calc(1 - var(--hint,0));pointer-events:none}
.story__hint i{position:relative;display:block;width:1px;height:22px;background:currentColor;opacity:.5;overflow:hidden}
.story__hint i::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--fg);animation:cue 2.2s var(--e-io) infinite}
.rail{position:relative;height:40px}
.rail__line{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line);overflow:hidden}
.rail__fill{position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--q,0))}
.rail__dot{position:absolute;top:9px;left:calc(var(--q,0)*100%);width:11px;height:11px;margin:-5px 0 0 -5.5px;border-radius:50%;background:var(--alba)}
.rail__tick{position:absolute;top:24px;left:calc(var(--at)*100%);transform:translateX(calc(var(--at)*-100%));font:500 .72rem/1 var(--f-mono);letter-spacing:.06em;color:var(--muted)}
.rosassa--clock{position:relative;width:clamp(44px,5.2vw,84px);color:var(--fg);--rw:2px;--rl:22%;--ro:.4}
.rosassa--clock::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:38%;margin-left:-1px;background:var(--alba);transform-origin:50% 0;transform:rotate(calc(var(--rot,0deg) + 180deg))}

/* ─────────────── producte ─────────────── */
.product{padding-block:var(--sec) calc(var(--sec)*.8)}
.product__head{margin-bottom:clamp(40px,6vw,96px)}
.product__head .d1{max-width:11em}
.frame{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--calc-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.product__hero .frame{aspect-ratio:2.15/1}
[data-parallax] img{transform:translate3d(0,var(--py,0px),0) scale(1.14);will-change:transform}
.pitem{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;margin-top:clamp(72px,10vw,170px)}
.pitem__media{aspect-ratio:4/3}
.pitem--son .pitem__media{grid-column:1/8;grid-row:1}
.pitem--son .pitem__info{grid-column:8/13;grid-row:1}
.pitem--dot .pitem__media{grid-column:6/13;grid-row:1}
.pitem--dot .pitem__info{grid-column:1/6;grid-row:1}
.pitem__info{position:relative;z-index:2;padding-bottom:4px}
.pitem__name{font:700 clamp(4.6rem,14.6vw,17rem)/.78 var(--f-display);letter-spacing:-.065em;margin:clamp(6px,1vw,14px) 0 clamp(22px,2.4vw,34px)}
.pitem--son .pitem__name{margin-left:calc(clamp(40px,6.4vw,130px)*-1)}
.pitem__media img{transition:transform 1.4s var(--e-out),filter 1.8s var(--e-out)}
@media (hover:hover){.pitem__media.is-in:hover img{transform:scale(1.035)}}
.pitem__text{font-size:var(--fs-lead);line-height:1.5;color:var(--soft);max-width:22em;margin-bottom:24px;text-wrap:pretty}

/* revelats: l'element es veu sempre; quan entra, "es desperta" */
html.js:not(.rm) [data-reveal=lift]{opacity:.16;transform:translate3d(0,28px,0);transition:opacity 1.1s var(--e-out),transform 1.2s var(--e-out)}
html.js:not(.rm) [data-reveal=lift].is-in{opacity:1;transform:none}
html.js:not(.rm) [data-reveal=wake] img{filter:brightness(.42) saturate(.7);transform:scale(1.08);transition:filter 1.8s var(--e-out),transform 2s var(--e-out)}
html.js:not(.rm) [data-reveal=wake].is-in img{filter:none;transform:none}
html.js:not(.rm) [data-reveal=wake][data-parallax] img{transform:translate3d(0,var(--py,0px),0) scale(1.14);transition:filter 1.8s var(--e-out)}
html.js:not(.rm) [data-reveal=words] .w{opacity:.14;transform:translate3d(0,.16em,0);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out);transition-delay:calc(var(--wi)*55ms)}
html.js:not(.rm) [data-reveal=words].is-in .w{opacity:1;transform:none}
.w{display:inline-block}

/* ─────────────── programable ─────────────── */
.prog{padding-block:var(--sec)}
.prog__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:end;margin-bottom:clamp(40px,6vw,88px)}
.prog__head .eyebrow{grid-column:1/-1}
.prog__head .d1{grid-column:1/8}
.prog__head .lead{grid-column:8/13;margin:0}
.feat{border-top:1px solid var(--fg)}
.feat__row{display:grid;grid-template-columns:clamp(2.6rem,6vw,6rem) minmax(0,1fr) minmax(0,1.3fr);gap:12px 24px;align-items:baseline;padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--line);transition:background-color .5s var(--e-out),color .5s var(--e-out),padding .6s var(--e-out)}
.feat__n{color:var(--muted)}
.feat__name{font:700 var(--fs-d3)/1.05 var(--f-display);letter-spacing:-.035em}
.feat__text{color:var(--soft);font-size:1.0625rem;max-width:32em}
.feat__row--dot{background:var(--grafit);color:var(--calc);padding-inline:clamp(14px,1.8vw,28px);border-bottom-color:var(--grafit)}
.feat__row--dot .feat__text,.feat__row--dot .feat__n{color:var(--soft-d)}
@media (hover:hover){
  .feat__row:not(.feat__row--dot):hover{background:var(--calc-2);padding-inline:clamp(14px,1.8vw,28px)}
}

/* simulador */
.sim{margin-top:clamp(56px,8vw,120px);border-radius:10px;padding:clamp(22px,4vw,64px);display:grid;gap:clamp(28px,4vw,56px)}
.sim__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 40px;align-items:end}
.sim__head .eyebrow{grid-column:1/-1;margin:0}
.sim__title{font:700 var(--fs-d2)/.95 var(--f-display);letter-spacing:-.045em}
.sim__lead{color:var(--soft);font-size:var(--fs-lead);max-width:24em}
.sim__body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.5vw,80px);align-items:start}
html:not(.js) .sim__ctrl{display:none}
html:not(.js) .sim__body{grid-template-columns:1fr}
.sim__ctrl{display:grid;gap:24px}
.ctl{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px;transition:opacity .4s}
.ctl__lab{color:var(--muted);padding:0}
.ctl--row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:6px}
.ctl.is-off{opacity:.3;pointer-events:none}
.stepper{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:4px;border:1px solid var(--line);border-radius:999px}
.stepper__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:1.35rem;line-height:1;transition:background-color .3s}
.stepper__btn:hover{background:var(--grafit-3)}
.stepper__val{min-width:4.3ch;text-align:center;font:700 1.75rem/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.chipr input:focus-visible+span{outline:2px solid var(--alba);outline-offset:2px}
.ctl--two{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:flex-start}
.ctl--two .range{min-height:54px}
.ctl--two>.ctl{flex:1 1 220px}
.ctl--two>.ctl:first-child{flex:0 0 auto}
.ctl--pauses{gap:12px}
.pz{display:flex;flex-wrap:wrap;gap:8px}
.pz__item{display:inline-flex;align-items:center;gap:2px;padding:4px 4px 4px 14px;border:1px solid var(--line);border-radius:999px;transition:border-color .3s,background-color .3s}
.pz__item:hover{border-color:var(--fg)}
.pz__item.is-new{animation:pzIn .5s var(--e-out)}
@keyframes pzIn{from{opacity:0;transform:scale(.85)}}
.pz__n{color:var(--muted);margin-right:4px}
.pz__btn,.pz__del{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:1.15rem;line-height:1;transition:background-color .3s,color .3s}
.pz__btn:hover,.pz__del:hover{background:var(--grafit-3)}
.pz__btn[aria-disabled=true]{opacity:.3;cursor:default}
.pz__btn[aria-disabled=true]:hover{background:none}
.pz__del{color:var(--muted);font-size:1rem}
.pz__val{min-width:4.8ch;text-align:center;font:700 1.05rem/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pz__row{display:flex;flex-wrap:wrap;gap:8px}
.pz__add{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 1.15em;border:1px dashed var(--line);border-radius:999px;font-size:.9375rem;transition:border-color .3s,background-color .3s}
.pz__add:hover{border-color:var(--fg);border-style:solid}
.pz__add[aria-disabled=true]{opacity:.35;cursor:default}
.pz__empty{font-size:.95rem;color:var(--muted)}
.pz__presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.pz__presets>.mono{color:var(--muted);margin-right:4px}
.pz__preset{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 1em;border-radius:999px;background:var(--grafit-3);font-size:.875rem;transition:background-color .3s,color .3s}
.pz__preset span{font:500 .72rem/1 var(--f-mono);color:var(--muted);transition:color .3s}
.pz__preset:hover{background:var(--calc);color:var(--grafit)}
.pz__preset:hover span{color:var(--ink-3)}
.range{display:flex;align-items:center;gap:16px}
.range input{flex:1;min-width:0;height:32px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.range input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(var(--fg),var(--fg)) 0 0/var(--fill,30%) 100% no-repeat,var(--line)}
.range input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--fg);border:0;transition:transform .3s var(--e-out)}
.range input:active::-webkit-slider-thumb{transform:scale(1.18)}
.range input::-moz-range-track{height:2px;background:var(--line);border:0}
.range input::-moz-range-progress{height:2px;background:var(--fg)}
.range input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--fg);border:0}
.range input:focus-visible{outline:none}
.range input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--alba);outline-offset:3px}
.range input:focus-visible::-moz-range-thumb{outline:2px solid var(--alba);outline-offset:3px}
.range output{min-width:5ch;text-align:right;font:500 .9rem/1 var(--f-mono);font-variant-numeric:tabular-nums}
.switch{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:44px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch__ui{position:relative;flex:none;width:48px;height:28px;border-radius:999px;background:var(--grafit-3);border:1px solid var(--line);transition:background-color .35s}
.switch__ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--pedra-2);transition:transform .45s var(--e-out),background-color .35s}
.switch input:checked+.switch__ui{background:var(--calc);border-color:var(--calc)}
.switch input:checked+.switch__ui::after{transform:translateX(20px);background:var(--grafit)}
.switch input:focus-visible+.switch__ui{outline:2px solid var(--alba);outline-offset:2px}
.switch .ctl__lab{color:var(--fg)}
.tone-ico{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.is-playing .tone-ico{width:9px;height:9px;border:0;background:currentColor;border-radius:1px}
.sim__out{display:grid;gap:26px;min-width:0}
.tl{position:relative;height:104px;margin:6px 0 34px;border-bottom:1px solid var(--line)}
.tl>span{transition:left .6s var(--e-out),width .6s var(--e-out)}
.tl__light{position:absolute;left:0;right:0;bottom:0;height:86px;background:linear-gradient(90deg,rgba(241,239,234,.03) 0%,rgba(241,239,234,.62) var(--a,40%),rgba(241,239,234,.62) 100%);clip-path:polygon(0 100%,var(--a,40%) 0,100% 0,100% 100%);transition:clip-path .6s var(--e-out)}
.tl__ring,.tl__last{position:absolute;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--alba)}
.tl__last--dot{right:0;width:auto;margin-left:-6px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--alba) 0 7px,transparent 7px 12px)}
.tl__last--dot::after{content:"";position:absolute;right:-9px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--calc);box-shadow:inset 0 0 0 6px var(--grafit),0 0 0 1px var(--calc)}
.tl__lab{position:absolute;bottom:-28px;font:500 .72rem/1 var(--f-mono);letter-spacing:.04em;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tl__lab--mid,.tl__lab--end{transform:translateX(-50%)}
.tl__lab--end{color:var(--fg)}
.sim__events{border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:5em minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}
.ev time{font:500 .85rem/1.5 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.ev--ring span::before,.ev--last span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:11px;border-radius:50%;background:var(--alba);vertical-align:.12em}
.ev--dawn span::before{content:"";display:inline-block;width:14px;height:7px;margin-right:11px;background:linear-gradient(90deg,rgba(241,239,234,.1),var(--calc));clip-path:polygon(0 100%,100% 0,100% 100%);vertical-align:.12em}
.ev--last{font-weight:600}
.sim__sum{font-size:1.06rem;line-height:1.55;text-wrap:pretty}
.sim__note{font-size:.85rem;color:var(--muted)}

/* ─────────────── acabats ─────────────── */
.finish{padding-block:var(--sec)}
.finish__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,96px);align-items:center}
.finish__opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.swatch{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 1.5em 0 .6em;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:1.0625rem;transition:border-color .35s,background-color .35s}
.swatch__chip{flex:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,20,20,.16)}
.swatch--calc .swatch__chip{background:radial-gradient(circle at 35% 30%,#fbfaf7,#e2ddd4)}
.swatch--grafit .swatch__chip{background:radial-gradient(circle at 35% 30%,#4a4846,#1d1c1b)}
.swatch:hover{border-color:var(--fg)}
.swatch[aria-pressed=true]{border-color:var(--fg);background:var(--calc-2)}
.finish__voted{min-height:1.4em;margin-top:16px;color:var(--muted)}
.finish__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--calc-2)}
.finish__img{position:absolute;inset:0;z-index:0;clip-path:circle(0% at var(--cx,82%) var(--cy,78%))}
.finish__img img{width:100%;height:100%;object-fit:cover}
.finish__img.is-on{z-index:1;clip-path:circle(150% at var(--cx,82%) var(--cy,78%));transition:clip-path 1.2s var(--e-io)}
.finish__img.is-under{z-index:0;clip-path:circle(150% at 50% 50%)}

/* ─────────────── preguntes ─────────────── */
.faq{padding-block:var(--sec)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,96px)}
.faq__head{position:sticky;top:calc(var(--hdr) + 32px);align-self:start}
.faq__list{border-top:1px solid var(--fg)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:clamp(20px,2.2vw,30px) 0;cursor:pointer;list-style:none;font:700 clamp(1.12rem,1.6vw,1.55rem)/1.18 var(--f-display);letter-spacing:-.03em}
.qa summary::-webkit-details-marker{display:none}
.qa__ico{position:relative;flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;transition:transform .6s var(--e-out),background-color .35s,color .35s,border-color .35s}
.qa__ico::before,.qa__ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor}
.qa__ico::after{transform:rotate(90deg)}
.qa summary:hover .qa__ico{border-color:var(--fg)}
.qa[open] .qa__ico{transform:rotate(135deg);background:var(--fg);color:var(--bg);border-color:var(--fg)}
.qa__a{overflow:hidden}
.qa__a p{padding:0 0 clamp(22px,2.4vw,32px);max-width:38em;color:var(--soft);font-size:1.0625rem;text-wrap:pretty}

/* ─────────────── qui som ─────────────── */
.about{padding-block:var(--sec);border-top:1px solid var(--line)}
.about__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,6vw,120px);align-items:center}
.about__mark{display:grid;place-items:center;aspect-ratio:1;border-radius:6px;background:var(--grafit);color:var(--calc)}
html.js:not(.rm) [data-reveal=drop] .mark i{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.1s var(--e-out)}
html.js:not(.rm) [data-reveal=drop] .mark i:last-child{transition-delay:.1s}
html.js:not(.rm) [data-reveal=drop] .mark b{opacity:0}
html.js:not(.rm) [data-reveal=drop].is-in .mark i{transform:none}
html.js:not(.rm) [data-reveal=drop].is-in .mark b{animation:dotDrop .9s linear .45s forwards}
.about__small{margin-top:18px;color:var(--muted);font-size:.98rem;max-width:36em}
.about .link-arrow{margin-top:30px}

/* ─────────────── llista d'espera ─────────────── */
.list{padding-block:var(--sec)}
.list__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,6vw,120px);align-items:center}
.list__main .d1{max-width:9em}
.list__media{aspect-ratio:1;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.list__media img{width:100%;height:100%;object-fit:cover}
.form{display:grid;gap:24px;max-width:36rem;margin-top:clamp(30px,3.4vw,48px)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.field__lab{color:var(--muted);padding:0}
.field__input{width:100%;min-height:60px;padding:0 0 4px;background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0;color:var(--fg);font:400 clamp(1.2rem,2vw,1.6rem)/1.2 var(--f-text);transition:border-color .35s}
.field__input::placeholder{color:#76726b}
.field__input:focus{outline:none;border-bottom-color:var(--fg)}
.field__input:focus-visible{box-shadow:0 2px 0 0 var(--alba)}
.field__input[aria-invalid=true]{border-bottom-color:var(--alba-soft)}
.chipr-group{display:flex;flex-wrap:wrap;gap:8px}
.chipr{position:relative;display:inline-flex}
.chipr input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chipr span{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1em;border:1px solid var(--line);border-radius:999px;font-size:.9375rem;transition:background-color .35s,color .35s,border-color .35s}
.chipr:hover span{border-color:var(--fg)}
.chipr input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.check{position:relative;display:flex;align-items:flex-start;gap:14px;color:var(--soft);font-size:1rem}
.check__text{cursor:pointer}
.check__text a,.form__privacy a,.form__basic a{color:var(--fg);text-decoration-color:var(--alba)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:0;border:1.5px solid var(--line);border-radius:7px;cursor:pointer;transition:background-color .3s,border-color .3s}
.check__box::after{content:"";width:11px;height:6px;margin-top:-3px;border-left:2px solid var(--grafit);border-bottom:2px solid var(--grafit);transform:rotate(-45deg) scale(0);transition:transform .35s var(--e-out)}
.check:hover .check__box{border-color:var(--fg)}
.check input:checked+.check__box{background:var(--calc);border-color:var(--calc)}
.check input:checked+.check__box::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible+.check__box{outline:2px solid var(--alba);outline-offset:2px}
.check.is-invalid .check__box{border-color:var(--alba-soft)}
.form__end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:4px}
.form__status{font-size:1rem;min-height:1.5em;max-width:24em}
.form__status.is-ok{color:var(--calc);font-weight:600}
.form__status.is-err{color:var(--alba-soft)}
.form__privacy{font-size:.88rem;color:var(--muted);max-width:34em}
.form__basic{margin-top:-10px;color:var(--muted);font-size:.85rem;max-width:36rem}
.form__basic summary{display:inline-flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;list-style:none}
.form__basic summary::-webkit-details-marker{display:none}
.form__basic summary::after{content:"+";font:500 1rem/1 var(--f-mono)}
.form__basic[open] summary::after{content:"−"}
.form__basic dl{display:grid;gap:8px;margin:6px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:8px}
.form__basic dl div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px}
.form__basic dt{color:var(--fg);font-weight:600}
.form__basic dd{margin:0}
mark.todo{background:rgba(255,91,26,.2);color:inherit;padding:.05em .35em;border-radius:3px;font:500 .85em/1.4 var(--f-mono)}

/* ─────────────── peu ─────────────── */
.foot{position:relative;padding-top:clamp(80px,10vw,150px);overflow:hidden}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px 64px;align-items:start}
.foot__tag{font:700 var(--fs-d2)/.95 var(--f-display);letter-spacing:-.045em;max-width:7.5em}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.foot__h{color:var(--muted);margin-bottom:12px}
.foot__cols a{display:inline-block;padding:7px 0;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 1px no-repeat;transition:background-size .5s var(--e-out)}
.foot__cols a:hover,.foot__cols a[aria-current]{background-size:100% 1px}
.foot__brand{margin-top:clamp(56px,9vw,150px);padding-inline:max(var(--pad),env(safe-area-inset-left,0px)) max(var(--pad),env(safe-area-inset-right,0px));line-height:.74}
.foot__lockup{display:flex;align-items:center;gap:.16em;font:700 var(--foot-fs,26vw)/.74 var(--f-display);letter-spacing:-.06em;white-space:nowrap;width:max-content}
.foot__word{display:block;transform:translateY(-.02em)}
html.js:not(.rm) .foot__brand .foot__lockup{transform:translate3d(0,calc((1 - var(--fb,1))*28%),0);opacity:calc(.25 + var(--fb,1)*.75)}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;margin-top:clamp(28px,3vw,48px);padding-block:26px calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--muted)}
.foot__bottom a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--fg)}
.foot__now time{color:var(--fg);font-variant-numeric:tabular-nums}

/* ─────────────── gra i cursor ─────────────── */
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.4s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-2%,4%)}67%{transform:translate(5%,1%)}83%{transform:translate(-3%,-3%)}}
@media (hover:none){.grain{animation:none;opacity:.055}}

.cursor{display:none}
html.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:90;pointer-events:none;mix-blend-mode:difference;color:#fff}
html.has-cursor .cursor.is-hidden{opacity:0}
.cursor__dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate3d(var(--cx,-99px),var(--cy,-99px),0);transition:opacity .3s,width .4s var(--e-out),height .4s var(--e-out),left .4s var(--e-out),top .4s var(--e-out)}
.cursor__ring{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;transform:translate3d(var(--rx,-99px),var(--ry,-99px),0) scale(var(--rs,1));transition:width .5s var(--e-out),height .5s var(--e-out),margin .5s var(--e-out),background-color .4s,border-color .4s}
.cursor__label{font:500 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .3s;white-space:nowrap}
.cursor.is-link .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:#fff}
.cursor.is-link .cursor__dot{opacity:0}
.cursor.is-label .cursor__ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff;border-color:#fff}
.cursor.is-label .cursor__label{opacity:1;color:#000}
.cursor.is-label .cursor__dot{opacity:0}
.cursor.is-text{opacity:0}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor input[type=email],html.has-cursor input[type=text]{cursor:text!important}

/* ─────────────── pàgina seny ─────────────── */
.shero{min-height:max(640px,100svh);display:flex;align-items:center;padding-block:calc(var(--hdr) + 48px) 72px}
.shero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,96px);align-items:center;width:100%}
.shero__title{font:700 var(--fs-hero)/.88 var(--f-display);letter-spacing:-.055em;margin-bottom:clamp(26px,3vw,44px)}
.shero__mark{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);border-radius:6px}
.shero__mark .mark b{transform:translate3d(var(--fx,0px),var(--fy,0px),0)}
html.js:not(.rm) .shero__mark .mark i{transform:scaleY(0);transform-origin:50% 100%;animation:barUp 1s var(--e-out) forwards;animation-delay:calc(var(--intro) + .1s)}
html.js:not(.rm) .shero__mark .mark i:last-child{animation-delay:calc(var(--intro) + .2s)}
html.js:not(.rm) .shero__mark .mark b{opacity:0;animation:dotDropB .9s linear forwards;animation-delay:calc(var(--intro) + .55s)}
@keyframes dotDropB{0%{opacity:0;translate:0 -30vh}12%{opacity:1}55%{translate:0 0}70%{translate:0 -16px}84%{translate:0 0}92%{translate:0 -4px}100%{opacity:1;translate:0 0}}
html.js:not(.rm) .shero .lead,html.js:not(.rm) .shero .eyebrow{opacity:0;animation:fadeUp 1s var(--e-out) forwards;animation-delay:calc(var(--intro) + .4s)}

.sword{position:relative;padding-block:var(--sec)}
.sword__stage{position:relative}
.sword__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,96px);align-items:center;width:100%}
.sword__big{font:700 clamp(3.6rem,11.6vw,12.6rem)/.9 var(--f-display);letter-spacing:-.055em;white-space:nowrap;justify-self:end}
.sword__dis{display:inline-block;opacity:.25;transition:opacity 1.4s var(--e-out) .35s}
.sword__seny{display:inline-block;position:relative}
.sword__seny::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.06em;background:var(--alba);transform-origin:0 50%;transition:transform 1.2s var(--e-out) .9s}
html.js:not(.rm) .sword__big:not(.is-in) .sword__dis{opacity:1}
html.js:not(.rm) .sword__big:not(.is-in) .sword__seny::after{transform:scaleX(0)}

.ssym{padding-block:var(--sec)}
.ssym__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:center}
.ssym__word{font:700 clamp(3rem,7.6vw,8.4rem)/1 var(--f-display);letter-spacing:-.05em;white-space:nowrap}
.ssym__fade{transition:opacity 1.4s var(--e-out)}
.ssym__dot{display:inline-block;width:.15em;height:.15em;margin:0 .035em 0 .085em;border-radius:50%;background:var(--alba);vertical-align:.283em;transition:transform 1.4s var(--e-out)}
html.js:not(.rm) .ssym.is-in .ssym__fade{opacity:.2}
html.js:not(.rm) .ssym__dot{transform:scale(.55)}
html.js:not(.rm) .ssym.is-in .ssym__dot{transform:none}
.ssym__diagram{display:flex;justify-content:flex-start;gap:clamp(22px,3vw,44px);margin-top:clamp(36px,4.4vw,64px)}
.ssym__col{display:grid;justify-items:center;gap:16px;font:500 var(--fs-mono)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ssym__col em{font-style:normal}
.ssym__bar{display:block;width:clamp(14px,1.5vw,22px);height:clamp(98px,10.5vw,154px);background:var(--grafit)}
.ssym__col--mid{grid-template-rows:1fr auto}
.ssym__pt{align-self:center;display:block;width:clamp(17px,1.8vw,26px);aspect-ratio:1;border-radius:50%;background:var(--alba)}
.ssym__col--mid em{color:var(--grafit);font-weight:700}

.srules{padding-block:var(--sec)}
.rules{margin-top:clamp(40px,6vw,88px);border-top:1px solid var(--fg)}
.rule{display:grid;grid-template-columns:clamp(2.6rem,6vw,6rem) minmax(0,1fr) minmax(0,1fr);gap:12px 24px;align-items:baseline;padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--line)}
.rule__n{color:var(--muted)}
.rule__t{font:700 var(--fs-d3)/1.05 var(--f-display);letter-spacing:-.035em}
.rule__d{color:var(--soft);font-size:var(--fs-lead);max-width:26em}

.swhy{padding-block:var(--sec)}
.swhy__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,120px);align-items:center}
.swhy__media{aspect-ratio:1;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.swhy__media img{width:100%;height:100%;object-fit:cover}

.scoll{padding-block:var(--sec)}
.ccard{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);margin-top:clamp(40px,5vw,80px);border-radius:8px;overflow:hidden;background:var(--calc-2);text-decoration:none;color:var(--grafit)}
.ccard__media{aspect-ratio:16/10;border-radius:0}
.ccard__media img{transition:transform 1.4s var(--e-out),filter 1.8s var(--e-out)}
.ccard:hover .ccard__media img{transform:scale(1.04)}
.ccard__info{display:grid;align-content:center;justify-items:start;gap:16px;padding:clamp(24px,4vw,60px)}
.ccard__info .eyebrow{margin:8px 0 0}
.ccard__name{font:700 clamp(2.6rem,5.2vw,5.6rem)/.9 var(--f-display);letter-spacing:-.05em}
.ccard__text{font-size:var(--fs-lead);color:var(--ink-2)}
.ccard .link-arrow{margin-top:10px}

.nf{min-height:100svh;display:grid;place-items:center;padding-block:48px}
.nf__in{display:grid;gap:18px;justify-items:start}
.nf__code{display:flex;align-items:center;font:700 clamp(6rem,22vw,20rem)/.8 var(--f-display);letter-spacing:-.06em;margin-bottom:24px}
.nf__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;font:700 clamp(1.3rem,2.6vw,2.2rem)/1.1 var(--f-display);letter-spacing:-.035em}
.nf__line .link-arrow{font:600 1rem/1 var(--f-text);letter-spacing:0}

/* ─────────────── pàgines legals ─────────────── */
.lhero{padding-block:calc(var(--hdr) + clamp(48px,10vh,120px)) clamp(56px,8vw,110px)}
.lhero__title{font:700 var(--fs-d1)/.93 var(--f-display);letter-spacing:-.05em;margin-bottom:clamp(20px,2.4vw,32px)}
.lhero .lead{max-width:38em}
.ltext{padding-block:clamp(56px,8vw,120px) var(--sec)}
.ltext__grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(32px,6vw,120px);align-items:start}
.ltoc{position:sticky;top:calc(var(--hdr) + 28px)}
.ltoc__h{color:var(--muted);margin-bottom:14px}
.ltoc ol{border-top:1px solid var(--fg)}
.ltoc a{display:flex;gap:14px;align-items:baseline;min-height:44px;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:.95rem;transition:padding .45s var(--e-out)}
.ltoc a:hover{padding-left:8px}
.ltoc .mono{color:var(--muted)}
.ltext__body{max-width:44em}
.lsec{padding-bottom:clamp(32px,4vw,52px);scroll-margin-top:calc(var(--hdr) + 24px)}
.lsec+.lsec{padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--line)}
.lsec__t{display:flex;gap:16px;align-items:baseline;font:700 var(--fs-d3)/1.1 var(--f-display);letter-spacing:-.035em;margin-bottom:18px}
.lsec__t .mono{color:var(--muted)}
.lsec p{margin-top:14px;color:var(--soft);font-size:1.0625rem;line-height:1.65;text-wrap:pretty}
.lsec__t+p{margin-top:0}
.lsec a{color:var(--fg);text-decoration-color:var(--alba)}
.lul{display:grid;gap:10px;margin-top:14px}
.lul li{position:relative;padding-left:22px;color:var(--soft);font-size:1.0625rem;line-height:1.6}
.lul li::before{content:"";position:absolute;left:2px;top:.8em;width:9px;height:1px;background:var(--fg)}
.ldl{display:grid;margin-top:16px;border-top:1px solid var(--line)}
.ldl div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.ldl dt{color:var(--muted);padding-top:.3em}
.ldl dd{margin:0;font-size:1.0625rem}
.ltext__date{margin-top:clamp(28px,3vw,44px);color:var(--muted)}

/* ─────────────── responsive ─────────────── */
@media (max-width:1100px){
  .prog__head .d1{grid-column:1/-1}
  .prog__head .lead{grid-column:1/-1;margin-top:24px}
  .sim__body{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
}
@media (max-width:960px){
  .hdr__nav,.hdr__lang{display:none}
  .hdr__burger{display:inline-flex}
  .hdr__end{margin-left:auto}
}
@media (max-width:899px){
  :root{--hdr:64px}
  .hdr__word{font-size:26px}
  .hero{flex-direction:column;min-height:100svh}
  .hero__media{position:absolute;inset:0 0 auto 0;width:100%;height:78svh}
  .hero__media::before{background:linear-gradient(180deg,rgba(20,20,20,.72) 0%,rgba(20,20,20,0) 30%,rgba(20,20,20,0) 62%,var(--grafit) 100%)}
  .hero__glow{top:68%}
  .hero__content{grid-template-rows:auto auto 1fr auto;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 14px)}
  .hero__title{align-self:start;font-size:clamp(2.15rem,10.3vw,4.6rem);line-height:.9}
  .site[data-lang=en] .hero__title{font-size:clamp(2rem,9.5vw,4.3rem)}
  .hero__foot{grid-row:4;max-width:none;gap:20px}
  .hero__lead{font-size:1.05rem}
  .hero__ctas{width:100%}
  .hero__ctas .btn{flex:1 1 auto}
  .hero__cue{display:none}
  .idea__frame{height:auto;overflow:visible}
  .idea__pic{position:relative;inset:auto;height:86svh;min-height:520px}
  .idea__plane{--fx:72.5%;width:max(100%,calc(max(86svh,520px)*1.7914))}
  .idea__shade{background:linear-gradient(180deg,rgba(20,20,20,.86) 0%,rgba(20,20,20,.32) 34%,rgba(20,20,20,0) 50%,rgba(20,20,20,0) 78%,var(--grafit) 100%)}
  .idea__text{top:calc(var(--hdr) + 14px)}
  .idea__title{font-size:clamp(2rem,9vw,3.4rem)}
  .idea__lead{position:static;padding-block:8px 72px}
  .idea__lead span{font-size:1.05rem}
  .spot__label{white-space:normal;width:max-content;max-width:min(52vw,210px);line-height:1.3;padding:.7em 1em;border-radius:18px}
  .spot--son .spot__label{right:auto;left:26px}
  .spot--son .spot__label::before{left:auto;right:100%}
  .spot--phone .spot__label{left:auto;right:26px}
  .spot--phone .spot__label::before{right:auto;left:100%}
  .ltext__grid{grid-template-columns:1fr}
  .ltoc{position:static}
  .ldl div{grid-template-columns:1fr;gap:4px}
  .story{height:480svh}
  .story__head{align-items:flex-start}
  .story__h2{font-size:1.15rem;max-width:9em}
  .story__heading .eyebrow{margin-bottom:8px}
  .clock{font-size:clamp(2.2rem,10.5vw,4.2rem)}
  .clock__hello{white-space:normal;text-align:right;font-size:.5em;line-height:.95;max-width:5.4em}
  .rosassa--clock{display:none}
  .story__track{--gap:var(--pad)}
  .panel{--w:calc(100vw - 2*var(--pad));grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-content:center;gap:clamp(14px,2.4vh,22px)}
  .panel__media{max-height:44svh;aspect-ratio:auto;height:100%;min-height:200px}
  .panel__text{gap:10px;max-width:none}
  .panel__title{font-size:clamp(1.7rem,8vw,2.6rem)}
  .panel__body{font-size:1rem}
  .alba{height:40px}
  .alba b{transform:translateY(calc(var(--sun,1)*var(--arc)*-30px))}
  .app{width:auto;height:92%;aspect-ratio:9/16.5;padding:18px 14px 14px;gap:8px;border-radius:22px;font-size:.7rem}
  .app__time{font-size:2.2rem}
  .app__rows li{padding:6px 0}
  .resso__l{right:24vw}.resso__r{left:24vw}
  .resso i{height:12vw}
  .product__hero .frame{aspect-ratio:4/3}
  .pitem{grid-template-columns:1fr;margin-top:clamp(64px,14vw,120px);row-gap:6px}
  .pitem--son .pitem__media,.pitem--son .pitem__info,.pitem--dot .pitem__media,.pitem--dot .pitem__info{grid-column:1;grid-row:auto}
  .pitem__name{font-size:clamp(4.4rem,28vw,9rem);margin-top:.06em}
  .pitem__info{padding-top:22px}
  .pitem--son .pitem__name{margin-left:0}
  .feat__row{grid-template-columns:2.6rem minmax(0,1fr)}
  .feat__text{grid-column:2}
  .sim__head{grid-template-columns:1fr}
  .finish__grid,.faq__grid,.about__grid,.list__grid,.swhy__grid,.ssym__grid,.shero__grid,.sword__grid{grid-template-columns:1fr}
  .faq__head{position:static}
  .about__mark{max-width:300px;width:62%}
  .list__media{order:-1;width:72%;justify-self:center}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shero__mark{width:64%;max-width:320px;order:-1}
  .shero__title{font-size:clamp(2.6rem,13vw,5.4rem)}
  .sword__big{justify-self:start;font-size:clamp(3.4rem,19vw,7rem)}
  .rule{grid-template-columns:2.6rem minmax(0,1fr)}
  .rule__d{grid-column:2}
  .ccard{grid-template-columns:1fr}
  .swhy__media{width:80%;justify-self:center}
}
@media (max-width:520px){
  .hdr__burger-label{display:none}
  .btn{min-height:52px;padding:0 1.35em}
  .btn--sm{min-height:44px;padding:0 1.05em}
  .foot__cols{grid-template-columns:1fr 1fr}
  .chipr span{padding:0 .9em}
  .pz__item{padding-left:12px}
  .pz__btn,.pz__del{width:34px;height:34px}
  .tl__lab--mid{display:none}
}
@media (max-height:700px) and (min-width:900px){
  .panel__body{font-size:1rem}
  .panel__title{font-size:clamp(1.8rem,3.4vw,3.2rem)}
  .clock{font-size:clamp(2.6rem,6.4vw,6rem)}
}

/* ─────────────── sense JS o amb moviment reduït: tot estàtic ─────────────── */
html:not(.js) .story,html.rm .story{height:auto}
html:not(.js) .story__stage,html.rm .story__stage{position:relative;height:auto;display:block;padding-block:var(--sec)}
html:not(.js) .story__track,html.rm .story__track{flex-direction:column;transform:none;padding-right:max(var(--pad),env(safe-area-inset-right,0px));gap:72px;margin-top:48px}
html:not(.js) .panel,html.rm .panel{--w:100%;opacity:1;height:auto}
html:not(.js) .panel__media,html.rm .panel__media{max-height:none;height:auto;aspect-ratio:4/3}
html:not(.js) .story__clock,html.rm .story__clock,html:not(.js) .story__rail,html.rm .story__rail,html:not(.js) .story__day,html.rm .story__day,html:not(.js) .resso,html.rm .resso{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grain{animation:none}
}