:root {
  --sc-canvas:      #08090b;   
  --sc-surface:     #101217;   
  --sc-ink:         #f4f2ef;   
  --sc-ink-soft:    #9a9ba1;   
  --sc-accent:      #d8ff3e;   
  --sc-accent-ink:  #08090b;   
  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);
  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;
  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;
  --sc-measure: 62ch;
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;
  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }
.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }
[data-sc-pan] { display: flex; will-change: transform; }
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }
[data-sc-mode="worldflight"] { position: relative; }
.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
video[data-sc-scrub].sc-has-clip { opacity: 1; }
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }
.sc-world__spacer { pointer-events: none; }
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: reduce) {
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  [data-sc-reveal] { clip-path: none !important; }
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Shantell";
  src: url("/fonts/shantell.woff2") format("woff2");
  font-weight: 500 800; font-display: swap;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 26%;
}
@font-face {
  font-family: "Shantell Fallback";
  src: local("Comic Sans MS"), local("Arial"); size-adjust: 100%; ascent-override: 96%; descent-override: 28%;
}
:root {
  --sc-canvas:     #F4EED3;   
  --sc-surface:    #FBF7E6;
  --sc-ink:        #172019;   
  --sc-ink-soft:   #48523F;
  --sc-accent:     #1F4D2B;   
  --sc-accent-ink: #F4EED3;
  --sc-font-display: "Bricolage", "Bricolage Fallback", system-ui, sans-serif;
  --sc-font-text:    "Bricolage", "Bricolage Fallback", system-ui, sans-serif;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --sc-shadow-color: 38 45% 18%;
  --sc-edge: none;
  --marker: "Shantell", "Shantell Fallback", "Comic Sans MS", cursive;
  --carto: #FF7A2E;
  --carto-ink: #1B1A16;
  --verd-tendre: #9BE58A;
  --verd-fosc: #14301C;
  --toldo: #A9D691;
  --toldo-ink: #14301C;
  --cinta: rgb(241 233 206 / 0.82);
  --linia: #D9D0A8;
  --barra: 64px;
  --ombra-carto: 0 1px 1px hsl(38 45% 18% / .16), 0 12px 24px -10px hsl(38 45% 18% / .42);
  --r-foto: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sc-canvas:     #131A14;
    --sc-surface:    #1B251C;
    --sc-ink:        #EFE9CF;
    --sc-ink-soft:   #BDB89E;
    --sc-accent:     #A8DC8E;
    --sc-accent-ink: #10170F;
    --sc-hairline: color-mix(in oklab, var(--sc-ink) 16%, transparent);
    --sc-shadow-color: 120 30% 2%;
    --toldo: #26452C;
    --toldo-ink: #EFE9CF;
    --cinta: rgb(226 218 190 / 0.7);
    --linia: #2F3B30;
    --ombra-carto: 0 1px 1px hsl(120 30% 2% / .5), 0 14px 28px -10px hsl(120 30% 2% / .7);
  }
}
html { scroll-padding-top: calc(var(--barra) + 8px); }
body {
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  font-stretch: 96%;
}
.sc-grain { contain: strict; opacity: .05; }
.sc-grain::before { inset: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: .75rem; }
img { height: auto; }
.titol {
  font-family: var(--sc-font-display);
  font-weight: 800; font-stretch: 84%;
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.6rem);
  line-height: 1.0; letter-spacing: -0.028em;
  color: var(--sc-accent);
  text-wrap: balance; margin: 0;
}
.entrada {
  font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.35rem);
  line-height: 1.5; color: var(--sc-ink-soft);
  max-width: 44ch; text-wrap: pretty; margin: 1rem 0 0;
}
.boto {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: 0 1.45rem;
  border-radius: 999px; border: 0;
  font: 700 1.02rem/1 var(--sc-font-text); font-stretch: 92%;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.boto svg { width: 1.2em; height: 1.2em; flex: none; }
.boto:active { transform: scale(.97); }
.boto--verd { background: var(--sc-accent); color: var(--sc-accent-ink); }
.boto--paper { background: var(--sc-surface); color: var(--sc-accent); box-shadow: inset 0 0 0 2px var(--sc-accent); }
.boto--petit { min-height: 42px; padding: 0 1.05rem; font-size: .96rem; }
@media (hover: hover) and (pointer: fine) {
  .boto--verd:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
  .boto--paper:hover { background: var(--sc-canvas); }
}
@media (prefers-color-scheme: dark) {
  .boto--verd:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); }
}
.cartell {
  position: relative; isolation: isolate;
  background-color: var(--carto);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.18  0 0 0 0 0.05  0 0 0 .22 0'/></filter><rect width='120' height='120' filter='url(%23f)'/></svg>");
  color: var(--carto-ink);
  font-family: var(--marker);
  padding: 1.15rem 1.3rem 1.25rem;
  border-radius: 3px 5px 4px 6px / 4px 3px 6px 4px;
  box-shadow: var(--ombra-carto);
}
.cartell p { margin: 0; }
.cinta {
  position: absolute; top: -12px; left: 50%; z-index: 2;
  width: 76px; height: 24px; translate: -50% 0; rotate: 3deg;
  background: var(--cinta);
  box-shadow: 0 1px 2px hsl(38 30% 20% / .18);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 55%);
}
.cartell__label { font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.cartell__nom { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 800; line-height: 1.05; }
.cartell__nota { font-size: 1.02rem; font-weight: 600; line-height: 1.25; margin-top: .3rem; }
.toldo {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--barra);
  background: var(--toldo); color: var(--toldo-ink);
}
.toldo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 11px;
  background: radial-gradient(circle at 12px 0, var(--toldo) 10.5px, transparent 11.5px) 0 0 / 24px 11px repeat-x;
  filter: drop-shadow(0 2px 1px hsl(38 40% 20% / .14));
}
.toldo__in {
  height: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem);
}
.toldo__marca {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.toldo__marca img { width: 40px; height: 40px; border-radius: 50%; }
.toldo__marca span {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 86%;
  font-size: 1.08rem; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.toldo__estat {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .95rem; font-weight: 600; min-width: 6.5em; white-space: nowrap;
}
.punt { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; flex: none; }
[data-obert="1"] .punt { background: currentColor; }
.toldo__lang {
  font-weight: 700; font-size: .95rem; color: inherit; text-decoration: none;
  padding: .45rem .55rem; border-radius: 6px;
}
.toldo__lang:hover { text-decoration: underline; text-underline-offset: .25em; }
@media (prefers-color-scheme: dark) {
  .toldo .boto--verd { background: var(--sc-accent); color: var(--sc-accent-ink); }
}
.porta { padding-top: var(--barra); }
.porta__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  min-height: calc(100svh - var(--barra));
}
.porta__copy {
  align-self: center;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 6vh, 4rem) max(var(--sc-gutter), calc((100vw - var(--sc-maxw)) / 2 + var(--sc-gutter)));
}
.porta__h1 {
  font-family: var(--sc-font-display);
  font-weight: 800; font-stretch: 80%;
  font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4.6rem);
  line-height: .95; letter-spacing: -0.032em;
  color: var(--sc-accent);
  text-wrap: balance; margin: 0; max-width: 16ch;
}
.porta__sub {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.5;
  color: var(--sc-ink-soft); max-width: 34ch; margin: 1.25rem 0 0; text-wrap: pretty;
}
.porta__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.porta__escena { position: relative; min-height: 32rem; }
.porta__plans { position: absolute; inset: 0; overflow: clip; }
.porta__plans::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 96px; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sc-canvas));
}
.pla { position: absolute; }
.pla img { display: block; max-width: none; }
.pla--lluny { inset: -9% 0 -9% 0; z-index: 1; }
.pla--lluny img { width: 100%; height: 100%; object-fit: cover; object-position: 6% 28%; }
.pla--prop { left: -9%; right: -14%; bottom: -26px; z-index: 3; }
.pla--prop img { width: 100%; height: auto; }
.cartell--horari {
  position: absolute; z-index: 5;
  left: clamp(-4.5rem, -3.5vw, -2rem); top: 46%;
  width: 16rem; rotate: -4deg;
  padding: 1.25rem 1.35rem 1.2rem;
}
.cartell--horari .cartell__label { font-size: 1.05rem; font-weight: 700; }
.cartell__linia { font-size: 1.42rem; font-weight: 700; line-height: 1.16; }
.cartell__linia--dia { font-size: 1.2rem; font-weight: 600; margin-top: .25rem !important; }
.cartell__linia:empty { display: none; }
.cartell__estat {
  margin-top: .65rem !important; padding-top: .55rem;
  font-size: 1.04rem; font-weight: 700; line-height: 1.25; min-height: 2.5em;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat;
}
.octubre { padding-block: clamp(5rem, 10vw, 9.5rem) clamp(5.5rem, 11vw, 10rem); }
.octubre__cap { max-width: 42rem; }
.aparador {
  list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.25rem); row-gap: clamp(2.5rem, 5vw, 4rem);
}
.peca { position: relative; align-self: start; }
.peca img { display: block; width: 100%; height: auto; border-radius: var(--r-foto); }
.peca--a { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.peca--b { grid-column: 7 / span 6; grid-row: 1; margin-top: 2.5rem; }
.peca--c { grid-column: 6 / span 5; grid-row: 2; }
.cartell--peca { position: absolute; width: max-content; max-width: 16rem; }
.peca--a .cartell--peca { right: -1.6rem; bottom: 2.2rem; rotate: -3deg; }
.peca--b .cartell--peca { left: 1.5rem; bottom: -1.9rem; rotate: 2.5deg; }
.peca--c .cartell--peca { right: 1.25rem; bottom: -1.6rem; rotate: -2deg; }
.octubre__peu { margin: clamp(3.5rem, 6vw, 5rem) 0 0; color: var(--sc-ink-soft); max-width: 52ch; }
.octubre__peu a { color: var(--sc-accent); font-weight: 700; }
.donve { position: relative; }
.donve__stage { background: var(--sc-canvas); padding-top: var(--barra); }
.ancora { position: absolute; left: 0; width: 1px; height: 1px; }
.donve__grid {
  height: calc(100% - 5.5rem);
  width: min(78rem, 100% - 2 * var(--sc-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.donve__esq { display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; }
.cartell--km { width: min(27rem, 100%); rotate: -2deg; padding: 1.5rem 1.7rem 1.4rem; }
.cartell--km > :not(.cinta):not(.cartell__verd) { position: relative; z-index: 1; }
.cartell__verd {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: var(--verd-tendre); opacity: var(--g, 0);
}
.cartell__titol { font-family: var(--marker); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + .9vw, 2.05rem); line-height: 1; margin: 0; }
.km__productes { position: relative; height: 1.45em; margin-top: .55rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 700; }
.km__productes p { position: absolute; inset: 0; opacity: var(--o, 0); white-space: nowrap; }
.km { list-style: none; margin: .5rem 0 0; padding: 0; }
.km__fila {
  position: relative; display: flex; align-items: baseline; gap: .55rem;
  font-weight: 800; font-size: clamp(2.05rem, 1.3rem + 2.1vw, 3rem); line-height: 1.12;
  clip-path: inset(-15% calc((1 - var(--w, 0)) * 102%) -15% -2%);
  width: max-content; padding-right: .2em;
}
.km__de { font-size: .48em; font-weight: 600; }
.km__val { position: relative; display: inline-block; }
.km__ratlla {
  position: absolute; left: -7%; top: 24%; width: 114%; height: .55em; overflow: visible;
  pointer-events: none;
}
.km__ratlla path {
  fill: none; stroke: var(--carto-ink); stroke-width: 4.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--x, 0));
}
.km__nota { font-size: .98rem; margin-top: .55rem !important; opacity: var(--n, 0); }
.donve__creix { opacity: var(--c, 0); max-width: 30rem; }
.donve__creix p { margin: 0; font-size: 1.12rem; line-height: 1.45; color: var(--sc-ink); }
.tira { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 5.6rem); gap: .55rem; }
.tira img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.donve__marc { margin: 0; height: min(78svh, 47rem); display: grid; grid-template-rows: 1fr auto; gap: .8rem; }
.marc__fotos { position: relative; border-radius: var(--r-foto); overflow: hidden; background: var(--sc-surface); }
.marc__fotos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: var(--o, 0);
}
.marc__fotos .marc__hort { opacity: 1; clip-path: circle(var(--r, 0%) at 50% 56%); }
.marc__peu { position: relative; min-height: 1.6em; font-size: 1.05rem; color: var(--sc-ink-soft); }
.marc__peu > span { position: absolute; inset: 0; opacity: var(--o, 0); }
.donve.is-static .donve__stage { position: static; height: auto; padding-block: calc(var(--barra) + 3rem) 4rem; }
.donve.is-static .donve__grid { height: auto; row-gap: 2rem; }
.donve.is-static .km__fila { --w: 1; }
.donve.is-static .km__ratlla { --x: 1; }
.donve.is-static .cartell__verd { --g: 1; }
.donve.is-static .km__productes p[data-km-prod="3"],
.donve.is-static .marc__peu span[data-km-cap="3"],
.donve.is-static .donve__creix { --o: 1; --c: 1; }
.donve.is-static .marc__hort { --r: 120%; }
.donve.is-static .km__nota { --n: 1; }
.escalivada { padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(5rem, 10vw, 9rem); }
.escalivada__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.25rem); align-items: center;
}
.escalivada__foto { grid-column: 1 / span 5; margin: 0; }
.escalivada__foto img { display: block; width: 100%; height: auto; border-radius: var(--r-foto); }
.escalivada__text { grid-column: 7 / span 5; }
.escalivada__text .boto { margin-top: 1.75rem; }
.escalivada__text p { margin: 0; }
.opinions { padding-block: clamp(4rem, 8vw, 7rem) clamp(6rem, 12vw, 10rem); }
.opinions__titol { display: flex; flex-direction: column; gap: .8rem; }
.estrelles { display: inline-flex; gap: .2rem; color: var(--sc-accent); }
.estrelles svg { width: 1.35rem; height: 1.35rem; }
.opinions__llista {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3.25rem);
}
.opinio { grid-column: 1 / span 7; }
.opinio--2 { grid-column: 5 / span 7; }
.opinio--3 { grid-column: 2 / span 9; }
.opinio blockquote { margin: 0; }
.opinio blockquote p {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-stretch: 92%;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2.05rem); line-height: 1.24; letter-spacing: -0.012em;
  color: var(--sc-ink); text-wrap: pretty;
}
.opinio__qui { margin: .6rem 0 0; color: var(--sc-ink-soft); font-size: .98rem; }
.opinions__totes { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.opinions__totes a { display: inline-flex; align-items: center; gap: .35rem; color: var(--sc-accent); font-weight: 700; }
.opinions__totes svg { width: 1.05em; height: 1.05em; }
.taulell__stage { background: var(--sc-canvas); padding-top: var(--barra); display: grid; grid-template-rows: 1fr auto; }
.taulell__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.cartell--tel {
  display: block; width: fit-content; max-width: 100%; margin-top: 2.25rem;
  padding: 1.5rem 1.8rem 1.6rem; text-decoration: none;
  rotate: calc(-8deg + 6deg * var(--land, 1));
  translate: 0 calc((1 - var(--land, 1)) * -28px);
  transition: box-shadow 160ms var(--sc-ease-out);
}
.cartell--tel .cartell__label { display: block; }
.cartell__tel {
  position: relative; display: block; width: max-content;
  font-weight: 800; font-size: min(clamp(2.2rem, 1.2rem + 2.8vw, 3.5rem), calc((100vw - 6rem) / 7.8)); line-height: 1.08;
  letter-spacing: .005em; white-space: nowrap; margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.cartell__tel::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.04em; height: .09em; border-radius: 9px;
  background: var(--carto-ink); transform-origin: 0 50%; transform: scaleX(var(--u, 1));
}
.cartell--tel .cartell__nota { display: block; font-size: 1.15rem; }
@media (hover: hover) and (pointer: fine) {
  .cartell--tel:hover { box-shadow: 0 1px 1px hsl(38 45% 18% / .16), 0 18px 34px -12px hsl(38 45% 18% / .5); }
}
.taulell__h3 {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 86%;
  font-size: 1.35rem; color: var(--sc-accent); margin: 0 0 .6rem;
}
.taulell__h3 + * { margin-top: 0; }
.taulell__dre > .taulell__h3:not(:first-child) { margin-top: 2rem; }
.horari { width: 100%; max-width: 24rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horari th { text-align: left; font-weight: 600; padding: .32rem .6rem .32rem 0; }
.horari td { text-align: right; padding: .32rem 0; color: var(--sc-ink-soft); }
.horari tr.is-avui th, .horari tr.is-avui td { color: var(--sc-ink); font-weight: 800; }
.horari tr.is-avui th { background: linear-gradient(var(--carto), var(--carto)) 0 88% / 100% .35em no-repeat; }
.taulell__petit { font-size: .92rem; color: var(--sc-ink-soft); margin: .5rem 0 0; }
.taulell__adreca { font-style: normal; line-height: 1.5; }
.taulell__enllacos { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .9rem 0 0; }
.taulell__enllacos a { display: inline-flex; align-items: center; gap: .4rem; color: var(--sc-accent); font-weight: 700; min-height: 44px; }
.taulell__enllacos svg { width: 1.2em; height: 1.2em; }
.peu { border-top: 1px solid var(--sc-hairline); padding-block: 1.1rem; font-size: .92rem; color: var(--sc-ink-soft); }
.peu__in { display: flex; align-items: center; gap: 1rem; padding-left: max(var(--sc-gutter), 11.5rem); }
.peu__in p { margin: 0; }
.peu__in p:last-child { margin-left: auto; }
.peu__in img { width: 34px; height: 34px; border-radius: 50%; }
.peu a { color: inherit; }
.moll { position: fixed; left: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 55; }
.moll__xip {
  display: grid; text-align: left; gap: .05rem; cursor: pointer;
  min-width: 9.2rem; padding: .55rem .95rem .6rem;
  border: 0; border-radius: 4px 5px 3px 6px;
  background-color: var(--carto); color: var(--carto-ink);
  font-family: var(--marker); rotate: -3deg;
  box-shadow: var(--ombra-carto);
  transition: background-color 260ms var(--sc-ease-out), rotate 200ms var(--sc-ease-out);
}
.moll__xip[data-zero="1"] { background-color: var(--verd-tendre); }
.moll__xip[aria-expanded="true"] { rotate: 0deg; }
.moll__lbl { font-size: .82rem; font-weight: 600; line-height: 1.1; }
.moll__val { font-size: 1.4rem; font-weight: 800; line-height: 1.05; }
.moll__lbl, .moll__val { transition: opacity 160ms var(--sc-ease-out); }
.moll__xip.is-canvi .moll__lbl, .moll__xip.is-canvi .moll__val { opacity: 0; }
.moll__menu { position: absolute; left: 0; bottom: calc(100% + .7rem); }
.moll__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; justify-items: start; }
.moll__menu li {
  opacity: 0; translate: 0 12px; scale: .96;
  transition: opacity 180ms var(--sc-ease-out), translate 320ms cubic-bezier(.34, 1.45, .64, 1), scale 320ms cubic-bezier(.34, 1.45, .64, 1);
  transition-delay: calc((6 - var(--i)) * 34ms);
}
.moll.is-obert .moll__menu li { opacity: 1; translate: 0 0; scale: 1; transition-delay: calc((6 - var(--i)) * 34ms); }
.moll__menu a {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px;
  padding: .45rem 1rem .45rem .8rem; border-radius: 999px;
  background: var(--sc-surface); color: var(--sc-ink); text-decoration: none; font-weight: 650;
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / .18), 0 8px 18px -8px hsl(var(--sc-shadow-color) / .35);
}
.moll__menu a:hover { color: var(--sc-accent); }
.moll__km { font-family: var(--marker); font-weight: 800; color: var(--sc-accent); min-width: 3.9em; }
.moll__acc { display: none; }
@media (max-width: 860px) {
  :root { --barra: 56px; }
  .toldo__truca { display: none; }
  .toldo__marca span { font-size: .98rem; }
  .toldo__marca img { width: 34px; height: 34px; }
  .toldo__estat { font-size: .86rem; min-width: 0; }
  .porta__grid { grid-template-columns: 1fr; min-height: 0; }
  .porta__escena { order: -1; min-height: 0; height: 36svh; }
  .pla--lluny img { object-position: 46% 30%; }
  .pla--prop { left: -18%; right: -22%; bottom: -14px; }
  .cartell--horari { left: var(--sc-gutter); top: auto; bottom: -6.2rem; width: 13.6rem; padding: .95rem 1.1rem .9rem; rotate: -3deg; }
  .cartell__linia { font-size: 1.2rem; }
  .cartell__linia--dia { font-size: 1.05rem; }
  .cartell__estat { font-size: .96rem; min-height: 2.4em; margin-top: .45rem !important; padding-top: .4rem; }
  .porta__copy { padding: 7.4rem var(--sc-gutter) 5.5rem; }
  .porta__ctas { display: none; }
  .porta__h1 { font-size: clamp(2.3rem, 1.5rem + 3.8vw, 3rem); max-width: 14ch; }
  .porta__sub { font-size: 1.06rem; margin-top: .9rem; }
  .porta__ctas { margin-top: 1.4rem; }
  .porta__ctas .boto { flex: 1 1 auto; }
  .aparador { grid-template-columns: 1fr; row-gap: 3.5rem; }
  .peca--a, .peca--b, .peca--c { grid-column: 1; grid-row: auto; margin-top: 0; }
  .peca--a .cartell--peca, .peca--b .cartell--peca, .peca--c .cartell--peca { left: 1rem; right: auto; bottom: -1.6rem; }
  .donve__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; row-gap: 0; padding-top: .75rem; }
  .donve__marc { order: -1; height: 38svh; gap: .45rem; }
  .marc__peu { display: none; }
  .donve__grid { height: calc(100% - 76px); }
  .donve__esq { gap: .8rem; margin-top: -2.4rem; padding-left: .25rem; }
  .cartell--km { width: min(23rem, 92%); padding: 1.1rem 1.25rem 1.05rem; }
  .cartell__titol { font-size: 1.45rem; }
  .km__productes { font-size: 1.1rem; margin-top: .35rem; }
  .km__fila { font-size: 1.78rem; }
  .km__nota { font-size: .9rem; }
  .tira { display: none; }
  .donve__creix p { font-size: 1rem; }
  .donve.is-static .tira { display: grid; }
  .escalivada__grid { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .escalivada__foto, .escalivada__text { grid-column: 1; }
  .escalivada__foto img { max-height: 68svh; object-fit: cover; }
  .opinions__llista { grid-template-columns: 1fr; }
  .opinio, .opinio--2, .opinio--3 { grid-column: 1; }
  .taulell__stage { padding-top: calc(var(--barra) + 3rem); }
  .taulell__grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; align-content: center; padding-bottom: 2.5rem; }
  .peu__in { padding-left: var(--sc-gutter); }
  .cartell--tel { margin-top: 1.25rem; }
  .taulell__dre > .taulell__h3:not(:first-child) { margin-top: 1.25rem; }
  .horari th, .horari td { padding-block: .18rem; }
  .peu { padding-bottom: calc(1rem + 76px + env(safe-area-inset-bottom)); }
  .moll {
    left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: var(--sc-canvas);
    box-shadow: 0 -1px 0 var(--sc-hairline);
  }
  .moll__xip { min-width: 0; flex: 0 1 auto; padding: .4rem .7rem .45rem; rotate: -2deg; }
  .moll__lbl { font-size: .74rem; }
  .moll__val { font-size: 1.12rem; }
  .moll__menu { left: .75rem; bottom: calc(100% + .6rem); }
  .moll__acc {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 48px; border-radius: 999px; text-decoration: none; font-weight: 700;
  }
  .moll__acc svg { width: 1.25em; height: 1.25em; }
  .moll__acc--truca { flex: 1 1 auto; background: var(--sc-accent); color: var(--sc-accent-ink); }
  .moll__acc--ruta { width: 48px; flex: none; background: var(--sc-surface); color: var(--sc-accent); box-shadow: inset 0 0 0 2px var(--sc-accent); }
}
@media (max-width: 380px) {
  .toldo__in { gap: .6rem; }
  .toldo__marca { min-width: 0; gap: .5rem; }
  .toldo__marca span { font-size: .88rem; white-space: normal; line-height: 1.02; max-width: 6.2em; }
  .toldo__estat [data-estat-text] { font-size: .8rem; }
  .km__fila { font-size: 1.6rem; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .porta__escena { height: 36svh; }
  .donve__marc { height: 32svh; }
}
@media (prefers-reduced-motion: reduce) {
  .moll__menu li, .moll.is-obert .moll__menu li { transition: opacity 120ms linear; translate: none; scale: none; }
  .cartell--tel { rotate: -2deg; translate: none; }
}
.taulell.is-flow .taulell__stage { position: static; height: auto; min-height: 0; }
.taulell.is-flow .cartell--tel { --land: 1; }
@media (max-width: 860px) {
  .donve__esq { position: relative; z-index: 2; }
}
.num-ample { white-space: nowrap; }
.toldo__nota {
  display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none;
  font-weight: 700; font-size: .95rem; padding: .4rem .5rem; border-radius: 6px; white-space: nowrap;
}
.toldo__nota svg { width: 1.05em; height: 1.05em; }
.toldo__nota:hover span { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 1100px) { .toldo__nota { display: none; } }
@media (max-width: 860px) { .num-ample { display: none; } }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.toldo__in { padding-left: max(var(--sc-gutter), env(safe-area-inset-left)); padding-right: max(var(--sc-gutter), env(safe-area-inset-right)); }
.moll__menu { overscroll-behavior: contain; }
@media (hover: hover) and (pointer: fine) {
  .moll__xip:hover { rotate: -1deg; }
  .toldo__lang:hover, .toldo__nota:hover { background: color-mix(in oklab, var(--toldo-ink) 8%, transparent); }
}
@media (max-width: 860px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .moll { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
}
.cartell--tel:focus-visible, .moll__xip:focus-visible { outline-offset: 5px; }